@meistrari/tela-build 1.67.0 → 1.68.0

package/components/tela/combobox/combobox-input.vue

@@ -32,7 +32,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
         >
             <slot />
         </ComboboxInput>
-        <div v-if="$slots.deleteSearchValue" class="absolute inset-y-0 end-0 flex items-center justify-center px-2.5">
+        <div v-if="$slots.deleteSearchValue" class="absolute inset-y-0 end-0 flex items-center justify-center px-1">
             <slot name="deleteSearchValue" />
         </div>
     </div>

package/components/tela/combobox/combobox.mdx

@@ -173,6 +173,23 @@ const options = [
 />
 ```
 
+### Allow Create
+
+Pins a "create new" action at the top of the list. It is never filtered out by the search — reka-ui registers an item's filter text once on mount, so the row is keyed by the search term to re-register as `textValue` and always match. When the user has typed something, `labelCreateWithSearch` renders the label with that term.
+
+Picking it turns the row into a text input seeded with the current search term instead of closing the list. `create` is emitted with the confirmed name once the user presses Enter or clicks the check, so it never carries an empty name. Escape returns the row to the action.
+
+```vue
+<TelaCombobox
+  v-model="selected"
+  :options="projects"
+  allow-create
+  label-create="Create a new project"
+  :label-create-with-search="(search) => `Create \"${search}\"`"
+  @create="(search) => startCreating(search)"
+/>
+```
+
 ### Disable Portal
 
 ```vue
@@ -318,6 +335,7 @@ The Combobox system consists of these sub-components:
 
 - `update:modelValue` - Emitted when selection changes with new value
 - `select` - Emitted when an option is selected with the value
+- `create` - Emitted with the name typed into the `allow-create` row, once the user confirms it
 
 ## Keyboard Shortcuts
 

package/components/tela/combobox/combobox.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
 import type { Component, ComponentPublicInstance, Ref } from 'vue'
-import { useMagicKeys } from '@vueuse/core'
+import { useEventListener, useMagicKeys } from '@vueuse/core'
 
 interface ComboboxOption {
     value: string
@@ -63,6 +63,11 @@ const props = withDefaults(defineProps<{
     labelMultimodal?: string
     labelInputMax?: string
     labelOutputMax?: string
+    allowCreate?: boolean
+    labelCreate?: string
+    labelCreateDescription?: string
+    labelCreateWithSearch?: (search: string) => string
+    labelCreatePlaceholder?: string
 }>(), {
     compact: true,
     align: 'start',
@@ -87,17 +92,27 @@ const props = withDefaults(defineProps<{
     labelMultimodal: 'Multimodal',
     labelInputMax: 'Input max',
     labelOutputMax: 'Output max',
+    allowCreate: false,
+    labelCreate: 'Create new',
+    labelCreatePlaceholder: 'Name',
 })
 
 const emit = defineEmits<{
     'update:modelValue': [value: string]
     'select': [value: string]
+    'create': [search: string]
 }>()
 
+// Per-instance so a consumer-supplied option value can never be mistaken for the synthetic create row.
+const createOptionValue = `__tela-combobox-create__${useId()}`
+
 const selectedTab = ref('all')
 const search = ref('')
 const innerValue = ref<string>('')
 const isOpen = ref(false)
+const isCreating = ref(false)
+const createName = ref('')
+const createInputEl = ref<HTMLInputElement>()
 
 const currentOption = computed(() => {
     if (!innerValue.value && !props.modelValue && props.placeholder) {
@@ -170,7 +185,7 @@ const groupedOptions = computed(() => {
     }
 
     if (!hasGroups.value) {
-        return [{ heading: props.labelOptionsGroup, children: filteredOptions }]
+        return filteredOptions.length ? [{ heading: props.labelOptionsGroup, children: filteredOptions }] : []
     }
 
     const groups: Record<string, typeof filteredOptions> = {}
@@ -193,6 +208,88 @@ const groupedOptions = computed(() => {
 
 const isEmpty = computed(() => groupedOptions.value.every(group => group.children.length === 0))
 
+const showCreateOption = computed(() => props.allowCreate && !isCreating.value && search.value.trim().length > 0 && isEmpty.value)
+
+const createOption = computed(() => {
+    const term = search.value.trim()
+    return {
+        value: createOptionValue,
+        label: term && props.labelCreateWithSearch ? props.labelCreateWithSearch(term) : props.labelCreate,
+    }
+})
+
+let clearSearchOnOpen = false
+
+function startCreating() {
+    createName.value = search.value.trim()
+    isCreating.value = true
+    nextTick(() => createInputEl.value?.focus())
+}
+
+function resetCreating() {
+    isCreating.value = false
+    createName.value = ''
+}
+
+function cancelCreating() {
+    if (createInputEl.value && document.activeElement === createInputEl.value) {
+        const searchInput = createInputEl.value.closest('.ComboboxContent')?.querySelector('input')
+        searchInput?.focus()
+    }
+
+    resetCreating()
+}
+
+function confirmCreating() {
+    const name = createName.value.trim()
+    if (!name)
+        return
+
+    clearSearchOnOpen = true
+    isOpen.value = false
+    emit('create', name)
+
+    // Reka refocuses the trigger when the list unmounts; after a keyboard confirm that paints
+    // a focus-visible ring on it, which reads as if the field were still active.
+    nextTick(() => {
+        const active = document.activeElement
+        if (active instanceof HTMLElement && active.getAttribute('aria-haspopup') === 'listbox')
+            active.blur()
+    })
+}
+
+function onCreateKeydown(event: KeyboardEvent) {
+    // The list owns arrow/enter navigation, so the input has to keep its keys to itself.
+    event.stopPropagation()
+
+    if (event.key === 'Enter') {
+        event.preventDefault()
+        confirmCreating()
+    }
+}
+
+// Escape is handled here, at window capture, instead of being left to Reka: TelaModal is a
+// radix-vue Dialog with its own dismissable-layer stack, so both libraries believe they own the
+// top layer and a single Esc would close the list and the modal together. Owning the key while
+// the list is open gives the expected sequence: leave create mode, close the list, close the modal.
+useEventListener(window, 'keydown', (event) => {
+    if (event.key !== 'Escape' || !isOpen.value)
+        return
+
+    event.preventDefault()
+    event.stopImmediatePropagation()
+
+    if (isCreating.value)
+        cancelCreating()
+    else
+        onOpenChange(false)
+}, { capture: true })
+
+watch(search, () => {
+    if (isCreating.value)
+        cancelCreating()
+})
+
 const handleDeleteSearchValue = () => search.value = ''
 
 const keys = useMagicKeys()
@@ -261,7 +358,15 @@ function updateSubmenuPosition(itemValue: string) {
 
 function onOpenChange(open: boolean) {
     isOpen.value = open
-    if (!open) {
+
+    if (open) {
+        resetCreating()
+        if (clearSearchOnOpen) {
+            search.value = ''
+            clearSearchOnOpen = false
+        }
+    }
+    else {
         expandedItem.value = null
     }
 }
@@ -287,6 +392,11 @@ function handleChildSelect(child: ComboboxOption, event: Event) {
 
 function handleSelect(option: any) {
     const value = typeof option === 'string' ? option : option?.value
+    if (value === createOptionValue) {
+        innerValue.value = ''
+        startCreating()
+        return
+    }
     const found = props.options.find(o => o.value === value)
     if (found?.children?.length)
         return
@@ -299,7 +409,7 @@ watch(innerValue, (raw) => {
         return
 
     const value = typeof raw === 'string' ? raw : (raw as any)?.value
-    if (!value)
+    if (!value || value === createOptionValue)
         return
 
     const option = props.options.find(o => o.value === value)
@@ -355,7 +465,16 @@ watch(innerValue, (raw) => {
                 v-if="hasSearchbar"
                 v-model="search"
                 :placeholder="inputPlaceholder || labelSearchPlaceholder"
-            />
+            >
+                <template v-if="allowCreate && !isCreating" #deleteSearchValue>
+                    <TelaIconButton
+                        icon="i-ph-plus"
+                        size="sm"
+                        color="secondary"
+                        @click="startCreating"
+                    />
+                </template>
+            </TelaComboboxInput>
             <TelaTabsRoot v-if="hasTabs" v-model="selectedTab">
                 <TelaTabsList class="sticky z-10 top-0 shrink-0 flex gap-2 w-full">
                     <TelaTabsIndicator />
@@ -365,8 +484,58 @@ watch(innerValue, (raw) => {
                 </TelaTabsList>
             </TelaTabsRoot>
             <div :class="cn('max-h-262px overflow-y-auto no-scrollbar', hasTabs && 'pt-2')">
+                <div v-if="isCreating || showCreateOption" :class="cn('px-4px pt-4px', isEmpty && 'pb-4px')">
+                    <div
+                        v-if="isCreating"
+                        flex items-center h-36px rounded-12px
+                        :class="cn(
+                            'outline-solid outline-[1px] outline-offset-[-1px] outline-border',
+                            !compact && 'px-6px',
+                            compact ? 'gap-2' : 'gap-1.5',
+                        )"
+                    >
+                        <div w-5 h-5 shrink-0 flex items-center justify-center>
+                            <TelaIcon name="i-ph-plus" color="icon-tertiary" />
+                        </div>
+                        <input
+                            ref="createInputEl"
+                            v-model="createName"
+                            :placeholder="labelCreatePlaceholder"
+                            min-w-0 flex-1 bg-transparent text-primary outline-none
+                            placeholder:text-tertiary
+                            :class="compact ? 'body-12-regular font-540' : 'body-14-regular'"
+                            @keydown="onCreateKeydown"
+                        >
+                        <TelaIconButton
+                            icon="i-ph-check"
+                            size="xs"
+                            :disabled="!createName.trim()"
+                            @click="confirmCreating"
+                        />
+                    </div>
+                    <TelaComboboxItem
+                        v-else-if="showCreateOption"
+                        :key="search"
+                        :value="createOption"
+                        :text-value="search"
+                        :class="cn('py-2', !compact && '!px-1.5')"
+                        @select="(e) => { e.preventDefault(); startCreating() }"
+                    >
+                        <div flex items-center min-w-0 :class="compact ? 'gap-2' : 'gap-1.5'">
+                            <div w-5 h-5 shrink-0 flex items-center justify-center>
+                                <TelaIcon name="i-ph-plus" color="icon-tertiary" />
+                            </div>
+                            <div flex flex-col min-w-0>
+                                <span font-medium truncate text-tertiary :class="cn(compact ? 'text-sm font-540' : 'text-body-14-regular', labelItemClass)">{{ createOption.label }}</span>
+                                <span v-if="labelCreateDescription" font-normal text-sm leading-none text-tertiary truncate :class="descriptionClass">
+                                    {{ labelCreateDescription }}
+                                </span>
+                            </div>
+                        </div>
+                    </TelaComboboxItem>
+                </div>
                 <TelaComboboxEmpty
-                    v-if="isEmpty"
+                    v-if="isEmpty && !showCreateOption && !isCreating"
                     class="flex flex-col items-center justify-center gap-5 px-7"
                 >
                     <div class="flex flex-col items-center justify-center gap-3">
@@ -425,11 +594,11 @@ watch(innerValue, (raw) => {
                                         </div>
                                         <div class="flex flex-col">
                                             <div class="flex items-center gap-1">
-                                                <span :class="cn('font-medium truncate max-w-140px', compact ? 'text-sm font-580' : 'text-body-14-regular', labelItemClass)">{{ item.label }}</span>
+                                                <span :class="cn('font-medium truncate max-w-140px', compact ? 'text-sm font-540' : 'text-body-14-regular', labelItemClass)">{{ item.label }}</span>
                                                 <TelaBadge v-if="item.isMultiModal" variant="filled" class="py-[2px] bg-muted" text-class="leading-none">
                                                     {{ labelMultimodal }}
                                                 </TelaBadge>
-                                                <span v-if="item.cost !== undefined" class="text-10px font-580 ml-1px">
+                                                <span v-if="item.cost !== undefined" class="text-10px font-540 ml-1px">
                                                     <span class="text-primary">{{ renderCostIndicator(item.cost)?.blackSymbols }}</span>
                                                     <span class="text-neutral-300">{{ renderCostIndicator(item.cost)?.graySymbols }}</span>
                                                 </span>
@@ -494,7 +663,7 @@ watch(innerValue, (raw) => {
                                                     <Component :is="child.icon" v-else />
                                                 </div>
                                                 <div class="flex flex-col">
-                                                    <span :class="cn('font-medium truncate max-w-140px', compact ? 'text-sm font-580' : 'text-body-14-regular', labelItemClass)">{{ child.label }}</span>
+                                                    <span :class="cn('font-medium truncate max-w-140px', compact ? 'text-sm font-540' : 'text-body-14-regular', labelItemClass)">{{ child.label }}</span>
                                                     <span v-if="child.description" :class="cn('font-normal text-sm leading-none text-secondary', descriptionClass)">
                                                         {{ child.description }}
                                                     </span>

package/components/tela/icon-button/icon-button.vue

@@ -33,7 +33,7 @@ const style = computed(() => {
     const size = ({
         '3xs': 'text-6px p-1 rounded-8px',
         '2xs': 'text-8px p-4px rounded-4px', // 16px
-        'xs': 'text-12px p-6px rounded-6px', // 26px
+        'xs': 'text-12px p-6px rounded-8px', // 26px
         'sm': 'text-16px p-6px rounded-10px', // 32px
         'md': 'text-20px p-6.4px rounded-10px', // 44px
     } as Record<typeof props.size, string>)[props.size]

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@meistrari/tela-build",
-    "version": "1.67.0",
+    "version": "1.68.0",
     "type": "module",
     "files": [
         "app.config.ts",
@@ -73,20 +73,21 @@
         "typescript": "5.8.2",
         "unified": "11.0.5",
         "unocss": "66.5.12",
-        "vue": "3.5.17",
         "vue-component-meta": "3.0.8",
         "vue-docgen-api": "4.78.0",
         "vue-input-otp": "0.3.2",
         "vue-router": "4.5.0"
     },
     "peerDependencies": {
-        "nuxt": "^3.17.0 || ^4.0.0"
+        "nuxt": "^3.17.0 || ^4.0.0",
+        "vue": "^3.5.13"
     },
     "devDependencies": {
         "@nuxt/kit": "3.17.7",
         "@types/node": "18.19.79",
         "fs-extra": "11.2.0",
         "gray-matter": "4.0.3",
-        "nuxt": "3.17.7"
+        "nuxt": "3.17.7",
+        "vue": "3.5.17"
     }
 }