@meistrari/tela-build 1.0.0

package/components/tela/menubar/menubar-label.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import type { MenubarLabelProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { MenubarLabel } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<MenubarLabelProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
+</script>
+
+<template>
+    <MenubarLabel :class="cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)">
+        <slot />
+    </MenubarLabel>
+</template>

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

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

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

@@ -0,0 +1,30 @@
+<script setup lang="ts">
+import type { MenubarRootEmits, MenubarRootProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import {
+    MenubarRoot,
+    useForwardPropsEmits,
+} from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<MenubarRootProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<MenubarRootEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+    <MenubarRoot
+        v-bind="forwarded"
+        :class="
+            cn(
+                props.class,
+            )
+        "
+    >
+        <slot />
+    </MenubarRoot>
+</template>

package/components/tela/menubar/menubar-separator.vue

@@ -0,0 +1,17 @@
+<script setup lang="ts">
+import type { MenubarSeparatorProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { MenubarSeparator, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<MenubarSeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+    <MenubarSeparator :class=" cn('-mx-1 my-1 h-[0.5px] bg-gray-200', props.class)" v-bind="forwardedProps" />
+</template>

package/components/tela/menubar/menubar-shortcut.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 text-gray-600', props.class)">
+        <slot />
+    </span>
+</template>

package/components/tela/menubar/menubar-sub-content.vue

@@ -0,0 +1,36 @@
+<script setup lang="ts">
+import type { MenubarSubContentEmits, MenubarSubContentProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import {
+    MenubarPortal,
+    MenubarSubContent,
+
+    useForwardPropsEmits,
+} from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<MenubarSubContentProps & { class?: HTMLAttributes['class'] }>()
+
+const emits = defineEmits<MenubarSubContentEmits>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+    <MenubarPortal>
+        <MenubarSubContent
+            v-bind="forwarded"
+            :class="
+                cn(
+                    'z-50 min-w-32 overflow-hidden ml-1 rounded-md border-[1px] bg-popover p-1 text-popover-foreground 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 />
+        </MenubarSubContent>
+    </MenubarPortal>
+</template>

package/components/tela/menubar/menubar-sub-trigger.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+import type { MenubarSubTriggerProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { ChevronRight } from 'lucide-vue-next'
+import { MenubarSubTrigger, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<MenubarSubTriggerProps & { class?: HTMLAttributes['class'], inset?: boolean }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+    <MenubarSubTrigger
+        v-bind="forwardedProps"
+        :class="cn(
+            'flex cursor-pointer select-none items-center rounded-md px-2 py-1.5 text-sm outline-none focus:bg-gray-200 data-[state=open]:bg-gray-200',
+            inset && 'pl-8',
+            props.class,
+        )"
+    >
+        <slot />
+        <ChevronRight class="ml-auto h-4 w-4" />
+    </MenubarSubTrigger>
+</template>

package/components/tela/menubar/menubar-sub.vue

@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import type { MenubarSubEmits } from 'reka-ui'
+import { MenubarSub, useForwardPropsEmits } from 'reka-ui'
+
+interface MenubarSubRootProps {
+    defaultOpen?: boolean
+    open?: boolean
+}
+
+const props = defineProps<MenubarSubRootProps>()
+const emits = defineEmits<MenubarSubEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+    <MenubarSub v-bind="forwarded">
+        <slot />
+    </MenubarSub>
+</template>

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

@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import type { MenubarTriggerProps } from 'reka-ui'
+import type { HTMLAttributes } from 'vue'
+import { reactiveOmit } from '@vueuse/core'
+import { MenubarTrigger, useForwardProps } from 'reka-ui'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<MenubarTriggerProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = reactiveOmit(props, 'class')
+
+const forwardedProps = useForwardProps(delegatedProps)
+</script>
+
+<template>
+    <MenubarTrigger
+        v-bind="forwardedProps"
+        :class="
+            cn(
+                'flex items-center gap-2 cursor-pointer select-none px-2 py-1.5 text-sm font-medium outline-none rounded-lg hover:bg-gray-200 data-[state=open]:bg-gray-200',
+                props.class,
+            )
+        "
+    >
+        <slot />
+    </MenubarTrigger>
+</template>

package/components/tela/menubar/menubar.vue

@@ -0,0 +1,298 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+    modelValue?: string
+    readOnly?: boolean
+    size?: 'xs' | 'sm' | 'md'
+    allowSearch?: boolean
+    options: SelectMenuOptions
+    compact?: boolean
+    noBorder?: string
+    placeholder?: string
+    required?: boolean
+    iconWithBackground?: {
+        size: 'xs' | 'sm' | 'md'
+        backgroundClass: string
+    }
+    triggerClass?: string
+}>()
+
+const emit = defineEmits<{
+    'update:modelValue': [value: string]
+    'navigate': [to: string]
+    'select': [value: string]
+    'focus': []
+    'blur': []
+}>()
+
+const innerValue = ref<string>('')
+const container = ref<HTMLElement>()
+const triggerElementRef = ref<HTMLElement | null>(null)
+
+const isFocused = ref(false)
+const isOpen = ref(false)
+watch(isFocused, val => val ? emit('focus') : emit('blur'))
+
+function handleEscKey(e: KeyboardEvent) {
+    if (e.key === 'Escape') {
+        isFocused.value = false
+        isOpen.value = false
+
+        if (triggerElementRef.value) {
+            const button = triggerElementRef.value.querySelector('button')
+            if (button) {
+                button.blur()
+            }
+        }
+
+        e.stopPropagation()
+    }
+}
+
+onMounted(() => {
+    const button = triggerElementRef.value?.querySelector('button')
+    if (button) {
+        const handleFocus = () => {
+            isFocused.value = true
+        }
+        const handleBlur = () => {
+            isFocused.value = false
+        }
+        button.addEventListener('focus', handleFocus)
+        button.addEventListener('blur', handleBlur)
+
+        onBeforeUnmount(() => {
+            button.removeEventListener('focus', handleFocus)
+            button.removeEventListener('blur', handleBlur)
+        })
+    }
+})
+
+const testId = ref('')
+onMounted(() => {
+    if (container.value?.attributes && container.value?.attributes.getNamedItem('data-testid')) {
+        testId.value = container.value?.attributes.getNamedItem('data-testid')?.value as string
+
+        // Remove the data-testid attribute from the container element
+        container.value?.removeAttribute('data-testid')
+
+        // Add the data-testid attribute to the trigger element
+        triggerElementRef.value?.setAttribute('data-testid', testId.value)
+    }
+
+    window.addEventListener('keydown', handleEscKey)
+
+    const button = triggerElementRef.value?.querySelector('button')
+    if (button) {
+        const handleFocus = () => {
+            isFocused.value = true
+        }
+        const handleBlur = () => {
+            isFocused.value = false
+        }
+        button.addEventListener('focus', handleFocus)
+        button.addEventListener('blur', handleBlur)
+
+        button.addEventListener('keydown', handleEscKey)
+
+        onBeforeUnmount(() => {
+            window.removeEventListener('keydown', handleEscKey)
+            button.removeEventListener('focus', handleFocus)
+            button.removeEventListener('blur', handleBlur)
+            button.removeEventListener('keydown', handleEscKey)
+        })
+    }
+})
+
+const hasGroups = computed(() => props.options.some(option => option.group))
+const groupedOptions = computed(() => {
+    if (!hasGroups.value)
+        return { __default: props.options }
+
+    const groups: Record<string, typeof props.options> = {}
+    props.options.forEach((option) => {
+        const groupKey = option.group ? option.group : '__default'
+
+        if (!groups[groupKey])
+            groups[groupKey] = []
+
+        groups[groupKey].push(option)
+    })
+    return groups
+})
+
+const currentOption = computed(() => {
+    if (!innerValue.value && !props.modelValue && props.placeholder) {
+        return { label: props.placeholder, value: '' }
+    }
+    return props.options.find(option => option.value === innerValue.value || option.value === props.modelValue) ?? props.options[0]
+})
+
+const triggerClasses = computed(() => {
+    const isPlaceholderShown = props.placeholder && !innerValue.value && !props.modelValue
+
+    return cn(
+        // Base layout & appearance
+        'bg-white text-textcolor b-1 b-gray-200 p-8px w-full outline-none transition',
+        'focus:b-#08344D/70 focus:ring-2 focus:ring-#08344D/12 data-[placeholder]:text-textcolor/50',
+
+        // Size variants
+        props.compact ? 'rounded-28px px-16px py-6px' : 'rounded-8px',
+
+        // State modifiers
+        props.noBorder && 'b-0 pl-0 !py-0',
+        isPlaceholderShown && '!text-gray-600 !font-light',
+        props.triggerClass,
+    )
+})
+
+function handleItemSelect(option: any) {
+    if (props.readOnly)
+        return
+
+    innerValue.value = option.value
+    emit('select', option.value)
+    emit('update:modelValue', option.value)
+
+    if (option.to) {
+        navigateTo(option.to)
+    }
+}
+</script>
+
+<template>
+    <div ref="container">
+        <TelaMenubarRoot>
+            <TelaMenubarMenu>
+                <div
+                    ref="triggerElementRef"
+                    v-bind="$attrs"
+                    @keydown.esc.stop="handleEscKey($event)"
+                >
+                    <slot
+                        v-bind="{ currentOption }"
+                        name="trigger"
+                    >
+                        <TelaMenubarTrigger
+                            :class="triggerClasses"
+                            :disabled="readOnly"
+                            aria-label="Customise options"
+                        >
+                            <div flex items-center w-full gap-8px>
+                                <div
+                                    v-if="currentOption?.icon && !(currentOption.value === '')"
+                                    mr-12px rounded-4px w-40px h-40px flex items-center justify-center b="0.5px #E1E3E4"
+                                    text-24px
+                                    :class="[
+                                        compact && '!text-16px b-0 w-auto h-auto !mr-0px leading-0',
+                                    ]"
+                                >
+                                    <TelaIcon 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
+                                    :class="[
+                                        compact ? 'body-12-semibold' : 'body-14-medium',
+                                        (placeholder && !innerValue && !props.modelValue) ? 'text-gray-400 font-light' : '',
+                                    ]"
+                                    text-left flex-auto
+                                >
+                                    {{ currentOption?.label }}
+                                </span>
+                                <div
+                                    i-ph-caret-up-down op-60
+                                    :class="[
+                                        compact ? '!text-10px' : '!text-16px',
+                                    ]"
+                                />
+                            </div>
+                        </TelaMenubarTrigger>
+                    </slot>
+                </div>
+
+                <TelaMenubarContent
+                    :side-offset="4"
+                    :class="cn(
+                        'bg-white',
+                        triggerClass || 'rounded-8px',
+                        'flying-shadow',
+                        'b-0.5px b-gray-300',
+                        'overflow-hidden',
+                        'will-change-[opacity,transform] data-[side=top]:animate-slideDownAndFade data-[side=right]:animate-slideLeftAndFade data-[side=bottom]:animate-slideUpAndFade data-[side=left]:animate-slideRightAndFade',
+                    )"
+                    :style="{
+                        width: compact ? 'fit-content' : 'auto',
+                        minWidth: compact ? undefined : '328px',
+                    }"
+                    avoid-collisions
+                    max-h-400px
+                    z-999
+                >
+                    <div class="p-5px w-full max-h-400px overflow-y-auto">
+                        <template
+                            v-for="[group, groupOptions], idx of Object.entries(groupedOptions!)"
+                            :key="idx"
+                        >
+                            <div v-if="hasGroups && group !== '__default'" body-12-regular text="gray-700" mt-4px p="6px" pb-8px capitalize>
+                                {{ group }}
+                            </div>
+                            <TelaMenubarItem
+                                v-for="option in groupOptions"
+                                :key="option.value"
+                                :data-testid="testId ? `${testId}:option:${option.value}` : undefined"
+                                class="p-6px rounded-4px transition outline-none select-none flex w-full items-center hover:cursor-pointer text-gray-900 hover:bg-#F5F6F6 focus:bg-#F5F6F6"
+                                :class="[
+                                    option.value === (innerValue || modelValue) && 'bg-#F5F6F6',
+                                ]"
+                                @click="handleItemSelect(option)"
+                            >
+                                <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">
+                                        <p text="gray-900" body-14-medium text-start>
+                                            {{ option.label }}
+                                        </p>
+
+                                        <span v-if="option.description" text="gray-700" body-12-regular text-start>
+                                            {{ option.description }}
+                                        </span>
+                                    </div>
+                                    <div flex-auto />
+                                    <div v-if="option.value === (innerValue || modelValue)" flex items-center justify-center>
+                                        <div i-ph-check />
+                                    </div>
+                                </TelaTooltip>
+                            </TelaMenubarItem>
+                        </template>
+                    </div>
+                </TelaMenubarContent>
+            </TelaMenubarMenu>
+        </TelaMenubarRoot>
+    </div>
+</template>
+
+<style>
+</style>

package/components/tela/modal/modal.mdx

@@ -0,0 +1,145 @@
+import { Meta, ArgTypes } from '@storybook/blocks';
+
+<Meta title="Layout/Modal" />
+
+# TelaModal
+
+A modal dialog component that displays content in a centered overlay. Useful for important messages, confirmations, forms, and content that requires user attention.
+
+## Props
+
+<ArgTypes />
+
+```typescript
+type ModalProps = {
+  modelValue: boolean
+  title?: string
+  size?: 'sm' | 'md' | 'lg' | 'xl'
+  closeOnOverlay?: boolean
+  showClose?: boolean
+}
+```
+
+## Examples
+
+### Basic Usage
+
+```vue
+<script setup>
+import { ref } from 'vue'
+
+const isOpen = ref(false)
+</script>
+
+<template>
+  <TelaButton @click="isOpen = true">
+    Open Modal
+  </TelaButton>
+
+  <TelaModal v-model="isOpen" title="Modal Title">
+    <p>Modal content goes here</p>
+  </TelaModal>
+</template>
+```
+
+### With Actions
+
+```vue
+<TelaModal v-model="isOpen" title="Confirm Action">
+  <p>Are you sure you want to proceed?</p>
+  
+  <template #footer>
+    <div class="flex gap-2 justify-end">
+      <TelaButton variant="secondary" @click="isOpen = false">
+        Cancel
+      </TelaButton>
+      <TelaButton variant="primary" @click="confirm">
+        Confirm
+      </TelaButton>
+    </div>
+  </template>
+</TelaModal>
+```
+
+### Different Sizes
+
+```vue
+<!-- Small -->
+<TelaModal v-model="isOpen" size="sm" title="Small Modal">
+  <p>Compact modal</p>
+</TelaModal>
+
+<!-- Medium (default) -->
+<TelaModal v-model="isOpen" size="md" title="Medium Modal">
+  <p>Standard modal</p>
+</TelaModal>
+
+<!-- Large -->
+<TelaModal v-model="isOpen" size="lg" title="Large Modal">
+  <p>Spacious modal</p>
+</TelaModal>
+
+<!-- Extra Large -->
+<TelaModal v-model="isOpen" size="xl" title="Extra Large Modal">
+  <p>Very large modal</p>
+</TelaModal>
+```
+
+### Without Close Button
+
+```vue
+<TelaModal
+  v-model="isOpen"
+  title="No Close Button"
+  :show-close="false"
+>
+  <p>Modal without close button</p>
+</TelaModal>
+```
+
+### Prevent Close on Overlay
+
+```vue
+<TelaModal
+  v-model="isOpen"
+  title="Must Use Button"
+  :close-on-overlay="false"
+>
+  <p>Can only be closed with a button</p>
+  <template #footer>
+    <TelaButton @click="isOpen = false">Close</TelaButton>
+  </template>
+</TelaModal>
+```
+
+## Slots
+
+- `default` - Main content area
+- `header` - Custom header content (replaces title)
+- `footer` - Footer area for actions/buttons
+
+## Events
+
+- `update:modelValue` - Emitted when modal opens/closes with boolean value
+- `close` - Emitted when modal is closed
+
+## Features
+
+- **Centered Layout**: Modal centered in viewport
+- **Overlay**: Semi-transparent backdrop
+- **Multiple Sizes**: Small, medium, large, and extra-large
+- **Close Options**: Close button, overlay click, Escape key
+- **Custom Header/Footer**: Slots for flexible layouts
+- **Scrollable Content**: Long content scrolls within modal
+- **Focus Trap**: Keeps focus within modal
+- **Accessible**: Proper ARIA attributes and keyboard navigation
+
+## Accessibility
+
+- Focus trapped within modal when open
+- Escape key to close (unless disabled)
+- Proper ARIA attributes (role="dialog", aria-modal)
+- Focus returns to trigger element on close
+- Close button with accessible label
+- Screen reader announcements
+