@pienter/ui 0.10.0 → 0.13.0

package/components/form/date-input/DateInput.vue

@@ -1,5 +1,10 @@
 <template>
-    <div class="pui-field" :data-status="computedStatus">
+    <div
+        class="pui-field"
+        :data-layout="layout === 'inline' ? 'inline' : undefined"
+        :data-readonly="readonly ? 'true' : undefined"
+        :data-status="computedStatus"
+    >
         <label class="pui-field__label" :for="inputId"
             >{{ label
             }}<span
@@ -21,6 +26,7 @@
             :step="step"
             :required="required"
             :disabled="disabled"
+            :readonly="readonly"
             :aria-invalid="hasErrors ? 'true' : undefined"
             :aria-describedby="describedBy"
             @input="
@@ -80,9 +86,13 @@ const props = withDefaults(
         step?: number | string;
         required?: boolean;
         disabled?: boolean;
+        /** Read-only: the value shows in the field chrome, stays focusable and cannot be edited. */
+        readonly?: boolean;
         hint?: string;
         errors?: string[];
         status?: 'error' | 'success';
+        /** `inline` puts the label beside the control; hint and errors wrap below. */
+        layout?: 'stacked' | 'inline';
     }>(),
     {
         id: undefined,
@@ -93,9 +103,11 @@ const props = withDefaults(
         step: undefined,
         required: false,
         disabled: false,
+        readonly: false,
         hint: undefined,
         errors: () => [],
         status: undefined,
+        layout: 'stacked',
     },
 );
 

package/components/form/form/Form.vue

@@ -22,7 +22,7 @@
             {{ statusMessage }}
         </div>
 
-        <div class="pui-form__actions">
+        <div v-if="!readonly" class="pui-form__actions">
             <slot name="actions">
                 <button
                     class="pui-btn"
@@ -52,6 +52,8 @@ const props = withDefaults(
     defineProps<{
         submitLabel?: string;
         busy?: boolean;
+        /** Read-only presentation: renders no actions row and ignores every submit, Enter included. */
+        readonly?: boolean;
         /** Top-level errors not tied to a specific field. */
         errors?: string[];
         /** Server-side per-field errors. Consumers SHALL replace the object reference rather than mutate in place. */
@@ -64,6 +66,7 @@ const props = withDefaults(
     {
         submitLabel: 'Submit',
         busy: false,
+        readonly: false,
         errors: () => [],
         fieldErrors: () => ({}),
         statusMessage: undefined,
@@ -105,7 +108,7 @@ const allFieldErrors = computed<Record<string, string[]>>(() => {
 
 function handleSubmit(): void {
     const formEl = formRef.value;
-    if (!formEl) return;
+    if (!formEl || props.readonly) return;
 
     const formData = new FormData(formEl);
 

package/components/form/number-field/NumberField.vue

@@ -1,5 +1,10 @@
 <template>
-    <div class="pui-field" :data-status="computedStatus">
+    <div
+        class="pui-field"
+        :data-layout="layout === 'inline' ? 'inline' : undefined"
+        :data-readonly="readonly ? 'true' : undefined"
+        :data-status="computedStatus"
+    >
         <label class="pui-field__label" :for="inputId"
             >{{ label
             }}<span
@@ -20,16 +25,17 @@
                 :min="min"
                 :max="max"
                 :step="step"
-                :placeholder="placeholder"
+                :placeholder="readonly ? undefined : placeholder"
                 :required="required"
                 :disabled="disabled"
+                :readonly="readonly"
                 :value="modelValue"
                 :aria-invalid="hasErrors ? 'true' : undefined"
                 :aria-describedby="describedBy"
                 @input="onInput"
                 @blur="emit('blur')"
             />
-            <div class="pui-number-field__steppers">
+            <div v-if="!readonly" class="pui-number-field__steppers">
                 <button
                     type="button"
                     class="pui-number-field__step"
@@ -87,9 +93,13 @@ const props = withDefaults(
         placeholder?: string;
         required?: boolean;
         disabled?: boolean;
+        /** Read-only: the value shows in the field chrome without steppers, stays focusable and cannot be edited. */
+        readonly?: boolean;
         hint?: string;
         errors?: string[];
         status?: 'error' | 'success';
+        /** `inline` puts the label beside the control; hint and errors wrap below. */
+        layout?: 'stacked' | 'inline';
     }>(),
     {
         id: undefined,
@@ -101,9 +111,11 @@ const props = withDefaults(
         placeholder: undefined,
         required: false,
         disabled: false,
+        readonly: false,
         hint: undefined,
         errors: () => [],
         status: undefined,
+        layout: 'stacked',
     },
 );
 
@@ -142,7 +154,7 @@ function onInput(event: Event): void {
 }
 
 function handleStep(direction: 'decrement' | 'increment'): void {
-    if (props.disabled) return;
+    if (props.disabled || props.readonly) return;
     const input = inputRef.value;
     if (!input) return;
     if (direction === 'increment') {

package/components/form/number-field/number-field.css

@@ -42,6 +42,12 @@
         margin: 0;
     }
 
+    /* Read-only renders no stepper column, so the input keeps its own corners. */
+    .pui-field[data-readonly='true'] .pui-number-field__input {
+        border-top-right-radius: var(--radius-sm);
+        border-bottom-right-radius: var(--radius-sm);
+    }
+
     /* Stacked column for the +/- buttons. Sits flush against the
    * input's right edge; each button takes half the column height. */
     .pui-number-field__steppers {

package/components/form/radio-group/RadioGroup.vue

@@ -3,8 +3,10 @@
         v-bind="$attrs"
         :id="fieldId"
         class="pui-field"
+        :data-readonly="readonly ? 'true' : undefined"
         :data-status="computedStatus"
         role="radiogroup"
+        :aria-readonly="readonly ? 'true' : undefined"
         :aria-describedby="describedBy"
         :aria-invalid="hasErrors ? 'true' : undefined"
     >
@@ -31,7 +33,9 @@
                     :aria-checked="
                         modelValue === option.value ? 'true' : 'false'
                     "
-                    @change="emit('update:modelValue', option.value)"
+                    @click="onClick"
+                    @keydown="onKeydown"
+                    @change="onChange(option.value)"
                 />
                 <span class="pui-radio-group__label">{{ option.label }}</span>
             </label>
@@ -62,6 +66,8 @@ const props = withDefaults(
         options: RadioOption[];
         modelValue?: string;
         disabled?: boolean;
+        /** Read-only: `aria-readonly` on the group, the checked radio stays focusable, selection is ignored. */
+        readonly?: boolean;
         orientation?: 'vertical' | 'horizontal';
         hint?: string;
         errors?: string[];
@@ -71,6 +77,7 @@ const props = withDefaults(
         id: undefined,
         modelValue: undefined,
         disabled: false,
+        readonly: false,
         orientation: 'vertical',
         hint: undefined,
         errors: () => [],
@@ -100,6 +107,21 @@ const describedBy = computed(() => {
     if (hasErrors.value) ids.push(errorsId);
     return ids.length > 0 ? ids.join(' ') : undefined;
 });
+
+// Cancelling `click` keeps the native checked state and fires no `change`;
+// arrow keys move the selection without a click, so they are cancelled too.
+function onClick(event: MouseEvent): void {
+    if (props.readonly) event.preventDefault();
+}
+
+function onKeydown(event: KeyboardEvent): void {
+    if (props.readonly && event.key.startsWith('Arrow')) event.preventDefault();
+}
+
+function onChange(value: string): void {
+    if (props.readonly) return;
+    emit('update:modelValue', value);
+}
 </script>
 
 <style>

package/components/form/radio-group/radio-group.css

@@ -102,6 +102,15 @@
         cursor: not-allowed;
     }
 
+    .pui-field[data-readonly='true'] .pui-radio-group__item,
+    .pui-field[data-readonly='true'] .pui-radio {
+        cursor: default;
+    }
+
+    .pui-field[data-readonly='true'] .pui-radio:not(:checked) {
+        background: var(--bg-clr-surface-2);
+    }
+
     /* Status-driven recolour from the parent pui-field wrapper. */
     .pui-field[data-status='error'] .pui-radio {
         border-color: var(--border-clr-danger);

package/components/form/record-form/RecordFields.vue

@@ -23,8 +23,10 @@ const props = withDefaults(
         fields: readonly RecordFormField[];
         issues?: readonly ValidationIssue[];
         busy?: boolean;
+        /** View mode: every field renders read-only and `update` is a no-op. */
+        readonly?: boolean;
     }>(),
-    { issues: () => [], busy: false },
+    { issues: () => [], busy: false, readonly: false },
 );
 const emit = defineEmits<{
     'update:modelValue': [value: T];
@@ -44,8 +46,14 @@ function textFor(field: RecordFormField): string {
     const value = valueFor(field);
     return typeof value === 'string' ? value : '';
 }
+function altFor(field: RecordFormField): string {
+    const name = field.type === 'image' ? field.altName : undefined;
+    if (!name) return '';
+    const sibling = props.fields.find((other) => other.name === name);
+    return textFor(sibling ?? { name, label: '' });
+}
 function update(field: RecordFormField, value: unknown): void {
-    if (props.busy || field.disabled) return;
+    if (props.busy || props.readonly || field.disabled) return;
     const path = pathFor(field);
     emit('update:modelValue', updatePath(props.modelValue, path, value));
     emit('field-change', path);
@@ -66,6 +74,7 @@ function update(field: RecordFormField, value: unknown): void {
                 :update="(value: unknown) => update(field, value)"
                 :errors="errors"
                 :disabled="busy || !!field.disabled"
+                :readonly="readonly"
             >
                 <PuiTextarea
                     v-if="field.type === 'textarea'"
@@ -75,6 +84,7 @@ function update(field: RecordFormField, value: unknown): void {
                     :hint="field.hint"
                     :required="field.required"
                     :disabled="busy || field.disabled"
+                    :readonly="readonly"
                     :placeholder="field.placeholder"
                     :rows="field.rows"
                     :errors="errors"
@@ -88,6 +98,7 @@ function update(field: RecordFormField, value: unknown): void {
                     :hint="field.hint"
                     :required="field.required"
                     :disabled="busy || field.disabled"
+                    :readonly="readonly"
                     :placeholder="field.placeholder"
                     :options="field.options"
                     :errors="errors"
@@ -101,9 +112,35 @@ function update(field: RecordFormField, value: unknown): void {
                     :hint="field.hint"
                     :required="field.required"
                     :disabled="busy || field.disabled"
+                    :readonly="readonly"
                     :errors="errors"
                     @update:model-value="update(field, $event)"
                 />
+                <template v-else-if="field.type === 'image'">
+                    <div v-if="readonly" class="pui-field" data-readonly="true">
+                        <span class="pui-field__label">{{ field.label }}</span>
+                        <img
+                            v-if="textFor(field)"
+                            class="pui-record-fields__image"
+                            :src="textFor(field)"
+                            :alt="altFor(field)"
+                        />
+                        <p v-else class="pui-record-fields__empty">—</p>
+                    </div>
+                    <TextInput
+                        v-else
+                        :label="field.label"
+                        :name="JSON.stringify(pathFor(field))"
+                        :model-value="textFor(field)"
+                        type="url"
+                        :hint="field.hint"
+                        :required="field.required"
+                        :disabled="busy || field.disabled"
+                        :placeholder="field.placeholder"
+                        :errors="errors"
+                        @update:model-value="update(field, $event)"
+                    />
+                </template>
                 <TextInput
                     v-else-if="field.type !== 'custom'"
                     :label="field.label"
@@ -113,6 +150,7 @@ function update(field: RecordFormField, value: unknown): void {
                     :hint="field.hint"
                     :required="field.required"
                     :disabled="busy || field.disabled"
+                    :readonly="readonly"
                     :placeholder="field.placeholder"
                     :autocomplete="field.autocomplete"
                     :errors="errors"

package/components/form/record-form/RecordForm.vue

@@ -23,6 +23,8 @@ const props = withDefaults(
         issues?: readonly ValidationIssue[];
         errors?: string[];
         busy?: boolean;
+        /** View mode: fields render read-only, the actions row is gone and `submit` never fires. */
+        readonly?: boolean;
         submitLabel?: string;
         statusMessage?: string;
     }>(),
@@ -30,6 +32,7 @@ const props = withDefaults(
         issues: () => [],
         errors: () => [],
         busy: false,
+        readonly: false,
         submitLabel: 'Save changes',
         statusMessage: undefined,
     },
@@ -64,7 +67,8 @@ const summary = computed(() => [
 ]);
 
 function submit(): void {
-    if (!props.busy) emit('submit', cloneRecord(props.modelValue));
+    if (props.busy || props.readonly) return;
+    emit('submit', cloneRecord(props.modelValue));
 }
 </script>
 
@@ -72,6 +76,7 @@ function submit(): void {
     <Form
         class="pui-record-form"
         :busy="busy"
+        :readonly="readonly"
         :errors="summary"
         :field-errors="fieldErrors"
         :status-message="statusMessage"
@@ -84,6 +89,7 @@ function submit(): void {
                 :fields="fields"
                 :issues="issues"
                 :busy="busy"
+                :readonly="readonly"
                 @update:model-value="emit('update:modelValue', $event)"
                 @field-change="emit('field-change', $event)"
             >

package/components/form/record-form/record-form.css

@@ -12,4 +12,18 @@
         gap: var(--space-s);
         min-inline-size: 0;
     }
+
+    .pui-record-fields__image {
+        justify-self: start;
+        max-inline-size: 100%;
+        max-block-size: var(--space-3xl);
+        border: var(--stroke-sm) solid var(--border-clr-subtle);
+        border-radius: var(--radius-sm);
+        background: var(--bg-clr-surface-2);
+    }
+
+    .pui-record-fields__empty {
+        margin: 0;
+        color: var(--text-clr-muted);
+    }
 }

package/components/form/record-form/types.ts

@@ -23,6 +23,12 @@ export type RecordFormField = RecordFieldBase &
               options: { value: string; label: string }[];
               placeholder?: string;
           }
+        | {
+              type: 'image';
+              placeholder?: string;
+              /** `name` of the field in this list holding the alternative text. */
+              altName?: string;
+          }
         | { type: 'checkbox' }
         | { type: 'custom' }
     );

package/components/form/select/Select.vue

@@ -1,5 +1,10 @@
 <template>
-    <div class="pui-field" :data-status="computedStatus">
+    <div
+        class="pui-field"
+        :data-layout="layout === 'inline' ? 'inline' : undefined"
+        :data-readonly="readonly ? 'true' : undefined"
+        :data-status="computedStatus"
+    >
         <label v-if="label" class="pui-field__label" :for="inputId"
             >{{ label
             }}<span
@@ -18,14 +23,12 @@
                 :required="required"
                 :disabled="disabled"
                 :value="modelValue"
+                :aria-readonly="readonly ? 'true' : undefined"
                 :aria-invalid="hasErrors ? 'true' : undefined"
                 :aria-describedby="describedBy"
-                @change="
-                    emit(
-                        'update:modelValue',
-                        ($event.target as HTMLSelectElement).value,
-                    )
-                "
+                @change="onChange"
+                @mousedown="onMousedown"
+                @keydown="onKeydown"
             >
                 <option v-if="placeholder" value="" disabled hidden>
                     {{ placeholder }}
@@ -69,11 +72,15 @@ const props = withDefaults(
         name?: string;
         required?: boolean;
         disabled?: boolean;
+        /** Read-only: `aria-readonly`, still focusable, but the list does not open and changes are ignored. */
+        readonly?: boolean;
         options: { value: string; label: string }[];
         placeholder?: string;
         hint?: string;
         errors?: string[];
         status?: 'error' | 'success';
+        /** `inline` puts the label beside the control; hint and errors wrap below. */
+        layout?: 'stacked' | 'inline';
     }>(),
     {
         id: undefined,
@@ -82,10 +89,12 @@ const props = withDefaults(
         name: undefined,
         required: false,
         disabled: false,
+        readonly: false,
         placeholder: undefined,
         hint: undefined,
         errors: () => [],
         status: undefined,
+        layout: 'stacked',
     },
 );
 
@@ -111,6 +120,30 @@ const describedBy = computed(() => {
     if (hasErrors.value) ids.push(errorsId);
     return ids.length > 0 ? ids.join(' ') : undefined;
 });
+
+function onChange(event: Event): void {
+    const target = event.target as HTMLSelectElement;
+    if (props.readonly) {
+        target.value = props.modelValue ?? '';
+        return;
+    }
+    emit('update:modelValue', target.value);
+}
+
+// A `<select>` has no `readonly`: keep it focusable but stop the picker
+// from opening and the keys that change the value without opening it.
+function onMousedown(event: MouseEvent): void {
+    if (!props.readonly) return;
+    event.preventDefault();
+    (event.currentTarget as HTMLSelectElement).focus();
+}
+
+function onKeydown(event: KeyboardEvent): void {
+    if (!props.readonly) return;
+    if (event.key === 'Tab' || event.key === 'Escape') return;
+    if (event.metaKey || event.ctrlKey) return;
+    event.preventDefault();
+}
 </script>
 
 <style>

package/components/form/select/select.css

@@ -38,6 +38,11 @@
         cursor: not-allowed;
     }
 
+    .pui-field[data-readonly='true'] .pui-select__control {
+        background: var(--bg-clr-surface-2);
+        cursor: default;
+    }
+
     .pui-select__caret {
         position: absolute;
         right: 0.85em;

package/components/form/switch/Switch.vue

@@ -1,5 +1,10 @@
 <template>
-    <div class="pui-field" data-layout="inline" :data-status="computedStatus">
+    <div
+        class="pui-field"
+        data-layout="inline"
+        :data-readonly="readonly ? 'true' : undefined"
+        :data-status="computedStatus"
+    >
         <input
             v-bind="$attrs"
             :id="inputId"
@@ -10,14 +15,11 @@
             :checked="modelValue"
             :disabled="disabled"
             :aria-checked="modelValue ? 'true' : 'false'"
+            :aria-readonly="readonly ? 'true' : undefined"
             :aria-invalid="hasErrors ? 'true' : undefined"
             :aria-describedby="describedBy"
-            @change="
-                emit(
-                    'update:modelValue',
-                    ($event.target as HTMLInputElement).checked,
-                )
-            "
+            @click="onClick"
+            @change="onChange"
         />
         <label class="pui-field__label" :for="inputId">{{ label }}</label>
         <p v-if="hint" :id="hintId" class="pui-field__hint">{{ hint }}</p>
@@ -45,6 +47,8 @@ const props = withDefaults(
         modelValue?: boolean;
         name?: string;
         disabled?: boolean;
+        /** Read-only: `aria-readonly`, still focusable, but toggling is ignored. */
+        readonly?: boolean;
         hint?: string;
         errors?: string[];
         status?: 'error' | 'success';
@@ -54,6 +58,7 @@ const props = withDefaults(
         modelValue: false,
         name: undefined,
         disabled: false,
+        readonly: false,
         hint: undefined,
         errors: () => [],
         status: undefined,
@@ -82,6 +87,17 @@ const describedBy = computed(() => {
     if (hasErrors.value) ids.push(errorsId);
     return ids.length > 0 ? ids.join(' ') : undefined;
 });
+
+// Cancelling `click` keeps the native checked state and fires no `change`;
+// the label's forwarded click and the Space key arrive here too.
+function onClick(event: MouseEvent): void {
+    if (props.readonly) event.preventDefault();
+}
+
+function onChange(event: Event): void {
+    if (props.readonly) return;
+    emit('update:modelValue', (event.target as HTMLInputElement).checked);
+}
 </script>
 
 <style>

package/components/form/switch/switch.css

@@ -47,6 +47,10 @@
         cursor: not-allowed;
     }
 
+    .pui-field[data-readonly='true'] .pui-switch {
+        cursor: default;
+    }
+
     /* Status-driven recolour from the parent pui-field wrapper. */
     .pui-field[data-status='error'] .pui-switch {
         border-color: var(--border-clr-danger);
@@ -56,9 +60,19 @@
         background: var(--bg-clr-success, var(--bg-clr-brand));
     }
 
+    /* The label is the click target for the switch, so it reads as one. */
+    .pui-field:has(.pui-switch) .pui-field__label {
+        cursor: pointer;
+        user-select: none;
+    }
+
     /* Disable the cursor + label colour when the input is disabled. */
     .pui-field:has(.pui-switch:disabled) .pui-field__label {
         color: var(--text-clr-muted);
         cursor: not-allowed;
     }
+
+    .pui-field[data-readonly='true']:has(.pui-switch) .pui-field__label {
+        cursor: default;
+    }
 }