v2 first commit

resources/assets/js/components/Collapse/Collapse.vue

@@ -0,0 +1,84 @@
+<template>
+  <div
+    id="accordion"
+    role="tablist"
+    aria-multiselectable="true"
+    class="accordion"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'collapse',
+  props: {
+    animationDuration: {
+      type: Number,
+      default: 250,
+      description: 'Collapse animation duration'
+    },
+    multipleActive: {
+      type: Boolean,
+      default: true,
+      description: 'Whether you can have multiple collapse items opened at the same time'
+    },
+    activeIndex: {
+      type: Number,
+      default: -1,
+      description: 'Active collapse item index'
+    }
+  },
+  provide() {
+    return {
+      animationDuration: this.animationDuration,
+      multipleActive: this.multipleActive,
+      addItem: this.addItem,
+      removeItem: this.removeItem,
+      deactivateAll: this.deactivateAll
+    };
+  },
+  data() {
+    return {
+      items: []
+    };
+  },
+  methods: {
+    addItem(item) {
+      const index = this.$slots.default.indexOf(item.$vnode);
+      if (index !== -1) {
+        this.items.splice(index, 0, item);
+      }
+    },
+    removeItem(item) {
+      const items = this.items;
+      const index = items.indexOf(item);
+      if (index > -1) {
+        items.splice(index, 1);
+      }
+    },
+    deactivateAll() {
+      this.items.forEach(item => {
+        item.active = false;
+      });
+    },
+    activateItem() {
+      if (this.activeIndex !== -1) {
+        this.items[this.activeIndex].active = true;
+      }
+    }
+  },
+  mounted() {
+    this.$nextTick(() => {
+      this.activateItem();
+    });
+  },
+  watch: {
+    activeIndex() {
+      this.activateItem();
+    }
+  }
+};
+</script>
+
+<style scoped></style>

resources/assets/js/components/Collapse/CollapseItem.vue

@@ -0,0 +1,91 @@
+<template>
+  <div class="card">
+    <div role="tab" class="card-header" :aria-expanded="active">
+      <a
+        data-toggle="collapse"
+        data-parent="#accordion"
+        :href="`#${itemId}`"
+        @click.prevent="activate"
+        :aria-controls="`content-${itemId}`"
+      >
+        <slot name="title"> {{ title }} </slot>
+        <i class="tim-icons icon-minimal-down"></i>
+      </a>
+    </div>
+    <collapse-transition :duration="animationDuration">
+      <div
+        v-show="active"
+        :id="`content-${itemId}`"
+        role="tabpanel"
+        :aria-labelledby="title"
+        class="collapsed"
+      >
+        <div class="card-body"><slot></slot></div>
+      </div>
+    </collapse-transition>
+  </div>
+</template>
+<script>
+import { CollapseTransition } from 'vue2-transitions';
+
+export default {
+  name: 'collapse-item',
+  components: {
+    CollapseTransition
+  },
+  props: {
+    title: {
+      type: String,
+      default: '',
+      description: 'Collapse item title'
+    },
+    id: String
+  },
+  inject: {
+    animationDuration: {
+      default: 250
+    },
+    multipleActive: {
+      default: false
+    },
+    addItem: {
+      default: () => {}
+    },
+    removeItem: {
+      default: () => {}
+    },
+    deactivateAll: {
+      default: () => {}
+    }
+  },
+  computed: {
+    itemId() {
+      return this.id || this.title;
+    }
+  },
+  data() {
+    return {
+      active: false
+    };
+  },
+  methods: {
+    activate() {
+      let wasActive = this.active;
+      if (!this.multipleActive) {
+        this.deactivateAll();
+      }
+      this.active = !wasActive;
+    }
+  },
+  mounted() {
+    this.addItem(this);
+  },
+  destroyed() {
+    if (this.$el && this.$el.parentNode) {
+      this.$el.parentNode.removeChild(this.$el);
+    }
+    this.removeItem(this);
+  }
+};
+</script>
+<style></style>