@redseed/redseed-ui-vue3 8.32.0 → 8.32.2

package/package.json

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

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,15 +140,16 @@ 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"
                             :fixed="fixedColumns"
                             :width="column?.width"
                             :sort="column?.sort"
+                            :pinned="!!column?.pinned"
                             @sort="$emit('sort', { column: { ...column, ...$event } })"
                         >
                             <slot :name="'th-' + column.key"
@@ -119,10 +167,11 @@ 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"
+                            :pinned="!!column?.pinned"
                         >
                             <slot :name="'td-' + column.key"
                                 :row="row"

package/src/components/Table/Td.vue

@@ -9,6 +9,10 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    pinned: {
+        type: Boolean,
+        default: false,
+    },
 })
 </script>
 
@@ -20,6 +24,7 @@ const props = defineProps({
         'rsui-td--right': alignment === 'right',
         'rsui-td--auto': !fixed,
         'rsui-td--fixed': fixed,
+        'rsui-td--pinned': pinned,
     },
 ]">
     <slot></slot>

package/src/components/Table/Th.vue

@@ -28,6 +28,10 @@ const props = defineProps({
         default: false,
         validator: value => ['asc', 'desc', true, false].includes(value),
     },
+    pinned: {
+        type: Boolean,
+        default: false,
+    },
 })
 
 const sortable = computed(() => props.sort !== false)
@@ -79,6 +83,7 @@ function handleSort(event) {
             'rsui-th--xl': fixed && width === 'xl',
             'rsui-th--2xl': fixed && width === '2xl',
             'rsui-th--sortable': sortable,
+            'rsui-th--pinned': pinned,
         },
     ]"
     :scope="scope"