perf: update table style

Author: ibuler

README_PACK.md

@@ -66,13 +66,7 @@ export default defineAppConfig({
     dropdownMenu: {
       slots: {
         content: "w-(--reka-dropdown-menu-trigger-width) p-1",
-        item: "mx-0.5 px-3 py-2 rounded-md transition-colors duration-150 data-[state=open]:bg-primary/10 data-[state=checked]:bg-primary/10",
-        itemLabel:
-          "group-data-[state=checked]:text-primary group-data-highlighted:text-primary group-data-[state=open]:text-primary",
-        itemLeadingIcon:
-          "group-data-[state=checked]:text-primary group-data-highlighted:!text-primary group-data-[state=open]:!text-primary",
-        itemTrailingIcon:
-          "group-data-[state=checked]:text-primary group-data-highlighted:text-primary group-data-[state=open]:text-primary"
+        item: "mx-0.5 px-3 py-2 rounded-md transition-colors duration-150",
       }
     },
     navigationMenu: {

preview.md

@@ -13,8 +13,8 @@
 :root {
   --ui-color-primary-500: #1ab394;
   --ui-color-elevated-500: #303237;
-  --ui-color-secondary-500: #141419;
-  --ui-color-neutral-100: #d1d1d1;
+  --ui-color-secondary-500: #7e7e7e;
+  --ui-color-neutral-100: #d8d8d8;
   --el-font-family: var(--font-sans);
   --bg-hover-light: rgba(60, 60, 60, 0.1);
   --bg-hover-dark: rgba(0, 0, 0, 0.3);

ui/app.config.ts

@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import type { AssetItem } from "~/types";
 import type { TableColumn } from "@nuxt/ui";
+import { UCheckbox, UButton } from "#components";
 import { h, resolveComponent } from "vue";
 
 interface MenuItem {
@@ -160,6 +161,25 @@ function cancelRename() {
 }
 
 const columns: TableColumn<AssetItem>[] = [
+  {
+    id: 'select',
+    header: ({ table }) =>
+      h(UCheckbox, {
+        modelValue: table.getIsSomePageRowsSelected()
+          ? 'indeterminate'
+          : table.getIsAllPageRowsSelected(),
+        'onUpdate:modelValue': (value: boolean | 'indeterminate') =>
+          table.toggleAllPageRowsSelected(!!value),
+        'aria-label': 'Select all'
+      }),
+    cell: ({ row }) =>
+      h(UCheckbox, {
+        modelValue: row.getIsSelected(),
+        'onUpdate:modelValue': (value: boolean | 'indeterminate') => row.toggleSelected(!!value),
+        'aria-label': 'Select row'
+      }),
+    meta: { class: { th: "w-[50px]", td: "w-[50px]" } }
+  },
   {
     accessorKey: "assetName",
     header: () => t("AssetCard.AssetName"),
@@ -191,7 +211,7 @@ const columns: TableColumn<AssetItem>[] = [
         row.original.name
       );
     },
-    meta: { class: { th: "w-1/5", td: "w-1/5" } }
+    meta: { class: { th: "max-w-[300px]", td: "max-w-[300px]" } }
   },
   {
     accessorKey: "address",
@@ -205,7 +225,7 @@ const columns: TableColumn<AssetItem>[] = [
         },
         row.original.address
       ),
-    meta: { class: { th: "w-1/5", td: "w-1/5" } }
+    meta: { class: { th: "max-w-[300px]", td: "max-w-[300px]" } }
   },
   {
     id: "user",
@@ -221,23 +241,27 @@ const columns: TableColumn<AssetItem>[] = [
         userText
       );
     },
-    meta: { class: { th: "w-1/5", td: "w-1/5" } }
+    meta: { class: { th: "w-[250px]", td: "w-[250px]" } }
   },
   {
     id: "protocol",
     header: () => t("AssetCard.Protocol"),
     cell: ({ row }) => {
       const protocolText = displayProtocol(row.original.id, row.original.permedProtocols!);
-      return h(
-        "div",
-        {
-          class: "truncate",
-          title: protocolText
-        },
+      if (!protocolText || protocolText === "-") {
+        return h("div", { class: "truncate" }, "-");
+      }
+       const color = {
+        paid: 'success' as const,
+        failed: 'error' as const,
+        refunded: 'neutral' as const
+      }[row.getValue('status') as string]
+
+      return h(UButton, { size: 'xs', class: 'rounded-sm', variant: 'subtle', color: 'primary' }, () =>
         protocolText
-      );
+      )
     },
-    meta: { class: { th: "w-1/5", td: "w-1/5" } }
+    meta: { class: { th: "w-[150px]", td: "w-[150px]" } }
   },
   {
     id: "actions",
@@ -248,14 +272,15 @@ const columns: TableColumn<AssetItem>[] = [
       return h(
         UFieldGroup,
         {
-          size: "sm",
-          class: "inline-flex rounded-md shadow-sm"
+          size: "xs",
+          class: "inline-flex rounded-sm text-right"
         },
         {
           default: () => [
             h(UButton, {
               color: "primary",
               variant: "outline",
+              class: "rounded-sm",
               label: t("Common.Connect"),
               onClick: () => emits("connectAsset", row.original)
             }),
@@ -275,6 +300,7 @@ const columns: TableColumn<AssetItem>[] = [
                     icon: "i-lucide-ellipsis",
                     color: "primary",
                     variant: "outline",
+                    class: "rounded-sm",
                     "data-table-context-button": true
                   })
               }
@@ -283,7 +309,7 @@ const columns: TableColumn<AssetItem>[] = [
         }
       );
     },
-    meta: { class: { th: "w-1/5", td: "w-1/5" } }
+    meta: { class: { th: "w-[260px] text-center", td: "w-[260px] text-center" } }
   }
 ];
 </script>
@@ -302,11 +328,11 @@ const columns: TableColumn<AssetItem>[] = [
         :data="props.items"
         :columns="columns"
         :empty="t('Common.NoData')"
-        class="w-full table-fixed"
+        class="w-full table-auto"
         :ui="{
-          tr: 'hover:bg-muted/50',
+          tr: 'hover:bg-muted/50 ',
           th: 'whitespace-nowrap text-xs sm:text-sm',
-          td: 'whitespace-nowrap text-xs sm:text-sm'
+          td: 'whitespace-nowrap text-xs sm:text-sm py-2'
         }"
       ></UTable>
     </div>

ui/assets/css/main.css

@@ -129,7 +129,6 @@ function handleSpecialAccount(v: string) {
           trailingIcon
         }"
         icon="mingcute:plugin-line"
-        variant="subtle"
         class="w-full"
       />
     </UFormField>
@@ -142,7 +141,6 @@ function handleSpecialAccount(v: string) {
           trailingIcon
         }"
         icon="lucide:user-round"
-        variant="subtle"
         class="w-full"
       />
     </UFormField>

ui/components/Card/TableCard/tableCard.vue

@@ -4,10 +4,12 @@ withDefaults(
     open: boolean;
     title?: string;
     description?: string;
+    overlay?: boolean;
   }>(),
   {
     title: "",
-    description: ""
+    description: "",
+    overlay: false
   }
 );
 
@@ -52,6 +54,7 @@ const handleContextMenu = async (e: Event) => {
       :ui="{ footer: 'justify-end', description: 'text-xs-plus' }"
       :description="description"
       :title="title"
+      :overlay="overlay"
       @update:open="updateOpen"
     >
       <template #body>