quasarframework / quasar Goto Github PK
View Code? Open in Web Editor NEWQuasar Framework - Build high-performance VueJS user interfaces in record time
Home Page: https://quasar.dev
License: MIT License
Quasar Framework - Build high-performance VueJS user interfaces in record time
Home Page: https://quasar.dev
License: MIT License
For the default accordion and the Free - Can open multiple items simultaneously accordion the text realigns when opening.
I tried to send POST data to server using this code
` var thisVm = this;
quasar.make.a.post.request({
url: 'message/new',
data: {
title: thisVm.title,
content: thisVm.content,
},
xhrFields: {
withCredentials: false
}
})
.done(function(jsonObject) {
quasar.navigate.to.route('#/');
})
.fail(function(jqXHR, textStatus, errorThrown) {
console.log('uh, oh... the request failed...', errorThrown);
});
`
but the form data sent as string
I think it would also be nice if instead of the current style, it "fills up" as you drag it, i.e. the right side of the slider is grey and the selected portion is blue
Does quasar has any default template like ionic ($ ionic start myApp tabs)?
I hope to help you guys soon. I'm in love with VueJS and I'll try quasar today.
Not a bug, but rather a discussion about pages/views structuration (OK to use Github issues for that or you prefer a more appropriate place ?)
Putting all the components in the /components folder is not convenient because the number of components (layouts, views, ui blocks, custom widgets, ...) quickly grows. What I did in my app is using different folders : /components, /layouts, /pages. Initial version of Quasar was also based on multiple folders (and one folder for each artefact, which was quite "heavy", the use of .vue files in 0.5.0 was a great improvement !).
Extract from my router.js file :
let routes = {
// Default
'/': {
component: require('layouts/LayoutMain.vue'),
subRoutes: {
'/search': {component: require('pages/PageSearch.vue')},
'/item': {component: require('pages/PageItem.vue')}
}
},
// Default
'/login': {
component: require('layouts/LayoutLogin.vue'),
subRoutes: {
'/': {component: require('pages/PageLogin.vue')},
}
}
}
Extract from my weback.base.conf.js file :
resolve: {
extensions: ['', '.js', '.vue'],
fallback: [path.join(__dirname, '../node_modules')],
alias: {
'quasar': path.resolve(__dirname, '../node_modules/quasar-framework/'),
'src': path.resolve(__dirname, '../src'),
'assets': path.resolve(__dirname, '../src/assets'),
'components': path.resolve(__dirname, '../src/components'),
'layouts': path.resolve(__dirname, '../src/layouts'),
'pages': path.resolve(__dirname, '../src/pages')
}
},
Remark : customize the existing load() function (in router.js) to pass it for example 'layouts/LayoutMain.vue' or 'pages/PageSearch.vue' doesn't work, certainly because of the statically analysys of the dependencies by Webpack.
About the responsability of layouts, views, what do you think about putting header/footer UI parts in the views rather than in the layouts ? The header includes the title, icon, sometimes subtitles, and those informations are specific to the current view. If we include its to the layout, caching pages would be difficult because each time the user returns to the previous page, we would have to "update" the header/footer part (I currently have this real case on my app !).
My proposal : header/footer in the "view", and all the other parts (mainly drawers) in the "layout".
A "view" just have to show the drawer buttons if the layout it belongs has drawer(s).
In Quasar documentation, the mobile demo view on the right of each page is truncated on my screen (1280 * 1024 px). I have to zoom out (90%) to reach the "View source" and "Desktop view" buttons.
This behaviour was not present a week or two ago when I discovered Quasar.
Let's improve Modals!
Besides calling Modal.create()
we should be able to use <quasar-modal>
tags with v-ref
in Vue HTML templates. One of the main advantages of using a tag for Modals is that it enables you to use page's data scope in your Modal; no need anymore to tamper with its scope data like:
import { Modal } from 'quasar'
let modal = Modal.create(....)
// now access and change:
modal.vm.$data
Do you have any production apps using the framework? Any example from real world apps would be great.
Anyway amazing job you did here.
I really like the work being done here.
Has there been any thought to hook GraphQL communications to the server to get persisted state with Quasar?
Scott
When adding an event listener v-on:click on an element inside a quasar-dropdown, the event listener doesn't work. For example :
<span v-on:click="event1()" class="label">Test</span>
The problem comes from the folllowing code in dropdown-common.js, that close the dropdown on next mousedown event everywhere on the page.
document.body.addEventListener('mousedown', this.close)
In quasar-infinite-scroll component, the handler method is called each time the user is scrolling, but it should scroll only when the user is at the bottom of the block. Currently, this behaviour make the page load new items several times per seconds.
Even in the infinite-scroll demo page, the loading is done when user scrolls to the 3th item, but we expect is to be done only when the user reach the end of the block/page.
Thanks for this amazing framework. I was surprised by the completeness of the components collection. One I do miss, is the datepicker component. Any plans to include it?
Some inspiration:
http://loujiayu.github.io/vue-material-design/#!/components/datepicker
https://github.com/hilongjw/vue-datepicker
Let's improve Toolbars!
Scrolling should affect Toolbar height/position.
Can be configured in multiple ways when user scrolls the page view:
Enhancement scheduled for v0.5.1 in a few days
Hello @rstoenescu
would you been interested in setting up quasar on https://www.bountysource.com/ ? I'd like to contribute a bit :)
Cheers,
Peter
Reading the Material Design guidelines got me thinking a bit. Here are some of the things we can do for Toasts:
Narrow screen width (phone) specifications:
Bigger screen width (tablet/desktop) specifications:
Looking forward to your comments!
On android it works.
It fails on ios with blank screen and with this message:
test[68142:1449022] Resetting plugins due to page load.
I then debugged js with this in script tag:
<script type="text/javascript">
window.onerror = function (errorMsg, url, lineNumber) {
alert('Error: ' + errorMsg + ' Script: ' + url + ' Line: ' + lineNumber);
}
@@appManifest
quasar.boot(function() {
quasar.start.app();
});
</script>
and got this alert:
Error: Error: Cannot load page. Script: undefined Line: 26
Can I remove crosswalk from cordova?
I know that removing crosswalk may cause apps not working on older device. But there might be other consideration such as making smaller footprint by removing crosswalk.
Is there a way to display the appearance of the app on both platforms in browser?
WIth quasar-tabs component, how can we set the active tab ?
This snipped doesn't work for me :
<quasar-tab icon="menu" :active="selectedTab == 'main'" target="#tab-main">
Main menu
</quasar-tab>
<quasar-tab icon="search" :active="selectedTab == 'search'" target="#tab-search">
Search
</quasar-tab>
The search tab is shown the first time we set selectedTab to "search" value, but not the following ones.
And how to know which quasar-tab is currently shown ? Maybe by providing the quasar-tab component a 'selectedTab' prop that it has to automatically fill with the quasar-tab id/reference or something else.
My use case : programmatically change the selected tab by setting a component data.
Window width related CSS classes works by first setting "display:none" for all those classes and then display each of them depending of the window width (with media-query CSS). But some components have their own display CSS instructions that overrides the windows width related CSS classes.
Possible fix, that works for me : just move all window width related CSS classes at the end of the CSS file to take precedence over the components CSS instructions (may cause some side effects, not tested).
I was wondering if Vue 2.0 conversion would be on the roadmap at some point?
Did I already ask this question? I just got a lot of deja vu and I went looking through the issues, but didn't find anything. ๐
Scott
When following the new 0.5.0 "Getting started", after 'quasar init', 'quasar dev' command throws the following error :
Error: Cannot find module 'express'
at Function.Module._resolveFilename (module.js:440:15)
at Function.Module._load (module.js:388:25)
at Module.require (module.js:468:17)
at require (internal/module.js:20:19)
at Object.<anonymous> (J:\disque\workspace\sarqua\build\script.dev.js:3:13)
at Module._compile (module.js:541:32)
at Object.Module._extensions..js (module.js:550:10)
at Module.load (module.js:458:32)
at tryModuleLoad (module.js:417:12)
at Function.Module._load (module.js:409:3)
It's because node modules are not installed yet. We have to add a 'npm install' step just after the 'quasar init' step.
@media(max-width:600px) {
.block-btn {
width: 100%;
}
}
transformClassesWithDexForArmv7DebugException in thread "main" java.lang.UnsupportedClassVersionError: com/android/dx/command/Main : Unsupported major.minor version 52.0
How can I solve this error?
Thanks
Let's improve Input Textboxes!
Would be great to optional have autocomplete functionality for input textboxes.
Suggestions will use Popover component.
Hello, I have been developing a personal framework for about 5 years now and I am considering to share it and make it public, however it has come to my attention that, unfortunately, your framework shares the same name as mine. I am writing this issue in order to find out if it would be a problem for you and supposedly to find a solution to the problem. Thank you for your attention and if no response is given I will assume that everything is alright.
The sliding area in which user can slide for opening the drawer is not large enough. In fact, with the Chrome mobile view (devtools), we have to reach the limit of the screen to make the drawer appear, with a very little marge of 1/5 px. For example, with the cursor placed here (see screenshot below), the sliding is not possible. Not tested with other devices, but I think there are issues too.
How can I import / use vue component inside quasar?
e.g. https://github.com/GuillaumeLeclerc/vue-google-maps
It would be a good thing to include all the repo files in the npm published package.
Use case : override Quasar components, for example for override the dropdown component :
MyCustomDropdown.vue (redefines the Quasar dropdown component but inherits the same mixin :
<template>
<div class="quasar-dropdown">
<div class="quasar-dropdown-target" @click="toggle">
<slot name="target"></slot>
</div>
<div v-el:menu class="quasar-dropdown-menu" style="display: none;">
<slot></slot>
</div>
</div>
</template>
<script>
import vm from 'quasar-framework/src/vue-components/dropdown/dropdown-common.js'
export default {
mixins: [vm],
destroy() {
document.body.removeEventListener('mousedown', this.close)
},
methods: {
open(event) {
console.log('open')
},
mycustommethod() {
}
}
}
</script>
Several open source projects do it, including vue, vue-router, vue-i18n, etc.
I thought to have the 'parallax effect' the background should move (at a lower rate) as well.
When icons have names with multiple words, it almost never works on Cordova. Either they are not displayed at all or more than one icon is shown (wrong ones in any case)
Example. This one doesn't show up on Cordova:
vertical_align_bottom
Example. This one show 2 icons (power and settings) on cordova disrupting the grid:
<i>power_settings_new</i>
Generally they work on desktop (Chrome and Firefox). I found the following not working with browsers though:
star_rate
Star icon is shown but Page Title is not aligned as the second word of the icon seems to take some space.
In the quasar-search component, the placeholder should be configurable.
Choosing the icon could be useful too (even if "search" icon is OK for majority of use cases).
Quasar-tab component currently takes a "target" property, of type String, which value is a "DOM element selector for target" (identify the content tab element associated with this tab).
It would be better if it also takes a HTMLElement value, it lets us reference the tab content elements using the v-el directive, which is cleaner than using dom selector.
Example :
<quasar-tabs>
<quasar-tab icon="home" :target="$els.tab1" active=true >Tab1</quasar-tab>
<quasar-tab icon="list" :target="$els.tab2">Tab2</quasar-tab>
</quasar-tabs>
<!-- Targets -->
<div v-el:tab1>
...tab content 1...
</div>
<div v-el:tab2>
...tab content 2...
</div>
Hi there,
Before, I want to say that you did an amazing job with Quasar Framework ๐
Do you plan to add the support of Electron to develop desktop applications in the future?
Thank you
I am not sure whether to bother you with this or not, but it might be of help. I merely bringing this up since it kind of contrasts with the quality of docs, framework itself, etc. As a fan of the 'total quality' concept I feel like addressing it. I am on a 13 inch retina display and some parts of your website seem slightly less sharp. For sure this part:
And maybe also the fonts in the toolbar, but maybe that's a color issue or something:
This part is sharp but messy due to small font and different size and not easy on the eyes colors:
Now that I am at it, it is also a bit unclear why the top three are apart from the other features:
If you really consider these three the 'top features' then maybe give them slightly more weight in font as well or something else, as now they just have different background which 'confuses me'.
To show differences in sharpness a picture of total page on my system:
The Quasar modal constructor takes a component config object instead of a VM instance. This doesn't allow us to configure the modal content.
For example, I want to pass dynamic data to my Modal window like as I do for other UI components but I can't because it's the Modal which is responsible for instancing the VM from the component config. I can pass data to the Modal by other means (events / vuex / get component ref and set data/props values) but it's not very clean.
I think it will be more convenient to pass a VM instance (created either by javascript with new Operator or by the HTML template). I will make the Modal component as a thin wrapper that just take a instanciated component (VM) and shows it on a modal window. With this solution, the modal window can keep its state while being hidden/shown several times (currently not possible to hide the Modal, only to close/destroy it).
How can I create / configure parameterized route for page, such as #/book/:bookId
I can't seem to find it on the docs. Seems currently the API docs only cover adding custom router.
I'm testing quasar and I'm very excited, but not working hot reload.
My index.value file is changed and nothing happens
Can you help me?
Lists are probably one of the main elements when building a UI. Let's make them better!
List items should be called tiles.
Waiting for your comments!
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.