@meistrari/tela-build 1.0.0

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

@@ -0,0 +1,330 @@
+import PopoverList from './popover-list.vue'
+
+const meta = {
+    title: 'Components/PopoverList',
+    component: PopoverList,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'A popover list component that displays a list of items in a floating panel. Supports custom item rendering, nested data structures, empty states, and flexible positioning. Useful for displaying lists of data in a popover overlay with title and subtitle support.',
+            },
+        },
+    },
+    argTypes: {
+        items: {
+            control: 'object',
+            description: 'Array of items to display in the list. Can be simple strings or complex objects with nested structures.',
+        },
+        title: {
+            control: 'text',
+            description: 'Title displayed at the top of the popover list.',
+        },
+        subtitle: {
+            control: 'text',
+            description: 'Subtitle displayed below the title.',
+        },
+        position: {
+            control: { type: 'select' },
+            options: ['left', 'center', 'right'],
+            description: 'Horizontal position alignment of the popover relative to the trigger.',
+        },
+        placement: {
+            control: { type: 'select' },
+            options: ['top', 'bottom'],
+            description: 'Vertical placement of the popover relative to the trigger (above or below).',
+        },
+        nested: {
+            control: 'boolean',
+            description: 'Enable nested data structure rendering for complex hierarchical data.',
+        },
+        nestedVariant: {
+            control: 'select',
+            options: ['attributes', 'detailed'],
+            description: 'Variant style for nested data rendering. "attributes" for key-value pairs, "detailed" for more detailed view.',
+        },
+    },
+}
+
+export default meta
+
+export const Basic = {
+    args: {
+        items: ['Item 1', 'Item 2', 'Item 3'],
+        title: 'List Title',
+        subtitle: 'List subtitle',
+    },
+    render: (args: any) => ({
+        components: { PopoverList },
+        setup() {
+            return { args }
+        },
+        template: `
+            <PopoverList v-bind="args">
+                <template #trigger>
+                    <button class="px-4 py-2 bg-blue-500 text-white rounded">
+                        Click me
+                    </button>
+                </template>
+            </PopoverList>
+        `,
+    }),
+}
+
+export const WithCustomItems = {
+    args: {
+        items: [
+            { name: 'John Doe', role: 'Developer' },
+            { name: 'Jane Smith', role: 'Designer' },
+            { name: 'Bob Wilson', role: 'Manager' },
+        ],
+        title: 'Team Members',
+    },
+    render: (args: any) => ({
+        components: { PopoverList },
+        setup() {
+            return { args }
+        },
+        template: `
+            <PopoverList v-bind="args">
+                <template #trigger>
+                    <button class="px-4 py-2 bg-green-500 text-white rounded">
+                        Show Team
+                    </button>
+                </template>
+                <template #item="{ item }">
+                    <div class="flex flex-col">
+                        <span class="text-white font-semibold text-[12px]">{{ item.name }}</span>
+                        <span class="text-gray-400 text-[10px]">{{ item.role }}</span>
+                    </div>
+                </template>
+            </PopoverList>
+        `,
+    }),
+}
+
+export const LeftPosition = {
+    args: {
+        items: ['Left Item 1', 'Left Item 2', 'Left Item 3'],
+        position: 'left',
+        title: 'Left Positioned',
+    },
+    render: (args: any) => ({
+        components: { PopoverList },
+        setup() {
+            return { args }
+        },
+        template: `
+            <div class="ml-64">
+                <PopoverList v-bind="args">
+                    <template #trigger>
+                        <button class="px-4 py-2 bg-red-500 text-white rounded">
+                            Left Popover
+                        </button>
+                    </template>
+                </PopoverList>
+            </div>
+        `,
+    }),
+}
+
+export const CenterPosition = {
+    args: {
+        items: ['Center Item 1', 'Center Item 2', 'Center Item 3'],
+        position: 'center',
+        title: 'Center Positioned',
+    },
+    render: (args: any) => ({
+        components: { PopoverList },
+        setup() {
+            return { args }
+        },
+        template: `
+            <PopoverList v-bind="args">
+                <template #trigger>
+                    <button class="px-4 py-2 bg-purple-500 text-white rounded">
+                        Center Popover
+                    </button>
+                </template>
+            </PopoverList>
+        `,
+    }),
+}
+
+export const EmptyState = {
+    args: {
+        items: [],
+        title: 'Empty List',
+    },
+    render: (args: any) => ({
+        components: { PopoverList },
+        setup() {
+            return { args }
+        },
+        template: `
+            <PopoverList v-bind="args">
+                <template #trigger>
+                    <button class="px-4 py-2 bg-gray-500 text-white rounded">
+                        Empty List
+                    </button>
+                </template>
+                <template #empty>
+                    <div class="flex flex-col items-start gap-4px">
+                        <p class="text-white text-left font-inter text-[12px] font-semibold w-full leading-[128%] tracking-[-0.06px]">
+                            Nothing to show here
+                        </p>
+                        <p class="text-[#BDC4CC] text-left font-inter text-[11px] font-medium w-full leading-[124%] tracking-[-0.022px]">
+                            Add some items to see them in the list
+                        </p>
+                    </div>
+                </template>
+            </PopoverList>
+        `,
+    }),
+}
+
+export const NestedAttributes = {
+    args: {
+        nested: true,
+        nestedVariant: 'attributes',
+        items: [
+            {
+                name: 'User',
+                value: {
+                    name: { name: 'Name', value: 'John Doe' },
+                    email: { name: 'Email', value: 'john@example.com' },
+                    profile: {
+                        name: 'Profile',
+                        value: {
+                            age: { name: 'Age', value: 30 },
+                            city: { name: 'City', value: 'New York' },
+                        },
+                    },
+                },
+            },
+            {
+                name: 'Settings',
+                value: {
+                    theme: { name: 'Theme', value: 'dark' },
+                    notifications: { name: 'Notifications', value: true },
+                },
+            },
+        ],
+        title: 'Nested Attributes',
+        subtitle: 'Tree structure with attributes view',
+    },
+    render: (args: any) => ({
+        components: { PopoverList },
+        setup() {
+            return { args }
+        },
+        template: `
+            <PopoverList v-bind="args">
+                <template #trigger>
+                    <button class="px-4 py-2 bg-indigo-500 text-white rounded">
+                        Nested Attributes
+                    </button>
+                </template>
+            </PopoverList>
+        `,
+    }),
+}
+
+export const NestedDetailed = {
+    args: {
+        nested: true,
+        nestedVariant: 'detailed',
+        items: [
+            {
+                name: 'Database',
+                value: {
+                    host: { name: 'Host', value: 'localhost' },
+                    port: { name: 'Port', value: 5432 },
+                    credentials: {
+                        name: 'Credentials',
+                        value: {
+                            username: { name: 'Username', value: 'admin' },
+                            password: { name: 'Password', value: '***' },
+                        },
+                    },
+                },
+            },
+            {
+                name: 'API',
+                value: {
+                    endpoint: { name: 'Endpoint', value: '/api/v1' },
+                    timeout: { name: 'Timeout', value: 30000 },
+                },
+            },
+        ],
+        title: 'Nested Detailed',
+        subtitle: 'Tree structure with detailed view',
+    },
+    render: (args: any) => ({
+        components: { PopoverList },
+        setup() {
+            return { args }
+        },
+        template: `
+            <PopoverList v-bind="args">
+                <template #trigger>
+                    <button class="px-4 py-2 bg-teal-500 text-white rounded">
+                        Nested Detailed
+                    </button>
+                </template>
+            </PopoverList>
+        `,
+    }),
+}
+
+export const TopPlacement = {
+    args: {
+        items: ['Top Item 1', 'Top Item 2', 'Top Item 3'],
+        placement: 'top',
+        position: 'center',
+        title: 'Top Positioned',
+        subtitle: 'Appears above the trigger',
+    },
+    render: (args: any) => ({
+        components: { PopoverList },
+        setup() {
+            return { args }
+        },
+        template: `
+            <div class="mt-64">
+                <PopoverList v-bind="args">
+                    <template #trigger>
+                        <button class="px-4 py-2 bg-amber-500 text-white rounded">
+                            Top Popover
+                        </button>
+                    </template>
+                </PopoverList>
+            </div>
+        `,
+    }),
+}
+
+export const BottomPlacement = {
+    args: {
+        items: ['Bottom Item 1', 'Bottom Item 2', 'Bottom Item 3'],
+        placement: 'bottom',
+        position: 'center',
+        title: 'Bottom Positioned',
+        subtitle: 'Appears below the trigger',
+    },
+    render: (args: any) => ({
+        components: { PopoverList },
+        setup() {
+            return { args }
+        },
+        template: `
+            <PopoverList v-bind="args">
+                <template #trigger>
+                    <button class="px-4 py-2 bg-lime-500 text-white rounded">
+                        Bottom Popover
+                    </button>
+                </template>
+            </PopoverList>
+        `,
+    }),
+}

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

@@ -0,0 +1,191 @@
+<script setup lang="ts" generic="T">
+import { PopoverContent, PopoverRoot, PopoverTrigger, PopoverPortal } from 'radix-vue'
+import PopoverListNested from './popover-list-nested.vue'
+
+interface PopoverListProps<T> {
+    items: T[]
+    title?: string
+    subtitle?: string
+    position?: 'left' | 'center' | 'right'
+    placement?: 'top' | 'bottom'
+    nested?: boolean
+    nestedVariant?: 'attributes' | 'detailed'
+    hasChildrenFn?: (item: T) => boolean
+    getChildrenFn?: (item: T) => T[]
+}
+
+const props = withDefaults(defineProps<PopoverListProps<T>>(), {
+    position: 'right',
+    placement: 'bottom',
+    nested: false,
+    nestedVariant: 'attributes',
+})
+
+const popoverOpen = defineModel('open', {
+    type: Boolean,
+    default: false,
+})
+
+const hoverTimeout = ref<NodeJS.Timeout>()
+
+function handleMouseEnter() {
+    clearTimeout(hoverTimeout.value)
+    popoverOpen.value = true
+}
+
+function handleMouseLeave() {
+    hoverTimeout.value = setTimeout(() => {
+        popoverOpen.value = false
+    }, 150)
+}
+
+const popoverSide = computed(() => {
+    if (props.placement === 'top') {
+        return 'top'
+    }
+    if (props.placement === 'bottom') {
+        return 'bottom'
+    }
+    // Fallback para position horizontal quando placement não é especificado
+    if (props.position === 'left') {
+        return 'left'
+    }
+    if (props.position === 'right') {
+        return 'right'
+    }
+    return 'bottom' // default
+})
+
+const popoverAlign = computed(() => {
+    if (props.placement === 'top' || props.placement === 'bottom') {
+        // Para top/bottom, usar position para alinhamento horizontal
+        if (props.position === 'left') {
+            return 'start'
+        }
+        if (props.position === 'right') {
+            return 'end'
+        }
+        if (props.position === 'center') {
+            return 'center'
+        }
+        return 'center' // default para top/bottom
+    }
+    // Para left/right, usar alinhamento padrão
+    return 'start'
+})
+
+function hasChildren(item: T): boolean {
+    if (props.hasChildrenFn) {
+        return props.hasChildrenFn(item)
+    }
+
+    // Default logic for nested objects
+    if (typeof item === 'object' && item !== null) {
+        const obj = item as any
+        return obj.value && typeof obj.value === 'object' && Object.keys(obj.value).length > 0
+    }
+
+    return false
+}
+
+function getChildren(item: T): T[] {
+    if (props.getChildrenFn) {
+        return props.getChildrenFn(item)
+    }
+
+    // Default logic for nested objects
+    if (typeof item === 'object' && item !== null) {
+        const obj = item as any
+        if (obj.value && typeof obj.value === 'object') {
+            return Object.values(obj.value)
+        }
+    }
+
+    return []
+}
+</script>
+
+<template>
+    <PopoverRoot v-model:open="popoverOpen">
+        <PopoverTrigger
+            as-child
+            @mouseenter="handleMouseEnter"
+            @mouseleave="handleMouseLeave"
+        >
+            <slot name="trigger" />
+        </PopoverTrigger>
+        <PopoverPortal>
+            <PopoverContent
+                class="inline-flex flex-col items-start gap-1 rounded-[12px] bg-[#030C16] p-3"
+                :style="{
+                    'box-shadow': '0px 16px 80px 0px #0D2D4814, 0px 4px 16px 0px #0D2D480D',
+                    'z-index': '11000',
+                    'width': '200px',
+                }"
+                :side="popoverSide"
+                :align="popoverAlign"
+                @mouseenter="handleMouseEnter"
+                @mouseleave="handleMouseLeave"
+            >
+                <!-- Header with title and subtitle -->
+                <div v-if="title || subtitle || $slots.title || $slots.subtitle" class="w-full">
+                    <div v-if="title || $slots.title" class="text-white text-left font-inter text-[12px] font-semibold leading-[16px]" style="font-weight: 580;">
+                        <slot name="title">
+                            {{ title }}
+                        </slot>
+                    </div>
+                    <div v-if="subtitle || $slots.subtitle" class="text-[#BDC4CC] text-left font-inter text-[11px] font-medium leading-[124%] tracking-[-0.022px] mt-1">
+                        <slot name="subtitle">
+                            {{ subtitle }}
+                        </slot>
+                    </div>
+                </div>
+
+                <!-- List content -->
+                <template v-if="items && items.length > 0">
+                    <div v-if="!nested" class="flex flex-col gap-2px w-full">
+                        <div
+                            v-for="(item, index) in items"
+                            :key="index"
+                            class="rounded-md"
+                        >
+                            <slot name="item" :item="item" :index="index">
+                                <div class="text-[#D4D9DE] text-left font-inter text-[12px] font-normal leading-[16px] max-w-full truncate">
+                                    {{ item }}
+                                </div>
+                            </slot>
+                        </div>
+                    </div>
+
+                    <!-- Nested display -->
+                    <div v-else class="w-full">
+                        <PopoverListNested
+                            :items="items"
+                            :variant="nestedVariant"
+                            :depth="0"
+                            :has-children-fn="hasChildren"
+                            :get-children-fn="getChildren"
+                        >
+                            <template #item="{ item, index, depth }">
+                                <slot name="nested-item" :item="item" :index="index" :depth="depth">
+                                    <slot name="item" :item="item" :index="index" />
+                                </slot>
+                            </template>
+                        </PopoverListNested>
+                    </div>
+                </template>
+
+                <!-- Empty state -->
+                <template v-else>
+                    <slot name="empty">
+                        <div class="flex flex-col items-start gap-2 w-full">
+                            <p class="text-[#D4D9DE] text-left font-inter text-[12px] font-normal leading-[16px] w-full">
+                                {{ $t('common.noItemsAvailable') }}
+                            </p>
+                        </div>
+                    </slot>
+                </template>
+            </PopoverContent>
+        </PopoverPortal>
+    </PopoverRoot>
+</template>

package/components/tela/radio-button.vue

@@ -0,0 +1,66 @@
+<script setup lang="ts">
+const props = defineProps<{
+    autoFocus?: boolean
+    disabled?: boolean
+    modelValue?: boolean
+}>()
+
+const checked = defineModel<boolean>()
+
+const radioEl = ref<HTMLInputElement | null>(null)
+onMounted(() => {
+    if (props.autoFocus) {
+        radioEl.value?.focus()
+    }
+})
+
+function toggle() {
+    checked.value = !checked.value
+}
+</script>
+
+<template>
+    <input
+        ref="radioEl"
+        type="radio"
+        :checked="checked"
+        :disabled="disabled"
+        b="1px gray-900"
+        cursor-pointer
+        :class="[checked ? 'bg-gray-900' : 'bg-white hover:bg-gray-200']"
+        class="form-radio focus:ring-1 focus:ring-gray-200 text-gray-900"
+        @change="toggle"
+    >
+</template>
+
+<style>
+.form-radio:checked {
+    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='3'/%3E%3C/svg%3E")
+}
+
+.form-radio:checked {
+    background-color: currentColor;
+    background-position: 50%;
+    background-repeat: no-repeat;
+    background-size: 100% 100%;
+    border-color: transparent;
+}
+
+.form-radio {
+    border-radius: 100%;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+    appearance: none;
+    display: inline-block;
+    flex-shrink: 0;
+    height: 1rem;
+    padding: 0;
+    -webkit-print-color-adjust: exact;
+    print-color-adjust: exact;
+    -webkit-user-select: none;
+    -moz-user-select: none;
+    user-select: none;
+    vertical-align: middle;
+    width: 1rem;
+}
+</style>

package/components/tela/radio-group/radio-group-item.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import type { RadioGroupItemProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import {
+    RadioGroupIndicator,
+    RadioGroupItem,
+    useForwardProps,
+} from 'reka-ui'
+import { computed } from 'vue'
+
+const props = defineProps<RadioGroupItemProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props
+
+    return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+    <RadioGroupItem
+        v-bind="forwardedProps"
+        :class="
+            cn(
+                'peer aspect-square w-16px h-16px rounded-full border-[1px] border-gray-300 bg-white-1000 hover:bg-gray-50 hover:border-gray-400 disabled:border-gray-200 disabled:bg-gray-100',
+                'data-[state=checked]:bg-gray-700 data-[state=checked]:hover:bg-gray-950 disabled:data-[state=checked]:bg-gray-400 data-[state=checked]:!border-transparent',
+                'focus:outline-none focus-visible:ring-1 focus-visible:ring-cyan-600 focus-visible:ring-offset-2 disabled:cursor-not-allowed',
+                props.class,
+            )
+        "
+    >
+        <RadioGroupIndicator
+            class="flex items-center justify-center"
+        >
+            <TelaIcon name="i-ph-circle-fill" color="white-1000" size="6px" />
+        </RadioGroupIndicator>
+    </RadioGroupItem>
+</template>

package/components/tela/radio-group/radio-group-root.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { RadioGroupRoot, useForwardPropsEmits } from 'reka-ui'
+import type { RadioGroupRootEmits, RadioGroupRootProps } from 'reka-ui'
+import { computed } from 'vue'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<RadioGroupRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<RadioGroupRootEmits>()
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props
+
+    return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+    <RadioGroupRoot
+        :class="cn('grid gap-2', props.class)"
+        v-bind="forwarded"
+    >
+        <slot />
+    </RadioGroupRoot>
+</template>