@rypen-dev/shared-components 8.1.1 → 8.1.2

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@rypen-dev/shared-components",
 	"description": "Shared styles and Vuejs ui components for Rypen projects. Starting with version 8, this package is built with Vite 7 and Vue 3.",
-	"version": "8.1.1",
+	"version": "8.1.2",
 	"type": "module",
 	"main": "./dist/index.js",
 	"scripts": {

package/scss/partials/_forms.scss

@@ -1870,6 +1870,25 @@ body.hover-capable {
         }
     }
 
+    &.tiny {
+        .drop-target {
+            padding: 1rem;
+
+            i {
+                font-size: 1.5rem;
+                margin-top: 0.25rem;
+            }
+
+            .main-label {
+                font-size: 0.875rem;
+            }
+
+            &.over {
+                outline-offset: -15px;
+            }
+        }
+    }
+
     &.no-margin {
         margin-bottom: 0 !important;
     }

package/src/components/FileDropzone.vue

@@ -1,20 +1,20 @@
 <template>
     <div class="file-upload-drop-wrapper">
-        <div v-if="internalImage" class="current-image">
+        <div v-if="showImage && internalImage" class="current-image">
             <img :src="internalImage" />
             <a v-if="showRemove" class="color-callout remove" title="Remove image" @click="removeImage"><i class="fa-solid fa-xmark"></i></a>
         </div>
-        <div class="file-upload-drop">
+        <div class="file-upload-drop" :class="computedCssClass">
             <div class="drop-target" :class="{over: isOver}" ref="droptargetref">
                 <div><i class="fa-solid fa-download"></i></div>
-                <input type="file" :id="id" class="show-for-sr" :disabled="disabled || updating" @change="uploadImage" accept="image/*" ref="fileuploadref" />
-                <label :for="id" class="main-label"><strong>Choose a banner image</strong> or drag it here</label>
+                <input type="file" :id="id" class="show-for-sr" :disabled="disabled || updating" @change="uploadImage" :accept="accept" ref="fileuploadref" />
+                <label :for="id" class="main-label"><strong>{{ chooseText }}</strong> {{ dragDropCapable ? dragText : null }}</label>
             </div>
         </div>
     </div>
 </template>
 <script setup>
-    import { ref, onBeforeMount, onMounted } from 'vue';
+    import { ref, computed, onBeforeMount, onMounted } from 'vue';
 
     const props = defineProps({
         imageBasePath: {
@@ -36,6 +36,23 @@
             type: Boolean,
             default: false,
         },
+        showImage: {
+            type: Boolean,
+            default: true,
+        },
+        cssClass: String,
+        accept: {
+            type: String,
+            default: 'image/*',
+        },
+        chooseText: {
+            type: String,
+            default: 'Choose an file',
+        },
+        dragText: {
+            type: String,
+            default: 'or drag it here',
+        },
     });
     const emit = defineEmits(['change', 'remove']);
 
@@ -47,6 +64,18 @@
     const droptargetref = ref(null);
     const fileuploadref = ref(null);
 
+    const computedCssClass = computed(() => {
+        let newCssClass = '';
+        if (!showImage) {
+            newCssClass += 'no-image';
+        }
+        if (cssClass) {
+            newCssClass += ' ' + cssClass;
+        }
+
+        return newCssClass;
+    });
+
     onBeforeMount(() => {
         if (props.image && props.image.ImageUrl) {
             // already have an image