adata-ui 0.1.4 → 0.1.8

package/src/components/PasswordField/PasswordField.stories.js

@@ -3,7 +3,7 @@ import PasswordField from "./PasswordField.vue";
 export default {
     title: 'PasswordField',
     component: PasswordField,
-    template: "<text-field label='Example'></text-field>>"
+    template: "<password-field label='Example'></password-field>"
 }
 
 const Template = (args, { argTypes }) => ({

package/src/components/index.js

@@ -3,12 +3,15 @@ import AButton from './Button/BaseButton'
 import ATextField from './TextField/TextField'
 import APasswordField from './PasswordField/PasswordField'
 import AAlert from './Alert/Alert'
-
+import AHeader from './Header/Header'
+import AFooter from './Footer/Footer'
 const Components = {
     AButton,
     ATextField,
     APasswordField,
-    AAlert
+    AAlert,
+    AHeader,
+    AFooter
 };
 
 Object.keys(Components).forEach(name => {

package/src/components/transitions/SlideToggle.vue

@@ -0,0 +1,55 @@
+<template>
+  <transition
+    v-on:before-enter="beforeEnter"
+    v-on:enter="enter"
+    v-on:after-enter="afterEnter"
+    v-on:before-leave="beforeLeave"
+    v-on:leave="leave"
+    v-on:after-leave="afterLeave"
+  >
+    <slot :animationClass="'slideToggleAnimation'" :compareNotificationClass="'compareNotification'"
+          :fastAnimation="'fastAnimation'"/>
+  </transition>
+</template>
+<script>
+export default {
+  methods: {
+    beforeEnter: function (el) {
+      el.style.height = "0";
+      el.style.overflow = "hidden";
+    },
+    enter: function (el) {
+      el.style.height = el.scrollHeight + "px";
+    },
+    afterEnter: function (el) {
+      el.style.height = "auto";
+      el.style.overflow = "initial";
+    },
+    beforeLeave: function (el) {
+      el.style.overflow = "hidden";
+      el.style.height = el.scrollHeight + "px";
+      el.scrollHeight;
+    },
+    leave: function (el) {
+      el.style.height = "0";
+    },
+    afterLeave: function (el) {
+      el.style.height = "auto";
+      el.style.overflow = "initial";
+    },
+  },
+};
+</script>
+<style>
+.slideToggleAnimation {
+  transition: 0.3s all;
+}
+
+.fastAnimation {
+  transition: 0.01s all;
+}
+
+.compareNotification {
+  transition: 3s all;
+}
+</style>

package/src/components/transitions/VerticalMobileToggle.vue

@@ -0,0 +1,76 @@
+<template>
+  <transition
+    v-on:before-enter="beforeEnter"
+    v-on:enter="enter"
+    v-on:after-enter="afterEnter"
+    v-on:before-leave="beforeLeave"
+    v-on:leave="leave"
+    v-on:after-leave="afterLeave"
+  >
+    <slot :animationClass="'slideToggleAnimation'" :compareNotificationClass="'compareNotification'" />
+  </transition>
+</template>
+<script>
+export default {
+  props: {
+    zIndex: {
+      type: Number,
+      default: 0
+    },
+    top: {
+      type: String,
+      default: "0%"
+    },
+    overflow: {
+      type: String,
+      default: "initial"
+    }
+  },
+  methods: {
+    beforeEnter: function (el) {
+      el.style.width = "0";
+      el.style.overflowX = "hidden";
+      el.style.overflowY = "hidden";
+      el.style.position = "fixed";
+      el.style.top = "0";
+      el.style.right = "0";
+      el.style.background = "#fff";
+    },
+    afterEnter: function (el) {
+      el.style.height = "100vh";
+      el.style.width = "100vw";
+      el.style.overflowX = "hidden";
+      el.style.overflowY = "auto";
+      el.style.position = "fixed";
+      el.style.top = this.top;
+      el.style.right = "0";
+      el.style.background = "#fff";
+      el.style.zIndex = (90 + this.zIndex).toString();
+    },
+    beforeLeave: function (el) {
+      el.style.overflow = "hidden";
+      el.style.width = el.scrollHeight + "px";
+      el.scrollHeight;
+    },
+    leave: function (el) {
+      el.style.width = "0";
+    },
+    afterLeave: function (el) {
+      el.style.position = "fixed";
+      el.style.top = "0";
+      el.style.right = "0";
+      el.style.width = "auto";
+      el.style.overflow = "initial";
+    },
+  },
+};
+</script>
+<style>
+.slideToggleAnimation {
+  transition: 0.3s all;
+
+}
+.compareNotification{
+  transition: 3s all;
+}
+</style>

package/src/configs/navigationBarConfig.js

@@ -0,0 +1,22 @@
+export const menuList = [
+  {
+    id: 1,
+    name: "Контрагенты",
+    url: 'https://pk.adata.kz',
+  },
+  {
+    id: 2,
+    name: "Тендеры",
+    url: 'https://tender.adata.kz',
+  },
+  {
+    id: 3,
+    name: "Работа",
+    url: 'https://work.adata.kz',
+  },
+  {
+    id: 4,
+    name: "Штрафы",
+    url: 'https://fines.adata.kz',
+  }
+];

package/src/configs/profileDropDown.js

@@ -0,0 +1,101 @@
+export const profileDropDown = [
+    {
+        id: 1,
+        name: "Общие настройки",
+        url: "https://adata.kz/profile?tab=general",
+        disabled: false
+    },
+    {
+        id: 2,
+        name: "Увеличить лимит запросов",
+        url: "https://adata.kz/profile?tab=tariffs",
+        disabled: false
+    },
+    {
+        id: 3,
+        name: "Текущий баланс: 0 ₸",
+        url: "https://adata.kz/profile?tab=tariffs",
+        link: "Пополнить",
+        disabled: true
+    },
+    {
+        id: 4,
+        name: "Историй платежей",
+        url: "https://adata.kz/profile?tab=payments",
+        disabled: false
+    },
+    {
+        id: 5,
+        name: "Контрагенты",
+        opened: false,
+        children: [
+            {
+                id: 8,
+                name: "Избранные",
+                url: "https://pk.adata.kz/profile/favorites"
+            },
+            {
+                id: 9,
+                name: "История просмотров",
+                url: "https://pk.adata.kz/profile/browsing-history"
+            }
+        ],
+        disabled: false
+    },
+    {
+        id: 6,
+        name: "Работа",
+        opened: false,
+        children: [
+            {
+                id: 10,
+                name: "Профиль",
+                url: "https://work.adata.kz/profile/account"
+            },
+            {
+                id: 11,
+                name: "Создать резюме",
+                url: "https://work.adata.kz/user/create"
+            },
+            {
+                id: 12,
+                name: "Отклики",
+                url: "https://work.adata.kz/profile/application"
+            },
+            {
+                id: 13,
+                name: "Предложения",
+                url: "https://work.adata.kz/profile/offer"
+            }
+        ],
+        disabled: false
+    },
+    {
+        id: 7,
+        name: "Тендеры",
+        opened: false,
+        children: [
+            {
+                id: 14,
+                name: "Поиск тендеров",
+                url: "https://tender.adata.kz/"
+            },
+            {
+                id: 15,
+                name: "Поиск договоров",
+                url: "https://tender.adata.kz/main/contracts"
+            },
+            {
+                id: 16,
+                name: "Планы закупок",
+                url: "https://tender.adata.kz/main/plans"
+            },
+            {
+                id: 17,
+                name: "Шаблоны поиска",
+                url: "https://tender.adata.kz/profile/search-profile"
+            }
+        ],
+        disabled: false
+    },
+];

package/src/stories/Button.stories.js

@@ -1,46 +1,46 @@
-import MyButton from './Button.vue';
-
-// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
-export default {
-  title: 'Example/Button',
-  component: MyButton,
-  // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
-  argTypes: {
-    backgroundColor: { control: 'color' },
-    size: {
-      control: { type: 'select' },
-      options: ['small', 'medium', 'large'],
-    },
-  },
-};
-
-// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { MyButton },
-  template: '<my-button @onClick="onClick" v-bind="$props" />',
-});
-
-export const Primary = Template.bind({});
-// More on args: https://storybook.js.org/docs/vue/writing-stories/args
-Primary.args = {
-  primary: true,
-  label: 'Button',
-};
-
-export const Secondary = Template.bind({});
-Secondary.args = {
-  label: 'Button',
-};
-
-export const Large = Template.bind({});
-Large.args = {
-  size: 'large',
-  label: 'Button',
-};
-
-export const Small = Template.bind({});
-Small.args = {
-  size: 'small',
-  label: 'Button',
-};
+import MyButton from './Button.vue';
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: 'Example/Button',
+  component: MyButton,
+  // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
+  argTypes: {
+    backgroundColor: { control: 'color' },
+    size: {
+      control: { type: 'select' },
+      options: ['small', 'medium', 'large'],
+    },
+  },
+};
+
+// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { MyButton },
+  template: '<my-button @onClick="onClick" v-bind="$props" />',
+});
+
+export const Primary = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Primary.args = {
+  primary: true,
+  label: 'Button',
+};
+
+export const Secondary = Template.bind({});
+Secondary.args = {
+  label: 'Button',
+};
+
+export const Large = Template.bind({});
+Large.args = {
+  size: 'large',
+  label: 'Button',
+};
+
+export const Small = Template.bind({});
+Small.args = {
+  size: 'small',
+  label: 'Button',
+};

package/src/stories/Button.vue

@@ -1,54 +1,54 @@
-<template>
-  <button type="button" :class="classes" @click="onClick" :style="style">{{ label }}</button>
-</template>
-
-<script>
-import './button.css';
-
-export default {
-  name: 'my-button',
-
-  props: {
-    label: {
-      type: String,
-      required: true,
-    },
-    primary: {
-      type: Boolean,
-      default: false,
-    },
-    size: {
-      type: String,
-      default: 'medium',
-      validator: function (value) {
-        return ['small', 'medium', 'large'].indexOf(value) !== -1;
-      },
-    },
-    backgroundColor: {
-      type: String,
-    },
-  },
-
-  computed: {
-    classes() {
-      return {
-        'storybook-button': true,
-        'storybook-button--primary': this.primary,
-        'storybook-button--secondary': !this.primary,
-        [`storybook-button--${this.size}`]: true,
-      };
-    },
-    style() {
-      return {
-        backgroundColor: this.backgroundColor,
-      };
-    },
-  },
-
-  methods: {
-    onClick() {
-      this.$emit('onClick');
-    },
-  },
-};
-</script>
+<template>
+  <button type="button" :class="classes" @click="onClick" :style="style">{{ label }}</button>
+</template>
+
+<script>
+import './button.css';
+
+export default {
+  name: 'my-button',
+
+  props: {
+    label: {
+      type: String,
+      required: true,
+    },
+    primary: {
+      type: Boolean,
+      default: false,
+    },
+    size: {
+      type: String,
+      default: 'medium',
+      validator: function (value) {
+        return ['small', 'medium', 'large'].indexOf(value) !== -1;
+      },
+    },
+    backgroundColor: {
+      type: String,
+    },
+  },
+
+  computed: {
+    classes() {
+      return {
+        'storybook-button': true,
+        'storybook-button--primary': this.primary,
+        'storybook-button--secondary': !this.primary,
+        [`storybook-button--${this.size}`]: true,
+      };
+    },
+    style() {
+      return {
+        backgroundColor: this.backgroundColor,
+      };
+    },
+  },
+
+  methods: {
+    onClick() {
+      this.$emit('onClick');
+    },
+  },
+};
+</script>

package/src/stories/Header.stories.js

@@ -1,21 +1,21 @@
-import MyHeader from './Header';
-
-export default {
-  title: 'Example/Header',
-  component: MyHeader,
-};
-
-const Template = (args, { argTypes }) => ({
-  props: Object.keys(argTypes),
-  components: { MyHeader },
-  template:
-    '<my-header :user="user" @onLogin="onLogin" @onLogout="onLogout" @onCreateAccount="onCreateAccount" />',
-});
-
-export const LoggedIn = Template.bind({});
-LoggedIn.args = {
-  user: {},
-};
-
-export const LoggedOut = Template.bind({});
-LoggedOut.args = {};
+import MyHeader from './Header';
+
+export default {
+  title: 'Example/Header',
+  component: MyHeader,
+};
+
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { MyHeader },
+  template:
+    '<my-header :user="user" @onLogin="onLogin" @onLogout="onLogout" @onCreateAccount="onCreateAccount" />',
+});
+
+export const LoggedIn = Template.bind({});
+LoggedIn.args = {
+  user: {},
+};
+
+export const LoggedOut = Template.bind({});
+LoggedOut.args = {};

package/src/stories/Header.vue

@@ -1,59 +1,59 @@
-<template>
-  <header>
-    <div class="wrapper">
-      <div>
-        <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
-          <g fill="none" fill-rule="evenodd">
-            <path
-              d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
-              fill="#FFF"
-            />
-            <path
-              d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
-              fill="#555AB9"
-            />
-            <path
-              d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
-              fill="#91BAF8"
-            />
-          </g>
-        </svg>
-        <h1>Acme</h1>
-      </div>
-      <div>
-        <my-button size="small" @onClick="onLogout" label="Log out" v-if="user" />
-        <my-button size="small" @onClick="onLogin" label="Log in" v-if="!user" />
-        <my-button primary size="small" @onClick="onCreateAccount" label="Sign up" v-if="!user" />
-      </div>
-    </div>
-  </header>
-</template>
-
-<script>
-import './header.css';
-import MyButton from './Button.vue';
-
-export default {
-  name: 'my-header',
-
-  components: { MyButton },
-
-  props: {
-    user: {
-      type: Object,
-    },
-  },
-
-  methods: {
-    onLogin() {
-      this.$emit('onLogin');
-    },
-    onLogout() {
-      this.$emit('onLogout');
-    },
-    onCreateAccount() {
-      this.$emit('onCreateAccount');
-    },
-  },
-};
-</script>
+<template>
+  <header>
+    <div class="wrapper">
+      <div>
+        <svg width="32" height="32" viewBox="0 0 32 32" xmlns="http://www.w3.org/2000/svg">
+          <g fill="none" fill-rule="evenodd">
+            <path
+              d="M10 0h12a10 10 0 0110 10v12a10 10 0 01-10 10H10A10 10 0 010 22V10A10 10 0 0110 0z"
+              fill="#FFF"
+            />
+            <path
+              d="M5.3 10.6l10.4 6v11.1l-10.4-6v-11zm11.4-6.2l9.7 5.5-9.7 5.6V4.4z"
+              fill="#555AB9"
+            />
+            <path
+              d="M27.2 10.6v11.2l-10.5 6V16.5l10.5-6zM15.7 4.4v11L6 10l9.7-5.5z"
+              fill="#91BAF8"
+            />
+          </g>
+        </svg>
+        <h1>Acme</h1>
+      </div>
+      <div>
+        <my-button size="small" @onClick="onLogout" label="Log out" v-if="user" />
+        <my-button size="small" @onClick="onLogin" label="Log in" v-if="!user" />
+        <my-button primary size="small" @onClick="onCreateAccount" label="Sign up" v-if="!user" />
+      </div>
+    </div>
+  </header>
+</template>
+
+<script>
+import './header.css';
+import MyButton from './Button.vue';
+
+export default {
+  name: 'my-header',
+
+  components: { MyButton },
+
+  props: {
+    user: {
+      type: Object,
+    },
+  },
+
+  methods: {
+    onLogin() {
+      this.$emit('onLogin');
+    },
+    onLogout() {
+      this.$emit('onLogout');
+    },
+    onCreateAccount() {
+      this.$emit('onCreateAccount');
+    },
+  },
+};
+</script>