hy-dispatch-ui-v3 0.1.6 → 0.2.0

package/es/components/appTable/js/index.mjs

@@ -27,7 +27,7 @@ function tableColumnsEditableleHandler(columns, columnsEditablele, searchArr) {
       searchLabelSet.add(column.label);
     }
   }
-  if ((searchArr == null ? void 0 : searchArr.length) > 0) {
+  if (searchArr?.length > 0) {
     searchArr.forEach((item) => {
       searchLabelSet.add(item.label);
     });
@@ -99,9 +99,11 @@ function operatorFilterHandler(column, scope, type = "all") {
   if (type === "all" || operator.length <= 1 && type === "default") {
     return operator;
   }
-  const btnWidth = 28;
+  const btnWidth = 40;
   const gapWidth = 12;
-  const operatorCount = Math.floor((width - 12 * 2) / (btnWidth + gapWidth));
+  const operatorCount = Math.floor(
+    (width - 12 * 2 - btnWidth) / (btnWidth + gapWidth) + 1
+  );
   if (operatorCount === operator.length) {
     return type === "default" ? operator : [];
   }
@@ -114,7 +116,22 @@ function operatorFilterHandler(column, scope, type = "all") {
 function operatorClickHandler(command, column, scope, type = "all") {
   const operator = operatorFilterHandler(column, scope, type);
   const target = operator[command];
-  (target == null ? void 0 : target.handler) && target.handler(scope);
+  target?.handler && target.handler(scope);
+}
+function renderHeaderHandler(column, scope) {
+  if (!column) return;
+  if (isFunction(column.renderHeader)) {
+    return column.renderHeader({ ...scope, column });
+  }
+  return column.label;
+}
+function renderContentHandler(column, scope) {
+  const { row } = scope || {};
+  if (!column || !row) return;
+  if (isFunction(column.renderContent)) {
+    return column.renderContent({ ...scope, column });
+  }
+  return row[column.prop];
 }
 const useAppTableWrapper = (hy) => {
   const {
@@ -145,8 +162,7 @@ const useAppTableWrapper = (hy) => {
     sessionStorage.setItem(CACHE_COLUMNS_KEY, JSON.stringify(value));
   }
   function doLayout() {
-    var _a;
-    (_a = tableRef.value) == null ? void 0 : _a.doLayout();
+    tableRef.value?.doLayout && tableRef.value?.doLayout();
   }
   let loadingInstance, loadingTimer;
   function showAppTableLoading() {
@@ -167,7 +183,7 @@ const useAppTableWrapper = (hy) => {
   }
   function closeAppTableLoading() {
     loadingTimer && clearTimeout(loadingTimer);
-    loadingInstance == null ? void 0 : loadingInstance.close();
+    loadingInstance?.close();
     loadingInstance = null;
   }
   const tableTriggerPosition = ref({
@@ -182,7 +198,6 @@ const useAppTableWrapper = (hy) => {
     getBoundingClientRect: () => tableTriggerPosition.value
   });
   function onTableRowContextmenuHandler(row, _, event) {
-    var _a, _b;
     if (props.onRowContextmenu) {
       props.onRowContextmenu(row, _, event);
       return;
@@ -193,18 +208,18 @@ const useAppTableWrapper = (hy) => {
       y: clientY
     });
     const column = tableColumns.value.find(
-      (column2) => column2.prop === "operator"
+      (column2) => column2.type === "operator"
     );
     const operator = operatorFilterHandler(column, { row });
-    if (!(operator == null ? void 0 : operator.length)) return;
+    if (!operator?.length) return;
     tableTriggerRef.value.column = column;
     tableTriggerRef.value.scope = { row };
     event.preventDefault();
-    (_a = tableDropdownRef.value) == null ? void 0 : _a.handleOpen();
+    tableDropdownRef.value?.handleOpen();
     if (isArray(operatorDropdownRef.value)) {
       operatorDropdownRef.value.forEach((item) => item.handleClose());
     } else {
-      (_b = operatorDropdownRef.value) == null ? void 0 : _b.handleClose();
+      operatorDropdownRef.value?.handleClose();
     }
   }
   const selectedList = ref([]);
@@ -214,11 +229,12 @@ const useAppTableWrapper = (hy) => {
       return map;
     }, /* @__PURE__ */ new Map());
   });
+  const selectionColumn = computed(() => {
+    return tableColumns.value.find((item) => item.type === "selection");
+  });
   function isSelectable(row) {
-    const column = tableColumns.value.find((column2) => {
-      return column2.type === "selection";
-    });
-    if (!isFunction(column == null ? void 0 : column.selectable)) return true;
+    const column = selectionColumn.value;
+    if (!isFunction(column?.selectable)) return true;
     return column.selectable(row);
   }
   function getSelectedIndex(row) {
@@ -226,8 +242,7 @@ const useAppTableWrapper = (hy) => {
     return isNumber(index) ? index : -1;
   }
   function clearSelection() {
-    var _a;
-    (_a = tableRef.value) == null ? void 0 : _a.clearSelection();
+    tableRef.value?.clearSelection();
   }
   function getSelectedList() {
     return selectedList.value;
@@ -282,6 +297,13 @@ const useAppTableWrapper = (hy) => {
     }
     return className.filter(Boolean).join(" ");
   }
+  const isSearchFocus = ref(false);
+  function onSearchInputHandler() {
+    isSearchFocus.value = true;
+  }
+  function onSearchBlurHandler() {
+    isSearchFocus.value = false;
+  }
   watchEffect(() => {
     const { columnsList, columnsEditablele, searchText } = tableColumnHandler(
       props.tableColumns,
@@ -313,8 +335,12 @@ const useAppTableWrapper = (hy) => {
     onTableSelectHandler,
     onTableRowContextmenuHandler,
     onTableRowClickHandler,
-    onTableColumnsSelectHandler
+    onTableColumnsSelectHandler,
+    // 搜索选中
+    isSearchFocus,
+    onSearchInputHandler,
+    onSearchBlurHandler
   };
 };
 
-export { operatorClickHandler, operatorDisableTextdHandler, operatorDisabledHandler, operatorFilterHandler, tableColumnHandler, tableColumnShowHandler, useAppTableWrapper };
+export { operatorClickHandler, operatorDisableTextdHandler, operatorDisabledHandler, operatorFilterHandler, renderContentHandler, renderHeaderHandler, tableColumnHandler, tableColumnShowHandler, useAppTableWrapper };

package/es/components/appTable/js/search.mjs

@@ -45,8 +45,7 @@ function useAppTableSearch(hy) {
       }
     });
     function successFun(res) {
-      var _a;
-      if (!((_a = res.data.content) == null ? void 0 : _a.length) && props.filterModel.page !== 1) {
+      if (!res.data.content?.length && props.filterModel.page !== 1) {
         getData(1);
         return;
       }

package/es/components/appTable/js/useAppTable.mjs

@@ -1,9 +1,10 @@
 import { toRef } from 'vue';
 import { useAppSearch } from '../../appSearch/js/useAppSearch.mjs';
-import { isEmpty, isBoolean } from '../../../utils/is.mjs';
+import { isEmpty, isBoolean, isString, isObject } from '../../../utils/is.mjs';
 import { useLocale } from '../../../hooks/useLocale.mjs';
 
 function getColumnDefaultConfig(column) {
+  const { t } = useLocale();
   switch (column.type) {
     case "selection":
       return {
@@ -11,27 +12,40 @@ function getColumnDefaultConfig(column) {
         reserveSelection: true
       };
     case "index":
+      return {
+        props: `${column.type}_prop`,
+        label: t("table.index")
+      };
     case "expand":
       return {
         prop: `${column.type}_prop`
       };
+    case "operator":
+      return {
+        label: t("table.operator"),
+        prop: `operator_prop`
+      };
     default:
       return {};
   }
 }
 function getColumnDefaultWidth(column) {
   if (column.width) return column.width;
+  if (column.type === "expand" && column.expandType === "expand") return 40;
+  if (column.type === "selection") return 40;
   if (column.type === "index") return 80;
-  if (column.prop === "operator") return 132;
+  if (column.type === "operator") return 172;
   return;
 }
-function getColumnDefaultLabel(column) {
-  const { t } = useLocale();
-  if (column.label) return column.label;
-  if (column.type === "index") return t("table.index");
-  return;
+function generateColumnItem(column) {
+  return {
+    ...column,
+    key: column.prop,
+    dataKey: column.prop,
+    title: column.label
+  };
 }
-function getColumnsEditable(column, index) {
+function getColumnEditable(column, index) {
   const { editable, type, prop } = column;
   if (isBoolean(editable)) {
     return {
@@ -47,29 +61,55 @@ function getColumnsEditable(column, index) {
     index,
     lock: false,
     edit: !type || type === "default",
-    checked: !type || type !== "default" || prop === "operator",
+    checked: !type || type !== "default" || type === "operator",
     desc: void 0,
     examples: [],
     ...editable || {}
   };
 }
+function getColumnSort(column) {
+  const sort = {
+    prop: column.prop,
+    show: false,
+    default: ""
+  };
+  if (isBoolean(column.sort)) {
+    sort.prop = column.prop;
+    sort.show = true;
+  } else if (isString(column.sort)) {
+    sort.prop = column.sort;
+    sort.show = true;
+  } else if (isObject(column.sort)) {
+    const { prop, show } = column.sort;
+    sort.prop = isString(prop) ? prop : sort.prop;
+    sort.show = true;
+    sort.default = ["desc", "asc"].includes(column.sort.default) ? column.sort.default : sort.default;
+  }
+  return sort;
+}
 const useAppTable = (config = {}) => {
   const { columns, filterModel, filterColumns } = config || {};
   const tableColumns = [];
+  let defaultSortInfo = null;
   try {
-    for (let i = 0; i < (columns == null ? void 0 : columns.length); i++) {
+    for (let i = 0; i < columns?.length; i++) {
       const column = columns[i];
       if (isEmpty(column.prop) && column.type === "default") {
         throw Error("\u3010column.prop\u3011\u4E0D\u80FD\u4E3A\u7A7A");
       }
-      tableColumns.push({
+      const sort = getColumnSort(column);
+      if (!defaultSortInfo && sort.default) {
+        defaultSortInfo = sort;
+      }
+      const target = {
         ...getColumnDefaultConfig(column),
         ...column,
         type: column.type || "default",
         width: getColumnDefaultWidth(column),
-        label: getColumnDefaultLabel(column),
-        editable: getColumnsEditable(column, i)
-      });
+        sort,
+        editable: getColumnEditable(column, i)
+      };
+      tableColumns.push(generateColumnItem(target));
     }
   } catch (err) {
     console.error(err);
@@ -80,6 +120,10 @@ const useAppTable = (config = {}) => {
     // 当前分页数
     size: 15,
     // 每页数量
+    sortBy: defaultSortInfo?.prop,
+    // 排序字段
+    orderSort: defaultSortInfo?.default,
+    // 排序方式
     ...filterModel
   });
   return {

package/es/components/appTable/style/appTable.scss

@@ -21,4 +21,20 @@
       }
     }
   }
+  .app-table-search {
+    width: 160px;
+    .hy-el-input__inner::placeholder {
+      font-size: 12px;
+    }
+    .hy-el-input__wrapper {
+      box-shadow: none;
+    }
+    .hy-el-input-group__append {
+      color: rgb(var(--hy-main));
+      background-color: rgba(var(--hy-background-2));
+      box-shadow: none;
+      padding: 4px;
+      min-height: 100%;
+    }
+  }
 }

package/es/components/appTooltip/appTooltip.vue.mjs

@@ -1,4 +1,4 @@
-import { defineComponent, ref, computed, openBlock, createBlock, unref, mergeProps, createSlots, withCtx, createElementVNode, normalizeClass, renderSlot, createTextVNode, toDisplayString } from 'vue';
+import { ref, computed, openBlock, createBlock, unref, mergeProps, createSlots, withCtx, renderSlot, createTextVNode, toDisplayString, createElementBlock, normalizeClass, defineComponent } from 'vue';
 import { ElTooltip } from 'element-plus';
 import { isOverflowing, isNumber } from '../../utils/is.mjs';
 
@@ -14,13 +14,15 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
       default: false
     },
     disabled: {
-      type: Boolean
+      type: Boolean,
+      default: false
     },
     class: {
       type: String
     },
     overLine: {
-      type: [String, Number]
+      type: Number,
+      default: 1
     },
     content: {
       type: String
@@ -28,7 +30,13 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
   },
   setup(__props) {
     const props = __props;
-    const isDisabled = ref(props.disabled);
+    const isShow = ref(false);
+    const isDisabled = computed(() => {
+      if (props.disabled || props.isAlways) {
+        return props.disabled;
+      }
+      return isShow.value;
+    });
     const appClass = computed(() => {
       const classList = [props.class, "break-all"];
       const overLine = props.overLine;
@@ -38,11 +46,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
       return classList.filter(Boolean);
     });
     function onMouseenterHandler(e) {
-      if (props.disabled || props.isAlways) {
-        isDisabled.value = props.disabled;
-        return;
-      }
-      isDisabled.value = !isOverflowing(e.target);
+      isShow.value = !isOverflowing(e.target);
     }
     return (_ctx, _cache) => {
       return openBlock(), createBlock(unref(ElTooltip), mergeProps({
@@ -53,12 +57,19 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
         "popper-class": "max-w-[300px]"
       }, _ctx.$attrs, {
         disabled: isDisabled.value,
-        content: __props.content
+        content: _ctx.$slots.content ? void 0 : __props.content
       }), createSlots({
         default: withCtx(() => [
-          createElementVNode(
+          __props.isAlways ? renderSlot(_ctx.$slots, "default", { key: 0 }, () => [
+            createTextVNode(
+              toDisplayString(__props.content),
+              1
+              /* TEXT */
+            )
+          ]) : (openBlock(), createElementBlock(
             "span",
             {
+              key: 1,
               class: normalizeClass(appClass.value),
               onMouseenter: onMouseenterHandler
             },
@@ -73,12 +84,12 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
             ],
             34
             /* CLASS, NEED_HYDRATION */
-          )
+          ))
         ]),
         _: 2
         /* DYNAMIC */
       }, [
-        !_ctx.$slots.content ? {
+        _ctx.$slots.content ? {
           name: "content",
           fn: withCtx(() => [
             renderSlot(_ctx.$slots, "content")