@nutui/nutui 4.0.11 → 4.0.12

package/dist/packages/_es/Checkbox.js

@@ -1,118 +1,165 @@
-import { c as D } from "./component-234624bc.js";
-import { inject as I, reactive as z, computed as r, watch as S, onMounted as P, getCurrentInstance as p, onBeforeUnmount as M, h as b } from "vue";
-import { p as j } from "./pxCheck-38173291.js";
-import { CheckNormal as L, Checked as N, CheckDisabled as O } from "@nutui/icons-vue";
+import { c as createComponent } from "./component-81a4c1d0.js";
+import { inject, reactive, computed, watch, onMounted, getCurrentInstance, onBeforeUnmount, h } from "vue";
+import { p as pxCheck } from "./pxCheck-c6b9f6b7.js";
+import { CheckNormal, Checked, CheckDisabled } from "@nutui/icons-vue";
 import "../locale/lang";
-const T = (c, h) => ({
-  components: h,
-  props: {
-    modelValue: {
-      type: Boolean,
-      default: !1
-    },
-    disabled: {
-      type: Boolean,
-      default: !1
-    },
-    textPosition: {
-      type: String,
-      default: "right"
-    },
-    iconSize: {
-      type: [String, Number],
-      default: ""
-    },
-    label: {
-      type: String,
-      default: ""
-    },
-    indeterminate: {
-      type: Boolean,
-      default: !1
-    },
-    shape: {
-      type: String,
-      default: "round"
-      // button
-    }
-  },
-  emits: ["change", "update:modelValue"],
-  setup(t, { emit: v, slots: e }) {
-    const n = I("parent", null), u = z({
-      partialSelect: t.indeterminate
-    }), d = r(() => !!n), k = r(() => d.value ? n.value.value.includes(t.label) : t.modelValue), o = r(() => d.value && n.disabled.value ? n.disabled.value : t.disabled), _ = r(() => !!t.modelValue), y = r(() => o.value ? "nut-checkbox__icon--disable" : u.partialSelect ? "nut-checkbox__icon--indeterminate" : k.value ? "nut-checkbox__icon" : "nut-checkbox__icon--unchecked");
-    let m = "";
-    const x = (a, i) => {
-      m = "click", v("update:modelValue", a), v("change", a, i);
-    };
-    S(
-      () => t.modelValue,
-      (a) => {
-        m == "click" ? m = "" : v("change", a);
+const component = (componentName2, components) => {
+  return {
+    components,
+    props: {
+      modelValue: {
+        type: Boolean,
+        default: false
+      },
+      disabled: {
+        type: Boolean,
+        default: false
+      },
+      textPosition: {
+        type: String,
+        default: "right"
+      },
+      iconSize: {
+        type: [String, Number],
+        default: ""
+      },
+      label: {
+        type: String,
+        default: ""
+      },
+      indeterminate: {
+        type: Boolean,
+        default: false
+      },
+      shape: {
+        type: String,
+        default: "round"
+        // button
       }
-    );
-    const V = () => {
-      const { iconSize: a } = t, i = {
-        CheckNormal: e.icon ? e.icon : h.CheckNormal,
-        Checked: e.checkedIcon ? e.checkedIcon : h.Checked,
-        CheckDisabled: e.indeterminate ? e.indeterminate : h.CheckDisabled
-      }, f = u.partialSelect ? i.CheckDisabled : k.value ? i.Checked : i.CheckNormal, l = j(a);
-      return b(f, {
-        width: l,
-        height: l,
-        size: l,
-        class: y.value
+    },
+    emits: ["change", "update:modelValue"],
+    setup(props, { emit, slots }) {
+      const parent = inject("parent", null);
+      const state = reactive({
+        partialSelect: props.indeterminate
       });
-    }, s = () => {
-      var a;
-      return b(
-        "view",
-        {
-          class: `${c}__label ${o.value ? `${c}__label--disabled` : ""}`
-        },
-        (a = e.default) == null ? void 0 : a.call(e)
-      );
-    }, w = () => {
-      var a;
-      return b(
-        "view",
-        {
-          class: `${c}__button ${k.value && `${c}__button--active`} ${o.value ? `${c}__button--disabled` : ""}`
-        },
-        (a = e.default) == null ? void 0 : a.call(e)
+      const hasParent = computed(() => !!parent);
+      const pValue = computed(() => {
+        if (hasParent.value) {
+          return parent.value.value.includes(props.label);
+        } else {
+          return props.modelValue;
+        }
+      });
+      const pDisabled = computed(() => {
+        return hasParent.value ? parent.disabled.value ? parent.disabled.value : props.disabled : props.disabled;
+      });
+      const checked = computed(() => !!props.modelValue);
+      const color = computed(() => {
+        return !pDisabled.value ? state.partialSelect ? "nut-checkbox__icon--indeterminate" : !pValue.value ? "nut-checkbox__icon--unchecked" : "nut-checkbox__icon" : "nut-checkbox__icon--disable";
+      });
+      let updateType = "";
+      const emitChange = (value, label) => {
+        updateType = "click";
+        emit("update:modelValue", value);
+        emit("change", value, label);
+      };
+      watch(
+        () => props.modelValue,
+        (v) => {
+          if (updateType == "click") {
+            updateType = "";
+          } else {
+            emit("change", v);
+          }
+        }
       );
-    }, B = (a) => {
-      var i, f;
-      if (!o.value) {
-        if (_.value && u.partialSelect) {
-          u.partialSelect = !1, x(_.value, (i = e.default) == null ? void 0 : i.call(e)[0].children);
+      const renderIcon = () => {
+        const { iconSize } = props;
+        const iconNodeMap = {
+          CheckNormal: slots.icon ? slots.icon : components.CheckNormal,
+          Checked: slots.checkedIcon ? slots.checkedIcon : components.Checked,
+          CheckDisabled: slots.indeterminate ? slots.indeterminate : components.CheckDisabled
+        };
+        const iconNode = state.partialSelect ? iconNodeMap.CheckDisabled : !pValue.value ? iconNodeMap.CheckNormal : iconNodeMap.Checked;
+        const size = pxCheck(iconSize);
+        return h(iconNode, {
+          width: size,
+          height: size,
+          size,
+          class: color.value
+        });
+      };
+      const renderLabel = () => {
+        var _a;
+        return h(
+          "view",
+          {
+            class: `${componentName2}__label ${pDisabled.value ? `${componentName2}__label--disabled` : ""}`
+          },
+          (_a = slots.default) == null ? void 0 : _a.call(slots)
+        );
+      };
+      const renderButton = () => {
+        var _a;
+        return h(
+          "view",
+          {
+            class: `${componentName2}__button ${pValue.value && `${componentName2}__button--active`} ${pDisabled.value ? `${componentName2}__button--disabled` : ""}`
+          },
+          (_a = slots.default) == null ? void 0 : _a.call(slots)
+        );
+      };
+      const handleClick = (e) => {
+        var _a, _b;
+        if (pDisabled.value)
+          return;
+        if (checked.value && state.partialSelect) {
+          state.partialSelect = false;
+          emitChange(checked.value, (_a = slots.default) == null ? void 0 : _a.call(slots)[0].children);
           return;
         }
-        if (x(!_.value, (f = e.default) == null ? void 0 : f.call(e)[0].children), d.value) {
-          const l = n.value.value, $ = n.max.value, { label: g } = t, C = l.indexOf(g);
-          C > -1 ? l.splice(C, 1) : C <= -1 && (l.length < $ || !$) && l.push(g), n.updateValue(l);
+        emitChange(!checked.value, (_b = slots.default) == null ? void 0 : _b.call(slots)[0].children);
+        if (hasParent.value) {
+          const value = parent.value.value;
+          const max = parent.max.value;
+          const { label } = props;
+          const index = value.indexOf(label);
+          if (index > -1) {
+            value.splice(index, 1);
+          } else if (index <= -1 && (value.length < max || !max)) {
+            value.push(label);
+          }
+          parent.updateValue(value);
         }
-      }
-    };
-    return P(() => {
-      d.value && n.link(p());
-    }), M(() => {
-      d.value && n.unlink(p());
-    }), S(
-      () => t.indeterminate,
-      (a) => {
-        u.partialSelect = a;
-      }
-    ), () => b(
-      "view",
-      {
-        class: `${c} ${c}--${t.shape} ${t.textPosition === "left" ? `${c}--reverse` : ""}`,
-        onClick: B
-      },
-      [t.shape == "button" ? w() : [V(), s()]]
-    );
-  }
-}), { create: U, componentName: q } = D("checkbox"), J = U(T(q, { CheckNormal: L, Checked: N, CheckDisabled: O }));
+      };
+      onMounted(() => {
+        hasParent.value && parent.link(getCurrentInstance());
+      });
+      onBeforeUnmount(() => {
+        hasParent.value && parent.unlink(getCurrentInstance());
+      });
+      watch(
+        () => props.indeterminate,
+        (newVal) => {
+          state.partialSelect = newVal;
+        }
+      );
+      return () => {
+        return h(
+          "view",
+          {
+            class: `${componentName2} ${componentName2}--${props.shape} ${props.textPosition === "left" ? `${componentName2}--reverse` : ""}`,
+            onClick: handleClick
+          },
+          [props.shape == "button" ? renderButton() : [renderIcon(), renderLabel()]]
+        );
+      };
+    }
+  };
+};
+const { create, componentName } = createComponent("checkbox");
+const _sfc_main = create(component(componentName, { CheckNormal, Checked, CheckDisabled }));
 export {
-  J as default
+  _sfc_main as default
 };

package/dist/packages/_es/CheckboxGroup.js

@@ -1,8 +1,9 @@
-import { reactive as h, provide as b, computed as n, watch as x, h as V } from "vue";
-import { c as g } from "./component-234624bc.js";
-import { u as i } from "./index-fadb0974.js";
+import { reactive, provide, computed, watch, h } from "vue";
+import { c as createComponent } from "./component-81a4c1d0.js";
+import { u as useExpose } from "./index-79c5dc33.js";
 import "../locale/lang";
-const { create: m, componentName: y } = g("checkbox-group"), E = m({
+const { create, componentName } = createComponent("checkbox-group");
+const _sfc_main = create({
   props: {
     modelValue: {
       type: Array,
@@ -10,7 +11,7 @@ const { create: m, componentName: y } = g("checkbox-group"), E = m({
     },
     disabled: {
       type: Boolean,
-      default: !1
+      default: false
     },
     max: {
       type: Number,
@@ -18,48 +19,68 @@ const { create: m, componentName: y } = g("checkbox-group"), E = m({
     }
   },
   emits: ["change", "update:modelValue"],
-  setup(o, { slots: u, emit: r }) {
-    const d = h({
+  setup(props, { slots, emit }) {
+    const state = reactive({
       children: []
-    }), c = (e) => {
-      e.proxy && d.children.push(e.proxy);
-    }, t = (e) => {
-      e.proxy && (d.children = d.children.filter((a) => a !== e.proxy));
-    }, s = (e) => {
-      r("update:modelValue", e), r("change", e);
-    }, p = (e) => {
-      const a = [];
-      e && d.children.forEach((l) => {
-        l != null && l.disabled || a.push(l == null ? void 0 : l.label);
-      }), r("update:modelValue", a);
-    }, f = () => {
-      const e = d.children.filter((a) => a != null && a.disabled ? !1 : !o.modelValue.includes(a.label)).map((a) => a.label);
-      r("update:modelValue", e);
+    });
+    const link = (child) => {
+      child.proxy && state.children.push(child.proxy);
     };
-    return b("parent", {
-      value: n(() => o.modelValue),
-      disabled: n(() => o.disabled),
-      max: n(() => o.max),
-      updateValue: s,
-      link: c,
-      unlink: t
-    }), x(
-      () => o.modelValue,
-      (e) => {
-        r("change", e);
+    const unlink = (child) => {
+      child.proxy && (state.children = state.children.filter((p) => p !== child.proxy));
+    };
+    const updateValue = (value) => {
+      emit("update:modelValue", value);
+      emit("change", value);
+    };
+    const toggleAll = (checked) => {
+      const values = [];
+      if (checked) {
+        state.children.forEach((item) => {
+          if (!(item == null ? void 0 : item.disabled)) {
+            values.push(item == null ? void 0 : item.label);
+          }
+        });
+      }
+      emit("update:modelValue", values);
+    };
+    const toggleReverse = () => {
+      const value = state.children.filter((item) => {
+        if (item == null ? void 0 : item.disabled) {
+          return false;
+        } else {
+          return !props.modelValue.includes(item.label);
+        }
+      }).map((item) => item.label);
+      emit("update:modelValue", value);
+    };
+    provide("parent", {
+      value: computed(() => props.modelValue),
+      disabled: computed(() => props.disabled),
+      max: computed(() => props.max),
+      updateValue,
+      link,
+      unlink
+    });
+    watch(
+      () => props.modelValue,
+      (value) => {
+        emit("change", value);
       }
-    ), i({ toggleAll: p, toggleReverse: f }), () => {
-      var e;
-      return V(
+    );
+    useExpose({ toggleAll, toggleReverse });
+    return () => {
+      var _a;
+      return h(
         "view",
         {
-          class: y
+          class: componentName
         },
-        (e = u.default) == null ? void 0 : e.call(u)
+        (_a = slots.default) == null ? void 0 : _a.call(slots)
       );
     };
   }
 });
 export {
-  E as default
+  _sfc_main as default
 };

package/dist/packages/_es/CircleProgress.js

@@ -1,12 +1,13 @@
-import { useSlots as v, computed as r, openBlock as s, createElementBlock as l, normalizeClass as _, normalizeStyle as p, createElementVNode as n, Fragment as $, renderList as b, renderSlot as C, toDisplayString as N, createCommentVNode as w } from "vue";
-import { g as h, c as j } from "./component-234624bc.js";
-import { _ as B } from "./_plugin-vue_export-helper-dad06003.js";
+import { useSlots, computed, openBlock, createElementBlock, normalizeClass, normalizeStyle, createElementVNode, Fragment, renderList, renderSlot, toDisplayString, createCommentVNode } from "vue";
+import { g as isObject, c as createComponent } from "./component-81a4c1d0.js";
+import { _ as _export_sfc } from "./_plugin-vue_export-helper-cc2b3d55.js";
 import "../locale/lang";
-const { componentName: D, create: W } = j("circle-progress"), F = W({
+const { componentName, create } = createComponent("circle-progress");
+const _sfc_main = create({
   props: {
     progress: {
       type: [Number, String],
-      required: !0
+      required: true
     },
     strokeWidth: {
       type: [Number, String],
@@ -30,94 +31,122 @@ const { componentName: D, create: W } = j("circle-progress"), F = W({
     },
     clockwise: {
       type: Boolean,
-      default: !0
+      default: true
     }
   },
-  setup(e) {
-    const f = !!v().default, a = Math.random().toString(36).slice(-8), m = r(() => ({
-      [D]: !0
-    })), k = r(() => {
-      const t = e.clockwise ? 1 : 0;
-      return `M 50 50 m 0 -45 a 45 45 0 1 ${t} 0 90 a 45 45 0 1, ${t} 0 -90`;
-    }), y = r(() => h(e.color) ? `url(#${a})` : e.color), i = r(() => {
-      let t = 283, d = t * Number(e.progress) / 100;
+  setup(props) {
+    const slotDefault = !!useSlots().default;
+    const refRandomId = Math.random().toString(36).slice(-8);
+    const classes = computed(() => {
+      const prefixCls = componentName;
       return {
-        stroke: h(e.color) ? `url(#${a})` : e.color,
-        strokeDasharray: `${d}px ${t}px`
+        [prefixCls]: true
       };
-    }), u = r(() => ({
-      stroke: e.pathColor
-    })), S = r(() => {
-      if (!h(e.color))
+    });
+    const path = computed(() => {
+      const isWise = props.clockwise ? 1 : 0;
+      return `M 50 50 m 0 -45 a 45 45 0 1 ${isWise} 0 90 a 45 45 0 1, ${isWise} 0 -90`;
+    });
+    const hoverColor = computed(() => {
+      return isObject(props.color) ? `url(#${refRandomId})` : props.color;
+    });
+    const hoverStyle = computed(() => {
+      let perimeter = 283;
+      let offset = perimeter * Number(props.progress) / 100;
+      return {
+        stroke: isObject(props.color) ? `url(#${refRandomId})` : props.color,
+        strokeDasharray: `${offset}px ${perimeter}px`
+      };
+    });
+    const pathStyle = computed(() => {
+      return {
+        stroke: props.pathColor
+      };
+    });
+    const stop = computed(() => {
+      if (!isObject(props.color)) {
         return;
-      let t = e.color;
-      const d = Object.keys(t).sort((c, o) => parseFloat(c) - parseFloat(o));
-      let g = [];
-      return d.map((c) => {
-        let o = {
+      }
+      let color = props.color;
+      const colorArr = Object.keys(color).sort((a, b) => parseFloat(a) - parseFloat(b));
+      let stopArr = [];
+      colorArr.map((item) => {
+        let obj = {
           key: "",
           value: ""
         };
-        o.key = c, o.value = t[c], g.push(o);
-      }), g;
+        obj.key = item;
+        obj.value = color[item];
+        stopArr.push(obj);
+      });
+      return stopArr;
     });
     return {
-      classes: m,
-      hoverStyle: i,
-      pathStyle: u,
-      path: k,
-      hoverColor: y,
-      stop: S,
-      slotDefault: f,
-      refRandomId: a
+      classes,
+      hoverStyle,
+      pathStyle,
+      path,
+      hoverColor,
+      stop,
+      slotDefault,
+      refRandomId
     };
   }
-}), L = { viewBox: "0 0 100 100" }, O = ["id"], z = ["offset", "stop-color"], A = ["d", "stroke-width"], E = ["d", "stroke", "stroke-linecap", "stroke-width"], I = { class: "nut-circle-progress__text" }, M = { key: 0 };
-function R(e, f, a, m, k, y) {
-  return s(), l("div", {
-    class: _(e.classes),
-    style: p({ height: Number(e.radius) * 2 + "px", width: Number(e.radius) * 2 + "px" })
+});
+const _hoisted_1 = { viewBox: "0 0 100 100" };
+const _hoisted_2 = ["id"];
+const _hoisted_3 = ["offset", "stop-color"];
+const _hoisted_4 = ["d", "stroke-width"];
+const _hoisted_5 = ["d", "stroke", "stroke-linecap", "stroke-width"];
+const _hoisted_6 = { class: "nut-circle-progress__text" };
+const _hoisted_7 = { key: 0 };
+function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
+  return openBlock(), createElementBlock("div", {
+    class: normalizeClass(_ctx.classes),
+    style: normalizeStyle({ height: Number(_ctx.radius) * 2 + "px", width: Number(_ctx.radius) * 2 + "px" })
   }, [
-    (s(), l("svg", L, [
-      n("defs", null, [
-        n("linearGradient", {
-          id: e.refRandomId,
+    (openBlock(), createElementBlock("svg", _hoisted_1, [
+      createElementVNode("defs", null, [
+        createElementVNode("linearGradient", {
+          id: _ctx.refRandomId,
           x1: "100%",
           y1: "0%",
           x2: "0%",
           y2: "0%"
         }, [
-          (s(!0), l($, null, b(e.stop, (i, u) => (s(), l("stop", {
-            key: u,
-            offset: i.key,
-            "stop-color": i.value
-          }, null, 8, z))), 128))
-        ], 8, O)
+          (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.stop, (item, index2) => {
+            return openBlock(), createElementBlock("stop", {
+              key: index2,
+              offset: item.key,
+              "stop-color": item.value
+            }, null, 8, _hoisted_3);
+          }), 128))
+        ], 8, _hoisted_2)
       ]),
-      n("path", {
+      createElementVNode("path", {
         class: "nut-circle-progress__path",
-        style: p(e.pathStyle),
-        d: e.path,
+        style: normalizeStyle(_ctx.pathStyle),
+        d: _ctx.path,
         fill: "none",
-        "stroke-width": e.strokeWidth
-      }, " > ", 12, A),
-      n("path", {
+        "stroke-width": _ctx.strokeWidth
+      }, " > ", 12, _hoisted_4),
+      createElementVNode("path", {
         class: "nut-circle-progress__hover",
-        style: p(e.hoverStyle),
-        d: e.path,
+        style: normalizeStyle(_ctx.hoverStyle),
+        d: _ctx.path,
         fill: "none",
-        stroke: e.hoverColor,
-        "stroke-linecap": e.strokeLinecap,
-        "stroke-width": e.strokeWidth
-      }, null, 12, E)
+        stroke: _ctx.hoverColor,
+        "stroke-linecap": _ctx.strokeLinecap,
+        "stroke-width": _ctx.strokeWidth
+      }, null, 12, _hoisted_5)
     ])),
-    n("div", I, [
-      C(e.$slots, "default"),
-      e.slotDefault ? w("", !0) : (s(), l("div", M, N(e.progress) + "%", 1))
+    createElementVNode("div", _hoisted_6, [
+      renderSlot(_ctx.$slots, "default"),
+      !_ctx.slotDefault ? (openBlock(), createElementBlock("div", _hoisted_7, toDisplayString(_ctx.progress) + "%", 1)) : createCommentVNode("", true)
     ])
   ], 6);
 }
-const J = /* @__PURE__ */ B(F, [["render", R]]);
+const index = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
 export {
-  J as default
+  index as default
 };