@vmz/ui 0.3.6 → 0.3.8

package/src/components/Field.vmz

@@ -1,115 +1,170 @@
-<template>
-    <div data-vmz-ui="field" :data-invalid="invalidAttr" class="vmz-ui-field">
-        <label v-if="label" :for="controlId" class="vmz-ui-field__label">
-            {{ label }}
-        </label>
-        <input :id="controlId" :type="type" :value="value" :min="min" :max="max" :step="step" :disabled="disabled" :aria-invalid="error ? 'true' : 'false'" :aria-describedby="describedBy" @input="onDomInput" class="vmz-ui-field__control" />
-        <p v-if="description" :id="descriptionId" class="vmz-ui-field__description">
-            {{ description }}
-        </p>
-        <p v-if="error" :id="errorId" role="alert" class="vmz-ui-field__error">
-            {{ error }}
-        </p>
-    </div>
-</template>
-<style>
-.vmz-ui-field {
-    display: flex;
-    flex-direction: column;
-    gap: 0.375rem;
-    max-width: 28rem;
-}
-
-.vmz-ui-field__label {
-    font: inherit;
-    font-weight: 500;
-    font-size: 0.875rem;
-    color: var(--vmz-text-ink, inherit);
-}
-
-.vmz-ui-field__control {
-    box-sizing: border-box;
-    width: 100%;
-    min-height: var(--vmz-control-height, 2rem);
-    font-family: var(--vmz-font-sans, inherit);
-    font-size: 0.875rem;
-    line-height: 1.5715;
-    padding: var(--vmz-density-control-padding-y, 0.25rem)
-        var(--vmz-density-control-padding-x, 0.75rem);
-    border: 1px solid var(--vmz-line-default, #d9d9d9);
-    border-radius: var(--vmz-radius-md, 6px);
-    background: var(--vmz-surface-paper, #fff);
-    color: var(--vmz-text-ink, inherit);
-    outline: none;
-    transition:
-        border-color var(--vmz-motion-control-duration, 120ms)
-            var(--vmz-motion-control-easing, cubic-bezier(0.4, 0, 0.2, 1)),
-        box-shadow var(--vmz-motion-control-duration, 120ms)
-            var(--vmz-motion-control-easing, cubic-bezier(0.4, 0, 0.2, 1));
-}
-
-.vmz-ui-field__control::placeholder {
-    color: var(--vmz-text-steel, #8c8c8c);
-    opacity: 1;
-}
-
-.vmz-ui-field[data-invalid="true"] .vmz-ui-field__control {
-    border-color: var(--vmz-status-danger-accent);
-}
-
-.vmz-ui-field__control:hover:not(:disabled):not(:focus-visible) {
-    border-color: var(--vmz-action-primary-background);
-}
-
-.vmz-ui-field__control:focus-visible {
-    border-color: var(--vmz-action-primary-background);
-    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
-}
-
-.vmz-ui-field__control:disabled {
-    opacity: 0.55;
-    cursor: not-allowed;
-    background: var(--vmz-surface-mist, #fafafa);
-}
-
-.vmz-ui-field__description {
-    margin: 0;
-    color: var(--vmz-text-steel, #8c8c8c);
-    font-size: 0.875rem;
-    line-height: 1.4;
-}
-
-.vmz-ui-field__error {
-    margin: 0;
-    color: var(--vmz-status-danger-foreground);
-    font-size: 0.875rem;
-}
-</style>
-<script client>
-/**
- * VMZ UI — Field (UI1).
- * Label / description / error association via for + aria-describedby.
- * Colors only from Style Theme semantic tokens.
- */
-export default class Field {
-    public label: string = "";
-    public description: string = "";
-    public error: string = "";
-    public value: string = "";
-    public type: string = "text";
-    public min: string = "";
-    public max: string = "";
-    public step: string = "";
-    public disabled: boolean = false;
-    public invalidAttr: string = "false";
-    public controlId: string = "vmz-field";
-    public descriptionId: string = "vmz-field-desc";
-    public errorId: string = "vmz-field-err";
-    public describedBy: string = "";
-    public onInput: ((e: Event) => void) | null = null;
-    onDomInput(e: Event) {
-        this.emit("input", e);
-        if (typeof this.onInput === "function") this.onInput(e);
-    }
-}
-</script>
+<template>
+    <div data-vmz-ui="field" :data-invalid="error ? 'true' : 'false'" class="vmz-ui-field">
+        <label v-if="label" :for="controlId" class="vmz-ui-field__label">
+            {{ label }}
+        </label>
+        <div :data-prefix="prefix ? 'true' : 'false'" :data-suffix="suffix ? 'true' : 'false'" class="vmz-ui-field__control-wrap">
+            <Icon v-if="prefix" :name="prefix" size="md" decorative class="vmz-ui-field__icon vmz-ui-field__icon--prefix" />
+            <input :id="controlId" :type="type" :value="value" :min="min" :max="max" :step="step" :placeholder="placeholder" :disabled="disabled" :readonly="readonly" :aria-invalid="error ? 'true' : 'false'" :aria-describedby="describedBy" @input="onDomInput" class="vmz-ui-field__control" />
+            <Icon v-if="suffix" :name="suffix" size="md" decorative class="vmz-ui-field__icon vmz-ui-field__icon--suffix" />
+        </div>
+        <p v-if="description" :id="descriptionId" class="vmz-ui-field__description">
+            {{ description }}
+        </p>
+        <p v-if="error" :id="errorId" role="alert" class="vmz-ui-field__error">
+            {{ error }}
+        </p>
+    </div>
+</template>
+<style>
+.vmz-ui-field {
+    display: flex;
+    flex-direction: column;
+    gap: var(--vmz-space-2);
+    width: 100%;
+    max-width: 28rem;
+}
+
+.vmz-ui-field__label {
+    font: inherit;
+    font-weight: 500;
+    font-size: 0.875rem;
+    line-height: 1.5715;
+    color: var(--vmz-text-ink);
+}
+
+.vmz-ui-field__control-wrap {
+    position: relative;
+    display: flex;
+    align-items: center;
+    width: 100%;
+}
+
+.vmz-ui-field__control {
+    box-sizing: border-box;
+    width: 100%;
+    min-height: var(--vmz-control-height);
+    font-family: inherit;
+    font-size: 0.875rem;
+    line-height: 1.5715;
+    padding: var(--vmz-density-control-padding-y) var(--vmz-density-control-padding-x);
+    border: 1px solid var(--vmz-line-default);
+    border-radius: var(--vmz-radius-lg);
+    background: var(--vmz-surface-paper);
+    color: var(--vmz-text-ink);
+    outline: none;
+    transition:
+        border-color var(--vmz-motion-control-duration) var(--vmz-motion-control-easing),
+        box-shadow var(--vmz-motion-control-duration) var(--vmz-motion-control-easing),
+        background-color var(--vmz-motion-control-duration) var(--vmz-motion-control-easing);
+}
+
+.vmz-ui-field__control-wrap[data-prefix="true"] .vmz-ui-field__control {
+    padding-left: calc(
+        var(--vmz-density-control-padding-x) + var(--vmz-space-4) + var(--vmz-space-1)
+    );
+}
+
+.vmz-ui-field__control-wrap[data-suffix="true"] .vmz-ui-field__control {
+    padding-right: calc(
+        var(--vmz-density-control-padding-x) + var(--vmz-space-4) + var(--vmz-space-1)
+    );
+}
+
+.vmz-ui-field__icon {
+    position: absolute;
+    top: 50%;
+    z-index: 1;
+    color: var(--vmz-text-tertiary);
+    transform: translateY(-50%);
+    pointer-events: none;
+}
+
+.vmz-ui-field__icon--prefix {
+    left: var(--vmz-density-control-padding-x);
+}
+
+.vmz-ui-field__icon--suffix {
+    right: var(--vmz-density-control-padding-x);
+}
+
+.vmz-ui-field__control::placeholder {
+    color: var(--vmz-text-tertiary);
+    opacity: 1;
+}
+
+.vmz-ui-field[data-invalid="true"] .vmz-ui-field__control {
+    border-color: var(--vmz-status-danger-accent);
+}
+
+.vmz-ui-field[data-invalid="true"] .vmz-ui-field__control:hover:not(:disabled),
+.vmz-ui-field[data-invalid="true"] .vmz-ui-field__control:focus-visible {
+    border-color: var(--vmz-status-danger-foreground);
+}
+
+.vmz-ui-field__control:hover:not(:disabled):not(:focus-visible) {
+    border-color: var(--vmz-action-primary-hover);
+}
+
+.vmz-ui-field__control:focus-visible {
+    border-color: var(--vmz-action-primary-background);
+    box-shadow: 0 0 0 3px var(--vmz-focus-ring);
+}
+
+.vmz-ui-field__control:disabled {
+    opacity: 0.6;
+    color: var(--vmz-text-muted);
+    cursor: not-allowed;
+    background: var(--vmz-surface-mist);
+}
+
+.vmz-ui-field__control:read-only {
+    cursor: default;
+    background: var(--vmz-surface-mist);
+}
+
+.vmz-ui-field__description {
+    margin: 0;
+    color: var(--vmz-text-steel);
+    font-size: 0.875rem;
+    line-height: 1.5715;
+}
+
+.vmz-ui-field__error {
+    margin: 0;
+    color: var(--vmz-status-danger-foreground);
+    font-size: 0.875rem;
+    line-height: 1.5715;
+}
+</style>
+<script client>
+/**
+ * VMZ UI — Field (UI1).
+ * Label / description / error association via for + aria-describedby.
+ * Colors only from Style Theme semantic tokens.
+ */
+export default class Field {
+    public label: string = "";
+    public description: string = "";
+    public error: string = "";
+    public value: string = "";
+    public type: string = "text";
+    public placeholder: string = "";
+    public prefix: string = "";
+    public suffix: string = "";
+    public min: string = "";
+    public max: string = "";
+    public step: string = "";
+    public disabled: boolean = false;
+    public readonly: boolean = false;
+    public controlId: string = "vmz-field";
+    public descriptionId: string = "vmz-field-desc";
+    public errorId: string = "vmz-field-err";
+    public describedBy: string = "";
+    public onInput: ((e: Event) => void) | null = null;
+    onDomInput(e: Event) {
+        this.emit("input", e);
+        if (typeof this.onInput === "function") this.onInput(e);
+    }
+}
+</script>

package/src/components/FilterBar.vmz

@@ -8,10 +8,40 @@
     display: flex;
     flex-wrap: wrap;
     align-items: flex-end;
-    gap: 0.75rem 1rem;
-    padding: 0.75rem 0.85rem;
+    gap: 0.75rem;
+    padding: 1rem;
     border: 1px solid var(--vmz-line-default);
-    border-radius: var(--vmz-radius-md, 6px);
+    border-radius: var(--vmz-radius-lg, 8px);
+    background: var(--vmz-surface-paper);
+}
+
+/* Action controls (Field + buttons) keep 32px height and hug the right edge. */
+.vmz-ui-filter-bar .vmz-ui-field__control,
+.vmz-ui-filter-bar .vmz-ui-select__control,
+.vmz-ui-filter-bar .vmz-ui-btn {
+    min-height: 2rem;
+}
+
+.vmz-ui-filter-bar > :has(.vmz-ui-btn),
+.vmz-ui-filter-bar > button.vmz-ui-btn {
+    margin-left: auto;
+}
+
+@media (max-width: 40rem) {
+    .vmz-ui-filter-bar {
+        flex-direction: column;
+        align-items: flex-start;
+        gap: 0.5rem;
+    }
+
+    .vmz-ui-filter-bar > * {
+        width: 100%;
+    }
+
+    .vmz-ui-filter-bar > :has(.vmz-ui-btn),
+    .vmz-ui-filter-bar > button.vmz-ui-btn {
+        margin-left: 0;
+    }
 }
 </style>
 <script client>
@@ -20,6 +50,6 @@
  * Dense filter/query landmark; parent projects Field + action controls.
  */
 export default class FilterBar {
-    public label: string = "Filters";
+    public label: string = "";
 }
 </script>

package/src/components/Flex.vmz

@@ -8,13 +8,15 @@
     display: flex;
     align-items: center;
     justify-content: flex-start;
-    gap: 0.75rem;
+    gap: var(--vmz-space-3);
     min-width: 0;
 }
+
 .vmz-ui-flex[data-vertical="true"] {
     flex-direction: column;
     align-items: stretch;
 }
+
 .vmz-ui-flex[data-wrap="true"] {
     flex-wrap: wrap;
 }

package/src/components/Footer.vmz

@@ -5,9 +5,12 @@
 </template>
 <style>
 .vmz-ui-footer {
-    padding: 1.5rem;
-    color: var(--vmz-text-steel, #646a73);
-    font-size: 0.875rem;
+    padding: var(--vmz-space-6, 2rem) var(--vmz-space-5, 1.5rem);
+    border-top: 1px solid var(--vmz-line-subtle);
+    background: var(--vmz-surface-paper);
+    color: var(--vmz-text-tertiary);
+    font-size: 0.8125rem;
+    line-height: 1.5;
     text-align: center;
 }
 </style>

package/src/components/Form.vmz

@@ -34,6 +34,9 @@
 /**
  * VMZ UI — Form (hand-written commercial form shell).
  * Parent owns field values + validation presentation; no parallel form store.
+ * `rules` + `values` are evaluated at submit only: failures emit `invalid`
+ * (field -> rule key: required | min | max | pattern | custom) and suppress
+ * `submit`. Copy stays author-supplied.
  * Native submit/reset guarded; browser HTML5 validation left off (data-novalidate + preventDefault).
  */
 export default class Form {
@@ -43,14 +46,52 @@ export default class Form {
     public describedBy: string = "";
     public disabled: boolean = false;
     public disabledAttr: string = "false";
+    public rules: Record<string, {
+        required?: boolean;
+        minLength?: number;
+        maxLength?: number;
+        pattern?: string;
+        test?: (value: string, values: Record<string, unknown>) => boolean;
+    }> = {};
+    public values: Record<string, unknown> = {};
     public onSubmit: (() => void) | null = null;
     public onReset: (() => void) | null = null;
+    public onInvalid: ((errors: Record<string, string>) => void) | null = null;
     onSubmitGuard(ev) {
         if (ev && typeof ev.preventDefault === "function") ev.preventDefault();
         if (this.disabled) return;
+        const errors = this.collectErrors();
+        if (Object.keys(errors).length > 0) {
+            this.emit("invalid", errors);
+            if (typeof this.onInvalid === "function") this.onInvalid(errors);
+            return;
+        }
         this.emit("submit");
         if (typeof this.onSubmit === "function") this.onSubmit();
     }
+    collectErrors() {
+        const errors: Record<string, string> = {};
+        const rules = this.rules || {};
+        const values = this.values || {};
+        for (const field of Object.keys(rules)) {
+            const rule = rules[field] || {};
+            const raw = values[field];
+            const text = raw == null ? "" : String(raw);
+            const filled = text.trim().length > 0;
+            if (rule.required && !filled) {
+                errors[field] = "required";
+            } else if (rule.minLength && filled && text.length < Number(rule.minLength)) {
+                errors[field] = "min";
+            } else if (rule.maxLength && text.length > Number(rule.maxLength)) {
+                errors[field] = "max";
+            } else if (rule.pattern && filled && !new RegExp(String(rule.pattern)).test(text)) {
+                errors[field] = "pattern";
+            } else if (typeof rule.test === "function" && !rule.test(text, values)) {
+                errors[field] = "custom";
+            }
+        }
+        return errors;
+    }
     onResetGuard(ev) {
         if (ev && typeof ev.preventDefault === "function") ev.preventDefault();
         if (this.disabled) return;

package/src/components/FormItem.vmz

@@ -1,79 +1,78 @@
-<template>
-    <div data-vmz-ui="form-item" :data-required="requiredAttr" :data-invalid="invalidAttr" class="vmz-ui-form-item">
-        <label v-if="label" :for="controlId" class="vmz-ui-form-item__label">
-            <span>
-                {{ label }}
-            </span>
-            <span v-if="required" aria-hidden="true" class="vmz-ui-form-item__required">
-                *
-            </span>
-        </label>
-        <div class="vmz-ui-form-item__control">
-            <slot />
-        </div>
-        <p v-if="description" :id="descriptionId" class="vmz-ui-form-item__description">
-            {{ description }}
-        </p>
-        <p v-if="error" :id="errorId" role="alert" class="vmz-ui-form-item__error">
-            {{ error }}
-        </p>
-    </div>
-</template>
-<style>
-.vmz-ui-form-item {
-    display: flex;
-    flex-direction: column;
-    gap: 0.375rem;
-    max-width: 28rem;
-}
-
-.vmz-ui-form-item__label {
-    display: inline-flex;
-    align-items: baseline;
-    gap: 0.25rem;
-    font: inherit;
-    font-weight: 600;
-}
-
-.vmz-ui-form-item__required {
-    color: var(--vmz-status-danger-accent);
-    font-weight: 700;
-}
-
-.vmz-ui-form-item__control {
-    min-width: 0;
-}
-
-.vmz-ui-form-item__description {
-    margin: 0;
-    opacity: 0.75;
-    font-size: 0.9em;
-}
-
-.vmz-ui-form-item__error {
-    margin: 0;
-    color: var(--vmz-status-danger-foreground);
-    font-size: 0.9em;
-}
-
-.vmz-ui-form-item[data-invalid="true"] .vmz-ui-form-item__control :where(input, select, textarea) {
-    border-color: var(--vmz-status-danger-accent);
-}
-</style>
-<script client>
-/**
- * VMZ UI — FormItem.
- * Label / description / error shell for slotted controls; parent owns validation strings.
- */
-export default class FormItem {
-    public label: string = "";
-    public description: string = "";
-    public error: string = "";
-    public required: boolean = false;
-    public requiredAttr: string = "false";
-    public invalidAttr: string = "false";
-    public controlId: string = "vmz-form-item";
-    public descriptionId: string = "vmz-form-item-desc";
-    public errorId: string = "vmz-form-item-err";
-}
-</script>
+<template>
+    <div data-vmz-ui="form-item" :data-required="required ? 'true' : 'false'" :data-invalid="error ? 'true' : 'false'" class="vmz-ui-form-item">
+        <label v-if="label" :for="controlId" class="vmz-ui-form-item__label">
+            <span>
+                {{ label }}
+            </span>
+            <span v-if="required" aria-hidden="true" class="vmz-ui-form-item__required">
+                *
+            </span>
+        </label>
+        <div class="vmz-ui-form-item__control">
+            <slot />
+        </div>
+        <p v-if="description" :id="descriptionId" class="vmz-ui-form-item__description">
+            {{ description }}
+        </p>
+        <p v-if="error" :id="errorId" role="alert" class="vmz-ui-form-item__error">
+            {{ error }}
+        </p>
+    </div>
+</template>
+<style>
+.vmz-ui-form-item {
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+    width: 100%;
+    max-width: 28rem;
+}
+
+.vmz-ui-form-item__label {
+    display: inline-flex;
+    align-items: baseline;
+    gap: 0.25rem;
+    font: inherit;
+    font-weight: 600;
+}
+
+.vmz-ui-form-item__required {
+    color: var(--vmz-status-danger-accent);
+    font-weight: 700;
+}
+
+.vmz-ui-form-item__control {
+    min-width: 0;
+}
+
+.vmz-ui-form-item__description {
+    margin: 0;
+    opacity: 0.75;
+    font-size: 0.9em;
+}
+
+.vmz-ui-form-item__error {
+    margin: 0;
+    color: var(--vmz-status-danger-foreground);
+    font-size: 0.9em;
+}
+
+.vmz-ui-form-item[data-invalid="true"] .vmz-ui-form-item__control :where(input, select, textarea) {
+    border-color: var(--vmz-status-danger-accent);
+}
+</style>
+<script client>
+/**
+ * VMZ UI — FormItem.
+ * Label / description / error shell for slotted controls; parent owns validation strings.
+ */
+export default class FormItem {
+    public label: string = "";
+    public description: string = "";
+    public error: string = "";
+    public required: boolean = false;
+    public controlId: string = "vmz-form-item";
+    public descriptionId: string = "vmz-form-item-desc";
+    public errorId: string = "vmz-form-item-err";
+}
+</script>

package/src/components/Grid.vmz

@@ -1,5 +1,5 @@
 <template>
-    <div data-vmz-ui="grid" class="vmz-ui-grid" :style="'--ui-grid-columns:' + columns + ';--ui-grid-gap:' + gap">
+    <div data-vmz-ui="grid" :data-columns="columns" class="vmz-ui-grid" :style="'--ui-grid-columns:' + columns + ';--ui-grid-gap:' + gap">
         <slot />
     </div>
 </template>
@@ -7,13 +7,16 @@
 .vmz-ui-grid {
     display: grid;
     grid-template-columns: repeat(var(--ui-grid-columns, 3), minmax(0, 1fr));
-    gap: var(--ui-grid-gap, 1rem);
+    gap: var(--ui-grid-gap, var(--vmz-space-4));
+    align-items: stretch;
 }
+
 @media (max-width: 900px) {
     .vmz-ui-grid {
         grid-template-columns: repeat(2, minmax(0, 1fr));
     }
 }
+
 @media (max-width: 600px) {
     .vmz-ui-grid {
         grid-template-columns: 1fr;
@@ -23,6 +26,6 @@
 <script client>
 export default class Grid {
     public columns: number = 3;
-    public gap: string = "1rem";
+    public gap: string = "var(--vmz-space-4)";
 }
 </script>