adata-ui 0.3.73 → 0.3.74

package/src/components/Loader/Loader.vue

@@ -1,325 +1,325 @@
-<template>
-  <div
-    class="loader"
-    :class="{
-      'loader--global': global,
-      small: small || smallYellow,
-      'very-small': verySmall,
-      unloadData: unloadData,
-    }"
-  >
-    <div class="loader__wrapper">
-      <div class="loader__element" v-if="!timerCenter">
-        <p class="loader__number" v-if="timer">
-          {{ ownSeconds }}
-        </p>
-        <div
-          class="loader__base"
-          :class="[
-            {
-              small: small,
-              'very-small': verySmall,
-              'small-yellow': smallYellow,
-            },
-          ]"
-        />
-      </div>
-
-      <div class="loader__element-stable" v-if="timerCenter">
-        <p class="loader__number-stable">
-          {{ ownSeconds }}
-        </p>
-        <div
-          class="loader__base"
-          :class="[
-            {
-              small: small,
-              'very-small': verySmall,
-              'small-yellow': smallYellow,
-            },
-          ]"
-        />
-      </div>
-
-      <div class="loader__subtitle" v-if="global">
-        <slot></slot>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "BaseLoader",
-  props: {
-    timer: {
-      type: Boolean,
-      default: false,
-    },
-    timerCenter: {
-      type: Boolean,
-      default: false,
-    },
-    global: {
-      type: Boolean,
-      default: false,
-    },
-    small: {
-      type: Boolean,
-      default: false,
-    },
-    smallYellow: {
-      type: Boolean,
-      default: false,
-    },
-    verySmall: {
-      type: Boolean,
-      default: false,
-    },
-    seconds: {
-      type: [Number, String],
-      default: 0,
-    },
-    unloadData: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  data() {
-    return {
-      timerStore: null,
-      ownSeconds: this.seconds,
-    };
-  },
-  mounted() {
-    (this.timer || this.timerCenter) &&
-      (this.timerStore = setInterval(() => {
-        if (this.ownSeconds > 0) {
-          this.ownSeconds--;
-          return;
-        }
-        clearInterval(this.timerStore);
-        this.$emit("completed");
-      }, 1000));
-  },
-  beforeDestroy() {
-    clearInterval(this.timerStore);
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.loader {
-  $self: &;
-  margin: 0 auto;
-  //   tablet
-  @media screen and (max-width: 1025px) {
-    margin-top: 20px;
-  }
-  &.very-small {
-    margin: 0;
-    width: 16px;
-    height: 16px;
-  }
-
-  &.small {
-    margin: 0;
-    width: 20px;
-    height: 20px;
-  }
-
-  &__number {
-    position: absolute;
-    color: #ffcd33;
-    font-size: 24px;
-    line-height: 33px;
-    top: 38%;
-    left: 726px;
-    text-align: center;
-
-    &-stable {
-      position: absolute;
-      color: #ffcd33;
-      font-size: 24px;
-      line-height: 33px;
-      left: 50%;
-      transform: translateX(-50%);
-      text-align: center;
-      top: 20%;
-
-      @media screen and (max-width: 1025px) {
-        top: 25%;
-      }
-    }
-  }
-
-  &__element {
-    top: 350px;
-    left: 0;
-    right: 0;
-  }
-
-  &__element-stable {
-    top: 0px;
-    left: 0;
-    right: 0;
-  }
-
-  &__base {
-    height: 100px;
-    width: 100px;
-    background: #ffcd33;
-    background: linear-gradient(
-      to right,
-      #ffcd33 10%,
-      rgba(255, 255, 255, 0) 42%
-    );
-    border-radius: 50%;
-    mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #fff 0);
-    animation: spin 0.7s linear infinite;
-    margin-left: auto;
-    margin-right: auto;
-    @media screen and (max-width: 1025px) {
-      height: 60px;
-      width: 60px;
-    }
-
-    &.small {
-      width: 20px;
-      height: 20px;
-      margin: 0;
-      background: linear-gradient(
-        to right,
-        #217aff 28%,
-        rgba(255, 255, 255, 0) 42%
-      );
-      mask: radial-gradient(
-        farthest-side,
-        transparent calc(100% - 1.5px),
-        #fff 0
-      );
-    }
-
-    &.small-yellow {
-      width: 20px;
-      height: 20px;
-      margin: 0;
-      background: linear-gradient(
-        to right,
-        #ffcd33 28%,
-        rgba(255, 255, 255, 0) 42%
-      );
-      mask: radial-gradient(
-        farthest-side,
-        transparent calc(100% - 1.5px),
-        #fff 0
-      );
-    }
-
-    &.very-small {
-      width: 16px;
-      height: 16px;
-      margin: 0;
-      background: linear-gradient(
-        to right,
-        #217aff 28%,
-        rgba(255, 255, 255, 0) 42%
-      );
-      mask: radial-gradient(
-        farthest-side,
-        transparent calc(100% - 1.5px),
-        #fff 0
-      );
-    }
-  }
-
-  &__subtitle {
-    text-align: center;
-    margin-top: 40px;
-
-    p {
-      font-size: 18px;
-      line-height: 25px;
-      color: var(--newGray);
-      font-weight: 400;
-    }
-  }
-
-  &.unloadData {
-    #{$self}__element {
-      position: relative;
-      top: 200px;
-    }
-
-    #{$self}__number {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-    }
-  }
-
-  &--global {
-    position: fixed;
-    top: 0;
-    left: 0;
-    right: 0;
-    bottom: 0;
-    width: 100%;
-    height: 100%;
-    background: #fff;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    #{$self}__base {
-      margin-top: 0;
-    }
-
-    #{$self}__element {
-      position: relative;
-      top: 20px;
-    }
-
-    #{$self}__number {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-    }
-  }
-}
-
-@keyframes spin {
-  0% {
-    transform: rotate(0deg);
-  }
-  100% {
-    transform: rotate(360deg);
-  }
-}
-
-.download-button.colored--blue {
-  &:hover {
-    .loader__base.small {
-      background: linear-gradient(
-        to right,
-        #fff 28%,
-        rgba(255, 255, 255, 0) 42%
-      );
-    }
-  }
-}
-
-.right-side {
-  @media screen and (max-width: 1025px) {
-    .loader.small {
-      position: absolute;
-      right: 0;
-      height: 100%;
-      display: flex;
-      align-items: center;
-    }
-  }
-}
-</style>
+<template>
+  <div
+    class="loader"
+    :class="{
+      'loader--global': global,
+      small: small || smallYellow,
+      'very-small': verySmall,
+      unloadData: unloadData,
+    }"
+  >
+    <div class="loader__wrapper">
+      <div class="loader__element" v-if="!timerCenter">
+        <p class="loader__number" v-if="timer">
+          {{ ownSeconds }}
+        </p>
+        <div
+          class="loader__base"
+          :class="[
+            {
+              small: small,
+              'very-small': verySmall,
+              'small-yellow': smallYellow,
+            },
+          ]"
+        />
+      </div>
+
+      <div class="loader__element-stable" v-if="timerCenter">
+        <p class="loader__number-stable">
+          {{ ownSeconds }}
+        </p>
+        <div
+          class="loader__base"
+          :class="[
+            {
+              small: small,
+              'very-small': verySmall,
+              'small-yellow': smallYellow,
+            },
+          ]"
+        />
+      </div>
+
+      <div class="loader__subtitle" v-if="global">
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "BaseLoader",
+  props: {
+    timer: {
+      type: Boolean,
+      default: false,
+    },
+    timerCenter: {
+      type: Boolean,
+      default: false,
+    },
+    global: {
+      type: Boolean,
+      default: false,
+    },
+    small: {
+      type: Boolean,
+      default: false,
+    },
+    smallYellow: {
+      type: Boolean,
+      default: false,
+    },
+    verySmall: {
+      type: Boolean,
+      default: false,
+    },
+    seconds: {
+      type: [Number, String],
+      default: 0,
+    },
+    unloadData: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      timerStore: null,
+      ownSeconds: this.seconds,
+    };
+  },
+  mounted() {
+    (this.timer || this.timerCenter) &&
+      (this.timerStore = setInterval(() => {
+        if (this.ownSeconds > 0) {
+          this.ownSeconds--;
+          return;
+        }
+        clearInterval(this.timerStore);
+        this.$emit("completed");
+      }, 1000));
+  },
+  beforeDestroy() {
+    clearInterval(this.timerStore);
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.loader {
+  $self: &;
+  margin: 0 auto;
+  //   tablet
+  @media screen and (max-width: 1025px) {
+    margin-top: 20px;
+  }
+  &.very-small {
+    margin: 0;
+    width: 16px;
+    height: 16px;
+  }
+
+  &.small {
+    margin: 0;
+    width: 20px;
+    height: 20px;
+  }
+
+  &__number {
+    position: absolute;
+    color: #ffcd33;
+    font-size: 24px;
+    line-height: 33px;
+    top: 38%;
+    left: 726px;
+    text-align: center;
+
+    &-stable {
+      position: absolute;
+      color: #ffcd33;
+      font-size: 24px;
+      line-height: 33px;
+      left: 50%;
+      transform: translateX(-50%);
+      text-align: center;
+      top: 20%;
+
+      @media screen and (max-width: 1025px) {
+        top: 25%;
+      }
+    }
+  }
+
+  &__element {
+    top: 350px;
+    left: 0;
+    right: 0;
+  }
+
+  &__element-stable {
+    top: 0px;
+    left: 0;
+    right: 0;
+  }
+
+  &__base {
+    height: 100px;
+    width: 100px;
+    background: #ffcd33;
+    background: linear-gradient(
+      to right,
+      #ffcd33 10%,
+      rgba(255, 255, 255, 0) 42%
+    );
+    border-radius: 50%;
+    mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #fff 0);
+    animation: spin 0.7s linear infinite;
+    margin-left: auto;
+    margin-right: auto;
+    @media screen and (max-width: 1025px) {
+      height: 60px;
+      width: 60px;
+    }
+
+    &.small {
+      width: 20px;
+      height: 20px;
+      margin: 0;
+      background: linear-gradient(
+        to right,
+        #217aff 28%,
+        rgba(255, 255, 255, 0) 42%
+      );
+      mask: radial-gradient(
+        farthest-side,
+        transparent calc(100% - 1.5px),
+        #fff 0
+      );
+    }
+
+    &.small-yellow {
+      width: 20px;
+      height: 20px;
+      margin: 0;
+      background: linear-gradient(
+        to right,
+        #ffcd33 28%,
+        rgba(255, 255, 255, 0) 42%
+      );
+      mask: radial-gradient(
+        farthest-side,
+        transparent calc(100% - 1.5px),
+        #fff 0
+      );
+    }
+
+    &.very-small {
+      width: 16px;
+      height: 16px;
+      margin: 0;
+      background: linear-gradient(
+        to right,
+        #217aff 28%,
+        rgba(255, 255, 255, 0) 42%
+      );
+      mask: radial-gradient(
+        farthest-side,
+        transparent calc(100% - 1.5px),
+        #fff 0
+      );
+    }
+  }
+
+  &__subtitle {
+    text-align: center;
+    margin-top: 40px;
+
+    p {
+      font-size: 18px;
+      line-height: 25px;
+      color: var(--newGray);
+      font-weight: 400;
+    }
+  }
+
+  &.unloadData {
+    #{$self}__element {
+      position: relative;
+      top: 200px;
+    }
+
+    #{$self}__number {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+
+  &--global {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    width: 100%;
+    height: 100%;
+    background: #fff;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    #{$self}__base {
+      margin-top: 0;
+    }
+
+    #{$self}__element {
+      position: relative;
+      top: 20px;
+    }
+
+    #{$self}__number {
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+    }
+  }
+}
+
+@keyframes spin {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+.download-button.colored--blue {
+  &:hover {
+    .loader__base.small {
+      background: linear-gradient(
+        to right,
+        #fff 28%,
+        rgba(255, 255, 255, 0) 42%
+      );
+    }
+  }
+}
+
+.right-side {
+  @media screen and (max-width: 1025px) {
+    .loader.small {
+      position: absolute;
+      right: 0;
+      height: 100%;
+      display: flex;
+      align-items: center;
+    }
+  }
+}
+</style>

package/src/components/MailTo/MailTo.stories.js

@@ -1,15 +1,15 @@
-import MailTo from "./MailTo.vue";
-
-export default {
-  title: "MailTo",
-  component: MailTo,
-  template: "<a-mail-to></a-mail-to>",
-};
-
-const Template = (args, { argTypes }) => ({
-  components: { MailTo },
-  props: Object.keys(argTypes),
-  template: '<mail-to v-bind="$props"></mail-to>',
-});
-
+import MailTo from "./MailTo.vue";
+
+export default {
+  title: "MailTo",
+  component: MailTo,
+  template: "<a-mail-to></a-mail-to>",
+};
+
+const Template = (args, { argTypes }) => ({
+  components: { MailTo },
+  props: Object.keys(argTypes),
+  template: '<mail-to v-bind="$props"></mail-to>',
+});
+
 export const AMailTo = Template.bind({});