@redseed/redseed-ui-vue3 2.24.2 → 2.25.0

package/index.js

@@ -1,6 +1,9 @@
 import _ from 'lodash'
 window._ = _
 
+import lottie from 'lottie-web'
+window.lottie = lottie
+
 export * from './src/components/Avatar'
 export * from './src/components/Badge'
 export * from './src/components/Breadcrumbs'

package/package.json

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

package/src/components/FormField/FormFieldUploaderWrapper.vue

@@ -0,0 +1,240 @@
+<script setup>
+import { ref, computed } from 'vue'
+import FormFieldSlot from './FormFieldSlot.vue'
+import Loader from '../Loader/Loader.vue'
+import { PlusIcon, DocumentIcon, ExclamationCircleIcon, XMarkIcon } from '@heroicons/vue/24/outline'
+
+defineOptions({
+    inheritAttrs: false,
+})
+
+const props = defineProps({
+    removable: {
+        type: Boolean,
+        default: false,
+    },
+})
+
+const emit = defineEmits(['remove'])
+
+const stateDefault = computed(() => {
+    return !stateUploading.value
+        && !stateProcessing.value
+        && !stateError.value
+        && !stateSuccess.value
+})
+
+const stateUploading = ref(false)
+const stateProcessing = ref(false)
+const stateError = ref(false)
+const stateSuccess = ref(false)
+
+const states = {
+    uploading: stateUploading,
+    processing: stateProcessing,
+    error: stateError,
+    success: stateSuccess,
+}
+
+function setState(state) {
+    Object.keys(states).forEach(key => {
+        states[key].value = key === state
+    })
+}
+
+function setStateDefault() {
+    setState('default')
+}
+
+function setStateUploading() {
+    setState('uploading')
+}
+
+function setStateProcessing() {
+    setState('processing')
+}
+
+function setStateError() {
+    setState('error')
+}
+
+function setStateSuccess() {
+    setState('success')
+}
+
+const uploaderContainerClass = computed(() => [
+    'rsui-form-field-uploader__container',
+    {
+        'rsui-form-field-uploader__container--success': stateSuccess.value,
+    }
+])
+
+const uploaderContentClass = computed(() => [
+    'rsui-form-field-uploader__content',
+    {
+        'rsui-form-field-uploader__content--success': stateSuccess.value,
+    }
+])
+
+const uploaderStateIconClass = computed(() => [
+    'rsui-form-field-uploader__state-icon',
+    {
+        'rsui-form-field-uploader__state-icon--success': stateSuccess.value,
+    }
+])
+
+function removeAction() {
+    setStateDefault()
+    emit('remove')
+}
+</script>
+<template>
+<FormFieldSlot
+    :id="$attrs.id"
+    :class="[$attrs.class, 'rsui-form-field-uploader']"
+    :required="$attrs.required"
+    :compact="$attrs.compact"
+>
+    <template #label v-if="$slots.label">
+        <slot name="label"></slot>
+    </template>
+
+    <template #help v-if="$slots.help">
+        <slot name="help"></slot>
+    </template>
+
+    <template #error v-if="$slots.error">
+        <slot name="error"></slot>
+    </template>
+
+    <div :class="uploaderContainerClass">
+        <div :class="uploaderContentClass">
+            <div :class="uploaderStateIconClass">
+                <slot name="state-icon-default" v-if="stateDefault">
+                    <PlusIcon />
+                </slot>
+                <slot name="state-icon-uploading" v-if="stateUploading">
+                    <Loader />
+                </slot>
+                <slot name="state-icon-processing" v-if="stateProcessing">
+                    <Loader />
+                </slot>
+                <slot name="state-icon-error" v-if="stateError">
+                    <ExclamationCircleIcon />
+                </slot>
+                <slot name="state-icon-success" v-if="stateSuccess">
+                    <DocumentIcon />
+                </slot>
+            </div>
+
+            <div class="rsui-form-field-uploader__state-text">
+                <slot name="state-text-default" v-if="stateDefault">
+                    Media
+                </slot>
+                <slot name="state-text-uploading" v-if="stateUploading">
+                    Uploading...
+                </slot>
+                <slot name="state-text-processing" v-if="stateProcessing">
+                    Processing upload...
+                </slot>
+                <slot name="state-text-error" v-if="stateError">
+                    Something went wrong
+                </slot>
+                <slot name="state-text-success" v-if="stateSuccess"></slot>
+            </div>
+
+            <div v-if="stateSuccess && $slots['state-file-size']"
+                class="rsui-form-field-uploader__state-file-size"
+            >
+                <slot name="state-file-size"></slot>
+            </div>
+
+            <div v-if="!stateSuccess"
+                class="rsui-form-field-uploader__uploader"
+            >
+                <slot name="uploader"
+                    :setStateDefault="setStateDefault"
+                    :setStateUploading="setStateUploading"
+                    :setStateProcessing="setStateProcessing"
+                    :setStateError="setStateError"
+                    :setStateSuccess="setStateSuccess"
+                ></slot>
+            </div>
+
+        </div>
+        <div v-if="stateSuccess && removable"
+            class="rsui-form-field-uploader__action"
+        >
+            <div class="rsui-form-field-uploader__action-icon"
+                @click="removeAction"
+            >
+                <slot name="state-action">
+                    <XMarkIcon />
+                </slot>
+            </div>
+        </div>
+    </div>
+</FormFieldSlot>
+</template>
+<style lang="scss" scoped>
+.rsui-form-field-uploader {
+    &__container {
+        @apply w-fit max-w-80 bg-rsui-grey-100;
+        @apply relative select-none;
+        @apply rounded-md border border-rsui-grey-300 border-dashed;
+        @apply flex flex-nowrap justify-center items-center gap-4;
+        &--success {
+            @apply border-rsui-light border-solid pr-4;
+        }
+    }
+
+    &__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;
+        }
+    }
+
+    &__state-icon {
+        @apply shrink-0 size-6;
+
+        &--success {
+            @apply text-rsui-light;
+        }
+
+        :deep(svg) {
+            @apply size-6 stroke-2;
+        }
+    }
+
+    &__state-text {
+        @apply line-clamp-2;
+    }
+
+    &__state-file-size {
+        @apply shrink-0 text-rsui-medium;
+    }
+
+    &__uploader {
+        @apply size-full absolute inset-0 z-1 cursor-pointer;
+
+        :deep(*) {
+            @apply size-full cursor-pointer;
+        }
+    }
+
+    &__action {
+        @apply shrink-0 size-6;
+    }
+
+    &__action-icon {
+        @apply size-6 cursor-pointer text-rsui-light;
+
+        :deep(svg) {
+            @apply size-6 stroke-2;
+        }
+    }
+}
+</style>

package/src/components/FormField/index.js

@@ -11,7 +11,7 @@ import FormFieldSlot from './FormFieldSlot.vue'
 import FormFieldText from './FormFieldText.vue'
 import FormFieldTextarea from './FormFieldTextarea.vue'
 import FormFieldTextSuffix from './FormFieldTextSuffix.vue'
-
+import FormFieldUploaderWrapper from './FormFieldUploaderWrapper.vue'
 export {
     FormFieldCheckbox,
     FormFieldEmail,
@@ -26,4 +26,5 @@ export {
     FormFieldText,
     FormFieldTextarea,
     FormFieldTextSuffix,
-}
+    FormFieldUploaderWrapper,
+}

package/src/components/Loader/Loader.vue

@@ -31,7 +31,7 @@ const defaultColor = computed(() => !props.secondary && !props.tertiary && !prop
 const loaderClass = computed(() => [
     'rsui-loader',
     {
-        'rsui-loader--primary': props.primary || defaultColor.value,
+        'rsui-loader--primary': props.primary,
         'rsui-loader--secondary': props.secondary,
         'rsui-loader--tertiary': props.tertiary,
         'rsui-loader--danger': props.danger,
@@ -51,6 +51,9 @@ useLottie(loaderElement, LottieCubes)
 <style lang="scss" scoped>
 .rsui-loader {
     @apply max-w-24 max-h-24 min-w-3 min-h-3 transition;
+    :deep(path) {
+        @apply fill-rsui-default;
+    }
     &--primary {
         :deep(path) {
             @apply fill-primary;