fix: select component

src/assets/css/style.css

@@ -705,6 +705,40 @@ select {
   --tw-backdrop-sepia:  ;
 }
 
+.container {
+  width: 100%;
+}
+
+@media (min-width: 640px) {
+  .container {
+    max-width: 640px;
+  }
+}
+
+@media (min-width: 768px) {
+  .container {
+    max-width: 768px;
+  }
+}
+
+@media (min-width: 1024px) {
+  .container {
+    max-width: 1024px;
+  }
+}
+
+@media (min-width: 1280px) {
+  .container {
+    max-width: 1280px;
+  }
+}
+
+@media (min-width: 1536px) {
+  .container {
+    max-width: 1536px;
+  }
+}
+
 html {
   height: 100%;
   --tw-bg-opacity: 1;
@@ -960,6 +994,10 @@ body {
   top: 100%;
 }
 
+.top-16 {
+  top: 4rem;
+}
+
 .z-10 {
   z-index: 10;
 }
@@ -984,6 +1022,10 @@ body {
   grid-column: span 7 / span 7;
 }
 
+.m-auto {
+  margin: auto;
+}
+
 .mx-2 {
   margin-left: 0.5rem;
   margin-right: 0.5rem;
@@ -1313,6 +1355,10 @@ body {
   width: 100%;
 }
 
+.w-72 {
+  width: 18rem;
+}
+
 .max-w-2xl {
   max-width: 42rem;
 }
@@ -1838,6 +1884,21 @@ body {
   background-color: rgb(204 204 0 / var(--tw-bg-opacity));
 }
 
+.bg-red-500 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(255 0 0 / var(--tw-bg-opacity));
+}
+
+.bg-blue-200 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(191 219 254 / var(--tw-bg-opacity));
+}
+
+.bg-secondary-300 {
+  --tw-bg-opacity: 1;
+  background-color: rgb(102 194 208 / var(--tw-bg-opacity));
+}
+
 .bg-opacity-100 {
   --tw-bg-opacity: 1;
 }
@@ -2022,6 +2083,11 @@ body {
   padding-bottom: 1.5rem;
 }
 
+.py-5 {
+  padding-top: 1.25rem;
+  padding-bottom: 1.25rem;
+}
+
 .pb-4 {
   padding-bottom: 1rem;
 }
@@ -2464,6 +2530,10 @@ body {
   --tw-ring-color: rgb(209 213 219 / var(--tw-ring-opacity));
 }
 
+.ring-black\/5 {
+  --tw-ring-color: rgb(0 0 0 / 0.05);
+}
+
 .ring-opacity-5 {
   --tw-ring-opacity: 0.05;
 }
@@ -2753,6 +2823,10 @@ body {
   --tw-ring-color: rgb(255 255 255 / var(--tw-ring-opacity));
 }
 
+.focus-visible\:ring-white\/75:focus-visible {
+  --tw-ring-color: rgb(255 255 255 / 0.75);
+}
+
 .focus-visible\:ring-opacity-75:focus-visible {
   --tw-ring-opacity: 0.75;
 }

src/components/Select.vue

@@ -76,19 +76,15 @@ const show = ref(false)
       >
         <ComboboxInput
           class="w-full border-none py-2 pl-3 pr-10 bg-gray-200 text-sm leading-5 text-gray-900 focus:ring-0"
+          :placeholder="selected.name"
           :displayValue="(item: any) => (show || open ? '' : item.name)"
           @change="query = $event.target.value"
-          @click="show = true"
-          @blur="show = false"
-          defaultValue=""
         />
-
         <ComboboxButton class="absolute inset-y-0 right-0 flex items-center pr-2">
           <ChevronUpDownIcon class="h-5 w-5 text-gray-400" aria-hidden="true" />
         </ComboboxButton>
       </div>
       <TransitionRoot
-        :show="show || open"
         leave="transition ease-in duration-100"
         leaveFrom="opacity-100"
         leaveTo="opacity-0"

src/views/TestView.vue

@@ -1,31 +1 @@
-<template>
+<template></template>
-  <div>
-    <fieldset>
-      <div class="space-y-4 sm:flex sm:items-center sm:space-y-0 sm:space-x-10">
-        <div
-          v-for="item in radioItems"
-          :key="item.id"
-          class="flex items-center"
-        >
-          <input
-            :id="item.id"
-            type="radio"
-            name="radio"
-            class="h-4 w-4 border-gray-300 text-primary-500 peer focus:ring-primary-500"
-          />
-          <label
-            :for="item.id"
-            class="ml-3 block text-sm font-medium text-gray-700 peer-checked:text-primary-500"
-            >{{ item.title }}</label
-          >
-        </div>
-      </div>
-    </fieldset>
-  </div>
-</template>
-
-<script setup lang="ts">
-defineProps({
-  radioItems: Object
-})
-</script>