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

package/src/components/dropdown/index.vue

@@ -1,28 +1,25 @@
 <template>
-  <Wrapper
-    ref="dropdown"
-    :opening-mode="openingMode"
-  >
+  <wrapper ref="dropdown" :openingMode="openingMode">
     <WrapperButton @click="isOpenByClick = !isOpenByClick">
-      <slot name="trigger"></slot>
+      <slot name="trigger" />
     </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>
+        <slot name="dropdown" />
       </DropdownWindow>
     </WrapperDropdown>
-  </Wrapper>
+  </wrapper>
 </template>
 
 <script>
@@ -34,16 +31,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;
 
@@ -52,20 +49,20 @@
   }
   & .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;
@@ -74,68 +71,68 @@
   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
+export default {
+  name: 'DropdownComponent',
+  components: {
+    WrapperDropdown,
+    WrapperButton,
+    Wrapper,
+    DropdownWindow
+  },
+  props: {
+    width: {
+      required: false,
+      default: '300px'
     },
-    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'
-      }
+    gap: {
+      required: false,
+      default: '10px'
     },
-    data() {
-      return {
-        isOpenByClick: false
-      }
+    position: {
+      required: false,
+      default: 'bottom'
     },
-    mounted() {
-      document.addEventListener('click', this.clickOutside)
+    justify: {
+      required: false,
+      default: 'left'
     },
-    beforeDestroy() {
-      document.removeEventListener('click', this.clickOutside)
+    openingMode: {
+      required: false,
+      default: 'hover'
     },
-    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
-        }
+    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
       }
     }
+  },
+  mounted() {
+    document.addEventListener('click', this.clickOutside)
+  },
+  beforeDestroy() {
+    document.removeEventListener('click', this.clickOutside)
   }
+}
 </script>

package/src/components/errorMessage/index.vue

@@ -1,9 +1,9 @@
 <template>
-  <ComponentWrapper>
-    <TextOverlay :margin-top="marginTop">
+  <component-wrapper>
+    <text-overlay :marginTop="marginTop">
       <slot></slot>
-    </TextOverlay>
-  </ComponentWrapper>
+    </text-overlay>
+  </component-wrapper>
 </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 ComponentWrapper = styled.div`
+const ComponentWrapper = styled.div`
   display: block;
 `
 
-  export default {
-    name: 'InfoText',
-    components: {
-      TextOverlay,
-      ComponentWrapper
-    },
-    props: {
-      marginTop: {
-        required: false,
-        default: '13px'
-      }
-    },
-    data() {
-      return {}
-    },
-    methods: {}
+export default {
+  name: 'info-text',
+  components: {
+    TextOverlay,
+    ComponentWrapper
+  },
+  props: {
+    marginTop: {
+      required: false,
+      default: '13px'
+    }
+  },
+  methods: {},
+  data() {
+    return {}
   }
+}
 </script>