aloha-vue 1.0.9 → 1.0.12

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.10",
     "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/components/TheMenu/TheMenu.js

@@ -43,6 +43,11 @@ export default {
           name: "PageAccordion",
           label: "Accordion",
         },
+        {
+          id: "alert",
+          name: "PageAlert",
+          label: "Alert",
+        },
       ],
     };
   },

package/docs/src/router/index.js

@@ -54,6 +54,11 @@ const ROUTES = [
     name: "PageAccordion",
     component: () => import(/* webpackChunkName: "PageAccordionBootstrap" */ "../views/PageAccordion/PageAccordion.vue"),
   },
+  {
+    path: "/alert",
+    name: "PageAlert",
+    component: () => import(/* webpackChunkName: "PageAlert" */ "../views/PageAlert/PageAlert.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/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.9",
+  "version": "1.0.12",
   "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/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,
@@ -191,7 +198,7 @@ export default {
       isLoadingOptions: computed(() => this.isLoadingOptions),
       isLoadingTable: computed(() => this.isLoadingTable),
       rowActions: computed(() => this.rowActions),
-      tableId: computed(() => this.tableId),
+      tableId: computed(() => this.id),
     };
   },
   setup(props, context) {
@@ -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/ATable/ATableHeaderTh/ATableHeaderTh.js

@@ -79,7 +79,7 @@ export default {
         "a_table__th a_table__cell",
         {
           a_table__th_draggable: !this.isLocked && !this.isLoadingOptions,
-          a_table__th_sorting: this.isSortAscending || this.isSortDescending,
+          a_table__th_sorting: this.isSorting,
         }
       ];
     },
@@ -104,6 +104,12 @@ export default {
       return this.column.sortId;
     },
 
+    isSorting() {
+      return this.isSortable &&
+        (this.isSortAscending ||
+          this.isSortDescending);
+    },
+
     isSortAscending() {
       return this.modelSort === this.sortId;
     },