Added a new size xl for Select component, and an id must be given

Author: j0h-dev

pages/UI/select.vue

@@ -7,21 +7,28 @@
  <Heading size="sm">Default Select</Heading>
  <div class="flex w-full flex-row flex-wrap justify-evenly gap-6">
  <div class="flex flex-col gap-4">
- <Select label="Choose one" v-model="value" size="sm">
+ <Select label="Choose one" v-model="value" size="sm" id="select-01">
  <option value="" disabled selected></option>
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
  <option value="3">Test 3</option>
  </Select>
 
- <Select label="Choose one" v-model="value" size="md">
+ <Select label="Choose one" v-model="value" size="md" id="select-02">
  <option value="" disabled selected></option>
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
  <option value="3">Test 3</option>
  </Select>
 
- <Select label="Choose one" v-model="value" size="lg">
+ <Select label="Choose one" v-model="value" size="lg" id="select-03">
+ <option value="" disabled selected></option>
+ <option value="1">Test 1</option>
+ <option value="2">Test 2</option>
+ <option value="3">Test 3</option>
+ </Select>
+
+ <Select label="Choose one" v-model="value" size="xl" id="select-04">
  <option value="" disabled selected></option>
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
@@ -30,21 +37,28 @@
  </div>
 
  <div class="flex flex-col gap-4">
- <Select label="Choose one" v-model="value" size="sm" disabled>
+ <Select label="Choose one" v-model="value" size="sm" disabled id="select-05">
+ <option value="" disabled selected></option>
+ <option value="1">Test 1</option>
+ <option value="2">Test 2</option>
+ <option value="3">Test 3</option>
+ </Select>
+
+ <Select label="Choose one" v-model="value" size="md" disabled id="select-06">
  <option value="" disabled selected></option>
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
  <option value="3">Test 3</option>
  </Select>
 
- <Select label="Choose one" v-model="value" size="md" disabled>
+ <Select label="Choose one" v-model="value" size="lg" disabled id="select-07">
  <option value="" disabled selected></option>
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>
  <option value="3">Test 3</option>
  </Select>
 
- <Select label="Choose one" v-model="value" size="lg" disabled>
+ <Select label="Choose one" v-model="value" size="xl" disabled id="select-08">
  <option value="" disabled selected></option>
  <option value="1">Test 1</option>
  <option value="2">Test 2</option>

ui-components/Select.vue

@@ -1,8 +1,7 @@
 <template>
  <div :class="base()">
  <select
- :id="selectId"
- :name="selectId"
+ :id="$props.id"
  :required="props.required"
  :class="select()"
  :value="props.modelValue"
@@ -11,7 +10,7 @@
  >
  <slot />
  </select>
- <label :for="selectId" :class="label()">
+ <label :for="$props.id" :class="label()">
  {{ props.label }}
  </label>
  <Icon name="solar:alt-arrow-down-bold" :class="svg()" />
@@ -44,11 +43,16 @@ const selectTV = tv({
  svg: 'right-2 top-3 h-5 w-5'
  },
  md: {
+ label: '-top-2 left-3.5 px-1.5 text-xs',
+ select: 'h-10 px-4',
+ svg: 'right-2 top-3 h-5 w-5'
+ },
+ lg: {
  label: '-top-2 left-3 px-1.5 text-sm',
  select: 'h-12 px-4',
  svg: 'right-2 top-3.5 h-6 w-6'
  },
- lg: {
+ xl: {
  label: 'text-md -top-3 left-3.5 px-2',
  select: 'h-14 px-5 text-lg',
  svg: 'right-2 top-4 h-7 w-7'
@@ -72,10 +76,10 @@ type Props = {
  label?: string
 
  // Select props
+ id: string
  modelValue?: string | number
  disabled?: boolean
  required?: boolean
- id?: string
 }
 
 const emit = defineEmits(['update:modelValue'])
@@ -92,13 +96,6 @@ const emitUpdate = (event: Event) => {
 
 const props = defineProps<Props>()
 
-const selectId = ref(props.id || '')
-onMounted(() => {
- if (!props.id) {
- selectId.value = crypto.randomUUID()
- }
-})
-
 const { base, select, svg, label } = selectTV({
  size: props.size,
  variant: props.variant