vanilla-jui 1.5.45 → 1.6.1

package/package.json

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

package/src/components/form.ts

@@ -29,7 +29,7 @@ import {
 import {
   createValidator,
   type ValidatorClassNameConfig,
-} from '../validation/validator.ts';
+} from '../utilities/validator.ts';
 import { createLoading } from '../primitives/loading.ts';
 import { translate } from '../utilities/locale.ts';
 

package/src/css/components.css

@@ -18,7 +18,7 @@
 @import url('./tooltip.css');
 @import url('./swiper.css');
 @import url('./breadcrumb.css');
-@import url('./table.css');
+/* @import url('./table.css'); */
 @import url('./pagination.css');
 @import url('./card.css');
 @import url('./menu.css');

package/src/css/editor.css

@@ -712,4 +712,15 @@
   .j-editor .block {
     margin-block: var(--editor-block-space);
   }
+
+  .j-editor table {
+    text-indent: 0;
+    border-color: inherit;
+    border-collapse: collapse;
+
+    overflow-x: auto;
+    scrollbar-width: thin;
+    scrollbar-color: var(--ui-border) transparent;
+    display: block;
+  }
 }

package/src/css/form.css

@@ -597,11 +597,12 @@
   }
 
   .input-inner-group
-    .el-addon:first-child.is-text:has(.j-button:not(.is-icon)) {
+    .el-addon:first-child.inner-wrap:has(.j-button:not(.is-icon)) {
     left: var(--space);
   }
 
-  .input-inner-group .el-addon:last-child.is-text:has(.j-button:not(.is-icon)) {
+  .input-inner-group
+    .el-addon:last-child.inner-wrap:has(.j-button:not(.is-icon)) {
     right: var(--space);
   }
 
@@ -610,14 +611,16 @@
     height: var(--font-size-xl);
   }
 
-  .input-inner-group .el-addon.is-text {
+  .input-inner-group .el-addon.inner-wrap {
     display: flex;
     gap: var(--space);
   }
 
   /* status active */
   .input-group .j-button:not(:disabled):active,
+  .inner-group .j-input:focus,
   .input-group .j-input:focus-within,
+  .inner-group .j-input:focus-visible,
   .input-group select.j-select:focus {
     z-index: 1;
   }

package/src/css/status.css

@@ -59,8 +59,8 @@
     user-select: none;
   }
 
-  [hidden],
-  [aria-hidden='true'] {
+  /* [aria-hidden='true'], */
+  [hidden] {
     display: none;
   }
 }

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

@@ -57,6 +57,30 @@
     --radius-lg: 1.5rem;
   }
 
+  .j-editor table td,
+  .j-editor table th {
+    border-width: 1px;
+    border-style: solid;
+    border-color: var(--ui-border-subtle);
+    padding: 0.5rem 1rem;
+    text-align: left;
+    vertical-align: top;
+  }
+
+  .j-editor table thead th {
+    background: var(--ui-bg-subtle);
+    font-weight: 600;
+    white-space: nowrap;
+  }
+
+  .j-editor table tbody td {
+    min-width: 100px;
+  }
+
+  .j-editor table tbody tr:hover {
+    background: var(--ui-bg-subtle);
+  }
+
   .mobile .j-editor h1 {
     margin-bottom: 2rem;
   }

package/src/css/themes/default/index.css

@@ -16,7 +16,7 @@
 @import url('./swiper.css');
 @import url('./breadcrumb.css');
 @import url('./loading.css');
-@import url('./table.css');
+/* @import url('./table.css'); */
 @import url('./pagination.css');
 @import url('./menu.css');
 @import url('./toc.css');

package/src/css/themes/default/tree.css

@@ -15,7 +15,7 @@
 
   .j-tree-list .j-tree-list::before {
     top: 0;
-    bottom: 10px;
+    bottom: 12px;
     left: 7px;
     width: 1px;
     background: var(--ui-border);
@@ -23,7 +23,7 @@
 
   .j-tree-list .j-tree-list > .j-tree-item::before {
     top: 13px;
-    left: -11px;
+    left: -12px;
     width: 12px;
     height: 1px;
     background: var(--ui-border);

package/src/index.ts

@@ -13,6 +13,8 @@ export * from './utilities/timer.ts';
 export * from './utilities/types.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';
@@ -29,9 +31,6 @@ export * from './primitives/theme.ts';
 export * from './primitives/parabola.ts';
 export * from './primitives/sticky.ts';
 
-// Validation
-export * from './validation/validator.ts';
-
 // Components
 export * from './core/component.ts';
 export * from './components/toc.ts';

package/src/utilities/compress.ts

@@ -0,0 +1,167 @@
+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;

package/src/css/table.css

@@ -1,12 +0,0 @@
-@layer components {
-  table {
-    text-indent: 0;
-    border-color: inherit;
-    border-collapse: collapse;
-
-    overflow-x: auto;
-    scrollbar-width: thin;
-    scrollbar-color: var(--ui-border) transparent;
-    display: block;
-  }
-}

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

@@ -1,25 +0,0 @@
-@layer themes {
-  table td,
-  table th {
-    border-width: 1px;
-    border-style: solid;
-    border-color: var(--ui-border-subtle);
-    padding: 0.5rem 1rem;
-    text-align: left;
-    vertical-align: top;
-  }
-
-  table thead th {
-    background: var(--ui-bg-subtle);
-    font-weight: 600;
-    white-space: nowrap;
-  }
-
-  table tbody td {
-    min-width: 100px;
-  }
-
-  table tbody tr:hover {
-    background: var(--ui-bg-subtle);
-  }
-}