adata-ui 0.3.99 → 2.0.0

package/src/components/Checkbox/ACheckbox.vue

@@ -1,114 +0,0 @@
-<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 +0,0 @@
-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 +0,0 @@
-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 +0,0 @@
-<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>