@redseed/redseed-ui-vue3 8.31.1 → 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.1",
+    "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,
+}