quasar 2.1.0

package/src/components/stepper/QStepper.json

@@ -0,0 +1,108 @@
+{
+  "mixins": [ "composables/private/use-panel" ],
+
+  "meta": {
+    "docsUrl": "https://v2.quasar.dev/vue-components/stepper"
+  },
+
+  "props": {
+    "dark": {
+      "extends": "dark"
+    },
+
+    "flat": {
+      "extends": "flat"
+    },
+
+    "bordered": {
+      "extends": "bordered"
+    },
+
+    "vertical": {
+      "type": "Boolean",
+      "desc": "Put Stepper in vertical mode (instead of horizontal by default)",
+      "category": "behavior"
+    },
+
+    "alternative-labels": {
+      "type": "Boolean",
+      "desc": "Use alternative labels - stacks the icon on top of the label (applies only to horizontal stepper)",
+      "category": "header"
+    },
+
+    "header-nav": {
+      "type": "Boolean",
+      "desc": "Allow navigation through the header",
+      "category": "behavior"
+    },
+
+    "contracted": {
+      "type": "Boolean",
+      "desc": "Hide header labels on narrow windows",
+      "category": "header|behavior"
+    },
+
+    "inactive-icon": {
+      "extends": "icon",
+      "category": "header"
+    },
+
+    "inactive-color": {
+      "extends": "color",
+      "category": "header"
+    },
+
+    "done-icon": {
+      "extends": "icon",
+      "category": "header"
+    },
+
+    "done-color": {
+      "extends": "color",
+      "category": "header"
+    },
+
+    "active-icon": {
+      "extends": "icon",
+      "category": "header"
+    },
+
+    "active-color": {
+      "extends": "color",
+      "category": "header"
+    },
+
+    "error-icon": {
+      "extends": "icon",
+      "category": "header"
+    },
+
+    "error-color": {
+      "extends": "color",
+      "category": "header"
+    },
+
+    "header-class": {
+      "type": "String",
+      "desc": "Class definitions to be attributed to the header",
+      "examples": [
+        "my-special-class"
+      ],
+      "category": "style"
+    }
+  },
+
+  "slots": {
+    "default": {
+      "desc": "Suggestion: QStep"
+    },
+
+    "navigation": {
+      "desc": "Slot specific for the global navigation; Suggestion: QStepperNavigation"
+    },
+
+    "message": {
+      "desc": "Slot specific for putting a message on top of each step (if horizontal stepper) or above steps (if vertical); Suggestion: QBanner, div.q-pa-lg"
+    }
+  }
+}

package/src/components/stepper/QStepper.sass

@@ -0,0 +1,210 @@
+.q-stepper
+  box-shadow: $shadow-2
+  border-radius: $generic-border-radius
+  background: #fff
+
+  &__title
+    font-size: 14px
+    line-height: 18px
+    letter-spacing: .1px
+
+  &__caption
+    font-size: 12px
+    line-height: 14px
+
+  &__dot
+    margin-right: 8px
+    font-size: 14px
+    width: 24px
+    min-width: 24px
+    height: 24px
+    border-radius: 50%
+    background: currentColor
+    span
+      color: #fff
+
+  &__tab
+    padding: 8px 24px
+    font-size: 14px
+    color: $grey
+    flex-direction: row
+
+  &--dark
+    .q-stepper__dot span
+      color: #000
+
+  &__tab
+    &--navigation
+      user-select: none
+      cursor: pointer
+
+    &--active, &--done
+      color: var(--q-primary)
+      .q-stepper__dot, .q-stepper__label
+        text-shadow: 0 0 0 currentColor
+    &--disabled
+      .q-stepper__dot
+        background: rgba(0,0,0,.22)
+      .q-stepper__label
+        color: rgba(0,0,0,.32)
+    &--error
+      color: var(--q-negative)
+
+      .q-stepper__dot
+        background: transparent !important
+        span
+          color: currentColor
+          font-size: 24px
+
+  &__header
+    border-top-left-radius: inherit
+    border-top-right-radius: inherit
+
+    &--border
+      border-bottom: 1px solid $separator-color
+    &--standard-labels
+      .q-stepper__tab
+        min-height: 72px
+        justify-content: center
+        &:first-child
+          justify-content: flex-start
+        &:last-child
+          justify-content: flex-end
+        &:only-child
+          justify-content: center
+      .q-stepper__dot:after
+        display: none
+    &--alternative-labels
+      .q-stepper__tab
+        min-height: 104px
+        padding: 24px 32px
+        flex-direction: column
+        justify-content: flex-start
+      .q-stepper__dot
+        margin-right: 0
+      .q-stepper__label
+        margin-top: 8px
+        text-align: center
+        &:before, &:after
+          display: none
+
+  &__nav
+    padding-top: 24px
+
+  &--bordered
+    border: 1px solid $separator-color
+
+  &--horizontal
+    .q-stepper__step-inner
+      padding: 24px
+
+    .q-stepper__tab:first-child
+      border-top-left-radius: inherit
+    .q-stepper__tab:last-child
+      border-top-right-radius: inherit
+    .q-stepper__tab:first-child .q-stepper__dot:before,
+    .q-stepper__tab:last-child .q-stepper__label:after,
+    .q-stepper__tab:last-child .q-stepper__dot:after
+      display: none
+    .q-stepper__tab
+      overflow: hidden
+    .q-stepper__line
+      &:before, &:after
+        position: absolute
+        top: 50%
+        height: 1px
+        width: 100vw
+        background: $separator-color
+    .q-stepper__label:after, .q-stepper__dot:after
+      content: ''
+      left: 100%
+      margin-left: 8px
+    .q-stepper__dot:before
+      content: ''
+      right: 100%
+      margin-right: 8px
+
+    > .q-stepper__nav
+      padding: 0 24px 24px
+
+  &--vertical
+    padding: 16px 0
+
+    .q-stepper__tab
+      padding: 12px 24px
+    .q-stepper__title
+      line-height: 18px
+    .q-stepper__step-inner
+      padding: 0 24px 32px 60px
+    > .q-stepper__nav
+      padding: 24px 24px 0
+
+    .q-stepper__step
+      overflow: hidden
+    .q-stepper__dot
+      margin-right: 12px
+      &:before, &:after
+        content: ''
+        position: absolute
+        left: 50%
+        width: 1px
+        height: 99999px
+        background: $separator-color
+    .q-stepper__dot:before
+      bottom: 100%
+      margin-bottom: 8px
+    .q-stepper__dot:after
+      top: 100%
+      margin-top: 8px
+    .q-stepper__step:first-child .q-stepper__dot:before,
+    .q-stepper__step:last-child .q-stepper__dot:after
+      display: none
+    .q-stepper__step:last-child .q-stepper__step-inner
+      padding-bottom: 8px
+
+  &--dark
+
+    &.q-stepper--bordered,
+    .q-stepper__header--border
+      border-color: $separator-dark-color
+    &.q-stepper--horizontal
+      .q-stepper__line
+        &:before, &:after
+          background: $separator-dark-color
+    &.q-stepper--vertical
+      .q-stepper__dot
+        &:before, &:after
+          background: $separator-dark-color
+    .q-stepper__tab
+      &--disabled
+        color: $separator-dark-color
+        .q-stepper__dot
+          background: $separator-dark-color
+        .q-stepper__label
+          color: rgba(255,255,255,.54)
+
+  &--contracted
+    .q-stepper__header
+      min-height: 72px
+      &--alternative-labels
+        .q-stepper__tab
+          min-height: 72px
+          &:first-child
+            align-items: flex-start
+          &:last-child
+            align-items: flex-end
+      .q-stepper__tab
+        padding: 24px 0
+        &:first-child
+          .q-stepper__dot
+            transform: translateX(24px)
+        &:last-child
+          .q-stepper__dot
+            transform: translateX(-24px)
+    .q-stepper__tab:not(:last-child)
+      .q-stepper__dot:after
+        display: block !important
+    .q-stepper__dot
+      margin: 0
+    .q-stepper__label
+      display: none

package/src/components/stepper/QStepperNavigation.js

@@ -0,0 +1,11 @@
+import { h, defineComponent } from 'vue'
+
+import { hSlot } from '../../utils/private/render.js'
+
+export default defineComponent({
+  name: 'QStepperNavigation',
+
+  setup (_, { slots }) {
+    return () => h('div', { class: 'q-stepper__nav' }, hSlot(slots.default))
+  }
+})

package/src/components/stepper/QStepperNavigation.json

@@ -0,0 +1,11 @@
+{
+  "meta": {
+    "docsUrl": "https://v2.quasar.dev/vue-components/stepper"
+  },
+
+  "slots": {
+    "default": {
+      "desc": "The content of the custom navigation, child of a QStep or of a QStepper (globally, through 'navigation' slot)"
+    }
+  }
+}

package/src/components/stepper/StepHeader.js

@@ -0,0 +1,165 @@
+import { h, defineComponent, ref, computed, getCurrentInstance } from 'vue'
+
+import QIcon from '../icon/QIcon.js'
+import Ripple from '../../directives/Ripple.js'
+
+import { hDir } from '../../utils/private/render.js'
+
+export default defineComponent({
+  name: 'StepHeader',
+
+  props: {
+    stepper: {},
+    step: {},
+    goToPanel: Function
+  },
+
+  setup (props, { attrs }) {
+    const { proxy: { $q } } = getCurrentInstance()
+    const blurRef = ref(null)
+
+    const isActive = computed(() => props.stepper.modelValue === props.step.name)
+
+    const isDisable = computed(() => {
+      const opt = props.step.disable
+      return opt === true || opt === ''
+    })
+
+    const isError = computed(() => {
+      const opt = props.step.error
+      return opt === true || opt === ''
+    })
+
+    const isDone = computed(() => {
+      const opt = props.step.done
+      return isDisable.value === false && (opt === true || opt === '')
+    })
+
+    const headerNav = computed(() => {
+      const
+        opt = props.step.headerNav,
+        nav = opt === true || opt === '' || opt === void 0
+
+      return isDisable.value === false
+        && props.stepper.headerNav
+        && nav
+    })
+
+    const hasPrefix = computed(() => {
+      return props.step.prefix
+        && isActive.value === false
+        && isError.value === false
+        && isDone.value === false
+    })
+
+    const icon = computed(() => {
+      if (isActive.value === true) {
+        return props.step.activeIcon || props.stepper.activeIcon || $q.iconSet.stepper.active
+      }
+      if (isError.value === true) {
+        return props.step.errorIcon || props.stepper.errorIcon || $q.iconSet.stepper.error
+      }
+      if (isDisable.value === false && isDone.value === true) {
+        return props.step.doneIcon || props.stepper.doneIcon || $q.iconSet.stepper.done
+      }
+
+      return props.step.icon || props.stepper.inactiveIcon
+    })
+
+    const color = computed(() => {
+      const errorColor = isError.value === true
+        ? props.step.errorColor || props.stepper.errorColor
+        : void 0
+
+      if (isActive.value === true) {
+        const color = props.step.activeColor || props.stepper.activeColor || props.step.color
+        return color !== void 0
+          ? color
+          : errorColor
+      }
+      if (errorColor !== void 0) {
+        return errorColor
+      }
+      if (isDisable.value === false && isDone.value === true) {
+        return props.step.doneColor || props.stepper.doneColor || props.step.color || props.stepper.inactiveColor
+      }
+
+      return props.step.color || props.stepper.inactiveColor
+    })
+
+    const classes = computed(() => {
+      return 'q-stepper__tab col-grow flex items-center no-wrap relative-position'
+        + (color.value !== void 0 ? ` text-${ color.value }` : '')
+        + (isError.value === true ? ' q-stepper__tab--error' : '')
+        + (isActive.value === true ? ' q-stepper__tab--active' : '')
+        + (isDone.value === true ? ' q-stepper__tab--done' : '')
+        + (headerNav.value === true ? ' q-stepper__tab--navigation q-focusable q-hoverable' : '')
+        + (isDisable.value === true ? ' q-stepper__tab--disabled' : '')
+    })
+
+    function onActivate () {
+      blurRef.value !== null && blurRef.value.focus()
+      isActive.value === false && props.goToPanel(props.step.name)
+    }
+
+    function onKeyup (e) {
+      if (e.keyCode === 13 && isActive.value === false) {
+        props.goToPanel(props.step.name)
+      }
+    }
+
+    return () => {
+      const data = { class: classes.value }
+
+      if (headerNav.value === true) {
+        data.onClick = onActivate
+        data.onKeyup = onKeyup
+
+        Object.assign(data,
+          isDisable.value === true
+            ? { tabindex: -1, 'aria-disabled': 'true' }
+            : { tabindex: attrs.tabindex || 0 }
+        )
+      }
+
+      const child = [
+        h('div', { class: 'q-focus-helper', tabindex: -1, ref: blurRef }),
+
+        h('div', { class: 'q-stepper__dot row flex-center q-stepper__line relative-position' }, [
+          h('span', { class: 'row flex-center' }, [
+            hasPrefix.value === true
+              ? props.step.prefix
+              : h(QIcon, { name: icon.value })
+          ])
+        ])
+      ]
+
+      if (props.step.title !== void 0 && props.step.title !== null) {
+        const content = [
+          h('div', { class: 'q-stepper__title' }, props.step.title)
+        ]
+
+        if (props.step.caption !== void 0 && props.step.caption !== null) {
+          content.push(
+            h('div', { class: 'q-stepper__caption' }, props.step.caption)
+          )
+        }
+
+        child.push(
+          h('div', {
+            class: 'q-stepper__label q-stepper__line relative-position'
+          }, content)
+        )
+      }
+
+      return hDir(
+        'div',
+        data,
+        child,
+        'head',
+        props.stepper.headerNav === true && headerNav.value !== false,
+        () => [ [ Ripple, headerNav.value ] ]
+      )
+    }
+  }
+})