@redseed/redseed-ui-vue3 8.5.0 → 8.7.0

package/index.js

@@ -32,6 +32,8 @@ export * from './src/components/MetaInfo'
 export * from './src/components/Modal'
 export * from './src/components/Pagination'
 export * from './src/components/Progress'
+export * from './src/components/SectionSlider'
+export * from './src/components/Skeleton'
 export * from './src/components/Social'
 export * from './src/components/Sorting'
 export * from './src/components/Switcher'

package/package.json

@@ -1,21 +1,21 @@
 {
-  "name": "@redseed/redseed-ui-vue3",
-  "version": "8.5.0",
-  "description": "RedSeed UI Vue 3 components",
-  "main": "index.js",
-  "repository": "https://github.com/redseedtraining/redseed-ui",
-  "scripts": {
-    "test": "echo \"Error: no test specified\" && exit 1"
-  },
-  "keywords": [],
-  "author": "",
-  "license": "ISC",
-  "dependencies": {
-    "@heroicons/vue": "^2.2.0",
-    "@vueuse/components": "^14.1.0",
-    "@vueuse/core": "^14.1.0",
-    "lodash": "^4.17.21",
-    "lottie-web": "^5.13.0",
-    "vue": "^3.5.25"
-  }
-}
+    "name": "@redseed/redseed-ui-vue3",
+    "version": "8.7.0",
+    "description": "RedSeed UI Vue 3 components",
+    "main": "index.js",
+    "repository": "https://github.com/redseedtraining/redseed-ui",
+    "scripts": {
+        "test": "echo \"Error: no test specified\" && exit 1"
+    },
+    "keywords": [],
+    "author": "",
+    "license": "ISC",
+    "dependencies": {
+        "@heroicons/vue": "2.2.0",
+        "@vueuse/components": "14.2.0",
+        "@vueuse/core": "14.2.1",
+        "lodash": "4.17.23",
+        "lottie-web": "5.13.0",
+        "vue": "3.5.28"
+    }
+}

package/src/components/Layouts/SectionHeader.vue

@@ -30,7 +30,7 @@ const props = defineProps({
 
 const sectionHeaderElement = ref(null)
 
-const { responsiveWidth } = useResponsiveWidth(sectionHeaderElement, 768)
+const { responsiveWidth } = useResponsiveWidth(sectionHeaderElement, 640)
 
 const emit = defineEmits(['click:more-actions'])
 

package/src/components/SectionSlider/SectionSlider.vue

@@ -0,0 +1,227 @@
+<script setup>
+import { ref, computed, useSlots } from 'vue'
+import { useScroll, useEventListener } from '@vueuse/core'
+import { Icon } from '../Icon'
+import Section from '../Layouts/Section.vue'
+import SectionHeader from '../Layouts/SectionHeader.vue'
+import SectionSliderItem from './SectionSliderItem.vue'
+import { ChevronLeftIcon, ChevronRightIcon } from '@heroicons/vue/24/outline'
+
+const props = defineProps({
+    items: {
+        type: Array,
+        required: true,
+    },
+    featured: {
+        type: Boolean,
+        default: false,
+    },
+    ai: {
+        type: Boolean,
+        default: false,
+    },
+})
+
+const sectionVariant = computed(() => {
+    if (props.featured) return 'brand'
+    if (props.ai) return 'ai'
+    return 'primary'
+})
+
+const sliderClasses = computed(() => [
+    'rsui-section-slider',
+    {
+        'rsui-section-slider--default': !props.featured && !props.ai,
+        'rsui-section-slider--featured': props.featured,
+        'rsui-section-slider--ai': props.ai,
+    },
+])
+
+const slots = useSlots()
+
+/**
+ * Unique id for the slider
+ */
+const sliderId = _.uniqueId('cs')
+
+/**
+ * Generate the item id for the item
+ */
+function generateItemId(index) {
+    return sliderId + ':' + index
+}
+
+/**
+ * Reference to the slider container element
+ */
+const sliderContainerRef = ref(null)
+
+/**
+ * Listener for keyboard events on the document
+ */
+useEventListener(document, 'keydown', (e) => {
+    if (e.key === 'ArrowRight') e.preventDefault()
+    if (e.key === 'ArrowLeft') e.preventDefault()
+})
+
+/**
+ * Whether the slider container is scrolling
+ */
+const { isScrolling } = useScroll(sliderContainerRef)
+
+/**
+ * Visible item ids
+ */
+const visibleItemIds = ref([])
+
+function addVisibleItemId(id) {
+    visibleItemIds.value.push(id)
+}
+
+function removeVisibleItemId(id) {
+    visibleItemIds.value = visibleItemIds.value.filter(item => item !== id)
+}
+
+/**
+ * Maximum number of visible items
+ */
+const maxVisibleItems = computed(() => visibleItemIds.value.length)
+
+/**
+ * Slides - chunks items into groups based on visible count
+ */
+const slides = computed(() => {
+    const mappedItems = props.items.map((item, index) => {
+        return generateItemId(index + 1)
+    })
+
+    return _.chunk(mappedItems, maxVisibleItems.value)
+})
+
+/**
+ * Active slide index
+ */
+const activeSlideIndex = ref(0)
+
+/**
+ * Whether the previous button is disabled
+ */
+const disabledPrevButton = computed(() => isScrolling.value
+    || maxVisibleItems.value === 0
+    || props.items.length === maxVisibleItems.value
+)
+
+/**
+ * Whether the next button is disabled
+ */
+const disabledNextButton = computed(() => isScrolling.value
+    || maxVisibleItems.value === 0
+    || props.items.length === maxVisibleItems.value
+)
+
+/**
+ * Show the next slide
+ */
+function showNextSlide() {
+    if (disabledNextButton.value) return
+
+    if (activeSlideIndex.value === slides.value.length - 1) {
+        activeSlideIndex.value = 0
+    } else {
+        activeSlideIndex.value++
+    }
+
+    const activeSlideFirstItemId = slides.value[activeSlideIndex.value][0]
+    const activeSlideFirstElement = document.getElementById(activeSlideFirstItemId)
+
+    activeSlideFirstElement.scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest',
+        inline: 'start',
+    })
+}
+
+/**
+ * Show the previous slide
+ */
+function showPreviousSlide() {
+    if (disabledPrevButton.value) return
+
+    if (activeSlideIndex.value === 0) {
+        activeSlideIndex.value = slides.value.length - 1
+    } else {
+        activeSlideIndex.value--
+    }
+
+    const activeSlideFirstItemId = slides.value[activeSlideIndex.value][0]
+    const activeSlideFirstElement = document.getElementById(activeSlideFirstItemId)
+
+    activeSlideFirstElement.scrollIntoView({
+        behavior: 'smooth',
+        block: 'nearest',
+        inline: 'start',
+    })
+}
+</script>
+
+<template>
+    <Section :variant="sectionVariant"
+        :class="sliderClasses"
+        v-bind="$attrs"
+    >
+        <template #header>
+            <SectionHeader :showDivider="false" :showMoreActions="false">
+                <slot name="title"></slot>
+
+                <template v-if="slots.subtitle" #subtitle>
+                    <slot name="subtitle"></slot>
+                </template>
+
+                <template v-if="slots['see-all']" #badge>
+                    <slot name="see-all"></slot>
+                </template>
+
+                <template #actions>
+                    <slot name="actions"
+                        :showNextSlide="showNextSlide"
+                        :showPreviousSlide="showPreviousSlide"
+                        :disabledPrevButton="disabledPrevButton"
+                        :disabledNextButton="disabledNextButton"
+                    >
+                        <button class="rsui-section-slider__action"
+                            :disabled="disabledPrevButton"
+                            @click="showPreviousSlide"
+                        >
+                            <Icon :invert="featured">
+                                <ChevronLeftIcon />
+                            </Icon>
+                        </button>
+
+                        <button class="rsui-section-slider__action"
+                            :disabled="disabledNextButton"
+                            @click="showNextSlide"
+                        >
+                            <Icon :invert="featured">
+                                <ChevronRightIcon />
+                            </Icon>
+                        </button>
+                    </slot>
+                </template>
+            </SectionHeader>
+        </template>
+
+        <div ref="sliderContainerRef"
+            class="rsui-section-slider__container"
+        >
+            <SectionSliderItem
+                v-for="(item, index) in items"
+                :key="index"
+                :id="generateItemId(index + 1)"
+                @visible="addVisibleItemId"
+                @hidden="removeVisibleItemId"
+            >
+                <slot name="item" :item="item"></slot>
+            </SectionSliderItem>
+        </div>
+    </Section>
+</template>

package/src/components/SectionSlider/SectionSliderItem.vue

@@ -0,0 +1,46 @@
+<script setup>
+import { ref, watch } from 'vue'
+import { useEventListener, useElementVisibility } from '@vueuse/core'
+
+const props = defineProps({
+    id: {
+        type: String,
+        required: true,
+    },
+})
+
+const emit = defineEmits(['visible', 'hidden'])
+
+/**
+ * Reference to the item element
+ */
+const itemRef = ref(null)
+
+/**
+ * Whether the item is visible
+ */
+const isVisible = useElementVisibility(itemRef, {
+    threshold: 1,
+})
+
+watch(isVisible, (newVal) => {
+    if (newVal) emit('visible', props.id)
+    if (!newVal) emit('hidden', props.id)
+})
+
+/**
+ * Listener for keyboard events on the item
+ */
+useEventListener(itemRef, 'keydown', (e) => {
+    if (e.key === 'Tab') e.preventDefault()
+})
+</script>
+
+<template>
+    <div :id="id"
+        ref="itemRef"
+        class="rsui-section-slider-item"
+    >
+        <slot></slot>
+    </div>
+</template>

package/src/components/SectionSlider/index.js

@@ -0,0 +1,4 @@
+import SectionSlider from './SectionSlider.vue'
+import SectionSliderItem from './SectionSliderItem.vue'
+
+export { SectionSlider, SectionSliderItem }

package/src/components/Skeleton/Skeleton.vue

@@ -0,0 +1,86 @@
+<script setup>
+import { computed } from 'vue'
+
+const props = defineProps({
+    line: {
+        type: Boolean,
+        default: false,
+    },
+    circle: {
+        type: Boolean,
+        default: false,
+    },
+    square: {
+        type: Boolean,
+        default: false,
+    },
+    full: {
+        type: Boolean,
+        default: false,
+    },
+    half: {
+        type: Boolean,
+        default: false,
+    },
+    oneThird: {
+        type: Boolean,
+        default: false,
+    },
+    twoThirds: {
+        type: Boolean,
+        default: false,
+    },
+    thick: {
+        type: Boolean,
+        default: false,
+    },
+    rounded: {
+        type: Boolean,
+        default: false,
+    },
+    start: {
+        type: Boolean,
+        default: false,
+    },
+    end: {
+        type: Boolean,
+        default: false,
+    },
+})
+
+const shape = computed(() => {
+    if (props.circle) return 'circle'
+    if (props.square) return 'square'
+    return 'line'
+})
+
+const widthClass = computed(() => {
+    if (props.twoThirds) return 'rsui-skeleton--two-thirds'
+    if (props.oneThird) return 'rsui-skeleton--one-third'
+    if (props.half) return 'rsui-skeleton--half'
+    if (props.full) return 'rsui-skeleton--full'
+    return 'rsui-skeleton--full'
+})
+
+const positionClass = computed(() => {
+    if (props.end) return 'rsui-skeleton--end'
+    if (props.start) return 'rsui-skeleton--start'
+    return ''
+})
+</script>
+
+<template>
+    <div :class="['rsui-skeleton', widthClass, positionClass]">
+        <div
+            :class="[
+                shape === 'line' && 'rsui-skeleton__line',
+                shape === 'line' && props.thick && 'rsui-skeleton__line--thick',
+                shape === 'line' && props.rounded && 'rsui-skeleton__line--rounded',
+                shape === 'circle' && 'rsui-skeleton__circle',
+                shape === 'square' && 'rsui-skeleton__square',
+                shape === 'square' && props.rounded && 'rsui-skeleton__square--rounded',
+            ]"
+            aria-hidden="true"
+        ></div>
+    </div>
+</template>

package/src/components/Skeleton/index.js

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