@meistrari/tela-build 1.0.0

package/components/tela/combobox/combobox.stories.ts

@@ -0,0 +1,232 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { ref, computed } from 'vue'
+
+import ComboboxRoot from './combobox-root.vue'
+import ComboboxAnchor from './combobox-anchor.vue'
+import ComboboxInput from './combobox-input.vue'
+import ComboboxList from './combobox-list.vue'
+import ComboboxEmpty from './combobox-empty.vue'
+import ComboboxGroup from './combobox-group.vue'
+import ComboboxItem from './combobox-item.vue'
+import ComboboxItemIndicator from './combobox-indicator.vue'
+import ComboboxLabel from './combobox-label.vue'
+import { ComboboxTrigger } from 'reka-ui'
+import TelaIcon from '../icon.vue'
+import TelaButton from '../button/button.vue'
+import Combobox from './combobox.vue'
+
+const meta: Meta<typeof Combobox> = {
+    title: 'Core/Combobox',
+    component: Combobox,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'A searchable combobox component built on reka-ui. Allows users to search and select from a list of options. Supports filtering, icons, descriptions, grouping, tabs, token limits display, and custom styling. The component provides a searchable dropdown interface with keyboard navigation (Cmd+Backspace to clear search).',
+            },
+        },
+    },
+    argTypes: {
+        modelValue: {
+            control: 'text',
+            description: 'The currently selected value (v-model). Should match the `value` property of one of the options.',
+        },
+        placeholder: {
+            control: 'text',
+            description: 'Placeholder text displayed in the trigger button when no option is selected.',
+        },
+        inputPlaceholder: {
+            control: 'text',
+            description: 'Placeholder text for the search input field. Defaults to internationalized search label if not provided.',
+        },
+        options: {
+            control: false,
+            description: 'Array of option objects to display. Each option can have: `value` (string, required), `label` (string, required), `description` (string, optional), `icon` (string | Component, optional), `externalIconSrc` (string, optional), `maxInputTokens` (number, optional), `maxOutputTokens` (number, optional), `group` (string, optional for grouping), `badge` (string, optional), `tabs` (string[], optional for tab filtering), `to` (string, optional), `isMultiModal` (boolean, optional).',
+        },
+        readOnly: {
+            control: 'boolean',
+            description: 'Whether the combobox is read-only and disabled from user interaction.',
+        },
+        size: {
+            control: 'select',
+            options: ['xs', 'sm', 'md'],
+            description: 'Size variant for the combobox. Controls padding, font size, and icon size.',
+        },
+        iconWithBackground: {
+            control: false,
+            description: 'Configuration for icons with background styling. Should include `size` ("xs" | "sm" | "md") and `backgroundClass` (CSS class string).',
+        },
+        compact: {
+            control: 'boolean',
+            description: 'Whether to use compact spacing and sizing. Defaults to true. When false, uses larger padding and spacing.',
+        },
+        hasGroupingLabels: {
+            control: 'boolean',
+            description: 'Whether to display group labels when options are grouped. Defaults to true. Only shown when search is empty.',
+        },
+        colorIcon: {
+            control: 'color',
+            description: 'Color to apply to icons in the options and trigger button.',
+        },
+        disablePortal: {
+            control: 'boolean',
+            description: 'Whether to disable portal rendering for the dropdown content. Defaults to false. Set to true to render dropdown in normal DOM flow (useful for z-index issues).',
+        },
+        labelClass: {
+            control: 'text',
+            description: 'Custom CSS classes to apply to the label text in the trigger button.',
+        },
+        triggerClass: {
+            control: 'text',
+            description: 'Custom CSS classes to apply to the trigger button element.',
+        },
+        iconClass: {
+            control: 'text',
+            description: 'Custom CSS classes to apply to icons in the trigger button.',
+        },
+        contentClass: {
+            control: 'text',
+            description: 'Custom CSS classes to apply to the dropdown content container.',
+        },
+    },
+}
+
+export default meta
+
+export const Default: StoryObj<{ options: Array<{ value: string; label: string }> }> = {
+    render: args => ({
+        components: { ComboboxRoot, ComboboxAnchor, ComboboxTrigger, TelaIcon, TelaButton, ComboboxInput, ComboboxList, ComboboxEmpty, ComboboxGroup, ComboboxItem, ComboboxItemIndicator, ComboboxLabel },
+        setup() {
+            const search = ref('')
+            const selectedValue = ref('')
+
+            const selectedOption = computed(() => {
+                if (selectedValue.value && typeof selectedValue.value === 'object') {
+                    return selectedValue.value
+                }
+
+                return args.options.find((option: any) => option.value === selectedValue.value)
+            })
+
+            const filteredOptions = computed(() => {
+                if (!search.value.trim()) {
+                    return args.options
+                }
+                return args.options.filter((option: any) =>
+                    option.label.toLowerCase().includes(search.value.toLowerCase()),
+                )
+            })
+
+            const handleDeleteSearchValue = () => {
+                search.value = ''
+            }
+
+            return { args, search, selectedValue, selectedOption, filteredOptions, handleDeleteSearchValue }
+        },
+        template: `
+            <ComboboxRoot v-model="selectedValue">
+                <ComboboxAnchor>
+                    <ComboboxTrigger 
+                        as="button" 
+                        class="w-full group select-none flex items-center justify-between gap-3 rounded-10px px-8px py-7px bg-white border-[0.5px] border-gray-300 transition outline-none hover:bg-gray-100 data-[state=open]:bg-gray-100"
+                    >
+                        <span class="text-gray-900 group-data-[state=open]:text-gray-500 truncate max-w-120px text-body-14-regular">
+                            {{ selectedOption?.label || 'Select an option' }}
+                        </span>
+                        <TelaIcon name="i-ph-caret-down" class="opacity-60 transition-all ease-out duration-150 group-data-[state=open]:rotate-180" size="12px" />
+                    </ComboboxTrigger>
+                </ComboboxAnchor>
+                <ComboboxList class="w-270px">
+                    <div class="relative">
+                        <span class="absolute inset-y-0 start-0 flex items-center justify-center px-2.5">
+                            <TelaIcon name="i-ph-magnifying-glass" size="12px" class="text-gray-400" />
+                        </span>
+                        <ComboboxInput
+                            v-model="search" 
+                            class="rounded-b-none pl-7"
+                            placeholder="Search for an option"
+                        />
+                        <div 
+                            v-if="search.length > 0" 
+                            class="absolute inset-y-0 end-0 flex items-center justify-center px-2.5"
+                        >
+                            <button 
+                                class="flex items-center justify-center" 
+                                @click="search = ''"
+                            >
+                                <TelaIcon name="i-ph-x-circle" size="12px" class="text-gray-400" />
+                            </button>
+                        </div>
+                    </div>
+                    <ComboboxEmpty
+                            v-if="filteredOptions.length === 0"
+                            class="flex flex-col items-center justify-center gap-5 px-7"
+                        >
+                            <div class="flex flex-col items-center justify-center gap-3">
+                                <TelaIcon name="i-ph-smiley-sad" size="24px" class="text-gray-400" />
+                                <span class="text-xl font-medium leading-none">
+                                    {{ search.trim() ? 'No options found with ' + search : 'No options found' }}
+                                </span>
+                                <span v-if="search.trim()" class="inline-flex items-center gap-1.5 text-md text-gray-500">
+                                    Press 
+                                    <div class="flex items-center gap-1">
+                                        <div class="p-2px bg-gray-200 rounded">
+                                            <TelaIcon name="i-ph-command" size="16px" />
+                                        </div>
+                                        <div class="p-2px bg-gray-200 rounded">
+                                            <TelaIcon name="i-ph-backspace" size="16px" />
+                                        </div>
+                                    </div>
+                                    to clear the search
+                                </span>
+                            </div>
+                            <TelaButton
+                                v-if="search.trim()" variant="secondary" size="sm"
+                                @click="handleDeleteSearchValue"
+                            >
+                                Clear
+                            </TelaButton>
+                        </ComboboxEmpty>
+                    <ComboboxGroup>
+                        <ComboboxItem 
+                            v-for="option in filteredOptions" 
+                            :key="option.value" 
+                            :value="option"
+                        >
+                            <span class="text-gray-900 truncate max-w-120px text-body-14-regular">{{ option.label }}</span>
+                            <div class="flex gap-2 items-center">
+                                <ComboboxItemIndicator>
+                                    <TelaIcon name="i-ph-check" size="14px" />
+                                </ComboboxItemIndicator>
+                            </div>
+                        </ComboboxItem>
+                    </ComboboxGroup>
+                </ComboboxList>
+            </ComboboxRoot>
+        `,
+    }),
+    args: {
+        options: [
+            {
+                value: 'bug',
+                label: 'Bug',
+            },
+            {
+                value: 'feature-request',
+                label: 'Feature Request',
+            },
+            {
+                value: 'performance',
+                label: 'Performance',
+            },
+            {
+                value: 'ui-ux',
+                label: 'UI/UX',
+            },
+            {
+                value: 'other',
+                label: 'Other',
+            },
+        ],
+    },
+}