vanilla-jui 1.3.9 → 1.3.10

package/src/css/toolbar.css

@@ -0,0 +1,115 @@
+@layer components {
+  .j-toolbar-container {
+    position: var(--toolbar-container-position, sticky);
+    top: 0;
+    width: 100%;
+    z-index: var(--z-index-toolbar);
+    overflow: hidden;
+    overflow-x: auto;
+    -webkit-overflow-scrolling: touch;
+    scrollbar-color: transparent transparent;
+    scrollbar-width: none;
+    -ms-overflow-style: none;
+    scroll-behavior: smooth;
+    background: var(--toolbar-container-background, var(--ui-bg));
+    border-bottom: var(--toolbar-container-border, 1px solid var(--ui-border));
+  }
+
+  .j-toolbar {
+    position: relative;
+    /* width: 100%; */
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    gap: var(--toolbar-gap, 0);
+    padding: var(--toolbar-padding, calc(var(--space) * 2));
+    box-shadow: var(--toolbar-box-shadow, var(--shadow-sm));
+  }
+
+  @media screen and (max-width: 992px) {
+    .j-toolbar {
+      justify-content: flex-start;
+    }
+  }
+
+  .j-toolbar button svg {
+    width: var(--toolbar-icon-size, var(--font-size-xl));
+    height: var(--toolbar-icon-size, var(--font-size-xl));
+  }
+
+  .j-toolbar button.is-sm svg {
+    --toolbar-icon-size: var(--font-size-lg);
+  }
+
+  .j-toolbar button.is-lg svg {
+    --toolbar-icon-size: var(--font-size-2xl);
+  }
+
+  .j-toolbar .divider {
+    width: 1px;
+    height: 16px;
+    background-color: var(--ui-fg);
+  }
+
+  /* 编辑器区域 */
+  #editor {
+    max-width: 880px;
+    border-left: 1px solid var(--ui-border);
+    border-right: 1px solid var(--ui-border);
+    min-height: calc(100vh - 51px);
+    padding: 1.5rem 1.5rem 4rem;
+  }
+
+  .ProseMirror {
+    outline: 0;
+  }
+
+  .heading-drop-menu,
+  .editor-size-menu,
+  .color-drop-menu {
+    background: var(--ui-bg-subtle);
+    padding: var(--space);
+    box-shadow: var(--shadow-md);
+    border: 1px solid var(--ui-border);
+    border-radius: var(--radius-md);
+    font-size: var(--font-size-md)
+  }
+
+  .heading-drop-menu a,
+  .editor-size-menu a {
+    padding-block: calc(var(--space) * 1);
+  }
+
+  .color-drop-menu .color-panel {
+    padding: .5rem;
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    gap: .5rem;
+  }
+
+  .color-drop-menu .color-panel button.color-btn {
+    padding: 0;
+    margin: 0;
+    outline: none;
+    width: 32px;
+    height: 32px;
+    border-radius: var(--radius-sm);
+    border: 1px solid var(--ui-border);
+    cursor: pointer;
+  }
+
+  .color-drop-menu .color-panel button.color-btn.color-btn-clear::after {
+    content: '🚫';
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 30px;
+    background-color: var(--ui-bg-subtle);
+    border-radius: var(--radius-sm);
+  }
+
+  .color-drop-menu .color-panel .color-btn:last-of-type {
+    grid-column: span 5;
+    width: auto;
+  }
+}

package/src/css/tooltip.css

@@ -0,0 +1,19 @@
+@layer comopnents {
+  .j-tooltip {
+    position: relative;
+    background: var(--tooltip-background, #000);
+    color: var(--tooltip-foreground, #fff);
+    border-width: var(--tooltip-border-width, 1px);
+    border-style: var(--tooltip-border-style, solid);
+    border-color: var(--tooltip-border-color, #111);
+    border-radius: var(--tooltip-radius, var(--radius-md));
+    max-width: var(--tooltip-max-width, 260px);
+  }
+
+  .j-tooltip .tooltip-message {
+    word-wrap: break-word;
+    padding: var(--tooltip-padding, calc(var(--space) * 1.5) calc(var(--space) * 2));
+    font-size: var(--tooltip-font-size, var(--font-size-md));
+    line-height: var(--tooltip-line-height, var(--line-height));
+  }
+}

package/src/icons/index.js

@@ -0,0 +1,30 @@
+export default {
+  info: '<path d="M12 22C6.47715 22 2 17.5228 2 12 2 6.47715 6.47715 2 12 2 17.5228 2 22 6.47715 22 12 22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM13 10.5V15H14V17H10V15H11V12.5H10V10.5H13ZM13.5 8C13.5 8.82843 12.8284 9.5 12 9.5 11.1716 9.5 10.5 8.82843 10.5 8 10.5 7.17157 11.1716 6.5 12 6.5 12.8284 6.5 13.5 7.17157 13.5 8Z"></path>',
+  success:
+    '<path d="M4 12C4 7.58172 7.58172 4 12 4C16.4183 4 20 7.58172 20 12C20 16.4183 16.4183 20 12 20C7.58172 20 4 16.4183 4 12ZM12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2ZM17.4571 9.45711L16.0429 8.04289L11 13.0858L8.20711 10.2929L6.79289 11.7071L11 15.9142L17.4571 9.45711Z"></path>',
+  warning:
+    '<path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM11 15H13V17H11V15ZM11 7H13V13H11V7Z"></path>',
+  error:
+    '<path d="M12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22ZM12 20C16.4183 20 20 16.4183 20 12C20 7.58172 16.4183 4 12 4C7.58172 4 4 7.58172 4 12C4 16.4183 7.58172 20 12 20ZM12 10.5858L14.8284 7.75736L16.2426 9.17157L13.4142 12L16.2426 14.8284L14.8284 16.2426L12 13.4142L9.17157 16.2426L7.75736 14.8284L10.5858 12L7.75736 9.17157L9.17157 7.75736L12 10.5858Z"></path>',
+  'arrow-left':
+    '<path d="M10.8284 12.0007L15.7782 16.9504L14.364 18.3646L8 12.0007L14.364 5.63672L15.7782 7.05093L10.8284 12.0007Z"></path>',
+  'arrow-right':
+    '<path d="M13.1717 12.0007L8.22192 7.05093L9.63614 5.63672L16.0001 12.0007L9.63614 18.3646L8.22192 16.9504L13.1717 12.0007Z"></path>',
+  'arrow-up':
+    '<path d="M11.9999 10.8284L7.0502 15.7782L5.63599 14.364L11.9999 8L18.3639 14.364L16.9497 15.7782L11.9999 10.8284Z"></path>',
+  'arrow-down':
+    '<path d="M11.9999 13.1714L16.9497 8.22168L18.3639 9.63589L11.9999 15.9999L5.63599 9.63589L7.0502 8.22168L11.9999 13.1714Z"></path>',
+  more: '<path d="M5 10C3.9 10 3 10.9 3 12C3 13.1 3.9 14 5 14C6.1 14 7 13.1 7 12C7 10.9 6.1 10 5 10ZM19 10C17.9 10 17 10.9 17 12C17 13.1 17.9 14 19 14C20.1 14 21 13.1 21 12C21 10.9 20.1 10 19 10ZM12 10C10.9 10 10 10.9 10 12C10 13.1 10.9 14 12 14C13.1 14 14 13.1 14 12C14 10.9 13.1 10 12 10Z"></path>',
+  close:
+    '<path d="M11.9997 10.5865L16.9495 5.63672L18.3637 7.05093L13.4139 12.0007L18.3637 16.9504L16.9495 18.3646L11.9997 13.4149L7.04996 18.3646L5.63574 16.9504L10.5855 12.0007L5.63574 7.05093L7.04996 5.63672L11.9997 10.5865Z"></path>',
+  loader:
+    '<path d="M12 3C16.9706 3 21 7.02944 21 12H19C19 8.13401 15.866 5 12 5V3Z"></path>',
+  menu: '<path d="M3 4H21V6H3V4ZM3 11H21V13H3V11ZM3 18H21V20H3V18Z"></path>',
+  palette:
+    '<path fill="none" d="M0 0h24v24H0z"></path><path d="M12 2C17.5222 2 22 5.97778 22 10.8889C22 13.9556 19.5111 16.4444 16.4444 16.4444H14.4778C13.5556 16.4444 12.8111 17.1889 12.8111 18.1111C12.8111 18.5333 12.9778 18.9222 13.2333 19.2111C13.5 19.5111 13.6667 19.9 13.6667 20.3333C13.6667 21.2556 12.9 22 12 22C6.47778 22 2 17.5222 2 12C2 6.47778 6.47778 2 12 2ZM10.8111 18.1111C10.8111 16.0843 12.451 14.4444 14.4778 14.4444H16.4444C18.4065 14.4444 20 12.851 20 10.8889C20 7.1392 16.4677 4 12 4C7.58235 4 4 7.58235 4 12C4 16.19 7.2226 19.6285 11.324 19.9718C10.9948 19.4168 10.8111 18.7761 10.8111 18.1111ZM7.5 12C6.67157 12 6 11.3284 6 10.5C6 9.67157 6.67157 9 7.5 9C8.32843 9 9 9.67157 9 10.5C9 11.3284 8.32843 12 7.5 12ZM16.5 12C15.6716 12 15 11.3284 15 10.5C15 9.67157 15.6716 9 16.5 9C17.3284 9 18 9.67157 18 10.5C18 11.3284 17.3284 12 16.5 12ZM12 9C11.1716 9 10.5 8.32843 10.5 7.5C10.5 6.67157 11.1716 6 12 6C12.8284 6 13.5 6.67157 13.5 7.5C13.5 8.32843 12.8284 9 12 9Z"></path>',
+  message:
+    '<path d="M2 8.99374C2 5.68349 4.67654 3 8.00066 3H15.9993C19.3134 3 22 5.69478 22 8.99374V21H8.00066C4.68659 21 2 18.3052 2 15.0063V8.99374ZM20 19V8.99374C20 6.79539 18.2049 5 15.9993 5H8.00066C5.78458 5 4 6.78458 4 8.99374V15.0063C4 17.2046 5.79512 19 8.00066 19H20ZM14 11H16V13H14V11ZM8 11H10V13H8V11Z"></path>',
+  chat: '<path d="M10 3H14C18.4183 3 22 6.58172 22 11C22 15.4183 18.4183 19 14 19V22.5C9 20.5 2 17.5 2 11C2 6.58172 5.58172 3 10 3ZM12 17H14C17.3137 17 20 14.3137 20 11C20 7.68629 17.3137 5 14 5H10C6.68629 5 4 7.68629 4 11C4 14.61 6.46208 16.9656 12 19.4798V17Z"></path>',
+  discuss:
+    '<path d="M14 22.5L11.2 19H6C5.44772 19 5 18.5523 5 18V7.10256C5 6.55028 5.44772 6.10256 6 6.10256H22C22.5523 6.10256 23 6.55028 23 7.10256V18C23 18.5523 22.5523 19 22 19H16.8L14 22.5ZM15.8387 17H21V8.10256H7V17H11.2H12.1613L14 19.2984L15.8387 17ZM2 2H19V4H3V15H1V3C1 2.44772 1.44772 2 2 2Z"></path>',
+};

package/src/index.js

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

package/src/locales/index.js

@@ -0,0 +1,45 @@
+export default {
+  en: {
+    b: 'Back',
+    t: 'Customize',
+    d: 'Customize your UI experience.',
+    n: 'None',
+    sm: 'Small',
+    md: 'Medium',
+    lg: 'Large',
+  },
+  zh: {
+    b: '返回',
+    t: '自定义主题',
+    d: '自定义您的UI体验。',
+    Theme: '主题',
+    Radius: '圆角',
+    Shadow: '阴影',
+    Font: '字号',
+    Mode: '模式',
+    Gray: '灰色',
+    Olive: '橄榄绿',
+    Tomato: '番茄红',
+    Ruby: '红宝石',
+    Pink: '粉红',
+    Violet: '紫罗兰',
+    Indigo: '靛蓝',
+    Blue: '蓝色',
+    Teal: '青色',
+    Grass: '草绿',
+    Mint: '薄荷绿',
+    Lime: '酸橙绿',
+    Yellow: '黄色',
+    Orange: '橙色',
+    Gold: '金色',
+    n: '无',
+    sm: '小',
+    md: '中',
+    lg: '大',
+    XL: '更大',
+    Round: '圆角',
+    Light: '浅色',
+    Dark: '深色',
+    Auto: '自动',
+  },
+};

package/src/locales/index.min.js

@@ -0,0 +1 @@
+export default{en:{b:"Back",t:"Customize",d:"Customize your UI experience.",n:"None",sm:"Small",md:"Medium",lg:"Large"},zh:{b:"返回",t:"自定义主题",d:"自定义您的UI体验。",Theme:"主题",Radius:"圆角",Shadow:"阴影",Font:"字号",Mode:"模式",Gray:"灰色",Olive:"橄榄绿",Tomato:"番茄红",Ruby:"红宝石",Pink:"粉红",Violet:"紫罗兰",Indigo:"靛蓝",Blue:"蓝色",Teal:"青色",Grass:"草绿",Mint:"薄荷绿",Lime:"酸橙绿",Yellow:"黄色",Orange:"橙色",Gold:"金色",n:"无",sm:"小",md:"中",lg:"大",XL:"更大",Round:"圆角",Light:"浅色",Dark:"深色",Auto:"自动"}};

package/src/utilities/browser.js

@@ -0,0 +1,111 @@
+/**
+ * 判断当前环境是否为移动设备。
+ * @returns {boolean}
+ */
+export function isMobile() {
+  // 1. 优先使用现代 Client Hints API (如果浏览器支持)
+  // 这是目前最准确、最符合隐私规范的方式
+  if (
+    navigator.userAgentData &&
+    typeof navigator.userAgentData.mobile === 'boolean'
+  ) {
+    return navigator.userAgentData.mobile;
+  }
+
+  const ua = navigator.userAgent || navigator.vendor || window.opera;
+
+  // 2. 核心 UA 正则匹配 (覆盖主流手机及移动端浏览器)
+  // 注意：这里包含了 Mobile, iPhone, Android 等，但排除了明确标识为 Tablet 的安卓设备
+  const mobileUaRegex =
+    /Android|iPhone|iPad|iPod|Mobile|Windows Phone|webOS|BlackBerry|IEMobile|Opera Mini/i;
+  const isMobileUa = mobileUaRegex.test(ua);
+
+  // 3. 排除平板设备 (Tablet)
+  // 安卓平板通常包含 "Android" 但不包含 "Mobile"，或者明确包含 "Tablet"
+  const isTabletUa = /iPad|Android(?!.*Mobile)|Tablet/i.test(ua);
+
+  // 4. 触摸能力检测 (作为兜底和验证)
+  // 现代 PC 也可能有触摸屏，因此触摸仅作为辅助验证，不能单独作为判定标准
+  const hasTouchSupport =
+    'maxTouchPoints' in navigator
+      ? navigator.maxTouchPoints > 0
+      : 'ontouchstart' in window;
+
+  // 5. 屏幕尺寸检测 (CSS 像素)
+  // 取宽高中较小的一边，防止横屏状态下宽度超过常规手机阈值
+  const screenWidth = Math.min(window.screen.width, window.screen.height);
+  const isSmallScreen = screenWidth <= 768;
+
+  // 6. 综合判定逻辑
+  // 必须是移动端 UA，且不是平板，并且具备小屏幕或触摸特征
+  // 这样能有效防止桌面浏览器修改 UA 导致的误判，以及 iPad 伪装成 Mac 的问题
+  if (isMobileUa && !isTabletUa) {
+    // 对于 iOS 设备，UA 匹配通常足够；对于 Android，需要屏幕尺寸辅助确认
+    if (
+      /iPhone|iPod|Windows Phone|webOS|BlackBerry|IEMobile|Opera Mini/i.test(ua)
+    ) {
+      return true;
+    }
+    // Android 设备需结合屏幕尺寸或触摸能力，避免大屏安卓平板被误判
+    if (/Android/i.test(ua)) {
+      return isSmallScreen || hasTouchSupport;
+    }
+  }
+
+  // 7. 针对 iOS 13+ iPad 伪装成 Mac 的特殊兜底
+  // 如果 UA 显示为 Mac，但支持多点触控且屏幕较小，极大概率是 iPad
+  const isLikelyIPad =
+    /Macintosh|MacIntel/i.test(ua) && hasTouchSupport && isSmallScreen;
+
+  return isLikelyIPad;
+}
+
+/**
+ * 复制文本到剪贴板。
+ *
+ * 优先使用 Clipboard API，不可用时降级到 textarea + execCommand。
+ * @param {*} text 需要复制的文本。
+ * @returns {Promise<boolean>} 是否复制成功。
+ */
+export async function copy(text) {
+  if (typeof window === 'undefined' || typeof document === 'undefined') {
+    return Promise.resolve(false);
+  }
+
+  const value = typeof text === 'string' ? text : String(text);
+
+  if (
+    navigator.clipboard &&
+    typeof navigator.clipboard.writeText === 'function'
+  ) {
+    return navigator.clipboard
+      .writeText(value)
+      .then(() => true)
+      .catch(() => fallbackCopy(value));
+  }
+
+  return Promise.resolve(fallbackCopy(value));
+}
+
+function fallbackCopy(text) {
+  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.js

@@ -0,0 +1,159 @@
+import { isFunction, randomId } from './core.js';
+
+const instances = new Map();
+const timers = new Map();
+
+/**
+ * 创建或获取带缓存的类实例。
+ *
+ * 支持按 cacheKey 缓存实例，并可通过 ttl 设置空闲释放时间。
+ * @template T
+ * @param {new (...args:any[])=>T} Class 构造函数。
+ * @param {any[]} [args=[]] 构造参数。
+ * @param {string} [cacheKey=""] 缓存键；为空时自动生成。
+ * @param {boolean} [isReset=false] 是否忽略已有缓存并重新创建。
+ * @param {number|null} [ttl=null] 空闲释放时间，单位毫秒。
+ * @returns {T} 实例代理。
+ */
+export const singleton = (
+  Class,
+  args = [],
+  cacheKey = '',
+  isReset = false,
+  ttl = null
+) => {
+  if (!isFunction(Class)) {
+    throw new Error('First argument expects a class/constructor function.');
+  }
+  if (!Array.isArray(args)) {
+    throw new Error('Second argument must be an array of arguments.');
+  }
+  if (typeof cacheKey !== 'string') {
+    throw new Error('Third argument expects a string.');
+  }
+  if (typeof isReset !== 'boolean') {
+    throw new Error('Fourth argument expects a boolean.');
+  }
+  if (typeof ttl !== 'number' && ttl !== null) {
+    throw new Error('Fifth argument expects a number or null.');
+  }
+
+  const key = cacheKey.trim() === '' ? randomId() : cacheKey;
+
+  if (instances.has(key) && !isReset) {
+    return instances.get(key).proxy;
+  }
+
+  const instance = new Class(...args);
+  const proxy = new Proxy(instance, {
+    get(target, name, receiver) {
+      if (ttl) refreshTimer(key, ttl);
+      return Reflect.get(target, name, receiver);
+    },
+    set(target, name, value, receiver) {
+      return Reflect.set(target, name, value, receiver);
+    },
+  });
+
+  instances.set(key, { instance, proxy });
+  return proxy;
+};
+
+function refreshTimer(key, ttl) {
+  if (timers.has(key)) {
+    clearTimeout(timers.get(key));
+  }
+
+  const timeId = setTimeout(() => {
+    release(key);
+  }, ttl);
+
+  timers.set(key, timeId);
+}
+
+/**
+ * 释放指定缓存实例。
+ *
+ * 若实例存在 destroy 方法，会先调用 destroy。
+ * @param {string} key 缓存键。
+ * @returns {void}
+ */
+export function release(key) {
+  if (instances.has(key)) {
+    const { instance } = instances.get(key);
+
+    if (typeof instance.destroy === 'function') {
+      try {
+        instance.destroy();
+      } catch {
+        throw new Error(
+          `release(): destroy() failed on instance with key "${key}".`
+        );
+      }
+    }
+
+    instances.delete(key);
+  }
+
+  if (timers.has(key)) {
+    clearTimeout(timers.get(key));
+    timers.delete(key);
+  }
+}
+
+/**
+ * 释放 singleton 管理的全部实例。
+ * @returns {void}
+ */
+export function destroyAll() {
+  for (const { instance } of instances.values()) {
+    if (typeof instance.destroy === 'function') {
+      try {
+        instance.destroy();
+      } catch {}
+    }
+  }
+
+  instances.clear();
+
+  for (const timerId of timers.values()) {
+    clearTimeout(timerId);
+  }
+
+  timers.clear();
+}
+
+/**
+ * 简易服务缓存容器。
+ *
+ * 用于按 key 缓存工厂创建的服务实例，并提供销毁能力。
+ */
+export const service = {
+  instances: new Map(),
+
+  get(key, factory) {
+    if (!this.instances.has(key)) {
+      this.instances.set(key, factory());
+    }
+    return this.instances.get(key);
+  },
+
+  destroy(key) {
+    if (this.instances.has(key)) {
+      const instance = this.instances.get(key);
+      if (instance.destroy) {
+        instance.destroy();
+      }
+      this.instances.delete(key);
+    }
+  },
+
+  destroyAll() {
+    for (const instance of this.instances.values()) {
+      if (instance.destroy) {
+        instance.destroy();
+      }
+    }
+    this.instances.clear();
+  },
+};