@pienter/ui 0.23.0 → 0.24.0

package/CHANGELOG.md

@@ -2,6 +2,21 @@
 
 ## Unreleased
 
+## 0.24.0 - 2026-09-16
+### Added
+
+- `RecordForm` and `RecordFields` gain two built-in field types, so a price
+  or a sale window no longer needs a `#field:name` slot repeating label,
+  hint, error and id wiring by hand. `{ type: 'number', min?, max?, step?,
+  placeholder?, steppers? }` renders `NumberField`; only finite numbers
+  display, and clearing the input writes `null` into the record rather than
+  `NaN`, since the payload is JSON. `{ type: 'date' | 'datetime-local' |
+  'time', min?, max?, step? }` renders `DateInput` with the ISO string shapes
+  it documents. Both honour `busy`, `disabled`, `required` and `readonly`
+  like every other built-in and can still be replaced through their slot.
+- `shopping-cart` icon, so a commerce module or webshop entry no longer has
+  to borrow `layers`.
+
 ## 0.23.0 - 2026-09-16
 ### Added
 

package/CONVENTIONS.md

@@ -1545,7 +1545,10 @@ and request state. Index's compact row spacing uses
 RecordForm emits detached JSON snapshots, preserving every supplied property.
 Consumers construct an explicit writable object from backend records. Typed path
 segments identify nested fields and array indices; fields display issues for
-their path and descendants. The form summary retains unmatched issues.
+their path and descendants. The form summary retains unmatched issues. Built-in
+field types map one to one onto the form primitives: text, email, textarea,
+select, checkbox, image, number (NumberField, cleared writes `null`) and
+date, datetime-local and time (DateInput, ISO strings).
 `--pui-record-form-columns` customizes the field grid, defaulting to one column.
 
 RecordForm's `fields` slot replaces its default RecordFields rendering for

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

@@ -8,6 +8,8 @@ import TextInput from '../text-input/TextInput.vue';
 import PuiTextarea from '../textarea/Textarea.vue';
 import PuiSelect from '../select/Select.vue';
 import Checkbox from '../checkbox/Checkbox.vue';
+import NumberField from '../number-field/NumberField.vue';
+import DateInput from '../date-input/DateInput.vue';
 import {
     readPath,
     updatePath,
@@ -46,6 +48,21 @@ function textFor(field: RecordFormField): string {
     const value = valueFor(field);
     return typeof value === 'string' ? value : '';
 }
+function numberFor(field: RecordFormField): number | undefined {
+    const value = valueFor(field);
+    return typeof value === 'number' && Number.isFinite(value)
+        ? value
+        : undefined;
+}
+function isDateType(
+    field: RecordFormField,
+): field is RecordFormField & { type: 'date' | 'datetime-local' | 'time' } {
+    return (
+        field.type === 'date' ||
+        field.type === 'datetime-local' ||
+        field.type === 'time'
+    );
+}
 function altFor(field: RecordFormField): string {
     const name = field.type === 'image' ? field.altName : undefined;
     if (!name) return '';
@@ -116,6 +133,41 @@ function update(field: RecordFormField, value: unknown): void {
                     :errors="errors"
                     @update:model-value="update(field, $event)"
                 />
+                <NumberField
+                    v-else-if="field.type === 'number'"
+                    :label="field.label"
+                    :name="JSON.stringify(pathFor(field))"
+                    :model-value="numberFor(field)"
+                    :min="field.min"
+                    :max="field.max"
+                    :step="field.step"
+                    :steppers="field.steppers"
+                    :hint="field.hint"
+                    :required="field.required"
+                    :disabled="busy || field.disabled"
+                    :readonly="readonly"
+                    :placeholder="field.placeholder"
+                    :errors="errors"
+                    @update:model-value="
+                        update(field, Number.isNaN($event) ? null : $event)
+                    "
+                />
+                <DateInput
+                    v-else-if="isDateType(field)"
+                    :label="field.label"
+                    :name="JSON.stringify(pathFor(field))"
+                    :model-value="textFor(field)"
+                    :type="field.type"
+                    :min="field.min"
+                    :max="field.max"
+                    :step="field.step"
+                    :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>

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

@@ -30,5 +30,21 @@ export type RecordFormField = RecordFieldBase &
               altName?: string;
           }
         | { type: 'checkbox' }
+        | {
+              type: 'number';
+              min?: number;
+              max?: number;
+              step?: number | string;
+              placeholder?: string;
+              /** NumberField's +/− buttons; on unless set to `false`. */
+              steppers?: boolean;
+          }
+        | {
+              type: 'date' | 'datetime-local' | 'time';
+              /** Bounds in the ISO shape of the value, as on DateInput. */
+              min?: string;
+              max?: string;
+              step?: number | string;
+          }
         | { type: 'custom' }
     );

package/icons/index.ts

@@ -43,6 +43,7 @@ import tool from './tool.js';
 import trash from './trash.js';
 import sidebarLeft from './sidebar-left.js';
 import sidebarRight from './sidebar-right.js';
+import shoppingCart from './shopping-cart.js';
 
 export const icons = {
     info: info,
@@ -90,6 +91,7 @@ export const icons = {
     trash: trash,
     'sidebar-left': sidebarLeft,
     'sidebar-right': sidebarRight,
+    'shopping-cart': shoppingCart,
 } as const;
 
 export type IconName = keyof typeof icons;

package/icons/shopping-cart.ts

@@ -0,0 +1 @@
+export default '<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" stroke="var(--pui-icon-clr, currentColor)" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" viewBox="0 0 24 24"><circle cx="8" cy="21" r="1"/><circle cx="19" cy="21" r="1"/><path d="M2.05 2.05h2l2.66 12.42a2 2 0 0 0 2 1.58h9.78a2 2 0 0 0 1.95-1.57l1.65-7.43H5.12"/></svg>';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pienter/ui",
-  "version": "0.23.0",
+  "version": "0.24.0",
   "description": "Shared Pienter UI components, styles, icons, and browser utilities.",
   "type": "module",
   "license": "MIT",