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

package/src/components/infoText/index.vue

@@ -1,24 +1,30 @@
 <template>
-  <component-wrapper>
-    <icon-wrapper :size="size">
-      <icon-img
+  <ComponentWrapper>
+    <IconWrapper :size="size">
+      <IconImg
         @click.prevent="toggleShowInfo()"
         @mouseenter="openTrigger == 'onHover' ? toggleShowInfo() : ''"
         @mouseleave="openTrigger == 'onHover' ? toggleShowInfo() : ''"
       >
-        <icon :size="size" name="info" :color="iconColor" cursor="pointer" />
-      </icon-img>
-      <text-overlay
+        <RCIcon
+          :color="iconColor"
+          cursor="pointer"
+          name="info"
+          :size="size"
+        />
+      </IconImg>
+      <TextOverlay
         v-if="showInfo"
+        :align-arrow="alignArrow"
+        :half-computed-text-info-width="halfComputedTextInfoWidth"
+        :icon-size="size"
         :width="width"
-        :halfComputedTextInfoWidth="halfComputedTextInfoWidth"
-        :alignArrow="alignArrow"
-        :iconSize="size"
-        ><slot />
+      >
+        <slot></slot>
         <span v-html="text"></span>
-      </text-overlay>
-    </icon-wrapper>
-  </component-wrapper>
+      </TextOverlay>
+    </IconWrapper>
+  </ComponentWrapper>
 </template>
 
 <script>
@@ -29,17 +35,17 @@
 //     size="20px"
 //     alignArrow="right" // which side the arrow should be on
 // />
-import theme from '../../assets/theme.js'
-import styled from 'vue3-styled-components'
-import icon from '../icon'
+  import theme from '../../assets/theme.js'
+  import styled from 'vue3-styled-components'
+  import RCIcon from '../icon'
 
-const textAttrs = {
-  iconSize: String,
-  alignArrow: String,
-  width: String,
-  halfComputedTextInfoWidth: Number
-}
-const TextOverlay = styled('div', textAttrs)`
+  const textAttrs = {
+    iconSize: String,
+    alignArrow: String,
+    width: String,
+    halfComputedTextInfoWidth: Number
+  }
+  const TextOverlay = styled('div', textAttrs)`
   position: absolute;
   top: ${(props) => 'calc(' + props.iconSize + ' + 15px)'};
   ${(props) =>
@@ -47,7 +53,7 @@ const TextOverlay = styled('div', textAttrs)`
       ? 'left: calc(' + props.iconSize + ' /2 - 18px)'
       : props.alignArrow === 'center'
       ? 'left: calc((-' + props.width + ' + ' + props.iconSize + ') /2 + 2px)'
-      : 'right: calc(' + props.iconSize + ' /2 - 17px)'};
+  : 'right: calc(' + props.iconSize + ' /2 - 17px)'};
   text-align: left;
   background: ${(props) => props.theme.colors.black};
   padding: 10px;
@@ -70,7 +76,7 @@ const TextOverlay = styled('div', textAttrs)`
         ? 'left:40px;'
         : props.alignArrow == 'center'
         ? 'left: calc(50% + 19px);'
-        : 'right:-13px;'};
+  : 'right:-13px;'};
     height: 8px;
     width: 8px;
     transform-origin: center center;
@@ -82,79 +88,79 @@ const TextOverlay = styled('div', textAttrs)`
   }
 `
 
-const iconAttrs = { size: String }
-const IconWrapper = styled('div', iconAttrs)`
+  const iconAttrs = { size: String }
+  const IconWrapper = styled('div', iconAttrs)`
   position: relative;
   height: ${(props) => props.size};
 `
 
-const IconImg = styled.div`
+  const IconImg = styled.div`
   line-height: 0;
 `
 
-const ComponentWrapper = styled.div`
+  const ComponentWrapper = styled.div`
   display: inline-block;
 `
 
-export default {
-  name: 'info-text',
-  components: {
-    IconWrapper,
-    TextOverlay,
-    ComponentWrapper,
-    IconImg,
-    icon
-  },
-  props: {
-    text: {
-      required: false
-    },
-    size: {
-      required: false,
-      default: '14px'
+  export default {
+    name: 'InfoText',
+    components: {
+      IconWrapper,
+      TextOverlay,
+      ComponentWrapper,
+      IconImg,
+      RCIcon
     },
-    alignArrow: {
-      required: false,
-      default: 'center'
-    },
-    openTrigger: {
-      required: false,
-      default: 'onHover' // onHover, onClick
+    props: {
+      text: {
+        required: false
+      },
+      size: {
+        required: false,
+        default: '14px'
+      },
+      alignArrow: {
+        required: false,
+        default: 'center'
+      },
+      openTrigger: {
+        required: false,
+        default: 'onHover' // onHover, onClick
+      },
+      width: {
+        required: false,
+        default: '165px'
+      }
     },
-    width: {
-      required: false,
-      default: '165px'
-    }
-  },
-  methods: {
-    toggleShowInfo() {
-      this.showInfo = !this.showInfo
-
-      if (this.showInfo) {
-        document.addEventListener('click', this.clickOutside)
-      } else {
-        document.removeEventListener('click', this.clickOutside)
+    data() {
+      return {
+        showInfo: false
       }
     },
-    clickOutside(event) {
-      if (this.$el.contains(event.target)) {
-        return
+    computed: {
+      iconColor() {
+        return theme.colors.mediumGray
+      },
+      halfComputedTextInfoWidth() {
+        return parseInt(this.width) / 2
       }
-      this.toggleShowInfo()
-    }
-  },
-  data() {
-    return {
-      showInfo: false
-    }
-  },
-  computed: {
-    iconColor() {
-      return theme.colors.mediumGray
     },
-    halfComputedTextInfoWidth() {
-      return parseInt(this.width) / 2
+    methods: {
+      toggleShowInfo() {
+        this.showInfo = !this.showInfo
+
+        if (this.showInfo) {
+          document.addEventListener('click', this.clickOutside)
+        } else {
+          document.removeEventListener('click', this.clickOutside)
+        }
+      },
+      clickOutside(event) {
+        if (this.$el.contains(event.target)) {
+          return
+        }
+        this.toggleShowInfo()
+      }
     }
   }
-}
 </script>

package/src/components/inputs/checkbox/index.vue

@@ -1,26 +1,28 @@
 <template>
-  <component-wrapper>
-    <container
-      :checkColor="checkColor"
+  <ComponentWrapper>
+    <Container
+      :background-color="backgroundColor"
+      :check-color="checkColor"
+      :cursor-type="cursorType"
+      :has-label="label && !!label.length"
+      :is-checked="isChecked"
+      :is-disabled="isDisabled"
       :size="size"
-      :hasLabel="label && !!label.length"
-      :backgroundColor="backgroundColor"
-      :isChecked="isChecked"
-      :isDisabled="isDisabled"
-      :cursorType="cursorType"
     >
-      <input-checkbox
-        type="checkbox"
+      <InputCheckbox
         :checked="isChecked"
         :data-id="dataId"
+        type="checkbox"
         @change="onChangeHandler(!isChecked)"
       />
-      <check-wrapper :hasLabel="hasLabel">
+      <CheckWrapper :has-label="hasLabel">
         <span class="checkmark"></span>
-      </check-wrapper>
-      <label-text v-if="label && !!label.length">{{ label }}</label-text>
-    </container>
-  </component-wrapper>
+      </CheckWrapper>
+      <LabelText v-if="label && !!label.length">
+        {{ label }}
+      </LabelText>
+    </Container>
+  </ComponentWrapper>
 </template>
 
 <script>
@@ -36,13 +38,13 @@
 //     :isDisabled="true"
 //     cursorType="default"
 // />
-import styled from 'vue3-styled-components'
+  import styled from 'vue3-styled-components'
 
-const ComponentWrapper = styled.div`
+  const ComponentWrapper = styled.div`
   min-height: 18px;
 `
 
-const CheckWrapper = styled('div', { hasLabel: Boolean })`
+  const CheckWrapper = styled('div', { hasLabel: Boolean })`
   ${(props) =>
     props.hasLabel &&
     `
@@ -51,16 +53,16 @@ const CheckWrapper = styled('div', { hasLabel: Boolean })`
   `}
 `
 
-const containerAttrs = {
-  checkColor: String,
-  size: String,
-  hasLabel: Boolean,
-  backgroundColor: String,
-  isChecked: Boolean,
-  isDisabled: Boolean,
-  cursorType: String
-}
-const Container = styled('label', containerAttrs)`
+  const containerAttrs = {
+    checkColor: String,
+    size: String,
+    hasLabel: Boolean,
+    backgroundColor: String,
+    isChecked: Boolean,
+    isDisabled: Boolean,
+    cursorType: String
+  }
+  const Container = styled('label', containerAttrs)`
   display: grid;
   grid-template-columns: ${(props) => (props.hasLabel ? '16px auto' : '16px')};
   grid-gap: 16px;
@@ -78,13 +80,13 @@ const Container = styled('label', containerAttrs)`
         ? '25px'
         : props.size === 'small'
         ? '16px'
-        : '25px'};
+  : '25px'};
     width: ${(props) =>
       props.size === 'medium'
         ? '25px'
         : props.size === 'small'
         ? '16px'
-        : '25px'};
+  : '25px'};
     background-color: ${(props) =>
       props.isChecked
         ? props.backgroundColor
@@ -92,7 +94,7 @@ const Container = styled('label', containerAttrs)`
           : props.theme.colors.green
         : props.isDisabled
         ? props.theme.colors.lightGray
-        : props.theme.colors.white};
+  : props.theme.colors.white};
     border-radius: 4px;
     border: 1px solid
       ${(props) =>
@@ -100,7 +102,7 @@ const Container = styled('label', containerAttrs)`
           ? props.backgroundColor
             ? props.backgroundColor
             : props.theme.colors.green
-          : props.theme.colors.mediumGray};
+  : props.theme.colors.mediumGray};
 
     &:after {
       content: '';
@@ -111,31 +113,31 @@ const Container = styled('label', containerAttrs)`
 
   .checkmark:after {
     left: ${(props) =>
-      props.size === 'medium' ? '9px' : props.size === 'small' ? '5px' : '9px'};
+  props.size === 'medium' ? '9px' : props.size === 'small' ? '5px' : '9px'};
     top: ${(props) =>
-      props.size === 'medium' ? '5px' : props.size === 'small' ? '2px' : '5px'};
+  props.size === 'medium' ? '5px' : props.size === 'small' ? '2px' : '5px'};
     width: ${(props) =>
-      props.size === 'medium' ? '5px' : props.size === 'small' ? '3px' : '5px'};
+  props.size === 'medium' ? '5px' : props.size === 'small' ? '3px' : '5px'};
     height: ${(props) =>
       props.size === 'medium'
         ? '10px'
         : props.size === 'small'
         ? '6px'
-        : '10px'};
+  : '10px'};
     border: solid
       ${(props) =>
-        props.checkColor ? props.checkColor : props.theme.colors.white};
+  props.checkColor ? props.checkColor : props.theme.colors.white};
     border-width: ${(props) =>
       props.size === 'medium'
         ? '0 3px 3px 0'
         : props.size === 'small'
         ? '0 2px 2px 0'
-        : '0 3px 3px 0'};
+  : '0 3px 3px 0'};
     transform: rotate(45deg);
   }
 `
 
-const InputCheckbox = styled.input`
+  const InputCheckbox = styled.input`
   cursor: pointer;
   position: absolute;
   opacity: 0;
@@ -144,71 +146,66 @@ const InputCheckbox = styled.input`
   width: 0;
 `
 
-const LabelText = styled.div`
+  const LabelText = styled.div`
   font-size: 13px;
   display: grid;
   align-items: flex-start;
   min-height: 18px;
 `
 
-export default {
-  name: 'checkbox',
-  components: {
-    ComponentWrapper,
-    Container,
-    InputCheckbox,
-    LabelText,
-    CheckWrapper
-  },
-  props: {
-    label: {
-      required: false,
-      default: ''
-    },
-    isChecked: {
-      required: true,
-      default: false
-    },
-    checkColor: {
-      required: false
-    },
-    size: {
-      required: false,
-      default: 'medium' // small, medium
+  export default {
+    name: 'Checkbox',
+    components: {
+      ComponentWrapper,
+      Container,
+      InputCheckbox,
+      LabelText,
+      CheckWrapper
     },
-    backgroundColor: {
-      required: false
-    },
-    isDisabled: {
-      required: false,
-      default: false
+    props: {
+      label: {
+        required: false,
+        default: ''
+      },
+      isChecked: {
+        required: true,
+        default: false
+      },
+      checkColor: {
+        required: false
+      },
+      size: {
+        required: false,
+        default: 'medium' // small, medium
+      },
+      backgroundColor: {
+        required: false
+      },
+      isDisabled: {
+        required: false,
+        default: false
+      },
+      dataId: {
+        type: String,
+        default: ''
+      },
+      cursorType: {
+        type: String,
+        default: 'pointer'
+      }
     },
-    dataId: {
-      type: String,
-      default: ''
+    computed: {
+      hasLabel() {
+        return !!this.label.length
+      }
     },
-    cursorType: {
-      type: String,
-      default: 'pointer'
-    }
-  },
-  computed: {
-    hasLabel() {
-      return !!this.label.length
-    }
-  },
-  computed: {
-    hasLabel() {
-      return !!this.label.length
-    }
-  },
-  methods: {
-    onChangeHandler(value) {
-      if (this.isDisabled) {
-        return
+    methods: {
+      onChangeHandler(value) {
+        if (this.isDisabled) {
+          return
+        }
+        this.$emit('on-event-handler', value)
       }
-      this.$emit('on-event-handler', value)
     }
   }
-}
 </script>