hy-dispatch-ui-v3 0.2.66 → 0.2.68

package/lib/components/hySearch/js/index.js

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

package/lib/components/hySearch/js/useAppSearch.js

@@ -3,8 +3,8 @@
 var vue = require('vue');
 require('../../../hooks/index.js');
 require('../../../utils/index.js');
-var useLocale = require('../../../hooks/useLocale.js');
 var is = require('../../../utils/is.js');
+var useLocale = require('../../../hooks/useLocale.js');
 var form = require('../../../utils/form.js');
 var handler = require('../../../utils/handler.js');
 
@@ -34,7 +34,6 @@ const genColumnWidth = (config) => {
   return { width, inputWidth };
 };
 const timeRangeOptionsHandler = (config) => {
-  const { t } = useLocale.useLocale();
   const { timeRangeOptions } = config || {};
   if (!timeRangeOptions?.length) return timeRangeOptions;
   return timeRangeOptions.reduce((list, item) => {
@@ -44,15 +43,15 @@ const timeRangeOptionsHandler = (config) => {
     if (!label) {
       switch (unit) {
         case "year":
-          label = `${value} ` + t(isPlural ? "hy.years" : "hy.year");
+          label = `${value} ` + useLocale.$t(isPlural ? "hy.years" : "hy.year");
           break;
         case "month":
-          label = `${value} ` + t(isPlural ? "hy.months" : "hy.month");
+          label = `${value} ` + useLocale.$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 ? useLocale.$t("hy.today") : `${value} ` + useLocale.$t(isPlural ? "hy.days" : "hy.day");
       }
     }
     list.push({ ...item, label, unit });
@@ -109,11 +108,7 @@ const resetAppSearchValue = (columns = [], obj = {}) => {
     const value = handler.funRunHandler(item.defaultValue);
     if (Array.isArray(item.prop)) {
       for (let i = 0; i < item.prop.length; i++) {
-        form.genValueByProp(
-          obj,
-          item.prop[i],
-          Array.isArray(value) ? value[i] : void 0
-        );
+        form.genValueByProp(obj, item.prop[i], Array.isArray(value) ? value[i] : void 0);
       }
     } else {
       form.genValueByProp(obj, item.prop, value);

package/lib/components/hySearch/search.vue.js

@@ -11,9 +11,9 @@ require('../index.js');
 var searchItem = require('./cpns/searchItem.vue.js');
 var index = require('./js/index.js');
 var useAppSearch = require('./js/useAppSearch.js');
-var useLocale = require('../../hooks/useLocale.js');
 var is = require('../../utils/is.js');
 var index$1 = require('../hyIcon/index.js');
+var useLocale = require('../../hooks/useLocale.js');
 
 import "./style/search.scss";
 
@@ -51,11 +51,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.useLocale();
     const formItemWrapper = vue.useTemplateRef("formItemWrapper");
     const { showShrink, isExpand, containerHeight, switchShrink, shrinkDestroy } = index.useShrink(props, formItemWrapper);
     const formColumnMap = vue.computed(() => {
@@ -95,7 +94,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
         if (is.isObject(oldVal)) {
           count += getFilterCount(newVal, oldVal, targetProp);
         } else if (is.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(vue.unref(formColumnMap).get(key).key);
           }
         } else if (index.isEmptyValue(oldVal) ? !index.isEmptyValue(newVal) : oldVal !== newVal) {
@@ -133,25 +132,28 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
     };
     function filterFields(fields2 = [], keys = []) {
       const filterKeys = keys.map((prop) => is.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 });
     }
     vue.provide(
       index.formContextKey,
@@ -159,11 +161,12 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
         ...vue.toRefs(props),
         emits,
         addField,
-        removeField
+        removeField,
+        emitOptionsStatus
       })
     );
     vue.onMounted(() => {
-      getOptions();
+      getOptions(true);
     });
     vue.onUnmounted(() => {
       shrinkDestroy();
@@ -200,7 +203,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
                 vue.createElementVNode(
                   "span",
                   null,
-                  vue.toDisplayString(vue.unref(t)("hy.filter")),
+                  vue.toDisplayString(vue.unref(useLocale.$t)("hy.filter")),
                   1
                   /* TEXT */
                 ),
@@ -210,7 +213,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
                   [
                     vue.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" },
                       vue.toDisplayString(filterCount.value),
                       1
                       /* TEXT */
@@ -221,7 +224,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
                         class: "text-auxiliary cursor-pointer",
                         onClick: onResetHandler
                       },
-                      vue.toDisplayString(vue.unref(t)("hy.reset")),
+                      vue.toDisplayString(vue.unref(useLocale.$t)("hy.reset")),
                       1
                       /* TEXT */
                     )
@@ -237,7 +240,7 @@ const _sfc_main = /* @__PURE__ */ Object.assign(__default__, {
                 vue.createElementVNode(
                   "span",
                   { class: "text-auxiliary" },
-                  vue.toDisplayString(vue.unref(isExpand) ? vue.unref(t)("hy.packUp") : vue.unref(t)("hy.expand")),
+                  vue.toDisplayString(vue.unref(isExpand) ? vue.unref(useLocale.$t)("hy.packUp") : vue.unref(useLocale.$t)("hy.expand")),
                   1
                   /* TEXT */
                 ),

package/lib/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/lib/components/hyStatus/index.js

@@ -0,0 +1,12 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var status = require('./status.vue.js');
+require('../../utils/index.js');
+var handler = require('../../utils/handler.js');
+
+const HyStatus = handler.withInstall(status.default);
+
+exports.HyStatus = HyStatus;
+exports.default = HyStatus;

package/lib/components/hyStatus/status.vue.js

@@ -0,0 +1,114 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var vue = require('vue');
+require('../index.js');
+var index = require('../hyIcon/index.js');
+
+import "./style/status.scss";
+
+const __default__ = vue.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 vue.openBlock(), vue.createElementBlock("div", { class: "inline-flex items-center gap-2 text-sm" }, [
+        __props.isOnline ? (vue.openBlock(), vue.createElementBlock(
+          vue.Fragment,
+          { key: 0 },
+          [
+            __props.type === "danger" ? (vue.openBlock(), vue.createBlock(vue.unref(index.HyIcon), {
+              key: 0,
+              "svg-name": "ops-list-device-id-off-line",
+              class: "!w-3 !h-3"
+            })) : (vue.openBlock(), vue.createBlock(vue.unref(index.HyIcon), {
+              key: 1,
+              "svg-name": "ops-list-device-id-on-line",
+              class: "!w-3 !h-3"
+            }))
+          ],
+          64
+          /* STABLE_FRAGMENT */
+        )) : (vue.openBlock(), vue.createElementBlock(
+          "div",
+          {
+            key: 1,
+            class: vue.normalizeClass(["w-2.5 h-2.5 flex items-center justify-center rounded-full flex-shrink-0 box-border", [shadowColor[__props.type]]])
+          },
+          [
+            vue.createElementVNode(
+              "div",
+              {
+                class: vue.normalizeClass(["w-1.5 h-1.5 rounded-full", [bgColor[__props.type]]])
+              },
+              null,
+              2
+              /* CLASS */
+            )
+          ],
+          2
+          /* CLASS */
+        )),
+        vue.createElementVNode(
+          "span",
+          {
+            class: vue.normalizeClass([color[__props.type]])
+          },
+          [
+            vue.renderSlot(_ctx.$slots, "default", {}, () => [
+              vue.createTextVNode(
+                vue.toDisplayString(__props.label),
+                1
+                /* TEXT */
+              )
+            ])
+          ],
+          2
+          /* CLASS */
+        )
+      ]);
+    };
+  }
+});
+
+exports.default = _sfc_main;

package/lib/components/hyTable/cpns/columnSelect.vue.js

@@ -36,7 +36,6 @@ const _sfc_main = {
   setup(__props, { expose: __expose, emit: __emit }) {
     const props = __props;
     const emits = __emit;
-    const { t } = useLocale.useLocale();
     const popoverRef = vue.useTemplateRef("popoverRef");
     const listRef = vue.useTemplateRef("listRef");
     const tableColumns = vue.ref([]);
@@ -46,6 +45,11 @@ const _sfc_main = {
         return total + (isShowColumn(column) ? 1 : 0);
       }, 0);
     });
+    const cannotDragged = vue.computed(() => {
+      return props.columns.reduce((total, column) => {
+        return total + (isShowColumn(column) && column.editable.lock ? 1 : 0);
+      }, 0);
+    });
     function isShowColumn(column) {
       return index.tableColumnShowHandler(column) && column.editable.edit;
     }
@@ -85,9 +89,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 {
@@ -97,11 +99,11 @@ const _sfc_main = {
     }
     function onConfirmHandler() {
       if (!checkedList.value.length && showColumnsLength.value === tableEditableColumns.value?.length) {
-        elementPlus.ElMessage.warning(t("table.theColumnsDisplayedInTheTableCannotBeLeftBlank"));
+        elementPlus.ElMessage.warning(useLocale.$t("table.theColumnsDisplayedInTheTableCannotBeLeftBlank"));
         return;
       }
       if (checkedList.value.length > 15) {
-        elementPlus.ElMessage.warning(t("table.maxColumnLimitTip"));
+        elementPlus.ElMessage.warning(useLocale.$t("table.maxColumnLimitTip"));
         return;
       }
       const editableObj = tableEditableColumns.value.reduce(
@@ -116,9 +118,7 @@ const _sfc_main = {
       closePopover();
     }
     function onClearHandler() {
-      const { columnsList, columnsEditablele } = index.tableColumnHandler(
-        props.originColumns
-      );
+      const { columnsList, columnsEditablele } = index.tableColumnHandler(props.originColumns);
       initColumnsInfo(columnsList, columnsEditablele);
       showReset.value = false;
     }
@@ -132,19 +132,14 @@ const _sfc_main = {
         animation: 150,
         onEnd(event) {
           const { oldIndex, newIndex } = event;
-          if (is.isEmpty(oldIndex) || is.isEmpty(newIndex) || oldIndex === newIndex)
-            return;
+          if (is.isEmpty(oldIndex) || is.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];
           }
@@ -180,7 +175,7 @@ const _sfc_main = {
         },
         {
           reference: vue.withCtx(() => [
-            vue.createElementVNode("div", { class: "h-[32px] flex items-center gap-[10px] clickBox px-3 rounded hover:bg-background-2" }, [
+            vue.createElementVNode("div", { class: "h-[32px] flex items-center gap-[10px] clickBox px-3 rounded hover:bg-background-2 box-border" }, [
               vue.createVNode(vue.unref(index$1.HyIcon), {
                 "svg-name": "ops-button-edit-column",
                 "class-name": "!w-3 !h-3"
@@ -188,7 +183,7 @@ const _sfc_main = {
               vue.createElementVNode(
                 "span",
                 null,
-                vue.toDisplayString(vue.unref(t)("table.editColumn")) + " \xB7 " + vue.toDisplayString(showColumnsLength.value),
+                vue.toDisplayString(vue.unref(useLocale.$t)("table.editColumn")) + " \xB7 " + vue.toDisplayString(showColumnsLength.value),
                 1
                 /* TEXT */
               )
@@ -200,7 +195,7 @@ const _sfc_main = {
                 vue.createElementVNode(
                   "span",
                   { class: "text-main font-bold" },
-                  vue.toDisplayString(vue.unref(t)("table.editColumn")),
+                  vue.toDisplayString(vue.unref(useLocale.$t)("table.editColumn")),
                   1
                   /* TEXT */
                 ),
@@ -210,7 +205,7 @@ const _sfc_main = {
                   onClick: closePopover
                 })
               ]),
-              vue.createElementVNode("div", { class: "flex items-center gap-1.5 px-4 py-2.5 text-xs text-theme" }, [
+              vue.createElementVNode("div", { class: "flex items-center gap-1.5 px-4 py-2.5 text-xs text-theme box-border" }, [
                 vue.createVNode(vue.unref(index$1.HyIcon), {
                   "svg-name": "dispatch-share1-prompt",
                   "class-name": "!w-3 !h-3"
@@ -223,9 +218,10 @@ const _sfc_main = {
                   "onUpdate:modelValue": ($event) => checkedList.value = $event
                 }, {
                   default: vue.withCtx(() => [
-                    vue.createElementVNode(
+                    cannotDragged.value > 0 ? (vue.openBlock(), vue.createElementBlock(
                       "div",
                       {
+                        key: 0,
                         class: vue.normalizeClass(["flex flex-col gap-1.5 leading-3 text-info", { "mb-1.5": tableEditableColumns.value.length > 0 }])
                       },
                       [
@@ -254,7 +250,7 @@ const _sfc_main = {
                       ],
                       2
                       /* CLASS */
-                    ),
+                    )) : vue.createCommentVNode("v-if", true),
                     vue.createCommentVNode(" \u53EF\u62D6\u62FD "),
                     vue.createElementVNode(
                       "div",
@@ -293,7 +289,7 @@ const _sfc_main = {
                   vue.createElementVNode(
                     "span",
                     null,
-                    vue.toDisplayString(vue.unref(t)("table.selectedNumberItems", [checkedList.value?.length || 0])),
+                    vue.toDisplayString(vue.unref(useLocale.$t)("table.selectedNumberItems", [checkedList.value?.length || 0])),
                     1
                     /* TEXT */
                   ),
@@ -304,7 +300,7 @@ const _sfc_main = {
                       class: "clickBox text-danger-2 ml-3",
                       onClick: onClearHandler
                     },
-                    vue.toDisplayString(vue.unref(t)("hy.reset")),
+                    vue.toDisplayString(vue.unref(useLocale.$t)("hy.reset")),
                     1
                     /* TEXT */
                   )) : vue.createCommentVNode("v-if", true)
@@ -320,7 +316,7 @@ const _sfc_main = {
                       }),
                       vue.createVNode(vue.unref(index$2.HyTooltip), {
                         "is-always": false,
-                        content: vue.unref(t)("table.tooManyFieldsWillAffectReadability"),
+                        content: vue.unref(useLocale.$t)("table.tooManyFieldsWillAffectReadability"),
                         class: "mr-2 text-auxiliary"
                       }, null, 8, ["content"])
                     ],
@@ -334,7 +330,7 @@ const _sfc_main = {
                   }, {
                     default: vue.withCtx(() => [
                       vue.createTextVNode(
-                        vue.toDisplayString(vue.unref(t)("hy.confirm")),
+                        vue.toDisplayString(vue.unref(useLocale.$t)("hy.confirm")),
                         1
                         /* TEXT */
                       )

package/lib/components/hyTable/cpns/columnSelectItem.vue.js

@@ -31,7 +31,6 @@ const _sfc_main = {
   setup(__props, { emit: __emit }) {
     const props = __props;
     const emits = __emit;
-    const { t } = useLocale.useLocale();
     function onClickHandler(column) {
       if (column.editable.lock) return;
       emits("checked", column);
@@ -82,7 +81,7 @@ const _sfc_main = {
               __props.checkMap.has(__props.column.prop) ? (vue.openBlock(), vue.createElementBlock(
                 "span",
                 { key: 0 },
-                vue.toDisplayString(vue.unref(t)("table.show")),
+                vue.toDisplayString(vue.unref(useLocale.$t)("table.show")),
                 1
                 /* TEXT */
               )) : (vue.openBlock(), vue.createElementBlock(
@@ -91,7 +90,7 @@ const _sfc_main = {
                   key: 1,
                   class: "text-info"
                 },
-                vue.toDisplayString(vue.unref(t)("table.notShown")),
+                vue.toDisplayString(vue.unref(useLocale.$t)("table.notShown")),
                 1
                 /* TEXT */
               )),
@@ -103,7 +102,7 @@ const _sfc_main = {
               }, [
                 vue.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"])) : vue.createCommentVNode("v-if", true)
             ])) : vue.createCommentVNode("v-if", true)
@@ -112,12 +111,12 @@ const _sfc_main = {
         default: vue.withCtx(() => [
           vue.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" },
             vue.toDisplayString(vue.unref(index.renderHeaderHandler)(__props.column)),
             1
             /* TEXT */
           ),
-          vue.createElementVNode("div", { class: "flex flex-col gap-3 px-4 pt-2.5 pb-4 text-main text-xs" }, [
+          vue.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 ? (vue.openBlock(), vue.createElementBlock(
               "div",
               { key: 0 },
@@ -129,7 +128,7 @@ const _sfc_main = {
               vue.createElementVNode(
                 "div",
                 { class: "text-auxiliary mb-1.5" },
-                vue.toDisplayString(vue.unref(t)("table.example")),
+                vue.toDisplayString(vue.unref(useLocale.$t)("table.example")),
                 1
                 /* TEXT */
               ),
@@ -142,7 +141,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"
                       },
                       vue.toDisplayString(item),
                       1

package/lib/components/hyTable/cpns/headerItem.vue.js

@@ -68,10 +68,10 @@ const _sfc_main = {
     return (_ctx, _cache) => {
       return columnSort.value.show ? (vue.openBlock(), vue.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)
       }, [
-        vue.createElementVNode("div", { class: "flex flex-col absolute top-1/2 -left-1 transform -translate-y-1/2 -translate-x-full" }, [
+        vue.createElementVNode("div", { class: "flex flex-col" }, [
           vue.createVNode(vue.unref(elementPlus.ElIcon), {
             size: "8",
             color: isSortActive(columnSort.value.prop, "asc") ? "rgba(var(--hy-theme))" : "rgba(var(--hy-auxiliary))",