@veritree/ui 0.0.1

package/index.js

@@ -0,0 +1,12 @@
+import vtAccordion from './src/vtAccordion/vtAccordion.vue';
+import vtAccordionButton from './src/vtAccordion/vtAccordionButton.vue';
+import vtAccordionGroup from './src/vtAccordion/vtAccordionGroup.vue';
+import vtAccordionPanel from './src/vtAccordion/vtAccordionPanel.vue';
+
+export {
+  vtAccordion,
+  vtAccordionButton,
+  vtAccordionGroup,
+  vtAccordionPanel,
+}
+

package/package.json

@@ -0,0 +1,13 @@
+{
+  "name": "@veritree/ui",
+  "version": "0.0.1",
+  "description": "veritree ui library",
+  "type": "module",
+  "main": "index.js",
+  "repository": "https://github.com/tentree-org/veritree-ui.git",
+  "author": "jb",
+  "license": "MIT",
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/icons/IconChevronDown.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M16.59 8.59L12 13.17L7.41 8.59L6 10L12 16L18 10L16.59 8.59Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/icons/IconChevronUp.vue

@@ -0,0 +1,14 @@
+<template>
+  <svg
+    width="24"
+    height="24"
+    viewBox="0 0 24 24"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+  >
+    <path
+      d="M12 8L6 14L7.41 15.41L12 10.83L16.59 15.41L18 14L12 8Z"
+      fill="currentColor"
+    />
+  </svg>
+</template>

package/src/utils/genId.js

@@ -0,0 +1,13 @@
+// Generate id
+// https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/function*
+let gen = null;
+
+function* idMaker() {
+  let index = 0;
+  while (true) yield index++;
+}
+
+export const genId = () => {
+  if (!gen) gen = idMaker();
+  return gen.next().value;
+};

package/src/utils/keyboard.js

@@ -0,0 +1,10 @@
+export const keys = {
+  left: 'ArrowLeft',
+  right: 'ArrowRight',
+  down: 'ArrowDown',
+  up: 'ArrowUp',
+  home: 'Home',
+  end: 'End',
+  enter: 'Enter',
+  escape: 'Escape',
+};

package/src/vtAccordion/vtAccordion.vue

@@ -0,0 +1,105 @@
+<template>
+  <div class="accordion" :multiple="multiple"><slot></slot></div>
+</template>
+
+<script>
+export default {
+  name: 'vtAccordion',
+  props: {
+      multiple: {
+          type: Boolean,
+          default: false
+      }
+  },
+  provide() {
+    return {
+      api: () => {
+        // Get children components
+        const getAccordion = () => this.accordion;
+        const getAccordionGroup = () => this.accordionGroup;
+        const getAccordionPanel = () => this.accordionPanel;
+        const getAccordionButton = () => this.accordionButton;
+
+        // Handle registering and unregistering
+        const registerAccordion = (accordion) => {
+          if (!accordion) return;
+          this.accordion = accordion;
+        };        
+
+        const registerAccordionButton = (button) => {
+          if (!button) return;
+          this.accordionButton = button;
+        };
+
+        const registerAccordionGroup = (group) => {
+          if (!group) return;
+          _register(this.accordionGroup, group);
+        };
+
+        const registerAccordionPanel = (panel) => {
+          if (!panel) return;
+          _register(this.accordionPanel, panel);
+        };
+
+        const unregisterAccordionPanel = (id) => {
+          _unregister(this.accordionPanel, id);
+        };
+
+        const selectedPanel = (panelId) => {         
+          if (this.multiple) {
+            this.accordionPanel.forEach((item) => {
+              if(item.id === panelId) item.multipleActive();
+            })
+          } else{
+            this.accordionPanel.forEach((item) => {
+              item.id === panelId ? item.show() : item.hide();
+            })
+          }
+        };
+
+        // Register helper functions
+        const _register = (arr, item) => {
+          arr.push(item);
+          _index(arr);
+        };
+
+        const _unregister = (arr, id) => {
+          const index = _getIndex(arr, id);
+          arr.splice(index, 1);
+        };
+
+        // Index helper functions
+        const _index = (arr) => {
+          arr.forEach((item, index) => (item.index = index));
+        };
+
+        const _getIndex = (arr, id) => {
+          return arr.findIndex((item) => item.id === id);
+        };
+
+        return {
+          getAccordion,
+          getAccordionGroup,
+          getAccordionPanel,
+          getAccordionButton,
+          registerAccordionGroup,
+          registerAccordionButton,
+          registerAccordion,
+          registerAccordionPanel,
+          unregisterAccordionPanel,
+          selectedPanel,
+        };
+      },
+    };
+  },
+
+  data() {
+    return {
+      accordion: null,
+      accordionGroup: [],
+      accordionButton: null,
+      accordionPanel: [],
+    };
+  },
+};
+</script>

package/src/vtAccordion/vtAccordionButton.vue

@@ -0,0 +1,56 @@
+<template>
+  <h3>
+    <button
+      :id="id"
+      :aria-expanded="String(expanded)"
+      :aria-controls="id"
+      class="accordion-trigger"
+      type="button"
+      @click.prevent="onClick"
+    >
+      <span class="Accordion-button__text"><slot></slot></span>
+      <span class="Accordion-button__icon">
+        <IconChevronUp v-if="expanded" />
+        <IconChevronDown v-else />
+      </span>
+    </button>
+  </h3>
+</template>
+
+<script>
+import IconChevronDown from '../icons/IconChevronDown.vue';
+import IconChevronUp from '../icons/IconChevronUp.vue';
+
+export default {
+  name: 'vtAccordionButton',
+  components: { IconChevronDown, IconChevronUp },
+  inject: ['api'],
+  
+  data() {
+    return {
+      api: this.api(),
+      expanded: false,
+    };
+  },
+
+  computed: {
+    id() {
+      return this.$parent.id;
+    },
+  },
+
+  mounted() {
+    this.api.registerAccordionButton(this);
+  },
+
+  methods: {
+    toggleExpanded() {
+      this.expanded = !this.expanded;
+    },
+    onClick() {
+      const accordion = this.api.selectedPanel(this.id);
+      this.toggleExpanded();
+    },
+  },
+};
+</script>

package/src/vtAccordion/vtAccordionGroup.vue

@@ -0,0 +1,29 @@
+<template>
+  <div
+    :id="id"
+    class="accordion-group"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+import { genId } from '../utils/genId';
+
+export default {
+  name: 'vtAccordionGroup',
+  inject: ['api'],
+
+  data() {
+    return {
+      api: this.api(),
+      id: `group-${genId()}`,
+    };
+  },
+
+  mounted() {
+    this.api.registerAccordionGroup(this);
+  },
+
+};
+</script>

package/src/vtAccordion/vtAccordionPanel.vue

@@ -0,0 +1,55 @@
+<template>
+  <div
+    :id="id"
+    :aria-labelledby="id"
+    v-show="active"
+    class="accordion-panel"
+    role="region"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+// import { keys } from '@/utils/keyboard';
+
+export default {
+  name: 'vtAccordionPanel',
+  inject: ['api'],
+
+  data() {
+    return {
+      api: this.api(),
+      active: false,
+    };
+  },
+
+  computed: {
+    id() {
+      return this.$parent.id;
+    },
+  },
+
+  mounted() {
+    this.api.registerAccordionPanel(this);
+  },
+
+  methods: {
+    multipleActive(){
+      this.active = !this.active;
+    },
+
+    show() {
+      if(this.active) {
+        this.active = false
+        } else {
+        this.active = true
+      }
+    },
+
+    hide() {
+      this.active = false;
+    },
+  },
+};
+</script>