@meistrari/tela-build 1.0.0

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

@@ -0,0 +1,91 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import { ref, watch } from 'vue'
+
+import SelectMenu from './select-menu.vue'
+
+const meta: Meta<typeof SelectMenu> = {
+    title: 'Core/SelectMenu',
+    component: SelectMenu,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'A customizable select/dropdown menu component built on top of reka-ui. Provides a flexible dropdown interface with support for icons, descriptions, tooltips, and custom styling. Supports v-model binding and emits selection, focus, and blur events.',
+            },
+        },
+    },
+    argTypes: {
+        modelValue: {
+            control: 'text',
+            description: 'The currently selected value (v-model)',
+        },
+        options: {
+            control: false,
+            description: 'Array of options to display in the select menu. Each option should have at least `value` and `label` properties. Supports optional `icon`, `description`, `externalIconSrc`, and `tooltipContent` properties.',
+        },
+        triggerClass: {
+            control: 'text',
+            description: 'Custom CSS classes to apply to the trigger element',
+        },
+        contentClass: {
+            control: 'text',
+            description: 'Custom CSS classes to apply to the content/dropdown container',
+        },
+        groupClass: {
+            control: 'text',
+            description: 'Custom CSS classes to apply to the group container',
+        },
+        itemClass: {
+            control: 'text',
+            description: 'Custom CSS classes to apply to each menu item',
+        },
+        placeholder: {
+            control: 'text',
+            description: 'Placeholder text to display when no value is selected',
+        },
+        triggerIconSize: {
+            control: 'text',
+            description: 'Size of the trigger icon',
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Whether the select menu is disabled',
+        },
+        iconWithBackground: {
+            control: false,
+            description: 'Configuration for icons with background styling. Should include `size` ("xs" | "sm" | "md") and `backgroundClass` (CSS class string).',
+        },
+        enablePortal: {
+            control: 'boolean',
+            description: 'Whether to render the dropdown content in a portal (useful for z-index issues)',
+        },
+    },
+}
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+    args: {
+        options: [
+            { value: 'item-1', label: 'Item 1' },
+            { value: 'item-2', label: 'Item 2' },
+            { value: 'item-3', label: 'Item 3' },
+            { value: 'item-4', label: 'Item 4' },
+        ],
+        modelValue: 'item-1',
+        enablePortal: true,
+    },
+    render: args => ({
+        components: { SelectMenu },
+        setup() {
+            const modelValue = ref(args.modelValue)
+            watch(() => args.modelValue, (newValue) => {
+                modelValue.value = newValue
+            })
+            return { args, modelValue }
+        },
+        template: '<SelectMenu v-model="modelValue" :options="args.options" :enable-portal="args.enablePortal" />',
+    }),
+}

package/components/tela/select-menu/select-menu.vue

@@ -0,0 +1,165 @@
+<script setup lang="ts">
+import type { ComponentPublicInstance, HTMLAttributes } from 'vue'
+import type { AcceptableValue } from 'reka-ui'
+
+import SelectMenuRoot from './select-menu-root.vue'
+import SelectMenuTrigger from './select-menu-trigger.vue'
+import SelectMenuValue from './select-menu-value.vue'
+import SelectMenuContent from './select-menu-content.vue'
+import SelectMenuGroup from './select-menu-group.vue'
+import SelectMenuItem from './select-menu-item.vue'
+
+const props = defineProps<{
+    modelValue?: string
+    options: SelectMenuOptions
+    triggerClass?: HTMLAttributes['class']
+    contentClass?: HTMLAttributes['class']
+    groupClass?: HTMLAttributes['class']
+    itemClass?: HTMLAttributes['class']
+    placeholder?: string
+    triggerIconSize?: string
+    disabled?: boolean
+    iconWithBackground?: {
+        size: 'xs' | 'sm' | 'md'
+        backgroundClass: string
+    }
+    enablePortal?: boolean
+}>()
+
+const emit = defineEmits<{
+    'update:modelValue': [value: string]
+    'select': [value: string]
+    'blur': []
+    'focus': []
+}>()
+
+const isOpen = ref(false)
+const testId = ref('')
+const container = ref<HTMLElement>()
+const triggerElementRef = ref<HTMLElement | ComponentPublicInstance | null>(null)
+
+onMounted(() => {
+    if (container.value?.attributes && container.value?.attributes.getNamedItem('data-testid')) {
+        testId.value = container.value?.attributes.getNamedItem('data-testid')?.value as string
+
+        container.value?.removeAttribute('data-testid')
+
+        const triggerElement = (triggerElementRef.value as any)?.$el || triggerElementRef.value
+        if (triggerElement instanceof HTMLElement) {
+            triggerElement.setAttribute('data-testid', testId.value)
+        }
+    }
+})
+
+const currentOption = computed(() => {
+    if (!props.modelValue && props.placeholder) {
+        return { label: props.placeholder, value: '' }
+    }
+
+    return props.options.find(option => option.value === props.modelValue) ?? props.options[0]
+})
+
+function handleValueChange(value: AcceptableValue) {
+    if (value !== null) {
+        const stringValue = String(value)
+
+        emit('update:modelValue', stringValue)
+        emit('select', stringValue)
+    }
+}
+
+function handleEscKey(event: KeyboardEvent) {
+    if (event.key === 'Escape') {
+        isOpen.value = false
+
+        emit('blur')
+        event.stopPropagation()
+    }
+}
+
+function handleOpenChange(open: boolean) {
+    isOpen.value = open
+
+    if (open) {
+        emit('focus')
+    }
+    else {
+        emit('blur')
+    }
+}
+</script>
+
+<template>
+    <div
+        v-bind="$attrs"
+        ref="container"
+        @keydown.esc.stop="handleEscKey($event)"
+    >
+        <SelectMenuRoot :model-value="modelValue" :open="isOpen" :disabled="disabled" @update:model-value="handleValueChange" @update:open="handleOpenChange">
+            <slot
+                v-bind="{ currentOption }"
+                name="trigger"
+            >
+                <SelectMenuTrigger
+                    ref="triggerElementRef"
+                    :class="cn('w-[180px]', triggerClass)"
+                    :trigger-icon-size="triggerIconSize"
+                >
+                    <div v-if="currentOption" flex items-center w-full gap-8px>
+                        <div
+                            v-if="currentOption?.icon && !(currentOption.value === '')"
+                            rounded-4px flex items-center justify-center
+                        >
+                            <Icon v-if="typeof currentOption.icon === 'string'" :name="currentOption.icon" />
+                            <Component :is="currentOption.icon" v-else />
+                        </div>
+                        <div v-if="!currentOption?.icon && currentOption?.externalIconSrc" mr-4px rounded-4px w-16px h-20px flex items-center justify-center>
+                            <img :src="currentOption.externalIconSrc" alt="" w-16px h-16px>
+                        </div>
+                        <span
+                            text-left flex-auto
+                        >
+                            {{ currentOption?.label }}
+                        </span>
+                    </div>
+                    <SelectMenuValue v-else :placeholder="placeholder" />
+                </SelectMenuTrigger>
+            </slot>
+
+            <SelectMenuContent :class="cn(contentClass)" :enable-portal="enablePortal">
+                <SelectMenuGroup :class="cn(groupClass)">
+                    <SelectMenuItem v-for="option in options" :key="option.value" v-test="testId ? `${testId}:option:${option.value}` : undefined" :value="option.value" :class="cn(itemClass)" :trigger-icon-size="triggerIconSize">
+                        <TelaTooltip
+                            side="right"
+                            :disabled="!option.tooltipContent"
+                            :delay-duration="200"
+                        >
+                            <template #content>
+                                <component :is="option.tooltipContent" />
+                            </template>
+                            <div
+                                v-if="option.icon" mr-12px rounded-4px w-40px h-40px flex items-center justify-center
+                                b="0.5px gray-200"
+                                text="gray-900"
+                                bg-white flex-none
+                            >
+                                <TelaIcon v-if="iconWithBackground" :name="option.icon" :size="iconWithBackground?.size" :background-class="iconWithBackground?.backgroundClass" />
+                                <TelaIcon v-else-if="typeof option.icon === 'string'" size="sm" :name="option.icon" />
+                                <Component :is="option.icon" v-else class="!w-24px !h-24px" />
+                            </div>
+                            <div v-if="!option.icon && option?.externalIconSrc" mr-12px rounded-4px w-16px h-36px flex items-center justify-center>
+                                <img :src="option.externalIconSrc" alt="" w-18px h-18px>
+                            </div>
+                            <div flex="~ col" text-start>
+                                {{ option.label }}
+                                <span v-if="option.description" text="gray-700" body-12-regular text-start>
+                                    {{ option.description }}
+                                </span>
+                            </div>
+                        </TelaTooltip>
+                    </SelectMenuItem>
+                </SelectMenuGroup>
+            </SelectMenuContent>
+        </SelectMenuRoot>
+    </div>
+</template>

package/components/tela/selector/selector.vue

@@ -0,0 +1,47 @@
+<script setup lang="ts">
+defineProps<{
+    icon?: string
+    selected?: boolean
+    disabled?: boolean
+}>()
+
+const emit = defineEmits<{
+    click: []
+}>()
+
+const containerEl = ref<HTMLElement | null>(null)
+const hovered = useElementHover(containerEl)
+</script>
+
+<template>
+    <button
+        h-32px pl-10px h-34px py-8px flex="~ items-center" rounded-8px
+        b="0.5px transparent"
+        :class="[
+            disabled ? 'text-gray-400! cursor-not-allowed' : 'hover:bg-gray-100',
+        ]"
+        :text="selected ? 'gray-900' : 'gray-700'"
+        :cursor="disabled ? 'not-allowed' : 'pointer'"
+        @click="!disabled && emit('click')"
+    >
+        <div v-if="icon" flex>
+            <img v-if="icon.endsWith('.svg')" :src="icon" w-16px h-12px max-w="initial">
+            <TelaIcon v-else :name="icon" size="16px" :text="selected ? 'gray-950' : 'gray-600'" />
+        </div>
+        <span
+            body-14-medium
+            :class="[
+                icon && 'ml-10px',
+            ]"
+            truncate
+            text-ellipsis
+        >
+            <slot />
+        </span>
+        <div flex-auto />
+
+        <div class="pr-1">
+            <slot v-if="hovered" name="trailing" />
+        </div>
+    </button>
+</template>

package/components/tela/sheet/sheet-close.vue

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

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

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { X } from 'lucide-vue-next'
+import {
+    DialogClose,
+    DialogContent,
+
+    DialogOverlay,
+    DialogPortal,
+    useForwardPropsEmits,
+} from 'reka-ui'
+import type { DialogContentEmits, DialogContentProps } from 'reka-ui'
+import { computed } from 'vue'
+import type { HTMLAttributes } from 'vue'
+import { sheetVariants } from './variants'
+import type { SheetVariants } from './variants'
+
+interface SheetContentProps extends DialogContentProps {
+    class?: HTMLAttributes['class']
+    side?: SheetVariants['side']
+}
+
+defineOptions({
+    inheritAttrs: false,
+})
+
+const props = defineProps<SheetContentProps>()
+
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = computed(() => {
+    const { class: _, side, ...delegated } = props
+
+    return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+    <DialogPortal>
+        <DialogOverlay
+            class="fixed inset-0 z-999 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+        />
+        <DialogContent
+            :class="cn(sheetVariants({ side }), props.class)"
+            v-bind="{ ...forwarded, ...$attrs }"
+        >
+            <slot />
+
+            <DialogClose
+                class="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-gray-800"
+            >
+                <X class="w-4 h-4 text-muted-foreground" />
+            </DialogClose>
+        </DialogContent>
+    </DialogPortal>
+</template>

package/components/tela/sheet/sheet-description.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { DialogDescription } from 'reka-ui'
+import type { DialogDescriptionProps } from 'reka-ui'
+import { computed } from 'vue'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<DialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props
+
+    return delegated
+})
+</script>
+
+<template>
+    <DialogDescription
+        :class="cn('text-sm text-muted-foreground', props.class)"
+        v-bind="delegatedProps"
+    >
+        <slot />
+    </DialogDescription>
+</template>

package/components/tela/sheet/sheet-footer.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+    <div
+        :class="
+            cn(
+                'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
+                props.class,
+            )
+        "
+    >
+        <slot />
+    </div>
+</template>

package/components/tela/sheet/sheet-header.vue

@@ -0,0 +1,15 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<{ class?: HTMLAttributes['class'] }>()
+</script>
+
+<template>
+    <div
+        :class="
+            cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)
+        "
+    >
+        <slot />
+    </div>
+</template>

package/components/tela/sheet/sheet-root.vue

@@ -0,0 +1,18 @@
+<script setup lang="ts">
+import { DialogRoot, useForwardPropsEmits } from 'reka-ui'
+import type { DialogRootEmits, DialogRootProps } from 'reka-ui'
+
+const props = defineProps<DialogRootProps>()
+const emits = defineEmits<DialogRootEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+    <DialogRoot v-bind="forwarded">
+        <template #actions>
+            <slot name="actions" />
+        </template>
+        <slot />
+    </DialogRoot>
+</template>

package/components/tela/sheet/sheet-title.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { DialogTitle } from 'reka-ui'
+import type { DialogTitleProps } from 'reka-ui'
+import { computed } from 'vue'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<DialogTitleProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props
+
+    return delegated
+})
+</script>
+
+<template>
+    <DialogTitle
+        :class="cn('text-lg font-semibold text-foreground', props.class)"
+        v-bind="delegatedProps"
+    >
+        <slot />
+    </DialogTitle>
+</template>

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

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

package/components/tela/sheet/sheet.client.vue

@@ -0,0 +1,150 @@
+<script setup lang="ts">
+import { computed, useAttrs, watch } from 'vue'
+
+import {
+    DialogClose,
+    DialogContent,
+    DialogOverlay,
+    DialogPortal,
+    DialogRoot,
+    VisuallyHidden,
+    DialogTitle,
+    DialogDescription,
+} from 'radix-vue'
+
+defineOptions({
+    inheritAttrs: false,
+})
+
+const props = defineProps<{
+    title?: string,
+    modalWidth?: 'md' | 'lg'
+    compact?: boolean
+    fullscreen?: boolean
+    hideDividers?: boolean
+    overlayClass?: string
+    hideCloseButton?: boolean
+}>()
+
+const emit = defineEmits<{
+    close: []
+}>()
+
+const attrs = useAttrs()
+
+const forwardedAttrs = computed(() => {
+    const { onPointerDownOutside, ...rest } = attrs as Record<string, unknown>
+    return rest
+})
+
+const open = defineModel<boolean>()
+
+watch(open, (value) => {
+    if (!value)
+        emit('close')
+})
+
+function handlePointerDownOutside(event: any) {
+    const target = event?.detail?.originalEvent?.target ?? event?.target
+
+    if (target instanceof Element && target.closest('[data-sonner-toast]'))
+        event.preventDefault()
+
+    const listener = (attrs as Record<string, unknown>).onPointerDownOutside
+    if (Array.isArray(listener)) {
+        listener.forEach((handler) => {
+            if (typeof handler === 'function')
+                handler(event)
+        })
+    }
+    else if (typeof listener === 'function') {
+        listener(event)
+    }
+}
+</script>
+
+<template>
+    <DialogRoot v-model:open="open">
+        <DialogPortal>
+            <DialogOverlay class="DialogOverlay" :class="overlayClass" bg="gray-700/70" z-600>
+                <DialogContent
+                    z-101
+                    relative w-full flex="~ col"
+                    class="DialogContent !w-screen !rounded-t-40px p-0px!"
+                    :class="[
+                        fullscreen ? 'h-full w-100dvw' : 'h-98dvh !w-98dvw rounded-t-16px',
+                    ]"
+                    bg-white
+                    v-bind="forwardedAttrs"
+                    @pointer-down-outside="handlePointerDownOutside"
+                >
+                    <VisuallyHidden>
+                        <DialogTitle />
+                        <DialogDescription />
+                    </VisuallyHidden>
+                    <DialogClose v-if="!hideCloseButton" as-child>
+                        <TelaIconButton absolute right-32px top-32px icon="i-ph-x" size="md" color="secondary" text-18px outline-none rounded-full border="1 bordercolor/80" />
+                    </DialogClose>
+
+                    <slot />
+
+                    <div
+                        v-if="$slots.footer" mt-24px :b-t="!props.hideDividers && '0.5px gray-200'"
+                        py-24px flex px-32px
+                    >
+                        <slot name="footer" />
+                    </div>
+                </DialogContent>
+            </DialogOverlay>
+        </DialogPortal>
+    </DialogRoot>
+</template>
+
+<style lang="css" scoped>
+.DialogOverlay {
+  position: fixed;
+  inset: 0;
+  animation: overlayShow 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  backdrop-filter: blur(4px);
+}
+
+.DialogContent {
+  box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
+  position: fixed;
+  bottom: 0;
+  left: 50%;
+  transform: translate(-50%, 0%);
+  animation: contentShow 250ms cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.DialogContent:focus {
+  outline: none;
+}
+
+.DialogDescription {
+  margin: 10px 0 20px;
+  color: var(--mauve-11);
+  font-size: 15px;
+  line-height: 1.5;
+}
+
+@keyframes overlayShow {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+
+@keyframes contentShow {
+  from {
+    opacity: 0;
+    transform: translate(-50%, 10%) scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: translate(-50%, 0%) scale(1);
+  }
+}
+</style>