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

package/editable-select/index.es.js

@@ -14,8 +14,12 @@ var __spreadValues = (a, b) => {
     }
   return a;
 };
-import { defineComponent, createVNode, ref, computed, withDirectives, Transition, renderSlot, vShow, resolveDirective } from "vue";
+import { defineComponent, inject, withDirectives, createVNode, vShow, ref, reactive, computed, provide, toRefs, Fragment, resolveComponent, resolveDirective, Transition, renderSlot } from "vue";
 const editableSelectProps = {
+  appendToBody: {
+    type: Boolean,
+    default: false
+  },
   modelValue: {
     type: [String, Number]
   },
@@ -24,7 +28,8 @@ const editableSelectProps = {
     default: () => []
   },
   width: {
-    type: Number
+    type: Number,
+    default: 450
   },
   maxHeight: {
     type: Number
@@ -55,57 +60,77 @@ const editableSelectProps = {
   },
   searchFn: {
     type: Function
+  },
+  loadMore: {
+    type: Function
   }
 };
-var editableSelect = "";
-var Icon = defineComponent({
-  name: "DIcon",
-  props: {
-    name: {
-      type: String,
-      required: true
-    },
-    size: {
-      type: String,
-      default: "inherit"
-    },
-    color: {
-      type: String,
-      default: "inherit"
-    },
-    classPrefix: {
-      type: String,
-      default: "icon"
-    }
-  },
+const selectDropdownProps = {
+  options: {
+    type: Array,
+    default: () => []
+  }
+};
+function className(classStr, classOpt) {
+  let classname = classStr;
+  if (typeof classOpt === "object") {
+    Object.keys(classOpt).forEach((key) => {
+      classOpt[key] && (classname += ` ${key}`);
+    });
+  }
+  return classname;
+}
+var SelectDropdown = defineComponent({
+  name: "DSelectDropdown",
+  props: selectDropdownProps,
   setup(props) {
-    return __spreadValues({}, props);
-  },
-  render() {
+    const select = inject("InjectionKey");
     const {
-      name,
-      size,
-      color,
-      classPrefix
-    } = this;
-    return /^((https?):)?\/\//.test(name) ? createVNode("img", {
-      "src": name,
-      "alt": name.split("/")[name.split("/").length - 1],
-      "style": {
-        width: size
-      }
-    }, null) : createVNode("i", {
-      "class": `${classPrefix} ${classPrefix}-${name}`,
-      "style": {
-        fontSize: size,
-        color
-      }
-    }, null);
+      props: selectProps,
+      dropdownRef,
+      visible,
+      selectOptionClick,
+      renderDefaultSlots,
+      renderEmptySlots,
+      selectedIndex,
+      loadMore
+    } = select;
+    const {
+      maxHeight
+    } = selectProps;
+    return () => {
+      const getLiCls = (item, index2) => {
+        const {
+          disabledKey
+        } = selectProps;
+        return className("devui-dropdown-item", {
+          disabled: disabledKey ? !!item[disabledKey] : false,
+          selected: selectedIndex.value === index2
+        });
+      };
+      return withDirectives(createVNode("div", {
+        "class": "devui-dropdown-menu"
+      }, [createVNode("ul", {
+        "ref": dropdownRef,
+        "class": "devui-list-unstyled scroll-height",
+        "style": {
+          maxHeight: maxHeight + "px"
+        },
+        "onScroll": loadMore
+      }, [props.options.map((o, index2) => {
+        return createVNode("li", {
+          "class": getLiCls(o, index2),
+          "onClick": ($evnet) => selectOptionClick($evnet, o)
+        }, [renderDefaultSlots(o)]);
+      }), withDirectives(createVNode("li", {
+        "class": "devui-no-result-template"
+      }, [createVNode("div", {
+        "class": "devui-no-data-tip"
+      }, [renderEmptySlots()])]), [[vShow, props.options.length === 0]])])]), [[vShow, visible]]);
+    };
   }
 });
-Icon.install = function(app) {
-  app.component(Icon.name, Icon);
-};
+var editableSelect = "";
 const inBrowser = typeof window !== "undefined";
 function on(element, eventName, handler) {
   if (document.addEventListener) {
@@ -161,15 +186,6 @@ const clickoutsideDirective = {
     delete el[ctx];
   }
 };
-function className(classStr, classOpt) {
-  let classname = classStr;
-  if (typeof classOpt === "object") {
-    Object.keys(classOpt).forEach((key) => {
-      classOpt[key] && (classname += ` ${key}`);
-    });
-  }
-  return classname;
-}
 var commonjsGlobal = typeof globalThis !== "undefined" ? globalThis : typeof window !== "undefined" ? window : typeof global !== "undefined" ? global : typeof self !== "undefined" ? self : {};
 var lodash = { exports: {} };
 /**
@@ -5590,11 +5606,54 @@ var EditableSelect = defineComponent({
   props: editableSelectProps,
   emits: ["update:modelValue"],
   setup(props, ctx2) {
-    const dropdownRef = ref(null);
+    const renderDropdown = (condition, type) => {
+      if (!condition && type === 0) {
+        return createVNode(Transition, {
+          "name": "fade"
+        }, {
+          default: () => [createVNode(SelectDropdown, {
+            "options": filteredOptions.value
+          }, null)]
+        });
+      } else if (condition && type === 1) {
+        return createVNode(resolveComponent("d-flexible-overlay"), {
+          "hasBackdrop": false,
+          "origin": origin,
+          "position": position,
+          "visible": visible.value,
+          "onUpdate:visible": ($event) => visible.value = $event
+        }, {
+          default: () => [createVNode("div", {
+            "class": "devui-dropdown",
+            "style": {
+              width: props.width + "px"
+            }
+          }, [createVNode(SelectDropdown, {
+            "options": filteredOptions.value
+          }, null)])]
+        });
+      }
+    };
+    const renderDefaultSlots = (item) => {
+      return ctx2.slots.default ? renderSlot(ctx2.slots, "default", {
+        item
+      }) : item.name;
+    };
+    const renderEmptySlots = () => {
+      return ctx2.slots.empty ? renderSlot(ctx2.slots, "empty") : emptyText.value;
+    };
+    const origin = ref();
+    const dropdownRef = ref();
     const visible = ref(false);
     const inputValue = ref("");
-    const activeIndex = ref(0);
+    const selectedIndex = ref(0);
     const query = ref(props.modelValue);
+    const position = reactive({
+      originX: "left",
+      originY: "bottom",
+      overlayX: "left",
+      overlayY: "top"
+    });
     const wait = computed(() => props.remote ? 300 : 0);
     const emptyText = computed(() => {
       const options = filteredOptions.value;
@@ -5670,7 +5729,7 @@ var EditableSelect = defineComponent({
         e.stopPropagation();
       } else {
         query.value = item.name;
-        activeIndex.value = findIndex(item);
+        selectedIndex.value = findIndex(item);
         inputValue.value = "";
         ctx2.emit("update:modelValue", item.name);
       }
@@ -5680,28 +5739,31 @@ var EditableSelect = defineComponent({
         return;
       const dropdownVal = dropdownRef.value;
       if (dropdownVal.clientHeight + dropdownVal.scrollTop >= dropdownVal.scrollHeight) {
-        props.remoteMethod(inputValue.value);
+        props.loadMore();
       }
     };
+    provide("InjectionKey", {
+      dropdownRef,
+      props: reactive(__spreadValues({}, toRefs(props))),
+      visible,
+      emptyText,
+      selectedIndex,
+      loadMore,
+      selectOptionClick,
+      renderDefaultSlots,
+      renderEmptySlots
+    });
     return () => {
-      const selectCls = className("devui-form-group devui-has-feedback", {
+      const selectCls = className("devui-editable-select devui-form-group devui-has-feedback", {
         "devui-select-open": visible.value
       });
       const inputCls = className("devui-form-control devui-dropdown-origin devui-dropdown-origin-open", {
         disabled: props.disabled
       });
-      const getLiCls = (item, index2) => {
-        const {
-          disabledKey
-        } = props;
-        return className("devui-dropdown-item", {
-          disabled: disabledKey ? !!item[disabledKey] : false,
-          selected: activeIndex.value === index2
-        });
-      };
-      return withDirectives(createVNode("div", {
+      return createVNode(Fragment, null, [withDirectives(createVNode("div", {
         "class": selectCls,
-        "onClick": toggleMenu
+        "onClick": toggleMenu,
+        "ref": origin
       }, [createVNode("input", {
         "class": inputCls,
         "type": "text",
@@ -5711,36 +5773,9 @@ var EditableSelect = defineComponent({
         "class": "devui-form-control-feedback"
       }, [createVNode("span", {
         "class": "devui-select-chevron-icon"
-      }, [createVNode(Icon, {
+      }, [createVNode(resolveComponent("d-icon"), {
         "name": "select-arrow"
-      }, null)])]), createVNode("div", {
-        "class": "devui-editable-select"
-      }, [createVNode(Transition, {
-        "name": "fade"
-      }, {
-        default: () => [withDirectives(createVNode("div", {
-          "class": "devui-dropdown-menu"
-        }, [createVNode("ul", {
-          "class": "devui-list-unstyled scroll-height",
-          "ref": dropdownRef,
-          "style": {
-            maxHeight: props.maxHeight + "px"
-          },
-          "onScroll": loadMore
-        }, [filteredOptions.value.map((item, index2) => {
-          return createVNode("li", {
-            "class": getLiCls(item, index2),
-            "onClick": ($evnet) => selectOptionClick($evnet, item),
-            "key": item.name
-          }, [ctx2.slots.default ? renderSlot(ctx2.slots, "default", {
-            item
-          }) : item.name]);
-        }), withDirectives(createVNode("li", {
-          "class": "devui-no-result-template"
-        }, [createVNode("div", {
-          "class": "devui-no-data-tip"
-        }, [emptyText.value])]), [[vShow, filteredOptions.value.length === 0]])])]), [[vShow, visible.value]])]
-      })])]), [[resolveDirective("click-outside"), handleClose]]);
+      }, null)])]), renderDropdown(props.appendToBody, 0)]), [[resolveDirective("click-outside"), handleClose]]), renderDropdown(props.appendToBody, 1)]);
     };
   }
 });