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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@skyservice-developers/vue-dev-kit",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "Vue 3 developer toolkit - components and helpers",
   "type": "module",
   "main": "./dist/vue-dev-kit.cjs",
@@ -22,7 +22,8 @@
     "dev": "vite",
     "build": "vite build",
     "preview": "vite preview",
-    "prepublishOnly": "npm run build"
+    "prepublishOnly": "npm run build",
+    "release": "npm publish --access public"
   },
   "peerDependencies": {
     "vue": "^3.4.0"

package/src/components/Dialog.vue

@@ -8,11 +8,12 @@
     :close-text="closeText"
     :enable-animation="enableAnimation"
     :close-on-esc="closeOnEsc"
+    :has-buttons="!!$slots.buttons"
     @close="$emit('close')"
     @save="$emit('save')"
   >
     <slot></slot>
-    <template #buttons>
+    <template v-if="$slots.buttons" #buttons>
       <slot name="buttons"></slot>
     </template>
   </component>

package/src/components/DialogModal.vue

@@ -27,6 +27,7 @@
             <div
               ref="dialogPaper"
               class="sky-dialog-paper"
+              :class="{ 'sky-dialog-paper-no-footer': !showFooter }"
               @touchstart="handleTouchStart"
               @touchend="handleTouchEnd"
             >
@@ -36,7 +37,7 @@
             </div>
 
             <!-- Footer -->
-            <div v-if="$slots.buttons" class="sky-dialog-footer" :class="{ 'sky-dialog-footer-animate': enableAnimation }">
+            <div v-if="showFooter" class="sky-dialog-footer" :class="{ 'sky-dialog-footer-animate': enableAnimation }">
               <slot name="buttons"></slot>
             </div>
           </div>
@@ -47,9 +48,11 @@
 </template>
 
 <script setup>
-import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue'
+import { ref, computed, watch, onMounted, onUnmounted, nextTick, useSlots } from 'vue'
 import { isIosWebview, isAndroidWebview } from '../utils/webviewCheck'
 
+const slots = useSlots()
+
 const props = defineProps({
   modelValue: {
     type: Boolean,
@@ -78,6 +81,10 @@ const props = defineProps({
   closeOnEsc: {
     type: Boolean,
     default: true
+  },
+  hasButtons: {
+    type: Boolean,
+    default: null
   }
 })
 
@@ -103,6 +110,16 @@ const isAndroid = computed(() => {
   }
 })
 
+// Determine if footer should be shown
+const showFooter = computed(() => {
+  // If hasButtons prop is explicitly set, use it
+  if (props.hasButtons !== null) {
+    return props.hasButtons
+  }
+  // Fallback to slot check (for direct usage without Dialog wrapper)
+  return !!slots.buttons
+})
+
 const close = () => {
   emit('update:modelValue', false)
   emit('close')
@@ -318,9 +335,9 @@ onUnmounted(() => {
   }
 
   /* Full height when no footer */
-  .sky-dialog-content:not(:has(.sky-dialog-footer)) .sky-dialog-paper {
-    height: calc(100% - 90px);
-    max-height: calc(100% - 90px);
+  .sky-dialog-paper-no-footer {
+    height: calc(100% - 70px);
+    max-height: calc(100% - 70px);
     margin-bottom: 10px;
   }
 
@@ -342,9 +359,9 @@ onUnmounted(() => {
   }
 
   /* Full height when no footer */
-  .sky-dialog-content:not(:has(.sky-dialog-footer)) .sky-dialog-paper {
-    height: calc(100% - 80px);
-    max-height: calc(100% - 80px);
+  .sky-dialog-paper-no-footer {
+    height: calc(100% - 60px);
+    max-height: calc(100% - 60px);
   }
 
   .sky-dialog-footer {
@@ -378,8 +395,8 @@ onUnmounted(() => {
   }
 
   /* Full height when no footer */
-  .sky-dialog-content:not(:has(.sky-dialog-footer)) .sky-dialog-paper {
-    height: calc(100% - 90px - env(safe-area-inset-top));
+  .sky-dialog-paper-no-footer {
+    height: calc(100% - 60px - env(safe-area-inset-top));
   }
 
   .sky-dialog-footer {

package/src/components/DialogNext.vue

@@ -26,6 +26,7 @@
             <div
               ref="dialogPaper"
               class="sky-dialog-paper"
+              :class="{ 'sky-dialog-paper-no-footer': !showFooter }"
               @touchstart="handleTouchStart"
               @touchend="handleTouchEnd"
             >
@@ -35,7 +36,7 @@
             </div>
 
             <!-- Footer -->
-            <div v-if="$slots.buttons" class="sky-dialog-footer" :class="{ 'sky-dialog-footer-animate': enableAnimation }">
+            <div v-if="showFooter" class="sky-dialog-footer" :class="{ 'sky-dialog-footer-animate': enableAnimation }">
               <slot name="buttons"></slot>
             </div>
           </div>
@@ -46,9 +47,11 @@
 </template>
 
 <script setup>
-import { ref, computed, watch, onMounted, onUnmounted, nextTick } from 'vue'
+import { ref, computed, watch, onMounted, onUnmounted, nextTick, useSlots } from 'vue'
 import { isIosWebview, isAndroidWebview } from '../utils/webviewCheck'
 
+const slots = useSlots()
+
 const props = defineProps({
   modelValue: {
     type: Boolean,
@@ -77,6 +80,10 @@ const props = defineProps({
   closeOnEsc: {
     type: Boolean,
     default: true
+  },
+  hasButtons: {
+    type: Boolean,
+    default: null
   }
 })
 
@@ -102,6 +109,16 @@ const isAndroid = computed(() => {
   }
 })
 
+// Determine if footer should be shown
+const showFooter = computed(() => {
+  // If hasButtons prop is explicitly set, use it
+  if (props.hasButtons !== null) {
+    return props.hasButtons
+  }
+  // Fallback to slot check (for direct usage without Dialog wrapper)
+  return !!slots.buttons
+})
+
 const close = () => {
   emit('update:modelValue', false)
   emit('close')
@@ -314,9 +331,9 @@ onUnmounted(() => {
   }
 
   /* Full height when no footer */
-  .sky-dialog-content:not(:has(.sky-dialog-footer)) .sky-dialog-paper {
-    height: calc(100% - 90px);
-    max-height: calc(100% - 90px);
+  .sky-dialog-paper-no-footer {
+    height: calc(100% - 70px);
+    max-height: calc(100% - 70px);
     margin-bottom: 10px;
   }
 }
@@ -332,9 +349,9 @@ onUnmounted(() => {
   }
 
   /* Full height when no footer */
-  .sky-dialog-content:not(:has(.sky-dialog-footer)) .sky-dialog-paper {
-    height: calc(100% - 80px);
-    max-height: calc(100% - 80px);
+  .sky-dialog-paper-no-footer {
+    height: calc(100% - 60px);
+    max-height: calc(100% - 60px);
   }
 
   .sky-dialog-footer {
@@ -368,8 +385,8 @@ onUnmounted(() => {
   }
 
   /* Full height when no footer */
-  .sky-dialog-content:not(:has(.sky-dialog-footer)) .sky-dialog-paper {
-    height: calc(100% - 90px - env(safe-area-inset-top));
+  .sky-dialog-paper-no-footer {
+    height: calc(100% - 60px - env(safe-area-inset-top));
   }
 
   .sky-dialog-footer {