@redseed/redseed-ui-vue3 8.31.0 → 8.32.0

package/index.js

@@ -14,6 +14,7 @@ export * from './src/components/Card'
 export * from './src/components/CardGroup'
 export * from './src/components/Comment'
 export * from './src/components/Disclosure'
+export * from './src/components/Drawer'
 export * from './src/components/DropdownMenu'
 export * from './src/components/Empty'
 export * from './src/components/FlexContainer'

package/package.json

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

package/src/components/Drawer/Drawer.vue

@@ -0,0 +1,208 @@
+<script setup>
+import { computed, nextTick, onMounted, onUnmounted, ref, watch } from 'vue'
+import Icon from '../Icon/Icon.vue'
+import { XMarkIcon } from '@heroicons/vue/24/outline'
+
+defineOptions({
+    inheritAttrs: false,
+})
+
+const drawerHeaderId = _.uniqueId('drawer-header-')
+const drawerPanelRef = ref(null)
+let previousActiveElement = null
+
+const props = defineProps({
+    show: {
+        type: Boolean,
+        default: false,
+    },
+    closeable: {
+        type: Boolean,
+        default: true,
+    },
+    sm: {
+        type: Boolean,
+        default: false,
+    },
+    md: {
+        type: Boolean,
+        default: false,
+    },
+    lg: {
+        type: Boolean,
+        default: false,
+    },
+    left: {
+        type: Boolean,
+        default: false,
+    },
+    headerPadded: {
+        type: Boolean,
+        default: true,
+    },
+    bodyPadded: {
+        type: Boolean,
+        default: true,
+    },
+    footerPadded: {
+        type: Boolean,
+        default: true,
+    },
+    closeIcon: {
+        type: Boolean,
+        default: false,
+    },
+})
+
+const defaultWidth = computed(() => !props.sm && !props.md && !props.lg)
+
+const drawerPanelClass = computed(() => [
+    'rsui-drawer__panel',
+    {
+        'rsui-drawer__panel--sm': props.sm,
+        'rsui-drawer__panel--md': props.md || defaultWidth.value,
+        'rsui-drawer__panel--lg': props.lg,
+        'rsui-drawer__panel--left': props.left,
+    },
+])
+
+const offScreenClass = computed(() => props.left ? 'rsui-drawer__panel--off-screen-left' : 'rsui-drawer__panel--off-screen-right')
+
+const emit = defineEmits(['close'])
+
+const isMounted = ref(props.show)
+const isOverlayVisible = ref(props.show)
+const isPanelVisible = ref(props.show)
+
+watch(() => props.show, (value) => {
+    if (value) {
+        previousActiveElement = document.activeElement
+        isMounted.value = true
+        isOverlayVisible.value = true
+        isPanelVisible.value = true
+        document.body.style.overflow = 'hidden'
+
+        nextTick(() => {
+            const panel = drawerPanelRef.value
+            if (!panel) return
+            const focusable = panel.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])')
+            if (focusable) {
+                focusable.focus()
+            } else {
+                panel.focus()
+            }
+        })
+    } else {
+        isPanelVisible.value = false
+        document.body.style.overflow = null
+
+        if (previousActiveElement && typeof previousActiveElement.focus === 'function') {
+            nextTick(() => previousActiveElement.focus())
+        }
+    }
+})
+
+function close() {
+    if (props.closeable) {
+        emit('close')
+    }
+}
+
+function closeOnEscape(e) {
+    if (e.key === 'Escape' && props.show && !e.repeat) {
+        close()
+    }
+}
+
+onMounted(() => document.addEventListener('keydown', closeOnEscape))
+
+onUnmounted(() => {
+    document.removeEventListener('keydown', closeOnEscape)
+    document.body.style.overflow = null
+})
+
+function handlePanelAfterLeave() {
+    if (!props.show) {
+        isOverlayVisible.value = false
+        isMounted.value = false
+    }
+}
+</script>
+<template>
+<teleport to="body">
+    <div v-if="isMounted" class="rsui-drawer" v-bind="$attrs">
+        <div v-if="isOverlayVisible"
+            class="rsui-drawer__background-wrapper"
+            aria-hidden="true"
+            @click="close"
+        >
+            <div class="rsui-drawer__background" />
+        </div>
+
+        <Transition
+            appear
+            enter-active-class="rsui-drawer__panel--entering"
+            :enter-from-class="offScreenClass"
+            leave-active-class="rsui-drawer__panel--leaving"
+            :leave-to-class="offScreenClass"
+            @after-leave="handlePanelAfterLeave"
+        >
+            <div v-if="isPanelVisible"
+                ref="drawerPanelRef"
+                :class="drawerPanelClass"
+                role="dialog"
+                aria-modal="true"
+                :aria-labelledby="$slots.header ? drawerHeaderId : undefined"
+                tabindex="-1"
+            >
+                <button v-if="closeIcon"
+                    type="button"
+                    class="rsui-drawer__close-icon"
+                    aria-label="Close"
+                    @click="close"
+                >
+                    <Icon disabled>
+                        <XMarkIcon />
+                    </Icon>
+                </button>
+
+                <div v-if="$slots.header"
+                    :id="drawerHeaderId"
+                    :class="{
+                        'rsui-drawer__header': true,
+                        'rsui-drawer__header--padded': headerPadded,
+                    }"
+                >
+                    <slot name="header"
+                        :close="close"
+                    ></slot>
+                </div>
+
+                <div
+                    :class="{
+                        'rsui-drawer__body': true,
+                        'rsui-drawer__body--padded': bodyPadded,
+                    }"
+                >
+                    <slot>
+                        <slot name="body"
+                            :close="close"
+                        ></slot>
+                    </slot>
+                </div>
+
+                <div v-if="$slots.footer"
+                    :class="{
+                        'rsui-drawer__footer': true,
+                        'rsui-drawer__footer--padded': footerPadded,
+                    }"
+                >
+                    <slot name="footer"
+                        :close="close"
+                    ></slot>
+                </div>
+            </div>
+        </Transition>
+    </div>
+</teleport>
+</template>

package/src/components/Drawer/index.js

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

package/src/components/Image/Image.vue

@@ -1,6 +1,5 @@
 <script setup>
 import { ref, computed, watch } from 'vue'
-import { useImage } from '@vueuse/core'
 import Icon from '../Icon/Icon.vue'
 import { PhotoIcon } from '@heroicons/vue/24/outline'
 
@@ -31,108 +30,70 @@ const props = defineProps({
     },
 })
 
-const imageElement = ref(null)
-
-const large = computed(() => props.largeUrl || props.originalUrl)
-const medium = computed(() => props.mediumUrl || props.originalUrl)
-const small = computed(() => props.smallUrl || props.originalUrl)
-
-const originalOptions = computed(() => ({
-    src: props.originalUrl,
-}))
-
-const largeOptions = computed(() => ({
-    src: large.value,
-}))
-
-const mediumOptions = computed(() => ({
-    src: medium.value,
-}))
-
-const smallOptions = computed(() => ({
-    src: small.value,
-}))
+const emit = defineEmits(['loading', 'error', 'ready'])
 
-const originalImage = ref(useImage(originalOptions.value))
-const largeImage = ref(useImage(largeOptions.value))
-const mediumImage = ref(useImage(mediumOptions.value))
-const smallImage = ref(useImage(smallOptions.value))
+const imageElement = ref(null)
+const isLoaded = ref(false)
+const error = ref(null)
 
 const isEmpty = computed(() => !props.originalUrl)
-
-const isLoading = computed(() => {
-    if (isEmpty.value) return false
-
-    return originalImage.value.isLoading
-        || largeImage.value.isLoading
-        || mediumImage.value.isLoading
-        || smallImage.value.isLoading
+const isLoading = computed(() => !isEmpty.value && !isLoaded.value && !error.value)
+const isReady = computed(() => isLoaded.value)
+
+// Reset state when the source URL changes so the new image goes through
+// loading → ready/error again.
+watch(() => props.originalUrl, () => {
+    isLoaded.value = false
+    error.value = null
 })
 
-const isReady = computed(() => {
-    if (isEmpty.value) return false
-
-    return originalImage.value.isReady
-        && largeImage.value.isReady
-        && mediumImage.value.isReady
-        && smallImage.value.isReady
-})
-
-const error = computed(() => {
-    if (isEmpty.value) return false
-
-    return originalImage.value.error
-        || largeImage.value.error
-        || mediumImage.value.error
-        || smallImage.value.error
-})
-
-const isLoaded = ref(false)
-
-const emit = defineEmits(['loading', 'error', 'ready'])
-
 watch(isLoading, () => {
-    if (isLoading.value) emit('loading', isLoading.value)
+    if (isLoading.value) emit('loading', true)
 }, { immediate: true, flush: 'post' })
 
 watch(error, () => {
     if (error.value) emit('error', error.value)
-}, { immediate: true, flush: 'post' })
+}, { flush: 'post' })
 
 watch(isLoaded, () => {
-    if (isLoaded.value && isReady.value) {
+    if (isLoaded.value) {
         emit('ready', {
-            ready: isReady.value,
+            ready: true,
             imageElement: imageElement.value,
         })
     }
-}, { immediate: true, flush: 'post' })
+}, { flush: 'post' })
 
-const sources = computed(() => {
-    return [
-        {
-            media: '(min-width:1280px)',
-            srcset: encodeURI(large.value)
-        },
-        {
-            media: '(min-width:640px)',
-            srcset: encodeURI(medium.value)
-        },
-        {
-            media: '(min-width:320px)',
-            srcset: encodeURI(small.value)
-        },
-    ]
-})
+function handleLoad() {
+    isLoaded.value = true
+}
+
+function handleError(event) {
+    error.value = event
+}
+
+const sources = computed(() => [
+    {
+        media: '(min-width:1280px)',
+        srcset: encodeURI(props.largeUrl || props.originalUrl),
+    },
+    {
+        media: '(min-width:640px)',
+        srcset: encodeURI(props.mediumUrl || props.originalUrl),
+    },
+    {
+        media: '(min-width:320px)',
+        srcset: encodeURI(props.smallUrl || props.originalUrl),
+    },
+])
 
 const imageClass = computed(() => [
     'rsui-image',
     {
         'rsui-image--rounded': props.rounded,
         'rsui-image--empty': isEmpty.value,
-        'rsui-image--error': error.value,
-    }
-
+        'rsui-image--error': !!error.value,
+    },
 ])
 </script>
 <template>
@@ -146,29 +107,35 @@ const imageClass = computed(() => [
             </Icon>
         </slot>
     </div>
-    <div v-else-if="isLoading"
-        class="rsui-image__message"
-    >
-        <slot name="loading"></slot>
-    </div>
-    <div v-else-if="error"
-        class="rsui-image__message"
-    >
-        <slot name="error">
-            Could not load image
-        </slot>
-    </div>
-    <picture v-else>
-        <source v-for="{ media, srcset } in sources"
-            :key="media"
-            :media="media"
-            :srcset="srcset"
+    <template v-else>
+        <!-- The <picture> stays mounted (v-show, not v-if) so the <img> drives
+             load/error state via its native events. Hidden while loading; the
+             browser still fetches the source because the element is in the DOM. -->
+        <picture v-show="isReady">
+            <source v-for="{ media, srcset } in sources"
+                :key="media"
+                :media="media"
+                :srcset="srcset"
+            >
+            <img ref="imageElement"
+                :src="originalUrl"
+                :alt="alt"
+                @load="handleLoad"
+                @error="handleError"
+            >
+        </picture>
+        <div v-if="isLoading"
+            class="rsui-image__message"
         >
-        <img ref="imageElement"
-            :src="originalUrl"
-            :alt="alt"
-            @load="isLoaded = true"
+            <slot name="loading"></slot>
+        </div>
+        <div v-else-if="error"
+            class="rsui-image__message"
         >
-    </picture>
+            <slot name="error">
+                Could not load image
+            </slot>
+        </div>
+    </template>
 </div>
 </template>