103 lines
4.2 KiB
JavaScript
103 lines
4.2 KiB
JavaScript
import { createVNode as _createVNode } from "vue";
|
|
// Components
|
|
import { VExpansionPanelSymbol } from "./shared.mjs";
|
|
import { makeVExpansionPanelTextProps, VExpansionPanelText } from "./VExpansionPanelText.mjs";
|
|
import { makeVExpansionPanelTitleProps, VExpansionPanelTitle } from "./VExpansionPanelTitle.mjs";
|
|
import { VDefaultsProvider } from "../VDefaultsProvider/index.mjs"; // Composables
|
|
import { useBackgroundColor } from "../../composables/color.mjs";
|
|
import { makeElevationProps, useElevation } from "../../composables/elevation.mjs";
|
|
import { makeGroupItemProps, useGroupItem } from "../../composables/group.mjs";
|
|
import { makeRoundedProps, useRounded } from "../../composables/rounded.mjs";
|
|
import { makeTagProps } from "../../composables/tag.mjs"; // Utilities
|
|
import { computed, provide } from 'vue';
|
|
import { genericComponent, propsFactory, useRender } from "../../util/index.mjs";
|
|
export const makeVExpansionPanelProps = propsFactory({
|
|
title: String,
|
|
text: String,
|
|
bgColor: String,
|
|
...makeElevationProps(),
|
|
...makeGroupItemProps(),
|
|
...makeRoundedProps(),
|
|
...makeTagProps(),
|
|
...makeVExpansionPanelTitleProps(),
|
|
...makeVExpansionPanelTextProps()
|
|
}, 'VExpansionPanel');
|
|
export const VExpansionPanel = genericComponent()({
|
|
name: 'VExpansionPanel',
|
|
props: makeVExpansionPanelProps(),
|
|
emits: {
|
|
'group:selected': val => true
|
|
},
|
|
setup(props, _ref) {
|
|
let {
|
|
slots
|
|
} = _ref;
|
|
const groupItem = useGroupItem(props, VExpansionPanelSymbol);
|
|
const {
|
|
backgroundColorClasses,
|
|
backgroundColorStyles
|
|
} = useBackgroundColor(props, 'bgColor');
|
|
const {
|
|
elevationClasses
|
|
} = useElevation(props);
|
|
const {
|
|
roundedClasses
|
|
} = useRounded(props);
|
|
const isDisabled = computed(() => groupItem?.disabled.value || props.disabled);
|
|
const selectedIndices = computed(() => groupItem.group.items.value.reduce((arr, item, index) => {
|
|
if (groupItem.group.selected.value.includes(item.id)) arr.push(index);
|
|
return arr;
|
|
}, []));
|
|
const isBeforeSelected = computed(() => {
|
|
const index = groupItem.group.items.value.findIndex(item => item.id === groupItem.id);
|
|
return !groupItem.isSelected.value && selectedIndices.value.some(selectedIndex => selectedIndex - index === 1);
|
|
});
|
|
const isAfterSelected = computed(() => {
|
|
const index = groupItem.group.items.value.findIndex(item => item.id === groupItem.id);
|
|
return !groupItem.isSelected.value && selectedIndices.value.some(selectedIndex => selectedIndex - index === -1);
|
|
});
|
|
provide(VExpansionPanelSymbol, groupItem);
|
|
useRender(() => {
|
|
const hasText = !!(slots.text || props.text);
|
|
const hasTitle = !!(slots.title || props.title);
|
|
const expansionPanelTitleProps = VExpansionPanelTitle.filterProps(props);
|
|
const expansionPanelTextProps = VExpansionPanelText.filterProps(props);
|
|
return _createVNode(props.tag, {
|
|
"class": ['v-expansion-panel', {
|
|
'v-expansion-panel--active': groupItem.isSelected.value,
|
|
'v-expansion-panel--before-active': isBeforeSelected.value,
|
|
'v-expansion-panel--after-active': isAfterSelected.value,
|
|
'v-expansion-panel--disabled': isDisabled.value
|
|
}, roundedClasses.value, backgroundColorClasses.value, props.class],
|
|
"style": [backgroundColorStyles.value, props.style]
|
|
}, {
|
|
default: () => [_createVNode("div", {
|
|
"class": ['v-expansion-panel__shadow', ...elevationClasses.value]
|
|
}, null), _createVNode(VDefaultsProvider, {
|
|
"defaults": {
|
|
VExpansionPanelTitle: {
|
|
...expansionPanelTitleProps
|
|
},
|
|
VExpansionPanelText: {
|
|
...expansionPanelTextProps
|
|
}
|
|
}
|
|
}, {
|
|
default: () => [hasTitle && _createVNode(VExpansionPanelTitle, {
|
|
"key": "title"
|
|
}, {
|
|
default: () => [slots.title ? slots.title() : props.title]
|
|
}), hasText && _createVNode(VExpansionPanelText, {
|
|
"key": "text"
|
|
}, {
|
|
default: () => [slots.text ? slots.text() : props.text]
|
|
}), slots.default?.()]
|
|
})]
|
|
});
|
|
});
|
|
return {
|
|
groupItem
|
|
};
|
|
}
|
|
});
|
|
//# sourceMappingURL=VExpansionPanel.mjs.map
|