@redseed/redseed-ui-vue3 1.9.2 → 2.0.0

package/src/components/Image/ImageCircle.vue

@@ -7,7 +7,13 @@ defineOptions({
 </script>
 <template>
 <div class="rsui-image-circle">
-    <Image v-bind="$attrs"></Image>
+    <Image v-bind="$attrs">
+        <template v-for="(_, name) in $slots"
+            v-slot:[name]="slotProps"
+        >
+            <slot :name="name" v-bind="slotProps"></slot>
+        </template>
+    </Image>
 </div>
 </template>
 <style lang="scss" scoped>

package/src/components/Image/index.js

@@ -0,0 +1,13 @@
+import Image from './Image.vue'
+import Image3By1 from './Image3By1.vue'
+import Image9By16 from './Image9By16.vue'
+import Image16By9 from './Image16By9.vue'
+import ImageCircle from './ImageCircle.vue'
+
+export {
+    Image,
+    Image3By1,
+    Image9By16,
+    Image16By9,
+    ImageCircle,
+}

package/src/components/Link/LinkPrimary.vue

@@ -0,0 +1,19 @@
+<script setup>
+import LinkSlot from './LinkSlot.vue'
+
+defineOptions({
+    inheritAttrs: false,
+})
+</script>
+<template>
+<LinkSlot class="rsui-link-primary"
+    v-bind="$attrs"
+>
+    <slot></slot>
+</LinkSlot>
+</template>
+<style lang="scss" scoped>
+.rsui-link-primary {
+    @apply text-primary;
+}
+</style>

package/src/components/Link/LinkSlot.vue

@@ -0,0 +1,87 @@
+<script setup>
+import { computed } from 'vue'
+
+defineOptions({
+    inheritAttrs: false,
+})
+
+const props = defineProps({
+    md: {
+        type: Boolean,
+        default: false,
+    },
+    lg: {
+        type: Boolean,
+        default: false,
+    },
+    disabled: {
+        type: Boolean,
+        default: false,
+    },
+})
+
+defineEmits(['click'])
+
+const defaultSize = computed(() => !props.md && !props.lg)
+
+const linkSlotClass = computed(() => [
+    'rsui-link-slot',
+    {
+        // link sizes
+        'rsui-link-slot--md': props.md,
+        'rsui-link-slot--lg': props.lg || defaultSize.value,
+        // link disabled state
+        'rsui-link-slot--disabled': props.disabled,
+    },
+])
+
+const linkLabelClass = computed(() => [
+    'rsui-link-slot__label',
+    {
+        // link label disabled state
+        'rsui-link-slot__label--disabled': props.disabled,
+    },
+])
+</script>
+<template>
+<a
+    :class="linkSlotClass"
+    v-bind="$attrs"
+    @click="$emit('click', $event)"
+>
+    <span :class="linkLabelClass">
+        <slot></slot>
+    </span>
+</a>
+</template>
+<style lang="scss" scoped>
+.rsui-link-slot {
+    // default shape and control
+    @apply relative w-fit h-fit inline-flex items-center justify-center;
+    @apply select-none outline-none cursor-pointer transition;
+    // default text styles
+    @apply font-medium text-black;
+    // disabled state
+    &--disabled {
+        @apply opacity-30 cursor-default pointer-events-none;
+    }
+    // modifier md size
+    &--md {
+        @apply text-base leading-6;
+    }
+    // modifier lg size
+    &--lg {
+        @apply text-lg leading-7;
+    }
+    // label
+    &__label {
+        @apply relative;
+        @apply after:content-[''] after:absolute after:inset-x-0 after:bottom-0;
+        @apply after:w-full after:h-px after:transition;
+        @apply after:bg-current after:opacity-30 hover:after:opacity-100;
+        &--disabled {
+            @apply after:opacity-0;
+        }
+    }
+}
+</style>

package/src/components/Link/index.js

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

package/src/components/List/List.vue

@@ -0,0 +1,70 @@
+<script setup>
+import { ref, computed } from 'vue'
+import ListControl from './ListControl.vue'
+
+defineOptions({
+    inheritAttrs: false,
+})
+
+const props = defineProps({
+    control: {
+        type: Boolean,
+        default: true
+    },
+    totalItems: {
+        type: Number,
+        default: 0
+    },
+})
+
+const emit = defineEmits(['change'])
+
+const controlApplied = ref(false)
+
+const showControl = computed(() => props.control && (controlApplied.value || props.totalItems > 0))
+
+const showEmptyMessage = computed(() => !props.totalItems)
+
+function controlChanged(event) {
+    controlApplied.value = true
+
+    emit('change', event)
+}
+</script>
+<template>
+<div class="rsui-list">
+    <ListControl
+        v-if="showControl"
+        v-bind="$attrs"
+        :totalItems="totalItems"
+        @change="controlChanged"
+    >
+        <template #sort-asc-label v-if="$slots['sort-asc-label']">
+            <slot name="sort-asc-label"></slot>
+        </template>
+        <template #sort-desc-label v-if="$slots['sort-desc-label']">
+            <slot name="sort-desc-label"></slot>
+        </template>
+    </ListControl>
+    <div v-if="!showEmptyMessage"
+        class="rsui-list__items"
+    >
+        <slot></slot>
+    </div>
+    <div v-if="showEmptyMessage"
+        class="rsui-list__empty"
+    >
+        <slot name="empty">No items found.</slot>
+    </div>
+</div>
+</template>
+<style lang="scss" scoped>
+.rsui-list {
+    &__items {
+        @apply mt-6;
+    }
+    &__empty {
+        @apply mt-6;
+    }
+}
+</style>

package/src/components/List/ListControl.vue

@@ -0,0 +1,217 @@
+<script setup>
+import { ref, computed, onMounted, onUnmounted, watch } from 'vue'
+import FormFieldSearch from '../FormField/FormFieldSearch.vue'
+import FormFieldSelect from '../FormField/FormFieldSelect.vue'
+import Sorting from '../Sorting/Sorting.vue'
+import Pagination from '../Pagination/Pagination.vue'
+
+const props = defineProps({
+    searchable: {
+        type: Boolean,
+        default: true
+    },
+    sortable: {
+        type: Boolean,
+        default: true
+    },
+    totalItems: {
+        type: Number,
+        default: 0
+    },
+    perPage: {
+        type: Number,
+        default: 10
+    },
+    currentPage: {
+        type: Number,
+        default: 1
+    },
+    filters: {
+        type: Array,
+        default: () => []
+    },
+})
+
+const paginationClass = computed(() => [
+    'rsui-list-control__pagination',
+    {
+        'rsui-list-control__pagination--inline': !props.filters.length && !props.sortable
+    }
+])
+
+const emit = defineEmits(['change'])
+
+const listControlElement = ref(null)
+
+const filterLimit = ref(4)
+
+const searchText = ref('')
+const appliedFilters = ref([])
+const sortDesc = ref(false)
+const pagination = ref(null)
+
+watch(searchText, () => { fireChangeEvent() }, { flush: 'post' })
+watch(appliedFilters, () => { fireChangeEvent() }, { deep: true, flush: 'post' })
+watch(sortDesc, () => { fireChangeEvent() }, { flush: 'post' })
+watch(pagination, () => { fireChangeEvent() }, { deep: true, flush: 'post' })
+
+function fireChangeEvent() {
+    emit('change', {
+        searchText: searchText.value,
+        appliedFilters: appliedFilters.value,
+        sortDesc: sortDesc.value,
+        pagination: pagination.value
+    })
+}
+
+function calculateWidth() {
+    if (!listControlElement.value) return
+
+    const sizeClasses = [
+        'rsui-list-control--sm',
+        'rsui-list-control--md',
+        'rsui-list-control--lg',
+        'rsui-list-control--xl',
+    ]
+
+    listControlElement.value.classList.remove(...sizeClasses)
+
+    const width = listControlElement.value.offsetWidth
+
+    if (width >= 1280) {
+        listControlElement.value.classList.add(sizeClasses[3])
+        return
+    }
+
+    if (width >= 1024) {
+        listControlElement.value.classList.add(sizeClasses[2])
+        return
+    }
+
+    if (width >= 640) {
+        listControlElement.value.classList.add(sizeClasses[1])
+        return
+    }
+
+    listControlElement.value.classList.add(sizeClasses[0])
+    return
+}
+
+onMounted(() => {
+    calculateWidth()
+    window.addEventListener('resize', calculateWidth)
+})
+
+onUnmounted(() => window.addEventListener('resize', calculateWidth))
+</script>
+<template>
+<div ref="listControlElement"
+    class="rsui-list-control"
+>
+    <div v-if="searchable"
+        class="rsui-list-control__search"
+    >
+        <FormFieldSearch
+            v-model="searchText"
+            :placeholder="'Search'"
+        ></FormFieldSearch>
+    </div>
+    <div v-if="filters.length"
+        class="rsui-list-control__filters"
+    >
+        <div v-for="(filter, index) in filters.slice(0, filterLimit)"
+            :key="filter"
+            class="rsui-list-control__filter"
+        >
+            <FormFieldSelect
+                v-model="appliedFilters[index]"
+                :options="filter.options"
+            >
+                <template #default-option>
+                    {{ filter.label }}
+                </template>
+            </FormFieldSelect>
+        </div>
+    </div>
+    <div v-if="sortable"
+        class="rsui-list-control__sort"
+    >
+        <Sorting primary
+            @asc="sortDesc = false"
+            @desc="sortDesc = true"
+        >
+            <template #asc-label>
+                <slot name="sort-asc-label">
+                    Name A to Z
+                </slot>
+            </template>
+            <template #desc-label>
+                <slot name="sort-desc-label">
+                    Name Z to A
+                </slot>
+            </template>
+        </Sorting>
+    </div>
+    <div v-if="totalItems"
+        :class="paginationClass"
+    >
+        <Pagination
+            :totalItems="totalItems"
+            :perPage="perPage"
+            :currentPage="currentPage"
+            @change="pagination = $event"
+        ></Pagination>
+    </div>
+</div>
+</template>
+<style lang="scss" scoped>
+.rsui-list-control {
+    @apply flex flex-wrap justify-between gap-x-2 gap-y-3;
+    &--sm {
+        .rsui-list-control__search {
+            @apply w-full;
+        }
+        .rsui-list-control__filters {
+            @apply w-full grid-cols-2;
+        }
+    }
+    &--md {
+        .rsui-list-control__filters {
+            @apply flex;
+        }
+        .rsui-list-control__filter {
+            @apply max-w-40 w-40;
+        }
+    }
+    &--lg {
+        .rsui-list-control__filters {
+            @apply flex-1 grid-cols-4;
+        }
+    }
+    &--xl {
+        .rsui-list-control__filters {
+            @apply grid-cols-4;
+        }
+        .rsui-list-control__filter {
+            @apply max-w-52;
+        }
+    }
+
+    &__search {
+        @apply w-auto;
+    }
+    &__filters {
+        @apply grid gap-2;
+    }
+    &__filter {}
+    &__sort {
+        @apply max-h-10 flex items-center;
+    }
+    &__pagination {
+        @apply w-full flex items-center justify-center;
+        &--inline {
+            @apply w-1/2 mx-auto;
+        }
+    }
+}
+</style>

package/src/components/List/ListItem.vue

@@ -0,0 +1,192 @@
+<script setup>
+import { ref, computed, useSlots, onMounted, onUnmounted, watch } from 'vue'
+import { UserIcon } from '@heroicons/vue/24/solid'
+import ButtonTertiary from '../Button/ButtonTertiary.vue'
+
+const props = defineProps({
+    avatar: {
+        type: Boolean,
+        default: false,
+    },
+    action: {
+        type: Boolean,
+        default: false,
+    },
+    clickable: {
+        type: Boolean,
+        default: false,
+    },
+})
+
+const listItemElement = ref(null)
+
+const isWide = ref(false)
+
+function calculateWidth() {
+    if (!listItemElement.value) return
+
+    const width = listItemElement.value.offsetWidth
+
+    isWide.value = width >= 480
+    if (isWide.value) {
+        listItemElement.value.classList.add('rsui-list-item--wide')
+    } else {
+        listItemElement.value.classList.remove('rsui-list-item--wide')
+    }
+}
+
+onMounted(() => {
+    calculateWidth()
+    window.addEventListener('resize', calculateWidth)
+})
+
+onUnmounted(() => window.addEventListener('resize', calculateWidth))
+
+const slots = useSlots()
+
+const shouldShowBody = computed(() => {
+    return isWide.value && (slots.meta || slots.description)
+})
+
+const listItemClass = computed(() => [
+    'rsui-list-item',
+    {
+        'rsui-list-item--clickable': props.clickable,
+        'rsui-list-item--avatar': props.avatar,
+    }
+])
+
+const listItemBackgroundClass = computed(() => [
+    'rsui-list-item__bg',
+    {
+        'rsui-list-item__bg--clickable': props.clickable,
+    }
+])
+
+const emit = defineEmits(['click', 'clickAction'])
+
+function clickAction(event) {
+    event.stopPropagation()
+
+    emit('clickAction', event)
+}
+
+function clickItem(event) {
+    if (!props.clickable) return
+
+    emit('click', event)
+}
+</script>
+<template>
+<div ref="listItemElement"
+    :class="listItemClass"
+>
+    <!--
+        This header div is used to show avatar, title, status and action slots.
+        It is always visible.
+        The peer class is used to show hover effect on the whole item with the bg div.
+    -->
+    <div class="rsui-list-item__header peer">
+        <div v-if="avatar" class="rsui-list-item__avatar">
+            <slot name="avatar">
+                <div class="rsui-list-item__avatar-placeholder">
+                    <UserIcon></UserIcon>
+                </div>
+            </slot>
+        </div>
+        <div class="rsui-list-item__title">
+            <span>
+                <slot name="title"></slot>
+            </span>
+        </div>
+        <div v-if="$slots.status" class="rsui-list-item__status">
+            <slot name="status"></slot>
+        </div>
+        <div v-if="action" class="rsui-list-item__action">
+            <slot name="action" :clickAction="clickAction">
+                <ButtonTertiary xs @click="clickAction">
+                    <slot name="action-label">Action</slot>
+                </ButtonTertiary>
+            </slot>
+        </div>
+    </div>
+    <!--
+        This background needs to be sibling to header div above.
+        It is used to make the whole item clickable and show hover effect.
+        the hover effect is also applied when the header action button is hovered,
+        but not the active effect when the header action button is clicked.
+    -->
+    <div :class="listItemBackgroundClass" @click="clickItem"></div>
+    <!--
+        This body div is used to show meta and description slots in larger screens.
+        It is hidden in smaller screens.
+    -->
+    <div v-if="shouldShowBody" class="rsui-list-item__body">
+        <div v-if="$slots.meta" class="rsui-list-item__meta">
+            <slot name="meta"></slot>
+        </div>
+        <div v-if="$slots.description" class="rsui-list-item__description">
+            <slot name="description"></slot>
+        </div>
+    </div>
+</div>
+</template>
+<style lang="scss" scoped>
+.rsui-list-item {
+    @apply relative flex flex-col rounded-md p-3 overflow-hidden;
+    &--clickable {
+        @apply cursor-pointer;
+    }
+    &--avatar {
+        @apply pl-12 lg:pl-16 *:pl-2 *:lg:pl-1;
+    }
+    &--wide {
+        .rsui-list-item__status {
+            @apply w-auto order-none;
+        }
+    }
+    &__header {
+        @apply relative z-1 flex flex-wrap items-center gap-2 pointer-events-none;
+    }
+    &__bg {
+        @apply absolute inset-0 bg-white transition;
+        @apply hover:bg-gray-100 peer-hover:bg-gray-100;
+        &--clickable {
+            @apply active:bg-gray-200;
+        }
+    }
+    &__body {
+        @apply relative z-1 pointer-events-none;
+    }
+    &__avatar {
+        @apply absolute top-0 ml-1 -left-10 lg:-left-14;
+        @apply aspect-square overflow-hidden size-9 lg:size-12;
+        &-placeholder {
+            @apply size-full rounded-full overflow-hidden bg-neutral-200;
+            @apply flex items-center justify-center;
+            svg {
+                @apply size-5 lg:size-6 fill-neutral-400;
+            }
+        }
+    }
+    &__title {
+        @apply flex-1 inline-flex items-center text-base font-semibold;
+        @apply h-9 leading-5 lg:h-12 lg:leading-6;
+        span {
+            @apply line-clamp-2;
+        }
+    }
+    &__status {
+        @apply inline-flex items-center w-full order-last;
+    }
+    &__action {
+        @apply pointer-events-auto;
+    }
+    &__meta {
+        @apply mt-2 flex flex-wrap gap-x-4 gap-y-2;
+    }
+    &__description {
+        @apply line-clamp-2 mt-2 text-base;
+    }
+}
+</style>

package/src/components/List/index.js

@@ -0,0 +1,9 @@
+import List from './List.vue'
+import ListControl from './ListControl.vue'
+import ListItem from './ListItem.vue'
+
+export {
+    List,
+    ListControl,
+    ListItem,
+}

package/src/components/Logo/index.js

@@ -0,0 +1,11 @@
+import LogoRedSeedBuild from './LogoRedSeedBuild.vue'
+import LogoRedSeedCoach from './LogoRedSeedCoach.vue'
+import LogoRedSeedCourses from './LogoRedSeedCourses.vue'
+import LogoRedSeedLMS from './LogoRedSeedLMS.vue'
+
+export {
+    LogoRedSeedBuild,
+    LogoRedSeedCoach,
+    LogoRedSeedCourses,
+    LogoRedSeedLMS,
+}

package/src/components/MessageBox/index.js

@@ -0,0 +1,5 @@
+import MessageBox from './MessageBox.vue'
+
+export {
+    MessageBox,
+}

package/src/components/MetaInfo/MetaInfo.vue

@@ -37,7 +37,7 @@ const emit = defineEmits(['click'])
         @apply flex space-x-1 items-center;
     }
     &__label {
-        @apply font-semibold text-sm text-default-dark leading-4;
+        @apply font-semibold text-sm text-rsui-default leading-4;
     }
     &__help {
         @apply text-gray-400 size-4 cursor-pointer;
@@ -46,7 +46,7 @@ const emit = defineEmits(['click'])
         }
     }
     &__value {
-        @apply text-xs text-medium leading-5;
+        @apply text-xs text-rsui-medium leading-5;
     }
 }
 </style>

package/src/components/MetaInfo/index.js

@@ -0,0 +1,5 @@
+import MetaInfo from './MetaInfo.vue'
+
+export {
+    MetaInfo,
+}

package/src/components/Modal/index.js

@@ -0,0 +1,5 @@
+import Modal from './Modal.vue'
+
+export {
+    Modal,
+}

package/src/components/PageHeading/index.js

@@ -0,0 +1,5 @@
+import PageHeading from './PageHeading.vue'
+
+export {
+    PageHeading,
+}