x-next 1.0.0 → 1.1.0

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

@@ -0,0 +1,176 @@
+import { defineComponent as K, toRefs as P, ref as V, inject as T, computed as r, watch as N, watchEffect as U, createVNode as c, nextTick as X } from "vue";
+import w from "../_components/icon-hover/index.vue.js";
+import C from "./icon-check.js";
+import { isArray as v, isUndefined as _, isNull as $ } from "../../_utils/is.js";
+import { checkboxGroupKey as q } from "./context.js";
+import { useFormItem as J } from "../../_hooks/use-form-item.js";
+import { getClassNameMixin as L } from "../../_utils/config.js";
+import { useSize as O } from "../../_hooks/use-size.js";
+const le = /* @__PURE__ */ K({
+  name: "Checkbox",
+  components: {
+    IconCheck: C,
+    IconHover: w
+  },
+  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": (n) => !0,
+    /**
+     * @zh 值改变时触发
+     * @en Trigger when the value changes
+     * @param { boolean | CheckboxValueList } value
+     * @param {Event} ev
+     */
+    change: (n, h) => !0
+  },
+  /**
+   * @zh 自定义复选框
+   * @en Custom checkbox
+   * @slot checkbox
+   * @binding {boolean} checked
+   * @binding {boolean} disabled
+   * @version 2.18.0
+   */
+  setup(n, {
+    emit: h,
+    slots: g
+  }) {
+    const {
+      disabled: F,
+      modelValue: j,
+      size: A
+    } = P(n), i = L("checkbox"), t = V(), a = n.uninjectGroupContext ? void 0 : T(q, void 0), b = (a == null ? void 0 : a.name) === "XCheckboxGroup", {
+      mergedDisabled: k,
+      mergedSize: I,
+      eventHandlers: y
+    } = J({
+      disabled: F,
+      size: A
+    }), {
+      mergedSize: M
+    } = O(I), s = V(n.defaultChecked), o = r(() => b ? a == null ? void 0 : a.computedValue : n.modelValue ?? s.value), u = r(() => v(o.value) ? o.value.includes(n.value ?? !0) : o.value), m = r(() => (a == null ? void 0 : a.disabled) || (k == null ? void 0 : k.value) || !u.value && (a == null ? void 0 : a.isMaxed)), B = r(() => (a == null ? void 0 : a.size) ?? M.value), p = (l) => {
+      l.stopPropagation();
+    }, H = (l) => {
+      var f, S;
+      const {
+        checked: e
+      } = l.target;
+      let d = e;
+      if (v(o.value)) {
+        const z = new Set(o.value);
+        e ? z.add(n.value ?? !0) : z.delete(n.value ?? !0), d = Array.from(z);
+      }
+      s.value = e, b && v(d) ? a == null || a.handleChange(d, l) : (h("update:modelValue", d), h("change", d, l), (S = (f = y.value) == null ? void 0 : f.onChange) == null || S.call(f, l)), X(() => {
+        t.value && t.value.checked !== u.value && (t.value.checked = u.value);
+      });
+    }, R = r(() => [i.block, i.modifier(`size-${B.value}`), {
+      [i.modifier("checked")]: u.value,
+      [i.modifier("indeterminate")]: n.indeterminate,
+      [i.modifier("disabled")]: m.value
+    }]), D = (l) => {
+      var e, d;
+      (d = (e = y.value) == null ? void 0 : e.onFocus) == null || d.call(e, l);
+    }, E = (l) => {
+      var e, d;
+      (d = (e = y.value) == null ? void 0 : e.onBlur) == null || d.call(e, l);
+    };
+    return N(j, (l) => {
+      (_(l) || $(l)) && (s.value = !1);
+    }), N(o, (l) => {
+      let e;
+      v(l) ? e = l.includes(n.value ?? !0) : e = l, s.value !== e && (s.value = e), t.value && t.value.checked !== e && (t.value.checked = e);
+    }), U(() => {
+      t.value && (t.value.indeterminate = n.indeterminate);
+    }), () => {
+      var l, e;
+      return c("label", {
+        "aria-disabled": m.value,
+        class: R.value
+      }, [c("input", {
+        ref: t,
+        type: "checkbox",
+        checked: u.value,
+        "aria-checked": n.indeterminate ? "mixed" : u.value,
+        value: n.value,
+        class: i.modifier("target"),
+        disabled: m.value,
+        onClick: p,
+        onChange: H,
+        onFocus: D,
+        onBlur: E
+      }, null), ((e = g.checkbox ?? ((l = a == null ? void 0 : a.slots) == null ? void 0 : l.checkbox)) == null ? void 0 : e({
+        checked: u.value,
+        disabled: m.value
+      })) ?? c(w, {
+        class: i.modifier("icon-hover"),
+        size: B.value,
+        disabled: m.value || u.value
+      }, {
+        default: () => [c("div", {
+          class: i.modifier("icon")
+        }, [u.value && c(C, {
+          class: i.modifier("icon-check")
+        }, null)])]
+      }), g.default && c("span", {
+        class: i.element("label")
+      }, [g.default()])]);
+    };
+  }
+});
+export {
+  le as default
+};

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

@@ -0,0 +1,153 @@
+import { defineComponent as V, toRefs as S, ref as p, computed as d, provide as N, reactive as A, watch as G, createVNode as v } from "vue";
+import { checkboxGroupKey as $ } from "./context.js";
+import { useFormItem as _ } from "../../_hooks/use-form-item.js";
+import B from "./Checkbox.js";
+import { isArray as b, isString as F, isNumber as M, isBoolean as w, isFunction as D } from "../../_utils/is.js";
+import { getClassNameMixin as H } from "../../_utils/config.js";
+import { useSize as I } from "../../_hooks/use-size.js";
+const L = /* @__PURE__ */ V({
+  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
+  }) {
+    const {
+      disabled: h,
+      size: g
+    } = S(a), i = H("checkbox--group"), {
+      mergedDisabled: y,
+      mergedSize: x,
+      eventHandlers: k
+    } = _({
+      disabled: h,
+      size: g
+    }), {
+      mergedSize: c
+    } = I(x), u = p(a.defaultValue), m = d(() => b(a.modelValue) ? a.modelValue : u.value), o = d(() => a.max === void 0 ? !1 : m.value.length >= a.max), s = d(() => (a.options ?? []).map((e) => F(e) || M(e) || w(e) ? {
+      label: e,
+      value: e
+    } : e));
+    N($, A({
+      name: "XCheckboxGroup",
+      computedValue: m,
+      size: c,
+      disabled: y,
+      isMaxed: o,
+      slots: l,
+      handleChange: (e, r) => {
+        var t, f;
+        u.value = e, n("update:modelValue", e), n("change", e, r), (f = (t = k.value) == null ? void 0 : t.onChange) == null || f.call(t, r);
+      }
+    }));
+    const z = d(() => [i.block, i.modifier(`size-${c.value}`), i.modifier(`direction-${a.direction}`)]);
+    G(() => a.modelValue, (e) => {
+      b(e) ? u.value = [...e] : u.value = [];
+    });
+    const C = () => s.value.map((e) => {
+      const r = m.value.includes(e.value);
+      return v(B, {
+        key: `${typeof e.value}-${String(e.value)}`,
+        value: e.value,
+        disabled: e.disabled || !r && o.value,
+        indeterminate: e.indeterminate
+      }, {
+        default: () => [l.label ? l.label({
+          data: e
+        }) : D(e.label) ? e.label() : e.label]
+      });
+    });
+    return () => {
+      var e;
+      return v("span", {
+        class: z.value
+      }, [s.value.length > 0 ? C() : (e = l.default) == null ? void 0 : e.call(l)]);
+    };
+  }
+});
+export {
+  L 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
+};