aloha-vue 2.74.0 → 2.75.0

package/src/ARate/ARateIcon/ARateIcon.js

@@ -1,104 +1,109 @@
-import {
-  h,
-} from "vue";
-
-import ADecimalIcon from "./ADecimalIcon/ADecimalIcon";
-import AIcon from "../../AIcon/AIcon";
-
-import Star from "aloha-svg/dist/js/bootstrap/Star";
-import StarFill from "aloha-svg/dist/js/bootstrap/StarFill";
-
-export default {
-  name: "ARateIcon",
-  components: {
-    AIcon,
-    ADecimalIcon,
-  },
-  props: {
-    value: {
-      type: Number,
-      default: 50,
-    },
-    color: {
-      type: String,
-      default: "yellow",
-    },
-    icon: {
-      type: String,
-      default: Star,
-    },
-    iconFill: {
-      type: String,
-      default: StarFill,
-    },
-    size: {
-      type: String,
-      default: "medium",
-      validator: value => ["small", "medium", "big"].includes(value),
-    },
-    isHovered: {
-      type: Boolean,
-      default: false,
-    },
-  },
-  emits: [
-    "mouseenter",
-    "mouseleave",
-    "click",
-    "dblclick",
-    "mousemove",
-  ],
-  setup(props, { emit }) {
-    return {
-      handleMouseEnter(event) {
-        emit("mouseenter", event);
-      },
-      handleMouseLeave(event) {
-        emit("mouseleave", event);
-      },
-      handleClick(event) {
-        emit("click", event);
-      },
-      handleDblClick(event) {
-        emit("dblclick", event);
-      },
-      handleMouseMove(event) {
-        emit("mousemove", event);
-      },
-    };
-  },
-  render() {
-    return h(
-      "span",
-      {
-        class: `el-rate__item a_rate_icon_${ this.size }`,
-        style: {
-          position: "relative",
-          display: "inline-flex",
-          alignItems: "center",
-          justifyContent: "center",
-        },
-        onClick: this.handleClick,
-        onDblclick: this.handleDblClick,
-        onMouseenter: this.handleMouseEnter,
-        onMouseleave: this.handleMouseLeave,
-        onMousemove: this.handleMouseMove,
-      },
-      [
-        h("div", { class: "a_rate_icon_align" }, [
-          h(AIcon, {
-            icon: this.icon,
-            class: `a_decimal_rate_icon a_rate_decimal`,
-            color: this.color,
-          }),
-          h(ADecimalIcon, {
-            icon: this.iconFill,
-            value: this.value,
-            color: this.color,
-            size: this.size,
-          }),
-        ]),
-      ],
-    );
-  },
-};
+import {
+  h,
+} from "vue";
+
+import ADecimalIcon from "./ADecimalIcon/ADecimalIcon";
+import AIcon from "../../AIcon/AIcon";
+
+const Star = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star" viewBox="0 0 16 16">
+  <path d="M2.866 14.85c-.078.444.36.791.746.593l4.39-2.256 4.389 2.256c.386.198.824-.149.746-.592l-.83-4.73 3.522-3.356c.33-.314.16-.888-.282-.95l-4.898-.696L8.465.792a.513.513 0 0 0-.927 0L5.354 5.12l-4.898.696c-.441.062-.612.636-.283.95l3.523 3.356-.83 4.73zm4.905-2.767-3.686 1.894.694-3.957a.56.56 0 0 0-.163-.505L1.71 6.745l4.052-.576a.53.53 0 0 0 .393-.288L8 2.223l1.847 3.658a.53.53 0 0 0 .393.288l4.052.575-2.906 2.77a.56.56 0 0 0-.163.506l.694 3.957-3.686-1.894a.5.5 0 0 0-.461 0z"/>
+</svg>`;
+const StarFill = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-star-fill" viewBox="0 0 16 16">
+  <path d="M3.612 15.443c-.386.198-.824-.149-.746-.592l.83-4.73L.173 6.765c-.329-.314-.158-.888.283-.95l4.898-.696L7.538.792c.197-.39.73-.39.927 0l2.184 4.327 4.898.696c.441.062.612.636.282.95l-3.522 3.356.83 4.73c.078.443-.36.79-.746.592L8 13.187l-4.389 2.256z"/>
+</svg>`;
+
+
+export default {
+  name: "ARateIcon",
+  components: {
+    AIcon,
+    ADecimalIcon,
+  },
+  props: {
+    value: {
+      type: Number,
+      default: 50,
+    },
+    color: {
+      type: String,
+      default: "yellow",
+    },
+    icon: {
+      type: String,
+      default: Star,
+    },
+    iconFill: {
+      type: String,
+      default: StarFill,
+    },
+    size: {
+      type: String,
+      default: "medium",
+      validator: value => ["small", "medium", "big"].includes(value),
+    },
+    isHovered: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: [
+    "mouseenter",
+    "mouseleave",
+    "click",
+    "dblclick",
+    "mousemove",
+  ],
+  setup(props, { emit }) {
+    return {
+      handleMouseEnter(event) {
+        emit("mouseenter", event);
+      },
+      handleMouseLeave(event) {
+        emit("mouseleave", event);
+      },
+      handleClick(event) {
+        emit("click", event);
+      },
+      handleDblClick(event) {
+        emit("dblclick", event);
+      },
+      handleMouseMove(event) {
+        emit("mousemove", event);
+      },
+    };
+  },
+  render() {
+    return h(
+      "span",
+      {
+        class: `el-rate__item a_rate_icon_${ this.size }`,
+        style: {
+          position: "relative",
+          display: "inline-flex",
+          alignItems: "center",
+          justifyContent: "center",
+        },
+        onClick: this.handleClick,
+        onDblclick: this.handleDblClick,
+        onMouseenter: this.handleMouseEnter,
+        onMouseleave: this.handleMouseLeave,
+        onMousemove: this.handleMouseMove,
+      },
+      [
+        h("div", { class: "a_rate_icon_align" }, [
+          h(AIcon, {
+            icon: this.icon,
+            class: `a_decimal_rate_icon a_rate_decimal`,
+            color: this.color,
+          }),
+          h(ADecimalIcon, {
+            icon: this.iconFill,
+            value: this.value,
+            color: this.color,
+            size: this.size,
+          }),
+        ]),
+      ],
+    );
+  },
+};

package/src/AResizer/AResizer.js

@@ -1,162 +1,167 @@
-import {
-  h,
-} from "vue";
-
-import AIcon from "../AIcon/AIcon";
-
-import ThreeDots from "aloha-svg/dist/js/bootstrap/ThreeDots";
-import ThreeDotsVertical from "aloha-svg/dist/js/bootstrap/ThreeDotsVertical";
-
-export default {
-  name: "AResizer",
-  props: {
-    direction: {
-      type: String,
-      required: true,
-      validator: value => ["x", "y"].indexOf(value) !== -1,
-    },
-    disabled: {
-      type: Boolean,
-      required: false,
-    },
-  },
-  emits: [
-    "mousedown",
-    "mousemove",
-    "mouseoutDocument",
-    "mouseup",
-  ],
-  data() {
-    return {
-      clientHeight: 0,
-      clientWidth: 0,
-    };
-  },
-  computed: {
-    isDirectionX() {
-      return this.direction === "x";
-    },
-
-    isDirectionY() {
-      return this.direction === "y";
-    },
-
-    directionClass() {
-      return `a_resizer_${ this.direction }`;
-    },
-
-    directionIcon() {
-      if (this.direction === "x") {
-        return ThreeDotsVertical;
-      }
-      if (this.direction === "y") {
-        return ThreeDots;
-      }
-    },
-
-    cursor() {
-      if (this.direction === "x") {
-        return "w-resize";
-      }
-      if (this.direction === "y") {
-        return "s-resize";
-      }
-    },
-
-    bodyClass() {
-      return `a_resizer_${ this.direction }_active__body`;
-    },
-
-    attributesResizer() {
-      const ATTRIBUTES = {
-        class: ["a_resizer", this.directionClass, {
-          a_resizer_disabled: this.disabled,
-        }],
-        ariaHidden: true,
-      };
-      if (!this.disabled) {
-        ATTRIBUTES.onMousedown = this.mousedown;
-      }
-
-      return ATTRIBUTES;
-    },
-  },
-  unmounted() {
-    this.removeMouseEventListeners();
-    this.removeClassFromBody();
-  },
-  methods: {
-    mousedown($event) {
-      this.addMouseEventListeners();
-      this.clientHeight = document.documentElement.clientHeight;
-      this.clientWidth = document.documentElement.clientWidth;
-      this.$emit("mousedown", {
-        $event,
-        clientHeight: this.clientHeight,
-        clientWidth: this.clientWidth,
-      });
-      this.addClassToBody();
-    },
-
-    mousemove($event) {
-      this.$emit("mousemove", {
-        $event,
-        clientX: $event.clientX,
-        clientY: $event.clientY,
-        clientHeight: this.clientHeight,
-        clientWidth: this.clientWidth,
-      });
-    },
-
-    mouseup($event) {
-      this.removeMouseEventListeners();
-      this.$emit("mouseup", {
-        $event,
-        clientHeight: this.clientHeight,
-        clientWidth: this.clientWidth,
-      });
-      this.removeClassFromBody();
-    },
-
-    mouseoutDocument($event) {
-      this.removeMouseEventListeners();
-      this.$emit("mouseoutDocument", {
-        $event,
-        clientHeight: this.clientHeight,
-        clientWidth: this.clientWidth,
-      });
-      this.removeClassFromBody();
-    },
-
-    addMouseEventListeners() {
-      document.addEventListener("mousemove", this.mousemove);
-      document.addEventListener("mouseup", this.mouseup);
-      document.addEventListener("mouseleave", this.mouseoutDocument);
-    },
-
-    removeMouseEventListeners() {
-      document.removeEventListener("mousemove", this.mousemove);
-      document.removeEventListener("mouseup", this.mouseup);
-      document.removeEventListener("mouseleave", this.mouseoutDocument);
-    },
-
-    addClassToBody() {
-      document.body.classList.add(this.bodyClass);
-    },
-
-    removeClassFromBody() {
-      document.body.classList.remove(this.bodyClass);
-    },
-  },
-  render() {
-    return h("div", this.attributesResizer, [
-      h("div", {
-        class: "a_resizer__line",
-      }),
-      h(AIcon, {
-        class: "a_resizer__icon",
-        icon: this.directionIcon,
-      }),
-    ]);
-  },
-};
+import {
+  h,
+} from "vue";
+
+import AIcon from "../AIcon/AIcon";
+
+const ThreeDots = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-three-dots" viewBox="0 0 16 16">
+  <path d="M3 9.5a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3m5 0a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3"/>
+</svg>`;
+const ThreeDotsVertical = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-three-dots-vertical" viewBox="0 0 16 16">
+  <path d="M9.5 13a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0m0-5a1.5 1.5 0 1 1-3 0 1.5 1.5 0 0 1 3 0"/>
+</svg>`;
+
+
+export default {
+  name: "AResizer",
+  props: {
+    direction: {
+      type: String,
+      required: true,
+      validator: value => ["x", "y"].indexOf(value) !== -1,
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+    },
+  },
+  emits: [
+    "mousedown",
+    "mousemove",
+    "mouseoutDocument",
+    "mouseup",
+  ],
+  data() {
+    return {
+      clientHeight: 0,
+      clientWidth: 0,
+    };
+  },
+  computed: {
+    isDirectionX() {
+      return this.direction === "x";
+    },
+
+    isDirectionY() {
+      return this.direction === "y";
+    },
+
+    directionClass() {
+      return `a_resizer_${ this.direction }`;
+    },
+
+    directionIcon() {
+      if (this.direction === "x") {
+        return ThreeDotsVertical;
+      }
+      if (this.direction === "y") {
+        return ThreeDots;
+      }
+    },
+
+    cursor() {
+      if (this.direction === "x") {
+        return "w-resize";
+      }
+      if (this.direction === "y") {
+        return "s-resize";
+      }
+    },
+
+    bodyClass() {
+      return `a_resizer_${ this.direction }_active__body`;
+    },
+
+    attributesResizer() {
+      const ATTRIBUTES = {
+        class: ["a_resizer", this.directionClass, {
+          a_resizer_disabled: this.disabled,
+        }],
+        ariaHidden: true,
+      };
+      if (!this.disabled) {
+        ATTRIBUTES.onMousedown = this.mousedown;
+      }
+
+      return ATTRIBUTES;
+    },
+  },
+  unmounted() {
+    this.removeMouseEventListeners();
+    this.removeClassFromBody();
+  },
+  methods: {
+    mousedown($event) {
+      this.addMouseEventListeners();
+      this.clientHeight = document.documentElement.clientHeight;
+      this.clientWidth = document.documentElement.clientWidth;
+      this.$emit("mousedown", {
+        $event,
+        clientHeight: this.clientHeight,
+        clientWidth: this.clientWidth,
+      });
+      this.addClassToBody();
+    },
+
+    mousemove($event) {
+      this.$emit("mousemove", {
+        $event,
+        clientX: $event.clientX,
+        clientY: $event.clientY,
+        clientHeight: this.clientHeight,
+        clientWidth: this.clientWidth,
+      });
+    },
+
+    mouseup($event) {
+      this.removeMouseEventListeners();
+      this.$emit("mouseup", {
+        $event,
+        clientHeight: this.clientHeight,
+        clientWidth: this.clientWidth,
+      });
+      this.removeClassFromBody();
+    },
+
+    mouseoutDocument($event) {
+      this.removeMouseEventListeners();
+      this.$emit("mouseoutDocument", {
+        $event,
+        clientHeight: this.clientHeight,
+        clientWidth: this.clientWidth,
+      });
+      this.removeClassFromBody();
+    },
+
+    addMouseEventListeners() {
+      document.addEventListener("mousemove", this.mousemove);
+      document.addEventListener("mouseup", this.mouseup);
+      document.addEventListener("mouseleave", this.mouseoutDocument);
+    },
+
+    removeMouseEventListeners() {
+      document.removeEventListener("mousemove", this.mousemove);
+      document.removeEventListener("mouseup", this.mouseup);
+      document.removeEventListener("mouseleave", this.mouseoutDocument);
+    },
+
+    addClassToBody() {
+      document.body.classList.add(this.bodyClass);
+    },
+
+    removeClassFromBody() {
+      document.body.classList.remove(this.bodyClass);
+    },
+  },
+  render() {
+    return h("div", this.attributesResizer, [
+      h("div", {
+        class: "a_resizer__line",
+      }),
+      h(AIcon, {
+        class: "a_resizer__icon",
+        icon: this.directionIcon,
+      }),
+    ]);
+  },
+};