@oruga-ui/oruga-next/dist/esm/collapse.mjs

UI components for Vue.js and CSS framework agnostic

/*! Oruga v0.11.0 | MIT License | github.com/oruga-ui/oruga */
import { defineComponent, mergeModels, useModel, computed, createElementBlock, openBlock, normalizeClass, unref, createElementVNode, createVNode, withKeys, withModifiers, renderSlot, Transition, withCtx, withDirectives, vShow, useId } from "vue";
import { g as getDefault, b as registerComponent } from "./config-Dl7tu_Ly.mjs";
import { d as defineClasses } from "./defineClasses-CWB9NuS-.mjs";
const _hoisted_1 = ["id", "aria-controls", "aria-expanded", "onKeydown"];
const _hoisted_2 = ["id", "aria-labelledby"];
const _sfc_main = /* @__PURE__ */ defineComponent({
  ...{
    isOruga: true,
    name: "OCollapse",
    configField: "collapse"
  },
  __name: "Collapse",
  props: /* @__PURE__ */ mergeModels({
    override: { type: Boolean, default: void 0 },
    open: { type: Boolean, default: true },
    animation: { default: () => getDefault("collapse.animation", "fade") },
    position: { default: () => getDefault("collapse.position", "top") },
    expanded: { type: Boolean, default: false },
    contentId: { default: () => useId() },
    triggerId: { default: () => useId() },
    rootClass: {},
    expandedClass: {},
    positionClass: {},
    triggerClass: {},
    contentClass: {}
  }, {
    "open": { type: Boolean, ...{ default: true } },
    "openModifiers": {}
  }),
  emits: /* @__PURE__ */ mergeModels(["update:open", "open", "close"], ["update:open"]),
  setup(__props, { emit: __emit }) {
    const props = __props;
    const emits = __emit;
    const isOpen = useModel(__props, "open");
    function toggle() {
      isOpen.value = !isOpen.value;
      if (isOpen.value) emits("open");
      else emits("close");
    }
    const rootClasses = defineClasses(
      ["rootClass", "o-collapse"],
      [
        "positionClass",
        "o-collapse--",
        computed(() => props.position),
        computed(() => !!props.position)
      ]
    );
    const triggerClasses = defineClasses(
      ["triggerClass", "o-collapse__trigger"],
      [
        "expandedClass",
        "o-collapse__trigger--expanded",
        null,
        computed(() => props.expanded)
      ]
    );
    const contentClasses = defineClasses(["contentClass", "o-collapse__content"]);
    return (_ctx, _cache) => {
      return openBlock(), createElementBlock("div", {
        "data-oruga": "collapse",
        class: normalizeClass(unref(rootClasses))
      }, [
        createElementVNode("div", {
          id: _ctx.triggerId,
          class: normalizeClass(unref(triggerClasses)),
          role: "button",
          tabindex: "0",
          "aria-controls": _ctx.contentId,
          "aria-expanded": isOpen.value,
          onClick: toggle,
          onKeydown: [
            withKeys(withModifiers(toggle, ["prevent"]), ["enter"]),
            withKeys(withModifiers(toggle, ["prevent"]), ["space"])
          ]
        }, [
          renderSlot(_ctx.$slots, "trigger", { open: isOpen.value })
        ], 42, _hoisted_1),
        createVNode(Transition, { name: _ctx.animation }, {
          default: withCtx(() => [
            withDirectives(createElementVNode("div", {
              id: _ctx.contentId,
              class: normalizeClass(unref(contentClasses)),
              "aria-labelledby": _ctx.triggerId
            }, [
              renderSlot(_ctx.$slots, "default")
            ], 10, _hoisted_2), [
              [vShow, isOpen.value]
            ])
          ]),
          _: 3
        }, 8, ["name"])
      ], 2);
    };
  }
});
const index = {
  install(app) {
    registerComponent(app, _sfc_main);
  }
};
export {
  _sfc_main as OCollapse,
  index as default
};
//# sourceMappingURL=collapse.mjs.map