aloha-vue 1.0.162 → 1.0.164

package/docs/package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@popperjs/core": "2.11.6",
-    "aloha-css": "1.0.65",
+    "aloha-css": "1.0.70",
     "fecha": "^4.2.3",
     "lodash-es": "^4.17.21",
     "tiny-emitter": "2.1.0",

package/docs/src/components/TheMenu/TheMenu.js

@@ -244,6 +244,15 @@ export default {
           },
           icon: "Dnd",
         },
+        {
+          id: "title",
+          label: "Title",
+          to: {
+            name: "PageTitle",
+          },
+          icon: "Dnd",
+          titleHtml: "PageTitle",
+        },
       ],
     };
   },

package/docs/src/router/index.js

@@ -134,6 +134,11 @@ const ROUTES = [
     name: "PageScale",
     component: () => import(/* webpackChunkName: "PageScale" */ "../views/PageScale/PageScale.vue"),
   },
+  {
+    path: "/title",
+    name: "PageTitle",
+    component: () => import(/* webpackChunkName: "PageTitle" */ "../views/PageTitle/PageTitle.vue"),
+  },
   {
     // If the routing configuration '*' reports an error, replace it with '/: catchAll(. *)'
     // caught Error: Catch all routes ("*") must now be defined using a param with a custom regexp

package/docs/src/views/PageTitle/PageTitle.js

@@ -0,0 +1,13 @@
+import ATooltip from "../../../../src/ATooltip/ATooltip";
+
+export default {
+  name: "PageTitle",
+  components: {
+    ATooltip,
+  },
+  setup() {
+    return {
+
+    };
+  },
+};

package/docs/src/views/PageTitle/PageTitle.pug

@@ -0,0 +1,12 @@
+div
+  h1 ATitle
+
+  a-tooltip.a_btn.a_btn_primary(
+    tag="button"
+  )
+    span Test
+
+    template(
+      v-slot:title
+    )
+      div ALoha

package/docs/src/views/PageTitle/PageTitle.vue

@@ -0,0 +1,2 @@
+<template lang="pug" src="./PageTitle.pug"></template>
+<script src="./PageTitle.js"></script>

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "aloha-vue",
   "description": "Project aloha",
-  "version": "1.0.162",
+  "version": "1.0.164",
   "author": "Ilia Brykin",
   "scripts": {
     "build-icons": "node scriptsNode/iconsSvgToJs.js bootstrap3 && node scriptsNode/iconsSvgToJs.js bootstrap-1-9-1"

package/src/ADropdown/ADropdown.js

@@ -7,6 +7,7 @@ import AIcon from "../AIcon/AIcon";
 import ATranslation from "../ATranslation/ATranslation";
 
 import AKeysCode from "../const/AKeysCode";
+import placements from "../const/placements";
 import {
   createPopper,
 } from "@popperjs/core";
@@ -17,23 +18,6 @@ import {
 } from "lodash-es";
 
 const ELEMENTS_FOR_ARROWS = `button:not([disabled]), input:not([disabled]), a`;
-const AVAILABLE_POSITIONS = [
-  "auto",
-  "auto-start",
-  "auto-end",
-  "top",
-  "top-start",
-  "top-end",
-  "right",
-  "right-start",
-  "right-end",
-  "bottom",
-  "bottom-start",
-  "bottom-end",
-  "left",
-  "left-start",
-  "left-end",
-];
 
 export default {
   name: "ADropdown",
@@ -107,7 +91,7 @@ export default {
       type: String,
       required: false,
       default: "bottom-start",
-      validator: placement => AVAILABLE_POSITIONS.indexOf(placement) !== -1,
+      validator: placement => placements.indexOf(placement) !== -1,
     },
     isCaret: {
       type: Boolean,

package/src/AMenu/AMenuPanelGroup.js

@@ -2,7 +2,7 @@ import {
   h,
 } from "vue";
 
-import AMenuPanelLink from "./AMenuPanelLink";
+import AMenuPanelLink from "./AMenuPanelLink/AMenuPanelLink";
 
 export default {
   name: "AMenuPanelGroup",

package/src/AMenu/{AMenuPanelLink.js → AMenuPanelLink/AMenuPanelLink.js}

@@ -2,21 +2,22 @@ import {
   computed,
   h,
   inject,
-  resolveComponent,
   toRef,
 } from "vue";
 
-import AIcon from "../AIcon/AIcon";
+import AIcon from "../../AIcon/AIcon";
+import ATooltip from "../../ATooltip/ATooltip";
 
-import AFiltersAPI from "../compositionAPI/AFiltersAPI";
+import AFiltersAPI from "../../compositionAPI/AFiltersAPI";
+import TitleAPI from "./compositionAPI/TitleAPI";
 
-import AKeyId from "../ui/const/AKeyId";
-import AKeyLabel from "../ui/const/AKeyLabel";
-import AKeyParent from "../ui/const/AKeyParent";
-import AKeysCode from "../const/AKeysCode";
+import AKeyId from "../../ui/const/AKeyId";
+import AKeyLabel from "../../ui/const/AKeyLabel";
+import AKeyParent from "../../ui/const/AKeyParent";
+import AKeysCode from "../../const/AKeysCode";
 import {
   setFocusToFirstLinkInPanel
-} from "./utils/utils";
+} from "../utils/utils";
 import {
   get,
 } from "lodash-es";
@@ -121,10 +122,6 @@ export default {
       return dataProParentChildren.value[id.value] && dataProParentChildren.value[id.value].length;
     });
 
-    const title = computed(() => {
-      return item.value.title || labelWithoutFilter.value;
-    });
-
     const toLocal = computed(() => {
       if (isLinkDisabled.value) {
         return "#";
@@ -154,6 +151,13 @@ export default {
       clickMenuLink();
     };
 
+    const {
+      isTitleHtml,
+      title,
+    } = TitleAPI(props, {
+      labelWithoutFilter,
+    });
+
     return {
       clickLink,
       countChildren,
@@ -162,6 +166,7 @@ export default {
       isLinkDisabled,
       isLinkTruncated,
       isLinkVisible,
+      isTitleHtml,
       label,
       labelWithoutFilter,
       onKeydown,
@@ -182,7 +187,7 @@ export default {
       h("span", {
         class: "a_menu__link__text",
       }, [
-        h("span", {
+        this.title && h("span", {
           class: "a_position_absolute_all",
           title: this.title,
           ariaHidden: true,
@@ -208,14 +213,22 @@ export default {
           labelWithoutFilter: this.labelWithoutFilter,
         }) :
         this.item.to ?
-          h(resolveComponent("RouterLink"), {
+          h(ATooltip, {
+            tag: "RouterLink",
+            placement: "right",
+            isHide: !this.isTitleHtml,
             class: ["a_menu__link a_menu__link__text_truncated", {
               a_menu__link_disabled: this.isLinkDisabled,
             }],
             to: this.toLocal,
             tabindex: this.isPanelOpen ? 0 : -1,
             onClick: this.clickLink,
-          }, () => ICON_AND_TEXT) :
+          }, {
+            default: () => ICON_AND_TEXT,
+            title: () => h("div", {
+              innerHTML: this.item.titleHtml,
+            })
+          }) :
           h("a", {
             class: "a_menu__link a_menu__link_btn a_menu__link__text_truncated",
             ariaLabel: "Untermenü öffnen",

package/src/AMenu/AMenuPanelLink/compositionAPI/TitleAPI.js

@@ -0,0 +1,26 @@
+import {
+  computed,
+  toRef,
+} from "vue";
+
+export default function TitleAPI(props, {
+  labelWithoutFilter = computed(() => ""),
+}) {
+  const item = toRef(props, "item");
+
+  const isTitleHtml = computed(() => {
+    return !!item.value.titleHtml;
+  });
+
+  const title = computed(() => {
+    if (isTitleHtml.value) {
+      return undefined;
+    }
+    return item.value.title || labelWithoutFilter.value;
+  });
+
+  return {
+    isTitleHtml,
+    title,
+  };
+}

package/src/AMenu/AMenuSearchGroup.js

@@ -3,7 +3,7 @@ import {
   h, toRef,
 } from "vue";
 
-import AMenuPanelLink from "./AMenuPanelLink";
+import AMenuPanelLink from "./AMenuPanelLink/AMenuPanelLink";
 
 import AKeyParent from "../ui/const/AKeyParent";
 import AKeyLabel from "../ui/const/AKeyLabel";

package/src/ATooltip/ATooltip.js

@@ -0,0 +1,136 @@
+import {
+  h,
+  Teleport,
+} from "vue";
+
+import AttributesAPI from "./compositionAPI/AttributesAPI";
+import PopperAPI from "./compositionAPI/PopperAPI";
+import TagAPI from "./compositionAPI/TagAPI";
+import ToggleAPI from "./compositionAPI/ToggleAPI";
+
+import placements from "../const/placements";
+import {
+  uniqueId,
+} from "lodash-es";
+
+export default {
+  name: "ATooltip",
+  props: {
+    id: {
+      type: String,
+      required: false,
+      default: () => uniqueId("a_tooltip"),
+    },
+    placement: {
+      type: String,
+      required: false,
+      default: "bottom-start",
+      validator: placement => placements.indexOf(placement) !== -1,
+    },
+    tag: {
+      type: String,
+      required: false,
+      default: "span",
+    },
+    isHide: {
+      type: Boolean,
+      required: false,
+    },
+    timeClose: {
+      type: Number,
+      required: false,
+      default: 300,
+    },
+  },
+  setup(props) {
+    const {
+      closeTitle,
+      closeTitleWithTimer,
+      componentRef,
+      isTitleVisible,
+      mouseEnterTooltip,
+      mouseLeaveTooltip,
+      showTitle,
+      titleRef,
+      updateTitle,
+      updateTitleOptions,
+    } = PopperAPI(props);
+
+    const {
+      onBlur,
+      onFocus,
+      onMouseenter,
+      onMouseleave,
+    } = ToggleAPI(props, {
+      showTitle,
+      closeTitle,
+      closeTitleWithTimer,
+    });
+
+    const {
+      tagLocal,
+    } = TagAPI(props);
+
+    const {
+      ariaDescribedby,
+    } = AttributesAPI(props);
+
+    return {
+      ariaDescribedby,
+      closeTitle,
+      componentRef,
+      isTitleVisible,
+      mouseEnterTooltip,
+      mouseLeaveTooltip,
+      onBlur,
+      onFocus,
+      onMouseenter,
+      onMouseleave,
+      showTitle,
+      tagLocal,
+      titleRef,
+      updateTitle,
+      updateTitleOptions,
+    };
+  },
+  render() {
+    return h(this.tagLocal, {
+      ref: "componentRef",
+      id: this.id,
+      "aria-describedby": this.ariaDescribedby,
+      onFocus: this.onFocus,
+      onBlur: this.onBlur,
+      onMouseenter: this.onMouseenter,
+      onMouseleave: this.onMouseleave,
+    }, {
+      default: () => [
+        this.$slots.default && this.$slots.default(),
+        !this.isHide && h(Teleport, {
+          to: "body",
+        }, [
+          h("div", {
+            ariaHidden: true,
+          }, [
+            h("div", {
+              id: this.ariaDescribedby
+            }, [
+              this.$slots.title && this.$slots.title(),
+            ]),
+            this.isTitleVisible && h("div", {
+              ref: "titleRef",
+              class: "a_tooltip__container",
+              onMouseenter: this.mouseEnterTooltip,
+              onMouseleave: this.mouseLeaveTooltip,
+            }, [
+              this.$slots.title && this.$slots.title(),
+              h("div", {
+                "data-popper-arrow": true,
+                class: "a_tooltip__arrow",
+              }),
+            ]),
+          ]),
+        ]),
+      ],
+    });
+  },
+};

package/src/ATooltip/compositionAPI/AttributesAPI.js

@@ -0,0 +1,16 @@
+import {
+  computed,
+  toRef,
+} from "vue";
+
+export default function AttributesAPI(props) {
+  const id = toRef(props, "id");
+
+  const ariaDescribedby = computed(() => {
+    return `${ id.value }_title`;
+  });
+
+  return {
+    ariaDescribedby,
+  };
+}

package/src/ATooltip/compositionAPI/PopperAPI.js

@@ -0,0 +1,123 @@
+import {
+  computed,
+  ref,
+  toRef,
+} from "vue";
+
+import EventBus from "../../utils/EventBus";
+import {
+  createPopper,
+} from "@popperjs/core";
+
+export default function PopperAPI(props) {
+  const id = toRef(props, "id");
+  const placement = toRef(props, "placement");
+  const timeClose = toRef(props, "timeClose");
+
+  const popper = ref(undefined);
+  const timerTitleClose = ref(undefined);
+  const isTitleVisible = ref(false);
+  const titleRef = ref(undefined);
+  const componentRef = ref(undefined);
+
+  const popperOptions = computed(() => {
+    return {
+      placement: placement.value,
+      removeOnDestroy: true,
+      modifiers: [
+        {
+          name: "offset",
+          options: {
+            offset: [0, 6],
+          },
+        },
+      ],
+    };
+  });
+
+  const setEventBusCloseTitle = () => {
+    EventBus.$on("closeHtmlTitle", closeTitle);
+  };
+
+  const destroyEventBusCloseTitle = () => {
+    EventBus.$off("closeHtmlTitle", closeTitle);
+  };
+
+  const destroyPopper = () => {
+    if (popper.value) {
+      popper.value.destroy();
+      popper.value = undefined;
+    }
+  };
+
+  const closeTitleWithTimer = () => {
+    timerTitleClose.value = setTimeout(() => {
+      closeTitle();
+    }, timeClose.value);
+  };
+
+  const showTitle = () => {
+    if (isTitleVisible.value) {
+      clearTimeout(timerTitleClose.value);
+      return;
+    }
+    isTitleVisible.value = true;
+    setTimeout(() => {
+      if (!popper.value) {
+        const ELEMENT = document.getElementById(id.value);
+        if (!titleRef.value) {
+          return;
+        }
+        popper.value = createPopper(
+          ELEMENT,
+          titleRef.value,
+          popperOptions.value,
+        );
+      }
+      EventBus.$emit("closeHtmlTitle");
+      setEventBusCloseTitle();
+    });
+  };
+
+  const mouseEnterTooltip = () => {
+    clearTimeout(timerTitleClose.value);
+  };
+
+  const mouseLeaveTooltip = () => {
+    closeTitleWithTimer();
+  };
+
+  const updateTitle = () => {
+    if (popper.value) {
+      popper.value.forceUpdate();
+      // this.setContentSymbolsLengthInTooltipContent();
+    }
+  };
+
+  const updateTitleOptions = () => {
+    if (popper.value) {
+      popper.value.setOptions(popperOptions.value);
+      // this.setContentSymbolsLengthInTooltipContent();
+    }
+  };
+
+  function closeTitle() {
+    clearTimeout(timerTitleClose.value);
+    destroyPopper();
+    destroyEventBusCloseTitle();
+    isTitleVisible.value = false;
+  }
+
+  return {
+    closeTitle,
+    closeTitleWithTimer,
+    componentRef,
+    isTitleVisible,
+    mouseEnterTooltip,
+    mouseLeaveTooltip,
+    showTitle,
+    titleRef,
+    updateTitle,
+    updateTitleOptions,
+  };
+}

package/src/ATooltip/compositionAPI/TagAPI.js

@@ -0,0 +1,22 @@
+import {
+  computed,
+  resolveComponent,
+  toRef,
+} from "vue";
+
+const COMPONENTS = ["RouterLink", "router-link"];
+
+export default function TagAPI(props) {
+  const tag = toRef(props, "tag");
+
+  const tagLocal = computed(() => {
+    if (COMPONENTS.indexOf(tag.value) !== -1) {
+      return resolveComponent(tag.value);
+    }
+    return tag.value;
+  });
+
+  return {
+    tagLocal,
+  };
+}

package/src/ATooltip/compositionAPI/ToggleAPI.js

@@ -0,0 +1,40 @@
+import {
+  toRef,
+} from "vue";
+
+export default function ToggleAPI(props, {
+  showTitle = () => {},
+  closeTitle = () => {},
+  closeTitleWithTimer = () => {},
+}) {
+  const isHide = toRef(props, "isHide");
+
+  const onMouseenter = () => {
+    if (isHide.value) {
+      return;
+    }
+    showTitle();
+  };
+
+  const onMouseleave = () => {
+    closeTitleWithTimer();
+  };
+
+  const onFocus = () => {
+    if (isHide.value) {
+      return;
+    }
+    showTitle();
+  };
+
+  const onBlur = () => {
+    closeTitle();
+  };
+
+  return {
+    onBlur,
+    onFocus,
+    onMouseenter,
+    onMouseleave,
+  };
+}

package/src/const/placements.js

@@ -0,0 +1,17 @@
+export default [
+  "auto",
+  "auto-start",
+  "auto-end",
+  "top",
+  "top-start",
+  "top-end",
+  "right",
+  "right-start",
+  "right-end",
+  "bottom",
+  "bottom-start",
+  "bottom-end",
+  "left",
+  "left-start",
+  "left-end",
+];