@meistrari/tela-build 1.57.1 → 1.57.3

package/components/tela/button/button.vue

@@ -49,7 +49,7 @@ const variantStyle = computed(() => (({
         focus-visible:ring-0.5px focus-visible:ring-cyan-600
     `,
     'secondary': fold`
-        bg-btn-secondary text-contrast border border-0.5px
+        bg-btn-secondary text-contrast border border-[0.5px]
       [box-shadow:0_1px_6px_0_rgba(103,127,148,0.05)]
         hover:bg-btn-secondary-hover hover:border-strong
         active:bg-btn-secondary-active active:border-neutral-400/60
@@ -72,12 +72,12 @@ const variantStyle = computed(() => (({
         focus:outline-red-600
     `,
     'ghost-danger': fold`
-        bg-transparent border-0.5px border-transparent text-red-600
+        bg-transparent border-[0.5px] border-transparent text-red-600
         hover:bg-red-50 hover:text-red-700
         focus:outline-red-600
     `,
     'dark': fold`
-        bg-btn-dark text-white border-0.5px border-white/16
+        bg-btn-dark text-white border-[0.5px] border-white/16
         hover:bg-btn-dark-hover active:bg-btn-dark-active
         focus-visible:ring-0.5px focus-visible:ring-cyan-600
     `,

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/components/tela/segment-toggle/segment-toggle.vue

@@ -87,7 +87,7 @@ onBeforeUnmount(() => {
 <template>
     <div
         ref="wrapperRef"
-        relative rounded-full select-none p-2px min-w-68px bg-muted
+        relative rounded-full select-none p-2px min-w-68px bg-lowered
         :class="[
             props.size === 'small' ? 'min-h-24px' : 'min-h-28px',
             props.disabled && 'opacity-50 pointer-events-none cursor-not-allowed',
@@ -105,7 +105,7 @@ onBeforeUnmount(() => {
                 :disabled="props.disabled"
                 @click="selectTab(option.value)"
             >
-                <span text-tertiary>{{ option.label }}</span>
+                <span text-secondary>{{ option.label }}</span>
             </button>
         </div>
 

package/package.json

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