epic-designer-gold/dist/index-42DsvWh3.js

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

import { c as u } from "./_commonjsHelpers-BVfed4GL.js";
import { b as I, f as T, c as ve, a as ge, d as pe, e as me } from "./index-B2_JTx7E.js";
import { r as _e } from "./_vue_commonjs-external-NwvjgbHK.js";
import { i as we, _ as ye } from "./index-kOCEDlqX.js";
function xe(o, s) {
  for (var a = 0; a < s.length; a++) {
    const i = s[a];
    if (typeof i != "string" && !Array.isArray(i)) {
      for (const r in i)
        if (r !== "default" && !(r in o)) {
          const h = Object.getOwnPropertyDescriptor(i, r);
          h && Object.defineProperty(o, r, h.get ? h : {
            enumerable: !0,
            get: () => i[r]
          });
        }
    }
  }
  return Object.freeze(Object.defineProperty(o, Symbol.toStringTag, { value: "Module" }));
}
var X = {}, Y = {}, G = {}, N = {}, D = {};
Object.defineProperty(D, "__esModule", { value: !0 });
D.default = {
  buttonHeightSmall: "14px",
  buttonHeightMedium: "18px",
  buttonHeightLarge: "22px",
  buttonWidthSmall: "14px",
  buttonWidthMedium: "18px",
  buttonWidthLarge: "22px",
  buttonWidthPressedSmall: "20px",
  buttonWidthPressedMedium: "24px",
  buttonWidthPressedLarge: "28px",
  railHeightSmall: "18px",
  railHeightMedium: "22px",
  railHeightLarge: "26px",
  railWidthSmall: "32px",
  railWidthMedium: "40px",
  railWidthLarge: "48px"
};
var Se = u && u.__importDefault || function(o) {
  return o && o.__esModule ? o : { default: o };
};
Object.defineProperty(N, "__esModule", { value: !0 });
const ke = T, Ce = I, Be = Se(D), Re = {
  name: "Switch",
  common: Ce.commonDark,
  self(o) {
    const { primaryColorSuppl: s, opacityDisabled: a, borderRadius: i, primaryColor: r, textColor2: h, baseColor: p } = o;
    return Object.assign(Object.assign({}, Be.default), { iconColor: p, textColor: h, loadingColor: s, opacityDisabled: a, railColor: "rgba(255, 255, 255, .20)", railColorActive: s, buttonBoxShadow: "0px 2px 4px 0 rgba(0, 0, 0, 0.4)", buttonColor: "#FFF", railBorderRadiusSmall: i, railBorderRadiusMedium: i, railBorderRadiusLarge: i, buttonBorderRadiusSmall: i, buttonBorderRadiusMedium: i, buttonBorderRadiusLarge: i, boxShadowFocus: `0 0 8px 0 ${(0, ke.changeColor)(r, { alpha: 0.3 })}` });
  }
};
N.default = Re;
var H = {}, Me = u && u.__importDefault || function(o) {
  return o && o.__esModule ? o : { default: o };
};
Object.defineProperty(H, "__esModule", { value: !0 });
const Ee = T, Oe = I, Pe = Me(D);
function je(o) {
  const { primaryColor: s, opacityDisabled: a, borderRadius: i, textColor3: r } = o;
  return Object.assign(Object.assign({}, Pe.default), { iconColor: r, textColor: "white", loadingColor: s, opacityDisabled: a, railColor: "rgba(0, 0, 0, .14)", railColorActive: s, buttonBoxShadow: "0 1px 4px 0 rgba(0, 0, 0, 0.3), inset 0 0 1px 0 rgba(0, 0, 0, 0.05)", buttonColor: "#FFF", railBorderRadiusSmall: i, railBorderRadiusMedium: i, railBorderRadiusLarge: i, buttonBorderRadiusSmall: i, buttonBorderRadiusMedium: i, buttonBorderRadiusLarge: i, boxShadowFocus: `0 0 0 2px ${(0, Ee.changeColor)(s, { alpha: 0.2 })}` });
}
const $e = {
  name: "Switch",
  common: Oe.commonLight,
  self: je
};
H.default = $e;
(function(o) {
  var s = u && u.__importDefault || function(r) {
    return r && r.__esModule ? r : { default: r };
  };
  Object.defineProperty(o, "__esModule", { value: !0 }), o.switchLight = o.switchDark = void 0;
  var a = N;
  Object.defineProperty(o, "switchDark", { enumerable: !0, get: function() {
    return s(a).default;
  } });
  var i = H;
  Object.defineProperty(o, "switchLight", { enumerable: !0, get: function() {
    return s(i).default;
  } });
})(G);
var A = {};
Object.defineProperty(A, "__esModule", {
  value: !0
});
const q = we, t = ve;
A.default = (0, t.cB)("switch", `
 height: var(--n-height);
 min-width: var(--n-width);
 vertical-align: middle;
 user-select: none;
 -webkit-user-select: none;
 display: inline-flex;
 outline: none;
 justify-content: center;
 align-items: center;
`, [(0, t.cE)("children-placeholder", `
 height: var(--n-rail-height);
 display: flex;
 flex-direction: column;
 overflow: hidden;
 pointer-events: none;
 visibility: hidden;
 `), (0, t.cE)("rail-placeholder", `
 display: flex;
 flex-wrap: none;
 `), (0, t.cE)("button-placeholder", `
 width: calc(1.75 * var(--n-rail-height));
 height: var(--n-rail-height);
 `), (0, t.cB)("base-loading", `
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translateX(-50%) translateY(-50%);
 font-size: calc(var(--n-button-width) - 4px);
 color: var(--n-loading-color);
 transition: color .3s var(--n-bezier);
 `, [(0, q.iconSwitchTransition)({
  left: "50%",
  top: "50%",
  originalTransform: "translateX(-50%) translateY(-50%)"
})]), (0, t.cE)("checked, unchecked", `
 transition: color .3s var(--n-bezier);
 color: var(--n-text-color);
 box-sizing: border-box;
 position: absolute;
 white-space: nowrap;
 top: 0;
 bottom: 0;
 display: flex;
 align-items: center;
 line-height: 1;
 `), (0, t.cE)("checked", `
 right: 0;
 padding-right: calc(1.25 * var(--n-rail-height) - var(--n-offset));
 `), (0, t.cE)("unchecked", `
 left: 0;
 justify-content: flex-end;
 padding-left: calc(1.25 * var(--n-rail-height) - var(--n-offset));
 `), (0, t.c)("&:focus", [(0, t.cE)("rail", `
 box-shadow: var(--n-box-shadow-focus);
 `)]), (0, t.cM)("round", [(0, t.cE)("rail", "border-radius: calc(var(--n-rail-height) / 2);", [(0, t.cE)("button", "border-radius: calc(var(--n-button-height) / 2);")])]), (0, t.cNotM)("disabled", [(0, t.cNotM)("icon", [(0, t.cM)("rubber-band", [(0, t.cM)("pressed", [(0, t.cE)("rail", [(0, t.cE)("button", "max-width: var(--n-button-width-pressed);")])]), (0, t.cE)("rail", [(0, t.c)("&:active", [(0, t.cE)("button", "max-width: var(--n-button-width-pressed);")])]), (0, t.cM)("active", [(0, t.cM)("pressed", [(0, t.cE)("rail", [(0, t.cE)("button", "left: calc(100% - var(--n-offset) - var(--n-button-width-pressed));")])]), (0, t.cE)("rail", [(0, t.c)("&:active", [(0, t.cE)("button", "left: calc(100% - var(--n-offset) - var(--n-button-width-pressed));")])])])])])]), (0, t.cM)("active", [(0, t.cE)("rail", [(0, t.cE)("button", "left: calc(100% - var(--n-button-width) - var(--n-offset))")])]), (0, t.cE)("rail", `
 overflow: hidden;
 height: var(--n-rail-height);
 min-width: var(--n-rail-width);
 border-radius: var(--n-rail-border-radius);
 cursor: pointer;
 position: relative;
 transition:
 opacity .3s var(--n-bezier),
 background .3s var(--n-bezier),
 box-shadow .3s var(--n-bezier);
 background-color: var(--n-rail-color);
 `, [(0, t.cE)("button-icon", `
 color: var(--n-icon-color);
 transition: color .3s var(--n-bezier);
 font-size: calc(var(--n-button-height) - 4px);
 position: absolute;
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 display: flex;
 justify-content: center;
 align-items: center;
 line-height: 1;
 `, [(0, q.iconSwitchTransition)()]), (0, t.cE)("button", `
 align-items: center; 
 top: var(--n-offset);
 left: var(--n-offset);
 height: var(--n-button-height);
 width: var(--n-button-width-pressed);
 max-width: var(--n-button-width);
 border-radius: var(--n-button-border-radius);
 background-color: var(--n-button-color);
 box-shadow: var(--n-button-box-shadow);
 box-sizing: border-box;
 cursor: inherit;
 content: "";
 position: absolute;
 transition:
 background-color .3s var(--n-bezier),
 left .3s var(--n-bezier),
 opacity .3s var(--n-bezier),
 max-width .3s var(--n-bezier),
 box-shadow .3s var(--n-bezier);
 `)]), (0, t.cM)("active", [(0, t.cE)("rail", "background-color: var(--n-rail-color-active);")]), (0, t.cM)("loading", [(0, t.cE)("rail", `
 cursor: wait;
 `)]), (0, t.cM)("disabled", [(0, t.cE)("rail", `
 cursor: not-allowed;
 opacity: .5;
 `)])]);
(function(o) {
  var s = u && u.__importDefault || function(e) {
    return e && e.__esModule ? e : { default: e };
  };
  Object.defineProperty(o, "__esModule", { value: !0 }), o.switchProps = void 0;
  const a = T, i = me, r = _e, h = ye, p = ge, l = pe, J = G, Q = s(A);
  o.switchProps = Object.assign(Object.assign({}, p.useTheme.props), {
    size: String,
    value: {
      type: [String, Number, Boolean],
      default: void 0
    },
    loading: Boolean,
    defaultValue: {
      type: [String, Number, Boolean],
      default: !1
    },
    disabled: {
      type: Boolean,
      default: void 0
    },
    round: {
      type: Boolean,
      default: !0
    },
    "onUpdate:value": [Function, Array],
    onUpdateValue: [Function, Array],
    checkedValue: {
      type: [String, Number, Boolean],
      default: !0
    },
    uncheckedValue: {
      type: [String, Number, Boolean],
      default: !1
    },
    railStyle: Function,
    rubberBand: {
      type: Boolean,
      default: !0
    },
    spinProps: Object,
    /** @deprecated */
    onChange: [Function, Array]
  });
  let S;
  o.default = (0, r.defineComponent)({
    name: "Switch",
    props: o.switchProps,
    slots: Object,
    setup(e) {
      process.env.NODE_ENV !== "production" && (0, r.watchEffect)(() => {
        e.onChange && (0, l.warnOnce)("switch", "`on-change` is deprecated, please use `on-update:value` instead.");
      }), S === void 0 && (typeof CSS < "u" ? typeof CSS.supports < "u" ? S = CSS.supports("width", "max(1px)") : S = !1 : S = !0);
      const { mergedClsPrefixRef: P, inlineThemeDisabled: k, mergedComponentPropsRef: C } = (0, p.useConfig)(e), B = (0, p.useTheme)("Switch", "-switch", Q.default, J.switchLight, e, P), y = (0, p.useFormItem)(e, {
        mergedSize(n) {
          var f, b;
          if (e.size !== void 0)
            return e.size;
          if (n)
            return n.mergedSize.value;
          const w = (b = (f = C == null ? void 0 : C.value) === null || f === void 0 ? void 0 : f.Switch) === null || b === void 0 ? void 0 : b.size;
          return w || "medium";
        }
      }), { mergedSizeRef: R, mergedDisabledRef: m } = y, M = (0, r.ref)(e.defaultValue), j = (0, r.toRef)(e, "value"), _ = (0, i.useMergedState)(j, M), $ = (0, r.computed)(() => _.value === e.checkedValue), c = (0, r.ref)(!1), d = (0, r.ref)(!1), E = (0, r.computed)(() => {
        const { railStyle: n } = e;
        if (n)
          return n({ focused: d.value, checked: $.value });
      });
      function z(n) {
        const { "onUpdate:value": f, onChange: b, onUpdateValue: w } = e, { nTriggerFormInput: V, nTriggerFormChange: W } = y;
        f && (0, l.call)(f, n), w && (0, l.call)(w, n), b && (0, l.call)(b, n), M.value = n, V(), W();
      }
      function Z() {
        const { nTriggerFormFocus: n } = y;
        n();
      }
      function ee() {
        const { nTriggerFormBlur: n } = y;
        n();
      }
      function te() {
        e.loading || m.value || (_.value !== e.checkedValue ? z(e.checkedValue) : z(e.uncheckedValue));
      }
      function re() {
        d.value = !0, Z();
      }
      function oe() {
        d.value = !1, ee(), c.value = !1;
      }
      function ie(n) {
        e.loading || m.value || n.key === " " && (_.value !== e.checkedValue ? z(e.checkedValue) : z(e.uncheckedValue), c.value = !1);
      }
      function ne(n) {
        e.loading || m.value || n.key === " " && (n.preventDefault(), c.value = !0);
      }
      const U = (0, r.computed)(() => {
        const { value: n } = R, { self: { opacityDisabled: f, railColor: b, railColorActive: w, buttonBoxShadow: V, buttonColor: W, boxShadowFocus: ae, loadingColor: le, textColor: ce, iconColor: se, [(0, l.createKey)("buttonHeight", n)]: v, [(0, l.createKey)("buttonWidth", n)]: de, [(0, l.createKey)("buttonWidthPressed", n)]: ue, [(0, l.createKey)("railHeight", n)]: g, [(0, l.createKey)("railWidth", n)]: O, [(0, l.createKey)("railBorderRadius", n)]: he, [(0, l.createKey)("buttonBorderRadius", n)]: fe }, common: { cubicBezierEaseInOut: be } } = B.value;
        let F, L, K;
        return S ? (F = `calc((${g} - ${v}) / 2)`, L = `max(${g}, ${v})`, K = `max(${O}, calc(${O} + ${v} - ${g}))`) : (F = (0, a.pxfy)(((0, a.depx)(g) - (0, a.depx)(v)) / 2), L = (0, a.pxfy)(Math.max((0, a.depx)(g), (0, a.depx)(v))), K = (0, a.depx)(g) > (0, a.depx)(v) ? O : (0, a.pxfy)((0, a.depx)(O) + (0, a.depx)(v) - (0, a.depx)(g))), {
          "--n-bezier": be,
          "--n-button-border-radius": fe,
          "--n-button-box-shadow": V,
          "--n-button-color": W,
          "--n-button-width": de,
          "--n-button-width-pressed": ue,
          "--n-button-height": v,
          "--n-height": L,
          "--n-offset": F,
          "--n-opacity-disabled": f,
          "--n-rail-border-radius": he,
          "--n-rail-color": b,
          "--n-rail-color-active": w,
          "--n-rail-height": g,
          "--n-rail-width": O,
          "--n-width": K,
          "--n-box-shadow-focus": ae,
          "--n-loading-color": le,
          "--n-text-color": ce,
          "--n-icon-color": se
        };
      }), x = k ? (0, p.useThemeClass)("switch", (0, r.computed)(() => R.value[0]), U, e) : void 0;
      return {
        handleClick: te,
        handleBlur: oe,
        handleFocus: re,
        handleKeyup: ie,
        handleKeydown: ne,
        mergedRailStyle: E,
        pressed: c,
        mergedClsPrefix: P,
        mergedValue: _,
        checked: $,
        mergedDisabled: m,
        cssVars: k ? void 0 : U,
        themeClass: x == null ? void 0 : x.themeClass,
        onRender: x == null ? void 0 : x.onRender
      };
    },
    render() {
      const { mergedClsPrefix: e, mergedDisabled: P, checked: k, mergedRailStyle: C, onRender: B, $slots: y } = this;
      B == null || B();
      const { checked: R, unchecked: m, icon: M, "checked-icon": j, "unchecked-icon": _ } = y, $ = !((0, l.isSlotEmpty)(M) && (0, l.isSlotEmpty)(j) && (0, l.isSlotEmpty)(_));
      return (0, r.h)(
        "div",
        { role: "switch", "aria-checked": k, class: [
          `${e}-switch`,
          this.themeClass,
          $ && `${e}-switch--icon`,
          k && `${e}-switch--active`,
          P && `${e}-switch--disabled`,
          this.round && `${e}-switch--round`,
          this.loading && `${e}-switch--loading`,
          this.pressed && `${e}-switch--pressed`,
          this.rubberBand && `${e}-switch--rubber-band`
        ], tabindex: this.mergedDisabled ? void 0 : 0, style: this.cssVars, onClick: this.handleClick, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyup: this.handleKeyup, onKeydown: this.handleKeydown },
        (0, r.h)(
          "div",
          { class: `${e}-switch__rail`, "aria-hidden": "true", style: C },
          (0, l.resolveWrappedSlot)(R, (c) => (0, l.resolveWrappedSlot)(m, (d) => c || d ? (0, r.h)(
            "div",
            { "aria-hidden": !0, class: `${e}-switch__children-placeholder` },
            (0, r.h)(
              "div",
              { class: `${e}-switch__rail-placeholder` },
              (0, r.h)("div", { class: `${e}-switch__button-placeholder` }),
              c
            ),
            (0, r.h)(
              "div",
              { class: `${e}-switch__rail-placeholder` },
              (0, r.h)("div", { class: `${e}-switch__button-placeholder` }),
              d
            )
          ) : null)),
          (0, r.h)(
            "div",
            { class: `${e}-switch__button` },
            (0, l.resolveWrappedSlot)(M, (c) => (0, l.resolveWrappedSlot)(j, (d) => (0, l.resolveWrappedSlot)(_, (E) => (0, r.h)(h.NIconSwitchTransition, null, {
              default: () => this.loading ? (0, r.h)(h.NBaseLoading, Object.assign({ key: "loading", clsPrefix: e, strokeWidth: 20 }, this.spinProps)) : this.checked && (d || c) ? (0, r.h)("div", { class: `${e}-switch__button-icon`, key: d ? "checked-icon" : "icon" }, d || c) : !this.checked && (E || c) ? (0, r.h)("div", { class: `${e}-switch__button-icon`, key: E ? "unchecked-icon" : "icon" }, E || c) : null
            })))),
            (0, l.resolveWrappedSlot)(R, (c) => c && (0, r.h)("div", { key: "checked", class: `${e}-switch__checked` }, c)),
            (0, l.resolveWrappedSlot)(m, (c) => c && (0, r.h)("div", { key: "unchecked", class: `${e}-switch__unchecked` }, c))
          )
        )
      );
    }
  });
})(Y);
(function(o) {
  var s = u && u.__importDefault || function(i) {
    return i && i.__esModule ? i : { default: i };
  };
  Object.defineProperty(o, "__esModule", { value: !0 }), o.switchProps = o.NSwitch = void 0;
  var a = Y;
  Object.defineProperty(o, "NSwitch", { enumerable: !0, get: function() {
    return s(a).default;
  } }), Object.defineProperty(o, "switchProps", { enumerable: !0, get: function() {
    return a.switchProps;
  } });
})(X);
const Fe = /* @__PURE__ */ xe({
  __proto__: null
}, [X]);
export {
  Fe as i
};