@meistrari/tela-build 1.54.1 → 1.55.1

package/components/tela/combobox/combobox.mdx

@@ -217,6 +217,7 @@ type ComboboxProps = {
     backgroundClass: string
   }
   compact?: boolean
+  align?: 'start' | 'center' | 'end'
   hasGroupingLabels?: boolean
   colorIcon?: string
   disablePortal?: boolean

package/components/tela/combobox/combobox.stories.ts

@@ -60,6 +60,11 @@ const meta: Meta<typeof Combobox> = {
             control: 'boolean',
             description: 'Whether to use compact spacing and sizing. Defaults to true. When false, uses larger padding and spacing.',
         },
+        align: {
+            control: 'select',
+            options: ['start', 'center', 'end'],
+            description: 'Alignment of the dropdown content against the trigger. Defaults to "start".',
+        },
         hasGroupingLabels: {
             control: 'boolean',
             description: 'Whether to display group labels when options are grouped. Defaults to true. Only shown when search is empty.',

package/components/tela/combobox/combobox.vue

@@ -35,6 +35,7 @@ const props = withDefaults(defineProps<{
         backgroundClass: string
     }
     compact?: boolean
+    align?: 'start' | 'center' | 'end'
     hasGroupingLabels?: boolean
     colorIcon?: string
     disablePortal?: boolean
@@ -63,6 +64,7 @@ const props = withDefaults(defineProps<{
     labelOutputMax?: string
 }>(), {
     compact: true,
+    align: 'start',
     hasGroupingLabels: true,
     disablePortal: false,
     contentClass: '',
@@ -347,7 +349,7 @@ watch(innerValue, (raw) => {
                 </div>
             </TelaComboboxTrigger>
         </TelaComboboxAnchor>
-        <TelaComboboxList :class="cn('z-999', compact ? 'w-440px' : 'w-327px', props.contentClass)" :disable-portal="props.disablePortal" align="start">
+        <TelaComboboxList :class="cn('z-999', compact ? 'w-440px' : 'w-327px', props.contentClass)" :disable-portal="props.disablePortal" :align="align">
             <TelaComboboxInput
                 v-if="hasSearchbar"
                 v-model="search"

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

@@ -285,6 +285,15 @@ function handleDeleteSearchValue() {
     }
 }
 
+function selectAll() {
+    if (selectedValues.value.length === filteredOptions.value.length) {
+        emit('update:modelValue', [])
+    }
+    else {
+        emit('update:modelValue', filteredOptions.value.map(option => option.value))
+    }
+}
+
 function handleSearchKeydown(e: KeyboardEvent) {
     if ((e.metaKey || e.ctrlKey) && e.key === 'Backspace') {
         e.preventDefault()
@@ -473,6 +482,16 @@ function handleSearchKeydown(e: KeyboardEvent) {
                         >
                     </div>
 
+                    <div v-if="filteredOptions.length > 0" flex items-center justify-between pl-10px pr-10px py-4px border-b="0.5px border">
+                        <span body-12-semibold text-gray-700>{{ t('common.itemCount', { count: filteredOptions.length }) }}</span>
+
+                        <TelaButton variant="ghost" size="sm" class="rounded-lg" @click="selectAll">
+                            <span body-12-regular text-gray-900 underline>
+                                {{ selectedValues.length !== filteredOptions.length ? t('common.selectAll') : t('common.clearAll') }}
+                            </span>
+                        </TelaButton>
+                    </div>
+
                     <SelectViewport class="p-4px" w-full>
                         <div
                             v-if="!hasAvailableOptions"
@@ -543,6 +562,14 @@ function handleSearchKeydown(e: KeyboardEvent) {
                                     "
                                     @click="toggleSelection(option.value)"
                                 >
+                                    <TelaCheckbox
+                                        :model-value="isSelected(option.value)"
+                                        :disabled="readOnly"
+                                        cursor-pointer
+                                        mr-12px
+                                        min-w-16px
+                                        pointer-events-none
+                                    />
                                     <div
                                         v-if="option.icon" mr-12px rounded-4px w-40px h-40px flex items-center justify-center
                                         b="0.5px gray-200"
@@ -568,9 +595,6 @@ function handleSearchKeydown(e: KeyboardEvent) {
                                         </span>
                                     </div>
                                     <div flex-auto />
-                                    <span v-if="isSelected(option.value)" class="relative flex h-3.5 w-3.5 items-center justify-center">
-                                        <TelaIcon name="i-ph-check" size="14px" color="gray-500" />
-                                    </span>
                                 </button>
                             </SelectItem>
                         </SelectGroup>

package/package.json

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