adata-ui 0.3.80 → 0.3.82

package/src/components/Header/ChildLinks.vue

@@ -1,144 +1,144 @@
-<template>
-  <ul class="child-links">
-    <li v-for="(link, i) in links.children" :key="i">
-      <div class="child-links__info">
-        <component
-            class="child-links__info__item"
-            exact-active-class="active"
-            :is="module === links.key? 'nuxt-link': 'a'"
-            :href="module === links.key ? links.to: `${links[mode]}${link.to}`"
-            :to="module === links.key ? link.to: null"
-        >
-          <span v-html="serviceIcons[link.icon]" class="child-links__info__item__icon"></span>
-          <p>
-            <span class="child-links__info__item__name">{{ link.name }}</span>
-            <span class="child-links__info__item__subtitle">{{ link.subtitle }}</span>
-          </p>
-        </component>
-        <component
-            :is="module === links.key? 'nuxt-link': 'a'"
-            :to="module === links.key ? link.to: null"
-            :href="module === links.key ? links.to: `${links[mode]}${link.to}`" class="child-links__info-arrow">
-          <svg width="24" height="24" class="ic-24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-            <path d="M9 18L15 12L9 6" stroke="#007AFF" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
-          </svg>
-        </component>
-      </div>
-    </li>
-  </ul>
-</template>
-
-<script>
-import {serviceIcons} from "@/configs/icons";
-
-export default {
-  name: "ChildLinks",
-  props: {
-    links: {
-      type: Object,
-      default: () => ({})
-    },
-    module: {
-      type: String,
-      default: 'counterparty'
-    },
-    mode: {
-      type: String,
-      required: true
-    }
-  },
-  data() {
-    return {
-      serviceIcons
-    }
-  },
-}
-</script>
-
-<style scoped lang="scss">
-.child-links {
-  position: absolute;
-  z-index: 1;
-  left: 0;
-  background: #FFFFFF;
-  padding: 16px;
-  box-shadow: 0 10px 70px rgba(0, 0, 0, 0.08);
-  border-radius: 8px;
-  $self: &;
-
-
-
-  .active {
-    background: rgba(189, 199, 206, 0.2);
-  }
-
-  li {
-    #{ $self }__info {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      gap: 12px;
-      cursor: pointer;
-      &-arrow {
-        visibility: hidden;
-        svg{
-          transition: 0s;
-        }
-      }
-      &:hover {
-        #{ $self }__info-arrow {
-          visibility: visible;
-
-        }
-      }
-
-      .ic-24 {
-        min-width: 24px;
-        height: 24px;
-      }
-
-      &__item {
-        text-transform: none;
-        display: flex;
-        align-items: center;
-        gap: 16px;
-        min-width: 336px;
-        padding: 14px 8px;
-        border-radius: 8px;
-        transition: 0.2s ease;
-
-        &:hover {
-          background: rgba(189, 199, 206, 0.2);
-        }
-
-
-        &__icon {
-          display: grid;
-          place-content: center;
-          width: 40px;
-          height: 40px;
-          min-width: 40px;
-          background: rgba(189, 199, 206, 0.2);
-          border-radius: 4px;
-        }
-
-        &__name {
-          display: block;
-          font-weight: 600;
-          font-size: 14px;
-          line-height: 20px;
-          color: #2C3E50;
-        }
-
-        &__subtitle {
-          display: block;
-          font-weight: 400;
-          font-size: 12px;
-          line-height: 20px;
-          color: #71757A;
-        }
-      }
-    }
-  }
-}
-</style>
+<template>
+  <ul class="child-links">
+    <li v-for="(link, i) in links.children" :key="i">
+      <div class="child-links__info">
+        <component
+            class="child-links__info__item"
+            exact-active-class="active"
+            :is="module === links.key? 'nuxt-link': 'a'"
+            :href="module === links.key ? links.to: `${links[mode]}${link.to}`"
+            :to="module === links.key ? link.to: null"
+        >
+          <span v-html="serviceIcons[link.icon]" class="child-links__info__item__icon"></span>
+          <p>
+            <span class="child-links__info__item__name">{{ link.name }}</span>
+            <span class="child-links__info__item__subtitle">{{ link.subtitle }}</span>
+          </p>
+        </component>
+        <component
+            :is="module === links.key? 'nuxt-link': 'a'"
+            :to="module === links.key ? link.to: null"
+            :href="module === links.key ? links.to: `${links[mode]}${link.to}`" class="child-links__info-arrow">
+          <svg width="24" height="24" class="ic-24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M9 18L15 12L9 6" stroke="#007AFF" stroke-width="1.3" stroke-linecap="round" stroke-linejoin="round"/>
+          </svg>
+        </component>
+      </div>
+    </li>
+  </ul>
+</template>
+
+<script>
+import {serviceIcons} from "@/configs/icons";
+
+export default {
+  name: "ChildLinks",
+  props: {
+    links: {
+      type: Object,
+      default: () => ({})
+    },
+    module: {
+      type: String,
+      default: 'counterparty'
+    },
+    mode: {
+      type: String,
+      required: true
+    }
+  },
+  data() {
+    return {
+      serviceIcons
+    }
+  },
+}
+</script>
+
+<style scoped lang="scss">
+.child-links {
+  position: absolute;
+  z-index: 1;
+  left: 0;
+  background: #FFFFFF;
+  padding: 16px;
+  box-shadow: 0 10px 70px rgba(0, 0, 0, 0.08);
+  border-radius: 8px;
+  $self: &;
+
+
+
+  .active {
+    background: rgba(189, 199, 206, 0.2);
+  }
+
+  li {
+    #{ $self }__info {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      gap: 12px;
+      cursor: pointer;
+      &-arrow {
+        visibility: hidden;
+        svg{
+          transition: 0s;
+        }
+      }
+      &:hover {
+        #{ $self }__info-arrow {
+          visibility: visible;
+
+        }
+      }
+
+      .ic-24 {
+        min-width: 24px;
+        height: 24px;
+      }
+
+      &__item {
+        text-transform: none;
+        display: flex;
+        align-items: center;
+        gap: 16px;
+        min-width: 336px;
+        padding: 14px 8px;
+        border-radius: 8px;
+        transition: 0.2s ease;
+
+        &:hover {
+          background: rgba(189, 199, 206, 0.2);
+        }
+
+
+        &__icon {
+          display: grid;
+          place-content: center;
+          width: 40px;
+          height: 40px;
+          min-width: 40px;
+          background: rgba(189, 199, 206, 0.2);
+          border-radius: 4px;
+        }
+
+        &__name {
+          display: block;
+          font-weight: 600;
+          font-size: 14px;
+          line-height: 20px;
+          color: #2C3E50;
+        }
+
+        &__subtitle {
+          display: block;
+          font-weight: 400;
+          font-size: 12px;
+          line-height: 20px;
+          color: #71757A;
+        }
+      }
+    }
+  }
+}
+</style>

package/src/components/Header/Header.stories.js

@@ -1,56 +1,56 @@
-import AHeader from './Header.vue'
-import {action} from "@storybook/addon-actions";
-
-export default {
-    title: 'Header',
-    component: AHeader,
-    template: '<a-header></a-header>'
-};
-
-const Template = (args, { argTypes }) => ({
-    components: { AHeader },
-    props: Object.keys(argTypes),
-    template: '<a-header @menuOpen="openMenu' +
-        '" @showBalanceModal="showBalance"' +
-        ' @setShowModal="showModal"' +
-        ' @logout="logoutClick"' +
-        ' @setIsReplenishModal="setReplenishModal" v-bind="$props"' +
-        '></a-header>',
-    methods: {
-        openMenu(val) {
-            console.log(val);
-        },
-        showBalance(val) {
-            console.log(val);
-            console.log(val);
-        },
-        showModal(val) {
-            console.log(val);
-        },
-        logoutClick() {
-            console.log("logout");
-        },
-        setReplenishModal(val) {
-            console.log(val);
-        },
-    }
-});
-
-export const MainHeader = Template.bind({});
-
-export const devHeader = Template.bind({});
-devHeader.args = {
-    isDev: true
-}
-
-export const headerAuthenticated = Template.bind({});
-headerAuthenticated.args = {
-    isDev: true,
-    isAuthenticated: true,
-    requestCount: 1000,
-    daysRemaining: "11 ч 23 мин",
-    email: "sboranbayeva@gmail.com",
-    loginUrl: "https://id.adtdev.kz/auth/signin?url=https://pk.adata.kz/auth",
-    activeTabKey: 'work',
-    balance: 1954900
-}
+import AHeader from './Header.vue'
+import {action} from "@storybook/addon-actions";
+
+export default {
+    title: 'Header',
+    component: AHeader,
+    template: '<a-header></a-header>'
+};
+
+const Template = (args, { argTypes }) => ({
+    components: { AHeader },
+    props: Object.keys(argTypes),
+    template: '<a-header @menuOpen="openMenu' +
+        '" @showBalanceModal="showBalance"' +
+        ' @setShowModal="showModal"' +
+        ' @logout="logoutClick"' +
+        ' @setIsReplenishModal="setReplenishModal" v-bind="$props"' +
+        '></a-header>',
+    methods: {
+        openMenu(val) {
+            console.log(val);
+        },
+        showBalance(val) {
+            console.log(val);
+            console.log(val);
+        },
+        showModal(val) {
+            console.log(val);
+        },
+        logoutClick() {
+            console.log("logout");
+        },
+        setReplenishModal(val) {
+            console.log(val);
+        },
+    }
+});
+
+export const MainHeader = Template.bind({});
+
+export const devHeader = Template.bind({});
+devHeader.args = {
+    isDev: true
+}
+
+export const headerAuthenticated = Template.bind({});
+headerAuthenticated.args = {
+    isDev: true,
+    isAuthenticated: true,
+    requestCount: 1000,
+    daysRemaining: "11 ч 23 мин",
+    email: "sboranbayeva@gmail.com",
+    loginUrl: "https://id.adtdev.kz/auth/signin?url=https://pk.adata.kz/auth",
+    activeTabKey: 'work',
+    balance: 1954900
+}