@soft-stech/bootsman-ui-shadcn 1.4.25 → 1.4.27

package/dist/index.js

@@ -145,11 +145,11 @@ import { _ as ai } from "./BuiAlertDescription.vue_vue_type_script_setup_true_la
 import { _ as ui } from "./BuiAvatarImage.vue_vue_type_script_setup_true_lang-DELf2i8H.js";
 import { _ as si } from "./BuiAvatarFallback.vue_vue_type_script_setup_true_lang-B1ncuXZ0.js";
 import "./BuiCalendar.vue_vue_type_style_index_0_lang-DK4yUiXC.js";
-import { _ as Bi } from "./BuiTable.vue_vue_type_script_setup_true_lang-D8Tseif4.js";
+import { _ as Bi } from "./BuiTable.vue_vue_type_script_setup_true_lang-QoPGiEYZ.js";
 import { _ as fi } from "./BuiTableBody.vue_vue_type_script_setup_true_lang-DblqmDim.js";
 import { _ as _i } from "./BuiTableCell.vue_vue_type_script_setup_true_lang-CYBx0oJL.js";
 import { _ as di } from "./BuiTableHead.vue_vue_type_script_setup_true_lang-BDSRArVd.js";
-import { _ as Ci } from "./BuiTableHeader.vue_vue_type_script_setup_true_lang-B2getNR7.js";
+import { _ as Ci } from "./BuiTableHeader.vue_vue_type_script_setup_true_lang-BXgL487_.js";
 import { _ as Fi } from "./BuiTableRow.vue_vue_type_script_setup_true_lang-Bl4nF6yV.js";
 import { _ as Si } from "./BuiTableCaption.vue_vue_type_script_setup_true_lang-CTEP1Sde.js";
 import { _ as Ai } from "./BuiTableEmpty.vue_vue_type_script_setup_true_lang-BTyX0sT5.js";
@@ -165,12 +165,13 @@ import { _ as ji } from "./BuiSheetHeader.vue_vue_type_script_setup_true_lang-vG
 import { _ as Ji } from "./BuiSheetTitle.vue_vue_type_script_setup_true_lang-D-bamlaT.js";
 import { _ as Ui } from "./BuiSheetTrigger.vue_vue_type_script_setup_true_lang-Bo3F1V-i.js";
 import { Form as zi, Field as Qi, FieldArray as Wi, useField as Xi, useFieldArray as Zi, useForm as $i } from "vee-validate";
-import { _ as ru } from "./BuiToastViewport.vue_vue_type_script_setup_true_lang-BBDzM6Br.js";
-import { _ as tu } from "./BuiToastClose.vue_vue_type_script_setup_true_lang-fLjieQsa.js";
-import { _ as iu } from "./BuiToastTitle.vue_vue_type_script_setup_true_lang-D1VfRzjv.js";
-import { _ as pu } from "./BuiToastDescription.vue_vue_type_script_setup_true_lang-CZ5Gk9K4.js";
-import { _ as mu } from "./BuiToastProvider.vue_vue_type_script_setup_true_lang-ZXzJkgBD.js";
-import { toast as xu, useToast as fu } from "./components/ui/toast/use-toast.js";
+import { _ as ru } from "./BuiDataTableColumnList.vue_vue_type_script_setup_true_lang-BOdkTG0_.js";
+import { _ as tu } from "./BuiToastViewport.vue_vue_type_script_setup_true_lang-BBDzM6Br.js";
+import { _ as iu } from "./BuiToastClose.vue_vue_type_script_setup_true_lang-fLjieQsa.js";
+import { _ as pu } from "./BuiToastTitle.vue_vue_type_script_setup_true_lang-D1VfRzjv.js";
+import { _ as mu } from "./BuiToastDescription.vue_vue_type_script_setup_true_lang-CZ5Gk9K4.js";
+import { _ as xu } from "./BuiToastProvider.vue_vue_type_script_setup_true_lang-ZXzJkgBD.js";
+import { toast as nu, useToast as _u } from "./components/ui/toast/use-toast.js";
 export {
   a as BuiAccordion,
   u as BuiAccordionContent,
@@ -244,6 +245,7 @@ export {
   pr as BuiContextMenuSubTrigger,
   Oo as BuiContextMenuTrigger,
   vt as BuiDataTable,
+  ru as BuiDataTableColumnList,
   xr as BuiDialog,
   nr as BuiDialogClose,
   br as BuiDialogContent,
@@ -343,11 +345,11 @@ export {
   Nt as BuiTextarea,
   Jt as BuiToast,
   vi as BuiToastAction,
-  tu as BuiToastClose,
-  pu as BuiToastDescription,
-  mu as BuiToastProvider,
-  iu as BuiToastTitle,
-  ru as BuiToastViewport,
+  iu as BuiToastClose,
+  mu as BuiToastDescription,
+  xu as BuiToastProvider,
+  pu as BuiToastTitle,
+  tu as BuiToastViewport,
   Kt as BuiToaster,
   ea as BuiToggle,
   ia as BuiToggleGroup,
@@ -380,12 +382,12 @@ export {
   Ot as tabsTriggerVariants,
   oi as tailwind,
   jt as textareaVariants,
-  xu as toast,
+  nu as toast,
   Ut as toastVariants,
   ta as toggleVariants,
   Xi as useBuiField,
   Zi as useBuiFieldArray,
   $i as useBuiForm,
-  fu as useToast,
+  _u as useToast,
   $ as valueUpdater
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soft-stech/bootsman-ui-shadcn",
-  "version": "1.4.25",
+  "version": "1.4.27",
   "type": "module",
   "files": [
     "dist",
@@ -15,19 +15,21 @@
     "url": "https://github.com/soft-stech/bootsman-ui-shadcn"
   },
   "peerDependencies": {
-    "vue": "^3.5.6",
-    "zod": "^3.23.6",
-    "vee-validate": "^4.13.2",
     "@tanstack/vue-table": "8.20.5",
     "@vee-validate/zod": "4.13.2",
-    "@vueuse/core": "11.1.0"
+    "@vueuse/core": "11.1.0",
+    "vee-validate": "^4.13.2",
+    "vue": "^3.5.6",
+    "zod": "^3.23.6"
   },
   "dependencies": {
     "@internationalized/date": "^3.5.5",
+    "@vueuse/integrations": "^13.0.0",
     "class-variance-authority": "0.7.0",
     "clsx": "2.1.1",
     "lucide-vue-next": "0.441.0",
     "radix-vue": "1.9.8",
+    "sortablejs": "^1",
     "tailwind-merge": "2.5.2",
     "tailwindcss-animate": "1.0.7",
     "v-calendar": "3.1.2"

package/src/components/stories/BuiDataTable.story.vue

@@ -3,7 +3,15 @@ import { BuiDataTable } from '@/components/ui/table'
 import RowActionsMenuContent from './components/ActionsMenuContent.vue'
 import { BuiButton, BuiCheckbox, BuiTabs, BuiTabsList, BuiTabsTrigger } from '@/index'
 import { tableColumnSortCommon } from '@/lib/utils'
-import type { ColumnDef, PaginationState, Row, RowSelectionState } from '@tanstack/vue-table'
+import type {
+  ColumnDef,
+  PaginationState,
+  Row,
+  RowSelectionState,
+  ColumnSizingState,
+  VisibilityState,
+  ColumnOrderState
+} from '@tanstack/vue-table'
 import { sort, type ISortByObjectSorter } from 'fast-sort'
 import { logEvent } from 'histoire/client'
 import {
@@ -55,7 +63,9 @@ const columns: ColumnDef<Task>[] = [
           ariaLabel: 'Select row'
         }),
         `${row.getValue('id')}`
-      ])
+      ]),
+    enableHiding: false,
+    meta: { title: 'ID', pinLeft: true }
   },
   {
     accessorKey: 'title',
@@ -63,7 +73,8 @@ const columns: ColumnDef<Task>[] = [
   },
   {
     accessorKey: 'status',
-    header: ({ column }) => tableColumnSortCommon(column, 'Status')
+    header: ({ column }) => tableColumnSortCommon(column, 'Status'),
+    meta: { title: 'Статус таска' }
   },
   {
     accessorKey: 'priority',
@@ -96,6 +107,10 @@ function updateSelection(val: RowSelectionState) {
   selection.value = val
 }
 
+const columnVisibility = ref<VisibilityState>({ hiddenColumn: false })
+const columnSizing = ref<ColumnSizingState>({ title: 300 })
+const columnOrder = ref<ColumnOrderState>()
+
 type GroupBy = 'none' | 'status' | 'priority'
 const groupBy = ref<GroupBy>('none')
 const groupLabels = {
@@ -175,6 +190,9 @@ function groupName(group: string | number) {
         :data="sortedData"
         v-model:sorting="sorting"
         v-model:pagination="pagination"
+        v-model:column-sizing="columnSizing"
+        v-model:column-visibility="columnVisibility"
+        v-model:column-order="columnOrder"
         @update:selection="updateSelection"
         :total-items="totalItems"
         class="caption-top"
@@ -183,7 +201,7 @@ function groupName(group: string | number) {
         :groupBy="groupBy === 'none' ? undefined : groupBy"
         :groupLabels="groupLabels"
         :renderSubComponent="renderSubComponent"
-        :columnVisibility="{ hiddenColumn: false }"
+        enable-column-list-control
       >
         <template #caption="{ table }">
           <div class="flex justify-between">

package/src/components/ui/table/BuiDataTable.vue

@@ -6,9 +6,12 @@ import {
 } from '@/components/ui/collapsible'
 import { BuiPaginationCommon, type PageSize } from '@/components/ui/pagination'
 import BuiTableRowSubrow from '@/components/ui/table/BuiTableRowSubrow.vue'
-import { valueUpdater } from '@/lib/utils'
+import { valueUpdater, cn } from '@/lib/utils'
 import type {
+  Column,
   ColumnDef,
+  ColumnOrderState,
+  ColumnSizingState,
   PaginationState,
   Row,
   RowSelectionState,
@@ -22,7 +25,7 @@ import {
   getSortedRowModel,
   useVueTable
 } from '@tanstack/vue-table'
-import { computed, watchEffect } from 'vue'
+import { computed, watchEffect, ref, watch } from 'vue'
 import {
   BuiTable,
   BuiTableBody,
@@ -31,8 +34,19 @@ import {
   BuiTableHead,
   BuiTableHeader,
   BuiTableRow,
-  getPinningStyle
+  getPinningStyle,
+  BuiDataTableColumnList
 } from './'
+import {
+  BuiCommand,
+  BuiCommandEmpty,
+  BuiCommandInput,
+  BuiCommandList
+} from '@/components/ui/command'
+import { BuiPopover, BuiPopoverContent, BuiPopoverTrigger } from '@/components/ui/popover'
+import { BuiScrollArea } from '@/components/ui/scroll-area'
+import { BuiButton } from '@/components/ui/button'
+import { Settings2Icon } from 'lucide-vue-next'
 
 const NO_GROUP_KEY = '#UNDEFINED#'
 
@@ -50,21 +64,38 @@ const props = withDefaults(
     getRowId?: (originalRow: TData, index: number, parent?: Row<TData>) => string
     renderSubComponent?: (row: Row<TData>) => (() => any) | undefined
     freezeHeader?: boolean
+    enableColumnListControl?: boolean
+    columnSearchPlaceholder?: string
+    columnSearchNotFound?: string
   }>(),
-  { pageSize: 10, showPagination: true, manualPagination: true, manualSorting: true, totalItems: 0 }
+  {
+    pageSize: 10,
+    showPagination: true,
+    manualPagination: true,
+    manualSorting: true,
+    totalItems: 0,
+    columnSearchPlaceholder: 'Column name',
+    columnSearchNotFound: 'Not found'
+  }
 )
 
 const sorting = defineModel<SortingState>('sorting')
 const pagination = defineModel<PaginationState>('pagination')
 const rowSelection = defineModel<RowSelectionState>('selection')
 const columnVisibility = defineModel<VisibilityState>('columnVisibility')
+const columnSizing = defineModel<ColumnSizingState>('columnSizing')
+const columnOrder = defineModel<ColumnOrderState>('columnOrder')
 const computedItems = computed(() =>
   props.manualPagination ? props.totalItems : props.data.length
 )
+const pinnedColumns = props.columns
+  .map((col) => (col.meta?.pinLeft && col.id ? col.id : ''))
+  .filter(Boolean)
+
 const table = useVueTable({
   initialState: {
     // TODO: column freeze
-    //columnPinning: { left: ['id'] },
+    columnPinning: { left: pinnedColumns },
     pagination: { pageSize: props.pageSize }
   },
   get data() {
@@ -85,9 +116,21 @@ const table = useVueTable({
   onRowSelectionChange: (updaterOrValue) => {
     valueUpdater(updaterOrValue, rowSelection)
   },
+  onColumnVisibilityChange: (updaterOrValue) => {
+    valueUpdater(updaterOrValue, columnVisibility)
+  },
+  onColumnSizingChange: (updaterOrValue) => {
+    valueUpdater(updaterOrValue, columnSizing)
+  },
+  onColumnOrderChange: (updaterOrValue) => {
+    valueUpdater(updaterOrValue, columnOrder)
+  },
   autoResetPageIndex: false,
   manualPagination: props.manualPagination, // set to false to enable client-side pagination
   manualSorting: props.manualSorting,
+  enableColumnResizing: true,
+  columnResizeMode: 'onChange',
+  columnResizeDirection: 'ltr',
   state: {
     get sorting() {
       return sorting.value
@@ -100,6 +143,12 @@ const table = useVueTable({
     },
     get columnVisibility() {
       return columnVisibility.value
+    },
+    get columnSizing() {
+      return columnSizing.value
+    },
+    get columnOrder() {
+      return columnOrder.value
     }
   },
   getRowId: props.getRowId
@@ -150,6 +199,31 @@ function getGroupLabel(index: number) {
   const labels = props.groupBy && props.groupLabels ? props.groupLabels[props.groupBy] || [] : []
   return labels[index]
 }
+
+const columnsList = ref<Column<TData, unknown>[]>(
+  table
+    .getAllColumns()
+    .filter((column) => typeof column.accessorFn !== 'undefined' && column.getCanHide())
+    .sort((a, b) => {
+      if (!columnOrder.value) return 0
+      else if (columnOrder.value?.indexOf(a.id) < 0 && columnOrder.value?.indexOf(b.id) >= 0)
+        return 1
+      else if (columnOrder.value?.indexOf(a.id) >= 0 && columnOrder.value?.indexOf(b.id) < 0)
+        return -1
+      else return columnOrder.value?.indexOf(a.id) - columnOrder.value?.indexOf(b.id)
+    })
+)
+const columnsListIds = computed(() => columnsList.value.map((col) => col.id))
+const open = ref(false)
+const searchColumn = ref('')
+
+const tableHeaders = computed(() =>
+  table.getHeaderGroups().length > 0 ? table.getHeaderGroups()[0].headers : undefined
+)
+
+watch(columnsListIds, () => {
+  table.setColumnOrder(columnsListIds.value)
+})
 </script>
 
 <template>
@@ -157,21 +231,64 @@ function getGroupLabel(index: number) {
     <slot name="caption" :table="table" />
   </div>
   <BuiTable>
-    <BuiTableHeader :freeze-header="props.freezeHeader">
-      <BuiTableRow v-for="headerGroup in table.getHeaderGroups()" :key="headerGroup.id">
-        <BuiTableHead
-          v-for="header in headerGroup.headers"
-          :key="header.id"
-          :style="{ ...getPinningStyle(header.column) }"
-          :freeze-header="props.freezeHeader"
-        >
-          <FlexRender
-            v-if="!header.isPlaceholder"
-            :render="header.column.columnDef.header"
-            :props="header.getContext()"
-          />
-        </BuiTableHead>
-      </BuiTableRow>
+    <template v-if="enableColumnListControl" #columnVisibility>
+      <BuiPopover v-model:open="open">
+        <BuiPopoverTrigger as-child>
+          <div class="absolute right-0 top-0 z-10 h-10 bg-background">
+            <div
+              class="flex h-full items-center border-l border-border/[0.16] bg-foreground/[0.04] px-1"
+            >
+              <BuiButton
+                variant="ghost"
+                class="flex h-8 w-8 items-center justify-center text-foreground"
+              >
+                <Settings2Icon class="h-4 w-4 flex-shrink-0 opacity-50" />
+              </BuiButton>
+            </div>
+          </div>
+        </BuiPopoverTrigger>
+        <BuiPopoverContent class="w-[250px] p-0" align="start">
+          <BuiCommand>
+            <BuiCommandInput
+              :placeholder="columnSearchPlaceholder"
+              v-model="searchColumn"
+              @input="(event) => (searchColumn = event.target.value)"
+            />
+            <BuiCommandList>
+              <BuiScrollArea class="h-[300px]">
+                <BuiCommandEmpty>{{ columnSearchNotFound }}</BuiCommandEmpty>
+                <BuiDataTableColumnList
+                  v-model:columns-list="columnsList as Column<TData, unknown>[]"
+                />
+              </BuiScrollArea>
+            </BuiCommandList>
+          </BuiCommand>
+        </BuiPopoverContent>
+      </BuiPopover>
+    </template>
+    <BuiTableHeader v-if="tableHeaders" :freeze-header="props.freezeHeader">
+      <BuiTableHead
+        v-for="header in tableHeaders"
+        :key="header.id"
+        :style="{ ...getPinningStyle(header.column), width: header.getSize() + 'px' }"
+        :freeze-header="props.freezeHeader"
+      >
+        <FlexRender
+          v-if="!header.isPlaceholder"
+          :render="header.column.columnDef.header"
+          :props="header.getContext()"
+        />
+        <div
+          @dblclick="() => header.column.resetSize()"
+          @mousedown="header.getResizeHandler()?.($event)"
+          :className="
+            cn(
+              'absolute top-0 right-0 h-full w-1 bg-muted-foreground opacity-0 cursor-col-resize select-none touch-none hover:opacity-50',
+              header.column.getIsResizing() ? 'bg-primary opacity-50' : ''
+            )
+          "
+        />
+      </BuiTableHead>
     </BuiTableHeader>
     <BuiTableBody>
       <template v-if="table.getRowModel().rows?.length">

package/src/components/ui/table/BuiDataTableColumnList.vue

@@ -0,0 +1,34 @@
+<script setup lang="ts" generic="TData, TValue">
+import type { Column } from '@tanstack/vue-table'
+import { useTemplateRef } from 'vue'
+
+import { BuiCommandItem } from '@/components/ui/command'
+import { BuiCheckbox } from '@/components/ui/checkbox'
+import { useSortable } from '@vueuse/integrations/useSortable'
+
+const columnsListRef = useTemplateRef<HTMLElement>('columnsListRef')
+const columnsList = defineModel<Column<TData, unknown>[]>('columnsList', {
+  default: [],
+  required: true
+})
+useSortable(columnsListRef, columnsList, { handle: '.dragHandler' })
+</script>
+
+<template>
+  <div ref="columnsListRef">
+    <BuiCommandItem
+      v-for="col in columnsList"
+      :key="`column-${col.id}`"
+      :value="col.id"
+      class="flex gap-4 px-2 py-1.5 text-xs font-medium capitalize text-muted-foreground"
+      @select="col.toggleVisibility()"
+    >
+      <BuiCheckbox :checked="col.getIsVisible()" />
+      <div class="dragHandler grow">
+        {{
+          col.columnDef.meta?.title || col.id.replace(/^values\./, '').replace(/([A-Z])/g, ' $1')
+        }}
+      </div>
+    </BuiCommandItem>
+  </div>
+</template>

package/src/components/ui/table/BuiTable.vue

@@ -7,6 +7,7 @@ const props = defineProps<{ class?: string }>()
 
 <template>
   <BuiScrollArea class="w-full grow overflow-auto rounded border border-border/[0.16]">
+    <slot name="columnVisibility" />
     <table :class="cn('w-full caption-top  text-sm', props.class)">
       <slot />
     </table>

package/src/components/ui/table/BuiTableHeader.vue

@@ -14,8 +14,8 @@ const props = defineProps<{
         '[&_tr]:border-border/[0.16]',
         props.class,
         props.freezeHeader
-          ? 'sticky top-0 z-[1] [&_th:first-child>div>div]:pl-6 [&_th:last-child>div>div]:border-r-0 [&_th:last-child>div>div]:pr-6 [&_tr:last-child]:border-b-0'
-          : '[&_th:first-child>div]:pl-6 [&_th:last-child>div]:border-0 [&_th:last-child>div]:pr-6 [&_tr]:border-b'
+          ? 'sticky top-0 z-[1] [&_th:first-child>div>div]:pl-6 [&_th:last-child>div>div]:border-r-0 [&_th:last-child>div>div]:pr-14 [&_tr:last-child]:border-b-0'
+          : '[&_th:first-child>div]:pl-6 [&_th:last-child>div]:border-0 [&_th:last-child>div]:pr-14 [&_tr]:border-b'
       )
     "
   >

package/src/components/ui/table/index.ts

@@ -12,12 +12,15 @@ export { default as BuiTableCaption } from './BuiTableCaption.vue'
 export { default as BuiTableEmpty } from './BuiTableEmpty.vue'
 export { default as BuiTableFooter } from './BuiTableFooter.vue'
 export { default as BuiDataTable } from './BuiDataTable.vue'
+export { default as BuiDataTableColumnList } from './BuiDataTableColumnList.vue'
 
 export function getPinningStyle<TData>(column: Column<TData, unknown>): CSSProperties {
-  const isPinned = column.getIsPinned()
-  return {
-    left: isPinned === 'left' ? '0' : undefined,
-    position: isPinned ? 'sticky' : 'relative',
-    zIndex: isPinned ? '1' : '0'
-  }
+  // FYI sticky columns not possible with transparent background colors
+  // const isPinned = column.getIsPinned()
+  // return {
+  //   left: isPinned === 'left' ? '0' : undefined,
+  //   position: isPinned ? 'sticky' : 'relative',
+  //   zIndex: isPinned ? '1' : '0'
+  // }
+  return { position: 'relative' }
 }

package/dist/BuiTable.vue_vue_type_script_setup_true_lang-D8Tseif4.js

@@ -1,27 +0,0 @@
-import { defineComponent as a, openBlock as s, createBlock as n, unref as o, withCtx as l, createElementVNode as c, normalizeClass as m, renderSlot as i, createVNode as f } from "vue";
-import { _ as p } from "./BuiScrollArea.vue_vue_type_script_setup_true_lang-D-nqw_Ka.js";
-import { _ } from "./BuiScrollBar.vue_vue_type_script_setup_true_lang-DNZ_v7U0.js";
-import { g as d } from "./utils-CwP7Up6y.js";
-const B = /* @__PURE__ */ a({
-  __name: "BuiTable",
-  props: {
-    class: {}
-  },
-  setup(e) {
-    const r = e;
-    return (t, u) => (s(), n(o(p), { class: "w-full grow overflow-auto rounded border border-border/[0.16]" }, {
-      default: l(() => [
-        c("table", {
-          class: m(o(d)("w-full caption-top  text-sm", r.class))
-        }, [
-          i(t.$slots, "default")
-        ], 2),
-        f(o(_), { orientation: "horizontal" })
-      ]),
-      _: 3
-    }));
-  }
-});
-export {
-  B as _
-};