hy-dispatch-ui-v3 0.2.66 → 0.2.68

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

@@ -48,10 +48,7 @@ function isEmptyValue(e) {
   return isEmpty(e) || isArray(e) && !e.length;
 }
 function useShrink(props, formItemWrapper) {
-  const { removeResize } = useResizeObserver(
-    formItemWrapper,
-    shrinkResizeHandler
-  );
+  const { removeResize } = useResizeObserver(formItemWrapper, shrinkResizeHandler);
   const isExpand = ref(false);
   const showShrink = ref(true);
   const containerHeight = ref(getContainerPickUpHeight());

package/es/components/hySearch/js/useAppSearch.mjs

@@ -1,8 +1,8 @@
 import { unref, toRef } from 'vue';
 import '../../../hooks/index.mjs';
 import '../../../utils/index.mjs';
-import { useLocale } from '../../../hooks/useLocale.mjs';
 import { isNumber } from '../../../utils/is.mjs';
+import { $t } from '../../../hooks/useLocale.mjs';
 import { genColumnDefaultLabel, genValueByProp } from '../../../utils/form.mjs';
 import { mergeDeep, funRunHandler } from '../../../utils/handler.mjs';
 
@@ -32,7 +32,6 @@ const genColumnWidth = (config) => {
   return { width, inputWidth };
 };
 const timeRangeOptionsHandler = (config) => {
-  const { t } = useLocale();
   const { timeRangeOptions } = config || {};
   if (!timeRangeOptions?.length) return timeRangeOptions;
   return timeRangeOptions.reduce((list, item) => {
@@ -42,15 +41,15 @@ const timeRangeOptionsHandler = (config) => {
     if (!label) {
       switch (unit) {
         case "year":
-          label = `${value} ` + t(isPlural ? "hy.years" : "hy.year");
+          label = `${value} ` + $t(isPlural ? "hy.years" : "hy.year");
           break;
         case "month":
-          label = `${value} ` + t(isPlural ? "hy.months" : "hy.month");
+          label = `${value} ` + $t(isPlural ? "hy.months" : "hy.month");
           break;
         case "day":
         default:
           unit = "day";
-          label = value === 1 ? t("hy.today") : `${value} ` + t(isPlural ? "hy.days" : "hy.day");
+          label = value === 1 ? $t("hy.today") : `${value} ` + $t(isPlural ? "hy.days" : "hy.day");
       }
     }
     list.push({ ...item, label, unit });
@@ -107,11 +106,7 @@ const resetAppSearchValue = (columns = [], obj = {}) => {
     const value = funRunHandler(item.defaultValue);
     if (Array.isArray(item.prop)) {
       for (let i = 0; i < item.prop.length; i++) {
-        genValueByProp(
-          obj,
-          item.prop[i],
-          Array.isArray(value) ? value[i] : void 0
-        );
+        genValueByProp(obj, item.prop[i], Array.isArray(value) ? value[i] : void 0);
       }
     } else {
       genValueByProp(obj, item.prop, value);

package/es/components/hySearch/search.vue.mjs

@@ -7,9 +7,9 @@ import '../index.mjs';
 import _sfc_main$1 from './cpns/searchItem.vue.mjs';
 import { useShrink, isEmptyValue, formContextKey } from './js/index.mjs';
 import { resetAppSearchValue } from './js/useAppSearch.mjs';
-import { useLocale } from '../../hooks/useLocale.mjs';
 import { isArray, isObject } from '../../utils/is.mjs';
 import { HyIcon } from '../hyIcon/index.mjs';
+import { $t } from '../../hooks/useLocale.mjs';
 
 import "./style/search.scss";
 
@@ -47,11 +47,10 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
       type: [String, Array, Object]
     }
   },
-  emits: ["search"],
+  emits: ["search", "optionsStatus"],
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emits = __emit;
-    const { t } = useLocale();
     const formItemWrapper = useTemplateRef("formItemWrapper");
     const { showShrink, isExpand, containerHeight, switchShrink, shrinkDestroy } = useShrink(props, formItemWrapper);
     const formColumnMap = computed(() => {
@@ -91,7 +90,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
         if (isObject(oldVal)) {
           count += getFilterCount(newVal, oldVal, targetProp);
         } else if (isArray(oldVal)) {
-          if (oldVal.length > 0 && !oldVal.every((t2, i) => t2 === newVal[i])) {
+          if (oldVal.length > 0 && !oldVal.every((t, i) => t === newVal[i])) {
             keySet2.add(unref(formColumnMap).get(key).key);
           }
         } else if (isEmptyValue(oldVal) ? !isEmptyValue(newVal) : oldVal !== newVal) {
@@ -129,25 +128,28 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
     };
     function filterFields(fields2 = [], keys = []) {
       const filterKeys = keys.map((prop) => isArray(prop) ? prop.join(".") : prop);
-      return filterKeys.length ? fields2.filter(
-        (field) => field.propString && filterKeys.includes(field.propString)
-      ) : fields2;
+      return filterKeys.length ? fields2.filter((field) => field.propString && filterKeys.includes(field.propString)) : fields2;
     }
-    async function obtainOptionsFields(keys) {
+    async function obtainOptionsFields(keys, isMountedLoad = false) {
       const filteredFields = filterFields(fields, keys);
-      await Promise.allSettled(filteredFields.map((field) => field.obtainOptions()));
+      await Promise.allSettled(filteredFields.map((field) => field.obtainOptions(isMountedLoad)));
     }
-    async function getOptions() {
-      await obtainOptionsFields();
+    async function getOptions(isMountedLoad = false) {
+      await obtainOptionsFields([], isMountedLoad);
+      emitOptionsStatus();
     }
     async function getOptionsFields(keys) {
       await obtainOptionsFields(keys);
+      emitOptionsStatus();
     }
     async function getOptionsError() {
-      const filteredFields = fields.filter(
-        (field) => field.propString && field.optionsError
-      );
+      const filteredFields = fields.filter((field) => field.propString && field.optionsError);
       await Promise.allSettled(filteredFields.map((field) => field.obtainOptions()));
+      emitOptionsStatus();
+    }
+    function emitOptionsStatus() {
+      const hasError = fields.some((item) => item.optionsError === "error");
+      emits("optionsStatus", { result: !hasError });
     }
     provide(
       formContextKey,
@@ -155,11 +157,12 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
         ...toRefs(props),
         emits,
         addField,
-        removeField
+        removeField,
+        emitOptionsStatus
       })
     );
     onMounted(() => {
-      getOptions();
+      getOptions(true);
     });
     onUnmounted(() => {
       shrinkDestroy();
@@ -196,7 +199,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
                 createElementVNode(
                   "span",
                   null,
-                  toDisplayString(unref(t)("hy.filter")),
+                  toDisplayString(unref($t)("hy.filter")),
                   1
                   /* TEXT */
                 ),
@@ -206,7 +209,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
                   [
                     createElementVNode(
                       "span",
-                      { class: "bg-theme02 text-theme font-bold leading-4 px-[6px]" },
+                      { class: "bg-theme02 text-theme font-bold leading-4 px-[6px] box-border" },
                       toDisplayString(filterCount.value),
                       1
                       /* TEXT */
@@ -217,7 +220,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
                         class: "text-auxiliary cursor-pointer",
                         onClick: onResetHandler
                       },
-                      toDisplayString(unref(t)("hy.reset")),
+                      toDisplayString(unref($t)("hy.reset")),
                       1
                       /* TEXT */
                     )
@@ -233,7 +236,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
                 createElementVNode(
                   "span",
                   { class: "text-auxiliary" },
-                  toDisplayString(unref(isExpand) ? unref(t)("hy.packUp") : unref(t)("hy.expand")),
+                  toDisplayString(unref(isExpand) ? unref($t)("hy.packUp") : unref($t)("hy.expand")),
                   1
                   /* TEXT */
                 ),

package/es/components/hySearch/style/search.scss

@@ -6,6 +6,7 @@
   opacity: 1;
   transition: all 0.3s linear;
   overflow: hidden;
+  box-sizing: border-box;
   &.hy-search-hidden {
     padding-top: 0;
     padding-bottom: 0;
@@ -34,11 +35,19 @@
     gap: 16px;
     position: relative;
     padding: 1px;
+    box-sizing: border-box;
     .hy-el-form-item {
       margin-bottom: 0;
       &.hidden {
         display: none;
       }
+      .hy-el-search-item-error {
+        .hy-el-input .hy-el-input__inner::placeholder,
+        .hy-el-select__placeholder.is-transparent {
+          color: rgba(var(--hy-danger-2));
+          font-size: 14px;
+        }
+      }
     }
     .hy-el-input,
     .hy-el-date-editor {

package/es/components/hyStatus/index.mjs

@@ -0,0 +1,7 @@
+import _sfc_main from './status.vue.mjs';
+import '../../utils/index.mjs';
+import { withInstall } from '../../utils/handler.mjs';
+
+const HyStatus = withInstall(_sfc_main);
+
+export { HyStatus, HyStatus as default };

package/es/components/hyStatus/status.vue.mjs

@@ -0,0 +1,110 @@
+import { defineComponent, openBlock, createElementBlock, Fragment, createBlock, unref, normalizeClass, createElementVNode, renderSlot, createTextVNode, toDisplayString } from 'vue';
+import '../index.mjs';
+import { HyIcon } from '../hyIcon/index.mjs';
+
+import "./style/status.scss";
+
+const __default__ = defineComponent({
+  name: "HyStatus"
+});
+const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
+  props: {
+    type: {
+      type: String,
+      default: "default"
+    },
+    label: {
+      type: String
+    },
+    isOnline: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: [],
+  setup(__props, { expose: __expose, emit: __emit }) {
+    const props = __props;
+    const emits = __emit;
+    const color = {
+      default: "text-auxiliary",
+      primary: "text-theme",
+      success: "text-success",
+      warning: "text-warning",
+      danger: "text-danger-2"
+    };
+    const bgColor = {
+      default: "bg-auxiliary",
+      primary: "bg-theme",
+      success: "bg-success",
+      warning: "bg-warning",
+      danger: "bg-danger-2"
+    };
+    const shadowColor = {
+      default: "bg-[rgba(var(--hy-auxiliary),0.28)]",
+      primary: "bg-[rgba(var(--hy-theme),0.28)]",
+      success: "bg-[rgba(var(--hy-success),0.28)]",
+      warning: "bg-[rgba(var(--hy-warning),0.28)]",
+      danger: "bg-[rgba(var(--hy-danger),0.28)]"
+    };
+    __expose({});
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", { class: "inline-flex items-center gap-2 text-sm" }, [
+        __props.isOnline ? (openBlock(), createElementBlock(
+          Fragment,
+          { key: 0 },
+          [
+            __props.type === "danger" ? (openBlock(), createBlock(unref(HyIcon), {
+              key: 0,
+              "svg-name": "ops-list-device-id-off-line",
+              class: "!w-3 !h-3"
+            })) : (openBlock(), createBlock(unref(HyIcon), {
+              key: 1,
+              "svg-name": "ops-list-device-id-on-line",
+              class: "!w-3 !h-3"
+            }))
+          ],
+          64
+          /* STABLE_FRAGMENT */
+        )) : (openBlock(), createElementBlock(
+          "div",
+          {
+            key: 1,
+            class: normalizeClass(["w-2.5 h-2.5 flex items-center justify-center rounded-full flex-shrink-0 box-border", [shadowColor[__props.type]]])
+          },
+          [
+            createElementVNode(
+              "div",
+              {
+                class: normalizeClass(["w-1.5 h-1.5 rounded-full", [bgColor[__props.type]]])
+              },
+              null,
+              2
+              /* CLASS */
+            )
+          ],
+          2
+          /* CLASS */
+        )),
+        createElementVNode(
+          "span",
+          {
+            class: normalizeClass([color[__props.type]])
+          },
+          [
+            renderSlot(_ctx.$slots, "default", {}, () => [
+              createTextVNode(
+                toDisplayString(__props.label),
+                1
+                /* TEXT */
+              )
+            ])
+          ],
+          2
+          /* CLASS */
+        )
+      ]);
+    };
+  }
+});
+
+export { _sfc_main as default };

package/es/components/hyTable/cpns/columnSelect.vue.mjs

@@ -1,4 +1,4 @@
-import { useTemplateRef, ref, computed, unref, nextTick, watch, openBlock, createBlock, withCtx, createElementVNode, toDisplayString, createVNode, normalizeClass, createCommentVNode, createElementBlock, Fragment, renderList, createTextVNode } from 'vue';
+import { useTemplateRef, ref, computed, unref, nextTick, watch, openBlock, createBlock, withCtx, createElementVNode, toDisplayString, createVNode, createElementBlock, normalizeClass, createCommentVNode, Fragment, renderList, createTextVNode } from 'vue';
 import Sortable from 'sortablejs';
 import { ElMessage, ElPopover, ElCheckboxGroup } from 'element-plus';
 import '../../../hooks/index.mjs';
@@ -6,7 +6,7 @@ import '../../../utils/index.mjs';
 import '../../index.mjs';
 import { tableColumnShowHandler, tableColumnHandler } from '../js/index.mjs';
 import _sfc_main$1 from './columnSelectItem.vue.mjs';
-import { useLocale } from '../../../hooks/useLocale.mjs';
+import { $t } from '../../../hooks/useLocale.mjs';
 import { isEmpty } from '../../../utils/is.mjs';
 import { HyIcon } from '../../hyIcon/index.mjs';
 import { HyTooltip } from '../../hyTooltip/index.mjs';
@@ -32,7 +32,6 @@ const _sfc_main = {
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emits = __emit;
-    const { t } = useLocale();
     const popoverRef = useTemplateRef("popoverRef");
     const listRef = useTemplateRef("listRef");
     const tableColumns = ref([]);
@@ -42,6 +41,11 @@ const _sfc_main = {
         return total + (isShowColumn(column) ? 1 : 0);
       }, 0);
     });
+    const cannotDragged = computed(() => {
+      return props.columns.reduce((total, column) => {
+        return total + (isShowColumn(column) && column.editable.lock ? 1 : 0);
+      }, 0);
+    });
     function isShowColumn(column) {
       return tableColumnShowHandler(column) && column.editable.edit;
     }
@@ -81,9 +85,7 @@ const _sfc_main = {
       }, /* @__PURE__ */ new Map());
     });
     function onCheckedHandler(target) {
-      const currentIndex = checkedList.value.findIndex(
-        (item) => item === target.prop
-      );
+      const currentIndex = checkedList.value.findIndex((item) => item === target.prop);
       if (currentIndex !== -1) {
         checkedList.value.splice(currentIndex, 1);
       } else {
@@ -93,11 +95,11 @@ const _sfc_main = {
     }
     function onConfirmHandler() {
       if (!checkedList.value.length && showColumnsLength.value === tableEditableColumns.value?.length) {
-        ElMessage.warning(t("table.theColumnsDisplayedInTheTableCannotBeLeftBlank"));
+        ElMessage.warning($t("table.theColumnsDisplayedInTheTableCannotBeLeftBlank"));
         return;
       }
       if (checkedList.value.length > 15) {
-        ElMessage.warning(t("table.maxColumnLimitTip"));
+        ElMessage.warning($t("table.maxColumnLimitTip"));
         return;
       }
       const editableObj = tableEditableColumns.value.reduce(
@@ -112,9 +114,7 @@ const _sfc_main = {
       closePopover();
     }
     function onClearHandler() {
-      const { columnsList, columnsEditablele } = tableColumnHandler(
-        props.originColumns
-      );
+      const { columnsList, columnsEditablele } = tableColumnHandler(props.originColumns);
       initColumnsInfo(columnsList, columnsEditablele);
       showReset.value = false;
     }
@@ -128,19 +128,14 @@ const _sfc_main = {
         animation: 150,
         onEnd(event) {
           const { oldIndex, newIndex } = event;
-          if (isEmpty(oldIndex) || isEmpty(newIndex) || oldIndex === newIndex)
-            return;
+          if (isEmpty(oldIndex) || isEmpty(newIndex) || oldIndex === newIndex) return;
           const minIndex = Math.min(oldIndex, newIndex);
           const maxIndex = Math.max(oldIndex, newIndex);
           const sortList = [];
           for (let i = minIndex; i <= maxIndex; i++) {
             sortList[i] = tableEditableColumns.value[i].sortIndex;
           }
-          tableEditableColumns.value.splice(
-            newIndex,
-            0,
-            tableEditableColumns.value.splice(oldIndex, 1)[0]
-          );
+          tableEditableColumns.value.splice(newIndex, 0, tableEditableColumns.value.splice(oldIndex, 1)[0]);
           for (let i = minIndex; i <= maxIndex; i++) {
             tableEditableColumns.value[i].sortIndex = sortList[i];
           }
@@ -176,7 +171,7 @@ const _sfc_main = {
         },
         {
           reference: withCtx(() => [
-            createElementVNode("div", { class: "h-[32px] flex items-center gap-[10px] clickBox px-3 rounded hover:bg-background-2" }, [
+            createElementVNode("div", { class: "h-[32px] flex items-center gap-[10px] clickBox px-3 rounded hover:bg-background-2 box-border" }, [
               createVNode(unref(HyIcon), {
                 "svg-name": "ops-button-edit-column",
                 "class-name": "!w-3 !h-3"
@@ -184,7 +179,7 @@ const _sfc_main = {
               createElementVNode(
                 "span",
                 null,
-                toDisplayString(unref(t)("table.editColumn")) + " \xB7 " + toDisplayString(showColumnsLength.value),
+                toDisplayString(unref($t)("table.editColumn")) + " \xB7 " + toDisplayString(showColumnsLength.value),
                 1
                 /* TEXT */
               )
@@ -196,7 +191,7 @@ const _sfc_main = {
                 createElementVNode(
                   "span",
                   { class: "text-main font-bold" },
-                  toDisplayString(unref(t)("table.editColumn")),
+                  toDisplayString(unref($t)("table.editColumn")),
                   1
                   /* TEXT */
                 ),
@@ -206,7 +201,7 @@ const _sfc_main = {
                   onClick: closePopover
                 })
               ]),
-              createElementVNode("div", { class: "flex items-center gap-1.5 px-4 py-2.5 text-xs text-theme" }, [
+              createElementVNode("div", { class: "flex items-center gap-1.5 px-4 py-2.5 text-xs text-theme box-border" }, [
                 createVNode(unref(HyIcon), {
                   "svg-name": "dispatch-share1-prompt",
                   "class-name": "!w-3 !h-3"
@@ -219,9 +214,10 @@ const _sfc_main = {
                   "onUpdate:modelValue": ($event) => checkedList.value = $event
                 }, {
                   default: withCtx(() => [
-                    createElementVNode(
+                    cannotDragged.value > 0 ? (openBlock(), createElementBlock(
                       "div",
                       {
+                        key: 0,
                         class: normalizeClass(["flex flex-col gap-1.5 leading-3 text-info", { "mb-1.5": tableEditableColumns.value.length > 0 }])
                       },
                       [
@@ -250,7 +246,7 @@ const _sfc_main = {
                       ],
                       2
                       /* CLASS */
-                    ),
+                    )) : createCommentVNode("v-if", true),
                     createCommentVNode(" \u53EF\u62D6\u62FD "),
                     createElementVNode(
                       "div",
@@ -289,7 +285,7 @@ const _sfc_main = {
                   createElementVNode(
                     "span",
                     null,
-                    toDisplayString(unref(t)("table.selectedNumberItems", [checkedList.value?.length || 0])),
+                    toDisplayString(unref($t)("table.selectedNumberItems", [checkedList.value?.length || 0])),
                     1
                     /* TEXT */
                   ),
@@ -300,7 +296,7 @@ const _sfc_main = {
                       class: "clickBox text-danger-2 ml-3",
                       onClick: onClearHandler
                     },
-                    toDisplayString(unref(t)("hy.reset")),
+                    toDisplayString(unref($t)("hy.reset")),
                     1
                     /* TEXT */
                   )) : createCommentVNode("v-if", true)
@@ -316,7 +312,7 @@ const _sfc_main = {
                       }),
                       createVNode(unref(HyTooltip), {
                         "is-always": false,
-                        content: unref(t)("table.tooManyFieldsWillAffectReadability"),
+                        content: unref($t)("table.tooManyFieldsWillAffectReadability"),
                         class: "mr-2 text-auxiliary"
                       }, null, 8, ["content"])
                     ],
@@ -330,7 +326,7 @@ const _sfc_main = {
                   }, {
                     default: withCtx(() => [
                       createTextVNode(
-                        toDisplayString(unref(t)("hy.confirm")),
+                        toDisplayString(unref($t)("hy.confirm")),
                         1
                         /* TEXT */
                       )

package/es/components/hyTable/cpns/columnSelectItem.vue.mjs

@@ -4,7 +4,7 @@ import { Lock } from '@element-plus/icons-vue';
 import '../../../hooks/index.mjs';
 import { renderHeaderHandler } from '../js/index.mjs';
 import '../../index.mjs';
-import { useLocale } from '../../../hooks/useLocale.mjs';
+import { $t } from '../../../hooks/useLocale.mjs';
 import { HyTooltip } from '../../hyTooltip/index.mjs';
 
 const _sfc_main = {
@@ -27,7 +27,6 @@ const _sfc_main = {
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emits = __emit;
-    const { t } = useLocale();
     function onClickHandler(column) {
       if (column.editable.lock) return;
       emits("checked", column);
@@ -78,7 +77,7 @@ const _sfc_main = {
               __props.checkMap.has(__props.column.prop) ? (openBlock(), createElementBlock(
                 "span",
                 { key: 0 },
-                toDisplayString(unref(t)("table.show")),
+                toDisplayString(unref($t)("table.show")),
                 1
                 /* TEXT */
               )) : (openBlock(), createElementBlock(
@@ -87,7 +86,7 @@ const _sfc_main = {
                   key: 1,
                   class: "text-info"
                 },
-                toDisplayString(unref(t)("table.notShown")),
+                toDisplayString(unref($t)("table.notShown")),
                 1
                 /* TEXT */
               )),
@@ -99,7 +98,7 @@ const _sfc_main = {
               }, [
                 createElementVNode("div", {
                   class: "w-5 h-2.5",
-                  style: { "background": "radial-gradient(\n                    circle,\n                    rgba(var(--hy-theme)) 1px,\n                    transparent 2px\n                  )\n                  0px 0px / 5px 5px" }
+                  style: { "background": "radial-gradient(circle, rgba(var(--hy-theme)) 1px, transparent 2px) 0px 0px / 5px 5px" }
                 })
               ], 8, ["onClick"])) : createCommentVNode("v-if", true)
             ])) : createCommentVNode("v-if", true)
@@ -108,12 +107,12 @@ const _sfc_main = {
         default: withCtx(() => [
           createElementVNode(
             "div",
-            { class: "h-[45px] px-[14px] flex items-center text-main text-sm font-bold border-b border-border" },
+            { class: "h-[45px] px-[14px] flex items-center text-main text-sm font-bold border-b border-border box-border" },
             toDisplayString(unref(renderHeaderHandler)(__props.column)),
             1
             /* TEXT */
           ),
-          createElementVNode("div", { class: "flex flex-col gap-3 px-4 pt-2.5 pb-4 text-main text-xs" }, [
+          createElementVNode("div", { class: "flex flex-col gap-3 px-4 pt-2.5 pb-4 text-main text-xs box-border" }, [
             __props.column.editable.desc ? (openBlock(), createElementBlock(
               "div",
               { key: 0 },
@@ -125,7 +124,7 @@ const _sfc_main = {
               createElementVNode(
                 "div",
                 { class: "text-auxiliary mb-1.5" },
-                toDisplayString(unref(t)("table.example")),
+                toDisplayString(unref($t)("table.example")),
                 1
                 /* TEXT */
               ),
@@ -138,7 +137,7 @@ const _sfc_main = {
                       "div",
                       {
                         key: index,
-                        class: "leading-5 bg-background-2 px-1.5 rounded-[2px]"
+                        class: "leading-5 bg-background-2 px-1.5 rounded-[2px] box-border"
                       },
                       toDisplayString(item),
                       1

package/es/components/hyTable/cpns/headerItem.vue.mjs

@@ -64,10 +64,10 @@ const _sfc_main = {
     return (_ctx, _cache) => {
       return columnSort.value.show ? (openBlock(), createElementBlock("div", {
         key: 0,
-        class: "w-full relative cursor-pointer",
+        class: "w-full flex items-center gap-1 relative cursor-pointer",
         onClick: ($event) => onSortHandler(columnSort.value.prop, null)
       }, [
-        createElementVNode("div", { class: "flex flex-col absolute top-1/2 -left-1 transform -translate-y-1/2 -translate-x-full" }, [
+        createElementVNode("div", { class: "flex flex-col" }, [
           createVNode(unref(ElIcon), {
             size: "8",
             color: isSortActive(columnSort.value.prop, "asc") ? "rgba(var(--hy-theme))" : "rgba(var(--hy-auxiliary))",