@smilekite/lego-bricks 1.0.5 → 1.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (9) hide show
  1. package/README.md +142 -8
  2. package/dist/bundle.css +8 -8
  3. package/dist/components/LImage/LImage.vue.d.ts +10 -3
  4. package/dist/components/LShape/LShape.vue.d.ts +1 -3
  5. package/dist/components/LText/LText.vue.d.ts +10 -3
  6. package/dist/defaultProps.d.ts +1 -1
  7. package/dist/lego-bricks.esm.js +20 -12
  8. package/dist/lego-bricks.umd.js +20 -12
  9. package/package.json +76 -76
package/README.md CHANGED
@@ -1,8 +1,142 @@
1
- # SMILE LEGO 业务组件库
2
-
3
- ## 特性
4
- * **typescript**
5
- * Vue3
6
- * 单元测试
7
- * 提交发布前验证
8
- * travis 实现自动发布
1
+ # SMILE LEGO 业务组件库
2
+
3
+ SMILE LEGO 是一个基于 Vue3 + TypeScript 开发的业务组件库，提供了一系列可复用的 UI 组件，帮助开发者快速构建现代化的 Web 应用。
4
+
5
+ ## 特性
6
+ * ✅ **TypeScript 支持**：完整的类型定义，提供良好的开发体验
7
+ * ✅ **Vue3 组合式 API**：采用最新的 Vue3 特性，支持组合式 API
8
+ * ✅ **单元测试**：完善的测试用例，确保组件质量
9
+ * ✅ **提交发布前验证**：自动化的代码检查和测试流程
10
+ * ✅ **Travis CI 自动发布**：持续集成，自动发布新版本
11
+ * ✅ **轻量化**：按需引入，减少打包体积
12
+
13
+ ## 安装
14
+
15
+ 使用 npm 安装：
16
+
17
+ ```bash
18
+ npm install @smilekite/lego-bricks
19
+ ```
20
+
21
+ 使用 yarn 安装：
22
+
23
+ ```bash
24
+ yarn add @smilekite/lego-bricks
25
+ ```
26
+
27
+ ## 快速开始
28
+
29
+ ### 全局引入
30
+
31
+ ```javascript
32
+ import { createApp } from 'vue'
33
+ import LegoBricks from '@smilekite/lego-bricks'
34
+ import '@smilekite/lego-bricks/dist/bundle.css'
35
+ import App from './App.vue'
36
+
37
+ const app = createApp(App)
38
+ app.use(LegoBricks)
39
+ app.mount('#app')
40
+ ```
41
+
42
+ ### 按需引入
43
+
44
+ ```javascript
45
+ import { createApp } from 'vue'
46
+ import { LText, LImage, LShape } from '@smilekite/lego-bricks'
47
+ import '@smilekite/lego-bricks/dist/bundle.css'
48
+ import App from './App.vue'
49
+
50
+ const app = createApp(App)
51
+ app.component('LText', LText)
52
+ app.component('LImage', LImage)
53
+ app.component('LShape', LShape)
54
+ app.mount('#app')
55
+ ```
56
+
57
+ ## 组件列表
58
+
59
+ ### LText
60
+ 文本组件，用于展示和编辑文本内容。
61
+
62
+ ### LImage
63
+ 图片组件，用于展示和处理图片。
64
+
65
+ ### LShape
66
+ 形状组件，用于绘制各种几何形状。
67
+
68
+ ### FinalPage
69
+ 最终页面组件，用于展示最终的页面效果。
70
+
71
+ ## 开发指南
72
+
73
+ ### 克隆仓库
74
+
75
+ ```bash
76
+ git clone https://github.com/Kitesource/lego-bricks.git
77
+ cd lego-bricks
78
+ ```
79
+
80
+ ### 安装依赖
81
+
82
+ ```bash
83
+ npm install
84
+ ```
85
+
86
+ ### 启动开发服务器
87
+
88
+ ```bash
89
+ npm run serve
90
+ ```
91
+
92
+ ### 构建组件库
93
+
94
+ ```bash
95
+ npm run build
96
+ ```
97
+
98
+ ### 运行单元测试
99
+
100
+ ```bash
101
+ # 运行所有测试
102
+ npm run test
103
+
104
+ # 监听模式运行测试
105
+ npm run test:watch
106
+ ```
107
+
108
+ ### 代码检查
109
+
110
+ ```bash
111
+ npm run lint
112
+ ```
113
+
114
+ ### 发布
115
+ ```
116
+ npm run publish --access public
117
+ ```
118
+
119
+ ## 项目结构
120
+
121
+ ```
122
+ lego-bricks/
123
+ ├── build/ # 构建配置文件
124
+ ├── dist/ # 构建输出目录
125
+ ├── src/ # 源代码目录
126
+ │ ├── components/ # 组件目录
127
+ │ ├── hooks/ # 自定义 hooks
128
+ │ ├── App.vue # 应用入口组件
129
+ │ ├── index.ts # 组件库入口
130
+ │ └── main.ts # 开发环境入口
131
+ ├── tests/ # 测试目录
132
+ ├── package.json # 项目配置
133
+ └── README.md # 项目说明
134
+ ```
135
+
136
+ ## 贡献指南
137
+
138
+ 1. Fork 仓库
139
+ 2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
140
+ 3. 提交更改 (`git commit -m 'Add some AmazingFeature'`)
141
+ 4. 推送到分支 (`git push origin feature/AmazingFeature`)
142
+ 5. 开启 Pull Request
package/dist/bundle.css CHANGED
@@ -1,16 +1,16 @@
1
1
 
2
- .l-image-component[data-v-1e970aa2] {
2
+ .l-image-component[data-v-1e970aa2] {
3
3
  max-width: 100%;
4
- }
4
+ }
5
5
 
6
- h2.l-text-component[data-v-6bf95b7a], p.l-text-component[data-v-6bf95b7a] {
6
+ h2.l-text-component[data-v-6bf95b7a], p.l-text-component[data-v-6bf95b7a] {
7
7
  margin-bottom: 0;
8
8
  }
9
- button.l-text-component[data-v-6bf95b7a] {
10
- padding: 5px 10px;
9
+ button.l-text-component[data-v-6bf95b7a] {
10
+ padding: 5px 10px;
11
11
  cursor: pointer;
12
12
  }
13
- .l-text-component[data-v-6bf95b7a] {
14
- box-sizing: border-box;
13
+ .l-text-component[data-v-6bf95b7a] {
14
+ box-sizing: border-box;
15
15
  white-space: pre-wrap;
16
- }
16
+ }
package/dist/components/LImage/LImage.vue.d.ts CHANGED
@@ -3,17 +3,24 @@ declare const _default: import("vue").DefineComponent<{
3
3
  type: BooleanConstructor;
4
4
  default: boolean;
5
5
  };
6
+ src: {
7
+ type: StringConstructor;
8
+ default: string;
9
+ };
6
10
  }, {
7
- styleProps: import("vue").ComputedRef<Partial<Readonly<Partial<import("../../defaultProps").CommonComponentProps & {
8
- isEditing: boolean;
9
- }>>>>;
11
+ styleProps: any;
10
12
  handleClick: () => void;
11
13
  }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
12
14
  isEditing: {
13
15
  type: BooleanConstructor;
14
16
  default: boolean;
15
17
  };
18
+ src: {
19
+ type: StringConstructor;
20
+ default: string;
21
+ };
16
22
  }>>, {
17
23
  isEditing: boolean;
24
+ src: string;
18
25
  }, {}>;
19
26
  export default _default;
package/dist/components/LShape/LShape.vue.d.ts CHANGED
@@ -4,9 +4,7 @@ declare const _default: import("vue").DefineComponent<{
4
4
  default: boolean;
5
5
  };
6
6
  }, {
7
- styleProps: import("vue").ComputedRef<Partial<Readonly<Partial<import("../../defaultProps").CommonComponentProps & {
8
- isEditing: boolean;
9
- }>>>>;
7
+ styleProps: any;
10
8
  handleClick: () => void;
11
9
  }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
12
10
  isEditing: {
package/dist/components/LText/LText.vue.d.ts CHANGED
@@ -7,10 +7,12 @@ declare const _default: import("vue").DefineComponent<{
7
7
  type: StringConstructor;
8
8
  default: string;
9
9
  };
10
+ text: {
11
+ type: StringConstructor;
12
+ default: string;
13
+ };
10
14
  }, {
11
- styleProps: import("vue").ComputedRef<Partial<Readonly<Partial<import("../../defaultProps").CommonComponentProps & {
12
- isEditing: boolean;
13
- }>>>>;
15
+ styleProps: any;
14
16
  handleClick: () => void;
15
17
  }, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
16
18
  isEditing: {
@@ -21,8 +23,13 @@ declare const _default: import("vue").DefineComponent<{
21
23
  type: StringConstructor;
22
24
  default: string;
23
25
  };
26
+ text: {
27
+ type: StringConstructor;
28
+ default: string;
29
+ };
24
30
  }>>, {
25
31
  isEditing: boolean;
26
32
  tag: string;
33
+ text: string;
27
34
  }, {}>;
28
35
  export default _default;
package/dist/defaultProps.d.ts CHANGED
@@ -62,7 +62,7 @@ export interface TextComponentProps extends CommonComponentProps {
62
62
  backgroundColor: string;
63
63
  }
64
64
  export interface ImageComponentProps extends CommonComponentProps {
65
- imageSrc: string;
65
+ src: string;
66
66
  }
67
67
  export interface ShapeComponentProps extends CommonComponentProps {
68
68
  backgroundColor: string;
package/dist/lego-bricks.esm.js CHANGED
@@ -24,7 +24,7 @@ const commonDefaultProps = {
24
24
  position: 'absolute',
25
25
  left: '0',
26
26
  top: '0',
27
- right: '0'
27
+ right: '0',
28
28
  };
29
29
  const textDefaultProps = {
30
30
  // basic props - font styles
@@ -38,21 +38,21 @@ const textDefaultProps = {
38
38
  textAlign: 'left',
39
39
  color: '#000000',
40
40
  backgroundColor: '',
41
- ...commonDefaultProps
41
+ ...commonDefaultProps,
42
42
  };
43
43
  const imageDefaultProps = {
44
- imageSrc: '',
45
- ...commonDefaultProps
44
+ src: '',
45
+ ...commonDefaultProps,
46
46
  };
47
47
  const shapeDefaultProps = {
48
48
  backgroundColor: '',
49
- ...commonDefaultProps
49
+ ...commonDefaultProps,
50
50
  };
51
51
  const isEditingProp = {
52
52
  isEditing: {
53
53
  type: Boolean,
54
- default: false
55
- }
54
+ default: false,
55
+ },
56
56
  };
57
57
  const textStylePropNames = without(Object.keys(textDefaultProps), 'actionType', 'url', 'text');
58
58
  const imageStylePropsNames = without(Object.keys(imageDefaultProps), 'actionType', 'url', 'src');
@@ -61,7 +61,7 @@ const transformToComponentProps = (props) => {
61
61
  const mapProps = mapValues(props, (item) => {
62
62
  return {
63
63
  type: item.constructor,
64
- default: item
64
+ default: item,
65
65
  };
66
66
  });
67
67
  return { ...mapProps, ...isEditingProp };
@@ -89,6 +89,10 @@ var script = defineComponent({
89
89
  type: String,
90
90
  default: 'div'
91
91
  },
92
+ text: {
93
+ type: String,
94
+ default: ''
95
+ },
92
96
  ...defaultProps
93
97
  },
94
98
  setup(props) {
@@ -96,7 +100,7 @@ var script = defineComponent({
96
100
  // 抽离并且获得 styleProps
97
101
  const { styleProps, handleClick } = useComponentCommon(props, textStylePropNames);
98
102
  return {
99
- styleProps,
103
+ styleProps: styleProps.value,
100
104
  handleClick
101
105
  };
102
106
  }
@@ -128,6 +132,10 @@ const defaultProps$1 = transformToComponentProps(imageDefaultProps);
128
132
  var script$1 = defineComponent({
129
133
  name: 'l-image',
130
134
  props: {
135
+ src: {
136
+ type: String,
137
+ default: ''
138
+ },
131
139
  ...defaultProps$1
132
140
  },
133
141
  setup(props) {
@@ -135,10 +143,10 @@ var script$1 = defineComponent({
135
143
  // 抽离并且获得 styleProps
136
144
  const { styleProps, handleClick } = useComponentCommon(props, imageStylePropsNames);
137
145
  return {
138
- styleProps,
146
+ styleProps: styleProps.value,
139
147
  handleClick
140
148
  };
141
- }
149
+ },
142
150
  });
143
151
 
144
152
  const _hoisted_1 = ["src"];
@@ -172,7 +180,7 @@ var script$2 = defineComponent({
172
180
  // 抽离并且获得 styleProps
173
181
  const { styleProps, handleClick } = useComponentCommon(props, shapeStylePropsNames);
174
182
  return {
175
- styleProps,
183
+ styleProps: styleProps.value,
176
184
  handleClick
177
185
  };
178
186
  }
package/dist/lego-bricks.umd.js CHANGED
@@ -27,7 +27,7 @@
27
27
  position: 'absolute',
28
28
  left: '0',
29
29
  top: '0',
30
- right: '0'
30
+ right: '0',
31
31
  };
32
32
  const textDefaultProps = {
33
33
  // basic props - font styles
@@ -41,21 +41,21 @@
41
41
  textAlign: 'left',
42
42
  color: '#000000',
43
43
  backgroundColor: '',
44
- ...commonDefaultProps
44
+ ...commonDefaultProps,
45
45
  };
46
46
  const imageDefaultProps = {
47
- imageSrc: '',
48
- ...commonDefaultProps
47
+ src: '',
48
+ ...commonDefaultProps,
49
49
  };
50
50
  const shapeDefaultProps = {
51
51
  backgroundColor: '',
52
- ...commonDefaultProps
52
+ ...commonDefaultProps,
53
53
  };
54
54
  const isEditingProp = {
55
55
  isEditing: {
56
56
  type: Boolean,
57
- default: false
58
- }
57
+ default: false,
58
+ },
59
59
  };
60
60
  const textStylePropNames = lodashEs.without(Object.keys(textDefaultProps), 'actionType', 'url', 'text');
61
61
  const imageStylePropsNames = lodashEs.without(Object.keys(imageDefaultProps), 'actionType', 'url', 'src');
@@ -64,7 +64,7 @@
64
64
  const mapProps = lodashEs.mapValues(props, (item) => {
65
65
  return {
66
66
  type: item.constructor,
67
- default: item
67
+ default: item,
68
68
  };
69
69
  });
70
70
  return { ...mapProps, ...isEditingProp };
@@ -92,6 +92,10 @@
92
92
  type: String,
93
93
  default: 'div'
94
94
  },
95
+ text: {
96
+ type: String,
97
+ default: ''
98
+ },
95
99
  ...defaultProps
96
100
  },
97
101
  setup(props) {
@@ -99,7 +103,7 @@
99
103
  // 抽离并且获得 styleProps
100
104
  const { styleProps, handleClick } = useComponentCommon(props, textStylePropNames);
101
105
  return {
102
- styleProps,
106
+ styleProps: styleProps.value,
103
107
  handleClick
104
108
  };
105
109
  }
@@ -131,6 +135,10 @@
131
135
  var script$1 = vue.defineComponent({
132
136
  name: 'l-image',
133
137
  props: {
138
+ src: {
139
+ type: String,
140
+ default: ''
141
+ },
134
142
  ...defaultProps$1
135
143
  },
136
144
  setup(props) {
@@ -138,10 +146,10 @@
138
146
  // 抽离并且获得 styleProps
139
147
  const { styleProps, handleClick } = useComponentCommon(props, imageStylePropsNames);
140
148
  return {
141
- styleProps,
149
+ styleProps: styleProps.value,
142
150
  handleClick
143
151
  };
144
- }
152
+ },
145
153
  });
146
154
 
147
155
  const _hoisted_1 = ["src"];
@@ -175,7 +183,7 @@
175
183
  // 抽离并且获得 styleProps
176
184
  const { styleProps, handleClick } = useComponentCommon(props, shapeStylePropsNames);
177
185
  return {
178
- styleProps,
186
+ styleProps: styleProps.value,
179
187
  handleClick
180
188
  };
181
189
  }
package/package.json CHANGED
@@ -1,76 +1,76 @@
1
- {
2
- "name": "@smilekite/lego-bricks",
3
- "version": "1.0.5",
4
- "author": "smiley",
5
- "scripts": {
6
- "serve": "vue-cli-service serve",
7
- "build": "npm run clean && npm run build:esm && npm run build:umd",
8
- "test:watch": "vue-cli-service test:unit --watch",
9
- "test": "vue-cli-service test:unit",
10
- "lint": "vue-cli-service lint",
11
- "build:esm": "rollup --config build/rollup.esm.config.js",
12
- "build:umd": "rollup --config build/rollup.umd.config.js",
13
- "clean": "rimraf ./dist",
14
- "prepublishOnly": "npm run lint && npm run test && npm run build"
15
- },
16
- "husky": {
17
- "hooks": {
18
- "pre-commit": "npm run lint && npm run test"
19
- }
20
- },
21
- "main": "dist/lego-bricks.umd.js",
22
- "module": "dist/lego-bricks.esm.js",
23
- "files": [
24
- "dist"
25
- ],
26
- "dependencies": {
27
- "core-js": "^3.6.5",
28
- "lodash-es": "^4.17.20"
29
- },
30
- "devDependencies": {
31
- "@rollup/plugin-node-resolve": "^11.1.1",
32
- "@rollup/plugin-typescript": "^8.1.1",
33
- "@types/jest": "^24.0.19",
34
- "@types/lodash-es": "^4.17.4",
35
- "@typescript-eslint/eslint-plugin": "^2.33.0",
36
- "@typescript-eslint/parser": "^2.33.0",
37
- "@vue/cli-plugin-babel": "~4.5.0",
38
- "@vue/cli-plugin-eslint": "~4.5.0",
39
- "@vue/cli-plugin-typescript": "~4.5.0",
40
- "@vue/cli-plugin-unit-jest": "~4.5.11",
41
- "@vue/cli-service": "~4.5.0",
42
- "@vue/compiler-sfc": "^3.0.0",
43
- "@vue/eslint-config-typescript": "~5.1.0",
44
- "@vue/test-utils": "2.0.0-alpha.8",
45
- "eslint": "^6.7.2",
46
- "eslint-plugin-vue": "^7.0.0",
47
- "husky": "^4.3.8",
48
- "rimraf": "^3.0.2",
49
- "rollup": "^2.38.5",
50
- "rollup-plugin-css-only": "^3.1.0",
51
- "rollup-plugin-typescript2": "^0.29.0",
52
- "rollup-plugin-vue": "^6.0.0",
53
- "typescript": "^4.3.5",
54
- "vue": "~3.4.0",
55
- "vue-jest": "5.0.0-alpha.9"
56
- },
57
- "peerDependencies": {
58
- "vue": "^3.0.0"
59
- },
60
- "homepage": "https://github.com/Kitesource/lego-bricks",
61
- "keywords": [
62
- "Component",
63
- "UI",
64
- "Vue3"
65
- ],
66
- "license": "MIT",
67
- "repository": {
68
- "type": "git",
69
- "url": "https://github.com/Kitesource/lego-bricks"
70
- },
71
- "types": "dist/index.d.ts",
72
- "publishConfig": {
73
- "access": "public",
74
- "registry": "https://registry.npmjs.org/"
75
- }
76
- }
1
+ {
2
+ "name": "@smilekite/lego-bricks",
3
+ "version": "1.0.7",
4
+ "author": "smiley",
5
+ "scripts": {
6
+ "serve": "vue-cli-service serve",
7
+ "build": "npm run clean && npm run build:esm && npm run build:umd",
8
+ "test:watch": "vue-cli-service test:unit --watch",
9
+ "test": "vue-cli-service test:unit",
10
+ "lint": "vue-cli-service lint",
11
+ "build:esm": "rollup --config build/rollup.esm.config.js",
12
+ "build:umd": "rollup --config build/rollup.umd.config.js",
13
+ "clean": "rimraf ./dist",
14
+ "prepublishOnly": "npm run lint && npm run test && npm run build"
15
+ },
16
+ "husky": {
17
+ "hooks": {
18
+ "pre-commit": "npm run lint && npm run test"
19
+ }
20
+ },
21
+ "main": "dist/lego-bricks.umd.js",
22
+ "module": "dist/lego-bricks.esm.js",
23
+ "files": [
24
+ "dist"
25
+ ],
26
+ "dependencies": {
27
+ "core-js": "^3.6.5",
28
+ "lodash-es": "^4.17.20"
29
+ },
30
+ "devDependencies": {
31
+ "@rollup/plugin-node-resolve": "^11.1.1",
32
+ "@rollup/plugin-typescript": "^8.1.1",
33
+ "@types/jest": "^24.0.19",
34
+ "@types/lodash-es": "^4.17.4",
35
+ "@typescript-eslint/eslint-plugin": "^2.33.0",
36
+ "@typescript-eslint/parser": "^2.33.0",
37
+ "@vue/cli-plugin-babel": "~4.5.0",
38
+ "@vue/cli-plugin-eslint": "~4.5.0",
39
+ "@vue/cli-plugin-typescript": "~4.5.0",
40
+ "@vue/cli-plugin-unit-jest": "~4.5.11",
41
+ "@vue/cli-service": "~4.5.0",
42
+ "@vue/compiler-sfc": "^3.0.0",
43
+ "@vue/eslint-config-typescript": "~5.1.0",
44
+ "@vue/test-utils": "2.0.0-alpha.8",
45
+ "eslint": "^6.7.2",
46
+ "eslint-plugin-vue": "^7.0.0",
47
+ "husky": "^4.3.8",
48
+ "rimraf": "^3.0.2",
49
+ "rollup": "^2.38.5",
50
+ "rollup-plugin-css-only": "^3.1.0",
51
+ "rollup-plugin-typescript2": "^0.29.0",
52
+ "rollup-plugin-vue": "^6.0.0",
53
+ "typescript": "^4.3.5",
54
+ "vue": "~3.4.0",
55
+ "vue-jest": "5.0.0-alpha.9"
56
+ },
57
+ "peerDependencies": {
58
+ "vue": "^3.0.0"
59
+ },
60
+ "homepage": "https://github.com/Kitesource/lego-bricks",
61
+ "keywords": [
62
+ "Component",
63
+ "UI",
64
+ "Vue3"
65
+ ],
66
+ "license": "MIT",
67
+ "repository": {
68
+ "type": "git",
69
+ "url": "https://github.com/Kitesource/lego-bricks"
70
+ },
71
+ "types": "dist/index.d.ts",
72
+ "publishConfig": {
73
+ "access": "public",
74
+ "registry": "https://registry.npmjs.org/"
75
+ }
76
+ }