aloha-vue 1.0.0

package/src/AAccordion/AAccordion.js

@@ -0,0 +1,442 @@
+import AAccordionItem from "./AAccordionItem/AAccordionItem.vue";
+
+import {
+  computed,
+  provide,
+  toRefs,
+} from "vue";
+
+import frameworks from "../const/frameworks";
+import {
+  frameworksApi,
+} from "../API/frameworksApi";
+import {
+  replaceTextTemplateToASlot,
+} from "../utils/utils";
+import {
+  cloneDeep,
+  filter,
+  startsWith,
+  uniqueId,
+} from "lodash-es";
+
+const FRAMEWORKS_PARAMETERS = {
+  bootstrap: {
+    main: {
+      tag: "div",
+      class: classProps => [
+        classProps,
+        "accordion",
+      ],
+    },
+    item: {
+      tag: "div",
+      class: classProps => [
+        classProps,
+        "accordion-item",
+      ],
+    },
+    itemHeader: {
+      tag: "div",
+      class: classProps => [
+        classProps,
+        "accordion-header",
+      ],
+    },
+    itemHeaderButton: {
+      tag: "button",
+      class: (classProps, isOpen) => [
+        classProps,
+        "accordion-button",
+        {
+          collapsed: !isOpen,
+        },
+      ],
+    },
+    boxCollapse: {
+      tag: "div",
+      class: (classProps, isOpen) => [
+        classProps,
+        "accordion-collapse collapse",
+        {
+          show: isOpen,
+        },
+      ],
+    },
+    boxCollapseBody: {
+      tag: "div",
+      class: classProps => [
+        classProps,
+        "accordion-body",
+      ],
+    },
+  },
+  foundation: {
+    main: {
+      tag: "ul",
+      class: classProps => [
+        classProps,
+        "accordion",
+      ],
+    },
+    item: {
+      tag: "li",
+      class: (classProps, isOpen) => [
+        classProps,
+        "accordion-item",
+        {
+          "is-active": isOpen,
+        },
+      ],
+    },
+    itemHeader: {
+      tag: "template",
+      class: () => [],
+    },
+    itemHeaderButton: {
+      tag: "a",
+      class: classProps => [
+        classProps,
+        "accordion-title",
+      ],
+    },
+    boxCollapse: {
+      tag: "div",
+      class: classProps => [
+        classProps,
+        "accordion-content",
+      ],
+    },
+    boxCollapseBody: {
+      tag: "template",
+      class: () => [],
+    },
+  },
+  uikit: {
+    main: {
+      tag: "ul",
+      class: classProps => [
+        classProps,
+        "uk-accordion",
+      ],
+    },
+    item: {
+      tag: "li",
+      class: (classProps, isOpen) => [
+        classProps,
+        {
+          "uk-open": isOpen
+        },
+      ],
+    },
+    itemHeader: {
+      tag: "template",
+      class: () => [],
+    },
+    itemHeaderButton: {
+      tag: "a",
+      class: classProps => [
+        classProps,
+        "uk-accordion-title",
+      ],
+    },
+    boxCollapse: {
+      tag: "div",
+      class: (classProps, isOpen) => [
+        classProps,
+        "uk-accordion-content",
+        {
+          "uk-hidden": !isOpen,
+        },
+      ],
+    },
+    boxCollapseBody: {
+      tag: "template",
+      class: () => [],
+    },
+  },
+  bulma: {
+    main: {
+      tag: "div",
+      class: classProps => [
+        classProps,
+        "",
+      ],
+    },
+    item: {
+      tag: "div",
+      class: classProps => [
+        classProps,
+        "card",
+      ],
+    },
+    itemHeader: {
+      tag: "header",
+      class: classProps => [
+        classProps,
+        "card-header",
+      ],
+    },
+    itemHeaderButton: {
+      tag: "div",
+      class: (classProps, isOpen) => [
+        classProps,
+        "card-header-title is-clickable",
+        {
+          collapsed: !isOpen,
+        },
+      ],
+    },
+    boxCollapse: {
+      tag: "div",
+      class: (classProps, isOpen) => [
+        classProps,
+        "card-content",
+        {
+          "is-hidden": !isOpen,
+        },
+      ],
+    },
+    boxCollapseBody: {
+      tag: "div",
+      class: classProps => [
+        classProps,
+        "content",
+      ],
+    },
+  },
+};
+
+export default {
+  name: "AAccordion",
+  components: {
+    AAccordionItem,
+  },
+  provide() {
+    return {
+      id: computed(() => this.id),
+      indexesForOpen: computed(() => this.indexesForOpen),
+      keyList: computed(() => this.keyList),
+      keyLabel: computed(() => this.keyLabel),
+      keyContent: computed(() => this.keyContent),
+      classBoxCollapseBodyContent: computed(() => this.classBoxCollapseBodyContent),
+    };
+  },
+  props: {
+    alwaysOpen: {
+      type: Boolean,
+      required: false,
+    },
+    id: {
+      type: String,
+      required: false,
+      default: uniqueId("accordion_"),
+    },
+    items: {
+      type: Array,
+      required: true,
+    },
+    disabled: {
+      type: Boolean,
+      required: false,
+    },
+    keyList: {
+      type: String,
+      required: false,
+      default: "items",
+    },
+    keyLabel: {
+      type: String,
+      required: false,
+      default: "label",
+    },
+    keyContent: {
+      type: String,
+      required: false,
+      default: "content",
+    },
+    classMain: {
+      type: String,
+      required: false,
+      default: "",
+    },
+    classItem: {
+      type: String,
+      required: false,
+      default: "",
+    },
+    classItemHeader: {
+      type: String,
+      required: false,
+      default: "",
+    },
+    classItemHeaderButton: {
+      type: String,
+      required: false,
+      default: "",
+    },
+    classBoxCollapse: {
+      type: String,
+      required: false,
+      default: "",
+    },
+    classBoxCollapseBody: {
+      type: String,
+      required: false,
+      default: "",
+    },
+    classBoxCollapseBodyContent: {
+      type: String,
+      required: false,
+      default: "",
+    },
+    tag: {
+      type: String,
+      required: false,
+    },
+    tagItem: {
+      type: String,
+      required: false,
+    },
+    tagItemHeader: {
+      type: String,
+      required: false,
+    },
+    tagItemHeaderButton: {
+      type: String,
+      required: false,
+    },
+    tagBoxCollapse: {
+      type: String,
+      required: false,
+    },
+    tagBoxCollapseBody: {
+      type: String,
+      required: false,
+    },
+    tagBoxCollapseBodyContent: {
+      type: String,
+      required: false,
+      default: "div",
+    },
+    stop: {
+      type: Boolean,
+      required: false,
+    },
+    prevent: {
+      type: Boolean,
+      required: false,
+    },
+    framework: {
+      type: String,
+      required: false,
+      validator: framework => frameworks.indexOf(framework) !== -1,
+    },
+  },
+  emits: ["toggle"],
+  setup(props) {
+    const {
+      classMain,
+      classItem,
+      classItemHeader,
+      classItemHeaderButton,
+      classBoxCollapse,
+      classBoxCollapseBody,
+      tag,
+      tagItem,
+      tagItemHeader,
+      tagItemHeaderButton,
+      tagBoxCollapse,
+      tagBoxCollapseBody,
+      tagBoxCollapseBodyContent,
+    } = toRefs(props);
+    const {
+      frameworkLocal,
+      isBootstrap,
+      isFoundation,
+    } = frameworksApi(props);
+
+    provide("isBootstrap", isBootstrap);
+    provide("isFoundation", isFoundation);
+
+    const currentFrameworkOptions = computed(() => {
+      return FRAMEWORKS_PARAMETERS[frameworkLocal.value];
+    });
+
+    const tagsLocal = computed(() => {
+      return {
+        main: replaceTextTemplateToASlot(tag.value || currentFrameworkOptions.value.main.tag),
+        item: replaceTextTemplateToASlot(tagItem.value || currentFrameworkOptions.value.item.tag),
+        itemHeader: replaceTextTemplateToASlot(tagItemHeader.value || currentFrameworkOptions.value.itemHeader.tag),
+        itemHeaderButton: replaceTextTemplateToASlot(tagItemHeaderButton.value || currentFrameworkOptions.value.itemHeaderButton.tag),
+        boxCollapse: replaceTextTemplateToASlot(tagBoxCollapse.value || currentFrameworkOptions.value.boxCollapse.tag),
+        boxCollapseBody: replaceTextTemplateToASlot(tagBoxCollapseBody.value || currentFrameworkOptions.value.boxCollapseBody.tag),
+        boxCollapseBodyContent: replaceTextTemplateToASlot(tagBoxCollapseBodyContent.value),
+      };
+    });
+    provide("currentFrameworkOptions", currentFrameworkOptions);
+    provide("tagsLocal", tagsLocal);
+
+    const classMainLocal = computed(() => {
+      return currentFrameworkOptions.value.main.class(classMain.value);
+    });
+    provide("classMainLocal", classMainLocal);
+    provide("classItem", classItem);
+    provide("classItemHeader", classItemHeader);
+    provide("classItemHeaderButton", classItemHeaderButton);
+    provide("classBoxCollapse", classBoxCollapse);
+    provide("classBoxCollapseBody", classBoxCollapseBody);
+    return {
+      classMainLocal,
+      isBootstrap,
+      isFoundation,
+      tagsLocal,
+    };
+  },
+  data() {
+    return {
+      indexesForOpen: [],
+    };
+  },
+  methods: {
+    toggle({ indexes, isOpen, $event }) {
+      if (this.disabled) {
+        return;
+      }
+      const INDEXES = cloneDeep(indexes);
+      if (this.alwaysOpen) {
+        this.toggleWithAlwaysOpen({ indexes: INDEXES, isOpen });
+      } else {
+        this.toggleWithoutAlwaysOpen({ indexes: INDEXES, isOpen });
+      }
+      this.$emit("toggle");
+
+      if (this.stop) {
+        $event.stopPropagation();
+      }
+      if (this.prevent) {
+        $event.preventDefault();
+      }
+    },
+
+    toggleWithAlwaysOpen({ indexes, isOpen }) {
+      const CURRENT_INDEX = indexes.pop();
+      if (isOpen) {
+        this.indexesForOpen = filter(this.indexesForOpen, index => {
+          return !startsWith(index, CURRENT_INDEX);
+        });
+      } else {
+        this.indexesForOpen.push(CURRENT_INDEX);
+      }
+    },
+
+    toggleWithoutAlwaysOpen({ indexes, isOpen }) {
+      if (isOpen) {
+        indexes.pop();
+        this.indexesForOpen = indexes;
+      } else {
+        this.indexesForOpen = indexes;
+      }
+    },
+  },
+};

package/src/AAccordion/AAccordion.pug

@@ -0,0 +1,27 @@
+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

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

package/src/AAccordion/AAccordionItem/AAccordionItem.js

@@ -0,0 +1,162 @@
+import ASlot from "../../ASlot/ASlot.vue";
+
+import {
+  computed,
+  inject,
+  toRefs,
+} from "vue";
+import {
+  cloneDeep,
+  get,
+} from "lodash-es";
+
+export default {
+  name: "AAccordionItem",
+  components: {
+    ASlot,
+  },
+  props: {
+    item: {
+      type: Object,
+      required: true,
+    },
+    itemIndex: {
+      type: Number,
+      required: true,
+    },
+    isParentOpen: {
+      type: Boolean,
+      required: true,
+    },
+    parentIndexes: {
+      type: Array,
+      required: false,
+      default: () => [],
+    },
+  },
+  emits: ["toggle"],
+  inject: [
+    "classBoxCollapseBodyContent",
+    "id",
+    "indexesForOpen",
+    "isFoundation",
+    "keyList",
+    "keyLabel",
+    "keyContent",
+    "tagsLocal",
+  ],
+  setup(props) {
+    const {
+      isParentOpen,
+      itemIndex,
+      parentIndexes,
+    } = toRefs(props);
+    const classMainLocal = inject("classMainLocal");
+    const currentFrameworkOptions = inject("currentFrameworkOptions");
+    const classItem = inject("classItem");
+    const classItemHeader = inject("classItemHeader");
+    const classItemHeaderButton = inject("classItemHeaderButton");
+    const classBoxCollapse = inject("classBoxCollapse");
+    const classBoxCollapseBody = inject("classBoxCollapseBody");
+
+    const indexesForOpen = inject("indexesForOpen");
+    const parentIndexesString = computed(() => {
+      return parentIndexes.value.join(".");
+    });
+
+    const currentIndex = computed(() => {
+      if (parentIndexesString.value) {
+        return `${ parentIndexesString.value }.${ itemIndex.value }`;
+      }
+      return `${ itemIndex.value }`;
+    });
+
+    const isOpen = computed(() => {
+      if (!isParentOpen.value) {
+        return false;
+      }
+      return indexesForOpen.value.indexOf(currentIndex.value) !== -1;
+    });
+
+    const classItemLocal = computed(() => {
+      return currentFrameworkOptions.value.item.class(classItem.value, isOpen.value);
+    });
+    const classItemHeaderLocal = computed(() => {
+      return currentFrameworkOptions.value.itemHeader.class(classItemHeader.value, isOpen.value);
+    });
+    const classItemHeaderButtonLocal = computed(() => {
+      return currentFrameworkOptions.value.itemHeaderButton.class(classItemHeaderButton.value, isOpen.value);
+    });
+    const classBoxCollapseLocal = computed(() => {
+      return currentFrameworkOptions.value.boxCollapse.class(classBoxCollapse.value, isOpen.value);
+    });
+    const classBoxCollapseBodyLocal = computed(() => {
+      return currentFrameworkOptions.value.boxCollapseBody.class(classBoxCollapseBody.value, isOpen.value);
+    });
+
+    return {
+      classMainLocal,
+      classItemLocal,
+      classItemHeaderLocal,
+      classItemHeaderButtonLocal,
+      classBoxCollapseLocal,
+      classBoxCollapseBodyLocal,
+      currentIndex,
+      isOpen,
+    };
+  },
+  computed: {
+    hasChildren() {
+      return this.children.length !== 0;
+    },
+
+    children() {
+      return get(this.item, this.keyList, []) || [];
+    },
+
+    parentIndexesForChild() {
+      const PARENT_INDEXES = cloneDeep(this.parentIndexes);
+      PARENT_INDEXES.push(`${ this.currentIndex }`);
+      return PARENT_INDEXES;
+    },
+
+    ariaExpanded() {
+      return `${ this.isOpen }`;
+    },
+
+    idForCollapse() {
+      return `${ this.id }_${ this.currentIndex.replace(/\./g, "_") }`;
+    },
+
+    labelLocal() {
+      if (this.keyLabel) {
+        return get(this.item, this.keyLabel);
+      }
+    },
+
+    contentLocal() {
+      if (this.keyContent) {
+        return get(this.item, this.keyContent);
+      }
+    },
+
+    styleBoxCollapse() {
+      if (this.isFoundation && this.isOpen) {
+        return "display: block;";
+      }
+    },
+  },
+  methods: {
+    toggle($event) {
+      this.$emit("toggle", {
+        $event: $event,
+        indexes: this.parentIndexesForChild,
+        isOpen: this.isOpen,
+      });
+    },
+
+    toggleFromChild(arg) {
+      this.$emit("toggle", arg);
+    },
+  },
+};

package/src/AAccordion/AAccordionItem/AAccordionItem.pug

@@ -0,0 +1,76 @@
+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

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