vanilla-jui 1.3.11 → 1.4.0

package/src/css/components.css

@@ -24,3 +24,4 @@
 @import url('./toolbar.css');
 @import url('./menu.css');
 @import url('./toc.css');
+@import url('./form.css');

package/src/css/form.css

@@ -1,4 +1,4 @@
-@layer form {
+@layer components {
 
   .j-form,
   .j-form .form-item,

package/src/css/icon.css

@@ -3,6 +3,16 @@
 		display: block;
 	}
 
+	.j-loader {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		background: var(--ui-bg-subtle);
+		width: 100%;
+		height: 100%;
+		position: absolute;
+	}
+
 	/* loader icon */
 	.icon-loader {
 		display: inline-block;
@@ -27,6 +37,7 @@
 		color: inherit;
 		cursor: pointer;
 	}
+
 	.icon-close::after,
 	.icon-close::before {
 		content: "";
@@ -40,15 +51,19 @@
 		border-radius: 1px;
 		transform-origin: center center;
 	}
+
 	.icon-close::before {
 		transform: translate(-50%, -50%) rotate(45deg);
 	}
+
 	.icon-close::after {
 		transform: translate(-50%, -50%) rotate(-45deg);
 	}
+
 	.icon-close:active {
 		transform: translateY(1px);
 	}
+
 	.icon-close:focus-within {
 		background-color: var(--tone-subtle);
 	}
@@ -57,7 +72,8 @@
 	.el-icon[data-action-close] {
 		cursor: pointer;
 	}
+
 	.el-icon[data-action-close]:active {
 		transform: scale(0.85);
 	}
-}
+}

package/src/css/index.css

@@ -1,4 +1,4 @@
-@layer config, layout, content, icon, font, components, menu, form, animation, status;
+@layer config, layout, content, icon, font, components, themes, animation, status;
 
 @import url('./tokens.css');
 /* @import url('./gradient.css'); */
@@ -6,7 +6,7 @@
 @import url('./icon.css');
 @import url('./font.css');
 @import url('./components.css');
-@import url('./form.css');
 @import url('./content.css');
+@import url('./themes/index.css');
 @import url('./animation.css');
 @import url('./status.css');

package/src/css/menu.css

@@ -1,4 +1,4 @@
-@layer menu {
+@layer components {
   .j-menu {
     width: 100%;
     white-space: nowrap;

package/src/css/tabs.css

@@ -83,6 +83,7 @@
     display: none;
     margin: var(--tab-panel-item-margin, 0);
     position: relative;
+    min-height: 1.25em;
   }
 
   .j-tabs .tab-panel .panel-item.is-active {

package/src/css/tokens.css

@@ -78,7 +78,7 @@
     --columns-5xs: 12rem;
     --columns-4xs: 14rem;
     --columns-3xs: 16rem;
-    --columns-2xs: 18px;
+    --columns-2xs: 18rem;
     --columns-xs: 20rem;
     --columns-sm: 24rem;
     --columns-md: 28rem;

package/src/index.ts

@@ -0,0 +1,37 @@
+// CSS
+import './css/index.css';
+
+// Utilities
+export * from './utilities/browser.ts';
+export * from './utilities/cache.ts';
+export * from './utilities/core.ts';
+export * from './utilities/dom.ts';
+export * from './utilities/events.ts';
+export * from './utilities/http.ts';
+export * from './utilities/storage.ts';
+
+// Core
+export { default as Component } from './core/Component.ts';
+
+// Common Components
+export * from './components/icons.ts';
+export * from './components/theme.ts';
+export * from './components/toast.ts';
+
+// Components extending Component
+// components with factory functions
+export * from './components/form.ts';
+export * from './components/validator.ts';
+export * from './components/toc.ts';
+export * from './components/sticky.ts';
+export * from './components/flow.ts';
+export * from './components/parabola.ts';
+export * from './components/tabs.ts';
+export * from './components/accordion.ts';
+export * from './components/drop.ts';
+export * from './components/tooltip.ts';
+export * from './components/offcanvas.ts';
+export * from './components/modal.ts';
+export * from './components/pagination.ts';
+export * from './components/swiper.ts';
+export * from './components/menu.ts';

package/src/locales/{index.js → index.ts}

@@ -3,7 +3,6 @@ export default {
     b: 'Back',
     t: 'Customize',
     d: 'Customize your UI experience.',
-    n: 'None',
     sm: 'Small',
     md: 'Medium',
     lg: 'Large',
@@ -32,7 +31,7 @@ export default {
     Yellow: '黄色',
     Orange: '橙色',
     Gold: '金色',
-    n: '无',
+    None: '无',
     sm: '小',
     md: '中',
     lg: '大',

package/src/types.d.ts

@@ -0,0 +1 @@
+declare module '*.css';

package/src/utilities/browser.ts

@@ -0,0 +1,131 @@
+declare global {
+  interface Navigator {
+    userAgentData?: {
+      mobile: boolean;
+      brands: Array<{ brand: string; version: string }>;
+      platform: string;
+      getHighEntropyValues: (hints: string[]) => Promise<any>;
+    };
+  }
+  interface Window {
+    opera?: string;
+  }
+}
+
+/**
+ * 判断当前环境是否为移动设备。
+ * @returns {boolean}
+ */
+export function isMobile(): boolean {
+  if (typeof window === 'undefined' || typeof navigator === 'undefined') {
+    return false;
+  }
+
+  // 1. 优先使用现代 Client Hints API
+  if (
+    navigator.userAgentData &&
+    typeof navigator.userAgentData.mobile === 'boolean'
+  ) {
+    return navigator.userAgentData.mobile;
+  }
+
+  // 提取 UA 字符串并做安全处理
+  const ua = navigator.userAgent || navigator.vendor || window.opera || '';
+
+  // 2. 核心 UA 正则匹配
+  const mobileUaRegex =
+    /Android|iPhone|iPad|iPod|Mobile|Windows Phone|webOS|BlackBerry|IEMobile|Opera Mini/i;
+  const isMobileUa = mobileUaRegex.test(ua);
+
+  // 3. 排除平板设备 (Tablet)
+  const isTabletUa = /iPad|Android(?!.*Mobile)|Tablet/i.test(ua);
+
+  // 4. 综合判定逻辑（针对 iOS 和 Android 分别处理）
+  if (isMobileUa && !isTabletUa) {
+    // 对于 iOS 设备，UA 匹配通常足够
+    if (
+      /iPhone|iPod|Windows Phone|webOS|BlackBerry|IEMobile|Opera Mini/i.test(ua)
+    ) {
+      return true;
+    }
+    // Android 设备需结合屏幕尺寸或触摸能力，避免大屏安卓平板被误判
+    if (/Android/i.test(ua)) {
+      const hasTouchSupport =
+        'maxTouchPoints' in navigator
+          ? navigator.maxTouchPoints > 0
+          : 'ontouchstart' in window;
+      const screenWidth = Math.min(window.screen.width, window.screen.height);
+      return screenWidth <= 768 || hasTouchSupport;
+    }
+  }
+
+  // 5. 针对 iOS 13+ iPad 伪装成 Mac 的特殊兜底
+  const isLikelyIPad = /Macintosh|MacIntel/i.test(ua);
+  if (isLikelyIPad) {
+    const hasTouchSupport =
+      'maxTouchPoints' in navigator
+        ? navigator.maxTouchPoints > 0
+        : 'ontouchstart' in window;
+    const screenWidth = Math.min(window.screen.width, window.screen.height);
+    return hasTouchSupport && screenWidth <= 768;
+  }
+
+  return false;
+}
+
+/**
+ * 复制文本到剪贴板。
+ *
+ * 优先使用 Clipboard API，不可用时降级到 textarea + execCommand。
+ * @param {unknown} text 需要复制的文本（接受任意类型，内部会安全转换为字符串）。
+ * @returns {Promise<boolean>} 是否复制成功。
+ */
+export async function copy(text: unknown): Promise<boolean> {
+  if (typeof window === 'undefined' || typeof document === 'undefined') {
+    return Promise.resolve(false);
+  }
+
+  const value = String(text);
+
+  if (
+    navigator.clipboard &&
+    typeof navigator.clipboard.writeText === 'function'
+  ) {
+    try {
+      await navigator.clipboard.writeText(value);
+      return true;
+    } catch {
+      return fallbackCopy(value);
+    }
+  }
+
+  return fallbackCopy(value);
+}
+
+/**
+ * 降级复制方案：使用隐藏的 textarea 和 execCommand
+ * @param {string} text 需要复制的文本
+ * @returns {boolean} 是否复制成功
+ */
+function fallbackCopy(text: string): boolean {
+  let textarea = null;
+
+  try {
+    textarea = document.createElement('textarea');
+    textarea.value = text;
+    textarea.setAttribute('readonly', '');
+    textarea.style.position = 'absolute';
+    textarea.style.left = '-9999px';
+    textarea.style.opacity = '0';
+    document.body.appendChild(textarea);
+    textarea.select();
+    textarea.setSelectionRange(0, text.length);
+    return document.execCommand('copy');
+  } catch {
+    return false;
+  } finally {
+    if (textarea && textarea.parentNode) {
+      textarea.parentNode.removeChild(textarea);
+    }
+  }
+}

package/src/utilities/cache.ts

@@ -0,0 +1,57 @@
+/**
+ * 定义可销毁服务的接口契约
+ */
+export interface Destroyable {
+  destroy?: () => void;
+}
+
+/**
+ * 简易服务缓存容器。
+ * 用于按 key 缓存工厂创建的服务实例，并提供销毁能力。
+ */
+export const service = (() => {
+  // 使用闭包封装 Map，避免 this 指向问题，实现私有化
+  const instances = new Map<string, Destroyable>();
+
+  return {
+    /**
+     * 获取服务实例。如果不存在，则通过工厂函数创建并缓存。
+     * @template T - 期望返回的服务类型（需继承自 Destroyable）
+     * @param {string} key - 服务的唯一标识
+     * @param {() => T} factory - 创建服务实例的工厂函数
+     * @returns {T} 服务实例
+     */
+    get<T extends Destroyable>(key: string, factory: () => T): T {
+      if (!instances.has(key)) {
+        instances.set(key, factory());
+      }
+      return instances.get(key) as T;
+    },
+
+    /**
+     * 销毁指定 key 的服务实例并从缓存中移除。
+     * @param {string} key - 服务的唯一标识
+     */
+    destroy(key: string): void {
+      const instance = instances.get(key);
+      if (instance) {
+        if (typeof instance.destroy === 'function') {
+          instance.destroy();
+        }
+        instances.delete(key);
+      }
+    },
+
+    /**
+     * 销毁所有缓存的服务实例并清空容器。
+     */
+    destroyAll(): void {
+      for (const instance of instances.values()) {
+        if (typeof instance.destroy === 'function') {
+          instance.destroy();
+        }
+      }
+      instances.clear();
+    },
+  };
+})();