@saasmakers/ui 0.1.64 → 0.1.66

package/app/components/bases/BaseAlert.vue

@@ -20,6 +20,7 @@ defineSlots<{
 }>()
 
 const { t } = useI18n()
+const { getIcon } = useLayerIcons()
 
 const isClosed = ref(false)
 

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/BaseIcon.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import type { BaseIcon } from '../../types/bases'
 import { NuxtLinkLocale } from '#components'
-import { getIcon } from '../../composables/useIcons'
 
 const props = withDefaults(defineProps<BaseIcon>(), {
   bold: false,
@@ -28,6 +27,7 @@ const emit = defineEmits<{
 const confirming = ref(false)
 
 const { t } = useI18n()
+const { getIcon } = useLayerIcons()
 
 const statusIcon = computed<string | undefined>(() => {
   switch (props.status) {

package/app/components/bases/BaseMetric.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import type { BaseMetric } from '../../types/bases'
-import { getIcon } from '../../composables/useIcons'
 
 const props = withDefaults(defineProps<BaseMetric>(), {
   alignment: 'left',
@@ -11,6 +10,8 @@ const props = withDefaults(defineProps<BaseMetric>(), {
   value: undefined,
 })
 
+const { getIcon } = useLayerIcons()
+
 const performanceIcon = computed<string | undefined>(() => {
   switch (props.performance) {
     case 'down':

package/app/components/bases/BaseOverlay.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import type { BaseOverlay } from '../../types/bases'
 import { Motion } from 'motion-v'
-import { getIcon } from '../../composables/useIcons'
 import useMotion from '../../composables/useMotion'
 
 withDefaults(defineProps<BaseOverlay>(), {
@@ -22,6 +21,7 @@ defineSlots<{
   default?: () => VNode[]
 }>()
 
+const { getIcon } = useLayerIcons()
 const { fadeIn } = useMotion()
 
 function onClick(event: MouseEvent) {

package/app/components/bases/BaseQuote.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import type { BaseQuote } from '../../types/bases'
-import { getIcon } from '../../composables/useIcons'
 
 const props = withDefaults(defineProps<BaseQuote>(), {
   background: 'white',
@@ -29,8 +28,8 @@ defineSlots<{
 }>()
 
 const { locale, t } = useI18n()
-const slots = useSlots()
-const { translatedContent } = useTranslation(slots, locale)
+const { translatedContent } = useTranslation(useSlots(), locale)
+const { getIcon } = useLayerIcons()
 
 const closed = ref(false)
 

package/app/components/bases/BaseTag.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import type { BaseTag } from '../../types/bases'
 import { NuxtLinkLocale } from '#components'
-import { getIcon } from '../../composables/useIcons'
 
 const props = withDefaults(defineProps<BaseTag>(), {
   active: false,
@@ -37,6 +36,8 @@ defineSlots<{
   default?: () => VNode[]
 }>()
 
+const { getIcon } = useLayerIcons()
+
 const hovered = ref(false)
 
 const form = reactive({ name: '' })
@@ -136,7 +137,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

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import type { BaseTags } from '../../types/bases'
-import { getIcon } from '../../composables/useIcons'
 
 const props = withDefaults(defineProps<BaseTags>(), {
   active: false,
@@ -23,10 +22,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)[]]
 }>()
 
@@ -37,6 +36,7 @@ const showingAllTags = ref(false)
 const showingTagCreationField = ref(false)
 
 const { t } = useI18n()
+const { getIcon } = useLayerIcons()
 
 const sortedTags = computed({
   get() {
@@ -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/bases/BaseToast.vue

@@ -1,6 +1,5 @@
 <script lang="ts" setup>
 import type { BaseToast } from '../../types/bases'
-import { getIcon } from '../../composables/useIcons'
 
 const props = withDefaults(defineProps<BaseToast>(), {
   hasClose: true,
@@ -13,6 +12,8 @@ const emit = defineEmits<{
   close: [event: MouseEvent, toast: BaseToast]
 }>()
 
+const { getIcon } = useLayerIcons()
+
 function onClose(event: MouseEvent) {
   if (props.hasClose) {
     emit('close', event, props)

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/FieldSelect.vue

@@ -1,7 +1,6 @@
 <script lang="ts" setup>
 import type { FieldSelect, FieldSelectOption } from '../../types/fields'
 import { vOnClickOutside } from '@vueuse/components'
-import { getIcon } from '../../composables/useIcons'
 
 const props = withDefaults(defineProps<FieldSelect>(), {
   border: 'full',
@@ -31,6 +30,7 @@ const emit = defineEmits<{
   'update:modelValue': [value?: number | string]
 }>()
 
+const { getIcon } = useLayerIcons()
 const { fadeIn } = useMotion()
 
 const opened = ref(false)

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/composables/{useIcons.ts → useLayerIcons.ts}

@@ -24,6 +24,19 @@ const icons = {
   tags: 'hugeicons:tags',
 } as const
 
-export function getIcon(attribute: keyof typeof icons) {
-  return icons[attribute] || icons.default
+export type LayerIconIcon = keyof typeof icons
+
+export type LayerIconValue = typeof icons[LayerIconIcon]
+
+export default function useicons() {
+  const iconsNames = Object.keys(icons)
+
+  const getIcon = (attribute: keyof typeof icons) => {
+    return icons[attribute] || icons.default
+  }
+
+  return {
+    getIcon,
+    iconsNames,
+  }
 }

package/app/types/bases.d.ts

@@ -270,7 +270,7 @@ export interface BaseTag {
   color?: BaseColor
   draggable?: boolean
   editable?: boolean
-  icon?: BaseIconValue
+  icon?: string
   iconSize?: number
   id?: number
   isCreation?: boolean

package/app/types/fields.d.ts

@@ -10,7 +10,7 @@ export interface FieldCheckbox {
   fullWidth?: boolean
   hideError?: boolean
   label?: BaseTextText
-  labelIcon?: BaseIconValue
+  labelIcon?: string
   lineThrough?: boolean
   loading?: boolean
   modelValue?: boolean
@@ -40,13 +40,13 @@ export interface FieldInput {
   fullWidth?: boolean
   hideError?: boolean
   label?: BaseTextText
-  labelIcon?: BaseIconValue
+  labelIcon?: string
   lineThrough?: boolean
   loading?: boolean
   lowercaseOnly?: boolean
   max?: number
   min?: number
-  modelValue?: number | string
+  modelValue?: string
   placeholder?: string
   required?: boolean
   size?: FieldSize
@@ -66,7 +66,7 @@ export interface FieldLabel {
   forField?: string
   hasMarginBottom?: boolean
   hasMarginLeft?: boolean
-  icon?: BaseIconValue
+  icon?: string
   label: BaseTextText
   lineThrough?: boolean
   loading?: boolean
@@ -91,7 +91,7 @@ export interface FieldSelect {
   disabled?: boolean
   hideError?: boolean
   label?: BaseTextText
-  labelIcon?: BaseIconValue
+  labelIcon?: string
   maxHeight?: FieldSelectMaxHeight
   modelValue?: number | string
   openOnHover?: boolean
@@ -109,7 +109,7 @@ export interface FieldSelectColumn {
 }
 
 export interface FieldSelectOption {
-  icon?: BaseIconValue
+  icon?: string
   text: string
   value: number | string
 }
@@ -131,7 +131,7 @@ export interface FieldTabs {
 
 export interface FieldTabsTab {
   activeColor?: BaseColor
-  icon?: BaseIconValue
+  icon?: string
   label: string
   to?: RouteLocationNamedI18n
   value: number | string
@@ -150,7 +150,7 @@ export interface FieldTextarea {
   fullWidth?: boolean
   hideError?: boolean
   label?: BaseTextText
-  labelIcon?: BaseIconValue
+  labelIcon?: string
   loading?: boolean
   modelValue?: string
   padding?: boolean
@@ -167,10 +167,10 @@ export interface FieldTime {
   description?: BaseTextText
   disabled?: boolean
   hideError?: boolean
-  icon?: BaseIconValue
+  icon?: string
   id: number | string
   label?: BaseTextText
-  labelIcon?: BaseIconValue
+  labelIcon?: string
   modelValue?: string
   name?: string
   required?: boolean

package/app/types/global.d.ts

@@ -1,14 +1,18 @@
+import type { LayerIconIcon as LayerIconIconType, LayerIconValue as LayerIconValueType } from '../composables/useLayerIcons'
 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
-  type ChartistLineChartData = import('chartist').LineChartData
-  type ChartistOptions = import('chartist').Options
-  type ChartistPieChartData = import('chartist').PieChartData
-  type RouteLocationNamedI18n = import('vue-router').RouteLocationNamedI18n
-  type VuelidateValidation = import('@vuelidate/core').BaseValidation
+  // Project
+  type LayerIconIcon = LayerIconIconType
+  type LayerIconValue = LayerIconValueType
 
   // Bases
   type BaseBackground = Bases.BaseBackground
@@ -88,6 +92,14 @@ declare global {
   type FieldTextarea = Fields.FieldTextarea
   type FieldTime = Fields.FieldTime
 
+  // Libraries
+  type ChartistBarChartData = import('chartist').BarChartData
+  type ChartistLineChartData = import('chartist').LineChartData
+  type ChartistOptions = import('chartist').Options
+  type ChartistPieChartData = import('chartist').PieChartData
+  type RouteLocationNamedI18n = import('vue-router').RouteLocationNamedI18n
+  type VuelidateValidation = import('@vuelidate/core').BaseValidation
+
   // Navigator
   interface Navigator {
     userAgentData?: {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@saasmakers/ui",
   "type": "module",
-  "version": "0.1.64",
+  "version": "0.1.66",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "license": "MIT",
@@ -21,12 +21,6 @@
     "public",
     "uno.config.ts"
   ],
-  "scripts": {
-    "dev": "nuxi dev",
-    "lint": "eslint .",
-    "prepare": "nuxi prepare",
-    "typecheck": "nuxi typecheck"
-  },
   "peerDependencies": {
     "@saasmakers/shared": "^0.1.0",
     "nuxt": "4.2.1"
@@ -58,8 +52,13 @@
     "vue-router": "4.6.3"
   },
   "devDependencies": {
-    "@saasmakers/shared": "workspace:*",
     "nuxt": "4.2.1",
-    "typescript": "5.9.3"
+    "typescript": "5.9.3",
+    "@saasmakers/shared": "0.1.3"
+  },
+  "scripts": {
+    "dev": "nuxi dev",
+    "lint": "eslint .",
+    "typecheck": "nuxi typecheck"
   }
-}
+}