quasar 2.18.7 → 2.19.0

package/src/components/chat/QChatMessage.js

@@ -22,25 +22,30 @@ export default createComponent({
     stampHtml: Boolean
   },
 
-  setup (props, { slots }) {
+  setup(props, { slots }) {
     const op = computed(() => (props.sent === true ? 'sent' : 'received'))
 
-    const textClass = computed(() =>
-      `q-message-text-content q-message-text-content--${ op.value }`
-      + (props.textColor !== void 0 ? ` text-${ props.textColor }` : '')
+    const textClass = computed(
+      () =>
+        `q-message-text-content q-message-text-content--${op.value}` +
+        (props.textColor !== void 0 ? ` text-${props.textColor}` : '')
     )
 
-    const messageClass = computed(() =>
-      `q-message-text q-message-text--${ op.value }`
-      + (props.bgColor !== void 0 ? ` text-${ props.bgColor }` : '')
+    const messageClass = computed(
+      () =>
+        `q-message-text q-message-text--${op.value}` +
+        (props.bgColor !== void 0 ? ` text-${props.bgColor}` : '')
     )
 
-    const containerClass = computed(() =>
-      'q-message-container row items-end no-wrap'
-      + (props.sent === true ? ' reverse' : '')
+    const containerClass = computed(
+      () =>
+        'q-message-container row items-end no-wrap' +
+        (props.sent === true ? ' reverse' : '')
     )
 
-    const sizeClass = computed(() => (props.size !== void 0 ? `col-${ props.size }` : ''))
+    const sizeClass = computed(() =>
+      props.size !== void 0 ? `col-${props.size}` : ''
+    )
 
     const domProps = computed(() => ({
       msg: props.textHtml === true ? 'innerHTML' : 'textContent',
@@ -49,9 +54,9 @@ export default createComponent({
       label: props.labelHtml === true ? 'innerHTML' : 'textContent'
     }))
 
-    function wrapStamp (node) {
+    function wrapStamp(node) {
       if (slots.stamp !== void 0) {
-        return [ node, h('div', { class: 'q-message-stamp' }, slots.stamp()) ]
+        return [node, h('div', { class: 'q-message-stamp' }, slots.stamp())]
       }
 
       if (props.stamp) {
@@ -59,25 +64,32 @@ export default createComponent({
           node,
           h('div', {
             class: 'q-message-stamp',
-            [ domProps.value.stamp ]: props.stamp
+            [domProps.value.stamp]: props.stamp
           })
         ]
       }
 
-      return [ node ]
+      return [node]
     }
 
-    function getText (contentList, withSlots) {
-      const content = withSlots === true
-        ? (contentList.length > 1 ? text => text : text => h('div', [ text ]))
-        : text => h('div', { [ domProps.value.msg ]: text })
-
-      return contentList.map((msg, index) => h('div', {
-        key: index,
-        class: messageClass.value
-      }, [
-        h('div', { class: textClass.value }, wrapStamp(content(msg)))
-      ]))
+    function getText(contentList, withSlots) {
+      const content =
+        withSlots === true
+          ? contentList.length > 1
+            ? text => text
+            : text => h('div', [text])
+          : text => h('div', { [domProps.value.msg]: text })
+
+      return contentList.map((msg, index) =>
+        h(
+          'div',
+          {
+            key: index,
+            class: messageClass.value
+          },
+          [h('div', { class: textClass.value }, wrapStamp(content(msg)))]
+        )
+      )
     }
 
     return () => {
@@ -85,11 +97,10 @@ export default createComponent({
 
       if (slots.avatar !== void 0) {
         container.push(slots.avatar())
-      }
-      else if (props.avatar !== void 0) {
+      } else if (props.avatar !== void 0) {
         container.push(
           h('img', {
-            class: `q-message-avatar q-message-avatar--${ op.value }`,
+            class: `q-message-avatar q-message-avatar--${op.value}`,
             src: props.avatar,
             'aria-hidden': 'true'
           })
@@ -100,57 +111,51 @@ export default createComponent({
 
       if (slots.name !== void 0) {
         msg.push(
-          h('div', { class: `q-message-name q-message-name--${ op.value }` }, slots.name())
+          h(
+            'div',
+            { class: `q-message-name q-message-name--${op.value}` },
+            slots.name()
+          )
         )
-      }
-      else if (props.name !== void 0) {
+      } else if (props.name !== void 0) {
         msg.push(
           h('div', {
-            class: `q-message-name q-message-name--${ op.value }`,
-            [ domProps.value.name ]: props.name
+            class: `q-message-name q-message-name--${op.value}`,
+            [domProps.value.name]: props.name
           })
         )
       }
 
       if (slots.default !== void 0) {
-        msg.push(
-          getText(
-            getNormalizedVNodes(slots.default()),
-            true
-          )
-        )
-      }
-      else if (props.text !== void 0) {
+        msg.push(getText(getNormalizedVNodes(slots.default()), true))
+      } else if (props.text !== void 0) {
         msg.push(getText(props.text))
       }
 
-      container.push(
-        h('div', { class: sizeClass.value }, msg)
-      )
+      container.push(h('div', { class: sizeClass.value }, msg))
 
       const child = []
 
       if (slots.label !== void 0) {
-        child.push(
-          h('div', { class: 'q-message-label' }, slots.label())
-        )
-      }
-      else if (props.label !== void 0) {
+        child.push(h('div', { class: 'q-message-label' }, slots.label()))
+      } else if (props.label !== void 0) {
         child.push(
           h('div', {
             class: 'q-message-label',
-            [ domProps.value.label ]: props.label
+            [domProps.value.label]: props.label
           })
         )
       }
 
-      child.push(
-        h('div', { class: containerClass.value }, container)
-      )
+      child.push(h('div', { class: containerClass.value }, container))
 
-      return h('div', {
-        class: `q-message q-message-${ op.value }`
-      }, child)
+      return h(
+        'div',
+        {
+          class: `q-message q-message-${op.value}`
+        },
+        child
+      )
     }
   }
 })

package/src/components/chat/QChatMessage.json

@@ -13,7 +13,7 @@
     "label": {
       "type": "String",
       "desc": "Renders a label header/section only",
-      "examples": [ "'Friday, 18th'" ],
+      "examples": ["'Friday, 18th'"],
       "category": "content"
     },
 
@@ -32,7 +32,7 @@
     "name": {
       "type": "String",
       "desc": "Author's name",
-      "examples": [ "'John Doe'" ],
+      "examples": ["'John Doe'"],
       "category": "content"
     },
 
@@ -52,21 +52,24 @@
     "text": {
       "type": "Array",
       "desc": "Array of strings that are the message body. Strings are not sanitized (see details in docs)",
-      "examples": [ "[ 'How are you?' ]", "[ 'I\\'m good, thank you!', 'And you?' ]" ],
+      "examples": [
+        "['How are you?']",
+        "['I\\'m good, thank you!', 'And you?']"
+      ],
       "category": "content"
     },
 
     "stamp": {
       "type": "String",
       "desc": "Creation timestamp",
-      "examples": [ "'13:55'", "'Yesterday at 13:51'" ],
+      "examples": ["'13:55'", "'Yesterday at 13:51'"],
       "category": "content"
     },
 
     "size": {
       "type": "String",
       "desc": "1-12 out of 12 (same as col-*)",
-      "examples": [ "'4'", "'6'", "'12'" ],
+      "examples": ["'4'", "'6'", "'12'"],
       "category": "style"
     },
 

package/src/components/chat/index.js

@@ -1,5 +1,3 @@
 import QChatMessage from './QChatMessage.js'
 
-export {
-  QChatMessage
-}
+export { QChatMessage }

package/src/components/checkbox/QCheckbox.js

@@ -3,28 +3,40 @@ import { h, computed } from 'vue'
 import QIcon from '../icon/QIcon.js'
 
 import { createComponent } from '../../utils/private.create/create.js'
-import useCheckbox, { useCheckboxProps, useCheckboxEmits } from './use-checkbox.js'
+import useCheckbox, {
+  useCheckboxProps,
+  useCheckboxEmits
+} from './use-checkbox.js'
 
-const createBgNode = () => h('div', {
-  key: 'svg',
-  class: 'q-checkbox__bg absolute'
-}, [
-  h('svg', {
-    class: 'q-checkbox__svg fit absolute-full',
-    viewBox: '0 0 24 24'
-  }, [
-    h('path', {
-      class: 'q-checkbox__truthy',
-      fill: 'none',
-      d: 'M1.73,12.91 8.1,19.28 22.79,4.59'
-    }),
+const createBgNode = () =>
+  h(
+    'div',
+    {
+      key: 'svg',
+      class: 'q-checkbox__bg absolute'
+    },
+    [
+      h(
+        'svg',
+        {
+          class: 'q-checkbox__svg fit absolute-full',
+          viewBox: '0 0 24 24'
+        },
+        [
+          h('path', {
+            class: 'q-checkbox__truthy',
+            fill: 'none',
+            d: 'M1.73,12.91 8.1,19.28 22.79,4.59'
+          }),
 
-    h('path', {
-      class: 'q-checkbox__indet',
-      d: 'M4,14H20V10H4'
-    })
-  ])
-])
+          h('path', {
+            class: 'q-checkbox__indet',
+            d: 'M4,14H20V10H4'
+          })
+        ]
+      )
+    ]
+  )
 
 export default createComponent({
   name: 'QCheckbox',
@@ -32,35 +44,38 @@ export default createComponent({
   props: useCheckboxProps,
   emits: useCheckboxEmits,
 
-  setup (props) {
+  setup(props) {
     const bgNode = createBgNode()
 
-    function getInner (isTrue, isIndeterminate) {
-      const icon = computed(() =>
-        (isTrue.value === true
-          ? props.checkedIcon
-          : (isIndeterminate.value === true
+    function getInner(isTrue, isIndeterminate) {
+      const icon = computed(
+        () =>
+          (isTrue.value === true
+            ? props.checkedIcon
+            : isIndeterminate.value === true
               ? props.indeterminateIcon
-              : props.uncheckedIcon
-            )
-        ) || null
+              : props.uncheckedIcon) || null
       )
 
-      return () => (
+      return () =>
         icon.value !== null
           ? [
-              h('div', {
-                key: 'icon',
-                class: 'q-checkbox__icon-container absolute-full flex flex-center no-wrap'
-              }, [
-                h(QIcon, {
-                  class: 'q-checkbox__icon',
-                  name: icon.value
-                })
-              ])
+              h(
+                'div',
+                {
+                  key: 'icon',
+                  class:
+                    'q-checkbox__icon-container absolute-full flex flex-center no-wrap'
+                },
+                [
+                  h(QIcon, {
+                    class: 'q-checkbox__icon',
+                    name: icon.value
+                  })
+                ]
+              )
             ]
-          : [ bgNode ]
-      )
+          : [bgNode]
     }
 
     return useCheckbox('checkbox', getInner)

package/src/components/checkbox/QCheckbox.json

@@ -1,5 +1,5 @@
 {
-  "mixins": [ "components/checkbox/use-checkbox" ],
+  "mixins": ["components/checkbox/use-checkbox"],
 
   "meta": {
     "docsUrl": "https://v2.quasar.dev/vue-components/checkbox"

package/src/components/checkbox/index.js

@@ -1,5 +1,3 @@
 import QCheckbox from './QCheckbox.js'
 
-export {
-  QCheckbox
-}
+export { QCheckbox }