@soft-stech/bootsman-ui-shadcn 1.1.9 → 1.1.11

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

@@ -0,0 +1,38 @@
+<script setup lang="ts">
+import { BuiHealth, BuiSlider } from '@/index'
+
+import { computed, ref } from 'vue'
+
+const h1 = ref([1])
+const h2 = ref([3])
+const h3 = ref([1])
+
+const health1 = computed(() => {
+  return [
+    { id: 'Running', class: 'bg-green-500 after:bg-green-500', count: h1.value[0] },
+    { id: 'Info', class: 'bg-yellow-500 after:bg-yellow-500', count: h2.value[0] },
+    { id: 'Error', class: 'bg-red-500 after:bg-red-500', count: h3.value[0] }
+  ]
+})
+</script>
+
+<template>
+  <Story title="BuiHealth" autoPropsDisabled :layout="{ type: 'grid', width: '33%' }">
+    <Variant title="BuiHealth">
+      <div class="m-4">
+        <div class="flex flex-col gap-2">
+          <BuiHealth :model-value="health1" class="max-w-[300px]" />
+
+          {{ h1 }}
+          <BuiSlider v-model="h1" :step="1" :max="50" class="max-w-[300px]" />
+
+          {{ h2 }}
+          <BuiSlider v-model="h2" :step="1" :max="50" class="max-w-[300px]" />
+
+          {{ h3 }}
+          <BuiSlider v-model="h3" :step="1" :max="50" class="max-w-[300px]" />
+        </div>
+      </div>
+    </Variant>
+  </Story>
+</template>

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

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { BuiCollapsible, BuiCollapsibleContent, BuiCollapsibleTrigger, BuiButton } from '@/index'
+import { ChevronsUpDown } from 'lucide-vue-next'
+import { ref } from 'vue'
+
+const isOpen = ref(false)
+</script>
+
+<template>
+  <Story title="BuiCollapsible" autoPropsDisabled>
+    <Variant :key="`variant-default`" :title="`Tooltip`">
+      <div class="flex justify-center pt-12">
+        <BuiCollapsible v-model:open="isOpen" class="w-[350px] space-y-2">
+          <div class="flex items-center justify-between space-x-4 px-4">
+            <h4 class="text-sm font-semibold">@peduarte starred 3 repositories</h4>
+            <BuiCollapsibleTrigger as-child>
+              <BuiButton variant="ghost" size="sm" class="w-9 p-0">
+                <ChevronsUpDown class="h-4 w-4" />
+                <span class="sr-only">Toggle</span>
+              </BuiButton>
+            </BuiCollapsibleTrigger>
+          </div>
+          <div class="rounded-md border px-4 py-3 font-mono text-sm">@radix-ui/primitives</div>
+          <BuiCollapsibleContent class="space-y-2">
+            <div class="rounded-md border px-4 py-3 font-mono text-sm">@radix-ui/colors</div>
+            <div class="rounded-md border px-4 py-3 font-mono text-sm">@stitches/react</div>
+          </BuiCollapsibleContent>
+        </BuiCollapsible>
+      </div>
+    </Variant>
+  </Story>
+</template>

package/src/components/ui/collapsible/BuiCollapsible.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { CollapsibleRoot, useForwardPropsEmits } from 'radix-vue'
+import type { CollapsibleRootEmits, CollapsibleRootProps } from 'radix-vue'
+
+const props = defineProps<CollapsibleRootProps>()
+const emits = defineEmits<CollapsibleRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <CollapsibleRoot v-slot="{ open }" v-bind="forwarded">
+    <slot :open="open" />
+  </CollapsibleRoot>
+</template>

package/src/components/ui/collapsible/BuiCollapsibleContent.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { CollapsibleContent, type CollapsibleContentProps } from 'radix-vue'
+
+const props = defineProps<CollapsibleContentProps>()
+</script>
+
+<template>
+  <CollapsibleContent v-bind="props" class="overflow-hidden transition-all data-[state=closed]:animate-collapsible-up data-[state=open]:animate-collapsible-down">
+    <slot />
+  </CollapsibleContent>
+</template>

package/src/components/ui/collapsible/BuiCollapsibleTrigger.vue

@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { CollapsibleTrigger, type CollapsibleTriggerProps } from 'radix-vue'
+
+const props = defineProps<CollapsibleTriggerProps>()
+</script>
+
+<template>
+  <CollapsibleTrigger v-bind="props">
+    <slot />
+  </CollapsibleTrigger>
+</template>

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

@@ -0,0 +1,3 @@
+export { default as BuiCollapsible } from './BuiCollapsible.vue'
+export { default as BuiCollapsibleTrigger } from './BuiCollapsibleTrigger.vue'
+export { default as BuiCollapsibleContent } from './BuiCollapsibleContent.vue'

package/src/components/ui/health/BuiHealth.vue

@@ -0,0 +1,77 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { type PrimitiveProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+import { capHealthVariants, healthVariants } from '.'
+
+export interface HealthRootProps extends PrimitiveProps {
+  modelValue?: { id: string; class: HTMLAttributes['class']; count: number }[]
+}
+
+const props = withDefaults(
+  defineProps<
+    HealthRootProps & {
+      class?: HTMLAttributes['class']
+      variant?: NonNullable<Parameters<typeof healthVariants>[0]>['variant']
+    }
+  >(),
+  {
+    class: '',
+    modelValue: () => []
+  }
+)
+
+const total = computed(() => {
+  return props.modelValue.reduce((acc, item) => acc + item.count, 0)
+})
+
+const indicators = computed(() => {
+  let left = 0
+  return props.modelValue
+    .map((indicator) => {
+      const value = (indicator.count / total.value) * 100
+
+      const newIndicator = {
+        ...indicator,
+        left: left,
+        value
+      }
+
+      left += value
+
+      return newIndicator
+    })
+    .filter((indicator) => indicator.count > 0)
+})
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        `relative w-full overflow-hidden bg-primary bg-opacity-20 after:absolute after:right-0 after:top-0 after:bg-primary after:bg-opacity-10`,
+        healthVariants({ variant }),
+        props.class
+      )
+    "
+    v-bind="props"
+  >
+    <template v-for="indicator in indicators" :key="indicator.id">
+      <div
+        :class="
+          cn(
+            'absolute box-content flex-1 bg-primary transition-all duration-300 after:absolute after:right-0 after:top-0 after:bg-primary',
+            healthVariants({ variant }),
+            indicator.class
+          )
+        "
+        :style="`width: calc(calc(100% - ${capHealthVariants[variant ?? 'default']}) * ${
+          indicator.value * 0.01
+        }); left: calc(calc(100% - ${capHealthVariants[variant ?? 'default']}) * ${
+          indicator.left * 0.01
+        });`"
+      />
+    </template>
+  </div>
+</template>

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

@@ -0,0 +1,22 @@
+export { default as BuiHealth } from './BuiHealth.vue'
+
+import { cva } from 'class-variance-authority'
+
+export const healthVariants = cva('after:rounded-[50%/50%]', {
+  variants: {
+    variant: {
+      sm: 'h-5 [&>*]:pl-2 rounded-[8px/100%] after:h-5 after:w-2',
+      default: 'h-10 [&>*]:pl-4 rounded-[16px/100%] after:h-10 after:w-4',
+      lg: 'h-20 [&>*]:pl-8 rounded-[32px/100%] after:h-20 after:w-8 before:h-20 before:w-8'
+    }
+  },
+  defaultVariants: {
+    variant: 'default'
+  }
+})
+
+export const capHealthVariants = {
+  sm: '8px',
+  default: '16px',
+  lg: '32px'
+} as const

package/src/index.ts

@@ -21,6 +21,7 @@ export * from './components/ui/label/index'
 export * from './components/ui/pagination/index'
 export * from './components/ui/popover/index'
 export * from './components/ui/progress/index'
+export * from './components/ui/health/index'
 export * from './components/ui/radio-group/index'
 export * from './components/ui/select/index'
 export * from './components/ui/separator/index'
@@ -34,6 +35,7 @@ export * from './components/ui/toggle/index'
 export * from './components/ui/slider/index'
 export * from './components/ui/skeleton/index'
 export * from './components/ui/scroll-area/index'
+export * from './components/ui/collapsible/index'
 
 export * from './lib/utils'
 export { default as tailwind } from './tailwind-preset'