@saasmakers/ui 2.0.36 → 2.0.38

package/app/components/bases/BaseEmoji.vue

@@ -29,7 +29,7 @@ function onKeyDown(event: KeyboardEvent) {
 
 <template>
   <span
-    class="flex items-center justify-center transition"
+    class="flex select-none items-center justify-center transition"
     :class="{
       'relative': legend,
       'border base-border': hasBox,
@@ -59,7 +59,8 @@ function onKeyDown(event: KeyboardEvent) {
   >
     <img
       v-if="emoji"
-      class="pointer-events-none block"
+      class="pointer-events-none block select-none"
+      draggable="false"
       :class="{
         'h-2.5 w-2.5': size === '3xs',
         'h-3 w-3': size === '2xs',

package/app/components/fields/FieldSelect.vue

@@ -10,6 +10,7 @@ const props = withDefaults(defineProps<Omit<FieldSelect, 'modelValue'>>(), {
   description: '',
   direction: 'bottom',
   disabled: false,
+  hideCaret: false,
   hideError: false,
   hideLabel: false,
   label: '',
@@ -23,6 +24,7 @@ const props = withDefaults(defineProps<Omit<FieldSelect, 'modelValue'>>(), {
   searchable: false,
   searchPlaceholder: '',
   size: 'base',
+  square: false,
   validation: undefined,
 })
 
@@ -189,7 +191,7 @@ function selectOption(event: MouseEvent, value: string) {
 <template>
   <div
     class="flex flex-col"
-    :class="{ 'w-fit': hideLabel }"
+    :class="{ 'w-fit': hideLabel || square }"
   >
     <FieldLabel
       v-if="label"
@@ -209,14 +211,14 @@ function selectOption(event: MouseEvent, value: string) {
       :class="{
         'field-disabled': disabled,
         'cursor-pointer': !disabled,
-        'w-fit': hideLabel,
+        'w-fit': hideLabel || square,
       }"
     >
       <div
         class="relative"
         :class="{
           'shadow-sm': border === 'full',
-          'w-fit': hideLabel,
+          'w-fit': hideLabel || square,
         }"
       >
         <div
@@ -228,12 +230,15 @@ function selectOption(event: MouseEvent, value: string) {
             'base-border-active': opened,
             'base-border-hover': !opened && !disabled,
             'base-border-interactive-focus-visible': !disabled,
-            '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,
+            'px-3': padding && !hideLabel && !square,
+            'px-2': padding && hideLabel && !square,
+            'inline-flex w-fit gap-1': hideLabel && !square,
+            'justify-center w-10': square && size === 'sm',
+            'justify-center w-12': square && size === 'base',
+            'justify-center w-14': square && size === 'lg',
           }"
           role="button"
           :aria-disabled="disabled"
@@ -249,7 +254,7 @@ function selectOption(event: MouseEvent, value: string) {
             <BaseEmoji
               v-if="selectedOption.emoji"
               class="pointer-events-none shrink-0"
-              :class="{ 'mr-2': !hideLabel }"
+              :class="{ 'mr-2': !hideLabel && !square }"
               :clickable="false"
               :emoji="selectedOption.emoji"
               size="sm"
@@ -258,13 +263,13 @@ function selectOption(event: MouseEvent, value: string) {
             <BaseIcon
               v-else-if="selectedOption.icon"
               class="pointer-events-none"
-              :class="{ 'mr-2': !hideLabel }"
+              :class="{ 'mr-2': !hideLabel && !square }"
               :color="selectedOption.iconColor"
               :icon="selectedOption.icon"
             />
 
             <span
-              v-if="selectedOption.text && !hideLabel"
+              v-if="selectedOption.text && !hideLabel && !square"
               class="flex-1 truncate font-medium"
             >
               {{ selectedOption.text }}
@@ -279,7 +284,7 @@ function selectOption(event: MouseEvent, value: string) {
           </span>
 
           <BaseIcon
-            v-if="caret"
+            v-if="caret && !hideCaret && !square"
             class="flex-initial"
             :class="{
               'ml-2': !hideLabel,

package/app/types/fields.d.ts

@@ -121,6 +121,7 @@ export interface FieldSelect {
   description?: BaseTextText
   direction?: FieldSelectDirection
   disabled?: boolean
+  hideCaret?: boolean
   hideError?: boolean
   hideLabel?: boolean
   label?: BaseTextText
@@ -135,6 +136,7 @@ export interface FieldSelect {
   searchable?: boolean
   searchPlaceholder?: string
   size?: FieldSize
+  square?: boolean
   validation?: VuelidateValidation
 }
 

package/package.json

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