@opentiny/vue-renderless 3.6.8 → 3.8.0

package/dialog-select/index.js

@@ -0,0 +1,345 @@
+import "../chunk-PKUHTIDK.js";
+import { arrayEach, findIndexOf, find } from "../grid/static";
+const computedGridColumns = (props) => () => {
+  const { popseletor, gridOp, multi, valueField, textField } = props;
+  const { columns = [] } = gridOp || {};
+  let gridColumns = [];
+  if (popseletor === "grid") {
+    const operColType = multi ? "selection" : "radio";
+    if (columns.length) {
+      const operColIndex = findIndexOf(columns, (column) => column.type === operColType);
+      gridColumns = columns.slice(0);
+      if (!~operColIndex) {
+        gridColumns = [{ type: operColType, width: 60 }, ...columns.slice(0)];
+      }
+    } else {
+      gridColumns = [
+        { type: operColType, width: 60 },
+        { field: valueField, title: String(valueField).toUpperCase() },
+        { field: textField, title: String(textField).toUpperCase() }
+      ];
+    }
+  }
+  return gridColumns;
+};
+const queryGridData = ({ api, props, state }) => () => {
+  const { popseletor, remoteSearch } = props;
+  if (popseletor === "grid") {
+    if (typeof remoteSearch === "function") {
+      state.multiGridStore.loading = true;
+      remoteSearch().then(() => {
+        state.multiGridStore.loading = false;
+        api.setChecked();
+      }).finally(() => {
+        state.multiGridStore.loading = false;
+        state.multiGridStore.inited = true;
+      });
+    } else {
+      state.multiGridStore.inited = true;
+    }
+  }
+};
+const multiGridSelectAll = ({ api, props, state }) => ({ selection, checked }) => {
+  if (checked) {
+    arrayEach(selection, (item) => {
+      const index = findIndexOf(state.selectedValues, (val) => val == item[props.valueField]);
+      if (!~index) {
+        state.selectedValues = [...state.selectedValues, item[props.valueField]];
+        state.selectedDatas = [...state.selectedDatas, item];
+        state.selectedChanged = true;
+      }
+    });
+  } else {
+    state.selectedValues = [];
+    state.selectedDatas = [];
+    state.selectedChanged = true;
+  }
+  api.selectedBoxInit();
+};
+const multiGridSelectChange = ({ api, props, state }) => ({ row, checked }) => {
+  const index = findIndexOf(state.selectedValues, (val) => val == row[props.valueField]);
+  if (checked) {
+    if (!~index) {
+      state.selectedValues = [...state.selectedValues, row[props.valueField]];
+      state.selectedDatas = [...state.selectedDatas, row];
+      state.selectedChanged = true;
+    }
+  } else {
+    if (~index) {
+      state.selectedValues = [...state.selectedValues.slice(0, index), ...state.selectedValues.slice(index + 1)];
+      state.selectedDatas = [...state.selectedDatas.slice(0, index), ...state.selectedDatas.slice(index + 1)];
+      state.selectedChanged = true;
+    }
+  }
+  api.selectedBoxInit();
+};
+const selectedBoxInit = ({ props, vm, nextTick }) => () => {
+  const { multi, showSelectedBox } = props;
+  if (multi && showSelectedBox && vm.$refs.selectedBox) {
+    nextTick(() => {
+      vm.$refs.selectedBox.init();
+    });
+  }
+};
+const selectedBoxClear = ({ props, state, vm }) => () => {
+  const { multi, popseletor } = props;
+  if (multi && popseletor === "grid") {
+    vm.$refs.multiGrid.clearSelection();
+  }
+  if (multi && popseletor === "tree") {
+    arrayEach(state.selectedValues, (value) => vm.$refs.multiTree.setCheckedByNodeKey(value, false));
+  }
+  state.selectedValues = [];
+  state.selectedDatas = [];
+  state.selectedChanged = true;
+};
+const selectedBoxDelete = ({ props, state, vm }) => ({ option: row }) => {
+  const { multi, popseletor } = props;
+  if (multi && popseletor === "grid") {
+    vm.$refs.multiGrid.setSelection(
+      find(vm.$refs.multiGrid.$refs.tinyTable.selection, (item) => item[props.valueField] === row[props.valueField]),
+      false
+    );
+  }
+  if (multi && popseletor === "tree") {
+    vm.$refs.multiTree.setCheckedByNodeKey(row[props.valueField], false);
+  }
+  const index = findIndexOf(state.selectedValues, (val) => val == row[props.valueField]);
+  if (~index) {
+    state.selectedValues = [...state.selectedValues.slice(0, index), ...state.selectedValues.slice(index + 1)];
+    state.selectedDatas = [...state.selectedDatas.slice(0, index), ...state.selectedDatas.slice(index + 1)];
+    state.selectedChanged = true;
+  }
+};
+const selectedBoxDrag = ({ props, state }) => ({ state: { select } }) => {
+  if (select && select.length) {
+    const datas = select.map((opt) => String(opt[props.valueField])).map((strVal) => state.selectedDatas.find((opt) => strVal === String(opt[props.valueField])));
+    const values = datas.map((opt) => opt[props.valueField]);
+    state.selectedDatas = datas;
+    state.selectedValues = values;
+    state.selectedChanged = true;
+  }
+};
+const doMultiTreeFilter = ({ props, state, nextTick, vm }) => () => {
+  const { popseletor, treeOp = {} } = props;
+  if (popseletor === "tree") {
+    if (state.multiTreeStore.filterText) {
+      if (treeOp.queryPidsBySearch) {
+        treeOp.queryPidsBySearch(state.multiTreeStore.filterText, (expandedKeys) => {
+          if (state.multiTreeStore.expandedKeys && state.multiTreeStore.expandedKeys.length) {
+            state.multiTreeStore.lastValidExpandedKeys = state.multiTreeStore.expandedKeys;
+          }
+          state.multiTreeStore.viewType = "plain";
+          state.multiTreeStore.expandedKeys = expandedKeys;
+        });
+      }
+    } else {
+      state.multiTreeStore.viewType = "tree";
+      if (state.multiTreeStore.expandedKeys && state.multiTreeStore.expandedKeys.length) {
+        const currentValidExpandedKeys = state.multiTreeStore.expandedKeys;
+        state.multiTreeStore.expandedKeys = [];
+        nextTick(() => {
+          state.multiTreeStore.expandedKeys = currentValidExpandedKeys;
+        });
+      } else {
+        state.multiTreeStore.expandedKeys = state.multiTreeStore.lastValidExpandedKeys;
+      }
+      vm.$refs.multiTree.filter("");
+    }
+  }
+};
+const multiTreeAfterLoad = ({ api, props, state, vm }) => () => {
+  const { popseletor, treeOp = {}, valueField } = props;
+  const { lookupStore } = state;
+  if (popseletor === "tree") {
+    vm.$refs.multiTree.filter(state.multiTreeStore.filterText);
+    if (state.multiTreeStore.inited) {
+      state.multiTreeStore.checkedKeys = state.selectedValues;
+    } else {
+      const checkedKeys = lookupStore.datas.map((row) => row[valueField]);
+      state.multiTreeStore.checkedKeys = checkedKeys;
+      if (treeOp.queryPidsByIds && checkedKeys.length) {
+        treeOp.queryPidsByIds(checkedKeys, (expandedKeys) => {
+          state.multiTreeStore.expandedKeys = expandedKeys.slice(0);
+          api.setChecked();
+          state.multiTreeStore.inited = true;
+        });
+      } else {
+        api.setChecked();
+        state.multiTreeStore.inited = true;
+      }
+    }
+  }
+};
+const multiTreeFilterNode = (props) => (value, data) => {
+  const { popseletor } = props;
+  if (popseletor === "tree") {
+    if (!value)
+      return true;
+    return ~data.label.indexOf(value);
+  }
+  return true;
+};
+const multiTreeFilterPlain = ({ api, props, state }) => (data) => {
+  const { popseletor } = props;
+  if (popseletor === "tree") {
+    return api.multiTreeFilterNode(state.multiTreeStore.filterText, data);
+  }
+  return true;
+};
+const multiTreeLeavePlain = ({ props, state }) => (plainNode) => {
+  const { popseletor } = props;
+  if (popseletor === "tree") {
+    state.multiTreeStore.viewType = "tree";
+    state.multiTreeStore.expandedKeys = plainNode.parentNodeKeys;
+    state.multiTreeStore.highlight = plainNode.nodeKey;
+  }
+};
+const getTreeSelect = ({ vm, props }) => {
+  const { selectedBoxOp } = props;
+  const { pkField = "id", showField = [] } = (selectedBoxOp || {}).config || {};
+  const keyNames = [pkField, ...showField];
+  const checkedNodes = vm.$refs.multiTree.state.store.getCheckedNodes();
+  const { nodes: plainNodes } = vm.$refs.multiTree.state.plainNodeStore;
+  const datas = [];
+  arrayEach(checkedNodes, (item) => {
+    const plainNode = find(plainNodes, (plainNode2) => plainNode2.node.data[props.valueField] === item[props.valueField]);
+    const tmp = { _$title: plainNode.title, _$auxi: plainNode.auxi };
+    arrayEach(keyNames, (keyName) => tmp[keyName] = item[keyName]);
+    datas.push(tmp);
+  });
+  return datas;
+};
+const getTreeRadio = (vm) => {
+  const { nodes: plainNodes } = vm.$refs.multiTree.state.plainNodeStore;
+  const currentRadio = vm.$refs.multiTree.state.currentRadio;
+  const plainNode = find(plainNodes, (plainNode2) => plainNode2.node.id === currentRadio.value);
+  return [plainNode.node.data];
+};
+const multiTreeCheck = ({ api, props, state, vm, nextTick }) => () => {
+  const { multi, popseletor } = props;
+  if (popseletor === "tree") {
+    nextTick(() => {
+      const datas = multi ? getTreeSelect({ vm, props }) : getTreeRadio(vm);
+      const values = datas.map((item) => item[props.valueField]);
+      state.selectedDatas = datas;
+      state.selectedValues = values;
+      state.selectedChanged = true;
+      multi && api.selectedBoxInit();
+    });
+  }
+};
+const emitChange = ({ props, state, emit }) => () => {
+  if (state.selectedChanged) {
+    const { valueField, textField } = props;
+    const { selectedDatas } = state;
+    const texts = [];
+    const values = [];
+    arrayEach(selectedDatas, (item) => {
+      texts.push(item[textField]);
+      values.push(item[valueField]);
+    });
+    emit("change", values, texts, selectedDatas);
+    state.selectedChanged = false;
+  }
+};
+const onFooterCancel = ({ api, props }) => () => {
+  if (!props.beforeClose || props.beforeClose("cancel")) {
+    api.emitClose();
+  }
+};
+const onFooterConfirm = ({ api, props }) => () => {
+  if (!props.beforeClose || props.beforeClose("confirm")) {
+    api.emitChange();
+    api.emitClose();
+  }
+};
+const emitClose = (emit) => () => emit("update:visible", false);
+const setChecked = ({ api, props, state }) => () => {
+  const { multi, popseletor, valueField } = props;
+  const { multiGridStore, multiTreeStore, lookupStore } = state;
+  if (popseletor === "grid" && !multiGridStore.inited || popseletor === "tree" && !multiTreeStore.inited) {
+    if (lookupStore.datas && lookupStore.datas.length) {
+      state.selectedDatas = lookupStore.datas;
+      state.selectedValues = lookupStore.datas.map((row) => row[valueField]);
+    } else {
+      state.selectedDatas = [];
+      state.selectedValues = [];
+    }
+    multi && api.selectedBoxInit();
+  }
+};
+const computedConfig = ({ props, state }) => () => {
+  const { multi, popseletor, gridOp } = props;
+  const { selectConfig = {}, radioConfig = {} } = gridOp || {};
+  const { selectedValues } = state;
+  let config = {};
+  if (popseletor === "grid") {
+    if (multi) {
+      config = Object.assign(config, selectConfig, { checkRowKeys: selectedValues });
+    } else {
+      config = Object.assign(config, radioConfig, { checkRowKey: selectedValues[0] });
+    }
+  }
+  return config;
+};
+const doAutoLookup = ({ props, state, emit }) => () => {
+  const { autoLookup, lookupMethod, multi, popseletor, valueField, textField } = props;
+  if (autoLookup && lookupMethod) {
+    let rowKeys = [];
+    if (popseletor === "grid") {
+      const { gridOp } = props;
+      const { selectConfig, radioConfig } = gridOp || {};
+      const { checkRowKeys = [] } = selectConfig || {};
+      const { checkRowKey = "" } = radioConfig || {};
+      rowKeys = multi ? checkRowKeys : [checkRowKey];
+    }
+    if (popseletor === "tree") {
+      const { treeOp } = props;
+      const { defaultCheckedKeys = [] } = treeOp || {};
+      rowKeys = defaultCheckedKeys;
+    }
+    lookupMethod(rowKeys).then((datas) => {
+      state.lookupStore.datas = datas;
+      const values = datas.map((row) => row[valueField]);
+      const texts = datas.map((row) => row[textField]);
+      emit("change", values, texts, datas);
+    });
+  }
+};
+const multiTreeRadio = ({ api, props }) => () => {
+  const { multi, popseletor } = props;
+  if (!multi && popseletor === "tree") {
+    api.multiTreeCheck();
+  }
+};
+const multiGridRadioChange = ({ props, state }) => ({ row }) => {
+  state.selectedValues = [row[props.valueField]];
+  state.selectedDatas = [row];
+  state.selectedChanged = true;
+};
+export {
+  computedConfig,
+  computedGridColumns,
+  doAutoLookup,
+  doMultiTreeFilter,
+  emitChange,
+  emitClose,
+  multiGridRadioChange,
+  multiGridSelectAll,
+  multiGridSelectChange,
+  multiTreeAfterLoad,
+  multiTreeCheck,
+  multiTreeFilterNode,
+  multiTreeFilterPlain,
+  multiTreeLeavePlain,
+  multiTreeRadio,
+  onFooterCancel,
+  onFooterConfirm,
+  queryGridData,
+  selectedBoxClear,
+  selectedBoxDelete,
+  selectedBoxDrag,
+  selectedBoxInit,
+  setChecked
+};

package/dialog-select/vue.js

@@ -0,0 +1,110 @@
+import "../chunk-PKUHTIDK.js";
+import {
+  computedGridColumns,
+  queryGridData,
+  multiGridSelectAll,
+  multiGridSelectChange,
+  selectedBoxInit,
+  selectedBoxClear,
+  selectedBoxDelete,
+  selectedBoxDrag,
+  doMultiTreeFilter,
+  multiTreeAfterLoad,
+  multiTreeFilterNode,
+  multiTreeFilterPlain,
+  multiTreeLeavePlain,
+  multiTreeCheck,
+  emitChange,
+  onFooterCancel,
+  onFooterConfirm,
+  emitClose,
+  setChecked,
+  computedConfig,
+  doAutoLookup,
+  multiTreeRadio,
+  multiGridRadioChange
+} from "./index";
+const api = [
+  "state",
+  "queryGridData",
+  "multiGridSelectAll",
+  "multiGridSelectChange",
+  "selectedBoxClear",
+  "selectedBoxDelete",
+  "selectedBoxDrag",
+  "doMultiTreeFilter",
+  "multiTreeAfterLoad",
+  "multiTreeFilterNode",
+  "multiTreeFilterPlain",
+  "multiTreeLeavePlain",
+  "multiTreeCheck",
+  "emitChange",
+  "onFooterCancel",
+  "onFooterConfirm",
+  "multiTreeRadio",
+  "multiGridRadioChange"
+];
+const renderless = (props, { reactive, computed, watch }, { vm, nextTick, emit }) => {
+  const state = reactive({
+    splitValue: props.multi ? 0.7 : 1,
+    gridColumns: computed(() => api2.computedGridColumns()),
+    selectedChanged: false,
+    selectedDatas: [],
+    selectedValues: [],
+    multiGridStore: {
+      selectConfig: computed(() => api2.computedConfig()),
+      radioConfig: computed(() => api2.computedConfig()),
+      inited: false,
+      loading: false
+    },
+    multiTreeStore: {
+      viewType: "tree",
+      expandedKeys: [],
+      checkedKeys: [],
+      highlight: null,
+      filterText: "",
+      inited: false
+    },
+    lookupStore: {
+      datas: []
+    }
+  });
+  const api2 = {
+    state,
+    computedGridColumns: computedGridColumns(props),
+    selectedBoxInit: selectedBoxInit({ props, vm, nextTick }),
+    selectedBoxClear: selectedBoxClear({ props, state, vm }),
+    selectedBoxDelete: selectedBoxDelete({ props, state, vm }),
+    selectedBoxDrag: selectedBoxDrag({ props, state }),
+    doMultiTreeFilter: doMultiTreeFilter({ props, state, nextTick, vm }),
+    multiTreeFilterNode: multiTreeFilterNode(props),
+    multiTreeLeavePlain: multiTreeLeavePlain({ props, state }),
+    emitChange: emitChange({ props, state, emit }),
+    emitClose: emitClose(emit),
+    computedConfig: computedConfig({ props, state }),
+    doAutoLookup: doAutoLookup({ props, state, emit }),
+    multiGridRadioChange: multiGridRadioChange({ props, state })
+  };
+  Object.assign(api2, {
+    multiGridSelectAll: multiGridSelectAll({ api: api2, props, state }),
+    multiGridSelectChange: multiGridSelectChange({ api: api2, props, state }),
+    multiTreeAfterLoad: multiTreeAfterLoad({ api: api2, props, state, vm }),
+    multiTreeCheck: multiTreeCheck({ api: api2, props, state, vm, nextTick }),
+    multiTreeFilterPlain: multiTreeFilterPlain({ api: api2, props, state }),
+    onFooterCancel: onFooterCancel({ api: api2, props }),
+    onFooterConfirm: onFooterConfirm({ api: api2, props }),
+    queryGridData: queryGridData({ api: api2, props, state }),
+    setChecked: setChecked({ api: api2, props, state }),
+    multiTreeRadio: multiTreeRadio({ api: api2, props })
+  });
+  watch(
+    () => props.visible,
+    (value) => value && !state.multiGridStore.inited && api2.queryGridData()
+  );
+  api2.doAutoLookup();
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/drawer/index.js

@@ -0,0 +1,83 @@
+import "../chunk-PKUHTIDK.js";
+import debounce from "../common/deps/debounce";
+const close = ({ emit, state }) => () => {
+  state.toggle = false;
+  emit("close", state);
+};
+const watchVisible = ({ state }) => (bool) => {
+  setTimeout(() => {
+    state.toggle = bool;
+  }, 0);
+};
+const watchToggle = ({ emit }) => (bool) => {
+  setTimeout(() => {
+    emit("update:visible", bool);
+  }, 200);
+};
+const confirm = ({ emit, state }) => () => {
+  state.toggle = false;
+  emit("confirm", state);
+};
+const mousedown = ({ state, vm }) => (event2) => {
+  event2.preventDefault();
+  const touch = event2.touches ? event2.touches[0] : event2;
+  const drawerBox = vm.$refs.drawerBox;
+  state.dragEvent.isDrag = true;
+  state.dragEvent.x = touch.clientX;
+  state.dragEvent.offsetWidth = drawerBox.offsetWidth;
+};
+const mousemove = ({ state, props }) => debounce(1, (event2) => {
+  if (!state.dragEvent.isDrag) {
+    return;
+  }
+  event2.preventDefault();
+  const { placement } = props;
+  const {
+    dragEvent: { x, offsetWidth }
+  } = state;
+  const { touches, targetTouches, changedTouches } = event2;
+  const touch = touches && touches[0] || targetTouches && targetTouches[0] || changedTouches && changedTouches[0];
+  const { clientX } = touch || event2;
+  const offsetX = clientX - x;
+  if (placement === "left") {
+    state.width = offsetWidth + offsetX;
+  } else if (placement === "right") {
+    state.width = offsetWidth - offsetX;
+  }
+});
+const mouseup = ({ state }) => () => {
+  if (!state.dragEvent.isDrag) {
+    return;
+  }
+  event.preventDefault();
+  state.dragEvent.isDrag = false;
+};
+const addDragEvent = ({ api, vm }) => () => {
+  const el = vm.$refs.dragBar;
+  el.addEventListener("mousedown", api.mousedown);
+  document.addEventListener("mousemove", api.mousemove);
+  document.addEventListener("mouseup", api.mouseup);
+  el.addEventListener("touchstart", api.mousedown);
+  el.addEventListener("touchmove", api.mousemove);
+  el.addEventListener("touchend", api.mouseup);
+};
+const removeDragEvent = ({ api, vm }) => () => {
+  const el = vm.$refs.dragBar;
+  el.removeEventListener("mousedown", api.mousedown);
+  document.removeEventListener("mousemove", api.mousemove);
+  document.removeEventListener("mouseup", api.mouseup);
+  el.removeEventListener("touchstart", api.mousedown);
+  el.removeEventListener("touchmove", api.mousemove);
+  el.removeEventListener("touchend", api.mouseup);
+};
+export {
+  addDragEvent,
+  close,
+  confirm,
+  mousedown,
+  mousemove,
+  mouseup,
+  removeDragEvent,
+  watchToggle,
+  watchVisible
+};

package/drawer/vue.js

@@ -0,0 +1,51 @@
+import "../chunk-PKUHTIDK.js";
+import {
+  close,
+  watchVisible,
+  watchToggle,
+  confirm,
+  mousedown,
+  mouseup,
+  mousemove,
+  addDragEvent,
+  removeDragEvent
+} from "./index";
+const api = ["state", "close", "confirm"];
+const renderless = (props, { reactive, watch, onMounted, onBeforeUnmount, computed }, { emit, vm }) => {
+  const api2 = {};
+  const state = reactive({
+    toggle: false,
+    width: 0,
+    dragEvent: { x: 0, isDrag: false, offsetWidth: 0 },
+    computedWidth: computed(() => state.width ? state.width + "px" : props.width)
+  });
+  Object.assign(api2, {
+    state,
+    confirm: confirm({ state, emit }),
+    close: close({ emit, state }),
+    mousedown: mousedown({ state, vm }),
+    mousemove: mousemove({ state, props }),
+    mouseup: mouseup({ state }),
+    addDragEvent: addDragEvent({ api: api2, vm }),
+    removeDragEvent: removeDragEvent({ api: api2, vm }),
+    watchVisible: watchVisible({ state }),
+    watchToggle: watchToggle({ emit })
+  });
+  onMounted(() => {
+    props.dragable && api2.addDragEvent();
+  });
+  onBeforeUnmount(() => {
+    props.dragable && api2.removeDragEvent();
+  });
+  watch(() => props.visible, api2.watchVisible, { immediate: true });
+  watch(() => state.toggle, api2.watchToggle);
+  watch(
+    () => props.width,
+    () => state.width = 0
+  );
+  return api2;
+};
+export {
+  api,
+  renderless
+};

package/drop-times/index.js

@@ -1,5 +1,5 @@
 import "../chunk-PKUHTIDK.js";
-import { format } from "@opentiny/vue-renderless/common/date";
+import { format } from "../common/date";
 const init = ({ state, props }) => () => {
   let list = [];
   let value;

package/dropdown/index.js

@@ -1,6 +1,6 @@
 import "../chunk-PKUHTIDK.js";
-import { KEY_CODE } from "@opentiny/vue-renderless/common";
-import { addClass, removeClass, on, off } from "@opentiny/vue-renderless/common/deps/dom";
+import { KEY_CODE } from "../common";
+import { addClass, removeClass, on, off } from "../common/deps/dom";
 const watchVisible = ({ broadcast, emit, nextTick }) => (value) => {
   broadcast("TinyDropdownMenu", "visible", value);
   nextTick(() => emit("visible-change", value));

package/dropdown/vue.js

@@ -1,5 +1,5 @@
 import "../chunk-PKUHTIDK.js";
-import { guid } from "@opentiny/vue-renderless/common/string";
+import { guid } from "../common/string";
 import {
   watchVisible,
   watchFocusing,

package/dropdown-item/index.js

@@ -1,5 +1,5 @@
 import "../chunk-PKUHTIDK.js";
-import { on, off } from "@opentiny/vue-renderless/common/deps/dom";
+import { on, off } from "../common/deps/dom";
 const getTitle = (props) => () => {
   if (props.title) {
     return props.title;