epic-designer-gold/dist/index-B72l3XQl.js

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

import { c as _ } from "./_commonjsHelpers-BVfed4GL.js";
import { r as F } from "./_vue_commonjs-external-NwvjgbHK.js";
import { c as J, a as L, d as se, e as H, b as Q, _ as X, p as Y, r as ce } from "./index-D1ZL6feZ.js";
import { _ as Z, i as de } from "./index-gA02bxwJ.js";
function pe(e, a) {
  for (var t = 0; t < a.length; t++) {
    const n = a[t];
    if (typeof n != "string" && !Array.isArray(n)) {
      for (const l in n)
        if (l !== "default" && !(l in e)) {
          const s = Object.getOwnPropertyDescriptor(n, l);
          s && Object.defineProperty(e, l, s.get ? s : {
            enumerable: !0,
            get: () => n[l]
          });
        }
    }
  }
  return Object.freeze(Object.defineProperty(e, Symbol.toStringTag, { value: "Module" }));
}
var ee = {}, U = {}, te = {}, W = {}, D = {};
Object.defineProperty(D, "__esModule", { value: !0 });
D.self = re;
const ue = J;
function re(e) {
  const { fontWeight: a, textColor1: t, textColor2: n, textColorDisabled: l, dividerColor: s, fontSize: C } = e;
  return {
    titleFontSize: C,
    titleFontWeight: a,
    dividerColor: s,
    titleTextColor: t,
    titleTextColorDisabled: l,
    fontSize: C,
    textColor: n,
    arrowColor: n,
    arrowColorDisabled: l,
    itemMargin: "16px 0 0 0",
    titlePadding: "16px 0 0 0"
  };
}
const fe = {
  name: "Collapse",
  common: ue.commonLight,
  self: re
};
D.default = fe;
Object.defineProperty(W, "__esModule", { value: !0 });
const me = J, he = D, _e = {
  name: "Collapse",
  common: me.commonDark,
  self: he.self
};
W.default = _e;
var k = {}, q = {};
Object.defineProperty(q, "__esModule", {
  value: !0
});
const f = L;
q.default = (0, f.cB)("collapse", [(0, f.cM)("rtl", `
 direction: rtl;
 `, [(0, f.cB)("collapse-item", [(0, f.cB)("collapse-item", {
  marginRight: "32px",
  marginLeft: 0
}), (0, f.cM)("left-arrow-placement", [(0, f.cE)("header", [(0, f.cB)("collapse-item-arrow", {
  marginRight: 0,
  marginLeft: "4px"
})])]), (0, f.cM)("right-arrow-placement", [(0, f.cE)("header", [(0, f.cB)("collapse-item-arrow", {
  marginLeft: 0,
  marginRight: "4px"
})])]), (0, f.cM)("active", [(0, f.cE)("header", [(0, f.cM)("active", [(0, f.cB)("collapse-item-arrow", {
  transform: "rotate(-90deg)"
})])])])])])]);
var ge = _ && _.__importDefault || function(e) {
  return e && e.__esModule ? e : { default: e };
};
Object.defineProperty(k, "__esModule", { value: !0 });
k.collapseRtl = void 0;
const ve = ge(q);
k.collapseRtl = {
  name: "Collapse",
  style: ve.default
};
(function(e) {
  var a = _ && _.__importDefault || function(s) {
    return s && s.__esModule ? s : { default: s };
  };
  Object.defineProperty(e, "__esModule", { value: !0 }), e.collapseRtl = e.collapseLight = e.collapseDark = void 0;
  var t = W;
  Object.defineProperty(e, "collapseDark", { enumerable: !0, get: function() {
    return a(t).default;
  } });
  var n = D;
  Object.defineProperty(e, "collapseLight", { enumerable: !0, get: function() {
    return a(n).default;
  } });
  var l = k;
  Object.defineProperty(e, "collapseRtl", { enumerable: !0, get: function() {
    return l.collapseRtl;
  } });
})(te);
var K = {}, V = {}, be = _ && _.__importDefault || function(e) {
  return e && e.__esModule ? e : {
    default: e
  };
};
Object.defineProperty(V, "__esModule", {
  value: !0
});
V.fadeInHeightExpandTransition = ye;
const z = L, xe = be(se), {
  cubicBezierEaseInOut: b,
  cubicBezierEaseOut: $e,
  cubicBezierEaseIn: Ce
} = xe.default;
function ye({
  overflow: e = "hidden",
  duration: a = ".3s",
  originalTransition: t = "",
  leavingDelay: n = "0s",
  foldPadding: l = !1,
  enterToProps: s = void 0,
  leaveToProps: C = void 0,
  reverse: I = !1
} = {}) {
  const w = I ? "leave" : "enter", i = I ? "enter" : "leave";
  return [(0, z.c)(`&.fade-in-height-expand-transition-${i}-from,
 &.fade-in-height-expand-transition-${w}-to`, Object.assign(Object.assign({}, s), {
    opacity: 1
  })), (0, z.c)(`&.fade-in-height-expand-transition-${i}-to,
 &.fade-in-height-expand-transition-${w}-from`, Object.assign(Object.assign({}, C), {
    opacity: 0,
    marginTop: "0 !important",
    marginBottom: "0 !important",
    paddingTop: l ? "0 !important" : void 0,
    paddingBottom: l ? "0 !important" : void 0
  })), (0, z.c)(`&.fade-in-height-expand-transition-${i}-active`, `
 overflow: ${e};
 transition:
 max-height ${a} ${b} ${n},
 opacity ${a} ${$e} ${n},
 margin-top ${a} ${b} ${n},
 margin-bottom ${a} ${b} ${n},
 padding-top ${a} ${b} ${n},
 padding-bottom ${a} ${b} ${n}
 ${t ? `,${t}` : ""}
 `), (0, z.c)(`&.fade-in-height-expand-transition-${w}-active`, `
 overflow: ${e};
 transition:
 max-height ${a} ${b},
 opacity ${a} ${Ce},
 margin-top ${a} ${b},
 margin-bottom ${a} ${b},
 padding-top ${a} ${b},
 padding-bottom ${a} ${b}
 ${t ? `,${t}` : ""}
 `)];
}
Object.defineProperty(K, "__esModule", {
  value: !0
});
const r = L, we = V;
K.default = (0, r.cB)("collapse", "width: 100%;", [(0, r.cB)("collapse-item", `
 font-size: var(--n-font-size);
 color: var(--n-text-color);
 transition:
 color .3s var(--n-bezier),
 border-color .3s var(--n-bezier);
 margin: var(--n-item-margin);
 `, [(0, r.cM)("disabled", [(0, r.cE)("header", "cursor: not-allowed;", [(0, r.cE)("header-main", `
 color: var(--n-title-text-color-disabled);
 `), (0, r.cB)("collapse-item-arrow", `
 color: var(--n-arrow-color-disabled);
 `)])]), (0, r.cB)("collapse-item", "margin-left: 32px;"), (0, r.c)("&:first-child", "margin-top: 0;"), (0, r.c)("&:first-child >", [(0, r.cE)("header", "padding-top: 0;")]), (0, r.cM)("left-arrow-placement", [(0, r.cE)("header", [(0, r.cB)("collapse-item-arrow", "margin-right: 4px;")])]), (0, r.cM)("right-arrow-placement", [(0, r.cE)("header", [(0, r.cB)("collapse-item-arrow", "margin-left: 4px;")])]), (0, r.cE)("content-wrapper", [(0, r.cE)("content-inner", "padding-top: 16px;"), (0, we.fadeInHeightExpandTransition)({
  duration: "0.15s"
})]), (0, r.cM)("active", [(0, r.cE)("header", [(0, r.cM)("active", [(0, r.cB)("collapse-item-arrow", "transform: rotate(90deg);")])])]), (0, r.c)("&:not(:first-child)", "border-top: 1px solid var(--n-divider-color);"), (0, r.cNotM)("disabled", [(0, r.cM)("trigger-area-main", [(0, r.cE)("header", [(0, r.cE)("header-main", "cursor: pointer;"), (0, r.cB)("collapse-item-arrow", "cursor: default;")])]), (0, r.cM)("trigger-area-arrow", [(0, r.cE)("header", [(0, r.cB)("collapse-item-arrow", "cursor: pointer;")])]), (0, r.cM)("trigger-area-extra", [(0, r.cE)("header", [(0, r.cE)("header-extra", "cursor: pointer;")])])]), (0, r.cE)("header", `
 font-size: var(--n-title-font-size);
 display: flex;
 flex-wrap: nowrap;
 align-items: center;
 transition: color .3s var(--n-bezier);
 position: relative;
 padding: var(--n-title-padding);
 color: var(--n-title-text-color);
 `, [(0, r.cE)("header-main", `
 display: flex;
 flex-wrap: nowrap;
 align-items: center;
 font-weight: var(--n-title-font-weight);
 transition: color .3s var(--n-bezier);
 flex: 1;
 color: var(--n-title-text-color);
 `), (0, r.cE)("header-extra", `
 display: flex;
 align-items: center;
 transition: color .3s var(--n-bezier);
 color: var(--n-text-color);
 `), (0, r.cB)("collapse-item-arrow", `
 display: flex;
 transition:
 transform .15s var(--n-bezier),
 color .3s var(--n-bezier);
 font-size: 18px;
 color: var(--n-arrow-color);
 `)])])]);
(function(e) {
  var a = _ && _.__importDefault || function(i) {
    return i && i.__esModule ? i : { default: i };
  };
  Object.defineProperty(e, "__esModule", { value: !0 }), e.collapseInjectionKey = e.collapseProps = void 0;
  const t = F, n = H, l = Q, s = X, C = te, I = Y, w = a(K);
  e.collapseProps = Object.assign(Object.assign({}, l.useTheme.props), {
    defaultExpandedNames: {
      type: [Array, String],
      default: null
    },
    expandedNames: [Array, String],
    arrowPlacement: {
      type: String,
      default: "left"
    },
    accordion: {
      type: Boolean,
      default: !1
    },
    displayDirective: {
      type: String,
      default: "if"
    },
    triggerAreas: {
      type: Array,
      default: () => ["main", "extra", "arrow"]
    },
    onItemHeaderClick: [Function, Array],
    "onUpdate:expandedNames": [Function, Array],
    onUpdateExpandedNames: [Function, Array],
    // deprecated
    onExpandedNamesChange: {
      type: [Function, Array],
      validator: () => (process.env.NODE_ENV !== "production" && (0, s.warn)("collapse", "`on-expanded-names-change` is deprecated, please use `on-update:expanded-names` instead."), !0),
      default: void 0
    }
  }), e.collapseInjectionKey = (0, s.createInjectionKey)("n-collapse"), e.default = (0, t.defineComponent)({
    name: "Collapse",
    props: e.collapseProps,
    setup(i, { slots: A }) {
      const { mergedClsPrefixRef: R, inlineThemeDisabled: u, mergedRtlRef: y } = (0, l.useConfig)(i), x = (0, t.ref)(i.defaultExpandedNames), m = (0, t.computed)(() => i.expandedNames), $ = (0, n.useMergedState)(m, x), p = (0, l.useTheme)("Collapse", "-collapse", w.default, C.collapseLight, i, R);
      function h(d) {
        const { "onUpdate:expandedNames": c, onUpdateExpandedNames: v, onExpandedNamesChange: j } = i;
        v && (0, s.call)(v, d), c && (0, s.call)(c, d), j && (0, s.call)(j, d), x.value = d;
      }
      function g(d) {
        const { onItemHeaderClick: c } = i;
        c && (0, s.call)(c, d);
      }
      function M(d, c, v) {
        const { accordion: j } = i, { value: B } = $;
        if (j)
          d ? (h([c]), g({ name: c, expanded: !0, event: v })) : (h([]), g({ name: c, expanded: !1, event: v }));
        else if (!Array.isArray(B))
          h([c]), g({ name: c, expanded: !0, event: v });
        else {
          const P = B.slice(), S = P.findIndex((T) => c === T);
          ~S ? (P.splice(S, 1), h(P), g({ name: c, expanded: !1, event: v })) : (P.push(c), h(P), g({ name: c, expanded: !0, event: v }));
        }
      }
      (0, t.provide)(e.collapseInjectionKey, {
        props: i,
        mergedClsPrefixRef: R,
        expandedNamesRef: $,
        slots: A,
        toggleItem: M
      });
      const N = (0, I.useRtl)("Collapse", y, R), O = (0, t.computed)(() => {
        const { common: { cubicBezierEaseInOut: d }, self: { titleFontWeight: c, dividerColor: v, titlePadding: j, titleTextColor: B, titleTextColorDisabled: P, textColor: S, arrowColor: T, fontSize: oe, titleFontSize: ne, arrowColorDisabled: le, itemMargin: ie } } = p.value;
        return {
          "--n-font-size": oe,
          "--n-bezier": d,
          "--n-text-color": S,
          "--n-divider-color": v,
          "--n-title-padding": j,
          "--n-title-font-size": ne,
          "--n-title-text-color": B,
          "--n-title-text-color-disabled": P,
          "--n-title-font-weight": c,
          "--n-arrow-color": T,
          "--n-arrow-color-disabled": le,
          "--n-item-margin": ie
        };
      }), o = u ? (0, l.useThemeClass)("collapse", void 0, O, i) : void 0;
      return {
        rtlEnabled: N,
        mergedTheme: p,
        mergedClsPrefix: R,
        cssVars: u ? void 0 : O,
        themeClass: o == null ? void 0 : o.themeClass,
        onRender: o == null ? void 0 : o.onRender
      };
    },
    render() {
      var i;
      return (i = this.onRender) === null || i === void 0 || i.call(this), (0, t.h)("div", { class: [
        `${this.mergedClsPrefix}-collapse`,
        this.rtlEnabled && `${this.mergedClsPrefix}-collapse--rtl`,
        this.themeClass
      ], style: this.cssVars }, this.$slots);
    }
  });
})(U);
var ae = {}, G = {};
Object.defineProperty(G, "__esModule", { value: !0 });
const E = F, Pe = H, Ee = Z;
G.default = (0, E.defineComponent)({
  name: "CollapseItemContent",
  props: {
    displayDirective: {
      type: String,
      required: !0
    },
    show: Boolean,
    clsPrefix: {
      type: String,
      required: !0
    }
  },
  setup(e) {
    return {
      onceTrue: (0, Pe.useFalseUntilTruthy)((0, E.toRef)(e, "show"))
    };
  },
  render() {
    return (0, E.h)(Ee.NFadeInExpandTransition, null, {
      default: () => {
        const { show: e, displayDirective: a, onceTrue: t, clsPrefix: n } = this, l = a === "show" && t, s = (0, E.h)(
          "div",
          { class: `${n}-collapse-item__content-wrapper` },
          (0, E.h)("div", { class: `${n}-collapse-item__content-inner` }, this.$slots)
        );
        return l ? (0, E.withDirectives)(s, [[E.vShow, e]]) : e ? s : null;
      }
    });
  }
});
(function(e) {
  var a = _ && _.__importDefault || function(u) {
    return u && u.__esModule ? u : { default: u };
  };
  Object.defineProperty(e, "__esModule", { value: !0 }), e.collapseItemProps = void 0;
  const t = F, n = ce, l = H, s = de, C = Y, I = Q, w = Z, i = X, A = U, R = a(G);
  e.collapseItemProps = {
    title: String,
    name: [String, Number],
    disabled: Boolean,
    displayDirective: String
  }, e.default = (0, t.defineComponent)({
    name: "CollapseItem",
    props: e.collapseItemProps,
    setup(u) {
      const { mergedRtlRef: y } = (0, I.useConfig)(u), x = (0, n.createId)(), m = (0, l.useMemo)(() => {
        var o;
        return (o = u.name) !== null && o !== void 0 ? o : x;
      }), $ = (0, t.inject)(A.collapseInjectionKey);
      $ || (0, i.throwError)("collapse-item", "`n-collapse-item` must be placed inside `n-collapse`.");
      const { expandedNamesRef: p, props: h, mergedClsPrefixRef: g, slots: M } = $, N = (0, t.computed)(() => {
        const { value: o } = p;
        if (Array.isArray(o)) {
          const { value: d } = m;
          return !~o.findIndex((c) => c === d);
        } else if (o) {
          const { value: d } = m;
          return d !== o;
        }
        return !0;
      });
      return {
        rtlEnabled: (0, C.useRtl)("Collapse", y, g),
        collapseSlots: M,
        randomName: x,
        mergedClsPrefix: g,
        collapsed: N,
        triggerAreas: (0, t.toRef)(h, "triggerAreas"),
        mergedDisplayDirective: (0, t.computed)(() => {
          const { displayDirective: o } = u;
          return o || h.displayDirective;
        }),
        arrowPlacement: (0, t.computed)(() => h.arrowPlacement),
        handleClick(o) {
          let d = "main";
          (0, n.happensIn)(o, "arrow") && (d = "arrow"), (0, n.happensIn)(o, "extra") && (d = "extra"), h.triggerAreas.includes(d) && $ && !u.disabled && $.toggleItem(N.value, m.value, o);
        }
      };
    },
    render() {
      const { collapseSlots: u, $slots: y, arrowPlacement: x, collapsed: m, mergedDisplayDirective: $, mergedClsPrefix: p, disabled: h, triggerAreas: g } = this, M = (0, i.resolveSlotWithProps)(y.header, { collapsed: m }, () => [this.title]), N = y["header-extra"] || u["header-extra"], O = y.arrow || u.arrow;
      return (0, t.h)(
        "div",
        { class: [
          `${p}-collapse-item`,
          `${p}-collapse-item--${x}-arrow-placement`,
          h && `${p}-collapse-item--disabled`,
          !m && `${p}-collapse-item--active`,
          g.map((o) => `${p}-collapse-item--trigger-area-${o}`)
        ] },
        (0, t.h)(
          "div",
          { class: [
            `${p}-collapse-item__header`,
            !m && `${p}-collapse-item__header--active`
          ] },
          (0, t.h)(
            "div",
            { class: `${p}-collapse-item__header-main`, onClick: this.handleClick },
            x === "right" && M,
            (0, t.h)("div", { class: `${p}-collapse-item-arrow`, key: this.rtlEnabled ? 0 : 1, "data-arrow": !0 }, (0, i.resolveSlotWithProps)(O, { collapsed: m }, () => {
              var o;
              return [
                (0, t.h)(w.NBaseIcon, { clsPrefix: p }, {
                  default: (o = u.expandIcon) !== null && o !== void 0 ? o : () => this.rtlEnabled ? (0, t.h)(s.ChevronLeftIcon, null) : (0, t.h)(s.ChevronRightIcon, null)
                })
              ];
            })),
            x === "left" && M
          ),
          (0, i.resolveWrappedSlotWithProps)(N, { collapsed: m }, (o) => (0, t.h)("div", { class: `${p}-collapse-item__header-extra`, onClick: this.handleClick, "data-extra": !0 }, o))
        ),
        (0, t.h)(R.default, { clsPrefix: p, displayDirective: $, show: !m }, y)
      );
    }
  });
})(ae);
(function(e) {
  var a = _ && _.__importDefault || function(l) {
    return l && l.__esModule ? l : { default: l };
  };
  Object.defineProperty(e, "__esModule", { value: !0 }), e.collapseItemProps = e.NCollapseItem = e.collapseProps = e.NCollapse = void 0;
  var t = U;
  Object.defineProperty(e, "NCollapse", { enumerable: !0, get: function() {
    return a(t).default;
  } }), Object.defineProperty(e, "collapseProps", { enumerable: !0, get: function() {
    return t.collapseProps;
  } });
  var n = ae;
  Object.defineProperty(e, "NCollapseItem", { enumerable: !0, get: function() {
    return a(n).default;
  } }), Object.defineProperty(e, "collapseItemProps", { enumerable: !0, get: function() {
    return n.collapseItemProps;
  } });
})(ee);
const je = /* @__PURE__ */ pe({
  __proto__: null
}, [ee]);
export {
  je as i
};