import { computed, createVNode, withDirectives, vShow } from "vue";
import "./styles/list-group.scss";
import { useNestedGroup } from "../../composables/nested/index.mjs";
import { makeTagProps } from "../../composables/tag/index.mjs";
import { useList } from "./composables/list.mjs";
import { ExpandTransition } from "../transition/expand-transition.mjs";
import { genericComponent } from "../../utils/define-component.mjs";
const ListGroup = genericComponent()({
  name: "VeListGroup",
  props: {
    collapseIcon: {
      type: [String, Object],
      default: "$collapse"
    },
    expandIcon: {
      type: [String, Object],
      default: "$expand"
    },
    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 == null ? void 0 : list.hasPrepend.value
        }]
      }, {
        default: () => {
          var _a;
          return [(_a = slots.activator) == null ? void 0 : _a.call(slots, {
            props: activatorProps.value
          }), createVNode(ExpandTransition, null, {
            default: () => {
              var _a2;
              return [withDirectives(createVNode("div", {
                "class": "ve-list-group__items"
              }, [(_a2 = slots.default) == null ? void 0 : _a2.call(slots)]), [[vShow, isOpen.value]])];
            }
          })];
        }
      });
    };
  }
});
export {
  ListGroup
};
//# sourceMappingURL=list-group.mjs.map
