@soft-stech/bootsman-ui-shadcn 1.5.4 → 1.5.6

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

@@ -80,14 +80,22 @@ const variantOptions = ['default', 'ghost'] as const
 
     <Variant title="vertical">
       <BuiTabs default-value="general" class="flex" orientation="vertical">
-        <BuiTabsList class="w-40" variant="vertical">
+        <BuiTabsList variant="vertical">
           <BuiTabsTrigger value="general" variant="vertical">General</BuiTabsTrigger>
           <BuiTabsTrigger value="health" variant="vertical">Health check</BuiTabsTrigger>
-          <BuiTabsTrigger value="resources" variant="vertical">Resources</BuiTabsTrigger>
+          <BuiTabsTrigger value="resources" variant="vertical">
+            A Very Very Veeeeeery Long Label For Resources
+          </BuiTabsTrigger>
         </BuiTabsList>
-        <BuiTabsContent value="general" class="mt-0 flex-grow"> General content </BuiTabsContent>
-        <BuiTabsContent value="health" class="mt-0"> Health check content </BuiTabsContent>
-        <BuiTabsContent value="resources" class="mt-0"> Resources content </BuiTabsContent>
+        <BuiTabsContent value="general" class="mt-0 flex-grow bg-background p-2">
+          General content
+        </BuiTabsContent>
+        <BuiTabsContent value="health" class="mt-0 bg-background p-2">
+          Health check content
+        </BuiTabsContent>
+        <BuiTabsContent value="resources" class="mt-0 bg-background p-2">
+          Resources content
+        </BuiTabsContent>
       </BuiTabs>
     </Variant>
   </Story>

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

@@ -11,6 +11,7 @@ import type {
   Column,
   ColumnDef,
   ColumnOrderState,
+  Header,
   PaginationState,
   Row,
   RowSelectionState,
@@ -44,6 +45,7 @@ import {
   BuiCommandItem,
   BuiCommandSeparator
 } from '@/components/ui/command'
+import { BuiContextMenuContent, BuiContextMenuItem } from '@/components/ui/context-menu'
 import { BuiPopover, BuiPopoverContent, BuiPopoverTrigger } from '@/components/ui/popover'
 import { BuiScrollArea } from '@/components/ui/scroll-area'
 import { BuiButton } from '@/components/ui/button'
@@ -53,6 +55,12 @@ import { useResizeColumns } from '@/lib/useResizeColumns'
 import { isEqual } from 'lodash-es'
 
 const NO_GROUP_KEY = '#UNDEFINED#'
+const defaultColumnContextMenuTranslations = {
+  hideColumn: 'Hide column',
+  resetSize: 'Reset size',
+  sortAsc: 'Sort ascending',
+  sortDesc: 'Sort descending'
+}
 
 const props = withDefaults(
   defineProps<{
@@ -78,6 +86,12 @@ const props = withDefaults(
       page: string
       of: string
     }
+    headerContextMenuTranslations?: {
+      hideColumn?: string
+      resetSize?: string
+      sortAsc?: string
+      sortDesc?: string
+    }
   }>(),
   {
     pageSize: 10,
@@ -134,6 +148,7 @@ const table = useVueTable({
 
     await nextTick()
 
+    resetCells()
     setInitialColumnWidths()
   },
   onColumnOrderChange: (updaterOrValue) => {
@@ -273,6 +288,50 @@ watchEffect(() => {
 })
 
 useEventListener(document, 'mouseup', handleResizeControlMouseUp)
+
+type HeaderCellAction = 'hideColumn' | 'resetSize' | 'sortAsc' | 'sortDesc'
+const availableHeaderCellActions = (header: Header<TData, unknown>) => {
+  const out: HeaderCellAction[] = []
+
+  if (props.manualSorting) {
+    const currentHeaderCell = tableHeaderElement.value?.headRef?.querySelector(
+      `th[id="${header.id}_cell"]`
+    ) as HTMLTableCellElement | undefined
+    const buttonForSorting = currentHeaderCell?.querySelector('button[sorting-enabled]')
+
+    if (buttonForSorting) {
+      out.push('sortAsc', 'sortDesc')
+    }
+  }
+
+  if (props.enableColumnListControl && header.column.getCanHide()) {
+    out.push('hideColumn')
+  }
+
+  if (props.enableColumnResizing) {
+    out.push('resetSize')
+  }
+
+  return out
+}
+const onHeaderCellAction = (header: Header<TData, unknown>, action: HeaderCellAction) => {
+  switch (action) {
+    case 'hideColumn':
+      header.column.toggleVisibility()
+      break
+    case 'resetSize':
+      resetCells()
+      break
+    case 'sortAsc':
+      header.column.toggleSorting(false)
+      break
+    case 'sortDesc':
+      header.column.toggleSorting(true)
+      break
+    default:
+      break
+  }
+}
 </script>
 
 <template>
@@ -357,6 +416,21 @@ useEventListener(document, 'mouseup', handleResizeControlMouseUp)
             )
           "
         />
+        <template #actions>
+          <BuiContextMenuContent v-if="availableHeaderCellActions(header).length > 0">
+            <BuiContextMenuItem
+              v-for="(action, idx) in availableHeaderCellActions(header)"
+              @click="onHeaderCellAction(header, action)"
+              :key="idx"
+            >
+              {{
+                headerContextMenuTranslations && headerContextMenuTranslations[action]
+                  ? headerContextMenuTranslations[action]
+                  : defaultColumnContextMenuTranslations[action]
+              }}
+            </BuiContextMenuItem>
+          </BuiContextMenuContent>
+        </template>
       </BuiTableHead>
     </BuiTableHeader>
     <BuiTableBody>

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

@@ -1,4 +1,5 @@
-<script setup lang="ts">
+<script setup lang="ts" generic="TData, TValue">
+import { BuiContextMenu, BuiContextMenuTrigger } from '@/components/ui/context-menu'
 import { cn } from '@/lib/utils'
 
 const props = defineProps<{
@@ -17,7 +18,27 @@ const props = defineProps<{
       )
     "
   >
+    <BuiContextMenu v-if="$slots.actions">
+      <BuiContextMenuTrigger as-child>
+        <div
+          class="flex h-full items-center !border-b !border-border/[0.16]"
+          :class="{
+            'bg-foreground/[0.04]': props.freezeHeader,
+            'header-cell_wrapper': !props.freezeHeader
+          }"
+        >
+          <div
+            class="flex h-full w-full items-center whitespace-nowrap border-r border-border/[0.16] px-2 text-sm font-semibold"
+            :class="{ 'header-cell_wrapper': props.freezeHeader }"
+          >
+            <slot />
+          </div>
+        </div>
+      </BuiContextMenuTrigger>
+      <slot name="actions" />
+    </BuiContextMenu>
     <div
+      v-else
       class="flex h-full items-center !border-b !border-border/[0.16]"
       :class="{
         'bg-foreground/[0.04]': props.freezeHeader,

package/src/components/ui/tabs/BuiTabsTrigger.vue

@@ -13,7 +13,7 @@ const props = defineProps<Props>()
 
 <template>
   <TabsTrigger v-bind="props" :class="cn(tabsTriggerVariants({ variant }), props.class ?? '')">
-    <div class="flex items-center">
+    <div class="flex items-center text-left">
       <slot />
     </div>
   </TabsTrigger>

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

@@ -10,7 +10,8 @@ export const tabsListVariants = cva('inline-flex items-center justify-center rou
     variant: {
       default: 'bg-muted text-muted-foreground p-0',
       ghost: 'bg-background bg-text-foreground',
-      vertical: 'bg-muted text-muted-foreground p-0 flex flex-col justify-start rounded-none'
+      vertical:
+        'w-[17.5rem] shrink-0 bg-tabs-sidebar text-muted-foreground p-0 flex flex-col justify-start rounded-none shadow-tab-sidebar-shadow'
     }
   },
   defaultVariants: {
@@ -19,16 +20,16 @@ export const tabsListVariants = cva('inline-flex items-center justify-center rou
 })
 
 export const tabsTriggerVariants = cva(
-  'inline-flex items-center justify-center whitespace-nowrap px-3 py-1 text-sm font-semibold ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-foreground',
+  'inline-flex items-center justify-center px-3 py-1 text-sm font-semibold ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:text-foreground',
   {
     variants: {
       variant: {
         default:
-          'rounded-sm text-foreground opacity-[0.56] hover:opacity-100 data-[state=active]:opacity-100 data-[state=active]:bg-background my-1 [&:first-child]:ml-1 [&:last-child]:mr-1 data-[state=active]:shadow-tab-shadow',
+          'whitespace-nowrap rounded-sm text-foreground opacity-[0.56] hover:opacity-100 data-[state=active]:opacity-100 data-[state=active]:bg-background my-1 [&:first-child]:ml-1 [&:last-child]:mr-1 data-[state=active]:shadow-tab-shadow',
         ghost:
-          'border-transparent text-muted-foreground pb-0 [&_div]:pb-0.5 [&_div]:data-[state=active]:border-b-2 [&_div]:data-[state=active]:border-primary',
+          'whitespace-nowrap border-transparent text-muted-foreground pb-0 [&_div]:pb-0.5 [&_div]:data-[state=active]:border-b-2 [&_div]:data-[state=active]:border-primary',
         vertical:
-          'border-transparent text-primary data-[state=active]:border-primary data-[state=active]:bg-background border-l-2 border-b-0 w-full h-8 justify-start pl-6'
+          'border-transparent text-primary data-[state=active]:border-primary data-[state=active]:bg-background data-[state=active]:shadow-tab-sidebar-shadow border-l-2 border-b-0 w-full h-fit justify-start pl-6'
       }
     },
     defaultVariants: {

package/src/lib/utils.ts

@@ -31,6 +31,7 @@ export const tableColumnSortCommon = (column: Column<any>, name: string) => {
     {
       variant: 'none',
       class: 'text-foreground px-0 text-sm font-semibold h-full',
+      'sorting-enabled': '',
       onClick: () => column.toggleSorting(column.getIsSorted() === 'asc')
     },
     () => [

package/src/tailwind-preset.ts

@@ -30,6 +30,7 @@ export default {
         background: 'hsl(var(--background))',
         foreground: 'hsl(var(--foreground))',
         sidebar: 'hsl(var(--side-bar))',
+        'tabs-sidebar': 'hsl(var(--tabs-sidebar))',
         primary: {
           DEFAULT: 'hsl(var(--primary) / <alpha-value>)',
           foreground: 'hsl(var(--primary-foreground) / <alpha-value>)'
@@ -92,7 +93,8 @@ export default {
         level2:
           '0px 32px 16px 0px hsl(var(--tab-shadow)), 0px 16px 16px 0px hsl(var(--tab-shadow)), 0px 16px 16px 0px hsl(var(--tab-shadow))',
         level3:
-          '0px 56px 24px 0px hsl(var(--tab-shadow)), 0px 32px 24px 0px hsl(var(--tab-shadow)), 0px 32px 24px 0px hsl(var(--tab-shadow))'
+          '0px 56px 24px 0px hsl(var(--tab-shadow)), 0px 32px 24px 0px hsl(var(--tab-shadow)), 0px 32px 24px 0px hsl(var(--tab-shadow))',
+        'tab-sidebar-shadow': 'inset -8px 0px 16px 0px hsl(var(--tabs-sidebar-shadow))'
       },
       keyframes: {
         'accordion-down': {

package/dist/BuiTableHead.vue_vue_type_script_setup_true_lang-7Lueg0eT.js

@@ -1,37 +0,0 @@
-import { defineComponent as t, openBlock as s, createElementBlock as d, normalizeClass as r, unref as n, createElementVNode as o, renderSlot as c } from "vue";
-import { g as f } from "./utils-Dn2Y7TRK.js";
-const b = /* @__PURE__ */ t({
-  __name: "BuiTableHead",
-  props: {
-    class: {},
-    freezeHeader: { type: Boolean }
-  },
-  setup(l) {
-    const e = l;
-    return (a, p) => (s(), d("th", {
-      class: r(
-        n(f)(
-          "relative h-10 text-left align-middle text-foreground [&:has([role=checkbox])]:pr-0 ",
-          e.class,
-          e.freezeHeader ? "bg-background p-0" : "bg-foreground/[0.04] p-0"
-        )
-      )
-    }, [
-      o("div", {
-        class: r(["flex h-full items-center !border-b !border-border/[0.16]", {
-          "bg-foreground/[0.04]": e.freezeHeader,
-          "header-cell_wrapper": !e.freezeHeader
-        }])
-      }, [
-        o("div", {
-          class: r(["flex h-full w-full items-center whitespace-nowrap border-r border-border/[0.16] px-2 text-sm font-semibold", { "header-cell_wrapper": e.freezeHeader }])
-        }, [
-          c(a.$slots, "default")
-        ], 2)
-      ], 2)
-    ], 2));
-  }
-});
-export {
-  b as _
-};