aloha-vue 1.2.190 → 1.2.191

package/docs/src/views/PageGroupButtonDropdown/PageGroupButtonDropdown.js

@@ -5,6 +5,7 @@ import PageGroupButtonDropdownActionsClasses from "./PageGroupButtonDropdownActi
 import PageGroupButtonDropdownBasic from "./PageGroupButtonDropdownBasic/PageGroupButtonDropdownBasic.vue";
 import PageGroupButtonDropdownDisabled from "./PageGroupButtonDropdownDisabled/PageGroupButtonDropdownDisabled.vue";
 import PageGroupButtonDropdownDropdownAttributes from "./PageGroupButtonDropdownDropdownAttributes/PageGroupButtonDropdownDropdownAttributes.vue";
+import PageGroupButtonDropdownExtraClasses from "./PageGroupButtonDropdownExtraClasses/PageGroupButtonDropdownExtraClasses.vue";
 import PageGroupButtonDropdownHasDividerBeforeDropdown from "./PageGroupButtonDropdownHasDividerBeforeDropdown/PageGroupButtonDropdownHasDividerBeforeDropdown.vue";
 import PageGroupButtonDropdownIndexFirstDropdownAction from "./PageGroupButtonDropdownIndexFirstDropdownAction/PageGroupButtonDropdownIndexFirstDropdownAction.vue";
 import PageGroupButtonDropdownIndexFirstDropdownActionOne from "./PageGroupButtonDropdownIndexFirstDropdownActionOne/PageGroupButtonDropdownIndexFirstDropdownActionOne.vue";
@@ -25,6 +26,7 @@ export default {
     PageGroupButtonDropdownBasic,
     PageGroupButtonDropdownDisabled,
     PageGroupButtonDropdownDropdownAttributes,
+    PageGroupButtonDropdownExtraClasses,
     PageGroupButtonDropdownHasDividerBeforeDropdown,
     PageGroupButtonDropdownIndexFirstDropdownAction,
     PageGroupButtonDropdownIndexFirstDropdownActionOne,

package/docs/src/views/PageGroupButtonDropdown/PageGroupButtonDropdown.pug

@@ -23,6 +23,8 @@ aloha-page(
 
     page-group-button-dropdown-dropdown-attributes
 
+    page-group-button-dropdown-extra-classes
+
     //aloha-table-props(
     //  :data="dataProps"
     //)

package/docs/src/views/PageGroupButtonDropdown/PageGroupButtonDropdownExtraClasses/PageGroupButtonDropdownExtraClasses.js

@@ -0,0 +1,67 @@
+import AGroupButtonDropdown from "../../../../../src/AGroupButtonDropdown/AGroupButtonDropdown";
+import AlohaExample from "../../../global/components/AlohaExample/AlohaExample.vue";
+
+import HtmlAPI from "./compositionAPI/HtmlAPI";
+import JsAPI from "./compositionAPI/JsAPI";
+
+export default {
+  name: "PageGroupButtonDropdownExtraClasses",
+  components: {
+    AGroupButtonDropdown,
+    AlohaExample,
+  },
+  setup() {
+    const {
+      codeHtml,
+    } = HtmlAPI();
+
+    const {
+      codeJs,
+    } = JsAPI();
+
+    const actions = [
+      {
+        text: "Action 1",
+        type: "button",
+        callback: () => {},
+        classExtra: "test_action1",
+      },
+      {
+        text: "Action 2",
+        type: "button",
+        callback: () => {},
+        classExtra: "test_action2",
+      },
+      {
+        text: "Action 3",
+        type: "button",
+        callback: () => {},
+        classExtra: "test_action3",
+      },
+      {
+        text: "Action 4",
+        type: "button",
+        callback: () => {},
+        classExtra: "test_action4",
+      },
+      {
+        text: "Action 5",
+        type: "button",
+        callback: () => {},
+        classExtra: "test_action5",
+      },
+      {
+        text: "Action 6",
+        type: "button",
+        callback: () => {},
+        classExtra: "test_action6",
+      },
+    ];
+
+    return {
+      actions,
+      codeHtml,
+      codeJs,
+    };
+  },
+};

package/docs/src/views/PageGroupButtonDropdown/PageGroupButtonDropdownExtraClasses/PageGroupButtonDropdownExtraClasses.pug

@@ -0,0 +1,12 @@
+aloha-example(
+  :code-html="codeHtml"
+  :code-js="codeJs"
+  header="_A_GROUP_BUTTON_DROPDOWN_GROUP_EXTRA_CLASSES_HEADER_"
+  description="_A_GROUP_BUTTON_DROPDOWN_GROUP_EXTRA_CLASSES_DESCRIPTION_"
+  :props="['actions.classExtra']"
+)
+  a-group-button-dropdown(
+    :actions="actions"
+    :index-first-dropdown-action="2"
+    :index-first-dropdown-action-mobile="2"
+  )

package/docs/src/views/PageGroupButtonDropdown/PageGroupButtonDropdownExtraClasses/PageGroupButtonDropdownExtraClasses.vue

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

package/docs/src/views/PageGroupButtonDropdown/PageGroupButtonDropdownExtraClasses/compositionAPI/HtmlAPI.js

@@ -0,0 +1,11 @@
+export default function HtmlAPI() {
+  const codeHtml = `<a-group-button-dropdown
+  :actions="actions"
+  :index-first-dropdown-action="2"
+  :index-first-dropdown-action-mobile="2"
+></a-group-button-dropdown>`;
+
+  return {
+    codeHtml,
+  };
+}

package/docs/src/views/PageGroupButtonDropdown/PageGroupButtonDropdownExtraClasses/compositionAPI/JsAPI.js

@@ -0,0 +1,58 @@
+export default function JsAPI() {
+  const codeJs = `import AGroupButtonDropdown from "aloha-vue/src/AGroupButtonDropdown/AGroupButtonDropdown";
+    
+export default {
+  name: "PageGroupButtonDropdownActionsClasses",
+  components: {
+    AGroupButtonDropdown,
+  },
+  setup() {
+    const actions = [
+      {
+        text: "Action 1",
+        type: "button",
+        callback: () => {},
+        classExtra: "test_action1",
+      },
+      {
+        text: "Action 2",
+        type: "button",
+        callback: () => {},
+        classExtra: "test_action2",
+      },
+      {
+        text: "Action 3",
+        type: "button",
+        callback: () => {},
+        classExtra: "test_action3",
+      },
+      {
+        text: "Action 4",
+        type: "button",
+        callback: () => {},
+        classExtra: "test_action4",
+      },
+      {
+        text: "Action 5",
+        type: "button",
+        callback: () => {},
+        classExtra: "test_action5",
+      },
+      {
+        text: "Action 6",
+        type: "button",
+        callback: () => {},
+        classExtra: "test_action6",
+      },
+    ];
+    
+     return {
+      actions,
+    };
+  },
+};`;
+
+  return {
+    codeJs,
+  };
+}

package/package.json

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

package/src/ADropdown/ADropdownAction/ADropdownAction.js

@@ -33,6 +33,8 @@ export default {
           ...this.attributesAction,
           isHidden: undefined,
           callback: undefined,
+          classButton: undefined,
+          classExtra: undefined,
           onClick: this.action.callback,
         }),
       ]);
@@ -51,6 +53,8 @@ export default {
       }, [
         h(ALink, {
           ...this.attributesAction,
+          classButton: undefined,
+          classExtra: undefined,
           isHidden: undefined,
         }),
       ]);

package/src/AGroupButtonDropdown/AGroupButtonDropdownItem/AGroupButtonDropdownItem.js

@@ -8,6 +8,10 @@ import ALink from "../../ALink/ALink";
 
 import DropdownAPI from "./compositionAPI/DropdownAPI";
 
+import {
+  concatTwoStringsWithSpace,
+} from "../../utils/actions";
+
 export default {
   name: "AGroupButtonDropdownItem",
   props: {
@@ -65,15 +69,22 @@ export default {
         class: "a_btn_group",
       }, [
         ...this.data.children.map(action => {
-          const CLASS = action.classButton ? action.classButton : this.actionsClasses[action.actionNotDividerIndex];
+          let classLocal = action.classButton ? action.classButton : this.actionsClasses[action.actionNotDividerIndex];
+          if (action.classExtra) {
+            classLocal = concatTwoStringsWithSpace({
+              class1: classLocal,
+              class2: action.classExtra,
+            });
+          }
           const ID = action.id ? action.id : this.actionsIds[action.actionNotDividerIndex];
           const DISABLED = this.disabled || action.disabled;
           if (action.type === "button") {
             return h(AButton, {
               ...action,
               id: ID,
-              class: CLASS,
+              class: classLocal,
               classButton: undefined,
+              classExtra: undefined,
               disabled: DISABLED,
               onClick: action.callback,
               callback: undefined,
@@ -86,8 +97,9 @@ export default {
               ...action,
               id: ID,
               classButton: undefined,
+              classExtra: undefined,
               disabled: DISABLED,
-              class: CLASS,
+              class: classLocal,
               actionNotDividerIndex: undefined,
               isHidden: undefined,
               type: undefined,
@@ -98,7 +110,7 @@ export default {
             this.$slots[action.slotName]) {
             return this.$slots[action.slotName]({
               id: ID,
-              class: CLASS,
+              class: classLocal,
               action: action,
             });
           }

package/src/AGroupButtonDropdown/compositionAPI/ActionsAPI.js

@@ -6,6 +6,7 @@ import {
 import AMobileAPI from "../../compositionAPI/AMobileAPI";
 
 import {
+  concatTwoStringsWithSpace,
   filterActionsHiddenAndDivider,
 } from "../../utils/actions";
 import {
@@ -34,15 +35,23 @@ export default function ActionsAPI(props) {
     const ACTIONS = cloneDeep(actionsAllFiltered.value);
     forEach(ACTIONS, action => {
       // only for inline buttons
-      action.classButton = concatenateTwoStringsWithSpace({
+      action.classButton = concatTwoStringsWithSpace({
         class1: action.classButton,
         class2: action.class,
       });
+
       // only for dropdown
-      action.class = concatenateTwoStringsWithSpace({
+      action.class = concatTwoStringsWithSpace({
         class1: action.classDropdown,
         class2: action.class,
       });
+      delete action.classDropdown;
+      if (action.classExtra) {
+        action.class = concatTwoStringsWithSpace({
+          class1: action.classExtra,
+          class2: action.class,
+        });
+      }
     });
 
     return ACTIONS;
@@ -130,24 +139,3 @@ export default function ActionsAPI(props) {
   };
 }
 
-/**
- * Concatenates two strings with a space between them.
- *
- * @param {Object} options - The options for concatenation.
- * @param {string} options.class1 - The first class to concatenate.
- * @param {string} options.class2 - The second class to concatenate.
- * @param {string} [options.defaultValue=undefined] - The default value to return if both class1 and class2 are falsy.
- * @returns {string} The concatenated string or the defaultValue if both class1 and class2 are falsy.
- */
-export function concatenateTwoStringsWithSpace({ class1, class2, defaultValue = undefined }) {
-  if (class1) {
-    if (class2) {
-      return `${ class1 } ${ class2 }`;
-    }
-    return class1;
-  }
-  if (class2) {
-    return class2;
-  }
-  return defaultValue;
-}

package/src/utils/actions.js

@@ -41,3 +41,25 @@ export function filterActionsDivider({ actions }) {
 
   return ACTIONS_DIVIDER_FILTERED;
 }
+
+/**
+ * Concatenates two strings with a space between them.
+ *
+ * @param {Object} options - The options for concatenation.
+ * @param {string} options.class1 - The first class to concatenate.
+ * @param {string} options.class2 - The second class to concatenate.
+ * @param {string} [options.defaultValue=undefined] - The default value to return if both class1 and class2 are falsy.
+ * @returns {string} The concatenated string or the defaultValue if both class1 and class2 are falsy.
+ */
+export function concatTwoStringsWithSpace({ class1, class2, defaultValue = undefined }) {
+  if (class1) {
+    if (class2) {
+      return `${ class1 } ${ class2 }`;
+    }
+    return class1;
+  }
+  if (class2) {
+    return class2;
+  }
+  return defaultValue;
+}