104 lines
4.2 KiB
JavaScript
104 lines
4.2 KiB
JavaScript
|
import { createVNode as _createVNode } from "vue";
|
||
|
|
// Components
|
||
|
|
import { VExpansionPanelSymbol } from "./VExpansionPanels.mjs";
|
||
|
|
import { VExpansionPanelText } from "./VExpansionPanelText.mjs";
|
||
|
|
import { makeVExpansionPanelTitleProps, VExpansionPanelTitle } from "./VExpansionPanelTitle.mjs"; // Composables
|
||
|
|
import { useBackgroundColor } from "../../composables/color.mjs";
|
||
|
|
import { makeComponentProps } from "../../composables/component.mjs";
|
||
|
|
import { provideDefaults } from "../../composables/defaults.mjs";
|
||
|
|
import { makeElevationProps, useElevation } from "../../composables/elevation.mjs";
|
||
|
|
import { makeGroupItemProps, useGroupItem } from "../../composables/group.mjs";
|
||
|
|
import { makeLazyProps } from "../../composables/lazy.mjs";
|
||
|
|
import { makeRoundedProps, useRounded } from "../../composables/rounded.mjs";
|
||
|
|
import { makeTagProps } from "../../composables/tag.mjs"; // Utilities
|
||
|
|
import { computed, provide, toRef } from 'vue';
|
||
|
|
import { genericComponent, propsFactory, useRender } from "../../util/index.mjs";
|
||
|
|
export const makeVExpansionPanelProps = propsFactory({
|
||
|
|
title: String,
|
||
|
|
text: String,
|
||
|
|
bgColor: String,
|
||
|
|
...makeComponentProps(),
|
||
|
|
...makeElevationProps(),
|
||
|
|
...makeGroupItemProps(),
|
||
|
|
...makeLazyProps(),
|
||
|
|
...makeRoundedProps(),
|
||
|
|
...makeTagProps(),
|
||
|
|
...makeVExpansionPanelTitleProps()
|
||
|
|
}, '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);
|
||
|
|
provideDefaults({
|
||
|
|
VExpansionPanelText: {
|
||
|
|
eager: toRef(props, 'eager')
|
||
|
|
},
|
||
|
|
VExpansionPanelTitle: {
|
||
|
|
readonly: toRef(props, 'readonly')
|
||
|
|
}
|
||
|
|
});
|
||
|
|
useRender(() => {
|
||
|
|
const hasText = !!(slots.text || props.text);
|
||
|
|
const hasTitle = !!(slots.title || props.title);
|
||
|
|
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), hasTitle && _createVNode(VExpansionPanelTitle, {
|
||
|
|
"key": "title",
|
||
|
|
"collapseIcon": props.collapseIcon,
|
||
|
|
"color": props.color,
|
||
|
|
"expandIcon": props.expandIcon,
|
||
|
|
"hideActions": props.hideActions,
|
||
|
|
"ripple": props.ripple
|
||
|
|
}, {
|
||
|
|
default: () => [slots.title ? slots.title() : props.title]
|
||
|
|
}), hasText && _createVNode(VExpansionPanelText, {
|
||
|
|
"key": "text"
|
||
|
|
}, {
|
||
|
|
default: () => [slots.text ? slots.text() : props.text]
|
||
|
|
}), slots.default?.()]
|
||
|
|
});
|
||
|
|
});
|
||
|
|
return {};
|
||
|
|
}
|
||
|
|
});
|
||
|
|
//# sourceMappingURL=VExpansionPanel.mjs.map
|