quasar 2.19.3 → 2.20.1

package/src/components/color/QColor.js

@@ -1,4 +1,4 @@
-import { h, ref, computed, watch, nextTick, getCurrentInstance } from 'vue'
+import { computed, getCurrentInstance, h, nextTick, ref, watch } from 'vue'
 
 import TouchPan from '../../directives/touch-pan/TouchPan.js'
 
@@ -25,12 +25,12 @@ import throttle from '../../utils/throttle/throttle.js'
 import { stop } from '../../utils/event/event.js'
 import {
   hexToRgb,
+  hsvToRgb,
+  luminosity,
   rgbToHex,
-  rgbToString,
-  textToRgb,
   rgbToHsv,
-  hsvToRgb,
-  luminosity
+  rgbToString,
+  textToRgb
 } from '../../utils/colors/colors.js'
 import { hDir } from '../../utils/private.render/render.js'
 
@@ -141,6 +141,12 @@ const thumbPath = 'M5 5 h10 v10 h-10 v-10 z'
 const alphaTrackImg =
   'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAICAYAAADED76LAAAAH0lEQVQoU2NkYGAwZkAFZ5G5jPRRgOYEVDeB3EBjBQBOZwTVugIGyAAAAABJRU5ErkJggg=='
 
+const numericRE = /^[0-9]+$/
+const hexRE = /^#[0-9A-Fa-f]+$/
+const rgbRE = /^rgb\([0-9]{1,3},[0-9]{1,3},[0-9]{1,3}\)$/
+const rgbaRE =
+  /^rgba\([0-9]{1,3},[0-9]{1,3},[0-9]{1,3},(0|0\.[0-9]+[1-9]|0\.[1-9]+|1)\)$/
+
 export default createComponent({
   name: 'QColor',
 
@@ -190,15 +196,11 @@ export default createComponent({
     const errorIconRef = ref(null)
 
     const forceHex = computed(() =>
-      props.formatModel === 'auto'
-        ? null
-        : props.formatModel.indexOf('hex') !== -1
+      props.formatModel === 'auto' ? null : props.formatModel.includes('hex')
     )
 
     const forceAlpha = computed(() =>
-      props.formatModel === 'auto'
-        ? null
-        : props.formatModel.indexOf('a') !== -1
+      props.formatModel === 'auto' ? null : props.formatModel.includes('a')
     )
 
     const topView = ref(
@@ -217,9 +219,7 @@ export default createComponent({
     const view = ref(props.defaultView)
     const model = ref(parseModel(props.modelValue || props.defaultValue))
 
-    const editable = computed(
-      () => props.disable !== true && props.readonly !== true
-    )
+    const editable = computed(() => !props.disable && !props.readonly)
 
     const isHex = computed(
       () =>
@@ -236,7 +236,7 @@ export default createComponent({
     const formAttrs = computed(() => ({
       type: 'hidden',
       name: props.name,
-      value: model.value[isOutputHex.value === true ? 'hex' : 'rgb']
+      value: model.value[isOutputHex.value ? 'hex' : 'rgb']
     }))
 
     const injectFormInput = useFormInject(formAttrs)
@@ -267,7 +267,7 @@ export default createComponent({
 
     const spectrumPointerStyle = computed(() => ({
       top: `${100 - model.value.v}%`,
-      [$q.lang.rtl === true ? 'right' : 'left']: `${model.value.s}%`
+      [$q.lang.rtl ? 'right' : 'left']: `${model.value.s}%`
     }))
 
     const computedPalette = computed(() =>
@@ -279,17 +279,15 @@ export default createComponent({
     const classes = computed(
       () =>
         'q-color-picker' +
-        (props.bordered === true ? ' q-color-picker--bordered' : '') +
-        (props.square === true
-          ? ' q-color-picker--square no-border-radius'
-          : '') +
-        (props.flat === true ? ' q-color-picker--flat no-shadow' : '') +
-        (props.disable === true ? ' disabled' : '') +
-        (isDark.value === true ? ' q-color-picker--dark q-dark' : '')
+        (props.bordered ? ' q-color-picker--bordered' : '') +
+        (props.square ? ' q-color-picker--square no-border-radius' : '') +
+        (props.flat ? ' q-color-picker--flat no-shadow' : '') +
+        (props.disable ? ' disabled' : '') +
+        (isDark.value ? ' q-color-picker--dark q-dark' : '')
     )
 
     const attributes = computed(() =>
-      props.disable === true ? { 'aria-disabled': 'true' } : {}
+      props.disable ? { 'aria-disabled': 'true' } : {}
     )
 
     const spectrumDirective = computed(() => [
@@ -332,11 +330,11 @@ export default createComponent({
       model.value.b = rgb.b
       model.value.a = rgb.a
 
-      const value = model.value[isOutputHex.value === true ? 'hex' : 'rgb']
+      const value = model.value[isOutputHex.value ? 'hex' : 'rgb']
 
       // emit new value
       emit('update:modelValue', value)
-      if (change === true) emit('change', value)
+      if (change) emit('change', value)
     }
 
     function parseModel(v) {
@@ -345,12 +343,12 @@ export default createComponent({
           ? forceAlpha.value
           : props.formatModel === 'auto'
             ? null
-            : props.formatModel.indexOf('a') !== -1
+            : props.formatModel.includes('a')
 
       if (
         typeof v !== 'string' ||
         v.length === 0 ||
-        testPattern.anyColor(v.replace(/ /g, '')) !== true
+        !testPattern.anyColor(v.replaceAll(' ', ''))
       ) {
         return {
           h: 0,
@@ -359,7 +357,7 @@ export default createComponent({
           r: 0,
           g: 0,
           b: 0,
-          a: alpha === true ? 100 : void 0,
+          a: alpha ? 100 : void 0,
           hex: void 0,
           rgb: void 0
         }
@@ -367,7 +365,7 @@ export default createComponent({
 
       const localModel = textToRgb(v)
 
-      if (alpha === true && localModel.a === void 0) {
+      if (alpha && localModel.a === void 0) {
         localModel.a = 100
       }
 
@@ -386,10 +384,7 @@ export default createComponent({
         rect = panel.getBoundingClientRect()
 
       let x = Math.min(width, Math.max(0, left - rect.left))
-
-      if ($q.lang.rtl === true) {
-        x = width - x
-      }
+      if ($q.lang.rtl) x = width - x
 
       const y = Math.min(height, Math.max(0, top - rect.top)),
         s = Math.round((100 * x) / width),
@@ -398,7 +393,7 @@ export default createComponent({
           h: model.value.h,
           s,
           v,
-          a: hasAlpha.value === true ? model.value.a : void 0
+          a: hasAlpha.value ? model.value.a : void 0
         })
 
       model.value.s = s
@@ -412,7 +407,7 @@ export default createComponent({
         h: hue,
         s: model.value.s,
         v: model.value.v,
-        a: hasAlpha.value === true ? model.value.a : void 0
+        a: hasAlpha.value ? model.value.a : void 0
       })
 
       model.value.h = hue
@@ -426,15 +421,15 @@ export default createComponent({
     function onNumericChange(value, formatModel, max, evt, change) {
       if (evt !== void 0) stop(evt)
 
-      if (!/^[0-9]+$/.test(value)) {
-        if (change === true) proxy.$forceUpdate()
+      if (!numericRE.test(value)) {
+        if (change) proxy.$forceUpdate()
         return
       }
 
       const val = Math.floor(Number(value))
 
       if (val < 0 || val > max) {
-        if (change === true) proxy.$forceUpdate()
+        if (change) proxy.$forceUpdate()
         return
       }
 
@@ -442,12 +437,7 @@ export default createComponent({
         r: formatModel === 'r' ? val : model.value.r,
         g: formatModel === 'g' ? val : model.value.g,
         b: formatModel === 'b' ? val : model.value.b,
-        a:
-          hasAlpha.value === true
-            ? formatModel === 'a'
-              ? val
-              : model.value.a
-            : void 0
+        a: hasAlpha.value ? (formatModel === 'a' ? val : model.value.a) : void 0
       }
 
       if (formatModel !== 'a') {
@@ -459,7 +449,7 @@ export default createComponent({
 
       updateModel(rgb, change)
 
-      if (change !== true && evt?.target.selectionEnd !== void 0) {
+      if (!change && evt?.target.selectionEnd !== void 0) {
         const index = evt.target.selectionEnd
         nextTick(() => {
           evt.target.setSelectionRange(index, index)
@@ -474,10 +464,7 @@ export default createComponent({
       stop(evt)
 
       if (topView.value === 'hex') {
-        if (
-          inp.length !== (hasAlpha.value === true ? 9 : 7) ||
-          !/^#[0-9A-Fa-f]+$/.test(inp)
-        ) {
+        if (inp.length !== (hasAlpha.value ? 9 : 7) || !hexRE.test(inp)) {
           return true
         }
 
@@ -487,39 +474,31 @@ export default createComponent({
 
         if (!inp.endsWith(')')) {
           return true
-        } else if (hasAlpha.value !== true && inp.startsWith('rgb(')) {
+        } else if (!hasAlpha.value && inp.startsWith('rgb(')) {
           localModel = inp
-            .substring(4, inp.length - 1)
+            .slice(4, -1)
             .split(',')
-            .map(n => parseInt(n, 10))
+            .map(n => Number.parseInt(n, 10))
 
-          if (
-            localModel.length !== 3 ||
-            !/^rgb\([0-9]{1,3},[0-9]{1,3},[0-9]{1,3}\)$/.test(inp)
-          ) {
+          if (localModel.length !== 3 || !rgbRE.test(inp)) {
             return true
           }
-        } else if (hasAlpha.value === true && inp.startsWith('rgba(')) {
-          localModel = inp.substring(5, inp.length - 1).split(',')
-
-          if (
-            localModel.length !== 4 ||
-            !/^rgba\([0-9]{1,3},[0-9]{1,3},[0-9]{1,3},(0|0\.[0-9]+[1-9]|0\.[1-9]+|1)\)$/.test(
-              inp
-            )
-          ) {
+        } else if (hasAlpha.value && inp.startsWith('rgba(')) {
+          localModel = inp.slice(5, -1).split(',')
+
+          if (localModel.length !== 4 || !rgbaRE.test(inp)) {
             return true
           }
 
           for (let i = 0; i < 3; i++) {
-            const v = parseInt(localModel[i], 10)
+            const v = Number.parseInt(localModel[i], 10)
             if (v < 0 || v > 255) {
               return true
             }
             localModel[i] = v
           }
 
-          const v = parseFloat(localModel[3])
+          const v = Number.parseFloat(localModel[3])
           if (v < 0 || v > 1) {
             return true
           }
@@ -535,7 +514,7 @@ export default createComponent({
           localModel[1] > 255 ||
           localModel[2] < 0 ||
           localModel[2] > 255 ||
-          (hasAlpha.value === true && (localModel[3] < 0 || localModel[3] > 1))
+          (hasAlpha.value && (localModel[3] < 0 || localModel[3] > 1))
         ) {
           return true
         }
@@ -544,7 +523,7 @@ export default createComponent({
           r: localModel[0],
           g: localModel[1],
           b: localModel[2],
-          a: hasAlpha.value === true ? localModel[3] * 100 : void 0
+          a: hasAlpha.value ? localModel[3] * 100 : void 0
         }
       }
 
@@ -555,7 +534,7 @@ export default createComponent({
 
       updateModel(rgb, change)
 
-      if (change !== true) {
+      if (!change) {
         const index = evt.target.selectionEnd
         nextTick(() => {
           evt.target.setSelectionRange(index, index)
@@ -620,7 +599,7 @@ export default createComponent({
     function getHeader() {
       const child = []
 
-      if (props.noHeaderTabs !== true) {
+      if (!props.noHeaderTabs) {
         child.push(
           h(
             QTabs,
@@ -633,13 +612,13 @@ export default createComponent({
             },
             () => [
               h(QTab, {
-                label: 'HEX' + (hasAlpha.value === true ? 'A' : ''),
+                label: 'HEX' + (hasAlpha.value ? 'A' : ''),
                 name: 'hex',
                 ripple: false
               }),
 
               h(QTab, {
-                label: 'RGB' + (hasAlpha.value === true ? 'A' : ''),
+                label: 'RGB' + (hasAlpha.value ? 'A' : ''),
                 name: 'rgb',
                 ripple: false
               })
@@ -658,14 +637,14 @@ export default createComponent({
             h('input', {
               class: 'fit',
               value: model.value[topView.value],
-              ...(editable.value !== true ? { readonly: true } : {}),
+              ...(editable.value ? {} : { readonly: true }),
               ...getCache('topIn', {
                 onInput: evt => {
-                  updateErrorIcon(onEditorChange(evt) === true)
+                  updateErrorIcon(onEditorChange(evt))
                 },
                 onChange: stop,
                 onBlur: evt => {
-                  if (onEditorChange(evt, true) === true) proxy.$forceUpdate()
+                  if (onEditorChange(evt, true)) proxy.$forceUpdate()
                   updateErrorIcon(false)
                 }
               })
@@ -787,9 +766,9 @@ export default createComponent({
         ref: spectrumRef,
         class:
           'q-color-picker__spectrum non-selectable relative-position cursor-pointer' +
-          (editable.value !== true ? ' readonly' : ''),
+          (editable.value ? '' : ' readonly'),
         style: spectrumStyle.value,
-        ...(editable.value === true
+        ...(editable.value
           ? {
               onClick: onSpectrumClick,
               onMousedown: onActivate
@@ -824,14 +803,14 @@ export default createComponent({
           trackSize: '8px',
           innerTrackColor: 'transparent',
           selectionColor: 'transparent',
-          readonly: editable.value !== true,
+          readonly: !editable.value,
           thumbPath,
           'onUpdate:modelValue': onHue,
           onChange: onHueChange
         })
       ]
 
-      if (hasAlpha.value === true) {
+      if (hasAlpha.value) {
         sliders.push(
           h(QSlider, {
             class: 'q-color-picker__alpha non-selectable',
@@ -843,7 +822,7 @@ export default createComponent({
             innerTrackColor: 'transparent',
             selectionColor: 'transparent',
             trackImg: alphaTrackImg,
-            readonly: editable.value !== true,
+            readonly: !editable.value,
             hideSelection: true,
             thumbPath,
             ...getCache('alphaSlide', {
@@ -877,7 +856,7 @@ export default createComponent({
             max: 255,
             color: 'red',
             dark: isDark.value,
-            readonly: editable.value !== true,
+            readonly: !editable.value,
             ...getCache('rSlide', {
               'onUpdate:modelValue': value => onNumericChange(value, 'r', 255),
               onChange: value => onNumericChange(value, 'r', 255, void 0, true)
@@ -886,7 +865,7 @@ export default createComponent({
           h('input', {
             value: model.value.r,
             maxlength: 3,
-            readonly: editable.value !== true,
+            readonly: !editable.value,
             onChange: stop,
             ...getCache('rIn', {
               onInput: evt => onNumericChange(evt.target.value, 'r', 255, evt),
@@ -904,7 +883,7 @@ export default createComponent({
             max: 255,
             color: 'green',
             dark: isDark.value,
-            readonly: editable.value !== true,
+            readonly: !editable.value,
             ...getCache('gSlide', {
               'onUpdate:modelValue': value => onNumericChange(value, 'g', 255),
               onChange: value => onNumericChange(value, 'g', 255, void 0, true)
@@ -913,7 +892,7 @@ export default createComponent({
           h('input', {
             value: model.value.g,
             maxlength: 3,
-            readonly: editable.value !== true,
+            readonly: !editable.value,
             onChange: stop,
             ...getCache('gIn', {
               onInput: evt => onNumericChange(evt.target.value, 'g', 255, evt),
@@ -930,7 +909,7 @@ export default createComponent({
             min: 0,
             max: 255,
             color: 'blue',
-            readonly: editable.value !== true,
+            readonly: !editable.value,
             dark: isDark.value,
             ...getCache('bSlide', {
               'onUpdate:modelValue': value => onNumericChange(value, 'b', 255),
@@ -940,7 +919,7 @@ export default createComponent({
           h('input', {
             value: model.value.b,
             maxlength: 3,
-            readonly: editable.value !== true,
+            readonly: !editable.value,
             onChange: stop,
             ...getCache('bIn', {
               onInput: evt => onNumericChange(evt.target.value, 'b', 255, evt),
@@ -950,13 +929,13 @@ export default createComponent({
           })
         ]),
 
-        hasAlpha.value === true
+        hasAlpha.value
           ? h('div', { class: 'row items-center no-wrap' }, [
               h('div', 'A'),
               h(QSlider, {
                 modelValue: model.value.a,
                 color: 'grey',
-                readonly: editable.value !== true,
+                readonly: !editable.value,
                 dark: isDark.value,
                 ...getCache('aSlide', {
                   'onUpdate:modelValue': value =>
@@ -968,7 +947,7 @@ export default createComponent({
               h('input', {
                 value: model.value.a,
                 maxlength: 3,
-                readonly: editable.value !== true,
+                readonly: !editable.value,
                 onChange: stop,
                 ...getCache('aIn', {
                   onInput: evt =>
@@ -987,7 +966,7 @@ export default createComponent({
         h('div', {
           class: 'q-color-picker__cube col-auto',
           style: { backgroundColor: color },
-          ...(editable.value === true
+          ...(editable.value
             ? getCache('palette#' + color, {
                 onClick: () => {
                   onPalettePick(color)
@@ -1002,9 +981,7 @@ export default createComponent({
           {
             class:
               'row items-center q-color-picker__palette-rows' +
-              (editable.value === true
-                ? ' q-color-picker__palette-rows--editable'
-                : '')
+              (editable.value ? ' q-color-picker__palette-rows--editable' : '')
           },
           computedPalette.value.map(fn)
         )
@@ -1014,12 +991,12 @@ export default createComponent({
     return () => {
       const child = [getContent()]
 
-      if (props.name !== void 0 && props.disable !== true) {
+      if (props.name !== void 0 && !props.disable) {
         injectFormInput(child, 'push')
       }
 
-      if (props.noHeader !== true) child.unshift(getHeader())
-      if (props.noFooter !== true) child.push(getFooter())
+      if (!props.noHeader) child.unshift(getHeader())
+      if (!props.noFooter) child.push(getFooter())
 
       return h(
         'div',