adata-ui 0.3.99 → 2.0.0

package/src/components/ServiceSlider/ServiceSlider.stories.js

@@ -1,20 +0,0 @@
-import AServiceSlider from "./AServiceSlider";
-
-export default {
-    title: 'ServiceSlider',
-    component: AServiceSlider,
-    template: "<a-service-slider></a-service-slider>"
-}
-
-const Template = (args, { argTypes }) => ({
-    components: { AServiceSlider },
-    props: Object.keys(argTypes),
-    template: "<a-service-slider v-bind='$props'></a-service-slider>",
-});
-
-export const serviceSlider = Template.bind({})
-
-serviceSlider.args = {
-    openService: false,
-    isAuth: false
-}

package/src/components/Table/ATable.vue

@@ -1,117 +0,0 @@
-<template>
-  <table class="a-table">
-    <thead>
-      <tr>
-        <th v-for="(col, i) in cols" :key="i">{{ col.name }}</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr v-for="(row, i) in rows" :key="i">
-        <td v-for="col in cols" :key="col.key" :data-label="`${col.name}`">
-          <slot :name="'key-' + col.key" :row="row">
-            {{ row[col.key] || defaultEmpty }}
-          </slot>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</template>
-
-<script>
-export default {
-  props: {
-    cols: {
-      type: Array,
-      default: () => [],
-    },
-    rows: {
-      type: Array,
-      default: () => [],
-    },
-    defaultEmpty: {
-      type: [String, Number],
-      default: "Нет данных",
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.a-table {
-  display: flex;
-  flex-direction: column;
-  background: #fff;
-
-  @media screen and (max-width: 850px) {
-    border: 0;
-  }
-
-  thead {
-    background: rgba(189, 199, 206, 0.3);
-
-    @media screen and (max-width: 850px) {
-      display: none;
-    }
-
-    tr {
-      display: flex;
-
-      th {
-        display: flex;
-        justify-content: center;
-        flex: 1;
-        padding: 20px 16px;
-        font-size: 12px;
-        font-weight: normal;
-        word-break: break-word;
-
-        @media screen and (max-width: 850px) {
-          justify-content: flex-start;
-        }
-      }
-    }
-  }
-
-  tbody {
-    tr {
-      display: flex;
-      border-bottom: 1px solid #ccc;
-
-      @media screen and (max-width: 850px) {
-        flex-direction: column;
-        margin: 10px;
-        padding: 10px 0;
-        border: 0;
-        background: rgba(189, 199, 206, 0.3);
-      }
-
-      td {
-        display: flex;
-        justify-content: center;
-        flex: 1;
-        padding: 20px 16px;
-        word-break: break-word;
-        font-size: 12px;
-        font-weight: normal;
-        text-align: left;
-
-        @media screen and (max-width: 850px) {
-          flex-direction: column;
-          row-gap: 4px;
-          justify-content: flex-start;
-          padding: 8px 16px;
-        }
-
-        &:before {
-          @media screen and (max-width: 850px) {
-            content: attr(data-label);
-            display: flex;
-            align-items: left;
-            font-weight: bold;
-          }
-        }
-      }
-    }
-  }
-}
-</style>

package/src/components/Table/Table.stories.js

@@ -1,15 +0,0 @@
-import ATable from "./ATable.vue";
-
-export default {
-  title: "Table",
-  component: ATable,
-  template: "<a-table></a-table>",
-};
-
-const Template = (args, { argTypes }) => ({
-  components: { ATable },
-  props: Object.keys(argTypes),
-  template: "<a-table v-bind='$props'></a-header>",
-});
-
-export const BaseTable = Template.bind({});

package/src/components/TextArea/TextArea.stories.js

@@ -1,17 +0,0 @@
-import ATextArea from "./TextArea.vue";
-
-export default {
-    title: 'TextArea',
-    component: ATextArea,
-    data: () => ({ value: "" }),
-    template: "<a-text-area @input='(val) => {this.value = val}' label='Example'></a-text-area>>"
-}
-
-const Template = (args, { argTypes }) => ({
-    components: { ATextArea },
-    props: Object.keys(argTypes),
-    template: '<a-text-area v-bind="$props"></a-text-area>'
-})
-
-export const Clearable = Template.bind({});
-Clearable.args = {label: 'Clearable', clearable: true}

package/src/components/TextArea/TextArea.vue

@@ -1,116 +0,0 @@
-<template>
-  <div class="adt-text-block__wrapper">
-    <div
-      class="adt-text-block__textarea"
-      :class="{ 'adt-text-block__textarea--error': !!errorText }"
-    >
-      <textarea
-        :id="id"
-        ref="textarea"
-        :type="type"
-        :value="value"
-        :placeholder="placeholder"
-        required
-        @input="$emit('input', $event.target.value)"
-        @keyup.enter="enterPressed"
-      />
-      <label
-         :for="id"
-        class="adt-text-block__label"
-        :class="{ 'adt-text-block--ellipsis': isEllipsis }"
-      >
-        {{ label }}
-        <span v-if="required" class="adt-text-block__required">*</span>
-      </label>
-      <div
-        class="adt-text-block__icon desktop"
-        v-if="clearable && value && value.length > 0"
-        @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>
-</template>
-<script>
-import "@/assets/style.scss";
-import TextError from "@/components/TextError/TextError";
-
-export default {
-  name: "TextArea",
-  props: {
-    id: {
-      type: String,
-      default: ""
-    },
-    errorText: {
-      type: String,
-      default: "",
-    },
-    label: {
-      type: String,
-      required: true,
-    },
-    type: {
-      type: String,
-      default: "text",
-    },
-    value: {
-      type: String,
-      default: "",
-    },
-    placeholder: {
-      type: String,
-      default: "",
-    },
-    clearable: {
-      type: Boolean,
-      default: false,
-    },
-    required: {
-      type: Boolean,
-      default: false,
-    },
-    isEllipsis: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  components: {
-    TextError
-  },
-  data() {
-    return {
-      showPlaceholder: false,
-    };
-  },
-  computed: {
-    inputPlaceholder() {
-      return this.showPlaceholder ? this.placeholder : "";
-    },
-  },
-  methods: {
-    enterPressed() {
-      this.$emit("enterPressed", this.value);
-    },
-    inputHandler(e) {
-      this.$emit("input", e.target.value);
-    },
-  },
-};
-</script>

package/src/components/TextError/TextError.stories.js

@@ -1,15 +0,0 @@
-import TextError from "./TextError";
-
-export default {
-    title: 'TextError',
-    component: TextError,
-}
-
-const Template = (args, { argTypes }) => ({
-    components: { TextError },
-    props: Object.keys(argTypes),
-    template: '<text-error v-bind="$props"></text-error>'
-})
-
-export const Default = Template.bind({});
-Default.args = {errorText: 'Введите больше чем 20 символов'}

package/src/components/TextError/TextError.vue

@@ -1,57 +0,0 @@
-<template>
-  <div class="adt-text-error">
-    <div class="adt-text-error__icon">
-      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
-        <g clip-path="url(#clip0_508_13640)">
-          <path
-              d="M8.00016 14.6666C11.6821 14.6666 14.6668 11.6818 14.6668 7.99992C14.6668 4.31802 11.6821 1.33325 8.00016 1.33325C4.31826 1.33325 1.3335 4.31802 1.3335 7.99992C1.3335 11.6818 4.31826 14.6666 8.00016 14.6666Z"
-              stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
-          <path d="M8 10.6667H8.00667" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-          <path d="M8 5.33325V7.99992" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
-        </g>
-        <defs>
-          <clipPath id="clip0_508_13640">
-            <rect width="16" height="16" fill="white"/>
-          </clipPath>
-        </defs>
-      </svg>
-    </div>
-    <p class="adt-text-error__text">{{ errorText }}</p>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "TextError",
-  props: {
-    errorText: {
-      type: String,
-      default: ""
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.adt-text-error {
-  display: flex;
-  background: rgba(255, 46, 67, 0.12);
-  border-radius: 4px;
-  overflow: hidden;
-  color: #2c3e50;
-  margin-top: 8px;
-
-  &__icon {
-    background: #FF2E43;
-    padding: 4px 8px;
-    display: grid;
-    place-content: center;
-  }
-
-  &__text {
-    font-size: 12px;
-    line-height: 20px;
-    padding: 2px 16px;
-  }
-}
-</style>

package/src/components/TextField/TextField.stories.js

@@ -1,17 +0,0 @@
-import ATextField from "./TextField.vue";
-
-export default {
-    title: 'TextField',
-    component: ATextField,
-    data: () => ({ value: "" }),
-    template: "<a-text-field @input='(val) => {this.value = val}' label='Example'></a-text-field>>"
-}
-
-const Template = (args, { argTypes }) => ({
-    components: { ATextField },
-    props: Object.keys(argTypes),
-    template: '<a-text-field v-bind="$props"></a-text-field>'
-})
-
-export const Clearable = Template.bind({});
-Clearable.args = {label: 'Clearable', clearable: true}

package/src/components/TextField/TextField.vue

@@ -1,107 +0,0 @@
-<template>
-  <div class="adt-text-block">
-    <div :class="['adt-text-block__field', { error: !!errorText }]">
-      <input
-        :id="id"
-        ref="input"
-        :type="type"
-        :value="value"
-        :placeholder="placeholder"
-        required
-        @input="$emit('input', $event.target.value)"
-        @keyup.enter="enterPressed"
-        class="adt-text-block__input"
-        :class="{ error: !!errorText }"
-      />
-      <label :for="id" class="adt-text-block__label">
-        {{ label }}
-        <span v-if="required" class="adt-text-block__required">*</span>
-      </label>
-      <div
-        class="adt-text-block__icon desktop"
-        v-if="clearable && value && value.length > 0"
-        @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>
-</template>
-<script>
-import "@/assets/style.scss";
-import TextError from "@/components/TextError/TextError";
-
-export default {
-  name: "TextField",
-  components: {
-    TextError
-  },
-  props: {
-    id: {
-      type: String,
-      default: ""
-    },
-    errorText: {
-      type: String,
-      default: "",
-    },
-    label: {
-      type: String,
-      required: true,
-    },
-    type: {
-      type: String,
-      default: "text",
-    },
-    value: {
-      type: String,
-      default: "",
-    },
-    placeholder: {
-      type: String,
-      default: "",
-    },
-    clearable: {
-      type: Boolean,
-      default: false,
-    },
-    required: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      showPlaceholder: false,
-    };
-  },
-  computed: {
-    inputPlaceholder() {
-      return this.showPlaceholder ? this.placeholder : "";
-    },
-  },
-  methods: {
-    enterPressed() {
-      this.$emit("enterPressed", this.value);
-    },
-    inputHandler(e) {
-      this.$emit("input", e.target.value);
-    },
-  },
-};
-</script>

package/src/components/index.js

@@ -1,56 +0,0 @@
-import Vue from "vue";
-import ACheckbox from "./Checkbox/ACheckbox";
-import ACheckboxMenu from "./CheckboxMenu/CheckboxMenu";
-import AButton from "./Button/AButton";
-import ATextField from "./TextField/TextField";
-import ATextArea from "./TextArea/TextArea";
-import APasswordField from "./PasswordField/PasswordField";
-import AAlert from "./Alert/Alert";
-import AHeader from "./Header/Header";
-import AFooter from "./Footer/Footer";
-import AFooterNew from "./newComponents/FooterNew/FooterNew";
-import AFooterRedesign from "./newComponents/FooterRedesign/FooterRedesign";
-import ASearchTextField from "./SearchTextField/SearchTextField";
-import AMailTo from "./MailTo/MailTo";
-import ATable from "./Table/ATable";
-import ALoader from "./Loader/Loader";
-import ABottomNavigationBar from "./BottomNavigationBar/ABottomNavigationBar";
-import ANavIcon from "./NavIcon/ANavIcon";
-import AServiceSlider from "./ServiceSlider/AServiceSlider";
-// import ABadGateway from "./ErrorPages/BadGateway";
-// import AForbidden from "./ErrorPages/Forbidden";
-// import AInternalServerError from "./ErrorPages/InternalServerError";
-// import ANotFound from "./ErrorPages/NotFound";
-// import AUnavailable from "./ErrorPages/Unavailable";
-
-const Components = {
-  ACheckbox,
-  AButton,
-  ATextField,
-  ATextArea,
-  APasswordField,
-  AAlert,
-  AHeader,
-  AFooter,
-  AFooterNew,
-  AFooterRedesign,
-  ASearchTextField,
-  AMailTo,
-  ATable,
-  ALoader,
-  ACheckboxMenu,
-  ABottomNavigationBar,
-  ANavIcon,
-  AServiceSlider
-  // ABadGateway,
-  // AForbidden,
-  // AInternalServerError,
-  // ANotFound,
-  // AUnavailable,
-};
-
-Object.keys(Components).forEach((name) => {
-  Vue.component(name, Components[name]);
-});
-
-export default Components;

package/src/components/newComponents/FooterNew/FooterBottom.vue

@@ -1,153 +0,0 @@
-<template>
-  <div class="bottom">
-    <div class="bottom__left">
-      <a v-for="item in list" :key="item.id" :href="item.link" class="bottom__left__link">
-        {{ item.name }}
-      </a>
-    </div>
-    <div class="bottom__right">
-      <span class="bottom__right-text">{{ new Date().getFullYear() }} © ТОО "Alldata"</span>
-      <span class="logo-desktop"></span>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "FooterBottom",
-  props: {
-    mode: {
-      type: String,
-      required: true,
-      validator: function (value) {
-        return ["prod", "dev", "staging"].indexOf(value) !== -1;
-      },
-    },
-  },
-  data() {
-    return {
-      main: {
-        dev: "adtdev.kz",
-        prod: "adata.kz",
-        staging: "adada.kz",
-      },
-    }
-  },
-  computed:{
-    environment() {
-      return this.main[this.mode]
-    },
-
-    list(){
-      return [
-        {
-          id: 1,
-          name: 'Тарифы',
-          link: `https://${this.environment}/tariffs`
-        },
-        {
-          id: 2,
-          name: 'Полезное',
-          link: `https://${this.environment}/about`
-        },
-        {
-          id: 3,
-          name: 'Описание API',
-          link: `https://${this.environment}/apiInfo`
-        },
-        {
-          id: 4,
-          name: 'Пользовательское соглашение',
-          link: `https://${this.environment}/user-agreements`
-        },
-        {
-          id: 5,
-          name: 'Политика конфиденциальности',
-          link: `https://${this.environment}/privacy-policy`
-        },
-        {
-          id: 6,
-          name: 'Вакансии',
-          link: `https://${this.environment}/vacancy`
-        },
-        {
-          id: 7,
-          name: 'Каталог предприятий',
-          link: `https://pk.${this.environment}/counterparty`
-        },
-        {
-          id: 8,
-          name: 'Контакты',
-          link: `https://${this.environment}/contacts`
-        },
-      ]
-
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.bottom {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  max-width: 1180px;
-  margin: 0 calc((100vw - 1180px)/2);
-  padding: 20px;
-  @media (max-width: 1140px) {
-    padding: 20px 16px;
-    margin: 0 auto;
-  }
-  @media (max-width: 768px) {
-    padding: 20px 16px 12px;
-  }
-
-  &__left {
-    display: flex;
-    align-items: center;
-    gap: 24px;
-    @media screen and (max-width: 1140px) {
-    flex-direction: column;
-      align-items: flex-start;
-      gap: 16px;
-    }
-
-      &__link {
-      font-weight: 400;
-      font-size: 10px;
-      line-height: 16px;
-      color: #FFFFFF;
-    }
-  }
-
-  &__right {
-    display: flex;
-    align-items: center;
-    gap: 16px;
-
-    &-text {
-      font-weight: 400;
-      font-size: 10px;
-      line-height: 16px;
-      color: #FFFFFF;
-      @media screen and (max-width: 1140px) {
-        display: none;
-      }
-    }
-  }
-}
-
-.logo-desktop {
-  display: inline-block;
-  width: 90px;
-  height: 26px;
-  background-image: url("~@/assets/logo-white-desktop.svg");
-  background-size: cover;
-  background-position: center;
-  @media screen and (max-width: 1140px) {
-    display: none;
-
-  }
-}
-</style>