@saasmakers/ui 2.0.44 → 2.0.45

package/app/components/fields/FieldSelect.vue

@@ -100,6 +100,19 @@ const selectedOption = computed(() => {
   })
 })
 
+const textSize = computed<BaseSize>(() => {
+  switch (props.size) {
+    case 'base':
+      return 'sm'
+    case 'lg':
+      return 'base'
+    case 'sm':
+      return 'xs'
+    default:
+      return 'sm'
+  }
+})
+
 watch(opened, (isOpened) => {
   if (isOpened && props.searchable) {
     nextTick(() => {
@@ -266,6 +279,7 @@ function selectOption(event: MouseEvent, value: string) {
               :class="{ 'mr-2': !hideLabel && !square }"
               :color="selectedOption.iconColor"
               :icon="selectedOption.icon"
+              :size="textSize"
             />
 
             <span
@@ -351,7 +365,7 @@ function selectOption(event: MouseEvent, value: string) {
                 class="pointer-events-none"
                 color="gray"
                 :icon="getLayerIcon('infoCircle')"
-                :size="size"
+                :size="textSize"
                 :text="t('noResults')"
               />
             </div>
@@ -371,7 +385,10 @@ function selectOption(event: MouseEvent, value: string) {
                 :key="option.value"
                 class="flex cursor-pointer items-center outline-none"
                 :class="{
-                  'base-border-b p-3 hover:bg-gray-100 dark:hover:bg-gray-800 last:border-b-0': computedColumns.length < 2,
+                  'base-border-b px-3 hover:bg-gray-100 dark:hover:bg-gray-800 last:border-b-0': computedColumns.length < 2,
+                  'h-10': size === 'sm' && computedColumns.length < 2,
+                  'h-12': size === 'base' && computedColumns.length < 2,
+                  'h-14': size === 'lg' && computedColumns.length < 2,
                   'px-2 py-1 hover:bg-gray-100 dark:hover:bg-gray-800 last:mb-2': computedColumns.length >= 2,
                   'font-medium underline': option.value === selectedOption?.value,
                   'text-gray-900 dark:text-gray-100': option.value === selectedOption?.value,
@@ -401,7 +418,7 @@ function selectOption(event: MouseEvent, value: string) {
                   class="pointer-events-none mr-2 flex-initial"
                   :color="option.iconColor"
                   :icon="option.icon"
-                  :size="size"
+                  :size="textSize"
                   :text="option.text"
                 />
               </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saasmakers/ui",
-  "version": "2.0.44",
+  "version": "2.0.45",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "license": "MIT",