epic-designer/dist/ui-kit/base-ui/src/collapse/collapse.vue3.js

基于vue3的设计器,可视化开发页面表单

import { defineComponent as m, ref as r, watch as v, provide as y, createElementBlock as A, openBlock as x, normalizeClass as E, renderSlot as g } from "vue";
import { COLLAPSE_CONTEXT_KEY as h } from "./collapseContext.js";
const C = /* @__PURE__ */ m({
  __name: "collapse",
  props: {
    accordion: { type: Boolean, default: !1 },
    bordered: { type: Boolean, default: !0 },
    customClass: { default: "" },
    defaultExpandAll: { type: Boolean, default: !1 },
    modelValue: { default: () => [] }
  },
  emits: ["change", "update:modelValue"],
  setup(d, { emit: s }) {
    const l = d, u = s, a = r(
      Array.isArray(l.modelValue) ? l.modelValue : l.modelValue ? [l.modelValue] : []
    );
    v(
      () => l.modelValue,
      (e) => {
        a.value = Array.isArray(e) ? e : e ? [e] : [];
      },
      { deep: !0 }
    );
    const n = (e) => {
      if (l.accordion)
        a.value = a.value[0] === e ? [] : [e];
      else {
        const c = a.value.indexOf(e);
        c === -1 ? a.value.push(e) : a.value.splice(c, 1);
      }
      const o = l.accordion ? a.value[0] || "" : [...a.value];
      u("update:modelValue", o), u("change", o);
    }, i = (e) => a.value.includes(e), t = r([]), p = (e) => {
      t.value.includes(e) || t.value.push(e);
    }, f = (e) => {
      const o = t.value.indexOf(e);
      o !== -1 && t.value.splice(o, 1);
    };
    return y(h, {
      accordion: l.accordion,
      activeKeys: a,
      bordered: l.bordered,
      defaultExpandAll: l.defaultExpandAll,
      isPanelActive: i,
      registerPanel: p,
      togglePanel: n,
      unregisterPanel: f
    }), (e, o) => (x(), A("div", {
      class: E(["ep-collapse", `ep-collapse--${d.accordion ? "accordion" : "default"}`])
    }, [
      g(e.$slots, "default", {}, void 0, !0)
    ], 2));
  }
});
export {
  C as default
};