@smilekite/lego-bricks 1.0.4 → 1.0.6

package/README.md

@@ -1,8 +1,8 @@
-# SMILE LEGO 业务组件库
-
-## 特性
-* **typescript** 
-* Vue3
-* 单元测试
-* 提交发布前验证
+# SMILE LEGO 业务组件库
+
+## 特性
+* **typescript** 
+* Vue3
+* 单元测试
+* 提交发布前验证
 * travis 实现自动发布

package/dist/bundle.css

@@ -1,16 +1,16 @@
 
-.l-image-component[data-v-1e970aa2] {
-  max-width: 100%;
-}
-
-h2.l-text-component[data-v-6bf95b7a], p.l-text-component[data-v-6bf95b7a] {
+h2.l-text-component[data-v-6bf95b7a], p.l-text-component[data-v-6bf95b7a] {
   margin-bottom: 0;
 }
-button.l-text-component[data-v-6bf95b7a] {
-  padding: 5px 10px;
+button.l-text-component[data-v-6bf95b7a] {
+  padding: 5px 10px;
   cursor: pointer;
 }
-.l-text-component[data-v-6bf95b7a] {
-  box-sizing: border-box;
+.l-text-component[data-v-6bf95b7a] {
+  box-sizing: border-box;
   white-space: pre-wrap;
-}
+}
+
+.l-image-component[data-v-1e970aa2] {
+  max-width: 100%;
+}

package/dist/components/FinalPage/FinalPage.vue.d.ts

@@ -0,0 +1,20 @@
+import { PropType } from 'vue';
+import { ComponentData, PageData } from '../../defaultProps';
+declare const _default: import("vue").DefineComponent<{
+    page: {
+        type: PropType<PageData>;
+    };
+    components: {
+        type: PropType<ComponentData[]>;
+        required: true;
+    };
+}, unknown, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    page: {
+        type: PropType<PageData>;
+    };
+    components: {
+        type: PropType<ComponentData[]>;
+        required: true;
+    };
+}>>, {}, {}>;
+export default _default;

package/dist/components/FinalPage/index.d.ts

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

package/dist/components/LImage/LImage.vue.d.ts

@@ -1,2 +1,11 @@
-declare const _default: any;
+declare const _default: import("vue").DefineComponent<{
+    [x: string]: any;
+}, {
+    styleProps: import("vue").ComputedRef<Pick<any, string>>;
+    handleClick: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    [x: string]: any;
+}>>, {
+    [x: string]: any;
+}, {}>;
 export default _default;

package/dist/components/LShape/LShape.vue.d.ts

@@ -1,2 +1,11 @@
-declare const _default: any;
+declare const _default: import("vue").DefineComponent<{
+    [x: string]: any;
+}, {
+    styleProps: import("vue").ComputedRef<Pick<any, string>>;
+    handleClick: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    [x: string]: any;
+}>>, {
+    [x: string]: any;
+}, {}>;
 export default _default;

package/dist/components/LText/LText.vue.d.ts

@@ -1,2 +1,11 @@
-declare const _default: any;
+declare const _default: import("vue").DefineComponent<{
+    [x: string]: any;
+}, {
+    styleProps: import("vue").ComputedRef<Pick<any, string>>;
+    handleClick: () => void;
+}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    [x: string]: any;
+}>>, {
+    [x: string]: any;
+}, {}>;
 export default _default;

package/dist/defaultProps.d.ts

@@ -1,4 +1,34 @@
-export interface CommonComponentProps {
+export interface ComponentData {
+    props: {
+        [key: string]: any;
+    };
+    id: string;
+    name: string;
+    layerName?: string;
+    isHidden?: boolean;
+    isLocked?: boolean;
+}
+export interface PageData {
+    props: {
+        [key: string]: any;
+    };
+    setting: {
+        [key: string]: any;
+    };
+    id?: number;
+    title?: string;
+    desc?: string;
+    coverImg?: string;
+    uuid?: string;
+    latestPublishAt?: string;
+    updatedAt?: string;
+    isTemplate?: boolean;
+    isHot?: boolean;
+    isNew?: boolean;
+    author?: string;
+    status?: string;
+}
+export declare const commonDefaultProps: {
     actionType: string;
     url: string;
     height: string;
@@ -12,14 +42,31 @@ export interface CommonComponentProps {
     borderWidth: string;
     borderRadius: string;
     boxShadow: string;
-    opacity: string;
+    opacity: number;
+    position: string;
+    left: string;
+    top: string;
+    right: string;
+};
+export declare const textDefaultProps: {
+    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;
-}
-export declare const commonDefaultProps: CommonComponentProps;
-export interface TextComponentProps extends CommonComponentProps {
     text: string;
     fontSize: string;
     fontFamily: string;
@@ -30,28 +77,140 @@ export interface TextComponentProps extends CommonComponentProps {
     textAlign: string;
     color: string;
     backgroundColor: string;
-}
-export interface ImageComponentProps extends CommonComponentProps {
+};
+export declare const imageDefaultProps: {
+    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;
     src: string;
-}
-export interface ShapeComponentProps extends CommonComponentProps {
+};
+export declare const shapeDefaultProps: {
+    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;
     backgroundColor: string;
-    borderTop: string;
-    borderBottom: string;
-    borderLeft: string;
-    borderRight: string;
-}
-export declare type AllComponentProps = TextComponentProps & ImageComponentProps & ShapeComponentProps;
-export declare const textDefaultProps: TextComponentProps;
-export declare const imageDefaultProps: ImageComponentProps;
-export declare const shapeDefaultProps: ShapeComponentProps;
+};
+export declare const componentsDefaultProps: {
+    'l-text': {
+        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;
+            text: string;
+            fontSize: string;
+            fontFamily: string;
+            fontWeight: string;
+            fontStyle: string;
+            textDecoration: string;
+            lineHeight: string;
+            textAlign: string;
+            color: string;
+            backgroundColor: string;
+        };
+    };
+    'l-image': {
+        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;
+            src: string;
+        };
+    };
+    'l-shape': {
+        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;
+            backgroundColor: string;
+        };
+    };
+};
 export declare const isEditingProp: {
     isEditing: {
         type: BooleanConstructor;
         default: boolean;
     };
 };
-export declare const textStylePropNames: string[];
-export declare const imageStylePropsNames: string[];
-export declare const shapeStylePropsNames: string[];
-export declare const transformToComponentProps: <T extends {}>(props: T) => any;
+export declare const transformToComponentProps: (props: {
+    [key: string]: any;
+}, extraProps?: {
+    [key: string]: any;
+} | undefined) => {
+    [x: string]: any;
+};
+export default componentsDefaultProps;

package/dist/hooks/useComponentClick.d.ts

@@ -0,0 +1,2 @@
+declare const useComponentClick: (props: any) => () => void;
+export default useComponentClick;

package/dist/hooks/useStylePick.d.ts

@@ -0,0 +1,3 @@
+export declare const defaultStyles: string[];
+declare const useStylePick: (props: any, pickStyles?: string[]) => import("vue").ComputedRef<Pick<any, string>>;
+export default useStylePick;

package/dist/index.d.ts

@@ -1,11 +1,10 @@
-import { App } from 'vue';
-export { textDefaultProps, textStylePropNames, TextComponentProps, imageDefaultProps, imageStylePropsNames, ImageComponentProps, shapeDefaultProps, shapeStylePropsNames, ShapeComponentProps, AllComponentProps } from './defaultProps';
 import LText from './components/LText';
 import LImage from './components/LImage';
 import LShape from './components/LShape';
-declare const install: (app: App) => void;
-export { LText, LImage, LShape, install };
+import FinalPage from './components/FinalPage';
+declare const install: (app: any) => void;
+export { install, LText, LImage, LShape, FinalPage };
 declare const _default: {
-    install: (app: App<any>) => void;
+    install: (app: any) => void;
 };
 export default _default;

package/dist/lego-bricks.esm.js

@@ -1,13 +1,14 @@
-import { without, mapValues, pick } from 'lodash-es';
-import { computed, defineComponent, openBlock, createBlock, resolveDynamicComponent, normalizeStyle, withCtx, createTextVNode, toDisplayString, createElementBlock, withModifiers } from 'vue';
+import { computed, defineComponent, openBlock, createBlock, resolveDynamicComponent, withModifiers, normalizeStyle, withCtx, createTextVNode, toDisplayString, createElementBlock, Fragment, renderList, mergeProps } from 'vue';
+import { mapValues, pick, without } from 'lodash-es';
 
+// the common default props, all the components should have these props
 const commonDefaultProps = {
     // actions
     actionType: '',
     url: '',
     // size
     height: '',
-    width: '373px',
+    width: '318px',
     paddingLeft: '0px',
     paddingRight: '0px',
     paddingTop: '0px',
@@ -19,12 +20,12 @@ const commonDefaultProps = {
     borderRadius: '0',
     // shadow and opacity
     boxShadow: '0 0 0 #000000',
-    opacity: '1',
+    opacity: 1,
     // position and x,y
     position: 'absolute',
     left: '0',
     top: '0',
-    right: '0'
+    right: '0',
 };
 const textDefaultProps = {
     // basic props - font styles
@@ -38,67 +39,81 @@ const textDefaultProps = {
     textAlign: 'left',
     color: '#000000',
     backgroundColor: '',
-    ...commonDefaultProps
+    ...commonDefaultProps,
 };
 const imageDefaultProps = {
-    src: 'test.url',
-    ...commonDefaultProps
+    src: '',
+    ...commonDefaultProps,
 };
 const shapeDefaultProps = {
     backgroundColor: '',
-    borderTop: '',
-    borderBottom: '',
-    borderLeft: '',
-    borderRight: '',
-    ...commonDefaultProps
+    ...commonDefaultProps,
+};
+// this contains all default props for all the components
+// useful for inserting new component into the store
+const componentsDefaultProps = {
+    'l-text': {
+        props: textDefaultProps,
+    },
+    'l-image': {
+        props: imageDefaultProps,
+    },
+    'l-shape': {
+        props: shapeDefaultProps,
+    },
 };
 const isEditingProp = {
     isEditing: {
         type: Boolean,
-        default: false
-    }
+        default: false,
+    },
 };
-const textStylePropNames = without(Object.keys(textDefaultProps), 'actionType', 'url', 'text');
-const imageStylePropsNames = without(Object.keys(imageDefaultProps), 'actionType', 'url', 'src');
-const shapeStylePropsNames = without(Object.keys(shapeDefaultProps), 'actionType', 'url');
-const transformToComponentProps = (props) => {
-    const mapProps = mapValues(props, (item) => {
+const transformToComponentProps = (props, extraProps) => {
+    const mapProps = mapValues(props, item => {
         return {
             type: item.constructor,
-            default: item
+            default: item,
         };
     });
-    return { ...mapProps, ...isEditingProp };
+    if (extraProps) {
+        return { ...mapProps, ...extraProps };
+    }
+    else {
+        return mapProps;
+    }
+};
+
+const defaultStyles = without(Object.keys(textDefaultProps), 'actionType', 'url', 'text');
+const useStylePick = (props, pickStyles = defaultStyles) => {
+    return computed(() => pick(props, pickStyles));
 };
 
-const useComponentCommon = (props, picks) => {
-    const styleProps = computed(() => pick(props, picks));
+const useComponentClick = (props) => {
     const handleClick = () => {
-        if (props.actionType === 'url' && props.url && !props.isEditing) {
+        if (props.actionType && props.url && !props.isEditing) {
             window.location.href = props.url;
         }
     };
-    return {
-        styleProps,
-        handleClick
-    };
+    return handleClick;
 };
 
-const defaultProps = transformToComponentProps(textDefaultProps);
+const extraProps = {
+    tag: {
+        type: String,
+        default: 'div'
+    },
+    ...isEditingProp
+};
+const defaultProps = transformToComponentProps(componentsDefaultProps['l-text'].props, extraProps);
 // array that contains style props
 var script = defineComponent({
     name: 'l-text',
     props: {
-        tag: {
-            type: String,
-            default: 'div'
-        },
         ...defaultProps
     },
     setup(props) {
-        // 重用并且简化
-        // 抽离并且获得 styleProps
-        const { styleProps, handleClick } = useComponentCommon(props, textStylePropNames);
+        const styleProps = useStylePick(props);
+        const handleClick = useComponentClick(props);
         return {
             styleProps,
             handleClick
@@ -108,15 +123,15 @@ var script = defineComponent({
 
 function render(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), {
+    onClick: withModifiers(_ctx.handleClick, ["prevent"]),
     style: normalizeStyle(_ctx.styleProps),
-    class: "l-text-component",
-    onClick: _ctx.handleClick
+    class: "l-text-component"
   }, {
     default: withCtx(() => [
       createTextVNode(toDisplayString(_ctx.text), 1 /* TEXT */)
     ]),
     _: 1 /* STABLE */
-  }, 8 /* PROPS */, ["style", "onClick"]))
+  }, 8 /* PROPS */, ["onClick", "style"]))
 }
 
 script.render = render;
@@ -127,17 +142,13 @@ script.install = (app) => {
     app.component(script.name, script);
 };
 
-const defaultProps$1 = transformToComponentProps(imageDefaultProps);
 // array that contains style props
 var script$1 = defineComponent({
     name: 'l-image',
-    props: {
-        ...defaultProps$1
-    },
+    props: transformToComponentProps(componentsDefaultProps['l-image'].props, isEditingProp),
     setup(props) {
-        // 重用并且简化
-        // 抽离并且获得 styleProps
-        const { styleProps, handleClick } = useComponentCommon(props, imageStylePropsNames);
+        const styleProps = useStylePick(props);
+        const handleClick = useComponentClick(props);
         return {
             styleProps,
             handleClick
@@ -149,10 +160,11 @@ const _hoisted_1 = ["src"];
 
 function render$1(_ctx, _cache, $props, $setup, $data, $options) {
   return (openBlock(), createElementBlock("img", {
+    src: _ctx.src,
     style: normalizeStyle(_ctx.styleProps),
+    draggable: false,
     class: "l-image-component",
-    onClick: _cache[0] || (_cache[0] = withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"])),
-    src: _ctx.src
+    onClick: _cache[0] || (_cache[0] = withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"]))
   }, null, 12 /* STYLE, PROPS */, _hoisted_1))
 }
 
@@ -164,17 +176,16 @@ script$1.install = (app) => {
     app.component(script$1.name, script$1);
 };
 
-const defaultProps$2 = transformToComponentProps(shapeDefaultProps);
+const defaultProps$1 = transformToComponentProps(componentsDefaultProps['l-shape'].props, isEditingProp);
 // array that contains style props
 var script$2 = defineComponent({
     name: 'l-shape',
     props: {
-        ...defaultProps$2
+        ...defaultProps$1
     },
     setup(props) {
-        // 重用并且简化
-        // 抽离并且获得 styleProps
-        const { styleProps, handleClick } = useComponentCommon(props, shapeStylePropsNames);
+        const styleProps = useStylePick(props);
+        const handleClick = useComponentClick(props);
         return {
             styleProps,
             handleClick
@@ -184,9 +195,10 @@ var script$2 = defineComponent({
 
 function render$2(_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),
     class: "l-shape-component",
-    onClick: _cache[0] || (_cache[0] = withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"]))
+    draggable: false
   }, null, 4 /* STYLE */))
 }
 
@@ -197,19 +209,53 @@ script$2.install = (app) => {
     app.component(script$2.name, script$2);
 };
 
-const components = [
-    script,
-    script$1,
-    script$2
-];
+var script$3 = defineComponent({
+    name: 'final-page',
+    props: {
+        page: {
+            type: Object
+        },
+        components: {
+            type: Array,
+            required: true
+        }
+    }
+});
+
+const _hoisted_1$1 = ["id"];
+
+function render$3(_ctx, _cache, $props, $setup, $data, $options) {
+  return (openBlock(), createElementBlock("div", {
+    class: "final-page",
+    style: normalizeStyle(_ctx.page && _ctx.page.props)
+  }, [
+    (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), mergeProps({ ref_for: true }, item.props), null, 16 /* FULL_PROPS */))
+      ], 8 /* PROPS */, _hoisted_1$1))
+    }), 128 /* KEYED_FRAGMENT */))
+  ], 4 /* STYLE */))
+}
+
+script$3.render = render$3;
+script$3.__file = "src/components/FinalPage/FinalPage.vue";
+
+script$3.install = (app) => {
+    app.component(script$3.name, script$3);
+};
+
+const components = [script, script$1, script$2, script$3];
 const install = (app) => {
-    components.forEach(component => {
-        app.component(component.name, component);
+    components.map(component => {
+        app.use(component);
     });
 };
 var index = {
-    install
+    install,
 };
 
 export default index;
-export { script$1 as LImage, script$2 as LShape, script as LText, imageDefaultProps, imageStylePropsNames, install, shapeDefaultProps, shapeStylePropsNames, textDefaultProps, textStylePropNames };
+export { script$3 as FinalPage, script$1 as LImage, script$2 as LShape, script as LText, install };

package/dist/lego-bricks.umd.js

@@ -1,16 +1,17 @@
 (function (global, factory) {
-  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('lodash-es'), require('vue')) :
-  typeof define === 'function' && define.amd ? define(['exports', 'lodash-es', 'vue'], factory) :
-  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.LegoComponents = {}, global._, global.Vue));
-}(this, (function (exports, lodashEs, vue) { 'use strict';
+  typeof exports === 'object' && typeof module !== 'undefined' ? factory(exports, require('vue'), require('lodash-es')) :
+  typeof define === 'function' && define.amd ? define(['exports', 'vue', 'lodash-es'], factory) :
+  (global = typeof globalThis !== 'undefined' ? globalThis : global || self, factory(global.LegoComponents = {}, global.Vue, global._));
+}(this, (function (exports, vue, lodashEs) { 'use strict';
 
+  // the common default props, all the components should have these props
   const commonDefaultProps = {
       // actions
       actionType: '',
       url: '',
       // size
       height: '',
-      width: '373px',
+      width: '318px',
       paddingLeft: '0px',
       paddingRight: '0px',
       paddingTop: '0px',
@@ -22,12 +23,12 @@
       borderRadius: '0',
       // shadow and opacity
       boxShadow: '0 0 0 #000000',
-      opacity: '1',
+      opacity: 1,
       // position and x,y
       position: 'absolute',
       left: '0',
       top: '0',
-      right: '0'
+      right: '0',
   };
   const textDefaultProps = {
       // basic props - font styles
@@ -41,67 +42,81 @@
       textAlign: 'left',
       color: '#000000',
       backgroundColor: '',
-      ...commonDefaultProps
+      ...commonDefaultProps,
   };
   const imageDefaultProps = {
-      src: 'test.url',
-      ...commonDefaultProps
+      src: '',
+      ...commonDefaultProps,
   };
   const shapeDefaultProps = {
       backgroundColor: '',
-      borderTop: '',
-      borderBottom: '',
-      borderLeft: '',
-      borderRight: '',
-      ...commonDefaultProps
+      ...commonDefaultProps,
+  };
+  // this contains all default props for all the components
+  // useful for inserting new component into the store
+  const componentsDefaultProps = {
+      'l-text': {
+          props: textDefaultProps,
+      },
+      'l-image': {
+          props: imageDefaultProps,
+      },
+      'l-shape': {
+          props: shapeDefaultProps,
+      },
   };
   const isEditingProp = {
       isEditing: {
           type: Boolean,
-          default: false
-      }
+          default: false,
+      },
   };
-  const textStylePropNames = lodashEs.without(Object.keys(textDefaultProps), 'actionType', 'url', 'text');
-  const imageStylePropsNames = lodashEs.without(Object.keys(imageDefaultProps), 'actionType', 'url', 'src');
-  const shapeStylePropsNames = lodashEs.without(Object.keys(shapeDefaultProps), 'actionType', 'url');
-  const transformToComponentProps = (props) => {
-      const mapProps = lodashEs.mapValues(props, (item) => {
+  const transformToComponentProps = (props, extraProps) => {
+      const mapProps = lodashEs.mapValues(props, item => {
           return {
               type: item.constructor,
-              default: item
+              default: item,
           };
       });
-      return { ...mapProps, ...isEditingProp };
+      if (extraProps) {
+          return { ...mapProps, ...extraProps };
+      }
+      else {
+          return mapProps;
+      }
+  };
+
+  const defaultStyles = lodashEs.without(Object.keys(textDefaultProps), 'actionType', 'url', 'text');
+  const useStylePick = (props, pickStyles = defaultStyles) => {
+      return vue.computed(() => lodashEs.pick(props, pickStyles));
   };
 
-  const useComponentCommon = (props, picks) => {
-      const styleProps = vue.computed(() => lodashEs.pick(props, picks));
+  const useComponentClick = (props) => {
       const handleClick = () => {
-          if (props.actionType === 'url' && props.url && !props.isEditing) {
+          if (props.actionType && props.url && !props.isEditing) {
               window.location.href = props.url;
           }
       };
-      return {
-          styleProps,
-          handleClick
-      };
+      return handleClick;
   };
 
-  const defaultProps = transformToComponentProps(textDefaultProps);
+  const extraProps = {
+      tag: {
+          type: String,
+          default: 'div'
+      },
+      ...isEditingProp
+  };
+  const defaultProps = transformToComponentProps(componentsDefaultProps['l-text'].props, extraProps);
   // array that contains style props
   var script = vue.defineComponent({
       name: 'l-text',
       props: {
-          tag: {
-              type: String,
-              default: 'div'
-          },
           ...defaultProps
       },
       setup(props) {
-          // 重用并且简化
-          // 抽离并且获得 styleProps
-          const { styleProps, handleClick } = useComponentCommon(props, textStylePropNames);
+          const styleProps = useStylePick(props);
+          const handleClick = useComponentClick(props);
           return {
               styleProps,
               handleClick
@@ -111,15 +126,15 @@
 
   function render(_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),
-      class: "l-text-component",
-      onClick: _ctx.handleClick
+      class: "l-text-component"
     }, {
       default: vue.withCtx(() => [
         vue.createTextVNode(vue.toDisplayString(_ctx.text), 1 /* TEXT */)
       ]),
       _: 1 /* STABLE */
-    }, 8 /* PROPS */, ["style", "onClick"]))
+    }, 8 /* PROPS */, ["onClick", "style"]))
   }
 
   script.render = render;
@@ -130,17 +145,13 @@
       app.component(script.name, script);
   };
 
-  const defaultProps$1 = transformToComponentProps(imageDefaultProps);
   // array that contains style props
   var script$1 = vue.defineComponent({
       name: 'l-image',
-      props: {
-          ...defaultProps$1
-      },
+      props: transformToComponentProps(componentsDefaultProps['l-image'].props, isEditingProp),
       setup(props) {
-          // 重用并且简化
-          // 抽离并且获得 styleProps
-          const { styleProps, handleClick } = useComponentCommon(props, imageStylePropsNames);
+          const styleProps = useStylePick(props);
+          const handleClick = useComponentClick(props);
           return {
               styleProps,
               handleClick
@@ -152,10 +163,11 @@
 
   function render$1(_ctx, _cache, $props, $setup, $data, $options) {
     return (vue.openBlock(), vue.createElementBlock("img", {
+      src: _ctx.src,
       style: vue.normalizeStyle(_ctx.styleProps),
+      draggable: false,
       class: "l-image-component",
-      onClick: _cache[0] || (_cache[0] = vue.withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"])),
-      src: _ctx.src
+      onClick: _cache[0] || (_cache[0] = vue.withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"]))
     }, null, 12 /* STYLE, PROPS */, _hoisted_1))
   }
 
@@ -167,17 +179,16 @@
       app.component(script$1.name, script$1);
   };
 
-  const defaultProps$2 = transformToComponentProps(shapeDefaultProps);
+  const defaultProps$1 = transformToComponentProps(componentsDefaultProps['l-shape'].props, isEditingProp);
   // array that contains style props
   var script$2 = vue.defineComponent({
       name: 'l-shape',
       props: {
-          ...defaultProps$2
+          ...defaultProps$1
       },
       setup(props) {
-          // 重用并且简化
-          // 抽离并且获得 styleProps
-          const { styleProps, handleClick } = useComponentCommon(props, shapeStylePropsNames);
+          const styleProps = useStylePick(props);
+          const handleClick = useComponentClick(props);
           return {
               styleProps,
               handleClick
@@ -187,9 +198,10 @@
 
   function render$2(_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),
       class: "l-shape-component",
-      onClick: _cache[0] || (_cache[0] = vue.withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"]))
+      draggable: false
     }, null, 4 /* STYLE */))
   }
 
@@ -200,31 +212,60 @@
       app.component(script$2.name, script$2);
   };
 
-  const components = [
-      script,
-      script$1,
-      script$2
-  ];
+  var script$3 = vue.defineComponent({
+      name: 'final-page',
+      props: {
+          page: {
+              type: Object
+          },
+          components: {
+              type: Array,
+              required: true
+          }
+      }
+  });
+
+  const _hoisted_1$1 = ["id"];
+
+  function render$3(_ctx, _cache, $props, $setup, $data, $options) {
+    return (vue.openBlock(), vue.createElementBlock("div", {
+      class: "final-page",
+      style: vue.normalizeStyle(_ctx.page && _ctx.page.props)
+    }, [
+      (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.mergeProps({ ref_for: true }, item.props), null, 16 /* FULL_PROPS */))
+        ], 8 /* PROPS */, _hoisted_1$1))
+      }), 128 /* KEYED_FRAGMENT */))
+    ], 4 /* STYLE */))
+  }
+
+  script$3.render = render$3;
+  script$3.__file = "src/components/FinalPage/FinalPage.vue";
+
+  script$3.install = (app) => {
+      app.component(script$3.name, script$3);
+  };
+
+  const components = [script, script$1, script$2, script$3];
   const install = (app) => {
-      components.forEach(component => {
-          app.component(component.name, component);
+      components.map(component => {
+          app.use(component);
       });
   };
   var index = {
-      install
+      install,
   };
 
+  exports.FinalPage = script$3;
   exports.LImage = script$1;
   exports.LShape = script$2;
   exports.LText = script;
   exports.default = index;
-  exports.imageDefaultProps = imageDefaultProps;
-  exports.imageStylePropsNames = imageStylePropsNames;
   exports.install = install;
-  exports.shapeDefaultProps = shapeDefaultProps;
-  exports.shapeStylePropsNames = shapeStylePropsNames;
-  exports.textDefaultProps = textDefaultProps;
-  exports.textStylePropNames = textStylePropNames;
 
   Object.defineProperty(exports, '__esModule', { value: true });
 

package/dist/main.d.ts

@@ -0,0 +1 @@
+export {};

package/package.json

@@ -1,76 +1,76 @@
-{
-  "name": "@smilekite/lego-bricks",
-  "version": "1.0.4",
-  "author": "smiley",
-  "scripts": {
-    "serve": "vue-cli-service serve",
-    "build": "npm run clean && npm run build:esm && npm run build:umd",
-    "test:watch": "vue-cli-service test:unit --watch",
-    "test": "vue-cli-service test:unit",
-    "lint": "vue-cli-service lint --max-warnings 5",
-    "build:esm": "rollup --config build/rollup.esm.config.js",
-    "build:umd": "rollup --config build/rollup.umd.config.js",
-    "clean": "rimraf ./dist",
-    "prepublishOnly": "npm run lint && npm run test&& npm run build"
-  },
-  "husky": {
-    "hooks": {
-      "pre-commit": "npm run lint && npm run test"
-    }
-  },
-  "main": "dist/lego-bricks.umd.js",
-  "module": "dist/lego-bricks.esm.js",
-  "files": [
-    "dist"
-  ],
-  "dependencies": {
-    "core-js": "^3.6.5",
-    "lodash-es": "^4.17.20"
-  },
-  "devDependencies": {
-    "@rollup/plugin-node-resolve": "^11.1.1",
-    "@rollup/plugin-typescript": "^8.1.1",
-    "@types/jest": "^24.0.19",
-    "@types/lodash-es": "^4.17.4",
-    "@typescript-eslint/eslint-plugin": "^2.33.0",
-    "@typescript-eslint/parser": "^2.33.0",
-    "@vue/cli-plugin-babel": "~4.5.0",
-    "@vue/cli-plugin-eslint": "~4.5.0",
-    "@vue/cli-plugin-typescript": "~4.5.0",
-    "@vue/cli-plugin-unit-jest": "~4.5.11",
-    "@vue/cli-service": "~4.5.0",
-    "@vue/compiler-sfc": "^3.0.0",
-    "@vue/eslint-config-typescript": "~5.1.0",
-    "@vue/test-utils": "2.0.0-alpha.8",
-    "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^7.0.0",
-    "husky": "^4.3.8",
-    "rimraf": "^3.0.2",
-    "rollup": "^2.38.5",
-    "rollup-plugin-css-only": "^3.1.0",
-    "rollup-plugin-typescript2": "^0.29.0",
-    "rollup-plugin-vue": "^6.0.0",
-    "typescript": "^3.9.3",
-    "vue": "^3.0.0",
-    "vue-jest": "5.0.0-alpha.9"
-  },
-  "peerDependencies": {
-    "vue": "^3.0.0"
-  },
-  "homepage": "https://github.com/Kitesource/lego-bricks",
-  "keywords": [
-    "Component",
-    "UI",
-    "Vue3"
-  ],
-  "license": "MIT",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/Kitesource/lego-bricks"
-  },
-  "types": "dist/index.d.ts",
-  "publishConfig": {
-    "access": "public",
-    "registry": "https://registry.npmjs.org/"
-  }
+{
+  "name": "@smilekite/lego-bricks",
+  "version": "1.0.6",
+  "author": "smiley",
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "npm run clean && npm run build:esm && npm run build:umd",
+    "test:watch": "vue-cli-service test:unit --watch",
+    "test": "vue-cli-service test:unit",
+    "lint": "vue-cli-service lint",
+    "build:esm": "rollup --config build/rollup.esm.config.js",
+    "build:umd": "rollup --config build/rollup.umd.config.js",
+    "clean": "rimraf ./dist",
+    "prepublishOnly": "npm run lint && npm run test && npm run build"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "npm run lint && npm run test"
+    }
+  },
+  "main": "dist/lego-bricks.umd.js",
+  "module": "dist/lego-bricks.esm.js",
+  "files": [
+    "dist"
+  ],
+  "dependencies": {
+    "core-js": "^3.6.5",
+    "lodash-es": "^4.17.20"
+  },
+  "devDependencies": {
+    "@rollup/plugin-node-resolve": "^11.1.1",
+    "@rollup/plugin-typescript": "^8.1.1",
+    "@types/jest": "^24.0.19",
+    "@types/lodash-es": "^4.17.4",
+    "@typescript-eslint/eslint-plugin": "^2.33.0",
+    "@typescript-eslint/parser": "^2.33.0",
+    "@vue/cli-plugin-babel": "~4.5.0",
+    "@vue/cli-plugin-eslint": "~4.5.0",
+    "@vue/cli-plugin-typescript": "~4.5.0",
+    "@vue/cli-plugin-unit-jest": "~4.5.11",
+    "@vue/cli-service": "~4.5.0",
+    "@vue/compiler-sfc": "^3.0.0",
+    "@vue/eslint-config-typescript": "~5.1.0",
+    "@vue/test-utils": "2.0.0-alpha.8",
+    "eslint": "^6.7.2",
+    "eslint-plugin-vue": "^7.0.0",
+    "husky": "^4.3.8",
+    "rimraf": "^3.0.2",
+    "rollup": "^2.38.5",
+    "rollup-plugin-css-only": "^3.1.0",
+    "rollup-plugin-typescript2": "^0.29.0",
+    "rollup-plugin-vue": "^6.0.0",
+    "typescript": "^4.3.5",
+    "vue": "~3.4.0",
+    "vue-jest": "5.0.0-alpha.9"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "homepage": "https://github.com/Kitesource/lego-bricks",
+  "keywords": [
+    "Component",
+    "UI",
+    "Vue3"
+  ],
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/Kitesource/lego-bricks"
+  },
+  "types": "dist/index.d.ts",
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org/"
+  }
 }

package/dist/hooks/useComponentCommon.d.ts

@@ -1,8 +0,0 @@
-import { CommonComponentProps } from '../defaultProps';
-declare const useComponentCommon: (props: Readonly<Partial<CommonComponentProps & {
-    isEditing: boolean;
-}>>, picks: string[]) => {
-    styleProps: import("vue").ComputedRef<any>;
-    handleClick: () => void;
-};
-export default useComponentCommon;