@saasmakers/ui 0.1.116 → 0.2.0

package/app/components/bases/BaseHeading.stories.ts

@@ -39,7 +39,7 @@ export default {
 
 export const Default: StoryObj<typeof BaseHeading> = {
   args: { tag: 'h1' } satisfies Partial<BaseHeading>,
-  render: (args) => ({
+  render: args => ({
     components: { BaseHeading },
     setup() {
       return { args }

package/app/components/bases/BaseIcon.vue

@@ -48,7 +48,7 @@ const statusIcon = computed<string | undefined>(() => {
       return getIcon('exclamationCircle')
     }
     default: {
-      return
+      return undefined
     }
   }
 })
@@ -68,7 +68,7 @@ const statusColor = computed<BaseColor | undefined>(() => {
       return 'orange'
     }
     default: {
-      return
+      return undefined
     }
   }
 })

package/app/components/bases/BaseMetric.vue

@@ -24,7 +24,7 @@ const performanceIcon = computed<string | undefined>(() => {
       return getIcon('arrowUp')
     }
     default: {
-      return
+      return undefined
     }
   }
 })

package/app/components/bases/BaseParagraph.stories.ts

@@ -26,7 +26,7 @@ export default {
 
 export const Default: StoryObj<typeof BaseParagraph> = {
   args: {},
-  render: (args) => ({
+  render: args => ({
     components: { BaseParagraph },
     setup() {
       return { args }

package/app/components/bases/BaseQuote.stories.ts

@@ -53,7 +53,7 @@ export default {
 
 export const Default: StoryObj<typeof BaseQuote> = {
   args: {},
-  render: (args) => ({
+  render: args => ({
     components: { BaseQuote },
     setup() {
       return { args }

package/app/components/bases/BaseTags.vue

@@ -53,7 +53,7 @@ const sortedTags = computed({
         id: tag.id,
         order,
       }))
-      .map((tag) => ({
+      .map(tag => ({
         id: tag.id,
         order: tag.order,
       }))

package/app/components/fields/FieldEmojis.vue

@@ -18,7 +18,8 @@ const searchRaw = ref('')
 const searchQuery = refDebounced(searchRaw, 250)
 
 const emojisFiltered = computed(() => {
-  const searchQueryCleaned = normalizeText(searchQuery.value.trim())
+  const searchQueryRaw = searchQuery.value.trim()
+  const searchQueryCleaned = normalizeText(searchQueryRaw)
 
   if (!searchQueryCleaned) {
     return emojis
@@ -27,11 +28,15 @@ const emojisFiltered = computed(() => {
   return emojis
     .map((category) => {
       const filtered = category.emojis.filter((emoji) => {
+        if (emoji.character === searchQueryRaw) {
+          return true
+        }
+
         const localizedKeywords = (emoji.keywords[locale.value] ?? [])
         const englishKeywords = (emoji.keywords.en ?? [])
         const allKeywords = [...localizedKeywords, ...englishKeywords]
 
-        return allKeywords.some((keyword) => normalizeText(keyword).includes(searchQueryCleaned))
+        return allKeywords.some(keyword => normalizeText(keyword).includes(searchQueryCleaned))
       })
 
       return {
@@ -39,7 +44,7 @@ const emojisFiltered = computed(() => {
         emojis: filtered,
       }
     })
-    .filter((category) => category.emojis.length > 0)
+    .filter(category => category.emojis.length > 0)
 })
 
 function onEmojiClick(event: MouseEvent, emoji?: string) {

package/app/components/fields/FieldMessage.vue

@@ -78,6 +78,8 @@ const validationMessage = computed(() => {
       }
     }
   }
+
+  return ''
 })
 
 const status = computed(() => {

package/app/components/fields/FieldSelect.vue

@@ -36,14 +36,6 @@ const modelValue = defineModel<FieldSelect['modelValue']>({ default: '' })
 
 const opened = ref(false)
 
-const computedColumns = computed(() => {
-  if (props.columns.length > 0) {
-    return props.columns
-  }
-
-  return [{ options: computedOptions.value }]
-})
-
 const computedOptions = computed(() => {
   const options: FieldSelectOption[] = []
 
@@ -64,6 +56,14 @@ const computedOptions = computed(() => {
   return options
 })
 
+const computedColumns = computed(() => {
+  if (props.columns.length > 0) {
+    return props.columns
+  }
+
+  return [{ options: computedOptions.value }]
+})
+
 const selectedOption = computed(() => {
   return computedOptions.value.find((option) => {
     return option.value === modelValue.value

package/app/composables/useChartist.ts

@@ -11,13 +11,11 @@ export default function useChartist() {
     easing?: EasingType
     stagger?: number
   } = {}) => {
-    const {
-      animateArea = true,
-      delay = 0,
-      duration = 500,
-      easing = easings.easeOutQuart,
-      stagger = 0,
-    } = params
+    const animateArea = params.animateArea ?? true
+    const delay = params.delay ?? 0
+    const duration = params.duration ?? 500
+    const easing = params.easing ?? easings.easeOutQuart
+    const stagger = params.stagger ?? 0
 
     return (chart: BaseChart) => {
       chart.on('draw', (ctx: DrawEvent) => {
@@ -50,7 +48,6 @@ export default function useChartist() {
           // Clean up the dash attributes after it finishes
           const total = delay + duration + (stagger ? stagger * (lineCtx.seriesIndex ?? 0) : 0)
 
-          // eslint-disable-next-line sonarjs/no-nested-functions
           globalThis.setTimeout(() => {
             lineCtx.element.attr({
               'stroke-dasharray': undefined,
@@ -64,7 +61,7 @@ export default function useChartist() {
           const areaCtx = ctx as AreaDrawEvent
 
           areaCtx.element.animate({
-            // eslint-disable-next-line id-length -- SVG path attribute
+
             d: {
               begin,
               dur: duration,
@@ -84,7 +81,9 @@ export default function useChartist() {
         if (ctx.type === 'bar') {
           const barCtx = ctx as BarDrawEvent
           // Access private options property via type assertion
-          const chartOptions = (chart as unknown as { options?: Options & Partial<BarChartOptions> }).options
+          const chartOptions = (chart as unknown as {
+            options?: Options & Partial<BarChartOptions>
+          }).options
           const horizontal = !!(chartOptions as BarChartOptions | undefined)?.horizontalBars
 
           // For vertical bars, y1 is baseline, y2 is top. For horizontal, x1 is baseline, x2 is end.

package/app/composables/useDevice.ts

@@ -1,4 +1,3 @@
-/* eslint-disable n/no-unsupported-features/node-builtins */
 export default function useDevice() {
   const isDesktopBrowser = computed(() => {
     if (typeof navigator === 'undefined') {

package/app/composables/useLayerUtils.ts

@@ -1,13 +1,20 @@
 import numbroLib from 'numbro'
 
-const normalizeText = (text: string) => {
+export default function useLayerUtils() {
+  return {
+    normalizeText,
+    numbro,
+  }
+}
+
+function normalizeText(text: string) {
   return text
     .toLowerCase()
     .normalize('NFD')
     .replaceAll(/[\u0300-\u036F]/g, '')
 }
 
-const numbro = (number: '∞' | number | undefined, format?: string) => {
+function numbro(number: '∞' | number | undefined, format?: string) {
   if (!number && number !== 0) {
     return ''
   }
@@ -17,10 +24,3 @@ const numbro = (number: '∞' | number | undefined, format?: string) => {
 
   return numbroLib(number).format(format || '0,0')
 }
-
-export default function useLayerUtils() {
-  return {
-    normalizeText,
-    numbro,
-  }
-}

package/app/composables/useToasts.ts

@@ -20,7 +20,6 @@ export default function useToast() {
   const createToast = (message: string, status: BaseStatus = 'success', i18nParams?: Record<string, number | string>) => {
     if (import.meta.client) {
       const toast: BaseToast = {
-        // eslint-disable-next-line n/no-unsupported-features/node-builtins
         id: crypto.randomUUID(),
         status: status || 'success',
         text: message.includes(' ') ? message : nuxtApp.$i18n.t(`toasts.${message}`, i18nParams || {}),

package/app/types/bases.d.ts

@@ -1,31 +1,3 @@
-// Global types for bases
-export type BaseAlignment = 'center' | 'left' | 'right'
-
-export type BaseBackground = 'gray' | 'white'
-
-export type BaseColor
-  = | 'black'
-    | 'gray'
-    | 'green'
-    | 'indigo'
-    | 'orange'
-    | 'red'
-    | 'white'
-
-export type BaseSize
-  = | '2xl'
-    | '2xs'
-    | '3xl'
-    | '3xs'
-    | '4xl'
-    | 'base'
-    | 'lg'
-    | 'sm'
-    | 'xl'
-    | 'xs'
-
-export type BaseStatus = | 'error' | 'info' | 'success' | 'warning'
-
 // Components
 export interface BaseAlert {
   closingId?: string
@@ -35,6 +7,9 @@ export interface BaseAlert {
   text?: BaseTextText
 }
 
+// Global types for bases
+export type BaseAlignment = 'center' | 'left' | 'right'
+
 export interface BaseAvatar {
   bordered?: boolean
   borderWidth?: number
@@ -46,6 +21,8 @@ export interface BaseAvatar {
   to?: RouteLocationNamedI18n
 }
 
+export type BaseBackground = 'gray' | 'white'
+
 export interface BaseBordered {
   background?: BaseBackground
   borderColor?: BaseBorderedColor
@@ -119,6 +96,15 @@ export interface BaseChart {
 
 export type BaseChartType = 'bar' | 'line' | 'pie'
 
+export type BaseColor
+  = | 'black'
+    | 'gray'
+    | 'green'
+    | 'indigo'
+    | 'orange'
+    | 'red'
+    | 'white'
+
 export interface BaseDivider {
   borderStyle?: BaseDividerBorderStyle
   margin?: number
@@ -283,6 +269,18 @@ export type BaseQuoteBackground = 'gray' | 'gray-light' | 'white'
 
 export type BaseQuoteSize = 'base' | 'sm' | 'xs'
 
+export type BaseSize
+  = | '2xl'
+    | '2xs'
+    | '3xl'
+    | '3xs'
+    | '4xl'
+    | 'base'
+    | 'lg'
+    | 'sm'
+    | 'xl'
+    | 'xs'
+
 export interface BaseSpinner {
   clickable?: boolean
   color?: BaseColor
@@ -293,6 +291,8 @@ export interface BaseSpinner {
   uppercase?: boolean
 }
 
+export type BaseStatus = | 'error' | 'info' | 'success' | 'warning'
+
 export interface BaseTag {
   active?: boolean
   avatar?: string
@@ -352,7 +352,10 @@ export interface BaseText {
   uppercase?: boolean
 }
 
-export type BaseTextText = string | { base: string, sm: string }
+export type BaseTextText = string | {
+  base: string
+  sm: string
+}
 
 export interface BaseToast {
   hasClose?: boolean

package/app/types/fields.d.ts

@@ -1,15 +1,6 @@
 // Global types for fields
 export type FieldBackground = 'gray' | 'white'
 
-export type FieldSize = 'base' | 'lg' | 'sm' | 'xs'
-
-export type FieldStatus
-  = | 'default'
-    | 'error'
-    | 'info'
-    | 'success'
-    | 'warning'
-
 // Components
 export interface FieldCheckbox {
   description?: BaseTextText
@@ -142,6 +133,15 @@ export interface FieldSelectOption {
   value: string
 }
 
+export type FieldSize = 'base' | 'lg' | 'sm' | 'xs'
+
+export type FieldStatus
+  = | 'default'
+    | 'error'
+    | 'info'
+    | 'success'
+    | 'warning'
+
 export interface FieldTabs {
   disabled?: boolean
   minimizeOnMobile?: boolean

package/app/types/global.d.ts

@@ -96,7 +96,10 @@ declare global {
   // Navigator
   interface Navigator {
     userAgentData?: {
-      brands?: { brand: string, version: string }[]
+      brands?: {
+        brand: string
+        version: string
+      }[]
       mobile?: boolean
       platform?: string
     }

package/package.json

@@ -1,13 +1,8 @@
 {
   "name": "@saasmakers/ui",
-  "version": "0.1.116",
+  "version": "0.2.0",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
-  "repository": {
-    "type": "git",
-    "url": "git+https://github.com/saasmakers/saasmakers-turborepo.git",
-    "directory": "packages/ui"
-  },
   "license": "MIT",
   "author": "SaaS Makers",
   "sideEffects": false,
@@ -54,18 +49,18 @@
   "devDependencies": {
     "nuxt": "4.2.2",
     "typescript": "5.9.3",
-    "@saasmakers/shared": "0.1.16"
+    "@saasmakers/shared": "0.1.17"
   },
   "peerDependencies": {
-    "@saasmakers/shared": "^0.1.16",
+    "@saasmakers/shared": "^0.1.17",
     "nuxt": "4.2.2"
   },
   "publishConfig": {
     "access": "public"
   },
   "scripts": {
-    "dev": "storybook dev -p 3103 --no-open",
-    "lint": "eslint .",
+    "dev": "storybook dev -p 3104 --no-open",
+    "lint": "eslint . --max-warnings=0",
     "typecheck": "nuxi typecheck"
   }
 }

package/uno.config.ts

@@ -1,3 +1,4 @@
+/* eslint-disable perfectionist/sort-objects */
 import type { Preset } from 'unocss'
 import { defineConfig, presetWind3 } from 'unocss'
 
@@ -24,7 +25,6 @@ export const rules: [string, Record<string, string>][] = [
 export const shortcuts: Record<string, string> = { 'field-disabled': 'opacity-50 cursor-not-allowed' }
 
 export const theme = {
-  /* eslint-disable perfectionist/sort-objects */
   container: {
     center: true,
 
@@ -42,7 +42,6 @@ export const theme = {
       'xl': '1280px',
     },
   },
-  /* eslint-enable perfectionist/sort-objects */
 
   colors: {
     black: '#000000',
@@ -171,7 +170,6 @@ export const theme = {
     },
   },
 
-  /* eslint-disable perfectionist/sort-objects */
   fontSize: {
     '3xs': ['0.5rem', '0.875rem'],
     '2xs': ['0.625rem', '1rem'],
@@ -184,14 +182,11 @@ export const theme = {
     '3xl': ['1.875rem', '2.5rem'],
     '4xl': ['2.25rem', '3rem'],
   },
-  /* eslint-enable perfectionist/sort-objects */
 }
 
-/* eslint-disable nuxt/nuxt-config-keys-order */
 export default defineConfig({
   presets,
   rules,
   shortcuts,
   theme,
 })
-/* eslint-enable nuxt/nuxt-config-keys-order */