vanilla-jui 1.7.41 → 1.7.43

package/package.json

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

package/src/components/swiper.ts

@@ -31,7 +31,7 @@ const AUTOPLAY_DELAY_FLOOR = 16;
 
 export interface SwiperClassNames {
   root: string;
-  wrapper: string;
+  wrap: string;
   slide: string;
   image: string;
   title: string;
@@ -174,7 +174,7 @@ export type Swiper = SwiperBase & {
 
 const DEFAULT_CLASS_NAMES: SwiperClassNames = {
   root: 'j-swiper',
-  wrapper: 'swiper-wrapper',
+  wrap: 'swiper-wrap',
   slide: 'swiper-slide',
   image: 'swiper-image',
   title: 'swiper-slide-title',
@@ -908,8 +908,8 @@ export function createSwiper(input: SwiperProps = {}): Swiper {
         return view;
       };
       wrapper = jsx('div', {
-        className: props.className.wrapper,
-        'data-swiper-wrapper': '',
+        className: props.className.wrap,
+        'data-swiper-wrap': '',
         'aria-live': 'polite',
         children: () =>
           state.loading
@@ -974,7 +974,7 @@ export function createSwiper(input: SwiperProps = {}): Swiper {
                   ),
                 'data-action': 'prev',
                 'data-swiper-navigation': 'prev',
-                'aria-label': 'Previous slide',
+                'aria-label': 'Previous Slide',
                 disabled: () => !props.loop && state.index <= 0,
                 children: icon('arrow-left'),
               })
@@ -992,7 +992,7 @@ export function createSwiper(input: SwiperProps = {}): Swiper {
                   ),
                 'data-action': 'next',
                 'data-swiper-navigation': 'next',
-                'aria-label': 'Next slide',
+                'aria-label': 'Next Slide',
                 disabled: () => !props.loop && state.index >= realCount() - 1,
                 children: icon('arrow-right'),
               })

package/src/css/icon.css

@@ -1,14 +1,39 @@
 @layer icon {
-  svg {
+  /* svg {
     display: block;
+  } */
+
+  /* icon size */
+  [class^='icon-'] {
+    --icon-size: var(--font-size-lg);
+    width: var(--icon-size);
+    height: var(--icon-size);
+  }
+
+  .is-xs [class^='icon-'] {
+    --icon-size: var(--font-size-sm);
+  }
+
+  .is-sm [class^='icon-'] {
+    --icon-size: var(--font-size-md);
+  }
+
+  .is-md [class^='icon-'] {
+    --icon-size: var(--font-size-lg);
+  }
+
+  .is-lg [class^='icon-'] {
+    --icon-size: var(--font-size-xl);
+  }
+
+  .is-xl [class^='icon-'] {
+    --icon-size: var(--font-size-2xl);
   }
 
   /* close icon */
   .icon-close {
     position: relative;
     display: block;
-    width: var(--font-size-xl);
-    height: var(--font-size-xl);
     color: inherit;
   }
 
@@ -18,7 +43,7 @@
     position: absolute;
     top: 50%;
     left: 50%;
-    width: 12px;
+    width: 100%;
     height: 1.5px;
     background: currentColor;
     border-radius: 1px;

package/src/css/layout.css

@@ -109,7 +109,6 @@
       transparent 300%
     );
     pointer-events: none;
-    user-select: none;
   }
 
   .dark .j-background-grid {
@@ -892,14 +891,13 @@
     Skeleton
   ============================================ */
   .j-skeleton {
-    display: block;
-    width: 100%;
-    min-height: var(--el-height-2xs);
-    border-radius: var(--radius-sm);
-    background: var(--ui-bg-muted);
+    display: var(--skeleton-display, block);
+    width: var(--skeleton-width, 100%);
+    height: var(--skeleton-height, var(--el-height-2xs));
+    border-radius: var(--skeleton-radius, var(--radius-sm));
+    background: var(--skeleton-bg, var(--ui-bg-muted));
     color: transparent;
     pointer-events: none;
-    user-select: none;
     animation: animate-pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
   }
 
@@ -909,41 +907,39 @@
   }
 
   .j-skeleton.skeleton-inline {
-    display: inline-block;
-    width: 8rem;
+    --skeleton-display: inline-block;
+    --skeleton-width: 8rem;
+    --skeleton-height: var(--el-height-xs);
     vertical-align: middle;
   }
 
   .j-skeleton.skeleton-text {
-    height: var(--el-height-sm);
-    min-height: var(--el-height-sm);
+    --skeleton-height: var(--el-height-sm);
   }
 
   .j-skeleton.skeleton-title {
-    width: 60%;
-    height: var(--el-height-md);
-    min-height: var(--el-height-md);
+    --skeleton-width: 60%;
+    --skeleton-height: var(--el-height);
   }
 
   .j-skeleton.skeleton-block {
-    height: calc(var(--el-height-md) * 4);
-    min-height: calc(var(--el-height-md) * 4);
+    --skeleton-height: calc(var(--el-height) * 2);
   }
 
   .j-skeleton.skeleton-avatar,
   .j-skeleton.skeleton-circle {
+    --skeleton-radius: 999px;
     aspect-ratio: 1;
-    border-radius: 999px;
   }
 
   .j-skeleton.skeleton-avatar {
-    width: var(--el-height-md);
-    min-height: var(--el-height-md);
+    --skeleton-width: var(--el-height);
+    --skeleton-height: var(--el-height);
   }
 
   .j-skeleton.skeleton-button {
-    width: 5rem;
-    min-height: var(--el-height-md);
+    --skeleton-width: 4rem;
+    --skeleton-height: var(--el-height);
   }
 
   .j-skeleton.skeleton-image {
@@ -966,7 +962,7 @@
     Popup
   ============================================ */
   .j-popup-layout {
-    background: var(--ui-popup-bg);
+    background: var(--ui-popup);
     backdrop-filter: blur(4px);
     padding: 16px;
 

package/src/css/themes/default/accordion.css

@@ -17,7 +17,6 @@
     display: flex;
     align-items: center;
     cursor: pointer;
-    user-select: none;
   }
 
   .j-accordion.is-horizontal .accordion-header {

package/src/css/themes/default/avatar.css

@@ -16,7 +16,6 @@
     display: inline-block;
     vertical-align: middle;
     overflow: hidden;
-    user-select: none;
     object-fit: cover;
   }
 

package/src/css/themes/default/badge.css

@@ -1,9 +1,9 @@
 @layer components {
   .j-badge {
     gap: var(--badge-gap, 4px);
-    padding: var(--badge-padding, 0 6px);
-    min-width: var(--badge-min-width, 1.25rem);
-    height: var(--badge-height, 1.25rem);
+    padding: var(--badge-padding, 0 4px);
+    min-width: var(--badge-min-width, 20px);
+    height: var(--badge-height, 20px);
     font-size: var(--badge-font-size, var(--font-size-sm));
     font-weight: 500;
     border-radius: 48px;
@@ -15,7 +15,6 @@
     display: inline-flex;
     justify-content: center;
     align-items: center;
-    user-select: none;
   }
 
   .j-badge svg {
@@ -27,7 +26,6 @@
   }
 
   .j-badge.is-sm {
-    --badge-padding: 0 4px;
     --badge-min-width: 1rem;
     --badge-height: 1rem;
     --badge-font-size: var(--font-size-xs);

package/src/css/themes/default/breadcrumb.css

@@ -7,7 +7,6 @@
     color: var(--ui-fg-muted);
 
     white-space: nowrap;
-    user-select: none;
   }
 
   .j-breadcrumb > ol,

package/src/css/themes/default/button.css

@@ -21,7 +21,6 @@
     flex-wrap: nowrap;
     white-space: nowrap;
     appearance: button;
-    user-select: none;
     touch-action: manipulation;
     transition-property: box-shadow, opacity, transform;
     transition-duration: 0.15s;

package/src/css/themes/default/editor.css

@@ -163,9 +163,8 @@
   .j-editor u {
     text-decoration: underline;
     text-decoration-thickness: 4px;
-
-    text-decoration-color: var(--tone-ring);
-    text-underline-offset: 0.2em;
+    text-decoration-color: var(--ui-yellow);
+    text-underline-offset: 3px;
   }
 
   .j-editor s,
@@ -175,8 +174,8 @@
   }
 
   .j-editor mark {
-    background: var(--tone-highlight);
-    color: var(--tone-highlight-fg);
+    background: var(--ui-highlight);
+    color: var(--ui-highlight-fg);
     padding: 0.1em 0.3em;
     border-radius: 0.2em;
   }
@@ -344,7 +343,6 @@
 
   .j-editor ul[data-type='taskList'] li > label {
     flex: none;
-    user-select: none;
   }
 
   .j-editor ul[data-type='taskList'] li div {
@@ -427,7 +425,7 @@
     border: 1px solid var(--editor-border-subtle);
     border-radius: var(--radius-sm);
     word-break: break-word;
-    background: var(--ui-code-bg);
+    background: var(--ui-code);
     color: var(--ui-code-fg);
   }
 

package/src/css/themes/default/form.css

@@ -133,7 +133,6 @@
     font-size: var(--font-size-md);
     padding: 8px;
     border-radius: var(--radius-md);
-    user-select: none;
   }
 
   .j-radio label:not(:has(input[type='radio']:disabled)):hover,
@@ -200,7 +199,6 @@
     justify-content: center;
     align-items: center;
     text-align: center;
-    user-select: none;
     transition-property: box-shadow, color, background-color;
     transition-duration: 0.2s;
     transition-timing-function: ease;
@@ -460,11 +458,6 @@
     border-radius: var(--radius-md);
   }
 
-  .input-group .el-addon .icon-close,
-  .input-inner-group .el-addon .icon-close {
-    width: var(--input-height);
-  }
-
   .input-group > *:not(:first-child) {
     margin-left: -1px;
   }
@@ -551,7 +544,6 @@
   .input-inner-group .el-addon > .el-text {
     display: flex;
     align-items: center;
-    user-select: none;
     padding: 0 8px;
     font-size: var(--font-size-md);
     color: var(--ui-fg-muted);

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

@@ -13,7 +13,6 @@
     scroll-behavior: smooth;
     -ms-overflow-style: none;
     scrollbar-width: none;
-    user-select: none;
   }
 
   .j-menu::-webkit-scrollbar {
@@ -468,7 +467,6 @@
     padding: 4px 8px;
     text-decoration: none;
     color: var(--ui-fg-muted);
-    user-select: none;
     border-radius: var(--radius-sm);
     transition: none;
   }

package/src/css/themes/default/offcanvas.css

@@ -1,6 +1,6 @@
 @layer components {
   .j-offcanvas-overlay {
-    background: var(--ui-popup-bg);
+    background: var(--ui-popup);
 
     position: fixed;
     top: 0;

package/src/css/themes/default/swiper.css

@@ -8,13 +8,12 @@
     display: block;
     overflow: hidden;
     touch-action: pan-y;
-    user-select: none;
     width: 100%;
     min-height: var(--swiper-min-height, 120px);
     border-radius: var(--radius-md);
   }
 
-  .j-swiper .swiper-wrapper {
+  .j-swiper .swiper-wrap {
     display: flex;
     will-change: transform;
     position: relative;
@@ -30,8 +29,7 @@
     overflow: hidden;
     color: inherit;
     text-decoration: none;
-    user-select: none;
-    width: 100%;
+    width: var(--swiper-slide-width, 100%);
     min-width: 100%;
     aspect-ratio: inherit;
     border-radius: inherit;
@@ -178,7 +176,6 @@
   .j-swiper .swiper-navigation svg {
     width: 16px;
     height: 16px;
-
     pointer-events: none;
   }
 

package/src/css/themes/default/toast.css

@@ -118,7 +118,6 @@
     width: fit-content;
     text-align: center;
 
-    user-select: none;
     pointer-events: none;
   }
 

package/src/css/themes/default/tooltip.css

@@ -9,7 +9,6 @@
 
     position: relative;
     width: fit-content;
-    user-select: none;
   }
 
   .j-tooltip.is-reverse {

package/src/css/tokens.css

@@ -84,9 +84,11 @@
     --ui-raised: #ffffff;
 
     --ui-reverse: #000;
-    --ui-popup-bg: rgba(0, 0, 0, 0.0625);
-    --ui-code-bg: #f3f4f6;
+    --ui-popup: rgba(0, 0, 0, 0.0625);
+    --ui-code: #f3f4f6;
     --ui-code-fg: #374151;
+    --ui-highlight: #fef08a;
+    --ui-highlight-fg: #854d0e;
 
     /* --- Fixed Theme Colors (15 themes) --- */
     --ui-gray: #374151;
@@ -154,9 +156,6 @@
     --tone-fg: #ffffff;
     --tone-ring: rgba(99, 102, 241, 0.4);
 
-    --tone-highlight: #fef08a;
-    --tone-highlight-fg: #854d0e;
-
     /* Typography */
     --tone-heading: #111827;
     --tone-subtitle: #374151;
@@ -250,9 +249,11 @@
     --ui-raised: #151b24;
 
     --ui-reverse: #fff;
-    --ui-popup-bg: rgba(0, 0, 0, 0.0375);
-    --ui-code-bg: #181a1b;
+    --ui-popup: rgba(0, 0, 0, 0.0375);
+    --ui-code: #181a1b;
     --ui-code-fg: #e5e7eb;
+    --ui-highlight: #fbbf24;
+    --ui-highlight-fg: #78350f;
 
     /* --- Fixed Theme Colors (15 themes) --- */
     --ui-gray: #d1d5db;
@@ -319,8 +320,6 @@
     --tone-text-hover: #c7d2fe;
     --tone-fg: #1e1b4b;
     --tone-ring: rgba(129, 140, 248, 0.4);
-    --tone-highlight: #fbbf24;
-    --tone-highlight-fg: #78350f;
 
     /* Typography */
     --tone-heading: #f9fafb;

package/src/index.ts

@@ -18,7 +18,6 @@ export * from './utilities/config.ts';
 export * from './utilities/state.ts';
 export * from './utilities/refs.ts';
 export * from './utilities/validator.ts';
-export * from './utilities/compress.ts';
 export * from './core/scheduler.ts';
 export * from './core/view.ts';
 export * from './core/motion.ts';

package/src/utilities/compress.ts

@@ -1,167 +0,0 @@
-export interface CompressOptions {
-  /** 压缩质量，范围 0-1，默认 0.7 */
-  quality?: number;
-  /** 目标宽度（像素），不指定则按原图比例缩放 */
-  width?: number;
-  /** 目标高度（像素），不指定则按原图比例缩放 */
-  height?: number;
-}
-
-export interface ImgCompressInstance {
-  /**
-   * 将图片路径转换为压缩后的 base64 数据
-   * @param path - 图片文件路径或 base64 字符串
-   * @param callback - 压缩完成后的回调函数，接收 base64 字符串作为参数
-   */
-  canvasDataURL: (path: string, callback: (base64: string) => void) => void;
-
-  /**
-   * 压缩文件对象
-   * @param file - 文件对象（Blob 或 File）
-   * @param callback - 压缩完成后的回调函数，接收 base64 字符串作为参数
-   */
-  photoCompress: (file: Blob, callback: (base64: string) => void) => void;
-
-  /**
-   * 将 base64 字符串转换为 Blob 对象
-   * @param urlData - base64 数据（包含 data:image 前缀）
-   * @returns Blob 对象，如果解析失败则返回 undefined
-   */
-  convertBase64UrlToBlob: (urlData: string) => Blob | undefined;
-}
-
-/** 单例缓存 */
-let singletonInstance: ImgCompressInstance | null = null;
-
-/**
- * 将 base64 字符串转换为 Blob 对象
- * @param urlData - base64 数据（包含 data:image 前缀）
- * @returns Blob 对象，如果解析失败则返回 undefined
- */
-function convertBase64UrlToBlob(urlData: string): Blob | undefined {
-  const arr = urlData.split(',');
-  const mimeMatch = arr[0].match(/:(.*?);/);
-  if (!mimeMatch) return;
-
-  const mime = mimeMatch[1];
-  const binaryString = atob(arr[1]);
-  const length = binaryString.length;
-  const uint8Array = new Uint8Array(length);
-
-  for (let i = 0; i < length; i++) {
-    uint8Array[i] = binaryString.charCodeAt(i);
-  }
-
-  return new Blob([uint8Array], { type: mime });
-}
-
-/**
- * 创建压缩实例的核心工厂函数
- */
-function createCompressInstance(
-  options?: CompressOptions
-): ImgCompressInstance {
-  const { quality = 0.7, width, height } = options ?? {};
-  const config = { quality, width, height };
-
-  return {
-    canvasDataURL(path: string, callback: (base64: string) => void): void {
-      const img = new Image();
-      img.src = path;
-
-      img.onload = (e: Event): void => {
-        const target = e.target as HTMLImageElement;
-        const { width: originalWidth, height: originalHeight } = target;
-        const scale = originalWidth / originalHeight;
-
-        const w = config.width ?? originalWidth;
-        const h = config.height ?? w / scale;
-
-        const canvas = document.createElement('canvas');
-        const ctx = canvas.getContext('2d');
-
-        canvas.width = w;
-        canvas.height = h;
-
-        ctx?.drawImage(target, 0, 0, w, h);
-
-        const base64 = canvas.toDataURL('image/jpeg', config.quality);
-        callback(base64);
-      };
-    },
-
-    photoCompress(file: Blob, callback: (base64: string) => void): void {
-      const reader = new FileReader();
-
-      reader.readAsDataURL(file);
-
-      reader.onload = (event: ProgressEvent<FileReader>): void => {
-        const result = event.target?.result as string;
-        this.canvasDataURL(result, callback);
-      };
-    },
-
-    convertBase64UrlToBlob,
-  };
-}
-
-// ==================== public api ====================
-
-/**
- * 创建图片压缩实例
- * @param options - 压缩配置选项
- * @param singleton - 是否返回单例，默认 true
- * @returns 图片压缩实例
- * @example
- * ```ts
- * // 获取单例实例（默认）
- * const imgzip = createImgCompress({ quality: 0.8, width: 800 });
- *
- * // 创建新实例
- * const imgzip2 = createImgCompress({ quality: 0.9 }, false);
- * ```
- */
-function createImgCompress(
-  options?: CompressOptions,
-  singleton: boolean = true
-): ImgCompressInstance {
-  if (singleton && singletonInstance) {
-    return singletonInstance;
-  }
-
-  const instance = createCompressInstance(options);
-
-  if (singleton) {
-    singletonInstance = instance;
-  }
-
-  return instance;
-}
-
-/**
- * 获取单例实例（如果不存在则创建）
- * @param options - 压缩配置选项（仅在首次创建时生效）
- * @returns 单例实例
- * @example
- * ```ts
- * const imgzip = getImgCompressInstance({ quality: 0.8 });
- * ```
- */
-function getImgCompressInstance(
-  options?: CompressOptions
-): ImgCompressInstance {
-  if (!singletonInstance) {
-    singletonInstance = createCompressInstance(options);
-  }
-  return singletonInstance;
-}
-
-/**
- * 重置单例实例（用于测试或重新配置）
- */
-function resetImgCompressInstance(): void {
-  singletonInstance = null;
-}
-
-export { createImgCompress, getImgCompressInstance, resetImgCompressInstance };
-export default createImgCompress;