@rypen-dev/shared-components 7.0.19 → 7.1.0

package/src/components/SearchableDropdownInput.vue

@@ -1,10 +1,10 @@
 <template>
-    <div :id="id + '-container'" ref="container" class="input-container searchable-dropdown-container" @focusin="focusOn" @focusout="focusOff" tabindex="0">
+    <div :id="id + '-container'" ref="containerref" class="input-container searchable-dropdown-container" @focusin="focusOn" @focusout="focusOff" tabindex="0">
         <div class="input-container select false-select" :class="computedClass">
             <span class="value">{{ value ? value.Name : 'Select' }}</span>
             <div class="options-list-container">
                 <div class="input-container search small">
-                    <input ref="input" type="text" autocomplete="off" role="combobox" :aria-controls="id + '-list'" aria-autocomplete="list" :aria-expanded="focused" v-model="searchValue" :maxlength="maxLength" :disabled="disabled" />
+                    <input ref="inputref" type="text" autocomplete="off" role="combobox" :aria-controls="id + '-list'" aria-autocomplete="list" :aria-expanded="focused" v-model="searchValue" :maxlength="maxLength" :disabled="disabled" />
                 </div>
                 <div class="options-list" role="listbox" :aria-label="label" :id="id + '-list'">
                     <span v-if="filteredOptions.length === 0" class="option empty">No {{ searchType }} found</span>
@@ -14,127 +14,132 @@
         </div>
     </div>
 </template>
-<script>
-    export default {
-        name: 'SearchableDropdownInput',
-        props: {
-            id: String,
-            label: String,
-            externalValueId: String,
-            externalValueName: String,
-            loading: {
-                type: Boolean,
-                default: false,
-            },
-            options: {
-                type: Array,
-                default: () => [],
-            },
-            invalid: {
-                type: Boolean,
-                default: false,
-            },
-            maxLength: {
-                type: Number,
-                default: 200,
-            },
-            disabled: {
-                type: Boolean,
-                default: false,
-            },
-            searchType: {
-                type: String,
-                default: 'products'
-            },
-            cssClass: String,
+<script setup>
+    import { ref, reactive, computed, watch, onMounted } from 'vue';
+
+    const props = defineProps({
+        id: String,
+        label: String,
+        externalValueId: String,
+        externalValueName: String,
+        loading: {
+            type: Boolean,
+            default: false,
+        },
+        options: {
+            type: Array,
+            default: () => [],
+        },
+        invalid: {
+            type: Boolean,
+            default: false,
+        },
+        maxLength: {
+            type: Number,
+            default: 200,
+        },
+        disabled: {
+            type: Boolean,
+            default: false,
         },
-        data: () => {
-            return {
-                value: null,
-                searchValue: '',
+        searchType: {
+            type: String,
+            default: 'products'
+        },
+        cssClass: String,
+    });
+    const emit = defineEmits(['update']);
 
-                focused: false,
+    const value = ref(null);
+    const searchValue = ref('');
+    const focused = ref(false);
+    const filteredOptions = reactive([]);
 
-                filteredOptions: [],
-            };
-        },
-        created: function () {
-            if (this.externalValueId && this.externalValueName) {
-                this.value = { Id: this.externalValueId, Name: this.externalValueName };
-            }
+    const containerref = ref(null);
+    const inputref = ref(null);
 
-            if (this.options.length) {
-                this.filterResults();
-            }
-        },
-        methods: {
-            filterResults() {
-                let newResults = [];
-
-                if (this.searchValue) {
-                    const search = this.searchValue.toLowerCase();
-
-                    this.options.forEach(option => {
-                        if (option.Name && option.Name.toLowerCase().indexOf(search) > -1) {
-                            newResults.push(option);
-                        }
-                    });
-                } else {
-                    newResults = this.options.slice();
-                }
+    onMounted(() => {
+        if (props.externalValueId && props.externalValueName) {
+            value.value = { Id: props.externalValueId, Name: props.externalValueName };
+        }
 
-                this.filteredOptions.splice(0);
-                this.filteredOptions = this.filteredOptions.concat(newResults);
-            },
+        if (props.options.length) {
+            filteredOptions.splice(0);
+            filteredOptions.push(...props.options);
+        }
+    });
 
-            selectValue(value) {
-                this.value = value;
+    function filterResults() {
+        let newResults = [];
 
-                this.$emit('update', value);
+        if (searchValue.value) {
+            const search = searchValue.value.toLowerCase();
 
-                if (this.$refs.container) {
-                    this.$refs.container.blur();
-                }
-                this.focused = false;
-            },
-
-            focusInput() {
-                this.focused = true;
-            },
-            focusSearchInput() {
-                this.focused = true;
-                if (this.$refs.input) {
-                    this.$refs.input.focus();
-                }
-            },
-            focusOn(e) {
-                //console.log(e.target);
-                this.focused = true;
-            },
-            focusOff(e) {
-                setTimeout(() => {
-                    if (!this.$refs.container || !document.activeElement || (document.activeElement.id !== this.id + '-container' && !this.$refs.container.contains(document.activeElement))) {
-                        this.focused = false;
-                        this.searchValue = null;
-                    }
-                }, 200);
-            },
-        },
-        computed: {
-            computedClass() {
-                return (this.cssClass || '') + (this.focused ? ' open' : '') + (this.invalid ? ' error' : '');
-            },
-        },
-        watch: {
-            loading(newValue, prevValue) {
-                if (!newValue && prevValue) {
-                    this.searchValue = '';
-                    this.filterResults();
+            props.options.forEach(option => {
+                if (option.Name && option.Name.toLowerCase().indexOf(search) > -1) {
+                    newResults.push(option);
                 }
-            },
-            searchValue(newValue) {
-                this.filterResults();
-            },
-        },
+            });
+        } else {
+            newResults = props.options.slice();
+        }
+
+        filteredOptions.splice(0);
+        filteredOptions.push(...newResults);
     }
+
+    function selectValue(value) {
+        value.value = value;
+
+        emit('update', value);
+
+        if (containerref.value) {
+            containerref.value.blur();
+        }
+        focused.value = false;
+    }
+
+    function focusInput() {
+        focused.value = true;
+    }
+
+    function focusSearchInput() {
+        focused.value = true;
+        if (inputref.value) {
+            inputref.value.focus();
+        }
+    }
+
+    function focusOn(e) {
+        focused.value = true;
+    }
+
+    function focusOff(e) {
+        setTimeout(() => {
+            if (!containerref.value || !document.activeElement || (document.activeElement.id !== props.id + '-container' && !containerref.value.contains(document.activeElement))) {
+                focused.value = false;
+                searchValue.value = '';
+            }
+        }, 200);
+    }
+
+    const computedClass = computed(() => {
+        return (props.cssClass || '') + (focused.value ? ' open' : '') + (props.invalid ? ' error' : '');
+    });
+
+    watch(() => props.loading, (newValue, prevValue) => {
+        if (!newValue && prevValue) {
+            searchValue.value = '';
+            filterResults();
+        }
+    });
+
+    watch(() => searchValue.value, (newValue) => {
+        filterResults();
+    });
+
+    defineExpose({
+        focusInput,
+        focusSearchInput,
+    });
 </script>

package/src/components/Slideshow.vue

@@ -16,100 +16,107 @@
     </div>
 </template>
 
-<script>
-    export default {
-        name: 'Slideshow',
-        props: {
-            imageBasePath: {
-                type: String,
-                default: '', //IMAGE_BASE_PATH
-            },
+<script setup>
+    import { ref, onMounted, computed } from 'vue';
 
-            slides: {
-                type: Array,
-                default: [],
-            }, 
-            usePrefix: {
-                type: Boolean,
-                default: true,
-            },
-            auto: {
-                type: Boolean,
-                default: true,
-            },
-            small: {
-                type: Boolean,
-                default: false,
-            },
-            widthSuffix: {
-                type: Number,
-                default: null,
-            },
-            delay: {
-                type: Number,
-                default: 7000,
-            },
-            forceNav: {
-                type: Boolean,
-                default: false,
-            },
+    const props = defineProps({
+        imageBasePath: {
+            type: String,
+            default: '', //IMAGE_BASE_PATH
         },
-        data: () => {
-            return {
-                currentIndex: 0,
-                timer: null,
-            }
+        slides: {
+            type: Array,
+            default: () => [],
         },
-        created: function () {
-            this.triggerStartTimer();
+        usePrefix: {
+            type: Boolean,
+            default: true,
         },
-        methods: {
-            goToPrevious() {
-                this.goToSlide(this.previousIndex);
-            },
-            goToNext() {
-                this.goToSlide(this.nextIndex);
-            },
-            goToSlide(index) {
-                this.triggerClearTimer();
-                this.currentIndex = index;
-                this.$emit('change', index);
-                this.triggerStartTimer();
-            },
-            triggerStartTimer() {
-                if (this.auto) {
-                    this.startTimer();
-                }
-            },
-            startTimer() {
-                if (this.slides.length > 0) {
-                    if (this.timer !== null) {
-                        clearTimeout(this.timer);
-                    }
-                    this.timer = setTimeout(this.goToNext, this.delay);
-                }
-            },
-            triggerClearTimer() {
-                if (this.auto) {
-                    this.clearTimer();
-                }
-            },
-            clearTimer() {
-                clearTimeout(this.timer);
-                this.timer = null;
-            },
-
-            backgroundImage(slide) {
-                return { backgroundImage: 'url("' + (this.usePrefix ? this.imageBasePath : '') + slide + (this.widthSuffix ? ';width=' + this.widthSuffix : '') + '")' };
-            },
+        auto: {
+            type: Boolean,
+            default: true,
+        },
+        small: {
+            type: Boolean,
+            default: false,
+        },
+        widthSuffix: {
+            type: Number,
+            default: null,
         },
-        computed: {
-            previousIndex() {
-                return this.currentIndex === 0 ? this.slides.length - 1 : this.currentIndex - 1;
-            },
-            nextIndex() {
-                return this.currentIndex === this.slides.length - 1 ? 0 : this.currentIndex + 1;
-            },
+        delay: {
+            type: Number,
+            default: 7000,
+        },
+        forceNav: {
+            type: Boolean,
+            default: false,
+        },
+    });
+    const emit = defineEmits(['change']);
+
+    onMounted(() => {
+        triggerStartTimer();
+    });
+
+    // timer and auto slide functionality
+    const timer = ref(null);
+
+    function triggerStartTimer() {
+        if (props.auto) {
+            startTimer();
+        }
+    }
+
+    function startTimer() {
+        if (props.slides.length > 0) {
+            if (timer.value !== null) {
+                clearTimeout(timer.value);
+            }
+            timer.value = setTimeout(goToNext, props.delay);
+        }
+    }
+
+    function triggerClearTimer() {
+        if (props.auto) {
+            clearTimer();
+        }
+    }
+
+    function clearTimer() {
+        if (timer.value !== null) {
+            clearTimeout(timer.value);
+            timer.value = null;
         }
     }
+
+    // sliding functionality
+    const currentIndex = ref(0);
+
+    function goToPrevious() {
+        goToSlide(previousIndex.value);
+    }
+
+    function goToNext() {
+        goToSlide(nextIndex.value);
+    }
+
+    function goToSlide(index) {
+        triggerClearTimer();
+        currentIndex.value = index;
+        emit('change', index);
+        triggerStartTimer();
+    }
+
+    const previousIndex = computed(() => {
+        return currentIndex.value === 0 ? props.slides.length - 1 : currentIndex.value - 1;
+    });
+
+    const nextIndex = computed(() => {
+        return currentIndex.value === props.slides.length - 1 ? 0 : currentIndex.value + 1;
+    });
+
+    function backgroundImage(slide) {
+        return { backgroundImage: 'url("' + (props.usePrefix ? props.imageBasePath : '') + slide + (props.widthSuffix ? ';width=' + props.widthSuffix : '') + '")' };
+    }
 </script>

package/src/components/TimespanInput.vue

@@ -13,7 +13,7 @@
         </div>
     </div>
 </template>
-<script>
+<script setup>
     const TIMESPAN_INTERVALS = {
         DAYS: 'DAYS',
         WEEKS: 'WEEKS',
@@ -21,100 +21,99 @@
         YEARS: 'YEARS',
     };
 
-    export default {
-        name: 'TimespanInput',
-        props: {
-            initialValue: Number,
-            name: String,
-        },
-        data () {
-            return {
-                TIMESPAN_INTERVALS: TIMESPAN_INTERVALS,
+    import { ref, onMounted, nextTick, computed } from 'vue';
 
-                value: '',
-                selectedInterval: '',
-            };
-        },
-        created: function () {
-            this.setInitialValueAndInterval()
+    const props = defineProps({
+        initialValue: {
+            type: Number,
+            default: 0,
         },
-        methods: {
-            setInitialValueAndInterval() {
-                let newValue = this.initialValue;
-                let newInterval = TIMESPAN_INTERVALS.DAYS;
-
-                if (newValue && !isNaN(newValue)) {
-                    if (newValue % 365 === 0) {
-                        newValue = newValue / 365;
-                        newInterval = TIMESPAN_INTERVALS.YEARS;
-                    } else if (newValue % 7 === 0) {
-                        newValue = newValue / 7;
-                        newInterval = TIMESPAN_INTERVALS.WEEKS;
-                    }
-                }
+        name: String,
+    });
+    const emit = defineEmits(['update']);
 
-                this.value = newValue;
-                this.selectedInterval = newInterval;
-            },
-            syncValueAndInterval(value, callback) {
-                let newValue = value;
-                let newInterval = this.selectedInterval;
-
-                if (value && !isNaN(value)) {
-                    if (this.selectedInterval === TIMESPAN_INTERVALS.DAYS) {
-                        if (newValue % 365 === 0) {
-                            newValue = newValue / 365;
-                            newInterval = TIMESPAN_INTERVALS.YEARS;
-                        } else if (newValue % 7 === 0) {
-                            newValue = newValue / 7;
-                            newInterval = TIMESPAN_INTERVALS.WEEKS;
-                        }
-                    } else if (this.selectedInterval === TIMESPAN_INTERVALS.MONTHS) {
-                        if (value % 12 === 0) {
-                            newValue = value / 12;
-                            newInterval = TIMESPAN_INTERVALS.YEARS;
-                        }
-                    }
-                } else {
-                    newValue = '';
-                    newInterval = TIMESPAN_INTERVALS.DAYS;
-                }
+    const value = ref('');
+    const selectedInterval = ref(TIMESPAN_INTERVALS.DAYS);
+
+    onMounted(() => {
+        setInitialValueAndInterval();
+    });
 
-                this.value = newValue;
-                this.selectedInterval = newInterval;
+    function setInitialValueAndInterval() {
+        let newValue = props.initialValue;
+        let newInterval = TIMESPAN_INTERVALS.DAYS;
 
-                if (callback !== undefined) {
-                    this.$nextTick(callback);
+        if (newValue && !isNaN(newValue)) {
+            if (newValue % 365 === 0) {
+                newValue = newValue / 365;
+                newInterval = TIMESPAN_INTERVALS.YEARS;
+            } else if (newValue % 7 === 0) {
+                newValue = newValue / 7;
+                newInterval = TIMESPAN_INTERVALS.WEEKS;
+            }
+        }
+
+        value.value = newValue;
+        selectedInterval.value = newInterval;
+    }
+
+    function syncValueAndInterval(value, callback) {
+        let newValue = value;
+        let newInterval = selectedInterval.value;
+
+        if (value && !isNaN(value)) {
+            if (selectedInterval.value === TIMESPAN_INTERVALS.DAYS) {
+                if (newValue % 365 === 0) {
+                    newValue = newValue / 365;
+                    newInterval = TIMESPAN_INTERVALS.YEARS;
+                } else if (newValue % 7 === 0) {
+                    newValue = newValue / 7;
+                    newInterval = TIMESPAN_INTERVALS.WEEKS;
                 }
-            },
-
-            updateTimeInterval(e) {
-                const { value } = e.target;
-                this.selectedInterval = value;
-
-                this.syncValueAndInterval(this.value, this.sendUpdate);
-            },
-            updateValue(e) {
-                const { value } = e.currentTarget;
-                this.syncValueAndInterval(value, this.sendUpdate);
-            },
-
-            sendUpdate() {
-                this.$emit('update', this.realValue, this.name);
-            },
-        },
-        computed: {
-            realValue() {
-                let finalValue = this.value;
-
-                if (this.selectedInterval === TIMESPAN_INTERVALS.WEEKS) {
-                    finalValue = finalValue * 7;
-                } else if (this.selectedInterval === TIMESPAN_INTERVALS.YEARS) {
-                    finalValue = finalValue * 365;
+            } else if (selectedInterval.value === TIMESPAN_INTERVALS.MONTHS) {
+                if (value % 12 === 0) {
+                    newValue = value / 12;
+                    newInterval = TIMESPAN_INTERVALS.YEARS;
                 }
+            }
+        } else {
+            newValue = '';
+            newInterval = TIMESPAN_INTERVALS.DAYS;
+        }
 
-                return finalValue;
-            },
-        },
+        value.value = newValue;
+        selectedInterval.value = newInterval;
+
+        if (callback !== undefined) {
+            nextTick(callback);
+        }
+    }
+
+    function updateTimeInterval(e) {
+        const { value } = e.target;
+        selectedInterval.value = value;
+
+        syncValueAndInterval(value, sendUpdate);
+    };
+
+    function updateValue(e) {
+        const { value } = e.currentTarget;
+        syncValueAndInterval(value, sendUpdate);
     };
+
+    function sendUpdate() {
+        emit('update', realValue.value, props.name);
+    };
+
+    const realValue = computed(() => {
+        let finalValue = value.value;
+
+        if (selectedInterval.value === TIMESPAN_INTERVALS.WEEKS) {
+            finalValue = finalValue * 7;
+        } else if (selectedInterval.value === TIMESPAN_INTERVALS.YEARS) {
+            finalValue = finalValue * 365;
+        }
+
+        return finalValue;
+    });
 </script>

package/src/components/icons/IconApprove.vue

@@ -6,5 +6,7 @@
 </template>
 
 <script>
-    export default {}
+    export default {
+        name: 'IconApprove',
+    }
 </script>