@soft-stech/bootsman-ui-shadcn 1.4.19 → 1.4.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soft-stech/bootsman-ui-shadcn",
-  "version": "1.4.19",
+  "version": "1.4.21",
   "type": "module",
   "files": [
     "dist",

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

@@ -4,6 +4,7 @@ import BuiAccordionContent from '@/components/ui/accordion/BuiAccordionContent.v
 import BuiAccordionItem from '@/components/ui/accordion/BuiAccordionItem.vue'
 import BuiAccordionTrigger from '@/components/ui/accordion/BuiAccordionTrigger.vue'
 import BuiButton from '@/components/ui/button/BuiButton.vue'
+import BuiAdvancedAccordionTrigger from '@/components/ui/accordion/BuiAdvancedAccordionTrigger.vue'
 </script>
 
 <template>
@@ -57,5 +58,58 @@ import BuiButton from '@/components/ui/button/BuiButton.vue'
         </BuiAccordionItem>
       </BuiAccordion>
     </Variant>
+    <Variant title="AdvancedTrigger">
+      <BuiAccordion type="single" collapsible class="flex flex-col gap-4 px-2">
+        <BuiAccordionItem value="item-1" class="border-orange-400">
+          <BuiAdvancedAccordionTrigger
+            border-color-class="border-orange-400"
+            bg-color-class="bg-orange-400/[0.16]"
+            description-color-class="text-orange-400"
+            icon-bg-class="bg-orange-400"
+          >
+            Member Roles
+
+            <template #description>
+              Control who has access to the cluster and what permission they have to change it
+            </template>
+          </BuiAdvancedAccordionTrigger>
+
+          <BuiAccordionContent>
+            Lorem, ipsum dolor sit amet consectetur adipisicing elit. Minus a voluptatem, ipsa autem
+            aspernatur beatae fugiat deleniti laborum dolorem obcaecati necessitatibus harum dolore
+            error! Perferendis nostrum eius eligendi dolorum reprehenderit?
+          </BuiAccordionContent>
+        </BuiAccordionItem>
+        <BuiAccordionItem value="item-2" class="border-orange-400" :disabled="true">
+          <BuiAdvancedAccordionTrigger
+            border-color-class="border-orange-400"
+            bg-color-class="bg-orange-400/[0.16]"
+            description-color-class="text-orange-400"
+            icon-bg-class="bg-orange-400"
+            :is-disabled-as-normal="true"
+            :is-icon-hidden="true"
+          >
+            Member Roles
+
+            <template #description>
+              Control who has access to the cluster and what permission they have to change it
+            </template>
+            <template #actions>
+              <BuiButton
+                variant="outline"
+                class="border-orange-400 text-orange-400"
+                @click="
+                  () => {
+                    console.log('click')
+                  }
+                "
+              >
+                LOG: click
+              </BuiButton>
+            </template>
+          </BuiAdvancedAccordionTrigger>
+        </BuiAccordionItem>
+      </BuiAccordion>
+    </Variant>
   </Story>
 </template>

package/src/components/ui/accordion/BuiAdvancedAccordionTrigger.vue

@@ -0,0 +1,71 @@
+<script setup lang="ts">
+// TODO see https://github.com/shadcn-ui/ui/pull/232 when completed
+
+import { cn } from '@/lib/utils'
+import { ChevronDown } from 'lucide-vue-next'
+import { AccordionHeader, AccordionTrigger, type AccordionTriggerProps } from 'radix-vue'
+
+const props = defineProps<
+  AccordionTriggerProps & {
+    class?: string
+    borderColorClass?: string
+    bgColorClass?: string
+    iconBgClass?: string
+    descriptionColorClass?: string
+    isIconHidden?: boolean
+    isDisabledAsNormal?: boolean
+  }
+>()
+</script>
+
+<template>
+  <AccordionHeader
+    :class="
+      cn(
+        'flex flex-col p-2 data-[state=closed]:rounded-sm data-[state=open]:rounded-t-sm data-[state=open]:border-b',
+        props.borderColorClass ? props.borderColorClass : 'border-border',
+        props.bgColorClass ? props.bgColorClass : 'bg-primary/[0.16]'
+      )
+    "
+    as="div"
+  >
+    <div class="flex justify-between gap-2">
+      <AccordionTrigger
+        v-bind="props"
+        :class="
+          cn(
+            'flex flex-1 items-center gap-2 rounded align-middle text-base font-semibold leading-6 ring-offset-background transition-all hover:underline focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none  [&[data-state=open]>svg]:rotate-180',
+            props.class,
+            props.isDisabledAsNormal ? 'disabled:opacity-100' : 'disabled:opacity-30'
+          )
+        "
+      >
+        <ChevronDown
+          :class="
+            cn(
+              'h-4 w-4 shrink-0 rounded-sm text-primary-foreground transition-transform duration-200',
+              props.iconBgClass
+                ? `${props.iconBgClass} dark:${props.iconBgClass}`
+                : 'bg-primary/[0.56] dark:bg-primary/[1]',
+              props.isIconHidden ? 'invisible' : 'visible'
+            )
+          "
+        />
+        <slot />
+      </AccordionTrigger>
+      <slot name="actions" />
+    </div>
+
+    <p
+      v-if="$slots.description"
+      :class="
+        cn(
+          'mx-6 mt-2 align-middle text-xs font-normal leading-4',
+          props.descriptionColorClass ? props.descriptionColorClass : ''
+        )
+      "
+    >
+      <slot name="description" />
+    </p>
+  </AccordionHeader>
+</template>

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

@@ -2,3 +2,4 @@ export { default as BuiAccordion } from './BuiAccordion.vue'
 export { default as BuiAccordionContent } from './BuiAccordionContent.vue'
 export { default as BuiAccordionItem } from './BuiAccordionItem.vue'
 export { default as BuiAccordionTrigger } from './BuiAccordionTrigger.vue'
+export { default as BuiAdvancedAccordionTrigger } from './BuiAdvancedAccordionTrigger.vue'

package/src/components/ui/scroll-area/BuiScrollBar.vue

@@ -3,9 +3,12 @@ import { type HTMLAttributes, computed } from 'vue'
 import { ScrollAreaScrollbar, type ScrollAreaScrollbarProps, ScrollAreaThumb } from 'radix-vue'
 import { cn } from '@/lib/utils'
 
-const props = withDefaults(defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(), {
-  orientation: 'vertical',
-})
+const props = withDefaults(
+  defineProps<ScrollAreaScrollbarProps & { class?: HTMLAttributes['class'] }>(),
+  {
+    orientation: 'vertical'
+  }
+)
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
@@ -18,12 +21,13 @@ const delegatedProps = computed(() => {
   <ScrollAreaScrollbar
     v-bind="delegatedProps"
     :class="
-      cn('flex touch-none select-none transition-colors',
-         orientation === 'vertical'
-           && 'h-full w-2.5 border-l border-l-transparent p-px',
-         orientation === 'horizontal'
-           && 'h-2.5 flex-col border-t border-t-transparent p-px',
-         props.class)"
+      cn(
+        'z-[2] flex touch-none select-none transition-colors',
+        orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-px',
+        orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent p-px',
+        props.class
+      )
+    "
   >
     <ScrollAreaThumb class="relative flex-1 rounded-full bg-border" />
   </ScrollAreaScrollbar>

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

@@ -49,6 +49,7 @@ const props = withDefaults(
     groupLabels?: { [key in keyof TData]?: string[] }
     getRowId?: (originalRow: TData, index: number, parent?: Row<TData>) => string
     renderSubComponent?: (row: Row<TData>) => (() => any) | undefined
+    freezeHeader?: boolean
   }>(),
   { pageSize: 10, showPagination: true, manualPagination: true, manualSorting: true, totalItems: 0 }
 )
@@ -156,12 +157,13 @@ function getGroupLabel(index: number) {
     <slot name="caption" :table="table" />
   </div>
   <BuiTable>
-    <BuiTableHeader>
+    <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"

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

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

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

@@ -1,19 +1,34 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
 
-const props = defineProps<{ class?: string }>()
+const props = defineProps<{
+  class?: string
+  freezeHeader?: boolean
+}>()
 </script>
 
 <template>
   <th
     :class="
       cn(
-        'h-10 bg-foreground/[0.04] text-left align-middle text-foreground [&:has([role=checkbox])]:pr-0 ',
-        props.class
+        'h-10 text-left align-middle text-foreground [&:has([role=checkbox])]:pr-0 ',
+        props.class,
+        props.freezeHeader ? 'bg-background p-0' : 'bg-foreground/[0.04]'
       )
     "
   >
     <div
+      v-if="props.freezeHeader"
+      class="flex h-full items-center border-b border-border/[0.16] bg-foreground/[0.04]"
+    >
+      <div
+        class="flex h-8 w-full items-center whitespace-nowrap border-r border-border/[0.16] px-3 text-sm font-semibold"
+      >
+        <slot />
+      </div>
+    </div>
+    <div
+      v-else
       class="flex h-8 items-center whitespace-nowrap border-r border-border/[0.16] px-3 py-1 text-sm font-semibold"
     >
       <slot />

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

@@ -1,15 +1,21 @@
 <script setup lang="ts">
 import { cn } from '@/lib/utils'
 
-const props = defineProps<{ class?: string }>()
+const props = defineProps<{
+  class?: string
+  freezeHeader?: boolean
+}>()
 </script>
 
 <template>
   <thead
     :class="
       cn(
-        '[&_th:first-child>div]:pl-6 [&_th:last-child>div]:border-0 [&_th:last-child>div]:pr-6 [&_tr]:border-b [&_tr]:border-border/[0.16]',
-        props.class
+        '[&_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'
       )
     "
   >

package/dist/BuiTableHead.vue_vue_type_script_setup_true_lang-uE4Py8ky.js

@@ -1,26 +0,0 @@
-import { defineComponent as t, openBlock as s, createElementBlock as n, normalizeClass as a, unref as l, createElementVNode as c, renderSlot as d } from "vue";
-import { g as p } from "./utils-CwP7Up6y.js";
-const m = { class: "flex h-8 items-center whitespace-nowrap border-r border-border/[0.16] px-3 py-1 text-sm font-semibold" }, u = /* @__PURE__ */ t({
-  __name: "BuiTableHead",
-  props: {
-    class: {}
-  },
-  setup(e) {
-    const o = e;
-    return (r, i) => (s(), n("th", {
-      class: a(
-        l(p)(
-          "h-10 bg-foreground/[0.04] text-left align-middle text-foreground [&:has([role=checkbox])]:pr-0 ",
-          o.class
-        )
-      )
-    }, [
-      c("div", m, [
-        d(r.$slots, "default")
-      ])
-    ], 2));
-  }
-});
-export {
-  u as _
-};

package/dist/BuiTableHeader.vue_vue_type_script_setup_true_lang-BcnB4-3x.js

@@ -1,24 +0,0 @@
-import { defineComponent as o, openBlock as s, createElementBlock as l, normalizeClass as a, unref as c, renderSlot as d } from "vue";
-import { g as n } from "./utils-CwP7Up6y.js";
-const m = /* @__PURE__ */ o({
-  __name: "BuiTableHeader",
-  props: {
-    class: {}
-  },
-  setup(r) {
-    const e = r;
-    return (t, i) => (s(), l("thead", {
-      class: a(
-        c(n)(
-          "[&_th:first-child>div]:pl-6 [&_th:last-child>div]:border-0 [&_th:last-child>div]:pr-6 [&_tr]:border-b [&_tr]:border-border/[0.16]",
-          e.class
-        )
-      )
-    }, [
-      d(t.$slots, "default")
-    ], 2));
-  }
-});
-export {
-  m as _
-};