@rypen-dev/shared-components 7.0.20 → 7.1.0

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 6, this package is built with Webpack 5 and Vue 3.",
-	"version": "7.0.20",
+	"version": "7.1.0",
 	"main": "./dist/index.js",
 	"scripts": {
 		"build": "webpack --config ./webpack.config.js",

package/src/components/FileDropzone.vue

@@ -5,124 +5,128 @@
             <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="drop-target" :class="{over: isOver}" ref="droptarget">
+            <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="fileupload" />
+                <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>
             </div>
         </div>
     </div>
 </template>
-<script>
-    export default {
-        name: 'FileDropzone',
-        props: {
-            imageBasePath: {
-                type: String,
-                default: '', //IMAGE_BASE_PATH
-            },
-
-            image: [Object, File],
-            id: String,
-            showRemove: {
-                type: Boolean,
-                default: true,
-            },
-            updating: {
-                type: Boolean,
-                default: false,
-            },
-            disabled: {
-                type: Boolean,
-                default: false,
-            },
+<script setup>
+    import { ref, onBeforeMount, onMounted } from 'vue';
+
+    const props = defineProps({
+        imageBasePath: {
+            type: String,
+            default: '', //IMAGE_BASE_PATH
         },
-        data () {
-            return {
-                dragDropCapable: false,
 
-                reader: null,
+        image: [Object, File],
+        id: String,
+        showRemove: {
+            type: Boolean,
+            default: true,
+        },
+        updating: {
+            type: Boolean,
+            default: false,
+        },
+        disabled: {
+            type: Boolean,
+            default: false,
+        },
+    });
+    const emit = defineEmits(['change', 'remove']);
 
-                internalImage: '',
+    const dragDropCapable = ref(false);
+    const reader = ref(null);
+    const internalImage = ref('');
+    const isOver = ref(false);
 
-                isOver: false,
-            };
-        },
-        created: function () {
-            if (this.image && this.image.ImageUrl) {
-                // already have an image
-                this.internalImage = this.imageBasePath + this.image.ImageUrl;
-            }
+    const droptargetref = ref(null);
+    const fileuploadref = ref(null);
 
-            this.reader = new FileReader();
-            this.reader.addEventListener('load', this.setImage);
-        },
-        mounted: function () {
-            this.dragDropCapable = this.determineDragDropCapable();
+    onBeforeMount(() => {
+        if (props.image && props.image.ImageUrl) {
+            // already have an image
+            internalImage.value = props.imageBasePath + props.image.ImageUrl;
+        }
+
+        reader.value = new FileReader();
+        reader.value.addEventListener('load', setImage);
+    });
 
-            if (this.dragDropCapable) {
+    onMounted(() => {
+        dragDropCapable.value = determineDragDropCapable();
+
+        if (dragDropCapable.value) {
+            if (droptargetref.value) {
                 // add prevent/stop to all necessary events
                 ['drag', 'drop'].forEach(evt => {
-                    this.$refs.droptarget.addEventListener(evt, (e) => {
+                    droptargetref.value.addEventListener(evt, (e) => {
                         e.preventDefault();
                         e.stopPropagation();
                     });
                 });
                 ['dragstart', 'dragenter', 'dragover'].forEach(evt => {
-                    this.$refs.droptarget.addEventListener(evt, (e) => {
+                    droptargetref.value.addEventListener(evt, (e) => {
                         e.preventDefault();
                         e.stopPropagation();
 
-                        this.isOver = true;
+                        isOver.value = true;
                     });
                 });
                 ['dragend', 'dragleave'].forEach(evt => {
-                    this.$refs.droptarget.addEventListener(evt, (e) => {
+                    droptargetref.value.addEventListener(evt, (e) => {
                         e.preventDefault();
                         e.stopPropagation();
 
-                        this.isOver = false;
+                        isOver.value = false;
                     });
                 });
 
                 // add listeners for drop
-                this.$refs.droptarget.addEventListener('drop', this.fileDrop);
+                droptargetref.value.addEventListener('drop', fileDrop);
             }
-        },
-        methods: {
-            determineDragDropCapable() {
-                const div = document.createElement('div');
-                return (('draggable' in div) || ('ondragstart' in div && 'ondrop' in div))
-                    && 'FormData' in window
-                    && 'FileReader' in window;
-            },
-
-            fileDrop(e) {
-                this.isOver = false;
-                let files = e.dataTransfer.files;
-                this.readImage(files[0]);
-
-                this.$emit('change', files[0]);
-            },
-            uploadImage(e) {
-                const { value, files } = e.target;
-                this.readImage(files[0]);
-
-                this.$emit('change', files[0]);
-            },
-            removeImage() {
-                this.internalImage = '';
-                this.$emit('remove');
-            },
-            readImage(file) {
-                this.reader.readAsDataURL(file);
-            },
-            setImage() {
-                this.internalImage = this.reader.result;
-            },
-        },
-        computed: {
-            
-        },
-    };
+        }
+    });
+
+    function determineDragDropCapable() {
+        const div = document.createElement('div');
+        return (('draggable' in div) || ('ondragstart' in div && 'ondrop' in div))
+            && 'FormData' in window
+            && 'FileReader' in window;
+    }
+
+    function fileDrop(e) {
+        isOver.value = false;
+        let files = e.dataTransfer.files;
+        readImage(files[0]);
+
+        emit('change', files[0]);
+    }
+
+    function uploadImage(e) {
+        const { value, files } = e.target;
+        readImage(files[0]);
+
+        emit('change', files[0]);
+    }
+
+    function removeImage() {
+        internalImage.value = '';
+        emit('remove');
+    }
+
+    function readImage(file) {
+        // only read if it's an image
+        if (file && file.type.startsWith('image/')) {
+            reader.value.readAsDataURL(file);
+        }
+    }
+
+    function setImage() {
+        internalImage.value = reader.value.result;
+    }
 </script>

package/src/components/FileUpload.vue

@@ -8,74 +8,72 @@
         </span>
     </span>
 </template>
-<script>
-    export default {
-        name: 'FileUpload',
-        props: {
-            assetBasePath: {
-                type: String,
-                d0efault: '', //MERCH_ASSET_BASE_PATH
-            },
+<script setup>
+    import { ref, computed, onMounted } from 'vue';
 
-            file: [Object, File],
-            id: String,
-            updating: {
-                type: Boolean,
-                default: false,
-            },
-            disabled: {
-                type: Boolean,
-                default: false,
-            },
-            text: {
-                type: String,
-                default: 'Choose a File',
-            },
-            showFilePath: {
-                type: Boolean,
-                default: false,
-            },
-            accept: {
-                type: String,
-                default: 'image/*',
-            },
-            cssClass: String,
+    const props = defineProps({
+        assetBasePath: {
+            type: String,
+            default: '', //MERCH_ASSET_BASE_PATH
         },
-        data () {
-            return {
-                reader: null,
 
-                internalFile: '',
-            };
+        file: [Object, File],
+        id: String,
+        updating: {
+            type: Boolean,
+            default: false,
         },
-        created: function () {
-            if (this.file) {
-                this.internalFile = this.assetBasePath + this.file;
-            }
-
-            this.reader = new FileReader();
-            this.reader.addEventListener('load', this.setFile);
+        disabled: {
+            type: Boolean,
+            default: false,
         },
-        methods: {
-            uploadFile(e) {
-                const { value, files } = e.target;
-                if (files[0]) {
-                    this.readFile(files[0]);
-
-                    this.$emit('change', files[0]);
-                }
-            },
-            readFile(file) {
-                this.reader.readAsDataURL(file);
-            },
-            setFile() {
-                this.internalFile = this.reader.result;
-            },
+        text: {
+            type: String,
+            default: 'Choose a File',
+        },
+        showFilePath: {
+            type: Boolean,
+            default: false,
         },
-        computed: {
-            fullCssClass() {
-                return (this.disabled || this.updating ? 'disabled' : '') + ' ' + (this.cssClass || '');
-            },
+        accept: {
+            type: String,
+            default: 'image/*',
         },
-    };
+        cssClass: String,
+    });
+    const emit = defineEmits(['change']);
+
+    const reader = ref(null);
+    const fileupload = ref(null);
+
+    onMounted(() => {
+        if (props.file) {
+            internalFile.value = props.assetBasePath + props.file;    
+        }
+
+        reader.value = new FileReader();
+        reader.value.addEventListener('load', setFile);
+    });
+
+    function uploadFile(e) {
+        const { value, files } = e.target;
+        if (files[0]) {
+            readFile(files[0]);
+
+            // emit the file change
+            emit('change', files[0]);
+        }
+    }
+
+    function readFile(file) {
+        reader.value.readAsDataURL(file);
+    }
+
+    function setFile() {
+        internalFile.value = reader.value.result;
+    }
+
+    const fullCssClass = computed(() => {
+        return (props.disabled || props.updating ? 'disabled' : '') + ' ' + (props.cssClass || '');
+    });
 </script>

package/src/components/GenericLoader.vue

@@ -4,11 +4,8 @@
     </div>
 </template>
 
-<script>
-    export default {
-        name: 'GenericLoader',
-        props: {
-            cssClass: String,
-        },
-    }
+<script setup>
+    const props = defineProps({
+        cssClass: String,
+    });
 </script>

package/src/components/Loader.vue

@@ -4,15 +4,6 @@
     </div>
 </template>
 
-<script>
+<script setup>
     import loadingImage from "../assets/rypen_logomarkreveal_100px.gif";
-    
-    export default {
-        name: 'Loader',
-        data: () => {
-            return {
-                loadingImage: loadingImage,
-            }
-        },
-    }
 </script>

package/src/components/LookupTextBox.vue

@@ -2,7 +2,7 @@
     <div class="lookup-container" :class="{ small: small }">
         <div class="input-container" :class="{ loading: loading, suggestions: suggestionsOpen, small: small, error: invalid }">
             <input v-if="useExternalValue" ref="inputforexternal" type="text" autocomplete="off" :value="externalValue" :maxlength="maxLength" @input="updateExternalValue" @focus="focusOn" @blur="focusOff" @keyup.enter="enterMethod" :disabled="disabled" />
-            <input v-else ref="input" type="text" autocomplete="off" v-model="value" :maxlength="maxLength" @focus="focusOn" @blur="focusOff" @keyup.enter="enterMethod" :disabled="disabled" />
+            <input v-else ref="inputref" type="text" autocomplete="off" v-model="value" :maxlength="maxLength" @focus="focusOn" @blur="focusOff" @keyup.enter="enterMethod" :disabled="disabled" />
             <span v-if="loading" class="mini-loader"></span>
         </div>
         <div v-if="suggestionsOpen" class="lookup-suggestions">
@@ -13,121 +13,129 @@
         </div>
     </div>
 </template>
-<script>
+<script setup>
+    import { ref, computed, watch } from "vue";
+
     import { debounce } from "@rypen-dev/helpers";
 
-    export default {
-        name: 'LookupTextBox',
-        props: {
-            loading: {
-                type: Boolean,
-                default: false,
-            },
-            suggestions: {
-                type: Array,
-                default: () => [],
-            },
-            invalid: {
-                type: Boolean,
-                default: false,
-            },
-            minimumLength: {
-                type: Number,
-                default: 3,
-            },
-            maxLength: {
-                type: Number,
-                default: 200,
-            },
-            small: {
-                type: Boolean,
-                default: false,
-            },
-            disabled: {
-                type: Boolean,
-                default: false,
-            },
-            useExternalValue: {
-                type: Boolean,
-                default: false,
-            },
-            externalValue: String,
-            nameOnly: {
-                type: Boolean,
-                default: false,
-            },
-            searchType: {
-                type: String,
-                default: 'products'
-            },
+    const props = defineProps({
+        loading: {
+            type: Boolean,
+            default: false,
+        },
+        suggestions: {
+            type: Array,
+            default: () => [],
+        },
+        invalid: {
+            type: Boolean,
+            default: false,
+        },
+        minimumLength: {
+            type: Number,
+            default: 3,
         },
-        data: () => {
-            return {
-                value: '',
-                debouncedValue: '',
-                
-                focused: false,
-            };
+        maxLength: {
+            type: Number,
+            default: 200,
         },
-        created: function () {
-            this.debouncedGetSuggestions = debounce(value => {
-                this.debouncedValue = value;
-                this.getSuggestions();
-            });
+        small: {
+            type: Boolean,
+            default: false,
         },
-        methods: {
-            getSuggestions() {
-                const usedValue = this.useExternalValue ? this.externalValue : this.value;
-                if (usedValue.length === 0 || usedValue.length >= this.minimumLength) {
-                    this.$emit('search', usedValue);
-                }
-            },
-            selectSuggestion(suggestion) {
-                let data = suggestion;
-                if (this.nameOnly) {
-                    data = suggestion.Name;
-                }
-
-                this.$emit('select', data);
-            },
-
-            updateExternalValue(e) {
-                this.$emit('select', e.target.value);
-            },
-
-            focusInput() {
-                if (this.$refs.inputforexternal) {
-                    this.$refs.inputforexternal.focus();
-                } else if (this.$refs.input) {
-                    this.$refs.input.focus();
-                }
-            },
-            focusOn() {
-                this.focused = true;
-            },
-            focusOff() {
-                setTimeout(() => {
-                    this.focused = false;
-                    this.value = '';
-                }, 200);
-            },
-
-            enterMethod() {
-                this.$emit('enter');
-            },
+        disabled: {
+            type: Boolean,
+            default: false,
         },
-        computed: {
-            suggestionsOpen() {
-                return this.debouncedValue && this.debouncedValue.length >= this.minimumLength && this.focused && (!this.loading || this.suggestions.length > 0);
-            }
+        useExternalValue: {
+            type: Boolean,
+            default: false,
         },
-        watch: {
-            value(newValue) {
-                this.debouncedGetSuggestions(newValue);
-            },
-            externalValue(newValue) {
-                this.debouncedGetSuggestions(newValue);
-            },
+        externalValue: String,
+        nameOnly: {
+            type: Boolean,
+            default: false,
         },
+        searchType: {
+            type: String,
+            default: 'products'
+        },
+    });
+
+    const emit = defineEmits(['search', 'select', 'enter']);
+
+    const value = ref('');
+    const debouncedValue = ref('');
+    const focused = ref(false);
+
+    const inputref = ref(null);
+    const inputforexternal = ref(null);
+
+    const suggestionsOpen = computed(() => {
+        return debouncedValue.value && debouncedValue.value.length >= props.minimumLength && focused.value && (!props.loading || props.suggestions.length > 0);
+    });
+
+    const debouncedGetSuggestions = debounce((newValue) => {
+        debouncedValue.value = newValue;
+        getSuggestions();
+    });
+
+    function getSuggestions() {
+        const usedValue = props.useExternalValue ? props.externalValue : value.value;
+        if (usedValue.length === 0 || usedValue.length >= props.minimumLength) {
+            emit('search', usedValue);
+        }
+    }
+
+    function selectSuggestion(suggestion) {
+        let data = suggestion;
+        if (props.nameOnly) {
+            data = suggestion.Name;
+        }
+
+        emit('select', data);
     }
+
+    function updateExternalValue(e) {
+        emit('select', e.target.value);
+    }
+
+    function focusInput() {
+        if (props.useExternalValue && inputforexternal.value) {
+            inputforexternal.value.focus();
+        } else if (inputref.value) {
+            inputref.value.focus();
+        }
+    }
+
+    function focusOn() {
+        focused.value = true;
+    }
+
+    function focusOff() {
+        setTimeout(() => {
+            focused.value = false;
+            value.value = '';
+        }, 200);
+    }
+
+    function enterMethod() {
+        emit('enter');
+    }
+
+    watch(() => props.externalValue, (newValue) => {
+        if (props.useExternalValue) {
+            debouncedGetSuggestions(newValue);
+        }
+    }, { immediate: true });
+
+    watch(value, (newValue) => {
+        if (!props.useExternalValue) {
+            debouncedGetSuggestions(newValue);
+        }
+    }, { immediate: true });
+
+    defineExpose({
+        focusInput,
+    });
 </script>