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

package/src/components/icon/index.vue

@@ -1,15 +1,22 @@
 <template>
-  <wrapper :disabled="disabled" :size="size" :cursor="cursor">
-    <icon-image
-      :color="color"
+  <Wrapper
+    :cursor="cursor"
+    :disabled="disabled"
+    :size="size"
+  >
+    <IconImage
+      :animation="animation"
       :background-color="backgroundColor"
+      :color="color"
       :hovered-color="hoveredColor"
-      :animation="animation"
     >
-      <i v-html="icon.html" />
-    </icon-image>
-    <striked-line v-if="isStriked" :color="color"></striked-line>
-  </wrapper>
+      <i v-html="icon.html"></i>
+    </IconImage>
+    <StrikedLine
+      v-if="isStriked"
+      :color="color"
+    />
+  </Wrapper>
 </template>
 
 <script setup>
@@ -24,51 +31,51 @@
 //   isStriked = "true"
 // />
 
-import { onMounted, reactive, watch } from 'vue'
-import styled from 'vue3-styled-components'
-import { fetchIcon } from './iconCache'
+  import { onMounted, reactive, watch } from 'vue'
+  import styled from 'vue3-styled-components'
+  import { fetchIcon } from './iconCache'
 
-const props = defineProps({
-  disabled: {
-    required: false,
-    default: false
-  },
-  name: {
-    required: true
-  },
-  color: {
-    required: false
-  },
-  hoveredColor: {
-    required: false
-  },
-  size: {
-    required: false,
-    default: '30px'
-  },
-  cursor: {
-    required: false,
-    default: null
-  },
-  isStriked: {
-    required: false,
-    default: false
-  },
-  backgroundColor: {
-    required: false,
-    default: null
-  },
-  animation: {
-    required: false,
-    default: 'none'
-  }
-})
+  const props = defineProps({
+    disabled: {
+      required: false,
+      default: false
+    },
+    name: {
+      required: true
+    },
+    color: {
+      required: false
+    },
+    hoveredColor: {
+      required: false
+    },
+    size: {
+      required: false,
+      default: '30px'
+    },
+    cursor: {
+      required: false,
+      default: null
+    },
+    isStriked: {
+      required: false,
+      default: false
+    },
+    backgroundColor: {
+      required: false,
+      default: null
+    },
+    animation: {
+      required: false,
+      default: 'none'
+    }
+  })
 
-const Wrapper = styled('div', {
-  size: String,
-  disabled: Boolean,
-  cursor: String
-})`
+  const Wrapper = styled('div', {
+    size: String,
+    disabled: Boolean,
+    cursor: String
+  })`
   display: flex;
   position: relative;
   align-content: center;
@@ -81,7 +88,7 @@ const Wrapper = styled('div', {
   line-height: 0;
 `
 
-const StrikedLine = styled('div', { color: String })`
+  const StrikedLine = styled('div', { color: String })`
   display: flex;
   position: absolute;
   bottom: 0;
@@ -96,19 +103,19 @@ const StrikedLine = styled('div', { color: String })`
   transform-origin: 0% 100%;
   transform: rotate(-45deg);
 `
-const IconImage = styled('div', {
-  color: String,
-  backgroundColor: String,
-  hoveredColor: String,
-  animation: String
-})`
+  const IconImage = styled('div', {
+    color: String,
+    backgroundColor: String,
+    hoveredColor: String,
+    animation: String
+  })`
   animation: ${(props) => props.animation};
   width: 100%;
   svg {
     width: 100%;
     height: 100%;
     background-color: ${(props) =>
-      props.backgroundColor ? props.backgroundColor : 'transparent'};
+  props.backgroundColor ? props.backgroundColor : 'transparent'};
     padding: ${(props) => (props.backgroundColor ? '3px' : '0')};
   }
   svg path {
@@ -127,13 +134,13 @@ const IconImage = styled('div', {
   }
 `
 
-const icon = reactive({ html: '' })
+  const icon = reactive({ html: '' })
 
-const loadSvg = async () => {
-  icon.html = await fetchIcon(props.name.toLowerCase())
-}
+  const loadSvg = async() => {
+    icon.html = await fetchIcon(props.name.toLowerCase())
+  }
 
-onMounted(() => loadSvg())
+  onMounted(() => loadSvg())
 
-watch(() => props.name, loadSvg)
+  watch(() => props.name, loadSvg)
 </script>

package/src/components/iconWrapper/index.vue

@@ -1,39 +1,43 @@
 <template>
   <Wrapper
-    :disabled="disabled"
-    :size="size"
-    :backgroundColor="backgroundColor"
-    :borderRadius="borderRadius"
-    :hasBorder="hasBorder"
+    :background-color="backgroundColor"
+    :border-radius="borderRadius"
     :color="iconColor"
-    :hoveredBackgroundColor="hoveredBackgroundColor"
-    :isHovered="isHovered"
     :data-id="dataId"
-    :noCursor="noCursor"
+    :disabled="disabled"
+    :has-border="hasBorder"
+    :hovered-background-color="hoveredBackgroundColor"
+    :is-hovered="isHovered"
+    :no-cursor="noCursor"
+    :size="size"
   >
-    <icon
+    <Icon
+      :animation="isLoading ? 'fade 3s infinite' : 'none'"
+      :color="iconColor"
       :disabled="disabled"
-      :size="iconSize"
+      :hovered-color="hoveredIconColor"
+      :is-striked="isStriked"
       :name="name"
-      :color="iconColor"
-      :hoveredColor="hoveredIconColor"
-      :isStriked="isStriked"
-      :animation="isLoading ? 'fade 3s infinite' : 'none'"
+      :size="iconSize"
     />
 
-    <caret v-if="hasCaret">
-      <iconWrapper
+    <CaretIcon v-if="hasCaret">
+      <IconWrapper
+        border-radius="1px"
         :disabled="disabled"
-        size="10px"
+        :hovered-background-color="hoveredIconColor"
+        :icon-color="iconColor"
         name="arrow_down"
-        :iconColor="iconColor"
-        :hoveredBackgroundColor="hoveredIconColor"
-        borderRadius="1px"
+        size="10px"
       />
-    </caret>
-    <lockContainer v-if="hasLock">
-      <icon size="9px" name="lock" color="yellow" />
-    </lockContainer>
+    </CaretIcon>
+    <LockContainer v-if="hasLock">
+      <RCIcon
+        color="yellow"
+        name="lock"
+        size="9px"
+      />
+    </LockContainer>
   </Wrapper>
 </template>
 
@@ -47,26 +51,26 @@
 //   size="60px" by default, this is 30px
 // />
 
-import styled from 'vue3-styled-components'
-import icon from '../icon'
+  import styled from 'vue3-styled-components'
+  import RCIcon from '../icon'
 
-const wrapperAttrs = {
-  color: String,
-  isHovered: Boolean,
-  borderRadius: String,
-  disabled: Boolean,
-  size: String,
-  backgroundColor: String,
-  hoveredBackgroundColor: String,
-  hasBorder: Boolean,
-  noCursor: Boolean
-}
-const lockContainer = styled.div`
+  const wrapperAttrs = {
+    color: String,
+    isHovered: Boolean,
+    borderRadius: String,
+    disabled: Boolean,
+    size: String,
+    backgroundColor: String,
+    hoveredBackgroundColor: String,
+    hasBorder: Boolean,
+    noCursor: Boolean
+  }
+  const LockContainer = styled.div`
   position: absolute;
   bottom: 6px;
   right: 6px;
 `
-const Wrapper = styled('div', wrapperAttrs)`
+  const Wrapper = styled('div', wrapperAttrs)`
   position: relative;
   display: inline-flex;
   width: ${(props) => props.size};
@@ -74,106 +78,106 @@ const Wrapper = styled('div', wrapperAttrs)`
   border: ${(props) =>
     props.hasBorder
       ? 'solid 1px ' + props.theme.colors[props.color] || props.color
-      : ''};
+  : ''};
   justify-content: center;
   align-items: center;
   cursor: ${(props) =>
-    props.noCursor ? 'auto' : props.disabled ? 'not-allowed' : 'pointer'};
+  props.noCursor ? 'auto' : props.disabled ? 'not-allowed' : 'pointer'};
   background-color: ${(props) =>
-    props.theme.colors[props.backgroundColor] || props.backgroundColor};
+  props.theme.colors[props.backgroundColor] || props.backgroundColor};
   border-radius: ${(props) => props.borderRadius};
   ${(props) =>
     props.isHovered
       ? 'background-color:' +
           props.theme.colors[props.hoveredBackgroundColor] ||
         props.hoveredBackgroundColor
-      : ''};
+  : ''};
   &:hover {
     background-color: ${(props) =>
       props.theme.colors[props.hoveredBackgroundColor] ||
-      props.hoveredBackgroundColor};
+  props.hoveredBackgroundColor};
   }
 `
-const caret = styled.div`
+  const CaretIcon = styled.div`
   position: absolute;
   bottom: 3px;
   right: 2px;
   height: 10px;
 `
 
-export default {
-  name: 'iconWrapper',
-  components: {
-    Wrapper,
-    icon,
-    caret,
-    lockContainer
-  },
-  props: {
-    disabled: {
-      required: false,
-      default: false
-    },
-    name: {
-      required: true
-    },
-    iconColor: {
-      required: false,
-      default: 'white'
-    },
-    hoveredIconColor: {
-      required: false
-    },
-    backgroundColor: {
-      required: false
-    },
-    hasBorder: {
-      required: false
-    },
-    hoveredBackgroundColor: {
-      required: false,
-      default: 'transparentWhite2'
-    },
-    size: {
-      required: false,
-      default: '32px'
-    },
-    iconSize: {
-      required: false,
-      default: '18px'
-    },
-    hasCaret: {
-      required: false,
-      default: false
-    },
-    borderRadius: {
-      required: false,
-      default: '6px'
-    },
-    dataId: {
-      type: String,
-      default: ''
-    },
-    isHovered: {
-      required: false,
-      default: false
-    },
-    isStriked: {
-      required: false,
-      default: false
-    },
-    isLoading: {
-      required: false,
-      default: false
-    },
-    noCursor: {
-      required: false,
-      default: false
-    },
-    hasLock: {
-      required: false,
-      default: false
+  export default {
+    name: 'IconWrapper',
+    components: {
+      Wrapper,
+      RCIcon,
+      CaretIcon,
+      LockContainer
+    },
+    props: {
+      disabled: {
+        required: false,
+        default: false
+      },
+      name: {
+        required: true
+      },
+      iconColor: {
+        required: false,
+        default: 'white'
+      },
+      hoveredIconColor: {
+        required: false
+      },
+      backgroundColor: {
+        required: false
+      },
+      hasBorder: {
+        required: false
+      },
+      hoveredBackgroundColor: {
+        required: false,
+        default: 'transparentWhite2'
+      },
+      size: {
+        required: false,
+        default: '32px'
+      },
+      iconSize: {
+        required: false,
+        default: '18px'
+      },
+      hasCaret: {
+        required: false,
+        default: false
+      },
+      borderRadius: {
+        required: false,
+        default: '6px'
+      },
+      dataId: {
+        type: String,
+        default: ''
+      },
+      isHovered: {
+        required: false,
+        default: false
+      },
+      isStriked: {
+        required: false,
+        default: false
+      },
+      isLoading: {
+        required: false,
+        default: false
+      },
+      noCursor: {
+        required: false,
+        default: false
+      },
+      hasLock: {
+        required: false,
+        default: false
+      }
     }
   }
-}
 </script>

package/src/components/infoCard/index.vue

@@ -1,17 +1,20 @@
 <template>
-  <info-container>
-    <icon name="info" size="24px" />
-    <text-container>
-      <slot />
-    </text-container>
-  </info-container>
+  <InfoContainer>
+    <RCIcon
+      name="info"
+      size="24px"
+    />
+    <TextContainer>
+      <slot></slot>
+    </TextContainer>
+  </InfoContainer>
 </template>
 
 <script>
-import styled from 'vue3-styled-components'
-import Icon from '../icon'
+  import styled from 'vue3-styled-components'
+  import RCIcon from '../icon'
 
-const InfoContainer = styled.div`
+  const InfoContainer = styled.div`
   display: flex;
   gap: 15px;
   padding: 20px;
@@ -19,17 +22,17 @@ const InfoContainer = styled.div`
   border-radius: 4px;
 `
 
-const TextContainer = styled.div`
+  const TextContainer = styled.div`
   font-size: 13px;
   width: 100%;
 `
 
-export default {
-  name: 'InfoCard',
-  components: {
-    Icon,
-    InfoContainer,
-    TextContainer
+  export default {
+    name: 'InfoCard',
+    components: {
+      RCIcon,
+      InfoContainer,
+      TextContainer
+    }
   }
-}
 </script>