@meistrari/tela-build 1.0.0

package/components/tela/tooltip-group/tooltip-group.stories.ts

@@ -0,0 +1,465 @@
+import type { Meta, StoryObj } from '@storybook-vue/vue3'
+
+import TelaTooltipGroup from './tooltip-group.vue'
+import TelaTooltipGroupTrigger from './tooltip-group-trigger.vue'
+import TelaIconButton from '../icon-button/icon-button.vue'
+
+const meta: Meta<typeof TelaTooltipGroup> = {
+    title: 'Core/TooltipGroup',
+    component: TelaTooltipGroup,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'A tooltip group component that manages tooltips for multiple child elements. Provides coordinated tooltip behavior for groups of interactive elements like button groups or toolbar items. Each child element wrapped in TooltipGroupTrigger will show its tooltip when hovered.',
+            },
+        },
+    },
+    argTypes: {
+        delayDuration: {
+            control: 'number',
+            description: 'Delay in milliseconds before showing tooltips after hover. Applies to all tooltips in the group.',
+        },
+        disabled: {
+            control: 'boolean',
+            description: 'Disable all tooltips in the group, preventing them from showing.',
+        },
+        skipDelayDuration: {
+            control: 'number',
+            description: 'Duration in milliseconds to skip the delay when moving between tooltips in the group. Allows quick tooltip transitions when moving between adjacent elements.',
+        },
+    },
+}
+
+export default meta
+
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+    render: args => ({
+        components: { TelaTooltipGroup, TelaTooltipGroupTrigger, TelaIconButton },
+        setup() {
+            return { args }
+        },
+        template: `
+            <div class="flex items-center rounded-8px border-0.5px w-fit border-gray-300 bg-white p-0.5 gap-2px">
+                <TelaTooltipGroup v-bind="args">
+                    <div class="flex items-center gap-2px">
+                        <TelaTooltipGroupTrigger content="Bold">
+                            <TelaIconButton
+                                key="bold-button"
+                                color="secondary"
+                                size="sm"
+                                button-class="rounded-6px! !p-0.35em"
+                                icon="i-ph-text-b"
+                            />
+                        </TelaTooltipGroupTrigger>
+                        <TelaTooltipGroupTrigger content="Italic">
+                            <TelaIconButton
+                                key="italic-button"
+                                color="secondary"
+                                size="sm"
+                                rounded-6px
+                                button-class="rounded-6px! !p-0.35em"
+                                icon="i-ph-text-italic"
+                            />
+                        </TelaTooltipGroupTrigger>
+                        <TelaTooltipGroupTrigger content="Heading 1">
+                            <TelaIconButton
+                                key="heading-button"
+                                color="secondary"
+                                size="sm"
+                                rounded-6px
+                                icon="i-ph-text-h-one"
+                                button-class="rounded-6px! !p-0.35em"
+                            />
+                        </TelaTooltipGroupTrigger>
+                        <TelaTooltipGroupTrigger content="Heading 2">
+                            <TelaIconButton
+                                key="heading-2-button"
+                                color="secondary"
+                                size="sm"
+                                rounded-6px
+                                icon="i-ph-text-h-two"
+                                button-class="rounded-6px! !p-0.35em"
+                            />
+                        </TelaTooltipGroupTrigger>
+                        <TelaTooltipGroupTrigger content="Heading 3">
+                            <TelaIconButton
+                                key="heading-3-button"
+                                color="secondary"
+                                size="sm"
+                                rounded-6px
+                                icon="i-ph-text-h-three"
+                                button-class="rounded-6px! !p-0.35em"
+                            />
+                        </TelaTooltipGroupTrigger>
+                        <TelaTooltipGroupTrigger content="Bullet List">
+                            <TelaIconButton
+                                key="bullet-list-button"
+                                color="secondary"
+                                size="sm"
+                                rounded-6px
+                                icon="i-ph-list-bullets"
+                                button-class="rounded-6px! !p-0.35em"
+                            />
+                        </TelaTooltipGroupTrigger>
+                        <TelaTooltipGroupTrigger content="Ordered List">
+                            <TelaIconButton
+                                key="ordered-list-button"
+                                color="secondary"
+                                size="sm"
+                                rounded-6px
+                                icon="i-ph-list-numbers"
+                                button-class="rounded-6px! !p-0.35em"
+                            />
+                        </TelaTooltipGroupTrigger>
+
+                        <!-- Indent buttons -->
+                        <TelaTooltipGroupTrigger content="Indent">
+                            <TelaIconButton
+                                key="indent-button"
+                                color="secondary"
+                                size="sm"
+                                rounded-6px
+                                icon-class="text-gray-900"
+                                icon="i-ph-text-indent"
+                                button-class="rounded-6px! !p-0.35em"
+                            />
+                        </TelaTooltipGroupTrigger>
+                        <TelaTooltipGroupTrigger content="Outdent">
+                            <TelaIconButton
+                                key="outdent-button"
+                                color="secondary"
+                                size="sm"
+                                rounded-6px
+                                icon-class="text-gray-900"
+                                icon="i-ph-text-outdent"
+                                button-class="rounded-6px! !p-0.35em"
+                            />
+                        </TelaTooltipGroupTrigger>
+                    </div>
+                </TelaTooltipGroup>
+            </div>`,
+    }),
+}
+
+export const Simple: Story = {
+    render: args => ({
+        components: { TelaTooltipGroup, TelaTooltipGroupTrigger, TelaIconButton },
+        setup() {
+            return { args }
+        },
+        template: `
+            <div class="flex items-center rounded-8px border-0.5px w-fit border-gray-300 bg-white p-0.5 gap-2px">
+                <TelaTooltipGroup v-bind="args">
+                    <div class="flex items-center gap-2px">
+                        <TelaTooltipGroupTrigger content="Cut">
+                            <TelaIconButton
+                                color="secondary"
+                                size="sm"
+                                button-class="rounded-6px! !p-0.35em"
+                                icon="i-ph-scissors"
+                            />
+                        </TelaTooltipGroupTrigger>
+                        <TelaTooltipGroupTrigger content="Copy">
+                            <TelaIconButton
+                                color="secondary"
+                                size="sm"
+                                button-class="rounded-6px! !p-0.35em"
+                                icon="i-ph-copy"
+                            />
+                        </TelaTooltipGroupTrigger>
+                        <TelaTooltipGroupTrigger content="Paste">
+                            <TelaIconButton
+                                color="secondary"
+                                size="sm"
+                                button-class="rounded-6px! !p-0.35em"
+                                icon="i-ph-clipboard"
+                            />
+                        </TelaTooltipGroupTrigger>
+                    </div>
+                </TelaTooltipGroup>
+            </div>`,
+    }),
+}
+
+export const WithDelay: Story = {
+    args: {
+        delayDuration: 500,
+    },
+    render: args => ({
+        components: { TelaTooltipGroup, TelaTooltipGroupTrigger, TelaIconButton },
+        setup() {
+            return { args }
+        },
+        template: `
+            <div class="flex items-center rounded-8px border-0.5px w-fit border-gray-300 bg-white p-0.5 gap-2px">
+                <TelaTooltipGroup v-bind="args">
+                    <div class="flex items-center gap-2px">
+                        <TelaTooltipGroupTrigger content="Save (500ms delay)">
+                            <TelaIconButton
+                                color="secondary"
+                                size="sm"
+                                button-class="rounded-6px! !p-0.35em"
+                                icon="i-ph-floppy-disk"
+                            />
+                        </TelaTooltipGroupTrigger>
+                        <TelaTooltipGroupTrigger content="Undo (500ms delay)">
+                            <TelaIconButton
+                                color="secondary"
+                                size="sm"
+                                button-class="rounded-6px! !p-0.35em"
+                                icon="i-ph-arrow-counter-clockwise"
+                            />
+                        </TelaTooltipGroupTrigger>
+                        <TelaTooltipGroupTrigger content="Redo (500ms delay)">
+                            <TelaIconButton
+                                color="secondary"
+                                size="sm"
+                                button-class="rounded-6px! !p-0.35em"
+                                icon="i-ph-arrow-clockwise"
+                            />
+                        </TelaTooltipGroupTrigger>
+                    </div>
+                </TelaTooltipGroup>
+            </div>`,
+    }),
+}
+
+export const WithSkipDelay: Story = {
+    args: {
+        delayDuration: 500,
+        skipDelayDuration: 300,
+    },
+    render: args => ({
+        components: { TelaTooltipGroup, TelaTooltipGroupTrigger, TelaIconButton },
+        setup() {
+            return { args }
+        },
+        template: `
+            <div class="flex items-center rounded-8px border-0.5px w-fit border-gray-300 bg-white p-0.5 gap-2px">
+                <TelaTooltipGroup v-bind="args">
+                    <div class="flex items-center gap-2px">
+                        <TelaTooltipGroupTrigger content="Quick transition (skip delay)">
+                            <TelaIconButton
+                                color="secondary"
+                                size="sm"
+                                button-class="rounded-6px! !p-0.35em"
+                                icon="i-ph-play"
+                            />
+                        </TelaTooltipGroupTrigger>
+                        <TelaTooltipGroupTrigger content="Hover quickly between buttons">
+                            <TelaIconButton
+                                color="secondary"
+                                size="sm"
+                                button-class="rounded-6px! !p-0.35em"
+                                icon="i-ph-pause"
+                            />
+                        </TelaTooltipGroupTrigger>
+                        <TelaTooltipGroupTrigger content="To see skip delay">
+                            <TelaIconButton
+                                color="secondary"
+                                size="sm"
+                                button-class="rounded-6px! !p-0.35em"
+                                icon="i-ph-stop"
+                            />
+                        </TelaTooltipGroupTrigger>
+                    </div>
+                </TelaTooltipGroup>
+            </div>`,
+    }),
+}
+
+export const MultilineTooltips: Story = {
+    render: args => ({
+        components: { TelaTooltipGroup, TelaTooltipGroupTrigger, TelaIconButton },
+        setup() {
+            return { args }
+        },
+        template: `
+            <div class="flex items-center rounded-8px border-0.5px w-fit border-gray-300 bg-white p-0.5 gap-2px">
+                <TelaTooltipGroup v-bind="args">
+                    <div class="flex items-center gap-2px">
+                        <TelaTooltipGroupTrigger
+                            variant="multiline"
+                            title="Export Document"
+                            description="Save your document in PDF format"
+                        >
+                            <TelaIconButton
+                                color="secondary"
+                                size="sm"
+                                button-class="rounded-6px! !p-0.35em"
+                                icon="i-ph-file-pdf"
+                            />
+                        </TelaTooltipGroupTrigger>
+                        <TelaTooltipGroupTrigger
+                            variant="multiline"
+                            title="Share Document"
+                            description="Collaborate with your team members"
+                        >
+                            <TelaIconButton
+                                color="secondary"
+                                size="sm"
+                                button-class="rounded-6px! !p-0.35em"
+                                icon="i-ph-share-network"
+                            />
+                        </TelaTooltipGroupTrigger>
+                        <TelaTooltipGroupTrigger
+                            variant="multiline"
+                            title="Print Document"
+                            description="Print or save as PDF for printing"
+                        >
+                            <TelaIconButton
+                                color="secondary"
+                                size="sm"
+                                button-class="rounded-6px! !p-0.35em"
+                                icon="i-ph-printer"
+                            />
+                        </TelaTooltipGroupTrigger>
+                    </div>
+                </TelaTooltipGroup>
+            </div>`,
+    }),
+}
+
+export const WithPositioning: Story = {
+    render: args => ({
+        components: { TelaTooltipGroup, TelaTooltipGroupTrigger, TelaIconButton },
+        setup() {
+            return { args }
+        },
+        template: `
+            <div class="flex items-center rounded-8px border-0.5px w-fit border-gray-300 bg-white p-0.5 gap-2px">
+                <TelaTooltipGroup v-bind="args">
+                    <div class="flex items-center gap-2px">
+                        <TelaTooltipGroupTrigger content="Top" side="top">
+                            <TelaIconButton
+                                color="secondary"
+                                size="sm"
+                                button-class="rounded-6px! !p-0.35em"
+                                icon="i-ph-arrow-up"
+                            />
+                        </TelaTooltipGroupTrigger>
+                        <TelaTooltipGroupTrigger content="Right" side="right">
+                            <TelaIconButton
+                                color="secondary"
+                                size="sm"
+                                button-class="rounded-6px! !p-0.35em"
+                                icon="i-ph-arrow-right"
+                            />
+                        </TelaTooltipGroupTrigger>
+                        <TelaTooltipGroupTrigger content="Bottom" side="bottom">
+                            <TelaIconButton
+                                color="secondary"
+                                size="sm"
+                                button-class="rounded-6px! !p-0.35em"
+                                icon="i-ph-arrow-down"
+                            />
+                        </TelaTooltipGroupTrigger>
+                        <TelaTooltipGroupTrigger content="Left" side="left">
+                            <TelaIconButton
+                                color="secondary"
+                                size="sm"
+                                button-class="rounded-6px! !p-0.35em"
+                                icon="i-ph-arrow-left"
+                            />
+                        </TelaTooltipGroupTrigger>
+                    </div>
+                </TelaTooltipGroup>
+            </div>`,
+    }),
+}
+
+export const Disabled: Story = {
+    args: {
+        disabled: true,
+    },
+    render: args => ({
+        components: { TelaTooltipGroup, TelaTooltipGroupTrigger, TelaIconButton },
+        setup() {
+            return { args }
+        },
+        template: `
+            <div class="flex items-center rounded-8px border-0.5px w-fit border-gray-300 bg-white p-0.5 gap-2px">
+                <TelaTooltipGroup v-bind="args">
+                    <div class="flex items-center gap-2px">
+                        <TelaTooltipGroupTrigger content="This tooltip is disabled">
+                            <TelaIconButton
+                                color="secondary"
+                                size="sm"
+                                button-class="rounded-6px! !p-0.35em"
+                                icon="i-ph-info"
+                            />
+                        </TelaTooltipGroupTrigger>
+                        <TelaTooltipGroupTrigger content="This tooltip won't show">
+                            <TelaIconButton
+                                color="secondary"
+                                size="sm"
+                                button-class="rounded-6px! !p-0.35em"
+                                icon="i-ph-warning"
+                            />
+                        </TelaTooltipGroupTrigger>
+                    </div>
+                </TelaTooltipGroup>
+            </div>`,
+    }),
+}
+
+export const WithCustomContent: Story = {
+    render: args => ({
+        components: { TelaTooltipGroup, TelaTooltipGroupTrigger, TelaIconButton },
+        setup() {
+            return { args }
+        },
+        template: `
+            <div class="flex items-center rounded-8px border-0.5px w-fit border-gray-300 bg-white p-0.5 gap-2px">
+                <TelaTooltipGroup v-bind="args">
+                    <div class="flex items-center gap-2px">
+                        <TelaTooltipGroupTrigger>
+                            <TelaIconButton
+                                color="secondary"
+                                size="sm"
+                                button-class="rounded-6px! !p-0.35em"
+                                icon="i-ph-star"
+                            />
+                            <template #content>
+                                <div class="flex items-center gap-1">
+                                    <span>⭐</span>
+                                    <span>Custom Star Tooltip</span>
+                                </div>
+                            </template>
+                        </TelaTooltipGroupTrigger>
+                        <TelaTooltipGroupTrigger>
+                            <TelaIconButton
+                                color="secondary"
+                                size="sm"
+                                button-class="rounded-6px! !p-0.35em"
+                                icon="i-ph-heart"
+                            />
+                            <template #content>
+                                <div class="flex items-center gap-1">
+                                    <span>❤️</span>
+                                    <span>Custom Heart Tooltip</span>
+                                </div>
+                            </template>
+                        </TelaTooltipGroupTrigger>
+                        <TelaTooltipGroupTrigger>
+                            <TelaIconButton
+                                color="secondary"
+                                size="sm"
+                                button-class="rounded-6px! !p-0.35em"
+                                icon="i-ph-lightning"
+                            />
+                            <template #content>
+                                <div class="flex items-center gap-1">
+                                    <span>⚡</span>
+                                    <span>Custom Lightning Tooltip</span>
+                                </div>
+                            </template>
+                        </TelaTooltipGroupTrigger>
+                    </div>
+                </TelaTooltipGroup>
+            </div>`,
+    }),
+}

package/components/tela/tooltip-group/tooltip-group.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import TelaTooltipProvider from '../tooltip/tooltip-provider.vue'
+
+export type TooltipProps = {
+    content?: string
+    align?: 'start' | 'center' | 'end'
+    side?: 'top' | 'right' | 'bottom' | 'left'
+    contentClass?: string
+    disabled?: boolean
+    delayDuration?: number
+    open?: boolean
+    alignOffset?: number
+    arrowOffset?: number
+    variant?: 'single' | 'multiline'
+    title?: string
+    description?: string
+    skipDelayDuration?: number
+}
+
+withDefaults(defineProps<TooltipProps>(), {
+    open: undefined,
+    variant: 'single',
+    skipDelayDuration: undefined,
+})
+
+defineEmits<{
+    (e: 'clickContent', event: Event): void
+}>()
+</script>
+
+<template>
+    <TelaTooltipProvider :disabled="disabled" :delay-duration="delayDuration" :skip-delay-duration="skipDelayDuration">
+        <slot />
+    </TelaTooltipProvider>
+</template>

package/components/tela/transparent-input.vue

@@ -0,0 +1,151 @@
+<script setup lang="ts">
+const props = defineProps<{
+    modelValue: string
+    placeholder: string
+    allowEmpty?: boolean
+    disabled?: boolean
+    displayIcon?: boolean
+    validateOnBlur?: boolean
+    defaultValue?: string
+    error?: string | false | null
+    disableDefaultStyling?: boolean
+    containerClass?: string
+    inputClass?: string
+    editIconSize?: 'xs' | 'sm'
+    editIconClass?: string
+}>()
+
+const emit = defineEmits(['update:modelValue', 'blur', 'focus'])
+
+const inputRef = ref<HTMLInputElement | null>(null)
+const containerRef = ref<HTMLElement | null>(null)
+const initialValue = ref(props.modelValue)
+
+const isEditing = ref(!props.displayIcon)
+
+function onFocus() {
+    if (props.modelValue === props.defaultValue) {
+        emit('update:modelValue', '')
+        nextTick(() => {
+            inputRef.value?.focus()
+        })
+    }
+    else {
+        inputRef.value?.focus()
+    }
+    emit('focus')
+}
+
+function onInput(event: Event) {
+    const target = event.target as HTMLInputElement
+    const value = target.value ? target.value : (props.allowEmpty ? '' : initialValue.value)
+    emit('update:modelValue', value)
+    target.value = value
+
+    if (props.displayIcon && isEditing.value) {
+        isEditing.value = false
+        return
+    }
+
+    if (!target.value && !props.allowEmpty)
+        target.value = initialValue.value
+
+    target.blur()
+    isEditing.value = false
+}
+
+function onStartEditing() {
+    isEditing.value = true
+    nextTick(() => {
+        onFocus()
+    })
+}
+
+function onBlur(event: Event) {
+    if (props.validateOnBlur) {
+        onInput(event)
+    }
+    else {
+        isEditing.value = false
+    }
+    // Emit the blur event to parent
+    emit('blur', event)
+}
+
+function handleClickOutside(event: Event) {
+    if (containerRef.value && !containerRef.value.contains(event.target as Node)) {
+        if (isEditing.value) {
+            const blurEvent = new FocusEvent('blur', { bubbles: true })
+            onBlur(blurEvent)
+        }
+    }
+}
+
+onMounted(() => {
+    document.addEventListener('mousedown', handleClickOutside)
+})
+
+onUnmounted(() => {
+    document.removeEventListener('mousedown', handleClickOutside)
+})
+</script>
+
+<template>
+    <div
+        ref="containerRef"
+        flex relative
+        :class="cn('group', containerClass, { 'font-580 text-18px': !disableDefaultStyling })"
+        outline-none
+        text="textcolor"
+        items-center
+        cursor-text
+        @click="onStartEditing"
+    >
+        <input
+            ref="inputRef"
+            :key="modelValue"
+            v-autowidth="{
+                maxWidth: '420px',
+            }"
+            p-0
+            transition
+            :value="modelValue"
+            :placeholder="placeholder"
+            :disabled="disabled || (displayIcon && !isEditing)"
+            truncate
+            bg-transparent
+            :class="[
+                { 'font-580 text-18px': !disableDefaultStyling },
+                disabled ? 'opacity-50 cursor-not-allowed' : '',
+                inputClass,
+            ]"
+            @keyup.enter="onInput"
+            @keyup.escape="onInput"
+            @blur="onBlur"
+            @change="onInput"
+        >
+        <div v-if="displayIcon" :class="editIconClass">
+            <TelaIconButton
+                v-if="!isEditing"
+                :size="editIconSize || 'xs'"
+                icon="i-ph-pencil-simple"
+                color="secondary"
+                icon-class="text-gray-400"
+                @click="onStartEditing"
+            />
+        </div>
+        <div
+            v-if="isEditing"
+            absolute
+            class="bg-gray-300"
+            op-0
+            left-0 right-0 bottom--2px h-1px
+            group-focus-within:op-100
+            transition
+        />
+        <div v-if="error" top-2.5rem absolute font-medium text-red-900 text-8px bottom--12px flex items-center gap-3px whitespace-nowrap>
+            <div i-ph-info />
+            <span>{{ error }}</span>
+        </div>
+    </div>
+</template>

package/components/tela/variable-icon.vue

@@ -0,0 +1,28 @@
+<script setup lang="ts">
+withDefaults(defineProps<{
+    iconBg?: string
+    iconFill?: string
+}>(), {
+    iconBg: '#FF9E45',
+    iconFill: 'white',
+})
+</script>
+
+<template>
+    <div>
+        <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <rect
+                width="16" height="16" rx="5"
+                :fill="iconBg"
+            />
+            <path
+                d="M4.00626 8.07671C4.88845 8.16986 5.35421 8.61918 5.35421 9.4137V10.6521C5.35421 11.463 5.63366 11.6055 6.35695 11.6055H7.00078V12.8H6.21996C4.71859 12.8 4.05558 12.1808 4.05558 10.8V9.80822C4.05558 8.97534 3.72133 8.67945 2.80078 8.67397V7.32603C3.72133 7.32055 4.05558 7.01918 4.05558 6.1863V5.18356C4.05558 3.8137 4.71859 3.2 6.21996 3.2L7.00078 3.2V4.4H6.35695C5.63366 4.4 5.35421 4.53699 5.35421 5.34795V6.5863C5.35421 7.37534 4.88845 7.82466 4.00626 7.91781V8.07671Z"
+                :fill="iconFill"
+            />
+            <path
+                d="M12.0007 7.92329C11.113 7.83014 10.6472 7.38082 10.6472 6.5863V5.34795C10.6472 4.53699 10.3678 4.4 9.64997 4.4H9.00066V3.2H9.78148C11.2883 3.2 11.9459 3.81918 11.9459 5.2V6.19178C11.9459 7.02466 12.2801 7.32055 13.2007 7.32603V8.67397C12.2856 8.67945 11.9459 8.97534 11.9459 9.8137V10.811C11.9459 12.1863 11.2883 12.8 9.78148 12.8H9.00066V11.6H9.64997C10.3733 11.6 10.6472 11.463 10.6472 10.6521V9.4137C10.6472 8.62466 11.113 8.17534 12.0007 8.08219V7.92329Z"
+                :fill="iconFill"
+            />
+        </svg>
+    </div>
+</template>