hy-lego-bricks 0.1.0

package/README.md

@@ -0,0 +1,24 @@
+# lego-bricks
+
+## Project setup
+```
+pnpm install
+```
+
+### Compiles and hot-reloads for development
+```
+pnpm run serve
+```
+
+### Compiles and minifies for production
+```
+pnpm run build
+```
+
+### Lints and fixes files
+```
+pnpm run lint
+```
+
+### Customize configuration
+See [Configuration Reference](https://cli.vuejs.org/config/).

package/dist/bundle.css

@@ -0,0 +1,20 @@
+
+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;
+  cursor: pointer;
+}
+.l-text-component[data-v-6bf95b7a] {
+  box-sizing: border-box;
+  white-space: pre-wrap;
+  position: relative !important;
+}
+
+
+.l-image-component[data-v-1e970aa2] {
+  max-width: 100%;
+  position: relative !important;
+}
+

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

@@ -0,0 +1,190 @@
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    src: {
+        type: StringConstructor;
+        default: string;
+    };
+    actionType: {
+        type: StringConstructor;
+        default: string;
+    };
+    url: {
+        type: StringConstructor;
+        default: string;
+    };
+    height: {
+        type: StringConstructor;
+        default: string;
+    };
+    width: {
+        type: StringConstructor;
+        default: string;
+    };
+    paddingLeft: {
+        type: StringConstructor;
+        default: string;
+    };
+    paddingRight: {
+        type: StringConstructor;
+        default: string;
+    };
+    paddingTop: {
+        type: StringConstructor;
+        default: string;
+    };
+    paddingBottom: {
+        type: StringConstructor;
+        default: string;
+    };
+    borderStyle: {
+        type: StringConstructor;
+        default: string;
+    };
+    borderColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    borderWidth: {
+        type: StringConstructor;
+        default: string;
+    };
+    borderRadius: {
+        type: StringConstructor;
+        default: string;
+    };
+    boxShadow: {
+        type: StringConstructor;
+        default: string;
+    };
+    opacity: {
+        type: StringConstructor;
+        default: string;
+    };
+    position: {
+        type: StringConstructor;
+        default: string;
+    };
+    left: {
+        type: StringConstructor;
+        default: string;
+    };
+    top: {
+        type: StringConstructor;
+        default: string;
+    };
+    right: {
+        type: StringConstructor;
+        default: string;
+    };
+    isEditing: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {
+    styleProps: import("vue").ComputedRef<Partial<Readonly<Partial<import("../../defaultProps").CommonComponentProps & {
+        isEditing: boolean;
+    }>>>>;
+    handleClick: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    src: {
+        type: StringConstructor;
+        default: string;
+    };
+    actionType: {
+        type: StringConstructor;
+        default: string;
+    };
+    url: {
+        type: StringConstructor;
+        default: string;
+    };
+    height: {
+        type: StringConstructor;
+        default: string;
+    };
+    width: {
+        type: StringConstructor;
+        default: string;
+    };
+    paddingLeft: {
+        type: StringConstructor;
+        default: string;
+    };
+    paddingRight: {
+        type: StringConstructor;
+        default: string;
+    };
+    paddingTop: {
+        type: StringConstructor;
+        default: string;
+    };
+    paddingBottom: {
+        type: StringConstructor;
+        default: string;
+    };
+    borderStyle: {
+        type: StringConstructor;
+        default: string;
+    };
+    borderColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    borderWidth: {
+        type: StringConstructor;
+        default: string;
+    };
+    borderRadius: {
+        type: StringConstructor;
+        default: string;
+    };
+    boxShadow: {
+        type: StringConstructor;
+        default: string;
+    };
+    opacity: {
+        type: StringConstructor;
+        default: string;
+    };
+    position: {
+        type: StringConstructor;
+        default: string;
+    };
+    left: {
+        type: StringConstructor;
+        default: string;
+    };
+    top: {
+        type: StringConstructor;
+        default: string;
+    };
+    right: {
+        type: StringConstructor;
+        default: string;
+    };
+    isEditing: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    src: string;
+    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: string;
+    position: string;
+    left: string;
+    top: string;
+    right: string;
+    isEditing: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,2 @@
+import LImage from "./LImage.vue";
+export default LImage;

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

@@ -0,0 +1,190 @@
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    backgroundColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    actionType: {
+        type: StringConstructor;
+        default: string;
+    };
+    url: {
+        type: StringConstructor;
+        default: string;
+    };
+    height: {
+        type: StringConstructor;
+        default: string;
+    };
+    width: {
+        type: StringConstructor;
+        default: string;
+    };
+    paddingLeft: {
+        type: StringConstructor;
+        default: string;
+    };
+    paddingRight: {
+        type: StringConstructor;
+        default: string;
+    };
+    paddingTop: {
+        type: StringConstructor;
+        default: string;
+    };
+    paddingBottom: {
+        type: StringConstructor;
+        default: string;
+    };
+    borderStyle: {
+        type: StringConstructor;
+        default: string;
+    };
+    borderColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    borderWidth: {
+        type: StringConstructor;
+        default: string;
+    };
+    borderRadius: {
+        type: StringConstructor;
+        default: string;
+    };
+    boxShadow: {
+        type: StringConstructor;
+        default: string;
+    };
+    opacity: {
+        type: StringConstructor;
+        default: string;
+    };
+    position: {
+        type: StringConstructor;
+        default: string;
+    };
+    left: {
+        type: StringConstructor;
+        default: string;
+    };
+    top: {
+        type: StringConstructor;
+        default: string;
+    };
+    right: {
+        type: StringConstructor;
+        default: string;
+    };
+    isEditing: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>, {
+    styleProps: import("vue").ComputedRef<Partial<Readonly<Partial<import("../../defaultProps").CommonComponentProps & {
+        isEditing: boolean;
+    }>>>>;
+    handleClick: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    backgroundColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    actionType: {
+        type: StringConstructor;
+        default: string;
+    };
+    url: {
+        type: StringConstructor;
+        default: string;
+    };
+    height: {
+        type: StringConstructor;
+        default: string;
+    };
+    width: {
+        type: StringConstructor;
+        default: string;
+    };
+    paddingLeft: {
+        type: StringConstructor;
+        default: string;
+    };
+    paddingRight: {
+        type: StringConstructor;
+        default: string;
+    };
+    paddingTop: {
+        type: StringConstructor;
+        default: string;
+    };
+    paddingBottom: {
+        type: StringConstructor;
+        default: string;
+    };
+    borderStyle: {
+        type: StringConstructor;
+        default: string;
+    };
+    borderColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    borderWidth: {
+        type: StringConstructor;
+        default: string;
+    };
+    borderRadius: {
+        type: StringConstructor;
+        default: string;
+    };
+    boxShadow: {
+        type: StringConstructor;
+        default: string;
+    };
+    opacity: {
+        type: StringConstructor;
+        default: string;
+    };
+    position: {
+        type: StringConstructor;
+        default: string;
+    };
+    left: {
+        type: StringConstructor;
+        default: string;
+    };
+    top: {
+        type: StringConstructor;
+        default: string;
+    };
+    right: {
+        type: StringConstructor;
+        default: string;
+    };
+    isEditing: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+}>> & Readonly<{}>, {
+    backgroundColor: string;
+    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: string;
+    position: string;
+    left: string;
+    top: string;
+    right: string;
+    isEditing: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,2 @@
+import LShape from "./LShape.vue";
+export default LShape;

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

@@ -0,0 +1,280 @@
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    text: {
+        type: StringConstructor;
+        default: string;
+    };
+    fontSize: {
+        type: StringConstructor;
+        default: string;
+    };
+    fontFamily: {
+        type: StringConstructor;
+        default: string;
+    };
+    fontWeight: {
+        type: StringConstructor;
+        default: string;
+    };
+    fontStyle: {
+        type: StringConstructor;
+        default: string;
+    };
+    textDecoration: {
+        type: StringConstructor;
+        default: string;
+    };
+    lineHeight: {
+        type: StringConstructor;
+        default: string;
+    };
+    textAlign: {
+        type: StringConstructor;
+        default: string;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    backgroundColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    actionType: {
+        type: StringConstructor;
+        default: string;
+    };
+    url: {
+        type: StringConstructor;
+        default: string;
+    };
+    height: {
+        type: StringConstructor;
+        default: string;
+    };
+    width: {
+        type: StringConstructor;
+        default: string;
+    };
+    paddingLeft: {
+        type: StringConstructor;
+        default: string;
+    };
+    paddingRight: {
+        type: StringConstructor;
+        default: string;
+    };
+    paddingTop: {
+        type: StringConstructor;
+        default: string;
+    };
+    paddingBottom: {
+        type: StringConstructor;
+        default: string;
+    };
+    borderStyle: {
+        type: StringConstructor;
+        default: string;
+    };
+    borderColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    borderWidth: {
+        type: StringConstructor;
+        default: string;
+    };
+    borderRadius: {
+        type: StringConstructor;
+        default: string;
+    };
+    boxShadow: {
+        type: StringConstructor;
+        default: string;
+    };
+    opacity: {
+        type: StringConstructor;
+        default: string;
+    };
+    position: {
+        type: StringConstructor;
+        default: string;
+    };
+    left: {
+        type: StringConstructor;
+        default: string;
+    };
+    top: {
+        type: StringConstructor;
+        default: string;
+    };
+    right: {
+        type: StringConstructor;
+        default: string;
+    };
+    isEditing: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+}>, {
+    styleProps: import("vue").ComputedRef<Partial<Readonly<Partial<import("@/defaultProps").CommonComponentProps & {
+        isEditing: boolean;
+    }>>>>;
+    handleClick: () => void;
+}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    text: {
+        type: StringConstructor;
+        default: string;
+    };
+    fontSize: {
+        type: StringConstructor;
+        default: string;
+    };
+    fontFamily: {
+        type: StringConstructor;
+        default: string;
+    };
+    fontWeight: {
+        type: StringConstructor;
+        default: string;
+    };
+    fontStyle: {
+        type: StringConstructor;
+        default: string;
+    };
+    textDecoration: {
+        type: StringConstructor;
+        default: string;
+    };
+    lineHeight: {
+        type: StringConstructor;
+        default: string;
+    };
+    textAlign: {
+        type: StringConstructor;
+        default: string;
+    };
+    color: {
+        type: StringConstructor;
+        default: string;
+    };
+    backgroundColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    actionType: {
+        type: StringConstructor;
+        default: string;
+    };
+    url: {
+        type: StringConstructor;
+        default: string;
+    };
+    height: {
+        type: StringConstructor;
+        default: string;
+    };
+    width: {
+        type: StringConstructor;
+        default: string;
+    };
+    paddingLeft: {
+        type: StringConstructor;
+        default: string;
+    };
+    paddingRight: {
+        type: StringConstructor;
+        default: string;
+    };
+    paddingTop: {
+        type: StringConstructor;
+        default: string;
+    };
+    paddingBottom: {
+        type: StringConstructor;
+        default: string;
+    };
+    borderStyle: {
+        type: StringConstructor;
+        default: string;
+    };
+    borderColor: {
+        type: StringConstructor;
+        default: string;
+    };
+    borderWidth: {
+        type: StringConstructor;
+        default: string;
+    };
+    borderRadius: {
+        type: StringConstructor;
+        default: string;
+    };
+    boxShadow: {
+        type: StringConstructor;
+        default: string;
+    };
+    opacity: {
+        type: StringConstructor;
+        default: string;
+    };
+    position: {
+        type: StringConstructor;
+        default: string;
+    };
+    left: {
+        type: StringConstructor;
+        default: string;
+    };
+    top: {
+        type: StringConstructor;
+        default: string;
+    };
+    right: {
+        type: StringConstructor;
+        default: string;
+    };
+    isEditing: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+    tag: {
+        type: StringConstructor;
+        default: string;
+    };
+}>> & Readonly<{}>, {
+    text: string;
+    fontSize: string;
+    fontFamily: string;
+    fontWeight: string;
+    fontStyle: string;
+    textDecoration: string;
+    lineHeight: string;
+    textAlign: string;
+    color: string;
+    backgroundColor: string;
+    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: string;
+    position: string;
+    left: string;
+    top: string;
+    right: string;
+    tag: string;
+    isEditing: boolean;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

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

@@ -0,0 +1,2 @@
+import LText from "./LText.vue";
+export default LText;

package/dist/defaultProps.d.ts

@@ -0,0 +1,61 @@
+export interface CommonComponentProps {
+    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: 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;
+    fontWeight: string;
+    fontStyle: string;
+    textDecoration: string;
+    lineHeight: string;
+    textAlign: string;
+    color: string;
+    backgroundColor: string;
+}
+export interface ImageComponentProps extends CommonComponentProps {
+    src: string;
+}
+export interface ShapeComponentProps extends CommonComponentProps {
+    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 textStylePropNames: string[];
+export declare const imageStylePropsNames: string[];
+export declare const shapeStylePropsNames: string[];
+export declare const transformToComponentProps: <T extends {}>(props: T) => { [P in keyof T]: {
+    type: StringConstructor;
+    default: T[keyof T];
+}; } & {
+    isEditing: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
+};

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/hy-lego-bricks.esm.js

@@ -0,0 +1,192 @@
+import { computed, defineComponent, openBlock, createBlock, resolveDynamicComponent, normalizeStyle, withCtx, createTextVNode, toDisplayString, createElementBlock, withModifiers } from 'vue';
+import { pick, without, mapValues } from 'lodash-es';
+
+const useComponentCommon = (props, picks) => {
+    const styleProps = computed(() => pick(props, picks));
+    const handleClick = () => {
+        if (props.actionType === "url" && props.url && !props.isEditing) {
+            window.location.href = props.url;
+        }
+    };
+    return {
+        styleProps,
+        handleClick,
+    };
+};
+
+const commonDefaultProps = {
+    // actions
+    actionType: '',
+    url: '',
+    // size
+    height: '',
+    width: '373px',
+    paddingLeft: '0px',
+    paddingRight: '0px',
+    paddingTop: '0px',
+    paddingBottom: '0px',
+    // border type
+    borderStyle: 'none',
+    borderColor: '#000',
+    borderWidth: '0',
+    borderRadius: '0',
+    // shadow and opacity
+    boxShadow: '0 0 0 #000000',
+    opacity: '1',
+    // position and x,y
+    position: 'absolute',
+    left: '0',
+    top: '0',
+    right: '0'
+};
+const textDefaultProps = {
+    // basic props - font styles
+    text: '正文内容',
+    fontSize: '14px',
+    fontFamily: '',
+    fontWeight: 'normal',
+    fontStyle: 'normal',
+    textDecoration: 'none',
+    lineHeight: '1',
+    textAlign: 'left',
+    color: '#000000',
+    backgroundColor: '',
+    ...commonDefaultProps
+};
+const imageDefaultProps = {
+    src: 'test.url',
+    ...commonDefaultProps
+};
+const shapeDefaultProps = {
+    backgroundColor: '',
+    ...commonDefaultProps
+};
+const isEditingProp = {
+    isEditing: {
+        type: Boolean,
+        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(imageDefaultProps), 'actionType', 'url');
+const transformToComponentProps = (props) => {
+    const mapProps = mapValues(props, (item) => {
+        return {
+            type: item.constructor,
+            default: item
+        };
+    });
+    return { ...mapProps, ...isEditingProp };
+};
+
+const defaultProps$2 = transformToComponentProps(textDefaultProps);
+// array that contains style props
+var script$2 = defineComponent({
+    name: 'l-text',
+    props: {
+        tag: {
+            type: String,
+            default: 'div'
+        },
+        ...defaultProps$2
+    },
+    setup(props) {
+        // 重用并且简化
+        // 抽离并且获得 styleProps
+        const { styleProps, handleClick } = useComponentCommon(props, textStylePropNames);
+        return {
+            styleProps,
+            handleClick
+        };
+    }
+});
+
+function render$2(_ctx, _cache, $props, $setup, $data, $options) {
+  return (openBlock(), createBlock(resolveDynamicComponent(_ctx.tag), {
+    style: normalizeStyle(_ctx.styleProps),
+    class: "l-text-component",
+    onClick: _ctx.handleClick
+  }, {
+    default: withCtx(() => [
+      createTextVNode(toDisplayString(_ctx.text), 1 /* TEXT */)
+    ]),
+    _: 1 /* STABLE */
+  }, 8 /* PROPS */, ["style", "onClick"]))
+}
+
+script$2.render = render$2;
+script$2.__scopeId = "data-v-6bf95b7a";
+script$2.__file = "src/components/LText/LText.vue";
+
+const defaultProps$1 = transformToComponentProps(imageDefaultProps);
+// array that contains style props
+var script$1 = defineComponent({
+    name: 'l-image',
+    props: {
+        ...defaultProps$1
+    },
+    setup(props) {
+        // 重用并且简化
+        // 抽离并且获得 styleProps
+        const { styleProps, handleClick } = useComponentCommon(props, imageStylePropsNames);
+        return {
+            styleProps,
+            handleClick
+        };
+    }
+});
+
+const _hoisted_1 = ["src"];
+
+function render$1(_ctx, _cache, $props, $setup, $data, $options) {
+  return (openBlock(), createElementBlock("img", {
+    style: normalizeStyle(_ctx.styleProps),
+    class: "l-image-component",
+    onClick: _cache[0] || (_cache[0] = withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"])),
+    src: _ctx.src
+  }, null, 12 /* STYLE, PROPS */, _hoisted_1))
+}
+
+script$1.render = render$1;
+script$1.__scopeId = "data-v-1e970aa2";
+script$1.__file = "src/components/LImage/LImage.vue";
+
+const defaultProps = transformToComponentProps(shapeDefaultProps);
+// array that contains style props
+var script = defineComponent({
+    name: 'l-shape',
+    props: {
+        ...defaultProps
+    },
+    setup(props) {
+        // 重用并且简化
+        // 抽离并且获得 styleProps
+        const { styleProps, handleClick } = useComponentCommon(props, shapeStylePropsNames);
+        return {
+            styleProps,
+            handleClick
+        };
+    }
+});
+
+function render(_ctx, _cache, $props, $setup, $data, $options) {
+  return (openBlock(), createElementBlock("div", {
+    style: normalizeStyle(_ctx.styleProps),
+    class: "l-shape-component",
+    onClick: _cache[0] || (_cache[0] = withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"]))
+  }, null, 4 /* STYLE */))
+}
+
+script.render = render;
+script.__file = "src/components/LShape/LShape.vue";
+
+const components = [script$2, script$1, script];
+function install(app) {
+    components.forEach((component) => {
+        app.component(component.name, component);
+    });
+}
+var index = { install };
+
+export { script$1 as LImage, script as LShape, script$2 as LText, index as default, imageDefaultProps, imageStylePropsNames, shapeDefaultProps, shapeStylePropsNames, textDefaultProps, textStylePropNames };

package/dist/hy-lego-bricks.umd.js

@@ -0,0 +1,208 @@
+(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';
+
+  const useComponentCommon = (props, picks) => {
+      const styleProps = vue.computed(() => lodashEs.pick(props, picks));
+      const handleClick = () => {
+          if (props.actionType === "url" && props.url && !props.isEditing) {
+              window.location.href = props.url;
+          }
+      };
+      return {
+          styleProps,
+          handleClick,
+      };
+  };
+
+  const commonDefaultProps = {
+      // actions
+      actionType: '',
+      url: '',
+      // size
+      height: '',
+      width: '373px',
+      paddingLeft: '0px',
+      paddingRight: '0px',
+      paddingTop: '0px',
+      paddingBottom: '0px',
+      // border type
+      borderStyle: 'none',
+      borderColor: '#000',
+      borderWidth: '0',
+      borderRadius: '0',
+      // shadow and opacity
+      boxShadow: '0 0 0 #000000',
+      opacity: '1',
+      // position and x,y
+      position: 'absolute',
+      left: '0',
+      top: '0',
+      right: '0'
+  };
+  const textDefaultProps = {
+      // basic props - font styles
+      text: '正文内容',
+      fontSize: '14px',
+      fontFamily: '',
+      fontWeight: 'normal',
+      fontStyle: 'normal',
+      textDecoration: 'none',
+      lineHeight: '1',
+      textAlign: 'left',
+      color: '#000000',
+      backgroundColor: '',
+      ...commonDefaultProps
+  };
+  const imageDefaultProps = {
+      src: 'test.url',
+      ...commonDefaultProps
+  };
+  const shapeDefaultProps = {
+      backgroundColor: '',
+      ...commonDefaultProps
+  };
+  const isEditingProp = {
+      isEditing: {
+          type: Boolean,
+          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(imageDefaultProps), 'actionType', 'url');
+  const transformToComponentProps = (props) => {
+      const mapProps = lodashEs.mapValues(props, (item) => {
+          return {
+              type: item.constructor,
+              default: item
+          };
+      });
+      return { ...mapProps, ...isEditingProp };
+  };
+
+  const defaultProps$2 = transformToComponentProps(textDefaultProps);
+  // array that contains style props
+  var script$2 = vue.defineComponent({
+      name: 'l-text',
+      props: {
+          tag: {
+              type: String,
+              default: 'div'
+          },
+          ...defaultProps$2
+      },
+      setup(props) {
+          // 重用并且简化
+          // 抽离并且获得 styleProps
+          const { styleProps, handleClick } = useComponentCommon(props, textStylePropNames);
+          return {
+              styleProps,
+              handleClick
+          };
+      }
+  });
+
+  function render$2(_ctx, _cache, $props, $setup, $data, $options) {
+    return (vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(_ctx.tag), {
+      style: vue.normalizeStyle(_ctx.styleProps),
+      class: "l-text-component",
+      onClick: _ctx.handleClick
+    }, {
+      default: vue.withCtx(() => [
+        vue.createTextVNode(vue.toDisplayString(_ctx.text), 1 /* TEXT */)
+      ]),
+      _: 1 /* STABLE */
+    }, 8 /* PROPS */, ["style", "onClick"]))
+  }
+
+  script$2.render = render$2;
+  script$2.__scopeId = "data-v-6bf95b7a";
+  script$2.__file = "src/components/LText/LText.vue";
+
+  const defaultProps$1 = transformToComponentProps(imageDefaultProps);
+  // array that contains style props
+  var script$1 = vue.defineComponent({
+      name: 'l-image',
+      props: {
+          ...defaultProps$1
+      },
+      setup(props) {
+          // 重用并且简化
+          // 抽离并且获得 styleProps
+          const { styleProps, handleClick } = useComponentCommon(props, imageStylePropsNames);
+          return {
+              styleProps,
+              handleClick
+          };
+      }
+  });
+
+  const _hoisted_1 = ["src"];
+
+  function render$1(_ctx, _cache, $props, $setup, $data, $options) {
+    return (vue.openBlock(), vue.createElementBlock("img", {
+      style: vue.normalizeStyle(_ctx.styleProps),
+      class: "l-image-component",
+      onClick: _cache[0] || (_cache[0] = vue.withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"])),
+      src: _ctx.src
+    }, null, 12 /* STYLE, PROPS */, _hoisted_1))
+  }
+
+  script$1.render = render$1;
+  script$1.__scopeId = "data-v-1e970aa2";
+  script$1.__file = "src/components/LImage/LImage.vue";
+
+  const defaultProps = transformToComponentProps(shapeDefaultProps);
+  // array that contains style props
+  var script = vue.defineComponent({
+      name: 'l-shape',
+      props: {
+          ...defaultProps
+      },
+      setup(props) {
+          // 重用并且简化
+          // 抽离并且获得 styleProps
+          const { styleProps, handleClick } = useComponentCommon(props, shapeStylePropsNames);
+          return {
+              styleProps,
+              handleClick
+          };
+      }
+  });
+
+  function render(_ctx, _cache, $props, $setup, $data, $options) {
+    return (vue.openBlock(), vue.createElementBlock("div", {
+      style: vue.normalizeStyle(_ctx.styleProps),
+      class: "l-shape-component",
+      onClick: _cache[0] || (_cache[0] = vue.withModifiers((...args) => (_ctx.handleClick && _ctx.handleClick(...args)), ["prevent"]))
+    }, null, 4 /* STYLE */))
+  }
+
+  script.render = render;
+  script.__file = "src/components/LShape/LShape.vue";
+
+  const components = [script$2, script$1, script];
+  function install(app) {
+      components.forEach((component) => {
+          app.component(component.name, component);
+      });
+  }
+  var index = { install };
+
+  exports.LImage = script$1;
+  exports.LShape = script;
+  exports.LText = script$2;
+  exports.default = index;
+  exports.imageDefaultProps = imageDefaultProps;
+  exports.imageStylePropsNames = imageStylePropsNames;
+  exports.shapeDefaultProps = shapeDefaultProps;
+  exports.shapeStylePropsNames = shapeStylePropsNames;
+  exports.textDefaultProps = textDefaultProps;
+  exports.textStylePropNames = textStylePropNames;
+
+  Object.defineProperty(exports, '__esModule', { value: true });
+
+}));

package/dist/index.d.ts

@@ -0,0 +1,11 @@
+import { App } from "vue";
+import LText from "./components/LText/LText.vue";
+import LImage from "./components/LImage/LImage.vue";
+import LShape from "./components/LShape/LShape.vue";
+export { textDefaultProps, textStylePropNames, TextComponentProps, imageDefaultProps, imageStylePropsNames, ImageComponentProps, shapeDefaultProps, shapeStylePropsNames, ShapeComponentProps, AllComponentProps, } from "./defaultProps";
+declare function install(app: App): void;
+export { LText, LImage, LShape };
+declare const _default: {
+    install: typeof install;
+};
+export default _default;

package/package.json

@@ -0,0 +1,49 @@
+{
+  "name": "hy-lego-bricks",
+  "version": "0.1.0",
+  "private": false,
+  "type": "module",
+  "types": "dist/index.d.ts",
+  "main": "dist/lego-bricks.umd.js",
+  "module": "dist/lego-bricks.esm.js",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "dev": "vue-cli-service serve",
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "lint": "vue-cli-service lint",
+    "build:all": "npm run clean && npm run build:esm && npm run build:umd",
+    "build:esm": "rollup --config build/rollup.esm.config.js",
+    "build:umd": "rollup --config build/rollup.umd.config.js",
+    "clean": "rimraf ./dist",
+    "prepublishOnly": "npm run build:all"
+  },
+  "dependencies": {
+    "core-js": "^3.8.3",
+    "lodash-es": "^4.17.21"
+  },
+  "peerDependencies": {
+    "vue": "^3.2.13"
+  },
+  "devDependencies": {
+    "@rollup/plugin-node-resolve": "^16.0.3",
+    "@types/lodash-es": "^4.17.7",
+    "@typescript-eslint/eslint-plugin": "^5.4.0",
+    "@typescript-eslint/parser": "^5.4.0",
+    "@vue/cli-plugin-babel": "~5.0.0",
+    "@vue/cli-plugin-eslint": "~5.0.0",
+    "@vue/cli-plugin-typescript": "~5.0.0",
+    "@vue/cli-service": "~5.0.0",
+    "@vue/eslint-config-typescript": "^9.1.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-vue": "^8.0.3",
+    "rimraf": "^6.1.3",
+    "rollup": "^3.20.2",
+    "rollup-plugin-css-only": "^4.5.5",
+    "rollup-plugin-typescript2": "^0.36.0",
+    "rollup-plugin-vue": "^6.0.0",
+    "typescript": "~4.5.5"
+  }
+}