vuetify 3.6.4 → 3.6.5

package/lib/labs/VStepperVertical/VStepperVerticalItem.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"VStepperVerticalItem.mjs","names":["VStepperVerticalActions","VAvatar","VDefaultsProvider","VExpansionPanel","makeVExpansionPanelProps","VIcon","makeStepperItemProps","computed","ref","genericComponent","omit","propsFactory","useRender","makeVStepperVerticalItemProps","hideActions","Boolean","expandIcon","collapseIcon","VStepperVerticalItem","name","props","emits","click:next","click:prev","click:finish","setup","_ref","emit","slots","vExpansionPanelRef","step","isNaN","parseInt","value","Number","groupItem","isSelected","isValid","rules","every","handler","canEdit","disabled","editable","hasError","error","hasCompleted","complete","length","isFirst","icon","errorIcon","completeIcon","editIcon","slotProps","title","subtitle","actionProps","prev","onClickPrev","next","onClickNext","isLast","group","hasColor","hasActions","actions","expansionPanelProps","filterProps","_createVNode","_mergeProps","class","style","_Fragment","color","undefined","default","text","finish"],"sources":["../../../src/labs/VStepperVertical/VStepperVerticalItem.tsx"],"sourcesContent":["// Styles\nimport './VStepperVerticalItem.sass'\n\n// Components\nimport { VStepperVerticalActions } from './VStepperVerticalActions'\nimport { VAvatar } from '@/components/VAvatar/VAvatar'\nimport { VDefaultsProvider } from '@/components/VDefaultsProvider/VDefaultsProvider'\nimport { VExpansionPanel } from '@/components/VExpansionPanel'\nimport { makeVExpansionPanelProps } from '@/components/VExpansionPanel/VExpansionPanel'\nimport { VIcon } from '@/components/VIcon/VIcon'\nimport { makeStepperItemProps } from '@/components/VStepper/VStepperItem'\n\n// Utilities\nimport { computed, ref } from 'vue'\nimport { genericComponent, omit, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { StepperItemSlot } from '@/components/VStepper/VStepperItem'\n\nexport type VStepperVerticalItemSlots = {\n  default: StepperItemSlot\n  icon: StepperItemSlot\n  subtitle: StepperItemSlot\n  title: StepperItemSlot\n  text: StepperItemSlot\n  prev: StepperItemSlot\n  next: StepperItemSlot\n  actions: StepperItemSlot & {\n    next: () => void\n    prev: () => void\n  }\n}\n\nexport const makeVStepperVerticalItemProps = propsFactory({\n  hideActions: Boolean,\n\n  ...makeStepperItemProps(),\n  ...omit(makeVExpansionPanelProps({\n    expandIcon: '',\n    collapseIcon: '',\n  }), ['hideActions']),\n}, 'VStepperVerticalItem')\n\nexport const VStepperVerticalItem = genericComponent<VStepperVerticalItemSlots>()({\n  name: 'VStepperVerticalItem',\n\n  props: makeVStepperVerticalItemProps(),\n\n  emits: {\n    'click:next': () => true,\n    'click:prev': () => true,\n    'click:finish': () => true,\n  },\n\n  setup (props, { emit, slots }) {\n    const vExpansionPanelRef = ref<typeof VExpansionPanel>()\n    const step = computed(() => !isNaN(parseInt(props.value)) ? Number(props.value) : props.value)\n    const groupItem = computed(() => vExpansionPanelRef.value?.groupItem)\n    const isSelected = computed(() => groupItem.value?.isSelected.value ?? false)\n    const isValid = computed(() => isSelected.value ? props.rules.every(handler => handler() === true) : null)\n    const canEdit = computed(() => !props.disabled && props.editable)\n    const hasError = computed(() => props.error || (isSelected.value && !isValid.value))\n    const hasCompleted = computed(() => props.complete || (props.rules.length > 0 && isValid.value === true))\n\n    const disabled = computed(() => {\n      if (props.disabled) return props.disabled\n      if (groupItem.value?.isFirst.value) return 'prev'\n\n      return false\n    })\n    const icon = computed(() => {\n      if (hasError.value) return props.errorIcon\n      if (hasCompleted.value) return props.completeIcon\n      if (groupItem.value?.isSelected.value && props.editable) return props.editIcon\n\n      return props.icon\n    })\n\n    const slotProps = computed(() => ({\n      canEdit: canEdit.value,\n      hasError: hasError.value,\n      hasCompleted: hasCompleted.value,\n      title: props.title,\n      subtitle: props.subtitle,\n      step: step.value,\n      value: props.value,\n    }))\n\n    const actionProps = computed(() => ({\n      ...slotProps.value,\n      prev: onClickPrev,\n      next: onClickNext,\n    }))\n\n    function onClickNext () {\n      emit('click:next')\n\n      if (groupItem.value?.isLast.value) return\n\n      groupItem.value.group.next()\n    }\n\n    function onClickPrev () {\n      emit('click:prev')\n\n      groupItem.value.group.prev()\n    }\n\n    useRender(() => {\n      const hasColor = (\n        hasCompleted.value ||\n        groupItem.value?.isSelected.value\n      ) && (\n        !hasError.value &&\n        !props.disabled\n      )\n\n      const hasActions = !props.hideActions || !!slots.actions\n      const expansionPanelProps = VExpansionPanel.filterProps(props)\n\n      return (\n        <VExpansionPanel\n          _as=\"VStepperVerticalItem\"\n          ref={ vExpansionPanelRef }\n          { ...expansionPanelProps }\n          class={[\n            'v-stepper-vertical-item',\n            {\n              'v-stepper-vertical-item--complete': hasCompleted.value,\n              'v-stepper-vertical-item--disabled': props.disabled,\n              'v-stepper-vertical-item--editable': canEdit.value,\n              'v-stepper-vertical-item--error': hasError.value,\n            },\n            props.class,\n          ]}\n          readonly={ !props.editable }\n          style={ props.style }\n          color=\"\"\n          hide-actions={ false }\n          value={ step.value }\n        >\n          {{\n            title: () => (\n              <>\n                <VAvatar\n                  key=\"stepper-avatar\"\n                  class=\"v-stepper-vertical-item__avatar\"\n                  color={ hasColor ? props.color : undefined }\n                  size={ 24 }\n                  start\n                >\n                  { slots.icon?.(slotProps.value) ?? (\n                    icon.value ? (\n                      <VIcon icon={ icon.value }></VIcon>\n                    ) : step.value\n                  )}\n                </VAvatar>\n\n                <div>\n                  <div class=\"v-stepper-vertical-item__title\">\n                    { slots.title?.(slotProps.value) ?? props.title }\n                  </div>\n\n                  <div class=\"v-stepper-vertical-item__subtitle\">\n                    { slots.subtitle?.(slotProps.value) ?? props.subtitle }\n                  </div>\n                </div>\n              </>\n            ),\n            text: () => (\n              <>\n                { slots.default?.(slotProps.value) ?? props.text }\n\n                { hasActions && (\n                  <VDefaultsProvider\n                    defaults={{\n                      VStepperVerticalActions: {\n                        disabled: disabled.value,\n                        finish: groupItem.value?.isLast.value,\n                      },\n                    }}\n                  >\n                    { slots.actions?.(actionProps.value) ?? (\n                      <VStepperVerticalActions\n                        onClick:next={ onClickNext }\n                        onClick:prev={ onClickPrev }\n                        v-slots={{\n                          prev: slots.prev ? () => slots.prev?.(actionProps.value) : undefined,\n                          next: slots.next ? () => slots.next?.(actionProps.value) : undefined,\n                        }}\n                      />\n                    )}\n                  </VDefaultsProvider>\n                )}\n              </>\n            ),\n          }}\n        </VExpansionPanel>\n      )\n    })\n\n    return {}\n  },\n})\n\nexport type VStepperVerticalItem = InstanceType<typeof VStepperVerticalItem>\n"],"mappings":"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","ignoreList":[]}

package/lib/labs/VStepperVertical/VStepperVerticalItem.sass

@@ -0,0 +1,74 @@
+@use '../../styles/settings'
+@use '../../styles/tools'
+@use './variables' as *
+
+.v-stepper-vertical-item
+  position: relative
+  transition-duration: $stepper-vertical-item-transition-duration
+  transition-property: $stepper-vertical-item-transition-property
+  transition-timing-function: $stepper-vertical-item-transition-timing-function
+
+  &__title
+    font-size: 1rem
+
+  &__subtitle
+    font-size: .75rem
+
+  .v-expansion-panel-text
+    padding-inline-start: 32px
+
+  &:not(:last-child):before
+    content: ''
+    position: absolute
+    width: 2px
+    height: calc(100% - 30px)
+    background: rgba(var(--v-border-color), var(--v-border-opacity))
+    left: 35px
+    top: 44px
+    z-index: 1
+    transition-duration: 300ms
+    transition-property: height
+
+  &:after
+    display: none
+
+  &.v-expansion-panel--disabled,
+  &:not(.v-stepper-vertical-item--editable)
+    .v-expansion-panel-title
+      pointer-events: none
+
+      .v-expansion-panel-title__overlay
+        opacity: 0
+
+.v-stepper-vertical-item__avatar.v-avatar
+  background: rgba(var(--v-theme-surface-variant), var(--v-medium-emphasis-opacity))
+  color: rgb(var(--v-theme-on-surface-variant))
+  transition-property: background
+
+  .v-icon
+    font-size: .875rem
+
+  .v-expansion-panel--active &
+    background: rgb(var(--v-theme-surface-variant))
+
+  .v-stepper-vertical-item--error &
+    background: rgb(var(--v-theme-error))
+    color: rgb(var(--v-theme-on-error))
+
+.v-stepper-vertical-item__title
+  .v-stepper-vertical-item--error &
+    color: rgb(var(--v-theme-error))
+
+.v-stepper-vertical-item__subtitle
+  .v-stepper-vertical-item--error &
+    color: rgb(var(--v-theme-error))
+
+.v-stepper-vertical-actions
+  &.v-stepper-actions
+    .v-btn
+      margin-inline-end: 8px
+
+    .v-stepper &
+      justify-content: flex-end
+      padding: 24px 0 0
+      flex-direction: row-reverse

package/lib/labs/VStepperVertical/_variables.scss

@@ -0,0 +1,3 @@
+$stepper-vertical-item-transition-duration: .2s !default;
+$stepper-vertical-item-transition-property: opacity !default;
+$stepper-vertical-item-transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !default;