@meistrari/tela-build 1.0.0

package/components/tela/dropdown-menu/dropdown-menu.mdx

@@ -0,0 +1,265 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as DropdownMenuStories from './dropdown-menu.stories.ts';
+
+<Meta of={DropdownMenuStories} />
+
+# TelaDropdownMenu
+
+A dropdown menu component built on radix-vue. Provides a flexible menu system with support for grouping, icons, tooltips, checkboxes, and search functionality. Items can be organized into groups and can include click handlers, disabled states, and custom styling.
+
+## Examples
+
+### Basic Usage
+
+<Canvas of={DropdownMenuStories.Simple} />
+
+### With Groups
+
+<Canvas of={DropdownMenuStories.WithGroups} />
+
+### With Tooltips
+
+<Canvas of={DropdownMenuStories.WithTooltips} />
+
+### Basic Usage Code
+
+```vue
+<script setup>
+const menuItems = [
+  {
+    label: 'New File',
+    icon: 'i-ph-file-plus',
+    click: () => console.log('New file')
+  },
+  {
+    label: 'Open',
+    icon: 'i-ph-folder-open',
+    click: () => console.log('Open')
+  },
+  {
+    label: 'Save',
+    icon: 'i-ph-floppy-disk',
+    click: () => console.log('Save')
+  }
+]
+</script>
+
+<template>
+  <TelaDropdownMenu :items="menuItems">
+    <TelaButton>Actions</TelaButton>
+  </TelaDropdownMenu>
+</template>
+```
+
+### With Groups Code
+
+```vue
+<TelaDropdownMenu
+  :items="[
+    {
+      label: 'Output File',
+      group: 'Files',
+      icon: 'i-ph-file-pdf',
+      click: () => {}
+    },
+    {
+      label: 'Database 1',
+      group: 'Databases',
+      icon: 'i-ph-database',
+      click: () => {}
+    },
+    {
+      label: 'Database 2',
+      group: 'Databases',
+      icon: 'i-ph-database',
+      click: () => {}
+    }
+  ]"
+>
+  <TelaButton>Select Resource</TelaButton>
+</TelaDropdownMenu>
+```
+
+### With Tooltips Code
+
+```vue
+<TelaDropdownMenu
+  :items="[
+    {
+      label: 'Download',
+      icon: 'i-ph-download-simple',
+      tooltip: 'Download your files',
+      click: () => {}
+    },
+    {
+      label: 'Delete',
+      icon: 'i-ph-trash',
+      color: 'negative',
+      disabled: true,
+      tooltip: {
+        variant: 'multiline',
+        title: 'Cannot delete',
+        description: 'Some items are protected',
+        side: 'right'
+      },
+      click: () => {}
+    }
+  ]"
+>
+  <TelaButton>Actions</TelaButton>
+</TelaDropdownMenu>
+```
+
+### With Search
+
+```vue
+<TelaDropdownMenu
+  :items="longItemList"
+  allow-search
+  search-placeholder="Search actions..."
+>
+  <TelaButton>Many Actions</TelaButton>
+</TelaDropdownMenu>
+```
+
+### With Checkboxes
+
+```vue
+<script setup>
+const items = ref([
+  {
+    label: 'Show Grid',
+    checkbox: true,
+    checked: true,
+    click: (item) => { item.checked = !item.checked }
+  },
+  {
+    label: 'Show Rulers',
+    checkbox: true,
+    checked: false,
+    click: (item) => { item.checked = !item.checked }
+  }
+])
+</script>
+
+<template>
+  <TelaDropdownMenu :items="items">
+    <TelaButton>View Options</TelaButton>
+  </TelaDropdownMenu>
+</template>
+```
+
+### Destructive Actions
+
+```vue
+<TelaDropdownMenu
+  :items="[
+    {
+      label: 'Edit',
+      icon: 'i-ph-pencil',
+      click: () => {}
+    },
+    {
+      label: 'Duplicate',
+      icon: 'i-ph-copy',
+      click: () => {}
+    },
+    {
+      label: 'Delete',
+      icon: 'i-ph-trash',
+      color: 'negative',
+      click: () => {}
+    }
+  ]"
+>
+  <TelaButton variant="ghost">⋮</TelaButton>
+</TelaDropdownMenu>
+```
+
+### With Custom Alignment
+
+```vue
+<!-- Align to start -->
+<TelaDropdownMenu :items="items" align="start">
+  <TelaButton>Align Start</TelaButton>
+</TelaDropdownMenu>
+
+<!-- Align to end (default) -->
+<TelaDropdownMenu :items="items" align="end">
+  <TelaButton>Align End</TelaButton>
+</TelaDropdownMenu>
+```
+
+## Props
+
+<ArgTypes />
+
+```typescript
+type DropdownMenuItem = {
+  label: string
+  icon?: string
+  click?: () => void
+  group?: string
+  color?: 'default' | 'negative'
+  disabled?: boolean
+  checkbox?: boolean
+  checked?: boolean
+  tooltip?: string | {
+    variant?: 'single' | 'multiline'
+    title?: string
+    description?: string
+    side?: 'top' | 'right' | 'bottom' | 'left'
+    align?: 'start' | 'center' | 'end'
+    alignOffset?: number
+    arrowOffset?: number
+  }
+}
+
+type DropdownMenuProps = {
+  items: DropdownMenuItem[]
+  sideOffset?: number
+  allowSearch?: boolean
+  searchPlaceholder?: string
+  shouldBeModal?: boolean
+  contentClass?: string
+  align?: 'start' | 'end' | 'center'
+}
+```
+
+## Features
+
+- **Flexible Items**: Support icons, groups, colors, and states
+- **Search**: Optional search functionality for long lists
+- **Grouping**: Organize items into labeled groups
+- **Tooltips**: Add tooltips to menu items
+- **Checkboxes**: Toggle options with checkbox items
+- **Click Handlers**: Execute actions on item click
+- **Disabled State**: Disable specific items
+- **Color Options**: Default or negative (destructive) colors
+- **Custom Styling**: Control content and item styling
+- **Keyboard Navigation**: Arrow keys, Enter, Escape
+- **Accessible**: Built on radix-vue primitives
+
+## Item Colors
+
+- **default**: Standard menu item
+- **negative**: Red/destructive action (e.g., Delete)
+
+## Best Practices
+
+1. **Group Related Items**: Use groups for better organization
+2. **Place Destructive Actions Last**: Put delete/remove at bottom
+3. **Use Icons**: Icons help with quick scanning
+4. **Enable Search**: For lists with 10+ items
+5. **Provide Tooltips**: Explain disabled items
+6. **Keep Labels Brief**: Short, action-oriented labels
+
+## Accessibility
+
+- Built on radix-vue primitives
+- Proper ARIA attributes (role="menu", role="menuitem")
+- Keyboard navigation (Arrow keys, Home, End, Enter)
+- Focus management
+- Disabled items skip focus
+- Screen reader support
+- Escape key to close

package/components/tela/dropdown-menu/dropdown-menu.stories.ts

@@ -0,0 +1,156 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+
+import DropdownMenu from './DropdownMenu.vue'
+import Button from '../button/button.vue'
+
+const meta: Meta<typeof DropdownMenu> = {
+    title: 'Core/DropdownMenu',
+    component: DropdownMenu,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'A dropdown menu component built on radix-vue. Provides a flexible menu system with support for grouping, icons, tooltips, checkboxes, and search functionality. Items can be organized into groups and can include click handlers, disabled states, and custom styling.',
+            },
+        },
+    },
+    argTypes: {
+        items: {
+            control: false,
+            description: 'Array of menu items to display. Each item can have a label, icon, click handler, group, color, disabled state, checkbox, and tooltip. Items are automatically grouped by the `group` property.',
+        },
+        sideOffset: {
+            control: 'number',
+            description: 'Distance in pixels from the trigger element to the menu content.',
+        },
+        allowSearch: {
+            control: 'boolean',
+            description: 'Enable search functionality within the dropdown menu. Adds a search input at the top of the menu.',
+        },
+        searchPlaceholder: {
+            control: 'text',
+            description: 'Placeholder text for the search input. Only used when `allowSearch` is true.',
+        },
+        shouldBeModal: {
+            control: 'boolean',
+            description: 'Whether the dropdown menu should behave as a modal dialog.',
+        },
+        contentClass: {
+            control: 'text',
+            description: 'Custom CSS classes to apply to the dropdown menu content container.',
+        },
+        align: {
+            control: 'select',
+            options: ['start', 'end', 'center'],
+            description: 'Alignment of the dropdown menu relative to the trigger element.',
+        },
+    },
+}
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Simple: Story = {
+    args: {
+        items: [
+            {
+                label: 'Item 1',
+                icon: 'i-ph-plus',
+                click: () => {},
+            },
+        ],
+    },
+    render: args => ({
+        components: { DropdownMenu, Button },
+        setup() {
+            return { args }
+        },
+        template: '<DropdownMenu v-bind="args"><Button variant="secondary">Click me</Button></DropdownMenu>',
+    }),
+}
+
+export const WithGroups: Story = {
+    args: {
+        items: [
+            {
+                label: 'Informe-Laudo-Exame-284321312-2024-01-01.pdf',
+                group: 'Output File',
+                icon: 'i-ph-file-pdf',
+                click: () => {},
+            },
+            {
+                label: 'Brasíndice Completo',
+                group: 'Project Database',
+                icon: 'i-ph-file',
+                click: () => {},
+            },
+            {
+                label: 'Tabela SIMPRO 2024',
+                group: 'Project Database',
+                icon: 'i-ph-file',
+                click: () => {},
+            },
+            {
+                label: 'Acme Saúde Regras',
+                group: 'Project Database',
+                icon: 'i-ph-file',
+                click: () => {},
+            },
+        ],
+    },
+    render: args => ({
+        components: { DropdownMenu, Button },
+        setup() {
+            return { args }
+        },
+        template: '<DropdownMenu v-bind="args"><Button variant="secondary">Click me</Button></DropdownMenu>',
+    }),
+}
+
+export const WithTooltips: Story = {
+    args: {
+        items: [
+            {
+                label: 'Download',
+                icon: 'i-ph-download-simple-bold',
+                click: () => console.log('Download'),
+                tooltip: 'Download your files',
+            },
+            {
+                label: 'Share',
+                icon: 'i-ph-share-bold',
+                click: () => console.log('Share'),
+                tooltip: {
+                    variant: 'multiline',
+                    title: 'Share with team',
+                    description: 'Share the selected items with your team members',
+                    side: 'right',
+                },
+            },
+            {
+                label: 'Delete',
+                icon: 'i-ph-trash-bold',
+                color: 'negative',
+                click: () => console.log('Delete'),
+                disabled: true,
+                tooltip: {
+                    variant: 'multiline',
+                    side: 'top',
+                    align: 'start',
+                    title: 'Cannot delete',
+                    description: 'Some items are protected and cannot be deleted',
+                    alignOffset: -20,
+                    arrowOffset: -25,
+                },
+            },
+        ],
+    },
+    render: args => ({
+        components: { DropdownMenu, Button },
+        setup() {
+            return { args }
+        },
+        template: '<DropdownMenu v-bind="args"><Button variant="secondary">Actions with Tooltips</Button></DropdownMenu>',
+    }),
+}

package/components/tela/expandable-input.vue

@@ -0,0 +1,96 @@
+<script setup lang="ts">
+const props = defineProps<{
+    placeholder?: string
+    type?: 'text' | 'textarea'
+    readonly?: boolean
+}>()
+
+const internalValue = defineModel<string>()
+
+const isEditing = ref(false)
+const containerEl = ref<HTMLDivElement | null>()
+const inputEl = ref<HTMLTextAreaElement | null>()
+
+const { width: containerWidth } = useElementBounding(containerEl)
+
+function onStartEditing() {
+    if (props.readonly)
+        return
+
+    isEditing.value = true
+    setTimeout(() => {
+        inputEl.value?.focus()
+    }, 50)
+}
+
+function onStopEditing() {
+    isEditing.value = false
+}
+</script>
+
+<template>
+    <div
+        ref="containerEl"
+        font-inherit relative outline-none
+        :class="[
+            isEditing ? 'h-0px' : 'h-24px overflow-hidden truncate text-ellipsis',
+        ]"
+        :cursor="props.readonly ? 'default' : 'pointer'"
+        rounded-4px
+        px-8px
+        mr-24px
+        class="hover:bg-gray-200"
+        :tabindex="isEditing ? 1 : 0"
+        @click="onStartEditing"
+        @focus="onStartEditing"
+    >
+        <div
+            :cursor="props.readonly ? 'default' : 'pointer'"
+            flex="~" items-center
+            :class="[
+                isEditing && 'op-0',
+            ]"
+            h-24px
+            w-auto
+            truncate
+        >
+            <slot v-if="$slots.label" name="label" :internal-value="internalValue" :placeholder="placeholder" />
+            <span
+                v-else
+                font-inherit
+                whitespace-nowrap overflow-hidden text-ellipsis
+                z-1
+            >
+                {{ internalValue || placeholder }}
+            </span>
+        </div>
+
+        <textarea
+            v-if="isEditing"
+            ref="inputEl"
+            v-model="internalValue"
+            :placeholder="placeholder"
+            :style="{ width: `${containerWidth}px`, height: type === 'textarea' ? '100px' : 'auto', overflow: type === 'textarea' ? 'auto' : 'hidden' }"
+            absolute
+            z-3
+            rounded-4px
+            top--19.5px
+            left--2.5px
+            px-10px
+            py-10px
+            resize-none
+            autoresize
+            bg-gray-100
+            font-inherit
+            tabindex="0"
+            b=".5 gray-200"
+            shadow-flying
+            :spellcheck="false"
+            v-bind="$attrs"
+            @keydown.enter="onStopEditing"
+            @blur="onStopEditing"
+            @focusleave="onStopEditing"
+            @keydown.esc="onStopEditing"
+        />
+    </div>
+</template>

package/components/tela/file-drop.vue

@@ -0,0 +1,37 @@
+<script setup lang="ts">
+import { useDropZone } from '@vueuse/core'
+
+const props = defineProps<{
+    accept?: string[]
+}>()
+
+const emit = defineEmits<{
+    fileDrop: [files: File[] | null]
+}>()
+
+const isOverDropZone = defineModel<boolean>()
+
+const dropZoneRef = ref<HTMLElement>()
+
+const { isOverDropZone: _isOverDropZone } = useDropZone(dropZoneRef, {
+    onDrop,
+    // specify the types of data to be received.
+    dataTypes: props.accept,
+})
+
+watch(_isOverDropZone, (isOver) => {
+    isOverDropZone.value = isOver
+}, { immediate: true })
+
+function onDrop(files: File[] | null) {
+    emit('fileDrop', files)
+}
+</script>
+
+<template>
+    <div
+        ref="dropZoneRef"
+    >
+        <slot />
+    </div>
+</template>