From 905858907bf3052f68184d5e3d6108e45e2d31cc Mon Sep 17 00:00:00 2001
From: dcruvolo <davidruvolo51@gmail.com>
Date: Fri, 11 Oct 2024 10:54:39 +0200
Subject: [PATCH] initial revisions of the select component

---
 .../components/input/Select.vue               | 31 ++++---
 .../pages/input/Select.story.vue              | 87 ++++++++++---------
 2 files changed, 62 insertions(+), 56 deletions(-)

diff --git a/apps/tailwind-components/components/input/Select.vue b/apps/tailwind-components/components/input/Select.vue
index e6e4b941f1..cbe33032f6 100644
--- a/apps/tailwind-components/components/input/Select.vue
+++ b/apps/tailwind-components/components/input/Select.vue
@@ -1,11 +1,13 @@
 <script setup lang="ts">
-import type { N } from "vitest/dist/reporters-MmQN-57K.js";
+interface ISelectOptions {
+  value: string | number;
+  label?: string;
+}
 
 withDefaults(
   defineProps<{
     id: string;
-    modelValue: string | number;
-    options: string[] | number[];
+    selectOptions: ISelectOptions[];
     required?: boolean;
     hasError?: boolean;
     placeholder?: string;
@@ -17,30 +19,31 @@ withDefaults(
   }
 );
 
-const emit = defineEmits(["update:modelValue"]);
+const modelValue = defineModel<string>();
 </script>
 
 <template>
   <select
-    :modelValue="modelValue"
-    @change="
-      $event.target &&
-        $emit('update:modelValue', ($event.target as HTMLSelectElement).value)
-    "
+    v-model="modelValue"
     :id="id"
     :required="required"
-    class="w-full pr-16 font-sans text-black text-gray-300 bg-white rounded-search-input h-10 ring-red-500 pl-3 shadow-search-input focus:shadow-search-input hover:shadow-search-input search-input-mobile border border-transparent border-r-8 outline outline-1 outline-select"
+    class="w-full pr-16 font-sans text-black text-gray-300 bg-white rounded-search-input h-10 pl-3 shadow-search-input focus:shadow-search-input hover:shadow-search-input search-input-mobile border border-transparent border-r-8 outline outline-1 outline-select"
     :class="{ 'border-red-500 text-red-500': hasError }"
   >
     <option disabled value="" :selected="modelValue === ''">
       {{ placeholder }}
     </option>
     <option
-      v-for="option in options"
-      :value="option"
-      :selected="modelValue === option"
+      v-for="option in selectOptions"
+      :value="option.value"
+      :selected="modelValue === option.value"
     >
-      {{ option }}
+      <template v-if="option.label">
+        {{ option.label }}
+      </template>
+      <template v-else>
+        {{ option.value }}
+      </template>
     </option>
   </select>
 </template>
diff --git a/apps/tailwind-components/pages/input/Select.story.vue b/apps/tailwind-components/pages/input/Select.story.vue
index bd6184e6b5..e15710c294 100644
--- a/apps/tailwind-components/pages/input/Select.story.vue
+++ b/apps/tailwind-components/pages/input/Select.story.vue
@@ -1,10 +1,13 @@
 <script setup lang="ts">
-const id = "story-input-1";
-const hasError = ref(false);
-const required = ref(false);
-const fieldValue = ref("");
+const hasError = ref<boolean>(false);
+const required = ref<boolean>(false);
+const fieldValue = ref<string>("");
 
-const options = ["option 1", "option 2", "option 3", "option 4"];
+const exampleData = [
+  { value: "level-1", label: "Level 1 (A)" },
+  { value: "level-2", label: "Level 2 (AA)" },
+  { value: "level-3", label: "Level 3 (AAA)" },
+];
 
 function clearValue() {
   fieldValue.value = "";
@@ -12,56 +15,56 @@ function clearValue() {
 </script>
 
 <template>
-  <div class="flex">
-    <div class="m-4 flex-3">
-      <div>
-        <InputSelect
-          :id="id"
-          :options="options"
-          v-model="fieldValue"
-          :has-error="hasError"
-          :required="required"
-        />
-      </div>
-    </div>
+  <div class="flex gap-5">
+    <form class="grow">
+      <legend class="text-title">Select the level of security required</legend>
+      <InputSelect
+        id="example-level-input"
+        :selectOptions="exampleData"
+        v-model="fieldValue"
+        :has-error="hasError"
+        :required="required"
+      />
+    </form>
 
-    <div class="m-4 flex-1">
-      <p>fieldValue value: {{ fieldValue }}</p>
-
-      <div class="mt-4">
-        <button
-          @click="clearValue"
-          class="bg-blue-500 hover:bg-blue-700 text-white py-2 px-4 rounded"
-        >
-          clear value
-        </button>
-      </div>
-
-      <fieldset class="mt-4 border border-gray-900 mb-2">
-        <legend class="m-2 px-2">Props</legend>
-        <div class="mb-2">
-          <label class="ml-1 hover:cursor-pointer" for="input-select-required">
-            required
-          </label>
+    <form class="m-4 flex-1 flex flex-col">
+      <legend class="text-title">Configure the select component</legend>
+      <fieldset class="my-2 [&_div]:my-1">
+        <legend class="text-title">Adjust props</legend>
+        <div>
           <input
             id="input-select-required"
-            class="ml-2 hover:cursor-pointer"
+            class="hover:cursor-pointer"
             type="checkbox"
             v-model="required"
           />
-        </div>
-        <div class="mb-2">
-          <label class="ml-1 hover:cursor-pointer" for="input-select-has-error">
-            hasError
+          <label class="hover:cursor-pointer" for="input-select-required">
+            required
           </label>
+        </div>
+        <div>
           <input
             id="input-select-has-error"
-            class="ml-2 hover:cursor-pointer"
+            class="hover:cursor-pointer"
             type="checkbox"
             v-model="hasError"
           />
+          <label class="ml-1 hover:cursor-pointer" for="input-select-has-error">
+            hasError
+          </label>
         </div>
       </fieldset>
-    </div>
+      <h3 class="text-title">Output</h3>
+      <output class="my-2 border border-gray-900 py-2 pl-2">
+        Selection: {{ fieldValue }}
+      </output>
+      <Button
+        type="outline"
+        size="small"
+        class="mt-4 mr-auto"
+        label="Clear value"
+        @click.prevent="clearValue"
+      />
+    </form>
   </div>
 </template>