123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101 |
- 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')
- }
- });
- 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
|