bri-components 1.2.34 → 1.2.35

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 (17) hide show
  1. package/lib/0.bri-components.min.js +1 -1
  2. package/lib/1.bri-components.min.js +1 -1
  3. package/lib/2.bri-components.min.js +1 -1
  4. package/lib/3.bri-components.min.js +1 -1
  5. package/lib/4.bri-components.min.js +1 -1
  6. package/lib/5.bri-components.min.js +1 -1
  7. package/lib/6.bri-components.min.js +1 -1
  8. package/lib/bri-components.min.js +7 -7
  9. package/lib/styles/bri-components.css +1 -1
  10. package/package.json +1 -1
  11. package/src/components/form/DshForm.vue +22 -0
  12. package/src/components/small/DshButtons.vue +3 -3
  13. package/src/components/small/DshTabs.vue +283 -186
  14. package/src/components/small/DshTabsSet.vue +311 -0
  15. package/src/index.js +3 -1
  16. package/src/styles/components/index.less +0 -1
  17. package/src/styles/components/small/DshTabs.less +0 -82
package/src/components/small/DshTabs.vue CHANGED
@@ -1,227 +1,324 @@
1
-
2
1
  <template>
3
- <div class="DshTabs">
4
- <dsh-draggable
5
- v-model="list"
6
- class="DshTabs-draggable"
7
- :style="{ minWidth: `${list.length * 110}px` }"
8
- @change="$dispatchEvent(operationMap.drag, $event.moved.element, null, list)"
2
+ <Tabs
3
+ :class="['DshTabs', `DshTabs-${mode}`]"
4
+ v-model="curTabKey"
5
+ >
6
+ <TabPane
7
+ v-for="tabItem in list"
8
+ :key="tabItem._key"
9
+ class="DshTabs-item"
10
+ :name="tabItem._key"
11
+ :label="getLabel(tabItem)"
12
+ >
13
+ <slot
14
+ v-if="renderStatusMap[tabItem._key]"
15
+ :tabItem="tabItem"
16
+ ></slot>
17
+ </TabPane>
18
+
19
+ <div
20
+ slot="extra"
21
+ class="DshTabs-extra"
9
22
  >
10
23
  <span
11
- v-for="(item, index) in list"
12
- :key="item._id"
13
- :class="[
14
- 'DshTabs-item',
15
- { 'DshTabs-item-normal': item.screenType !== 'all' },
16
- { 'DshTabs-item-active': item.screenType !== 'all' && !!curItem && curItem._id === item._id },
17
- { 'DshTabs-item-isEdit': item.isEdit }
18
- ]"
19
- @click="$dispatchEvent(operationMap.clickTab, item, index, list)"
24
+ v-for="tabItem in rightTabList"
25
+ :key="tabItem._key"
26
+ :class="{
27
+ 'DshTabs-extra-item': true,
28
+ 'DshTabs-extra-item-active': tabItem._key === curTabKey
29
+ }"
30
+ @click="curTabKey = tabItem._key"
20
31
  >
21
- <Input
22
- v-if="item.isEdit"
23
- :ref="item._id"
24
- class="DshTabs-item-input"
25
- v-model="item.name"
26
- :placeholder="`输入${theme}名字……`"
27
- @on-blur="$dispatchEvent(operationMap.nameBlur, item, index, list)"
28
- @on-change="$dispatchEvent(operationMap.update, item, index, list)"
29
- @click.native.stop="0"
30
- />
31
- <span
32
- v-else
33
- class="DshTabs-item-name dsh-ellipsis"
34
- >{{ item.name }}</span>
35
-
36
- <template v-if="!item.isEdit && item.screenType !== 'all'">
37
- <Icon
38
- v-for="operationItem in $getOperationList(['delete', 'clickUpdate'])"
39
- :key="operationItem.type"
40
- :class="[`DshTabs-item-${operationItem.type}`]"
41
- :type="operationItem.icon"
42
- :color="operationItem.color"
43
- :size="operationItem.size || 18"
44
- @click.native.stop="$dispatchEvent(operationItem, item, index, list)"
45
- />
46
- </template>
47
- </span><!--
48
-
49
- 添加
50
- --><span
51
- v-for="operationItem in $getOperationList(['create'])"
52
- :key="operationItem.type"
53
- class="DshTabs-item DshTabs-item-create"
54
- @click="$dispatchEvent(operationItem, null, null, list)"
55
- >
56
- <Icon
57
- class="DshTabs-create-icon"
58
- :type="operationItem.icon"
59
- :color="operationItem.color"
60
- :size="operationItem.size"
61
- />
32
+ {{ tabItem.name }}
62
33
  </span>
63
- </dsh-draggable>
64
- </div>
34
+ </div>
35
+ </Tabs>
65
36
  </template>
66
37
 
67
38
  <script>
68
39
  export default {
69
40
  name: "DshTabs",
70
41
  props: {
71
- theme: {
42
+ value: {
43
+ type: String
44
+ },
45
+ mode: {
72
46
  type: String,
73
- default: "分组"
47
+ default: "creative",
48
+ validator (val) {
49
+ return ["creative", "tradition", "page"].includes(val);
50
+ }
74
51
  },
75
- value: {
52
+ list: {
76
53
  type: Array,
77
54
  default () {
78
55
  return [];
79
56
  }
80
- },
81
- canDeleFunc: Function
57
+ }
82
58
  },
83
59
  data () {
84
60
  return {
85
- curItem: null
61
+ renderStatusMap: {}
86
62
  };
87
63
  },
88
64
  computed: {
89
- list: {
65
+ curTabKey: {
90
66
  get () {
91
- return this.value.map(item => {
92
- this.$set(item, "isEdit", item.isEdit || false);
93
- return item;
94
- });
67
+ return this.value;
95
68
  },
96
- set (val) {
97
- this.$emit("input", val);
69
+ set (tabKey) {
70
+ if (tabKey !== this.tmpTabKey) {
71
+ this.init(tabKey);
72
+
73
+ this.$emit("input", tabKey);
74
+ this.$emit("change", tabKey, this.list.find(item => item._key === tabKey));
75
+ }
98
76
  }
99
77
  },
100
- operationMap () {
101
- return {
102
- clickTab: {
103
- name: "点击",
104
- type: "clickTab",
105
- event: "clickTab"
106
- },
107
- create: {
108
- name: "添加",
109
- type: "create",
110
- icon: "md-add",
111
- size: 16,
112
- event: "create"
113
- },
114
- delete: {
115
- name: "删除",
116
- type: "delete",
117
- icon: "md-trash",
118
- size: 12,
119
- color: "red",
120
- event: "delete"
121
- },
122
- update: {
123
- name: "修改",
124
- type: "update",
125
- event: "update"
126
- },
127
- drag: {
128
- name: "拖动",
129
- type: "drag",
130
- event: "drag"
131
- },
132
-
133
- clickUpdate: {
134
- name: "点击修改",
135
- type: "clickUpdate",
136
- icon: "md-create",
137
- size: 12,
138
- color: "#1b9aee",
139
- event: "clickUpdate"
140
- },
141
- nameBlur: {
142
- name: "输入框失去焦点",
143
- type: "nameBlur",
144
- event: "nameBlur"
145
- }
146
- };
78
+ rightTabList () {
79
+ return this.list.filter(item => item.slot === "extra");
147
80
  }
148
81
  },
149
82
  created () {
150
- this.init();
83
+ this.init(this.curTabKey != undefined ? this.curTabKey : (this.list[0] && this.list[0]._key));
151
84
  },
85
+ mounted () {},
152
86
  methods: {
153
- // 初始化
154
- init () {
155
- this.curItem = this.list[0];
156
- this.select();
87
+ init (tabKey) {
88
+ this.tmpTabKey = tabKey;
89
+ this.$set(this.renderStatusMap, tabKey, true);
157
90
  },
158
91
 
159
- // 添加
160
- create (operationItem, data, index, list) {
161
- let item = {
162
- _id: this.$ObjectID().str,
163
- _key: this.$randomB36("FieldGroup"),
164
- name: `${this.theme}${this.list.length + 1}`,
165
- isEdit: false
166
- };
167
- list.push(item);
168
-
169
- this.curItem = item;
170
- this.select();
171
- this.change();
172
- },
173
- // 删除
174
- delete (operationItem, data, index, list) {
175
- if (!this.canDeleFunc || this.canDeleFunc(data, index, list)) {
176
- list.splice(index, 1);
177
-
178
- if (this.curItem && this.curItem._id === data._id) {
179
- this.curItem = list[1];
180
- this.select();
92
+ getLabel (tabItem) {
93
+ return tabItem.slot !== "extra"
94
+ ? (h) => {
95
+ return h("div", {
96
+ style: {
97
+ padding: "0px 16px"
98
+ }
99
+ }, tabItem.name + tabItem._key);
100
+ }
101
+ : undefined;
102
+ }
103
+ }
104
+ };
105
+ </script>
106
+
107
+ <style lang="less">
108
+ .DshTabs {
109
+ width: 100%;
110
+ height: 100%;
111
+ display: flex;
112
+ flex-direction: column;
113
+
114
+ &-item {
115
+ width: 100%;
116
+ height: 100%;
117
+ padding-top: 20px;
118
+ }
119
+
120
+ &-extra {
121
+ height: 100%;
122
+
123
+ &-item {
124
+ display: inline-block;
125
+ padding: 8px 16px;
126
+ font-size: @textSize;
127
+ cursor: pointer;
128
+
129
+ &-active {
130
+ color: @themeColor;
131
+ position: relative;
132
+
133
+ &::after {
134
+ content: "";
135
+ width: 100%;
136
+ height: 2px;
137
+ position: absolute;
138
+ bottom: 0px;
139
+ left: 0;
140
+ z-index: 1;
141
+ background-color: @themeColor;
181
142
  }
182
- this.change();
183
143
  }
184
- },
185
- // 修改
186
- update (operationItem, data, index, list) {
187
- this.change();
188
- },
189
- // 拖动
190
- drag (operationItem, data, index, list) {
191
- this.change();
192
- },
144
+ }
145
+ }
146
+
147
+ &-creative,
148
+ &-tradition {
149
+ .ivu-tabs {
150
+ color: @titleColor;
151
+
152
+ &-bar {
153
+ height: 100%;
154
+ margin: 0;
155
+ border-bottom: 0;
156
+
157
+ .ivu-tabs-nav-right {
158
+ height: 100%;
159
+ }
160
+
161
+ .ivu-tabs-nav-container {
162
+ height: 100%;
163
+
164
+ .ivu-tabs-nav-wrap {
165
+ .ivu-tabs-nav-scroll {
166
+ .ivu-tabs-nav {
167
+ .ivu-tabs-ink-bar {
168
+ height: 0;
169
+ background-color: #FFF;
170
+ }
171
+
172
+ .ivu-tabs-tab {
173
+ padding: 12px 10px;
174
+ margin: 0 10px;
175
+ font-size: @textSize;
176
+
177
+ &-active,
178
+ &-focused {
179
+ color: @themeColor;
180
+ background-color: #FFF;
181
+ }
182
+ }
183
+ }
184
+ }
185
+
186
+ &.ivu-tabs-nav-scrollable {
187
+ .ivu-tabs-nav-prev,
188
+ .ivu-tabs-nav-next {
189
+ height: 100%;
190
+ display: flex;
191
+ flex-direction: row;
192
+ justify-content: center;
193
+ align-items: center;
193
194
 
194
- // 切换视图
195
- clickTab (operationItem, data, index, list) {
196
- if (data.screenType !== "all" && (!this.curItem || this.curItem._id !== data._id)) {
197
- this.curItem = data;
198
- this.select();
195
+ i {
196
+ display: inline-block;
197
+ font-size: @largeTitleSize;
198
+ }
199
+ }
200
+ }
201
+ }
202
+ }
199
203
  }
200
- },
201
- // 点击视图名
202
- clickUpdate (operationItem, data, index) {
203
- data.isEdit = true;
204
- data.oldName = data.name;
205
-
206
- this.$nextTick(() => {
207
- this.$refs[data._id] && this.$refs[data._id][0].focus();
208
- });
209
- },
210
- // 输入框失去焦点
211
- nameBlur (operationItem, data, index) {
212
- data.isEdit = false;
213
- data.name = data.name || data.oldName;
214
- },
204
+ }
205
+ }
215
206
 
216
- // 当前值change回调事件
217
- select () {
218
- this.$emit("select", this.curItem);
219
- },
220
- // 标记改变回调事件
221
- change () {
222
- this.$emit("input", this.list);
223
- this.$emit("change", this.list);
207
+ &-tradition {
208
+ .ivu-tabs {
209
+ color: #ffffff;
210
+
211
+ &-bar {
212
+ .ivu-tabs-nav-right {
213
+
214
+ }
215
+
216
+ .ivu-tabs-nav-container {
217
+
218
+ .ivu-tabs-nav-wrap {
219
+ .ivu-tabs-nav-scroll {
220
+ .ivu-tabs-nav {
221
+ .ivu-tabs-ink-bar {
222
+
223
+ }
224
+
225
+ .ivu-tabs-tab {
226
+ &:hover {
227
+ color: #ffffff;
228
+ }
229
+
230
+ &-active,
231
+ &-focused {
232
+ color: @theme-active;
233
+
234
+ &:hover {
235
+ color: @theme-active;
236
+ }
237
+ }
238
+ }
239
+ }
240
+ }
241
+ }
242
+ }
243
+ }
224
244
  }
225
245
  }
226
- };
227
- </script>
246
+
247
+ // 页面编辑版
248
+ &-page {
249
+ .ivu-tabs {
250
+ &-bar {
251
+ border-bottom: 0px!important;
252
+ margin-bottom: 0px!important;
253
+ align-items: center;
254
+
255
+ .ivu-tabs-nav-wrap {
256
+
257
+ }
258
+
259
+ .ivu-tabs-nav-container {
260
+ .ivu-tabs-nav-wrap {
261
+
262
+ .ivu-tabs-nav {
263
+ &-prev,
264
+ &-next {
265
+ padding-top: 4px;
266
+
267
+ i {
268
+ font-size: @titleSize;
269
+ }
270
+ }
271
+
272
+ &-scroll {
273
+ .ivu-tabs-nav {
274
+ display: flex;
275
+ align-items: center;
276
+
277
+ // tab切换下方下划线
278
+ .ivu-tabs-ink-bar-animated {
279
+ display: none;
280
+ }
281
+
282
+ // tab切换标签
283
+ .ivu-tabs-tab {
284
+ display: inline-block;
285
+ height: 40px;
286
+ // width: fit-content;
287
+ padding: 0px!important;
288
+ margin-right: 1px!important;
289
+ background-color: #E5E5E5;
290
+ text-align: center;
291
+ line-height: 40px;
292
+ font-size: @smallTitleSize;
293
+ color: #666666;
294
+
295
+ &-active {
296
+ background: @white!important;
297
+ color: @themeColor!important;
298
+ font-weight: 700;
299
+ }
300
+
301
+ &:hover {
302
+ color: @themeColor!important;
303
+ }
304
+ }
305
+ }
306
+ }
307
+ }
308
+ }
309
+ }
310
+
311
+ }
312
+
313
+ &-content {
314
+ flex: 1;
315
+ min-height: 0px;
316
+ }
317
+
318
+ &-context-menu {
319
+
320
+ }
321
+ }
322
+ }
323
+ }
324
+ </style>