task-table header & pagination themes style perf

Author: akfdwjx

src/Skeleton.vue

@@ -198,7 +198,7 @@ function exContextMenuArg(e: MouseEvent) {
       <div v-show="currentLayoutId === layout.id" :id="`iw-tt-layout-${layout.id}`" class="iw-tt-layout">
         <div
           v-if="!tableConf.mini && (layout.sort || layout.filter)"
-          class="iw-tt-toolbar flex items-center h-[40px] p-0.5"
+          class="iw-tt-toolbar flex items-center px-0.5 py-[10px]"
         >
           <RowSortSettingComp v-if="layout.sort" :layout-id="layout.id" :sort="layout.sort" :columns-conf="getCurrentLayoutColumnConf()" />
           <div class="iw-divider iw-divider-horizontal m-0.5" />

src/assets/reset.css

@@ -19,12 +19,18 @@
   background-color: var(--sys-primary);
   border-color: var(--sys-primary);
 }
+
+.iw_tt_add_layout:hover {
+  background-color: var(--sys-primary);
+  color: #fff;
+}
+
 /* button  end*/
 
 /* tabs start*/
 .iw-tt
   .iw-tabs-boxed
-  :is(.iw-tab-active, [aria-selected='true']):not(.iw-tab-disabled):not(
+  :is(.iw-tab-active, [aria-selected="true"]):not(.iw-tab-disabled):not(
     [disabled]
   ),
 .iw-tabs-boxed :is(input:checked) {
@@ -34,7 +40,7 @@
 /* tabs end*/
 /* switch start*/
 .iw-tt .iw-toggle-primary:checked,
-.iw-toggle-primary[aria-checked='true'] {
+.iw-toggle-primary[aria-checked="true"] {
   background-color: var(--sys-primary);
   border-color: var(--sys-primary);
 }

src/components/function/Pagination.vue

@@ -177,23 +177,24 @@ function changePageSizeStyle(e: Event) {
     target.style.borderColor = ''
   }
   else {
-    target.style.borderColor = 'oklch(var(--in))'
+    target.style.borderColor = 'var(--sys-primary)'
     arrowEl.style.transform = 'rotate(180deg)'
   }
 }
 
 function handleJump(e: Event) {
   const value = Number((e.target as HTMLInputElement).value)
   const total = getTotalPage()
-  if(!value) return
+  if (!value)
+    return
   let jumpVal = 1
-  if(value>0 &&value<total) {
-    jumpVal=value
+  if (value > 0 && value < total) {
+    jumpVal = value
   }
-  else if(value>=total){
+  else if (value >= total) {
     jumpVal = total
   }
-  else if(value<1){
+  else if (value < 1) {
     jumpVal = 1
   }
   setCurrentPage(jumpVal)
@@ -216,7 +217,7 @@ function handleJump(e: Event) {
     <button
       v-for="page in getShowPages()"
       :key="page"
-      :class="`flex justify-center px-3 ml-2 py-1 w-[30px] h-[30px] rounded transition-all border-none ${page === getCurrentPage() ? 'text-[oklch(var(--in))]' : ''}`"
+      :class="`flex justify-center px-3 ml-2 py-1 w-[30px] h-[30px] rounded transition-all border-none ${page === getCurrentPage() ? 'text-[var(--sys-primary)]' : ''}`"
       :disabled="page === getCurrentPage()"
       @click="setCurrentPage(page)"
     >
@@ -227,7 +228,7 @@ function handleJump(e: Event) {
         ...
       </div>
       <button
-        :class="`flex justify-center px-3 ml-2 py-1 w-[30px] h-[30px] rounded transition-all border-none ${getTotalPage() === getCurrentPage() ? 'text-[oklch(var(--in))]' : ''}`"
+        :class="`flex justify-center px-3 ml-2 py-1 w-[30px] h-[30px] rounded transition-all border-none ${getTotalPage() === getCurrentPage() ? 'text-[var(--sys-primary)]' : ''}`"
         @click="setCurrentPage(getTotalPage())"
       >
         {{ getTotalPage() }}
@@ -239,13 +240,13 @@ function handleJump(e: Event) {
     <button v-if="getCurrentPage() < getTotalPage() - 1" class="iw-btn iw-btn-ghost px-1 ml-1 iw-btn-xs" @click="setCurrentPage(getTotalPage())">
       <i :class="iconSvg.LAST" />
     </button>
-    <span class="mx-2">{{ $t('function.pagination.jump')}}</span>
-    <input type="number" class="iw-input iw-input-bordered iw-input-xs rounded-sm w-10" :value="getCurrentPage()" @keyup.enter="handleJump" @blur="handleJump"  />
+    <span class="mx-2">{{ $t('function.pagination.jump') }}</span>
+    <input type="number" class="iw-input iw-input-bordered iw-input-xs rounded-sm w-10" :value="getCurrentPage()" @keyup.enter="handleJump" @blur="handleJump">
     <MenuComp ref="fetchNumberSelectCompRef">
       <div
         v-for="number in getActualSlice().fetchNumbers" :key="number"
         class="p-2 text-center transition-all cursor-pointer rounded hover:bg-gray-100"
-        :class="`${number === getActualSlice().fetchNumber ? 'text-[oklch(var(--in))]' : ''}`"
+        :class="`${number === getActualSlice().fetchNumber ? 'text-[var(--sys-primary)]' : ''}`"
         @click="setFetchNumber(number)"
       >
         {{ $t('function.pagination.pageSize', { number }) }}

src/components/function/TableHeaderItem.vue

@@ -147,7 +147,7 @@ onMounted(() => {
       <div class="iw-dropdown">
         <div
           tabindex="0" role="button"
-          class="bg-white iw-tt-header__item iw-tab flex flex-nowrap border-none hover:bg-neutral-400 hover:text-white transition-all"
+          class="bg-white iw-tt-header__item iw-tab iw_tt_add_layout flex flex-nowrap border-none transition-all"
         >
           <i :class="`${iconSvg.NEW}`" class="text-lg" />
         </div>