cotomy 0.4.1 → 0.4.3

package/README.md

@@ -66,6 +66,7 @@ The View layer provides thin wrappers around DOM elements and window events.
   - `html: string` (get/set)
   - `value: string` — Works for inputs; falls back to `data-cotomy-value` otherwise
   - `readonly: boolean` (get/set) — Uses native property if available, otherwise attribute
+  - `disabled: boolean` (get/set) — Uses native property if available (respects `fieldset[disabled]`), otherwise attribute
   - `enabled: boolean` (get/set) — Toggles `disabled` attribute
   - `setFocus(): void`
 - Tree traversal & manipulation
@@ -76,8 +77,8 @@ The View layer provides thin wrappers around DOM elements and window events.
   - `lastChild(selector = "*", type?)`
   - `closest(selector, type?)`
   - `find(selector, type?)` / `first(selector = "*", type?)` / `last(selector = "*", type?)` / `contains(selector)`
-  - `append(child): this` / `prepend(child): this` / `appendAll(children): this`
-  - `insertBefore(sibling): this` / `insertAfter(sibling): this`
+  - `append(child): this` / `prepend(child): this` / `appendAll(children): this` — accepts `CotomyElement`, HTML string, or `{ html, css? }`
+  - `insertBefore(sibling): this` / `insertAfter(sibling): this` — accepts `CotomyElement`, HTML string, or `{ html, css? }`
   - `appendTo(target): this` / `prependTo(target): this`
   - `comesBefore(target): boolean` / `comesAfter(target): boolean` — Checks DOM order (returns `false` for the same element or disconnected nodes)
   - `clone(type?): CotomyElement` - Returns a deep-cloned element, optionally typed, and reassigns a new `data-cotomy-instance` while preserving the `data-cotomy-scopeid` for scoped CSS sharing (strips `data-cotomy-moving`). Cloning an invalidated element (`data-cotomy-invalidated`) throws.
@@ -160,7 +161,7 @@ npm test -- --run tests/view.spec.ts -t "compares document order with comesBefor
   - `initialize(): this`
 - DOM helpers
   - `body: CotomyElement`
-  - `append(element: CotomyElement): this`
+  - `append(element: CotomyElement | string | { html: string, css?: string }): this`
   - `scrollTo(target, options?: CotomyScrollOptions | Partial<CotomyScrollOptions>): this` — Scrolls to reveal a target (`selector | CotomyElement | HTMLElement`)
   - `moveNext(focused: CotomyElement, shift = false)` — Move focus to next/previous focusable
 - Window events

package/dist/browser/cotomy.js

@@ -1182,17 +1182,32 @@ class CotomyElement {
         }
         return false;
     }
-    get enabled() {
-        return !(this.element.hasAttribute("disabled") && this.element.getAttribute("disabled") !== null);
+    get disabled() {
+        if ("disabled" in this.element) {
+            if (this.match(":disabled"))
+                return true;
+            return this.element.disabled;
+        }
+        return this.element.hasAttribute("disabled");
     }
-    set enabled(value) {
+    set disabled(value) {
+        if ("disabled" in this.element) {
+            this.element.disabled = value;
+            return;
+        }
         if (value) {
-            this.element.removeAttribute("disabled");
+            this.attribute("disabled", "");
         }
         else {
-            this.element.setAttribute("disabled", "disabled");
+            this.attribute("disabled", null);
         }
     }
+    get enabled() {
+        return !this.disabled;
+    }
+    set enabled(value) {
+        this.disabled = !value;
+    }
     get invalidated() {
         return this.element.hasAttribute("data-cotomy-invalidated");
     }
@@ -1616,18 +1631,23 @@ class CotomyElement {
             target.trigger("cotomy:transitend");
         }
     }
+    static toElement(target) {
+        return target instanceof CotomyElement ? target : new CotomyElement(target);
+    }
     prepend(prepend) {
-        CotomyElement.runWithMoveEvents(prepend, () => {
-            this.element.prepend(prepend.element);
+        const e = CotomyElement.toElement(prepend);
+        CotomyElement.runWithMoveEvents(e, () => {
+            this.element.prepend(e.element);
         });
-        prepend.ensureScopedCss();
+        e.ensureScopedCss();
         return this;
     }
     append(target) {
-        CotomyElement.runWithMoveEvents(target, () => {
-            this.element.append(target.element);
+        const e = CotomyElement.toElement(target);
+        CotomyElement.runWithMoveEvents(e, () => {
+            this.element.append(e.element);
         });
-        target.ensureScopedCss();
+        e.ensureScopedCss();
         return this;
     }
     appendAll(targets) {
@@ -1635,17 +1655,19 @@ class CotomyElement {
         return this;
     }
     insertBefore(append) {
-        CotomyElement.runWithMoveEvents(append, () => {
-            this.element.before(append.element);
+        const e = CotomyElement.toElement(append);
+        CotomyElement.runWithMoveEvents(e, () => {
+            this.element.before(e.element);
         });
-        append.ensureScopedCss();
+        e.ensureScopedCss();
         return this;
     }
     insertAfter(append) {
-        CotomyElement.runWithMoveEvents(append, () => {
-            this.element.after(append.element);
+        const e = CotomyElement.toElement(append);
+        CotomyElement.runWithMoveEvents(e, () => {
+            this.element.after(e.element);
         });
-        append.ensureScopedCss();
+        e.ensureScopedCss();
         return this;
     }
     appendTo(target) {