vanilla-jui 1.7.31 → 1.7.33

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-jui",
-  "version": "1.7.31",
+  "version": "1.7.33",
   "private": false,
   "description": "A lightweight, reactive, and fully customizable vanilla JS UI library.",
   "keywords": [

package/src/components/accordion.ts

@@ -1,5 +1,6 @@
 import {
   For,
+  Show,
   createDeepStore,
   createEffect,
   createSignal,
@@ -14,7 +15,11 @@ import {
 } from '../core/component.ts';
 import { createLoading } from '../primitives/loading.ts';
 import { icon } from '../primitives/icons.ts';
-import { asRenderable, type RenderableContent } from '../utilities/dom.ts';
+import {
+  asRenderable,
+  joinClasses,
+  type RenderableContent,
+} from '../utilities/dom.ts';
 import { randomId } from '../utilities/id.ts';
 import {
   type CollapseMotionController,
@@ -124,7 +129,7 @@ const DEFAULT_CLASS_NAMES: AccordionClassNames = {
   root: 'j-accordion',
   header: 'accordion-header',
   title: 'header-title',
-  arrow: 'header-arrow j-button is-ghost is-sm is-icon',
+  arrow: 'header-arrow j-btn is-ghost is-sm is-icon',
   panel: 'accordion-panel',
   content: 'panel-content',
 };
@@ -622,10 +627,17 @@ export function createAccordion(props: AccordionProps): AccordionInstance {
               return asRenderable(titleView(item.title, item, indexAccessor()));
             },
           }),
-          jsx('span', {
-            className: resolvedProps.className.arrow,
-            'data-accordion-arrow': name,
-            children: icon('arrow-down'),
+          Show({
+            when: () => resolvedProps.direction !== 'horizontal',
+            children: jsx('span', {
+              className: resolvedProps.className.arrow,
+              'data-accordion-arrow': name,
+              children: Show({
+                when: () => isActive(name),
+                children: icon('minus'),
+                fallback: icon('add'),
+              }),
+            }),
           }),
         ],
       }),
@@ -673,10 +685,12 @@ export function createAccordion(props: AccordionProps): AccordionInstance {
     },
     view: () => {
       const root = jsx('div', {
-        className: resolvedProps.className.root,
+        className: joinClasses(
+          resolvedProps.className.root,
+          resolvedProps.direction === 'horizontal' && 'is-horizontal'
+        ),
         id: resolvedProps.id,
         'data-accordion': 'root',
-        'data-direction': resolvedProps.direction,
         children: For({
           each: () => state.data,
           key: (item: AccordionItem) => itemName(item),

package/src/components/flow.ts

@@ -327,7 +327,7 @@ const DEFAULT_CLASS_NAMES: FlowClassNames = {
   stepTitle: 'flow-step-title',
   body: 'flow-body',
   footer: 'flow-footer',
-  button: 'j-button',
+  button: 'j-btn',
   reset: 'is-ghost flow-reset',
   back: 'is-ghost flow-back',
   next: 'is-solid flow-next',

package/src/components/form.ts

@@ -198,7 +198,7 @@ const DEFAULT_CLASS_NAMES: FormClassNames = {
   control: 'field-control',
   helpInvalid: 'is-invalid',
   buttons: 'form-buttons',
-  button: 'j-button',
+  button: 'j-btn',
   submitBtn: 'is-solid',
   resetBtn: 'is-ghost',
   input: 'j-input',

package/src/components/modal.ts

@@ -136,7 +136,7 @@ const DEFAULT_CLASS_NAMES: ModalClassNames = {
   body: 'modal-body',
   footer: 'modal-footer',
   title: 'modal-title',
-  button: 'j-button',
+  button: 'j-btn',
   closeBtn: 'is-icon is-sm is-ghost',
   cancelBtn: 'is-ghost',
   confirmBtn: 'is-solid',

package/src/components/offcanvas.ts

@@ -99,7 +99,7 @@ interface OffcanvasRuntimeExtras {
 const DEFAULT_CLASS_NAMES: OffcanvasClassNames = {
   root: 'j-offcanvas',
   overlay: 'j-offcanvas-overlay',
-  content: 'offcanvas-content',
+  content: 'offcanvas-panel',
 };
 
 const OFFCANVAS_HIDDEN_TRANSFORM: Record<OffcanvasDirection, string> = {
@@ -450,7 +450,7 @@ export function createOffcanvas(input: OffcanvasProps = {}): Offcanvas {
         },
         children: jsx('div', {
           className: props.className.content,
-          'data-offcanvas-content': props.id,
+          'data-offcanvas-panel': props.id,
           children: () =>
             asRenderable(
               state.loading ? createLoading() : renderResolvedContent()

package/src/components/pagination.ts

@@ -100,9 +100,9 @@ const DEFAULT_CLASS_NAMES: PaginationClassNames = {
   root: 'j-pagination',
   list: 'pagination',
   item: 'item',
-  button: 'j-button is-ghost is-icon',
-  currentBtn: 'j-button is-outline is-icon is-active',
-  moreBtn: 'j-button is-ghost is-icon',
+  button: 'j-btn is-ghost is-icon',
+  currentBtn: 'j-btn is-default is-icon is-active',
+  moreBtn: 'j-btn is-ghost is-icon',
   loading: 'animate-spin',
 };
 
@@ -371,10 +371,10 @@ export function createPagination(input: PaginationProps = {}): Pagination {
         className: props.className.item,
         'data-pagination-more': () =>
           itemAccessor().type === 'more' ? itemAccessor().key : null,
-        children: jsx('span', {
+        children: jsx('button', {
           className: props.className.moreBtn,
           'aria-disabled': true,
-          disabled: '',
+          disabled: true,
           children: icon('more'),
         }),
       }) as HTMLElement;

package/src/components/tabs.ts

@@ -13,6 +13,7 @@ import {
   type FunctionalComponent,
   defineComponent,
 } from '../core/component.ts';
+import { createTransition, type TransitionDefinition } from '../core/motion.ts';
 import { createLoading } from '../primitives/loading.ts';
 import {
   asRenderable,
@@ -35,6 +36,7 @@ export interface TabsClassNames {
   wrap: string;
   list: string;
   tab: string;
+  indicator: string;
   panelWrap: string;
   panel: string;
   dragging: string;
@@ -130,9 +132,10 @@ type PointerDragEvent = MouseEvent | TouchEvent;
 const DEFAULT_CLASS_NAMES: TabsClassNames = {
   root: 'j-tabs',
   wrap: 'tab-wrap',
-  list: 'tab-list',
+  list: 'tab-nav',
   tab: 'tab-item',
-  panelWrap: 'panel-list',
+  indicator: 'tab-indicator',
+  panelWrap: 'tab-panel',
   panel: 'panel-item',
   dragging: 'dragging',
 };
@@ -240,6 +243,7 @@ export function createTabs(input: TabsProps = {}): Tabs {
   const events = createEventManager();
   const wrapRef = createElementRef<HTMLElement>();
   const listRef = createElementRef<HTMLElement>();
+  const indicatorRef = createElementRef<HTMLElement>();
   const tabs = createKeyedElementRefs<string, HTMLElement>();
   const panels = createKeyedElementRefs<string, HTMLElement>();
   const cache = new Map<string, TabsPanelCacheEntry>();
@@ -250,6 +254,21 @@ export function createTabs(input: TabsProps = {}): Tabs {
   let inertiaFrame = 0;
   let resizeFrame = 0;
   let velocity = 0;
+  let indicatorName: string | null = null;
+  let resizeObserver: ResizeObserver | null = null;
+  const observed = new Set<Element>();
+  const indicatorTransition: TransitionDefinition = {
+    keyframes: [],
+    options: {
+      duration: 240,
+      easing: 'cubic-bezier(0.16, 1, 0.3, 1)',
+      fill: 'none',
+    },
+  };
+  const indicatorMotion = createTransition(
+    () => indicatorRef.current,
+    indicatorTransition
+  );
 
   const getIndex = (value: TabsValue): number =>
     typeof value === 'number'
@@ -299,7 +318,72 @@ export function createTabs(input: TabsProps = {}): Tabs {
       });
     }
   };
-  const refreshTask = createScheduledTask(refreshDrag);
+  const refreshIndicator = (): void => {
+    const indicator = indicatorRef.current;
+    const list = listRef.current;
+    const name = current().name;
+    const tab = name ? tabs.get(name) : null;
+    if (!indicator || !list) return;
+    if (!tab || !list.isConnected) {
+      indicatorMotion.cancel();
+      indicator.style.display = 'none';
+      indicatorName = null;
+      return;
+    }
+    const target = tab.getBoundingClientRect();
+    const origin = list.getBoundingClientRect();
+    if (!target.width || !target.height) return;
+    // Read the visible position before cancelling an interrupted animation.
+    const previous = indicator.getBoundingClientRect();
+    const animate =
+      indicatorName !== null &&
+      indicatorName !== name &&
+      previous.width > 0 &&
+      previous.height > 0;
+    const x = target.left - origin.left + list.scrollLeft - list.clientLeft;
+    const y = target.top - origin.top + list.scrollTop - list.clientTop;
+    const transform = `translate3d(${x}px, ${y}px, 0)`;
+    indicatorMotion.cancel();
+    Object.assign(indicator.style, {
+      display: 'block',
+      width: `${target.width}px`,
+      height: `${target.height}px`,
+      transform,
+    });
+    indicatorName = name;
+    if (animate) {
+      indicatorTransition.keyframes = [
+        {
+          transform: `translate3d(${previous.left - origin.left + list.scrollLeft - list.clientLeft}px, ${previous.top - origin.top + list.scrollTop - list.clientTop}px, 0) scale(${previous.width / target.width}, ${previous.height / target.height})`,
+        },
+        { transform },
+      ];
+      void indicatorMotion.enter();
+    }
+  };
+  const refreshTask = createScheduledTask(() => {
+    refreshDrag();
+    refreshIndicator();
+    if (!resizeObserver) return;
+    const targets = new Set<Element>([
+      ...(listRef.current ? [listRef.current] : []),
+      ...(wrapRef.current ? [wrapRef.current] : []),
+      ...state.data.flatMap((item) => {
+        const tab = tabs.get(item.name as string);
+        return tab ? [tab] : [];
+      }),
+    ]);
+    for (const target of observed) {
+      if (!targets.has(target)) {
+        resizeObserver.unobserve(target);
+        observed.delete(target);
+      }
+    }
+    for (const target of targets) {
+      if (!observed.has(target)) resizeObserver.observe(target);
+      observed.add(target);
+    }
+  });
 
   const startInertia = (): void => {
     const wrap = wrapRef.current;
@@ -526,6 +610,9 @@ export function createTabs(input: TabsProps = {}): Tabs {
       };
       return typeof value === 'function' ? value(context) : value;
     };
+    const text = jsx('span', {
+      children: () => asRenderable(title()),
+    });
     return jsx('div', {
       className: props.className.tab,
       'data-tabs-tab': name,
@@ -533,7 +620,7 @@ export function createTabs(input: TabsProps = {}): Tabs {
       'aria-selected': () => (isActive(name) ? 'true' : 'false'),
       'aria-disabled': () => (isDisabled(name) ? 'true' : 'false'),
       ref: tabs.bind(name),
-      children: () => asRenderable(title()),
+      children: text,
     }) as HTMLElement;
   };
 
@@ -578,16 +665,37 @@ export function createTabs(input: TabsProps = {}): Tabs {
       }
     },
     view: () => {
+      const indicator = jsx('div', {
+        className: props.className.indicator,
+        'data-tabs-indicator': '',
+        'aria-hidden': 'true',
+        ref: indicatorRef.set,
+        style: {
+          position: 'absolute',
+          top: '0',
+          left: '0',
+          pointerEvents: 'none',
+          transformOrigin: '0 0',
+          display: 'none',
+        },
+      });
+      const tabList = For({
+        each: renderableData,
+        key: (item: TabItem) => item.name,
+        children: (item: () => TabItem, index: () => number) =>
+          tabView(item, index),
+      });
       createEffect(() => {
-        const dataLength = state.data.length;
+        const names = state.data.map((item) => item.name);
+        const active = state.active;
         refreshTask.schedule();
-        return dataLength;
+        return { names, active };
       });
       return jsx('div', {
         className: props.className.root,
         id: props.id,
         'data-tabs': 'root',
-        'data-tabs-direction': props.direction,
+        'data-direction': props.direction,
         children: [
           jsx('div', {
             className: props.className.wrap,
@@ -599,19 +707,14 @@ export function createTabs(input: TabsProps = {}): Tabs {
                   props.className.list,
                   state.dragging && props.className.dragging
                 ),
-              'data-tabs-list': '',
+              'data-tabs-nav': '',
               ref: listRef.set,
-              children: For({
-                each: renderableData,
-                key: (item: TabItem) => item.name,
-                children: (item: () => TabItem, index: () => number) =>
-                  tabView(item, index),
-              }),
+              children: () => [indicator, tabList],
             }),
           }),
           jsx('div', {
             className: props.className.panelWrap,
-            'data-tabs-panel-wrap': '',
+            'data-tabs-panels': '',
             children: For({
               each: renderableData,
               key: (item: TabItem) => item.name,
@@ -633,8 +736,16 @@ export function createTabs(input: TabsProps = {}): Tabs {
       });
       events.on('resize', window, 'resize', () => {
         cancelAnimationFrame(resizeFrame);
-        resizeFrame = requestAnimationFrame(refreshDrag);
+        resizeFrame = requestAnimationFrame(() => refreshTask.schedule());
       });
+      if (typeof ResizeObserver !== 'undefined') {
+        resizeObserver = new ResizeObserver(() => refreshTask.schedule());
+        context.own(() => {
+          resizeObserver?.disconnect();
+          resizeObserver = null;
+          observed.clear();
+        });
+      }
       bindDrag();
       context.own(() => events.clear());
       refreshTask.schedule();
@@ -643,8 +754,13 @@ export function createTabs(input: TabsProps = {}): Tabs {
     onMount() {
       refreshTask.schedule();
     },
+    onUnmount() {
+      indicatorMotion.cancel();
+      indicatorName = null;
+    },
     onDestroy() {
       loadId += 1;
+      indicatorMotion.cancel();
       refreshTask.dispose();
       cancelAnimationFrame(inertiaFrame);
       cancelAnimationFrame(resizeFrame);

package/src/css/animation.css

@@ -1,4 +1,5 @@
 @layer animation {
+
   /* none */
   .animate-none {
     animation: none;
@@ -21,6 +22,7 @@
   }
 
   @keyframes animate-ping {
+
     75%,
     100% {
       transform: scale(2);
@@ -45,6 +47,7 @@
   }
 
   @keyframes animate-bounce {
+
     0%,
     100% {
       transform: translateY(-25%);
@@ -53,12 +56,12 @@
 
     50% {
       transform: translateY(0);
-
       animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
     }
   }
 
   @keyframes animate-bounce {
+
     0%,
     100% {
       transform: translateY(-25%);
@@ -67,7 +70,6 @@
 
     50% {
       transform: translateY(0);
-
       animation-timing-function: cubic-bezier(0, 0, 0.2, 1);
     }
   }
@@ -112,6 +114,7 @@
   }
 
   @keyframes animate-shake {
+
     0%,
     100% {
       transform: translateX(0);
@@ -131,6 +134,7 @@
   }
 
   @keyframes animate-shake {
+
     0%,
     100% {
       transform: translateX(0);
@@ -242,4 +246,4 @@
       transform: translateY(0);
     }
   }
-}
+}

package/src/css/card.css

@@ -31,7 +31,7 @@
     color: var(--ui-fg);
     font-size: var(--font-size-md);
     font-weight: var(--font-medium);
-    padding: var(--s3) var(--s4);
+    padding: 12px 16px;
     margin: 0;
   }
 
@@ -45,7 +45,7 @@
     border: none;
     margin: 0;
     padding: 0;
-    padding: var(--space) var(--s2);
+    padding: 4px 8px;
     appearance: none;
     cursor: pointer;
   }
@@ -85,7 +85,7 @@
   }
 
   .j-card .card-content {
-    padding: var(--s4);
+    padding: 16px;
   }
 
   .j-card .card-content:last-child,
@@ -106,7 +106,7 @@
     display: flex;
     align-items: stretch;
     overflow: hidden;
-    gap: var(--s2);
+    gap: 8px;
   }
 
   /* vertical */
@@ -117,8 +117,8 @@
   .j-card.is-vertical .card-header {
     flex-direction: column;
     align-items: flex-start;
-    gap: var(--s2);
-    padding: var(--s4) var(--s4) 0;
+    gap: 8px;
+    padding: 16px 16px 0;
   }
 
   .j-card.is-vertical .card-header .header-title {
@@ -137,14 +137,14 @@
 
   .j-card .card-footer {
     border-top: none;
-    padding: var(--s4);
+    padding: 16px;
   }
 
-  .j-card .card-content + .card-footer {
+  .j-card .card-content+.card-footer {
     padding-top: 0;
   }
 
-  .j-card .card-footer:has(.j-button-group) {
+  .j-card .card-footer:has(.j-btns) {
     padding-top: 4px;
   }
-}
+}

package/src/css/font.css

@@ -12,13 +12,10 @@
   }
 
   .font-mono {
-    font-family:
-      Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
+    font-family: Menlo, Monaco, Consolas, 'Liberation Mono', 'Courier New', monospace;
   }
 
   .font-math {
-    font-family:
-      Cambria Math,
-      Latin Modern Math;
+    font-family: Cambria Math, Latin Modern Math;
   }
-}
+}

package/src/css/icon.css

@@ -5,21 +5,17 @@
 
   /* close icon */
   .icon-close {
-    box-sizing: border-box;
     position: relative;
     display: block;
-    transform: scale(1);
     width: var(--font-size-xl);
     height: var(--font-size-xl);
     color: inherit;
-    cursor: pointer;
   }
 
   .icon-close::after,
   .icon-close::before {
     content: '';
     position: absolute;
-    box-sizing: border-box;
     top: 50%;
     left: 50%;
     width: 12px;
@@ -37,20 +33,7 @@
     transform: translate(-50%, -50%) rotate(-45deg);
   }
 
-  .icon-close:active {
-    transform: translateY(1px);
-  }
-
-  .icon-close:focus-within {
+  /* .icon-close:focus-within {
     background-color: var(--tone-subtle);
-  }
-
-  /* icon status */
-  .el-icon[data-action='close'] {
-    cursor: pointer;
-  }
-
-  .el-icon[data-action='close']:active {
-    transform: scale(0.85);
-  }
-}
+  } */
+}

package/src/css/layout.css

@@ -104,11 +104,9 @@
       linear-gradient(to right, var(--ui-surface-subtle) 1px, transparent 1px),
       linear-gradient(to bottom, var(--ui-surface-subtle) 1px, transparent 1px);
     background-size: 40px 56px;
-    mask-image: radial-gradient(
-      ellipse 25% 10% at 50% 0%,
-      #000 60%,
-      transparent 300%
-    );
+    mask-image: radial-gradient(ellipse 25% 10% at 50% 0%,
+        #000 60%,
+        transparent 300%);
     pointer-events: none;
     user-select: none;
   }
@@ -123,11 +121,9 @@
   .placeholder-image {
     width: 100%;
     height: 100%;
-    background: linear-gradient(
-      135deg,
-      var(--ui-bg-muted) 0%,
-      var(--ui-surface-subtle) 100%
-    );
+    background: linear-gradient(135deg,
+        var(--ui-bg-muted) 0%,
+        var(--ui-surface-subtle) 100%);
     color: var(--ui-fg-subtle);
     font-size: var(--font-size-sm);
     display: flex;
@@ -155,7 +151,7 @@
   /* 容器：居中 + 最大宽度 */
   .container {
     width: 100%;
-    max-width: var(--screen-xl, 1200px);
+    max-width: var(--screen-xl);
     /* margin-inline: auto; */
     /* padding-inline: 1rem; */
     margin: 0 auto;
@@ -267,10 +263,7 @@
   .flex-col-10,
   .flex-col-11,
   .flex-col-12 {
-    width: calc(
-      (100% + var(--flex-container-gap, 1rem)) / var(--cols) * var(--span) -
-        var(--flex-container-gap, 1rem)
-    );
+    width: calc((100% + var(--flex-container-gap, 1rem)) / var(--cols) * var(--span) - var(--flex-container-gap, 1rem));
   }
 
   /* 关键：禁用 flex-basis 的自动收缩/拉伸，仅用 width 控制 */
@@ -553,7 +546,7 @@
   /* Grid 容器：自动 gap + 响应式列 */
   .grid-container {
     display: grid;
-    gap: var(--grid-container-gap, var(--s2));
+    gap: var(--grid-container-gap, 8px);
     width: 100%;
     /* 默认：单列（移动端友好） */
     grid-template-columns: 1fr;
@@ -972,7 +965,7 @@
   .j-popup-layout {
     background: var(--ui-popup-bg);
     backdrop-filter: blur(4px);
-    padding: var(--s4);
+    padding: 16px;
 
     display: flex;
     position: fixed;
@@ -1037,4 +1030,4 @@
     justify-content: flex-end;
     align-items: flex-end;
   }
-}
+}