@saasmakers/ui 0.1.63 → 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: '',
@@ -14,6 +15,11 @@ const emit = defineEmits<{
   close: [event: MouseEvent]
 }>()
 
+defineSlots<{
+  buttons?: () => VNode[]
+  default?: () => VNode[]
+}>()
+
 const { t } = useI18n()
 
 const isClosed = ref(false)

package/app/components/bases/BaseAvatar.vue

@@ -18,6 +18,10 @@ const emit = defineEmits<{
   click: [event: MouseEvent]
 }>()
 
+defineSlots<{
+  bottom?: () => VNode[]
+}>()
+
 const { createToast } = useToasts()
 
 const hovered = ref(false)

package/app/components/bases/BaseBordered.vue

@@ -8,6 +8,10 @@ withDefaults(defineProps<BaseBordered>(), {
   shadow: false,
   title: '',
 })
+
+defineSlots<{
+  default?: () => VNode[]
+}>()
 </script>
 
 <template>

package/app/components/bases/BaseButton.vue

@@ -27,6 +27,10 @@ const emit = defineEmits<{
   confirm: [event: MouseEvent, id?: number | string]
 }>()
 
+defineSlots<{
+  default?: () => VNode[]
+}>()
+
 const confirming = ref(false)
 
 const { t } = useI18n()
@@ -123,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/BaseHeading.vue

@@ -6,6 +6,10 @@ withDefaults(defineProps<BaseHeading>(), {
   size: 'base',
   tag: 'h1',
 })
+
+defineSlots<{
+  default?: () => VNode[]
+}>()
 </script>
 
 <template>

package/app/components/bases/BaseMessage.vue

@@ -7,6 +7,11 @@ withDefaults(defineProps<BaseMessage>(), {
   legend: '',
   title: '',
 })
+
+defineSlots<{
+  animation?: () => VNode[]
+  default?: () => VNode[]
+}>()
 </script>
 
 <template>

package/app/components/bases/BaseOverlay.vue

@@ -18,6 +18,10 @@ const emit = defineEmits<{
   close: [event: MouseEvent]
 }>()
 
+defineSlots<{
+  default?: () => VNode[]
+}>()
+
 const { fadeIn } = useMotion()
 
 function onClick(event: MouseEvent) {

package/app/components/bases/BaseParagraph.vue

@@ -5,6 +5,10 @@ withDefaults(defineProps<BaseParagraph>(), {
   alignment: 'left',
   size: 'base',
 })
+
+defineSlots<{
+  default?: () => VNode[]
+}>()
 </script>
 
 <template>

package/app/components/bases/BaseQuote.vue

@@ -21,6 +21,13 @@ const emit = defineEmits<{
   close: [event: MouseEvent]
 }>()
 
+defineSlots<{
+  bottom?: () => VNode[]
+  default?: () => VNode[]
+  left?: () => VNode[]
+  right?: () => VNode[]
+}>()
+
 const { locale, t } = useI18n()
 const slots = useSlots()
 const { translatedContent } = useTranslation(slots, locale)

package/app/components/bases/BaseTag.vue

@@ -33,6 +33,10 @@ const emit = defineEmits<{
   remove: [event: MouseEvent, id?: number | string]
 }>()
 
+defineSlots<{
+  default?: () => VNode[]
+}>()
+
 const hovered = ref(false)
 
 const form = reactive({ name: '' })
@@ -132,7 +136,6 @@ function onRemove(event: MouseEvent) {
         <BaseAvatar
           v-if="avatar"
           class="h-full w-full"
-          rounded="sm"
           :shadow="false"
           :src="avatar"
         />
@@ -145,10 +148,10 @@ function onRemove(event: MouseEvent) {
       </span>
 
       <span
-        v-if="$slots.left"
+        v-if="$slots.default"
         class="mr-1"
       >
-        <slot name="left" />
+        <slot />
       </span>
 
       <BaseText

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

@@ -22,6 +22,10 @@ const emit = defineEmits<{
   click: [event: MouseEvent]
 }>()
 
+defineSlots<{
+  default?: () => VNode[]
+}>()
+
 const showAll = ref(false)
 
 const { t } = useI18n()
@@ -70,7 +74,7 @@ function onShowMore() {
 </script>
 
 <template>
-  <Component
+  <component
     :is="to ? NuxtLinkLocale : 'div'"
     :class="{
       'font-bold': bold,
@@ -152,7 +156,7 @@ function onShowMore() {
     />
 
     <slot />
-  </Component>
+  </component>
 </template>
 
 <i18n lang="json">

package/app/components/fields/FieldInput.vue

@@ -30,9 +30,15 @@ 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<{
+  inputLeft?: () => VNode[]
+  inputRight?: () => VNode[]
+  label?: () => VNode[]
 }>()
 
 const input = ref<HTMLInputElement>()
@@ -76,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/nuxt.config.ts

@@ -12,7 +12,12 @@ export default defineNuxtConfig({
 
   experimental: { typedPages: true },
 
-  typescript: { tsConfig: { compilerOptions: { noUncheckedIndexedAccess: false } } },
+  typescript: {
+    tsConfig: {
+      compilerOptions: { noUncheckedIndexedAccess: false },
+      vueCompilerOptions: { strictTemplates: true },
+    },
+  },
 
   // --> COMPONENTS, CSS, MODULES & PLUGINS <--
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@saasmakers/ui",
   "type": "module",
-  "version": "0.1.63",
+  "version": "0.1.65",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "license": "MIT",
@@ -40,7 +40,6 @@
     "@nuxtjs/robots": "5.5.6",
     "@nuxtjs/sitemap": "7.4.7",
     "@pinia/nuxt": "0.11.2",
-    "@saasmakers/shared": "workspace:*",
     "@unocss/nuxt": "66.5.4",
     "@unocss/reset": "66.5.10",
     "@vuelidate/core": "2.0.3",
@@ -59,6 +58,7 @@
     "vue-router": "4.6.3"
   },
   "devDependencies": {
+    "@saasmakers/shared": "workspace:*",
     "nuxt": "4.2.1",
     "typescript": "5.9.3"
   }