@5even7/dlc-ui 0.2.13 → 0.2.15

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@5even7/dlc-ui",
-  "version": "0.2.13",
+  "version": "0.2.15",
   "publishConfig": {
     "access": "public",
     "registry": "https://registry.npmjs.org"
   },
-  "description": "DLC 星云胶囊组件（WebGL2 实时渲染，Canvas2D 自动降级），供 H5 / Vue2 / Vue3 使用。",
+  "description": "DLC 星云胶囊、流体进度、动态背景与 Lottie 表情组件库，支持 H5 / Vue2 / Vue3。",
   "type": "module",
   "repository": {
     "type": "git",
@@ -41,6 +41,12 @@
       "require": "./dist/color.cjs",
       "default": "./dist/color.mjs"
     },
+    "./emo": {
+      "types": "./types/emo.d.ts",
+      "import": "./dist/emo.mjs",
+      "require": "./dist/emo.cjs",
+      "default": "./dist/emo.mjs"
+    },
     "./vue3": {
       "types": "./types/vue3.d.ts",
       "import": "./dist/vue3.mjs",
@@ -57,6 +63,7 @@
     "./capsule/style.css": "./styles/capsule.css",
     "./progress/style.css": "./styles/progress.css",
     "./color/style.css": "./styles/color.css",
+    "./emo/style.css": "./styles/emo.css",
     "./package.json": "./package.json"
   },
   "files": [
@@ -79,7 +86,7 @@
     "./styles/*.css"
   ],
   "scripts": {
-    "build": "rollup -c && node scripts/copy-css.mjs",
+    "build": "node scripts/generate-emo-assets.mjs && rollup -c && node scripts/copy-css.mjs",
     "test": "node --test",
     "serve": "node scripts/serve.mjs",
     "demo:h5": "node scripts/serve.mjs",
@@ -99,7 +106,10 @@
     "vue2",
     "vue3",
     "h5",
-    "component"
+    "component",
+    "lottie",
+    "emotion",
+    "emoji"
   ],
   "license": "MIT",
   "engines": {
@@ -118,5 +128,8 @@
     "resize-observer-polyfill": "^1.5.1",
     "rollup": "^4.24.0",
     "vue": "^3.4.0"
+  },
+  "dependencies": {
+    "lottie-web": "^5.13.0"
   }
 }

package/styles/emo.css

@@ -0,0 +1,32 @@
+.dlc-emo-root {
+  position: relative;
+  display: inline-grid;
+  place-items: center;
+  box-sizing: border-box;
+  overflow: hidden;
+  flex: 0 0 auto;
+  vertical-align: middle;
+  background: var(--dlc-emo-background, transparent);
+  opacity: var(--dlc-emo-opacity, 1);
+}
+
+.dlc-emo-stage,
+.dlc-emo-stage > svg,
+.dlc-emo-stage > canvas {
+  display: block;
+  width: 100% !important;
+  height: 100% !important;
+}
+
+.dlc-emo-stage {
+  position: absolute;
+  inset: 0;
+}
+
+.dlc-emo-root[data-fit='cover'] .dlc-emo-stage {
+  overflow: hidden;
+}
+
+.dlc-emo-root[data-paused='true'] {
+  --dlc-emo-play-state: paused;
+}

package/styles/theme.css

@@ -2,3 +2,4 @@
 @import './capsule.css';
 @import './progress.css';
 @import './color.css';
+@import './emo.css';

package/types/emo.d.ts

@@ -0,0 +1,11 @@
+export {
+  EmoOptions,
+  EmoPreset,
+  EmoTypeDefinition,
+  EmoController,
+  EMO_TYPES,
+  EMO_PRESETS,
+  EMO_CATEGORIES,
+  getEmoPreset,
+  createEmo
+} from './index.js';

package/types/index.d.ts

@@ -25,6 +25,24 @@ export interface ProgressPreset {
   colors: ColorTuple;
 }
 
+export interface EmoPreset {
+  type: string;
+  name: string;
+  label: string;
+  category: string;
+  width: number;
+  height: number;
+  frames: number;
+  fps: number;
+}
+
+export interface EmoTypeDefinition {
+  type: string;
+  label: string;
+  names: string[];
+  colorChannels: Array<'color' | 'accentColor'>;
+}
+
 export interface Copy {
   brandName: string;
   valueSuffix: string;
@@ -111,6 +129,29 @@ export interface ColorBackgroundOptions {
   [key: string]: unknown;
 }
 
+export interface EmoOptions {
+  type?: string;
+  name?: string;
+  width?: number | string;
+  height?: number | string;
+  color?: string;
+  accentColor?: string | null;
+  speed?: number;
+  loop?: boolean;
+  autoplay?: boolean;
+  direction?: 'forward' | 'reverse' | 1 | -1;
+  opacity?: number;
+  fit?: 'contain' | 'cover';
+  renderer?: 'svg' | 'canvas';
+  paused?: boolean;
+  segment?: [number, number] | null;
+  background?: string;
+  label?: string;
+  instanceName?: string;
+  respectReducedMotion?: boolean;
+  [key: string]: unknown;
+}
+
 export interface Emitter {
   on(event: string, handler: (...args: any[]) => void): () => void;
   off(event: string, handler: (...args: any[]) => void): boolean;
@@ -225,6 +266,43 @@ export interface ColorBackgroundController extends Emitter {
   readonly mouseColor: boolean;
 }
 
+export interface EmoController extends Emitter {
+  element: HTMLElement;
+  readonly animation: any;
+  readonly preset: EmoPreset;
+  play(): this;
+  pause(): this;
+  stop(): this;
+  setPaused(value: boolean): this;
+  setSpeed(value: number): this;
+  setDirection(value: EmoOptions['direction']): this;
+  setSegment(value: EmoOptions['segment']): this;
+  setName(value: string): this;
+  setType(value: string): this;
+  setColors(color: string, accentColor?: string | null): this;
+  setOpacity(value: number): this;
+  setBackground(value: string): this;
+  setSize(width?: number | string, height?: number | string): this;
+  setFit(value: EmoOptions['fit']): this;
+  setRenderer(value: EmoOptions['renderer']): this;
+  setLoop(value: boolean): this;
+  setAutoplay(value: boolean): this;
+  setLabel(value: string): this;
+  dispose(): void;
+  readonly speed: number;
+  readonly loop: boolean;
+  readonly autoplay: boolean;
+  readonly direction: 1 | -1;
+  readonly opacity: number;
+  readonly fit: 'contain' | 'cover';
+  readonly renderer: 'svg' | 'canvas';
+  readonly paused: boolean;
+  readonly segment: [number, number] | null;
+  readonly color: string;
+  readonly accentColor: string | null;
+  readonly background: string;
+}
+
 export declare class ProgressCapsuleController {
   value: number;
   min: number;
@@ -248,15 +326,21 @@ export declare class ProgressCapsuleController {
 export declare function createCapsule(container: HTMLElement, options?: CapsuleOptions): CapsuleController;
 export declare function createProgressCapsule(container: HTMLElement, options?: ProgressOptions): ProgressController;
 export declare function createColorBackground(host: HTMLElement, options?: ColorBackgroundOptions): ColorBackgroundController;
+export declare function createEmo(container: HTMLElement, options?: EmoOptions): EmoController;
 
 export declare const PRESETS: CapsulePreset[];
 export declare const PROGRESS_PRESETS: ProgressPreset[];
 export declare const ALL_PRESETS: Array<CapsulePreset | ProgressPreset>;
 export declare function getPreset(kind: 'capsule' | 'progress', ref: string): CapsulePreset | ProgressPreset;
+export declare const EMO_TYPES: EmoTypeDefinition[];
+export declare const EMO_PRESETS: EmoPreset[];
+export declare const EMO_CATEGORIES: Record<string, string>;
+export declare function getEmoPreset(type?: string, name?: string): EmoPreset;
 
 export declare const DEFAULTS: {
   capsule: Required<Pick<CapsuleOptions, 'width' | 'height' | 'quality' | 'respectReducedMotion' | 'mouseColor' | 'renderer' | 'textRatio' | 'renderScale' | 'powerPreference' | 'fps' | 'paused' | 'static'>>;
   progress: Required<Pick<ProgressOptions, 'width' | 'height' | 'min' | 'max' | 'step' | 'draggable' | 'keyboard' | 'disabled' | 'readonly' | 'direction' | 'precision' | 'valueSuffix' | 'edgeStyle' | 'quality' | 'respectReducedMotion' | 'renderer' | 'textRatio' | 'showValue' | 'renderScale' | 'powerPreference' | 'fps' | 'paused' | 'static'>>;
+  emo: Required<Pick<EmoOptions, 'type' | 'name' | 'width' | 'height' | 'color' | 'speed' | 'loop' | 'autoplay' | 'direction' | 'opacity' | 'fit' | 'renderer' | 'paused' | 'background' | 'respectReducedMotion'>> & Pick<EmoOptions, 'accentColor' | 'segment'>;
 };
 
 export declare const COPY: Copy;

package/types/vue2.d.ts

@@ -2,6 +2,7 @@ export {
   DlcCapsule,
   DlcProgress,
   DlcColor,
+  DlcEmo,
   CosmicCapsule,
   ProgressCapsule,
   ColorBackground,

package/types/vue3.d.ts

@@ -1,4 +1,4 @@
-import { CapsuleOptions, ProgressOptions } from './index.js';
+import { CapsuleOptions, ProgressOptions, EmoOptions } from './index.js';
 
 export interface CosmicCapsuleComponent {
   name: 'dlc-capsule';
@@ -93,9 +93,40 @@ export interface ColorBackgroundComponent {
   };
 }
 
+export interface EmoComponent {
+  name: 'dlc-emo';
+  props: (keyof EmoOptions)[];
+  emits: string[];
+  mounted: () => void;
+  beforeUnmount: () => void;
+  render: (h: Function) => any;
+  methods: {
+    play(): any;
+    pause(): any;
+    stop(): any;
+    setPaused(value: boolean): any;
+    setSpeed(value: number): any;
+    setDirection(value: EmoOptions['direction']): any;
+    setSegment(value: EmoOptions['segment']): any;
+    setName(value: string): any;
+    setType(value: string): any;
+    setColors(color: string, accentColor?: string | null): any;
+    setOpacity(value: number): any;
+    setBackground(value: string): any;
+    setSize(width?: number | string, height?: number | string): any;
+    setFit(value: EmoOptions['fit']): any;
+    setRenderer(value: EmoOptions['renderer']): any;
+    setLoop(value: boolean): any;
+    setAutoplay(value: boolean): any;
+    setLabel(value: string): any;
+    getController(): any;
+  };
+}
+
 export declare const DlcCapsule: CosmicCapsuleComponent;
 export declare const DlcProgress: ProgressCapsuleComponent;
 export declare const DlcColor: ColorBackgroundComponent;
+export declare const DlcEmo: EmoComponent;
 
 // 旧名兼容别名（deprecated）
 export declare const CosmicCapsule: CosmicCapsuleComponent;
@@ -105,6 +136,7 @@ declare const _default: {
   DlcCapsule: CosmicCapsuleComponent;
   DlcProgress: ProgressCapsuleComponent;
   DlcColor: ColorBackgroundComponent;
+  DlcEmo: EmoComponent;
   CosmicCapsule: CosmicCapsuleComponent;
   ProgressCapsule: ProgressCapsuleComponent;
   ColorBackground: ColorBackgroundComponent;