@pathscale/ui 3.0.0 → 3.2.0

package/dist/components/connection-settings/ConnectionSettings.generated.js

@@ -0,0 +1,300 @@
+import { claimElement, createComponent, insert, memo, mergeProps, spread, template } from "@solidjs/web";
+import { defineComponent } from "solid-layouts/solid-2/application-boundary";
+import "./ConnectionSettings.css";
+import { For, Show, createMemo, createSignal, createUniqueId, omit } from "solid-js";
+import button_0 from "../button/index.js";
+import input from "../input/index.js";
+import switch_0 from "../switch/index.js";
+import { componentRecipe } from "./ConnectionSettings.recipe.js";
+var _tmpl$ = /*#__PURE__*/ template("<p>"), _tmpl$2 = /*#__PURE__*/ template("<div><!><!>"), _tmpl$3 = /*#__PURE__*/ template("<div><label>"), _tmpl$4 = /*#__PURE__*/ template("<form><div><div><p></p></div></div><!><div></div><div><!><!>"), _tmpl$5 = /*#__PURE__*/ template("<div><label></label><!><!>"), _tmpl$6 = /*#__PURE__*/ template("<span><!>: <!>");
+const __solidLayoutConnectionSettingsLayout = (_stable, p)=>{
+    const others = omit(p, "children", "class", "dataTheme", "onSubmit", "style", "store", "endpoints", "labels", "showAppPublicId", "onSaved", "onSaveFailed", "onResetDone");
+    const uid = createUniqueId();
+    const fieldId = (name)=>`connection-settings-${uid}-${name}`;
+    const [open, setOpen] = createSignal(p.endpoints.some((e)=>p.store.isOverridden(e.name)));
+    const [draft, setDraft] = createSignal({});
+    const [appIdDraft, setAppIdDraft] = createSignal(void 0);
+    const [failure, setFailure] = createSignal(void 0);
+    const fieldValue = (name)=>draft()[name] ?? p.store.state.urls[name] ?? "";
+    const appIdValue = ()=>appIdDraft() ?? p.store.state.appPublicId;
+    const resolvedUrls = createMemo(()=>p.store.urls);
+    const edit = (name, value)=>setDraft({
+            ...draft(),
+            [name]: value
+        });
+    const setUseCustom = (next)=>setOpen(next);
+    let saving = false;
+    const save = async ()=>{
+        if (saving) return;
+        saving = true;
+        try {
+            await commit();
+        } finally{
+            saving = false;
+        }
+    };
+    const commit = async ()=>{
+        setFailure(void 0);
+        const values = new Map(p.endpoints.map((endpoint)=>[
+                endpoint.name,
+                fieldValue(endpoint.name)
+            ]));
+        if (open()) for (const [name, value] of values){
+            const problem = p.store.validate(name, value);
+            if (problem) {
+                setFailure(problem);
+                p.onSaveFailed?.(new Error(problem));
+                return;
+            }
+        }
+        for (const endpoint of p.endpoints){
+            const value = values.get(endpoint.name) ?? "";
+            const fallback = p.store.fallbacks[endpoint.name];
+            const overridden = open() && "" !== value && value !== fallback;
+            p.store.setOverride(endpoint.name, overridden);
+            if ("" !== value) p.store.setUrl(endpoint.name, value);
+        }
+        const id = appIdDraft();
+        if (void 0 !== id) p.store.setAppPublicId(id);
+        setDraft({});
+        setAppIdDraft(void 0);
+        try {
+            await p.store.apply();
+            p.onSaved?.();
+        } catch (error) {
+            setFailure(error instanceof Error ? error.message : String(error));
+            p.onSaveFailed?.(error);
+        }
+    };
+    const saveOnEnter = (event)=>{
+        if ("Enter" !== event.key || event.isComposing) return;
+        event.preventDefault();
+        save();
+    };
+    const reset = async ()=>{
+        setFailure(void 0);
+        setDraft({});
+        setAppIdDraft(void 0);
+        p.store.reset();
+        setOpen(false);
+        try {
+            await p.store.apply();
+            p.onResetDone?.();
+        } catch (error) {
+            setFailure(error instanceof Error ? error.message : String(error));
+            p.onSaveFailed?.(error);
+        }
+    };
+    var _el$ = _tmpl$4(), _el$2 = _el$.firstChild, _el$3 = _el$2.firstChild, _el$4 = _el$3.firstChild, _el$14 = _el$2.nextSibling, _el$1 = _el$14.nextSibling, _el$11 = _el$1.nextSibling, _el$12 = _el$11.firstChild, _el$13 = _el$12.nextSibling;
+    claimElement(_el$);
+    spread(_el$, mergeProps(others, ()=>_stable.slot.root, {
+        get style () {
+            return p.style;
+        },
+        get ["data-theme"] () {
+            return p.dataTheme;
+        },
+        get ["data-open"] () {
+            return open() ? "true" : "false";
+        },
+        get ["data-applying"] () {
+            return p.store.isApplying ? "true" : "false";
+        },
+        onSubmit: (event)=>{
+            event.preventDefault();
+            save();
+        }
+    }), true);
+    spread(_el$2, mergeProps(()=>_stable.slot.header), true);
+    spread(_el$4, mergeProps(()=>_stable.slot.title), true);
+    insert(_el$4, ()=>p.labels.useCustom);
+    insert(_el$3, createComponent(Show, {
+        get when () {
+            return p.labels.useCustomDescription;
+        },
+        get children () {
+            var _el$5 = _tmpl$();
+            spread(_el$5, mergeProps(()=>_stable.slot.description), true);
+            insert(_el$5, ()=>p.labels.useCustomDescription);
+            return _el$5;
+        }
+    }), null);
+    insert(_el$2, createComponent(switch_0, mergeProps(()=>_stable.slot.switch, {
+        get id () {
+            return fieldId("use-custom");
+        },
+        get ["aria-label"] () {
+            return p.labels.useCustom;
+        },
+        get checked () {
+            return open();
+        },
+        get disabled () {
+            return p.store.isApplying;
+        },
+        onChange: ()=>setUseCustom(!open())
+    })), null);
+    insert(_el$, createComponent(Show, {
+        get when () {
+            return open();
+        },
+        get children () {
+            var _el$6 = _tmpl$2(), _el$7 = _el$6.firstChild, _el$8 = _el$7.nextSibling;
+            spread(_el$6, mergeProps(()=>_stable.slot.fields), true);
+            insert(_el$6, createComponent(For, {
+                get each () {
+                    return p.endpoints;
+                },
+                children: (endpoint)=>(()=>{
+                        var _el$15 = _tmpl$5(), _el$16 = _el$15.firstChild, _el$18 = _el$16.nextSibling, _el$19 = _el$18.nextSibling;
+                        spread(_el$15, mergeProps(()=>_stable.slot.field), true);
+                        spread(_el$16, mergeProps(()=>_stable.slot.label, {
+                            get ["for"] () {
+                                return fieldId(endpoint.name);
+                            }
+                        }), true);
+                        insert(_el$16, ()=>endpoint.label);
+                        insert(_el$15, createComponent(input.Field, mergeProps(()=>_stable.slot.input, {
+                            get id () {
+                                return fieldId(endpoint.name);
+                            },
+                            get name () {
+                                return endpoint.name;
+                            },
+                            type: "text",
+                            onKeyDown: saveOnEnter,
+                            get ["aria-label"] () {
+                                return endpoint.label;
+                            },
+                            get placeholder () {
+                                return endpoint.placeholder;
+                            },
+                            get value () {
+                                return fieldValue(endpoint.name);
+                            },
+                            get disabled () {
+                                return p.store.isApplying;
+                            },
+                            onInput: (event)=>edit(endpoint.name, event.currentTarget.value)
+                        })), _el$18);
+                        insert(_el$15, createComponent(Show, {
+                            get when () {
+                                return endpoint.hint;
+                            },
+                            get children () {
+                                var _el$17 = _tmpl$();
+                                spread(_el$17, mergeProps(()=>_stable.slot.hint), true);
+                                insert(_el$17, ()=>endpoint.hint);
+                                return _el$17;
+                            }
+                        }), _el$19);
+                        return _el$15;
+                    })()
+            }), _el$7);
+            insert(_el$6, ()=>_stable.children, _el$8);
+            return _el$6;
+        }
+    }), _el$14);
+    insert(_el$, createComponent(Show, {
+        get when () {
+            return memo(()=>!!p.showAppPublicId)() ? p.labels.appPublicId : p.showAppPublicId;
+        },
+        get children () {
+            var _el$9 = _tmpl$3(), _el$0 = _el$9.firstChild;
+            spread(_el$9, mergeProps(()=>_stable.slot.field), true);
+            spread(_el$0, mergeProps(()=>_stable.slot.label, {
+                get ["for"] () {
+                    return fieldId("app-public-id");
+                }
+            }), true);
+            insert(_el$0, ()=>p.labels.appPublicId);
+            insert(_el$9, createComponent(input.Field, mergeProps(()=>_stable.slot.input, {
+                get id () {
+                    return fieldId("app-public-id");
+                },
+                type: "text",
+                onKeyDown: saveOnEnter,
+                get ["aria-label"] () {
+                    return p.labels.appPublicId;
+                },
+                get value () {
+                    return appIdValue();
+                },
+                get disabled () {
+                    return p.store.isApplying;
+                },
+                onInput: (event)=>setAppIdDraft(event.currentTarget.value)
+            })), null);
+            return _el$9;
+        }
+    }), _el$1);
+    spread(_el$1, mergeProps(()=>_stable.slot.current), true);
+    insert(_el$1, createComponent(For, {
+        get each () {
+            return p.endpoints;
+        },
+        children: (endpoint)=>(()=>{
+                var _el$20 = _tmpl$6(), _el$22 = _el$20.firstChild, _el$21 = _el$22.nextSibling, _el$23 = _el$21.nextSibling;
+                insert(_el$20, (()=>{
+                    var _c$ = memo(()=>!!p.labels.current);
+                    return ()=>_c$() ? `${p.labels.current} ` : "";
+                })(), _el$22);
+                insert(_el$20, ()=>endpoint.label, _el$21);
+                insert(_el$20, ()=>resolvedUrls()[endpoint.name], _el$23);
+                return _el$20;
+            })()
+    }));
+    insert(_el$, createComponent(Show, {
+        get when () {
+            return failure();
+        },
+        get children () {
+            var _el$10 = _tmpl$();
+            spread(_el$10, mergeProps(()=>_stable.slot.hint, {
+                role: "alert"
+            }), true);
+            insert(_el$10, failure);
+            return _el$10;
+        }
+    }), _el$11);
+    spread(_el$11, mergeProps(()=>_stable.slot.actions), true);
+    insert(_el$11, createComponent(button_0, {
+        type: "button",
+        flavor: "primary",
+        get disabled () {
+            return p.store.isApplying;
+        },
+        onClick: ()=>void save(),
+        get children () {
+            return p.labels.save;
+        }
+    }), _el$12);
+    insert(_el$11, createComponent(button_0, {
+        type: "button",
+        flavor: "secondary",
+        get disabled () {
+            return p.store.isApplying;
+        },
+        onClick: reset,
+        get children () {
+            return p.labels.reset;
+        }
+    }), _el$13);
+    return _el$;
+};
+const ConnectionSettingsLayout = defineComponent({
+    recipe: componentRecipe,
+    layout: __solidLayoutConnectionSettingsLayout,
+    embedded: true,
+    behaviour: [
+        "store",
+        "endpoints",
+        "labels",
+        "showAppPublicId",
+        "children",
+        "onSaved",
+        "onSaveFailed",
+        "onResetDone"
+    ]
+});
+export { ConnectionSettingsLayout };

package/dist/components/connection-settings/ConnectionSettings.recipe.d.ts

@@ -0,0 +1,54 @@
+/**
+ * Presentation lives here, not in the layout.
+ *
+ * This declared empty slots while `ConnectionSettings.layout.tsx` kept a
+ * `CLASSES` table and assembled class strings by hand with `twMerge`. That is
+ * the shape `solid-layouts-lint` calls a "legacy component-shaped Layout", and
+ * it was the only unbaselined warning in the repository -- new debt in a new
+ * component, which is exactly the debt `warningsAsErrors` exists to stop.
+ *
+ * `open` and `applying` are recipe props rather than conditional classes in the
+ * component, so the compiler owns the whole class string.
+ */
+export declare const componentRecipe: import("solid-layouts/solid-2").Recipe<{
+    readonly component: "connection-settings";
+    readonly element: "form";
+    readonly slots: {
+        readonly root: {
+            readonly base: "connection-settings";
+        };
+        readonly header: {
+            readonly base: "connection-settings__header";
+        };
+        readonly title: {
+            readonly base: "connection-settings__title";
+        };
+        readonly description: {
+            readonly base: "connection-settings__description";
+        };
+        readonly switch: {
+            readonly base: "connection-settings__switch";
+        };
+        readonly fields: {
+            readonly base: "connection-settings__fields";
+        };
+        readonly field: {
+            readonly base: "connection-settings__field";
+        };
+        readonly label: {
+            readonly base: "connection-settings__label";
+        };
+        readonly input: {
+            readonly base: "connection-settings__input";
+        };
+        readonly hint: {
+            readonly base: "connection-settings__hint";
+        };
+        readonly current: {
+            readonly base: "connection-settings__current";
+        };
+        readonly actions: {
+            readonly base: "connection-settings__actions";
+        };
+    };
+}>;

package/dist/components/connection-settings/ConnectionSettings.recipe.js

@@ -0,0 +1,111 @@
+import { recipe } from "../../lib/layouts/index.js";
+const componentRecipe = recipe({
+    component: "connection-settings",
+    element: "form",
+    slots: {
+        root: {
+            base: "connection-settings"
+        },
+        header: {
+            base: "connection-settings__header"
+        },
+        title: {
+            base: "connection-settings__title"
+        },
+        description: {
+            base: "connection-settings__description"
+        },
+        switch: {
+            base: "connection-settings__switch"
+        },
+        fields: {
+            base: "connection-settings__fields"
+        },
+        field: {
+            base: "connection-settings__field"
+        },
+        label: {
+            base: "connection-settings__label"
+        },
+        input: {
+            base: "connection-settings__input"
+        },
+        hint: {
+            base: "connection-settings__hint"
+        },
+        current: {
+            base: "connection-settings__current"
+        },
+        actions: {
+            base: "connection-settings__actions"
+        }
+    },
+    _layouts: {
+        slots: {
+            root: {
+                base: "connection-settings",
+                axes: {}
+            },
+            header: {
+                base: "connection-settings__header",
+                axes: {}
+            },
+            title: {
+                base: "connection-settings__title",
+                axes: {}
+            },
+            description: {
+                base: "connection-settings__description",
+                axes: {}
+            },
+            switch: {
+                base: "connection-settings__switch",
+                axes: {}
+            },
+            fields: {
+                base: "connection-settings__fields",
+                axes: {}
+            },
+            field: {
+                base: "connection-settings__field",
+                axes: {}
+            },
+            label: {
+                base: "connection-settings__label",
+                axes: {}
+            },
+            input: {
+                base: "connection-settings__input",
+                axes: {}
+            },
+            hint: {
+                base: "connection-settings__hint",
+                axes: {}
+            },
+            current: {
+                base: "connection-settings__current",
+                axes: {}
+            },
+            actions: {
+                base: "connection-settings__actions",
+                axes: {}
+            }
+        },
+        stateKeys: [],
+        slotIds: {
+            root: 9,
+            header: 5,
+            title: 11,
+            description: 2,
+            switch: 10,
+            fields: 4,
+            field: 3,
+            label: 8,
+            input: 7,
+            hint: 6,
+            current: 1,
+            actions: 0
+        }
+    }
+});
+export { componentRecipe };

package/dist/components/connection-settings/index.d.ts

@@ -0,0 +1,2 @@
+export type { ConnectionSettingsEndpointLabel, ConnectionSettingsLabels, ConnectionSettingsProps, } from "./ConnectionSettings.generated";
+export { ConnectionSettingsLayout as default, ConnectionSettingsLayout as ConnectionSettings, } from "./ConnectionSettings.generated";

package/dist/components/connection-settings/index.js

@@ -0,0 +1 @@
+export { ConnectionSettingsLayout as ConnectionSettings, ConnectionSettingsLayout as default } from "./ConnectionSettings.generated.js";

package/dist/components/date-picker/DatePicker.generated.d.ts

@@ -1,7 +1,7 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./DatePicker.css";
 import type { JSX } from "@solidjs/web";
-import { type CalendarWeekdayFormat } from "../calendar";
+import { type CalendarWeekdayFormat, type DateNames } from "../calendar";
 import type { UIBaseProps, State } from "../vocabulary";
 type DatePickerBaseProps = {
     value?: Date;
@@ -13,6 +13,8 @@ type DatePickerBaseProps = {
     name?: string;
     placeholder?: string;
     locale?: string;
+    /** Month and weekday names for a language other than English. See `Calendar`. */
+    dateNames?: DateNames;
     weekdayFormat?: CalendarWeekdayFormat;
     minValue?: Date;
     maxValue?: Date;

package/dist/components/date-picker/DatePicker.generated.js

@@ -3,12 +3,12 @@ import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./DatePicker.css";
 import { Show, createMemo, createUniqueId, omit } from "solid-js";
 import { twMerge } from "../../lib/twMerge.js";
-import { formatDate, toISODate, useDateSelection, usePickerOpenState } from "../../hooks/date/index.js";
+import { formatDate, resolveDateNames, toISODate, useDateSelection, usePickerOpenState } from "../../hooks/date/index.js";
 import calendar from "../calendar/index.js";
 import { CLASSES, componentRecipe } from "./DatePicker.recipe.js";
 var _tmpl$ = /*#__PURE__*/ template("<input type=hidden>"), _tmpl$2 = /*#__PURE__*/ template("<div>"), _tmpl$3 = /*#__PURE__*/ template("<div><button><span></span><span><svg><rect x=3 y=4 width=18 height=18 rx=2 ry=2></rect><line x1=16 y1=2 x2=16 y2=6></line><line x1=8 y1=2 x2=8 y2=6></line><line x1=3 y1=10 x2=21 y2=10></line></svg></span></button><!>");
 const __solidLayoutDatePicker = (_stable, p)=>{
-    const others = omit(p, "class", "dataTheme", "style", "ref", "value", "defaultValue", "onChange", "open", "defaultOpen", "onOpenChange", "name", "placeholder", "locale", "weekdayFormat", "minValue", "maxValue", "isDateUnavailable", "state", "disabled");
+    const others = omit(p, "class", "dataTheme", "style", "ref", "value", "defaultValue", "onChange", "open", "defaultOpen", "onOpenChange", "name", "placeholder", "locale", "dateNames", "weekdayFormat", "minValue", "maxValue", "isDateUnavailable", "state", "disabled");
     const isDisabled = createMemo(()=>Boolean("disabled" === p.state) || Boolean(p.disabled));
     const selection = useDateSelection({
         value: ()=>p.value,
@@ -21,11 +21,11 @@ const __solidLayoutDatePicker = (_stable, p)=>{
         onOpenChange: ()=>p.onOpenChange,
         isDisabled
     });
-    const locale = createMemo(()=>p.locale ?? "en-US");
+    const dateNames = createMemo(()=>resolveDateNames(p.locale, p.dateNames).names);
     const displayValue = createMemo(()=>{
         const selectedDate = selection.selectedDate();
         if (!selectedDate) return p.placeholder ?? "Select date";
-        return formatDate(selectedDate, locale());
+        return formatDate(selectedDate, dateNames());
     });
     const uniqueId = createUniqueId();
     const popoverId = `date-picker-popover-${uniqueId}`;
@@ -154,7 +154,10 @@ const __solidLayoutDatePicker = (_stable, p)=>{
                 },
                 onChange: handleDateChange,
                 get locale () {
-                    return locale();
+                    return p.locale;
+                },
+                get dateNames () {
+                    return p.dateNames;
                 },
                 get weekdayFormat () {
                     return p.weekdayFormat;

package/dist/components/date-range-picker/DateRangePicker.generated.d.ts

@@ -2,7 +2,7 @@ import type { Component as __LayoutComponent } from "solid-js";
 import "./DateRangePicker.css";
 import type { JSX } from "@solidjs/web";
 import { type ControlledDateRangeValue } from "../../hooks/date";
-import { type CalendarWeekdayFormat } from "../calendar";
+import { type CalendarWeekdayFormat, type DateNames } from "../calendar";
 import type { UIBaseProps, State } from "../vocabulary";
 export type DateRangeValue = ControlledDateRangeValue;
 type DateRangePickerBaseProps = {
@@ -17,6 +17,8 @@ type DateRangePickerBaseProps = {
     startPlaceholder?: string;
     endPlaceholder?: string;
     locale?: string;
+    /** Month and weekday names for a language other than English. See `Calendar`. */
+    dateNames?: DateNames;
     weekdayFormat?: CalendarWeekdayFormat;
     minValue?: Date;
     maxValue?: Date;

package/dist/components/date-range-picker/DateRangePicker.generated.js

@@ -3,12 +3,12 @@ import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./DateRangePicker.css";
 import { Show, createMemo, createTrackedEffect, createUniqueId, omit } from "solid-js";
 import { twMerge } from "../../lib/twMerge.js";
-import { formatDate, toISODate, usePickerOpenState, useRangeSelection } from "../../hooks/date/index.js";
+import { formatDate, resolveDateNames, toISODate, usePickerOpenState, useRangeSelection } from "../../hooks/date/index.js";
 import calendar from "../calendar/index.js";
 import { CLASSES, componentRecipe } from "./DateRangePicker.recipe.js";
 var _tmpl$ = /*#__PURE__*/ template("<input type=hidden>"), _tmpl$2 = /*#__PURE__*/ template("<div>"), _tmpl$3 = /*#__PURE__*/ template("<div><!><button><span></span><span>-</span><span></span><span><svg><rect x=3 y=4 width=18 height=18 rx=2 ry=2></rect><line x1=16 y1=2 x2=16 y2=6></line><line x1=8 y1=2 x2=8 y2=6></line><line x1=3 y1=10 x2=21 y2=10></line></svg></span></button><!>");
 const __solidLayoutDateRangePicker = (_stable, p)=>{
-    const others = omit(p, "class", "dataTheme", "style", "ref", "value", "defaultValue", "onChange", "open", "defaultOpen", "onOpenChange", "startName", "endName", "startPlaceholder", "endPlaceholder", "locale", "weekdayFormat", "minValue", "maxValue", "isDateUnavailable", "state", "disabled");
+    const others = omit(p, "class", "dataTheme", "style", "ref", "value", "defaultValue", "onChange", "open", "defaultOpen", "onOpenChange", "startName", "endName", "startPlaceholder", "endPlaceholder", "locale", "dateNames", "weekdayFormat", "minValue", "maxValue", "isDateUnavailable", "state", "disabled");
     const isDisabled = createMemo(()=>Boolean("disabled" === p.state) || Boolean(p.disabled));
     const rangeSelection = useRangeSelection({
         value: ()=>p.value,
@@ -25,17 +25,17 @@ const __solidLayoutDateRangePicker = (_stable, p)=>{
         if (openState.isOpen()) return;
         rangeSelection.clearPendingSelection();
     });
-    const locale = createMemo(()=>p.locale ?? "en-US");
+    const dateNames = createMemo(()=>resolveDateNames(p.locale, p.dateNames).names);
     const startValue = createMemo(()=>rangeSelection.rangeStart());
     const endValue = createMemo(()=>rangeSelection.rangeEnd());
     const focusDate = createMemo(()=>rangeSelection.focusDate());
     const startDisplay = createMemo(()=>{
         if (!startValue()) return p.startPlaceholder ?? "Start date";
-        return formatDate(startValue(), locale());
+        return formatDate(startValue(), dateNames());
     });
     const endDisplay = createMemo(()=>{
         if (!endValue()) return p.endPlaceholder ?? "End date";
-        return formatDate(endValue(), locale());
+        return formatDate(endValue(), dateNames());
     });
     const handleDateSelect = (date)=>{
         const wasSelectingEnd = rangeSelection.isSelectingEnd();
@@ -208,7 +208,10 @@ const __solidLayoutDateRangePicker = (_stable, p)=>{
                     return rangeSelection.setHoverDate;
                 },
                 get locale () {
-                    return locale();
+                    return p.locale;
+                },
+                get dateNames () {
+                    return p.dateNames;
                 },
                 get weekdayFormat () {
                     return p.weekdayFormat;