aloha-vue 2.74.0 → 2.75.0

package/src/ATable/__tests__/ATable.HeaderSlot.test.js

@@ -1,97 +1,102 @@
-import {
-  h,
-  ref,
-} from "vue";
-import {
-  describe,
-  expect,
-  it,
-  jest,
-} from "@jest/globals";
-import {
-  mount,
-} from "@vue/test-utils";
-
-import ATableHeaderTh from "../ATableHeaderTh/ATableHeaderTh";
-
-jest.mock("../../AButton/AButton", () => ({
-  name: "AButton",
-  render() {
-    return jest.requireActual("vue").h("span", this.$slots.default?.());
-  },
-}));
-jest.mock("aloha-svg/dist/js/bootstrap/CaretDownFill", () => "");
-jest.mock("aloha-svg/dist/js/bootstrap/CaretUpFill", () => "");
-
-const ATranslationStub = {
-  name: "ATranslation",
-  props: {
-    html: {
-      type: [String, Number, Object, Array],
-      default: undefined,
-    },
-    text: {
-      type: [String, Number, Object, Array],
-      default: undefined,
-    },
-  },
-  render() {
-    return h("span", this.html || this.text);
-  },
-};
-
-const mountHeader = ({ column, slots }) => mount(ATableHeaderTh, {
-  props: {
-    column,
-    columnIndex: 2,
-    hasMultipleActions: false,
-  },
-  slots,
-  global: {
-    provide: {
-      changeModelSort: () => {},
-      columnWidthDefault: ref(250),
-      isColumnsDnd: ref(false),
-      isLoadingOptions: ref(false),
-      isLoadingTable: ref(false),
-      tableId: ref("table"),
-      useRem: ref(false),
-    },
-    stubs: {
-      ATranslation: ATranslationStub,
-    },
-  },
-});
-
-describe("ATable header slot", () => {
-  it("renders the configured header slot instead of the label", () => {
-    const wrapper = mountHeader({
-      column: {
-        id: "name",
-        label: "Name label",
-        headerSlot: "nameHeader",
-      },
-      slots: {
-        nameHeader: ({ column, columnIndex }) => h(
-          "strong",
-          { class: "custom-header" },
-          `${ column.id }-${ columnIndex }`,
-        ),
-      },
-    });
-
-    expect(wrapper.find(".custom-header").text()).toBe("name-2");
-    expect(wrapper.text()).not.toContain("Name label");
-  });
-
-  it("renders the label when the configured header slot is not provided", () => {
-    const wrapper = mountHeader({
-      column: {
-        label: "Name label",
-        headerSlot: "nameHeader",
-      },
-    });
-
-    expect(wrapper.text()).toContain("Name label");
-  });
-});
+import {
+  h,
+  ref,
+} from "vue";
+import {
+  describe,
+  expect,
+  it,
+  vi,
+} from "vitest";
+import {
+  mount,
+} from "@vue/test-utils";
+
+import ATableHeaderTh from "../ATableHeaderTh/ATableHeaderTh";
+
+vi.mock("../../AButton/AButton", async() => {
+  const {
+    h: render,
+  } = await vi.importActual("vue");
+  return {
+    default: {
+      name: "AButton",
+      render() {
+        return render("span", this.$slots.default?.());
+      },
+    },
+  };
+});
+
+const ATranslationStub = {
+  name: "ATranslation",
+  props: {
+    html: {
+      type: [String, Number, Object, Array],
+      default: undefined,
+    },
+    text: {
+      type: [String, Number, Object, Array],
+      default: undefined,
+    },
+  },
+  render() {
+    return h("span", this.html || this.text);
+  },
+};
+
+const mountHeader = ({ column, slots }) => mount(ATableHeaderTh, {
+  props: {
+    column,
+    columnIndex: 2,
+    hasMultipleActions: false,
+  },
+  slots,
+  global: {
+    provide: {
+      changeModelSort: () => {},
+      columnWidthDefault: ref(250),
+      isColumnsDnd: ref(false),
+      isLoadingOptions: ref(false),
+      isLoadingTable: ref(false),
+      tableId: ref("table"),
+      useRem: ref(false),
+    },
+    stubs: {
+      ATranslation: ATranslationStub,
+    },
+  },
+});
+
+describe("ATable header slot", () => {
+  it("renders the configured header slot instead of the label", () => {
+    const wrapper = mountHeader({
+      column: {
+        id: "name",
+        label: "Name label",
+        headerSlot: "nameHeader",
+      },
+      slots: {
+        nameHeader: ({ column, columnIndex }) => h(
+          "strong",
+          { class: "custom-header" },
+          `${ column.id }-${ columnIndex }`,
+        ),
+      },
+    });
+
+    expect(wrapper.find(".custom-header").text()).toBe("name-2");
+    expect(wrapper.text()).not.toContain("Name label");
+  });
+
+  it("renders the label when the configured header slot is not provided", () => {
+    const wrapper = mountHeader({
+      column: {
+        label: "Name label",
+        headerSlot: "nameHeader",
+      },
+    });
+
+    expect(wrapper.text()).toContain("Name label");
+  });
+});

package/src/ATable/__tests__/ATable.RowIdsAPI.test.js

@@ -1,66 +1,66 @@
-import {
-  beforeAll,
-  describe,
-  expect,
-  it,
-} from "@jest/globals";
-
-import {
-  mockVueInject,
-} from "../../../utilsTests/utilsTests";
-
-describe("ATable row IDs", () => {
-  let AttributesAPI;
-  let RowActionsAPI;
-
-  beforeAll(async() => {
-    mockVueInject({
-      columnActionsOnePlusDropdownOptions: {},
-      rowActions: [],
-      tableId: "aloha",
-    });
-
-    AttributesAPI = (await import("../ATableTr/compositionAPI/AttributesAPI")).default;
-    RowActionsAPI = (await import("../compositionAPI/RowActionsAPI")).default;
-  });
-
-  it("uses the complete tree index path for a child row ID", () => {
-    const {
-      rowHtmlId,
-    } = AttributesAPI({
-      rowIndex: 1,
-      rowIndexPath: "0_1",
-    }, {});
-
-    expect(rowHtmlId.value).toBe("aloha_0_1");
-  });
-
-  it("uses the complete tree index path for a child actions ID", () => {
-    const {
-      buttonActionsId,
-    } = RowActionsAPI({
-      row: {},
-      rowIndex: 1,
-      rowIndexPath: "0_1",
-    });
-
-    expect(buttonActionsId.value).toBe("aloha_action_0_1");
-  });
-
-  it("keeps the existing ID format when no tree index path is provided", () => {
-    const {
-      rowHtmlId,
-    } = AttributesAPI({
-      rowIndex: 2,
-    }, {});
-    const {
-      buttonActionsId,
-    } = RowActionsAPI({
-      row: {},
-      rowIndex: 2,
-    });
-
-    expect(rowHtmlId.value).toBe("aloha_2");
-    expect(buttonActionsId.value).toBe("aloha_action_2");
-  });
-});
+import {
+  beforeAll,
+  describe,
+  expect,
+  it,
+} from "vitest";
+
+import {
+  mockVueInject,
+} from "../../../utilsTests/utilsTests";
+
+describe("ATable row IDs", () => {
+  let AttributesAPI;
+  let RowActionsAPI;
+
+  beforeAll(async() => {
+    mockVueInject({
+      columnActionsOnePlusDropdownOptions: {},
+      rowActions: [],
+      tableId: "aloha",
+    });
+
+    AttributesAPI = (await import("../ATableTr/compositionAPI/AttributesAPI")).default;
+    RowActionsAPI = (await import("../compositionAPI/RowActionsAPI")).default;
+  });
+
+  it("uses the complete tree index path for a child row ID", () => {
+    const {
+      rowHtmlId,
+    } = AttributesAPI({
+      rowIndex: 1,
+      rowIndexPath: "0_1",
+    }, {});
+
+    expect(rowHtmlId.value).toBe("aloha_0_1");
+  });
+
+  it("uses the complete tree index path for a child actions ID", () => {
+    const {
+      buttonActionsId,
+    } = RowActionsAPI({
+      row: {},
+      rowIndex: 1,
+      rowIndexPath: "0_1",
+    });
+
+    expect(buttonActionsId.value).toBe("aloha_action_0_1");
+  });
+
+  it("keeps the existing ID format when no tree index path is provided", () => {
+    const {
+      rowHtmlId,
+    } = AttributesAPI({
+      rowIndex: 2,
+    }, {});
+    const {
+      buttonActionsId,
+    } = RowActionsAPI({
+      row: {},
+      rowIndex: 2,
+    });
+
+    expect(rowHtmlId.value).toBe("aloha_2");
+    expect(buttonActionsId.value).toBe("aloha_action_2");
+  });
+});

package/src/ATableForm/ATableForm.js

@@ -1,10 +1,10 @@
 import {
   computed,
   h,
-  onBeforeUnmount,
-  onMounted,
-  ref,
-  toRef,
+  onBeforeUnmount,
+  onMounted,
+  ref,
+  toRef,
 } from "vue";
 
 import AButton from "../AButton/AButton";
@@ -23,13 +23,16 @@ import RowsAPI from "./compositionAPI/RowsAPI";
 import TextsAPI from "./compositionAPI/TextsAPI";
 import WidthsAPI from "./compositionAPI/WidthsAPI";
 
-import ExclamationCircleFill from "aloha-svg/dist/js/bootstrap/ExclamationCircleFill";
 import {
   get,
   isFunction,
   uniqueId,
 } from "lodash-es";
 
+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>`;
+
 export default {
   name: "ATableForm",
   props: {
@@ -88,16 +91,16 @@ export default {
       required: false,
       default: undefined,
     },
-    focusAfterMove: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-    fullWidthRowCallback: {
-      type: Function,
-      required: false,
-      default: undefined,
-    },
+    focusAfterMove: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    fullWidthRowCallback: {
+      type: Function,
+      required: false,
+      default: undefined,
+    },
     icons: {
       type: Object,
       required: false,
@@ -215,18 +218,18 @@ export default {
     "moveRow",
     "updateRows",
   ],
-  setup(props, context) {
-    const actionsDisabledCallback = toRef(props, "actionsDisabledCallback");
-    const actionsTitleCallback = toRef(props, "actionsTitleCallback");
-    const isAddRowActive = ref(false);
-
-    const {
-      allColumnsLength,
-      columnsVisible,
-      hasActionsColumn,
-    } = ColumnsAPI(props, {
-      isAddRowActive,
-    });
+  setup(props, context) {
+    const actionsDisabledCallback = toRef(props, "actionsDisabledCallback");
+    const actionsTitleCallback = toRef(props, "actionsTitleCallback");
+    const isAddRowActive = ref(false);
+
+    const {
+      allColumnsLength,
+      columnsVisible,
+      hasActionsColumn,
+    } = ColumnsAPI(props, {
+      isAddRowActive,
+    });
 
     const {
       getRowKey,
@@ -250,49 +253,49 @@ export default {
       actionsClassesLocal,
     } = ClassesAPI(props);
 
-    const {
+    const {
       activeEditRowKey,
       activeEditModel,
       activeEditFocusColumnId,
       canAddRow,
       hasActiveEditRow,
       hasRequiredEditableColumns,
-      onAddRow,
+      onAddRow,
       onCancelEditRow,
       onEditRow,
     } = EditAPI(props, {
-      columnsVisible,
-      getRowKey,
-      isAddRowActive,
-    });
-
-    const {
-      columnsStylesGrow,
-      destroyColumnsGrowObserver,
-      initColumnsGrowObserver,
-    } = ColumnsGrowAPI(props, {
-      columnsVisible,
-      hasActionsColumn,
-      hasActiveEditRow,
-      widthsLocal,
-    });
-
-    onMounted(() => {
-      initColumnsGrowObserver();
-    });
-
-    onBeforeUnmount(() => {
-      destroyColumnsGrowObserver();
-    });
+      columnsVisible,
+      getRowKey,
+      isAddRowActive,
+    });
+
+    const {
+      columnsStylesGrow,
+      destroyColumnsGrowObserver,
+      initColumnsGrowObserver,
+    } = ColumnsGrowAPI(props, {
+      columnsVisible,
+      hasActionsColumn,
+      hasActiveEditRow,
+      widthsLocal,
+    });
+
+    onMounted(() => {
+      initColumnsGrowObserver();
+    });
+
+    onBeforeUnmount(() => {
+      destroyColumnsGrowObserver();
+    });
 
     const {
       canMoveRowDown,
       canMoveRowUp,
       dragOverPosition,
       dragOverRowIndex,
-      draggedRowIndex,
-      isDndDisabledForRow,
-      isDndLockedForRow,
+      draggedRowIndex,
+      isDndDisabledForRow,
+      isDndLockedForRow,
       moveRowDown,
       moveRowUp,
       onDragend,
@@ -347,8 +350,8 @@ export default {
       draggedRowIndex,
       dragOverPosition,
       dragOverRowIndex,
-      isDndDisabledForRow,
-      isDndLockedForRow,
+      isDndDisabledForRow,
+      isDndLockedForRow,
       getRowKey,
       hasActionsColumn,
       hasActiveEditRow,
@@ -374,23 +377,23 @@ export default {
     };
   },
   render() {
-    return h("div", {
-      class: "a_table_form",
-    }, [
-      this.$slots.label ?
-        this.$slots.label() :
-        this.label && h(ATranslation, {
-          class: [
-            "a_table_form__label",
-            this.labelClass,
-          ],
-          html: this.label,
-          tag: this.labelTag,
-        }),
-      this.$slots.requiredPrepend && this.$slots.requiredPrepend(),
-      this.hasRequiredEditableColumns && h(ARequired),
-      this.$slots.requiredAppend && this.$slots.requiredAppend(),
-      h("div", {
+    return h("div", {
+      class: "a_table_form",
+    }, [
+      this.$slots.label ?
+        this.$slots.label() :
+        this.label && h(ATranslation, {
+          class: [
+            "a_table_form__label",
+            this.labelClass,
+          ],
+          html: this.label,
+          tag: this.labelTag,
+        }),
+      this.$slots.requiredPrepend && this.$slots.requiredPrepend(),
+      this.hasRequiredEditableColumns && h(ARequired),
+      this.$slots.requiredAppend && this.$slots.requiredAppend(),
+      h("div", {
         class: "a_table_form__wrapper",
       }, [
         h("table", {
@@ -422,7 +425,7 @@ export default {
               draggedRowIndex: this.draggedRowIndex,
               extra: this.extra,
               hasActionsColumn: this.hasActionsColumn,
-              hasActiveEditRow: this.hasActiveEditRow,
+              hasActiveEditRow: this.hasActiveEditRow,
               isActionsSticky: this.isActionsSticky,
               isActiveEditMode: false,
               isDeletable: this.isDeletable,
@@ -475,18 +478,18 @@ export default {
                   draggedRowIndex: this.draggedRowIndex,
                   editModel: this.activeEditRowKey === rowKey ? this.activeEditModel : undefined,
                   editFocusColumnId: this.activeEditRowKey === rowKey ? this.activeEditFocusColumnId : undefined,
-                  errorIcon: this.errorIcon,
-                  extra: this.extra,
-                  fullWidthRowCallback: this.fullWidthRowCallback,
-                  hasActionsColumn: this.hasActionsColumn,
+                  errorIcon: this.errorIcon,
+                  extra: this.extra,
+                  fullWidthRowCallback: this.fullWidthRowCallback,
+                  hasActionsColumn: this.hasActionsColumn,
                   hasActiveEditRow: this.hasActiveEditRow,
                   isActionsSticky: this.isActionsSticky,
                   isActiveEditMode: this.activeEditRowKey === rowKey,
                   isCreateMode: false,
                   isDeletable: this.isDeletable,
                   isDeletableConfirm: this.isDeletableConfirm,
-                  isDndDisabled: this.isDndDisabledForRow(rowIndex),
-                  isDndLocked: this.isDndLockedForRow(rowIndex),
+                  isDndDisabled: this.isDndDisabledForRow(rowIndex),
+                  isDndLocked: this.isDndLockedForRow(rowIndex),
                   isDragAndDrop: this.isDragAndDrop,
                   isEditable: this.isEditable,
                   isEditOnRowClick: this.isEditOnRowClick,
@@ -546,7 +549,7 @@ export default {
                 isDeletableConfirm: false,
                 isDndDisabled: true,
                 isDragAndDrop: this.isDragAndDrop,
-                isEditable: true,
+                isEditable: true,
                 isEditOnRowClick: false,
                 key: "body_create",
                 moveRowDown: this.moveRowDown,
@@ -599,9 +602,9 @@ export default {
               columns: this.columnsVisible,
               columnsStylesGrow: this.columnsStylesGrow,
               draggedRowIndex: this.draggedRowIndex,
-              extra: this.extra,
-              fullWidthRowCallback: this.fullWidthRowCallback,
-              hasActionsColumn: this.hasActionsColumn,
+              extra: this.extra,
+              fullWidthRowCallback: this.fullWidthRowCallback,
+              hasActionsColumn: this.hasActionsColumn,
               hasActiveEditRow: this.hasActiveEditRow,
               isActionsSticky: this.isActionsSticky,
               isActiveEditMode: false,

package/src/ATableForm/ATableFormCellAction/ATableFormCellAction.js

@@ -12,10 +12,20 @@ import IdsAPI from "./compositionAPI/IdsAPI";
 import StylesAPI from "./compositionAPI/StylesAPI";
 import TitleAPI from "./compositionAPI/TitleAPI";
 
-import Floppy2Fill from "aloha-svg/dist/js/bootstrap/Floppy2Fill";
-import PencilFill from "aloha-svg/dist/js/bootstrap/PencilFill";
-import Trash from "aloha-svg/dist/js/bootstrap/Trash";
-import XLg from "aloha-svg/dist/js/bootstrap/XLg";
+const Floppy2Fill = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-floppy2-fill" viewBox="0 0 16 16">
+  <path d="M12 2h-2v3h2z"/>
+  <path d="M1.5 0A1.5 1.5 0 0 0 0 1.5v13A1.5 1.5 0 0 0 1.5 16h13a1.5 1.5 0 0 0 1.5-1.5V2.914a1.5 1.5 0 0 0-.44-1.06L14.147.439A1.5 1.5 0 0 0 13.086 0zM4 6a1 1 0 0 1-1-1V1h10v4a1 1 0 0 1-1 1zM3 9h10a1 1 0 0 1 1 1v5H2v-5a1 1 0 0 1 1-1"/>
+</svg>`;
+const PencilFill = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-pencil-fill" viewBox="0 0 16 16">
+  <path d="M12.854.146a.5.5 0 0 0-.707 0L10.5 1.793 14.207 5.5l1.647-1.646a.5.5 0 0 0 0-.708zm.646 6.061L9.793 2.5 3.293 9H3.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.5h.5a.5.5 0 0 1 .5.5v.207zm-7.468 7.468A.5.5 0 0 1 6 13.5V13h-.5a.5.5 0 0 1-.5-.5V12h-.5a.5.5 0 0 1-.5-.5V11h-.5a.5.5 0 0 1-.5-.5V10h-.5a.5.5 0 0 1-.175-.032l-.179.178a.5.5 0 0 0-.11.168l-2 5a.5.5 0 0 0 .65.65l5-2a.5.5 0 0 0 .168-.11z"/>
+</svg>`;
+const Trash = `<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="bi bi-trash" viewBox="0 0 16 16">
+  <path d="M5.5 5.5A.5.5 0 0 1 6 6v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m2.5 0a.5.5 0 0 1 .5.5v6a.5.5 0 0 1-1 0V6a.5.5 0 0 1 .5-.5m3 .5a.5.5 0 0 0-1 0v6a.5.5 0 0 0 1 0z"/>
+  <path d="M14.5 3a1 1 0 0 1-1 1H13v9a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V4h-.5a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1H6a1 1 0 0 1 1-1h2a1 1 0 0 1 1 1h3.5a1 1 0 0 1 1 1zM4.118 4 4 4.059V13a1 1 0 0 0 1 1h6a1 1 0 0 0 1-1V4.059L11.882 4zM2.5 3h11V2h-11z"/>
+</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 default {