@rypen-dev/shared-components 7.0.20 → 8.0.0

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>

package/src/components/ModalWrapper.vue

@@ -23,48 +23,39 @@
     </transition>
 </template>
 
-<script>
+<script setup>
     import IconBase from "./icons/IconBase.vue";
     import IconClose from "./icons/IconClose.vue";
 
-    export default {
-        name: 'ModalWrapper',
-        props: {
-            header: {
-                type: String,
-                default: ' ',
-            },
-            subheader: {
-                type: String,
-                default: '',
-            },
-            closeable: {
-                type: Boolean,
-                default: true,
-            },
-            cssClass: String,
-            maskCssClass: String,
-        },
-        data: () => {
-            return {
-                
-            }
+    import { computed, useSlots } from "vue";
+
+    const slots = useSlots();
+    const emit = defineEmits(['close']);
+
+    const props = defineProps({
+        header: {
+            type: String,
+            default: ' ',
         },
-        components: {
-            IconBase,
-            IconClose,
+        subheader: {
+            type: String,
+            default: '',
         },
-        methods: {
-            closeIfCloseable(e) {
-                if (this.closeable && e.target == e.currentTarget) {
-                    this.$emit('close');
-                }
-            }
+        closeable: {
+            type: Boolean,
+            default: true,
         },
-        computed: {
-            hasFooter() {
-                return !!this.$slots.footer;
-            }
+        cssClass: String,
+        maskCssClass: String,
+    });
+
+    const hasFooter = computed(() => {
+        return !!slots.footer;
+    });
+
+    function closeIfCloseable(e) {
+        if (props.closeable && e.target === e.currentTarget) {
+            emit('close');
         }
     }
 </script>

package/src/components/NumberInput.vue

@@ -93,7 +93,6 @@
     }
 
     function setValue(value, inputEvent = false) {
-        const oldValue = internalValue.value;
         let newValue = Math.round(value);
 
         if (props.min <= props.max) {
@@ -102,7 +101,7 @@
 
         internalValue.value = newValue;
 
-        if (newValue === oldValue) {
+        if (inputref.value.value != newValue) {
             inputref.value.value = newValue;
         }