@saasmakers/ui 0.1.96 → 0.1.98

package/app/components/fields/FieldCheckbox.vue

@@ -35,7 +35,7 @@ const uuid = ref(`${Math.floor((1 + Math.random()) * 0x100000)}`)
         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="{
-          'disabled:opacity-50 disabled:cursor-not-allowed': disabled,
+          'field-disabled': disabled,
           'h-3.5 w-3.5': size === 'xs',
           'h-4 w-4': size === 'sm',
           'h-4.5 w-4.5': size === 'base',
@@ -68,6 +68,7 @@ const uuid = ref(`${Math.floor((1 + Math.random()) * 0x100000)}`)
 
     <FieldMessage
       :description="description"
+      :disabled="disabled"
       :hide-error="hideError"
       :size="size"
       :validation="validation"

package/app/components/fields/FieldDays.vue

@@ -1,6 +1,8 @@
 <script lang="ts" setup>
 import type { FieldDays } from '../../types/fields'
 
+withDefaults(defineProps<Omit<FieldDays, 'modelValue'>>(), { disabled: false })
+
 const emit = defineEmits<{
   change: [event: MouseEvent, value: number[]]
 }>()
@@ -54,7 +56,10 @@ function onUpdateDays(event: MouseEvent, day: number) {
 </script>
 
 <template>
-  <div class="flex items-center">
+  <div
+    class="flex items-center"
+    :class="{ 'field-disabled': disabled }"
+  >
     <BaseText
       v-for="day in daysToDisplay"
       :key="day.value"

package/app/components/fields/FieldEmojis.vue

@@ -3,6 +3,8 @@ import type { FieldEmojis } from '../../types/fields'
 import { emojis } from '@saasmakers/shared'
 import { refDebounced } from '@vueuse/core'
 
+withDefaults(defineProps<Omit<FieldEmojis, 'modelValue'>>(), { disabled: false })
+
 const emit = defineEmits<{
   click: [event: MouseEvent, emoji: string]
 }>()
@@ -47,7 +49,10 @@ function onEmojiClick(event: MouseEvent, emoji?: string) {
 </script>
 
 <template>
-  <div class="border border-gray-200 rounded-lg p-4 shadow-sm dark:border-gray-800">
+  <div
+    class="border border-gray-200 rounded-lg p-4 shadow-sm dark:border-gray-800"
+    :class="{ 'field-disabled': disabled }"
+  >
     <FieldInput
       v-model="searchRaw"
       autofocus

package/app/components/fields/FieldInput.vue

@@ -153,6 +153,7 @@ defineExpose({ focus })
         :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="{
+          'field-disabled': 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,
@@ -170,6 +171,7 @@ defineExpose({ focus })
           'text-base': size === 'base',
           'text-lg': size === 'lg',
         }"
+        :disabled="disabled"
         :max="max"
         :min="min"
         :placeholder="placeholder"
@@ -193,6 +195,7 @@ defineExpose({ focus })
 
     <FieldMessage
       :description="description"
+      :disabled="disabled"
       :hide-error="hideError"
       :size="size"
       :validation="validation"

package/app/components/fields/FieldLabel.vue

@@ -28,8 +28,8 @@ function onClick(event: MouseEvent) {
   <label
     class="flex select-none items-center font-semibold tracking-tight"
     :class="{
+      'field-disabled': disabled,
       'cursor-pointer': !loading && !disabled,
-      'cursor-not-allowed': disabled,
       'cursor-wait': loading,
       'text-gray-900 dark:text-gray-100': !lineThrough,
       'text-gray-500 dark:text-gray-500 line-through': lineThrough,

package/app/components/fields/FieldMessage.vue

@@ -3,6 +3,7 @@ import type { FieldMessage } from '../../types/fields'
 
 const props = withDefaults(defineProps<FieldMessage>(), {
   description: '',
+  disabled: false,
   hideError: true,
   size: 'base',
   validation: undefined,
@@ -131,7 +132,7 @@ const text = computed<BaseTextText>(() => {
 <template>
   <BaseIcon
     v-if="text"
-    class="text-left tracking-tighter"
+    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',

package/app/components/fields/FieldSelect.vue

@@ -149,7 +149,7 @@ function onOptionClick(event: MouseEvent, option: FieldSelectOption) {
       v-on-click-outside="onClose"
       class="text-left"
       :class="{
-        'cursor-not-allowed': disabled,
+        'field-disabled': disabled,
         'cursor-pointer': !disabled,
       }"
       @mouseenter="onMouseEnter"
@@ -272,6 +272,7 @@ function onOptionClick(event: MouseEvent, option: FieldSelectOption) {
 
     <FieldMessage
       :description="description"
+      :disabled="disabled"
       :hide-error="hideError"
       :size="size"
       :validation="validation"

package/app/components/fields/FieldTabs.vue

@@ -3,6 +3,7 @@ import type { FieldTabs, FieldTabsAction } from '../../types/fields'
 import { NuxtLinkLocale } from '#components'
 
 const _props = withDefaults(defineProps<Omit<FieldTabs, 'modelValue'>>(), {
+  disabled: false,
   minimizeOnMobile: false,
   size: 'base',
   tabs: undefined,
@@ -35,6 +36,7 @@ function onTabClick(event: MouseEvent, tabValue: string) {
   <div
     class="flex items-center border border-gray-300 shadow-inner dark:border-gray-700"
     :class="{
+      'field-disabled': disabled,
       'gap-0 border-b border-gray-300 dark:border-gray-700 bg-gray-100 dark:bg-gray-900': theme === 'border',
       'gap-2 rounded-lg bg-gray-200 dark:bg-gray-800 p-0.5 sm:p-1': theme === 'rounded',
     }"

package/app/components/fields/FieldTextarea.vue

@@ -71,6 +71,7 @@ function onFieldClick(event: MouseEvent) {
       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="{
+        'field-disabled': disabled,
         'p-2.5': padding,
         'p-0': !padding,
         'resize-none': !resize,
@@ -83,6 +84,7 @@ function onFieldClick(event: MouseEvent) {
         'text-base': size === 'base',
         'text-lg': size === 'lg',
       }"
+      :disabled="disabled"
       :placeholder="placeholder"
       :rows="rows"
       spellcheck="false"
@@ -92,6 +94,7 @@ function onFieldClick(event: MouseEvent) {
 
     <FieldMessage
       :description="description"
+      :disabled="disabled"
       :hide-error="hideError"
       :size="size"
       :validation="validation"

package/app/components/fields/FieldTime.vue

@@ -47,6 +47,7 @@ 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="{
+        'field-disabled': disabled,
         'bg-gray-100 dark:bg-gray-900': background === 'gray',
         'bg-white dark:bg-gray-900': background === 'white',
         'text-2xs h-8': size === 'xs',
@@ -68,6 +69,7 @@ function onFieldBlur(event: FocusEvent) {
           'bg-gray-100 dark:bg-gray-900': background === 'gray',
           'bg-white dark:bg-gray-900': background === 'white',
         }"
+        :disabled="disabled"
         type="time"
         @blur="onFieldBlur"
       >
@@ -75,6 +77,7 @@ function onFieldBlur(event: FocusEvent) {
 
     <FieldMessage
       :description="description"
+      :disabled="disabled"
       :hide-error="hideError"
       :size="size"
       :validation="validation"

package/app/types/fields.d.ts

@@ -27,10 +27,12 @@ export interface FieldCheckbox {
 }
 
 export interface FieldDays {
+  disabled?: boolean
   modelValue: number[]
 }
 
 export interface FieldEmojis {
+  disabled?: boolean
   modelValue: string
 }
 
@@ -93,6 +95,7 @@ export interface FieldLabel {
 
 export interface FieldMessage {
   description?: BaseTextText
+  disabled?: boolean
   hideError?: boolean
   size?: FieldSize
   validation?: VuelidateValidation
@@ -137,6 +140,7 @@ export type FieldSelectDirection = 'bottom' | 'top'
 export type FieldSelectMaxHeight = 'lg' | 'md' | 'sm' | 'xs'
 
 export interface FieldTabs {
+  disabled?: boolean
   minimizeOnMobile?: boolean
   modelValue: string
   size?: FieldSize

package/nuxt.config.ts

@@ -120,6 +120,7 @@ export default defineNuxtConfig({
     nuxtLayers: true,
     presets: uno.presets,
     rules: uno.rules,
+    shortcuts: uno.shortcuts,
     theme: uno.theme,
   },
 })

package/package.json

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

package/uno.config.ts

@@ -21,6 +21,8 @@ export const rules: Array<[string, Record<string, string>]> = [
   ['safe-bottom', { 'padding-bottom': 'env(safe-area-inset-bottom)' }],
 ]
 
+export const shortcuts: Record<string, string> = { 'field-disabled': 'opacity-50 cursor-not-allowed' }
+
 export const theme = {
   /* eslint-disable perfectionist/sort-objects */
   container: {
@@ -188,5 +190,6 @@ export const theme = {
 export default defineConfig({
   presets,
   rules,
+  shortcuts,
   theme,
 })