vue-devui 1.6.4 → 1.6.6

package/editable-select/index.es.js

@@ -18,7 +18,7 @@ var __publicField = (obj, key, value) => {
   __defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
   return value;
 };
-import { defineComponent, toRefs, computed, createVNode, resolveDynamicComponent, mergeProps, watch, onUnmounted, Transition, ref, unref, nextTick, withModifiers, inject, h, render, withDirectives, resolveDirective, renderSlot, useSlots, reactive, getCurrentInstance, onMounted, provide, toRef, vShow, Teleport, isVNode } from "vue";
+import { watch, onUnmounted, defineComponent, toRefs, createVNode, Transition, mergeProps, ref, unref, nextTick, withModifiers, inject, computed, h, render, withDirectives, resolveDirective, renderSlot, useSlots, reactive, getCurrentInstance, onMounted, provide, toRef, vShow, Teleport, isVNode } from "vue";
 import { onClickOutside } from "@vueuse/core";
 import { offset, autoPlacement, arrow, shift, computePosition } from "@floating-ui/dom";
 const editableSelectProps = {
@@ -79,204 +79,13 @@ const editableSelectProps = {
   enableLazyLoad: {
     type: Boolean,
     default: false
-  }
-};
-const SELECT_KEY = Symbol("EditableSelect");
-const DEFAULT_PREFIX = "icon";
-const iconProps = {
-  name: {
-    type: String,
-    default: "",
-    required: true
-  },
-  size: {
-    type: [Number, String],
-    default: "inherit"
-  },
-  color: {
-    type: String,
-    default: "inherit"
-  },
-  component: {
-    type: Object,
-    default: null
-  },
-  classPrefix: {
-    type: String,
-    default: DEFAULT_PREFIX
-  },
-  operable: {
-    type: Boolean,
-    default: false
   },
-  disabled: {
+  showGlowStyle: {
     type: Boolean,
-    default: false
-  },
-  rotate: {
-    type: [Number, String]
-  }
-};
-const svgIconProps = {
-  name: {
-    type: String,
-    default: "",
-    required: true
-  },
-  color: {
-    type: String,
-    default: "inherit"
-  },
-  size: {
-    type: [Number, String],
-    default: "inherit"
+    default: true
   }
 };
-function createBem(namespace, element, modifier) {
-  let cls = namespace;
-  if (element) {
-    cls += `__${element}`;
-  }
-  if (modifier) {
-    cls += `--${modifier}`;
-  }
-  return cls;
-}
-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) : "";
-  const em = (element, modifier) => element && modifier ? createBem(namespace, element, modifier) : "";
-  return {
-    b,
-    e,
-    m,
-    em
-  };
-}
-var icon = "";
-var svgIcon = defineComponent({
-  name: "DSvgIcon",
-  props: svgIconProps,
-  setup(props) {
-    const {
-      name,
-      color,
-      size
-    } = toRefs(props);
-    const ns = useNamespace("svg-icon");
-    const iconName = computed(() => `#icon-${name.value}`);
-    const iconSize = computed(() => {
-      return typeof size.value === "number" ? `${size.value}px` : size.value;
-    });
-    const styles = {
-      width: iconSize.value,
-      height: iconSize.value
-    };
-    return () => {
-      return createVNode("svg", {
-        "class": ns.b(),
-        "style": styles
-      }, [createVNode("use", {
-        "xlink:href": iconName.value,
-        "fill": color.value
-      }, null)]);
-    };
-  }
-});
-function isUrl(value) {
-  return /^((http|https):)?\/\//.test(value);
-}
-function useIconDom(props, ctx) {
-  const {
-    component,
-    name,
-    size,
-    color,
-    classPrefix,
-    rotate
-  } = toRefs(props);
-  const ns = useNamespace("icon");
-  const iconSize = computed(() => {
-    return typeof size.value === "number" ? `${size.value}px` : size.value;
-  });
-  const IconComponent = component.value ? resolveDynamicComponent(component.value) : resolveDynamicComponent(svgIcon);
-  const imgIconDom = () => {
-    return createVNode("img", mergeProps({
-      "src": name.value,
-      "alt": name.value.split("/")[name.value.split("/").length - 1],
-      "class": [(rotate == null ? void 0 : rotate.value) === "infinite" && ns.m("spin")],
-      "style": {
-        width: iconSize.value || "",
-        transform: `rotate(${rotate == null ? void 0 : rotate.value}deg)`,
-        verticalAlign: "middle"
-      }
-    }, ctx.attrs), null);
-  };
-  const svgIconDom = () => {
-    return createVNode(IconComponent, mergeProps({
-      "name": name.value,
-      "color": color.value,
-      "size": iconSize.value,
-      "class": [(rotate == null ? void 0 : rotate.value) === "infinite" && ns.m("spin")],
-      "style": {
-        transform: `rotate(${rotate == null ? void 0 : rotate.value}deg)`
-      }
-    }, ctx.attrs), null);
-  };
-  const fontIconDom = () => {
-    const fontIconClass = /^icon-/.test(name.value) ? name.value : `${classPrefix.value}-${name.value}`;
-    return createVNode("i", mergeProps({
-      "class": [classPrefix.value, fontIconClass, (rotate == null ? void 0 : rotate.value) === "infinite" && ns.m("spin")],
-      "style": {
-        fontSize: iconSize.value,
-        color: color.value,
-        transform: `rotate(${rotate == null ? void 0 : rotate.value}deg)`
-      }
-    }, ctx.attrs), null);
-  };
-  const iconDom = () => {
-    return component.value ? svgIconDom() : isUrl(name.value) ? imgIconDom() : fontIconDom();
-  };
-  return {
-    iconDom
-  };
-}
-var Icon = defineComponent({
-  name: "DIcon",
-  props: iconProps,
-  emits: ["click"],
-  setup(props, ctx) {
-    const {
-      disabled,
-      operable
-    } = toRefs(props);
-    const {
-      iconDom
-    } = useIconDom(props, ctx);
-    const ns = useNamespace("icon");
-    const wrapClassed = computed(() => ({
-      [ns.e("container")]: true,
-      [ns.m("disabled")]: disabled.value,
-      [ns.m("operable")]: operable.value,
-      [ns.m("no-slots")]: !Object.keys(ctx.slots).length
-    }));
-    const onClick = (e) => {
-      if (disabled.value) {
-        return;
-      }
-      ctx.emit("click", e);
-    };
-    return () => {
-      var _a, _b, _c, _d;
-      return createVNode("div", {
-        "class": wrapClassed.value,
-        "onClick": onClick
-      }, [(_b = (_a = ctx.slots).prefix) == null ? void 0 : _b.call(_a), iconDom(), (_d = (_c = ctx.slots).suffix) == null ? void 0 : _d.call(_c)]);
-    };
-  }
-});
+const SELECT_KEY = Symbol("EditableSelect");
 const fixedOverlayProps = {
   modelValue: {
     type: Boolean,
@@ -332,6 +141,29 @@ function useFixedOverlay(props, ctx) {
   onUnmounted(removeBodyAdditions);
   return { onClick };
 }
+function createBem(namespace, element, modifier) {
+  let cls = namespace;
+  if (element) {
+    cls += `__${element}`;
+  }
+  if (modifier) {
+    cls += `--${modifier}`;
+  }
+  return cls;
+}
+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) : "";
+  const em = (element, modifier) => element && modifier ? createBem(namespace, element, modifier) : "";
+  return {
+    b,
+    e,
+    m,
+    em
+  };
+}
 var fixedOverlay = "";
 defineComponent({
   name: "DFixedOverlay",
@@ -6255,7 +6087,7 @@ var Dropdown = defineComponent({
       debounceLoadMore();
     };
     const renderOption = () => {
-      if (props.options.length === 0) {
+      if (props.options.length === 0 && !select.loading.value) {
         return createVNode("li", {
           "class": ns.em("item", "no-data-tip")
         }, [slots.noResultItem ? slots.noResultItem() : emptyText.value]);
@@ -6294,6 +6126,45 @@ var Dropdown = defineComponent({
     };
   }
 });
+function SelectArrowIcon() {
+  return createVNode("svg", {
+    "width": "16px",
+    "height": "16px",
+    "viewBox": "0 0 16 16",
+    "version": "1.1",
+    "xmlns": "http://www.w3.org/2000/svg"
+  }, [createVNode("g", {
+    "stroke": "none",
+    "stroke-width": "1",
+    "fill": "none",
+    "fill-rule": "evenodd"
+  }, [createVNode("path", {
+    "d": `M3.64644661,5.64644661 C3.82001296,5.47288026 4.08943736,5.45359511 4.2843055,5.58859116 L4.35355339,5.64644661 
+          L8,9.293 L11.6464466,5.64644661 C11.820013,5.47288026 12.0894374,5.45359511 12.2843055,5.58859116 L12.3535534,5.64644661 
+          C12.5271197,5.82001296 12.5464049,6.08943736 12.4114088,6.2843055 L12.3535534,6.35355339 L8.35355339,10.3535534 
+          C8.17998704,10.5271197 7.91056264,10.5464049 7.7156945,10.4114088 L7.64644661,10.3535534 L3.64644661,6.35355339 
+          C3.45118446,6.15829124 3.45118446,5.84170876 3.64644661,5.64644661 Z`
+  }, null)])]);
+}
+function InputClearIcon() {
+  return createVNode("svg", {
+    "width": "16px",
+    "height": "16px",
+    "viewBox": "0 0 16 16",
+    "version": "1.1",
+    "xmlns": "http://www.w3.org/2000/svg"
+  }, [createVNode("g", {
+    "stroke": "none",
+    "stroke-width": "1",
+    "fill": "none",
+    "fill-rule": "evenodd"
+  }, [createVNode("path", {
+    "d": "M8,1 C11.8659932,1 15,4.13400675 15,8 C15,11.8659932 11.8659932,15 8,15 C4.13400675,15 1,11.8659932 1,8 C1,4.13400675           4.13400675,1 8,1 Z M5.87867966,5.17157288 C5.68341751,4.97631073 5.36683502,4.97631073 5.17157288,5.17157288           C4.99800652,5.34513923 4.97872137,5.61456363 5.11371742,5.80943177 L5.17157288,5.87867966 L7.29218611,7.99929289           L5.17157288,10.1213203 C4.97631073,10.3165825 4.97631073,10.633165 5.17157288,10.8284271 C5.34513923,11.0019935           5.61456363,11.0212786 5.80943177,10.8862826 L5.87867966,10.8284271 L7.99929289,8.70639967 L10.1213203,10.8284271           C10.3165825,11.0236893 10.633165,11.0236893 10.8284271,10.8284271 C11.0019935,10.6548608 11.0212786,10.3854364           10.8862826,10.1905682 L10.8284271,10.1213203 L8.70710678,8 L10.8284271,5.87867966 C11.0236893,5.68341751           11.0236893,5.36683502 10.8284271,5.17157288 C10.6548608,4.99800652 10.3854364,4.97872137 10.1905682,5.11371742           L10.1213203,5.17157288 L8,7.29289322 L5.87867966,5.17157288 Z",
+    "id": "\u5F62\u72B6",
+    "fill": "#D5D5DB",
+    "fill-rule": "nonzero"
+  }, null)])]);
+}
 function deepAssign(...objects) {
   const isObject = (obj) => obj && typeof obj === "object";
   return objects.reduce((prev, from) => {
@@ -6672,7 +6543,8 @@ function useInputRender(props, states) {
   const inputWrapperClasses = computed(() => ({
     [ns.e("wrapper")]: true,
     [ns.em("wrapper", "focus")]: states.isFocus,
-    [ns.em("wrapper", "disabled")]: props.disabled
+    [ns.em("wrapper", "disabled")]: props.disabled,
+    [ns.em("wrapper", "glow-style")]: props.showGlowStyle
   }));
   const inputInnerClasses = computed(() => ({
     [ns.e("inner")]: true
@@ -6803,6 +6675,7 @@ var EditableSelect = defineComponent({
       position,
       placeholder
     } = toRefs(props);
+    const align = computed(() => position.value.some((item) => item.includes("start") || item.includes("end")) ? "start" : null);
     const {
       onInput,
       onMouseenter,
@@ -6851,9 +6724,17 @@ var EditableSelect = defineComponent({
       inputInnerClasses,
       inputSuffixClasses
     } = useInputRender(props, states);
+    const currentPosition = ref("bottom");
+    const handlePositionChange = (pos) => {
+      currentPosition.value = pos.includes("top") || pos.includes("right-end") || pos.includes("left-end") ? "top" : "bottom";
+    };
+    const styles = computed(() => ({
+      transformOrigin: currentPosition.value === "top" ? "0% 100%" : "0% 0%",
+      "z-index": "var(--devui-z-index-dropdown, 1052)"
+    }));
     const renderBasicDropdown = () => {
       return createVNode(Transition, {
-        "name": "fade"
+        "name": ns.m(`fade-${currentPosition.value}`)
       }, {
         default: () => [createVNode(FlexibleOverlay, {
           "ref": overlayRef,
@@ -6861,9 +6742,9 @@ var EditableSelect = defineComponent({
           "onUpdate:modelValue": ($event) => states.visible = $event,
           "origin": originRef.value,
           "position": position.value,
-          "style": {
-            zIndex: "var(--devui-z-index-dropdown, 1052)"
-          }
+          "align": align.value,
+          "style": styles.value,
+          "onPositionChange": handlePositionChange
         }, {
           default: () => [createVNode(Dropdown, {
             "options": filteredOptions.value,
@@ -6915,13 +6796,9 @@ var EditableSelect = defineComponent({
       }, [withDirectives(createVNode("span", {
         "class": ns.e("clear-icon"),
         "onClick": withModifiers(handleClear, ["stop"])
-      }, [createVNode(Icon, {
-        "name": "icon-remove"
-      }, null)]), [[vShow, showClearable.value]]), withDirectives(createVNode("span", {
+      }, [createVNode(InputClearIcon, null, null)]), [[vShow, showClearable.value]]), withDirectives(createVNode("span", {
         "class": ns.e("arrow-icon")
-      }, [createVNode(Icon, {
-        "name": "select-arrow"
-      }, null)]), [[vShow, !showClearable.value]])])])]), renderDropdown()]);
+      }, [createVNode(SelectArrowIcon, null, null)]), [[vShow, !showClearable.value]])])])]), renderDropdown()]);
     };
   }
 });