aloha-vue 1.0.88 → 1.0.90

package/docs/package.json

@@ -13,10 +13,11 @@
   "dependencies": {
     "@popperjs/core": "2.11.6",
     "aloha-css": "1.0.51",
+    "fecha": "^4.2.3",
     "lodash-es": "^4.17.21",
     "tiny-emitter": "2.1.0",
     "vue": "3.2.31",
-    "vue-router": "4.0.14",
+    "vue-router": "4.1.5",
     "vuex": "4.0.2"
   },
   "devDependencies": {

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

@@ -137,6 +137,14 @@ export default {
           },
           parent: "ui",
         },
+        {
+          id: "datepicker",
+          label: "Datepicker",
+          to: {
+            name: "PageDatepicker",
+          },
+          parent: "ui",
+        },
         {
           id: "select",
           label: "Select",

package/docs/src/router/index.js

@@ -114,6 +114,11 @@ const ROUTES = [
     name: "PageList",
     component: () => import(/* webpackChunkName: "PageList" */ "../views/PageList/PageList.vue"),
   },
+  {
+    path: "/datepicker",
+    name: "PageDatepicker",
+    component: () => import(/* webpackChunkName: "PageDatepicker" */ "../views/PageDatepicker/PageDatepicker.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/PageDatepicker/PageDatepicker.js

@@ -0,0 +1,15 @@
+import ADatepicker from "../../../../src/ui/ADatepicker/ADatepicker";
+
+export default {
+  name: "PageDatepicker",
+  components: {
+    ADatepicker,
+  },
+  data() {
+    return {
+      model1: "",
+      model2: "",
+      model3: "",
+    };
+  },
+};

package/docs/src/views/PageDatepicker/PageDatepicker.pug

@@ -0,0 +1,11 @@
+div
+  h1 Form datepicker
+  h2 Input
+  a-datepicker(
+    id="input1"
+    v-model="model1"
+    type="text"
+    label="Input 1"
+    :required="true"
+  )
+  div model1: {{ model1 }}

package/docs/src/views/PageDatepicker/PageDatepicker.vue

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

package/docs/src/views/PageTable/PageTable.js

@@ -64,6 +64,14 @@ export default {
           slot: "get",
           filter: "boolean",
           footerPath: "obj.aloha",
+          width: 220,
+        },
+        {
+          label: "Test",
+          id: "test",
+          path: "test",
+          sortId: "test",
+          width: 200,
         },
         {
           label: "Obj2",
@@ -274,7 +282,7 @@ export default {
 
     setData() {
       const DATA = [];
-      times(1001, item => {
+      times(3, item => {
         DATA.push({
           aloha: `aloha${ item }`,
           hola: `hola ${ item }`,
@@ -282,6 +290,7 @@ export default {
           obj: {
             aloha: `ertet ${ 100 - item }`,
           },
+          test: "<div>aloha</div><div>aloha</div><div>aloha</div><div>aloha</div><div>aloha</div><div>aloha</div><div>aloha</div>",
         });
       });
       this.data = DATA;

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "aloha-vue",
   "description": "Project aloha",
-  "version": "1.0.88",
+  "version": "1.0.90",
   "author": "Ilia Brykin",
   "scripts": {
     "build-icons": "node scriptsNode/iconsSvgToJs.js bootstrap3 && node scriptsNode/iconsSvgToJs.js bootstrap-1-9-1"
@@ -10,6 +10,7 @@
     "@popperjs/core": "2.11.5",
     "aloha-css": "1.0.47",
     "axios": "^0.27.2",
+    "fecha": "^4.2.3",
     "lodash-es": "^4.17.21",
     "tiny-emitter": "2.1.0",
     "vue": "3.2.37"

package/src/AMenu/AMenu.js

@@ -16,7 +16,7 @@ import AMenuToggleAPI from "./compositionAPI/AMenuToggleAPI";
 import {
   forEach,
   get,
-  isNil,
+  isNil, keyBy,
 } from "lodash-es";
 
 export default {
@@ -71,6 +71,11 @@ export default {
   setup(props) {
     const items = toRef(props, "items");
     const keyParent = toRef(props, "keyParent");
+    const keyId = toRef(props, "keyId");
+
+    const itemsKeyById = computed(() => {
+      return keyBy(items.value, keyId.value);
+    });
 
     const itemsProParent = computed(() => {
       const MAIN = [];
@@ -102,16 +107,23 @@ export default {
     } = AMenuSearchAPI();
 
     const {
+      clickMenuLink,
       panelParentsOpen,
       togglePanel,
-    } = AMenuPanelsAPI();
+    } = AMenuPanelsAPI(props, {
+      itemsProParent,
+      itemsKeyById,
+    });
 
+    provide("clickMenuLink", clickMenuLink);
     provide("togglePanel", togglePanel);
 
     const isOpenDefault = toRef(props, "isOpenDefault");
+
     initMenuOpenOrClose(isOpenDefault.value);
 
     return {
+      itemsKeyById,
       itemsProParent,
       panelParentsOpen,
 
@@ -140,9 +152,8 @@ export default {
           "onUpdate:modelValue": this.updateModelSearch,
         }),
         h(AMenuBreadcrumbs, {
-          items: this.items,
+          itemsKeyById: this.itemsKeyById,
           isBreadcrumbsAll: this.isBreadcrumbsAll,
-          keyId: this.keyId,
           keyLabel: this.keyLabel,
           panelParentsOpen: this.panelParentsOpen,
         }),

package/src/AMenu/AMenuBreadcrumbs.js

@@ -9,25 +9,20 @@ import AMenuBreadcrumbsItem from "./AMenuBreadcrumbsItem";
 import {
   forEach,
   get,
-  keyBy,
 } from "lodash-es";
 
 
 export default {
   name: "AMenuBreadcrumbs",
   props: {
-    items: {
-      type: Array,
+    itemsKeyById: {
+      type: Object,
       required: true,
     },
     isBreadcrumbsAll: {
       type: Boolean,
       required: true,
     },
-    keyId: {
-      type: String,
-      required: true,
-    },
     keyLabel: {
       type: String,
       required: true,
@@ -38,12 +33,8 @@ export default {
     },
   },
   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 itemsKeyById = toRef(props, "itemsKeyById");
 
     const panelParentsOpen = toRef(props, "panelParentsOpen");
     const isBreadcrumbsAll = toRef(props, "isBreadcrumbsAll");
@@ -72,7 +63,6 @@ export default {
 
     return {
       breadcrumbsItems,
-      itemsKeyById,
     };
   },
   render() {

package/src/AMenu/AMenuPanelLink.js

@@ -81,7 +81,13 @@ export default {
       }
     };
 
+    const clickMenuLink = inject("clickMenuLink");
+    const clickLink = () => {
+      clickMenuLink();
+    };
+
     return {
+      clickLink,
       icon,
       label,
       onKeydown,
@@ -114,6 +120,7 @@ export default {
           class: "a_menu__link",
           to: this.item.to,
           tabindex: this.isPanelOpen ? 0 : -1,
+          onClick: this.clickLink,
         }, () => ICON_AND_TEXT) :
         h("a", {
           class: "a_menu__link a_menu__link_btn",

package/src/AMenu/compositionAPI/AMenuPanelsAPI.js

@@ -1,9 +1,29 @@
 import {
+  computed,
+  getCurrentInstance,
   ref,
+  toRef,
+  watch,
 } from "vue";
 
-export default function AMenuPanelsAPI() {
+import {
+  forEach,
+  get,
+} from "lodash-es";
+
+export default function AMenuPanelsAPI(props, {
+  itemsProParent = computed(() => ({
+    main: [],
+    children: {},
+  })),
+  itemsKeyById = computed(() => ({})),
+}) {
+  const keyParent = toRef(props, "keyParent");
+  const APP = getCurrentInstance();
+  const $router = APP.appContext.config.globalProperties.$router;
+
   const panelParentsOpen = ref([]);
+  const isMenuLinkClicked = ref(false);
 
   const togglePanel = ({ parentId }) => {
     const INDEX = panelParentsOpen.value.indexOf(parentId);
@@ -14,7 +34,62 @@ export default function AMenuPanelsAPI() {
     }
   };
 
+  const setPanelParentsOpen = ({ route = {}, panelParentsOpenLocal = [] }) => {
+    const PARENT_ID = get(route, keyParent.value);
+    if (PARENT_ID) {
+      panelParentsOpenLocal.unshift(PARENT_ID);
+      setPanelParentsOpen({ route: itemsKeyById.value[PARENT_ID], panelParentsOpenLocal });
+    }
+    return panelParentsOpenLocal;
+  };
+
+  const checkRouteInPanel = ({ routes = [], currentFullPath = "/" }) => {
+    let isRouteFound = false;
+    forEach(routes, route => {
+      if (route.to) {
+        const { fullPath } = $router.resolve(route.to);
+        if (fullPath === currentFullPath) {
+          const panelParentsOpenLocal = [];
+          panelParentsOpen.value = setPanelParentsOpen({ route, panelParentsOpenLocal });
+          isRouteFound = true;
+          return false;
+        }
+      }
+    });
+    return isRouteFound;
+  };
+
+  const checkAllRoutes = () => {
+    const FULL_PATH = $router.currentRoute.value.fullPath;
+    let isRouteFound = false;
+    isRouteFound = checkRouteInPanel({ routes: itemsProParent.value.main, currentFullPath: FULL_PATH });
+    if (isRouteFound) {
+      return;
+    }
+    forEach(itemsProParent.value.children, panelRoutes => {
+      isRouteFound = checkRouteInPanel({ routes: panelRoutes, currentFullPath: FULL_PATH });
+      if (isRouteFound) {
+        return false;
+      }
+    });
+  };
+
+  const clickMenuLink = () => {
+    isMenuLinkClicked.value = true;
+  };
+
+  watch($router.currentRoute, () => {
+    if (isMenuLinkClicked.value) {
+      isMenuLinkClicked.value = false;
+    } else {
+      checkAllRoutes();
+    }
+  }, {
+    immediate: true,
+  });
+
   return {
+    clickMenuLink,
     panelParentsOpen,
     togglePanel
   };

package/src/ATable/ATableHeaderThAction/ATableHeaderThAction.js

@@ -93,7 +93,7 @@ export default {
     return h("div", {
       class: "a_table__th a_table__cell a_table__cell_action",
       scope: "col",
-      style: this.stylesThAction,
+      // style: this.stylesThAction,
       role: "columnheader",
     }, [
       h("span", {

package/src/ATable/ATableTdAction/ATableTdAction.js

@@ -77,7 +77,7 @@ export default {
     return h("div", {
       role: "cell",
       class: "a_table__td a_table__cell a_table__cell_action",
-      style: this.stylesTdAction,
+      // style: this.stylesTdAction,
     }, [
       this.isColumnsScrollInvisibleDropdownVisible && h(ADropdown, {
         buttonClass: "a_btn a_btn_link",

package/src/ATable/compositionAPI/ScrollControlAPI.js

@@ -29,7 +29,8 @@ export default function ScrollControlAPI(props, { emit }, {
   });
   const columnsSpecialWidth = computed(() => {
     const columnMultipleActionsWidth = isMultipleActionsActive.value ? 50 : 0;
-    return columnMultipleActionsWidth + columnActionsWidthLocal.value;
+    const scrollBarWidth = 10;
+    return columnMultipleActionsWidth + columnActionsWidthLocal.value + scrollBarWidth;
   });
 
   const tableWidth = ref(undefined);
@@ -106,13 +107,13 @@ export default function ScrollControlAPI(props, { emit }, {
     setColumnsScrollInvisible();
   };
 
-
   const resizeOb = new ResizeObserver(entries => {
     // since we are observing only a single element, so we access the first element in entries array
     const RECT = entries[0].contentRect;
-
-    tableWidth.value = RECT.width;
-    checkVisibleColumns();
+    if (tableWidth.value !== RECT.width) {
+      tableWidth.value = RECT.width;
+      checkVisibleColumns();
+    }
   });
 
   onMounted(() => {
@@ -122,6 +123,7 @@ export default function ScrollControlAPI(props, { emit }, {
     resizeOb.unobserve(aTableRef.value);
   });
 
+
   return {
     aTableRef,
     changeModelIsTableWithoutScroll,

package/src/const/AKeysCode.js

@@ -1,8 +1,10 @@
 export default {
   tab: 9,
-  space: 32,
   enter: 13,
+  space: 32,
+  arrowLeft: 37,
   arrowUp: 38,
+  arrowRight: 39,
   arrowDown: 40,
   escape: 27,
 };

package/src/styles/components/ATable.scss

@@ -137,6 +137,7 @@
 
 .a_table__cell_action {
   justify-content: flex-end;
+  flex-grow: 1;
 }
 .a_table__th__dropdown_item {
   display: flex;