@smilekite/lego-bricks 1.0.0

package/README.md

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

package/dist/@smilekite/bundle.css

@@ -0,0 +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] {
+  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;
+}

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

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

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

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

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

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

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

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

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

@@ -0,0 +1,2 @@
+declare const _default: any;
+export default _default;

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

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

package/dist/@smilekite/defaultProps.d.ts

@@ -0,0 +1,53 @@
+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) => any;

package/dist/@smilekite/hooks/useComponentCommon.d.ts

@@ -0,0 +1,8 @@
+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;

package/dist/@smilekite/index.d.ts

@@ -0,0 +1,11 @@
+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 };
+declare const _default: {
+    install: (app: App<any>) => void;
+};
+export default _default;

package/dist/@smilekite/lego-bricks.esm.js

@@ -0,0 +1,211 @@
+import { without, mapValues, pick } from 'lodash-es';
+import { computed, defineComponent, openBlock, createBlock, resolveDynamicComponent, normalizeStyle, withCtx, createTextVNode, toDisplayString, createElementBlock, withModifiers } from 'vue';
+
+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(shapeDefaultProps), 'actionType', 'url');
+const transformToComponentProps = (props) => {
+    const mapProps = mapValues(props, (item) => {
+        return {
+            type: item.constructor,
+            default: item
+        };
+    });
+    return { ...mapProps, ...isEditingProp };
+};
+
+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 defaultProps = transformToComponentProps(textDefaultProps);
+// 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);
+        return {
+            styleProps,
+            handleClick
+        };
+    }
+});
+
+function render(_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.render = render;
+script.__scopeId = "data-v-6bf95b7a";
+script.__file = "src/components/LText/LText.vue";
+
+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
+    },
+    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";
+
+script$1.install = (app) => {
+    app.component(script$1.name, script$1);
+};
+
+const defaultProps$2 = transformToComponentProps(shapeDefaultProps);
+// array that contains style props
+var script$2 = defineComponent({
+    name: 'l-shape',
+    props: {
+        ...defaultProps$2
+    },
+    setup(props) {
+        // 重用并且简化
+        // 抽离并且获得 styleProps
+        const { styleProps, handleClick } = useComponentCommon(props, shapeStylePropsNames);
+        return {
+            styleProps,
+            handleClick
+        };
+    }
+});
+
+function render$2(_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$2.render = render$2;
+script$2.__file = "src/components/LShape/LShape.vue";
+
+script$2.install = (app) => {
+    app.component(script$2.name, script$2);
+};
+
+const components = [
+    script,
+    script$1,
+    script$2
+];
+const install = (app) => {
+    components.forEach(component => {
+        app.component(component.name, component);
+    });
+};
+var index = {
+    install
+};
+
+export default index;
+export { script$1 as LImage, script$2 as LShape, script as LText, imageDefaultProps, imageStylePropsNames, install, shapeDefaultProps, shapeStylePropsNames, textDefaultProps, textStylePropNames };

package/dist/@smilekite/lego-bricks.umd.js

@@ -0,0 +1,227 @@
+(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';
+
+  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(shapeDefaultProps), 'actionType', 'url');
+  const transformToComponentProps = (props) => {
+      const mapProps = lodashEs.mapValues(props, (item) => {
+          return {
+              type: item.constructor,
+              default: item
+          };
+      });
+      return { ...mapProps, ...isEditingProp };
+  };
+
+  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 defaultProps = transformToComponentProps(textDefaultProps);
+  // 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);
+          return {
+              styleProps,
+              handleClick
+          };
+      }
+  });
+
+  function render(_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.render = render;
+  script.__scopeId = "data-v-6bf95b7a";
+  script.__file = "src/components/LText/LText.vue";
+
+  script.install = (app) => {
+      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
+      },
+      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";
+
+  script$1.install = (app) => {
+      app.component(script$1.name, script$1);
+  };
+
+  const defaultProps$2 = transformToComponentProps(shapeDefaultProps);
+  // array that contains style props
+  var script$2 = vue.defineComponent({
+      name: 'l-shape',
+      props: {
+          ...defaultProps$2
+      },
+      setup(props) {
+          // 重用并且简化
+          // 抽离并且获得 styleProps
+          const { styleProps, handleClick } = useComponentCommon(props, shapeStylePropsNames);
+          return {
+              styleProps,
+              handleClick
+          };
+      }
+  });
+
+  function render$2(_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$2.render = render$2;
+  script$2.__file = "src/components/LShape/LShape.vue";
+
+  script$2.install = (app) => {
+      app.component(script$2.name, script$2);
+  };
+
+  const components = [
+      script,
+      script$1,
+      script$2
+  ];
+  const install = (app) => {
+      components.forEach(component => {
+          app.component(component.name, component);
+      });
+  };
+  var index = {
+      install
+  };
+
+  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/package.json

@@ -0,0 +1,76 @@
+{
+  "name": "@smilekite/lego-bricks",
+  "version": "1.0.0",
+  "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.2.0",
+    "vue-jest": "5.0.0-alpha.9"
+  },
+  "peerDependencies": {
+    "vue": "3.2.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/"
+  }
+}