@meistrari/tela-build 1.0.0

package/components/tela/command/command-item.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import type { ListboxItemEmits, ListboxItemProps } from 'reka-ui'
+import { useCurrentElement } from '@vueuse/core'
+import { ListboxItem, useForwardPropsEmits, useId } from 'reka-ui'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import type { HTMLAttributes } from 'vue'
+import { useCommand, useCommandGroup } from './utils'
+
+const props = defineProps<ListboxItemProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<ListboxItemEmits>()
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props
+
+    return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+
+const id = useId()
+const { filterState, allItems, allGroups } = useCommand()
+const groupContext = useCommandGroup()
+
+const isRender = computed(() => {
+    if (!filterState.search) {
+        return true
+    }
+    else {
+        const filteredCurrentItem = filterState.filtered.items.get(id)
+        // If the filtered items is undefined means not in the all times map yet
+        // Do the first render to add into the map
+        if (filteredCurrentItem === undefined) {
+            return true
+        }
+
+        // Check with filter
+        return filteredCurrentItem > 0
+    }
+})
+
+const itemRef = ref()
+const currentElement = useCurrentElement(itemRef)
+onMounted(() => {
+    if (!(currentElement.value instanceof HTMLElement))
+        return
+
+    // textValue to perform filter
+    allItems.value.set(id, currentElement.value.textContent ?? props.value?.toString() ?? '')
+
+    const groupId = groupContext?.id
+    if (groupId) {
+        if (!allGroups.value.has(groupId)) {
+            allGroups.value.set(groupId, new Set([id]))
+        }
+        else {
+            allGroups.value.get(groupId)?.add(id)
+        }
+    }
+})
+onUnmounted(() => {
+    allItems.value.delete(id)
+})
+</script>
+
+<template>
+    <ListboxItem
+        v-if="isRender"
+        v-bind="forwarded"
+        :id="id"
+        ref="itemRef"
+        :class="cn('relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0', props.class)"
+        @select="() => {
+            filterState.search = ''
+        }"
+    >
+        <slot />
+    </ListboxItem>
+</template>

package/components/tela/command/command-list.vue

@@ -0,0 +1,78 @@
+<script setup lang="ts">
+import type { ListboxItemEmits, ListboxItemProps } from 'reka-ui'
+import { useCurrentElement } from '@vueuse/core'
+import { ListboxItem, useForwardPropsEmits, useId } from 'reka-ui'
+import { computed, onMounted, onUnmounted, ref } from 'vue'
+import type { HTMLAttributes } from 'vue'
+import { useCommand, useCommandGroup } from './utils'
+
+const props = defineProps<ListboxItemProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<ListboxItemEmits>()
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props
+
+    return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+
+const id = useId()
+const { filterState, allItems, allGroups } = useCommand()
+const groupContext = useCommandGroup()
+
+const isRender = computed(() => {
+    if (!filterState.search) {
+        return true
+    }
+    else {
+        const filteredCurrentItem = filterState.filtered.items.get(id)
+        // If the filtered items is undefined means not in the all times map yet
+        // Do the first render to add into the map
+        if (filteredCurrentItem === undefined) {
+            return true
+        }
+
+        // Check with filter
+        return filteredCurrentItem > 0
+    }
+})
+
+const itemRef = ref()
+const currentElement = useCurrentElement(itemRef)
+onMounted(() => {
+    if (!(currentElement.value instanceof HTMLElement))
+        return
+
+    // textValue to perform filter
+    allItems.value.set(id, currentElement.value.textContent ?? props.value?.toString() ?? '')
+
+    const groupId = groupContext?.id
+    if (groupId) {
+        if (!allGroups.value.has(groupId)) {
+            allGroups.value.set(groupId, new Set([id]))
+        }
+        else {
+            allGroups.value.get(groupId)?.add(id)
+        }
+    }
+})
+onUnmounted(() => {
+    allItems.value.delete(id)
+})
+</script>
+
+<template>
+    <ListboxItem
+        v-if="isRender"
+        v-bind="forwarded"
+        :id="id"
+        ref="itemRef"
+        :class="cn('relative flex cursor-default gap-2 select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none data-[highlighted]:bg-accent data-[highlighted]:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:size-4 [&_svg]:shrink-0', props.class)"
+        @select="() => {
+            filterState.search = ''
+        }"
+    >
+        <slot />
+    </ListboxItem>
+</template>

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

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import type { SeparatorProps } from 'reka-ui'
+import { Separator } from 'reka-ui'
+import { computed } from 'vue'
+import type { HTMLAttributes } from 'vue'
+
+const props = defineProps<SeparatorProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props
+
+    return delegated
+})
+</script>
+
+<template>
+    <Separator
+        v-bind="delegatedProps"
+        :class="cn('-mx-1 h-px bg-border', props.class)"
+    >
+        <slot />
+    </Separator>
+</template>

package/components/tela/command/command-shortcut.vue

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

package/components/tela/command/command.vue

@@ -0,0 +1,88 @@
+<script setup lang="ts">
+import type { ListboxRootEmits, ListboxRootProps } from 'reka-ui'
+import { ListboxRoot, useFilter, useForwardPropsEmits } from 'reka-ui'
+import { computed, reactive, ref, watch } from 'vue'
+import type { HTMLAttributes } from 'vue'
+import { provideCommandContext } from './utils'
+
+const props = withDefaults(defineProps<ListboxRootProps & { class?: HTMLAttributes['class'] }>(), {
+    modelValue: '',
+})
+
+const emits = defineEmits<ListboxRootEmits>()
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props
+
+    return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+
+const allItems = ref<Map<string, string>>(new Map())
+const allGroups = ref<Map<string, Set<string>>>(new Map())
+
+const { contains } = useFilter({ sensitivity: 'base' })
+const filterState = reactive({
+    search: '',
+    filtered: {
+    /** The count of all visible items. */
+        count: 0,
+        /** Map from visible item id to its search score. */
+        items: new Map() as Map<string, number>,
+        /** Set of groups with at least one visible item. */
+        groups: new Set() as Set<string>,
+    },
+})
+
+function filterItems() {
+    if (!filterState.search) {
+        filterState.filtered.count = allItems.value.size
+        // Do nothing, each item will know to show itself because search is empty
+        return
+    }
+
+    // Reset the groups
+    filterState.filtered.groups = new Set()
+    let itemCount = 0
+
+    // Check which items should be included
+    for (const [id, value] of allItems.value) {
+        const score = contains(value, filterState.search)
+        filterState.filtered.items.set(id, score ? 1 : 0)
+        if (score)
+            itemCount++
+    }
+
+    // Check which groups have at least 1 item shown
+    for (const [groupId, group] of allGroups.value) {
+        for (const itemId of group) {
+            if (filterState.filtered.items.get(itemId)! > 0) {
+                filterState.filtered.groups.add(groupId)
+                break
+            }
+        }
+    }
+
+    filterState.filtered.count = itemCount
+}
+
+watch(() => filterState.search, () => {
+    filterItems()
+})
+
+provideCommandContext({
+    allItems,
+    allGroups,
+    filterState,
+})
+</script>
+
+<template>
+    <ListboxRoot
+        v-bind="forwarded"
+        :class="cn('flex h-full w-full flex-col overflow-hidden rounded-md bg-popover text-popover-foreground', props.class)"
+    >
+        <slot />
+    </ListboxRoot>
+</template>

package/components/tela/command/dialog-base.vue

@@ -0,0 +1,15 @@
+<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">
+        <slot />
+    </DialogRoot>
+</template>

package/components/tela/command/dialog-content.vue

@@ -0,0 +1,50 @@
+<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'
+
+const props = defineProps<DialogContentProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<DialogContentEmits>()
+
+const delegatedProps = computed(() => {
+    const { class: _, ...delegated } = props
+
+    return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+    <DialogPortal>
+        <DialogOverlay
+            class="fixed inset-0 z-50 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
+            v-bind="forwarded"
+            :class="
+                cn(
+                    'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border-[1px] bg-background p-6 shadow-lg duration-200 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-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+                    props.class,
+                )"
+        >
+            <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-accent data-[state=open]:text-muted-foreground"
+            >
+                <X class="w-4 h-4" />
+                <span class="sr-only">Close</span>
+            </DialogClose>
+        </DialogContent>
+    </DialogPortal>
+</template>

package/components/tela/command/utils.ts

@@ -0,0 +1,15 @@
+import type { Ref } from 'vue'
+import { createContext } from 'reka-ui'
+
+export const [useCommand, provideCommandContext] = createContext<{
+    allItems: Ref<Map<string, string>>
+    allGroups: Ref<Map<string, Set<string>>>
+    filterState: {
+        search: string
+        filtered: { count: number, items: Map<string, number>, groups: Set<string> }
+    }
+}>('Command')
+
+export const [useCommandGroup, provideCommandGroupContext] = createContext<{
+    id?: string
+}>('CommandGroup')

package/components/tela/complex-table/complex-table-cell.stories.ts

@@ -0,0 +1,145 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import TelaComplexTableCell from './complex-table-cell.vue'
+
+const meta = {
+    title: 'Components/Tela/ComplexTableCell',
+    component: TelaComplexTableCell,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'A table cell component for use within ComplexTable. Renders cell content based on column and row data. Supports custom cell rendering, text content, and styling.',
+            },
+        },
+    },
+    argTypes: {
+        column: {
+            control: 'object',
+            description: 'Column definition object with `title` and `key` properties.',
+        },
+        row: {
+            control: 'object',
+            description: 'Row data object containing the cell value in the `data` property.',
+        },
+    },
+    decorators: [
+        story => ({
+            components: { story },
+            template: `
+                <div style="width: 200px; border: 1px solid #E1E3E4;">
+                    <story />
+                </div>
+            `,
+        }),
+    ],
+} satisfies Meta<typeof TelaComplexTableCell>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const TextContent: Story = {
+    args: {
+        column: {
+            title: 'Name',
+            isDefault: false,
+        },
+        row: {
+            id: '1',
+            name: 'John Doe',
+            index: 1,
+            status: 'success',
+            data: {
+                Name: 'John Doe',
+            },
+        },
+    },
+}
+
+export const LongTextContent: Story = {
+    args: {
+        column: {
+            title: 'Description',
+            isDefault: false,
+        },
+        row: {
+            id: '1',
+            name: 'John Doe',
+            index: 1,
+            status: 'success',
+            data: {
+                Description: 'This is a very long text content that should be truncated with ellipsis because it exceeds the maximum number of lines allowed in the cell component and needs to be handled gracefully.',
+            },
+        },
+    },
+}
+
+export const ArrayContent: Story = {
+    args: {
+        column: {
+            title: 'Tags',
+            isDefault: false,
+        },
+        row: {
+            id: '1',
+            name: 'John Doe',
+            index: 1,
+            status: 'success',
+            data: {
+                Tags: ['tag1', 'tag2', 'tag3', 'tag4', 'tag5'],
+            },
+        },
+    },
+}
+
+export const EmptyContent: Story = {
+    args: {
+        column: {
+            title: 'Empty',
+            isDefault: true,
+        },
+        row: {
+            id: '1',
+            name: 'John Doe',
+            index: 1,
+            status: 'success',
+            data: {
+                Empty: '',
+            },
+        },
+    },
+}
+
+export const UndefinedContent: Story = {
+    args: {
+        column: {
+            title: 'Missing',
+            isDefault: true,
+        },
+        row: {
+            id: '1',
+            name: 'John Doe',
+            index: 1,
+            status: 'success',
+            data: {},
+        },
+    },
+}
+
+export const NumberContent: Story = {
+    args: {
+        column: {
+            title: 'Amount',
+            isDefault: false,
+        },
+        row: {
+            id: '1',
+            name: 'John Doe',
+            index: 1,
+            status: 'success',
+            data: {
+                Amount: 42,
+            },
+        },
+    },
+}

package/components/tela/complex-table/complex-table-cell.vue

@@ -0,0 +1,45 @@
+<script lang="ts" setup>
+import { hasEmptyOrNull } from 'tela-shared/src/helpers/empty-or-null'
+import type { Column, Row } from './types'
+import { hasError } from './utils'
+import { useI18n } from 'vue-i18n'
+
+defineOptions({
+    name: 'TelaComplexTableCell',
+})
+const props = defineProps<{
+    column: Column
+    row: Row
+}>()
+
+const { t } = useI18n()
+
+const content = computed(() => {
+    const data = props.row.data ?? {}
+    return data[props.column.key || props.column.title]
+})
+
+const icon = computed(() => props.row.icons?.find(icon => icon?.key === props.column.key))
+</script>
+
+<template>
+    <div inline-grid h-full justify-start flex flex-row items-center px-12px py-10px gap-6px w-full>
+        <div v-if="icon">
+            <TelaIcon :name="icon.name" :size="icon.size" :style="icon.style" />
+        </div>
+        <div v-if="hasEmptyOrNull(content) && !hasError(row)" w-full flex justify-start :class="row.style">
+            <span body-14-regular italic text-gray-300 opacity-24>
+                —
+            </span>
+        </div>
+        <div v-else overflow-hidden flex body-14-regular :text="row.color ? row.color : 'gray-800'" justify-start self-center :class="row.style">
+            <p v-if="!Array.isArray(content)" line-clamp-2 w-full text-start>
+                {{ content }}
+            </p>
+            <p v-else line-clamp-2 flex items-center gap-4px text-nowrap>
+                <span>{{ content.length }} {{ t('common.items') }} </span>
+                <TelaIcon name="i-ph-sort-ascending" size="md" mr-2px shrink-0 />
+            </p>
+        </div>
+    </div>
+</template>

package/components/tela/complex-table/complex-table-header-cell.stories.ts

@@ -0,0 +1,103 @@
+import type { Meta, StoryObj } from '@storybook/vue3'
+import TelaComplexTableHeaderCell from './complex-table-header-cell.vue'
+
+const meta = {
+    title: 'Components/Tela/ComplexTableHeaderCell',
+    component: TelaComplexTableHeaderCell,
+    tags: ['autodocs'],
+    parameters: {
+        layout: 'centered',
+        docs: {
+            description: {
+                component: 'A header cell component for ComplexTable headers. Displays column titles, sorting indicators, and selection checkboxes. Supports different cell types and custom styling.',
+            },
+        },
+    },
+    argTypes: {
+        type: {
+            control: 'select',
+            options: ['default', 'checkbox'],
+            description: 'Type of header cell. "default" displays column title, "checkbox" displays selection checkbox.',
+        },
+        column: {
+            control: 'object',
+            description: 'Column definition object with `title`, `key`, and optionally `color` properties.',
+        },
+        tabSize: {
+            control: 'select',
+            options: ['sm', 'md', 'lg'],
+            description: 'Size variant for the header cell.',
+        },
+    },
+} satisfies Meta<typeof TelaComplexTableHeaderCell>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+// Basic header cell with title
+export const Default: Story = {
+    args: {
+        type: 'default',
+        column: {
+            title: 'Column Title',
+            color: 'red',
+        },
+        tabSize: 'sm',
+    },
+}
+
+// Header cell with icon
+export const WithIcon: Story = {
+    args: {
+        type: 'default',
+        column: {
+            title: 'Column with Icon',
+            color: '#71757B',
+            icon: {
+                name: 'i-ph-check',
+                size: '16px',
+            },
+        },
+    },
+}
+
+// Default column style
+export const DefaultColumn: Story = {
+    args: {
+        type: 'default',
+        column: {
+            title: 'Default Column',
+            isDefault: true,
+        },
+    },
+}
+
+// Checkbox header cell
+export const Checkbox: Story = {
+    args: {
+        type: 'checkbox',
+        rows: [1, 2, 3],
+        selectedRows: [1, 2],
+    },
+}
+
+// Checkbox header cell - all selected
+export const CheckboxAllSelected: Story = {
+    args: {
+        type: 'checkbox',
+        rows: [1, 2, 3],
+        selectedRows: [1, 2, 3],
+    },
+}
+
+// With md tab size
+export const WithMdTabSize: Story = {
+    args: {
+        type: 'default',
+        column: {
+            title: 'Default Column',
+            isDefault: true,
+        },
+        tabSize: 'md',
+    },
+}