@meistrari/tela-build 1.50.4 → 1.51.0

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

@@ -5,7 +5,7 @@ import * as MultipleSelectStories from './multiple-select.stories.ts';
 
 # TelaMultipleSelect
 
-A multiple select component that allows users to select multiple options from a dropdown list. Supports search functionality, grouping, icons, custom styling, and two display variants (list and preview). Perfect for selecting multiple items with rich option data.
+A multiple select component that allows users to select multiple options from a dropdown list. Supports search functionality, grouping, icons, custom styling, and three display variants (list, preview, and compact). Perfect for selecting multiple items with rich option data.
 
 ## Examples
 
@@ -132,6 +132,19 @@ Shows selected items inline with a compact display:
 />
 ```
 
+### Compact Variant
+
+Renders only the trigger — no selected-items block above it. Use for toolbar filters, usually with a custom `#trigger` slot showing a selection count:
+
+```vue
+<TelaMultipleSelect
+  v-model="selected"
+  :options="options"
+  variant="compact"
+  allow-search
+/>
+```
+
 ### With Description
 
 ```vue
@@ -206,7 +219,7 @@ type MultipleSelectProps = {
   closeButtonLabel?: string
   closeOnSelect?: boolean
   buttonIcon?: string
-  variant?: 'list' | 'preview'
+  variant?: 'list' | 'preview' | 'compact'
   previewMaxItems?: number
   description?: string
 }

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

@@ -29,9 +29,10 @@ const props = withDefaults(defineProps<{
     closeButtonLabel?: string
     closeOnSelect?: boolean
     buttonIcon?: string
-    variant?: 'list' | 'preview'
+    variant?: 'list' | 'preview' | 'compact'
     previewMaxItems?: number
     description?: string
+    avatarOptions?: boolean
 }>(), {
     maxSelectedDisplay: 10,
     searchPlaceholder: 'Search options...',
@@ -375,7 +376,10 @@ function selectAll() {
                                 <Component :is="option.icon" v-else class="!w-12px !h-12px" />
                             </div>
                             <div v-if="!option.icon && option.externalIconSrc" w-16px h-16px flex items-center justify-center flex-shrink-0>
-                                <img :src="option.externalIconSrc" alt="" w-16px h-16px>
+                                <img :src="option.externalIconSrc" alt="" w-16px h-16px :class="avatarOptions ? 'rounded-full object-cover' : ''">
+                            </div>
+                            <div v-else-if="!option.icon && avatarOptions" w-16px h-16px flex items-center justify-center flex-shrink-0>
+                                <div w-14px h-14px rounded-full bg-gray-200 />
                             </div>
                             <div flex-1 flex items-center justify-start w-full overflow-hidden>
                                 <span :title="option.label" truncate>{{ option.label }}</span>
@@ -626,7 +630,10 @@ function selectAll() {
                                         <Component :is="option.icon" v-else class="!w-24px !h-24px" />
                                     </div>
                                     <div v-if="!option.icon && option.externalIconSrc" mr-12px rounded-4px w-16px h-36px flex items-center justify-center>
-                                        <img :src="option.externalIconSrc" alt="" min-w-18px h-18px>
+                                        <img :src="option.externalIconSrc" alt="" min-w-18px h-18px :class="avatarOptions ? 'rounded-full object-cover' : ''">
+                                    </div>
+                                    <div v-else-if="!option.icon && avatarOptions" mr-12px w-16px h-36px flex items-center justify-center>
+                                        <div min-w-18px h-18px rounded-full bg-gray-200 />
                                     </div>
                                     <div flex="~ col" overflow-hidden>
                                         <p text="gray-900" body-14-medium text-start truncate :title="option.label">
@@ -655,7 +662,7 @@ function selectAll() {
                     <SelectScrollDownButton class="flex items-center justify-center h-25px bg-white text-dark cursor-default">
                         <TelaIcon name="i-ph-caret-down" text="16px" />
                     </SelectScrollDownButton>
-                    <div class="p-8px border-t border-gray-300">
+                    <div class="p-8px" :class="variant === 'compact' ? '' : 'border-t border-gray-300'">
                         <TelaButton variant="secondary" w-full @click="isOpen = false">
                             {{ closeButtonLabel }}
                         </TelaButton>

package/components/tela/star-button.vue

@@ -7,6 +7,7 @@ const props = defineProps<{
     modelValue: boolean
     size?: 'xs' | 'sm' | 'md'
     class?: HTMLAttributes['class']
+    inactiveIconClass?: string
 }>()
 
 const emit = defineEmits<{
@@ -33,7 +34,7 @@ watch(() => props.modelValue, (newValue, oldValue) => {
             color="secondary"
             :size="size"
             :class="cn(modelValue && 'hover:bg-amber-100!', props.class)"
-            :icon-class="cn('relative z-1', modelValue ? 'text-amber-400!' : 'text-neutral-400!')"
+            :icon-class="cn('relative z-1', modelValue ? 'text-amber-400!' : (props.inactiveIconClass ?? 'text-neutral-400!'))"
             @click.stop.prevent="emit('update:modelValue', !modelValue)"
         />
         <div v-if="shouldExplode" absolute pointer-events-none z-0 class="top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2">

package/package.json

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