vue-modaller 1.0.7 → 1.0.8

package/README.md

@@ -1,45 +1,61 @@
-# VueModaller
+# VueModaller 🎭
 
-A flexible and powerful modal system for Vue 3 applications with TypeScript support, featuring draggable modals, side panels, and smooth animations.
+A flexible and powerful modal system for Vue 3 applications with TypeScript support. Create beautiful modals with draggable functionality, side panels, and smooth animations.
 
-## Features
+![Version](https://img.shields.io/npm/v/vue-modaller)
+![License](https://img.shields.io/npm/l/vue-modaller)
+![Vue](https://img.shields.io/badge/Vue-3.x-brightgreen)
+![TypeScript](https://img.shields.io/badge/TypeScript-Support-blue)
 
-✨ **Multiple Modal Types**
-- Standard modals
-- Side panels 
-- Panel modals
-- Draggable modals (Instagram-style)
+## ✨ Features
 
-🎨 **Customizable**
-- CSS variables for easy theming
-- BEM methodology for styling
-- Configurable animations
-- Custom handle styles for draggable modals
+🎯 **Multiple Modal Types**
+- **Standard Modal** - Classic centered modals
+- **Side Panel** - Slide-in panels from the side 
+- **Panel Modal** - Bottom-aligned panels with rounded top corners
+- **Draggable Modal** - Instagram-style draggable bottom sheets
 
-🚀 **Developer Experience**
-- TypeScript support
-- Vue 3 Composition API
-- Easy to use composable
-- Global component registration
+📱 **Responsive Design**
+- **Device Detection** - Automatic mobile/desktop detection
+- **Adaptive Types** - Different modal types for mobile vs desktop
+- **Touch Gestures** - Smooth drag and swipe interactions
+- **Velocity-based** - Smart animations based on gesture speed
+
+🎨 **Highly Customizable**
+- **CSS Variables** - Easy theming with CSS custom properties
+- **BEM Methodology** - Clean, maintainable CSS architecture
+- **Custom Animations** - Smooth CSS and JavaScript animations
+- **Handle Styling** - Fully customizable drag handles
 
-📱 **Mobile-Friendly**
-- Touch gesture support
-- Smooth animations
-- Responsive design
+🚀 **Developer Experience**
+- **TypeScript** - Full TypeScript support with detailed types
+- **Vue 3** - Built for Vue 3 Composition API
+- **Easy Integration** - Simple composable-based API
+- **Global Components** - Auto-registered components
+- **Slot Support** - Dynamic slot content with props
 
-## Installation
+## 📦 Installation
 
 ```bash
 npm install vue-modaller
 ```
 
-## Quick Start
+```bash
+yarn add vue-modaller
+```
 
-### 1. Install the plugin
+```bash
+pnpm add vue-modaller
+```
 
-```javascript
+## 🚀 Quick Start
+
+### 1. Install the Plugin
+
+```typescript
 import { createApp } from 'vue'
 import VueModaller from 'vue-modaller'
+import 'vue-modaller/dist/style.css' // Import styles
 import App from './App.vue'
 
 const app = createApp(App)
@@ -47,7 +63,7 @@ app.use(VueModaller)
 app.mount('#app')
 ```
 
-### 2. Add ModalRoot to your app
+### 2. Add ModalRoot to Your App
 
 ```vue
 <template>
@@ -58,23 +74,24 @@ app.mount('#app')
 </template>
 ```
 
-### 3. Use the useModal composable
+### 3. Create Your First Modal
 
 ```vue
-<script setup>
+<script setup lang="ts">
 import { useModal } from 'vue-modaller'
 import MyModalContent from './MyModalContent.vue'
 
-const openModal = async () => {
+const openStandardModal = async () => {
   const result = await useModal(MyModalContent, {
-    title: 'My Modal',
+    title: 'Welcome!',
     config: {
-      type: 'modal', // 'modal' | 'side' | 'panel' | 'draggable'
+      type: 'modal',
+      width: 500,
       blur: true,
       closeable: true
     },
     props: {
-      message: 'Hello from modal!'
+      message: 'Hello from VueModaller!'
     }
   })
   console.log('Modal result:', result)
@@ -82,24 +99,348 @@ const openModal = async () => {
 </script>
 
 <template>
-  <button @click="openModal">Open Modal</button>
+  <button @click="openStandardModal">
+    Open Modal
+  </button>
 </template>
 ```
 
-## Modal Types
+## 🎭 Modal Types
 
 ### Standard Modal
-```javascript
+Perfect for confirmations, forms, and general content display.
+
+```typescript
 const result = await useModal(Component, {
   config: {
     type: 'modal',
     width: 500,
+    height: 400,
     blur: true,
-    closeable: true
+    corner: '12px'
+  }
+})
+```
+
+### Side Panel
+Great for navigation menus, filters, and side content.
+
+```typescript
+const result = await useModal(Component, {
+  config: {
+    type: 'side',
+    blur: true,
+    margin: 20 // Top margin
+  }
+})
+```
+
+### Panel Modal
+Bottom-aligned panels with rounded corners, perfect for mobile interfaces.
+
+```typescript
+const result = await useModal(Component, {
+  config: {
+    type: 'panel',
+    height: '60vh',
+    corner: '16px'
+  }
+})
+```
+
+### Draggable Modal (Instagram-style)
+Interactive bottom sheets with smooth drag gestures.
+
+```typescript
+const result = await useModal(Component, {
+  config: {
+    type: 'draggable',
+    draggableConfig: {
+      initialPosition: 'half', // 'full' | 'half'
+      hideHandle: false,
+      shadow: '0 -8px 24px rgba(0,0,0,0.15)',
+      handle: {
+        color: '#e0e0e0',
+        hoverColor: '#bdbdbd',
+        activeColor: '#9e9e9e',
+        width: '48px',
+        height: '4px',
+        radius: '2px'
+      }
+    }
+  }
+})
+```
+
+## 📱 Responsive Modals
+
+Automatically adapt modal types based on device:
+
+```typescript
+const result = await useModal(Component, {
+  config: {
+    type: 'modal',        // Desktop type
+    mobileType: 'draggable', // Mobile type
+    width: 600,
+    draggableConfig: {
+      initialPosition: 'half'
+    }
+  }
+})
+```
+
+When viewed on mobile, this will show a draggable modal instead of a standard modal!
+
+## ⚙️ Configuration API
+
+### ModalConfig Interface
+
+```typescript
+interface ModalConfig {
+  // Modal type
+  type?: 'modal' | 'side' | 'panel' | 'draggable'
+  mobileType?: 'modal' | 'side' | 'panel' | 'draggable'
+  
+  // Dimensions
+  width?: number
+  height?: number | string
+  
+  // Appearance
+  blur?: boolean           // Backdrop blur effect
+  closeable?: boolean      // Allow closing by clicking outside
+  corner?: string          // Border radius
+  margin?: number          // Top margin (side panels)
+  padding?: string         // Internal padding
+  background?: string      // Background color class
+  
+  // Animation
+  anim?: boolean          // Enable/disable animations
+  
+  // Draggable specific
+  draggableConfig?: DraggableConfig
+  
+  // Lifecycle
+  onClosed?: () => void   // Callback when modal closes
+}
+```
+
+### DraggableConfig Interface
+
+```typescript
+interface DraggableConfig {
+  initialPosition?: 'full' | 'half'
+  hideHandle?: boolean
+  shadow?: string
+  handle?: {
+    color?: string
+    hoverColor?: string  
+    activeColor?: string
+    height?: string
+    width?: string
+    radius?: string | number
+    marginTop?: string | number
+    marginBottom?: string | number
+  }
+}
+```
+
+## 🎨 Styling & Theming
+
+VueModaller uses CSS custom properties for easy theming:
+
+```css
+:root {
+  /* Backdrop */
+  --modal-backdrop: rgba(0, 0, 0, 0.2);
+  
+  /* Modal */
+  --white: #ffffff;
+  --modal-border-radius: 0.75rem;
+  --modal-padding: 1rem;
+  --modal-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+  --modal-z-index: 9999;
+  
+  /* Draggable Handle */
+  --modal-draggable-handle-color: #ccc;
+  --modal-draggable-handle-hover-color: #999;
+  --modal-draggable-handle-active-color: #666;
+  --modal-draggable-handle-height: 5px;
+  --modal-draggable-handle-width: 45px;
+  --modal-draggable-handle-radius: 4px;
+}
+```
+
+### Custom Themes
+
+```css
+/* Dark theme example */
+:root {
+  --white: #1a1a1a;
+  --modal-backdrop: rgba(0, 0, 0, 0.8);
+  --modal-draggable-handle-color: #444;
+  --modal-draggable-handle-hover-color: #666;
+}
+```
+
+## 🔧 Advanced Usage
+
+### Dynamic Slot Content
+
+```typescript
+const result = await useModal(Component, {
+  config: { type: 'modal' },
+  slots: {
+    header: {
+      component: MyHeaderComponent,
+      props: { title: 'Custom Header' }
+    },
+    footer: {
+      component: MyFooterComponent,
+      props: { showActions: true }
+    }
+  }
+})
+```
+
+### Multiple Modals
+
+```typescript
+// Stack multiple modals
+const modal1 = useModal(Component1, { config: { type: 'modal' } })
+const modal2 = useModal(Component2, { config: { type: 'side' } })
+
+// Close all modals
+import { closeAllModal } from 'vue-modaller'
+closeAllModal()
+```
+
+### Modal Results
+
+```typescript
+// In your modal component
+<script setup>
+const emit = defineEmits(['close'])
+
+const handleSubmit = () => {
+  emit('close', { success: true, data: formData })
+}
+
+const handleCancel = () => {
+  emit('close', { success: false })
+}
+</script>
+
+// Usage
+const result = await useModal(MyForm, { config: { type: 'modal' } })
+if (result.success) {
+  console.log('Form data:', result.data)
+}
+```
+
+## 📱 Device Detection
+
+VueModaller includes a powerful device detection composable:
+
+```typescript
+import { useDeviceDetection } from 'vue-modaller'
+
+export default {
+  setup() {
+    const { isMobile, isTablet, isDesktop, detectDevice } = useDeviceDetection()
+    
+    return {
+      isMobile,
+      isTablet, 
+      isDesktop
+    }
   }
+}
+```
+
+## 🎯 Best Practices
+
+### Mobile-First Design
+```typescript
+// Recommended pattern for responsive modals
+const openModal = async () => {
+  await useModal(Component, {
+    config: {
+      type: 'modal',
+      mobileType: 'draggable', // Better UX on mobile
+      width: 600,
+      draggableConfig: {
+        initialPosition: 'half'
+      }
+    }
+  })
+}
+```
+
+### Performance Optimization
+```typescript
+// Use markRaw for large components
+import { markRaw } from 'vue'
+const HeavyComponent = markRaw(MyHeavyComponent)
+
+await useModal(HeavyComponent, {
+  config: { type: 'modal' }
 })
 ```
 
+## 🔍 Examples
+
+Check out our [live examples](https://classyrazy.github.io/vue-modaller/) to see VueModaller in action!
+
+## 📄 API Reference
+
+### Functions
+
+#### `useModal(component, options)`
+Opens a modal and returns a promise.
+
+**Parameters:**
+- `component` - Vue component to render
+- `options` - Configuration object
+
+**Returns:** `Promise<any>` - Resolves with modal result
+
+#### `closeModal(data, index)`
+Programmatically close a specific modal.
+
+#### `closeAllModal(data)`
+Close all open modals.
+
+### Components
+
+#### `<ModalRoot />`
+Global modal container. Must be included in your app.
+
+## 🤝 Contributing
+
+We welcome contributions! Please see our [Contributing Guide](CONTRIBUTING.md) for details.
+
+## 📝 License
+
+MIT © [Classydev](https://github.com/classyrazy)
+
+## 🙋‍♂️ Support
+
+- 📚 [Documentation](https://classyrazy.github.io/vue-modaller/)
+- 🐛 [Report Issues](https://github.com/classyrazy/vue-modaller/issues)
+- 💬 [Discussions](https://github.com/classyrazy/vue-modaller/discussions)
+
+---
+
+<div align="center">
+  <p>Made with ❤️ by <a href="https://github.com/classyrazy">Classydev</a></p>
+  
+  <p>
+    <a href="https://github.com/classyrazy/vue-modaller/stargazers">⭐ Star on GitHub</a> • 
+    <a href="https://www.npmjs.com/package/vue-modaller">📦 NPM Package</a>
+  </p>
+</div>
+```
+
 ### Side Panel
 ```javascript
 const result = await useModal(Component, {

package/dist/composables/useDeviceDetection.d.ts

@@ -0,0 +1,6 @@
+export declare const useDeviceDetection: () => {
+    isMobile: import("vue").Ref<boolean, boolean>;
+    isTablet: import("vue").Ref<boolean, boolean>;
+    isDesktop: import("vue").Ref<boolean, boolean>;
+    detectDevice: () => void;
+};

package/dist/modal.vue.d.ts

@@ -9,14 +9,20 @@ type __VLS_Slots = {} & {
 declare const __VLS_base: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
     config: PropType<modalOptionsType>;
     modalKeyIndex: NumberConstructor;
-}>, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    mobileView: BooleanConstructor;
+}>, {
+    closeDialog: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     close: (...args: any[]) => void;
 }, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     config: PropType<modalOptionsType>;
     modalKeyIndex: NumberConstructor;
+    mobileView: BooleanConstructor;
 }>> & Readonly<{
     onClose?: ((...args: any[]) => any) | undefined;
-}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+}>, {
+    mobileView: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
 declare const __VLS_export: __VLS_WithSlots<typeof __VLS_base, __VLS_Slots>;
 declare const _default: typeof __VLS_export;
 export default _default;

package/dist/style.css

@@ -1 +1 @@
-:root{--white: #fff;--blue-500: #3b82f6;--blue-600: #2563eb;--gray-500: #6b7280;--gray-600: #4b5563;--dark: #1f2937;--border-gray: #e0e0e0;--modal-backdrop: rgba(0, 0, 0, .2);--modal-border-radius: .75rem;--modal-padding: 1rem;--modal-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--modal-z-index: 9999;--modal-content-z-index: 99;--modal-draggable-handle-color: #ccc;--modal-draggable-handle-hover-color: #999;--modal-draggable-handle-active-color: #666;--modal-draggable-handle-height: 5px;--modal-draggable-handle-width: 45px;--modal-draggable-handle-radius: 4px;--modal-draggable-handle-margin-top: 10px;--modal-draggable-handle-margin-bottom: 10px}.__modal-wrapper{position:fixed;width:100%;height:100%;z-index:var(--modal-z-index);top:0;left:0}.__modal-wrapper--centered{display:flex;justify-content:center;align-items:center}.__modal-wrapper--side{display:flex;justify-content:flex-end;align-items:flex-end;top:0;right:0}.__modal-backdrop{position:absolute;width:100%;height:100%;background-color:var(--modal-backdrop);cursor:pointer;top:0;right:0;bottom:0;left:0}.__modal-backdrop--blur,.blur-bg{-webkit-backdrop-filter:blur(2.5px);backdrop-filter:blur(2.5px)}.__modal-content{padding:var(--modal-padding);box-shadow:var(--modal-shadow);z-index:var(--modal-content-z-index);width:100%;pointer-events:auto;overflow-y:auto;background-color:var(--white)}.__modal-content--standard{max-width:100%;margin-top:5rem;margin-bottom:5rem}.__modal-content--side{height:100%;max-width:25rem}@media (min-width: 1024px){.__modal-content--side{max-width:30rem}}.__modal-content--panel{width:100%;max-height:50vh;border-radius:1rem 1rem 0 0;margin:0}.__modal-wrapper--dragable,.__modal-wrapper--draggable{display:flex;justify-content:center;align-items:flex-end;top:0;left:0}.__modal-content--dragable.dragging{transition:none}.__modal-content--draggable{width:100%;height:100vh;max-height:100vh;border-radius:18px 18px 0 0;margin:0;transition:transform .25s cubic-bezier(.25,.1,.25,1);position:absolute;bottom:0;touch-action:none;overflow:hidden;box-shadow:0 -4px 12px #00000040}.__modal-content--draggable.__modal-content--dragging{transition:none}.__modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.__modal-header__title{color:var(--dark);font-weight:600}.__modal-header__title--standard{font-size:1.25rem;line-height:1.75rem}.__modal-header__title--side{font-size:1.5rem;line-height:2rem}.__modal-header__close-btn{cursor:pointer;width:2.5rem;height:2.5rem;display:flex;justify-content:center;align-items:center;border:1px solid var(--border-gray);border-radius:9999px;background-color:transparent;font-size:1.25rem;color:var(--dark)}.__modal-header__close-btn:hover{background-color:#f3f4f6}@media (min-width: 768px){.__modal-body{padding:0}}.__modal-drag-handle{cursor:grab;background:var(--modal-draggable-handle-color);height:var(--modal-draggable-handle-height);width:var(--modal-draggable-handle-width);border-radius:var(--modal-draggable-handle-radius);margin-top:var(--modal-draggable-handle-margin-top);margin-bottom:var(--modal-draggable-handle-margin-bottom);margin-left:auto;margin-right:auto;transition:background-color .2s}.__modal-drag-handle:hover{background:var(--modal-draggable-handle-hover-color)}.__modal-drag-handle:active{cursor:grabbing;background:var(--modal-draggable-handle-active-color)}.__hidden{display:none}:root{--draggable-slidein-y: 0px}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:translateY(16px) scale(.95);transform:translateY(16px) scale(.95)}to{opacity:1;-webkit-transform:translateY(0) scale(1);transform:translateY(0) scale(1)}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:translateY(16px) scale(.95);transform:translateY(16px) scale(.95)}to{opacity:1;-webkit-transform:translateY(0) scale(1);transform:translateY(0) scale(1)}}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn;animation-duration:.3s;animation-timing-function:ease-out;animation-fill-mode:both}@-webkit-keyframes zoomOut{0%{opacity:1;-webkit-transform:translateY(0) scale(1);transform:translateY(0) scale(1)}to{opacity:0;-webkit-transform:translateY(16px) scale(.95);transform:translateY(16px) scale(.95)}}@keyframes zoomOut{0%{opacity:1;-webkit-transform:translateY(0) scale(1);transform:translateY(0) scale(1)}to{opacity:0;-webkit-transform:translateY(16px) scale(.95);transform:translateY(16px) scale(.95)}}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut;animation-duration:.2s;animation-timing-function:ease-in;animation-fill-mode:both}@-webkit-keyframes slideOutRight{0%{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes slideOutRight{0%{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.slideOutRight{-webkit-animation-name:slideOutRight;animation-name:slideOutRight;animation-duration:.2s;animation-timing-function:ease-in;animation-fill-mode:both}@-webkit-keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}@keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}.slideInRight{-webkit-animation-name:slideInRight;animation-name:slideInRight;animation-duration:.3s;animation-timing-function:ease-out;animation-fill-mode:both}@-webkit-keyframes slideInBottom{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}@keyframes slideInBottom{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}.slideInBottom{-webkit-animation-name:slideInBottom;animation-name:slideInBottom;animation-duration:.3s;animation-timing-function:ease-out;animation-fill-mode:backwards}@-webkit-keyframes slideOutBottom{0%{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes slideOutBottom{0%{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.slideOutBottom{-webkit-animation-name:slideOutBottom;animation-name:slideOutBottom;animation-duration:.2s;animation-timing-function:ease-in;animation-fill-mode:backwards}@-webkit-keyframes slideInUp{0%{-webkit-transform:translate3d(0,50%,0);transform:translate3d(0,50%,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}@keyframes slideInUp{0%{-webkit-transform:translateY(50%);transform:translateY(50%);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}@keyframes slideInUp{0%{-webkit-transform:translateY(100%);transform:translateY(100%);visibility:visible}to{-webkit-transform:translateY(50%);transform:translateY(50%)}}.slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp;animation-duration:.3s;animation-timing-function:ease-out;animation-fill-mode:both}@-webkit-keyframes slideOutDown{0%{-webkit-transform:translateY(0);transform:translateY(0)}to{visibility:hidden;-webkit-transform:translateY(50%);transform:translateY(50%)}}@keyframes slideOutDown{0%{-webkit-transform:translateY(50%);transform:translateY(50%)}to{visibility:hidden;-webkit-transform:translateY(0%);transform:translateY(0)}}.slideOutDown{-webkit-animation-name:slideOutDown;animation-name:slideOutDown;animation-duration:.2s;animation-timing-function:ease-in;animation-fill-mode:forwards}.__modal-content--draggable{height:100vh;border-radius:18px 18px 0 0;box-shadow:0 -4px 12px #00000040;touch-action:none;overflow:hidden;transform-origin:bottom}.__modal-content--dragging,.__modal-content--animating{transition:none!important;animation:none!important;-webkit-user-select:none;user-select:none}.__modal-wrapper--draggable{display:flex;justify-content:center;align-items:flex-end}
+:root{--draggable-slidein-y: 0px}@-webkit-keyframes zoomIn{0%{opacity:0;-webkit-transform:translateY(16px) scale(.95);transform:translateY(16px) scale(.95)}to{opacity:1;-webkit-transform:translateY(0) scale(1);transform:translateY(0) scale(1)}}@keyframes zoomIn{0%{opacity:0;-webkit-transform:translateY(16px) scale(.95);transform:translateY(16px) scale(.95)}to{opacity:1;-webkit-transform:translateY(0) scale(1);transform:translateY(0) scale(1)}}.zoomIn{-webkit-animation-name:zoomIn;animation-name:zoomIn;animation-duration:.3s;animation-timing-function:ease-out;animation-fill-mode:both}@-webkit-keyframes zoomOut{0%{opacity:1;-webkit-transform:translateY(0) scale(1);transform:translateY(0) scale(1)}to{opacity:0;-webkit-transform:translateY(16px) scale(.95);transform:translateY(16px) scale(.95)}}@keyframes zoomOut{0%{opacity:1;-webkit-transform:translateY(0) scale(1);transform:translateY(0) scale(1)}to{opacity:0;-webkit-transform:translateY(16px) scale(.95);transform:translateY(16px) scale(.95)}}.zoomOut{-webkit-animation-name:zoomOut;animation-name:zoomOut;animation-duration:.2s;animation-timing-function:ease-in;animation-fill-mode:both}@-webkit-keyframes slideOutRight{0%{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}@keyframes slideOutRight{0%{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0)}}.slideOutRight{-webkit-animation-name:slideOutRight;animation-name:slideOutRight;animation-duration:.2s;animation-timing-function:ease-in;animation-fill-mode:both}@-webkit-keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}@keyframes slideInRight{0%{-webkit-transform:translate3d(100%,0,0);transform:translate3d(100%,0,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}.slideInRight{-webkit-animation-name:slideInRight;animation-name:slideInRight;animation-duration:.3s;animation-timing-function:ease-out;animation-fill-mode:both}@-webkit-keyframes slideInBottom{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}@keyframes slideInBottom{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}.slideInBottom{-webkit-animation-name:slideInBottom;animation-name:slideInBottom;animation-duration:.3s;animation-timing-function:ease-out;animation-fill-mode:backwards}@-webkit-keyframes slideOutBottom{0%{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}@keyframes slideOutBottom{0%{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}to{visibility:hidden;-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0)}}.slideOutBottom{-webkit-animation-name:slideOutBottom;animation-name:slideOutBottom;animation-duration:.2s;animation-timing-function:ease-in;animation-fill-mode:backwards}@-webkit-keyframes slideInUp{0%{-webkit-transform:translate3d(0,50%,0);transform:translate3d(0,50%,0);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}@keyframes slideInUp{0%{-webkit-transform:translateY(50%);transform:translateY(50%);visibility:visible}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0)}}@keyframes slideInUp{0%{-webkit-transform:translateY(100%);transform:translateY(100%);visibility:visible}to{-webkit-transform:translateY(50%);transform:translateY(50%)}}.slideInUp{-webkit-animation-name:slideInUp;animation-name:slideInUp;animation-duration:.3s;animation-timing-function:ease-out;animation-fill-mode:both}@-webkit-keyframes slideOutDown{0%{-webkit-transform:translateY(0);transform:translateY(0)}to{visibility:hidden;-webkit-transform:translateY(50%);transform:translateY(50%)}}@keyframes slideOutDown{0%{-webkit-transform:translateY(50%);transform:translateY(50%)}to{visibility:hidden;-webkit-transform:translateY(0%);transform:translateY(0)}}.slideOutDown{-webkit-animation-name:slideOutDown;animation-name:slideOutDown;animation-duration:.2s;animation-timing-function:ease-in;animation-fill-mode:forwards}@-webkit-keyframes slideInBottom{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);opacity:0}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0);opacity:1}}@keyframes slideInBottom{0%{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);opacity:0}to{-webkit-transform:translate3d(0,0,0);transform:translateZ(0);opacity:1}}.slideInBottom{-webkit-animation-name:slideInBottom;animation-name:slideInBottom;animation-duration:.35s;animation-timing-function:cubic-bezier(.25,.46,.45,.94);animation-fill-mode:both}@-webkit-keyframes slideOutBottom{0%{-webkit-transform:translate3d(0,0,0);transform:translateZ(0);opacity:1}to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);opacity:0}}@keyframes slideOutBottom{0%{-webkit-transform:translate3d(0,0,0);transform:translateZ(0);opacity:1}to{-webkit-transform:translate3d(0,100%,0);transform:translate3d(0,100%,0);opacity:0}}.slideOutBottom{-webkit-animation-name:slideOutBottom;animation-name:slideOutBottom;animation-duration:.25s;animation-timing-function:cubic-bezier(.55,.055,.675,.19);animation-fill-mode:both}:root{--white: #fff;--blue-500: #3b82f6;--blue-600: #2563eb;--gray-500: #6b7280;--gray-600: #4b5563;--dark: #1f2937;--border-gray: #e0e0e0;--modal-backdrop: rgba(0, 0, 0, .2);--modal-border-radius: .75rem;--modal-padding: 1rem;--modal-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--modal-z-index: 9999;--modal-content-z-index: 99;--modal-draggable-handle-color: #ccc;--modal-draggable-handle-hover-color: #999;--modal-draggable-handle-active-color: #666;--modal-draggable-handle-height: 5px;--modal-draggable-handle-width: 45px;--modal-draggable-handle-radius: 4px;--modal-draggable-handle-margin-top: 10px;--modal-draggable-handle-margin-bottom: 10px}.__modal-wrapper{display:flex;position:fixed;width:100%;height:100%;z-index:var(--modal-z-index);top:0;left:0}.__modal-wrapper--centered{display:flex;justify-content:center;align-items:center}.__modal-wrapper--side{display:grid;justify-content:flex-end}.__modal-backdrop{position:absolute;width:100%;height:100%;background-color:var(--modal-backdrop);cursor:pointer;top:0;right:0;bottom:0;left:0}.__modal-backdrop--blur,.blur-bg{-webkit-backdrop-filter:blur(2.5px);backdrop-filter:blur(2.5px)}.__modal-content{z-index:var(--modal-content-z-index);width:100%;pointer-events:auto;overflow-y:auto;background-color:var(--white)}.__modal-content--standard{max-width:100%;margin-top:5rem;margin-bottom:5rem}.__modal-content--side{height:100%}@media (min-width: 1024px){.__modal-content--side{max-width:30rem}}.__modal-wrapper--panel{display:flex;justify-content:center;align-items:flex-end;top:0;left:0}.__modal-content--panel{width:100%;height:100vh;max-height:100vh;transition:transform .25s cubic-bezier(.25,.1,.25,1);position:absolute;bottom:0}.__modal-wrapper--draggable{display:flex;justify-content:center}.__modal-content--dragable.dragging{transition:none}.__modal-content--draggable{width:100%;height:100vh;max-height:100vh;transition:transform .25s cubic-bezier(.25,.1,.25,1);position:absolute;bottom:0;touch-action:none;overflow:hidden}.__modal-content--draggable.__modal-content--dragging{transition:none}.__modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem}.__modal-header__title{color:var(--dark);font-weight:600}.__modal-header__title--standard{font-size:1.25rem;line-height:1.75rem}.__modal-header__title--side{font-size:1.5rem;line-height:2rem}.__modal-header__close-btn{cursor:pointer;width:2.5rem;height:2.5rem;display:flex;justify-content:center;align-items:center;border:1px solid var(--border-gray);border-radius:9999px;background-color:transparent;font-size:1.25rem;color:var(--dark)}.__modal-header__close-btn:hover{background-color:#f3f4f6}.__modal-body{padding:var(--modal-padding)}@media (min-width: 768px){.__modal-body{padding:var(--modal-padding)}}.__modal-drag-handle{cursor:grab;background:var(--modal-draggable-handle-color);height:var(--modal-draggable-handle-height);width:var(--modal-draggable-handle-width);border-radius:var(--modal-draggable-handle-radius);margin-top:var(--modal-draggable-handle-margin-top);margin-bottom:var(--modal-draggable-handle-margin-bottom);margin-left:auto;margin-right:auto;transition:background-color .2s}.__modal-drag-handle:hover{background:var(--modal-draggable-handle-hover-color)}.__modal-drag-handle:active{cursor:grabbing;background:var(--modal-draggable-handle-active-color)}.__hidden{display:none}

package/dist/types/global.d.ts

@@ -3,7 +3,8 @@ type modalType = "modal" | "panel" | "side" | "draggable";
 export interface DraggableConfig {
     initialPosition?: "full" | "half";
     hideHandle?: boolean;
-    handle: {
+    shadow?: string;
+    handle?: {
         color?: string;
         height?: string;
         width?: string;

package/dist/useModal.d.ts

@@ -26,7 +26,8 @@ export declare const modalOptions: Ref<{
     draggableConfig?: {
         initialPosition?: "full" | "half" | undefined;
         hideHandle?: boolean | undefined;
-        handle: {
+        shadow?: string | undefined;
+        handle?: {
             color?: string | undefined;
             height?: string | undefined;
             width?: string | undefined;
@@ -35,7 +36,7 @@ export declare const modalOptions: Ref<{
             marginBottom?: string | number | undefined;
             hoverColor?: string | undefined;
             activeColor?: string | undefined;
-        };
+        } | undefined;
     } | undefined;
 }[], modalOptionsType[] | {
     open: boolean;
@@ -55,7 +56,8 @@ export declare const modalOptions: Ref<{
     draggableConfig?: {
         initialPosition?: "full" | "half" | undefined;
         hideHandle?: boolean | undefined;
-        handle: {
+        shadow?: string | undefined;
+        handle?: {
             color?: string | undefined;
             height?: string | undefined;
             width?: string | undefined;
@@ -64,7 +66,7 @@ export declare const modalOptions: Ref<{
             marginBottom?: string | number | undefined;
             hoverColor?: string | undefined;
             activeColor?: string | undefined;
-        };
+        } | undefined;
     } | undefined;
 }[]>;
 export declare const modalProps: Ref<{

package/dist/variants/dragable.d.ts

@@ -9,7 +9,9 @@ export interface DragableState {
         closed: number;
     };
 }
-export declare const useDraggable: (config: DraggableConfig | undefined, closeCallback: () => void) => {
+export declare const useDraggable: (config: DraggableConfig | undefined, closeCallback: () => void, modalRef?: {
+    value: boolean;
+}) => {
     open: import("vue").Ref<boolean, boolean>;
     translateY: import("vue").Ref<number, number>;
     isDragging: import("vue").Ref<boolean, boolean>;

package/dist/vue-modaller.js

@@ -1,5 +1,5 @@
-import { ref as h, onMounted as Pe, onUnmounted as Re, defineComponent as $e, computed as K, createElementBlock as J, createCommentVNode as _e, openBlock as O, normalizeClass as q, createElementVNode as Y, normalizeStyle as ye, unref as C, renderSlot as we, markRaw as Le, toRaw as Be, createBlock as G, Teleport as He, Fragment as Ae, renderList as Me, createSlots as Te, withCtx as Q, resolveDynamicComponent as Ee, mergeProps as ke, toDisplayString as Fe } from "vue";
-const xe = {
+import { ref as m, onMounted as I, onUnmounted as pe, defineComponent as Oe, computed as F, openBlock as x, createElementBlock as K, normalizeClass as j, createElementVNode as z, normalizeStyle as Pe, unref as T, createCommentVNode as Q, renderSlot as De, markRaw as Ye, toRaw as ze, createBlock as J, Teleport as Ve, Fragment as He, renderList as $e, createSlots as xe, withCtx as X, resolveDynamicComponent as Le, mergeProps as Be, toDisplayString as Fe } from "vue";
+const We = {
   initialPosition: "half",
   hideHandle: !1,
   handle: {
@@ -9,288 +9,331 @@ const xe = {
     hoverColor: "#999",
     activeColor: "#666"
   }
-}, Se = (l = xe, e) => {
-  const s = h(!1), a = h(0), y = h(!1), o = h(!1);
-  let g = 0, _ = 0, P = !1, $ = 0, r = { full: 0, half: 0, closed: 0 }, T = 0, L = 0, B = 0, E = 0;
-  const S = h(null), D = () => {
-    $ = window.innerHeight, r = {
+}, qe = (n = We, e, s) => {
+  const C = m(!1), a = m(0), t = m(!1), u = m(!1);
+  let f = 0, v = 0, o = !1, c = 0, r = { full: 0, half: 0, closed: 0 }, P = 0, D = 0, L = 0, B = 0;
+  const V = m(null), A = () => {
+    c = window.innerHeight, r = {
       full: 0,
-      half: $ * 0.4,
-      closed: $
-    }, a.value = r.closed, T = r.closed;
-  }, w = (u, i = 300) => new Promise((b) => {
-    if (o.value) return b();
-    o.value = !0;
-    const m = a.value, M = u - m, f = performance.now(), A = (F) => {
-      const x = F - f, U = Math.min(x / i, 1), j = 1 - Math.pow(1 - U, 3);
-      a.value = m + M * j, U < 1 ? requestAnimationFrame(A) : (o.value = !1, T = a.value, b());
+      half: c * 0.4,
+      closed: c
+    }, a.value = r.closed, P = r.closed;
+  }, k = (M, h = 300) => new Promise((_) => {
+    if (u.value) return _();
+    u.value = !0;
+    const l = a.value, d = M - l, i = performance.now(), b = (E) => {
+      const Y = E - i, U = Math.min(Y / h, 1), G = 1 - Math.pow(1 - U, 3);
+      a.value = l + d * G, U < 1 ? requestAnimationFrame(b) : (u.value = !1, P = a.value, _());
     };
-    requestAnimationFrame(A);
-  }), H = async () => {
-    await w(r[l.initialPosition], 400);
-  }, k = async () => {
-    await w(r.closed, 300), e && setTimeout(() => e(), 50);
-  }, n = (u) => {
-    var b, m;
-    if (o.value) return;
-    y.value = !0, P = !0;
-    const i = u;
-    g = i instanceof PointerEvent ? i.clientY : ((m = (b = i.touches) == null ? void 0 : b[0]) == null ? void 0 : m.clientY) || 0, E = g, B = Date.now(), document.addEventListener("pointermove", t), document.addEventListener("pointerup", c), document.addEventListener("touchmove", t, { passive: !1 }), document.addEventListener("touchend", c);
-  }, t = (u) => {
-    var F, x;
-    if (!P || o.value) return;
-    const i = u;
-    _ = i instanceof PointerEvent ? i.clientY : ((x = (F = i.touches) == null ? void 0 : F[0]) == null ? void 0 : x.clientY) || 0;
-    const b = _ - g, m = T + b, M = Date.now(), f = _ - E, A = M - B;
-    L = f / A, E = _, B = M, m < r.full ? a.value = r.full : m > r.closed ? a.value = r.closed : a.value = m;
-  }, c = async () => {
-    y.value = !1, P = !1, document.removeEventListener("pointermove", t), document.removeEventListener("pointerup", c), document.removeEventListener("touchmove", t), document.removeEventListener("touchend", c);
-    const u = a.value, i = Math.abs(u - r.full), b = Math.abs(u - r.half), m = Math.abs(u - r.closed), M = Math.min(i, b, m);
-    let f = r.half;
-    L > 0.5 ? T === r.full ? f = r.half : f = r.closed : L < -0.5 || M === i ? f = r.full : M === b ? f = r.half : f = r.closed, f === r.closed ? await k() : await w(f, 250);
-  }, v = () => {
-    k();
+    requestAnimationFrame(b);
+  }), $ = async () => {
+    await k(r[n.initialPosition], 400);
+  }, p = async () => {
+    (s == null ? void 0 : s.value) !== void 0 && (s.value = !1), await k(r.closed, 100), e(), console.log("Panel closed already");
+  }, H = (M) => {
+    var _, l;
+    if (u.value) return;
+    t.value = !0, o = !0;
+    const h = M;
+    f = h instanceof PointerEvent ? h.clientY : ((l = (_ = h.touches) == null ? void 0 : _[0]) == null ? void 0 : l.clientY) || 0, B = f, L = Date.now(), document.addEventListener("pointermove", w), document.addEventListener("pointerup", y), document.addEventListener("touchmove", w, { passive: !1 }), document.addEventListener("touchend", y);
+  }, w = (M) => {
+    var E, Y;
+    if (!o || u.value) return;
+    const h = M;
+    v = h instanceof PointerEvent ? h.clientY : ((Y = (E = h.touches) == null ? void 0 : E[0]) == null ? void 0 : Y.clientY) || 0;
+    const _ = v - f, l = P + _, d = Date.now(), i = v - B, b = d - L;
+    D = i / b, B = v, L = d, l < r.full ? a.value = r.full : l > r.closed ? a.value = r.closed : a.value = l;
+  }, y = async () => {
+    t.value = !1, o = !1, document.removeEventListener("pointermove", w), document.removeEventListener("pointerup", y), document.removeEventListener("touchmove", w), document.removeEventListener("touchend", y);
+    const M = a.value, h = Math.abs(M - r.full), _ = Math.abs(M - r.half), l = Math.abs(M - r.closed), d = Math.min(h, _, l);
+    let i = r.half;
+    if (D > 0.5 ? P === r.full ? i = r.half : i = r.closed : D < -0.5 || d === h ? i = r.full : d === _ ? i = r.half : i = r.closed, i === r.closed) {
+      (s == null ? void 0 : s.value) !== void 0 && (s.value = !1);
+      const b = Math.abs(D) > 0.5 ? 100 : 150;
+      await k(i, b), e();
+    } else
+      await k(i, 250);
+  }, S = () => {
+    p();
   };
-  return Pe(() => {
-    D();
-  }), Re(() => {
-    document.removeEventListener("pointermove", t), document.removeEventListener("pointerup", c), document.removeEventListener("touchmove", t), document.removeEventListener("touchend", c);
+  return I(() => {
+    A();
+  }), pe(() => {
+    document.removeEventListener("pointermove", w), document.removeEventListener("pointerup", y), document.removeEventListener("touchmove", w), document.removeEventListener("touchend", y);
   }), {
-    open: s,
+    open: C,
     translateY: a,
-    isDragging: y,
-    isAnimating: o,
-    panel: S,
-    openPanel: H,
-    closePanel: k,
-    startDrag: n,
-    handleBackdropClick: v,
-    initPositions: D,
-    animateToPosition: w
+    isDragging: t,
+    isAnimating: u,
+    panel: V,
+    openPanel: $,
+    closePanel: p,
+    startDrag: H,
+    handleBackdropClick: S,
+    initPositions: A,
+    animateToPosition: k
   };
-}, ze = { class: "__modal-body" }, Ve = { class: "__modal-header" }, We = /* @__PURE__ */ $e({
+}, Re = { class: "__modal-body" }, Ue = { class: "__modal-header" }, je = /* @__PURE__ */ Oe({
   __name: "modal",
   props: {
     config: Object,
-    modalKeyIndex: Number
+    modalKeyIndex: Number,
+    mobileView: Boolean
   },
   emits: ["close"],
-  setup(l, { emit: e }) {
-    var H, k;
-    const s = e, a = l, y = () => {
-      var n;
-      ((n = a.config) == null ? void 0 : n.type) === "draggable" ? $() : s("close");
-    }, { isDragging: o, translateY: g, startDrag: _, openPanel: P, closePanel: $, isAnimating: r } = Se((H = a.config) == null ? void 0 : H.draggableConfig, () => {
-      s("close");
-    }), T = () => {
-      var n, t;
-      (n = a.config) != null && n.closeable && (console.log("Modal closed from outside", (t = a.config) == null ? void 0 : t.closeable), y());
-    }, L = K(() => {
-      var n, t, c;
-      return ((n = a.config) == null ? void 0 : n.type) == "side" ? "100%" : (t = a.config) != null && t.width ? `${(c = a.config) == null ? void 0 : c.width}px` : "480px";
-    }), B = K(() => {
-      var n, t, c, v;
-      return (n = a.config) != null && n.height && a.config.type !== "draggable" ? typeof ((t = a.config) == null ? void 0 : t.height) == "number" ? `${(c = a.config) == null ? void 0 : c.height}px` : (v = a.config) == null ? void 0 : v.height : "100%";
+  setup(n, { expose: e, emit: s }) {
+    var y, S, M, h, _;
+    const C = s, a = n, t = F(() => a.config ? a.mobileView && a.config.mobileType ? a.config.mobileType : a.config.type : "modal"), u = m(!1), f = () => {
+      t.value === "draggable" ? P() : C("close");
+    };
+    e({
+      closeDialog: f
     });
-    let E = h({
-      modal: { cls: "is-modal", anim_in: "zoomIn", anim_out: "zoomOut", style: `padding: ${(k = a.config) == null ? void 0 : k.padding}px;` },
-      panel: { cls: "is-panel", anim_in: "slideInBottom", anim_out: "slideOutBottom", style: "padding: 0" },
-      draggable: { cls: "is-draggable", anim_in: "", anim_out: "", style: "padding: 0" },
-      side: { cls: "is-side", anim_in: "slideInRight", anim_out: "slideOutRight", style: "padding: 0" }
+    const { isDragging: v, translateY: o, startDrag: c, openPanel: r, closePanel: P, isAnimating: D } = qe((y = a.config) == null ? void 0 : y.draggableConfig, () => {
+      C("close");
+    }, u), L = (l) => {
+      t.value === "draggable" && c(l);
+    }, B = () => {
+      var l;
+      (l = a.config) != null && l.closeable && f();
+    }, V = F(() => {
+      var l, d, i;
+      return t.value === "side" ? (l = a.config) != null && l.width ? `${a.config.width}px` : "100%" : (d = a.config) != null && d.width && !a.mobileView ? `${(i = a.config) == null ? void 0 : i.width}px` : a.mobileView ? "100%" : "480px";
+    }), A = F(() => {
+      var l, d, i, b;
+      return (l = a.config) != null && l.height && t.value !== "draggable" ? typeof ((d = a.config) == null ? void 0 : d.height) == "number" ? `${(i = a.config) == null ? void 0 : i.height}px` : (b = a.config) == null ? void 0 : b.height : "100%";
+    }), k = F(() => {
+      var l, d, i, b, E;
+      return t.value === "side" ? `${((l = a.config) == null ? void 0 : l.corner) || "10px"} 0 0 ${((d = a.config) == null ? void 0 : d.corner) || "10px"}` : t.value === "panel" || t.value === "draggable" ? `${((i = a.config) == null ? void 0 : i.corner) || "10px"} ${((b = a.config) == null ? void 0 : b.corner) || "10px"} 0 0` : `${((E = a.config) == null ? void 0 : E.corner) || "10px"}`;
+    }), $ = (l) => typeof l == "number" ? `${l}px` : typeof l == "string" ? l : "100%";
+    let p = m({
+      modal: { cls: "is-modal", anim_in: "zoomIn", anim_out: "zoomOut", style: `padding: ${$((S = a.config) == null ? void 0 : S.padding)};` },
+      panel: { cls: "is-panel", anim_in: "slideInBottom", anim_out: "slideOutBottom", style: `padding: ${$((M = a.config) == null ? void 0 : M.padding)};` },
+      draggable: { cls: "is-draggable", anim_in: "", anim_out: "", style: `padding: ${$((h = a.config) == null ? void 0 : h.padding)};` },
+      side: { cls: "is-side", anim_in: "slideInRight", anim_out: "slideOutRight", style: `padding: ${$((_ = a.config) == null ? void 0 : _.padding)};` }
     });
-    const S = K(() => {
-      var n, t, c;
-      return (n = a.config) != null && n.anim ? E.value[((t = a.config) == null ? void 0 : t.type) || "modal"].anim_in : E.value[((c = a.config) == null ? void 0 : c.type) || "modal"].anim_out;
-    }), D = K(() => {
-      var c, v, u, i;
-      let n = "__modal-wrapper--centered", t = "__modal-content __modal-content--standard";
-      return ((c = a.config) == null ? void 0 : c.type) == "modal" ? (n = "__modal-wrapper--centered", t = "__modal-content __modal-content--standard") : ((v = a.config) == null ? void 0 : v.type) == "side" ? (n = "__modal-wrapper--side", t = "__modal-content __modal-content--side") : ((u = a.config) == null ? void 0 : u.type) == "panel" ? (n = "__modal-wrapper--panel", t = "__modal-content __modal-content--panel") : ((i = a.config) == null ? void 0 : i.type) == "draggable" && (n = "__modal-wrapper--draggable", t = `__modal-content __modal-content--draggable ${o.value ? "__modal-content--dragging" : ""} ${r.value ? "__modal-content--animating" : ""}`), {
-        mainModalWrapperClass: n,
-        mainModalClass: t
+    const H = F(() => {
+      var l;
+      return (l = a.config) != null && l.anim ? p.value[t.value || "modal"].anim_in : p.value[t.value || "modal"].anim_out;
+    }), w = F(() => {
+      let l = "__modal-wrapper--centered", d = "__modal-content __modal-content--standard";
+      return t.value == "modal" ? (l = "__modal-wrapper--centered", d = "__modal-content __modal-content--standard") : t.value == "side" ? (l = "__modal-wrapper--side", d = "__modal-content __modal-content--side") : t.value == "panel" ? (l = "__modal-wrapper--panel", d = "__modal-content __modal-content--panel") : t.value == "draggable" && (l = "__modal-wrapper--draggable", d = `__modal-content __modal-content--draggable ${v.value ? "__modal-content--dragging" : ""} ${D.value ? "__modal-content--animating" : ""}`), {
+        mainModalWrapperClass: l,
+        mainModalClass: d
       };
-    }), w = h(!1);
-    return Pe(() => {
+    });
+    return I(() => {
       setTimeout(() => {
-        var n;
-        w.value = !0, ((n = a.config) == null ? void 0 : n.type) === "draggable" && (P(), console.log("opened draggable with animation"));
+        u.value = !0, t.value === "draggable" && r();
       }, 100);
-    }), (n, t) => {
-      var c, v, u, i, b, m, M, f, A, F, x, U, j, Z, p, I, N, ee, ae, le, ne, te, re, ce, oe, de, ie, ge, ue, fe, se, me, he, ve, be, Ce;
-      return (c = l.config) != null && c.open ? (O(), J("div", {
+    }), (l, d) => {
+      var i, b, E, Y, U, G, N, ee, ae, le, ne, te, re, ie, oe, ce, de, ge, se, ue, fe, me, ve, he, be, _e, Ce, we, ye, Me, Te, ke, Ee;
+      return (i = n.config) != null && i.open ? (x(), K("div", {
         key: 0,
-        class: q(["__modal-wrapper", D.value.mainModalWrapperClass])
+        class: j(["__modal-wrapper", w.value.mainModalWrapperClass])
       }, [
-        Y("div", {
-          class: q(["__modal-backdrop", (v = l.config) != null && v.blur ? "__modal-backdrop--blur" : ""]),
-          onClick: T
+        z("div", {
+          class: j(["__modal-backdrop", (b = n.config) != null && b.blur ? "__modal-backdrop--blur" : ""]),
+          onClick: B
         }, null, 2),
-        w.value ? (O(), J("div", {
+        u.value ? (x(), K("div", {
           key: 0,
           ref: "modalElement",
-          class: q([D.value.mainModalClass, (u = l.config) != null && u.background ? `bg-${(i = l.config) == null ? void 0 : i.background}` : "__modal-content", S.value]),
-          onPointerdown: t[0] || (t[0] = //@ts-ignore
-          (...Ye) => C(_) && C(_)(...Ye)),
-          style: ye({
-            width: L.value,
-            maxHeight: B.value,
-            borderRadius: `${((b = l.config) == null ? void 0 : b.type) !== "side" && ((m = l.config) == null ? void 0 : m.type) !== "panel" && ((M = l.config) == null ? void 0 : M.type) !== "draggable" ? ((f = l.config) == null ? void 0 : f.corner) ?? "0.75rem" : "0"}`,
-            marginTop: `${(A = l.config) != null && A.margin && l.config.type == "side" ? `${l.config.margin}px` : "0"}`,
-            transform: `translateY(${C(g)}px)`
+          class: j([w.value.mainModalClass, (E = n.config) != null && E.background ? `bg-${(Y = n.config) == null ? void 0 : Y.background}` : "__modal-content", H.value]),
+          onPointerdown: L,
+          style: Pe({
+            width: V.value,
+            maxHeight: A.value,
+            borderRadius: k.value,
+            marginTop: `${(U = n.config) != null && U.margin && t.value === "side" ? `${n.config.margin}px` : "0"}`,
+            transform: t.value === "draggable" ? `translateY(${T(o)}px)` : "",
+            boxShadow: t.value === "draggable" ? (N = (G = n.config) == null ? void 0 : G.draggableConfig) == null ? void 0 : N.shadow : ""
           })
         }, [
-          Y("div", ze, [
-            Y("div", {
-              class: q(["__modal-drag-handle", { __hidden: ((x = (F = l.config) == null ? void 0 : F.draggableConfig) == null ? void 0 : x.hideHandle) || ((U = l.config) == null ? void 0 : U.type) !== "draggable" }]),
-              style: ye({
-                "--modal-draggable-handle-color": (p = (Z = (j = l.config) == null ? void 0 : j.draggableConfig) == null ? void 0 : Z.handle) == null ? void 0 : p.color,
-                "--modal-draggable-handle-hover-color": (ee = (N = (I = l.config) == null ? void 0 : I.draggableConfig) == null ? void 0 : N.handle) == null ? void 0 : ee.hoverColor,
-                "--modal-draggable-handle-active-color": (ne = (le = (ae = l.config) == null ? void 0 : ae.draggableConfig) == null ? void 0 : le.handle) == null ? void 0 : ne.activeColor,
-                "--modal-draggable-handle-height": ((ce = (re = (te = l.config) == null ? void 0 : te.draggableConfig) == null ? void 0 : re.handle) == null ? void 0 : ce.height) || "5px",
-                "--modal-draggable-handle-width": ((ie = (de = (oe = l.config) == null ? void 0 : oe.draggableConfig) == null ? void 0 : de.handle) == null ? void 0 : ie.width) || "45px",
-                "--modal-draggable-handle-radius": ((fe = (ue = (ge = l.config) == null ? void 0 : ge.draggableConfig) == null ? void 0 : ue.handle) == null ? void 0 : fe.radius) || "4px",
-                "--modal-draggable-handle-margin-top": ((he = (me = (se = l.config) == null ? void 0 : se.draggableConfig) == null ? void 0 : me.handle) == null ? void 0 : he.marginTop) || "10px",
-                "--modal-draggable-handle-margin-bottom": ((Ce = (be = (ve = l.config) == null ? void 0 : ve.draggableConfig) == null ? void 0 : be.handle) == null ? void 0 : Ce.marginBottom) || "10px"
+          z("div", Re, [
+            t.value === "draggable" ? (x(), K("div", {
+              key: 0,
+              class: j(["__modal-drag-handle", { __hidden: (ae = (ee = n.config) == null ? void 0 : ee.draggableConfig) == null ? void 0 : ae.hideHandle }]),
+              style: Pe({
+                "--modal-draggable-handle-color": (te = (ne = (le = n.config) == null ? void 0 : le.draggableConfig) == null ? void 0 : ne.handle) == null ? void 0 : te.color,
+                "--modal-draggable-handle-hover-color": (oe = (ie = (re = n.config) == null ? void 0 : re.draggableConfig) == null ? void 0 : ie.handle) == null ? void 0 : oe.hoverColor,
+                "--modal-draggable-handle-active-color": (ge = (de = (ce = n.config) == null ? void 0 : ce.draggableConfig) == null ? void 0 : de.handle) == null ? void 0 : ge.activeColor,
+                "--modal-draggable-handle-height": ((fe = (ue = (se = n.config) == null ? void 0 : se.draggableConfig) == null ? void 0 : ue.handle) == null ? void 0 : fe.height) || "5px",
+                "--modal-draggable-handle-width": ((he = (ve = (me = n.config) == null ? void 0 : me.draggableConfig) == null ? void 0 : ve.handle) == null ? void 0 : he.width) || "45px",
+                "--modal-draggable-handle-radius": ((Ce = (_e = (be = n.config) == null ? void 0 : be.draggableConfig) == null ? void 0 : _e.handle) == null ? void 0 : Ce.radius) || "4px",
+                "--modal-draggable-handle-margin-top": ((Me = (ye = (we = n.config) == null ? void 0 : we.draggableConfig) == null ? void 0 : ye.handle) == null ? void 0 : Me.marginTop) || "10px",
+                "--modal-draggable-handle-margin-bottom": ((Ee = (ke = (Te = n.config) == null ? void 0 : Te.draggableConfig) == null ? void 0 : ke.handle) == null ? void 0 : Ee.marginBottom) || "10px"
               })
-            }, null, 6),
-            Y("div", Ve, [
-              we(n.$slots, "header")
+            }, null, 6)) : Q("", !0),
+            z("div", Ue, [
+              De(l.$slots, "header")
             ]),
-            Y("div", null, [
-              we(n.$slots, "default")
+            z("div", null, [
+              De(l.$slots, "default")
             ])
           ])
-        ], 38)) : _e("", !0)
-      ], 2)) : _e("", !0);
+        ], 38)) : Q("", !0)
+      ], 2)) : Q("", !0);
     };
   }
-}), De = h(!1), R = h([]), z = h([]), Oe = h(""), d = h([]), V = h([]), W = h([]), Je = (l, e) => new Promise(
+}), Ae = m(!1), O = m([]), W = m([]), Se = m(""), g = m([]), q = m([]), R = m([]), Ie = (n, e) => new Promise(
   (s) => {
-    var o, g, _, P, $, r, T, L, B, E, S, D, w, H, k, n, t, c;
-    De.value = !0;
-    const a = Le(Be(l));
-    R.value.length > 0 ? R.value.push(a) : R.value = [a], Oe.value = (e == null ? void 0 : e.title) || "";
-    const y = {
+    var t, u, f, v, o, c, r, P, D, L, B, V, A, k, $, p, H, w, y;
+    Ae.value = !0;
+    const C = Ye(ze(n));
+    O.value.length > 0 ? O.value.push(C) : O.value = [C], Se.value = (e == null ? void 0 : e.title) || "";
+    const a = {
       width: (e == null ? void 0 : e.config.width) || 450,
       background: (e == null ? void 0 : e.config.background) || "white",
       padding: (e == null ? void 0 : e.config.padding) || "20px",
       closeable: (e == null ? void 0 : e.config.closeable) ?? !0,
-      blur: (e == null ? void 0 : e.config.blur) ?? !0,
-      corner: (e == null ? void 0 : e.config.corner) ?? "10px",
+      blur: (e == null ? void 0 : e.config.blur) || !0,
+      corner: (e == null ? void 0 : e.config.corner) || "10px",
       type: (e == null ? void 0 : e.config.type) || "modal",
       open: !0,
       anim: !0,
       title: (e == null ? void 0 : e.config.title) || "",
       margin: (e == null ? void 0 : e.config.margin) || 0,
       height: (e == null ? void 0 : e.config.height) || 0,
-      mobileType: (e == null ? void 0 : e.config.mobileType) || "modal",
+      mobileType: e == null ? void 0 : e.config.mobileType,
       draggableConfig: {
-        initialPosition: ((o = e == null ? void 0 : e.config.draggableConfig) == null ? void 0 : o.initialPosition) || "half",
-        hideHandle: ((g = e == null ? void 0 : e.config.draggableConfig) == null ? void 0 : g.hideHandle) || !1,
+        shadow: ((t = e == null ? void 0 : e.config.draggableConfig) == null ? void 0 : t.shadow) || "0 -4px 12px rgba(0, 0, 0, 0.25)",
+        initialPosition: ((u = e == null ? void 0 : e.config.draggableConfig) == null ? void 0 : u.initialPosition) || "half",
+        hideHandle: ((f = e == null ? void 0 : e.config.draggableConfig) == null ? void 0 : f.hideHandle) || !1,
         handle: {
-          color: ((P = (_ = e == null ? void 0 : e.config.draggableConfig) == null ? void 0 : _.handle) == null ? void 0 : P.color) || "#ccc",
-          height: ((r = ($ = e == null ? void 0 : e.config.draggableConfig) == null ? void 0 : $.handle) == null ? void 0 : r.height) || "5px",
-          width: ((L = (T = e == null ? void 0 : e.config.draggableConfig) == null ? void 0 : T.handle) == null ? void 0 : L.width) || "45px",
-          radius: ((E = (B = e == null ? void 0 : e.config.draggableConfig) == null ? void 0 : B.handle) == null ? void 0 : E.radius) || "4px",
-          marginTop: ((D = (S = e == null ? void 0 : e.config.draggableConfig) == null ? void 0 : S.handle) == null ? void 0 : D.marginTop) || "10px",
-          marginBottom: ((H = (w = e == null ? void 0 : e.config.draggableConfig) == null ? void 0 : w.handle) == null ? void 0 : H.marginBottom) || "10px",
-          hoverColor: ((n = (k = e == null ? void 0 : e.config.draggableConfig) == null ? void 0 : k.handle) == null ? void 0 : n.hoverColor) || "#999",
-          activeColor: ((c = (t = e == null ? void 0 : e.config.draggableConfig) == null ? void 0 : t.handle) == null ? void 0 : c.activeColor) || "#666"
+          color: ((o = (v = e == null ? void 0 : e.config.draggableConfig) == null ? void 0 : v.handle) == null ? void 0 : o.color) || "#ccc",
+          height: ((r = (c = e == null ? void 0 : e.config.draggableConfig) == null ? void 0 : c.handle) == null ? void 0 : r.height) || "5px",
+          width: ((D = (P = e == null ? void 0 : e.config.draggableConfig) == null ? void 0 : P.handle) == null ? void 0 : D.width) || "45px",
+          radius: ((B = (L = e == null ? void 0 : e.config.draggableConfig) == null ? void 0 : L.handle) == null ? void 0 : B.radius) || "4px",
+          marginTop: ((A = (V = e == null ? void 0 : e.config.draggableConfig) == null ? void 0 : V.handle) == null ? void 0 : A.marginTop) || "10px",
+          marginBottom: (($ = (k = e == null ? void 0 : e.config.draggableConfig) == null ? void 0 : k.handle) == null ? void 0 : $.marginBottom) || "10px",
+          hoverColor: ((H = (p = e == null ? void 0 : e.config.draggableConfig) == null ? void 0 : p.handle) == null ? void 0 : H.hoverColor) || "#999",
+          activeColor: ((y = (w = e == null ? void 0 : e.config.draggableConfig) == null ? void 0 : w.handle) == null ? void 0 : y.activeColor) || "#666"
         }
       }
     };
-    console.log("configToBeUsed in useModal:", y), d.value.push(y), V.value.push({
+    g.value.push(a), q.value.push({
       ...e == null ? void 0 : e.props,
-      onClose: (v) => {
-        s(v), X(
-          v,
-          d.value.length - 1
+      onClose: (S) => {
+        s(S), Z(
+          S,
+          g.value.length - 1
         );
       }
-    }), W.value.push((e == null ? void 0 : e.slots) || {}), e != null && e.config.onClosed ? z.value.push(e.config.onClosed) : z.value.push(() => {
+    }), R.value.push((e == null ? void 0 : e.slots) || {}), e != null && e.config.onClosed ? W.value.push(e.config.onClosed) : W.value.push(() => {
     });
   }
-), X = (l, e) => (d.value[e] ? d.value[e].anim = !1 : d.value[d.value.length - 1].anim = !1, setTimeout(() => {
-  if (e === d.value.length - 1) {
-    const s = d.value[d.value.length - 1];
-    s ? (s.open = !1, R.value.pop(), d.value.pop(), V.value.pop(), W.value.pop()) : (d.value = [], R.value = [], V.value = [], W.value = []);
-  } else
-    d.value[e] && (d.value[e].open = !1, R.value.splice(e, 1), d.value.splice(e, 1), V.value.splice(e, 1), W.value.splice(e, 1));
-  try {
-    z.value[e] && typeof z.value[e] == "function" && (z.value[e](l), z.value.splice(e, 1));
-  } catch (s) {
-    throw console.log(s), new Error("Error in your onClosed function");
-  }
-}, 500), l), Ue = (l) => {
-  setTimeout(() => (De.value = !1, R.value = [], Oe.value = "", d.value = [], V.value = [], W.value = [], l), 300);
-}, qe = ["onClick"], je = /* @__PURE__ */ $e({
+), Z = (n, e) => {
+  const { type: s, mobileType: C } = g.value[e];
+  return g.value[e] ? g.value[e].anim = !1 : g.value[g.value.length - 1].anim = !1, setTimeout(() => {
+    if (e === g.value.length - 1) {
+      const a = g.value[g.value.length - 1];
+      a ? (a.open = !1, O.value.pop(), g.value.pop(), q.value.pop(), R.value.pop()) : (g.value = [], O.value = [], q.value = [], R.value = []);
+    } else
+      g.value[e] && (g.value[e].open = !1, O.value.splice(e, 1), g.value.splice(e, 1), q.value.splice(e, 1), R.value.splice(e, 1));
+    try {
+      W.value[e] && typeof W.value[e] == "function" && (W.value[e](n), W.value.splice(e, 1));
+    } catch (a) {
+      throw console.log(a), new Error("Error in your onClosed function");
+    }
+  }, s !== "draggable" && C !== "draggable" ? 500 : 0), n;
+}, Ke = (n) => {
+  setTimeout(() => (Ae.value = !1, O.value = [], Se.value = "", g.value = [], q.value = [], R.value = [], n), 300);
+}, Ge = () => {
+  const n = m(!1), e = m(!1), s = m(!1);
+  return {
+    isMobile: n,
+    isTablet: e,
+    isDesktop: s,
+    detectDevice: () => {
+      const a = window.innerWidth, t = navigator.userAgent, u = a <= 768, f = a > 768 && a <= 1024, v = a > 1024, c = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(t), r = "ontouchstart" in window || navigator.maxTouchPoints > 0;
+      n.value = u || c && r, e.value = f && !n.value, s.value = v && !r && !c, !s.value && !e.value && (n.value = !0);
+    }
+  };
+}, Je = ["onClick"], Qe = /* @__PURE__ */ Oe({
   __name: "modalRoot",
-  setup(l) {
-    const e = (s, a) => {
-      X(s, a);
-    };
-    return (s, a) => (O(), J("div", null, [
-      (O(), G(He, { to: "body" }, [
-        (O(!0), J(Ae, null, Me(C(R), (y, o) => (O(), G(We, {
-          onClose: (g) => e(g, o),
+  setup(n) {
+    const e = (u, f) => {
+      Z(u, f);
+    }, s = m([]), C = (u, f) => {
+      const { type: v, mobileType: o } = g.value[f];
+      if (v == "draggable" || o && o == "draggable") {
+        const c = s.value[f];
+        c && c.closeDialog && c.closeDialog();
+      } else
+        Z(u, f);
+    }, { isMobile: a, detectDevice: t } = Ge();
+    return I(() => {
+      t(), window.addEventListener("resize", t);
+    }), pe(() => {
+      window.removeEventListener("resize", t);
+    }), (u, f) => (x(), K("div", null, [
+      (x(), J(Ve, { to: "body" }, [
+        (x(!0), K(He, null, $e(T(O), (v, o) => (x(), J(je, {
+          onClose: (c) => e(c, o),
           key: o,
-          config: C(d)[o],
-          "modal-key-index": o
-        }, Te({
-          default: Q(() => [
-            (O(), G(Ee(y), ke({
-              data: C(d),
-              onClose: (g) => C(X)(g, o)
-            }, { ref_for: !0 }, C(V)[o], { onCloseAll: C(Ue) }), Te({ _: 2 }, [
-              Me(C(W)[o], (g, _) => ({
-                name: _,
-                fn: Q(() => [
-                  (O(), G(Ee(Le(Be(g.component))), ke({ ref_for: !0 }, g.props), null, 16))
+          config: T(g)[o],
+          ref_for: !0,
+          ref_key: "modalRefs",
+          ref: s,
+          "modal-key-index": o,
+          "mobile-view": T(a)
+        }, xe({
+          default: X(() => [
+            (x(), J(Le(v), Be({
+              data: T(g),
+              onClose: (c) => C(c, o)
+            }, { ref_for: !0 }, T(q)[o], { onCloseAll: T(Ke) }), xe({ _: 2 }, [
+              $e(T(R)[o], (c, r) => ({
+                name: r,
+                fn: X(() => [
+                  (x(), J(Le(c.component), Be({ ref_for: !0 }, c.props), null, 16))
                 ])
               }))
             ]), 1040, ["data", "onClose", "onCloseAll"]))
           ]),
           _: 2
         }, [
-          C(d)[o].title ? {
+          T(g)[o].title ? {
             name: "header",
-            fn: Q(() => [
-              Y("h3", {
-                class: q(["__modal-header__title", C(d)[o].type == "modal" ? "__modal-header__title--standard" : "__modal-header__title--side"])
-              }, Fe(C(d)[o].title), 3),
-              Y("button", {
+            fn: X(() => [
+              z("h3", {
+                class: j(["__modal-header__title", T(g)[o].type == "modal" ? "__modal-header__title--standard" : "__modal-header__title--side"])
+              }, Fe(T(g)[o].title), 3),
+              z("button", {
                 type: "button",
                 class: "__modal-header__close-btn",
-                onClick: (g) => e(g, o)
-              }, [...a[0] || (a[0] = [
-                Y("span", null, "×", -1)
-              ])], 8, qe)
+                onClick: (c) => e(c, o)
+              }, [...f[0] || (f[0] = [
+                z("span", null, "×", -1)
+              ])], 8, Je)
             ]),
             key: "0"
           } : void 0
-        ]), 1032, ["onClose", "config", "modal-key-index"]))), 128))
+        ]), 1032, ["onClose", "config", "modal-key-index", "mobile-view"]))), 128))
       ]))
     ]));
   }
-}), Ke = {
-  install(l, e) {
-    console.log("Installing VueModaller plugin with options:", e), l.component("ModalRoot", je);
+}), Xe = {
+  install(n, e) {
+    console.log("Installing VueModaller plugin with options:", e), n.component("ModalRoot", Qe);
   }
-}, Qe = (l) => (e) => {
-  Ke.install(e, l);
+}, Ne = (n) => (e) => {
+  Xe.install(e, n);
 };
 export {
-  je as ModalRoot,
-  Ke as VueModaller,
-  Ue as closeAllModal,
-  X as closeModal,
-  R as compRef,
-  Qe as createPlugin,
-  Ke as default,
-  De as modalOpen,
-  d as modalOptions,
-  V as modalProps,
-  W as modalSlots,
-  Oe as modalTitle,
-  z as onClosedFunctions,
-  Je as useModal
+  Qe as ModalRoot,
+  Xe as VueModaller,
+  Ke as closeAllModal,
+  Z as closeModal,
+  O as compRef,
+  Ne as createPlugin,
+  Xe as default,
+  Ae as modalOpen,
+  g as modalOptions,
+  q as modalProps,
+  R as modalSlots,
+  Se as modalTitle,
+  W as onClosedFunctions,
+  Ie as useModal
 };

package/dist/vue-modaller.umd.cjs

@@ -1 +1 @@
-(function(g,l){typeof exports=="object"&&typeof module<"u"?l(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],l):(g=typeof globalThis<"u"?globalThis:g||self,l(g.VueModaller={},g.Vue))})(this,function(g,l){"use strict";const Ce={initialPosition:"half",hideHandle:!1,handle:{color:"#ccc",height:"5px",width:"45px",hoverColor:"#999",activeColor:"#666"}},_e=(n=Ce,e)=>{const h=l.ref(!1),a=l.ref(0),w=l.ref(!1),d=l.ref(!1);let s=0,y=0,P=!1,V=0,r={full:0,half:0,closed:0},E=0,L=0,$=0,T=0;const F=l.ref(null),D=()=>{V=window.innerHeight,r={full:0,half:V*.4,closed:V},a.value=r.closed,E=r.closed},v=(m,f=300)=>new Promise(_=>{if(d.value)return _();d.value=!0;const b=a.value,k=m-b,u=performance.now(),z=A=>{const H=A-u,p=Math.min(H/f,1),j=1-Math.pow(1-p,3);a.value=b+k*j,p<1?requestAnimationFrame(z):(d.value=!1,E=a.value,_())};requestAnimationFrame(z)}),Y=async()=>{await v(r[n.initialPosition],400)},B=async()=>{await v(r.closed,300),e&&setTimeout(()=>e(),50)},t=m=>{var _,b;if(d.value)return;w.value=!0,P=!0;const f=m;s=f instanceof PointerEvent?f.clientY:((b=(_=f.touches)==null?void 0:_[0])==null?void 0:b.clientY)||0,T=s,$=Date.now(),document.addEventListener("pointermove",o),document.addEventListener("pointerup",c),document.addEventListener("touchmove",o,{passive:!1}),document.addEventListener("touchend",c)},o=m=>{var A,H;if(!P||d.value)return;const f=m;y=f instanceof PointerEvent?f.clientY:((H=(A=f.touches)==null?void 0:A[0])==null?void 0:H.clientY)||0;const _=y-s,b=E+_,k=Date.now(),u=y-T,z=k-$;L=u/z,T=y,$=k,b<r.full?a.value=r.full:b>r.closed?a.value=r.closed:a.value=b},c=async()=>{w.value=!1,P=!1,document.removeEventListener("pointermove",o),document.removeEventListener("pointerup",c),document.removeEventListener("touchmove",o),document.removeEventListener("touchend",c);const m=a.value,f=Math.abs(m-r.full),_=Math.abs(m-r.half),b=Math.abs(m-r.closed),k=Math.min(f,_,b);let u=r.half;L>.5?E===r.full?u=r.half:u=r.closed:L<-.5||k===f?u=r.full:k===_?u=r.half:u=r.closed,u===r.closed?await B():await v(u,250)},C=()=>{B()};return l.onMounted(()=>{D()}),l.onUnmounted(()=>{document.removeEventListener("pointermove",o),document.removeEventListener("pointerup",c),document.removeEventListener("touchmove",o),document.removeEventListener("touchend",c)}),{open:h,translateY:a,isDragging:w,isAnimating:d,panel:F,openPanel:Y,closePanel:B,startDrag:t,handleBackdropClick:C,initPositions:D,animateToPosition:v}},ye={class:"__modal-body"},we={class:"__modal-header"},ve=l.defineComponent({__name:"modal",props:{config:Object,modalKeyIndex:Number},emits:["close"],setup(n,{emit:e}){var Y,B;const h=e,a=n,w=()=>{var t;((t=a.config)==null?void 0:t.type)==="draggable"?V():h("close")},{isDragging:d,translateY:s,startDrag:y,openPanel:P,closePanel:V,isAnimating:r}=_e((Y=a.config)==null?void 0:Y.draggableConfig,()=>{h("close")}),E=()=>{var t,o;(t=a.config)!=null&&t.closeable&&(console.log("Modal closed from outside",(o=a.config)==null?void 0:o.closeable),w())},L=l.computed(()=>{var t,o,c;return((t=a.config)==null?void 0:t.type)=="side"?"100%":(o=a.config)!=null&&o.width?`${(c=a.config)==null?void 0:c.width}px`:"480px"}),$=l.computed(()=>{var t,o,c,C;return(t=a.config)!=null&&t.height&&a.config.type!=="draggable"?typeof((o=a.config)==null?void 0:o.height)=="number"?`${(c=a.config)==null?void 0:c.height}px`:(C=a.config)==null?void 0:C.height:"100%"});let T=l.ref({modal:{cls:"is-modal",anim_in:"zoomIn",anim_out:"zoomOut",style:`padding: ${(B=a.config)==null?void 0:B.padding}px;`},panel:{cls:"is-panel",anim_in:"slideInBottom",anim_out:"slideOutBottom",style:"padding: 0"},draggable:{cls:"is-draggable",anim_in:"",anim_out:"",style:"padding: 0"},side:{cls:"is-side",anim_in:"slideInRight",anim_out:"slideOutRight",style:"padding: 0"}});const F=l.computed(()=>{var t,o,c;return(t=a.config)!=null&&t.anim?T.value[((o=a.config)==null?void 0:o.type)||"modal"].anim_in:T.value[((c=a.config)==null?void 0:c.type)||"modal"].anim_out}),D=l.computed(()=>{var c,C,m,f;let t="__modal-wrapper--centered",o="__modal-content __modal-content--standard";return((c=a.config)==null?void 0:c.type)=="modal"?(t="__modal-wrapper--centered",o="__modal-content __modal-content--standard"):((C=a.config)==null?void 0:C.type)=="side"?(t="__modal-wrapper--side",o="__modal-content __modal-content--side"):((m=a.config)==null?void 0:m.type)=="panel"?(t="__modal-wrapper--panel",o="__modal-content __modal-content--panel"):((f=a.config)==null?void 0:f.type)=="draggable"&&(t="__modal-wrapper--draggable",o=`__modal-content __modal-content--draggable ${d.value?"__modal-content--dragging":""} ${r.value?"__modal-content--animating":""}`),{mainModalWrapperClass:t,mainModalClass:o}}),v=l.ref(!1);return l.onMounted(()=>{setTimeout(()=>{var t;v.value=!0,((t=a.config)==null?void 0:t.type)==="draggable"&&(P(),console.log("opened draggable with animation"))},100)}),(t,o)=>{var c,C,m,f,_,b,k,u,z,A,H,p,j,Q,X,Z,N,x,I,ee,le,ae,ne,te,oe,re,ce,de,ie,ge,fe,se,me,ue,he,be;return(c=n.config)!=null&&c.open?(l.openBlock(),l.createElementBlock("div",{key:0,class:l.normalizeClass(["__modal-wrapper",D.value.mainModalWrapperClass])},[l.createElementVNode("div",{class:l.normalizeClass(["__modal-backdrop",(C=n.config)!=null&&C.blur?"__modal-backdrop--blur":""]),onClick:E},null,2),v.value?(l.openBlock(),l.createElementBlock("div",{key:0,ref:"modalElement",class:l.normalizeClass([D.value.mainModalClass,(m=n.config)!=null&&m.background?`bg-${(f=n.config)==null?void 0:f.background}`:"__modal-content",F.value]),onPointerdown:o[0]||(o[0]=(...Te)=>l.unref(y)&&l.unref(y)(...Te)),style:l.normalizeStyle({width:L.value,maxHeight:$.value,borderRadius:`${((_=n.config)==null?void 0:_.type)!=="side"&&((b=n.config)==null?void 0:b.type)!=="panel"&&((k=n.config)==null?void 0:k.type)!=="draggable"?((u=n.config)==null?void 0:u.corner)??"0.75rem":"0"}`,marginTop:`${(z=n.config)!=null&&z.margin&&n.config.type=="side"?`${n.config.margin}px`:"0"}`,transform:`translateY(${l.unref(s)}px)`})},[l.createElementVNode("div",ye,[l.createElementVNode("div",{class:l.normalizeClass(["__modal-drag-handle",{__hidden:((H=(A=n.config)==null?void 0:A.draggableConfig)==null?void 0:H.hideHandle)||((p=n.config)==null?void 0:p.type)!=="draggable"}]),style:l.normalizeStyle({"--modal-draggable-handle-color":(X=(Q=(j=n.config)==null?void 0:j.draggableConfig)==null?void 0:Q.handle)==null?void 0:X.color,"--modal-draggable-handle-hover-color":(x=(N=(Z=n.config)==null?void 0:Z.draggableConfig)==null?void 0:N.handle)==null?void 0:x.hoverColor,"--modal-draggable-handle-active-color":(le=(ee=(I=n.config)==null?void 0:I.draggableConfig)==null?void 0:ee.handle)==null?void 0:le.activeColor,"--modal-draggable-handle-height":((te=(ne=(ae=n.config)==null?void 0:ae.draggableConfig)==null?void 0:ne.handle)==null?void 0:te.height)||"5px","--modal-draggable-handle-width":((ce=(re=(oe=n.config)==null?void 0:oe.draggableConfig)==null?void 0:re.handle)==null?void 0:ce.width)||"45px","--modal-draggable-handle-radius":((ge=(ie=(de=n.config)==null?void 0:de.draggableConfig)==null?void 0:ie.handle)==null?void 0:ge.radius)||"4px","--modal-draggable-handle-margin-top":((me=(se=(fe=n.config)==null?void 0:fe.draggableConfig)==null?void 0:se.handle)==null?void 0:me.marginTop)||"10px","--modal-draggable-handle-margin-bottom":((be=(he=(ue=n.config)==null?void 0:ue.draggableConfig)==null?void 0:he.handle)==null?void 0:be.marginBottom)||"10px"})},null,6),l.createElementVNode("div",we,[l.renderSlot(t.$slots,"header")]),l.createElementVNode("div",null,[l.renderSlot(t.$slots,"default")])])],38)):l.createCommentVNode("",!0)],2)):l.createCommentVNode("",!0)}}}),q=l.ref(!1),M=l.ref([]),O=l.ref([]),U=l.ref(""),i=l.ref([]),R=l.ref([]),S=l.ref([]),ke=(n,e)=>new Promise(h=>{var d,s,y,P,V,r,E,L,$,T,F,D,v,Y,B,t,o,c;q.value=!0;const a=l.markRaw(l.toRaw(n));M.value.length>0?M.value.push(a):M.value=[a],U.value=(e==null?void 0:e.title)||"";const w={width:(e==null?void 0:e.config.width)||450,background:(e==null?void 0:e.config.background)||"white",padding:(e==null?void 0:e.config.padding)||"20px",closeable:(e==null?void 0:e.config.closeable)??!0,blur:(e==null?void 0:e.config.blur)??!0,corner:(e==null?void 0:e.config.corner)??"10px",type:(e==null?void 0:e.config.type)||"modal",open:!0,anim:!0,title:(e==null?void 0:e.config.title)||"",margin:(e==null?void 0:e.config.margin)||0,height:(e==null?void 0:e.config.height)||0,mobileType:(e==null?void 0:e.config.mobileType)||"modal",draggableConfig:{initialPosition:((d=e==null?void 0:e.config.draggableConfig)==null?void 0:d.initialPosition)||"half",hideHandle:((s=e==null?void 0:e.config.draggableConfig)==null?void 0:s.hideHandle)||!1,handle:{color:((P=(y=e==null?void 0:e.config.draggableConfig)==null?void 0:y.handle)==null?void 0:P.color)||"#ccc",height:((r=(V=e==null?void 0:e.config.draggableConfig)==null?void 0:V.handle)==null?void 0:r.height)||"5px",width:((L=(E=e==null?void 0:e.config.draggableConfig)==null?void 0:E.handle)==null?void 0:L.width)||"45px",radius:((T=($=e==null?void 0:e.config.draggableConfig)==null?void 0:$.handle)==null?void 0:T.radius)||"4px",marginTop:((D=(F=e==null?void 0:e.config.draggableConfig)==null?void 0:F.handle)==null?void 0:D.marginTop)||"10px",marginBottom:((Y=(v=e==null?void 0:e.config.draggableConfig)==null?void 0:v.handle)==null?void 0:Y.marginBottom)||"10px",hoverColor:((t=(B=e==null?void 0:e.config.draggableConfig)==null?void 0:B.handle)==null?void 0:t.hoverColor)||"#999",activeColor:((c=(o=e==null?void 0:e.config.draggableConfig)==null?void 0:o.handle)==null?void 0:c.activeColor)||"#666"}}};console.log("configToBeUsed in useModal:",w),i.value.push(w),R.value.push({...e==null?void 0:e.props,onClose:C=>{h(C),W(C,i.value.length-1)}}),S.value.push((e==null?void 0:e.slots)||{}),e!=null&&e.config.onClosed?O.value.push(e.config.onClosed):O.value.push(()=>{})}),W=(n,e)=>(i.value[e]?i.value[e].anim=!1:i.value[i.value.length-1].anim=!1,setTimeout(()=>{if(e===i.value.length-1){const h=i.value[i.value.length-1];h?(h.open=!1,M.value.pop(),i.value.pop(),R.value.pop(),S.value.pop()):(i.value=[],M.value=[],R.value=[],S.value=[])}else i.value[e]&&(i.value[e].open=!1,M.value.splice(e,1),i.value.splice(e,1),R.value.splice(e,1),S.value.splice(e,1));try{O.value[e]&&typeof O.value[e]=="function"&&(O.value[e](n),O.value.splice(e,1))}catch(h){throw console.log(h),new Error("Error in your onClosed function")}},500),n),G=n=>{setTimeout(()=>(q.value=!1,M.value=[],U.value="",i.value=[],R.value=[],S.value=[],n),300)},Me=["onClick"],J=l.defineComponent({__name:"modalRoot",setup(n){const e=(h,a)=>{W(h,a)};return(h,a)=>(l.openBlock(),l.createElementBlock("div",null,[(l.openBlock(),l.createBlock(l.Teleport,{to:"body"},[(l.openBlock(!0),l.createElementBlock(l.Fragment,null,l.renderList(l.unref(M),(w,d)=>(l.openBlock(),l.createBlock(ve,{onClose:s=>e(s,d),key:d,config:l.unref(i)[d],"modal-key-index":d},l.createSlots({default:l.withCtx(()=>[(l.openBlock(),l.createBlock(l.resolveDynamicComponent(w),l.mergeProps({data:l.unref(i),onClose:s=>l.unref(W)(s,d)},{ref_for:!0},l.unref(R)[d],{onCloseAll:l.unref(G)}),l.createSlots({_:2},[l.renderList(l.unref(S)[d],(s,y)=>({name:y,fn:l.withCtx(()=>[(l.openBlock(),l.createBlock(l.resolveDynamicComponent(l.markRaw(l.toRaw(s.component))),l.mergeProps({ref_for:!0},s.props),null,16))])}))]),1040,["data","onClose","onCloseAll"]))]),_:2},[l.unref(i)[d].title?{name:"header",fn:l.withCtx(()=>[l.createElementVNode("h3",{class:l.normalizeClass(["__modal-header__title",l.unref(i)[d].type=="modal"?"__modal-header__title--standard":"__modal-header__title--side"])},l.toDisplayString(l.unref(i)[d].title),3),l.createElementVNode("button",{type:"button",class:"__modal-header__close-btn",onClick:s=>e(s,d)},[...a[0]||(a[0]=[l.createElementVNode("span",null,"×",-1)])],8,Me)]),key:"0"}:void 0]),1032,["onClose","config","modal-key-index"]))),128))]))]))}}),K={install(n,e){console.log("Installing VueModaller plugin with options:",e),n.component("ModalRoot",J)}},Ee=n=>e=>{K.install(e,n)};g.ModalRoot=J,g.VueModaller=K,g.closeAllModal=G,g.closeModal=W,g.compRef=M,g.createPlugin=Ee,g.default=K,g.modalOpen=q,g.modalOptions=i,g.modalProps=R,g.modalSlots=S,g.modalTitle=U,g.onClosedFunctions=O,g.useModal=ke,Object.defineProperties(g,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});
+(function(m,l){typeof exports=="object"&&typeof module<"u"?l(exports,require("vue")):typeof define=="function"&&define.amd?define(["exports","vue"],l):(m=typeof globalThis<"u"?globalThis:m||self,l(m.VueModaller={},m.Vue))})(this,function(m,l){"use strict";const ke={initialPosition:"half",hideHandle:!1,handle:{color:"#ccc",height:"5px",width:"45px",hoverColor:"#999",activeColor:"#666"}},Me=(t=ke,e,f)=>{const w=l.ref(!1),a=l.ref(0),o=l.ref(!1),u=l.ref(!1);let h=0,b=0,i=!1,d=0,r={full:0,half:0,closed:0},P=0,D=0,$=0,V=0;const F=l.ref(null),A=()=>{d=window.innerHeight,r={full:0,half:d*.4,closed:d},a.value=r.closed,P=r.closed},E=(M,v=300)=>new Promise(_=>{if(u.value)return _();u.value=!0;const n=a.value,s=M-n,c=performance.now(),C=T=>{const H=T-c,W=Math.min(H/v,1),q=1-Math.pow(1-W,3);a.value=n+s*q,W<1?requestAnimationFrame(C):(u.value=!1,P=a.value,_())};requestAnimationFrame(C)}),p=async()=>{await E(r[t.initialPosition],400)},S=async()=>{(f==null?void 0:f.value)!==void 0&&(f.value=!1),await E(r.closed,100),e(),console.log("Panel closed already")},x=M=>{var _,n;if(u.value)return;o.value=!0,i=!0;const v=M;h=v instanceof PointerEvent?v.clientY:((n=(_=v.touches)==null?void 0:_[0])==null?void 0:n.clientY)||0,V=h,$=Date.now(),document.addEventListener("pointermove",y),document.addEventListener("pointerup",k),document.addEventListener("touchmove",y,{passive:!1}),document.addEventListener("touchend",k)},y=M=>{var T,H;if(!i||u.value)return;const v=M;b=v instanceof PointerEvent?v.clientY:((H=(T=v.touches)==null?void 0:T[0])==null?void 0:H.clientY)||0;const _=b-h,n=P+_,s=Date.now(),c=b-V,C=s-$;D=c/C,V=b,$=s,n<r.full?a.value=r.full:n>r.closed?a.value=r.closed:a.value=n},k=async()=>{o.value=!1,i=!1,document.removeEventListener("pointermove",y),document.removeEventListener("pointerup",k),document.removeEventListener("touchmove",y),document.removeEventListener("touchend",k);const M=a.value,v=Math.abs(M-r.full),_=Math.abs(M-r.half),n=Math.abs(M-r.closed),s=Math.min(v,_,n);let c=r.half;if(D>.5?P===r.full?c=r.half:c=r.closed:D<-.5||s===v?c=r.full:s===_?c=r.half:c=r.closed,c===r.closed){(f==null?void 0:f.value)!==void 0&&(f.value=!1);const C=Math.abs(D)>.5?100:150;await E(c,C),e()}else await E(c,250)},Y=()=>{S()};return l.onMounted(()=>{A()}),l.onUnmounted(()=>{document.removeEventListener("pointermove",y),document.removeEventListener("pointerup",k),document.removeEventListener("touchmove",y),document.removeEventListener("touchend",k)}),{open:w,translateY:a,isDragging:o,isAnimating:u,panel:F,openPanel:p,closePanel:S,startDrag:x,handleBackdropClick:Y,initPositions:A,animateToPosition:E}},Ee={class:"__modal-body"},Te={class:"__modal-header"},Be=l.defineComponent({__name:"modal",props:{config:Object,modalKeyIndex:Number,mobileView:Boolean},emits:["close"],setup(t,{expose:e,emit:f}){var k,Y,M,v,_;const w=f,a=t,o=l.computed(()=>a.config?a.mobileView&&a.config.mobileType?a.config.mobileType:a.config.type:"modal"),u=l.ref(!1),h=()=>{o.value==="draggable"?P():w("close")};e({closeDialog:h});const{isDragging:b,translateY:i,startDrag:d,openPanel:r,closePanel:P,isAnimating:D}=Me((k=a.config)==null?void 0:k.draggableConfig,()=>{w("close")},u),$=n=>{o.value==="draggable"&&d(n)},V=()=>{var n;(n=a.config)!=null&&n.closeable&&h()},F=l.computed(()=>{var n,s,c;return o.value==="side"?(n=a.config)!=null&&n.width?`${a.config.width}px`:"100%":(s=a.config)!=null&&s.width&&!a.mobileView?`${(c=a.config)==null?void 0:c.width}px`:a.mobileView?"100%":"480px"}),A=l.computed(()=>{var n,s,c,C;return(n=a.config)!=null&&n.height&&o.value!=="draggable"?typeof((s=a.config)==null?void 0:s.height)=="number"?`${(c=a.config)==null?void 0:c.height}px`:(C=a.config)==null?void 0:C.height:"100%"}),E=l.computed(()=>{var n,s,c,C,T;return o.value==="side"?`${((n=a.config)==null?void 0:n.corner)||"10px"} 0 0 ${((s=a.config)==null?void 0:s.corner)||"10px"}`:o.value==="panel"||o.value==="draggable"?`${((c=a.config)==null?void 0:c.corner)||"10px"} ${((C=a.config)==null?void 0:C.corner)||"10px"} 0 0`:`${((T=a.config)==null?void 0:T.corner)||"10px"}`}),p=n=>typeof n=="number"?`${n}px`:typeof n=="string"?n:"100%";let S=l.ref({modal:{cls:"is-modal",anim_in:"zoomIn",anim_out:"zoomOut",style:`padding: ${p((Y=a.config)==null?void 0:Y.padding)};`},panel:{cls:"is-panel",anim_in:"slideInBottom",anim_out:"slideOutBottom",style:`padding: ${p((M=a.config)==null?void 0:M.padding)};`},draggable:{cls:"is-draggable",anim_in:"",anim_out:"",style:`padding: ${p((v=a.config)==null?void 0:v.padding)};`},side:{cls:"is-side",anim_in:"slideInRight",anim_out:"slideOutRight",style:`padding: ${p((_=a.config)==null?void 0:_.padding)};`}});const x=l.computed(()=>{var n;return(n=a.config)!=null&&n.anim?S.value[o.value||"modal"].anim_in:S.value[o.value||"modal"].anim_out}),y=l.computed(()=>{let n="__modal-wrapper--centered",s="__modal-content __modal-content--standard";return o.value=="modal"?(n="__modal-wrapper--centered",s="__modal-content __modal-content--standard"):o.value=="side"?(n="__modal-wrapper--side",s="__modal-content __modal-content--side"):o.value=="panel"?(n="__modal-wrapper--panel",s="__modal-content __modal-content--panel"):o.value=="draggable"&&(n="__modal-wrapper--draggable",s=`__modal-content __modal-content--draggable ${b.value?"__modal-content--dragging":""} ${D.value?"__modal-content--animating":""}`),{mainModalWrapperClass:n,mainModalClass:s}});return l.onMounted(()=>{setTimeout(()=>{u.value=!0,o.value==="draggable"&&r()},100)}),(n,s)=>{var c,C,T,H,W,q,Q,X,Z,N,I,ee,le,ae,ne,te,oe,re,ce,ie,de,ge,se,fe,me,ue,he,be,ve,Ce,_e,we,ye;return(c=t.config)!=null&&c.open?(l.openBlock(),l.createElementBlock("div",{key:0,class:l.normalizeClass(["__modal-wrapper",y.value.mainModalWrapperClass])},[l.createElementVNode("div",{class:l.normalizeClass(["__modal-backdrop",(C=t.config)!=null&&C.blur?"__modal-backdrop--blur":""]),onClick:V},null,2),u.value?(l.openBlock(),l.createElementBlock("div",{key:0,ref:"modalElement",class:l.normalizeClass([y.value.mainModalClass,(T=t.config)!=null&&T.background?`bg-${(H=t.config)==null?void 0:H.background}`:"__modal-content",x.value]),onPointerdown:$,style:l.normalizeStyle({width:F.value,maxHeight:A.value,borderRadius:E.value,marginTop:`${(W=t.config)!=null&&W.margin&&o.value==="side"?`${t.config.margin}px`:"0"}`,transform:o.value==="draggable"?`translateY(${l.unref(i)}px)`:"",boxShadow:o.value==="draggable"?(Q=(q=t.config)==null?void 0:q.draggableConfig)==null?void 0:Q.shadow:""})},[l.createElementVNode("div",Ee,[o.value==="draggable"?(l.openBlock(),l.createElementBlock("div",{key:0,class:l.normalizeClass(["__modal-drag-handle",{__hidden:(Z=(X=t.config)==null?void 0:X.draggableConfig)==null?void 0:Z.hideHandle}]),style:l.normalizeStyle({"--modal-draggable-handle-color":(ee=(I=(N=t.config)==null?void 0:N.draggableConfig)==null?void 0:I.handle)==null?void 0:ee.color,"--modal-draggable-handle-hover-color":(ne=(ae=(le=t.config)==null?void 0:le.draggableConfig)==null?void 0:ae.handle)==null?void 0:ne.hoverColor,"--modal-draggable-handle-active-color":(re=(oe=(te=t.config)==null?void 0:te.draggableConfig)==null?void 0:oe.handle)==null?void 0:re.activeColor,"--modal-draggable-handle-height":((de=(ie=(ce=t.config)==null?void 0:ce.draggableConfig)==null?void 0:ie.handle)==null?void 0:de.height)||"5px","--modal-draggable-handle-width":((fe=(se=(ge=t.config)==null?void 0:ge.draggableConfig)==null?void 0:se.handle)==null?void 0:fe.width)||"45px","--modal-draggable-handle-radius":((he=(ue=(me=t.config)==null?void 0:me.draggableConfig)==null?void 0:ue.handle)==null?void 0:he.radius)||"4px","--modal-draggable-handle-margin-top":((Ce=(ve=(be=t.config)==null?void 0:be.draggableConfig)==null?void 0:ve.handle)==null?void 0:Ce.marginTop)||"10px","--modal-draggable-handle-margin-bottom":((ye=(we=(_e=t.config)==null?void 0:_e.draggableConfig)==null?void 0:we.handle)==null?void 0:ye.marginBottom)||"10px"})},null,6)):l.createCommentVNode("",!0),l.createElementVNode("div",Te,[l.renderSlot(n.$slots,"header")]),l.createElementVNode("div",null,[l.renderSlot(n.$slots,"default")])])],38)):l.createCommentVNode("",!0)],2)):l.createCommentVNode("",!0)}}}),R=l.ref(!1),B=l.ref([]),L=l.ref([]),U=l.ref(""),g=l.ref([]),O=l.ref([]),z=l.ref([]),Pe=(t,e)=>new Promise(f=>{var o,u,h,b,i,d,r,P,D,$,V,F,A,E,p,S,x,y,k;R.value=!0;const w=l.markRaw(l.toRaw(t));B.value.length>0?B.value.push(w):B.value=[w],U.value=(e==null?void 0:e.title)||"";const a={width:(e==null?void 0:e.config.width)||450,background:(e==null?void 0:e.config.background)||"white",padding:(e==null?void 0:e.config.padding)||"20px",closeable:(e==null?void 0:e.config.closeable)??!0,blur:(e==null?void 0:e.config.blur)||!0,corner:(e==null?void 0:e.config.corner)||"10px",type:(e==null?void 0:e.config.type)||"modal",open:!0,anim:!0,title:(e==null?void 0:e.config.title)||"",margin:(e==null?void 0:e.config.margin)||0,height:(e==null?void 0:e.config.height)||0,mobileType:e==null?void 0:e.config.mobileType,draggableConfig:{shadow:((o=e==null?void 0:e.config.draggableConfig)==null?void 0:o.shadow)||"0 -4px 12px rgba(0, 0, 0, 0.25)",initialPosition:((u=e==null?void 0:e.config.draggableConfig)==null?void 0:u.initialPosition)||"half",hideHandle:((h=e==null?void 0:e.config.draggableConfig)==null?void 0:h.hideHandle)||!1,handle:{color:((i=(b=e==null?void 0:e.config.draggableConfig)==null?void 0:b.handle)==null?void 0:i.color)||"#ccc",height:((r=(d=e==null?void 0:e.config.draggableConfig)==null?void 0:d.handle)==null?void 0:r.height)||"5px",width:((D=(P=e==null?void 0:e.config.draggableConfig)==null?void 0:P.handle)==null?void 0:D.width)||"45px",radius:((V=($=e==null?void 0:e.config.draggableConfig)==null?void 0:$.handle)==null?void 0:V.radius)||"4px",marginTop:((A=(F=e==null?void 0:e.config.draggableConfig)==null?void 0:F.handle)==null?void 0:A.marginTop)||"10px",marginBottom:((p=(E=e==null?void 0:e.config.draggableConfig)==null?void 0:E.handle)==null?void 0:p.marginBottom)||"10px",hoverColor:((x=(S=e==null?void 0:e.config.draggableConfig)==null?void 0:S.handle)==null?void 0:x.hoverColor)||"#999",activeColor:((k=(y=e==null?void 0:e.config.draggableConfig)==null?void 0:y.handle)==null?void 0:k.activeColor)||"#666"}}};g.value.push(a),O.value.push({...e==null?void 0:e.props,onClose:Y=>{f(Y),j(Y,g.value.length-1)}}),z.value.push((e==null?void 0:e.slots)||{}),e!=null&&e.config.onClosed?L.value.push(e.config.onClosed):L.value.push(()=>{})}),j=(t,e)=>{const{type:f,mobileType:w}=g.value[e];return g.value[e]?g.value[e].anim=!1:g.value[g.value.length-1].anim=!1,setTimeout(()=>{if(e===g.value.length-1){const a=g.value[g.value.length-1];a?(a.open=!1,B.value.pop(),g.value.pop(),O.value.pop(),z.value.pop()):(g.value=[],B.value=[],O.value=[],z.value=[])}else g.value[e]&&(g.value[e].open=!1,B.value.splice(e,1),g.value.splice(e,1),O.value.splice(e,1),z.value.splice(e,1));try{L.value[e]&&typeof L.value[e]=="function"&&(L.value[e](t),L.value.splice(e,1))}catch(a){throw console.log(a),new Error("Error in your onClosed function")}},f!=="draggable"&&w!=="draggable"?500:0),t},G=t=>{setTimeout(()=>(R.value=!1,B.value=[],U.value="",g.value=[],O.value=[],z.value=[],t),300)},De=()=>{const t=l.ref(!1),e=l.ref(!1),f=l.ref(!1);return{isMobile:t,isTablet:e,isDesktop:f,detectDevice:()=>{const a=window.innerWidth,o=navigator.userAgent,u=a<=768,h=a>768&&a<=1024,b=a>1024,d=/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(o),r="ontouchstart"in window||navigator.maxTouchPoints>0;t.value=u||d&&r,e.value=h&&!t.value,f.value=b&&!r&&!d,!f.value&&!e.value&&(t.value=!0)}}},pe=["onClick"],J=l.defineComponent({__name:"modalRoot",setup(t){const e=(u,h)=>{j(u,h)},f=l.ref([]),w=(u,h)=>{const{type:b,mobileType:i}=g.value[h];if(b=="draggable"||i&&i=="draggable"){const d=f.value[h];d&&d.closeDialog&&d.closeDialog()}else j(u,h)},{isMobile:a,detectDevice:o}=De();return l.onMounted(()=>{o(),window.addEventListener("resize",o)}),l.onUnmounted(()=>{window.removeEventListener("resize",o)}),(u,h)=>(l.openBlock(),l.createElementBlock("div",null,[(l.openBlock(),l.createBlock(l.Teleport,{to:"body"},[(l.openBlock(!0),l.createElementBlock(l.Fragment,null,l.renderList(l.unref(B),(b,i)=>(l.openBlock(),l.createBlock(Be,{onClose:d=>e(d,i),key:i,config:l.unref(g)[i],ref_for:!0,ref_key:"modalRefs",ref:f,"modal-key-index":i,"mobile-view":l.unref(a)},l.createSlots({default:l.withCtx(()=>[(l.openBlock(),l.createBlock(l.resolveDynamicComponent(b),l.mergeProps({data:l.unref(g),onClose:d=>w(d,i)},{ref_for:!0},l.unref(O)[i],{onCloseAll:l.unref(G)}),l.createSlots({_:2},[l.renderList(l.unref(z)[i],(d,r)=>({name:r,fn:l.withCtx(()=>[(l.openBlock(),l.createBlock(l.resolveDynamicComponent(d.component),l.mergeProps({ref_for:!0},d.props),null,16))])}))]),1040,["data","onClose","onCloseAll"]))]),_:2},[l.unref(g)[i].title?{name:"header",fn:l.withCtx(()=>[l.createElementVNode("h3",{class:l.normalizeClass(["__modal-header__title",l.unref(g)[i].type=="modal"?"__modal-header__title--standard":"__modal-header__title--side"])},l.toDisplayString(l.unref(g)[i].title),3),l.createElementVNode("button",{type:"button",class:"__modal-header__close-btn",onClick:d=>e(d,i)},[...h[0]||(h[0]=[l.createElementVNode("span",null,"×",-1)])],8,pe)]),key:"0"}:void 0]),1032,["onClose","config","modal-key-index","mobile-view"]))),128))]))]))}}),K={install(t,e){console.log("Installing VueModaller plugin with options:",e),t.component("ModalRoot",J)}},$e=t=>e=>{K.install(e,t)};m.ModalRoot=J,m.VueModaller=K,m.closeAllModal=G,m.closeModal=j,m.compRef=B,m.createPlugin=$e,m.default=K,m.modalOpen=R,m.modalOptions=g,m.modalProps=O,m.modalSlots=z,m.modalTitle=U,m.onClosedFunctions=L,m.useModal=Pe,Object.defineProperties(m,{__esModule:{value:!0},[Symbol.toStringTag]:{value:"Module"}})});

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "vue-modaller",
   "author": "Classydev (https://github.com/classyrazy)",
-  "version": "1.0.7",
+  "version": "1.0.8",
   "license": "MIT",
   "description": "A flexible and powerful modal system for Vue 3 applications with TypeScript support, featuring draggable modals, side panels, and smooth animations",
   "private": false,