{"version":3,"sources":["webpack:///./src/components/TutorialPage.vue","webpack:///./src/service/ProductService.js","webpack:///./src/components/TutorialPage.vue?3142","webpack:///./src/components/TutorialPage.vue?a1fc"],"names":["class","_createElementVNode","_createElementBlock","_hoisted_1","_hoisted_2","_createVNode","_component_AppDemoActions","_hoisted_3","_hoisted_4","_component_Carousel","value","$data","numVisible","numScroll","responsiveOptions","header","_hoisted_5","item","slotProps","_hoisted_6","_hoisted_7","_hoisted_8","src","data","image","alt","name","_hoisted_10","_hoisted_11","price","inventoryStatus","toLowerCase","_hoisted_12","_component_Button","icon","_hoisted_13","circular","autoplayInterval","_hoisted_14","_hoisted_15","_hoisted_16","_hoisted_17","_hoisted_19","_hoisted_20","_hoisted_21","_hoisted_22","orientation","verticalViewPortHeight","style","_hoisted_23","_hoisted_24","_hoisted_25","_hoisted_26","_hoisted_28","_hoisted_29","_hoisted_30","ProductService","getProductsSmall","fetch","then","res","json","d","getProducts","getProductsWithOrdersSmall","products","breakpoint","productService","created","this","mounted","slice","__exports__","render"],"mappings":"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","file":"js/chunk-20e39d64.4cba3b32.js","sourcesContent":["<template>\n\t<div>\n\t\t<div class=\"content-section introduction\">\n\t\t\t<div class=\"feature-intro\">\n\t\t\t\t<h1>Carousel</h1>\n\t\t\t\t<p>Carousel is a content slider featuring various customization options.</p>\n\t\t\t</div>\n            <AppDemoActions />\n\t\t</div>\n\n\t\t<div class=\"content-section implementation\">\n            <div class=\"card\">\n                <Carousel :value=\"products\" :numVisible=\"3\" :numScroll=\"3\" :responsiveOptions=\"responsiveOptions\">\n                    <template #header>\n                        <h5>Basic</h5>\n                    </template>\n                    <template #item=\"slotProps\">\n                        <div class=\"product-item\">\n                            <div class=\"product-item-content\">\n                                <div class=\"mb-3\">\n                                    <img :src=\"'demo/images/product/' + slotProps.data.image\" :alt=\"slotProps.data.name\" class=\"product-image\" />\n                                </div>\n                                <div>\n                                    <h4 class=\"mb-1\">{{slotProps.data.name}}</h4>\n                                    <h6 class=\"mt-0 mb-3\">${{slotProps.data.price}}</h6>\n                                    <span :class=\"'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()\">{{slotProps.data.inventoryStatus}}</span>\n                                    <div class=\"car-buttons mt-5\">\n                                        <Button icon=\"pi pi-search\" class=\"p-button p-button-rounded mr-2\" />\n                                        <Button icon=\"pi pi-star-fill\" class=\"p-button-success p-button-rounded mr-2\" />\n                                        <Button icon=\"pi pi-cog\" class=\"p-button-help p-button-rounded\" />\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </template>\n                </Carousel>\n            </div>\n\n            <div class=\"card\">\n                <Carousel :value=\"products\" :numVisible=\"3\" :numScroll=\"1\" :responsiveOptions=\"responsiveOptions\" class=\"custom-carousel\" :circular=\"true\" :autoplayInterval=\"3000\">\n                    <template #header>\n                        <h5>Circular, AutoPlay, 3 Items per Page and Scroll by 1</h5>\n                    </template>\n                    <template #item=\"slotProps\">\n                        <div class=\"product-item\">\n                            <div class=\"product-item-content\">\n                                <div class=\"mb-3\">\n                                    <img :src=\"'demo/images/product/' + slotProps.data.image\" :alt=\"slotProps.data.name\" class=\"product-image\" />\n                                </div>\n                                <div>\n                                    <h4 class=\"mb-1\">{{slotProps.data.name}}</h4>\n                                    <h6 class=\"mt-0 mb-3\">${{slotProps.data.price}}</h6>\n                                    <span :class=\"'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()\">{{slotProps.data.inventoryStatus}}</span>\n                                    <div class=\"car-buttons mt-5\">\n                                        <Button icon=\"pi pi-search\" class=\"p-button p-button-rounded mr-2\" />\n                                        <Button icon=\"pi pi-star-fill\" class=\"p-button-success p-button-rounded mr-2\" />\n                                        <Button icon=\"pi pi-cog\" class=\"p-button-help p-button-rounded\" />\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </template>\n                </Carousel>\n            </div>\n\n            <div class=\"card\">\n                <Carousel :value=\"products\" :numVisible=\"1\" :numScroll=\"1\" orientation=\"vertical\" verticalViewPortHeight=\"352px\"\n                            style=\"max-width: 400px; margin-top: 2em\">\n                    <template #header>\n                        <h5>Vertical</h5>\n                    </template>\n                    <template #item=\"slotProps\">\n                        <div class=\"product-item\">\n                            <div class=\"product-item-content\">\n                                <div class=\"mb-3\">\n                                    <img :src=\"'demo/images/product/' + slotProps.data.image\" :alt=\"slotProps.data.name\" class=\"product-image\" />\n                                </div>\n                                <div>\n                                    <h4 class=\"mb-1\">{{slotProps.data.name}}</h4>\n                                    <h6 class=\"mt-0 mb-3\">${{slotProps.data.price}}</h6>\n                                    <span :class=\"'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()\">{{slotProps.data.inventoryStatus}}</span>\n                                    <div class=\"car-buttons mt-5\">\n                                        <Button icon=\"pi pi-search\" class=\"p-button p-button-rounded mr-2\" />\n                                        <Button icon=\"pi pi-star-fill\" class=\"p-button-success p-button-rounded mr-2\" />\n                                        <Button icon=\"pi pi-cog\" class=\"p-button-help p-button-rounded\" />\n                                    </div>\n                                </div>\n                            </div>\n                        </div>\n                    </template>\n                </Carousel>\n            </div>\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport ProductService from '../service/ProductService';\nexport default {\n\tdata() {\n\t\treturn {\n            products: null,\n\t\t\tresponsiveOptions: [\n\t\t\t\t{\n\t\t\t\t\tbreakpoint: '1024px',\n\t\t\t\t\tnumVisible: 3,\n\t\t\t\t\tnumScroll: 3\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tbreakpoint: '600px',\n\t\t\t\t\tnumVisible: 2,\n\t\t\t\t\tnumScroll: 2\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tbreakpoint: '480px',\n\t\t\t\t\tnumVisible: 1,\n\t\t\t\t\tnumScroll: 1\n\t\t\t\t}\n\t\t\t]\n\t\t}\n\t},\n    productService: null,\n\tcreated() {\n        this.productService = new ProductService();\n\t},\n\tmounted() {\n        this.productService.getProductsSmall().then(data => this.products = data.slice(0,9));\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.product-item {\n    .product-item-content {\n        border: 1px solid var(--surface-border);\n        border-radius: 3px;\n        margin: .3rem;\n        text-align: center;\n        padding: 2rem 0;\n    }\n    .product-image {\n        width: 50%;\n        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)\n    }\n}\n</style>","export default class ProductService {\n\n    getProductsSmall() {\n\t\treturn fetch('data/products-small.json').then(res => res.json()).then(d => d.data);\n\t}\n\n\tgetProducts() {\n\t\treturn fetch('data/products.json').then(res => res.json()).then(d => d.data);\n    }\n\n    getProductsWithOrdersSmall() {\n\t\treturn fetch('data/products-orders-small.json').then(res => res.json()).then(d => d.data);\n\t}\n\t\n}","import { render } from \"./TutorialPage.vue?vue&type=template&id=2a39bc16&scoped=true\"\nimport script from \"./TutorialPage.vue?vue&type=script&lang=js\"\nexport * from \"./TutorialPage.vue?vue&type=script&lang=js\"\n\nimport \"./TutorialPage.vue?vue&type=style&index=0&id=2a39bc16&lang=scss&scoped=true\"\n\nimport exportComponent from \"/Users/lu/repositories/member-site/node_modules/vue-loader-v16/dist/exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render],['__scopeId',\"data-v-2a39bc16\"]])\n\nexport default __exports__","export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--9-oneOf-1-0!../../node_modules/css-loader/dist/cjs.js??ref--9-oneOf-1-1!../../node_modules/vue-loader-v16/dist/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--9-oneOf-1-2!../../node_modules/sass-loader/dist/cjs.js??ref--9-oneOf-1-3!../../node_modules/cache-loader/dist/cjs.js??ref--1-0!../../node_modules/vue-loader-v16/dist/index.js??ref--1-1!./TutorialPage.vue?vue&type=style&index=0&id=2a39bc16&lang=scss&scoped=true\""],"sourceRoot":""}