classcard-ui 0.2.250 → 0.2.251

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "classcard-ui",
-  "version": "0.2.250",
+  "version": "0.2.251",
   "main": "dist/classcard-ui.common.js",
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/components/CSelect/CSelect.vue

@@ -11,39 +11,53 @@
       </div>
       <span v-if="hint" class="text-sm text-gray-500">{{ hint }}</span>
     </div>
+    
     <div class="relative" :class="label ? 'mt-1' : ''">
-      <button
-        type="button"
+      <input
+        type="text"
+        v-model="selectSearch"
         @click="toggleDropdown = !toggleDropdown"
         @focus="type == 'tertiary' ? (showFocus = true) : ''"
         @blur="close()"
+        @keyup="search()"
         aria-haspopup="listbox"
         aria-expanded="true"
         aria-labelledby="listbox-label"
         :class="classes"
-        class="relative w-full rounded-md pl-2 pr-10 py-2 text-left cursor-pointer focus:outline-none sm:text-sm disabled:opacity-50"
+        class="relative w-full rounded-md pl-3 pr-10 py-2 text-left cursor-pointer focus:outline-none sm:text-sm disabled:opacity-50"
         :disabled="isDisabled"
-      >
+      />
+
+      <div class="absolute top-2 left-3 flex pointer-events-none">
         <span class="flex items-center">
           <c-avatar
-            v-if="showImage"
+            v-if="showImage && !selectSearch"
             size="extraextrasmall"
             image="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80"
             :rounded="true"
           ></c-avatar>
-          <c-icon v-if="icon" :class="icon.class" :name="icon.name" :type="icon.type"></c-icon>
+          <c-icon 
+            v-if="icon && !selectSearch"
+            :class="icon.class"
+            :name="icon.name"
+            :type="icon.type"
+            >
+          </c-icon>
           <span :class="showImage ? 'ml-3' : ''" class="block truncate">
-            {{ selectedValue ? selectedValue : placeholder }}
+            {{ selectedValue ? selectedValue : 
+              selectSearch && selectSearch.length > 0 ? null : placeholder  
+            }}
           </span>
         </span>
-
-        <span
+      </div>
+      <div class="absolute top-2.5 right-3 flex pointer-events-none">
+        <div
           v-if="type == 'tertiary' ? showFocus : true"
-          class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none"
-        >
+          class="right-0 flex items-center pointer-events-none"
+          >
           <c-icon name="selector" type="solid" class="h-5 w-5"></c-icon>
-        </span>
-      </button>
+        </div>
+      </div>
       <transition
         enter-active-class="transition ease-out duration-100"
         enter-class="transform opacity-0 scale-95"
@@ -75,7 +89,7 @@
               {{ addAction.label }}
             </li>
             <li
-              v-for="(option, index) in options"
+              v-for="(option, index) in renderOptions"
               :key="index"
               id="listbox-option-0"
               role="option"
@@ -184,6 +198,8 @@ export default {
       selectedValue: this.value !== null && this.value.option ? this.value.option : this.value,
       showSelectedValue: false,
       showFocus: false,
+      selectSearch: null,
+      renderOptions: this.options
     };
   },
   computed: {
@@ -200,7 +216,7 @@ export default {
   },
   methods: {
     handleSelect(event, option) {
-      this.selectedValue = option.option;
+      this.selectedValue = option[this.renderOptionName];
       this.$emit("onChangeValue", option);
       this.toggleDropdown = false;
     },
@@ -211,6 +227,16 @@ export default {
       this.toggleDropdown = false;
       this.type === "tertiary" ? (this.showFocus = false) : "";
     },
+    search() {
+      if(!this.selectSearch && this.selectSearch == '') {
+          this.renderOptions = this.options;
+      }
+      let options = [...this.options];
+      this.renderOptions = options.filter((option) => {
+        return option[this.renderOptionName].toLowerCase().includes(this.selectSearch.toLowerCase());
+      });
+      console.log(this.renderOptions);
+    }
   },
   watch: {
     value() {

package/src/stories/CSelect.stories.js

@@ -32,7 +32,7 @@ Default.args = {
   helpText: "This information is displayed on booking page",
   hint: "Optional",
   showImage: true,
-  value: {},
+  value: null,
   renderOptionName: "code",
   options: [
     { code: "one", value: "onee" },