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

package/transfer/index.es.js

@@ -17,7 +17,7 @@ var __spreadValues = (a, b) => {
   return a;
 };
 var __spreadProps = (a, b) => __defProps(a, __getOwnPropDescs(b));
-import { computed, defineComponent, inject, createVNode, mergeProps, toRef, provide, ref, watch, withDirectives, resolveDirective, resolveComponent, isVNode, createTextVNode, Fragment, reactive } from "vue";
+import { computed, defineComponent, inject, createVNode, mergeProps, toRef, provide, ref, watch, withDirectives, resolveDirective, resolveComponent, reactive, onMounted, onBeforeUnmount, renderSlot, useSlots, isVNode, createTextVNode } from "vue";
 const transferBaseProps = {
   sourceOption: {
     type: Array,
@@ -47,10 +47,14 @@ const transferBaseProps = {
     type: Boolean,
     default: () => false
   },
-  query: {
+  filter: {
     type: String,
     default: () => ""
   },
+  height: {
+    type: String,
+    default: () => "320px"
+  },
   alltargetState: {
     type: Boolean,
     default: () => false
@@ -67,6 +71,14 @@ const transferBaseProps = {
     type: Number,
     default: () => 0
   },
+  showTooltip: {
+    type: Boolean,
+    default: () => false
+  },
+  tooltipPosition: {
+    type: String,
+    default: () => "top"
+  },
   scopedSlots: {
     type: Object
   },
@@ -100,7 +112,7 @@ const initState = (props, type) => {
     allChecked: false,
     disabled: false,
     checkedNum: initModel.model.length,
-    query: "",
+    keyword: "",
     checkedValues: initModel.model,
     filterData: initModel.data
   };
@@ -776,27 +788,27 @@ const inputProps = {
     type: Boolean,
     default: false
   },
-  value: {
+  modelValue: {
     type: String,
     default: ""
   },
-  "onUpdate:value": {
+  "update:modelValue": {
     type: Function,
     default: void 0
   },
-  "onChange": {
+  onChange: {
     type: Function,
     default: void 0
   },
-  "onKeydown": {
+  onKeydown: {
     type: Function,
     default: void 0
   },
-  "onFocus": {
+  onFocus: {
     type: Function,
     default: void 0
   },
-  "onBlur": {
+  onBlur: {
     type: Function,
     default: void 0
   }
@@ -820,7 +832,7 @@ var DInput = defineComponent({
     }
   },
   props: inputProps,
-  emits: ["update:value", "focus", "blur", "change", "keydown"],
+  emits: ["update:modelValue", "focus", "blur", "change", "keydown"],
   setup(props, ctx) {
     const formItem = inject(formItemInjectionKey, {});
     const hasFormItem = Object.keys(formItem).length > 0;
@@ -840,11 +852,11 @@ var DInput = defineComponent({
     }, {
       immediate: true
     });
-    watch(() => props.value, (value) => {
+    watch(() => props.modelValue, (value) => {
       value && value.length > 0 && showPreviewIcon.value ? showPwdIcon.value = true : showPwdIcon.value = false;
     });
     const onInput = ($event) => {
-      ctx.emit("update:value", $event.target.value);
+      ctx.emit("update:modelValue", $event.target.value);
       hasFormItem && formItem.formItemMitt.emit(dFormItemEvents.input);
     }, onFocus = () => {
       ctx.emit("focus");
@@ -874,7 +886,7 @@ var DInput = defineComponent({
   },
   render() {
     const {
-      value,
+      modelValue,
       showPreviewIcon,
       showPwdIcon,
       inputCls,
@@ -895,7 +907,7 @@ var DInput = defineComponent({
     }, [withDirectives(createVNode("input", mergeProps({
       dinput: true
     }, {
-      "value": value,
+      "value": modelValue,
       "disabled": disabled,
       "type": inputType,
       "maxlength": maxLength,
@@ -957,12 +969,12 @@ var DSearch = defineComponent({
         "size": props.size,
         "disabled": props.disabled,
         "autoFocus": props.autoFocus,
-        "value": keywords.value,
+        "modelValue": keywords.value,
         "maxLength": props.maxLength,
         "placeholder": props.placeholder,
         "cssClass": props.cssClass,
         "onKeydown": onInputKeydown,
-        "onUpdate:value": onInputUpdate
+        "onUpdate:modelValue": onInputUpdate
       }, null), clearIconShow.value && createVNode("div", {
         "class": "devui-search__clear",
         "onClick": onClearHandle
@@ -979,6 +991,164 @@ var DSearch = defineComponent({
     };
   }
 });
+const tooltipProps = {
+  position: {
+    type: String,
+    default: "top"
+  },
+  showAnimation: {
+    type: Boolean,
+    default: true
+  },
+  content: {
+    type: String
+  },
+  mouseLeaveDelay: {
+    type: String,
+    default: "150"
+  },
+  mouseEnterDelay: {
+    type: String,
+    default: "100"
+  }
+};
+const EventListener = {
+  listen: function(target, eventType, callback) {
+    if (target.addEventListener) {
+      target.addEventListener(eventType, callback, false);
+      return {
+        remove() {
+          target.removeEventListener(target, callback, false);
+        }
+      };
+    } else {
+      target.attchEvent(eventType, callback);
+      return {
+        remove() {
+          target.detachEvent(eventType, callback);
+        }
+      };
+    }
+  }
+};
+var tooltip = "";
+var DTooltip = defineComponent({
+  name: "DTooltip",
+  props: tooltipProps,
+  setup(props, ctx) {
+    const position = reactive({
+      left: 0,
+      top: 0
+    });
+    const show = ref(false);
+    const slotElement = ref(null);
+    const tooltip2 = ref(null);
+    const arrow = ref(null);
+    const tooltipcontent = ref(null);
+    let enterEvent;
+    let leaveEvent;
+    const arrowStyle = (attr, value) => {
+      arrow.value.style[attr] = value;
+    };
+    const delayShowTrue = function(fn, delay = props.mouseEnterDelay) {
+      let start;
+      if (parseInt(delay) >= 0) {
+        return function() {
+          if (start) {
+            clearTimeout(start);
+          }
+          start = setTimeout(fn, parseInt(delay));
+        };
+      } else {
+        console.error("the value of delay is bigger than 0 and the type of delay must be string!");
+        return;
+      }
+    };
+    onMounted(() => {
+      if (!show.value) {
+        tooltip2.value.style.opacity = "0";
+      }
+      enterEvent = EventListener.listen(slotElement.value.children[0], "mouseenter", delayShowTrue(function() {
+        show.value = true;
+      }, props.mouseEnterDelay));
+      leaveEvent = EventListener.listen(slotElement.value.children[0], "mouseleave", function() {
+        if (show.value) {
+          setTimeout(function() {
+            show.value = false;
+          }, props.mouseLeaveDelay);
+        }
+      });
+    });
+    watch(show, function(newValue, oldValue) {
+      if (newValue) {
+        tooltip2.value.style.opacity = "1";
+        tooltip2.value.style.zIndex = "999";
+        arrow.value.style.border = "5px solid transparent";
+        switch (props.position) {
+          case "top":
+            position.left = slotElement.value.children[0].offsetLeft - tooltip2.value.offsetWidth / 2 + slotElement.value.children[0].offsetWidth / 2 - 5;
+            position.top = slotElement.value.children[0].offsetTop - 10 - tooltipcontent.value.offsetHeight;
+            arrowStyle("borderTop", "5px solid rgb(70, 77, 110)");
+            arrow.value.style.top = `${tooltipcontent.value.offsetHeight}px`;
+            arrow.value.style.left = `${tooltipcontent.value.offsetWidth / 2 + 5}px`;
+            break;
+          case "right":
+            position.left = slotElement.value.children[0].offsetLeft + slotElement.value.children[0].offsetWidth;
+            position.top = slotElement.value.children[0].offsetTop + slotElement.value.children[0].offsetHeight / 2 - tooltipcontent.value.offsetHeight / 2;
+            arrowStyle("borderRight", "5px solid rgb(70, 77, 110)");
+            arrow.value.style.top = `${tooltipcontent.value.offsetHeight / 2 - 5}px`;
+            arrow.value.style.left = "-0px";
+            break;
+          case "bottom":
+            position.top = slotElement.value.children[0].offsetHeight + slotElement.value.children[0].offsetTop + 10;
+            position.left = slotElement.value.children[0].offsetLeft + slotElement.value.children[0].offsetWidth / 2 - tooltipcontent.value.offsetWidth / 2 - 5;
+            arrowStyle("borderBottom", "5px solid rgb(70, 77, 110)");
+            arrow.value.style.top = "-10px";
+            arrow.value.style.left = `${tooltipcontent.value.offsetWidth / 2 + 5}px`;
+            break;
+          case "left":
+            position.top = slotElement.value.children[0].offsetTop + slotElement.value.children[0].offsetHeight / 2 - tooltipcontent.value.offsetHeight / 2;
+            position.left = slotElement.value.children[0].offsetLeft - 20 - tooltipcontent.value.offsetWidth;
+            arrowStyle("borderLeft", "5px solid rgb(70, 77, 110)");
+            arrow.value.style.left = `${tooltipcontent.value.offsetWidth + 10}px`;
+            arrow.value.style.top = `${tooltipcontent.value.offsetHeight / 2 - 5}px`;
+            break;
+          default:
+            console.error("The attribute position value is wrong, the value is one of top\u3001right\u3001left\u3001bottom");
+            break;
+        }
+        tooltip2.value.style.top = position.top + "px";
+        tooltip2.value.style.left = position.left + "px";
+      } else {
+        position.top = 0;
+        position.left = 0;
+        tooltip2.value.style.opacity = "0";
+      }
+    });
+    onBeforeUnmount(() => {
+      enterEvent.remove();
+      leaveEvent.remove();
+    });
+    return () => {
+      const defaultSlot = renderSlot(useSlots(), "default");
+      return createVNode("div", {
+        "class": "devui-tooltip"
+      }, [createVNode("div", {
+        "class": "slotElement",
+        "ref": slotElement
+      }, [defaultSlot]), createVNode("div", {
+        "class": "tooltip",
+        "ref": tooltip2
+      }, [createVNode("div", {
+        "class": "arrow",
+        "ref": arrow
+      }, null), createVNode("div", {
+        "class": "tooltipcontent",
+        "ref": tooltipcontent
+      }, [props.content])])]);
+    };
+  }
+});
 function _isSlot(s) {
   return typeof s === "function" || Object.prototype.toString.call(s) === "[object Object]" && !isVNode(s);
 }
@@ -987,19 +1157,36 @@ var DTransferBase = defineComponent({
   components: {
     DSearch,
     DCheckboxGroup,
-    DCheckbox
+    DCheckbox,
+    DTooltip
   },
   props: transferBaseProps,
   setup(props, ctx) {
     const modelValues = computed(() => props.checkedValues);
-    const searchQuery = computed(() => props.query);
+    const searchQuery = computed(() => props.filter);
     const baseClass = TransferBaseClass(props);
     const updateSearchQuery = (val) => ctx.emit("changeQuery", val);
+    const renderCheckbox = (props2, key, showTooltip = false, tooltipPosition = "top") => {
+      const checkbox2 = createVNode(DCheckbox, {
+        "class": "devui-transfer-panel-body-list-item",
+        "label": props2.key,
+        "value": props2.value,
+        "disabled": props2.disabled,
+        "key": key
+      }, null);
+      return !showTooltip ? checkbox2 : createVNode(DTooltip, {
+        "position": tooltipPosition,
+        "content": props2.key
+      }, _isSlot(checkbox2) ? checkbox2 : {
+        default: () => [checkbox2]
+      });
+    };
     return {
       baseClass,
       searchQuery,
       modelValues,
-      updateSearchQuery
+      updateSearchQuery,
+      renderCheckbox
     };
   },
   render() {
@@ -1014,7 +1201,11 @@ var DTransferBase = defineComponent({
       updateSearchQuery,
       search: search2,
       searchQuery,
-      modelValues
+      modelValues,
+      height,
+      showTooltip,
+      tooltipPosition,
+      renderCheckbox
     } = this;
     return createVNode("div", {
       "class": baseClass
@@ -1039,19 +1230,13 @@ var DTransferBase = defineComponent({
     }, null)]), createVNode("div", {
       "class": "devui-transfer-panel-body-list",
       "style": {
-        height: `calc(100% - 40px - ${search2 ? 42 : 0}px)`
+        height
       }
     }, [sourceOption.length ? createVNode(DCheckboxGroup, {
       "modelValue": modelValues,
       "onChange": (values) => this.$emit("updateCheckeds", values)
     }, _isSlot(_slot = sourceOption.map((item, idx) => {
-      return createVNode(DCheckbox, {
-        "class": "devui-transfer-panel-body-list-item",
-        "label": item.key,
-        "value": item.value,
-        "disabled": item.disabled,
-        "key": idx
-      }, null);
+      return renderCheckbox(item, idx, showTooltip, tooltipPosition);
     })) ? _slot : {
       default: () => [_slot]
     }) : createVNode("div", {
@@ -1089,7 +1274,7 @@ var Icon = defineComponent({
       color,
       classPrefix
     } = this;
-    return createVNode(Fragment, null, [/^((https?):)?\/\//.test(name) ? createVNode("img", {
+    return /^((https?):)?\/\//.test(name) ? createVNode("img", {
       "src": name,
       "alt": name.split("/")[name.split("/").length - 1],
       "style": {
@@ -1101,7 +1286,7 @@ var Icon = defineComponent({
         fontSize: size,
         color
       }
-    }, null)]);
+    }, null);
   }
 });
 Icon.install = function(app) {
@@ -1296,30 +1481,52 @@ const transferProps = {
   },
   height: {
     type: String,
-    default: "320px"
+    default: () => "320px"
   },
   isSearch: {
     type: Boolean,
-    default: false
+    default: () => false
   },
   isSourceDroppable: {
     type: Boolean,
-    default: false
+    default: () => false
   },
   isTargetDroppable: {
     type: Boolean,
-    default: false
+    default: () => false
   },
   disabled: {
     type: Boolean,
-    default: false
+    default: () => false
   },
-  showOptionTitle: {
+  showTooltip: {
     type: Boolean,
-    default: false
+    default: () => false
+  },
+  tooltipPosition: {
+    type: String,
+    default: () => "top"
+  },
+  beforeTransfer: {
+    type: Function
   },
   slots: {
     type: Object
+  },
+  searching: {
+    type: Function
+  },
+  transferToSource: {
+    type: Function
+  },
+  transferToTarget: {
+    type: Function
+  },
+  transferring: {
+    type: Function
+  },
+  afterTransfer: {
+    type: Function
   }
 };
 const headerSlot = (ctx, name) => {
@@ -1341,10 +1548,16 @@ var Transfer = defineComponent({
   },
   props: transferProps,
   setup(props, ctx) {
-    const leftOptions = reactive(initState(props, "source"));
-    const rightOptions = reactive(initState(props, "target"));
+    let leftOptions = reactive(initState(props, "source"));
+    let rightOptions = reactive(initState(props, "target"));
     const origin = ref(null);
-    watch(() => leftOptions.query, (nVal) => {
+    watch(() => props.sourceOption, () => {
+      leftOptions = reactive(initState(props, "source"));
+    });
+    watch(() => props.targetOption, () => {
+      rightOptions = reactive(initState(props, "target"));
+    });
+    watch(() => leftOptions.keyword, (nVal) => {
       searchFilterData(leftOptions);
     });
     watch(() => leftOptions.checkedValues, (values) => {
@@ -1353,7 +1566,7 @@ var Transfer = defineComponent({
     }, {
       deep: true
     });
-    watch(() => rightOptions.query, (nVal) => {
+    watch(() => rightOptions.keyword, (nVal) => {
       searchFilterData(rightOptions);
     });
     watch(() => rightOptions.checkedValues, (values) => {
@@ -1369,19 +1582,35 @@ var Transfer = defineComponent({
         source.allChecked = value.length === source.data.filter((item) => !item.disabled).length ? true : false;
       }
     };
-    const updateFilterData = (source, target) => {
-      const newData = [];
-      source.data = source.data.filter((item) => {
-        const hasInclues = source.checkedValues.includes(item.value);
-        hasInclues && newData.push(item);
-        return !hasInclues;
-      });
-      target.data = target.data.concat(newData);
+    const updateFilterData = async (source, target, direction) => {
+      if (isFunction("beforeTransfer")) {
+        const res = await props.beforeTransfer.call(null, source, target);
+        if (typeof res === "boolean" && res === false) {
+          return;
+        }
+      }
+      const hasToSource = isFunction("transferToSource");
+      const hasToTarget = isFunction("transferToTarget");
+      const hasTransfering = isFunction("transferring");
+      if (hasToSource || hasToTarget) {
+        direction === "right" && props.transferToSource.call(null, source, target);
+        direction === "left" && props.transferToTarget.call(null, source, target);
+      } else {
+        source.data = source.data.filter((item) => {
+          const hasInclues = source.checkedValues.includes(item.value);
+          hasInclues && target.data.push(item);
+          return !hasInclues;
+        });
+      }
+      if (hasTransfering) {
+        props.transferring.call(null, target);
+      }
       source.checkedValues = [];
       target.disabled = !target.disabled;
       searchFilterData(source, target);
       searchFilterData(target, source);
       setOrigin("click");
+      isFunction("afterTransfer") && props.afterTransfer.call(null, target);
     };
     const changeAllSource = (source, value) => {
       if (source.filterData.every((item) => item.disabled))
@@ -1403,7 +1632,7 @@ var Transfer = defineComponent({
       setOrigin("change");
     };
     const searchFilterData = (source, target) => {
-      source.filterData = source.data.filter((item) => item.key.indexOf(source.query) !== -1);
+      source.filterData = source.data.filter((item) => item.key.indexOf(source.keyword) !== -1);
       if (target) {
         target.allChecked = false;
       }
@@ -1411,25 +1640,35 @@ var Transfer = defineComponent({
     const setOrigin = (value) => {
       origin.value = value;
     };
+    const changeQueryHandle = (source, direction, value) => {
+      if ((props == null ? void 0 : props.searching) && typeof props.searching === "function") {
+        props.searching.call(null, direction, value, source);
+        return;
+      }
+      source.keyword = value;
+    };
+    const isFunction = (type) => {
+      return props[type] && typeof props[type] === "function";
+    };
     return () => {
       return createVNode("div", {
         "class": "devui-transfer"
       }, [createVNode(DTransferBase, {
-        "style": {
-          height: props.height
-        },
         "sourceOption": leftOptions.filterData,
         "title": props.titles[0],
         "type": "source",
         "search": props.isSearch,
         "allChecked": leftOptions.allChecked,
         "checkedNum": leftOptions.checkedNum,
-        "query": leftOptions.query,
+        "filter": leftOptions.keyword,
+        "height": props.height,
         "checkedValues": leftOptions.checkedValues,
         "allCount": leftOptions.data.length,
+        "showTooltip": props.showTooltip,
+        "tooltipPosition": props.tooltipPosition,
         "onChangeAllSource": (value) => changeAllSource(leftOptions, value),
         "onUpdateCheckeds": updateLeftCheckeds,
-        "onChangeQuery": (value) => leftOptions.query = value
+        "onChangeQuery": (value) => changeQueryHandle(leftOptions, "left", value)
       }, {
         header: headerSlot(ctx, "left"),
         body: bodySlot(ctx, "left")
@@ -1438,29 +1677,29 @@ var Transfer = defineComponent({
         "sourceDisabled": rightOptions.checkedNum > 0 ? false : true,
         "targetDisabled": leftOptions.checkedNum > 0 ? false : true,
         "onUpdateSourceData": () => {
-          updateFilterData(rightOptions, leftOptions);
+          updateFilterData(rightOptions, leftOptions, "left");
         },
         "onUpdateTargetData": () => {
-          updateFilterData(leftOptions, rightOptions);
+          updateFilterData(leftOptions, rightOptions, "right");
         }
       }, {
         operation: opeartionSlot(ctx)
       }), createVNode(DTransferBase, {
-        "style": {
-          height: props.height
-        },
         "sourceOption": rightOptions.filterData,
         "title": props.titles[1],
         "type": "target",
         "search": props.isSearch,
         "allChecked": rightOptions.allChecked,
         "checkedNum": rightOptions.checkedNum,
-        "query": rightOptions.query,
+        "filter": rightOptions.keyword,
+        "height": props.height,
         "checkedValues": rightOptions.checkedValues,
         "allCount": rightOptions.data.length,
+        "showTooltip": props.showTooltip,
+        "tooltipPosition": props.tooltipPosition,
         "onChangeAllSource": (value) => changeAllSource(rightOptions, value),
         "onUpdateCheckeds": updateRightCheckeds,
-        "onChangeQuery": (value) => rightOptions.query = value
+        "onChangeQuery": (value) => changeQueryHandle(rightOptions, "right", value)
       }, {
         header: headerSlot(ctx, "right"),
         body: bodySlot(ctx, "right")