adata-ui 0.3.64 → 0.3.66

package/src/components/SearchTextField/SearchTextField.vue

@@ -1,230 +1,230 @@
-<template>
-  <div
-    class="adt-text-block"
-    v-click-outside="onOutsideClick"
-    @keydown.down.up.prevent="onUpOrDownClicked"
-  >
-    <div :class="['adt-text-block__field', { error: !!errorText }]">
-      <input
-        :id="id"
-        ref="input"
-        :type="type"
-        :value="value"
-        :placeholder="placeholder"
-        required
-        :readonly="isReadonly"
-        @keyup.enter="enterPressed"
-        @input="$emit('input', $event.target.value)"
-        @focus="showAutocomplete = true"
-        @click="$emit('showVTour')"
-        @search="$emit('onSearch')"
-        class="adt-text-block__input"
-        :class="{ error: !!errorText }"
-      />
-      <label :for="id" class="adt-text-block__label" :class="{ 'adt-text-block--ellipsis': isEllipsis }">
-        {{ label }}
-      </label>
-      <div
-        class="adt-text-block__icon"
-        v-if="clearable && value"
-        @click="$emit('input', '')"
-      >
-        <svg
-          width="12"
-          height="12"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 16 16"
-          id="clearIcon"
-        >
-          <path
-            d="M2 2l12 12m0-12L2 14"
-            stroke="#2C3E50"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          ></path>
-        </svg>
-      </div>
-    </div>
-    <text-error v-if="!!errorText" :errorText="errorText" />
-    <div
-      class="adt-text-block__options search-options"
-      v-show="options && options.length > 0 && showAutocomplete"
-    >
-      <PerfectScrollbar>
-        <div class="search-options__wrapper">
-          <div
-            class="search-options__item"
-            v-for="(option, index) in options"
-            :key="index"
-            @click="onAutocompleteOptionClick(option)"
-            ref="searchOptions"
-          >
-            {{ !!optionFields.length ? textByOption(option) : option }}
-            <div class="hiddenOne" v-if="option.type && isTypeRequired">
-              ${{ option.type }}$
-            </div>
-          </div>
-        </div>
-      </PerfectScrollbar>
-    </div>
-  </div>
-</template>
-
-<script>
-import "@/assets/style.scss";
-
-import { PerfectScrollbar } from "vue2-perfect-scrollbar";
-import vClickOutside from "v-click-outside";
-import TextError from "@/components/TextError/TextError";
-
-export default {
-  name: "SearchTextField",
-  directives: {
-    clickOutside: vClickOutside.directive,
-  },
-  props: {
-    id: {
-      type: String,
-      default: ""
-    },
-    errorText: {
-      type: String,
-      default: "",
-    },
-    placeholder: {
-      type: String,
-      default: "",
-    },
-    mask: {
-      type: String,
-      default: "",
-    },
-    value: {
-      type: String,
-      required: true,
-      default: "",
-    },
-    label: {
-      type: String,
-      required: true,
-    },
-    type: {
-      type: String,
-      default: "text",
-    },
-    clearable: {
-      type: Boolean,
-      default: false,
-    },
-    isWithIcon: {
-      type: Boolean,
-      default: false,
-    },
-    isTypeRequired: {
-      type: Boolean,
-      default: false,
-    },
-    options: {
-      type: Array,
-      default: () => [],
-    },
-    optionFields: {
-      type: Array,
-      default: null,
-    },
-    isMobile: {
-      type: Boolean,
-      default: false,
-    },
-    isEllipsis: {
-      type: Boolean,
-      default: false,
-    },
-    isReadonly: {
-      type: Boolean,
-      default: false,
-    }
-  },
-  components: {
-    PerfectScrollbar,
-    TextError
-  },
-  data() {
-    return {
-      showAutocomplete: false,
-      showPlaceholder: false,
-    };
-  },
-  computed: {
-    inputPlaceholder() {
-      return this.showPlaceholder ? this.placeholder : "";
-    },
-  },
-  methods: {
-    enterPressed() {
-      this.$emit("enterPressed", this.showAutocomplete);
-    },
-    onOutsideClick() {
-      if (!this.isMobile) this.showAutocomplete = false;
-    },
-    onUpOrDownClicked(e) {
-      const autoCompleteOptions = this.$refs.searchOptions;
-      const length = autoCompleteOptions ? autoCompleteOptions.length : 0;
-      if (length > 0) {
-        switch (e.which) {
-          case 40:
-            this.moveOption(autoCompleteOptions, "nextElementSibling");
-            break;
-          case 38:
-            this.moveOption(autoCompleteOptions, "previousElementSibling");
-            break;
-        }
-      }
-    },
-    moveOption(autoCompleteOptions, elementType) {
-      const selectedOption = autoCompleteOptions.find((option) =>
-        option.hasAttribute("id")
-      );
-      if (selectedOption) {
-        const siblingElement = selectedOption[elementType];
-        this.$emit("castOption", siblingElement?.innerText || "");
-        if (siblingElement?.classList.contains("search-options__item")) {
-          selectedOption.removeAttribute("id");
-          siblingElement.setAttribute("id", "searchVariant");
-          return;
-        }
-        selectedOption.removeAttribute("id");
-        return;
-      }
-      let innerText = "";
-      if (elementType === "nextElementSibling")
-        innerText = this.getAutocompleteOptionText(autoCompleteOptions?.[0]);
-      if (elementType === "previousElementSibling")
-        innerText = this.getAutocompleteOptionText(
-          autoCompleteOptions?.[autoCompleteOptions.length - 1]
-        );
-      this.$emit("castOption", innerText);
-    },
-    getAutocompleteOptionText(autocompleteOption) {
-      autocompleteOption.setAttribute("id", "searchVariant");
-      return autocompleteOption.innerText;
-    },
-    inputHandler(e) {
-      this.$emit("input", e.target.value);
-      this.showAutocomplete = true;
-    },
-    onAutocompleteOptionClick(option) {
-      this.$emit("click", option);
-      this.showAutocomplete = false;
-    },
-    textByOption(obj) {
-      return this.optionFields.reduce((acc, curr, index) => {
-        if (index !== 0) acc += " - ";
-        acc += obj[curr];
-        return acc;
-      }, "");
-    },
-  },
-};
-</script>
+<template>
+  <div
+    class="adt-text-block"
+    v-click-outside="onOutsideClick"
+    @keydown.down.up.prevent="onUpOrDownClicked"
+  >
+    <div :class="['adt-text-block__field', { error: !!errorText }]">
+      <input
+        :id="id"
+        ref="input"
+        :type="type"
+        :value="value"
+        :placeholder="placeholder"
+        required
+        :readonly="isReadonly"
+        @keyup.enter="enterPressed"
+        @input="$emit('input', $event.target.value)"
+        @focus="showAutocomplete = true"
+        @click="$emit('showVTour')"
+        @search="$emit('onSearch')"
+        class="adt-text-block__input"
+        :class="{ error: !!errorText }"
+      />
+      <label :for="id" class="adt-text-block__label" :class="{ 'adt-text-block--ellipsis': isEllipsis }">
+        {{ label }}
+      </label>
+      <div
+        class="adt-text-block__icon"
+        v-if="clearable && value"
+        @click="$emit('input', '')"
+      >
+        <svg
+          width="12"
+          height="12"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 16 16"
+          id="clearIcon"
+        >
+          <path
+            d="M2 2l12 12m0-12L2 14"
+            stroke="#2C3E50"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          ></path>
+        </svg>
+      </div>
+    </div>
+    <text-error v-if="!!errorText" :errorText="errorText" />
+    <div
+      class="adt-text-block__options search-options"
+      v-show="options && options.length > 0 && showAutocomplete"
+    >
+      <PerfectScrollbar>
+        <div class="search-options__wrapper">
+          <div
+            class="search-options__item"
+            v-for="(option, index) in options"
+            :key="index"
+            @click="onAutocompleteOptionClick(option)"
+            ref="searchOptions"
+          >
+            {{ !!optionFields.length ? textByOption(option) : option }}
+            <div class="hiddenOne" v-if="option.type && isTypeRequired">
+              ${{ option.type }}$
+            </div>
+          </div>
+        </div>
+      </PerfectScrollbar>
+    </div>
+  </div>
+</template>
+
+<script>
+import "@/assets/style.scss";
+
+import { PerfectScrollbar } from "vue2-perfect-scrollbar";
+import vClickOutside from "v-click-outside";
+import TextError from "@/components/TextError/TextError";
+
+export default {
+  name: "SearchTextField",
+  directives: {
+    clickOutside: vClickOutside.directive,
+  },
+  props: {
+    id: {
+      type: String,
+      default: ""
+    },
+    errorText: {
+      type: String,
+      default: "",
+    },
+    placeholder: {
+      type: String,
+      default: "",
+    },
+    mask: {
+      type: String,
+      default: "",
+    },
+    value: {
+      type: String,
+      required: true,
+      default: "",
+    },
+    label: {
+      type: String,
+      required: true,
+    },
+    type: {
+      type: String,
+      default: "text",
+    },
+    clearable: {
+      type: Boolean,
+      default: false,
+    },
+    isWithIcon: {
+      type: Boolean,
+      default: false,
+    },
+    isTypeRequired: {
+      type: Boolean,
+      default: false,
+    },
+    options: {
+      type: Array,
+      default: () => [],
+    },
+    optionFields: {
+      type: Array,
+      default: null,
+    },
+    isMobile: {
+      type: Boolean,
+      default: false,
+    },
+    isEllipsis: {
+      type: Boolean,
+      default: false,
+    },
+    isReadonly: {
+      type: Boolean,
+      default: false,
+    }
+  },
+  components: {
+    PerfectScrollbar,
+    TextError
+  },
+  data() {
+    return {
+      showAutocomplete: false,
+      showPlaceholder: false,
+    };
+  },
+  computed: {
+    inputPlaceholder() {
+      return this.showPlaceholder ? this.placeholder : "";
+    },
+  },
+  methods: {
+    enterPressed() {
+      this.$emit("enterPressed", this.showAutocomplete);
+    },
+    onOutsideClick() {
+      if (!this.isMobile) this.showAutocomplete = false;
+    },
+    onUpOrDownClicked(e) {
+      const autoCompleteOptions = this.$refs.searchOptions;
+      const length = autoCompleteOptions ? autoCompleteOptions.length : 0;
+      if (length > 0) {
+        switch (e.which) {
+          case 40:
+            this.moveOption(autoCompleteOptions, "nextElementSibling");
+            break;
+          case 38:
+            this.moveOption(autoCompleteOptions, "previousElementSibling");
+            break;
+        }
+      }
+    },
+    moveOption(autoCompleteOptions, elementType) {
+      const selectedOption = autoCompleteOptions.find((option) =>
+        option.hasAttribute("id")
+      );
+      if (selectedOption) {
+        const siblingElement = selectedOption[elementType];
+        this.$emit("castOption", siblingElement?.innerText || "");
+        if (siblingElement?.classList.contains("search-options__item")) {
+          selectedOption.removeAttribute("id");
+          siblingElement.setAttribute("id", "searchVariant");
+          return;
+        }
+        selectedOption.removeAttribute("id");
+        return;
+      }
+      let innerText = "";
+      if (elementType === "nextElementSibling")
+        innerText = this.getAutocompleteOptionText(autoCompleteOptions?.[0]);
+      if (elementType === "previousElementSibling")
+        innerText = this.getAutocompleteOptionText(
+          autoCompleteOptions?.[autoCompleteOptions.length - 1]
+        );
+      this.$emit("castOption", innerText);
+    },
+    getAutocompleteOptionText(autocompleteOption) {
+      autocompleteOption.setAttribute("id", "searchVariant");
+      return autocompleteOption.innerText;
+    },
+    inputHandler(e) {
+      this.$emit("input", e.target.value);
+      this.showAutocomplete = true;
+    },
+    onAutocompleteOptionClick(option) {
+      this.$emit("click", option);
+      this.showAutocomplete = false;
+    },
+    textByOption(obj) {
+      return this.optionFields.reduce((acc, curr, index) => {
+        if (index !== 0) acc += " - ";
+        acc += obj[curr];
+        return acc;
+      }, "");
+    },
+  },
+};
+</script>