aloha-vue 1.2.76 → 1.2.78

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.76",
+  "version": "1.2.78",
   "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/AMenu2.js

@@ -62,7 +62,7 @@ export default {
     buttonToggleClass: {
       type: [String, Object],
       required: false,
-      default: "a_btn a_btn_secondary",
+      default: "a_btn a_btn_transparent_secondary a_btn_small",
     },
     buttonToggleProps: {
       type: Object,

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/styles/components/AMenu2.scss

@@ -14,18 +14,23 @@
 .a_menu_2 {
   --a_menu_2_width: var(--a_menu_2_width_expanded);
   --a_menu_2_top: 0;
-  --a_menu_2_navbar_top_height: 65px;
-  --a_menu_2_navbar_top_padding: .5rem;
+  --a_menu_2_navbar_top_height: 50px;
+  --a_menu_2_navbar_top_padding: .7rem .5rem .5rem .5rem;;
   --a_menu_2_navbar_top_margin_bottom: .5rem;
   --a_menu_2_background: var(--a_color_white);
   --a_menu_2_border_color: var(--a_color_gray_300);
+  --a_menu_2_box_shadow_color: var(--a_color_gray_600);
+  --a_menu_2_box_shadow_size: 2px 0 6px 1px;
   --a_menu_2_panel_child_offset: 100%;
   --a_menu_2_panel_parent_offset: -30%;
   --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_panel_secondary_bg: var(--a_color_white);
+  --a_menu_2_panel_main_link_hover_color: var(--a_color_gray_900);
+  --a_menu_2_panel_main_link_hover_bg: var(--a_color_gray_300);
   --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_link_hover_bg: var(--a_color_gray_300);
   --a_menu_2_listitem_padding: .3rem;
   --a_menu_2_listitem_panel_secondary_padding_x: .6rem;
   --a_menu_2_listitem_panel_secondary_padding_y: .3rem;
@@ -45,7 +50,7 @@
   --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_height: auto;
   --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;
@@ -69,6 +74,7 @@
   padding: 0;
   border-right: 1px solid var(--a_menu_2_border_color);
   z-index: 2;
+  box-shadow: var(--a_menu_2_box_shadow_size) var(--a_menu_2_box_shadow_color);
 }
 .a_menu_2__page {
   background-color: var(--a_menu_2_page_bg);
@@ -152,7 +158,7 @@
   }
   &:hover {
     outline: 0;
-    color: var(--a_menu_2_link_color);
+    color: var(--a_menu_2_link_hover_color);
     background-color: var(--a_menu_2_link_hover_bg);
   }
   &.a_menu_2__link_active {
@@ -251,13 +257,13 @@
 }
 
 .a_menu_2__btn_toggle {
-  --a_menu_2_btn_toggle_width: 50px;
-  --a_menu_2_btn_toggle_height: 50px;
-  --a_menu_2_btn_toggle_bar_width: 22px;
+  --a_menu_2_btn_toggle_width: 38px;
+  --a_menu_2_btn_toggle_height: 38px;
+  --a_menu_2_btn_toggle_bar_width: 18px;
   --a_menu_2_btn_toggle_bar_height: 2px;
-  --a_menu_2_btn_toggle_bar_1_top: 18px;
+  --a_menu_2_btn_toggle_bar_1_top: 12px;
   --a_menu_2_btn_toggle_bar_2_top: calc(var(--a_menu_2_btn_toggle_height) / 2 - var(--a_menu_2_btn_toggle_bar_height) / 2);
-  --a_menu_2_btn_toggle_bar_3_top: 30px;
+  --a_menu_2_btn_toggle_bar_3_top: 24px;
   --a_menu_2_btn_toggle_bar_bg: var(--a_btn_color, var(--a_color_white));
 
   height: var(--a_menu_2_btn_toggle_height);
@@ -419,6 +425,7 @@
 }
 .a_menu_2__panel_secondary {
   display: none;
+  background-color: var(--a_menu_2_panel_secondary_bg);
   &.a_menu_2__panel_opened {
     display: block;
     border-left: var(--a_menu_2_submenu_border_width) solid var(--a_menu_2_submenu_open_bg);
@@ -451,6 +458,10 @@
 }
 .a_menu_2__panel_main {
   position: relative;
+  .a_menu_2__link:hover {
+    --a_menu_2_link_hover_color: var(--a_menu_2_panel_main_link_hover_color);
+    --a_menu_2_link_hover_bg: var(--a_menu_2_panel_main_link_hover_bg);
+  }
 }
 
 // menu closed

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>`;
+}