adata-ui 0.3.73 → 0.3.74

package/src/components/Checkbox/ACheckbox.vue

@@ -1,114 +1,114 @@
-<template>
-  <label :for="fakeHash" class="a-checkbox">
-    <input
-      type="checkbox"
-      :id="fakeHash"
-      :value="inputValue"
-      v-model="model"
-      class="a-checkbox__input"
-      :disabled="disabled"
-    />
-    <span class="checkmark" />
-    <span class="a-checkbox__label">{{ label }}</span>
-  </label>
-</template>
-
-<script>
-export default {
-  props: {
-    id: {
-      type: [String, Number],
-      default: null,
-    },
-    inputValue: {
-      type: [String, Boolean],
-      default: null,
-    },
-    value: {
-      type: [Array, Number, String, Boolean],
-      default: null,
-    },
-    label: {
-      type: String,
-      default: "",
-    },
-    disabled: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  computed: {
-    fakeHash: function () {
-      return `${this.id}_${this.label}_checkbox`;
-    },
-    model: {
-      get() {
-        return this.value;
-      },
-      set(value) {
-        this.$emit("input", value);
-      },
-    },
-  },
-};
-</script>
-
-<style lang="scss" scoped>
-.a-checkbox {
-  padding: 8px 0;
-  display: flex;
-  align-items: center;
-  position: relative;
-  cursor: pointer;
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-
-  &__input {
-    opacity: 0;
-    cursor: pointer;
-    height: 0;
-    width: 0;
-    &:checked ~ .checkmark {
-      position: relative;
-      background: #007aff;
-      border: 1px solid transparent;
-    }
-    &:checked ~ .checkmark:after {
-      display: block;
-      background-image: url("data:image/svg+xml,%3Csvg%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2012%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M1%206.556L5.308%2011%2015%201%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.5%22%20stroke-miterlimit%3D%2210%22%20stroke-linecap%3D%22round%22%0A%20%20%20%20%20%20%20%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E");
-      background-position: center center;
-      background-repeat: no-repeat;
-    }
-  }
-
-  &__label {
-    font-size: 14px;
-    line-height: 22px;
-    color: var(--newGray);
-  }
-}
-
-.checkmark {
-  border: 1px solid #9da3ac;
-  border-radius: 2px;
-  width: 16px;
-  height: 16px;
-  cursor: pointer;
-  margin-right: 8px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-shrink: 0;
-  background: #fff;
-  &:after {
-    content: "";
-    position: absolute;
-    left: -1px;
-    top: -1px;
-    width: 16px;
-    height: 16px;
-  }
-}
-</style>
+<template>
+  <label :for="fakeHash" class="a-checkbox">
+    <input
+      type="checkbox"
+      :id="fakeHash"
+      :value="inputValue"
+      v-model="model"
+      class="a-checkbox__input"
+      :disabled="disabled"
+    />
+    <span class="checkmark" />
+    <span class="a-checkbox__label">{{ label }}</span>
+  </label>
+</template>
+
+<script>
+export default {
+  props: {
+    id: {
+      type: [String, Number],
+      default: null,
+    },
+    inputValue: {
+      type: [String, Boolean],
+      default: null,
+    },
+    value: {
+      type: [Array, Number, String, Boolean],
+      default: null,
+    },
+    label: {
+      type: String,
+      default: "",
+    },
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  computed: {
+    fakeHash: function () {
+      return `${this.id}_${this.label}_checkbox`;
+    },
+    model: {
+      get() {
+        return this.value;
+      },
+      set(value) {
+        this.$emit("input", value);
+      },
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.a-checkbox {
+  padding: 8px 0;
+  display: flex;
+  align-items: center;
+  position: relative;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+
+  &__input {
+    opacity: 0;
+    cursor: pointer;
+    height: 0;
+    width: 0;
+    &:checked ~ .checkmark {
+      position: relative;
+      background: #007aff;
+      border: 1px solid transparent;
+    }
+    &:checked ~ .checkmark:after {
+      display: block;
+      background-image: url("data:image/svg+xml,%3Csvg%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2016%2012%22%3E%0A%20%20%20%20%3Cpath%20d%3D%22M1%206.556L5.308%2011%2015%201%22%20stroke%3D%22%23fff%22%20stroke-width%3D%221.5%22%20stroke-miterlimit%3D%2210%22%20stroke-linecap%3D%22round%22%0A%20%20%20%20%20%20%20%20stroke-linejoin%3D%22round%22%3E%3C%2Fpath%3E%0A%3C%2Fsvg%3E");
+      background-position: center center;
+      background-repeat: no-repeat;
+    }
+  }
+
+  &__label {
+    font-size: 14px;
+    line-height: 22px;
+    color: var(--newGray);
+  }
+}
+
+.checkmark {
+  border: 1px solid #9da3ac;
+  border-radius: 2px;
+  width: 16px;
+  height: 16px;
+  cursor: pointer;
+  margin-right: 8px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-shrink: 0;
+  background: #fff;
+  &:after {
+    content: "";
+    position: absolute;
+    left: -1px;
+    top: -1px;
+    width: 16px;
+    height: 16px;
+  }
+}
+</style>

package/src/components/Checkbox/Checkbox.stories.js

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

package/src/components/CheckboxMenu/CheckboxMenu.stories.js

@@ -1,24 +1,24 @@
-import ACheckboxMenu from "./CheckboxMenu.vue";
-
-export default {
-    title: 'CheckboxMenu',
-    component: ACheckboxMenu,
-    data: () => ({ value: "" }),
-    template: "<a-checkbox-menu @input='(val) => {this.value = val}' label='Example'></a-checkbox-menu>>"
-}
-
-
-const Template = (args, { argTypes }) => ({
-    components: { ACheckboxMenu },
-    props: Object.keys(argTypes),
-    template: '<a-checkbox-menu  v-bind="$props" @enterPressed="enterPressed"></a-checkbox-menu>'
-})
-
-export const Simple = Template.bind({});
-Simple.args = {
-    options: JSON.parse('[{"code":"13.92.21.300.000.00.0796.000000000002","name":"Мешок"},{"code":"172112.300.000001","name":"Мешок"},{"code":"139221.900.000000","name":"Мешок"},{"code":"139224.350.000000","name":"Мешок"},{"code":"000000000000952557","name":"МЕШОК ТРЕХСЛОЙНЫЙ 50кг ПП"},{"code":"000000000000952559","name":"МЕШОК 350Х950 ДЛЯ ПРОБ 10кг ПП"},{"code":"13.92.21.300.000.00.0736.000000000011","name":"Мешок"},{"code":"22.22.12.900.001.00.0796.000000000027","name":"Мешок"},{"code":"13.92.21.300.000.00.0736.000000000008","name":"Мешок"},{"code":"139221.900.000002","name":"Мешок"},{"code":"139221.300.000003","name":"Мешок"},{"code":"151213.000.000007","name":"Ремешок"},{"code":"139223.000.000047","name":"Мешок"},{"code":"141923.950.000000","name":"Ремешок"},{"code":"13.92.21.300.000.00.0736.000000000004","name":"Мешок"},{"code":"139221.300.000004","name":"Мешок"},{"code":"13.92.21.300.000.00.0796.000000000008","name":"Мешок"},{"code":"13.92.21.900.000.00.0796.000000000004","name":"Мешок"},{"code":"22.22.12.900.001.00.0796.000000000029","name":"Мешок"},{"code":"13.92.21.00.00.00.30.13.2","name":"Мешок для мусора"}]'),
-    optionFields: ["name"],
-    exceptions: [
-        JSON.parse('{"code":"000000000000952557","name":"МЕШОК ТРЕХСЛОЙНЫЙ 50кг ПП"}')
-    ]
+import ACheckboxMenu from "./CheckboxMenu.vue";
+
+export default {
+    title: 'CheckboxMenu',
+    component: ACheckboxMenu,
+    data: () => ({ value: "" }),
+    template: "<a-checkbox-menu @input='(val) => {this.value = val}' label='Example'></a-checkbox-menu>>"
+}
+
+
+const Template = (args, { argTypes }) => ({
+    components: { ACheckboxMenu },
+    props: Object.keys(argTypes),
+    template: '<a-checkbox-menu  v-bind="$props" @enterPressed="enterPressed"></a-checkbox-menu>'
+})
+
+export const Simple = Template.bind({});
+Simple.args = {
+    options: JSON.parse('[{"code":"13.92.21.300.000.00.0796.000000000002","name":"Мешок"},{"code":"172112.300.000001","name":"Мешок"},{"code":"139221.900.000000","name":"Мешок"},{"code":"139224.350.000000","name":"Мешок"},{"code":"000000000000952557","name":"МЕШОК ТРЕХСЛОЙНЫЙ 50кг ПП"},{"code":"000000000000952559","name":"МЕШОК 350Х950 ДЛЯ ПРОБ 10кг ПП"},{"code":"13.92.21.300.000.00.0736.000000000011","name":"Мешок"},{"code":"22.22.12.900.001.00.0796.000000000027","name":"Мешок"},{"code":"13.92.21.300.000.00.0736.000000000008","name":"Мешок"},{"code":"139221.900.000002","name":"Мешок"},{"code":"139221.300.000003","name":"Мешок"},{"code":"151213.000.000007","name":"Ремешок"},{"code":"139223.000.000047","name":"Мешок"},{"code":"141923.950.000000","name":"Ремешок"},{"code":"13.92.21.300.000.00.0736.000000000004","name":"Мешок"},{"code":"139221.300.000004","name":"Мешок"},{"code":"13.92.21.300.000.00.0796.000000000008","name":"Мешок"},{"code":"13.92.21.900.000.00.0796.000000000004","name":"Мешок"},{"code":"22.22.12.900.001.00.0796.000000000029","name":"Мешок"},{"code":"13.92.21.00.00.00.30.13.2","name":"Мешок для мусора"}]'),
+    optionFields: ["name"],
+    exceptions: [
+        JSON.parse('{"code":"000000000000952557","name":"МЕШОК ТРЕХСЛОЙНЫЙ 50кг ПП"}')
+    ]
 }

package/src/components/CheckboxMenu/CheckboxMenu.vue

@@ -1,108 +1,108 @@
-<template>
-  <div class="search-options__item checkboxes__selects">
-      <div class="checkboxes__selects__item" v-for="(option, index) in options" :key="index + 'a'">
-        <input
-            :value="option.code"
-            :checked="isChecked(option)"
-            @change="removeChecked(option)"
-            @input="inputHandler(option)"
-            type="checkbox"
-            :id="'optionsNames' + index"
-            name="optionsNames"
-            :disabled="exceptions.length === 100"
-        >
-        <label :for="'optionsNames' + index">{{ optionToText(option) }}</label>
-      </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: "CheckboxesMenu",
-  props: {
-    exceptions: {
-      type: Array,
-      default: () => []
-    },
-    options: {
-      type: Array,
-      default: () => []
-    },
-    checkName: {
-      type: String,
-      default: "code"
-    },
-    optionTemplate: {
-      type: String,
-      default: "name~ - ~code"
-    }
-  },
-  computed: {
-    optionsTemplateKeys() {
-      return this.optionTemplate.split("~")
-    }
-  },
-  methods: {
-    isChecked(option) {
-      return this.exceptions && this.exceptions.findIndex(el => {
-        return el[this.checkName] === option[this.checkName]
-      }) > -1
-    },
-    removeChecked(val) {
-      if (!event.target.checked) {
-        let idx = this.exceptions.findIndex(el => {
-          return el[this.checkName] === val[this.checkName];
-        })
-        if (idx !== -1) {
-          this.$emit("removeException", {value: val, idx});
-        }
-      }
-    },
-    optionToText(option) {
-      return this.optionsTemplateKeys.map(key => option[key] || key).join("")
-    },
-    inputHandler(option) {
-      if(event.target.checked) this.$emit('autocompleteSelect', option);
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.checkboxes__selects {
-  position: absolute;
-  background: #fff;
-  width: calc(100% - 8px);
-  padding: 8px 16px;
-  max-height: 360px;
-  overflow-y: auto;
-  left: 0;
-  z-index: 1000;
-  border-radius: 2px;
-  border: 1px solid #c4c4c480;
-  &::-webkit-scrollbar {
-    width: 4px;
-    &-thumb {
-      background: #c4c4c4;
-    }
-    &-track {
-      background: #fff;
-    }
-  }
-
-  .checkboxes__selects__item {
-    padding: 4px 0;
-    line-height: 16px;
-    font-size: 14px;
-    font-weight: 400;
-    color: #333;
-    cursor: pointer;
-    display: flex;
-    align-items: center;
-
-    input {
-      margin-right: 4px;
-    }
-  }
-}
-</style>
+<template>
+  <div class="search-options__item checkboxes__selects">
+      <div class="checkboxes__selects__item" v-for="(option, index) in options" :key="index + 'a'">
+        <input
+            :value="option.code"
+            :checked="isChecked(option)"
+            @change="removeChecked(option)"
+            @input="inputHandler(option)"
+            type="checkbox"
+            :id="'optionsNames' + index"
+            name="optionsNames"
+            :disabled="exceptions.length === 100"
+        >
+        <label :for="'optionsNames' + index">{{ optionToText(option) }}</label>
+      </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "CheckboxesMenu",
+  props: {
+    exceptions: {
+      type: Array,
+      default: () => []
+    },
+    options: {
+      type: Array,
+      default: () => []
+    },
+    checkName: {
+      type: String,
+      default: "code"
+    },
+    optionTemplate: {
+      type: String,
+      default: "name~ - ~code"
+    }
+  },
+  computed: {
+    optionsTemplateKeys() {
+      return this.optionTemplate.split("~")
+    }
+  },
+  methods: {
+    isChecked(option) {
+      return this.exceptions && this.exceptions.findIndex(el => {
+        return el[this.checkName] === option[this.checkName]
+      }) > -1
+    },
+    removeChecked(val) {
+      if (!event.target.checked) {
+        let idx = this.exceptions.findIndex(el => {
+          return el[this.checkName] === val[this.checkName];
+        })
+        if (idx !== -1) {
+          this.$emit("removeException", {value: val, idx});
+        }
+      }
+    },
+    optionToText(option) {
+      return this.optionsTemplateKeys.map(key => option[key] || key).join("")
+    },
+    inputHandler(option) {
+      if(event.target.checked) this.$emit('autocompleteSelect', option);
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.checkboxes__selects {
+  position: absolute;
+  background: #fff;
+  width: calc(100% - 8px);
+  padding: 8px 16px;
+  max-height: 360px;
+  overflow-y: auto;
+  left: 0;
+  z-index: 1000;
+  border-radius: 2px;
+  border: 1px solid #c4c4c480;
+  &::-webkit-scrollbar {
+    width: 4px;
+    &-thumb {
+      background: #c4c4c4;
+    }
+    &-track {
+      background: #fff;
+    }
+  }
+
+  .checkboxes__selects__item {
+    padding: 4px 0;
+    line-height: 16px;
+    font-size: 14px;
+    font-weight: 400;
+    color: #333;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+
+    input {
+      margin-right: 4px;
+    }
+  }
+}
+</style>