feat(platform): add aLabelAlign prop to detail-view

Author: xiejay97

packages/platform/src/app/components/detail-view/DetailView.tsx

@@ -11,6 +11,7 @@ export interface AppDetailViewProps extends Omit<React.HTMLAttributes<HTMLDivEle
   }[];
   aCol?: number | true | Record<'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl', number | true>;
   aGutter?: number | [number?, number?];
+  aLabelAlign?: 'left' | 'center' | 'right';
   aLabelWidth?: string | number;
   aEmpty?: React.ReactNode;
   aVertical?: boolean;
@@ -21,14 +22,15 @@ export function AppDetailView(props: AppDetailViewProps): JSX.Element | null {
     aList,
     aCol = { xs: 12, md: 6, lg: 4, xxl: 3 },
     aGutter,
+    aLabelAlign = 'left',
     aLabelWidth,
     aEmpty = '-',
     aVertical = false,
 
     ...restProps
   } = props;
 
-  const [gutterX, gutterY] = isArray(aGutter) ? aGutter : [aGutter, aGutter];
+  const [gutterY, gutterX] = isArray(aGutter) ? aGutter : [aGutter, aGutter];
   const col = (() => {
     if (aCol === true) {
       return 'col';
@@ -81,7 +83,13 @@ export function AppDetailView(props: AppDetailViewProps): JSX.Element | null {
           : _isEmpty;
         return (
           <div key={label} className={getClassName('app-detail-view__item', col)}>
-            <div className="app-detail-view__item-label" style={{ width: labelWidth }}>
+            <div
+              className="app-detail-view__item-label"
+              style={{
+                width: labelWidth,
+                textAlign: aLabelAlign,
+              }}
+            >
               {label}
             </div>
             <div className="app-detail-view__item-content">{isEmpty ? aEmpty : content}</div>

packages/platform/src/styles/components/detail-view.scss

@@ -13,7 +13,7 @@
 
   @include e(item) {
     display: inline-flex;
-    gap: 8px;
+    gap: 8px 12px;
   }
 
   @include e(item-label) {
@@ -25,4 +25,8 @@
       content: ':';
     }
   }
+
+  @include e(item-content) {
+    word-break: break-all;
+  }
 }