@bildvitta/quasar-ui-asteroid 3.17.0-beta.21 → 3.17.0-beta.22

package/src/components/stepper/QasStepper.vue

@@ -1,152 +1,199 @@
-<template>
-  <div class="qas-stepper" :class="classes">
-    <q-stepper ref="stepper" v-model="model" active-color="primary" active-icon="none" animated :contracted="screen.untilLarge" done-color="primary" done-icon="none" flat :header-class="headerClass" inactive-color="grey-6" keep-alive>
-      <template v-for="(_, name) in $slots" #[name]="context">
-        <slot :name="name" v-bind="getContext(context)" />
-      </template>
-    </q-stepper>
-  </div>
-</template>
-
-<script setup>
-import { computed, ref } from 'vue'
-import { Spacing } from '../../enums/Spacing'
-import { gutterValidator } from '../../helpers/private/gutter-validator'
-import useScreen from '../../composables/use-screen'
-
-defineOptions({ name: 'QasStepper' })
-
-const props = defineProps({
-  disable: {
-    type: Boolean
-  },
-
-  modelValue: {
-    type: [String, Number],
-    default: 0
-  },
-
-  spacing: {
-    default: Spacing.Lg,
-    type: [String, Boolean],
-    validator: gutterValidator
-  }
-})
-
-const stepper = ref(null)
-
-const screen = useScreen()
-
-const emit = defineEmits(['update:modelValue'])
-
-defineExpose({ next, previous, goTo })
-
-const model = computed({
-  get () {
-    return props.modelValue
-  },
-
-  set (modelValue) {
-    return emit('update:modelValue', modelValue)
-  }
-})
-
-const classes = computed(() => ({ 'qas-stepper--disable': props.disable }))
-
-const headerClass = computed(() => `text-subtitle1 q-pb-${props.spacing}`)
-
-function getContext (context) {
-  return {
-    ...context,
-    next,
-    previous
-  }
-}
-
-function goTo (step) {
-  stepper.value.goTo(step)
-}
-
-function next () {
-  if (props.disable) return
-
-  stepper.value.next()
-}
-
-function previous () {
-  if (props.disable) return
-
-  stepper.value.previous()
-}
-</script>
-
-<style lang="scss">
-.qas-stepper {
-  .q-stepper {
-    background-color: transparent;
-
-    &__tab {
-      padding: 0;
-    }
-
-    &__caption {
-      @include set-typography($caption);
-      color: $grey-6;
-    }
-  }
-
-  &--disable {
-    .q-stepper {
-      &__title {
-        color: $grey-6;
-      }
-
-      &__line::after,
-      &__line::before,
-      &__dot {
-        background-color: $grey-6 !important;
-      }
-    }
-  }
-
-  .q-stepper--horizontal .q-stepper__line::before,
-  .q-stepper--horizontal .q-stepper__line::after {
-    height: 4px;
-    border-radius: var(--qas-generic-border-radius);
-  }
-
-  .q-stepper__header--standard-labels .q-stepper__tab {
-    min-height: auto;
-  }
-
-  .q-stepper__tab:nth-child(1),
-  .q-stepper__tab--done {
-
-    .q-stepper__line::after,
-    .q-stepper__line::before {
-      background-color: var(--q-primary);
-    }
-  }
-
-  .q-stepper__tab:nth-child(2),
-  .q-stepper__tab--active {
-    .q-stepper__line::before {
-      background-color: var(--q-primary);
-    }
-  }
-
-  .q-stepper__nav,
-  .q-stepper__step-inner {
-    padding: 0;
-  }
-
-  .q-stepper__header--contracted .q-stepper__tab:first-child .q-stepper__dot,
-  .q-stepper__header--contracted .q-stepper__tab:last-child .q-stepper__dot {
-    transform: translateX(0);
-  }
-
-  .q-focus-helper {
-    display: none;
-  }
-}
-</style>
+<template>
+  <div class="qas-stepper" :class="classes">
+    <q-stepper ref="stepper" v-model="model" v-bind="stepperProps">
+      <template v-for="(_, name) in $slots" #[name]="context">
+        <slot :name="name" v-bind="getContext(context)" />
+      </template>
+    </q-stepper>
+  </div>
+</template>
+
+<script setup>
+import { computed, ref, useAttrs } from 'vue'
+import { Spacing } from '../../enums/Spacing'
+import { gutterValidator } from '../../helpers/private/gutter-validator'
+import useScreen from '../../composables/use-screen'
+
+defineOptions({ name: 'QasStepper' })
+
+const props = defineProps({
+  disable: {
+    type: Boolean
+  },
+
+  modelValue: {
+    type: [String, Number],
+    default: 0
+  },
+
+  spacing: {
+    default: Spacing.Lg,
+    type: [String, Boolean],
+    validator: gutterValidator
+  }
+})
+
+const stepper = ref(null)
+
+const attrs = useAttrs()
+
+const screen = useScreen()
+
+const emit = defineEmits(['update:modelValue'])
+
+defineExpose({ next, previous, goTo })
+
+const model = computed({
+  get () {
+    return props.modelValue
+  },
+
+  set (modelValue) {
+    return emit('update:modelValue', modelValue)
+  }
+})
+
+const classes = computed(() => ({ 'qas-stepper--disable': props.disable }))
+
+const stepperProps = computed(() => {
+  const defaultProps = {
+    contracted: screen.untilLarge,
+    doneColor: 'primary',
+    flat: true,
+    animated: true,
+    activeColor: 'primary',
+    errorIcon: 'sym_r_close',
+    errorColor: 'white',
+    headerClass: `text-subtitle1 q-pb-${props.spacing}`,
+    inactiveColor: attrs['header-nav'] || attrs.headerNav ? 'grey-10' : 'grey-6'
+  }
+
+  return {
+    activeIcon: 'none',
+    doneIcon: 'none',
+    keepAlive: true,
+    ...attrs,
+    ...defaultProps
+  }
+})
+
+function getContext (context) {
+  return {
+    ...context,
+    next,
+    previous
+  }
+}
+
+function goTo (step) {
+  stepper.value.goTo(step)
+}
+
+function next () {
+  if (props.disable) return
+
+  stepper.value.next()
+}
+
+function previous () {
+  if (props.disable) return
+
+  stepper.value.previous()
+}
+</script>
+
+<style lang="scss">
+.qas-stepper {
+  .q-stepper {
+    background-color: transparent;
+
+    &__tab {
+      padding: 0;
+
+      &--active {
+        .q-icon {
+          font-size: 14px;
+          color: white;
+        }
+
+        .q-stepper__dot {
+          background-color: var(--q-primary) !important;
+        }
+      }
+
+      &:not(.q-stepper__tab--active).q-stepper__tab--error-with-icon  {
+        .q-stepper__title {
+          color: $grey-10;
+        }
+
+        .q-stepper__dot {
+          background-color: $negative !important;
+        }
+
+        .q-icon {
+          font-size: 14px;
+        }
+      }
+    }
+
+    &__caption {
+      @include set-typography($caption);
+      color: $grey-6;
+    }
+  }
+
+  &--disable {
+    .q-stepper {
+      &__title {
+        color: $grey-6;
+      }
+
+      &__line::after,
+      &__line::before,
+      &__dot {
+        background-color: $grey-6 !important;
+      }
+    }
+  }
+
+  .q-stepper--horizontal .q-stepper__line::before,
+  .q-stepper--horizontal .q-stepper__line::after {
+    height: 4px;
+    border-radius: var(--qas-generic-border-radius);
+  }
+
+  .q-stepper__header--standard-labels .q-stepper__tab {
+    min-height: auto;
+  }
+
+  .q-stepper__tab:nth-child(1),
+  .q-stepper__tab--done {
+
+    .q-stepper__line::after,
+    .q-stepper__line::before {
+      background-color: var(--q-primary);
+    }
+  }
+
+  .q-stepper__tab:nth-child(2),
+  .q-stepper__tab--active {
+    .q-stepper__line::before {
+      background-color: var(--q-primary);
+    }
+  }
+
+  .q-stepper__nav,
+  .q-stepper__step-inner {
+    padding: 0;
+  }
+
+  .q-stepper__header--contracted .q-stepper__tab:first-child .q-stepper__dot,
+  .q-stepper__header--contracted .q-stepper__tab:last-child .q-stepper__dot {
+    transform: translateX(0);
+  }
+
+  .q-focus-helper {
+    display: none;
+  }
+}
+</style>

package/src/components/stepper/QasStepper.yml

@@ -1,36 +1,36 @@
-type: component
-
-meta:
-  desc: Componente de stepper.
-
-props:
-  disable:
-    desc: Deixa o componente desabilitado.
-    default: false
-    type: Boolean
-
-  spacing:
-    desc: Espaçamento entre o stepper e o conteúdo da página.
-    default: lg
-    type: [String, Boolean]
-    examples: [xs, sm, md, lg, xl, '2xl', '3xl', '4xl', '5xl', false]
-
-  model-value:
-    desc: Model do componente, responsável por controlar em qual step deverá ser exibido.
-    model: true
-    type: [Number, String]
-
-events:
-  '@update:model-value -> function(value)':
-    desc: Dispara quando o model-value altera, também usado para v-model.
-    params:
-      value:
-        desc: Valor do mode-value.
-        type: [Number, String]
-
-methods:
-  'next: () => void':
-    desc: Avança o stepper para o prõximo step.
-
-  'previous: () => void':
+type: component
+
+meta:
+  desc: Componente de stepper.
+
+props:
+  disable:
+    desc: Deixa o componente desabilitado.
+    default: false
+    type: Boolean
+
+  spacing:
+    desc: Espaçamento entre o stepper e o conteúdo da página.
+    default: lg
+    type: [String, Boolean]
+    examples: [xs, sm, md, lg, xl, '2xl', '3xl', '4xl', '5xl', false]
+
+  model-value:
+    desc: Model do componente, responsável por controlar em qual step deverá ser exibido.
+    model: true
+    type: [Number, String]
+
+events:
+  '@update:model-value -> function(value)':
+    desc: Dispara quando o model-value altera, também usado para v-model.
+    params:
+      value:
+        desc: Valor do mode-value.
+        type: [Number, String]
+
+methods:
+  'next: () => void':
+    desc: Avança o stepper para o prõximo step.
+
+  'previous: () => void':
     desc: Volta o stepper para o step anterior.

package/src/components/stepper-form-view/QasStepperFormView.vue

@@ -1,84 +1,86 @@
-<template>
-  <qas-stepper ref="stepper" v-model="model" v-bind="stepperProps">
-    <template #default>
-      <q-step v-for="(step, stepIndex) in props.steps" :key="stepIndex" :done="isDone(stepIndex)" :name="getStepName(stepIndex)" v-bind="stepPropsList[stepIndex]">
-        <component :is="step.component" />
-      </q-step>
-    </template>
-  </qas-stepper>
-</template>
-
-<script setup>
-import { ref, provide, computed } from 'vue'
-
-defineOptions({ name: 'QasStepperFormView' })
-
-const props = defineProps({
-  steps: {
-    type: Array,
-    required: true
-  },
-
-  formViewProps: {
-    type: Object,
-    default: () => ({})
-  },
-
-  stepperProps: {
-    type: Object,
-    default: () => ({})
-  }
-})
-
-const model = defineModel({ type: Number, default: 1 })
-
-const values = ref({})
-const stepPropsList = ref([])
-const stepper = ref(null)
-
-setStepProps({ payload: [...props.steps.map(({ stepProps }) => stepProps)] })
-
-const defaultFormViewProps = computed(() => {
-  return {
-    useBoundary: false,
-    useNotifySuccess: false,
-    ...props.formViewProps
-  }
-})
-
-function setStepProps ({ step, payload }) {
-  if (step) {
-    stepPropsList.value[step - 1] = payload
-  } else {
-    stepPropsList.value = payload
-  }
-}
-
-/*
-* - Merge do payload com objetivo de enviar o payload completo de todos steps no stepper final
-* - É possível ir para um step especifico ou somente ir para o próximo.
-*/
-function nextStep ({ payload = {} }) {
-  Object.assign(values.value, payload)
-
-  stepper.value.next()
-}
-
-function isDone (stepIndex) {
-  return model.value > stepIndex + 1
-}
-
-function getStepName (stepIndex) {
-  return stepIndex + 1
-}
-
-provide('stepper', {
-  stepperModel: model,
-  formViewProps: defaultFormViewProps,
-  goTo: step => stepper.value.goTo(step),
-  next: nextStep,
-  previous: () => stepper.value.previous(),
-  setStepProps,
-  stepsValues: values
-})
-</script>
+<template>
+  <qas-stepper ref="stepper" v-model="model" v-bind="stepperProps">
+    <template #default>
+      <q-step v-for="(step, stepIndex) in props.steps" :key="stepIndex" :done="isDone(stepIndex)" :name="getStepName({ step, stepIndex })" v-bind="stepPropsList[stepIndex]">
+        <component :is="step.component" />
+      </q-step>
+    </template>
+  </qas-stepper>
+</template>
+
+<script setup>
+import { ref, provide, computed } from 'vue'
+
+defineOptions({ name: 'QasStepperFormView' })
+
+const props = defineProps({
+  steps: {
+    type: Array,
+    required: true
+  },
+
+  formViewProps: {
+    type: Object,
+    default: () => ({})
+  },
+
+  stepperProps: {
+    type: Object,
+    default: () => ({})
+  }
+})
+
+defineExpose({ setStepProps })
+
+const model = defineModel({ type: [Number, String], default: 1 })
+
+const values = ref({})
+const stepPropsList = ref([])
+const stepper = ref(null)
+
+setStepProps({ payload: [...props.steps.map(({ stepProps }) => stepProps)] })
+
+const defaultFormViewProps = computed(() => {
+  return {
+    useBoundary: false,
+    useNotifySuccess: false,
+    ...props.formViewProps
+  }
+})
+
+function setStepProps ({ step, payload }) {
+  if (step) {
+    stepPropsList.value[step - 1] = payload
+  } else {
+    stepPropsList.value = payload
+  }
+}
+
+/*
+* - Merge do payload com objetivo de enviar o payload completo de todos steps no stepper final
+* - É possível ir para um step especifico ou somente ir para o próximo.
+*/
+function nextStep ({ payload = {} }) {
+  Object.assign(values.value, payload)
+
+  stepper.value.next()
+}
+
+function isDone (stepIndex) {
+  return model.value > stepIndex + 1
+}
+
+function getStepName ({ step, stepIndex }) {
+  return step.name || stepIndex + 1
+}
+
+provide('stepper', {
+  stepperModel: model,
+  formViewProps: defaultFormViewProps,
+  goTo: step => stepper.value.goTo(step),
+  next: nextStep,
+  previous: () => stepper.value.previous(),
+  setStepProps,
+  stepsValues: values
+})
+</script>