@eturnity/eturnity_reusable_components 8.7.4 → 8.7.5-EPDM-12618.1

package/src/components/icon/index.vue

@@ -1,177 +1,177 @@
-<template>
-  <Wrapper
-    :cursor="cursor"
-    data-test-id="icon_wrapper"
-    :disabled="disabled"
-    :size="size"
-  >
-    <IconImage
-      :animation="animation"
-      :background-color="backgroundColor"
-      :color="color"
-      data-test-id="icon_image"
-      :hovered-color="hoveredColor"
-    >
-      <i data-test-id="icon_svg" v-html="icon.html"></i>
-    </IconImage>
-    <StrikedLine
-      v-if="isStriked"
-      :color="color"
-      data-test-id="icon_striked_line"
-    />
-    <CountWrapper v-if="count > 0" data-test-id="icon_count">
-      {{ counter }}
-    </CountWrapper>
-  </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 { computed, onMounted, reactive, watch } from 'vue'
-  import styled from 'vue3-styled-components'
-  import { fetchIcon } from './iconCache.mjs'
-
-  const props = defineProps({
-    disabled: {
-      required: false,
-      default: false,
-    },
-    name: {
-      required: true,
-      type: String,
-    },
-    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,
-    },
-    count: {
-      required: false,
-      default: 0,
-    },
-    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 CountWrapper = styled('div')`
-    position: absolute;
-    top: -7px;
-    right: -7px;
-    background-color: ${({ theme }) => theme.colors.red};
-    color: ${({ theme }) => theme.colors.white};
-    border-radius: 4px;
-    width: 15px;
-    height: 15px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    font-size: 10px;
-  `
-
-  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 {
-      width: 100%;
-      height: 100%;
-      background-color: ${(props) =>
-        props.backgroundColor ? props.backgroundColor : 'transparent'};
-      padding: ${(props) => (props.backgroundColor ? '3px' : '0')};
-    }
-    svg path:not(.fix) {
-      ${({ theme, color }) => color && `fill: ${theme.colors[color] || color};`}
-    }
-    &:hover svg path:not(.fix) {
-      ${({ 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 loadSvg = async () => {
-    icon.html = await fetchIcon(props.name.toLowerCase())
-  }
-
-  const counter = computed(() =>
-    props.count > 9 ? '9+' : props.count.toString()
-  )
-
-  onMounted(() => loadSvg())
-
-  watch(() => props.name, loadSvg)
-</script>
+<template>
+  <Wrapper
+    :cursor="cursor"
+    data-test-id="icon_wrapper"
+    :disabled="disabled"
+    :size="size"
+  >
+    <IconImage
+      :animation="animation"
+      :background-color="backgroundColor"
+      :color="color"
+      data-test-id="icon_image"
+      :hovered-color="hoveredColor"
+    >
+      <i data-test-id="icon_svg" v-html="icon.html"></i>
+    </IconImage>
+    <StrikedLine
+      v-if="isStriked"
+      :color="color"
+      data-test-id="icon_striked_line"
+    />
+    <CountWrapper v-if="count > 0" data-test-id="icon_count">
+      {{ counter }}
+    </CountWrapper>
+  </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 { computed, onMounted, reactive, watch } from 'vue'
+  import styled from 'vue3-styled-components'
+  import { fetchIcon } from './iconCache.mjs'
+
+  const props = defineProps({
+    disabled: {
+      required: false,
+      default: false,
+    },
+    name: {
+      required: true,
+      type: String,
+    },
+    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,
+    },
+    count: {
+      required: false,
+      default: 0,
+    },
+    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 CountWrapper = styled('div')`
+    position: absolute;
+    top: -7px;
+    right: -7px;
+    background-color: ${({ theme }) => theme.colors.red};
+    color: ${({ theme }) => theme.colors.white};
+    border-radius: 4px;
+    width: 15px;
+    height: 15px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 10px;
+  `
+
+  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 {
+      width: 100%;
+      height: 100%;
+      background-color: ${(props) =>
+        props.backgroundColor ? props.backgroundColor : 'transparent'};
+      padding: ${(props) => (props.backgroundColor ? '3px' : '0')};
+    }
+    svg path:not(.fix) {
+      ${({ theme, color }) => color && `fill: ${theme.colors[color] || color};`}
+    }
+    &:hover svg path:not(.fix) {
+      ${({ 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 loadSvg = async () => {
+    icon.html = await fetchIcon(props.name.toLowerCase())
+  }
+
+  const counter = computed(() =>
+    props.count > 9 ? '9+' : props.count.toString()
+  )
+
+  onMounted(() => loadSvg())
+
+  watch(() => props.name, loadSvg)
+</script>