aloha-vue 2.3.0 → 2.4.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aloha-vue",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "description": "Aloha-vue is a JavaScript library that provides a wide range of accessible components and directives for Vue.js. Accessibility is of paramount importance to us, and we have designed all our components to meet accessibility compliance criteria. This library is a valuable tool for frontend developers and has already been used in three projects, including two large-scale ones",
   "keywords": [
     "accessibility compliance criteria",

package/scss/_base.scss

@@ -22,6 +22,7 @@
 .a_search_highlight {
   color: red;
   background-color: inherit;
+  padding: 0;
 }
 .a_popup_container,
 .a_select_container {
@@ -52,3 +53,11 @@
 * + .a_dropdown__caret {
   margin-left: 0.5rem;
 }
+
+.a_code_content {
+  overflow: auto;
+  max-height: 200px;
+  white-space: pre;
+  font-family: monospace;
+  width: 100%;
+}

package/src/compositionAPI/AFiltersAPI.js

@@ -67,8 +67,14 @@ export default function AFiltersAPI() {
     return _filterFileSize(value, { units, sourceUnits, digits });
   };
 
-  const filterJson = (value, { replacer, space = 2 } = {}) => {
-    return _filterJson(value, { replacer, space });
+  const filterJson = (value, {
+    replacer,
+    space = 2,
+    isHtml = false,
+    jsonClass = "a_code_content",
+    tag = "pre",
+  } = {}) => {
+    return _filterJson(value, { replacer, space, isHtml, jsonClass, tag });
   };
 
   const filterKeyValue = value => {

package/src/compositionAPI/APopupAPI.js

@@ -49,11 +49,11 @@ export function isCurrentPopupOpen({ id }) {
   return !!popupOpenIds.value[id];
 }
 
-function openPopup({ id }) {
+export function openPopup({ id }) {
   popupOpenIds.value[id] = true;
 }
 
-function closePopup({ id }) {
+export function closePopup({ id }) {
   if (id in popupOpenIds.value) {
     delete popupOpenIds.value[id];
   }

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

@@ -28,4 +28,47 @@ describe("filterJson", () => {
 
     expect(filterJson(circularReference)).toBe("");
   });
+
+  it("returns formatted HTML output when isHtml is true", () => {
+    const value = { key: "value" };
+    const expectedOutput = `<pre class="a_code_content">${ JSON.stringify(value, null, 2) }</pre>`;
+
+    expect(filterJson(value, { isHtml: true })).toBe(expectedOutput);
+  });
+
+  it("returns formatted HTML output with custom class", () => {
+    const value = { key: "value" };
+    const expectedOutput = `<pre class="custom_class">${ JSON.stringify(value, null, 2) }</pre>`;
+
+    expect(filterJson(value, { isHtml: true, jsonClass: "custom_class" })).toBe(expectedOutput);
+  });
+
+  it("returns formatted HTML output with custom tag", () => {
+    const value = { key: "value" };
+    const expectedOutput = `<div class="a_code_content">${ JSON.stringify(value, null, 2) }</div>`;
+
+    expect(filterJson(value, { isHtml: true, tag: "div" })).toBe(expectedOutput);
+  });
+
+  it("returns formatted HTML output with custom tag and class", () => {
+    const value = { key: "value" };
+    const expectedOutput = `<span class="custom_class">${ JSON.stringify(value, null, 2) }</span>`;
+
+    expect(filterJson(value, { isHtml: true, tag: "span", jsonClass: "custom_class" })).toBe(expectedOutput);
+  });
+
+  it("returns correctly formatted JSON when using a replacer function", () => {
+    const value = { key1: "value1", key2: "value2" };
+    const replacer = (key, val) => (key === "key1" ? undefined : val);
+    const expectedOutput = JSON.stringify(value, replacer, 2);
+
+    expect(filterJson(value, { replacer })).toBe(expectedOutput);
+  });
+
+  it("returns correctly formatted JSON with a custom space indentation", () => {
+    const value = { key: "value" };
+    const expectedOutput = JSON.stringify(value, null, 4);
+
+    expect(filterJson(value, { space: 4 })).toBe(expectedOutput);
+  });
 });

package/src/filters/filterJson.js

@@ -1,24 +1,39 @@
-import {
-  isNil,
-} from "lodash-es";
-
-/**
- * Converts a JavaScript value to a formatted JSON string.
- *
- * @param {*} value - The value to be converted to JSON
- * @param {Object} [options] - Optional parameters
- * @param {Function} [options.replacer] - A function that alters the behavior of the stringification process
- * @param {number} [options.space=2] - The number of spaces used for indentation in the resulting string
- *
- * @returns {string} The JSON string representation of the value; an empty string if the value is undefined or null, or an error occurred during the stringification process.
- */
-export default function(value, { replacer, space = 2 } = {}) {
-  if (isNil(value)) {
-    return "";
-  }
-  try {
-    return JSON.stringify(value, replacer, space);
-  } catch (e) {
-    return "";
-  }
-}
+import {
+  isNil,
+} from "lodash-es";
+
+/**
+ * Converts a JavaScript value to a formatted JSON string.
+ *
+ * @param {*} value - The value to be converted to JSON.
+ * @param {Object} [options] - Optional parameters.
+ * @param {Function} [options.replacer] - A function that alters the behavior of the stringification process.
+ * @param {number} [options.space=2] - The number of spaces used for indentation in the resulting string.
+ * @param {boolean} [options.isHtml=false] - Determines if the output should be formatted as HTML.
+ *                                          When set to false, the output is returned as a plain text string.
+ * @param {string} [options.jsonClass="a_code_content"] - The CSS class to be applied when `isHtml` is true.
+ * @param {string} [options.tag="pre"] - The HTML tag to wrap the formatted JSON string when `isHtml` is true.
+ *
+ * @returns {string} The JSON string representation of the value.
+ *                   Returns an empty string if the value is `undefined` or `null`,
+ *                   or if an error occurred during the stringification process.
+ */
+export default function(value, { replacer, space = 2, isHtml = false, jsonClass = "a_code_content", tag = "pre" } = {}) {
+  if (isNil(value)) {
+    return "";
+  }
+
+  try {
+    const RESULT_STRING = JSON.stringify(value, replacer, space);
+    if (isHtml) {
+      const CLASS = jsonClass ?
+        ` class="${ jsonClass }"` :
+        "";
+      return `<${ tag }${ CLASS }>${ RESULT_STRING }</${ tag }>`;
+    }
+
+    return RESULT_STRING;
+  } catch (e) {
+    return "";
+  }
+}

package/src/i18n/allLanguages.js

@@ -33,6 +33,7 @@ import ACloakI18n from "../ACloak/i18n/ACloakI18n";
 import ARequiredI18n from "../ui/ARequired/i18n/ARequiredI18n";
 import AInputNumberI18n from "../ui/AInputNumber/i18n/AInputNumberI18n";
 import AInputCurrencyI18n from "../ui/AInputCurrency/i18n/AInputCurrencyI18n";
+import ARouterLinkConfigI18n from "../ui/ARouterLinkConfig/i18n/ARouterLinkConfigI18n";
 
 export const ar = {
   ...arJson,
@@ -62,6 +63,7 @@ export const ar = {
   ...ARequiredI18n.ar,
   ...AInputNumberI18n.ar,
   ...AInputCurrencyI18n.ar,
+  ...ARouterLinkConfigI18n.ar,
 };
 export const de = {
   ...deJson,
@@ -91,6 +93,7 @@ export const de = {
   ...ARequiredI18n.de,
   ...AInputNumberI18n.de,
   ...AInputCurrencyI18n.de,
+  ...ARouterLinkConfigI18n.de,
 };
 export const en = {
   ...enJson,
@@ -120,6 +123,7 @@ export const en = {
   ...ARequiredI18n.en,
   ...AInputNumberI18n.en,
   ...AInputCurrencyI18n.en,
+  ...ARouterLinkConfigI18n.en,
 };
 export const es = {
   ...esJson,
@@ -149,6 +153,7 @@ export const es = {
   ...ARequiredI18n.es,
   ...AInputNumberI18n.es,
   ...AInputCurrencyI18n.es,
+  ...ARouterLinkConfigI18n.es,
 };
 export const fr = {
   ...frJson,
@@ -178,6 +183,7 @@ export const fr = {
   ...ARequiredI18n.fr,
   ...AInputNumberI18n.fr,
   ...AInputCurrencyI18n.fr,
+  ...ARouterLinkConfigI18n.fr,
 };
 export const hr = {
   ...hrJson,
@@ -207,6 +213,7 @@ export const hr = {
   ...ARequiredI18n.hr,
   ...AInputNumberI18n.hr,
   ...AInputCurrencyI18n.hr,
+  ...ARouterLinkConfigI18n.hr,
 };
 export const it = {
   ...itJson,
@@ -236,6 +243,7 @@ export const it = {
   ...ARequiredI18n.it,
   ...AInputNumberI18n.it,
   ...AInputCurrencyI18n.it,
+  ...ARouterLinkConfigI18n.it,
 };
 export const ru = {
   ...ruJson,
@@ -265,6 +273,7 @@ export const ru = {
   ...ARequiredI18n.ru,
   ...AInputNumberI18n.ru,
   ...AInputCurrencyI18n.ru,
+  ...ARouterLinkConfigI18n.ru,
 };
 
 export default {

package/src/index.js

@@ -50,6 +50,7 @@ export { default as ARadio } from "./ui/ARadio/ARadio";
 export { default as ARate } from "./ARate/ARate";
 export { default as ARequired } from "./ui/ARequired/ARequired";
 export { default as AResizer } from "./AResizer/AResizer";
+export { default as ARouterLinkConfig } from "./ui/ARouterLinkConfig/ARouterLinkConfig";
 export { default as AScale } from "./AScale/AScale";
 export { default as ASelect } from "./ui/ASelect/ASelect";
 export { default as AShowMore } from "./AShowMore/AShowMore";
@@ -107,6 +108,13 @@ export {
   default as APageTabTitleAPI,
   setBaseTitle as APageTabTitleAPI_setBaseTitle,
 } from "./compositionAPI/APageTabTitleAPI";
+export {
+  default as APopupAPI,
+  closePopup as APopupAPI_closePopup,
+  isCurrentPopupOpen as APopupAPI_isCurrentPopupOpen,
+  openPopup as APopupAPI_openPopup,
+  togglePopup as APopupAPI_togglePopup,
+} from "./compositionAPI/APopupAPI";
 export { default as UiAPI } from "./ui/compositionApi/UiAPI";
 export { default as UIExcludeRenderAttributesAPI } from "./ui/compositionApi/UIExcludeRenderAttributesAPI";
 export { default as UiStyleHideAPI } from "./ui/compositionApi/UiStyleHideAPI";
@@ -131,6 +139,7 @@ export { default as AlohaPlugin } from "./plugins/alohaPlugin";
 export { default as AMobilePlugin } from "./plugins/AMobilePlugin";
 export { default as AModalPlugin } from "./plugins/AModalPlugin";
 export { default as APageTabTitlePlugin } from "./plugins/APageTabTitlePlugin";
+export { default as ARouterLinkConfigPlugin } from "./plugins/ARouterLinkConfigPlugin";
 export { default as ASelectPlugin } from "./plugins/ASelectPlugin";
 export { default as ASpinnerPlugin } from "./plugins/ASpinnerPlugin";
 export { default as ATablePlugin } from "./plugins/ATablePlugin";
@@ -214,32 +223,33 @@ export {
   it as i18nIT,
   ru as i18nRU,
 } from "./i18n/allLanguages";
+export { default as ACheckboxI18n } from "./ui/ACheckbox/i18n/ACheckboxI18n";
 export { default as ACloakI18n } from "./ACloak/i18n/ACloakI18n";
+export { default as ADatepickerRangeI18n } from "./ui/ADatepickerRange/i18n/ADatepickerRangeI18n";
 export { default as ADisclosureI18n } from "./ADisclosure/i18n/ADisclosureI18n";
+export { default as AFieldsetI18n } from "./ui/AFieldset/i18n/AFieldsetI18n";
 export { default as AFiltersI18n } from "./AFilters/i18n/AFiltersI18n";
+export { default as AInputCurrencyI18n } from "./ui/AInputCurrency/i18n/AInputCurrencyI18n";
+export { default as AInputI18n } from "./ui/AInput/i18n/AInputI18n";
+export { default as AInputNumberI18n } from "./ui/AInputNumber/i18n/AInputNumberI18n";
+export { default as AInputNumberRangeI18n } from "./ui/AInputNumberRange/i18n/AInputNumberRangeI18n";
+export { default as AJsonI18n } from "./ui/AJson/i18n/AJsonI18n";
 export { default as ALinkCopyI18n } from "./ALinkCopy/i18n/ALinkCopyI18n";
 export { default as ALoadingI18n } from "./ALoading/i18n/ALoadingI18n";
 export { default as AMenu2I18n } from "./AMenu/i18n/AMenu2I18n";
 export { default as AModalI18n } from "./AModal/i18n/AModalI18n";
 export { default as APaginationI18n } from "./APagination/i18n/APaginationI18n";
+export { default as ARadioI18n } from "./ui/ARadio/i18n/ARadioI18n";
+export { default as ARequiredI18n } from "./ui/ARequired/i18n/ARequiredI18n";
+export { default as ARouterLinkConfigI18n } from "./ui/ARouterLinkConfig/i18n/ARouterLinkConfigI18n";
+export { default as ASelectI18n } from "./ui/ASelect/i18n/ASelectI18n";
 export { default as AShowMoreI18n } from "./AShowMore/i18n/AShowMoreI18n";
 export { default as ASpinnerI18n } from "./ASpinner/i18n/ASpinnerI18n";
+export { default as ASwitchI18n } from "./ui/ASwitch/i18n/ASwitchI18n";
 export { default as ATableI18n } from "./ATable/i18n/ATableI18n";
 export { default as AVerticalScrollI18n } from "./AVerticalScroll/i18n/AVerticalScrollI18n";
 export { default as AWizardI18n } from "./AWizard/i18n/AWizardI18n";
 export { default as Filters18n } from "./filters/i18n/Filters18n";
-export { default as ACheckboxI18n } from "./ui/ACheckbox/i18n/ACheckboxI18n";
-export { default as ADatepickerRangeI18n } from "./ui/ADatepickerRange/i18n/ADatepickerRangeI18n";
-export { default as AFieldsetI18n } from "./ui/AFieldset/i18n/AFieldsetI18n";
-export { default as AInputI18n } from "./ui/AInput/i18n/AInputI18n";
-export { default as AInputCurrencyI18n } from "./ui/AInputCurrency/i18n/AInputCurrencyI18n";
-export { default as AInputNumberI18n } from "./ui/AInputNumber/i18n/AInputNumberI18n";
-export { default as AInputNumberRangeI18n } from "./ui/AInputNumberRange/i18n/AInputNumberRangeI18n";
-export { default as AJsonI18n } from "./ui/AJson/i18n/AJsonI18n";
-export { default as ARadioI18n } from "./ui/ARadio/i18n/ARadioI18n";
-export { default as ARequiredI18n } from "./ui/ARequired/i18n/ARequiredI18n";
-export { default as ASelectI18n } from "./ui/ASelect/i18n/ASelectI18n";
-export { default as ASwitchI18n } from "./ui/ASwitch/i18n/ASwitchI18n";
 export {
   getTranslatedText,
   isPlaceholderTranslate,

package/src/plugins/ARouterLinkConfigPlugin.js

@@ -0,0 +1,77 @@
+import {
+  forEach,
+} from "lodash-es";
+
+export const routerLinkConfigPluginOptions = {
+  propsDefault: {
+    classColumn: "a_column a_column_12",
+    classColumns: "a_columns a_columns_count_12 a_columns_gap_y_1",
+    helpTextParam: "_A_ROUTER_LINK_CONFIG_HELP_TEXT_PARAM_",
+    helpTextRoute: "_A_ROUTER_LINK_CONFIG_HELP_TEXT_ROUTE_",
+    helpTextQuery: "_A_ROUTER_LINK_CONFIG_HELP_TEXT_QUERY_",
+    helpTextTarget: "_A_ROUTER_LINK_CONFIG_HELP_TEXT_TARGET_",
+    keyIdRoute: "name",
+    keyLabelRoute: "path",
+    labelParam: "_A_ROUTER_LINK_CONFIG_LABEL_PARAM_",
+    labelQuery: "_A_ROUTER_LINK_CONFIG_LABEL_QUERY_",
+    labelRoute: "_A_ROUTER_LINK_CONFIG_LABEL_ROUTE_",
+    labelTarget: "_A_ROUTER_LINK_CONFIG_LABEL_TARGET_",
+    routes: [],
+    sortOrderRoute: "asc",
+    targets: [
+      {
+        id: "_blank",
+        label: "_A_TARGET_BLANK_",
+      },
+      {
+        id: "_self",
+        label: "_A_TARGET_SELF_",
+      },
+      {
+        id: "_parent",
+        label: "_A_TARGET_PARENT_",
+      },
+      {
+        id: "_top",
+        label: "_A_TARGET_TOP_",
+      },
+    ],
+  },
+};
+
+function setRoutes({ routes = [], excludedPathRoutes = [] }) {
+  const ROUTES = [];
+  const EXCLUDED_PATH_ROUTES_MAP = {};
+  if (excludedPathRoutes.length) {
+    forEach(excludedPathRoutes, path => {
+      EXCLUDED_PATH_ROUTES_MAP[path] = true;
+    });
+  }
+  forEach(routes, route => {
+    const PATH = route.path;
+    if (route.name &&
+      !EXCLUDED_PATH_ROUTES_MAP[PATH]) {
+      ROUTES.push({
+        path: route.path,
+        name: route.name,
+        meta: route.meta,
+      });
+    }
+  });
+
+  return ROUTES;
+}
+
+
+export default {
+  install: (app, {
+    propsDefault = {},
+    excludedPathRoutes = [],
+  } = {}) => {
+    routerLinkConfigPluginOptions.propsDefault = {
+      ...routerLinkConfigPluginOptions.propsDefault,
+      ...propsDefault,
+      routes: setRoutes({ routes: propsDefault.routes, excludedPathRoutes }),
+    };
+  },
+};