@saasmakers/ui 2.0.15 → 2.0.16

package/app/components/bases/BaseButton.vue

@@ -15,7 +15,6 @@ const props = withDefaults(defineProps<BaseButton>(), {
   light: false,
   loading: false,
   reverse: false,
-  rounded: 'md',
   size: 'base',
   text: '',
   to: undefined,
@@ -64,12 +63,8 @@ function onClick(event: MouseEvent) {
       'w-full': fullWidth,
       'bg-transparent shadow-none': light,
       'shadow-sm': !light,
-      'rounded-none': rounded === 'none' && !circular,
-      'rounded-sm': rounded === 'sm' && !circular,
-      'rounded': rounded === 'base' && !circular,
-      'rounded-md': rounded === 'md' && !circular,
-      'rounded-lg': rounded === 'lg' && !circular,
-      'rounded-full': rounded === 'full' || circular,
+      'rounded-lg': !circular,
+      'rounded-full': circular,
       'h-6 w-6': size === '2xs' && circular,
       'h-8 w-8': size === 'xs' && circular && !confirming,
       'h-10 w-10': size === 'sm' && circular && !confirming,
@@ -79,21 +74,21 @@ function onClick(event: MouseEvent) {
       'border-gray-900 dark:border-gray-100 bg-gray-900 dark:bg-gray-100 text-white dark:text-black': color === 'black' && !light,
       'hover:bg-black dark:hover:bg-white hover:text-white dark:hover:text-black': color === 'black' && !light && !disabled && !loading,
       'border-gray-900 dark:border-gray-100 text-gray-900 dark:text-gray-100': color === 'black' && light,
-      'border-gray-700 dark:border-gray-300 bg-gray-700 dark:bg-gray-300 text-white dark:text-black': color === 'gray' && !light,
-      'hover:bg-gray-800 dark:hover:bg-gray-200': color === 'gray' && !light && !disabled && !loading,
-      'border-gray-700 dark:border-gray-300 text-gray-700 dark:text-gray-300': color === 'gray' && light,
-      'border-green-700 dark:border-green-300 bg-green-700 dark:bg-green-300 text-white dark:text-black': color === 'green' && !light,
-      'hover:bg-green-800 dark:hover:bg-green-200': color === 'green' && !light && !disabled && !loading,
-      'border-green-700 dark:border-green-300 text-green-700 dark:text-green-300': color === 'green' && light,
-      'border-indigo-700 dark:border-indigo-300 bg-indigo-700 dark:bg-indigo-300 text-white dark:text-black': color === 'indigo' && !light,
-      'hover:bg-indigo-800 dark:hover:bg-indigo-200': color === 'indigo' && !light && !disabled && !loading,
-      'border-indigo-700 dark:border-indigo-300 text-indigo-700 dark:text-indigo-300': color === 'indigo' && light,
-      'border-orange-700 dark:border-orange-300 bg-orange-700 dark:bg-orange-300 text-white dark:text-black': color === 'orange' && !light,
-      'hover:bg-orange-800 dark:hover:bg-orange-200': color === 'orange' && !light && !disabled && !loading,
-      'border-orange-700 dark:border-orange-300 text-orange-700 dark:text-orange-300': color === 'orange' && light,
-      'border-red-700 dark:border-red-300 bg-red-700 dark:bg-red-300 text-white dark:text-black': color === 'red' && !light,
-      'hover:bg-red-800 dark:hover:bg-red-200': color === 'red' && !light && !disabled && !loading,
-      'border-red-700 dark:border-red-300 text-red-700 dark:text-red-300': color === 'red' && light,
+      'border-gray-800 dark:border-gray-200 bg-gray-800 dark:bg-gray-200 text-white dark:text-black': color === 'gray' && !light,
+      'hover:bg-gray-900 dark:hover:bg-gray-100': color === 'gray' && !light && !disabled && !loading,
+      'border-gray-800 dark:border-gray-200 text-gray-800 dark:text-gray-200': color === 'gray' && light,
+      'border-green-800 dark:border-green-200 bg-green-800 dark:bg-green-200 text-white dark:text-black': color === 'green' && !light,
+      'hover:bg-green-900 dark:hover:bg-green-100': color === 'green' && !light && !disabled && !loading,
+      'border-green-800 dark:border-green-200 text-green-800 dark:text-green-200': color === 'green' && light,
+      'border-indigo-800 dark:border-indigo-200 bg-indigo-800 dark:bg-indigo-200 text-white dark:text-black': color === 'indigo' && !light,
+      'hover:bg-indigo-900 dark:hover:bg-indigo-100': color === 'indigo' && !light && !disabled && !loading,
+      'border-indigo-800 dark:border-indigo-200 text-indigo-800 dark:text-indigo-200': color === 'indigo' && light,
+      'border-orange-800 dark:border-orange-200 bg-orange-800 dark:bg-orange-200 text-white dark:text-black': color === 'orange' && !light,
+      'hover:bg-orange-900 dark:hover:bg-orange-100': color === 'orange' && !light && !disabled && !loading,
+      'border-orange-800 dark:border-orange-200 text-orange-800 dark:text-orange-200': color === 'orange' && light,
+      'border-red-800 dark:border-red-200 bg-red-800 dark:bg-red-200 text-white dark:text-black': color === 'red' && !light,
+      'hover:bg-red-900 dark:hover:bg-red-100': color === 'red' && !light && !disabled && !loading,
+      'border-red-800 dark:border-red-200 text-red-800 dark:text-red-200': color === 'red' && light,
       'border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-900 text-gray-900 dark:text-gray-100': color === 'white' && !light,
       'hover:bg-white dark:hover:bg-gray-900': color === 'white' && !light && !disabled && !loading,
       'border-white dark:border-gray-900 text-white dark:text-black': color === 'white' && light,

package/app/components/fields/FieldInput.vue

@@ -46,10 +46,8 @@ const id = useId()
 const modelValue = defineModel<FieldInput['modelValue']>({ default: '' })
 const input = ref<HTMLInputElement>()
 const showPassword = ref(false)
-const { isDesktopBrowser } = useDevice()
-
 onMounted(() => {
-  if (props.autofocus && input.value && isDesktopBrowser.value) {
+  if (props.autofocus && input.value) {
     input.value.focus()
   }
 })

package/app/components/fields/FieldTextarea.vue

@@ -30,10 +30,8 @@ const emit = defineEmits<{
 const id = useId()
 const modelValue = defineModel<FieldTextarea['modelValue']>({ default: '' })
 const textarea = ref<HTMLTextAreaElement>()
-const { isDesktopBrowser } = useDevice()
-
 onMounted(() => {
-  if (props.autofocus && textarea.value && isDesktopBrowser.value) {
+  if (props.autofocus && textarea.value) {
     textarea.value.focus()
   }
 })

package/app/types/bases.d.ts

@@ -60,22 +60,12 @@ export interface BaseButton {
   light?: boolean
   loading?: boolean
   reverse?: boolean
-  rounded?: BaseButtonRounded
   size?: BaseButtonSize
   text?: BaseTextText
   to?: RouteLocationNamedI18n
   type?: BaseButtonType
 }
 
-export type BaseButtonRounded
-  = | 'base'
-    | 'full'
-    | 'lg'
-    | 'md'
-    | 'none'
-    | 'sm'
-    | 'xl'
-
 export type BaseButtonSize
   = | '2xs'
     | 'base'

package/app/types/global.d.ts

@@ -24,7 +24,6 @@ declare global {
   type BaseBordered = import('./bases').BaseBordered
   type BaseBorderedColor = import('./bases').BaseBorderedColor
   type BaseButton = import('./bases').BaseButton
-  type BaseButtonRounded = import('./bases').BaseButtonRounded
   type BaseButtonSize = import('./bases').BaseButtonSize
   type BaseButtonType = import('./bases').BaseButtonType
   type BaseCard = import('./bases').BaseCard

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@saasmakers/ui",
-  "version": "2.0.15",
+  "version": "2.0.16",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "license": "MIT",
@@ -60,8 +60,8 @@
   "devDependencies": {
     "nuxt": "4.3.1",
     "typescript": "5.9.3",
-    "@saasmakers/apps-helpers": "0.1.0",
-    "@saasmakers/shared": "0.2.8"
+    "@saasmakers/shared": "0.2.8",
+    "@saasmakers/apps-helpers": "0.1.0"
   },
   "peerDependencies": {
     "@saasmakers/apps-helpers": "^0.1.0",