@5even7/dlc-ui 0.2.8 → 0.2.10

package/CHANGELOG.md

@@ -2,6 +2,15 @@
 
 > **发版规则**：默认每次发布只递增补丁号（0.x.y → 0.x.(y+1)，即 +0.01）；除非手动明确指定新版本号，否则不升次版本。
 
+## 0.2.10 - 2026-08-09
+
+- 修复：Vue wrapper 的插槽中转容器（`.hj-vue-slot-text` / `.hj-vue-slot-color`）此前带 `height: 100%`，插槽内容被搬进文字区/颜色区后，空壳仍会以宿主高度各撑出一个空块，把 Capsule / Progress 组件根整体往下推约 2×组件高度；改为 `display: none`，彻底脱离布局（对插槽搬运无影响）。
+
+## 0.2.9 - 2026-08-09
+
+- 修复：`/vue2`、`/vue3` 的 CJS 构建丢失默认导出（`require(...).default` 为 undefined，webpack/CommonJS 下 `import X from` 会拿到命名空间对象而不是组件）；legacy 入口现在转发默认导出，并带 `__esModule` 标记。
+- 对称补齐 Vue 组件实例方法：胶囊新增 `setMouseColor()`，进度条新增 `setShowValue()`（此前只有 Color 暴露了同类方法）。
+
 ## 0.2.8 - 2026-08-09
 
 - 最终命名确认：官方组件导出为 `DlcCapsule / DlcProgress / DlcColor`（无中划线），模板中仍可直接写 `<dlc-capsule>` 等 kebab 写法（Vue 自动映射）；移除字符串形式的导出名，兼容 Vite/esbuild。

package/README.md

@@ -163,7 +163,7 @@ export default {
 
 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 控制器对称。
+胶囊控制器额外支持 `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`（胶囊另有 `setMouseColor`，进度另有 `setValueSuffix` / `setShowValue`），与 H5 控制器对称。
 
 > 进度条是完全受控组件：组件自身不再自动增长，`value` 由使用方驱动。要自动步进，自己写定时器加值即可：
 >

package/dist/vue2.cjs

@@ -1,5 +1,7 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 function _arrayLikeToArray(r, a) {
   (null == a || a > r.length) && (a = r.length);
   for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e];
@@ -3208,6 +3210,9 @@ function makeCapsuleWrapper(createCapsule, render) {
       setLabel: function setLabel(label) {
         return this.controller && this.controller.setLabel(label);
       },
+      setMouseColor: function setMouseColor(value) {
+        return this.controller && this.controller.setMouseColor(value);
+      },
       setQuality: function setQuality(quality) {
         return this.controller && this.controller.setQuality(quality);
       },
@@ -3311,6 +3316,9 @@ function makeProgressWrapper(createProgressCapsule, render) {
       setValueSuffix: function setValueSuffix(suffix) {
         return this.controller && this.controller.setValueSuffix(suffix);
       },
+      setShowValue: function setShowValue(show) {
+        return this.controller && this.controller.setShowValue(show);
+      },
       setQuality: function setQuality(quality) {
         return this.controller && this.controller.setQuality(quality);
       },
@@ -3422,6 +3430,14 @@ var DlcColor = makeColorWrapper(createColorBackground, renderColor);
 var CosmicCapsule = DlcCapsule;
 var ProgressCapsule = DlcProgress;
 var ColorBackground = DlcColor;
+var vue2 = {
+  DlcCapsule: DlcCapsule,
+  DlcProgress: DlcProgress,
+  DlcColor: DlcColor,
+  CosmicCapsule: CosmicCapsule,
+  ProgressCapsule: ProgressCapsule,
+  ColorBackground: ColorBackground
+};
 
 exports.ColorBackground = ColorBackground;
 exports.CosmicCapsule = CosmicCapsule;
@@ -3429,3 +3445,4 @@ exports.DlcCapsule = DlcCapsule;
 exports.DlcColor = DlcColor;
 exports.DlcProgress = DlcProgress;
 exports.ProgressCapsule = ProgressCapsule;
+exports.default = vue2;

package/dist/vue2.mjs

@@ -3082,6 +3082,7 @@ function makeCapsuleWrapper(createCapsule, render) {
       setTextRatio(ratio) { return this.controller && this.controller.setTextRatio(ratio); },
       setCssVars(vars) { return this.controller && this.controller.setCssVars(vars); },
       setLabel(label) { return this.controller && this.controller.setLabel(label); },
+      setMouseColor(value) { return this.controller && this.controller.setMouseColor(value); },
       setQuality(quality) { return this.controller && this.controller.setQuality(quality); },
       getController() { return this.controller; }
     }
@@ -3156,8 +3157,9 @@ function makeProgressWrapper(createProgressCapsule, render) {
       setCssVars(vars) { return this.controller && this.controller.setCssVars(vars); },
       setLabel(label) { return this.controller && this.controller.setLabel(label); },
       setValueSuffix(suffix) { return this.controller && this.controller.setValueSuffix(suffix); },
+      setShowValue(show) { return this.controller && this.controller.setShowValue(show); },
       setQuality(quality) { return this.controller && this.controller.setQuality(quality); },
-      getController() { return this.controller; }
+      getController() { return this.controller; }
     }
   });
 }

package/dist/vue3.cjs

@@ -1,5 +1,7 @@
 'use strict';
 
+Object.defineProperty(exports, '__esModule', { value: true });
+
 var vue = require('vue');
 
 function _arrayLikeToArray(r, a) {
@@ -3210,6 +3212,9 @@ function makeCapsuleWrapper(createCapsule, render) {
       setLabel: function setLabel(label) {
         return this.controller && this.controller.setLabel(label);
       },
+      setMouseColor: function setMouseColor(value) {
+        return this.controller && this.controller.setMouseColor(value);
+      },
       setQuality: function setQuality(quality) {
         return this.controller && this.controller.setQuality(quality);
       },
@@ -3313,6 +3318,9 @@ function makeProgressWrapper(createProgressCapsule, render) {
       setValueSuffix: function setValueSuffix(suffix) {
         return this.controller && this.controller.setValueSuffix(suffix);
       },
+      setShowValue: function setShowValue(show) {
+        return this.controller && this.controller.setShowValue(show);
+      },
       setQuality: function setQuality(quality) {
         return this.controller && this.controller.setQuality(quality);
       },
@@ -3424,6 +3432,14 @@ var DlcColor = makeColorWrapper(createColorBackground, renderColor);
 var CosmicCapsule = DlcCapsule;
 var ProgressCapsule = DlcProgress;
 var ColorBackground = DlcColor;
+var vue3 = {
+  DlcCapsule: DlcCapsule,
+  DlcProgress: DlcProgress,
+  DlcColor: DlcColor,
+  CosmicCapsule: CosmicCapsule,
+  ProgressCapsule: ProgressCapsule,
+  ColorBackground: ColorBackground
+};
 
 exports.ColorBackground = ColorBackground;
 exports.CosmicCapsule = CosmicCapsule;
@@ -3431,3 +3447,4 @@ exports.DlcCapsule = DlcCapsule;
 exports.DlcColor = DlcColor;
 exports.DlcProgress = DlcProgress;
 exports.ProgressCapsule = ProgressCapsule;
+exports.default = vue3;

package/dist/vue3.mjs

@@ -3084,6 +3084,7 @@ function makeCapsuleWrapper(createCapsule, render) {
       setTextRatio(ratio) { return this.controller && this.controller.setTextRatio(ratio); },
       setCssVars(vars) { return this.controller && this.controller.setCssVars(vars); },
       setLabel(label) { return this.controller && this.controller.setLabel(label); },
+      setMouseColor(value) { return this.controller && this.controller.setMouseColor(value); },
       setQuality(quality) { return this.controller && this.controller.setQuality(quality); },
       getController() { return this.controller; }
     }
@@ -3158,8 +3159,9 @@ function makeProgressWrapper(createProgressCapsule, render) {
       setCssVars(vars) { return this.controller && this.controller.setCssVars(vars); },
       setLabel(label) { return this.controller && this.controller.setLabel(label); },
       setValueSuffix(suffix) { return this.controller && this.controller.setValueSuffix(suffix); },
+      setShowValue(show) { return this.controller && this.controller.setShowValue(show); },
       setQuality(quality) { return this.controller && this.controller.setQuality(quality); },
-      getController() { return this.controller; }
+      getController() { return this.controller; }
     }
   });
 }

package/package.json

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

package/styles/base.css

@@ -47,10 +47,11 @@
   pointer-events: none;
 }
 
-/* Vue wrapper 的插槽容器会被搬到文字区/颜色区里，撑满区域以便内容正常布局。 */
+/* Vue wrapper 的插槽中转容器：内容会在挂载时被搬进文字区/颜色区，
+   搬完后只是空壳。绝不能参与布局——height:100% 会让它们以宿主高度各撑出
+   一个空块，把组件根往下推（Capsule 推 2×组件高、Progress 推 2×组件高）。
+   display:none 让它们彻底脱离布局，搬运前的瞬间内容也不会闪现。 */
 .hj-vue-slot-text,
 .hj-vue-slot-color {
-  display: block;
-  width: 100%;
-  height: 100%;
+  display: none;
 }

package/types/vue3.d.ts

@@ -19,8 +19,9 @@ export interface CosmicCapsuleComponent {
     setTextRatio(ratio: number): any;
     setCssVars(vars: Record<string, string>): any;
     setLabel(label: string): any;
+    setMouseColor(value: boolean): any;
     setQuality(quality: CapsuleOptions['quality']): any;
-    getController(): any;
+    getController(): any;
   };
 }
 
@@ -47,6 +48,7 @@ export interface ProgressCapsuleComponent {
     setCssVars(vars: Record<string, string>): any;
     setLabel(label: string): any;
     setValueSuffix(suffix: string): any;
+    setShowValue(show: boolean): any;
     setQuality(quality: ProgressOptions['quality']): any;
     getController(): any;
   };