@eturnity/eturnity_reusable_components 1.2.70 → 1.2.72

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "1.2.70",
+  "version": "1.2.72",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",
@@ -60,4 +60,4 @@
   "author": "Aaron Enser",
   "license": "ISC",
   "homepage": "https://bitbucket.org/eturnitydevs/eturnity_reusable_components#readme"
-}
+}

package/src/App.vue

@@ -26,7 +26,18 @@
               <div>Interactive Label</div>
             </template>
           </input-number>
-
+          before button
+          <dropdown-component openingMode="hover" gap="30px">
+            <template #trigger><i>Click Me</i></template>
+            <template #dropdown>
+              <div>
+              <a href="">test1</a>
+              <button href="">test2</button><br>
+              <p>Text</p>
+              </div>
+            </template>
+          </dropdown-component>
+         after menu
           <SwitchField
             @on-switch-change="onInputChange($event)"
             :options="[
@@ -85,6 +96,7 @@ import Select from '@/components/inputs/select'
 import SwitchField from '@/components/inputs/switchField'
 import Option from '@/components/inputs/select/option'
 import iconCollection from '@/components/icon/iconCollection'
+import dropdownComponent from '@/components/dropdown'
 // import TableDropdown from "@/components/tableDropdown"
 
 const PageContainer = styled.div`
@@ -106,7 +118,8 @@ export default {
     Option,
     Select,
     SwitchField,
-    iconCollection
+    iconCollection,
+    dropdownComponent
   },
   data() {
     return {

package/src/components/dropdown/Dropdown.stories.js

@@ -0,0 +1,54 @@
+import Dropdown from './index.vue'
+
+export default {
+  title: 'Dropdown',
+  component: Dropdown
+  // argTypes: {},
+}
+
+const Template = (args, { argTypes }) => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: { Dropdown },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  props: Object.keys(argTypes),
+  template: `<Dropdown v-bind="$props">
+  <template #trigger>
+      trigger button
+  </template>
+  <template #dropdown>
+      <div>
+        <h3>fully customizable dropdown</h3>
+        <ul>
+          <li>item</li>
+          <li>item</li>
+          <li>item</li>
+        </ul>
+      </div>
+  </template>
+</Dropdown>`,
+  // import Icon from "@eturnity/eturnity_reusable_components/src/components/icon"
+  //  How to use:
+  //<icon
+  //   name="House" //required. a svg file named [name].svg should be present in /assets/svgIcons
+  //   color="red"
+  //   hoveredColor="blue"
+  //   size="60px" by default, this is 30px
+  // />
+})
+
+export const Default = Template.bind({})
+Default.args = {
+  openingMode:"click",
+  gap:"0px",
+  justify:"left",
+  width:"150px"
+}
+
+export const withHover = Template.bind({})
+withHover.args = {
+  openingMode:"hover",
+  gap:"20px",
+  justify:"right",
+  width:"250px"
+}
+

package/src/components/dropdown/index.vue

@@ -0,0 +1,119 @@
+<template>
+    <wrapper ref="dropdown" :openingMode="openingMode">
+        <WrapperButton @click="isOpenByClick=!isOpenByClick">
+            <slot name="trigger"/>
+        </WrapperButton>
+        <WrapperDropdown class="dropdown-content" :class="{openDropdown:isOpenByClick && openingMode=='click'}" :justify="justify" :position="position" :width="width" :backgroundColor="backgroundColor">
+          <DropdownWindow :gap="gap" :backgroundColor="backgroundColor">
+            <slot name="dropdown"/>
+          </DropdownWindow>
+        </WrapperDropdown>
+    </wrapper>
+  </template>
+  
+  <script>
+  // import Icon from "@eturnity/eturnity_reusable_components/src/components/icon"
+  //  How to use:
+  //<DropdownComponent
+  //    width="300px"
+  //    backgroundColor="red">
+
+  // <DropdownComponent/>
+  
+  import styled from 'vue-styled-components'
+  
+  const wrapperAttrs = { width: String, backgroundColor:String,openingMode:String,gap:String,justify:String }
+  const Wrapper = styled('div', wrapperAttrs)`
+    display: inline-block;
+    position: relative;
+
+    &:hover .dropdown-content {
+        ${props=>props.openingMode=='hover'?"display:block":""}
+    }
+    & .openDropdown{
+        ${props=>props.openingMode=='click'?"display:block !important":""}
+    }
+  `
+  const WrapperDropdown = styled('div', wrapperAttrs)`
+    margin-top: 0;
+    display: none;
+    position: absolute;
+    z-index: 1;
+    ${(props) => props.justify=="right"?"right:0;":""}
+  `
+  const DropdownWindow = styled('div', wrapperAttrs)`
+    width: ${(props) => props.width};
+    background-color: ${(props) => props.theme.colors[props.backgroundColor] || props.backgroundColor};
+    margin-top: ${(props) => props.gap};
+    border-radius: 4px;
+    position: relative;
+    min-width: 160px;
+    box-shadow: -1px 0px 5px rgba(0, 0, 0, 0.302);
+    z-index: 1;
+  `
+  
+  const WrapperButton = styled('div', wrapperAttrs)`
+    display: inline-block;
+  `
+  
+  export default {
+    name: 'DropdownComponent',
+    components: {
+        WrapperDropdown,
+        WrapperButton,
+        Wrapper,
+        DropdownWindow
+    },
+    props: {
+      width: {
+        required: false,
+        default: '300px'
+      },
+      gap: {
+        required: false,
+        default: '10px'
+      },
+      position: {
+        required: false,
+        default: 'bottom'
+      },
+      justify: {
+        required: false,
+        default: 'left'
+      },
+      openingMode: {
+        required: false,
+        default: 'hover'
+      },
+      backgroundColor: {
+        required: false,
+        default: 'white'
+      }
+    },
+    data() {
+      return {
+        isOpenByClick:false
+      }
+    },
+    methods:{
+        clickOutside(event) {
+            if (this.openingMode!="click") return
+            if (
+                this.$refs.dropdown.$el == event.target ||
+                this.$refs.dropdown.$el.contains(event.target)
+            ) {
+                return
+            } else {
+                this.isOpenByClick=false
+            }
+        },
+    },
+    mounted() {
+        document.addEventListener('click', this.clickOutside)
+    },
+    beforeDestroy() {
+        document.removeEventListener('click', this.clickOutside)
+    },
+  }
+  </script>
+