@rypen-dev/shared-components 7.0.19 → 7.1.0

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

@@ -8,11 +8,11 @@
            ref="inputref"
            @keydown.up.prevent="increment"
            @keydown.down.prevent="decrement"
-           @keydown.enter="triggerChange"
-           @change="change"
-           @paste="paste"
-           @blur="blur"
-           @focus="focus" />
+           @keydown.enter="change"
+           @input="updateValue"
+           @blur="change"
+           @focus="focus"
+           @paste="paste" />
 </template>
 <script setup>
     import { ref, watch } from "vue";
@@ -20,7 +20,7 @@
     const REGEXP_NUMBER = /^-?(?:\d+|\d+\.\d+|\.\d+)(?:[eE][-+]?\d+)?$/;
 
     const props = defineProps({
-        initialValue: Number,
+        value: Number,
         min: {
             type: Number,
             default: 0,
@@ -46,26 +46,28 @@
             type: Boolean,
             default: false,
         },
+        emitOnInput: {
+            type: Boolean,
+            default: false,
+        },
     });
-
     const emit = defineEmits(['change']);
 
     const inputref = ref(null);
 
-    const internalValue = ref(props.initialValue);
+    const internalValue = ref(props.value);
+    const previousValue = ref(props.value);
 
     // methods
-    function triggerChange(e) {
-        change(e);
+    function updateValue(e) {
+        if (props.emitOnInput) {
+            setValue(e.target.value, true);
+        }
     }
 
+    // called on blur
     function change(e) {
-        setValue(e.target.value);
-    }
-
-    function blur(e) {
-        let val = between(props.min, e.target.value, props.max);
-        if (internalValue.value !== val) {
+        if (!props.emitOnInput) {
             setValue(e.target.value);
         }
     }
@@ -90,8 +92,7 @@
         return val;
     }
 
-    function setValue(value) {
-        const oldValue = internalValue.value;
+    function setValue(value, inputEvent = false) {
         let newValue = Math.round(value);
 
         if (props.min <= props.max) {
@@ -100,11 +101,13 @@
 
         internalValue.value = newValue;
 
-        if (newValue === oldValue) {
+        if (inputref.value.value != newValue) {
             inputref.value.value = newValue;
         }
 
-        emit('change', newValue, oldValue);
+        if (!inputEvent || props.emitOnInput) {
+            emitChange();
+        }
     }
 
     function crement(up = true) {
@@ -114,6 +117,9 @@
         }
 
         internalValue.value += step;
+        if (props.emitOnInput) {
+            emitChange();
+        }
     }
 
     function increment(e) {
@@ -128,14 +134,17 @@
         }
     }
 
-    watch(() => props.initialValue, (newValue) => {
+    function emitChange() {
+        if (internalValue.value != previousValue.value) {
+            previousValue.value = internalValue.value;
+            emit('change', internalValue.value);
+        }
+    }
+
+    watch(() => props.value, (newValue) => {
         const value = parseInt(newValue);
         if (!isNaN(value) && value !== internalValue.value) {
             setValue(value);
         }
     }, { immediate: true });
-
-    defineExpose({
-        triggerChange,
-    });
 </script>

package/src/components/Pagination.vue

@@ -29,107 +29,105 @@
         </ul>
     </nav>
 </template>
-<script>
-    export default {
-        name: 'Pagination',
-        props: {
-            pageIndex: Number,
-            totalPages: Number,
-            maxVisiblePages: {
-                type: Number,
-                default: 7,
-            },
-            hasPreviousPage: {
-                type: Boolean,
-                default: false,
-            },
-            hasNextPage: {
-                type: Boolean,
-                default: false,
-            },
-            loading: {
-                type: Boolean,
-                default: false,
-            },
+<script setup>
+    import { reactive, ref, watch } from 'vue';
+
+    const props = defineProps({
+        pageIndex: {
+            type: Number,
+            default: 0,
         },
-        data: () => {
-            return {
-                initialPageset: [],
-                showInitialEllipse: false,
-                mainPageset: [],
-                subsequentPageset: [],
-                showSubsequentEllipse: false,
-            };
+        totalPages: {
+            type: Number,
+            default: 0,
         },
-        created: function () {
-            
+        maxVisiblePages: {
+            type: Number,
+            default: 7,
         },
-        methods: {
-            navigateToNext() {
-                if (this.hasNextPage) {
-                    this.navigateToPage(this.pageIndex + 1);
-                }
-            },
-            navigateToPrev() {
-                if (this.hasPreviousPage) {
-                    this.navigateToPage(this.pageIndex - 1);
-                }
-            },
-            navigateToPage(page) {
-                if (page !== this.pageIndex) {
-                    this.$emit('navigate', page);
-                    this.$emit('top');
-                }
-            },
+        hasPreviousPage: {
+            type: Boolean,
+            default: false,
+        },
+        hasNextPage: {
+            type: Boolean,
+            default: false,
+        },
+        loading: {
+            type: Boolean,
+            default: false,
+        },
+    });
+
+    const emit = defineEmits(['navigate', 'top']);
 
-            recalculateVisiblePages() {
-                this.initialPageset.splice(0);
-                this.showInitialEllipse = false;
-                this.mainPageset.splice(0);
-                this.showSubsequentEllipse = false;
-                this.subsequentPageset.splice(0);
+    const initialPageset = reactive([]);
+    const showInitialEllipse = ref(false);
+    const mainPageset = reactive([]);
+    const subsequentPageset = reactive([]);
+    const showSubsequentEllipse = ref(false);
 
-                if (this.totalPages > 0) {
-                    if (this.totalPages > this.maxVisiblePages) {
-                        let start = 0;
-                        const middle = Math.floor(this.maxVisiblePages / 2);
+    function navigateToNext() {
+        if (props.hasNextPage) {
+            navigateToPage(props.pageIndex + 1);
+        }
+    }
 
-                        if (this.pageIndex > (this.totalPages - middle - 1)) {
-                            start = this.totalPages - this.maxVisiblePages;
-                        } else if (this.pageIndex > middle) {
-                            start = this.pageIndex - middle;
-                        }
+    function navigateToPrev() {
+        if (props.hasPreviousPage) {
+            navigateToPage(props.pageIndex - 1);
+        }
+    }
 
-                        if (start > 0) {
-                            this.initialPageset.push(0);
-                            this.showInitialEllipse = true;
-                        }
+    function navigateToPage(page) {
+        if (page !== props.pageIndex) {
+            emit('navigate', page);
+            emit('top');
+        }
+    }
 
-                        for (let i = start; i < (start + this.maxVisiblePages); i++) {
-                            this.mainPageset.push(i);
-                        }
+    function recalculateVisiblePages() {
+        initialPageset.splice(0);
+        showInitialEllipse.value = false;
+        mainPageset.splice(0);
+        showSubsequentEllipse.value = false;
+        subsequentPageset.splice(0);
 
-                        if (start < this.totalPages - this.maxVisiblePages) {
-                            this.showSubsequentEllipse = true;
-                            this.subsequentPageset.push(this.totalPages - 1);
-                        }
-                    } else {
-                        for (let i = 0; i < this.totalPages; i++) {
-                            this.mainPageset.push(i);
-                        }
-                    }
+        if (props.totalPages > 0) {
+            if (props.totalPages > props.maxVisiblePages) {
+                let start = 0;
+                const middle = Math.floor(props.maxVisiblePages / 2);
+
+                if (props.pageIndex > (props.totalPages - middle - 1)) {
+                    start = props.totalPages - props.maxVisiblePages;
+                } else if (props.pageIndex > middle) {
+                    start = props.pageIndex - middle;
                 }
-            },
-        },
-        computed: {
-            
-        },
-        watch: {
-            loading(value, prev) {
-                if (!value && prev) {
-                    this.recalculateVisiblePages();
+
+                if (start > 0) {
+                    initialPageset.push(0);
+                    showInitialEllipse.value = true;
                 }
-            },
-        },
-    };
+
+                for (let i = start; i < (start + props.maxVisiblePages); i++) {
+                    mainPageset.push(i);
+                }
+
+                if (start < props.totalPages - props.maxVisiblePages) {
+                    showSubsequentEllipse.value = true;
+                    subsequentPageset.push(props.totalPages - 1);
+                }
+            } else {
+                for (let i = 0; i < props.totalPages; i++) {
+                    mainPageset.push(i);
+                }
+            }
+        }
+    }
+
+    watch(() => props.loading, (newValue, oldValue) => {
+        if (!newValue && oldValue) {
+            recalculateVisiblePages();
+        }
+    });
 </script>

package/src/components/ProductImageSelector.vue

@@ -26,154 +26,153 @@
         </nav>
     </div>
 </template>
-<script>
+<script setup>
     import IconBase from "./icons/IconBase.vue";
     import IconCaret from "./icons/IconCaret.vue";
 
-    export default {
-        name: 'ProductImageSelector',
-        props: {
-            imageBasePath: {
-                type: String,
-                default: '', //IMAGE_BASE_PATH
-            },
-
-            product: Object,
-            variant: Object,
-            hasVariants: {
-                type: Boolean,
-                default: true,
-            },
-            selectedImage: String,
-            disabled: {
-                type: Boolean,
-                default: false,
-            },
-            showEmpty: {
-                type: Boolean,
-                default: false,
-            },
-            usePathPrefix: {
-                type: Boolean,
-                default: true,
-            },
-            forceNav: {
-                type: Boolean,
-                default: false,
-            },
+    import { ref, computed } from 'vue';
+
+    const props = defineProps({
+        imageBasePath: {
+            type: String,
+            default: '', //IMAGE_BASE_PATH
         },
-        data: () => {
-            return {
-                error: null,
 
-                carouselIndex: 0,
-                maxImagesShown: 6,
-            }
+        product: Object,
+        variant: Object,
+        hasVariants: {
+            type: Boolean,
+            default: true,
         },
-        created: function () {
-            
+        selectedImage: String,
+        disabled: {
+            type: Boolean,
+            default: false,
         },
-        methods: {
-            imageSelected(item) {
-                const pathCompare = this.selectedImage.replace(this.imageBasePath, '');
-
-                return pathCompare === item.ImageUrl;
-            },
-
-            selectImage(item) {
-                if (!this.disabled) {
-                    this.$emit('update', item);
-                }
-            },
-            selectVariantImage() {
-                if (!this.disabled) {
-                    if (this.variant) {
-                        this.$emit('update', this.variant);
-                    } else {
-                        this.$emit('update', this.product.PrimaryImage);
-                    }
-                }
-            },
-            imagePath(item) {
-                if (item && item.ImageUrl) {
-                    return this.imageBasePath + item.ImageUrl + ';width=100;height=100';
-                }
-
-                return null;
-            },
-
-            previous() {
-                this.moveCarousel(-1);
-            },
-            next() {
-                this.moveCarousel(1);
-            },
-            moveCarousel(number) {
-                let newIndex = this.carouselIndex + number;
-                if (newIndex < 0) {
-                    newIndex = 0;
-                } else if (newIndex > this.carouselSlideCount) {
-                    newIndex = this.carouselSlideCount;
-                }
-
-                this.carouselIndex = newIndex;
-            },
+        showEmpty: {
+            type: Boolean,
+            default: false,
         },
-        computed: {
-            nonVariantImageCount() {
-                return this.product ? (this.product.AdditionalImages.length + this.product.LifeStyleImages.length) : 0;
-            },
-            totalImageCount() {
-                return this.nonVariantImageCount + (this.hasVariants ? 1 : 0);
-            },
-            showArrows() {
-                return this.totalImageCount > this.maxImagesShown;
-            },
-            carouselSlideCount() {
-                return this.totalImageCount - this.maxImagesShown; //number of spaces past the default state we can move
-            },
-
-            currentImageUrl() {
-                if (this.selectedImage) {
-                    return (this.usePathPrefix ? this.imageBasePath : '') + this.selectedImage;
-                }
-
-                return null;
-            },
-            currentImageStyle() {
-                if (this.currentImageUrl) {
-                    return { 'background-image': 'url("' + this.currentImageUrl + (this.usePathPrefix ? ';width=1200;height=1200' : '') + '")' };
-                }
-
-                return null;
-            },
-            variantImageSelected() {
-                const pathCompare = this.selectedImage.replace(this.imageBasePath, '');
-
-                return (this.selectedImage && ((this.variant && this.variant.ImageUrl === pathCompare) || (this.product && this.product.PrimaryImage && this.product.PrimaryImage.ImageUrl === pathCompare)));
-            },
-            variantImagePath() {
-                if (this.variant && this.variant.ImageUrl) {
-                    return this.imageBasePath + this.variant.ImageUrl + ';width=100;height=100';
-                } else if (this.product) {
-                    return this.imageBasePath + this.product.PrimaryImage.ImageUrl + ';width=100;height=100';
-                }
-
-                return null;
-            },
-            substitutedImage() {
-                return this.variantImageSelected && this.variant && this.variant.SubstitutedImage;
-            },
-            imageListClass() {
-                return 'up-' + Math.min(this.totalImageCount, this.maxImagesShown);
-            },
-            shiftStyle() {
-                return { left: '-' + this.carouselIndex * (100 / this.maxImagesShown) + '%' };
-            },
+        usePathPrefix: {
+            type: Boolean,
+            default: true,
         },
-        components: {
-            IconBase,
-            IconCaret,
+        forceNav: {
+            type: Boolean,
+            default: false,
+        },
+    });
+    const emit = defineEmits(['update']);
+
+    const carouselIndex = ref(0);
+    const maxImagesShown = ref(6);
+
+    // selecting images
+    function imageSelected(item) {
+        const pathCompare = props.selectedImage.replace(props.imageBasePath, '');
+        return pathCompare === item.ImageUrl;
+    }
+
+    function selectImage(item) {
+        if (!props.disabled) {
+            emit('update', item);
+        }
+    }
+
+    function selectVariantImage() {
+        if (!props.disabled) {
+            if (props.variant) {
+                emit('update', props.variant);
+            } else {
+                emit('update', props.product.PrimaryImage);
+            }
+        }
+    }
+
+    const variantImageSelected = computed(() => {
+        const pathCompare = props.selectedImage.replace(props.imageBasePath, '');
+        return (props.selectedImage && ((props.variant && props.variant.ImageUrl === pathCompare) || (props.product && props.product.PrimaryImage && props.product.PrimaryImage.ImageUrl === pathCompare)));
+    });
+
+    // moving carousel
+    function previous() {
+        moveCarousel(-1);
+    }
+
+    function next() {
+        moveCarousel(1);
+    }
+
+    function moveCarousel(number) {
+        let newIndex = carouselIndex.value + number;
+        if (newIndex < 0) {
+            newIndex = 0;
+        } else if (newIndex > carouselSlideCount.value) {
+            newIndex = carouselSlideCount.value;
+        }
+
+        carouselIndex.value = newIndex;
+    }
+
+    // image counts
+    const nonVariantImageCount = computed(() => {
+        return props.product ? (props.product.AdditionalImages.length + props.product.LifeStyleImages.length) : 0;
+    });
+
+    const totalImageCount = computed(() => {
+        return nonVariantImageCount.value + (props.hasVariants ? 1 : 0);
+    });
+
+    const showArrows = computed(() => {
+        return totalImageCount.value > maxImagesShown.value;
+    });
+
+    const carouselSlideCount = computed(() => {
+        return totalImageCount.value - maxImagesShown.value; //number of spaces past the default state we can move
+    });
+
+
+    // image paths and styles
+    function imagePath(item) {
+        if (item && item.ImageUrl) {
+            return props.imageBasePath + item.ImageUrl + ';width=100;height=100';
+        }
+
+        return null;
+    }
+
+    const currentImageUrl = computed(() => {
+        if (props.selectedImage) {
+            return (props.usePathPrefix ? props.imageBasePath : '') + props.selectedImage;
+        }
+        return null;
+    });
+
+    const currentImageStyle = computed(() => {
+        if (currentImageUrl.value) {
+            return { 'background-image': 'url("' + currentImageUrl.value + (props.usePathPrefix ? ';width=1200;height=1200' : '') + '")' };
+        }
+        return null;
+    });
+
+    const variantImagePath = computed(() => {
+        if (props.variant && props.variant.ImageUrl) {
+            return props.imageBasePath + props.variant.ImageUrl + ';width=100;height=100';
+        } else if (props.product) {
+            return props.imageBasePath + props.product.PrimaryImage.ImageUrl + ';width=100;height=100';
         }
-    };
+        return null;
+    });
+
+    const imageListClass = computed(() => {
+        return 'up-' + Math.min(totalImageCount.value, maxImagesShown.value);
+    });
+
+    const shiftStyle = computed(() => {
+        return { left: '-' + carouselIndex.value * (100 / maxImagesShown.value) + '%' };
+    });
+
+    const substitutedImage = computed(() => {
+        return variantImageSelected.value && props.variant && props.variant.SubstitutedImage;
+    });
 </script>