aloha-vue 2.55.0 → 2.56.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aloha-vue",
-  "version": "2.55.0",
+  "version": "2.56.0",
   "description": "Aloha-vue is a JavaScript library that provides a wide range of accessible components and directives for Vue.js. Accessibility is of paramount importance to us, and we have designed all our components to meet accessibility compliance criteria. This library is a valuable tool for frontend developers and has already been used in three projects, including two large-scale ones",
   "keywords": [
     "accessibility compliance criteria",

package/scss/utils/acordion.scss

@@ -38,13 +38,6 @@ $a_accordion_button_focus_box_shadow:       $a_btn_focus_box_shadow !default;
 $a_accordion_button_hover_bg:               var(--#{aloha.$aloha-prefix}color_gray_100) !default;
 
 $a_accordion_icon_width:                    1.25rem !default;
-$a_accordion_icon_color:                    $a_accordion_button_color !default;
-$a_accordion_icon_active_color:             $a_accordion_button_active_color !default;
-$a_accordion_icon_transition:               transform .2s ease-in-out !default;
-$a_accordion_icon_transform:                rotate(-180deg) !default;
-
-$a_accordion_button_icon:         url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$a_accordion_icon_color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
-$a_accordion_button_active_icon:  url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='#{$a_accordion_icon_active_color}'><path fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/></svg>") !default;
 
 
 //
@@ -62,11 +55,7 @@ $a_accordion_button_active_icon:  url("data:image/svg+xml,<svg xmlns='http://www
   --a_accordion_btn_padding_y: #{$a_accordion_button_padding_y};
   --a_accordion_btn_color: #{$a_accordion_color};
   --a_accordion_btn_bg: #{$a_accordion_button_bg};
-  --a_accordion_btn_icon: #{funktions.escape-svg($a_accordion_button_icon)};
   --a_accordion_btn_icon_width: #{$a_accordion_icon_width};
-  --a_accordion_btn_icon_transform: #{$a_accordion_icon_transform};
-  --a_accordion_btn_icon_transition: #{$a_accordion_icon_transition};
-  --a_accordion_btn_active_icon: #{funktions.escape-svg($a_accordion_button_active_icon)};
   --a_accordion_btn_focus_border_color: #{$a_accordion_button_focus_border_color};
   --a_accordion_btn_focus_box_shadow: #{$a_accordion_button_focus_box_shadow};
   --a_accordion_btn_hover_bg: #{$a_accordion_button_hover_bg};
@@ -82,6 +71,7 @@ $a_accordion_button_active_icon:  url("data:image/svg+xml,<svg xmlns='http://www
 .#{aloha.$aloha-prefix}accordion__button {
   position: relative;
   display: flex;
+  gap: .5rem;
   align-items: center;
   width: 100%;
   padding: var(--a_accordion_btn_padding_y) var(--a_accordion_btn_padding_x);
@@ -97,27 +87,17 @@ $a_accordion_button_active_icon:  url("data:image/svg+xml,<svg xmlns='http://www
     cursor: inherit;
   }
 
-  &:not(.#{aloha.$aloha-prefix}accordion__button_collapsed) {
+  &:not(.#{aloha.$aloha-prefix}accordion__button_close) {
     color: var(--a_accordion_active_color);
     background-color: var(--a_accordion_active_bg);
     box-shadow: inset 0 calc(var(--a_accordion_border_width) * -1) 0 var(--a_accordion_border_color); // stylelint-disable-line function-disallowed-list
-
-    &:not(.#{aloha.$aloha-prefix}accordion__button_has_not_caret)::after {
-      background-image: var(--a_accordion_btn_active_icon);
-      transform: var(--a_accordion_btn_icon_transform);
-    }
   }
 
-  // Accordion icon
-  &:not(.#{aloha.$aloha-prefix}accordion__button_has_not_caret)::after {
+  .#{aloha.$aloha-prefix}accordion__button__icon {
     flex-shrink: 0;
     width: var(--a_accordion_btn_icon_width);
     height: var(--a_accordion_btn_icon_width);
     margin-left: auto;
-    content: "";
-    background-image: var(--a_accordion_btn_icon);
-    background-repeat: no-repeat;
-    background-size: var(--a_accordion_btn_icon_width);
   }
 
   &:hover {
@@ -159,7 +139,7 @@ $a_accordion_button_active_icon:  url("data:image/svg+xml,<svg xmlns='http://www
   &:last-of-type {
     border-bottom-right-radius: var(--a_accordion_border_radius);
     border-bottom-left-radius: var(--a_accordion_border_radius);
-    .#{aloha.$aloha-prefix}accordion__button_collapsed {
+    .#{aloha.$aloha-prefix}accordion__button_close {
       border-bottom-right-radius: var(--a_accordion_border_radius);
       border-bottom-left-radius: var(--a_accordion_border_radius);
     }
@@ -191,4 +171,3 @@ $a_accordion_button_active_icon:  url("data:image/svg+xml,<svg xmlns='http://www
     border-radius: var(--a_accordion_border_radius);
   }
 }
-

package/src/AAccordion/AAccordion.js

@@ -191,7 +191,7 @@ export default {
   },
   render() {
     return h("div", {
-      class: ["a_accordion"],
+      class: ["a_accordion", { a_accordion_one_always_open: this.oneItemAlwaysOpen && !this.alwaysOpen }],
     }, [
       this.dataWithIds.map((item, itemIndex) => {
         return h(AAccordionItem, {

package/src/AAccordion/AAccordionItem/AAccordionItem.js

@@ -6,6 +6,8 @@ import {
   withDirectives,
 } from "vue";
 
+import AIcon from "../../AIcon/AIcon";
+
 import AttributesAPI from "./compositionAPI/AttributesAPI";
 import ChildrenAPI from "./compositionAPI/ChildrenAPI";
 import ClassAPI from "./compositionAPI/ClassAPI";
@@ -13,6 +15,8 @@ import ToggleAPI from "./compositionAPI/ToggleAPI";
 import VisibleAPI from "./compositionAPI/VisibleAPI";
 
 import ASafeHtml from "../../directives/ASafeHtml";
+import ChevronDown from "aloha-svg/dist/js/bootstrap/ChevronDown";
+import ChevronUp from "aloha-svg/dist/js/bootstrap/ChevronUp";
 import {
   AKeyId,
 } from "../../const/AKeys";
@@ -86,6 +90,7 @@ export default {
       buttonTag,
       contentLocal,
       idForCollapse,
+      isCaretLocal,
       labelLocal,
     } = AttributesAPI(props, {
       classButtonLocal,
@@ -117,6 +122,7 @@ export default {
       currentId,
       hasChildren,
       idForCollapse,
+      isCaretLocal,
       isBodyVisible,
       isOpen,
       isRender,
@@ -137,8 +143,8 @@ export default {
             parentIndexes: this.parentIndexes,
             id: this.id,
             currentId: this.currentId,
-          })
-: this.$slots.accordionContent ?
+          }) :
+          this.$slots.accordionContent ?
             this.$slots.accordionContent({
               item: this.item,
               itemIndex: this.itemIndex,
@@ -174,6 +180,8 @@ export default {
         "a_accordion__item",
         {
           a_accordion__item_with_gap: this.withGap,
+          a_accordion__item_open: this.isOpen,
+          a_accordion__item_close: !this.isOpen,
         },
       ],
     }, [
@@ -201,6 +209,10 @@ export default {
           this.labelLocal && withDirectives(h("span"), [
             [ASafeHtml, this.labelLocal],
           ]),
+          this.isCaretLocal && h(AIcon, {
+            class: "a_accordion__button__icon",
+            icon: this.isOpen ? ChevronUp : ChevronDown,
+          }),
         ]),
       ]),
       h("div", {

package/src/AAccordion/AAccordionItem/compositionAPI/AttributesAPI.js

@@ -58,7 +58,8 @@ export default function AttributesAPI(props, {
   const buttonAttributes = computed(() => {
     const ATTRIBUTES = {
       class: ["a_accordion__button", classButton.value, classButtonLocal.value, {
-        a_accordion__button_collapsed: !isOpen.value,
+        a_accordion__button_open: isOpen.value,
+        a_accordion__button_close: !isOpen.value,
         a_accordion__button_has_not_caret: !isCaretLocal.value,
         a_accordion__button_with_gap: withGap.value,
         readonly: readonlyLocal.value,
@@ -102,6 +103,7 @@ export default function AttributesAPI(props, {
     buttonTag,
     contentLocal,
     idForCollapse,
+    isCaretLocal,
     labelLocal,
   };
 }