@happyvertical/smrt-svelte 0.55.6 → 0.55.8

package/dist/components/screens/values.js

@@ -0,0 +1,289 @@
+/**
+ * Pure value handling for the manifest-derived record screens (#3718):
+ * draft <-> payload conversion for edit forms and display formatting for list
+ * and view screens. No DOM and no i18n: components map error codes and the
+ * Yes/No labels through `useI18n`.
+ *
+ * Money is integer minor units end to end. Editing shows major units, but the
+ * conversion is exact string math (never `* 100` on a float), and anything
+ * that is not a JavaScript-safe integer is rejected rather than rounded.
+ */
+import { ISO_4217_MINOR_UNITS } from '@happyvertical/smrt-ui/currency';
+/** Currency used for money fields when the screen is not told otherwise. */
+export const DEFAULT_SCREEN_CURRENCY = 'USD';
+/** Decimal places of a currency's minor unit (2 for an unknown code). */
+export function currencyMinorDigits(currency) {
+    return ISO_4217_MINOR_UNITS.get(currency.trim().toUpperCase()) ?? 2;
+}
+/** `1999`, 2 digits -> `19.99`. Exact; `null` for a non-safe integer. */
+export function minorUnitsToMajorString(minor, digits) {
+    if (typeof minor !== 'number' || !Number.isSafeInteger(minor))
+        return null;
+    const negative = minor < 0;
+    const absolute = String(Math.abs(minor));
+    let text;
+    if (digits <= 0) {
+        text = absolute;
+    }
+    else {
+        const padded = absolute.padStart(digits + 1, '0');
+        text = `${padded.slice(0, -digits)}.${padded.slice(-digits)}`;
+    }
+    return negative ? `-${text}` : text;
+}
+/**
+ * `19.99`, 2 digits -> `1999`. Accepts a leading sign and `,` grouping;
+ * rejects more fraction digits than the currency has and non-safe integers.
+ */
+export function majorStringToMinorUnits(text, digits) {
+    const cleaned = text.trim().replace(/[,\s]/g, '');
+    const pattern = digits > 0 ? /^(-?)(\d+)(?:\.(\d*))?$/ : /^(-?)(\d+)$/;
+    const match = pattern.exec(cleaned);
+    if (!match)
+        return null;
+    const [, sign, whole, fraction = ''] = match;
+    if (fraction.length > Math.max(0, digits))
+        return null;
+    const minor = Number(`${whole}${fraction.padEnd(Math.max(0, digits), '0')}`);
+    if (!Number.isSafeInteger(minor))
+        return null;
+    return sign === '-' && minor !== 0 ? -minor : minor;
+}
+function pad(value) {
+    return String(value).padStart(2, '0');
+}
+/** A record datetime as a `datetime-local` input value (local time). */
+export function toDatetimeLocal(value) {
+    if (value === null || value === undefined || value === '')
+        return '';
+    const date = value instanceof Date ? value : new Date(value);
+    if (Number.isNaN(date.getTime()))
+        return '';
+    return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(date.getDate())}T${pad(date.getHours())}:${pad(date.getMinutes())}`;
+}
+/** One field's value as the draft representation its control edits. */
+export function toDraftValue(field, value, context = {}) {
+    if (field.kind === 'boolean')
+        return value === true || value === 'true';
+    if (value === null || value === undefined)
+        return '';
+    switch (field.kind) {
+        case 'money':
+            return (minorUnitsToMajorString(value, currencyMinorDigits(context.currency ?? DEFAULT_SCREEN_CURRENCY)) ?? '');
+        case 'datetime':
+            return toDatetimeLocal(value);
+        case 'json':
+            return typeof value === 'string' ? value : JSON.stringify(value, null, 2);
+        default:
+            return String(value);
+    }
+}
+/** Draft for editing an existing record. */
+export function draftFromRecord(fields, record, context = {}) {
+    const draft = {};
+    for (const field of fields) {
+        draft[field.name] = toDraftValue(field, record[field.name], context);
+    }
+    return draft;
+}
+/**
+ * Draft for a new record: the resolved policy default when one resolved
+ * (an explicit `null` default included), else the manifest default.
+ */
+export function draftForCreate(fields, policy, context = {}) {
+    const draft = {};
+    for (const field of fields) {
+        const policyField = policy?.fields[field.name];
+        const seeded = policyField?.hasDefault === true
+            ? policyField.defaultValue
+            : field.definition.default;
+        draft[field.name] = toDraftValue(field, seeded, context);
+    }
+    return draft;
+}
+/**
+ * Convert a draft into a write payload. An empty optional text field becomes
+ * `null` when the field is nullable and `''` otherwise; every other empty
+ * optional field becomes `null`. A required empty field is an error.
+ */
+export function parseDraft(fields, draft, context = {}) {
+    const values = {};
+    const errors = {};
+    const digits = currencyMinorDigits(context.currency ?? DEFAULT_SCREEN_CURRENCY);
+    for (const field of fields) {
+        const raw = draft[field.name];
+        if (field.kind === 'boolean') {
+            values[field.name] = raw === true || raw === 'true';
+            continue;
+        }
+        const text = typeof raw === 'string' ? raw : '';
+        const trimmed = text.trim();
+        if (trimmed === '') {
+            if (field.required) {
+                errors[field.name] = 'required';
+            }
+            else if ((field.kind === 'text' ||
+                field.kind === 'textarea' ||
+                field.kind === 'email' ||
+                field.kind === 'url' ||
+                field.kind === 'tel') &&
+                field.definition.nullable !== true) {
+                values[field.name] = '';
+            }
+            else {
+                values[field.name] = null;
+            }
+            continue;
+        }
+        switch (field.kind) {
+            case 'integer': {
+                const parsed = /^-?\d+$/.test(trimmed) ? Number(trimmed) : Number.NaN;
+                if (Number.isSafeInteger(parsed))
+                    values[field.name] = parsed;
+                else
+                    errors[field.name] = 'invalid_integer';
+                break;
+            }
+            case 'decimal': {
+                const parsed = Number(trimmed);
+                if (Number.isFinite(parsed))
+                    values[field.name] = parsed;
+                else
+                    errors[field.name] = 'invalid_decimal';
+                break;
+            }
+            case 'money': {
+                const minor = majorStringToMinorUnits(trimmed, digits);
+                if (minor === null)
+                    errors[field.name] = 'invalid_money';
+                else
+                    values[field.name] = minor;
+                break;
+            }
+            case 'datetime': {
+                const original = context.record?.[field.name];
+                const originalDate = original === null || original === undefined || original === ''
+                    ? null
+                    : original instanceof Date
+                        ? original
+                        : new Date(original);
+                if (originalDate &&
+                    !Number.isNaN(originalDate.getTime()) &&
+                    trimmed === toDatetimeLocal(originalDate)) {
+                    // Unchanged at the control's precision: keep the full-precision
+                    // original instead of truncating to the minute.
+                    values[field.name] = originalDate.toISOString();
+                    break;
+                }
+                const date = new Date(trimmed);
+                if (Number.isNaN(date.getTime()))
+                    errors[field.name] = 'invalid_datetime';
+                else
+                    values[field.name] = date.toISOString();
+                break;
+            }
+            case 'json': {
+                try {
+                    values[field.name] = JSON.parse(trimmed);
+                }
+                catch {
+                    errors[field.name] = 'invalid_json';
+                }
+                break;
+            }
+            case 'reference':
+                values[field.name] = trimmed;
+                break;
+            default:
+                // Free text keeps the user's whitespace.
+                values[field.name] = text;
+        }
+    }
+    return { values, errors };
+}
+/** A record value as display text for a list cell or a view row. */
+export function formatScreenValue(field, value, context = {}) {
+    if (field.kind === 'boolean') {
+        if (value === null || value === undefined)
+            return '';
+        return value === true || value === 'true'
+            ? (context.yes ?? 'Yes')
+            : (context.no ?? 'No');
+    }
+    if (value === null || value === undefined || value === '')
+        return '';
+    try {
+        switch (field.kind) {
+            case 'integer':
+                return typeof value === 'number'
+                    ? new Intl.NumberFormat(context.locale, {
+                        maximumFractionDigits: 0,
+                    }).format(value)
+                    : String(value);
+            case 'decimal':
+                return typeof value === 'number'
+                    ? new Intl.NumberFormat(context.locale, {
+                        maximumFractionDigits: 6,
+                    }).format(value)
+                    : String(value);
+            case 'money': {
+                const currency = (context.currency ?? DEFAULT_SCREEN_CURRENCY)
+                    .trim()
+                    .toUpperCase();
+                const digits = currencyMinorDigits(currency);
+                if (typeof value !== 'number' || !Number.isSafeInteger(value)) {
+                    return String(value);
+                }
+                return new Intl.NumberFormat(context.locale, {
+                    style: 'currency',
+                    currency,
+                }).format(value / 10 ** digits);
+            }
+            case 'datetime': {
+                const date = value instanceof Date ? value : new Date(value);
+                if (Number.isNaN(date.getTime()))
+                    return String(value);
+                return new Intl.DateTimeFormat(context.locale, {
+                    dateStyle: 'medium',
+                    timeStyle: 'short',
+                    ...(context.timeZone ? { timeZone: context.timeZone } : {}),
+                }).format(date);
+            }
+            case 'json':
+                return typeof value === 'string' ? value : JSON.stringify(value);
+            default:
+                return String(value);
+        }
+    }
+    catch {
+        // An unsupported currency code or locale must not break a row render.
+        return String(value);
+    }
+}
+/**
+ * Order two record values for a list column: empty values last (whichever
+ * way the column sorts), numbers numerically, everything else as text.
+ */
+export function compareScreenValues(left, right, direction) {
+    if (!direction)
+        return 0;
+    const leftEmpty = left === null || left === undefined || left === '';
+    const rightEmpty = right === null || right === undefined || right === '';
+    if (leftEmpty && rightEmpty)
+        return 0;
+    if (leftEmpty)
+        return 1;
+    if (rightEmpty)
+        return -1;
+    let result;
+    if (typeof left === 'number' && typeof right === 'number') {
+        result = left - right;
+    }
+    else if (typeof left === 'boolean' && typeof right === 'boolean') {
+        result = Number(left) - Number(right);
+    }
+    else {
+        result = String(left).localeCompare(String(right));
+    }
+    return direction === 'asc' ? result : -result;
+}

package/dist/components/sortable/Sortable.svelte

@@ -1,6 +1,7 @@
 <script lang="ts" generics="Item extends SortableItem, Container extends SortableContainer">
 import { useI18n } from '@happyvertical/smrt-ui/i18n';
 import { M } from '../../i18n/strings.sortable.js';
+import { formatSortableAnnouncement } from './announce.js';
 import {
   createSortable,
   type SortableAnnouncement,
@@ -53,35 +54,7 @@ const containersById = $derived(
 );
 
 function itemMessage(announcement: SortableAnnouncement): string {
-  switch (announcement.type) {
-    case 'pickup':
-      return t(M['ui.sortable.pickup'], {
-        item: announcement.item,
-        destinations: announcement.destinations.join(', '),
-      });
-    case 'position':
-      return t(M['ui.sortable.position'], {
-        item: announcement.item,
-        container: announcement.container,
-        position: announcement.position,
-        count: announcement.count,
-      });
-    case 'drop':
-      return t(M['ui.sortable.drop'], {
-        item: announcement.item,
-        container: announcement.container,
-        position: announcement.position,
-        count: announcement.count,
-      });
-    case 'unavailable':
-      return t(M['ui.sortable.unavailable'], {
-        container: announcement.container,
-      });
-    case 'failed':
-      return t(M['ui.sortable.failed'], { item: announcement.item });
-    case 'cancel':
-      return t(M['ui.sortable.cancel'], { item: announcement.item });
-  }
+  return formatSortableAnnouncement(t, announcement);
 }
 
 const itemSortable = createSortable({
@@ -338,14 +311,14 @@ function containerRank(id: string): number {
 </div>
 
 <style>
-  .smrt-sortable { display: grid; gap: var(--smrt-spacing-3); min-width: 0; position: relative; }
-  .smrt-sortable__containers { display: grid; gap: var(--smrt-spacing-3); }
-  .smrt-sortable__container { display: grid; gap: var(--smrt-spacing-2); padding: var(--smrt-spacing-3); border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-md); background: var(--smrt-color-surface-container); min-width: 0; }
+  .smrt-sortable { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--smrt-spacing-3); min-width: 0; position: relative; }
+  .smrt-sortable__containers { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--smrt-spacing-3); min-width: 0; }
+  .smrt-sortable__container { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--smrt-spacing-2); padding: var(--smrt-spacing-3); border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-md); background: var(--smrt-color-surface-container); min-width: 0; }
   .smrt-sortable__container--disabled { opacity: 0.6; }
   .smrt-sortable__container--dragging { opacity: 0.55; }
   .smrt-sortable__header { display: flex; align-items: center; gap: var(--smrt-spacing-2); min-block-size: 2.25rem; }
   .smrt-sortable__content { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: var(--smrt-spacing-2); }
-  .smrt-sortable__items { display: grid; gap: var(--smrt-spacing-1); min-block-size: 2.25rem; }
+  .smrt-sortable__items { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--smrt-spacing-1); min-block-size: 2.25rem; min-width: 0; }
   .smrt-sortable__item { display: flex; align-items: center; gap: var(--smrt-spacing-2); padding: var(--smrt-spacing-1) var(--smrt-spacing-2); border: 1px solid var(--smrt-color-outline-variant); border-radius: var(--smrt-radius-sm); background: var(--smrt-color-surface); min-width: 0; }
   .smrt-sortable__item--dragging { opacity: 0.55; }
   .smrt-sortable__handle { display: inline-grid; place-items: center; flex: 0 0 auto; inline-size: 2rem; block-size: 2rem; padding: 0; border: 0; border-radius: var(--smrt-radius-sm); background: transparent; color: var(--smrt-color-on-surface-variant); cursor: grab; touch-action: none; }

package/dist/components/sortable/Sortable.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Sortable.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/sortable/Sortable.svelte.ts"],"names":[],"mappings":"AASA,OAAO,KAAK,EACV,iBAAiB,EACjB,YAAY,EACZ,aAAa,EACd,MAAM,YAAY,CAAC;AACpB,iBAAS,QAAQ,CAAC,IAAI,SAAS,YAAY,EAAE,SAAS,SAAS,iBAAiB;WAiRnD,aAAa,CAAC,IAAI,EAAE,SAAS,CAAC;;;;;EAA4E;AACvI,cAAM,iBAAiB,CAAC,IAAI,SAAS,YAAY,EAAC,SAAS,SAAS,iBAAiB;IACjF,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC;IAC7D,MAAM,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC;IAC/D,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC;IAC7D,QAAQ;IACR,OAAO;CACV;AAED,UAAU,qBAAqB;IAC3B,KAAK,IAAI,SAAS,YAAY,EAAC,SAAS,SAAS,iBAAiB,EAAE,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,UAAU,CAAC,iBAAiB,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,iBAAiB,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,UAAU,CAAC,CAAC,CAAA;KAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IACtgB,CAAC,IAAI,SAAS,YAAY,EAAC,SAAS,SAAS,iBAAiB,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IACjN,YAAY,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,GAAG,EAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;CACrE;AACD,QAAA,MAAM,QAAQ,EAAE,qBAAmC,CAAC;AAClC,KAAK,QAAQ,CAAC,IAAI,SAAS,YAAY,EAAC,SAAS,SAAS,iBAAiB,IAAI,YAAY,CAAC,OAAO,QAAQ,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,CAAC;AAC/H,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Sortable.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/sortable/Sortable.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EACV,iBAAiB,EACjB,YAAY,EACZ,aAAa,EACd,MAAM,YAAY,CAAC;AACpB,iBAAS,QAAQ,CAAC,IAAI,SAAS,YAAY,EAAE,SAAS,SAAS,iBAAiB;WAsPnD,aAAa,CAAC,IAAI,EAAE,SAAS,CAAC;;;;;EAA4E;AACvI,cAAM,iBAAiB,CAAC,IAAI,SAAS,YAAY,EAAC,SAAS,SAAS,iBAAiB;IACjF,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC;IAC7D,MAAM,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,CAAC,QAAQ,CAAC;IAC/D,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,CAAC,OAAO,CAAC;IAC7D,QAAQ;IACR,OAAO;CACV;AAED,UAAU,qBAAqB;IAC3B,KAAK,IAAI,SAAS,YAAY,EAAC,SAAS,SAAS,iBAAiB,EAAE,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,UAAU,CAAC,iBAAiB,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,iBAAiB,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,UAAU,CAAC,CAAC,CAAA;KAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IACtgB,CAAC,IAAI,SAAS,YAAY,EAAC,SAAS,SAAS,iBAAiB,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IACjN,YAAY,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,GAAG,EAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;CACrE;AACD,QAAA,MAAM,QAAQ,EAAE,qBAAmC,CAAC;AAClC,KAAK,QAAQ,CAAC,IAAI,SAAS,YAAY,EAAC,SAAS,SAAS,iBAAiB,IAAI,YAAY,CAAC,OAAO,QAAQ,CAAC,IAAI,EAAC,SAAS,CAAC,CAAC,CAAC;AAC/H,eAAe,QAAQ,CAAC"}

package/dist/components/sortable/announce.d.ts

@@ -0,0 +1,5 @@
+import type { useI18n } from '@happyvertical/smrt-ui/i18n';
+import type { SortableAnnouncement } from './controller.svelte.js';
+/** Localized screen-reader text for a sortable engine announcement. */
+export declare function formatSortableAnnouncement(t: ReturnType<typeof useI18n>['t'], announcement: SortableAnnouncement): string;
+//# sourceMappingURL=announce.d.ts.map

package/dist/components/sortable/announce.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"announce.d.ts","sourceRoot":"","sources":["../../../src/components/sortable/announce.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,6BAA6B,CAAC;AAE3D,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAEnE,uEAAuE;AACvE,wBAAgB,0BAA0B,CACxC,CAAC,EAAE,UAAU,CAAC,OAAO,OAAO,CAAC,CAAC,GAAG,CAAC,EAClC,YAAY,EAAE,oBAAoB,GACjC,MAAM,CA8BR"}

package/dist/components/sortable/announce.js

@@ -0,0 +1,33 @@
+import { M } from '../../i18n/strings.sortable.js';
+/** Localized screen-reader text for a sortable engine announcement. */
+export function formatSortableAnnouncement(t, announcement) {
+    switch (announcement.type) {
+        case 'pickup':
+            return t(M['ui.sortable.pickup'], {
+                item: announcement.item,
+                destinations: announcement.destinations.join(', '),
+            });
+        case 'position':
+            return t(M['ui.sortable.position'], {
+                item: announcement.item,
+                container: announcement.container,
+                position: announcement.position,
+                count: announcement.count,
+            });
+        case 'drop':
+            return t(M['ui.sortable.drop'], {
+                item: announcement.item,
+                container: announcement.container,
+                position: announcement.position,
+                count: announcement.count,
+            });
+        case 'unavailable':
+            return t(M['ui.sortable.unavailable'], {
+                container: announcement.container,
+            });
+        case 'failed':
+            return t(M['ui.sortable.failed'], { item: announcement.item });
+        case 'cancel':
+            return t(M['ui.sortable.cancel'], { item: announcement.item });
+    }
+}

package/dist/components/sortable/controller.svelte.d.ts

@@ -76,6 +76,15 @@ export interface SortableControllerOptions {
      * adjacent container at either end.
      */
     orientation?: () => 'horizontal' | 'vertical';
+    /**
+     * `true` for a single list laid out as a wrapping flow (a CSS grid of
+     * tiles): every arrow key steps one position along the reading order
+     * (Left/Right mirrored in right-to-left), and a pointer drop over an item
+     * that shares its row with others decides before/after by the horizontal
+     * midpoint; an item that fills the row (stacked layouts) still uses the
+     * vertical midpoint.
+     */
+    flow?: () => boolean;
     /**
      * Persist a move. May be async; a rejection restores the presentation and
      * is announced. The engine allows the next move only after it settles.
@@ -113,6 +122,7 @@ export declare class SortableController {
     pickup(itemId: string, mode: DragState['mode']): void;
     private announcePosition;
     private moveKeyboardTarget;
+    private isRtl;
     drop(): Promise<void>;
     /** Cancel the move in flight. Focus returns to the item when `restoreFocus`. */
     cancel(announce?: boolean, restoreFocus?: boolean): void;

package/dist/components/sortable/controller.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"controller.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/sortable/controller.svelte.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"controller.svelte.d.ts","sourceRoot":"","sources":["../../../src/components/sortable/controller.svelte.ts"],"names":[],"mappings":"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"}

package/dist/components/sortable/controller.svelte.js

@@ -112,6 +112,14 @@ export class SortableController {
             return;
         const vertical = this.options.orientation?.() === 'vertical';
         const target = { ...drag.target };
+        if (this.options.flow?.()) {
+            const mirrored = direction === 'horizontal' && this.isRtl();
+            const max = this.itemsIn(target.containerId, drag.itemId).length;
+            target.index = clamp(target.index + (mirrored ? -delta : delta), max);
+            this.drag = { ...drag, target };
+            this.announcePosition(this.drag);
+            return;
+        }
         // With same-container reordering off, the source container pins the
         // position (as it does for pointer moves): a vertical step leaves it.
         const pinned = !this.options.allowSameContainerReorder() &&
@@ -160,6 +168,12 @@ export class SortableController {
         this.drag = { ...drag, target };
         this.announcePosition(this.drag);
     }
+    isRtl() {
+        const root = this.options.root();
+        return (root !== undefined &&
+            typeof getComputedStyle === 'function' &&
+            getComputedStyle(root).direction === 'rtl');
+    }
     async drop() {
         const state = this.drag;
         if (!state)
@@ -325,7 +339,7 @@ export class SortableController {
         return (document.elementFromPoint?.(event.clientX, event.clientY) ??
             event.target);
     }
-    setPointerTargetFromElement(element, clientY) {
+    setPointerTargetFromElement(element, clientY, clientX) {
         // Container ids belong to the host's domain and may repeat in another
         // instance. Pointer hit-testing must never escape this one's root.
         const root = this.options.root();
@@ -347,13 +361,21 @@ export class SortableController {
         const rawIndex = this.itemsIn(containerId).indexOf(itemElement.dataset[selectors.itemKey] ?? '');
         if (rawIndex < 0)
             return container;
-        this.pointerTarget(containerId, this.insertionIndex(containerId, rawIndex, itemElement, clientY));
+        this.pointerTarget(containerId, this.insertionIndex(containerId, rawIndex, itemElement, clientY, clientX));
         return container;
     }
     /** Index to insert at when hovering item `rawIndex`, after removing the dragged item. */
-    insertionIndex(containerId, rawIndex, itemElement, clientY) {
+    insertionIndex(containerId, rawIndex, itemElement, clientY, clientX) {
         const rect = itemElement.getBoundingClientRect();
-        const before = clientY < rect.top + rect.height / 2;
+        let before = clientY < rect.top + rect.height / 2;
+        if (this.options.flow?.() && clientX !== undefined) {
+            const rootWidth = this.options.root()?.getBoundingClientRect().width ?? 0;
+            // A tile narrower than the list shares its row: order is horizontal.
+            if (rect.width < rootWidth * 0.95) {
+                const mid = rect.left + rect.width / 2;
+                before = this.isRtl() ? clientX > mid : clientX < mid;
+            }
+        }
         let targetIndex = rawIndex + (before ? 0 : 1);
         const drag = this.drag;
         if (drag?.source.containerId === containerId &&
@@ -375,7 +397,7 @@ export class SortableController {
             this.cancel();
             return;
         }
-        const container = this.setPointerTargetFromElement(this.elementAtPointer(event), event.clientY);
+        const container = this.setPointerTargetFromElement(this.elementAtPointer(event), event.clientY, event.clientX);
         if (container?.disabled) {
             this.say({ type: 'unavailable', container: container.label });
             this.cancel(false);
@@ -405,7 +427,7 @@ export class SortableController {
             this.pointerSession = { ...session, active: true };
         }
         event.preventDefault();
-        this.setPointerTargetFromElement(this.elementAtPointer(event), event.clientY);
+        this.setPointerTargetFromElement(this.elementAtPointer(event), event.clientY, event.clientX);
     }
     pointerTarget(containerId, index) {
         const drag = this.drag;
@@ -431,7 +453,7 @@ export class SortableController {
             this.cancel(false);
             return;
         }
-        this.pointerTarget(containerId, this.insertionIndex(containerId, rawIndex, event.currentTarget, event.clientY));
+        this.pointerTarget(containerId, this.insertionIndex(containerId, rawIndex, event.currentTarget, event.clientY, event.clientX));
         void this.drop();
     }
     /** Native drop on a container's empty space: append. */