@saasmakers/ui 0.1.101 → 0.1.103

package/app/components/fields/FieldCheckbox.vue

@@ -17,9 +17,9 @@ withDefaults(defineProps<Omit<FieldCheckbox, 'modelValue'>>(), {
   validation: undefined,
 })
 
-const modelValue = defineModel<FieldCheckbox['modelValue']>({ default: false })
+const id = useId()
 
-const uuid = ref(`${Math.floor((1 + Math.random()) * 0x100000)}`)
+const modelValue = defineModel<FieldCheckbox['modelValue']>({ default: false })
 </script>
 
 <template>
@@ -31,7 +31,7 @@ const uuid = ref(`${Math.floor((1 + Math.random()) * 0x100000)}`)
     <div class="flex flex-1 items-center">
       <input
         v-if="!loading"
-        :id="uuid"
+        :id="id"
         v-model="modelValue"
         class="border border-gray-300 rounded-lg accent-indigo-700 transition-shadow flex-initial dark:border-gray-700"
         :class="{
@@ -56,7 +56,7 @@ const uuid = ref(`${Math.floor((1 + Math.random()) * 0x100000)}`)
         v-if="label"
         class="flex-1"
         :disabled="disabled"
-        :for-field="uuid"
+        :for-field="id"
         has-margin-left
         :icon="labelIcon"
         :label="label"

package/app/components/fields/FieldInput.vue

@@ -39,10 +39,11 @@ defineSlots<{
   label?: () => VNode[]
 }>()
 
+const id = useId()
+
 const modelValue = defineModel<FieldInput['modelValue']>({ default: '' })
 
 const input = ref<HTMLInputElement>()
-const uuid = ref(`${Math.floor((1 + Math.random()) * 0x100000)}`)
 
 const { isDesktopBrowser } = useDevice()
 
@@ -125,7 +126,7 @@ defineExpose({ focus })
     >
       <FieldLabel
         :disabled="disabled"
-        :for-field="uuid"
+        :for-field="id"
         has-margin-bottom
         :icon="labelIcon"
         :label="label"
@@ -148,7 +149,7 @@ defineExpose({ focus })
       <slot name="inputLeft" />
 
       <input
-        :id="uuid"
+        :id="id"
         ref="input"
         :autocomplete="autocomplete ? 'on' : 'off'"
         class="h-full w-full flex-1 appearance-none items-center rounded-lg outline-none placeholder-gray-600 dark:placeholder-gray-400"

package/app/components/fields/FieldSelect.vue

@@ -30,11 +30,11 @@ const emit = defineEmits<{
 
 const { getIcon } = useLayerIcons()
 const { fadeIn } = useMotion()
+const id = useId()
 
 const modelValue = defineModel<FieldSelect['modelValue']>({ default: '' })
 
 const opened = ref(false)
-const uuid = ref(`${Math.floor((1 + Math.random()) * 0x100000)}`)
 
 const computedColumns = computed(() => {
   if (props.columns.length) {
@@ -139,7 +139,7 @@ function onOptionClick(event: MouseEvent, option: FieldSelectOption) {
     <FieldLabel
       v-if="label"
       :disabled="disabled"
-      :for-field="uuid"
+      :for-field="id"
       has-margin-bottom
       :icon="labelIcon"
       :label="label"
@@ -185,6 +185,7 @@ function onOptionClick(event: MouseEvent, option: FieldSelectOption) {
             <BaseIcon
               v-if="selectedOption.icon"
               class="pointer-events-none mr-2"
+              :color="selectedOption.iconColor"
               :icon="selectedOption.icon"
             />
 
@@ -262,6 +263,7 @@ function onOptionClick(event: MouseEvent, option: FieldSelectOption) {
                 <BaseIcon
                   v-if="option.text"
                   class="pointer-events-none mr-2 flex-initial"
+                  :color="option.iconColor"
                   :icon="option.icon"
                   :size="size"
                   :text="option.text"

package/app/components/fields/FieldTextarea.vue

@@ -26,10 +26,11 @@ const emit = defineEmits<{
   click: [event: MouseEvent, value: string]
 }>()
 
+const id = useId()
+
 const modelValue = defineModel<FieldTextarea['modelValue']>({ default: '' })
 
 const textarea = ref<HTMLTextAreaElement>()
-const uuid = ref(`${Math.floor((1 + Math.random()) * 0x100000)}`)
 
 const { isDesktopBrowser } = useDevice()
 
@@ -56,7 +57,7 @@ function onFieldClick(event: MouseEvent) {
     <FieldLabel
       v-if="label"
       :disabled="disabled"
-      :for-field="uuid"
+      :for-field="id"
       has-margin-bottom
       :icon="labelIcon"
       :label="label"
@@ -65,7 +66,7 @@ function onFieldClick(event: MouseEvent) {
     />
 
     <textarea
-      :id="uuid"
+      :id="id"
       ref="textarea"
       v-model="modelValue"
       v-bind="{ 'data-enable-grammarly': 'false' }"

package/app/components/fields/FieldTime.stories.ts

@@ -13,7 +13,6 @@ export default {
     disabled: { control: 'boolean' },
     hideError: { control: 'boolean' },
     icon: { control: 'text' },
-    id: { control: 'text' },
     label: { control: 'text' },
     labelIcon: { control: 'text' },
     name: { control: 'text' },
@@ -32,7 +31,6 @@ export default {
 
 export const Default: StoryObj<typeof FieldTime> = {
   args: {
-    id: 'time-1',
     label: 'Time Label',
     modelValue: '',
   } satisfies Partial<FieldTime>,

package/app/components/fields/FieldTime.vue

@@ -20,11 +20,11 @@ const emit = defineEmits<{
 }>()
 
 const { getIcon } = useLayerIcons()
+const id = useId()
 
 const modelValue = defineModel<FieldTime['modelValue']>({ default: '' })
 
 const inputRef = ref<HTMLInputElement>()
-const uuid = ref(`${Math.floor((1 + Math.random()) * 0x100000)}`)
 
 function onFieldBlur(event: FocusEvent) {
   emit('blur', event, modelValue.value, props.name)
@@ -43,7 +43,7 @@ function onContainerClick() {
     <FieldLabel
       v-if="label"
       :disabled="disabled"
-      :for-field="uuid"
+      :for-field="id"
       has-margin-bottom
       :icon="labelIcon"
       :label="label"
@@ -71,7 +71,7 @@ function onContainerClick() {
       />
 
       <input
-        :id="uuid"
+        :id="id"
         ref="inputRef"
         v-model="modelValue"
         class="cursor-pointer text-sm outline-none [&::-webkit-calendar-picker-indicator]:hidden"

package/app/types/fields.d.ts

@@ -129,6 +129,7 @@ export interface FieldSelectColumn {
 
 export interface FieldSelectOption {
   icon?: string
+  iconColor?: BaseColor
   text: string
   value: string
 }

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@saasmakers/ui",
   "type": "module",
-  "version": "0.1.101",
+  "version": "0.1.103",
   "private": false,
   "description": "Reusable Nuxt UI components for SaaS Makers projects",
   "license": "MIT",