@opentiny/vue-renderless 3.27.0 → 3.28.0

package/grid-select/index.js

@@ -2,9 +2,74 @@ import {
   __spreadProps,
   __spreadValues
 } from "../chunk-G2ADBYYC.js";
+import { find } from "@opentiny/utils";
+const updateBaseSelect = ({ vm, props, data, label }) => {
+  var _a, _b, _c;
+  if (!vm.$refs.baseSelectRef) {
+    return;
+  }
+  vm.$refs.baseSelectRef.updateSelectedData(data);
+  if (!props.multiple) {
+    const baseState = vm.$refs.baseSelectRef.state;
+    if (!baseState) {
+      return;
+    }
+    const currentLabel = label != null ? label : data && !Array.isArray(data) ? (_c = (_b = (_a = data.state) == null ? void 0 : _a.currentLabel) != null ? _b : data.currentLabel) != null ? _c : data[props.textField] : "";
+    baseState.selectedLabel = currentLabel || "";
+    if (props.filterable || props.searchable) {
+      baseState.query = currentLabel || "";
+    }
+  }
+};
+const syncGridSelection = ({ props, vm, state, nextTick }) => () => {
+  if (!vm.$refs.gridRef) {
+    return;
+  }
+  nextTick(() => {
+    try {
+      const tableData = vm.$refs.gridRef.getTableData();
+      const fullData = (tableData == null ? void 0 : tableData.fullData) || [];
+      if (props.multiple) {
+        if (Array.isArray(state.modelValue) && state.modelValue.length > 0) {
+          const rowsToSelect = fullData.filter((row) => state.modelValue.indexOf(row[props.valueField]) !== -1);
+          vm.$refs.gridRef.clearSelection();
+          if (rowsToSelect.length > 0) {
+            vm.$refs.gridRef.setSelection(rowsToSelect, true);
+          }
+        } else {
+          vm.$refs.gridRef.clearSelection();
+        }
+      } else {
+        if (state.modelValue) {
+          const rowToSelect = fullData.find((row) => row[props.valueField] === state.modelValue);
+          vm.$refs.gridRef.clearRadioRow();
+          if (rowToSelect) {
+            vm.$refs.gridRef.setRadioRow(rowToSelect);
+            state.currentKey = rowToSelect[props.valueField];
+          }
+        } else {
+          vm.$refs.gridRef.clearRadioRow();
+          state.currentKey = "";
+        }
+      }
+    } catch (e) {
+    }
+  });
+};
+const handleVisibleChange = ({ api, state, props }) => (visible) => {
+  var _a;
+  if (visible && state.isMounted) {
+    api.syncGridSelection();
+    if (props.remote && ((_a = props.remoteConfig) == null ? void 0 : _a.autoSearch) && state.firstAutoSearch !== false) {
+      api.filter("");
+      state.firstAutoSearch = false;
+    }
+  }
+};
 const buildSelectConfig = ({ props, state }) => () => {
-  const checkRowKeys = state.gridCheckedData;
   const selectConfig = props.selectConfig;
+  const rawCheckRowKeys = state.gridCheckedData;
+  const checkRowKeys = Array.isArray(rawCheckRowKeys) ? rawCheckRowKeys : rawCheckRowKeys && Array.isArray(rawCheckRowKeys.value) ? rawCheckRowKeys.value : [];
   return Object.assign({}, selectConfig, { checkRowKeys });
 };
 const buildRadioConfig = ({ props, state }) => () => {
@@ -13,29 +78,32 @@ const buildRadioConfig = ({ props, state }) => () => {
   const radioConfig = props.radioConfig;
   return Object.assign({}, radioConfig, { checkRowKey, highlight });
 };
-const filter = ({ props, state, vm }) => (value) => {
+const filter = ({ props, state, vm }) => async (value) => {
   const { multiple, valueField, filterMethod, remote, remoteMethod } = props;
   if ((props.filterable || props.searchable) && typeof filterMethod === "function") {
     const table = vm.$refs.gridRef.$refs.tinyTable;
     const fullData = table.getTableData().fullData;
     vm.$refs.gridRef.scrollTo(null, 0);
-    table.loadTableData(filterMethod(value, fullData) || []);
+    await table.loadData(filterMethod(value, fullData) || []);
     vm.$refs.gridRef.handleTableData(!value);
     state.previousQuery = value;
   } else if (remote && typeof remoteMethod === "function") {
     state.previousQuery = value;
     remoteMethod(value, props.extraQueryParams).then((data) => {
       if (multiple) {
-        const selectedIds = state.selected.map((sel) => sel[valueField]);
+        const selectedIds = Array.isArray(state.selected) ? state.selected.map((sel) => sel[valueField]) : [];
         vm.$refs.gridRef.clearSelection();
-        vm.$refs.gridRef.setSelection(
-          data.filter((row) => ~selectedIds.indexOf(row[valueField])),
-          true
-        );
-        state.remoteData = data.filter((row) => !~selectedIds.indexOf(row[valueField])).concat(state.selected);
+        const selectedRows = data.filter((row) => selectedIds.indexOf(row[valueField]) !== -1);
+        if (selectedRows.length > 0) {
+          vm.$refs.gridRef.setSelection(selectedRows, true);
+        }
+        state.remoteData = data;
       } else {
         vm.$refs.gridRef.clearRadioRow();
-        vm.$refs.gridRef.setRadioRow(find(data, (item) => props.modelValue === item[props.valueField]));
+        const selectedRow = find(data, (item) => props.modelValue === item[props.valueField]);
+        if (selectedRow) {
+          vm.$refs.gridRef.setRadioRow(selectedRow);
+        }
         state.remoteData = data;
       }
       vm.$refs.gridRef.$refs.tinyTable.lastScrollTop = 0;
@@ -44,39 +112,357 @@ const filter = ({ props, state, vm }) => (value) => {
     });
   }
 };
-const radioChange = ({ props, vm, emit }) => ({ row }) => {
-  if (!props.multiple) {
-    vm.$refs.baseSelectRef.updateSelectedData(__spreadProps(__spreadValues({}, row), {
-      currentLabel: row[props.textField],
-      value: row[props.valueField],
-      state: {
-        currentLabel: row[props.textField]
-      }
-    }));
-    vm.$refs.baseSelectRef.hidePanel();
-    emit("update:modelValue", row);
-    emit("change", row);
+const getcheckedData = ({ props, state }) => () => {
+  const checkedKey = [];
+  if (!Array.isArray(state.selected)) {
+    return props.modelValue ? [props.modelValue] : state.selected && state.selected[props.valueField] ? [state.selected[props.valueField]] : [];
+  } else {
+    state.selected.length > 0 && state.selected.forEach((item) => {
+      checkedKey.push(item[props.valueField]);
+    });
+    return checkedKey;
   }
 };
-const selectChange = ({ props, vm, emit }) => ({ $table, selection, checked, row }) => {
-  if (props.multiple) {
-    vm.$refs.baseSelectRef.updateSelectedData(
-      selection.map((node) => {
+const getPluginOption = ({ api, props, state }) => (value) => {
+  var _a;
+  const isRemote = (props.filterable || props.searchable) && props.remote && (typeof props.remoteMethod === "function" || typeof props.initQuery === "function");
+  const { textField, valueField } = props;
+  const sourceData = isRemote ? state.remoteData : Array.isArray(state.gridData) ? state.gridData : ((_a = state.gridData) == null ? void 0 : _a.data) || [];
+  const selNode = find(sourceData, (item) => item[valueField] === value);
+  const items = [];
+  if (selNode) {
+    selNode.currentLabel = selNode[textField];
+    items.push(selNode);
+  }
+  return items;
+};
+const initQuery = ({ props, state, vm }) => (options = {}) => {
+  const { init } = options;
+  const isRemote = (props.filterable || props.searchable) && props.remote && (typeof props.remoteMethod === "function" || typeof props.initQuery === "function");
+  let selected;
+  if (isRemote && props.initQuery) {
+    let initData = props.initQuery(props.modelValue, props.extraQueryParams, !!init);
+    if (initData && initData.then) {
+      return new Promise((resolve) => {
+        initData.then((selected2) => {
+          state.remoteData = selected2;
+          if (vm.$refs.gridRef) {
+            vm.$refs.gridRef.loadData(selected2);
+          }
+          resolve(selected2);
+        });
+      });
+    }
+    selected = initData;
+    state.remoteData = selected;
+    if (vm.$refs.gridRef) {
+      vm.$refs.gridRef.loadData(selected);
+    }
+  }
+  return Promise.resolve(selected);
+};
+const mounted = ({ api, state, props, vm, nextTick }) => () => {
+  const initSelected = () => {
+    if (!state.modelValue || Array.isArray(state.modelValue) && state.modelValue.length === 0) {
+      return;
+    }
+    if (props.multiple) {
+      let initialNodes = [];
+      if (Array.isArray(state.modelValue)) {
+        state.modelValue.forEach((value) => {
+          const option = api.getPluginOption(value);
+          initialNodes = initialNodes.concat(option);
+        });
+      }
+      const selected = initialNodes.map((node) => {
         return __spreadProps(__spreadValues({}, node), {
           currentLabel: node[props.textField],
-          value: node[props.valueField],
-          isGrid: true
+          value: node[props.valueField]
+        });
+      });
+      updateBaseSelect({ vm, props, data: selected });
+      state.selected = selected;
+      if (vm.$refs.gridRef && selected.length > 0) {
+        vm.$refs.gridRef.clearSelection();
+        vm.$refs.gridRef.setSelection(selected, true);
+      }
+    } else {
+      const data = api.getPluginOption(state.modelValue)[0];
+      if (data) {
+        if (vm.$refs.baseSelectRef) {
+          updateBaseSelect({
+            vm,
+            props,
+            data: __spreadProps(__spreadValues({}, data), {
+              currentLabel: data[props.textField],
+              value: data[props.valueField],
+              state: {
+                currentLabel: data[props.textField]
+              }
+            })
+          });
+        }
+        state.selected = data;
+        state.currentKey = data[props.valueField];
+        if (vm.$refs.gridRef) {
+          vm.$refs.gridRef.clearRadioRow();
+          vm.$refs.gridRef.setRadioRow(data);
+        }
+      }
+    }
+  };
+  nextTick(() => {
+    const initQueryPromise = api.initQuery({ init: true });
+    if (initQueryPromise && typeof initQueryPromise.then === "function") {
+      initQueryPromise.then(() => {
+        nextTick(() => {
+          initSelected();
+        });
+      }).catch(() => {
+        nextTick(() => {
+          initSelected();
         });
+      });
+    } else {
+      initSelected();
+    }
+  });
+};
+const watchValue = ({ api, props, vm, state }) => (newValue, oldValue) => {
+  var _a, _b;
+  if (props.multiple) {
+    let initialNodes = [];
+    if (Array.isArray(newValue) && newValue.length > 0) {
+      const isRemote = (props.filterable || props.searchable) && props.remote && (typeof props.remoteMethod === "function" || typeof props.initQuery === "function");
+      const sourceData = isRemote ? state.remoteData : Array.isArray(state.gridData) ? state.gridData : ((_a = state.gridData) == null ? void 0 : _a.data) || [];
+      if (vm.$refs.gridRef) {
+        try {
+          const tableData = vm.$refs.gridRef.getTableData();
+          const fullData = (tableData == null ? void 0 : tableData.fullData) || sourceData;
+          newValue.forEach((value) => {
+            const foundRow = fullData.find((item) => item[props.valueField] === value);
+            if (foundRow) {
+              initialNodes.push(foundRow);
+            } else {
+              const existing = state.selected.find((item) => item[props.valueField] === value);
+              if (existing) {
+                initialNodes.push(existing);
+              }
+            }
+          });
+        } catch (e) {
+          newValue.forEach((value) => {
+            const foundRow = sourceData.find((item) => item[props.valueField] === value);
+            if (foundRow) {
+              initialNodes.push(foundRow);
+            } else {
+              const existing = state.selected.find((item) => item[props.valueField] === value);
+              if (existing) {
+                initialNodes.push(existing);
+              }
+            }
+          });
+        }
+      } else {
+        newValue.forEach((value) => {
+          const foundRow = sourceData.find((item) => item[props.valueField] === value);
+          if (foundRow) {
+            initialNodes.push(foundRow);
+          } else {
+            const existing = state.selected.find((item) => item[props.valueField] === value);
+            if (existing) {
+              initialNodes.push(existing);
+            }
+          }
+        });
+      }
+    }
+    const selected = initialNodes.map((node) => {
+      return __spreadProps(__spreadValues({}, node), {
+        currentLabel: node[props.textField],
+        value: node[props.valueField]
+      });
+    });
+    if (vm.$refs.baseSelectRef) {
+      updateBaseSelect({ vm, props, data: selected });
+    }
+    state.selected = selected;
+    if (vm.$refs.gridRef) {
+      vm.$refs.gridRef.clearSelection();
+      if (selected.length > 0) {
+        try {
+          const tableData = vm.$refs.gridRef.getTableData();
+          const fullData = (tableData == null ? void 0 : tableData.fullData) || [];
+          const rowsToSelect = fullData.filter(
+            (row) => selected.some((sel) => sel[props.valueField] === row[props.valueField])
+          );
+          if (rowsToSelect.length > 0) {
+            vm.$refs.gridRef.setSelection(rowsToSelect, true);
+          }
+        } catch (e) {
+          vm.$refs.gridRef.setSelection(selected, true);
+        }
+      }
+    }
+  } else {
+    if (!newValue) {
+      state.selected = {};
+      state.currentKey = "";
+      if (vm.$refs.gridRef) {
+        vm.$refs.gridRef.clearRadioRow();
+      }
+      if (vm.$refs.baseSelectRef) {
+        updateBaseSelect({ vm, props, data: null });
+      }
+      return;
+    }
+    const isRemote = (props.filterable || props.searchable) && props.remote && (typeof props.remoteMethod === "function" || typeof props.initQuery === "function");
+    const sourceData = isRemote ? state.remoteData : Array.isArray(state.gridData) ? state.gridData : ((_b = state.gridData) == null ? void 0 : _b.data) || [];
+    let data = null;
+    if (vm.$refs.gridRef) {
+      try {
+        const tableData = vm.$refs.gridRef.getTableData();
+        const fullData = (tableData == null ? void 0 : tableData.fullData) || sourceData;
+        data = fullData.find((item) => item[props.valueField] === newValue);
+      } catch (e) {
+        data = sourceData.find((item) => item[props.valueField] === newValue);
+      }
+    } else {
+      data = sourceData.find((item) => item[props.valueField] === newValue);
+    }
+    if (!data && state.selected && typeof state.selected === "object" && !Array.isArray(state.selected) && state.selected[props.valueField] === newValue) {
+      data = state.selected;
+    }
+    if (data && typeof data === "object" && !Array.isArray(data)) {
+      updateBaseSelect({
+        vm,
+        props,
+        data: __spreadProps(__spreadValues({}, data), {
+          currentLabel: data[props.textField],
+          value: data[props.valueField],
+          state: {
+            currentLabel: data[props.textField]
+          }
+        })
+      });
+      state.selected = data;
+      state.currentKey = data[props.valueField];
+      if (vm.$refs.gridRef) {
+        vm.$refs.gridRef.clearRadioRow();
+        try {
+          const tableData = vm.$refs.gridRef.getTableData();
+          const fullData = (tableData == null ? void 0 : tableData.fullData) || [];
+          const rowToSelect = fullData.find((row) => row[props.valueField] === newValue);
+          if (rowToSelect) {
+            vm.$refs.gridRef.setRadioRow(rowToSelect);
+          } else {
+            vm.$refs.gridRef.setRadioRow(data);
+          }
+        } catch (e) {
+          vm.$refs.gridRef.setRadioRow(data);
+        }
+      }
+    }
+  }
+};
+const radioChange = ({ props, vm, emit, state }) => ({ row }) => {
+  if (!props.multiple) {
+    updateBaseSelect({
+      vm,
+      props,
+      data: __spreadProps(__spreadValues({}, row), {
+        currentLabel: row[props.textField],
+        value: row[props.valueField],
+        state: {
+          currentLabel: row[props.textField]
+        }
       })
-    );
-    emit("update:modelValue", selection);
-    emit("change", selection);
+    });
+    state.selected = row;
+    state.currentKey = row[props.valueField];
+    state.modelValue = row[props.valueField];
+    vm.$refs.baseSelectRef.hidePanel();
+    emit("update:modelValue", row[props.valueField]);
+    emit("change", row[props.valueField]);
+  }
+};
+const selectChange = ({ props, vm, emit, state, nextTick }) => ({ $table, selection, checked, row }) => {
+  if (props.multiple) {
+    const { textField, valueField } = props;
+    const remoteItem = (row2) => {
+      const removeItem = state.selected.find((item) => item[valueField] === row2[valueField]);
+      if (removeItem) {
+        const index = state.selected.indexOf(removeItem);
+        state.selected.splice(index, 1);
+      }
+    };
+    if (row) {
+      if (checked) {
+        const exists = state.selected.find((item) => item[valueField] === row[valueField]);
+        if (!exists) {
+          state.selected.push(__spreadProps(__spreadValues({}, row), {
+            value: row[valueField],
+            currentLabel: row[textField]
+          }));
+        }
+      } else {
+        remoteItem(row);
+      }
+    } else {
+      if (checked) {
+        selection.forEach((row2) => {
+          const exists = state.selected.find((item) => item[valueField] === row2[valueField]);
+          if (!exists) {
+            state.selected.push(__spreadProps(__spreadValues({}, row2), {
+              value: row2[valueField],
+              currentLabel: row2[textField]
+            }));
+          }
+        });
+      } else {
+        const tableData = ($table == null ? void 0 : $table.tableFullData) || [];
+        tableData.forEach((row2) => {
+          remoteItem(row2);
+        });
+      }
+    }
+    const selectedData = state.selected.map((node) => __spreadProps(__spreadValues({}, node), {
+      currentLabel: node[textField],
+      value: node[valueField],
+      isGrid: true
+    }));
+    updateBaseSelect({ vm, props, data: selectedData });
+    const currentValue = state.selected.map((item) => item[valueField]);
+    state.modelValue = currentValue;
+    emit("update:modelValue", currentValue);
+    emit("change", currentValue, state.selected);
+    if (vm.$refs.gridRef) {
+      nextTick(() => {
+        try {
+          const tableData = vm.$refs.gridRef.getTableData();
+          const fullData = (tableData == null ? void 0 : tableData.fullData) || [];
+          const rowsToSelect = fullData.filter((row2) => currentValue.indexOf(row2[valueField]) !== -1);
+          vm.$refs.gridRef.clearSelection();
+          if (rowsToSelect.length > 0) {
+            vm.$refs.gridRef.setSelection(rowsToSelect, true);
+          }
+        } catch (e) {
+        }
+      });
+    }
   }
 };
 export {
   buildRadioConfig,
   buildSelectConfig,
   filter,
+  getPluginOption,
+  getcheckedData,
+  handleVisibleChange,
+  initQuery,
+  mounted,
   radioChange,
-  selectChange
+  selectChange,
+  syncGridSelection,
+  watchValue
 };

package/grid-select/vue.js

@@ -1,27 +1,121 @@
 import "../chunk-G2ADBYYC.js";
-import { buildRadioConfig, buildSelectConfig, filter, radioChange, selectChange } from "./index";
-const api = ["state", "buildRadioConfig", "buildSelectConfig", "filter", "radioChange", "selectChange"];
-const renderless = (props, { reactive, watch }, { vm, emit }) => {
+import {
+  buildRadioConfig,
+  buildSelectConfig,
+  filter,
+  getcheckedData,
+  getPluginOption,
+  handleVisibleChange,
+  initQuery,
+  mounted,
+  radioChange,
+  selectChange,
+  syncGridSelection,
+  watchValue
+} from "./index";
+const api = [
+  "state",
+  "buildRadioConfig",
+  "buildSelectConfig",
+  "filter",
+  "radioChange",
+  "selectChange",
+  "getcheckedData",
+  "getPluginOption",
+  "mounted",
+  "syncGridSelection",
+  "watchValue",
+  "handleVisibleChange"
+];
+const renderless = (props, { reactive, computed, watch, onMounted, nextTick }, { vm, emit }) => {
+  var _a;
   const api2 = {};
+  const initGridData = () => {
+    if (props.gridOp) {
+      if (props.gridOp.data) {
+        return props.gridOp.data;
+      } else if (Array.isArray(props.gridOp)) {
+        return props.gridOp;
+      } else {
+        return props.gridOp;
+      }
+    }
+    return { data: [], columns: [] };
+  };
   const state = reactive({
     value: props.modelValue,
-    gridData: props.gridOp.data,
+    gridData: initGridData(),
     remoteData: [],
-    selected: props.multiple ? [] : {}
+    selected: props.multiple ? [] : {},
+    currentKey: props.multiple ? "" : props.modelValue,
+    previousQuery: null,
+    modelValue: props.multiple ? Array.isArray(props.modelValue) ? [...props.modelValue] : [] : props.modelValue,
+    isMounted: false,
+    firstAutoSearch: ((_a = props.remoteConfig) == null ? void 0 : _a.autoSearch) || false
   });
   Object.assign(api2, {
     state,
     buildRadioConfig: buildRadioConfig({ props, state }),
     buildSelectConfig: buildSelectConfig({ props, state }),
     filter: filter({ props, state, vm }),
-    radioChange: radioChange({ props, vm, emit }),
-    selectChange: selectChange({ props, vm, emit })
+    getcheckedData: getcheckedData({ props, state }),
+    getPluginOption: getPluginOption({ api: api2, props, state }),
+    initQuery: initQuery({ props, state, vm }),
+    mounted: mounted({ api: api2, state, props, vm, nextTick }),
+    radioChange: radioChange({ props, vm, emit, state }),
+    selectChange: selectChange({ props, vm, emit, state, nextTick }),
+    syncGridSelection: syncGridSelection({ props, vm, state, nextTick }),
+    handleVisibleChange: handleVisibleChange({ api: api2, state, props }),
+    watchValue: watchValue({ api: api2, props, vm, state })
   });
+  state.gridCheckedData = computed(() => api2.getcheckedData());
   watch(
-    () => props.gridOp.data,
-    (data) => data && (state.gridData = data),
+    () => props.gridOp,
+    (gridOp) => {
+      if (gridOp) {
+        if (gridOp.data) {
+          state.gridData = gridOp.data;
+        } else if (Array.isArray(gridOp)) {
+          state.gridData = gridOp;
+        } else {
+          state.gridData = gridOp;
+        }
+      }
+    },
     { immediate: true, deep: true }
   );
+  watch(
+    () => props.modelValue,
+    () => {
+      if (props.multiple && Array.isArray(props.modelValue)) {
+        state.modelValue = [...props.modelValue];
+      } else {
+        state.modelValue = props.modelValue;
+      }
+    },
+    { immediate: true, deep: true }
+  );
+  watch(
+    () => state.modelValue,
+    (newValue, oldValue) => {
+      if (state.isMounted) {
+        api2.watchValue(newValue, oldValue);
+      }
+    }
+  );
+  watch(
+    () => props.extraQueryParams,
+    () => {
+      if (props.remote) {
+        api2.filter(state.previousQuery || "");
+      }
+    },
+    { deep: true, immediate: false }
+  );
+  onMounted(() => {
+    api2.mounted();
+    state.isMounted = true;
+  });
   return api2;
 };
 export {

package/guide/vue.js

@@ -27,7 +27,17 @@ const renderless = (props, { reactive, onMounted, onBeforeUnmount, watch }, { de
     mounted: mounted({ state, api: baseApi }),
     beforeUnmount: beforeUnmount(state)
   });
-  watch(() => props.showStep, api2.createShepherd);
+  watch(
+    () => props.showStep,
+    (newVal) => {
+      var _a;
+      if (newVal) {
+        api2.createShepherd();
+      } else {
+        (_a = state == null ? void 0 : state.tour) == null ? void 0 : _a.hide();
+      }
+    }
+  );
   onMounted(api2.mounted);
   onBeforeUnmount(api2.beforeUnmount);
   return api2;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opentiny/vue-renderless",
-  "version": "3.27.0",
+  "version": "3.28.0",
   "description": "An enterprise-class UI component library, support both Vue.js 2 and Vue.js 3, as well as PC and mobile.",
   "author": "OpenTiny Team",
   "license": "MIT",
@@ -25,8 +25,8 @@
   ],
   "sideEffects": false,
   "dependencies": {
-    "@opentiny/utils": "~3.27.0",
-    "@opentiny/vue-hooks": "~3.27.0",
+    "@opentiny/utils": "~3.28.0",
+    "@opentiny/vue-hooks": "~3.28.0",
     "color": "4.2.3"
   },
   "devDependencies": {