@redseed/redseed-ui-vue3 4.2.0 → 5.1.0

package/index.js

@@ -31,4 +31,5 @@ export * from './src/components/Progress'
 export * from './src/components/Social'
 export * from './src/components/Sorting'
 export * from './src/components/Switcher'
+export * from './src/components/Table'
 export * from './src/components/Toggle'

package/package.json

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

package/src/components/Card/Card.vue

@@ -10,6 +10,10 @@ const props = defineProps({
         type: Boolean,
         default: true,
     },
+    padded: {
+        type: Boolean,
+        default: true,
+    },
     disabled: {
         type: Boolean,
         default: false,
@@ -40,66 +44,43 @@ function onClick() {
         class="rsui-card__action-layer"
         @click="onClick"
     ></div>
+
     <div v-if="$slots.image"
         class="rsui-card__image"
     >
         <slot name="image"></slot>
     </div>
-    <div class="rsui-card__content">
-        <div v-if="$slots.title || $slots.status"
-            :class="[
-                'rsui-card__content-top',
-                {
-                    'rsui-card__content-top--action': $slots['title-action'] || $slots.avatar,
-                    'rsui-card__content-top--no-avatar': !$slots.avatar,
-                }
-            ]"
-        >
-            <div v-if="$slots.avatar"
-                class="rsui-card__avatar"
-            >
-                <slot name="avatar"></slot>
-            </div>
-            <div class="rsui-card__title-wrapper">
-                <div v-if="$slots.title"
-                    class="rsui-card__title"
-                >
-                    <slot name="title"></slot>
-                </div>
-                <div v-if="$slots.status"
-                    class="rsui-card__title-status"
-                >
-                    <slot name="status"></slot>
-                </div>
-            </div>
-            <div v-if="$slots['title-action']"
-                class="rsui-card__title-action"
-            >
-                <slot name="title-action"></slot>
-            </div>
-        </div>
+
+    <div class="rsui-card__header"
+        v-if="$slots.header"
+    >
+        <slot name="header"></slot>
+    </div>
+
+    <div :class="[
+        'rsui-card__content',
+        { 'rsui-card__content--padded': padded },
+    ]">
         <slot></slot>
+
         <div v-if="$slots.meta"
             class="rsui-card__meta"
         >
             <slot name="meta"></slot>
         </div>
     </div>
-    <div v-if="$slots.actions"
-        class="rsui-card__actions"
-    >
-        <slot name="actions"></slot>
-    </div>
 </div>
 </template>
 <style lang="scss" scoped>
 .rsui-card {
-    @apply relative flex flex-col;
+    @apply relative flex flex-col overflow-hidden;
     @apply select-none transition duration-200;
     @apply rounded-xl bg-white border border-rsui-grey-400;
+
     &--hoverable {
         @apply hover:shadow-md;
     }
+
     &--clickable {
         @apply cursor-pointer;
         .rsui-card__image {
@@ -108,51 +89,26 @@ function onClick() {
         .rsui-card__content {
             @apply pointer-events-none;
         }
-        .rsui-card__actions {
-            @apply pointer-events-none;
-        }
     }
+
     &__action-layer {
         @apply absolute inset-0 size-full bg-transparent rounded-lg transition;
     }
+
     &__image {
         @apply rounded-t-lg overflow-hidden;
     }
+
     &__content {
-        @apply min-h-14 p-3 flex-1 flex flex-col relative gap-y-3;
-        &-top {
-            @apply flex items-center;
-            &--action {
-                @apply items-center;
-            }
-            &--no-avatar {
-                @apply justify-between;
-            }
+        @apply min-h-16 flex-1 flex flex-col relative gap-y-3;
+
+        &--padded {
+            @apply py-5 px-4 sm:px-6;
         }
     }
-    &__avatar {
-        @apply size-12 mr-3; // Added margin-right
-    }
-    &__title-wrapper {
-        @apply flex-1 flex justify-between items-center;
-    }
-    &__title {
-        @apply max-h-12 text-lg font-semibold leading-6 line-clamp-2;
-    }
-    &__title-status {
-        @apply ml-2 flex-shrink-0 self-start flex items-center;
-    }
-    &__title-action {
-        @apply pointer-events-auto ml-3; // Added margin-left
-    }
+
     &__meta {
         @apply grid grid-cols-1 sm:grid-cols-2 gap-x-6 gap-y-2 mt-4;
     }
-    &__actions {
-        @apply relative p-3;
-        & > * {
-            @apply mr-2 mb-2 pointer-events-auto;
-        }
-    }
 }
 </style>

package/src/components/Card/CardHeader.vue

@@ -0,0 +1,150 @@
+<script setup>
+import { ref } from 'vue'
+import ButtonTertiary from '../Button/ButtonTertiary.vue'
+import { useResponsiveWidth } from '../../helpers/ResponsiveWidth'
+import { EllipsisVerticalIcon } from '@heroicons/vue/24/outline'
+
+defineProps({
+    showAvatar: {
+        type: Boolean,
+        default: true,
+    },
+    showBadge: {
+        type: Boolean,
+        default: true,
+    },
+    showSubtitle: {
+        type: Boolean,
+        default: true,
+    },
+    showActions: {
+        type: Boolean,
+        default: true,
+    },
+    showMoreActions: {
+        type: Boolean,
+        default: true,
+    },
+})
+
+const cardHeaderElement = ref(null)
+
+const { responsiveWidth } = useResponsiveWidth(cardHeaderElement, 640)
+
+const emit = defineEmits(['click:more-actions'])
+</script>
+<template>
+<div ref="cardHeaderElement"
+    class="rsui-card-header"
+>
+    <div class="rsui-card-header__header">
+
+        <!-- Avatar slot, optional -->
+        <div class="rsui-card-header__avatar"
+            v-if="showAvatar && $slots.avatar"
+        >
+            <slot name="avatar"></slot>
+        </div>
+
+        <div class="rsui-card-header__text">
+
+            <!-- Title slot, default slot -->
+            <div class="rsui-card-header__title"
+                :title="$slots.default ? $slots.default()[0].children : ''"
+            >
+                <slot></slot>
+
+                <!-- Badge slot, optional -->
+                <div class="rsui-card-header__badge"
+                    v-if="showBadge && $slots.badge"
+                >
+                    <slot name="badge"></slot>
+                </div>
+            </div>
+
+            <!-- Subtitle slot, optional -->
+            <div class="rsui-card-header__subtitle"
+                v-if="showSubtitle && $slots.subtitle"
+                :title="$slots.subtitle ? $slots.subtitle()[0].children : ''"
+            >
+                <slot name="subtitle"></slot>
+            </div>
+        </div>
+
+        <!-- Actions slot, optional -->
+        <div class="rsui-card-header__toolbar"
+            v-if="showActions"
+        >
+            <!-- Desktop actions slot, optional -->
+            <div class="rsui-card-header__actions-desktop"
+                v-if="responsiveWidth.specific && $slots.actions"
+            >
+                <slot name="actions"></slot>
+            </div>
+
+            <!-- More actions slot, optional -->
+            <div v-if="showMoreActions"
+                class="rsui-card-header__more-actions"
+            >
+                <slot name="more-actions">
+                    <ButtonTertiary @click="emit('click:more-actions')">
+                        <EllipsisVerticalIcon class="rsui-card-header__more-actions-icon" />
+                    </ButtonTertiary>
+                </slot>
+            </div>
+        </div>
+    </div>
+
+    <!-- Mobile actions slot, optional -->
+    <div class="rsui-card-header__actions-mobile"
+        v-if="!responsiveWidth.specific && $slots.actions"
+    >
+        <slot name="actions"></slot>
+    </div>
+</div>
+</template>
+<style lang="scss" scoped>
+.rsui-card-header {
+    @apply flex flex-col gap-x-3 gap-y-5 overflow-hidden;
+    @apply md:flex-row md:justify-between md:items-center;
+    @apply border-b border-rsui-grey-400 py-4 px-4 sm:px-6;
+
+    &__header {
+        @apply flex-1 flex justify-between md:items-center gap-x-3;
+    }
+
+    &__avatar {
+        @apply size-14 rounded-full overflow-hidden flex items-center justify-center bg-rsui-grey-50;
+        @apply mt-2.5 md:mt-0;
+    }
+
+    &__text {
+        @apply flex-1 flex flex-col gap-y-0.5 pt-2 md:pt-0;
+    }
+
+    &__title {
+        @apply text-lg leading-7 font-semibold text-rsui-grey-900 line-clamp-2 md:line-clamp-1;
+        @apply flex flex-wrap items-center gap-y-1 gap-x-2;
+    }
+
+    &__subtitle {
+        @apply text-sm leading-5 text-rsui-grey-700 line-clamp-3 md:line-clamp-1;
+    }
+
+    &__toolbar {
+        @apply flex gap-3 md:items-center justify-end;
+    }
+
+    &__actions-desktop {
+        @apply flex gap-3 items-center;
+    }
+
+    &__actions-mobile {
+        @apply flex flex-wrap gap-3 items-center;
+    }
+
+    &__more-actions-icon {
+        @apply size-5 text-rsui-grey-400;
+    }
+}
+</style>

package/src/components/Card/index.js

@@ -1,11 +1,13 @@
 import ButtonCard from './ButtonCard.vue'
 import Card from './Card.vue'
+import CardHeader from './CardHeader.vue'
 import CardResource from './CardResource.vue'
 import RadioCard from './RadioCard.vue'
 
 export {
     ButtonCard,
     Card,
+    CardHeader,
     CardResource,
     RadioCard,
 }

package/src/components/Layouts/SectionHeader.vue

@@ -1,7 +1,6 @@
 <script setup>
 import { ref } from 'vue'
 import ButtonTertiary from '../Button/ButtonTertiary.vue'
-import DropdownMenu from '../DropdownMenu/DropdownMenu.vue'
 import { useResponsiveWidth } from '../../helpers/ResponsiveWidth'
 import { EllipsisVerticalIcon } from '@heroicons/vue/24/outline'
 

package/src/components/Table/Table.vue

@@ -0,0 +1,135 @@
+<script setup>
+import { Card, CardHeader } from '../Card'
+import Tr from './Tr.vue'
+import Th from './Th.vue'
+import Td from './Td.vue'
+
+const props = defineProps({
+    columns: {
+        type: Array,
+        default: () => [],
+        validator: value => {
+            if (value.length === 0) return true
+            return value.every(column => typeof column === 'object' && column.key && column.name !== undefined)
+        },
+    },
+    rows: {
+        type: Array,
+        default: () => [],
+        validator: value => {
+            if (value.length === 0) return true
+            return value.every(row => typeof row === 'object' && row.id)
+        },
+    },
+    clickableRows: {
+        type: Boolean,
+        default: false,
+    },
+})
+</script>
+
+<template>
+<Card
+    :clickable="false"
+    :hoverable="false"
+    :padded="false"
+>
+    <template #header>
+        <CardHeader
+            v-bind="$attrs.cardHeader"
+            @click:more-actions="$emit('click:more-actions')"
+        >
+            <template #avatar v-if="$slots.avatar">
+                <slot name="avatar"></slot>
+            </template>
+
+            <slot name="title"></slot>
+
+            <template #badge v-if="$slots.badge">
+                <slot name="badge"></slot>
+            </template>
+
+            <template #subtitle v-if="$slots.subtitle">
+                <slot name="subtitle"></slot>
+            </template>
+
+            <template #actions v-if="$slots.actions">
+                <slot name="actions"></slot>
+            </template>
+
+            <template #more-actions v-if="$slots['more-actions']">
+                <slot name="more-actions"></slot>
+            </template>
+        </CardHeader>
+    </template>
+
+    <div class="rsui-table">
+        <div class="rsui-table__container">
+            <table>
+                <thead v-if="columns">
+                    <Tr>
+                        <Th v-for="column in columns"
+                            :key="column.key"
+                            scope="col"
+                            :alignment="column?.alignment"
+                            :sort="column?.sort"
+                            @sort="$emit('sort', { column: { ...column, ...$event } })"
+                        >
+                            {{ column.name }}
+                        </Th>
+                    </Tr>
+                </thead>
+
+                <tbody>
+                    <Tr v-for="row in rows"
+                        :key="row.id"
+                        :clickable="clickableRows"
+                        @click="$emit('click:row', row)"
+                    >
+                        <Td v-for="column in columns"
+                            :key="column.key"
+                        >
+                            <slot :name="'td-' + column.key"
+                                :row="row"
+                            >
+                                {{ row[column.key] }}
+                            </slot>
+                        </Td>
+                    </Tr>
+                </tbody>
+            </table>
+        </div>
+
+        <div class="rsui-table__footer"
+            v-if="$slots.footer"
+        >
+            <slot name="footer"></slot>
+        </div>
+    </div>
+</Card>
+</template>
+<style lang="scss" scoped>
+.rsui-table {
+    @apply w-full;
+
+    table {
+        @apply w-full border-collapse table-auto;
+
+        tr{
+            th {
+                @apply bg-rsui-grey-100;
+                @apply font-semibold text-xs leading-5 text-rsui-grey-600 hover:text-rsui-grey-700;
+            }
+        }
+    }
+
+    &__container {
+        @apply w-full overflow-x-scroll;
+    }
+
+    &__footer {
+        @apply w-full border-t border-rsui-grey-400 overflow-hidden;
+        @apply py-3 px-6;
+    }
+}
+</style>

package/src/components/Table/Td.vue

@@ -0,0 +1,34 @@
+<script setup>
+const props = defineProps({
+    alignment: {
+        type: String,
+        default: 'left',
+        validator: value => ['left', 'center', 'right'].includes(value),
+    },
+})
+</script>
+
+<template>
+<td :class="[
+    'rsui-td',
+    {
+        'rsui-td--center': alignment === 'center',
+        'rsui-td--right': alignment === 'right',
+    },
+]">
+    <slot></slot>
+</td>
+</template>
+<style lang="scss" scoped>
+.rsui-td {
+    @apply text-left whitespace-nowrap;
+    @apply py-3 px-6 text-sm leading-6 text-rsui-grey-700;
+
+    &--center {
+        @apply text-center;
+    }
+    &--right {
+        @apply text-right;
+    }
+}
+</style>

package/src/components/Table/TdUser.vue

@@ -0,0 +1,44 @@
+<script setup>
+import { UserIcon } from '@heroicons/vue/24/outline'
+</script>
+
+<template>
+<div class="rsui-td-user">
+    <div class="rsui-td-user__avatar">
+        <slot name="avatar">
+            <UserIcon class="rsui-td-user__avatar-icon" />
+        </slot>
+    </div>
+
+    <div class="rsui-td-user__content">
+        <slot></slot>
+
+        <div class="rsui-td-user__supporting-text">
+            <slot name="supporting-text"></slot>
+        </div>
+    </div>
+</div>
+</template>
+
+<style lang="scss" scoped>
+.rsui-td-user {
+    @apply flex items-center gap-3;
+
+    &__avatar {
+        @apply flex items-center justify-center size-10 rounded-full overflow-hidden shrink-0;
+        @apply text-rsui-grey-600 border border-rsui-grey-200 bg-rsui-grey-100;
+    }
+
+    &__avatar-icon {
+        @apply size-6;
+    }
+
+    &__content {
+        @apply flex flex-col text-rsui-grey-900;
+    }
+
+    &__supporting-text {
+        @apply text-rsui-grey-700;
+    }
+}
+</style>

package/src/components/Table/Th.vue

@@ -0,0 +1,103 @@
+<script setup>
+import { ref, computed } from 'vue'
+import { ArrowUpIcon, ChevronUpDownIcon } from '@heroicons/vue/24/outline'
+
+const props = defineProps({
+    alignment: {
+        type: String,
+        default: 'left',
+        validator: value => ['left', 'center', 'right'].includes(value),
+    },
+    sort: {
+        type: [Boolean, String],
+        default: false,
+        validator: value => ['asc', 'desc', true, false].includes(value),
+    },
+})
+
+const sortable = computed(() => props.sort !== false)
+
+const isAsc = ref(props.sort === 'asc')
+
+const isDesc = ref(props.sort === 'desc')
+
+const emit = defineEmits(['sort'])
+
+function handleSort() {
+    if (!sortable.value) return
+
+    isDesc.value = isAsc.value
+    isAsc.value = !isAsc.value
+
+    emit('sort', {
+        sort: isAsc.value ? 'asc' : 'desc',
+    })
+}
+</script>
+
+<template>
+<th
+    :class="[
+        'rsui-th',
+        {
+            'rsui-th--center': alignment === 'center',
+            'rsui-th--right': alignment === 'right',
+            'rsui-th--sortable': sortable,
+        },
+    ]"
+    @click="handleSort"
+>
+    <div class="rsui-th__content">
+        <slot></slot>
+
+        <div v-if="sortable"
+            class="rsui-th__sort"
+        >
+            <ChevronUpDownIcon v-if="!isAsc && !isDesc"
+                class="rsui-th__sort-icon"
+            />
+            <ArrowUpIcon v-if="isAsc || isDesc"
+                :class="[
+                    'rsui-th__sort-icon',
+                    {
+                        'rsui-th__sort-icon--asc': isAsc,
+                        'rsui-th__sort-icon--desc': isDesc,
+                    },
+                ]"
+            />
+        </div>
+    </div>
+</th>
+</template>
+<style lang="scss" scoped>
+.rsui-th {
+    @apply text-left whitespace-nowrap;
+    @apply py-3 px-6 text-sm leading-6 text-rsui-grey-700;
+
+    &--center {
+        @apply text-center;
+    }
+    &--right {
+        @apply text-right;
+    }
+    &--sortable {
+        @apply cursor-pointer;
+    }
+
+    &__content {
+        @apply inline-flex items-center gap-1;
+    }
+
+    &__sort {
+        @apply shrink-0;
+    }
+
+    &__sort-icon {
+        @apply size-3 transition-all;
+
+        &--desc {
+            @apply rotate-180;
+        }
+    }
+}
+</style>

package/src/components/Table/Tr.vue

@@ -0,0 +1,39 @@
+<script setup>
+const props = defineProps({
+    clickable: {
+        type: Boolean,
+        default: false,
+    },
+})
+
+const emit = defineEmits(['click'])
+
+function handleClick() {
+    if (!props.clickable) return
+
+    emit('click')
+}
+</script>
+
+<template>
+<tr
+    :class="[
+        'rsui-tr',
+        { 'rsui-tr--clickable': clickable },
+    ]"
+    @click="handleClick"
+>
+    <slot></slot>
+</tr>
+</template>
+<style lang="scss" scoped>
+.rsui-tr {
+    @apply transition-all;
+    @apply border-b border-rsui-grey-400 rounded-lg;
+    @apply last:border-b-transparent only:border-b-rsui-grey-400;
+
+    &--clickable {
+        @apply cursor-pointer hover:bg-rsui-grey-100;
+    }
+}
+</style>

package/src/components/Table/index.js

@@ -0,0 +1,7 @@
+import Table from './Table.vue'
+import TdUser from './TdUser.vue'
+
+export {
+    Table,
+    TdUser,
+}