@saasmakers/ui 0.1.98 → 0.1.100

package/app/components/fields/FieldCheckbox.vue

@@ -33,8 +33,9 @@ const uuid = ref(`${Math.floor((1 + Math.random()) * 0x100000)}`)
         v-if="!loading"
         :id="uuid"
         v-model="modelValue"
-        class="cursor-pointer border border-gray-300 rounded-lg accent-indigo-700 transition-shadow flex-initial dark:border-gray-700 focus:border-gray-500 hover:border-gray-400 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-indigo-500/40 dark:focus:border-gray-500 dark:hover:border-gray-600"
+        class="border border-gray-300 rounded-lg accent-indigo-700 transition-shadow flex-initial dark:border-gray-700"
         :class="{
+          'cursor-pointer hover:border-gray-400 dark:hover:border-gray-600 focus:border-gray-500 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-indigo-500/40 dark:focus:border-gray-500': !disabled,
           'field-disabled': disabled,
           'h-3.5 w-3.5': size === 'xs',
           'h-4 w-4': size === 'sm',

package/app/components/fields/FieldEmojis.vue

@@ -3,7 +3,7 @@ import type { FieldEmojis } from '../../types/fields'
 import { emojis } from '@saasmakers/shared'
 import { refDebounced } from '@vueuse/core'
 
-withDefaults(defineProps<Omit<FieldEmojis, 'modelValue'>>(), { disabled: false })
+const props = withDefaults(defineProps<Omit<FieldEmojis, 'modelValue'>>(), { disabled: false })
 
 const emit = defineEmits<{
   click: [event: MouseEvent, emoji: string]
@@ -43,8 +43,11 @@ const emojisFiltered = computed(() => {
 })
 
 function onEmojiClick(event: MouseEvent, emoji?: string) {
-  emit('click', event, emoji || '')
-  modelValue.value = emoji || ''
+  if (!props.disabled) {
+    emit('click', event, emoji || '')
+
+    modelValue.value = emoji || ''
+  }
 }
 </script>
 
@@ -55,7 +58,7 @@ function onEmojiClick(event: MouseEvent, emoji?: string) {
   >
     <FieldInput
       v-model="searchRaw"
-      autofocus
+      :disabled="disabled"
       :placeholder="t('searchEmoji')"
       size="sm"
     />
@@ -80,8 +83,9 @@ function onEmojiClick(event: MouseEvent, emoji?: string) {
               <BaseEmoji
                 v-for="emoji in category.emojis"
                 :key="emoji.id"
-                class="rounded-lg p-1.5 hover:bg-gray-200 dark:hover:bg-gray-800"
-                clickable
+                class="rounded-lg p-1.5"
+                :class="{ 'hover:bg-gray-200 dark:hover:bg-gray-800': !disabled }"
+                :clickable="!disabled"
                 :emoji="emoji.id"
                 size="xl"
                 @click="onEmojiClick"

package/app/components/fields/FieldInput.vue

@@ -151,9 +151,10 @@ defineExpose({ focus })
         :id="uuid"
         ref="input"
         :autocomplete="autocomplete ? 'on' : 'off'"
-        class="h-full w-full flex-1 appearance-none items-center rounded-lg outline-none placeholder-gray-600 dark:placeholder-gray-400 focus:placeholder-gray-900 hover:placeholder-gray-900 dark:focus:placeholder-gray-100 dark:hover:placeholder-gray-100"
+        class="h-full w-full flex-1 appearance-none items-center rounded-lg outline-none placeholder-gray-600 dark:placeholder-gray-400"
         :class="{
           'field-disabled': disabled,
+          'focus:placeholder-gray-900 hover:placeholder-gray-900 dark:focus:placeholder-gray-100 dark:hover:placeholder-gray-100': !disabled,
           'text-gray-900 dark:text-gray-100': !lineThrough,
           'text-gray-500 dark:text-gray-500 line-through': lineThrough,
           'font-medium tracking-tight uppercase': uppercase,
@@ -163,7 +164,8 @@ defineExpose({ focus })
           'text-right': alignment === 'right',
           'bg-gray-100 dark:bg-gray-900': background === 'gray',
           'bg-white dark:bg-gray-900': background === 'white',
-          'border shadow-sm border-gray-200 dark:border-gray-800 px-3 hover:border-gray-300 focus:border-gray-400 dark:hover:border-gray-700 dark:focus:border-gray-600': border === 'full',
+          'border shadow-sm border-gray-200 dark:border-gray-800 px-3': border === 'full',
+          'hover:border-gray-300 focus:border-gray-400 dark:hover:border-gray-700 dark:focus:border-gray-600': border === 'full' && !disabled,
           'border-b border-gray-200 dark:border-gray-800 px-10': border === 'bottom',
           'border-0 p-0': border === 'none',
           'text-xs': size === 'xs',

package/app/components/fields/FieldLabel.vue

@@ -33,7 +33,7 @@ function onClick(event: MouseEvent) {
       'cursor-wait': loading,
       'text-gray-900 dark:text-gray-100': !lineThrough,
       'text-gray-500 dark:text-gray-500 line-through': lineThrough,
-      'hover:text-black dark:hover:text-white': !loading && !disabled && !lineThrough,
+      'hover:text-black dark:hover:text-white': !disabled && !lineThrough && !loading,
       'w-0 truncate': truncate,
       'mb-1.5': size === 'xs' && hasMarginBottom,
       'mb-2': size === 'sm' && hasMarginBottom,

package/app/components/fields/FieldMessage.vue

@@ -134,13 +134,12 @@ const text = computed<BaseTextText>(() => {
     v-if="text"
     class="field-disabled text-left tracking-tighter"
     :class="{
-      'text-red-700 dark:text-red-300': status === 'error',
-      'text-gray-700 dark:text-gray-300': status === 'default',
       'mt-2': size === 'xs',
       'mt-2.5': size === 'sm',
       'mt-3': size === 'base',
       'mt-3.5': size === 'lg',
     }"
+    :color="status === 'error' ? 'red' : 'gray'"
     size="sm"
     :text="text"
   />

package/app/components/fields/FieldSelect.vue

@@ -45,7 +45,7 @@ const computedColumns = computed(() => {
 })
 
 const computedOptions = computed(() => {
-  const options = []
+  const options: FieldSelectOption[] = []
 
   // Add index to each option
   if (props.columns.length) {
@@ -86,15 +86,17 @@ function onClose() {
 }
 
 function onContainerClick(event: MouseEvent) {
-  if (!props.disabled && selectedOption.value) {
+  if (!props.disabled) {
     opened.value = !opened.value
 
-    emit('click', event, selectedOption.value.value)
+    if (selectedOption.value) {
+      emit('click', event, selectedOption.value.value)
+    }
   }
 }
 
 function onContainerKeypress(event: KeyboardEvent) {
-  if (['Enter', 'Space'].includes(event.code)) {
+  if (['Enter', 'Space'].includes(event.code) && !props.disabled) {
     (event.target as HTMLElement)?.click()
   }
 }
@@ -106,7 +108,7 @@ function onLabelClick() {
 }
 
 function onMouseEnter() {
-  if (props.openOnHover) {
+  if (props.openOnHover && !props.disabled) {
     opened.value = true
   }
 }
@@ -118,16 +120,17 @@ function onMouseLeave() {
 }
 
 function onOptionClick(event: MouseEvent, option: FieldSelectOption) {
-  // Check that the option is not currently selected
-  if ((selectedOption.value || {}).value !== option.value) {
-    selectOption(event, option.value)
-  }
+  if (!props.disabled) {
+    // Check that the option is not currently selected
+    if ((selectedOption.value || {}).value !== option.value) {
+      selectOption(event, option.value)
+    }
+    else {
+      reset()
+    }
 
-  else {
-    reset()
+    emit('optionClick', event, option.value)
   }
-
-  emit('optionClick', event, option.value)
 }
 </script>
 
@@ -166,7 +169,7 @@ function onOptionClick(event: MouseEvent, option: FieldSelectOption) {
             'border-b border-gray-200 dark:border-gray-800': border === 'bottom',
             'border-0': border === 'none',
             'border-gray-400 dark:border-gray-600': opened,
-            'hover:border-gray-300 dark:hover:border-gray-700': !opened,
+            'hover:border-gray-300 dark:hover:border-gray-700': !opened && !disabled,
             'focus:border-gray-400 dark:focus:border-gray-600': !disabled,
             'px-3': padding,
             'text-2xs h-8': size === 'xs',
@@ -174,7 +177,7 @@ function onOptionClick(event: MouseEvent, option: FieldSelectOption) {
             'text-sm h-12': size === 'base',
             'text-base h-14': size === 'lg',
           }"
-          tabindex="0"
+          :tabindex="disabled ? -1 : 0"
           @click="onContainerClick"
           @keypress.prevent="onContainerKeypress"
         >

package/app/components/fields/FieldTabs.vue

@@ -48,7 +48,7 @@ function onTabClick(event: MouseEvent, tabValue: string) {
       class="flex cursor-pointer items-center justify-center text-xs"
       :class="{
         'text-gray-900 dark:text-gray-100': isTabActive(tab.value),
-        'text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100': !isTabActive(tab.value),
+        'text-gray-700 dark:text-gray-300 hover:text-gray-900 dark:hover:text-gray-100': !isTabActive(tab.value) && !disabled,
         'flex-1': !minimizeOnMobile || !isTabActive(tab.value),
         'flex-2 sm:flex-1': minimizeOnMobile && isTabActive(tab.value),
         'py-1.5 px-2.5': size === 'xs' && theme === 'rounded',

package/app/components/fields/FieldTextarea.vue

@@ -69,15 +69,17 @@ function onFieldClick(event: MouseEvent) {
       ref="textarea"
       v-model="modelValue"
       v-bind="{ 'data-enable-grammarly': 'false' }"
-      class="w-full flex-1 appearance-none rounded-lg text-gray-900 font-medium tracking-tight uppercase outline-none dark:text-gray-100 placeholder-gray-600 dark:placeholder-gray-400 focus:placeholder-gray-900 hover:placeholder-gray-900 dark:focus:placeholder-gray-100 dark:hover:placeholder-gray-100"
+      class="w-full flex-1 appearance-none rounded-lg text-gray-900 font-medium tracking-tight uppercase outline-none dark:text-gray-100 placeholder-gray-600 dark:placeholder-gray-400"
       :class="{
         'field-disabled': disabled,
+        'focus:placeholder-gray-900 hover:placeholder-gray-900 dark:focus:placeholder-gray-100 dark:hover:placeholder-gray-100': !disabled,
         'p-2.5': padding,
         'p-0': !padding,
         'resize-none': !resize,
         'bg-gray-100 dark:bg-gray-900': background === 'gray',
         'bg-white dark:bg-gray-900': background === 'white',
-        'border shadow-sm border-gray-200 dark:border-gray-800 hover:border-gray-300 dark:hover:border-gray-700 focus:border-gray-400 dark:focus:border-gray-600': border,
+        'border shadow-sm border-gray-200 dark:border-gray-800': border,
+        'hover:border-gray-300 dark:hover:border-gray-700 focus:border-gray-400 dark:focus:border-gray-600': border && !disabled,
         'border-0': !border,
         'text-xs': size === 'xs',
         'text-sm': size === 'sm',

package/app/components/fields/FieldTime.vue

@@ -45,9 +45,10 @@ function onFieldBlur(event: FocusEvent) {
     />
 
     <div
-      class="flex cursor-pointer items-center gap-2 overflow-hidden border border-gray-200 rounded-lg px-3 font-normal dark:border-gray-800 focus-within:border-gray-400 hover:border-gray-300 dark:focus-within:border-gray-600 dark:hover:border-gray-700"
+      class="flex cursor-pointer items-center gap-2 overflow-hidden border border-gray-200 rounded-lg px-3 font-normal dark:border-gray-800"
       :class="{
         'field-disabled': disabled,
+        'focus-within:border-gray-400 hover:border-gray-300 dark:focus-within:border-gray-600 dark:hover:border-gray-700': !disabled,
         'bg-gray-100 dark:bg-gray-900': background === 'gray',
         'bg-white dark:bg-gray-900': background === 'white',
         'text-2xs h-8': size === 'xs',

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@saasmakers/ui",
   "type": "module",
-  "version": "0.1.98",
+  "version": "0.1.100",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "license": "MIT",