aloha-vue 1.2.0 → 1.2.2

package/docs/src/mainTranslation.js

@@ -37,6 +37,7 @@ import PageInputNumberRangeI18n from "./views/Form/PageInputNumberRange/i18n/Pag
 import PageFiltersI18n from "./views/PageFilters/i18n/PageFiltersI18n";
 import PageModalWizardI18n from "./views/PageModalWizard/i18n/PageModalWizardI18n";
 import PageWizardI18n from "./views/PageWizard/i18n/PageWizardI18n";
+import PageModalI18n from "./views/PageModal/i18n/PageModalI18n";
 
 export const mainTranslation = {
   ar: {
@@ -70,6 +71,7 @@ export const mainTranslation = {
     ...PageFiltersI18n.ar,
     ...PageModalWizardI18n.ar,
     ...PageWizardI18n.ar,
+    ...PageModalI18n.ar,
   },
   de: {
     ...allLanguages.de,
@@ -102,6 +104,7 @@ export const mainTranslation = {
     ...PageFiltersI18n.de,
     ...PageModalWizardI18n.de,
     ...PageWizardI18n.de,
+    ...PageModalI18n.de,
   },
   en: {
     ...allLanguages.en,
@@ -134,6 +137,7 @@ export const mainTranslation = {
     ...PageFiltersI18n.en,
     ...PageModalWizardI18n.en,
     ...PageWizardI18n.en,
+    ...PageModalI18n.en,
   },
   es: {
     ...allLanguages.es,
@@ -166,6 +170,7 @@ export const mainTranslation = {
     ...PageFiltersI18n.es,
     ...PageModalWizardI18n.es,
     ...PageWizardI18n.es,
+    ...PageModalI18n.es,
   },
   fr: {
     ...allLanguages.fr,
@@ -198,6 +203,7 @@ export const mainTranslation = {
     ...PageFiltersI18n.fr,
     ...PageModalWizardI18n.fr,
     ...PageWizardI18n.fr,
+    ...PageModalI18n.fr,
   },
   hr: {
     ...allLanguages.hr,
@@ -230,6 +236,7 @@ export const mainTranslation = {
     ...PageFiltersI18n.hr,
     ...PageModalWizardI18n.hr,
     ...PageWizardI18n.hr,
+    ...PageModalI18n.hr,
   },
   it: {
     ...allLanguages.it,
@@ -262,6 +269,7 @@ export const mainTranslation = {
     ...PageFiltersI18n.it,
     ...PageModalWizardI18n.it,
     ...PageWizardI18n.it,
+    ...PageModalI18n.it,
   },
   ru: {
     ...allLanguages.ru,
@@ -294,5 +302,6 @@ export const mainTranslation = {
     ...PageFiltersI18n.ru,
     ...PageModalWizardI18n.ru,
     ...PageWizardI18n.ru,
+    ...PageModalI18n.ru,
   },
 };

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

@@ -1,49 +1,65 @@
-import AButton from "../../../../src/AButton/AButton";
-import AModal from "../../../../src/AModal/AModal";
+import AlohaPage from "../../global/components/AlohaPage/AlohaPage.vue";
+import AlohaTableProps from "../../global/components/AlohaTableProps/AlohaTableProps.vue";
+import AlohaTableTranslate from "../../global/components/AlohaTableTranslate/AlohaTableTranslate.vue";
+import ATranslation from "../../../../src/ATranslation/ATranslation";
+import PageModalBasic from "./PageModalBasic/PageModalBasic.vue";
+import PageModalBodyHtml from "./PageModalBodyHtml/PageModalBodyHtml.vue";
+import PageModalCloseButton from "./PageModalCloseButton/PageModalCloseButton.vue";
+import PageModalSaveButton from "./PageModalSaveButton/PageModalSaveButton.vue";
+import PageModalSelectorClose from "./PageModalSelectorClose/PageModalSelectorClose.vue";
+import PageModalSelectorCloseIds from "./PageModalSelectorCloseIds/PageModalSelectorCloseIds.vue";
+import PageModalSize from "./PageModalSize/PageModalSize.vue";
+import PageModalSlots from "./PageModalSlots/PageModalSlots.vue";
 
-import AConfirmAPI from "../../../../src/compositionAPI/AConfirmAPI";
+import ExposesAPI from "./compositionAPI/ExposesAPI";
+import PageTitleAPI from "./compositionAPI/PageTitleAPI";
+import PropsAPI from "./compositionAPI/PropsAPI";
+import SlotsAPI from "./compositionAPI/SlotsAPI";
+import TranslateAPI from "./compositionAPI/TranslateAPI";
 
 export default {
   name: "PageModal",
   components: {
-    AButton,
-    AModal,
+    AlohaPage,
+    AlohaTableProps,
+    AlohaTableTranslate,
+    ATranslation,
+    PageModalBasic,
+    PageModalBodyHtml,
+    PageModalCloseButton,
+    PageModalSaveButton,
+    PageModalSelectorClose,
+    PageModalSelectorCloseIds,
+    PageModalSize,
+    PageModalSlots,
   },
   setup() {
     const {
-      closeConfirm,
-      openConfirm,
-    } = AConfirmAPI();
+      pageTitle,
+    } = PageTitleAPI();
 
-    const save = () => {
-      closeConfirm();
-    };
+    const {
+      dataProps,
+    } = PropsAPI();
 
-    const openConfirmLocal = () => {
-      openConfirm({
-        headerText: "Aloha",
-        bodyHtml: "<div>Aloha <strong>Hola</strong></div>",
-        save: save,
-        selectorClose: "#btn_confirm",
-      });
-    };
+    const {
+      dataSlots,
+    } = SlotsAPI();
+
+    const {
+      dataExposes,
+    } = ExposesAPI();
+
+    const {
+      dataTranslate,
+    } = TranslateAPI();
 
     return {
-      openConfirmLocal,
-    };
-  },
-  data() {
-    return {
-      isModalOpen: false,
+      dataExposes,
+      dataProps,
+      dataSlots,
+      dataTranslate,
+      pageTitle,
     };
   },
-  methods: {
-    openModal() {
-      this.isModalOpen = true;
-    },
-
-    closeModal() {
-      this.isModalOpen = false;
-    },
-  },
 };

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

@@ -1,27 +1,40 @@
-div
-  h1 AModal
-  a-button.a_btn.a_btn_primary(
-    id="btn_modal"
-    type="button"
-    text="Open Modal"
-    title="Open Modal"
-    text-screen-reader="Open Modal"
-    :text-aria-hidden="true"
-    icon="Cog"
-    :loading="true"
-    @click="openModal"
+aloha-page(
+  :page-title="pageTitle"
+)
+  template(
+    v-slot:body
   )
+    a-translation(
+      tag="p"
+      html="_A_MODAL_COMPONENT_DESCRIPTION_"
+    )
 
-  a-modal(
-    v-if="isModalOpen"
-    size="xxl"
-    selector-close-ids="btn_modal"
-    :close="closeModal"
-  )
-    //template(
-    //  v-slot:modalBodyPrepend
-    //)
-    //  button.a_btn.a_btn_secondary(
-    //    type="button"
-    //    @click="openConfirmLocal"
-    //  ) Open confirm
+    page-modal-basic
+
+    page-modal-body-html
+
+    page-modal-close-button
+
+    page-modal-save-button
+
+    page-modal-selector-close
+
+    page-modal-selector-close-ids
+
+    page-modal-size
+
+    page-modal-slots
+
+    aloha-table-props(
+      :data="dataProps"
+    )
+
+    aloha-table-props(
+      table-label="Slots"
+      :data="dataSlots"
+      :columns="['name', 'description']"
+    )
+
+    aloha-table-translate(
+      :data="dataTranslate"
+    )

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

@@ -0,0 +1,46 @@
+import {
+  ref,
+} from "vue";
+
+import AButton from "../../../../../src/AButton/AButton";
+import AlohaExample from "../../../global/components/AlohaExample/AlohaExample.vue";
+import AModal from "../../../../../src/AModal/AModal";
+
+import HtmlAPI from "./compositionAPI/HtmlAPI";
+import JsAPI from "./compositionAPI/JsAPI";
+
+export default {
+  name: "PageModalBasic",
+  components: {
+    AButton,
+    AlohaExample,
+    AModal,
+  },
+  setup() {
+    const {
+      codeHtml,
+    } = HtmlAPI();
+
+    const {
+      codeJs,
+    } = JsAPI();
+
+    const isModalVisible = ref(undefined);
+
+    const openModal = () => {
+      isModalVisible.value = true;
+    };
+
+    const closeModal = () => {
+      isModalVisible.value = false;
+    };
+
+    return {
+      closeModal,
+      codeHtml,
+      codeJs,
+      isModalVisible,
+      openModal,
+    };
+  },
+};

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

@@ -0,0 +1,17 @@
+aloha-example(
+  :code-html="codeHtml"
+  :code-js="codeJs"
+  header="_A_BASIC_USAGE_"
+  :props="['close', 'header-text']"
+)
+  a-button(
+    class="a_btn a_btn_primary"
+    text="_A_MODAL_PAGE_BTN_OPEN_MODAL_"
+    @click="openModal"
+  )
+
+  a-modal(
+    v-if="isModalVisible"
+    header-text="Aloha"
+    :close="closeModal"
+  )

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

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

package/docs/src/views/PageModal/PageModalBasic/compositionAPI/HtmlAPI.js

@@ -0,0 +1,17 @@
+export default function HtmlAPI() {
+  const codeHtml = `<a-button
+  class="a_btn a_btn_primary"
+  text="_A_MODAL_PAGE_BTN_OPEN_MODAL_"
+  @click="openModal"
+></a-button>
+
+<a-modal
+  v-if="isModalVisible"
+  header-text="Aloha"
+  :close="closeModal"
+></a-modal>`;
+
+  return {
+    codeHtml,
+  };
+}

package/docs/src/views/PageModal/PageModalBasic/compositionAPI/JsAPI.js

@@ -0,0 +1,37 @@
+export default function JsAPI() {
+  const codeJs = `import {
+  ref,
+} from "vue";
+
+import AButton from "aloha-vue/src/AButton/AButton";
+import AModal from "aloha-vue/src/AModal/AModal";
+    
+export default {
+  name: "PageModalBasic",
+  components: {
+    AButton,
+    AModal,
+  },
+  setup() {
+    const isModalVisible = ref(undefined);
+
+    const openModal = () => {
+      isModalVisible.value = true;
+    };
+
+    const closeModal = () => {
+      isModalVisible.value = false;
+    };
+
+    return {
+      closeModal,
+      isModalVisible,
+      openModal,
+    };
+  },
+};`;
+
+  return {
+    codeJs,
+  };
+}

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

@@ -0,0 +1,52 @@
+import {
+  ref,
+} from "vue";
+
+import AButton from "../../../../../src/AButton/AButton";
+import AlohaExample from "../../../global/components/AlohaExample/AlohaExample.vue";
+import AModal from "../../../../../src/AModal/AModal";
+
+import HtmlAPI from "./compositionAPI/HtmlAPI";
+import JsAPI from "./compositionAPI/JsAPI";
+
+export default {
+  name: "PageModalBodyHtml",
+  components: {
+    AButton,
+    AlohaExample,
+    AModal,
+  },
+  setup() {
+    const {
+      codeHtml,
+    } = HtmlAPI();
+
+    const {
+      codeJs,
+    } = JsAPI();
+
+    const isModalVisible = ref(undefined);
+    const bodyHtml = `<ul>
+      <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+      <li>Aliquam tincidunt mauris eu risus.</li>
+      <li>Vestibulum auctor dapibus neque.</li>
+    </ul>`;
+
+    const openModal = () => {
+      isModalVisible.value = true;
+    };
+
+    const closeModal = () => {
+      isModalVisible.value = false;
+    };
+
+    return {
+      bodyHtml,
+      closeModal,
+      codeHtml,
+      codeJs,
+      isModalVisible,
+      openModal,
+    };
+  },
+};

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

@@ -0,0 +1,19 @@
+aloha-example(
+  :code-html="codeHtml"
+  :code-js="codeJs"
+  header="_A_MODAL_GROUP_BODY_HTML_HEADER_"
+  description="_A_MODAL_GROUP_BODY_HTML_DESCRIPTION_"
+  :props="['body-html']"
+)
+  a-button(
+    class="a_btn a_btn_primary"
+    text="_A_MODAL_PAGE_BTN_OPEN_MODAL_"
+    @click="openModal"
+  )
+
+  a-modal(
+    v-if="isModalVisible"
+    header-text="Aloha"
+    :body-html="bodyHtml"
+    :close="closeModal"
+  )

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

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

package/docs/src/views/PageModal/PageModalBodyHtml/compositionAPI/HtmlAPI.js

@@ -0,0 +1,18 @@
+export default function HtmlAPI() {
+  const codeHtml = `<a-button
+  class="a_btn a_btn_primary"
+  text="_A_MODAL_PAGE_BTN_OPEN_MODAL_"
+  @click="openModal"
+></a-button>
+
+<a-modal
+  v-if="isModalVisible"
+  header-text="Aloha"
+  :body-html="bodyHtml"
+  :close="closeModal"
+></a-modal>`;
+
+  return {
+    codeHtml,
+  };
+}

package/docs/src/views/PageModal/PageModalBodyHtml/compositionAPI/JsAPI.js

@@ -0,0 +1,43 @@
+export default function JsAPI() {
+  const codeJs = `import {
+  ref,
+} from "vue";
+
+import AButton from "aloha-vue/src/AButton/AButton";
+import AModal from "aloha-vue/src/AModal/AModal";
+    
+export default {
+  name: "PageModalBodyHtml",
+  components: {
+    AButton,
+    AModal,
+  },
+  setup() {
+    const isModalVisible = ref(undefined);
+    const bodyHtml = \`<ul>
+      <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
+      <li>Aliquam tincidunt mauris eu risus.</li>
+      <li>Vestibulum auctor dapibus neque.</li>
+    </ul>\`;
+
+    const openModal = () => {
+      isModalVisible.value = true;
+    };
+
+    const closeModal = () => {
+      isModalVisible.value = false;
+    };
+
+    return {
+      bodyHtml,
+      closeModal,
+      isModalVisible,
+      openModal,
+    };
+  },
+};`;
+
+  return {
+    codeJs,
+  };
+}

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

@@ -0,0 +1,46 @@
+import {
+  ref,
+} from "vue";
+
+import AButton from "../../../../../src/AButton/AButton";
+import AlohaExample from "../../../global/components/AlohaExample/AlohaExample.vue";
+import AModal from "../../../../../src/AModal/AModal";
+
+import HtmlAPI from "./compositionAPI/HtmlAPI";
+import JsAPI from "./compositionAPI/JsAPI";
+
+export default {
+  name: "PageModalCloseButton",
+  components: {
+    AButton,
+    AlohaExample,
+    AModal,
+  },
+  setup() {
+    const {
+      codeHtml,
+    } = HtmlAPI();
+
+    const {
+      codeJs,
+    } = JsAPI();
+
+    const isModalVisible = ref(undefined);
+
+    const openModal = () => {
+      isModalVisible.value = true;
+    };
+
+    const closeModal = () => {
+      isModalVisible.value = false;
+    };
+
+    return {
+      closeModal,
+      codeHtml,
+      codeJs,
+      isModalVisible,
+      openModal,
+    };
+  },
+};

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

@@ -0,0 +1,22 @@
+aloha-example(
+  :code-html="codeHtml"
+  :code-js="codeJs"
+  header="_A_MODAL_GROUP_CLOSE_BUTTON_HEADER_"
+  description="_A_MODAL_GROUP_CLOSE_BUTTON_DESCRIPTION_"
+  :props="['close-button-attributes', 'close-button-class', 'close-button-id', 'close-button-text']"
+)
+  a-button(
+    class="a_btn a_btn_primary"
+    text="_A_MODAL_PAGE_BTN_OPEN_MODAL_"
+    @click="openModal"
+  )
+
+  a-modal(
+    v-if="isModalVisible"
+    header-text="Aloha"
+    :close="closeModal"
+    :close-button-attributes="{ textTag: 'strong' }"
+    close-button-class="a_btn a_btn_danger"
+    close-button-id="btn_close"
+    close-button-text="_A_MODAL_PAGE_BTN_CLOSE_"
+  )

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

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

package/docs/src/views/PageModal/PageModalCloseButton/compositionAPI/HtmlAPI.js

@@ -0,0 +1,21 @@
+export default function HtmlAPI() {
+  const codeHtml = `<a-button
+  class="a_btn a_btn_primary"
+  text="_A_MODAL_PAGE_BTN_OPEN_MODAL_"
+  @click="openModal"
+></a-button>
+
+<a-modal
+  v-if="isModalVisible"
+  header-text="Aloha"
+  :close="closeModal"
+  :close-button-attributes="{ textTag: 'strong' }"
+  close-button-class="a_btn a_btn_danger"
+  close-button-id="btn_close"
+  close-button-text="_A_MODAL_PAGE_BTN_CLOSE_"
+></a-modal>`;
+
+  return {
+    codeHtml,
+  };
+}

package/docs/src/views/PageModal/PageModalCloseButton/compositionAPI/JsAPI.js

@@ -0,0 +1,37 @@
+export default function JsAPI() {
+  const codeJs = `import {
+  ref,
+} from "vue";
+
+import AButton from "aloha-vue/src/AButton/AButton";
+import AModal from "aloha-vue/src/AModal/AModal";
+    
+export default {
+  name: "PageModalCloseButton",
+  components: {
+    AButton,
+    AModal,
+  },
+  setup() {
+    const isModalVisible = ref(undefined);
+    
+    const openModal = () => {
+      isModalVisible.value = true;
+    };
+
+    const closeModal = () => {
+      isModalVisible.value = false;
+    };
+
+    return {
+      closeModal,
+      isModalVisible,
+      openModal,
+    };
+  },
+};`;
+
+  return {
+    codeJs,
+  };
+}

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

@@ -0,0 +1,52 @@
+import {
+  ref,
+} from "vue";
+
+import AButton from "../../../../../src/AButton/AButton";
+import AlohaExample from "../../../global/components/AlohaExample/AlohaExample.vue";
+import AModal from "../../../../../src/AModal/AModal";
+
+import HtmlAPI from "./compositionAPI/HtmlAPI";
+import JsAPI from "./compositionAPI/JsAPI";
+
+export default {
+  name: "PageModalSaveButton",
+  components: {
+    AButton,
+    AlohaExample,
+    AModal,
+  },
+  setup() {
+    const {
+      codeHtml,
+    } = HtmlAPI();
+
+    const {
+      codeJs,
+    } = JsAPI();
+
+    const isModalVisible = ref(undefined);
+
+    const openModal = () => {
+      isModalVisible.value = true;
+    };
+
+    const closeModal = () => {
+      isModalVisible.value = false;
+    };
+
+    const saveModal = () => {
+      console.log("saveModal");
+      closeModal();
+    };
+
+    return {
+      closeModal,
+      codeHtml,
+      codeJs,
+      isModalVisible,
+      openModal,
+      saveModal,
+    };
+  },
+};