@eturnity/eturnity_reusable_components 8.22.23-EPDM-13618.1 → 8.22.23-EPDM-14087.1

package/src/components/icon/iconCollection.vue

@@ -1,83 +1,83 @@
-<template>
-  <Wrapper>
-    <IconWrapper v-for="iconItem in iconList" :key="iconItem.name">
-      <div>
-        color:{{ color }}
-        <RCIcon
-          :color="color"
-          :hovered-color="hoveredColor"
-          :name="iconItem.name"
-          :size="size"
-        />
-      </div>
-      <h3>{{ iconItem.name }}</h3>
-    </IconWrapper>
-  </Wrapper>
-</template>
-
-<script>
-  import RCIcon from './index.vue'
-  import styled from 'vue3-styled-components'
-
-  const Wrapper = styled.div`
-    display: block;
-    text-align: center;
-    justify-items: center;
-    width: 100%;
-    background-color: #ccc;
-  `
-  const IconWrapper = styled.div`
-    display: inline-flex;
-    flex-direction: column;
-    background-color: white;
-    border-radius: 6px;
-    padding: 10px;
-    width: 220px;
-    text-align: center;
-    margin: 10px;
-  `
-  export default {
-    name: 'CollectionComponent',
-    components: { RCIcon, IconWrapper, Wrapper },
-    props: {
-      size: { required: false, type: String, default: '30px' },
-      color: { required: false, type: String, default: 'white' },
-      hoveredColor: { required: false, type: String, default: 'grey' },
-    },
-    data() {
-      return {
-        iconList: [],
-      }
-    },
-
-    // mounted() {
-    //   this.importAll(require.context('../../assets/svgIcons/', true, /\.svg$/))
-    // },
-    async mounted() {
-      // Use import.meta.glob to import SVGs dynamically
-      const icons = import.meta.glob('../../assets/svgIcons/*.svg')
-
-      for (const path in icons) {
-        const module = await icons[path]()
-
-        this.iconList.push({
-          pathLong: module.default,
-          pathShort: path,
-          name: path.replace('.svg', '').replace('../../assets/svgIcons/', ''),
-        })
-      }
-    },
-
-    methods: {
-      importAll(r) {
-        r.keys().forEach((key) =>
-          this.iconList.push({
-            pathLong: r(key),
-            pathShort: key,
-            name: key.replace('.svg', '').replace('./', ''),
-          })
-        )
-      },
-    },
-  }
-</script>
+<template>
+  <Wrapper>
+    <IconWrapper v-for="iconItem in iconList" :key="iconItem.name">
+      <div>
+        color:{{ color }}
+        <RCIcon
+          :color="color"
+          :hovered-color="hoveredColor"
+          :name="iconItem.name"
+          :size="size"
+        />
+      </div>
+      <h3>{{ iconItem.name }}</h3>
+    </IconWrapper>
+  </Wrapper>
+</template>
+
+<script>
+  import RCIcon from './index.vue'
+  import styled from 'vue3-styled-components'
+
+  const Wrapper = styled.div`
+    display: block;
+    text-align: center;
+    justify-items: center;
+    width: 100%;
+    background-color: #ccc;
+  `
+  const IconWrapper = styled.div`
+    display: inline-flex;
+    flex-direction: column;
+    background-color: white;
+    border-radius: 6px;
+    padding: 10px;
+    width: 220px;
+    text-align: center;
+    margin: 10px;
+  `
+  export default {
+    name: 'CollectionComponent',
+    components: { RCIcon, IconWrapper, Wrapper },
+    props: {
+      size: { required: false, type: String, default: '30px' },
+      color: { required: false, type: String, default: 'white' },
+      hoveredColor: { required: false, type: String, default: 'grey' },
+    },
+    data() {
+      return {
+        iconList: [],
+      }
+    },
+
+    // mounted() {
+    //   this.importAll(require.context('../../assets/svgIcons/', true, /\.svg$/))
+    // },
+    async mounted() {
+      // Use import.meta.glob to import SVGs dynamically
+      const icons = import.meta.glob('../../assets/svgIcons/*.svg')
+
+      for (const path in icons) {
+        const module = await icons[path]()
+
+        this.iconList.push({
+          pathLong: module.default,
+          pathShort: path,
+          name: path.replace('.svg', '').replace('../../assets/svgIcons/', ''),
+        })
+      }
+    },
+
+    methods: {
+      importAll(r) {
+        r.keys().forEach((key) =>
+          this.iconList.push({
+            pathLong: r(key),
+            pathShort: key,
+            name: key.replace('.svg', '').replace('./', ''),
+          })
+        )
+      },
+    },
+  }
+</script>

package/src/components/icon/index.vue

@@ -1,242 +1,242 @@
-<template>
-  <Wrapper
-    :cursor="cursor"
-    data-test-id="icon_wrapper"
-    :disabled="disabled"
-    :height="height ? height : size"
-    :width="width ? width : size"
-  >
-    <IconImage
-      :animation="animation"
-      :background-color="backgroundColor"
-      :color="color"
-      data-test-id="icon_image"
-      :disable-hover="disableHover"
-      :fill-type="fillType"
-      :hovered-color="hoveredColor"
-      :show-count="showCount"
-    >
-      <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,
-      type: Boolean,
-    },
-    name: {
-      required: true,
-      type: String,
-    },
-    color: {
-      required: false,
-      default: null,
-      type: String,
-    },
-    hoveredColor: {
-      required: false,
-      default: null,
-      type: String,
-    },
-    size: {
-      required: false,
-      default: '30px',
-      type: String,
-    },
-    width: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    height: {
-      type: String,
-      required: false,
-      default: '',
-    },
-    cursor: {
-      required: false,
-      default: null,
-      type: String,
-    },
-    isStriked: {
-      required: false,
-      default: false,
-      type: Boolean,
-    },
-    backgroundColor: {
-      required: false,
-      default: null,
-      type: String,
-    },
-    count: {
-      required: false,
-      default: 0,
-      type: Number,
-    },
-    animation: {
-      required: false,
-      default: 'none',
-      type: String,
-    },
-    fillType: {
-      required: false,
-      default: 'fill',
-      type: String,
-    },
-    disableHover: {
-      type: Boolean,
-      default: false,
-    },
-    showCount: {
-      type: Boolean,
-      default: false,
-    },
-  })
-
-  const Wrapper = styled('div', {
-    height: String,
-    width: String,
-    disabled: Boolean,
-    cursor: String,
-  })`
-    display: flex;
-    position: relative;
-    align-content: center;
-    justify-content: center;
-    width: ${(props) => props.width};
-    height: ${(props) => props.height};
-    min-width: ${(props) => props.width};
-    min-height: ${(props) => props.height};
-    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: 100%;
-    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 IconImageAttrs = {
-    color: String,
-    backgroundColor: String,
-    hoveredColor: String,
-    animation: String,
-    fillType: String,
-    disableHover: Boolean,
-    showCount: Boolean,
-  }
-  const IconImage = styled('div', IconImageAttrs)`
-    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')};
-      border-radius: ${(props) =>
-        props.showCount ? '8px 0 0  8px' : props.backgroundColor ? '8px' : '0'};
-    }
-    svg path:not(.fix, .isStrokePath) {
-      ${({ theme, color, fillType }) =>
-        color && `${fillType}: ${theme.colors[color] || color};`}
-    }
-    svg .isStroke {
-      ${({ theme, color }) =>
-        color && `stroke: ${theme.colors[color] || color};`}
-    }
-    svg .isFill {
-      ${({ theme, color }) => color && `fill: ${theme.colors[color] || color};`}
-    }
-    svg .isStrokePath:not(.fix) {
-      ${({ theme, color }) =>
-        color && `stroke: ${theme.colors[color] || color};`}
-    }
-    ${(props) =>
-      !props.disableHover &&
-      `
-     &:hover svg path:not(.fix, .isStrokePath) {
-      ${`${props.fillType}: ${
-        props.theme.colors[props.hoveredColor] || props.color
-      };`}
-     &:hover svg isStrokePath:not(.fix) {
-      ${`stroke: ${props.theme.colors[props.hoveredColor] || props.color};`}
-    }
-    &:hover + div {
-      background-color: ${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"
+    :height="height ? height : size"
+    :width="width ? width : size"
+  >
+    <IconImage
+      :animation="animation"
+      :background-color="backgroundColor"
+      :color="color"
+      data-test-id="icon_image"
+      :disable-hover="disableHover"
+      :fill-type="fillType"
+      :hovered-color="hoveredColor"
+      :show-count="showCount"
+    >
+      <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,
+      type: Boolean,
+    },
+    name: {
+      required: true,
+      type: String,
+    },
+    color: {
+      required: false,
+      default: null,
+      type: String,
+    },
+    hoveredColor: {
+      required: false,
+      default: null,
+      type: String,
+    },
+    size: {
+      required: false,
+      default: '30px',
+      type: String,
+    },
+    width: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    height: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    cursor: {
+      required: false,
+      default: null,
+      type: String,
+    },
+    isStriked: {
+      required: false,
+      default: false,
+      type: Boolean,
+    },
+    backgroundColor: {
+      required: false,
+      default: null,
+      type: String,
+    },
+    count: {
+      required: false,
+      default: 0,
+      type: Number,
+    },
+    animation: {
+      required: false,
+      default: 'none',
+      type: String,
+    },
+    fillType: {
+      required: false,
+      default: 'fill',
+      type: String,
+    },
+    disableHover: {
+      type: Boolean,
+      default: false,
+    },
+    showCount: {
+      type: Boolean,
+      default: false,
+    },
+  })
+
+  const Wrapper = styled('div', {
+    height: String,
+    width: String,
+    disabled: Boolean,
+    cursor: String,
+  })`
+    display: flex;
+    position: relative;
+    align-content: center;
+    justify-content: center;
+    width: ${(props) => props.width};
+    height: ${(props) => props.height};
+    min-width: ${(props) => props.width};
+    min-height: ${(props) => props.height};
+    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: 100%;
+    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 IconImageAttrs = {
+    color: String,
+    backgroundColor: String,
+    hoveredColor: String,
+    animation: String,
+    fillType: String,
+    disableHover: Boolean,
+    showCount: Boolean,
+  }
+  const IconImage = styled('div', IconImageAttrs)`
+    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')};
+      border-radius: ${(props) =>
+        props.showCount ? '8px 0 0  8px' : props.backgroundColor ? '8px' : '0'};
+    }
+    svg path:not(.fix, .isStrokePath) {
+      ${({ theme, color, fillType }) =>
+        color && `${fillType}: ${theme.colors[color] || color};`}
+    }
+    svg .isStroke {
+      ${({ theme, color }) =>
+        color && `stroke: ${theme.colors[color] || color};`}
+    }
+    svg .isFill {
+      ${({ theme, color }) => color && `fill: ${theme.colors[color] || color};`}
+    }
+    svg .isStrokePath:not(.fix) {
+      ${({ theme, color }) =>
+        color && `stroke: ${theme.colors[color] || color};`}
+    }
+    ${(props) =>
+      !props.disableHover &&
+      `
+     &:hover svg path:not(.fix, .isStrokePath) {
+      ${`${props.fillType}: ${
+        props.theme.colors[props.hoveredColor] || props.color
+      };`}
+     &:hover svg isStrokePath:not(.fix) {
+      ${`stroke: ${props.theme.colors[props.hoveredColor] || props.color};`}
+    }
+    &:hover + div {
+      background-color: ${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>