@redseed/redseed-ui-vue3 6.4.5 → 6.4.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redseed/redseed-ui-vue3",
-  "version": "6.4.5",
+  "version": "6.4.7",
   "description": "RedSeed UI Vue 3 components",
   "main": "index.js",
   "repository": "https://github.com/redseedtraining/redseed-ui",

package/src/components/Table/Table.vue

@@ -21,6 +21,10 @@ const props = defineProps({
             return value.every(row => typeof row === 'object' && row.id && (row.clickable === undefined || typeof row.clickable === 'boolean'))
         },
     },
+    fixedColumns: {
+        type: Boolean,
+        default: false,
+    },
     clickableRows: {
         type: Boolean,
         default: false,
@@ -68,7 +72,13 @@ const props = defineProps({
     </template>
 
     <div v-if="!!rows.length"
-        class="rsui-table"
+        :class="[
+            'rsui-table',
+            {
+                'rsui-table--auto': !fixedColumns,
+                'rsui-table--fixed': fixedColumns,
+            },
+        ]"
     >
         <div class="rsui-table__container">
             <table>
@@ -78,6 +88,8 @@ const props = defineProps({
                             :key="column.key"
                             scope="col"
                             :alignment="column?.alignment"
+                            :fixed="fixedColumns"
+                            :width="column?.width"
                             :sort="column?.sort"
                             @sort="$emit('sort', { column: { ...column, ...$event } })"
                         >
@@ -99,6 +111,7 @@ const props = defineProps({
                         <Td v-for="column in columns"
                             :key="column.key"
                             :alignment="column?.alignment"
+                            :fixed="fixedColumns"
                         >
                             <slot :name="'td-' + column.key"
                                 :row="row"
@@ -125,8 +138,20 @@ const props = defineProps({
 .rsui-table {
     @apply w-full;
 
+    &--auto {
+        table {
+            @apply table-auto;
+        }
+    }
+
+    &--fixed {
+        table {
+            @apply table-fixed;
+        }
+    }
+
     table {
-        @apply w-full border-collapse table-auto;
+        @apply w-full border-collapse;
 
         thead {
             tr {
@@ -134,7 +159,7 @@ const props = defineProps({
 
                 th {
                     @apply bg-background-disabled;
-                    @apply font-semibold text-xs leading-5 text-text-secondary hover:text-text-primary;
+                    @apply font-semibold text-xs leading-6 text-text-secondary hover:text-text-primary;
                 }
             }
         }

package/src/components/Table/Td.vue

@@ -5,6 +5,10 @@ const props = defineProps({
         default: 'left',
         validator: value => ['left', 'center', 'right'].includes(value),
     },
+    fixed: {
+        type: Boolean,
+        default: false,
+    },
 })
 </script>
 
@@ -14,6 +18,8 @@ const props = defineProps({
     {
         'rsui-td--center': alignment === 'center',
         'rsui-td--right': alignment === 'right',
+        'rsui-td--auto': !fixed,
+        'rsui-td--fixed': fixed,
     },
 ]">
     <slot></slot>
@@ -21,8 +27,8 @@ const props = defineProps({
 </template>
 <style lang="scss" scoped>
 .rsui-td {
-    @apply text-left whitespace-nowrap;
-    @apply py-3 px-6 text-sm leading-6 text-text-secondary;
+    @apply text-left;
+    @apply py-3 px-5 text-sm leading-6 text-text-secondary;
 
     &--center {
         @apply text-center;
@@ -30,5 +36,13 @@ const props = defineProps({
     &--right {
         @apply text-right;
     }
+
+    &--auto {
+        @apply whitespace-nowrap;
+    }
+
+    &--fixed {
+        @apply whitespace-normal overflow-scroll overscroll-contain;
+    }
 }
 </style>

package/src/components/Table/Th.vue

@@ -8,6 +8,15 @@ const props = defineProps({
         default: 'left',
         validator: value => ['left', 'center', 'right'].includes(value),
     },
+    fixed: {
+        type: Boolean,
+        default: false,
+    },
+    width: {
+        type: String,
+        default: 'md',
+        validator: value => ['xs', 'sm', 'md', 'lg', 'xl'].includes(value),
+    },
     sort: {
         type: [Boolean, String],
         default: false,
@@ -46,6 +55,13 @@ function handleSort() {
         {
             'rsui-th--center': alignment === 'center',
             'rsui-th--right': alignment === 'right',
+            'rsui-th--auto': !fixed,
+            'rsui-th--fixed': fixed,
+            'rsui-th--xs': fixed && width === 'xs',
+            'rsui-th--sm': fixed && width === 'sm',
+            'rsui-th--md': fixed && width === 'md',
+            'rsui-th--lg': fixed && width === 'lg',
+            'rsui-th--xl': fixed && width === 'xl',
             'rsui-th--sortable': sortable,
         },
     ]"
@@ -75,29 +91,59 @@ function handleSort() {
 </template>
 <style lang="scss" scoped>
 .rsui-th {
-    @apply text-left whitespace-nowrap;
-    @apply py-3 px-6 text-sm leading-6 text-text-secondary;
+    @apply text-left;
+    @apply py-3 px-5 text-sm leading-6 text-text-secondary;
 
     &--center {
         @apply text-center;
     }
+
     &--right {
         @apply text-right;
     }
+
+    &--auto {
+        @apply whitespace-nowrap;
+    }
+
+    &--fixed {
+        @apply whitespace-normal break-all;
+    }
+
+    &--xs {
+        @apply w-28;
+    }
+
+    &--sm {
+        @apply w-40;
+    }
+
+    &--md {
+        @apply w-56;
+    }
+
+    &--lg {
+        @apply w-72;
+    }
+
+    &--xl {
+        @apply w-96;
+    }
+
     &--sortable {
         @apply cursor-pointer;
     }
 
     &__content {
-        @apply inline-flex items-center gap-1;
+        @apply inline-flex gap-1;
     }
 
     &__sort {
-        @apply shrink-0;
+        @apply shrink-0 pt-1.5;
     }
 
     &__sort-icon {
-        @apply size-3 transition-all;
+        @apply size-3.5 transition-all;
 
         &--desc {
             @apply rotate-180;