@burh/nuxt-core 1.0.183 → 1.0.185

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,95 +1,109 @@
1
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>
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
32
  </template>
33
33
  <script>
34
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
- },
78
- data() {
79
- return {
80
- isOpen: false
81
- };
82
- },
83
- methods: {
84
- toggleDropDown() {
85
- this.isOpen = !this.isOpen;
86
- this.$emit('change', this.isOpen);
87
- },
88
- closeDropDown() {
89
- this.isOpen = false;
90
- this.$emit('change', false);
91
- }
92
- }
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
+ }
93
107
  };
94
108
  </script>
95
109
  <style lang="scss" scoped>
@@ -147,6 +147,6 @@ export default {
147
147
  </script>
148
148
  <style>
149
149
  .modal.show {
150
- background-color: rgba(0, 0, 0, 0.3);
150
+ background-color: rgba(23,43,77, 0.7);
151
151
  }
152
152
  </style>
@@ -4,12 +4,11 @@
4
4
  modalContentClasses="container-fluid"
5
5
  headerClasses="row px-4 pt-5"
6
6
  bodyClasses="row px-4"
7
- v-on:close="$emit('close-modal')"
8
7
  size="lg"
9
8
  class="modal"
10
9
  >
11
- <template slot="header">
12
- <div class="pl-3">
10
+ <template slot="">
11
+ <div class="pl-3 mt-5 text-right">
13
12
  <h2 class="display-4">{{ title }}</h2>
14
13
  </div>
15
14
  </template>
@@ -17,7 +16,7 @@
17
16
  <validation-observer ref="appConfigModal" tag="div">
18
17
  <validation-provider
19
18
  tag="div"
20
- class="col-12"
19
+ class="col-12 mt-5"
21
20
  :vid="`name`"
22
21
  name="name"
23
22
  rules="required"
@@ -84,7 +83,7 @@
84
83
  <slot name="testes"></slot>
85
84
 
86
85
  <slot name="nota"></slot>
87
-
86
+
88
87
  <slot name="email"></slot>
89
88
 
90
89
  <div class="col-12 mb-4">
@@ -100,7 +99,7 @@
100
99
  >
101
100
  <button
102
101
  role="button"
103
- class="tag tag-outline-primary d-block w-100"
102
+ class="tag tag-outline-primary d-block w-100 buttons"
104
103
  :id="'button-' + buttons.id"
105
104
  :value="buttons.value"
106
105
  :class="
@@ -126,15 +125,24 @@
126
125
  role="button"
127
126
  @click="sendConfig()"
128
127
  class="ml-auto"
128
+ :disabled="!configInfo.title"
129
129
  >{{ configAppButton }}
130
130
  </base-button>
131
131
  </div>
132
132
  </validation-observer>
133
+
134
+ <span class="tool tool-close" @click="$emit('close-modal')">
135
+ Fechar
136
+ <font-awesome-icon
137
+ :icon="['fas', 'times']"
138
+ class="text-white ml-1"
139
+ />
140
+ </span>
133
141
  </modal>
134
142
  </template>
135
143
  <script>
136
- import { mask } from "vue-the-mask";
137
- import { Select, Option } from "element-ui";
144
+ import { mask } from 'vue-the-mask';
145
+ import { Select, Option } from 'element-ui';
138
146
  export default {
139
147
  components: {
140
148
  [Select.name]: Select,
@@ -146,16 +154,16 @@ export default {
146
154
  configInfo: {
147
155
  title: this.titleValue,
148
156
  textarea: this.textAreaValue,
149
- selectedTime: "",
157
+ selectedTime: '',
150
158
  workload: this.workloadValue,
151
159
  category: this.testCategories
152
160
  },
153
161
  currentSelectedButton: String,
154
- value: ""
162
+ value: ''
155
163
  };
156
164
  },
157
165
  model: {
158
- prop: "show"
166
+ prop: 'show'
159
167
  },
160
168
  props: {
161
169
  isCourse: {
@@ -165,9 +173,9 @@ export default {
165
173
  inputPlaceholders: {
166
174
  type: Object,
167
175
  default: () => ({
168
- firstInput: "Insira o nome do teste",
169
- secondInput: "Insira a descrição do teste",
170
- thirdInput: "Insira a carga horária do curso"
176
+ firstInput: 'Insira o nome do teste',
177
+ secondInput: 'Insira a descrição do teste',
178
+ thirdInput: 'Insira a carga horária do curso'
171
179
  })
172
180
  },
173
181
  show: {
@@ -176,7 +184,7 @@ export default {
176
184
  },
177
185
  name: {
178
186
  type: String,
179
- default: "Nome"
187
+ default: 'Nome'
180
188
  },
181
189
  defaultButtonSelected: {
182
190
  type: Number,
@@ -189,58 +197,58 @@ export default {
189
197
  buttons: {
190
198
  type: Array,
191
199
  default: () => [
192
- { id: "1", time: "5 minutos", value: "00:05:00" },
193
- { id: "2", time: "10 minutos", value: "00:10:00" },
194
- { id: "3", time: "15 minutos", value: "00:15:00" },
195
- { id: "4", time: "30 minutos", value: "00:30:00" },
196
- { id: "5", time: "45 minutos", value: "00:45:00" },
197
- { id: "6", time: "60 minutos", value: "01:00:00" },
198
- { id: "7", time: "2 horas", value: "02:00:00" },
199
- { id: "8", time: "8 horas", value: "08:00:00" }
200
+ { id: '1', time: '5 minutos', value: '00:05:00' },
201
+ { id: '2', time: '10 minutos', value: '00:10:00' },
202
+ { id: '3', time: '15 minutos', value: '00:15:00' },
203
+ { id: '4', time: '30 minutos', value: '00:30:00' },
204
+ { id: '5', time: '45 minutos', value: '00:45:00' },
205
+ { id: '6', time: '60 minutos', value: '01:00:00' },
206
+ { id: '7', time: '2 horas', value: '02:00:00' },
207
+ { id: '8', time: '8 horas', value: '08:00:00' }
200
208
  ],
201
- description: "Botoes de tempo"
209
+ description: 'Botoes de tempo'
202
210
  },
203
211
  title: {
204
212
  type: String,
205
- default: "Criar Teste",
206
- description: "Titulo do Modal"
213
+ default: 'Criar Teste',
214
+ description: 'Titulo do Modal'
207
215
  },
208
216
  workloadTitle: {
209
217
  type: String,
210
- default: "Carga horária",
218
+ default: 'Carga horária',
211
219
  description:
212
- "Carga horária do curso, apenas se o modal for usado para a pagina de cursos"
220
+ 'Carga horária do curso, apenas se o modal for usado para a pagina de cursos'
213
221
  },
214
222
  textAreaTitle: {
215
223
  type: String,
216
- default: "Descrição",
217
- description: "Titulo da text area"
224
+ default: 'Descrição',
225
+ description: 'Titulo da text area'
218
226
  },
219
227
  buttonAreaTitle: {
220
228
  type: String,
221
- default: "Tempo Limite",
222
- description: "Titulo da area de botões"
229
+ default: 'Tempo Limite',
230
+ description: 'Titulo da area de botões'
223
231
  },
224
232
  configAppButton: {
225
233
  type: String,
226
- default: "Salvar",
227
- description: "Botão de envio"
234
+ default: 'Salvar',
235
+ description: 'Botão de envio'
228
236
  },
229
237
  titleValue: {
230
238
  type: String,
231
- default: ""
239
+ default: ''
232
240
  },
233
241
  textAreaValue: {
234
242
  type: String,
235
- default: ""
243
+ default: ''
236
244
  },
237
245
  workloadValue: {
238
246
  type: String,
239
- default: "00:00:00"
247
+ default: '00:00:00'
240
248
  },
241
249
  time: {
242
250
  type: String,
243
- default: ""
251
+ default: ''
244
252
  },
245
253
  testCategories: {
246
254
  type: Number,
@@ -285,7 +293,7 @@ export default {
285
293
  return this.show;
286
294
  },
287
295
  set(show) {
288
- this.$emit("input", show);
296
+ this.$emit('input', show);
289
297
  }
290
298
  }
291
299
  },
@@ -304,7 +312,7 @@ export default {
304
312
  }
305
313
  },
306
314
  timeSelection(buttonId) {
307
- let btn = document.getElementById("button-" + buttonId);
315
+ let btn = document.getElementById('button-' + buttonId);
308
316
  this.configInfo.selectedTime = btn.value;
309
317
  this.currentSelectedButton = buttonId;
310
318
  },
@@ -321,7 +329,6 @@ export default {
321
329
  selectedTime: this.configInfo.selectedTime,
322
330
  category: this.configInfo.category
323
331
  };
324
-
325
332
  } else if (this.isCourse) {
326
333
  config = {
327
334
  title: this.configInfo.title,
@@ -330,14 +337,14 @@ export default {
330
337
  workload: this.configInfo.workload
331
338
  };
332
339
  }
333
- this.$emit("send-config-info", config);
340
+ this.$emit('send-config-info', config);
334
341
  this.openModal = false;
335
342
  }
336
343
  }
337
344
  };
338
345
  </script>
339
346
  <style lang="scss">
340
- @import "node_modules/@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss";
347
+ @import 'node_modules/@burh/nuxt-core/assets/sass/burh-ds/variables/_colors.scss';
341
348
 
342
349
  .fixed-button {
343
350
  .btn {
@@ -350,4 +357,34 @@ export default {
350
357
  width: 10rem;
351
358
  }
352
359
  }
360
+
361
+ .buttons:focus {
362
+ outline: 0;
363
+ }
364
+
365
+ .tool {
366
+ position: absolute;
367
+ top: 1rem;
368
+ z-index: 10;
369
+ color: $primary;
370
+ cursor: pointer;
371
+
372
+ &-close {
373
+ position: absolute;
374
+ width: 88px;
375
+ height: 27px;
376
+ right: 7px;
377
+ top: 7px;
378
+ display: flex;
379
+ justify-content: center;
380
+ align-items: center;
381
+
382
+ font-size: 11px;
383
+
384
+ font-weight: 500;
385
+ background: rgba(0, 0, 0, 0.2);
386
+ border-radius: 17.5px;
387
+ color: #fff;
388
+ }
389
+ }
353
390
  </style>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@burh/nuxt-core",
3
- "version": "1.0.183",
3
+ "version": "1.0.185",
4
4
  "description": "Design System and Components.",
5
5
  "author": "Burh",
6
6
  "scripts": {