fix: modify className name.

Author: jaywcjlove

core/README.md

@@ -368,34 +368,25 @@ const object = {
 }
 
 const Arrow = (props) => {
-  const { style, 'data-expand': expand,  ...reset } = props;
-  const defaultStyle = {
-    cursor: 'pointer',
-    height: '1em',
-    width: '1em',
-  };
+  const { style, 'data-expand': expand, ...reset } = props;
+  const svgProps = {
+    style: { cursor: 'pointer', height: '1em', width: '1em' },
+    viewBox: '0 0 24 24',
+    fill: 'var(--w-rjv-arrow-color, currentColor)',
+    ...reset
+  }
   if (!expand) {
     return (
-      <svg
-        viewBox="0 0 24 24"
-        fill="var(--w-rjv-arrow-color, currentColor)"
-        style={defaultStyle}
-        {...reset}
-      >
+      <svg {...svgProps}>
         <path d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M13,7H11V11H7V13H11V17H13V13H17V11H13V7Z" />
       </svg>
-    )
+    );
   }
   return (
-    <svg
-      viewBox="0 0 24 24"
-      fill="var(--w-rjv-arrow-color, currentColor)"
-      style={defaultStyle}
-      {...reset}
-    >
+    <svg {...svgProps}>
       <path d="M12,20C7.59,20 4,16.41 4,12C4,7.59 7.59,4 12,4C16.41,4 20,7.59 20,12C20,16.41 16.41,20 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M7,13H17V11H7" />
     </svg>
-  )
+  );
 }
 
 export default function Demo() {

core/src/node.tsx

@@ -72,7 +72,7 @@ export const CountInfo: FC<PropsWithChildren<LabelProps>> = ({ children }) => (
   <Label
     style={{ paddingLeft: 4, fontStyle: 'italic' }}
     color="var(--w-rjv-info-color, #0000004d)"
-    className="object-size"
+    className="w-rjv-object-size"
   >
     {children}
   </Label>
@@ -130,9 +130,9 @@ export function RooNode<T extends object>(props: RooNodeProps<T>) {
   } as ValueViewProps<T>;
 
   const arrowView = components.arrow ? (
-    cloneElement(components.arrow, { style: arrowStyle, 'data-expand': expand })
+    cloneElement(components.arrow, { style: arrowStyle, 'data-expand': expand, className: "w-rjv-arrow" })
   ) : (
-    <TriangleArrow style={arrowStyle} />
+    <TriangleArrow style={arrowStyle} className="w-rjv-arrow" />
   );
   const [showTools, setShowTools] = useState(false);
   const tools = enableClipboard ? <Copied show={showTools} text={value as T} render={components.copied} /> : undefined;
@@ -142,7 +142,7 @@ export function RooNode<T extends object>(props: RooNodeProps<T>) {
     eventProps.onMouseLeave = () => setShowTools(false);
   }
   return (
-    <div {...reset} {...eventProps}>
+    <div {...reset} className="w-rjv-inner" {...eventProps}>
       <Line style={{ display: 'inline-flex', alignItems: 'center' }} onClick={handle}>
         {arrowView}
         {(typeof keyName === 'string' || typeof keyName === 'number') && (
@@ -166,7 +166,7 @@ export function RooNode<T extends object>(props: RooNodeProps<T>) {
         {tools}
       </Line>
       {expand && (
-        <Line style={{ borderLeft: 'var(--w-rjv-border-left-width, 1px) solid var(--w-rjv-line-color, #ebebeb)', marginLeft: 6 }}>
+        <Line className="w-rjv-content" style={{ borderLeft: 'var(--w-rjv-border-left-width, 1px) solid var(--w-rjv-line-color, #ebebeb)', marginLeft: 6 }}>
           {nameKeys.length > 0 &&
             nameKeys.map((key, idx) => {
               const item = value[key];
@@ -185,14 +185,14 @@ export function RooNode<T extends object>(props: RooNodeProps<T>) {
               if (Array.isArray(item) && !isEmpty) {
                 const label = isArray ? idx : key;
                 return (
-                  <Line key={label + idx}>
+                  <Line key={label + idx} className="w-rjv-wrap">
                     <RooNode value={item} keyid={keyid + subkeyid + label} keyName={label} {...subNodeProps} />
                   </Line>
                 );
               }
               if (typeof item === 'object' && item && !((item as any) instanceof Date) && !isEmpty) {
                 return (
-                  <Line key={key + idx}>
+                  <Line key={key + idx} className="w-rjv-wrap">
                     <RooNode keyid={keyid + subkeyid + key} value={item} keyName={key} {...subNodeProps} />
                   </Line>
                 );

core/src/value.tsx

@@ -112,7 +112,10 @@ export function ValueView<T = object>(props: ValueViewProps<T>) {
 
   const [showTools, setShowTools] = useState(false);
   const tools = enableClipboard ? <Copied show={showTools} text={value} /> : undefined;
-  const eventProps: React.HTMLAttributes<HTMLDivElement> = {};
+  const eventProps: React.HTMLAttributes<HTMLDivElement> = {
+    className: 'w-rjv-line',
+    style: { paddingLeft: indentWidth },
+  };
   if (enableClipboard) {
     eventProps.onMouseEnter = () => setShowTools(true);
     eventProps.onMouseLeave = () => setShowTools(false);
@@ -132,7 +135,7 @@ export function ValueView<T = object>(props: ValueViewProps<T>) {
       </Label>
     );
     return (
-      <Line style={{ paddingLeft: indentWidth }} {...eventProps}>
+      <Line {...eventProps}>
         <Label {...reset}>
           {renderKey}
           <Colon />
@@ -152,7 +155,7 @@ export function ValueView<T = object>(props: ValueViewProps<T>) {
     </Fragment>
   )
   return (
-    <Line style={{ paddingLeft: indentWidth }} {...eventProps}>
+    <Line {...eventProps}>
       <Label {...reset}>
         {renderKey}
         <Colon />