Refactor UI component IDs

Author: j0h-dev

ui-components/Checkbox.vue

@@ -3,12 +3,12 @@
  <input
  :class="checkbox()"
  type="checkbox"
- :id="checkboxId"
+ :id="$props.id"
  :checked="modelValue"
  @input="emitUpdate"
  :disabled="disabled"
  />
- <label :class="label()" :for="checkboxId">
+ <label :class="label()" :for="$props.id">
  {{ props.label }}
  </label>
  <small :class="small()">
@@ -91,9 +91,9 @@ type Props = {
  label?: string
 
  // Checkbox props
+ id: string
  modelValue?: boolean
  disabled?: boolean,
- id?: string
 }
 
 const emit = defineEmits(['update:modelValue'])
@@ -104,13 +104,6 @@ const emitUpdate = (event: Event) => {
 
 const props = defineProps<Props>()
 
-const checkboxId = ref(props.id || '')
-onMounted(() => {
- if (!props.id) {
- checkboxId.value = crypto.randomUUID()
- }
-})
-
 const { base, checkbox, small, label, svg } = checkboxTV({
  size: props.size,
  variant: props.variant

ui-components/Input.vue

@@ -1,7 +1,7 @@
 <template>
  <div :class="base()">
  <input
- :id="inputId"
+ :id="$props.id"
  :type="$props.type"
  :placeholder="$props.label"
  :disabled="$props.disabled"
@@ -10,7 +10,7 @@
  @input="emitUpdate"
  :pattern="pattern"
  />
- <label :for="inputId" :class="label()">
+ <label :for="$props.id" :class="label()">
  {{ $props.label }}
  </label>
  <small :class="small()">
@@ -78,12 +78,12 @@ type Props = {
  label?: string
 
  // Text input props
+ id: string
  value?: string | number | null
  modelValue?: string | number | null
  disabled?: boolean
  pattern?: string
  type?: 'text' | 'password' | 'number'
- id?: string
 
  // Number input
  min?: number | string
@@ -106,13 +106,6 @@ const props = withDefaults(defineProps<Props>(), {
  type: 'text'
 })
 
-const inputId = ref(props.id || '')
-onMounted(() => {
- if (!props.id) {
- inputId.value = crypto.randomUUID()
- }
-})
-
 const { base, input, small, label } = inputTV({
  size: props.size,
  variant: props.variant

ui-components/Toggle.vue

@@ -3,12 +3,12 @@
  <input
  :class="toggle()"
  type="checkbox"
- :id="toggleId"
+ :id="$props.id"
  :value="modelValue"
  @input="emitUpdate"
  :disabled="disabled"
  />
- <label :class="label()" :for="toggleId">
+ <label :class="label()" :for="$props.id">
  {{ props.helper }}
  </label>
  <small :class="small()">
@@ -77,9 +77,9 @@ type Props = {
  label?: string
 
  // Toggle props
+ id: string
  modelValue?: boolean
  disabled?: boolean
- id?: string
 }
 
 const emit = defineEmits(['update:modelValue'])
@@ -90,12 +90,6 @@ const emitUpdate = (event: Event) => {
 
 const props = defineProps<Props>()
 
-const toggleId = ref(props.id || '')
-onMounted(() => {
- if (!props.id) {
- toggleId.value = crypto.randomUUID()
- }
-})
 
 const { base, toggle, small, label, svg } = toggleTV({
  size: props.size,