aloha-vue 2.74.0 → 2.75.0

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

@@ -1,27 +1,27 @@
-import {
-  describe,
-  expect,
-  it,
-} from "@jest/globals";
-
-import filterPropertyByValue from "../filterPropertyByValue";
-
-describe("Filter property by value", () => {
-  it("Returns the mapped value if it exists", () => {
-    const mapping = { 20: "twenty" };
-
-    expect(filterPropertyByValue("20", { mapping })).toEqual("twenty");
-  });
-
-  it("Returns the defaultValue if the value does not exist in the mapping", () => {
-    const mapping = { 30: "thirty" };
-
-    expect(filterPropertyByValue("20", { mapping, defaultValue: "default" })).toEqual("default");
-  });
-
-  it("Returns an empty string if the value does not exist in the mapping and no defaultValue is set", () => {
-    const mapping = { 30: "thirty" };
-
-    expect(filterPropertyByValue("20", { mapping })).toEqual("");
-  });
-});
+import {
+  describe,
+  expect,
+  it,
+} from "vitest";
+
+import filterPropertyByValue from "../filterPropertyByValue";
+
+describe("Filter property by value", () => {
+  it("Returns the mapped value if it exists", () => {
+    const mapping = { 20: "twenty" };
+
+    expect(filterPropertyByValue("20", { mapping })).toEqual("twenty");
+  });
+
+  it("Returns the defaultValue if the value does not exist in the mapping", () => {
+    const mapping = { 30: "thirty" };
+
+    expect(filterPropertyByValue("20", { mapping, defaultValue: "default" })).toEqual("default");
+  });
+
+  it("Returns an empty string if the value does not exist in the mapping and no defaultValue is set", () => {
+    const mapping = { 30: "thirty" };
+
+    expect(filterPropertyByValue("20", { mapping })).toEqual("");
+  });
+});

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

@@ -1,129 +1,129 @@
-import {
-  describe,
-  expect,
-  it,
-} from "@jest/globals";
-
-import filterSearchHighlight from "../filterSearchHighlight";
-
-describe("filterSearchHighlight function", () => {
-  // test focuses on a single use case
-  it("should return empty string when the value provided is non truthy", () => {
-    const result = filterSearchHighlight(null, {
-      searchModel: "",
-      searchClass: "a_search_highlight",
-    });
-    expect(result).toBe("");
-  });
-
-  it("should return original value when searchModel is empty, undefined or null", () => {
-    let result = filterSearchHighlight("test value", {
-      searchModel: "",
-      searchClass: "a_search_highlight",
-    });
-    expect(result).toBe("test value");
-
-    result = filterSearchHighlight("test value", {
-      searchModel: undefined,
-      searchClass: "a_search_highlight",
-    });
-    expect(result).toBe("test value");
-
-    result = filterSearchHighlight("test value", {
-      searchModel: null,
-      searchClass: "a_search_highlight",
-    });
-    expect(result).toBe("test value");
-  });
-
-  it("should return value with replaced searchModel content wrapped in mark with searchClass, when searchModel is provided", () => {
-    let result = filterSearchHighlight("test searchModel", {
-      searchModel: "searchModel",
-      searchClass: "test",
-    });
-    expect(result).toBe("test <mark class=\"test\">searchModel</mark>");
-
-    result = filterSearchHighlight("test searchModel", {
-      searchModel: "searchModel",
-    });
-    expect(result).toBe("test <mark class=\"a_search_highlight\">searchModel</mark>");
-  });
-
-  // Test for `tag` argument
-  it("should wrap matched text in the specified HTML tag", () => {
-    const result = filterSearchHighlight("Aloha Vue", {
-      searchModel: "Vue",
-      tag: "strong",
-    });
-    expect(result).toBe("Aloha <strong class=\"a_search_highlight\">Vue</strong>");
-  });
-
-  it("should use the default mark tag if tag is not provided", () => {
-    const result = filterSearchHighlight("Aloha Vue", {
-      searchModel: "Vue",
-    });
-    expect(result).toBe("Aloha <mark class=\"a_search_highlight\">Vue</mark>");
-  });
-
-  // Test for `attributes` argument
-  it("should add extra attributes to the tag", () => {
-    const result = filterSearchHighlight("Aloha Vue", {
-      searchModel: "Vue",
-      attributes: ["data-aloha=\"search\"", "title=\"Highlight\""],
-    });
-    expect(result).toBe("Aloha <mark class=\"a_search_highlight\" data-aloha=\"search\" title=\"Highlight\">Vue</mark>");
-  });
-
-  // Test for `caseSensitive` argument
-  it("should replace text case-sensitively when caseSensitive is true", () => {
-    const result = filterSearchHighlight("Aloha Vue vue", {
-      searchModel: "Vue",
-      caseSensitive: true,
-    });
-    expect(result).toBe("Aloha <mark class=\"a_search_highlight\">Vue</mark> vue");
-  });
-
-  it("should replace text case-insensitively by default", () => {
-    const result = filterSearchHighlight("Aloha Vue vue", {
-      searchModel: "Vue",
-    });
-    expect(result).toBe("Aloha <mark class=\"a_search_highlight\">Vue</mark> <mark class=\"a_search_highlight\">vue</mark>");
-  });
-});
-
-describe("filterSearchHighlight with isHtml=true", () => {
-  it("should highlight 'Vue' inside strong tag and ignore href attribute", () => {
-    const input = "Aloha <strong>Vue</strong> is a <a href=\"https://vue.com\">framework</a>";
-    const result = filterSearchHighlight(input, { searchModel: "vue", isHtml: true });
-
-    expect(result).toBe("Aloha <strong><mark class=\"a_search_highlight\">Vue</mark></strong> is a <a href=\"https://vue.com\">framework</a>");
-  });
-
-  it("should highlight multiple occurrences of 'Vue' across different tags", () => {
-    const input = "<div><p>Vue is amazing.</p><span>Vue framework</span></div>";
-    const result = filterSearchHighlight(input, { searchModel: "Vue", isHtml: true });
-
-    expect(result).toBe("<div><p><mark class=\"a_search_highlight\">Vue</mark> is amazing.</p><span><mark class=\"a_search_highlight\">Vue</mark> framework</span></div>");
-  });
-
-  it("should not break HTML structure when highlighting text", () => {
-    const input = "<div><h1>Vue.js</h1><p>This is a Vue framework.</p></div>";
-    const result = filterSearchHighlight(input, { searchModel: "Vue", isHtml: true });
-
-    expect(result).toBe("<div><h1><mark class=\"a_search_highlight\">Vue</mark>.js</h1><p>This is a <mark class=\"a_search_highlight\">Vue</mark> framework.</p></div>");
-  });
-
-  it("should NOT highlight 'Vue.js' if it is split across multiple tags", () => {
-    const input = "<p>Welcome to <strong>Vue</strong><span>.js</span> world.</p>";
-    const result = filterSearchHighlight(input, { searchModel: "Vue.js", isHtml: true });
-
-    expect(result).toBe("<p>Welcome to <strong>Vue</strong><span>.js</span> world.</p>");
-  });
-
-  it("should NOT highlight text inside HTML attributes", () => {
-    const input = "<a href=\"https://vue.com\" title=\"Vue framework\">Click here</a>";
-    const result = filterSearchHighlight(input, { searchModel: "Vue", isHtml: true });
-
-    expect(result).toBe("<a href=\"https://vue.com\" title=\"Vue framework\">Click here</a>");
-  });
-});
+import {
+  describe,
+  expect,
+  it,
+} from "vitest";
+
+import filterSearchHighlight from "../filterSearchHighlight";
+
+describe("filterSearchHighlight function", () => {
+  // test focuses on a single use case
+  it("should return empty string when the value provided is non truthy", () => {
+    const result = filterSearchHighlight(null, {
+      searchModel: "",
+      searchClass: "a_search_highlight",
+    });
+    expect(result).toBe("");
+  });
+
+  it("should return original value when searchModel is empty, undefined or null", () => {
+    let result = filterSearchHighlight("test value", {
+      searchModel: "",
+      searchClass: "a_search_highlight",
+    });
+    expect(result).toBe("test value");
+
+    result = filterSearchHighlight("test value", {
+      searchModel: undefined,
+      searchClass: "a_search_highlight",
+    });
+    expect(result).toBe("test value");
+
+    result = filterSearchHighlight("test value", {
+      searchModel: null,
+      searchClass: "a_search_highlight",
+    });
+    expect(result).toBe("test value");
+  });
+
+  it("should return value with replaced searchModel content wrapped in mark with searchClass, when searchModel is provided", () => {
+    let result = filterSearchHighlight("test searchModel", {
+      searchModel: "searchModel",
+      searchClass: "test",
+    });
+    expect(result).toBe("test <mark class=\"test\">searchModel</mark>");
+
+    result = filterSearchHighlight("test searchModel", {
+      searchModel: "searchModel",
+    });
+    expect(result).toBe("test <mark class=\"a_search_highlight\">searchModel</mark>");
+  });
+
+  // Test for `tag` argument
+  it("should wrap matched text in the specified HTML tag", () => {
+    const result = filterSearchHighlight("Aloha Vue", {
+      searchModel: "Vue",
+      tag: "strong",
+    });
+    expect(result).toBe("Aloha <strong class=\"a_search_highlight\">Vue</strong>");
+  });
+
+  it("should use the default mark tag if tag is not provided", () => {
+    const result = filterSearchHighlight("Aloha Vue", {
+      searchModel: "Vue",
+    });
+    expect(result).toBe("Aloha <mark class=\"a_search_highlight\">Vue</mark>");
+  });
+
+  // Test for `attributes` argument
+  it("should add extra attributes to the tag", () => {
+    const result = filterSearchHighlight("Aloha Vue", {
+      searchModel: "Vue",
+      attributes: ["data-aloha=\"search\"", "title=\"Highlight\""],
+    });
+    expect(result).toBe("Aloha <mark class=\"a_search_highlight\" data-aloha=\"search\" title=\"Highlight\">Vue</mark>");
+  });
+
+  // Test for `caseSensitive` argument
+  it("should replace text case-sensitively when caseSensitive is true", () => {
+    const result = filterSearchHighlight("Aloha Vue vue", {
+      searchModel: "Vue",
+      caseSensitive: true,
+    });
+    expect(result).toBe("Aloha <mark class=\"a_search_highlight\">Vue</mark> vue");
+  });
+
+  it("should replace text case-insensitively by default", () => {
+    const result = filterSearchHighlight("Aloha Vue vue", {
+      searchModel: "Vue",
+    });
+    expect(result).toBe("Aloha <mark class=\"a_search_highlight\">Vue</mark> <mark class=\"a_search_highlight\">vue</mark>");
+  });
+});
+
+describe("filterSearchHighlight with isHtml=true", () => {
+  it("should highlight 'Vue' inside strong tag and ignore href attribute", () => {
+    const input = "Aloha <strong>Vue</strong> is a <a href=\"https://vue.com\">framework</a>";
+    const result = filterSearchHighlight(input, { searchModel: "vue", isHtml: true });
+
+    expect(result).toBe("Aloha <strong><mark class=\"a_search_highlight\">Vue</mark></strong> is a <a href=\"https://vue.com\">framework</a>");
+  });
+
+  it("should highlight multiple occurrences of 'Vue' across different tags", () => {
+    const input = "<div><p>Vue is amazing.</p><span>Vue framework</span></div>";
+    const result = filterSearchHighlight(input, { searchModel: "Vue", isHtml: true });
+
+    expect(result).toBe("<div><p><mark class=\"a_search_highlight\">Vue</mark> is amazing.</p><span><mark class=\"a_search_highlight\">Vue</mark> framework</span></div>");
+  });
+
+  it("should not break HTML structure when highlighting text", () => {
+    const input = "<div><h1>Vue.js</h1><p>This is a Vue framework.</p></div>";
+    const result = filterSearchHighlight(input, { searchModel: "Vue", isHtml: true });
+
+    expect(result).toBe("<div><h1><mark class=\"a_search_highlight\">Vue</mark>.js</h1><p>This is a <mark class=\"a_search_highlight\">Vue</mark> framework.</p></div>");
+  });
+
+  it("should NOT highlight 'Vue.js' if it is split across multiple tags", () => {
+    const input = "<p>Welcome to <strong>Vue</strong><span>.js</span> world.</p>";
+    const result = filterSearchHighlight(input, { searchModel: "Vue.js", isHtml: true });
+
+    expect(result).toBe("<p>Welcome to <strong>Vue</strong><span>.js</span> world.</p>");
+  });
+
+  it("should NOT highlight text inside HTML attributes", () => {
+    const input = "<a href=\"https://vue.com\" title=\"Vue framework\">Click here</a>";
+    const result = filterSearchHighlight(input, { searchModel: "Vue", isHtml: true });
+
+    expect(result).toBe("<a href=\"https://vue.com\" title=\"Vue framework\">Click here</a>");
+  });
+});

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

@@ -1,38 +1,38 @@
-import {
-  describe,
-  expect,
-  it,
-} from "@jest/globals";
-
-import filterUpperCase from "../filterUpperCase";
-
-describe("filterUpperCase", () => {
-  it("should convert a string to lowercase", () => {
-    expect(filterUpperCase("--Foo-Bar--")).toBe("--FOO-BAR--");
-    expect(filterUpperCase("fooBar")).toBe("FOOBAR");
-    expect(filterUpperCase("__FOO_BAR__")).toBe("__FOO_BAR__");
-  });
-
-  it("should handle empty strings", () => {
-    expect(filterUpperCase("")).toBe("");
-  });
-
-  it("should handle strings with no alphabetic characters", () => {
-    expect(filterUpperCase("12345")).toBe("12345");
-    expect(filterUpperCase("!@#$%")).toBe("!@#$%");
-  });
-
-  it("should handle mixed case strings", () => {
-    expect(filterUpperCase("FoObAr")).toBe("FOOBAR");
-    expect(filterUpperCase("HELLOworld")).toBe("HELLOWORLD");
-  });
-
-  it("should handle strings with spaces", () => {
-    expect(filterUpperCase("Hello World")).toBe("HELLO WORLD");
-    expect(filterUpperCase(" foo bar ")).toBe(" FOO BAR ");
-  });
-
-  it("should return the same string if already in uppercase", () => {
-    expect(filterUpperCase("ALREADY UPPERCASE")).toBe("ALREADY UPPERCASE");
-  });
-});
+import {
+  describe,
+  expect,
+  it,
+} from "vitest";
+
+import filterUpperCase from "../filterUpperCase";
+
+describe("filterUpperCase", () => {
+  it("should convert a string to lowercase", () => {
+    expect(filterUpperCase("--Foo-Bar--")).toBe("--FOO-BAR--");
+    expect(filterUpperCase("fooBar")).toBe("FOOBAR");
+    expect(filterUpperCase("__FOO_BAR__")).toBe("__FOO_BAR__");
+  });
+
+  it("should handle empty strings", () => {
+    expect(filterUpperCase("")).toBe("");
+  });
+
+  it("should handle strings with no alphabetic characters", () => {
+    expect(filterUpperCase("12345")).toBe("12345");
+    expect(filterUpperCase("!@#$%")).toBe("!@#$%");
+  });
+
+  it("should handle mixed case strings", () => {
+    expect(filterUpperCase("FoObAr")).toBe("FOOBAR");
+    expect(filterUpperCase("HELLOworld")).toBe("HELLOWORLD");
+  });
+
+  it("should handle strings with spaces", () => {
+    expect(filterUpperCase("Hello World")).toBe("HELLO WORLD");
+    expect(filterUpperCase(" foo bar ")).toBe(" FOO BAR ");
+  });
+
+  it("should return the same string if already in uppercase", () => {
+    expect(filterUpperCase("ALREADY UPPERCASE")).toBe("ALREADY UPPERCASE");
+  });
+});

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

@@ -2,7 +2,7 @@ import {
   describe,
   expect,
   it,
-} from "@jest/globals";
+} from "vitest";
 
 import filterValueByCondition from "../filterValueByCondition";
 
@@ -26,7 +26,7 @@ describe("Filter value by condition", () => {
     const conditions = [
       {
         if: "value > 3",
-        thenTemplate: "(${ value * 3 } Aloha)",
+        thenTemplate: `(\${ value * 3 } Aloha)`,
       },
       {
         if: "value < 2",
@@ -62,7 +62,7 @@ describe("Filter value by condition", () => {
 
     expect(filterValueByCondition(2, {
       conditions,
-      defaultTemplate: "${ value / 2 }",
+      defaultTemplate: `\${ value / 2 }`,
     })).toBe("1");
   });
 

package/src/filters/filterJson.js

@@ -1,39 +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.
- * @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 "";
-  }
-}
+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/filters/filterValueByCondition.js

@@ -2,7 +2,7 @@ const executeExpression = ({ expression, value }) => {
   try {
     // eslint-disable-next-line no-new-func
     return Function("value", `"use strict"; return (${ expression });`)(value);
-  } catch (e) {
+  } catch(e) {
     return undefined;
   }
 };
@@ -11,7 +11,7 @@ const executeTemplate = ({ template, value }) => {
   try {
     // eslint-disable-next-line no-new-func
     return Function("value", `"use strict"; return \`${ template }\`;`)(value);
-  } catch (e) {
+  } catch(e) {
     return "";
   }
 };

package/src/plugins/AAlertPlugin.js

@@ -2,11 +2,22 @@ import {
   ref,
 } from "vue";
 
-import CheckCircleFill from "aloha-svg/dist/js/bootstrap/CheckCircleFill";
-import ExclamationCircleFill from "aloha-svg/dist/js/bootstrap/ExclamationCircleFill";
-import InfoCircleFill from "aloha-svg/dist/js/bootstrap/InfoCircleFill";
-import XCircleFill from "aloha-svg/dist/js/bootstrap/XCircleFill";
-import XLg from "aloha-svg/dist/js/bootstrap/XLg";
+const CheckCircleFill = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-check-circle-fill" viewBox="0 0 16 16">
+  <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0m-3.97-3.03a.75.75 0 0 0-1.08.022L7.477 9.417 5.384 7.323a.75.75 0 0 0-1.06 1.06L6.97 11.03a.75.75 0 0 0 1.079-.02l3.992-4.99a.75.75 0 0 0-.01-1.05z"/>
+</svg>`;
+const ExclamationCircleFill = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-exclamation-circle-fill" viewBox="0 0 16 16">
+  <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M8 4a.905.905 0 0 0-.9.995l.35 3.507a.552.552 0 0 0 1.1 0l.35-3.507A.905.905 0 0 0 8 4m.002 6a1 1 0 1 0 0 2 1 1 0 0 0 0-2"/>
+</svg>`;
+const InfoCircleFill = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-info-circle-fill" viewBox="0 0 16 16">
+  <path d="M8 16A8 8 0 1 0 8 0a8 8 0 0 0 0 16m.93-9.412-1 4.705c-.07.34.029.533.304.533.194 0 .487-.07.686-.246l-.088.416c-.287.346-.92.598-1.465.598-.703 0-1.002-.422-.808-1.319l.738-3.468c.064-.293.006-.399-.287-.47l-.451-.081.082-.381 2.29-.287zM8 5.5a1 1 0 1 1 0-2 1 1 0 0 1 0 2"/>
+</svg>`;
+const XCircleFill = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-circle-fill" viewBox="0 0 16 16">
+  <path d="M16 8A8 8 0 1 1 0 8a8 8 0 0 1 16 0M5.354 4.646a.5.5 0 1 0-.708.708L7.293 8l-2.647 2.646a.5.5 0 0 0 .708.708L8 8.707l2.646 2.647a.5.5 0 0 0 .708-.708L8.707 8l2.647-2.646a.5.5 0 0 0-.708-.708L8 7.293z"/>
+</svg>`;
+const XLg = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-x-lg" viewBox="0 0 16 16">
+  <path d="M2.146 2.854a.5.5 0 1 1 .708-.708L8 7.293l5.146-5.147a.5.5 0 0 1 .708.708L8.707 8l5.147 5.146a.5.5 0 0 1-.708.708L8 8.707l-5.146 5.147a.5.5 0 0 1-.708-.708L7.293 8z"/>
+</svg>`;
+
 
 export const alertPluginOptions = ref({
   propsDefault: {