@eturnity/eturnity_reusable_components 7.48.1-EPDM-10679.1 → 7.48.1-EPDM-12680.14

package/src/components/icon/iconCollection.vue

@@ -1,82 +1,82 @@
-<template>
-  <Wrapper>
-    <IconWrapper v-for="iconItem in iconList" :key="iconItem.name">
-      <div>
-        <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 },
-      color: { required: false },
-      hoveredColor: { required: false },
-    },
-    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>
+        <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 },
+      color: { required: false },
+      hoveredColor: { required: false },
+    },
+    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,140 +1,141 @@
-<template>
-  <Wrapper :cursor="cursor" :disabled="disabled" :size="size">
-    <IconImage
-      :animation="animation"
-      :background-color="backgroundColor"
-      :color="color"
-      :hovered-color="hoveredColor"
-    >
-      <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 { 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,
-    },
-    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 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())
-  }
-
-  onMounted(() => loadSvg())
-
-  watch(() => props.name, loadSvg)
-</script>
+<template>
+  <Wrapper :cursor="cursor" :disabled="disabled" :size="size">
+    <IconImage
+      :animation="animation"
+      :background-color="backgroundColor"
+      :color="color"
+      :hovered-color="hoveredColor"
+    >
+      <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 { 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,
+    },
+    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 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())
+  }
+
+  onMounted(() => loadSvg())
+
+  watch(() => props.name, loadSvg)
+</script>