@threadlabs/looma 0.17.0 → 0.17.2

package/vanilla/UiButton.js

@@ -3,7 +3,7 @@ import { componentRootIndex, manageComponentLifecycle } from "@nextwebwg/html-ne
 import * as controller from "../components/ui-button/ui-button.js";
 import "../styles/ui-button.css";
 
-const definition = {...{"contract":{"tag":"ui-button","props":{"align":{"type":{"enum":["center","start"]},"required":false,"target":{"attribute":"align"},"default":"center"},"as":{"type":{"enum":["button","a"]},"required":false,"target":{"attribute":"as"},"default":"button"},"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"href":{"type":"string","required":false,"target":{"attribute":"href"}},"pending":{"type":"boolean","required":false,"target":{"attribute":"aria-busy"},"default":false},"rel":{"type":"string","required":false,"target":{"attribute":"rel"}},"size":{"type":{"enum":["sm","md","lg"]},"required":false,"target":{"attribute":"size"},"default":"md"},"stretch":{"type":"boolean","required":false,"target":{"attribute":"stretch"},"default":false},"target":{"type":"string","required":false,"target":{"attribute":"target"}},"tone":{"type":{"enum":["accent","neutral","danger","success","warning","info"]},"required":false,"target":{"attribute":"tone"},"default":"accent"},"type":{"type":{"enum":["button","submit","reset"]},"required":false,"target":{"attribute":"type"},"default":"button"},"variant":{"type":{"enum":["outline","solid","danger","ghost","link"]},"required":false,"target":{"attribute":"variant"},"default":"outline"}}},"template":{"kind":"element","name":"template","attributes":[],"children":[{"kind":"element","name":"a","attributes":[{"kind":"attribute","name":"href","expression":"{ true: null, false: href }[format('%s', disabled or pending)]","expressionPlan":{"source":"{ true: null, false: href }[format('%s', disabled or pending)]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"literal","value":null}},{"key":"false","value":{"kind":"id","name":"href"}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"binary","op":"or","left":{"kind":"id","name":"disabled"},"right":{"kind":"id","name":"pending"}}]}},"dependencies":["disabled","href","pending"]}},{"kind":"attribute","name":"target","expression":"target","expressionPlan":{"source":"target","ast":{"kind":"id","name":"target"},"dependencies":["target"]}},{"kind":"attribute","name":"rel","expression":"rel","expressionPlan":{"source":"rel","ast":{"kind":"id","name":"rel"},"dependencies":["rel"]}},{"kind":"attribute","name":"aria-disabled","expression":"{ true: 'true', false: null }[format('%s', disabled or pending)]","expressionPlan":{"source":"{ true: 'true', false: null }[format('%s', disabled or pending)]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"literal","value":"true"}},{"key":"false","value":{"kind":"literal","value":null}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"binary","op":"or","left":{"kind":"id","name":"disabled"},"right":{"kind":"id","name":"pending"}}]}},"dependencies":["disabled","pending"]}},{"kind":"attribute","name":"aria-busy","expression":"pending","expressionPlan":{"source":"pending","ast":{"kind":"id","name":"pending"},"dependencies":["pending"]}},{"kind":"attribute","name":"tabindex","expression":"{ true: '0', false: null }[format('%s', pending and not disabled)]","expressionPlan":{"source":"{ true: '0', false: null }[format('%s', pending and not disabled)]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"literal","value":"0"}},{"key":"false","value":{"kind":"literal","value":null}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"binary","op":"and","left":{"kind":"id","name":"pending"},"right":{"kind":"unary","op":"not","operand":{"kind":"id","name":"disabled"}}}]}},"dependencies":["disabled","pending"]}}],"children":[{"kind":"element","name":"ui-spinner","attributes":[{"kind":"literal","name":"size","value":"sm"},{"kind":"literal","name":"class","value":"pending-spinner"}],"children":[],"flow":{"kind":"if","test":"pending","testPlan":{"source":"pending","ast":{"kind":"id","name":"pending"},"dependencies":["pending"]}}},{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'a'","testPlan":{"source":"as = 'a'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"a"}},"dependencies":["as"]}}},{"kind":"element","name":"button","attributes":[{"kind":"attribute","name":"type","expression":"type","expressionPlan":{"source":"type","ast":{"kind":"id","name":"type"},"dependencies":["type"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"aria-disabled","expression":"{ true: 'true', false: null }[format('%s', pending)]","expressionPlan":{"source":"{ true: 'true', false: null }[format('%s', pending)]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"literal","value":"true"}},{"key":"false","value":{"kind":"literal","value":null}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"id","name":"pending"}]}},"dependencies":["pending"]}},{"kind":"attribute","name":"aria-busy","expression":"pending","expressionPlan":{"source":"pending","ast":{"kind":"id","name":"pending"},"dependencies":["pending"]}}],"children":[{"kind":"element","name":"ui-spinner","attributes":[{"kind":"literal","name":"size","value":"sm"},{"kind":"literal","name":"class","value":"pending-spinner"}],"children":[],"flow":{"kind":"if","test":"pending","testPlan":{"source":"pending","ast":{"kind":"id","name":"pending"},"dependencies":["pending"]}}},{"kind":"slot"}],"flow":{"kind":"else"}}],"flow":{"kind":"match"}},"declarations":[],"root":{"kind":"native","element":"button","choices":["a","button"]}},source:{file:import.meta.url},css:""};
+const definition = {...{"contract":{"tag":"ui-button","props":{"align":{"type":{"enum":["center","start"]},"required":false,"target":{"attribute":"align"},"default":"center"},"as":{"type":{"enum":["button","a"]},"required":false,"target":{"attribute":"as"},"default":"button"},"disabled":{"type":"boolean","required":false,"target":{"attribute":"disabled"},"default":false},"href":{"type":"string","required":false,"target":{"attribute":"href"}},"loading":{"type":"boolean","required":false,"target":{"attribute":"loading"},"default":false},"pending":{"type":"boolean","required":false,"target":{"attribute":"pending"},"default":false},"rel":{"type":"string","required":false,"target":{"attribute":"rel"}},"size":{"type":{"enum":["sm","md","lg"]},"required":false,"target":{"attribute":"size"},"default":"md"},"stretch":{"type":"boolean","required":false,"target":{"attribute":"stretch"},"default":false},"target":{"type":"string","required":false,"target":{"attribute":"target"}},"tone":{"type":{"enum":["accent","neutral","danger","success","warning","info"]},"required":false,"target":{"attribute":"tone"},"default":"accent"},"type":{"type":{"enum":["button","submit","reset"]},"required":false,"target":{"attribute":"type"},"default":"button"},"variant":{"type":{"enum":["outline","solid","danger","ghost","link"]},"required":false,"target":{"attribute":"variant"},"default":"outline"}}},"template":{"kind":"element","name":"template","attributes":[],"children":[{"kind":"element","name":"a","attributes":[{"kind":"attribute","name":"href","expression":"{ true: null, false: href }[format('%s', disabled or loading or pending)]","expressionPlan":{"source":"{ true: null, false: href }[format('%s', disabled or loading or pending)]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"literal","value":null}},{"key":"false","value":{"kind":"id","name":"href"}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"binary","op":"or","left":{"kind":"binary","op":"or","left":{"kind":"id","name":"disabled"},"right":{"kind":"id","name":"loading"}},"right":{"kind":"id","name":"pending"}}]}},"dependencies":["disabled","href","loading","pending"]}},{"kind":"attribute","name":"target","expression":"target","expressionPlan":{"source":"target","ast":{"kind":"id","name":"target"},"dependencies":["target"]}},{"kind":"attribute","name":"rel","expression":"rel","expressionPlan":{"source":"rel","ast":{"kind":"id","name":"rel"},"dependencies":["rel"]}},{"kind":"attribute","name":"aria-disabled","expression":"{ true: 'true', false: null }[format('%s', disabled or loading or pending)]","expressionPlan":{"source":"{ true: 'true', false: null }[format('%s', disabled or loading or pending)]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"literal","value":"true"}},{"key":"false","value":{"kind":"literal","value":null}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"binary","op":"or","left":{"kind":"binary","op":"or","left":{"kind":"id","name":"disabled"},"right":{"kind":"id","name":"loading"}},"right":{"kind":"id","name":"pending"}}]}},"dependencies":["disabled","loading","pending"]}},{"kind":"attribute","name":"aria-busy","expression":"loading or pending","expressionPlan":{"source":"loading or pending","ast":{"kind":"binary","op":"or","left":{"kind":"id","name":"loading"},"right":{"kind":"id","name":"pending"}},"dependencies":["loading","pending"]}},{"kind":"attribute","name":"tabindex","expression":"{ true: '0', false: null }[format('%s', (loading or pending) and not disabled)]","expressionPlan":{"source":"{ true: '0', false: null }[format('%s', (loading or pending) and not disabled)]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"literal","value":"0"}},{"key":"false","value":{"kind":"literal","value":null}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"binary","op":"and","left":{"kind":"binary","op":"or","left":{"kind":"id","name":"loading"},"right":{"kind":"id","name":"pending"}},"right":{"kind":"unary","op":"not","operand":{"kind":"id","name":"disabled"}}}]}},"dependencies":["disabled","loading","pending"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"spinner-wrap"}],"children":[{"kind":"element","name":"ui-spinner","attributes":[{"kind":"literal","name":"size","value":"sm"}],"children":[]}],"flow":{"kind":"if","test":"loading or pending","testPlan":{"source":"loading or pending","ast":{"kind":"binary","op":"or","left":{"kind":"id","name":"loading"},"right":{"kind":"id","name":"pending"}},"dependencies":["loading","pending"]}}},{"kind":"slot"}],"flow":{"kind":"when","test":"as = 'a'","testPlan":{"source":"as = 'a'","ast":{"kind":"binary","op":"=","left":{"kind":"id","name":"as"},"right":{"kind":"literal","value":"a"}},"dependencies":["as"]}}},{"kind":"element","name":"button","attributes":[{"kind":"attribute","name":"type","expression":"type","expressionPlan":{"source":"type","ast":{"kind":"id","name":"type"},"dependencies":["type"]}},{"kind":"attribute","name":"disabled","expression":"disabled","expressionPlan":{"source":"disabled","ast":{"kind":"id","name":"disabled"},"dependencies":["disabled"]}},{"kind":"attribute","name":"aria-disabled","expression":"{ true: 'true', false: null }[format('%s', loading or pending)]","expressionPlan":{"source":"{ true: 'true', false: null }[format('%s', loading or pending)]","ast":{"kind":"index","object":{"kind":"object","pairs":[{"key":"true","value":{"kind":"literal","value":"true"}},{"key":"false","value":{"kind":"literal","value":null}}]},"index":{"kind":"call","fn":"format","args":[{"kind":"literal","value":"%s"},{"kind":"binary","op":"or","left":{"kind":"id","name":"loading"},"right":{"kind":"id","name":"pending"}}]}},"dependencies":["loading","pending"]}},{"kind":"attribute","name":"aria-busy","expression":"loading or pending","expressionPlan":{"source":"loading or pending","ast":{"kind":"binary","op":"or","left":{"kind":"id","name":"loading"},"right":{"kind":"id","name":"pending"}},"dependencies":["loading","pending"]}}],"children":[{"kind":"element","name":"span","attributes":[{"kind":"literal","name":"class","value":"spinner-wrap"}],"children":[{"kind":"element","name":"ui-spinner","attributes":[{"kind":"literal","name":"size","value":"sm"}],"children":[]}],"flow":{"kind":"if","test":"loading or pending","testPlan":{"source":"loading or pending","ast":{"kind":"binary","op":"or","left":{"kind":"id","name":"loading"},"right":{"kind":"id","name":"pending"}},"dependencies":["loading","pending"]}}},{"kind":"slot"}],"flow":{"kind":"else"}}],"flow":{"kind":"match"}},"declarations":[],"root":{"kind":"native","element":"button","choices":["a","button"]}},source:{file:import.meta.url},css:""};
 
 export function createUiButton(options = {}) {
   const { attributes = {}, children = [], slots = {}, ...componentProps } = options;
@@ -22,13 +22,12 @@ export function createUiButton(options = {}) {
     const value1 = componentProps["rel"] === undefined ? undefined : componentProps["rel"];
     if (value1 === null || value1 === undefined) element.removeAttribute("rel");
     else element.setAttribute("rel", String(value1));
-    const value2 = componentProps["pending"] === undefined ? false : componentProps["pending"];
-    if (typeof value2 === "boolean") element.setAttribute("aria-busy", String(value2));
-    else element.removeAttribute("aria-busy");
     element.setAttribute("data-component", "ui-button");
-    const element0 = document.createElement("ui-spinner");
-    element0.setAttribute("size", "sm");
-    element0.setAttribute("class", "pending-spinner");
+    const element0 = document.createElement("span");
+    element0.setAttribute("class", "spinner-wrap");
+    const element1 = document.createElement("ui-spinner");
+    element1.setAttribute("size", "sm");
+    element0.append(element1);
     element.append(element0);
     if (children.length > 0) {
       for (const child of children) {
@@ -44,20 +43,19 @@ export function createUiButton(options = {}) {
       if (value === null || value === undefined || value === false) continue;
       element.setAttribute(name, value === true ? "" : String(value));
     }
-    const value3 = componentProps["type"] === undefined ? "button" : componentProps["type"];
-    if (value3 === null || value3 === undefined) element.removeAttribute("type");
-    else element.setAttribute("type", String(value3));
-    const value4 = componentProps["disabled"] === undefined ? false : componentProps["disabled"];
-    if (value4 === true) element.setAttribute("disabled", "");
+    const value2 = componentProps["type"] === undefined ? "button" : componentProps["type"];
+    if (value2 === null || value2 === undefined) element.removeAttribute("type");
+    else element.setAttribute("type", String(value2));
+    const value3 = componentProps["disabled"] === undefined ? false : componentProps["disabled"];
+    if (value3 === true) element.setAttribute("disabled", "");
     else element.removeAttribute("disabled");
-    const value5 = componentProps["pending"] === undefined ? false : componentProps["pending"];
-    if (typeof value5 === "boolean") element.setAttribute("aria-busy", String(value5));
-    else element.removeAttribute("aria-busy");
     element.setAttribute("data-component", "ui-button");
-    const element1 = document.createElement("ui-spinner");
-    element1.setAttribute("size", "sm");
-    element1.setAttribute("class", "pending-spinner");
-    element.append(element1);
+    const element2 = document.createElement("span");
+    element2.setAttribute("class", "spinner-wrap");
+    const element3 = document.createElement("ui-spinner");
+    element3.setAttribute("size", "sm");
+    element2.append(element3);
+    element.append(element2);
     if (children.length > 0) {
       for (const child of children) {
         const node = typeof child === "string" ? document.createTextNode(child) : child;