@redseed/redseed-ui-vue3 2.25.0 → 2.25.2

package/package.json

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

package/src/components/FormField/FormFieldUploaderWrapper.vue

@@ -9,6 +9,10 @@ defineOptions({
 })
 
 const props = defineProps({
+    hasMedia: {
+        type: Boolean,
+        default: false,
+    },
     removable: {
         type: Boolean,
         default: false,
@@ -42,23 +46,23 @@ function setState(state) {
     })
 }
 
-function setStateDefault() {
+function setDefault() {
     setState('default')
 }
 
-function setStateUploading() {
+function setUploading() {
     setState('uploading')
 }
 
-function setStateProcessing() {
+function setProcessing() {
     setState('processing')
 }
 
-function setStateError() {
+function setError() {
     setState('error')
 }
 
-function setStateSuccess() {
+function setSuccess() {
     setState('success')
 }
 
@@ -83,8 +87,13 @@ const uploaderStateIconClass = computed(() => [
     }
 ])
 
+const showRemoveAction = computed(() => {
+    return (props.hasMedia || stateSuccess.value)
+        && props.removable
+})
+
 function removeAction() {
-    setStateDefault()
+    setDefault()
     emit('remove')
 }
 </script>
@@ -110,7 +119,7 @@ function removeAction() {
     <div :class="uploaderContainerClass">
         <div :class="uploaderContentClass">
             <div :class="uploaderStateIconClass">
-                <slot name="state-icon-default" v-if="stateDefault">
+                <slot name="state-icon-default" v-if="stateDefault && !hasMedia">
                     <PlusIcon />
                 </slot>
                 <slot name="state-icon-uploading" v-if="stateUploading">
@@ -122,7 +131,7 @@ function removeAction() {
                 <slot name="state-icon-error" v-if="stateError">
                     <ExclamationCircleIcon />
                 </slot>
-                <slot name="state-icon-success" v-if="stateSuccess">
+                <slot name="state-icon-success" v-if="stateSuccess || hasMedia">
                     <DocumentIcon />
                 </slot>
             </div>
@@ -140,7 +149,9 @@ function removeAction() {
                 <slot name="state-text-error" v-if="stateError">
                     Something went wrong
                 </slot>
-                <slot name="state-text-success" v-if="stateSuccess"></slot>
+                <slot name="state-text-success" v-if="stateSuccess">
+                    Successfully uploaded
+                </slot>
             </div>
 
             <div v-if="stateSuccess && $slots['state-file-size']"
@@ -153,16 +164,16 @@ function removeAction() {
                 class="rsui-form-field-uploader__uploader"
             >
                 <slot name="uploader"
-                    :setStateDefault="setStateDefault"
-                    :setStateUploading="setStateUploading"
-                    :setStateProcessing="setStateProcessing"
-                    :setStateError="setStateError"
-                    :setStateSuccess="setStateSuccess"
+                    :setDefault="setDefault"
+                    :setUploading="setUploading"
+                    :setProcessing="setProcessing"
+                    :setError="setError"
+                    :setSuccess="setSuccess"
                 ></slot>
             </div>
 
         </div>
-        <div v-if="stateSuccess && removable"
+        <div v-if="showRemoveAction"
             class="rsui-form-field-uploader__action"
         >
             <div class="rsui-form-field-uploader__action-icon"
@@ -183,18 +194,15 @@ function removeAction() {
         @apply relative select-none;
         @apply rounded-md border border-rsui-grey-300 border-dashed;
         @apply flex flex-nowrap justify-center items-center gap-4;
+        @apply px-4 py-2.5;
         &--success {
-            @apply border-rsui-light border-solid pr-4;
+            @apply border-rsui-light border-solid;
         }
     }
 
     &__content {
         @apply relative flex flex-nowrap justify-center items-center gap-4;
-        @apply px-4 py-2.5 text-rsui-default;
-
-        &--success {
-            @apply pr-0;
-        }
+        @apply text-rsui-default;
     }
 
     &__state-icon {