aloha-vue 1.0.41 → 1.0.44

package/docs/package.json

@@ -12,7 +12,7 @@
   },
   "dependencies": {
     "@popperjs/core": "2.11.6",
-    "aloha-css": "1.0.41",
+    "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

@@ -25,3 +25,11 @@ div
       v-slot:content="{ item, itemIndex }"
     )
       strong {{ item.content }}
+
+  h2 readonly
+  a-accordion(
+    :items="items"
+    :readonly="true"
+    :is-caret="false"
+    class-button="a_color_link"
+  )

package/docs/src/views/PageForm/PageForm.js

@@ -60,6 +60,7 @@ export default {
           id: "aloha1",
           classColumn: "a_column_8",
           required: true,
+          isHide: true,
         },
         {
           type: "text",

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "aloha-vue",
   "description": "Project aloha",
-  "version": "1.0.41",
+  "version": "1.0.44",
   "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,11 +16,15 @@ export default {
   name: "AAccordion",
   provide() {
     return {
+      classButton: computed(() => this.classButton),
+      disabled: computed(() => this.disabled),
       id: computed(() => this.id),
       indexesForOpen: computed(() => this.indexesForOpen),
+      isCaret: computed(() => this.isCaret),
       keyList: computed(() => this.keyList),
       keyLabel: computed(() => this.keyLabel),
       keyContent: computed(() => this.keyContent),
+      readonly: computed(() => this.readonly),
     };
   },
   props: {
@@ -41,6 +45,10 @@ export default {
       type: Boolean,
       required: false,
     },
+    readonly: {
+      type: Boolean,
+      required: false,
+    },
     keyList: {
       type: String,
       required: false,
@@ -56,6 +64,11 @@ export default {
       required: false,
       default: "content",
     },
+    isCaret: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
     stop: {
       type: Boolean,
       required: false,
@@ -64,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,11 +34,15 @@ export default {
   },
   emits: ["toggle"],
   inject: [
+    "classButton",
+    "disabled",
     "id",
     "indexesForOpen",
+    "isCaret",
     "keyList",
     "keyLabel",
     "keyContent",
+    "readonly",
   ],
   setup(props) {
     const {
@@ -101,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) {
@@ -122,15 +149,7 @@ export default {
       h("div", {
         class: "a_accordion__header",
       }, [
-        h("button", {
-          class: ["a_accordion__button", {
-            a_accordion__button_collapsed: !this.isOpen,
-          }],
-          ariaExpanded: this.isOpen,
-          "aria-controls": this.idForCollapse,
-          type: "button",
-          onClick: this.toggle,
-        }, [
+        h(this.buttonTag, this.buttonAttributes, [
           this.$slots.button && this.$slots.button({
             item: this.item,
             itemIndex: this.itemIndex,

package/src/ui/ACheckbox/ACheckbox.js

@@ -95,7 +95,7 @@ export default {
     };
   },
   render() {
-    return h("div", {
+    return !this.isHide && h("div", {
       style: this.componentStyleHideDependencies,
     }, [
       h("div", {

package/src/ui/AFieldset/AFieldset.js

@@ -68,7 +68,7 @@ export default {
     };
   },
   render() {
-    return h("div", {
+    return !this.isHide && h("div", {
       style: this.componentStyleHideDependencies,
     }, [
       h("fieldset", {

package/src/ui/AInput/AInput.js

@@ -122,7 +122,7 @@ export default {
     };
   },
   render() {
-    return h("div", {
+    return !this.isHide && h("div", {
       style: this.componentStyleHideDependencies,
     }, [
       h("div", {

package/src/ui/AOneCheckbox/AOneCheckbox.js

@@ -89,7 +89,7 @@ export default {
     };
   },
   render() {
-    return h("div", {
+    return !this.isHide && h("div", {
       style: this.componentStyleHideDependencies,
     }, [
       h("div", {

package/src/ui/ARadio/ARadio.js

@@ -100,7 +100,7 @@ export default {
     };
   },
   render() {
-    return h("div", {
+    return !this.isHide && h("div", {
       style: this.componentStyleHideDependencies,
     }, [
       h("div", {

package/src/ui/ASelect/ASelect.js

@@ -355,7 +355,7 @@ export default {
     };
   },
   render() {
-    return h("div", {
+    return !this.isHide && h("div", {
       style: this.componentStyleHideDependencies,
     }, [
       h("div", {

package/src/ui/ASelect/compositionAPI/ASelectToggleAPI.js

@@ -84,6 +84,8 @@ export default function ASelectToggleAPI(props, {
     } else if (KEY_CODE === AKeysCode.escape) {
       closePopover();
       setFocusToButton();
+      $event.preventDefault();
+      $event.stopPropagation();
     } else if (KEY_CODE === AKeysCode.tab) {
       closePopover();
       setFocusToButton();

package/src/ui/ASwitch/ASwitch.js

@@ -179,7 +179,7 @@ export default {
     };
   },
   render() {
-    return h("div", {
+    return !this.isHide && h("div", {
       style: this.componentStyleHideDependencies,
     }, [
       h("div", {

package/src/ui/ATemplate/ATemplate.js

@@ -38,7 +38,7 @@ export default {
     };
   },
   render() {
-    return h("div", {
+    return !this.isHide && h("div", {
       class: "a_template",
       ...this.attributesWithHtml,
     }, this.$slots[this.slotName] &&

package/src/ui/ATextarea/ATextarea.js

@@ -157,7 +157,7 @@ export default {
     };
   },
   render() {
-    return h("div", null, [
+    return !this.isHide && h("div", null, [
       h("div", {
         class: ["a_form_element__parent", {
           a_form_element__parent_float: this.isLabelFloat,

package/src/ui/mixins/UiMixinProps.js

@@ -91,6 +91,10 @@ export default {
       type: String,
       required: false,
     },
+    isHide: {
+      type: Boolean,
+      required: false,
+    },
   },
   emits: [
     "update:modelValue",

package/src/AAccordion/AAccordion.pug

@@ -1,27 +0,0 @@
-component.a_accordion(
-  :is="tagsLocal.main"
-  :class="classMainLocal"
-)
-  a-accordion-item(
-    v-for="(item, itemIndex) in items"
-    :key="itemIndex"
-    :item="item"
-    :item-index="itemIndex"
-    :is-parent-open="true"
-    @toggle="toggle"
-  )
-    template(
-      v-slot:button="slotProps"
-    )
-      slot(
-        name="button"
-        v-bind="slotProps"
-      )
-
-    template(
-      v-slot:content="slotProps"
-    )
-      slot(
-        name="content"
-        v-bind="slotProps"
-      )

package/src/AAccordion/AAccordion.vue

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

package/src/AAccordion/AAccordionItem/AAccordionItem.pug

@@ -1,76 +0,0 @@
-component.a_accordion__item(
-  :is="tagsLocal.item"
-  :class="classItemLocal"
-)
-  component.a_accordion__item__header(
-    :is="tagsLocal.itemHeader"
-    :class="classItemHeaderLocal"
-  )
-    component.a_accordion__item__header_btn(
-      :is="tagsLocal.itemHeaderButton"
-      :class="classItemHeaderButtonLocal"
-      :aria-expanded="ariaExpanded"
-      :aria-controls="idForCollapse"
-      @click="toggle"
-    )
-      slot(
-        name="button"
-        :item="item"
-        :item-index="itemIndex"
-        :parent-indexes="parentIndexes"
-      )
-      span(
-        v-if="labelLocal"
-      ) {{ labelLocal }}
-
-  component.a_accordion__box_collapse(
-    :is="tagsLocal.boxCollapse"
-    :id="idForCollapse"
-    :class="classBoxCollapseLocal"
-    :style="styleBoxCollapse"
-  )
-    component.a_accordion__box_collapse__body(
-      :is="tagsLocal.boxCollapseBody"
-      :class="classBoxCollapseBodyLocal"
-    )
-      slot(
-        name="content"
-        :item="item"
-        :item-index="itemIndex"
-        :parent-indexes="parentIndexes"
-      )
-      component.a_accordion__box_collapse__body__content(
-        :is="tagsLocal.boxCollapseBodyContent"
-        v-if="contentLocal"
-        :class="classBoxCollapseBodyContent"
-        v-html="contentLocal"
-      )
-      component.a_accordion(
-        :is="tagsLocal.main"
-        v-if="hasChildren"
-        :class="classMainLocal"
-      )
-        a-accordion-item(
-          v-for="(itemChild, itemChildIndex) in children"
-          :key="itemChildIndex"
-          :item="itemChild"
-          :item-index="itemChildIndex"
-          :is-parent-open="isOpen"
-          :parent-indexes="parentIndexesForChild"
-          @toggle="toggleFromChild"
-        )
-          template(
-            v-slot:button="slotProps"
-          )
-            slot(
-              name="button"
-              v-bind="slotProps"
-            )
-
-          template(
-            v-slot:content="slotProps"
-          )
-            slot(
-              name="content"
-              v-bind="slotProps"
-            )

package/src/AAccordion/AAccordionItem/AAccordionItem.vue

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