aloha-vue 1.0.170 → 1.0.172

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

@@ -253,6 +253,22 @@ export default {
           icon: "Dnd",
           titleHtml: "PageTitle PageTitle PageTitle PageTitle PageTitle PageTitle",
         },
+        {
+          id: "svg",
+          label: "Svg",
+          to: {
+            name: "PageSvg",
+          },
+          icon: "Dnd",
+        },
+        {
+          id: "wizard",
+          label: "Wizard",
+          to: {
+            name: "PageWizard",
+          },
+          icon: "Dnd",
+        },
       ],
     };
   },

package/docs/src/router/index.js

@@ -139,6 +139,16 @@ const ROUTES = [
     name: "PageTitle",
     component: () => import(/* webpackChunkName: "PageTitle" */ "../views/PageTitle/PageTitle.vue"),
   },
+  {
+    path: "/svg",
+    name: "PageSvg",
+    component: () => import(/* webpackChunkName: "PageSvg" */ "../views/PageSvg/PageSvg.vue"),
+  },
+  {
+    path: "/wizard",
+    name: "PageWizard",
+    component: () => import(/* webpackChunkName: "PageWizard" */ "../views/PageWizard/PageWizard.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/PageSvg/PageSvg.js

@@ -0,0 +1,23 @@
+export default {
+  name: "PageSvg",
+  components: {
+
+  },
+  setup() {
+    const pathD = `M3,1 
+    A3,1 0 0,0 3,2
+    A0.8,1 0 0,1 3,4 
+    A3,1 0 0,0 0,5 
+    V15 
+    A5,1 0 1,0 10,15 
+    V5 
+    A3,1 0 0,0 7,4 
+    A0.8,1 0 0,1 7,2 
+    A3,1 0 0,0 7,1
+    A2.4,1 0 0,0 3,1`;
+
+    return {
+      pathD,
+    };
+  },
+};

package/docs/src/views/PageSvg/PageSvg.pug

@@ -0,0 +1,18 @@
+div
+  h1 SVG
+
+  svg(
+    width="300"
+    height="300"
+    xmlns="http://www.w3.org/2000/svg"
+    version="1.1"
+    viewBox="0 0 18 18"
+    style="border: 1px solid red;"
+  )
+    path(
+      :d="pathD"
+    )
+
+  img(
+    src="public/Width.png"
+  )

package/docs/src/views/PageSvg/PageSvg.vue

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

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

@@ -17,7 +17,7 @@ export default {
         {
           label: "Aloha",
           id: "aloha",
-          path: "aloha",
+          keyLabel: "aloha",
           sortId: "aloha",
           locked: true,
           grow: 2,
@@ -28,34 +28,34 @@ export default {
         {
           label: "Alohafreidsfdsfdsfsdfdsfdsfdsfsd",
           id: "aloha1",
-          path: "aloha",
+          keyLabel: "aloha",
           sortId: "aloha",
           grow: 0,
-          footerPath: "aloha",
+          footerKeyLabel: "aloha",
           class: "a_justify_content_end",
         },
         {
           label: "Hola",
           id: "hola",
-          path: "hola",
+          keyLabel: "hola",
           sortId: "hola",
-          footerPath: "hola",
+          footerKeyLabel: "hola",
         },
         {
           label: "Default",
           id: "default",
-          path: "default",
+          keyLabel: "default",
           defaultValue: "-",
-          footerPath: "default",
+          footerKeyLabel: "default",
           footerDefaultValue: "-",
         },
         {
           label: "Hola2",
           id: "hola2",
-          path: "hola",
+          keyLabel: "hola",
           sortId: "hola",
           hide: true,
-          footerPath: "hola",
+          footerKeyLabel: "hola",
         },
         {
           label: "Slot",
@@ -66,44 +66,44 @@ export default {
         {
           label: "Obj",
           id: "obj",
-          path: "obj.aloha",
+          keyLabel: "obj.aloha",
           sortId: "obj.aloha",
           slot: "get",
           filter: "boolean",
-          footerPath: "obj.aloha",
+          footerKeyLabel: "obj.aloha",
           width: 220,
         },
         {
           label: "Test",
           id: "test",
-          path: "test",
+          keyLabel: "test",
           sortId: "test",
           width: 200,
         },
         {
           label: "Obj2",
           id: "obj2",
-          path: "obj.aloha",
+          keyLabel: "obj.aloha",
           sortId: "obj.aloha",
-          footerPath: "obj.aloha",
+          footerKeyLabel: "obj.aloha",
         },
         {
           label: "Obj3",
           id: "obj3",
-          path: "obj.aloha",
-          footerPath: "obj.aloha",
+          keyLabel: "obj.aloha",
+          footerKeyLabel: "obj.aloha",
         },
         {
           label: "Obj4",
           id: "obj4",
-          path: "obj.aloha",
-          footerPath: "obj.aloha",
+          keyLabel: "obj.aloha",
+          footerKeyLabel: "obj.aloha",
         },
         {
           label: "Geld",
           id: "geld",
-          path: "geld",
-          footerPath: "geld",
+          keyLabel: "geld",
+          footerKeyLabel: "geld",
         },
 
         {
@@ -159,6 +159,7 @@ export default {
           disabled: true,
           icon: "Plus",
           isConfirm: true,
+          isAllRowsSelected: true,
         },
         {
           isDivider: true,
@@ -265,6 +266,7 @@ export default {
               bez: "Aloha 3",
             },
           ],
+          hasNotClose: true,
           // url: "katalog/?fields=id&fields=bez&key=syterminberechnung",
           keyLabel: "bez",
           keyId: "id",

package/docs/src/views/PageWizard/PageWizard.js

@@ -0,0 +1,160 @@
+import {
+  ref,
+} from "vue";
+
+
+import AForm from "../../../../src/ui/AForm/AForm";
+import AWizard from "../../../../src/AWizard/AWizard";
+
+export default {
+  name: "PageWizard",
+  components: {
+    AForm,
+    AWizard,
+  },
+  setup() {
+    const model = ref({
+      type: "square",
+      isForwardStepButtonDisabled: true,
+      isBackStepButtonDisabled: false,
+      isStepNumberVisible: true,
+      isForwardButtonDisabled: false,
+      isBackButtonDisabled: false,
+      isForwardButtonHide: false,
+      isBackButtonHide: false,
+      isForwardLastButtonHide: false,
+      isBackFirstButtonHide: false,
+      isButtonsLoading: false,
+    });
+
+    const formData = [
+      {
+        id: "type",
+        type: "select",
+        label: "Type",
+        keyId: "value",
+        keyLabel: "label",
+        data: [
+          {
+            label: "basic",
+            value: "basic",
+          },
+          {
+            label: "arrows",
+            value: "arrows",
+          },
+          {
+            label: "square",
+            value: "square",
+          },
+          {
+            label: "round",
+            value: "round",
+          },
+        ],
+      },
+      {
+        id: "isForwardStepButtonDisabled",
+        type: "switch",
+        label: "isForwardStepButtonDisabled",
+      },
+      {
+        id: "isBackStepButtonDisabled",
+        type: "switch",
+        label: "isBackStepButtonDisabled",
+      },
+      {
+        id: "isForwardButtonDisabled",
+        type: "switch",
+        label: "isForwardButtonDisabled",
+      },
+      {
+        id: "isBackButtonDisabled",
+        type: "switch",
+        label: "isBackButtonDisabled",
+      },
+      {
+        id: "isForwardButtonHide",
+        type: "switch",
+        label: "isForwardButtonHide",
+      },
+      {
+        id: "isBackButtonHide",
+        type: "switch",
+        label: "isBackButtonHide",
+      },
+      {
+        id: "isForwardLastButtonHide",
+        type: "switch",
+        label: "isForwardLastButtonHide",
+      },
+      {
+        id: "isBackFirstButtonHide",
+        type: "switch",
+        label: "isBackFirstButtonHide",
+      },
+      {
+        id: "isStepNumberVisible",
+        type: "switch",
+        label: "isStepNumberVisible",
+      },
+      {
+        id: "isButtonsLoading",
+        type: "switch",
+        label: "isButtonsLoading",
+      },
+    ];
+
+    const wizardSteps = [
+      {
+        slot: "step1",
+        label: "Schritt 1",
+        title: "Schritt 1",
+      },
+      {
+        slot: "step2",
+        label: "Schritt 2",
+        title: "Schritt 2",
+      },
+      {
+        slot: "step3",
+        label: "Schritt 3",
+        title: "Schritt 3",
+        error: true,
+      },
+      {
+        slot: "step4",
+        label: "Schritt 4",
+        title: "Schritt 4",
+        warning: true,
+      },
+      {
+        slot: "step5",
+        label: "Schritt 5",
+        title: "Schritt 5",
+      },
+      {
+        slot: "step6",
+        label: "Schritt langeeeeeeeeeeeeeeeeeeeeeeee text 6",
+        title: "Schritt 6",
+      },
+      {
+        slot: "step7",
+        label: "Schritt 7",
+        title: "Schritt 7",
+      },
+    ];
+
+    const text = `Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque nisl eros, 
+        pulvinar facilisis justo mollis, auctor consequat urna. Morbi a bibendum metus. 
+        Donec scelerisque sollicitudin enim eu venenatis. Duis tincidunt laoreet ex, 
+        in pretium orci vestibulum eget. Class aptent taciti sociosqu ad litora torquent`;
+
+    return {
+      formData,
+      model,
+      text,
+      wizardSteps,
+    };
+  },
+};

package/docs/src/views/PageWizard/PageWizard.pug

@@ -0,0 +1,62 @@
+div
+  h1 Wizard
+div
+  a-form(
+    v-model="model"
+    :data="formData"
+  )
+
+  a-wizard.a_mt_4(
+    :steps="wizardSteps"
+    :type="model.type"
+    :is-forward-step-button-disabled="model.isForwardStepButtonDisabled"
+    :is-back-step-button-disabled="model.isBackStepButtonDisabled"
+    :is-step-number-visible="model.isStepNumberVisible"
+    :is-forward-button-disabled="model.isForwardButtonDisabled"
+    :is-back-button-disabled="model.isBackButtonDisabled"
+    :is-forward-button-hide="model.isForwardButtonHide"
+    :is-back-button-hide="model.isBackButtonHide"
+    :is-forward-last-button-hide="model.isForwardLastButtonHide"
+    :is-back-first-button-hide="model.isBackFirstButtonHide"
+    :is-buttons-loading="model.isButtonsLoading"
+  )
+    template(
+      v-slot:toolbar
+    )
+      button.a_btn.a_btn_primary Slot-button
+
+    template(
+      v-slot:step1
+    )
+      h2 Schritt 1
+      p {{ text }}
+
+    template(
+      v-slot:step2
+    )
+      h2 Schritt 2
+      p {{ text }}
+
+    template(
+      v-slot:step3
+    )
+      h2 Schritt 3
+      p {{ text }}
+
+    template(
+      v-slot:step4
+    )
+      h2 Schritt 4
+      p {{ text }}
+
+    template(
+      v-slot:step5
+    )
+      h2 Schritt 5
+      p {{ text }}
+
+    template(
+      v-slot:step6
+    )
+      h2 Schritt 6
+      p {{ text }}

package/docs/src/views/PageWizard/PageWizard.vue

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

package/docs/styles/styles.scss

@@ -1,3 +1,7 @@
 @import "./node_modules/aloha-css/sass/aloha";
 
 @import "../src/styles/styles";
+
+.a_menu__page {
+  padding: 0 1rem;
+}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "aloha-vue",
   "description": "Project aloha",
-  "version": "1.0.170",
+  "version": "1.0.172",
   "author": "Ilia Brykin",
   "scripts": {
     "build-icons": "node scriptsNode/iconsSvgToJs.js bootstrap3 && node scriptsNode/iconsSvgToJs.js bootstrap-1-9-1"

package/src/AAccordion/AAccordionItem.js

@@ -4,9 +4,13 @@ import {
   inject,
   ref,
   resolveComponent,
-  toRef, watch,
+  toRef,
+  watch,
+  withDirectives,
 } from "vue";
 
+import ASafeHtml from "../directives/ASafeHtml";
+
 import {
   cloneDeep,
   get,
@@ -222,9 +226,9 @@ export default {
               parentIndexes: this.parentIndexes,
               id: this.id,
             }) :
-            this.contentLocal && h("div", {
-              innerHTML: this.contentLocal,
-            }),
+            this.contentLocal && withDirectives(h("div"), [
+              [ASafeHtml, this.contentLocal],
+            ]),
         this.hasChildren && h("div", {
           class: ["a_accordion", {
             a_accordion__with_gap: this.withGap,
@@ -258,9 +262,9 @@ export default {
             parentIndexes: this.parentIndexes,
             id: this.id,
           }),
-          this.labelLocal && h("span", {
-            innerHTML: this.labelLocal,
-          }),
+          this.labelLocal && withDirectives(h("span"), [
+            [ASafeHtml, this.labelLocal],
+          ]),
         ]),
       ]),
       h("div", {

package/src/AButton/AButton.js

@@ -63,7 +63,7 @@ export default {
     loadingClass: {
       type: [String, Object],
       required: false,
-      default: undefined,
+      default: "a_spinner_small",
     },
     loadingAlign: {
       type: String,
@@ -128,6 +128,7 @@ export default {
     extraTranslate: {
       type: Object,
       required: false,
+      default: undefined,
     },
   },
   emits: [
@@ -204,6 +205,7 @@ export default {
       }),
       this.$slots.default && this.$slots.default(),
       this.isTextVisible && h(ATranslation, {
+        tag: "span",
         class: this.textClass,
         html: this.text,
         extra: this.extraTranslate,
@@ -211,6 +213,7 @@ export default {
       }),
       this.isTextScreenReaderVisible && h(ATranslation, {
         class: "a_sr_only",
+        tag: "span",
         html: this.text,
         extra: this.extraTranslate,
       }),

package/src/AFormElement/AFormElementBtnClear/AFormElementBtnClear.js

@@ -35,11 +35,13 @@ export default {
     return h("button", {
       class: ["a_form_element__btn_close", this.clearButtonClass],
       type: "button",
+      tabindex: -1,
+      ariaHidden: true,
       disabled: this.disabled,
       onClick: this.clearLocal,
     }, [
       h(ATranslation, {
-        class: "a_absolute_all",
+        class: "a_position_absolute_all",
         tag: "span",
         title: "_REMOVE_FIELD_CONTENT_",
         "aria-hidden": "true",

package/src/AGet/AGet.js

@@ -1,11 +1,14 @@
 import {
-  capitalize,
   h,
+  withDirectives,
 } from "vue";
 
 import AFiltersAPI from "../compositionAPI/AFiltersAPI";
 
+import ASafeHtml from "../directives/ASafeHtml";
+
 import {
+  capitalize,
   forEach,
   get,
   isArray,
@@ -14,11 +17,12 @@ import {
   isUndefined,
 } from "lodash-es";
 
+
 // @vue/component
 export default {
   name: "AGet",
   props: {
-    path: {
+    keyLabel: {
       type: [String, Array],
       required: true,
       info: "Weg zu Informationen. Z.B.('a[0].b.c', 'vertrag.antrag_obj.pk', ['vertrag', aloha, 'pk'])",
@@ -65,7 +69,7 @@ export default {
   },
   computed: {
     valueLocal() {
-      let value = get(this.data, this.pathLocal);
+      let value = get(this.data, this.keyLabelLocal);
       if (isNil(value)) {
         value = this.defaultValue;
       }
@@ -82,11 +86,11 @@ export default {
       return value;
     },
 
-    pathLocal() {
-      if (isArray(this.path)) {
-        return this.path.join(".");
+    keyLabelLocal() {
+      if (isArray(this.keyLabel)) {
+        return this.keyLabel.join(".");
       }
-      return this.path;
+      return this.keyLabel;
     },
   },
   methods: {
@@ -109,8 +113,8 @@ export default {
     },
   },
   render() {
-    return h(this.tag, {
-      innerHTML: this.valueLocal,
-    });
+    return withDirectives(h(this.tag), [
+      [ASafeHtml, this.valueLocal],
+    ]);
   },
 };

package/src/AIcon/AIcon.js

@@ -1,8 +1,11 @@
 import {
   h,
   inject,
+  withDirectives,
 } from "vue";
 
+import ASafeHtml from "../directives/ASafeHtml";
+
 import Aloha from "./Icons/Aloha";
 import AngleDown from "./Icons/AngleDown";
 import AngleLeft from "./Icons/AngleLeft";
@@ -35,6 +38,7 @@ import Search from "./Icons/Search";
 import ThList from "./Icons/ThList";
 import Trash from "./Icons/Trash";
 import _NoImage from "./Icons/_NoImage";
+import PinFill from "./Icons/bootstrap-1-9-1/PinFill";
 
 import {
   assign,
@@ -87,6 +91,7 @@ export default {
       OptionHorizontal,
       OptionVertical,
       Pencil,
+      PinFill,
       Plus,
       Reset,
       Search,
@@ -115,7 +120,6 @@ export default {
     attributesLocal() {
       const ATTRIBUTES = {
         class: ["a_icon", this.iconClass],
-        innerHTML: this.iconSvg,
       };
       if (this.ariLabel) {
         ATTRIBUTES["aria-label"] = this.ariLabel;
@@ -126,6 +130,8 @@ export default {
     },
   },
   render() {
-    return h(this.iconTag, this.attributesLocal, this.$slots.default && this.$slots.default());
+    return withDirectives(h(this.iconTag, this.attributesLocal, this.$slots.default && this.$slots.default()), [
+      [ASafeHtml, this.iconSvg],
+    ]);
   },
 };

package/src/AIcon/SVG-icons/waage.svg

@@ -0,0 +1,19 @@
+<svg
+  width="300"
+  height="300"
+  xmlns="http://www.w3.org/2000/svg"
+  version="1.1"
+  viewBox="0 0 18 18"
+>
+  <path d="M3,1
+    A3,1 0 0,0 3,2
+    A0.8,1 0 0,1 3,4
+    A3,1 0 0,0 0,5
+    V17
+    A5,1 0 1,0 10,17
+    V5
+    A3,1 0 0,0 7,4
+    A0.8,1 0 0,1 7,2
+    A3,1 0 0,0 7,1
+    A2.4,1 0 0,0 3,1"></path>
+</svg>