├── dev ├── assets │ ├── map.png │ ├── avatar.png │ ├── donuts.png │ ├── quasar.jpg │ ├── boy-avatar.png │ ├── guy-avatar.png │ ├── mountains.jpg │ ├── parallax1.jpg │ ├── parallax2.jpg │ └── linux-avatar.png ├── statics │ ├── map.png │ ├── quasar.jpg │ ├── boy-avatar.png │ ├── guy-avatar.png │ ├── mountains.jpg │ ├── parallax1.jpg │ ├── parallax2.jpg │ ├── linux-avatar.png │ ├── quasar-logo.png │ └── linux-avatar-2.png ├── components │ ├── css │ │ ├── flex-addon.styl │ │ ├── shadows.vue │ │ ├── flex-test.vue │ │ └── material-ripples.vue │ ├── web-tests │ │ ├── c.vue │ │ ├── b.vue │ │ ├── a.vue │ │ ├── fast-test.vue │ │ └── breakpoints.vue │ ├── components │ │ ├── video-embedding.vue │ │ ├── back-to-top.vue │ │ ├── scroll-area.vue │ │ ├── scroll-fire.vue │ │ ├── infinite-scroll.vue │ │ ├── popover-test.vue │ │ └── no-ssr.vue │ ├── touch-directives │ │ ├── touch-style.styl │ │ └── touch-hold.vue │ ├── other │ │ ├── screen-plugin.vue │ │ ├── platform-detection.vue │ │ ├── app-visibility.vue │ │ ├── vue-transitions.vue │ │ ├── app-fullscreen.vue │ │ ├── cookies.vue │ │ └── close-overlay.vue │ ├── meta │ │ ├── layout_2.vue │ │ ├── layout_1.vue │ │ └── pages │ │ │ ├── third.vue │ │ │ └── second.vue │ ├── new-layout │ │ └── pages │ │ │ ├── b.vue │ │ │ └── c.vue │ ├── index.vue │ └── form │ │ └── rating.vue ├── app.styl ├── pages.js ├── app.entry-client.js ├── spa.index.html ├── ssr.index.html ├── app.entry-server.js └── app.js ├── src ├── components │ ├── alert │ │ ├── index.js │ │ ├── alert.ios.styl │ │ └── alert.mat.styl │ ├── chip │ │ └── index.js │ ├── field │ │ └── index.js │ ├── icon │ │ ├── index.js │ │ └── QIcon.js │ ├── input │ │ ├── index.js │ │ └── input-types.js │ ├── knob │ │ ├── index.js │ │ ├── knob.ios.styl │ │ └── knob.mat.styl │ ├── radio │ │ ├── index.js │ │ ├── radio.ios.styl │ │ ├── radio.mat.styl │ │ └── QRadio.js │ ├── range │ │ └── index.js │ ├── tree │ │ └── index.js │ ├── video │ │ ├── index.js │ │ ├── video.ios.styl │ │ ├── video.mat.styl │ │ └── QVideo.js │ ├── dialog │ │ └── index.js │ ├── editor │ │ ├── index.js │ │ ├── editor.ios.styl │ │ └── editor.mat.styl │ ├── no-ssr │ │ ├── index.js │ │ └── QNoSsr.js │ ├── rating │ │ ├── index.js │ │ ├── rating.ios.styl │ │ └── rating.mat.styl │ ├── search │ │ ├── index.js │ │ ├── search.ios.styl │ │ └── search.mat.styl │ ├── select │ │ ├── index.js │ │ ├── select.ios.styl │ │ └── select.mat.styl │ ├── slider │ │ └── index.js │ ├── toggle │ │ ├── index.js │ │ ├── toggle.mat.styl │ │ ├── toggle.ios.styl │ │ └── QToggle.js │ ├── ajax-bar │ │ ├── index.js │ │ ├── ajax-bar.ios.styl │ │ └── ajax-bar.mat.styl │ ├── popover │ │ ├── index.js │ │ ├── popover.ios.styl │ │ └── popover.mat.styl │ ├── tooltip │ │ ├── index.js │ │ ├── tooltip.mat.styl │ │ └── tooltip.ios.styl │ ├── checkbox │ │ ├── index.js │ │ ├── checkbox.ios.styl │ │ └── checkbox.mat.styl │ ├── parallax │ │ ├── index.js │ │ ├── parallax.ios.styl │ │ └── parallax.mat.styl │ ├── progress │ │ └── index.js │ ├── uploader │ │ ├── index.js │ │ ├── uploader.ios.styl │ │ └── uploader.mat.styl │ ├── chat │ │ └── index.js │ ├── jumbotron │ │ ├── index.js │ │ ├── jumbotron.ios.styl │ │ ├── jumbotron.mat.styl │ │ └── QJumbotron.js │ ├── pagination │ │ ├── index.js │ │ ├── pagination.ios.styl │ │ └── pagination.mat.styl │ ├── popup-edit │ │ └── index.js │ ├── action-sheet │ │ ├── index.js │ │ ├── action-sheet.mat.styl │ │ └── action-sheet.ios.styl │ ├── chips-input │ │ ├── index.js │ │ ├── chips-input.ios.styl │ │ └── chips-input.mat.styl │ ├── collapsible │ │ ├── index.js │ │ ├── collapsible.ios.styl │ │ └── collapsible.mat.styl │ ├── context-menu │ │ └── index.js │ ├── input-frame │ │ └── index.js │ ├── option-group │ │ ├── index.js │ │ ├── option-group.mat.styl │ │ └── option-group.ios.styl │ ├── scroll-area │ │ ├── index.js │ │ ├── scroll-area.ios.styl │ │ └── scroll-area.mat.styl │ ├── autocomplete │ │ ├── index.js │ │ ├── autocomplete.ios.styl │ │ └── autocomplete.mat.styl │ ├── inner-loading │ │ ├── index.js │ │ ├── inner-loading.ios.styl │ │ ├── inner-loading.mat.styl │ │ └── QInnerLoading.js │ ├── pull-to-refresh │ │ ├── index.js │ │ ├── pull-to-refresh.ios.styl │ │ └── pull-to-refresh.mat.styl │ ├── infinite-scroll │ │ └── index.js │ ├── table │ │ ├── table-expand.js │ │ ├── index.js │ │ ├── QTr.js │ │ ├── table-filter.js │ │ ├── QTd.js │ │ ├── table-column-selection.js │ │ ├── QTableColumns.js │ │ └── QTh.js │ ├── slide-transition │ │ ├── index.js │ │ ├── slide-transition.ios.styl │ │ └── slide-transition.mat.styl │ ├── fab │ │ ├── index.js │ │ ├── fab-mixin.js │ │ ├── QFabAction.js │ │ ├── fab.ios.styl │ │ └── fab.mat.styl │ ├── btn │ │ ├── btn-dropdown.ios.styl │ │ ├── btn-dropdown.mat.styl │ │ ├── index.js │ │ ├── QBtnGroup.js │ │ ├── btn-group.ios.styl │ │ └── btn-group.mat.styl │ ├── spinner │ │ ├── QSpinner.js │ │ ├── spinner-mixin.js │ │ ├── spinner.mat.styl │ │ ├── spinner.ios.styl │ │ ├── QSpinner.mat.js │ │ ├── QSpinnerInfinity.js │ │ ├── QSpinnerOval.js │ │ └── index.js │ ├── color │ │ └── index.js │ ├── modal │ │ └── index.js │ ├── toolbar │ │ ├── index.js │ │ ├── QToolbarTitle.js │ │ ├── toolbar.mat.styl │ │ ├── toolbar.ios.styl │ │ └── QToolbar.js │ ├── datetime │ │ ├── index.js │ │ └── datetime-props.js │ ├── timeline │ │ ├── index.js │ │ └── QTimeline.js │ ├── breadcrumbs │ │ ├── index.js │ │ ├── breadcrumbs.ios.styl │ │ ├── breadcrumbs.mat.styl │ │ └── QBreadcrumbsEl.js │ ├── card │ │ ├── QCardMain.js │ │ ├── QCardSeparator.js │ │ ├── index.js │ │ ├── QCardTitle.js │ │ ├── QCardMedia.js │ │ ├── QCardActions.js │ │ ├── QCard.js │ │ ├── card.ios.styl │ │ └── card.mat.styl │ ├── stepper │ │ ├── index.js │ │ └── QStepperNavigation.js │ ├── dot │ │ ├── dot.ios.styl │ │ └── dot.mat.styl │ ├── tab │ │ ├── index.js │ │ ├── QTab.js │ │ └── QTabPane.js │ ├── loading │ │ ├── loading.ios.styl │ │ └── loading.mat.styl │ ├── carousel │ │ ├── index.js │ │ ├── QCarouselControl.js │ │ └── QCarouselSlide.js │ ├── observables │ │ ├── index.js │ │ └── QWindowResizeObservable.js │ ├── list │ │ ├── QListHeader.js │ │ ├── QItemSeparator.js │ │ ├── index.js │ │ ├── QItem.js │ │ ├── QItemMain.js │ │ └── QList.js │ └── layout │ │ ├── index.js │ │ ├── QPageContainer.js │ │ └── QPage.js ├── utils │ ├── clone.js │ ├── filter.js │ ├── uid.js │ ├── throttle.js │ ├── open-url.js │ ├── frame-debounce.js │ ├── sort.js │ ├── debounce.js │ ├── escape-key.js │ ├── is.js │ ├── router-link.js │ ├── modal-fn.js │ ├── format.js │ ├── animate.js │ ├── dom.js │ └── prevent-scroll.js ├── css │ ├── ios.styl │ ├── mat.styl │ ├── core │ │ ├── touch.styl │ │ ├── elevation.styl │ │ ├── orientation.styl │ │ ├── mouse.styl │ │ ├── helpers.styl │ │ ├── ripples.styl │ │ ├── size.styl │ │ └── positioning.styl │ └── critical.styl ├── plugins │ ├── dialog.js │ ├── action-sheet.js │ ├── local-storage.js │ ├── session-storage.js │ ├── loading-bar.js │ ├── app-visibility.js │ ├── app-fullscreen.js │ └── addressbar-color.js ├── mixins │ ├── can-render.js │ ├── display-mode.js │ ├── align.js │ ├── parent-field.js │ ├── item.js │ ├── checkbox.js │ └── fullscreen.js ├── vue-plugin.js ├── index.esm.js ├── icons.js ├── directives.js ├── ssr-update.js ├── index.umd.js ├── directives │ ├── close-overlay.js │ ├── go-back.js │ └── scroll.js ├── utils.js ├── plugins.js ├── history.js └── i18n.js ├── .bithoundrc ├── .codeclimate.yml ├── .gitignore ├── .postcssrc.js ├── .editorconfig ├── circle.yml ├── jsconfig.json ├── .babelrc ├── .stylintrc ├── LICENSE ├── .github ├── CODE_OF_CONDUCT.md └── PULL_REQUEST_TEMPLATE.md └── .eslintrc.js /dev/assets/map.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abdelaziz18003/quasar/dev/dev/assets/map.png -------------------------------------------------------------------------------- /dev/assets/avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abdelaziz18003/quasar/dev/dev/assets/avatar.png -------------------------------------------------------------------------------- /dev/assets/donuts.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abdelaziz18003/quasar/dev/dev/assets/donuts.png -------------------------------------------------------------------------------- /dev/assets/quasar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abdelaziz18003/quasar/dev/dev/assets/quasar.jpg -------------------------------------------------------------------------------- /dev/statics/map.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abdelaziz18003/quasar/dev/dev/statics/map.png -------------------------------------------------------------------------------- /dev/components/css/flex-addon.styl: -------------------------------------------------------------------------------- 1 | @import '~variables' 2 | @import '../../src/css/flex-addon.styl' 3 | -------------------------------------------------------------------------------- /dev/statics/quasar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abdelaziz18003/quasar/dev/dev/statics/quasar.jpg -------------------------------------------------------------------------------- /src/components/alert/index.js: -------------------------------------------------------------------------------- 1 | import QAlert from './QAlert.js' 2 | 3 | export { 4 | QAlert 5 | } 6 | -------------------------------------------------------------------------------- /src/components/chip/index.js: -------------------------------------------------------------------------------- 1 | import QChip from './QChip.js' 2 | 3 | export { 4 | QChip 5 | } 6 | -------------------------------------------------------------------------------- /src/components/field/index.js: -------------------------------------------------------------------------------- 1 | import QField from './QField.js' 2 | 3 | export { 4 | QField 5 | } 6 | -------------------------------------------------------------------------------- /src/components/icon/index.js: -------------------------------------------------------------------------------- 1 | import QIcon from './QIcon.js' 2 | 3 | export { 4 | QIcon 5 | } 6 | -------------------------------------------------------------------------------- /src/components/input/index.js: -------------------------------------------------------------------------------- 1 | import QInput from './QInput.js' 2 | 3 | export { 4 | QInput 5 | } 6 | -------------------------------------------------------------------------------- /src/components/knob/index.js: -------------------------------------------------------------------------------- 1 | import QKnob from './QKnob.js' 2 | 3 | export { 4 | QKnob 5 | } 6 | -------------------------------------------------------------------------------- /src/components/radio/index.js: -------------------------------------------------------------------------------- 1 | import QRadio from './QRadio.js' 2 | 3 | export { 4 | QRadio 5 | } 6 | -------------------------------------------------------------------------------- /src/components/range/index.js: -------------------------------------------------------------------------------- 1 | import QRange from './QRange.js' 2 | 3 | export { 4 | QRange 5 | } 6 | -------------------------------------------------------------------------------- /src/components/tree/index.js: -------------------------------------------------------------------------------- 1 | import QTree from './QTree.js' 2 | 3 | export { 4 | QTree 5 | } 6 | -------------------------------------------------------------------------------- /src/components/video/index.js: -------------------------------------------------------------------------------- 1 | import QVideo from './QVideo.js' 2 | 3 | export { 4 | QVideo 5 | } 6 | -------------------------------------------------------------------------------- /.bithoundrc: -------------------------------------------------------------------------------- 1 | { 2 | "ignore": [ 3 | "dist/**", 4 | "test/**", 5 | "dev/**" 6 | ] 7 | } 8 | -------------------------------------------------------------------------------- /dev/assets/boy-avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abdelaziz18003/quasar/dev/dev/assets/boy-avatar.png -------------------------------------------------------------------------------- /dev/assets/guy-avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abdelaziz18003/quasar/dev/dev/assets/guy-avatar.png -------------------------------------------------------------------------------- /dev/assets/mountains.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abdelaziz18003/quasar/dev/dev/assets/mountains.jpg -------------------------------------------------------------------------------- /dev/assets/parallax1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abdelaziz18003/quasar/dev/dev/assets/parallax1.jpg -------------------------------------------------------------------------------- /dev/assets/parallax2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abdelaziz18003/quasar/dev/dev/assets/parallax2.jpg -------------------------------------------------------------------------------- /dev/statics/boy-avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abdelaziz18003/quasar/dev/dev/statics/boy-avatar.png -------------------------------------------------------------------------------- /dev/statics/guy-avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abdelaziz18003/quasar/dev/dev/statics/guy-avatar.png -------------------------------------------------------------------------------- /dev/statics/mountains.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abdelaziz18003/quasar/dev/dev/statics/mountains.jpg -------------------------------------------------------------------------------- /dev/statics/parallax1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abdelaziz18003/quasar/dev/dev/statics/parallax1.jpg -------------------------------------------------------------------------------- /dev/statics/parallax2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abdelaziz18003/quasar/dev/dev/statics/parallax2.jpg -------------------------------------------------------------------------------- /src/components/dialog/index.js: -------------------------------------------------------------------------------- 1 | import QDialog from './QDialog.js' 2 | 3 | export { 4 | QDialog 5 | } 6 | -------------------------------------------------------------------------------- /src/components/editor/index.js: -------------------------------------------------------------------------------- 1 | import QEditor from './QEditor.js' 2 | 3 | export { 4 | QEditor 5 | } 6 | -------------------------------------------------------------------------------- /src/components/no-ssr/index.js: -------------------------------------------------------------------------------- 1 | import QNoSsr from './QNoSsr.js' 2 | 3 | export { 4 | QNoSsr 5 | } 6 | -------------------------------------------------------------------------------- /src/components/rating/index.js: -------------------------------------------------------------------------------- 1 | import QRating from './QRating.js' 2 | 3 | export { 4 | QRating 5 | } 6 | -------------------------------------------------------------------------------- /src/components/search/index.js: -------------------------------------------------------------------------------- 1 | import QSearch from './QSearch.js' 2 | 3 | export { 4 | QSearch 5 | } 6 | -------------------------------------------------------------------------------- /src/components/search/search.ios.styl: -------------------------------------------------------------------------------- 1 | .q-toolbar .q-search 2 | background rgba(255, 255, 255, .25) 3 | -------------------------------------------------------------------------------- /src/components/search/search.mat.styl: -------------------------------------------------------------------------------- 1 | .q-toolbar .q-search 2 | background rgba(255, 255, 255, .25) 3 | -------------------------------------------------------------------------------- /src/components/select/index.js: -------------------------------------------------------------------------------- 1 | import QSelect from './QSelect.js' 2 | 3 | export { 4 | QSelect 5 | } 6 | -------------------------------------------------------------------------------- /src/components/slider/index.js: -------------------------------------------------------------------------------- 1 | import QSlider from './QSlider.js' 2 | 3 | export { 4 | QSlider 5 | } 6 | -------------------------------------------------------------------------------- /src/components/toggle/index.js: -------------------------------------------------------------------------------- 1 | import QToggle from './QToggle.js' 2 | 3 | export { 4 | QToggle 5 | } 6 | -------------------------------------------------------------------------------- /dev/assets/linux-avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abdelaziz18003/quasar/dev/dev/assets/linux-avatar.png -------------------------------------------------------------------------------- /dev/statics/linux-avatar.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abdelaziz18003/quasar/dev/dev/statics/linux-avatar.png -------------------------------------------------------------------------------- /dev/statics/quasar-logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abdelaziz18003/quasar/dev/dev/statics/quasar-logo.png -------------------------------------------------------------------------------- /src/components/ajax-bar/index.js: -------------------------------------------------------------------------------- 1 | import QAjaxBar from './QAjaxBar.js' 2 | 3 | export { 4 | QAjaxBar 5 | } 6 | -------------------------------------------------------------------------------- /src/components/popover/index.js: -------------------------------------------------------------------------------- 1 | import QPopover from './QPopover.js' 2 | 3 | export { 4 | QPopover 5 | } 6 | -------------------------------------------------------------------------------- /src/components/tooltip/index.js: -------------------------------------------------------------------------------- 1 | import QTooltip from './QTooltip.js' 2 | 3 | export { 4 | QTooltip 5 | } 6 | -------------------------------------------------------------------------------- /dev/statics/linux-avatar-2.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Abdelaziz18003/quasar/dev/dev/statics/linux-avatar-2.png -------------------------------------------------------------------------------- /src/components/checkbox/index.js: -------------------------------------------------------------------------------- 1 | import QCheckbox from './QCheckbox.js' 2 | 3 | export { 4 | QCheckbox 5 | } 6 | -------------------------------------------------------------------------------- /src/components/parallax/index.js: -------------------------------------------------------------------------------- 1 | import QParallax from './QParallax.js' 2 | 3 | export { 4 | QParallax 5 | } 6 | -------------------------------------------------------------------------------- /src/components/progress/index.js: -------------------------------------------------------------------------------- 1 | import QProgress from './QProgress.js' 2 | 3 | export { 4 | QProgress 5 | } 6 | -------------------------------------------------------------------------------- /src/components/uploader/index.js: -------------------------------------------------------------------------------- 1 | import QUploader from './QUploader.js' 2 | 3 | export { 4 | QUploader 5 | } 6 | -------------------------------------------------------------------------------- /src/components/chat/index.js: -------------------------------------------------------------------------------- 1 | import QChatMessage from './QChatMessage.js' 2 | 3 | export { 4 | QChatMessage 5 | } 6 | -------------------------------------------------------------------------------- /src/components/jumbotron/index.js: -------------------------------------------------------------------------------- 1 | import QJumbotron from './QJumbotron.js' 2 | 3 | export { 4 | QJumbotron 5 | } 6 | -------------------------------------------------------------------------------- /src/components/pagination/index.js: -------------------------------------------------------------------------------- 1 | import QPagination from './QPagination.js' 2 | 3 | export { 4 | QPagination 5 | } 6 | -------------------------------------------------------------------------------- /src/components/popup-edit/index.js: -------------------------------------------------------------------------------- 1 | import QPopupEdit from './QPopupEdit.js' 2 | 3 | export { 4 | QPopupEdit 5 | } 6 | -------------------------------------------------------------------------------- /src/components/action-sheet/index.js: -------------------------------------------------------------------------------- 1 | import QActionSheet from './QActionSheet.js' 2 | 3 | export { 4 | QActionSheet 5 | } 6 | -------------------------------------------------------------------------------- /src/components/chips-input/index.js: -------------------------------------------------------------------------------- 1 | import QChipsInput from './QChipsInput.js' 2 | 3 | export { 4 | QChipsInput 5 | } 6 | -------------------------------------------------------------------------------- /src/components/collapsible/index.js: -------------------------------------------------------------------------------- 1 | import QCollapsible from './QCollapsible.js' 2 | 3 | export { 4 | QCollapsible 5 | } 6 | -------------------------------------------------------------------------------- /src/components/context-menu/index.js: -------------------------------------------------------------------------------- 1 | import QContextMenu from './QContextMenu.js' 2 | 3 | export { 4 | QContextMenu 5 | } 6 | -------------------------------------------------------------------------------- /src/components/input-frame/index.js: -------------------------------------------------------------------------------- 1 | import QInputFrame from './QInputFrame.js' 2 | 3 | export { 4 | QInputFrame 5 | } 6 | -------------------------------------------------------------------------------- /src/components/option-group/index.js: -------------------------------------------------------------------------------- 1 | import QOptionGroup from './QOptionGroup.js' 2 | 3 | export { 4 | QOptionGroup 5 | } 6 | -------------------------------------------------------------------------------- /src/components/scroll-area/index.js: -------------------------------------------------------------------------------- 1 | import QScrollArea from './QScrollArea.js' 2 | 3 | export { 4 | QScrollArea 5 | } 6 | -------------------------------------------------------------------------------- /src/components/select/select.ios.styl: -------------------------------------------------------------------------------- 1 | body.desktop .q-select-highlight 2 | background $item-highlight-color !important 3 | -------------------------------------------------------------------------------- /src/components/select/select.mat.styl: -------------------------------------------------------------------------------- 1 | body.desktop .q-select-highlight 2 | background $item-highlight-color !important 3 | -------------------------------------------------------------------------------- /src/components/autocomplete/index.js: -------------------------------------------------------------------------------- 1 | import QAutocomplete from './QAutocomplete.js' 2 | 3 | export { 4 | QAutocomplete 5 | } 6 | -------------------------------------------------------------------------------- /src/components/inner-loading/index.js: -------------------------------------------------------------------------------- 1 | import QInnerLoading from './QInnerLoading.js' 2 | 3 | export { 4 | QInnerLoading 5 | } 6 | -------------------------------------------------------------------------------- /src/components/autocomplete/autocomplete.ios.styl: -------------------------------------------------------------------------------- 1 | body.desktop .q-select-highlight 2 | background $item-highlight-color !important 3 | -------------------------------------------------------------------------------- /src/components/autocomplete/autocomplete.mat.styl: -------------------------------------------------------------------------------- 1 | body.desktop .q-select-highlight 2 | background $item-highlight-color !important 3 | -------------------------------------------------------------------------------- /src/components/pull-to-refresh/index.js: -------------------------------------------------------------------------------- 1 | import QPullToRefresh from './QPullToRefresh.js' 2 | 3 | export { 4 | QPullToRefresh 5 | } 6 | -------------------------------------------------------------------------------- /src/components/infinite-scroll/index.js: -------------------------------------------------------------------------------- 1 | import QInfiniteScroll from './QInfiniteScroll.js' 2 | 3 | export { 4 | QInfiniteScroll 5 | } 6 | -------------------------------------------------------------------------------- /src/components/table/table-expand.js: -------------------------------------------------------------------------------- 1 | export default { 2 | data () { 3 | return { 4 | rowsExpanded: {} 5 | } 6 | } 7 | } 8 | -------------------------------------------------------------------------------- /src/components/slide-transition/index.js: -------------------------------------------------------------------------------- 1 | import QSlideTransition from './QSlideTransition.js' 2 | 3 | export { 4 | QSlideTransition 5 | } 6 | -------------------------------------------------------------------------------- /src/components/slide-transition/slide-transition.ios.styl: -------------------------------------------------------------------------------- 1 | .q-slide-transition 2 | transition height .3s cubic-bezier(.25, .8, .50, 1) !important 3 | -------------------------------------------------------------------------------- /src/components/slide-transition/slide-transition.mat.styl: -------------------------------------------------------------------------------- 1 | .q-slide-transition 2 | transition height .3s cubic-bezier(.25, .8, .50, 1) !important 3 | -------------------------------------------------------------------------------- /src/utils/clone.js: -------------------------------------------------------------------------------- 1 | export default function (data) { 2 | const s = JSON.stringify(data) 3 | if (s) { 4 | return JSON.parse(s) 5 | } 6 | } 7 | -------------------------------------------------------------------------------- /dev/app.styl: -------------------------------------------------------------------------------- 1 | .caption 2 | margin 35px 0 3 | padding 12px 0 12px 12px 4 | border-left 4px solid #027be3 5 | font-weight bold 6 | margin-left 10px 7 | -------------------------------------------------------------------------------- /src/components/fab/index.js: -------------------------------------------------------------------------------- 1 | import QFab from './QFab.js' 2 | import QFabAction from './QFabAction.js' 3 | 4 | export { 5 | QFab, 6 | QFabAction 7 | } 8 | -------------------------------------------------------------------------------- /src/components/btn/btn-dropdown.ios.styl: -------------------------------------------------------------------------------- 1 | .q-btn-dropdown-split .q-btn-dropdown-arrow 2 | padding 0 4px 3 | border-left 1px solid rgba(255, 255, 255, .3) 4 | -------------------------------------------------------------------------------- /src/components/btn/btn-dropdown.mat.styl: -------------------------------------------------------------------------------- 1 | .q-btn-dropdown-split .q-btn-dropdown-arrow 2 | padding 0 4px 3 | border-left 1px solid rgba(255, 255, 255, .3) 4 | -------------------------------------------------------------------------------- /src/components/inner-loading/inner-loading.ios.styl: -------------------------------------------------------------------------------- 1 | .q-inner-loading 2 | background $light-dimmed-background 3 | &.dark 4 | background $dimmed-background 5 | -------------------------------------------------------------------------------- /src/components/inner-loading/inner-loading.mat.styl: -------------------------------------------------------------------------------- 1 | .q-inner-loading 2 | background $light-dimmed-background 3 | &.dark 4 | background $dimmed-background 5 | -------------------------------------------------------------------------------- /src/components/spinner/QSpinner.js: -------------------------------------------------------------------------------- 1 | import DefaultSpinner from './QSpinner' 2 | 3 | export default { 4 | mixins: [DefaultSpinner], 5 | name: 'QSpinner' 6 | } 7 | -------------------------------------------------------------------------------- /src/components/color/index.js: -------------------------------------------------------------------------------- 1 | import QColor from './QColor.js' 2 | import QColorPicker from './QColorPicker.js' 3 | 4 | export { 5 | QColor, 6 | QColorPicker 7 | } 8 | -------------------------------------------------------------------------------- /src/components/modal/index.js: -------------------------------------------------------------------------------- 1 | import QModal from './QModal.js' 2 | import QModalLayout from './QModalLayout.js' 3 | 4 | export { 5 | QModal, 6 | QModalLayout 7 | } 8 | -------------------------------------------------------------------------------- /src/components/input/input-types.js: -------------------------------------------------------------------------------- 1 | export default [ 2 | 'text', 'textarea', 'email', 'search', 3 | 'tel', 'file', 'number', 4 | 'password', 'url', 'time', 'date' 5 | ] 6 | -------------------------------------------------------------------------------- /src/components/toolbar/index.js: -------------------------------------------------------------------------------- 1 | import QToolbar from './QToolbar.js' 2 | import QToolbarTitle from './QToolbarTitle.js' 3 | 4 | export { 5 | QToolbar, 6 | QToolbarTitle 7 | } 8 | -------------------------------------------------------------------------------- /src/components/datetime/index.js: -------------------------------------------------------------------------------- 1 | import QDatetime from './QDatetime.js' 2 | import QDatetimePicker from './QDatetimePicker' 3 | 4 | export { 5 | QDatetime, 6 | QDatetimePicker 7 | } 8 | -------------------------------------------------------------------------------- /src/components/timeline/index.js: -------------------------------------------------------------------------------- 1 | import QTimeline from './QTimeline.js' 2 | import QTimelineEntry from './QTimelineEntry.js' 3 | 4 | export { 5 | QTimeline, 6 | QTimelineEntry 7 | } 8 | -------------------------------------------------------------------------------- /.codeclimate.yml: -------------------------------------------------------------------------------- 1 | languages: 2 | JavaScript: true 3 | exclude_paths: 4 | - "node_modules/*" 5 | - "dist/*" 6 | - "test/*" 7 | - "src/lib/core/platform/platform.js" 8 | - "preview/*" 9 | -------------------------------------------------------------------------------- /src/components/checkbox/checkbox.ios.styl: -------------------------------------------------------------------------------- 1 | $checkbox-size = 21px 2 | 3 | .q-checkbox-icon 4 | height $checkbox-size 5 | width $checkbox-size 6 | font-size $checkbox-size 7 | opacity 0 8 | -------------------------------------------------------------------------------- /src/components/checkbox/checkbox.mat.styl: -------------------------------------------------------------------------------- 1 | $checkbox-size = 21px 2 | 3 | .q-checkbox-icon 4 | height $checkbox-size 5 | width $checkbox-size 6 | font-size $checkbox-size 7 | opacity 0 8 | -------------------------------------------------------------------------------- /src/components/breadcrumbs/index.js: -------------------------------------------------------------------------------- 1 | import QBreadcrumbs from './QBreadcrumbs.js' 2 | import QBreadcrumbsEl from './QBreadcrumbsEl.js' 3 | 4 | export { 5 | QBreadcrumbs, 6 | QBreadcrumbsEl 7 | } 8 | -------------------------------------------------------------------------------- /src/utils/filter.js: -------------------------------------------------------------------------------- 1 | export default function (terms, {field, list}) { 2 | const token = terms.toLowerCase() 3 | return list.filter(item => ('' + item[field]).toLowerCase().startsWith(token)) 4 | } 5 | -------------------------------------------------------------------------------- /dev/components/web-tests/c.vue: -------------------------------------------------------------------------------- 1 | 7 | -------------------------------------------------------------------------------- /src/components/chips-input/chips-input.ios.styl: -------------------------------------------------------------------------------- 1 | .q-input-chips 2 | margin-top -1px 3 | margin-bottom -1px 4 | .q-chip 5 | margin 1px 6 | input.q-input-target 7 | min-width 70px !important 8 | -------------------------------------------------------------------------------- /src/components/chips-input/chips-input.mat.styl: -------------------------------------------------------------------------------- 1 | .q-input-chips 2 | margin-top -1px 3 | margin-bottom -1px 4 | .q-chip 5 | margin 1px 6 | input.q-input-target 7 | min-width 70px !important 8 | -------------------------------------------------------------------------------- /src/components/card/QCardMain.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'QCardMain', 3 | render (h) { 4 | return h('div', { 5 | staticClass: 'q-card-main q-card-container' 6 | }, this.$slots.default) 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /src/css/ios.styl: -------------------------------------------------------------------------------- 1 | @import './core.variables' 2 | @import './variables.ios' 3 | @import './normalize' 4 | @import './critical' 5 | @import '../components/*/*.ios' 6 | @import './core/*' 7 | @import '../ie-compat/ie.ios' 8 | -------------------------------------------------------------------------------- /src/css/mat.styl: -------------------------------------------------------------------------------- 1 | @import './core.variables' 2 | @import './variables.mat' 3 | @import './normalize' 4 | @import './critical' 5 | @import '../components/*/*.mat' 6 | @import './core/*' 7 | @import '../ie-compat/ie.mat' 8 | -------------------------------------------------------------------------------- /src/components/pagination/pagination.ios.styl: -------------------------------------------------------------------------------- 1 | .q-pagination 2 | input 3 | text-align center 4 | .q-btn 5 | padding 0 5px !important 6 | &.disabled 7 | color $faded 8 | color var(--q-color-faded) 9 | -------------------------------------------------------------------------------- /src/components/pagination/pagination.mat.styl: -------------------------------------------------------------------------------- 1 | .q-pagination 2 | input 3 | text-align center 4 | .q-btn 5 | padding 0 5px !important 6 | &.disabled 7 | color $faded 8 | color var(--q-color-faded) 9 | -------------------------------------------------------------------------------- /src/css/core/touch.styl: -------------------------------------------------------------------------------- 1 | .q-touch 2 | user-select none 3 | user-drag none 4 | -khtml-user-drag none 5 | -webkit-user-drag none 6 | .q-touch-x 7 | touch-action pan-x 8 | .q-touch-y 9 | touch-action pan-y 10 | -------------------------------------------------------------------------------- /src/components/fab/fab-mixin.js: -------------------------------------------------------------------------------- 1 | export default { 2 | props: { 3 | outline: Boolean, 4 | push: Boolean, 5 | flat: Boolean, 6 | color: String, 7 | textColor: String, 8 | glossy: Boolean 9 | } 10 | } 11 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | .Thumbs.db 3 | node_modules/ 4 | dev-umd/dist 5 | dist/ 6 | deploy/ 7 | npm-debug.log 8 | test/unit/coverage/ 9 | test/e2e/dist/ 10 | cordova 11 | *.sublime* 12 | .idea/ 13 | debug.log 14 | package-lock.json 15 | -------------------------------------------------------------------------------- /.postcssrc.js: -------------------------------------------------------------------------------- 1 | // https://github.com/michael-ciniawsky/postcss-load-config 2 | 3 | module.exports = { 4 | plugins: [ 5 | // to edit target browsers: use "browserslist" field in package.json 6 | require('autoprefixer') 7 | ] 8 | } 9 | -------------------------------------------------------------------------------- /dev/components/web-tests/b.vue: -------------------------------------------------------------------------------- 1 | 6 | 7 | 14 | -------------------------------------------------------------------------------- /src/plugins/dialog.js: -------------------------------------------------------------------------------- 1 | import QDialog from '../components/dialog/QDialog.js' 2 | import modalFn from '../utils/modal-fn.js' 3 | 4 | export default { 5 | install ({ $q, Vue }) { 6 | this.create = $q.dialog = modalFn(QDialog, Vue) 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /dev/pages.js: -------------------------------------------------------------------------------- 1 | /* 2 | * Export files list for /dev/components folder 3 | */ 4 | 5 | export default require.context('./components', true, /^\.\/.*\.vue$/) 6 | .keys() 7 | .filter(page => page.split('/').length === 3) 8 | .map(page => page.slice(2)) 9 | -------------------------------------------------------------------------------- /src/components/stepper/index.js: -------------------------------------------------------------------------------- 1 | import QStep from './QStep.js' 2 | import QStepper from './QStepper.js' 3 | import QStepperNavigation from './QStepperNavigation.js' 4 | 5 | export { 6 | QStep, 7 | QStepper, 8 | QStepperNavigation 9 | } 10 | -------------------------------------------------------------------------------- /src/components/dot/dot.ios.styl: -------------------------------------------------------------------------------- 1 | .q-dot 2 | position absolute 3 | top $dot-position-top 4 | right $dot-position-right 5 | height $dot-size 6 | width $dot-size 7 | border-radius 50% 8 | background $dot-color 9 | opacity $dot-opacity 10 | -------------------------------------------------------------------------------- /src/components/dot/dot.mat.styl: -------------------------------------------------------------------------------- 1 | .q-dot 2 | position absolute 3 | top $dot-position-top 4 | right $dot-position-right 5 | height $dot-size 6 | width $dot-size 7 | border-radius 50% 8 | background $dot-color 9 | opacity $dot-opacity 10 | -------------------------------------------------------------------------------- /src/components/tab/index.js: -------------------------------------------------------------------------------- 1 | import QRouteTab from './QRouteTab.js' 2 | import QTab from './QTab.js' 3 | import QTabPane from './QTabPane.js' 4 | import QTabs from './QTabs.js' 5 | 6 | export { 7 | QRouteTab, 8 | QTab, 9 | QTabPane, 10 | QTabs 11 | } 12 | -------------------------------------------------------------------------------- /src/components/breadcrumbs/breadcrumbs.ios.styl: -------------------------------------------------------------------------------- 1 | .q-breadcrumbs 2 | .q-icon, .q-breadcrumbs-separator 3 | font-size 150% 4 | .q-breadcrumbs-last a 5 | pointer-events none 6 | 7 | [dir=rtl] .q-breadcrumbs-separator .q-icon 8 | transform scaleX(-1) /* rtl:ignore */ 9 | -------------------------------------------------------------------------------- /src/components/breadcrumbs/breadcrumbs.mat.styl: -------------------------------------------------------------------------------- 1 | .q-breadcrumbs 2 | .q-icon, .q-breadcrumbs-separator 3 | font-size 150% 4 | .q-breadcrumbs-last a 5 | pointer-events none 6 | 7 | [dir=rtl] .q-breadcrumbs-separator .q-icon 8 | transform scaleX(-1) /* rtl:ignore */ 9 | -------------------------------------------------------------------------------- /src/components/loading/loading.ios.styl: -------------------------------------------------------------------------------- 1 | body.with-loading 2 | overflow hidden 3 | 4 | .q-loading 5 | background $loading-background 6 | > div 7 | margin 40px 20px 0 8 | max-width 450px 9 | text-align center 10 | text-shadow 0 0 7px black 11 | -------------------------------------------------------------------------------- /src/components/loading/loading.mat.styl: -------------------------------------------------------------------------------- 1 | body.with-loading 2 | overflow hidden 3 | 4 | .q-loading 5 | background $loading-background 6 | > div 7 | margin 40px 20px 0 8 | max-width 450px 9 | text-align center 10 | text-shadow 0 0 7px black 11 | -------------------------------------------------------------------------------- /src/components/carousel/index.js: -------------------------------------------------------------------------------- 1 | import QCarousel from './QCarousel.js' 2 | import QCarouselSlide from './QCarouselSlide.js' 3 | import QCarouselControl from './QCarouselControl.js' 4 | 5 | export { 6 | QCarousel, 7 | QCarouselSlide, 8 | QCarouselControl 9 | } 10 | -------------------------------------------------------------------------------- /src/plugins/action-sheet.js: -------------------------------------------------------------------------------- 1 | import QActionSheet from '../components/action-sheet/QActionSheet.js' 2 | import modalFn from '../utils/modal-fn.js' 3 | 4 | export default { 5 | install ({ $q, Vue }) { 6 | this.create = $q.actionSheet = modalFn(QActionSheet, Vue) 7 | } 8 | } 9 | -------------------------------------------------------------------------------- /.editorconfig: -------------------------------------------------------------------------------- 1 | # http://editorconfig.org 2 | root = true 3 | 4 | [*] 5 | indent_style = space 6 | indent_size = 2 7 | end_of_line = lf 8 | charset = utf-8 9 | trim_trailing_whitespace = true 10 | insert_final_newline = true 11 | 12 | [*.md] 13 | trim_trailing_whitespace = false 14 | -------------------------------------------------------------------------------- /src/utils/uid.js: -------------------------------------------------------------------------------- 1 | function s4 () { 2 | return Math.floor((1 + Math.random()) * 0x10000) 3 | .toString(16) 4 | .substring(1) 5 | } 6 | 7 | export default function () { 8 | return s4() + s4() + '-' + s4() + '-' + s4() + '-' + 9 | s4() + '-' + s4() + s4() + s4() 10 | } 11 | -------------------------------------------------------------------------------- /src/components/btn/index.js: -------------------------------------------------------------------------------- 1 | import QBtn from './QBtn.js' 2 | import QBtnGroup from './QBtnGroup.js' 3 | import QBtnDropdown from './QBtnDropdown.js' 4 | import QBtnToggle from './QBtnToggle.js' 5 | 6 | export { 7 | QBtn, 8 | QBtnGroup, 9 | QBtnDropdown, 10 | QBtnToggle 11 | } 12 | -------------------------------------------------------------------------------- /src/components/scroll-area/scroll-area.ios.styl: -------------------------------------------------------------------------------- 1 | .q-scrollarea-thumb 2 | background black 3 | width 10px 4 | right 0 5 | opacity .2 6 | transition opacity .3s 7 | &.invisible-thumb 8 | opacity 0 !important 9 | &:hover 10 | opacity .3 11 | &:active 12 | opacity .5 13 | -------------------------------------------------------------------------------- /src/components/scroll-area/scroll-area.mat.styl: -------------------------------------------------------------------------------- 1 | .q-scrollarea-thumb 2 | background black 3 | width 10px 4 | right 0 5 | opacity .2 6 | transition opacity .3s 7 | &.invisible-thumb 8 | opacity 0 !important 9 | &:hover 10 | opacity .3 11 | &:active 12 | opacity .5 13 | -------------------------------------------------------------------------------- /src/components/pull-to-refresh/pull-to-refresh.ios.styl: -------------------------------------------------------------------------------- 1 | .pull-to-refresh 2 | position relative 3 | 4 | .pull-to-refresh-message 5 | height 65px 6 | font-size $pull-to-refresh-font-size 7 | .q-icon 8 | font-size $pull-to-refresh-icon-size 9 | margin-right 15px 10 | transition all .3s 11 | -------------------------------------------------------------------------------- /src/components/pull-to-refresh/pull-to-refresh.mat.styl: -------------------------------------------------------------------------------- 1 | .pull-to-refresh 2 | position relative 3 | 4 | .pull-to-refresh-message 5 | height 65px 6 | font-size $pull-to-refresh-font-size 7 | .q-icon 8 | font-size $pull-to-refresh-icon-size 9 | margin-right 15px 10 | transition all .3s 11 | -------------------------------------------------------------------------------- /src/components/table/index.js: -------------------------------------------------------------------------------- 1 | import QTable from './QTable.js' 2 | import QTh from './QTh.js' 3 | import QTr from './QTr.js' 4 | import QTd from './QTd.js' 5 | import QTableColumns from './QTableColumns.js' 6 | 7 | export { 8 | QTable, 9 | QTh, 10 | QTr, 11 | QTd, 12 | QTableColumns 13 | } 14 | -------------------------------------------------------------------------------- /circle.yml: -------------------------------------------------------------------------------- 1 | general: 2 | branches: 3 | ignore: 4 | - gh-pages 5 | - dev 6 | machine: 7 | node: 8 | version: 4.2.0 9 | test: 10 | post: 11 | - cat /home/ubuntu/quasar-framework/test/unit/coverage/lcov.info | /home/ubuntu/quasar-framework/node_modules/codecov.io/bin/codecov.io.js 12 | -------------------------------------------------------------------------------- /dev/components/web-tests/a.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 15 | -------------------------------------------------------------------------------- /src/components/card/QCardSeparator.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'QCardSeparator', 3 | props: { 4 | inset: Boolean 5 | }, 6 | render (h) { 7 | return h('div', { 8 | staticClass: 'q-card-separator', 9 | 'class': { inset: this.inset } 10 | }, this.$slots.default) 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/components/observables/index.js: -------------------------------------------------------------------------------- 1 | import QResizeObservable from './QResizeObservable.js' 2 | import QScrollObservable from './QScrollObservable.js' 3 | import QWindowResizeObservable from './QWindowResizeObservable.js' 4 | 5 | export { 6 | QResizeObservable, 7 | QScrollObservable, 8 | QWindowResizeObservable 9 | } 10 | -------------------------------------------------------------------------------- /src/components/table/QTr.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'QTr', 3 | props: { 4 | props: Object 5 | }, 6 | render (h) { 7 | return h( 8 | 'tr', 9 | !this.props || this.props.header 10 | ? {} 11 | : { 'class': this.props.__trClass }, 12 | this.$slots.default 13 | ) 14 | } 15 | } 16 | -------------------------------------------------------------------------------- /src/components/spinner/spinner-mixin.js: -------------------------------------------------------------------------------- 1 | export default { 2 | props: { 3 | color: String, 4 | size: { 5 | type: [Number, String], 6 | default: '1em' 7 | } 8 | }, 9 | computed: { 10 | classes () { 11 | if (this.color) { 12 | return `text-${this.color}` 13 | } 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/mixins/can-render.js: -------------------------------------------------------------------------------- 1 | // using it to manage SSR rendering with best performance 2 | import { onSSR } from '../plugins/platform.js' 3 | 4 | export default { 5 | data () { 6 | return { 7 | canRender: !onSSR 8 | } 9 | }, 10 | mounted () { 11 | this.canRender === false && (this.canRender = true) 12 | } 13 | } 14 | -------------------------------------------------------------------------------- /src/components/list/QListHeader.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'QListHeader', 3 | props: { 4 | inset: Boolean 5 | }, 6 | render (h) { 7 | return h('div', { 8 | staticClass: 'q-list-header', 9 | 'class': { 10 | 'q-list-header-inset': this.inset 11 | } 12 | }, this.$slots.default) 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/components/tooltip/tooltip.mat.styl: -------------------------------------------------------------------------------- 1 | .q-tooltip 2 | position fixed 3 | font-size $tooltip-fontsize 4 | color $tooltip-color 5 | background $tooltip-background 6 | z-index $z-tooltip 7 | padding $tooltip-padding 8 | border-radius $tooltip-border-radius 9 | overflow-y auto 10 | overflow-x hidden 11 | pointer-events none 12 | -------------------------------------------------------------------------------- /src/components/knob/knob.ios.styl: -------------------------------------------------------------------------------- 1 | .q-knob, .q-knob > div 2 | position relative 3 | display inline-block 4 | .q-knob > div 5 | width 100% 6 | height 100% 7 | 8 | .q-knob-label 9 | width 100% 10 | pointer-events none 11 | position absolute 12 | left 0 13 | right 0 14 | top 0 15 | bottom 0 16 | 17 | i 18 | font-size 130% 19 | -------------------------------------------------------------------------------- /src/components/knob/knob.mat.styl: -------------------------------------------------------------------------------- 1 | .q-knob, .q-knob > div 2 | position relative 3 | display inline-block 4 | .q-knob > div 5 | width 100% 6 | height 100% 7 | 8 | .q-knob-label 9 | width 100% 10 | pointer-events none 11 | position absolute 12 | left 0 13 | right 0 14 | top 0 15 | bottom 0 16 | 17 | i 18 | font-size 130% 19 | -------------------------------------------------------------------------------- /src/components/stepper/QStepperNavigation.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'QStepperNavigation', 3 | render (h) { 4 | return h('div', { 5 | staticClass: 'q-stepper-nav order-last row items-center' 6 | }, [ 7 | this.$slots.left, 8 | h('div', { staticClass: 'col' }), 9 | this.$slots.default 10 | ]) 11 | } 12 | } 13 | -------------------------------------------------------------------------------- /src/components/list/QItemSeparator.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'QItemSeparator', 3 | props: { 4 | inset: Boolean 5 | }, 6 | render (h) { 7 | return h('div', { 8 | staticClass: 'q-item-separator-component', 9 | 'class': { 10 | 'q-item-separator-inset-component': this.inset 11 | } 12 | }, this.$slots.default) 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/utils/throttle.js: -------------------------------------------------------------------------------- 1 | export default function (fn, limit = 250) { 2 | let wait = false 3 | let result 4 | 5 | return function (...args) { 6 | if (wait) { 7 | return result 8 | } 9 | 10 | wait = true 11 | result = fn.apply(this, args) 12 | setTimeout(() => { 13 | wait = false 14 | }, limit) 15 | return result 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/vue-plugin.js: -------------------------------------------------------------------------------- 1 | import install from './install.js' 2 | import { version } from '../package.json' 3 | import i18n from './i18n.js' 4 | import icons from './icons.js' 5 | import ssrUpdate from './ssr-update.js' 6 | 7 | const theme = process.env.THEME 8 | 9 | export default { 10 | version, 11 | install, 12 | i18n, 13 | icons, 14 | theme, 15 | ssrUpdate 16 | } 17 | -------------------------------------------------------------------------------- /src/components/tooltip/tooltip.ios.styl: -------------------------------------------------------------------------------- 1 | .q-tooltip 2 | position fixed 3 | font-size $tooltip-fontsize 4 | color $tooltip-color 5 | background $tooltip-background 6 | box-shadow $tooltip-box-shadow 7 | z-index $z-tooltip 8 | padding $tooltip-padding 9 | border-radius $tooltip-border-radius 10 | overflow-y auto 11 | overflow-x hidden 12 | pointer-events none 13 | -------------------------------------------------------------------------------- /src/css/critical.styl: -------------------------------------------------------------------------------- 1 | .q-icon 2 | line-height 1 3 | letter-spacing normal 4 | text-transform none 5 | white-space nowrap 6 | word-wrap normal 7 | direction ltr 8 | 9 | .q-icon, .material-icons 10 | user-select none 11 | cursor inherit 12 | font-size inherit 13 | display inline-flex 14 | align-items center 15 | justify-content center 16 | vertical-align middle 17 | -------------------------------------------------------------------------------- /src/components/parallax/parallax.ios.styl: -------------------------------------------------------------------------------- 1 | .q-parallax 2 | position relative 3 | width 100% 4 | overflow hidden 5 | border-radius inherit 6 | 7 | .q-parallax-media 8 | > img, > video 9 | position absolute 10 | left 50% 11 | bottom 0 12 | min-width 100% 13 | min-height 100% 14 | will-change transform 15 | 16 | .q-parallax-text 17 | text-shadow $paralax-text-shadow 18 | -------------------------------------------------------------------------------- /src/components/parallax/parallax.mat.styl: -------------------------------------------------------------------------------- 1 | .q-parallax 2 | position relative 3 | width 100% 4 | overflow hidden 5 | border-radius inherit 6 | 7 | .q-parallax-media 8 | > img, > video 9 | position absolute 10 | left 50% 11 | bottom 0 12 | min-width 100% 13 | min-height 100% 14 | will-change transform 15 | 16 | .q-parallax-text 17 | text-shadow $paralax-text-shadow 18 | -------------------------------------------------------------------------------- /src/components/popover/popover.ios.styl: -------------------------------------------------------------------------------- 1 | .q-popover 2 | position fixed 3 | box-shadow $popover-box-shadow 4 | border-radius $generic-border-radius 5 | background $popover-background 6 | z-index $z-popover 7 | overflow-y auto 8 | overflow-x hidden 9 | max-width $popover-max-width 10 | outline 0 11 | > .q-list:only-child 12 | border none 13 | 14 | body div .q-popover 15 | display none 16 | -------------------------------------------------------------------------------- /src/components/popover/popover.mat.styl: -------------------------------------------------------------------------------- 1 | .q-popover 2 | position fixed 3 | box-shadow $popover-box-shadow 4 | border-radius $generic-border-radius 5 | background $popover-background 6 | z-index $z-popover 7 | overflow-y auto 8 | overflow-x hidden 9 | max-width $popover-max-width 10 | outline 0 11 | > .q-list:only-child 12 | border none 13 | 14 | body div .q-popover 15 | display none 16 | -------------------------------------------------------------------------------- /src/components/video/video.ios.styl: -------------------------------------------------------------------------------- 1 | img 2 | &.responsive 3 | max-width 100% 4 | height auto 5 | &.avatar 6 | width 50px 7 | height 50px 8 | border-radius 50% 9 | box-shadow $shadow-1 10 | vertical-align middle 11 | 12 | .q-video 13 | position relative 14 | overflow hidden 15 | border-radius inherit 16 | 17 | iframe, object, embed 18 | width 100% 19 | height 100% 20 | -------------------------------------------------------------------------------- /src/components/video/video.mat.styl: -------------------------------------------------------------------------------- 1 | img 2 | &.responsive 3 | max-width 100% 4 | height auto 5 | &.avatar 6 | width 50px 7 | height 50px 8 | border-radius 50% 9 | box-shadow $shadow-1 10 | vertical-align middle 11 | 12 | .q-video 13 | position relative 14 | overflow hidden 15 | border-radius inherit 16 | 17 | iframe, object, embed 18 | width 100% 19 | height 100% 20 | -------------------------------------------------------------------------------- /src/components/card/index.js: -------------------------------------------------------------------------------- 1 | import QCard from './QCard.js' 2 | import QCardTitle from './QCardTitle.js' 3 | import QCardMain from './QCardMain.js' 4 | import QCardActions from './QCardActions.js' 5 | import QCardMedia from './QCardMedia.js' 6 | import QCardSeparator from './QCardSeparator.js' 7 | 8 | export { 9 | QCard, 10 | QCardTitle, 11 | QCardMain, 12 | QCardActions, 13 | QCardMedia, 14 | QCardSeparator 15 | } 16 | -------------------------------------------------------------------------------- /src/utils/open-url.js: -------------------------------------------------------------------------------- 1 | import Platform from '../plugins/platform.js' 2 | 3 | export default (url, reject) => { 4 | if (Platform.is.cordova && navigator && navigator.app) { 5 | return navigator.app.loadUrl(url, { 6 | openExternal: true 7 | }) 8 | } 9 | 10 | let win = window.open(url, '_blank') 11 | 12 | if (win) { 13 | win.focus() 14 | return win 15 | } 16 | else { 17 | reject() 18 | } 19 | } 20 | -------------------------------------------------------------------------------- /src/utils/frame-debounce.js: -------------------------------------------------------------------------------- 1 | export default function (fn) { 2 | let wait = false, frame 3 | 4 | function debounced (...args) { 5 | if (wait) { return } 6 | 7 | wait = true 8 | frame = requestAnimationFrame(() => { 9 | fn.apply(this, args) 10 | wait = false 11 | }) 12 | } 13 | 14 | debounced.cancel = () => { 15 | window.cancelAnimationFrame(frame) 16 | wait = false 17 | } 18 | 19 | return debounced 20 | } 21 | -------------------------------------------------------------------------------- /src/components/alert/alert.ios.styl: -------------------------------------------------------------------------------- 1 | .q-alert 2 | border-radius $generic-border-radius 3 | box-shadow none 4 | 5 | .avatar 6 | width 32px 7 | height 32px 8 | 9 | .q-alert-side, .q-alert-content 10 | padding 12px 11 | font-size 16px 12 | word-break break-word 13 | 14 | .q-alert-side 15 | font-size 24px 16 | background rgba(0, 0, 0, .1) 17 | 18 | .q-alert-actions 19 | padding 12px 12px 12px 0 20 | 21 | .q-alert-detail 22 | font-size 12px 23 | -------------------------------------------------------------------------------- /src/components/alert/alert.mat.styl: -------------------------------------------------------------------------------- 1 | .q-alert 2 | border-radius $generic-border-radius 3 | box-shadow none 4 | 5 | .avatar 6 | width 32px 7 | height 32px 8 | 9 | .q-alert-side, .q-alert-content 10 | padding 12px 11 | font-size 16px 12 | word-break break-word 13 | 14 | .q-alert-side 15 | font-size 24px 16 | background rgba(0, 0, 0, .1) 17 | 18 | .q-alert-actions 19 | padding 12px 12px 12px 0 20 | 21 | .q-alert-detail 22 | font-size 12px 23 | -------------------------------------------------------------------------------- /src/mixins/display-mode.js: -------------------------------------------------------------------------------- 1 | export default { 2 | props: { 3 | popover: Boolean, 4 | modal: Boolean 5 | }, 6 | computed: { 7 | isPopover () { 8 | // Explicit popover / modal choice 9 | if (this.popover) return true 10 | if (this.modal) return false 11 | 12 | // Automatically determine the default popover or modal behavior 13 | return this.$q.platform.is.desktop && !this.$q.platform.within.iframe 14 | } 15 | } 16 | } 17 | -------------------------------------------------------------------------------- /src/components/toolbar/QToolbarTitle.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'QToolbarTitle', 3 | props: { 4 | shrink: Boolean 5 | }, 6 | render (h) { 7 | return h('div', { 8 | staticClass: 'q-toolbar-title', 9 | 'class': this.shrink ? 'col-auto' : null 10 | }, [ 11 | this.$slots.default, 12 | this.$slots.subtitle 13 | ? h('div', { staticClass: 'q-toolbar-subtitle' }, this.$slots.subtitle) 14 | : null 15 | ]) 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/plugins/local-storage.js: -------------------------------------------------------------------------------- 1 | import { onSSR, hasWebStorage } from './platform.js' 2 | import { getEmptyStorage, getStorage } from '../utils/web-storage.js' 3 | 4 | export default { 5 | install ({ $q }) { 6 | if (onSSR) { 7 | $q.localStorage = getEmptyStorage() 8 | return 9 | } 10 | 11 | if (hasWebStorage()) { 12 | const storage = getStorage('local') 13 | $q.localStorage = storage 14 | Object.assign(this, storage) 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /src/utils/sort.js: -------------------------------------------------------------------------------- 1 | export function sortString (a, b) { 2 | if (typeof a !== 'string') { 3 | throw new TypeError('The value for sorting must be a String') 4 | } 5 | return a.localeCompare(b) 6 | } 7 | 8 | export function sortNumber (a, b) { 9 | return a - b 10 | } 11 | 12 | export function sortDate (a, b) { 13 | return (new Date(a)) - (new Date(b)) 14 | } 15 | 16 | export function sortBoolean (a, b) { 17 | return a && !b 18 | ? -1 19 | : (!a && b ? 1 : 0) 20 | } 21 | -------------------------------------------------------------------------------- /dev/app.entry-client.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import { createApp } from './app' 3 | import { QAjaxBar } from 'quasar' 4 | 5 | const bar = new Vue(QAjaxBar).$mount() 6 | document.body.appendChild(bar.$el) 7 | 8 | const { app, router } = createApp() 9 | 10 | router.onReady(() => { 11 | router.beforeResolve((to, from, next) => { 12 | bar.start() 13 | next() 14 | }) 15 | router.afterEach((to, from, next) => { 16 | bar.stop() 17 | }) 18 | app.$mount('#q-app') 19 | }) 20 | -------------------------------------------------------------------------------- /src/plugins/session-storage.js: -------------------------------------------------------------------------------- 1 | import { onSSR, hasWebStorage } from './platform.js' 2 | import { getEmptyStorage, getStorage } from '../utils/web-storage.js' 3 | 4 | export default { 5 | install ({ $q }) { 6 | if (onSSR) { 7 | $q.sessionStorage = getEmptyStorage() 8 | return 9 | } 10 | 11 | if (hasWebStorage()) { 12 | const storage = getStorage('session') 13 | $q.sessionStorage = storage 14 | Object.assign(this, storage) 15 | } 16 | } 17 | } 18 | -------------------------------------------------------------------------------- /jsconfig.json: -------------------------------------------------------------------------------- 1 | { 2 | "include": [ 3 | "./src/**/*" 4 | ], 5 | "compilerOptions": { 6 | "baseUrl": ".", 7 | "paths": { 8 | "components/*": [ 9 | "src/components/*" 10 | ], 11 | "directives/*": [ 12 | "src/directives/*" 13 | ], 14 | "mixins/*": [ 15 | "src/mixins/*" 16 | ], 17 | "plugins/*": [ 18 | "src/plugins/*" 19 | ], 20 | "utils/*": [ 21 | "src/utils/*" 22 | ] 23 | } 24 | } 25 | } 26 | -------------------------------------------------------------------------------- /src/components/option-group/option-group.mat.styl: -------------------------------------------------------------------------------- 1 | .q-option-inner 2 | display inline-block 3 | line-height 0 4 | 5 | & + .q-option-label 6 | margin-left $label-offset 7 | 8 | .q-option 9 | vertical-align middle 10 | input 11 | display none !important 12 | &.reverse .q-option-inner + .q-option-label 13 | margin-right $label-offset 14 | margin-left 0 15 | 16 | .q-option-group-inline-opts > div 17 | display inline-flex 18 | .q-option-group 19 | margin -5px 20 | padding 5px 0 21 | -------------------------------------------------------------------------------- /src/components/layout/index.js: -------------------------------------------------------------------------------- 1 | import QLayout from './QLayout.js' 2 | import QLayoutDrawer from './QLayoutDrawer.js' 3 | import QLayoutFooter from './QLayoutFooter.js' 4 | import QLayoutHeader from './QLayoutHeader.js' 5 | import QPage from './QPage.js' 6 | import QPageContainer from './QPageContainer.js' 7 | import QPageSticky from './QPageSticky.js' 8 | 9 | export { 10 | QLayout, 11 | QLayoutDrawer, 12 | QLayoutFooter, 13 | QLayoutHeader, 14 | QPage, 15 | QPageContainer, 16 | QPageSticky 17 | } 18 | -------------------------------------------------------------------------------- /src/components/jumbotron/jumbotron.ios.styl: -------------------------------------------------------------------------------- 1 | .q-jumbotron 2 | position relative 3 | padding $jumbotron-padding 4 | border-radius $jumbotron-border-radius 5 | background-color $jumbotron-bg 6 | background-repeat no-repeat 7 | background-size cover 8 | .q-jumbotron-dark 9 | color $jumbotron-dark-color 10 | background-color $jumbotron-dark-bg 11 | hr.q-hr 12 | background rgba(255, 255, 255, .36) 13 | 14 | @media (min-width $breakpoint-md-min) 15 | .q-jumbotron 16 | padding $jumbotron-large-padding 17 | -------------------------------------------------------------------------------- /src/components/jumbotron/jumbotron.mat.styl: -------------------------------------------------------------------------------- 1 | .q-jumbotron 2 | position relative 3 | padding $jumbotron-padding 4 | border-radius $jumbotron-border-radius 5 | background-color $jumbotron-bg 6 | background-repeat no-repeat 7 | background-size cover 8 | .q-jumbotron-dark 9 | color $jumbotron-dark-color 10 | background-color $jumbotron-dark-bg 11 | hr.q-hr 12 | background rgba(255, 255, 255, .36) 13 | 14 | @media (min-width $breakpoint-md-min) 15 | .q-jumbotron 16 | padding $jumbotron-large-padding 17 | -------------------------------------------------------------------------------- /src/mixins/align.js: -------------------------------------------------------------------------------- 1 | const 2 | alignMap = { 3 | left: 'start', 4 | center: 'center', 5 | right: 'end', 6 | between: 'between', 7 | around: 'around' 8 | }, 9 | alignValues = Object.keys(alignMap) 10 | 11 | export default { 12 | props: { 13 | align: { 14 | type: String, 15 | default: 'center', 16 | validator: v => alignValues.includes(v) 17 | } 18 | }, 19 | computed: { 20 | alignClass () { 21 | return `justify-${alignMap[this.align]}` 22 | } 23 | } 24 | } 25 | -------------------------------------------------------------------------------- /src/components/list/index.js: -------------------------------------------------------------------------------- 1 | import QItem from './QItem.js' 2 | import QItemSeparator from './QItemSeparator.js' 3 | import QItemMain from './QItemMain.js' 4 | import QItemSide from './QItemSide.js' 5 | import QItemTile from './QItemTile.js' 6 | import QItemWrapper from './QItemWrapper.js' 7 | import QList from './QList.js' 8 | import QListHeader from './QListHeader.js' 9 | 10 | export { 11 | QItem, 12 | QItemSeparator, 13 | QItemMain, 14 | QItemSide, 15 | QItemTile, 16 | QItemWrapper, 17 | QList, 18 | QListHeader 19 | } 20 | -------------------------------------------------------------------------------- /src/components/card/QCardTitle.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'QCardTitle', 3 | render (h) { 4 | return h('div', { 5 | staticClass: 'q-card-primary q-card-container row no-wrap' 6 | }, [ 7 | h('div', {staticClass: 'col column'}, [ 8 | h('div', {staticClass: 'q-card-title'}, this.$slots.default), 9 | h('div', {staticClass: 'q-card-subtitle'}, [ this.$slots.subtitle ]) 10 | ]), 11 | h('div', {staticClass: 'col-auto self-center q-card-title-extra'}, [ this.$slots.right ]) 12 | ]) 13 | } 14 | } 15 | -------------------------------------------------------------------------------- /src/components/video/QVideo.js: -------------------------------------------------------------------------------- 1 | export default { 2 | name: 'QVideo', 3 | props: { 4 | src: { 5 | type: String, 6 | required: true 7 | } 8 | }, 9 | computed: { 10 | iframeData () { 11 | return { 12 | attrs: { 13 | src: this.src, 14 | frameborder: '0', 15 | allowfullscreen: true 16 | } 17 | } 18 | } 19 | }, 20 | render (h) { 21 | return h('div', { 22 | staticClass: 'q-video' 23 | }, [ 24 | h('iframe', this.iframeData) 25 | ]) 26 | } 27 | } 28 | -------------------------------------------------------------------------------- /src/css/core/elevation.styl: -------------------------------------------------------------------------------- 1 | .shadow-transition 2 | transition $shadow-transition !important 3 | 4 | for $z in 1..24 5 | .shadow-{$z} 6 | box-shadow $shadow-+$z 7 | .shadow-up-{$z} 8 | box-shadow $shadow-up-+$z 9 | 10 | .no-shadow, .shadow-0 11 | box-shadow none !important 12 | .inset-shadow 13 | box-shadow $inset-shadow !important 14 | 15 | .z-marginals 16 | z-index $z-marginals 17 | 18 | .z-notify 19 | z-index $z-notify 20 | 21 | .z-fullscreen 22 | z-index $z-fullscreen 23 | 24 | .z-inherit 25 | z-index inherit !important 26 | -------------------------------------------------------------------------------- /src/utils/debounce.js: -------------------------------------------------------------------------------- 1 | export default function (fn, wait = 250, immediate) { 2 | let timeout 3 | 4 | function debounced (...args) { 5 | const later = () => { 6 | timeout = null 7 | if (!immediate) { 8 | fn.apply(this, args) 9 | } 10 | } 11 | 12 | clearTimeout(timeout) 13 | if (immediate && !timeout) { 14 | fn.apply(this, args) 15 | } 16 | timeout = setTimeout(later, wait) 17 | } 18 | 19 | debounced.cancel = () => { 20 | clearTimeout(timeout) 21 | } 22 | 23 | return debounced 24 | } 25 | -------------------------------------------------------------------------------- /dev/components/components/video-embedding.vue: -------------------------------------------------------------------------------- 1 |