@redseed/redseed-ui-vue3 6.4.2 → 6.4.3

package/docs/05-text-components.md

@@ -9,13 +9,15 @@ Text components provide consistent typography and text formatting across the app
 **Implementation:**
 ```vue
 <template>
-  <BodyText>
+  <BodyText :lines="3">
     This is the main content text that will be displayed with consistent styling,
     proper line height, and appropriate spacing for readability.
   </BodyText>
 </template>
 ```
 
+`lines` determines how many lines of text are visible before the content is clamped using Tailwind's `line-clamp-{n}` utility. Values from **1** to **6** are supported.
+
 ### ReadMore
 **When to use:** For long text content that should be truncated with a "read more" expand/collapse functionality.
 **Implementation:**

package/package.json

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

package/src/components/HTML/BodyText.vue

@@ -1,13 +1,32 @@
 <script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+    lines: {
+        type: Number,
+        default: null,
+    },
+})
+
+const clampClasses = {
+    1: 'line-clamp-1',
+    2: 'line-clamp-2',
+    3: 'line-clamp-3',
+    4: 'line-clamp-4',
+    5: 'line-clamp-5',
+    6: 'line-clamp-6',
+}
+
+const clampClass = computed(() => clampClasses[props.lines] || null)
 </script>
 <template>
-<div class="rsui-body-text">
-    <slot></slot>
-</div>
+    <div class="rsui-body-text" :class="clampClass">
+        <slot></slot>
+    </div>
 </template>
 <style lang="scss" scoped>
 .rsui-body-text {
-    @apply text-base text-rsui-grey-900;
-    @apply *:text-base *:text-rsui-grey-900;
+    @apply text-base text-text-primary;
+    @apply *:text-base *:text-text-primary;
 }
-</style>
+</style>

package/src/components/Link/LinkSlot.vue

@@ -6,6 +6,10 @@ defineOptions({
 })
 
 const props = defineProps({
+    sm: {
+        type: Boolean,
+        default: false,
+    },
     md: {
         type: Boolean,
         default: false,
@@ -22,12 +26,13 @@ const props = defineProps({
 
 defineEmits(['click'])
 
-const defaultSize = computed(() => !props.md && !props.lg)
+const defaultSize = computed(() => !props.sm && !props.md && !props.lg)
 
 const linkSlotClass = computed(() => [
     'rsui-link-slot',
     {
         // link sizes
+        'rsui-link-slot--sm': props.sm,
         'rsui-link-slot--md': props.md,
         'rsui-link-slot--lg': props.lg || defaultSize.value,
         // link disabled state
@@ -67,6 +72,13 @@ const linkLabelClass = computed(() => [
     &--disabled {
         @apply opacity-30 cursor-default pointer-events-none;
     }
+    // modifier sm size
+    &--sm {
+        @apply text-sm leading-5;
+        :deep(svg) {
+            @apply size-5;
+        }
+    }
     // modifier md size
     &--md {
         @apply text-base leading-6;

package/src/components/Table/Table.vue

@@ -18,7 +18,7 @@ const props = defineProps({
         default: () => [],
         validator: value => {
             if (value.length === 0) return true
-            return value.every(row => typeof row === 'object' && row.id)
+            return value.every(row => typeof row === 'object' && row.id && (row.clickable === undefined || typeof row.clickable === 'boolean'))
         },
     },
     clickableRows: {
@@ -93,7 +93,7 @@ const props = defineProps({
                 <tbody>
                     <Tr v-for="row in rows"
                         :key="row.id"
-                        :clickable="clickableRows"
+                        :clickable="row.clickable ?? clickableRows"
                         @click="$emit('click:row', row)"
                     >
                         <Td v-for="column in columns"