aloha-vue 1.0.359 → 1.0.360

package/docs/package.json

@@ -13,7 +13,7 @@
   "dependencies": {
     "@popperjs/core": "2.11.8",
     "axios": "1.4.0",
-    "aloha-css": "1.0.103",
+    "aloha-css": "1.0.110",
     "dompurify": "3.0.3",
     "fecha": "4.2.3",
     "highlight.js": "11.8.0",

package/docs/src/mainTranslation.js

@@ -23,6 +23,7 @@ import PageDisclosureI18n from "./views/PageDisclosure/i18n/PageDisclosureI18n";
 import PageTooltipI18n from "./views/PageTooltip/i18n/PageTooltipI18n";
 import PageGroupButtonDropdownI18n from "./views/PageGroupButtonDropdown/i18n/PageGroupButtonDropdownI18n";
 import PageDropdownI18n from "./views/PageDropdown/i18n/PageDropdownI18n";
+import PageListI18n from "./views/PageList/i18n/PageListI18n";
 
 export const mainTranslation = {
   ar: {
@@ -42,6 +43,7 @@ export const mainTranslation = {
     ...PageTooltipI18n.ar,
     ...PageGroupButtonDropdownI18n.ar,
     ...PageDropdownI18n.ar,
+    ...PageListI18n.ar,
   },
   de: {
     ...allLanguages.de,
@@ -60,6 +62,7 @@ export const mainTranslation = {
     ...PageTooltipI18n.de,
     ...PageGroupButtonDropdownI18n.de,
     ...PageDropdownI18n.de,
+    ...PageListI18n.de,
   },
   en: {
     ...allLanguages.en,
@@ -78,6 +81,7 @@ export const mainTranslation = {
     ...PageTooltipI18n.en,
     ...PageGroupButtonDropdownI18n.en,
     ...PageDropdownI18n.en,
+    ...PageListI18n.en,
   },
   es: {
     ...allLanguages.es,
@@ -96,6 +100,7 @@ export const mainTranslation = {
     ...PageTooltipI18n.es,
     ...PageGroupButtonDropdownI18n.es,
     ...PageDropdownI18n.es,
+    ...PageListI18n.es,
   },
   fr: {
     ...allLanguages.fr,
@@ -114,6 +119,7 @@ export const mainTranslation = {
     ...PageTooltipI18n.fr,
     ...PageGroupButtonDropdownI18n.fr,
     ...PageDropdownI18n.fr,
+    ...PageListI18n.fr,
   },
   hr: {
     ...allLanguages.hr,
@@ -132,6 +138,7 @@ export const mainTranslation = {
     ...PageTooltipI18n.hr,
     ...PageGroupButtonDropdownI18n.hr,
     ...PageDropdownI18n.hr,
+    ...PageListI18n.hr,
   },
   it: {
     ...allLanguages.it,
@@ -150,6 +157,7 @@ export const mainTranslation = {
     ...PageTooltipI18n.it,
     ...PageGroupButtonDropdownI18n.it,
     ...PageDropdownI18n.it,
+    ...PageListI18n.it,
   },
   ru: {
     ...allLanguages.ru,
@@ -168,5 +176,6 @@ export const mainTranslation = {
     ...PageTooltipI18n.ru,
     ...PageGroupButtonDropdownI18n.ru,
     ...PageDropdownI18n.ru,
+    ...PageListI18n.ru,
   },
 };

package/docs/src/views/PageDropdown/PageDropdown.js

@@ -5,6 +5,7 @@ import ATranslation from "../../../../src/ATranslation/ATranslation";
 import PageDropdownBasic from "./PageDropdownBasic/PageDropdownBasic.vue";
 import PageDropdownButtonClass from "./PageDropdownButtonClass/PageDropdownButtonClass.vue";
 import PageDropdownButtonIcons from "./PageDropdownButtonIcons/PageDropdownButtonIcons.vue";
+import PageDropdownButtonLoading from "./PageDropdownButtonLoading/PageDropdownButtonLoading.vue";
 import PageDropdownButtonText from "./PageDropdownButtonText/PageDropdownButtonText.vue";
 import PageDropdownCaretIcon from "./PageDropdownCaretIcon/PageDropdownCaretIcon.vue";
 import PageDropdownHasCaret from "./PageDropdownHasCaret/PageDropdownHasCaret.vue";
@@ -27,6 +28,7 @@ export default {
     PageDropdownBasic,
     PageDropdownButtonClass,
     PageDropdownButtonIcons,
+    PageDropdownButtonLoading,
     PageDropdownButtonText,
     PageDropdownCaretIcon,
     PageDropdownHasCaret,

package/docs/src/views/PageDropdown/PageDropdown.pug

@@ -17,6 +17,8 @@ aloha-page(
 
     page-dropdown-button-icons
 
+    page-dropdown-button-loading
+
     page-dropdown-in-body
 
     page-dropdown-triggers

package/docs/src/views/PageDropdown/PageDropdownButtonLoading/PageDropdownButtonLoading.js

@@ -0,0 +1,41 @@
+import ADropdown from "../../../../../src/ADropdown/ADropdown";
+import AlohaExample from "../../../global/components/AlohaExample/AlohaExample.vue";
+
+import HtmlAPI from "./compositionAPI/HtmlAPI";
+import JsAPI from "./compositionAPI/JsAPI";
+
+export default {
+  name: "PageDropdownButtonLoading",
+  components: {
+    ADropdown,
+    AlohaExample,
+  },
+  setup() {
+    const {
+      codeHtml,
+    } = HtmlAPI();
+
+    const {
+      codeJs,
+    } = JsAPI();
+
+    const dropdownActions = [
+      {
+        text: "Actions 0",
+        type: "button",
+        callback: () => {},
+      },
+      {
+        text: "Actions 1",
+        type: "button",
+        callback: () => {},
+      },
+    ];
+
+    return {
+      codeHtml,
+      codeJs,
+      dropdownActions,
+    };
+  },
+};

package/docs/src/views/PageDropdown/PageDropdownButtonLoading/PageDropdownButtonLoading.pug

@@ -0,0 +1,26 @@
+aloha-example(
+  :code-html="codeHtml"
+  :code-js="codeJs"
+  header="_A_DROPDOWN_GROUP_BUTTON_LOADING_HEADER_"
+  description="_A_DROPDOWN_GROUP_BUTTON_LOADING_DESCRIPTION_"
+  :props="['button-loading', 'button-loading-align']"
+)
+  a-dropdown(
+    :actions="dropdownActions"
+    button-text="aloha"
+    :button-loading="true"
+  )
+  a-dropdown(
+    class="a_ml_2"
+    :actions="dropdownActions"
+    button-text="aloha"
+    :button-loading="true"
+    button-loading-align="left"
+  )
+  a-dropdown(
+    class="a_ml_2"
+    :actions="dropdownActions"
+    button-text="aloha"
+    :button-loading="true"
+    button-loading-align="right"
+  )

package/docs/src/views/PageDropdown/PageDropdownButtonLoading/PageDropdownButtonLoading.vue

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

package/docs/src/views/PageDropdown/PageDropdownButtonLoading/compositionAPI/HtmlAPI.js

@@ -0,0 +1,25 @@
+export default function HtmlAPI() {
+  const codeHtml = `<a-dropdown
+  :actions="dropdownActions"
+  button-text="aloha"
+  :button-loading="true"
+></a-dropdown>
+<a-dropdown
+  class="a_ml_2"
+  :actions="dropdownActions"
+  button-text="aloha"
+  :button-loading="true"
+  button-loading-align="left"
+></a-dropdown>
+<a-dropdown
+  class="a_ml_2"
+  :actions="dropdownActions"
+  button-text="aloha"
+  :button-loading="true"
+  button-loading-align="right"
+></a-dropdown>`;
+
+  return {
+    codeHtml,
+  };
+}

package/docs/src/views/PageDropdown/PageDropdownButtonLoading/compositionAPI/JsAPI.js

@@ -0,0 +1,32 @@
+export default function JsAPI() {
+  const codeJs = `import ADropdown from "aloha-vue/src/ADropdown/ADropdown";
+    
+export default {
+  name: "PageDropdownButtonLoading",
+  components: {
+    ADropdown,
+  },
+  setup() {
+    const dropdownActions = [
+      {
+        text: "Actions 0",
+        type: "button",
+        callback: () => {},
+      },
+      {
+        text: "Actions 1",
+        type: "button",
+        callback: () => {},
+      },
+    ];
+
+    return {
+      dropdownActions,
+    };
+  },
+};`;
+
+  return {
+    codeJs,
+  };
+}

package/docs/src/views/PageDropdown/i18n/de.json

@@ -1,5 +1,9 @@
 {
   "_A_DROPDOWN_COMPONENT_NAME_": "Dropdown",
+  "_A_DROPDOWN_GROUP_BUTTON_LOADING_HEADER_": "Ladezustand des Dropdown-Buttons",
+  "_A_DROPDOWN_GROUP_BUTTON_LOADING_DESCRIPTION_": "Der Ladezustand des Dropdown-Buttons kann mit den Props <strong>button-loading</strong> und <strong>button-loading-align</strong> angepasst werden .",
+  "_A_DROPDOWN_PROPS_BUTTON_LOADING_": "Die Prop ermöglicht es Ihnen, den Ladezustand des Dropdown-Buttons zu steuern.",
+  "_A_DROPDOWN_PROPS_BUTTON_LOADING_ALIGN_": "Die Prop ermöglicht es Ihnen, die Position des Ladezustands im Button anzupassen.",
   "_A_DROPDOWN_GROUP_BUTTON_ICONS_HEADER_": "Anpassbare Button-Icons",
   "_A_DROPDOWN_GROUP_BUTTON_ICONS_DESCRIPTION_": "Icons vor und nach dem Text des Dropdown-Buttons können mit den Props <strong>button-icon-left</strong> und <strong>button-icon-right</strong> angepasst werden.",
   "_A_DROPDOWN_PROPS_BUTTON_ICON_LEFT_": "Die Props ermöglichen es Ihnen, den Icon vor dem Text des Dropdown-Buttons anzuzeigen.",

package/docs/src/views/PageList/PageList.js

@@ -1,9 +1,52 @@
+import AlohaPage from "../../global/components/AlohaPage/AlohaPage.vue";
+import AlohaTableProps from "../../global/components/AlohaTableProps/AlohaTableProps.vue";
+import ATranslation from "../../../../src/ATranslation/ATranslation";
 import AList from "../../../../src/AList/AList";
+import PageListClassGroup from "./PageListClassGroup/PageListClassGroup.vue";
+
+import EventsAPI from "./compositionAPI/EventsAPI";
+import ExposesAPI from "./compositionAPI/ExposesAPI";
+import PageTitleAPI from "./compositionAPI/PageTitleAPI";
+import PropsAPI from "./compositionAPI/PropsAPI";
+import SlotsAPI from "./compositionAPI/SlotsAPI";
 
 export default {
   name: "PageList",
   components: {
+    AlohaPage,
+    AlohaTableProps,
+    ATranslation,
     AList,
+    PageListClassGroup,
+  },
+  setup() {
+    const {
+      pageTitle,
+    } = PageTitleAPI();
+
+    const {
+      dataProps,
+    } = PropsAPI();
+
+    const {
+      dataSlots,
+    } = SlotsAPI();
+
+    const {
+      dataEvents,
+    } = EventsAPI();
+
+    const {
+      dataExposes,
+    } = ExposesAPI();
+
+    return {
+      dataEvents,
+      dataExposes,
+      dataProps,
+      dataSlots,
+      pageTitle,
+    };
   },
   data() {
     return {

package/docs/src/views/PageList/PageList.pug

@@ -1,23 +1,36 @@
-div
-  h1 PageList
-  h2 without children
-  a-list(
-    :data="items"
-    key-label="label"
+aloha-page(
+  :page-title="pageTitle"
+)
+  template(
+    v-slot:body
   )
-  h2 with children
-  a-list(
-    :data="items"
-    key-label="label"
-    key-children="items"
-  )
-  h2 with slot
-  a-list(
-    :data="items"
-    key-children="items"
-  )
-    template(
-      v-slot:listItem="vm"
+    a-translation(
+      tag="p"
+      html="_A_LIST_COMPONENT_DESCRIPTION_"
+    )
+
+    page-list-class-group
+
+
+
+    h2 without children
+    a-list(
+      :data="items"
+      key-label="label"
+    )
+    h2 with children
+    a-list(
+      :data="items"
+      key-label="label"
+      key-children="items"
+    )
+    h2 with slot
+    a-list(
+      :data="items"
+      key-children="items"
     )
-      pre {{ vm.item.label }}
+      template(
+        v-slot:listItem="vm"
+      )
+        pre {{ vm.item.label }}
 

package/docs/src/views/PageList/PageListClassGroup/PageListClassGroup.js

@@ -0,0 +1,43 @@
+import AList from "../../../../../src/AList/AList";
+import AlohaExample from "../../../global/components/AlohaExample/AlohaExample.vue";
+
+import HtmlAPI from "./compositionAPI/HtmlAPI";
+import JsAPI from "./compositionAPI/JsAPI";
+
+export default {
+  name: "PageListClassGroup",
+  components: {
+    AList,
+    AlohaExample,
+  },
+  setup() {
+    const {
+      codeHtml,
+    } = HtmlAPI();
+
+    const {
+      codeJs,
+    } = JsAPI();
+
+    const items = [
+      {
+        label: "label 1",
+      },
+      {
+        label: "label 2",
+      },
+      {
+        label: "label 3",
+      },
+      {
+        label: "label 4",
+      },
+    ];
+
+    return {
+      codeHtml,
+      codeJs,
+      items,
+    };
+  },
+};

package/docs/src/views/PageList/PageListClassGroup/PageListClassGroup.pug

@@ -0,0 +1,27 @@
+aloha-example(
+  :code-html="codeHtml"
+  :code-js="codeJs"
+  header="_A_LIST_GROUP_CLASS_GROUP_HEADER_"
+  description="_A_LIST_GROUP_CLASS_GROUP_DESCRIPTION_"
+  :props="['class-main', 'class-item']"
+)
+  a-list(
+    :data="items"
+    key-label="label"
+    class-main="a_list_group"
+    class-item="a_list_group__item"
+  )
+
+  a-list.a_mt_5(
+    :data="items"
+    key-label="label"
+    class-main="a_list_group a_list_group_gap"
+    class-item="a_list_group__item"
+  )
+
+  a-list.a_mt_5(
+    :data="items"
+    key-label="label"
+    class-main="a_list_group a_list_group_edge"
+    class-item="a_list_group__item"
+  )

package/docs/src/views/PageList/PageListClassGroup/PageListClassGroup.vue

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

package/docs/src/views/PageList/PageListClassGroup/compositionAPI/HtmlAPI.js

@@ -0,0 +1,17 @@
+export default function HtmlAPI() {
+  const codeHtml = `<a-dropdown
+  :actions="dropdownActions"
+  :in-body="true"
+  button-text="in-body='true'"
+></a-dropdown>
+<a-dropdown
+  class="a_ml_2"
+  :actions="dropdownActions"
+  :in-body="false"
+  button-text="in-body='false'"
+></a-dropdown>`;
+
+  return {
+    codeHtml,
+  };
+}

package/docs/src/views/PageList/PageListClassGroup/compositionAPI/JsAPI.js

@@ -0,0 +1,34 @@
+export default function JsAPI() {
+  const codeJs = `import AList from "aloha-vue/src/AList/AList";
+    
+export default {
+  name: "PageListClassGroup",
+  components: {
+    AList,
+  },
+  setup() {
+    const items = [
+      {
+        label: "label 1",
+      },
+      {
+        label: "label 2",
+      },
+      {
+        label: "label 3",
+      },
+      {
+        label: "label 4",
+      },
+    ];
+
+    return {
+      items,
+    };
+  },
+};`;
+
+  return {
+    codeJs,
+  };
+}

package/docs/src/views/PageList/compositionAPI/EventsAPI.js

@@ -0,0 +1,13 @@
+export default function EventsAPI() {
+  const dataEvents = [
+    {
+      name: "close",
+      description: "_A_ALERT_EVENTS_CLOSE_DESCRIPTION_",
+      type: "Function",
+    },
+  ];
+
+  return {
+    dataEvents,
+  };
+}

package/docs/src/views/PageList/compositionAPI/ExposesAPI.js

@@ -0,0 +1,18 @@
+export default function ExposesAPI() {
+  const dataExposes = [
+    {
+      name: "close",
+      description: "_A_ALERT_EXPOSES_CLOSE_DESCRIPTION_",
+      type: "Function",
+    },
+    {
+      name: "isHidden",
+      description: "_A_ALERT_EXPOSES_IS_HIDDEN_DESCRIPTION_",
+      type: "Boolean",
+    },
+  ];
+
+  return {
+    dataExposes,
+  };
+}

package/docs/src/views/PageList/compositionAPI/PageTitleAPI.js

@@ -0,0 +1,24 @@
+import {
+  computed,
+} from "vue";
+
+import {
+  getTranslatedText,
+} from "../../../../../src/ATranslation/compositionAPI/UtilsAPI";
+
+
+export default function PageTitleAPI() {
+  const componentNameTranslated = computed(() => {
+    return getTranslatedText({
+      placeholder: "_A_LIST_COMPONENT_NAME_",
+    });
+  });
+
+  const pageTitle = computed(() => {
+    return `AList${ componentNameTranslated.value ? ` (${ componentNameTranslated.value })` : "" }`;
+  });
+
+  return {
+    pageTitle,
+  };
+}

package/docs/src/views/PageList/compositionAPI/PropsAPI.js

@@ -0,0 +1,106 @@
+export default function PropsAPI() {
+  const dataProps = [
+    {
+      name: "alert-class",
+      description: "_A_ALERT_PROPS_ALERT_CLASS_DESCRIPTION_",
+      type: "String / Object",
+      default: undefined,
+      required: false,
+    },
+    {
+      name: "alert-content-class",
+      description: "_A_ALERT_PROPS_ALERT_CONTENT_CLASS_DESCRIPTION_",
+      type: "String / Object",
+      default: undefined,
+      required: false,
+    },
+    {
+      name: "btn-close-attributes",
+      description: "_A_ALERT_PROPS_BTN_CLOSE_ATTRIBUTES_DESCRIPTION_",
+      type: "Object",
+      default: "{}",
+      required: false,
+    },
+    {
+      name: "closable",
+      description: "_A_ALERT_PROPS_CLOSABLE_DESCRIPTION_",
+      type: "Boolean",
+      default: false,
+      required: false,
+    },
+    {
+      name: "show-icon",
+      description: "_A_ALERT_PROPS_HAS_ICON_DESCRIPTION_",
+      type: "Boolean",
+      default: false,
+      required: false,
+    },
+    {
+      name: "html",
+      description: "_A_ALERT_PROPS_HTML_DESCRIPTION_",
+      type: "String",
+      default: undefined,
+      required: false,
+    },
+    {
+      name: "icon",
+      description: "_A_ALERT_PROPS_ICON_DESCRIPTION_",
+      type: "String",
+      default: undefined,
+      required: false,
+    },
+    {
+      name: "icon-class",
+      description: "_A_ALERT_PROPS_ICON_CLASS_DESCRIPTION_",
+      type: "String",
+      default: undefined,
+      required: false,
+    },
+    {
+      name: "is-visible",
+      description: "_A_ALERT_PROPS_IS_VISIBLE_DESCRIPTION_",
+      type: "Boolean",
+      default: false,
+      required: false,
+    },
+    {
+      name: "removeAlertOnClose",
+      description: "_A_ALERT_PROPS_REMOVE_ALERT_ON_CLOSE_DESCRIPTION_",
+      type: "Boolean",
+      default: false,
+      required: false,
+    },
+    {
+      name: "safe-html",
+      description: "_A_ALERT_PROPS_SAFE_HTML_DESCRIPTION_",
+      type: "String",
+      default: undefined,
+      required: false,
+    },
+    {
+      name: "text",
+      description: "_A_ALERT_PROPS_TEXT_DESCRIPTION_",
+      type: "String",
+      default: undefined,
+      required: false,
+    },
+    {
+      name: "text-close",
+      description: "_A_ALERT_PROPS_TEXT_CLOSE_DESCRIPTION_",
+      type: "String",
+      default: "_ALERT_CLOSE_",
+      required: false,
+    },
+    {
+      name: "type",
+      description: "_A_ALERT_PROPS_TYPE_DESCRIPTION_",
+      type: "String",
+      default: "danger",
+      required: false,
+    },
+  ];
+
+  return {
+    dataProps,
+  };
+}

package/docs/src/views/PageList/compositionAPI/SlotsAPI.js

@@ -0,0 +1,12 @@
+export default function SlotsAPI() {
+  const dataSlots = [
+    {
+      name: "default",
+      description: "_A_ALERT_SLOTS_DEFAULT_DESCRIPTION_",
+    },
+  ];
+
+  return {
+    dataSlots,
+  };
+}

package/docs/src/views/PageList/i18n/PageListI18n.js

@@ -0,0 +1,19 @@
+import ar from "./ar.json";
+import de from "./de.json";
+import en from "./en.json";
+import es from "./es.json";
+import fr from "./fr.json";
+import hr from "./hr.json";
+import it from "./it.json";
+import ru from "./ru.json";
+
+export default {
+  ar,
+  de,
+  en,
+  es,
+  fr,
+  hr,
+  it,
+  ru,
+};

package/docs/src/views/PageList/i18n/ar.json

@@ -0,0 +1,3 @@
+{
+
+}

package/docs/src/views/PageList/i18n/de.json

@@ -0,0 +1,3 @@
+{
+  "_A_LIST_COMPONENT_NAME_": "Liste"
+}

package/docs/src/views/PageList/i18n/en.json

@@ -0,0 +1,3 @@
+{
+
+}

package/docs/src/views/PageList/i18n/es.json

@@ -0,0 +1,3 @@
+{
+
+}

package/docs/src/views/PageList/i18n/fr.json

@@ -0,0 +1,3 @@
+{
+
+}

package/docs/src/views/PageList/i18n/hr.json

@@ -0,0 +1,3 @@
+{
+
+}

package/docs/src/views/PageList/i18n/it.json

@@ -0,0 +1,3 @@
+{
+
+}

package/docs/src/views/PageList/i18n/ru.json

@@ -0,0 +1,3 @@
+{
+
+}

package/package.json

@@ -14,7 +14,7 @@
     "Vue.js"
   ],
   "homepage": "https://github.com/ilia-brykin/aloha/#README.md",
-  "version": "1.0.359",
+  "version": "1.0.360",
   "author": {
     "name": "Ilia Brykin",
     "email": "brykin.ilia@gmail.com"

package/src/directives/ASafeHtml.js

@@ -1,12 +1,15 @@
 import {
   sanitizeLocal,
 } from "../utils/utils";
+import {
+  isNil,
+} from "lodash-es";
 
 export default {
   beforeMount(el, binding) {
-    el.innerHTML = sanitizeLocal(binding.value);
+    el.innerHTML = sanitizeLocal(isNil(binding.value) ? "" : binding.value);
   },
   updated(el, binding) {
-    el.innerHTML = sanitizeLocal(binding.value);
+    el.innerHTML = sanitizeLocal(isNil(binding.value) ? "" : binding.value);
   },
 };