@skyservice-developers/vue-dev-kit 1.0.4 → 1.0.5

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 (7) hide show
  1. package/dist/style.css +1 -1
  2. package/dist/vue-dev-kit.cjs +1 -1
  3. package/dist/vue-dev-kit.js +438 -424
  4. package/package.json +2 -2
  5. package/src/components/Dialog.vue +2 -1
  6. package/src/components/DialogModal.vue +24 -8
  7. package/src/components/DialogNext.vue +24 -8
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@skyservice-developers/vue-dev-kit",
3
- "version": "1.0.4",
3
+ "version": "1.0.5",
4
4
  "description": "Vue 3 developer toolkit - components and helpers",
5
5
  "type": "module",
6
6
  "main": "./dist/vue-dev-kit.cjs",
@@ -23,7 +23,7 @@
23
23
  "build": "vite build",
24
24
  "preview": "vite preview",
25
25
  "prepublishOnly": "npm run build",
26
- "publish": "npm publish --access public"
26
+ "release": "npm publish --access public"
27
27
  },
28
28
  "peerDependencies": {
29
29
  "vue": "^3.4.0"
package/src/components/Dialog.vue CHANGED
@@ -8,11 +8,12 @@
8
8
  :close-text="closeText"
9
9
  :enable-animation="enableAnimation"
10
10
  :close-on-esc="closeOnEsc"
11
+ :has-buttons="!!$slots.buttons"
11
12
  @close="$emit('close')"
12
13
  @save="$emit('save')"
13
14
  >
14
15
  <slot></slot>
15
- <template #buttons>
16
+ <template v-if="$slots.buttons" #buttons>
16
17
  <slot name="buttons"></slot>
17
18
  </template>
18
19
  </component>
package/src/components/DialogModal.vue CHANGED
@@ -27,7 +27,7 @@
27
27
  <div
28
28
  ref="dialogPaper"
29
29
  class="sky-dialog-paper"
30
- :class="{ 'sky-dialog-paper-no-footer': !$slots.buttons }"
30
+ :class="{ 'sky-dialog-paper-no-footer': !showFooter }"
31
31
  @touchstart="handleTouchStart"
32
32
  @touchend="handleTouchEnd"
33
33
  >
@@ -37,7 +37,7 @@
37
37
  </div>
38
38
 
39
39
  <!-- Footer -->
40
- <div v-if="$slots.buttons" class="sky-dialog-footer" :class="{ 'sky-dialog-footer-animate': enableAnimation }">
40
+ <div v-if="showFooter" class="sky-dialog-footer" :class="{ 'sky-dialog-footer-animate': enableAnimation }">
41
41
  <slot name="buttons"></slot>
42
42
  </div>
43
43
  </div>
@@ -48,9 +48,11 @@
48
48
  </template>
49
49
 
50
50
  <script setup>
51
- import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue'
51
+ import { ref, computed, watch, onMounted, onUnmounted, nextTick, useSlots } from 'vue'
52
52
  import { isIosWebview, isAndroidWebview } from '../utils/webviewCheck'
53
53
 
54
+ const slots = useSlots()
55
+
54
56
  const props = defineProps({
55
57
  modelValue: {
56
58
  type: Boolean,
@@ -79,6 +81,10 @@ const props = defineProps({
79
81
  closeOnEsc: {
80
82
  type: Boolean,
81
83
  default: true
84
+ },
85
+ hasButtons: {
86
+ type: Boolean,
87
+ default: null
82
88
  }
83
89
  })
84
90
 
@@ -104,6 +110,16 @@ const isAndroid = computed(() => {
104
110
  }
105
111
  })
106
112
 
113
+ // Determine if footer should be shown
114
+ const showFooter = computed(() => {
115
+ // If hasButtons prop is explicitly set, use it
116
+ if (props.hasButtons !== null) {
117
+ return props.hasButtons
118
+ }
119
+ // Fallback to slot check (for direct usage without Dialog wrapper)
120
+ return !!slots.buttons
121
+ })
122
+
107
123
  const close = () => {
108
124
  emit('update:modelValue', false)
109
125
  emit('close')
@@ -320,8 +336,8 @@ onUnmounted(() => {
320
336
 
321
337
  /* Full height when no footer */
322
338
  .sky-dialog-paper-no-footer {
323
- height: calc(100% - 90px);
324
- max-height: calc(100% - 90px);
339
+ height: calc(100% - 70px);
340
+ max-height: calc(100% - 70px);
325
341
  margin-bottom: 10px;
326
342
  }
327
343
 
@@ -344,8 +360,8 @@ onUnmounted(() => {
344
360
 
345
361
  /* Full height when no footer */
346
362
  .sky-dialog-paper-no-footer {
347
- height: calc(100% - 80px);
348
- max-height: calc(100% - 80px);
363
+ height: calc(100% - 60px);
364
+ max-height: calc(100% - 60px);
349
365
  }
350
366
 
351
367
  .sky-dialog-footer {
@@ -380,7 +396,7 @@ onUnmounted(() => {
380
396
 
381
397
  /* Full height when no footer */
382
398
  .sky-dialog-paper-no-footer {
383
- height: calc(100% - 90px - env(safe-area-inset-top));
399
+ height: calc(100% - 60px - env(safe-area-inset-top));
384
400
  }
385
401
 
386
402
  .sky-dialog-footer {
package/src/components/DialogNext.vue CHANGED
@@ -26,7 +26,7 @@
26
26
  <div
27
27
  ref="dialogPaper"
28
28
  class="sky-dialog-paper"
29
- :class="{ 'sky-dialog-paper-no-footer': !$slots.buttons }"
29
+ :class="{ 'sky-dialog-paper-no-footer': !showFooter }"
30
30
  @touchstart="handleTouchStart"
31
31
  @touchend="handleTouchEnd"
32
32
  >
@@ -36,7 +36,7 @@
36
36
  </div>
37
37
 
38
38
  <!-- Footer -->
39
- <div v-if="$slots.buttons" class="sky-dialog-footer" :class="{ 'sky-dialog-footer-animate': enableAnimation }">
39
+ <div v-if="showFooter" class="sky-dialog-footer" :class="{ 'sky-dialog-footer-animate': enableAnimation }">
40
40
  <slot name="buttons"></slot>
41
41
  </div>
42
42
  </div>
@@ -47,9 +47,11 @@
47
47
  </template>
48
48
 
49
49
  <script setup>
50
- import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue'
50
+ import { ref, computed, watch, onMounted, onUnmounted, nextTick, useSlots } from 'vue'
51
51
  import { isIosWebview, isAndroidWebview } from '../utils/webviewCheck'
52
52
 
53
+ const slots = useSlots()
54
+
53
55
  const props = defineProps({
54
56
  modelValue: {
55
57
  type: Boolean,
@@ -78,6 +80,10 @@ const props = defineProps({
78
80
  closeOnEsc: {
79
81
  type: Boolean,
80
82
  default: true
83
+ },
84
+ hasButtons: {
85
+ type: Boolean,
86
+ default: null
81
87
  }
82
88
  })
83
89
 
@@ -103,6 +109,16 @@ const isAndroid = computed(() => {
103
109
  }
104
110
  })
105
111
 
112
+ // Determine if footer should be shown
113
+ const showFooter = computed(() => {
114
+ // If hasButtons prop is explicitly set, use it
115
+ if (props.hasButtons !== null) {
116
+ return props.hasButtons
117
+ }
118
+ // Fallback to slot check (for direct usage without Dialog wrapper)
119
+ return !!slots.buttons
120
+ })
121
+
106
122
  const close = () => {
107
123
  emit('update:modelValue', false)
108
124
  emit('close')
@@ -316,8 +332,8 @@ onUnmounted(() => {
316
332
 
317
333
  /* Full height when no footer */
318
334
  .sky-dialog-paper-no-footer {
319
- height: calc(100% - 90px);
320
- max-height: calc(100% - 90px);
335
+ height: calc(100% - 70px);
336
+ max-height: calc(100% - 70px);
321
337
  margin-bottom: 10px;
322
338
  }
323
339
  }
@@ -334,8 +350,8 @@ onUnmounted(() => {
334
350
 
335
351
  /* Full height when no footer */
336
352
  .sky-dialog-paper-no-footer {
337
- height: calc(100% - 80px);
338
- max-height: calc(100% - 80px);
353
+ height: calc(100% - 60px);
354
+ max-height: calc(100% - 60px);
339
355
  }
340
356
 
341
357
  .sky-dialog-footer {
@@ -370,7 +386,7 @@ onUnmounted(() => {
370
386
 
371
387
  /* Full height when no footer */
372
388
  .sky-dialog-paper-no-footer {
373
- height: calc(100% - 90px - env(safe-area-inset-top));
389
+ height: calc(100% - 60px - env(safe-area-inset-top));
374
390
  }
375
391
 
376
392
  .sky-dialog-footer {