feat: features section with accordion

Author: svvimming

assets/scss/settings.scss

@@ -17,6 +17,7 @@
  */
 
 $gridWidth: 79.125rem;
+$halfGridWidth: 39.5625rem;
 $standardGutter: 0.75rem;
 $baseFontSize: 16;
 $baseLeading: 1.2;

assets/scss/theme/utilities.scss

@@ -36,10 +36,11 @@ $codGray: #060606; // black
 $sageGreen: #CBDDBB; // light soft green
 $alto: #D3D3D3; // light gray
 $burntSienna: #E8655D; // red
-$chardonnay: #FFC582; // yellowish orangish
+$chardonnay: #FFC582; // peachy orange
 $codeBlack: #191919; // black
 $tundora: #414141; // gray
 $eastSide: #BC8AC3; // lavender purple
+$siam: #565D50; // siam
 
 // ====================================================================== Themes
 :root {

components/accordion/accordion-content.vue

@@ -0,0 +1,69 @@
+<template>
+  <div class="accordion-content" :style="{ height }">
+
+    <slot />
+
+  </div>
+</template>
+
+<script>
+// ===================================================================== Imports
+import Throttle from 'lodash/throttle'
+
+// ====================================================================== Export
+export default {
+  name: 'AccordionContent',
+
+  data () {
+    return {
+      content: false,
+      height: '0px',
+      resize: false
+    }
+  },
+
+  mounted () {
+    this.$nextTick(() => {
+      this.content = this.$slots.default[0].elm
+      this.resize = Throttle(() => {
+        if (this.height !== '0px') {
+          this.height = this.content.clientHeight + 'px'
+        }
+      }, 100)
+      window.addEventListener('resize', this.resize)
+      if (this.content.$on) {
+        this.content.$on('changed', () => {
+          this.$nextTick(() => {
+            const height = this.content.clientHeight + 'px'
+            if (height !== this.height) {
+              this.height = height
+            }
+          })
+        })
+      }
+    })
+  },
+
+  beforeDestroy () {
+    if (this.resize) { window.removeEventListener('resize', this.resize) }
+  },
+
+  methods: {
+    toggleOpen () {
+      const height = this.height
+      if (height === '0px') {
+        this.height = this.content.clientHeight + 'px'
+      } else {
+        this.height = '0px'
+      }
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+// ///////////////////////////////////////////////////////////////////// General
+.accordion-content {
+  transition: height 150ms ease-in-out;
+}
+</style>

components/accordion/accordion-header.vue

@@ -0,0 +1,42 @@
+<template>
+  <div
+    class="accordion-header"
+    @click="toggle"
+    @keyup.enter="toggle">
+
+    <slot />
+
+  </div>
+</template>
+
+<script>
+// ====================================================================== Export
+export default {
+  name: 'AccordionHeader',
+
+  mounted () {
+    this.$nextTick(() => {
+      const parent = this.$parent.$parent
+      const count = parent.childCount
+      const newCount = parent.$children.length
+      if (parent.toggleOnLoad) {
+        this.toggle()
+      } else if (count !== newCount) {
+        if (parent.toggleWhenAdded) { this.toggle() }
+        if (parent.scrollToWhenAdded) {
+          const timeout = setTimeout(() => {
+            this.$scrollToElement(this.$el, 500, -96)
+            clearTimeout(timeout)
+          }, 150)
+        }
+      }
+    })
+  },
+
+  methods: {
+    toggle () {
+      this.$parent.$parent.$emit('toggle', this.$parent._uid)
+    }
+  }
+}
+</script>

components/accordion/accordion-section.vue

@@ -0,0 +1,62 @@
+<template>
+  <div :class="['accordion-section', { open }]">
+
+    <slot />
+
+  </div>
+</template>
+
+<script>
+// ====================================================================== Export
+export default {
+  name: 'AccordionSection',
+
+  props: {
+    active: {
+      type: [Boolean, Number, Array],
+      default: false
+    },
+    selected: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  data () {
+    return {
+      id: this._uid
+    }
+  },
+
+  computed: {
+    open () {
+      if (Array.isArray(this.active)) {
+        return this.active.includes(this.id)
+      }
+      return this.active === this.id
+    }
+  },
+
+  watch: {
+    open () {
+      this.$children[1].toggleOpen()
+    }
+  },
+
+  mounted () {
+    this.$nextTick(() => {
+      if (this.selected) {
+        this.$parent.setSelected(this.id)
+      }
+    })
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+// ///////////////////////////////////////////////////////////////////// General
+.accordion-section {
+  position: relative;
+  overflow: hidden;
+}
+</style>

components/accordion/accordion.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="accordion">
+
+    <slot :active="active" />
+
+  </div>
+</template>
+
+<script>
+// ====================================================================== Export
+export default {
+  name: 'Accordion',
+
+  props: {
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    toggleOnLoad: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    toggleWhenAdded: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    scrollToWhenAdded: {
+      type: Boolean,
+      required: false,
+      default: false
+    }
+  },
+
+  data () {
+    return {
+      active: this.multiple ? [] : false,
+      childCount: 0
+    }
+  },
+
+  created () {
+    this.$on('toggle', (id) => {
+      if (this.multiple) {
+        // Open multiple panels
+        if (this.active.includes(id)) {
+          this.active = this.active.filter(_id => _id !== id)
+        } else {
+          this.active.push(id)
+        }
+      } else {
+        // Open single panel
+        if (this.active === id) {
+          this.active = false
+        } else {
+          this.active = id
+        }
+      }
+    })
+  },
+
+  mounted () {
+    this.childCount = this.$children.length
+  },
+
+  methods: {
+    setSelected (id) {
+      if (this.multiple) {
+        this.active.push(id)
+      } else {
+        this.active = id
+      }
+    }
+  }
+}
+</script>