unika-components 1.0.4 → 1.0.5

package/dist/src/components/UniMusic/UniMusic.vue.d.ts

@@ -0,0 +1,13 @@
+declare const _default: import("vue").DefineComponent<{
+    [x: string]: any;
+}, {
+    styleProps: import("vue").ComputedRef<Pick<any, string>>;
+    handleClick: () => void;
+    isPlaying: import("vue").Ref<boolean>;
+    togglePlay: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    [x: string]: any;
+}>>, {
+    [x: string]: any;
+}, {}>;
+export default _default;

package/dist/src/components/UniMusic/index.d.ts

@@ -0,0 +1,2 @@
+import UniMusic from './UniMusic.vue';
+export default UniMusic;

package/dist/src/defaultProps.d.ts

@@ -167,6 +167,29 @@ export declare const backgroundDefaultProps: {
     left: string;
     top: string;
 };
+export declare const musicDefaultProps: {
+    actionType: string;
+    url: string;
+    height: string;
+    width: string;
+    paddingLeft: string;
+    paddingRight: string;
+    paddingTop: string;
+    paddingBottom: string;
+    borderStyle: string;
+    borderColor: string;
+    borderWidth: string;
+    borderRadius: string;
+    boxShadow: string;
+    opacity: number;
+    position: string;
+    left: string;
+    top: string;
+    right: string;
+    musicSrc: string;
+    name: string;
+    isPlaying: boolean;
+};
 export declare const componentsDefaultProps: {
     'uni-text': {
         props: {
@@ -259,6 +282,31 @@ export declare const componentsDefaultProps: {
             top: string;
         };
     };
+    'uni-music': {
+        props: {
+            actionType: string;
+            url: string;
+            height: string;
+            width: string;
+            paddingLeft: string;
+            paddingRight: string;
+            paddingTop: string;
+            paddingBottom: string;
+            borderStyle: string;
+            borderColor: string;
+            borderWidth: string;
+            borderRadius: string;
+            boxShadow: string;
+            opacity: number;
+            position: string;
+            left: string;
+            top: string;
+            right: string;
+            musicSrc: string;
+            name: string;
+            isPlaying: boolean;
+        };
+    };
 };
 export declare const isEditingProp: {
     isEditing: {

package/dist/src/index.d.ts

@@ -5,8 +5,9 @@ import UniShape from './components/UniShape';
 import LongPage from './components/LongPage';
 import SwiperPage from './components/SwiperPage';
 import UniBackground from './components/UniBackground';
+import UniMusic from './components/UniMusic';
 declare const install: (app: App) => void;
-export { UniText, UniImage, UniShape, LongPage, SwiperPage, UniBackground, install };
+export { UniText, UniImage, UniShape, LongPage, SwiperPage, UniBackground, UniMusic, install };
 declare const _default: {
     install: (app: App<any>) => void;
 };

package/dist/unika-components.css

@@ -1,8 +1,4 @@
 
-.uni-image-component {
-  max-width: 100%;
-}
-
 h2.uni-text-component, p.uni-text-component {
   margin-bottom: 0;
 }
@@ -14,6 +10,10 @@ button.uni-text-component {
   box-sizing: border-box;
   white-space: pre-wrap;
 }
+
+.uni-image-component {
+  max-width: 100%;
+}
 
   .uni-background-component {
     width: 100%;
@@ -38,3 +38,98 @@ button.uni-text-component {
     position:absolute;
     z-index:99999999;
   }
+
+#audio {
+  position: absolute;
+  right: 10px;
+  top: 10px;
+  z-index: 103;
+  width: 30px;
+  height: 30px;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+}
+#audio .audio {
+  width: 100%;
+  height: 100%;
+  display: -webkit-box;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  color: #fff;
+  background: #666;
+  border-radius: 50%;
+  overflow: hidden;
+  will-change: transform;
+}
+#audio .audio .music-icon {
+  display: block;
+  width: 100%;
+  height: 100%;
+}
+#audio .icon-cancel {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  overflow: hidden;
+  padding: 14px 0;
+}
+#audio .icon-cancel .icon-h {
+  -webkit-transform: rotate(45deg);
+  transform: rotate(45deg);
+  width: 100%;
+  height: 2px;
+  background: #fff;
+}
+#audio .mrotate {
+  -webkit-animation: mrotate 5s linear infinite;
+  animation: mrotate 5s linear infinite;
+}
+  .video-play-audio {
+    position: absolute;
+    left: -9999px;
+    top: -9999px;
+    width: 0;
+    height: 0;
+    z-index: -1;
+    opacity: 1;
+    overflow: hidden;
+  }
+
+  .music-img {
+    position: relative;
+    display: inline-block;
+    width: 100%;
+    height: 100%;
+  }
+
+  .uni-music-component {
+  }
+
+  /* 无限旋转 */
+  @keyframes mrotate {
+    from {
+      transform: rotate(0deg);
+    }
+    to {
+      transform: rotate(360deg);
+    }
+  }
+  @-webkit-keyframes mrotate {
+    from {
+      -webkit-transform: rotate(0deg);
+    }
+    to {
+      -webkit-transform: rotate(360deg);
+    }
+  }

package/dist/unika-components.esm.js

@@ -1,4 +1,4 @@
-import { computed, defineComponent, openBlock, createBlock, resolveDynamicComponent, withModifiers, normalizeStyle, withCtx, createTextVNode, toDisplayString, createElementBlock, Fragment, renderList, normalizeProps, guardReactiveProps, resolveComponent, createElementVNode, createVNode, createCommentVNode, pushScopeId, popScopeId } from 'vue';
+import { computed, defineComponent, openBlock, createBlock, resolveDynamicComponent, withModifiers, normalizeStyle, withCtx, createTextVNode, toDisplayString, createElementBlock, Fragment, renderList, normalizeProps, guardReactiveProps, resolveComponent, createElementVNode, createVNode, createCommentVNode, pushScopeId, popScopeId, ref, onMounted, normalizeClass } from 'vue';
 
 /** Detect free variable `global` from Node.js. */
 var freeGlobal = typeof global == 'object' && global && global.Object === Object && global;
@@ -3437,6 +3437,12 @@ const backgroundDefaultProps = {
     left: '0px',
     top: '0px'
 };
+const musicDefaultProps = {
+    musicSrc: '',
+    name: '',
+    isPlaying: false,
+    ...commonDefaultProps
+};
 // this contains all default props for all the components
 // useful for inserting new component into the store
 const componentsDefaultProps = {
@@ -3451,6 +3457,9 @@ const componentsDefaultProps = {
     },
     'uni-background': {
         props: backgroundDefaultProps
+    },
+    'uni-music': {
+        props: musicDefaultProps
     }
 };
 const isEditingProp = {
@@ -3498,12 +3507,12 @@ const extraProps = {
     },
     ...isEditingProp
 };
-const defaultProps$2 = transformToComponentProps(componentsDefaultProps['uni-text'].props, extraProps);
+const defaultProps$3 = transformToComponentProps(componentsDefaultProps['uni-text'].props, extraProps);
 // array that contains style props
-var script$5 = defineComponent({
+var script$6 = defineComponent({
     name: 'uni-text',
     props: {
-        ...defaultProps$2
+        ...defaultProps$3
     },
     setup(props) {
         const styleProps = useStylePick(props);
@@ -3515,7 +3524,7 @@ var script$5 = defineComponent({
     }
 });
 
-function render$5(_ctx, _cache, $props, $setup, $data, $options) {
+function render$6(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), {
     onClick: withModifiers(_ctx.handleClick, ["prevent"]),
     style: normalizeStyle(_ctx.styleProps),
@@ -3528,16 +3537,16 @@ function render$5(_ctx, _cache, $props, $setup, $data, $options) {
   }, 8 /* PROPS */, ["onClick", "style"]))
 }
 
-script$5.render = render$5;
-script$5.__scopeId = "data-v-55ed80cb";
-script$5.__file = "src/components/UniText/UniText.vue";
+script$6.render = render$6;
+script$6.__scopeId = "data-v-55ed80cb";
+script$6.__file = "src/components/UniText/UniText.vue";
 
-script$5.install = (app) => {
-    app.component(script$5.name, script$5);
+script$6.install = (app) => {
+    app.component(script$6.name, script$6);
 };
 
 // array that contains style props
-var script$4 = defineComponent({
+var script$5 = defineComponent({
     name: 'uni-image',
     props: transformToComponentProps(componentsDefaultProps['uni-image'].props, isEditingProp),
     setup(props) {
@@ -3550,32 +3559,32 @@ var script$4 = defineComponent({
     }
 });
 
-const _hoisted_1$3 = ["src"];
+const _hoisted_1$4 = ["src"];
 
-function render$4(_ctx, _cache, $props, $setup, $data, $options) {
+function render$5(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("img", {
     src: _ctx.imageSrc,
     style: normalizeStyle(_ctx.styleProps),
     onClick: _cache[0] || (_cache[0] = withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"])),
     class: "uni-image-component",
     draggable: false
-  }, null, 12 /* STYLE, PROPS */, _hoisted_1$3))
+  }, null, 12 /* STYLE, PROPS */, _hoisted_1$4))
 }
 
-script$4.render = render$4;
-script$4.__scopeId = "data-v-03caca2f";
-script$4.__file = "src/components/UniImage/UniImage.vue";
+script$5.render = render$5;
+script$5.__scopeId = "data-v-03caca2f";
+script$5.__file = "src/components/UniImage/UniImage.vue";
 
-script$4.install = (app) => {
-    app.component(script$4.name, script$4);
+script$5.install = (app) => {
+    app.component(script$5.name, script$5);
 };
 
-const defaultProps$1 = transformToComponentProps(componentsDefaultProps['uni-shape'].props, isEditingProp);
+const defaultProps$2 = transformToComponentProps(componentsDefaultProps['uni-shape'].props, isEditingProp);
 // array that contains style props
-var script$3 = defineComponent({
+var script$4 = defineComponent({
     name: 'uni-shape',
     props: {
-        ...defaultProps$1
+        ...defaultProps$2
     },
     setup(props) {
         const styleProps = useStylePick(props);
@@ -3587,7 +3596,7 @@ var script$3 = defineComponent({
     }
 });
 
-function render$3(_ctx, _cache, $props, $setup, $data, $options) {
+function render$4(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("div", {
     onClick: _cache[0] || (_cache[0] = withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"])),
     style: normalizeStyle(_ctx.styleProps),
@@ -3596,14 +3605,14 @@ function render$3(_ctx, _cache, $props, $setup, $data, $options) {
   }, null, 4 /* STYLE */))
 }
 
-script$3.render = render$3;
-script$3.__file = "src/components/UniShape/UniShape.vue";
+script$4.render = render$4;
+script$4.__file = "src/components/UniShape/UniShape.vue";
 
-script$3.install = (app) => {
-    app.component(script$3.name, script$3);
+script$4.install = (app) => {
+    app.component(script$4.name, script$4);
 };
 
-var script$2 = defineComponent({
+var script$3 = defineComponent({
     name: 'long-page',
     props: {
         work: {
@@ -3616,9 +3625,9 @@ var script$2 = defineComponent({
     }
 });
 
-const _hoisted_1$2 = ["id"];
+const _hoisted_1$3 = ["id"];
 
-function render$2(_ctx, _cache, $props, $setup, $data, $options) {
+function render$3(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("div", {
     class: "final-page",
     style: normalizeStyle(_ctx.work && {width: _ctx.work.width, height: _ctx.work.height} )
@@ -3629,20 +3638,20 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
         id: `component-${item.id}`
       }, [
         (openBlock(), createBlock(resolveDynamicComponent(item.name), normalizeProps(guardReactiveProps(item.props)), null, 16 /* FULL_PROPS */))
-      ], 8 /* PROPS */, _hoisted_1$2))
+      ], 8 /* PROPS */, _hoisted_1$3))
     }), 128 /* KEYED_FRAGMENT */))
   ], 4 /* STYLE */))
 }
 
-script$2.render = render$2;
-script$2.__file = "src/components/LongPage/LongPage.vue";
+script$3.render = render$3;
+script$3.__file = "src/components/LongPage/LongPage.vue";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-script$2.install = (app) => {
-    app.component(script$2.name, script$2);
+script$3.install = (app) => {
+    app.component(script$3.name, script$3);
 };
 
-var script$1 = defineComponent({
+var script$2 = defineComponent({
     name: 'swiper-page',
     props: {
         page: {
@@ -3655,16 +3664,16 @@ var script$1 = defineComponent({
     }
 });
 
-const _hoisted_1$1 = { class: "swiper-wrapper" };
+const _hoisted_1$2 = { class: "swiper-wrapper" };
 
-function render$1(_ctx, _cache, $props, $setup, $data, $options) {
+function render$2(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_final_page = resolveComponent("final-page");
 
   return (openBlock(), createElementBlock("div", {
     style: normalizeStyle(_ctx.styleProps),
     class: "swiper-container"
   }, [
-    createElementVNode("div", _hoisted_1$1, [
+    createElementVNode("div", _hoisted_1$2, [
       (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.slides, (slide, index) => {
         return (openBlock(), createElementBlock("div", {
           class: "swiper-slide",
@@ -3679,24 +3688,24 @@ function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   ], 4 /* STYLE */))
 }
 
-script$1.render = render$1;
-script$1.__file = "src/components/SwiperPage/SwiperPage.vue";
+script$2.render = render$2;
+script$2.__file = "src/components/SwiperPage/SwiperPage.vue";
 
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
-script$1.install = (app) => {
-    app.component(script$1.name, script$1);
+script$2.install = (app) => {
+    app.component(script$2.name, script$2);
 };
 
-const defaultProps = transformToComponentProps(componentsDefaultProps['uni-background'].props, isEditingProp);
+const defaultProps$1 = transformToComponentProps(componentsDefaultProps['uni-background'].props, isEditingProp);
 // array that contains style props
-var script = defineComponent({
+var script$1 = defineComponent({
     name: 'uni-background',
     props: {
         watermark: {
             type: Boolean,
             default: false
         },
-        ...defaultProps
+        ...defaultProps$1
     },
     components: {},
     setup(props) {
@@ -3712,11 +3721,11 @@ var script = defineComponent({
     }
 });
 
-const _withScopeId = n => (pushScopeId("data-v-04e7238d"),n=n(),popScopeId(),n);
-const _hoisted_1 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/createElementVNode("div", { style: {} }, null, -1 /* HOISTED */));
-const _hoisted_2 = ["src"];
+const _withScopeId$1 = n => (pushScopeId("data-v-04e7238d"),n=n(),popScopeId(),n);
+const _hoisted_1$1 = /*#__PURE__*/ _withScopeId$1(() => /*#__PURE__*/createElementVNode("div", { style: {} }, null, -1 /* HOISTED */));
+const _hoisted_2$1 = ["src"];
 
-function render(_ctx, _cache, $props, $setup, $data, $options) {
+function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   const _component_a_watermark = resolveComponent("a-watermark");
 
   return (openBlock(), createElementBlock("div", {
@@ -3730,7 +3739,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           class: "watermark"
         }, {
           default: withCtx(() => [
-            _hoisted_1
+            _hoisted_1$1
           ]),
           _: 1 /* STABLE */
         }))
@@ -3740,14 +3749,126 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
           key: 1,
           src: _ctx.backgroundImage,
           class: "bg-img"
-        }, null, 8 /* PROPS */, _hoisted_2))
+        }, null, 8 /* PROPS */, _hoisted_2$1))
       : createCommentVNode("v-if", true)
   ], 4 /* STYLE */))
 }
 
+script$1.render = render$1;
+script$1.__scopeId = "data-v-04e7238d";
+script$1.__file = "src/components/UniBackground/UniBackground.vue";
+
+script$1.install = (app) => {
+    app.component(script$1.name, script$1);
+};
+
+const defaultProps = transformToComponentProps(componentsDefaultProps['uni-music'].props, isEditingProp);
+// array that contains style props
+var script = defineComponent({
+    name: 'uni-music',
+    props: {
+        ...defaultProps
+    },
+    setup(props) {
+        // 重用并且简化
+        // 抽离并且获得 styleProps
+        const styleProps = useStylePick(props);
+        const handleClick = useComponentClick(props);
+        const isPlaying = ref(false);
+        const audioPlayer = ref(null);
+        const togglePlay = () => {
+            if (!audioPlayer.value)
+                return;
+            isPlaying.value = !isPlaying.value;
+            if (isPlaying.value) {
+                audioPlayer.value && audioPlayer.value.play();
+            }
+            else {
+                audioPlayer.value && audioPlayer.value.pause();
+            }
+        };
+        onMounted(() => {
+            audioPlayer.value = document.querySelector('audio');
+            if (audioPlayer.value && props.isPlaying) {
+                audioPlayer.value.load();
+                audioPlayer.value.play().catch(() => {
+                    const playError = ref(true);
+                    const event = ['click']; // "touchstart"
+                    const pageClick = () => {
+                        if (audioPlayer.value && playError.value) {
+                            playError.value = false;
+                            audioPlayer.value.load();
+                            audioPlayer.value.play().catch(() => {
+                                playError.value = true;
+                            });
+                            event.forEach((item) => {
+                                document.removeEventListener(item, pageClick);
+                            });
+                        }
+                    };
+                    event.forEach((item) => {
+                        document.addEventListener(item, pageClick);
+                    });
+                });
+            }
+        });
+        return {
+            styleProps,
+            handleClick,
+            isPlaying,
+            togglePlay
+        };
+    }
+});
+
+const _withScopeId = n => (pushScopeId("data-v-99922522"),n=n(),popScopeId(),n);
+const _hoisted_1 = {
+  id: "audio",
+  class: "uni-music-component"
+};
+const _hoisted_2 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/createElementVNode("img", {
+  src: "https://unika-static-dev.oss-ap-southeast-7.aliyuncs.com/components/music2.png",
+  class: "music-icon"
+}, null, -1 /* HOISTED */));
+const _hoisted_3 = { class: "icon-cancel" };
+const _hoisted_4 = {
+  key: 0,
+  class: "icon-h"
+};
+const _hoisted_5 = ["src"];
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (openBlock(), createElementBlock("div", {
+    style: normalizeStyle(_ctx.styleProps)
+  }, [
+    createElementVNode("div", _hoisted_1, [
+      createElementVNode("div", {
+        class: normalizeClass({ mrotate: _ctx.isPlaying, audio: true }),
+        onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.togglePlay && _ctx.togglePlay(...args)))
+      }, [
+        _hoisted_2,
+        createElementVNode("div", _hoisted_3, [
+          (!_ctx.isPlaying)
+            ? (openBlock(), createElementBlock("div", _hoisted_4))
+            : createCommentVNode("v-if", true)
+        ])
+      ], 2 /* CLASS */),
+      createElementVNode("audio", {
+        style: {"display":"none"},
+        ref: "audioPlayer",
+        src: _ctx.musicSrc,
+        autoplay: "",
+        controls: "",
+        loop: "",
+        preload: "auto"
+      }, null, 8 /* PROPS */, _hoisted_5)
+    ])
+  ], 4 /* STYLE */))
+}
+
 script.render = render;
-script.__scopeId = "data-v-04e7238d";
-script.__file = "src/components/UniBackground/UniBackground.vue";
+script.__scopeId = "data-v-99922522";
+script.__file = "src/components/UniMusic/UniMusic.vue";
 
 script.install = (app) => {
     app.component(script.name, script);
@@ -3755,12 +3876,13 @@ script.install = (app) => {
 
 // export { textDefaultProps , textStylePropNames, TextComponentProps,
 const components = [
+    script$6,
     script$5,
     script$4,
     script$3,
     script$2,
     script$1,
-    script
+    script,
 ];
 // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
 const install = (app) => {
@@ -3772,4 +3894,4 @@ var index = {
     install
 };
 
-export { script$2 as LongPage, script$1 as SwiperPage, script as UniBackground, script$4 as UniImage, script$3 as UniShape, script$5 as UniText, index as default, install };
+export { script$3 as LongPage, script$2 as SwiperPage, script$1 as UniBackground, script$5 as UniImage, script as UniMusic, script$4 as UniShape, script$6 as UniText, index as default, install };

package/dist/unika-components.umd.js

@@ -3441,6 +3441,12 @@
       left: '0px',
       top: '0px'
   };
+  const musicDefaultProps = {
+      musicSrc: '',
+      name: '',
+      isPlaying: false,
+      ...commonDefaultProps
+  };
   // this contains all default props for all the components
   // useful for inserting new component into the store
   const componentsDefaultProps = {
@@ -3455,6 +3461,9 @@
       },
       'uni-background': {
           props: backgroundDefaultProps
+      },
+      'uni-music': {
+          props: musicDefaultProps
       }
   };
   const isEditingProp = {
@@ -3502,12 +3511,12 @@
       },
       ...isEditingProp
   };
-  const defaultProps$2 = transformToComponentProps(componentsDefaultProps['uni-text'].props, extraProps);
+  const defaultProps$3 = transformToComponentProps(componentsDefaultProps['uni-text'].props, extraProps);
   // array that contains style props
-  var script$5 = vue.defineComponent({
+  var script$6 = vue.defineComponent({
       name: 'uni-text',
       props: {
-          ...defaultProps$2
+          ...defaultProps$3
       },
       setup(props) {
           const styleProps = useStylePick(props);
@@ -3519,7 +3528,7 @@
       }
   });
 
-  function render$5(_ctx, _cache, $props, $setup, $data, $options) {
+  function render$6(_ctx, _cache, $props, $setup, $data, $options) {
     return (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.tag), {
       onClick: vue.withModifiers(_ctx.handleClick, ["prevent"]),
       style: vue.normalizeStyle(_ctx.styleProps),
@@ -3532,16 +3541,16 @@
     }, 8 /* PROPS */, ["onClick", "style"]))
   }
 
-  script$5.render = render$5;
-  script$5.__scopeId = "data-v-55ed80cb";
-  script$5.__file = "src/components/UniText/UniText.vue";
+  script$6.render = render$6;
+  script$6.__scopeId = "data-v-55ed80cb";
+  script$6.__file = "src/components/UniText/UniText.vue";
 
-  script$5.install = (app) => {
-      app.component(script$5.name, script$5);
+  script$6.install = (app) => {
+      app.component(script$6.name, script$6);
   };
 
   // array that contains style props
-  var script$4 = vue.defineComponent({
+  var script$5 = vue.defineComponent({
       name: 'uni-image',
       props: transformToComponentProps(componentsDefaultProps['uni-image'].props, isEditingProp),
       setup(props) {
@@ -3554,32 +3563,32 @@
       }
   });
 
-  const _hoisted_1$3 = ["src"];
+  const _hoisted_1$4 = ["src"];
 
-  function render$4(_ctx, _cache, $props, $setup, $data, $options) {
+  function render$5(_ctx, _cache, $props, $setup, $data, $options) {
     return (vue.openBlock(), vue.createElementBlock("img", {
       src: _ctx.imageSrc,
       style: vue.normalizeStyle(_ctx.styleProps),
       onClick: _cache[0] || (_cache[0] = vue.withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"])),
       class: "uni-image-component",
       draggable: false
-    }, null, 12 /* STYLE, PROPS */, _hoisted_1$3))
+    }, null, 12 /* STYLE, PROPS */, _hoisted_1$4))
   }
 
-  script$4.render = render$4;
-  script$4.__scopeId = "data-v-03caca2f";
-  script$4.__file = "src/components/UniImage/UniImage.vue";
+  script$5.render = render$5;
+  script$5.__scopeId = "data-v-03caca2f";
+  script$5.__file = "src/components/UniImage/UniImage.vue";
 
-  script$4.install = (app) => {
-      app.component(script$4.name, script$4);
+  script$5.install = (app) => {
+      app.component(script$5.name, script$5);
   };
 
-  const defaultProps$1 = transformToComponentProps(componentsDefaultProps['uni-shape'].props, isEditingProp);
+  const defaultProps$2 = transformToComponentProps(componentsDefaultProps['uni-shape'].props, isEditingProp);
   // array that contains style props
-  var script$3 = vue.defineComponent({
+  var script$4 = vue.defineComponent({
       name: 'uni-shape',
       props: {
-          ...defaultProps$1
+          ...defaultProps$2
       },
       setup(props) {
           const styleProps = useStylePick(props);
@@ -3591,7 +3600,7 @@
       }
   });
 
-  function render$3(_ctx, _cache, $props, $setup, $data, $options) {
+  function render$4(_ctx, _cache, $props, $setup, $data, $options) {
     return (vue.openBlock(), vue.createElementBlock("div", {
       onClick: _cache[0] || (_cache[0] = vue.withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"])),
       style: vue.normalizeStyle(_ctx.styleProps),
@@ -3600,14 +3609,14 @@
     }, null, 4 /* STYLE */))
   }
 
-  script$3.render = render$3;
-  script$3.__file = "src/components/UniShape/UniShape.vue";
+  script$4.render = render$4;
+  script$4.__file = "src/components/UniShape/UniShape.vue";
 
-  script$3.install = (app) => {
-      app.component(script$3.name, script$3);
+  script$4.install = (app) => {
+      app.component(script$4.name, script$4);
   };
 
-  var script$2 = vue.defineComponent({
+  var script$3 = vue.defineComponent({
       name: 'long-page',
       props: {
           work: {
@@ -3620,9 +3629,9 @@
       }
   });
 
-  const _hoisted_1$2 = ["id"];
+  const _hoisted_1$3 = ["id"];
 
-  function render$2(_ctx, _cache, $props, $setup, $data, $options) {
+  function render$3(_ctx, _cache, $props, $setup, $data, $options) {
     return (vue.openBlock(), vue.createElementBlock("div", {
       class: "final-page",
       style: vue.normalizeStyle(_ctx.work && {width: _ctx.work.width, height: _ctx.work.height} )
@@ -3633,20 +3642,20 @@
           id: `component-${item.id}`
         }, [
           (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item.name), vue.normalizeProps(vue.guardReactiveProps(item.props)), null, 16 /* FULL_PROPS */))
-        ], 8 /* PROPS */, _hoisted_1$2))
+        ], 8 /* PROPS */, _hoisted_1$3))
       }), 128 /* KEYED_FRAGMENT */))
     ], 4 /* STYLE */))
   }
 
-  script$2.render = render$2;
-  script$2.__file = "src/components/LongPage/LongPage.vue";
+  script$3.render = render$3;
+  script$3.__file = "src/components/LongPage/LongPage.vue";
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  script$2.install = (app) => {
-      app.component(script$2.name, script$2);
+  script$3.install = (app) => {
+      app.component(script$3.name, script$3);
   };
 
-  var script$1 = vue.defineComponent({
+  var script$2 = vue.defineComponent({
       name: 'swiper-page',
       props: {
           page: {
@@ -3659,16 +3668,16 @@
       }
   });
 
-  const _hoisted_1$1 = { class: "swiper-wrapper" };
+  const _hoisted_1$2 = { class: "swiper-wrapper" };
 
-  function render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  function render$2(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_final_page = vue.resolveComponent("final-page");
 
     return (vue.openBlock(), vue.createElementBlock("div", {
       style: vue.normalizeStyle(_ctx.styleProps),
       class: "swiper-container"
     }, [
-      vue.createElementVNode("div", _hoisted_1$1, [
+      vue.createElementVNode("div", _hoisted_1$2, [
         (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.slides, (slide, index) => {
           return (vue.openBlock(), vue.createElementBlock("div", {
             class: "swiper-slide",
@@ -3683,24 +3692,24 @@
     ], 4 /* STYLE */))
   }
 
-  script$1.render = render$1;
-  script$1.__file = "src/components/SwiperPage/SwiperPage.vue";
+  script$2.render = render$2;
+  script$2.__file = "src/components/SwiperPage/SwiperPage.vue";
 
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  script$1.install = (app) => {
-      app.component(script$1.name, script$1);
+  script$2.install = (app) => {
+      app.component(script$2.name, script$2);
   };
 
-  const defaultProps = transformToComponentProps(componentsDefaultProps['uni-background'].props, isEditingProp);
+  const defaultProps$1 = transformToComponentProps(componentsDefaultProps['uni-background'].props, isEditingProp);
   // array that contains style props
-  var script = vue.defineComponent({
+  var script$1 = vue.defineComponent({
       name: 'uni-background',
       props: {
           watermark: {
               type: Boolean,
               default: false
           },
-          ...defaultProps
+          ...defaultProps$1
       },
       components: {},
       setup(props) {
@@ -3716,11 +3725,11 @@
       }
   });
 
-  const _withScopeId = n => (vue.pushScopeId("data-v-04e7238d"),n=n(),vue.popScopeId(),n);
-  const _hoisted_1 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/vue.createElementVNode("div", { style: {} }, null, -1 /* HOISTED */));
-  const _hoisted_2 = ["src"];
+  const _withScopeId$1 = n => (vue.pushScopeId("data-v-04e7238d"),n=n(),vue.popScopeId(),n);
+  const _hoisted_1$1 = /*#__PURE__*/ _withScopeId$1(() => /*#__PURE__*/vue.createElementVNode("div", { style: {} }, null, -1 /* HOISTED */));
+  const _hoisted_2$1 = ["src"];
 
-  function render(_ctx, _cache, $props, $setup, $data, $options) {
+  function render$1(_ctx, _cache, $props, $setup, $data, $options) {
     const _component_a_watermark = vue.resolveComponent("a-watermark");
 
     return (vue.openBlock(), vue.createElementBlock("div", {
@@ -3734,7 +3743,7 @@
             class: "watermark"
           }, {
             default: vue.withCtx(() => [
-              _hoisted_1
+              _hoisted_1$1
             ]),
             _: 1 /* STABLE */
           }))
@@ -3744,14 +3753,126 @@
             key: 1,
             src: _ctx.backgroundImage,
             class: "bg-img"
-          }, null, 8 /* PROPS */, _hoisted_2))
+          }, null, 8 /* PROPS */, _hoisted_2$1))
         : vue.createCommentVNode("v-if", true)
     ], 4 /* STYLE */))
   }
 
+  script$1.render = render$1;
+  script$1.__scopeId = "data-v-04e7238d";
+  script$1.__file = "src/components/UniBackground/UniBackground.vue";
+
+  script$1.install = (app) => {
+      app.component(script$1.name, script$1);
+  };
+
+  const defaultProps = transformToComponentProps(componentsDefaultProps['uni-music'].props, isEditingProp);
+  // array that contains style props
+  var script = vue.defineComponent({
+      name: 'uni-music',
+      props: {
+          ...defaultProps
+      },
+      setup(props) {
+          // 重用并且简化
+          // 抽离并且获得 styleProps
+          const styleProps = useStylePick(props);
+          const handleClick = useComponentClick(props);
+          const isPlaying = vue.ref(false);
+          const audioPlayer = vue.ref(null);
+          const togglePlay = () => {
+              if (!audioPlayer.value)
+                  return;
+              isPlaying.value = !isPlaying.value;
+              if (isPlaying.value) {
+                  audioPlayer.value && audioPlayer.value.play();
+              }
+              else {
+                  audioPlayer.value && audioPlayer.value.pause();
+              }
+          };
+          vue.onMounted(() => {
+              audioPlayer.value = document.querySelector('audio');
+              if (audioPlayer.value && props.isPlaying) {
+                  audioPlayer.value.load();
+                  audioPlayer.value.play().catch(() => {
+                      const playError = vue.ref(true);
+                      const event = ['click']; // "touchstart"
+                      const pageClick = () => {
+                          if (audioPlayer.value && playError.value) {
+                              playError.value = false;
+                              audioPlayer.value.load();
+                              audioPlayer.value.play().catch(() => {
+                                  playError.value = true;
+                              });
+                              event.forEach((item) => {
+                                  document.removeEventListener(item, pageClick);
+                              });
+                          }
+                      };
+                      event.forEach((item) => {
+                          document.addEventListener(item, pageClick);
+                      });
+                  });
+              }
+          });
+          return {
+              styleProps,
+              handleClick,
+              isPlaying,
+              togglePlay
+          };
+      }
+  });
+
+  const _withScopeId = n => (vue.pushScopeId("data-v-99922522"),n=n(),vue.popScopeId(),n);
+  const _hoisted_1 = {
+    id: "audio",
+    class: "uni-music-component"
+  };
+  const _hoisted_2 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/vue.createElementVNode("img", {
+    src: "https://unika-static-dev.oss-ap-southeast-7.aliyuncs.com/components/music2.png",
+    class: "music-icon"
+  }, null, -1 /* HOISTED */));
+  const _hoisted_3 = { class: "icon-cancel" };
+  const _hoisted_4 = {
+    key: 0,
+    class: "icon-h"
+  };
+  const _hoisted_5 = ["src"];
+
+  function render(_ctx, _cache, $props, $setup, $data, $options) {
+    return (vue.openBlock(), vue.createElementBlock("div", {
+      style: vue.normalizeStyle(_ctx.styleProps)
+    }, [
+      vue.createElementVNode("div", _hoisted_1, [
+        vue.createElementVNode("div", {
+          class: vue.normalizeClass({ mrotate: _ctx.isPlaying, audio: true }),
+          onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.togglePlay && _ctx.togglePlay(...args)))
+        }, [
+          _hoisted_2,
+          vue.createElementVNode("div", _hoisted_3, [
+            (!_ctx.isPlaying)
+              ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4))
+              : vue.createCommentVNode("v-if", true)
+          ])
+        ], 2 /* CLASS */),
+        vue.createElementVNode("audio", {
+          style: {"display":"none"},
+          ref: "audioPlayer",
+          src: _ctx.musicSrc,
+          autoplay: "",
+          controls: "",
+          loop: "",
+          preload: "auto"
+        }, null, 8 /* PROPS */, _hoisted_5)
+      ])
+    ], 4 /* STYLE */))
+  }
+
   script.render = render;
-  script.__scopeId = "data-v-04e7238d";
-  script.__file = "src/components/UniBackground/UniBackground.vue";
+  script.__scopeId = "data-v-99922522";
+  script.__file = "src/components/UniMusic/UniMusic.vue";
 
   script.install = (app) => {
       app.component(script.name, script);
@@ -3759,12 +3880,13 @@
 
   // export { textDefaultProps , textStylePropNames, TextComponentProps,
   const components = [
+      script$6,
       script$5,
       script$4,
       script$3,
       script$2,
       script$1,
-      script
+      script,
   ];
   // eslint-disable-next-line @typescript-eslint/explicit-module-boundary-types
   const install = (app) => {
@@ -3776,12 +3898,13 @@
       install
   };
 
-  exports.LongPage = script$2;
-  exports.SwiperPage = script$1;
-  exports.UniBackground = script;
-  exports.UniImage = script$4;
-  exports.UniShape = script$3;
-  exports.UniText = script$5;
+  exports.LongPage = script$3;
+  exports.SwiperPage = script$2;
+  exports.UniBackground = script$1;
+  exports.UniImage = script$5;
+  exports.UniMusic = script;
+  exports.UniShape = script$4;
+  exports.UniText = script$6;
   exports["default"] = index;
   exports.install = install;
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "unika-components",
-  "version": "1.0.4",
+  "version": "1.0.5",
   "private": false,
   "main": "dist/unika-components.umd.js",
   "module": "dist/unika-components.esm.js",