@vmz/ui 0.2.3 → 0.2.4

package/src/components/Timeline.vmz

@@ -1,15 +1,20 @@
 <template>
-  <ol class="vmz-ui-timeline" data-vmz-ui="timeline" :aria-label="label">
-      <li v-for="item in items" :key="item.id" class="vmz-ui-timeline__item" :data-vmz-audit="item.id">
-        <p class="vmz-ui-timeline__time">{{ item.time }}</p>
-        <p class="vmz-ui-timeline__title">{{ item.title }}</p>
-        <p v-if="item.detail" class="vmz-ui-timeline__detail">{{ item.detail }}</p>
-      </li>
+    <ol data-vmz-ui="timeline" :aria-label="label" class="vmz-ui-timeline">
+        <li v-for="item in items" :key="item.id" :data-vmz-audit="item.id" class="vmz-ui-timeline__item">
+            <p class="vmz-ui-timeline__time">
+                {{ item.time }}
+            </p>
+            <p class="vmz-ui-timeline__title">
+                {{ item.title }}
+            </p>
+            <p v-if="item.detail" class="vmz-ui-timeline__detail">
+                {{ item.detail }}
+            </p>
+        </li>
     </ol>
 </template>
-
 <style>
-  .vmz-ui-timeline {
+.vmz-ui-timeline {
     margin: 0;
     padding: 0;
     list-style: none;
@@ -17,15 +22,15 @@
     flex-direction: column;
     gap: var(--vmz-density-compact-gap);
     border-left: 2px solid var(--vmz-line-default);
-  }
+}
 
-  .vmz-ui-timeline__item {
+.vmz-ui-timeline__item {
     position: relative;
     padding: 0.15rem 0 0.15rem 0.85rem;
-  }
+}
 
-  .vmz-ui-timeline__item::before {
-    content: '';
+.vmz-ui-timeline__item::before {
+    content: "";
     position: absolute;
     left: -0.35rem;
     top: 0.45rem;
@@ -33,40 +38,39 @@
     height: 0.55rem;
     border-radius: 999px;
     background: var(--vmz-action-primary-background);
-  }
+}
 
-  .vmz-ui-timeline__time {
+.vmz-ui-timeline__time {
     margin: 0;
     font-size: 0.85em;
     opacity: 0.75;
     color: var(--vmz-action-primary-active);
-  }
+}
 
-  .vmz-ui-timeline__title {
+.vmz-ui-timeline__title {
     margin: 0.15rem 0 0;
     font-weight: 700;
     color: var(--vmz-action-primary-active);
-  }
+}
 
-  .vmz-ui-timeline__detail {
+.vmz-ui-timeline__detail {
     margin: 0.2rem 0 0;
     opacity: 0.9;
-  }
+}
 </style>
-
 <script client>
 /**
-* VMZ UI — Timeline (UI5 Console audit trail).
-* Parent owns audit items; stable ids for list identity.
-*/
+ * VMZ UI — Timeline (UI5 Console audit trail).
+ * Parent owns audit items; stable ids for list identity.
+ */
 export default class Timeline {
-	public label: string = "Audit";
-	/** @type {{ id: string, time: string, title: string, detail?: string }[]} */
-	public items: {
-		id: string;
-		time: string;
-		title: string;
-		detail?: string;
-	}[] = [];
+    public label: string = "Audit";
+    /** @type {{ id: string, time: string, title: string, detail?: string }[]} */
+    public items: {
+        id: string;
+        time: string;
+        title: string;
+        detail?: string;
+    }[] = [];
 }
 </script>

package/src/components/Toc.vmz

@@ -1,22 +1,17 @@
 <template>
-  <aside class="vmz-ui-toc" data-vmz-ui="toc" :aria-label="label">
-      <p class="vmz-ui-toc__title">{{ label }}</p>
-      <nav class="vmz-ui-toc__nav">
-        <a
-          v-for="item in items"
-          :key="item.id"
-          class="vmz-ui-toc__link"
-          :href="item.href"
-          :data-vmz-toc="item.id"
-        >
-          {{ item.title }}
-        </a>
-      </nav>
+    <aside data-vmz-ui="toc" :aria-label="label" class="vmz-ui-toc">
+        <p class="vmz-ui-toc__title">
+            {{ label }}
+        </p>
+        <nav class="vmz-ui-toc__nav">
+            <a v-for="item in items" :key="item.id" :href="item.href" :data-vmz-toc="item.id" class="vmz-ui-toc__link">
+                {{ item.title }}
+            </a>
+        </nav>
     </aside>
 </template>
-
 <style>
-  .vmz-ui-toc {
+.vmz-ui-toc {
     display: flex;
     flex-direction: column;
     gap: 0.55rem;
@@ -26,9 +21,9 @@
     border-radius: var(--vmz-radius-md, 6px);
     background: var(--vmz-surface-mist);
     color: var(--vmz-text-ink);
-  }
+}
 
-  .vmz-ui-toc__title {
+.vmz-ui-toc__title {
     margin: 0;
     font-family: var(--vmz-font-display);
     font-size: 0.8rem;
@@ -36,45 +31,44 @@
     letter-spacing: 0.04em;
     text-transform: uppercase;
     color: var(--vmz-text-steel);
-  }
+}
 
-  .vmz-ui-toc__nav {
+.vmz-ui-toc__nav {
     display: flex;
     flex-direction: column;
     gap: 0.35rem;
-  }
+}
 
-  .vmz-ui-toc__link {
+.vmz-ui-toc__link {
     font: inherit;
     font-weight: 600;
     font-size: 0.92rem;
     text-decoration: none;
     color: var(--vmz-action-primary-active);
     outline: none;
-  }
+}
 
-  .vmz-ui-toc__link:hover {
+.vmz-ui-toc__link:hover {
     color: var(--vmz-action-primary-background);
-  }
+}
 
-  .vmz-ui-toc__link:focus-visible {
+.vmz-ui-toc__link:focus-visible {
     box-shadow: 0 0 0 2px var(--vmz-focus-ring);
     border-radius: var(--vmz-radius-md, 6px);
-  }
+}
 </style>
-
 <script client>
 /**
-* VMZ UI — Toc (Document/Product composition).
-* In-page outline; parent supplies items. Readable without JS.
-*/
+ * VMZ UI — Toc (Document/Product composition).
+ * In-page outline; parent supplies items. Readable without JS.
+ */
 export default class Toc {
-	public label: string = "On this page";
-	/** @type {{ id: string, title: string, href: string }[]} */
-	public items: {
-		id: string;
-		title: string;
-		href: string;
-	}[] = [];
+    public label: string = "On this page";
+    /** @type {{ id: string, title: string, href: string }[]} */
+    public items: {
+        id: string;
+        title: string;
+        href: string;
+    }[] = [];
 }
 </script>

package/src/components/Tooltip.vmz

@@ -1,41 +1,30 @@
 <template>
-  <div
-      class="vmz-ui-tooltip"
-      data-vmz-ui="tooltip"
-      :data-open="openAttr"
-    >
-      <div class="vmz-ui-tooltip__trigger" data-vmz-tooltip="trigger">
-        <slot />
-      </div>
-      <div
-        v-if="open"
-        class="vmz-ui-tooltip__bubble"
-        role="tooltip"
-        :id="tooltipId"
-        data-vmz-tooltip="bubble"
-      >
-        {{ content }}
-      </div>
+    <div data-vmz-ui="tooltip" :data-open="openAttr" class="vmz-ui-tooltip">
+        <div data-vmz-tooltip="trigger" class="vmz-ui-tooltip__trigger">
+            <slot />
+        </div>
+        <div v-if="open" role="tooltip" :id="tooltipId" data-vmz-tooltip="bubble" class="vmz-ui-tooltip__bubble">
+            {{ content }}
+        </div>
     </div>
 </template>
-
 <style>
-  .vmz-ui-tooltip {
+.vmz-ui-tooltip {
     position: relative;
     display: inline-flex;
     flex-direction: column;
     align-items: flex-start;
     gap: 0.35rem;
     max-width: 28rem;
-  }
+}
 
-  .vmz-ui-tooltip__trigger {
+.vmz-ui-tooltip__trigger {
     display: inline-flex;
     align-items: center;
     gap: 0.35rem;
-  }
+}
 
-  .vmz-ui-tooltip__bubble {
+.vmz-ui-tooltip__bubble {
     box-sizing: border-box;
     max-width: 18rem;
     padding: 0.4rem 0.65rem;
@@ -46,23 +35,24 @@
     font-size: 0.88rem;
     line-height: 1.4;
     box-shadow: 0 1px 0 color-mix(in srgb, var(--vmz-line-default) 70%, transparent);
-  }
+}
 
-  .vmz-ui-tooltip[data-open='true'] .vmz-ui-tooltip__trigger :where(button, a, [tabindex]):focus-visible {
+.vmz-ui-tooltip[data-open="true"]
+    .vmz-ui-tooltip__trigger
+    :where(button, a, [tabindex]):focus-visible {
     box-shadow: 0 0 0 2px var(--vmz-focus-ring);
-  }
+}
 </style>
-
 <script client>
 /**
-* VMZ UI — Tooltip.
-* Parent owns live `open` + content string. Not a second overlay runtime;
-* Escape/outside policies stay with richer Popover/Dialog when needed.
-*/
+ * VMZ UI — Tooltip.
+ * Parent owns live `open` + content string. Not a second overlay runtime;
+ * Escape/outside policies stay with richer Popover/Dialog when needed.
+ */
 export default class Tooltip {
-	public open: boolean = false;
-	public openAttr: string = "false";
-	public content: string = "";
-	public tooltipId: string = "vmz-tooltip";
+    public open: boolean = false;
+    public openAttr: string = "false";
+    public content: string = "";
+    public tooltipId: string = "vmz-tooltip";
 }
 </script>

package/src/components/Tree.vmz

@@ -1,59 +1,36 @@
 <template>
-  <div class="vmz-ui-tree" data-vmz-ui="tree">
-      <p v-if="label" class="vmz-ui-tree__label" :id="labelId">{{ label }}</p>
-      <ul
-        class="vmz-ui-tree__items"
-        role="tree"
-        :aria-labelledby="labelId"
-        :aria-label="label"
-        @click="onTreeClick"
-        :onKeyDown="onTreeKeyDown"
-      >
-        <li
-          v-for="item in items"
-          :key="item.id"
-          class="vmz-ui-tree__item"
-          role="treeitem"
-          :id="item.id"
-          :data-vmz-tree-item="item.id"
-          :data-depth="item.depth"
-          :aria-selected="selected === item.id ? 'true' : 'false'"
-          :aria-expanded="item.expandedAttr"
-          :tabindex="selected === item.id ? 0 : -1"
-          :style="item.padStyle"
-        >
-          <button
-            v-if="item.expandable"
-            type="button"
-            class="vmz-ui-tree__twist"
-            :data-vmz-tree-twist="item.id"
-            :aria-label="item.twistLabel"
-            tabindex="-1"
-          >
-            {{ item.expanded ? '−' : '+' }}
-          </button>
-          <span v-if="!item.expandable" class="vmz-ui-tree__twist-spacer" aria-hidden="true"></span>
-          <span class="vmz-ui-tree__title" :data-vmz-tree-title="item.id">{{ item.title }}</span>
-        </li>
-      </ul>
+    <div data-vmz-ui="tree" class="vmz-ui-tree">
+        <p v-if="label" :id="labelId" class="vmz-ui-tree__label">
+            {{ label }}
+        </p>
+        <ul role="tree" :aria-labelledby="labelId" :aria-label="label" @click="onTreeClick" :onKeyDown="onTreeKeyDown" class="vmz-ui-tree__items">
+            <li v-for="item in items" :key="item.id" role="treeitem" :id="item.id" :data-vmz-tree-item="item.id" :data-depth="item.depth" :aria-selected='selected === item.id ? "true" : "false"' :aria-expanded="item.expandedAttr" :tabindex="selected === item.id ? 0 : -1" class="vmz-ui-tree__item" :style="item.padStyle">
+                <button v-if="item.expandable" type="button" :data-vmz-tree-twist="item.id" :aria-label="item.twistLabel" tabindex="-1" class="vmz-ui-tree__twist">
+                    {{ item.expanded ? "−" : "+" }}
+                </button>
+                <span v-if="!item.expandable" aria-hidden="true" class="vmz-ui-tree__twist-spacer" />
+                <span :data-vmz-tree-title="item.id" class="vmz-ui-tree__title">
+                    {{ item.title }}
+                </span>
+            </li>
+        </ul>
     </div>
 </template>
-
 <style>
-  .vmz-ui-tree {
+.vmz-ui-tree {
     display: flex;
     flex-direction: column;
     gap: 0.35rem;
     max-width: 28rem;
-  }
+}
 
-  .vmz-ui-tree__label {
+.vmz-ui-tree__label {
     margin: 0;
     font-weight: 600;
     color: var(--vmz-text-ink);
-  }
+}
 
-  .vmz-ui-tree__items {
+.vmz-ui-tree__items {
     margin: 0;
     padding: 0.25rem;
     list-style: none;
@@ -61,9 +38,9 @@
     border-radius: var(--vmz-radius-md, 6px);
     background: var(--vmz-surface-paper);
     color: var(--vmz-text-ink);
-  }
+}
 
-  .vmz-ui-tree__item {
+.vmz-ui-tree__item {
     display: flex;
     align-items: center;
     gap: 0.35rem;
@@ -71,26 +48,26 @@
     border-radius: var(--vmz-radius-md, 6px);
     cursor: pointer;
     outline: none;
-  }
+}
 
-  .vmz-ui-tree__item[aria-selected='true'] {
+.vmz-ui-tree__item[aria-selected="true"] {
     background: var(--vmz-action-primary-background);
     color: var(--vmz-action-primary-foreground);
-  }
+}
 
-  .vmz-ui-tree__item:hover {
+.vmz-ui-tree__item:hover {
     background: color-mix(in srgb, var(--vmz-action-primary-background) 14%, transparent);
-  }
+}
 
-  .vmz-ui-tree__item[aria-selected='true']:hover {
+.vmz-ui-tree__item[aria-selected="true"]:hover {
     background: var(--vmz-action-primary-hover);
-  }
+}
 
-  .vmz-ui-tree__item:focus-visible {
+.vmz-ui-tree__item:focus-visible {
     box-shadow: 0 0 0 2px var(--vmz-focus-ring);
-  }
+}
 
-  .vmz-ui-tree__twist {
+.vmz-ui-tree__twist {
     flex: 0 0 auto;
     width: 1.35rem;
     height: 1.35rem;
@@ -104,105 +81,111 @@
     line-height: 1;
     cursor: pointer;
     outline: none;
-  }
+}
 
-  .vmz-ui-tree__twist:focus-visible {
+.vmz-ui-tree__twist:focus-visible {
     box-shadow: 0 0 0 2px var(--vmz-focus-ring);
-  }
+}
 
-  .vmz-ui-tree__twist-spacer {
+.vmz-ui-tree__twist-spacer {
     flex: 0 0 auto;
     width: 1.35rem;
-  }
+}
 
-  .vmz-ui-tree__title {
+.vmz-ui-tree__title {
     flex: 1 1 auto;
-  }
+}
 </style>
-
 <script client>
 /**
-* VMZ UI — Tree (ordinary hierarchy).
-* Parent owns visible flat rows + selected + expand state.
-* Not virtualized / not DataGrid tree mode.
-*/
+ * VMZ UI — Tree (ordinary hierarchy).
+ * Parent owns visible flat rows + selected + expand state.
+ * Not virtualized / not DataGrid tree mode.
+ */
 export default class Tree {
-	public label: string = "Tree";
-	public labelId: string = "vmz-tree-label";
-	public selected: string = "";
-	/**
-	* @type {{
-	*   id: string,
-	*   title: string,
-	*   depth: string,
-	*   expandable: boolean,
-	*   expanded: boolean,
-	*   expandedAttr: string,
-	*   twistLabel: string,
-	*   padStyle: string
-	* }[]}
-	*/
-	public items: {
-		id: string;
-		title: string;
-		depth: string;
-		expandable: boolean;
-		expanded: boolean;
-		expandedAttr: string;
-		twistLabel: string;
-		padStyle: string;
-	}[] = [];
-	public onSelect: ((id: string) => void) | null = null;
-	public onToggle: ((id: string) => void) | null = null;
-	select(id) {
-		if (typeof this.onSelect === "function") this.onSelect(id);
-	}
-	toggle(id) {
-		if (typeof this.onToggle === "function") this.onToggle(id);
-	}
-	onTreeClick(ev) {
-		const t = ev && ev.target;
-		const twist = t && typeof t.closest === "function" ? t.closest("[data-vmz-tree-twist]") : null;
-		if (twist) {
-			const id = typeof twist.getAttribute === "function" ? twist.getAttribute("data-vmz-tree-twist") : null;
-			if (id) {
-				ev.preventDefault();
-				ev.stopPropagation();
-				this.toggle(id);
-			}
-			return;
-		}
-		const el = t && typeof t.closest === "function" ? t.closest("[data-vmz-tree-item]") : null;
-		const id = el && typeof el.getAttribute === "function" ? el.getAttribute("data-vmz-tree-item") : null;
-		if (id) this.select(id);
-	}
-	onTreeKeyDown(ev) {
-		if (!ev || !this.items?.length) return;
-		const ids = this.items.map((it) => it.id);
-		const idx = Math.max(0, ids.indexOf(this.selected));
-		const cur = this.items[idx];
-		if (ev.key === "ArrowRight" && cur?.expandable && !cur.expanded) {
-			ev.preventDefault();
-			this.toggle(cur.id);
-			return;
-		}
-		if (ev.key === "ArrowLeft" && cur?.expandable && cur.expanded) {
-			ev.preventDefault();
-			this.toggle(cur.id);
-			return;
-		}
-		let next = idx;
-		if (ev.key === "ArrowDown") next = (idx + 1) % ids.length;
-		else if (ev.key === "ArrowUp") next = (idx - 1 + ids.length) % ids.length;
-		else if (ev.key === "Home") next = 0;
-		else if (ev.key === "End") next = ids.length - 1;
-		else if (ev.key === "Enter" || ev.key === " ") {
-			ev.preventDefault();
-			if (cur) this.select(cur.id);
-			return;
-		} else return;
-		ev.preventDefault();
-		this.select(ids[next]);
-	}
+    public label: string = "Tree";
+    public labelId: string = "vmz-tree-label";
+    public selected: string = "";
+    /**
+     * @type {{
+     *   id: string,
+     *   title: string,
+     *   depth: string,
+     *   expandable: boolean,
+     *   expanded: boolean,
+     *   expandedAttr: string,
+     *   twistLabel: string,
+     *   padStyle: string
+     * }[]}
+     */
+    public items: {
+        id: string;
+        title: string;
+        depth: string;
+        expandable: boolean;
+        expanded: boolean;
+        expandedAttr: string;
+        twistLabel: string;
+        padStyle: string;
+    }[] = [];
+    public onSelect: ((id: string) => void) | null = null;
+    public onToggle: ((id: string) => void) | null = null;
+    select(id) {
+        if (typeof this.onSelect === "function") this.onSelect(id);
+    }
+    toggle(id) {
+        if (typeof this.onToggle === "function") this.onToggle(id);
+    }
+    onTreeClick(ev) {
+        const t = ev && ev.target;
+        const twist =
+            t && typeof t.closest === "function" ? t.closest("[data-vmz-tree-twist]") : null;
+        if (twist) {
+            const id =
+                typeof twist.getAttribute === "function"
+                    ? twist.getAttribute("data-vmz-tree-twist")
+                    : null;
+            if (id) {
+                ev.preventDefault();
+                ev.stopPropagation();
+                this.toggle(id);
+            }
+            return;
+        }
+        const el = t && typeof t.closest === "function" ? t.closest("[data-vmz-tree-item]") : null;
+        const id =
+            el && typeof el.getAttribute === "function"
+                ? el.getAttribute("data-vmz-tree-item")
+                : null;
+        if (id) this.select(id);
+    }
+    onTreeKeyDown(ev) {
+        if (!ev || !this.items?.length) return;
+        const ids = this.items.map((it) => it.id);
+        const idx = Math.max(0, ids.indexOf(this.selected));
+        const cur = this.items[idx];
+        if (ev.key === "ArrowRight" && cur?.expandable && !cur.expanded) {
+            ev.preventDefault();
+            this.toggle(cur.id);
+            return;
+        }
+        if (ev.key === "ArrowLeft" && cur?.expandable && cur.expanded) {
+            ev.preventDefault();
+            this.toggle(cur.id);
+            return;
+        }
+        let next = idx;
+        if (ev.key === "ArrowDown") next = (idx + 1) % ids.length;
+        else if (ev.key === "ArrowUp") next = (idx - 1 + ids.length) % ids.length;
+        else if (ev.key === "Home") next = 0;
+        else if (ev.key === "End") next = ids.length - 1;
+        else if (ev.key === "Enter" || ev.key === " ") {
+            ev.preventDefault();
+            if (cur) this.select(cur.id);
+            return;
+        } else return;
+        ev.preventDefault();
+        this.select(ids[next]);
+    }
 }
 </script>