@eturnity/eturnity_reusable_components 7.37.5 → 7.39.0

package/src/components/iconWrapper/index.vue

@@ -1,179 +1,179 @@
-<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"
-  >
-    <RCIcon
-      :animation="isLoading ? 'fade 3s infinite' : 'none'"
-      :color="iconColor"
-      :disabled="disabled"
-      :hovered-color="hoveredIconColor"
-      :is-striked="isStriked"
-      :name="name"
-      :size="iconSize"
-    />
-
-    <CaretIcon v-if="hasCaret">
-      <IconWrapper
-        border-radius="1px"
-        :disabled="disabled"
-        :hovered-background-color="hoveredIconColor"
-        :icon-color="iconColor"
-        name="arrow_down"
-        size="10px"
-      />
-    </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 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 CaretIcon = 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,
-      },
-    },
-  }
-</script>
+<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"
+  >
+    <RCIcon
+      :animation="isLoading ? 'fade 3s infinite' : 'none'"
+      :color="iconColor"
+      :disabled="disabled"
+      :hovered-color="hoveredIconColor"
+      :is-striked="isStriked"
+      :name="name"
+      :size="iconSize"
+    />
+
+    <CaretIcon v-if="hasCaret">
+      <IconWrapper
+        border-radius="1px"
+        :disabled="disabled"
+        :hovered-background-color="hoveredIconColor"
+        :icon-color="iconColor"
+        name="arrow_down"
+        size="10px"
+      />
+    </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 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 CaretIcon = 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,
+      },
+    },
+  }
+</script>

package/src/components/infoCard/index.vue

@@ -1,40 +1,40 @@
-<template>
-  <InfoContainer>
-    <RCIcon name="info" size="24px" :color="color" />
-    <TextContainer>
-      <slot></slot>
-    </TextContainer>
-  </InfoContainer>
-</template>
-
-<script>
-  import styled from 'vue3-styled-components'
-  import RCIcon from '../icon'
-
-  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%;
-  `
-
-  export default {
-    name: 'InfoCard',
-    components: {
-      RCIcon,
-      InfoContainer,
-      TextContainer,
-    },
-    props: {
-      color: {
-        required: false
-      }
-    }
-  }
-</script>
+<template>
+  <InfoContainer>
+    <RCIcon name="info" size="24px" :color="color" />
+    <TextContainer>
+      <slot></slot>
+    </TextContainer>
+  </InfoContainer>
+</template>
+
+<script>
+  import styled from 'vue3-styled-components'
+  import RCIcon from '../icon'
+
+  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%;
+  `
+
+  export default {
+    name: 'InfoCard',
+    components: {
+      RCIcon,
+      InfoContainer,
+      TextContainer,
+    },
+    props: {
+      color: {
+        required: false
+      }
+    }
+  }
+</script>