aloha-vue 2.62.0 → 2.63.0

package/scss/utils/spacing.scss

@@ -1,63 +1,63 @@
-@use "sass:string";
-
-@use "aloha_prefix" as aloha;
-
-$a_spacing_shortcuts: ("margin": "m", "padding": "p") !default;
-$a_spacing_directions: ("top": "t", "right": "r", "bottom": "b", "left": "l") !default;
-$a_spacing_horizontal: "x" !default;
-$a_spacing_vertical: "y" !default;
-$a_spacing_values: (
-    "1": "0.25rem !important",
-    "2": "0.5rem !important",
-    "3": "0.75rem !important",
-    "4": "1rem !important",
-    "5": "1.5rem !important",
-    "6": "3rem !important",
-    "auto": "auto !important",
-    "0": "0 !important",
-) !default;
-
-@each $property, $shortcut in $a_spacing_shortcuts {
-    @each $name, $value in $a_spacing_values {
-        @if $property != "padding" or string.index($value, "auto") == null {
-            // All directions
-            .#{aloha.$aloha-prefix}#{$shortcut}_#{$name} {
-                #{$property}: #{$value};
-            }
-            // Cardinal directions
-            @each $direction, $suffix in $a_spacing_directions {
-                .#{aloha.$aloha-prefix}#{$shortcut}#{$suffix}_#{$name} {
-                    #{$property}-#{$direction}: #{$value};
-                }
-            }
-            // Horizontal axis
-            @if $a_spacing_horizontal != null {
-                .#{aloha.$aloha-prefix}#{$shortcut}#{$a_spacing_horizontal}_#{$name} {
-                    #{$property}-left: #{$value};
-                    #{$property}-right: #{$value};
-                }
-            }
-            // Vertical axis
-            @if $a_spacing_vertical != null {
-                .#{aloha.$aloha-prefix}#{$shortcut}#{$a_spacing_vertical}_#{$name} {
-                    #{$property}-top: #{$value};
-                    #{$property}-bottom: #{$value};
-                }
-            }
-        }
-    }
-}
-
-@each $name, $value in $a_spacing_values {
-  @if $name != "auto" {
-    .a_gap_#{$name} {
-      gap: #{$value};
-    }
-    .a_gap_x_#{$name} {
-      row-gap: #{$value};
-    }
-    .a_gap_y_#{$name} {
-      column-gap: #{$value};
-    }
-  }
-}
+@use "sass:string";
+
+@use "aloha_prefix" as aloha;
+
+$a_spacing_shortcuts: ("margin": "m", "padding": "p") !default;
+$a_spacing_directions: ("top": "t", "right": "r", "bottom": "b", "left": "l") !default;
+$a_spacing_horizontal: "x" !default;
+$a_spacing_vertical: "y" !default;
+$a_spacing_values: (
+    "1": "0.25rem !important",
+    "2": "0.5rem !important",
+    "3": "0.75rem !important",
+    "4": "1rem !important",
+    "5": "1.5rem !important",
+    "6": "3rem !important",
+    "auto": "auto !important",
+    "0": "0 !important",
+) !default;
+
+@each $property, $shortcut in $a_spacing_shortcuts {
+    @each $name, $value in $a_spacing_values {
+        @if $property != "padding" or string.index($value, "auto") == null {
+            // All directions
+            .#{aloha.$aloha-prefix}#{$shortcut}_#{$name} {
+                #{$property}: #{$value};
+            }
+            // Cardinal directions
+            @each $direction, $suffix in $a_spacing_directions {
+                .#{aloha.$aloha-prefix}#{$shortcut}#{$suffix}_#{$name} {
+                    #{$property}-#{$direction}: #{$value};
+                }
+            }
+            // Horizontal axis
+            @if $a_spacing_horizontal != null {
+                .#{aloha.$aloha-prefix}#{$shortcut}#{$a_spacing_horizontal}_#{$name} {
+                    #{$property}-left: #{$value};
+                    #{$property}-right: #{$value};
+                }
+            }
+            // Vertical axis
+            @if $a_spacing_vertical != null {
+                .#{aloha.$aloha-prefix}#{$shortcut}#{$a_spacing_vertical}_#{$name} {
+                    #{$property}-top: #{$value};
+                    #{$property}-bottom: #{$value};
+                }
+            }
+        }
+    }
+}
+
+@each $name, $value in $a_spacing_values {
+  @if $name != "auto" {
+    .a_gap_#{$name} {
+      gap: #{$value};
+    }
+    .a_gap_x_#{$name} {
+      row-gap: #{$value};
+    }
+    .a_gap_y_#{$name} {
+      column-gap: #{$value};
+    }
+  }
+}

package/scss/utils/tooltip.scss

@@ -1,64 +1,64 @@
-@use "aloha_prefix" as aloha;
-
-.a_tooltip__container {
-  --#{aloha.$aloha-prefix}tooltip_bg: var(--#{aloha.$aloha-prefix}color_primary);
-  --#{aloha.$aloha-prefix}tooltip_color: var(--#{aloha.$aloha-prefix}color_white);
-  --#{aloha.$aloha-prefix}tooltip_border_radius: var(--#{aloha.$aloha-prefix}border_radius);
-  --#{aloha.$aloha-prefix}tooltip_padding_x: 0.5rem;
-  --#{aloha.$aloha-prefix}tooltip_padding_y: 0.3rem;
-  --#{aloha.$aloha-prefix}tooltip_font_size: 0.8rem;
-  --#{aloha.$aloha-prefix}tooltip_arrow_width: 0.5rem;
-  --#{aloha.$aloha-prefix}tooltip_arrow_height: 0.5rem;
-  --#{aloha.$aloha-prefix}tooltip_arrow_shift: -0.25rem;
-  --#{aloha.$aloha-prefix}tooltip_max_height: 25rem;
-  --#{aloha.$aloha-prefix}tooltip_box_shadow_color: var(--#{aloha.$aloha-prefix}color_gray_400);
-  --#{aloha.$aloha-prefix}tooltip_box_shadow: 1px 1px 0 0 var(--#{aloha.$aloha-prefix}tooltip_box_shadow_color);
-
-  z-index: var(--#{aloha.$aloha-prefix}z_index_tooltip);
-  background-color: var(--#{aloha.$aloha-prefix}tooltip_bg);
-  color: var(--#{aloha.$aloha-prefix}tooltip_color);
-  border-radius: var(--#{aloha.$aloha-prefix}tooltip_border_radius);
-  font-size: var(--#{aloha.$aloha-prefix}tooltip_font_size);
-  display: inline-block;
-  box-shadow: var(--#{aloha.$aloha-prefix}tooltip_box_shadow);
-
-  &[data-popper-placement^='top'] > .a_tooltip__arrow {
-    bottom: var(--#{aloha.$aloha-prefix}tooltip_arrow_shift);
-  }
-  &[data-popper-placement^='bottom'] > .a_tooltip__arrow {
-    top: var(--#{aloha.$aloha-prefix}tooltip_arrow_shift);
-  }
-  &[data-popper-placement^='left'] > .a_tooltip__arrow {
-    right: var(--#{aloha.$aloha-prefix}tooltip_arrow_shift);
-  }
-  &[data-popper-placement^='right'] > .a_tooltip__arrow {
-    left: var(--#{aloha.$aloha-prefix}tooltip_arrow_shift);
-  }
-}
-
-.a_tooltip__arrow,
-.a_tooltip__arrow:before {
-  position: absolute;
-  width: var(--#{aloha.$aloha-prefix}tooltip_arrow_width);
-  height: var(--#{aloha.$aloha-prefix}tooltip_arrow_height);
-  background: inherit;
-  box-shadow: var(--#{aloha.$aloha-prefix}tooltip_box_shadow);
-}
-
-.a_tooltip__arrow {
-  visibility: hidden;
-  &:before {
-    visibility: visible;
-    content: '';
-    transform: rotate(45deg);
-  }
-}
-
-.a_tooltip__wrapper {
-  max-height: var(--#{aloha.$aloha-prefix}tooltip_max_height);
-  overflow-y: auto;
-  padding: var(--#{aloha.$aloha-prefix}tooltip_padding_y) var(--#{aloha.$aloha-prefix}tooltip_padding_x);
-  background-color: inherit;
-  border-radius: inherit;
-  position: relative;
+@use "aloha_prefix" as aloha;
+
+.a_tooltip__container {
+  --#{aloha.$aloha-prefix}tooltip_bg: var(--#{aloha.$aloha-prefix}color_primary);
+  --#{aloha.$aloha-prefix}tooltip_color: var(--#{aloha.$aloha-prefix}color_white);
+  --#{aloha.$aloha-prefix}tooltip_border_radius: var(--#{aloha.$aloha-prefix}border_radius);
+  --#{aloha.$aloha-prefix}tooltip_padding_x: 0.5rem;
+  --#{aloha.$aloha-prefix}tooltip_padding_y: 0.3rem;
+  --#{aloha.$aloha-prefix}tooltip_font_size: 0.8rem;
+  --#{aloha.$aloha-prefix}tooltip_arrow_width: 0.5rem;
+  --#{aloha.$aloha-prefix}tooltip_arrow_height: 0.5rem;
+  --#{aloha.$aloha-prefix}tooltip_arrow_shift: -0.25rem;
+  --#{aloha.$aloha-prefix}tooltip_max_height: 25rem;
+  --#{aloha.$aloha-prefix}tooltip_box_shadow_color: var(--#{aloha.$aloha-prefix}color_gray_400);
+  --#{aloha.$aloha-prefix}tooltip_box_shadow: 1px 1px 0 0 var(--#{aloha.$aloha-prefix}tooltip_box_shadow_color);
+
+  z-index: var(--#{aloha.$aloha-prefix}z_index_tooltip);
+  background-color: var(--#{aloha.$aloha-prefix}tooltip_bg);
+  color: var(--#{aloha.$aloha-prefix}tooltip_color);
+  border-radius: var(--#{aloha.$aloha-prefix}tooltip_border_radius);
+  font-size: var(--#{aloha.$aloha-prefix}tooltip_font_size);
+  display: inline-block;
+  box-shadow: var(--#{aloha.$aloha-prefix}tooltip_box_shadow);
+
+  &[data-popper-placement^='top'] > .a_tooltip__arrow {
+    bottom: var(--#{aloha.$aloha-prefix}tooltip_arrow_shift);
+  }
+  &[data-popper-placement^='bottom'] > .a_tooltip__arrow {
+    top: var(--#{aloha.$aloha-prefix}tooltip_arrow_shift);
+  }
+  &[data-popper-placement^='left'] > .a_tooltip__arrow {
+    right: var(--#{aloha.$aloha-prefix}tooltip_arrow_shift);
+  }
+  &[data-popper-placement^='right'] > .a_tooltip__arrow {
+    left: var(--#{aloha.$aloha-prefix}tooltip_arrow_shift);
+  }
+}
+
+.a_tooltip__arrow,
+.a_tooltip__arrow:before {
+  position: absolute;
+  width: var(--#{aloha.$aloha-prefix}tooltip_arrow_width);
+  height: var(--#{aloha.$aloha-prefix}tooltip_arrow_height);
+  background: inherit;
+  box-shadow: var(--#{aloha.$aloha-prefix}tooltip_box_shadow);
+}
+
+.a_tooltip__arrow {
+  visibility: hidden;
+  &:before {
+    visibility: visible;
+    content: '';
+    transform: rotate(45deg);
+  }
+}
+
+.a_tooltip__wrapper {
+  max-height: var(--#{aloha.$aloha-prefix}tooltip_max_height);
+  overflow-y: auto;
+  padding: var(--#{aloha.$aloha-prefix}tooltip_padding_y) var(--#{aloha.$aloha-prefix}tooltip_padding_x);
+  background-color: inherit;
+  border-radius: inherit;
+  position: relative;
 }

package/src/AAccordion/AAccordion.js

@@ -1,206 +1,206 @@
-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 {
-      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", { a_accordion_one_always_open: this.oneItemAlwaysOpen && !this.alwaysOpen }],
-    }, [
-      this.dataWithIds.map((item, itemIndex) => {
-        return h(AAccordionItem, {
-          key: item[AKeyId],
-          item,
-          itemIndex,
-          isParentOpen: true,
-          keyId: this.keyId,
-        }, this.$slots);
-      }),
-    ]);
-  },
-};
+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 {
+      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", { a_accordion_one_always_open: this.oneItemAlwaysOpen && !this.alwaysOpen }],
+    }, [
+      this.dataWithIds.map((item, itemIndex) => {
+        return h(AAccordionItem, {
+          key: item[AKeyId],
+          item,
+          itemIndex,
+          isParentOpen: true,
+          keyId: this.keyId,
+        }, this.$slots);
+      }),
+    ]);
+  },
+};