@burh/nuxt-core 1.0.201 → 1.0.202

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -1,114 +1,114 @@
1
- <template>
2
- <component
3
- :is="tag"
4
- :class="[{ show: isOpen }, `drop${direction}`]"
5
- @click="toggleDropDown"
6
- v-click-outside="closeDropDown"
7
- >
8
- <slot name="title-container" :is-open="isOpen">
9
- <component
10
- :is="titleTag"
11
- class="btn-rotate"
12
- :class="[{'dropdown-toggle': hasToggle}, titleClasses]"
13
- :aria-expanded="isOpen"
14
- data-toggle="dropdown"
15
- >
16
- <slot name="title" :is-open="isOpen">
17
- <i :class="icon"></i> {{ title }}
18
- </slot>
19
- </component>
20
- </slot>
21
- <ul
22
- class="dropdown-menu"
23
- :class="[
24
- { show: isOpen },
25
- { 'dropdown-menu-right': menuOnRight },
26
- menuClasses
27
- ]"
28
- >
29
- <slot></slot>
30
- </ul>
31
- </component>
32
- </template>
33
- <script>
34
- export default {
35
- name: 'base-dropdown',
36
- props: {
37
- tag: {
38
- type: String,
39
- default: 'div',
40
- description: 'Dropdown html tag (e.g div, ul etc)'
41
- },
42
- titleTag: {
43
- type: String,
44
- default: 'button',
45
- description: 'Dropdown title (toggle) html tag'
46
- },
47
- title: {
48
- type: String,
49
- description: 'Dropdown title'
50
- },
51
- direction: {
52
- type: String,
53
- default: 'down', // up | down
54
- description: 'Dropdown menu direction (up|down)'
55
- },
56
- icon: {
57
- type: String,
58
- description: 'Dropdown icon'
59
- },
60
- titleClasses: {
61
- type: [String, Object, Array],
62
- description: 'Title css classes'
63
- },
64
- menuClasses: {
65
- type: [String, Object],
66
- description: 'Menu css classes'
67
- },
68
- menuOnRight: {
69
- type: Boolean,
70
- description: 'Whether menu should appear on the right'
71
- },
72
- hasToggle: {
73
- type: Boolean,
74
- description: 'Whether dropdown has arrow icon shown',
75
- default: true
76
- },
77
- isDropdownOpen: {
78
- type: Boolean,
79
- default: false
80
- }
81
- },
82
- data() {
83
- return {
84
- isOpen: false
85
- };
86
- },
87
- watch: {
88
- isOpen() {
89
- if (this.isOpen === false) {
90
- this.$emit('close');
91
- }
92
- },
93
- isDropdownOpen() {
94
- this.isOpen = this.isDropdownOpen;
95
- }
96
- },
97
- methods: {
98
- toggleDropDown() {
99
- this.isOpen = !this.isOpen;
100
- this.$emit('change', this.isOpen);
101
- },
102
- closeDropDown() {
103
- this.isOpen = false;
104
- this.$emit('change', false);
105
- }
106
- }
107
- };
108
- </script>
109
- <style lang="scss" scoped>
110
- .dropdown {
111
- cursor: pointer;
112
- user-select: none;
113
- }
114
- </style>
1
+ <template>
2
+ <component
3
+ :is="tag"
4
+ :class="[{ show: isOpen }, `drop${direction}`]"
5
+ @click="toggleDropDown"
6
+ v-click-outside="closeDropDown"
7
+ >
8
+ <slot name="title-container" :is-open="isOpen">
9
+ <component
10
+ :is="titleTag"
11
+ class="btn-rotate"
12
+ :class="[{'dropdown-toggle': hasToggle}, titleClasses]"
13
+ :aria-expanded="isOpen"
14
+ data-toggle="dropdown"
15
+ >
16
+ <slot name="title" :is-open="isOpen">
17
+ <i :class="icon"></i> {{ title }}
18
+ </slot>
19
+ </component>
20
+ </slot>
21
+ <ul
22
+ class="dropdown-menu"
23
+ :class="[
24
+ { show: isOpen },
25
+ { 'dropdown-menu-right': menuOnRight },
26
+ menuClasses
27
+ ]"
28
+ >
29
+ <slot></slot>
30
+ </ul>
31
+ </component>
32
+ </template>
33
+ <script>
34
+ export default {
35
+ name: 'base-dropdown',
36
+ props: {
37
+ tag: {
38
+ type: String,
39
+ default: 'div',
40
+ description: 'Dropdown html tag (e.g div, ul etc)'
41
+ },
42
+ titleTag: {
43
+ type: String,
44
+ default: 'button',
45
+ description: 'Dropdown title (toggle) html tag'
46
+ },
47
+ title: {
48
+ type: String,
49
+ description: 'Dropdown title'
50
+ },
51
+ direction: {
52
+ type: String,
53
+ default: 'down', // up | down
54
+ description: 'Dropdown menu direction (up|down)'
55
+ },
56
+ icon: {
57
+ type: String,
58
+ description: 'Dropdown icon'
59
+ },
60
+ titleClasses: {
61
+ type: [String, Object, Array],
62
+ description: 'Title css classes'
63
+ },
64
+ menuClasses: {
65
+ type: [String, Object],
66
+ description: 'Menu css classes'
67
+ },
68
+ menuOnRight: {
69
+ type: Boolean,
70
+ description: 'Whether menu should appear on the right'
71
+ },
72
+ hasToggle: {
73
+ type: Boolean,
74
+ description: 'Whether dropdown has arrow icon shown',
75
+ default: true
76
+ },
77
+ isDropdownOpen: {
78
+ type: Boolean,
79
+ default: false
80
+ }
81
+ },
82
+ data() {
83
+ return {
84
+ isOpen: false
85
+ };
86
+ },
87
+ watch: {
88
+ isOpen() {
89
+ if (this.isOpen === false) {
90
+ this.$emit('close');
91
+ }
92
+ },
93
+ isDropdownOpen() {
94
+ this.isOpen = this.isDropdownOpen;
95
+ }
96
+ },
97
+ methods: {
98
+ toggleDropDown() {
99
+ this.isOpen = !this.isOpen;
100
+ this.$emit('change', this.isOpen);
101
+ },
102
+ closeDropDown() {
103
+ this.isOpen = false;
104
+ this.$emit('change', false);
105
+ }
106
+ }
107
+ };
108
+ </script>
109
+ <style lang="scss" scoped>
110
+ .dropdown {
111
+ cursor: pointer;
112
+ user-select: none;
113
+ }
114
+ </style>
@@ -1,81 +1,81 @@
1
- <template>
2
- <card class="card">
3
- <h4 class="aria-text">Funcionalidades</h4>
4
- <ul class="list-unstyled list line-card">
5
- <functionality-item
6
- class="cursor-pointer card-item"
7
- :icone="firstItemIcon"
8
- :text="firstItemText"
9
- @functionality-click="$emit('click-first-item')"
10
- />
11
- <functionality-item
12
- class="cursor-pointer border-left card-item"
13
- :icone="secondItemIcon"
14
- :text="secondItemText"
15
- @functionality-click="$emit('click-second-item')"
16
- />
17
- </ul>
18
- <hr />
19
- <h6 class="list-title font-weight-bold">{{ title }}</h6>
20
- <ul class="list-unstyled list line-card">
21
- <slot></slot>
22
- </ul>
23
- <p class="footer-text">{{ context }}</p>
24
- </card>
25
- </template>
26
- <script>
27
- import FunctionalityItem from './FunctionalityItem';
28
- export default {
29
- name: 'performance-card',
30
- components: {
31
- FunctionalityItem
32
- },
33
- props: {
34
- title: String,
35
- context: String,
36
- firstItemText: String,
37
- secondItemText: String,
38
- firstItemIcon: String,
39
- secondItemIcon: String,
40
- subscribers: Number,
41
- jobs: Number,
42
- visualization: Number,
43
- skeleton: {
44
- type: Boolean,
45
- default: false
46
- }
47
- }
48
- };
49
- </script>
50
- <style lang="scss" scoped>
51
- hr {
52
- border-color: #e9ecef;
53
- }
54
-
55
- .list {
56
- margin: 1.8rem 0;
57
- display: flex;
58
- justify-content: space-evenly;
59
- }
60
-
61
- .line-card {
62
- ul {
63
- &:not(:first-child) {
64
- border: 2px solid #e9ecef;
65
- }
66
- }
67
- }
68
-
69
- .card-item {
70
- width: 50%;
71
- }
72
-
73
- .footer-text {
74
- margin-left: 1rem;
75
- opacity: 0.4;
76
- font-size: smaller;
77
- }
78
- .padding-border {
79
- padding-left: 7.5rem;
80
- }
81
- </style>
1
+ <template>
2
+ <card class="card">
3
+ <h4 class="aria-text">Funcionalidades</h4>
4
+ <ul class="list-unstyled list line-card">
5
+ <functionality-item
6
+ class="cursor-pointer card-item"
7
+ :icone="firstItemIcon"
8
+ :text="firstItemText"
9
+ @functionality-click="$emit('click-first-item')"
10
+ />
11
+ <functionality-item
12
+ class="cursor-pointer border-left card-item"
13
+ :icone="secondItemIcon"
14
+ :text="secondItemText"
15
+ @functionality-click="$emit('click-second-item')"
16
+ />
17
+ </ul>
18
+ <hr />
19
+ <h6 class="list-title font-weight-bold">{{ title }}</h6>
20
+ <ul class="list-unstyled list line-card">
21
+ <slot></slot>
22
+ </ul>
23
+ <p class="footer-text">{{ context }}</p>
24
+ </card>
25
+ </template>
26
+ <script>
27
+ import FunctionalityItem from './FunctionalityItem';
28
+ export default {
29
+ name: 'performance-card',
30
+ components: {
31
+ FunctionalityItem
32
+ },
33
+ props: {
34
+ title: String,
35
+ context: String,
36
+ firstItemText: String,
37
+ secondItemText: String,
38
+ firstItemIcon: String,
39
+ secondItemIcon: String,
40
+ subscribers: Number,
41
+ jobs: Number,
42
+ visualization: Number,
43
+ skeleton: {
44
+ type: Boolean,
45
+ default: false
46
+ }
47
+ }
48
+ };
49
+ </script>
50
+ <style lang="scss" scoped>
51
+ hr {
52
+ border-color: #e9ecef;
53
+ }
54
+
55
+ .list {
56
+ margin: 1.8rem 0;
57
+ display: flex;
58
+ justify-content: space-evenly;
59
+ }
60
+
61
+ .line-card {
62
+ ul {
63
+ &:not(:first-child) {
64
+ border: 2px solid #e9ecef;
65
+ }
66
+ }
67
+ }
68
+
69
+ .card-item {
70
+ width: 50%;
71
+ }
72
+
73
+ .footer-text {
74
+ margin-left: 1rem;
75
+ opacity: 0.4;
76
+ font-size: smaller;
77
+ }
78
+ .padding-border {
79
+ padding-left: 7.5rem;
80
+ }
81
+ </style>
@@ -1,106 +1,106 @@
1
- <template>
2
- <vue-slick-carousel v-bind="settings" :arrows="true" :dots="true">
3
- <div
4
- v-for="(item, index) in carouselItems"
5
- :key="index"
6
- class="carousel__image"
7
- >
8
- <img :src="item.img" :alt="item.title" draggable="false">
9
- </div>
10
- </vue-slick-carousel>
11
- </template>
12
-
13
- <script>
14
- import VueSlickCarousel from 'vue-slick-carousel';
15
- import 'vue-slick-carousel/dist/vue-slick-carousel.css';
16
- import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css';
17
-
18
- export default {
19
- name: 'ImageCarousel',
20
- components: {
21
- VueSlickCarousel
22
- },
23
- props: {
24
- carouselItems: {
25
- type: Array,
26
- default: () => {
27
- return [];
28
- }
29
- },
30
- dots: {
31
- type: Boolean,
32
- default: true
33
- },
34
- infinite: {
35
- type: Boolean,
36
- default: true
37
- },
38
- autoplay: {
39
- type: Boolean,
40
- default: true
41
- },
42
- slides: {
43
- type: Number,
44
- default: 3
45
- },
46
- speed: {
47
- type: Number,
48
- default: 500
49
- },
50
- breakpoints: {
51
- type: Array,
52
- default: () => {
53
- return [
54
- {
55
- breakpoint: 800,
56
- settings: {
57
- slidesToShow: 2,
58
- slidesToScroll: 2
59
- }
60
- },
61
- {
62
- breakpoint: 600,
63
- settings: {
64
- slidesToShow: 1,
65
- slidesToScroll: 1
66
- }
67
- }
68
- ];
69
- }
70
- }
71
- },
72
- data() {
73
- return {
74
- settings: {}
75
- };
76
- },
77
- mounted() {
78
- const settings = {
79
- dots: this.dots,
80
- infinite: this.infinite,
81
- autoplay: this.autoplay,
82
- slidesToShow: this.slides,
83
- slidesToScroll: this.slides,
84
- speed: this.speed,
85
- responsive: this.breakpoints
86
- };
87
-
88
- this.settings = settings;
89
- }
90
- };
91
- </script>
92
-
93
- <style lang="scss">
94
- .carousel__image {
95
- padding: 20px 0;
96
- display: flex!important;
97
- align-items: center;
98
- justify-content: center;
99
- user-select: none;
100
- img {
101
- display: block;
102
- width: 150px;
103
- padding: 10px;
104
- }
105
- }
106
- </style>
1
+ <template>
2
+ <vue-slick-carousel v-bind="settings" :arrows="true" :dots="true">
3
+ <div
4
+ v-for="(item, index) in carouselItems"
5
+ :key="index"
6
+ class="carousel__image"
7
+ >
8
+ <img :src="item.img" :alt="item.title" draggable="false">
9
+ </div>
10
+ </vue-slick-carousel>
11
+ </template>
12
+
13
+ <script>
14
+ import VueSlickCarousel from 'vue-slick-carousel';
15
+ import 'vue-slick-carousel/dist/vue-slick-carousel.css';
16
+ import 'vue-slick-carousel/dist/vue-slick-carousel-theme.css';
17
+
18
+ export default {
19
+ name: 'ImageCarousel',
20
+ components: {
21
+ VueSlickCarousel
22
+ },
23
+ props: {
24
+ carouselItems: {
25
+ type: Array,
26
+ default: () => {
27
+ return [];
28
+ }
29
+ },
30
+ dots: {
31
+ type: Boolean,
32
+ default: true
33
+ },
34
+ infinite: {
35
+ type: Boolean,
36
+ default: true
37
+ },
38
+ autoplay: {
39
+ type: Boolean,
40
+ default: true
41
+ },
42
+ slides: {
43
+ type: Number,
44
+ default: 3
45
+ },
46
+ speed: {
47
+ type: Number,
48
+ default: 500
49
+ },
50
+ breakpoints: {
51
+ type: Array,
52
+ default: () => {
53
+ return [
54
+ {
55
+ breakpoint: 800,
56
+ settings: {
57
+ slidesToShow: 2,
58
+ slidesToScroll: 2
59
+ }
60
+ },
61
+ {
62
+ breakpoint: 600,
63
+ settings: {
64
+ slidesToShow: 1,
65
+ slidesToScroll: 1
66
+ }
67
+ }
68
+ ];
69
+ }
70
+ }
71
+ },
72
+ data() {
73
+ return {
74
+ settings: {}
75
+ };
76
+ },
77
+ mounted() {
78
+ const settings = {
79
+ dots: this.dots,
80
+ infinite: this.infinite,
81
+ autoplay: this.autoplay,
82
+ slidesToShow: this.slides,
83
+ slidesToScroll: this.slides,
84
+ speed: this.speed,
85
+ responsive: this.breakpoints
86
+ };
87
+
88
+ this.settings = settings;
89
+ }
90
+ };
91
+ </script>
92
+
93
+ <style lang="scss">
94
+ .carousel__image {
95
+ padding: 20px 0;
96
+ display: flex!important;
97
+ align-items: center;
98
+ justify-content: center;
99
+ user-select: none;
100
+ img {
101
+ display: block;
102
+ width: 150px;
103
+ padding: 10px;
104
+ }
105
+ }
106
+ </style>