@5even7/dlc-ui 0.2.6 → 0.2.8

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 > **发版规则**：默认每次发布只递增补丁号（0.x.y → 0.x.(y+1)，即 +0.01）；除非手动明确指定新版本号，否则不升次版本。
 
+## 0.2.8 - 2026-08-09
+
+- 最终命名确认：官方组件导出为 `DlcCapsule / DlcProgress / DlcColor`（无中划线），模板中仍可直接写 `<dlc-capsule>` 等 kebab 写法（Vue 自动映射）；移除字符串形式的导出名，兼容 Vite/esbuild。
+
+## 0.2.7 - 2026-08-09
+
+- 修复：0.2.6 发布包未包含 mouseColor / showValue 热切换（watch 仍走重建），本轮真正启用 `setMouseColor()` / `setShowValue()`，开关不再重建组件、不丢插槽内容。
+- 组件更名：`CosmicCapsule → DlcCapsule`、`ProgressCapsule → DlcProgress`、`ColorBackground → DlcColor`（旧名保留为兼容别名，标记 deprecated；模板里也可写 `<dlc-capsule>` 等）。
+
 ## 0.2.6 - 2026-08-09
 
 - 修复：Vue wrapper 重建组件时因“插槽容器搬移”导致组件树损坏（子组件丢失、mouseColor 开关无效）的问题；插槽改回搬子节点。

package/README.md

@@ -109,7 +109,7 @@ background.pause();
 
 ```vue
 <script setup>
-import { CosmicCapsule, ProgressCapsule, ColorBackground } from '@5even7/dlc-ui/vue3';
+import { DlcCapsule, DlcProgress, DlcColor } from '@5even7/dlc-ui/vue3';
 import '@5even7/dlc-ui/style.css';
 
 function onProgressChange({ value }) {
@@ -118,35 +118,35 @@ function onProgressChange({ value }) {
 </script>
 
 <template>
-  <CosmicCapsule preset="沧溟" width="100%" height="160" :text-ratio="45" @click="...">
+  <dlc-capsule preset="沧溟" width="100%" height="160" :text-ratio="45" @click="...">
     <span class="cap-code">NC-02</span>
     <span class="cap-name">沧溟</span>
     <template #color><span class="cap-chip">DLC</span></template>
-  </CosmicCapsule>
+  </dlc-capsule>
 
-  <ProgressCapsule preset="汐潮" :width="454" :height="104" @change="onProgressChange">
+  <dlc-progress preset="汐潮" :width="454" :height="104" @change="onProgressChange">
     <span class="prog-name">画境观屿</span>
-  </ProgressCapsule>
+  </dlc-progress>
 
-  <ColorBackground preset="沧溟" style="height: 200px">
+  <dlc-color preset="沧溟" style="height: 200px">
     这段内容显示在星云背景上方
-  </ColorBackground>
+  </dlc-color>
 </template>
 ```
 
 ## Vue2
 
 ```js
-import { CosmicCapsule, ProgressCapsule } from '@5even7/dlc-ui/vue2';
+import { DlcCapsule, DlcProgress } from '@5even7/dlc-ui/vue2';
 import '@5even7/dlc-ui/style.css';
 
 export default {
-  components: { CosmicCapsule, ProgressCapsule },
+  components: { DlcCapsule, DlcProgress },
   template: `
-    <ProgressCapsule preset="汐潮" :width="454" :height="104" @change="onChange">
+    <dlc-progress preset="汐潮" :width="454" :height="104" @change="onChange">
       <span class="prog-name">画境观屿</span>
       <template v-slot:color><span>自定义颜色区内容</span></template>
-    </ProgressCapsule>
+    </dlc-progress>
   `
 };
 ```
@@ -161,7 +161,7 @@ export default {
 
 插槽内容属性（H5/工厂）：`text`、`colorContent`，支持 HTML 字符串或 DOM 节点（数组）；Vue 组件请用默认插槽 / `#color` 插槽。**注意：字符串走 innerHTML，不要传入不可信/用户直接输入的内容（XSS 风险）。**
 
-dlc-color 背景层（`createColorBackground(host, options)`）：`preset`、`colors`、`seed`、`speed`、`quality`、`renderer`、`mouseColor`、`respectReducedMotion`、`opacity`（0~1）、`fallbackColor`（预置底色 / 十六进制色 / false）。控制器支持 `setPreset / setColors / setSeed / setSpeed / setQuality / setOpacity / setFallbackColor / setMouseColor / randomize / pause / resume / dispose` 和 `ready / presetchange / error` 事件。Vue 里可用官方组件 `ColorBackground`（从 `@5even7/dlc-ui/vue2` 或 `/vue3` 导入），它的默认插槽内容会显示在背景层上方。
+dlc-color 背景层（`createColorBackground(host, options)`）：`preset`、`colors`、`seed`、`speed`、`quality`、`renderer`、`mouseColor`、`respectReducedMotion`、`opacity`（0~1）、`fallbackColor`（预置底色 / 十六进制色 / false）。控制器支持 `setPreset / setColors / setSeed / setSpeed / setQuality / setOpacity / setFallbackColor / setMouseColor / randomize / pause / resume / dispose` 和 `ready / presetchange / error` 事件。Vue 里可用官方组件 `dlc-color`（从 `@5even7/dlc-ui/vue2` 或 `/vue3` 导入），它的默认插槽内容会显示在背景层上方。
 
 胶囊控制器额外支持 `setSeed(seed)` / `setSpeed(speed)` / `setText(content)` / `setColorContent(content)` / `setTextRatio(ratio)` / `setCssVars(vars)` / `setLabel(label)` 热更新；进度控制器额外支持 `setEdgeStyle('flow' | 'tide')` / `setValueSuffix(suffix)` 和同样的插槽热更新方法。`setPreset` 只接受文学名称字符串（如 `'汐潮'`）。Vue 组件实例也暴露 `setText` / `setColorContent` / `setTextRatio` / `setCssVars` / `setLabel`（进度另有 `setValueSuffix`），与 H5 控制器对称。
 
@@ -221,10 +221,7 @@ createProgressCapsule(el, {
 | `--hj-font` / `--hj-mono` | 字体令牌（可被插槽内容引用） | Inter / 等宽栈 |
 | `--hj-shadow` | 根节点阴影 | 柔和阴影 |
 | `--hj-value-right` | 进度数字右侧距离（仅进度条） | `30px` |
-| `--dlc-color-opacity` | 色层透明度（dlc-color） | `1` |
-| `--dlc-color-bg` | 色层兜底背景（dlc-color） | 预置底色 |
-| `--dlc-color-layer-z` | 色层 z-index（dlc-color） | `-1` |
-| `--dlc-color-content-z` | 宿主内容参考 z-index（dlc-color，由用户使用） | `1` |
+| `--dlc-color-layer-z` | 色层 z-index（dlc-color，宿主 CSS 可覆盖） | `-1` |
 
 兼容别名（deprecated，只兜底）：`--hj-copy-width`、`--hj-copy-min-width`、`--hj-copy-pad-x`、`--hj-copy-left`、`--hj-copy-max-width`、`--hj-progress-copy-pad`、`--hj-progress-copy-bg`。
 

package/dist/vue2.cjs

@@ -3140,7 +3140,7 @@ function makeWrapper(_ref) {
 }
 function makeCapsuleWrapper(createCapsule, render) {
   return makeWrapper({
-    name: 'CosmicCapsule',
+    name: 'dlc-capsule',
     props: ['preset', 'width', 'height', 'colors', 'seed', 'speed', 'textRatio', 'label', 'mouseColor', 'renderer', 'quality', 'respectReducedMotion', 'cssVars'],
     events: CAPSULE_EVENTS,
     create: createCapsule,
@@ -3219,7 +3219,7 @@ function makeCapsuleWrapper(createCapsule, render) {
 }
 function makeProgressWrapper(createProgressCapsule, render) {
   return makeWrapper({
-    name: 'ProgressCapsule',
+    name: 'dlc-progress',
     props: ['preset', 'width', 'height', 'value', 'min', 'max', 'draggable', 'disabled', 'readonly', 'edgeStyle', 'colors', 'textRatio', 'label', 'showValue', 'valueSuffix', 'quality', 'renderer', 'respectReducedMotion', 'cssVars'],
     events: PROGRESS_EVENTS,
     create: createProgressCapsule,
@@ -3322,7 +3322,7 @@ function makeProgressWrapper(createProgressCapsule, render) {
 }
 function makeColorWrapper(createColorBackground, render) {
   return makeWrapper({
-    name: 'ColorBackground',
+    name: 'dlc-color',
     props: ['preset', 'colors', 'seed', 'speed', 'quality', 'renderer', 'mouseColor', 'respectReducedMotion', 'opacity', 'fallbackColor'],
     events: COLOR_EVENTS,
     create: createColorBackground,
@@ -3414,10 +3414,18 @@ var renderColor = function renderColor(h) {
     class: 'hj-vue-host'
   }, this.$slots.default);
 };
-var CosmicCapsule = makeCapsuleWrapper(createCapsule, render);
-var ProgressCapsule = makeProgressWrapper(createProgressCapsule, render);
-var ColorBackground = makeColorWrapper(createColorBackground, renderColor);
+var DlcCapsule = makeCapsuleWrapper(createCapsule, render);
+var DlcProgress = makeProgressWrapper(createProgressCapsule, render);
+var DlcColor = makeColorWrapper(createColorBackground, renderColor);
+
+// 旧名兼容别名（deprecated）
+var CosmicCapsule = DlcCapsule;
+var ProgressCapsule = DlcProgress;
+var ColorBackground = DlcColor;
 
 exports.ColorBackground = ColorBackground;
 exports.CosmicCapsule = CosmicCapsule;
+exports.DlcCapsule = DlcCapsule;
+exports.DlcColor = DlcColor;
+exports.DlcProgress = DlcProgress;
 exports.ProgressCapsule = ProgressCapsule;

package/dist/vue2.mjs

@@ -3031,9 +3031,9 @@ function makeWrapper({ name, props, events, create, render, methods, watch }) {
   };
 }
 
-function makeCapsuleWrapper(createCapsule, render) {
-  return makeWrapper({
-    name: 'CosmicCapsule',
+function makeCapsuleWrapper(createCapsule, render) {
+  return makeWrapper({
+    name: 'dlc-capsule',
     props: [
       'preset', 'width', 'height', 'colors', 'seed', 'speed',
       'textRatio', 'label', 'mouseColor', 'renderer', 'quality', 'respectReducedMotion', 'cssVars'
@@ -3089,8 +3089,8 @@ function makeCapsuleWrapper(createCapsule, render) {
 }
 
 function makeProgressWrapper(createProgressCapsule, render) {
-  return makeWrapper({
-    name: 'ProgressCapsule',
+  return makeWrapper({
+    name: 'dlc-progress',
     props: [
       'preset', 'width', 'height', 'value', 'min', 'max',
       'draggable', 'disabled', 'readonly', 'edgeStyle', 'colors', 'textRatio', 'label', 'showValue', 'valueSuffix',
@@ -3164,7 +3164,7 @@ function makeProgressWrapper(createProgressCapsule, render) {
 
 function makeColorWrapper(createColorBackground, render) {
   return makeWrapper({
-    name: 'ColorBackground',
+    name: 'dlc-color',
     props: [
       'preset', 'colors', 'seed', 'speed', 'quality', 'renderer',
       'mouseColor', 'respectReducedMotion', 'opacity', 'fallbackColor'
@@ -3229,14 +3229,22 @@ const renderColor = function renderColor(h) {
   return h('div', { class: 'hj-vue-host' }, this.$slots.default);
 };
 
-const CosmicCapsule = makeCapsuleWrapper(createCapsule, render);
-const ProgressCapsule = makeProgressWrapper(createProgressCapsule, render);
-const ColorBackground = makeColorWrapper(createColorBackground, renderColor);
+const DlcCapsule = makeCapsuleWrapper(createCapsule, render);
+const DlcProgress = makeProgressWrapper(createProgressCapsule, render);
+const DlcColor = makeColorWrapper(createColorBackground, renderColor);
+
+// 旧名兼容别名（deprecated）
+const CosmicCapsule = DlcCapsule;
+const ProgressCapsule = DlcProgress;
+const ColorBackground = DlcColor;
 
 var vue2 = {
+  DlcCapsule,
+  DlcProgress,
+  DlcColor,
   CosmicCapsule,
   ProgressCapsule,
   ColorBackground
 };
 
-export { ColorBackground, CosmicCapsule, ProgressCapsule, vue2 as default };
+export { ColorBackground, CosmicCapsule, DlcCapsule, DlcColor, DlcProgress, ProgressCapsule, vue2 as default };

package/dist/vue3.cjs

@@ -3142,7 +3142,7 @@ function makeWrapper(_ref) {
 }
 function makeCapsuleWrapper(createCapsule, render) {
   return makeWrapper({
-    name: 'CosmicCapsule',
+    name: 'dlc-capsule',
     props: ['preset', 'width', 'height', 'colors', 'seed', 'speed', 'textRatio', 'label', 'mouseColor', 'renderer', 'quality', 'respectReducedMotion', 'cssVars'],
     events: CAPSULE_EVENTS,
     create: createCapsule,
@@ -3221,7 +3221,7 @@ function makeCapsuleWrapper(createCapsule, render) {
 }
 function makeProgressWrapper(createProgressCapsule, render) {
   return makeWrapper({
-    name: 'ProgressCapsule',
+    name: 'dlc-progress',
     props: ['preset', 'width', 'height', 'value', 'min', 'max', 'draggable', 'disabled', 'readonly', 'edgeStyle', 'colors', 'textRatio', 'label', 'showValue', 'valueSuffix', 'quality', 'renderer', 'respectReducedMotion', 'cssVars'],
     events: PROGRESS_EVENTS,
     create: createProgressCapsule,
@@ -3324,7 +3324,7 @@ function makeProgressWrapper(createProgressCapsule, render) {
 }
 function makeColorWrapper(createColorBackground, render) {
   return makeWrapper({
-    name: 'ColorBackground',
+    name: 'dlc-color',
     props: ['preset', 'colors', 'seed', 'speed', 'quality', 'renderer', 'mouseColor', 'respectReducedMotion', 'opacity', 'fallbackColor'],
     events: COLOR_EVENTS,
     create: createColorBackground,
@@ -3416,10 +3416,18 @@ var renderColor = function renderColor() {
     class: 'hj-vue-host'
   }, this.$slots.default ? this.$slots.default() : []);
 };
-var CosmicCapsule = makeCapsuleWrapper(createCapsule, render);
-var ProgressCapsule = makeProgressWrapper(createProgressCapsule, render);
-var ColorBackground = makeColorWrapper(createColorBackground, renderColor);
+var DlcCapsule = makeCapsuleWrapper(createCapsule, render);
+var DlcProgress = makeProgressWrapper(createProgressCapsule, render);
+var DlcColor = makeColorWrapper(createColorBackground, renderColor);
+
+// 旧名兼容别名（deprecated）
+var CosmicCapsule = DlcCapsule;
+var ProgressCapsule = DlcProgress;
+var ColorBackground = DlcColor;
 
 exports.ColorBackground = ColorBackground;
 exports.CosmicCapsule = CosmicCapsule;
+exports.DlcCapsule = DlcCapsule;
+exports.DlcColor = DlcColor;
+exports.DlcProgress = DlcProgress;
 exports.ProgressCapsule = ProgressCapsule;

package/dist/vue3.mjs

@@ -3033,9 +3033,9 @@ function makeWrapper({ name, props, events, create, render, methods, watch }) {
   };
 }
 
-function makeCapsuleWrapper(createCapsule, render) {
-  return makeWrapper({
-    name: 'CosmicCapsule',
+function makeCapsuleWrapper(createCapsule, render) {
+  return makeWrapper({
+    name: 'dlc-capsule',
     props: [
       'preset', 'width', 'height', 'colors', 'seed', 'speed',
       'textRatio', 'label', 'mouseColor', 'renderer', 'quality', 'respectReducedMotion', 'cssVars'
@@ -3091,8 +3091,8 @@ function makeCapsuleWrapper(createCapsule, render) {
 }
 
 function makeProgressWrapper(createProgressCapsule, render) {
-  return makeWrapper({
-    name: 'ProgressCapsule',
+  return makeWrapper({
+    name: 'dlc-progress',
     props: [
       'preset', 'width', 'height', 'value', 'min', 'max',
       'draggable', 'disabled', 'readonly', 'edgeStyle', 'colors', 'textRatio', 'label', 'showValue', 'valueSuffix',
@@ -3166,7 +3166,7 @@ function makeProgressWrapper(createProgressCapsule, render) {
 
 function makeColorWrapper(createColorBackground, render) {
   return makeWrapper({
-    name: 'ColorBackground',
+    name: 'dlc-color',
     props: [
       'preset', 'colors', 'seed', 'speed', 'quality', 'renderer',
       'mouseColor', 'respectReducedMotion', 'opacity', 'fallbackColor'
@@ -3231,14 +3231,22 @@ const renderColor = function renderColor() {
   return h('div', { class: 'hj-vue-host' }, this.$slots.default ? this.$slots.default() : []);
 };
 
-const CosmicCapsule = makeCapsuleWrapper(createCapsule, render);
-const ProgressCapsule = makeProgressWrapper(createProgressCapsule, render);
-const ColorBackground = makeColorWrapper(createColorBackground, renderColor);
+const DlcCapsule = makeCapsuleWrapper(createCapsule, render);
+const DlcProgress = makeProgressWrapper(createProgressCapsule, render);
+const DlcColor = makeColorWrapper(createColorBackground, renderColor);
+
+// 旧名兼容别名（deprecated）
+const CosmicCapsule = DlcCapsule;
+const ProgressCapsule = DlcProgress;
+const ColorBackground = DlcColor;
 
 var vue3 = {
+  DlcCapsule,
+  DlcProgress,
+  DlcColor,
   CosmicCapsule,
   ProgressCapsule,
   ColorBackground
 };
 
-export { ColorBackground, CosmicCapsule, ProgressCapsule, vue3 as default };
+export { ColorBackground, CosmicCapsule, DlcCapsule, DlcColor, DlcProgress, ProgressCapsule, vue3 as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@5even7/dlc-ui",
-  "version": "0.2.6",
+  "version": "0.2.8",
   "publishConfig": {
     "access": "public"
   },
@@ -79,7 +79,7 @@
   ],
   "scripts": {
     "build": "rollup -c && node scripts/copy-css.mjs",
-    "test": "node --test tests/",
+    "test": "node --test",
     "serve": "node scripts/serve.mjs",
     "demo:h5": "node scripts/serve.mjs",
     "demo:vue3": "npm --prefix examples/vue3 run dev",

package/types/vue2.d.ts

@@ -1 +1,9 @@
-export { CosmicCapsule, ProgressCapsule, default } from './vue3.js';
+export {
+  DlcCapsule,
+  DlcProgress,
+  DlcColor,
+  CosmicCapsule,
+  ProgressCapsule,
+  ColorBackground,
+  default
+} from './vue3.js';

package/types/vue3.d.ts

@@ -1,7 +1,7 @@
 import { CapsuleOptions, ProgressOptions } from './index.js';
 
-export interface CosmicCapsuleComponent {
-  name: 'CosmicCapsule';
+export interface CosmicCapsuleComponent {
+  name: 'dlc-capsule';
   props: (keyof CapsuleOptions)[];
   emits: string[];
   mounted: () => void;
@@ -24,8 +24,8 @@ export interface CosmicCapsuleComponent {
   };
 }
 
-export interface ProgressCapsuleComponent {
-  name: 'ProgressCapsule';
+export interface ProgressCapsuleComponent {
+  name: 'dlc-progress';
   props: (keyof ProgressOptions)[];
   emits: string[];
   mounted: () => void;
@@ -53,7 +53,7 @@ export interface ProgressCapsuleComponent {
 }
 
 export interface ColorBackgroundComponent {
-  name: 'ColorBackground';
+  name: 'dlc-color';
   props: (keyof import('./index').ColorBackgroundOptions)[];
   emits: string[];
   mounted: () => void;
@@ -75,10 +75,18 @@ export interface ColorBackgroundComponent {
   };
 }
 
+export declare const DlcCapsule: CosmicCapsuleComponent;
+export declare const DlcProgress: ProgressCapsuleComponent;
+export declare const DlcColor: ColorBackgroundComponent;
+
+// 旧名兼容别名（deprecated）
 export declare const CosmicCapsule: CosmicCapsuleComponent;
 export declare const ProgressCapsule: ProgressCapsuleComponent;
 export declare const ColorBackground: ColorBackgroundComponent;
 declare const _default: {
+  DlcCapsule: CosmicCapsuleComponent;
+  DlcProgress: ProgressCapsuleComponent;
+  DlcColor: ColorBackgroundComponent;
   CosmicCapsule: CosmicCapsuleComponent;
   ProgressCapsule: ProgressCapsuleComponent;
   ColorBackground: ColorBackgroundComponent;