@dazhicheng/ui 1.5.199 → 1.5.202

package/dist/components/tt-select/src/hooks/usePagination.js

@@ -0,0 +1,45 @@
+import { ref as e, computed as c, unref as o } from "vue";
+import { defaultPagination as P } from "../const.js";
+function p() {
+  const t = e({}), a = e(!1), i = e(!1), f = c(() => ({
+    ...P,
+    // 合并用户传入的分页配置
+    ...o(t)
+  }));
+  function r(n) {
+    a.value = n;
+  }
+  function u() {
+    return o(f);
+  }
+  function s(n) {
+    t.value = {
+      // 合并现有配置
+      ...o(t),
+      // 合并传入的配置
+      ...n
+    };
+  }
+  function g(n) {
+    i.value = n;
+  }
+  return {
+    // 设置是否显示分页器的函数
+    setShowPager: r,
+    // 是否显示分页器的响应式引用
+    showPager: a,
+    // 计算分页信息的计算属性
+    getPaginationInfo: f,
+    // 获取当前分页配置的函数
+    getPagination: u,
+    // 设置分页配置的函数
+    setPagination: s,
+    // 是否有下一页数据的响应式引用
+    hasNextPage: i,
+    // 设置是否有下一页数据的函数
+    setHasNextPage: g
+  };
+}
+export {
+  p as usePagination
+};

package/dist/components/tt-select/src/hooks/useSelect.js

@@ -0,0 +1,100 @@
+import { calcWordsWidth as W } from "@dazhicheng/utils";
+import { get as I } from "lodash-es";
+import { ref as w, computed as d, unref as t, watchEffect as L } from "vue";
+function z(n, e) {
+  const S = w(1), h = /* @__PURE__ */ new Map(), g = w(0), b = w(!1), C = d(() => e.collapse ?? t(n).multiple), E = d(() => e.isFilterMethod ?? !0), p = d(() => e.searchField), v = d(() => {
+    if (e.autoSelectWidth && !t(n).multiple && t(e.selectOption)) {
+      const l = t(e.selectOption).label || "";
+      return `${W(l) + 45}px`;
+    }
+    return "100%";
+  });
+  function y(l) {
+    var r, f;
+    const a = (r = e.getKeyboardEvent) == null ? void 0 : r.call(e);
+    if (!l) {
+      e.options.value = t(e.dataList), e.setActiveIndex(-1), a.ArrowDown();
+      return;
+    }
+    let s = [];
+    const c = p.value;
+    if (c)
+      s = t(e.dataList).filter(
+        (o) => String(I(o, c)).toUpperCase().includes(String(l).toUpperCase())
+      );
+    else {
+      const o = (f = t(e.columnsFields)) != null && f.length ? t(e.columnsFields) : ["label"];
+      s = t(e.dataList).filter(
+        (i) => o.some((m) => String(i[m]).toUpperCase().includes(String(l).toUpperCase()))
+      );
+    }
+    if (e.allowCreate && l && !s.some((i) => String(i.label).toUpperCase() === String(l).toUpperCase())) {
+      const i = { label: l, value: l };
+      s = [{ ...i, item: i }, ...s];
+    }
+    e.options.value = s, e.setActiveIndex(-1), a.ArrowDown();
+  }
+  const T = d(() => t(e.showPager) ? e.setSearchValue : t(E) ? y : void 0), U = d(() => ({
+    // 是否折叠标签
+    collapseTags: t(C),
+    // 折叠标签时是否显示工具提示
+    collapseTagsTooltip: t(C),
+    // 最大折叠标签数
+    maxCollapseTags: t(n).maxCollapseTags ?? t(S),
+    // 占位符文本
+    placeholder: t(n).placeholder ?? (e.placeholder || "请选择"),
+    // 是否禁用选择器
+    disabled: t(e.disabled ?? t(n).disabled),
+    // 过滤方法
+    filterMethod: t(T)
+  }));
+  function O() {
+    var s;
+    const l = t(e.selectOption);
+    if (!t(n).multiple || !l || l.length <= 1) return;
+    const a = l.map((c) => c.label).filter(Boolean);
+    if (t(e.selectRef) && a.length) {
+      const c = (s = t(e.selectRef)) == null ? void 0 : s.$el.getElementsByClassName("el-select__selection")[0], r = window.getComputedStyle(c), f = Number(r.width.slice(0, -2)), o = r.fontFamily, i = r.fontSize;
+      h.clear(), a.forEach((u, R) => {
+        if (R >= 10)
+          return;
+        const A = W(u, i, o) + 32 + 4;
+        h.set(u, A);
+      });
+      const m = f - 43;
+      let F = 0, M = 0;
+      h.forEach((u) => {
+        if (F += u, F < m)
+          return M += 1, !1;
+      }), S.value = M || 1;
+    }
+  }
+  function x() {
+    var a, s;
+    const l = t(e.selectRef) ? (s = (a = t(e.selectRef)) == null ? void 0 : a.$el) == null ? void 0 : s.offsetWidth : 0;
+    return t(n).multiple ? l - 50 : l;
+  }
+  return L(() => {
+    t(g) === 0 && t(e.selectRef) && (g.value = x());
+  }), {
+    // 其他选择器属性
+    getOtherSelectProps: U,
+    // 计算最大折叠标签数的方法
+    calcMaxCollapseTags: O,
+    // 计算选择器宽度的计算属性
+    calcSelectWidth: v,
+    // 获取select宽度
+    getSelectWidth: x,
+    // select宽度
+    selectWidth: g,
+    // select 是否展开
+    showPopup: b,
+    // 设置select是否展开
+    setShowPopup: (l) => {
+      b.value = l;
+    }
+  };
+}
+export {
+  z as useSelect
+};

package/dist/components/tt-select/src/hooks/useSelectTableEvent.d.ts

@@ -3,7 +3,7 @@ import { ComputedRef, MaybeRef, Ref } from 'vue';
 import { VxeGridDefines, VxeGridPropTypes } from 'vxe-table';
 import { TtSelectProps } from '../props';
 import { TtSelectModelUnionType, TtSelectModelValueType, TtSelectSelectOptions, TtSelectDataOptions } from '../types';
-import { default as SelectTable } from './components/SelectTable.vue';
+import { default as SelectTable } from '../components/SelectTable.vue';
 /**
  * 定义选项类型，包含表格、选择器、数据、分页等相关的引用和方法
  */

package/dist/components/tt-select/src/hooks/useSelectTableEvent.js

@@ -0,0 +1,345 @@
+import { isEmpty as F, isNullOrUnDef as C, isArray as D, isFunction as N } from "@dazhicheng/utils";
+import { cloneDeep as I, isEqual as x } from "lodash-es";
+import { ref as M, computed as q, watch as O, unref as a, nextTick as f, toValue as g, watchEffect as G, toRaw as K } from "vue";
+import { useKeyboard as U } from "./useKeyboard.js";
+function J(r, e, b) {
+  const y = M({
+    scrollTop: 0
+  }), { keyboardCaptureEvent: m } = U({
+    // 获取表格实例的方法
+    tableInstance: () => {
+      var l;
+      return (l = a(e.tableRef)) == null ? void 0 : l.getGridInstance();
+    },
+    // 当前活动行的索引
+    activeIndex: e.activeIndex,
+    // 选项列表
+    options: e.options,
+    // 设置活动索引的方法
+    setActiveIndex: e.setActiveIndex,
+    // 当前选中的值
+    selectValue: e.selectValue,
+    // 是否为多选模式
+    multiple: q(() => e.multiple),
+    // 获取表格事件处理函数的对象
+    getGridEvent: () => A,
+    // 选择器实例的引用
+    selectRef: e.selectRef,
+    // 是否加载数据
+    loading: e.loading
+  });
+  async function S(l, t, n) {
+    var c;
+    const i = (c = a(e.tableRef)) == null ? void 0 : c.getGridInstance();
+    let s = !0;
+    if (a(r).beforeChange && N(a(r).beforeChange)) {
+      const u = t && n ? { ...K(t), actionType: n } : t;
+      s = await a(r).beforeChange(l ?? e.selectValue.value, a(r).modelValue, u);
+    }
+    return s || (e.setSelectValue(a(r).modelValue, w({ value: a(r).modelValue }), !1), i && i.clearCurrentRow()), s;
+  }
+  function w(l) {
+    var c;
+    const t = (c = a(e.tableRef)) == null ? void 0 : c.getGridInstance();
+    if (C(l.value)) {
+      t && t.clearCurrentRow();
+      return;
+    }
+    const n = g(e.options).find((u) => u.value === l.value);
+    if (a(e).dataNoBindValueClear && !n) {
+      k.clear();
+      return;
+    }
+    const s = a(e.selectOption) && a(e.selectOption).value === l.value ? a(e.selectOption) : void 0;
+    return n || s || void 0;
+  }
+  function h(l) {
+    var i;
+    const t = (i = a(e.tableRef)) == null ? void 0 : i.getGridInstance();
+    return D(l) ? l.reduce((s, c) => {
+      if (!C(c)) {
+        const u = g(e.options).find((T) => T.value === c), d = a(e.selectOption), R = d ? d.find((T) => T.value === c) : void 0, o = u || R;
+        o && s && s.push(o);
+      }
+      return s;
+    }, []) : (t && t.clearCurrentRow(), []);
+  }
+  function v(l) {
+    var n;
+    const t = (n = a(e.tableRef)) == null ? void 0 : n.getGridInstance();
+    t && (e.multiple ? (t.clearCheckboxRow(), t.setCheckboxRow(l || [], !0)) : (t.clearRadioRow(), t.setRadioRow(l)));
+  }
+  const A = {
+    /**
+     * 单选框改变事件处理函数
+     */
+    radioChange: async ({ oldValue: l, row: t }) => {
+      var c, u;
+      const n = (c = a(e.tableRef)) == null ? void 0 : c.getGridInstance();
+      if (t.isDelete)
+        return;
+      if (!await S(t.value, t, "add")) {
+        n && l ? n.setRadioRow(l) : n.clearRadioRow();
+        return;
+      }
+      const s = n == null ? void 0 : n.getCurrentRecord();
+      e.setActiveIndex(n == null ? void 0 : n.getRowIndex(s)), e.setSelectValue(t.value, w(t)), (u = a(e.selectRef)) == null || u.blur(), f(() => {
+        e.updateOptionsDisabled();
+      });
+    },
+    /**
+     * 复选框改变事件处理函数
+     */
+    checkboxChange: async ({ checked: l, row: t }) => {
+      var u;
+      const n = (u = a(e.tableRef)) == null ? void 0 : u.getGridInstance(), i = I(a(e.selectValue));
+      if (!await S(t.value, t, l ? "add" : "remove")) {
+        n && n.setCheckboxRow(t, !1);
+        return;
+      }
+      const c = D(i) ? i : [];
+      if (l)
+        c.push(t.value);
+      else {
+        const d = c.findIndex((R) => R === t.value);
+        c.splice(d, 1);
+      }
+      n == null || n.setCurrentRow(t), e.setActiveIndex(n == null ? void 0 : n.getRowIndex(t)), e.setSelectValue(c, h(c)), e.checkedClearSearchValue && g(e.searchValue) && (e.setSearchValue(""), e.reload(!0), f(() => {
+        const d = a(e.selectRef);
+        d && (d.isFocused = !0, d.states.inputValue = "");
+      })), f(() => {
+        e.updateOptionsDisabled();
+      });
+    },
+    /**
+     * 表格滚动事件处理函数
+     */
+    scroll: (l) => {
+      y.value = l, b("scroll", l);
+    },
+    scrollBoundary: (l) => {
+      const { scrollTop: t } = l;
+      if (t <= 100 || !a(e.showPager) || a(e.loading)) return;
+      const { total: n, currentPage: i = 0 } = e.getPagination();
+      (n && a(e.options).length < n || a(e.hasNextPage)) && (e.setPagination({ currentPage: i + 1 }), f(async () => {
+        await e.reload();
+      })), b("scroll-boundary", l);
+    },
+    /**
+     * 全选复选框改变事件处理函数
+     */
+    checkboxAll: ({ checked: l }) => {
+      if (l) {
+        const t = a(e.options).filter((n) => !n.disabled && !n.isDelete).map((n) => n.value);
+        if (a(r).selectProps.multipleLimit) {
+          const n = t.slice(0, a(r).selectProps.multipleLimit), i = h(n);
+          e.setSelectValue(n, i), v(i);
+        } else {
+          const n = h(t);
+          e.setSelectValue(t, n), v(n);
+        }
+      } else
+        e.setSelectValue([], void 0), v([]);
+      f(() => {
+        e.updateOptionsDisabled();
+      });
+    },
+    /**
+     * 键盘按下事件处理函数
+     * @param event 键盘事件对象
+     */
+    keydown: (l) => {
+      var t;
+      l.preventDefault(), (t = m[l.key]) == null || t.call(m);
+    }
+  };
+  function P(l) {
+    var n;
+    const t = (n = a(e.tableRef)) == null ? void 0 : n.getGridInstance();
+    if (e.multiple)
+      l = t == null ? void 0 : t.getCurrentRecord();
+    else {
+      const i = t == null ? void 0 : t.getRowIndex(l);
+      i !== -1 && l && (t == null || t.setCurrentRow(l), e.setActiveIndex(i));
+    }
+  }
+  function E(l, t = !1) {
+    var s;
+    const n = (s = a(e.tableRef)) == null ? void 0 : s.getGridInstance();
+    a(r).configProps.isOpenPopupScrollToTop || t ? n && n.scrollTo(0, 0) : setTimeout(() => {
+      var u;
+      const c = (u = a(y)) == null ? void 0 : u.scrollTop;
+      a(r).renderType === "table" ? n == null || n.scrollTo(0, c || 0) : l ? n == null || n.scrollToRow(l) : c && (n == null || n.scrollTo(0, c || 0));
+    }, 16);
+  }
+  function L(l) {
+    var i;
+    const t = (i = a(e.tableRef)) == null ? void 0 : i.getGridInstance();
+    if (!t) return;
+    let n = I(l);
+    if (e.persistent)
+      P(n);
+    else if (!l || l.length === 0 || l.length > 1) {
+      const s = t.getData(g(e.activeIndex));
+      s && t.setCurrentRow(s), n = s;
+    } else
+      f(() => {
+        const s = t.getRowIndex(l);
+        s !== -1 && (t.setCurrentRow(l), e.setActiveIndex(s));
+      });
+    return n;
+  }
+  function B(l, t, n) {
+    const i = Array.isArray(l) ? l : [], s = i.map((o) => o == null ? void 0 : o.value), c = D(t) ? t : [], u = s.length > c.length, d = u ? s.find((o) => !c.includes(o)) : c.find((o) => !s.includes(o)), R = u ? i.find((o) => (o == null ? void 0 : o.value) === d) : n.find((o) => (o == null ? void 0 : o.value) === d);
+    return {
+      isAdd: u,
+      actionValue: d,
+      actionRow: R,
+      newValues: s,
+      oldValues: c
+    };
+  }
+  function V(l, t = !1, n = !1, i = !1) {
+    let s, c;
+    e.multiple ? (s = h(l || []), c = s ? l : []) : (s = w({ value: l }), c = s ? l : void 0), e.setSelectValue(c, s, i);
+    const u = L(s);
+    n || E(u, t), v(s);
+  }
+  const k = {
+    /**
+     * 清空选择器事件处理函数
+     */
+    clear: () => {
+      var t;
+      const l = (t = a(e.tableRef)) == null ? void 0 : t.getGridInstance();
+      e.multiple ? (l && l.clearCheckboxRow(), e.setSelectValue([], void 0)) : (l && l.clearRadioRow(), e.setSelectValue(void 0, void 0)), e.setActiveIndex(-1), b("clear");
+    },
+    /**
+     * 选择器可见性改变事件处理函数
+     * @param bool 是否可见
+     */
+    visibleChange: (l) => {
+      var i;
+      const t = (i = a(e.tableRef)) == null ? void 0 : i.getGridInstance();
+      t && (e.multiple ? t == null || t.clearCheckboxRow() : t.clearRadioRow()), e.setShowPopup(l);
+      const n = a(e.isLoaded) || a(e.needLoad) || g(e.isExpandLoadData);
+      l ? (b("focus"), f(async () => {
+        n && e.reload(!0), V(a(r).modelValue, n), e.updateOptionsDisabled();
+      })) : b("blur"), b("visible-change", l);
+    },
+    /**
+     * 择器值改变事件处理函数（el 删除/清除会触发）
+     * beforeChangeCheck(val, row)：val 为当前操作的值，row 为当前操作的响应式对象
+     * @param val 选中的选项（el-select 的 v-model：单选为对象，多选为对象数组）
+     */
+    change: async (l) => {
+      const t = I(a(e.selectValue));
+      if (e.multiple) {
+        const { actionValue: n, actionRow: i, newValues: s, oldValues: c, isAdd: u } = B(
+          l,
+          t,
+          g(e.options)
+        );
+        if (!await S(n, i, u ? "add" : "remove")) {
+          const o = h(c);
+          e.setSelectValue(c, o), v(o), f(() => e.updateOptionsDisabled());
+          return;
+        }
+        const R = h(s);
+        e.setSelectValue(s, R), v(R);
+      } else {
+        const n = l, i = (n == null ? void 0 : n.value) ?? void 0;
+        if (!await S(i, n, i === void 0 ? "remove" : "add")) {
+          const u = t, d = w({ value: u });
+          e.setSelectValue(u, d), v(d), f(() => e.updateOptionsDisabled());
+          return;
+        }
+        const c = w({ value: i });
+        e.setSelectValue(i, c), v(c);
+      }
+      f(() => {
+        e.updateOptionsDisabled();
+      });
+    },
+    /**
+     * 选择器键盘按下捕获事件处理函数
+     * @param event 键盘事件对象
+     */
+    keydownCapture: (l) => {
+      var t;
+      m[l.key] && (l.preventDefault(), l.stopPropagation(), (t = m[l.key]) == null || t.call(m));
+    },
+    removeTag: (l) => {
+      b("remove-tag", l);
+    }
+  };
+  return O(
+    () => I(a(r).modelValue),
+    (l, t) => {
+      if (!x(l, t)) {
+        const n = I(a(e.selectValue));
+        if (x(l, n))
+          return;
+        f(() => {
+          V(l, !1, !1, a(r).immediateEmitChange), e.updateOptionsDisabled();
+        });
+      }
+    },
+    { immediate: !g(e.getImmediate), deep: !0 }
+  ), O(
+    () => g(e.options),
+    (l, t = []) => {
+      x(l, t) || f(() => {
+        V(a(r).modelValue, !1, !0), e.updateOptionsDisabled();
+      });
+    },
+    { immediate: !g(e.getImmediate), deep: !0 }
+  ), O(
+    () => a(r).configProps.defaultChecked,
+    (l, t) => {
+      if (F(g(l))) return;
+      x(g(l), g(t)) || C(a(r).modelValue) || (V(a(r).modelValue), f(() => {
+        e.updateOptionsDisabled();
+      }));
+    },
+    { deep: !0 }
+  ), G(() => {
+    var l;
+    if (a(e.getDefaultSingle)) {
+      if (a(e.options).length === 0 || a(e.options).length > 1)
+        return;
+      const t = e.multiple ? a(e.options).map((n) => n.value) : (l = a(e.options)[0]) == null ? void 0 : l.value;
+      setTimeout(() => {
+        V(t, !1, !1, !0), e.updateOptionsDisabled();
+      });
+    }
+  }), G(() => {
+    var l;
+    if (a(e.getIsSelectFirstOption)) {
+      if (a(e.options).length === 0)
+        return;
+      const t = (l = a(e.options)[0]) == null ? void 0 : l.value, n = e.multiple ? [t] : t;
+      setTimeout(() => {
+        V(n, !0, !1, !0), e.updateOptionsDisabled();
+      });
+    }
+  }), f(() => {
+    setTimeout(async () => {
+      g(e.getImmediate) && (e.reload(!0), f(() => {
+        e.updateOptionsDisabled();
+      }));
+    }, 16);
+  }), {
+    // 表格事件处理对象
+    gridEvent: A,
+    // 选择器事件处理对象
+    selectEvent: k,
+    // 键盘事件处理对象
+    keyboardEvent: m,
+    // 默认选中数据
+    defaultDataSelect: V
+  };
+}
+export {
+  J as useSelectTableEvent
+};

package/dist/components/tt-select/src/props.js

@@ -0,0 +1,201 @@
+const e = {
+  pageSizeField: "pageSize",
+  currentPageField: "currentPage",
+  totalField: "total",
+  dataField: "data",
+  resultField: "result",
+  pageSizeFieldGrpc: "pageSize",
+  totalFieldGrpc: "total",
+  dataFieldGrpc: "data",
+  resultFieldGrpc: "result",
+  searchField: "keyword",
+  immediate: !1,
+  changeDataClearable: !1,
+  defaultSingle: !1,
+  collapse: !0,
+  autoSelectWidth: !1,
+  isExpandLoadData: !1,
+  isCopy: !1,
+  isSelectFirstOption: !1
+}, t = {
+  /**
+   * 绑定值
+   */
+  modelValue: {
+    type: [String, Number, Boolean, Array],
+    default: void 0
+  },
+  /**
+   * el-select 的Props
+   */
+  selectProps: {
+    type: Object,
+    default: () => ({})
+  },
+  /**
+   * vxe-grid 的Props
+   */
+  gridProps: {
+    type: Object,
+    default: () => ({})
+  },
+  /**
+   * 渲染的类型
+   * @property select 下拉
+   * @property grid 表格
+   * @property tree 树
+   * @default select
+   */
+  renderType: {
+    type: String,
+    default: "table"
+  },
+  /** 数据相关的配置 */
+  configProps: {
+    type: Object,
+    default: () => e
+  },
+  extra: {
+    type: Object,
+    default: () => ({})
+  },
+  /**
+   * 改变前置函数
+   * @param val 改变后的值
+   * @param oVal 改变前的值
+   * @param option 配置项
+   * @returns 是否改变
+   */
+  beforeChange: {
+    type: Function,
+    default: null
+  },
+  /** 是否加载 */
+  loading: {
+    type: Boolean,
+    default: !1
+  },
+  /** 是否禁用 */
+  disabled: {
+    type: Boolean,
+    default: !1
+  },
+  /** 文本占位符 */
+  placeholder: {
+    type: String,
+    default: ""
+  },
+  /** 禁用提示 */
+  disabledTip: {
+    type: [Object],
+    default: void 0
+  },
+  maxCollapseTags: {
+    type: Number,
+    default: void 0
+  },
+  /**
+   * 外部值改变是否立即触发emit
+   * @deprecated 兼容旧代码，新开发不要使用
+   */
+  immediateEmitChange: {
+    type: Boolean,
+    default: !1
+  },
+  /** 是否显示边框 */
+  border: {
+    type: Boolean,
+    default: !0
+  }
+}, l = {
+  /** configProps */
+  configProps: {
+    type: Object,
+    default: () => ({})
+  },
+  /** 表格的参数 */
+  grid: {
+    type: Object,
+    default: () => ({})
+  },
+  /** 数据源 */
+  list: {
+    type: Array,
+    default: () => []
+  },
+  /** 是否加载中 */
+  loading: {
+    type: Boolean,
+    default: !1
+  },
+  /** 是否分页 */
+  showPager: {
+    type: Boolean,
+    default: !1
+  },
+  /** 分页参数 */
+  pagination: {
+    type: Object,
+    default: () => ({})
+  },
+  /** 是否多选 */
+  multiple: {
+    type: Boolean,
+    default: !1
+  },
+  /** 禁用的方法 */
+  disableFn: {
+    type: Function,
+    default: null
+  },
+  /** 选中的值 */
+  selectValue: {
+    type: [String, Number, Boolean, Array],
+    default: () => []
+  },
+  /** 下拉框的宽度 */
+  selectWidth: {
+    type: Number,
+    default: 0
+  },
+  /** 删除Field */
+  deleteField: {
+    type: String,
+    default: ""
+  },
+  /** 设置分页配置 */
+  setPagination: {
+    type: Function,
+    default: null
+  },
+  /** 获取分页参数 */
+  getPagination: {
+    type: Function,
+    default: null
+  },
+  /** reload */
+  reload: {
+    type: Function,
+    default: null
+  },
+  /** 是否加载下一页 */
+  hasNextPage: {
+    type: Boolean,
+    default: !1
+  },
+  /** 是否展示复选框 */
+  showCheckbox: {
+    type: Boolean,
+    default: !0
+  },
+  /** multiple 属性设置为 true 时，代表多选场景下用户最多可以选择的项目数， 为 0 则不限制 */
+  multipleLimit: {
+    type: Number,
+    default: 0
+  }
+};
+export {
+  e as configDefault,
+  t as selectProps,
+  l as selectTableProps
+};