@eturnity/eturnity_reusable_components 7.45.5-EPDM-11313-EPDM-11314.2 → 7.45.5-EPDM-12680.0

package/src/components/dropdown/index.vue

@@ -1,138 +1,138 @@
-<template>
-  <Wrapper ref="dropdown" :opening-mode="openingMode">
-    <WrapperButton @click="isOpenByClick = !isOpenByClick">
-      <slot name="trigger"></slot>
-    </WrapperButton>
-    <WrapperDropdown
-      :background-color="backgroundColor"
-      class="dropdown-content"
-      :class="{ openDropdown: isOpenByClick && openingMode == 'click' }"
-      :justify="justify"
-      :position="position"
-      :width="width"
-    >
-      <DropdownWindow
-        :background-color="backgroundColor"
-        :gap="gap"
-        :width="width"
-      >
-        <slot name="dropdown"></slot>
-      </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 'vue3-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,
-      }
-    },
-    mounted() {
-      document.addEventListener('click', this.clickOutside)
-    },
-    beforeDestroy() {
-      document.removeEventListener('click', this.clickOutside)
-    },
-    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
-        }
-      },
-    },
-  }
-</script>
+<template>
+  <Wrapper ref="dropdown" :opening-mode="openingMode">
+    <WrapperButton @click="isOpenByClick = !isOpenByClick">
+      <slot name="trigger"></slot>
+    </WrapperButton>
+    <WrapperDropdown
+      :background-color="backgroundColor"
+      class="dropdown-content"
+      :class="{ openDropdown: isOpenByClick && openingMode == 'click' }"
+      :justify="justify"
+      :position="position"
+      :width="width"
+    >
+      <DropdownWindow
+        :background-color="backgroundColor"
+        :gap="gap"
+        :width="width"
+      >
+        <slot name="dropdown"></slot>
+      </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 'vue3-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,
+      }
+    },
+    mounted() {
+      document.addEventListener('click', this.clickOutside)
+    },
+    beforeDestroy() {
+      document.removeEventListener('click', this.clickOutside)
+    },
+    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
+        }
+      },
+    },
+  }
+</script>

package/src/components/errorMessage/index.vue

@@ -1,64 +1,64 @@
-<template>
-  <ComponentWrapper>
-    <TextOverlay :margin-top="marginTop">
-      <slot></slot>
-    </TextOverlay>
-  </ComponentWrapper>
-</template>
-
-<script>
-  // import ErrorMessage from "@eturnity/eturnity_reusable_components/src/components/errorMessage"
-  //To use:
-  // <error-message />
-
-  import styled from 'vue3-styled-components'
-
-  const TextOverlay = styled('div', { marginTop: String })`
-    position: absolute;
-    top: calc(100% + ${(props) => props.marginTop});
-    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: 'InfoText',
-    components: {
-      TextOverlay,
-      ComponentWrapper,
-    },
-    props: {
-      marginTop: {
-        required: false,
-        default: '13px',
-      },
-    },
-    data() {
-      return {}
-    },
-    methods: {},
-  }
-</script>
+<template>
+  <ComponentWrapper>
+    <TextOverlay :margin-top="marginTop">
+      <slot></slot>
+    </TextOverlay>
+  </ComponentWrapper>
+</template>
+
+<script>
+  // import ErrorMessage from "@eturnity/eturnity_reusable_components/src/components/errorMessage"
+  //To use:
+  // <error-message />
+
+  import styled from 'vue3-styled-components'
+
+  const TextOverlay = styled('div', { marginTop: String })`
+    position: absolute;
+    top: calc(100% + ${(props) => props.marginTop});
+    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: 'InfoText',
+    components: {
+      TextOverlay,
+      ComponentWrapper,
+    },
+    props: {
+      marginTop: {
+        required: false,
+        default: '13px',
+      },
+    },
+    data() {
+      return {}
+    },
+    methods: {},
+  }
+</script>