@soft-stech/bootsman-ui-shadcn 1.5.5 → 1.5.7

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

@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { ref } from 'vue'
 import { z } from 'zod'
-
 import { cn } from '@/lib/utils'
 import { BuiButton } from '@/components/ui/button'
 import {
@@ -10,10 +9,11 @@ import {
   BuiCommandGroup,
   BuiCommandInput,
   BuiCommandItem,
-  BuiCommandList
+  BuiCommandList,
+  BuiCommandNewItem
 } from '@/components/ui/command'
 import { BuiPopover, BuiPopoverContent, BuiPopoverTrigger } from '@/components/ui/popover'
-import { CheckIcon, ChevronsUpDownIcon, ChevronDown } from 'lucide-vue-next'
+import { CheckIcon, ChevronsUpDownIcon, ChevronDown, CirclePlusIcon } from 'lucide-vue-next'
 import {
   BuiForm,
   BuiFormField,
@@ -34,14 +34,18 @@ const frameworks = [
 
 const open = ref(false)
 const value = ref<string>('')
+const search = ref<string>('')
 
 const formSchema = toTypedSchema(
   z.object({
-    namespace: z.string().min(2)
+    namespace: z.string().min(2),
+    groups: z.array(z.string())
   })
 )
 const isNamespacesPopoverOpen = ref(false)
+const isGroupsPopoverOpen = ref(false)
 const namespaces = ['default', 'local', 'my-namespace']
+const existingGroups = ref(['group-1', 'group-2', 'group-3'])
 
 // const filterFunction = (list: typeof frameworks, search: string) => list.filter(i => i.value.toLowerCase().includes(search.toLowerCase()))
 </script>
@@ -178,5 +182,118 @@ const namespaces = ['default', 'local', 'my-namespace']
         </BuiForm>
       </div>
     </Variant>
+
+    <Variant key="multi-with-create" title="Multiselect + create">
+      <div class="p-4">
+        <BuiForm :validation-schema="formSchema" :initial-values="{ groups: ['group-1'] }">
+          <BuiFormField name="groups" v-slot="{ meta, validate, value, setValue }">
+            <BuiFormItem class="w-full">
+              <BuiLabel :for="`groups`" class="flex gap-2">
+                <div class="flex">Groups</div>
+              </BuiLabel>
+
+              <BuiPopover
+                v-model:open="isGroupsPopoverOpen"
+                @update:open="
+                  (isOpen) => {
+                    if (!isOpen) {
+                      validate()
+                    }
+                  }
+                "
+              >
+                <BuiPopoverTrigger as-child :id="`groups`">
+                  <BuiButton
+                    variant="outline"
+                    size="lg"
+                    role="combobox"
+                    :aria-expanded="isGroupsPopoverOpen"
+                    class="flex h-10 w-full items-center justify-between whitespace-nowrap rounded-md border border-input bg-background px-3 py-2 text-sm text-inherit ring-offset-background placeholder:text-muted-foreground hover:bg-transparent focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 active:bg-transparent active:outline-none active:ring-0 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:min-w-0 [&>span]:truncate"
+                    :class="!meta.valid && meta.validated ? '!border-destructive-foreground' : ''"
+                  >
+                    <span>
+                      {{ value.length ? value.join(', ') : 'Select multiple or add' }}
+                    </span>
+                    <ChevronDown class="h-4 w-4 flex-shrink-0 opacity-50" />
+                  </BuiButton>
+                </BuiPopoverTrigger>
+
+                <BuiPopoverContent class="w-[var(--radix-popper-anchor-width)] p-0">
+                  <BuiCommand class="p-0">
+                    <BuiCommandInput
+                      class="h-9"
+                      placeholder="Search or create new"
+                      v-model="search"
+                      @input="(event: Event) => (search = (event.target as HTMLInputElement).value)"
+                    />
+                    <BuiCommandEmpty class="flex w-full py-1 pl-1">
+                      <BuiCommandNewItem
+                        v-if="search"
+                        @create="
+                          () => {
+                            setValue([...value, search])
+                            existingGroups = [...existingGroups, search]
+                            search = ''
+                            isGroupsPopoverOpen = false
+                          }
+                        "
+                      >
+                        <CirclePlusIcon class="mr-2 h-4 w-4" />
+                        <span>Create "{{ search }}"</span>
+                      </BuiCommandNewItem>
+                    </BuiCommandEmpty>
+                    <BuiFormControl>
+                      <BuiCommandList>
+                        <BuiCommandGroup>
+                          <BuiCommandNewItem
+                            v-if="search"
+                            @create="
+                              () => {
+                                setValue([...value, search])
+                                existingGroups = [...existingGroups, search]
+                                search = ''
+                                isGroupsPopoverOpen = false
+                              }
+                            "
+                          >
+                            <CirclePlusIcon class="mr-2 h-4 w-4" />
+                            <span>Create "{{ search }}"</span>
+                          </BuiCommandNewItem>
+
+                          <BuiCommandItem
+                            v-for="element in existingGroups"
+                            :value="element"
+                            :key="element"
+                            @select="
+                              () => {
+                                if (value.includes(element)) {
+                                  setValue(value.filter((item: string) => item !== element))
+                                } else {
+                                  setValue([...value, element])
+                                }
+
+                                isGroupsPopoverOpen = false
+                              }
+                            "
+                          >
+                            <CheckIcon
+                              class="mr-2 h-4 w-4"
+                              :class="value.includes(element) ? 'opacity-100' : 'opacity-0'"
+                            />
+                            {{ element }}
+                          </BuiCommandItem>
+                        </BuiCommandGroup>
+                      </BuiCommandList>
+                    </BuiFormControl>
+                  </BuiCommand>
+                </BuiPopoverContent>
+
+                <BuiFormMessage />
+              </BuiPopover>
+            </BuiFormItem>
+          </BuiFormField>
+        </BuiForm>
+      </div>
+    </Variant>
   </Story>
 </template>

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/command/BuiCommandNewItem.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import BuiButton from '@/components/ui/button/BuiButton.vue'
+import { cn } from '@/lib/utils'
+
+const emit = defineEmits(['create'])
+
+function handleClick() {
+  emit('create')
+}
+
+function handleKeydown(event: KeyboardEvent) {
+  if (event.key === 'Enter') {
+    emit('create')
+  }
+}
+</script>
+
+<template>
+  <BuiButton
+    variant="none"
+    @click="handleClick"
+    @keydown="handleKeydown"
+    :class="
+      cn(
+        'w-full justify-start px-2 py-1.5 text-left text-primary focus:outline-none',
+        'hover:bg-accent/[0.08] focus:!bg-accent/[0.08]'
+      )
+    "
+  >
+    <slot />
+  </BuiButton>
+</template>

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

@@ -7,3 +7,4 @@ export { default as BuiCommandItem } from './BuiCommandItem.vue'
 export { default as BuiCommandList } from './BuiCommandList.vue'
 export { default as BuiCommandSeparator } from './BuiCommandSeparator.vue'
 export { default as BuiCommandShortcut } from './BuiCommandShortcut.vue'
+export { default as BuiCommandNewItem } from './BuiCommandNewItem.vue'

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/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': {