aloha-vue 1.0.42 → 1.0.43

package/docs/package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@popperjs/core": "2.11.6",
-    "aloha-css": "1.0.42",
+    "aloha-css": "1.0.43",
     "lodash-es": "^4.17.21",
     "vue": "3.2.31",
     "vue-router": "4.0.14",

package/docs/src/views/PageAccordion/PageAccordion.pug

@@ -26,9 +26,10 @@ div
     )
       strong {{ item.content }}
 
-  h2 disabled
-    a-accordion(
-      :items="items"
-      :disabled="true"
-      :is-caret="false"
-    )
+  h2 readonly
+  a-accordion(
+    :items="items"
+    :readonly="true"
+    :is-caret="false"
+    class-button="a_color_link"
+  )

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "aloha-vue",
   "description": "Project aloha",
-  "version": "1.0.42",
+  "version": "1.0.43",
   "author": "Ilia Brykin",
   "scripts": {
     "build-icons": "node scriptsNode/iconsSvgToJs.js bootstrap3 && node scriptsNode/iconsSvgToJs.js bootstrap-1-9-1"

package/src/AAccordion/AAccordion.js

@@ -3,7 +3,7 @@ import {
   h,
 } from "vue";
 
-import AAccordionItem from "./AAccordionItem/AAccordionItem";
+import AAccordionItem from "./AAccordionItem";
 
 import {
   cloneDeep,
@@ -16,6 +16,7 @@ export default {
   name: "AAccordion",
   provide() {
     return {
+      classButton: computed(() => this.classButton),
       disabled: computed(() => this.disabled),
       id: computed(() => this.id),
       indexesForOpen: computed(() => this.indexesForOpen),
@@ -23,6 +24,7 @@ export default {
       keyList: computed(() => this.keyList),
       keyLabel: computed(() => this.keyLabel),
       keyContent: computed(() => this.keyContent),
+      readonly: computed(() => this.readonly),
     };
   },
   props: {
@@ -43,6 +45,10 @@ export default {
       type: Boolean,
       required: false,
     },
+    readonly: {
+      type: Boolean,
+      required: false,
+    },
     keyList: {
       type: String,
       required: false,
@@ -71,6 +77,11 @@ export default {
       type: Boolean,
       required: false,
     },
+    classButton: {
+      type: [String, Object],
+      required: false,
+      default: undefined,
+    },
   },
   emits: ["toggle"],
   data() {

package/src/AAccordion/{AAccordionItem/AAccordionItem.js → AAccordionItem.js}

@@ -34,6 +34,7 @@ export default {
   },
   emits: ["toggle"],
   inject: [
+    "classButton",
     "disabled",
     "id",
     "indexesForOpen",
@@ -41,6 +42,7 @@ export default {
     "keyList",
     "keyLabel",
     "keyContent",
+    "readonly",
   ],
   setup(props) {
     const {
@@ -103,6 +105,29 @@ export default {
         return get(this.item, this.keyContent);
       }
     },
+
+    buttonTag() {
+      return this.readonly ? "div" : "button";
+    },
+
+    buttonAttributes() {
+      const ATTRIBUTES = {
+        class: ["a_accordion__button", this.classButton, {
+          a_accordion__button_collapsed: !this.isOpen,
+          a_accordion__button_has_not_caret: !this.isCaret,
+        }],
+      };
+
+      if (!this.readonly) {
+        ATTRIBUTES.ariaExpanded = this.isOpen;
+        ATTRIBUTES["aria-controls"] = this.idForCollapse;
+        ATTRIBUTES.type = "button";
+        ATTRIBUTES.disabled = this.disabled;
+        ATTRIBUTES.onClick = this.toggle;
+      }
+
+      return ATTRIBUTES;
+    },
   },
   methods: {
     toggle($event) {
@@ -124,17 +149,7 @@ export default {
       h("div", {
         class: "a_accordion__header",
       }, [
-        h("button", {
-          class: ["a_accordion__button", {
-            a_accordion__button_collapsed: !this.isOpen,
-            a_accordion__button_has_not_caret: !this.isCaret,
-          }],
-          ariaExpanded: this.isOpen,
-          "aria-controls": this.idForCollapse,
-          type: "button",
-          disabled: this.disabled,
-          onClick: this.toggle,
-        }, [
+        h(this.buttonTag, this.buttonAttributes, [
           this.$slots.button && this.$slots.button({
             item: this.item,
             itemIndex: this.itemIndex,