@radishon/lumina 1.0.2 → 1.0.4

package/README.md

@@ -50,6 +50,44 @@ function App() {
 
 ### Vue 3
 
+**重要配置**：需要在 `vite.config.js` 或 `vue.config.js` 中配置 `isCustomElement` 来禁用 Vue 对 Web Component 的解析：
+
+#### Vite 项目
+
+```js
+// vite.config.js
+export default {
+  vue: {
+    template: {
+      compilerOptions: {
+        isCustomElement: tag => tag === 'lumina-loading'
+      }
+    }
+  }
+}
+```
+
+#### Vue CLI 项目
+
+```js
+// vue.config.js
+module.exports = {
+  chainWebpack: config => {
+    config.module
+      .rule('vue')
+      .use('vue-loader')
+      .tap(options => ({
+        ...options,
+        compilerOptions: {
+          isCustomElement: tag => tag === 'lumina-loading'
+        }
+      }))
+  }
+}
+```
+
+**使用示例**：
+
 ```vue
 <template>
   <div class="loading-container">
@@ -64,6 +102,27 @@ import '@radishon/lumina'
 
 ### Vue 2
 
+**重要配置**：需要在 `vue.config.js` 中配置 `isCustomElement`：
+
+```js
+// vue.config.js
+module.exports = {
+  chainWebpack: config => {
+    config.module
+      .rule('vue')
+      .use('vue-loader')
+      .tap(options => ({
+        ...options,
+        compilerOptions: {
+          isCustomElement: tag => tag === 'lumina-loading'
+        }
+      }))
+  }
+}
+```
+
+**使用示例**：
+
 ```vue
 <template>
   <div class="loading-container">
@@ -122,6 +181,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
@@ -136,6 +247,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.2",
+  "version": "1.0.4",
   "description": "A beautiful animated loading indicator web component for all frameworks",
   "main": "dist/index.js",
   "module": "dist/index.mjs",