@saasmakers/ui 0.1.65 → 0.1.67

package/app/components/bases/BaseAlert.vue

@@ -1,7 +1,6 @@
 <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: '',
@@ -21,6 +20,7 @@ defineSlots<{
 }>()
 
 const { t } = useI18n()
+const { getIcon } = useLayerIcons()
 
 const isClosed = ref(false)
 

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: '' })

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,
@@ -37,6 +36,7 @@ const showingAllTags = ref(false)
 const showingTagCreationField = ref(false)
 
 const { t } = useI18n()
+const { getIcon } = useLayerIcons()
 
 const sortedTags = computed({
   get() {

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/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',
@@ -25,12 +24,13 @@ const props = withDefaults(defineProps<FieldSelect>(), {
 })
 
 const emit = defineEmits<{
-  'change': [event: MouseEvent, value?: number | string]
-  'click': [event: MouseEvent, value?: number | string]
-  'optionClick': [event: MouseEvent, value?: number | string]
-  'update:modelValue': [value?: number | string]
+  'change': [event: MouseEvent, value: number | string]
+  'click': [event: MouseEvent, value: number | string]
+  'optionClick': [event: MouseEvent, value: number | string]
+  'update:modelValue': [value: number | string]
 }>()
 
+const { getIcon } = useLayerIcons()
 const { fadeIn } = useMotion()
 
 const opened = ref(false)
@@ -74,7 +74,7 @@ function reset() {
   opened.value = false
 }
 
-function selectOption(event: MouseEvent, value?: number | string) {
+function selectOption(event: MouseEvent, value: number | string) {
   emit('change', event, value)
   emit('update:modelValue', value)
 
@@ -86,10 +86,10 @@ function onClose() {
 }
 
 function onContainerClick(event: MouseEvent) {
-  if (!props.disabled) {
+  if (!props.disabled && selectedOption.value) {
     opened.value = !opened.value
 
-    emit('click', event, selectedOption.value?.value)
+    emit('click', event, selectedOption.value.value)
   }
 }
 

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: LayerIconIcon) => {
+    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,7 +40,7 @@ export interface FieldInput {
   fullWidth?: boolean
   hideError?: boolean
   label?: BaseTextText
-  labelIcon?: BaseIconValue
+  labelIcon?: string
   lineThrough?: boolean
   loading?: boolean
   lowercaseOnly?: boolean
@@ -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,3 +1,4 @@
+import type { LayerIconIcon as LayerIconIconType, LayerIconValue as LayerIconValueType } from '../composables/useLayerIcons'
 import type * as Bases from './bases'
 import type * as Fields from './fields'
 
@@ -9,13 +10,9 @@ declare module '@vue/runtime-core' {
 }
 
 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
@@ -95,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.65",
+  "version": "0.1.67",
   "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"
   }
-}
+}