adata-ui 0.3.73 → 0.3.74

package/src/components/Button/AButton.vue

@@ -1,231 +1,231 @@
-<template>
-  <component
-    :class="[
-      'a-btn',
-      `a-btn_${variant}`,
-      `size_${size}`,
-    ]"
-    v-bind="$attrs"
-    v-on="$listeners"
-    :is="url ? 'a' : nuxtUrl ? 'nuxt-link' : 'button'"
-    :href="url"
-    :to="nuxtUrl"
-    :event="event ? 'click' : ''"
-    :disabled="disabled"
-  >
-    <slot></slot>
-  </component>
-</template>
-
-
-<script>
-export default {
-  name: "AButton",
-  props: {
-    variant: {
-      type: String,
-      default: "yellow",
-      validator: function (value) {
-        return (
-          [
-            'white',
-            'grey',
-            'yellow',
-            'red',
-            'green',
-            'blue_outlined',
-            'blue'
-          ].includes(value)
-        );
-      },
-    },
-    size: {
-      type: String,
-      default: "md",
-      validator: function (value) {
-        return (
-          [
-            'sm',
-            'md',
-            'extra_sm',
-            'fit',
-            'fit-md',
-          ].includes(value)
-        );
-      },
-    },
-    url: {
-      type: String,
-    },
-    nuxtUrl: {
-      type: String,
-    },
-    event: {
-      type: Boolean,
-      default: true
-    },
-    disabled: {
-      type: Boolean,
-      default: false
-    }
-  },
-}
-</script>
-
-<style lang="scss">
-
-.a-btn {
-  cursor: pointer;
-  border: none;
-  border-radius: 2px;
-  font-size: 14px;
-  font-weight: 500;
-
-  display: flex;
-  justify-content: center;
-  align-items: center;
-
-  @media screen and (max-width: 560px) {
-    width: 100%;
-    text-align: center;
-  }
-
-  svg {
-    margin-right: 8px;
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-  }
-
-  &.size {
-    &_extra_sm {
-      height: 24px;
-      padding: 3px 16px;
-      font-size: 12px;
-    }
-    &_sm {
-      height: 32px;
-      padding: 6px 20px;
-    }
-    &_md {
-      height: 40px;
-      padding: 8px 30px;
-    }
-    &_fit {
-      padding: 8px 0;
-      width: 100%;
-    }
-    &_fit-md {
-      height: 40px;
-      padding: 8px 0;
-      width: 100%;
-    }
-  }
-
-  &_grey {
-    color: var(--newGray);
-    border: 1px solid #9da3ac;
-    background: #fff;
-
-    &:hover {
-      background: #eef0f5;
-    }
-
-    &:active {
-      background: #eef0f5;
-    }
-  }
-
-  &-white {
-    background: #FFFFFF;
-    color: #007AFF;
-
-    &:hover {
-      background: #eef0f5;
-    }
-
-    &:active {
-      background: #d6d6d7;
-    }
-  }
-
-  &_yellow {
-    background: linear-gradient(140.08deg, #FFE15A 13.59%, #FBC920 85.57%);
-    color: #2C3E50;
-
-    &:hover {
-      background: #FBC920;
-    }
-
-    &:active {
-      background: #FBC920;
-    }
-  }
-
-  &_red {
-    border: 1px solid #FF2E43;
-    color: #FF2E43;
-    background-color: transparent;
-    &:hover {
-      background: #FF2E43;
-      color: #fff;
-    }
-
-    &:active {
-      background: #FF2E43;
-      color: #fff;
-    }
-  }
-
-  &_green {
-    background: #00B92D;
-    color: #fff;
-
-    &:hover {
-      background: #008621;
-    }
-
-    &:active {
-      background: #008621;
-    }
-  }
-
-  &_blue_outlined {
-    border: 1px solid #007AFF;
-    color: #007AFF;
-    background-color: transparent;
-
-    &:hover {
-      background: #007AFF;
-      color: #fff;
-    }
-
-    &:active {
-      background: #0055BB;
-      color: #fff;
-    }
-
-  }
-
-  &_blue {
-    background: #007AFF;
-    color: #FFF;
-
-    &:hover {
-      background: #007AFF;
-      color: #fff;
-    }
-
-    &:active {
-      background: #0055BB;
-      color: #fff;
-    }
-  }
-
-  box-sizing: border-box !important;
-  -webkit-box-sizing: border-box !important;
-  -moz-box-sizing: border-box !important;
-  -ms-box-sizing: border-box !important;
-}
-</style>
+<template>
+  <component
+    :class="[
+      'a-btn',
+      `a-btn_${variant}`,
+      `size_${size}`,
+    ]"
+    v-bind="$attrs"
+    v-on="$listeners"
+    :is="url ? 'a' : nuxtUrl ? 'nuxt-link' : 'button'"
+    :href="url"
+    :to="nuxtUrl"
+    :event="event ? 'click' : ''"
+    :disabled="disabled"
+  >
+    <slot></slot>
+  </component>
+</template>
+
+
+<script>
+export default {
+  name: "AButton",
+  props: {
+    variant: {
+      type: String,
+      default: "yellow",
+      validator: function (value) {
+        return (
+          [
+            'white',
+            'grey',
+            'yellow',
+            'red',
+            'green',
+            'blue_outlined',
+            'blue'
+          ].includes(value)
+        );
+      },
+    },
+    size: {
+      type: String,
+      default: "md",
+      validator: function (value) {
+        return (
+          [
+            'sm',
+            'md',
+            'extra_sm',
+            'fit',
+            'fit-md',
+          ].includes(value)
+        );
+      },
+    },
+    url: {
+      type: String,
+    },
+    nuxtUrl: {
+      type: String,
+    },
+    event: {
+      type: Boolean,
+      default: true
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    }
+  },
+}
+</script>
+
+<style lang="scss">
+
+.a-btn {
+  cursor: pointer;
+  border: none;
+  border-radius: 2px;
+  font-size: 14px;
+  font-weight: 500;
+
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  @media screen and (max-width: 560px) {
+    width: 100%;
+    text-align: center;
+  }
+
+  svg {
+    margin-right: 8px;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+  }
+
+  &.size {
+    &_extra_sm {
+      height: 24px;
+      padding: 3px 16px;
+      font-size: 12px;
+    }
+    &_sm {
+      height: 32px;
+      padding: 6px 20px;
+    }
+    &_md {
+      height: 40px;
+      padding: 8px 30px;
+    }
+    &_fit {
+      padding: 8px 0;
+      width: 100%;
+    }
+    &_fit-md {
+      height: 40px;
+      padding: 8px 0;
+      width: 100%;
+    }
+  }
+
+  &_grey {
+    color: var(--newGray);
+    border: 1px solid #9da3ac;
+    background: #fff;
+
+    &:hover {
+      background: #eef0f5;
+    }
+
+    &:active {
+      background: #eef0f5;
+    }
+  }
+
+  &-white {
+    background: #FFFFFF;
+    color: #007AFF;
+
+    &:hover {
+      background: #eef0f5;
+    }
+
+    &:active {
+      background: #d6d6d7;
+    }
+  }
+
+  &_yellow {
+    background: linear-gradient(140.08deg, #FFE15A 13.59%, #FBC920 85.57%);
+    color: #2C3E50;
+
+    &:hover {
+      background: #FBC920;
+    }
+
+    &:active {
+      background: #FBC920;
+    }
+  }
+
+  &_red {
+    border: 1px solid #FF2E43;
+    color: #FF2E43;
+    background-color: transparent;
+    &:hover {
+      background: #FF2E43;
+      color: #fff;
+    }
+
+    &:active {
+      background: #FF2E43;
+      color: #fff;
+    }
+  }
+
+  &_green {
+    background: #00B92D;
+    color: #fff;
+
+    &:hover {
+      background: #008621;
+    }
+
+    &:active {
+      background: #008621;
+    }
+  }
+
+  &_blue_outlined {
+    border: 1px solid #007AFF;
+    color: #007AFF;
+    background-color: transparent;
+
+    &:hover {
+      background: #007AFF;
+      color: #fff;
+    }
+
+    &:active {
+      background: #0055BB;
+      color: #fff;
+    }
+
+  }
+
+  &_blue {
+    background: #007AFF;
+    color: #FFF;
+
+    &:hover {
+      background: #007AFF;
+      color: #fff;
+    }
+
+    &:active {
+      background: #0055BB;
+      color: #fff;
+    }
+  }
+
+  box-sizing: border-box !important;
+  -webkit-box-sizing: border-box !important;
+  -moz-box-sizing: border-box !important;
+  -ms-box-sizing: border-box !important;
+}
+</style>

package/src/components/Button/Button.stories.js

@@ -1,23 +1,23 @@
-import AButton from './AButton.vue'
-import { action } from "@storybook/addon-actions"
-
-export default {
-    title: 'Button',
-    component: AButton,
-    template: '<a-button>Button</a-button>'
-}
-
-const Template = (args, { argTypes }) => ({
-    components: { AButton },
-    props: Object.keys(argTypes),
-    template: '<a-button @click="action" v-bind="$props">Button</a-button>',
-    methods: {
-        action: action('click')
-    }
-})
-
-export const Simple = Template.bind({})
-Simple.args = {
-    size: 'lg',
-    variant: 'yellow'
-}
+import AButton from './AButton.vue'
+import { action } from "@storybook/addon-actions"
+
+export default {
+    title: 'Button',
+    component: AButton,
+    template: '<a-button>Button</a-button>'
+}
+
+const Template = (args, { argTypes }) => ({
+    components: { AButton },
+    props: Object.keys(argTypes),
+    template: '<a-button @click="action" v-bind="$props">Button</a-button>',
+    methods: {
+        action: action('click')
+    }
+})
+
+export const Simple = Template.bind({})
+Simple.args = {
+    size: 'lg',
+    variant: 'yellow'
+}