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

package/src/components/infoText/index.vue

@@ -1,30 +1,24 @@
 <template>
-  <ComponentWrapper>
-    <IconWrapper :size="size">
-      <IconImg
+  <component-wrapper>
+    <icon-wrapper :size="size">
+      <icon-img
         @click.prevent="toggleShowInfo()"
         @mouseenter="openTrigger == 'onHover' ? toggleShowInfo() : ''"
         @mouseleave="openTrigger == 'onHover' ? toggleShowInfo() : ''"
       >
-        <RCIcon
-          :color="iconColor"
-          cursor="pointer"
-          name="info"
-          :size="size"
-        />
-      </IconImg>
-      <TextOverlay
+        <icon :size="size" name="info" :color="iconColor" cursor="pointer" />
+      </icon-img>
+      <text-overlay
         v-if="showInfo"
-        :align-arrow="alignArrow"
-        :half-computed-text-info-width="halfComputedTextInfoWidth"
-        :icon-size="size"
         :width="width"
-      >
-        <slot></slot>
+        :halfComputedTextInfoWidth="halfComputedTextInfoWidth"
+        :alignArrow="alignArrow"
+        :iconSize="size"
+        ><slot />
         <span v-html="text"></span>
-      </TextOverlay>
-    </IconWrapper>
-  </ComponentWrapper>
+      </text-overlay>
+    </icon-wrapper>
+  </component-wrapper>
 </template>
 
 <script>
@@ -35,17 +29,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 RCIcon from '../icon'
+import theme from '../../assets/theme.js'
+import styled from 'vue3-styled-components'
+import icon 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) =>
@@ -53,7 +47,7 @@
       ? '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;
@@ -76,7 +70,7 @@
         ? 'left:40px;'
         : props.alignArrow == 'center'
         ? 'left: calc(50% + 19px);'
-  : 'right:-13px;'};
+        : 'right:-13px;'};
     height: 8px;
     width: 8px;
     transform-origin: center center;
@@ -88,79 +82,79 @@
   }
 `
 
-  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: 'InfoText',
-    components: {
-      IconWrapper,
-      TextOverlay,
-      ComponentWrapper,
-      IconImg,
-      RCIcon
+export default {
+  name: 'info-text',
+  components: {
+    IconWrapper,
+    TextOverlay,
+    ComponentWrapper,
+    IconImg,
+    icon
+  },
+  props: {
+    text: {
+      required: false
     },
-    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'
-      }
+    size: {
+      required: false,
+      default: '14px'
     },
-    data() {
-      return {
-        showInfo: false
-      }
+    alignArrow: {
+      required: false,
+      default: 'center'
     },
-    computed: {
-      iconColor() {
-        return theme.colors.mediumGray
-      },
-      halfComputedTextInfoWidth() {
-        return parseInt(this.width) / 2
-      }
+    openTrigger: {
+      required: false,
+      default: 'onHover' // onHover, onClick
     },
-    methods: {
-      toggleShowInfo() {
-        this.showInfo = !this.showInfo
+    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)
-        }
-      },
-      clickOutside(event) {
-        if (this.$el.contains(event.target)) {
-          return
-        }
-        this.toggleShowInfo()
+      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()
+    }
+  },
+  data() {
+    return {
+      showInfo: false
+    }
+  },
+  computed: {
+    iconColor() {
+      return theme.colors.mediumGray
+    },
+    halfComputedTextInfoWidth() {
+      return parseInt(this.width) / 2
     }
   }
+}
 </script>

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

@@ -1,28 +1,26 @@
 <template>
-  <ComponentWrapper>
-    <Container
-      :background-color="backgroundColor"
-      :check-color="checkColor"
-      :cursor-type="cursorType"
-      :has-label="label && !!label.length"
-      :is-checked="isChecked"
-      :is-disabled="isDisabled"
+  <component-wrapper>
+    <container
+      :checkColor="checkColor"
       :size="size"
+      :hasLabel="label && !!label.length"
+      :backgroundColor="backgroundColor"
+      :isChecked="isChecked"
+      :isDisabled="isDisabled"
+      :cursorType="cursorType"
     >
-      <InputCheckbox
+      <input-checkbox
+        type="checkbox"
         :checked="isChecked"
         :data-id="dataId"
-        type="checkbox"
         @change="onChangeHandler(!isChecked)"
       />
-      <CheckWrapper :has-label="hasLabel">
+      <check-wrapper :hasLabel="hasLabel">
         <span class="checkmark"></span>
-      </CheckWrapper>
-      <LabelText v-if="label && !!label.length">
-        {{ label }}
-      </LabelText>
-    </Container>
-  </ComponentWrapper>
+      </check-wrapper>
+      <label-text v-if="label && !!label.length">{{ label }}</label-text>
+    </container>
+  </component-wrapper>
 </template>
 
 <script>
@@ -38,13 +36,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 &&
     `
@@ -53,16 +51,16 @@
   `}
 `
 
-  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;
@@ -80,13 +78,13 @@
         ? '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
@@ -94,7 +92,7 @@
           : 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) =>
@@ -102,7 +100,7 @@
           ? props.backgroundColor
             ? props.backgroundColor
             : props.theme.colors.green
-  : props.theme.colors.mediumGray};
+          : props.theme.colors.mediumGray};
 
     &:after {
       content: '';
@@ -113,31 +111,31 @@
 
   .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;
@@ -146,66 +144,71 @@
   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
+export default {
+  name: 'checkbox',
+  components: {
+    ComponentWrapper,
+    Container,
+    InputCheckbox,
+    LabelText,
+    CheckWrapper
+  },
+  props: {
+    label: {
+      required: false,
+      default: ''
     },
-    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'
-      }
+    isChecked: {
+      required: true,
+      default: false
     },
-    computed: {
-      hasLabel() {
-        return !!this.label.length
-      }
+    checkColor: {
+      required: false
+    },
+    size: {
+      required: false,
+      default: 'medium' // small, medium
     },
-    methods: {
-      onChangeHandler(value) {
-        if (this.isDisabled) {
-          return
-        }
-        this.$emit('on-event-handler', value)
+    backgroundColor: {
+      required: false
+    },
+    isDisabled: {
+      required: false,
+      default: false
+    },
+    dataId: {
+      type: String,
+      default: ''
+    },
+    cursorType: {
+      type: String,
+      default: 'pointer'
+    }
+  },
+  computed: {
+    hasLabel() {
+      return !!this.label.length
+    }
+  },
+  computed: {
+    hasLabel() {
+      return !!this.label.length
+    }
+  },
+  methods: {
+    onChangeHandler(value) {
+      if (this.isDisabled) {
+        return
       }
+      this.$emit('on-event-handler', value)
     }
   }
+}
 </script>