1 line
9.3 KiB
Plaintext
1 line
9.3 KiB
Plaintext
|
{"version":3,"file":"VStepperItem.mjs","names":["VAvatar","VIcon","makeGroupItemProps","useGroupItem","Ripple","computed","VStepperSymbol","genericComponent","propsFactory","useRender","makeVStepperItemProps","color","String","title","subtitle","complete","Boolean","completeIcon","type","default","editable","editIcon","error","errorIcon","icon","ripple","Object","rules","Array","VStepperItem","name","directives","props","emits","val","setup","_ref","slots","group","step","value","isValid","every","handler","canEdit","disabled","hasError","hasCompleted","length","slotProps","hasColor","isSelected","hasTitle","hasSubtitle","onClick","toggle","_withDirectives","_createVNode","selectedClass","undefined","_resolveDirective"],"sources":["../../../src/components/VStepper/VStepperItem.tsx"],"sourcesContent":["// Styles\nimport './VStepperItem.sass'\n\n// Components\nimport { VAvatar } from '@/components/VAvatar/VAvatar'\nimport { VIcon } from '@/components/VIcon/VIcon'\n\n// Composables\nimport { makeGroupItemProps, useGroupItem } from '@/composables/group'\n\n// Directives\nimport { Ripple } from '@/directives/ripple'\n\n// Utilities\nimport { computed } from 'vue'\nimport { VStepperSymbol } from './VStepper'\nimport { genericComponent, propsFactory, useRender } from '@/util'\n\n// Types\nimport type { PropType } from 'vue'\nimport type { RippleDirectiveBinding } from '@/directives/ripple'\n\nexport type StepperItemSlot = {\n canEdit: boolean\n hasError: boolean\n hasCompleted: boolean\n title?: string | number\n subtitle?: string | number\n step: any\n}\n\nexport type VStepperItemSlots = {\n default: StepperItemSlot\n icon: StepperItemSlot\n title: StepperItemSlot\n subtitle: StepperItemSlot\n}\n\nexport type ValidationRule = () => string | boolean\n\nexport const makeVStepperItemProps = propsFactory({\n color: String,\n title: String,\n subtitle: String,\n complete: Boolean,\n completeIcon: {\n type: String,\n default: '$complete',\n },\n editable: Boolean,\n editIcon: {\n type: String,\n default: '$edit',\n },\n error: Boolean,\n errorIcon: {\n type: String,\n default: '$error',\n },\n icon: String,\n ripple: {\n type: [Boolean, Object] as PropType<RippleDirectiveBinding['value']>,\n default: true,\n },\n rules: {\n type: Array as PropType<readonly ValidationRule[]>,\n default: () => ([]),\n },\n\n ...makeGroupItemProps(),\n}, 'VStepperItem')\n\nexport const VStepperItem = genericComponent<VStepperItemSlots>()({\n name: 'VStepperItem',\n\n directives: { Ripple },\n\n props: makeVStepperItemProps(),\n\n emits: {\n 'group:selected': (val: { value: boolean }) => true,\n },\n\n setup (props, { slots }) {\n const group = useGroupItem(props, VStepperSymbol, true)\n const step = computed(() => group?.value.value ?? props.value)\n const isValid = computed(() => props.rules.every(handler => handler() === true))\n const canEdit = computed(() => !props.disabled && props.editable)\n const hasError = computed(() => props.error || !isValid.value)\n const hasCompleted = computed(() => props.complete || (props.rules.length > 0 && isValid.value))\n const icon = computed(() => {\n if (hasError.value) return props.errorIcon\n if (hasCompleted.value) return props.completeIcon\n if (props.editable) return props.editIcon\n\n return props.icon\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 useRender(() => {\n const hasColor = (\n !group ||\n group.isSelected.value ||\n hasCompleted.value ||\n canEdit.value\n ) && (\n !hasError.value &&\n !props.disabled\n )\n const hasTitle = !!(props.title != null || slots.title)\n const hasSubtitle = !!(props.subtitle != null || slots.subtitle)\n\n function onClick () {\n group?.toggle()\n }\
|