quasar 2.3.2 → 2.4.1

package/src/components/option-group/QOptionGroup.json

@@ -99,9 +99,32 @@
     "label": {
       "desc": "Generic slot for all labels",
       "scope": {
-        "opt": {
+        "...self": {
           "type": "Object",
           "desc": "The corresponding option entry from the 'options' prop",
+          "definition": {
+            "label": {
+              "type": "String",
+              "desc": "Label to display along the component",
+              "required": true,
+              "examples": [ "Option 1", "Option 2", "Option 3" ]
+            },
+            "value": {
+              "type": "Any",
+              "desc": "Value of the option that will be used by the component model",
+              "required": true,
+              "examples": [ "op1", "op2", "op3" ]
+            },
+            "disable": {
+              "type": "Boolean",
+              "desc": "If true, the option will be disabled"
+            },
+            "...props": {
+              "type": "Any",
+              "desc": "Any other props from QToggle, QCheckbox, or QRadio",
+              "examples": [ "val=\"car\"", ":true-value=\"trueValue\"", "checked-icon=\"visibility\"" ]
+            }
+          },
           "__exemption": [ "examples" ]
         }
       },
@@ -111,9 +134,32 @@
     "label-[name]": {
       "desc": "Slot to define the specific label for the option at '[name]' where name is a 0-based index; Overrides the generic 'label' slot if used",
       "scope": {
-        "...opt": {
+        "...self": {
           "type": "Object",
           "desc": "The corresponding option entry from the 'options' prop",
+          "definition": {
+            "label": {
+              "type": "String",
+              "desc": "Label to display along the component",
+              "required": true,
+              "examples": [ "Option 1", "Option 2", "Option 3" ]
+            },
+            "value": {
+              "type": "Any",
+              "desc": "Value of the option that will be used by the component model",
+              "required": true,
+              "examples": [ "op1", "op2", "op3" ]
+            },
+            "disable": {
+              "type": "Boolean",
+              "desc": "If true, the option will be disabled"
+            },
+            "...props": {
+              "type": "Any",
+              "desc": "Any other props from QToggle, QCheckbox, or QRadio",
+              "examples": [ "val=\"car\"", ":true-value=\"trueValue\"", "checked-icon=\"visibility\"" ]
+            }
+          },
           "__exemption": [ "examples" ]
         }
       },

package/src/components/pagination/QPagination.json

@@ -22,7 +22,6 @@
     "max": {
       "type": "Number",
       "desc": "Number of last page (must be higher than 'min')",
-      "default": 100,
       "required": true,
       "examples": [ 10 ],
       "category": "model"

package/src/components/parallax/QParallax.js

@@ -60,8 +60,7 @@ export default createComponent({
 
       if (localScrollTarget === window) {
         containerTop = 0
-        containerHeight = window.innerHeight
-        containerBottom = containerHeight
+        containerBottom = containerHeight = window.innerHeight
       }
       else {
         containerTop = offset(localScrollTarget).top
@@ -103,6 +102,9 @@ export default createComponent({
         localScrollTarget.removeEventListener('scroll', updatePos, passive)
         window.removeEventListener('resize', resizeHandler, passive)
         localScrollTarget = void 0
+        setPos.cancel()
+        update.cancel()
+        resizeHandler.cancel()
       }
     }
 

package/src/components/popup-edit/QPopupEdit.js

@@ -6,6 +6,7 @@ import QBtn from '../btn/QBtn.js'
 import { createComponent } from '../../utils/private/create.js'
 import clone from '../../utils/clone.js'
 import { isDeepEqual } from '../../utils/private/is.js'
+import { injectProp } from '../../utils/private/inject-obj-prop.js'
 
 export default createComponent({
   name: 'QPopupEdit',
@@ -65,11 +66,7 @@ export default createComponent({
         updatePosition
       }
 
-      Object.defineProperty(acc, 'value', {
-        get: () => currentModel.value,
-        set: val => { currentModel.value = val }
-      })
-
+      injectProp(acc, 'value', () => currentModel.value, val => { currentModel.value = val })
       return acc
     })
 

package/src/components/popup-edit/QPopupEdit.json

@@ -173,6 +173,7 @@
           "params": {
             "value": {
               "type": "Any",
+              "required": true,
               "desc": "Value to be checked",
               "examples": [ 0, "Changed text" ]
             }

package/src/components/popup-proxy/QPopupProxy.json

@@ -7,9 +7,10 @@
 
   "props": {
     "model-value": {
+      "extends": "model-value",
       "type": "Boolean",
       "desc": "Defines the state of the component (shown/hidden); Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive",
-      "category": "model"
+      "required": false
     },
 
     "breakpoint": {

package/src/components/radio/QRadio.js

@@ -92,6 +92,7 @@ export default createComponent({
       const prop = { type: 'radio' }
 
       props.name !== void 0 && Object.assign(prop, {
+        '^checked': isTrue.value === true ? 'checked' : void 0,
         name: props.name,
         value: props.val
       })
@@ -99,13 +100,7 @@ export default createComponent({
       return prop
     })
 
-    const formDomProps = computed(() => (
-      props.name !== void 0 && isTrue.value === true
-        ? { checked: true }
-        : {}
-    ))
-
-    const injectFormInput = useFormInject(formAttrs, formDomProps)
+    const injectFormInput = useFormInject(formAttrs)
 
     function onClick (e) {
       if (e !== void 0) {

package/src/components/range/QRange.js

@@ -1,19 +1,14 @@
 import { h, ref, computed, watch, getCurrentInstance } from 'vue'
 
-import { useFormInject, useFormProps } from '../../composables/private/use-form.js'
-
 import useSlider, {
   useSliderProps,
   useSliderEmits,
-  getRatio,
-  getModel,
   keyCodes
 } from '../slider/use-slider.js'
 
 import { createComponent } from '../../utils/private/create.js'
 import { stopAndPrevent } from '../../utils/event.js'
 import { between } from '../../utils/format.js'
-import { hDir } from '../../utils/private/render.js'
 
 const dragType = {
   MIN: 0,
@@ -25,7 +20,6 @@ export default createComponent({
   name: 'QRange',
 
   props: {
-    ...useFormProps,
     ...useSliderProps,
 
     modelValue: {
@@ -39,8 +33,6 @@ export default createComponent({
       }
     },
 
-    name: String,
-
     dragRange: Boolean,
     dragOnlyRange: Boolean,
 
@@ -50,7 +42,10 @@ export default createComponent({
     rightLabelTextColor: String,
 
     leftLabelValue: [ String, Number ],
-    rightLabelValue: [ String, Number ]
+    rightLabelValue: [ String, Number ],
+
+    leftThumbColor: String,
+    rightThumbColor: String
   },
 
   emits: useSliderEmits,
@@ -58,51 +53,46 @@ export default createComponent({
   setup (props, { emit }) {
     const { proxy: { $q } } = getCurrentInstance()
 
-    const formAttrs = computed(() => {
-      return {
+    const { state, methods } = useSlider({
+      updateValue, updatePosition, getDragging,
+      formAttrs: computed(() => ({
         type: 'hidden',
         name: props.name,
         value: `${ props.modelValue.min }|${ props.modelValue.max }`
-      }
+      }))
     })
 
-    const injectFormInput = useFormInject(formAttrs)
-
     const rootRef = ref(null)
-    const model = ref({
-      min: props.modelValue.min === null ? props.min : props.modelValue.min,
-      max: props.modelValue.max === null ? props.max : props.modelValue.max
-    })
-
-    const nextFocus = ref(null)
-
     const curMinRatio = ref(0)
     const curMaxRatio = ref(0)
 
-    const { state, methods } = useSlider({
-      updateValue, updatePosition, getDragging
+    const model = ref({
+      min: props.modelValue.min === null ? state.innerMin.value : props.modelValue.min,
+      max: props.modelValue.max === null ? state.innerMax.value : props.modelValue.max
     })
 
-    const modelMinRatio = computed(() => (
-      state.minMaxDiff.value === 0 ? 0 : (model.value.min - props.min) / state.minMaxDiff.value
-    ))
+    const nextFocus = ref(null)
+
+    const modelMinRatio = computed(() => methods.convertModelToRatio(model.value.min))
+    const modelMaxRatio = computed(() => methods.convertModelToRatio(model.value.max))
 
     const ratioMin = computed(() => (
       state.active.value === true ? curMinRatio.value : modelMinRatio.value
     ))
-
-    const modelMaxRatio = computed(() => (
-      state.minMaxDiff.value === 0 ? 0 : (model.value.max - props.min) / state.minMaxDiff.value
-    ))
-
     const ratioMax = computed(() => (
       state.active.value === true ? curMaxRatio.value : modelMaxRatio.value
     ))
 
-    const trackStyle = computed(() => ({
-      [ state.positionProp.value ]: `${ 100 * ratioMin.value }%`,
-      [ state.sizeProp.value ]: `${ 100 * (ratioMax.value - ratioMin.value) }%`
-    }))
+    const selectionBarStyle = computed(() => {
+      const acc = {
+        [ state.positionProp.value ]: `${ 100 * ratioMin.value }%`,
+        [ state.sizeProp.value ]: `${ 100 * (ratioMax.value - ratioMin.value) }%`
+      }
+      if (props.selectionImg !== void 0) {
+        acc.backgroundImage = `url(${ props.selectionImg }) !important`
+      }
+      return acc
+    })
 
     const events = computed(() => {
       if (state.editable.value !== true) {
@@ -125,128 +115,76 @@ export default createComponent({
       return evt
     })
 
-    const minProps = {
-      domRef: ref(null),
-
-      events: computed(() => (
-        state.editable.value === true && $q.platform.is.mobile !== true && props.dragOnlyRange !== true
-          ? {
-              onFocus: () => { onFocus('min') },
-              onBlur: methods.onBlur,
-              onKeydown,
-              onKeyup: methods.onKeyup
-            }
-          : {}
-      )),
-
-      thumbStyle: computed(() => ({
-        [ state.positionProp.value ]: `${ 100 * ratioMin.value }%`,
-        'z-index': nextFocus.value === 'min' ? 2 : void 0
-      })),
-
-      thumbClass: computed(() => (
-        state.preventFocus.value === false && state.focus.value === 'min'
-          ? ' q-slider--focus'
-          : ''
-      )),
-
-      pinClass: computed(() => {
-        const color = props.leftLabelColor || props.labelColor
-        return color ? ` text-${ color }` : ''
-      }),
-
-      pinTextClass: computed(() => {
-        const color = props.leftLabelTextColor || props.labelTextColor
-        return color ? ` text-${ color }` : ''
-      }),
-
-      pinStyle: computed(() => {
-        const percent = (props.reverse === true ? -ratioMin.value : ratioMin.value - 1)
-        return methods.getPinStyle(percent, ratioMin.value)
+    const minThumbRef = ref(null)
+    const minEvents = computed(() => (
+      state.editable.value === true && $q.platform.is.mobile !== true && props.dragOnlyRange !== true
+        ? {
+            onFocus: () => { onFocus('min') },
+            onBlur: methods.onBlur,
+            onKeydown,
+            onKeyup: methods.onKeyup
+          }
+        : {}
+    ))
+    const getMinThumb = methods.getThumbRenderFn({
+      focusValue: 'min',
+      nextFocus,
+      getNodeData: () => ({
+        ref: minThumbRef,
+        ...minEvents.value,
+        tabindex: props.dragOnlyRange !== true ? state.tabindex.value : null
       }),
-
+      ratio: ratioMin,
       label: computed(() => (
         props.leftLabelValue !== void 0
           ? props.leftLabelValue
           : model.value.min
-      ))
-    }
-
-    const maxProps = {
-      domRef: ref(null),
-
-      events: computed(() => (
-        state.editable.value === true && $q.platform.is.mobile !== true && props.dragOnlyRange !== true
-          ? {
-              onFocus: () => { onFocus('max') },
-              onBlur: methods.onBlur,
-              onKeydown,
-              onKeyup: methods.onKeyup
-            }
-          : {}
-      )),
-
-      thumbStyle: computed(() => ({
-        [ state.positionProp.value ]: `${ 100 * ratioMax.value }%`
-      })),
-
-      thumbClass: computed(() => (
-        state.preventFocus.value === false && state.focus.value === 'max'
-          ? ' q-slider--focus'
-          : ''
       )),
+      thumbColor: computed(() => props.leftThumbColor || props.thumbColor || props.color),
+      labelColor: computed(() => props.leftLabelColor || props.labelColor),
+      labelTextColor: computed(() => props.leftLabelTextColor || props.labelTextColor)
+    })
 
-      pinClass: computed(() => {
-        const color = props.rightLabelColor || props.labelColor
-        return color ? ` text-${ color }` : ''
-      }),
-
-      pinTextClass: computed(() => {
-        const color = props.rightLabelTextColor || props.labelTextColor
-        return color ? ` text-${ color }` : ''
-      }),
-
-      pinStyle: computed(() => {
-        const percent = (props.reverse === true ? -ratioMax.value : ratioMax.value - 1)
-        return methods.getPinStyle(percent, ratioMax.value)
+    const maxEvents = computed(() => (
+      state.editable.value === true && $q.platform.is.mobile !== true && props.dragOnlyRange !== true
+        ? {
+            onFocus: () => { onFocus('max') },
+            onBlur: methods.onBlur,
+            onKeydown,
+            onKeyup: methods.onKeyup
+          }
+        : {}
+    ))
+    const getMaxThumb = methods.getThumbRenderFn({
+      focusValue: 'max',
+      nextFocus,
+      getNodeData: () => ({
+        ...maxEvents.value,
+        tabindex: props.dragOnlyRange !== true ? state.tabindex.value : null
       }),
-
+      ratio: ratioMax,
       label: computed(() => (
         props.rightLabelValue !== void 0
           ? props.rightLabelValue
           : model.value.max
-      ))
-    }
-
-    watch(() => props.modelValue.min, val => {
-      model.value.min = val === null
-        ? props.min
-        : val
+      )),
+      thumbColor: computed(() => props.rightThumbColor || props.thumbColor || props.color),
+      labelColor: computed(() => props.rightLabelColor || props.labelColor),
+      labelTextColor: computed(() => props.rightLabelTextColor || props.labelTextColor)
     })
 
-    watch(() => props.modelValue.max, val => {
-      model.value.max = val === null
-        ? props.max
-        : val
-    })
+    watch(
+      () => props.modelValue.min + props.modelValue.max + state.innerMin.value + state.innerMax.value,
+      () => {
+        model.value.min = props.modelValue.min === null
+          ? state.innerMin.value
+          : between(props.modelValue.min, state.innerMin.value, state.innerMax.value)
 
-    watch(() => props.min, value => {
-      if (model.value.min < value) {
-        model.value.min = value
-      }
-      if (model.value.max < value) {
-        model.value.max = value
+        model.value.max = props.modelValue.max === null
+          ? state.innerMax.value
+          : between(props.modelValue.max, state.innerMin.value, state.innerMax.value)
       }
-    })
-
-    watch(() => props.max, value => {
-      if (model.value.min > value) {
-        model.value.min = value
-      }
-      if (model.value.max > value) {
-        model.value.max = value
-      }
-    })
+    )
 
     function updateValue (change) {
       if (model.value.min !== props.modelValue.min || model.value.max !== props.modelValue.max) {
@@ -261,8 +199,8 @@ export default createComponent({
         sensitivity = props.dragOnlyRange === true
           ? 0
           : (props.vertical === true
-              ? minProps.domRef.value.offsetHeight / (2 * height)
-              : minProps.domRef.value.offsetWidth / (2 * width)
+              ? minThumbRef.value.offsetHeight / (2 * height)
+              : minThumbRef.value.offsetWidth / (2 * width)
             )
 
       const dragging = {
@@ -276,8 +214,8 @@ export default createComponent({
         ratioMax: modelMaxRatio.value
       }
 
-      const ratio = getRatio(event, dragging, state.isReversed.value, props.vertical)
       let type
+      const ratio = methods.getDraggingRatio(event, dragging)
 
       if (props.dragOnlyRange !== true && ratio < dragging.ratioMin + sensitivity) {
         type = dragType.MIN
@@ -287,7 +225,7 @@ export default createComponent({
           type = dragType.RANGE
           Object.assign(dragging, {
             offsetRatio: ratio,
-            offsetModel: getModel(ratio, props.min, props.max, props.step, state.decimals.value),
+            offsetModel: methods.convertRatioToModel(ratio),
             rangeValue: dragging.valueMax - dragging.valueMin,
             rangeRatio: dragging.ratioMax - dragging.ratioMin
           })
@@ -309,10 +247,9 @@ export default createComponent({
     }
 
     function updatePosition (event, dragging = state.dragging.value) {
-      const
-        ratio = getRatio(event, dragging, state.isReversed.value, props.vertical),
-        localModel = getModel(ratio, props.min, props.max, props.step, state.decimals.value)
       let pos
+      const ratio = methods.getDraggingRatio(event, dragging)
+      const localModel = methods.convertRatioToModel(ratio)
 
       switch (dragging.type) {
         case dragType.MIN:
@@ -389,8 +326,8 @@ export default createComponent({
         curMaxRatio.value = pos.maxR
       }
       else {
-        curMinRatio.value = state.minMaxDiff.value === 0 ? 0 : (model.value.min - props.min) / state.minMaxDiff.value
-        curMaxRatio.value = state.minMaxDiff.value === 0 ? 0 : (model.value.max - props.min) / state.minMaxDiff.value
+        curMinRatio.value = state.trackLen.value === 0 ? 0 : (model.value.min - props.min) / state.trackLen.value
+        curMaxRatio.value = state.trackLen.value === 0 ? 0 : (model.value.max - props.min) / state.trackLen.value
       }
     }
 
@@ -416,8 +353,8 @@ export default createComponent({
 
         const min = between(
           parseFloat((model.value.min + offset).toFixed(state.decimals.value)),
-          props.min,
-          props.max - interval
+          state.innerMin.value,
+          state.innerMax.value - interval
         )
 
         model.value = {
@@ -435,8 +372,8 @@ export default createComponent({
           ...model.value,
           [ which ]: between(
             parseFloat((model.value[ which ] + offset).toFixed(state.decimals.value)),
-            which === 'min' ? props.min : model.value.min,
-            which === 'max' ? props.max : model.value.max
+            which === 'min' ? state.innerMin.value : model.value.min,
+            which === 'max' ? state.innerMax.value : model.value.max
           )
         }
       }
@@ -444,72 +381,19 @@ export default createComponent({
       updateValue()
     }
 
-    function getThumb (sideProps) {
-      const child = [
-        methods.getThumbSvg(),
-        h('div', { class: 'q-slider__focus-ring' })
-      ]
-
-      if (props.label === true || props.labelAlways === true) {
-        child.push(
-          h('div', {
-            class: `q-slider__pin q-slider__pin${ state.axis.value } absolute` + sideProps.pinClass.value,
-            style: sideProps.pinStyle.value.pin
-          }, [
-            h('div', {
-              class: `q-slider__pin-text-container q-slider__pin-text-container${ state.axis.value }`,
-              style: sideProps.pinStyle.value.pinTextContainer
-            }, [
-              h('span', {
-                class: 'q-slider__pin-text' + sideProps.pinTextClass.value
-              }, sideProps.label.value)
-            ])
-          ]),
-
-          h('div', {
-            class: `q-slider__arrow q-slider__arrow${ state.axis.value }` + sideProps.pinClass.value
-          })
-        )
-      }
-
-      return h('div', {
-        ref: sideProps.domRef,
-        class: `q-slider__thumb-container q-slider__thumb-container${ state.axis.value } absolute non-selectable` + sideProps.thumbClass.value,
-        style: sideProps.thumbStyle.value,
-        ...sideProps.events.value,
-        tabindex: props.dragOnlyRange !== true ? state.tabindex.value : null
-      }, child)
-    }
-
     return () => {
-      const track = [
-        h('div', {
-          class: `q-slider__track q-slider__track${ state.axis.value } absolute`,
-          style: trackStyle.value
-        })
-      ]
-
-      props.markers !== false && track.push(
-        h('div', {
-          class: `q-slider__track-markers q-slider__track-markers${ state.axis.value } absolute-full fit`,
-          style: state.markerStyle.value
-        })
+      const content = methods.getContent(
+        selectionBarStyle,
+        events,
+        node => {
+          node.push(
+            getMinThumb(),
+            getMaxThumb()
+          )
+        }
       )
 
-      const child = [
-        h('div', {
-          class: `q-slider__track-container q-slider__track-container${ state.axis.value } absolute`
-        }, track),
-
-        getThumb(minProps),
-        getThumb(maxProps)
-      ]
-
-      if (props.name !== void 0 && props.disable !== true) {
-        injectFormInput(child, 'push')
-      }
-
-      const data = {
+      return h('div', {
         ref: rootRef,
         class: 'q-range ' + state.classes.value + (
           props.modelValue.min === null || props.modelValue.max === null
@@ -520,11 +404,8 @@ export default createComponent({
         'aria-valuenow': props.modelValue.min + '|' + props.modelValue.max,
         tabindex: props.dragOnlyRange === true && $q.platform.is.mobile !== true
           ? state.tabindex.value
-          : null,
-        ...events.value
-      }
-
-      return hDir('div', data, child, 'slide', state.editable.value, () => state.panDirective.value)
+          : null
+      }, content)
     }
   }
 })