vanilla-jui 1.5.4 → 1.5.6

package/src/components/form.ts

@@ -1,5 +1,6 @@
 import {
   For,
+  type ElementProps,
   createDeepStore,
   createEffect,
   createMemo,
@@ -13,7 +14,7 @@ import {
   defineComponent,
 } from '../core/component.ts';
 import { joinClasses } from '../utilities/class-name.ts';
-import { type RenderableContent, all } from '../utilities/dom.ts';
+import { asRenderable, type RenderableContent, all } from '../utilities/dom.ts';
 import { randomId } from '../utilities/id.ts';
 import { isPlainObject } from '../utilities/object.ts';
 import {
@@ -23,6 +24,8 @@ import {
 } from '../utilities/types.ts';
 import { createValidator } from '../validation/validator.ts';
 import { createLoading } from '../primitives/loading.ts';
+import { t } from 'vanilla-signal-i18n';
+import locales from '../locales/index.ts';
 
 type FormValue = string | number | boolean;
 export type FieldOption = FormValue | FormOption;
@@ -99,7 +102,10 @@ export interface FormField {
   label?: RenderableContent<Form> | false;
   name?: string;
   options?: readonly FieldOption[];
-  value?: FormDataEntryValue | boolean | readonly FormDataEntryValue[];
+  value?:
+    | FormDataEntryValue
+    | FormValue
+    | readonly (FormDataEntryValue | FormValue)[];
   checked?: boolean;
   required?: boolean;
   placeholder?: string;
@@ -230,8 +236,18 @@ const DEFAULT_CLASS_NAMES: FormClassNames = {
 };
 
 const DEFAULT_BUTTONS: FormButton[] = [
-  { type: 'submit', text: 'Submit', theme: 'primary', action: 'submit' },
-  { type: 'reset', text: 'Reset', theme: 'ghost', action: 'reset' },
+  {
+    type: 'submit',
+    text: t('Submit', locales),
+    theme: 'primary',
+    action: 'submit',
+  },
+  {
+    type: 'reset',
+    text: t('Reset', locales),
+    theme: 'ghost',
+    action: 'reset',
+  },
 ];
 
 // Guard against malformed dynamic chains that never terminate.
@@ -365,7 +381,21 @@ function stringifyFormValue(
   if (typeof value === 'number' || typeof value === 'boolean') {
     return String(value);
   }
-  return value.name;
+  if (value instanceof File) return value.name;
+  return '';
+}
+
+function stringifyControlValue(value: FormField['value'] | undefined): string {
+  if (value == null || Array.isArray(value)) return '';
+  if (
+    typeof value === 'string' ||
+    typeof value === 'number' ||
+    typeof value === 'boolean'
+  ) {
+    return String(value);
+  }
+  if (value instanceof File) return value.name;
+  return '';
 }
 
 function fieldIsRequired(
@@ -687,97 +717,112 @@ export function createForm(input: FormProps = {}): Form {
     setChainVersion((version: number) => version + 1);
   };
 
-  const controlProps = <TExtra extends Record<string, unknown>>(
-    field: FormField,
+  const controlProps = <TElement extends Element>(
+    fieldAccessor: () => FormField,
     id: string,
-    extra: TExtra
-  ): TExtra & Record<string, unknown> => ({
+    extra: ElementProps<TElement>
+  ): ElementProps<TElement> => ({
     ...extra,
-    name: field.name,
+    name: () => fieldAccessor().name,
     id,
-    placeholder: field.placeholder || '',
-    required: !!field.required,
-    disabled: () => state.submitting || !!field.disabled,
-    readonly: !!field.readonly,
-    'data-form-field': field.name || id,
+    placeholder: () => fieldAccessor().placeholder || '',
+    required: () => !!fieldAccessor().required,
+    disabled: () => state.submitting || !!fieldAccessor().disabled,
+    readonly: () => !!fieldAccessor().readonly,
+    'data-form-field': () => fieldAccessor().name || id,
   });
 
   const choiceGroupView = (
-    field: FormField,
+    fieldAccessor: () => FormField,
     id: string,
     type: 'checkbox' | 'radio'
   ): HTMLElement => {
-    const direction = field.vertical ? 'vertical' : 'horizontal';
-    const names = state.className;
     return jsx('div', {
-      className: joinClasses(
-        type === 'radio' ? names.radio : names.checkbox,
-        direction === 'vertical'
-          ? names.choiceVertical
-          : names.choiceHorizontal,
-        field.group ? names.choiceGroup : '',
-        field.size ? `is-${field.size}` : ''
-      ),
-      'data-form-choice-group': field.name || id,
+      className: () => {
+        const field = fieldAccessor();
+        const direction = field.vertical ? 'vertical' : 'horizontal';
+        const names = state.className;
+        return joinClasses(
+          type === 'radio' ? names.radio : names.checkbox,
+          direction === 'vertical'
+            ? names.choiceVertical
+            : names.choiceHorizontal,
+          field.group ? names.choiceGroup : '',
+          field.size ? `is-${field.size}` : ''
+        );
+      },
+      'data-form-choice-group': () => fieldAccessor().name || id,
       'data-choice-type': type,
-      'data-choice-layout': direction,
-      children: (field.options || []).map((option, optionIndex) => {
-        const item = normalizeOption(option);
-        const optionId = `${id}_${optionIndex}`;
-        return jsx('label', {
-          className: type === 'radio' ? names.radioLabel : '',
-          'data-form-choice': field.name || id,
-          for: optionId,
-          children: [
-            jsx('input', {
-              type,
-              id: optionId,
-              name: field.name,
-              value: item.value ?? '',
-              checked:
-                type === 'radio'
-                  ? isSelected(field.value, item.value)
-                  : isChecked(field.value, item.value, item.checked),
-              disabled: () =>
-                state.submitting || !!item.disabled || !!field.disabled,
-              required: !!field.required,
-              onChange: (event: Event) => {
-                const target = event.currentTarget;
-                if (target instanceof HTMLInputElement) {
-                  syncFieldValue(field, target, type);
-                }
-              },
-            }),
-            jsx('span', {
-              className: type === 'radio' ? names.radioText : '',
-              'data-form-choice-text': '',
-              children: item.text ?? item.label ?? item.value ?? '',
-            }),
-          ],
-        });
-      }),
+      'data-choice-layout': () =>
+        fieldAccessor().vertical ? 'vertical' : 'horizontal',
+      children: () =>
+        (fieldAccessor().options || []).map((option, optionIndex) => {
+          const item = normalizeOption(option);
+          const optionId = `${id}_${optionIndex}`;
+          return jsx('label', {
+            className: () =>
+              type === 'radio' ? state.className.radioLabel : '',
+            'data-form-choice': () => fieldAccessor().name || id,
+            for: optionId,
+            children: [
+              jsx('input', {
+                type,
+                id: optionId,
+                name: () => fieldAccessor().name,
+                value: item.value ?? '',
+                checked: () =>
+                  type === 'radio'
+                    ? isSelected(fieldAccessor().value, item.value)
+                    : isChecked(
+                        fieldAccessor().value,
+                        item.value,
+                        item.checked
+                      ),
+                disabled: () =>
+                  state.submitting ||
+                  !!item.disabled ||
+                  !!fieldAccessor().disabled,
+                required: () => !!fieldAccessor().required,
+                onChange: (event: Event) => {
+                  const target = event.currentTarget;
+                  if (target instanceof HTMLInputElement) {
+                    syncFieldValue(fieldAccessor(), target, type);
+                  }
+                },
+              }),
+              jsx('span', {
+                className: () =>
+                  type === 'radio' ? state.className.radioText : '',
+                'data-form-choice-text': '',
+                children: asRenderable(
+                  item.text ?? item.label ?? stringifyFormValue(item.value)
+                ),
+              }),
+            ],
+          });
+        }),
     }) as HTMLElement;
   };
 
   const controlView = (
-    type: FormItemType,
-    field: FormField,
+    itemAccessor: () => FormItem<FormField>,
+    fieldAccessor: () => FormField,
     id: string,
-    index: number,
-    item: FormItem<FormField>
+    indexAccessor: () => number
   ): RenderableContent<FormControlContext> => {
-    const names = state.className;
+    const type = itemAccessor().type;
     if (type === 'textarea') {
       return jsx(
         'textarea',
-        controlProps(field, id, {
-          className: field.className || names.textarea,
-          autocomplete: field.autocomplete,
-          value: field.value ?? '',
+        controlProps<HTMLTextAreaElement>(fieldAccessor, id, {
+          className: () =>
+            fieldAccessor().className || state.className.textarea,
+          autocomplete: () => fieldAccessor().autocomplete,
+          value: () => stringifyControlValue(fieldAccessor().value),
           onInput: (event: Event) => {
             const target = event.currentTarget;
             if (target instanceof HTMLTextAreaElement) {
-              syncFieldValue(field, target, 'textarea');
+              syncFieldValue(fieldAccessor(), target, 'textarea');
             }
           },
         })
@@ -786,84 +831,105 @@ export function createForm(input: FormProps = {}): Form {
     if (type === 'select') {
       return jsx(
         'select',
-        controlProps(field, id, {
-          className: field.className || names.select,
-          autocomplete: field.autocomplete || 'off',
-          multiple: !!field.multiple,
+        controlProps<HTMLSelectElement>(fieldAccessor, id, {
+          className: () => fieldAccessor().className || state.className.select,
+          autocomplete: () => fieldAccessor().autocomplete || 'off',
+          multiple: () => !!fieldAccessor().multiple,
+          value: () =>
+            fieldAccessor().multiple
+              ? undefined
+              : stringifyControlValue(fieldAccessor().value),
           onChange: (event: Event) => {
             const target = event.currentTarget;
             if (target instanceof HTMLSelectElement) {
-              syncFieldValue(field, target, 'select');
+              syncFieldValue(fieldAccessor(), target, 'select');
             }
           },
-          children: (field.options || []).map((option) => {
-            const item = normalizeOption(option);
-            return jsx('option', {
-              value: item.value ?? '',
-              disabled: !!item.disabled,
-              selected: isSelected(field.value, item.value),
-              children: item.text ?? item.label ?? item.value ?? '',
-            });
-          }),
+          children: () =>
+            (fieldAccessor().options || []).map((option) => {
+              const item = normalizeOption(option);
+              return jsx('option', {
+                value: item.value ?? '',
+                disabled: !!item.disabled,
+                selected: () => isSelected(fieldAccessor().value, item.value),
+                children: asRenderable(
+                  item.text ?? item.label ?? stringifyFormValue(item.value)
+                ),
+              });
+            }),
         })
       ) as HTMLSelectElement;
     }
-    if (type === 'radio') return choiceGroupView(field, id, 'radio');
-    if (type === 'checkbox' && Array.isArray(field.options)) {
-      return choiceGroupView(field, id, 'checkbox');
+    if (type === 'radio') return choiceGroupView(fieldAccessor, id, 'radio');
+    if (type === 'checkbox' && Array.isArray(fieldAccessor().options)) {
+      return choiceGroupView(fieldAccessor, id, 'checkbox');
     }
     if (type === 'switch') {
       return jsx('label', {
-        className: joinClasses(
-          names.switch,
-          field.variant ? `is-${field.variant}` : names.switchDefault,
-          field.size ? `is-${field.size}` : names.switchSizeMd
-        ),
-        'data-form-switch': field.name || id,
+        className: () => {
+          const field = fieldAccessor();
+          const names = state.className;
+          return joinClasses(
+            names.switch,
+            field.variant ? `is-${field.variant}` : names.switchDefault,
+            field.size ? `is-${field.size}` : names.switchSizeMd
+          );
+        },
+        'data-form-switch': () => fieldAccessor().name || id,
         for: id,
         children: [
           jsx('input', {
             type: 'checkbox',
             id,
-            name: field.name,
-            value: field.value ?? '1',
-            checked: !!field.checked,
-            disabled: () => state.submitting || !!field.disabled,
-            required: !!field.required,
+            name: () => fieldAccessor().name,
+            value: () => fieldAccessor().value ?? '1',
+            checked: () => !!fieldAccessor().checked,
+            disabled: () => state.submitting || !!fieldAccessor().disabled,
+            required: () => !!fieldAccessor().required,
             onChange: (event: Event) => {
               const target = event.currentTarget;
               if (target instanceof HTMLInputElement) {
-                syncFieldValue(field, target, 'switch');
+                syncFieldValue(fieldAccessor(), target, 'switch');
               }
             },
           }),
           jsx('span', {
-            className: names.switchSlider,
+            className: () => state.className.switchSlider,
             'data-form-switch-slider': '',
           }),
         ],
       }) as HTMLLabelElement;
     }
     if (type === 'custom') {
+      const field = fieldAccessor();
       return typeof field.content === 'function'
-        ? field.content({ form, field, index, item })
+        ? field.content({
+            form,
+            field,
+            index: indexAccessor(),
+            item: itemAccessor(),
+          })
         : field.content;
     }
     const inputType = type || 'text';
     return jsx('input', {
-      ...controlProps(field, id, {
+      ...controlProps<HTMLInputElement>(fieldAccessor, id, {
         type: inputType,
-        className: field.className || names.input,
-        autocomplete: field.autocomplete || autoComplete(inputType),
-        value: field.value ?? '',
+        className: () => fieldAccessor().className || state.className.input,
+        autocomplete: () =>
+          fieldAccessor().autocomplete || autoComplete(inputType),
+        value: () => fieldAccessor().value ?? '',
         onInput: (event: Event) => {
           const target = event.currentTarget;
           if (target instanceof HTMLInputElement) {
-            syncFieldValue(field, target, inputType);
+            syncFieldValue(fieldAccessor(), target, inputType);
           }
         },
       }),
-      checked: field.checked === undefined ? undefined : !!field.checked,
+      checked: () => {
+        const checked = fieldAccessor().checked;
+        return checked === undefined ? undefined : !!checked;
+      },
     }) as HTMLInputElement;
   };
 
@@ -871,11 +937,8 @@ export function createForm(input: FormProps = {}): Form {
     itemAccessor: () => FormItem<FormField>,
     indexAccessor: () => number
   ): HTMLElement => {
-    const item = itemAccessor();
-    const field = item.payload;
     const fieldAccessor = (): FormField => itemAccessor().payload;
-    const index = indexAccessor();
-    const id = resolveFieldId(field, index);
+    const id = resolveFieldId(fieldAccessor(), indexAccessor());
     return jsx('div', {
       className: () => state.className.item,
       'data-form-item': () => fieldAccessor().name || String(indexAccessor()),
@@ -898,7 +961,7 @@ export function createForm(input: FormProps = {}): Form {
               ),
             'data-form-label': () => fieldAccessor().name || id,
             for: id,
-            children: () => fieldAccessor().label,
+            children: () => asRenderable(fieldAccessor().label),
           });
         },
         jsx('div', {
@@ -906,7 +969,9 @@ export function createForm(input: FormProps = {}): Form {
           'data-form-control': () =>
             fieldAccessor().name || String(indexAccessor()),
           children: [
-            controlView(item.type, field, id, index, item),
+            asRenderable(
+              controlView(itemAccessor, fieldAccessor, id, indexAccessor)
+            ),
             () => {
               const current = fieldAccessor();
               return current.help
@@ -914,7 +979,7 @@ export function createForm(input: FormProps = {}): Form {
                     className: 'help-block',
                     'data-form-help': () =>
                       fieldAccessor().name || String(indexAccessor()),
-                    children: () => fieldAccessor().help,
+                    children: () => asRenderable(fieldAccessor().help),
                   })
                 : null;
             },
@@ -959,7 +1024,7 @@ export function createForm(input: FormProps = {}): Form {
             disabled: () => state.submitting || !!buttonAccessor().disabled,
             children: () => {
               const button = buttonAccessor();
-              const content = button.text ?? button.label ?? '';
+              const content = asRenderable(button.text ?? button.label ?? '');
               const submitting =
                 state.submitting &&
                 (button.type === 'submit' || button.action === 'submit');

package/src/components/modal.ts

@@ -17,7 +17,12 @@ import { icon } from '../primitives/icons.ts';
 import { createLoading } from '../primitives/loading.ts';
 import { createPopup } from '../primitives/popup.ts';
 import { joinClasses } from '../utilities/class-name.ts';
-import { all, q, type RenderableContent } from '../utilities/dom.ts';
+import {
+  all,
+  asRenderable,
+  q,
+  type RenderableContent,
+} from '../utilities/dom.ts';
 import { randomId } from '../utilities/id.ts';
 import { createMotionGroup, createTransition } from '../core/motion.ts';
 import { isPlainObject } from '../utilities/object.ts';
@@ -685,72 +690,74 @@ export function createModal(input: ModalProps = {}): Modal {
         ...(props.style ? { style: props.style } : {}),
         'data-mount': () => (motionVisible() ? 'true' : 'false'),
         children: [
-          jsx('div', {
-            className: props.className.header,
-            hidden: () => !props.header || state.loading,
-            children: () =>
-              props.header && !state.loading
-                ? [
-                    jsx('div', {
-                      className: props.className.title,
-                      id: `${props.id}_title`,
-                      'aria-label': props.text.title,
-                      children: props.text.title,
-                    }),
-                    props.showClose
-                      ? jsx('button', {
-                          type: 'button',
-                          className: joinClasses(
-                            props.className.button,
-                            props.className.closeBtn
-                          ),
-                          'data-action': 'close',
-                          'aria-label': t('Close', locales),
-                          disabled: isBusy,
-                          children: icon('close'),
-                        })
-                      : null,
-                  ]
-                : null,
-          }),
+          props.header
+            ? jsx('div', {
+                className: props.className.header,
+                children: () =>
+                  state.loading
+                    ? null
+                    : [
+                        jsx('div', {
+                          className: props.className.title,
+                          id: `${props.id}_title`,
+                          'aria-label': props.text.title,
+                          children: props.text.title,
+                        }),
+                        props.showClose
+                          ? jsx('button', {
+                              type: 'button',
+                              className: joinClasses(
+                                props.className.button,
+                                props.className.closeBtn
+                              ),
+                              'data-action': 'close',
+                              'aria-label': t('Close', locales),
+                              disabled: isBusy,
+                              children: icon('close'),
+                            })
+                          : null,
+                      ],
+              })
+            : null,
           jsx('div', {
             className: props.className.body,
             'data-modal-body': '',
             children: () => {
-              return resolvedContent().value;
+              return asRenderable(resolvedContent().value);
             },
           }),
-          jsx('div', {
-            className: props.className.footer,
-            hidden: () => !props.footer || state.loading,
-            children: () =>
-              props.footer && !state.loading
-                ? [
-                    props.showCancel
-                      ? jsx('button', {
+          props.footer
+            ? jsx('div', {
+                className: props.className.footer,
+                children: () =>
+                  state.loading
+                    ? null
+                    : [
+                        props.showCancel
+                          ? jsx('button', {
+                              type: 'button',
+                              className: joinClasses(
+                                props.className.button,
+                                props.className.cancelBtn
+                              ),
+                              'data-action': 'cancel',
+                              disabled: isBusy,
+                              children: props.text.cancel,
+                            })
+                          : null,
+                        jsx('button', {
                           type: 'button',
                           className: joinClasses(
                             props.className.button,
-                            props.className.cancelBtn
+                            props.className.confirmBtn
                           ),
-                          'data-action': 'cancel',
+                          'data-action': 'confirm',
                           disabled: isBusy,
-                          children: props.text.cancel,
-                        })
-                      : null,
-                    jsx('button', {
-                      type: 'button',
-                      className: joinClasses(
-                        props.className.button,
-                        props.className.confirmBtn
-                      ),
-                      'data-action': 'confirm',
-                      disabled: isBusy,
-                      children: props.text.confirm,
-                    }),
-                  ]
-                : null,
-          }),
+                          children: props.text.confirm,
+                        }),
+                      ],
+              })
+            : null,
         ],
       }) as HTMLElement;
       const root = createPopup({

package/src/components/offcanvas.ts

@@ -12,7 +12,7 @@ import {
   defineComponent,
 } from '../core/component.ts';
 import { createLoading } from '../primitives/loading.ts';
-import { type RenderableContent } from '../utilities/dom.ts';
+import { asRenderable, type RenderableContent } from '../utilities/dom.ts';
 import { randomId } from '../utilities/id.ts';
 import { createEventManager } from '../utilities/events.ts';
 import { createMotionGroup, createTransition } from '../core/motion.ts';
@@ -448,11 +448,13 @@ export function createOffcanvas(input: OffcanvasProps = {}): Offcanvas {
           className: props.className.content,
           'data-offcanvas-content': props.id,
           children: () =>
-            state.loading
-              ? createLoading()
-              : typeof state.resolvedContent === 'function'
-                ? state.resolvedContent(offcanvas)
-                : state.resolvedContent,
+            asRenderable(
+              state.loading
+                ? createLoading()
+                : typeof state.resolvedContent === 'function'
+                  ? state.resolvedContent(offcanvas)
+                  : state.resolvedContent
+            ),
         }),
       }) as HTMLElement;
     },