aloha-vue 2.53.0 → 2.55.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aloha-vue",
-  "version": "2.53.0",
+  "version": "2.55.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/dropdown.scss

@@ -11,6 +11,7 @@
   --a_dropdown_max_height: 31.25rem;
   --a_dropdown_padding_x: 0;
   --a_dropdown_padding_y: 0.5rem;
+  --a_dropdown_group_indent: 0.375rem;
   --a_dropdown_spacer: 0.125rem;
   --a_dropdown_font_size: 1rem;
   --a_dropdown_color: var(--a_color_text);
@@ -30,7 +31,7 @@
   --a_dropdown_item_padding_y: 0.25rem;
   --a_dropdown_header_color: #6c757d;
   --a_dropdown_header_padding_x: 1rem;
-  --a_dropdown_header_padding_y: 0.5rem;
+  --a_dropdown_header_padding_y: 0.125rem;
   --a_select_menu_link_focus_color: var(--a_color_focus);
 
   z-index: var(--a_z_index_dropdown);
@@ -53,6 +54,15 @@
 .a_dropdown__menu_show {
   display: block;
 }
+.a_dropdown__menu,
+.a_dropdown__menu ul,
+.a_dropdown__menu li {
+  list-style: none;
+}
+.a_dropdown__menu ul {
+  margin: 0;
+  padding: 0;
+}
 .a_dropdown__item {
   display: block;
   width: 100%;
@@ -108,7 +118,68 @@
   margin-bottom: 0;
   font-size: .875rem;
   color: var(--a_dropdown_header_color);
+  font-weight: 600;
   white-space: nowrap;
 }
+.a_dropdown__group {
+  margin: 0;
+  padding: 0;
+}
+.a_dropdown__group + .a_dropdown__group {
+  margin-top: 0;
+}
+.a_dropdown__group__label {
+  position: relative;
+}
+.a_dropdown__group__list {
+  margin-left: var(--a_dropdown_group_indent);
+  padding-left: var(--a_dropdown_group_indent);
+}
+.a_dropdown__group_level_0 > .a_dropdown__group__list {
+  margin-left: calc(var(--a_dropdown_group_indent) * 0.5);
+  padding-left: calc(var(--a_dropdown_group_indent) * 0.75);
+}
+.a_dropdown__group_level_1 > .a_dropdown__group__list {
+  margin-left: var(--a_dropdown_group_indent);
+  padding-left: calc(var(--a_dropdown_group_indent) * 0.875);
+}
+.a_dropdown__group_level_2 > .a_dropdown__group__list {
+  margin-left: calc(var(--a_dropdown_group_indent) * 0.875);
+  padding-left: var(--a_dropdown_group_indent);
+}
+.a_dropdown__group_level_3 > .a_dropdown__group__list,
+.a_dropdown__group_level_4 > .a_dropdown__group__list,
+.a_dropdown__group_level_5 > .a_dropdown__group__list {
+  margin-left: calc(var(--a_dropdown_group_indent) * 0.875);
+  padding-left: var(--a_dropdown_group_indent);
+}
+.a_dropdown__group__list > li,
+.a_dropdown__group__list > .a_dropdown__group {
+  margin-top: 0;
+}
+.a_dropdown__group__list > li:first-child,
+.a_dropdown__group__list > .a_dropdown__group:first-child {
+  margin-top: 0;
+}
+.a_dropdown__group_level_0 > .a_dropdown__group__label {
+  padding-top: 0.0625rem;
+}
+.a_dropdown__group_level_0:first-child > .a_dropdown__group__label {
+  padding-top: var(--a_dropdown_header_padding_y);
+}
+.a_dropdown__group_level_1 > .a_dropdown__group__label {
+  padding-left: calc(var(--a_dropdown_header_padding_x) + 0.0625rem);
+}
+.a_dropdown__group_level_2 > .a_dropdown__group__label {
+  padding-left: calc(var(--a_dropdown_header_padding_x) + 0.125rem);
+}
+.a_dropdown__group_level_3 > .a_dropdown__group__label,
+.a_dropdown__group_level_4 > .a_dropdown__group__label,
+.a_dropdown__group_level_5 > .a_dropdown__group__label {
+  padding-left: calc(var(--a_dropdown_header_padding_x) + 0.1875rem);
+}
+.a_dropdown__group__list .a_dropdown__item {
+  padding-left: calc(var(--a_dropdown_item_padding_x) + 0.0625rem);
+}
 
 

package/src/AAccordion/AAccordion.js

@@ -1,198 +1,207 @@
-import {
-  computed,
-  h,
-} from "vue";
-
-import AAccordionItem from "./AAccordionItem/AAccordionItem";
-
-import DataAPI from "./compositionAPI/DataAPI";
-import IndexesForOpenAPI from "./compositionAPI/IndexesForOpenAPI";
-import ToggleAPI from "./compositionAPI/ToggleAPI";
-
-import {
-  AKeyId,
-} from "../const/AKeys";
-import {
-  uniqueId,
-} from "lodash-es";
-
-export default {
-  name: "AAccordion",
-  provide() {
-    return {
-      classBody: computed(() => this.classBody),
-      classButton: computed(() => this.classButton),
-      classHeader: computed(() => this.classHeader),
-      disabled: computed(() => this.disabled),
-      id: computed(() => this.id),
-      idsForOpen: computed(() => this.idsForOpen),
-      isCaret: computed(() => this.isCaret),
-      keyChildren: computed(() => this.keyChildren),
-      keyClassBody: computed(() => this.keyClassBody),
-      keyClassButton: computed(() => this.keyClassButton),
-      keyClassHeader: computed(() => this.keyClassHeader),
-      keyContent: computed(() => this.keyContent),
-      keyIsRender: computed(() => this.keyIsRender),
-      keyIsRenderBodyByFirstOpen: computed(() => this.keyIsRenderBodyByFirstOpen),
-      keyLabel: computed(() => this.keyLabel),
-      readonly: computed(() => this.readonly),
-      withGap: computed(() => this.withGap),
-      toggle: this.toggleLocal,
-    };
-  },
-  props: {
-    alwaysOpen: {
-      type: Boolean,
-      required: false,
-    },
-    classBody: {
-      type: [String, Object],
-      required: false,
-      default: "",
-    },
-    classButton: {
-      type: [String, Object],
-      required: false,
-      default: undefined,
-    },
-    classHeader: {
-      type: [String, Object],
-      required: false,
-      default: "",
-    },
-    disabled: {
-      type: Boolean,
-      required: false,
-    },
-    id: {
-      type: String,
-      required: false,
-      default: uniqueId("accordion_"),
-    },
-    idsForOpenDefault: {
-      type: Array,
-      required: false,
-      default: () => [],
-    },
-    isCaret: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
-    data: {
-      type: Array,
-      required: true,
-    },
-    keyClassBody: {
-      type: String,
-      required: false,
-      default: "classBody",
-    },
-    keyClassButton: {
-      type: String,
-      required: false,
-      default: "classButton",
-    },
-    keyClassHeader: {
-      type: String,
-      required: false,
-      default: "classHeader",
-    },
-    keyContent: {
-      type: String,
-      required: false,
-      default: "content",
-    },
-    keyId: {
-      type: String,
-      required: false,
-      default: undefined,
-    },
-    keyIsRender: {
-      type: String,
-      required: false,
-      default: "isRender",
-    },
-    keyIsRenderBodyByFirstOpen: {
-      type: String,
-      required: false,
-      default: "isRenderBodyByFirstOpen",
-    },
-    keyLabel: {
-      type: String,
-      required: false,
-      default: "label",
-    },
-    keyChildren: {
-      type: String,
-      required: false,
-      default: "children",
-    },
-    prevent: {
-      type: Boolean,
-      required: false,
-    },
-    readonly: {
-      type: Boolean,
-      required: false,
-    },
-    stop: {
-      type: Boolean,
-      required: false,
-    },
-    withGap: {
-      type: Boolean,
-      required: false,
-    },
-    indexesForOpen: {
-      type: Array,
-      required: false,
-      default: () => [],
-    },
-  },
-  emits: [
-    "toggle",
-  ],
-  setup(props, context) {
-    const {
-      idsForOpen,
-      initIdsForOpen,
-      toggleLocal,
-    } = ToggleAPI(props, context);
-
-    const {
-      dataWithIds,
-    } = DataAPI(props);
-
-    const {
-      initIdsFromIndexesForOpen,
-    } = IndexesForOpenAPI(props, {
-      idsForOpen,
-      dataWithIds,
-    });
-
-    initIdsForOpen();
-    initIdsFromIndexesForOpen();
-
-    return {
-      dataWithIds,
-      idsForOpen,
-      toggleLocal,
-    };
-  },
-  render() {
-    return h("div", {
-      class: ["a_accordion"],
-    }, [
-      this.dataWithIds.map((item, itemIndex) => {
-        return h(AAccordionItem, {
-          key: item[AKeyId],
-          item,
-          itemIndex,
-          isParentOpen: true,
-          keyId: this.keyId,
-        }, this.$slots);
-      }),
-    ]);
-  },
-};
+import {
+  computed,
+  h,
+  watch,
+} from "vue";
+
+import AAccordionItem from "./AAccordionItem/AAccordionItem";
+
+import DataAPI from "./compositionAPI/DataAPI";
+import IndexesForOpenAPI from "./compositionAPI/IndexesForOpenAPI";
+import ToggleAPI from "./compositionAPI/ToggleAPI";
+
+import {
+  AKeyId,
+} from "../const/AKeys";
+import {
+  uniqueId,
+} from "lodash-es";
+
+export default {
+  name: "AAccordion",
+  provide() {
+    return {
+      alwaysOpen: computed(() => this.alwaysOpen),
+      classBody: computed(() => this.classBody),
+      classButton: computed(() => this.classButton),
+      classHeader: computed(() => this.classHeader),
+      disabled: computed(() => this.disabled),
+      id: computed(() => this.id),
+      idsForOpen: computed(() => this.idsForOpen),
+      isCaret: computed(() => this.isCaret),
+      keyChildren: computed(() => this.keyChildren),
+      keyClassBody: computed(() => this.keyClassBody),
+      keyClassButton: computed(() => this.keyClassButton),
+      keyClassHeader: computed(() => this.keyClassHeader),
+      keyContent: computed(() => this.keyContent),
+      keyIsRender: computed(() => this.keyIsRender),
+      keyIsRenderBodyByFirstOpen: computed(() => this.keyIsRenderBodyByFirstOpen),
+      keyLabel: computed(() => this.keyLabel),
+      oneItemAlwaysOpen: computed(() => this.oneItemAlwaysOpen),
+      readonly: computed(() => this.readonly),
+      withGap: computed(() => this.withGap),
+      toggle: this.toggleLocal,
+    };
+  },
+  props: {
+    alwaysOpen: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    classBody: {
+      type: [String, Object],
+      required: false,
+      default: "",
+    },
+    classButton: {
+      type: [String, Object],
+      required: false,
+      default: undefined,
+    },
+    classHeader: {
+      type: [String, Object],
+      required: false,
+      default: "",
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+    },
+    id: {
+      type: String,
+      required: false,
+      default: uniqueId("accordion_"),
+    },
+    idsForOpenDefault: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+    isCaret: {
+      type: Boolean,
+      required: false,
+      default: true,
+    },
+    data: {
+      type: Array,
+      required: true,
+    },
+    keyClassBody: {
+      type: String,
+      required: false,
+      default: "classBody",
+    },
+    keyClassButton: {
+      type: String,
+      required: false,
+      default: "classButton",
+    },
+    keyClassHeader: {
+      type: String,
+      required: false,
+      default: "classHeader",
+    },
+    keyContent: {
+      type: String,
+      required: false,
+      default: "content",
+    },
+    keyId: {
+      type: String,
+      required: false,
+      default: undefined,
+    },
+    keyIsRender: {
+      type: String,
+      required: false,
+      default: "isRender",
+    },
+    keyIsRenderBodyByFirstOpen: {
+      type: String,
+      required: false,
+      default: "isRenderBodyByFirstOpen",
+    },
+    keyLabel: {
+      type: String,
+      required: false,
+      default: "label",
+    },
+    oneItemAlwaysOpen: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    keyChildren: {
+      type: String,
+      required: false,
+      default: "children",
+    },
+    prevent: {
+      type: Boolean,
+      required: false,
+    },
+    readonly: {
+      type: Boolean,
+      required: false,
+    },
+    stop: {
+      type: Boolean,
+      required: false,
+    },
+    withGap: {
+      type: Boolean,
+      required: false,
+    },
+    indexesForOpen: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+  },
+  emits: [
+    "toggle",
+  ],
+  setup(props, context) {
+    const {
+      idsForOpen,
+      initIdsForOpen,
+      toggleLocal,
+    } = ToggleAPI(props, context);
+
+    const {
+      dataWithIds,
+    } = DataAPI(props);
+
+    const {
+      initIdsFromIndexesForOpen,
+    } = IndexesForOpenAPI(props, {
+      idsForOpen,
+      dataWithIds,
+    });
+
+    initIdsForOpen();
+    initIdsFromIndexesForOpen();
+
+    return {
+      dataWithIds,
+      idsForOpen,
+      toggleLocal,
+    };
+  },
+  render() {
+    return h("div", {
+      class: ["a_accordion"],
+    }, [
+      this.dataWithIds.map((item, itemIndex) => {
+        return h(AAccordionItem, {
+          key: item[AKeyId],
+          item,
+          itemIndex,
+          isParentOpen: true,
+          keyId: this.keyId,
+        }, this.$slots);
+      }),
+    ]);
+  },
+};

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

@@ -17,12 +17,14 @@ export default function AttributesAPI(props, {
 }) {
   const item = toRef(props, "item");
 
+  const alwaysOpen = inject("alwaysOpen");
   const classButton = inject("classButton");
   const disabled = inject("disabled");
   const id = inject("id");
   const isCaret = inject("isCaret");
   const keyContent = inject("keyContent");
   const keyLabel = inject("keyLabel");
+  const oneItemAlwaysOpen = inject("oneItemAlwaysOpen");
   const readonly = inject("readonly");
   const withGap = inject("withGap");
 
@@ -41,12 +43,16 @@ export default function AttributesAPI(props, {
     return readonly.value || item.value.readonly;
   });
 
+  const isDisabledByOneItemAlwaysOpen = computed(() => {
+    return !alwaysOpen.value && oneItemAlwaysOpen.value && isOpen.value;
+  });
+
   const idForCollapse = computed(() => {
     return `${ id.value }_${ currentId.value }`;
   });
 
   const buttonTag = computed(() => {
-    return readonlyLocal.value ? "div" : "a";
+    return readonlyLocal.value || isDisabledByOneItemAlwaysOpen.value ? "div" : "a";
   });
 
   const buttonAttributes = computed(() => {
@@ -61,12 +67,17 @@ export default function AttributesAPI(props, {
     };
 
     if (!readonlyLocal.value) {
-      ATTRIBUTES.ariaExpanded = isOpen.value;
+      ATTRIBUTES["aria-expanded"] = isOpen.value;
       ATTRIBUTES["aria-controls"] = idForCollapse.value;
-      ATTRIBUTES.rolw = "button";
-      ATTRIBUTES.tabindex = 0;
-      ATTRIBUTES.disabled = disabledLocal.value;
-      ATTRIBUTES.onClick = toggleLocal;
+      ATTRIBUTES.role = "button";
+
+      if (isDisabledByOneItemAlwaysOpen.value) {
+        ATTRIBUTES["aria-disabled"] = true;
+      } else {
+        ATTRIBUTES.tabindex = 0;
+        ATTRIBUTES.disabled = disabledLocal.value;
+        ATTRIBUTES.onClick = toggleLocal;
+      }
     }
 
     return ATTRIBUTES;

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

@@ -9,6 +9,7 @@ import {
 } from "../../../const/AKeys";
 import {
   cloneDeep,
+  filter,
 } from "lodash-es";
 
 export default function ToggleAPI(props) {
@@ -68,7 +69,9 @@ export default function ToggleAPI(props) {
 
   const closeItemIfOpen = () => {
     if (isOpen.value && keyId.value) {
-      toggleLocal();
+      idsForOpen.value = filter(idsForOpen.value, id => {
+        return id !== currentId.value;
+      });
     }
   };