classcard-ui 0.2.1068 → 0.2.1069

package/src/components/CSelect/CSelect.vue

@@ -1,530 +1,539 @@
-<template>
-  <div>
-    <div
-      :class="`flex w-full items-center ${
-        label ? 'justify-between' : 'justify-end'
-      }`"
-    >
-      <div class="flex items-center" v-if="label">
-        <!-- label of select field -->
-        <label class="block text-sm font-medium text-gray-900">
-          {{ label }}
-        </label>
-        <!-- asterisk sign to render if field is required -->
-        <p v-if="isRequired" class="ml-1 text-red-600">*</p>
-      </div>
-      <button
-        v-if="actionBtn"
-        class="block text-sm font-medium text-indigo-800 hover:underline"
-        @click="actionBtnEvent($event)"
-      >
-        {{ actionBtn }}
-      </button>
-      <span v-if="hint" class="text-sm text-gray-500">{{ hint }}</span>
-    </div>
-    <div class="relative">
-      <div :class="label || actionBtn ? 'mt-1' : ''">
-        <input
-          type="text"
-          v-model="selectSearch"
-          @click="toggleDropdown = !toggleDropdown"
-          @focus="type == 'tertiary' ? (showFocus = true) : ''"
-          @input="search()"
-          aria-haspopup="listbox"
-          aria-expanded="true"
-          aria-labelledby="listbox-label"
-          class="w-full cursor-pointer py-2 pl-2 pr-10 text-left text-sm focus:ring-0 disabled:opacity-50 sm:text-sm"
-          :class="[classes, inputClasses, customBorderRadius]"
-          :disabled="isDisabled"
-          autocomplete="off"
-          @blur="handleElementBlur"
-          :style="inputStyle"
-        />
-
-        <div
-          class="pointer-events-none absolute inset-0 left-3 flex h-[38px] items-center overflow-hidden pr-10"
-        >
-          <div class="flex items-center truncate" :style="selectedOptionStyles">
-            <div
-              class="flex shrink-0"
-              v-if="!addCheckBox && showImage && !selectSearch && value"
-            >
-              <c-avatar
-                v-if="value.photo"
-                size="extraextrasmall"
-                :image="value.photo"
-                :rounded="true"
-              ></c-avatar>
-              <c-avatar
-                v-else
-                size="extraextrasmall"
-                :nameInitials="value.initials"
-                :rounded="true"
-                :isDynamicallyColored="coloredAvatars"
-              ></c-avatar>
-            </div>
-            <div
-              class="flex flex-shrink-0 shrink-0"
-              v-if="
-                addCheckBox &&
-                showImage &&
-                !selectSearch &&
-                value &&
-                value.length
-              "
-            >
-              <c-avatar
-                v-if="value[0].photo"
-                size="extraextrasmall"
-                :image="value[0].photo"
-                :rounded="true"
-              ></c-avatar>
-              <c-avatar
-                v-else
-                size="extraextrasmall"
-                :nameInitials="value[0].initials"
-                :rounded="true"
-                :isDynamicallyColored="coloredAvatars"
-              ></c-avatar>
-            </div>
-            <c-icon
-              v-if="icon && !showImage && !selectSearch"
-              :class="icon.class"
-              :name="icon.name"
-              :type="icon.type"
-            >
-            </c-icon>
-            <div
-              v-if="addCheckBox"
-              class="flex items-center overflow-hidden text-sm"
-            >
-              <p
-                class="ml-1 block truncate"
-                v-if="
-                  selectedValuesArray.length > 0 &&
-                  (!selectSearch || selectSearch == '')
-                "
-              >
-                {{ selectedValuesArray[0][renderOptionName] }}
-              </p>
-              <p v-else>
-                {{ !selectSearch || selectSearch == "" ? placeholder : null }}
-              </p>
-              <p
-                v-if="
-                  selectedValuesArray.length > 1 &&
-                  (!selectSearch || selectSearch == '')
-                "
-                class="ml-1 block"
-              >
-                +{{ selectedValuesArray.length - 1 }}
-              </p>
-            </div>
-            <p
-              v-else
-              :class="showImage ? 'ml-3' : ''"
-              class="block truncate text-sm"
-            >
-              {{
-                selectedValue
-                  ? selectedValue
-                  : !selectSearch || selectSearch == ""
-                  ? placeholder
-                  : null
-              }}
-            </p>
-          </div>
-        </div>
-        <div class="pointer-events-none absolute top-2 right-3 flex">
-          <div
-            v-if="type == 'tertiary' ? showFocus : true"
-            class="pointer-events-none right-0 flex items-center"
-          >
-            <c-icon
-              name="selector"
-              type="solid"
-              class="h-5 w-5 text-gray-400"
-            ></c-icon>
-          </div>
-        </div>
-      </div>
-      <transition
-        enter-active-class="transition ease-out duration-100"
-        enter-class="transform opacity-0 scale-95"
-        enter-to-class="transform opacity-100 scale-100"
-        leave-active-class="transition ease-in duration-75"
-        leave-class="transform opacity-100 scale-100"
-        leave-to-class="transform opacity-0 scale-95"
-      >
-        <div
-          v-if="toggleDropdown && !isDisabled"
-          :class="`${dropDownToTop} absolute z-10 mt-1 ${
-            customWidth ? customWidth : 'w-full'
-          } rounded-md bg-white shadow-lg`"
-        >
-          <ul
-            tabindex="-1"
-            role="listbox"
-            aria-labelledby="listbox-label"
-            class="focus:outline-none max-h-60 overflow-auto rounded-md py-1 text-base ring-1 ring-gray-900 ring-opacity-5 sm:text-sm"
-            :class="dropDownToTop2"
-            @mousedown="handlePreventBlur"
-          >
-            <li
-              v-if="addAction"
-              @mousedown="actionEvent($event)"
-              class="relative flex cursor-pointer select-none py-2 pl-3 pr-9 text-indigo-500 hover:bg-indigo-100 hover:text-indigo-700"
-            >
-              <c-icon
-                type="outline"
-                class="mr-1 h-5 w-5 text-indigo-400 group-hover:text-indigo-500"
-                name="plus"
-              ></c-icon>
-              {{ addAction.label }}
-            </li>
-            <li
-              v-for="(option, index) in renderOptions"
-              :key="index"
-              id="listbox-option-0"
-              role="option"
-              :ref="`option-${String(index)}`"
-              @mousedown="handleSelect($event, option)"
-              class="group relative cursor-pointer select-none py-2 text-gray-900 hover:bg-indigo-700 hover:text-white"
-              :class="[
-                option.isDisabled ? 'pointer-events-none opacity-50' : '',
-                optionClasses,
-                addCheckBox ? 'pr-0 pl-2 ' : 'pr-9 pl-3',
-              ]"
-            >
-              <span class="flex w-full items-center justify-between">
-                <div
-                  class="flex items-center"
-                  :class="addCheckBox ? 'w-5/6' : 'w-auto'"
-                >
-                  <div v-if="option.showImage" class="flex-shrink-0">
-                    <c-avatar
-                      v-if="option.photo"
-                      size="extraextrasmall"
-                      :image="option.photo"
-                      :rounded="true"
-                    ></c-avatar>
-                    <c-avatar
-                      v-else
-                      size="extraextrasmall"
-                      :nameInitials="option.initials"
-                      :rounded="true"
-                      :isDynamicallyColored="coloredAvatars"
-                    ></c-avatar>
-                  </div>
-                  <c-icon
-                    class="flex-none"
-                    v-if="option.showIcon && option.icon"
-                    :class="option.icon.class"
-                    :name="option.icon.name"
-                    :type="option.icon.type"
-                  >
-                  </c-icon>
-                  <span
-                    :class="[
-                      option.photo || option.initials ? 'ml-3' : 'text-left',
-                      addCheckBox ? 'ml-2 mr-2 overflow-hidden' : '',
-                    ]"
-                    class="list-options block break-words font-normal"
-                    >{{ option[renderOptionName] }}
-                  </span>
-                </div>
-                <div
-                  v-if="addCheckBox"
-                  class="flex w-1/6 items-center justify-end"
-                >
-                  <c-checkbox
-                    class="w-full"
-                    :value="selectAll ? 1 : isChecked(option)"
-                  />
-                </div>
-              </span>
-
-              <span
-                class="absolute inset-y-0 right-0 flex items-center pr-4 text-indigo-600"
-                v-show="showSelectedValue"
-              >
-                <c-icon
-                  id="list-icon"
-                  name="check"
-                  type="solid"
-                  class="h-5 w-5"
-                ></c-icon>
-              </span>
-            </li>
-          </ul>
-        </div>
-      </transition>
-    </div>
-    <p
-      v-if="helpText && isValidate == true"
-      class="mt-1 text-left text-sm text-gray-500"
-    >
-      {{ helpText }}
-    </p>
-    <!-- validation error message -->
-    <p v-if="!isValidate" class="mt-2 text-left text-sm text-red-600">
-      {{ errorMessage }}
-    </p>
-  </div>
-</template>
-<script>
-import CIcon from "../CIcon/CIcon.vue";
-import CAvatar from "../CAvatar/CAvatar.vue";
-import CCheckbox from "../CCheckbox/CCheckbox.vue";
-import { isNumber } from "lodash";
-export default {
-  name: "CSelect",
-  components: { CIcon, CAvatar, CCheckbox },
-  props: {
-    // label of selectpicker
-    label: {
-      type: String,
-    },
-    // action button of selectpicker
-    actionBtn: {
-      type: String,
-      default: null,
-    },
-    // placeholder in selectpicker
-    placeholder: {
-      type: String,
-    },
-    // list to render in dropdown
-    options: {
-      type: Array,
-      required: true,
-    },
-    // show the avatars with different colors
-    coloredAvatars: {
-      type: Boolean,
-    },
-    // text below dropdown to describe more about the field
-    helpText: {
-      type: String,
-    },
-    // style input field
-    inputStyle: {
-      type: String,
-    },
-    // text adjacent to label of dropdown to provide hint about field
-    hint: { type: String },
-    // to show if image is present along with dropdown option
-    showImage: { type: Boolean },
-    // whether the select field is mandatory or not
-    isRequired: {
-      type: Boolean,
-    },
-    // validation is passed or not
-    isValidate: { type: Boolean, default: true },
-    // will truncate the text in input field
-    selectedOptionStyles: {
-      type: String,
-    },
-    // validation error message
-    errorMessage: {
-      type: String,
-    },
-    // perform action on first option in dropdown
-    addAction: { type: Object },
-    // icons in dropdown list
-    icon: { type: Object },
-    // value to set as default option in dropdown
-    value: { type: [Object, String, Array], default: null },
-    // type of dropdown - gray,tertiary or default
-    type: {
-      type: String,
-    },
-    //  name of the field in array to that contains text to render in dropdown
-    renderOptionName: {
-      type: String,
-      default: "option",
-    },
-    // whether to disable the selectpicker
-    isDisabled: {
-      type: Boolean,
-      default: false,
-    },
-    inputClasses: {
-      type: String,
-      default: "",
-    },
-    optionClasses: {
-      type: String,
-      default: "",
-    },
-    // to display the dropdown modal from bottom to top (absolute, bottom-full)
-    dropDownToTop: {
-      type: String,
-      default: "",
-    },
-    // to display the dropdown modal from bottom to top (absolute, bottom-full)
-    dropDownToTop2: {
-      type: String,
-      default: "",
-    },
-    // customised width for the dropdown
-    customWidth: {
-      type: String,
-      default: null,
-    },
-    customBorderRadius: {
-      type: String,
-      default: "rounded-md",
-    },
-    addCheckBox: {
-      type: Boolean,
-      default: false,
-    },
-    selectAll: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      toggleDropdown: false,
-      selectedValue: null,
-      showSelectedValue: false,
-      showFocus: false,
-      selectSearch: null,
-      renderOptions: this.options,
-      selectedValuesArray: [],
-    };
-  },
-  computed: {
-    classes() {
-      return {
-        "text-gray-900 border border-gray-200 hover:bg-gray-200 bg-gray-100 focus:ring-2 focus:border-gray-200 focus:ring-gray-200 focus:ring-offset-2 shadow-sm":
-          this.type == "gray",
-        "bg-white border border-gray-200 hover:bg-indigo-100 text-indigo-600 hover:text-indigo-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-200":
-          this.type == "tertiary",
-        "border border-gray-300 focus:ring-indigo-500 focus:border-indigo-500 bg-white shadow-sm focus:ring-1":
-          this.type == null,
-      };
-    },
-  },
-  methods: {
-    handleSelect(event, option) {
-      this.selectSearch = null;
-      this.selectedValue = option[this.renderOptionName];
-      if (this.addCheckBox) {
-        if (this.getIndex(option) == -1) {
-          this.selectedValuesArray = [...this.selectedValuesArray, option];
-        } else if (this.selectedValuesArray.length == 1) {
-          this.selectedValuesArray = [option];
-        } else {
-          this.selectedValuesArray = this.selectedValuesArray.filter(
-            (item) => option.id !== item.id
-          );
-        }
-        this.$emit("onChangeChecked", this.selectedValuesArray);
-      }
-
-      this.$emit("onChangeValue", option);
-      this.toggleDropdown = false;
-      this.type === "tertiary" ? (this.showFocus = false) : "";
-      this.renderOptions = this.options;
-    },
-    actionEvent(event) {
-      this.$emit("listAction", event);
-    },
-    actionBtnEvent(event) {
-      this.$emit("listAction", event);
-    },
-    handleElementBlur() {
-      this.toggleDropdown = false;
-      this.selectSearch = null;
-      this.renderOptions = this.options;
-    },
-    //this prevents the blur to be called when the user clicks on the scrollbar
-    handlePreventBlur(event) {
-      event.preventDefault();
-    },
-    // close() {
-    //   console.log("Close");
-    //   this.selectSearch = null;
-    //   this.toggleDropdown = false;
-    //   this.type === "tertiary" ? (this.showFocus = false) : "";
-    //   this.renderOptions = this.options;
-    // },
-    search() {
-      this.selectedValue = null;
-      if (!this.selectSearch || this.selectSearch == "") {
-        this.renderOptions = this.options;
-        return;
-      }
-      let options = [...this.options];
-      this.renderOptions = options.filter((option) => {
-        isNumber(option[this.renderOptionName])
-          ? (option[this.renderOptionName] =
-              option[this.renderOptionName].toString())
-          : "";
-        return option[this.renderOptionName]
-          .toLowerCase()
-          .includes(this.selectSearch.toLowerCase());
-      });
-
-      if (this.renderOptions.length === 0) {
-        console.log("Search ", this.selectSearch);
-        this.$emit("search-term", this.selectSearch);
-      }
-    },
-    async scrollOptionIntoView(refName) {
-      await this.$nextTick();
-      this.$refs[refName][0].scrollIntoView({
-        behavior: "smooth",
-        block: "nearest", //changed due to pop up issue in main menu
-      });
-    },
-    getIndex(option) {
-      return this.selectedValuesArray.findIndex((item) => item.id == option.id);
-    },
-    isChecked(option) {
-      return this.selectedValuesArray.findIndex(
-        (item) => item.id == option.id
-      ) == -1
-        ? 0
-        : 1;
-    },
-  },
-  watch: {
-    value() {
-      this.selectedValue =
-        this.value !== null && this.value[this.renderOptionName]
-          ? this.value[this.renderOptionName]
-          : this.value;
-      if (this.addCheckBox) {
-        this.selectedValuesArray = this.value ? this.value : [];
-      }
-    },
-    options() {
-      this.renderOptions = this.options;
-    },
-    toggleDropdown(newValue) {
-      if (newValue) {
-        let index = this.renderOptions.findIndex(
-          (option) => option[this.renderOptionName] === this.selectedValue
-        );
-        if (index !== -1) {
-          let refName = `option-${String(index)}`;
-          this.scrollOptionIntoView(refName);
-        }
-      }
-    },
-  },
-  mounted() {
-    this.selectedValue =
-      this.value !== null && this.value[this.renderOptionName]
-        ? this.value[this.renderOptionName]
-        : this.value;
-    if (this.addCheckBox) {
-      this.selectedValuesArray = this.value ? this.value : [];
-    }
-  },
-};
-</script>
+<template>
+  <div>
+    <div
+      :class="`flex w-full items-center ${
+        label ? 'justify-between' : 'justify-end'
+      }`"
+    >
+      <div class="flex items-center" v-if="label">
+        <!-- label of select field -->
+        <label class="block text-sm font-medium text-gray-900">
+          {{ label }}
+        </label>
+        <!-- asterisk sign to render if field is required -->
+        <p v-if="isRequired" class="ml-1 text-red-600">*</p>
+      </div>
+      <button
+        v-if="actionBtn"
+        class="block text-sm font-medium text-indigo-800 hover:underline"
+        @click="actionBtnEvent($event)"
+      >
+        {{ actionBtn }}
+      </button>
+      <span v-if="hint" class="text-sm text-gray-500">{{ hint }}</span>
+    </div>
+    <div class="relative">
+      <div :class="label || actionBtn ? 'mt-1' : ''">
+        <input
+          type="text"
+          v-model="selectSearch"
+          @click="toggleDropdown = !toggleDropdown"
+          @focus="type == 'tertiary' ? (showFocus = true) : ''"
+          @input="search()"
+          aria-haspopup="listbox"
+          aria-expanded="true"
+          aria-labelledby="listbox-label"
+          class="w-full cursor-pointer py-2 pl-2 pr-10 text-left text-sm focus:ring-0 disabled:opacity-50 sm:text-sm"
+          :class="[classes, inputClasses, customBorderRadius]"
+          :disabled="isDisabled"
+          autocomplete="off"
+          @blur="handleElementBlur"
+          :style="inputStyle"
+        />
+
+        <div
+          class="pointer-events-none absolute inset-0 left-3 flex h-[38px] items-center overflow-hidden pr-10"
+        >
+          <div class="flex items-center truncate" :style="selectedOptionStyles">
+            <div
+              class="flex shrink-0"
+              v-if="!addCheckBox && showImage && !selectSearch && value"
+            >
+              <c-avatar
+                v-if="value.photo"
+                size="extraextrasmall"
+                :image="value.photo"
+                :rounded="true"
+              ></c-avatar>
+              <c-avatar
+                v-else
+                size="extraextrasmall"
+                :nameInitials="value.initials"
+                :rounded="true"
+                :isDynamicallyColored="coloredAvatars"
+              ></c-avatar>
+            </div>
+            <div
+              class="flex flex-shrink-0 shrink-0"
+              v-if="
+                addCheckBox &&
+                showImage &&
+                !selectSearch &&
+                value &&
+                value.length
+              "
+            >
+              <c-avatar
+                v-if="value[0].photo"
+                size="extraextrasmall"
+                :image="value[0].photo"
+                :rounded="true"
+              ></c-avatar>
+              <c-avatar
+                v-else
+                size="extraextrasmall"
+                :nameInitials="value[0].initials"
+                :rounded="true"
+                :isDynamicallyColored="coloredAvatars"
+              ></c-avatar>
+            </div>
+            <c-icon
+              v-if="icon && !showImage && !selectSearch"
+              :class="icon.class"
+              :name="icon.name"
+              :type="icon.type"
+            >
+            </c-icon>
+            <div
+              v-if="addCheckBox"
+              class="flex items-center overflow-hidden text-sm"
+            >
+              <p
+                class="ml-1 block truncate"
+                v-if="
+                  selectedValuesArray.length > 0 &&
+                  (!selectSearch || selectSearch == '')
+                "
+              >
+                {{ selectedValuesArray[0][renderOptionName] }}
+              </p>
+              <p v-else>
+                {{ !selectSearch || selectSearch == "" ? placeholder : null }}
+              </p>
+              <p
+                v-if="
+                  selectedValuesArray.length > 1 &&
+                  (!selectSearch || selectSearch == '')
+                "
+                class="ml-1 block"
+              >
+                +{{ selectedValuesArray.length - 1 }}
+              </p>
+            </div>
+            <p
+              v-else
+              :class="showImage ? 'ml-3' : ''"
+              class="block truncate text-sm"
+            >
+              {{
+                selectedValue
+                  ? selectedValue
+                  : !selectSearch || selectSearch == ""
+                  ? placeholder
+                  : null
+              }}
+            </p>
+          </div>
+        </div>
+        <div class="pointer-events-none absolute top-2 right-3 flex">
+          <div
+            v-if="type == 'tertiary' ? showFocus : true"
+            class="pointer-events-none right-0 flex items-center"
+          >
+            <c-icon
+              name="selector"
+              type="solid"
+              class="h-5 w-5 text-gray-400"
+            ></c-icon>
+          </div>
+        </div>
+      </div>
+      <transition
+        enter-active-class="transition ease-out duration-100"
+        enter-class="transform opacity-0 scale-95"
+        enter-to-class="transform opacity-100 scale-100"
+        leave-active-class="transition ease-in duration-75"
+        leave-class="transform opacity-100 scale-100"
+        leave-to-class="transform opacity-0 scale-95"
+      >
+        <div
+          v-if="toggleDropdown && !isDisabled"
+          :class="`${dropDownToTop} absolute z-10 mt-1 ${
+            customWidth ? customWidth : 'w-full'
+          } rounded-md bg-white shadow-lg`"
+        >
+          <ul
+            tabindex="-1"
+            role="listbox"
+            aria-labelledby="listbox-label"
+            class="focus:outline-none max-h-60 overflow-auto rounded-md py-1 text-base ring-1 ring-gray-900 ring-opacity-5 sm:text-sm"
+            :class="dropDownToTop2"
+            @mousedown="handlePreventBlur"
+          >
+            <li
+              v-if="addAction"
+              @mousedown="actionEvent($event)"
+              class="relative flex cursor-pointer select-none py-2 pl-3 pr-9 text-indigo-500 hover:bg-indigo-100 hover:text-indigo-700"
+            >
+              <c-icon
+                type="outline"
+                class="mr-1 h-5 w-5 text-indigo-400 group-hover:text-indigo-500"
+                name="plus"
+              ></c-icon>
+              {{ addAction.label }}
+            </li>
+            <li
+              v-for="(option, index) in renderOptions"
+              :key="index"
+              id="listbox-option-0"
+              role="option"
+              :ref="`option-${String(index)}`"
+              @mousedown="handleSelect($event, option)"
+              class="group relative cursor-pointer select-none py-2 text-gray-900 hover:bg-indigo-700 hover:text-white"
+              :class="[
+                option.isDisabled ? 'pointer-events-none opacity-50' : '',
+                optionClasses,
+                addCheckBox ? 'pr-2 pl-2 ' : 'pr-9 pl-3',
+              ]"
+            >
+              <span class="flex w-full items-center justify-between">
+                <div
+                  class="flex items-center"
+                  :class="addCheckBox ? 'w-5/6' : 'w-auto'"
+                >
+                  <div v-if="option.showImage" class="flex-shrink-0">
+                    <c-avatar
+                      v-if="option.photo"
+                      size="extraextrasmall"
+                      :image="option.photo"
+                      :rounded="true"
+                    ></c-avatar>
+                    <c-avatar
+                      v-else
+                      size="extraextrasmall"
+                      :nameInitials="option.initials"
+                      :rounded="true"
+                      :isDynamicallyColored="coloredAvatars"
+                    ></c-avatar>
+                  </div>
+                  <c-icon
+                    class="flex-none"
+                    v-if="option.showIcon && option.icon"
+                    :class="option.icon.class"
+                    :name="option.icon.name"
+                    :type="option.icon.type"
+                  >
+                  </c-icon>
+                  <span
+                    :class="[
+                      option.photo || option.initials ? 'ml-3' : 'text-left',
+                      addCheckBox ? 'ml-2 mr-2 overflow-hidden' : '',
+                    ]"
+                    class="list-options block break-words font-normal"
+                    >{{ option[renderOptionName] }}
+                  </span>
+                </div>
+                <div
+                  v-if="addCheckBox"
+                  class="flex w-1/6 items-center justify-end"
+                >
+                  <div class="flex h-5 items-center">
+                    <input
+                      type="checkbox"
+                      name="staff"
+                      class="pointer-events-none h-4 w-4 cursor-pointer rounded border-gray-300 text-indigo-600 focus:ring-indigo-500 disabled:opacity-50"
+                      :checked="selectAll ? true : isChecked(option)"
+                    />
+                  </div>
+                </div>
+              </span>
+
+              <span
+                class="absolute inset-y-0 right-0 flex items-center pr-4 text-indigo-600"
+                v-show="showSelectedValue"
+              >
+                <c-icon
+                  id="list-icon"
+                  name="check"
+                  type="solid"
+                  class="h-5 w-5"
+                ></c-icon>
+              </span>
+            </li>
+          </ul>
+        </div>
+      </transition>
+    </div>
+    <p
+      v-if="helpText && isValidate == true"
+      class="mt-1 text-left text-sm text-gray-500"
+    >
+      {{ helpText }}
+    </p>
+    <!-- validation error message -->
+    <p v-if="!isValidate" class="mt-2 text-left text-sm text-red-600">
+      {{ errorMessage }}
+    </p>
+  </div>
+</template>
+<script>
+import CIcon from "../CIcon/CIcon.vue";
+import CAvatar from "../CAvatar/CAvatar.vue";
+
+import { isNumber } from "lodash";
+export default {
+  name: "CSelect",
+  components: { CIcon, CAvatar },
+  props: {
+    // label of selectpicker
+    label: {
+      type: String,
+    },
+    // action button of selectpicker
+    actionBtn: {
+      type: String,
+      default: null,
+    },
+    // placeholder in selectpicker
+    placeholder: {
+      type: String,
+    },
+    // list to render in dropdown
+    options: {
+      type: Array,
+      required: true,
+    },
+    // show the avatars with different colors
+    coloredAvatars: {
+      type: Boolean,
+    },
+    // text below dropdown to describe more about the field
+    helpText: {
+      type: String,
+    },
+    // style input field
+    inputStyle: {
+      type: String,
+    },
+    // text adjacent to label of dropdown to provide hint about field
+    hint: { type: String },
+    // to show if image is present along with dropdown option
+    showImage: { type: Boolean },
+    // whether the select field is mandatory or not
+    isRequired: {
+      type: Boolean,
+    },
+    // validation is passed or not
+    isValidate: { type: Boolean, default: true },
+    // will truncate the text in input field
+    selectedOptionStyles: {
+      type: String,
+    },
+    // validation error message
+    errorMessage: {
+      type: String,
+    },
+    // perform action on first option in dropdown
+    addAction: { type: Object },
+    // icons in dropdown list
+    icon: { type: Object },
+    // value to set as default option in dropdown
+    value: { type: [Object, String, Array], default: null },
+    // type of dropdown - gray,tertiary or default
+    type: {
+      type: String,
+    },
+    //  name of the field in array to that contains text to render in dropdown
+    renderOptionName: {
+      type: String,
+      default: "option",
+    },
+    // whether to disable the selectpicker
+    isDisabled: {
+      type: Boolean,
+      default: false,
+    },
+    inputClasses: {
+      type: String,
+      default: "",
+    },
+    optionClasses: {
+      type: String,
+      default: "",
+    },
+    // to display the dropdown modal from bottom to top (absolute, bottom-full)
+    dropDownToTop: {
+      type: String,
+      default: "",
+    },
+    // to display the dropdown modal from bottom to top (absolute, bottom-full)
+    dropDownToTop2: {
+      type: String,
+      default: "",
+    },
+    // customised width for the dropdown
+    customWidth: {
+      type: String,
+      default: null,
+    },
+    customBorderRadius: {
+      type: String,
+      default: "rounded-md",
+    },
+    addCheckBox: {
+      type: Boolean,
+      default: false,
+    },
+    selectAll: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      toggleDropdown: false,
+      selectedValue: null,
+      showSelectedValue: false,
+      showFocus: false,
+      selectSearch: null,
+      renderOptions: this.options,
+      selectedValuesArray: [],
+    };
+  },
+  computed: {
+    classes() {
+      return {
+        "text-gray-900 border border-gray-200 hover:bg-gray-200 bg-gray-100 focus:ring-2 focus:border-gray-200 focus:ring-gray-200 focus:ring-offset-2 shadow-sm":
+          this.type == "gray",
+        "bg-white border border-gray-200 hover:bg-indigo-100 text-indigo-600 hover:text-indigo-800 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-200":
+          this.type == "tertiary",
+        "border border-gray-300 focus:ring-indigo-500 focus:border-indigo-500 bg-white shadow-sm focus:ring-1":
+          this.type == null,
+      };
+    },
+  },
+  methods: {
+    handleSelect(event, option) {
+      this.selectSearch = null;
+      this.selectedValue = option[this.renderOptionName];
+      if (this.addCheckBox) {
+        if (this.getIndex(option) == -1) {
+          this.selectedValuesArray = [...this.selectedValuesArray, option];
+        } else if (this.selectedValuesArray.length == 1) {
+          this.selectedValuesArray = [option];
+        } else {
+          this.selectedValuesArray = this.selectedValuesArray.filter(
+            (item) => option.id !== item.id
+          );
+        }
+        this.$emit("onChangeChecked", this.selectedValuesArray);
+      }
+
+      this.$emit("onChangeValue", option);
+      if (!this.addCheckBox) {
+        this.toggleDropdown = false;
+      }
+      this.type === "tertiary" ? (this.showFocus = false) : "";
+      this.renderOptions = this.options;
+    },
+    actionEvent(event) {
+      this.$emit("listAction", event);
+    },
+    actionBtnEvent(event) {
+      this.$emit("listAction", event);
+    },
+    handleElementBlur() {
+      this.toggleDropdown = false;
+      if (this.addCheckBox) {
+        this.$emit("onClickOutside", this.selectedValuesArray);
+      }
+      this.selectSearch = null;
+      this.renderOptions = this.options;
+    },
+    //this prevents the blur to be called when the user clicks on the scrollbar
+    handlePreventBlur(event) {
+      event.preventDefault();
+    },
+    // close() {
+    //   console.log("Close");
+    //   this.selectSearch = null;
+    //   this.toggleDropdown = false;
+    //   this.type === "tertiary" ? (this.showFocus = false) : "";
+    //   this.renderOptions = this.options;
+    // },
+    search() {
+      this.selectedValue = null;
+      if (!this.selectSearch || this.selectSearch == "") {
+        this.renderOptions = this.options;
+        return;
+      }
+      let options = [...this.options];
+      this.renderOptions = options.filter((option) => {
+        isNumber(option[this.renderOptionName])
+          ? (option[this.renderOptionName] =
+              option[this.renderOptionName].toString())
+          : "";
+        return option[this.renderOptionName]
+          .toLowerCase()
+          .includes(this.selectSearch.toLowerCase());
+      });
+
+      if (this.renderOptions.length === 0) {
+        console.log("Search ", this.selectSearch);
+        this.$emit("search-term", this.selectSearch);
+      }
+    },
+    async scrollOptionIntoView(refName) {
+      await this.$nextTick();
+      this.$refs[refName][0].scrollIntoView({
+        behavior: "smooth",
+        block: "nearest", //changed due to pop up issue in main menu
+      });
+    },
+    getIndex(option) {
+      return this.selectedValuesArray.findIndex((item) => item.id == option.id);
+    },
+    isChecked(option) {
+      return this.selectedValuesArray.findIndex(
+        (item) => item.id == option.id
+      ) == -1
+        ? false
+        : true;
+    },
+  },
+  watch: {
+    value() {
+      this.selectedValue =
+        this.value !== null && this.value[this.renderOptionName]
+          ? this.value[this.renderOptionName]
+          : this.value;
+      if (this.addCheckBox) {
+        this.selectedValuesArray = this.value ? this.value : [];
+      }
+    },
+    options() {
+      this.renderOptions = this.options;
+    },
+    toggleDropdown(newValue) {
+      if (newValue) {
+        let index = this.renderOptions.findIndex(
+          (option) => option[this.renderOptionName] === this.selectedValue
+        );
+        if (index !== -1) {
+          let refName = `option-${String(index)}`;
+          this.scrollOptionIntoView(refName);
+        }
+      }
+    },
+  },
+  mounted() {
+    this.selectedValue =
+      this.value !== null && this.value[this.renderOptionName]
+        ? this.value[this.renderOptionName]
+        : this.value;
+    if (this.addCheckBox) {
+      this.selectedValuesArray = this.value ? this.value : [];
+    }
+  },
+};
+</script>