@skyservice-developers/vue-dev-kit 1.2.0 → 1.2.2

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.
Files changed (16) hide show
  1. package/dist/vue2/style.css +1 -1
  2. package/dist/vue2/vue-dev-kit.cjs +1 -1
  3. package/dist/vue2/vue-dev-kit.js +16 -21
  4. package/dist/vue3/style.css +1 -1
  5. package/dist/vue3/vue-dev-kit.cjs +1 -1
  6. package/dist/vue3/vue-dev-kit.js +211 -213
  7. package/package.json +1 -1
  8. package/src/vue2/components/Dialog.vue +1 -1
  9. package/src/vue2/components/DialogModal.vue +1 -1
  10. package/src/vue2/components/DialogNext.vue +36 -25
  11. package/src/vue2/components/Modal.vue +13 -5
  12. package/src/vue3/components/Dialog.vue +1 -1
  13. package/src/vue3/components/DialogModal.vue +1 -1
  14. package/src/vue3/components/DialogNext.vue +48 -37
  15. package/src/vue3/components/Header.vue +0 -1
  16. package/src/vue3/components/Modal.vue +15 -10
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skyservice-developers/vue-dev-kit",
3
- "version": "1.2.0",
3
+ "version": "1.2.2",
4
4
  "description": "Vue 2 and Vue 3 developer toolkit - components and helpers",
5
5
  "type": "module",
6
6
  "main": "./dist/vue3/vue-dev-kit.cjs",
package/src/vue2/components/Dialog.vue CHANGED
@@ -52,7 +52,7 @@ export default {
52
52
  },
53
53
  enableAnimation: {
54
54
  type: Boolean,
55
- default: true
55
+ default: false
56
56
  },
57
57
  closeOnEsc: {
58
58
  type: Boolean,
package/src/vue2/components/DialogModal.vue CHANGED
@@ -102,7 +102,7 @@ export default {
102
102
  },
103
103
  enableAnimation: {
104
104
  type: Boolean,
105
- default: true,
105
+ default: false,
106
106
  },
107
107
  closeOnEsc: {
108
108
  type: Boolean,
package/src/vue2/components/DialogNext.vue CHANGED
@@ -8,19 +8,18 @@
8
8
  <div class="sky-dialog-overlay" :class="{ 'sky-dialog-animate': enableAnimation }">
9
9
  <div ref="dialogContent" class="sky-dialog-content">
10
10
  <!-- Header -->
11
- <button class="sky-dialog-back" :title="closeText" @click="close">
12
- <svg width="15" height="15" viewBox="0 0 451.847 451.847" style="transform: rotate(90deg)">
13
- <path fill="currentColor" d="M225.923,354.706c-8.098,0-16.195-3.092-22.369-9.263L9.27,151.157c-12.359-12.359-12.359-32.397,0-44.751c12.354-12.354,32.388-12.354,44.748,0l171.905,171.915l171.906-171.909c12.359-12.354,32.391-12.354,44.744,0c12.365,12.354,12.365,32.392,0,44.751L248.292,345.449C242.115,351.621,234.018,354.706,225.923,354.706z"/>
14
- </svg>
15
- </button>
16
-
17
- <div class="sky-dialog-title" :class="{ 'sky-dialog-title-with-subtitle': subtitle }">
18
- {{ title }}
19
- <span v-if="subtitle" class="sky-dialog-subtitle">{{ subtitle }}</span>
11
+ <div class="sky-dialog-header">
12
+ <button class="sky-dialog-back" :title="closeText" @click="close">
13
+ <svg width="15" height="15" viewBox="0 0 451.847 451.847" style="transform: rotate(90deg)">
14
+ <path fill="currentColor" d="M225.923,354.706c-8.098,0-16.195-3.092-22.369-9.263L9.27,151.157c-12.359-12.359-12.359-32.397,0-44.751c12.354-12.354,32.388-12.354,44.748,0l171.905,171.915l171.906-171.909c12.359-12.354,32.391-12.354,44.744,0c12.365,12.354,12.365,32.392,0,44.751L248.292,345.449C242.115,351.621,234.018,354.706,225.923,354.706z"/>
15
+ </svg>
16
+ </button>
17
+ <div class="sky-dialog-title" :class="{ 'sky-dialog-title-with-subtitle': subtitle }">
18
+ {{ title }}
19
+ <span v-if="subtitle" class="sky-dialog-subtitle">{{ subtitle }}</span>
20
+ </div>
20
21
  </div>
21
22
 
22
- <div class="sky-dialog-clearfix" />
23
-
24
23
  <!-- Body -->
25
24
  <div
26
25
  ref="dialogPaper"
@@ -72,7 +71,7 @@ export default {
72
71
  },
73
72
  enableAnimation: {
74
73
  type: Boolean,
75
- default: true
74
+ default: false
76
75
  },
77
76
  closeOnEsc: {
78
77
  type: Boolean,
@@ -220,37 +219,52 @@ export default {
220
219
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.24);
221
220
  }
222
221
 
222
+ .sky-dialog-header {
223
+ display: flex;
224
+ align-items: center;
225
+ padding: 10px 14px;
226
+ }
227
+
223
228
  .sky-dialog-back {
224
- cursor: pointer;
225
- margin: 10px;
226
- padding: 14px 12px 6px;
227
- float: left;
228
- line-height: 1;
229
+ display: flex;
230
+ align-items: center;
231
+ justify-content: center;
232
+ width: 32px;
233
+ height: 32px;
234
+ padding: 0;
229
235
  background: transparent;
230
236
  border: none;
237
+ cursor: pointer;
231
238
  border-radius: 6px;
232
239
  color: var(--sky-dialog-back-color, #374151);
233
240
  transition: background-color 0.2s;
241
+ margin-right: 12px;
242
+ flex-shrink: 0;
243
+ }
244
+
245
+ .sky-dialog-back svg {
246
+ display: block;
234
247
  }
235
248
 
236
249
  .sky-dialog-back:hover {
237
250
  background-color: var(--sky-dialog-back-hover-bg, #f8f9fa);
238
251
  }
239
252
 
253
+ .sky-dialog-back:active {
254
+ background-color: var(--sky-dialog-back-active-bg, #e9ecef);
255
+ }
256
+
240
257
  .sky-dialog-title {
241
- max-width: calc(100% - 80px);
242
258
  font-size: var(--sky-dialog-title-size, 13pt);
243
- padding: 21px 0;
244
- padding-right: 0;
245
- float: left;
246
259
  white-space: nowrap;
247
260
  overflow: hidden;
248
261
  text-overflow: ellipsis;
249
262
  color: var(--sky-dialog-title-color, #252525);
263
+ min-width: 0;
250
264
  }
251
265
 
252
266
  .sky-dialog-title-with-subtitle {
253
- padding: 13px 0;
267
+ line-height: 1.2;
254
268
  }
255
269
 
256
270
  .sky-dialog-subtitle {
@@ -263,9 +277,6 @@ export default {
263
277
  text-overflow: ellipsis;
264
278
  }
265
279
 
266
- .sky-dialog-clearfix {
267
- clear: both;
268
- }
269
280
 
270
281
  .sky-dialog-paper {
271
282
  height: 100%;
package/src/vue2/components/Modal.vue CHANGED
@@ -1,12 +1,12 @@
1
1
  <template>
2
2
  <base-teleport to="body">
3
- <transition name="modal-fade">
3
+ <transition>
4
4
  <div v-if="isOpen" class="sky-modal-overlay" @click.self="handleOverlayClick">
5
5
  <div class="sky-modal" :style="modalStyle">
6
6
  <div class="sky-modal-header">
7
7
  <button class="sky-modal-back" @click="close" :title="closeTitle">
8
- <svg width="15" height="15" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
9
- <path d="M19 12H5M12 19l-7-7 7-7" stroke-linecap="round" stroke-linejoin="round"/>
8
+ <svg width="15" height="15" viewBox="0 0 451.847 451.847" style="transform: rotate(90deg)">
9
+ <path fill="currentColor" d="M225.923,354.706c-8.098,0-16.195-3.092-22.369-9.263L9.27,151.157c-12.359-12.359-12.359-32.397,0-44.751c12.354-12.354,32.388-12.354,44.748,0l171.905,171.915l171.906-171.909c12.359-12.354,32.391-12.354,44.744,0c12.365,12.354,12.365,32.392,0,44.751L248.292,345.449C242.115,351.621,234.018,354.706,225.923,354.706z"/>
10
10
  </svg>
11
11
  </button>
12
12
  <div class="sky-modal-title-wrapper">
@@ -165,8 +165,8 @@ export default {
165
165
  display: flex;
166
166
  align-items: center;
167
167
  justify-content: center;
168
- width: 40px;
169
- height: 40px;
168
+ width: 32px;
169
+ height: 32px;
170
170
  padding: 0;
171
171
  background: transparent;
172
172
  border: none;
@@ -177,10 +177,18 @@ export default {
177
177
  margin-right: 12px;
178
178
  }
179
179
 
180
+ .sky-modal-back svg {
181
+ display: block;
182
+ }
183
+
180
184
  .sky-modal-back:hover {
181
185
  background-color: var(--sky-modal-back-hover-bg, #f8f9fa);
182
186
  }
183
187
 
188
+ .sky-modal-back:active {
189
+ background-color: var(--sky-modal-back-active-bg, #e9ecef);
190
+ }
191
+
184
192
  .sky-modal-title-wrapper {
185
193
  flex: 1;
186
194
  min-width: 0;
package/src/vue3/components/Dialog.vue CHANGED
@@ -47,7 +47,7 @@ const props = defineProps({
47
47
  },
48
48
  enableAnimation: {
49
49
  type: Boolean,
50
- default: true
50
+ default: false
51
51
  },
52
52
  closeOnEsc: {
53
53
  type: Boolean,
package/src/vue3/components/DialogModal.vue CHANGED
@@ -116,7 +116,7 @@ const props = defineProps({
116
116
  },
117
117
  enableAnimation: {
118
118
  type: Boolean,
119
- default: true,
119
+ default: false,
120
120
  },
121
121
  closeOnEsc: {
122
122
  type: Boolean,
package/src/vue3/components/DialogNext.vue CHANGED
@@ -12,32 +12,31 @@
12
12
  >
13
13
  <div ref="dialogContent" class="sky-dialog-content">
14
14
  <!-- Header -->
15
- <button class="sky-dialog-back" :title="closeText" @click="close">
16
- <svg
17
- width="15"
18
- height="15"
19
- viewBox="0 0 451.847 451.847"
20
- style="transform: rotate(90deg)"
15
+ <div class="sky-dialog-header">
16
+ <button class="sky-dialog-back" :title="closeText" @click="close">
17
+ <svg
18
+ width="15"
19
+ height="15"
20
+ viewBox="0 0 451.847 451.847"
21
+ style="transform: rotate(90deg)"
22
+ >
23
+ <path
24
+ fill="currentColor"
25
+ d="M225.923,354.706c-8.098,0-16.195-3.092-22.369-9.263L9.27,151.157c-12.359-12.359-12.359-32.397,0-44.751c12.354-12.354,32.388-12.354,44.748,0l171.905,171.915l171.906-171.909c12.359-12.354,32.391-12.354,44.744,0c12.365,12.354,12.365,32.392,0,44.751L248.292,345.449C242.115,351.621,234.018,354.706,225.923,354.706z"
26
+ />
27
+ </svg>
28
+ </button>
29
+ <div
30
+ class="sky-dialog-title"
31
+ :class="{ 'sky-dialog-title-with-subtitle': subtitle }"
21
32
  >
22
- <path
23
- fill="currentColor"
24
- d="M225.923,354.706c-8.098,0-16.195-3.092-22.369-9.263L9.27,151.157c-12.359-12.359-12.359-32.397,0-44.751c12.354-12.354,32.388-12.354,44.748,0l171.905,171.915l171.906-171.909c12.359-12.354,32.391-12.354,44.744,0c12.365,12.354,12.365,32.392,0,44.751L248.292,345.449C242.115,351.621,234.018,354.706,225.923,354.706z"
25
- />
26
- </svg>
27
- </button>
28
-
29
- <div
30
- class="sky-dialog-title"
31
- :class="{ 'sky-dialog-title-with-subtitle': subtitle }"
32
- >
33
- {{ title }}
34
- <span v-if="subtitle" class="sky-dialog-subtitle">{{
35
- subtitle
36
- }}</span>
33
+ {{ title }}
34
+ <span v-if="subtitle" class="sky-dialog-subtitle">{{
35
+ subtitle
36
+ }}</span>
37
+ </div>
37
38
  </div>
38
39
 
39
- <div class="sky-dialog-clearfix" />
40
-
41
40
  <!-- Body -->
42
41
  <div
43
42
  ref="dialogPaper"
@@ -109,7 +108,7 @@ const props = defineProps({
109
108
  },
110
109
  enableAnimation: {
111
110
  type: Boolean,
112
- default: true,
111
+ default: false,
113
112
  },
114
113
  closeOnEsc: {
115
114
  type: Boolean,
@@ -265,37 +264,52 @@ onUnmounted(() => {
265
264
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.24);
266
265
  }
267
266
 
267
+ .sky-dialog-header {
268
+ display: flex;
269
+ align-items: center;
270
+ padding: 10px 14px;
271
+ }
272
+
268
273
  .sky-dialog-back {
269
- cursor: pointer;
270
- margin: 10px;
271
- padding: 14px 12px 6px;
272
- float: left;
273
- line-height: 1;
274
+ display: flex;
275
+ align-items: center;
276
+ justify-content: center;
277
+ width: 32px;
278
+ height: 32px;
279
+ padding: 0;
274
280
  background: transparent;
275
281
  border: none;
282
+ cursor: pointer;
276
283
  border-radius: 6px;
277
284
  color: var(--sky-dialog-back-color, #374151);
278
285
  transition: background-color 0.2s;
286
+ margin-right: 12px;
287
+ flex-shrink: 0;
288
+ }
289
+
290
+ .sky-dialog-back svg {
291
+ display: block;
279
292
  }
280
293
 
281
294
  .sky-dialog-back:hover {
282
295
  background-color: var(--sky-dialog-back-hover-bg, #f8f9fa);
283
296
  }
284
297
 
298
+ .sky-dialog-back:active {
299
+ background-color: var(--sky-dialog-back-active-bg, #e9ecef);
300
+ }
301
+
285
302
  .sky-dialog-title {
286
- max-width: calc(100% - 80px);
287
303
  font-size: var(--sky-dialog-title-size, 13pt);
288
- padding: 21px 0;
289
- padding-right: 0;
290
- float: left;
291
304
  white-space: nowrap;
292
305
  overflow: hidden;
293
306
  text-overflow: ellipsis;
294
307
  color: var(--sky-dialog-title-color, #252525);
308
+ min-width: 0;
295
309
  }
296
310
 
297
311
  .sky-dialog-title-with-subtitle {
298
- padding: 13px 0;
312
+ line-height: 1.2;
299
313
  }
300
314
 
301
315
  .sky-dialog-subtitle {
@@ -308,9 +322,6 @@ onUnmounted(() => {
308
322
  text-overflow: ellipsis;
309
323
  }
310
324
 
311
- .sky-dialog-clearfix {
312
- clear: both;
313
- }
314
325
 
315
326
  .sky-dialog-paper {
316
327
  height: 100%;
package/src/vue3/components/Header.vue CHANGED
@@ -333,7 +333,6 @@ const handleBack = () => {
333
333
  flex-direction: row;
334
334
  align-items: center;
335
335
  justify-content: space-between;
336
- gap: var(--sky-header-actions-gap, 12px);
337
336
  }
338
337
 
339
338
  .btn-back {
package/src/vue3/components/Modal.vue CHANGED
@@ -1,6 +1,6 @@
1
1
  <template>
2
2
  <BaseTeleport to="body">
3
- <transition name="modal-fade">
3
+ <transition>
4
4
  <div
5
5
  v-if="modelValue"
6
6
  class="sky-modal-overlay"
@@ -12,15 +12,12 @@
12
12
  <svg
13
13
  width="15"
14
14
  height="15"
15
- viewBox="0 0 24 24"
16
- fill="none"
17
- stroke="currentColor"
18
- stroke-width="2"
15
+ viewBox="0 0 451.847 451.847"
16
+ style="transform: rotate(90deg)"
19
17
  >
20
18
  <path
21
- d="M19 12H5M12 19l-7-7 7-7"
22
- stroke-linecap="round"
23
- stroke-linejoin="round"
19
+ fill="currentColor"
20
+ d="M225.923,354.706c-8.098,0-16.195-3.092-22.369-9.263L9.27,151.157c-12.359-12.359-12.359-32.397,0-44.751c12.354-12.354,32.388-12.354,44.748,0l171.905,171.915l171.906-171.909c12.359-12.354,32.391-12.354,44.744,0c12.365,12.354,12.365,32.392,0,44.751L248.292,345.449C242.115,351.621,234.018,354.706,225.923,354.706z"
24
21
  />
25
22
  </svg>
26
23
  </button>
@@ -169,8 +166,8 @@ onUnmounted(() => {
169
166
  display: flex;
170
167
  align-items: center;
171
168
  justify-content: center;
172
- width: 40px;
173
- height: 40px;
169
+ width: 32px;
170
+ height: 32px;
174
171
  padding: 0;
175
172
  background: transparent;
176
173
  border: none;
@@ -181,10 +178,18 @@ onUnmounted(() => {
181
178
  margin-right: 12px;
182
179
  }
183
180
 
181
+ .sky-modal-back svg {
182
+ display: block;
183
+ }
184
+
184
185
  .sky-modal-back:hover {
185
186
  background-color: var(--sky-modal-back-hover-bg, #f8f9fa);
186
187
  }
187
188
 
189
+ .sky-modal-back:active {
190
+ background-color: var(--sky-modal-back-active-bg, #e9ecef);
191
+ }
192
+
188
193
  .sky-modal-title-wrapper {
189
194
  flex: 1;
190
195
  min-width: 0;