init crater

resources/assets/js/components/dropdown/VDropdown.vue

@@ -0,0 +1,139 @@
+<template>
+  <div
+    v-click-outside="closeDropdown"
+    :class="[
+      'dropdown-group',
+      {'active': (toggle || isActive() )},
+      {'has-child':hasChild},
+      {'toggle-arrow':(hasChild)&&(showArrow)},
+      {'dropdown-light': themeLight}]"
+  >
+    <div class="dropdown-activator" @click.stop.prevent="showDropdown">
+      <slot name="activator"/>
+    </div>
+    <transition name="bounce">
+      <div
+        v-show="toggle"
+        v-if="hasChild"
+        ref="dropdownItems"
+        :class="['dropdown-container', {'align-right': rightAlign}]"
+        @click="closeOnSelectDropdownItem"
+      >
+        <slot />
+      </div>
+    </transition>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    activeUrl: {
+      type: String,
+      require: true,
+      default: String
+    },
+    showArrow: {
+      type: Boolean,
+      require: true,
+      default: true
+    },
+    themeLight: {
+      type: Boolean,
+      require: true,
+      default: false
+    },
+    closeOnSelect: {
+      type: Boolean,
+      require: true,
+      default: true
+    }
+  },
+  data () {
+    return {
+      toggle: true,
+      hasChild: true,
+      rightAlign: false
+    }
+  },
+  mounted () {
+    this.$nextTick(() => {
+      this.setDropdownPosition()
+      window.addEventListener('resize', e => {
+        if (this.toggle === true) {
+          this.setDropdownPosition()
+        }
+      })
+      if (!this.$slots.default) {
+        this.hasChild = false
+      }
+      this.toggle = false
+    })
+  },
+  methods: {
+    setDropdownPosition () {
+      let rect = this.$refs.dropdownItems.getBoundingClientRect()
+
+      let offsetPos = rect.width - this.$el.offsetWidth
+      let itemPos = rect.right + rect.width + offsetPos
+
+      if (itemPos > window.innerWidth) {
+        this.rightAlign = true
+      }
+      itemPos += offsetPos + rect.width + offsetPos
+      if (itemPos < window.innerWidth) {
+        this.rightAlign = false
+      }
+    },
+    isActive () {
+      if (this.activeUrl) {
+        return this.$route.path.indexOf(this.activeUrl) > -1
+      }
+      return false
+    },
+    showDropdown () {
+      this.toggle = !this.toggle
+    },
+    closeOnSelectDropdownItem () {
+      if (this.closeOnSelect === false) {
+        this.toggle = true
+      } else {
+        this.toggle = false
+      }
+    },
+    closeDropdown () {
+      this.toggle = false
+    }
+  }
+}
+</script>
+<style>
+  .dropdown-item {
+    background: transparent;
+    transform-origin: top;
+    position: relative;
+    color:#040405;
+    animation-name: example;
+    animation-duration: 1s;
+    animation-iteration-count: 1;
+    animation-direction: alternate;
+  }
+  .bounce-enter-active {
+    /* zoom: 1; */
+    transform-origin: top right;
+    margin-top: 5px;
+    animation: bounce-in 0.4s;
+  }
+  .bounce-leave-active {
+     animation: bounce-in 1s reverse;
+  }
+
+@keyframes example {
+ 0% {color: #FFFFFF;}
+ 100% {color:#040405;}
+}
+
+@keyframes bounce-in {
+  from { transform: scale(0); }
+  to {  }
+}
+</style>