@eturnity/eturnity_reusable_components 7.22.4 → 7.24.1

package/package.json

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

package/src/assets/svgIcons/bexio.svg

@@ -0,0 +1,4 @@
+<svg width="15" height="9" viewBox="0 0 15 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M14.462 8.46H12.894C12.7848 8.46 12.697 8.4327 12.6307 8.37809C12.5683 8.32349 12.5176 8.26108 12.4786 8.19087L10.5186 4.94378C10.4874 5.04129 10.4504 5.12514 10.4075 5.19535L8.52943 8.19087C8.48263 8.25718 8.42802 8.31958 8.36562 8.37809C8.30711 8.4327 8.2291 8.46 8.13159 8.46H6.66309L9.47138 4.10714L6.77425 0H8.34221C8.45143 0 8.52943 0.0156017 8.57624 0.0468051C8.62694 0.0741079 8.67375 0.120913 8.71665 0.18722L10.6415 3.28805C10.6805 3.19054 10.7273 3.09303 10.7819 2.99552L12.5488 0.216473C12.5917 0.142365 12.6385 0.0877595 12.6892 0.052656C12.7399 0.017552 12.8043 0 12.8823 0H14.3859L11.6654 4.04278L14.462 8.46Z" fill="#263238"/>
+<path d="M3.16519 7.23137C3.45772 7.23137 3.70344 7.19627 3.90237 7.12606C4.10129 7.05585 4.25925 6.96224 4.37627 6.84523C4.49718 6.72822 4.58299 6.5917 4.63369 6.43569C4.6883 6.27967 4.7156 6.1139 4.7156 5.93838C4.7156 5.75506 4.68635 5.59124 4.62784 5.44693C4.56934 5.29871 4.47768 5.1739 4.35286 5.07249C4.22805 4.96718 4.06618 4.88722 3.86726 4.83261C3.67224 4.77801 3.43627 4.75071 3.15934 4.75071H1.57382V7.23137H3.16519ZM1.57382 1.21693V3.66249H2.82585C3.36411 3.66249 3.76975 3.56498 4.04278 3.36996C4.31971 3.17494 4.45817 2.86486 4.45817 2.43971C4.45817 1.99896 4.33336 1.68498 4.08373 1.49776C3.83411 1.31054 3.44407 1.21693 2.91361 1.21693H1.57382ZM2.91361 0C3.46747 0 3.94137 0.0526557 4.33531 0.157967C4.72925 0.263278 5.05104 0.413444 5.30066 0.608465C5.55419 0.803486 5.73946 1.03946 5.85647 1.31639C5.97349 1.59332 6.03199 1.90535 6.03199 2.25249C6.03199 2.45141 6.00274 2.64253 5.94423 2.82585C5.88573 3.00527 5.79407 3.17494 5.66925 3.33485C5.54834 3.49087 5.39232 3.63324 5.2012 3.76195C5.01398 3.89066 4.78971 3.99988 4.52838 4.08959C5.69071 4.35091 6.27187 4.97888 6.27187 5.97349C6.27187 6.33232 6.20361 6.66386 6.0671 6.96809C5.93058 7.27232 5.73166 7.5356 5.47033 7.75793C5.209 7.97635 4.88722 8.14797 4.50498 8.27278C4.12274 8.39759 3.68589 8.46 3.19444 8.46H0V0H2.91361Z" fill="#263238"/>
+</svg>

package/src/assets/svgIcons/data_transfer.svg

@@ -0,0 +1,3 @@
+<svg width="18" height="18" viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M16 0H2C0.89 0 0 0.9 0 2V16C0 17.1 0.89 18 2 18H6V16H2V2H16V16H12V18H16C17.1 18 18 17.1 18 16V2C18 0.9 17.11 0 16 0ZM9 6L5 10H8V18H10V10H13L9 6Z" fill="#263238"/>
+</svg>

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
     }
   }
 }