@meistrari/tela-build 1.0.0

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

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import TagsSelect from './tags-select.vue'
+
+const meta: Meta<typeof TagsSelect> = {
+    title: 'Core/TagsSelect',
+    component: TagsSelect,
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'A button variant of tags that displays multiple overlapping colored dots (up to 3) with optional icons. Used for actions like adding tags or showing tag groups. The dots are displayed with a mask effect to create an overlapping appearance. Each dot can have a custom color, icon, and icon color. The component opens a popover with a full tag management interface that allows users to create new tags, edit existing tags, and select/deselect tags. Supports 16 different color options and maintains a list of all created tags.',
+            },
+        },
+    },
+    argTypes: {
+        class: {
+            control: 'text',
+            description: 'Custom CSS classes for the button container.',
+        },
+        labelClass: {
+            control: 'text',
+            description: 'Custom CSS classes for the label text.',
+        },
+        modelValue: {
+            control: 'object',
+            description: 'Array of selected tags. Each tag must have a `color` (one of 16 predefined colors) and a `name` (string). The `isSelected` property is computed internally and should not be included when passing tags via v-model. This prop supports v-model binding.',
+        },
+        options: {
+            control: 'object',
+            description: 'Array of available tag options to display in the popover. These tags will be merged with the selected tags to form the complete list of available tags. Each tag must have a `color` and `name` property. The `isSelected` property is computed internally based on `modelValue` and should not be included when passing tags.',
+        },
+    },
+}
+
+export default meta
+
+type Story = StoryObj<typeof TagsSelect>
+
+export const Default: Story = {
+    render: () => ({
+        components: { TagsSelect },
+        setup() {
+            return {}
+        },
+        template: `<TagsSelect>Add tag</TagsSelect>`,
+    }),
+}

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

@@ -0,0 +1,637 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { PopoverRoot, PopoverTrigger, PopoverPortal, PopoverContent } from 'reka-ui'
+
+const props = withDefaults(defineProps<{
+    class?: HTMLAttributes['class']
+    labelClass?: HTMLAttributes['class']
+    modelValue?: Tag[]
+    options: Tag[]
+    createTagLabel?: string
+    selectedLabel?: string
+    newTagLabel?: string
+    editTagLabel?: string
+    defineNamePlaceholder?: string
+    addNewNamePlaceholder?: string
+    createButtonLabel?: string
+    saveChangesButtonLabel?: string
+}>(), {
+    modelValue: () => [],
+    createTagLabel: 'Create tag',
+    selectedLabel: 'selected',
+    newTagLabel: 'New tag',
+    editTagLabel: 'Edit tag',
+    defineNamePlaceholder: 'Define a name',
+    addNewNamePlaceholder: 'Add new name',
+    createButtonLabel: 'Create',
+    saveChangesButtonLabel: 'Save changes',
+})
+
+const emit = defineEmits<{
+    'update:modelValue': [tags: Tag[]]
+}>()
+
+const ALL_COLORS = ['orange', 'amber', 'yellow', 'lime', 'green', 'emerald', 'teal', 'cyan', 'sky', 'blue', 'indigo', 'purple', 'pink', 'rose', 'red', 'neutral'] as const
+
+type Color = typeof ALL_COLORS[number]
+type ContentType = 'new-tag' | 'existing-tag' | 'edit-tag' | null
+
+interface Tag {
+    id: string;
+    color: Color
+    name: string
+    isSelected?: boolean
+}
+
+interface Dot {
+    color: Color
+    lightColor?: boolean
+    class?: HTMLAttributes['class']
+    icon?: string
+    iconColor?: string
+}
+
+const EMPTY_DOTS: Dot[] = [
+    { color: 'neutral', lightColor: true },
+    { color: 'neutral', lightColor: true },
+    { color: 'neutral', icon: 'i-ph-plus-bold' },
+]
+
+function getTagKey(tag: Tag): string {
+    return tag.id
+}
+
+function getTagKeys(tags: Tag[]): Set<string> {
+    return new Set(tags.map(getTagKey))
+}
+
+function mergeTagsUnique(...tagArrays: (Tag[] | undefined)[]): Tag[] {
+    const seen = new Set<string>()
+    const result: Tag[] = []
+
+    for (const tags of tagArrays) {
+        if (!tags?.length) {
+            continue
+        }
+
+        for (const tag of tags) {
+            const key = getTagKey(tag)
+
+            if (!seen.has(key)) {
+                seen.add(key)
+                result.push(tag)
+            }
+        }
+    }
+
+    return result
+}
+
+function resolveColor(color: Color, lightColor = false): string {
+    const colorMap: Record<Color, string> = {
+        orange: lightColor ? 'bg-orange-300' : 'bg-orange-500',
+        amber: lightColor ? 'bg-amber-300' : 'bg-amber-500',
+        yellow: lightColor ? 'bg-yellow-300' : 'bg-yellow-500',
+        lime: lightColor ? 'bg-lime-300' : 'bg-lime-500',
+        green: lightColor ? 'bg-green-300' : 'bg-green-500',
+        emerald: lightColor ? 'bg-emerald-300' : 'bg-emerald-500',
+        teal: lightColor ? 'bg-teal-300' : 'bg-teal-500',
+        cyan: lightColor ? 'bg-cyan-300' : 'bg-cyan-500',
+        sky: lightColor ? 'bg-sky-300' : 'bg-sky-500',
+        blue: lightColor ? 'bg-blue-300' : 'bg-blue-500',
+        indigo: lightColor ? 'bg-indigo-300' : 'bg-indigo-500',
+        purple: lightColor ? 'bg-purple-300' : 'bg-purple-500',
+        pink: lightColor ? 'bg-pink-300' : 'bg-pink-500',
+        rose: lightColor ? 'bg-rose-300' : 'bg-rose-500',
+        red: lightColor ? 'bg-red-300' : 'bg-red-500',
+        neutral: lightColor ? 'bg-neutral-300' : 'bg-neutral-500',
+    }
+
+    if (lightColor && !colorMap[color]) {
+        const colorWith300 = color.replace(/\d+$/, '300')
+        return `bg-${colorWith300}`
+    }
+
+    return colorMap[color] || `bg-${color}`
+}
+
+const allCreatedTags = ref<Tag[]>([])
+const localSelectedTags = ref<Tag[]>(props.modelValue || [])
+const popoverOpen = ref(false)
+const selectedContent = ref<ContentType>(allCreatedTags.value.length > 0 ? 'existing-tag' : 'new-tag')
+const newTagName = ref<string>('')
+const selectedColorsForNewTag = ref<Color | null>(null)
+const selectedTagsForApply = ref<Set<string>>(new Set())
+const editingTag = ref<Tag | null>(null)
+const editingTagName = ref<string>('')
+const editingTagColor = ref<Color | null>(null)
+const isCreatingTag = ref(false)
+
+function updateAllCreatedTags() {
+    const mergedTags = mergeTagsUnique(props.options, props.modelValue)
+    const selectedKeys = getTagKeys(props.modelValue || [])
+
+    allCreatedTags.value = mergedTags.map(tag => ({
+        ...tag,
+        isSelected: selectedKeys.has(getTagKey(tag)),
+    }))
+}
+
+function resetEditingState() {
+    editingTag.value = null
+    editingTagName.value = ''
+    editingTagColor.value = null
+}
+
+function resetNewTagForm() {
+    newTagName.value = ''
+    selectedColorsForNewTag.value = null
+}
+
+const contentMeasure = useTemplateRef<HTMLElement>('contentMeasure')
+const { height: heightContent } = useElementSize(contentMeasure)
+
+const tags = computed({
+    get: () => localSelectedTags.value,
+    set: (value) => {
+        localSelectedTags.value = value
+        emit('update:modelValue', value)
+    },
+})
+
+const hasTags = computed(() => allCreatedTags.value.length > 0)
+
+const triggerDots = computed<Dot[]>(() => {
+    if (tags.value.length > 0) {
+        return tags.value.slice(0, 3).map(tag => ({ color: tag.color }))
+    }
+    if (hasTags.value) {
+        return allCreatedTags.value.slice(0, 3).map(tag => ({ color: tag.color }))
+    }
+    return EMPTY_DOTS
+})
+
+const computedHeightContent = computed(() => {
+    if (heightContent.value > 0) {
+        return `${heightContent.value}px`
+    }
+    return undefined
+})
+
+const labelText = computed(() => {
+    if (hasTags.value && tags.value.length === 0) {
+        return `${allCreatedTags.value.length} tag${allCreatedTags.value.length > 1 ? 's' : ''}`
+    }
+
+    if (tags.value.length > 0) {
+        return `${tags.value.length} ${props.selectedLabel}`
+    }
+
+    return props.createTagLabel
+})
+
+const contentConfigs = computed(() => {
+    const configs = [
+        { type: 'new-tag' as const, slideIndex: -1 },
+        { type: 'existing-tag' as const, slideIndex: 1 },
+        { type: 'edit-tag' as const, slideIndex: -1 },
+    ]
+
+    return configs.filter(config => selectedContent.value === config.type)
+})
+
+watch(() => props.options, updateAllCreatedTags, { immediate: true })
+
+watch(() => props.modelValue, (newTags) => {
+    if (!newTags?.length) {
+        localSelectedTags.value = []
+        updateAllCreatedTags()
+        return
+    }
+
+    const currentKeys = getTagKeys(localSelectedTags.value)
+    const newKeys = getTagKeys(newTags)
+    const isDifferent = currentKeys.size !== newKeys.size || !Array.from(newKeys).every(key => currentKeys.has(key))
+
+    if (isDifferent) {
+        localSelectedTags.value = [...newTags]
+        updateAllCreatedTags()
+    }
+}, { immediate: true })
+
+watch(popoverOpen, (isOpen) => {
+    if (isOpen) {
+        selectedContent.value = hasTags.value ? 'existing-tag' : 'new-tag'
+        selectedTagsForApply.value = getTagKeys(localSelectedTags.value)
+    }
+    else {
+        resetEditingState()
+    }
+})
+
+watch(() => localSelectedTags.value, (newTags) => {
+    if (isCreatingTag.value) {
+        return
+    }
+
+    if (newTags?.length) {
+        selectedTagsForApply.value = getTagKeys(newTags)
+
+        const selectedKeys = getTagKeys(newTags)
+
+        allCreatedTags.value = allCreatedTags.value.map(tag => ({
+            ...tag,
+            isSelected: selectedKeys.has(getTagKey(tag)),
+        }))
+
+        if (selectedContent.value === null) {
+            selectedContent.value = 'existing-tag'
+        }
+    }
+    else {
+        selectedTagsForApply.value = new Set()
+
+        allCreatedTags.value = allCreatedTags.value.map(tag => ({
+            ...tag,
+            isSelected: false,
+        }))
+    }
+}, { immediate: true })
+
+function handleSelectColor(color: Color) {
+    if (!newTagName.value?.trim()) {
+        return
+    }
+
+    selectedColorsForNewTag.value = selectedColorsForNewTag.value === color ? null : color
+}
+
+function handleSelectColorForEdit(color: Color) {
+    if (!editingTagName.value?.trim()) {
+        return
+    }
+
+    editingTagColor.value = editingTagColor.value === color ? null : color
+}
+
+function createNewTag() {
+    const trimmedName = newTagName.value?.trim()
+
+    if (!trimmedName || !selectedColorsForNewTag.value) {
+        return
+    }
+
+    isCreatingTag.value = true
+
+    const newTag: Tag = {
+        id: crypto.randomUUID(),
+        color: selectedColorsForNewTag.value,
+        name: trimmedName,
+    }
+
+    const tagKey = getTagKey(newTag)
+    const allCreatedKeys = getTagKeys(allCreatedTags.value)
+
+    if (!allCreatedKeys.has(tagKey)) {
+        const tagWithSelection: Tag = { ...newTag, isSelected: true }
+
+        allCreatedTags.value = [...allCreatedTags.value, tagWithSelection]
+        tags.value = [...tags.value, newTag]
+
+        selectedTagsForApply.value.add(tagKey)
+    }
+
+    resetNewTagForm()
+
+    selectedContent.value = 'existing-tag'
+
+    nextTick(() => {
+        isCreatingTag.value = false
+    })
+}
+
+function toggleTagSelection(tag: Tag, checked: boolean) {
+    const tagKey = getTagKey(tag)
+
+    if (checked) {
+        selectedTagsForApply.value.add(tagKey)
+    }
+    else {
+        selectedTagsForApply.value.delete(tagKey)
+    }
+
+    // Apply changes immediately
+    const selectedTags = allCreatedTags.value.filter(isTagSelected)
+    tags.value = selectedTags.map((tag) => {
+        const { isSelected, ...tagWithoutSelection } = tag
+        return tagWithoutSelection
+    })
+}
+
+function isTagSelected(tag: Tag): boolean {
+    return selectedTagsForApply.value.has(getTagKey(tag))
+}
+
+function handleCreateMore() {
+    resetNewTagForm()
+    selectedContent.value = 'new-tag'
+}
+
+function handleBackToTags() {
+    selectedContent.value = 'existing-tag'
+}
+
+function handleEditTag(tag: Tag) {
+    editingTag.value = tag
+    editingTagName.value = tag.name
+    editingTagColor.value = tag.color
+
+    selectedContent.value = 'edit-tag'
+}
+
+function saveEditedTag() {
+    if (!editingTag.value || !editingTagName.value?.trim() || !editingTagColor.value) {
+        return
+    }
+
+    const oldTagKey = getTagKey(editingTag.value)
+    const newTag: Tag = {
+        id: editingTag.value.id,
+        color: editingTagColor.value,
+        name: editingTagName.value.trim(),
+    }
+    const newTagKey = getTagKey(newTag)
+
+    const tagIndex = allCreatedTags.value.findIndex(t => getTagKey(t) === oldTagKey)
+
+    if (tagIndex !== -1 && allCreatedTags.value[tagIndex]) {
+        const wasSelected = allCreatedTags.value[tagIndex].isSelected ?? false
+
+        allCreatedTags.value[tagIndex] = { ...newTag, isSelected: wasSelected }
+    }
+
+    const wasSelected = selectedTagsForApply.value.has(oldTagKey)
+
+    if (wasSelected) {
+        selectedTagsForApply.value.delete(oldTagKey)
+        selectedTagsForApply.value.add(newTagKey)
+    }
+
+    const selectedIndex = localSelectedTags.value.findIndex(t => getTagKey(t) === oldTagKey)
+
+    if (selectedIndex !== -1) {
+        localSelectedTags.value[selectedIndex] = { ...newTag }
+        tags.value = localSelectedTags.value
+    }
+
+    resetEditingState()
+
+    selectedContent.value = 'existing-tag'
+}
+
+function cancelEditTag() {
+    resetEditingState()
+    selectedContent.value = 'existing-tag'
+}
+
+function getSlideMotionVariants(index: number) {
+    return {
+        initial: {
+            x: `${110 * index}%`,
+            opacity: 0,
+        },
+        animate: {
+            x: 0,
+            opacity: 1,
+        },
+        exit: {
+            x: `${-110 * index}%`,
+            opacity: 0,
+        },
+    }
+}
+
+const SPRING_CONFIG = {
+    type: 'spring',
+    duration: 0.5,
+    bounce: 0,
+} as const
+
+updateAllCreatedTags()
+</script>
+
+<template>
+    <MotionConfig :transition="SPRING_CONFIG">
+        <PopoverRoot v-model:open="popoverOpen">
+            <PopoverTrigger
+                as="button"
+                :class="cn(
+                    'group w-fit flex items-center gap-[6px] px-[12px] py-[7px] rounded-[10px] bg-background border-[0.5px] border-border-strong',
+                    'transition ease-in-out duration-80 hover:bg-background-subtle data-[state=open]:bg-background-subtle',
+                    props.class,
+                )"
+            >
+                <div class="flex items-center">
+                    <div
+                        v-for="(dot, index) in triggerDots"
+                        :key="index"
+                        :class="cn(
+                            'flex items-center justify-center w-[12px] h-[12px] rounded-full dot-mask [&:not(:first-child)]:-ml-[4px]',
+                            resolveColor(dot.color, dot.lightColor),
+                        )"
+                    >
+                        <TelaIcon v-if="dot.icon" :name="dot.icon" size="7px" :color="dot.iconColor || 'white-1000'" />
+                    </div>
+                </div>
+                <span :class="cn('body-14-semibold text-text-primary', props.labelClass)">
+                    {{ labelText }}
+                </span>
+            </PopoverTrigger>
+            <PopoverPortal>
+                <PopoverContent class="TagsSelectContent" :side-offset="8" w-220px pt-12px px-16px bg-background border-0.5px border-border shadow-lg rounded-12px overflow-hidden>
+                    <div
+                        class="[transition:height_0.3s_ease-out]"
+                        :style="computedHeightContent ? { height: computedHeightContent } : {}"
+                    >
+                        <div ref="contentMeasure">
+                            <AnimatePresence mode="popLayout" :initial="false">
+                                <Motion
+                                    v-for="config in contentConfigs"
+                                    :key="config.type"
+                                    v-bind="getSlideMotionVariants(config.slideIndex)"
+                                    flex="~ col"
+                                    tabindex="-1"
+                                >
+                                    <div v-if="config.type === 'new-tag'" flex="~ col" gap-12px pb-16px>
+                                        <div flex="~ col" gap-4px>
+                                            <button
+                                                v-if="allCreatedTags.length > 0"
+                                                flex items-center justify-center w-24px h-24px rounded-6px hover:bg-background-muted ml--6px mt--4px
+                                                @click="handleBackToTags"
+                                            >
+                                                <TelaIcon name="i-ph-arrow-left" size="16px" color="icon" />
+                                            </button>
+                                            <h5 heading-h5-semibold>
+                                                {{ props.newTagLabel }}
+                                            </h5>
+                                        </div>
+                                        <TelaInput
+                                            v-model="newTagName"
+                                            :placeholder="props.defineNamePlaceholder"
+                                            input-class="px-[6px]! pt-[2px]! pb-[3px]! rounded-[6px]!"
+                                            input-font-class="body-12-regular!"
+                                            autofocus
+                                            @keydown.enter="createNewTag"
+                                        />
+                                        <div class="grid grid-cols-8 gap-4px">
+                                            <button
+                                                v-for="color in ALL_COLORS"
+                                                :key="color"
+                                                w-20px h-20px rounded-4px flex items-center justify-center hover:bg-background-lowered
+                                                @click="handleSelectColor(color)"
+                                            >
+                                                <div
+                                                    :class="cn('flex items-center justify-center w-12px h-12px rounded-full', resolveColor(color))"
+                                                >
+                                                    <TelaIcon
+                                                        v-if="selectedColorsForNewTag === color"
+                                                        name="i-ph-check-bold"
+                                                        size="8px"
+                                                        color="white-1000"
+                                                    />
+                                                </div>
+                                            </button>
+                                        </div>
+                                        <TelaButton size="sm" :disabled="!newTagName || newTagName.trim() === '' || !selectedColorsForNewTag" @click="createNewTag">
+                                            {{ props.createButtonLabel }}
+                                        </TelaButton>
+                                    </div>
+                                    <div v-if="config.type === 'existing-tag'" flex="~ col" pb-10px>
+                                        <div flex items-center justify-between>
+                                            <h5 heading-h5-semibold>
+                                                {{ allCreatedTags.length }} tag{{ allCreatedTags.length > 1 ? 's' : '' }}
+                                            </h5>
+                                            <button flex items-center justify-center w-24px h-24px rounded-6px hover:bg-background-muted mr--4px @click="handleCreateMore">
+                                                <TelaIcon name="i-ph-plus" size="16px" color="icon" />
+                                            </button>
+                                        </div>
+                                        <div flex="~ col" mt-4px>
+                                            <button v-for="tag in allCreatedTags" :key="`${tag.color}-${tag.name}`" class="group/tag" flex items-center justify-between hover:bg-background-muted px-8px mx--8px py-4px rounded-8px @click="toggleTagSelection(tag, !isTagSelected(tag))">
+                                                <div flex items-center gap-6px min-w-0>
+                                                    <div :class="cn('w-[8px] h-[8px] rounded-full flex-shrink-0', resolveColor(tag.color))" />
+                                                    <span body-14-medium text-text-primary capitalize truncate text-start>
+                                                        {{ tag.name }}
+                                                    </span>
+                                                </div>
+                                                <div flex items-center gap-4px>
+                                                    <button
+                                                        class="group opacity-0 group-hover/tag:opacity-100" flex items-center justify-center w-17px h-17px rounded-5px hover:bg-background-lowered
+                                                        @click.stop="handleEditTag(tag)"
+                                                    >
+                                                        <TelaIcon name="i-ph-pencil-simple" size="12px" color="icon-subtle group-hover:icon" />
+                                                    </button>
+                                                    <TelaCheckbox :model-value="isTagSelected(tag)" @update:model-value="(checked) => toggleTagSelection(tag, checked === true)" @click.stop />
+                                                </div>
+                                            </button>
+                                        </div>
+                                    </div>
+                                    <div v-if="config.type === 'edit-tag'" flex="~ col" gap-12px pb-16px>
+                                        <div flex="~ col" gap-4px>
+                                            <button
+                                                flex items-center justify-center w-24px h-24px rounded-6px hover:bg-background-muted ml--6px mt--4px
+                                                @click="cancelEditTag"
+                                            >
+                                                <TelaIcon name="i-ph-arrow-left" size="16px" color="icon" />
+                                            </button>
+                                            <h5 heading-h5-semibold>
+                                                {{ props.editTagLabel }}
+                                            </h5>
+                                        </div>
+                                        <TelaInput
+                                            v-model="editingTagName"
+                                            :placeholder="props.addNewNamePlaceholder"
+                                            input-class="px-[6px]! pt-[2px]! pb-[3px]! rounded-[6px]!"
+                                            input-font-class="body-12-regular!"
+                                            @keydown.enter="saveEditedTag"
+                                        />
+                                        <div class="grid grid-cols-8 gap-4px">
+                                            <button
+                                                v-for="color in ALL_COLORS"
+                                                :key="color"
+                                                w-20px h-20px rounded-4px flex items-center justify-center hover:bg-background-lowered
+                                                @click="handleSelectColorForEdit(color)"
+                                            >
+                                                <div
+                                                    :class="cn('flex items-center justify-center w-12px h-12px rounded-full', resolveColor(color))"
+                                                >
+                                                    <TelaIcon
+                                                        v-if="editingTagColor === color"
+                                                        name="i-ph-check-bold"
+                                                        size="8px"
+                                                        color="white-1000"
+                                                    />
+                                                </div>
+                                            </button>
+                                        </div>
+                                        <TelaButton size="sm" :disabled="!editingTagName || editingTagName.trim() === '' || !editingTagColor" @click="saveEditedTag">
+                                            {{ props.saveChangesButtonLabel }}
+                                        </TelaButton>
+                                    </div>
+                                </Motion>
+                            </AnimatePresence>
+                        </div>
+                    </div>
+                </PopoverContent>
+            </PopoverPortal>
+        </PopoverRoot>
+    </MotionConfig>
+</template>
+
+<style>
+  .dot-mask:not(:last-child) {
+    mask-image: radial-gradient(circle 6px at right center, transparent 6px, #fff 6px);
+  }
+
+  .TagsSelectContent {
+    transform-origin: var(--reka-popover-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);
+    }
+  }
+
+  .slide-fade-enter-active {
+    transition: all 0.3s ease;
+  }
+
+  .slide-fade-leave-active {
+    transition: all 0.3s cubic-bezier(1.0, 0.5, 0.8, 1.0);
+  }
+</style>