From 95e0cfe13fd507824080c58d9f3da20a7b1dd4e2 Mon Sep 17 00:00:00 2001
From: cagataycivici <cagatay.civici@gmail.com>
Date: Wed, 1 Jul 2020 14:34:41 +0300
Subject: [PATCH] Add source code

---
 src/views/carousel/CarouselDemo.vue |  43 +++-----
 src/views/carousel/CarouselDoc.vue  | 149 +++++++++++++---------------
 2 files changed, 86 insertions(+), 106 deletions(-)

diff --git a/src/views/carousel/CarouselDemo.vue b/src/views/carousel/CarouselDemo.vue
index 8c9ff6af1..3bf54e146 100755
--- a/src/views/carousel/CarouselDemo.vue
+++ b/src/views/carousel/CarouselDemo.vue
@@ -11,7 +11,7 @@
             <div class="card">
                 <Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions">
                     <template #header>
-                        <h5 class="p-mb-0">Basic</h5>
+                        <h5>Basic</h5>
                     </template>
                     <template #item="slotProps">
                         <div class="product-item">
@@ -23,10 +23,10 @@
                                     <h4 class="p-mb-1">{{slotProps.data.name}}</h4>
                                     <h6 class="p-mt-0 p-mb-3">${{slotProps.data.price}}</h6>
                                     <span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
-                                    <div class="car-buttons p-mt-3">
-                                        <Button icon="pi pi-search" class="p-button-text p-button-rounded" />
-                                        <Button icon="pi pi-star" class="p-button-text p-button-rounded" />
-                                        <Button icon="pi pi-cog" class="p-button-text p-button-rounded" />
+                                    <div class="car-buttons p-mt-5">
+                                        <Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" />
+                                        <Button icon="pi pi-star" class="p-button-success p-button-rounded p-mr-2" />
+                                        <Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
                                     </div>
                                 </div>
                             </div>
@@ -50,10 +50,10 @@
                                     <h4 class="p-mb-1">{{slotProps.data.name}}</h4>
                                     <h6 class="p-mt-0 p-mb-3">${{slotProps.data.price}}</h6>
                                     <span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
-                                    <div class="car-buttons p-mt-3">
-                                        <Button icon="pi pi-search" class="p-button-text p-button-rounded" />
-                                        <Button icon="pi pi-star" class="p-button-text p-button-rounded" />
-                                        <Button icon="pi pi-cog" class="p-button-text p-button-rounded" />
+                                    <div class="car-buttons p-mt-5">
+                                        <Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" />
+                                        <Button icon="pi pi-star" class="p-button-success p-button-rounded p-mr-2" />
+                                        <Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
                                     </div>
                                 </div>
                             </div>
@@ -78,10 +78,10 @@
                                     <h4 class="p-mb-1">{{slotProps.data.name}}</h4>
                                     <h6 class="p-mt-0 p-mb-3">${{slotProps.data.price}}</h6>
                                     <span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()">{{slotProps.data.inventoryStatus}}</span>
-                                    <div class="car-buttons p-mt-3">
-                                        <Button icon="pi pi-search" class="p-button-text p-button-rounded" />
-                                        <Button icon="pi pi-star" class="p-button-text p-button-rounded" />
-                                        <Button icon="pi pi-cog" class="p-button-text p-button-rounded" />
+                                    <div class="car-buttons p-mt-5">
+                                        <Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" />
+                                        <Button icon="pi pi-star" class="p-button-success p-button-rounded p-mr-2" />
+                                        <Button icon="pi pi-cog" class="p-button-help p-button-rounded" />
                                     </div>
                                 </div>
                             </div>
@@ -96,7 +96,6 @@
 </template>
 
 <script>
-import CarService from "../../service/CarService";
 import ProductService from '../../service/ProductService';
 import CarouselDoc from "./CarouselDoc";
 
@@ -104,7 +103,6 @@ export default {
 	data() {
 		return {
             products: null,
-			cars: null,
 			responsiveOptions: [
 				{
 					breakpoint: '1024px',
@@ -124,19 +122,16 @@ export default {
 			]
 		}
 	},
-    carService: null,
     productService: null,
 	created() {
-        this.carService = new CarService();
         this.productService = new ProductService();
 	},
 	mounted() {
-        this.carService.getCarsSmall().then(data => this.cars = data);
         this.productService.getProductsSmall().then(data => this.products = data.slice(0,9));
 	},
 	components: {
 		'CarouselDoc': CarouselDoc
-	},
+	}
 }
 </script>
 
@@ -151,16 +146,8 @@ export default {
     }
 
     .product-image {
-        width: 150px;
+        width: 50%;
         box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)
     }
 }
-
-.p-carousel {
-    margin-bottom: 1rem;
-
-    &:last-child {
-        margin-bottom: 0rem;
-    }
-}
 </style>
\ No newline at end of file
diff --git a/src/views/carousel/CarouselDoc.vue b/src/views/carousel/CarouselDoc.vue
index 50c7640a6..f4ec98ae8 100755
--- a/src/views/carousel/CarouselDoc.vue
+++ b/src/views/carousel/CarouselDoc.vue
@@ -265,90 +265,96 @@ data() {
 				</a>
 <CodeHighlight>
 <template v-pre>
-&lt;Carousel :value="cars" :numVisible="4" :numScroll="3" :responsiveOptions="responsiveOptions"&gt;
-	&lt;template #header&gt;
-		&lt;h2&gt;Basic&lt;/h2&gt;
-	&lt;/template&gt;
-	&lt;template #item="slotProps"&gt;
-		&lt;div class="car-item"&gt;
-            &lt;div class="car-content"&gt;
-                &lt;div&gt;
-                    &lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand" /&gt;
+&lt;div class="card"&gt;
+&lt;Carousel :value="products" :numVisible="3" :numScroll="3" :responsiveOptions="responsiveOptions"&gt;
+    &lt;template #header&gt;
+        &lt;h5&gt;Basic&lt;/h5&gt;
+    &lt;/template&gt;
+    &lt;template #item="slotProps"&gt;
+        &lt;div class="product-item"&gt;
+            &lt;div class="product-item-content"&gt;
+                &lt;div class="p-mb-3"&gt;
+                    &lt;img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" /&gt;
                 &lt;/div&gt;
                 &lt;div&gt;
-                    &lt;div class="car-title"&gt;{{slotProps.data.brand}}&lt;/div&gt;
-                    &lt;div class="car-subtitle"&gt;{{slotProps.data.year}} | {{slotProps.data.color}}&lt;/div&gt;
-
-                    &lt;div class="car-buttons"&gt;
-                        &lt;Button icon="pi pi-search" class="p-button-secondary" /&gt;
-                        &lt;Button icon="pi pi-star" class="p-button-secondary" /&gt;
-                        &lt;Button icon="pi pi-cog" class="p-button-secondary" /&gt;
+                    &lt;h4 class="p-mb-1"&gt;{{slotProps.data.name}}&lt;/h4&gt;
+                    &lt;h6 class="p-mt-0 p-mb-3"&gt;${{slotProps.data.price}}&lt;/h6&gt;
+                    &lt;span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()"&gt;{{slotProps.data.inventoryStatus}}&lt;/span&gt;
+                    &lt;div class="car-buttons p-mt-5"&gt;
+                        &lt;Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" /&gt;
+                        &lt;Button icon="pi pi-star" class="p-button-success p-button-rounded p-mr-2" /&gt;
+                        &lt;Button icon="pi pi-cog" class="p-button-help p-button-rounded" /&gt;
                     &lt;/div&gt;
                 &lt;/div&gt;
             &lt;/div&gt;
         &lt;/div&gt;
-	&lt;/template&gt;
+    &lt;/template&gt;
 &lt;/Carousel&gt;
+&lt;/div&gt;
 
-&lt;Carousel :value="cars" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" class="custom-carousel" :circular="true" :autoplayInterval="3000"&gt;
-	&lt;template #header&gt;
-		&lt;h2&gt;Circular, AutoPlay, 3 Items per Page and Scroll by 1&lt;/h2&gt;
-	&lt;/template&gt;
-	&lt;template #item="slotProps"&gt;
-		&lt;div class="car-item"&gt;
-            &lt;div class="car-content"&gt;
-                &lt;div&gt;
-                    &lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand" /&gt;
+&lt;div class="card"&gt;
+&lt;Carousel :value="products" :numVisible="3" :numScroll="1" :responsiveOptions="responsiveOptions" class="custom-carousel" :circular="true" :autoplayInterval="3000"&gt;
+    &lt;template #header&gt;
+        &lt;h5&gt;Circular, AutoPlay, 3 Items per Page and Scroll by 1&lt;/h5&gt;
+    &lt;/template&gt;
+    &lt;template #item="slotProps"&gt;
+        &lt;div class="product-item"&gt;
+            &lt;div class="product-item-content"&gt;
+                &lt;div class="p-mb-3"&gt;
+                    &lt;img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" /&gt;
                 &lt;/div&gt;
                 &lt;div&gt;
-                    &lt;div class="car-title"&gt;{{slotProps.data.brand}}&lt;/div&gt;
-                    &lt;div class="car-subtitle"&gt;{{slotProps.data.year}} | {{slotProps.data.color}}&lt;/div&gt;
-
-                    &lt;div class="car-buttons"&gt;
-                        &lt;Button icon="pi pi-search" class="p-button-secondary" /&gt;
-                        &lt;Button icon="pi pi-star" class="p-button-secondary" /&gt;
-                        &lt;Button icon="pi pi-cog" class="p-button-secondary" /&gt;
+                    &lt;h4 class="p-mb-1"&gt;{{slotProps.data.name}}&lt;/h4&gt;
+                    &lt;h6 class="p-mt-0 p-mb-3"&gt;${{slotProps.data.price}}&lt;/h6&gt;
+                    &lt;span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()"&gt;{{slotProps.data.inventoryStatus}}&lt;/span&gt;
+                    &lt;div class="car-buttons p-mt-5"&gt;
+                        &lt;Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" /&gt;
+                        &lt;Button icon="pi pi-star" class="p-button-success p-button-rounded p-mr-2" /&gt;
+                        &lt;Button icon="pi pi-cog" class="p-button-help p-button-rounded" /&gt;
                     &lt;/div&gt;
                 &lt;/div&gt;
             &lt;/div&gt;
         &lt;/div&gt;
-	&lt;/template&gt;
+    &lt;/template&gt;
 &lt;/Carousel&gt;
+&lt;/div&gt;
 
-&lt;Carousel :value="cars" :numVisible="1" :numScroll="1" orientation="vertical" :responsiveOptions="responsiveOptions" verticalViewPortHeight="330px"
-			style="max-width: 400px; margin-top: 2em"&gt;
-	&lt;template #header&gt;
-		&lt;h2&gt;Vertical&lt;/h2&gt;
-	&lt;/template&gt;
-	&lt;template #item="slotProps"&gt;
-		&lt;div class="car-item"&gt;
-            &lt;div class="car-content"&gt;
-                &lt;div&gt;
-                    &lt;img :src="'demo/images/car/' + slotProps.data.brand + '.png'" :alt="slotProps.data.brand" /&gt;
+&lt;div class="card"&gt;
+&lt;Carousel :value="products" :numVisible="1" :numScroll="1" orientation="vertical" verticalViewPortHeight="325px"
+            style="max-width: 400px; margin-top: 2em"&gt;
+    &lt;template #header&gt;
+        &lt;h5&gt;Vertical&lt;/h5&gt;
+    &lt;/template&gt;
+    &lt;template #item="slotProps"&gt;
+        &lt;div class="product-item"&gt;
+            &lt;div class="product-item-content"&gt;
+                &lt;div class="p-mb-3"&gt;
+                    &lt;img :src="'demo/images/product/' + slotProps.data.image" :alt="slotProps.data.name" class="product-image" /&gt;
                 &lt;/div&gt;
                 &lt;div&gt;
-                    &lt;div class="car-title"&gt;{{slotProps.data.brand}}&lt;/div&gt;
-                    &lt;div class="car-subtitle"&gt;{{slotProps.data.year}} | {{slotProps.data.color}}&lt;/div&gt;
-
-                    &lt;div class="car-buttons"&gt;
-                        &lt;Button icon="pi pi-search" class="p-button-secondary" /&gt;
-                        &lt;Button icon="pi pi-star" class="p-button-secondary" /&gt;
-                        &lt;Button icon="pi pi-cog" class="p-button-secondary" /&gt;
+                    &lt;h4 class="p-mb-1"&gt;{{slotProps.data.name}}&lt;/h4&gt;
+                    &lt;h6 class="p-mt-0 p-mb-3"&gt;${{slotProps.data.price}}&lt;/h6&gt;
+                    &lt;span :class="'product-badge status-'+slotProps.data.inventoryStatus.toLowerCase()"&gt;{{slotProps.data.inventoryStatus}}&lt;/span&gt;
+                    &lt;div class="car-buttons p-mt-5"&gt;
+                        &lt;Button icon="pi pi-search" class="p-button p-button-rounded p-mr-2" /&gt;
+                        &lt;Button icon="pi pi-star" class="p-button-success p-button-rounded p-mr-2" /&gt;
+                        &lt;Button icon="pi pi-cog" class="p-button-help p-button-rounded" /&gt;
                     &lt;/div&gt;
                 &lt;/div&gt;
             &lt;/div&gt;
         &lt;/div&gt;
-	&lt;/template&gt;
+    &lt;/template&gt;
 &lt;/Carousel&gt;
 </template>
 </CodeHighlight>
+
 <CodeHighlight lang="javascript">
-import CarService from "../../service/CarService";
+import ProductService from '../../service/ProductService';
 
 export default {
 	data() {
 		return {
-			cars: null,
+            products: null,
 			responsiveOptions: [
 				{
 					breakpoint: '1024px',
@@ -368,42 +374,29 @@ export default {
 			]
 		}
 	},
-	carService: null,
+    productService: null,
 	created() {
-		this.carService = new CarService();
+        this.productService = new ProductService();
 	},
 	mounted() {
-		this.carService.getCarsSmall().then(data => this.cars = data);
-	},
+        this.productService.getProductsSmall().then(data => this.products = data.slice(0,9));
+	}
 }
 </CodeHighlight>
 
 <CodeHighlight lang="css">
-.car-item {
-    .car-content {
-        border: 1px solid var(--layer-2);
+.product-item {
+    .product-item-content {
+        border: 1px solid var(--surface-d);
         border-radius: 3px;
         margin: .3rem;
         text-align: center;
-        padding: 2em 0 2.25em 0;
+        padding: 2rem 0;
     }
 
-    .car-title {
-        font-weight: 600;
-        font-size: 20px;
-        margin-top: 24px;
-    }
-
-    .car-subtitle {
-        margin: .25em 0 2em 0;
-    }
-
-    button {
-        margin-left: .5rem;
-
-        &:first-child {
-            margin-left: 0;
-        }
+    .product-image {
+        width: 50%;
+        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.23)
     }
 }
 </CodeHighlight>