@5even7/dlc-ui 0.2.24 → 0.2.25

package/CHANGELOG.md

@@ -2,6 +2,14 @@
 
 > **发版规则**：默认每次发布只递增补丁号（0.x.y → 0.x.(y+1)，即 +0.01）；除非手动明确指定新版本号，否则不升次版本。
 
+## 0.2.25 - 2026-08-24
+- **新增 Vue 按组件子路径入口**：`@5even7/dlc-ui/vue2/<name>` 与 `/vue3/<name>`（name = `capsule | progress | color | emo | avatar-creator | icon`）。`import { DlcIcon } from '@5even7/dlc-ui/vue2/icon'` 只拖 Icon 运行时 + 共享 wrapper（入口产物约 0.5 KB），不再经过六合一聚合入口把 Avatar（humation 元数据 / fflate）、Emo 默认动画（miao/noto 注册）等全部拖进依赖图。
+- 聚合入口 `./vue2` / `./vue3` 保持原样向后兼容；`sideEffects` 同步精确化：新子路径中仅 `vue2/icon`、`vue3/icon`（provider 注册）与 `vue2/emo`、`vue3/emo`（默认动画注册）声明副作用，其余子路径对 bundler 完全可摇。
+- 新子路径仅提供 `import`（ESM）条件：与现有 chunk 图共享，几乎零包体增量；`require()` 用户继续走聚合入口的 legacy CJS（单文件内联全量依赖，×12 会使包膨胀约 20 MB，故不产出）。
+- 类型：新增 `types/vue2-<name>.d.ts` / `types/vue3-<name>.d.ts`，复用聚合入口的组件接口定义。
+- 测试：新增 `tests/vue-subpaths.test.mjs`（子路径导出形状、vue3/icon 挂载、dist 产物隔离断言）；全量 228/228 通过。
+- H5（HTML）侧无需变更：`./capsule`、`./progress`、`./color`、`./emo`、`./avatar-creator`、`./icon` 本就按组件独立。
+
 ## 0.2.24 - 2026-08-22
 - 新增四套 Streamline 改编多色图标集：`flexpop`（498）/ `freehand`（1000）/ `plump`（499，含渐变）/ `colos`（997），共 2994 个多色图标；入口形态与 linemd 对齐：每集 1 个 `icon/{type}` provider 入口 + 每图标 1 个子路径（`icon/{type}/{name}`，ESM + CJS），懒加载仍只取单个图标；本次不提供 Motion（`motion: null`），body 保留 `data-dlc-icon-part` 部位标记为后续 Motion 生成预留。
 - **dlc-icon `color` 支持 `string | string[]`**（多色图标，`colorMode: 'multi'`）：字符串给全部颜色槽位；数组按槽位映射，不足用最后一个补齐，超长取前 N 个；单色图标收到数组取第一个；不传 / 空数组保留图标原配色；数组元素可用 `'currentColor'` 跟随宿主 `color`。`setColor` 与 Vue wrapper（deep watch）同步支持数组热更新。

package/dist/vue2/avatar-creator.mjs

@@ -0,0 +1,15 @@
+import { c as createAvatarCreator } from '../chunks/avatar-creator-DHn31FD-.mjs';
+import { d as makeAvatarWrapper } from '../chunks/wrapper-DRr-8dqz.mjs';
+import '../chunks/emitter-BqYAYerJ.mjs';
+import '../chunks/controls-B10DQrKy.mjs';
+import '../chunks/identicon-D2WXAAgC.mjs';
+import '../chunks/color-DawKXV0w.mjs';
+import '../chunks/humation-meta-D9RPFuyx.mjs';
+
+const renderAvatar = function renderAvatar(h) {
+  return h('div', { class: 'hj-vue-host' });
+};
+
+const DlcAvatarCreator = /*#__PURE__*/ makeAvatarWrapper(createAvatarCreator, renderAvatar);
+
+export { DlcAvatarCreator, DlcAvatarCreator as default };

package/dist/vue2/capsule.mjs

@@ -0,0 +1,24 @@
+import { createCapsule } from '../capsule.mjs';
+import { m as makeCapsuleWrapper } from '../chunks/wrapper-DRr-8dqz.mjs';
+import '../chunks/emitter-BqYAYerJ.mjs';
+import '../chunks/size-DBa57oo1.mjs';
+import '../chunks/number-BBRut9sd.mjs';
+import '../chunks/copy-CWwHjKcM.mjs';
+import '../chunks/cosmic-fallback-CWuVsTTf.mjs';
+import '../chunks/color-DawKXV0w.mjs';
+import '../chunks/visibility-DNCA0PW1.mjs';
+import '../chunks/motion-CVaEDLxs.mjs';
+
+// Vue2 passes `h` (createElement) as the first argument to render. Slot
+// content is rendered into two marker wrappers, then moved into the
+// component's slot containers by the wrapper (moveSlots).
+const render = function render(h) {
+  return h('div', { class: 'hj-vue-host' }, [
+    h('div', { class: 'hj-vue-slot-text', ref: 'slotText' }, this.$slots.default),
+    h('div', { class: 'hj-vue-slot-color', ref: 'slotColor' }, this.$slots.color)
+  ]);
+};
+
+const DlcCapsule = /*#__PURE__*/ makeCapsuleWrapper(createCapsule, render);
+
+export { DlcCapsule, DlcCapsule as default };

package/dist/vue2/color.mjs

@@ -0,0 +1,17 @@
+import { createColorBackground } from '../color.mjs';
+import { b as makeColorWrapper } from '../chunks/wrapper-DRr-8dqz.mjs';
+import '../chunks/emitter-BqYAYerJ.mjs';
+import '../chunks/number-BBRut9sd.mjs';
+import '../chunks/cosmic-fallback-CWuVsTTf.mjs';
+import '../chunks/color-DawKXV0w.mjs';
+import '../chunks/visibility-DNCA0PW1.mjs';
+import '../chunks/motion-CVaEDLxs.mjs';
+
+// Color 的宿主内容就是组件内容：直接放在 host 里，浮在背景层上方。
+const renderColor = function renderColor(h) {
+  return h('div', { class: 'hj-vue-host' }, this.$slots.default);
+};
+
+const DlcColor = /*#__PURE__*/ makeColorWrapper(createColorBackground, renderColor);
+
+export { DlcColor, DlcColor as default };

package/dist/vue2/emo.mjs

@@ -0,0 +1,18 @@
+import { e as createEmo } from '../chunks/emo-DJD96DXu.mjs';
+import { c as makeEmoWrapper } from '../chunks/wrapper-DRr-8dqz.mjs';
+import '../chunks/emitter-BqYAYerJ.mjs';
+import '../chunks/size-DBa57oo1.mjs';
+import '../chunks/motion-CVaEDLxs.mjs';
+import '../emo/miao/smile.mjs';
+import 'fflate';
+import '../emo/noto/1f600.mjs';
+import '../chunks/color-DawKXV0w.mjs';
+import '../chunks/visibility-DNCA0PW1.mjs';
+
+const renderEmo = function renderEmo(h) {
+  return h('div', { class: 'hj-vue-host' });
+};
+
+const DlcEmo = /*#__PURE__*/ makeEmoWrapper(createEmo, renderEmo);
+
+export { DlcEmo, DlcEmo as default };

package/dist/vue2/icon.mjs

@@ -0,0 +1,14 @@
+import { createIcon } from '../icon.mjs';
+import { e as makeIconWrapper } from '../chunks/wrapper-DRr-8dqz.mjs';
+import '../icon/motion.mjs';
+import '../chunks/emitter-BqYAYerJ.mjs';
+import '../chunks/motion-CVaEDLxs.mjs';
+import '../chunks/size-DBa57oo1.mjs';
+
+const renderIcon = function renderIcon(h) {
+  return h('span', { class: 'hj-vue-host hj-vue-icon-host' });
+};
+
+const DlcIcon = /*#__PURE__*/ makeIconWrapper(createIcon, renderIcon);
+
+export { DlcIcon, DlcIcon as default };

package/dist/vue2/progress.mjs

@@ -0,0 +1,23 @@
+import { c as createProgressCapsule } from '../chunks/progress-BjSTcBKA.mjs';
+import { a as makeProgressWrapper } from '../chunks/wrapper-DRr-8dqz.mjs';
+import '../chunks/emitter-BqYAYerJ.mjs';
+import '../chunks/size-DBa57oo1.mjs';
+import '../chunks/number-BBRut9sd.mjs';
+import '../chunks/copy-CWwHjKcM.mjs';
+import '../chunks/color-DawKXV0w.mjs';
+import '../chunks/visibility-DNCA0PW1.mjs';
+import '../chunks/motion-CVaEDLxs.mjs';
+
+// Vue2 passes `h` (createElement) as the first argument to render. Slot
+// content is rendered into two marker wrappers, then moved into the
+// component's slot containers by the wrapper (moveSlots).
+const render = function render(h) {
+  return h('div', { class: 'hj-vue-host' }, [
+    h('div', { class: 'hj-vue-slot-text', ref: 'slotText' }, this.$slots.default),
+    h('div', { class: 'hj-vue-slot-color', ref: 'slotColor' }, this.$slots.color)
+  ]);
+};
+
+const DlcProgress = /*#__PURE__*/ makeProgressWrapper(createProgressCapsule, render);
+
+export { DlcProgress, DlcProgress as default };

package/dist/vue3/avatar-creator.mjs

@@ -0,0 +1,16 @@
+import { h } from 'vue';
+import { c as createAvatarCreator } from '../chunks/avatar-creator-DHn31FD-.mjs';
+import { d as makeAvatarWrapper } from '../chunks/wrapper-DRr-8dqz.mjs';
+import '../chunks/emitter-BqYAYerJ.mjs';
+import '../chunks/controls-B10DQrKy.mjs';
+import '../chunks/identicon-D2WXAAgC.mjs';
+import '../chunks/color-DawKXV0w.mjs';
+import '../chunks/humation-meta-D9RPFuyx.mjs';
+
+const renderAvatar = function renderAvatar() {
+  return h('div', { class: 'hj-vue-host' });
+};
+
+const DlcAvatarCreator = /*#__PURE__*/ makeAvatarWrapper(createAvatarCreator, renderAvatar);
+
+export { DlcAvatarCreator, DlcAvatarCreator as default };

package/dist/vue3/capsule.mjs

@@ -0,0 +1,25 @@
+import { h } from 'vue';
+import { createCapsule } from '../capsule.mjs';
+import { m as makeCapsuleWrapper } from '../chunks/wrapper-DRr-8dqz.mjs';
+import '../chunks/emitter-BqYAYerJ.mjs';
+import '../chunks/size-DBa57oo1.mjs';
+import '../chunks/number-BBRut9sd.mjs';
+import '../chunks/copy-CWwHjKcM.mjs';
+import '../chunks/cosmic-fallback-CWuVsTTf.mjs';
+import '../chunks/color-DawKXV0w.mjs';
+import '../chunks/visibility-DNCA0PW1.mjs';
+import '../chunks/motion-CVaEDLxs.mjs';
+
+// Vue3 does NOT pass `h` to the render option; it must be imported. Slot
+// content renders into two marker wrappers, then moveSlots moves it into the
+// component's slot containers.
+const render = function render() {
+  return h('div', { class: 'hj-vue-host' }, [
+    h('div', { class: 'hj-vue-slot-text', ref: 'slotText' }, this.$slots.default ? this.$slots.default() : []),
+    h('div', { class: 'hj-vue-slot-color', ref: 'slotColor' }, this.$slots.color ? this.$slots.color() : [])
+  ]);
+};
+
+const DlcCapsule = /*#__PURE__*/ makeCapsuleWrapper(createCapsule, render);
+
+export { DlcCapsule, DlcCapsule as default };

package/dist/vue3/color.mjs

@@ -0,0 +1,18 @@
+import { h } from 'vue';
+import { createColorBackground } from '../color.mjs';
+import { b as makeColorWrapper } from '../chunks/wrapper-DRr-8dqz.mjs';
+import '../chunks/emitter-BqYAYerJ.mjs';
+import '../chunks/number-BBRut9sd.mjs';
+import '../chunks/cosmic-fallback-CWuVsTTf.mjs';
+import '../chunks/color-DawKXV0w.mjs';
+import '../chunks/visibility-DNCA0PW1.mjs';
+import '../chunks/motion-CVaEDLxs.mjs';
+
+// Color 的宿主内容就是组件内容：直接放在 host 里，浮在背景层上方。
+const renderColor = function renderColor() {
+  return h('div', { class: 'hj-vue-host' }, this.$slots.default ? this.$slots.default() : []);
+};
+
+const DlcColor = /*#__PURE__*/ makeColorWrapper(createColorBackground, renderColor);
+
+export { DlcColor, DlcColor as default };

package/dist/vue3/emo.mjs

@@ -0,0 +1,19 @@
+import { h } from 'vue';
+import { e as createEmo } from '../chunks/emo-DJD96DXu.mjs';
+import { c as makeEmoWrapper } from '../chunks/wrapper-DRr-8dqz.mjs';
+import '../chunks/emitter-BqYAYerJ.mjs';
+import '../chunks/size-DBa57oo1.mjs';
+import '../chunks/motion-CVaEDLxs.mjs';
+import '../emo/miao/smile.mjs';
+import 'fflate';
+import '../emo/noto/1f600.mjs';
+import '../chunks/color-DawKXV0w.mjs';
+import '../chunks/visibility-DNCA0PW1.mjs';
+
+const renderEmo = function renderEmo() {
+  return h('div', { class: 'hj-vue-host' });
+};
+
+const DlcEmo = /*#__PURE__*/ makeEmoWrapper(createEmo, renderEmo);
+
+export { DlcEmo, DlcEmo as default };

package/dist/vue3/icon.mjs

@@ -0,0 +1,15 @@
+import { h } from 'vue';
+import { createIcon } from '../icon.mjs';
+import { e as makeIconWrapper } from '../chunks/wrapper-DRr-8dqz.mjs';
+import '../icon/motion.mjs';
+import '../chunks/emitter-BqYAYerJ.mjs';
+import '../chunks/motion-CVaEDLxs.mjs';
+import '../chunks/size-DBa57oo1.mjs';
+
+const renderIcon = function renderIcon() {
+  return h('span', { class: 'hj-vue-host hj-vue-icon-host' });
+};
+
+const DlcIcon = /*#__PURE__*/ makeIconWrapper(createIcon, renderIcon);
+
+export { DlcIcon, DlcIcon as default };

package/dist/vue3/progress.mjs

@@ -0,0 +1,24 @@
+import { h } from 'vue';
+import { c as createProgressCapsule } from '../chunks/progress-BjSTcBKA.mjs';
+import { a as makeProgressWrapper } from '../chunks/wrapper-DRr-8dqz.mjs';
+import '../chunks/emitter-BqYAYerJ.mjs';
+import '../chunks/size-DBa57oo1.mjs';
+import '../chunks/number-BBRut9sd.mjs';
+import '../chunks/copy-CWwHjKcM.mjs';
+import '../chunks/color-DawKXV0w.mjs';
+import '../chunks/visibility-DNCA0PW1.mjs';
+import '../chunks/motion-CVaEDLxs.mjs';
+
+// Vue3 does NOT pass `h` to the render option; it must be imported. Slot
+// content renders into two marker wrappers, then moveSlots moves it into the
+// component's slot containers.
+const render = function render() {
+  return h('div', { class: 'hj-vue-host' }, [
+    h('div', { class: 'hj-vue-slot-text', ref: 'slotText' }, this.$slots.default ? this.$slots.default() : []),
+    h('div', { class: 'hj-vue-slot-color', ref: 'slotColor' }, this.$slots.color ? this.$slots.color() : [])
+  ]);
+};
+
+const DlcProgress = /*#__PURE__*/ makeProgressWrapper(createProgressCapsule, render);
+
+export { DlcProgress, DlcProgress as default };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@5even7/dlc-ui",
-  "version": "0.2.24",
+  "version": "0.2.25",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org"
@@ -157,6 +157,54 @@
       "require": "./dist/vue2.cjs",
       "default": "./dist/vue2.mjs"
     },
+    "./vue2/capsule": {
+      "types": "./types/vue2-capsule.d.ts",
+      "import": "./dist/vue2/capsule.mjs"
+    },
+    "./vue2/progress": {
+      "types": "./types/vue2-progress.d.ts",
+      "import": "./dist/vue2/progress.mjs"
+    },
+    "./vue2/color": {
+      "types": "./types/vue2-color.d.ts",
+      "import": "./dist/vue2/color.mjs"
+    },
+    "./vue2/emo": {
+      "types": "./types/vue2-emo.d.ts",
+      "import": "./dist/vue2/emo.mjs"
+    },
+    "./vue2/avatar-creator": {
+      "types": "./types/vue2-avatar-creator.d.ts",
+      "import": "./dist/vue2/avatar-creator.mjs"
+    },
+    "./vue2/icon": {
+      "types": "./types/vue2-icon.d.ts",
+      "import": "./dist/vue2/icon.mjs"
+    },
+    "./vue3/capsule": {
+      "types": "./types/vue3-capsule.d.ts",
+      "import": "./dist/vue3/capsule.mjs"
+    },
+    "./vue3/progress": {
+      "types": "./types/vue3-progress.d.ts",
+      "import": "./dist/vue3/progress.mjs"
+    },
+    "./vue3/color": {
+      "types": "./types/vue3-color.d.ts",
+      "import": "./dist/vue3/color.mjs"
+    },
+    "./vue3/emo": {
+      "types": "./types/vue3-emo.d.ts",
+      "import": "./dist/vue3/emo.mjs"
+    },
+    "./vue3/avatar-creator": {
+      "types": "./types/vue3-avatar-creator.d.ts",
+      "import": "./dist/vue3/avatar-creator.mjs"
+    },
+    "./vue3/icon": {
+      "types": "./types/vue3-icon.d.ts",
+      "import": "./dist/vue3/icon.mjs"
+    },
     "./style.css": "./styles/theme.css",
     "./capsule/style.css": "./styles/capsule.css",
     "./progress/style.css": "./styles/progress.css",
@@ -194,7 +242,11 @@
     "./dist/vue2.mjs",
     "./dist/vue2.cjs",
     "./dist/vue3.mjs",
-    "./dist/vue3.cjs"
+    "./dist/vue3.cjs",
+    "./dist/vue2/icon.mjs",
+    "./dist/vue3/icon.mjs",
+    "./dist/vue2/emo.mjs",
+    "./dist/vue3/emo.mjs"
   ],
   "scripts": {
     "build": "node scripts/clean-dist.mjs && node scripts/generate-emo-assets.mjs && rollup -c && node scripts/copy-css.mjs",

package/types/vue2-avatar-creator.d.ts

@@ -0,0 +1,6 @@
+import { AvatarCreatorComponent } from './vue3.js';
+
+export { AvatarCreatorComponent };
+export declare const DlcAvatarCreator: AvatarCreatorComponent;
+declare const _default: AvatarCreatorComponent;
+export default _default;

package/types/vue2-capsule.d.ts

@@ -0,0 +1,6 @@
+import { CosmicCapsuleComponent } from './vue3.js';
+
+export { CosmicCapsuleComponent };
+export declare const DlcCapsule: CosmicCapsuleComponent;
+declare const _default: CosmicCapsuleComponent;
+export default _default;

package/types/vue2-color.d.ts

@@ -0,0 +1,6 @@
+import { ColorBackgroundComponent } from './vue3.js';
+
+export { ColorBackgroundComponent };
+export declare const DlcColor: ColorBackgroundComponent;
+declare const _default: ColorBackgroundComponent;
+export default _default;

package/types/vue2-emo.d.ts

@@ -0,0 +1,6 @@
+import { EmoComponent } from './vue3.js';
+
+export { EmoComponent };
+export declare const DlcEmo: EmoComponent;
+declare const _default: EmoComponent;
+export default _default;

package/types/vue2-icon.d.ts

@@ -0,0 +1,6 @@
+import { IconComponent } from './vue3.js';
+
+export { IconComponent };
+export declare const DlcIcon: IconComponent;
+declare const _default: IconComponent;
+export default _default;

package/types/vue2-progress.d.ts

@@ -0,0 +1,6 @@
+import { ProgressCapsuleComponent } from './vue3.js';
+
+export { ProgressCapsuleComponent };
+export declare const DlcProgress: ProgressCapsuleComponent;
+declare const _default: ProgressCapsuleComponent;
+export default _default;

package/types/vue3-avatar-creator.d.ts

@@ -0,0 +1,6 @@
+import { AvatarCreatorComponent } from './vue3.js';
+
+export { AvatarCreatorComponent };
+export declare const DlcAvatarCreator: AvatarCreatorComponent;
+declare const _default: AvatarCreatorComponent;
+export default _default;

package/types/vue3-capsule.d.ts

@@ -0,0 +1,7 @@
+import { CosmicCapsuleComponent } from './vue3.js';
+
+export { CosmicCapsuleComponent };
+
+export declare const DlcCapsule: CosmicCapsuleComponent;
+declare const _default: CosmicCapsuleComponent;
+export default _default;

package/types/vue3-color.d.ts

@@ -0,0 +1,6 @@
+import { ColorBackgroundComponent } from './vue3.js';
+
+export { ColorBackgroundComponent };
+export declare const DlcColor: ColorBackgroundComponent;
+declare const _default: ColorBackgroundComponent;
+export default _default;

package/types/vue3-emo.d.ts

@@ -0,0 +1,6 @@
+import { EmoComponent } from './vue3.js';
+
+export { EmoComponent };
+export declare const DlcEmo: EmoComponent;
+declare const _default: EmoComponent;
+export default _default;

package/types/vue3-icon.d.ts

@@ -0,0 +1,6 @@
+import { IconComponent } from './vue3.js';
+
+export { IconComponent };
+export declare const DlcIcon: IconComponent;
+declare const _default: IconComponent;
+export default _default;

package/types/vue3-progress.d.ts

@@ -0,0 +1,6 @@
+import { ProgressCapsuleComponent } from './vue3.js';
+
+export { ProgressCapsuleComponent };
+export declare const DlcProgress: ProgressCapsuleComponent;
+declare const _default: ProgressCapsuleComponent;
+export default _default;