adata-ui 0.1.52 → 0.1.55

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "adata-ui",
-  "version": "0.1.52",
+  "version": "0.1.55",
   "private": false,
   "scripts": {
     "serve": "vue-cli-service serve",

package/src/App.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="app"></div>
+  <div id="app"><a-header active-tab-key="" login-url="" mode="" is-authenticated request-count="199" days-remaining="18 часов 44 минуты"/></div>
 </template>
 
 <script>

package/src/components/Checkbox/ACheckbox.vue

@@ -0,0 +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,
+      default: () => [],
+    },
+    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

@@ -0,0 +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({});