@meistrari/tela-build 1.57.2 → 1.57.3

package/components/tela/preview/preview-floating-bar.vue

@@ -308,7 +308,7 @@ const computedWidthContent = computed(() => {
                         <template v-if="variant === 'default'">
                             <div aria-hidden h-24px w-0.5px class="bg-white/16" />
 
-                            <div pl-12px pr-14px>
+                            <div px-8px>
                                 <TelaTooltipGroupTrigger variant="multiline">
                                     <TelaButton size="sm" variant="dark" :disabled="!fileUrl" @click="fileUrl && download(fileUrl)">
                                         {{ barLabels.download }}

package/components/tela/preview/preview-select-variable.vue

@@ -40,18 +40,31 @@ const defaultLabels: Required<import('./types').PreviewSelectVariableLabels> = {
 const labels = computed(() => ({ ...defaultLabels, ...props.labels }))
 
 const search = ref('')
-const innerValue = ref<string>('')
 const isOpen = ref(false)
 
+const selectedValue = computed({
+    get: () => props.modelValue ?? '',
+    set: (value) => {
+        if (!value)
+            return
+
+        emit('update:modelValue', value)
+
+        isOpen.value = false
+    },
+})
+
 const selectedOption = computed(() =>
-    props.options.find(option => option.value === props.modelValue || option.value === innerValue.value),
+    props.options.find(option => option.value === props.modelValue),
 )
 
 const filteredOptions = computed(() => {
     if (!search.value.trim()) {
         return props.options
     }
+
     const searchLower = search.value.toLowerCase()
+
     return props.options.filter(option =>
         option.variable.toLowerCase().includes(searchLower)
         || option.file.toLowerCase().includes(searchLower),
@@ -81,6 +94,7 @@ function handleDeleteSearchValue() {
 
 const firstColumnWidth = computed(() => {
     const allVariableNames = [...new Set(props.options.map(opt => opt.variable))]
+
     const allTexts = [
         selectedOption.value?.variable || props.placeholder,
         labels.value.variablesLabel,
@@ -116,30 +130,17 @@ function onOpenChange(open: boolean) {
     }
 }
 
-watch(innerValue, (value) => {
-    if (!value) {
-        return
-    }
-
-    const option = props.options.find(option => option.value === value)
-
-    if (option) {
-        innerValue.value = ''
-        emit('update:modelValue', value)
-        isOpen.value = false
-    }
-})
-
 function iconSrc(option: PreviewVariableOption): string {
     if (option.icon)
         return option.icon
+
     return '/files/generic.svg'
 }
 </script>
 
 <template>
     <TelaComboboxRoot
-        v-model="innerValue"
+        v-model="selectedValue"
         by="value"
         :open="isOpen"
         :disabled="disabled"
@@ -150,7 +151,7 @@ function iconSrc(option: PreviewVariableOption): string {
             <TelaComboboxTrigger
                 as="button"
                 tabindex="0"
-                class="w-full bg border-[0.5px] border-strong rounded-10px px-12px py-7px flex items-center justify-between gap-10px"
+                class="w-full bg border-[0.5px] border-strong rounded-10px pl-13.2px pr-12px py-7px flex items-center justify-between gap-10px"
             >
                 <div class="grid items-center gap-22px w-full min-w-0 grid-cols-[var(--first-col-width,minmax(82px,auto))_1fr]">
                     <p body-14-semibold text-start text-primary min-w-0>
@@ -171,6 +172,7 @@ function iconSrc(option: PreviewVariableOption): string {
                 v-model="search"
                 class="rounded-b-none"
                 :placeholder="labels.searchPlaceholder"
+                :display-value="() => ''"
             >
                 <template v-if="search.length > 0" #deleteSearchValue>
                     <button class="flex items-center justify-center" @mousedown.prevent @click.stop="handleDeleteSearchValue">
@@ -217,13 +219,13 @@ function iconSrc(option: PreviewVariableOption): string {
                     <div v-for="group in groupedOptions" :key="group.heading" mx-12px>
                         <TelaComboboxGroup
                             :heading="group.heading"
-                            class="overflow-visible mx--12px px-12px"
+                            class="overflow-visible mx--12px"
                         >
                             <TelaComboboxItem
                                 v-for="(item, index) in group.children"
                                 :key="item.value"
                                 :value="item.value"
-                                class="grid items-center gap-22px grid-cols-[var(--first-col-width,minmax(82px,auto))_minmax(0,1fr)] h-32px w-full"
+                                class="grid items-center gap-22px grid-cols-[var(--first-col-width,minmax(82px,auto))_minmax(0,1fr)] pl-[9px] h-32px w-full"
                             >
                                 <span v-if="index === 0" body-14-semibold text-primary min-w-0>{{ group.heading }}</span>
                                 <span v-else />
@@ -235,7 +237,7 @@ function iconSrc(option: PreviewVariableOption): string {
                                             <span flex-shrink-0>{{ item.file.includes('.') ? (item.file.match(/[^.]+$/)?.[0] ?? '') : '' }}</span>
                                         </p>
                                     </div>
-                                    <div v-if="props.modelValue === item.value" class="flex gap-2 items-center">
+                                    <div class="flex gap-2 items-center">
                                         <TelaComboboxIndicator>
                                             <TelaIcon name="i-ph-check-bold" size="14px" color="icon-secondary" />
                                         </TelaComboboxIndicator>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@meistrari/tela-build",
-  "version": "1.57.2",
+  "version": "1.57.3",
   "type": "module",
   "files": [
     "app.config.ts",