@vmz/ui 0.2.2 → 0.2.4

package/src/components/Autocomplete.vmz

@@ -1,67 +1,40 @@
 <template>
-  <div
-      class="vmz-ui-autocomplete"
-      data-vmz-ui="autocomplete"
-      :data-invalid="invalidAttr"
-      :data-open="openAttr"
-    >
-      <label v-if="label" class="vmz-ui-autocomplete__label" :for="controlId">{{ label }}</label>
-      <input
-        :id="controlId"
-        class="vmz-ui-autocomplete__control"
-        type="text"
-        role="combobox"
-        autocomplete="off"
-        aria-autocomplete="list"
-        :aria-expanded="openAttr"
-        :aria-controls="listId"
-        :aria-invalid="error ? 'true' : 'false'"
-        :aria-describedby="describedBy"
-        :value="value"
-        :disabled="disabled"
-        @input="onDomInput"
-        :onKeyDown="onKeyDown"
-      />
-      <ul
-        v-if="listOpen"
-        :id="listId"
-        class="vmz-ui-autocomplete__list"
-        role="listbox"
-        data-vmz-autocomplete="list"
-        @click="onListClick"
-      >
-        <li
-          v-for="opt in options"
-          :key="opt.value"
-          class="vmz-ui-autocomplete__option"
-          role="option"
-          :data-vmz-option="opt.value"
-          tabindex="-1"
-        >
-          {{ opt.label }}
-        </li>
-      </ul>
-      <p v-if="showEmpty" class="vmz-ui-autocomplete__empty" data-vmz-autocomplete="empty">{{ emptyText }}</p>
-      <p v-if="description" :id="descriptionId" class="vmz-ui-autocomplete__description">{{ description }}</p>
-      <p v-if="error" :id="errorId" class="vmz-ui-autocomplete__error" role="alert">{{ error }}</p>
+    <div data-vmz-ui="autocomplete" :data-invalid="invalidAttr" :data-open="openAttr" class="vmz-ui-autocomplete">
+        <label v-if="label" :for="controlId" class="vmz-ui-autocomplete__label">
+            {{ label }}
+        </label>
+        <input :id="controlId" type="text" role="combobox" autocomplete="off" aria-autocomplete="list" :aria-expanded="openAttr" :aria-controls="listId" :aria-invalid='error ? "true" : "false"' :aria-describedby="describedBy" :value="value" :disabled="disabled" @input="onDomInput" :onKeyDown="onKeyDown" class="vmz-ui-autocomplete__control" />
+        <ul v-if="listOpen" :id="listId" role="listbox" data-vmz-autocomplete="list" @click="onListClick" class="vmz-ui-autocomplete__list">
+            <li v-for="opt in options" :key="opt.value" role="option" :data-vmz-option="opt.value" tabindex="-1" class="vmz-ui-autocomplete__option">
+                {{ opt.label }}
+            </li>
+        </ul>
+        <p v-if="showEmpty" data-vmz-autocomplete="empty" class="vmz-ui-autocomplete__empty">
+            {{ emptyText }}
+        </p>
+        <p v-if="description" :id="descriptionId" class="vmz-ui-autocomplete__description">
+            {{ description }}
+        </p>
+        <p v-if="error" :id="errorId" role="alert" class="vmz-ui-autocomplete__error">
+            {{ error }}
+        </p>
     </div>
 </template>
-
 <style>
-  .vmz-ui-autocomplete {
+.vmz-ui-autocomplete {
     position: relative;
     display: flex;
     flex-direction: column;
     gap: 0.35rem;
     max-width: 28rem;
-  }
+}
 
-  .vmz-ui-autocomplete__label {
+.vmz-ui-autocomplete__label {
     font: inherit;
     font-weight: 600;
-  }
+}
 
-  .vmz-ui-autocomplete__control {
+.vmz-ui-autocomplete__control {
     font: inherit;
     padding: var(--vmz-density-control-padding-y) var(--vmz-density-control-padding-x);
     border: 1px solid var(--vmz-line-default);
@@ -69,22 +42,22 @@
     background: transparent;
     color: inherit;
     outline: none;
-  }
+}
 
-  .vmz-ui-autocomplete[data-invalid='true'] .vmz-ui-autocomplete__control {
+.vmz-ui-autocomplete[data-invalid="true"] .vmz-ui-autocomplete__control {
     border-color: var(--vmz-status-danger-accent);
-  }
+}
 
-  .vmz-ui-autocomplete__control:focus-visible {
+.vmz-ui-autocomplete__control:focus-visible {
     box-shadow: 0 0 0 2px var(--vmz-focus-ring);
-  }
+}
 
-  .vmz-ui-autocomplete__control:disabled {
+.vmz-ui-autocomplete__control:disabled {
     opacity: 0.55;
     cursor: not-allowed;
-  }
+}
 
-  .vmz-ui-autocomplete__list {
+.vmz-ui-autocomplete__list {
     list-style: none;
     margin: 0;
     padding: 0.25rem 0;
@@ -93,90 +66,89 @@
     background: var(--vmz-surface-paper);
     max-height: 12rem;
     overflow: auto;
-  }
+}
 
-  .vmz-ui-autocomplete__option {
+.vmz-ui-autocomplete__option {
     margin: 0;
     padding: 0.45rem 0.75rem;
     cursor: pointer;
     font-weight: 600;
     color: var(--vmz-text-ink);
-  }
+}
 
-  .vmz-ui-autocomplete__option:hover,
-  .vmz-ui-autocomplete__option:focus {
+.vmz-ui-autocomplete__option:hover,
+.vmz-ui-autocomplete__option:focus {
     background: var(--vmz-surface-mist);
     outline: none;
-  }
+}
 
-  .vmz-ui-autocomplete__empty {
+.vmz-ui-autocomplete__empty {
     margin: 0;
     color: var(--vmz-text-steel);
     font-size: 0.9em;
-  }
+}
 
-  .vmz-ui-autocomplete__description {
+.vmz-ui-autocomplete__description {
     margin: 0;
     opacity: 0.75;
     font-size: 0.9em;
-  }
+}
 
-  .vmz-ui-autocomplete__error {
+.vmz-ui-autocomplete__error {
     margin: 0;
     color: var(--vmz-status-danger-foreground);
     font-size: 0.9em;
-  }
+}
 </style>
-
 <script client>
 /**
-* VMZ UI — Autocomplete.
-* Parent owns value, listOpen, and filtered options — no parallel query/store.
-* Selection notifies via onSelect(value); Escape closes via onClose.
-*/
+ * VMZ UI — Autocomplete.
+ * Parent owns value, listOpen, and filtered options — no parallel query/store.
+ * Selection notifies via onSelect(value); Escape closes via onClose.
+ */
 export default class Autocomplete {
-	public label: string = "";
-	public description: string = "";
-	public error: string = "";
-	public value: string = "";
-	public options: Array<{
-		value: string;
-		label: string;
-	}> = [];
-	public listOpen: boolean = false;
-	public openAttr: string = "false";
-	public showEmpty: boolean = false;
-	public emptyText: string = "No matches";
-	public disabled: boolean = false;
-	public invalidAttr: string = "false";
-	public controlId: string = "vmz-autocomplete";
-	public listId: string = "vmz-autocomplete-list";
-	public descriptionId: string = "vmz-autocomplete-desc";
-	public errorId: string = "vmz-autocomplete-err";
-	public describedBy: string = "";
-	public onInput: ((e: Event) => void) | null = null;
-	public onSelect: ((value: string) => void) | null = null;
-	public onClose: (() => void) | null = null;
-	onDomInput(e: Event) {
-		this.emit("input", e);
-		if (typeof this.onInput === "function") this.onInput(e);
-	}
-	onListClick(ev) {
-		if (this.disabled) return;
-		const t = ev && ev.target;
-		if (!t || typeof t.closest !== "function") return;
-		const opt = t.closest("[data-vmz-option]");
-		if (!opt) return;
-		const next = opt.getAttribute("data-vmz-option") || "";
-		if (!next) return;
-		this.emit("select", next);
-		if (typeof this.onSelect === "function") this.onSelect(next);
-	}
-	onKeyDown(ev) {
-		if (!ev || ev.key !== "Escape") return;
-		ev.preventDefault();
-		this.emit("close");
-		if (typeof this.onClose === "function") this.onClose();
-	}
+    public label: string = "";
+    public description: string = "";
+    public error: string = "";
+    public value: string = "";
+    public options: Array<{
+        value: string;
+        label: string;
+    }> = [];
+    public listOpen: boolean = false;
+    public openAttr: string = "false";
+    public showEmpty: boolean = false;
+    public emptyText: string = "No matches";
+    public disabled: boolean = false;
+    public invalidAttr: string = "false";
+    public controlId: string = "vmz-autocomplete";
+    public listId: string = "vmz-autocomplete-list";
+    public descriptionId: string = "vmz-autocomplete-desc";
+    public errorId: string = "vmz-autocomplete-err";
+    public describedBy: string = "";
+    public onInput: ((e: Event) => void) | null = null;
+    public onSelect: ((value: string) => void) | null = null;
+    public onClose: (() => void) | null = null;
+    onDomInput(e: Event) {
+        this.emit("input", e);
+        if (typeof this.onInput === "function") this.onInput(e);
+    }
+    onListClick(ev) {
+        if (this.disabled) return;
+        const t = ev && ev.target;
+        if (!t || typeof t.closest !== "function") return;
+        const opt = t.closest("[data-vmz-option]");
+        if (!opt) return;
+        const next = opt.getAttribute("data-vmz-option") || "";
+        if (!next) return;
+        this.emit("select", next);
+        if (typeof this.onSelect === "function") this.onSelect(next);
+    }
+    onKeyDown(ev) {
+        if (!ev || ev.key !== "Escape") return;
+        ev.preventDefault();
+        this.emit("close");
+        if (typeof this.onClose === "function") this.onClose();
+    }
 }
 </script>

package/src/components/Avatar.vmz

@@ -1,16 +1,45 @@
 <template>
-  <span class="vmz-ui-avatar" data-vmz-ui="avatar" :data-size="size" :aria-label="label"><img v-if="src" :src="src" alt="" /><span v-if="!src">{{ text }}</span></span>
+    <span data-vmz-ui="avatar" :data-size="size" :aria-label="label" class="vmz-ui-avatar">
+        <img v-if="src" :src="src" alt />
+        <span v-if="!src">
+            {{ text }}
+        </span>
+    </span>
 </template>
-
 <style>
-  .vmz-ui-avatar{display:inline-flex;align-items:center;justify-content:center;width:2rem;height:2rem;overflow:hidden;border-radius:50%;background:color-mix(in srgb,var(--vmz-action-primary-background,#1677ff) 14%,white);color:var(--vmz-action-primary-active,#0958d9);font-weight:650}.vmz-ui-avatar[data-size='small']{width:1.5rem;height:1.5rem;font-size:.75rem}.vmz-ui-avatar[data-size='large']{width:2.75rem;height:2.75rem;font-size:1.1rem}.vmz-ui-avatar img{width:100%;height:100%;object-fit:cover}
+.vmz-ui-avatar {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 2rem;
+    height: 2rem;
+    overflow: hidden;
+    border-radius: 50%;
+    background: color-mix(in srgb, var(--vmz-action-primary-background, #1677ff) 14%, white);
+    color: var(--vmz-action-primary-active, #0958d9);
+    font-weight: 650;
+}
+.vmz-ui-avatar[data-size="small"] {
+    width: 1.5rem;
+    height: 1.5rem;
+    font-size: 0.75rem;
+}
+.vmz-ui-avatar[data-size="large"] {
+    width: 2.75rem;
+    height: 2.75rem;
+    font-size: 1.1rem;
+}
+.vmz-ui-avatar img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+}
 </style>
-
 <script client>
 export default class Avatar {
-	public src: string = "";
-	public text: string = "";
-	public label: string = "";
-	public size: string = "middle";
+    public src: string = "";
+    public text: string = "";
+    public label: string = "";
+    public size: string = "middle";
 }
 </script>

package/src/components/Badge.vmz

@@ -1,11 +1,10 @@
 <template>
-  <span class="vmz-ui-badge" data-vmz-ui="badge" :data-tone="tone">
-      <slot />
+    <span data-vmz-ui="badge" :data-tone="tone" class="vmz-ui-badge">
+        <slot />
     </span>
 </template>
-
 <style>
-  .vmz-ui-badge {
+.vmz-ui-badge {
     display: inline-flex;
     align-items: center;
     gap: 0.25rem;
@@ -19,46 +18,53 @@
     line-height: 1.2;
     background: var(--vmz-surface-mist);
     color: var(--vmz-text-ink);
-  }
+}
 
-  .vmz-ui-badge[data-tone='brand'] {
-    border-color: color-mix(in srgb, var(--vmz-action-primary-background) 35%, var(--vmz-line-default));
-    background: color-mix(in srgb, var(--vmz-action-primary-background) 12%, var(--vmz-surface-paper));
+.vmz-ui-badge[data-tone="brand"] {
+    border-color: color-mix(
+        in srgb,
+        var(--vmz-action-primary-background) 35%,
+        var(--vmz-line-default)
+    );
+    background: color-mix(
+        in srgb,
+        var(--vmz-action-primary-background) 12%,
+        var(--vmz-surface-paper)
+    );
     color: var(--vmz-action-primary-active);
-  }
+}
 
-  .vmz-ui-badge[data-tone='info'] {
+.vmz-ui-badge[data-tone="info"] {
     border-color: var(--vmz-status-info-accent);
     background: color-mix(in srgb, var(--vmz-status-info-accent) 12%, var(--vmz-surface-paper));
     color: var(--vmz-status-info-foreground);
-  }
+}
 
-  .vmz-ui-badge[data-tone='success'] {
+.vmz-ui-badge[data-tone="success"] {
     border-color: var(--vmz-status-success-accent);
     background: color-mix(in srgb, var(--vmz-status-success-accent) 12%, var(--vmz-surface-paper));
     color: var(--vmz-status-success-foreground);
-  }
+}
 
-  .vmz-ui-badge[data-tone='warning'] {
+.vmz-ui-badge[data-tone="warning"] {
     border-color: var(--vmz-status-warning-accent);
     background: color-mix(in srgb, var(--vmz-status-warning-accent) 12%, var(--vmz-surface-paper));
     color: var(--vmz-status-warning-foreground);
-  }
+}
 
-  .vmz-ui-badge[data-tone='danger'] {
+.vmz-ui-badge[data-tone="danger"] {
     border-color: var(--vmz-status-danger-accent);
     background: color-mix(in srgb, var(--vmz-status-danger-accent) 12%, var(--vmz-surface-paper));
     color: var(--vmz-status-danger-foreground);
-  }
+}
 </style>
-
 <script client>
 /**
-* VMZ UI — Badge (Foundation).
-* Compact status / label chip; tones share status.* + action tokens.
-*/
+ * VMZ UI — Badge (Foundation).
+ * Compact status / label chip; tones share status.* + action tokens.
+ */
 export default class Badge {
-	static __vmzHostBox = 'contents';
-	public tone: string = "brand";
+    static __vmzHostBox = "contents";
+    public tone: string = "brand";
 }
 </script>

package/src/components/Breadcrumb.vmz

@@ -1,20 +1,23 @@
 <template>
-  <nav class="vmz-ui-breadcrumb" data-vmz-ui="breadcrumb" :aria-label="label">
-      <ol class="vmz-ui-breadcrumb__list">
-        <li v-for="item in items" :key="item.id" class="vmz-ui-breadcrumb__item" :data-vmz-crumb="item.id">
-          <a v-if="item.href" class="vmz-ui-breadcrumb__link" :href="item.href">{{ item.title }}</a>
-          <span v-if="!item.href" class="vmz-ui-breadcrumb__current" aria-current="page">{{ item.title }}</span>
-        </li>
-      </ol>
+    <nav data-vmz-ui="breadcrumb" :aria-label="label" class="vmz-ui-breadcrumb">
+        <ol class="vmz-ui-breadcrumb__list">
+            <li v-for="item in items" :key="item.id" :data-vmz-crumb="item.id" class="vmz-ui-breadcrumb__item">
+                <a v-if="item.href" :href="item.href" class="vmz-ui-breadcrumb__link">
+                    {{ item.title }}
+                </a>
+                <span v-if="!item.href" aria-current="page" class="vmz-ui-breadcrumb__current">
+                    {{ item.title }}
+                </span>
+            </li>
+        </ol>
     </nav>
 </template>
-
 <style>
-  .vmz-ui-breadcrumb {
+.vmz-ui-breadcrumb {
     font: inherit;
-  }
+}
 
-  .vmz-ui-breadcrumb__list {
+.vmz-ui-breadcrumb__list {
     display: flex;
     flex-wrap: wrap;
     gap: 0.35rem 0.55rem;
@@ -22,49 +25,48 @@
     padding: 0;
     list-style: none;
     align-items: center;
-  }
+}
 
-  .vmz-ui-breadcrumb__item {
+.vmz-ui-breadcrumb__item {
     display: inline-flex;
     align-items: center;
     gap: 0.55rem;
     font-weight: 600;
-  }
+}
 
-  .vmz-ui-breadcrumb__item:not(:last-child)::after {
-    content: '/';
+.vmz-ui-breadcrumb__item:not(:last-child)::after {
+    content: "/";
     color: var(--vmz-action-primary-active);
     opacity: 0.55;
     font-weight: 400;
-  }
+}
 
-  .vmz-ui-breadcrumb__link {
+.vmz-ui-breadcrumb__link {
     color: var(--vmz-action-primary-background);
     text-decoration: none;
-  }
+}
 
-  .vmz-ui-breadcrumb__link:focus-visible {
+.vmz-ui-breadcrumb__link:focus-visible {
     outline: none;
     box-shadow: 0 0 0 2px var(--vmz-focus-ring);
-  }
+}
 
-  .vmz-ui-breadcrumb__current {
+.vmz-ui-breadcrumb__current {
     color: var(--vmz-action-primary-active);
-  }
+}
 </style>
-
 <script client>
 /**
-* VMZ UI — Breadcrumb (UI5 Console Surface).
-* Parent owns items; last crumb typically has no href (current page).
-*/
+ * VMZ UI — Breadcrumb (UI5 Console Surface).
+ * Parent owns items; last crumb typically has no href (current page).
+ */
 export default class Breadcrumb {
-	public label: string = "Breadcrumb";
-	/** @type {{ id: string, title: string, href?: string }[]} */
-	public items: {
-		id: string;
-		title: string;
-		href?: string;
-	}[] = [];
+    public label: string = "Breadcrumb";
+    /** @type {{ id: string, title: string, href?: string }[]} */
+    public items: {
+        id: string;
+        title: string;
+        href?: string;
+    }[] = [];
 }
 </script>

package/src/components/BulkActions.vmz

@@ -1,20 +1,15 @@
 <template>
-  <div
-      class="vmz-ui-bulk-actions"
-      data-vmz-ui="bulk-actions"
-      role="region"
-      :aria-label="label"
-      :data-open="selectedCount ? 'true' : 'false'"
-    >
-      <p class="vmz-ui-bulk-actions__count" data-vmz-fixture="bulk-count">{{ countLabel }}</p>
-      <div class="vmz-ui-bulk-actions__actions">
-        <slot />
-      </div>
+    <div data-vmz-ui="bulk-actions" role="region" :aria-label="label" :data-open='selectedCount ? "true" : "false"' class="vmz-ui-bulk-actions">
+        <p data-vmz-fixture="bulk-count" class="vmz-ui-bulk-actions__count">
+            {{ countLabel }}
+        </p>
+        <div class="vmz-ui-bulk-actions__actions">
+            <slot />
+        </div>
     </div>
 </template>
-
 <style>
-  .vmz-ui-bulk-actions {
+.vmz-ui-bulk-actions {
     display: flex;
     flex-wrap: wrap;
     align-items: center;
@@ -24,34 +19,33 @@
     border: 1px solid var(--vmz-line-default);
     border-radius: var(--vmz-radius-md, 6px);
     background: transparent;
-  }
+}
 
-  /* Keep host+slot mounted so default slot projects at create time (not inside v-if). */
-  .vmz-ui-bulk-actions[data-open='false'] {
+/* Keep host+slot mounted so default slot projects at create time (not inside v-if). */
+.vmz-ui-bulk-actions[data-open="false"] {
     display: none;
-  }
+}
 
-  .vmz-ui-bulk-actions__count {
+.vmz-ui-bulk-actions__count {
     margin: 0;
     font-weight: 700;
     color: var(--vmz-action-primary-active);
-  }
+}
 
-  .vmz-ui-bulk-actions__actions {
+.vmz-ui-bulk-actions__actions {
     display: flex;
     flex-wrap: wrap;
     gap: 0.5rem;
-  }
+}
 </style>
-
 <script client>
 /**
-* VMZ UI — BulkActions (Console composition).
-* Hides when selectedCount is falsy but keeps the tree mounted so parent slot children project.
-*/
+ * VMZ UI — BulkActions (Console composition).
+ * Hides when selectedCount is falsy but keeps the tree mounted so parent slot children project.
+ */
 export default class BulkActions {
-	public label: string = "Bulk actions";
-	public selectedCount: number = 0;
-	public countLabel: string = "";
+    public label: string = "Bulk actions";
+    public selectedCount: number = 0;
+    public countLabel: string = "";
 }
 </script>