@lx-frontend/wrap-element-ui 1.0.2-beta.4 → 1.0.2-beta.6

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 (8) hide show
  1. package/package.json +5 -5
  2. package/src/components/EditableTable/bizHooks/useDragSort.ts +2 -2
  3. package/src/components/EditableTable/features/bizColorSelect.vue +1 -1
  4. package/src/components/EditableTable/features/bizTableHeaderPopover.vue +24 -24
  5. package/src/components/EditableTable/features/bizTableOperatePopover.vue +7 -7
  6. package/src/components/EditableTable/features/bizViewSettingDialog.vue +17 -17
  7. package/src/components/EditableTable/index.less +437 -440
  8. package/src/components/EditableTable/index.vue +7 -7
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@lx-frontend/wrap-element-ui",
3
- "version": "1.0.2-beta.4",
3
+ "version": "1.0.2-beta.6",
4
4
  "description": "wrap-element-ui",
5
5
  "author": "",
6
6
  "main": "src/components/index.ts",
@@ -22,12 +22,12 @@
22
22
  "package.json",
23
23
  "src/components"
24
24
  ],
25
- "dependencies": {
26
- "lodash": "^4.17.21"
25
+ "peerDependencies": {
26
+ "element-ui": "^2.15.14",
27
+ "lodash": "^4.17.21",
28
+ "vue": "~2.7.16"
27
29
  },
28
30
  "devDependencies": {
29
- "element-ui": "^2.15.14",
30
- "vue": "~2.7.16",
31
31
  "@faker-js/faker": "^8.4.1",
32
32
  "@storybook/addon-docs": "7.6.19",
33
33
  "@storybook/addon-essentials": "7.6.19",
package/src/components/EditableTable/bizHooks/useDragSort.ts CHANGED
@@ -46,7 +46,7 @@ export function useDragSort({ props, emit, viewSettingDragSortOptions, pageSize,
46
46
  handleDragMouseDown(e, +target.dataset.index);
47
47
  }
48
48
 
49
- if ([...target.classList].includes('view-setting-drag-target')) {
49
+ if ([...target.classList].includes('editable-table__view-setting-drag-target')) {
50
50
  dragType.value = 'view-setting';
51
51
  // 处理显示设置拖拽
52
52
  handleViewSettingDragMouseDown(e, +target.dataset.index);
@@ -208,7 +208,7 @@ export function useDragSort({ props, emit, viewSettingDragSortOptions, pageSize,
208
208
  }
209
209
 
210
210
  const handleViewSettingDragMouseDown = (event, index) => {
211
- const rowDoms = [...document.getElementsByClassName('view-setting-draggable-item')]
211
+ const rowDoms = [...document.getElementsByClassName('editable-table__view-setting-draggable-item')]
212
212
  .reduce((pre, item, index) => ({ ...pre, [index]: [item] }), {});
213
213
  draggingData.value.isDragging = true;
214
214
  draggingData.value.rowDoms = rowDoms;
package/src/components/EditableTable/features/bizColorSelect.vue CHANGED
@@ -4,7 +4,7 @@
4
4
  v-model="visible"
5
5
  placement="right"
6
6
  trigger="click"
7
- popper-class="color-popover"
7
+ popper-class="editable-table__color-popover"
8
8
  >
9
9
  <div class="color-list">
10
10
  <div
package/src/components/EditableTable/features/bizTableHeaderPopover.vue CHANGED
@@ -14,26 +14,26 @@
14
14
  <div :class="['editable-table__sort-icon', headActive && 'editable-table__sort-icon--active']" />
15
15
  </span>
16
16
  </template>
17
- <div class="sort-filter">
18
- <div class="sort-filter__column-title">
17
+ <div class="editable-table__sort-filter">
18
+ <div class="editable-table__sort-filter__column-title">
19
19
  {{ column.label }}
20
20
  </div>
21
21
  <div
22
22
  v-if="column.isColumnSortable"
23
- class="sort-filter__sort"
23
+ class="editable-table__sort-filter__sort"
24
24
  >
25
- <div class="sort-filter__sort-title">
25
+ <div class="editable-table__sort-filter__sort-title">
26
26
  排序
27
27
  </div>
28
- <div class="sort-filter__sort-btns">
28
+ <div class="editable-table__sort-filter__sort-btns">
29
29
  <el-button
30
- :class="['sort-filter__sort-btn', tempSortingColumn?.prop === column.prop && tempSortType === 'ascending' && 'sort-filter__sort-btn--active']"
30
+ :class="['editable-table__sort-filter__sort-btn', tempSortingColumn?.prop === column.prop && tempSortType === 'ascending' && 'editable-table__sort-filter__sort-btn--active']"
31
31
  @click="() => emit('update:sort', 'ascending')"
32
32
  >
33
33
  升序
34
34
  </el-button>
35
35
  <el-button
36
- :class="['sort-filter__sort-btn', tempSortingColumn?.prop === column.prop && tempSortType === 'descending' && 'sort-filter__sort-btn--active']"
36
+ :class="['editable-table__sort-filter__sort-btn', tempSortingColumn?.prop === column.prop && tempSortType === 'descending' && 'editable-table__sort-filter__sort-btn--active']"
37
37
  @click="() => emit('update:sort', 'descending')"
38
38
  >
39
39
  降序
@@ -42,13 +42,13 @@
42
42
  </div>
43
43
  <div
44
44
  v-if="column.search && !Array.isArray(column.search)"
45
- class="sort-filter__search"
45
+ class="editable-table__sort-filter__search"
46
46
  >
47
- <div class="sort-filter__search-title">
47
+ <div class="editable-table__sort-filter__search-title">
48
48
  搜索
49
49
  </div>
50
50
  <el-input
51
- class="sort-filter__search-input"
51
+ class="editable-table__sort-filter__search-input"
52
52
  placeholder="请输入内容"
53
53
  :value="tempSearchValue[column.prop]"
54
54
  @input="val => emit('update:tempSearchValue', column.prop, val)"
@@ -57,18 +57,18 @@
57
57
 
58
58
  <div
59
59
  v-if="column.search && Array.isArray(column.search)"
60
- class="sort-filter__search"
60
+ class="editable-table__sort-filter__search"
61
61
  style="display: flex;flex-direction: column;gap: 12px;"
62
62
  >
63
63
  <div
64
64
  v-for="item in column.search"
65
65
  :key="item.prop"
66
66
  >
67
- <div class="sort-filter__search-title">
67
+ <div class="editable-table__sort-filter__search-title">
68
68
  {{ item.label }}
69
69
  </div>
70
70
  <el-input
71
- class="sort-filter__search-input"
71
+ class="editable-table__sort-filter__search-input"
72
72
  placeholder="请输入内容"
73
73
  :value="tempSearchValue[item.prop]"
74
74
  @input="val => emit('update:tempSearchValue', item.prop, val)"
@@ -78,14 +78,14 @@
78
78
 
79
79
  <div
80
80
  v-if="column.filters && ((Array.isArray(column.filters) ? column.filters : column.filters.options).length > 0)"
81
- class="sort-filter__filter"
81
+ class="editable-table__sort-filter__filter"
82
82
  >
83
- <div class="sort-filter__filter-title">
83
+ <div class="editable-table__sort-filter__filter-title">
84
84
  筛选
85
85
  </div>
86
86
  <el-checkbox-group
87
87
  v-if="column.filters && (Array.isArray(column.filters) || column.filters.type === 'checkbox')"
88
- class="sort-filter__filter-checkbox-group"
88
+ class="editable-table__sort-filter__filter-checkbox-group"
89
89
  :value="tempFilteredValue[column.prop]"
90
90
  @input="val => emit('update:tempFilteredValue', column.prop, val)"
91
91
  >
@@ -93,7 +93,7 @@
93
93
  v-for="item in (Array.isArray(column.filters) ? column.filters : column.filters.options)"
94
94
  :key="item.value"
95
95
  :label="item.value"
96
- class="sort-filter__filter-checkbox"
96
+ class="editable-table__sort-filter__filter-checkbox"
97
97
  >
98
98
  <slot
99
99
  name="filter-item"
@@ -126,19 +126,19 @@
126
126
  </div>
127
127
  <div
128
128
  v-if="column.summary"
129
- class="sort-filter__filter"
129
+ class="editable-table__sort-filter__filter"
130
130
  >
131
- <div class="sort-filter__filter-title">
131
+ <div class="editable-table__sort-filter__filter-title">
132
132
  统计
133
133
  </div>
134
134
  <el-checkbox-group
135
- class="sort-filter__filter-checkbox-group"
135
+ class="editable-table__sort-filter__filter-checkbox-group"
136
136
  :value="tempSummaryList"
137
137
  @input="val => emit('update:tempSummaryList', val)"
138
138
  >
139
139
  <el-checkbox
140
140
  :label="column.prop"
141
- class="sort-filter__filter-checkbox"
141
+ class="editable-table__sort-filter__filter-checkbox"
142
142
  >
143
143
  <slot
144
144
  name="summay-item"
@@ -149,15 +149,15 @@
149
149
  </el-checkbox>
150
150
  </el-checkbox-group>
151
151
  </div>
152
- <div class="sort-filter__footer">
152
+ <div class="editable-table__sort-filter__footer">
153
153
  <el-button
154
- class="sort-filter__reset-btn"
154
+ class="editable-table__sort-filter__reset-btn"
155
155
  @click="() => emit('reset')"
156
156
  >
157
157
  重置
158
158
  </el-button>
159
159
  <el-button
160
- class="sort-filter__confirm-btn"
160
+ class="editable-table__sort-filter__confirm-btn"
161
161
  type="primary"
162
162
  @click="() => emit('confirm')"
163
163
  >
package/src/components/EditableTable/features/bizTableOperatePopover.vue CHANGED
@@ -3,34 +3,34 @@
3
3
  ref="operationPopoverRef"
4
4
  placement="bottom"
5
5
  trigger="click"
6
- popper-class="operation-popover"
6
+ popper-class="editable-table__operation-popover"
7
7
  >
8
8
  <div
9
9
  slot="reference"
10
- class="operation-popover__operation-reference btn-pointer"
10
+ class="editable-table__operation-popover__operation-reference btn-pointer"
11
11
  >
12
- <el-button :class="['operation-popover__operation-btn', hoveringCellInfo.rowIndex === scope.$index && 'operation-popover__operation-btn--active']">
12
+ <el-button :class="['editable-table__operation-popover__operation-btn', hoveringCellInfo.rowIndex === scope.$index && 'editable-table__operation-popover__operation-btn--active']">
13
13
  操作
14
14
  </el-button>
15
15
  </div>
16
- <div class="operation-popover__operation">
16
+ <div class="editable-table__operation-popover__operation">
17
17
  <div
18
18
  v-if="defaultOperations.includes('delete')"
19
- class="operation-popover__operation-item btn-pointer"
19
+ class="editable-table__operation-popover__operation-item btn-pointer"
20
20
  @click="() => emit('delete')"
21
21
  >
22
22
  删除
23
23
  </div>
24
24
  <div
25
25
  v-if="defaultOperations.includes('edit')"
26
- class="operation-popover__operation-item btn-pointer"
26
+ class="editable-table__operation-popover__operation-item btn-pointer"
27
27
  @click="() => emit('edit')"
28
28
  >
29
29
  编辑
30
30
  </div>
31
31
  <div
32
32
  v-if="defaultOperations.includes('top')"
33
- class="operation-popover__operation-item btn-pointer"
33
+ class="editable-table__operation-popover__operation-item btn-pointer"
34
34
  @click="() => emit('rowPinToTop')"
35
35
  >
36
36
  置顶
package/src/components/EditableTable/features/bizViewSettingDialog.vue CHANGED
@@ -6,11 +6,11 @@
6
6
  top="12vh"
7
7
  :close-on-click-modal="false"
8
8
  append-to-body
9
- custom-class="view-setting__dialog"
9
+ custom-class="editable-table__view-setting__dialog"
10
10
  >
11
- <div class="view-setting__content">
12
- <div class="view-setting__content-left">
13
- <div class="view-setting__checkbox-wrapper">
11
+ <div class="editable-table__view-setting__content">
12
+ <div class="editable-table__view-setting__content-left">
13
+ <div class="editable-table__view-setting__checkbox-wrapper">
14
14
  <el-checkbox-group v-model="columnsToBeShown">
15
15
  <el-checkbox
16
16
  v-for="item in props.columnConfig"
@@ -18,51 +18,51 @@
18
18
  :label="item.prop"
19
19
  :disabled="item.isAlwaysShow"
20
20
  >
21
- <div class="view-setting__content-left-item">
21
+ <div class="editable-table__view-setting__content-left-item">
22
22
  {{ item.label }}
23
23
  </div>
24
24
  </el-checkbox>
25
25
  </el-checkbox-group>
26
26
  </div>
27
27
  </div>
28
- <div class="view-setting__content-right">
29
- <div class="view-setting__content-right-title">
28
+ <div class="editable-table__view-setting__content-right">
29
+ <div class="editable-table__view-setting__content-right-title">
30
30
  已选择
31
- <div class="view-setting__selected-count">
31
+ <div class="editable-table__view-setting__selected-count">
32
32
  {{ columnsToBeShown.length }}
33
33
  </div>
34
34
  </div>
35
- <div class="view-setting__content-right-frize">
35
+ <div class="editable-table__view-setting__content-right-frize">
36
36
  冻结前
37
37
  <el-input
38
- class="view-setting__content-right-input"
38
+ class="editable-table__view-setting__content-right-input"
39
39
  :value="tempLeftFixedColumnCount"
40
40
  @input="handleInputTempLeftFixedColumnCount"
41
41
  />
42
42
  列
43
43
  </div>
44
- <div class="view-setting__content-right-selected">
44
+ <div class="editable-table__view-setting__content-right-selected">
45
45
  <div
46
46
  v-for="(item, index) in viewSettingDragSortOptions"
47
47
  :key="item.prop"
48
- class="view-setting__selected-item view-setting-draggable-item"
48
+ class="editable-table__view-setting__selected-item editable-table__view-setting-draggable-item"
49
49
  >
50
- <div class="view-setting__selected-item-left">
50
+ <div class="editable-table__view-setting__selected-item-left">
51
51
  <div
52
- class="view-setting-drag-target view-setting__icon-wrapper"
52
+ class="editable-table__view-setting-drag-target editable-table__view-setting__icon-wrapper"
53
53
  :data-index="index"
54
54
  >
55
55
  <div
56
- class="view-setting-drag-target editable-table-drag-icon"
56
+ class="editable-table__view-setting-drag-target editable-table-drag-icon"
57
57
  :data-index="index"
58
58
  />
59
59
  </div>
60
- <div class="view-setting__selected-item-name">
60
+ <div class="editable-table__view-setting__selected-item-name">
61
61
  {{ item.label }}
62
62
  </div>
63
63
  </div>
64
64
  <div
65
- :class="['view-setting__selected-item-close', item.isAlwaysShow ? 'view-setting__selected-item-close--disabled' : '']"
65
+ :class="['editable-table__view-setting__selected-item-close', item.isAlwaysShow ? 'editable-table__view-setting__selected-item-close--disabled' : '']"
66
66
  @click="handleColumnClose(item)"
67
67
  >
68
68
  <i class="el-icon-close" />