@burh/nuxt-core 1.0.500 → 1.0.502

package/components/burh-ds/Carousel/ImageCarousel.vue

@@ -1,111 +1,111 @@
-<template>
-	<vue-slick-carousel v-bind="settings" :arrows="true" :dots="true">
-		<div
-			v-for="(item, index) in carouselItems"
-			:key="index"
-			class="carousel__image"
-		>
-			<img :src="item.img" :alt="item.title" draggable="false">
-		</div>
-	</vue-slick-carousel>
-</template>
-
-<script>
-import VueSlickCarousel from 'vue-slick-carousel';
-import 'vue-slick-carousel/dist/vue-slick-carousel.css';
-import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css';
-
-export default {
-	name: 'ImageCarousel',
-	components: {
-		VueSlickCarousel
-	},
-	props: {
-		carouselItems: {
-			type: Array,
-			default: () => {
-				return [];
-			}
-		},
-		dots: {
-			type: Boolean,
-			default: true
-		},
-		infinite: {
-			type: Boolean,
-			default: true
-		},
-		autoplay: {
-			type: Boolean,
-			default: true
-		},
-		slides: {
-			type: Number,
-			default: 3
-		},
-		speed: {
-			type: Number,
-			default: 500
-		},
-		breakpoints: {
-			type: Array,
-			default: () => {
-				return [
-					{
-						breakpoint: 800,
-						settings: {
-							slidesToShow: 2,
-							slidesToScroll: 2
-						}
-					},
-					{
-						breakpoint: 600,
-						settings: {
-							slidesToShow: 1,
-							slidesToScroll: 1
-						}
-					}
-				];
-			}
-		}
-	},
-	data() {
-		return {
-			settings: {}
-		};
-	},
-	mounted() {
-		const settings = {
-			dots: this.dots,
-			infinite: this.infinite,
-			autoplay: this.autoplay,
-			slidesToShow: this.slides,
-			slidesToScroll: this.slides,
-			speed: this.speed,
-			responsive: this.breakpoints
-		};
-
-		this.settings = settings;
-	}
-};
-</script>
-
-<style lang="scss">
-    .carousel__image {
-        padding: 20px 0;
-        display: flex!important;
-        align-items: center;
-        justify-content: center;
-        user-select: none;
-        img {
-            display: block;
-            width: 150px;
-            padding: 10px;
-            // filter: grayscale(1) invert(1) brightness(0.8);
-            transition: filter 0.5s;
-            &:hover {
-                filter: none;
-            }
-        }
-    }
-</style>
+<template>
+	<vue-slick-carousel v-bind="settings" :arrows="true" :dots="true">
+		<div
+			v-for="(item, index) in carouselItems"
+			:key="index"
+			class="carousel__image"
+		>
+			<img :src="item.img" :alt="item.title" draggable="false">
+		</div>
+	</vue-slick-carousel>
+</template>
+
+<script>
+import VueSlickCarousel from 'vue-slick-carousel';
+import 'vue-slick-carousel/dist/vue-slick-carousel.css';
+import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css';
+
+export default {
+	name: 'ImageCarousel',
+	components: {
+		VueSlickCarousel
+	},
+	props: {
+		carouselItems: {
+			type: Array,
+			default: () => {
+				return [];
+			}
+		},
+		dots: {
+			type: Boolean,
+			default: true
+		},
+		infinite: {
+			type: Boolean,
+			default: true
+		},
+		autoplay: {
+			type: Boolean,
+			default: true
+		},
+		slides: {
+			type: Number,
+			default: 3
+		},
+		speed: {
+			type: Number,
+			default: 500
+		},
+		breakpoints: {
+			type: Array,
+			default: () => {
+				return [
+					{
+						breakpoint: 800,
+						settings: {
+							slidesToShow: 2,
+							slidesToScroll: 2
+						}
+					},
+					{
+						breakpoint: 600,
+						settings: {
+							slidesToShow: 1,
+							slidesToScroll: 1
+						}
+					}
+				];
+			}
+		}
+	},
+	data() {
+		return {
+			settings: {}
+		};
+	},
+	mounted() {
+		const settings = {
+			dots: this.dots,
+			infinite: this.infinite,
+			autoplay: this.autoplay,
+			slidesToShow: this.slides,
+			slidesToScroll: this.slides,
+			speed: this.speed,
+			responsive: this.breakpoints
+		};
+
+		this.settings = settings;
+	}
+};
+</script>
+
+<style lang="scss">
+    .carousel__image {
+        padding: 20px 0;
+        display: flex!important;
+        align-items: center;
+        justify-content: center;
+        user-select: none;
+        img {
+            display: block;
+            width: 150px;
+            padding: 10px;
+            // filter: grayscale(1) invert(1) brightness(0.8);
+            transition: filter 0.5s;
+            &:hover {
+                filter: none;
+            }
+        }
+    }
+</style>

package/components/burh-ds/Chart/DoughnutChart.vue

@@ -1,20 +1,20 @@
-<script>
-import { Doughnut } from 'vue-chartjs';
-
-export default {
-	extends: Doughnut,
-	props: ['data'],
-	data() {
-		return {
-			options: {
-				legend: {
-					display: false
-				}
-			}
-		};
-	},
-	mounted() {
-		this.renderChart(this.data, this.options);
-	}
-};
-</script>
+<script>
+import { Doughnut } from 'vue-chartjs';
+
+export default {
+	extends: Doughnut,
+	props: ['data'],
+	data() {
+		return {
+			options: {
+				legend: {
+					display: false
+				}
+			}
+		};
+	},
+	mounted() {
+		this.renderChart(this.data, this.options);
+	}
+};
+</script>

package/components/burh-ds/Collapse/DefaultCollapse.vue

@@ -1,70 +1,70 @@
-<template>
-	<collapse class="collapse__container">
-		<collapse-item
-			v-for="(item, index) in collapseItems"
-			:key="index"
-			class="collapse__container__item"
-			:class="customItemClass"
-		>
-			<h6 slot="title">{{ item.title }}</h6>
-			<div class="collapse__container__item__description">{{ item.description }}</div>
-		</collapse-item>
-	</collapse>
-</template>
-
-<script>
-import Collapse from '@burh/nuxt-core/components/argon-core/Collapse/Collapse.vue';
-import CollapseItem from '@burh/nuxt-core/components/argon-core/Collapse/CollapseItem.vue';
-
-export default {
-	name: 'DefaultCollapse',
-	components: {
-		Collapse,
-		CollapseItem
-	},
-	props: {
-		collapseItems: {},
-		customItemClass:{
-			type: String,
-			default: ''
-		},
-	}
-};
-</script>
-
-<style lang="scss">
-    .collapse__container {
-        &__item {
-            background: transparent;
-            box-shadow: 0 0 0;
-            padding: 20px 0;
-            h6 {
-                font-size: 1.5rem;
-                font-weight: 400;
-                max-width: 85%;
-                margin-bottom: 0;
-                padding: 10px 0;
-                @media (max-width: 800px) {
-                    & {
-                        font-size: 1rem;
-                    }
-                }
-            }
-            .card-header {
-                padding: 1.25rem 0;
-                &::after {
-                    color: #5865F2;
-                    font-size: 1.5rem;
-                }
-            }
-            &__description {
-                font-size: 1.2rem;
-                @media (max-width: 800px) {
-                    & {
-                        font-size: 1rem;
-                    }
-                }
-            }
-        }
-    }
-</style>
+<template>
+	<collapse class="collapse__container">
+		<collapse-item
+			v-for="(item, index) in collapseItems"
+			:key="index"
+			class="collapse__container__item"
+			:class="customItemClass"
+		>
+			<h6 slot="title">{{ item.title }}</h6>
+			<div class="collapse__container__item__description">{{ item.description }}</div>
+		</collapse-item>
+	</collapse>
+</template>
+
+<script>
+import Collapse from '@burh/nuxt-core/components/argon-core/Collapse/Collapse.vue';
+import CollapseItem from '@burh/nuxt-core/components/argon-core/Collapse/CollapseItem.vue';
+
+export default {
+	name: 'DefaultCollapse',
+	components: {
+		Collapse,
+		CollapseItem
+	},
+	props: {
+		collapseItems: {},
+		customItemClass:{
+			type: String,
+			default: ''
+		},
+	}
+};
+</script>
+
+<style lang="scss">
+    .collapse__container {
+        &__item {
+            background: transparent;
+            box-shadow: 0 0 0;
+            padding: 20px 0;
+            h6 {
+                font-size: 1.5rem;
+                font-weight: 400;
+                max-width: 85%;
+                margin-bottom: 0;
+                padding: 10px 0;
+                @media (max-width: 800px) {
+                    & {
+                        font-size: 1rem;
+                    }
+                }
+            }
+            .card-header {
+                padding: 1.25rem 0;
+                &::after {
+                    color: #5865F2;
+                    font-size: 1.5rem;
+                }
+            }
+            &__description {
+                font-size: 1.2rem;
+                @media (max-width: 800px) {
+                    & {
+                        font-size: 1rem;
+                    }
+                }
+            }
+        }
+    }
+</style>

package/components/burh-ds/Crop/Crop.vue

@@ -1,122 +1,122 @@
-<template>
-    <modal :show.sync="modals.show" size="lg">
-        <template slot="header">
-            <h5 class="modal-title" id="cropModalLabel">{{title}}</h5>
-        </template>
-        <template slot="close-button">
-            <button type="button" @click="$emit('cancel'); modals.show = false" data-dismiss="modal" aria-label="Close" class="close"><span>×</span></button>
-        </template>
-        <div>
-            <div style="height: 50vh;">
-                <vue-croppie
-                    ref="croppieRef"
-                    :enableResize="false"
-                    :viewport="viewport"
-                    @result="result"
-                    @update="update">
-                </vue-croppie>
-            </div>
-        </div>
-        <template slot="footer">
-            <base-button type="light" @click="$emit('cancel'); modals.show = false">Cancelar</base-button>
-            <base-button type="primary" @click="emitSaveCrop()">Salvar</base-button>
-        </template>
-    </modal>
-</template>
-
-<script>
-export default {
-    props: {
-        type: {
-            type: String,
-            default: () => 'avatar'
-        },
-        title: {
-            type: String,
-            default: () => 'Crop image'
-        },
-        show: {
-            type: Boolean,
-            default: () => false
-        },
-        file: String
-    },
-    mounted() {
-        this.bind();
-    },
-    data() {
-        return {
-            cropped: null,
-            viewport: {
-                width: this.type == 'avatar' ? 400 : 600,
-                height: this.type == 'avatar' ? 400 : 190,
-                type: 'square'
-            },
-            modals: {
-                show: this.show
-            }
-        }
-    },
-    methods: {
-        emitSaveCrop() {
-            let originalBase64 = this.file;
-            let croppedBase64 = this.cropped;
-
-            let originalFile = this.dataURLtoFile(originalBase64, 'original.png');
-            let originalFormData = new FormData();
-            originalFormData.append(this.type, originalFile, originalFile.name);
-
-            let croppedFile = this.dataURLtoFile(croppedBase64, 'cropped.png');
-            let croppedFormData = new FormData();
-            croppedFormData.append(this.type, croppedFile, croppedFile.name);
-
-            this.$emit('image-cropped', {
-                originalFile: originalFormData,
-                originalBase64: originalBase64,
-                croppedFile: croppedFormData,
-                croppedBase64: croppedBase64
-            });
-
-            this.modals.show = false;
-        },
-        dataURLtoFile(dataurl, filename) {
-            var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
-                bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
-            while(n--){
-                u8arr[n] = bstr.charCodeAt(n);
-            }
-            return new File([u8arr], filename, {type:mime});
-        },
-        bind() {
-            this.$refs.croppieRef.bind({
-                url: this.file
-            });
-        },
-        crop() {
-            let options = {
-                format: 'jpeg'
-            }
-
-            if(this.type == 'cover') {
-                options['size'] = {
-                    width: 2048,
-                    height: 400
-                }
-            }
-
-            this.$refs.croppieRef.result(options, (output) => {
-                this.cropped = output;
-            });
-        },
-        result(output) {
-            this.cropped = output;
-        },
-        update(val) {
-            this.crop()
-        },
-        rotate(rotationAngle) {
-            this.$refs.croppieRef.rotate(rotationAngle);
-        }
-    }
-}
+<template>
+    <modal :show.sync="modals.show" size="lg">
+        <template slot="header">
+            <h5 class="modal-title" id="cropModalLabel">{{title}}</h5>
+        </template>
+        <template slot="close-button">
+            <button type="button" @click="$emit('cancel'); modals.show = false" data-dismiss="modal" aria-label="Close" class="close"><span>×</span></button>
+        </template>
+        <div>
+            <div style="height: 50vh;">
+                <vue-croppie
+                    ref="croppieRef"
+                    :enableResize="false"
+                    :viewport="viewport"
+                    @result="result"
+                    @update="update">
+                </vue-croppie>
+            </div>
+        </div>
+        <template slot="footer">
+            <base-button type="light" @click="$emit('cancel'); modals.show = false">Cancelar</base-button>
+            <base-button type="primary" @click="emitSaveCrop()">Salvar</base-button>
+        </template>
+    </modal>
+</template>
+
+<script>
+export default {
+    props: {
+        type: {
+            type: String,
+            default: () => 'avatar'
+        },
+        title: {
+            type: String,
+            default: () => 'Crop image'
+        },
+        show: {
+            type: Boolean,
+            default: () => false
+        },
+        file: String
+    },
+    mounted() {
+        this.bind();
+    },
+    data() {
+        return {
+            cropped: null,
+            viewport: {
+                width: this.type == 'avatar' ? 400 : 600,
+                height: this.type == 'avatar' ? 400 : 190,
+                type: 'square'
+            },
+            modals: {
+                show: this.show
+            }
+        }
+    },
+    methods: {
+        emitSaveCrop() {
+            let originalBase64 = this.file;
+            let croppedBase64 = this.cropped;
+
+            let originalFile = this.dataURLtoFile(originalBase64, 'original.png');
+            let originalFormData = new FormData();
+            originalFormData.append(this.type, originalFile, originalFile.name);
+
+            let croppedFile = this.dataURLtoFile(croppedBase64, 'cropped.png');
+            let croppedFormData = new FormData();
+            croppedFormData.append(this.type, croppedFile, croppedFile.name);
+
+            this.$emit('image-cropped', {
+                originalFile: originalFormData,
+                originalBase64: originalBase64,
+                croppedFile: croppedFormData,
+                croppedBase64: croppedBase64
+            });
+
+            this.modals.show = false;
+        },
+        dataURLtoFile(dataurl, filename) {
+            var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
+                bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
+            while(n--){
+                u8arr[n] = bstr.charCodeAt(n);
+            }
+            return new File([u8arr], filename, {type:mime});
+        },
+        bind() {
+            this.$refs.croppieRef.bind({
+                url: this.file
+            });
+        },
+        crop() {
+            let options = {
+                format: 'jpeg'
+            }
+
+            if(this.type == 'cover') {
+                options['size'] = {
+                    width: 2048,
+                    height: 400
+                }
+            }
+
+            this.$refs.croppieRef.result(options, (output) => {
+                this.cropped = output;
+            });
+        },
+        result(output) {
+            this.cropped = output;
+        },
+        update(val) {
+            this.crop()
+        },
+        rotate(rotationAngle) {
+            this.$refs.croppieRef.rotate(rotationAngle);
+        }
+    }
+}
 </script>