aloha-vue 1.0.80 → 1.0.82

package/docs/src/App/App.pug

@@ -1,13 +1,10 @@
 div
-  the-navbar(
-    @change-framework="changeFramework"
-  )
-  .a_d_flex
-    the-menu
-    .a_d_inline_block.a_pl_4(
-      style="width: calc(100vw - 280px);"
+  the-menu
+  .a_menu__page
+    the-navbar(
+      @change-framework="changeFramework"
     )
-      router-view
+    router-view
 
   a-modal-confirm
   a-notification

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

@@ -1,107 +1,189 @@
+import AMenu from "../../../../src/AMenu/AMenu";
+
 import TheMenuItem from "../TheMenuItem/TheMenuItem.vue";
 
 export default {
   name: "TheMenu",
   components: {
+    AMenu,
     TheMenuItem,
   },
   data() {
     return {
       menuItems: [
         {
+          group: "Aloha",
           id: "spinner",
-          name: "PageSpinner",
           label: "Spinner",
+          to: {
+            name: "PageSpinner",
+          },
+          icon: "Duplicate",
         },
         {
+          group: "Aloha",
           id: "table",
-          name: "PageTable",
           label: "Table",
+          to: {
+            name: "PageTable",
+          },
+          icon: "Envelope",
         },
         {
+          group: "Hola",
           id: "collapse",
-          name: "PageCollapse",
           label: "Collapse",
+          to: {
+            name: "PageCollapse",
+          },
+          icon: "Export",
         },
         {
+          group: "Hola",
           id: "cloak",
-          name: "PageCloak",
           label: "Cloak",
+          to: {
+            name: "PageCloak",
+          },
+          icon: "EyeOpen",
+        },
+        {
+          id: "ui",
+          label: "ui",
+          icon: "Export",
+        },
+        {
+          id: "ui-child",
+          label: "Child",
+          parent: "ui",
+        },
+        {
+          id: "input",
+          to: {
+            name: "PageInput",
+          },
+          label: "Input",
+          parent: "ui-child",
         },
         {
           id: "input",
-          name: "PageInput",
+          to: {
+            name: "PageInput",
+          },
           label: "Input",
+          parent: "ui",
         },
         {
           id: "json",
-          name: "PageAJson",
           label: "JSON",
+          to: {
+            name: "PageAJson",
+          },
+          parent: "ui",
         },
         {
           id: "accordion",
-          name: "PageAccordion",
           label: "Accordion",
+          to: {
+            name: "PageAccordion",
+          },
+          icon: "Duplicate",
         },
         {
           id: "alert",
-          name: "PageAlert",
           label: "Alert",
+          to: {
+            name: "PageAlert",
+          },
+          icon: "Home",
         },
         {
           id: "modal",
-          name: "PageModal",
           label: "Modal",
+          to: {
+            name: "PageModal",
+          },
+          icon: "Lock",
         },
         {
           id: "confirm",
-          name: "PageConfirm",
           label: "Confirm",
+          to: {
+            name: "PageConfirm",
+          },
+          icon: "Minus",
         },
         {
           id: "notification",
-          name: "PageNotification",
           label: "Notification",
+          to: {
+            name: "PageNotification",
+          },
+          icon: "Duplicate",
         },
         {
           id: "checkbox",
-          name: "PageCheckbox",
           label: "Checkbox",
+          to: {
+            name: "PageCheckbox",
+          },
+          parent: "ui",
         },
         {
           id: "radio",
-          name: "PageRadio",
           label: "Radio",
+          to: {
+            name: "PageRadio",
+          },
+          parent: "ui",
         },
         {
           id: "select",
-          name: "PageSelect",
           label: "Select",
+          to: {
+            name: "PageSelect",
+          },
+          parent: "ui",
         },
         {
           id: "form",
-          name: "PageForm",
           label: "Form",
+          to: {
+            name: "PageForm",
+          },
+          parent: "ui",
         },
         {
           id: "dropdown",
-          name: "PageDropdown",
           label: "Dropdown",
+          to: {
+            name: "PageDropdown",
+          },
+          icon: "Cog",
         },
         {
           id: "tabs",
-          name: "PageTabs",
           label: "Tabs",
+          to: {
+            name: "PageTabs",
+          },
+          icon: "Cross",
         },
         {
           id: "progress",
-          name: "PageProgress",
           label: "Progress",
+          to: {
+            name: "PageProgress",
+          },
+          icon: "Dnd",
         },
         {
           id: "list",
-          name: "PageList",
           label: "List",
+          to: {
+            name: "PageList",
+          },
+          icon: "EyeClose",
         },
       ],
     };

package/docs/src/components/TheMenu/TheMenu.pug

@@ -1,7 +1,11 @@
-.the_menu
-  ul.the_menu__ul
-    the-menu-item(
-      v-for="item in menuItems"
-      :key="item.id"
-      :data="item"
-    )
+a-menu(
+  :items="menuItems"
+)
+
+//.the_menu
+//  ul.the_menu__ul
+//    the-menu-item(
+//      v-for="item in menuItems"
+//      :key="item.id"
+//      :data="item"
+//    )

package/docs/src/components/TheNavbar/TheNavbar.js

@@ -1,6 +1,5 @@
-import {
-  AIcon,
-} from "../../../../dist";
+import AIcon from "../../../../src/AIcon/AIcon";
+import AMenuButtonToggle from "../../../../src/AMenu/AMenuButtonToggle";
 
 import frameworks from "../../../../src/const/frameworks";
 
@@ -8,6 +7,7 @@ export default {
   name: "TheNavbar",
   components: {
     AIcon,
+    AMenuButtonToggle,
   },
   emits: [
     "change-framework",

package/docs/src/components/TheNavbar/TheNavbar.pug

@@ -1,6 +1,8 @@
 nav.a_d_flex.a_justify_content_between.a_align_items_center.a_px_2(
   style="height: 80px;"
 )
+  a-menu-button-toggle
+
   router-link.a_d_flex.a_align_items_center(
     to="/"
   )

package/docs/src/main.js

@@ -5,6 +5,7 @@ import router from "./router/index";
 import AI18nPlugin from "../../src/plugins/AI18nPlugin";
 // import alohaPlugin from "../src/plugins/alohaPlugin";
 import AIconPlugin from "../../src/plugins/AIconPlugin";
+import mainIcons from "./mainIcons";
 
 import de from "./i18n/de.json";
 import en from "./i18n/en.json";
@@ -24,18 +25,7 @@ const TRANSLATIONS = {
   ru: { ...ruGlobal, ...ru },
 };
 APP.use(AI18nPlugin, TRANSLATIONS, "de");
-APP.use(AIconPlugin, {
-  Plus2: `<svg
-    xmlns="http://www.w3.org/2000/svg"
-    viewBox="0 0 18 18"
-    height="18"
-    width="18"
-  >
-    <path
-      d="M 17.986481,14.773554 14.757239,17.986512 9.0000154,12.245611 3.2427918,17.986512 0.01353176,14.773554 9.0163185,5.770767 Z"
-    />
-  </svg>`,
-});
+APP.use(AIconPlugin, mainIcons);
 // APP.use(alohaPlugin, {
 //   framework: "bootstrap",
 // });

package/docs/src/mainIcons.js

@@ -0,0 +1,11 @@
+import ChevronRight from "../../src/AIcon/Icons/bootstrap3/ChevronRight";
+import Duplicate from "../../src/AIcon/Icons/bootstrap3/Duplicate";
+import Envelope from "../../src/AIcon/Icons/bootstrap3/Envelope";
+import Export from "../../src/AIcon/Icons/bootstrap3/Export";
+
+export default {
+  ChevronRight,
+  Duplicate,
+  Envelope,
+  Export,
+};

package/package.json

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

package/src/AMenu/AMenu.js

@@ -0,0 +1,177 @@
+import {
+  computed,
+  h,
+  provide,
+  toRef,
+} from "vue";
+
+import AInput from "../ui/AInput/AInput";
+import AMenuBreadcrumbs from "./AMenuBreadcrumbs";
+import AMenuPanel from "./AMenuPanel";
+
+import AMenuPanelsAPI from "./compositionAPI/AMenuPanelsAPI";
+import AMenuSearchAPI from "./compositionAPI/AMenuSearchAPI";
+import AMenuToggleAPI from "./compositionAPI/AMenuToggleAPI";
+
+import {
+  forEach,
+  get,
+  isNil,
+} from "lodash-es";
+
+export default {
+  name: "AMenu",
+  props: {
+    isOpenDefault: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    items: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    keyGroup: {
+      type: String,
+      required: false,
+      default: "group",
+    },
+    keyIcon: {
+      type: String,
+      required: false,
+      default: "icon",
+    },
+    keyId: {
+      type: String,
+      required: false,
+      default: "id",
+    },
+    keyLabel: {
+      type: String,
+      required: false,
+      default: "label",
+    },
+    keyParent: {
+      type: String,
+      required: false,
+      default: "parent",
+    },
+    isBreadcrumbsAll: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    isSearch: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+  },
+  setup(props) {
+    const items = toRef(props, "items");
+    const keyParent = toRef(props, "keyParent");
+
+    const itemsProParent = computed(() => {
+      const MAIN = [];
+      const ITEMS_PRO_PARENT = {};
+      forEach(items.value, item => {
+        const PARENT = get(item, keyParent.value);
+        if (isNil(PARENT)) {
+          MAIN.push(item);
+        } else {
+          ITEMS_PRO_PARENT[PARENT] = ITEMS_PRO_PARENT[PARENT] || [];
+          ITEMS_PRO_PARENT[PARENT].push(item);
+        }
+      });
+
+      return {
+        main: MAIN,
+        children: ITEMS_PRO_PARENT,
+      };
+    });
+
+    const {
+      initMenuOpenOrClose,
+      isMenuOpen,
+    } = AMenuToggleAPI();
+
+    const {
+      modelSearch,
+      updateModelSearch,
+    } = AMenuSearchAPI();
+
+    const {
+      panelParentsOpen,
+      togglePanel,
+    } = AMenuPanelsAPI();
+
+    provide("togglePanel", togglePanel);
+
+    const isOpenDefault = toRef(props, "isOpenDefault");
+    initMenuOpenOrClose(isOpenDefault.value);
+
+    return {
+      itemsProParent,
+      panelParentsOpen,
+
+      isMenuOpen,
+
+      modelSearch,
+      updateModelSearch,
+    };
+  },
+  render() {
+    return h("nav", {
+      class: "a_menu"
+    }, [
+      h("div", {
+        class: "a_menu__blocker",
+        ariaHidden: true,
+      }),
+      h("div", {
+        class: "a_menu__navbar_top",
+      }, [
+        this.isSearch && h(AInput, {
+          id: "a_menu_search",
+          class: "a_menu__navbar_top__search",
+          modelValue: this.modelSearch,
+          label: "Suche",
+          "onUpdate:modelValue": this.updateModelSearch,
+        }),
+        h(AMenuBreadcrumbs, {
+          items: this.items,
+          isBreadcrumbsAll: this.isBreadcrumbsAll,
+          keyId: this.keyId,
+          keyLabel: this.keyLabel,
+          panelParentsOpen: this.panelParentsOpen,
+        }),
+      ]),
+      h("div", {
+        class: "a_menu__panels",
+      }, [
+        h(AMenuPanel, {
+          isFirst: true,
+          keyGroup: this.keyGroup,
+          keyIcon: this.keyIcon,
+          keyId: this.keyId,
+          keyLabel: this.keyLabel,
+          panelItems: this.itemsProParent.main,
+          panelParentsOpen: this.panelParentsOpen,
+        }),
+        Object.keys(this.itemsProParent.children).map(key => {
+          return h(AMenuPanel, {
+            key,
+            keyGroup: this.keyGroup,
+            keyIcon: this.keyIcon,
+            keyId: this.keyId,
+            keyLabel: this.keyLabel,
+            parentId: key,
+            panelItems: this.itemsProParent.children[key],
+            panelParentsOpen: this.panelParentsOpen,
+          });
+        }),
+      ]),
+    ]);
+  },
+};

package/src/AMenu/AMenuBreadcrumbs.js

@@ -0,0 +1,90 @@
+import {
+  computed,
+  h,
+  toRef,
+} from "vue";
+
+import AMenuBreadcrumbsItem from "./AMenuBreadcrumbsItem";
+
+import {
+  forEach,
+  get,
+  keyBy,
+} from "lodash-es";
+
+
+export default {
+  name: "AMenuBreadcrumbs",
+  props: {
+    items: {
+      type: Array,
+      required: true,
+    },
+    isBreadcrumbsAll: {
+      type: Boolean,
+      required: true,
+    },
+    keyId: {
+      type: String,
+      required: true,
+    },
+    keyLabel: {
+      type: String,
+      required: true,
+    },
+    panelParentsOpen: {
+      type: Array,
+      required: true,
+    },
+  },
+  setup(props) {
+    const keyId = toRef(props, "keyId");
+    const keyLabel = toRef(props, "keyLabel");
+    const items = toRef(props, "items");
+    const itemsKeyById = computed(() => {
+      return keyBy(items.value, keyId.value);
+    });
+
+    const panelParentsOpen = toRef(props, "panelParentsOpen");
+    const isBreadcrumbsAll = toRef(props, "isBreadcrumbsAll");
+
+    const setBreadcrumbsItem = panelParentId => {
+      return {
+        label: get(itemsKeyById.value, `${ panelParentId }.${ keyLabel.value }`),
+        panelParentId,
+      };
+    };
+
+    const breadcrumbsItems = computed(() => {
+      if (!panelParentsOpen.value.length) {
+        return [];
+      }
+      const BREADCRUMBS_ITEMS = [];
+      if (isBreadcrumbsAll.value) {
+        forEach(panelParentsOpen.value, panelParentId => {
+          BREADCRUMBS_ITEMS.push(setBreadcrumbsItem(panelParentId));
+        });
+      } else {
+        BREADCRUMBS_ITEMS.push(setBreadcrumbsItem(panelParentsOpen.value[panelParentsOpen.value.length - 1]));
+      }
+      return BREADCRUMBS_ITEMS;
+    });
+
+    return {
+      breadcrumbsItems,
+      itemsKeyById,
+    };
+  },
+  render() {
+    return h("div", {
+      class: "a_menu__breadcrumbs"
+    }, [
+      this.breadcrumbsItems.map(breadcrumbsItem => {
+        return h(AMenuBreadcrumbsItem, {
+          label: breadcrumbsItem.label,
+          panelParentId: breadcrumbsItem.panelParentId,
+        });
+      }),
+    ]);
+  },
+};

package/src/AMenu/AMenuBreadcrumbsItem.js

@@ -0,0 +1,60 @@
+import {
+  h, inject, toRef,
+} from "vue";
+
+import AIcon from "../AIcon/AIcon";
+
+import AKeysCode from "../const/AKeysCode";
+
+export default {
+  name: "AMenuBreadcrumbsItem",
+  props: {
+    label: {
+      type: [String, Number],
+      required: true,
+    },
+    panelParentId: {
+      type: [String, Number],
+      required: true,
+    },
+  },
+  setup(props,) {
+    const panelParentId = toRef(props, "panelParentId");
+    const togglePanel = inject("togglePanel");
+    const onClick = () => {
+      togglePanel({ parentId: panelParentId.value });
+    };
+
+    const onKeydown = $event => {
+      if ($event.keyCode === AKeysCode.enter ||
+        $event.keyCode === AKeysCode.space) {
+        onClick();
+        $event.stopPropagation();
+        $event.preventDefault();
+      }
+    };
+
+    return {
+      onClick,
+      onKeydown,
+    };
+  },
+  render() {
+    return h("a", {
+      class: "a_menu__breadcrumbs__item a_menu__link",
+      role: "button",
+      tabindex: 0,
+      ariaLabel: "Untermenü schließen",
+      onClick: this.onClick,
+      onKeydown: this.onKeydown,
+    }, [
+      h(AIcon, {
+        icon: "ChevronLeft",
+        class: "a_mr_2",
+      }),
+      h("span", {
+        ariaHidden: true,
+      }, this.label),
+    ]);
+  },
+};