From 0a381bd5784316f5559c54a5ec4c81e6169afc86 Mon Sep 17 00:00:00 2001 From: Morlay Date: Fri, 8 Nov 2024 10:35:40 +0800 Subject: [PATCH] fix(jsoneditor): styling fix --- nodepkg/jsoneditor/package.json | 2 +- nodepkg/jsoneditor/src/views/Menu.tsx | 32 +++++----- nodepkg/jsoneditor/src/views/ObjectInput.tsx | 65 ++++++++++---------- nodepkg/jsoneditor/src/views/TokenView.tsx | 3 + nodepkg/jsoneditor/src/views/ValueInput.tsx | 19 ++++-- 5 files changed, 69 insertions(+), 52 deletions(-) diff --git a/nodepkg/jsoneditor/package.json b/nodepkg/jsoneditor/package.json index 443fb24..5c67500 100644 --- 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 index a6f8446..2cf6d78 100644 --- 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,7 +24,7 @@ export class PopupStatus extends ImmerBehaviorSubject { fromEvent(inputEl, "focus"), tap(() => { status$.show(); - }), + }) ), rx( fromEvent(inputEl, "blur"), @@ -32,14 +32,14 @@ export class PopupStatus extends ImmerBehaviorSubject { delay(10), tap(() => { status$.hide(); - }), - ), + }) + ) ); } return EMPTY; }), - subscribeUntilUnmount(), + subscribeUntilUnmount() ); return status$; @@ -57,9 +57,9 @@ export class PopupStatus extends ImmerBehaviorSubject { 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} ); - }), + }) ); }); @@ -129,15 +129,19 @@ export const Popover = component$<{ {slots.default?.()?.[0] ?? null} ); - }), + }) ); }); 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 index 43c2655..9f93eb1 100644 --- 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] })} ); - }, + } )} ); - }), + }) ); }); @@ -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={ +
+ {options.map((opt, i) => { + if (input) { + if (!opt.propName.includes(input)) { + return null; + } + } - return ( - - ); - })} + return ( + + ); + })} +
+ } > {$inputForProp} @@ -292,7 +291,7 @@ export const PropValueInput = component$<{ ); - }), + }) ); }); @@ -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 index 1cb1748..9f86fe8 100644 --- 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 index daf8ea6..e82aad8 100644 --- 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: {