@antify/ui-module 1.3.0 → 1.5.0

package/src/runtime/components/table/AntTable.vue

@@ -95,81 +95,98 @@ function rowClick(elem: Record<string, unknown>): void {
         :class="{'h-full': data.length === 0 && !_loading}"
       >
         <thead class="bg-neutral-100 sticky top-0 z-10">
-        <tr>
-          <slot name="headerFirstCell"/>
-
-          <template v-for="(header, index) in _headers">
-            <AntTh
-              v-if="!_showLightVersion || (_showLightVersion && header.lightVersion)"
-              :key="`table-header-${header.identifier}-${index}`"
-              :header="header"
-              @sort="sortTable"
-            >
-              <template  #headerContent>
-                <slot name="headerContent" v-bind="header"/>
-              </template>
-            </AntTh>
-          </template>
-
-          <slot name="headerLastCell"></slot>
-        </tr>
+          <tr>
+            <slot name="headerFirstCell" />
+
+            <template v-for="(header, index) in _headers">
+              <AntTh
+                v-if="!_showLightVersion || (_showLightVersion && header.lightVersion)"
+                :key="`table-header-${header.identifier}-${index}`"
+                :header="header"
+                @sort="sortTable"
+              >
+                <template #headerContent>
+                  <slot
+                    name="headerContent"
+                    v-bind="header"
+                  />
+                </template>
+              </AntTh>
+            </template>
+
+            <slot name="headerLastCell"></slot>
+          </tr>
         </thead>
 
         <tbody class="bg-white relative">
-        <!-- TODO:: Add some kind of virtual list for very large tree data (or required pagination??) -->
-        <tr
-          v-for="(elem, index) in data"
-          :key="`table-row-${elem[rowKey]}-${index}`"
-          :id="elem[rowKey] as string"
-          class="transition-all"
-          :class="{
-            'bg-primary-300 text-primary-300-font': elem === selected,
-            'bg-neutral-50 text-neutral-50-font': elem !== selected && index % 2 === 0,
-            'bg-neutral-100 text-neutral-100-font': elem !== selected && index % 2 !== 0,
-            'cursor-pointer': selectableRows
-          }"
-        >
-          <slot name="rowFirstCell" v-bind="{ elem }"/>
-
-          <template v-for="(header, index) in _headers">
-            <AntTd
-              v-if="!_showLightVersion || (_showLightVersion && header.lightVersion)"
-              :header="header"
-              :element="elem"
-              :align="header.align"
-              :key="`table-cell-${header.identifier}-${index}`"
-              @click="rowClick(elem)"
-            >
-              <template #beforeCellContent="props">
-                <slot name="beforeCellContent" v-bind="props"/>
-              </template>
-
-              <template #cellContent="props">
-                <slot name="cellContent" v-bind="props"/>
-              </template>
-
-              <template #afterCellContent="props">
-                <slot name="afterCellContent" v-bind="props"/>
-              </template>
-            </AntTd>
-          </template>
-
-          <slot name="rowLastCell" v-bind="{ elem }"/>
-        </tr>
-
-        <tr v-if="data.length <= 0 && !_loading">
-          <td
-            colspan="100"
-            class="w-full h-full py-2 text-center text-neutral-50-font text-lg"
+          <!-- TODO:: Add some kind of virtual list for very large tree data (or required pagination??) -->
+          <tr
+            v-for="(elem, index) in data"
+            :id="elem[rowKey] as string"
+            :key="`table-row-${elem[rowKey]}-${index}`"
+            class="transition-all"
+            :class="{
+              'bg-primary-300 text-primary-300-font': elem === selected,
+              'bg-white text-for-white-bg-font': elem !== selected && index % 2 === 0,
+              'bg-neutral-100 text-neutral-100-font': elem !== selected && index % 2 !== 0,
+              'cursor-pointer': selectableRows
+            }"
           >
-            <slot name="emptyState">
-              <div class="flex items-center flex-col">
-                <span class="font-semibold">We couldn't find any entry</span>
-              </div>
-            </slot>
-          </td>
-        </tr>
-
+            <slot
+              name="rowFirstCell"
+              v-bind="{ elem }"
+            />
+
+            <template v-for="(header, index) in _headers">
+              <AntTd
+                v-if="!_showLightVersion || (_showLightVersion && header.lightVersion)"
+                :key="`table-cell-${header.identifier}-${index}`"
+                :header="header"
+                :element="elem"
+                :align="header.align"
+                @click="rowClick(elem)"
+              >
+                <template #beforeCellContent="props">
+                  <slot
+                    name="beforeCellContent"
+                    v-bind="props"
+                  />
+                </template>
+
+                <template #cellContent="props">
+                  <slot
+                    name="cellContent"
+                    v-bind="props"
+                  />
+                </template>
+
+                <template #afterCellContent="props">
+                  <slot
+                    name="afterCellContent"
+                    v-bind="props"
+                  />
+                </template>
+              </AntTd>
+            </template>
+
+            <slot
+              name="rowLastCell"
+              v-bind="{ elem }"
+            />
+          </tr>
+
+          <tr v-if="data.length <= 0 && !_loading">
+            <td
+              colspan="100"
+              class="w-full h-full py-2 text-center text-for-white-bg-font text-lg"
+            >
+              <slot name="emptyState">
+                <div class="flex items-center flex-col">
+                  <span class="font-semibold">We couldn't find any entry</span>
+                </div>
+              </slot>
+            </td>
+          </tr>
         </tbody>
       </table>
     </div>
@@ -178,7 +195,10 @@ function rowClick(elem: Record<string, unknown>): void {
       v-if="data.length > 0 && _loading"
       class="absolute bg-opacity-50 w-full top-0 bottom-0 bg-neutral-300 flex items-center justify-center"
     >
-      <AntSpinner class="!w-24 !h-24" :color-type="ColorType.primary"/>
+      <AntSpinner
+        class="!w-24 !h-24"
+        :color-type="ColorType.primary"
+      />
     </div>
 
     <div
@@ -186,7 +206,9 @@ function rowClick(elem: Record<string, unknown>): void {
       class="absolute bg-opacity-50 w-full top-[40px] bottom-0 bg-neutral-300 flex items-center justify-center"
     >
       <AntSkeleton
-        v-model="_loading" absolute/>
+        v-model="_loading"
+        absolute
+      />
     </div>
   </div>
 </template>

package/src/runtime/components/table/AntTableSortButton.vue

@@ -16,11 +16,23 @@ withDefaults(
 
 <template>
   <button
-    class="bg-neutral-50 text-neutral-50-font rounded h-[26px] w-[26px] flex items-center justify-center"
+    class="bg-white text-for-white-bg-font rounded h-[26px] w-[26px] flex items-center justify-center"
     @click="$emit('sortClick')"
   >
-    <AntIcon v-if="sortDirection === AntTableSortDirection.asc" :icon="faAngleDown" :size="IconSize.sm"/>
-    <AntIcon v-if="sortDirection === AntTableSortDirection.desc" :icon="faAngleUp" :size="IconSize.sm"/>
-    <AntIcon v-if="sortDirection === AntTableSortDirection.neutral" :icon="faMinus" :size="IconSize.sm"/>
+    <AntIcon
+      v-if="sortDirection === AntTableSortDirection.asc"
+      :icon="faAngleDown"
+      :size="IconSize.sm"
+    />
+    <AntIcon
+      v-if="sortDirection === AntTableSortDirection.desc"
+      :icon="faAngleUp"
+      :size="IconSize.sm"
+    />
+    <AntIcon
+      v-if="sortDirection === AntTableSortDirection.neutral"
+      :icon="faMinus"
+      :size="IconSize.sm"
+    />
   </button>
 </template>

package/src/runtime/components/tabs/AntTabItem.vue

@@ -52,13 +52,13 @@ const containerClasses = computed(() => {
     [ColorType.danger]: 'text-danger-500 border-danger-500',
   };
   const notActiveVariants: Record<ColorType, string> = {
-    [ColorType.base]: 'text-neutral-50-font border-neutral-50',
+    [ColorType.base]: 'text-for-white-bg-font border-white',
     [ColorType.warning]: 'text-warning-500',
     [ColorType.danger]: 'text-danger-500',
   };
 
   return {
-    'p-2.5 hover:cursor-pointer text-center flex items-center justify-center gap-2.5 bg-neutral-50 transition-[background-color] relative': true,
+    'p-2.5 hover:cursor-pointer text-center flex items-center justify-center gap-2.5 bg-white transition-[background-color] relative': true,
     'grow': props.expanded,
     [variants[props.colorType]]: true,
     [activeVariants[props.colorType]]: _active.value,
@@ -98,7 +98,7 @@ const iconColor = computed(() => {
       <AntIcon
         v-if="icon"
         :icon="icon"
-        :color="_active ? 'text-primary-500' : 'text-neutral-50-font'"
+        :color="_active ? 'text-primary-500' : 'text-for-white-bg-font'"
       />
     </slot>
 
@@ -110,6 +110,9 @@ const iconColor = computed(() => {
       :color="iconColor"
     />
 
-    <div v-if="_active" :class="borderBoxClasses" />
+    <div
+      v-if="_active"
+      :class="borderBoxClasses"
+    />
   </component>
 </template>