@eturnity/eturnity_reusable_components 7.30.3-EPDM-10647.0 → 7.30.3-EPDM-10576.2

package/src/components/icon/index.vue

@@ -1,140 +1,140 @@
 <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>
-// import Icon from "@eturnity/eturnity_reusable_components/src/components/icon"
-//  How to use:
-//<icon
-//   name="House" //required. a svg file named [name].svg should be present in /assets/svgIcons
-//   color="red"
-//   hoveredColor="blue"
-//   size="60px" by default, this is 30px
-//   cursor="default"
-//   isStriked = "true"
-// />
+  // import Icon from "@eturnity/eturnity_reusable_components/src/components/icon"
+  //  How to use:
+  //<icon
+  //   name="House" //required. a svg file named [name].svg should be present in /assets/svgIcons
+  //   color="red"
+  //   hoveredColor="blue"
+  //   size="60px" by default, this is 30px
+  //   cursor="default"
+  //   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
-})`
-  display: flex;
-  position: relative;
-  align-content: center;
-  justify-content: center;
-  width: ${(props) => props.size};
-  height: ${(props) => props.size};
-  min-width: ${(props) => props.size};
-  min-height: ${(props) => props.size};
-  cursor: ${(props) => (props.disabled ? 'not-allowed' : props.cursor)};
-  line-height: 0;
-`
+  const Wrapper = styled('div', {
+    size: String,
+    disabled: Boolean,
+    cursor: String,
+  })`
+    display: flex;
+    position: relative;
+    align-content: center;
+    justify-content: center;
+    width: ${(props) => props.size};
+    height: ${(props) => props.size};
+    min-width: ${(props) => props.size};
+    min-height: ${(props) => props.size};
+    cursor: ${(props) => (props.disabled ? 'not-allowed' : props.cursor)};
+    line-height: 0;
+  `
 
-const StrikedLine = styled('div', { color: String })`
-  display: flex;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  align-content: center;
-  justify-content: center;
-  width: 143%;
-  height: 8%;
-  background-color: ${({ theme, color }) => theme.colors[color] || color};
-  min-height: 0;
-  line-height: 0;
-  transform-origin: 0% 100%;
-  transform: rotate(-45deg);
-`
-const IconImage = styled('div', {
-  color: String,
-  backgroundColor: String,
-  hoveredColor: String,
-  animation: String
-})`
-  animation: ${(props) => props.animation};
-  width: 100%;
-  svg {
+  const StrikedLine = styled('div', { color: String })`
+    display: flex;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    align-content: center;
+    justify-content: center;
+    width: 143%;
+    height: 8%;
+    background-color: ${({ theme, color }) => theme.colors[color] || color};
+    min-height: 0;
+    line-height: 0;
+    transform-origin: 0% 100%;
+    transform: rotate(-45deg);
+  `
+  const IconImage = styled('div', {
+    color: String,
+    backgroundColor: String,
+    hoveredColor: String,
+    animation: String,
+  })`
+    animation: ${(props) => props.animation};
     width: 100%;
-    height: 100%;
-    background-color: ${(props) =>
-      props.backgroundColor ? props.backgroundColor : 'transparent'};
-    padding: ${(props) => (props.backgroundColor ? '3px' : '0')};
-  }
-  svg path {
-    ${({ theme, color }) => color && `fill: ${theme.colors[color] || color};`}
-  }
-  &:hover svg path {
-    ${({ theme, hoveredColor }) =>
-      hoveredColor && `fill: ${theme.colors[hoveredColor] || hoveredColor};`}
-  }
-  &:hover + div {
-    background-color: ${(props) => props.hoveredColor};
-  }
-  @keyframes fade {
-    50% {
-      opacity: 0.3;
+    svg {
+      width: 100%;
+      height: 100%;
+      background-color: ${(props) =>
+        props.backgroundColor ? props.backgroundColor : 'transparent'};
+      padding: ${(props) => (props.backgroundColor ? '3px' : '0')};
     }
-  }
-`
+    svg path {
+      ${({ theme, color }) => color && `fill: ${theme.colors[color] || color};`}
+    }
+    &:hover svg path {
+      ${({ theme, hoveredColor }) =>
+        hoveredColor && `fill: ${theme.colors[hoveredColor] || hoveredColor};`}
+    }
+    &:hover + div {
+      background-color: ${(props) => props.hoveredColor};
+    }
+    @keyframes fade {
+      50% {
+        opacity: 0.3;
+      }
+    }
+  `
 
-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,179 +1,179 @@
 <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
+    <RCIcon
+      :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>
 
 <script>
-// import Icon from "@eturnity/eturnity_reusable_components/src/components/icon"
-//  How to use:
-//<icon
-//   name="House" //required. a svg file named [name].svg should be present in /assets/svgIcons
-//   color="red"
-//   hoveredColor="blue"
-//   size="60px" by default, this is 30px
-// />
+  // import Icon from "@eturnity/eturnity_reusable_components/src/components/icon"
+  //  How to use:
+  //<icon
+  //   name="House" //required. a svg file named [name].svg should be present in /assets/svgIcons
+  //   color="red"
+  //   hoveredColor="blue"
+  //   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`
-  position: absolute;
-  bottom: 6px;
-  right: 6px;
-`
-const Wrapper = styled('div', wrapperAttrs)`
-  position: relative;
-  display: inline-flex;
-  width: ${(props) => props.size};
-  height: ${(props) => props.size};
-  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'};
-  background-color: ${(props) =>
-    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};
+  const wrapperAttrs = {
+    color: String,
+    isHovered: Boolean,
+    borderRadius: String,
+    disabled: Boolean,
+    size: String,
+    backgroundColor: String,
+    hoveredBackgroundColor: String,
+    hasBorder: Boolean,
+    noCursor: Boolean,
   }
-`
-const caret = styled.div`
-  position: absolute;
-  bottom: 3px;
-  right: 2px;
-  height: 10px;
-`
+  const LockContainer = styled.div`
+    position: absolute;
+    bottom: 6px;
+    right: 6px;
+  `
+  const Wrapper = styled('div', wrapperAttrs)`
+    position: relative;
+    display: inline-flex;
+    width: ${(props) => props.size};
+    height: ${(props) => props.size};
+    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'};
+    background-color: ${(props) =>
+      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};
+    }
+  `
+  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
+  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,
+      },
     },
-    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,42 +1,40 @@
 <template>
-  <info-container>
-    <icon name="info" size="24px" :color="color" />
-    <text-container>
-      <slot />
-    </text-container>
-  </info-container>
+  <InfoContainer>
+    <RCIcon name="info" size="24px" :color="color" />
+    <TextContainer>
+      <slot></slot>
+    </TextContainer>
+  </InfoContainer>
 </template>
 
 <script>
-// import InfoCard from '@eturnity/eturnity_reusable_components/src/components/infoCard'
-import styled from 'vue3-styled-components'
-import Icon from '../icon'
+  import styled from 'vue3-styled-components'
+  import RCIcon from '../icon'
 
-const InfoContainer = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 15px;
-  padding: 20px;
-  border: 1px dashed ${(props) => props.theme.colors.grey4};
-  border-radius: 4px;
-`
+  const InfoContainer = styled.div`
+    display: flex;
+    gap: 15px;
+    padding: 20px;
+    border: 1px dashed ${(props) => props.theme.colors.grey4};
+    border-radius: 4px;
+  `
 
-const TextContainer = styled.div`
-  font-size: 13px;
-  width: 100%;
-`
+  const TextContainer = styled.div`
+    font-size: 13px;
+    width: 100%;
+  `
 
-export default {
-  name: 'InfoCard',
-  components: {
-    Icon,
-    InfoContainer,
-    TextContainer
-  },
-  props: {
-    color: {
-      required: false
+  export default {
+    name: 'InfoCard',
+    components: {
+      RCIcon,
+      InfoContainer,
+      TextContainer,
+    },
+    props: {
+      color: {
+        required: false
+      }
     }
   }
-}
 </script>