feat(component): New select component

docs/components/select/examples/DisabledSelect.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <Select v-model="selected" :options="countries" placeholder="You can't select" :disabled="true" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Select } from '../../../../src/index'
+
+let selected = ref('')
+const countries = [
+  { value: 'us', name: 'United States' },
+  { value: 'ca', name: 'Canada' },
+  { value: 'fr', name: 'France' },
+]
+</script>

docs/components/select/examples/SelectExample.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <Select v-model="selected" :options="countries" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Select } from '../../../../src/index'
+
+let selected = ref('')
+const countries = [
+  { value: 'us', name: 'United States' },
+  { value: 'ca', name: 'Canada' },
+  { value: 'fr', name: 'France' },
+]
+</script>

docs/components/select/examples/SelectSize.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <Select v-model="selected" :options="countries" size="lg" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Select } from '../../../../src/index'
+
+let selected = ref('')
+const countries = [
+  { value: 'us', name: 'United States' },
+  { value: 'ca', name: 'Canada' },
+  { value: 'fr', name: 'France' },
+]
+</script>

docs/components/select/examples/UnderlinedSelect.vue

@@ -0,0 +1,17 @@
+<template>
+  <div>
+    <Select v-model="selected" :options="countries" :underline="true" />
+  </div>
+</template>
+
+<script setup>
+import { ref } from 'vue'
+import { Select } from '../../../../src/index'
+
+let selected = ref('')
+const countries = [
+  { value: 'us', name: 'United States' },
+  { value: 'ca', name: 'Canada' },
+  { value: 'fr', name: 'France' },
+]
+</script>