@opentiny/vue-renderless 3.13.2 → 3.14.1

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
 };

package/multi-select/vue.js

@@ -1,5 +1,22 @@
 import "../chunk-G2ADBYYC.js";
-import { created, handleClick, confirm, reset, wheelChange, clickWheelItem, loadDefault } from "./index";
+import {
+  created,
+  initValue,
+  handleClick,
+  confirm,
+  reset,
+  wheelChange,
+  clickWheelItem,
+  loadDefault,
+  handleSearchBtnClick,
+  handleOptionSelect,
+  handleClose,
+  toggleItemExpand,
+  computedCurrentOptions,
+  updateValue,
+  handleSearchInput,
+  updateTitle
+} from "./index";
 const api = [
   "state",
   "created",
@@ -8,58 +25,86 @@ const api = [
   "reset",
   "wheelChange",
   "clickWheelItem",
-  "loadDefault"
+  "loadDefault",
+  "handleSearchBtnClick",
+  "handleClose",
+  "handleSearchInput"
 ];
-const initState = (reactive) => {
+const initState = ({ emitter, reactive, computed, api: api2, props }) => {
   const state = reactive({
     dataSource: [],
     wheelData: [],
+    isSearching: false,
     headerIndex: -1,
-    showWheel: false,
+    showOptions: false,
     labelLevelsInfo: [],
     labelsStyle: [],
     wheelIndex: [],
     wheelText: "",
     headerInfo: [],
     defaultSelectedIndexs: [],
-    defaultSelectedArray: []
+    defaultSelectedArray: [],
+    multiSelectEmitter: emitter(),
+    searchValue: "",
+    optionMap: [],
+    currentOptions: computed(() => api2.computedCurrentOptions()),
+    showMask: computed(() => props.mask && state.showOptions)
   });
   return state;
 };
-const initApi = ({ api: api2, props, state, emit, nextTick, refs }) => {
+const initApi = ({ api: api2, props, state, emit, nextTick, refs, vm }) => {
   Object.assign(api2, {
     state,
-    created: created({ props, state, refs, nextTick }),
+    created: created({ api: api2, emit, props, state, refs, nextTick }),
+    initValue: initValue({ props, emit }),
     handleClick: handleClick({ api: api2, props, state }),
     confirm: confirm({ state, emit }),
     reset: reset({ api: api2, props, state, emit }),
     wheelChange: wheelChange(state),
     clickWheelItem: clickWheelItem({ state, emit }),
-    loadDefault: loadDefault({ props, state })
+    loadDefault: loadDefault({ props, state }),
+    handleSearchBtnClick: handleSearchBtnClick({ props, state, nextTick, vm }),
+    handleOptionSelect: handleOptionSelect({ api: api2, state, emit }),
+    handleClose: handleClose(state),
+    toggleItemExpand: toggleItemExpand({ state }),
+    computedCurrentOptions: computedCurrentOptions({ state, props }),
+    updateValue: updateValue({ state, props, emit }),
+    updateTitle: updateTitle({ props, state }),
+    handleSearchInput: handleSearchInput({ state, emit })
   });
 };
-const initWatch = ({ watch, props, state, refs, nextTick }) => {
+const initWatch = ({ api: api2, watch, props, state, refs, nextTick }) => {
   watch(
     () => props.dataSource,
     () => {
-      api.created({ props, state, refs, nextTick });
+      api2.created({ props, state, refs, nextTick });
     }
   );
   watch(
     () => props.defaultSelectedArray,
     () => {
-      api.created({ props, state, refs, nextTick });
+      api2.created({ props, state, refs, nextTick });
     }
   );
+  watch(
+    () => props.modelValue,
+    () => {
+      api2.updateTitle();
+    },
+    { deep: true }
+  );
 };
-const renderless = (props, { onMounted, reactive, watch }, { emit, nextTick, refs }) => {
+const renderless = (props, { onMounted, reactive, watch, provide, computed }, { emit, nextTick, refs, vm, emitter }) => {
   const api2 = {};
-  const state = initState(reactive);
-  initApi({ api: api2, props, state, emit, nextTick, refs });
-  initWatch({ watch, props, state, refs, nextTick });
+  const state = initState({ emitter, reactive, computed, api: api2, props });
+  provide("multiSelect", vm);
+  initApi({ api: api2, props, state, emit, nextTick, refs, vm });
+  initWatch({ api: api2, watch, props, state, refs, nextTick });
   onMounted(() => {
     api2.created({ props, state, refs, nextTick });
   });
+  state.multiSelectEmitter.on("multiSelectItemClick", api2.handleOptionSelect);
+  state.multiSelectEmitter.on("toggleItemExpand", api2.toggleItemExpand);
   return api2;
 };
 export {

package/multi-select-item/index.js

@@ -0,0 +1,23 @@
+import "../chunk-G2ADBYYC.js";
+const handleClick = ({ props, multiSelect }) => (event) => {
+  if (props.option.disabled) {
+    return;
+  }
+  event.stopPropagation();
+  if (props.disabled !== true && multiSelect.disabled !== true) {
+    multiSelect.state.multiSelectEmitter.emit("multiSelectItemClick", props.option);
+  }
+};
+const toggleExpand = ({ props, multiSelect }) => (event) => {
+  if (props.option.disabled) {
+    return;
+  }
+  event.stopPropagation();
+  if (props.disabled !== true && multiSelect.disabled !== true) {
+    multiSelect.state.multiSelectEmitter.emit("toggleItemExpand", props.option);
+  }
+};
+export {
+  handleClick,
+  toggleExpand
+};

package/multi-select-item/vue.js

@@ -0,0 +1,31 @@
+import "../chunk-G2ADBYYC.js";
+import { handleClick, toggleExpand } from "./index";
+const api = [
+  "state",
+  "created",
+  "handleClick",
+  "confirm",
+  "reset",
+  "wheelChange",
+  "clickWheelItem",
+  "loadDefault",
+  "toggleExpand"
+];
+const initApi = ({ api: api2, props, state, multiSelect }) => {
+  Object.assign(api2, {
+    state,
+    handleClick: handleClick({ props, multiSelect }),
+    toggleExpand: toggleExpand({ props, multiSelect })
+  });
+};
+const renderless = (props, { reactive, inject }, { emit, nextTick, refs, vm }) => {
+  const api2 = {};
+  const multiSelect = inject("multiSelect");
+  const state = reactive({});
+  initApi({ api: api2, multiSelect, props, state });
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/numeric/index.js

@@ -16,11 +16,11 @@ const initService = (service) => {
   };
 };
 const getDecimal = (props) => (value) => getMiniDecimal(value, props.plugin);
-const watchValue = ({ api, state, nextTick }) => (value) => {
+const watchValue = ({ api, props, state, nextTick }) => (value) => {
   if (value === state.currentValue) {
     return;
   }
-  api.setCurrentValue(value);
+  api.setCurrentValue(value, props.changeCompat);
   nextTick(() => {
     api.dispatchDisplayedValue();
   });
@@ -61,7 +61,8 @@ const increase = ({ api, props, state }) => () => {
   if (state.inputDisabled || state.maxDisabled) {
     return;
   }
-  const value = (props.mouseWheel ? state.displayValue : props.modelValue) || 0;
+  const userInput = props.stringMode ? state.userInput : Number(state.userInput);
+  const value = (props.mouseWheel ? state.displayValue : userInput) || 0;
   if (value.toString().includes("e")) {
     return;
   }
@@ -79,7 +80,8 @@ const decrease = ({ api, props, state }) => () => {
   if (state.inputDisabled || state.minDisabled) {
     return;
   }
-  const value = (props.mouseWheel ? state.displayValue : props.modelValue) || 0;
+  const userInput = props.stringMode ? state.userInput : Number(state.userInput);
+  const value = (props.mouseWheel ? state.displayValue : userInput) || 0;
   if (value.toString().includes("e")) {
     return;
   }
@@ -108,9 +110,9 @@ const handleBlur = ({
     dispatch(constants.COMPONENT_NAME, constants.EVENT_NAME.blur, [state.displayValue]);
   }
 };
-const handleFocus = ({ emit, state, props, api, refs }) => (event) => {
+const handleFocus = ({ emit, state, props, api, vm }) => (event) => {
   if (props.disabled) {
-    refs.input.blur();
+    vm.$refs.input.blur();
   }
   state.inputStatus = true;
   const currentValue = api.getDecimal(state.currentValue);
@@ -126,8 +128,8 @@ const handleFocus = ({ emit, state, props, api, refs }) => (event) => {
   }
   emit("focus", event);
 };
-const focus = (refs) => () => {
-  refs.input.focus();
+const focus = (vm) => () => {
+  vm.$refs.input.focus();
 };
 const getEmitValue = (args) => {
   let { newVal, emitValue, allowEmpty, defaultVal, bigNew, oldVal } = args;
@@ -163,7 +165,7 @@ const setCurrentValue = ({
   emit,
   props,
   state
-}) => (newVal) => {
+}) => (newVal, emitChangeFlag = true) => {
   const { max, min, allowEmpty, validateEvent, stringMode, plugin } = props;
   const { format } = state;
   const oldVal = state.currentValue;
@@ -183,7 +185,9 @@ const setCurrentValue = ({
   state.lastInput = emitValue;
   if (emitValue !== oldVal) {
     emit("update:modelValue", emitValue);
-    emit("change", emitValue, oldVal);
+    if (emitChangeFlag) {
+      emit("change", emitValue, oldVal);
+    }
     state.currentValue = emitValue;
     state.userInput = emitValue;
     if (validateEvent && oldVal === "") {
@@ -233,8 +237,21 @@ const handleInputChange = ({ api, state, props }) => (event) => {
   }
   api.setCurrentValue(value);
 };
-const select = (refs) => () => refs.input.select();
+const select = (vm) => () => vm.$refs.input.select();
 const mounted = ({ constants, parent, props, state }) => () => {
+  if (props.shape === "filter") {
+    state.controls = false;
+  }
+  if (isNumber(state.currentValue) && state.currentValue < props.min) {
+    state.currentValue = props.min;
+    state.lastInput = props.min;
+    state.userInput = props.min;
+  }
+  if (isNumber(state.currentValue) && state.currentValue > props.max) {
+    state.currentValue = props.max;
+    state.lastInput = props.max;
+    state.userInput = props.max;
+  }
   const innerInput = parent.$el.querySelector("input");
   innerInput.setAttribute(constants.KEY, constants.VALUE);
   innerInput.setAttribute(constants.MAX, props.max);
@@ -255,8 +272,11 @@ const updated = ({ constants, parent, state }) => () => {
   const innerInput = parent.$el.querySelector("input");
   innerInput && innerInput.setAttribute(constants.VALUENOW, state.currentValue);
 };
-const displayValue = ({ props, state }) => () => {
+const displayValue = ({ props, state, api }) => () => {
   const { currentValue, inputStatus, userInput } = state;
+  if (props.shape === "filter" && props.filter) {
+    api.filterValue();
+  }
   if (inputStatus) {
     return userInput;
   }
@@ -321,10 +341,24 @@ const getDisplayOnlyText = ({ parent, state, props }) => () => {
     }
   }
 };
+const filterValue = ({ state }) => () => {
+  return (state.radioVal || "") + state.lastInput;
+};
+const handleClear = ({ state, emit }) => () => {
+  state.currentValue = "";
+  state.userInput = "";
+  state.lastInput = "";
+  state.radioVal = "";
+  emit("clear");
+};
+const handleChange = ({ state, emit }) => () => {
+  emit("filter-change", state.radioVal);
+};
 export {
   decrease,
   dispatchDisplayedValue,
   displayValue,
+  filterValue,
   focus,
   getDecimal,
   getDisplayOnlyText,
@@ -333,6 +367,8 @@ export {
   getPrecision,
   getUnitPrecision,
   handleBlur,
+  handleChange,
+  handleClear,
   handleFocus,
   handleInput,
   handleInputChange,