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

refactor: express examples with canonical Box layouts

Browse Source
This commit is contained in:
Kinneyzhang 2026-08-26 16:23:53 +08:00
parent 0aee417282
commit 44f70a6f61
3 changed files with 22 additions and 22 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
examples/etaf-counter-example.el
View File

@ -28,7 +28,7 @@
(defun etaf-counter-example--header (title) (defun etaf-counter-example--header (title)
"Return the counter header for TITLE." "Return the counter header for TITLE."
(etaf-view (etaf-view
(column :class "hero" (box :layout 'column :class "hero"
(text :class "eyebrow" "BEST PRACTICE / RETAINED STATE") (text :class "eyebrow" "BEST PRACTICE / RETAINED STATE")
(text :face 'bold (expr :value title)) (text :face 'bold (expr :value title))
(text :color "#66706A" (text :color "#66706A"
@ -37,7 +37,7 @@
(defun etaf-counter-example--metrics (count double status) (defun etaf-counter-example--metrics (count double status)
"Return metric cards for COUNT, DOUBLE, and STATUS." "Return metric cards for COUNT, DOUBLE, and STATUS."
(etaf-view (etaf-view
(flex :width '(680) :flex-flow '(row wrap) :gap '(1 (12)) (box :layout 'flex :width '(680) :flex-flow '(row wrap) :gap '(1 (12))
(text :class "metric" (text :class "metric"
(expr :value (format "COUNT %d" (etaf-value count)))) (expr :value (format "COUNT %d" (etaf-value count))))
(text :class "metric" (text :class "metric"
@ -58,7 +58,7 @@
(defun etaf-counter-example--actions (count) (defun etaf-counter-example--actions (count)
"Return the action group for COUNT." "Return the action group for COUNT."
(etaf-view (etaf-view
(flex :width '(680) :flex-flow '(row wrap) :gap '(1 (12)) (box :layout 'flex :width '(680) :flex-flow '(row wrap) :gap '(1 (12))
(expr :value (expr :value
(etaf-counter-example--action (etaf-counter-example--action
count "− DECREMENT" 'counter-decrement 'decrement)) count "− DECREMENT" 'counter-decrement 'decrement))
@ -96,14 +96,14 @@
:name 'counter-status))) :name 'counter-status)))
(lambda () (lambda ()
(etaf-view (etaf-view
(column (box :layout 'column
(expr :value (etaf-counter-example--header title)) (expr :value (etaf-counter-example--header title))
(spacer :height 1) (box :height 1)
(expr :value (expr :value
(etaf-counter-example--metrics count double status)) (etaf-counter-example--metrics count double status))
(spacer :height 1) (box :height 1)
(expr :value (etaf-counter-example--actions count)) (expr :value (etaf-counter-example--actions count))
(spacer :height 1) (box :height 1)
(text :class "note" (text :class "note"
"Public path: Event → Action → Ref → Computed → Runtime commit")))))) "Public path: Event → Action → Ref → Computed → Runtime commit"))))))

16
examples/etaf-data-example.el
View File

@ -52,7 +52,7 @@
(status (plist-get task :status)) (status (plist-get task :status))
(host-ref (intern (format "data-task-%d" identity)))) (host-ref (intern (format "data-task-%d" identity))))
(etaf-view (etaf-view
(flex :width '(718) :flex-flow '(row nowrap) :gap '(0 (10)) (box :layout 'flex :width '(718) :flex-flow '(row nowrap) :gap '(0 (10))
:padding '(1 (12)) :border "#6D8A73" :padding '(1 (12)) :border "#6D8A73"
:bgcolor (if selected "#DCEBDD" "#FFFDF8") :bgcolor (if selected "#DCEBDD" "#FFFDF8")
:ref host-ref :role 'button :use (list (etaf-focusable)) :ref host-ref :role 'button :use (list (etaf-focusable))
@ -76,7 +76,7 @@
(let ((total (etaf-value (etaf-data-total controller))) (let ((total (etaf-value (etaf-data-total controller)))
(selection (etaf-value (etaf-data-selection controller)))) (selection (etaf-value (etaf-data-selection controller))))
(etaf-view (etaf-view
(column :width '(720) :padding '(1 (18)) :border "#8F432F" (box :layout 'column :width '(720) :padding '(1 (18)) :border "#8F432F"
:bgcolor "#FFFDF8" :text-align 'center :bgcolor "#FFFDF8" :text-align 'center
(text :color "#8F432F" :face 'bold (text :color "#8F432F" :face 'bold
"BEST PRACTICE / DATA OWNERSHIP") "BEST PRACTICE / DATA OWNERSHIP")
@ -101,7 +101,7 @@ Use BORDER and BACKGROUND for its semantic color family."
(defun etaf-data-example--toolbar (controller next-id) (defun etaf-data-example--toolbar (controller next-id)
"Return the action toolbar for CONTROLLER and NEXT-ID." "Return the action toolbar for CONTROLLER and NEXT-ID."
(etaf-view (etaf-view
(flex :width '(720) :flex-flow '(row wrap) :gap '(1 (10)) (box :layout 'flex :width '(720) :flex-flow '(row wrap) :gap '(1 (10))
(expr :value (etaf-data-example--filter-control (expr :value (etaf-data-example--filter-control
controller "ALL" 'data-filter-all nil controller "ALL" 'data-filter-all nil
"#4E7890" "#D9EAF2")) "#4E7890" "#D9EAF2"))
@ -134,14 +134,14 @@ Use BORDER and BACKGROUND for its semantic color family."
(defun etaf-data-example--view (controller next-id) (defun etaf-data-example--view (controller next-id)
"Return the Data example View for CONTROLLER and NEXT-ID." "Return the Data example View for CONTROLLER and NEXT-ID."
(etaf-view (etaf-view
(column :width '(720) :color "#252A2E" :bgcolor "#F8F5EE" (box :layout 'column :width '(720) :color "#252A2E" :bgcolor "#F8F5EE"
(expr :value (etaf-data-example--header controller)) (expr :value (etaf-data-example--header controller))
(spacer :height 1) (box :height 1)
(expr :value (etaf-data-example--toolbar controller next-id)) (expr :value (etaf-data-example--toolbar controller next-id))
(spacer :height 1) (box :height 1)
(column :width '(720) (box :layout 'column :width '(720)
(expr :value (etaf-data-example--rows controller))) (expr :value (etaf-data-example--rows controller)))
(spacer :height 1) (box :height 1)
(text :width '(720) :padding '(1 (16)) :border "#8D887F" (text :width '(720) :padding '(1 (16)) :border "#8D887F"
:color "#4D5651" :bgcolor "#EEEAE2" :color "#4D5651" :bgcolor "#EEEAE2"
"Owner rule: create in setup, mutate through Data, stop on unmount")))) "Owner rule: create in setup, mutate through Data, stop on unmount"))))

14
examples/etaf-resource-example.el
View File

@ -25,7 +25,7 @@
(defun etaf-resource-example--header () (defun etaf-resource-example--header ()
"Return the Resource example header." "Return the Resource example header."
(etaf-view (etaf-view
(column :width '(680) :padding '(1 (18)) :border "#8F432F" (box :layout 'column :width '(680) :padding '(1 (18)) :border "#8F432F"
:bgcolor "#FFFDF8" :text-align 'center :bgcolor "#FFFDF8" :text-align 'center
(text :color "#8F432F" :face 'bold (text :color "#8F432F" :face 'bold
"BEST PRACTICE / RESOURCE LIFECYCLE") "BEST PRACTICE / RESOURCE LIFECYCLE")
@ -41,7 +41,7 @@
(border (if success "#6D8A73" "#C97252")) (border (if success "#6D8A73" "#C97252"))
(ink (if success "#24422D" "#6B3020"))) (ink (if success "#24422D" "#6B3020")))
(etaf-view (etaf-view
(column :width '(680) :padding '(2 (18)) :border border (box :layout 'column :width '(680) :padding '(2 (18)) :border border
:bgcolor surface :color ink :text-align 'center :bgcolor surface :color ink :text-align 'center
(text :face 'bold (text :face 'bold
(expr :value (upcase (symbol-name status)))) (expr :value (upcase (symbol-name status))))
@ -53,7 +53,7 @@
(defun etaf-resource-example--actions (resource fail-next) (defun etaf-resource-example--actions (resource fail-next)
"Return action controls for RESOURCE and FAIL-NEXT." "Return action controls for RESOURCE and FAIL-NEXT."
(etaf-view (etaf-view
(flex :width '(680) :flex-flow '(row wrap) :gap '(1 (12)) (box :layout 'flex :width '(680) :flex-flow '(row wrap) :gap '(1 (12))
(text :flex-grow 1 :flex-shrink 1 :flex-basis '(200) (text :flex-grow 1 :flex-shrink 1 :flex-basis '(200)
:min-width '(180) :padding '(1 (12)) :min-width '(180) :padding '(1 (12))
:border "#4E7890" :bgcolor "#D9EAF2" :face 'bold :border "#4E7890" :bgcolor "#D9EAF2" :face 'bold
@ -74,14 +74,14 @@
(defun etaf-resource-example--view (resource fail-next cleanup-count) (defun etaf-resource-example--view (resource fail-next cleanup-count)
"Return the example View for RESOURCE, FAIL-NEXT, and CLEANUP-COUNT." "Return the example View for RESOURCE, FAIL-NEXT, and CLEANUP-COUNT."
(etaf-view (etaf-view
(column :width '(680) :color "#252A2E" :bgcolor "#F8F5EE" (box :layout 'column :width '(680) :color "#252A2E" :bgcolor "#F8F5EE"
(expr :value (etaf-resource-example--header)) (expr :value (etaf-resource-example--header))
(spacer :height 1) (box :height 1)
(expr :value (expr :value
(etaf-resource-example--status resource cleanup-count)) (etaf-resource-example--status resource cleanup-count))
(spacer :height 1) (box :height 1)
(expr :value (etaf-resource-example--actions resource fail-next)) (expr :value (etaf-resource-example--actions resource fail-next))
(spacer :height 1) (box :height 1)
(text :width '(680) :padding '(1 (16)) :border "#8D887F" (text :width '(680) :padding '(1 (16)) :border "#8D887F"
:color "#4D5651" :bgcolor "#EEEAE2" :color "#4D5651" :bgcolor "#EEEAE2"
"Scope rule: reload releases the old value; unmount releases the last one")))) "Scope rule: reload releases the old value; unmount releases the last one"))))