fix: jsoneditor

nodedevpkg/vue-vite-presets/package.json

@@ -21,7 +21,7 @@
     "unist-util-visit": "^5.0.0",
     "vite": "^5.4.11",
     "vite-plugin-pages": "^0.32.3",
-    "vite-tsconfig-paths": "^5.1.2"
+    "vite-tsconfig-paths": "^5.1.3"
   },
   "peerDependencies": {},
   "exports": {

nodepkg/jsoneditor/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innoai-tech/jsoneditor",
-  "version": "0.3.4",
+  "version": "0.3.5",
   "monobundle": {
     "build": {
       "clean": true

nodepkg/jsoneditor/src/inputs/ArrayInput.tsx

@@ -92,7 +92,6 @@ const AddItemIconBtn = component$<{
   $default?: VNodeChild;
 }>((props, { emit, render }) => {
   const inputEl$ = observableRef<HTMLInputElement | null>(null);
-
   const inputText$ = InputText.from(inputEl$);
   const inputAction$ = InputActionSubject.from(inputEl$);
   const open$ = PopupStatus.from(inputEl$);
@@ -189,11 +188,13 @@ const AddItemIconBtn = component$<{
             </ValueInputActions>
           }
         >
-          <input
-            ref={inputEl$}
-            type="text"
-            placeholder={"添加数组项 (可粘贴 JSON 字符串)"}
-          />
+          <div data-input-wrapper>
+            <input
+              ref={inputEl$}
+              type="text"
+              placeholder={"添加数组项 (可粘贴 JSON 字符串)"}
+            />
+          </div>
         </Popper>
       );
     })

nodepkg/jsoneditor/src/inputs/ObjectInput.tsx

@@ -221,12 +221,14 @@ export const PropValueInput = component$<{
     open$,
     render((isOpen) => {
       return (
-        <input
-          ref={inputEl$}
-          type="text"
-          placeholder={"添加属性 (可粘贴 JSON 字符串)"}
-          data-options={isOpen}
-        />
+        <div data-input-wrapper>
+          <input
+            ref={inputEl$}
+            type="text"
+            placeholder={"添加属性 (可粘贴 JSON 字符串)"}
+            data-options={isOpen}
+          />
+        </div>
       );
     })
   );
@@ -293,11 +295,13 @@ export const PropValueInput = component$<{
                 </ValueInputActions>
               }
             >
-              <input
-                ref={inputEl$}
-                type="text"
-                placeholder={"添加属性 (可粘贴 JSON 字符串)"}
-              />
+              <div data-input-wrapper>
+                <input
+                  ref={inputEl$}
+                  type="text"
+                  placeholder={"添加属性 (可粘贴 JSON 字符串)"}
+                />
+              </div>
             </Popper>
           </ValueContainer>
         </Line>

nodepkg/jsoneditor/src/inputs/ValueInput.tsx

@@ -100,12 +100,16 @@ export class InputActionSubject extends Subject<InputAction> {
                   }
                   break;
                 case "ArrowDown":
-                  e.preventDefault();
-                  inputAction$.next({ type: "SELECT", direction: 1 });
+                  if ((e.target as HTMLElement).getAttribute("data-options")) {
+                    e.preventDefault();
+                    inputAction$.next({ type: "SELECT", direction: 1 });
+                  }
                   break;
                 case "ArrowUp":
-                  e.preventDefault();
-                  inputAction$.next({ type: "SELECT", direction: -1 });
+                  if ((e.target as HTMLElement).getAttribute("data-options")) {
+                    e.preventDefault();
+                    inputAction$.next({ type: "SELECT", direction: -1 });
+                  }
                   break;
               }
             })
@@ -446,11 +450,13 @@ export const ValueInput = component$<{
                   </div>
                 }
               >
-                <input
-                  value={value == undefined ? "" : `${value}`}
-                  ref={inputEl$}
-                  data-options={true}
-                />
+                <div data-input-wrapper>
+                  <input
+                    value={value == undefined ? "" : `${value}`}
+                    ref={inputEl$}
+                    data-options={true}
+                  />
+                </div>
               </Menu>
             ) : (
               <span>{JSON.stringify(value) ?? "undefined"}</span>
@@ -497,11 +503,13 @@ export const ValueInput = component$<{
                 </ValueInputActions>
               }
             >
-              <textarea
-                ref={inputEl$}
-                rows={1}
-                value={value == undefined ? "" : `${value}`}
-              />
+              <div data-input-wrapper>
+                 <textarea
+                   ref={inputEl$}
+                   rows={1}
+                   value={value == undefined ? "" : `${value}`}
+                 />
+              </div>
             </Popper>
           ) : (
             <span data-value>{JSON.stringify(value) ?? "undefined"}</span>
@@ -552,14 +560,23 @@ export const ValueContainer = styled("div")({
     }
   },
 
+  "& [data-input-wrapper]": {
+    width: "100%",
+    maxWidth: "40vw",
+    display: "flex",
+    alignItems: "center",
+    border: "1px solid",
+    overflow: "hidden",
+    borderColor: variant("sys.outline-variant", alpha(0.38))
+  },
+
   "& textarea,input": {
     border: "1px solid",
-    borderColor: variant("sys.outline-variant", alpha(0.38)),
+    borderColor: "rgba(0,0,0,0)",
     flex: 1,
     rounded: "xs",
     containerStyle: "sys.surface-container-lowest",
     width: "100%",
-    maxWidth: "40vw",
     outline: "none",
     px: 8,
     py: 0,

nodepkg/jsoneditor/src/models/JSONEditor.tsx

@@ -6,33 +6,24 @@ import {
   type InferSchema,
   JSONPointer,
   t,
-  type Type,
+  type Type
 } from "@innoai-tech/vuekit";
-import {
-  get,
-  isArray,
-  isFunction,
-  isNumber,
-  isPlainObject,
-  isUndefined,
-  last,
-  set,
-} from "@innoai-tech/lodash";
+import { get, isArray, isFunction, isNumber, isPlainObject, isUndefined, last, set } from "@innoai-tech/lodash";
 import { Observable } from "rxjs";
 
 export class JSONEditor<T extends Type> extends Observable<Infer<T>> {
   static of<T extends Type>(typedef: T, initials?: Partial<Infer<T>>) {
     return new JSONEditor<Type<Infer<T>, InferSchema<T>>>(
       typedef,
-      initials ?? (typedef.type == "array" ? [] : {}),
+      initials ?? (typedef.type == "array" ? [] : {})
     );
   }
 
   #values$ = new ImmerBehaviorSubject<Infer<T>>({});
 
   constructor(
     public typedef: T,
-    protected initials: Infer<T>,
+    protected initials: Infer<T>
   ) {
     super((subscriber) => {
       const sub = this.#values$.subscribe(subscriber);
@@ -57,12 +48,12 @@ export class JSONEditor<T extends Type> extends Observable<Infer<T>> {
   update<T>(
     path: Array<string | number>,
     mut: (value: T) => void,
-    defaultValue: T,
+    defaultValue: T
   ): void;
   update<T>(
     path: Array<string | number>,
     valueOrMut: T | ((value: T) => void),
-    defaultValue?: T,
+    defaultValue?: T
   ): void {
     this.#error$.next({});
 
@@ -128,15 +119,15 @@ export class JSONEditor<T extends Type> extends Observable<Infer<T>> {
 }
 
 export const JSONEditorProvider = createProvider(
-  () => new JSONEditor<Type<any, any>>(t.object(), {}),
+  () => new JSONEditor<Type<any, any>>(t.object(), {})
 );
 
 export const JSONEditorSlotsProvider = createProvider(() => {
   return {} as {
     $value?: (
       _t: Type,
       _value: any,
-      _ctx: Context,
+      _ctx: Context
     ) => JSX.Element | null | undefined;
   };
 });

nodepkg/jsoneditor/src/views/Menu.tsx

@@ -4,7 +4,7 @@ import {
   type ObservableRef,
   rx,
   subscribeUntilUnmount,
-  type VNodeChild,
+  type VNodeChild
 } from "@innoai-tech/vuekit";
 import { alpha, Popper, styled, variant } from "@innoai-tech/vueuikit";
 import { isUndefined } from "@innoai-tech/lodash";
@@ -24,22 +24,24 @@ export class PopupStatus extends ImmerBehaviorSubject<boolean> {
               fromEvent<FocusEvent>(inputEl, "focus"),
               tap(() => {
                 status$.show();
-              }),
+              })
             ),
             rx(
               fromEvent<FocusEvent>(inputEl, "blur"),
               // delay to avoid break other actions
-              delay(10),
+              delay(50),
               tap(() => {
-                status$.hide();
-              }),
-            ),
+                if (status$.value) {
+                  status$.hide();
+                }
+              })
+            )
           );
         }
 
         return EMPTY;
       }),
-      subscribeUntilUnmount(),
+      subscribeUntilUnmount()
     );
 
     return status$;
@@ -57,9 +59,9 @@ export class PopupStatus extends ImmerBehaviorSubject<boolean> {
 const sameWidth = size({
   apply({ elements, rects }) {
     Object.assign(elements.floating.style, {
-      width: `${rects.reference.width}px`,
+      width: `${rects.reference.width}px`
     });
-  },
+  }
 });
 
 export const Menu = component$<{
@@ -105,7 +107,7 @@ export const Menu = component$<{
           {slots.default?.()?.[0] ?? null}
         </Popper>
       );
-    }),
+    })
   );
 });
 
@@ -129,7 +131,7 @@ export const Popover = component$<{
           {slots.default?.()?.[0] ?? null}
         </Popper>
       );
-    }),
+    })
   );
 });
 
@@ -141,7 +143,7 @@ export const PopoverContainer = styled("div")({
   borderBottom: "1px solid",
   borderRight: "1px solid",
   borderLeft: "1px solid",
-  borderColor: variant("sys.outline-variant", alpha(0.38)),
+  borderColor: variant("sys.outline-variant", alpha(0.38))
 });
 
 export const MenuItem = styled("div")({
@@ -156,11 +158,11 @@ export const MenuItem = styled("div")({
   cursor: "pointer",
 
   _hover: {
-    containerStyle: "sys.surface-container",
+    containerStyle: "sys.surface-container"
   },
 
   _focus: {
     containerStyle: "sys.surface-container",
-    outline: 0,
-  },
+    outline: 0
+  }
 });

nodepkg/vue-jsx-runtime/package.json

@@ -8,7 +8,7 @@
     }
   },
   "dependencies": {
-    "vue": "^3.5.12"
+    "vue": "^3.5.13"
   },
   "peerDependencies": {},
   "exports": {

nodepkg/vuekit/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@innoai-tech/vuekit",
-  "version": "0.9.0",
+  "version": "0.9.1",
   "monobundle": {
     "exports": {
       ".": "./src/index.ts",
@@ -14,7 +14,7 @@
     "@innoai-tech/vue-jsx-runtime": "workspace:^",
     "immer": "^10.1.1",
     "rxjs": "^7.8.1",
-    "vue": "^3.5.12",
+    "vue": "^3.5.13",
     "vue-router": "^4.4.5"
   },
   "peerDependencies": {},