@eturnity/eturnity_reusable_components 7.12.7 → 7.16.0-qa-25.0

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

@@ -1,54 +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"
-}
-
+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

@@ -1,119 +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" :width="width">
-            <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>
+<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" :width="width">
+            <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>
   

package/src/components/errorMessage/index.vue

@@ -1,59 +1,59 @@
-<template>
-  <component-wrapper>
-    <text-overlay>
-      <slot></slot>
-    </text-overlay>
-  </component-wrapper>
-</template>
-
-<script>
-// import ErrorMessage from "@eturnity/eturnity_reusable_components/src/components/errorMessage"
-//To use:
-// <error-message />
-
-import styled from 'vue-styled-components'
-
-const TextOverlay = styled.div`
-  position: absolute;
-  top: calc(100% + 13px);
-  background: ${(props) => props.theme.colors.red};
-  padding: 10px;
-  width: max-content;
-  max-width: 100%;
-  min-width: min-content;
-  font-size: 11px;
-  font-weight: 400;
-  border-radius: 4px;
-  z-index: 999;
-  color: ${(props) => props.theme.colors.white};
-
-  :before {
-    content: '';
-    background-color: ${(props) => props.theme.colors.red};
-    position: absolute;
-    top: 2px;
-    left: 40px;
-    height: 11px;
-    width: 11px;
-    transform-origin: center center;
-    transform: translate(-2em, -0.5em) rotate(45deg);
-  }
-`
-
-const ComponentWrapper = styled.div`
-  display: block;
-`
-
-export default {
-  name: 'info-text',
-  components: {
-    TextOverlay,
-    ComponentWrapper
-  },
-  props: {},
-  methods: {},
-  data() {
-    return {}
-  }
-}
-</script>
+<template>
+  <component-wrapper>
+    <text-overlay>
+      <slot></slot>
+    </text-overlay>
+  </component-wrapper>
+</template>
+
+<script>
+// import ErrorMessage from "@eturnity/eturnity_reusable_components/src/components/errorMessage"
+//To use:
+// <error-message />
+
+import styled from 'vue-styled-components'
+
+const TextOverlay = styled.div`
+  position: absolute;
+  top: calc(100% + 13px);
+  background: ${(props) => props.theme.colors.red};
+  padding: 10px;
+  width: max-content;
+  max-width: 100%;
+  min-width: min-content;
+  font-size: 11px;
+  font-weight: 400;
+  border-radius: 4px;
+  z-index: 999;
+  color: ${(props) => props.theme.colors.white};
+
+  :before {
+    content: '';
+    background-color: ${(props) => props.theme.colors.red};
+    position: absolute;
+    top: 2px;
+    left: 40px;
+    height: 11px;
+    width: 11px;
+    transform-origin: center center;
+    transform: translate(-2em, -0.5em) rotate(45deg);
+  }
+`
+
+const ComponentWrapper = styled.div`
+  display: block;
+`
+
+export default {
+  name: 'info-text',
+  components: {
+    TextOverlay,
+    ComponentWrapper
+  },
+  props: {},
+  methods: {},
+  data() {
+    return {}
+  }
+}
+</script>