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

package/select/index.es.js

@@ -1,706 +0,0 @@
-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 = (isChecked2, 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(isChecked2, 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 = "";
-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])]);
-  }
-});
-Checkbox.install = function(app) {
-  app.component(Checkbox.name, Checkbox);
-};
-CheckboxGroup.install = function(app) {
-  app.component(CheckboxGroup.name, CheckboxGroup);
-};
-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 + "",
-            value: 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.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((item2) => item2._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]])]
-    })]);
-  }
-});
-Select.install = function(app) {
-  app.component(Select.name, Select);
-};
-var index = {
-  title: "Select \u4E0B\u62C9\u6846",
-  category: "\u6570\u636E\u5F55\u5165",
-  status: "10%",
-  install(app) {
-    app.use(Select);
-  }
-};
-export { Select, index as default };