@rypen-dev/shared-components 7.0.20 → 8.0.0

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>