epic-designer-cjh/dist/collapseItem-6911b18f.js

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

import { defineComponent as d, h as e, toRef as g, withDirectives as x, vShow as y, inject as I, computed as h, renderSlot as v } from "vue";
import { u as b, g as N } from "./use-rtl-d05cb593.js";
import { c as P } from "./Collapse-7efa8c5a.js";
import { u as R } from "./use-false-until-truthy-cceb153b.js";
import { N as S } from "./FadeInExpandTransition-596a1c51.js";
import { c as _ } from "./index-f636e660.js";
import { u as $ } from "./use-memo-01b53d71.js";
import { c8 as D } from "./index-97ce4605.js";
import { a as C, b as L } from "./resolve-slot-d8544b74.js";
import { N as E } from "./Icon-6fe59076.js";
import "./index-e2a664aa.js";
import "./fade-in-height-expand.cssr-52e7384f.js";
import "./use-merged-state-7348d957.js";
import "./light-76d75dc8.js";
import "./isArrayLikeObject-e5e231b4.js";
import "./_overRest-dc82ce77.js";
import "./index-4562f02c.js";
import "./use-style-b9e822e4.js";
const k = d({
  name: "ChevronLeft",
  render() {
    return e(
      "svg",
      { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
      e("path", { d: "M10.3536 3.14645C10.5488 3.34171 10.5488 3.65829 10.3536 3.85355L6.20711 8L10.3536 12.1464C10.5488 12.3417 10.5488 12.6583 10.3536 12.8536C10.1583 13.0488 9.84171 13.0488 9.64645 12.8536L5.14645 8.35355C4.95118 8.15829 4.95118 7.84171 5.14645 7.64645L9.64645 3.14645C9.84171 2.95118 10.1583 2.95118 10.3536 3.14645Z", fill: "currentColor" })
    );
  }
}), T = d({
  name: "ChevronRight",
  render() {
    return e(
      "svg",
      { viewBox: "0 0 16 16", fill: "none", xmlns: "http://www.w3.org/2000/svg" },
      e("path", { d: "M5.64645 3.14645C5.45118 3.34171 5.45118 3.65829 5.64645 3.85355L9.79289 8L5.64645 12.1464C5.45118 12.3417 5.45118 12.6583 5.64645 12.8536C5.84171 13.0488 6.15829 13.0488 6.35355 12.8536L10.8536 8.35355C11.0488 8.15829 11.0488 7.84171 10.8536 7.64645L6.35355 3.14645C6.15829 2.95118 5.84171 2.95118 5.64645 3.14645Z", fill: "currentColor" })
    );
  }
}), B = d({
  name: "CollapseItemContent",
  props: {
    displayDirective: {
      type: String,
      required: !0
    },
    show: Boolean,
    clsPrefix: {
      type: String,
      required: !0
    }
  },
  setup(r) {
    return {
      onceTrue: R(g(r, "show"))
    };
  },
  render() {
    return e(S, null, {
      default: () => {
        const { show: r, displayDirective: s, onceTrue: a, clsPrefix: l } = this, n = s === "show" && a, t = e(
          "div",
          { class: `${l}-collapse-item__content-wrapper` },
          e("div", { class: `${l}-collapse-item__content-inner` }, this.$slots)
        );
        return n ? x(t, [[y, r]]) : r ? t : null;
      }
    });
  }
}), j = {
  title: String,
  name: [String, Number],
  disabled: Boolean,
  displayDirective: String
}, q = d({
  name: "CollapseItem",
  props: j,
  setup(r) {
    const { mergedRtlRef: s } = b(r), a = _(), l = $(() => {
      var o;
      return (o = r.name) !== null && o !== void 0 ? o : a;
    }), n = I(P);
    n || D("collapse-item", "`n-collapse-item` must be placed inside `n-collapse`.");
    const { expandedNamesRef: t, props: p, mergedClsPrefixRef: c, slots: u } = n, m = h(() => {
      const { value: o } = t;
      if (Array.isArray(o)) {
        const { value: f } = l;
        return !~o.findIndex((w) => w === f);
      } else if (o) {
        const { value: f } = l;
        return f !== o;
      }
      return !0;
    });
    return {
      rtlEnabled: N("Collapse", s, c),
      collapseSlots: u,
      randomName: a,
      mergedClsPrefix: c,
      collapsed: m,
      mergedDisplayDirective: h(() => {
        const { displayDirective: o } = r;
        return o || p.displayDirective;
      }),
      arrowPlacement: h(() => p.arrowPlacement),
      handleClick(o) {
        n && !r.disabled && n.toggleItem(m.value, l.value, o);
      }
    };
  },
  render() {
    const { collapseSlots: r, $slots: s, arrowPlacement: a, collapsed: l, mergedDisplayDirective: n, mergedClsPrefix: t, disabled: p } = this, c = C(s.header, { collapsed: l }, () => [this.title]), u = s["header-extra"] || r["header-extra"], m = s.arrow || r.arrow;
    return e(
      "div",
      { class: [
        `${t}-collapse-item`,
        `${t}-collapse-item--${a}-arrow-placement`,
        p && `${t}-collapse-item--disabled`,
        !l && `${t}-collapse-item--active`
      ] },
      e(
        "div",
        { class: [
          `${t}-collapse-item__header`,
          !l && `${t}-collapse-item__header--active`
        ] },
        e(
          "div",
          { class: `${t}-collapse-item__header-main`, onClick: this.handleClick },
          a === "right" && c,
          e("div", { class: `${t}-collapse-item-arrow`, key: this.rtlEnabled ? 0 : 1 }, C(m, { collapsed: l }, () => {
            var i;
            return [
              e(E, { clsPrefix: t }, {
                default: (i = r.expandIcon) !== null && i !== void 0 ? i : () => this.rtlEnabled ? e(k, null) : e(T, null)
              })
            ];
          })),
          a === "left" && c
        ),
        L(u, { collapsed: l }, (i) => e("div", { class: `${t}-collapse-item__header-extra`, onClick: this.handleClick }, i))
      ),
      e(B, { clsPrefix: t, displayDirective: n, show: !l }, s)
    );
  }
}), te = d({
  props: {
    record: {
      type: Object,
      require: !0,
      default: () => ({})
    }
  },
  setup(r, { slots: s }) {
    return () => {
      const a = {
        ...r.record,
        title: r.record.label ?? ""
      }, l = a.children ?? [];
      return delete a.children, e(q, a, {
        default: () => v(
          s,
          "edit-node",
          {},
          () => l.map((n) => v(s, "node", { record: n }))
        )
      });
    };
  }
});
export {
  te as default
};