unika-components 1.0.3 → 1.0.5

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

@@ -0,0 +1,17 @@
+declare const _default: import("vue").DefineComponent<{
+    watermark: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}, {
+    styleProps: import("vue").ComputedRef<Pick<any, string>>;
+    handleClick: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
+    watermark: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>>, {
+    watermark: boolean;
+}, {}>;
+export default _default;

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

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

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

@@ -113,9 +113,6 @@ export declare const textDefaultProps: {
     textAlign: string;
     color: string;
     backgroundColor: string;
-    display: string;
-    alignItems: string;
-    justifyContent: string;
 };
 export declare const imageDefaultProps: {
     actionType: string;
@@ -159,6 +156,40 @@ export declare const shapeDefaultProps: {
     right: string;
     backgroundColor: string;
 };
+export declare const backgroundDefaultProps: {
+    backgroundColor: string;
+    backgroundImage: string;
+    backgroundSize: string;
+    backgroundRepeat: string;
+    opacity: number;
+    height: string;
+    position: string;
+    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: {
@@ -190,9 +221,6 @@ export declare const componentsDefaultProps: {
             textAlign: string;
             color: string;
             backgroundColor: string;
-            display: string;
-            alignItems: string;
-            justifyContent: string;
         };
     };
     'uni-image': {
@@ -241,6 +269,44 @@ export declare const componentsDefaultProps: {
             backgroundColor: string;
         };
     };
+    'uni-background': {
+        props: {
+            backgroundColor: string;
+            backgroundImage: string;
+            backgroundSize: string;
+            backgroundRepeat: string;
+            opacity: number;
+            height: string;
+            position: string;
+            left: string;
+            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

@@ -4,8 +4,10 @@ import UniImage from './components/UniImage';
 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, 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,3 +10,126 @@ button.uni-text-component {
   box-sizing: border-box;
   white-space: pre-wrap;
 }
+
+.uni-image-component {
+  max-width: 100%;
+}
+
+  .uni-background-component {
+    width: 100%;
+  }
+  .bg-img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    z-index:1;
+  }
+  .watermark {
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+  .watermark-div {
+    height: 100%;
+    width:100%;
+    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 } 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;
@@ -3416,9 +3416,6 @@ const textDefaultProps = {
     textAlign: 'left',
     color: '#000000',
     backgroundColor: '',
-    display: 'flex',
-    alignItems: 'center',
-    justifyContent: 'center',
     ...commonDefaultProps
 };
 const imageDefaultProps = {
@@ -3429,6 +3426,23 @@ const shapeDefaultProps = {
     backgroundColor: '',
     ...commonDefaultProps
 };
+const backgroundDefaultProps = {
+    backgroundColor: '#ffffff',
+    backgroundImage: '',
+    backgroundSize: 'cover',
+    backgroundRepeat: 'no-repeat',
+    opacity: 1,
+    height: '735px',
+    position: 'absolute',
+    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 = {
@@ -3440,6 +3454,12 @@ const componentsDefaultProps = {
     },
     'uni-shape': {
         props: shapeDefaultProps
+    },
+    'uni-background': {
+        props: backgroundDefaultProps
+    },
+    'uni-music': {
+        props: musicDefaultProps
     }
 };
 const isEditingProp = {
@@ -3487,12 +3507,12 @@ const extraProps = {
     },
     ...isEditingProp
 };
-const defaultProps$1 = transformToComponentProps(componentsDefaultProps['uni-text'].props, extraProps);
+const defaultProps$3 = transformToComponentProps(componentsDefaultProps['uni-text'].props, extraProps);
 // array that contains style props
-var script$4 = defineComponent({
+var script$6 = defineComponent({
     name: 'uni-text',
     props: {
-        ...defaultProps$1
+        ...defaultProps$3
     },
     setup(props) {
         const styleProps = useStylePick(props);
@@ -3504,7 +3524,7 @@ var script$4 = defineComponent({
     }
 });
 
-function render$4(_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),
@@ -3517,16 +3537,16 @@ function render$4(_ctx, _cache, $props, $setup, $data, $options) {
   }, 8 /* PROPS */, ["onClick", "style"]))
 }
 
-script$4.render = render$4;
-script$4.__scopeId = "data-v-55ed80cb";
-script$4.__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$4.install = (app) => {
-    app.component(script$4.name, script$4);
+script$6.install = (app) => {
+    app.component(script$6.name, script$6);
 };
 
 // array that contains style props
-var script$3 = defineComponent({
+var script$5 = defineComponent({
     name: 'uni-image',
     props: transformToComponentProps(componentsDefaultProps['uni-image'].props, isEditingProp),
     setup(props) {
@@ -3539,32 +3559,32 @@ var script$3 = defineComponent({
     }
 });
 
-const _hoisted_1$2 = ["src"];
+const _hoisted_1$4 = ["src"];
 
-function render$3(_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$2))
+  }, null, 12 /* STYLE, PROPS */, _hoisted_1$4))
 }
 
-script$3.render = render$3;
-script$3.__scopeId = "data-v-03caca2f";
-script$3.__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$3.install = (app) => {
-    app.component(script$3.name, script$3);
+script$5.install = (app) => {
+    app.component(script$5.name, script$5);
 };
 
-const defaultProps = transformToComponentProps(componentsDefaultProps['uni-shape'].props, isEditingProp);
+const defaultProps$2 = transformToComponentProps(componentsDefaultProps['uni-shape'].props, isEditingProp);
 // array that contains style props
-var script$2 = defineComponent({
+var script$4 = defineComponent({
     name: 'uni-shape',
     props: {
-        ...defaultProps
+        ...defaultProps$2
     },
     setup(props) {
         const styleProps = useStylePick(props);
@@ -3576,7 +3596,7 @@ var script$2 = defineComponent({
     }
 });
 
-function render$2(_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),
@@ -3585,14 +3605,14 @@ function render$2(_ctx, _cache, $props, $setup, $data, $options) {
   }, null, 4 /* STYLE */))
 }
 
-script$2.render = render$2;
-script$2.__file = "src/components/UniShape/UniShape.vue";
+script$4.render = render$4;
+script$4.__file = "src/components/UniShape/UniShape.vue";
 
-script$2.install = (app) => {
-    app.component(script$2.name, script$2);
+script$4.install = (app) => {
+    app.component(script$4.name, script$4);
 };
 
-var script$1 = defineComponent({
+var script$3 = defineComponent({
     name: 'long-page',
     props: {
         work: {
@@ -3605,9 +3625,9 @@ var script$1 = defineComponent({
     }
 });
 
-const _hoisted_1$1 = ["id"];
+const _hoisted_1$3 = ["id"];
 
-function render$1(_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} )
@@ -3618,20 +3638,20 @@ function render$1(_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$1))
+      ], 8 /* PROPS */, _hoisted_1$3))
     }), 128 /* KEYED_FRAGMENT */))
   ], 4 /* STYLE */))
 }
 
-script$1.render = render$1;
-script$1.__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$1.install = (app) => {
-    app.component(script$1.name, script$1);
+script$3.install = (app) => {
+    app.component(script$3.name, script$3);
 };
 
-var script = defineComponent({
+var script$2 = defineComponent({
     name: 'swiper-page',
     props: {
         page: {
@@ -3644,39 +3664,225 @@ var script = defineComponent({
     }
 });
 
-const _hoisted_1 = ["id"];
+const _hoisted_1$2 = { class: "swiper-wrapper" };
+
+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$2, [
+      (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.slides, (slide, index) => {
+        return (openBlock(), createElementBlock("div", {
+          class: "swiper-slide",
+          key: index
+        }, [
+          createVNode(_component_final_page, {
+            components: _ctx.page.components
+          }, null, 8 /* PROPS */, ["components"])
+        ]))
+      }), 128 /* KEYED_FRAGMENT */))
+    ])
+  ], 4 /* STYLE */))
+}
+
+script$2.render = render$2;
+script$2.__file = "src/components/SwiperPage/SwiperPage.vue";
+
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+script$2.install = (app) => {
+    app.component(script$2.name, script$2);
+};
+
+const defaultProps$1 = transformToComponentProps(componentsDefaultProps['uni-background'].props, isEditingProp);
+// array that contains style props
+var script$1 = defineComponent({
+    name: 'uni-background',
+    props: {
+        watermark: {
+            type: Boolean,
+            default: false
+        },
+        ...defaultProps$1
+    },
+    components: {},
+    setup(props) {
+        // 重用并且简化
+        // 抽离并且获得 styleProps
+        // const { styleProps, handleClick } = useComponentCommon(props, backgroundStylePropsNames)
+        const styleProps = useStylePick(props);
+        const handleClick = useComponentClick(props);
+        return {
+            styleProps,
+            handleClick
+        };
+    }
+});
+
+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$1(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_a_watermark = resolveComponent("a-watermark");
+
+  return (openBlock(), createElementBlock("div", {
+    style: normalizeStyle(_ctx.styleProps),
+    class: "uni-background-component"
+  }, [
+    (_ctx.watermark)
+      ? (openBlock(), createBlock(_component_a_watermark, {
+          key: 0,
+          content: "Unika",
+          class: "watermark"
+        }, {
+          default: withCtx(() => [
+            _hoisted_1$1
+          ]),
+          _: 1 /* STABLE */
+        }))
+      : createCommentVNode("v-if", true),
+    (_ctx.backgroundImage !== '')
+      ? (openBlock(), createElementBlock("img", {
+          key: 1,
+          src: _ctx.backgroundImage,
+          class: "bg-img"
+        }, 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", {
-    class: "final-page",
-    style: normalizeStyle(_ctx.page && _ctx.page.props)
+    style: normalizeStyle(_ctx.styleProps)
   }, [
-    (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.components, (item) => {
-      return (openBlock(), createElementBlock("div", {
-        key: item.id,
-        id: `component-${item.id}`
+    createElementVNode("div", _hoisted_1, [
+      createElementVNode("div", {
+        class: normalizeClass({ mrotate: _ctx.isPlaying, audio: true }),
+        onClick: _cache[0] || (_cache[0] = (...args) => (_ctx.togglePlay && _ctx.togglePlay(...args)))
       }, [
-        (openBlock(), createBlock(resolveDynamicComponent(item.name), normalizeProps(guardReactiveProps(item.props)), null, 16 /* FULL_PROPS */))
-      ], 8 /* PROPS */, _hoisted_1))
-    }), 128 /* KEYED_FRAGMENT */))
+        _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.__file = "src/components/SwiperPage/SwiperPage.vue";
+script.__scopeId = "data-v-99922522";
+script.__file = "src/components/UniMusic/UniMusic.vue";
 
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
 script.install = (app) => {
     app.component(script.name, script);
 };
 
 // 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) => {
@@ -3688,4 +3894,4 @@ var index = {
     install
 };
 
-export { script$1 as LongPage, script as SwiperPage, script$3 as UniImage, script$2 as UniShape, script$4 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

@@ -3420,9 +3420,6 @@
       textAlign: 'left',
       color: '#000000',
       backgroundColor: '',
-      display: 'flex',
-      alignItems: 'center',
-      justifyContent: 'center',
       ...commonDefaultProps
   };
   const imageDefaultProps = {
@@ -3433,6 +3430,23 @@
       backgroundColor: '',
       ...commonDefaultProps
   };
+  const backgroundDefaultProps = {
+      backgroundColor: '#ffffff',
+      backgroundImage: '',
+      backgroundSize: 'cover',
+      backgroundRepeat: 'no-repeat',
+      opacity: 1,
+      height: '735px',
+      position: 'absolute',
+      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 = {
@@ -3444,6 +3458,12 @@
       },
       'uni-shape': {
           props: shapeDefaultProps
+      },
+      'uni-background': {
+          props: backgroundDefaultProps
+      },
+      'uni-music': {
+          props: musicDefaultProps
       }
   };
   const isEditingProp = {
@@ -3491,12 +3511,12 @@
       },
       ...isEditingProp
   };
-  const defaultProps$1 = transformToComponentProps(componentsDefaultProps['uni-text'].props, extraProps);
+  const defaultProps$3 = transformToComponentProps(componentsDefaultProps['uni-text'].props, extraProps);
   // array that contains style props
-  var script$4 = vue.defineComponent({
+  var script$6 = vue.defineComponent({
       name: 'uni-text',
       props: {
-          ...defaultProps$1
+          ...defaultProps$3
       },
       setup(props) {
           const styleProps = useStylePick(props);
@@ -3508,7 +3528,7 @@
       }
   });
 
-  function render$4(_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),
@@ -3521,16 +3541,16 @@
     }, 8 /* PROPS */, ["onClick", "style"]))
   }
 
-  script$4.render = render$4;
-  script$4.__scopeId = "data-v-55ed80cb";
-  script$4.__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$4.install = (app) => {
-      app.component(script$4.name, script$4);
+  script$6.install = (app) => {
+      app.component(script$6.name, script$6);
   };
 
   // array that contains style props
-  var script$3 = vue.defineComponent({
+  var script$5 = vue.defineComponent({
       name: 'uni-image',
       props: transformToComponentProps(componentsDefaultProps['uni-image'].props, isEditingProp),
       setup(props) {
@@ -3543,32 +3563,32 @@
       }
   });
 
-  const _hoisted_1$2 = ["src"];
+  const _hoisted_1$4 = ["src"];
 
-  function render$3(_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$2))
+    }, null, 12 /* STYLE, PROPS */, _hoisted_1$4))
   }
 
-  script$3.render = render$3;
-  script$3.__scopeId = "data-v-03caca2f";
-  script$3.__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$3.install = (app) => {
-      app.component(script$3.name, script$3);
+  script$5.install = (app) => {
+      app.component(script$5.name, script$5);
   };
 
-  const defaultProps = transformToComponentProps(componentsDefaultProps['uni-shape'].props, isEditingProp);
+  const defaultProps$2 = transformToComponentProps(componentsDefaultProps['uni-shape'].props, isEditingProp);
   // array that contains style props
-  var script$2 = vue.defineComponent({
+  var script$4 = vue.defineComponent({
       name: 'uni-shape',
       props: {
-          ...defaultProps
+          ...defaultProps$2
       },
       setup(props) {
           const styleProps = useStylePick(props);
@@ -3580,7 +3600,7 @@
       }
   });
 
-  function render$2(_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),
@@ -3589,14 +3609,14 @@
     }, null, 4 /* STYLE */))
   }
 
-  script$2.render = render$2;
-  script$2.__file = "src/components/UniShape/UniShape.vue";
+  script$4.render = render$4;
+  script$4.__file = "src/components/UniShape/UniShape.vue";
 
-  script$2.install = (app) => {
-      app.component(script$2.name, script$2);
+  script$4.install = (app) => {
+      app.component(script$4.name, script$4);
   };
 
-  var script$1 = vue.defineComponent({
+  var script$3 = vue.defineComponent({
       name: 'long-page',
       props: {
           work: {
@@ -3609,9 +3629,9 @@
       }
   });
 
-  const _hoisted_1$1 = ["id"];
+  const _hoisted_1$3 = ["id"];
 
-  function render$1(_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} )
@@ -3622,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$1))
+        ], 8 /* PROPS */, _hoisted_1$3))
       }), 128 /* KEYED_FRAGMENT */))
     ], 4 /* STYLE */))
   }
 
-  script$1.render = render$1;
-  script$1.__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$1.install = (app) => {
-      app.component(script$1.name, script$1);
+  script$3.install = (app) => {
+      app.component(script$3.name, script$3);
   };
 
-  var script = vue.defineComponent({
+  var script$2 = vue.defineComponent({
       name: 'swiper-page',
       props: {
           page: {
@@ -3648,39 +3668,225 @@
       }
   });
 
-  const _hoisted_1 = ["id"];
+  const _hoisted_1$2 = { class: "swiper-wrapper" };
+
+  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$2, [
+        (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.slides, (slide, index) => {
+          return (vue.openBlock(), vue.createElementBlock("div", {
+            class: "swiper-slide",
+            key: index
+          }, [
+            vue.createVNode(_component_final_page, {
+              components: _ctx.page.components
+            }, null, 8 /* PROPS */, ["components"])
+          ]))
+        }), 128 /* KEYED_FRAGMENT */))
+      ])
+    ], 4 /* STYLE */))
+  }
+
+  script$2.render = render$2;
+  script$2.__file = "src/components/SwiperPage/SwiperPage.vue";
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  script$2.install = (app) => {
+      app.component(script$2.name, script$2);
+  };
+
+  const defaultProps$1 = transformToComponentProps(componentsDefaultProps['uni-background'].props, isEditingProp);
+  // array that contains style props
+  var script$1 = vue.defineComponent({
+      name: 'uni-background',
+      props: {
+          watermark: {
+              type: Boolean,
+              default: false
+          },
+          ...defaultProps$1
+      },
+      components: {},
+      setup(props) {
+          // 重用并且简化
+          // 抽离并且获得 styleProps
+          // const { styleProps, handleClick } = useComponentCommon(props, backgroundStylePropsNames)
+          const styleProps = useStylePick(props);
+          const handleClick = useComponentClick(props);
+          return {
+              styleProps,
+              handleClick
+          };
+      }
+  });
+
+  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$1(_ctx, _cache, $props, $setup, $data, $options) {
+    const _component_a_watermark = vue.resolveComponent("a-watermark");
+
+    return (vue.openBlock(), vue.createElementBlock("div", {
+      style: vue.normalizeStyle(_ctx.styleProps),
+      class: "uni-background-component"
+    }, [
+      (_ctx.watermark)
+        ? (vue.openBlock(), vue.createBlock(_component_a_watermark, {
+            key: 0,
+            content: "Unika",
+            class: "watermark"
+          }, {
+            default: vue.withCtx(() => [
+              _hoisted_1$1
+            ]),
+            _: 1 /* STABLE */
+          }))
+        : vue.createCommentVNode("v-if", true),
+      (_ctx.backgroundImage !== '')
+        ? (vue.openBlock(), vue.createElementBlock("img", {
+            key: 1,
+            src: _ctx.backgroundImage,
+            class: "bg-img"
+          }, 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", {
-      class: "final-page",
-      style: vue.normalizeStyle(_ctx.page && _ctx.page.props)
+      style: vue.normalizeStyle(_ctx.styleProps)
     }, [
-      (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(_ctx.components, (item) => {
-        return (vue.openBlock(), vue.createElementBlock("div", {
-          key: item.id,
-          id: `component-${item.id}`
+      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)))
         }, [
-          (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item.name), vue.normalizeProps(vue.guardReactiveProps(item.props)), null, 16 /* FULL_PROPS */))
-        ], 8 /* PROPS */, _hoisted_1))
-      }), 128 /* KEYED_FRAGMENT */))
+          _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.__file = "src/components/SwiperPage/SwiperPage.vue";
+  script.__scopeId = "data-v-99922522";
+  script.__file = "src/components/UniMusic/UniMusic.vue";
 
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
   script.install = (app) => {
       app.component(script.name, script);
   };
 
   // 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) => {
@@ -3692,11 +3898,13 @@
       install
   };
 
-  exports.LongPage = script$1;
-  exports.SwiperPage = script;
-  exports.UniImage = script$3;
-  exports.UniShape = script$2;
-  exports.UniText = script$4;
+  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.3",
+  "version": "1.0.5",
   "private": false,
   "main": "dist/unika-components.umd.js",
   "module": "dist/unika-components.esm.js",