From 954339f95a2e0bfdb73dd9dad9733b39f7d9cf9c Mon Sep 17 00:00:00 2001
From: "Gretta M.R" <gretta@gits.id>
Date: Wed, 11 Jan 2023 16:31:19 +0700
Subject: [PATCH] fix(VSelect): fix unable to set initialValue

---
 packages/select/src/VSelect.stories.ts | 243 +++++++++++++++++--------
 packages/select/src/VSelect.vue        | 128 +++++++------
 2 files changed, 244 insertions(+), 127 deletions(-)

diff --git a/packages/select/src/VSelect.stories.ts b/packages/select/src/VSelect.stories.ts
index f31b18ecb..cc6c24765 100644
--- a/packages/select/src/VSelect.stories.ts
+++ b/packages/select/src/VSelect.stories.ts
@@ -36,8 +36,8 @@ const Template: Story<typeof VSelect> = (args) => ({
     return {args, value};
   },
   template: `
-  <v-select v-bind="args" v-model="value" />
-  <pre class="mt-2">Model Value: {{ value }}</pre>
+    <v-select v-bind="args" v-model="value" />
+    <pre class="mt-2">Model Value: {{ value }}</pre>
   `,
 });
 
@@ -156,9 +156,9 @@ export const Sizes: Story<typeof VSelect> = (args) => ({
     return {args};
   },
   template: `
-  <v-select v-bind="args" label="Small" wrapper-class="mb-4" size="sm" />
-  <v-select v-bind="args" label="Default" wrapper-class="mb-4" />
-  <v-select v-bind="args" label="Large" wrapper-class="mb-4" size="lg" />
+    <v-select v-bind="args" label="Small" wrapper-class="mb-4" size="sm" />
+    <v-select v-bind="args" label="Default" wrapper-class="mb-4" />
+    <v-select v-bind="args" label="Large" wrapper-class="mb-4" size="lg" />
   `,
 });
 
@@ -204,27 +204,27 @@ export const Validation: Story<{}> = () => ({
   },
   template: `
     <form @submit="onSubmit" class="border-none">
-      <v-select
-        wrapper-class="mb-4"
-        name="genre"
-        label="Genre"
-        placeholder="Select your genre"
-        :items="genres"
-      />
-      <v-select
-        wrapper-class="mb-4"
-        name="gender"
-        label="Gender"
-        placeholder="Select your gender"
-        :items="genders"
-      />
-      <div class="mt-4">
-        <v-btn type="submit">Submit</v-btn>
-        <v-btn type="button" text @click="resetForm">Reset</v-btn>
-      </div>
-      <pre>{{ {values} }}</pre>
+    <v-select
+      wrapper-class="mb-4"
+      name="genre"
+      label="Genre"
+      placeholder="Select your genre"
+      :items="genres"
+    />
+    <v-select
+      wrapper-class="mb-4"
+      name="gender"
+      label="Gender"
+      placeholder="Select your gender"
+      :items="genders"
+    />
+    <div class="mt-4">
+      <v-btn type="submit">Submit</v-btn>
+      <v-btn type="button" text @click="resetForm">Reset</v-btn>
+    </div>
+    <pre>{{ {values} }}</pre>
     </form>
-`,
+  `,
 });
 
 export const TestInputState: Story<{}> = (args) => ({
@@ -235,11 +235,18 @@ export const TestInputState: Story<{}> = (args) => ({
       gender: string().required().nullable().label('Gender'),
     });
 
-    console.log({args})
-    const modelValue = ref('');
-    const {handleSubmit, resetForm, values} = args.useForm ? useForm({
+    const modelValue = ref(args.setupWithInitialValue ? 'and' : undefined);
+    const modelValue2 = ref(args.setupWithInitialValue ? 'female' : undefined);
+    const initialValues = ref({
+      gender: args.setupWithInitialValue ? 'unw' : undefined,
+      gender2: args.setupWithInitialValue ? 'male' : undefined,
+      init: 'unw',
+    });
+
+    const {handleSubmit, resetForm, values, meta} = args.useForm ? useForm({
+      initialValues,
       validationSchema: schema,
-    }) : {handleSubmit: (cb: any) => null, resetForm: () => null, values: {}};
+    }) : {handleSubmit: (cb: any) => null, resetForm: () => null, values: {}, meta: {}};
 
     const onSubmit = handleSubmit((values: any) => {
       alert(JSON.stringify(values));
@@ -254,16 +261,17 @@ export const TestInputState: Story<{}> = (args) => ({
         text: 'Female',
         value: 'female',
       },
-    ]);
-
-    const genres = ref([
       {
-        text: 'Pop',
-        value: 'pop',
+        text: 'Androgynous',
+        value: 'and',
       },
       {
-        text: 'Rock',
-        value: 'rock',
+        text: 'Gender Fluid',
+        value: 'gfl',
+      },
+      {
+        text: 'Not willing to specify',
+        value: 'unw',
       },
     ]);
 
@@ -276,63 +284,156 @@ export const TestInputState: Story<{}> = (args) => ({
       alert(val);
     };
 
-    return {args, onSubmit, resetForm, values, genders, genres, modelValue, uncontrolledInput, onChange};
+    const resetVVForm = () => {
+      if (!args.useForm) {
+        alert('Story is not set up with Vee Validate Form. set `useForm` control to true to try this action.');
+      }
+
+      initialValues.value = {
+        gender: 'gfl',
+        gender2: 'female',
+        init: 'male',
+      };
+
+      resetForm();
+    };
+
+    return {
+      args,
+      onSubmit,
+      resetForm,
+      values,
+      genders,
+      modelValue,
+      modelValue2,
+      uncontrolledInput,
+      onChange,
+      resetVVForm,
+      meta,
+    };
   },
   template: `
-    <form @submit='onSubmit' class='border-none'>
-    <h1 class='mb-8 font-semibold'>{{args.useForm ? 'with' : 'without'}} VeeValidate Form</h1>
+    <form @submit="onSubmit" class="border-none relative pr-[11rem]">
+    <h1 class="mb-8 font-semibold">{{ args.useForm ? 'with' : 'without' }} VeeValidate Form</h1>
 
-    <div class='mb-4'>
+    <button
+      type="button" @click="resetVVForm"
+      class="bg-red-400 text-white text-sm p-2 rounded my-2"
+    >
+      Change Initial Value & Reset Form! <span class="text-[10px]">(Vee Validate only)</span>
+    </button>
+
+    <div class="mb-4">
       <v-select
-        name='gender'
-        label='Only Name - Gender'
-        placeholder='Select your gender'
-        :items='genders'
+        name="gender"
+        label="Only Name"
+        placeholder="Select your gender"
+        :items="genders"
+        :searchable="args.searchable"
+        :clearable="args.clearable"
       />
-      <div class='text-xs'>When used without vee validate, should not change "Vmodel" value or any other value unless
+      <div class="text-xs">When used without vee validate, should not change "Vmodel" value or any other value unless
         explicitly implemented
       </div>
     </div>
 
-    <v-select
-      wrapper-class='mb-4'
-      v-model='modelValue'
-      label='Only VModel - Gender'
-      placeholder='Select your gender'
-      :items='genders'
-    />
-
-    <div class='mb-4'>
+    <div class="mb-4">
       <v-select
-        v-model='modelValue'
-        name='gender'
-        label='VModel and Name - Gender'
-        placeholder='VModel and name prop'
-        :items='genders'
+        v-model="modelValue"
+        label="Only VModel"
+        placeholder="Select your gender"
+        :items="genders"
+        :searchable="args.searchable"
+        :clearable="args.clearable"
       />
-      <div class='text-xs'>Should update form values under "gender" key AND "modelValue"</div>
+      <div class="text-xs">Should update form values under "modelValue" only</div>
     </div>
 
+    <div class="mb-4">
+      <v-select
+        v-model="modelValue2"
+        name="gender2"
+        label="VModel and Name"
+        placeholder="VModel and name prop"
+        :items="genders"
+        :searchable="args.searchable"
+        :clearable="args.clearable"
+      />
+      <div class="text-xs">Should update form values under "gender2" key (with vee validate) AND "modelValue2"</div>
+    </div>
 
-    <div class='mb-4'>
+    <div class="mb-4">
       <v-select
-        label='Uncontrolled - Gender'
-        placeholder='Uncontrolled input'
-        @change='onChange'
-        :items='genders'
+        label="Uncontrolled"
+        placeholder="Uncontrolled input"
+        @change="onChange"
+        :items="genders"
+        :searchable="args.searchable"
+        :clearable="args.clearable"
       />
-      <div class='text-xs'>Should not change any value unless explicitly implemented</div>
+      <div class="text-xs">Should not change any value unless explicitly implemented</div>
     </div>
 
-    <div class='mt-4'>
-      <v-btn type='submit'>Submit</v-btn>
-      <v-btn type='button' text @click='resetForm'>Reset</v-btn>
+    <hr class="my-4" />
+
+    <blockquote class="bg-gray-800 text-white p-2 text-xs my-4">
+      <strong>CAUTION!</strong> Setting initialValue in VeeValidate won't affect inputs that are defined WITHOUT name
+      prop being defined!
+      <br />For unnamed input, use modelValue or value prop instead
+    </blockquote>
+
+    <div class="flex flex-wrap">
+      <div class="w-1/2 p-1">
+        <v-select
+          label="Initial w/ modelvalue"
+          placeholder="Select an item"
+          model-value="male"
+          :items="genders"
+          :searchable="args.searchable"
+          :clearable="args.clearable"
+        />
+      </div>
+
+      <div class="w-1/2 p-1">
+        <v-select
+          label="Initial w/ value"
+          placeholder="Select an item"
+          value="and"
+          :items="genders"
+          :searchable="args.searchable"
+          :clearable="args.clearable"
+        />
+      </div>
+
+      <div class="w-1/2 p-1">
+        <v-select
+          label="Initial w/ name:init"
+          name="init"
+          placeholder="Select an item"
+          :items="genders"
+          :searchable="args.searchable"
+          :clearable="args.clearable"
+        />
+      </div>
     </div>
-    
-    <pre>{{ {values, modelValue} }}</pre>
+
+    <div class="mt-4">
+      <v-btn type="submit">Submit</v-btn>
+      <v-btn type="button" text @click="resetForm">Reset</v-btn>
+    </div>
+
+    <pre class="text-xs fixed top-0 right-0 bg-white w-[11rem] max-h-[100%] overflow-auto">{{ {
+      values,
+      modelValue,
+      modelValue2,
+      initialValue: meta?.initialValues
+    } }}</pre>
     </form>
   `,
 });
 TestInputState.args = {
   useForm: false,
+  setupWithInitialValue: false,
+  searchable: false,
+  clearable: false,
 };
\ No newline at end of file
diff --git a/packages/select/src/VSelect.vue b/packages/select/src/VSelect.vue
index bf0fba9dd..73850560d 100644
--- a/packages/select/src/VSelect.vue
+++ b/packages/select/src/VSelect.vue
@@ -1,4 +1,4 @@
-<script setup lang='ts'>
+<script setup lang="ts">
 import {computed, PropType, ref, toRefs, watch} from 'vue';
 import {
   Listbox,
@@ -15,7 +15,7 @@ import '@gits-id/tooltip/dist/style.css';
 import '@gits-id/theme/transition.css';
 import {VSelectItem} from './types';
 
-type Val = string | number | boolean | VSelectItem;
+type Val = string | number | boolean | VSelectItem | Record<string, any>;
 
 const props = defineProps({
   /**
@@ -182,9 +182,10 @@ const emit =
     (e: 'search', value: string): void;
   }>();
 
-const uncontrolledValue = ref();
+const initialValue = ref<Val>(props.modelValue || props.value);
+const uncontrolledValue = ref<Val>(initialValue.value);
 
-const {value: selectedItem, errorMessage, setValue} = useField<Val>(name, rules, {
+const {value: vvValue, errorMessage, setValue, meta} = useField<Val>(name, rules, {
   initialValue: modelValue.value || value.value,
   ...props.fieldOptions,
 });
@@ -207,10 +208,20 @@ watch(modelValue, (val) => {
   uncontrolledValue.value = val;
 });
 
-watch(selectedItem, (val) => {
-  uncontrolledValue.value = val;
+watch(vvValue, (val) => {
+  if (name.value) {
+    uncontrolledValue.value = val;
+  }
 });
 
+watch(meta, (val) => {
+  if(name.value && val.initialValue !== initialValue.value) {
+    initialValue.value = val.initialValue as any;
+  }
+}, {
+  deep:true
+})
+
 const message = computed(() => {
   return errorMessage.value || props.errorMessages[0];
 });
@@ -264,11 +275,16 @@ const emitSelected = (val: any) => {
   emit('update:value', emittedVal);
   emit('change', emittedVal);
 };
+
+// setup
+if(name.value) {
+  uncontrolledValue.value = meta.initialValue ?? "";
+}
 </script>
 
 <template>
   <div
-    class='v-select'
+    class="v-select"
     :class="[
       `v-select-${color}`,
       `v-select--${size}`,
@@ -279,87 +295,87 @@ const emitSelected = (val: any) => {
       wrapperClass,
     ]"
   >
-    <Listbox v-model='uncontrolledValue'>
-      <ListboxLabel v-if='label' class='v-select-label' :class='labelClass'>
+    <Listbox v-model="uncontrolledValue">
+      <ListboxLabel v-if="label" class="v-select-label" :class="labelClass">
         {{ label }}
       </ListboxLabel>
-      <div class='v-select-panel'>
+      <div class="v-select-panel">
         <ListboxButton
-          class='v-select-button'
-          :class='[
+          class="v-select-button"
+          :class="[
             btnClass,
             {
               [shadowClass]: shadow,
             },
-          ]'
-          :disabled='disabled'
+          ]"
+          :disabled="disabled"
         >
           <div
-            class='v-select-selected'
+            class="v-select-selected"
             :class="{
-              'v-select-selected--placeholder': !selectedItem,
+              'v-select-selected--placeholder': !uncontrolledValue,
             }"
           >
-            <slot name='selected' :item='selectedItem'>
+            <slot name="selected" :item="uncontrolledValue">
               {{ selectedText }}
             </slot>
           </div>
-          <v-tooltip v-if='selectedItem && clearable'>
+          <v-tooltip v-if="uncontrolledValue && clearable">
             <template #activator>
               <button
-                type='button'
-                aria-label='Clear'
-                class='v-select-clearable-button'
-                @click='clear'
+                type="button"
+                aria-label="Clear"
+                class="v-select-clearable-button"
+                @click="clear"
               >
                 <Icon
-                  name='heroicons:x-mark'
-                  class='v-select-clearable-icon'
-                  aria-hidden='true'
+                  name="heroicons:x-mark"
+                  class="v-select-clearable-icon"
+                  aria-hidden="true"
                 />
               </button>
             </template>
             <span> {{ clearText }} </span>
           </v-tooltip>
-          <span class='w-auto'>
+          <span class="w-auto">
             <Icon
-              name='heroicons:chevron-down'
-              :size='iconSize'
-              class='v-select-icon'
-              aria-hidden='true'
+              name="heroicons:chevron-down"
+              :size="iconSize"
+              class="v-select-icon"
+              aria-hidden="true"
             />
           </span>
         </ListboxButton>
 
-        <transition :name='transition'>
+        <transition :name="transition">
           <ListboxOptions
-            class='v-select-options'
+            class="v-select-options"
             :class="top ? 'bottom-10' : ''"
           >
-            <div v-if='searchable' class='v-select-searchable'>
+            <div v-if="searchable" class="v-select-searchable">
               <v-input
-                v-model='search'
-                :size='searchSize'
-                :placeholder='searchPlaceholder'
+                v-model="search"
+                :size="searchSize"
+                :placeholder="searchPlaceholder"
                 clearable
-                v-bind='searchProps'
+                v-bind="searchProps"
               />
             </div>
             <div
-              v-if='searchable && !filteredItems.length'
-              class='px-4 pb-2 pt-3'
+              v-if="searchable && !filteredItems.length"
+              class="px-4 pb-2 pt-3"
             >
-              <slot name='empty'> No results</slot>
+              <slot name="empty"> No results</slot>
             </div>
             <ListboxOption
-              v-for='(item, index) in filteredItems'
-              v-slot='{selected}'
-              :key='index'
-              :value='returnObject ? item : item?.[itemValue]'
-              as='template'
+              v-for="(item, index) in filteredItems"
+              v-slot="{selected}"
+              :key="index"
+              :value="returnObject ? item : item?.[itemValue]"
+              as="template"
             >
               <li
-                class='group v-select-option'
+                class="group v-select-option"
                 :class="[
                   {
                     'v-select-option--active': selected,
@@ -367,23 +383,23 @@ const emitSelected = (val: any) => {
                 ]"
               >
                 <span
-                  v-if='!hideCheckIcon'
-                  class='v-select-option-check'
+                  v-if="!hideCheckIcon"
+                  class="v-select-option-check"
                   :class="{
                     'v-select-option-check--active': selected,
                   }"
                 >
-                  <slot v-if='selected' name='icon'>
+                  <slot v-if="selected" name="icon">
                     <Icon
-                      :name='checkIcon'
-                      :size='checkIconSize'
-                      class='v-select-option-check-icon'
-                      aria-hidden='true'
+                      :name="checkIcon"
+                      :size="checkIconSize"
+                      class="v-select-option-check-icon"
+                      aria-hidden="true"
                     />
                   </slot>
                 </span>
                 <span :class="['v-select-option-text']">
-                  <slot name='item' :item='item'>
+                  <slot name="item" :item="item">
                     {{ item?.[itemText] }}
                   </slot>
                 </span>
@@ -394,10 +410,10 @@ const emitSelected = (val: any) => {
       </div>
     </Listbox>
 
-    <div v-if='message' class='v-select-error' :class='errorClass'>
+    <div v-if="message" class="v-select-error" :class="errorClass">
       {{ message }}
     </div>
   </div>
 </template>
 
-<style src='./VSelect.scss' lang='scss'></style>
+<style src="./VSelect.scss" lang="scss"></style>