aloha-vue 1.0.153 → 1.0.154

package/docs/package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@popperjs/core": "2.11.6",
-    "aloha-css": "1.0.61",
+    "aloha-css": "1.0.64",
     "fecha": "^4.2.3",
     "lodash-es": "^4.17.21",
     "tiny-emitter": "2.1.0",

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

@@ -1,10 +1,35 @@
 import AModal from "../../../../src/AModal/AModal";
 
+import AConfirmAPI from "../../../../src/compositionAPI/AConfirmAPI";
+
 export default {
   name: "PageModal",
   components: {
     AModal,
   },
+  setup() {
+    const {
+      closeConfirm,
+      openConfirm,
+    } = AConfirmAPI();
+
+    const save = () => {
+      closeConfirm();
+    };
+
+    const openConfirmLocal = () => {
+      openConfirm({
+        headerText: "Aloha",
+        bodyHtml: "<div>Aloha <strong>Hola</strong></div>",
+        save: save,
+        selectorClose: "#btn_confirm",
+      });
+    };
+
+    return {
+      openConfirmLocal,
+    };
+  },
   data() {
     return {
       isModalOpen: false,

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

@@ -7,5 +7,13 @@ div
 
   a-modal(
     v-if="isModalOpen"
+    size="xxl"
     :close="closeModal"
-  )
+  )
+    template(
+      v-slot:modalBodyPrepend
+    )
+      button.a_btn.a_btn_secondary(
+        type="button"
+        @click="openConfirmLocal"
+      ) Open confirm

package/package.json

@@ -1,14 +1,14 @@
 {
   "name": "aloha-vue",
   "description": "Project aloha",
-  "version": "1.0.153",
+  "version": "1.0.154",
   "author": "Ilia Brykin",
   "scripts": {
     "build-icons": "node scriptsNode/iconsSvgToJs.js bootstrap3 && node scriptsNode/iconsSvgToJs.js bootstrap-1-9-1"
   },
   "dependencies": {
     "@popperjs/core": "2.11.5",
-    "aloha-css": "1.0.47",
+    "aloha-css": "1.0.64",
     "axios": "^0.27.2",
     "fecha": "^4.2.3",
     "lodash-es": "^4.17.21",

package/src/AModal/AModal.js

@@ -21,6 +21,30 @@ import {
 export default {
   name: "AModal",
   props: {
+    bodyHtml: {
+      type: String,
+      required: false,
+      default: "",
+    },
+    close: {
+      type: Function,
+      required: true,
+    },
+    closeButtonClass: {
+      type: [String, Array, Object],
+      required: false,
+      default: "a_btn a_btn_secondary",
+    },
+    closeButtonText: {
+      type: String,
+      required: false,
+      default: "Abbrechen",
+    },
+    dataForm: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
     disabled: {
       type: Boolean,
       required: false,
@@ -31,119 +55,104 @@ export default {
       required: false,
       default: false,
     },
-    loading: {
-      type: Boolean,
+    errors: {
+      type: Object,
       required: false,
+      default: () => ({}),
     },
-    selectorClose: {
-      type: [String, Array],
+    headerTag: {
+      type: String,
       required: false,
-      default: undefined,
+      default: "h2",
     },
-    withoutEscape: {
-      type: Boolean,
+    headerText: {
+      type: String,
       required: false,
+      default: undefined,
     },
-    size: {
+    idPrefix: {
       type: String,
-      validator: value => ["small", "large", "xl", "fullscreen"].indexOf(value) !== -1,
+      required: false,
       default: undefined,
     },
-    isModalHidden: {
+    isCloseButtonHide: {
       type: Boolean,
       required: false,
-      default: false,
     },
-    save: {
-      type: Function,
+    isConfirm: {
+      type: Boolean,
       required: false,
-      default: undefined,
     },
-    saveButtonText: {
-      type: String,
+    isDataFormHide: {
+      type: Boolean,
       required: false,
-      default: "Speichern",
     },
-    saveButtonClass: {
-      type: [String, Array, Object],
+    isDataFormRender: {
+      type: Boolean,
       required: false,
-      default: "a_btn a_btn_primary",
+      default: true,
     },
-    isSaveButtonHide: {
+    isModalHidden: {
       type: Boolean,
       required: false,
+      default: false,
     },
-    close: {
-      type: Function,
-      required: true,
-    },
-    closeButtonText: {
-      type: String,
+    isRequired: {
+      type: Boolean,
       required: false,
-      default: "Abbrechen",
     },
-    closeButtonClass: {
-      type: [String, Array, Object],
+    isSaveButtonHide: {
+      type: Boolean,
       required: false,
-      default: "a_btn a_btn_secondary",
     },
-    isCloseButtonHide: {
+    loading: {
       type: Boolean,
       required: false,
     },
-    headerText: {
-      type: String,
+    modalClass: {
+      type: [String, Object],
       required: false,
       default: undefined,
     },
-    headerTag: {
-      type: String,
-      required: false,
-      default: "h2",
-    },
-    bodyHtml: {
-      type: String,
+    modelValue: {
+      type: Object,
       required: false,
-      default: "",
+      default: undefined,
     },
-    dataForm: {
-      type: Array,
+    save: {
+      type: Function,
       required: false,
-      default: () => [],
+      default: undefined,
     },
-    isDataFormHide: {
-      type: Boolean,
+    saveButtonClass: {
+      type: [String, Array, Object],
       required: false,
+      default: "a_btn a_btn_primary",
     },
-    isDataFormRender: {
-      type: Boolean,
+    saveButtonText: {
+      type: String,
       required: false,
-      default: true,
+      default: "Speichern",
     },
-    modelValue: {
-      type: Object,
+    selectorClose: {
+      type: [String, Array],
       required: false,
       default: undefined,
     },
-    errors: {
-      type: Object,
-      required: false,
-      default: () => ({}),
+    size: {
+      type: String,
+      validator: value => ["small", "large", "xl", "xxl", "fullscreen"].indexOf(value) !== -1,
+      default: undefined,
     },
     textRequired: {
       type: String,
       required: false,
       default: undefined,
     },
-    isRequired: {
+    withoutEscape: {
       type: Boolean,
       required: false,
     },
-    idPrefix: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
   },
   emits: [
     "update:modelValue",
@@ -186,36 +195,6 @@ export default {
       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 => {
@@ -416,7 +395,8 @@ export default {
       }, [
         h("div", {
           ref: "modal",
-          class: ["a_modal", {
+          class: ["a_modal", this.modalClass, {
+            a_modal_confirm: this.isConfirm,
             a_modal_show: !this.isModalHidden
           }],
           tabindex: -1,
@@ -496,7 +476,12 @@ export default {
         ]),
       ]),
       !this.isModalHidden && h("div", {
-        class: "a_backdrop a_backdrop_fade a_backdrop_show",
+        class: [
+          "a_backdrop a_backdrop_fade a_backdrop_show",
+          {
+            a_backdrop_confirm: this.isConfirm,
+          },
+        ],
       })
     ]);
   },

package/src/AModalConfirm/AModalConfirm.js

@@ -21,6 +21,7 @@ export default {
       return {
         close: closeConfirm,
         isModalHidden: isModalHidden.value,
+        isConfirm: true,
         ...confirmOptions.value
       };
     });

package/src/styles/styles.scss

@@ -3,7 +3,6 @@
 }
 
 @import "components/AIcon";
-@import "components/ADropdown";
 @import "components/AResizer";
 @import "components/ui/ui";
 @import "components/ATable";

package/src/styles/components/ADropdown.scss

@@ -1,110 +0,0 @@
-.a_dropdown {
-  display: inline-block;
-  position: relative;
-}
-.a_dropdown__caret {
-  margin-left: .5rem;
-}
-
-.a_dropdown__menu {
-  --a_dropdown_min_width: 10rem;
-  --a_dropdown_width: 300px;
-  --a_dropdown_padding_x: 0;
-  --a_dropdown_padding_y: 0.5rem;
-  --bs-dropdown-spacer: 0.125rem;
-  --a_dropdown_font_size: 1rem;
-  --a_dropdown_color: var(--a_color_text);
-  --a_dropdown_bg: #fff;
-  --a_dropdown_border_color: var(--a_border_color);
-  --a_dropdown_border_radius: var(--a_border_radius);
-  --a_dropdown_border_width: var(--a_border_width);
-  --a_dropdown_divider_color: var(--a_color_gray_500);
-  --a_dropdown_divider_margin_y: 0.5rem;
-  --a_dropdown_link_color: var(--a_color_text);
-  --a_dropdown_link_hover_color: #1e2125;
-  --a_dropdown_link_hover_bg: var(--a_color_gray_200);
-  --a_dropdown_link_active_color: #fff;
-  --a_dropdown_link_active_bg: var(--a_color_primary);
-  --a_dropdown_link_disabled_color: #adb5bd;
-  --a_dropdown_item_padding_x: 1rem;
-  --a_dropdown_item_padding_y: 0.25rem;
-  --a_dropdown_header_color: #6c757d;
-  --a_dropdown_header_padding_x: 1rem;
-  --a_dropdown_header_padding_y: 0.5rem;
-  --a_select_menu_link_focus_color: var(--a_color_focus);
-
-  width: var(--a_dropdown_width);
-  z-index: 1056;
-  min-width: var(--a_dropdown_min_width);
-  padding: var(--a_dropdown_padding_y) var(--a_dropdown_padding_x);
-  margin: 0;
-  font-size: var(--a_dropdown_font_size);
-  color: var(--a_dropdown_color);
-  text-align: left;
-  list-style: none;
-  background-color: var(--a_dropdown_bg);
-  background-clip: padding-box;
-  border: var(--a_dropdown_border_width) solid var(--a_dropdown_border_color);
-  border-radius: var(--a_dropdown_border_radius);
-  overflow-x: auto;
-  &:not([data-popper-placement]) {
-    display: none;
-  }
-}
-.a_dropdown__item {
-  display: block;
-  width: 100%;
-  padding: var(--a_dropdown_item_padding_y) var(--a_dropdown_item_padding_x);
-  clear: both;
-  font-weight: 400;
-  color: var(--a_dropdown_link_color);
-  text-align: inherit;
-  text-decoration: none;
-  white-space: nowrap;
-  background-color: transparent;
-  border: 0;
-  font-size: inherit;
-  &:hover {
-    color: var(--a_dropdown_link_hover_color);
-    background-color: var(--a_dropdown_link_hover_bg);
-    text-decoration: none;
-  }
-  &:focus {
-    box-shadow: inset 0 0 1px 4px var(--a_select_menu_link_focus_color);
-    outline: none;
-    text-decoration: none;
-  }
-  &.active,
-  &:active {
-    color: var(--a_dropdown_link_active_color);
-    text-decoration: none;
-    background-color: var(--a_dropdown_link_active_bg);
-  }
-  &.disabled,
-  &:disabled {
-    color: var(--a_dropdown_link_disabled_color);
-    pointer-events: none;
-    background-color: transparent;
-  }
-}
-.a_dropdown__item_text {
-  padding: var(--a_dropdown_item_padding_y) var(--a_dropdown_item_padding_x);
-  color: var(--a_dropdown_link_color);
-}
-.a_dropdown__divider {
-  height: 0;
-  margin: var(--a_dropdown_divider_margin_y) 0;
-  overflow: hidden;
-  border-top: 1px solid var(--a_dropdown_divider_color);
-  opacity: 1;
-}
-.a_dropdown__item_header {
-  display: block;
-  padding: var(--a_dropdown_header_padding_y) var(--a_dropdown_header_padding_x);
-  margin-bottom: 0;
-  font-size: .875rem;
-  color: var(--a_dropdown_header_color);
-  white-space: nowrap;
-}
-
-