@radishon/lumina 1.0.3 → 1.0.5

package/README.md

@@ -1,7 +1,13 @@
 # Lumina
 
+<div align="center">
+
+🌐 **在线演示**: [https://lumina.redishon.com](https://lumina.redishon.com)
+
 一个优雅的动画加载指示器 **Web Component**，提供多种预设动画序列，为你的应用增添独特的视觉体验。**适用于所有前端框架**。
 
+</div>
+
 ## 简介
 
 Lumina 是一个轻量级的 Loading 组件，通过精心设计的 Unicode 字符序列和颜色配置，呈现出流畅的动画效果。无论是科技感的赛博朋克风格，还是自然的月相变化，都能为你的应用加载状态提供独特的视觉表达。
@@ -181,6 +187,58 @@ export class AppModule {}
 <lumina-loading type="braille" speed="100"></lumina-loading>
 ```
 
+### 高级自定义
+
+#### 自定义字符序列
+
+通过 `chars` 属性传入 JSON 格式的字符数组，完全自定义动画内容：
+
+```html
+<!-- 使用自定义字符 -->
+<lumina-loading chars='["🚀","⭐","🌙","☀️"]' speed="100"></lumina-loading>
+
+<!-- 自定义文字动画 -->
+<lumina-loading chars='["L","O","A","D","I","N","G"]' speed="150"></lumina-loading>
+
+<!-- 自定义符号 -->
+<lumina-loading chars='["▖","▘","▝","▗"]' speed="120"></lumina-loading>
+```
+
+#### 自定义颜色
+
+通过 `color` 属性传入任意 CSS 颜色值：
+
+```html
+<!-- 自定义预设序列的颜色 -->
+<lumina-loading type="star" color="#ff6b6b"></lumina-loading>
+
+<!-- 结合自定义字符和颜色 -->
+<lumina-loading chars='["●","○","★"]' color="#00ff88"></lumina-loading>
+
+<!-- 支持所有 CSS 颜色格式 -->
+<lumina-loading type="snow" color="rgb(255, 107, 107)"></lumina-loading>
+<lumina-loading type="snow" color="hsl(330, 80%, 60%)"></lumina-loading>
+<lumina-loading type="snow" color="coral"></lumina-loading>
+```
+
+#### 完整自定义示例
+
+```html
+<!-- 完全自定义：字符 + 颜色 + 速度 -->
+<lumina-loading 
+  chars='["🔥","✨","💫","🌟"]' 
+  color="#ffd700" 
+  speed="80">
+</lumina-loading>
+
+<!-- 混合使用：预设序列 + 自定义颜色 -->
+<lumina-loading 
+  type="flower" 
+  color="#ff1493" 
+  speed="200">
+</lumina-loading>
+```
+
 ### JavaScript 动态控制
 
 ```javascript
@@ -195,6 +253,8 @@ el.speed = 200;
 |------|------|--------|------|
 | `type` | `SequenceKey` | `'claude'` | 动画序列类型，见下方可用序列列表 |
 | `speed` | `number` | `180` | 动画帧切换速度（毫秒） |
+| `chars` | `string[]` | `null` | 自定义字符序列（JSON 数组格式），优先级高于 `type` |
+| `color` | `string` | `null` | 自定义颜色值，支持所有 CSS 颜色格式，优先级高于预设颜色 |
 
 ## 可用的序列类型
 

package/dist/index.d.mts

@@ -18,6 +18,13 @@ declare class LuminaElement extends HTMLElement {
     set type(value: SequenceKey);
     get speed(): number;
     set speed(value: number);
+    get chars(): string[] | null;
+    set chars(value: string[] | null);
+    get color(): string | null;
+    set color(value: string | null);
+    private getChars;
+    private getConfig;
+    private getColor;
     private render;
     private startAnimation;
 }

package/dist/index.d.ts

@@ -18,6 +18,13 @@ declare class LuminaElement extends HTMLElement {
     set type(value: SequenceKey);
     get speed(): number;
     set speed(value: number);
+    get chars(): string[] | null;
+    set chars(value: string[] | null);
+    get color(): string | null;
+    set color(value: string | null);
+    private getChars;
+    private getConfig;
+    private getColor;
     private render;
     private startAnimation;
 }

package/dist/index.js

@@ -112,7 +112,7 @@ var LuminaElement = class extends HTMLElement {
     this.attachShadow({ mode: "open" });
   }
   static get observedAttributes() {
-    return ["type", "speed"];
+    return ["type", "speed", "chars", "color"];
   }
   connectedCallback() {
     this.render();
@@ -128,7 +128,7 @@ var LuminaElement = class extends HTMLElement {
       if (name === "speed" && this._timer) {
         this.startAnimation();
       }
-      if (name === "type") {
+      if (name === "type" || name === "chars" || name === "color") {
         this.render();
         this.startAnimation();
       }
@@ -147,17 +147,67 @@ var LuminaElement = class extends HTMLElement {
   set speed(value) {
     this.setAttribute("speed", String(value));
   }
-  render() {
+  get chars() {
+    const charsAttr = this.getAttribute("chars");
+    if (charsAttr) {
+      try {
+        const parsed = JSON.parse(charsAttr);
+        if (Array.isArray(parsed) && parsed.every((item) => typeof item === "string")) {
+          return parsed;
+        }
+      } catch {
+      }
+    }
+    return null;
+  }
+  set chars(value) {
+    if (value === null) {
+      this.removeAttribute("chars");
+    } else {
+      this.setAttribute("chars", JSON.stringify(value));
+    }
+  }
+  get color() {
+    return this.getAttribute("color");
+  }
+  set color(value) {
+    if (value === null) {
+      this.removeAttribute("color");
+    } else {
+      this.setAttribute("color", value);
+    }
+  }
+  getChars() {
+    const customChars = this.chars;
+    if (customChars) {
+      return customChars;
+    }
     const config = SEQUENCES[this.type] || SEQUENCES["claude"];
-    const currentChar = config.chars[this._index] || config.chars[0];
+    return config.chars;
+  }
+  getConfig() {
+    return SEQUENCES[this.type] || SEQUENCES["claude"];
+  }
+  getColor() {
+    const customColor = this.color;
+    if (customColor) {
+      return customColor;
+    }
+    const config = this.getConfig();
+    return config.color;
+  }
+  render() {
+    const chars = this.getChars();
+    const color = this.getColor();
+    const currentChar = chars[this._index] || chars[0];
     this.shadowRoot.innerHTML = `
       <style>
         :host {
           display: inline-block;
         }
         .container {
-          color: ${config.color};
-          text-shadow: 0 0 20px ${config.color}66;
+          color: ${color};
+          text-shadow: 0 0 20px ${color}66;
           font-size: 42px;
           height: 60px;
           display: flex;
@@ -175,11 +225,11 @@ var LuminaElement = class extends HTMLElement {
     if (this._timer) {
       clearInterval(this._timer);
     }
-    const config = SEQUENCES[this.type] || SEQUENCES["claude"];
+    const chars = this.getChars();
     this._timer = setInterval(() => {
-      this._index = (this._index + 1) % config.chars.length;
+      this._index = (this._index + 1) % chars.length;
       if (this._div) {
-        this._div.textContent = config.chars[this._index];
+        this._div.textContent = chars[this._index];
       }
     }, this.speed);
   }

package/dist/index.mjs

@@ -85,7 +85,7 @@ var LuminaElement = class extends HTMLElement {
     this.attachShadow({ mode: "open" });
   }
   static get observedAttributes() {
-    return ["type", "speed"];
+    return ["type", "speed", "chars", "color"];
   }
   connectedCallback() {
     this.render();
@@ -101,7 +101,7 @@ var LuminaElement = class extends HTMLElement {
       if (name === "speed" && this._timer) {
         this.startAnimation();
       }
-      if (name === "type") {
+      if (name === "type" || name === "chars" || name === "color") {
         this.render();
         this.startAnimation();
       }
@@ -120,17 +120,67 @@ var LuminaElement = class extends HTMLElement {
   set speed(value) {
     this.setAttribute("speed", String(value));
   }
-  render() {
+  get chars() {
+    const charsAttr = this.getAttribute("chars");
+    if (charsAttr) {
+      try {
+        const parsed = JSON.parse(charsAttr);
+        if (Array.isArray(parsed) && parsed.every((item) => typeof item === "string")) {
+          return parsed;
+        }
+      } catch {
+      }
+    }
+    return null;
+  }
+  set chars(value) {
+    if (value === null) {
+      this.removeAttribute("chars");
+    } else {
+      this.setAttribute("chars", JSON.stringify(value));
+    }
+  }
+  get color() {
+    return this.getAttribute("color");
+  }
+  set color(value) {
+    if (value === null) {
+      this.removeAttribute("color");
+    } else {
+      this.setAttribute("color", value);
+    }
+  }
+  getChars() {
+    const customChars = this.chars;
+    if (customChars) {
+      return customChars;
+    }
     const config = SEQUENCES[this.type] || SEQUENCES["claude"];
-    const currentChar = config.chars[this._index] || config.chars[0];
+    return config.chars;
+  }
+  getConfig() {
+    return SEQUENCES[this.type] || SEQUENCES["claude"];
+  }
+  getColor() {
+    const customColor = this.color;
+    if (customColor) {
+      return customColor;
+    }
+    const config = this.getConfig();
+    return config.color;
+  }
+  render() {
+    const chars = this.getChars();
+    const color = this.getColor();
+    const currentChar = chars[this._index] || chars[0];
     this.shadowRoot.innerHTML = `
       <style>
         :host {
           display: inline-block;
         }
         .container {
-          color: ${config.color};
-          text-shadow: 0 0 20px ${config.color}66;
+          color: ${color};
+          text-shadow: 0 0 20px ${color}66;
           font-size: 42px;
           height: 60px;
           display: flex;
@@ -148,11 +198,11 @@ var LuminaElement = class extends HTMLElement {
     if (this._timer) {
       clearInterval(this._timer);
     }
-    const config = SEQUENCES[this.type] || SEQUENCES["claude"];
+    const chars = this.getChars();
     this._timer = setInterval(() => {
-      this._index = (this._index + 1) % config.chars.length;
+      this._index = (this._index + 1) % chars.length;
       if (this._div) {
-        this._div.textContent = config.chars[this._index];
+        this._div.textContent = chars[this._index];
       }
     }, this.speed);
   }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@radishon/lumina",
-  "version": "1.0.3",
+  "version": "1.0.5",
   "description": "A beautiful animated loading indicator web component for all frameworks",
   "main": "dist/index.js",
   "module": "dist/index.mjs",