quasar 2.3.1 → 2.3.2

package/dist/ssr-directives/Morph.js

@@ -1,5 +1,5 @@
 /*!
- * Quasar Framework v2.3.1
+ * Quasar Framework v2.3.2
  * (c) 2015-present Razvan Stoenescu
  * Released under the MIT License.
  */

package/dist/types/composables.d.ts

@@ -12,7 +12,11 @@ interface useDialogPluginComponent {
     onDialogOK: (payload?: any) => void;
     onDialogCancel: () => void;
   };
-  emits: string[];
+  emits: ['ok', 'hide'];
+  emitsObject: {
+    ok: () => true;
+    hide: () => true;
+  }
 }
 
 export const useDialogPluginComponent: useDialogPluginComponent;

package/dist/types/extras/icon-set.d.ts

@@ -111,6 +111,7 @@ export type QuasarIconSets =
   | "fontawesome-v5"
   | "fontawesome-v5-pro"
   | "svg-fontawesome-v5"
+  | "svg-ionicons-v6"
   | "svg-ionicons-v5"
   | "ionicons-v4"
   | "svg-ionicons-v4"

package/dist/web-types/web-types.json

@@ -2,7 +2,7 @@
   "$schema": "",
   "framework": "vue",
   "name": "quasar",
-  "version": "2.3.1",
+  "version": "2.3.2",
   "contributions": {
     "html": {
       "types-syntax": "typescript",

package/icon-set/svg-ionicons-v6.js

@@ -0,0 +1,225 @@
+
+import {
+  ionCheckmark,
+  ionAlert,
+  ionInformationCircleOutline,
+  ionArrowUp,
+  ionArrowForward,
+  ionArrowDown,
+  ionArrowBack,
+  ionCaretDownOutline,
+  ionAperture,
+  ionOptions,
+  ionApps,
+  ionRefresh,
+  ionSquare,
+  ionCloseCircle,
+  ionTime,
+  ionCalendar,
+  ionLink,
+  ionExpand,
+  ionChatboxEllipses,
+  ionPrint,
+  ionArrowUndo,
+  ionArrowRedo,
+  ionCodeSlash,
+  ionAdd,
+  ionClose,
+  ionPlaySkipBackCircle,
+  ionPlaySkipForwardCircle,
+  ionStar,
+  ionCreate,
+  ionWarning,
+  ionPlay,
+  ionAddCircle,
+  ionCloudUpload,
+  ionTrash,
+  ionCheckmarkDone,
+  ionChevronDown,
+  ionChevronUp,
+  ionChevronBack,
+  ionChevronForward,
+  ionChevronBackCircle,
+  ionChevronForwardCircle
+} from '@quasar/extras/ionicons-v6'
+
+// there are some icons that are needed but not available
+// so we import them from MDI as svgs
+
+import {
+  mdiFormatBold,
+  mdiFormatItalic,
+  mdiFormatStrikethroughVariant,
+  mdiFormatUnderline,
+  mdiFormatListBulleted,
+  mdiFormatListNumbered,
+  mdiFormatSubscript,
+  mdiFormatSuperscript,
+  mdiFormatAlignLeft,
+  mdiFormatAlignCenter,
+  mdiFormatAlignRight,
+  mdiFormatAlignJustify,
+  mdiFormatIndentDecrease,
+  mdiFormatIndentIncrease,
+  mdiFormatClear,
+  mdiFormatColorText,
+  mdiFormatSize,
+  mdiMinus,
+  mdiFormatHeader1,
+  mdiFormatHeader2,
+  mdiFormatHeader3,
+  mdiFormatHeader4,
+  mdiFormatHeader5,
+  mdiFormatHeader6,
+  mdiNumeric1Box,
+  mdiNumeric2Box,
+  mdiNumeric3Box,
+  mdiNumeric4Box,
+  mdiNumeric5Box,
+  mdiNumeric6Box,
+  mdiNumeric7Box,
+  mdiFormatFont
+} from '@quasar/extras/mdi-v6'
+
+export default {
+  name: 'svg-ionicons-v6',
+  type: {
+    positive: ionCheckmark,
+    negative: ionAlert,
+    info: ionInformationCircleOutline,
+    warning: ionAlert
+  },
+  arrow: {
+    up: ionArrowUp,
+    right: ionArrowForward,
+    down: ionArrowDown,
+    left: ionArrowBack,
+    dropdown: ionCaretDownOutline
+  },
+  chevron: {
+    left: ionArrowBack,
+    right: ionArrowForward
+  },
+  colorPicker: {
+    spectrum: ionAperture,
+    tune: ionOptions,
+    palette: ionApps
+  },
+  pullToRefresh: {
+    icon: ionRefresh
+  },
+  carousel: {
+    left: ionChevronBack,
+    right: ionChevronForward,
+    up: ionChevronUp,
+    down: ionChevronDown,
+    navigationIcon: ionSquare
+  },
+  chip: {
+    remove: ionCloseCircle,
+    selected: ionCheckmark
+  },
+  datetime: {
+    arrowLeft: ionChevronBack,
+    arrowRight: ionChevronForward,
+    now: ionTime,
+    today: ionCalendar
+  },
+  editor: { // requires Material icons for some as Ionicons simply does not have everything needed
+    hyperlink: ionLink,
+    toggleFullscreen: ionExpand,
+    quote: ionChatboxEllipses,
+    print: ionPrint,
+    undo: ionArrowUndo,
+    redo: ionArrowRedo,
+    code: ionCodeSlash,
+    viewSource: ionCodeSlash,
+
+    bold: mdiFormatBold,
+    italic: mdiFormatItalic,
+    strikethrough: mdiFormatStrikethroughVariant,
+    underline: mdiFormatUnderline,
+    unorderedList: mdiFormatListBulleted,
+    orderedList: mdiFormatListNumbered,
+    subscript: mdiFormatSubscript,
+    superscript: mdiFormatSuperscript,
+    left: mdiFormatAlignLeft,
+    center: mdiFormatAlignCenter,
+    right: mdiFormatAlignRight,
+    justify: mdiFormatAlignJustify,
+    outdent: mdiFormatIndentDecrease,
+    indent: mdiFormatIndentIncrease,
+    removeFormat: mdiFormatClear,
+    formatting: mdiFormatColorText,
+    fontSize: mdiFormatSize,
+    align: mdiFormatAlignLeft,
+    hr: mdiMinus,
+    heading: mdiFormatSize,
+    heading1: mdiFormatHeader1,
+    heading2: mdiFormatHeader2,
+    heading3: mdiFormatHeader3,
+    heading4: mdiFormatHeader4,
+    heading5: mdiFormatHeader5,
+    heading6: mdiFormatHeader6,
+    size: mdiFormatSize,
+    size1: mdiNumeric1Box,
+    size2: mdiNumeric2Box,
+    size3: mdiNumeric3Box,
+    size4: mdiNumeric4Box,
+    size5: mdiNumeric5Box,
+    size6: mdiNumeric6Box,
+    size7: mdiNumeric7Box,
+    font: mdiFormatFont
+  },
+  expansionItem: {
+    icon: ionCaretDownOutline,
+    denseIcon: ionCaretDownOutline
+  },
+  fab: {
+    icon: ionAdd,
+    activeIcon: ionClose
+  },
+  field: {
+    clear: ionCloseCircle,
+    error: ionAlert
+  },
+  pagination: {
+    first: ionPlaySkipBackCircle,
+    prev: ionChevronBackCircle,
+    next: ionChevronForwardCircle,
+    last: ionPlaySkipForwardCircle
+  },
+  rating: {
+    icon: ionStar
+  },
+  stepper: {
+    done: ionCheckmark,
+    active: ionCreate,
+    error: ionWarning
+  },
+  tabs: {
+    left: ionChevronBack,
+    right: ionChevronForward,
+    up: ionChevronUp,
+    down: ionChevronDown
+  },
+  table: {
+    arrowUp: ionArrowUp,
+    warning: ionWarning,
+    firstPage: ionPlaySkipBackCircle,
+    prevPage: ionChevronBackCircle,
+    nextPage: ionChevronForwardCircle,
+    lastPage: ionPlaySkipForwardCircle
+  },
+  tree: {
+    icon: ionPlay
+  },
+  uploader: {
+    done: ionCheckmark,
+    clear: ionClose,
+    add: ionAddCircle,
+    upload: ionCloudUpload,
+    removeQueue: ionTrash,
+    removeUploaded: ionCheckmarkDone
+  }
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "quasar",
-  "version": "2.3.1",
+  "version": "2.3.2",
   "description": "Build high-performance VueJS user interfaces (SPA, PWA, SSR, Mobile and Desktop) in record time",
   "main": "dist/quasar.cjs.prod.js",
   "module": "dist/quasar.esm.prod.js",
@@ -63,7 +63,7 @@
   "devDependencies": {
     "@babel/eslint-parser": "^7.13.14",
     "@quasar/app": "^3.0.0",
-    "@quasar/extras": "^1.11.0",
+    "@quasar/extras": "^1.12.0",
     "@rollup/plugin-node-resolve": "^11.2.1",
     "@rollup/plugin-replace": "^2.3.3",
     "babel-preset-es2015-rollup": "^3.0.0",

package/src/components/editor/QEditor.js

@@ -80,12 +80,12 @@ export default createComponent({
   ],
 
   setup (props, { slots, emit, attrs }) {
-    const { proxy } = getCurrentInstance()
+    const { proxy, vnode } = getCurrentInstance()
     const { $q } = proxy
 
     const isDark = useDark(props, $q)
     const { inFullscreen, toggleFullscreen } = useFullscreen()
-    const splitAttrs = useSplitAttrs(attrs)
+    const splitAttrs = useSplitAttrs(attrs, vnode)
 
     const rootRef = ref(null)
     const contentRef = ref(null)

package/src/components/icon/QIcon.js

@@ -33,7 +33,7 @@ const mRE = /^M/
 const imgRE = /^img:/
 const svgUseRE = /^svguse:/
 const ionRE = /^ion-/
-const faLaRE = /^[l|f]a[s|r|l|b|d]? /
+const faLaRE = /^[l|f]a[s|r|l|b|d|k]? /
 
 export default createComponent({
   name: 'QIcon',

package/src/components/scroll-area/QScrollArea.js

@@ -173,7 +173,7 @@ export default createComponent({
     )
 
     const mainStyle = computed(() => (
-      scroll.vertical.thumbHidden.value === true || scroll.horizontal.thumbHidden.value === true
+      scroll.vertical.thumbHidden.value === true && scroll.horizontal.thumbHidden.value === true
         ? props.contentStyle
         : props.contentActiveStyle
     ))

package/src/components/select/QSelect.js

@@ -1173,7 +1173,7 @@ export default createComponent({
     function getDialog () {
       const content = [
         h(QField, {
-          class: `col-auto ${ state.fieldClass }`,
+          class: `col-auto ${ state.fieldClass.value }`,
           ...innerFieldProps.value,
           for: state.targetUid.value,
           dark: isOptionsDark.value,

package/src/composables/private/use-field.js

@@ -75,7 +75,7 @@ export const useFieldProps = {
 export const useFieldEmits = [ 'update:modelValue', 'clear', 'focus', 'blur', 'popup-show', 'popup-hide' ]
 
 export function useFieldState () {
-  const { props, attrs, proxy } = getCurrentInstance()
+  const { props, attrs, proxy, vnode } = getCurrentInstance()
 
   const isDark = useDark(props, proxy.$q)
 
@@ -90,7 +90,7 @@ export function useFieldState () {
     focused: ref(false),
     hasPopupOpen: false,
 
-    splitAttrs: useSplitAttrs(attrs),
+    splitAttrs: useSplitAttrs(attrs, vnode),
     targetUid: ref(getTargetUid(props.for)),
 
     rootRef: ref(null),

package/src/composables/private/use-split-attrs.js

@@ -2,7 +2,7 @@ import { ref, onBeforeUpdate } from 'vue'
 
 const listenerRE = /^on[A-Z]/
 
-export default function (attrs) {
+export default function (attrs, vnode) {
   const acc = {
     listeners: ref({}),
     attributes: ref({})
@@ -21,6 +21,12 @@ export default function (attrs) {
       }
     })
 
+    Object.keys(vnode.props).forEach(key => {
+      if (listenerRE.test(key) === true) {
+        listeners[ key ] = vnode.props[ key ]
+      }
+    })
+
     acc.listeners.value = listeners
     acc.attributes.value = attributes
   }

package/src/composables/use-dialog-plugin-component.js

@@ -36,6 +36,7 @@ function useDialogPluginComponent () {
   }
 }
 
+// Don't forget to update the types in "ui/types/composables.d.ts"
 const emits = [ 'ok', 'hide' ]
 
 useDialogPluginComponent.emits = emits