@meistrari/tela-build 1.0.0

package/components/tela/dropdown-menu/DropdownMenuCheckboxItem.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { Check } from 'lucide-vue-next'
+import {
+    DropdownMenuCheckboxItem,
+    DropdownMenuItemIndicator,
+    useForwardPropsEmits,
+} from 'radix-vue'
+import type { DropdownMenuCheckboxItemEmits, DropdownMenuCheckboxItemProps } from 'radix-vue'
+import { computed } from 'vue'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<DropdownMenuCheckboxItemProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<DropdownMenuCheckboxItemEmits>()
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props
+
+    return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+    <DropdownMenuCheckboxItem
+        v-bind="forwarded"
+        :class=" cn(
+            'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+            props.class,
+        )"
+    >
+        <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+            <DropdownMenuItemIndicator>
+                <Check class="w-4 h-4" />
+            </DropdownMenuItemIndicator>
+        </span>
+        <slot />
+    </DropdownMenuCheckboxItem>
+</template>

package/components/tela/dropdown-menu/DropdownMenuContent.vue

@@ -0,0 +1,75 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import {
+    DropdownMenuContent,
+    DropdownMenuPortal,
+    useForwardPropsEmits,
+} from 'radix-vue'
+import type { DropdownMenuContentEmits, DropdownMenuContentProps } from 'radix-vue'
+import { computed } from 'vue'
+import type { HTMLAttributes } from 'vue'
+
+const props = withDefaults(
+    defineProps<DropdownMenuContentProps & { class?: HTMLAttributes['class'] }>(),
+    {
+        sideOffset: 4,
+    },
+)
+const emits = defineEmits<DropdownMenuContentEmits>()
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props
+
+    return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+    <DropdownMenuPortal>
+        <DropdownMenuContent
+            v-bind="forwarded"
+            :class="cn('DropdownMenuContent z-50 min-w-60 overflow-hidden rounded-2xl border-[0.5px] border-gray-300 bg-white-1000 p-1 shadow-sm', props.class)"
+        >
+            <slot />
+        </DropdownMenuContent>
+    </DropdownMenuPortal>
+</template>
+
+<style>
+.DropdownMenuContent {
+  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
+
+  &[data-state="open"] {
+     animation: slideDownAndFade 0.12s ease-out forwards;
+  }
+
+  &[data-state="closed"] {
+     animation: slideUpAndFade 0.12s ease-out forwards;
+     animation-delay: 0s;
+  }
+}
+
+@keyframes slideDownAndFade {
+    from {
+        opacity: 0;
+        transform: translateY(2px) scale(0.97);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+@keyframes slideUpAndFade {
+    from {
+        opacity: 1;
+        transform: translateY(0) scale(1);
+    }
+    to {
+        opacity: 0;
+        transform: translateY(-2px) scale(0.97);
+    }
+}
+</style>

package/components/tela/dropdown-menu/DropdownMenuGroup.vue

@@ -0,0 +1,12 @@
+<script setup lang="ts">
+import { DropdownMenuGroup } from 'radix-vue'
+import type { DropdownMenuGroupProps } from 'radix-vue'
+
+const props = defineProps<DropdownMenuGroupProps>()
+</script>
+
+<template>
+    <DropdownMenuGroup v-bind="props">
+        <slot />
+    </DropdownMenuGroup>
+</template>

package/components/tela/dropdown-menu/DropdownMenuItem.vue

@@ -0,0 +1,137 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+import { DropdownMenuItem } from 'radix-vue'
+import type { DropdownMenuItemProps } from 'radix-vue'
+import Tooltip from '../tooltip/tooltip.vue'
+import type { TooltipProps } from '../tooltip/tooltip.vue'
+
+const props = defineProps<DropdownMenuItemProps & {
+    class?: HTMLAttributes['class']
+    inset?: boolean
+    icon?: string
+    iconSide?: 'left' | 'right'
+    iconWithBackground?: {
+        name: string
+        size?: string
+        backgroundClass?: string
+    }
+    color?: 'positive' | 'caution' | 'negative'
+    checkbox?: {
+        modelValue: boolean
+        onChange: (value: boolean) => void
+    }
+    tooltip?: string | TooltipProps
+}>()
+
+function getItemClasses(color?: typeof props.color) {
+    const itemClasses: Record<string, string> = {
+        default: 'focus:bg-gray-100 text-gray-900',
+        positive: 'focus:bg-gray-100 text-positive',
+        caution: 'focus:bg-amber-50 text-amber-500',
+        negative: 'focus:bg-red-100 text-red-500',
+    }
+
+    return itemClasses[color ?? 'default']
+}
+
+function getIconClasses(color?: typeof props.color) {
+    const iconClasses: Record<string, string> = {
+        default: 'text-gray-500',
+        positive: 'text-positive',
+        caution: 'text-caution',
+        negative: 'text-red-500',
+    }
+
+    return iconClasses[color ?? 'default']
+}
+
+const tooltipConfig = computed(() => {
+    if (typeof props.tooltip === 'string') {
+        return {
+            content: props.tooltip,
+            side: 'right' as const,
+            align: 'center' as const,
+            variant: 'single' as const,
+        }
+    }
+    if (typeof props.tooltip === 'object' && props.tooltip) {
+        return {
+            content: props.tooltip.content,
+            side: props.tooltip.side || 'right' as const,
+            align: props.tooltip.align || 'center' as const,
+            variant: props.tooltip.variant || 'single' as const,
+            title: props.tooltip.title,
+            description: props.tooltip.description,
+            alignOffset: props.tooltip.alignOffset,
+            arrowOffset: props.tooltip.arrowOffset,
+        }
+    }
+    return null
+})
+
+const shouldShowTooltip = computed(() => !!tooltipConfig.value)
+
+const isIconImage = computed(() => {
+    if (!props.icon)
+        return false
+    return /\.(jpg|jpeg|png|gif|svg|webp)$/i.test(props.icon) || props.icon.startsWith('data:image/')
+})
+</script>
+
+<template>
+    <Tooltip
+        v-if="shouldShowTooltip"
+        :content="tooltipConfig?.content"
+        :side="tooltipConfig?.side"
+        :align="tooltipConfig?.align"
+        :variant="tooltipConfig?.variant"
+        :align-offset="tooltipConfig?.alignOffset"
+        :arrow-offset="tooltipConfig?.arrowOffset"
+        :title="tooltipConfig?.title"
+        :description="tooltipConfig?.description"
+        :delay-duration="100"
+    >
+        <DropdownMenuItem
+            v-bind="props"
+            :class="cn(
+                'group outline-none',
+                'relative flex cursor-pointer select-none items-center rounded-xl px-3 py-1.5',
+                'text-body-14-medium font-460 outline-none focus:bg-gray-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-40',
+                inset && 'pl-8',
+                props.class,
+            )"
+        >
+            <img v-if="icon && isIconImage" :src="icon" :class="cn('size-16px', getIconClasses(props.color))">
+            <TelaIcon v-else-if="icon" :name="icon" :class="getIconClasses(props.color)" />
+            <TelaIcon v-else-if="iconWithBackground" :name="iconWithBackground.name" :size="iconWithBackground.size" :background-class="iconWithBackground.backgroundClass" :class="getIconClasses(props.color)" />
+            <TelaCheckbox v-else-if="checkbox" :model-value="checkbox?.modelValue" @update:model-value="(value) => checkbox?.onChange(value === true)" />
+            <span text-body-14-medium font-460 :class="getItemClasses(props.color)">
+                <slot />
+            </span>
+        </DropdownMenuItem>
+    </Tooltip>
+
+    <DropdownMenuItem
+        v-else
+        v-bind="props"
+        :class="cn(
+            'group outline-none',
+            'relative flex gap-10px cursor-pointer select-none items-center rounded-xl px-3 py-1.5',
+            'outline-none focus:bg-gray-100 data-[disabled]:pointer-events-none data-[disabled]:opacity-40',
+            getItemClasses(props.color),
+            inset && 'pl-8',
+            props.class,
+        )"
+    >
+        <img v-if="icon && (!iconSide || iconSide === 'left') && isIconImage" :src="icon" :class="cn('size-16px', getIconClasses(props.color))">
+        <TelaIcon v-else-if="icon && (!iconSide || iconSide === 'left')" :name="icon" :class="getIconClasses(props.color)" />
+        <TelaIcon v-else-if="iconWithBackground" :name="iconWithBackground.name" :size="iconWithBackground.size" :background-class="iconWithBackground.backgroundClass" :class="getIconClasses(props.color)" />
+        <TelaCheckbox v-else-if="checkbox" :model-value="checkbox?.modelValue" @update:model-value="(value) => checkbox?.onChange(value === true)" />
+        <span text-body-14-medium font-460 :class="getItemClasses(props.color)">
+            <slot />
+        </span>
+        <img v-if="icon && iconSide === 'right' && isIconImage" :src="icon" :class="cn('size-16px')">
+        <TelaIcon v-else-if="icon && iconSide === 'right'" :name="icon" />
+    </DropdownMenuItem>
+</template>

package/components/tela/dropdown-menu/DropdownMenuLabel.vue

@@ -0,0 +1,26 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { DropdownMenuLabel, useForwardProps } from 'radix-vue'
+import type { DropdownMenuLabelProps } from 'radix-vue'
+import { computed } from 'vue'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<DropdownMenuLabelProps & { class?: HTMLAttributes['class']; inset?: boolean }>()
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props
+
+    return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+    <DropdownMenuLabel
+        v-bind="forwardedProps"
+        :class="cn('px-8px pt-8px pb-2px text-sm font-semibold', inset && 'pl-8', props.class)"
+    >
+        <slot />
+    </DropdownMenuLabel>
+</template>

package/components/tela/dropdown-menu/DropdownMenuRadioGroup.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import {
+    DropdownMenuRadioGroup,
+    useForwardPropsEmits,
+} from 'radix-vue'
+import type { DropdownMenuRadioGroupEmits, DropdownMenuRadioGroupProps } from 'radix-vue'
+
+const props = defineProps<DropdownMenuRadioGroupProps>()
+const emits = defineEmits<DropdownMenuRadioGroupEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+    <DropdownMenuRadioGroup v-bind="forwarded">
+        <slot />
+    </DropdownMenuRadioGroup>
+</template>

package/components/tela/dropdown-menu/DropdownMenuRadioItem.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { Circle } from 'lucide-vue-next'
+import {
+    DropdownMenuItemIndicator,
+    DropdownMenuRadioItem,
+    useForwardPropsEmits,
+} from 'radix-vue'
+import type { DropdownMenuRadioItemEmits, DropdownMenuRadioItemProps } from 'radix-vue'
+import { computed } from 'vue'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<DropdownMenuRadioItemProps & { class?: HTMLAttributes['class'] }>()
+
+const emits = defineEmits<DropdownMenuRadioItemEmits>()
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props
+    return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits).value
+</script>
+
+<template>
+    <DropdownMenuRadioItem
+        v-bind="forwarded"
+        :class="cn(
+            'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
+            props.class,
+        )"
+    >
+        <span class="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+            <DropdownMenuItemIndicator>
+                <Circle class="h-2 w-2 fill-current" />
+            </DropdownMenuItemIndicator>
+        </span>
+        <slot />
+    </DropdownMenuRadioItem>
+</template>

package/components/tela/dropdown-menu/DropdownMenuRoot.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import { DropdownMenuRoot, useForwardPropsEmits } from 'radix-vue'
+import type { DropdownMenuRootEmits, DropdownMenuRootProps } from 'radix-vue'
+
+const props = defineProps<DropdownMenuRootProps>()
+const emits = defineEmits<DropdownMenuRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+    <DropdownMenuRoot v-bind="forwarded">
+        <slot />
+    </DropdownMenuRoot>
+</template>

package/components/tela/dropdown-menu/DropdownMenuSeparator.vue

@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { DropdownMenuSeparator } from 'radix-vue'
+import type { DropdownMenuSeparatorProps } from 'radix-vue'
+import { computed } from 'vue'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<DropdownMenuSeparatorProps & {
+    class?: HTMLAttributes['class']
+}>()
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props
+
+    return delegated
+})
+</script>
+
+<template>
+    <DropdownMenuSeparator v-bind="delegatedProps" :class="cn('-mx-1 my-1 h-px bg-muted', props.class)" />
+</template>

package/components/tela/dropdown-menu/DropdownMenuShortcut.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+    class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+    <span :class="cn('ml-auto text-xs tracking-widest opacity-60', props.class)">
+        <slot />
+    </span>
+</template>

package/components/tela/dropdown-menu/DropdownMenuSub.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import {
+    DropdownMenuSub,
+    useForwardPropsEmits,
+} from 'radix-vue'
+import type { DropdownMenuSubEmits, DropdownMenuSubProps } from 'radix-vue'
+
+const props = defineProps<DropdownMenuSubProps>()
+const emits = defineEmits<DropdownMenuSubEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+    <DropdownMenuSub v-bind="forwarded">
+        <slot />
+    </DropdownMenuSub>
+</template>

package/components/tela/dropdown-menu/DropdownMenuSubContent.vue

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import {
+    DropdownMenuSubContent,
+    useForwardPropsEmits,
+} from 'radix-vue'
+import type { DropdownMenuSubContentEmits, DropdownMenuSubContentProps } from 'radix-vue'
+import { computed } from 'vue'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<DropdownMenuSubContentProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<DropdownMenuSubContentEmits>()
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props
+
+    return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+    <DropdownMenuSubContent
+        v-bind="forwarded"
+        :class="cn('z-102 min-w-32 overflow-hidden rounded-md border-[1px] bg-popover p-1 text-popover-foreground shadow-lg 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)"
+    >
+        <slot />
+    </DropdownMenuSubContent>
+</template>

package/components/tela/dropdown-menu/DropdownMenuSubTrigger.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { ChevronRight } from 'lucide-vue-next'
+import {
+    DropdownMenuSubTrigger,
+
+    useForwardProps,
+} from 'radix-vue'
+import type { DropdownMenuSubTriggerProps } from 'radix-vue'
+import { computed } from 'vue'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<DropdownMenuSubTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props
+
+    return delegated
+})
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+    <DropdownMenuSubTrigger
+        v-bind="forwardedProps"
+        :class="cn(
+            'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
+            props.class,
+        )"
+    >
+        <slot />
+        <ChevronRight class="ml-auto h-4 w-4" />
+    </DropdownMenuSubTrigger>
+</template>

package/components/tela/dropdown-menu/DropdownMenuTrigger.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { DropdownMenuTrigger, useForwardProps } from 'radix-vue'
+import type { DropdownMenuTriggerProps } from 'radix-vue'
+
+const props = defineProps<DropdownMenuTriggerProps>()
+
+const forwardedProps = useForwardProps(props)
+</script>
+
+<template>
+    <DropdownMenuTrigger class="outline-none" v-bind="forwardedProps">
+        <slot />
+    </DropdownMenuTrigger>
+</template>