bi-element-ui 0.1.51 → 0.1.53

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 (43) hide show
  1. package/.browserslistrc +3 -3
  2. package/.eslintrc.js +287 -287
  3. package/.prettierrc +7 -7
  4. package/README.md +148 -148
  5. package/cypress.json +3 -3
  6. package/lib/bi-element-ui.common.js +24552 -24430
  7. package/lib/bi-element-ui.css +1 -1
  8. package/lib/bi-element-ui.umd.js +24552 -24430
  9. package/lib/bi-element-ui.umd.min.js +2 -279
  10. package/lib/static/img/swiperBg.png +0 -0
  11. package/package.json +57 -57
  12. package/src/App.vue +42 -42
  13. package/src/components/BiDatePicker/datePickerOption.js +229 -229
  14. package/src/components/BiDatePicker/index.vue +74 -74
  15. package/src/components/BiTable/columu.vue +104 -104
  16. package/src/components/BiTable/forced.js +76 -76
  17. package/src/components/BiTable/index.js +6 -6
  18. package/src/components/BiTable/render.vue +13 -13
  19. package/src/components/BiTable/table.vue +202 -202
  20. package/src/components/BiTableColumn/Group.vue +277 -277
  21. package/src/components/BiTableColumn/api.js +16 -16
  22. package/src/components/BiTableColumn/index.vue +614 -614
  23. package/src/components/BiTooltipIcon/index.vue +71 -71
  24. package/src/components/EditBtn.vue +15 -15
  25. package/src/components/FreeButton/index.vue +69 -69
  26. package/src/components/Pagination/index.vue +104 -104
  27. package/src/components/Pagination/scrollTo.js +69 -69
  28. package/src/main.js +18 -18
  29. package/src/router/index.js +39 -39
  30. package/src/store/index.js +11 -11
  31. package/src/table.js +463 -463
  32. package/src/views/Date.vue +132 -132
  33. package/src/views/Home.vue +330 -330
  34. package/src/views/Scene.vue +140 -140
  35. package/src/views/Table.vue +220 -220
  36. package/src/views/showData.vue +455 -455
  37. package/tests/e2e/.eslintrc.js +10 -10
  38. package/tests/e2e/plugins/index.js +25 -25
  39. package/tests/e2e/specs/test.js +8 -8
  40. package/tests/e2e/support/commands.js +25 -25
  41. package/tests/e2e/support/index.js +20 -20
  42. package/tests/unit/example.spec.js +13 -13
  43. package//345/211/215/347/253/257ui/346/240/267/345/274/217/350/247/204/350/214/203.md +101 -101
@@ -1,10 +1,10 @@
1
- module.exports = {
2
- plugins: ['cypress'],
3
- env: {
4
- mocha: true,
5
- 'cypress/globals': true
6
- },
7
- rules: {
8
- strict: 'off'
9
- }
10
- }
1
+ module.exports = {
2
+ plugins: ['cypress'],
3
+ env: {
4
+ mocha: true,
5
+ 'cypress/globals': true
6
+ },
7
+ rules: {
8
+ strict: 'off'
9
+ }
10
+ }
@@ -1,25 +1,25 @@
1
- /* eslint-disable arrow-body-style */
2
- // https://docs.cypress.io/guides/guides/plugins-guide.html
3
-
4
- // if you need a custom webpack configuration you can uncomment the following import
5
- // and then use the `file:preprocessor` event
6
- // as explained in the cypress docs
7
- // https://docs.cypress.io/api/plugins/preprocessors-api.html#Examples
8
-
9
- // /* eslint-disable import/no-extraneous-dependencies, global-require */
10
- // const webpack = require('@cypress/webpack-preprocessor')
11
-
12
- module.exports = (on, config) => {
13
- // on('file:preprocessor', webpack({
14
- // webpackOptions: require('@vue/cli-service/webpack.config'),
15
- // watchOptions: {}
16
- // }))
17
-
18
- return Object.assign({}, config, {
19
- fixturesFolder: 'tests/e2e/fixtures',
20
- integrationFolder: 'tests/e2e/specs',
21
- screenshotsFolder: 'tests/e2e/screenshots',
22
- videosFolder: 'tests/e2e/videos',
23
- supportFile: 'tests/e2e/support/index.js'
24
- })
25
- }
1
+ /* eslint-disable arrow-body-style */
2
+ // https://docs.cypress.io/guides/guides/plugins-guide.html
3
+
4
+ // if you need a custom webpack configuration you can uncomment the following import
5
+ // and then use the `file:preprocessor` event
6
+ // as explained in the cypress docs
7
+ // https://docs.cypress.io/api/plugins/preprocessors-api.html#Examples
8
+
9
+ // /* eslint-disable import/no-extraneous-dependencies, global-require */
10
+ // const webpack = require('@cypress/webpack-preprocessor')
11
+
12
+ module.exports = (on, config) => {
13
+ // on('file:preprocessor', webpack({
14
+ // webpackOptions: require('@vue/cli-service/webpack.config'),
15
+ // watchOptions: {}
16
+ // }))
17
+
18
+ return Object.assign({}, config, {
19
+ fixturesFolder: 'tests/e2e/fixtures',
20
+ integrationFolder: 'tests/e2e/specs',
21
+ screenshotsFolder: 'tests/e2e/screenshots',
22
+ videosFolder: 'tests/e2e/videos',
23
+ supportFile: 'tests/e2e/support/index.js'
24
+ })
25
+ }
@@ -1,8 +1,8 @@
1
- // https://docs.cypress.io/api/introduction/api.html
2
-
3
- describe('My First Test', () => {
4
- it('Visits the app root url', () => {
5
- cy.visit('/')
6
- cy.contains('h1', 'Welcome to Your Vue.js App')
7
- })
8
- })
1
+ // https://docs.cypress.io/api/introduction/api.html
2
+
3
+ describe('My First Test', () => {
4
+ it('Visits the app root url', () => {
5
+ cy.visit('/')
6
+ cy.contains('h1', 'Welcome to Your Vue.js App')
7
+ })
8
+ })
@@ -1,25 +1,25 @@
1
- // ***********************************************
2
- // This example commands.js shows you how to
3
- // create various custom commands and overwrite
4
- // existing commands.
5
- //
6
- // For more comprehensive examples of custom
7
- // commands please read more here:
8
- // https://on.cypress.io/custom-commands
9
- // ***********************************************
10
- //
11
- //
12
- // -- This is a parent command --
13
- // Cypress.Commands.add("login", (email, password) => { ... })
14
- //
15
- //
16
- // -- This is a child command --
17
- // Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
18
- //
19
- //
20
- // -- This is a dual command --
21
- // Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
22
- //
23
- //
24
- // -- This is will overwrite an existing command --
25
- // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
1
+ // ***********************************************
2
+ // This example commands.js shows you how to
3
+ // create various custom commands and overwrite
4
+ // existing commands.
5
+ //
6
+ // For more comprehensive examples of custom
7
+ // commands please read more here:
8
+ // https://on.cypress.io/custom-commands
9
+ // ***********************************************
10
+ //
11
+ //
12
+ // -- This is a parent command --
13
+ // Cypress.Commands.add("login", (email, password) => { ... })
14
+ //
15
+ //
16
+ // -- This is a child command --
17
+ // Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
18
+ //
19
+ //
20
+ // -- This is a dual command --
21
+ // Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
22
+ //
23
+ //
24
+ // -- This is will overwrite an existing command --
25
+ // Cypress.Commands.overwrite("visit", (originalFn, url, options) => { ... })
@@ -1,20 +1,20 @@
1
- // ***********************************************************
2
- // This example support/index.js is processed and
3
- // loaded automatically before your test files.
4
- //
5
- // This is a great place to put global configuration and
6
- // behavior that modifies Cypress.
7
- //
8
- // You can change the location of this file or turn off
9
- // automatically serving support files with the
10
- // 'supportFile' configuration option.
11
- //
12
- // You can read more here:
13
- // https://on.cypress.io/configuration
14
- // ***********************************************************
15
-
16
- // Import commands.js using ES2015 syntax:
17
- import './commands'
18
-
19
- // Alternatively you can use CommonJS syntax:
20
- // require('./commands')
1
+ // ***********************************************************
2
+ // This example support/index.js is processed and
3
+ // loaded automatically before your test files.
4
+ //
5
+ // This is a great place to put global configuration and
6
+ // behavior that modifies Cypress.
7
+ //
8
+ // You can change the location of this file or turn off
9
+ // automatically serving support files with the
10
+ // 'supportFile' configuration option.
11
+ //
12
+ // You can read more here:
13
+ // https://on.cypress.io/configuration
14
+ // ***********************************************************
15
+
16
+ // Import commands.js using ES2015 syntax:
17
+ import './commands'
18
+
19
+ // Alternatively you can use CommonJS syntax:
20
+ // require('./commands')
@@ -1,13 +1,13 @@
1
- import { expect } from 'chai'
2
- import { shallowMount } from '@vue/test-utils'
3
- import HelloWorld from '@/components/HelloWorld.vue'
4
-
5
- describe('HelloWorld.vue', () => {
6
- it('renders props.msg when passed', () => {
7
- const msg = 'new message'
8
- const wrapper = shallowMount(HelloWorld, {
9
- propsData: { msg }
10
- })
11
- expect(wrapper.text()).to.include(msg)
12
- })
13
- })
1
+ import { expect } from 'chai'
2
+ import { shallowMount } from '@vue/test-utils'
3
+ import HelloWorld from '@/components/HelloWorld.vue'
4
+
5
+ describe('HelloWorld.vue', () => {
6
+ it('renders props.msg when passed', () => {
7
+ const msg = 'new message'
8
+ const wrapper = shallowMount(HelloWorld, {
9
+ propsData: { msg }
10
+ })
11
+ expect(wrapper.text()).to.include(msg)
12
+ })
13
+ })
@@ -1,101 +1,101 @@
1
- # 前端 ui 样式规范
2
-
3
- ### 字体
4
-
5
- ```css
6
- .text-12 {
7
- font-size: 12px;
8
- line-height: 18px;
9
- }
10
- .text-14 {
11
- font-size: 14px;
12
- line-height: 20px;
13
- }
14
- .text-16 {
15
- font-size: 16px;
16
- line-height: 22px;
17
- }
18
- .text-24 {
19
- font-size: 16px;
20
- line-height: 34px;
21
- }
22
- ```
23
-
24
- ### 布局
25
-
26
- ```html
27
- <div class="container"></div>
28
- ```
29
-
30
- ```css
31
- .container {
32
- padding: 20px;
33
- }
34
- .container + .container {
35
- margin-top: 10px;
36
- }
37
- ```
38
-
39
- ### 表单布局
40
-
41
- ![搜索条件布局][service_life]
42
-
43
- ```html
44
- <div class="search-form">
45
- <div class="search-item">
46
- <div class="item-label">常规搜索项</div>
47
- <div class="item-content"><el-input /></div>
48
- </div>
49
- <div class="search-item">
50
- <div class="select-label"><el-select /></div>
51
- <div class="select-content"><el-input /></div>
52
- </div>
53
- </div>
54
- ```
55
-
56
- ### 表格
57
-
58
- ```vue
59
- <template>
60
- <el-table :data="tableData" border height="200" :summary-method="getSummaries" show-summary>
61
- <el-table-column prop="id" label="ID" width="180"> </el-table-column>
62
- <el-table-column prop="name" label="姓名"> </el-table-column>
63
- <el-table-column prop="amount1" label="数值 1(元)"> </el-table-column>
64
- <el-table-column prop="amount2" label="数值 2(元)"> </el-table-column>
65
- <el-table-column prop="amount3" label="数值 3(元)"> </el-table-column>
66
- </el-table>
67
- </template>
68
- <script>
69
- export default {
70
- data() {
71
- return {
72
- tableData: [
73
- {
74
- id: '12987122',
75
- name: '王小虎',
76
- amount1: '234',
77
- amount2: '3.2',
78
- amount3: 10
79
- },
80
- {
81
- id: '12987123',
82
- name: '王小虎',
83
- amount1: '165',
84
- amount2: '4.43',
85
- amount3: 12
86
- }
87
- ]
88
- }
89
- },
90
- methods: {
91
- getSummaries() {
92
- // 合计行现支持 返回 数组和对象两种方式
93
- // return ['总计','xxxx','123','45','32']
94
- // return { id:'总计',name:'xxxx',amount1:'123',amount2:'45',amount3:'32', }
95
- }
96
- }
97
- }
98
- </script>
99
- ```
100
-
101
- [service_life]: data:image/jpeg;base64,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
1
+ # 前端 ui 样式规范
2
+
3
+ ### 字体
4
+
5
+ ```css
6
+ .text-12 {
7
+ font-size: 12px;
8
+ line-height: 18px;
9
+ }
10
+ .text-14 {
11
+ font-size: 14px;
12
+ line-height: 20px;
13
+ }
14
+ .text-16 {
15
+ font-size: 16px;
16
+ line-height: 22px;
17
+ }
18
+ .text-24 {
19
+ font-size: 16px;
20
+ line-height: 34px;
21
+ }
22
+ ```
23
+
24
+ ### 布局
25
+
26
+ ```html
27
+ <div class="container"></div>
28
+ ```
29
+
30
+ ```css
31
+ .container {
32
+ padding: 20px;
33
+ }
34
+ .container + .container {
35
+ margin-top: 10px;
36
+ }
37
+ ```
38
+
39
+ ### 表单布局
40
+
41
+ ![搜索条件布局][service_life]
42
+
43
+ ```html
44
+ <div class="search-form">
45
+ <div class="search-item">
46
+ <div class="item-label">常规搜索项</div>
47
+ <div class="item-content"><el-input /></div>
48
+ </div>
49
+ <div class="search-item">
50
+ <div class="select-label"><el-select /></div>
51
+ <div class="select-content"><el-input /></div>
52
+ </div>
53
+ </div>
54
+ ```
55
+
56
+ ### 表格
57
+
58
+ ```vue
59
+ <template>
60
+ <el-table :data="tableData" border height="200" :summary-method="getSummaries" show-summary>
61
+ <el-table-column prop="id" label="ID" width="180"> </el-table-column>
62
+ <el-table-column prop="name" label="姓名"> </el-table-column>
63
+ <el-table-column prop="amount1" label="数值 1(元)"> </el-table-column>
64
+ <el-table-column prop="amount2" label="数值 2(元)"> </el-table-column>
65
+ <el-table-column prop="amount3" label="数值 3(元)"> </el-table-column>
66
+ </el-table>
67
+ </template>
68
+ <script>
69
+ export default {
70
+ data() {
71
+ return {
72
+ tableData: [
73
+ {
74
+ id: '12987122',
75
+ name: '王小虎',
76
+ amount1: '234',
77
+ amount2: '3.2',
78
+ amount3: 10
79
+ },
80
+ {
81
+ id: '12987123',
82
+ name: '王小虎',
83
+ amount1: '165',
84
+ amount2: '4.43',
85
+ amount3: 12
86
+ }
87
+ ]
88
+ }
89
+ },
90
+ methods: {
91
+ getSummaries() {
92
+ // 合计行现支持 返回 数组和对象两种方式
93
+ // return ['总计','xxxx','123','45','32']
94
+ // return { id:'总计',name:'xxxx',amount1:'123',amount2:'45',amount3:'32', }
95
+ }
96
+ }
97
+ }
98
+ </script>
99
+ ```
100
+
101
+ [service_life]: data:image/jpeg;base64,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