@meistrari/tela-build 1.0.0

package/components/tela/pane.vue

@@ -0,0 +1,110 @@
+<script setup lang="ts">
+import { Pane } from 'splitpanes'
+
+const props = defineProps<{
+    title?: string
+    subtitle?: string
+    size?: number
+    minSize?: number
+    icon?: string
+    iconUrl?: string
+    collapsible?: boolean
+    collapseThreshold?: number
+    collapsedSize?: number
+    collapsedIcon?: string
+    startCollapsed?: boolean
+    disableSplit?: boolean
+}>()
+
+const emit = defineEmits<{
+    'update:collapse': [size: number]
+}>()
+
+const size = ref(props.size)
+const collapsedSize = ref(props.collapsedSize ?? 7)
+const sizeBeforeCollapse = ref(props.size)
+const isCollapsed = ref(Boolean(props.startCollapsed))
+
+watch(() => props.size, (newValue) => {
+    size.value = newValue
+
+    if (isCollapsed.value && newValue !== collapsedSize.value)
+        isCollapsed.value = false
+
+    if (!isCollapsed.value && newValue && newValue <= collapsedSize.value + (props.collapseThreshold ?? 0)) {
+        isCollapsed.value = true
+        emit('update:collapse', collapsedSize.value)
+    }
+}, { immediate: true })
+
+function toggleCollapse() {
+    if (isCollapsed.value) {
+        isCollapsed.value = false
+        emit('update:collapse', Math.max(sizeBeforeCollapse.value ?? 0, props.minSize ?? 0, collapsedSize.value + 8))
+    }
+    else {
+        isCollapsed.value = true
+        sizeBeforeCollapse.value = size.value
+        emit('update:collapse', collapsedSize.value)
+    }
+}
+</script>
+
+<template>
+    <component
+        :is="disableSplit ? 'div' : Pane"
+        :size="disableSplit ? undefined : size"
+        :min-size="minSize"
+    >
+        <div v-if="title || $slots.actions" flex items-center w-full justify-between relative h-72px z-1>
+            <Transition name="fade">
+                <div v-if="title && !isCollapsed" flex flex-col p-24px>
+                    <div flex>
+                        <img v-if="iconUrl" :src="iconUrl" w-24px>
+                        <TelaIcon v-else-if="icon" :name="icon" w-24px />
+                        <div :m="(iconUrl || icon) ? 'l-16px' : 'l-8px'" font-semibold text="14px textcolor">
+                            {{ title }}
+                        </div>
+                    </div>
+                    <div v-if="subtitle" :m="(iconUrl || icon) ? 'l-16px' : 'l-8px'" font-regular text="13px gray-800">
+                        {{ subtitle }}
+                    </div>
+                </div>
+            </Transition>
+            <div absolute top-16px right-32px flex items-center gap-8px>
+                <slot name="actions" />
+
+                <TelaButton
+                    v-if="collapsible"
+                    transition ease-in-out
+                    ml-12px
+                    icon="i-ph-arrow-left"
+                    size="sm"
+                    color="primary"
+                    variant="ghost"
+                    :class="{
+                        'rotate-180': !isCollapsed,
+                    }"
+                    @click="toggleCollapse"
+                />
+            </div>
+        </div>
+
+        <slot v-if="!isCollapsed" />
+    </component>
+</template>
+
+<style scoped>
+.fade-enter-active {
+  transition: opacity 0.6s cubic-bezier(1, 0, 0, 1);
+}
+
+.fade-leave-active {
+  transition: opacity 0.6s cubic-bezier(1, 0, 0, 1);
+}
+
+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>

package/components/tela/popover/popover-content.vue

@@ -0,0 +1,48 @@
+<script setup lang="ts">
+import {
+    PopoverContent,
+    PopoverPortal,
+    useForwardPropsEmits,
+} from 'reka-ui'
+import type { PopoverContentEmits, PopoverContentProps } from 'reka-ui'
+import { computed } from 'vue'
+import type { HTMLAttributes } from 'vue'
+
+defineOptions({
+    inheritAttrs: false,
+})
+
+const props = withDefaults(
+    defineProps<PopoverContentProps & { class?: HTMLAttributes['class'] }>(),
+    {
+        align: 'center',
+        sideOffset: 4,
+    },
+)
+const emits = defineEmits<PopoverContentEmits>()
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props
+
+    return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+    <PopoverPortal>
+        <PopoverContent
+            v-bind="{ ...forwarded, ...$attrs }"
+            :class="
+                cn(
+                    'w-72 rounded-md border-[1px] bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+                    props.class,
+                )
+            "
+            z-700
+        >
+            <slot />
+        </PopoverContent>
+    </PopoverPortal>
+</template>

package/components/tela/popover/popover-trigger.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { PopoverTrigger } from 'reka-ui'
+import type { PopoverTriggerProps } from 'reka-ui'
+
+const props = defineProps<PopoverTriggerProps>()
+</script>
+
+<template>
+    <PopoverTrigger v-bind="props">
+        <slot />
+    </PopoverTrigger>
+</template>

package/components/tela/popover/popover.mdx

@@ -0,0 +1,239 @@
+import { Meta, Canvas, ArgTypes } from '@storybook/blocks';
+import * as PopoverStories from './popover.stories.ts';
+
+<Meta of={PopoverStories} />
+
+# TelaPopover
+
+A popover component that displays content in a floating panel. Supports positioning on all sides (top, right, bottom, left) with different alignments (start, center, end). Built with composable subcomponents for flexible usage.
+
+## Examples
+
+### With Custom Content
+
+<Canvas of={PopoverStories.WithCustomContent} />
+
+### Different Positions
+
+<Canvas of={PopoverStories.WithDifferentPositions} />
+
+### Different Alignments
+
+<Canvas of={PopoverStories.WithDifferentAlignments} />
+
+### Basic Usage
+
+```vue
+<script setup>
+import { ref } from 'vue'
+
+const isOpen = ref(false)
+</script>
+
+<template>
+  <TelaPopover v-model:open="isOpen">
+    <TelaPopoverTrigger>
+      <TelaButton>Open Popover</TelaButton>
+    </TelaPopoverTrigger>
+    <TelaPopoverContent>
+      <div class="p-4">
+        <h3>Popover Content</h3>
+        <p>This is the popover content</p>
+      </div>
+    </TelaPopoverContent>
+  </TelaPopover>
+</template>
+```
+
+### With Custom Content Code
+
+```vue
+<TelaPopover v-model:open="isOpen">
+  <TelaPopoverTrigger>
+    <TelaButton>Options</TelaButton>
+  </TelaPopoverTrigger>
+  <TelaPopoverContent>
+    <div class="flex flex-col gap-2 p-2">
+      <button class="p-2 hover:bg-gray-100 rounded">
+        Option 1
+      </button>
+      <button class="p-2 hover:bg-gray-100 rounded">
+        Option 2
+      </button>
+      <button class="p-2 hover:bg-gray-100 rounded">
+        Option 3
+      </button>
+    </div>
+  </TelaPopoverContent>
+</TelaPopover>
+```
+
+### Different Positions Code
+
+```vue
+<!-- Top -->
+<TelaPopover>
+  <TelaPopoverTrigger>
+    <TelaButton>Top</TelaButton>
+  </TelaPopoverTrigger>
+  <TelaPopoverContent side="top">
+    Popover on top
+  </TelaPopoverContent>
+</TelaPopover>
+
+<!-- Right -->
+<TelaPopover>
+  <TelaPopoverTrigger>
+    <TelaButton>Right</TelaButton>
+  </TelaPopoverTrigger>
+  <TelaPopoverContent side="right">
+    Popover on right
+  </TelaPopoverContent>
+</TelaPopover>
+
+<!-- Bottom (default) -->
+<TelaPopover>
+  <TelaPopoverTrigger>
+    <TelaButton>Bottom</TelaButton>
+  </TelaPopoverTrigger>
+  <TelaPopoverContent side="bottom">
+    Popover on bottom
+  </TelaPopoverContent>
+</TelaPopover>
+
+<!-- Left -->
+<TelaPopover>
+  <TelaPopoverTrigger>
+    <TelaButton>Left</TelaButton>
+  </TelaPopoverTrigger>
+  <TelaPopoverContent side="left">
+    Popover on left
+  </TelaPopoverContent>
+</TelaPopover>
+```
+
+```vue
+<!-- Align Start -->
+<TelaPopover>
+  <TelaPopoverTrigger>
+    <TelaButton>Start</TelaButton>
+  </TelaPopoverTrigger>
+  <TelaPopoverContent align="start">
+    Aligned to start
+  </TelaPopoverContent>
+</TelaPopover>
+
+<!-- Align Center (default) -->
+<TelaPopover>
+  <TelaPopoverTrigger>
+    <TelaButton>Center</TelaButton>
+  </TelaPopoverTrigger>
+  <TelaPopoverContent align="center">
+    Aligned to center
+  </TelaPopoverContent>
+</TelaPopover>
+
+<!-- Align End -->
+<TelaPopover>
+  <TelaPopoverTrigger>
+    <TelaButton>End</TelaButton>
+  </TelaPopoverTrigger>
+  <TelaPopoverContent align="end">
+    Aligned to end
+  </TelaPopoverContent>
+</TelaPopover>
+```
+
+### With Side Offset
+
+```vue
+<TelaPopover>
+  <TelaPopoverTrigger>
+    <TelaButton>With Offset</TelaButton>
+  </TelaPopoverTrigger>
+  <TelaPopoverContent :side-offset="20">
+    Popover with 20px offset
+  </TelaPopoverContent>
+</TelaPopover>
+```
+
+### Form in Popover
+
+```vue
+<TelaPopover v-model:open="isOpen">
+  <TelaPopoverTrigger>
+    <TelaButton>Add Item</TelaButton>
+  </TelaPopoverTrigger>
+  <TelaPopoverContent>
+    <form @submit.prevent="onSubmit" class="p-4 w-300px">
+      <h3 class="text-lg font-medium mb-4">Add New Item</h3>
+      <TelaInput label="Name" v-model="name" class="mb-3" />
+      <TelaTextarea label="Description" v-model="description" class="mb-4" />
+      <div class="flex gap-2 justify-end">
+        <TelaButton variant="secondary" @click="isOpen = false">
+          Cancel
+        </TelaButton>
+        <TelaButton type="submit" variant="primary">
+          Add
+        </TelaButton>
+      </div>
+    </form>
+  </TelaPopoverContent>
+</TelaPopover>
+```
+
+## Props
+
+<ArgTypes />
+
+```typescript
+type PopoverSide = 'top' | 'right' | 'bottom' | 'left'
+type PopoverAlign = 'start' | 'center' | 'end'
+
+type PopoverProps = {
+  open?: boolean
+  side?: PopoverSide
+  align?: PopoverAlign
+  sideOffset?: number
+  ariaLabel?: string
+}
+```
+
+## Components
+
+- `TelaPopover` - Root popover container
+- `TelaPopoverTrigger` - Trigger button/element
+- `TelaPopoverContent` - Content panel
+
+## Features
+
+- **Flexible Positioning**: All sides and alignments
+- **Click to Open**: Opens on click (vs hover for tooltip)
+- **Click Outside to Close**: Closes when clicking outside
+- **Escape Key**: Press Escape to close
+- **Custom Content**: Full control over popover content
+- **Side Offset**: Control distance from trigger
+- **Accessible**: Built on reka-ui with proper ARIA
+- **Portal Rendering**: Renders in portal to avoid z-index issues
+
+## Popover vs Tooltip
+
+- **Popover**: Click to open, rich interactive content
+- **Tooltip**: Hover to show, brief informational text
+
+## Best Practices
+
+1. **Use for Actions**: Popovers are for interactive content
+2. **Keep Content Focused**: Don't overload with too much content
+3. **Provide Close Option**: Ensure users can close easily
+4. **Position Wisely**: Ensure popover doesn't cover important UI
+5. **Mobile Friendly**: Popovers work better than tooltips on touch
+
+## Accessibility
+
+- Built on reka-ui primitives
+- Proper ARIA attributes (role="dialog")
+- Keyboard navigation (Escape to close)
+- Focus management
+- Click outside to close
+- Screen reader support

package/components/tela/popover/popover.stories.ts

@@ -0,0 +1,150 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { fn } from '@storybook/test'
+import Popover from './popover.vue'
+import PopoverTrigger from './popover-trigger.vue'
+import PopoverContent from './popover-content.vue'
+
+const meta: Meta<typeof Popover> = {
+    title: 'Core/Popover',
+    component: Popover,
+    subcomponents: { PopoverTrigger, PopoverContent },
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'A popover component that displays content in a floating panel. Supports positioning on all sides (top, right, bottom, left) with different alignments (start, center, end). Built with composable subcomponents for flexible usage.',
+            },
+        },
+    },
+    argTypes: {
+        open: {
+            control: 'boolean',
+            description: 'Controls the open state of the popover. Use v-model:open for two-way binding.',
+        },
+        side: {
+            control: 'select',
+            options: ['top', 'right', 'bottom', 'left'],
+            description: 'Side of the trigger element where the popover should appear.',
+        },
+        align: {
+            control: 'select',
+            options: ['start', 'center', 'end'],
+            description: 'Alignment of the popover content relative to the trigger element.',
+        },
+        sideOffset: {
+            control: 'number',
+            description: 'Distance in pixels from the trigger element to the popover content.',
+        },
+        ariaLabel: {
+            control: 'text',
+            description: 'Accessibility label for the popover trigger element.',
+        },
+    },
+    args: {
+        'onUpdate:open': fn(),
+        'side': 'bottom',
+        'align': 'center',
+        'ariaLabel': 'Popover trigger',
+    } as any,
+}
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+    render: args => ({
+        components: { Popover, PopoverTrigger, PopoverContent },
+        setup() {
+            const isOpen = ref(false)
+            return { args, isOpen }
+        },
+        template: `
+            <div style="padding: 100px; display: flex; justify-content: center;">
+                <Popover v-model:open="isOpen" v-bind="args">
+                    <PopoverTrigger>
+                        <button>Click me</button>
+                    </PopoverTrigger>
+                    <PopoverContent>
+                        <h3 class="text-lg font-medium">Popover Content</h3>
+                        <p class="mt-2">This is the content of the popover.</p>
+                    </PopoverContent>
+                </Popover>
+            </div>
+        `,
+    }),
+}
+
+export const WithCustomContent: Story = {
+    render: args => ({
+        components: { Popover, PopoverTrigger, PopoverContent },
+        setup() {
+            const isOpen = ref(false)
+            return { args, isOpen }
+        },
+        template: `
+            <div style="padding: 100px; display: flex; justify-content: center;">
+                <Popover v-model:open="isOpen" v-bind="args">
+                    <PopoverTrigger>
+                        <button class="px-4 py-2 bg-blue-500 text-white rounded">
+                            Hover me
+                        </button>
+                    </PopoverTrigger>
+                    <PopoverContent>
+                        <div class="flex flex-col gap-2">
+                            <button class="p-2 hover:bg-gray-100 rounded">Option 1</button>
+                            <button class="p-2 hover:bg-gray-100 rounded">Option 2</button>
+                            <button class="p-2 hover:bg-gray-100 rounded">Option 3</button>
+                        </div>
+                    </PopoverContent>
+                </Popover>
+            </div>
+        `,
+    }),
+}
+
+export const WithDifferentPositions: Story = {
+    render: args => ({
+        components: { Popover, PopoverTrigger, PopoverContent },
+        setup() {
+            return { args }
+        },
+        template: `
+            <div style="padding: 100px; display: flex; gap: 100px; justify-content: center; flex-wrap: wrap;">
+                <Popover v-for="side in ['top', 'right', 'bottom', 'left']" :key="side" v-bind="args">
+                    <PopoverTrigger>
+                        <button class="px-4 py-2 bg-gray-200 rounded">
+                            {{ side }}
+                        </button>
+                    </PopoverTrigger>
+                    <PopoverContent :side="side">
+                        Popover on {{ side }}
+                    </PopoverContent>
+                </Popover>
+            </div>
+        `,
+    }),
+}
+
+export const WithDifferentAlignments: Story = {
+    render: args => ({
+        components: { Popover, PopoverTrigger, PopoverContent },
+        setup() {
+            return { args }
+        },
+        template: `
+            <div style="padding: 100px; display: flex; gap: 100px; justify-content: center; flex-wrap: wrap;">
+                <Popover v-for="align in ['start', 'center', 'end']" :key="align" v-bind="args">
+                    <PopoverTrigger>
+                        <button class="px-4 py-2 bg-gray-200 rounded">
+                            {{ align }}
+                        </button>
+                    </PopoverTrigger>
+                    <PopoverContent :align="align">
+                        Popover on {{ align }}
+                    </PopoverContent>
+                </Popover>
+            </div>
+        `,
+    }),
+}

package/components/tela/popover/popover.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { PopoverRootEmits, PopoverRootProps } from 'reka-ui'
+import { PopoverRoot, useForwardPropsEmits } from 'reka-ui'
+
+const props = defineProps<PopoverRootProps>()
+const emits = defineEmits<PopoverRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+    <PopoverRoot v-bind="forwarded">
+        <slot />
+    </PopoverRoot>
+</template>

package/components/tela/popover-list/popover-list-nested.vue

@@ -0,0 +1,104 @@
+<script setup lang="ts" generic="T">
+interface PopoverListNestedProps<T> {
+    items: T[]
+    depth?: number
+    variant?: 'attributes' | 'detailed'
+    hasChildrenFn: (item: T) => boolean
+    getChildrenFn: (item: T) => T[]
+}
+
+const props = defineProps<PopoverListNestedProps<T>>()
+
+function getNestedItemName(item: T): string {
+    if (typeof item === 'object' && item !== null) {
+        const obj = item as any
+        return obj.name || obj.id || 'Item'
+    }
+    return String(item)
+}
+
+function getNestedItemValue(item: T): any {
+    if (typeof item === 'object' && item !== null) {
+        const obj = item as any
+        const value = obj.value !== undefined ? obj.value : item
+
+        // Se o valor é um objeto complexo, não exibir no modo detailed
+        if (typeof value === 'object' && value !== null) {
+            return null
+        }
+
+        return value
+    }
+    return item
+}
+
+function shouldShowValue(item: T): boolean {
+    const value = getNestedItemValue(item)
+    return value !== null && value !== undefined
+}
+
+const textStyle = computed(() => props.depth
+    ? 'text-gray-300 text-[11px] tracking-[-0.022px]'
+    : 'text-[#EFF1F3] text-[12px] tracking-[-0.024px]')
+</script>
+
+<template>
+    <div v-for="(item, index) in items" :key="`${getNestedItemName(item)}-${index}`">
+        <!-- Detailed variant -->
+        <div v-if="getNestedItemName(item) && variant === 'detailed'" class="flex flex-col items-start self-stretch pb-8px rounded-md p-1">
+            <span class="text-white text-[12px] font-semibold">
+                <slot name="item" :item="item" :index="index" :depth="depth">
+                    {{ getNestedItemName(item) }}
+                </slot>
+            </span>
+            <span v-if="shouldShowValue(item)" class="text-[#BDC4CC] text-[12px]">
+                {{ getNestedItemValue(item) }}
+            </span>
+        </div>
+
+        <!-- Detailed variant without name -->
+        <div v-else-if="variant === 'detailed' && !getNestedItemName(item)" class="flex flex-col items-start self-stretch pb-8px rounded-md p-1">
+            <span v-if="shouldShowValue(item)" class="text-[#BDC4CC] text-[12px]">
+                <slot name="item" :item="item" :index="index" :depth="depth">
+                    {{ getNestedItemValue(item) }}
+                </slot>
+            </span>
+            <span v-else class="text-[#BDC4CC] text-[12px]">
+                No value yet
+            </span>
+        </div>
+
+        <!-- Attributes variant -->
+        <div v-if="getNestedItemName(item) && variant === 'attributes'" class="flex items-center gap-4px self-stretch py-2px rounded-md px-1">
+            <div class="w-2 h-2 rounded-full flex py-[2px] items-center gap-4px self-stretch">
+                <svg width="6" height="8" viewBox="0 0 6 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+                    <g id="ColorArea">
+                        <circle id="Color" cx="2" cy="5" r="2" fill="#8BA5FF" />
+                    </g>
+                </svg>
+            </div>
+            <p class="text-justify font-inter font-medium leading-[12px] max-w-[150px] truncate text-ellipsis" :class="[textStyle]">
+                <slot name="item" :item="item" :index="index" :depth="depth">
+                    {{ getNestedItemName(item) }}
+                </slot>
+            </p>
+        </div>
+
+        <!-- Nested children -->
+        <template v-if="hasChildrenFn(item)">
+            <div class="pl-4">
+                <PopoverListNested
+                    :items="getChildrenFn(item)"
+                    :depth="(depth ?? 0) + 1"
+                    :variant="variant"
+                    :has-children-fn="hasChildrenFn"
+                    :get-children-fn="getChildrenFn"
+                >
+                    <template #item="slotProps: any">
+                        <slot name="item" v-bind="slotProps" />
+                    </template>
+                </PopoverListNested>
+            </div>
+        </template>
+    </div>
+</template>