@lx-frontend/wrap-element-ui 0.4.1 → 0.4.2-beta

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 (33) hide show
  1. package/README.md +54 -54
  2. package/babel.config.js +5 -5
  3. package/global.d.ts +23 -23
  4. package/package.json +48 -48
  5. package/packages/AddMembers/index.js +11 -11
  6. package/packages/AddMembers/src/AddMembers.vue +127 -127
  7. package/packages/AuditSteps/index.js +7 -7
  8. package/packages/AuditSteps/src/AuditSteps.vue +85 -85
  9. package/packages/DemoComponent/index.js +7 -7
  10. package/packages/DemoComponent/src/DemoComponent.vue +10 -10
  11. package/packages/Ellipsis/index.js +7 -7
  12. package/packages/Ellipsis/src/Ellipsis.vue +119 -119
  13. package/packages/Ellipsis/src/MultilineEllipsis.vue +141 -141
  14. package/packages/LxTable/index.js +11 -11
  15. package/packages/LxTable/src/LxTable.vue +281 -281
  16. package/packages/PopoverForm/index.js +7 -7
  17. package/packages/PopoverForm/src/PopoverForm.vue +66 -66
  18. package/packages/SearchForm/index.js +7 -7
  19. package/packages/SearchForm/src/SearchForm.vue +224 -217
  20. package/packages/SearchSelect/index.js +7 -7
  21. package/packages/SearchSelect/src/SearchSelect.vue +150 -150
  22. package/packages/index.js +59 -59
  23. package/packages/singleMessage/index.ts +44 -44
  24. package/packages/theme-default/gulpfile.js +25 -25
  25. package/packages/theme-default/package.json +23 -23
  26. package/packages/theme-default/src/AuditSteps.scss +52 -52
  27. package/packages/theme-default/src/DemoComponent.scss +9 -9
  28. package/packages/theme-default/src/index.css +11 -11
  29. package/packages/theme-default/src/index.scss +2 -2
  30. package/plugins/wrap.js +22 -22
  31. package/postcss.config.js +5 -5
  32. package/tsconfig.json +41 -41
  33. package/yarn.lock +12226 -12226
package/README.md CHANGED
@@ -1,54 +1,54 @@
1
-
2
- # 快速上手
3
-
4
- ----
5
-
6
- ## 标准开发
7
-
8
- 实际项目中,往往会使用 `webpack`,`rollup` 或者 `gulp` 的工作流,大多可以做到按需加载页面用到的组件,所以不推荐直接使用 `<script>` 标签全局引入的方式使用。
9
-
10
- ### 全局组件使用
11
-
12
- 可以在项目的入口文件中引入所有组件或所需组件
13
-
14
- ```js
15
- import WrapEle from '@lx-frontend/wrap-element-ui' // 引入组件库
16
- import 'wrap-element-ui/packages/theme-default/lib/index.css' // 引入样式库
17
-
18
- Vue.use(WrapEle)
19
- ```
20
-
21
- ### 单个组件按需使用
22
-
23
- 可以局部注册所需的组件,适用于与其他框架组合使用的场景
24
-
25
- ```js
26
- import { DemoComponent } from '@lx-frontend/wrap-element-ui'
27
-
28
- export default {
29
- components: {
30
- DemoComponent
31
- }
32
- }
33
- ```
34
-
35
- 在模板中,用 `<DemoComponent></DemoComponent>` 自定义标签的方式使用组件
36
-
37
- ```html
38
- <template>
39
- <div>
40
- <DemoComponent>这是一个 demo 组件</DemoComponent>
41
- </div>
42
- </template>
43
- ```
44
-
45
- 若为单标签
46
-
47
- ```html
48
- <template>
49
- <div>
50
- <DemoComponent title="按钮" />
51
- </div>
52
- </template>
53
- ```
54
-
1
+
2
+ # 快速上手
3
+
4
+ ----
5
+
6
+ ## 标准开发
7
+
8
+ 实际项目中,往往会使用 `webpack`,`rollup` 或者 `gulp` 的工作流,大多可以做到按需加载页面用到的组件,所以不推荐直接使用 `<script>` 标签全局引入的方式使用。
9
+
10
+ ### 全局组件使用
11
+
12
+ 可以在项目的入口文件中引入所有组件或所需组件
13
+
14
+ ```js
15
+ import WrapEle from '@lx-frontend/wrap-element-ui' // 引入组件库
16
+ import 'wrap-element-ui/packages/theme-default/lib/index.css' // 引入样式库
17
+
18
+ Vue.use(WrapEle)
19
+ ```
20
+
21
+ ### 单个组件按需使用
22
+
23
+ 可以局部注册所需的组件,适用于与其他框架组合使用的场景
24
+
25
+ ```js
26
+ import { DemoComponent } from '@lx-frontend/wrap-element-ui'
27
+
28
+ export default {
29
+ components: {
30
+ DemoComponent
31
+ }
32
+ }
33
+ ```
34
+
35
+ 在模板中,用 `<DemoComponent></DemoComponent>` 自定义标签的方式使用组件
36
+
37
+ ```html
38
+ <template>
39
+ <div>
40
+ <DemoComponent>这是一个 demo 组件</DemoComponent>
41
+ </div>
42
+ </template>
43
+ ```
44
+
45
+ 若为单标签
46
+
47
+ ```html
48
+ <template>
49
+ <div>
50
+ <DemoComponent title="按钮" />
51
+ </div>
52
+ </template>
53
+ ```
54
+
package/babel.config.js CHANGED
@@ -1,5 +1,5 @@
1
- module.exports = {
2
- presets: [
3
- '@vue/cli-plugin-babel/preset'
4
- ]
5
- }
1
+ module.exports = {
2
+ presets: [
3
+ '@vue/cli-plugin-babel/preset'
4
+ ]
5
+ }
package/global.d.ts CHANGED
@@ -1,23 +1,23 @@
1
- import Vue from 'vue';
2
- import { VueRouter } from 'vue-router/types/router.d';
3
- import { Route } from 'vue-router';
4
-
5
- declare module 'vue/types/options' {
6
- // Vue 构造函数接收的额外选项
7
- interface ComponentOptions<V extends Vue> {
8
- router?: VueRouter
9
- }
10
- }
11
-
12
- declare module 'vue/types/vue' {
13
- // Vue 的全局属性
14
- interface Vue {
15
- $route: Route
16
- }
17
- }
18
-
19
- // declare module 'element-ui'
20
- declare module '*.json' {
21
- const value: any;
22
- export default value;
23
- }
1
+ import Vue from 'vue';
2
+ import { VueRouter } from 'vue-router/types/router.d';
3
+ import { Route } from 'vue-router';
4
+
5
+ declare module 'vue/types/options' {
6
+ // Vue 构造函数接收的额外选项
7
+ interface ComponentOptions<V extends Vue> {
8
+ router?: VueRouter
9
+ }
10
+ }
11
+
12
+ declare module 'vue/types/vue' {
13
+ // Vue 的全局属性
14
+ interface Vue {
15
+ $route: Route
16
+ }
17
+ }
18
+
19
+ // declare module 'element-ui'
20
+ declare module '*.json' {
21
+ const value: any;
22
+ export default value;
23
+ }
package/package.json CHANGED
@@ -1,48 +1,48 @@
1
- {
2
- "name": "@lx-frontend/wrap-element-ui",
3
- "version": "0.4.1",
4
- "description": "wrap-element-ui",
5
- "author": "Vic <18373209286@163.com>",
6
- "main": "packages/index.js",
7
- "private": false,
8
- "scripts": {
9
- "serve": "npm run build:style && vue-cli-service serve",
10
- "build:style": "gulp build --gulpfile packages/theme-default/gulpfile.js",
11
- "dist": "npm run build:style && vue-cli-service build",
12
- "build:single": "webpack --config build/build-one-by-one.js",
13
- "lint": "vue-cli-service lint",
14
- "test:unit": "vue-cli-service test:unit"
15
- },
16
- "dependencies": {
17
- "cheerio": "^1.0.0-rc.2",
18
- "core-js": "^3.3.2",
19
- "element-ui": "^2.11.1",
20
- "highlight.js": "^9.16.2",
21
- "markdown-it-anchor": "^4.0.0",
22
- "markdown-it-container": "^2.0.0",
23
- "vue": "^2.6.10",
24
- "vue-markdown-loader": "^2.2.3",
25
- "vue-router": "^3.1.3"
26
- },
27
- "devDependencies": {
28
- "@types/jest": "^24.0.11",
29
- "@vue/cli-plugin-babel": "^4.0.0",
30
- "@vue/cli-plugin-eslint": "^4.0.0",
31
- "@vue/cli-plugin-typescript": "^4.0.0",
32
- "@vue/cli-plugin-unit-jest": "^4.0.0",
33
- "@vue/cli-service": "^4.0.0",
34
- "@vue/eslint-config-typescript": "^4.0.0",
35
- "@vue/test-utils": "1.0.0-beta.29",
36
- "eslint": "^5.16.0",
37
- "eslint-plugin-vue": "^5.0.0",
38
- "gulp": "^3.9.1",
39
- "gulp-autoprefixer": "^4.0.0",
40
- "gulp-cssmin": "^0.1.7",
41
- "gulp-sass": "^4.0.2",
42
- "sass": "^1.19.0",
43
- "sass-loader": "^8.0.0",
44
- "typescript": "~3.5.3",
45
- "vue-template-compiler": "^2.6.10",
46
- "webpack-cli": "^3.3.10"
47
- }
48
- }
1
+ {
2
+ "name": "@lx-frontend/wrap-element-ui",
3
+ "version": "0.4.2-beta",
4
+ "description": "wrap-element-ui",
5
+ "author": "Vic <18373209286@163.com>",
6
+ "main": "packages/index.js",
7
+ "private": false,
8
+ "scripts": {
9
+ "serve": "npm run build:style && vue-cli-service serve",
10
+ "build:style": "gulp build --gulpfile packages/theme-default/gulpfile.js",
11
+ "dist": "npm run build:style && vue-cli-service build",
12
+ "build:single": "webpack --config build/build-one-by-one.js",
13
+ "lint": "vue-cli-service lint",
14
+ "test:unit": "vue-cli-service test:unit"
15
+ },
16
+ "dependencies": {
17
+ "cheerio": "^1.0.0-rc.2",
18
+ "core-js": "^3.3.2",
19
+ "element-ui": "^2.11.1",
20
+ "highlight.js": "^9.16.2",
21
+ "markdown-it-anchor": "^4.0.0",
22
+ "markdown-it-container": "^2.0.0",
23
+ "vue": "^2.6.10",
24
+ "vue-markdown-loader": "^2.2.3",
25
+ "vue-router": "^3.1.3"
26
+ },
27
+ "devDependencies": {
28
+ "@types/jest": "^24.0.11",
29
+ "@vue/cli-plugin-babel": "^4.0.0",
30
+ "@vue/cli-plugin-eslint": "^4.0.0",
31
+ "@vue/cli-plugin-typescript": "^4.0.0",
32
+ "@vue/cli-plugin-unit-jest": "^4.0.0",
33
+ "@vue/cli-service": "^4.0.0",
34
+ "@vue/eslint-config-typescript": "^4.0.0",
35
+ "@vue/test-utils": "1.0.0-beta.29",
36
+ "eslint": "^5.16.0",
37
+ "eslint-plugin-vue": "^5.0.0",
38
+ "gulp": "^3.9.1",
39
+ "gulp-autoprefixer": "^4.0.0",
40
+ "gulp-cssmin": "^0.1.7",
41
+ "gulp-sass": "^4.0.2",
42
+ "sass": "^1.19.0",
43
+ "sass-loader": "^8.0.0",
44
+ "typescript": "~3.5.3",
45
+ "vue-template-compiler": "^2.6.10",
46
+ "webpack-cli": "^3.3.10"
47
+ }
48
+ }
@@ -1,11 +1,11 @@
1
- /**
2
- * @author Liuxuan
3
- * Date: 2021/08/31
4
- */
5
- import AddMembers from './src/AddMembers.vue'
6
-
7
- AddMembers.install = function (Vue) {
8
- Vue.component(AddMembers.name, AddMembers)
9
- }
10
-
11
- export default AddMembers
1
+ /**
2
+ * @author Liuxuan
3
+ * Date: 2021/08/31
4
+ */
5
+ import AddMembers from './src/AddMembers.vue'
6
+
7
+ AddMembers.install = function (Vue) {
8
+ Vue.component(AddMembers.name, AddMembers)
9
+ }
10
+
11
+ export default AddMembers
@@ -1,127 +1,127 @@
1
- <template>
2
- <div>
3
- <PopoverForm
4
- :title="title"
5
- :withSubmitBtn="false"
6
- :width="360"
7
- @on-change="handleCloseTechniciansSelectPopup">
8
- <div slot="form" class="team-setting__technicians-popover">
9
- <div class="team-setting__technicians-select">
10
- <el-input
11
- v-model="techniciansSearchQuery"
12
- placeholder="请输入姓名"
13
- @input="handleInputTechniciansSearch"
14
- />
15
- </div>
16
- <div
17
- v-if="techniciansSearchQuery && !technicianOptions.length && !fetchTechniciansLoading"
18
- class="team-setting__empty-technicians-options">
19
- {{$attrs.empty || '系统未登记该员工,请先添加员工账号'}}
20
- </div>
21
- <ul v-else class="team-setting__technicians-options">
22
- <li
23
- class="team-setting__technicians-option"
24
- v-for="item in technicianOptions"
25
- :key="item[$attrs.showConfig.id]">
26
- <div class="team-setting__technicians-option-left">{{ `${item[$attrs.showConfig.name]} | ${item.roles}` }}</div>
27
- <el-button
28
- v-if="item.is_selected"
29
- type="text"
30
- disabled>
31
- 已添加
32
- </el-button>
33
- <el-button
34
- v-else
35
- type="text"
36
- @click="handleAddTechnician($attrs.keyId, item)">
37
- 添加
38
- </el-button>
39
- </li>
40
- </ul>
41
- </div>
42
- <el-button slot="reference" type="text" icon="el-icon-plus">{{title}}</el-button>
43
- </PopoverForm>
44
- </div>
45
- </template>
46
-
47
- <script>
48
- import PopoverForm from '../../PopoverForm/src/PopoverForm.vue'
49
- export default {
50
- name: 'AddMembers',
51
- components: {
52
- PopoverForm
53
- },
54
- props: {
55
- technicianOptions: Array,
56
- fetchTechniciansLoading: Boolean,
57
- title: {
58
- type: String,
59
- default: '添加成员',
60
- },
61
- },
62
- data() {
63
- return {
64
- techniciansSearchQuery: '',
65
- }
66
- },
67
- watch: {
68
- },
69
- methods: {
70
- handleCloseTechniciansSelectPopup(show) {
71
- if (show) return;
72
- this.techniciansSearchQuery = '';
73
- this.$emit('update:technicianOptions', []);
74
- },
75
- handleInputTechniciansSearch(query) {
76
- this.$emit('fetchTechniciansMethods', query);
77
- },
78
- handleAddTechnician(id, item) {
79
- const query = { id, item };
80
- this.$emit('handleAddTechnician', query);
81
- },
82
- },
83
- };
84
- </script>
85
-
86
- <style lang="scss">
87
- .team-setting {
88
- &__technicians-popover {
89
- padding: 20px;
90
- height: 350px;
91
- overflow-y: auto;
92
- }
93
- &__technicians-select {
94
- width: 320px;
95
- }
96
- &__empty-technicians-options {
97
- font-size: 12px;
98
- color: #80838e;
99
- text-align: center;
100
- margin-top: 10px;
101
- }
102
- &__technicians-options {
103
- display: flex;
104
- flex-direction: column;
105
- }
106
- &__technicians-option {
107
- display: flex;
108
- justify-content: space-between;
109
- align-items: center;
110
- height: 30px;
111
- &-left {
112
- width: 250px;
113
- overflow: hidden;
114
- text-overflow: ellipsis;
115
- white-space: nowrap;
116
- color: #80838e;
117
- }
118
- &-right {
119
- color: #1890ff;
120
- &--selected {
121
- color: #80838e;
122
- }
123
- }
124
- }
125
- }
126
-
127
- </style>
1
+ <template>
2
+ <div>
3
+ <PopoverForm
4
+ :title="title"
5
+ :withSubmitBtn="false"
6
+ :width="360"
7
+ @on-change="handleCloseTechniciansSelectPopup">
8
+ <div slot="form" class="team-setting__technicians-popover">
9
+ <div class="team-setting__technicians-select">
10
+ <el-input
11
+ v-model="techniciansSearchQuery"
12
+ placeholder="请输入姓名"
13
+ @input="handleInputTechniciansSearch"
14
+ />
15
+ </div>
16
+ <div
17
+ v-if="techniciansSearchQuery && !technicianOptions.length && !fetchTechniciansLoading"
18
+ class="team-setting__empty-technicians-options">
19
+ {{$attrs.empty || '系统未登记该员工,请先添加员工账号'}}
20
+ </div>
21
+ <ul v-else class="team-setting__technicians-options">
22
+ <li
23
+ class="team-setting__technicians-option"
24
+ v-for="item in technicianOptions"
25
+ :key="item[$attrs.showConfig.id]">
26
+ <div class="team-setting__technicians-option-left">{{ `${item[$attrs.showConfig.name]} | ${item.roles}` }}</div>
27
+ <el-button
28
+ v-if="item.is_selected"
29
+ type="text"
30
+ disabled>
31
+ 已添加
32
+ </el-button>
33
+ <el-button
34
+ v-else
35
+ type="text"
36
+ @click="handleAddTechnician($attrs.keyId, item)">
37
+ 添加
38
+ </el-button>
39
+ </li>
40
+ </ul>
41
+ </div>
42
+ <el-button slot="reference" type="text" icon="el-icon-plus">{{title}}</el-button>
43
+ </PopoverForm>
44
+ </div>
45
+ </template>
46
+
47
+ <script>
48
+ import PopoverForm from '../../PopoverForm/src/PopoverForm.vue'
49
+ export default {
50
+ name: 'AddMembers',
51
+ components: {
52
+ PopoverForm
53
+ },
54
+ props: {
55
+ technicianOptions: Array,
56
+ fetchTechniciansLoading: Boolean,
57
+ title: {
58
+ type: String,
59
+ default: '添加成员',
60
+ },
61
+ },
62
+ data() {
63
+ return {
64
+ techniciansSearchQuery: '',
65
+ }
66
+ },
67
+ watch: {
68
+ },
69
+ methods: {
70
+ handleCloseTechniciansSelectPopup(show) {
71
+ if (show) return;
72
+ this.techniciansSearchQuery = '';
73
+ this.$emit('update:technicianOptions', []);
74
+ },
75
+ handleInputTechniciansSearch(query) {
76
+ this.$emit('fetchTechniciansMethods', query);
77
+ },
78
+ handleAddTechnician(id, item) {
79
+ const query = { id, item };
80
+ this.$emit('handleAddTechnician', query);
81
+ },
82
+ },
83
+ };
84
+ </script>
85
+
86
+ <style lang="scss">
87
+ .team-setting {
88
+ &__technicians-popover {
89
+ padding: 20px;
90
+ height: 350px;
91
+ overflow-y: auto;
92
+ }
93
+ &__technicians-select {
94
+ width: 320px;
95
+ }
96
+ &__empty-technicians-options {
97
+ font-size: 12px;
98
+ color: #80838e;
99
+ text-align: center;
100
+ margin-top: 10px;
101
+ }
102
+ &__technicians-options {
103
+ display: flex;
104
+ flex-direction: column;
105
+ }
106
+ &__technicians-option {
107
+ display: flex;
108
+ justify-content: space-between;
109
+ align-items: center;
110
+ height: 30px;
111
+ &-left {
112
+ width: 250px;
113
+ overflow: hidden;
114
+ text-overflow: ellipsis;
115
+ white-space: nowrap;
116
+ color: #80838e;
117
+ }
118
+ &-right {
119
+ color: #1890ff;
120
+ &--selected {
121
+ color: #80838e;
122
+ }
123
+ }
124
+ }
125
+ }
126
+
127
+ </style>
@@ -1,7 +1,7 @@
1
- import AuditSteps from './src/AuditSteps.vue'
2
-
3
- AuditSteps.install = function (Vue) {
4
- Vue.component(AuditSteps.name, AuditSteps)
5
- }
6
-
7
- export default AuditSteps
1
+ import AuditSteps from './src/AuditSteps.vue'
2
+
3
+ AuditSteps.install = function (Vue) {
4
+ Vue.component(AuditSteps.name, AuditSteps)
5
+ }
6
+
7
+ export default AuditSteps