123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118 |
- import { withDirectives as _withDirectives, vShow as _vShow, createVNode as _createVNode } from "vue";
- // Components
- import { VExpandTransition } from "../transitions/index.mjs";
- import { VDefaultsProvider } from "../VDefaultsProvider/index.mjs"; // Composables
- import { useList } from "./list.mjs";
- import { makeComponentProps } from "../../composables/component.mjs";
- import { IconValue } from "../../composables/icons.mjs";
- import { useNestedGroupActivator, useNestedItem } from "../../composables/nested/nested.mjs";
- import { useSsrBoot } from "../../composables/ssrBoot.mjs";
- import { makeTagProps } from "../../composables/tag.mjs";
- import { MaybeTransition } from "../../composables/transition.mjs"; // Utilities
- import { computed, toRef } from 'vue';
- import { defineComponent, genericComponent, propsFactory, useRender } from "../../util/index.mjs";
- const VListGroupActivator = defineComponent({
- name: 'VListGroupActivator',
- setup(_, _ref) {
- let {
- slots
- } = _ref;
- useNestedGroupActivator();
- return () => slots.default?.();
- }
- });
- export const makeVListGroupProps = propsFactory({
- /* @deprecated */
- activeColor: String,
- baseColor: String,
- color: String,
- collapseIcon: {
- type: IconValue,
- default: '$collapse'
- },
- expandIcon: {
- type: IconValue,
- default: '$expand'
- },
- prependIcon: IconValue,
- appendIcon: IconValue,
- fluid: Boolean,
- subgroup: Boolean,
- title: String,
- value: null,
- ...makeComponentProps(),
- ...makeTagProps()
- }, 'VListGroup');
- export const VListGroup = genericComponent()({
- name: 'VListGroup',
- props: makeVListGroupProps(),
- setup(props, _ref2) {
- let {
- slots
- } = _ref2;
- const {
- isOpen,
- open,
- id: _id
- } = useNestedItem(toRef(props, 'value'), true);
- const id = computed(() => `v-list-group--id-${String(_id.value)}`);
- const list = useList();
- const {
- isBooted
- } = useSsrBoot();
- function onClick(e) {
- open(!isOpen.value, e);
- }
- const activatorProps = computed(() => ({
- onClick,
- class: 'v-list-group__header',
- id: id.value
- }));
- const toggleIcon = computed(() => isOpen.value ? props.collapseIcon : props.expandIcon);
- const activatorDefaults = computed(() => ({
- VListItem: {
- active: isOpen.value,
- activeColor: props.activeColor,
- baseColor: props.baseColor,
- color: props.color,
- prependIcon: props.prependIcon || props.subgroup && toggleIcon.value,
- appendIcon: props.appendIcon || !props.subgroup && toggleIcon.value,
- title: props.title,
- value: props.value
- }
- }));
- useRender(() => _createVNode(props.tag, {
- "class": ['v-list-group', {
- 'v-list-group--prepend': list?.hasPrepend.value,
- 'v-list-group--fluid': props.fluid,
- 'v-list-group--subgroup': props.subgroup,
- 'v-list-group--open': isOpen.value
- }, props.class],
- "style": props.style
- }, {
- default: () => [slots.activator && _createVNode(VDefaultsProvider, {
- "defaults": activatorDefaults.value
- }, {
- default: () => [_createVNode(VListGroupActivator, null, {
- default: () => [slots.activator({
- props: activatorProps.value,
- isOpen: isOpen.value
- })]
- })]
- }), _createVNode(MaybeTransition, {
- "transition": {
- component: VExpandTransition
- },
- "disabled": !isBooted.value
- }, {
- default: () => [_withDirectives(_createVNode("div", {
- "class": "v-list-group__items",
- "role": "group",
- "aria-labelledby": id.value
- }, [slots.default?.()]), [[_vShow, isOpen.value]])]
- })]
- }));
- return {};
- }
- });
- //# sourceMappingURL=VListGroup.mjs.map
|