import { withDirectives as _withDirectives, createVNode as _createVNode, vShow as _vShow } from "vue";
import "./styles/list-group.css";
import { computed } from "vue";
import { genericComponent } from "../../utils";
import { useNestedGroup } from "../../composables/nested";
import { makeTagProps } from "../../composables/tag";
import { ExpandTransition } from "../transition";
import { useList } from "./composables/list";
const ListGroup = genericComponent()({
  name: "VeListGroup",
  props: {
    /**
     * @zh 列表组收起时的图标
     */
    collapseIcon: {
      type: [String, Object],
      default: "$collapse"
    },
    /**
     * @zh 列表组展开时的图标
     */
    expandIcon: {
      type: [String, Object],
      default: "$expand"
    },
    /**
     * @zh 列表组的值
     */
    value: null,
    ...makeTagProps()
  },
  setup(props, {
    slots
  }) {
    const {
      isOpen,
      open
    } = useNestedGroup(props);
    const list = useList();
    const onClick = (e) => {
      open(!isOpen.value, e);
    };
    const activatorProps = computed(() => ({
      onClick,
      appendIcon: isOpen.value ? props.collapseIcon : props.expandIcon,
      class: "ve-list-group__header",
      value: props.value ? `${props.value}_header` : void 0
    }));
    return () => {
      return _createVNode(props.tag, {
        "class": ["ve-list-group", {
          "ve-list-group--prepend": list?.hasPrepend.value
        }]
      }, {
        default: () => [slots.activator?.({
          props: activatorProps.value
        }), _createVNode(ExpandTransition, null, {
          default: () => [_withDirectives(_createVNode("div", {
            "class": "ve-list-group__items"
          }, [slots.default?.()]), [[_vShow, isOpen.value]])]
        })]
      });
    };
  }
});
export {
  ListGroup
};
//# sourceMappingURL=list-group.mjs.map
