feat(ui): ludic.ui grows toward HTML, CSS and React (Phase 0.U1-U4)
- Natives: ui_native(tag, measure, draw) makes an element the program draws itself; ui_fire runs its on-<event> with event.value. input, select and textarea have simple defaults. - React: - keyed <each>, <let>, <provide> context through components, <fragment>; - named slots, default props on <component>; - on-mount / on-unmount; - inline text inside text elements. - CSS: - custom properties and var(); - position relative/absolute/fixed with insets and z-index; - em/rem/vw/vh and @media; - wrapping text and ellipsis, overflow; - + and ~ combinators, :nth-child(an+b), :checked, :active. - Developing: errors with file:line, ui_errors(), ui_reload() keeping state, and an inspector-style ui_dump. - view fields infer the type of a literal or a named function's result. Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>
This commit is contained in:
parent
66a2bc2214
commit
637d07400e
39 changed files with 42012 additions and 40795 deletions
36
packages/ludic.ui/media.ludic
Normal file
36
packages/ludic.ui/media.ludic
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
# media.ludic - @media (min-width: 1280px) and (max-height: 720px) { ... }: rules that hold only
|
||||
# while the screen's area is that size
|
||||
export property UiMedia {
|
||||
min_w: float = 0.0
|
||||
max_w: float = 0.0
|
||||
min_h: float = 0.0
|
||||
max_h: float = 0.0
|
||||
}
|
||||
function md_parse(cond: string) -> UiMedia {
|
||||
let m = new UiMedia
|
||||
let parts = lss_split(cond, 40)
|
||||
for i in 0 .. len(parts) {
|
||||
let p = parts[i]
|
||||
var colon = -1
|
||||
for k in 0 .. len(p) {
|
||||
if colon < 0 and p[k] == 58 { colon = k }
|
||||
}
|
||||
if colon < 0 { continue }
|
||||
let key = tpl_words(p[0..colon])
|
||||
let v = el_num(tpl_words(p[colon + 1..len(p)]))
|
||||
if key == "min-width" { m.min_w = v }
|
||||
if key == "max-width" { m.max_w = v }
|
||||
if key == "min-height" { m.min_h = v }
|
||||
if key == "max-height" { m.max_h = v }
|
||||
}
|
||||
return m
|
||||
}
|
||||
function md_ok(r: UiRule) -> bool {
|
||||
let m = r.md
|
||||
if m == null { return true }
|
||||
if m.min_w > 0.0 and ly_vp_w < m.min_w { return false }
|
||||
if m.max_w > 0.0 and ly_vp_w > m.max_w { return false }
|
||||
if m.min_h > 0.0 and ly_vp_h < m.min_h { return false }
|
||||
if m.max_h > 0.0 and ly_vp_h > m.max_h { return false }
|
||||
return true
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue