@designcrowd/fe-shared-lib 1.5.6 → 1.5.7-eng-3522-1

package/src/atoms/components/Select/selectMixin.js

@@ -1,356 +1,356 @@
-function isEmpty(opt) {
-  if (opt === 0) return false;
-  if (Array.isArray(opt) && opt.length === 0) return true;
-  return !opt;
-}
-
-function not(fun) {
-  return (...params) => !fun(...params);
-}
-
-function includes(str, query) {
-  let finalStr;
-  switch (str) {
-    case undefined:
-      finalStr = 'undefined';
-      break;
-    case null:
-      finalStr = 'null';
-      break;
-    case false:
-      finalStr = 'false';
-      break;
-    default:
-      finalStr = str;
-  }
-  const text = finalStr.toString().toLowerCase();
-  return text.indexOf(query.trim()) !== -1;
-}
-
-function filterOptions(options, search, label, customLabel) {
-  return options.filter((option) => includes(customLabel(option, label), search));
-}
-
-export default {
-  data() {
-    return {
-      search: '',
-      isOpen: false,
-      preferredOpenDirection: 'below',
-      optimizedHeight: this.maxHeight,
-    };
-  },
-  props: {
-    isInternalSearch: {
-      type: Boolean,
-      default: true,
-    },
-    options: {
-      type: Array,
-      required: true,
-    },
-    modelValue: {
-      type: [String, Object],
-      default: null,
-    },
-    trackBy: {
-      type: String,
-      default: null,
-    },
-    label: {
-      type: String,
-    },
-    imageUrlField: {
-      type: String,
-      default: null,
-    },
-    isSearchable: {
-      type: Boolean,
-      default: true,
-    },
-    shouldHideSelected: {
-      type: Boolean,
-      default: false,
-    },
-    placeholder: {
-      type: String,
-      default: 'Select option',
-    },
-    shouldAllowEmpty: {
-      type: Boolean,
-      default: true,
-    },
-    shouldResetAfter: {
-      type: Boolean,
-      default: false,
-    },
-    shouldCloseOnSelect: {
-      type: Boolean,
-      default: true,
-    },
-    customLabel: {
-      type: Function,
-      default(option, label) {
-        if (isEmpty(option)) return '';
-        return label ? option[label] : option;
-      },
-    },
-    shouldAllowCustom: {
-      type: Boolean,
-      default: false,
-    },
-    customPlaceholder: {
-      type: String,
-      default: 'Press enter to create option',
-    },
-    customPosition: {
-      type: String,
-      default: 'top', // ['top', 'bottom']
-    },
-    id: {
-      default: null,
-    },
-    optionsLimit: {
-      type: Number,
-      default: 1000,
-    },
-    shouldPreserveSearch: {
-      type: Boolean,
-      default: false,
-    },
-    shouldPreselectFirst: {
-      type: Boolean,
-      default: false,
-    },
-    shouldPreventAutofocus: {
-      type: Boolean,
-      default: false,
-    },
-    isDisabled: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  mounted() {
-    if (this.shouldPreselectFirst && !this.modelValue && this.options.length) {
-      this.select(this.filteredOptions[0]);
-    }
-  },
-  computed: {
-    filteredOptions() {
-      const search = this.search || '';
-      const normalizedSearch = search.toLowerCase().trim();
-
-      let options = this.options.concat();
-
-      if (this.isInternalSearch) {
-        options = filterOptions(options, normalizedSearch, this.label, this.customLabel);
-      }
-
-      options = this.shouldHideSelected ? options.filter(not(this.isOptionSelected)) : options;
-
-      if (this.shouldAllowCustom && normalizedSearch.length && !this.isExistingOption(normalizedSearch)) {
-        if (this.customPosition === 'bottom') {
-          options.push({ isCustom: true, label: search });
-        } else {
-          options.unshift({ isCustom: true, label: search });
-        }
-      }
-
-      return options.slice(0, this.optionsLimit);
-    },
-    valueKey() {
-      if (!this.modelValue) {
-        return null;
-      }
-      return this.trackBy ? this.modelValue[this.trackBy] : this.modelValue;
-    },
-    optionKeys() {
-      return this.options.map((element) => this.customLabel(element, this.label).toString().toLowerCase());
-    },
-    exactMatchOption() {
-      if (!this.search) return null;
-
-      const normalizedSearch = this.search.toLowerCase().trim();
-
-      return this.filteredOptions.find(
-        (option) => this.customLabel(option, this.label).toString().toLowerCase() === normalizedSearch,
-      );
-    },
-    hasExactMatch() {
-      return !!this.exactMatchOption;
-    },
-  },
-  watch: {
-    search() {
-      this.$emit('search-change', this.search, this.id);
-    },
-  },
-  methods: {
-    updateSearch(query) {
-      this.search = query;
-    },
-    isExistingOption(query) {
-      return !this.options ? false : this.optionKeys.indexOf(query) > -1;
-    },
-    getOptionKey(option) {
-      return this.trackBy ? option[this.trackBy] : option;
-    },
-    isOptionSelected(option) {
-      return this.valueKey === this.getOptionKey(option);
-    },
-    getOptionLabel(option) {
-      if (isEmpty(option)) {
-        return '';
-      }
-
-      if (option.isCustom) {
-        return option.label;
-      }
-
-      const label = this.customLabel(option, this.label);
-
-      if (isEmpty(label)) {
-        return '';
-      }
-
-      return label;
-    },
-    getOptionImageUrl(option) {
-      if (!this.imageUrlField) {
-        return undefined;
-      }
-
-      if (isEmpty(option)) {
-        return undefined;
-      }
-
-      return option[this.imageUrlField] ?? undefined;
-    },
-    select(option, key) {
-      if (this.isDisabled || option.$isDisabled) {
-        return;
-      }
-
-      if (key === 'Tab' && !this.pointerDirty) {
-        return;
-      }
-
-      if (option.isCustom) {
-        this.$emit('custom', option.label, this.id);
-        this.search = '';
-
-        if (this.shouldCloseOnSelect) {
-          this.deactivate();
-        }
-      } else {
-        const isSelected = this.isOptionSelected(option);
-
-        if (isSelected) {
-          if (key !== 'Tab') {
-            this.removeElement(option);
-          }
-          return;
-        }
-
-        this.$emit('update:modelValue', option, this.id);
-      }
-
-      if (this.shouldCloseOnSelect) this.deactivate();
-    },
-    removeElement(option, shouldClose = true) {
-      if (this.isDisabled || option.$isDisabled) {
-        return;
-      }
-
-      if (!this.shouldAllowEmpty && !!this.modelValue) {
-        this.deactivate();
-        return;
-      }
-
-      this.$emit('update:modelValue', null, this.id);
-      this.$emit('remove', option, this.id);
-
-      if (this.shouldCloseOnSelect && shouldClose) {
-        this.deactivate();
-      }
-    },
-    async activate() {
-      if (this.isOpen || this.isDisabled) return;
-
-      this.adjustPosition();
-
-      this.isOpen = true;
-
-      if (this.isSearchable) {
-        if (!this.shouldPreserveSearch) {
-          this.search = '';
-        }
-        if (!this.shouldPreventAutofocus) {
-          await this.$nextTick(() => this.$refs.search && this.$refs.search.focus());
-        }
-      } else if (!this.shouldPreventAutofocus) {
-        if (typeof this.$el !== 'undefined') this.$el.focus();
-      }
-
-      this.$emit('open', this.id);
-    },
-    deactivate() {
-      if (!this.isOpen) {
-        return;
-      }
-
-      this.isOpen = false;
-
-      if (this.isSearchable) {
-        if (this.isSearchEmpty()) {
-          this.$refs.search.blur();
-        }
-      } else if (typeof this.$el !== 'undefined') {
-        this.$el.blur();
-      }
-      if (!this.shouldPreserveSearch) {
-        this.search = '';
-      }
-      this.$emit('close', this.modelValue, this.id);
-    },
-    toggle() {
-      if (this.isOpen) {
-        this.deactivate();
-      } else {
-        this.activate();
-      }
-    },
-    isSearchEmpty() {
-      return this.$refs.search !== null && typeof this.$refs.search !== 'undefined';
-    },
-    shouldOpenBelow() {
-      const spaceAbove = this.$el.getBoundingClientRect().top;
-      const spaceBelow = window.innerHeight - this.$el.getBoundingClientRect().bottom;
-      const hasEnoughSpaceBelow = spaceBelow > this.maxHeight;
-
-      return (
-        hasEnoughSpaceBelow ||
-        spaceBelow > spaceAbove ||
-        this.openDirection === 'below' ||
-        this.openDirection === 'bottom'
-      );
-    },
-    adjustPosition() {
-      if (typeof window === 'undefined') {
-        return;
-      }
-
-      const spaceAbove = this.$el.getBoundingClientRect().top;
-      const spaceBelow = window.innerHeight - this.$el.getBoundingClientRect().bottom;
-
-      if (this.shouldOpenBelow()) {
-        this.preferredOpenDirection = 'below';
-        this.optimizedHeight = Math.min(spaceBelow - 40, this.maxHeight);
-      } else {
-        this.preferredOpenDirection = 'above';
-        this.optimizedHeight = Math.min(spaceAbove - 40, this.maxHeight);
-      }
-    },
-  },
-};
+function isEmpty(opt) {
+  if (opt === 0) return false;
+  if (Array.isArray(opt) && opt.length === 0) return true;
+  return !opt;
+}
+
+function not(fun) {
+  return (...params) => !fun(...params);
+}
+
+function includes(str, query) {
+  let finalStr;
+  switch (str) {
+    case undefined:
+      finalStr = 'undefined';
+      break;
+    case null:
+      finalStr = 'null';
+      break;
+    case false:
+      finalStr = 'false';
+      break;
+    default:
+      finalStr = str;
+  }
+  const text = finalStr.toString().toLowerCase();
+  return text.indexOf(query.trim()) !== -1;
+}
+
+function filterOptions(options, search, label, customLabel) {
+  return options.filter((option) => includes(customLabel(option, label), search));
+}
+
+export default {
+  data() {
+    return {
+      search: '',
+      isOpen: false,
+      preferredOpenDirection: 'below',
+      optimizedHeight: this.maxHeight,
+    };
+  },
+  props: {
+    isInternalSearch: {
+      type: Boolean,
+      default: true,
+    },
+    options: {
+      type: Array,
+      required: true,
+    },
+    modelValue: {
+      type: [String, Object],
+      default: null,
+    },
+    trackBy: {
+      type: String,
+      default: null,
+    },
+    label: {
+      type: String,
+    },
+    imageUrlField: {
+      type: String,
+      default: null,
+    },
+    isSearchable: {
+      type: Boolean,
+      default: true,
+    },
+    shouldHideSelected: {
+      type: Boolean,
+      default: false,
+    },
+    placeholder: {
+      type: String,
+      default: 'Select option',
+    },
+    shouldAllowEmpty: {
+      type: Boolean,
+      default: true,
+    },
+    shouldResetAfter: {
+      type: Boolean,
+      default: false,
+    },
+    shouldCloseOnSelect: {
+      type: Boolean,
+      default: true,
+    },
+    customLabel: {
+      type: Function,
+      default(option, label) {
+        if (isEmpty(option)) return '';
+        return label ? option[label] : option;
+      },
+    },
+    shouldAllowCustom: {
+      type: Boolean,
+      default: false,
+    },
+    customPlaceholder: {
+      type: String,
+      default: 'Press enter to create option',
+    },
+    customPosition: {
+      type: String,
+      default: 'top', // ['top', 'bottom']
+    },
+    id: {
+      default: null,
+    },
+    optionsLimit: {
+      type: Number,
+      default: 1000,
+    },
+    shouldPreserveSearch: {
+      type: Boolean,
+      default: false,
+    },
+    shouldPreselectFirst: {
+      type: Boolean,
+      default: false,
+    },
+    shouldPreventAutofocus: {
+      type: Boolean,
+      default: false,
+    },
+    isDisabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  mounted() {
+    if (this.shouldPreselectFirst && !this.modelValue && this.options.length) {
+      this.select(this.filteredOptions[0]);
+    }
+  },
+  computed: {
+    filteredOptions() {
+      const search = this.search || '';
+      const normalizedSearch = search.toLowerCase().trim();
+
+      let options = this.options.concat();
+
+      if (this.isInternalSearch) {
+        options = filterOptions(options, normalizedSearch, this.label, this.customLabel);
+      }
+
+      options = this.shouldHideSelected ? options.filter(not(this.isOptionSelected)) : options;
+
+      if (this.shouldAllowCustom && normalizedSearch.length && !this.isExistingOption(normalizedSearch)) {
+        if (this.customPosition === 'bottom') {
+          options.push({ isCustom: true, label: search });
+        } else {
+          options.unshift({ isCustom: true, label: search });
+        }
+      }
+
+      return options.slice(0, this.optionsLimit);
+    },
+    valueKey() {
+      if (!this.modelValue) {
+        return null;
+      }
+      return this.trackBy ? this.modelValue[this.trackBy] : this.modelValue;
+    },
+    optionKeys() {
+      return this.options.map((element) => this.customLabel(element, this.label).toString().toLowerCase());
+    },
+    exactMatchOption() {
+      if (!this.search) return null;
+
+      const normalizedSearch = this.search.toLowerCase().trim();
+
+      return this.filteredOptions.find(
+        (option) => this.customLabel(option, this.label).toString().toLowerCase() === normalizedSearch,
+      );
+    },
+    hasExactMatch() {
+      return !!this.exactMatchOption;
+    },
+  },
+  watch: {
+    search() {
+      this.$emit('search-change', this.search, this.id);
+    },
+  },
+  methods: {
+    updateSearch(query) {
+      this.search = query;
+    },
+    isExistingOption(query) {
+      return !this.options ? false : this.optionKeys.indexOf(query) > -1;
+    },
+    getOptionKey(option) {
+      return this.trackBy ? option[this.trackBy] : option;
+    },
+    isOptionSelected(option) {
+      return this.valueKey === this.getOptionKey(option);
+    },
+    getOptionLabel(option) {
+      if (isEmpty(option)) {
+        return '';
+      }
+
+      if (option.isCustom) {
+        return option.label;
+      }
+
+      const label = this.customLabel(option, this.label);
+
+      if (isEmpty(label)) {
+        return '';
+      }
+
+      return label;
+    },
+    getOptionImageUrl(option) {
+      if (!this.imageUrlField) {
+        return undefined;
+      }
+
+      if (isEmpty(option)) {
+        return undefined;
+      }
+
+      return option[this.imageUrlField] ?? undefined;
+    },
+    select(option, key) {
+      if (this.isDisabled || option.$isDisabled) {
+        return;
+      }
+
+      if (key === 'Tab' && !this.pointerDirty) {
+        return;
+      }
+
+      if (option.isCustom) {
+        this.$emit('custom', option.label, this.id);
+        this.search = '';
+
+        if (this.shouldCloseOnSelect) {
+          this.deactivate();
+        }
+      } else {
+        const isSelected = this.isOptionSelected(option);
+
+        if (isSelected) {
+          if (key !== 'Tab') {
+            this.removeElement(option);
+          }
+          return;
+        }
+
+        this.$emit('update:modelValue', option, this.id);
+      }
+
+      if (this.shouldCloseOnSelect) this.deactivate();
+    },
+    removeElement(option, shouldClose = true) {
+      if (this.isDisabled || option.$isDisabled) {
+        return;
+      }
+
+      if (!this.shouldAllowEmpty && !!this.modelValue) {
+        this.deactivate();
+        return;
+      }
+
+      this.$emit('update:modelValue', null, this.id);
+      this.$emit('remove', option, this.id);
+
+      if (this.shouldCloseOnSelect && shouldClose) {
+        this.deactivate();
+      }
+    },
+    async activate() {
+      if (this.isOpen || this.isDisabled) return;
+
+      this.adjustPosition();
+
+      this.isOpen = true;
+
+      if (this.isSearchable) {
+        if (!this.shouldPreserveSearch) {
+          this.search = '';
+        }
+        if (!this.shouldPreventAutofocus) {
+          await this.$nextTick(() => this.$refs.search && this.$refs.search.focus());
+        }
+      } else if (!this.shouldPreventAutofocus) {
+        if (typeof this.$el !== 'undefined') this.$el.focus();
+      }
+
+      this.$emit('open', this.id);
+    },
+    deactivate() {
+      if (!this.isOpen) {
+        return;
+      }
+
+      this.isOpen = false;
+
+      if (this.isSearchable) {
+        if (this.isSearchEmpty()) {
+          this.$refs.search.blur();
+        }
+      } else if (typeof this.$el !== 'undefined') {
+        this.$el.blur();
+      }
+      if (!this.shouldPreserveSearch) {
+        this.search = '';
+      }
+      this.$emit('close', this.modelValue, this.id);
+    },
+    toggle() {
+      if (this.isOpen) {
+        this.deactivate();
+      } else {
+        this.activate();
+      }
+    },
+    isSearchEmpty() {
+      return this.$refs.search !== null && typeof this.$refs.search !== 'undefined';
+    },
+    shouldOpenBelow() {
+      const spaceAbove = this.$el.getBoundingClientRect().top;
+      const spaceBelow = window.innerHeight - this.$el.getBoundingClientRect().bottom;
+      const hasEnoughSpaceBelow = spaceBelow > this.maxHeight;
+
+      return (
+        hasEnoughSpaceBelow ||
+        spaceBelow > spaceAbove ||
+        this.openDirection === 'below' ||
+        this.openDirection === 'bottom'
+      );
+    },
+    adjustPosition() {
+      if (typeof window === 'undefined') {
+        return;
+      }
+
+      const spaceAbove = this.$el.getBoundingClientRect().top;
+      const spaceBelow = window.innerHeight - this.$el.getBoundingClientRect().bottom;
+
+      if (this.shouldOpenBelow()) {
+        this.preferredOpenDirection = 'below';
+        this.optimizedHeight = Math.min(spaceBelow - 40, this.maxHeight);
+      } else {
+        this.preferredOpenDirection = 'above';
+        this.optimizedHeight = Math.min(spaceAbove - 40, this.maxHeight);
+      }
+    },
+  },
+};