aloha-vue 1.0.355 → 1.0.357

package/docs/src/mainIcons.js

@@ -18,6 +18,7 @@ import Files from "../../src/AIcon/Icons/bootstrap-1-9-1/Files";
 import FiletypeHtml from "../../src/AIcon/Icons/bootstrap-1-9-1/FiletypeHtml";
 import FiletypeJs from "../../src/AIcon/Icons/bootstrap-1-9-1/FiletypeJs";
 import FiletypeSvg from "../../src/AIcon/Icons/bootstrap-1-9-1/FiletypeSvg";
+import Gear from "../../src/AIcon/Icons/bootstrap-1-9-1/Gear";
 import GlobeEuropeAfrica from "../../src/AIcon/Icons/bootstrap-1-9-1/GlobeEuropeAfrica";
 import HourglassSplit from "../../src/AIcon/Icons/bootstrap-1-9-1/HourglassSplit";
 import InputCursor from "../../src/AIcon/Icons/bootstrap-1-9-1/InputCursor";
@@ -51,6 +52,7 @@ export default {
   FiletypeHtml,
   FiletypeJs,
   FiletypeSvg,
+  Gear,
   GlobeEuropeAfrica,
   HourglassSplit,
   InputCursor,

package/docs/src/mainTranslation.js

@@ -22,6 +22,7 @@ import PageAOnHooksI18n from "./views/PageDirectives/PageOnHooks/i18n/PageAOnHoo
 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";
 
 export const mainTranslation = {
   ar: {
@@ -40,6 +41,7 @@ export const mainTranslation = {
     ...PageDisclosureI18n.ar,
     ...PageTooltipI18n.ar,
     ...PageGroupButtonDropdownI18n.ar,
+    ...PageDropdownI18n.ar,
   },
   de: {
     ...allLanguages.de,
@@ -57,6 +59,7 @@ export const mainTranslation = {
     ...PageDisclosureI18n.de,
     ...PageTooltipI18n.de,
     ...PageGroupButtonDropdownI18n.de,
+    ...PageDropdownI18n.de,
   },
   en: {
     ...allLanguages.en,
@@ -74,6 +77,7 @@ export const mainTranslation = {
     ...PageDisclosureI18n.en,
     ...PageTooltipI18n.en,
     ...PageGroupButtonDropdownI18n.en,
+    ...PageDropdownI18n.en,
   },
   es: {
     ...allLanguages.es,
@@ -91,6 +95,7 @@ export const mainTranslation = {
     ...PageDisclosureI18n.es,
     ...PageTooltipI18n.es,
     ...PageGroupButtonDropdownI18n.es,
+    ...PageDropdownI18n.es,
   },
   fr: {
     ...allLanguages.fr,
@@ -108,6 +113,7 @@ export const mainTranslation = {
     ...PageDisclosureI18n.fr,
     ...PageTooltipI18n.fr,
     ...PageGroupButtonDropdownI18n.fr,
+    ...PageDropdownI18n.fr,
   },
   hr: {
     ...allLanguages.hr,
@@ -125,6 +131,7 @@ export const mainTranslation = {
     ...PageDisclosureI18n.hr,
     ...PageTooltipI18n.hr,
     ...PageGroupButtonDropdownI18n.hr,
+    ...PageDropdownI18n.hr,
   },
   it: {
     ...allLanguages.it,
@@ -142,6 +149,7 @@ export const mainTranslation = {
     ...PageDisclosureI18n.it,
     ...PageTooltipI18n.it,
     ...PageGroupButtonDropdownI18n.it,
+    ...PageDropdownI18n.it,
   },
   ru: {
     ...allLanguages.ru,
@@ -159,5 +167,6 @@ export const mainTranslation = {
     ...PageDisclosureI18n.ru,
     ...PageTooltipI18n.ru,
     ...PageGroupButtonDropdownI18n.ru,
+    ...PageDropdownI18n.ru,
   },
 };

package/docs/src/views/PageButton/PageButtonTextObject/PageButtonTextObject.pug

@@ -3,7 +3,7 @@ aloha-example(
   :code-js="codeJs"
   header="_A_BUTTON_GROUP_TEXT_OBJECT_HEADER_"
   description="_A_BUTTON_GROUP_TEXT_OBJECT_DESCRIPTION_"
-  props="text"
+  props="text (as object)"
 )
   a-button(
     class="a_btn a_btn_primary"

package/docs/src/views/PageButton/PageButtonTitleArray/PageButtonTitleArray.pug

@@ -3,7 +3,7 @@ aloha-example(
   :code-js="codeJs"
   header="_A_BUTTON_GROUP_TITLE_ARRAY_HEADER_"
   description="_A_BUTTON_GROUP_TITLE_ARRAY_DESCRIPTION_"
-  props="title"
+  props="title (as array)"
 )
   a-button(
     class="a_btn a_btn_primary"

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

@@ -1,11 +1,60 @@
 import ADropdown from "../../../../src/ADropdown/ADropdown";
+import AlohaPage from "../../global/components/AlohaPage/AlohaPage.vue";
+import AlohaTableProps from "../../global/components/AlohaTableProps/AlohaTableProps.vue";
+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 PageDropdownButtonText from "./PageDropdownButtonText/PageDropdownButtonText.vue";
+import PageDropdownCaretIcon from "./PageDropdownCaretIcon/PageDropdownCaretIcon.vue";
+import PageDropdownHasCaret from "./PageDropdownHasCaret/PageDropdownHasCaret.vue";
+import PageDropdownInBody from "./PageDropdownInBody/PageDropdownInBody.vue";
+import PageDropdownTriggers from "./PageDropdownTriggers/PageDropdownTriggers.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: "PageDropdown",
   components: {
     ADropdown,
+    AlohaPage,
+    AlohaTableProps,
+    ATranslation,
+    PageDropdownBasic,
+    PageDropdownButtonClass,
+    PageDropdownButtonIcons,
+    PageDropdownButtonText,
+    PageDropdownCaretIcon,
+    PageDropdownHasCaret,
+    PageDropdownInBody,
+    PageDropdownTriggers,
   },
   setup() {
+    const {
+      pageTitle,
+    } = PageTitleAPI();
+
+    const {
+      dataProps,
+    } = PropsAPI();
+
+    const {
+      dataSlots,
+    } = SlotsAPI();
+
+    const {
+      dataEvents,
+    } = EventsAPI();
+
+    const {
+      dataExposes,
+    } = ExposesAPI();
+
+
     const dropdownActions = [
       {
         text: "Actions 0",
@@ -41,6 +90,11 @@ export default {
     ];
 
     return {
+      dataEvents,
+      dataExposes,
+      dataProps,
+      dataSlots,
+      pageTitle,
       dropdownActions,
     };
   },

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

@@ -1,5 +1,52 @@
-div
-  h1 ADropdown
+aloha-page(
+  :page-title="pageTitle"
+)
+  template(
+    v-slot:body
+  )
+    a-translation(
+      tag="p"
+      html="_A_DROPDOWN_COMPONENT_DESCRIPTION_"
+    )
+
+    page-dropdown-basic
+
+    page-dropdown-button-text
+
+    page-dropdown-button-class
+
+    page-dropdown-button-icons
+
+    page-dropdown-in-body
+
+    page-dropdown-triggers
+
+    page-dropdown-caret-icon
+
+    page-dropdown-has-caret
+
+    //aloha-table-props(
+    //  :data="dataProps"
+    //)
+    //
+    //aloha-table-props(
+    //  table-label="Slots"
+    //  :data="dataSlots"
+    //  :columns="['name', 'description']"
+    //)
+    //
+    //aloha-table-props(
+    //  table-label="Events"
+    //  :data="dataEvents"
+    //  :columns="['name', 'type', 'description']"
+    //)
+    //
+    //aloha-table-props(
+    //  table-label="Exposes"
+    //  :data="dataExposes"
+    //  :columns="['name', 'type', 'description']"
+    //)
+
 
   a-dropdown(
     button-class="a_btn a_btn_link"

package/docs/src/views/PageDropdown/PageDropdownBasic/PageDropdownBasic.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: "PageDropdownBasic",
+  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/PageDropdownBasic/PageDropdownBasic.pug

@@ -0,0 +1,9 @@
+aloha-example(
+  :code-html="codeHtml"
+  :code-js="codeJs"
+  header="_A_BASIC_USAGE_"
+  props="actions"
+)
+  a-dropdown(
+    :actions="dropdownActions"
+  )

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

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

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

@@ -0,0 +1,9 @@
+export default function HtmlAPI() {
+  const codeHtml = `<a-dropdown
+  :actions="dropdownActions"
+></a-dropdown>`;
+
+  return {
+    codeHtml,
+  };
+}

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

@@ -0,0 +1,32 @@
+export default function JsAPI() {
+  const codeJs = `import ADropdown from "aloha-vue/src/ADropdown/ADropdown";
+    
+export default {
+  name: "PageDropdownBasic",
+  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/PageDropdownButtonClass/PageDropdownButtonClass.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: "PageDropdownButtonClass",
+  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/PageDropdownButtonClass/PageDropdownButtonClass.pug

@@ -0,0 +1,21 @@
+aloha-example(
+  :code-html="codeHtml"
+  :code-js="codeJs"
+  header="_A_DROPDOWN_GROUP_BUTTON_CLASS_HEADER_"
+  description="_A_DROPDOWN_GROUP_BUTTON_CLASS_DESCRIPTION_"
+  props="button-text"
+)
+  a-dropdown(
+    :actions="dropdownActions"
+    button-class="a_btn a_btn_primary"
+  )
+  a-dropdown(
+    class="a_ml_2"
+    :actions="dropdownActions"
+    button-class="a_btn a_btn_success"
+  )
+  a-dropdown(
+    class="a_ml_2"
+    :actions="dropdownActions"
+    button-class="a_btn a_btn_info"
+  )

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

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

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

@@ -0,0 +1,20 @@
+export default function HtmlAPI() {
+  const codeHtml = `<a-dropdown
+  :actions="dropdownActions"
+  button-class="a_btn a_btn_primary"
+></a-dropdown>
+<a-dropdown
+  class="a_ml_2"
+  :actions="dropdownActions"
+  button-class="a_btn a_btn_success"
+></a-dropdown>
+<a-dropdown
+  class="a_ml_2"
+  :actions="dropdownActions"
+  button-class="a_btn a_btn_info"
+></a-dropdown>`;
+
+  return {
+    codeHtml,
+  };
+}

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

@@ -0,0 +1,32 @@
+export default function JsAPI() {
+  const codeJs = `import ADropdown from "aloha-vue/src/ADropdown/ADropdown";
+    
+export default {
+  name: "PageDropdownButtonClass",
+  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/PageDropdownButtonIcons/PageDropdownButtonIcons.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: "PageDropdownButtonIcons",
+  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/PageDropdownButtonIcons/PageDropdownButtonIcons.pug

@@ -0,0 +1,31 @@
+aloha-example(
+  :code-html="codeHtml"
+  :code-js="codeJs"
+  header="_A_DROPDOWN_GROUP_BUTTON_ICONS_HEADER_"
+  description="_A_DROPDOWN_GROUP_BUTTON_ICONS_DESCRIPTION_"
+  :props="['button-icon-left', 'button-icon-right']"
+)
+  a-dropdown(
+    :actions="dropdownActions"
+    button-icon-left="Gear"
+    button-text="Aloha"
+  )
+  a-dropdown(
+    class="a_ml_2"
+    :actions="dropdownActions"
+    button-icon-right="Files"
+    button-text="Aloha"
+  )
+  a-dropdown(
+    class="a_ml_2"
+    :actions="dropdownActions"
+    button-icon-left="Duplicate"
+    button-icon-right="Gear"
+    button-text="Aloha"
+  )
+  a-dropdown(
+    class="a_ml_2"
+    :actions="dropdownActions"
+    :button-icon-right="{ desktop: 'Gear', mobile: 'Files' }"
+    button-text="Aloha"
+  )

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

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

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

@@ -0,0 +1,30 @@
+export default function HtmlAPI() {
+  const codeHtml = `<a-dropdown
+  :actions="dropdownActions"
+  button-icon-left="Gear"
+  button-text="Aloha"
+></a-dropdown>
+<a-dropdown
+  class="a_ml_2"
+  :actions="dropdownActions"
+  button-icon-right="Files"
+  button-text="Aloha"
+></a-dropdown>
+<a-dropdown
+  class="a_ml_2"
+  :actions="dropdownActions"
+  button-icon-left="Duplicate"
+  button-icon-right="Gear"
+  button-text="Aloha"
+></a-dropdown>
+<a-dropdown
+  class="a_ml_2"
+  :actions="dropdownActions"
+  :button-icon-right="{ desktop: 'Gear', mobile: 'Files' }"
+  button-text="Aloha"
+></a-dropdown>`;
+
+  return {
+    codeHtml,
+  };
+}

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

@@ -0,0 +1,32 @@
+export default function JsAPI() {
+  const codeJs = `import ADropdown from "aloha-vue/src/ADropdown/ADropdown";
+    
+export default {
+  name: "PageDropdownButtonIcons",
+  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/PageDropdownButtonText/PageDropdownButtonText.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: "PageDropdownButtonText",
+  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/PageDropdownButtonText/PageDropdownButtonText.pug

@@ -0,0 +1,21 @@
+aloha-example(
+  :code-html="codeHtml"
+  :code-js="codeJs"
+  header="_A_DROPDOWN_GROUP_BUTTON_TEXT_HEADER_"
+  description="_A_DROPDOWN_GROUP_BUTTON_TEXT_DESCRIPTION_"
+  props="button-text"
+)
+  a-dropdown(
+    :actions="dropdownActions"
+    button-text="Aloha"
+  )
+  a-dropdown(
+    class="a_ml_2"
+    :actions="dropdownActions"
+    button-text="Aloha 123"
+  )
+  a-dropdown(
+    class="a_ml_2"
+    :actions="dropdownActions"
+    :button-text="{ desktop: 'Aloha desktop', mobile: 'Aloha mobile' }"
+  )

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

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

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

@@ -0,0 +1,20 @@
+export default function HtmlAPI() {
+  const codeHtml = `<a-dropdown
+  :actions="dropdownActions"
+  button-text="Aloha"
+></a-dropdown>
+<a-dropdown
+  class="a_ml_2"
+  :actions="dropdownActions"
+  button-text="Aloha 123"
+></a-dropdown>
+<a-dropdown
+  class="a_ml_2"
+  :actions="dropdownActions"
+  :button-text="{ desktop: 'Aloha desktop', mobile: 'Aloha mobile' }"
+></a-dropdown>`;
+
+  return {
+    codeHtml,
+  };
+}