vanilla-jui 1.5.11 → 1.5.13

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vanilla-jui",
-  "version": "1.5.11",
+  "version": "1.5.13",
   "private": false,
   "description": "A lightweight, reactive, and fully customizable vanilla JS UI library.",
   "keywords": [
@@ -62,7 +62,7 @@
   },
   "dependencies": {
     "vanilla-create-storage": "^1.0.4",
-    "vanilla-signal": "^1.1.14",
+    "vanilla-signal": "^1.1.15",
     "vanilla-signal-i18n": "^1.1.2"
   },
   "devDependencies": {

package/src/components/form.ts

@@ -23,7 +23,10 @@ import {
   resolveProps,
   validateParam,
 } from '../utilities/types.ts';
-import { createValidator } from '../validation/validator.ts';
+import {
+  createValidator,
+  type ValidatorClassNameConfig,
+} from '../validation/validator.ts';
 import { createLoading } from '../primitives/loading.ts';
 import { t } from 'vanilla-signal-i18n';
 import locales from '../locales/index.ts';
@@ -137,6 +140,7 @@ export interface FormValidatorConfig {
   rules?: Record<string, Record<string, unknown>>;
   messages?: Record<string, Record<string, string>>;
   vanilla?: boolean;
+  className?: ValidatorClassNameConfig;
   onSubmit?: (() => void) | null;
   [key: string]: unknown;
 }
@@ -640,6 +644,7 @@ export function createForm(input: FormProps = {}): Form {
     if (!element) return;
     for (const control of Array.from(element.elements)) {
       control.classList.remove('is-valid', 'is-invalid');
+      control.removeAttribute('data-valid');
     }
     for (const help of all<HTMLElement>(
       '[data-field-help], [data-validator-help]',

package/src/components/swiper.ts

@@ -75,6 +75,12 @@ interface TrackItem {
   key: string;
 }
 
+interface NormalizedItemCacheEntry {
+  item: NormalizedSwiperDataItem;
+  keys: string[];
+  values: unknown[];
+}
+
 export interface SwiperSlideContext {
   swiper: Swiper;
   item: NormalizedSwiperDataItem;
@@ -291,6 +297,8 @@ export function createSwiper(input: SwiperProps = {}): Swiper {
   }) as SwiperState;
   const events = createEventManager();
   const itemKeys = new WeakMap<object, string>();
+  const normalizedCache = new Map<string, NormalizedItemCacheEntry>();
+  const trackItemCache = new Map<string, TrackItem>();
   const imageCleanups = new Set<() => void>();
   let swiper!: Swiper;
   let wrapper: HTMLElement | null = null;
@@ -311,9 +319,31 @@ export function createSwiper(input: SwiperProps = {}): Swiper {
     if (!itemKeys.has(item)) itemKeys.set(item, randomId());
     return itemKeys.get(item) as string;
   };
+  const readItemEntries = (
+    item: SwiperDataItem
+  ): { keys: string[]; values: unknown[] } => {
+    const keys = Object.keys(item);
+    return {
+      keys,
+      values: keys.map((key) => item[key]),
+    };
+  };
+  const sameItemEntries = (
+    entry: NormalizedItemCacheEntry | undefined,
+    keys: string[],
+    values: unknown[]
+  ): boolean => {
+    if (!entry || entry.keys.length !== keys.length) return false;
+    for (let index = 0; index < keys.length; index += 1) {
+      if (entry.keys[index] !== keys[index]) return false;
+      if (!Object.is(entry.values[index], values[index])) return false;
+    }
+    return true;
+  };
   const normalizeData = (
     data: SwiperDataItem[]
   ): NormalizedSwiperDataItem[] => {
+    const activeKeys = new Set<string>();
     const items = data.map((item, index) => {
       validateParam(
         String(index),
@@ -321,13 +351,26 @@ export function createSwiper(input: SwiperProps = {}): Swiper {
         SWIPER_DATA_ITEM_RULE,
         'Swiper.state.data'
       );
-      return {
+      const key = itemKey(item);
+      activeKeys.add(key);
+      const { keys, values } = readItemEntries(item);
+      const cached = normalizedCache.get(key);
+      if (cached && sameItemEntries(cached, keys, values)) {
+        cached.item.index = index;
+        return cached.item;
+      }
+      const normalized = {
         ...item,
         blank: item.blank !== false,
         index,
-        key: itemKey(item),
+        key,
       };
+      normalizedCache.set(key, { item: normalized, keys, values });
+      return normalized;
     });
+    for (const key of normalizedCache.keys()) {
+      if (!activeKeys.has(key)) normalizedCache.delete(key);
+    }
     if (!items.some((item) => item.sort != null)) return items;
     return items.sort((a, b) => {
       if (a.sort == null && b.sort == null) return a.index - b.index;
@@ -336,31 +379,47 @@ export function createSwiper(input: SwiperProps = {}): Swiper {
       return a.sort - b.sort || a.index - b.index;
     });
   };
+  const trackItem = (
+    item: NormalizedSwiperDataItem,
+    index: number,
+    clone: TrackItem['clone']
+  ): TrackItem => {
+    const key =
+      clone === null
+        ? `real:${item.key}:${Boolean(item.url)}`
+        : `clone:${clone}:${item.key}:${Boolean(item.url)}`;
+    const cached = trackItemCache.get(key);
+    if (cached && cached.item === item && cached.clone === clone) {
+      cached.index = index;
+      return cached;
+    }
+    const next = { item, index, clone, key } satisfies TrackItem;
+    trackItemCache.set(key, next);
+    return next;
+  };
   const createTrackItems = (items: NormalizedSwiperDataItem[]): TrackItem[] => {
-    const real = items.map((item, index) => ({
-      item,
-      index,
-      clone: null,
-      key: `real:${item.key}:${Boolean(item.url)}`,
-    })) satisfies TrackItem[];
-    if (!props.loop || items.length <= 1) return real;
+    const activeKeys = new Set<string>();
+    const real = items.map((item, index) => {
+      const current = trackItem(item, index, null);
+      activeKeys.add(current.key);
+      return current;
+    });
+    if (!props.loop || items.length <= 1) {
+      for (const key of trackItemCache.keys()) {
+        if (!activeKeys.has(key)) trackItemCache.delete(key);
+      }
+      return real;
+    }
     const first = items[0];
     const last = items[items.length - 1];
-    return [
-      {
-        item: last,
-        index: items.length - 1,
-        clone: 'last',
-        key: `clone:last:${last.key}:${Boolean(last.url)}`,
-      },
-      ...real,
-      {
-        item: first,
-        index: 0,
-        clone: 'first',
-        key: `clone:first:${first.key}:${Boolean(first.url)}`,
-      },
-    ];
+    const lastClone = trackItem(last, items.length - 1, 'last');
+    const firstClone = trackItem(first, 0, 'first');
+    activeKeys.add(lastClone.key);
+    activeKeys.add(firstClone.key);
+    for (const key of trackItemCache.keys()) {
+      if (!activeKeys.has(key)) trackItemCache.delete(key);
+    }
+    return [lastClone, ...real, firstClone];
   };
   const realCount = (): number => normalizedItems().length;
   const trackCount = (): number => trackItems().length;
@@ -373,6 +432,10 @@ export function createSwiper(input: SwiperProps = {}): Swiper {
     if (index === trackCount() - 1) return 0;
     return index - 1;
   };
+  const toRealIndexFromTrackPosition = (index: number): number => {
+    if (!props.loop) return Math.max(0, index);
+    return toRealIndex(index);
+  };
   const trackIndexForRealIndex = (index: number): number => {
     const count = realCount();
     if (!count) return 0;
@@ -710,11 +773,22 @@ export function createSwiper(input: SwiperProps = {}): Swiper {
     });
   };
 
-  const slideView = (itemAccessor: () => TrackItem): HTMLElement => {
+  const slideView = (
+    itemAccessor: () => TrackItem,
+    trackIndexAccessor: () => number
+  ): HTMLElement => {
+    const realIndex = (): number =>
+      toRealIndexFromTrackPosition(trackIndexAccessor());
     const slideContent = () => {
-      const { item, index } = itemAccessor();
-      const context = { swiper, item, index };
+      const { item } = itemAccessor();
       if (item.children != null) {
+        const context = {
+          swiper,
+          item,
+          get index() {
+            return realIndex();
+          },
+        } as SwiperSlideContext;
         return asRenderable(
           typeof item.children === 'function'
             ? item.children(context)
@@ -742,12 +816,12 @@ export function createSwiper(input: SwiperProps = {}): Swiper {
     };
     const commonProps = {
       className: props.className.slide,
-      'data-swiper-slide': () => String(itemAccessor().index),
+      'data-swiper-slide': () => String(realIndex()),
       'data-swiper-index': () =>
-        itemAccessor().clone ? null : String(itemAccessor().index),
+        itemAccessor().clone ? null : String(realIndex()),
       'data-clone': () => itemAccessor().clone,
       role: 'group',
-      'aria-label': () => `Slide ${itemAccessor().index + 1}`,
+      'aria-label': () => `Slide ${realIndex() + 1}`,
       children: slideContent,
     };
     return itemAccessor().item.url

package/src/css/content.css

@@ -31,7 +31,7 @@
     margin: var(--content-heading-space) 0
       calc(var(--content-heading-space) * 0.75);
     font-weight: 600;
-    line-height: 1.3;
+    /* line-height: 1.3; */
     color: var(--content-heading-fg);
     letter-spacing: -0.02em;
   }
@@ -46,7 +46,7 @@
   .j-content h2 {
     font-size: 1.625em;
     font-weight: 650;
-    padding-bottom: 0.5em;
+    padding-bottom: 0.25em;
     border-bottom: 1px solid var(--content-border-subtle);
   }
 
@@ -458,9 +458,15 @@
   .hljs-comment,
   .hljs-code,
   .hljs-formula {
-    color: var(--ui-gray-shade);
+    color: var(--ui-fg-soft);
   }
 
+  /* .dark .hljs-comment,
+  .dark .hljs-code,
+  .dark .hljs-formula {
+    color: var(--ui-gray-shade);
+  } */
+
   /* prettylights-syntax-entity-tag */
   .hljs-name,
   .hljs-quote,
@@ -581,6 +587,7 @@
     padding: 0.75em 1em;
     border-bottom: 1px solid var(--content-border-subtle);
     text-align: left;
+    vertical-align: top;
   }
 
   .j-content th {

package/src/css/form.css

@@ -70,7 +70,7 @@
     margin: 0;
   }
 
-  .j-form .form-field .field-control .help-block.is-invalid {
+  .j-form .form-field .field-control .help-block[data-valid='false'] {
     color: var(--state-danger);
   }
 
@@ -188,12 +188,12 @@
   }
 
   /* input validate */
-  /* .j-input.is-valid,
-  .j-select.is-valid,
-  .j-textarea.is-valid,
-  .j-input.is-invalid,
-  .j-select.is-invalid,
-  .j-textarea.is-invalid {
+  /* .j-input[data-valid='true'],
+  .j-select[data-valid='true'],
+  .j-textarea[data-valid='true'],
+  .j-input[data-valid='false'],
+  .j-select[data-valid='false'],
+  .j-textarea[data-valid='false'] {
     padding-right: calc(1.4285714286em + 0.875rem);
     background-repeat: no-repeat;
     background-position: right calc(0.3571428572em + 0.21875rem) center;
@@ -201,16 +201,16 @@
       calc(0.7142857143em + 0.4375rem);
   } */
 
-  /* .j-input.is-valid,
-  .j-select.is-valid,
-  .j-textarea.is-valid {
+  /* .j-input[data-valid='true'],
+  .j-select[data-valid='true'],
+  .j-textarea[data-valid='true'] {
     border-color: var(--form-valid-border-color, var(--state-success));
     background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%232fb344' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='20 6 9 17 4 12'%3e%3c/polyline%3e%3c/svg%3e");
   } */
 
-  .j-input.is-invalid,
-  .j-select.is-invalid,
-  .j-textarea.is-invalid {
+  .j-input[data-valid='false'],
+  .j-select[data-valid='false'],
+  .j-textarea[data-valid='false'] {
     border-color: var(--form-invalid-border-color, var(--state-danger));
     /* background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23d63939' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cline x1='18' y1='6' x2='6' y2='18'%3e%3c/line%3e%3cline x1='6' y1='6' x2='18' y2='18'%3e%3c/line%3e%3c/svg%3e"); */
   }
@@ -861,14 +861,14 @@
     box-shadow: var(--input-focus-shadow, none);
   }
 
-  /* .j-input.is-valid:focus-within,
-  .j-select.is-valid:focus-within {
+  /* .j-input[data-valid='true']:focus-within,
+  .j-select[data-valid='true']:focus-within {
     border-color: transparent;
     outline-color: var(--form-valid-border-color, var(--state-success));
   } */
 
-  .j-input.is-invalid:focus-within,
-  .j-select.is-invalid:focus-within {
+  .j-input[data-valid='false']:focus-within,
+  .j-select[data-valid='false']:focus-within {
     border-color: transparent;
     outline-color: var(--form-invalid-border-color, var(--state-danger));
   }

package/src/css/menu.css

@@ -363,6 +363,7 @@
     overflow-y: auto;
     scrollbar-width: thin;
     scrollbar-color: var(--ui-border) transparent;
+    height: 100%;
   }
 
   .j-menu[data-menu-type='mobile'] .menu {
@@ -416,13 +417,13 @@
     width: 100%;
     visibility: hidden;
     opacity: 0;
-    transform: translateX(80%);
+    /* transform: translateX(80%); */
     transition:
-      transform 0.3s ease-in-out,
-      opacity 0.3s ease-in-out,
-      visibility 0.3s ease-in-out;
+      /* transform 0.3s ease-in-out, */
+      /* visibility 0.3s ease-in-out, */ opacity 0.3s ease-in-out;
     max-width: 100%;
     background: var(--ui-bg);
+    padding-block: 0;
   }
 
   .j-menu[data-menu-type='mobile'] .menu .sub-menu .menu-item:hover a {
@@ -440,9 +441,9 @@
     > .sub-menu {
     visibility: visible;
     opacity: 1;
-    transform: translateX(0);
-    height: 100%;
+    /* transform: translateX(0); */
     z-index: var(--z-submenu);
+    height: 100%;
   }
 
   /* bottom menu */

package/src/css/table.css

@@ -29,6 +29,7 @@
   table.j-table th:not([align]),
   table.j-table td:not([align]) {
     text-align: var(--table-cell-text-align);
+    vertical-align: var(--table-cell-vertical-align);
   }
 
   table.j-table a {

package/src/css/themes/default/menu.css

@@ -49,6 +49,7 @@
     --sub-menu-border-width: 0;
     --sub-menu-item-hover-outline-width: 0;
     --menu-link-gap: var(--s2);
+    --sub-menu-box-shadow: none;
   }
 
   .j-menu[data-menu-type='bottom'] {

package/src/css/themes/default/table.css

@@ -10,6 +10,7 @@
     --table-border-color: var(--ui-border);
     --table-cell-padding: 0.5em 0.75em;
     --table-cell-text-align: left;
+    --table-cell-vertical-align: top;
     --table-link-fg: var(--tone-solid);
     --table-striped-bg: var(--tone-soft);
     --table-hover-bg: var(--tone-soft);

package/src/css/tokens.css

@@ -15,11 +15,11 @@
     --z-badge: 2;
     --z-toolbar: 2;
     --z-submenu: 5;
+    --z-overlay: 9500;
+    --z-offcanvas: 9600;
+    --z-popup: 9700;
+    --z-toast: 9800;
     --z-drop: 9900;
-    --z-overlay: 9950;
-    --z-offcanvas: 9960;
-    --z-popup: 9970;
-    --z-toast: 9980;
 
     /* --- Spacing --- */
     --space: 0.25rem;
@@ -317,7 +317,7 @@
     --ui-disabled-fg: #64748b;
     --ui-overlay: rgba(2, 6, 23, 0.7);
     --ui-overlay-muted: rgba(2, 6, 23, 0.45);
-    --ui-popup-bg: rgba(17, 24, 39, 0.82);
+    --ui-popup-bg: rgba(17, 24, 39, 0.45);
     --ui-input-color: #f9fafb;
     --ui-input-border: rgba(148, 163, 184, 0.2);
     --ui-input-focus-border: #a78bfa;
@@ -1162,13 +1162,13 @@
   }
 
   .j-radius-round {
-    --radius-2xs: 9999px;
-    --radius-xs: 9999px;
-    --radius-sm: 9999px;
-    --radius-md: 9999px;
-    --radius-lg: 9999px;
-    --radius-xl: 9999px;
-    --radius-2xl: 9999px;
+    --radius-2xs: 0.375rem;
+    --radius-xs: 0.5rem;
+    --radius-sm: 0.75rem;
+    --radius-md: 1rem;
+    --radius-lg: 999px;
+    --radius-xl: 999px;
+    --radius-2xl: 999px;
   }
 
   /* ============================================

package/src/validation/validator.ts

@@ -1,7 +1,9 @@
 import { jsx } from 'vanilla-signal';
 
+import { joinClasses } from '../utilities/class-name.ts';
 import { type DOMReference, all, resolveElement } from '../utilities/dom.ts';
 import { createEventManager } from '../utilities/events.ts';
+import { isPlainObject } from '../utilities/object.ts';
 import {
   type ResolveSchema,
   resolveProps,
@@ -45,13 +47,21 @@ interface ValidatorProps extends Record<string, unknown> {
   rules?: Record<string, ValidatorRule>;
   messages?: ValidatorMessageMap;
   vanilla?: boolean;
+  className?: ValidatorClassNameConfig;
   onSubmit?: ((validator: ValidatorInstance) => void) | null;
 }
 
+export interface ValidatorClassNames {
+  help: string;
+}
+
+export type ValidatorClassNameConfig = Partial<ValidatorClassNames>;
+
 interface ResolvedValidatorProps extends Record<string, unknown> {
   rules: Record<string, ValidatorRule>;
   messages: ValidatorMessageMap;
   vanilla: boolean;
+  className: ValidatorClassNames;
   onSubmit: ((validator: ValidatorInstance) => void) | null;
 }
 
@@ -75,19 +85,36 @@ export interface ValidatorInstance {
   destroy(): void;
 }
 
+const DEFAULT_CLASS_NAMES: ValidatorClassNames = {
+  help: 'help-block',
+};
+
 const VALIDATOR_PROPS_SCHEMA = {
   rules: { default: {}, type: 'object' },
   messages: { default: {}, type: 'object' },
   vanilla: { default: false, type: 'boolean' },
+  className: {
+    default: DEFAULT_CLASS_NAMES,
+    type: 'object',
+    normalize: (value: unknown) => resolveClassNames(value),
+  },
   onSubmit: { default: null, types: ['function', 'null'] },
 } satisfies ResolveSchema<ValidatorProps>;
 
+function resolveClassNames(value: unknown): ValidatorClassNames {
+  return {
+    ...DEFAULT_CLASS_NAMES,
+    ...(isPlainObject(value) ? (value as ValidatorClassNameConfig) : {}),
+  } as ValidatorClassNames;
+}
+
 function normalizeProps(input: ValidatorProps): ResolvedValidatorProps {
   const props = resolveProps(input, VALIDATOR_PROPS_SCHEMA, 'Validator.props');
   return {
     rules: props.rules as Record<string, ValidatorRule>,
     messages: props.messages as ValidatorMessageMap,
     vanilla: props.vanilla as boolean,
+    className: props.className as ValidatorClassNames,
     onSubmit: props.onSubmit as ResolvedValidatorProps['onSubmit'],
   };
 }
@@ -353,10 +380,7 @@ function showError(
   rule: string,
   customMessage = ''
 ): void {
-  if (!(element instanceof HTMLInputElement) || element.type !== 'checkbox') {
-    element.classList.remove('is-valid');
-    element.classList.add('is-invalid');
-  }
+  element.dataset.valid = 'false';
 
   const error = customMessage || props?.messages[name]?.[rule] || '';
   if (!error) return;
@@ -372,11 +396,13 @@ function showError(
     ) || null;
   if (!help) {
     help = jsx('div', {
-      className: 'help-block is-invalid',
+      'data-valid': 'false',
       'data-validator-help': name,
     }) as HTMLElement;
     formControl.appendChild(help);
   }
+  help.className = joinClasses(props?.className.help);
+  help.dataset.valid = 'false';
   help.textContent = error;
 }
 
@@ -388,9 +414,7 @@ function showSuccess(element: ValidatorElement): void {
     }
   }
 
-  if (!(element instanceof HTMLInputElement) || element.type !== 'checkbox') {
-    element.classList.remove('is-invalid');
-  }
+  element.removeAttribute('data-valid');
 }
 
 export function createValidator(
@@ -543,7 +567,7 @@ export function createValidator(
     if (native) root.reset();
     for (const control of Array.from(root.elements)) {
       if (isValidatorElement(control)) {
-        control.classList.remove('is-valid', 'is-invalid');
+        control.removeAttribute('data-valid');
       }
     }
     for (const help of all<HTMLElement>('[data-validator-help]', root)) {