adata-ui 0.3.99 → 2.0.0

package/src/components/PasswordField/PasswordField.vue

@@ -1,77 +0,0 @@
-<template>
-  <div class="adt-text-block">
-    <div class="adt-text-block__field">
-      <input
-        :id="id"
-        ref="input"
-        :type="type"
-        :value="value"
-        required
-        @input="$emit('input', $event.target.value)"
-        class="adt-text-block__input password"
-        :class="{ error: !!errorText }"
-      />
-      <label :for="id" class="adt-text-block__label">{{ label }}</label>
-      <div v-if="showPassword" @click="showPassword = false" class="adt-text-block__icon desktop">
-        <svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 511.992 511.992" id="openedEye">
-          <path
-              d="M510.096 249.937c-4.032-5.867-100.928-143.275-254.101-143.275-131.435 0-248.555 136.619-253.483 142.443-3.349 3.968-3.349 9.792 0 13.781C7.44 268.71 124.56 405.329 255.995 405.329S504.549 268.71 509.477 262.886c3.094-3.669 3.371-8.981.619-12.949zM255.995 383.996c-105.365 0-205.547-100.48-230.997-128 25.408-27.541 125.483-128 230.997-128 123.285 0 210.304 100.331 231.552 127.424-24.534 26.645-125.291 128.576-231.552 128.576z"></path>
-          <path
-              d="M255.995 170.662c-47.061 0-85.333 38.272-85.333 85.333s38.272 85.333 85.333 85.333 85.333-38.272 85.333-85.333-38.272-85.333-85.333-85.333zm0 149.334c-35.285 0-64-28.715-64-64s28.715-64 64-64 64 28.715 64 64-28.715 64-64 64z"></path>
-        </svg>
-      </div>
-      <div v-else @click="showPassword = true" class="adt-text-block__icon desktop">
-        <svg width="12" height="12" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512.001 512.001" id="closedEye">
-          <path
-              d="M316.332 195.662c-4.16-4.16-10.923-4.16-15.083 0s-4.16 10.944 0 15.083c12.075 12.075 18.752 28.139 18.752 45.248 0 35.285-28.715 64-64 64-17.109 0-33.173-6.656-45.248-18.752-4.16-4.16-10.923-4.16-15.083 0-4.16 4.139-4.16 10.923 0 15.083 16.085 16.128 37.525 25.003 60.331 25.003 47.061 0 85.333-38.272 85.333-85.333 0-22.807-8.874-44.247-25.002-60.332zm-45.462-23.531c-4.843-.853-9.792-1.472-14.869-1.472-47.061 0-85.333 38.272-85.333 85.333 0 5.077.619 10.027 1.493 14.869.917 5.163 5.419 8.811 10.475 8.811.619 0 1.237-.043 1.877-.171 5.781-1.024 9.664-6.571 8.64-12.352-.661-3.627-1.152-7.317-1.152-11.157 0-35.285 28.715-64 64-64 3.84 0 7.531.491 11.157 1.131 5.675 1.152 11.328-2.859 12.352-8.64 1.024-5.781-2.858-11.328-8.64-12.352z"></path>
-          <path
-              d="M509.462 249.102c-2.411-2.859-60.117-70.208-139.712-111.445-5.163-2.709-11.669-.661-14.379 4.587-2.709 5.227-.661 11.669 4.587 14.379 61.312 31.744 110.293 81.28 127.04 99.371-25.429 27.541-125.504 128-230.997 128-35.797 0-71.872-8.64-107.264-25.707-5.248-2.581-11.669-.341-14.229 4.971-2.581 5.291-.341 11.669 4.971 14.229 38.293 18.496 77.504 27.84 116.523 27.84 131.435 0 248.555-136.619 253.483-142.443 3.369-3.969 3.348-9.793-.023-13.782zM325.996 118.947c-24.277-8.171-47.829-12.288-69.995-12.288-131.435 0-248.555 136.619-253.483 142.443-3.115 3.669-3.371 9.003-.597 12.992 1.472 2.112 36.736 52.181 97.856 92.779a10.48 10.48 0 005.888 1.792c3.435 0 6.827-1.664 8.875-4.8 3.264-4.885 1.92-11.52-2.987-14.763-44.885-29.845-75.605-65.877-87.104-80.533 24.555-26.667 125.291-128.576 231.552-128.576 19.861 0 41.131 3.755 63.189 11.157 5.589 2.005 11.648-1.088 13.504-6.699 1.878-5.589-1.109-11.626-6.698-13.504z"></path>
-          <path
-              d="M444.865 67.128c-4.16-4.16-10.923-4.16-15.083 0L67.116 429.795c-4.16 4.16-4.16 10.923 0 15.083a10.716 10.716 0 007.552 3.115c2.731 0 5.461-1.045 7.531-3.115L444.865 82.211c4.16-4.16 4.16-10.923 0-15.083z"></path>
-        </svg>
-      </div>
-    </div>
-    <a-text-error v-if="!!errorText" :errorText="errorText" />
-  </div>
-</template>
-
-<script>
-import '@/assets/style.scss';
-import ATextError from "@/components/TextError/TextError";
-
-export default {
-  name: "PasswordField",
-  props: {
-    id: {
-      type: String,
-      default: ""
-    },
-    errorText: {
-      type: String,
-      default: ""
-    },
-    label: {
-      type: String,
-      required: true,
-    },
-    value: {
-      type: [String, null],
-      required: true,
-    }
-  },
-  components: {
-    ATextError
-  },
-  data() {
-    return {
-      showPassword: false
-    }
-  },
-  computed: {
-    type() {
-      return this.showPassword ? "text" : "password";
-    }
-  }
-}
-</script>
-

package/src/components/SearchTextField/SearchTextField.stories.js

@@ -1,78 +0,0 @@
-import ASearchTextField from "./SearchTextField.vue";
-
-export default {
-    title: 'SearchTextField',
-    component: ASearchTextField,
-    data: () => ({ value: "" }),
-    template: "<a-search-text-field @input='(val) => {this.value = val}' label='Example'></a-search-text-field>>"
-}
-
-
-const Template = (args, { argTypes }) => ({
-    components: { ASearchTextField },
-    props: Object.keys(argTypes),
-    template: '<a-search-text-field  v-bind="$props" @enterPressed="enterPressed"></a-search-text-field>'
-})
-
-export const WithIcon = Template.bind({});
-WithIcon.args = {
-    label: "Найти то, что нужно",
-    clearable: true,
-    isWithIcon: true,
-    isTypeRequired: true,
-    options: [
-        {
-            id: 1,
-            name: "a"
-        },
-        {
-            id: 2,
-            name: "b"
-        },
-        {
-            id: 2,
-            name: "b"
-        },
-        {
-            id: 2,
-            name: "b"
-        },
-        {
-            id: 2,
-            name: "b"
-        },
-        {
-            id: 2,
-            name: "b"
-        },
-        {
-            id: 2,
-            name: "b"
-        },
-        {
-            id: 2,
-            name: "b"
-        },
-        {
-            id: 2,
-            name: "b"
-        },
-        {
-            id: 2,
-            name: "b"
-        },
-        {
-            id: 2,
-            name: "b"
-        },
-        {
-            id: 2,
-            name: "b"
-        },
-        {
-            id: 2,
-            name: "b"
-        }
-    ],
-    optionFields: ["name"]
-}

package/src/components/SearchTextField/SearchTextField.vue

@@ -1,230 +0,0 @@
-<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>