@redseed/redseed-ui-vue3 8.31.1 → 8.32.1

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.1",
     "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/Table/ColumnPicker.vue

@@ -0,0 +1,66 @@
+<script setup>
+import { computed } from 'vue'
+import DropdownMenu from '../DropdownMenu/DropdownMenu.vue'
+import ButtonTertiary from '../Button/ButtonTertiary.vue'
+import Icon from '../Icon/Icon.vue'
+import { AdjustmentsHorizontalIcon, CheckIcon } from '@heroicons/vue/24/outline'
+
+const props = defineProps({
+    columns: {
+        type: Array,
+        required: true,
+        validator: value => value.every(c => typeof c === 'object' && c.key && c.name !== undefined),
+    },
+    label: {
+        type: String,
+        default: 'Columns',
+    },
+})
+
+const visibleKeys = defineModel('visibleKeys', { type: Array, required: true })
+
+const isVisible = (key) => visibleKeys.value.includes(key)
+
+function toggle(key) {
+    if (visibleKeys.value.includes(key)) {
+        visibleKeys.value = visibleKeys.value.filter(k => k !== key)
+    } else {
+        visibleKeys.value = [...visibleKeys.value, key]
+    }
+}
+
+const visibleCount = computed(() => visibleKeys.value.length)
+const totalCount = computed(() => props.columns.length)
+</script>
+
+<template>
+<DropdownMenu right class="rsui-column-picker">
+    <template #trigger="{ open, isOpen }">
+        <ButtonTertiary :aria-expanded="isOpen" @click="open">
+            <Icon sm><AdjustmentsHorizontalIcon /></Icon>
+            {{ label }}
+            <span class="rsui-column-picker__count">{{ visibleCount }}/{{ totalCount }}</span>
+        </ButtonTertiary>
+    </template>
+
+    <ul class="rsui-column-picker__list" role="none">
+        <li v-for="column in columns"
+            :key="column.key"
+            class="rsui-column-picker__item"
+            role="menuitemcheckbox"
+            :aria-checked="isVisible(column.key)"
+            tabindex="0"
+            @click.stop="toggle(column.key)"
+            @keydown.enter.self.prevent="toggle(column.key)"
+            @keydown.space.self.prevent="toggle(column.key)"
+        >
+            <span :class="['rsui-column-picker__check', { 'rsui-column-picker__check--on': isVisible(column.key) }]"
+                aria-hidden="true"
+            >
+                <CheckIcon v-if="isVisible(column.key)" />
+            </span>
+            <span class="rsui-column-picker__label">{{ column.name || column.key }}</span>
+        </li>
+    </ul>
+</DropdownMenu>
+</template>

package/src/components/Table/Table.vue

@@ -1,8 +1,10 @@
 <script setup>
+import { computed, ref, watch } from 'vue'
 import { Card, CardHeader } from '../Card'
 import Tr from './Tr.vue'
 import Th from './Th.vue'
 import Td from './Td.vue'
+import ColumnPicker from './ColumnPicker.vue'
 
 const titleId = _.uniqueId('table-title-')
 
@@ -39,6 +41,47 @@ const props = defineProps({
         type: String,
         default: undefined,
     },
+    // When true, Table renders an internal ColumnPicker in the header actions and
+    // manages column visibility itself. Use `v-model:visibleKeys` to persist or
+    // override the selection externally; without v-model, all columns are visible
+    // by default and toggling is purely local.
+    columnPicker: {
+        type: Boolean,
+        default: false,
+    },
+})
+
+// v-model:visibleKeys — undefined means "uncontrolled" / use internal default (all visible).
+const visibleKeys = defineModel('visibleKeys', {
+    type: Array,
+    default: undefined,
+})
+
+// Internal fallback when no v-model is bound but columnPicker is enabled.
+const internalVisibleKeys = ref(props.columns.map(c => c.key))
+
+watch(() => props.columns, (next) => {
+    // Keep internal state in sync if the columns array changes (e.g. consumer adds/removes a column).
+    const knownKeys = next.map(c => c.key)
+    internalVisibleKeys.value = internalVisibleKeys.value.filter(k => knownKeys.includes(k))
+    for (const key of knownKeys) {
+        if (!internalVisibleKeys.value.includes(key)) internalVisibleKeys.value.push(key)
+    }
+}, { deep: true })
+
+const effectiveVisibleKeys = computed({
+    get: () => visibleKeys.value ?? internalVisibleKeys.value,
+    set: (next) => {
+        if (visibleKeys.value !== undefined) {
+            visibleKeys.value = next
+        } else {
+            internalVisibleKeys.value = next
+        }
+    },
+})
+
+const visibleColumns = computed(() => {
+    return props.columns.filter(column => effectiveVisibleKeys.value.includes(column.key))
 })
 </script>
 
@@ -67,8 +110,12 @@ const props = defineProps({
                 <slot name="subtitle"></slot>
             </template>
 
-            <template #actions v-if="$slots.actions">
+            <template #actions v-if="$slots.actions || columnPicker">
                 <slot name="actions"></slot>
+                <ColumnPicker v-if="columnPicker"
+                    :columns="columns"
+                    v-model:visibleKeys="effectiveVisibleKeys"
+                />
             </template>
 
             <template #more-actions v-if="$slots['more-actions']">
@@ -93,9 +140,9 @@ const props = defineProps({
                 :aria-label="!showHeader || !$slots.title ? ariaLabel : undefined"
             >
                 <caption v-if="!showHeader && $slots.title"><slot name="title"></slot></caption>
-                <thead v-if="columns">
+                <thead v-if="visibleColumns.length">
                     <Tr>
-                        <Th v-for="column in columns"
+                        <Th v-for="column in visibleColumns"
                             :key="column.key"
                             scope="col"
                             :alignment="column?.alignment"
@@ -119,7 +166,7 @@ const props = defineProps({
                         :clickable="row.clickable ?? clickableRows"
                         @click="$emit('click:row', row)"
                     >
-                        <Td v-for="column in columns"
+                        <Td v-for="column in visibleColumns"
                             :key="column.key"
                             :alignment="column?.alignment"
                             :fixed="fixedColumns"