diff options
| -rw-r--r-- | examples/todo-list/style.css | 23 | ||||
| -rw-r--r-- | src/index.ts | 9 |
2 files changed, 27 insertions, 5 deletions
diff --git a/examples/todo-list/style.css b/examples/todo-list/style.css index 5316d41..b746829 100644 --- a/examples/todo-list/style.css +++ b/examples/todo-list/style.css @@ -78,15 +78,20 @@ [data-instance=task-item] { --text: "default text"; - --checked: "false"; + --done: "false"; padding: 1rem; cursor: pointer; - --cssx-on-click: update(--checked, if(get-var(--checked), "false", "true")); + --cssx-on-click: update(--done, if(get-var(--done), "false", "true")); + --cssx-on-update: + update(checkbox, --checked, if(get-var(--done), true, false)) + ; + + --cssx-children: div#checkbox; } [data-instance=task-item]::after { - content: "[" var(--checked) "] " var(--text); + content: "[" var(--done) "] " var(--text); } [data-instance=task-item]:not(:first-child) { @@ -95,3 +100,15 @@ border-top: 1px solid var(--color-gray); } +#checkbox { + --checked: false; + + width: 18px; + height: 18px; + border: 2px solid gray; + background-color: transparent; + + --cssx-on-update: + update(background-color, if(get-var(--checked), get-var(--color-accent), transparent)) + ; +} diff --git a/src/index.ts b/src/index.ts index 765f676..aba1491 100644 --- a/src/index.ts +++ b/src/index.ts @@ -91,11 +91,16 @@ const getEvalActions = ( getVariable: async varName => getPropertyValue($element, varName), updateVariable: async (targetId, varName, value) => { const $el = targetId ? document.getElementById(targetId) : $element + const isCustomProp = varName.startsWith('--') if ($el) { const prevValue = getPropertyValue($el, varName) - ;($el as any).style.setProperty(varName, JSON.stringify(value)) + if (isCustomProp) { + ;($el as any).style.setProperty(varName, JSON.stringify(value)) + } else { + ;($el as any).style[varName] = value + } - if (JSON.stringify(value) !== prevValue) { + if (JSON.stringify(value) !== prevValue && isCustomProp) { const detail = { name: varName, value, prevValue } $el.dispatchEvent(new CustomEvent(CSSX_ON_UPDATE_EVENT, { detail })) } |