diff --git a/glimmer/web/index.html b/glimmer/web/index.html index f86e483..f6475fc 100644 --- a/glimmer/web/index.html +++ b/glimmer/web/index.html @@ -4,7 +4,7 @@ - Vite + TS + Glimmer
diff --git a/glimmer/web/src/components/DataCard.ts b/glimmer/web/src/components/DataCard.ts new file mode 100644 index 0000000..2740011 --- /dev/null +++ b/glimmer/web/src/components/DataCard.ts @@ -0,0 +1,9 @@ +export class DataCard extends HTMLElement { + constructor() { + super(); + } + + connectedCallback() { + this.classList.add("card"); + } +} diff --git a/glimmer/web/src/components/TextField.ts b/glimmer/web/src/components/TextField.ts new file mode 100644 index 0000000..16b422a --- /dev/null +++ b/glimmer/web/src/components/TextField.ts @@ -0,0 +1,43 @@ +export class TextField extends HTMLElement { + field: HTMLInputElement; + + static get observedAttributes() { + return ["placeholder", "text"]; + } + + constructor() { + super(); + + this.field = document.createElement("input"); + } + + get placeholder(): string | null { + return this.getAttribute("placeholder"); + } + + set placeholder(text: string | null) { + if (text) { + this.setAttribute("placeholder", text); + } else { + this.removeAttribute("placeholder"); + } + this.field.placeholder = text || ""; + } + + get text(): string | null { + return this.getAttribute("text"); + } + + set text(text: string | null) { + if (text) { + this.setAttribute("text", text); + } else { + this.removeAttribute("text"); + } + this.field.placeholder = text || ""; + } + + connectedCallback() { + this.appendChild(this.field); + } +} diff --git a/glimmer/web/src/counter.ts b/glimmer/web/src/counter.ts deleted file mode 100644 index 09e5afd..0000000 --- a/glimmer/web/src/counter.ts +++ /dev/null @@ -1,9 +0,0 @@ -export function setupCounter(element: HTMLButtonElement) { - let counter = 0 - const setCounter = (count: number) => { - counter = count - element.innerHTML = `count is ${counter}` - } - element.addEventListener('click', () => setCounter(counter + 1)) - setCounter(0) -} diff --git a/glimmer/web/src/index.ts b/glimmer/web/src/index.ts new file mode 100644 index 0000000..90e4bb9 --- /dev/null +++ b/glimmer/web/src/index.ts @@ -0,0 +1,18 @@ +import { DataCard } from "./components/DataCard"; +import { TextField } from "./components/TextField"; + +declare global { + interface HTMLElementTagNameMap { + "data-card": DataCard; + "text-field": TextField; + } +} + +console.log("components initialized"); + +const init = () => { + window.customElements.define("data-card", DataCard); + window.customElements.define("text-field", TextField); +}; + +export { init, DataCard, TextField }; diff --git a/glimmer/web/src/main.ts b/glimmer/web/src/main.ts index 1e7b091..1868cbd 100644 --- a/glimmer/web/src/main.ts +++ b/glimmer/web/src/main.ts @@ -1,8 +1,10 @@ import "./style.css"; -import typescriptLogo from "./typescript.svg"; -import { setupCounter } from "./counter"; + +import * as glimmer from "./index"; +import { DataCard, TextField } from "./index"; document.querySelector("#app")!.innerHTML = ` +

Color Swatches

@@ -51,6 +53,8 @@ document.querySelector("#app")!.innerHTML = `
+

Cards and Shadows

+
@@ -64,6 +68,23 @@ document.querySelector("#app")!.innerHTML = `
+ +

Components

+ +
`; -setupCounter(document.querySelector("#counter")!); +glimmer.init(); + +const components = document.querySelector("#components"); + +if (components) { + const card: DataCard = document.createElement("data-card"); + card.classList.add("card--high"); + components.appendChild(card); + + const textField: TextField = document.createElement("text-field"); + textField.placeholder = "Placeholder text"; + textField.text = "Blank Text"; + components.appendChild(textField); +} diff --git a/glimmer/web/src/typescript.svg b/glimmer/web/src/typescript.svg deleted file mode 100644 index d91c910..0000000 --- a/glimmer/web/src/typescript.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file