geekinney/etaf-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor: express UI layouts through canonical Box

Browse Source
This commit is contained in:
Kinneyzhang 2026-08-26 16:22:23 +08:00
parent 127748e7b1
commit afa1b251e0
2 changed files with 24 additions and 21 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

32
etaf-ui.el
View File

@ -27,9 +27,7 @@
(declare-function etaf-data-selected-ref "etaf-data" (controller identity)) (declare-function etaf-data-selected-ref "etaf-data" (controller identity))
(declare-function etaf-theme-defaults "etaf-context" (&optional default)) (declare-function etaf-theme-defaults "etaf-context" (&optional default))
(declare-function text "etaf-view" (&rest arguments)) (declare-function text "etaf-view" (&rest arguments))
(declare-function row "etaf-view" (&rest arguments)) (declare-function box "etaf-view" (&rest arguments))
(declare-function column "etaf-view" (&rest arguments))
(declare-function flex "etaf-view" (&rest arguments))
(declare-function expr "etaf-view" (&rest arguments)) (declare-function expr "etaf-view" (&rest arguments))
(declare-function slot "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) (defun etaf-ui--grid-header (columns theme)
"Return a View header row for COLUMNS using semantic THEME colors." "Return a View header row for COLUMNS using semantic THEME colors."
(etaf-view (etaf-view
(row :class "etaf-data-grid-header" (box :layout 'row :class "etaf-data-grid-header"
:border (etaf-ui--theme-border :border (etaf-ui--theme-border
(plist-get theme :ui-grid-border)) (plist-get theme :ui-grid-border))
(expr :value (expr :value
@ -384,8 +382,9 @@ ROW-ACTIONS owns stable keyed callbacks across body reevaluation."
(unless host-ref (unless host-ref
(error "ETAF DataGrid :row-ref must return a non-nil stable ref"))) (error "ETAF DataGrid :row-ref must return a non-nil stable ref")))
(etaf--view-call (etaf--view-call
'row 'box
(list :key key (list :layout 'row
:key key
:class :class
(etaf--expr-create (etaf--expr-create
:thunk (lambda () :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 REF, DISABLED, CLASS, COLOR, BGCOLOR, BORDER, PADDING, FACE, TAB-INDEX, and
ARIA-LABEL provide its semantic and presentation properties." ARIA-LABEL provide its semantic and presentation properties."
(etaf-view (etaf-view
(row (box :layout 'row
:class (etaf-ui--class-value :class (etaf-ui--class-value
"etaf-checkbox" (if disabled "disabled" "enabled") class) "etaf-checkbox" (if disabled "disabled" "enabled") class)
:role 'checkbox :ref ref :disabled disabled :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 (let ((theme (etaf-ui-theme-tokens :ui-panel-fg :ui-panel-bg
:ui-panel-border))) :ui-panel-border)))
(etaf-view (etaf-view
(column (box :layout 'column
:class (etaf-ui--class-value "etaf-panel" nil class) :class (etaf-ui--class-value "etaf-panel" nil class)
:color (or color (plist-get theme :ui-panel-fg)) :color (or color (plist-get theme :ui-panel-fg))
:bgcolor (or bgcolor (plist-get theme :ui-panel-bg)) :bgcolor (or bgcolor (plist-get theme :ui-panel-bg))
@ -823,12 +822,13 @@ a stable Host reference."
:range-key #'car :range-key #'car
:range-item body-range-item))) :range-item body-range-item)))
(etaf--view-call (etaf--view-call
'column 'box
(list :class "etaf-data-grid" :color theme-color) (list :layout 'column :class "etaf-data-grid" :color theme-color)
(list (list
(etaf-ui--grid-header columns theme) (etaf-ui--grid-header columns theme)
(etaf--view-call (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 (etaf--slot-projection-create
:name 'footer :token 'etaf-ui-data-grid-footer :fallback nil))))))) :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-color parent-color
current-parent-bgcolor parent-bgcolor) current-parent-bgcolor parent-bgcolor)
(etaf-view (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)) (etaf-current-prop :class))
:width 'stretch :width 'stretch
:flex-direction 'row :flex-direction 'row
@ -918,7 +919,7 @@ readable in both GUI and text review."
:box-sizing 'border-box :box-sizing 'border-box
:padding (or (etaf-current-prop :padding) '(0 1)) :padding (or (etaf-current-prop :padding) '(0 1))
:gap '(0 (1)) :gap '(0 (1))
(column :width 'max-content (box :layout 'column :width 'max-content
:flex-grow 0 :flex-shrink 0 :flex-basis 'auto :flex-grow 0 :flex-shrink 0 :flex-basis 'auto
(button :label "←" :ref (etaf-current-prop :previous-ref) (button :label "←" :ref (etaf-current-prop :previous-ref)
:aria-label "Previous page" :aria-label "Previous page"
@ -931,7 +932,8 @@ readable in both GUI and text review."
:bgcolor current-parent-bgcolor :bgcolor current-parent-bgcolor
:face 'bold :face 'bold
:on-press previous)) :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 (text :class "etaf-pagination-label" :text-align 'center
(expr :value (expr :value
(format "Page %d / %d" (format "Page %d / %d"
@ -950,7 +952,7 @@ readable in both GUI and text review."
(last-item (min total (* page page-size)))) (last-item (min total (* page page-size))))
(format "%d–%d of %d" (format "%d–%d of %d"
first-item last-item total))))) first-item last-item total)))))
(column :width 'max-content (box :layout 'column :width 'max-content
:flex-grow 0 :flex-shrink 0 :flex-basis 'auto :flex-grow 0 :flex-shrink 0 :flex-basis 'auto
(button :label "→" :ref (etaf-current-prop :next-ref) (button :label "→" :ref (etaf-current-prop :next-ref)
:aria-label "Next page" :aria-label "Next page"

13
tests/etaf-ui-tests.el
View File

@ -76,7 +76,7 @@
:padding (9 9))) :padding (9 9)))
(lambda () (lambda ()
(etaf-view (etaf-view
(row (box :layout 'row
(button :label "Styled" :ref 'styled-button) (button :label "Styled" :ref 'styled-button)
(button :label "Custom" :ref 'custom-button (button :label "Custom" :ref 'custom-button
:color "explicit-color") :color "explicit-color")
@ -97,7 +97,7 @@
:ui-button-secondary-border "secondary-border")) :ui-button-secondary-border "secondary-border"))
(lambda () (lambda ()
(etaf-view (etaf-view
(row (box :layout 'row
(button :label "Token" :ref 'token-button) (button :label "Token" :ref 'token-button)
(button :label "Secondary" :ref 'token-secondary (button :label "Secondary" :ref 'token-secondary
:variant 'secondary)))))) :variant 'secondary))))))
@ -252,7 +252,7 @@
(progn (progn
(etaf-mount buffer-name (etaf-mount buffer-name
(etaf-view (etaf-view
(row (box :layout 'row
(button :label "Save" :ref 'enabled-save (button :label "Save" :ref 'enabled-save
:on-press (lambda () (cl-incf presses))) :on-press (lambda () (cl-incf presses)))
(button :label "Delete" :ref 'disabled-delete (button :label "Delete" :ref 'disabled-delete
@ -446,7 +446,7 @@
(progn (progn
(etaf-mount buffer-name (etaf-mount buffer-name
(etaf-view (etaf-view
(row (box :layout 'row
(checkbox :label "Open" :ref 'open-box (checkbox :label "Open" :ref 'open-box
:on-change (lambda (_value) :on-change (lambda (_value)
(cl-incf changes))) (cl-incf changes)))
@ -759,10 +759,11 @@
(etaf-mount (etaf-mount
buffer-name buffer-name
(etaf-view (etaf-view
(grid :width '(360) (box :layout 'grid :width '(360)
:grid-template-columns '((80) (200) (80)) :grid-template-columns '((80) (200) (80))
(text "Left") (text "Left")
(column :width 'stretch :padding '(0 2) :border "#CBD5E1" (box :layout 'column
:width 'stretch :padding '(0 2) :border "#CBD5E1"
(pagination :controller controller (pagination :controller controller
:previous-ref 'nested-page-previous :previous-ref 'nested-page-previous
:next-ref 'nested-page-next)) :next-ref 'nested-page-next))