@applemusic-like-lyrics/vue 0.0.3

package/README.md

@@ -0,0 +1,31 @@
+# AMLL for Vue
+
+AMLL 组件库的 Vue 绑定，你可以通过此库来更加方便地使用 AMLL 歌词组件。
+
+详情可以访问 [Core 核心组件的 README.md](../core/README.md)。
+
+## 安装
+
+```bash
+npm install @applemusic-like-lyrics/vue # 使用 npm
+yarn add @applemusic-like-lyrics/vue # 使用 yarn
+```
+
+## 使用方式摘要
+
+由于 Vue 组件不方便生成 API 文档，所以还请自行查阅类型定义文件确定用法。
+
+（或者参考 React 绑定，二者属性和引用方式完全一致）
+
+一个测试用途的程序可以在 [./src/test.ts](./src/test.ts) 里找到。
+
+```vue
+<tamplate>
+    <LyricPlayer enable :lyric-lines="[]" :current-time="0" />
+</tamplate>
+
+<script setup lang="ts">
+import { LyricPlayer } from "@applemusic-like-lyrics/vue";
+
+</script>
+```

package/dist/BackgroundRender.vue.d.ts

@@ -0,0 +1,38 @@
+import { BackgroundRender } from "@applemusic-like-lyrics/core";
+declare const _default: import("vue").DefineComponent<{
+    albumImageUrl: {
+        type: import("vue").PropType<string>;
+    };
+    fps: {
+        type: import("vue").PropType<number>;
+    };
+    playing: {
+        type: import("vue").PropType<boolean>;
+    };
+    flowSpeed: {
+        type: import("vue").PropType<number>;
+    };
+    renderScale: {
+        type: import("vue").PropType<number>;
+    };
+}, {
+    bgRender: import("vue").Ref<BackgroundRender | undefined>;
+    wrapperEl: import("vue").Ref<HTMLDivElement | undefined>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    albumImageUrl: {
+        type: import("vue").PropType<string>;
+    };
+    fps: {
+        type: import("vue").PropType<number>;
+    };
+    playing: {
+        type: import("vue").PropType<boolean>;
+    };
+    flowSpeed: {
+        type: import("vue").PropType<number>;
+    };
+    renderScale: {
+        type: import("vue").PropType<number>;
+    };
+}>>, {}, {}>;
+export default _default;

package/dist/LyricPlayer.vue.d.ts

@@ -0,0 +1,62 @@
+import { LyricPlayer } from "@applemusic-like-lyrics/core";
+declare const _default: import("vue").DefineComponent<{
+    enable: {
+        type: import("vue").PropType<boolean>;
+    };
+    alignAnchor: {
+        type: import("vue").PropType<number | "top" | "bottom">;
+    };
+    enableSpring: {
+        type: import("vue").PropType<boolean>;
+    };
+    enableBlur: {
+        type: import("vue").PropType<boolean>;
+    };
+    lyricLines: {
+        type: import("vue").PropType<import("@applemusic-like-lyrics/core").LyricLine[]>;
+    };
+    currentTime: {
+        type: import("vue").PropType<number>;
+    };
+    linePosXSpringParams: {
+        type: import("vue").PropType<Partial<import("@applemusic-like-lyrics/core/dist/utils/spring").SpringParams>>;
+    };
+    linePosYSpringParams: {
+        type: import("vue").PropType<Partial<import("@applemusic-like-lyrics/core/dist/utils/spring").SpringParams>>;
+    };
+    lineScaleSpringParams: {
+        type: import("vue").PropType<Partial<import("@applemusic-like-lyrics/core/dist/utils/spring").SpringParams>>;
+    };
+}, {
+    lyricPlayer: import("vue").Ref<LyricPlayer | undefined>;
+    wrapperEl: import("vue").Ref<HTMLDivElement | undefined>;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    enable: {
+        type: import("vue").PropType<boolean>;
+    };
+    alignAnchor: {
+        type: import("vue").PropType<number | "top" | "bottom">;
+    };
+    enableSpring: {
+        type: import("vue").PropType<boolean>;
+    };
+    enableBlur: {
+        type: import("vue").PropType<boolean>;
+    };
+    lyricLines: {
+        type: import("vue").PropType<import("@applemusic-like-lyrics/core").LyricLine[]>;
+    };
+    currentTime: {
+        type: import("vue").PropType<number>;
+    };
+    linePosXSpringParams: {
+        type: import("vue").PropType<Partial<import("@applemusic-like-lyrics/core/dist/utils/spring").SpringParams>>;
+    };
+    linePosYSpringParams: {
+        type: import("vue").PropType<Partial<import("@applemusic-like-lyrics/core/dist/utils/spring").SpringParams>>;
+    };
+    lineScaleSpringParams: {
+        type: import("vue").PropType<Partial<import("@applemusic-like-lyrics/core/dist/utils/spring").SpringParams>>;
+    };
+}>>, {}, {}>;
+export default _default;

package/dist/amll-vue.js

@@ -0,0 +1,2 @@
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const a=require("vue"),u=require("@applemusic-like-lyrics/core"),m=a.defineComponent({__name:"LyricPlayer",props:{enable:{type:Boolean},alignAnchor:{},enableSpring:{type:Boolean},enableBlur:{type:Boolean},lyricLines:{},currentTime:{},linePosXSpringParams:{},linePosYSpringParams:{},lineScaleSpringParams:{}},setup(c,{expose:s}){const n=c,l=a.ref(),r=a.ref();return a.onMounted(()=>{l.value&&(r.value=new u.LyricPlayer,l.value.appendChild(r.value.getElement()))}),a.onUnmounted(()=>{r.value&&r.value.dispose()}),a.watchEffect(e=>{if(n.enable){let t=!1,i=-1;const o=f=>{var p;t||(i===-1&&(i=f),(p=r.value)==null||p.update(f-i),i=f,requestAnimationFrame(o))};requestAnimationFrame(o),e(()=>{t=!0})}}),a.watchEffect(()=>{var e;n.alignAnchor&&((e=r.value)==null||e.setAlignAnchor(n.alignAnchor))}),a.watchEffect(()=>{var e;n.enableSpring&&((e=r.value)==null||e.setEnableSpring(n.enableSpring))}),a.watchEffect(()=>{var e;n.enableBlur&&((e=r.value)==null||e.setEnableBlur(n.enableBlur))}),a.watchEffect(()=>{var e;n.lyricLines&&((e=r.value)==null||e.setLyricLines(n.lyricLines))}),a.watchEffect(()=>{var e;n.currentTime&&((e=r.value)==null||e.setCurrentTime(n.currentTime))}),a.watchEffect(()=>{var e;n.linePosXSpringParams&&((e=r.value)==null||e.setLinePosXSpringParams(n.linePosXSpringParams))}),a.watchEffect(()=>{var e;n.linePosYSpringParams&&((e=r.value)==null||e.setLinePosYSpringParams(n.linePosYSpringParams))}),a.watchEffect(()=>{var e;n.lineScaleSpringParams&&((e=r.value)==null||e.setLineScaleSpringParams(n.lineScaleSpringParams))}),s({lyricPlayer:r,wrapperEl:l}),(e,t)=>(a.openBlock(),a.createElementBlock("div",{ref_key:"wrapperRef",ref:l},null,512))}}),g=a.defineComponent({__name:"BackgroundRender",props:{albumImageUrl:{},fps:{},playing:{type:Boolean},flowSpeed:{},renderScale:{}},setup(c,{expose:s}){const n=c,l=a.ref(),r=a.ref();return a.onMounted(()=>{if(l.value){r.value=new u.BackgroundRender;const e=r.value.getElement();e.style.width="100%",e.style.height="100%",l.value.appendChild(e)}}),a.onUnmounted(()=>{r.value&&r.value.dispose()}),a.watchEffect(()=>{var e;n.albumImageUrl&&((e=r.value)==null||e.setAlbumImage(n.albumImageUrl))}),a.watchEffect(()=>{var e;n.fps&&((e=r.value)==null||e.setFPS(n.fps))}),a.watchEffect(()=>{var e,t;n.playing?(e=r.value)==null||e.pause():(t=r.value)==null||t.resume()}),a.watchEffect(()=>{var e;n.flowSpeed&&((e=r.value)==null||e.setFlowSpeed(n.flowSpeed))}),a.watchEffect(()=>{var e;n.renderScale&&((e=r.value)==null||e.setRenderScale(n.renderScale))}),s({bgRender:r,wrapperEl:l}),(e,t)=>(a.openBlock(),a.createElementBlock("div",{ref_key:"wrapperRef",ref:l},null,512))}});exports.BackgroundRender=g;exports.LyricPlayer=m;
+//# sourceMappingURL=amll-vue.js.map

package/dist/amll-vue.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"amll-vue.js","sources":["../src/LyricPlayer.vue","../src/BackgroundRender.vue"],"sourcesContent":["<template>\n    <div ref=\"wrapperRef\"></div>\n</template>\n\n<script setup lang=\"ts\">\nimport { LyricPlayer } from \"@applemusic-like-lyrics/core\";\nimport { onMounted, onUnmounted, ref, watchEffect } from \"vue\";\nimport type { LyricPlayerProps, LyricPlayerRef } from \".\";\n\nconst props = defineProps<LyricPlayerProps>();\nconst wrapperRef = ref<HTMLDivElement>();\nconst playerRef = ref<LyricPlayer>();\n\nonMounted(() => {\n    if (wrapperRef.value) {\n        playerRef.value = new LyricPlayer();\n        wrapperRef.value.appendChild(playerRef.value.getElement());\n    }\n});\n\nonUnmounted(() => {\n    if (playerRef.value) {\n        playerRef.value.dispose();\n    }\n});\n\nwatchEffect((onCleanup) => {\n    if (props.enable) {\n        let canceled = false;\n        let lastTime = -1;\n        const onFrame = (time: number) => {\n            if (canceled) return;\n            if (lastTime === -1) {\n                lastTime = time;\n            }\n            playerRef.value?.update(time - lastTime);\n            lastTime = time;\n            requestAnimationFrame(onFrame);\n        };\n        requestAnimationFrame(onFrame);\n        onCleanup(() => {\n            canceled = true;\n        });\n    }\n});\n\nwatchEffect(() => {\n    if (props.alignAnchor)\n        playerRef.value?.setAlignAnchor(props.alignAnchor);\n});\n\nwatchEffect(() => {\n    if (props.enableSpring)\n        playerRef.value?.setEnableSpring(props.enableSpring);\n});\n\nwatchEffect(() => {\n    if (props.enableBlur)\n        playerRef.value?.setEnableBlur(props.enableBlur);\n});\n\nwatchEffect(() => {\n    if (props.lyricLines)\n        playerRef.value?.setLyricLines(props.lyricLines);\n});\n\nwatchEffect(() => {\n    if (props.currentTime)\n        playerRef.value?.setCurrentTime(props.currentTime);\n});\n\nwatchEffect(() => {\n    if (props.linePosXSpringParams)\n        playerRef.value?.setLinePosXSpringParams(props.linePosXSpringParams);\n});\n\nwatchEffect(() => {\n    if (props.linePosYSpringParams)\n        playerRef.value?.setLinePosYSpringParams(props.linePosYSpringParams);\n});\n\nwatchEffect(() => {\n    if (props.lineScaleSpringParams)\n        playerRef.value?.setLineScaleSpringParams(props.lineScaleSpringParams);\n});\n\ndefineExpose<LyricPlayerRef>({\n    lyricPlayer: playerRef,\n    wrapperEl: wrapperRef,\n});\n\n</script>","<template>\n    <div ref=\"wrapperRef\"></div>\n</template>\n\n<script setup lang=\"ts\">\nimport { BackgroundRender } from \"@applemusic-like-lyrics/core\";\nimport { onMounted, onUnmounted, ref, watchEffect } from \"vue\";\nimport type { BackgroundRenderProps, BackgroundRenderRef } from \".\";\n\nconst props = defineProps<BackgroundRenderProps>();\nconst wrapperRef = ref<HTMLDivElement>();\nconst bgRenderRef = ref<BackgroundRender>();\n\nonMounted(() => {\n    if (wrapperRef.value) {\n        bgRenderRef.value = new BackgroundRender();\n        const el = bgRenderRef.value.getElement();\n        el.style.width = \"100%\";\n        el.style.height = \"100%\";\n        wrapperRef.value.appendChild(el);\n    }\n});\n\nonUnmounted(() => {\n    if (bgRenderRef.value) {\n        bgRenderRef.value.dispose();\n    }\n});\n\nwatchEffect(() => {\n    if (props.albumImageUrl)\n        bgRenderRef.value?.setAlbumImage(props.albumImageUrl);\n});\n\nwatchEffect(() => {\n    if (props.fps)\n        bgRenderRef.value?.setFPS(props.fps);\n});\n\nwatchEffect(() => {\n    if (props.playing)\n        bgRenderRef.value?.pause();\n    else\n        bgRenderRef.value?.resume();\n});\n\nwatchEffect(() => {\n    if (props.flowSpeed)\n        bgRenderRef.value?.setFlowSpeed(props.flowSpeed);\n});\n\nwatchEffect(() => {\n    if (props.renderScale)\n        bgRenderRef.value?.setRenderScale(props.renderScale);\n});\n\ndefineExpose<BackgroundRenderRef>({\n    bgRender: bgRenderRef,\n    wrapperEl: wrapperRef,\n});\n\n</script>"],"names":["wrapperRef","ref","playerRef","onMounted","LyricPlayer","onUnmounted","watchEffect","onCleanup","props","canceled","lastTime","onFrame","time","_a","__expose","bgRenderRef","BackgroundRender","el","_b"],"mappings":"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"}

package/dist/amll-vue.mjs

@@ -0,0 +1,112 @@
+import { defineComponent as m, ref as p, onMounted as g, onUnmounted as d, watchEffect as n, openBlock as v, createElementBlock as S } from "vue";
+import { LyricPlayer as P, BackgroundRender as y } from "@applemusic-like-lyrics/core";
+const _ = /* @__PURE__ */ m({
+  __name: "LyricPlayer",
+  props: {
+    enable: { type: Boolean },
+    alignAnchor: {},
+    enableSpring: { type: Boolean },
+    enableBlur: { type: Boolean },
+    lyricLines: {},
+    currentTime: {},
+    linePosXSpringParams: {},
+    linePosYSpringParams: {},
+    lineScaleSpringParams: {}
+  },
+  setup(t, { expose: o }) {
+    const a = t, l = p(), r = p();
+    return g(() => {
+      l.value && (r.value = new P(), l.value.appendChild(r.value.getElement()));
+    }), d(() => {
+      r.value && r.value.dispose();
+    }), n((e) => {
+      if (a.enable) {
+        let i = !1, s = -1;
+        const c = (u) => {
+          var f;
+          i || (s === -1 && (s = u), (f = r.value) == null || f.update(u - s), s = u, requestAnimationFrame(c));
+        };
+        requestAnimationFrame(c), e(() => {
+          i = !0;
+        });
+      }
+    }), n(() => {
+      var e;
+      a.alignAnchor && ((e = r.value) == null || e.setAlignAnchor(a.alignAnchor));
+    }), n(() => {
+      var e;
+      a.enableSpring && ((e = r.value) == null || e.setEnableSpring(a.enableSpring));
+    }), n(() => {
+      var e;
+      a.enableBlur && ((e = r.value) == null || e.setEnableBlur(a.enableBlur));
+    }), n(() => {
+      var e;
+      a.lyricLines && ((e = r.value) == null || e.setLyricLines(a.lyricLines));
+    }), n(() => {
+      var e;
+      a.currentTime && ((e = r.value) == null || e.setCurrentTime(a.currentTime));
+    }), n(() => {
+      var e;
+      a.linePosXSpringParams && ((e = r.value) == null || e.setLinePosXSpringParams(a.linePosXSpringParams));
+    }), n(() => {
+      var e;
+      a.linePosYSpringParams && ((e = r.value) == null || e.setLinePosYSpringParams(a.linePosYSpringParams));
+    }), n(() => {
+      var e;
+      a.lineScaleSpringParams && ((e = r.value) == null || e.setLineScaleSpringParams(a.lineScaleSpringParams));
+    }), o({
+      lyricPlayer: r,
+      wrapperEl: l
+    }), (e, i) => (v(), S("div", {
+      ref_key: "wrapperRef",
+      ref: l
+    }, null, 512));
+  }
+}), B = /* @__PURE__ */ m({
+  __name: "BackgroundRender",
+  props: {
+    albumImageUrl: {},
+    fps: {},
+    playing: { type: Boolean },
+    flowSpeed: {},
+    renderScale: {}
+  },
+  setup(t, { expose: o }) {
+    const a = t, l = p(), r = p();
+    return g(() => {
+      if (l.value) {
+        r.value = new y();
+        const e = r.value.getElement();
+        e.style.width = "100%", e.style.height = "100%", l.value.appendChild(e);
+      }
+    }), d(() => {
+      r.value && r.value.dispose();
+    }), n(() => {
+      var e;
+      a.albumImageUrl && ((e = r.value) == null || e.setAlbumImage(a.albumImageUrl));
+    }), n(() => {
+      var e;
+      a.fps && ((e = r.value) == null || e.setFPS(a.fps));
+    }), n(() => {
+      var e, i;
+      a.playing ? (e = r.value) == null || e.pause() : (i = r.value) == null || i.resume();
+    }), n(() => {
+      var e;
+      a.flowSpeed && ((e = r.value) == null || e.setFlowSpeed(a.flowSpeed));
+    }), n(() => {
+      var e;
+      a.renderScale && ((e = r.value) == null || e.setRenderScale(a.renderScale));
+    }), o({
+      bgRender: r,
+      wrapperEl: l
+    }), (e, i) => (v(), S("div", {
+      ref_key: "wrapperRef",
+      ref: l
+    }, null, 512));
+  }
+});
+export {
+  B as BackgroundRender,
+  _ as LyricPlayer
+};
+//# sourceMappingURL=amll-vue.mjs.map

package/dist/amll-vue.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"amll-vue.mjs","sources":["../src/LyricPlayer.vue","../src/BackgroundRender.vue"],"sourcesContent":["<template>\n    <div ref=\"wrapperRef\"></div>\n</template>\n\n<script setup lang=\"ts\">\nimport { LyricPlayer } from \"@applemusic-like-lyrics/core\";\nimport { onMounted, onUnmounted, ref, watchEffect } from \"vue\";\nimport type { LyricPlayerProps, LyricPlayerRef } from \".\";\n\nconst props = defineProps<LyricPlayerProps>();\nconst wrapperRef = ref<HTMLDivElement>();\nconst playerRef = ref<LyricPlayer>();\n\nonMounted(() => {\n    if (wrapperRef.value) {\n        playerRef.value = new LyricPlayer();\n        wrapperRef.value.appendChild(playerRef.value.getElement());\n    }\n});\n\nonUnmounted(() => {\n    if (playerRef.value) {\n        playerRef.value.dispose();\n    }\n});\n\nwatchEffect((onCleanup) => {\n    if (props.enable) {\n        let canceled = false;\n        let lastTime = -1;\n        const onFrame = (time: number) => {\n            if (canceled) return;\n            if (lastTime === -1) {\n                lastTime = time;\n            }\n            playerRef.value?.update(time - lastTime);\n            lastTime = time;\n            requestAnimationFrame(onFrame);\n        };\n        requestAnimationFrame(onFrame);\n        onCleanup(() => {\n            canceled = true;\n        });\n    }\n});\n\nwatchEffect(() => {\n    if (props.alignAnchor)\n        playerRef.value?.setAlignAnchor(props.alignAnchor);\n});\n\nwatchEffect(() => {\n    if (props.enableSpring)\n        playerRef.value?.setEnableSpring(props.enableSpring);\n});\n\nwatchEffect(() => {\n    if (props.enableBlur)\n        playerRef.value?.setEnableBlur(props.enableBlur);\n});\n\nwatchEffect(() => {\n    if (props.lyricLines)\n        playerRef.value?.setLyricLines(props.lyricLines);\n});\n\nwatchEffect(() => {\n    if (props.currentTime)\n        playerRef.value?.setCurrentTime(props.currentTime);\n});\n\nwatchEffect(() => {\n    if (props.linePosXSpringParams)\n        playerRef.value?.setLinePosXSpringParams(props.linePosXSpringParams);\n});\n\nwatchEffect(() => {\n    if (props.linePosYSpringParams)\n        playerRef.value?.setLinePosYSpringParams(props.linePosYSpringParams);\n});\n\nwatchEffect(() => {\n    if (props.lineScaleSpringParams)\n        playerRef.value?.setLineScaleSpringParams(props.lineScaleSpringParams);\n});\n\ndefineExpose<LyricPlayerRef>({\n    lyricPlayer: playerRef,\n    wrapperEl: wrapperRef,\n});\n\n</script>","<template>\n    <div ref=\"wrapperRef\"></div>\n</template>\n\n<script setup lang=\"ts\">\nimport { BackgroundRender } from \"@applemusic-like-lyrics/core\";\nimport { onMounted, onUnmounted, ref, watchEffect } from \"vue\";\nimport type { BackgroundRenderProps, BackgroundRenderRef } from \".\";\n\nconst props = defineProps<BackgroundRenderProps>();\nconst wrapperRef = ref<HTMLDivElement>();\nconst bgRenderRef = ref<BackgroundRender>();\n\nonMounted(() => {\n    if (wrapperRef.value) {\n        bgRenderRef.value = new BackgroundRender();\n        const el = bgRenderRef.value.getElement();\n        el.style.width = \"100%\";\n        el.style.height = \"100%\";\n        wrapperRef.value.appendChild(el);\n    }\n});\n\nonUnmounted(() => {\n    if (bgRenderRef.value) {\n        bgRenderRef.value.dispose();\n    }\n});\n\nwatchEffect(() => {\n    if (props.albumImageUrl)\n        bgRenderRef.value?.setAlbumImage(props.albumImageUrl);\n});\n\nwatchEffect(() => {\n    if (props.fps)\n        bgRenderRef.value?.setFPS(props.fps);\n});\n\nwatchEffect(() => {\n    if (props.playing)\n        bgRenderRef.value?.pause();\n    else\n        bgRenderRef.value?.resume();\n});\n\nwatchEffect(() => {\n    if (props.flowSpeed)\n        bgRenderRef.value?.setFlowSpeed(props.flowSpeed);\n});\n\nwatchEffect(() => {\n    if (props.renderScale)\n        bgRenderRef.value?.setRenderScale(props.renderScale);\n});\n\ndefineExpose<BackgroundRenderRef>({\n    bgRender: bgRenderRef,\n    wrapperEl: wrapperRef,\n});\n\n</script>"],"names":["wrapperRef","ref","playerRef","onMounted","LyricPlayer","onUnmounted","watchEffect","onCleanup","props","canceled","lastTime","onFrame","time","_a","__expose","bgRenderRef","BackgroundRender","el","_b"],"mappings":"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"}

package/dist/index.d.ts

@@ -0,0 +1,114 @@
+import type { spring, LyricLine, LyricPlayer as CoreLyricPlayer, BackgroundRender as CoreBackgroundRender } from "@applemusic-like-lyrics/core";
+import type { Ref } from "vue";
+import LyricPlayer from "./LyricPlayer.vue";
+import BackgroundRender from "./BackgroundRender.vue";
+export { LyricPlayer, BackgroundRender };
+/**
+ * 歌词播放组件的属性
+ */
+export interface LyricPlayerProps {
+    /**
+     * 是否启用歌词播放组件，默认为 `true`，设置为 `true` 将会开始逐帧更新歌词的动画效果，并对传入的其他参数变更做出反馈。
+     *
+     * 如果不设置该选项，你也可以通过引用取得原始渲染组件实例，手动逐帧调用其 `update` 函数来更新动画效果。
+     */
+    enable?: boolean;
+    /**
+     * 设置歌词行的对齐方式，如果为 `undefined` 则默认为 `top`
+     *
+     * - 设置成 `top` 的话歌词将会向组件顶部对齐
+     * - 设置成 `bottom` 的话歌词将会向组件底部对齐
+     * - 设置成 [0.0-1.0] 之间任意数字的话则会根据当前组件高度从顶部向下位移为对齐位置垂直居中对齐
+     */
+    alignAnchor?: "top" | "bottom" | number;
+    /**
+     * 设置是否使用物理弹簧算法实现歌词动画效果，默认启用
+     *
+     * 如果启用，则会通过弹簧算法实时处理歌词位置，但是需要性能足够强劲的电脑方可流畅运行
+     *
+     * 如果不启用，则会回退到基于 `transition` 的过渡效果，对低性能的机器比较友好，但是效果会比较单一
+     */
+    enableSpring?: boolean;
+    /**
+     * 设置是否启用歌词行的模糊效果，默认为 `true`
+     */
+    enableBlur?: boolean;
+    /**
+     * 设置当前播放歌词，要注意传入后这个数组内的信息不得修改，否则会发生错误
+     */
+    lyricLines?: LyricLine[];
+    /**
+     * 设置当前播放进度，单位为毫秒且**必须是整数**，此时将会更新内部的歌词进度信息
+     * 内部会根据调用间隔和播放进度自动决定如何滚动和显示歌词，所以这个的调用频率越快越准确越好
+     */
+    currentTime?: number;
+    /**
+     * 设置所有歌词行在横坐标上的弹簧属性，包括重量、弹力和阻力。
+     *
+     * @param params 需要设置的弹簧属性，提供的属性将会覆盖原来的属性，未提供的属性将会保持原样
+     */
+    linePosXSpringParams?: Partial<spring.SpringParams>;
+    /**
+     * 设置所有歌词行在​纵坐标上的弹簧属性，包括重量、弹力和阻力。
+     *
+     * @param params 需要设置的弹簧属性，提供的属性将会覆盖原来的属性，未提供的属性将会保持原样
+     */
+    linePosYSpringParams?: Partial<spring.SpringParams>;
+    /**
+     * 设置所有歌词行在​缩放大小上的弹簧属性，包括重量、弹力和阻力。
+     *
+     * @param params 需要设置的弹簧属性，提供的属性将会覆盖原来的属性，未提供的属性将会保持原样
+     */
+    lineScaleSpringParams?: Partial<spring.SpringParams>;
+}
+/**
+ * 歌词播放组件的引用
+ */
+export interface LyricPlayerRef {
+    /**
+     * 歌词播放实例
+     */
+    lyricPlayer: Ref<CoreLyricPlayer | undefined>;
+    /**
+     * 将歌词播放实例的元素包裹起来的 DIV 元素实例
+     */
+    wrapperEl: Ref<HTMLDivElement | undefined>;
+}
+/**
+ * 背景渲染组件的属性
+ */
+export interface BackgroundRenderProps {
+    /**
+     * 设置背景专辑图片
+     */
+    albumImageUrl?: string;
+    /**
+     * 设置当前背景动画帧率，如果为 `undefined` 则默认为 `30`
+     */
+    fps?: number;
+    /**
+     * 设置当前播放状态，如果为 `undefined` 则默认为 `true`
+     */
+    playing?: boolean;
+    /**
+     * 设置当前动画流动速度，如果为 `undefined` 则默认为 `2`
+     */
+    flowSpeed?: number;
+    /**
+     * 设置当前渲染缩放比例，如果为 `undefined` 则默认为 `0.5`
+     */
+    renderScale?: number;
+}
+/**
+ * 背景渲染组件的引用
+ */
+export interface BackgroundRenderRef {
+    /**
+     * 背景渲染实例引用
+     */
+    bgRender?: Ref<CoreBackgroundRender | undefined>;
+    /**
+     * 将背景渲染实例的元素包裹起来的 DIV 元素实例
+     */
+    wrapperEl: Ref<HTMLDivElement | undefined>;
+}

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@applemusic-like-lyrics/vue",
+  "packageManager": "yarn@3.6.1",
+  "version": "0.0.3",
+  "description": "AMLL 组件库的 Vue 绑定",
+  "repository": {
+    "url": "https://github.com/Steve-xmh/applemusic-like-lyrics.git",
+    "directory": "packages/vue",
+    "type": "git"
+  },
+  "license": "GPL-3.0",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "vite build",
+    "fmt": "rome format --write ./src",
+    "dev": "vite dev"
+  },
+  "main": "./dist/amll-vue.cjs",
+  "module": "./dist/amll-vue.mjs",
+  "typings": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/amll-vue.mjs",
+      "require": "./dist/amll-vue.cjs"
+    }
+  },
+  "dependencies": {
+    "@applemusic-like-lyrics/core": "^0.0.3",
+    "vue": "^3.3.4"
+  },
+  "devDependencies": {
+    "@vitejs/plugin-vue": "^4.2.3",
+    "@vue/tsconfig": "^0.4.0",
+    "rome": "^12.1.3",
+    "typedoc": "^0.24.8",
+    "typedoc-plugin-markdown": "^3.15.3",
+    "vite": "^4.4.7",
+    "vite-plugin-dts": "^3.3.1"
+  }
+}