vue-devui 1.0.0-rc.8 → 1.0.0-rc.9

package/tree/index.es.js

@@ -17,7 +17,7 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { createVNode, defineComponent, toRefs, inject, computed, mergeProps, toRef, provide, renderSlot, useSlots, ref, watch } from "vue";
+import { createVNode, defineComponent, toRefs, inject, computed, toRef, provide, mergeProps, renderSlot, useSlots, ref, watch } from "vue";
 const USE_TREE_TOKEN = "use-tree-token";
 const NODE_HEIGHT = 30;
 const NODE_INDENT = 24;
@@ -79,8 +79,8 @@ function createBem(namespace, element, modifier) {
   }
   return cls;
 }
-function useNamespace(block) {
-  const namespace = `devui-${block}`;
+function useNamespace(block, needDot = false) {
+  const namespace = needDot ? `.devui-${block}` : `devui-${block}`;
   const b = () => createBem(namespace);
   const e = (element) => element ? createBem(namespace, element) : "";
   const m = (modifier) => modifier ? createBem(namespace, "", modifier) : "";
@@ -159,6 +159,10 @@ const commonProps = {
   beforeChange: {
     type: Function,
     default: void 0
+  },
+  size: {
+    type: String,
+    default: "md"
   }
 };
 const checkboxProps = __spreadProps(__spreadValues({}, commonProps), {
@@ -167,11 +171,11 @@ const checkboxProps = __spreadProps(__spreadValues({}, commonProps), {
     default: false
   },
   value: {
-    type: String
+    type: [Number, String]
   },
   label: {
     type: String,
-    default: void 0
+    default: ""
   },
   "onUpdate:checked": {
     type: Function,
@@ -186,6 +190,10 @@ const checkboxProps = __spreadProps(__spreadValues({}, commonProps), {
   },
   "onUpdate:modelValue": {
     type: Function
+  },
+  border: {
+    type: Boolean,
+    default: false
   }
 });
 const checkboxGroupProps = __spreadProps(__spreadValues({}, commonProps), {
@@ -212,162 +220,260 @@ const checkboxGroupProps = __spreadProps(__spreadValues({}, commonProps), {
   "onUpdate:modelValue": {
     type: Function,
     default: void 0
+  },
+  border: {
+    type: Boolean,
+    default: false
+  },
+  max: {
+    type: Number,
+    default: void 0
+  },
+  textColor: {
+    type: String,
+    default: ""
   }
 });
 const checkboxGroupInjectionKey = Symbol("d-checkbox-group");
+function useCheckbox(props, ctx) {
+  const checkboxGroupConf = inject(checkboxGroupInjectionKey, null);
+  const isChecked = computed(() => props.checked || props.modelValue);
+  const mergedChecked = computed(() => {
+    var _a, _b;
+    return (_b = (_a = checkboxGroupConf == null ? void 0 : checkboxGroupConf.isItemChecked) == null ? void 0 : _a.call(checkboxGroupConf, props.value)) != null ? _b : isChecked.value;
+  });
+  const isLimitDisabled = computed(() => {
+    const max = checkboxGroupConf == null ? void 0 : checkboxGroupConf.max.value;
+    return !!max && (checkboxGroupConf == null ? void 0 : checkboxGroupConf.modelValue.value.length) >= max && !mergedChecked.value;
+  });
+  const mergedDisabled = computed(() => {
+    return (checkboxGroupConf == null ? void 0 : checkboxGroupConf.disabled.value) || props.disabled || isLimitDisabled.value;
+  });
+  const mergedIsShowTitle = computed(() => {
+    var _a;
+    return (_a = checkboxGroupConf == null ? void 0 : checkboxGroupConf.isShowTitle.value) != null ? _a : props.isShowTitle;
+  });
+  const mergedShowAnimation = computed(() => {
+    var _a;
+    return (_a = checkboxGroupConf == null ? void 0 : checkboxGroupConf.showAnimation.value) != null ? _a : props.showAnimation;
+  });
+  const mergedColor = computed(() => {
+    var _a;
+    return (_a = checkboxGroupConf == null ? void 0 : checkboxGroupConf.color.value) != null ? _a : props.color;
+  });
+  const itemWidth = checkboxGroupConf == null ? void 0 : checkboxGroupConf.itemWidth.value;
+  const direction = checkboxGroupConf == null ? void 0 : checkboxGroupConf.direction.value;
+  const canChange = (checked, val) => {
+    var _a;
+    if (mergedDisabled.value) {
+      return Promise.resolve(false);
+    }
+    const beforeChange = (_a = props.beforeChange) != null ? _a : checkboxGroupConf == null ? void 0 : checkboxGroupConf.beforeChange;
+    if (beforeChange) {
+      const res = beforeChange(checked, val);
+      if (typeof res === "boolean") {
+        return Promise.resolve(res);
+      }
+      return res;
+    }
+    return Promise.resolve(true);
+  };
+  const toggle = () => {
+    const current = !isChecked.value;
+    checkboxGroupConf == null ? void 0 : checkboxGroupConf.toggleGroupVal(props.value);
+    ctx.emit("update:checked", current);
+    ctx.emit("update:modelValue", current);
+    ctx.emit("change", current);
+  };
+  const handleClick = () => {
+    canChange(!isChecked.value, props.label).then((res) => res && toggle());
+  };
+  const size = computed(() => {
+    var _a;
+    return (_a = checkboxGroupConf == null ? void 0 : checkboxGroupConf.size.value) != null ? _a : props.size;
+  });
+  const border = computed(() => {
+    var _a;
+    return (_a = checkboxGroupConf == null ? void 0 : checkboxGroupConf.border.value) != null ? _a : props.border;
+  });
+  return {
+    mergedChecked,
+    mergedDisabled,
+    mergedIsShowTitle,
+    mergedShowAnimation,
+    mergedColor,
+    itemWidth,
+    direction,
+    handleClick,
+    size,
+    border
+  };
+}
+function useCheckboxGroup(props, ctx) {
+  const valList = toRef(props, "modelValue");
+  const defaultOpt = {
+    checked: false,
+    isShowTitle: true,
+    halfChecked: false,
+    showAnimation: true,
+    disabled: false
+  };
+  const toggleGroupVal = (val) => {
+    let index2 = -1;
+    if (["string", "number"].includes(typeof valList.value[0])) {
+      index2 = valList.value.findIndex((item) => item === val);
+    } else if (typeof valList.value[0] === "object") {
+      index2 = valList.value.findIndex((item) => item.value === val);
+    }
+    if (index2 === -1) {
+      if (typeof props.options[0] === "object") {
+        const newOne = props.options.find((item) => item.value === val);
+        const res2 = [...valList.value, newOne];
+        ctx.emit("update:modelValue", res2);
+        ctx.emit("change", res2);
+        return;
+      }
+      const res = [...valList.value, val];
+      ctx.emit("update:modelValue", res);
+      ctx.emit("change", res);
+      return;
+    }
+    valList.value.splice(index2, 1);
+    ctx.emit("update:modelValue", valList.value);
+    ctx.emit("change", valList.value);
+  };
+  const isItemChecked = (itemVal) => {
+    if (["string", "number"].includes(typeof valList.value[0])) {
+      return valList.value.includes(itemVal);
+    } else if (typeof valList.value[0] === "object") {
+      return valList.value.some((item) => item.value === itemVal);
+    }
+  };
+  provide(checkboxGroupInjectionKey, {
+    disabled: toRef(props, "disabled"),
+    isShowTitle: toRef(props, "isShowTitle"),
+    color: toRef(props, "color"),
+    showAnimation: toRef(props, "showAnimation"),
+    beforeChange: props.beforeChange,
+    isItemChecked,
+    toggleGroupVal,
+    itemWidth: toRef(props, "itemWidth"),
+    direction: toRef(props, "direction"),
+    size: toRef(props, "size"),
+    border: toRef(props, "border"),
+    max: toRef(props, "max"),
+    modelValue: toRef(props, "modelValue"),
+    textColor: toRef(props, "textColor")
+  });
+  return { defaultOpt };
+}
+function useCheckboxButton() {
+  const checkboxGroupConf = inject(checkboxGroupInjectionKey, null);
+  const mergedTextColor = computed(() => {
+    var _a;
+    return (_a = checkboxGroupConf == null ? void 0 : checkboxGroupConf.textColor.value) != null ? _a : void 0;
+  });
+  return {
+    mergedTextColor
+  };
+}
 var checkbox = "";
 var Checkbox = defineComponent({
   name: "DCheckbox",
   props: checkboxProps,
   emits: ["change", "update:checked", "update:modelValue"],
   setup(props, ctx) {
-    const checkboxGroupConf = inject(checkboxGroupInjectionKey, null);
     const ns2 = useNamespace("checkbox");
-    const isChecked = computed(() => props.checked || props.modelValue);
-    const mergedDisabled = computed(() => {
-      return (checkboxGroupConf == null ? void 0 : checkboxGroupConf.disabled.value) || props.disabled;
-    });
-    const mergedChecked = computed(() => {
-      var _a, _b;
-      return (_b = (_a = checkboxGroupConf == null ? void 0 : checkboxGroupConf.isItemChecked) == null ? void 0 : _a.call(checkboxGroupConf, props.value)) != null ? _b : isChecked.value;
-    });
-    const mergedIsShowTitle = computed(() => {
-      var _a;
-      return (_a = checkboxGroupConf == null ? void 0 : checkboxGroupConf.isShowTitle.value) != null ? _a : props.isShowTitle;
-    });
-    const mergedShowAnimation = computed(() => {
-      var _a;
-      return (_a = checkboxGroupConf == null ? void 0 : checkboxGroupConf.showAnimation.value) != null ? _a : props.showAnimation;
-    });
-    const mergedColor = computed(() => {
-      var _a;
-      return (_a = checkboxGroupConf == null ? void 0 : checkboxGroupConf.color.value) != null ? _a : props.color;
-    });
-    const itemWidth = checkboxGroupConf == null ? void 0 : checkboxGroupConf.itemWidth.value;
-    const direction = checkboxGroupConf == null ? void 0 : checkboxGroupConf.direction.value;
-    const canChange = (checked, val) => {
-      var _a;
-      if (mergedDisabled.value) {
-        return Promise.resolve(false);
-      }
-      const beforeChange = (_a = props.beforeChange) != null ? _a : checkboxGroupConf == null ? void 0 : checkboxGroupConf.beforeChange;
-      if (beforeChange) {
-        const res = beforeChange(checked, val);
-        if (typeof res === "boolean") {
-          return Promise.resolve(res);
-        }
-        return res;
-      }
-      return Promise.resolve(true);
-    };
-    const toggle = () => {
-      const current = !isChecked.value;
-      checkboxGroupConf == null ? void 0 : checkboxGroupConf.toggleGroupVal(props.value);
-      ctx.emit("update:checked", current);
-      ctx.emit("update:modelValue", current);
-      ctx.emit("change", current);
-    };
-    const handleClick = () => {
-      canChange(!isChecked.value, props.label).then((res) => res && toggle());
-    };
-    return {
-      itemWidth,
-      direction,
-      mergedColor,
-      mergedDisabled,
-      mergedIsShowTitle,
-      mergedChecked,
-      mergedShowAnimation,
-      handleClick,
-      ns: ns2
-    };
-  },
-  render() {
-    var _a;
     const {
-      itemWidth,
-      direction,
       mergedChecked,
       mergedDisabled,
       mergedIsShowTitle,
       mergedShowAnimation,
-      halfChecked,
-      title,
-      label,
-      handleClick,
-      name,
-      value,
       mergedColor,
-      ns: ns2,
-      $slots
-    } = this;
-    const wrapperCls = {
-      [ns2.e("column-margin")]: direction === "column",
-      [ns2.e("wrap")]: typeof itemWidth !== "undefined"
-    };
-    const wrapperStyle = itemWidth ? [`width: ${itemWidth}px`] : [];
-    const checkboxCls = {
-      [ns2.b()]: true,
-      active: mergedChecked,
-      "half-checked": halfChecked,
-      disabled: mergedDisabled,
-      unchecked: !mergedChecked
-    };
-    const labelTitle = mergedIsShowTitle ? title || label : "";
-    const bgImgStyle = mergedColor && halfChecked || mergedColor ? `linear-gradient(${mergedColor}, ${mergedColor})` : "";
-    const spanStyle = [`border-color:${(mergedChecked || halfChecked) && mergedColor ? mergedColor : ""}`, `background-image:${bgImgStyle}`, `background-color:${mergedColor && halfChecked ? mergedColor : ""}`];
-    const spanCls = {
-      [ns2.e("material")]: true,
-      "custom-color": mergedColor,
-      [ns2.m("no-label")]: !label && !$slots.default,
-      [ns2.m("no-animation")]: !mergedShowAnimation,
-      [ns2.e("default-background")]: !halfChecked
-    };
-    const polygonCls = {
-      [ns2.e("tick")]: true,
-      [ns2.m("no-animation")]: !mergedShowAnimation
-    };
-    const stopPropagation = ($event) => $event.stopPropagation();
-    const inputProps = {
-      indeterminate: halfChecked
+      itemWidth,
+      direction,
+      handleClick,
+      size,
+      border
+    } = useCheckbox(props, ctx);
+    return () => {
+      var _a, _b;
+      const wrapperCls = {
+        [ns2.e("column-margin")]: direction === "column",
+        [ns2.e("wrap")]: typeof itemWidth !== "undefined"
+      };
+      const wrapperStyle = itemWidth ? [`width: ${itemWidth}px`] : [];
+      const checkboxCls = {
+        [ns2.b()]: true,
+        active: mergedChecked.value,
+        "half-checked": props.halfChecked,
+        disabled: mergedDisabled.value,
+        unchecked: !mergedChecked.value
+      };
+      const labelTitle = mergedIsShowTitle.value ? props.title || props.label : "";
+      const bgImgStyle = mergedColor.value && props.halfChecked || mergedColor.value ? `linear-gradient(${mergedColor.value}, ${mergedColor.value})` : "";
+      const spanStyle = [`border-color:${(mergedChecked.value || props.halfChecked) && mergedColor.value ? mergedColor.value : ""}`, `background-image:${bgImgStyle}`, `background-color:${mergedColor.value && props.halfChecked ? mergedColor.value : ""}`];
+      const spanCls = {
+        [ns2.e("material")]: true,
+        "custom-color": mergedColor.value,
+        [ns2.m("no-label")]: !props.label && !ctx.slots.default,
+        [ns2.m("no-animation")]: !mergedShowAnimation.value,
+        [ns2.e("default-background")]: !props.halfChecked
+      };
+      const polygonCls = {
+        [ns2.e("tick")]: true,
+        [ns2.m("no-animation")]: !mergedShowAnimation.value
+      };
+      const labelCls = {
+        [ns2.m(size.value)]: border.value,
+        [ns2.m("bordered")]: border.value
+      };
+      const stopPropagation = ($event) => $event.stopPropagation();
+      const inputProps = {
+        indeterminate: props.halfChecked
+      };
+      return createVNode("div", {
+        "class": wrapperCls,
+        "style": wrapperStyle
+      }, [createVNode("div", {
+        "class": checkboxCls
+      }, [createVNode("label", {
+        "title": labelTitle,
+        "onClick": handleClick,
+        "class": labelCls,
+        "style": {
+          width: itemWidth ? "100%" : "auto"
+        }
+      }, [createVNode("input", mergeProps({
+        "name": props.name || props.value,
+        "class": ns2.e("input"),
+        "type": "checkbox"
+      }, inputProps, {
+        "checked": mergedChecked.value,
+        "disabled": mergedDisabled.value,
+        "onClick": stopPropagation,
+        "onChange": stopPropagation
+      }), null), createVNode("span", {
+        "style": spanStyle,
+        "class": spanCls
+      }, [createVNode("span", {
+        "class": ns2.e("halfchecked-bg")
+      }, null), createVNode("svg", {
+        "viewBox": "0 0 16 16",
+        "version": "1.1",
+        "xmlns": "http://www.w3.org/2000/svg",
+        "class": ns2.e("tick-wrap")
+      }, [createVNode("g", {
+        "stroke": "none",
+        "stroke-width": "1",
+        "fill": "none",
+        "fill-rule": "evenodd"
+      }, [createVNode("polygon", {
+        "fill-rule": "nonzero",
+        "points": "5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043",
+        "class": polygonCls
+      }, null)])])]), props.label || ((_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a))])])]);
     };
-    return createVNode("div", {
-      "class": wrapperCls,
-      "style": wrapperStyle
-    }, [createVNode("div", {
-      "class": checkboxCls
-    }, [createVNode("label", {
-      "title": labelTitle,
-      "onClick": handleClick
-    }, [createVNode("input", mergeProps({
-      "name": name || value,
-      "class": ns2.e("input"),
-      "type": "checkbox"
-    }, inputProps, {
-      "checked": mergedChecked,
-      "disabled": mergedDisabled,
-      "onClick": stopPropagation,
-      "onChange": stopPropagation
-    }), null), createVNode("span", {
-      "style": spanStyle,
-      "class": spanCls
-    }, [createVNode("span", {
-      "class": ns2.e("halfchecked-bg")
-    }, null), createVNode("svg", {
-      "viewBox": "0 0 16 16",
-      "version": "1.1",
-      "xmlns": "http://www.w3.org/2000/svg",
-      "class": ns2.e("tick-wrap")
-    }, [createVNode("g", {
-      "stroke": "none",
-      "stroke-width": "1",
-      "fill": "none",
-      "fill-rule": "evenodd"
-    }, [createVNode("polygon", {
-      "fill-rule": "nonzero",
-      "points": "5.17391304 6.56521739 7.7173913 9.10869565 11.826087 5 13 6.17391304 7.7173913 11.4565217 4 7.73913043",
-      "class": polygonCls
-    }, null)])])]), label || ((_a = $slots.default) == null ? void 0 : _a.call($slots))])])]);
   }
 });
 var checkboxGroup = "";
@@ -376,92 +482,97 @@ defineComponent({
   props: checkboxGroupProps,
   emits: ["change", "update:modelValue"],
   setup(props, ctx) {
-    const valList = toRef(props, "modelValue");
-    const defaultOpt = {
-      checked: false,
-      isShowTitle: true,
-      halfChecked: false,
-      showAnimation: true,
-      disabled: false
-    };
-    const toggleGroupVal = (val) => {
-      let index2 = -1;
-      if (typeof valList.value[0] === "string") {
-        index2 = valList.value.findIndex((item) => item === val);
-      } else if (typeof valList.value[0] === "object") {
-        index2 = valList.value.findIndex((item) => item.value === val);
-      }
-      if (index2 === -1) {
-        if (typeof props.options[0] === "object") {
-          const newOne = props.options.find((item) => item.value === val);
-          const res2 = [...valList.value, newOne];
-          ctx.emit("update:modelValue", res2);
-          ctx.emit("change", res2);
-          return;
-        }
-        const res = [...valList.value, val];
-        ctx.emit("update:modelValue", res);
-        ctx.emit("change", res);
-        return;
-      }
-      valList.value.splice(index2, 1);
-      ctx.emit("update:modelValue", valList.value);
-      ctx.emit("change", valList.value);
-    };
-    const isItemChecked = (itemVal) => {
-      if (typeof valList.value[0] === "string") {
-        return valList.value.includes(itemVal);
-      } else if (typeof valList.value[0] === "object") {
-        return valList.value.some((item) => item.value === itemVal);
-      }
-    };
-    provide(checkboxGroupInjectionKey, {
-      disabled: toRef(props, "disabled"),
-      isShowTitle: toRef(props, "isShowTitle"),
-      color: toRef(props, "color"),
-      showAnimation: toRef(props, "showAnimation"),
-      beforeChange: props.beforeChange,
-      isItemChecked,
-      toggleGroupVal,
-      itemWidth: toRef(props, "itemWidth"),
-      direction: toRef(props, "direction")
-    });
-    return {
+    const ns2 = useNamespace("checkbox");
+    const {
       defaultOpt
+    } = useCheckboxGroup(props, ctx);
+    return () => {
+      var _a, _b;
+      let children = (_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a);
+      const getContent = () => {
+        var _a2;
+        if (children) {
+          return children;
+        } else {
+          if (((_a2 = props.options) == null ? void 0 : _a2.length) > 0) {
+            children = props.options.map((opt) => {
+              let mergedOpt = null;
+              if (typeof opt === "string") {
+                mergedOpt = Object.assign({}, defaultOpt, {
+                  label: opt,
+                  value: opt
+                });
+              } else if (typeof opt === "object") {
+                mergedOpt = Object.assign({}, defaultOpt, __spreadProps(__spreadValues({}, opt), {
+                  label: opt.name
+                }));
+              }
+              return createVNode(Checkbox, mergedOpt, null);
+            });
+          }
+          return children;
+        }
+      };
+      return createVNode("div", {
+        "class": ns2.e("group")
+      }, [createVNode("div", {
+        "class": {
+          [ns2.m("list-inline")]: props.direction === "row"
+        }
+      }, [getContent()])]);
     };
-  },
-  render() {
-    var _a;
+  }
+});
+var checkboxButton = "";
+defineComponent({
+  name: "DCheckboxButton",
+  props: checkboxProps,
+  emits: ["change", "update:checked", "update:modelValue"],
+  setup(props, ctx) {
+    const ns2 = useNamespace("checkbox-button");
     const {
-      direction,
-      $slots,
-      defaultOpt,
-      options
-    } = this;
-    let children = (_a = $slots.default) == null ? void 0 : _a.call($slots);
-    if ((options == null ? void 0 : options.length) > 0) {
-      children = options.map((opt) => {
-        let mergedOpt = null;
-        if (typeof opt === "string") {
-          mergedOpt = Object.assign({}, defaultOpt, {
-            label: opt,
-            value: opt
-          });
-        } else if (typeof opt === "object") {
-          mergedOpt = Object.assign({}, defaultOpt, __spreadProps(__spreadValues({}, opt), {
-            label: opt.name
-          }));
-        }
-        return createVNode(Checkbox, mergedOpt, null);
-      });
-    }
-    return createVNode("div", {
-      "class": "devui-checkbox-group"
-    }, [createVNode("div", {
-      "class": {
-        "devui-checkbox-list-inline": direction === "row"
-      }
-    }, [children])]);
+      mergedChecked,
+      mergedDisabled,
+      mergedIsShowTitle,
+      mergedColor,
+      handleClick,
+      size
+    } = useCheckbox(props, ctx);
+    const {
+      mergedTextColor
+    } = useCheckboxButton();
+    return () => {
+      var _a, _b;
+      const labelTitle = mergedIsShowTitle.value ? props.title || props.label : "";
+      const spanStyle = [`border-color:${mergedChecked.value && mergedColor.value ? mergedColor.value : ""}`, `background-color:${mergedChecked.value && mergedColor.value ? mergedColor.value : ""}`, `color:${mergedChecked.value && mergedTextColor.value ? mergedTextColor.value : ""}`];
+      const labelCls = {
+        [ns2.b()]: true,
+        active: mergedChecked.value,
+        disabled: mergedDisabled.value,
+        unchecked: !mergedChecked.value
+      };
+      const spanCls = {
+        [ns2.e("content")]: true,
+        [ns2.m(size.value)]: true
+      };
+      const stopPropagation = ($event) => $event.stopPropagation();
+      return createVNode("label", {
+        "title": labelTitle,
+        "onClick": handleClick,
+        "class": labelCls
+      }, [createVNode("input", {
+        "name": props.name || props.value,
+        "class": ns2.e("input"),
+        "type": "checkbox",
+        "checked": mergedChecked.value,
+        "disabled": mergedDisabled.value,
+        "onClick": stopPropagation,
+        "onChange": stopPropagation
+      }, null), createVNode("span", {
+        "style": spanStyle,
+        "class": spanCls
+      }, [props.label || ((_b = (_a = ctx.slots).default) == null ? void 0 : _b.call(_a))])]);
+    };
   }
 });
 const ns = useNamespace("tree");