Vulture/VApp/node_modules/vuetify/lib/components/VStepper/VStepper.mjs

149 lines
4.6 KiB
JavaScript
Raw Normal View History

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 "../VDivider/index.mjs";
import { makeVSheetProps, VSheet } from "../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, only, 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'
}),
...makeVSheetProps(),
...only(makeVStepperActionsProps(), ['prevText', 'nextText'])
}, 'VStepper');
export const VStepper = genericComponent()({
name: 'VStepper',
props: makeVStepperProps(),
emits: {
'update:modelValue': v => true
},
setup(props, _ref) {
let {
slots
} = _ref;
const {
items: _items,
next,
prev,
selected
} = useGroup(props, VStepperSymbol);
const {
color,
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: {
color,
disabled,
prevText,
nextText
}
});
useRender(() => {
const sheetProps = VSheet.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, {
"color": props.bgColor,
"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, {
"key": "stepper-actions",
"onClick:prev": prev,
"onClick:next": next
}, slots))]
});
});
return {
prev,
next
};
}
});
//# sourceMappingURL=VStepper.mjs.map