@saasmakers/ui 0.1.105 → 0.1.107

package/app/components/bases/BaseAlert.vue

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

package/app/components/bases/BaseAvatar.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { BaseAvatar } from '../../types/bases'
 import { NuxtLinkLocale } from '#components'
+import type { BaseAvatar } from '../../types/bases'
 
 const props = withDefaults(defineProps<BaseAvatar>(), {
   bordered: true,
@@ -24,10 +24,10 @@ defineSlots<{
 
 const { createToast } = useToasts()
 
-const hovered = ref(false)
 const error = ref(false)
-const loaded = ref(false)
 const fileInput = ref<HTMLInputElement>()
+const hovered = ref(false)
+const loaded = ref(false)
 
 const { t } = useI18n()
 
@@ -56,6 +56,10 @@ function onError() {
   loaded.value = true
 }
 
+function onLoad() {
+  loaded.value = true
+}
+
 function onMouseEnter() {
   hovered.value = true
 }
@@ -63,10 +67,6 @@ function onMouseEnter() {
 function onMouseLeave() {
   hovered.value = false
 }
-
-function onLoad() {
-  loaded.value = true
-}
 </script>
 
 <template>

package/app/components/bases/BaseButton.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { BaseButton } from '../../types/bases'
 import { NuxtLinkLocale } from '#components'
+import type { BaseButton } from '../../types/bases'
 
 const props = withDefaults(defineProps<BaseButton>(), {
   background: true,

package/app/components/bases/BaseChart.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { BaseChart } from '../../types/bases'
 import { BarChart, LineChart, PieChart } from 'chartist'
+import type { BaseChart } from '../../types/bases'
 
 const props = withDefaults(defineProps<BaseChart>(), {
   data: () => ({

package/app/components/bases/BaseIcon.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { BaseIcon } from '../../types/bases'
 import { NuxtLinkLocale } from '#components'
+import type { BaseIcon } from '../../types/bases'
 
 const props = withDefaults(defineProps<BaseIcon>(), {
   bold: false,
@@ -61,6 +61,9 @@ const statusColor = computed<BaseColor | undefined>(() => {
   else if (props.status === 'warning') {
     return 'orange'
   }
+  else {
+    return undefined
+  }
 })
 
 const finalIcon = computed(() => {

package/app/components/bases/BaseOverlay.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import type { BaseOverlay } from '../../types/bases'
 import { onKeyStroke } from '@vueuse/core'
 import { Motion } from 'motion-v'
+import type { BaseOverlay } from '../../types/bases'
 import useMotion from '../../composables/useMotion'
 
 withDefaults(defineProps<BaseOverlay>(), {

package/app/components/bases/BaseTag.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { BaseTag } from '../../types/bases'
 import { NuxtLinkLocale } from '#components'
+import type { BaseTag } from '../../types/bases'
 
 const props = withDefaults(defineProps<BaseTag>(), {
   active: false,

package/app/components/bases/BaseTags.vue

@@ -43,7 +43,9 @@ const sortedTags = computed({
     return props.tags
       .slice()
       .filter((_tag, tagIndex) => tagIndex < props.maxTags || showingAllTags.value)
-      .sort((tagA, tagB) => (tagA.order! < tagB.order! ? -1 : 0))
+      .sort((tagA, tagB) => {
+        return (tagA.order ?? 0) < (tagB.order ?? 0) ? -1 : 0
+      })
   },
 
   set(tags) {
@@ -72,6 +74,14 @@ function onGoBack(event: MouseEvent) {
   emit('back', event)
 }
 
+function onRemoveTag(event: MouseEvent, tagId?: number | string) {
+  emit('remove', event, tagId)
+}
+
+function onShowAllTags() {
+  showingAllTags.value = true
+}
+
 function onShowTagField() {
   if (!showingTagCreationField.value) {
     showingTagCreationField.value = true
@@ -85,10 +95,6 @@ function onShowTagField() {
   }
 }
 
-function onShowAllTags() {
-  showingAllTags.value = true
-}
-
 function onTagClick(event: MouseEvent, tagId?: number | string) {
   if (props.selectable && tagId) {
     let value = [...modelValue.value]
@@ -119,10 +125,6 @@ function onUpdateTag(event: FocusEvent | KeyboardEvent, name: string, tagId?: nu
     keyForTagUpdate.value = Date.now()
   }
 }
-
-function onRemoveTag(event: MouseEvent, tagId?: number | string) {
-  emit('remove', event, tagId)
-}
 </script>
 
 <template>

package/app/components/bases/BaseText.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { BaseText } from '../../types/bases'
 import { NuxtLinkLocale } from '#components'
+import type { BaseText } from '../../types/bases'
 
 const props = withDefaults(defineProps<BaseText>(), {
   alignment: undefined,

package/app/components/fields/FieldDays.vue

@@ -47,7 +47,11 @@ const daysToDisplay = computed(() => {
 function onUpdateDays(event: MouseEvent, day: number) {
   const days = [...modelValue.value]
 
-  days.includes(day) ? days.splice(days.indexOf(day), 1) : days.push(day)
+  if (days.includes(day)) {
+    days.splice(days.indexOf(day), 1)
+  } else {
+    days.push(day)
+  }
 
   modelValue.value = days
 

package/app/components/fields/FieldEmojis.vue

@@ -1,7 +1,7 @@
 <script lang="ts" setup>
-import type { FieldEmojis } from '../../types/fields'
 import { emojis } from '@saasmakers/shared'
 import { refDebounced } from '@vueuse/core'
+import type { FieldEmojis } from '../../types/fields'
 
 const props = withDefaults(defineProps<Omit<FieldEmojis, 'modelValue'>>(), { disabled: false })
 

package/app/components/fields/FieldMessage.vue

@@ -111,7 +111,7 @@ const status = computed(() => {
   if (validationMessage.value && !props.hideError) {
     return 'error'
   }
-  else if (props.description) {
+  else {
     return 'default'
   }
 })

package/app/components/fields/FieldSelect.vue

@@ -1,6 +1,6 @@
 <script lang="ts" setup>
-import type { FieldSelect, FieldSelectOption } from '../../types/fields'
 import { vOnClickOutside } from '@vueuse/components'
+import type { FieldSelect, FieldSelectOption } from '../../types/fields'
 
 const props = withDefaults(defineProps<Omit<FieldSelect, 'modelValue'>>(), {
   border: 'full',
@@ -70,17 +70,6 @@ const selectedOption = computed(() => {
   })
 })
 
-function reset() {
-  opened.value = false
-}
-
-function selectOption(event: MouseEvent, value: string) {
-  modelValue.value = value
-
-  emit('change', event, value)
-  reset()
-}
-
 function onClose() {
   reset()
 }
@@ -132,6 +121,17 @@ function onOptionClick(event: MouseEvent, option: FieldSelectOption) {
     emit('optionClick', event, option.value)
   }
 }
+
+function reset() {
+  opened.value = false
+}
+
+function selectOption(event: MouseEvent, value: string) {
+  modelValue.value = value
+
+  emit('change', event, value)
+  reset()
+}
 </script>
 
 <template>

package/app/components/fields/FieldTabs.vue

@@ -1,8 +1,8 @@
 <script lang="ts" setup>
-import type { FieldTabs, FieldTabsAction } from '../../types/fields'
 import { NuxtLinkLocale } from '#components'
+import type { FieldTabs, FieldTabsAction } from '../../types/fields'
 
-const _props = withDefaults(defineProps<Omit<FieldTabs, 'modelValue'>>(), {
+withDefaults(defineProps<Omit<FieldTabs, 'modelValue'>>(), {
   disabled: false,
   minimizeOnMobile: false,
   size: 'base',

package/app/components/fields/FieldTime.vue

@@ -26,16 +26,16 @@ const modelValue = defineModel<FieldTime['modelValue']>({ default: '' })
 
 const inputRef = ref<HTMLInputElement>()
 
-function onFieldBlur(event: FocusEvent) {
-  emit('blur', event, modelValue.value, props.name)
-}
-
 function onContainerClick() {
   if (!props.disabled && inputRef.value) {
     inputRef.value.focus()
     inputRef.value.showPicker?.()
   }
 }
+
+function onFieldBlur(event: FocusEvent) {
+  emit('blur', event, modelValue.value, props.name)
+}
 </script>
 
 <template>

package/app/composables/useToasts.ts

@@ -17,7 +17,7 @@ export default function useToast() {
     }
   }
 
-  const createToast = (message: string, status: BaseStatus = 'success', i18nParams?: { [key: string]: number | string }) => {
+  const createToast = (message: string, status: BaseStatus = 'success', i18nParams?: Record<string, number | string>) => {
     if (import.meta.client) {
       const toast: BaseToast = {
         id: Math.floor((1 + Math.random()) * 0x10000).toString(16),

package/app/types/bases.d.ts

@@ -1,3 +1,4 @@
+// Global types for bases
 export type BaseAlignment = 'center' | 'left' | 'right'
 
 export type BaseBackground = 'gray' | 'white'
@@ -25,6 +26,7 @@ export type BaseSize
 
 export type BaseStatus = | 'error' | 'info' | 'success' | 'warning'
 
+// Components
 export interface BaseAlert {
   closingId?: string
   isClosable?: boolean
@@ -44,6 +46,14 @@ export interface BaseAvatar {
   to?: RouteLocationNamedI18n
 }
 
+export interface BaseBordered {
+  background?: BaseBackground
+  borderColor?: BaseBorderedColor
+  hasBorder?: boolean
+  shadow?: boolean
+  title: string
+}
+
 export type BaseBorderedColor = 'black' | 'gray'
 
 export interface BaseButton {
@@ -85,14 +95,6 @@ export type BaseButtonSize
 
 export type BaseButtonType = 'button' | 'reset' | 'submit'
 
-export interface BaseBordered {
-  background?: BaseBackground
-  borderColor?: BaseBorderedColor
-  hasBorder?: boolean
-  shadow?: boolean
-  title: string
-}
-
 export interface BaseCharacter {
   character?: BaseCharacterCharacter
   size?: BaseCharacterSize
@@ -313,8 +315,6 @@ export interface BaseTag {
   uppercase?: boolean
 }
 
-export type BaseTagSize = 'base' | 'sm'
-
 export interface BaseTags {
   active?: boolean
   clickable?: boolean
@@ -332,6 +332,8 @@ export interface BaseTags {
   wrap?: boolean
 }
 
+export type BaseTagSize = 'base' | 'sm'
+
 export interface BaseText {
   alignment?: BaseAlignment
   background?: BaseBackground

package/app/types/fields.d.ts

@@ -1,3 +1,4 @@
+// Global types for fields
 export type FieldBackground = 'gray' | 'white'
 
 export type FieldSize = 'base' | 'lg' | 'sm' | 'xs'
@@ -9,6 +10,7 @@ export type FieldStatus
     | 'success'
     | 'warning'
 
+// Components
 export interface FieldCheckbox {
   description?: BaseTextText
   disabled?: boolean
@@ -122,11 +124,17 @@ export interface FieldSelect {
   validation?: VuelidateValidation
 }
 
+export type FieldSelectBorder = 'bottom' | 'full' | 'none'
+
 export interface FieldSelectColumn {
   options: FieldSelectOption[]
   title?: string
 }
 
+export type FieldSelectDirection = 'bottom' | 'top'
+
+export type FieldSelectMaxHeight = 'lg' | 'md' | 'sm' | 'xs'
+
 export interface FieldSelectOption {
   icon?: string
   iconColor?: BaseColor
@@ -134,12 +142,6 @@ export interface FieldSelectOption {
   value: string
 }
 
-export type FieldSelectBorder = 'bottom' | 'full' | 'none'
-
-export type FieldSelectDirection = 'bottom' | 'top'
-
-export type FieldSelectMaxHeight = 'lg' | 'md' | 'sm' | 'xs'
-
 export interface FieldTabs {
   disabled?: boolean
   minimizeOnMobile?: boolean
@@ -149,6 +151,8 @@ export interface FieldTabs {
   theme?: FieldTabsTheme
 }
 
+export type FieldTabsAction = 'added' | 'removed'
+
 export interface FieldTabsTab {
   activeColor?: BaseColor
   icon?: string
@@ -157,8 +161,6 @@ export interface FieldTabsTab {
   value: string
 }
 
-export type FieldTabsAction = 'added' | 'removed'
-
 export type FieldTabsTheme = 'border' | 'rounded'
 
 export interface FieldTextarea {

package/app/types/global.d.ts

@@ -4,29 +4,24 @@ import type * as Bases from './bases'
 import type * as Fields from './fields'
 
 declare global {
-  // Project
-  type LayerIconIcon = LayerIconIconType
-  type LayerIconValue = LayerIconValueType
-
   // Bases
-  type BaseAlignment = Bases.BaseAlignment
-  type BaseBackground = Bases.BaseBackground
-  type BaseColor = Bases.BaseColor
-  type BaseSize = Bases.BaseSize
-  type BaseStatus = Bases.BaseStatus
   type BaseAlert = Bases.BaseAlert
+  type BaseAlignment = Bases.BaseAlignment
+
   type BaseAvatar = Bases.BaseAvatar
+  type BaseBackground = Bases.BaseBackground
+  type BaseBordered = Bases.BaseBordered
   type BaseBorderedColor = Bases.BaseBorderedColor
   type BaseButton = Bases.BaseButton
   type BaseButtonRounded = Bases.BaseButtonRounded
   type BaseButtonSize = Bases.BaseButtonSize
   type BaseButtonType = Bases.BaseButtonType
-  type BaseBordered = Bases.BaseBordered
   type BaseCharacter = Bases.BaseCharacter
   type BaseCharacterCharacter = Bases.BaseCharacterCharacter
   type BaseCharacterSize = Bases.BaseCharacterSize
   type BaseChart = Bases.BaseChart
   type BaseChartType = Bases.BaseChartType
+  type BaseColor = Bases.BaseColor
   type BaseDivider = Bases.BaseDivider
   type BaseDividerBorderStyle = Bases.BaseDividerBorderStyle
   type BaseDividerSize = Bases.BaseDividerSize
@@ -53,18 +48,23 @@ declare global {
   type BaseQuote = Bases.BaseQuote
   type BaseQuoteBackground = Bases.BaseQuoteBackground
   type BaseQuoteSize = Bases.BaseQuoteSize
+  type BaseSize = Bases.BaseSize
   type BaseSpinner = Bases.BaseSpinner
+  type BaseStatus = Bases.BaseStatus
   type BaseTag = Bases.BaseTag
-  type BaseTagSize = Bases.BaseTagSize
   type BaseTags = Bases.BaseTags
+  type BaseTagSize = Bases.BaseTagSize
   type BaseText = Bases.BaseText
   type BaseTextText = Bases.BaseTextText
   type BaseToast = Bases.BaseToast
+  // Libraries
+  type ChartistBarChartData = import('chartist').BarChartData
+  type ChartistLineChartData = import('chartist').LineChartData
 
+  type ChartistOptions = import('chartist').Options
+  type ChartistPieChartData = import('chartist').PieChartData
   // Fields
   type FieldBackground = Fields.FieldBackground
-  type FieldSize = Fields.FieldSize
-  type FieldStatus = Fields.FieldStatus
   type FieldCheckbox = Fields.FieldCheckbox
   type FieldDays = Fields.FieldDays
   type FieldEmojis = Fields.FieldEmojis
@@ -75,36 +75,36 @@ declare global {
   type FieldLabel = Fields.FieldLabel
   type FieldMessage = Fields.FieldMessage
   type FieldSelect = Fields.FieldSelect
-  type FieldSelectColumn = Fields.FieldSelectColumn
-  type FieldSelectOption = Fields.FieldSelectOption
   type FieldSelectBorder = Fields.FieldSelectBorder
+  type FieldSelectColumn = Fields.FieldSelectColumn
   type FieldSelectDirection = Fields.FieldSelectDirection
   type FieldSelectMaxHeight = Fields.FieldSelectMaxHeight
+  type FieldSelectOption = Fields.FieldSelectOption
+  type FieldSize = Fields.FieldSize
+  type FieldStatus = Fields.FieldStatus
   type FieldTabs = Fields.FieldTabs
-  type FieldTabsTab = Fields.FieldTabsTab
   type FieldTabsAction = Fields.FieldTabsAction
+  type FieldTabsTab = Fields.FieldTabsTab
   type FieldTabsTheme = Fields.FieldTabsTheme
+
   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
+  // Project
+  type LayerIconIcon = LayerIconIconType
+  type LayerIconValue = LayerIconValueType
   type Meta<T> = import('@nuxtjs/storybook').Meta<T>
-  type RouteLocationNamedI18n = import('vue-router').RouteLocationNamedI18n
-  type StoryObj<T> = import('@nuxtjs/storybook').StoryObj<T>
-  type VuelidateValidation = import('@vuelidate/core').BaseValidation
-
   // Navigator
   interface Navigator {
     userAgentData?: {
-      brands?: Array<{ brand: string, version: string }>
+      brands?: { brand: string, version: string }[]
       mobile?: boolean
       platform?: string
     }
   }
+  type RouteLocationNamedI18n = import('vue-router').RouteLocationNamedI18n
+  type StoryObj<T> = import('@nuxtjs/storybook').StoryObj<T>
+
+  type VuelidateValidation = import('@vuelidate/core').BaseValidation
 }
 
 declare module 'vue' {

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@saasmakers/ui",
   "type": "module",
-  "version": "0.1.105",
+  "version": "0.1.107",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "license": "MIT",
@@ -22,7 +22,7 @@
     "uno.config.ts"
   ],
   "peerDependencies": {
-    "@saasmakers/shared": "^0.1.12",
+    "@saasmakers/shared": "^0.1.13",
     "nuxt": "4.2.2"
   },
   "dependencies": {
@@ -58,12 +58,11 @@
   "devDependencies": {
     "nuxt": "4.2.2",
     "typescript": "5.9.3",
-    "@saasmakers/shared": "0.1.12"
+    "@saasmakers/shared": "0.1.13"
   },
   "scripts": {
-    "dev": "nuxi dev",
+    "dev": "storybook dev -p 3103",
     "lint": "eslint .",
-    "storybook": "storybook dev -p 6006",
     "typecheck": "nuxi typecheck"
   }
 }

package/uno.config.ts

@@ -3,7 +3,7 @@ import { defineConfig, presetWind3 } from 'unocss'
 
 export const presets: Preset[] = [presetWind3()]
 
-export const rules: Array<[string, Record<string, string>]> = [
+export const rules: [string, Record<string, string>][] = [
   [
     'drag-none',
     {