@smilekite/lego-bricks 1.0.6 → 1.0.7

package/README.md

@@ -1,8 +1,142 @@
 # SMILE LEGO 业务组件库
 
+SMILE LEGO 是一个基于 Vue3 + TypeScript 开发的业务组件库，提供了一系列可复用的 UI 组件，帮助开发者快速构建现代化的 Web 应用。
+
 ## 特性
-* **typescript** 
-* Vue3
-* 单元测试
-* 提交发布前验证
-* travis 实现自动发布
+* ✅ **TypeScript 支持**：完整的类型定义，提供良好的开发体验
+* ✅ **Vue3 组合式 API**：采用最新的 Vue3 特性，支持组合式 API
+* ✅ **单元测试**：完善的测试用例，确保组件质量
+* ✅ **提交发布前验证**：自动化的代码检查和测试流程
+* ✅ **Travis CI 自动发布**：持续集成，自动发布新版本
+* ✅ **轻量化**：按需引入，减少打包体积
+
+## 安装
+
+使用 npm 安装：
+
+```bash
+npm install @smilekite/lego-bricks
+```
+
+使用 yarn 安装：
+
+```bash
+yarn add @smilekite/lego-bricks
+```
+
+## 快速开始
+
+### 全局引入
+
+```javascript
+import { createApp } from 'vue'
+import LegoBricks from '@smilekite/lego-bricks'
+import '@smilekite/lego-bricks/dist/bundle.css'
+import App from './App.vue'
+
+const app = createApp(App)
+app.use(LegoBricks)
+app.mount('#app')
+```
+
+### 按需引入
+
+```javascript
+import { createApp } from 'vue'
+import { LText, LImage, LShape } from '@smilekite/lego-bricks'
+import '@smilekite/lego-bricks/dist/bundle.css'
+import App from './App.vue'
+
+const app = createApp(App)
+app.component('LText', LText)
+app.component('LImage', LImage)
+app.component('LShape', LShape)
+app.mount('#app')
+```
+
+## 组件列表
+
+### LText
+文本组件，用于展示和编辑文本内容。
+
+### LImage
+图片组件，用于展示和处理图片。
+
+### LShape
+形状组件，用于绘制各种几何形状。
+
+### FinalPage
+最终页面组件，用于展示最终的页面效果。
+
+## 开发指南
+
+### 克隆仓库
+
+```bash
+git clone https://github.com/Kitesource/lego-bricks.git
+cd lego-bricks
+```
+
+### 安装依赖
+
+```bash
+npm install
+```
+
+### 启动开发服务器
+
+```bash
+npm run serve
+```
+
+### 构建组件库
+
+```bash
+npm run build
+```
+
+### 运行单元测试
+
+```bash
+# 运行所有测试
+npm run test
+
+# 监听模式运行测试
+npm run test:watch
+```
+
+### 代码检查
+
+```bash
+npm run lint
+```
+
+### 发布
+```
+npm run publish --access public
+```
+
+## 项目结构
+
+```
+lego-bricks/
+├── build/              # 构建配置文件
+├── dist/               # 构建输出目录
+├── src/                # 源代码目录
+│   ├── components/     # 组件目录
+│   ├── hooks/          # 自定义 hooks
+│   ├── App.vue         # 应用入口组件
+│   ├── index.ts        # 组件库入口
+│   └── main.ts         # 开发环境入口
+├── tests/              # 测试目录
+├── package.json        # 项目配置
+└── README.md           # 项目说明
+```
+
+## 贡献指南
+
+1. Fork 仓库
+2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
+3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
+4. 推送到分支 (`git push origin feature/AmazingFeature`)
+5. 开启 Pull Request

package/dist/bundle.css

@@ -1,4 +1,8 @@
 
+.l-image-component[data-v-1e970aa2] {
+  max-width: 100%;
+}
+
 h2.l-text-component[data-v-6bf95b7a], p.l-text-component[data-v-6bf95b7a] {
   margin-bottom: 0;
 }
@@ -10,7 +14,3 @@ button.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/LImage/LImage.vue.d.ts

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

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

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

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

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

package/dist/defaultProps.d.ts

@@ -28,7 +28,7 @@ export interface PageData {
     author?: string;
     status?: string;
 }
-export declare const commonDefaultProps: {
+export interface CommonComponentProps {
     actionType: string;
     url: string;
     height: string;
@@ -42,31 +42,14 @@ export declare const commonDefaultProps: {
     borderWidth: string;
     borderRadius: string;
     boxShadow: 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;
+    opacity: string;
     position: string;
     left: string;
     top: string;
     right: string;
+}
+export declare const commonDefaultProps: CommonComponentProps;
+export interface TextComponentProps extends CommonComponentProps {
     text: string;
     fontSize: string;
     fontFamily: string;
@@ -77,140 +60,29 @@ export declare const textDefaultProps: {
     textAlign: string;
     color: string;
     backgroundColor: string;
-};
-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;
+}
+export interface ImageComponentProps extends CommonComponentProps {
     src: string;
-};
-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;
+}
+export interface ShapeComponentProps extends CommonComponentProps {
     backgroundColor: string;
-};
-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 type AllComponentProps = TextComponentProps & ImageComponentProps & ShapeComponentProps;
+export declare const textDefaultProps: TextComponentProps;
+export declare const imageDefaultProps: ImageComponentProps;
+export declare const shapeDefaultProps: ShapeComponentProps;
 export declare const isEditingProp: {
     isEditing: {
         type: BooleanConstructor;
         default: boolean;
     };
 };
-export declare const transformToComponentProps: (props: {
-    [key: string]: any;
-}, extraProps?: {
-    [key: string]: any;
-} | undefined) => {
-    [x: string]: any;
+export declare const textStylePropNames: string[];
+export declare const imageStylePropsNames: string[];
+export declare const shapeStylePropsNames: string[];
+export declare const transformToComponentProps: <T extends {}>(props: T) => {
+    isEditing: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 };
-export default componentsDefaultProps;

package/dist/hooks/useComponentCommon.d.ts

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

package/dist/index.d.ts

@@ -1,10 +1,12 @@
+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';
 import FinalPage from './components/FinalPage';
-declare const install: (app: any) => void;
-export { install, LText, LImage, LShape, FinalPage };
+declare const install: (app: App) => void;
+export { LText, LImage, LShape, install, FinalPage };
 declare const _default: {
-    install: (app: any) => void;
+    install: (app: App<any>) => void;
 };
 export default _default;

package/dist/lego-bricks.esm.js

@@ -1,14 +1,13 @@
-import { computed, defineComponent, openBlock, createBlock, resolveDynamicComponent, withModifiers, normalizeStyle, withCtx, createTextVNode, toDisplayString, createElementBlock, Fragment, renderList, mergeProps } from 'vue';
-import { mapValues, pick, without } from 'lodash-es';
+import { without, mapValues, pick } from 'lodash-es';
+import { computed, defineComponent, openBlock, createBlock, resolveDynamicComponent, normalizeStyle, withCtx, createTextVNode, toDisplayString, createElementBlock, withModifiers, Fragment, renderList, mergeProps } from 'vue';
 
-// the common default props, all the components should have these props
 const commonDefaultProps = {
     // actions
     actionType: '',
     url: '',
     // size
     height: '',
-    width: '318px',
+    width: '373px',
     paddingLeft: '0px',
     paddingRight: '0px',
     paddingTop: '0px',
@@ -20,7 +19,7 @@ const commonDefaultProps = {
     borderRadius: '0',
     // shadow and opacity
     boxShadow: '0 0 0 #000000',
-    opacity: 1,
+    opacity: '1',
     // position and x,y
     position: 'absolute',
     left: '0',
@@ -49,73 +48,59 @@ const shapeDefaultProps = {
     backgroundColor: '',
     ...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,
     },
 };
-const transformToComponentProps = (props, extraProps) => {
-    const mapProps = mapValues(props, item => {
+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) => {
         return {
             type: item.constructor,
             default: item,
         };
     });
-    if (extraProps) {
-        return { ...mapProps, ...extraProps };
-    }
-    else {
-        return mapProps;
-    }
+    return { ...mapProps, ...isEditingProp };
 };
 
-const defaultStyles = without(Object.keys(textDefaultProps), 'actionType', 'url', 'text');
-const useStylePick = (props, pickStyles = defaultStyles) => {
-    return computed(() => pick(props, pickStyles));
-};
-
-const useComponentClick = (props) => {
+const useComponentCommon = (props, picks) => {
+    const styleProps = computed(() => pick(props, picks));
     const handleClick = () => {
-        if (props.actionType && props.url && !props.isEditing) {
+        if (props.actionType === 'url' && props.url && !props.isEditing) {
             window.location.href = props.url;
         }
     };
-    return handleClick;
+    return {
+        styleProps,
+        handleClick
+    };
 };
 
-const extraProps = {
-    tag: {
-        type: String,
-        default: 'div'
-    },
-    ...isEditingProp
-};
-const defaultProps = transformToComponentProps(componentsDefaultProps['l-text'].props, extraProps);
+const defaultProps = transformToComponentProps(textDefaultProps);
 // array that contains style props
 var script = defineComponent({
     name: 'l-text',
     props: {
+        tag: {
+            type: String,
+            default: 'div'
+        },
+        text: {
+            type: String,
+            default: ''
+        },
         ...defaultProps
     },
     setup(props) {
-        const styleProps = useStylePick(props);
-        const handleClick = useComponentClick(props);
+        // 重用并且简化
+        // 抽离并且获得 styleProps
+        const { styleProps, handleClick } = useComponentCommon(props, textStylePropNames);
         return {
-            styleProps,
+            styleProps: styleProps.value,
             handleClick
         };
     }
@@ -123,15 +108,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"
+    class: "l-text-component",
+    onClick: _ctx.handleClick
   }, {
     default: withCtx(() => [
       createTextVNode(toDisplayString(_ctx.text), 1 /* TEXT */)
     ]),
     _: 1 /* STABLE */
-  }, 8 /* PROPS */, ["onClick", "style"]))
+  }, 8 /* PROPS */, ["style", "onClick"]))
 }
 
 script.render = render;
@@ -142,29 +127,36 @@ 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: transformToComponentProps(componentsDefaultProps['l-image'].props, isEditingProp),
+    props: {
+        src: {
+            type: String,
+            default: ''
+        },
+        ...defaultProps$1
+    },
     setup(props) {
-        const styleProps = useStylePick(props);
-        const handleClick = useComponentClick(props);
+        // 重用并且简化
+        // 抽离并且获得 styleProps
+        const { styleProps, handleClick } = useComponentCommon(props, imageStylePropsNames);
         return {
-            styleProps,
+            styleProps: styleProps.value,
             handleClick
         };
-    }
+    },
 });
 
 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"]))
+    onClick: _cache[0] || (_cache[0] = withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"])),
+    src: _ctx.src
   }, null, 12 /* STYLE, PROPS */, _hoisted_1))
 }
 
@@ -176,18 +168,19 @@ script$1.install = (app) => {
     app.component(script$1.name, script$1);
 };
 
-const defaultProps$1 = transformToComponentProps(componentsDefaultProps['l-shape'].props, isEditingProp);
+const defaultProps$2 = transformToComponentProps(shapeDefaultProps);
 // array that contains style props
 var script$2 = defineComponent({
     name: 'l-shape',
     props: {
-        ...defaultProps$1
+        ...defaultProps$2
     },
     setup(props) {
-        const styleProps = useStylePick(props);
-        const handleClick = useComponentClick(props);
+        // 重用并且简化
+        // 抽离并且获得 styleProps
+        const { styleProps, handleClick } = useComponentCommon(props, shapeStylePropsNames);
         return {
-            styleProps,
+            styleProps: styleProps.value,
             handleClick
         };
     }
@@ -195,10 +188,9 @@ 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",
-    draggable: false
+    onClick: _cache[0] || (_cache[0] = withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"]))
   }, null, 4 /* STYLE */))
 }
 
@@ -247,15 +239,19 @@ script$3.install = (app) => {
     app.component(script$3.name, script$3);
 };
 
-const components = [script, script$1, script$2, script$3];
+const components = [
+    script,
+    script$1,
+    script$2
+];
 const install = (app) => {
-    components.map(component => {
-        app.use(component);
+    components.forEach((component) => {
+        app.component(component.name, component);
     });
 };
 var index = {
-    install,
+    install
 };
 
 export default index;
-export { script$3 as FinalPage, script$1 as LImage, script$2 as LShape, script as LText, install };
+export { script$3 as FinalPage, script$1 as LImage, script$2 as LShape, script as LText, imageDefaultProps, imageStylePropsNames, install, shapeDefaultProps, shapeStylePropsNames, textDefaultProps, textStylePropNames };

package/dist/lego-bricks.umd.js

@@ -1,17 +1,16 @@
 (function (global, factory) {
-  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';
+  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';
 
-  // the common default props, all the components should have these props
   const commonDefaultProps = {
       // actions
       actionType: '',
       url: '',
       // size
       height: '',
-      width: '318px',
+      width: '373px',
       paddingLeft: '0px',
       paddingRight: '0px',
       paddingTop: '0px',
@@ -23,7 +22,7 @@
       borderRadius: '0',
       // shadow and opacity
       boxShadow: '0 0 0 #000000',
-      opacity: 1,
+      opacity: '1',
       // position and x,y
       position: 'absolute',
       left: '0',
@@ -52,73 +51,59 @@
       backgroundColor: '',
       ...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,
       },
   };
-  const transformToComponentProps = (props, extraProps) => {
-      const mapProps = lodashEs.mapValues(props, item => {
+  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) => {
           return {
               type: item.constructor,
               default: item,
           };
       });
-      if (extraProps) {
-          return { ...mapProps, ...extraProps };
-      }
-      else {
-          return mapProps;
-      }
+      return { ...mapProps, ...isEditingProp };
   };
 
-  const defaultStyles = lodashEs.without(Object.keys(textDefaultProps), 'actionType', 'url', 'text');
-  const useStylePick = (props, pickStyles = defaultStyles) => {
-      return vue.computed(() => lodashEs.pick(props, pickStyles));
-  };
-
-  const useComponentClick = (props) => {
+  const useComponentCommon = (props, picks) => {
+      const styleProps = vue.computed(() => lodashEs.pick(props, picks));
       const handleClick = () => {
-          if (props.actionType && props.url && !props.isEditing) {
+          if (props.actionType === 'url' && props.url && !props.isEditing) {
               window.location.href = props.url;
           }
       };
-      return handleClick;
+      return {
+          styleProps,
+          handleClick
+      };
   };
 
-  const extraProps = {
-      tag: {
-          type: String,
-          default: 'div'
-      },
-      ...isEditingProp
-  };
-  const defaultProps = transformToComponentProps(componentsDefaultProps['l-text'].props, extraProps);
+  const defaultProps = transformToComponentProps(textDefaultProps);
   // array that contains style props
   var script = vue.defineComponent({
       name: 'l-text',
       props: {
+          tag: {
+              type: String,
+              default: 'div'
+          },
+          text: {
+              type: String,
+              default: ''
+          },
           ...defaultProps
       },
       setup(props) {
-          const styleProps = useStylePick(props);
-          const handleClick = useComponentClick(props);
+          // 重用并且简化
+          // 抽离并且获得 styleProps
+          const { styleProps, handleClick } = useComponentCommon(props, textStylePropNames);
           return {
-              styleProps,
+              styleProps: styleProps.value,
               handleClick
           };
       }
@@ -126,15 +111,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"
+      class: "l-text-component",
+      onClick: _ctx.handleClick
     }, {
       default: vue.withCtx(() => [
         vue.createTextVNode(vue.toDisplayString(_ctx.text), 1 /* TEXT */)
       ]),
       _: 1 /* STABLE */
-    }, 8 /* PROPS */, ["onClick", "style"]))
+    }, 8 /* PROPS */, ["style", "onClick"]))
   }
 
   script.render = render;
@@ -145,29 +130,36 @@
       app.component(script.name, script);
   };
 
+  const defaultProps$1 = transformToComponentProps(imageDefaultProps);
   // array that contains style props
   var script$1 = vue.defineComponent({
       name: 'l-image',
-      props: transformToComponentProps(componentsDefaultProps['l-image'].props, isEditingProp),
+      props: {
+          src: {
+              type: String,
+              default: ''
+          },
+          ...defaultProps$1
+      },
       setup(props) {
-          const styleProps = useStylePick(props);
-          const handleClick = useComponentClick(props);
+          // 重用并且简化
+          // 抽离并且获得 styleProps
+          const { styleProps, handleClick } = useComponentCommon(props, imageStylePropsNames);
           return {
-              styleProps,
+              styleProps: styleProps.value,
               handleClick
           };
-      }
+      },
   });
 
   const _hoisted_1 = ["src"];
 
   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"]))
+      onClick: _cache[0] || (_cache[0] = vue.withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"])),
+      src: _ctx.src
     }, null, 12 /* STYLE, PROPS */, _hoisted_1))
   }
 
@@ -179,18 +171,19 @@
       app.component(script$1.name, script$1);
   };
 
-  const defaultProps$1 = transformToComponentProps(componentsDefaultProps['l-shape'].props, isEditingProp);
+  const defaultProps$2 = transformToComponentProps(shapeDefaultProps);
   // array that contains style props
   var script$2 = vue.defineComponent({
       name: 'l-shape',
       props: {
-          ...defaultProps$1
+          ...defaultProps$2
       },
       setup(props) {
-          const styleProps = useStylePick(props);
-          const handleClick = useComponentClick(props);
+          // 重用并且简化
+          // 抽离并且获得 styleProps
+          const { styleProps, handleClick } = useComponentCommon(props, shapeStylePropsNames);
           return {
-              styleProps,
+              styleProps: styleProps.value,
               handleClick
           };
       }
@@ -198,10 +191,9 @@
 
   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",
-      draggable: false
+      onClick: _cache[0] || (_cache[0] = vue.withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"]))
     }, null, 4 /* STYLE */))
   }
 
@@ -250,14 +242,18 @@
       app.component(script$3.name, script$3);
   };
 
-  const components = [script, script$1, script$2, script$3];
+  const components = [
+      script,
+      script$1,
+      script$2
+  ];
   const install = (app) => {
-      components.map(component => {
-          app.use(component);
+      components.forEach((component) => {
+          app.component(component.name, component);
       });
   };
   var index = {
-      install,
+      install
   };
 
   exports.FinalPage = script$3;
@@ -265,7 +261,13 @@
   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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@smilekite/lego-bricks",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "author": "smiley",
   "scripts": {
     "serve": "vue-cli-service serve",

package/dist/hooks/useComponentClick.d.ts

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

package/dist/hooks/useStylePick.d.ts

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