classcard-ui 0.2.645 → 0.2.646

package/src/components/CSelect/CSelect.vue

@@ -1,333 +1,339 @@
-<template>
-  <div>
-    <div class="flex w-full items-center justify-between" v-if="label">
-      <div class="flex items-center">
-        <!-- 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>
-      <span v-if="hint" class="text-sm text-gray-500">{{ hint }}</span>
-    </div>
-
-    <div class="relative" :class="label ? 'mt-1' : ''">
-      <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, [inputClasses]: true }"
-        class="relative w-full cursor-pointer rounded-md py-2 pl-3 pr-10 text-left text-sm focus:outline-none disabled:opacity-50 sm:text-sm"
-        :disabled="isDisabled"
-        autocomplete="off"
-      />
-
-      <div class="pointer-events-none absolute top-[7px] left-3 flex">
-        <span class="flex items-center" :style="selectedOptionStyles">
-          <div v-if="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"
-            ></c-avatar>
-          </div>
-          <c-icon
-            v-if="icon && !showImage"
-            :class="icon.class"
-            :name="icon.name"
-            :type="icon.type"
-          >
-          </c-icon>
-          <span :class="showImage ? 'ml-3' : ''" class="block truncate text-sm">
-            {{
-              selectedValue
-                ? selectedValue
-                : !selectSearch || selectSearch == ""
-                ? placeholder
-                : null
-            }}
-          </span>
-        </span>
-      </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>
-      <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="absolute z-10 mt-1 w-full rounded-md bg-white shadow-lg"
-        >
-          <ul
-            tabindex="-1"
-            role="listbox"
-            aria-labelledby="listbox-label"
-            class="max-h-60 overflow-auto rounded-md py-1 text-base ring-1 ring-gray-900 ring-opacity-5 focus:outline-none sm:text-sm"
-          >
-            <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="relative cursor-pointer select-none py-2 pl-3 pr-9 text-gray-900 hover:bg-indigo-700 hover:text-white"
-              :class="option.isDisabled ? 'pointer-events-none opacity-50' : ''"
-            >
-              <span class="flex items-center">
-                <div v-if="option.showImage">
-                  <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"
-                  ></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' : ''"
-                  class="list-options block break-words font-normal"
-                  >{{ option[renderOptionName] }}
-                </span>
-              </span>
-
-              <span
-                class="absolute inset-y-0 right-0 flex items-center pr-4 text-indigo-600"
-              >
-                <c-icon
-                  id="list-icon"
-                  v-show="showSelectedValue"
-                  name="check"
-                  type="solid"
-                  class="h-5 w-5"
-                ></c-icon>
-              </span>
-            </li>
-          </ul>
-        </div>
-      </transition>
-      <!-- validation error message -->
-      <p v-if="!isValidate" class="mt-2 text-left text-sm text-red-600">
-        {{ errorMessage }}
-      </p>
-      <p v-if="helpText" class="mt-2 text-sm text-gray-500">
-        {{ helpText }}
-      </p>
-    </div>
-  </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,
-    },
-    // placeholder in selectpicker
-    placeholder: {
-      type: String,
-    },
-    // list to render in dropdown
-    options: {
-      type: Array,
-      required: true,
-    },
-    // text below dropdown to describe more about the field
-    helpText: {
-      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], 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: "",
-    },
-  },
-  data() {
-    return {
-      toggleDropdown: false,
-      selectedValue: null,
-      showSelectedValue: false,
-      showFocus: false,
-      selectSearch: null,
-      renderOptions: this.options,
-    };
-  },
-  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];
-      this.$emit("onChangeValue", option);
-      this.toggleDropdown = false;
-    },
-    actionEvent(event) {
-      this.$emit("listAction", event);
-    },
-    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());
-      });
-    },
-    async scrollOptionIntoView(refName) {
-      await this.$nextTick();
-      this.$refs[refName][0].scrollIntoView({
-        behavior: "smooth",
-        block: "center",
-      });
-    },
-  },
-  watch: {
-    value() {
-      this.selectedValue =
-        this.value !== null && this.value[this.renderOptionName]
-          ? this.value[this.renderOptionName]
-          : 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;
-  },
-};
-</script>
+<template>
+  <div>
+    <div class="flex w-full items-center justify-between" v-if="label">
+      <div class="flex items-center">
+        <!-- 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>
+      <span v-if="hint" class="text-sm text-gray-500">{{ hint }}</span>
+    </div>
+
+    <div class="relative" :class="label ? 'mt-1' : ''">
+      <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, [inputClasses]: true }"
+        class="relative w-full cursor-pointer rounded-md py-2 pl-3 pr-10 text-left text-sm focus:outline-none disabled:opacity-50 sm:text-sm"
+        :disabled="isDisabled"
+        autocomplete="off"
+      />
+
+      <div class="pointer-events-none absolute top-[7px] left-3 flex">
+        <span class="flex items-center" :style="selectedOptionStyles">
+          <div v-if="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>
+          <c-icon
+            v-if="icon && !showImage"
+            :class="icon.class"
+            :name="icon.name"
+            :type="icon.type"
+          >
+          </c-icon>
+          <span :class="showImage ? 'ml-3' : ''" class="block truncate text-sm">
+            {{
+              selectedValue
+                ? selectedValue
+                : !selectSearch || selectSearch == ""
+                ? placeholder
+                : null
+            }}
+          </span>
+        </span>
+      </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>
+      <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="absolute z-10 mt-1 w-full rounded-md bg-white shadow-lg"
+        >
+          <ul
+            tabindex="-1"
+            role="listbox"
+            aria-labelledby="listbox-label"
+            class="max-h-60 overflow-auto rounded-md py-1 text-base ring-1 ring-gray-900 ring-opacity-5 focus:outline-none sm:text-sm"
+          >
+            <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="relative cursor-pointer select-none py-2 pl-3 pr-9 text-gray-900 hover:bg-indigo-700 hover:text-white"
+              :class="option.isDisabled ? 'pointer-events-none opacity-50' : ''"
+            >
+              <span class="flex items-center">
+                <div v-if="option.showImage">
+                  <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' : ''"
+                  class="list-options block break-words font-normal"
+                  >{{ option[renderOptionName] }}
+                </span>
+              </span>
+
+              <span
+                class="absolute inset-y-0 right-0 flex items-center pr-4 text-indigo-600"
+              >
+                <c-icon
+                  id="list-icon"
+                  v-show="showSelectedValue"
+                  name="check"
+                  type="solid"
+                  class="h-5 w-5"
+                ></c-icon>
+              </span>
+            </li>
+          </ul>
+        </div>
+      </transition>
+      <!-- validation error message -->
+      <p v-if="!isValidate" class="mt-2 text-left text-sm text-red-600">
+        {{ errorMessage }}
+      </p>
+      <p v-if="helpText" class="mt-2 text-sm text-gray-500">
+        {{ helpText }}
+      </p>
+    </div>
+  </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,
+    },
+    // 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,
+    },
+    // 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], 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: "",
+    },
+  },
+  data() {
+    return {
+      toggleDropdown: false,
+      selectedValue: null,
+      showSelectedValue: false,
+      showFocus: false,
+      selectSearch: null,
+      renderOptions: this.options,
+    };
+  },
+  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];
+      this.$emit("onChangeValue", option);
+      this.toggleDropdown = false;
+    },
+    actionEvent(event) {
+      this.$emit("listAction", event);
+    },
+    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());
+      });
+    },
+    async scrollOptionIntoView(refName) {
+      await this.$nextTick();
+      this.$refs[refName][0].scrollIntoView({
+        behavior: "smooth",
+        block: "center",
+      });
+    },
+  },
+  watch: {
+    value() {
+      this.selectedValue =
+        this.value !== null && this.value[this.renderOptionName]
+          ? this.value[this.renderOptionName]
+          : 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;
+  },
+};
+</script>