epic-designer-cjh/dist/checkbox-166516eb.js

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

import { h as s, defineComponent as _, watchEffect as H, ref as I, computed as N, provide as be, toRef as P, inject as he } from "vue";
import { c0 as V, b$ as fe } from "./index-97ce4605.js";
import { u as j, c as p, a as c, b as R, e as F, l as ke, m as me, g as ve } from "./use-rtl-d05cb593.js";
import { u as K } from "./use-form-item-4d43edfb.js";
import { u as L } from "./use-merged-state-7348d957.js";
import { c as xe, b as t, u as O, a as ge } from "./light-76d75dc8.js";
import { i as pe, N as Ce } from "./icon-switch.cssr-d74fe364.js";
import { u as ye } from "./use-memo-01b53d71.js";
import { c as E } from "./create-key-76a2bf3d.js";
import { c as we } from "./index-f636e660.js";
import { a as ze } from "./delegate-6e021bb9.js";
import { c as Re } from "./index-4562f02c.js";
import "./index-e2a664aa.js";
import "./isArrayLikeObject-e5e231b4.js";
import "./_overRest-dc82ce77.js";
import "./use-is-mounted-a0b9f33e.js";
const Se = {
  sizeSmall: "14px",
  sizeMedium: "16px",
  sizeLarge: "18px",
  labelPadding: "0 8px",
  labelFontWeight: "400"
}, De = (e) => {
  const { baseColor: u, inputColorDisabled: i, cardColor: v, modalColor: h, popoverColor: l, textColorDisabled: b, borderColor: d, primaryColor: n, textColor2: a, fontSizeSmall: S, fontSizeMedium: m, fontSizeLarge: r, borderRadiusSmall: x, lineHeight: g } = e;
  return Object.assign(Object.assign({}, Se), {
    labelLineHeight: g,
    fontSizeSmall: S,
    fontSizeMedium: m,
    fontSizeLarge: r,
    borderRadius: x,
    color: u,
    colorChecked: n,
    colorDisabled: i,
    colorDisabledChecked: i,
    colorTableHeader: v,
    colorTableHeaderModal: h,
    colorTableHeaderPopover: l,
    checkMarkColor: u,
    checkMarkColorDisabled: b,
    checkMarkColorDisabledChecked: b,
    border: `1px solid ${d}`,
    borderDisabled: `1px solid ${d}`,
    borderDisabledChecked: `1px solid ${d}`,
    borderChecked: `1px solid ${n}`,
    borderFocus: `1px solid ${n}`,
    boxShadowFocus: `0 0 0 2px ${Re(n, { alpha: 0.3 })}`,
    textColor: a,
    textColorDisabled: b
  });
}, Te = {
  name: "Checkbox",
  common: xe,
  self: De
}, $e = Te, Me = s(
  "svg",
  { viewBox: "0 0 64 64", class: "check-icon" },
  s("path", { d: "M50.42,16.76L22.34,39.45l-8.1-11.46c-1.12-1.58-3.3-1.96-4.88-0.84c-1.58,1.12-1.95,3.3-0.84,4.88l10.26,14.51  c0.56,0.79,1.42,1.31,2.38,1.45c0.16,0.02,0.32,0.03,0.48,0.03c0.8,0,1.57-0.27,2.2-0.78l30.99-25.03c1.5-1.21,1.74-3.42,0.52-4.92  C54.13,15.78,51.93,15.55,50.42,16.76z" })
), Fe = s(
  "svg",
  { viewBox: "0 0 100 100", class: "line-icon" },
  s("path", { d: "M80.2,55.5H21.4c-2.8,0-5.1-2.5-5.1-5.5l0,0c0-3,2.3-5.5,5.1-5.5h58.7c2.8,0,5.1,2.5,5.1,5.5l0,0C85.2,53.1,82.9,55.5,80.2,55.5z" })
), G = fe("n-checkbox-group"), Ae = {
  min: Number,
  max: Number,
  size: String,
  value: Array,
  defaultValue: {
    type: Array,
    default: null
  },
  disabled: {
    type: Boolean,
    default: void 0
  },
  "onUpdate:value": [Function, Array],
  onUpdateValue: [Function, Array],
  // deprecated
  onChange: [Function, Array]
}, Ne = _({
  name: "CheckboxGroup",
  props: Ae,
  setup(e) {
    process.env.NODE_ENV !== "production" && H(() => {
      e.onChange !== void 0 && V("checkbox-group", "`on-change` is deprecated, please use `on-update:value` instead.");
    });
    const { mergedClsPrefixRef: u } = j(e), i = K(e), { mergedSizeRef: v, mergedDisabledRef: h } = i, l = I(e.defaultValue), b = N(() => e.value), d = L(b, l), n = N(() => {
      var m;
      return ((m = d.value) === null || m === void 0 ? void 0 : m.length) || 0;
    }), a = N(() => Array.isArray(d.value) ? new Set(d.value) : /* @__PURE__ */ new Set());
    function S(m, r) {
      const { nTriggerFormInput: x, nTriggerFormChange: g } = i, { onChange: C, "onUpdate:value": y, onUpdateValue: w } = e;
      if (Array.isArray(d.value)) {
        const f = Array.from(d.value), A = f.findIndex((U) => U === r);
        m ? ~A || (f.push(r), w && t(w, f, {
          actionType: "check",
          value: r
        }), y && t(y, f, {
          actionType: "check",
          value: r
        }), x(), g(), l.value = f, C && t(C, f)) : ~A && (f.splice(A, 1), w && t(w, f, {
          actionType: "uncheck",
          value: r
        }), y && t(y, f, {
          actionType: "uncheck",
          value: r
        }), C && t(C, f), l.value = f, x(), g());
      } else
        m ? (w && t(w, [r], {
          actionType: "check",
          value: r
        }), y && t(y, [r], {
          actionType: "check",
          value: r
        }), C && t(C, [r]), l.value = [r], x(), g()) : (w && t(w, [], {
          actionType: "uncheck",
          value: r
        }), y && t(y, [], {
          actionType: "uncheck",
          value: r
        }), C && t(C, []), l.value = [], x(), g());
    }
    return be(G, {
      checkedCountRef: n,
      maxRef: P(e, "max"),
      minRef: P(e, "min"),
      valueSetRef: a,
      disabledRef: h,
      mergedSizeRef: v,
      toggleCheckbox: S
    }), {
      mergedClsPrefix: u
    };
  },
  render() {
    return s("div", { class: `${this.mergedClsPrefix}-checkbox-group`, role: "group" }, this.$slots);
  }
}), Ue = p([
  c("checkbox", `
 line-height: var(--n-label-line-height);
 font-size: var(--n-font-size);
 outline: none;
 cursor: pointer;
 display: inline-flex;
 flex-wrap: nowrap;
 align-items: flex-start;
 word-break: break-word;
 --n-merged-color-table: var(--n-color-table);
 `, [p("&:hover", [c("checkbox-box", [R("border", {
    border: "var(--n-border-checked)"
  })])]), p("&:focus:not(:active)", [c("checkbox-box", [R("border", `
 border: var(--n-border-focus);
 box-shadow: var(--n-box-shadow-focus);
 `)])]), F("inside-table", [c("checkbox-box", `
 background-color: var(--n-merged-color-table);
 `)]), F("checked", [c("checkbox-box", `
 background-color: var(--n-color-checked);
 `, [c("checkbox-icon", [
    // if not set width to 100%, safari & old chrome won't display the icon
    p(".check-icon", `
 opacity: 1;
 transform: scale(1);
 `)
  ])])]), F("indeterminate", [c("checkbox-box", [c("checkbox-icon", [p(".check-icon", `
 opacity: 0;
 transform: scale(.5);
 `), p(".line-icon", `
 opacity: 1;
 transform: scale(1);
 `)])])]), F("checked, indeterminate", [p("&:focus:not(:active)", [c("checkbox-box", [R("border", `
 border: var(--n-border-checked);
 box-shadow: var(--n-box-shadow-focus);
 `)])]), c("checkbox-box", `
 background-color: var(--n-color-checked);
 border-left: 0;
 border-top: 0;
 `, [R("border", {
    border: "var(--n-border-checked)"
  })])]), F("disabled", {
    cursor: "not-allowed"
  }, [F("checked", [c("checkbox-box", `
 background-color: var(--n-color-disabled-checked);
 `, [R("border", {
    border: "var(--n-border-disabled-checked)"
  }), c("checkbox-icon", [p(".check-icon, .line-icon", {
    fill: "var(--n-check-mark-color-disabled-checked)"
  })])])]), c("checkbox-box", `
 background-color: var(--n-color-disabled);
 `, [R("border", {
    border: "var(--n-border-disabled)"
  }), c("checkbox-icon", [p(".check-icon, .line-icon", {
    fill: "var(--n-check-mark-color-disabled)"
  })])]), R("label", {
    color: "var(--n-text-color-disabled)"
  })]), c("checkbox-box-wrapper", `
 position: relative;
 width: var(--n-size);
 flex-shrink: 0;
 flex-grow: 0;
 user-select: none;
 -webkit-user-select: none;
 `), c("checkbox-box", `
 position: absolute;
 left: 0;
 top: 50%;
 transform: translateY(-50%);
 height: var(--n-size);
 width: var(--n-size);
 display: inline-block;
 box-sizing: border-box;
 border-radius: var(--n-border-radius);
 background-color: var(--n-color);
 transition: background-color 0.3s var(--n-bezier);
 `, [R("border", `
 transition:
 border-color .3s var(--n-bezier),
 box-shadow .3s var(--n-bezier);
 border-radius: inherit;
 position: absolute;
 left: 0;
 right: 0;
 top: 0;
 bottom: 0;
 border: var(--n-border);
 `), c("checkbox-icon", `
 display: flex;
 align-items: center;
 justify-content: center;
 position: absolute;
 left: 1px;
 right: 1px;
 top: 1px;
 bottom: 1px;
 `, [p(".check-icon, .line-icon", `
 width: 100%;
 fill: var(--n-check-mark-color);
 opacity: 0;
 transform: scale(0.5);
 transform-origin: center;
 transition:
 fill 0.3s var(--n-bezier),
 transform 0.3s var(--n-bezier),
 opacity 0.3s var(--n-bezier),
 border-color 0.3s var(--n-bezier);
 `), pe({
    left: "1px",
    top: "1px"
  })])]), R("label", `
 color: var(--n-text-color);
 transition: color .3s var(--n-bezier);
 user-select: none;
 -webkit-user-select: none;
 padding: var(--n-label-padding);
 font-weight: var(--n-label-font-weight);
 `, [p("&:empty", {
    display: "none"
  })])]),
  // modal table header checkbox
  ke(c("checkbox", `
 --n-merged-color-table: var(--n-color-table-modal);
 `)),
  // popover table header checkbox
  me(c("checkbox", `
 --n-merged-color-table: var(--n-color-table-popover);
 `))
]), Be = Object.assign(Object.assign({}, O.props), {
  size: String,
  checked: {
    type: [Boolean, String, Number],
    default: void 0
  },
  defaultChecked: {
    type: [Boolean, String, Number],
    default: !1
  },
  value: [String, Number],
  disabled: {
    type: Boolean,
    default: void 0
  },
  indeterminate: Boolean,
  label: String,
  focusable: {
    type: Boolean,
    default: !0
  },
  checkedValue: {
    type: [Boolean, String, Number],
    default: !0
  },
  uncheckedValue: {
    type: [Boolean, String, Number],
    default: !1
  },
  "onUpdate:checked": [Function, Array],
  onUpdateChecked: [Function, Array],
  // private
  privateInsideTable: Boolean,
  // deprecated
  onChange: [Function, Array]
}), Ie = _({
  name: "Checkbox",
  props: Be,
  setup(e) {
    process.env.NODE_ENV !== "production" && H(() => {
      e.onChange && V("checkbox", "`on-change` is deprecated, please use `on-update:checked` instead.");
    });
    const u = I(null), { mergedClsPrefixRef: i, inlineThemeDisabled: v, mergedRtlRef: h } = j(e), l = K(e, {
      mergedSize(o) {
        const { size: z } = e;
        if (z !== void 0)
          return z;
        if (n) {
          const { value: k } = n.mergedSizeRef;
          if (k !== void 0)
            return k;
        }
        if (o) {
          const { mergedSize: k } = o;
          if (k !== void 0)
            return k.value;
        }
        return "medium";
      },
      mergedDisabled(o) {
        const { disabled: z } = e;
        if (z !== void 0)
          return z;
        if (n) {
          if (n.disabledRef.value)
            return !0;
          const { maxRef: { value: k }, checkedCountRef: D } = n;
          if (k !== void 0 && D.value >= k && !r.value)
            return !0;
          const { minRef: { value: $ } } = n;
          if ($ !== void 0 && D.value <= $ && r.value)
            return !0;
        }
        return o ? o.disabled.value : !1;
      }
    }), { mergedDisabledRef: b, mergedSizeRef: d } = l, n = he(G, null), a = I(e.defaultChecked), S = P(e, "checked"), m = L(S, a), r = ye(() => {
      if (n) {
        const o = n.valueSetRef.value;
        return o && e.value !== void 0 ? o.has(e.value) : !1;
      } else
        return m.value === e.checkedValue;
    }), x = O("Checkbox", "-checkbox", Ue, $e, e, i);
    function g(o) {
      if (n && e.value !== void 0)
        n.toggleCheckbox(!r.value, e.value);
      else {
        const { onChange: z, "onUpdate:checked": k, onUpdateChecked: D } = e, { nTriggerFormInput: $, nTriggerFormChange: B } = l, M = r.value ? e.uncheckedValue : e.checkedValue;
        k && t(k, M, o), D && t(D, M, o), z && t(z, M, o), $(), B(), a.value = M;
      }
    }
    function C(o) {
      b.value || g(o);
    }
    function y(o) {
      if (!b.value)
        switch (o.key) {
          case " ":
          case "Enter":
            g(o);
        }
    }
    function w(o) {
      switch (o.key) {
        case " ":
          o.preventDefault();
      }
    }
    const f = {
      focus: () => {
        var o;
        (o = u.value) === null || o === void 0 || o.focus();
      },
      blur: () => {
        var o;
        (o = u.value) === null || o === void 0 || o.blur();
      }
    }, A = ve("Checkbox", h, i), U = N(() => {
      const { value: o } = d, { common: { cubicBezierEaseInOut: z }, self: { borderRadius: k, color: D, colorChecked: $, colorDisabled: B, colorTableHeader: M, colorTableHeaderModal: W, colorTableHeaderPopover: Y, checkMarkColor: q, checkMarkColorDisabled: J, border: Q, borderFocus: X, borderDisabled: Z, borderChecked: ee, boxShadowFocus: oe, textColor: re, textColorDisabled: ne, checkMarkColorDisabledChecked: ae, colorDisabledChecked: ce, borderDisabledChecked: le, labelPadding: ie, labelLineHeight: de, labelFontWeight: te, [E("fontSize", o)]: se, [E("size", o)]: ue } } = x.value;
      return {
        "--n-label-line-height": de,
        "--n-label-font-weight": te,
        "--n-size": ue,
        "--n-bezier": z,
        "--n-border-radius": k,
        "--n-border": Q,
        "--n-border-checked": ee,
        "--n-border-focus": X,
        "--n-border-disabled": Z,
        "--n-border-disabled-checked": le,
        "--n-box-shadow-focus": oe,
        "--n-color": D,
        "--n-color-checked": $,
        "--n-color-table": M,
        "--n-color-table-modal": W,
        "--n-color-table-popover": Y,
        "--n-color-disabled": B,
        "--n-color-disabled-checked": ce,
        "--n-text-color": re,
        "--n-text-color-disabled": ne,
        "--n-check-mark-color": q,
        "--n-check-mark-color-disabled": J,
        "--n-check-mark-color-disabled-checked": ae,
        "--n-font-size": se,
        "--n-label-padding": ie
      };
    }), T = v ? ge("checkbox", N(() => d.value[0]), U, e) : void 0;
    return Object.assign(l, f, {
      rtlEnabled: A,
      selfRef: u,
      mergedClsPrefix: i,
      mergedDisabled: b,
      renderedChecked: r,
      mergedTheme: x,
      labelId: we(),
      handleClick: C,
      handleKeyUp: y,
      handleKeyDown: w,
      cssVars: v ? void 0 : U,
      themeClass: T == null ? void 0 : T.themeClass,
      onRender: T == null ? void 0 : T.onRender
    });
  },
  render() {
    var e;
    const { $slots: u, renderedChecked: i, mergedDisabled: v, indeterminate: h, privateInsideTable: l, cssVars: b, labelId: d, label: n, mergedClsPrefix: a, focusable: S, handleKeyUp: m, handleKeyDown: r, handleClick: x } = this;
    return (e = this.onRender) === null || e === void 0 || e.call(this), s(
      "div",
      { ref: "selfRef", class: [
        `${a}-checkbox`,
        this.themeClass,
        this.rtlEnabled && `${a}-checkbox--rtl`,
        i && `${a}-checkbox--checked`,
        v && `${a}-checkbox--disabled`,
        h && `${a}-checkbox--indeterminate`,
        l && `${a}-checkbox--inside-table`
      ], tabindex: v || !S ? void 0 : 0, role: "checkbox", "aria-checked": h ? "mixed" : i, "aria-labelledby": d, style: b, onKeyup: m, onKeydown: r, onClick: x, onMousedown: () => {
        ze("selectstart", window, (g) => {
          g.preventDefault();
        }, {
          once: !0
        });
      } },
      s(
        "div",
        { class: `${a}-checkbox-box-wrapper` },
        " ",
        s(
          "div",
          { class: `${a}-checkbox-box` },
          s(Ce, null, {
            default: () => this.indeterminate ? s("div", { key: "indeterminate", class: `${a}-checkbox-icon` }, Fe) : s("div", { key: "check", class: `${a}-checkbox-icon` }, Me)
          }),
          s("div", { class: `${a}-checkbox-box__border` })
        )
      ),
      n !== null || u.default ? s("span", { class: `${a}-checkbox__label`, id: d }, u.default ? u.default() : n) : null
    );
  }
}), Ze = _({
  emits: ["update:modelValue"],
  setup(e, { emit: u, attrs: i }) {
    function v(h = null) {
      u("update:modelValue", h);
    }
    return () => {
      const h = {
        ...i,
        value: i.modelValue,
        "onUpdate:value": v
      };
      return s(Ne, h, {
        default: () => {
          var l;
          return [
            (l = h.options) == null ? void 0 : l.map(
              (b) => s(Ie, { label: b.label, value: b.value })
            )
          ];
        }
      });
    };
  }
});
export {
  Ze as default
};