@saasmakers/ui 0.1.64 → 0.1.65

package/app/components/bases/BaseAlert.vue

@@ -1,6 +1,7 @@
 <script lang="ts" setup>
 import type { BaseAlert } from '../../types/bases'
 import { Preferences } from '@capacitor/preferences'
+import { getIcon } from '../../composables/useIcons'
 
 const props = withDefaults(defineProps<BaseAlert>(), {
   closingId: '',

package/app/components/bases/BaseButton.vue

@@ -127,7 +127,6 @@ function onClick(event: MouseEvent) {
         class="flex-initial"
         :color="iconColor"
         :icon="confirming ? undefined : icon"
-        :light="light"
         :reverse="reverse"
         :size="size"
         :text="confirming ? t('confirm') : text"

package/app/components/bases/BaseTag.vue

@@ -136,7 +136,6 @@ function onRemove(event: MouseEvent) {
         <BaseAvatar
           v-if="avatar"
           class="h-full w-full"
-          rounded="sm"
           :shadow="false"
           :src="avatar"
         />

package/app/components/bases/BaseTags.vue

@@ -23,10 +23,10 @@ const emit = defineEmits<{
   'attach': [event: MouseEvent, tagId?: number | string]
   'back': [event: MouseEvent]
   'click': [event: MouseEvent]
-  'create': [event: MouseEvent, name: string]
+  'create': [event: FocusEvent | KeyboardEvent, name: string]
   'detach': [event: MouseEvent, tagId?: number | string]
   'remove': [event: MouseEvent, tagId?: number | string]
-  'update': [event: MouseEvent, name: string, tagId?: number | string]
+  'update': [event: FocusEvent | KeyboardEvent, name: string, tagId?: number | string]
   'update:modelValue': [value: (number | string)[]]
 }>()
 
@@ -61,7 +61,7 @@ const sortedTags = computed({
   },
 })
 
-function onCreateTag(event: MouseEvent, name: string) {
+function onCreateTag(event: FocusEvent | KeyboardEvent, name: string) {
   showingTagCreationField.value = false
   keyForTagCreation.value = Date.now()
 
@@ -110,7 +110,7 @@ function onTagClick(event: MouseEvent, tagId?: number | string) {
   }
 }
 
-function onUpdateTag(event: MouseEvent, name: string, tagId?: number | string) {
+function onUpdateTag(event: FocusEvent | KeyboardEvent, name: string, tagId?: number | string) {
   if (name) {
     emit('update', event, name, tagId)
   }
@@ -166,8 +166,8 @@ function onRemoveTag(event: MouseEvent, tagId?: number | string) {
       :size="size"
       :text="showingTagCreationField ? '' : t('newTag')"
       @click="onShowTagField"
-      @input:blur="onCreateTag"
-      @input:submit="onCreateTag"
+      @input-blur="onCreateTag"
+      @input-submit="onCreateTag"
     />
 
     <div class="flex items-center">
@@ -199,8 +199,8 @@ function onRemoveTag(event: MouseEvent, tagId?: number | string) {
             :text="tag.text"
             :to="tag.to"
             @click="onTagClick"
-            @input:blur="onUpdateTag"
-            @input:submit="onUpdateTag"
+            @input-blur="onUpdateTag"
+            @input-submit="onUpdateTag"
             @remove="onRemoveTag"
           />
         </template>

package/app/components/bases/BaseText.vue

@@ -74,7 +74,7 @@ function onShowMore() {
 </script>
 
 <template>
-  <Component
+  <component
     :is="to ? NuxtLinkLocale : 'div'"
     :class="{
       'font-bold': bold,
@@ -156,7 +156,7 @@ function onShowMore() {
     />
 
     <slot />
-  </Component>
+  </component>
 </template>
 
 <i18n lang="json">

package/app/components/fields/FieldInput.vue

@@ -30,9 +30,9 @@ const props = withDefaults(defineProps<FieldInput>(), {
 const emit = defineEmits<{
   'blur': [event: FocusEvent]
   'focus': [event: FocusEvent]
-  'keyup': [event: KeyboardEvent, value: number | string ]
-  'submit': [event: KeyboardEvent, value: number | string ]
-  'update:modelValue': [value: number | string ]
+  'keyup': [event: KeyboardEvent, value: string ]
+  'submit': [event: KeyboardEvent, value: string ]
+  'update:modelValue': [value: string ]
 }>()
 
 defineSlots<{
@@ -82,10 +82,10 @@ function onFieldFocus(event: FocusEvent) {
 }
 
 function onFieldInput(event: Event) {
-  let value: number | string = (event.target as HTMLInputElement).value
+  let value = (event.target as HTMLInputElement).value
 
   if (props.type === 'number' && props.max && Number.parseInt(value) > props.max) {
-    value = props.max
+    value = props.max.toString()
   }
 
   if (props.lowercaseOnly) {

package/app/components/fields/FieldTextarea.vue

@@ -87,6 +87,7 @@ function onFieldInput() {
       :id="uuid"
       ref="textarea"
       v-model="value"
+      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="{
         'p-2.5': padding,
@@ -104,7 +105,6 @@ function onFieldInput() {
         'text-base': size === 'base',
         'text-lg': size === 'lg',
       }"
-      data-enable-grammarly="false"
       :placeholder="placeholder"
       :rows="rows"
       spellcheck="false"

package/app/types/fields.d.ts

@@ -46,7 +46,7 @@ export interface FieldInput {
   lowercaseOnly?: boolean
   max?: number
   min?: number
-  modelValue?: number | string
+  modelValue?: string
   placeholder?: string
   required?: boolean
   size?: FieldSize

package/app/types/global.d.ts

@@ -1,6 +1,13 @@
 import type * as Bases from './bases'
 import type * as Fields from './fields'
 
+declare module '@vue/runtime-core' {
+  interface ComponentCustomProperties {
+    vHotkey?: Record<string, (event?: KeyboardEvent | MouseEvent) => void>
+    vTooltip?: Record<string, any> | string
+  }
+}
+
 declare global {
   // Libraries
   type ChartistBarChartData = import('chartist').BarChartData

package/package.json

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