fix(jsoneditor): styling fix

innoai-tech · Nov 8, 2024 · 0a381bd · 0a381bd
1 parent 5344fc0
commit 0a381bd
Show file tree

Hide file tree

Showing 5 changed files with 69 additions and 52 deletions.
diff --git a/nodepkg/jsoneditor/package.json b/nodepkg/jsoneditor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@innoai-tech/jsoneditor",
-  "version": "0.3.1",
+  "version": "0.3.2",
   "monobundle": {
     "build": {
       "clean": true

diff --git a/nodepkg/jsoneditor/src/views/Menu.tsx b/nodepkg/jsoneditor/src/views/Menu.tsx
@@ -4,9 +4,9 @@ import {
   type ObservableRef,
   rx,
   subscribeUntilUnmount,
-  type VNodeChild,
+  type VNodeChild
 } from "@innoai-tech/vuekit";
-import { Popper, styled } from "@innoai-tech/vueuikit";
+import { alpha, Popper, styled, variant } from "@innoai-tech/vueuikit";
 import { isUndefined } from "@innoai-tech/lodash";
 import { size } from "@floating-ui/dom";
 import { delay, EMPTY, fromEvent, merge, switchMap, tap } from "rxjs";
@@ -24,22 +24,22 @@ 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),
               tap(() => {
                 status$.hide();
-              }),
-            ),
+              })
+            )
           );
         }
 
         return EMPTY;
       }),
-      subscribeUntilUnmount(),
+      subscribeUntilUnmount()
     );
 
     return status$;
@@ -57,9 +57,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 +105,7 @@ export const Menu = component$<{
           {slots.default?.()?.[0] ?? null}
         </Popper>
       );
-    }),
+    })
   );
 });
 
@@ -129,15 +129,19 @@ export const Popover = component$<{
           {slots.default?.()?.[0] ?? null}
         </Popper>
       );
-    }),
+    })
   );
 });
 
 export const PopoverContainer = styled("div")({
-  roundedBottom: "sm",
   textStyle: "sys.body-small",
   pos: "relative",
+  roundedBottom: "sm",
   containerStyle: "sys.surface-container-lowest",
+  borderBottom: "1px solid",
+  borderRight: "1px solid",
+  borderLeft: "1px solid",
+  borderColor: variant("sys.outline-variant", alpha(0.38))
 });
 
 export const MenuItem = styled("div")({
@@ -152,11 +156,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
+  }
 });
diff --git a/nodepkg/jsoneditor/src/views/ObjectInput.tsx b/nodepkg/jsoneditor/src/views/ObjectInput.tsx
@@ -8,7 +8,7 @@ import {
   Schema,
   subscribeUntilUnmount,
   type Type,
-  type VNodeChild,
+  type VNodeChild
 } from "@innoai-tech/vuekit";
 import { Popper, styled } from "@innoai-tech/vueuikit";
 import { Icon } from "@innoai-tech/vuematerial";
@@ -19,12 +19,7 @@ import { Menu, MenuItem, PopupStatus } from "./Menu.tsx";
 import { ActionBtn, Actions } from "./Actions.tsx";
 import { CopyAsJSONIconBtn } from "./JSONRaw.tsx";
 import { Tooltip } from "./Tooltip.tsx";
-import {
-  InputActionSubject,
-  InputText,
-  ValueContainer,
-  ValueInputActions,
-} from "./ValueInput.tsx";
+import { InputActionSubject, InputText, ValueContainer, ValueInputActions } from "./ValueInput.tsx";
 import { combineLatest, tap } from "rxjs";
 
 export const RemovePropIconBtn = component$<{
@@ -74,7 +69,7 @@ export const ObjectInput = component$<{
                 .map(([propName, _propValue, propSchema]) => {
                   return {
                     propName: String(propName),
-                    typedef: propSchema,
+                    typedef: propSchema
                   };
                 })}
             />
@@ -111,15 +106,15 @@ export const ObjectInput = component$<{
                   {slots.$value?.(propSchema, propValue, {
                     ...props.ctx,
                     path: path,
-                    branch: [...props.ctx.branch, propValue],
+                    branch: [...props.ctx.branch, propValue]
                   })}
                 </Line>
               );
-            },
+            }
           )}
         </Block>
       );
-    }),
+    })
   );
 });
 
@@ -140,7 +135,7 @@ export const PropValueInput = component$<{
   const editor$ = JSONEditorProvider.use();
 
   const selectFocus$ = new ImmerBehaviorSubject({
-    index: 0,
+    index: 0
   });
 
   const reset = () => {
@@ -154,7 +149,7 @@ export const PropValueInput = component$<{
     }
 
     selectFocus$.next({
-      index: 0,
+      index: 0
     });
   };
 
@@ -171,7 +166,7 @@ export const PropValueInput = component$<{
         }
       }
     }),
-    subscribeUntilUnmount(),
+    subscribeUntilUnmount()
   );
 
   const commit = (prop?: string) => {
@@ -208,7 +203,7 @@ export const PropValueInput = component$<{
           break;
       }
     }),
-    subscribeUntilUnmount(),
+    subscribeUntilUnmount()
   );
 
   const $inputForProp = rx(
@@ -222,7 +217,7 @@ export const PropValueInput = component$<{
           data-options={isOpen}
         />
       );
-    }),
+    })
   );
 
   return rx(
@@ -237,21 +232,25 @@ export const PropValueInput = component$<{
                   commit(prop);
                 }}
                 open$={open$}
-                $content={options.map((opt, i) => {
-                  if (input) {
-                    if (!opt.propName.includes(input)) {
-                      return null;
-                    }
-                  }
+                $content={
+                  <div>
+                    {options.map((opt, i) => {
+                      if (input) {
+                        if (!opt.propName.includes(input)) {
+                          return null;
+                        }
+                      }
 
-                  return (
-                    <PropMenuItem
-                      propName={opt.propName}
-                      typedef={opt.typedef}
-                      data-focus={i === focus.index % options.length}
-                    />
-                  );
-                })}
+                      return (
+                        <PropMenuItem
+                          propName={opt.propName}
+                          typedef={opt.typedef}
+                          data-focus={i === focus.index % options.length}
+                        />
+                      );
+                    })}
+                  </div>
+                }
               >
                 {$inputForProp}
               </Menu>
@@ -292,7 +291,7 @@ export const PropValueInput = component$<{
           </ValueContainer>
         </Line>
       );
-    }),
+    })
   );
 });
 
@@ -316,6 +315,6 @@ const PropMenuItem = component<{
 
 const AddPropMenuItemContainer = styled(MenuItem)({
   [`& ${PropName}`]: {
-    textAlign: "left",
-  },
+    textAlign: "left"
+  }
 });
diff --git a/nodepkg/jsoneditor/src/views/TokenView.tsx b/nodepkg/jsoneditor/src/views/TokenView.tsx
@@ -61,6 +61,9 @@ const PropNameView = styled("div")({
   fontFamily: "inherit",
   wordBreak: "keep-all",
   whiteSpace: "nowrap",
+
+  border: "1px solid",
+  borderColor: "rgba(0,0,0,0)",
   fontSize: 12,
   lineHeight: 24,
 

diff --git a/nodepkg/jsoneditor/src/views/ValueInput.tsx b/nodepkg/jsoneditor/src/views/ValueInput.tsx
@@ -25,7 +25,7 @@ import {
   switchMap,
   tap
 } from "rxjs";
-import { Popper, styled } from "@innoai-tech/vueuikit";
+import { alpha, Popper, styled, variant } from "@innoai-tech/vueuikit";
 import { Icon } from "@innoai-tech/vuematerial";
 import { mdiCancel, mdiCheckBold } from "@mdi/js";
 import { ActionBtn } from "./Actions.tsx";
@@ -489,11 +489,15 @@ export const ValueInput = component$<{
 });
 
 export const ValueInputActions = styled("div")({
+  borderRight: "1px solid",
+  borderTop: "1px solid",
+  borderBottom: "1px solid",
+  borderColor: variant("sys.outline-variant", alpha(0.38)),
   containerStyle: "sys.surface-container-lowest",
   roundedRight: "sm",
   display: "flex",
   px: 2,
-  ml: -2
+  ml: -4
 });
 
 export const ValueContainer = styled("div")({
@@ -510,6 +514,8 @@ export const ValueContainer = styled("div")({
   gap: 8,
 
   "& [data-value]": {
+    border: "1px solid",
+    borderColor: "rgba(0,0,0,0)",
     maxWidth: "40vw",
     width: "100%",
     overflow: "hidden",
@@ -523,12 +529,13 @@ export const ValueContainer = styled("div")({
   },
 
   "& textarea,input": {
+    border: "1px solid",
+    borderColor: variant("sys.outline-variant", alpha(0.38)),
     flex: 1,
     rounded: "xs",
     containerStyle: "sys.surface-container-lowest",
     width: "100%",
     maxWidth: "40vw",
-    border: "none",
     outline: "none",
     px: 8,
     py: 0,
@@ -537,7 +544,11 @@ export const ValueContainer = styled("div")({
     color: "inherit",
     lineHeight: "inherit",
     overflow: "hidden",
-    resize: "none"
+    resize: "none",
+
+    "&[data-options]:focus": {
+      roundedBottom: 0
+    }
   },
 
   _type__string: {