quasar 2.15.1 → 2.15.3

package/src/components/btn/use-btn.js

@@ -1,8 +1,8 @@
 import { computed } from 'vue'
 
-import useAlign, { useAlignProps } from '../../composables/private/use-align.js'
-import useSize, { useSizeProps } from '../../composables/private/use-size.js'
-import useRouterLink, { useRouterLinkProps } from '../../composables/private/use-router-link.js'
+import useAlign, { useAlignProps } from '../../composables/private.use-align/use-align.js'
+import useSize, { useSizeProps } from '../../composables/private.use-size/use-size.js'
+import useRouterLink, { useRouterLinkProps } from '../../composables/private.use-router-link/use-router-link.js'
 
 export const btnPadding = {
   none: 0,
@@ -13,7 +13,7 @@ export const btnPadding = {
   xl: 32
 }
 
-const defaultSizes = {
+export const defaultSizes = {
   xs: 8,
   sm: 10,
   md: 14,
@@ -25,14 +25,16 @@ const formTypes = [ 'button', 'submit', 'reset' ]
 const mediaTypeRE = /[^\s]\/[^\s]/
 
 export const btnDesignOptions = [ 'flat', 'outline', 'push', 'unelevated' ]
-export const getBtnDesign = (props, defaultValue) => {
+
+export function getBtnDesign (props, defaultValue) {
   if (props.flat === true) return 'flat'
   if (props.outline === true) return 'outline'
   if (props.push === true) return 'push'
   if (props.unelevated === true) return 'unelevated'
   return defaultValue
 }
-export const getBtnDesignAttr = props => {
+
+export function getBtnDesignAttr (props) {
   const design = getBtnDesign(props)
   return design !== void 0
     ? { [ design ]: true }

package/src/components/btn/use-btn.json

@@ -1,15 +1,15 @@
 {
-  "mixins": [ "composables/private/use-size" ],
+  "mixins": [ "composables/private.use-size/use-size" ],
 
   "props": {
     "type":{
       "type": "String",
       "desc": "1) Define the button native type attribute (submit, reset, button) or 2) render component with <a> tag so you can access events even if disable or 3) Use 'href' prop and specify 'type' as a media tag",
-      "default": "button",
+      "default": "'button'",
       "examples": [
-        "a", "submit", "button", "reset",
-        "image/png",
-        "href=\"https://quasar.dev\" target=\"_blank\""
+        "'a'", "'submit'", "'button'", "'reset'",
+        "'image/png'",
+        "# href=\"https://quasar.dev\" target=\"_blank\""
       ],
       "category": "general"
     },
@@ -18,8 +18,8 @@
       "type": [ "String", "Object" ],
       "desc": "Equivalent to Vue Router <router-link> 'to' property; Superseded by 'href' prop if used",
       "examples": [
-        "/home/dashboard",
-        ":to=\"{ name: 'my-route-name' }\""
+        "'/home/dashboard'",
+        "{ name: 'my-route-name' }"
       ],
       "category": "navigation"
     },
@@ -33,7 +33,7 @@
     "href": {
       "type": "String",
       "desc": "Native <a> link href attribute; Has priority over the 'to' and 'replace' props",
-      "examples": [ "https://quasar.dev", "href=\"https://quasar.dev\" target=\"_blank\"" ],
+      "examples": [ "'https://quasar.dev'", "# href=\"https://quasar.dev\" target=\"_blank\"" ],
       "category": "navigation",
       "addedIn": "v2.4"
     },
@@ -41,7 +41,7 @@
     "target": {
       "type": "String",
       "desc": "Native <a> link target attribute; Use it only with 'to' or 'href' props",
-      "examples": [ "_blank", "_self", "_parent", "_top" ],
+      "examples": [ "'_blank'", "'_self'", "'_parent'", "'_top'" ],
       "category": "navigation",
       "addedIn": "v2.4"
     },
@@ -49,7 +49,7 @@
     "label":{
       "type": [ "String", "Number" ],
       "desc": "The text that will be shown on the button",
-      "examples": [ "Button Label" ],
+      "examples": [ "'Button Label'" ],
       "category": "content"
     },
 
@@ -117,7 +117,7 @@
     "padding": {
       "type": "String",
       "desc": "Apply custom padding (vertical [horizontal]); Size in CSS units, including unit name or standard size name (none|xs|sm|md|lg|xl); Also removes the min width and height when set",
-      "examples": [ "16px", "10px 5px", "2rem", "xs", "md lg", "2px 2px 5px 7px" ],
+      "examples": [ "'16px'", "'10px 5px'", "'2rem'", "'xs'", "'md lg'", "'2px 2px 5px 7px'" ],
       "category": "style"
     },
 
@@ -156,8 +156,8 @@
     "align": {
       "type": "String",
       "desc": "Label or content alignment",
-      "default": "center",
-      "values": [ "left", "right", "center", "around", "between", "evenly" ],
+      "default": "'center'",
+      "values": [ "'left'", "'right'", "'center'", "'around'", "'between'", "'evenly'" ],
       "category": "content"
     },
 
@@ -175,7 +175,7 @@
 
     "loading": {
       "type": [ "Boolean", "null" ],
-      "default": null,
+      "default": "null",
       "desc": "Put button into loading state (displays a QSpinner -- can be overridden by using a 'loading' slot)",
       "category": "behavior|state"
     },

package/src/components/btn/use-btn.test.js

@@ -0,0 +1,134 @@
+import { mount } from '@vue/test-utils'
+import { describe, test, expect } from 'vitest'
+import { defineComponent } from 'vue'
+
+import useBtn, {
+  btnPadding, defaultSizes, btnDesignOptions, useBtnProps,
+  getBtnDesign, getBtnDesignAttr
+} from './use-btn.js'
+
+describe('[useBtn API]', () => {
+  describe('[Variables]', () => {
+    describe('[(variable)btnPadding]', () => {
+      test('is defined correctly', () => {
+        expect(btnPadding).toBeTypeOf('object')
+        expect(Object.keys(btnPadding)).not.toHaveLength(0)
+      })
+    })
+
+    describe('[(variable)defaultSizes]', () => {
+      test('is defined correctly', () => {
+        expect(defaultSizes).toBeTypeOf('object')
+        expect(Object.keys(defaultSizes)).not.toHaveLength(0)
+      })
+    })
+
+    describe('[(variable)btnDesignOptions]', () => {
+      test('is defined correctly', () => {
+        expect(btnDesignOptions).toBeTypeOf('object')
+        expect(Object.keys(btnDesignOptions)).not.toHaveLength(0)
+      })
+    })
+
+    describe('[(variable)useBtnProps]', () => {
+      test('is defined correctly', () => {
+        expect(useBtnProps).toBeTypeOf('object')
+        expect(Object.keys(useBtnProps)).not.toHaveLength(0)
+      })
+    })
+  })
+
+  describe('[Functions]', () => {
+    describe('[(function)default]', () => {
+      test('has correct return value', () => {
+        const wrapper = mount(
+          defineComponent({
+            template: '<div />',
+            setup () {
+              const result = useBtn({})
+              return { result }
+            }
+          })
+        )
+
+        expect(
+          wrapper.vm.result
+        ).toStrictEqual({
+          classes: expect.$ref(expect.any(String)),
+          style: expect.$ref(expect.any(Object)),
+          innerClasses: expect.$ref(expect.any(String)),
+          attributes: expect.$ref(expect.any(Object)),
+          hasLink: expect.$ref(expect.any(Boolean)),
+          linkTag: expect.$ref(expect.any(String)),
+          navigateOnClick: expect.any(Function),
+          isActionable: expect.$ref(expect.any(Boolean))
+        })
+      })
+    })
+
+    describe('[(function)getBtnDesign]', () => {
+      test('returns correctly with single value', () => {
+        for (const prop of btnDesignOptions) {
+          expect(
+            getBtnDesign({ [ prop ]: true })
+          ).toBe(prop)
+
+          expect(
+            getBtnDesign({ [ prop ]: true }, 'default')
+          ).toBe(prop)
+
+          expect(
+            getBtnDesign({ [ prop ]: false })
+          ).toBeUndefined()
+
+          expect(
+            getBtnDesign({ [ prop ]: false }, 'default')
+          ).toBe('default')
+        }
+      })
+
+      test('returns correctly with multiple values', () => {
+        for (const prop of btnDesignOptions) {
+          const propMap = btnDesignOptions
+            .reduce((acc, val) => {
+              if (val !== prop) {
+                acc[ val ] = true
+              }
+
+              return acc
+            }, {})
+
+          expect(
+            getBtnDesign(propMap)
+          ).not.toBe(prop)
+
+          expect(
+            getBtnDesign(propMap, 'default')
+          ).not.toBe('default')
+        }
+      })
+    })
+
+    describe('[(function)getBtnDesignAttr]', () => {
+      test('has correct return value', () => {
+        expect(
+          getBtnDesignAttr({})
+        ).toStrictEqual({})
+
+        expect(
+          getBtnDesignAttr({ something: true })
+        ).toStrictEqual({})
+
+        for (const prop of btnDesignOptions) {
+          expect(
+            getBtnDesignAttr({ [ prop ]: true })
+          ).toStrictEqual({ [ prop ]: true })
+
+          expect(
+            getBtnDesignAttr({ [ prop ]: false })
+          ).toStrictEqual({})
+        }
+      })
+    })
+  })
+})

package/src/components/btn-dropdown/QBtnDropdown.js

@@ -6,25 +6,24 @@ import QBtnGroup from '../btn-group/QBtnGroup.js'
 import QMenu from '../menu/QMenu.js'
 
 import { getBtnDesignAttr, useBtnProps } from '../btn/use-btn.js'
-import useId from '../../composables/use-id.js'
-import { useTransitionProps } from '../../composables/private/use-transition.js'
+import useId from '../../composables/use-id/use-id.js'
+import { useTransitionProps } from '../../composables/private.use-transition/use-transition.js'
 
-import { createComponent } from '../../utils/private/create.js'
-import { stop } from '../../utils/event.js'
-import { hSlot } from '../../utils/private/render.js'
+import { createComponent } from '../../utils/private.create/create.js'
+import { stop } from '../../utils/event/event.js'
+import { hSlot } from '../../utils/private.render/render.js'
 
 const btnPropsList = Object.keys(useBtnProps)
 
-export const passBtnProps = props => btnPropsList.reduce(
-  (acc, key) => {
+export function passBtnProps (props) {
+  return btnPropsList.reduce((acc, key) => {
     const val = props[ key ]
     if (val !== void 0) {
       acc[ key ] = val
     }
     return acc
-  },
-  {}
-)
+  }, {})
+}
 
 export default createComponent({
   name: 'QBtnDropdown',

package/src/components/btn-dropdown/QBtnDropdown.json

@@ -1,5 +1,5 @@
 {
-  "mixins": [ "components/btn/use-btn", "composables/private/use-model-toggle", "composables/private/use-transition" ],
+  "mixins": [ "components/btn/use-btn", "composables/private.use-model-toggle/use-model-toggle", "composables/private.use-transition/use-transition" ],
 
   "meta": {
     "docsUrl": "https://v2.quasar.dev/vue-components/button-dropdown"
@@ -11,7 +11,7 @@
       "type": "Boolean",
       "desc": "Controls Menu show/hidden state; Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive",
       "required": false,
-      "examples": [ "v-model=\"menuState\"" ]
+      "examples": [ "# v-model=\"menuState\"" ]
     },
 
     "split": {
@@ -47,8 +47,8 @@
       "tsType": "VueStyleProp",
       "desc": "Style definitions to be attributed to the menu",
       "examples": [
-        "background-color: #ff0000",
-        ":content-style=\"{ backgroundColor: '#ff0000' }\""
+        "'background-color: #ff0000'",
+        "{ backgroundColor: '#ff0000' }"
       ],
       "category": "style"
     },
@@ -58,8 +58,8 @@
       "tsType": "VueClassProp",
       "desc": "Class definitions to be attributed to the menu",
       "examples": [
-        "my-special-class",
-        ":content-class=\"{ 'my-special-class': <condition> }\""
+        "'my-special-class'",
+        "{ 'my-special-class': true }"
       ],
       "category": "style"
     },
@@ -92,11 +92,11 @@
       "type": "String",
       "desc": "Two values setting the starting position or anchor point of the menu relative to its target",
       "values": [
-        "top left", "top middle", "top right", "top start", "top end",
-        "center left", "center middle", "center right", "center start", "center end",
-        "bottom left", "bottom middle", "bottom right", "bottom start", "bottom end"
+        "'top left'", "'top middle'", "'top right'", "'top start'", "'top end'",
+        "'center left'", "'center middle'", "'center right'", "'center start'", "'center end'",
+        "'bottom left'", "'bottom middle'", "'bottom right'", "'bottom start'", "'bottom end'"
       ],
-      "default": "bottom end",
+      "default": "'bottom end'",
       "category": "position"
     },
 
@@ -104,25 +104,25 @@
       "type": "String",
       "desc": "Two values setting the menu's own position relative to its target",
       "values": [
-        "top left", "top middle", "top right", "top start", "top end",
-        "center left", "center middle", "center right", "center start", "center end",
-        "bottom left", "bottom middle", "bottom right", "bottom start", "bottom end"
+        "'top left'", "'top middle'", "'top right'", "'top start'", "'top end'",
+        "'center left'", "'center middle'", "'center right'", "'center start'", "'center end'",
+        "'bottom left'", "'bottom middle'", "'bottom right'", "'bottom start'", "'bottom end'"
       ],
-      "default": "top end",
+      "default": "'top end'",
       "category": "position"
     },
 
     "menu-offset": {
       "type": "Array",
       "desc": "An array of two numbers to offset the menu horizontally and vertically in pixels",
-      "examples": [ "[8, 8]", "[5, 10]" ],
+      "examples": [ "[ 8, 8 ]", "[ 5, 10 ]" ],
       "category": "position"
     },
 
     "toggle-aria-label": {
       "type": "String",
       "desc": "aria-label to be used on the dropdown toggle element",
-      "examples": [ "Open menu" ],
+      "examples": [ "'Open menu'" ],
       "category": "accessibility",
       "addedIn": "v2.8.4"
     }

package/src/components/btn-group/QBtnGroup.js

@@ -1,7 +1,7 @@
 import { h, computed } from 'vue'
 
-import { createComponent } from '../../utils/private/create.js'
-import { hSlot } from '../../utils/private/render.js'
+import { createComponent } from '../../utils/private.create/create.js'
+import { hSlot } from '../../utils/private.render/render.js'
 
 export default createComponent({
   name: 'QBtnGroup',

package/src/components/btn-toggle/QBtnToggle.js

@@ -3,10 +3,10 @@ import { h, computed } from 'vue'
 import QBtn from '../btn/QBtn.js'
 import QBtnGroup from '../btn-group/QBtnGroup.js'
 
-import { createComponent } from '../../utils/private/create.js'
-import { useFormInject, useFormProps } from '../../composables/private/use-form.js'
+import { createComponent } from '../../utils/private.create/create.js'
+import { useFormInject, useFormProps } from '../../composables/use-form/private.use-form.js'
 
-import { hMergeSlot } from '../../utils/private/render.js'
+import { hMergeSlot } from '../../utils/private.render/render.js'
 import { getBtnDesignAttr } from '../btn/use-btn.js'
 
 export default createComponent({

package/src/components/btn-toggle/QBtnToggle.json

@@ -1,5 +1,5 @@
 {
-  "mixins": [ "composables/private/use-form" ],
+  "mixins": [ "composables/use-form/private.use-form" ],
 
   "meta": {
     "docsUrl": "https://v2.quasar.dev/vue-components/button-toggle"
@@ -10,7 +10,7 @@
       "extends": "model-value",
       "type": "Any",
       "desc": "Model of the component; Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive",
-      "examples": [ "v-model=\"selected\"" ]
+      "examples": [ "# v-model=\"selected\"" ]
     },
 
     "options": {
@@ -27,7 +27,7 @@
         "label": {
           "type": "String",
           "desc": "Label of option button; Use this prop and/or 'icon', but at least one is required",
-          "examples": [ "Option 1" ]
+          "examples": [ "'Option 1'" ]
         },
         "icon": {
           "extends": "icon",
@@ -41,7 +41,7 @@
         "slot": {
           "type": "String",
           "desc": "Slot name to use for this button content; Useful for customizing content or even add tooltips",
-          "examples": [ "mySlot" ]
+          "examples": [ "'mySlot'" ]
         },
         "...props": {
           "type": "Any",
@@ -49,7 +49,7 @@
         }
       },
       "examples": [
-        "[ {label: 'One', value: 'one'}, {label: 'Two', value: 'two'} ]"
+        "[ { label: 'One', value: 'one' }, { label: 'Two', value: 'two' } ]"
       ],
       "category": "model"
     },
@@ -64,7 +64,7 @@
 
     "toggle-color": {
       "extends": "color",
-      "default": "primary"
+      "default": "'primary'"
     },
 
     "toggle-text-color": {
@@ -116,14 +116,14 @@
     "size": {
       "type": "String",
       "desc": "Button size name or a CSS unit including unit name",
-      "examples": [ "xs", "sm", "md", "lg", "xl", "25px", "2rem" ],
+      "examples": [ "'xs'", "'sm'", "'md'", "'lg'", "'xl'", "'25px'", "'2rem'" ],
       "category": "style"
     },
 
     "padding": {
       "type": "String",
       "desc": "Apply custom padding (vertical [horizontal]); Size in CSS units, including unit name or standard size name (none|xs|sm|md|lg|xl); Also removes the min width and height when set",
-      "examples": [ "16px", "10px 5px", "2rem", "xs", "md lg", "2px 2px 5px 7px" ],
+      "examples": [ "'16px'", "'10px 5px'", "'2rem'", "'xs'", "'md lg'", "'2px 2px 5px 7px'" ],
       "category": "style"
     },
 

package/src/components/card/QCard.js

@@ -1,9 +1,9 @@
 import { h, computed, getCurrentInstance } from 'vue'
 
-import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
+import useDark, { useDarkProps } from '../../composables/private.use-dark/use-dark.js'
 
-import { createComponent } from '../../utils/private/create.js'
-import { hSlot } from '../../utils/private/render.js'
+import { createComponent } from '../../utils/private.create/create.js'
+import { hSlot } from '../../utils/private.render/render.js'
 
 export default createComponent({
   name: 'QCard',

package/src/components/card/QCard.json

@@ -22,8 +22,8 @@
 
     "tag": {
       "extends": "tag",
-      "default": "div",
-      "examples": [ "div", "form" ]
+      "default": "'div'",
+      "examples": [ "'div'", "'form'" ]
     }
   },
 

package/src/components/card/QCardActions.js

@@ -1,9 +1,9 @@
 import { h, computed } from 'vue'
 
-import useAlign, { useAlignProps } from '../../composables/private/use-align.js'
+import useAlign, { useAlignProps } from '../../composables/private.use-align/use-align.js'
 
-import { createComponent } from '../../utils/private/create.js'
-import { hSlot } from '../../utils/private/render.js'
+import { createComponent } from '../../utils/private.create/create.js'
+import { hSlot } from '../../utils/private.render/render.js'
 
 export default createComponent({
   name: 'QCardActions',

package/src/components/card/QCardActions.json

@@ -6,9 +6,9 @@
   "props": {
     "align": {
       "type": "String",
-      "desc": "Specify how to align the actions",
-      "default": "left (for horizontal mode) / stretch (for vertical mode)",
-      "values": [ "left", "center", "right", "between", "around", "evenly", "stretch" ],
+      "desc": "Specify how to align the actions; For horizontal mode, the default is 'left', while for vertical mode, the default is 'stretch'",
+      "default": "# 'left'/'stretch'",
+      "values": [ "'left'", "'center'", "'right'", "'between'", "'around'", "'evenly'", "'stretch'" ],
       "category": "content"
     },
 

package/src/components/card/QCardSection.js

@@ -1,7 +1,7 @@
 import { h, computed } from 'vue'
 
-import { createComponent } from '../../utils/private/create.js'
-import { hSlot } from '../../utils/private/render.js'
+import { createComponent } from '../../utils/private.create/create.js'
+import { hSlot } from '../../utils/private.render/render.js'
 
 export default createComponent({
   name: 'QCardSection',

package/src/components/card/QCardSection.json

@@ -12,8 +12,8 @@
 
     "tag": {
       "extends": "tag",
-      "default": "div",
-      "examples": [ "div", "form" ]
+      "default": "'div'",
+      "examples": [ "'div'", "'form'" ]
     }
   },
 

package/src/components/carousel/QCarousel.js

@@ -2,13 +2,13 @@ import { h, computed, watch, onMounted, onBeforeUnmount, getCurrentInstance } fr
 
 import QBtn from '../btn/QBtn.js'
 
-import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
-import usePanel, { usePanelProps, usePanelEmits } from '../../composables/private/use-panel.js'
-import useFullscreen, { useFullscreenProps, useFullscreenEmits } from '../../composables/private/use-fullscreen.js'
+import useDark, { useDarkProps } from '../../composables/private.use-dark/use-dark.js'
+import usePanel, { usePanelProps, usePanelEmits } from '../../composables/private.use-panel/use-panel.js'
+import useFullscreen, { useFullscreenProps, useFullscreenEmits } from '../../composables/private.use-fullscreen/use-fullscreen.js'
 
-import { createComponent } from '../../utils/private/create.js'
-import { isNumber } from '../../utils/is.js'
-import { hMergeSlot, hDir } from '../../utils/private/render.js'
+import { createComponent } from '../../utils/private.create/create.js'
+import { isNumber } from '../../utils/is/is.js'
+import { hMergeSlot, hDir } from '../../utils/private.render/render.js'
 
 const navigationPositionOptions = [ 'top', 'right', 'bottom', 'left' ]
 const controlTypeOptions = [ 'regular', 'flat', 'outline', 'push', 'unelevated' ]

package/src/components/carousel/QCarousel.json

@@ -1,5 +1,5 @@
 {
-  "mixins": [ "composables/private/use-panel", "composables/private/use-fullscreen" ],
+  "mixins": [ "composables/private.use-panel/use-panel", "composables/private.use-fullscreen/use-fullscreen" ],
 
   "meta": {
     "docsUrl": "https://v2.quasar.dev/vue-components/carousel"
@@ -34,18 +34,18 @@
     "control-type": {
       "type": "String",
       "desc": "Type of button to use for controls (arrows, navigation)",
-      "values": [ "regular", "flat", "outline", "push", "unelevated" ],
+      "values": [ "'regular'", "'flat'", "'outline'", "'push'", "'unelevated'" ],
       "category": "style"
     },
 
     "autoplay": {
       "type": [ "Number", "Boolean" ],
       "desc": "Jump to next slide (if 'true' or val > 0) or previous slide (if val < 0) at fixed time intervals (in milliseconds); 'false' disables autoplay, 'true' enables it for 5000ms intervals",
-      "default": false,
+      "default": "false",
       "examples": [
-        ":autoplay=\"2500\"",
-        true,
-        false
+        "true",
+        "false",
+        "2500"
       ],
       "category": "behavior"
     },
@@ -73,8 +73,8 @@
     "navigation-position": {
       "type": "String",
       "desc": "Side to stick navigation to",
-      "default": "bottom/right",
-      "values": [ "top", "right", "bottom", "left" ],
+      "default": "# 'bottom'/'right'",
+      "values": [ "'top'", "'right'", "'bottom'", "'left'" ],
       "category": "content"
     },
 
@@ -94,11 +94,11 @@
     },
 
     "transition-prev": {
-      "default": "fade"
+      "default": "'fade'"
     },
 
     "transition-next": {
-      "default": "fade"
+      "default": "'fade'"
     }
   },
 

package/src/components/carousel/QCarouselControl.js

@@ -1,7 +1,7 @@
 import { h, computed } from 'vue'
 
-import { createComponent } from '../../utils/private/create.js'
-import { hSlot } from '../../utils/private/render.js'
+import { createComponent } from '../../utils/private.create/create.js'
+import { hSlot } from '../../utils/private.render/render.js'
 
 export default createComponent({
   name: 'QCarouselControl',