windly-ui 1.0.5 → 1.0.6

package/dist/module.json

@@ -1,6 +1,6 @@
 {
   "name": "windly-ui",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "3.6.1"

package/dist/runtime/components/Table.d.vue.ts

@@ -1,5 +1,6 @@
 type Separator = "none" | "horizontal" | "vertical" | "cell";
 type Rounded = "none" | "sm" | "md" | "lg" | "xl";
+type Align = "left" | "center" | "right";
 type __VLS_Props = {
     flat?: boolean;
     bordered?: boolean;
@@ -8,6 +9,7 @@ type __VLS_Props = {
     hover?: boolean;
     rounded?: Rounded;
     separator?: Separator;
+    align?: Align;
     borderColor?: string;
     bgColor?: string;
 };
@@ -25,6 +27,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     rounded: Rounded;
     borderColor: string;
     separator: Separator;
+    align: Align;
     flat: boolean;
     bordered: boolean;
     striped: boolean;

package/dist/runtime/components/Table.vue

@@ -8,6 +8,7 @@ const props = defineProps({
   hover: { type: Boolean, required: false, default: true },
   rounded: { type: String, required: false, default: "md" },
   separator: { type: String, required: false, default: "horizontal" },
+  align: { type: String, required: false, default: "left" },
   borderColor: { type: String, required: false, default: "border-gray-200 dark:border-gray-700" },
   bgColor: { type: String, required: false, default: "bg-white dark:bg-gray-900" }
 });
@@ -21,26 +22,51 @@ const roundedClass = computed(() => {
   };
   return map[props.rounded];
 });
+const alignmentClass = computed(() => {
+  switch (props.align) {
+    case "center":
+      return "[&_:where(th)]:text-center [&_:where(td)]:text-center";
+    case "right":
+      return "[&_:where(th)]:text-right [&_:where(td)]:text-right";
+    default:
+      return "[&_:where(th)]:text-left [&_:where(td)]:text-left";
+  }
+});
+const isHex = (val) => val.startsWith("#");
+const wrapperStyle = computed(() => {
+  const style = {};
+  if (isHex(props.bgColor)) {
+    style.backgroundColor = props.bgColor;
+  }
+  if (props.bordered && isHex(props.borderColor)) {
+    style.borderColor = props.borderColor;
+  }
+  return style;
+});
 const wrapperClass = computed(() => [
   "w-full overflow-x-auto",
   roundedClass.value,
-  props.bordered ? `border ${props.borderColor}` : "",
+  props.bordered ? "border" : "",
+  props.bordered && !isHex(props.borderColor) ? props.borderColor : "",
   props.flat ? "shadow-none" : "shadow-sm",
-  props.bgColor
+  !isHex(props.bgColor) ? props.bgColor : ""
 ]);
+const separatorBorderClass = computed(
+  () => !isHex(props.borderColor) ? props.borderColor : ""
+);
 const separatorClass = computed(() => {
   switch (props.separator) {
     case "vertical":
       return [
         "[&_th]:border-r",
         "[&_td]:border-r",
-        props.borderColor
+        separatorBorderClass.value
       ];
     case "cell":
       return [
         "[&_th]:border",
         "[&_td]:border",
-        props.borderColor
+        separatorBorderClass.value
       ];
     case "none":
       return [];
@@ -48,21 +74,42 @@ const separatorClass = computed(() => {
     default:
       return [
         "[&_tr]:border-b",
-        props.borderColor
+        separatorBorderClass.value
       ];
   }
 });
+const spacingClass = computed(
+  () => props.dense ? [
+    "[&_:where(th)]:px-3",
+    "[&_:where(th)]:py-2",
+    "[&_:where(td)]:px-3",
+    "[&_:where(td)]:py-2"
+  ] : [
+    "[&_:where(th)]:px-4",
+    "[&_:where(th)]:py-3",
+    "[&_:where(td)]:px-4",
+    "[&_:where(td)]:py-3"
+  ]
+);
 const tableClass = computed(() => [
-  "w-full border-collapse",
+  "w-full border-collapse text-sm",
+  alignmentClass.value,
   separatorClass.value
 ]);
 const headerClass = computed(() => [
-  "bg-gray-50 dark:bg-gray-800"
+  "bg-gray-50 dark:bg-gray-800",
+  "text-gray-700 dark:text-gray-200",
+  "[&_:where(th)]:font-semibold",
+  "[&_:where(th)]:whitespace-nowrap",
+  spacingClass.value
 ]);
 const bodyClass = computed(() => [
-  props.striped ? "[&_tr:nth-child(even)]:bg-gray-50 dark:[&_tr:nth-child(even)]:bg-gray-800/40" : "",
-  props.hover ? "[&_tr:hover]:bg-gray-100 dark:[&_tr:hover]:bg-gray-700" : "",
-  props.dense ? "[&_td]:py-2 [&_th]:py-2" : "[&_td]:py-3 [&_th]:py-3"
+  "text-gray-900 dark:text-gray-100",
+  props.striped ? "[&_:where(tr:nth-child(even))]:bg-gray-50 dark:[&_:where(tr:nth-child(even))]:bg-gray-800/40" : "",
+  props.hover ? "[&_:where(tr:hover)]:bg-gray-100 dark:[&_:where(tr:hover)]:bg-gray-700/60" : "",
+  spacingClass.value,
+  "[&_:where(th)]:align-middle",
+  "[&_:where(td)]:align-middle"
 ]);
 const footerClass = computed(() => [
   "bg-gray-50 dark:bg-gray-900"
@@ -70,21 +117,15 @@ const footerClass = computed(() => [
 </script>
 
 <template>
-  <div :class="wrapperClass">
+  <div :class="wrapperClass" :style="wrapperStyle">
     <table :class="tableClass">
-      <thead
-        v-if="$slots.header"
-        :class="headerClass"
-      >
+      <thead v-if="$slots.header" :class="headerClass">
         <slot name="header" />
       </thead>
       <tbody :class="bodyClass">
         <slot />
       </tbody>
-      <tfoot
-        v-if="$slots.footer"
-        :class="footerClass"
-      >
+      <tfoot v-if="$slots.footer" :class="footerClass">
         <slot name="footer" />
       </tfoot>
     </table>

package/dist/runtime/components/Table.vue.d.ts

@@ -1,5 +1,6 @@
 type Separator = "none" | "horizontal" | "vertical" | "cell";
 type Rounded = "none" | "sm" | "md" | "lg" | "xl";
+type Align = "left" | "center" | "right";
 type __VLS_Props = {
     flat?: boolean;
     bordered?: boolean;
@@ -8,6 +9,7 @@ type __VLS_Props = {
     hover?: boolean;
     rounded?: Rounded;
     separator?: Separator;
+    align?: Align;
     borderColor?: string;
     bgColor?: string;
 };
@@ -25,6 +27,7 @@ declare const __VLS_base: import("vue").DefineComponent<__VLS_Props, {}, {}, {},
     rounded: Rounded;
     borderColor: string;
     separator: Separator;
+    align: Align;
     flat: boolean;
     bordered: boolean;
     striped: boolean;

package/dist/runtime/docs/index.vue

@@ -1850,6 +1850,29 @@
       <!-- Table-->
       <DocSection title="UITable" sub-title="Data grid / table with rows, columns, and sorting.">
         <DocComponent title="Basic Table" caption="A simple table with headers and rows.">
+          <UITable bordered striped borderColor="purple-500" rounded="xl" separator="none">
+            <template #header>
+              <tr class="text-purple-600 bg-purple-100 dark:bg-purple-900 dark:text-purple-400">
+                <th>User</th>
+                <th>Email</th>
+                <th>Role</th>
+                <th>Status</th>
+                <th class="text-right">Actions</th>
+              </tr>
+            </template>
+
+            <tr v-for="user in users" :key="user.id">
+              <td>{{ user.name }}</td>
+              <td>{{ user.email }}</td>
+              <td>{{ user.role }}</td>
+              <td>
+                <UIBadge :color="user.active ? 'green-400' : 'red-400'" />
+              </td>
+              <td class="text-right">
+                <UIButton dense size="sm" label="Edit" color="amber-300" />
+              </td>
+            </tr>
+          </UITable>
           <UITable bordered>
             <tr>
               <th class="px-4 py-3 text-left">Name</th>
@@ -2529,6 +2552,64 @@ const breadcrumbs = ref([
     caption: "Current page"
   }
 ]);
+const users = [
+  {
+    id: 1,
+    name: "John Doe",
+    email: "john.doe@example.com",
+    role: "Admin",
+    active: true
+  },
+  {
+    id: 2,
+    name: "Jane Smith",
+    email: "jane.smith@example.com",
+    role: "User",
+    active: false
+  },
+  {
+    id: 3,
+    name: "Michael Johnson",
+    email: "michael.johnson@example.com",
+    role: "Editor",
+    active: true
+  },
+  {
+    id: 4,
+    name: "Emily Davis",
+    email: "emily.davis@example.com",
+    role: "User",
+    active: true
+  },
+  {
+    id: 5,
+    name: "David Wilson",
+    email: "david.wilson@example.com",
+    role: "Moderator",
+    active: false
+  },
+  {
+    id: 6,
+    name: "Sarah Brown",
+    email: "sarah.brown@example.com",
+    role: "Admin",
+    active: true
+  },
+  {
+    id: 7,
+    name: "Chris Taylor",
+    email: "chris.taylor@example.com",
+    role: "User",
+    active: false
+  },
+  {
+    id: 8,
+    name: "Olivia Martinez",
+    email: "olivia.martinez@example.com",
+    role: "Editor",
+    active: true
+  }
+];
 const step = ref(0);
 </script>
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "windly-ui",
-  "version": "1.0.5",
+  "version": "1.0.6",
   "type": "module",
   "main": "./dist/module.mjs",
   "exports": {