@redseed/redseed-ui-vue3 2.9.2 → 2.9.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@redseed/redseed-ui-vue3",
-  "version": "2.9.2",
+  "version": "2.9.3",
   "description": "RedSeed UI Vue 3 components",
   "main": "index.js",
   "scripts": {

package/src/components/Loader/Loader.vue

@@ -1,56 +1,47 @@
-<script>
-import { ref, computed, defineComponent } from 'vue'
-import { useLottie } from '../../helpers/Lottie'
+<script setup>
+import { ref, computed } from 'vue'
 import LottieCubes from './LottieCubes.json'
+import { useLottie } from '../../helpers/Lottie'
 
-export default defineComponent({
-    props:{
-        primary: {
-            type: Boolean,
-            default: false,
-        },
-        secondary: {
-            type: Boolean,
-            default: false,
-        },
-        tertiary: {
-            type: Boolean,
-            default: false,
-        },
-        danger: {
-            type: Boolean,
-            default: false,
-        },
-        white: {
-            type: Boolean,
-            default: false,
-        },
+const props = defineProps({
+    primary: {
+        type: Boolean,
+        default: false,
     },
+    secondary: {
+        type: Boolean,
+        default: false,
+    },
+    tertiary: {
+        type: Boolean,
+        default: false,
+    },
+    danger: {
+        type: Boolean,
+        default: false,
+    },
+    white: {
+        type: Boolean,
+        default: false,
+    },
+})
 
-    setup(props) {
-        const defaultColor = computed(() => !props.secondary && !props.tertiary && !props.danger && !props.white)
-
-        const loaderClass = computed(() => [
-            'rsui-loader',
-            {
-                'rsui-loader--primary': props.primary || defaultColor.value,
-                'rsui-loader--secondary': props.secondary,
-                'rsui-loader--tertiary': props.tertiary,
-                'rsui-loader--danger': props.danger,
-                'rsui-loader--white': props.white,
-            }
-        ])
+const defaultColor = computed(() => !props.secondary && !props.tertiary && !props.danger && !props.white)
 
-        const loaderElement = ref(null)
+const loaderClass = computed(() => [
+    'rsui-loader',
+    {
+        'rsui-loader--primary': props.primary || defaultColor.value,
+        'rsui-loader--secondary': props.secondary,
+        'rsui-loader--tertiary': props.tertiary,
+        'rsui-loader--danger': props.danger,
+        'rsui-loader--white': props.white,
+    }
+])
 
-        useLottie(loaderElement, LottieCubes)
+const loaderElement = ref(null)
 
-        return {
-            loaderClass,
-            loaderElement,
-        }
-    }
-})
+useLottie(loaderElement, LottieCubes)
 </script>
 <template>
 <div ref="loaderElement"

package/src/helpers/Lottie.js

@@ -1,5 +1,4 @@
 import { ref, watchEffect } from 'vue'
-import Lottie from 'lottie-web'
 
 export function useLottie(elementRef, animationData = null) {
 
@@ -15,13 +14,14 @@ export function useLottie(elementRef, animationData = null) {
     function loadLottie() {
         if (!elementRef.value) return
         if (!animationData) return
+        if (!window.lottie) return
 
         if (lottieAnimation.value) {
             lottieAnimation.value.destroy()
             lottieAnimation.value = null
         }
 
-        lottieAnimation.value = Lottie.loadAnimation({
+        lottieAnimation.value = window.lottie.loadAnimation({
             container: elementRef.value,
             renderer: 'svg',
             loop: true,