123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147 |
- import { mergeProps as _mergeProps, resolveDirective as _resolveDirective, createVNode as _createVNode, Fragment as _Fragment } from "vue";
- // Styles
- import "./VStepper.css";
- // Components
- import { makeVStepperActionsProps, VStepperActions } from "./VStepperActions.mjs";
- import { VStepperHeader } from "./VStepperHeader.mjs";
- import { VStepperItem } from "./VStepperItem.mjs";
- import { VStepperWindow } from "./VStepperWindow.mjs";
- import { VStepperWindowItem } from "./VStepperWindowItem.mjs";
- import { VDivider } from "../../components/VDivider/index.mjs";
- import { makeVSheetProps, VSheet } from "../../components/VSheet/VSheet.mjs"; // Composables
- import { provideDefaults } from "../../composables/defaults.mjs";
- import { makeGroupProps, useGroup } from "../../composables/group.mjs"; // Utilities
- import { computed, toRefs } from 'vue';
- import { genericComponent, getPropertyFromItem, omit, propsFactory, useRender } from "../../util/index.mjs"; // Types
- export const VStepperSymbol = Symbol.for('vuetify:v-stepper');
- export const makeVStepperProps = propsFactory({
- altLabels: Boolean,
- bgColor: String,
- editable: Boolean,
- hideActions: Boolean,
- items: {
- type: Array,
- default: () => []
- },
- itemTitle: {
- type: String,
- default: 'title'
- },
- itemValue: {
- type: String,
- default: 'value'
- },
- mobile: Boolean,
- nonLinear: Boolean,
- flat: Boolean,
- ...makeGroupProps({
- mandatory: 'force',
- selectedClass: 'v-stepper-item--selected'
- }),
- ...omit(makeVSheetProps(), ['color']),
- ...makeVStepperActionsProps()
- }, 'VStepper');
- export const VStepper = genericComponent()({
- name: 'VStepper',
- props: makeVStepperProps(),
- emits: {
- 'update:modelValue': v => true
- },
- setup(props, _ref) {
- let {
- slots
- } = _ref;
- // TODO: fix typing
- const {
- items: _items,
- next,
- prev,
- selected
- } = useGroup(props, VStepperSymbol);
- const {
- editable,
- prevText,
- nextText
- } = toRefs(props);
- const items = computed(() => props.items.map((item, index) => {
- const title = getPropertyFromItem(item, props.itemTitle, item);
- const value = getPropertyFromItem(item, props.itemValue, index + 1);
- return {
- title,
- value,
- raw: item
- };
- }));
- const activeIndex = computed(() => {
- return _items.value.findIndex(item => selected.value.includes(item.id));
- });
- const disabled = computed(() => {
- if (props.disabled) return props.disabled;
- if (activeIndex.value === 0) return 'prev';
- if (activeIndex.value === _items.value.length - 1) return 'next';
- return false;
- });
- provideDefaults({
- VStepperItem: {
- editable,
- prevText,
- nextText
- },
- VStepperActions: {
- disabled
- }
- });
- useRender(() => {
- const [sheetProps] = VSheet.filterProps(props);
- const [stepperActionProps] = VStepperActions.filterProps(props);
- const hasHeader = !!(slots.header || props.items.length);
- const hasWindow = props.items.length > 0;
- const hasActions = !props.hideActions && !!(hasWindow || slots.actions);
- return _createVNode(VSheet, _mergeProps(sheetProps, {
- "class": ['v-stepper', {
- 'v-stepper--alt-labels': props.altLabels,
- 'v-stepper--flat': props.flat,
- 'v-stepper--non-linear': props.nonLinear,
- 'v-stepper--mobile': props.mobile
- }, props.class],
- "style": props.style
- }), {
- default: () => [hasHeader && _createVNode(VStepperHeader, {
- "key": "stepper-header"
- }, {
- default: () => [items.value.map((item, index) => _createVNode(_Fragment, null, [!!index && _createVNode(VDivider, null, null), _createVNode(VStepperItem, item, {
- default: slots[`header-item.${item.value}`] ?? slots.header,
- icon: slots.icon,
- title: slots.title,
- subtitle: slots.subtitle
- })]))]
- }), hasWindow && _createVNode(VStepperWindow, {
- "key": "stepper-window"
- }, {
- default: () => [items.value.map(item => _createVNode(VStepperWindowItem, {
- "value": item.value
- }, {
- default: () => slots[`item.${item.value}`]?.(item) ?? slots.item?.(item)
- }))]
- }), slots.default?.({
- prev,
- next
- }), hasActions && (slots.actions?.({
- next,
- prev
- }) ?? _createVNode(VStepperActions, _mergeProps({
- "key": "stepper-actions"
- }, stepperActionProps, {
- "onClick:prev": prev,
- "onClick:next": next
- }), null))]
- });
- });
- return {
- prev,
- next
- };
- }
- });
- //# sourceMappingURL=VStepper.mjs.map
|