x-next 1.0.1 → 1.2.0

package/dist/es/components/form-checkbox/Checkbox.js

@@ -0,0 +1,180 @@
+import { defineComponent as U, toRefs as X, ref as j, inject as _, computed as s, watch as C, watchEffect as $, createVNode as c, mergeProps as A, nextTick as q } from "vue";
+import F from "../_components/icon-hover/index.vue.js";
+import I from "./icon-check.js";
+import { isArray as h, isUndefined as J, isNull as L } from "../../_utils/is.js";
+import { checkboxGroupKey as Q } from "./context.js";
+import { useFormItem as Y, useFormItemControl as Z } from "../../_hooks/use-form-item.js";
+import { getClassNameMixin as G } from "../../_utils/config.js";
+import { useSize as x } from "../../_hooks/use-size.js";
+const oe = /* @__PURE__ */ U({
+  name: "Checkbox",
+  inheritAttrs: !1,
+  components: {
+    IconCheck: I,
+    IconHover: F
+  },
+  props: {
+    /**
+     * @zh 绑定值
+     * @en Value
+     * @vModel
+     */
+    modelValue: {
+      type: [Boolean, Array],
+      default: void 0
+    },
+    /**
+     * @zh 默认是否选中（非受控状态）
+     * @en Whether checked by default (uncontrolled state)
+     */
+    defaultChecked: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 选项的 `value`
+     * @en The `value` of the option
+     */
+    value: {
+      type: [String, Number, Boolean]
+    },
+    /**
+     * @zh 是否禁用
+     * @en Whether to disable
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 是否为半选状态
+     * @en Whether it is half-selected
+     */
+    indeterminate: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 复选框尺寸
+     * @en Checkbox size
+     * @values 'mini','small','medium','large'
+     */
+    size: {
+      type: String
+    },
+    // private
+    uninjectGroupContext: {
+      type: Boolean,
+      default: !1
+    }
+  },
+  emits: {
+    "update:modelValue": (t) => !0,
+    /**
+     * @zh 值改变时触发
+     * @en Trigger when the value changes
+     * @param { boolean | CheckboxValueList } value
+     * @param {Event} ev
+     */
+    change: (t, g) => !0
+  },
+  /**
+   * @zh 自定义复选框
+   * @en Custom checkbox
+   * @slot checkbox
+   * @binding {boolean} checked
+   * @binding {boolean} disabled
+   * @version 2.18.0
+   */
+  setup(t, {
+    emit: g,
+    slots: b,
+    attrs: f
+  }) {
+    const {
+      disabled: N,
+      modelValue: w,
+      size: O
+    } = X(t), i = G("checkbox"), d = j(), l = t.uninjectGroupContext ? void 0 : _(Q, void 0), z = (l == null ? void 0 : l.name) === "XCheckboxGroup", {
+      formItemCtx: p,
+      mergedDisabled: k,
+      mergedSize: E,
+      eventHandlers: y
+    } = Y({
+      disabled: N,
+      size: O
+    }), M = Z(z ? {} : p, () => Object.fromEntries(Object.entries(f).filter(([e]) => e === "id" || e === "name" || e.startsWith("aria-")))), H = s(() => Object.fromEntries(Object.entries(f).filter(([e]) => e !== "id" && e !== "name" && e !== "class" && e !== "style" && !e.startsWith("aria-")))), {
+      mergedSize: P
+    } = x(E), r = j(t.defaultChecked), o = s(() => z ? l == null ? void 0 : l.computedValue : t.modelValue ?? r.value), u = s(() => h(o.value) ? o.value.includes(t.value ?? !0) : o.value), m = s(() => (l == null ? void 0 : l.disabled) || (k == null ? void 0 : k.value) || !u.value && (l == null ? void 0 : l.isMaxed)), S = s(() => (l == null ? void 0 : l.size) ?? P.value), R = (e) => {
+      e.stopPropagation();
+    }, W = (e) => {
+      var v, V;
+      const {
+        checked: a
+      } = e.target;
+      let n = a;
+      if (h(o.value)) {
+        const B = new Set(o.value);
+        a ? B.add(t.value ?? !0) : B.delete(t.value ?? !0), n = Array.from(B);
+      }
+      r.value = a, z && h(n) ? l == null || l.handleChange(n, e) : (g("update:modelValue", n), g("change", n, e), (V = (v = y.value) == null ? void 0 : v.onChange) == null || V.call(v, e)), q(() => {
+        d.value && d.value.checked !== u.value && (d.value.checked = u.value);
+      });
+    }, D = s(() => [i.block, i.modifier(`size-${S.value}`), {
+      [i.modifier("checked")]: u.value,
+      [i.modifier("indeterminate")]: t.indeterminate,
+      [i.modifier("disabled")]: m.value
+    }]), K = (e) => {
+      var a, n;
+      (n = (a = y.value) == null ? void 0 : a.onFocus) == null || n.call(a, e);
+    }, T = (e) => {
+      var a, n;
+      (n = (a = y.value) == null ? void 0 : a.onBlur) == null || n.call(a, e);
+    };
+    return C(w, (e) => {
+      (J(e) || L(e)) && (r.value = !1);
+    }), C(o, (e) => {
+      let a;
+      h(e) ? a = e.includes(t.value ?? !0) : a = e, r.value !== a && (r.value = a), d.value && d.value.checked !== a && (d.value.checked = a);
+    }), $(() => {
+      d.value && (d.value.indeterminate = t.indeterminate);
+    }), () => {
+      var e, a;
+      return c("label", A(H.value, {
+        "aria-disabled": m.value,
+        class: [D.value, f.class],
+        style: f.style
+      }), [c("input", A(M.value, {
+        ref: d,
+        type: "checkbox",
+        checked: u.value,
+        "aria-checked": t.indeterminate ? "mixed" : u.value,
+        value: t.value,
+        class: i.modifier("target"),
+        disabled: m.value,
+        onClick: R,
+        onChange: W,
+        onFocus: K,
+        onBlur: T
+      }), null), ((a = b.checkbox ?? ((e = l == null ? void 0 : l.slots) == null ? void 0 : e.checkbox)) == null ? void 0 : a({
+        checked: u.value,
+        disabled: m.value
+      })) ?? c(F, {
+        class: i.modifier("icon-hover"),
+        size: S.value,
+        disabled: m.value || u.value
+      }, {
+        default: () => [c("div", {
+          class: i.modifier("icon")
+        }, [u.value && c(I, {
+          class: i.modifier("icon-check")
+        }, null)])]
+      }), b.default && c("span", {
+        class: i.element("label")
+      }, [b.default()])]);
+    };
+  }
+});
+export {
+  oe as default
+};

package/dist/es/components/form-checkbox/CheckboxGroup.js

@@ -0,0 +1,158 @@
+import { defineComponent as A, toRefs as N, ref as G, computed as d, provide as $, reactive as F, watch as I, createVNode as v, mergeProps as _ } from "vue";
+import { checkboxGroupKey as B } from "./context.js";
+import { useFormItem as M, useFormItemControl as w } from "../../_hooks/use-form-item.js";
+import D from "./Checkbox.js";
+import { isArray as b, isString as H, isNumber as K, isBoolean as O, isFunction as P } from "../../_utils/is.js";
+import { getClassNameMixin as R } from "../../_utils/config.js";
+import { useSize as X } from "../../_hooks/use-size.js";
+const W = /* @__PURE__ */ A({
+  name: "CheckboxGroup",
+  props: {
+    /**
+     * @zh 绑定值
+     * @en Value
+     * @vModel
+     */
+    modelValue: {
+      type: Array,
+      default: void 0
+    },
+    /**
+     * @zh 默认值（非受控状态）
+     * @en Default value (uncontrolled state)
+     */
+    defaultValue: {
+      type: Array,
+      default: () => []
+    },
+    /**
+     * @zh 支持最多选中的数量
+     * @en Support the maximum number of selections
+     * @version 2.36.0
+     */
+    max: {
+      type: Number
+    },
+    /**
+     * @zh 选项
+     * @en Options
+     * @version 2.27.0
+     */
+    options: {
+      type: Array
+    },
+    /**
+     * @zh 复选框的排列方向
+     * @en Arrangement direction of checkboxes
+     */
+    direction: {
+      type: String,
+      default: "horizontal"
+    },
+    /**
+     * @zh 是否禁用
+     * @en Whether to disable
+     */
+    disabled: {
+      type: Boolean,
+      default: !1
+    },
+    /**
+     * @zh 复选框组尺寸
+     * @en The size of checkbox group
+     * @values 'mini','small','medium','large'
+     */
+    size: {
+      type: String
+    }
+  },
+  emits: {
+    "update:modelValue": (a) => !0,
+    /**
+     * @zh 值改变时触发
+     * @en Trigger when the value changes
+     * @param {CheckboxValueList} value
+     * @param {Event} ev
+     */
+    change: (a, n) => !0
+  },
+  /**
+   * @zh checkbox 文案内容
+   * @en checkbox label content
+   * @slot label
+   * @binding {CheckboxOption} data
+   * @version 2.27.0
+   */
+  /**
+   * @zh 自定义复选框
+   * @en Custom checkbox
+   * @slot checkbox
+   * @binding {boolean} checked
+   * @binding {boolean} disabled
+   * @version 2.27.0
+   */
+  setup(a, {
+    emit: n,
+    slots: l,
+    attrs: g
+  }) {
+    const {
+      disabled: h,
+      size: y
+    } = N(a), m = R("checkbox--group"), {
+      formItemCtx: x,
+      mergedDisabled: C,
+      mergedSize: k,
+      eventHandlers: p
+    } = M({
+      disabled: h,
+      size: y
+    }), z = w(x, () => g, {
+      labelable: !1
+    }), {
+      mergedSize: o
+    } = X(k), r = G(a.defaultValue), i = d(() => b(a.modelValue) ? a.modelValue : r.value), c = d(() => a.max === void 0 ? !1 : i.value.length >= a.max), s = d(() => (a.options ?? []).map((e) => H(e) || K(e) || O(e) ? {
+      label: e,
+      value: e
+    } : e));
+    $(B, F({
+      name: "XCheckboxGroup",
+      computedValue: i,
+      size: o,
+      disabled: C,
+      isMaxed: c,
+      slots: l,
+      handleChange: (e, t) => {
+        var u, f;
+        r.value = e, n("update:modelValue", e), n("change", e, t), (f = (u = p.value) == null ? void 0 : u.onChange) == null || f.call(u, t);
+      }
+    }));
+    const V = d(() => [m.block, m.modifier(`size-${o.value}`), m.modifier(`direction-${a.direction}`)]);
+    I(() => a.modelValue, (e) => {
+      b(e) ? r.value = [...e] : r.value = [];
+    });
+    const S = () => s.value.map((e) => {
+      const t = i.value.includes(e.value);
+      return v(D, {
+        key: `${typeof e.value}-${String(e.value)}`,
+        value: e.value,
+        disabled: e.disabled || !t && c.value,
+        indeterminate: e.indeterminate
+      }, {
+        default: () => [l.label ? l.label({
+          data: e
+        }) : P(e.label) ? e.label() : e.label]
+      });
+    });
+    return () => {
+      var e;
+      return v("span", _(z.value, {
+        role: "group",
+        class: V.value
+      }), [s.value.length > 0 ? S() : (e = l.default) == null ? void 0 : e.call(l)]);
+    };
+  }
+});
+export {
+  W as default
+};

package/dist/es/components/form-checkbox/context.js

@@ -0,0 +1,4 @@
+const o = Symbol("XCheckboxGroup");
+export {
+  o as checkboxGroupKey
+};

package/dist/es/components/form-checkbox/icon-check.js

@@ -0,0 +1,52 @@
+import { defineComponent as t, createVNode as e } from "vue";
+const r = /* @__PURE__ */ t({
+  name: "IconCheck",
+  render() {
+    return (
+      // <svg
+      //   aria-hidden="true"
+      //   focusable="false"
+      //   viewBox="0 0 1024 1024"
+      //   width="200"
+      //   height="200"
+      //   fill="currentColor"
+      // >
+      //   <path
+      //     d="M877.44815445 206.10060629a64.72691371 64.72691371 0 0 0-95.14856334 4.01306852L380.73381888 685.46812814 235.22771741 533.48933518a64.72691371 64.72691371 0 0 0-92.43003222-1.03563036l-45.82665557 45.82665443a64.72691371 64.72691371 0 0 0-0.90617629 90.61767965l239.61903446 250.10479331a64.72691371 64.72691371 0 0 0 71.19960405 15.14609778 64.33855261 64.33855261 0 0 0 35.08198741-21.23042702l36.24707186-42.71976334 40.5190474-40.77795556-3.36579926-3.49525333 411.40426297-486.74638962a64.72691371 64.72691371 0 0 0-3.88361443-87.64024149l-45.3088404-45.43829334z"
+      //     p-id="840"
+      //   ></path>
+      // </svg>
+      // <svg
+      //   t="1743062401095"
+      //   class="icon"
+      //   viewBox="0 0 1024 1024"
+      //   version="1.1"
+      //   xmlns="http://www.w3.org/2000/svg"
+      //   p-id="7329"
+      //   width="1024"
+      //   height="1024"
+      // >
+      //   <path
+      //     d="M863.576287 208.933543 426.318572 673.529907 128.084167 464.780559 64.132646 496.746598 447.865307 848.494801 959.52557 208.933543Z"
+      //     fill="currentColor"
+      //     p-id="7330"
+      //   ></path>
+      // </svg>
+      e("svg", {
+        "aria-hidden": "true",
+        focusable: "false",
+        viewBox: "0 0 1024 1024",
+        version: "1.1",
+        xmlns: "http://www.w3.org/2000/svg",
+        width: "1024",
+        height: "1024"
+      }, [e("path", {
+        d: "M954.848 323.424q0 22.848-16 38.848l-491.424 491.424q-16 16-38.848 16t-38.848-16l-284.576-284.576q-16-16-16-38.848t16-38.848l77.728-77.728q16-16 38.848-16t38.848 16l168 168.576 374.848-375.424q16-16 38.848-16t38.848 16l77.728 77.728q16 16 16 38.848z",
+        fill: "currentColor"
+      }, null)])
+    );
+  }
+});
+export {
+  r as default
+};

package/dist/es/components/form-checkbox/index.js

@@ -0,0 +1,10 @@
+import r from "./Checkbox.js";
+import t from "./CheckboxGroup.js";
+import { generateComponent as o } from "../../_utils/vue-eco.js";
+import { getComponentPrefix as e } from "../../_utils/config.js";
+const C = o(e("Checkbox"), r), n = o(e("CheckboxGroup"), t);
+export {
+  C as Checkbox,
+  n as CheckboxGroup,
+  C as default
+};