@redseed/redseed-ui-vue3 2.11.13 → 2.11.15

package/package.json

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

package/src/components/Image/Image.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed } from 'vue'
+import { ref, computed, watch } from 'vue'
 import { useImage } from '@vueuse/core'
 import { PhotoIcon } from '@heroicons/vue/24/outline'
 
@@ -24,11 +24,15 @@ const props = defineProps({
         type: Boolean,
         default: false,
     },
+    alt: {
+        type: String,
+        default: '',
+    },
 })
 
-const large = computed(() => props.largeUrl ?? props.originalUrl)
-const medium = computed(() => props.mediumUrl ?? props.originalUrl)
-const small = computed(() => props.smallUrl ?? props.originalUrl)
+const large = computed(() => props.largeUrl || props.originalUrl)
+const medium = computed(() => props.mediumUrl || props.originalUrl)
+const small = computed(() => props.smallUrl || props.originalUrl)
 
 const originalOptions = computed(() => ({
     src: props.originalUrl,
@@ -51,21 +55,53 @@ const largeImage = ref(useImage(largeOptions.value))
 const mediumImage = ref(useImage(mediumOptions.value))
 const smallImage = ref(useImage(smallOptions.value))
 
+const isEmpty = computed(() => !props.originalUrl)
+
 const isLoading = computed(() => {
+    if (isEmpty.value) return false
+
     return originalImage.value.isLoading
         || largeImage.value.isLoading
         || mediumImage.value.isLoading
         || smallImage.value.isLoading
 })
 
+const isReady = computed(() => {
+    if (isEmpty.value) return false
+
+    return originalImage.value.isReady
+        && largeImage.value.isReady
+        && mediumImage.value.isReady
+        && smallImage.value.isReady
+})
+
 const error = computed(() => {
+    if (isEmpty.value) return false
+
     return originalImage.value.error
+        || largeImage.value.error
+        || mediumImage.value.error
+        || smallImage.value.error
 })
 
+const emit = defineEmits(['loading', 'error', 'ready'])
+
+watch(isLoading, () => {
+    if (isLoading.value) emit('loading', isLoading.value)
+}, { immediate: true, flush: 'post' })
+
+watch(error, () => {
+    if (error.value) emit('error', error.value)
+}, { immediate: true, flush: 'post' })
+
+watch(isReady, () => {
+    if (isReady.value) emit('ready', isReady.value)
+}, { immediate: true, flush: 'post' })
+
 const sources = computed(() => {
     return [
         {
-            media: '(min-width:1024px)',
+            media: '(min-width:1280px)',
             srcset: large.value
         },
         {
@@ -83,13 +119,15 @@ const imageClass = computed(() => [
     'rsui-image',
     {
         'rsui-image--rounded': props.rounded,
+        'rsui-image--empty': isEmpty.value,
+        'rsui-image--error': error.value,
     }
 
 ])
 </script>
 <template>
 <div :class="imageClass">
-    <div v-if="!originalUrl"
+    <div v-if="isEmpty"
         class="rsui-image__empty"
     >
         <slot name="empty-icon">
@@ -99,9 +137,7 @@ const imageClass = computed(() => [
     <div v-else-if="isLoading"
         class="rsui-image__message"
     >
-        <slot name="loading">
-            Loading...
-        </slot>
+        <slot name="loading"></slot>
     </div>
     <div v-else-if="error"
         class="rsui-image__message"
@@ -116,16 +152,22 @@ const imageClass = computed(() => [
             :media="media"
             :srcset="srcset"
         >
-        <img :src="originalUrl">
+        <img :src="originalUrl" :alt="alt">
     </picture>
 </div>
 </template>
 <style lang="scss" scoped>
 .rsui-image {
-    @apply w-full h-full flex items-center justify-center bg-rsui-grey-100 overflow-hidden;
+    @apply w-full h-full flex items-center justify-center overflow-hidden;
     &--rounded {
         @apply rounded-lg;
     }
+    &--error {
+        @apply bg-rsui-grey-100;
+    }
+    &--empty {
+        @apply bg-rsui-grey-100;
+    }
     &__empty {
         @apply flex items-center justify-center text-rsui-light;
     }