quasar 2.1.0

package/src/components/item/QItemLabel.js

@@ -0,0 +1,42 @@
+import { h, defineComponent, computed } from 'vue'
+
+import { hSlot } from '../../utils/private/render.js'
+
+export default defineComponent({
+  name: 'QItemLabel',
+
+  props: {
+    overline: Boolean,
+    caption: Boolean,
+    header: Boolean,
+    lines: [ Number, String ]
+  },
+
+  setup (props, { slots }) {
+    const parsedLines = computed(() => parseInt(props.lines, 10))
+
+    const classes = computed(() =>
+      'q-item__label'
+      + (props.overline === true ? ' q-item__label--overline text-overline' : '')
+      + (props.caption === true ? ' q-item__label--caption text-caption' : '')
+      + (props.header === true ? ' q-item__label--header' : '')
+      + (parsedLines.value === 1 ? ' ellipsis' : '')
+    )
+
+    const style = computed(() => {
+      return props.lines !== void 0 && parsedLines.value > 1
+        ? {
+            overflow: 'hidden',
+            display: '-webkit-box',
+            '-webkit-box-orient': 'vertical',
+            '-webkit-line-clamp': parsedLines.value
+          }
+        : null
+    })
+
+    return () => h('div', {
+      style: style.value,
+      class: classes.value
+    }, hSlot(slots.default))
+  }
+})

package/src/components/item/QItemLabel.json

@@ -0,0 +1,38 @@
+{
+  "meta": {
+    "docsUrl": "https://v2.quasar.dev/vue-components/list-and-list-items"
+  },
+
+  "props": {
+    "overline": {
+      "type": "Boolean",
+      "desc": "Renders an overline label",
+      "category": "content"
+    },
+
+    "caption": {
+      "type": "Boolean",
+      "desc": "Renders a caption label",
+      "category": "content"
+    },
+
+    "header": {
+      "type": "Boolean",
+      "desc": "Renders a header label",
+      "category": "content"
+    },
+
+    "lines": {
+      "type": [ "Number", "String" ],
+      "desc": "Apply ellipsis when there's not enough space to render on the specified number of lines;",
+      "examples": [ "1", "3", ":lines=\"2\"" ],
+      "category": "content|behavior"
+    }
+  },
+
+  "slots": {
+    "default": {
+      "desc": "The content of the label; Suggestion: text"
+    }
+  }
+}

package/src/components/item/QItemSection.js

@@ -0,0 +1,28 @@
+import { h, defineComponent, computed } from 'vue'
+
+import { hSlot } from '../../utils/private/render.js'
+
+export default defineComponent({
+  name: 'QItemSection',
+
+  props: {
+    avatar: Boolean,
+    thumbnail: Boolean,
+    side: Boolean,
+    top: Boolean,
+    noWrap: Boolean
+  },
+
+  setup (props, { slots }) {
+    const classes = computed(() =>
+      'q-item__section column'
+      + ` q-item__section--${ props.avatar === true || props.side === true || props.thumbnail === true ? 'side' : 'main' }`
+      + (props.top === true ? ' q-item__section--top justify-start' : ' justify-center')
+      + (props.avatar === true ? ' q-item__section--avatar' : '')
+      + (props.thumbnail === true ? ' q-item__section--thumbnail' : '')
+      + (props.noWrap === true ? ' q-item__section--nowrap' : '')
+    )
+
+    return () => h('div', { class: classes.value }, hSlot(slots.default))
+  }
+})

package/src/components/item/QItemSection.json

@@ -0,0 +1,43 @@
+{
+  "meta": {
+    "docsUrl": "https://v2.quasar.dev/vue-components/list-and-list-items"
+  },
+
+  "props": {
+    "avatar": {
+      "type": "Boolean",
+      "desc": "Render an avatar item side (does not needs 'side' prop to be set)",
+      "category": "content"
+    },
+
+    "thumbnail": {
+      "type": "Boolean",
+      "desc": "Render a thumbnail item side (does not needs 'side' prop to be set)",
+      "category": "content"
+    },
+
+    "side": {
+      "type": "Boolean",
+      "desc": "Renders as a side of the item",
+      "category": "content"
+    },
+
+    "top": {
+      "type": "Boolean",
+      "desc": "Align content to top (useful for multi-line items)",
+      "category": "content"
+    },
+
+    "no-wrap": {
+      "type": "Boolean",
+      "desc": "Do not wrap text (useful for item's main content)",
+      "category": "content"
+    }
+  },
+
+  "slots": {
+    "default": {
+      "desc": "Section's actual content"
+    }
+  }
+}

package/src/components/item/QList.js

@@ -0,0 +1,34 @@
+import { h, defineComponent, computed, getCurrentInstance } from 'vue'
+
+import useDark, { useDarkProps } from '../../composables/private/use-dark.js'
+
+import { hSlot } from '../../utils/private/render.js'
+
+export default defineComponent({
+  name: 'QList',
+
+  props: {
+    ...useDarkProps,
+
+    bordered: Boolean,
+    dense: Boolean,
+    separator: Boolean,
+    padding: Boolean
+  },
+
+  setup (props, { slots }) {
+    const vm = getCurrentInstance()
+    const isDark = useDark(props, vm.proxy.$q)
+
+    const classes = computed(() =>
+      'q-list'
+      + (props.bordered === true ? ' q-list--bordered' : '')
+      + (props.dense === true ? ' q-list--dense' : '')
+      + (props.separator === true ? ' q-list--separator' : '')
+      + (isDark.value === true ? ' q-list--dark' : '')
+      + (props.padding === true ? ' q-list--padding' : '')
+    )
+
+    return () => h('div', { class: classes.value }, hSlot(slots.default))
+  }
+})

package/src/components/item/QList.json

@@ -0,0 +1,37 @@
+{
+  "meta": {
+    "docsUrl": "https://v2.quasar.dev/vue-components/list-and-list-items"
+  },
+
+  "props": {
+    "bordered": {
+      "extends": "bordered"
+    },
+
+    "dense": {
+      "extends": "dense"
+    },
+
+    "separator": {
+      "type": "Boolean",
+      "desc": "Applies a separator between contained items",
+      "category": "content"
+    },
+
+    "dark": {
+      "extends": "dark"
+    },
+
+    "padding": {
+      "type": "Boolean",
+      "desc": "Applies a material design-like padding on top and bottom",
+      "category": "content"
+    }
+  },
+
+  "slots": {
+    "default": {
+      "desc": "This is where the content goes; Suggestion: QItem, QExpansionItem, ..."
+    }
+  }
+}

package/src/components/item/index.js

@@ -0,0 +1,13 @@
+import QList from './QList.js'
+
+import QItem from './QItem.js'
+import QItemSection from './QItemSection.js'
+import QItemLabel from './QItemLabel.js'
+
+export {
+  QList,
+
+  QItem,
+  QItemSection,
+  QItemLabel
+}

package/src/components/knob/QKnob.js

@@ -0,0 +1,278 @@
+import { h, defineComponent, ref, computed, watch, onMounted, withDirectives, getCurrentInstance } from 'vue'
+
+import QCircularProgress from '../circular-progress/QCircularProgress.js'
+import TouchPan from '../../directives/TouchPan.js'
+
+import { position, stopAndPrevent } from '../../utils/event.js'
+import { between, normalizeToInterval } from '../../utils/format.js'
+
+import { useFormProps, useFormAttrs } from '../../composables/private/use-form.js'
+import { useCircularCommonProps } from '../circular-progress/use-circular-progress.js'
+
+// PGDOWN, LEFT, DOWN, PGUP, RIGHT, UP
+const keyCodes = [ 34, 37, 40, 33, 39, 38 ]
+const commonPropsName = Object.keys(useCircularCommonProps)
+
+export default defineComponent({
+  name: 'QKnob',
+
+  props: {
+    ...useFormProps,
+    ...useCircularCommonProps,
+
+    modelValue: {
+      type: Number,
+      required: true
+    },
+
+    step: {
+      type: Number,
+      default: 1,
+      validator: v => v >= 0
+    },
+
+    tabindex: {
+      type: [ Number, String ],
+      default: 0
+    },
+
+    disable: Boolean,
+    readonly: Boolean
+  },
+
+  emits: [ 'update:modelValue', 'change', 'drag-value' ],
+
+  setup (props, { slots, emit }) {
+    const { proxy } = getCurrentInstance()
+    const { $q } = proxy
+
+    const model = ref(props.modelValue)
+    const dragging = ref(false)
+
+    let centerPosition, $el
+
+    watch(() => props.modelValue, val => {
+      if (val < props.min) {
+        model.value = props.min
+      }
+      else if (val > props.max) {
+        model.value = props.max
+      }
+      else {
+        if (val !== model.value) {
+          model.value = val
+        }
+        return
+      }
+
+      if (model.value !== props.modelValue) {
+        emit('update:modelValue', model.value)
+        emit('change', model.value)
+      }
+    })
+
+    const editable = computed(() => props.disable === false && props.readonly === false)
+
+    const classes = computed(() =>
+      'q-knob non-selectable' + (
+        editable.value === true
+          ? ' q-knob--editable'
+          : (props.disable === true ? ' disabled' : '')
+      )
+    )
+
+    const decimals = computed(() => (String(props.step).trim('0').split('.')[ 1 ] || '').length)
+    const step = computed(() => (props.step === 0 ? 1 : props.step))
+    const instantFeedback = computed(() => props.instantFeedback === true || dragging.value === true)
+
+    const onEvents = $q.platform.is.mobile === true
+      ? computed(() => (editable.value === true ? { onClick } : {}))
+      : computed(() => (
+        editable.value === true
+          ? {
+              onMousedown,
+              onClick,
+              onKeydown,
+              onKeyup
+            }
+          : {}
+      ))
+
+    const attrs = computed(() => (
+      editable.value === true
+        ? { tabindex: props.tabindex }
+        : { [ `aria-${ props.disable === true ? 'disabled' : 'readonly' }` ]: 'true' }
+    ))
+
+    const circularProps = computed(() => {
+      const agg = {}
+      commonPropsName.forEach(name => {
+        agg[ name ] = props[ name ]
+      })
+      return agg
+    })
+
+    function pan (event) {
+      if (event.isFinal) {
+        updatePosition(event.evt, true)
+        dragging.value = false
+      }
+      else if (event.isFirst) {
+        updateCenterPosition()
+        dragging.value = true
+        updatePosition(event.evt)
+      }
+      else {
+        updatePosition(event.evt)
+      }
+    }
+
+    const directives = computed(() => {
+      return [ [
+        TouchPan,
+        pan,
+        void 0,
+        { prevent: true, stop: true, mouse: true }
+      ] ]
+    })
+
+    function updateCenterPosition () {
+      const { top, left, width, height } = $el.getBoundingClientRect()
+      centerPosition = {
+        top: top + height / 2,
+        left: left + width / 2
+      }
+    }
+
+    function onMousedown (evt) {
+      updateCenterPosition()
+      updatePosition(evt)
+    }
+
+    function onClick (evt) {
+      updateCenterPosition()
+      updatePosition(evt, true)
+    }
+
+    function onKeydown (evt) {
+      if (!keyCodes.includes(evt.keyCode)) {
+        return
+      }
+
+      stopAndPrevent(evt)
+
+      const
+        stepVal = ([ 34, 33 ].includes(evt.keyCode) ? 10 : 1) * step.value,
+        offset = [ 34, 37, 40 ].includes(evt.keyCode) ? -stepVal : stepVal
+
+      model.value = between(
+        parseFloat((model.value + offset).toFixed(decimals.value)),
+        props.min,
+        props.max
+      )
+
+      updateValue()
+    }
+
+    function updatePosition (evt, change) {
+      const
+        pos = position(evt),
+        height = Math.abs(pos.top - centerPosition.top),
+        distance = Math.sqrt(
+          height ** 2
+          + Math.abs(pos.left - centerPosition.left) ** 2
+        )
+
+      let angle = Math.asin(height / distance) * (180 / Math.PI)
+
+      if (pos.top < centerPosition.top) {
+        angle = centerPosition.left < pos.left ? 90 - angle : 270 + angle
+      }
+      else {
+        angle = centerPosition.left < pos.left ? angle + 90 : 270 - angle
+      }
+
+      if (props.angle) {
+        angle = normalizeToInterval(angle - props.angle, 0, 360)
+      }
+
+      if ($q.lang.rtl === true) {
+        angle = 360 - angle
+      }
+
+      let newModel = props.min + (angle / 360) * (props.max - props.min)
+
+      if (step.value !== 0) {
+        const modulo = newModel % step.value
+
+        newModel = newModel - modulo
+          + (Math.abs(modulo) >= step.value / 2 ? (modulo < 0 ? -1 : 1) * step.value : 0)
+
+        newModel = parseFloat(newModel.toFixed(decimals.value))
+      }
+
+      newModel = between(newModel, props.min, props.max)
+
+      emit('drag-value', newModel)
+
+      if (model.value !== newModel) {
+        model.value = newModel
+      }
+
+      updateValue(change)
+    }
+
+    function onKeyup (evt) {
+      if (keyCodes.includes(evt.keyCode)) {
+        updateValue(true)
+      }
+    }
+
+    function updateValue (change) {
+      props.modelValue !== model.value && emit('update:modelValue', model.value)
+      change === true && emit('change', model.value)
+    }
+
+    const formAttrs = useFormAttrs(props)
+
+    function getNameInput () {
+      return h('input', formAttrs.value)
+    }
+
+    onMounted(() => {
+      $el = proxy.$el
+    })
+
+    return () => {
+      const data = {
+        class: classes.value,
+        role: 'slider',
+        'aria-valuemin': props.min,
+        'aria-valuemax': props.max,
+        'aria-valuenow': props.modelValue,
+        ...attrs.value,
+        ...circularProps.value,
+        value: model.value,
+        instantFeedback: instantFeedback.value,
+        ...onEvents.value
+      }
+
+      const child = {
+        default: slots.default
+      }
+
+      if (editable.value === true) {
+        if (props.name !== void 0) {
+          child.internal = getNameInput
+        }
+
+        return withDirectives(
+          h(QCircularProgress, data, child),
+          directives.value
+        )
+      }
+
+      return h(QCircularProgress, data, child)
+    }
+  }
+})