vanilla-jui 1.5.5 → 1.5.7

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-jui",
-  "version": "1.5.5",
+  "version": "1.5.7",
   "private": false,
   "description": "A lightweight, reactive, and fully customizable vanilla JS UI library.",
   "keywords": [
@@ -61,9 +61,9 @@
     "prepublishOnly": "vp run build"
   },
   "dependencies": {
-    "vanilla-create-storage": "latest",
-    "vanilla-signal": "^1.1.4",
-    "vanilla-signal-i18n": "latest"
+    "vanilla-create-storage": "^1.0.4",
+    "vanilla-signal": "^1.1.14",
+    "vanilla-signal-i18n": "^1.1.2"
   },
   "devDependencies": {
     "@tsdown/css": "latest",

package/src/components/accordion.ts

@@ -14,7 +14,7 @@ import {
 } from '../core/component.ts';
 import { createLoading } from '../primitives/loading.ts';
 import { icon } from '../primitives/icons.ts';
-import { type RenderableContent } from '../utilities/dom.ts';
+import { asRenderable, type RenderableContent } from '../utilities/dom.ts';
 import { randomId } from '../utilities/id.ts';
 import {
   type CollapseMotionController,
@@ -599,7 +599,8 @@ export function createAccordion(props: AccordionProps): AccordionInstance {
     const content = createContentRenderer(itemAccessor, indexAccessor, name);
     const headerId = `${resolvedProps.id}_header_${name}`;
     const panelId = `${resolvedProps.id}_panel_${name}`;
-    const handleKeyDown = (event: KeyboardEvent): void => {
+    const handleKeyDown = (event: Event): void => {
+      if (!(event instanceof KeyboardEvent)) return;
       if (event.key !== 'Enter' && event.key !== ' ') return;
       event.preventDefault();
       void activate(name);
@@ -624,7 +625,7 @@ export function createAccordion(props: AccordionProps): AccordionInstance {
             role: 'heading',
             children: () => {
               const item = itemAccessor();
-              return titleView(item.title, item, indexAccessor());
+              return asRenderable(titleView(item.title, item, indexAccessor()));
             },
           }),
           jsx('span', {
@@ -649,7 +650,7 @@ export function createAccordion(props: AccordionProps): AccordionInstance {
         children: jsx('div', {
           className: resolvedProps.className.content,
           'data-accordion-content': name,
-          children: content.render,
+          children: () => asRenderable(content.render()),
         }),
       }),
     ];

package/src/components/flow.ts

@@ -4,7 +4,7 @@ import {
   type FunctionalComponent,
   defineComponent,
 } from '../core/component.ts';
-import { type RenderableContent } from '../utilities/dom.ts';
+import { asRenderable, type RenderableContent } from '../utilities/dom.ts';
 import { randomId } from '../utilities/id.ts';
 import { isPlainObject } from '../utilities/object.ts';
 import {
@@ -906,57 +906,59 @@ export function createFlow(input: FlowProps = {}): Flow {
             jsx('div', {
               className: props.className.header,
               'data-flow-header': '',
-              children: renderSlot('renderHeader', () =>
-                jsx('ol', {
-                  className: props.className.steps,
-                  'data-flow-steps': '',
-                  role: 'list',
-                  'aria-label': 'Flow steps',
-                  children: steps.map((step, index) =>
-                    jsx('li', {
-                      className: () =>
-                        [
-                          props.className.step,
-                          index === state.currentIndex
-                            ? props.className.active
-                            : '',
-                          index < state.currentIndex
-                            ? props.className.complete
-                            : '',
-                        ]
-                          .filter(Boolean)
-                          .join(' '),
-                      'data-flow-step': step.id,
-                      'data-flow-step-index': String(index),
-                      'aria-current': () =>
-                        index === state.currentIndex ? 'step' : null,
-                      children: jsx('button', {
-                        type: 'button',
-                        className: props.className.stepButton,
-                        disabled: () =>
-                          props.linear && index > state.currentIndex,
+              children: asRenderable(
+                renderSlot('renderHeader', () =>
+                  jsx('ol', {
+                    className: props.className.steps,
+                    'data-flow-steps': '',
+                    role: 'list',
+                    'aria-label': 'Flow steps',
+                    children: steps.map((step, index) =>
+                      jsx('li', {
+                        className: () =>
+                          [
+                            props.className.step,
+                            index === state.currentIndex
+                              ? props.className.active
+                              : '',
+                            index < state.currentIndex
+                              ? props.className.complete
+                              : '',
+                          ]
+                            .filter(Boolean)
+                            .join(' '),
+                        'data-flow-step': step.id,
+                        'data-flow-step-index': String(index),
                         'aria-current': () =>
                           index === state.currentIndex ? 'step' : null,
-                        onClick: () => {
-                          if (index !== state.currentIndex)
-                            void flow.goTo(index);
-                        },
-                        children: [
-                          jsx('span', {
-                            className: props.className.stepIndex,
-                            'data-flow-step-number': '',
-                            children: index + 1,
-                          }),
-                          jsx('span', {
-                            className: props.className.stepTitle,
-                            'data-flow-step-title': '',
-                            children: step.title || step.id,
-                          }),
-                        ],
-                      }),
-                    })
-                  ),
-                })
+                        children: jsx('button', {
+                          type: 'button',
+                          className: props.className.stepButton,
+                          disabled: () =>
+                            props.linear && index > state.currentIndex,
+                          'aria-current': () =>
+                            index === state.currentIndex ? 'step' : null,
+                          onClick: () => {
+                            if (index !== state.currentIndex)
+                              void flow.goTo(index);
+                          },
+                          children: [
+                            jsx('span', {
+                              className: props.className.stepIndex,
+                              'data-flow-step-number': '',
+                              children: index + 1,
+                            }),
+                            jsx('span', {
+                              className: props.className.stepTitle,
+                              'data-flow-step-title': '',
+                              children: step.title || step.id,
+                            }),
+                          ],
+                        }),
+                      })
+                    ),
+                  })
+                )
               ),
             }),
             jsx('div', {
@@ -965,53 +967,66 @@ export function createFlow(input: FlowProps = {}): Flow {
               role: 'region',
               'aria-live': 'polite',
               'aria-busy': () => (state.loading ? 'true' : 'false'),
-              children: renderSlot('renderBody', () => () => {
-                const version = state.version;
-                return version >= 0 ? contentView() : null;
-              }),
+              children: asRenderable(
+                renderSlot('renderBody', () => () => {
+                  const version = state.version;
+                  return version >= 0 ? contentView() : null;
+                })
+              ),
             }),
             jsx('div', {
               className: props.className.footer,
               'data-flow-footer': '',
-              children: renderSlot('renderFooter', () => [
-                props.showReset
-                  ? jsx('button', {
-                      type: 'button',
-                      className: [props.className.button, props.className.reset]
-                        .filter(Boolean)
-                        .join(' '),
-                      'data-action': 'reset',
-                      onClick: () => flow.reset(),
-                      disabled: () => state.loading,
-                      children: props.text.reset,
-                    })
-                  : null,
-                props.showBack
-                  ? jsx('button', {
-                      type: 'button',
-                      className: [props.className.button, props.className.back]
-                        .filter(Boolean)
-                        .join(' '),
-                      'data-action': 'back',
-                      onClick: () => void flow.back(),
-                      disabled: () => !flow.canBack,
-                      children: props.text.back,
-                    })
-                  : null,
-                props.showNext
-                  ? jsx('button', {
-                      type: 'button',
-                      className: [props.className.button, props.className.next]
-                        .filter(Boolean)
-                        .join(' '),
-                      'data-action': 'next',
-                      onClick: () => void flow.next(),
-                      disabled: () => state.loading,
-                      children: () =>
-                        flow.isLast ? props.text.finish : props.text.next,
-                    })
-                  : null,
-              ]),
+              children: asRenderable(
+                renderSlot('renderFooter', () => [
+                  props.showReset
+                    ? jsx('button', {
+                        type: 'button',
+                        className: [
+                          props.className.button,
+                          props.className.reset,
+                        ]
+                          .filter(Boolean)
+                          .join(' '),
+                        'data-action': 'reset',
+                        onClick: () => flow.reset(),
+                        disabled: () => state.loading,
+                        children: props.text.reset,
+                      })
+                    : null,
+                  props.showBack
+                    ? jsx('button', {
+                        type: 'button',
+                        className: [
+                          props.className.button,
+                          props.className.back,
+                        ]
+                          .filter(Boolean)
+                          .join(' '),
+                        'data-action': 'back',
+                        onClick: () => void flow.back(),
+                        disabled: () => !flow.canBack,
+                        children: props.text.back,
+                      })
+                    : null,
+                  props.showNext
+                    ? jsx('button', {
+                        type: 'button',
+                        className: [
+                          props.className.button,
+                          props.className.next,
+                        ]
+                          .filter(Boolean)
+                          .join(' '),
+                        'data-action': 'next',
+                        onClick: () => void flow.next(),
+                        disabled: () => state.loading,
+                        children: () =>
+                          flow.isLast ? props.text.finish : props.text.next,
+                      })
+                    : null,
+                ])
+              ),
             }),
           ],
         }) as HTMLElement,

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 {
@@ -380,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(
@@ -702,11 +717,11 @@ export function createForm(input: FormProps = {}): Form {
     setChainVersion((version: number) => version + 1);
   };
 
-  const controlProps = <TExtra extends Record<string, unknown>>(
+  const controlProps = <TElement extends Element>(
     fieldAccessor: () => FormField,
     id: string,
-    extra: TExtra
-  ): TExtra & Record<string, unknown> => ({
+    extra: ElementProps<TElement>
+  ): ElementProps<TElement> => ({
     ...extra,
     name: () => fieldAccessor().name,
     id,
@@ -779,7 +794,9 @@ export function createForm(input: FormProps = {}): Form {
                 className: () =>
                   type === 'radio' ? state.className.radioText : '',
                 'data-form-choice-text': '',
-                children: item.text ?? item.label ?? item.value ?? '',
+                children: asRenderable(
+                  item.text ?? item.label ?? stringifyFormValue(item.value)
+                ),
               }),
             ],
           });
@@ -797,11 +814,11 @@ export function createForm(input: FormProps = {}): Form {
     if (type === 'textarea') {
       return jsx(
         'textarea',
-        controlProps(fieldAccessor, id, {
+        controlProps<HTMLTextAreaElement>(fieldAccessor, id, {
           className: () =>
             fieldAccessor().className || state.className.textarea,
           autocomplete: () => fieldAccessor().autocomplete,
-          value: () => fieldAccessor().value ?? '',
+          value: () => stringifyControlValue(fieldAccessor().value),
           onInput: (event: Event) => {
             const target = event.currentTarget;
             if (target instanceof HTMLTextAreaElement) {
@@ -814,10 +831,14 @@ export function createForm(input: FormProps = {}): Form {
     if (type === 'select') {
       return jsx(
         'select',
-        controlProps(fieldAccessor, id, {
+        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) {
@@ -831,7 +852,9 @@ export function createForm(input: FormProps = {}): Form {
                 value: item.value ?? '',
                 disabled: !!item.disabled,
                 selected: () => isSelected(fieldAccessor().value, item.value),
-                children: item.text ?? item.label ?? item.value ?? '',
+                children: asRenderable(
+                  item.text ?? item.label ?? stringifyFormValue(item.value)
+                ),
               });
             }),
         })
@@ -890,7 +913,7 @@ export function createForm(input: FormProps = {}): Form {
     }
     const inputType = type || 'text';
     return jsx('input', {
-      ...controlProps(fieldAccessor, id, {
+      ...controlProps<HTMLInputElement>(fieldAccessor, id, {
         type: inputType,
         className: () => fieldAccessor().className || state.className.input,
         autocomplete: () =>
@@ -938,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', {
@@ -946,7 +969,9 @@ export function createForm(input: FormProps = {}): Form {
           'data-form-control': () =>
             fieldAccessor().name || String(indexAccessor()),
           children: [
-            controlView(itemAccessor, fieldAccessor, id, indexAccessor),
+            asRenderable(
+              controlView(itemAccessor, fieldAccessor, id, indexAccessor)
+            ),
             () => {
               const current = fieldAccessor();
               return current.help
@@ -954,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;
             },
@@ -999,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';
@@ -718,7 +723,7 @@ export function createModal(input: ModalProps = {}): Modal {
             className: props.className.body,
             'data-modal-body': '',
             children: () => {
-              return resolvedContent().value;
+              return asRenderable(resolvedContent().value);
             },
           }),
           props.footer

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;
     },

package/src/components/swiper.ts

@@ -14,7 +14,12 @@ import {
 import { icon } from '../primitives/icons.ts';
 import { createLoading } from '../primitives/loading.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 { createEventManager } from '../utilities/events.ts';
 import { randomId } from '../utilities/id.ts';
 import { createScheduledTask } from '../core/scheduler.ts';
@@ -706,51 +711,52 @@ export function createSwiper(input: SwiperProps = {}): Swiper {
   };
 
   const slideView = (itemAccessor: () => TrackItem): HTMLElement => {
-    const initial = itemAccessor();
-    const tag = initial.item.url ? 'a' : 'div';
-    return jsx(tag, {
+    const slideContent = () => {
+      const { item, index } = itemAccessor();
+      const context = { swiper, item, index };
+      if (item.children != null) {
+        return asRenderable(
+          typeof item.children === 'function'
+            ? item.children(context)
+            : item.children
+        );
+      }
+      return [
+        item.image
+          ? jsx('img', {
+              className: props.className.image,
+              alt: item.title || '',
+              loading: 'lazy',
+              ...(props.lazyload
+                ? { 'data-lazy': item.image }
+                : { src: item.image }),
+            })
+          : null,
+        item.title
+          ? jsx('span', {
+              className: props.className.title,
+              children: item.title,
+            })
+          : null,
+      ];
+    };
+    const commonProps = {
       className: props.className.slide,
-      href: () => itemAccessor().item.url || undefined,
-      target: () =>
-        itemAccessor().item.url
-          ? itemAccessor().item.blank
-            ? '_blank'
-            : '_self'
-          : undefined,
       'data-swiper-slide': () => String(itemAccessor().index),
       'data-swiper-index': () =>
         itemAccessor().clone ? null : String(itemAccessor().index),
       'data-clone': () => itemAccessor().clone,
       role: 'group',
       'aria-label': () => `Slide ${itemAccessor().index + 1}`,
-      children: () => {
-        const { item, index } = itemAccessor();
-        const context = { swiper, item, index };
-        if (item.children != null) {
-          return typeof item.children === 'function'
-            ? item.children(context)
-            : item.children;
-        }
-        return [
-          item.image
-            ? jsx('img', {
-                className: props.className.image,
-                alt: item.title || '',
-                loading: 'lazy',
-                ...(props.lazyload
-                  ? { 'data-lazy': item.image }
-                  : { src: item.image }),
-              })
-            : null,
-          item.title
-            ? jsx('span', {
-                className: props.className.title,
-                children: item.title,
-              })
-            : null,
-        ];
-      },
-    }) as HTMLElement;
+      children: slideContent,
+    };
+    return itemAccessor().item.url
+      ? jsx('a', {
+          ...commonProps,
+          href: () => itemAccessor().item.url || '',
+          target: () => (itemAccessor().item.blank ? '_blank' : '_self'),
+        })
+      : jsx('div', commonProps);
   };
 
   swiper = defineComponent<

package/src/components/tabs.ts

@@ -15,7 +15,7 @@ import {
 } from '../core/component.ts';
 import { createLoading } from '../primitives/loading.ts';
 import { joinClasses } from '../utilities/class-name.ts';
-import { type RenderableContent } from '../utilities/dom.ts';
+import { asRenderable, type RenderableContent } from '../utilities/dom.ts';
 import { createEventManager } from '../utilities/events.ts';
 import { randomId } from '../utilities/id.ts';
 import { createElementRef, createKeyedElementRefs } from '../utilities/refs.ts';
@@ -515,7 +515,7 @@ export function createTabs(input: TabsProps = {}): Tabs {
       'aria-busy': () => String(loading()),
       hidden: () => !isActive(name),
       ref: panels.bind(name),
-      children: panelContent,
+      children: () => asRenderable(panelContent()),
     }) as HTMLElement;
   };
 
@@ -528,7 +528,7 @@ export function createTabs(input: TabsProps = {}): Tabs {
       'aria-selected': () => (isActive(name) ? 'true' : 'false'),
       'aria-disabled': () => (isDisabled(name) ? 'true' : 'false'),
       ref: tabs.bind(name),
-      children: item().title,
+      children: () => asRenderable(item().title),
     }) as HTMLElement;
   };