@redseed/redseed-ui-vue3 5.1.3 → 5.2.0

package/index.js

@@ -4,6 +4,7 @@ window._ = _
 import lottie from 'lottie-web'
 window.lottie = lottie
 
+export * from './src/components/ActivityFeeds'
 export * from './src/components/Avatar'
 export * from './src/components/Badge'
 export * from './src/components/Breadcrumbs'

package/package.json

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

package/src/components/ActivityFeeds/ActivityFeed.vue

@@ -0,0 +1,32 @@
+<script setup>
+const props = defineProps({
+    divider: {
+        type: [String, Boolean],
+        default: 'line',
+        validator: value => ['line', 'connector', false].includes(value),
+    },
+})
+</script>
+
+<template>
+<div :class="[
+    'rsui-activity-feed',
+    {
+        'rsui-activity-feed--line': divider === 'line',
+    }
+]">
+    <slot></slot>
+</div>
+</template>
+
+<style lang="scss" scoped>
+.rsui-activity-feed {
+    @apply flex flex-col gap-8 max-w-xs;
+
+    &--line {
+        & > *:not(:last-child) {
+            @apply after:absolute after:inset-x-0 after:-bottom-4 after:border-t after:border-rsui-grey-400;
+        }
+    }
+}
+</style>

package/src/components/ActivityFeeds/FeedItem.vue

@@ -0,0 +1,178 @@
+<script setup>
+import { UserIcon } from '@heroicons/vue/24/outline'
+
+const props = defineProps({
+    clickable: {
+        type: Boolean,
+        default: false,
+    },
+    status: {
+        type: [String, Boolean],
+        default: false,
+        validator: value => [false, true, 'online', 'busy'].includes(value),
+    },
+    padded: {
+        type: Boolean,
+        default: false,
+    },
+    showDot: {
+        type: Boolean,
+        default: false,
+    },
+})
+
+const emit = defineEmits(['click'])
+
+function handleClick() {
+    if (!props.clickable) return
+
+    emit('click')
+}
+</script>
+
+<template>
+<div
+    :class="[
+        'rsui-feed-item',
+        {
+            'rsui-feed-item--clickable': clickable,
+            'rsui-feed-item--padded': padded,
+        }
+    ]"
+    @click="handleClick"
+>
+
+    <div class="rsui-feed-item__avatar">
+
+        <slot name="avatar">
+            <UserIcon />
+        </slot>
+
+        <div v-if="status !== false"
+            class="rsui-feed-item__avatar-indicator"
+        >
+            <slot name="avatar-indicator"
+                :status="status"
+            >
+                <div :class="[
+                    'rsui-feed-item__avatar-indicator-dot',
+                    {
+                        'rsui-feed-item__avatar-indicator-dot--online': status === 'online',
+                        'rsui-feed-item__avatar-indicator-dot--busy': status === 'busy',
+                    }
+                ]"></div>
+            </slot>
+        </div>
+
+    </div>
+
+    <div class="rsui-feed-item__body">
+
+        <div class="rsui-feed-item__header">
+
+            <div class="rsui-feed-item__heading">
+
+                <div class="rsui-feed-item__heading-text">
+                    <slot name="heading"></slot>
+                </div>
+
+                <div v-if="$slots.subheading"
+                    class="rsui-feed-item__heading-subtext"
+                >
+                    <slot name="subheading"></slot>
+                </div>
+
+            </div>
+
+            <div v-if="$slots['supporting-text']"
+                class="rsui-feed-item__supporting-text"
+            >
+                <slot name="supporting-text"></slot>
+            </div>
+
+        </div>
+
+        <div v-if="$slots.content"
+            class="rsui-feed-item__content"
+        >
+            <slot name="content"></slot>
+        </div>
+
+    </div>
+
+    <div v-if="showDot && $slots.dot"
+        class="rsui-feed-item__dot"
+    >
+        <slot name="dot"></slot>
+    </div>
+
+</div>
+</template>
+
+<style lang="scss" scoped>
+.rsui-feed-item {
+    @apply relative flex flex-nowrap gap-3 border border-transparent rounded-lg;
+
+    &--clickable {
+        @apply cursor-pointer;
+    }
+
+    &--padded {
+        @apply p-2;
+    }
+
+    &__avatar {
+        @apply relative shrink-0 size-12 rounded-full flex items-center justify-center;
+        @apply bg-rsui-grey-100 border border-rsui-grey-200;
+
+        :deep(> svg) {
+            @apply size-7 text-rsui-grey-500;
+        }
+    }
+
+    &__avatar-indicator {
+        @apply absolute -bottom-0.5 -right-0.5;
+        @apply flex items-center justify-center size-4;
+    }
+
+    &__avatar-indicator-dot {
+        @apply size-4 rounded-full bg-rsui-grey-300 border-2 border-white;
+
+        &--online {
+            @apply bg-rsui-success-500;
+        }
+
+        &--busy {
+            @apply bg-rsui-error-500;
+        }
+    }
+
+    &__body {
+        @apply flex-1 flex flex-col gap-3;
+    }
+
+    &__header {
+        @apply flex flex-col;
+    }
+
+    &__heading {
+        @apply flex flex-wrap items-center gap-x-2;
+    }
+
+    &__heading-text {
+        @apply shrink-0 text-sm font-medium text-rsui-grey-800;
+    }
+
+    &__heading-subtext {
+        @apply text-xs text-rsui-grey-700;
+    }
+
+    &__supporting-text {
+        @apply text-sm font-medium text-rsui-grey-700;
+    }
+
+    &__dot {
+        @apply relative shrink-0;
+    }
+}
+</style>

package/src/components/ActivityFeeds/index.js

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

package/src/components/Table/Th.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue'
+import { ref, computed, watch } from 'vue'
 import { ArrowUpIcon, ChevronUpDownIcon } from '@heroicons/vue/24/outline'
 
 const props = defineProps({
@@ -18,9 +18,13 @@ const props = defineProps({
 const sortable = computed(() => props.sort !== false)
 
 const isAsc = ref(props.sort === 'asc')
-
 const isDesc = ref(props.sort === 'desc')
 
+watch(() => props.sort, () => {
+    isAsc.value = props.sort === 'asc'
+    isDesc.value = props.sort === 'desc'
+})
+
 const emit = defineEmits(['sort'])
 
 function handleSort() {