@eturnity/eturnity_reusable_components 7.24.3-EPDM-10576.1 → 7.24.3-EPDM-11320.0

package/src/components/draggableInputHandle/index.vue

@@ -1,15 +1,18 @@
 <template>
-  <Handle :height="height" class="handle">
-    <Dot></Dot>
-    <Dot></Dot>
-    <Dot></Dot>
+  <Handle
+    class="handle"
+    :height="height"
+  >
+    <Dot />
+    <Dot />
+    <Dot />
   </Handle>
 </template>
 
 <script>
-import styled from 'vue3-styled-components'
+  import styled from 'vue3-styled-components'
 
-const Handle = styled('div', { height: String })`
+  const Handle = styled('div', { height: String })`
   position: absolute;
   left: 0;
   margin-right: 10px;
@@ -24,7 +27,7 @@ const Handle = styled('div', { height: String })`
   cursor: pointer;
   align-items: center;
 `
-const Dot = styled.div`
+  const Dot = styled.div`
   display: inline-block;
   width: 4px;
   height: 4px;
@@ -32,15 +35,15 @@ const Dot = styled.div`
   background-color: #0068de;
 `
 
-export default {
-  name: 'draggableInputHandle',
-  props: ['height'],
-  components: {
-    Handle,
-    Dot
-  },
-  data() {
-    return {}
+  export default {
+    name: 'DraggableInputHandle',
+    components: {
+      Handle,
+      Dot
+    },
+    props: ['height'],
+    data() {
+      return {}
+    }
   }
-}
 </script>

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

@@ -38,17 +38,17 @@ const Template = (args, { argTypes }) => ({
 
 export const Default = Template.bind({})
 Default.args = {
-  openingMode:"click",
-  gap:"0px",
-  justify:"left",
-  width:"150px"
+  openingMode: "click",
+  gap: "0px",
+  justify: "left",
+  width: "150px"
 }
 
 export const withHover = Template.bind({})
 withHover.args = {
-  openingMode:"hover",
-  gap:"20px",
-  justify:"right",
-  width:"250px"
+  openingMode: "hover",
+  gap: "20px",
+  justify: "right",
+  width: "250px"
 }
 

package/src/components/dropdown/index.vue

@@ -1,25 +1,28 @@
 <template>
-  <wrapper ref="dropdown" :openingMode="openingMode">
+  <Wrapper
+    ref="dropdown"
+    :opening-mode="openingMode"
+  >
     <WrapperButton @click="isOpenByClick = !isOpenByClick">
-      <slot name="trigger" />
+      <slot name="trigger"></slot>
     </WrapperButton>
     <WrapperDropdown
+      :background-color="backgroundColor"
       class="dropdown-content"
       :class="{ openDropdown: isOpenByClick && openingMode == 'click' }"
       :justify="justify"
       :position="position"
       :width="width"
-      :backgroundColor="backgroundColor"
     >
       <DropdownWindow
+        :background-color="backgroundColor"
         :gap="gap"
-        :backgroundColor="backgroundColor"
         :width="width"
       >
-        <slot name="dropdown" />
+        <slot name="dropdown"></slot>
       </DropdownWindow>
     </WrapperDropdown>
-  </wrapper>
+  </Wrapper>
 </template>
 
 <script>
@@ -31,16 +34,16 @@
 
 // <DropdownComponent/>
 
-import styled from 'vue3-styled-components'
+  import styled from 'vue3-styled-components'
 
-const wrapperAttrs = {
-  width: String,
-  backgroundColor: String,
-  openingMode: String,
-  gap: String,
-  justify: String
-}
-const Wrapper = styled('div', wrapperAttrs)`
+  const wrapperAttrs = {
+    width: String,
+    backgroundColor: String,
+    openingMode: String,
+    gap: String,
+    justify: String
+  }
+  const Wrapper = styled('div', wrapperAttrs)`
   display: inline-block;
   position: relative;
 
@@ -49,20 +52,20 @@ const Wrapper = styled('div', wrapperAttrs)`
   }
   & .openDropdown {
     ${(props) =>
-      props.openingMode == 'click' ? 'display:block !important' : ''}
+  props.openingMode == 'click' ? 'display:block !important' : ''}
   }
 `
-const WrapperDropdown = styled('div', wrapperAttrs)`
+  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)`
+  const DropdownWindow = styled('div', wrapperAttrs)`
   width: ${(props) => props.width};
   background-color: ${(props) =>
-    props.theme.colors[props.backgroundColor] || props.backgroundColor};
+  props.theme.colors[props.backgroundColor] || props.backgroundColor};
   margin-top: ${(props) => props.gap};
   border-radius: 4px;
   position: relative;
@@ -71,68 +74,68 @@ const DropdownWindow = styled('div', wrapperAttrs)`
   z-index: 1;
 `
 
-const WrapperButton = styled('div', wrapperAttrs)`
+  const WrapperButton = styled('div', wrapperAttrs)`
   display: inline-block;
 `
 
-export default {
-  name: 'DropdownComponent',
-  components: {
-    WrapperDropdown,
-    WrapperButton,
-    Wrapper,
-    DropdownWindow
-  },
-  props: {
-    width: {
-      required: false,
-      default: '300px'
+  export default {
+    name: 'DropdownComponent',
+    components: {
+      WrapperDropdown,
+      WrapperButton,
+      Wrapper,
+      DropdownWindow
     },
-    gap: {
-      required: false,
-      default: '10px'
+    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'
+      }
     },
-    position: {
-      required: false,
-      default: 'bottom'
+    data() {
+      return {
+        isOpenByClick: false
+      }
     },
-    justify: {
-      required: false,
-      default: 'left'
+    mounted() {
+      document.addEventListener('click', this.clickOutside)
     },
-    openingMode: {
-      required: false,
-      default: 'hover'
+    beforeDestroy() {
+      document.removeEventListener('click', this.clickOutside)
     },
-    backgroundColor: {
-      required: false,
-      default: 'white'
-    }
-  },
-  data() {
-    return {
-      isOpenByClick: false
-    }
-  },
-  methods: {
-    clickOutside(event) {
-      if (this.openingMode != 'click') return
-      if (
-        this.$refs.dropdown &&
-        (this.$refs.dropdown.$el == event.target ||
-          this.$refs.dropdown.$el.contains(event.target))
-      ) {
-        return
-      } else {
-        this.isOpenByClick = false
+    methods: {
+      clickOutside(event) {
+        if (this.openingMode != 'click') return
+        if (
+          this.$refs.dropdown &&
+          (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,9 +1,9 @@
 <template>
-  <component-wrapper>
-    <text-overlay :marginTop="marginTop">
+  <ComponentWrapper>
+    <TextOverlay :margin-top="marginTop">
       <slot></slot>
-    </text-overlay>
-  </component-wrapper>
+    </TextOverlay>
+  </ComponentWrapper>
 </template>
 
 <script>
@@ -11,9 +11,9 @@
 //To use:
 // <error-message />
 
-import styled from 'vue3-styled-components'
+  import styled from 'vue3-styled-components'
 
-const TextOverlay = styled('div', { marginTop: String })`
+  const TextOverlay = styled('div', { marginTop: String })`
   position: absolute;
   top: calc(100% + ${(props) => props.marginTop});
   background: ${(props) => props.theme.colors.red};
@@ -40,25 +40,25 @@ const TextOverlay = styled('div', { marginTop: String })`
   }
 `
 
-const ComponentWrapper = styled.div`
+  const ComponentWrapper = styled.div`
   display: block;
 `
 
-export default {
-  name: 'info-text',
-  components: {
-    TextOverlay,
-    ComponentWrapper
-  },
-  props: {
-    marginTop: {
-      required: false,
-      default: '13px'
-    }
-  },
-  methods: {},
-  data() {
-    return {}
+  export default {
+    name: 'InfoText',
+    components: {
+      TextOverlay,
+      ComponentWrapper
+    },
+    props: {
+      marginTop: {
+        required: false,
+        default: '13px'
+      }
+    },
+    data() {
+      return {}
+    },
+    methods: {}
   }
-}
 </script>