vue-devui 1.0.0-beta.3 → 1.0.0-beta.7

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
   };
@@ -117,10 +129,17 @@ const commonProps = {
     type: String,
     default: void 0
   },
+  halfchecked: {
+    type: Boolean,
+    default: false
+  },
   isShowTitle: {
     type: Boolean,
     default: true
   },
+  title: {
+    type: String
+  },
   color: {
     type: String,
     default: void 0
@@ -216,15 +235,15 @@ var DCheckbox = defineComponent({
     });
     const mergedIsShowTitle = computed(() => {
       var _a;
-      return (_a = checkboxGroupConf == null ? void 0 : checkboxGroupConf.isShowTitle) != null ? _a : props.isShowTitle;
+      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) != null ? _a : props.showAnimation;
+      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) != null ? _a : props.color;
+      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;
@@ -251,7 +270,7 @@ var DCheckbox = defineComponent({
       ctx.emit("change", current);
     };
     const handleClick = () => {
-      canChange(!isChecked.value, props.value).then((res) => res && toggle());
+      canChange(!isChecked.value, props.label).then((res) => res && toggle());
     };
     return {
       itemWidth,
@@ -366,8 +385,20 @@ var DCheckboxGroup = defineComponent({
       disabled: false
     };
     const toggleGroupVal = (val) => {
-      const index2 = valList.value.findIndex((item) => item === 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);
@@ -377,7 +408,13 @@ var DCheckboxGroup = defineComponent({
       ctx.emit("update:modelValue", valList.value);
       ctx.emit("change", valList.value);
     };
-    const isItemChecked = (itemVal) => valList.value.includes(itemVal);
+    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"),
@@ -404,7 +441,17 @@ var DCheckboxGroup = defineComponent({
     let children = (_a = $slots.default) == null ? void 0 : _a.call($slots);
     if ((options == null ? void 0 : options.length) > 0) {
       children = options.map((opt) => {
-        const mergedOpt = Object.assign({}, defaultOpt, 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(DCheckbox, mergedOpt, null);
       });
     }
@@ -741,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
   }
@@ -785,9 +832,10 @@ 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;
     const sizeCls = computed(() => `devui-input-${props.size}`);
     const showPwdIcon = ref(false);
     const inputType = ref("text");
@@ -804,20 +852,20 @@ 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);
-      formItem.formItemMitt.emit(dFormItemEvents.input);
+      ctx.emit("update:modelValue", $event.target.value);
+      hasFormItem && formItem.formItemMitt.emit(dFormItemEvents.input);
     }, onFocus = () => {
       ctx.emit("focus");
     }, onBlur = () => {
       ctx.emit("blur");
-      formItem.formItemMitt.emit(dFormItemEvents.blur);
+      hasFormItem && formItem.formItemMitt.emit(dFormItemEvents.blur);
     }, onChange = ($event) => {
       ctx.emit("change", $event.target.value);
-      formItem.formItemMitt.emit(dFormItemEvents.change);
+      hasFormItem && formItem.formItemMitt.emit(dFormItemEvents.change);
     }, onKeydown = ($event) => {
       ctx.emit("keydown", $event);
     }, onChangeInputType = () => {
@@ -838,7 +886,7 @@ var DInput = defineComponent({
   },
   render() {
     const {
-      value,
+      modelValue,
       showPreviewIcon,
       showPwdIcon,
       inputCls,
@@ -859,7 +907,7 @@ var DInput = defineComponent({
     }, [withDirectives(createVNode("input", mergeProps({
       dinput: true
     }, {
-      "value": value,
+      "value": modelValue,
       "disabled": disabled,
       "type": inputType,
       "maxlength": maxLength,
@@ -943,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);
 }
@@ -951,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() {
@@ -978,7 +1201,11 @@ var DTransferBase = defineComponent({
       updateSearchQuery,
       search: search2,
       searchQuery,
-      modelValues
+      modelValues,
+      height,
+      showTooltip,
+      tooltipPosition,
+      renderCheckbox
     } = this;
     return createVNode("div", {
       "class": baseClass
@@ -1003,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", {
@@ -1053,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": {
@@ -1065,7 +1286,7 @@ var Icon = defineComponent({
         fontSize: size,
         color
       }
-    }, null)]);
+    }, null);
   }
 });
 Icon.install = function(app) {
@@ -1260,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) => {
@@ -1305,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) => {
@@ -1317,7 +1566,7 @@ var Transfer = defineComponent({
     }, {
       deep: true
     });
-    watch(() => rightOptions.query, (nVal) => {
+    watch(() => rightOptions.keyword, (nVal) => {
       searchFilterData(rightOptions);
     });
     watch(() => rightOptions.checkedValues, (values) => {
@@ -1333,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))
@@ -1367,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;
       }
@@ -1375,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")
@@ -1402,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")