vue-devui 1.0.0-rc.2 → 1.0.0-rc.5

package/select/index.es.js

@@ -0,0 +1,696 @@
+var __defProp = Object.defineProperty;
+var __defProps = Object.defineProperties;
+var __getOwnPropDescs = Object.getOwnPropertyDescriptors;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp = (obj, key, value) => key in obj ? __defProp(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp(a, prop, b[prop]);
+    }
+  return a;
+};
+var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
+import { defineComponent, toRefs, createVNode, inject, computed, mergeProps, toRef, provide, onMounted, onBeforeUnmount, ref, Transition, withDirectives, vShow } from "vue";
+const selectProps = {
+  modelValue: {
+    type: [String, Number, Array],
+    default: ""
+  },
+  "onUpdate:modelValue": {
+    type: Function,
+    default: void 0
+  },
+  options: {
+    type: Array,
+    default: () => []
+  },
+  size: {
+    type: String,
+    default: "md"
+  },
+  overview: {
+    type: String,
+    default: "border"
+  },
+  placeholder: {
+    type: String,
+    default: "\u8BF7\u9009\u62E9"
+  },
+  multiple: {
+    type: Boolean,
+    default: false
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  allowClear: {
+    type: Boolean,
+    default: false
+  },
+  optionDisabledKey: {
+    type: String,
+    default: ""
+  },
+  onToggleChange: {
+    type: Function,
+    default: void 0
+  },
+  onValueChange: {
+    type: Function,
+    default: void 0
+  }
+};
+const iconProps = {
+  name: {
+    type: String,
+    default: "",
+    required: true
+  },
+  size: {
+    type: String,
+    default: "inherit"
+  },
+  color: {
+    type: String,
+    default: "inherit"
+  },
+  classPrefix: {
+    type: String,
+    default: "icon"
+  }
+};
+var Icon = defineComponent({
+  name: "DIcon",
+  props: iconProps,
+  setup(props) {
+    const {
+      name,
+      size,
+      color,
+      classPrefix
+    } = toRefs(props);
+    return () => {
+      return /^((https?):)?\/\//.test(name.value) ? createVNode("img", {
+        "src": name.value,
+        "alt": name.value.split("/")[name.value.split("/").length - 1],
+        "style": {
+          width: size.value,
+          verticalAlign: "text-bottom"
+        }
+      }, null) : createVNode("i", {
+        "class": `${classPrefix.value} ${classPrefix.value}-${name.value}`,
+        "style": {
+          fontSize: size.value,
+          color: color.value
+        }
+      }, null);
+    };
+  }
+});
+var checkbox = "";
+const commonProps = {
+  name: {
+    type: String,
+    default: void 0
+  },
+  halfchecked: {
+    type: Boolean,
+    default: false
+  },
+  isShowTitle: {
+    type: Boolean,
+    default: true
+  },
+  title: {
+    type: String
+  },
+  color: {
+    type: String,
+    default: void 0
+  },
+  showAnimation: {
+    type: Boolean,
+    default: true
+  },
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  beforeChange: {
+    type: Function,
+    default: void 0
+  }
+};
+const checkboxProps = __spreadProps(__spreadValues({}, commonProps), {
+  halfchecked: {
+    type: Boolean,
+    default: false
+  },
+  checked: {
+    type: Boolean,
+    default: false
+  },
+  value: {
+    type: String
+  },
+  label: {
+    type: String,
+    default: void 0
+  },
+  title: {
+    type: String,
+    default: void 0
+  },
+  "onUpdate:checked": {
+    type: Function,
+    default: void 0
+  },
+  onChange: {
+    type: Function,
+    default: void 0
+  },
+  modelValue: {
+    type: Boolean
+  },
+  "onUpdate:modelValue": {
+    type: Function
+  }
+});
+const checkboxGroupProps = __spreadProps(__spreadValues({}, commonProps), {
+  modelValue: {
+    type: Array,
+    required: true
+  },
+  direction: {
+    type: String,
+    default: "column"
+  },
+  itemWidth: {
+    type: Number,
+    default: void 0
+  },
+  options: {
+    type: Array,
+    default: () => []
+  },
+  onChange: {
+    type: Function,
+    default: void 0
+  },
+  "onUpdate:modelValue": {
+    type: Function,
+    default: void 0
+  }
+});
+const checkboxGroupInjectionKey = Symbol("d-checkbox-group");
+var Checkbox = defineComponent({
+  name: "DCheckbox",
+  props: checkboxProps,
+  emits: ["change", "update:checked", "update:modelValue"],
+  setup(props, ctx) {
+    const checkboxGroupConf = inject(checkboxGroupInjectionKey, null);
+    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
+    };
+  },
+  render() {
+    var _a;
+    const {
+      itemWidth,
+      direction,
+      mergedChecked,
+      mergedDisabled,
+      mergedIsShowTitle,
+      mergedShowAnimation,
+      halfchecked,
+      title,
+      label,
+      handleClick,
+      name,
+      value,
+      mergedColor,
+      $slots
+    } = this;
+    const wrapperCls = {
+      "devui-checkbox-column-margin": direction === "column",
+      "devui-checkbox-wrap": typeof itemWidth !== "undefined"
+    };
+    const wrapperStyle = itemWidth ? [`width: ${itemWidth}px`] : [];
+    const checkboxCls = {
+      "devui-checkbox": true,
+      active: mergedChecked,
+      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 = {
+      "devui-checkbox-material": true,
+      "custom-color": mergedColor,
+      "devui-checkbox-no-label": !label && !$slots.default,
+      "devui-no-animation": !mergedShowAnimation,
+      "devui-checkbox-default-background": !halfchecked
+    };
+    const polygonCls = {
+      "devui-tick": true,
+      "devui-no-animation": !mergedShowAnimation
+    };
+    const stopPropagation = ($event) => $event.stopPropagation();
+    const inputProps = {
+      indeterminate: halfchecked
+    };
+    return createVNode("div", {
+      "class": wrapperCls,
+      "style": wrapperStyle
+    }, [createVNode("div", {
+      "class": checkboxCls
+    }, [createVNode("label", {
+      "title": labelTitle,
+      "onClick": handleClick
+    }, [createVNode("input", mergeProps({
+      "name": name || value,
+      "class": "devui-checkbox-input",
+      "type": "checkbox"
+    }, inputProps, {
+      "checked": mergedChecked,
+      "disabled": mergedDisabled,
+      "onClick": stopPropagation,
+      "onChange": stopPropagation
+    }), null), createVNode("span", {
+      "style": spanStyle,
+      "class": spanCls
+    }, [createVNode("span", {
+      "class": "devui-checkbox-halfchecked-bg"
+    }, null), createVNode("svg", {
+      "viewBox": "0 0 16 16",
+      "version": "1.1",
+      "xmlns": "http://www.w3.org/2000/svg",
+      "class": "devui-checkbox-tick"
+    }, [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 = "";
+defineComponent({
+  name: "DCheckboxGroup",
+  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 {
+      defaultOpt
+    };
+  },
+  render() {
+    var _a;
+    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])]);
+  }
+});
+function className(classStr, classOpt) {
+  let classname = classStr;
+  if (typeof classOpt === "object") {
+    Object.keys(classOpt).forEach((key) => {
+      classOpt[key] && (classname += ` ${key}`);
+    });
+  }
+  return classname;
+}
+function useCacheOptions(mergeOptions) {
+  const cacheOptions = computed(() => {
+    const map = /* @__PURE__ */ new Map();
+    mergeOptions.value.forEach((item) => {
+      map.set(item.value, item);
+    });
+    return map;
+  });
+  const getValuesOption = (values) => values.map((value) => cacheOptions.value.get(value));
+  return getValuesOption;
+}
+function useSelectOutsideClick(refs, isOpen, toggleChange) {
+  function onGlobalMouseDown(e) {
+    var _a, _b;
+    let target = e.target;
+    if (target.shadowRoot && e.composed) {
+      target = e.composedPath()[0] || target;
+    }
+    const element = [(_a = refs[0]) == null ? void 0 : _a.value, (_b = refs[1]) == null ? void 0 : _b.value];
+    if (isOpen.value && element.every((el) => el && !el.contains(target) && el !== target)) {
+      toggleChange(false);
+    }
+  }
+  onMounted(() => {
+    document.body.addEventListener("mousedown", onGlobalMouseDown, false);
+  });
+  onBeforeUnmount(() => {
+    document.body.addEventListener("mousedown", onGlobalMouseDown, false);
+  });
+}
+var select = "";
+var Select = defineComponent({
+  name: "DSelect",
+  props: selectProps,
+  emits: ["toggleChange", "valueChange", "update:modelValue"],
+  setup(props, ctx) {
+    const containerRef = ref(null);
+    const dropdownRef = ref(null);
+    const isOpen = ref(false);
+    function toggleChange(bool) {
+      if (props.disabled) {
+        return;
+      }
+      isOpen.value = bool;
+      ctx.emit("toggleChange", bool);
+    }
+    useSelectOutsideClick([containerRef, dropdownRef], isOpen, toggleChange);
+    const mergeOptions = computed(() => {
+      const {
+        multiple,
+        modelValue
+      } = props;
+      return props.options.map((item) => {
+        let option;
+        if (typeof item === "object") {
+          option = __spreadValues({
+            name: item.name ? item.name : item.value + "",
+            _checked: false
+          }, item);
+        } else {
+          option = {
+            name: item + "",
+            value: item,
+            _checked: false
+          };
+        }
+        if (multiple) {
+          if (Array.isArray(modelValue)) {
+            option._checked = modelValue.includes(option.value);
+          } else {
+            option._checked = false;
+          }
+        }
+        return option;
+      });
+    });
+    const getValuesOption = useCacheOptions(mergeOptions);
+    const inputValue = computed(() => {
+      var _a;
+      if (props.multiple && Array.isArray(props.modelValue)) {
+        const selectedOptions = getValuesOption(props.modelValue);
+        return selectedOptions.map((item) => (item == null ? void 0 : item.name) || "").join(",");
+      } else if (!Array.isArray(props.modelValue)) {
+        return ((_a = getValuesOption([props.modelValue])[0]) == null ? void 0 : _a.name) || "";
+      }
+      return "";
+    });
+    const mergeClearable = computed(() => {
+      return !props.disabled && props.allowClear && inputValue.value.length > 0;
+    });
+    function valueChange(item, index2) {
+      const {
+        multiple,
+        optionDisabledKey: disabledKey
+      } = props;
+      let {
+        modelValue
+      } = props;
+      if (disabledKey && !!item[disabledKey]) {
+        return;
+      }
+      if (multiple) {
+        item._checked = !item._checked;
+        modelValue = mergeOptions.value.filter((item1) => item1._checked).map((item2) => item2.value);
+        ctx.emit("update:modelValue", modelValue);
+      } else {
+        ctx.emit("update:modelValue", item.value);
+        toggleChange(false);
+      }
+      ctx.emit("valueChange", item, index2);
+    }
+    function getItemClassName(item) {
+      const {
+        optionDisabledKey: disabledKey
+      } = props;
+      return className("devui-select-item", {
+        active: item.value === props.modelValue,
+        disabled: disabledKey ? !!item[disabledKey] : false
+      });
+    }
+    function handleClear(e) {
+      e.preventDefault();
+      e.stopPropagation();
+      if (props.multiple) {
+        ctx.emit("update:modelValue", []);
+      } else {
+        ctx.emit("update:modelValue", "");
+      }
+    }
+    return {
+      isOpen,
+      containerRef,
+      dropdownRef,
+      inputValue,
+      mergeOptions,
+      mergeClearable,
+      valueChange,
+      toggleChange,
+      getItemClassName,
+      handleClear
+    };
+  },
+  render() {
+    const {
+      mergeOptions,
+      isOpen,
+      inputValue,
+      size,
+      multiple,
+      disabled,
+      optionDisabledKey: disabledKey,
+      placeholder,
+      overview,
+      valueChange,
+      toggleChange,
+      getItemClassName,
+      mergeClearable,
+      handleClear
+    } = this;
+    const selectCls = className("devui-select", {
+      "devui-select-open": isOpen,
+      "devui-dropdown-menu-multiple": multiple,
+      "devui-select-lg": size === "lg",
+      "devui-select-sm": size === "sm",
+      "devui-select-underlined": overview === "underlined",
+      "devui-select-disabled": disabled
+    });
+    const inputCls = className("devui-select-input", {
+      "devui-select-input-lg": size === "lg",
+      "devui-select-input-sm": size === "sm"
+    });
+    const selectionCls = className("devui-select-selection", {
+      "devui-select-clearable": mergeClearable
+    });
+    return createVNode("div", {
+      "class": selectCls,
+      "ref": "containerRef"
+    }, [createVNode("div", {
+      "class": selectionCls,
+      "onClick": () => toggleChange(!isOpen)
+    }, [createVNode("input", {
+      "value": inputValue,
+      "type": "text",
+      "class": inputCls,
+      "placeholder": placeholder,
+      "readonly": true,
+      "disabled": disabled
+    }, null), createVNode("span", {
+      "onClick": handleClear,
+      "class": "devui-select-clear"
+    }, [createVNode(Icon, {
+      "name": "close"
+    }, null)]), createVNode("span", {
+      "class": "devui-select-arrow"
+    }, [createVNode(Icon, {
+      "name": "select-arrow"
+    }, null)])]), createVNode(Transition, {
+      "name": "fade",
+      "ref": "dropdownRef"
+    }, {
+      default: () => [withDirectives(createVNode("div", {
+        "class": "devui-select-dropdown"
+      }, [createVNode("ul", {
+        "class": "devui-select-dropdown-list devui-scrollbar"
+      }, [mergeOptions.map((item, i) => createVNode("li", {
+        "onClick": (e) => {
+          e.preventDefault();
+          e.stopPropagation();
+          valueChange(item, i);
+        },
+        "class": getItemClassName(item),
+        "key": i
+      }, [multiple ? createVNode(Checkbox, {
+        "modelValue": item._checked,
+        "label": item.name,
+        "disabled": disabledKey ? !!item[disabledKey] : false
+      }, null) : item.name]))])]), [[vShow, isOpen]])]
+    })]);
+  }
+});
+var index = {
+  title: "Select \u4E0B\u62C9\u6846",
+  category: "\u6570\u636E\u5F55\u5165",
+  status: "10%",
+  install(app) {
+    app.component(Select.name, Select);
+  }
+};
+export { Select, index as default };