@saasmakers/ui 2.0.37 → 2.0.39

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,8 +10,8 @@ const props = withDefaults(defineProps<Omit<FieldSelect, 'modelValue'>>(), {
   description: '',
   direction: 'bottom',
   disabled: false,
-  hideError: false,
   hideCaret: false,
+  hideError: false,
   hideLabel: false,
   label: '',
   labelIcon: undefined,
@@ -24,6 +24,7 @@ const props = withDefaults(defineProps<Omit<FieldSelect, 'modelValue'>>(), {
   searchable: false,
   searchPlaceholder: '',
   size: 'base',
+  square: false,
   validation: undefined,
 })
 
@@ -190,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"
@@ -210,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
@@ -229,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"
@@ -250,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"
@@ -259,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 }}
@@ -280,7 +284,7 @@ function selectOption(event: MouseEvent, value: string) {
           </span>
 
           <BaseIcon
-            v-if="caret && !hideCaret"
+            v-if="caret && !hideCaret && !square"
             class="flex-initial"
             :class="{
               'ml-2': !hideLabel,

package/app/components/layout/LayoutBottomSheet.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { LayoutBottomSheet } from '../../types/layout'
 
-withDefaults(defineProps<LayoutBottomSheet>(), { ariaLabel: undefined })
+const props = withDefaults(defineProps<LayoutBottomSheet>(), { 'aria-label': undefined })
 
 defineSlots<{
   default?: () => VNode[]
@@ -199,7 +199,7 @@ watch(visible, (isVisible) => {
         <div
           v-if="visible"
           ref="panelRef"
-          :aria-label="ariaLabel"
+          :aria-label="props['aria-label']"
           aria-modal="true"
           class="layout-bottom-sheet fixed bottom-0 left-0 right-0 z-[60] mx-auto max-h-[85dvh] max-w-screen-md flex flex-col rounded-t-2xl bg-white text-gray-900 app-text shadow-lg outline-none safe-bottom dark:bg-gray-900 dark:text-gray-100"
           :class="{

package/app/components/layout/LayoutModal.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
 import type { LayoutModal } from '../../types/layout'
 
-withDefaults(defineProps<LayoutModal>(), { ariaLabel: undefined })
+const props = withDefaults(defineProps<LayoutModal>(), { 'aria-label': undefined })
 
 defineSlots<{
   default?: () => VNode[]
@@ -39,7 +39,7 @@ function onClose() {
         >
           <div
             ref="panelRef"
-            :aria-label="ariaLabel"
+            :aria-label="props['aria-label']"
             aria-modal="true"
             class="scroll-y-stable pointer-events-auto max-h-[85dvh] max-w-md w-full rounded-2xl bg-white p-5 text-gray-900 app-text shadow-lg outline-none dark:bg-gray-900 dark:text-gray-100"
             role="dialog"

package/app/types/fields.d.ts

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

package/app/types/layout.d.ts

@@ -11,9 +11,9 @@ export interface LayoutBackdrop {
 }
 
 export interface LayoutBottomSheet {
-  ariaLabel?: string
+  'aria-label'?: string
 }
 
 export interface LayoutModal {
-  ariaLabel?: string
+  'aria-label'?: string
 }

package/package.json

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