aloha-vue 1.0.10 → 1.0.13

package/docs/package.json

@@ -11,7 +11,7 @@
     "build-css": "node-sass --include-path scss styles/styles.scss public/styles.css"
   },
   "dependencies": {
-    "aloha-css": "1.0.9",
+    "aloha-css": "1.0.11",
     "lodash-es": "^4.17.21",
     "vue": "3.2.31",
     "vue-router": "4.0.14",
@@ -41,8 +41,8 @@
     "sass-loader": "12.6.0",
     "source-map-loader": "3.0.1",
     "style-loader": "3.3.1",
-    "vue-loader": "17.0.0",
     "vue-eslint-parser": "8.3.0",
+    "vue-loader": "17.0.0",
     "vue-pug-loader": "1.1.26",
     "webpack": "5.73.0",
     "webpack-cli": "4.10.0",

package/docs/src/App/App.js

@@ -1,3 +1,4 @@
+import AModalConfirm from "../../../src/AModalConfirm/AModalConfirm";
 import TheMenu from "../components/TheMenu/TheMenu.vue";
 import TheNavbar from "../components/TheNavbar/TheNavbar.vue";
 
@@ -8,6 +9,7 @@ import {
 
 export default defineComponent({
   components: {
+    AModalConfirm,
     TheMenu,
     TheNavbar,
   },

package/docs/src/App/App.pug

@@ -8,3 +8,5 @@ div
       style="width: calc(100vw - 280px);"
     )
       router-view
+
+  a-modal-confirm

package/docs/src/components/TheMenu/TheMenu.js

@@ -43,6 +43,21 @@ export default {
           name: "PageAccordion",
           label: "Accordion",
         },
+        {
+          id: "alert",
+          name: "PageAlert",
+          label: "Alert",
+        },
+        {
+          id: "modal",
+          name: "PageModal",
+          label: "Modal",
+        },
+        {
+          id: "confirm",
+          name: "PageConfirm",
+          label: "Confirm",
+        },
       ],
     };
   },

package/docs/src/router/index.js

@@ -54,6 +54,21 @@ const ROUTES = [
     name: "PageAccordion",
     component: () => import(/* webpackChunkName: "PageAccordionBootstrap" */ "../views/PageAccordion/PageAccordion.vue"),
   },
+  {
+    path: "/alert",
+    name: "PageAlert",
+    component: () => import(/* webpackChunkName: "PageAlert" */ "../views/PageAlert/PageAlert.vue"),
+  },
+  {
+    path: "/modal",
+    name: "PageModal",
+    component: () => import(/* webpackChunkName: "PageModal" */ "../views/PageModal/PageModal.vue"),
+  },
+  {
+    path: "/confirm",
+    name: "PageConfirm",
+    component: () => import(/* webpackChunkName: "PageConfirm" */ "../views/PageConfirm/PageConfirm.vue"),
+  },
   {
     // If the routing configuration '*' reports an error, replace it with '/: catchAll(. *)'
     // caught Error: Catch all routes ("*") must now be defined using a param with a custom regexp

package/docs/src/views/PageAlert/PageAlert.js

@@ -0,0 +1,27 @@
+import AAlert from "../../../../src/AAlert/AAlert";
+
+export default {
+  name: "PageAlert",
+  components: {
+    AAlert,
+  },
+  data() {
+    return {
+      alerts: [
+        "primary",
+        "secondary",
+        "success",
+        "danger",
+        "warning",
+        "info",
+        "dark",
+      ],
+      isAlertsHidden: {},
+    };
+  },
+  methods: {
+    closeAlert(alert) {
+      this.isAlertsHidden[alert] = true;
+    },
+  },
+};

package/docs/src/views/PageAlert/PageAlert.pug

@@ -0,0 +1,10 @@
+div
+  a-alert(
+    v-for="alert in alerts"
+    :key="alert"
+    :type="alert"
+    :is-visible="!isAlertsHidden[alert]"
+    :is-dismissible="true"
+    @on-dismiss="closeAlert(alert)"
+  )
+    div Alert {{ alert }}

package/docs/src/views/PageAlert/PageAlert.vue

@@ -0,0 +1,2 @@
+<template lang="pug" src="./PageAlert.pug"></template>
+<script src="./PageAlert.js"></script>

package/docs/src/views/PageConfirm/PageConfirm.js

@@ -0,0 +1,33 @@
+import AModal from "../../../../src/AModal/AModal";
+
+import ConfirmAPI from "../../../../src/compositionAPI/ConfirmAPI";
+
+export default {
+  name: "PageConfirm",
+  components: {
+    AModal,
+  },
+  setup() {
+    const {
+      closeConfirm,
+      openConfirm,
+    } = ConfirmAPI();
+
+    const save = () => {
+      console.log("Aloha");
+      closeConfirm();
+    };
+
+    const openConfirmLocal = () => {
+      openConfirm({
+        headerText: "Aloha",
+        bodyHtml: "<div>Aloha <strong>Hola</strong></div>",
+        save: save,
+      });
+    };
+
+    return {
+      openConfirmLocal,
+    };
+  },
+};

package/docs/src/views/PageConfirm/PageConfirm.pug

@@ -0,0 +1,6 @@
+div
+  h1 AConfirm
+  button(
+    type="button"
+    @click="openConfirmLocal"
+  ) Open confirm

package/docs/src/views/PageConfirm/PageConfirm.vue

@@ -0,0 +1,2 @@
+<template lang="pug" src="./PageConfirm.pug"></template>
+<script src="./PageConfirm.js"></script>

package/docs/src/views/PageModal/PageModal.js

@@ -0,0 +1,22 @@
+import AModal from "../../../../src/AModal/AModal";
+
+export default {
+  name: "PageModal",
+  components: {
+    AModal,
+  },
+  data() {
+    return {
+      isModalOpen: false,
+    };
+  },
+  methods: {
+    openModal() {
+      this.isModalOpen = true;
+    },
+
+    closeModal() {
+      this.isModalOpen = false;
+    },
+  },
+};

package/docs/src/views/PageModal/PageModal.pug

@@ -0,0 +1,11 @@
+div
+  h1 AModal
+  button(
+    type="button"
+    @click="openModal"
+  ) Open Modal
+
+  a-modal(
+    v-if="isModalOpen"
+    :close="closeModal"
+  )

package/docs/src/views/PageModal/PageModal.vue

@@ -0,0 +1,2 @@
+<template lang="pug" src="./PageModal.pug"></template>
+<script src="./PageModal.js"></script>

package/docs/src/views/PageTable/PageTable.js

@@ -47,6 +47,8 @@ export default {
           id: "obj",
           path: "obj.aloha",
           sortId: "obj.aloha",
+          slot: "get",
+          filter: "boolean",
         },
         {
           label: "Obj2",

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "aloha-vue",
   "description": "Project aloha",
-  "version": "1.0.10",
+  "version": "1.0.13",
   "author": "Ilia Brykin",
   "dependencies": {
     "@popperjs/core": "2.11.5",
-    "aloha-css": "1.0.8",
+    "aloha-css": "1.0.10",
     "lodash-es": "^4.17.21",
     "vue": "3.2.37"
   }

package/src/AAlert/AAlert.js

@@ -0,0 +1,62 @@
+import {
+  h,
+} from "vue";
+
+export default {
+  name: "AAlert",
+  props: {
+    isVisible: {
+      type: Boolean,
+      required: false,
+    },
+    type: {
+      type: String,
+      required: false,
+      default: "danger",
+    },
+    isDismissible: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    alertClass: {
+      type: [String, Object],
+      required: false,
+      default: undefined,
+    },
+  },
+  emits: [
+    "onDismiss",
+  ],
+  computed: {
+    alertClassLocal() {
+      let alertClass = `a_alert a_alert_${ this.type }`;
+      if (this.isDismissible) {
+        alertClass += " a_alert_dismissible";
+      }
+      return alertClass;
+    },
+  },
+  methods: {
+    onDismissLocal() {
+      this.$emit("onDismiss");
+    },
+  },
+  render() {
+    return h("div", {
+      role: "alert",
+    }, [
+      this.isVisible && h("div", {
+        class: [this.alertClass, this.alertClassLocal],
+      }, [
+        this.$slots.default && this.$slots.default(),
+        this.isDismissible && h("button", {
+          type: "button",
+          class: "a_btn_close",
+          ariaLabel: "Close",
+          onClick: this.onDismissLocal,
+        })
+      ]),
+    ]);
+  },
+};

package/src/AGet/AGet.js

@@ -0,0 +1,139 @@
+import {
+  capitalize,
+  h,
+} from "vue";
+
+import FiltersAPI from "../compositionAPI/FiltersAPI";
+
+import {
+  forEach,
+  get,
+  isArray, isFunction,
+  isUndefined,
+} from "lodash-es";
+
+// @vue/component
+export default {
+  name: "AGet",
+  props: {
+    path: {
+      type: [String, Array],
+      required: true,
+      info: "Weg zu Informationen. Z.B.('a[0].b.c', 'vertrag.antrag_obj.pk', ['vertrag', aloha, 'pk'])",
+    },
+    data: {
+      type: [String, Number, Boolean, Array, Object, Date, Function, Symbol],
+      required: false,
+      default: undefined,
+      info: "Haupt-Objekt oder -Array, wo man sucht",
+    },
+    tag: {
+      type: String,
+      required: false,
+      default: "span",
+      info: "Semantisch-relevanter HTML-Tag.(span, div, ...)",
+    },
+    defaultValue: {
+      type: [String, Number, Boolean, Array, Object, Date, Function, Symbol],
+      required: false,
+      default: undefined,
+      info: "Standardwert, wenn Lodash-Funktion 'get' undefined zurückschickt",
+    },
+    filter: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    filterParameters: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    replacedWithDefault: {
+      type: [String, Number, Boolean, Array, Object, Date, Function, Symbol],
+      required: false,
+      default: undefined,
+      info: "Wenn das Wert, das Lodash-Funktion 'get' zurückschickt, === this.replacedWithDefault, dann this.defaultValue",
+    },
+  },
+  setup() {
+    const {
+      filterBoolean,
+      filterCurrency,
+      filterDate,
+      filterDefaultForEmpty,
+      filterEmail,
+      filterFileSize,
+      filterIban,
+      filterJson,
+      filterKeyValue,
+      filterLimitTo,
+      filterLink,
+      filterList,
+      filterSearchHighlight,
+    } = FiltersAPI();
+
+    return {
+      filterBoolean,
+      filterCurrency,
+      filterDate,
+      filterDefaultForEmpty,
+      filterEmail,
+      filterFileSize,
+      filterIban,
+      filterJson,
+      filterKeyValue,
+      filterLimitTo,
+      filterLink,
+      filterList,
+      filterSearchHighlight,
+    };
+  },
+  computed: {
+    valueLocal() {
+      const VALUE = get(this.data, this.pathLocal, this.defaultValue);
+      if (this.isValueEqualsWithValueThenDefaultValue(VALUE)) {
+        return this.defaultValue;
+      }
+      if (this.filter) {
+        const FILTER_FUNCTION_NAME = `filter${ capitalize(this.filter) }`;
+        if (isFunction(this[FILTER_FUNCTION_NAME])) {
+          return this[FILTER_FUNCTION_NAME](VALUE, ...this.filterParameters);
+        } 
+        console.warn(`filter "${ FILTER_FUNCTION_NAME }" ist not defined`);
+      }
+      return VALUE;
+    },
+
+    pathLocal() {
+      if (isArray(this.path)) {
+        return this.path.join(".");
+      }
+      return this.path;
+    },
+  },
+  methods: {
+    isValueEqualsWithValueThenDefaultValue(value) {
+      if (isUndefined(this.replacedWithDefault)) {
+        return false;
+      }
+      let isEquals = false;
+      if (isArray(this.replacedWithDefault)) {
+        forEach(this.replacedWithDefault, item => {
+          if (item === value) {
+            isEquals = true;
+            return false;
+          }
+        });
+      } else if (this.replacedWithDefault === value) {
+        isEquals = true;
+      }
+      return isEquals;
+    },
+  },
+  render() {
+    return h(this.tag, {
+      innerHTML: this.valueLocal,
+    });
+  },
+};

package/src/AModal/AModal.js

@@ -0,0 +1,406 @@
+import {
+  h,
+  Teleport,
+} from "vue";
+
+import {
+  filter,
+  isString,
+  forEach,
+  isFunction,
+  get,
+} from "lodash-es";
+
+const TAB_ELEMENTS = `a[href]:not([disabled]) a[role="button"]:not([disabled]), button:not([disabled]), textarea:not([disabled]), input:not([disabled]), select:not([disabled])`;
+const KEY_CODE_TAB = 9;
+const KEY_CODE_ESCAPE = 27;
+
+// @vue/component
+export default {
+  name: "Modal",
+  props: {
+    disabled: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    selectorClose: {
+      type: [String, Array],
+      required: false,
+      default: undefined,
+    },
+    withoutEscape: {
+      type: Boolean,
+      required: false,
+    },
+    size: {
+      type: String,
+      validator: value => ["small", "large", "xl", "fullscreen"].indexOf(value) !== -1,
+      default: undefined,
+    },
+    isModalHidden: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    save: {
+      type: Function,
+      required: false,
+      default: undefined,
+    },
+    saveButtonText: {
+      type: String,
+      required: false,
+      default: "Speichern",
+    },
+    saveButtonClass: {
+      type: [String, Array, Object],
+      required: false,
+      default: "a_btn a_btn_primary",
+    },
+    close: {
+      type: Function,
+      required: true,
+    },
+    closeButtonText: {
+      type: String,
+      required: false,
+      default: "Abbrechen",
+    },
+    closeButtonClass: {
+      type: [String, Array, Object],
+      required: false,
+      default: "a_btn a_btn_secondary",
+    },
+    isCloseButtonHidden: {
+      type: Boolean,
+      required: false,
+    },
+    headerText: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    headerTag: {
+      type: String,
+      required: false,
+      default: "h2",
+    },
+    bodyHtml: {
+      type: String,
+      required: false,
+      default: "",
+    },
+  },
+  data() {
+    return {
+      clientHeight: 0,
+      statusShow: false,
+      modalInModalCount: 0,
+      statusShowInfo: true,
+    };
+  },
+  computed: {
+    listFiltered() {
+      return filter(this.options.list, item => !item.readonly);
+    },
+
+    confirmOkLabel() {
+      return this.confirmOptions.okLabel || "_BTN_SAVE_";
+    },
+
+    confirmCancelLabel() {
+      return this.confirmOptions.cancelLabel || "_BTN_CANCEL_";
+    },
+
+    cancelLabel() {
+      return this.options.cancelLabel || "_BTN_CANCEL_";
+    },
+
+    autocomplete() {
+      return this.options.autocomplete || "on";
+    },
+
+    classSize() {
+      return `modal-${ this.size }`;
+    },
+
+    backdropStyle() {
+      if (this.modalInModalCount) {
+        return `z-index: ${ 1045 + (this.modalInModalCount * 10) };`;
+      }
+      return "";
+    },
+
+    modalStyle() {
+      if (this.modalInModalCount) {
+        return `z-index: ${ 1050 + (this.modalInModalCount * 10) };`;
+      }
+      return "";
+    },
+
+    htmlIdModalChild() {
+      return `modal_child_${ this.modalInModalCount }`;
+    },
+
+    htmlIdModal() {
+      return `modal_${ this.modalInModalCount }`;
+    },
+
+    htmlIdHeader() {
+      return `modal_header_${ this.modalInModalCount }`;
+    },
+
+    dependencyValues() {
+      const DEPS = {};
+      forEach(this.listFiltered, item => {
+        if (item.dependency) {
+          DEPS[item.id] = get(this.model, item.dependency);
+        }
+      });
+      return DEPS;
+    },
+
+    modalClassSize() {
+      if (this.size) {
+        return `a_modal_${ this.size }`;
+      }
+      return "";
+    },
+  },
+  mounted() {
+    this.showModal();
+  },
+  unmounted() {
+    this.hideModal();
+  },
+  methods: {
+    showModal() {
+      document.body.classList.add("modal-open");
+      this.setFocusToModal();
+      this.setListenerForPressButtons();
+      setTimeout(() => {
+        this.statusShow = true;
+      });
+    },
+
+    hideModal() {
+      document.body.classList.remove("modal-open");
+      this.onFocusByDestroy();
+      this.removeMouseEventListeners();
+      this.removeListenerForPressButtons();
+    },
+
+    setListenerForPressButtons() {
+      document.addEventListener("keydown", this.pressButton);
+    },
+
+    pressButton($event) {
+      const EVENT = $event || window.$event;
+      if (EVENT.key === "Escape" || EVENT.keyCode === KEY_CODE_ESCAPE) { // Escape
+        this.pressEscape();
+      } else if (EVENT.key === "Tab" || EVENT.keyCode === KEY_CODE_TAB) { // Tab
+        this.trapFocus(EVENT);
+      }
+    },
+
+    pressEscape() {
+      if (this.withoutEscape) {
+        return;
+      }
+      if (this.confirmOptions && isFunction(this.confirmOptions.cancelCallback)) {
+        this.confirmOptions.cancelCallback();
+      } else {
+        this.onClose();
+      }
+    },
+
+    trapFocus(EVENT) {
+      const FOCUSABLE_ELEMENTS = this.$refs.modal_parent.querySelectorAll(TAB_ELEMENTS);
+      if (FOCUSABLE_ELEMENTS.length === 0) {
+        EVENT.preventDefault();
+        return;
+      }
+      const FIRST_FOCUSABLE_ELEMENT = FOCUSABLE_ELEMENTS[0];
+      const LAST_FOCUSABLE_ELEMENT = FOCUSABLE_ELEMENTS[FOCUSABLE_ELEMENTS.length - 1];
+      if (EVENT.shiftKey) { // Shift + Tab
+        if (document.activeElement === FIRST_FOCUSABLE_ELEMENT) {
+          this.setFocusToModal(EVENT);
+          EVENT.preventDefault();
+        } else if (document.activeElement === this.$refs.modal) { // Focus in .modal
+          LAST_FOCUSABLE_ELEMENT.focus();
+          EVENT.preventDefault();
+        }
+      } else { // Tab
+        if (document.activeElement === LAST_FOCUSABLE_ELEMENT) {
+          this.setFocusToModal(EVENT);
+          EVENT.preventDefault();
+        }
+      }
+    },
+
+    setFocusToModal() {
+      if (this.$refs.modal) {
+        this.$refs.modal.focus();
+      }
+    },
+
+    removeListenerForPressButtons() {
+      document.removeEventListener("keydown", this.pressButton);
+    },
+
+    mousedown() {
+      this.addMouseEventListeners();
+      this.clientHeight = document.documentElement.clientHeight;
+    },
+
+    mousemove($event) {
+      const CLIENT_Y = $event.clientY;
+      const MODAL_BODY_HEIGHT = this.getModalBodyHeight(CLIENT_Y);
+      this.$refs.modal_body.style.maxHeight = `${ MODAL_BODY_HEIGHT }px`;
+      this.$refs.modal_body.style.height = `${ MODAL_BODY_HEIGHT }px`;
+    },
+
+    mouseup() {
+      this.removeMouseEventListeners();
+    },
+
+    mouseoutDocument() {
+      this.removeMouseEventListeners();
+    },
+
+    addMouseEventListeners() {
+      document.addEventListener("mousemove", this.mousemove);
+      document.addEventListener("mouseup", this.mouseup);
+      document.addEventListener("mouseleave", this.mouseoutDocument);
+    },
+
+    removeMouseEventListeners() {
+      document.removeEventListener("mouseup", this.mouseup);
+      document.removeEventListener("mousemove", this.mousemove);
+      document.removeEventListener("mouseout", this.mouseoutDocument);
+    },
+
+    getModalBodyHeight(clientY) {
+      const CLIENT_Y = clientY + 30 > this.clientHeight ? this.clientHeight - 15 : clientY;
+      const MODAL_HEADER_HEIGHT = this.$refs.modal_header.clientHeight;
+      const MODAL_FOOTER_HEIGHT = this.$refs.modal_footer.clientHeight;
+      const MODAL_BODY_HEIGHT = CLIENT_Y - MODAL_HEADER_HEIGHT - MODAL_FOOTER_HEIGHT - 15;
+      return MODAL_BODY_HEIGHT > 0 ? MODAL_BODY_HEIGHT : 0;
+    },
+
+    onFocusByDestroy() {
+      if (!this.selectorClose) {
+        return;
+      }
+      setTimeout(() => {
+        if (isString(this.selectorClose)) {
+          this.onFocusByDestroyForSelector({ selector: this.selectorClose });
+        } else {
+          forEach(this.selectorClose, selector => {
+            const STATUS_SUCCESS = this.onFocusByDestroyForSelector({ selector });
+            if (STATUS_SUCCESS) {
+              return false;
+            }
+          });
+        }
+      }, 300);
+    },
+
+    onFocusByDestroyForSelector({ selector }) {
+      const ELEMENT = document.querySelector(selector);
+      if (ELEMENT.length > 0) {
+        ELEMENT.focus();
+        return true;
+      }
+      return false;
+    },
+
+    saveLocal() {
+      if (isFunction(this.save)) {
+        this.save();
+      }
+    },
+
+    hideInfo() {
+      this.statusShowInfo = false;
+    },
+  },
+  render() {
+    return h(Teleport, {
+      to: "body",
+    }, [
+      h("div", {
+        ref: "modal_parent",
+      }, [
+        h("div", {
+          ref: "modal",
+          class: ["a_modal", {
+            a_modal_show: !this.isModalHidden
+          }],
+          tabindex: -1,
+          role: "dialog",
+          ariaModal: true,
+        }, [
+          h("div", {
+            class: ["a_modal_dialog a_modal_dialog_scrollable", this.modalClassSize],
+          }, [
+            h("div", {
+              class: "a_modal_content",
+            }, [
+              h("div", {
+                ref: "modal_header",
+                class: "a_modal_header",
+              }, [
+                this.$slots.header && this.$slots.header(),
+                this.headerText && h(this.headerTag, {
+                  class: "a_modal_title",
+                }, [
+                  h("span", null, this.headerText),
+                ]),
+                h("button", {
+                  type: "button",
+                  class: "a_btn_close",
+                  ariaLabel: "Close",
+                  disabled: this.disabled,
+                  onClick: this.close,
+                })
+              ]),
+              h("div", {
+                ref: "modal_body",
+                class: "a_modal_body",
+              }, [
+                this.$slots.body && this.$slots.body(),
+                this.bodyHtml && h("div", {
+                  innerHTML: this.bodyHtml,
+                }),
+              ]),
+              h("div", {
+                ref: "modal_footer",
+                class: "a_modal_footer",
+              }, [
+                this.$slots.footer && this.$slots.footer(),
+                this.save && h("button", {
+                  type: "button",
+                  class: this.saveButtonClass,
+                  disabled: this.disabled,
+                  onClick: this.save,
+                }, [
+                  h("span", null, this.saveButtonText),
+                ]),
+                !this.isCloseButtonHidden && h("button", {
+                  type: "button",
+                  class: this.closeButtonClass,
+                  disabled: this.disabled,
+                  onClick: this.close,
+                }, [
+                  h("span", null, this.closeButtonText),
+                ]),
+              ]),
+            ]),
+          ]),
+        ]),
+      ]),
+    ]);
+  },
+};

package/src/AModalConfirm/AModalConfirm.js

@@ -0,0 +1,35 @@
+import {
+  computed,
+  h,
+} from "vue";
+
+import AModal from "../AModal/AModal";
+
+import ConfirmAPI from "../compositionAPI/ConfirmAPI";
+
+// @vue/component
+export default {
+  name: "AModalConfirm",
+  setup() {
+    const {
+      closeConfirm,
+      confirmOptions,
+      isModalHidden,
+    } = ConfirmAPI();
+
+    const modalProps = computed(() => {
+      return {
+        close: closeConfirm,
+        isModalHidden: isModalHidden.value,
+        ...confirmOptions.value
+      };
+    });
+
+    return {
+      modalProps,
+    };
+  },
+  render() {
+    return h(AModal, this.modalProps);
+  },
+};

package/src/ATable/ATable.js

@@ -6,6 +6,7 @@ import {
   toRef,
 } from "vue";
 
+import AGet from "../AGet/AGet";
 import ATableCountProPage from "./ATableCountProPage/ATableCountProPage";
 import ATableHeader from "./ATableHeader/ATableHeader";
 import ATablePagination from "./ATablePagination/ATablePagination";
@@ -21,7 +22,13 @@ import {
   getModelColumnsVisibleDefault,
 } from "./utils/utils";
 import {
-  cloneDeep, forEach, get, isArray, isNil, isPlainObject, keyBy,
+  cloneDeep,
+  forEach,
+  get,
+  isArray,
+  isNil,
+  isPlainObject,
+  keyBy,
   orderBy,
   startsWith,
   uniqueId,
@@ -474,7 +481,18 @@ export default {
           return h(ATableTr, {
             row,
             rowIndex,
-          }, this.$slots);
+          }, {
+            get: vm => [
+              h(AGet, {
+                data: vm.row,
+                path: vm.column.path,
+                filter: vm.column.filter,
+                filterParameters: vm.column.filterParameters,
+                defaultValue: vm.column.defaultValue,
+              }),
+            ],
+            ...this.$slots,
+          });
         })),
       ]),
       !this.hasRows && h("div", {

package/src/compositionAPI/ConfirmAPI.js

@@ -0,0 +1,52 @@
+import {
+  ref,
+} from "vue";
+
+import {
+  forEach, isFunction,
+} from "lodash-es";
+
+const isModalHidden = ref(true);
+const confirmOptions = ref({});
+// bodyHtml
+// close
+// closeButtonClass
+// closeButtonText
+// disabled
+// headerTag
+// headerText
+// save
+// saveButtonClass
+// saveButtonText
+// selectorClose
+// size
+
+export default function ConfirmAPI() {
+  const changeConfirmOptions = (args = {}) => {
+    forEach(args, (argumentValue, argumentKey) => {
+      confirmOptions.value[argumentKey] = argumentValue;
+    });
+  };
+
+  const openConfirm = (args = {}) => {
+    changeConfirmOptions(args);
+
+    isModalHidden.value = false;
+  };
+
+  const closeConfirm = () => {
+    if (isFunction(confirmOptions.value.close)) {
+      confirmOptions.value.close();
+    }
+    confirmOptions.value = {};
+    isModalHidden.value = true;
+  };
+
+  return {
+    changeConfirmOptions,
+    closeConfirm,
+    confirmOptions,
+    isModalHidden,
+    openConfirm,
+  };
+}