aloha-vue 1.2.74 → 1.2.76

package/docs/src/views/PageConfirm/PageConfirm.js

@@ -1,6 +1,7 @@
 import AModal from "../../../../src/AModal/AModal";
 
 import AConfirmAPI from "../../../../src/compositionAPI/AConfirmAPI";
+import EventBus from "../../../../src/utils/EventBus";
 
 export default {
   name: "PageConfirm",
@@ -30,8 +31,22 @@ export default {
       });
     };
 
+    const openConfirmWithTimeout = () => {
+      openConfirm({
+        headerText: "Aloha",
+        bodyHtml: "<div>Aloha <strong>Hola</strong></div>",
+        save: save,
+        selectorClose: "#btn_confirm_timeout",
+      });
+
+      setTimeout(() => {
+        EventBus.$emit("closeModalConfirm");
+      }, 5000);
+    };
+
     return {
       openConfirmLocal,
+      openConfirmWithTimeout,
     };
   },
 };

package/docs/src/views/PageConfirm/PageConfirm.pug

@@ -5,3 +5,10 @@ div
     type="button"
     @click="openConfirmLocal"
   ) Open confirm
+
+  button.a_btn.a_btn_primary(
+    id="btn_confirm_timeout"
+    type="button"
+    @click="openConfirmWithTimeout"
+  ) Open confirm with timeout
+

package/package.json

@@ -14,7 +14,7 @@
     "Vue.js"
   ],
   "homepage": "https://github.com/ilia-brykin/aloha/#README.md",
-  "version": "1.2.74",
+  "version": "1.2.76",
   "author": {
     "name": "Ilia Brykin",
     "email": "brykin.ilia@gmail.com"

package/src/AMenu2/AMenuPanel/AMenuPanel.js

@@ -6,8 +6,10 @@ import {
 
 import AMenuBreadcrumbs from "../AMenuBreadcrumbs/AMenuBreadcrumbs";
 import AMenuPanelGroup from "../AMenuPanelGroup/AMenuPanelGroup";
+import ATranslation from "../../ATranslation/ATranslation";
 
 import GroupAPI from "./compositionAPI/GroupAPI";
+import HeaderAPI from "./compositionAPI/HeaderAPI";
 import IdAPI from "./compositionAPI/IdAPI";
 import LevelAPI from "./compositionAPI/LevelAPI";
 import PanelOpenAPI from "./compositionAPI/PanelOpenAPI";
@@ -103,15 +105,24 @@ export default {
       openedLevelIndex,
     });
 
+    const {
+      isHeaderPanelVisible,
+      parentLabel,
+    } = HeaderAPI(props, {
+      openedLevelIndex,
+    });
+
     provide("isChildPanelOpen", isChildPanelOpen);
     provide("isPanelMain", isPanelMain);
 
     return {
       isChildPanelOpen,
+      isHeaderPanelVisible,
       isItemsWithoutGroup,
       isPanelOpen,
       itemsGroup,
       panelId,
+      parentLabel,
       styleZIndex,
     };
   },
@@ -135,6 +146,15 @@ export default {
         isSearchActive: this.isSearchActive,
         panelParentsOpen: this.panelParentsOpen,
       }),
+      (this.isHeaderPanelVisible) && h("div", {
+        class: "a_menu_2__panel_header",
+      }, [
+        h(ATranslation, {
+          class: "a_menu_2__panel_header__text",
+          html: this.parentLabel,
+          tag: "strong",
+        }),
+      ]),
       h("ul", {
         class: "a_menu_2__listview",
       }, [

package/src/AMenu2/AMenuPanel/compositionAPI/HeaderAPI.js

@@ -0,0 +1,36 @@
+import {
+  computed,
+  inject,
+  toRef,
+} from "vue";
+
+import AKeyLabel from "../../../const/AKeyLabel";
+
+import {
+  get,
+} from "lodash-es";
+
+export default function HeaderAPI(props, {
+  openedLevelIndex = computed(() => 0),
+}) {
+  const dataKeyById = toRef(props, "dataKeyById");
+  const isPanelMain = toRef(props, "isPanelMain");
+  const parentId = toRef(props, "parentId");
+
+  const isMenuOpen = inject("isMenuOpen");
+
+  const isHeaderPanelVisible = computed(() => {
+    return !isPanelMain.value &&
+      !isMenuOpen.value &&
+      openedLevelIndex.value === 0;
+  });
+
+  const parentLabel = computed(() => {
+    return get(dataKeyById.value, `${ parentId.value }.${ AKeyLabel }`);
+  });
+
+  return {
+    isHeaderPanelVisible,
+    parentLabel,
+  };
+}

package/src/AMenu2/AMenuPanelLink/AMenuPanelLink.js

@@ -236,7 +236,7 @@ export default {
               }, this.countChildren),
               h(AIcon, {
                 class: "a_menu_2__link__counter__icon",
-                icon: "ChevronRight",
+                icon: "MenuChevronRight",
               })
             ]),
           ]),

package/src/AModal/AModal.js

@@ -1,5 +1,6 @@
 import {
   h,
+  onBeforeUnmount,
   onMounted,
   onUnmounted,
   Teleport,
@@ -10,6 +11,7 @@ import {
 import AButton from "../AButton/AButton";
 import ATranslation from "../ATranslation/ATranslation";
 
+import CloseFromOutsideAPI from "./compositionAPI/CloseFromOutsideAPI";
 import DisabledAPI from "./compositionAPI/DisabledAPI";
 import EscapeAPI from "./compositionAPI/EscapeAPI";
 import FocusAPI from "./compositionAPI/FocusAPI";
@@ -167,6 +169,11 @@ export default {
   setup(props) {
     const isModalHidden = toRef(props, "isModalHidden");
 
+    const {
+      destroyEventBusCloseFromOutside,
+      initEventBusCloseFromOutside,
+    } = CloseFromOutsideAPI(props);
+
     const {
       sizeClass,
     } = SizeAPI(props);
@@ -220,10 +227,16 @@ export default {
       }
     });
 
+    initEventBusCloseFromOutside();
+
     onMounted(() => {
       showModal();
     });
 
+    onBeforeUnmount(() => {
+      destroyEventBusCloseFromOutside();
+    });
+
     onUnmounted(() => {
       hideModal();
     });
@@ -236,8 +249,6 @@ export default {
       sizeClass,
     };
   },
-  computed: {
-  },
   render() {
     return h(Teleport, {
       to: "body",

package/src/AModal/compositionAPI/CloseFromOutsideAPI.js

@@ -0,0 +1,29 @@
+import {
+  toRef,
+} from "vue";
+
+import EventBus from "../../utils/EventBus";
+
+export default function CloseFromOutsideAPI(props) {
+  const close = toRef(props, "close");
+  const isConfirm = toRef(props, "isConfirm");
+
+  const closeModalFromOutside = () => {
+    if (!isConfirm.value) {
+      close.value();
+    }
+  };
+
+  const initEventBusCloseFromOutside = () => {
+    EventBus.$on("closeModal", closeModalFromOutside);
+  };
+
+  const destroyEventBusCloseFromOutside = () => {
+    EventBus.$off("closeModal", closeModalFromOutside);
+  };
+
+  return {
+    destroyEventBusCloseFromOutside,
+    initEventBusCloseFromOutside,
+  };
+}

package/src/AModalConfirm/AModalConfirm.js

@@ -1,11 +1,12 @@
 import {
   computed,
-  h,
+  h, onBeforeUnmount,
 } from "vue";
 
 import AModal from "../AModal/AModal";
 
 import AConfirmAPI from "../compositionAPI/AConfirmAPI";
+import CloseFromOutsideAPI from "./compositionAPI/CloseFromOutsideAPI";
 
 // @vue/component
 export default {
@@ -17,6 +18,13 @@ export default {
       isModalHidden,
     } = AConfirmAPI();
 
+    const {
+      destroyEventBusCloseFromOutside,
+      initEventBusCloseFromOutside,
+    } = CloseFromOutsideAPI({
+      isModalHidden,
+    });
+
     const modalProps = computed(() => {
       return {
         isModalHidden: isModalHidden.value,
@@ -26,6 +34,12 @@ export default {
       };
     });
 
+    initEventBusCloseFromOutside();
+
+    onBeforeUnmount(() => {
+      destroyEventBusCloseFromOutside();
+    });
+
     return {
       modalProps,
     };

package/src/AModalConfirm/compositionAPI/CloseFromOutsideAPI.js

@@ -0,0 +1,26 @@
+import {
+  ref,
+} from "vue";
+
+import EventBus from "../../utils/EventBus";
+
+export default function CloseFromOutsideAPI({
+  isModalHidden = ref(false),
+}) {
+  const closeModalFromOutside = () => {
+    isModalHidden.value = true;
+  };
+
+  const initEventBusCloseFromOutside = () => {
+    EventBus.$on("closeModalConfirm", closeModalFromOutside);
+  };
+
+  const destroyEventBusCloseFromOutside = () => {
+    EventBus.$off("closeModalConfirm", closeModalFromOutside);
+  };
+
+  return {
+    destroyEventBusCloseFromOutside,
+    initEventBusCloseFromOutside,
+  };
+}

package/src/plugins/AIconPlugin.js

@@ -18,6 +18,7 @@ import CheckLg from "../AIcon/Icons/CheckLg";
 import ChevronDown from "../AIcon/Icons/ChevronDown";
 import ChevronLeft from "../AIcon/Icons/ChevronLeft";
 import ChevronRight from "../AIcon/Icons/ChevronRight";
+import ChevronRightThin from "../AIcon/Icons/bootstrap-1-9-1/ChevronRight";
 import ChevronUp from "../AIcon/Icons/ChevronUp";
 import Close from "../AIcon/Icons/Close";
 import Cog from "../AIcon/Icons/Cog";
@@ -48,11 +49,12 @@ import Trash from "../AIcon/Icons/Trash";
 
 export const iconPluginOptions = ref({
   icons: {
-    Aloha,
+    _NoImage,
     AlertDanger,
-    AlertSuccess,
     AlertInfo,
+    AlertSuccess,
     AlertWarning,
+    Aloha,
     AngleDown,
     AngleLeft,
     AngleRight,
@@ -64,8 +66,8 @@ export const iconPluginOptions = ref({
     ChevronLeft,
     ChevronRight,
     ChevronUp,
-    Cog,
     Close,
+    Cog,
     Cross,
     Dnd,
     DoubleAngleDown,
@@ -78,6 +80,7 @@ export const iconPluginOptions = ref({
     FloppyDisk,
     Home,
     Lock,
+    MenuChevronRight: ChevronRightThin,
     Minus,
     Ok,
     OptionHorizontal,
@@ -90,7 +93,6 @@ export const iconPluginOptions = ref({
     ThList,
     ThreeDots,
     Trash,
-    _NoImage,
   },
 });
 

package/src/styles/components/AMenu2.scss

@@ -24,28 +24,38 @@
   --a_menu_2_panel_iconpanel_size: var(--a_menu_2_width_collapsed);
   --a_menu_2_panel_color: var(--a_color_gray_600);
   --a_menu_2_link_color: var(--a_color_gray_900);
+  --a_menu_2_link_hover_color: var(--a_color_gray_900);
+  --a_menu_2_link_hover_bg: var(--a_color_gray_200);
   --a_menu_2_listitem_padding: .3rem;
   --a_menu_2_listitem_panel_secondary_padding_x: .6rem;
   --a_menu_2_listitem_panel_secondary_padding_y: .3rem;
   --a_menu_2_link_padding_x: .7rem;
-  --a_menu_2_link_padding_y: .7rem;
+  --a_menu_2_link_padding_y: .5rem;
   --a_menu_2_link_selected_bg: var(--a_color_gray_200);
   --a_menu_2_link_selected_color: inherit;
   --a_menu_2_link_border_color: transparent;
   --a_menu_2_link_border_radius: .3rem;
+  --a_menu_2_link_focus_size: 0 0 1px 3px;
   --a_menu_2_icon_color: var(--a_menu_2_link_color);
-  --a_menu_2_icon_focus_shadow_color: var(--a_color_focus);
+  --a_menu_2_focus_shadow_color: var(--a_color_focus);
   --a_menu_2_list_header_bg: var(--a_color_gray_200);
-  --a_menu_2_breadcrumb_min_height: 60px;
+  --a_menu_2_breadcrumb_min_height: 65px;
   --a_menu_2_breadcrumb_border_bottom_width: 1px;
   --a_menu_2_submenu_open_bg: var(--a_color_primary);
   --a_menu_2_submenu_open_color: var(--a_color_white);
   --a_menu_2_submenu_border_radius: 1rem;
   --a_menu_2_submenu_border_width: 2px;
   --a_menu_2_search_height: 50px;
+  --a_menu_2_search_link_focus_size: inset 0 0 1px 2px;
   --a_menu_2_close_panel_width: 300px;
   --a_menu_2_close_panel_max_height: 400px;
   --a_menu_2_close_panel_border_radius: .3rem;
+  --a_menu_2_close_panel_box_shadow_color: var(--a_color_gray_600);
+  --a_menu_2_close_panel_box_shadow_size: 0 0 7px 3px;
+  --a_menu_2_close_panel_header_color: var(--a_color_gray_900);
+  --a_menu_2_close_panel_header_border_bottom_color: var(--a_color_gray_600);
+  --a_menu_2_close_panel_header_border_bottom_width: 1px;
+  --a_menu_2_link_line_horizontal_display: none;
 
   width: var(--a_menu_2_width);
   position: absolute;
@@ -101,7 +111,7 @@
     border-color: inherit;
     border-bottom-width: 1px;
     border-bottom-style: solid;
-    display: block;
+    display: var(--a_menu_2_link_line_horizontal_display);
     position: absolute;
     inset-inline-start: 20px;
     inset-inline-end: 0;
@@ -135,11 +145,15 @@
     text-decoration: none;
     color: var(--a_menu_2_link_color);
   }
-  &:focus,
+  &:focus {
+    outline: 0;
+    box-shadow: var(--a_menu_2_link_focus_size) var(--a_menu_2_focus_shadow_color);
+    color: var(--a_menu_2_link_color);
+  }
   &:hover {
     outline: 0;
-    box-shadow: inset 0 0 1px 4px var(--a_menu_2_icon_focus_shadow_color);
     color: var(--a_menu_2_link_color);
+    background-color: var(--a_menu_2_link_hover_bg);
   }
   &.a_menu_2__link_active {
     --a_menu_2_icon_color: var(--a_menu_2_submenu_open_bg);
@@ -480,7 +494,8 @@
       top: auto;
       border: none;
       border-radius: var(--a_menu_2_close_panel_border_radius);
-      box-shadow: 0 0 2px 2px var(--a_color_gray_600);
+      // Aloha
+      box-shadow: var(--a_menu_2_close_panel_box_shadow_size) var(--a_color_gray_600);
       max-height: var(--a_menu_2_close_panel_max_height);
       overflow-y: auto;
       z-index: 2;
@@ -545,7 +560,7 @@
     padding: 0.2rem 0.3rem;
     &:focus,
     &:hover {
-      box-shadow: inset 0 0 1px 2px var(--a_menu_2_icon_focus_shadow_color);
+      box-shadow: var(--a_menu_2_search_link_focus_size) var(--a_menu_2_focus_shadow_color);
     }
   }
   .a_menu_2__breadcrumbs__item__divider {
@@ -568,4 +583,14 @@
 .a_menu_2__breadcrumb__ul_truncated__dropdown {
   padding: .2rem;
   min-width: auto;
+}
+
+.a_menu_2__panel_header {
+  color: var(--a_menu_2_close_panel_header_color);
+  border-bottom: var(--a_menu_2_close_panel_header_border_bottom_width) solid var(--a_menu_2_close_panel_header_border_bottom_color);
+  padding: var(--a_menu_2_listitem_panel_secondary_padding_y) var(--a_menu_2_listitem_panel_secondary_padding_x);
+}
+.a_menu_2__panel_header__text {
+  display: inline-block;
+  padding: var(--a_menu_2_link_padding_y) var(--a_menu_2_link_padding_x);
 }