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

package/src/components/icon/index.vue

@@ -1,22 +1,15 @@
 <template>
-  <Wrapper
-    :cursor="cursor"
-    :disabled="disabled"
-    :size="size"
-  >
-    <IconImage
-      :animation="animation"
-      :background-color="backgroundColor"
+  <wrapper :disabled="disabled" :size="size" :cursor="cursor">
+    <icon-image
       :color="color"
+      :background-color="backgroundColor"
       :hovered-color="hoveredColor"
+      :animation="animation"
     >
-      <i v-html="icon.html"></i>
-    </IconImage>
-    <StrikedLine
-      v-if="isStriked"
-      :color="color"
-    />
-  </Wrapper>
+      <i v-html="icon.html" />
+    </icon-image>
+    <striked-line v-if="isStriked" :color="color"></striked-line>
+  </wrapper>
 </template>
 
 <script setup>
@@ -31,51 +24,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;
@@ -88,7 +81,7 @@
   line-height: 0;
 `
 
-  const StrikedLine = styled('div', { color: String })`
+const StrikedLine = styled('div', { color: String })`
   display: flex;
   position: absolute;
   bottom: 0;
@@ -103,19 +96,19 @@
   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 {
@@ -134,13 +127,13 @@
   }
 `
 
-  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,43 +1,39 @@
 <template>
   <Wrapper
-    :background-color="backgroundColor"
-    :border-radius="borderRadius"
-    :color="iconColor"
-    :data-id="dataId"
     :disabled="disabled"
-    :has-border="hasBorder"
-    :hovered-background-color="hoveredBackgroundColor"
-    :is-hovered="isHovered"
-    :no-cursor="noCursor"
     :size="size"
+    :backgroundColor="backgroundColor"
+    :borderRadius="borderRadius"
+    :hasBorder="hasBorder"
+    :color="iconColor"
+    :hoveredBackgroundColor="hoveredBackgroundColor"
+    :isHovered="isHovered"
+    :data-id="dataId"
+    :noCursor="noCursor"
   >
-    <Icon
-      :animation="isLoading ? 'fade 3s infinite' : 'none'"
-      :color="iconColor"
+    <icon
       :disabled="disabled"
-      :hovered-color="hoveredIconColor"
-      :is-striked="isStriked"
-      :name="name"
       :size="iconSize"
+      :name="name"
+      :color="iconColor"
+      :hoveredColor="hoveredIconColor"
+      :isStriked="isStriked"
+      :animation="isLoading ? 'fade 3s infinite' : 'none'"
     />
 
-    <CaretIcon v-if="hasCaret">
-      <IconWrapper
-        border-radius="1px"
+    <caret v-if="hasCaret">
+      <iconWrapper
         :disabled="disabled"
-        :hovered-background-color="hoveredIconColor"
-        :icon-color="iconColor"
-        name="arrow_down"
         size="10px"
+        name="arrow_down"
+        :iconColor="iconColor"
+        :hoveredBackgroundColor="hoveredIconColor"
+        borderRadius="1px"
       />
-    </CaretIcon>
-    <LockContainer v-if="hasLock">
-      <RCIcon
-        color="yellow"
-        name="lock"
-        size="9px"
-      />
-    </LockContainer>
+    </caret>
+    <lockContainer v-if="hasLock">
+      <icon size="9px" name="lock" color="yellow" />
+    </lockContainer>
   </Wrapper>
 </template>
 
@@ -51,26 +47,26 @@
 //   size="60px" by default, this is 30px
 // />
 
-  import styled from 'vue3-styled-components'
-  import RCIcon from '../icon'
+import styled from 'vue3-styled-components'
+import icon 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};
@@ -78,106 +74,106 @@
   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 CaretIcon = styled.div`
+const caret = styled.div`
   position: absolute;
   bottom: 3px;
   right: 2px;
   height: 10px;
 `
 
-  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
-      }
+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
     }
   }
+}
 </script>

package/src/components/infoCard/index.vue

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