vanilla-jui 1.5.4 → 1.5.6

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

package/src/css/content.css

@@ -296,6 +296,10 @@
   /* ============================================
     Code - 代码
   ============================================ */
+  code {
+    box-decoration-break: clone;
+  }
+
   .j-content code:not([class*='language-']) {
     font-family:
       'SF Mono', SFMono-Regular, Consolas, 'Liberation Mono', Menlo, monospace;
@@ -331,7 +335,6 @@
     background: none;
     color: inherit;
     font-size: inherit;
-    white-space: pre;
   }
 
   .j-content pre.j-code-editor {
@@ -345,7 +348,6 @@
   .j-content pre.j-code-editor.hljs {
     color: var(--ui-fg);
     background: var(--content-bg-subtle);
-    white-space: break-spaces;
   }
 
   html.j-radius-round .j-content pre.j-code-editor {
@@ -389,8 +391,11 @@
 
   .j-content pre code[class*='language-'] {
     display: block;
-    overflow-x: auto;
     padding: 1.25em 1.5em;
+    overflow-x: auto;
+    scrollbar-width: thin;
+    scrollbar-color: var(--ui-border) transparent;
+    white-space: pre-wrap;
   }
 
   .j-content pre.j-code-editor .code-header + code[class*='language-'] {

package/src/locales/index.ts

@@ -43,5 +43,7 @@ export default {
     Confirm: '确认',
     Upgrade: '升级',
     wn: '您的浏览器版本过低，存在安全风险。请升级浏览器后再访问本站。',
+    Submit: '提交',
+    Reset: '重置',
   },
 };

package/src/primitives/drop.ts

@@ -1,6 +1,7 @@
 import { createRoot, createSignal, insert, jsx } from 'vanilla-signal';
 
 import {
+  asRenderable,
   type DOMReference,
   type RenderableContent,
   resolveElement,
@@ -245,7 +246,7 @@ export function createDrop(
       'aria-live': () =>
         typeof props.content === 'function' ? 'polite' : null,
       'aria-busy': () => String(loading()),
-      children: renderContent,
+      children: () => asRenderable(renderContent()),
     });
     return {
       root: jsx('div', {

package/src/primitives/popup.ts

@@ -1,6 +1,6 @@
-import { jsx } from 'vanilla-signal';
+import { type ElementProps, jsx } from 'vanilla-signal';
 
-import { type RenderableContent } from '../utilities/dom.ts';
+import { asRenderable, type RenderableContent } from '../utilities/dom.ts';
 import { type ResolveSchema, resolveProps } from '../utilities/types.ts';
 
 export interface PopupProps extends Record<string, unknown> {
@@ -45,10 +45,10 @@ function normalizeProps(input: PopupProps): ResolvedPopupProps {
 export function createPopup(props: PopupProps = {}): HTMLElement {
   const { className, position, component, labelledby, content } =
     normalizeProps(props);
-  const attrs: Record<string, unknown> = {
+  const attrs: ElementProps<HTMLDivElement> = {
     className: `${className} is-${position}`,
     role: 'dialog',
-    children: content,
+    children: asRenderable(content),
   };
 
   if (component) {

package/src/utilities/dom.ts

@@ -1,3 +1,4 @@
+import { type Renderable } from 'vanilla-signal';
 import {
   isDomElementValue,
   isDomNodeValue,
@@ -32,6 +33,12 @@ export type RenderableContent<TContext = unknown> =
   | readonly RenderableContent<TContext>[]
   | ((context: TContext) => RenderableContent<TContext>);
 
+export function asRenderable<TContext>(
+  value: RenderableContent<TContext>
+): Renderable {
+  return value as Renderable;
+}
+
 export interface LazyRenderOptions {
   threshold?: number | number[];
   rootMargin?: string;