Merge pull request #51 from anexia-it/release-v1.20.8

Release v1.20.8
anexia-it · Mar 2, 2023 · 8996b53 · 8996b53
2 parents ecd3540 + b3a0426
commit 8996b53
Show file tree

Hide file tree

Showing 26 changed files with 313 additions and 20 deletions.
diff --git a/docs/plugins/anx-alert.md b/docs/plugins/anx-alert.md
@@ -0,0 +1,9 @@
+The [AnxAlert Component](/vue-ui-components/#/Components/AnxAlert) is used to show alert messages on the screen. With the *AnxAlertPlugin* those alert messages can be shown programmatically. The plugin automatically renderst the *AnxAlert Component* .  
+
+Attention:
+By default, the alert is simply appended to the body, so please provide a *class* or *ID* as a second parameter.
+with the help of a "querySelector" the alert message will be appended after the 'div'.
+
+Optionally all other attributes are accepted as well 
+
+For a documentation on how to use this plugin please refer to the [AnxAlert Component Documentation](/vue-ui-components/#/Components/AnxAlert).
diff --git a/docs/plugins/anx-modal.md b/docs/plugins/anx-modal.md
@@ -0,0 +1,5 @@
+The [AnxModal Component](/vue-ui-components/#/Components/AnxModal) is used for generating dynamic modals. Modals are dialogs that can be used to display information for users.
+The plugin automatically renderst the *AnxModal Component* and shows a push notification.
+
+
+For a documentation on how to use this plugin please refer to the [AnxModal Component Documentation](/vue-ui-components/#/Components/AnxModal).npm
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@anexia/vue-ui-components",
-  "version": "1.20.7",
+  "version": "1.20.8",
   "description": "A Vue component library containing several components, plugins and icons that match the Anexia Corporate Design guidelines",
   "author": "ANEXIA Internetdienstleistungs Gmbh <[email protected]> (https://anexia.com)",
   "license": "MIT",

diff --git a/src/components/AnxAlert/AnxAlert.spec.ts b/src/components/AnxAlert/AnxAlert.spec.ts
@@ -1,5 +1,6 @@
-import { shallowMount, mount } from "@vue/test-utils";
+import { shallowMount, mount, createLocalVue } from "@vue/test-utils";
 import { AnxAlert } from "@/components";
+import { AnxAlertPlugin } from "@/plugins";
 
 describe("AnxAlert.vue", () => {
   it("renders component", () => {
@@ -100,4 +101,29 @@ describe("AnxAlert.vue", () => {
     await wrapper.vm.$nextTick();
     expect(wrapper.classes()).toContain("hidden");
   });
+
+  it("mounts correctly via AnxAlertPlugin", async () => {
+    const testMessage = "Alert Plugin Test"
+
+    // Create a local vue instance and install the AnxModalPlugin
+    const localVue = createLocalVue();
+    localVue.use(AnxAlertPlugin);
+
+     // Create a simple body component, where the modal will be mounted
+     const bodyComponent = {
+      template: "<body></body>"
+    };
+    const wrapper = mount(bodyComponent, {
+      localVue
+    });
+
+    // Check if the show function has been registered
+    // @ts-ignore
+    expect(wrapper.vm.$anxAlert.show).toBeTruthy();
+
+    // @ts-ignore
+    const createdAlert = wrapper.vm.$anxAlert.show(testMessage);
+    // Check if the modal component has been returned
+    expect(createdAlert).toBeTruthy();
+  });
 });
diff --git a/src/components/AnxAlert/AnxAlert.vue b/src/components/AnxAlert/AnxAlert.vue
@@ -69,6 +69,10 @@ export default class AnxAlert extends Vue {
   /** Emit the dismiss event */
   @Emit("input")
   input(val: boolean) {
+    if (!val) {
+      this.hideAction();
+    }
+
     return val;
   }
 
@@ -88,7 +92,6 @@ export default class AnxAlert extends Vue {
   /** Set visibility when mounting */
   private created() {
     this.visibility = this.value;
-
     /** If the Alert is visible by default, the show action has to be called at the beginning */
     if (this.value) {
       this.showAction();

diff --git a/src/components/AnxFooter/AnxFooter.vue b/src/components/AnxFooter/AnxFooter.vue
@@ -32,13 +32,13 @@
                       </span>
                       {{ companyName }}
                     </div>
-                    <anx-link
+                    <div
                       v-for="(link, i) in links"
                       :key="i"
-                      :href="link.link"
+                      class="anx-footer-link"
                     >
-                      {{ link.text }}
-                    </anx-link>
+                      <anx-link :href="link.link">{{ link.text }}</anx-link>
+                    </div>
                   </slot>
                 </div>
               </div>
@@ -227,6 +227,12 @@ export default class AnxFooter extends Vue {
 .anx-footer-elements {
   display: flex;
 }
+.anx-footer-link {
+  display: inline;
+}
+.anx-footer-link:not(:last-of-type):after {
+  content: " | ";
+}
 .anx-footer-right {
   text-align: right;
   width: 100%;
@@ -253,9 +259,6 @@ export default class AnxFooter extends Vue {
   a {
     color: $anx-secondary-color;
     text-decoration: none;
-    &:not(:last-of-type):after {
-      content: " | ";
-    }
     &:hover {
       color: $anx-secondary-color-dark;
       -webkit-transition: all 0.2s ease-in-out;

diff --git a/src/components/AnxModal/AnxModal.spec.ts b/src/components/AnxModal/AnxModal.spec.ts
@@ -1,5 +1,6 @@
-import { shallowMount, mount } from "@vue/test-utils";
+import { shallowMount, mount, createLocalVue } from "@vue/test-utils";
 import { AnxButton, AnxModal } from "@/components";
+import { AnxModalPlugin } from '@/plugins';
 
 describe("AnxModal.vue", () => {
   it("renders and destroys component correctly", () => {
@@ -133,4 +134,30 @@ describe("AnxModal.vue", () => {
     expect(wrapper1.emitted("close")).toBeTruthy();
     wrapper1.destroy();
   });
+
+  it("mounts correctly via AnxModalPlugin", async () => {
+    const testMessage = "This is a test"
+
+    // Create a local vue instance and install the AnxModalPlugin
+    const localVue = createLocalVue();
+    localVue.use(AnxModalPlugin);
+
+     // Create a simple body component, where the modal will be mounted
+     const bodyComponent = {
+      template: "<body></body>"
+    };
+    const wrapper = mount(bodyComponent, {
+      localVue
+    });
+
+    // Check if the show function has been registered
+    // @ts-ignore
+    expect(wrapper.vm.$anxModal.show).toBeTruthy();
+
+    // @ts-ignore
+    const createdModal = wrapper.vm.$anxModal.show(testMessage);
+
+    // Check if the modal component has been returned
+    expect(createdModal).toBeTruthy();
+  });
 });
diff --git a/src/components/AnxModal/AnxModal.vue b/src/components/AnxModal/AnxModal.vue
@@ -23,8 +23,9 @@
           </div>
         </div>
         <div class="modal-body  anx-modal-body">
-          <!-- @slot Use this slot for your content -->
-          <slot />
+          <slot>
+            <span v-html="content"></span>
+          </slot>
         </div>
         <div
           v-if="confirm !== null"
@@ -93,6 +94,7 @@ import AnxButton from "../AnxButton/AnxButton.vue";
 export default class AnxModal extends Vue {
   /** This is the title of the modal */
   @Prop({ default: "Enter a title for the modal" }) title!: string;
+  @Prop({ default: "Enter a title for the modal" }) content!: string;
 
   /** Defines whether the modal has a close button or not */
   @Prop({ default: null }) hasCloseButton!: boolean | null;

diff --git a/src/components/index.d.ts b/src/components/index.d.ts
@@ -32,7 +32,6 @@ export declare class AnxTextarea extends Vue {}
 export declare class AnxTitle extends Vue {}
 export declare class AnxToast extends Vue {}
 export declare class AnxToaster extends Vue {}
-
 declare const Components: {
   AnxAlert: VueComponent;
   AnxButton: VueComponent;

diff --git a/src/index.d.ts b/src/index.d.ts
@@ -2,10 +2,12 @@ import Vue from "vue";
 import Components from "./components";
 import { AbstractModel } from "./lib";
 import {
+  AnxAlertPlugin,
   AnxIconsPlugin,
   AnxIconsNames,
   AnxToastPlugin,
-  AnxVariablesPlugin
+  AnxVariablesPlugin,
+  AnxModalPlugin
 } from "./plugins";
 
 declare module "@anexia/vue-ui-components";
@@ -19,11 +21,13 @@ export * from "./components";
 
 // Exporting plugins separately
 export {
+  AnxAlertPlugin,
   AbstractModel,
   AnxIconsNames,
   AnxIconsPlugin,
   AnxToastPlugin,
   AnxVariablesPlugin,
+  AnxModalPlugin,
   Components
 };
 

diff --git a/src/index.ts b/src/index.ts
@@ -2,9 +2,11 @@ import _Vue from "vue";
 import Components from "./components";
 import { AbstractModel } from "./lib/models/AbstractModel";
 import {
+  AnxAlertPlugin,
   AnxIconsPlugin,
   AnxIconsNames,
   AnxToastPlugin,
+  AnxModalPlugin,
   AnxVariablesPlugin
 } from "./plugins";
 
@@ -15,13 +17,18 @@ const UIPlugin = {
     for (const name in Components) {
       Vue.component(name, (Components as any)[name]);
     }
+    /** Register AnxAlertPlugin */
+    Vue.use(AnxAlertPlugin, options);
 
     /** Register the AnxIconsPlugin (this registers all icons as components) */
     Vue.use(AnxIconsPlugin, options);
 
     /** Register the AnxToastPlugin */
     Vue.use(AnxToastPlugin, options);
 
+    /** Register the AnxModalPlugin */
+    Vue.use(AnxModalPlugin, options);
+
     /** Register the AnxVariablesPlugin */
     Vue.use(AnxVariablesPlugin, options);
   }
@@ -34,9 +41,11 @@ export * from "./components";
 // Export plugins and ohter helpful tools
 export {
   Components,
+  AnxAlertPlugin,
   AbstractModel,
   AnxIconsNames,
   AnxIconsPlugin,
   AnxToastPlugin,
+  AnxModalPlugin,
   AnxVariablesPlugin
 };
diff --git a/src/main.ts b/src/main.ts
@@ -1,4 +1,10 @@
-import { AnxIconsPlugin, AnxToastPlugin, AnxVariablesPlugin } from "./plugins";
+import {
+  AnxIconsPlugin,
+  AnxModalPlugin,
+  AnxAlertPlugin,
+  AnxToastPlugin,
+  AnxVariablesPlugin
+} from "./plugins";
 import Vue from "vue";
 import App from "./App.vue";
 import i18n from "./i18n";
@@ -9,8 +15,10 @@ Vue.config.productionTip = false;
 Vue.config.productionTip = false;
 
 Vue.use(VeeValidate);
+Vue.use(AnxAlertPlugin);
 Vue.use(AnxIconsPlugin);
 Vue.use(AnxToastPlugin);
+Vue.use(AnxModalPlugin);
 Vue.use(AnxVariablesPlugin);
 
 new Vue({

diff --git a/src/plugins/alert/api.js b/src/plugins/alert/api.js
@@ -0,0 +1,55 @@
+import AnxAlert from "../../components/AnxAlert/AnxAlert.vue";
+
+const Api = (Vue, globalOptions = {}) => {
+  // This is alert stuff
+  const alert = {
+    text: null,
+    target: null
+  };
+
+  function getAlert(propsData, target) {
+    const componentClass = Vue.extend(AnxAlert);
+    const instance = new componentClass({ propsData });
+    instance.$mount();
+
+    if (alert[instance]) {
+      return alert[instance];
+    } else {
+      if (target !== undefined) {
+        document.querySelector(target).appendChild(instance.$el);
+      } else {
+        document.body.appendChild(instance.$el);
+      }
+    }
+
+    // Remove instance
+    instance.$on("destroy", () => {
+      alert[instance] = null;
+      try {
+        document.body.removeChild(instance.$el);
+      } catch (ex) {
+        // Dont't handle this exception
+      }
+    });
+
+    alert[instance] = instance;
+    return instance;
+  }
+  return {
+    show(text, target, options = {}) {
+      const localOptions = { text, target, ...options };
+      const propsData = {
+        ...globalOptions,
+        ...localOptions
+      };
+
+      const alert = getAlert(propsData, target);
+
+      alert.showAction({ propsData });
+
+      return alert;
+    }
+  };
+};
+
+export default Api;
diff --git a/src/plugins/alert/index.d.ts b/src/plugins/alert/index.d.ts
@@ -0,0 +1,13 @@
+import { PluginObject, Component as VueComponent } from "vue";
+
+// Declaration
+declare module "vue/types/vue" {
+    interface Vue {
+      $anxAlert: {
+        show: (text: string, target?: string  , options?: {}) => VueComponent;
+      };
+    }
+  }
+
+  export declare const AnxAlertPlugin: PluginObject<{}>;
+
diff --git a/src/plugins/alert/index.js b/src/plugins/alert/index.js
@@ -0,0 +1 @@
+export { AnxAlertPlugin } from "./plugin";
diff --git a/src/plugins/alert/plugin.js b/src/plugins/alert/plugin.js
@@ -0,0 +1,9 @@
+import Api from "./api.js";
+
+export const AnxAlertPlugin = {
+  install: (Vue, options = {}) => {
+    const methods = Api(Vue, options);
+    Vue.prototype.$anxAlert = methods;
+    Vue.$anxAlert = methods;
+  }
+};
diff --git a/src/plugins/index.d.ts b/src/plugins/index.d.ts
@@ -1,3 +1,5 @@
 export * from "./icons";
 export * from "./toast";
 export * from "./variables";
+export * from "./modal";
+export * from "./alert"
diff --git a/src/plugins/index.js b/src/plugins/index.js
@@ -1,3 +1,5 @@
 export * from "./icons";
 export * from "./toast";
 export * from "./variables";
+export * from "./modal";
+export * from "./alert";