aloha-vue 1.2.75 → 1.2.77

package/docs/src/views/Functions/PageFilterLimitTo/i18n/de.json

@@ -2,5 +2,5 @@
   "_PAGE_FILTER_LIMIT_TO_ARGUMENTS_TEXT_": "Der Eingangsstring, der beschnitten werden soll",
   "_PAGE_FILTER_LIMIT_TO_ARGUMENTS_LIMIT_": "Die maximale Länge des zurückgegebenen Strings",
   "_PAGE_FILTER_LIMIT_TO_ARGUMENTS_MAX_THREE_DOTS_": "Gibt an, ob maximal drei Punkten am Ende des Strings angezeigt werden",
-  "_PAGE_FILTER_LIMIT_TO_DESCRIPTION_": "Die Funktion <strong>filterLimitTo</strong> dient dazu, einen Eingangsstring auf eine bestimmte maximale Länge zu beschränken und optional eine spezielle Punktelogik am Ende des Strings anzuwenden."
+  "_PAGE_FILTER_LIMIT_TO_DESCRIPTION_": "Die Funktion <strong>filterLimitTo</strong> dient dazu, einen Eingabestring auf eine bestimmte maximale Länge zu begrenzen und optional eine spezielle Logik für Auslassungspunkte am Ende des Strings anzuwenden."
 }

package/docs/src/views/Functions/PageFilterLimitTo/i18n/ru.json

@@ -2,5 +2,5 @@
   "_PAGE_FILTER_LIMIT_TO_ARGUMENTS_TEXT_": "Входная строка, которую нужно обрезать",
   "_PAGE_FILTER_LIMIT_TO_ARGUMENTS_LIMIT_": "Максимальная длина возвращаемой строки",
   "_PAGE_FILTER_LIMIT_TO_ARGUMENTS_MAX_THREE_DOTS_": "Определяет, должны ли отображаться максимум три точки в конце строки",
-  "_PAGE_FILTER_LIMIT_TO_DESCRIPTION_": "Функция <strong>filterLimitTo</strong> предназначена для ограничения входной строки определенной максимальной длиной и по желанию применения специальной логики точек в конце строки."
+  "_PAGE_FILTER_LIMIT_TO_DESCRIPTION_": "Функция <strong>filterLimitTo</strong> предназначена для ограничения входной строки определенной максимальной длиной и, по желанию, применения специальной логики многоточия в конце строки."
 }

package/docs/src/views/PageNotification/PageNotification.pug

@@ -8,5 +8,9 @@ div
     :text="'_ADD_NOTIFICATION_{{type}}_'"
     :extra="{type: type}"
     @click="addNotificationLocal(type)"
-    text="Open Modal"
   )
+  .a_mt_4
+    a-button.a_btn.a_btn_primary(
+      text="Object"
+      @click="addNotificationLocal({ sdf: 'x', abc: 'y', aloha: 'z' })"
+    )

package/jest.config.js

@@ -3,14 +3,16 @@
 
 module.exports = {
   coverageDirectory: "coverage",
-  moduleNameMapper: {
-    "@/(.*)$": "<rootDir>/src/$1"
-  },
-  testEnvironment: "node",
-  transform: {
-    "^.+\\.jsx?$": "babel-jest"
-  },
   transformIgnorePatterns: [
     "<rootDir>/node_modules/(?!lodash-es)"
   ],
+  globals: {},
+  testEnvironment: "jsdom",
+  testEnvironmentOptions: {
+    customExportConditions: ["node", "node-addons"],
+  },
+  transform: {
+    "^.+\\js$": "babel-jest"
+  },
+  moduleFileExtensions: ["vue", "js", "json", "jsx", "ts", "tsx", "node"]
 };

package/package.json

@@ -14,7 +14,7 @@
     "Vue.js"
   ],
   "homepage": "https://github.com/ilia-brykin/aloha/#README.md",
-  "version": "1.2.75",
+  "version": "1.2.77",
   "author": {
     "name": "Ilia Brykin",
     "email": "brykin.ilia@gmail.com"
@@ -55,6 +55,7 @@
     "@vue/test-utils": "^2.4.3",
     "eslint-plugin-jest": "^27.6.1",
     "jest": "^29.7.0",
+    "jest-environment-jsdom": "^29.7.0",
     "lodash": "^4.17.21",
     "@babel/cli": "^7.23.4",
     "@babel/core": "^7.23.7",

package/src/AList/AListItem/AListItem.js

@@ -98,7 +98,7 @@ export default {
         withDirectives(h(this.labelTag), [
           [ASafeHtml, this.label]
         ]),
-      this.hasChildren && h(AList, {
+      this.hasChildren ? h(AList, {
         classItem: this.classItem,
         classMain: this.classMain,
         data: this.children,
@@ -110,7 +110,7 @@ export default {
         labelTag: this.labelTag,
         listItemTag: this.listItemTag,
         tag: this.tag,
-      }, this.$slots),
+      }, this.$slots) : "",
     ]);
   },
 };

package/src/AList/__tests__/AList.test.js

@@ -0,0 +1,30 @@
+import {
+  mount,
+} from "@vue/test-utils";
+
+import AList from "../AList";
+
+describe("AList", () => {
+  test("displays message", () => {
+    const ITEMS = [
+      { label: "label 1" },
+      { label: "label 2" },
+      { label: "label 3" },
+      { label: "label 4" },
+    ];
+
+    const wrapper = mount(AList, {
+      props: {
+        data: ITEMS,
+        keyLabel: "label",
+      },
+    });
+    console.log("component.text()", wrapper.text());
+
+    // Assert the rendered text of the component
+    expect(wrapper.findAll("li")).toHaveLength(4);
+    expect(wrapper.text()).toContain("label 1label 2label 3label 4");
+    expect(wrapper.html({ raw: true })).toBe("<ul><li><span>label 1</span></li><li><span>label 2</span></li><li><span>label 3</span></li><li><span>label 4</span></li></ul>");
+  });
+});
+

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/compositionAPI/ANotificationAPI.js

@@ -3,8 +3,12 @@ import {
   ref,
 } from "vue";
 
+import {
+  createListFromObject,
+} from "../utils/utils";
 import {
   isNil,
+  isPlainObject,
   values,
 } from "lodash-es";
 
@@ -28,13 +32,17 @@ export function setNotificationTimeout(timeout) {
   notificationTimeout = timeout;
 }
 
-export function addNotification({ text, type = "success", timeout, extra }) {
+export function addNotification({ text, type = "success", timeout, extra, useValuesFromObject = true }) {
   const TIMEOUT_LOCAL = isNil(timeout) ? notificationTimeout : timeout;
   const CURRENT_INDEX = notificationsCount;
   const TYPE = type === "error" ? "danger" : type;
+  let textLocal = text;
+  if (isPlainObject(text) && useValuesFromObject) {
+    textLocal = createListFromObject(text); // TODO: filterList
+  }
 
   notificationsObj.value[CURRENT_INDEX] = {
-    text,
+    text: textLocal,
     type: TYPE,
     index: CURRENT_INDEX,
     extra,

package/src/filters/__tests__/filterFileSize.test.js

@@ -2,31 +2,38 @@ import filterFileSize from "../filterFileSize.js";
 
 describe("filterFileSize", () => {
   test("default", () => {
-     expect(filterFileSize(1024)).toBe("1,00 _A_FILE_SIZE_KB_");
-     expect(filterFileSize(0)).toBe("0,00 _A_FILE_SIZE_KB_");
-     expect(filterFileSize(500)).toBe("0,49 _A_FILE_SIZE_KB_");
-     expect(filterFileSize(504547643)).toBe("492.722,31 _A_FILE_SIZE_KB_");
+    expect(filterFileSize(1024)).toBe("1,00 _A_FILE_SIZE_KB_");
+    expect(filterFileSize(0)).toBe("0,00 _A_FILE_SIZE_KB_");
+    expect(filterFileSize(500)).toBe("0,49 _A_FILE_SIZE_KB_");
+    expect(filterFileSize(504547643)).toBe("492.722,31 _A_FILE_SIZE_KB_");
   });
 
   test("units", () => {
-     expect(filterFileSize(1048576, { units: "mb" })).toBe("1,00 _A_FILE_SIZE_MB_");
-     expect(filterFileSize(0, { units: "mb" })).toBe("0,00 _A_FILE_SIZE_MB_");
-     expect(filterFileSize(9226889999, { units: "gb" })).toBe("8,59 _A_FILE_SIZE_GB_");
-     expect(filterFileSize(1024, { units: "" })).toBe("1,00 _A_FILE_SIZE_KB_");
-  })
+    expect(filterFileSize(1048576, { units: "mb" })).toBe("1,00 _A_FILE_SIZE_MB_");
+    expect(filterFileSize(0, { units: "mb" })).toBe("0,00 _A_FILE_SIZE_MB_");
+    expect(filterFileSize(9226889999, { units: "gb" })).toBe("8,59 _A_FILE_SIZE_GB_");
+    expect(filterFileSize(1024, { units: "" })).toBe("1,00 _A_FILE_SIZE_KB_");
+    expect(filterFileSize(0, { units: "" })).toBe("0,00 _A_FILE_SIZE_B_");
+  });
 
   test("sourceUnits", () => {
-     expect(filterFileSize(1, { units: "mb", sourceUnits: "mb"})).toBe("1,00 _A_FILE_SIZE_MB_");
-     expect(filterFileSize(1, { units: "kb", sourceUnits: "gb"})).toBe("1.048.576,00 _A_FILE_SIZE_KB_");
-     expect(filterFileSize(0, { sourceUnits: "mb" })).toBe("0,00 _A_FILE_SIZE_KB_");
-     expect(filterFileSize(1024, { sourceUnits: "b" })).toBe("1,00 _A_FILE_SIZE_KB_");
-     expect(filterFileSize(12, { units: "tb", sourceUnits: "pb" })).toBe("12.288,00 _A_FILE_SIZE_TB_");
-  })
+    expect(filterFileSize(1, { units: "mb", sourceUnits: "mb" })).toBe("1,00 _A_FILE_SIZE_MB_");
+    expect(filterFileSize(1, { units: "kb", sourceUnits: "gb" })).toBe("1.048.576,00 _A_FILE_SIZE_KB_");
+    expect(filterFileSize(0, { sourceUnits: "mb" })).toBe("0,00 _A_FILE_SIZE_KB_");
+    expect(filterFileSize(1024, { sourceUnits: "b" })).toBe("1,00 _A_FILE_SIZE_KB_");
+    expect(filterFileSize(12, { units: "tb", sourceUnits: "pb" })).toBe("12.288,00 _A_FILE_SIZE_TB_");
+  });
+
   test("digits", () => {
-     expect(filterFileSize(1024, { digits: 0})).toBe("1 _A_FILE_SIZE_KB_");
-     expect(filterFileSize(500, { digits: 1})).toBe("0,5 _A_FILE_SIZE_KB_");
-  })
+    expect(filterFileSize(1024, { digits: 0 })).toBe("1 _A_FILE_SIZE_KB_");
+    expect(filterFileSize(500, { digits: 1 })).toBe("0,5 _A_FILE_SIZE_KB_");
+  });
+
   test("combined", () => {
-      expect(filterFileSize(133889, { units: "tb", sourceUnits: "mb", digits: 3})).toBe("0,128 _A_FILE_SIZE_TB_");
+    expect(filterFileSize(133889, { units: "tb", sourceUnits: "mb", digits: 3 })).toBe("0,128 _A_FILE_SIZE_TB_");
+  });
+
+  test("value (String)", () => {
+    expect(filterFileSize("1024.1")).toBe("1,00 _A_FILE_SIZE_KB_");
   });
-});
+});

package/src/filters/filterFileSize.js

@@ -1,9 +1,10 @@
-import filterCurrency from "./filterCurrency";
+import filterFloat from "./filterFloat";
 import {
   getTranslatedText,
 } from "../ATranslation/compositionAPI/UtilsAPI";
 import {
-  isNumber,
+  isNaN,
+  toNumber,
   toUpper,
 } from "lodash-es";
 
@@ -20,26 +21,34 @@ export default function(value, { units = "kb", sourceUnits = "b", digits = 2 } =
     "zb",
     "yb",
   ];
+  const VALUE_NUMBER = toNumber(value);
+  if (isNaN(VALUE_NUMBER)) {
+    return "";
+  }
+
   const INDEX_SOURCE_UNITS = UNITS_ORDER.indexOf(sourceUnits);
   let indexUnits = UNITS_ORDER.indexOf(units);
   if (INDEX_SOURCE_UNITS === -1) {
     return "";
   }
-  const VALUE_IN_BYTES = value * Math.pow(KB, INDEX_SOURCE_UNITS);
+  const VALUE_IN_BYTES = VALUE_NUMBER * Math.pow(KB, INDEX_SOURCE_UNITS);
   if (indexUnits === -1) {
     indexUnits = Math.floor(Math.log(VALUE_IN_BYTES) / Math.log(KB));
+    if (indexUnits < 0) {
+      indexUnits = 0;
+    }
     units = UNITS_ORDER[indexUnits];
   }
 
   const UNITS_TRANSLATED = getTranslatedText({ placeholder: `_A_FILE_SIZE_${ toUpper(units) }_` });
 
-  if (!isNumber(value) || value === 0) {
-    return filterCurrency(0, { suffix: UNITS_TRANSLATED, digits });
+  if (VALUE_NUMBER === 0) {
+    return filterFloat(0, { suffix: UNITS_TRANSLATED, digits });
   }
   if (INDEX_SOURCE_UNITS === indexUnits) {
-    return filterCurrency(value, { suffix: UNITS_TRANSLATED, digits });
+    return filterFloat(VALUE_NUMBER, { suffix: UNITS_TRANSLATED, digits });
   }
   const size = VALUE_IN_BYTES / Math.pow(KB, Math.abs(indexUnits));
 
-  return filterCurrency(size, { suffix: UNITS_TRANSLATED, digits });
+  return filterFloat(size, { suffix: UNITS_TRANSLATED, digits });
 }

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);
 }

package/src/utils/utils.js

@@ -65,3 +65,13 @@ export function isArrayOfArrays(array) {
 
   return every(array, isArray);
 }
+
+export function createListFromObject(obj) { // TODO: filterList, soll gelöscht werden
+  const keys = Object.keys(obj);
+  if (keys.length === 0) {
+    return "";
+  }
+
+  const items = keys.map(key => `<li>${ obj[key] }</li>`).join("");
+  return `<ul class="a_list_without_styles">${ items }</ul>`;
+}