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

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

@@ -1,46 +1,61 @@
 <template>
-  <component-wrapper :layout="layout">
-    <radio-wrapper v-for="(item, index) in options" :key="item.value">
-      <label-container
+  <ComponentWrapper :layout="layout">
+    <RadioWrapper
+      v-for="(item, index) in options"
+      :key="item.value"
+    >
+      <LabelContainer
+        :checkmark-color="checkmarkColor"
+        :has-label="item.label"
+        :is-checked="selectedOption === item.value"
+        :is-disabled="item.disabled"
         :size="size"
-        :hasLabel="item.label"
-        :isDisabled="item.disabled"
-        :isChecked="selectedOption === item.value"
-        :checkmarkColor="checkmarkColor"
       >
-        <radio
+        <Radio
+          :checked="selectedOption === item.value"
+          :data-id="`radio_button_${dataId}_option_${item.value}`"
+          :disabled="item.disabled"
+          :name="'radioButtons_' + radioName"
           type="radio"
           :value="selectedOption"
           @click="onInputHandler(item.value)"
-          :name="'radioButtons_' + radioName"
-          :checked="selectedOption === item.value"
-          :disabled="item.disabled"
-          :data-id="`radio_button_${dataId}_option_${item.value}`"
         />
         <span class="checkmark"></span>
-        <label-text :isDisabled="item.disabled" v-if="item.label">{{ item.label }}</label-text>
-        <info-text v-if="item.infoText" :text="item.infoText" size="16px" />
-      </label-container>
-      <image-container v-if="item.img">
-        <radio-image :src="item.img" />
-        <div class="search-icn-container" @click="toggleImageModal(index)">
+        <LabelText
+          v-if="item.label"
+          :is-disabled="item.disabled"
+        >
+          {{ item.label }}
+        </LabelText>
+        <InfoText
+          v-if="item.infoText"
+          size="16px"
+          :text="item.infoText"
+        />
+      </LabelContainer>
+      <ImageContainer v-if="item.img">
+        <RadioImage :src="item.img" />
+        <div
+          class="search-icn-container"
+          @click="toggleImageModal(index)"
+        >
           <img
             class="search-icn"
             :src="require('../../../assets/icons/search_icon.png')"
           />
         </div>
-      </image-container>
-      <modal
+      </ImageContainer>
+      <Modal
         v-if="item.img"
-        :isOpen="isImageOpen(index)"
+        :is-open="isImageOpen(index)"
         @on-close="toggleImageModal(null)"
       >
-        <modal-image-container>
-          <modal-image :src="item.img" />
-        </modal-image-container>
-      </modal>
-    </radio-wrapper>
-  </component-wrapper>
+        <ModalImageContainer>
+          <ModalImage :src="item.img" />
+        </ModalImageContainer>
+      </Modal>
+    </RadioWrapper>
+  </ComponentWrapper>
 </template>
 
 <script>
@@ -61,22 +76,22 @@
 //   { label: 'Button 4', value: 'button_4', disabled: true }
 // ]
 
-import styled from 'vue3-styled-components'
-import Modal from '../../modals/modal'
-import InfoText from '../../infoText'
+  import styled from 'vue3-styled-components'
+  import Modal from '../../modals/modal'
+  import InfoText from '../../infoText'
 
-const wrapperProps = {
-  layout: String
-}
-const ComponentWrapper = styled('div', wrapperProps)`
+  const wrapperProps = {
+    layout: String
+  }
+  const ComponentWrapper = styled('div', wrapperProps)`
   display: flex;
   flex-direction: ${(props) =>
-    props.layout === 'vertical' ? 'column' : 'row'};
+  props.layout === 'vertical' ? 'column' : 'row'};
   grid-gap: 10px 5px;
   flex-wrap: wrap;
 `
 
-const Radio = styled.input`
+  const Radio = styled.input`
   cursor: pointer;
   position: absolute;
   opacity: 0;
@@ -85,26 +100,26 @@ const Radio = styled.input`
   width: 0;
 `
 
-const RadioWrapper = styled.div`
+  const RadioWrapper = styled.div`
   display: grid;
   grid-gap: 10px;
 `
 
-const containerProps = {
-  size: String,
-  isDisabled: Boolean,
-  isChecked: Boolean,
-  checkmarkColor: String
-}
-const LabelContainer = styled('label', containerProps)`
+  const containerProps = {
+    size: String,
+    isDisabled: Boolean,
+    isChecked: Boolean,
+    checkmarkColor: String
+  }
+  const LabelContainer = styled('label', containerProps)`
   display: grid;
   grid-template-columns: auto 1fr auto;
   grid-gap: ${(props) =>
     props.hasLabel
-       ? '15px' : 0 };
+  ? '15px' : 0 };
   align-items: center;
   color: ${(props) =>
-    props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.black};
+  props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.black};
   position: relative;
   cursor: ${(props) => (props.isDisabled ? 'not-allowed' : 'pointer')};
   font-size: ${(props) =>
@@ -112,7 +127,7 @@ const LabelContainer = styled('label', containerProps)`
       ? '16px'
       : props.size === 'medium'
       ? '13px'
-      : '10px'};
+  : '10px'};
   user-select: none;
   flex: auto;
   align-self: baseline;
@@ -123,13 +138,13 @@ const LabelContainer = styled('label', containerProps)`
         ? '23px'
         : props.size === 'medium'
         ? '16px'
-        : '12px'};
+  : '12px'};
     width: ${(props) =>
       props.size === 'large'
         ? '23px'
         : props.size === 'medium'
         ? '16px'
-        : '12px'};
+  : '12px'};
     background-color: #fff;
     border-radius: 100%;
     border: 1px solid ${(props) => props.theme.colors.mediumGray};
@@ -145,31 +160,31 @@ const LabelContainer = styled('label', containerProps)`
           ? '10px'
           : props.size === 'medium'
           ? '8px'
-          : '6px'};
+  : '6px'};
       height: ${(props) =>
         props.size === 'large'
           ? '10px'
           : props.size === 'medium'
           ? '8px'
-          : '6px'};
+  : '6px'};
       border-radius: 100%;
       background: ${(props) =>
-        props.checkmarkColor ? props.checkmarkColor : props.theme.colors.green};
+  props.checkmarkColor ? props.checkmarkColor : props.theme.colors.green};
     }
   }
 `
 
-const textAttrs = { isDisabled: Boolean }
-const LabelText = styled('div', textAttrs)`
+  const textAttrs = { isDisabled: Boolean }
+  const LabelText = styled('div', textAttrs)`
   color: ${(props) =>
-    props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.black};
+  props.isDisabled ? props.theme.colors.grey2 : props.theme.colors.black};
 `
 
-const RadioImage = styled.img`
+  const RadioImage = styled.img`
   max-width: 100px;
 `
 
-const ImageContainer = styled.div`
+  const ImageContainer = styled.div`
   border-radius: 4px;
   cursor: pointer;
   display: grid;
@@ -194,77 +209,77 @@ const ImageContainer = styled.div`
   }
 `
 
-const ModalImage = styled.img``
+  const ModalImage = styled.img``
 
-const ModalImageContainer = styled.div`
+  const ModalImageContainer = styled.div`
   padding: 40px;
 `
 
-export default {
-  name: 'radio-button',
-  components: {
-    Radio,
-    ComponentWrapper,
-    LabelContainer,
-    RadioWrapper,
-    RadioImage,
-    ImageContainer,
-    Modal,
-    ModalImage,
-    ModalImageContainer,
-    InfoText,
-    LabelText
-  },
-  props: {
-    selectedOption: {
-      required: true,
-      default: false
-    },
-    options: {
-      required: true,
-      default: []
-    },
-    layout: {
-      required: false,
-      default: 'horizontal' //2 options: 'vertical' (only 1 per row) & 'horizontal' (many per row)
+  export default {
+    name: 'RadioButton',
+    components: {
+      Radio,
+      ComponentWrapper,
+      LabelContainer,
+      RadioWrapper,
+      RadioImage,
+      ImageContainer,
+      Modal,
+      ModalImage,
+      ModalImageContainer,
+      InfoText,
+      LabelText
     },
-    size: {
-      required: false,
-      default: 'medium' // small, medium, large
+    props: {
+      selectedOption: {
+        required: true,
+        default: false
+      },
+      options: {
+        required: true,
+        default: []
+      },
+      layout: {
+        required: false,
+        default: 'horizontal' //2 options: 'vertical' (only 1 per row) & 'horizontal' (many per row)
+      },
+      size: {
+        required: false,
+        default: 'medium' // small, medium, large
+      },
+      name: {
+        required: false,
+        default: ''
+      },
+      checkmarkColor: {
+        required: false,
+        default: ''
+      },
+      dataId: {
+        type: String,
+        default: 'key'
+      }
     },
-    name: {
-      required: false,
-      default: ''
-    },
-    checkmarkColor: {
-      required: false,
-      default: ''
-    },
-    dataId: {
-      type: String,
-      default: 'key'
-    }
-  },
-  data() {
-    return {
-      selectedImage: null,
-      radioName: ''
-    }
-  },
-  methods: {
-    onInputHandler(value) {
-      this.$emit('on-radio-change', value)
+    data() {
+      return {
+        selectedImage: null,
+        radioName: ''
+      }
     },
-    isImageOpen(index) {
-      return this.selectedImage === index
+    created() {
+      this.radioName =
+        this.name.length === 0 ? Math.round(Math.random() * 10000) : this.name
     },
-    toggleImageModal(value) {
-      this.selectedImage = value
+    methods: {
+      onInputHandler(value) {
+        this.$emit('on-radio-change', value)
+      },
+      isImageOpen(index) {
+        return this.selectedImage === index
+      },
+      toggleImageModal(value) {
+        this.selectedImage = value
+      }
     }
-  },
-  created() {
-    this.radioName =
-      this.name.length === 0 ? Math.round(Math.random() * 10000) : this.name
   }
-}
 </script>

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

@@ -1,21 +1,24 @@
 <template>
-  <container :inputWidth="inputWidth">
-    <input-wrapper :iconPosition="iconPosition" :iconColor="iconColor">
+  <Container :input-width="inputWidth">
+    <InputWrapper
+      :icon-color="iconColor"
+      :icon-position="iconPosition"
+    >
       <SearchIconSvg class="search-icn" />
-      <input-container
+      <InputContainer
         ref="inputElement"
+        :data-id="dataId"
+        :disabled="disabled"
+        :has-focus="hasFocus"
+        :input-width="inputWidth"
+        :is-disabled="disabled"
+        :is-filter="isFilter"
         :placeholder="placeholder"
         :value="value"
         @input="onChangeHandler($event)"
-        :disabled="disabled"
-        :isDisabled="disabled"
-        :inputWidth="inputWidth"
-        :isFilter="isFilter"
-        :hasFocus="hasFocus"
-        :data-id="dataId"
       />
-    </input-wrapper>
-  </container>
+    </InputWrapper>
+  </Container>
 </template>
 
 <script>
@@ -32,23 +35,23 @@
 //   iconPosition="left"
 //   iconColor="grey2"
 // />
-import styled from 'vue3-styled-components'
-import SearchIconSvg from '../../../assets/icons/search_icon_black.svg'
+  import styled from 'vue3-styled-components'
+  import SearchIconSvg from '../../../assets/icons/search_icon_black.svg'
 
-const inputAttrs = {
-  isDisabled: Boolean,
-  inputWidth: String,
-  isFilter: Boolean
-}
-const Container = styled('div', inputAttrs)`
+  const inputAttrs = {
+    isDisabled: Boolean,
+    inputWidth: String,
+    isFilter: Boolean
+  }
+  const Container = styled('div', inputAttrs)`
   width: ${(props) => (props.inputWidth ? props.inputWidth : '100%')};
   position: relative;
 `
 
-const InputContainer = styled('input', inputAttrs)`
+  const InputContainer = styled('input', inputAttrs)`
   border: 1px solid ${(props) => props.theme.colors.grey4};
   padding: ${(props) =>
-    props.isFilter ? '7px 30px 7px 10px' : '11px 30px 11px 10px'};
+  props.isFilter ? '7px 30px 7px 10px' : '11px 30px 11px 10px'};
   border-radius: 4px;
   font-size: 13px;
   color: ${(props) => props.theme.colors.black};
@@ -65,7 +68,7 @@ const InputContainer = styled('input', inputAttrs)`
   }
 `
 
-const InputWrapper = styled.span`
+  const InputWrapper = styled.span`
   position: relative;
 
   svg {
@@ -78,73 +81,73 @@ const InputWrapper = styled.span`
       fill: ${(props) =>
         props.theme.colors[props.iconColor]
           ? props.theme.colors[props.iconColor]
-          : props.iconColor};
+  : props.iconColor};
     }
   }
 `
 
-export default {
-  name: 'search-input',
-  components: {
-    InputContainer,
-    InputWrapper,
-    Container,
-    SearchIconSvg
-  },
-  props: {
-    value: {
-      required: true
-    },
-    disabled: {
-      required: false,
-      default: false
-    },
-    placeholder: {
-      required: false,
-      default: ''
-    },
-    inputWidth: {
-      required: false,
-      default: null
+  export default {
+    name: 'SearchInput',
+    components: {
+      InputContainer,
+      InputWrapper,
+      Container,
+      SearchIconSvg
     },
-    isFilter: {
-      required: false,
-      default: false
-    },
-    hasFocus: {
-      required: false,
-      default: false
-    },
-    dataId: {
-      required: false,
-      default: ''
-    },
-    iconPosition: {
-      type: String,
-      default: 'right'
+    props: {
+      value: {
+        required: true
+      },
+      disabled: {
+        required: false,
+        default: false
+      },
+      placeholder: {
+        required: false,
+        default: ''
+      },
+      inputWidth: {
+        required: false,
+        default: null
+      },
+      isFilter: {
+        required: false,
+        default: false
+      },
+      hasFocus: {
+        required: false,
+        default: false
+      },
+      dataId: {
+        required: false,
+        default: ''
+      },
+      iconPosition: {
+        type: String,
+        default: 'right'
+      },
+      iconColor: {
+        type: String,
+        default: 'black'
+      }
     },
-    iconColor: {
-      type: String,
-      default: 'black'
-    }
-  },
-  emits: ['on-change'],
-  methods: {
-    onChangeHandler(event) {
-      this.$emit('on-change', event.target.value)
+    emits: ['on-change'],
+    watch: {
+      hasFocus(newVal) {
+        if (newVal) {
+          this.focusInputElement()
+        }
+      }
     },
-    focusInputElement() {
-      this.$nextTick(() => {
-        this.$refs.inputElement.$el.focus()
-      })
-    }
-  },
-  watch: {
-    hasFocus(newVal) {
-      if (newVal) {
-        this.focusInputElement()
+    methods: {
+      onChangeHandler(event) {
+        this.$emit('on-change', event.target.value)
+      },
+      focusInputElement() {
+        this.$nextTick(() => {
+          this.$refs.inputElement.$el.focus()
+        })
       }
     }
   }
-}
 </script>