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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soft-stech/bootsman-ui-shadcn",
-  "version": "1.4.19",
+  "version": "1.4.20",
   "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'