@eturnity/eturnity_reusable_components 7.12.6-EPDM-7951.4 → 7.12.6-EPDM-7951.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.12.6-EPDM-7951.4",
+  "version": "7.12.6-EPDM-7951.6",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/components/icon/index.vue

@@ -1,14 +1,9 @@
 <template>
-  <wrapper :isDisabled="disabled" :size="size" :cursor="cursor">
-    <icon-image :size="size" :color="color" :hoveredColor="hoveredColor">
-      <i v-html="iconTest.html" />
+  <wrapper>
+    <icon-image>
+      <i v-html="icon.html" />
     </icon-image>
-    <striked-line
-      v-if="isStriked"
-      :color="color"
-      :disabled="disabled"
-      :hoveredColor="hoveredColor"
-    ></striked-line>
+    <striked-line v-if="isStriked"></striked-line>
   </wrapper>
 </template>
 
@@ -26,17 +21,45 @@
 
 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)`
+
+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 Wrapper = styled('div')`
   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)};
+  width: ${props.size};
+  height: ${props.size};
+  min-width: ${props.size};
+  min-height: ${props.size};
+  cursor: ${props.disabled ? 'not-allowed' : props.cursor};
   line-height: 0;
 `
 const strikedAttrs = {
@@ -44,7 +67,7 @@ const strikedAttrs = {
   color: String,
   hoveredColor: String
 }
-const StrikedLine = styled('div', strikedAttrs)`
+const StrikedLine = styled.div`
   display: flex;
   position: absolute;
   bottom: 0;
@@ -53,81 +76,48 @@ const StrikedLine = styled('div', strikedAttrs)`
   justify-content: center;
   width: 143%;
   height: 8%;
-  background-color: ${(props) =>
-    props.theme.colors[props.color] || props.color};
+  background-color: ${({ theme }) => 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)`
+const IconImage = styled.div`
   width: 100%;
   svg {
     width: 100%;
     height: 100%;
   }
   svg path {
-    ${(props) =>
-      props.color && `fill: ${props.theme.colors[props.color] || props.color};`}
+    ${({ theme }) =>
+      props.color && `fill: ${theme.colors[props.color] || props.color};`}
   }
   &:hover > svg path {
-    ${(props) => props.hoveredColor && `fill: ${props.hoveredColor};`}
+    ${props.hoveredColor && `fill: ${props.hoveredColor};`}
   }
   &:hover + div {
-    background-color: ${(props) => props.hoveredColor};
+    background-color: ${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 iconTest = reactive({ html: '' })
-const iconName = ''
 const loadSvg = async (fileName = props.name) => {
-  fileName = fileName.toLowerCase()
-  const url = new URL(`../../assets/svgIcons/${fileName}.svg`, import.meta.url)
-    .href
-  const fetchResponse = await fetch(url)
-  iconTest.html = await fetchResponse.text()
-}
-
-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
+  const _fileName = fileName.toLowerCase()
+  // We need to use "new URL" to load dynamic assets (https://vitejs.dev/guide/assets.html#new-url-url-import-meta-url)
+  const fetchUrl = new URL(
+    `../../assets/svgIcons/${_fileName}.svg`,
+    import.meta.url
+  ).href
+  try {
+    const fetchResponse = await fetch(fetchUrl)
+    icon.html = await fetchResponse.text()
+  } catch (error) {
+    console.error(`Failed to load ${props.name}.svg`)
+  }
 }
 
-onMounted(() => handleLoadAsyncIcon())
 onMounted(() => loadSvg())
 
-watch(() => props.name, handleLoadAsyncIcon)
+watch(() => props.name, loadSvg)
 </script>

package/src/components/inputs/select/index.vue

@@ -721,9 +721,9 @@ export default {
     },
     isSelectDropdownShown() {
       return (
-        this.isSearchable &&
         this.isDropdownOpen &&
-        this.dropdownPosition.left !== null
+        this.dropdownPosition.left !== null &&
+        (!this.isSearchable || this.isSearchable)
       )
     }
   },