adata-ui 0.3.64 → 0.3.66

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

@@ -1,152 +1,153 @@
-<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">2022 © ТОО "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: 1140px;
-  margin: 0 auto;
-  padding: 20px 0;
-  @media (max-width: 1140px) {
-    padding: 20px 16px;
-  }
-  @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;
-
-  }
-}
+<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">2022 © ТОО "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: 1140px;
+  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>

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

@@ -1,114 +1,114 @@
-<template>
-  <div class="item">
-    <div class="item-title" @click="toggleClick">
-      {{ title }}
-      <div class="dropdown" :class="{ icon: dropdown }"></div>
-    </div>
-    <div class="item__link" :class="{ active: dropdown }" v-show="dropdown">
-      <div v-for="item in cols" :key="item.id" class="item__link-text">
-        <a :href="item.link">
-          {{ item.text }}
-        </a>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "FooterItem",
-  props: {
-    title: {
-      type: String,
-      default: ""
-    },
-    cols: {
-      type: Array,
-      default: () => [],
-    },
-  },
-  data() {
-    return {
-      dropdown: false,
-    }
-  },
-
-  mounted() {
-    this.checkWidth()
-
-    window.addEventListener('resize', () => {
-      this.checkWidth()
-    })
-  },
-  methods: {
-    checkWidth() {
-      this.dropdown = window.innerWidth > 1140;
-    },
-    toggleClick(){
-     if(window.innerWidth < 1140){
-       this.dropdown = !this.dropdown
-     }
-    }
-  },
-}
-</script>
-
-<style lang="scss" scoped>
-.item {
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-
-  &-title {
-    font-weight: 600;
-    font-size: 14px;
-    line-height: 20px;
-    color: #FFFFFF;
-    text-align: left;
-    @media (max-width: 1140px) {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-    }
-  }
-
-  &__link {
-    display: flex;
-    flex-direction: column;
-    gap: 8px;
-
-    &-text {
-      text-align: left;
-
-      a {
-        color: #FFFFFF;
-        cursor: pointer;
-        font-weight: 400;
-        font-size: 12px;
-        line-height: 20px;
-        text-align: left;
-        color: #FFFFFF;
-      }
-    }
-  }
-}
-
-.dropdown {
-  display: none;
-  transform: rotate(0deg);
-  transition: 0.3s;
-  @media (max-width: 1140px) {
-    display: block;
-    width: 24px;
-    height: 24px;
-    background-image: url('~@/assets/up-down.svg');
-  }
-}
-.icon{
-  transform: rotate(180deg);
-  transition: 0.3s;
-}
-.active {
-  transition: 0.3s;
-}
+<template>
+  <div class="item">
+    <div class="item-title" @click="toggleClick">
+      {{ title }}
+      <div class="dropdown" :class="{ icon: dropdown }"></div>
+    </div>
+    <div class="item__link" :class="{ active: dropdown }" v-show="dropdown">
+      <div v-for="item in cols" :key="item.id" class="item__link-text">
+        <a :href="item.link">
+          {{ item.text }}
+        </a>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "FooterItem",
+  props: {
+    title: {
+      type: String,
+      default: ""
+    },
+    cols: {
+      type: Array,
+      default: () => [],
+    },
+  },
+  data() {
+    return {
+      dropdown: false,
+    }
+  },
+
+  mounted() {
+    this.checkWidth()
+
+    window.addEventListener('resize', () => {
+      this.checkWidth()
+    })
+  },
+  methods: {
+    checkWidth() {
+      this.dropdown = window.innerWidth > 1140;
+    },
+    toggleClick(){
+     if(window.innerWidth < 1140){
+       this.dropdown = !this.dropdown
+     }
+    }
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.item {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+
+  &-title {
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 20px;
+    color: #FFFFFF;
+    text-align: left;
+    @media (max-width: 1140px) {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+  }
+
+  &__link {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+
+    &-text {
+      text-align: left;
+
+      a {
+        color: #FFFFFF;
+        cursor: pointer;
+        font-weight: 400;
+        font-size: 12px;
+        line-height: 20px;
+        text-align: left;
+        color: #FFFFFF;
+      }
+    }
+  }
+}
+
+.dropdown {
+  display: none;
+  transform: rotate(0deg);
+  transition: 0.3s;
+  @media (max-width: 1140px) {
+    display: block;
+    width: 24px;
+    height: 24px;
+    background-image: url('~@/assets/up-down.svg');
+  }
+}
+.icon{
+  transform: rotate(180deg);
+  transition: 0.3s;
+}
+.active {
+  transition: 0.3s;
+}
 </style>

package/src/components/newComponents/FooterNew/FooterNew.stories.js

@@ -1,20 +1,20 @@
-import AFooterNew from './FooterNew.vue'
-
-export default {
-    title: 'Footer',
-    component: AFooterNew,
-    template: '<a-footer-new></a-footer-new>'
-};
-
-const Template = (args, { argTypes }) => ({
-    components: { AFooterNew },
-    props: Object.keys(argTypes),
-    template: '<a-footer-new v-bind="$props"></a-footer-new>'
-});
-
-export const MainFooter = Template.bind({});
-
-export const WithBottomMenu = Template.bind({});
-WithBottomMenu.args = {
-    hasBottomMenu: true
-}
+import AFooterNew from './FooterNew.vue'
+
+export default {
+    title: 'Footer',
+    component: AFooterNew,
+    template: '<a-footer-new></a-footer-new>'
+};
+
+const Template = (args, { argTypes }) => ({
+    components: { AFooterNew },
+    props: Object.keys(argTypes),
+    template: '<a-footer-new v-bind="$props"></a-footer-new>'
+});
+
+export const MainFooter = Template.bind({});
+
+export const WithBottomMenu = Template.bind({});
+WithBottomMenu.args = {
+    hasBottomMenu: true
+}

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

@@ -1,39 +1,39 @@
-<template>
-  <footer class="footer">
-    <footer-top :mode="mode"/>
-    <footer-bottom :mode="mode"/>
-  </footer>
-</template>
-
-<script>
-import FooterTop from "@/components/newComponents/FooterNew/FooterTop";
-import FooterBottom from "@/components/newComponents/FooterNew/FooterBottom";
-
-export default {
-  name: "Footer",
-  components: {FooterTop, FooterBottom},
-  props: {
-    hasBottomMenu: {
-      type: Boolean,
-      default: false
-    },
-    mode: {
-      type: String,
-      required: true,
-      validator: function (value) {
-        return ["prod", "dev", "staging"].indexOf(value) !== -1;
-      },
-    },
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.footer {
-  background: #2C3E50;
-  border-bottom: 0.5px solid #FFFFFF;
-  margin-top: 20px;
-}
-
-
-</style>
+<template>
+  <footer class="footer">
+    <footer-top :mode="mode"/>
+    <footer-bottom :mode="mode"/>
+  </footer>
+</template>
+
+<script>
+import FooterTop from "@/components/newComponents/FooterNew/FooterTop";
+import FooterBottom from "@/components/newComponents/FooterNew/FooterBottom";
+
+export default {
+  name: "Footer",
+  components: {FooterTop, FooterBottom},
+  props: {
+    hasBottomMenu: {
+      type: Boolean,
+      default: false
+    },
+    mode: {
+      type: String,
+      required: true,
+      validator: function (value) {
+        return ["prod", "dev", "staging"].indexOf(value) !== -1;
+      },
+    },
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.footer {
+  background: #2C3E50;
+  border-bottom: 0.5px solid #FFFFFF;
+  margin-top: 20px;
+}
+
+
+</style>