quasar 2.1.0

package/src/components/slide-item/index.js

@@ -0,0 +1,5 @@
+import QSlideItem from './QSlideItem.js'
+
+export {
+  QSlideItem
+}

package/src/components/slide-transition/QSlideTransition.js

@@ -0,0 +1,113 @@
+import { h, defineComponent, onBeforeUnmount, Transition } from 'vue'
+
+export default defineComponent({
+  name: 'QSlideTransition',
+
+  props: {
+    appear: Boolean,
+    duration: {
+      type: Number,
+      default: 300
+    }
+  },
+
+  emits: [ 'show', 'hide' ],
+
+  setup (props, { slots, emit }) {
+    let animating = false, doneFn, element
+    let timer, timerFallback, animListener, lastEvent
+
+    function cleanup () {
+      doneFn && doneFn()
+      doneFn = null
+      animating = false
+
+      clearTimeout(timer)
+      clearTimeout(timerFallback)
+      element !== void 0 && element.removeEventListener('transitionend', animListener)
+      animListener = null
+    }
+
+    function begin (el, height, done) {
+      el.style.overflowY = 'hidden'
+      if (height !== void 0) {
+        el.style.height = `${ height }px`
+      }
+      el.style.transition = `height ${ props.duration }ms cubic-bezier(.25, .8, .50, 1)`
+
+      animating = true
+      doneFn = done
+    }
+
+    function end (el, event) {
+      el.style.overflowY = null
+      el.style.height = null
+      el.style.transition = null
+      cleanup()
+      event !== lastEvent && emit(event)
+    }
+
+    function onEnter (el, done) {
+      let pos = 0
+      element = el
+
+      if (animating === true) {
+        cleanup()
+        pos = el.offsetHeight === el.scrollHeight ? 0 : void 0
+      }
+      else {
+        lastEvent = 'hide'
+      }
+
+      begin(el, pos, done)
+
+      timer = setTimeout(() => {
+        el.style.height = `${ el.scrollHeight }px`
+        animListener = ev => {
+          if (Object(ev) !== ev || ev.target === el) {
+            end(el, 'show')
+          }
+        }
+        el.addEventListener('transitionend', animListener)
+        timerFallback = setTimeout(animListener, props.duration * 1.1)
+      }, 100)
+    }
+
+    function onLeave (el, done) {
+      let pos
+      element = el
+
+      if (animating === true) {
+        cleanup()
+      }
+      else {
+        lastEvent = 'show'
+        pos = el.scrollHeight
+      }
+
+      begin(el, pos, done)
+
+      timer = setTimeout(() => {
+        el.style.height = 0
+        animListener = ev => {
+          if (Object(ev) !== ev || ev.target === el) {
+            end(el, 'hide')
+          }
+        }
+        el.addEventListener('transitionend', animListener)
+        timerFallback = setTimeout(animListener, props.duration * 1.1)
+      }, 100)
+    }
+
+    onBeforeUnmount(() => {
+      animating === true && cleanup()
+    })
+
+    return () => h(Transition, {
+      css: false,
+      appear: props.appear,
+      onEnter,
+      onLeave
+    }, slots.default)
+  }
+})

package/src/components/slide-transition/QSlideTransition.json

@@ -0,0 +1,37 @@
+{
+  "meta": {
+    "docsUrl": "https://v2.quasar.dev/vue-components/slide-transition"
+  },
+
+  "props": {
+    "appear": {
+      "type": "Boolean",
+      "desc": "If set to true, the transition will be applied on the initial render.",
+      "category": "behavior"
+    },
+
+    "duration": {
+      "type": "Number",
+      "desc": "Duration (in milliseconds) enabling animated scroll.",
+      "default": 300,
+      "examples": [ 500, ":duration=\"500\"" ],
+      "category": "behavior"
+    }
+  },
+
+  "slots": {
+    "default": {
+      "desc": "This is where content goes"
+    }
+  },
+
+  "events": {
+    "show": {
+      "extends": "after-show"
+    },
+
+    "hide": {
+      "extends": "after-hide"
+    }
+  }
+}

package/src/components/slide-transition/index.js

@@ -0,0 +1,5 @@
+import QSlideTransition from './QSlideTransition.js'
+
+export {
+  QSlideTransition
+}

package/src/components/slider/QSlider.js

@@ -0,0 +1,239 @@
+import { h, defineComponent, ref, computed, watch, getCurrentInstance } from 'vue'
+
+import { useFormInject, useFormProps, useFormAttrs } from '../../composables/private/use-form.js'
+
+import useSlider, {
+  useSliderProps,
+  useSliderEmits,
+  getRatio,
+  getModel,
+  keyCodes
+} from './use-slider.js'
+
+import { between } from '../../utils/format.js'
+import { stopAndPrevent } from '../../utils/event.js'
+import { hDir } from '../../utils/private/render.js'
+
+export default defineComponent({
+  name: 'QSlider',
+
+  props: {
+    ...useSliderProps,
+    ...useFormProps,
+
+    modelValue: {
+      required: true,
+      default: null,
+      validator: v => typeof v === 'number' || v === null
+    },
+
+    labelValue: [ String, Number ]
+  },
+
+  emits: useSliderEmits,
+
+  setup (props, { emit }) {
+    const { proxy: { $q } } = getCurrentInstance()
+
+    const formAttrs = useFormAttrs(props)
+    const injectFormInput = useFormInject(formAttrs)
+
+    const rootRef = ref(null)
+    const model = ref(props.modelValue === null ? props.min : props.modelValue)
+    const curRatio = ref(0)
+
+    const { state, methods } = useSlider({
+      updateValue, updatePosition, getDragging
+    })
+
+    const modelRatio = computed(() => (
+      state.minMaxDiff.value === 0 ? 0 : (model.value - props.min) / state.minMaxDiff.value
+    ))
+    const ratio = computed(() => (state.active.value === true ? curRatio.value : modelRatio.value))
+
+    const trackStyle = computed(() => ({
+      [ state.positionProp.value ]: 0,
+      [ state.sizeProp.value ]: `${ 100 * ratio.value }%`
+    }))
+
+    const thumbStyle = computed(() => ({
+      [ state.positionProp.value ]: `${ 100 * ratio.value }%`
+    }))
+
+    const thumbClass = computed(() => (
+      state.preventFocus.value === false && state.focus.value === true
+        ? ' q-slider--focus'
+        : ''
+    ))
+
+    const pinClass = computed(() => (
+      props.labelColor !== void 0
+        ? `text-${ props.labelColor }`
+        : ''
+    ))
+
+    const pinTextClass = computed(() =>
+      'q-slider__pin-value-marker-text'
+      + (props.labelTextColor !== void 0 ? ` text-${ props.labelTextColor }` : '')
+    )
+
+    const events = computed(() => {
+      if (state.editable.value !== true) {
+        return {}
+      }
+
+      return $q.platform.is.mobile === true
+        ? { onClick: methods.onMobileClick }
+        : {
+            onMousedown: methods.onActivate,
+            onFocus,
+            onBlur: methods.onBlur,
+            onKeydown,
+            onKeyup: methods.onKeyup
+          }
+    })
+
+    const label = computed(() => (
+      props.labelValue !== void 0
+        ? props.labelValue
+        : model.value
+    ))
+
+    const pinStyle = computed(() => {
+      const percent = (props.reverse === true ? -ratio.value : ratio.value - 1)
+      return methods.getPinStyle(percent, ratio.value)
+    })
+
+    watch(() => props.modelValue, v => {
+      model.value = v === null
+        ? 0
+        : between(v, props.min, props.max)
+    })
+
+    watch(() => props.min + props.max, () => {
+      model.value = between(model.value, props.min, props.max)
+    })
+
+    function updateValue (change) {
+      if (model.value !== props.modelValue) {
+        emit('update:modelValue', model.value)
+      }
+      change === true && emit('change', model.value)
+    }
+
+    function getDragging () {
+      return rootRef.value.getBoundingClientRect()
+    }
+
+    function updatePosition (event, dragging = state.dragging.value) {
+      const ratio = getRatio(
+        event,
+        dragging,
+        state.isReversed.value,
+        props.vertical
+      )
+
+      model.value = getModel(ratio, props.min, props.max, props.step, state.decimals.value)
+      curRatio.value = props.snap !== true || props.step === 0
+        ? ratio
+        : (
+            state.minMaxDiff.value === 0 ? 0 : (model.value - props.min) / state.minMaxDiff.value
+          )
+    }
+
+    function onFocus () {
+      state.focus.value = true
+    }
+
+    function onKeydown (evt) {
+      if (!keyCodes.includes(evt.keyCode)) {
+        return
+      }
+
+      stopAndPrevent(evt)
+
+      const
+        stepVal = ([ 34, 33 ].includes(evt.keyCode) ? 10 : 1) * state.step.value,
+        offset = [ 34, 37, 40 ].includes(evt.keyCode) ? -stepVal : stepVal
+
+      model.value = between(
+        parseFloat((model.value + offset).toFixed(state.decimals.value)),
+        props.min,
+        props.max
+      )
+
+      updateValue()
+    }
+
+    return () => {
+      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 ` + pinClass.value,
+            style: pinStyle.value.pin
+          }, [
+            h('div', {
+              class: `q-slider__pin-text-container q-slider__pin-text-container${ state.axis.value }`,
+              style: pinStyle.value.pinTextContainer
+            }, [
+              h('span', {
+                class: 'q-slider__pin-text ' + pinTextClass.value
+              }, [
+                label.value
+              ])
+            ])
+          ]),
+
+          h('div', {
+            class: `q-slider__arrow q-slider__arrow${ state.axis.value } ${ pinClass.value }`
+          })
+        )
+      }
+
+      if (props.name !== void 0 && props.disable !== true) {
+        injectFormInput(child, 'push')
+      }
+
+      const track = [
+        h('div', {
+          class: `q-slider__track q-slider__track${ state.axis.value } absolute`,
+          style: trackStyle.value
+        })
+      ]
+
+      props.markers === true && 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 = [
+        h('div', {
+          class: `q-slider__track-container q-slider__track-container${ state.axis.value } absolute`
+        }, track),
+
+        h('div', {
+          class: `q-slider__thumb-container q-slider__thumb-container${ state.axis.value } absolute non-selectable` + thumbClass.value,
+          style: thumbStyle.value
+        }, child)
+      ]
+
+      const data = {
+        ref: rootRef,
+        class: state.classes.value + (props.modelValue === null ? ' q-slider--no-value' : ''),
+        ...state.attributes.value,
+        'aria-valuenow': props.modelValue,
+        tabindex: state.tabindex.value,
+        ...events.value
+      }
+
+      return hDir('div', data, content, 'slide', state.editable.value, () => state.panDirective.value)
+    }
+  }
+})

package/src/components/slider/QSlider.json

@@ -0,0 +1,147 @@
+{
+  "mixins": [ "composables/private/use-form" ],
+
+  "meta": {
+    "docsUrl": "https://v2.quasar.dev/vue-components/slider"
+  },
+
+  "props": {
+    "model-value": {
+      "extends": "model-value",
+      "type": "Number",
+      "desc": "Model of the component (must be between min/max); Either use this property (along with a listener for 'update:modelValue' event) OR use v-model directive",
+      "examples": [ "v-model=\"positionModel\"" ]
+    },
+
+    "min": {
+      "type": "Number",
+      "desc": "Minimum value of the model",
+      "default": 0,
+      "examples": [ ":min=\"0\"" ],
+      "category": "model"
+    },
+
+    "max": {
+      "type": "Number",
+      "desc": "Maximum value of the model",
+      "default": 100,
+      "examples": [ ":max=\"100\"" ],
+      "category": "model"
+    },
+
+    "step": {
+      "type": "Number",
+      "desc": "Specify step amount between valid values (> 0.0); When step equals to 0 it defines infinite granularity",
+      "default": 1,
+      "examples": [ ":step=\"1\"" ],
+      "category": "model"
+    },
+
+    "reverse": {
+      "type": "Boolean",
+      "desc": "Work in reverse (changes direction)",
+      "category": "behavior"
+    },
+
+    "vertical": {
+      "type": "Boolean",
+      "desc": "Display in vertical direction",
+      "category": "behavior"
+    },
+
+    "color": {
+      "extends": "color"
+    },
+
+    "label": {
+      "type": "Boolean",
+      "desc": "Popup a label when user clicks/taps on the slider thumb and moves it",
+      "category": "content"
+    },
+
+    "label-color": {
+      "extends": "color"
+    },
+
+    "label-text-color": {
+      "extends": "color"
+    },
+
+    "label-value": {
+      "type": [ "String", "Number" ],
+      "desc": "Override default label value",
+      "examples": [
+        ":label-value=\"model + 'px'\""
+      ],
+      "category": "content"
+    },
+
+    "label-always": {
+      "type": "Boolean",
+      "desc": "Always display the label",
+      "category": "behavior|content"
+    },
+
+    "markers": {
+      "type": "Boolean",
+      "desc": "Display markers on the track, one for each possible value for the model",
+      "category": "content"
+    },
+
+    "snap": {
+      "type": "Boolean",
+      "desc": "Snap on valid values, rather than sliding freely; Suggestion: use with 'step' prop",
+      "category": "behavior"
+    },
+
+    "thumb-path": {
+      "type": "String",
+      "desc": "Set custom thumb svg path",
+      "default": "M 4, 10 a 6,6 0 1,0 12,0 a 6,6 0 1,0 -12,0",
+      "examples": [ "M5 5 h10 v10 h-10 v-10" ],
+      "category": "style"
+    },
+
+    "dark": {
+      "extends": "dark"
+    },
+
+    "dense": {
+      "extends": "dense"
+    },
+
+    "disable": {
+      "extends": "disable"
+    },
+
+    "readonly": {
+      "extends": "readonly"
+    },
+
+    "tabindex": {
+      "extends": "tabindex"
+    }
+  },
+
+  "events": {
+    "update:model-value": {
+      "extends": "update:model-value"
+    },
+
+    "change": {
+      "extends": "update:model-value",
+      "desc": "Emitted on lazy model value change (after user slides then releases the thumb)"
+    },
+
+    "pan": {
+      "desc": "Triggered when user starts panning on the component",
+      "params": {
+        "phase": {
+          "type": "String",
+          "desc": "Phase of panning",
+          "values": [ "start", "end" ]
+        }
+      }
+    }
+  }
+}