@vmz/ui 0.1.0 → 0.1.2

package/src/components/Icon.vmz

@@ -0,0 +1,86 @@
+<template>
+  <span
+      class="vmz-ui-icon"
+      data-vmz-ui="icon"
+      data-name={name}
+      data-size={size}
+      role={decorative ? 'presentation' : 'img'}
+      aria-hidden={decorative ? 'true' : 'false'}
+      aria-label={decorative ? '' : label}
+    >
+      <svg class="vmz-ui-icon__svg" viewBox="0 0 24 24" focusable="false" aria-hidden="true">
+        <path if={isCheck} fill="currentColor" d="M9.2 16.6 4.8 12.2l1.4-1.4 3 3 8-8 1.4 1.4z" />
+        <path if={isClose} fill="currentColor" d="M6.4 7.8 7.8 6.4 12 10.6 16.2 6.4 17.6 7.8 13.4 12 17.6 16.2 16.2 17.6 12 13.4 7.8 17.6 6.4 16.2 10.6 12z" />
+        <path if={isSearch} fill="currentColor" d="M10.5 3a7.5 7.5 0 0 1 5.9 12.1l4 4-1.4 1.4-4-4A7.5 7.5 0 1 1 10.5 3zm0 2a5.5 5.5 0 1 0 0 11 5.5 5.5 0 0 0 0-11z" />
+        <path if={isChevronDown} fill="currentColor" d="M7.4 9.1 12 13.7l4.6-4.6 1.4 1.4L12 16.5 6 10.5z" />
+        <path if={isChevronRight} fill="currentColor" d="M9.1 6 15.1 12l-6 6-1.4-1.4L12.3 12 7.7 7.4z" />
+        <path if={isInfo} fill="currentColor" d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm0 8.2a1 1 0 0 0-1 1V17a1 1 0 1 0 2 0v-5.8a1 1 0 0 0-1-1zm0-3.7a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4z" />
+        <path if={isWarning} fill="currentColor" d="M12 3.2 21 19H3L12 3.2zm0 5.3a1 1 0 0 0-1 1v4.2a1 1 0 1 0 2 0V9.5a1 1 0 0 0-1-1zm0 8.1a1.2 1.2 0 1 0 0 2.4 1.2 1.2 0 0 0 0-2.4z" />
+        <path if={isSuccess} fill="currentColor" d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm-2.5 10.3-2-2 1.4-1.4 2 2 5-5 1.4 1.4z" />
+        <path if={isDanger} fill="currentColor" d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm-1 5h2v6h-2zm0 8h2v2h-2z" />
+        <path if={isMenu} fill="currentColor" d="M4 7h16v2H4zm0 4h16v2H4zm0 4h16v2H4z" />
+        <path if={isPlus} fill="currentColor" d="M11 5h2v6h6v2h-6v6h-2v-6H5v-2h6z" />
+        <path if={isFallback} fill="currentColor" d="M12 2a10 10 0 1 1 0 20 10 10 0 0 1 0-20zm1 5h-2v2h2zm0 4h-2v7h2z" />
+      </svg>
+    </span>
+</template>
+
+<style>
+  .vmz-ui-icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 1em;
+    height: 1em;
+    vertical-align: -0.125em;
+    color: inherit;
+    line-height: 1;
+  }
+  .vmz-ui-icon[data-size='sm'] { font-size: 0.875rem; }
+  .vmz-ui-icon[data-size='md'] { font-size: 1rem; }
+  .vmz-ui-icon[data-size='lg'] { font-size: 1.25rem; }
+  .vmz-ui-icon__svg { width: 1em; height: 1em; display: block; }
+</style>
+
+<script client>
+/**
+* VMZ UI — Icon (minimal official set).
+* Parent picks `name`; no useIcon/createIcon. Unknown names render fallback glyph.
+*/
+export default class Icon {
+	public name: string = "info";
+	public size: string = "md";
+	public label: string = "";
+	public decorative: boolean = true;
+	isCheck = false;
+	isClose = false;
+	isSearch = false;
+	isChevronDown = false;
+	isChevronRight = false;
+	isInfo = false;
+	isWarning = false;
+	isSuccess = false;
+	isDanger = false;
+	isMenu = false;
+	isPlus = false;
+	isFallback = false;
+	onMount() {
+		this._sync();
+	}
+	_sync() {
+		const n = String(this.name || "");
+		this.isCheck = n === "check";
+		this.isClose = n === "close";
+		this.isSearch = n === "search";
+		this.isChevronDown = n === "chevron-down";
+		this.isChevronRight = n === "chevron-right";
+		this.isInfo = n === "info";
+		this.isWarning = n === "warning";
+		this.isSuccess = n === "success";
+		this.isDanger = n === "danger";
+		this.isMenu = n === "menu";
+		this.isPlus = n === "plus";
+		this.isFallback = !(this.isCheck || this.isClose || this.isSearch || this.isChevronDown || this.isChevronRight || this.isInfo || this.isWarning || this.isSuccess || this.isDanger || this.isMenu || this.isPlus);
+	}
+}
+</script>

package/src/components/Layout.vmz

@@ -0,0 +1,11 @@
+<template>
+  <div class="vmz-ui-layout" data-vmz-ui="layout"><slot /></div>
+</template>
+
+<style>
+  .vmz-ui-layout{display:flex;flex-direction:column;min-height:100%;background:var(--vmz-surface-page,var(--vmz-surface-mist,#f5f5f5))}
+</style>
+
+<script client>
+export default class Layout {}
+</script>

package/src/components/Link.vmz

@@ -1,48 +1,48 @@
 <template>
   <a
-    class="vmz-ui-link"
-    data-vmz-ui="link"
-    href={href}
-    target={target}
-    rel={rel}
-  >
-    <slot />
-  </a>
+      class="vmz-ui-link"
+      data-vmz-ui="link"
+      href={href}
+      target={target}
+      rel={rel}
+    >
+      <slot />
+    </a>
 </template>
 
 <style>
-.vmz-ui-link {
-  font: inherit;
-  font-weight: 600;
-  color: var(--vmz-action-primary-background);
-  text-decoration: underline;
-  text-underline-offset: 0.15em;
-  text-decoration-thickness: 1px;
-  outline: none;
-}
+  .vmz-ui-link {
+    font: inherit;
+    font-weight: 600;
+    color: var(--vmz-action-primary-background);
+    text-decoration: underline;
+    text-underline-offset: 0.15em;
+    text-decoration-thickness: 1px;
+    outline: none;
+  }
 
-.vmz-ui-link:hover {
-  color: var(--vmz-action-primary-hover);
-}
+  .vmz-ui-link:hover {
+    color: var(--vmz-action-primary-hover);
+  }
 
-.vmz-ui-link:active {
-  color: var(--vmz-action-primary-active);
-}
+  .vmz-ui-link:active {
+    color: var(--vmz-action-primary-active);
+  }
 
-.vmz-ui-link:focus-visible {
-  box-shadow: 0 0 0 2px var(--vmz-focus-ring);
-  border-radius: 2px;
-}
+  .vmz-ui-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 — Link (Foundation).
- * Navigation / inline text link; tokens only, no brand hex.
- */
+* VMZ UI — Link (Foundation).
+* Navigation / inline text link; tokens only, no brand hex.
+*/
 export default class Link {
-  public href: string = '#';
-  public target: string = '';
-  public rel: string = '';
+	public href: string = "#";
+	public target: string = "";
+	public rel: string = "";
 }
 </script>

package/src/components/List.vmz

@@ -1,116 +1,116 @@
 <template>
   <div class="vmz-ui-list" data-vmz-ui="list">
-    <p if={label} class="vmz-ui-list__label" id={labelId}>{label}</p>
-    <ul
-      class="vmz-ui-list__items"
-      role="listbox"
-      aria-labelledby={labelId}
-      aria-label={label}
-      onClick={onListClick}
-      onKeyDown={onListKeyDown}
-    >
-      <li
-        each={items}
-        as="item"
-        key={item.id}
-        class="vmz-ui-list__item"
-        role="option"
-        id={item.id}
-        data-vmz-list-item={item.id}
-        aria-selected={selected === item.id ? 'true' : 'false'}
-        tabindex={selected === item.id ? 0 : -1}
+      <p if={label} class="vmz-ui-list__label" id={labelId}>{label}</p>
+      <ul
+        class="vmz-ui-list__items"
+        role="listbox"
+        aria-labelledby={labelId}
+        aria-label={label}
+        onClick={onListClick}
+        onKeyDown={onListKeyDown}
       >
-        {item.title}
-      </li>
-    </ul>
-  </div>
+        <li
+          each={items}
+          as="item"
+          key={item.id}
+          class="vmz-ui-list__item"
+          role="option"
+          id={item.id}
+          data-vmz-list-item={item.id}
+          aria-selected={selected === item.id ? 'true' : 'false'}
+          tabindex={selected === item.id ? 0 : -1}
+        >
+          {item.title}
+        </li>
+      </ul>
+    </div>
 </template>
 
 <style>
-.vmz-ui-list {
-  display: flex;
-  flex-direction: column;
-  gap: 0.35rem;
-  max-width: 28rem;
-}
+  .vmz-ui-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.35rem;
+    max-width: 28rem;
+  }
 
-.vmz-ui-list__label {
-  margin: 0;
-  font-weight: 600;
-  color: var(--vmz-text-ink);
-}
+  .vmz-ui-list__label {
+    margin: 0;
+    font-weight: 600;
+    color: var(--vmz-text-ink);
+  }
 
-.vmz-ui-list__items {
-  margin: 0;
-  padding: 0.25rem;
-  list-style: none;
-  border: 1px solid var(--vmz-line-default);
-  border-radius: 2px;
-  background: var(--vmz-surface-paper);
-  color: var(--vmz-text-ink);
-}
+  .vmz-ui-list__items {
+    margin: 0;
+    padding: 0.25rem;
+    list-style: none;
+    border: 1px solid var(--vmz-line-default);
+    border-radius: var(--vmz-radius-md, 6px);
+    background: var(--vmz-surface-paper);
+    color: var(--vmz-text-ink);
+  }
 
-.vmz-ui-list__item {
-  padding: var(--vmz-density-control-padding-y) var(--vmz-density-control-padding-x);
-  border-radius: 2px;
-  cursor: pointer;
-  outline: none;
-}
+  .vmz-ui-list__item {
+    padding: var(--vmz-density-control-padding-y) var(--vmz-density-control-padding-x);
+    border-radius: var(--vmz-radius-md, 6px);
+    cursor: pointer;
+    outline: none;
+  }
 
-.vmz-ui-list__item[aria-selected='true'] {
-  background: var(--vmz-action-primary-background);
-  color: var(--vmz-action-primary-foreground);
-}
+  .vmz-ui-list__item[aria-selected='true'] {
+    background: var(--vmz-action-primary-background);
+    color: var(--vmz-action-primary-foreground);
+  }
 
-.vmz-ui-list__item:hover {
-  background: color-mix(in srgb, var(--vmz-action-primary-background) 14%, transparent);
-}
+  .vmz-ui-list__item:hover {
+    background: color-mix(in srgb, var(--vmz-action-primary-background) 14%, transparent);
+  }
 
-.vmz-ui-list__item[aria-selected='true']:hover {
-  background: var(--vmz-action-primary-hover);
-}
+  .vmz-ui-list__item[aria-selected='true']:hover {
+    background: var(--vmz-action-primary-hover);
+  }
 
-.vmz-ui-list__item:focus-visible {
-  box-shadow: 0 0 0 2px var(--vmz-focus-ring);
-}
+  .vmz-ui-list__item:focus-visible {
+    box-shadow: 0 0 0 2px var(--vmz-focus-ring);
+  }
 </style>
 
 <script client>
 /**
- * VMZ UI — List (ordinary selectable list).
- * Parent owns `selected` id; click + Arrow/Home/End. Not a DataGrid.
- */
+* VMZ UI — List (ordinary selectable list).
+* Parent owns `selected` id; click + Arrow/Home/End. Not a DataGrid.
+*/
 export default class List {
-  public label: string = 'List';
-  public labelId: string = 'vmz-list-label';
-  public selected: string = '';
-  /** @type {{ id: string, title: string }[]} */
-  public items: { id: string; title: string }[] = [];
-  public onSelect: ((id: string) => void) | null = null;
-
-  select(id) {
-    if (typeof this.onSelect === 'function') this.onSelect(id);
-  }
-
-  onListClick(ev) {
-    const t = ev && ev.target;
-    const el = t && typeof t.closest === 'function' ? t.closest('[data-vmz-list-item]') : null;
-    const id = el && typeof el.getAttribute === 'function' ? el.getAttribute('data-vmz-list-item') : null;
-    if (id) this.select(id);
-  }
-
-  onListKeyDown(ev) {
-    if (!ev || !this.items?.length) return;
-    const ids = this.items.map((it) => it.id);
-    const idx = Math.max(0, ids.indexOf(this.selected));
-    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 return;
-    ev.preventDefault();
-    this.select(ids[next]);
-  }
+	public label: string = "List";
+	public labelId: string = "vmz-list-label";
+	public selected: string = "";
+	/** @type {{ id: string, title: string }[]} */
+	public items: {
+		id: string;
+		title: string;
+	}[] = [];
+	public onSelect: ((id: string) => void) | null = null;
+	select(id) {
+		if (typeof this.onSelect === "function") this.onSelect(id);
+	}
+	onListClick(ev) {
+		const t = ev && ev.target;
+		const el = t && typeof t.closest === "function" ? t.closest("[data-vmz-list-item]") : null;
+		const id = el && typeof el.getAttribute === "function" ? el.getAttribute("data-vmz-list-item") : null;
+		if (id) this.select(id);
+	}
+	onListKeyDown(ev) {
+		if (!ev || !this.items?.length) return;
+		const ids = this.items.map((it) => it.id);
+		const idx = Math.max(0, ids.indexOf(this.selected));
+		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 return;
+		ev.preventDefault();
+		this.select(ids[next]);
+	}
 }
 </script>