@eturnity/eturnity_reusable_components 7.24.0 → 7.24.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@eturnity/eturnity_reusable_components",
-  "version": "7.24.0",
+  "version": "7.24.1",
   "private": false,
   "scripts": {
     "dev": "vue-cli-service serve",

package/src/assets/svgIcons/save.svg

@@ -0,0 +1,3 @@
+<svg width="14" height="14" viewBox="0 0 14 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10.8889 0H1.55556C0.692222 0 0 0.7 0 1.55556V12.4444C0 13.3 0.692222 14 1.55556 14H12.4444C13.3 14 14 13.3 14 12.4444V3.11111L10.8889 0ZM7 12.4444C5.70889 12.4444 4.66667 11.4022 4.66667 10.1111C4.66667 8.82 5.70889 7.77778 7 7.77778C8.29111 7.77778 9.33333 8.82 9.33333 10.1111C9.33333 11.4022 8.29111 12.4444 7 12.4444ZM9.33333 4.66667H1.55556V1.55556H9.33333V4.66667Z" fill="#263238"/>
+</svg>

package/src/components/icon/index.vue

@@ -4,6 +4,7 @@
       :color="color"
       :background-color="backgroundColor"
       :hovered-color="hoveredColor"
+      :animation="animation"
     >
       <i v-html="icon.html" />
     </icon-image>
@@ -56,6 +57,10 @@ const props = defineProps({
   backgroundColor: {
     required: false,
     default: null
+  },
+  animation: {
+    required: false,
+    default: 'none'
   }
 })
 
@@ -94,8 +99,10 @@ const StrikedLine = styled('div', { color: String })`
 const IconImage = styled('div', {
   color: String,
   backgroundColor: String,
-  hoveredColor: String
+  hoveredColor: String,
+  animation: String
 })`
+  animation: ${(props) => props.animation};
   width: 100%;
   svg {
     width: 100%;
@@ -113,6 +120,11 @@ const IconImage = styled('div', {
   &:hover + div {
     background-color: ${(props) => props.hoveredColor};
   }
+  @keyframes fade {
+    50% {
+      opacity: 0.3;
+    }
+  }
 `
 
 const icon = reactive({ html: '' })

package/src/components/iconWrapper/index.vue

@@ -17,6 +17,7 @@
       :color="iconColor"
       :hoveredColor="hoveredIconColor"
       :isStriked="isStriked"
+      :animation="isLoading ? 'fade 3s infinite' : 'none'"
     />
 
     <caret v-if="hasCaret">
@@ -44,6 +45,7 @@
 
 import styled from 'vue3-styled-components'
 import icon from '../icon'
+
 const wrapperAttrs = {
   color: String,
   isHovered: Boolean,
@@ -147,6 +149,10 @@ export default {
     isStriked: {
       required: false,
       default: false
+    },
+    isLoading: {
+      required: false,
+      default: false
     }
   }
 }