aloha-vue 1.2.85 → 1.2.87

package/docs/src/views/Functions/PageFilterEmail/PageFilterEmail.js

@@ -5,10 +5,13 @@ import PageFilterEmailExample from "./PageFilterEmailExample/PageFilterEmailExam
 import PageFilterEmailLinkClass from "./PageFilterEmailLinkClass/PageFilterEmailLinkClass.vue";
 import PageFilterImportCompositionApi from "../Components/PageFilterImportCompositionApi/PageFilterImportCompositionApi.vue";
 import PageFilterImportFunction from "../Components/PageFilterImportFunction/PageFilterImportFunction.vue";
+import PageFilterTest from "../Components/PageFilterTest/PageFilterTest.vue";
 
 import ArgumentsAPI from "./compositionAPI/ArgumentsAPI";
 import PageTitleAPI from "./compositionAPI/PageTitleAPI";
 
+import filterEmailTest from "../../../../../src/filters/__tests__/filterEmail.test.js?raw";
+
 export default {
   name: "PageFilterEmail",
   components: {
@@ -19,6 +22,7 @@ export default {
     PageFilterEmailLinkClass,
     PageFilterImportCompositionApi,
     PageFilterImportFunction,
+    PageFilterTest,
   },
   setup() {
     const {
@@ -29,9 +33,12 @@ export default {
       argumentsText,
     } = ArgumentsAPI();
 
+    const test = filterEmailTest;
+
     return {
       argumentsText,
       pageTitle,
+      test,
     };
   },
 };

package/docs/src/views/Functions/PageFilterEmail/PageFilterEmail.pug

@@ -26,3 +26,6 @@ aloha-page(
 
     page-filter-email-link-class
 
+    page-filter-test(
+      :test="test"
+    )

package/docs/src/views/Functions/PageFilterKeyValue/PageFilterKeyValue.js

@@ -4,10 +4,13 @@ import PageFilterArguments from "../Components/PageFilterArguments/PageFilterArg
 import PageFilterImportCompositionApi from "../Components/PageFilterImportCompositionApi/PageFilterImportCompositionApi.vue";
 import PageFilterImportFunction from "../Components/PageFilterImportFunction/PageFilterImportFunction.vue";
 import PageFilterKeyValueExample from "./PageFilterKeyValueExample/PageFilterKeyValueExample.vue";
+import PageFilterTest from "../Components/PageFilterTest/PageFilterTest.vue";
 
 import ArgumentsAPI from "./compositionAPI/ArgumentsAPI";
 import PageTitleAPI from "./compositionAPI/PageTitleAPI";
 
+import filterKeyValueTest from "../../../../../src/filters/__tests__/filterKeyValue.test.js?raw";
+
 export default {
   name: "PageFilterKeyValue",
   components: {
@@ -17,6 +20,7 @@ export default {
     PageFilterImportCompositionApi,
     PageFilterImportFunction,
     PageFilterKeyValueExample,
+    PageFilterTest,
   },
   setup() {
     const {
@@ -27,9 +31,12 @@ export default {
       argumentsText,
     } = ArgumentsAPI();
 
+    const test = filterKeyValueTest;
+
     return {
       argumentsText,
       pageTitle,
+      test,
     };
   },
 };

package/docs/src/views/Functions/PageFilterKeyValue/PageFilterKeyValue.pug

@@ -23,3 +23,7 @@ aloha-page(
     )
 
     page-filter-key-value-example
+
+    page-filter-test(
+      :test="test"
+    )

package/docs/src/views/Functions/PageFilterLimitTo/PageFilterLimitTo.js

@@ -5,10 +5,13 @@ import PageFilterImportCompositionApi from "../Components/PageFilterImportCompos
 import PageFilterImportFunction from "../Components/PageFilterImportFunction/PageFilterImportFunction.vue";
 import PageFilterLimitToLimit from "./PageFilterLimitToLimit/PageFilterLimitToLimit.vue";
 import PageFilterLimitToMaxThreeDots from "./PageFilterLimitToMaxThreeDots/PageFilterLimitToMaxThreeDots.vue";
+import PageFilterTest from "../Components/PageFilterTest/PageFilterTest.vue";
 
 import ArgumentsAPI from "./compositionAPI/ArgumentsAPI";
 import PageTitleAPI from "./compositionAPI/PageTitleAPI";
 
+import filterLimitToTest from "../../../../../src/filters/__tests__/filterLimitTo.test.js?raw";
+
 export default {
   name: "PageFilterLimitTo",
   components: {
@@ -19,6 +22,7 @@ export default {
     PageFilterImportFunction,
     PageFilterLimitToLimit,
     PageFilterLimitToMaxThreeDots,
+    PageFilterTest,
   },
   setup() {
     const {
@@ -29,9 +33,12 @@ export default {
       argumentsText,
     } = ArgumentsAPI();
 
+    const test = filterLimitToTest;
+
     return {
       argumentsText,
       pageTitle,
+      test,
     };
   },
 };

package/docs/src/views/Functions/PageFilterLimitTo/PageFilterLimitTo.pug

@@ -26,3 +26,6 @@ aloha-page(
 
     page-filter-limit-to-max-three-dots
 
+    page-filter-test(
+      :test="test"
+    )

package/docs/src/views/Functions/PageFilterLink/PageFilterLink.js

@@ -8,10 +8,13 @@ import PageFilterLinkLinkClass from "./PageFilterLinkLinkClass/PageFilterLinkLin
 import PageFilterLinkLinkText from "./PageFilterLinkLinkText/PageFilterLinkLinkText.vue";
 import PageFilterLinkProtocol from "./PageFilterLinkProtocol/PageFilterLinkProtocol.vue";
 import PageFilterLinkTarget from "./PageFilterLinkTarget/PageFilterLinkTarget.vue";
+import PageFilterTest from "../Components/PageFilterTest/PageFilterTest.vue";
 
 import ArgumentsAPI from "./compositionAPI/ArgumentsAPI";
 import PageTitleAPI from "./compositionAPI/PageTitleAPI";
 
+import filterLinkTest from "../../../../../src/filters/__tests__/filterLink.test.js?raw";
+
 export default {
   name: "PageFilterLink",
   components: {
@@ -25,6 +28,7 @@ export default {
     PageFilterLinkLinkText,
     PageFilterLinkProtocol,
     PageFilterLinkTarget,
+    PageFilterTest,
   },
   setup() {
     const {
@@ -35,9 +39,12 @@ export default {
       argumentsText,
     } = ArgumentsAPI();
 
+    const test = filterLinkTest;
+
     return {
       argumentsText,
       pageTitle,
+      test,
     };
   },
 };

package/docs/src/views/Functions/PageFilterLink/PageFilterLink.pug

@@ -31,3 +31,7 @@ aloha-page(
     page-filter-link-target
 
     page-filter-link-link-class
+
+    page-filter-test(
+      :test="test"
+    )

package/package.json

@@ -14,7 +14,7 @@
     "Vue.js"
   ],
   "homepage": "https://github.com/ilia-brykin/aloha/#README.md",
-  "version": "1.2.85",
+  "version": "1.2.87",
   "author": {
     "name": "Ilia Brykin",
     "email": "brykin.ilia@gmail.com"

package/src/AFilters/AFiltersHorizontal/AFiltersHorizontalFilterUi/compositionAPI/FilterSpecificTypeAPI.js

@@ -18,12 +18,20 @@ export default function FilterSpecificTypeAPI(props) {
 
   const filterSpecificAttributes = computed(() => {
     const ATTRIBUTES = {};
-    if (typesMapInputNumberRange[filter.value.type] || typesMapDatepickerRange[filter.value.type]) {
+    const IS_NUMBER_RANGE = typesMapInputNumberRange[filter.value.type];
+    const IS_DATEPICKER_RANGE = typesMapDatepickerRange[filter.value.type];
+    if (IS_NUMBER_RANGE || IS_DATEPICKER_RANGE) {
       if (isUndefined(filter.value.inputWidth)) {
         ATTRIBUTES.inputWidth = "auto";
       }
     }
 
+    if (IS_DATEPICKER_RANGE) {
+      ATTRIBUTES.inputAttributes = {
+        style: "min-width: 181px",
+      };
+    }
+
     return ATTRIBUTES;
   });
 

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

@@ -0,0 +1,36 @@
+import filterEmail from "../filterEmail";
+
+describe("filterEmail", () => {
+  test("basic email", () => {
+    expect(filterEmail("user@aloha.com")).toBe("<a href=\"mailto:user@aloha.com\">user@aloha.com</a>");
+  });
+
+  test("email with CSS class", () => {
+    expect(filterEmail("contact@aloha.com", { linkClass: "email-link" })).toBe("<a href=\"mailto:contact@aloha.com\" class=\"email-link\">contact@aloha.com</a>");
+  });
+
+  test("empty email", () => {
+    expect(filterEmail("")).toBe("");
+  });
+
+  test("null email", () => {
+    expect(filterEmail(null)).toBe("");
+  });
+
+  test("undefined email", () => {
+    expect(filterEmail(undefined)).toBe("");
+  });
+
+  test("numeric value (invalid email)", () => {
+    expect(filterEmail(12345)).toBe("");
+  });
+
+  test("email with special characters", () => {
+    expect(filterEmail("name.surname+filter@company.org")).toBe("<a href=\"mailto:name.surname+filter@company.org\">name.surname+filter@company.org</a>");
+  });
+
+  test("email with combined class attribute", () => {
+    expect(filterEmail("hr@enterprise.net", { linkClass: "external contact" })).toBe("<a href=\"mailto:hr@enterprise.net\" class=\"external contact\">hr@enterprise.net</a>");
+  });
+});
+

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

@@ -0,0 +1,44 @@
+import filterKeyValue from "../filterKeyValue";
+
+describe("filterKeyValue", () => {
+  test("single key-value pair", () => {
+    expect(filterKeyValue({ greeting: "aloha" })).toBe("greeting: aloha");
+  });
+
+  test("multiple key-value pairs", () => {
+    expect(filterKeyValue({ greeting: "aloha", farewell: "aloha" })).toBe("greeting: aloha, farewell: aloha");
+  });
+
+  test("empty object", () => {
+    expect(filterKeyValue({})).toBe("");
+  });
+
+  test("null input", () => {
+    expect(filterKeyValue(null)).toBe("");
+  });
+
+  test("undefined input", () => {
+    expect(filterKeyValue(undefined)).toBe("");
+  });
+
+  test("numeric and string values", () => {
+    expect(filterKeyValue({ alohaCount: 3, message: "aloha" })).toBe("alohaCount: 3, message: aloha");
+  });
+
+  test("nested object", () => {
+    expect(filterKeyValue({ level1: { greeting: "aloha" } })).toBe("level1: [object Object]");
+  });
+
+  test("object with array values", () => {
+    expect(filterKeyValue({ alohas: ["aloha", "hello", "hi"] })).toBe("alohas: aloha,hello,hi");
+  });
+
+  test("object with boolean and null values", () => {
+    expect(filterKeyValue({ isActive: true, isEmpty: null })).toBe("isActive: true, isEmpty: null");
+  });
+
+  test("complex object", () => {
+    expect(filterKeyValue({ greeting: "aloha", number: 42, nested: { key: "value" }, list: [1, 2, 3] }))
+      .toBe("greeting: aloha, number: 42, nested: [object Object], list: 1,2,3");
+  });
+});

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

@@ -0,0 +1,33 @@
+import filterLimitTo from "../filterLimitTo";
+
+describe("filterLimitTo", () => {
+  test("text exactly at limit", () => {
+    expect(filterLimitTo("Lorem ipsum dolor sit amet, cons", { limit: 30 })).toBe("Lorem ipsum dolor sit amet, co...");
+  });
+
+  test("long text exceeding limit", () => {
+    expect(filterLimitTo("Lorem ipsum dolor sit amet, consectetur adipiscing elit", { limit: 30 })).toBe("Lorem ipsum dolor sit amet, co...");
+  });
+
+  test("text ending with a period", () => {
+    expect(filterLimitTo("Lorem ipsum dolor sit amet.", { limit: 30 })).toBe("Lorem ipsum dolor sit amet.");
+  });
+
+  test("text with multiple periods at the end", () => {
+    expect(filterLimitTo("Lorem ipsum dolor sit amet...", { limit: 30 })).toBe("Lorem ipsum dolor sit amet...");
+  });
+
+  test("numeric value treated as text", () => {
+    expect(filterLimitTo(1234567890, { limit: 10 })).toBe("1234567890");
+    expect(filterLimitTo(1234567890, { limit: 9 })).toBe("123456789...");
+  });
+
+  test("null value", () => {
+    expect(filterLimitTo(null, { limit: 30 })).toBe("");
+  });
+
+  test("maxThreeDots false", () => {
+    expect(filterLimitTo("Lorem ipsum dolor sit amet, c..", { limit: 30, maxThreeDots: false })).toBe("Lorem ipsum dolor sit amet, c....");
+    expect(filterLimitTo("Lorem ipsum dolor sit ame, c...", { limit: 30, maxThreeDots: false })).toBe("Lorem ipsum dolor sit ame, c.....");
+  });
+});

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

@@ -0,0 +1,35 @@
+import filterLink from "../filterLink";
+
+describe("filterLink", () => {
+  test("default behavior", () => {
+    expect(filterLink("example.com")).toBe("<a href=\"https://example.com\">example.com</a>");
+    expect(filterLink("http://example.com")).toBe("<a href=\"http://example.com\">http://example.com</a>");
+  });
+
+  test("with linkText", () => {
+    expect(filterLink("example.com", { linkText: "Example" })).toBe("<a href=\"https://example.com\">Example</a>");
+  });
+
+  test("with protocol", () => {
+    expect(filterLink("example.com", { protocol: "http://" })).toBe("<a href=\"http://example.com\">example.com</a>");
+  });
+
+  test("with target", () => {
+    expect(filterLink("example.com", { target: "_blank" })).toBe("<a href=\"https://example.com\" target=\"_blank\">example.com</a>");
+  });
+
+  test("with linkClass", () => {
+    expect(filterLink("example.com", { linkClass: "custom-class" })).toBe("<a href=\"https://example.com\" class=\"custom-class\">example.com</a>");
+  });
+
+  test("invalid URL", () => {
+    expect(filterLink(null)).toBe("");
+    expect(filterLink(undefined)).toBe("");
+    expect(filterLink(123)).toBe("");
+  });
+
+  test("combined options", () => {
+    expect(filterLink("example.com", { linkText: "Example", target: "_blank", linkClass: "custom-class" }))
+      .toBe("<a href=\"https://example.com\" target=\"_blank\" class=\"custom-class\">Example</a>");
+  });
+});

package/src/filters/filterEmail.js

@@ -1,9 +1,13 @@
 import {
   isNil,
+  isString,
 } from "lodash-es";
 
 export default function(value, { linkClass } = {}) {
-  if (isNil(value) || value === "") {
+  if (isNil(value) ||
+    value === "" ||
+    !isString(value) ||
+    !/^\S+@\S+\.\S+$/.test(value)) {
     return "";
   }
   let classAttribut = "";

package/src/styles/components/ui/ASelect.scss

@@ -29,6 +29,22 @@
 .a_select__search {
   margin-bottom: 10px;
 }
+.a_select__search__group {
+  display: flex;
+  width: 100%;
+  & > div {
+    width: 100%;
+    .a_form_control {
+      border-top-right-radius: 0;
+      border-bottom-right-radius: 0;
+    }
+  }
+  & > button {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+    white-space: nowrap;
+  }
+}
 
 .a_select_menu {
   --a_select_divider_margin_y: 0.5rem;

package/src/ui/ASelect/ASelect.js

@@ -5,6 +5,7 @@ import {
 } from "vue";
 
 import AButton from "../../AButton/AButton";
+import ACloak from "../../ACloak/ACloak";
 import ACheckboxRadioGroup from "../ACheckboxRadioGroups/ACheckboxRadioGroups";
 import AErrorsText from "../AErrorsText/AErrorsText";
 import AFormHelpText from "../AFormHelpText/AFormHelpText";
@@ -703,7 +704,7 @@ export default {
                         onSubmit: this.onSearchOutside,
                       }, [
                         h("div", {
-                          class: "input-group",
+                          class: "a_select__search__group",
                         }, [
                           h(AInput, {
                             label: "_A_SELECT_SEARCH_",
@@ -718,6 +719,7 @@ export default {
                             class: "a_btn a_btn_primary a_select__element_clickable",
                             type: "submit",
                             iconLeft: "Search",
+                            loadingAlign: "left",
                           }),
                         ]),
                       ]),
@@ -776,6 +778,9 @@ export default {
                         class: "a_select__divider",
                         ariaHidden: true,
                       }),
+                      (this.loadingLocal || this.loadingSearchApi) ?
+                        h(ACloak) :
+                        "",
                       this.hasDataExtra && h("div", {}, [
                         ...this.dataExtraLocal.map((item, itemIndex) => {
                           return h(ASelectElement, {

package/src/ui/compositionApi/UiDataFromServerAPI.js

@@ -153,7 +153,7 @@ export default function UiDataFromServerAPI(props, {
       url: url.value,
       params: {
         ...(urlParams.value || {}),
-        searchApiKey: search,
+        [searchApiKey.value]: search,
       },
     }).then(
       response => {
@@ -174,6 +174,7 @@ export default function UiDataFromServerAPI(props, {
       !modelArrayWithoutDataExtra.value.length) {
       return;
     }
+    loadingDataFromServer.value = true;
     const URL_PARAMS = {
       ...urlParams.value,
       ...{
@@ -188,7 +189,9 @@ export default function UiDataFromServerAPI(props, {
       response => {
         dataFromServer.value = response || [];
       }
-    );
+    ).finally(() => {
+      loadingDataFromServer.value = false;
+    });
   };
 
   return {