bri-components 1.2.59 → 1.2.60

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/package.json +1 -1
  2. package/src/components/controls/base/BriUpload/BriUpload.vue +1 -1
  3. package/src/components/controls/base/DshCascader/DshCascader.vue +1 -1
  4. package/src/components/controls/base/DshSelect/DshCheckbox.vue +8 -146
  5. package/src/components/controls/base/DshSelect/DshSelect.vue +10 -121
  6. package/src/components/controls/control.less +194 -0
  7. package/src/components/controls/mixins/controlMixin.js +5 -0
  8. package/src/components/controls/mixins/selectMixin.js +10 -5
  9. package/src/components/unit/DshFormUnit.vue +1 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "bri-components",
3
- "version": "1.2.59",
3
+ "version": "1.2.60",
4
4
  "author": "dengshanghui",
5
5
  "description": "a component lib for vue project",
6
6
  "main": "src/index.js",
package/src/components/controls/base/BriUpload/BriUpload.vue CHANGED
@@ -138,7 +138,7 @@
138
138
  selfPropsObj () {
139
139
  return {
140
140
  _fileType: "file",
141
- _showType: this.isFullRow && !this.isInTable ? "old" : "inline", // 宽度为100%、且不在级联表格或内部表格里的 显示老版
141
+ _showType: this.isHeightAuto ? "old" : "inline", // 宽度为100%、且不在级联表格或内部表格里的 显示老版
142
142
  // _multiple: true,
143
143
  _useType: "drag",
144
144
  _maxSize: 1024 * 1024,
package/src/components/controls/base/DshCascader/DshCascader.vue CHANGED
@@ -89,7 +89,7 @@
89
89
  <dsh-tags
90
90
  :class="{
91
91
  ...commonClass,
92
- 'DshCascaders-show-ellipsis': !(isDetailShow && isFullRow)
92
+ 'DshCascaders-show-ellipsis': !(isDetailShow && isHeightAuto)
93
93
  }"
94
94
  :list="curValNameList"
95
95
  ></dsh-tags>
package/src/components/controls/base/DshSelect/DshCheckbox.vue CHANGED
@@ -12,7 +12,7 @@
12
12
  :class="{
13
13
  'DshCheckbox-flat': true,
14
14
  'DshCheckbox-flat-color': useColor,
15
- 'DshCheckbox-flat-scroll': !isFullRow,
15
+ 'DshCheckbox-flat-scroll': !isHeightAuto,
16
16
  }"
17
17
  v-model="curValList"
18
18
  >
@@ -22,12 +22,9 @@
22
22
  :class="getItemClass(item)"
23
23
  :style="getItemColorStyle(item)"
24
24
  :label="item._key"
25
- :disabled="getCheckItemDisabled(item)"
25
+ :disabled="getCheckItemDisabled(item, index)"
26
26
  :border="useColor"
27
- @click.native="clickCheckItem(item, index)"
28
27
  >
29
- <slot :item="item"></slot>
30
-
31
28
  <span>{{ item.name || item._name }}</span>
32
29
  </Checkbox>
33
30
  </CheckboxGroup>
@@ -36,9 +33,7 @@
36
33
  <!-- dropdown模式 -->
37
34
  <template v-else>
38
35
  <Select
39
- :class="{
40
- 'DshCheckbox-dropdown': true,
41
- }"
36
+ class="DshCheckbox-dropdown"
42
37
  :value="curValList"
43
38
  :multiple="true"
44
39
  :placeholder="selfPropsObj._placeholder"
@@ -56,7 +51,7 @@
56
51
  :label="item.name || item._name"
57
52
  :disabled="getCheckItemDisabled(item, index)"
58
53
  >
59
- <Checkbox :value="getCheckItemStatus(item)"></Checkbox>
54
+ <Checkbox :value="curValList.includes(item._key)"></Checkbox>
60
55
 
61
56
  <slot :item="item"></slot>
62
57
 
@@ -87,7 +82,7 @@
87
82
  <dsh-tags
88
83
  :class="{
89
84
  ...commonClass,
90
- 'DshCheckbox-show-ellipsis': !(isDetailShow && isFullRow)
85
+ 'DshCheckbox-show-ellipsis': !(isDetailShow && isHeightAuto)
91
86
  }"
92
87
  :list="curValObjList"
93
88
  ></dsh-tags>
@@ -141,142 +136,9 @@
141
136
  </script>
142
137
 
143
138
  <style lang="less">
144
- .DshCheckbox {
145
- &-flat {
146
- width: 100%;
147
-
148
- .ivu-checkbox-wrapper {
149
- margin-bottom: 4px;
150
- margin-right: 16px;
151
-
152
- .ivu-checkbox {
153
- &.ivu-checkbox-checked {
154
- .ivu-checkbox-inner {
155
- background-color: @themeColor;
156
- }
157
- }
158
- }
159
- }
160
-
161
- &-color {
162
- .ivu-checkbox-wrapper {
163
- height: 32px;
164
- border: none;
165
- border-radius: 4px;
166
- line-height: 32px;
167
-
168
- .ivu-checkbox {
169
- .ivu-checkbox-inner {
170
- border: 2px solid @themeColor;
171
- background-color: transparent;
172
- }
173
- .ivu-checkbox-focus {
174
- box-shadow: 0 0 0 0;
175
- }
176
-
177
- &.ivu-checkbox-checked {
178
- .ivu-checkbox-inner {
179
- &:after {
180
- top: 2px;
181
- left: 4px;
182
- }
183
- }
184
- }
185
- }
186
-
187
- &-disabled {
188
- background-color: #f3f3f3!important;
189
- color: #E5E5E5!important;
190
-
191
- .ivu-checkbox.ivu-checkbox-disabled {
192
- .ivu-checkbox-inner {
193
- border-color: #E5E5E5;
194
- }
195
-
196
- &.ivu-checkbox-checked {
197
- .ivu-checkbox-inner {
198
- background-color: #E5E5E5;
199
- }
200
- }
201
-
202
- & + span {
203
- color: #E5E5E5;
204
- }
205
- }
206
- }
207
- }
208
-
209
- // ivu-checkbox-wrapper 和 color-1 在一个div上
210
- each(@resourceColor, {
211
- .color-@{index} {
212
- .ivu-checkbox {
213
- .ivu-checkbox-inner {
214
- border-color: @value;
215
- }
139
+ @import url("../../control.less");
216
140
 
217
- &.ivu-checkbox-checked {
218
- .ivu-checkbox-inner {
219
- background-color: @value;
220
- }
221
- }
222
- }
223
- }
224
- });
225
- }
226
-
227
- &-scroll {
228
- .bri-scrollbar3();
229
- white-space: nowrap;
230
- overflow: auto;
231
-
232
- .ivu-checkbox-wrapper {
233
- margin-bottom: 4px;
234
- }
235
- }
236
- }
237
-
238
- &-dropdown {
239
- .ivu-select-multiple {
240
- .ivu-select-selection {
241
- height: 32px;
242
- .dsh-flex-row-between-center();
243
-
244
- & > div {
245
- width: 100%;
246
- height: 100%;
247
- word-break: keep-all;
248
- white-space: nowrap;
249
- overflow: auto;
250
- .bri-scrollbar3();
251
-
252
- .ivu-tag {
253
- margin: 2px 4px 0px 0px;
254
- background-color: @borderColor;
255
- }
256
- }
257
- }
258
-
259
- &.ivu-select-disabled {
260
- .ivu-select-selection {
261
- & > div {
262
- .ivu-tag {
263
- background-color: @border-disabled;
264
- }
265
- }
266
- }
267
- }
268
-
269
- .ivu-select-item-selected:after {
270
- content: none;
271
- }
272
- }
273
- }
274
-
275
- // 查看
276
- &-show {
277
- &-ellipsis {
278
- .dsh-ellipsis();
279
- }
280
- }
141
+ .DshCheckbox {
142
+ #control-select(checkbox);
281
143
  }
282
144
  </style>
package/src/components/controls/base/DshSelect/DshSelect.vue CHANGED
@@ -12,9 +12,9 @@
12
12
  :class="{
13
13
  'DshSelect-flat': true,
14
14
  'DshSelect-flat-color': useColor,
15
- 'DshSelect-flat-scroll': !isFullRow
15
+ 'DshSelect-flat-scroll': !isHeightAuto
16
16
  }"
17
- :value="curVal"
17
+ v-model="curVal"
18
18
  :type="radioGroupType"
19
19
  >
20
20
  <Radio
@@ -22,14 +22,13 @@
22
22
  :key="item._key"
23
23
  :class="getItemClass(item)"
24
24
  :style="getItemColorStyle(item)"
25
+ :value="curVal === item._key"
25
26
  :label="item._key"
26
- :disabled="getRadioItemDisabled(item)"
27
+ :disabled="getRadioItemDisabled(item, index)"
27
28
  :border="useColor"
28
- @click.native="clickRadioItem(item, index)"
29
+ @click.native.stop="cancelRadioItemSelect(item, index)"
29
30
  >
30
- <span>
31
- {{ item.name || item._name }}
32
- </span>
31
+ <span @click.stop="0">{{ item.name || item._name }}</span>
33
32
  </Radio>
34
33
  </RadioGroup>
35
34
  </template>
@@ -93,7 +92,7 @@
93
92
  <dsh-tags
94
93
  :class="{
95
94
  ...commonClass,
96
- 'DshSelect-show-ellipsis': !(isDetailShow && isFullRow)
95
+ 'DshSelect-show-ellipsis': !(isDetailShow && isHeightAuto)
97
96
  }"
98
97
  :list="[curValObj]"
99
98
  ></dsh-tags>
@@ -152,113 +151,10 @@
152
151
  </script>
153
152
 
154
153
  <style lang="less">
155
- .DshSelect {
156
- &-flat {
157
- width: 100%;
158
-
159
- &-color {
160
- .ivu-radio-border {
161
- height: 32px;
162
- line-height: 32px;
163
- border-radius: 4px;
164
- border: none;
165
- color: #FFF;
166
- margin-right: 16px;
167
- }
168
-
169
- .ivu-radio {
170
- .ivu-radio-inner {
171
- border: 2px solid @themeColor;
172
- background-color: transparent;
173
- width: 14px;
174
- height: 14px;
175
-
176
- &::after {
177
- width: 6px;
178
- height: 6px;
179
- left: 2px;
180
- top: 2px;
181
- background-color: transparent;
182
- opacity: 1;
183
- transform: scale(1);
184
- }
185
- }
154
+ @import url("../../control.less");
186
155
 
187
- .ivu-radio-focus {
188
- box-shadow: 0 0 0 0;
189
- }
190
- }
191
-
192
- .ivu-radio-checked {
193
- .ivu-radio-inner {
194
- &::after {
195
- background-color: @themeColor;
196
- }
197
- }
198
- }
199
-
200
- each(@resourceColor, {
201
- .color-@{index} {
202
- .ivu-radio {
203
- .ivu-radio-inner {
204
- border-color: @value;
205
- }
206
- }
207
-
208
- .ivu-radio-checked {
209
- .ivu-radio-inner {
210
- &::after {
211
- background-color: @value;
212
- }
213
- }
214
- }
215
- }
216
- });
217
- }
218
-
219
- &-scroll {
220
- .bri-scrollbar3();
221
- overflow: auto;
222
- white-space: nowrap;
223
- }
224
- }
225
-
226
- &-dropdown {
227
- .ivu-select-multiple {
228
- .ivu-select-selection {
229
- height: 32px;
230
- .dsh-flex-row-between-center();
231
-
232
- & > div {
233
- width: 100%;
234
- height: 100%;
235
- word-break: keep-all;
236
- white-space: nowrap;
237
- overflow: auto;
238
- .bri-scrollbar3();
239
-
240
- .ivu-tag {
241
- margin: 2px 4px 0px 0px;
242
- background-color: @borderColor;
243
- }
244
- }
245
- }
246
-
247
- &.ivu-select-disabled {
248
- .ivu-select-selection {
249
- & > div {
250
- .ivu-tag {
251
- background-color: @border-disabled;
252
- }
253
- }
254
- }
255
- }
256
-
257
- .ivu-select-item-selected:after {
258
- content: none;
259
- }
260
- }
261
- }
156
+ .DshSelect {
157
+ #control-select(radio);
262
158
 
263
159
  &-modal {
264
160
  .ivu-modal-wrap {
@@ -311,12 +207,5 @@
311
207
  }
312
208
  }
313
209
  }
314
-
315
- // 查看
316
- &-show {
317
- &-ellipsis {
318
- .dsh-ellipsis();
319
- }
320
- }
321
210
  }
322
211
  </style>
package/src/components/controls/control.less ADDED
@@ -0,0 +1,194 @@
1
+ #control-select(@control-type) {
2
+ &-flat {
3
+ width: 100%;
4
+
5
+ .ivu-@{control-type}-wrapper {
6
+ height: auto;
7
+ padding: 6px 0px;
8
+ margin-right: 12px;
9
+ margin-bottom: 4px;
10
+ white-space: normal;
11
+
12
+ .ivu-@{control-type} {
13
+ .ivu-@{control-type}-inner {
14
+
15
+ }
16
+
17
+ .ivu-@{control-type}-focus {
18
+ box-shadow: 0 0 0 0;
19
+ }
20
+
21
+ &-checked {
22
+ // 因为不一致，所以明确名字分开写
23
+ .ivu-radio-inner {
24
+ &::after {
25
+ background-color: @themeColor;
26
+ }
27
+ }
28
+
29
+ .ivu-checkbox-inner {
30
+ background-color: @themeColor;
31
+ }
32
+ }
33
+
34
+ & + span {
35
+
36
+ }
37
+ }
38
+
39
+ // 选项置灰时
40
+ &-disabled {
41
+ .ivu-@{control-type} {
42
+ .ivu-@{control-type}-inner {
43
+ border-color: #aaaaaa!important; // 为了useColor且disbaled时，压住下面each里的样式，这些还生效
44
+ }
45
+
46
+ &-checked {
47
+ .ivu-@{control-type}-inner {
48
+ background-color: #E5E5E5!important; // 为了useColor且disbaled时，压住下面each里的样式，这些还生效
49
+
50
+ &::after {
51
+ background-color: #aaaaaa!important; // 为了useColor且disbaled时，压住下面each里的样式，这些还生效
52
+ }
53
+ }
54
+ }
55
+
56
+
57
+ & + span {
58
+ color: #aaaaaa!important; // 为了useColor且disbaled时，压住下面each里的样式，这些还生效
59
+ }
60
+ }
61
+ }
62
+
63
+ &:last-child {
64
+ margin-right: 0px;
65
+ }
66
+ }
67
+
68
+ &-color {
69
+ .ivu-@{control-type}-wrapper {
70
+ padding: 6px 15px;
71
+ border-radius: 4px;
72
+ border-color: transparent;
73
+ line-height: 16px;
74
+
75
+ .ivu-@{control-type} {
76
+ .ivu-@{control-type}-inner {
77
+ border: 2px solid @themeColor;
78
+ background-color: transparent;
79
+ }
80
+
81
+ // 因为不一致，所以明确名字分开写
82
+ .ivu-radio-inner {
83
+ width: 14px;
84
+ height: 14px;
85
+
86
+ &::after {
87
+ width: 6px;
88
+ height: 6px;
89
+ left: 2px;
90
+ top: 2px;
91
+ }
92
+ }
93
+ .ivu-checkbox-inner {
94
+ &::after {
95
+ top: 2px;
96
+ left: 4px;
97
+ }
98
+ }
99
+ }
100
+ }
101
+
102
+ each(@resourceColor, {
103
+ .color-@{index}.ivu-@{control-type}-wrapper {
104
+ .ivu-@{control-type} {
105
+ .ivu-@{control-type}-inner {
106
+ border-color: @value;
107
+ }
108
+
109
+ &-checked {
110
+ // 因为不一致，所以明确名字分开写
111
+ .ivu-radio-inner {
112
+ &::after {
113
+ background-color: @value;
114
+ }
115
+ }
116
+ .ivu-checkbox-inner {
117
+ background-color: @value;
118
+ }
119
+ }
120
+ }
121
+
122
+ &-checked {
123
+ border-color: @value;
124
+ }
125
+
126
+ &-disabled {
127
+ border-color: #f3f3f3;
128
+ background-color: #f3f3f3!important; // 压住style里的background-color
129
+
130
+ &.ivu-@{control-type}-wrapper-checked {
131
+ border-color: #aaaaaa;
132
+ }
133
+ }
134
+ }
135
+ });
136
+ }
137
+
138
+ &-scroll {
139
+ .bri-scrollbar3();
140
+ white-space: nowrap;
141
+ overflow: auto;
142
+
143
+ .ivu-@{control-type}-wrapper {
144
+ height: 30px;
145
+ margin-bottom: 2px;
146
+ white-space: nowrap;
147
+ }
148
+ }
149
+ }
150
+
151
+ &-dropdown {
152
+ &.ivu-select-multiple {
153
+ .ivu-select-selection {
154
+ height: 32px;
155
+ .dsh-flex-row-between-center();
156
+
157
+ & > div {
158
+ .bri-scrollbar3();
159
+ width: 100%;
160
+ height: 100%;
161
+ word-break: keep-all;
162
+ white-space: nowrap;
163
+ overflow: auto;
164
+
165
+ .ivu-tag {
166
+ margin: 2px 4px 0px 0px;
167
+ background-color: @borderColor;
168
+ }
169
+ }
170
+ }
171
+
172
+ &.ivu-select-disabled {
173
+ .ivu-select-selection {
174
+ & > div {
175
+ .ivu-tag {
176
+ background-color: @border-disabled;
177
+ }
178
+ }
179
+ }
180
+ }
181
+
182
+ .ivu-select-item-selected:after {
183
+ content: none;
184
+ }
185
+ }
186
+ }
187
+
188
+ // 查看
189
+ &-show {
190
+ &-ellipsis {
191
+ .dsh-ellipsis();
192
+ }
193
+ }
194
+ }
package/src/components/controls/mixins/controlMixin.js CHANGED
@@ -123,9 +123,14 @@ export default {
123
123
  "bri-control-nodata": this.$isEmptyData(this.curVal)
124
124
  };
125
125
  },
126
+ // 单独一行
126
127
  isFullRow () {
127
128
  return this.propsObj._span === 24 || !this.propsObj._span;
128
129
  },
130
+ // 控件内容高度 自由
131
+ isHeightAuto () {
132
+ return this.isFullRow && !this.isInTable;
133
+ },
129
134
  clearable () {
130
135
  return this.commonDealPropsObj._clearable;
131
136
  },
package/src/components/controls/mixins/selectMixin.js CHANGED
@@ -96,6 +96,12 @@ export default {
96
96
  }
97
97
  }
98
98
  },
99
+ // 单选模式 取消选择项
100
+ cancelRadioItemSelect (item, index) {
101
+ if (this.curVal === item._key) {
102
+ this.clickRadioItem(item, index);
103
+ }
104
+ },
99
105
  // 多选模式 点击选项
100
106
  clickCheckItem (item, index) {
101
107
  if (!this.getCheckItemDisabled(item)) {
@@ -108,6 +114,7 @@ export default {
108
114
  },
109
115
 
110
116
  /* ------- 方法 ------- */
117
+ // 每项的class集合 --flat方式在用
111
118
  getItemClass (item) {
112
119
  return [
113
120
  this.useColor
@@ -116,6 +123,7 @@ export default {
116
123
  item.class
117
124
  ];
118
125
  },
126
+ // 每项的颜色相关style --flat方式在用
119
127
  getItemColorStyle (item) {
120
128
  const color = this.colorMap[item.color] || this.colorMap["color-1"];
121
129
  return this.useColor
@@ -125,6 +133,7 @@ export default {
125
133
  }
126
134
  : {};
127
135
  },
136
+ // 每项的具体样式 -查看状态时用
128
137
  getItemShowStyle (item) {
129
138
  return {
130
139
  ...this.getItemColorStyle(item),
@@ -146,13 +155,9 @@ export default {
146
155
  return !!(
147
156
  this.selfPropsObj._disabled ||
148
157
  item._disabled ||
149
- (this.curValList.length >= this.selfPropsObj._max && !this.getCheckItemStatus(item))
158
+ (this.curValList.length >= this.selfPropsObj._max && !this.curValList.includes(item._key))
150
159
  );
151
160
  },
152
- // 获取多选项的选中状态
153
- getCheckItemStatus (item) {
154
- return this.curValList.includes(item._key);
155
- },
156
161
  getItemObj (key) {
157
162
  const obj = this.listData.find(item => item._key === key) || {
158
163
  _key: key,
package/src/components/unit/DshFormUnit.vue CHANGED
@@ -7,7 +7,6 @@
7
7
  'DshFormUnit-line': formItem._line
8
8
  },
9
9
  formControlClass,
10
- formItem.formControlClass
11
10
  ]"
12
11
  :style="{
13
12
  width: `calc(${(formItem._br ? (formItem._span || 24)/24 : 1) * 100}% - 12px)`,
@@ -211,6 +210,7 @@
211
210
 
212
211
  &-control {
213
212
  min-height: 32px;
213
+ overflow: hidden;
214
214
  }
215
215
 
216
216
  &-line {