adata-ui 0.3.58 → 0.3.60

package/src/components/ServiceSlider/ServiceSlider.stories.js

@@ -1,20 +1,20 @@
-import AServiceSlider from "./AServiceSlider";
-
-export default {
-    title: 'ServiceSlider',
-    component: AServiceSlider,
-    template: "<a-service-slider></a-service-slider>"
-}
-
-const Template = (args, { argTypes }) => ({
-    components: { AServiceSlider },
-    props: Object.keys(argTypes),
-    template: "<a-service-slider v-bind='$props'></a-service-slider>",
-});
-
-export const serviceSlider = Template.bind({})
-
-serviceSlider.args = {
-    openService: false,
-    isAuth: false
-}
+import AServiceSlider from "./AServiceSlider";
+
+export default {
+    title: 'ServiceSlider',
+    component: AServiceSlider,
+    template: "<a-service-slider></a-service-slider>"
+}
+
+const Template = (args, { argTypes }) => ({
+    components: { AServiceSlider },
+    props: Object.keys(argTypes),
+    template: "<a-service-slider v-bind='$props'></a-service-slider>",
+});
+
+export const serviceSlider = Template.bind({})
+
+serviceSlider.args = {
+    openService: false,
+    isAuth: false
+}

package/src/components/Table/ATable.vue

@@ -1,117 +1,117 @@
-<template>
-  <table class="a-table">
-    <thead>
-      <tr>
-        <th v-for="(col, i) in cols" :key="i">{{ col.name }}</th>
-      </tr>
-    </thead>
-    <tbody>
-      <tr v-for="(row, i) in rows" :key="i">
-        <td v-for="col in cols" :key="col.key" :data-label="`${col.name}`">
-          <slot :name="'key-' + col.key" :row="row">
-            {{ row[col.key] || defaultEmpty }}
-          </slot>
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</template>
-
-<script>
-export default {
-  props: {
-    cols: {
-      type: Array,
-      default: () => [],
-    },
-    rows: {
-      type: Array,
-      default: () => [],
-    },
-    defaultEmpty: {
-      type: [String, Number],
-      default: "Нет данных",
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.a-table {
-  display: flex;
-  flex-direction: column;
-  background: #fff;
-
-  @media screen and (max-width: 850px) {
-    border: 0;
-  }
-
-  thead {
-    background: rgba(189, 199, 206, 0.3);
-
-    @media screen and (max-width: 850px) {
-      display: none;
-    }
-
-    tr {
-      display: flex;
-
-      th {
-        display: flex;
-        justify-content: center;
-        flex: 1;
-        padding: 20px 16px;
-        font-size: 12px;
-        font-weight: normal;
-        word-break: break-word;
-
-        @media screen and (max-width: 850px) {
-          justify-content: flex-start;
-        }
-      }
-    }
-  }
-
-  tbody {
-    tr {
-      display: flex;
-      border-bottom: 1px solid #ccc;
-
-      @media screen and (max-width: 850px) {
-        flex-direction: column;
-        margin: 10px;
-        padding: 10px 0;
-        border: 0;
-        background: rgba(189, 199, 206, 0.3);
-      }
-
-      td {
-        display: flex;
-        justify-content: center;
-        flex: 1;
-        padding: 20px 16px;
-        word-break: break-word;
-        font-size: 12px;
-        font-weight: normal;
-        text-align: left;
-
-        @media screen and (max-width: 850px) {
-          flex-direction: column;
-          row-gap: 4px;
-          justify-content: flex-start;
-          padding: 8px 16px;
-        }
-
-        &:before {
-          @media screen and (max-width: 850px) {
-            content: attr(data-label);
-            display: flex;
-            align-items: left;
-            font-weight: bold;
-          }
-        }
-      }
-    }
-  }
-}
-</style>
+<template>
+  <table class="a-table">
+    <thead>
+      <tr>
+        <th v-for="(col, i) in cols" :key="i">{{ col.name }}</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr v-for="(row, i) in rows" :key="i">
+        <td v-for="col in cols" :key="col.key" :data-label="`${col.name}`">
+          <slot :name="'key-' + col.key" :row="row">
+            {{ row[col.key] || defaultEmpty }}
+          </slot>
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script>
+export default {
+  props: {
+    cols: {
+      type: Array,
+      default: () => [],
+    },
+    rows: {
+      type: Array,
+      default: () => [],
+    },
+    defaultEmpty: {
+      type: [String, Number],
+      default: "Нет данных",
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.a-table {
+  display: flex;
+  flex-direction: column;
+  background: #fff;
+
+  @media screen and (max-width: 850px) {
+    border: 0;
+  }
+
+  thead {
+    background: rgba(189, 199, 206, 0.3);
+
+    @media screen and (max-width: 850px) {
+      display: none;
+    }
+
+    tr {
+      display: flex;
+
+      th {
+        display: flex;
+        justify-content: center;
+        flex: 1;
+        padding: 20px 16px;
+        font-size: 12px;
+        font-weight: normal;
+        word-break: break-word;
+
+        @media screen and (max-width: 850px) {
+          justify-content: flex-start;
+        }
+      }
+    }
+  }
+
+  tbody {
+    tr {
+      display: flex;
+      border-bottom: 1px solid #ccc;
+
+      @media screen and (max-width: 850px) {
+        flex-direction: column;
+        margin: 10px;
+        padding: 10px 0;
+        border: 0;
+        background: rgba(189, 199, 206, 0.3);
+      }
+
+      td {
+        display: flex;
+        justify-content: center;
+        flex: 1;
+        padding: 20px 16px;
+        word-break: break-word;
+        font-size: 12px;
+        font-weight: normal;
+        text-align: left;
+
+        @media screen and (max-width: 850px) {
+          flex-direction: column;
+          row-gap: 4px;
+          justify-content: flex-start;
+          padding: 8px 16px;
+        }
+
+        &:before {
+          @media screen and (max-width: 850px) {
+            content: attr(data-label);
+            display: flex;
+            align-items: left;
+            font-weight: bold;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

package/src/components/Table/Table.stories.js

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

package/src/components/TextArea/TextArea.stories.js

@@ -1,17 +1,17 @@
-import ATextArea from "./TextArea.vue";
-
-export default {
-    title: 'TextArea',
-    component: ATextArea,
-    data: () => ({ value: "" }),
-    template: "<a-text-area @input='(val) => {this.value = val}' label='Example'></a-text-area>>"
-}
-
-const Template = (args, { argTypes }) => ({
-    components: { ATextArea },
-    props: Object.keys(argTypes),
-    template: '<a-text-area v-bind="$props"></a-text-area>'
-})
-
-export const Clearable = Template.bind({});
-Clearable.args = {label: 'Clearable', clearable: true}
+import ATextArea from "./TextArea.vue";
+
+export default {
+    title: 'TextArea',
+    component: ATextArea,
+    data: () => ({ value: "" }),
+    template: "<a-text-area @input='(val) => {this.value = val}' label='Example'></a-text-area>>"
+}
+
+const Template = (args, { argTypes }) => ({
+    components: { ATextArea },
+    props: Object.keys(argTypes),
+    template: '<a-text-area v-bind="$props"></a-text-area>'
+})
+
+export const Clearable = Template.bind({});
+Clearable.args = {label: 'Clearable', clearable: true}

package/src/components/TextArea/TextArea.vue

@@ -1,116 +1,116 @@
-<template>
-  <div class="adt-text-block__wrapper">
-    <div
-      class="adt-text-block__textarea"
-      :class="{ 'adt-text-block__textarea--error': !!errorText }"
-    >
-      <textarea
-        :id="id"
-        ref="textarea"
-        :type="type"
-        :value="value"
-        :placeholder="placeholder"
-        required
-        @input="$emit('input', $event.target.value)"
-        @keyup.enter="enterPressed"
-      />
-      <label
-         :for="id"
-        class="adt-text-block__label"
-        :class="{ 'adt-text-block--ellipsis': isEllipsis }"
-      >
-        {{ label }}
-        <span v-if="required" class="adt-text-block__required">*</span>
-      </label>
-      <div
-        class="adt-text-block__icon desktop"
-        v-if="clearable && value && value.length > 0"
-        @click="$emit('input', '')"
-      >
-        <svg
-          width="12"
-          height="12"
-          fill="none"
-          xmlns="http://www.w3.org/2000/svg"
-          viewBox="0 0 16 16"
-          id="clearIcon"
-        >
-          <path
-            d="M2 2l12 12m0-12L2 14"
-            stroke="#2C3E50"
-            stroke-linecap="round"
-            stroke-linejoin="round"
-          ></path>
-        </svg>
-      </div>
-    </div>
-    <text-error v-if="!!errorText" :errorText="errorText" />
-  </div>
-</template>
-<script>
-import "@/assets/style.scss";
-import TextError from "@/components/TextError/TextError";
-
-export default {
-  name: "TextArea",
-  props: {
-    id: {
-      type: String,
-      default: ""
-    },
-    errorText: {
-      type: String,
-      default: "",
-    },
-    label: {
-      type: String,
-      required: true,
-    },
-    type: {
-      type: String,
-      default: "text",
-    },
-    value: {
-      type: String,
-      default: "",
-    },
-    placeholder: {
-      type: String,
-      default: "",
-    },
-    clearable: {
-      type: Boolean,
-      default: false,
-    },
-    required: {
-      type: Boolean,
-      default: false,
-    },
-    isEllipsis: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  components: {
-    TextError
-  },
-  data() {
-    return {
-      showPlaceholder: false,
-    };
-  },
-  computed: {
-    inputPlaceholder() {
-      return this.showPlaceholder ? this.placeholder : "";
-    },
-  },
-  methods: {
-    enterPressed() {
-      this.$emit("enterPressed", this.value);
-    },
-    inputHandler(e) {
-      this.$emit("input", e.target.value);
-    },
-  },
-};
-</script>
+<template>
+  <div class="adt-text-block__wrapper">
+    <div
+      class="adt-text-block__textarea"
+      :class="{ 'adt-text-block__textarea--error': !!errorText }"
+    >
+      <textarea
+        :id="id"
+        ref="textarea"
+        :type="type"
+        :value="value"
+        :placeholder="placeholder"
+        required
+        @input="$emit('input', $event.target.value)"
+        @keyup.enter="enterPressed"
+      />
+      <label
+         :for="id"
+        class="adt-text-block__label"
+        :class="{ 'adt-text-block--ellipsis': isEllipsis }"
+      >
+        {{ label }}
+        <span v-if="required" class="adt-text-block__required">*</span>
+      </label>
+      <div
+        class="adt-text-block__icon desktop"
+        v-if="clearable && value && value.length > 0"
+        @click="$emit('input', '')"
+      >
+        <svg
+          width="12"
+          height="12"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          viewBox="0 0 16 16"
+          id="clearIcon"
+        >
+          <path
+            d="M2 2l12 12m0-12L2 14"
+            stroke="#2C3E50"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          ></path>
+        </svg>
+      </div>
+    </div>
+    <text-error v-if="!!errorText" :errorText="errorText" />
+  </div>
+</template>
+<script>
+import "@/assets/style.scss";
+import TextError from "@/components/TextError/TextError";
+
+export default {
+  name: "TextArea",
+  props: {
+    id: {
+      type: String,
+      default: ""
+    },
+    errorText: {
+      type: String,
+      default: "",
+    },
+    label: {
+      type: String,
+      required: true,
+    },
+    type: {
+      type: String,
+      default: "text",
+    },
+    value: {
+      type: String,
+      default: "",
+    },
+    placeholder: {
+      type: String,
+      default: "",
+    },
+    clearable: {
+      type: Boolean,
+      default: false,
+    },
+    required: {
+      type: Boolean,
+      default: false,
+    },
+    isEllipsis: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  components: {
+    TextError
+  },
+  data() {
+    return {
+      showPlaceholder: false,
+    };
+  },
+  computed: {
+    inputPlaceholder() {
+      return this.showPlaceholder ? this.placeholder : "";
+    },
+  },
+  methods: {
+    enterPressed() {
+      this.$emit("enterPressed", this.value);
+    },
+    inputHandler(e) {
+      this.$emit("input", e.target.value);
+    },
+  },
+};
+</script>

package/src/components/TextError/TextError.stories.js

@@ -1,15 +1,15 @@
-import TextError from "./TextError";
-
-export default {
-    title: 'TextError',
-    component: TextError,
-}
-
-const Template = (args, { argTypes }) => ({
-    components: { TextError },
-    props: Object.keys(argTypes),
-    template: '<text-error v-bind="$props"></text-error>'
-})
-
-export const Default = Template.bind({});
-Default.args = {errorText: 'Введите больше чем 20 символов'}
+import TextError from "./TextError";
+
+export default {
+    title: 'TextError',
+    component: TextError,
+}
+
+const Template = (args, { argTypes }) => ({
+    components: { TextError },
+    props: Object.keys(argTypes),
+    template: '<text-error v-bind="$props"></text-error>'
+})
+
+export const Default = Template.bind({});
+Default.args = {errorText: 'Введите больше чем 20 символов'}