@opentiny/vue-renderless 3.13.1 → 3.14.0

package/menu/vue.js

@@ -6,25 +6,25 @@ import {
   getActivedKeysPath,
   setNodeHidden,
   setAllNodeVisible,
-  filterInput
+  filterInput,
+  computeData
 } from "./index";
 import debounce from "../common/deps/debounce";
 const api = ["state", "setIsCurrent", "filterNodes", "filterInput"];
-const renderless = (props, { reactive, watch, onMounted, computed }, { vm, emit, nextTick }) => {
-  const api2 = {};
+const initState = ({ reactive, computed, props, api: api2 }) => {
   const state = reactive({
     isEmpty: computed(() => props.data.length !== 0 && state.filterValue && state.filterData.length === 0),
     activedNodeId: null,
-    filterCheckedId: null,
-    activedKeys: props.activedKeys,
-    expandedKeysPath: [],
-    activedKeysPath: [],
-    filterText: "",
     filterValue: "",
     currentPaths: [],
     filterData: [],
-    data: props.data
+    data: computed(() => api2.computeData())
   });
+  return state;
+};
+const renderless = (props, { reactive, watch, onMounted, computed }, { vm, emit, nextTick }) => {
+  const api2 = {};
+  const state = initState({ reactive, computed, props, api: api2 });
   Object.assign(api2, {
     state,
     setIsCurrent: setIsCurrent({ props, vm, state, emit, nextTick }),
@@ -33,7 +33,8 @@ const renderless = (props, { reactive, watch, onMounted, computed }, { vm, emit,
     getActivedKeysPath: getActivedKeysPath({ state }),
     getExpandedKeysPath: getExpandedKeysPath({ state }),
     setAllNodeVisible: setAllNodeVisible({ vm, state }),
-    filterInput: filterInput({ state })
+    filterInput: filterInput({ state }),
+    computeData: computeData({ props, vm })
   });
   watch(
     () => props.expandAll,
@@ -59,18 +60,22 @@ const renderless = (props, { reactive, watch, onMounted, computed }, { vm, emit,
   );
   watch(
     () => props.activedKeys,
-    () => {
-      state.activedKeys = props.activedKeys;
-      api2.getActivedKeysPath(props.activedKeys);
+    (val) => {
+      if (val || val === 0) {
+        state.activedKeys = props.activedKeys;
+        api2.getActivedKeysPath(props.activedKeys);
+        api2.setIsCurrent(props.data, { id: props.activedKeys });
+      }
     },
     { immediate: true }
   );
   watch(
     () => props.data,
-    () => {
-      state.data = props.data;
-    },
-    { deep: true, immediate: true }
+    (val) => {
+      nextTick(() => {
+        api2.setIsCurrent(val, { id: props.activedKeys });
+      });
+    }
   );
   onMounted(() => {
     vm.$on("node-clicked", (param) => {

package/mind-map/index.js

@@ -0,0 +1,47 @@
+import "../chunk-G2ADBYYC.js";
+const importData = (instance, data) => {
+  instance.init(data);
+};
+const initEvent = (render, emit) => {
+  const onOperation = (info) => {
+    emit("operation", { render, info });
+  };
+  const onSelectNode = (nodeObj, e) => {
+    emit("selectNode", { render, nodeObj, e });
+  };
+  const selectNewNode = (nodeObj) => {
+    emit("selectNewNode", { render, nodeObj });
+  };
+  const onSelectNodes = (nodeObj) => {
+    emit("selectNodes", { render, nodeObj });
+  };
+  const unselectNode = () => {
+    emit("unselectNode", { render });
+  };
+  const unselectNodes = () => {
+    emit("unselectNodes", { render });
+  };
+  const expandNode = (nodeObj) => {
+    emit("expandNode", { render, nodeObj });
+  };
+  render.bus.addListener("operation", onOperation);
+  render.bus.addListener("selectNode", onSelectNode);
+  render.bus.addListener("selectNewNode", selectNewNode);
+  render.bus.addListener("selectNodes", onSelectNodes);
+  render.bus.addListener("unselectNode", unselectNode);
+  render.bus.addListener("unselectNodes", unselectNodes);
+  render.bus.addListener("expandNode", expandNode);
+  return () => {
+    render.bus.removeListener("operation", onOperation);
+    render.bus.removeListener("selectNode", onSelectNode);
+    render.bus.removeListener("selectNewNode", selectNewNode);
+    render.bus.removeListener("selectNodes", onSelectNodes);
+    render.bus.removeListener("unselectNode", unselectNode);
+    render.bus.removeListener("unselectNodes", unselectNodes);
+    render.bus.removeListener("expandNode", expandNode);
+  };
+};
+export {
+  importData,
+  initEvent
+};

package/mind-map/vue.js

@@ -0,0 +1,53 @@
+import {
+  __spreadProps,
+  __spreadValues
+} from "../chunk-G2ADBYYC.js";
+import { importData, initEvent } from ".";
+const api = [];
+const renderless = (props, { getCurrentInstance, onMounted, onUnmounted, watch }, { emit }, {
+  MindElixir
+}) => {
+  const api2 = {};
+  let destoryListener = null;
+  onMounted(() => {
+    var _a;
+    const instance = getCurrentInstance();
+    if (!instance) {
+      throw new Error(
+        "Can not find instance. Please open Issue: https://github.com/opentiny/tiny-vue/issues/new/choose"
+      );
+    }
+    const mindmap = instance.refs.mindmap;
+    const render = new MindElixir(__spreadProps(__spreadValues({
+      contextMenu: false,
+      toolBar: false,
+      nodeMenu: false
+    }, (_a = props.options) != null ? _a : {}), {
+      el: mindmap
+    }));
+    destoryListener = initEvent(render, emit);
+    emit("create", render);
+    watch(
+      () => props.modelValue,
+      () => {
+        if (props.modelValue) {
+          emit("beforeImport", { render, data: props.modelValue });
+          importData(render, props.modelValue);
+          emit("afterImport", { render, data: props.modelValue });
+        } else {
+          const root = MindElixir.new("root");
+          render.init(root);
+        }
+      },
+      { deep: true, immediate: true }
+    );
+  });
+  onUnmounted(() => {
+    destoryListener == null ? void 0 : destoryListener();
+  });
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/modal/index.js

@@ -5,6 +5,7 @@ import PopupManager from "../common/deps/popup-manager";
 import { getDomNode } from "../common/deps/dom";
 import { getViewportWindow } from "../common/global";
 const DragClass = "is__drag";
+let timer;
 const emitZoom = ({ params, parent, emit, event }) => {
   let { $listeners, events = {} } = parent;
   if ($listeners.zoom) {
@@ -30,6 +31,11 @@ const computedBoxStyle = ({ props, isMobileFirstMode }) => () => {
   return { width, height };
 };
 const watchValue = (api) => (visible) => visible ? api.open() : api.close("hide");
+const watchVisible = ({ api, props }) => (visible) => {
+  if (props.lockScroll) {
+    visible ? api.showScrollbar() : api.hideScrollbar();
+  }
+};
 const created = ({ api, props, state }) => () => {
   if (props.modelValue) {
     api.open();
@@ -40,9 +46,19 @@ const mounted = ({
   api,
   parent,
   props,
-  isMobileFirstMode
+  isMobileFirstMode,
+  state
 }) => () => {
-  if (isMobileFirstMode) {
+  if (!isMobileFirstMode) {
+    let modalBoxElem = api.getBox();
+    Object.assign(modalBoxElem.style, {
+      width: props.width ? isNaN(props.width) ? props.width : `${props.width}px` : null,
+      height: props.height ? isNaN(props.height) ? props.height : `${props.height}px` : null
+    });
+    if (props.lockScroll && state.visible) {
+      api.showScrollbar();
+    }
+  } else {
     on(window, "resize", api.resetDragStyle);
   }
   if (props.escClosable) {
@@ -56,6 +72,7 @@ const beforeUnmouted = ({ api, parent, isMobileFirstMode }) => () => {
   off(document, "keydown", api.handleGlobalKeydownEvent);
   off(window, "hashchange", api.handleHashChange);
   api.removeMsgQueue();
+  api.hideScrollbar();
   if (parent.$el.parentNode) {
     parent.$el.parentNode.removeChild(parent.$el);
   }
@@ -65,6 +82,18 @@ const selfClickEvent = ({ api, parent, props }) => (event) => {
     api.close("mask");
   }
 };
+const mouseEnterEvent = () => () => {
+  clearTimeout(timer);
+};
+const mouseLeaveEvent = ({ api, props }) => () => {
+  api.addMsgQueue();
+  timer = window.setTimeout(
+    () => {
+      api.close("close");
+    },
+    parseFloat(props.duration)
+  );
+};
 const updateZindex = ({ state, props }) => () => {
   state.modalZindex = props.zIndex || PopupManager.nextZIndex();
 };
@@ -128,7 +157,7 @@ const open = ({
     }, 10);
     if (state.isMsg) {
       api.addMsgQueue();
-      setTimeout(
+      timer = window.setTimeout(
         () => {
           api.close(params.type);
         },
@@ -628,6 +657,12 @@ const resetDragStyle = (api) => () => {
   modalBoxElement.style.left = "";
   modalBoxElement.style.top = "";
 };
+const showScrollbar = (lockScrollClass) => () => {
+  addClass(document.body, lockScrollClass);
+};
+const hideScrollbar = (lockScrollClass) => () => {
+  removeClass(document.body, lockScrollClass);
+};
 export {
   MsgQueue,
   addMsgQueue,
@@ -644,8 +679,11 @@ export {
   handleEvent,
   handleGlobalKeydownEvent,
   handleHashChange,
+  hideScrollbar,
   maximize,
   mounted,
+  mouseEnterEvent,
+  mouseLeaveEvent,
   mousedownEvent,
   open,
   removeMsgQueue,
@@ -653,9 +691,11 @@ export {
   resetFormTip,
   revert,
   selfClickEvent,
+  showScrollbar,
   toggleZoomEvent,
   updateFormTip,
   updateStyle,
   updateZindex,
-  watchValue
+  watchValue,
+  watchVisible
 };

package/modal/vue.js

@@ -18,6 +18,8 @@ import {
   mounted,
   beforeUnmouted,
   selfClickEvent,
+  mouseEnterEvent,
+  mouseLeaveEvent,
   updateZindex,
   closeEvent,
   confirmEvent,
@@ -25,7 +27,10 @@ import {
   open,
   resetDragStyle,
   computedBoxStyle,
-  handleHashChange
+  handleHashChange,
+  showScrollbar,
+  hideScrollbar,
+  watchVisible
 } from "./index";
 const api = [
   "state",
@@ -38,6 +43,8 @@ const api = [
   "close",
   "updateStyle",
   "selfClickEvent",
+  "mouseEnterEvent",
+  "mouseLeaveEvent",
   "updateZindex",
   "closeEvent",
   "confirmEvent",
@@ -46,8 +53,9 @@ const api = [
   "beforeUnmouted",
   "resetDragStyle"
 ];
-const renderless = (props, { computed, onMounted, onBeforeUnmount, reactive, watch }, { vm, emit, emitter, nextTick, broadcast, vm: parent }, { isMobileFirstMode }) => {
+const renderless = (props, { computed, onMounted, onBeforeUnmount, reactive, watch }, { vm, emit, emitter, nextTick, broadcast, vm: parent, constants, mode }, { isMobileFirstMode }) => {
   const api2 = {};
+  const lockScrollClass = constants.SCROLL_LOCK_CLASS(mode);
   const state = reactive({
     emitter: emitter(),
     visible: false,
@@ -70,9 +78,11 @@ const renderless = (props, { computed, onMounted, onBeforeUnmount, reactive, wat
     getBox: getBox({ vm }),
     watchValue: watchValue(api2),
     created: created({ api: api2, props, state }),
-    mounted: mounted({ api: api2, parent, props, isMobileFirstMode }),
+    mounted: mounted({ api: api2, parent, props, isMobileFirstMode, state }),
     beforeUnmouted: beforeUnmouted({ api: api2, parent, isMobileFirstMode }),
     selfClickEvent: selfClickEvent({ api: api2, parent, props }),
+    mouseEnterEvent: mouseEnterEvent(),
+    mouseLeaveEvent: mouseLeaveEvent({ api: api2, props }),
     updateZindex: updateZindex({ state, props }),
     handleEvent: handleEvent({ api: api2, emit, parent, props, isMobileFirstMode }),
     closeEvent: closeEvent(api2),
@@ -90,9 +100,13 @@ const renderless = (props, { computed, onMounted, onBeforeUnmount, reactive, wat
     mousedownEvent: mousedownEvent({ api: api2, nextTick, props, state, emit, isMobileFirstMode }),
     dragEvent: dragEvent({ api: api2, emit, parent, props, state }),
     resetDragStyle: resetDragStyle(api2),
-    computedBoxStyle: computedBoxStyle({ props, isMobileFirstMode })
+    computedBoxStyle: computedBoxStyle({ props, isMobileFirstMode }),
+    watchVisible: watchVisible({ api: api2, props }),
+    hideScrollbar: hideScrollbar(lockScrollClass),
+    showScrollbar: showScrollbar(lockScrollClass)
   });
   watch(() => props.modelValue, api2.watchValue);
+  watch(() => state.visible, api2.watchVisible);
   api2.created();
   onMounted(api2.mounted);
   onBeforeUnmount(api2.beforeUnmouted);

package/multi-select/index.js

@@ -1,6 +1,64 @@
-import "../chunk-G2ADBYYC.js";
+import {
+  __spreadProps,
+  __spreadValues
+} from "../chunk-G2ADBYYC.js";
 import { cloneDeep } from "../chart-core/deps/utils";
-const created = ({ props, state, refs, nextTick }) => () => {
+const initValue = ({ props, emit }) => () => {
+  const { modelValue, dataSource = [], disabled } = props;
+  if (disabled) {
+    return;
+  }
+  let value = [];
+  dataSource == null ? void 0 : dataSource.forEach((data, index) => {
+    const isArrayVal = Array.isArray(modelValue[index]);
+    if (data.multiple) {
+      value.push(isArrayVal ? modelValue[index] : []);
+    } else {
+      value.push(isArrayVal ? "" : modelValue[index] || "");
+    }
+  });
+  emit("update:modelValue", value);
+};
+const updateValue = ({ state, props, emit }) => (value) => {
+  const activeIndex = state.headerIndex;
+  const values = cloneDeep(props.modelValue);
+  if (!values) {
+    return;
+  }
+  if (Array.isArray(values[state.headerIndex])) {
+    const currentVal = values[activeIndex];
+    values[activeIndex] = currentVal.includes(value) ? currentVal.filter((i) => i !== value) : [...currentVal, value];
+  } else {
+    values[activeIndex] = value;
+  }
+  emit("update:modelValue", values);
+};
+const getOption = (options, target) => {
+  var _a;
+  for (const option of options) {
+    if (option.value === target) {
+      return option;
+    }
+    if ((_a = option.children) == null ? void 0 : _a.length) {
+      const result = getOption(option.children, target);
+      if (result) {
+        return result;
+      }
+    }
+  }
+  return null;
+};
+const updateTitle = ({ props, state }) => () => {
+  const { modelValue = [], dataSource = [] } = props;
+  const { headerInfo } = state;
+  modelValue.forEach((value, index) => {
+    var _a;
+    if (!dataSource[index].multiple) {
+      headerInfo[index].title = ((_a = getOption(dataSource[index].options, value)) == null ? void 0 : _a.label) || headerInfo[index].title;
+    }
+  });
+};
+const created = ({ api, emit, props, state, refs, nextTick }) => () => {
   nextTick(() => {
     state.dataSource = cloneDeep(props.dataSource);
     state.defaultSelectedArray = cloneDeep(props.defaultSelectedArray);
@@ -9,43 +67,131 @@ const created = ({ props, state, refs, nextTick }) => () => {
     state.headerInfo = state.dataSource.map((item) => {
       return { isSelected: false, title: item.title, isUP: false };
     });
+    api.initValue({ props, emit });
+    if (props.type === "list") {
+      state.dataSource.forEach((item, index) => {
+        const { flattenData, dataMap } = getFlatOptions(item.options);
+        item.options = flattenData;
+        state.optionMap[index] = dataMap;
+      });
+    }
+  });
+};
+const computedCurrentOptions = ({ state, props }) => () => {
+  const { options = [], multiple } = state.dataSource[state.headerIndex] || {};
+  const selectedValue = props.modelValue[state.headerIndex];
+  options.forEach((item) => {
+    var _a;
+    item.show = state.isSearching ? item.label.includes(state.searchValue) : ((_a = item.show) != null ? _a : parent == null ? void 0 : parent.expanded) || item.level === 0;
+    item.active = multiple ? selectedValue.includes(item.value) : item.value === selectedValue;
+  });
+  return options.filter((i) => i.show);
+};
+const getFlatOptions = (options) => {
+  const flattenData = [];
+  const dataMap = {};
+  const getChild = (data, level = 0, parent2) => {
+    data.forEach((item, index) => {
+      var _a, _b;
+      const id = parent2 ? parent2.id + index : String(index);
+      const parentId = (parent2 == null ? void 0 : parent2.id) || "";
+      const expanded = (parent2 == null ? void 0 : parent2.expanded) && ((_a = item.children) == null ? void 0 : _a.length) && item.expanded || false;
+      const currentData = __spreadProps(__spreadValues({}, item), { id, level, expanded, parentId });
+      flattenData.push(currentData);
+      if ((_b = item.children) == null ? void 0 : _b.length) {
+        getChild(item.children, level + 1, currentData);
+      }
+      dataMap[currentData.id] = item;
+    });
+  };
+  getChild(options);
+  flattenData.forEach((item) => {
+    if (item.children) {
+      item.hasChild = item.children.length > 0;
+      delete item.children;
+    }
   });
+  return { flattenData, dataMap };
 };
 const handleClick = ({ api, props, state }) => (value) => {
   var _a, _b, _c;
-  state.wheelData = (_a = props.dataSource[value]) == null ? void 0 : _a.children;
+  if (props.disabled || props.dataSource[value].disabled) {
+    return;
+  }
+  if (props.type === "wheel") {
+    state.wheelData = (_a = props.dataSource[value]) == null ? void 0 : _a.options;
+  }
   if (state.headerIndex === -1) {
-    state.showWheel = true;
+    state.showOptions = true;
     state.headerIndex = value;
     state.headerInfo[value] = getNewHeaderInfo(state.headerInfo, value, true);
     state.defaultSelectedIndexs = (_b = state.defaultSelectedArray[value]) != null ? _b : api.loadDefault(value);
   } else if (state.headerIndex !== value) {
-    state.showWheel = true;
+    state.showOptions = true;
     state.headerInfo[state.headerIndex] = getNewHeaderInfo(state.headerInfo, state.headerIndex, false);
     state.headerIndex = value;
     state.headerInfo[value] = getNewHeaderInfo(state.headerInfo, value, true);
     state.defaultSelectedIndexs = (_c = state.defaultSelectedArray[value]) != null ? _c : api.loadDefault(value);
   } else {
-    state.showWheel = !state.showWheel;
+    state.showOptions = !state.showOptions;
     const { isUP } = state.headerInfo[value];
     state.headerInfo[value] = getNewHeaderInfo(state.headerInfo, value, !isUP);
   }
 };
+const handleOptionSelect = ({ api, state, emit }) => (option) => {
+  api.updateValue(option.value);
+  emit("item-click", state.optionMap[state.headerIndex][option.id], state.headerIndex);
+  if (!state.dataSource[state.headerIndex].multiple) {
+    api.handleClose();
+  }
+};
+const handleSearchInput = ({ state, emit }) => () => {
+  const { searchValue } = state;
+  emit("update:searchValue", searchValue);
+};
+const toggleChildExpand = (state, parentId, index) => {
+  const { options } = state.dataSource[state.headerIndex];
+  for (let i = index + 1; i < options.length; i++) {
+    if (options[i].parentId === parentId) {
+      options[i].show = !options[i].show;
+    } else {
+      break;
+    }
+  }
+};
+const toggleItemExpand = ({ state }) => (option) => {
+  const index = state.dataSource[state.headerIndex].options.findIndex((i) => i.id === option.id);
+  if (index !== -1) {
+    const target = state.dataSource[state.headerIndex].options[index];
+    target.expanded = !target.expanded;
+    toggleChildExpand(state, target.id, index);
+  }
+};
 const confirm = ({ state, emit }) => () => {
   const wheelLevelItems = getWheelLevelItems(state.wheelData, state.defaultSelectedIndexs);
   const { selectedLabels, selectedItems } = getSelected(wheelLevelItems, state.defaultSelectedIndexs);
   state.headerInfo[state.headerIndex] = { isSelected: true, title: selectedLabels, isUP: false };
   state.defaultSelectedArray[state.headerIndex] = state.defaultSelectedIndexs;
   emit("confirm", selectedItems, state.headerIndex, state.defaultSelectedIndexs);
-  state.showWheel = false;
+  state.showOptions = false;
 };
 const reset = ({ api, props, state, emit }) => () => {
   var _a;
-  state.headerInfo[state.headerIndex] = { isSelected: false, title: "", isUP: false };
+  state.headerInfo[state.headerIndex] = {
+    isSelected: false,
+    title: props.dataSource[state.headerIndex].title || "",
+    isUP: false
+  };
   state.defaultSelectedIndexs = (_a = props.defaultSelectedArray[state.headerIndex]) != null ? _a : api.loadDefault(state.headerIndex);
   state.defaultSelectedArray[state.headerIndex] = state.defaultSelectedIndexs;
   emit("reset", [], state.headerIndex, state.defaultSelectedIndexs);
-  state.showWheel = false;
+  state.showOptions = false;
+};
+const handleClose = (state) => () => {
+  state.showOptions = false;
+  if (state.headerIndex !== -1) {
+    state.headerInfo[state.headerIndex].isUP = false;
+  }
 };
 const wheelChange = (state) => (indexs) => {
   state.defaultSelectedIndexs = indexs;
@@ -60,7 +206,7 @@ const clickWheelItem = ({ state, emit }) => (indexs, text, item) => {
   }
   state.defaultSelectedArray[state.headerIndex] = state.defaultSelectedIndexs;
   emit("confirm", item, state.headerIndex, indexs);
-  state.showWheel = false;
+  state.showOptions = false;
 };
 const getWheelLevelItems = (wheelData, newIndexs) => {
   const level_1 = wheelData;
@@ -160,9 +306,17 @@ const getEl = (node) => {
   return node.$el || node;
 };
 const getLabelsStyle = (state) => {
+  const len = state.dataSource.length;
+  if (len === 1) {
+    return [
+      {
+        flex: 1,
+        justifyContent: "space-between"
+      }
+    ];
+  }
   const over25Labels = state.labelLevelsInfo.filter((i) => i && !i.isOver25);
   let widthInfo = over25Labels;
-  const len = state.dataSource.length;
   if (len >= 4) {
     return getStyleConfig(state.labelLevelsInfo, { width: `${(1 / len * 100).toFixed(2)}%` });
   }
@@ -197,8 +351,20 @@ const getFillArray = (state, widthInfo, maxWidth) => {
     };
   });
 };
+const handleSearchBtnClick = ({ props, state, nextTick, vm }) => () => {
+  if (props.disabled) {
+    return;
+  }
+  state.isSearching = !state.isSearching;
+  nextTick(() => {
+    if (state.isSearching) {
+      vm.$refs.searchInput.focus();
+    }
+  });
+};
 export {
   clickWheelItem,
+  computedCurrentOptions,
   confirm,
   created,
   getEl,
@@ -208,12 +374,21 @@ export {
   getMaxFloor,
   getNewHeaderInfo,
   getNextLevel,
+  getOption,
   getRect,
   getSelected,
   getStyleConfig,
   getWheelLevelItems,
   handleClick,
+  handleClose,
+  handleOptionSelect,
+  handleSearchBtnClick,
+  handleSearchInput,
+  initValue,
   loadDefault,
   reset,
+  toggleItemExpand,
+  updateTitle,
+  updateValue,
   wheelChange
 };