@eturnity/eturnity_reusable_components 7.12.6-EPDM-7951.3 → 7.12.7

package/src/components/icon/iconCollection.vue

@@ -1,68 +1,68 @@
-<template>
-  <wrapper>
-    <icon-wrapper v-for="iconItem in iconList" :key="iconItem.name">
-      <div>
-        <icon
-          :name="iconItem.name"
-          :size="size"
-          :hoveredColor="hoveredColor"
-          :color="color"
-        />
-      </div>
-      <h3>{{ iconItem.name }}</h3>
-    </icon-wrapper>
-  </wrapper>
-</template>
-
-<script>
-import icon 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: { icon, IconWrapper, Wrapper },
-  props: {
-    size: { required: false },
-    color: { required: false },
-    hoveredColor: { required: false }
-  },
-  data() {
-    return {
-      iconList: []
-    }
-  },
-
-  mounted() {
-    this.importAll(require.context('../../assets/svgIcons/', true, /\.svg$/))
-  },
-
-  methods: {
-    importAll(r) {
-      r.keys().forEach((key) =>
-        this.iconList.push({
-          pathLong: r(key),
-          pathShort: key,
-          name: key.replace('.svg', '').replace('./', '')
-        })
-      )
-    }
-  }
-}
-</script>
+<template>
+  <wrapper>
+    <icon-wrapper v-for="iconItem in iconList" :key="iconItem.name">
+      <div>
+        <icon
+          :name="iconItem.name"
+          :size="size"
+          :hoveredColor="hoveredColor"
+          :color="color"
+        />
+      </div>
+      <h3>{{ iconItem.name }}</h3>
+    </icon-wrapper>
+  </wrapper>
+</template>
+
+<script>
+import icon from './index.vue'
+import styled from 'vue-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: 'collection',
+  components: { icon, IconWrapper, Wrapper },
+  props: {
+    size: { required: false },
+    color: { required: false },
+    hoveredColor: { required: false }
+  },
+  data() {
+    return {
+      iconList: []
+    }
+  },
+
+  mounted() {
+    this.importAll(require.context('../../assets/svgIcons/', true, /\.svg$/))
+  },
+
+  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,122 +1,116 @@
-<template>
-  <wrapper :isDisabled="disabled" :size="size" :cursor="cursor">
-    <icon-image :size="size" :color="color" :hoveredColor="hoveredColor">
-      <i v-html="icon.html" />
-    </icon-image>
-    <striked-line
-      v-if="isStriked"
-      :color="color"
-      :disabled="disabled"
-      :hoveredColor="hoveredColor"
-    ></striked-line>
-  </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'
-const wrapperAttrs = { isDisabled: Boolean, size: String, cursor: String }
-const Wrapper = styled('div', wrapperAttrs)`
-  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.isDisabled ? 'not-allowed' : props.cursor)};
-  line-height: 0;
-`
-const strikedAttrs = {
-  isDisabled: Boolean,
-  color: String,
-  hoveredColor: String
-}
-const StrikedLine = styled('div', strikedAttrs)`
-  display: flex;
-  position: absolute;
-  bottom: 0;
-  left: 0;
-  align-content: center;
-  justify-content: center;
-  width: 143%;
-  height: 8%;
-  background-color: ${(props) =>
-    props.theme.colors[props.color] || props.color};
-  min-height: 0;
-  line-height: 0;
-  transform-origin: 0% 100%;
-  transform: rotate(-45deg);
-`
-const IconImageProps = { color: String, hoveredColor: String, size: String }
-const IconImage = styled('div', IconImageProps)`
-  width: 100%;
-  svg {
-    width: 100%;
-    height: 100%;
-  }
-  svg path {
-    ${(props) =>
-      props.color && `fill: ${props.theme.colors[props.color] || props.color};`}
-  }
-  &:hover > svg path {
-    ${(props) => props.hoveredColor && `fill: ${props.hoveredColor};`}
-  }
-  &:hover + div {
-    background-color: ${(props) => props.hoveredColor};
-  }
-`
-
-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
-  }
-})
-
-const icon = reactive({ html: '' })
-
-const handleLoadAsyncIcon = async (iconName = props.name) => {
-  const iconPath = `../../assets/svgIcons/${props.name.toLowerCase()}.svg?raw`
-  const module = await import(/* @vite-ignore */ iconPath)
-
-  icon.html = module.default
-}
-
-onMounted(() => handleLoadAsyncIcon())
-
-watch(() => props.name, handleLoadAsyncIcon)
-</script>
+<template>
+  <Wrapper :isDisabled="disabled" :size="size" :cursor="cursor">
+    <icon-image
+      :disabled="disabled"
+      :size="size"
+      :color="color"
+      :hoveredColor="hoveredColor"
+      v-html="
+        require(`!html-loader!./../../assets/svgIcons/${name.toLowerCase()}.svg`)
+      "
+    ></icon-image>
+    <striked-line v-if="isStriked" :color="color" :disabled="disabled" :hoveredColor="hoveredColor"></striked-line>
+  </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
+//   cursor="default"
+//   isStriked = "true"
+// />
+
+import styled from 'vue-styled-components'
+
+const wrapperAttrs = { isDisabled: Boolean, size: String, cursor: String }
+const Wrapper = styled('div', wrapperAttrs)`
+  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.isDisabled ? 'not-allowed' : props.cursor)};
+  line-height: 0;
+`
+const strikedAttrs = { isDisabled: Boolean, color: String, hoveredColor: String }
+const strikedLine = styled('div', strikedAttrs)`
+  display: flex;
+  position: absolute;
+  bottom:0;
+  left:0;
+  align-content: center;
+  justify-content: center;
+  width: 143%;
+  height:8%;
+  background-color: ${(props)=>props.theme.colors[props.color] || props.color};
+  min-height: 0;
+  line-height: 0;
+  transform-origin: 0% 100%;
+  transform: rotate(-45deg);
+`
+const IconImageProps = { color: String, hoveredColor: String, size: String }
+const IconImage = styled('div', IconImageProps)`
+  width: 100%;
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+  svg path {
+    ${(props) =>
+      props.color && `fill: ${props.theme.colors[props.color] || props.color};`}
+  }
+  &:hover > svg path {
+    ${(props) => props.hoveredColor && `fill: ${props.hoveredColor};`}
+  }
+  &:hover + div {
+    background-color: ${(props)=>props.hoveredColor};
+  }
+`
+
+export default {
+  name: 'icon',
+  components: {
+    IconImage,
+    Wrapper,
+    strikedLine
+  },
+  props: {
+    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
+    }
+  },
+  data() {
+    return {}
+  }
+}
+</script>