@saasmakers/ui 2.0.32 → 2.0.33

package/app/components/fields/FieldSelect.vue

@@ -11,6 +11,7 @@ const props = withDefaults(defineProps<Omit<FieldSelect, 'modelValue'>>(), {
   direction: 'bottom',
   disabled: false,
   hideError: false,
+  hideLabel: false,
   label: '',
   labelIcon: undefined,
   maxHeight: 'xs',
@@ -186,7 +187,10 @@ function selectOption(event: MouseEvent, value: string) {
 </script>
 
 <template>
-  <div class="flex flex-col">
+  <div
+    class="flex flex-col"
+    :class="{ 'w-fit': hideLabel }"
+  >
     <FieldLabel
       v-if="label"
       :disabled="disabled"
@@ -205,11 +209,15 @@ function selectOption(event: MouseEvent, value: string) {
       :class="{
         'field-disabled': disabled,
         'cursor-pointer': !disabled,
+        'w-fit': hideLabel,
       }"
     >
       <div
         class="relative"
-        :class="{ 'shadow-sm': border === 'full' }"
+        :class="{
+          'shadow-sm': border === 'full',
+          'w-fit': hideLabel,
+        }"
       >
         <div
           class="group flex items-center rounded-lg bg-white outline-none dark:bg-gray-900"
@@ -220,10 +228,12 @@ function selectOption(event: MouseEvent, value: string) {
             'base-border-active': opened,
             'base-border-hover': !opened && !disabled,
             'base-border-interactive-focus-visible': !disabled,
-            'px-3': padding,
+            'px-3': padding && !hideLabel,
+            'px-2': padding && hideLabel,
             'text-xs h-10': size === 'sm',
             'text-sm h-12': size === 'base',
             'text-base h-14': size === 'lg',
+            'inline-flex w-fit gap-1': hideLabel,
           }"
           role="button"
           :aria-disabled="disabled"
@@ -236,14 +246,27 @@ function selectOption(event: MouseEvent, value: string) {
           @focusout="onMouseLeaveOrBlur"
         >
           <template v-if="selectedOption">
+            <BaseEmoji
+              v-if="selectedOption.emoji"
+              class="pointer-events-none shrink-0"
+              :class="{ 'mr-2': !hideLabel }"
+              :clickable="false"
+              :emoji="selectedOption.emoji"
+              size="sm"
+            />
+
             <BaseIcon
-              v-if="selectedOption.icon"
-              class="pointer-events-none mr-2"
+              v-else-if="selectedOption.icon"
+              class="pointer-events-none"
+              :class="{ 'mr-2': !hideLabel }"
               :color="selectedOption.iconColor"
               :icon="selectedOption.icon"
             />
 
-            <span class="flex-1 truncate font-medium">
+            <span
+              v-if="selectedOption.text && !hideLabel"
+              class="flex-1 truncate font-medium"
+            >
               {{ selectedOption.text }}
             </span>
           </template>
@@ -257,8 +280,11 @@ function selectOption(event: MouseEvent, value: string) {
 
           <BaseIcon
             v-if="caret"
-            class="ml-2 flex-initial"
-            :class="{ 'rotate-180': opened }"
+            class="flex-initial"
+            :class="{
+              'ml-2': !hideLabel,
+              'rotate-180': opened,
+            }"
             color="gray"
             :icon="getLayerIcon('arrowDown')"
           />
@@ -276,8 +302,11 @@ function selectOption(event: MouseEvent, value: string) {
           :initial="fadeIn.initial"
         >
           <div
-            class="options min-w-xs overflow-y-auto border base-border-active rounded-lg bg-white text-gray-600 font-medium dark:bg-gray-900 dark:text-gray-400"
+            class="options min-w-xs overflow-y-auto border base-border-active rounded-lg bg-white font-medium dark:bg-gray-900"
             :class="{
+              'text-xs text-gray-600 dark:text-gray-400': size === 'sm',
+              'text-sm text-gray-600 dark:text-gray-400': size === 'base',
+              'text-base text-gray-600 dark:text-gray-400': size === 'lg',
               'md:min-w-xl p-1 pb-0': computedColumns.length >= 2,
               'mt-8': size === 'sm' && !padding && direction === 'bottom',
               'mt-10': ((size === 'sm' && padding) || (size === 'base' && !padding)) && direction === 'bottom',
@@ -349,8 +378,21 @@ function selectOption(event: MouseEvent, value: string) {
                 @keydown.enter.prevent="onOptionKeyDown"
                 @keydown.space.prevent="onOptionKeyDown"
               >
+                <template v-if="option.emoji">
+                  <BaseEmoji
+                    class="pointer-events-none mr-2 shrink-0"
+                    :clickable="false"
+                    :emoji="option.emoji"
+                    size="sm"
+                  />
+
+                  <span class="truncate">
+                    {{ option.text }}
+                  </span>
+                </template>
+
                 <BaseIcon
-                  v-if="option.text"
+                  v-else-if="option.text"
                   class="pointer-events-none mr-2 flex-initial"
                   :color="option.iconColor"
                   :icon="option.icon"

package/app/types/fields.d.ts

@@ -122,6 +122,7 @@ export interface FieldSelect {
   direction?: FieldSelectDirection
   disabled?: boolean
   hideError?: boolean
+  hideLabel?: boolean
   label?: BaseTextText
   labelIcon?: string
   maxHeight?: FieldSelectMaxHeight
@@ -149,6 +150,7 @@ export type FieldSelectDirection = 'bottom' | 'top'
 export type FieldSelectMaxHeight = 'lg' | 'md' | 'sm' | 'xs'
 
 export interface FieldSelectOption {
+  emoji?: string
   icon?: string
   iconColor?: BaseColor
   text: string

package/package.json

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