@weni/unnnic-system 3.12.3-alpha.5 → 3.12.3-alpha.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@weni/unnnic-system",
-  "version": "3.12.3-alpha.5",
+  "version": "3.12.3-alpha.6",
   "type": "commonjs",
   "files": [
     "dist",

package/src/components/FormElement/FormElement.vue

@@ -18,8 +18,8 @@
     <slot></slot>
 
     <section
-      class="unnnic-form-element__hints-container"
       v-if="message || error || !!$slots.rightMessage"
+      class="unnnic-form-element__hints-container"
     >
       <section class="unnnic-form-element__message-container">
         <p

package/src/components/ModalDialog/ModalDialog.vue

@@ -102,8 +102,8 @@ export default {
     UnnnicDialogTitle,
     UnnnicDialogFooter,
   },
-  inheritAttrs: false,
   mixins: [UnnnicI18n],
+  inheritAttrs: false,
   props: {
     modelValue: {
       type: Boolean,

package/src/components/MultiSelect/__tests__/MultiSelect.spec.js

@@ -282,19 +282,20 @@ describe('UnnnicMultiSelect.vue', () => {
 
   describe('computed properties', () => {
     test('calculatedMaxHeight returns correct value', () => {
-      const maxHeight = wrapper.vm.calculatedMaxHeight;
+      const maxHeight = wrapper.vm.calculatedPopoverHeight;
+      console.log(maxHeight);
       expect(maxHeight).toBe('228px');
     });
 
     test('calculatedMaxHeight includes search height when enabled', async () => {
       await wrapper.setProps({ enableSearch: true });
-      const maxHeight = wrapper.vm.calculatedMaxHeight;
+      const maxHeight = wrapper.vm.calculatedPopoverHeight;
       expect(maxHeight).toBe('295px');
     });
 
     test('calculatedMaxHeight returns unset when no options', async () => {
       await wrapper.setProps({ options: [] });
-      const maxHeight = wrapper.vm.calculatedMaxHeight;
+      const maxHeight = wrapper.vm.calculatedPopoverHeight;
       expect(maxHeight).toBe('unset');
     });
 
@@ -458,7 +459,7 @@ describe('UnnnicMultiSelect.vue', () => {
     test('handles empty options array', async () => {
       await wrapper.setProps({ options: [] });
       expect(wrapper.vm.filteredOptions).toEqual([]);
-      expect(wrapper.vm.calculatedMaxHeight).toBe('unset');
+      expect(wrapper.vm.calculatedPopoverHeight).toBe('unset');
     });
 
     test('handles empty modelValue array', async () => {

package/src/components/MultiSelect/__tests__/__snapshots__/MultiSelect.spec.js.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`UnnnicMultiSelect.vue > snapshot testing > matches snapshot with default props 1`] = `
-"<div data-v-03c7fb50="" class="unnnic-multi-select"><button data-v-9d52eef8="" data-v-03c7fb50="" class="unnnic-popover-trigger" id="reka-popover-trigger-v-0" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="" data-state="closed">
+"<div data-v-03c7fb50="" class="unnnic-multi-select"><button data-v-9d52eef8="" data-v-03c7fb50="" class="unnnic-popover-trigger w-full" id="reka-popover-trigger-v-0" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="" data-state="closed">
     <section data-v-9f8d6c86="" data-v-d890ad85="" data-v-03c7fb50="" class="unnnic-form-element unnnic-form md unnnic-multi-select__input" data-testid="form-element">
       <!--v-if-->
       <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-multi-select__input unnnic-form-input" hascloudycolor="false" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-multi-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right use-focus-prop unnnic-multi-select__input unnnic-form-input input-itself" hascloudycolor="false" placeholder="" iconleft="" iconright="keyboard_arrow_down" iconleftclickable="false" iconrightclickable="false" showclear="false" type="text" readonly="" value="">
@@ -19,7 +19,7 @@ exports[`UnnnicMultiSelect.vue > snapshot testing > matches snapshot with defaul
 `;
 
 exports[`UnnnicMultiSelect.vue > snapshot testing > matches snapshot with disabled state 1`] = `
-"<div data-v-03c7fb50="" class="unnnic-multi-select"><button data-v-9d52eef8="" data-v-03c7fb50="" class="unnnic-popover-trigger" id="reka-popover-trigger-v-0" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="" data-state="closed">
+"<div data-v-03c7fb50="" class="unnnic-multi-select"><button data-v-9d52eef8="" data-v-03c7fb50="" class="unnnic-popover-trigger w-full" id="reka-popover-trigger-v-0" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="" data-state="closed">
     <section data-v-9f8d6c86="" data-v-d890ad85="" data-v-03c7fb50="" class="unnnic-form-element unnnic-form-element--disabled unnnic-form md unnnic-multi-select__input" data-testid="form-element">
       <!--v-if-->
       <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-multi-select__input unnnic-form-input" hascloudycolor="false" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-multi-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right use-focus-prop unnnic-multi-select__input unnnic-form-input input-itself" hascloudycolor="false" placeholder="" iconleft="" iconright="keyboard_arrow_down" iconleftclickable="false" iconrightclickable="false" showclear="false" type="text" readonly="" value="" disabled="">
@@ -37,7 +37,7 @@ exports[`UnnnicMultiSelect.vue > snapshot testing > matches snapshot with disabl
 `;
 
 exports[`UnnnicMultiSelect.vue > snapshot testing > matches snapshot with multiple selected values 1`] = `
-"<div data-v-03c7fb50="" class="unnnic-multi-select"><button data-v-9d52eef8="" data-v-03c7fb50="" class="unnnic-popover-trigger" id="reka-popover-trigger-v-0" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="" data-state="closed">
+"<div data-v-03c7fb50="" class="unnnic-multi-select"><button data-v-9d52eef8="" data-v-03c7fb50="" class="unnnic-popover-trigger w-full" id="reka-popover-trigger-v-0" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="" data-state="closed">
     <section data-v-9f8d6c86="" data-v-d890ad85="" data-v-03c7fb50="" class="unnnic-form-element unnnic-form md unnnic-multi-select__input" data-testid="form-element">
       <!--v-if-->
       <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-multi-select__input unnnic-form-input" hascloudycolor="false" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-multi-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right input--has-clear-icon use-focus-prop unnnic-multi-select__input unnnic-form-input input-itself" hascloudycolor="false" placeholder="" iconleft="" iconright="keyboard_arrow_down" iconleftclickable="false" iconrightclickable="false" showclear="true" type="text" readonly="" value="Option 1, Option 2">
@@ -53,7 +53,7 @@ exports[`UnnnicMultiSelect.vue > snapshot testing > matches snapshot with multip
 `;
 
 exports[`UnnnicMultiSelect.vue > snapshot testing > matches snapshot with search enabled 1`] = `
-"<div data-v-03c7fb50="" class="unnnic-multi-select"><button data-v-9d52eef8="" data-v-03c7fb50="" class="unnnic-popover-trigger" id="reka-popover-trigger-v-0" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="" data-state="closed">
+"<div data-v-03c7fb50="" class="unnnic-multi-select"><button data-v-9d52eef8="" data-v-03c7fb50="" class="unnnic-popover-trigger w-full" id="reka-popover-trigger-v-0" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="" data-state="closed">
     <section data-v-9f8d6c86="" data-v-d890ad85="" data-v-03c7fb50="" class="unnnic-form-element unnnic-form md unnnic-multi-select__input" data-testid="form-element">
       <!--v-if-->
       <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-multi-select__input unnnic-form-input" hascloudycolor="false" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-multi-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right use-focus-prop unnnic-multi-select__input unnnic-form-input input-itself" hascloudycolor="false" placeholder="" iconleft="" iconright="keyboard_arrow_down" iconleftclickable="false" iconrightclickable="false" showclear="false" type="text" readonly="" value="">
@@ -71,7 +71,7 @@ exports[`UnnnicMultiSelect.vue > snapshot testing > matches snapshot with search
 `;
 
 exports[`UnnnicMultiSelect.vue > snapshot testing > matches snapshot with selected values 1`] = `
-"<div data-v-03c7fb50="" class="unnnic-multi-select"><button data-v-9d52eef8="" data-v-03c7fb50="" class="unnnic-popover-trigger" id="reka-popover-trigger-v-0" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="" data-state="closed">
+"<div data-v-03c7fb50="" class="unnnic-multi-select"><button data-v-9d52eef8="" data-v-03c7fb50="" class="unnnic-popover-trigger w-full" id="reka-popover-trigger-v-0" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="" data-state="closed">
     <section data-v-9f8d6c86="" data-v-d890ad85="" data-v-03c7fb50="" class="unnnic-form-element unnnic-form md unnnic-multi-select__input" data-testid="form-element">
       <!--v-if-->
       <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-multi-select__input unnnic-form-input" hascloudycolor="false" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-multi-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right input--has-clear-icon use-focus-prop unnnic-multi-select__input unnnic-form-input input-itself" hascloudycolor="false" placeholder="" iconleft="" iconright="keyboard_arrow_down" iconleftclickable="false" iconrightclickable="false" showclear="true" type="text" readonly="" value="Option 1">

package/src/components/MultiSelect/index.vue

@@ -4,8 +4,9 @@
       :open="openPopover"
       @update:open="openPopover = $event"
     >
-      <PopoverTrigger>
+      <PopoverTrigger class="w-full">
         <UnnnicInput
+          ref="multiSelectInputRef"
           :modelValue="inputValue"
           class="unnnic-multi-select__input"
           readonly
@@ -24,7 +25,9 @@
       </PopoverTrigger>
       <PopoverContent
         align="start"
-        :style="{ maxHeight: calculatedMaxHeight, overflow: 'auto' }"
+        class="h-full"
+        :style="popoverContentCustomStyles"
+        :width="inputWidthString"
       >
         <div class="unnnic-multi-select__content">
           <UnnnicInput
@@ -35,6 +38,12 @@
             iconLeft="search"
             @update:model-value="handleSearch"
           />
+          <p
+            v-if="filteredOptions.length === 0"
+            class="unnnic-multi-select__content-no-results"
+          >
+            {{ $t('without_results') }}
+          </p>
           <div class="unnnic-multi-select__options">
             <UnnnicMultiSelectOption
               v-for="(option, index) in filteredOptions"
@@ -59,6 +68,7 @@ import { computed, ref } from 'vue';
 import { Popover, PopoverTrigger, PopoverContent } from '../ui/popover';
 import UnnnicInput from '../Input/Input.vue';
 import UnnnicMultiSelectOption from './MultSelectOption.vue';
+import { useElementSize } from '@vueuse/core';
 
 defineOptions({
   name: 'UnnnicMultiSelect',
@@ -103,8 +113,26 @@ const props = withDefaults(defineProps<MultiSelectProps>(), {
 });
 
 const openPopover = ref(false);
+const multiSelectInputRef = ref<HTMLInputElement | null>(null);
+const { width: inputWidth } = useElementSize(multiSelectInputRef);
 
-const calculatedMaxHeight = computed(() => {
+const inputWidthString = computed(() => {
+  return `${inputWidth.value}px`;
+});
+
+const popoverContentCustomStyles = computed(() => {
+  const emptyFilteredOptions = filteredOptions.value?.length === 0;
+  return {
+    overflow: 'auto',
+    display: 'flex',
+    flexDirection: 'column',
+    minHeight: calculatedPopoverHeight.value,
+    maxHeight: emptyFilteredOptions ? 'unset' : calculatedPopoverHeight.value,
+    height: emptyFilteredOptions ? calculatedPopoverHeight.value : 'unset',
+  };
+});
+
+const calculatedPopoverHeight = computed(() => {
   if (!props.options || props.options.length === 0) return 'unset';
   const popoverSearchGap = props.enableSearch ? 16 : 0;
   const popoverGap = 24;
@@ -212,6 +240,18 @@ const handleSelectOption = (
     padding: 0;
     margin: 0;
     gap: $unnnic-space-4;
+
+    height: -webkit-fill-available;
+
+    &-no-results {
+      margin: 0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      height: 100%;
+      font: $unnnic-font-emphasis;
+      color: $unnnic-color-fg-muted;
+    }
   }
 
   &__options {

package/src/components/Radio/Radio.vue

@@ -12,9 +12,9 @@
         type="radio"
         :disabled="disabled"
         :checked="computedModelValue === value"
-        @change="click"
         :name="computedName"
         v-bind="pick($attrs, ['id'])"
+        @change="click"
       />
 
       <p

package/src/components/Select/__tests__/__snapshots__/Select.spec.js.snap

@@ -1,7 +1,7 @@
 // Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 
 exports[`UnnnicSelect.vue > snapshot testing > matches snapshot with default props 1`] = `
-"<div data-v-6077efb7="" class="unnnic-select"><button data-v-9d52eef8="" data-v-6077efb7="" class="unnnic-popover-trigger" id="reka-popover-trigger-v-0" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="" data-state="closed">
+"<div data-v-6077efb7="" class="unnnic-select"><button data-v-9d52eef8="" data-v-6077efb7="" class="unnnic-popover-trigger w-full" id="reka-popover-trigger-v-0" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="" data-state="closed">
     <section data-v-9f8d6c86="" data-v-d890ad85="" data-v-6077efb7="" class="unnnic-form-element unnnic-form md unnnic-select__input" data-testid="form-element">
       <!--v-if-->
       <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-select__input unnnic-form-input" hascloudycolor="false" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right use-focus-prop unnnic-select__input unnnic-form-input input-itself" hascloudycolor="false" placeholder="" iconleft="" iconright="keyboard_arrow_down" iconleftclickable="false" iconrightclickable="false" showclear="false" type="text" readonly="" value="">
@@ -19,7 +19,7 @@ exports[`UnnnicSelect.vue > snapshot testing > matches snapshot with default pro
 `;
 
 exports[`UnnnicSelect.vue > snapshot testing > matches snapshot with disabled state 1`] = `
-"<div data-v-6077efb7="" class="unnnic-select"><button data-v-9d52eef8="" data-v-6077efb7="" class="unnnic-popover-trigger" id="reka-popover-trigger-v-0" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="" data-state="closed">
+"<div data-v-6077efb7="" class="unnnic-select"><button data-v-9d52eef8="" data-v-6077efb7="" class="unnnic-popover-trigger w-full" id="reka-popover-trigger-v-0" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="" data-state="closed">
     <section data-v-9f8d6c86="" data-v-d890ad85="" data-v-6077efb7="" class="unnnic-form-element unnnic-form-element--disabled unnnic-form md unnnic-select__input" data-testid="form-element">
       <!--v-if-->
       <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-select__input unnnic-form-input" hascloudycolor="false" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right use-focus-prop unnnic-select__input unnnic-form-input input-itself" hascloudycolor="false" placeholder="" iconleft="" iconright="keyboard_arrow_down" iconleftclickable="false" iconrightclickable="false" showclear="false" type="text" readonly="" value="" disabled="">
@@ -37,7 +37,7 @@ exports[`UnnnicSelect.vue > snapshot testing > matches snapshot with disabled st
 `;
 
 exports[`UnnnicSelect.vue > snapshot testing > matches snapshot with search enabled 1`] = `
-"<div data-v-6077efb7="" class="unnnic-select"><button data-v-9d52eef8="" data-v-6077efb7="" class="unnnic-popover-trigger" id="reka-popover-trigger-v-0" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="" data-state="closed">
+"<div data-v-6077efb7="" class="unnnic-select"><button data-v-9d52eef8="" data-v-6077efb7="" class="unnnic-popover-trigger w-full" id="reka-popover-trigger-v-0" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="" data-state="closed">
     <section data-v-9f8d6c86="" data-v-d890ad85="" data-v-6077efb7="" class="unnnic-form-element unnnic-form md unnnic-select__input" data-testid="form-element">
       <!--v-if-->
       <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-select__input unnnic-form-input" hascloudycolor="false" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right use-focus-prop unnnic-select__input unnnic-form-input input-itself" hascloudycolor="false" placeholder="" iconleft="" iconright="keyboard_arrow_down" iconleftclickable="false" iconrightclickable="false" showclear="false" type="text" readonly="" value="">
@@ -55,7 +55,7 @@ exports[`UnnnicSelect.vue > snapshot testing > matches snapshot with search enab
 `;
 
 exports[`UnnnicSelect.vue > snapshot testing > matches snapshot with selected value 1`] = `
-"<div data-v-6077efb7="" class="unnnic-select"><button data-v-9d52eef8="" data-v-6077efb7="" class="unnnic-popover-trigger" id="reka-popover-trigger-v-0" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="" data-state="closed">
+"<div data-v-6077efb7="" class="unnnic-select"><button data-v-9d52eef8="" data-v-6077efb7="" class="unnnic-popover-trigger w-full" id="reka-popover-trigger-v-0" type="button" aria-haspopup="dialog" aria-expanded="false" aria-controls="" data-state="closed">
     <section data-v-9f8d6c86="" data-v-d890ad85="" data-v-6077efb7="" class="unnnic-form-element unnnic-form md unnnic-select__input" data-testid="form-element">
       <!--v-if-->
       <div data-v-a0d36167="" data-v-d890ad85="" class="text-input size--md unnnic-select__input unnnic-form-input" hascloudycolor="false" mask=""><input data-v-86533b41="" data-v-a0d36167="" class="unnnic-select__input unnnic-form-input input-itself input size-md normal input--has-icon-right input--has-clear-icon use-focus-prop unnnic-select__input unnnic-form-input input-itself" hascloudycolor="false" placeholder="" iconleft="" iconright="keyboard_arrow_down" iconleftclickable="false" iconrightclickable="false" showclear="true" type="text" readonly="" value="Option 1">

package/src/components/Select/index.vue

@@ -7,8 +7,9 @@
       :open="openPopover"
       @update:open="openPopover = $event"
     >
-      <PopoverTrigger>
+      <PopoverTrigger class="w-full">
         <UnnnicInput
+          ref="selectInputRef"
           :modelValue="inputValue"
           class="unnnic-select__input"
           readonly
@@ -29,6 +30,7 @@
         align="start"
         :class="'h-full'"
         :style="popoverContentCustomStyles"
+        :width="inputWidthString"
       >
         <div class="unnnic-select__content">
           <UnnnicInput
@@ -67,6 +69,8 @@
 
 <script setup lang="ts">
 import { computed, ref, watch, nextTick } from 'vue';
+import { useElementSize } from '@vueuse/core';
+
 import UnnnicInput from '../Input/Input.vue';
 
 import {
@@ -128,6 +132,12 @@ const emit = defineEmits<{
 }>();
 
 const openPopover = ref(false);
+const selectInputRef = ref<HTMLInputElement | null>(null);
+const { width: inputWidth } = useElementSize(selectInputRef);
+
+const inputWidthString = computed(() => {
+  return `${inputWidth.value}px`;
+});
 
 watch(openPopover, () => {
   if (!openPopover.value) {

package/src/components/Switch/Switch.vue

@@ -19,8 +19,8 @@
         type="checkbox"
         :disabled="disabled"
         :checked="modelValue"
-        @change="toggleState"
         v-bind="pick($attrs, ['id', 'name'])"
+        @change="toggleState"
       />
 
       <p

package/src/components/TemplatePreview/TemplatePreview.vue

@@ -13,11 +13,11 @@
         }`"
       >
         <img
-          class="unnnic-template-preview__header__media__preview"
           v-if="
             template?.header.type === 'MEDIA' &&
             template?.header.mediaType === 'IMAGE'
           "
+          class="unnnic-template-preview__header__media__preview"
           :src="template.header.src || imagePreview"
         />
         <template
@@ -50,8 +50,8 @@
           />
         </template>
         <h1
-          class="unnnic-template-preview__header__text__preview"
           v-else-if="template?.header.type === 'TEXT'"
+          class="unnnic-template-preview__header__text__preview"
         >
           {{ template.header.text }}
         </h1>

package/src/components/TemplatePreview/TemplatePreviewModal.vue

@@ -1,10 +1,10 @@
 <template>
   <UnnnicModalDialog
     :modelValue="modelValue"
-    @update:modelValue="$event === false && $emit('close')"
     :title="defaultTranslations.title[props.locale]"
     :showCloseIcon="true"
     class="unnnic-template-preview-modal"
+    @update:model-value="$event === false && $emit('close')"
   >
     <UnnnicTemplatePreview :template="template" />
   </UnnnicModalDialog>

package/src/components/ToolTip/ToolTip.vue

@@ -17,8 +17,8 @@
       <template v-if="enableHtml">
         <!-- eslint-disable-next-line vue/no-v-html -->
         <section
-          v-html="text"
           data-testid="tooltip-html-content"
+          v-html="text"
         ></section>
       </template>
       <template

package/src/components/ui/popover/PopoverContent.vue

@@ -2,14 +2,13 @@
   <PopoverPortal>
     <PopoverContent
       v-bind="{ ...forwarded, ...$attrs }"
+      :style="{ width: contentWidth, zIndex: popoverZIndex }"
       :class="
         cn(
           'unnnic-popover',
-          `unnnic-popover--size-${props.size}`,
           'bg-popover text-popover-foreground outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
         )
       "
-      :style="{ zIndex: popoverZIndex }"
     >
       <section :class="`unnnic-popover__content ${props.class || ''}`">
         <component
@@ -45,7 +44,8 @@ const props = withDefaults(
   defineProps<
     PopoverContentProps & {
       class?: HTMLAttributes['class'];
-      size?: 'small' | 'medium' | 'large';
+      size?: string;
+      width?: string;
     }
   >(),
   {
@@ -53,6 +53,7 @@ const props = withDefaults(
     sideOffset: 4,
     size: 'medium',
     class: '',
+    width: '',
   },
 );
 const emits = defineEmits<PopoverContentEmits>();
@@ -83,6 +84,18 @@ const footerChildren = computed(() => {
     (vnode: VNode) => getComponentName(vnode) === 'UnnnicPopoverFooter',
   );
 });
+
+const contentWidth = computed(() => {
+  if (props.width) return props.width;
+
+  const sizes = {
+    small: '240px',
+    medium: '320px',
+    large: '400px',
+  };
+
+  return sizes[props.size as keyof typeof sizes];
+});
 </script>
 
 <style lang="scss">
@@ -109,16 +122,6 @@ $popover-space: $unnnic-space-4;
     border-radius: $unnnic-border-radius-pill;
   }
 
-  &--size-small {
-    width: 240px;
-  }
-  &--size-medium {
-    width: 320px;
-  }
-  &--size-large {
-    width: 400px;
-  }
-
   &__content {
     padding: $popover-space;
   }

package/src/components/ui/popover/PopoverOption.vue

@@ -76,7 +76,7 @@ const schemeColor = computed(() => {
 .unnnic-popover-option {
   cursor: pointer;
   border-radius: $unnnic-radius-2;
-  padding: $unnnic-space-2;
+  padding: $unnnic-space-2 $unnnic-space-4;
   font: $unnnic-font-emphasis;
   display: flex;
   gap: $unnnic-space-2;

package/src/stories/MultiSelect.stories.js

@@ -97,8 +97,10 @@ export default {
       };
     },
     template: `
-      <p>modelValue: {{ exampleValue }}</p>
-      <unnnic-multi-select v-model="exampleValue" v-bind="args" @update:search="handleSearch" />
+      <div style="width: 300px;">
+        <p>modelValue: {{ exampleValue }}</p>
+        <unnnic-multi-select v-model="exampleValue" v-bind="args" @update:search="handleSearch" />
+      </div>
     `,
   }),
 };

package/src/stories/Popover.stories.js

@@ -26,6 +26,11 @@ export default {
     },
   },
   argTypes: {
+    width: {
+      control: { type: 'text' },
+      description:
+        'The width of the popover. This overrides the size prop. If not provided, the size prop will be used.',
+    },
     size: {
       control: { type: 'select' },
       options: ['small', 'medium', 'large'],

package/src/stories/Select.stories.js

@@ -97,8 +97,11 @@ export default {
       };
     },
     template: `
-      <p>modelValue: {{ exampleValue }}</p>
-      <unnnic-select v-model="exampleValue" v-bind="args" @update:search="handleSearch" />
+      <div style="width: 300px;">
+        <p>modelValue: {{ exampleValue }}</p>
+        <unnnic-select v-model="exampleValue" v-bind="args" @update:search="handleSearch" />
+      </div>
+      
     `,
   }),
 };