vue-devui 1.6.4 → 1.6.5

package/pagination/index.es.js

@@ -29,7 +29,7 @@ var __objRest = (source, exclude) => {
     }
   return target;
 };
-import { defineComponent, watch, provide, reactive, toRefs, createVNode, onUnmounted, Transition, mergeProps, ref, unref, nextTick, withModifiers, Comment, Text, h, Fragment, inject, withDirectives, cloneVNode, computed, onMounted, Teleport, createTextVNode, onBeforeUnmount, toRef, onBeforeMount, vShow, resolveComponent, getCurrentInstance, resolveDirective, resolveDynamicComponent } from "vue";
+import { defineComponent, watch, provide, reactive, toRefs, createVNode, onUnmounted, Transition, mergeProps, ref, unref, nextTick, withModifiers, Comment, Text, h, Fragment, inject, withDirectives, cloneVNode, computed, onMounted, Teleport, createTextVNode, onBeforeUnmount, toRef, onBeforeMount, vShow, resolveComponent, getCurrentInstance, resolveDirective } from "vue";
 import { onClickOutside } from "@vueuse/core";
 import "clipboard";
 import { offset, autoPlacement, arrow, shift, computePosition } from "@floating-ui/dom";
@@ -5587,9 +5587,6 @@ function useNamespace(block, needDot = false) {
     em
   };
 }
-function isUrl(value) {
-  return /^((http|https):)?\/\//.test(value);
-}
 function useFieldCollection() {
   const itemContexts = [];
   const addItemContext = (field) => {
@@ -8143,6 +8140,9 @@ function useSelect(props, selectRef, ctx2, focus, blur, isSelectFocus, t) {
       (_a = dropdownRef.value) == null ? void 0 : _a.updatePosition();
     }
   }, { flush: "post" });
+  onMounted(() => {
+    nextTick(updateInjectOptionsStatus);
+  });
   return {
     selectDisabled,
     selectSize,
@@ -8824,47 +8824,45 @@ var Option = defineComponent({
     };
   }
 });
-const AlertCloseIcon = () => createVNode("svg", {
-  "width": "10px",
-  "height": "10px",
-  "viewBox": "0 0 10 10",
-  "version": "1.1",
-  "xmlns": "http://www.w3.org/2000/svg"
-}, [createVNode("g", {
-  "stroke": "none",
-  "stroke-width": "1",
-  "fill": "none",
-  "fill-rule": "evenodd"
-}, [createVNode("g", {
-  "transform": "translate(-3.000000, -3.000000)",
-  "fill-rule": "nonzero"
-}, [createVNode("path", {
-  "d": `M11.6426,3.19816936 C11.9239974,2.91574512 12.4131626,2.93784891 12.7352108,3.24751057 C13.0571998,3.5572302 
-          13.0901298,4.03723416 12.8087324,4.31965839 L9.14064666,7.99900183 L12.8087324,11.6803416 C13.0645482,11.9370909 
-          13.0605893,12.3571292 12.8158402,12.6640749 L12.7352108,12.7524894 C12.4131626,13.0621511 11.9239974,13.0842548 
-          11.6426,12.8018306 L8,9.14489021 L4.35740003,12.8018306 C4.10158422,13.05858 3.6740594,13.0636532 3.35648225,12.8298003 
-          L3.26478919,12.7524894 C2.94280021,12.4427698 2.90987023,11.9627658 3.19126762,11.6803416 L6.8583349,7.99900183 
-          L3.19126762,4.31965839 C2.93545181,4.06290908 2.93941068,3.64287076 3.18415975,3.3359251 L3.26478919,3.24751057 
-          C3.58683735,2.93784891 4.07600264,2.91574512 4.35740003,3.19816936 L8,6.85411161 L11.6426,3.19816936 Z`
-}, null)])])]);
-const SelectArrowIcon = () => createVNode("svg", {
-  "width": "1em",
-  "height": "1em",
-  "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": `M12.1464466,6.85355339 L8.35355339,10.6464466 C8.15829124,10.8417088 7.84170876,10.8417088
-        7.64644661,10.6464466 L3.85355339,6.85355339 C3.65829124,6.65829124 3.65829124,6.34170876
-        3.85355339,6.14644661 C3.94732158,6.05267842 4.07449854,6 4.20710678,6 L11.7928932,6 C12.0690356,6
-        12.2928932,6.22385763 12.2928932,6.5 C12.2928932,6.63260824 12.2402148,6.7597852 12.1464466,6.85355339 Z`,
-  "fill-rule": "nonzero"
-}, null)])]);
+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)])]);
+}
 const tagProps = {
   type: {
     type: String,
@@ -9351,7 +9349,7 @@ var SelectContent = defineComponent({
       }, null), createVNode("span", {
         "onClick": handleClear,
         "class": clearCls.value
-      }, [createVNode(AlertCloseIcon, null, null)]), createVNode("span", {
+      }, [createVNode(InputClearIcon, null, null)]), createVNode("span", {
         "class": arrowCls.value
       }, [createVNode(SelectArrowIcon, null, null)])]);
     };
@@ -10100,188 +10098,6 @@ var PageNumBtn = defineComponent({
     }, [createVNode(NextLinkIcon, null, null)])])]);
   }
 });
-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: {
-    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"
-  }
-};
-var icon = "";
-var svgIcon = defineComponent({
-  name: "DSvgIcon",
-  props: svgIconProps,
-  setup(props) {
-    const {
-      name,
-      color,
-      size
-    } = toRefs(props);
-    const ns2 = useNamespace$1("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": ns2.b(),
-        "style": styles
-      }, [createVNode("use", {
-        "xlink:href": iconName.value,
-        "fill": color.value
-      }, null)]);
-    };
-  }
-});
-function useIconDom(props, ctx2) {
-  const {
-    component,
-    name,
-    size,
-    color,
-    classPrefix,
-    rotate
-  } = toRefs(props);
-  const ns2 = useNamespace$1("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" && ns2.m("spin")],
-      "style": {
-        width: iconSize.value || "",
-        transform: `rotate(${rotate == null ? void 0 : rotate.value}deg)`,
-        verticalAlign: "middle"
-      }
-    }, ctx2.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" && ns2.m("spin")],
-      "style": {
-        transform: `rotate(${rotate == null ? void 0 : rotate.value}deg)`
-      }
-    }, ctx2.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" && ns2.m("spin")],
-      "style": {
-        fontSize: iconSize.value,
-        color: color.value,
-        transform: `rotate(${rotate == null ? void 0 : rotate.value}deg)`
-      }
-    }, ctx2.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, ctx2) {
-    const {
-      disabled,
-      operable
-    } = toRefs(props);
-    const {
-      iconDom
-    } = useIconDom(props, ctx2);
-    const ns2 = useNamespace$1("icon");
-    const wrapClassed = computed(() => ({
-      [ns2.e("container")]: true,
-      [ns2.m("disabled")]: disabled.value,
-      [ns2.m("operable")]: operable.value,
-      [ns2.m("no-slots")]: !Object.keys(ctx2.slots).length
-    }));
-    const onClick = (e) => {
-      if (disabled.value) {
-        return;
-      }
-      ctx2.emit("click", e);
-    };
-    return () => {
-      var _a, _b, _c, _d;
-      return createVNode("div", {
-        "class": wrapClassed.value,
-        "onClick": onClick
-      }, [(_b = (_a = ctx2.slots).prefix) == null ? void 0 : _b.call(_a), iconDom(), (_d = (_c = ctx2.slots).suffix) == null ? void 0 : _d.call(_c)]);
-    };
-  }
-});
-var iconGroup = "";
-defineComponent({
-  name: "DIconGroup",
-  setup(_, ctx2) {
-    const ns2 = useNamespace$1("icon-group");
-    return () => {
-      var _a, _b;
-      return createVNode("div", {
-        "class": ns2.b()
-      }, [(_b = (_a = ctx2.slots).default) == null ? void 0 : _b.call(_a)]);
-    };
-  }
-});
 const dropdownProps = {
   visible: {
     type: Boolean,
@@ -10413,17 +10229,7 @@ const useDropdownEvent = ({ id, isOpen, origin, dropdownRef, props, emit }) => {
     onInvalidate(() => subscriptions.forEach((v) => v()));
   });
 };
-function useDropdown(id, visible, isOpen, origin, dropdownRef, popDirection, emit) {
-  const calcPopDirection = (dropdownEl) => {
-    const elementHeight = dropdownEl.offsetHeight;
-    const bottomDistance = window.innerHeight - origin.value.getBoundingClientRect().bottom;
-    const isBottomEnough = bottomDistance >= elementHeight;
-    if (!isBottomEnough) {
-      popDirection.value = "top";
-    } else {
-      popDirection.value = "bottom";
-    }
-  };
+function useDropdown(id, visible, isOpen, origin, dropdownRef, emit) {
   watch(visible, (newVal, oldVal) => {
     if (oldVal === void 0) {
       return;
@@ -10447,9 +10253,6 @@ function useDropdown(id, visible, isOpen, origin, dropdownRef, popDirection, emi
         }
       }
     }
-    if (dropdownEl) {
-      calcPopDirection(dropdownEl);
-    }
   });
   onMounted(() => {
     dropdownMap.set(id, { toggleEl: origin.value });
@@ -10518,7 +10321,7 @@ var Dropdown = defineComponent({
       props,
       emit
     });
-    useDropdown(id, visible, isOpen, origin, dropdownRef, currentPosition, emit);
+    useDropdown(id, visible, isOpen, origin, dropdownRef, emit);
     const {
       overlayModelValue,
       overlayShowValue,
@@ -10675,7 +10478,7 @@ var PageSize = defineComponent({
   setup() {
     const ns2 = useNamespace("pagination");
     const paginationContext = inject(paginationInjectionKey);
-    const iconRotate = ref(0);
+    const isOpen = ref(false);
     const {
       size,
       currentPageSize,
@@ -10684,8 +10487,13 @@ var PageSize = defineComponent({
       pageSizeChange,
       t
     } = paginationContext;
+    const pageSizeClasses = computed(() => ({
+      [ns2.e("size")]: true,
+      [ns2.em("size", size.value)]: Boolean(size.value),
+      [ns2.em("size", "open")]: isOpen.value
+    }));
     const onDropdownToggle = (e) => {
-      iconRotate.value = e ? 180 : 0;
+      isOpen.value = e;
     };
     return () => createVNode(Fragment, null, [createVNode(Dropdown, {
       "position": pageSizeDirection.value,
@@ -10694,14 +10502,8 @@ var PageSize = defineComponent({
     }, {
       default: () => createVNode("div", {
         "tabindex": "0",
-        "class": [ns2.e("size"), size.value ? ns2.em("size", size.value) : ""]
-      }, [createVNode(Icon, {
-        "name": "select-arrow",
-        "size": "16px",
-        "rotate": iconRotate.value
-      }, {
-        prefix: () => createVNode("span", null, [currentPageSize.value])
-      })]),
+        "class": pageSizeClasses.value
+      }, [createVNode("span", null, [currentPageSize.value]), createVNode(SelectArrowIcon, null, null)]),
       menu: () => createVNode("ul", null, [pageSizeOptions.value.map((item, index2) => createVNode("li", {
         "class": {
           active: item === currentPageSize.value