@oruga-ui/oruga-next/dist/cjs/collapse.cjs

UI components for Vue.js and CSS framework agnostic

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