From afa1b251e08f38a5dac97e77dbc633c49b0c2fbd Mon Sep 17 00:00:00 2001 From: Kinneyzhang Date: Wed, 26 Aug 2026 16:22:23 +0800 Subject: [PATCH] refactor: express UI layouts through canonical Box --- etaf-ui.el | 32 +++++++++++++++++--------------- tests/etaf-ui-tests.el | 13 +++++++------ 2 files changed, 24 insertions(+), 21 deletions(-) diff --git a/etaf-ui.el b/etaf-ui.el index 7599420..841c220 100644 --- a/etaf-ui.el +++ b/etaf-ui.el @@ -27,9 +27,7 @@ (declare-function etaf-data-selected-ref "etaf-data" (controller identity)) (declare-function etaf-theme-defaults "etaf-context" (&optional default)) (declare-function text "etaf-view" (&rest arguments)) -(declare-function row "etaf-view" (&rest arguments)) -(declare-function column "etaf-view" (&rest arguments)) -(declare-function flex "etaf-view" (&rest arguments)) +(declare-function box "etaf-view" (&rest arguments)) (declare-function expr "etaf-view" (&rest arguments)) (declare-function slot "etaf-view" (&rest arguments)) @@ -310,7 +308,7 @@ too small; the original ROW remains intact for selection and callbacks." (defun etaf-ui--grid-header (columns theme) "Return a View header row for COLUMNS using semantic THEME colors." (etaf-view - (row :class "etaf-data-grid-header" + (box :layout 'row :class "etaf-data-grid-header" :border (etaf-ui--theme-border (plist-get theme :ui-grid-border)) (expr :value @@ -384,8 +382,9 @@ ROW-ACTIONS owns stable keyed callbacks across body reevaluation." (unless host-ref (error "ETAF DataGrid :row-ref must return a non-nil stable ref"))) (etaf--view-call - 'row - (list :key key + 'box + (list :layout 'row + :key key :class (etaf--expr-create :thunk (lambda () @@ -600,7 +599,7 @@ validation; the caller owns the value and subsequent state write." REF, DISABLED, CLASS, COLOR, BGCOLOR, BORDER, PADDING, FACE, TAB-INDEX, and ARIA-LABEL provide its semantic and presentation properties." (etaf-view - (row + (box :layout 'row :class (etaf-ui--class-value "etaf-checkbox" (if disabled "disabled" "enabled") class) :role 'checkbox :ref ref :disabled disabled @@ -687,7 +686,7 @@ Arguments are TITLE, CLASS, COLOR, BGCOLOR, BORDER, PADDING, and REF." (let ((theme (etaf-ui-theme-tokens :ui-panel-fg :ui-panel-bg :ui-panel-border))) (etaf-view - (column + (box :layout 'column :class (etaf-ui--class-value "etaf-panel" nil class) :color (or color (plist-get theme :ui-panel-fg)) :bgcolor (or bgcolor (plist-get theme :ui-panel-bg)) @@ -823,12 +822,13 @@ a stable Host reference." :range-key #'car :range-item body-range-item))) (etaf--view-call - 'column - (list :class "etaf-data-grid" :color theme-color) + 'box + (list :layout 'column :class "etaf-data-grid" :color theme-color) (list (etaf-ui--grid-header columns theme) (etaf--view-call - 'column (list :class "etaf-data-grid-body") (list body-expr)) + 'box (list :layout 'column :class "etaf-data-grid-body") + (list body-expr)) (etaf--slot-projection-create :name 'footer :token 'etaf-ui-data-grid-footer :fallback nil))))))) @@ -905,7 +905,8 @@ readable in both GUI and text review." current-parent-color parent-color current-parent-bgcolor parent-bgcolor) (etaf-view - (flex :class (etaf-ui--class-value "etaf-pagination" nil + (box :layout 'flex + :class (etaf-ui--class-value "etaf-pagination" nil (etaf-current-prop :class)) :width 'stretch :flex-direction 'row @@ -918,7 +919,7 @@ readable in both GUI and text review." :box-sizing 'border-box :padding (or (etaf-current-prop :padding) '(0 1)) :gap '(0 (1)) - (column :width 'max-content + (box :layout 'column :width 'max-content :flex-grow 0 :flex-shrink 0 :flex-basis 'auto (button :label "←" :ref (etaf-current-prop :previous-ref) :aria-label "Previous page" @@ -931,7 +932,8 @@ readable in both GUI and text review." :bgcolor current-parent-bgcolor :face 'bold :on-press previous)) - (column :flex-grow 1 :flex-shrink 1 :flex-basis '(0) :min-width 0 + (box :layout 'column + :flex-grow 1 :flex-shrink 1 :flex-basis '(0) :min-width 0 (text :class "etaf-pagination-label" :text-align 'center (expr :value (format "Page %d / %d" @@ -950,7 +952,7 @@ readable in both GUI and text review." (last-item (min total (* page page-size)))) (format "%d–%d of %d" first-item last-item total))))) - (column :width 'max-content + (box :layout 'column :width 'max-content :flex-grow 0 :flex-shrink 0 :flex-basis 'auto (button :label "→" :ref (etaf-current-prop :next-ref) :aria-label "Next page" diff --git a/tests/etaf-ui-tests.el b/tests/etaf-ui-tests.el index 4cd2cb3..db88b35 100644 --- a/tests/etaf-ui-tests.el +++ b/tests/etaf-ui-tests.el @@ -76,7 +76,7 @@ :padding (9 9))) (lambda () (etaf-view - (row + (box :layout 'row (button :label "Styled" :ref 'styled-button) (button :label "Custom" :ref 'custom-button :color "explicit-color") @@ -97,7 +97,7 @@ :ui-button-secondary-border "secondary-border")) (lambda () (etaf-view - (row + (box :layout 'row (button :label "Token" :ref 'token-button) (button :label "Secondary" :ref 'token-secondary :variant 'secondary)))))) @@ -252,7 +252,7 @@ (progn (etaf-mount buffer-name (etaf-view - (row + (box :layout 'row (button :label "Save" :ref 'enabled-save :on-press (lambda () (cl-incf presses))) (button :label "Delete" :ref 'disabled-delete @@ -446,7 +446,7 @@ (progn (etaf-mount buffer-name (etaf-view - (row + (box :layout 'row (checkbox :label "Open" :ref 'open-box :on-change (lambda (_value) (cl-incf changes))) @@ -759,10 +759,11 @@ (etaf-mount buffer-name (etaf-view - (grid :width '(360) + (box :layout 'grid :width '(360) :grid-template-columns '((80) (200) (80)) (text "Left") - (column :width 'stretch :padding '(0 2) :border "#CBD5E1" + (box :layout 'column + :width 'stretch :padding '(0 2) :border "#CBD5E1" (pagination :controller controller :previous-ref 'nested-page-previous :next-ref 'nested-page-next))