@meistrari/tela-build 1.0.0

package/components/tela/multiple-select/multiple-select.stories.ts

@@ -0,0 +1,325 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { ref, watch } from 'vue'
+import TelaMultipleSelect from './multiple-select.vue'
+
+const meta: Meta<typeof TelaMultipleSelect> = {
+    title: 'Tela/MultipleSelect',
+    component: TelaMultipleSelect,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'A multiple select component that allows users to select multiple options from a dropdown list. Supports search functionality, grouping, icons, custom styling, and two display variants (list and preview). Perfect for selecting multiple items with rich option data.',
+            },
+        },
+    },
+    args: {
+        readOnly: false,
+        required: false,
+        allowSearch: false,
+        searchPlaceholder: 'Search options...',
+        variant: 'list',
+        previewMaxItems: 3,
+    },
+    argTypes: {
+        modelValue: {
+            control: 'object',
+            description: 'Array of selected option values (v-model).',
+        },
+        options: {
+            control: 'object',
+            description: 'Array of selectable options. Each option should have at least `value` and `label` properties. Supports optional `icon`, `description`, `group`, and `externalIconSrc` properties.',
+        },
+        placeholder: {
+            control: 'text',
+            description: 'Placeholder text displayed when no options are selected.',
+        },
+        readOnly: {
+            control: 'boolean',
+            description: 'Make the select read-only, preventing user interaction.',
+        },
+        required: {
+            control: 'boolean',
+            description: 'Mark the select as required in forms.',
+        },
+        allowSearch: {
+            control: 'boolean',
+            description: 'Enable search functionality to filter options by typing.',
+        },
+        searchPlaceholder: {
+            control: 'text',
+            description: 'Placeholder text for the search input. Only used when `allowSearch` is true.',
+        },
+        variant: {
+            control: 'radio',
+            options: ['list', 'preview'],
+            description: 'Display variant. "list" shows selected items as a list, "preview" shows a preview with max items limit.',
+        },
+        previewMaxItems: {
+            control: 'number',
+            description: 'Maximum number of items to show in preview variant before showing "+X more".',
+        },
+        maxSelectedDisplay: {
+            control: 'number',
+            description: 'Maximum number of selected items to display before showing "+X more" indicator.',
+        },
+    },
+    render: (args) => {
+        return {
+            components: { TelaMultipleSelect },
+            setup() {
+                const modelValue = ref(args.modelValue || [])
+
+                watch(() => args.modelValue, (val) => {
+                    modelValue.value = val || []
+                })
+
+                return { args, modelValue }
+            },
+            template: `
+                <div style="width: 300px; padding: 20px;">
+                    <TelaMultipleSelect
+                        :options="args.options"
+                        :placeholder="args.placeholder"
+                        :read-only="args.readOnly"
+                        :max-selected-display="args.maxSelectedDisplay"
+                        :required="args.required"
+                        :allow-search="args.allowSearch"
+                        :search-placeholder="args.searchPlaceholder"
+                        :variant="args.variant"
+                        :preview-max-items="args.previewMaxItems"
+                        v-model="modelValue"
+                    />
+                    <div style="margin-top: 20px; font-family: monospace; font-size: 12px;">
+                        Selected: {{ modelValue }}
+                    </div>
+                </div>
+            `,
+        }
+    },
+}
+
+export default meta
+type Story = StoryObj<typeof TelaMultipleSelect>
+
+const defaultOptions = [
+    { value: '1', label: 'Durward Reynolds' },
+    { value: '2', label: 'Kenton Towne' },
+    { value: '3', label: 'Therese Wunsch' },
+    { value: '4', label: 'Benedict Kessler' },
+    { value: '5', label: 'Katelyn Rohan' },
+]
+
+export const Default: Story = {
+    args: {
+        options: defaultOptions,
+        placeholder: 'Select some options',
+    },
+}
+
+export const WithInitialValue: Story = {
+    args: {
+        ...Default.args,
+        modelValue: ['2', '4'],
+    },
+}
+
+const groupedOptions = [
+    { value: '1', label: 'Apple', group: 'Fruits' },
+    { value: '2', label: 'Banana', group: 'Fruits' },
+    { value: '3', label: 'Carrot', group: 'Vegetables' },
+    { value: '4', label: 'Broccoli', group: 'Vegetables' },
+    { value: '5', label: 'Chicken', group: 'Meat' },
+    { value: '6', label: 'Beef', group: 'Meat' },
+]
+
+export const WithGroups: Story = {
+    args: {
+        options: groupedOptions,
+        placeholder: 'Select from groups',
+    },
+}
+
+const iconOptions = [
+    { value: '1', label: 'Profile', icon: 'i-ph-user' },
+    { value: '2', label: 'Settings', icon: 'i-ph-gear' },
+    { value: '3', label: 'Notifications', icon: 'i-ph-bell' },
+    { value: '4', label: 'Help', icon: 'i-ph-question' },
+]
+
+export const WithIcons: Story = {
+    args: {
+        options: iconOptions,
+        placeholder: 'Select with icons',
+    },
+}
+
+const externalIconOptions = [
+    { value: '1', label: 'Vue', externalIconSrc: 'https://vuejs.org/logo.svg' },
+    { value: '2', label: 'React', externalIconSrc: 'https://upload.wikimedia.org/wikipedia/commons/a/a7/React-icon.svg' },
+    { value: '3', label: 'Angular', externalIconSrc: 'https://angular.io/assets/images/logos/angular/angular.svg' },
+]
+
+export const WithExternalIcons: Story = {
+    args: {
+        options: externalIconOptions,
+        placeholder: 'Select a framework',
+    },
+}
+
+export const MaxSelectedDisplay: Story = {
+    args: {
+        ...Default.args,
+        modelValue: ['1', '2', '3', '4'],
+        maxSelectedDisplay: 2,
+    },
+}
+
+export const ReadOnly: Story = {
+    args: {
+        ...WithInitialValue.args,
+        readOnly: true,
+    },
+}
+
+export const Required: Story = {
+    args: {
+        ...Default.args,
+        required: true,
+        placeholder: 'Required select',
+    },
+}
+
+export const WithLongPlaceholder: Story = {
+    args: {
+        ...Default.args,
+        placeholder: 'This is a very long placeholder to check how the component handles overflow',
+    },
+}
+
+const longOptionsList = Array.from({ length: 50 }, (_, i) => ({
+    value: `${i + 1}`,
+    label: `Option ${i + 1}`,
+}))
+
+export const WithScrolling: Story = {
+    name: 'With Scrolling',
+    args: {
+        options: longOptionsList,
+        placeholder: 'Select from a long list',
+    },
+}
+
+// New search-related stories
+const searchableOptions = [
+    { value: '1', label: 'JavaScript', description: 'Programming language for web development' },
+    { value: '2', label: 'Python', description: 'High-level programming language' },
+    { value: '3', label: 'TypeScript', description: 'Typed superset of JavaScript' },
+    { value: '4', label: 'React', description: 'JavaScript library for building user interfaces' },
+    { value: '5', label: 'Vue.js', description: 'Progressive JavaScript framework' },
+    { value: '6', label: 'Angular', description: 'Platform for building mobile and desktop applications' },
+    { value: '7', label: 'Node.js', description: 'JavaScript runtime built on Chrome V8 engine' },
+    { value: '8', label: 'Express.js', description: 'Web application framework for Node.js' },
+    { value: '9', label: 'MongoDB', description: 'NoSQL document database' },
+    { value: '10', label: 'PostgreSQL', description: 'Open source relational database' },
+    { value: '11', label: 'Redis', description: 'In-memory data structure store' },
+    { value: '12', label: 'Docker', description: 'Platform for developing, shipping, and running applications' },
+    { value: '13', label: 'Kubernetes', description: 'Container orchestration platform' },
+    { value: '14', label: 'AWS', description: 'Amazon Web Services cloud platform' },
+    { value: '15', label: 'Vercel', description: 'Platform for frontend frameworks and static sites' },
+]
+
+export const WithSearch: Story = {
+    name: 'With Search',
+    args: {
+        options: searchableOptions,
+        placeholder: 'Select technologies',
+        allowSearch: true,
+        searchPlaceholder: 'Search technologies...',
+    },
+}
+
+export const WithSearchAndGroups: Story = {
+    name: 'With Search and Groups',
+    args: {
+        options: [
+            { value: '1', label: 'JavaScript', description: 'Programming language for web', group: 'Languages' },
+            { value: '2', label: 'Python', description: 'High-level programming language', group: 'Languages' },
+            { value: '3', label: 'TypeScript', description: 'Typed superset of JavaScript', group: 'Languages' },
+            { value: '4', label: 'React', description: 'UI library', group: 'Frameworks' },
+            { value: '5', label: 'Vue.js', description: 'Progressive framework', group: 'Frameworks' },
+            { value: '6', label: 'Angular', description: 'Platform for building apps', group: 'Frameworks' },
+            { value: '7', label: 'MongoDB', description: 'NoSQL database', group: 'Databases' },
+            { value: '8', label: 'PostgreSQL', description: 'Relational database', group: 'Databases' },
+            { value: '9', label: 'Redis', description: 'In-memory store', group: 'Databases' },
+        ],
+        placeholder: 'Select from categories',
+        allowSearch: true,
+        searchPlaceholder: 'Filter by name or description...',
+    },
+}
+
+export const WithSearchCustomPlaceholder: Story = {
+    name: 'With Search Custom Placeholder',
+    args: {
+        options: searchableOptions,
+        placeholder: 'Choose your stack',
+        allowSearch: true,
+        searchPlaceholder: 'Type to filter options...',
+    },
+}
+
+// Comparison story showing both variants side by side
+export const VariantComparison: Story = {
+    name: 'Variant Comparison',
+    render: () => {
+        return {
+            components: { TelaMultipleSelect },
+            setup() {
+                const listValue = ref(['1', '2', '3'])
+                const previewValue = ref(['1', '2', '3'])
+
+                const options = [
+                    { value: '1', label: 'Nome do Paciente' },
+                    { value: '2', label: 'Documento' },
+                    { value: '3', label: 'Email' },
+                    { value: '4', label: 'Telefone' },
+                    { value: '5', label: 'Endereço' },
+                ]
+
+                return { listValue, previewValue, options }
+            },
+            template: `
+                <div style="display: flex; flex-direction: column; gap: 40px; padding: 20px; width: 400px;">
+                    <div>
+                        <p style="margin-bottom: 10px; font-weight: 600;">List Variant</p>
+                        <TelaMultipleSelect
+                            v-model="listValue"
+                            :options="options"
+                            placeholder="Select columns..."
+                            variant="list"
+                        />
+                        <div style="margin-top: 10px; font-family: monospace; font-size: 12px;">
+                            Selected: {{ listValue }}
+                        </div>
+                    </div>
+                    
+                    <div>
+                        <p style="margin-bottom: 10px; font-weight: 600;">Preview Variant</p>
+                        <TelaMultipleSelect
+                            v-model="previewValue"
+                            :options="options"
+                            placeholder="Select columns..."
+                            variant="preview"
+                            :preview-max-items="2"
+                        />
+                        <div style="margin-top: 10px; font-family: monospace; font-size: 12px;">
+                            Selected: {{ previewValue }}
+                        </div>
+                    </div>
+                </div>
+            `,
+        }
+    },
+    args: {},
+}