unika-components 1.0.3 → 1.0.4

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/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,17 @@ 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 componentsDefaultProps: {
     'uni-text': {
         props: {
@@ -190,9 +198,6 @@ export declare const componentsDefaultProps: {
             textAlign: string;
             color: string;
             backgroundColor: string;
-            display: string;
-            alignItems: string;
-            justifyContent: string;
         };
     };
     'uni-image': {
@@ -241,6 +246,19 @@ 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;
+        };
+    };
 };
 export declare const isEditingProp: {
     isEditing: {

package/dist/src/index.d.ts

@@ -4,8 +4,9 @@ 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';
 declare const install: (app: App) => void;
-export { UniText, UniImage, UniShape, LongPage, SwiperPage, install };
+export { UniText, UniImage, UniShape, LongPage, SwiperPage, UniBackground, install };
 declare const _default: {
     install: (app: App<any>) => void;
 };

package/dist/unika-components.css

@@ -14,3 +14,27 @@ button.uni-text-component {
   box-sizing: border-box;
   white-space: pre-wrap;
 }
+
+  .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;
+  }

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 } 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,17 @@ const shapeDefaultProps = {
     backgroundColor: '',
     ...commonDefaultProps
 };
+const backgroundDefaultProps = {
+    backgroundColor: '#ffffff',
+    backgroundImage: '',
+    backgroundSize: 'cover',
+    backgroundRepeat: 'no-repeat',
+    opacity: 1,
+    height: '735px',
+    position: 'absolute',
+    left: '0px',
+    top: '0px'
+};
 // this contains all default props for all the components
 // useful for inserting new component into the store
 const componentsDefaultProps = {
@@ -3440,6 +3448,9 @@ const componentsDefaultProps = {
     },
     'uni-shape': {
         props: shapeDefaultProps
+    },
+    'uni-background': {
+        props: backgroundDefaultProps
     }
 };
 const isEditingProp = {
@@ -3487,12 +3498,12 @@ const extraProps = {
     },
     ...isEditingProp
 };
-const defaultProps$1 = transformToComponentProps(componentsDefaultProps['uni-text'].props, extraProps);
+const defaultProps$2 = transformToComponentProps(componentsDefaultProps['uni-text'].props, extraProps);
 // array that contains style props
-var script$4 = defineComponent({
+var script$5 = defineComponent({
     name: 'uni-text',
     props: {
-        ...defaultProps$1
+        ...defaultProps$2
     },
     setup(props) {
         const styleProps = useStylePick(props);
@@ -3504,7 +3515,7 @@ var script$4 = defineComponent({
     }
 });
 
-function render$4(_ctx, _cache, $props, $setup, $data, $options) {
+function render$5(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), {
     onClick: withModifiers(_ctx.handleClick, ["prevent"]),
     style: normalizeStyle(_ctx.styleProps),
@@ -3517,16 +3528,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$5.render = render$5;
+script$5.__scopeId = "data-v-55ed80cb";
+script$5.__file = "src/components/UniText/UniText.vue";
 
-script$4.install = (app) => {
-    app.component(script$4.name, script$4);
+script$5.install = (app) => {
+    app.component(script$5.name, script$5);
 };
 
 // array that contains style props
-var script$3 = defineComponent({
+var script$4 = defineComponent({
     name: 'uni-image',
     props: transformToComponentProps(componentsDefaultProps['uni-image'].props, isEditingProp),
     setup(props) {
@@ -3539,32 +3550,32 @@ var script$3 = defineComponent({
     }
 });
 
-const _hoisted_1$2 = ["src"];
+const _hoisted_1$3 = ["src"];
 
-function render$3(_ctx, _cache, $props, $setup, $data, $options) {
+function render$4(_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$3))
 }
 
-script$3.render = render$3;
-script$3.__scopeId = "data-v-03caca2f";
-script$3.__file = "src/components/UniImage/UniImage.vue";
+script$4.render = render$4;
+script$4.__scopeId = "data-v-03caca2f";
+script$4.__file = "src/components/UniImage/UniImage.vue";
 
-script$3.install = (app) => {
-    app.component(script$3.name, script$3);
+script$4.install = (app) => {
+    app.component(script$4.name, script$4);
 };
 
-const defaultProps = transformToComponentProps(componentsDefaultProps['uni-shape'].props, isEditingProp);
+const defaultProps$1 = transformToComponentProps(componentsDefaultProps['uni-shape'].props, isEditingProp);
 // array that contains style props
-var script$2 = defineComponent({
+var script$3 = defineComponent({
     name: 'uni-shape',
     props: {
-        ...defaultProps
+        ...defaultProps$1
     },
     setup(props) {
         const styleProps = useStylePick(props);
@@ -3576,7 +3587,7 @@ var script$2 = defineComponent({
     }
 });
 
-function render$2(_ctx, _cache, $props, $setup, $data, $options) {
+function render$3(_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 +3596,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$3.render = render$3;
+script$3.__file = "src/components/UniShape/UniShape.vue";
 
-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: 'long-page',
     props: {
         work: {
@@ -3605,9 +3616,9 @@ var script$1 = defineComponent({
     }
 });
 
-const _hoisted_1$1 = ["id"];
+const _hoisted_1$2 = ["id"];
 
-function render$1(_ctx, _cache, $props, $setup, $data, $options) {
+function render$2(_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 +3629,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$2))
     }), 128 /* KEYED_FRAGMENT */))
   ], 4 /* STYLE */))
 }
 
-script$1.render = render$1;
-script$1.__file = "src/components/LongPage/LongPage.vue";
+script$2.render = render$2;
+script$2.__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$2.install = (app) => {
+    app.component(script$2.name, script$2);
 };
 
-var script = defineComponent({
+var script$1 = defineComponent({
     name: 'swiper-page',
     props: {
         page: {
@@ -3644,34 +3655,107 @@ var script = defineComponent({
     }
 });
 
-const _hoisted_1 = ["id"];
+const _hoisted_1$1 = { class: "swiper-wrapper" };
+
+function render$1(_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, [
+      (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$1.render = render$1;
+script$1.__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);
+};
+
+const defaultProps = transformToComponentProps(componentsDefaultProps['uni-background'].props, isEditingProp);
+// array that contains style props
+var script = defineComponent({
+    name: 'uni-background',
+    props: {
+        watermark: {
+            type: Boolean,
+            default: false
+        },
+        ...defaultProps
+    },
+    components: {},
+    setup(props) {
+        // 重用并且简化
+        // 抽离并且获得 styleProps
+        // const { styleProps, handleClick } = useComponentCommon(props, backgroundStylePropsNames)
+        const styleProps = useStylePick(props);
+        const handleClick = useComponentClick(props);
+        return {
+            styleProps,
+            handleClick
+        };
+    }
+});
+
+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"];
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
+  const _component_a_watermark = resolveComponent("a-watermark");
+
   return (openBlock(), createElementBlock("div", {
-    class: "final-page",
-    style: normalizeStyle(_ctx.page && _ctx.page.props)
+    style: normalizeStyle(_ctx.styleProps),
+    class: "uni-background-component"
   }, [
-    (openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.components, (item) => {
-      return (openBlock(), createElementBlock("div", {
-        key: item.id,
-        id: `component-${item.id}`
-      }, [
-        (openBlock(), createBlock(resolveDynamicComponent(item.name), normalizeProps(guardReactiveProps(item.props)), null, 16 /* FULL_PROPS */))
-      ], 8 /* PROPS */, _hoisted_1))
-    }), 128 /* KEYED_FRAGMENT */))
+    (_ctx.watermark)
+      ? (openBlock(), createBlock(_component_a_watermark, {
+          key: 0,
+          content: "Unika",
+          class: "watermark"
+        }, {
+          default: withCtx(() => [
+            _hoisted_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))
+      : createCommentVNode("v-if", true)
   ], 4 /* STYLE */))
 }
 
 script.render = render;
-script.__file = "src/components/SwiperPage/SwiperPage.vue";
+script.__scopeId = "data-v-04e7238d";
+script.__file = "src/components/UniBackground/UniBackground.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$5,
     script$4,
     script$3,
     script$2,
@@ -3688,4 +3772,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$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 };

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,17 @@
       backgroundColor: '',
       ...commonDefaultProps
   };
+  const backgroundDefaultProps = {
+      backgroundColor: '#ffffff',
+      backgroundImage: '',
+      backgroundSize: 'cover',
+      backgroundRepeat: 'no-repeat',
+      opacity: 1,
+      height: '735px',
+      position: 'absolute',
+      left: '0px',
+      top: '0px'
+  };
   // this contains all default props for all the components
   // useful for inserting new component into the store
   const componentsDefaultProps = {
@@ -3444,6 +3452,9 @@
       },
       'uni-shape': {
           props: shapeDefaultProps
+      },
+      'uni-background': {
+          props: backgroundDefaultProps
       }
   };
   const isEditingProp = {
@@ -3491,12 +3502,12 @@
       },
       ...isEditingProp
   };
-  const defaultProps$1 = transformToComponentProps(componentsDefaultProps['uni-text'].props, extraProps);
+  const defaultProps$2 = transformToComponentProps(componentsDefaultProps['uni-text'].props, extraProps);
   // array that contains style props
-  var script$4 = vue.defineComponent({
+  var script$5 = vue.defineComponent({
       name: 'uni-text',
       props: {
-          ...defaultProps$1
+          ...defaultProps$2
       },
       setup(props) {
           const styleProps = useStylePick(props);
@@ -3508,7 +3519,7 @@
       }
   });
 
-  function render$4(_ctx, _cache, $props, $setup, $data, $options) {
+  function render$5(_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 +3532,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$5.render = render$5;
+  script$5.__scopeId = "data-v-55ed80cb";
+  script$5.__file = "src/components/UniText/UniText.vue";
 
-  script$4.install = (app) => {
-      app.component(script$4.name, script$4);
+  script$5.install = (app) => {
+      app.component(script$5.name, script$5);
   };
 
   // array that contains style props
-  var script$3 = vue.defineComponent({
+  var script$4 = vue.defineComponent({
       name: 'uni-image',
       props: transformToComponentProps(componentsDefaultProps['uni-image'].props, isEditingProp),
       setup(props) {
@@ -3543,32 +3554,32 @@
       }
   });
 
-  const _hoisted_1$2 = ["src"];
+  const _hoisted_1$3 = ["src"];
 
-  function render$3(_ctx, _cache, $props, $setup, $data, $options) {
+  function render$4(_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$3))
   }
 
-  script$3.render = render$3;
-  script$3.__scopeId = "data-v-03caca2f";
-  script$3.__file = "src/components/UniImage/UniImage.vue";
+  script$4.render = render$4;
+  script$4.__scopeId = "data-v-03caca2f";
+  script$4.__file = "src/components/UniImage/UniImage.vue";
 
-  script$3.install = (app) => {
-      app.component(script$3.name, script$3);
+  script$4.install = (app) => {
+      app.component(script$4.name, script$4);
   };
 
-  const defaultProps = transformToComponentProps(componentsDefaultProps['uni-shape'].props, isEditingProp);
+  const defaultProps$1 = transformToComponentProps(componentsDefaultProps['uni-shape'].props, isEditingProp);
   // array that contains style props
-  var script$2 = vue.defineComponent({
+  var script$3 = vue.defineComponent({
       name: 'uni-shape',
       props: {
-          ...defaultProps
+          ...defaultProps$1
       },
       setup(props) {
           const styleProps = useStylePick(props);
@@ -3580,7 +3591,7 @@
       }
   });
 
-  function render$2(_ctx, _cache, $props, $setup, $data, $options) {
+  function render$3(_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 +3600,14 @@
     }, null, 4 /* STYLE */))
   }
 
-  script$2.render = render$2;
-  script$2.__file = "src/components/UniShape/UniShape.vue";
+  script$3.render = render$3;
+  script$3.__file = "src/components/UniShape/UniShape.vue";
 
-  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: 'long-page',
       props: {
           work: {
@@ -3609,9 +3620,9 @@
       }
   });
 
-  const _hoisted_1$1 = ["id"];
+  const _hoisted_1$2 = ["id"];
 
-  function render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  function render$2(_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 +3633,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$2))
       }), 128 /* KEYED_FRAGMENT */))
     ], 4 /* STYLE */))
   }
 
-  script$1.render = render$1;
-  script$1.__file = "src/components/LongPage/LongPage.vue";
+  script$2.render = render$2;
+  script$2.__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$2.install = (app) => {
+      app.component(script$2.name, script$2);
   };
 
-  var script = vue.defineComponent({
+  var script$1 = vue.defineComponent({
       name: 'swiper-page',
       props: {
           page: {
@@ -3648,34 +3659,107 @@
       }
   });
 
-  const _hoisted_1 = ["id"];
+  const _hoisted_1$1 = { class: "swiper-wrapper" };
+
+  function render$1(_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.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$1.render = render$1;
+  script$1.__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);
+  };
+
+  const defaultProps = transformToComponentProps(componentsDefaultProps['uni-background'].props, isEditingProp);
+  // array that contains style props
+  var script = vue.defineComponent({
+      name: 'uni-background',
+      props: {
+          watermark: {
+              type: Boolean,
+              default: false
+          },
+          ...defaultProps
+      },
+      components: {},
+      setup(props) {
+          // 重用并且简化
+          // 抽离并且获得 styleProps
+          // const { styleProps, handleClick } = useComponentCommon(props, backgroundStylePropsNames)
+          const styleProps = useStylePick(props);
+          const handleClick = useComponentClick(props);
+          return {
+              styleProps,
+              handleClick
+          };
+      }
+  });
+
+  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"];
 
   function render(_ctx, _cache, $props, $setup, $data, $options) {
+    const _component_a_watermark = vue.resolveComponent("a-watermark");
+
     return (vue.openBlock(), vue.createElementBlock("div", {
-      class: "final-page",
-      style: vue.normalizeStyle(_ctx.page && _ctx.page.props)
+      style: vue.normalizeStyle(_ctx.styleProps),
+      class: "uni-background-component"
     }, [
-      (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.openBlock(), vue.createBlock(vue.resolveDynamicComponent(item.name), vue.normalizeProps(vue.guardReactiveProps(item.props)), null, 16 /* FULL_PROPS */))
-        ], 8 /* PROPS */, _hoisted_1))
-      }), 128 /* KEYED_FRAGMENT */))
+      (_ctx.watermark)
+        ? (vue.openBlock(), vue.createBlock(_component_a_watermark, {
+            key: 0,
+            content: "Unika",
+            class: "watermark"
+          }, {
+            default: vue.withCtx(() => [
+              _hoisted_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))
+        : vue.createCommentVNode("v-if", true)
     ], 4 /* STYLE */))
   }
 
   script.render = render;
-  script.__file = "src/components/SwiperPage/SwiperPage.vue";
+  script.__scopeId = "data-v-04e7238d";
+  script.__file = "src/components/UniBackground/UniBackground.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$5,
       script$4,
       script$3,
       script$2,
@@ -3692,11 +3776,12 @@
       install
   };
 
-  exports.LongPage = script$1;
-  exports.SwiperPage = script;
-  exports.UniImage = script$3;
-  exports.UniShape = script$2;
-  exports.UniText = script$4;
+  exports.LongPage = script$2;
+  exports.SwiperPage = script$1;
+  exports.UniBackground = script;
+  exports.UniImage = script$4;
+  exports.UniShape = script$3;
+  exports.UniText = script$5;
   exports["default"] = index;
   exports.install = install;
 

package/package.json

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