@quicktvui/web-renderer 1.0.0

package/src/components/Modal.js

@@ -0,0 +1,119 @@
+// Modal component - Native modal container for qt-dialog
+// In web, this renders as a full-screen overlay
+import { QtBaseComponent } from './QtBaseComponent'
+import { registerComponent } from '../core/componentRegistry'
+
+export class Modal extends QtBaseComponent {
+  constructor(context, id, pId) {
+    super(context, id, pId)
+    this.tagName = 'Modal'
+    this.dom = document.createElement('div')
+    this.dom.setAttribute('data-component-name', 'Modal')
+
+    // Default styles for modal overlay
+    this.dom.style.cssText = `
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      z-index: 9999;
+    `
+
+    // Register by id for findComponentById
+    registerComponent(id, this)
+
+    // Track visibility state
+    this._visible = true
+    this._transparent = true
+  }
+
+  defaultStyle() {
+    return {
+      position: 'fixed',
+      top: 0,
+      left: 0,
+      width: '100%',
+      height: '100%',
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      zIndex: 9999,
+    }
+  }
+
+  updateProperty(key, value) {
+    switch (key) {
+      case 'transparent':
+        this._transparent = value
+        if (value) {
+          this.dom.style.backgroundColor = 'transparent'
+        } else {
+          this.dom.style.backgroundColor = 'rgba(0, 0, 0, 0.5)'
+        }
+        break
+
+      case 'immersionStatusBar':
+        // In web, this doesn't apply but we store it
+        this._immersionStatusBar = value
+        break
+
+      case 'visible':
+      case 'visibility':
+        this._setVisible(value)
+        break
+
+      default:
+        super.updateProperty(key, value)
+    }
+  }
+
+  _setVisible(visible) {
+    this._visible = visible
+    if (visible) {
+      this.dom.style.display = 'flex'
+      // Dispatch show event
+      this.dispatchEvent('show', {})
+    } else {
+      this.dom.style.display = 'none'
+    }
+  }
+
+  // Called when the modal is mounted
+  mounted() {
+    super.mounted?.()
+    // Dispatch show event when mounted
+    if (this._visible !== false) {
+      // Delay to ensure event listeners are registered
+      requestAnimationFrame(() => {
+        this.dispatchEvent('show', {})
+      })
+    }
+  }
+
+  // Handle click outside to close
+  _handleClickOutside(e) {
+    // Only close if clicking the backdrop (not children)
+    if (e.target === this.dom) {
+      this.dispatchEvent('requestclose', {})
+    }
+  }
+
+  // Show the modal
+  show() {
+    this._setVisible(true)
+  }
+
+  // Hide the modal
+  hide() {
+    this._setVisible(false)
+  }
+
+  // Close the modal (dispatches requestClose event)
+  close() {
+    this.dispatchEvent('requestclose', {})
+  }
+}