feat: add row direction

Author: itwillwork

src/lib/kit/components/Layouts/Row/Row.scss

@@ -1,17 +1,29 @@
 @import '../../../styles/variables.scss';
 
 .#{$ns}row {
-    display: flex;
-    width: 500px;
-    max-width: 500px;
     margin-bottom: 15px;
 
+    &_direction-horizontal {
+        display: flex;
+        width: 500px;
+        max-width: 500px;
+    }
+
+    &_direction-vertical {
+        display: flex;
+        width: 500px;
+        max-width: 500px;
+    }
+
     &:last-child {
         margin-bottom: 0;
     }
 
-    &__left {
-        width: 180px;
+    &__label {
+        &_direction-horizontal {
+            width: 180px;
+        }
+
         min-height: 28px;
         display: flex;
         margin-bottom: auto;
@@ -44,9 +56,12 @@
     }
 
     &__note {
-        padding-right: 16px;
         position: relative;
 
+        &_direction-horizontal {
+            padding-right: 16px;
+        }
+
         &-inner {
             position: absolute;
             margin-top: 1px;
@@ -61,11 +76,13 @@
         }
     }
 
-    &__right {
-        display: flex;
-        flex-direction: column;
-        flex-grow: 1;
-        margin-left: 15px;
+    &__value {
+        &_direction-horizontal {
+            display: flex;
+            flex-direction: column;
+            flex-grow: 1;
+            margin-left: 15px;
+        }
 
         &-inner {
             display: flex;

src/lib/kit/components/Layouts/Row/Row.tsx

@@ -22,6 +22,7 @@ import './Row.scss';
 const b = block('row');
 
 interface RowProps {
+    direction?: 'vertical' | 'horizontal';
     verboseDescription?: boolean;
 }
 
@@ -31,20 +32,21 @@ const RowBase = <T extends FieldValue, S extends Spec>({
     input,
     meta,
     verboseDescription,
+    direction = 'vertical',
     children,
 }: LayoutProps<T, undefined, undefined, S> & RowProps) => {
     const arrayItem = React.useMemo(() => isArrayItem(name), [name]);
     const generateButton = React.useMemo(() => withGenerateButton(spec), [spec]);
 
     return (
-        <div className={b()}>
-            <div className={b('left')}>
-                <div className={b('left-inner')}>
+        <div className={b('', {direction})}>
+            <div className={b('label', {direction})}>
+                <div className={b('label-inner')}>
                     <Text className={b('title', {required: spec.required})}>
                         {spec.viewSpec.layoutTitle}
                     </Text>
                     {!verboseDescription && spec.viewSpec.layoutDescription ? (
-                        <span className={b('note')}>
+                        <span className={b('note', {direction})}>
                             <Text className={b('note-inner')}>
                                 <HelpPopover
                                     htmlContent={spec.viewSpec.layoutDescription}
@@ -55,8 +57,8 @@ const RowBase = <T extends FieldValue, S extends Spec>({
                     ) : null}
                 </div>
             </div>
-            <div className={b('right')}>
-                <div className={b('right-inner')}>
+            <div className={b('value', {direction})}>
+                <div className={b('value-inner')}>
                     <ErrorWrapper
                         name={name}
                         meta={meta}

src/lib/kit/components/ViewLayouts/ViewRow/ViewRow.scss

@@ -3,17 +3,23 @@
 
 .#{$ns}view-row {
     width: 100%;
-    display: flex;
     margin-bottom: 20px;
 
     &:last-child {
         margin-bottom: 0;
     }
 
-    &__left {
-        width: 300px;
-        max-width: 300px;
-        min-width: 300px;
+    &_direction-horizontal {
+        display: flex;
+    }
+
+    &__label {
+        &_direction-horizontal {
+            width: 300px;
+            max-width: 300px;
+            min-width: 300px;
+        }
+
         display: flex;
         align-items: baseline;
         overflow: hidden;
@@ -30,11 +36,13 @@
         border-bottom: 1px dotted var(--g-color-text-secondary);
     }
 
-    &__right {
-        max-width: 480px;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
+    &__value {
+        &_direction-horizontal {
+            max-width: 480px;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+        }
 
         & > .#{$ns}view-transparent {
             margin-bottom: 6px;

src/lib/kit/components/ViewLayouts/ViewRow/ViewRow.tsx

@@ -15,16 +15,19 @@ export const ViewRow = <T extends FormValue, S extends Spec>({
     value,
     spec,
     children,
-}: ViewLayoutProps<T, S>) => {
+    direction = 'vertical',
+}: ViewLayoutProps<T, S> & {
+    direction?: 'vertical' | 'horizontal';
+}) => {
     const {showLayoutDescription} = useDynamicFormsCtx();
 
     if (!isNotEmptyValue(value, spec)) {
         return null;
     }
 
     return (
-        <div className={b()}>
-            <div className={b('left')}>
+        <div className={b('', {direction})}>
+            <div className={b('label', {direction})}>
                 <Text whiteSpace="nowrap" color="secondary" ellipsis={true}>
                     {spec.viewSpec.layoutTitle}
                 </Text>
@@ -35,9 +38,9 @@ export const ViewRow = <T extends FormValue, S extends Spec>({
                         placement={['bottom', 'top']}
                     />
                 ) : null}
-                <div className={b('dots')} />
+                {direction === 'horizontal' && <div className={b('dots')} />}
             </div>
-            <div className={b('right')}>{children}</div>
+            <div className={b('value', {direction})}>{children}</div>
             <CopyButton spec={spec} value={value} />
         </div>
     );