@lvce-editor/virtual-dom 1.40.0 → 1.42.0

package/dist/index.js

@@ -409,6 +409,8 @@ const setProp = ($Element, key, value, eventMap, newEventMap) => {
     case 'onInput':
     case 'onKeyDown':
     case 'onMouseDown':
+    case 'onMouseOver':
+    case 'onMouseOut':
     case 'onPointerDown':
     case 'onPointerOut':
     case 'onPointerOver':
@@ -641,8 +643,15 @@ const getEventListenerArgs = (params, event) => {
   return serialized;
 };
 
+const isInputElement = element => {
+  return element instanceof HTMLInputElement;
+};
 const preventEventsMaybe = (info, event) => {
-  if (info.preventDefault) {
+  if (info.preventDefault === 2) {
+    if (!isInputElement(event.target)) {
+      event.preventDefault();
+    }
+  } else if (info.preventDefault) {
     event.preventDefault();
   }
   if (info.stopPropagation) {
@@ -686,6 +695,20 @@ const getEventListenerMap = id => {
   return map;
 };
 
+const getActiveElementInside = $Viewlet => {
+  if (!$Viewlet) {
+    return undefined;
+  }
+  const $ActiveElement = document.activeElement;
+  if (!$ActiveElement) {
+    return undefined;
+  }
+  if (!$Viewlet.contains($ActiveElement)) {
+    return undefined;
+  }
+  return $ActiveElement;
+};
+
 const queryInputs = $Viewlet => {
   return [...$Viewlet.querySelectorAll('input, textarea')];
 };
@@ -716,9 +739,7 @@ const rememberFocus = ($Viewlet, dom, eventMap, uid = 0) => {
   const oldTop = $Viewlet.style.top;
   const oldWidth = $Viewlet.style.width;
   const oldHeight = $Viewlet.style.height;
-  const {
-    activeElement
-  } = document;
+  const activeElement = getActiveElementInside($Viewlet);
   const isTreeFocused = activeElement?.getAttribute('role') === 'tree';
   const isRootTree = $Viewlet.getAttribute('role') === 'tree' && activeElement === $Viewlet;
   const focused = activeElement?.getAttribute('name');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lvce-editor/virtual-dom",
-  "version": "1.40.0",
+  "version": "1.42.0",
   "main": "dist/index.js",
   "type": "module",
   "keywords": [],

package/src/parts/GetActiveElementInside/GetActiveElementInside.ts

@@ -0,0 +1,15 @@
+export const getActiveElementInside = (
+  $Viewlet: HTMLElement | undefined,
+): HTMLElement | undefined => {
+  if (!$Viewlet) {
+    return undefined
+  }
+  const $ActiveElement = document.activeElement as HTMLElement
+  if (!$ActiveElement) {
+    return undefined
+  }
+  if (!$Viewlet.contains($ActiveElement)) {
+    return undefined
+  }
+  return $ActiveElement
+}

package/src/parts/PreventEventsMaybe/PreventEventsMaybe.ts

@@ -1,5 +1,13 @@
+const isInputElement = (element: HTMLElement): boolean => {
+  return element instanceof HTMLInputElement
+}
+
 export const preventEventsMaybe = (info: any, event: any): void => {
-  if (info.preventDefault) {
+  if (info.preventDefault === 2) {
+    if (!isInputElement(event.target)) {
+      event.preventDefault()
+    }
+  } else if (info.preventDefault) {
     event.preventDefault()
   }
   if (info.stopPropagation) {

package/src/parts/RememberFocus/RememberFocus.ts

@@ -1,5 +1,6 @@
 import * as ComponentUid from '../ComponentUid/ComponentUid.ts'
 import * as EventState from '../EventState/EventState.ts'
+import { getActiveElementInside } from '../GetActiveElementInside/GetActiveElementInside.ts'
 import * as QueryInputs from '../QueryInputs/QueryInputs.ts'
 import * as RegisterEventListeners from '../RegisterEventListeners/RegisterEventListeners.ts'
 import * as VirtualDom from '../VirtualDom/VirtualDom.ts'
@@ -15,7 +16,7 @@ export const rememberFocus = (
   const oldTop = $Viewlet.style.top
   const oldWidth = $Viewlet.style.width
   const oldHeight = $Viewlet.style.height
-  const { activeElement } = document
+  const activeElement = getActiveElementInside($Viewlet)
   const isTreeFocused = activeElement?.getAttribute('role') === 'tree'
   const isRootTree =
     $Viewlet.getAttribute('role') === 'tree' && activeElement === $Viewlet

package/src/parts/VirtualDomElementProp/VirtualDomElementProp.ts

@@ -78,6 +78,8 @@ export const setProp = (
     case 'onInput':
     case 'onKeyDown':
     case 'onMouseDown':
+    case 'onMouseOver':
+    case 'onMouseOut':
     case 'onPointerDown':
     case 'onPointerOut':
     case 'onPointerOver':