bkui-vue 0.0.1-beta.19 → 0.0.1-beta.21
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.
- package/README.md +7 -3
- package/README_EN.md +7 -3
- package/dist/bkui-vue.cjs.js +1429 -365
- package/dist/bkui-vue.esm.js +1427 -364
- package/dist/bkui-vue.umd.js +1429 -365
- package/dist/style.css +376 -85
- package/lib/button/button.css +9 -0
- package/lib/button/button.d.ts +25 -1
- package/lib/button/button.less +18 -10
- package/lib/button/button.variable.css +9 -0
- package/lib/button/index.d.ts +42 -4
- package/lib/button/index.js +1 -1
- package/lib/code-diff/code-diff.css +114 -0
- package/lib/code-diff/code-diff.d.ts +71 -0
- package/lib/code-diff/code-diff.less +144 -0
- package/lib/code-diff/code-diff.variable.css +207 -0
- package/lib/code-diff/index.d.ts +6 -0
- package/lib/components.d.ts +1 -0
- package/lib/date-picker/date-picker.d.ts +20 -130
- package/lib/date-picker/index.js +1 -1
- package/lib/date-picker/interface.d.ts +1 -1
- package/lib/date-picker/props.d.ts +111 -0
- package/lib/directives/clickoutside.d.ts +3 -23
- package/lib/directives/index.js +2 -2
- package/lib/icon/arrows-right.d.ts +4 -0
- package/lib/icon/arrows-right.js +15 -0
- package/lib/icon/bk.d.ts +4 -0
- package/lib/icon/bk.js +15 -0
- package/lib/icon/index.d.ts +4 -0
- package/lib/icon/index.js +1 -1
- package/lib/icon/qq.d.ts +4 -0
- package/lib/icon/qq.js +15 -0
- package/lib/icon/weixin.d.ts +4 -0
- package/lib/icon/weixin.js +15 -0
- package/lib/input/index.d.ts +58 -4
- package/lib/input/index.js +2 -2
- package/lib/input/input.css +19 -2
- package/lib/input/input.d.ts +31 -1
- package/lib/input/input.less +25 -3
- package/lib/input/input.variable.css +19 -2
- package/lib/loading/index.d.ts +31 -9
- package/lib/loading/index.js +1 -1
- package/lib/loading/loading.css +98 -71
- package/lib/loading/loading.d.ts +23 -8
- package/lib/loading/loading.less +62 -49
- package/lib/loading/loading.variable.css +98 -71
- package/lib/shared/index.js +1 -1
- package/lib/shared/vue-types.d.ts +4 -0
- package/lib/styles/index.d.ts +1 -0
- package/lib/styles/index.js +1 -1
- package/lib/table/index.d.ts +42 -1
- package/lib/table/index.js +1 -1
- package/lib/table/props.d.ts +13 -0
- package/lib/table/render.d.ts +9 -0
- package/lib/table/table.d.ts +19 -0
- package/lib/table/utils.d.ts +8 -0
- package/lib/tag/index.d.ts +189 -22
- package/lib/tag/index.js +1 -1
- package/lib/tag/tag.css +91 -0
- package/lib/tag/tag.d.ts +83 -7
- package/lib/tag/tag.less +103 -2
- package/lib/tag/tag.variable.css +91 -0
- package/lib/transfer/index.d.ts +27 -0
- package/lib/transfer/index.js +1 -0
- package/lib/transfer/transfer.css +158 -0
- package/lib/transfer/transfer.d.ts +185 -0
- package/lib/transfer/transfer.less +171 -0
- package/lib/transfer/transfer.variable.css +251 -0
- package/lib/tree/index.d.ts +22 -3
- package/lib/tree/index.js +1 -1
- package/lib/tree/props.d.ts +11 -0
- package/lib/tree/tree.css +1 -12
- package/lib/tree/tree.d.ts +10 -1
- package/lib/tree/tree.less +10 -24
- package/lib/tree/tree.variable.css +1 -12
- package/lib/tree/util.d.ts +20 -3
- package/package.json +8 -4
package/lib/tag/tag.less
CHANGED
@@ -1,5 +1,106 @@
|
|
1
1
|
@import '../styles/themes/themes.less';
|
2
2
|
|
3
|
-
|
4
|
-
|
3
|
+
@tag-base-color: #fff;
|
4
|
+
@tag-success-color: #14a568;
|
5
|
+
@tag-info-color: @primary-color;
|
6
|
+
@tag-warning-color: #fe9c00;
|
7
|
+
@tag-danger-color: @danger-color;
|
8
|
+
|
9
|
+
@tag-success-bg-color: rgba(20,165,104,.1);
|
10
|
+
@tag-info-bg-color: rgba(58,132,255,.1);
|
11
|
+
@tag-warning-bg-color: rgba(254,156,0,.1);
|
12
|
+
@tag-danger-bg-color: rgba(234,53,54,.1);
|
13
|
+
@tag-filled-bg-color: #979ba5;
|
14
|
+
|
15
|
+
@tag-success-border-color: rgba(20,165,104,.3);
|
16
|
+
@tag-info-border-color: rgba(58,132,255,.3);
|
17
|
+
@tag-warning-border-color: rgba(254,165,0,.3);
|
18
|
+
@tag-danger-border-color: rgba(234,53,54,.3);
|
19
|
+
|
20
|
+
@tag-checkable-hover-bg-color: rgba(151,155,165,.15);
|
21
|
+
|
22
|
+
@themeSelectors: success, info, warning, danger;
|
23
|
+
|
24
|
+
.bk-tag {
|
25
|
+
display: inline-block;
|
26
|
+
height: 22px;
|
27
|
+
padding: 0 10px;
|
28
|
+
margin: 2px 0 2px 6px;
|
29
|
+
font-size: 12px;
|
30
|
+
line-height: 22px;
|
31
|
+
color: @default-color;
|
32
|
+
cursor: default;
|
33
|
+
background-color: rgba(151,155,165,.1);
|
34
|
+
border-color: rgba(217, 220, 230, .6);
|
35
|
+
box-sizing: border-box;
|
36
|
+
|
37
|
+
each(@themeSelectors, {
|
38
|
+
@color: 'tag-@{value}-color';
|
39
|
+
@borderColor: 'tag-@{value}-border-color';
|
40
|
+
@bgColor: 'tag-@{value}-bg-color';
|
41
|
+
&.bk-tag-@{value} {
|
42
|
+
color: @@color;
|
43
|
+
border-color: @@borderColor;
|
44
|
+
background-color: @@bgColor;
|
45
|
+
&.bk-tag-filled {
|
46
|
+
background-color: @@color;
|
47
|
+
}
|
48
|
+
}
|
49
|
+
});
|
50
|
+
|
51
|
+
&:hover {
|
52
|
+
opacity: .8;
|
53
|
+
}
|
54
|
+
|
55
|
+
&.bk-tag-filled {
|
56
|
+
color: @tag-base-color;
|
57
|
+
background-color: @tag-filled-bg-color;
|
58
|
+
}
|
59
|
+
|
60
|
+
&.bk-tag-stroke {
|
61
|
+
padding: 0 9px;
|
62
|
+
line-height: 20px;
|
63
|
+
border-style: solid;
|
64
|
+
border-width: 1px;
|
65
|
+
}
|
66
|
+
|
67
|
+
&.bk-tag-closable {
|
68
|
+
padding: 0 4px 0 10px;
|
69
|
+
}
|
70
|
+
|
71
|
+
&.bk-tag-checkable {
|
72
|
+
cursor: pointer;
|
73
|
+
background: none;
|
74
|
+
|
75
|
+
&:hover {
|
76
|
+
background: @tag-checkable-hover-bg-color;
|
77
|
+
}
|
78
|
+
}
|
79
|
+
|
80
|
+
&.bk-tag-check {
|
81
|
+
color: @tag-base-color;
|
82
|
+
background: @tag-info-color;
|
83
|
+
|
84
|
+
&:hover {
|
85
|
+
color: @tag-base-color;
|
86
|
+
background: @tag-info-color;
|
87
|
+
opacity: 1;
|
88
|
+
}
|
89
|
+
}
|
90
|
+
|
91
|
+
.bk-tag-icon {
|
92
|
+
display: inline-block;
|
93
|
+
margin-right: 4px;
|
94
|
+
font-size: 14px;
|
95
|
+
line-height: 0;
|
96
|
+
}
|
97
|
+
|
98
|
+
.bk-tag-close {
|
99
|
+
display: inline-block;
|
100
|
+
margin-left: 4px;
|
101
|
+
font-size: 12px;
|
102
|
+
line-height: 0;
|
103
|
+
vertical-align: 1px;
|
104
|
+
cursor: pointer;
|
105
|
+
}
|
5
106
|
}
|
package/lib/tag/tag.variable.css
CHANGED
@@ -91,3 +91,94 @@
|
|
91
91
|
--table-body-font-color: #575961;
|
92
92
|
--table-row-hover-bg-color: #f5f7fa;
|
93
93
|
}
|
94
|
+
.bk-tag {
|
95
|
+
display: inline-block;
|
96
|
+
height: 22px;
|
97
|
+
padding: 0 10px;
|
98
|
+
margin: 2px 0 2px 6px;
|
99
|
+
font-size: 12px;
|
100
|
+
line-height: 22px;
|
101
|
+
color: var(--default-color);
|
102
|
+
cursor: default;
|
103
|
+
background-color: rgba(151, 155, 165, 0.1);
|
104
|
+
border-color: rgba(217, 220, 230, 0.6);
|
105
|
+
box-sizing: border-box;
|
106
|
+
}
|
107
|
+
.bk-tag.bk-tag-success {
|
108
|
+
color: #14a568;
|
109
|
+
border-color: rgba(20, 165, 104, 0.3);
|
110
|
+
background-color: rgba(20, 165, 104, 0.1);
|
111
|
+
}
|
112
|
+
.bk-tag.bk-tag-success.bk-tag-filled {
|
113
|
+
background-color: #14a568;
|
114
|
+
}
|
115
|
+
.bk-tag.bk-tag-info {
|
116
|
+
color: var(--primary-color);
|
117
|
+
border-color: rgba(58, 132, 255, 0.3);
|
118
|
+
background-color: rgba(58, 132, 255, 0.1);
|
119
|
+
}
|
120
|
+
.bk-tag.bk-tag-info.bk-tag-filled {
|
121
|
+
background-color: var(--primary-color);
|
122
|
+
}
|
123
|
+
.bk-tag.bk-tag-warning {
|
124
|
+
color: #fe9c00;
|
125
|
+
border-color: rgba(254, 165, 0, 0.3);
|
126
|
+
background-color: rgba(254, 156, 0, 0.1);
|
127
|
+
}
|
128
|
+
.bk-tag.bk-tag-warning.bk-tag-filled {
|
129
|
+
background-color: #fe9c00;
|
130
|
+
}
|
131
|
+
.bk-tag.bk-tag-danger {
|
132
|
+
color: var(--danger-color);
|
133
|
+
border-color: rgba(234, 53, 54, 0.3);
|
134
|
+
background-color: rgba(234, 53, 54, 0.1);
|
135
|
+
}
|
136
|
+
.bk-tag.bk-tag-danger.bk-tag-filled {
|
137
|
+
background-color: var(--danger-color);
|
138
|
+
}
|
139
|
+
.bk-tag:hover {
|
140
|
+
opacity: 0.8;
|
141
|
+
}
|
142
|
+
.bk-tag.bk-tag-filled {
|
143
|
+
color: #fff;
|
144
|
+
background-color: #979ba5;
|
145
|
+
}
|
146
|
+
.bk-tag.bk-tag-stroke {
|
147
|
+
padding: 0 9px;
|
148
|
+
line-height: 20px;
|
149
|
+
border-style: solid;
|
150
|
+
border-width: 1px;
|
151
|
+
}
|
152
|
+
.bk-tag.bk-tag-closable {
|
153
|
+
padding: 0 4px 0 10px;
|
154
|
+
}
|
155
|
+
.bk-tag.bk-tag-checkable {
|
156
|
+
cursor: pointer;
|
157
|
+
background: none;
|
158
|
+
}
|
159
|
+
.bk-tag.bk-tag-checkable:hover {
|
160
|
+
background: rgba(151, 155, 165, 0.15);
|
161
|
+
}
|
162
|
+
.bk-tag.bk-tag-check {
|
163
|
+
color: #fff;
|
164
|
+
background: var(--primary-color);
|
165
|
+
}
|
166
|
+
.bk-tag.bk-tag-check:hover {
|
167
|
+
color: #fff;
|
168
|
+
background: var(--primary-color);
|
169
|
+
opacity: 1;
|
170
|
+
}
|
171
|
+
.bk-tag .bk-tag-icon {
|
172
|
+
display: inline-block;
|
173
|
+
margin-right: 4px;
|
174
|
+
font-size: 14px;
|
175
|
+
line-height: 0;
|
176
|
+
}
|
177
|
+
.bk-tag .bk-tag-close {
|
178
|
+
display: inline-block;
|
179
|
+
margin-left: 4px;
|
180
|
+
font-size: 12px;
|
181
|
+
line-height: 0;
|
182
|
+
vertical-align: 1px;
|
183
|
+
cursor: pointer;
|
184
|
+
}
|
@@ -0,0 +1,27 @@
|
|
1
|
+
/**
|
2
|
+
* Tencent is pleased to support the open source community by making
|
3
|
+
* 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
|
4
|
+
*
|
5
|
+
* Copyright (C) 2021 THL A29 Limited, a Tencent company. All rights reserved.
|
6
|
+
*
|
7
|
+
* 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
|
8
|
+
*
|
9
|
+
* License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
|
10
|
+
*
|
11
|
+
* ---------------------------------------------------
|
12
|
+
* Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
|
13
|
+
* documentation files (the "Software"), to deal in the Software without restriction, including without limitation
|
14
|
+
* the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
|
15
|
+
* to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
16
|
+
*
|
17
|
+
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of
|
18
|
+
* the Software.
|
19
|
+
*
|
20
|
+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
|
21
|
+
* THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
22
|
+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
|
23
|
+
* CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
|
24
|
+
* IN THE SOFTWARE.
|
25
|
+
*/
|
26
|
+
import Transfer from './transfer';
|
27
|
+
export default Transfer;
|
@@ -0,0 +1 @@
|
|
1
|
+
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("vue"),require("../shared"),require("../icon/"),require("../input")):"function"==typeof define&&define.amd?define(["exports","vue","../shared","../icon/","../input"],t):t((e="undefined"!=typeof globalThis?globalThis:e||self).bkuiVue={},e.Vue,e.Shared,e._,e.Input)}(this,(function(e,t,r,n,o){"use strict";function a(e){return e&&"object"==typeof e&&"default"in e?e:{default:e}}var u=a(o);function l(e){return e&&e.__esModule&&Object.prototype.hasOwnProperty.call(e,"default")?e.default:e}var s={exports:{}},i={exports:{}};!function(e){e.exports=function(e){if(Array.isArray(e))return e},e.exports.__esModule=!0,e.exports.default=e.exports}(i);var c={exports:{}};!function(e){e.exports=function(e,t){var r=null==e?null:"undefined"!=typeof Symbol&&e[Symbol.iterator]||e["@@iterator"];if(null!=r){var n,o,a=[],u=!0,l=!1;try{for(r=r.call(e);!(u=(n=r.next()).done)&&(a.push(n.value),!t||a.length!==t);u=!0);}catch(e){l=!0,o=e}finally{try{u||null==r.return||r.return()}finally{if(l)throw o}}return a}},e.exports.__esModule=!0,e.exports.default=e.exports}(c);var f={exports:{}},p={exports:{}};!function(e){e.exports=function(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,n=new Array(t);r<t;r++)n[r]=e[r];return n},e.exports.__esModule=!0,e.exports.default=e.exports}(p),function(e){var t=p.exports;e.exports=function(e,r){if(e){if("string"==typeof e)return t(e,r);var n=Object.prototype.toString.call(e).slice(8,-1);return"Object"===n&&e.constructor&&(n=e.constructor.name),"Map"===n||"Set"===n?Array.from(e):"Arguments"===n||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)?t(e,r):void 0}},e.exports.__esModule=!0,e.exports.default=e.exports}(f);var d={exports:{}};!function(e){e.exports=function(){throw new TypeError("Invalid attempt to destructure non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")},e.exports.__esModule=!0,e.exports.default=e.exports}(d),function(e){var t=i.exports,r=c.exports,n=f.exports,o=d.exports;e.exports=function(e,a){return t(e)||r(e,a)||n(e,a)||o()},e.exports.__esModule=!0,e.exports.default=e.exports}(s);var v=l(s.exports),h={exports:{}},y={exports:{}};!function(e){var t=p.exports;e.exports=function(e){if(Array.isArray(e))return t(e)},e.exports.__esModule=!0,e.exports.default=e.exports}(y);var x={exports:{}};!function(e){e.exports=function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)},e.exports.__esModule=!0,e.exports.default=e.exports}(x);var g={exports:{}};!function(e){e.exports=function(){throw new TypeError("Invalid attempt to spread non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method.")},e.exports.__esModule=!0,e.exports.default=e.exports}(g),function(e){var t=y.exports,r=x.exports,n=f.exports,o=g.exports;e.exports=function(e){return t(e)||r(e)||n(e)||o()},e.exports.__esModule=!0,e.exports.default=e.exports}(h);var m=l(h.exports);r.PropTypes.string,r.PropTypes.string,r.PropTypes.string,r.PropTypes.string,r.PropTypes.bool,r.PropTypes.bool,r.PropTypes.string,r.PropTypes.bool;var L=t.defineComponent({name:"Transfer",props:{title:{type:Array,default:function(){return[]}},extCls:{type:String,default:""},searchPlaceholder:{type:String,default:""},settingKey:{type:String,default:"id"},displayKey:{type:String,default:"value"},sortKey:{type:String,default:""},showOverflowTips:{type:Boolean,default:!1},searchable:{type:Boolean,default:!1},sortable:{type:Boolean,default:!1},sourceList:{type:Array,default:function(){return[]}},targetList:{type:Array,default:function(){return[]}},emptyContent:{type:Array,default:function(){return[]}}},emits:["change"],slots:["left-header","right-header","source-option","target-option","left-empty-content","right-empty-content"],setup:function(e,n){var o=n.emit,a=[],u=e.sortKey,l=e.sortable,s=t.ref(""),i=t.ref(null),c=t.ref([]),f=t.ref([]),p=t.ref(-1),d=t.ref(-1),h=t.computed((function(){return e.sourceList&&Array.isArray(e.sourceList)?-1!==e.sourceList.toString().indexOf("[object Object]"):"empty"})),y=t.computed((function(){return h.value?e.settingKey:"index"})),x=t.computed((function(){return h.value?e.displayKey:"value"})),g=t.computed((function(){return s.value?c.value.filter((function(e){return!r.isEmpty(e[x.value])&&String(e[x.value]).indexOf(s.value)>-1})):c.value}));t.watch((function(){return e.sourceList}),(function(){"empty"!==h.value&&(L(),V())}),{deep:!0}),t.watch((function(){return e.targetList}),(function(){L(),V()}),{deep:!0}),t.watch((function(){return[x.value,y.value]}),(function(){L()})),t.watch((function(){return e.sortKey}),(function(e){u=e,V()})),t.watch((function(){return e.sortable}),(function(e){l=e,V()}));var L=function(){"empty"!==h.value&&(h.value?_():b())},b=function(){if(!e.targetList.length||e.targetList.length>e.sourceList.length){for(var t,r=[],n=0;n<e.sourceList.length;n++)r.push({index:n,value:e.sourceList[n]});c.value=[].concat(r),(t=f.value).splice.apply(t,[0,f.value.length].concat([])),o("change",c.value,[],[])}else{for(var a=[],u=[],l=0;l<e.sourceList.length;l++)a.push({index:l,value:e.sourceList[l]});e.targetList.forEach((function(e){var t=a.find((function(t){return t.value===e}));t&&u.push(t)})),f.value=[].concat(u);var s=a.filter((function(e){return u.every((function(t){return t.index!==e.index}))}));c.value=m(s),o("change",c.value,m(w(f.value,!1)),[])}},_=function(){if(!e.targetList.length||e.targetList.length>e.sourceList.length){var t;(t=c.value).splice.apply(t,[0,c.value.length].concat(m(e.sourceList))),f.value=[],o("change",c.value,[],[])}else{var r=e.sourceList.filter((function(t){return e.targetList.every((function(e){return e!==t[y.value]}))})),n=[];e.sourceList.forEach((function(t){e.targetList.forEach((function(e){t[y.value]===e&&n.push(t)}))})),f.value=[].concat(n),c.value=m(r);var a=m(w(f.value));o("change",c.value,f.value,a)}},V=function(){var t=[];if(h.value)l||(u=""),t=m(e.sourceList);else{u=l?"index":"";for(var r=0;r<e.sourceList.length;r++)t.push({index:r,value:e.sourceList[r]})}if(u){var n=[];if(t.forEach((function(e){n.push(e[u])})),(a=[].concat(n)).length===e.sourceList.length){var o=m(c.value);c.value=m(M(o,u,a))}}},S=function(){var e=c.value,t=h.value?f.value:m(w(f.value,!1)),r=h.value?m(w(f.value)):[];o("change",e,t,r)},w=function(e){var t=!(arguments.length>1&&void 0!==arguments[1])||arguments[1],r=[];if(!e.length)return[];var n=m(e);return n.forEach((function(e){if(t)for(var n=0,o=Object.entries(e);n<o.length;n++){var a=v(o[n],2),u=a[0],l=a[1];u===y.value&&r.push(l)}else r.push(e.value)})),r},M=function(e,t,r){var n=r;return e.sort((function(e,r){return n.indexOf(e[t])-n.indexOf(r[t])>=0}))},N=function(e){c.value=c.value.filter((function(t){return t[y.value]!==e[y.value]}))};return"empty"!==h.value&&(h.value?_():b(),V()),{keyword:s,transferRef:i,dataList:c,allToRight:function(){p.value=-1;var t=g.value,r=f.value;t.forEach((function(e){r.push(e),N(e)})),a.length===e.sourceList.length?f.value=m(M(r,u,a)):f.value=m(r),S()},allToLeft:function(){d.value=-1;for(var t=f.value,r=c.value;t.length;){var n=t.shift();r.push(n),a.length===e.sourceList.length?c.value=m(M(r,u,a)):c.value=m(r)}S()},displayDataList:g,displayCode:x,leftHoverIndex:p,rightHoverIndex:d,handleItemMouseEvent:function(e,t,r,n){t.preventDefault(),t.stopPropagation();var o="over"===e?n:-1;r?p.value=o:d.value=o},handleItemClick:function(t,r,n){t.preventDefault(),t.stopPropagation(),n?p.value=-1:d.value=-1;var o=n?g.value[r]:f.value.splice(r,1)[0],l=n?f.value:c.value;l.push(o),n&&N(o);var s=a.length===e.sourceList.length?m(M(l,u,a)):m(l);n?f.value=m(s):c.value=m(s),S()},hasSelectedList:f}},render:function(){var e=this,r=this.$props,o=r.extCls,a=r.title,l=r.emptyContent,s=r.searchable,i=r.searchPlaceholder,c=function(r){var n,o,u="left-header"===r,l="".concat(u?null!==(n=a[0])&&void 0!==n?n:"左侧列表":null!==(o=a[1])&&void 0!==o?o:"右侧列表"),s=u?!e.dataList.length:!e.hasSelectedList.length;return e.$slots[r]?t.createVNode("div",{class:"slot-header"},[t.createVNode("div",{class:"slot-content"},[e.$slots[r]()])]):t.createVNode("div",{class:"header"},["".concat(l,"(共").concat(e.dataList.length,"条)"),t.createVNode("span",{class:{disabled:s},onClick:function(){return u&&e.dataList.length&&e.allToRight(),void(!u&&e.hasSelectedList.length&&e.allToLeft())}},[u?"全部添加":"清空"])])},f=function(r,o){var a=!(arguments.length>2&&void 0!==arguments[2])||arguments[2],u=a?e.leftHoverIndex:e.rightHoverIndex;return t.createVNode("div",{class:"item-content"},[t.createVNode("span",{class:"content-text",title:r[e.displayCode]},[r[e.displayCode]]),t.createVNode("span",{class:["icon-wrapper",o===u?"hover":""]},[a?t.createVNode(n.ArrowsRight,{class:"bk-icon"},null):t.createVNode(n.Error,{class:"bk-icon"},null)])])},p=function(r){var n="left"===r,o=n?e.displayDataList:e.hasSelectedList,a=n?"source-option":"target-option",u=n?"left-empty-content":"right-empty-content";return o.length?t.createVNode("ul",{class:["content",s&&n?"is-search":""]},[o.map((function(r,o){var u,l,s;return t.createVNode("li",{key:o,class:[e.$slots[a]?"custom-item":""],onClick:function(t){return e.handleItemClick(t,o,n)},onMouseover:function(t){return e.handleItemMouseEvent("over",t,n,o)},onMouseleave:function(t){return e.handleItemMouseEvent("leave",t,n,o)}},[null!==(s=null===(l=(u=e.$slots)[a])||void 0===l?void 0:l.call(u,r))&&void 0!==s?s:f(r,o,n)])}))]):function(r){var n,o="left-empty-content"===r,a=null!==(n=o?l[0]:l[1])&&void 0!==n?n:o?"无数据":"未选择任何项";return e.$slots[r]?t.createVNode("div",null,[e.$slots[r]()]):t.createVNode("div",{class:"empty"},[a])}(u)};return t.createVNode("div",{class:["bk-transfer",o],ref:"transferRef"},[t.createVNode("div",{class:"source-list"},[c("left-header"),s&&t.createVNode(u.default,{modelValue:e.keyword,"onUpdate:modelValue":function(t){return e.keyword=t},class:"transfer-search-input",clearable:!0,placeholder:i||"请输入搜索关键字",type:"search","left-icon":"bk-icon icon-search"},null),p("left")]),t.createVNode("div",{class:"transfer"},null),t.createVNode("div",{class:"target-list"},[c("right-header"),p("right")])])}});L.install=function(e){e.component(L.name,L)},e.default=L,Object.defineProperty(e,"__esModule",{value:!0})}));
|
@@ -0,0 +1,158 @@
|
|
1
|
+
/* 边框色 */
|
2
|
+
/* 按钮、表单边框颜色、禁用时文本颜色 */
|
3
|
+
/* 表格头部背景色、禁用底色 */
|
4
|
+
/* 大面积背景色 */
|
5
|
+
/* 重点表示、强调、链接以及带有明确指示性 */
|
6
|
+
/* 正常尺寸图标 */
|
7
|
+
.bk-transfer {
|
8
|
+
position: relative;
|
9
|
+
display: flex;
|
10
|
+
font-size: 14px;
|
11
|
+
flex-direction: row;
|
12
|
+
justify-content: center;
|
13
|
+
}
|
14
|
+
.bk-transfer .transfer {
|
15
|
+
position: absolute;
|
16
|
+
top: 50%;
|
17
|
+
left: 50%;
|
18
|
+
width: 30px;
|
19
|
+
height: 30px;
|
20
|
+
background: url('@bkui-vue/styles/images/transfer.png') no-repeat center center;
|
21
|
+
transform: translate(-50%, -50%);
|
22
|
+
}
|
23
|
+
.bk-transfer .source-list,
|
24
|
+
.bk-transfer .target-list {
|
25
|
+
height: 400px;
|
26
|
+
min-width: 200px;
|
27
|
+
overflow: hidden;
|
28
|
+
background-color: #fff;
|
29
|
+
border: 1px solid #dde4eb;
|
30
|
+
border-radius: 2px;
|
31
|
+
flex: 1;
|
32
|
+
}
|
33
|
+
.bk-transfer .source-list .slot-header,
|
34
|
+
.bk-transfer .target-list .slot-header {
|
35
|
+
position: relative;
|
36
|
+
height: 43px;
|
37
|
+
padding: 0 20px;
|
38
|
+
line-height: 43px;
|
39
|
+
background-color: #fafbfd;
|
40
|
+
border-bottom: 1px solid #dde4eb;
|
41
|
+
}
|
42
|
+
.bk-transfer .source-list .slot-header .slot-content,
|
43
|
+
.bk-transfer .target-list .slot-header .slot-content {
|
44
|
+
position: relative;
|
45
|
+
}
|
46
|
+
.bk-transfer .source-list .header,
|
47
|
+
.bk-transfer .target-list .header {
|
48
|
+
position: relative;
|
49
|
+
height: 43px;
|
50
|
+
padding: 0 20px;
|
51
|
+
line-height: 43px;
|
52
|
+
background-color: #fafbfd;
|
53
|
+
border-bottom: 1px solid #dde4eb;
|
54
|
+
}
|
55
|
+
.bk-transfer .source-list .header span,
|
56
|
+
.bk-transfer .target-list .header span {
|
57
|
+
position: absolute;
|
58
|
+
right: 10px;
|
59
|
+
font-size: 12px;
|
60
|
+
color: #3a84ff;
|
61
|
+
cursor: pointer;
|
62
|
+
}
|
63
|
+
.bk-transfer .source-list .header span.disabled,
|
64
|
+
.bk-transfer .target-list .header span.disabled {
|
65
|
+
color: #c4c6cc;
|
66
|
+
cursor: not-allowed;
|
67
|
+
}
|
68
|
+
.bk-transfer .source-list .empty,
|
69
|
+
.bk-transfer .target-list .empty {
|
70
|
+
position: relative;
|
71
|
+
top: 40%;
|
72
|
+
width: 100%;
|
73
|
+
color: #c4c6cc;
|
74
|
+
text-align: center;
|
75
|
+
cursor: default;
|
76
|
+
}
|
77
|
+
.bk-transfer .source-list .content,
|
78
|
+
.bk-transfer .target-list .content {
|
79
|
+
position: relative;
|
80
|
+
max-height: calc(100% - 50px);
|
81
|
+
padding: 0;
|
82
|
+
margin: 6px 0;
|
83
|
+
overflow-y: auto;
|
84
|
+
}
|
85
|
+
.bk-transfer .source-list .content.is-search,
|
86
|
+
.bk-transfer .target-list .content.is-search {
|
87
|
+
max-height: calc(100% - 86px);
|
88
|
+
}
|
89
|
+
.bk-transfer .source-list .content li.custom-item,
|
90
|
+
.bk-transfer .target-list .content li.custom-item,
|
91
|
+
.bk-transfer .source-list .content li .item-content,
|
92
|
+
.bk-transfer .target-list .content li .item-content {
|
93
|
+
position: relative;
|
94
|
+
display: flex;
|
95
|
+
height: 40px;
|
96
|
+
padding: 0 20px;
|
97
|
+
line-height: 40px;
|
98
|
+
list-style: none;
|
99
|
+
cursor: pointer;
|
100
|
+
align-items: center;
|
101
|
+
}
|
102
|
+
.bk-transfer .source-list .content li.custom-item:hover,
|
103
|
+
.bk-transfer .target-list .content li.custom-item:hover,
|
104
|
+
.bk-transfer .source-list .content li .item-content:hover,
|
105
|
+
.bk-transfer .target-list .content li .item-content:hover {
|
106
|
+
color: #3a84ff;
|
107
|
+
background-color: #eef6fe;
|
108
|
+
}
|
109
|
+
.bk-transfer .source-list .content li.custom-item .content-text,
|
110
|
+
.bk-transfer .target-list .content li.custom-item .content-text,
|
111
|
+
.bk-transfer .source-list .content li .item-content .content-text,
|
112
|
+
.bk-transfer .target-list .content li .item-content .content-text {
|
113
|
+
overflow: hidden;
|
114
|
+
text-overflow: ellipsis;
|
115
|
+
white-space: nowrap;
|
116
|
+
flex: 1;
|
117
|
+
}
|
118
|
+
.bk-transfer .source-list .content li.custom-item .icon-wrapper,
|
119
|
+
.bk-transfer .target-list .content li.custom-item .icon-wrapper,
|
120
|
+
.bk-transfer .source-list .content li .item-content .icon-wrapper,
|
121
|
+
.bk-transfer .target-list .content li .item-content .icon-wrapper {
|
122
|
+
display: none;
|
123
|
+
flex: 22px 0 0;
|
124
|
+
}
|
125
|
+
.bk-transfer .source-list .content li.custom-item .icon-wrapper.hover,
|
126
|
+
.bk-transfer .target-list .content li.custom-item .icon-wrapper.hover,
|
127
|
+
.bk-transfer .source-list .content li .item-content .icon-wrapper.hover,
|
128
|
+
.bk-transfer .target-list .content li .item-content .icon-wrapper.hover {
|
129
|
+
display: inline-block;
|
130
|
+
}
|
131
|
+
.bk-transfer .source-list .content::-webkit-scrollbar,
|
132
|
+
.bk-transfer .target-list .content::-webkit-scrollbar {
|
133
|
+
width: 4px;
|
134
|
+
}
|
135
|
+
.bk-transfer .source-list .content::-webkit-scrollbar-thumb,
|
136
|
+
.bk-transfer .target-list .content::-webkit-scrollbar-thumb {
|
137
|
+
height: 5px;
|
138
|
+
background-color: #e6e9ea;
|
139
|
+
border-radius: 2px;
|
140
|
+
}
|
141
|
+
.bk-transfer .source-list .content .bk-icon,
|
142
|
+
.bk-transfer .target-list .content .bk-icon {
|
143
|
+
font-size: 22px;
|
144
|
+
}
|
145
|
+
.bk-transfer .target-list {
|
146
|
+
margin-left: 33px;
|
147
|
+
}
|
148
|
+
.bk-transfer .transfer-search-input {
|
149
|
+
height: 36px;
|
150
|
+
line-height: 34px;
|
151
|
+
border: none;
|
152
|
+
border-bottom: 1px solid #f0f1f5;
|
153
|
+
outline: none;
|
154
|
+
}
|
155
|
+
.bk-transfer .transfer-search-input.is-focused {
|
156
|
+
border-color: #f0f1f5;
|
157
|
+
box-shadow: 0px 0px 3px 0px transparent;
|
158
|
+
}
|
@@ -0,0 +1,185 @@
|
|
1
|
+
/**
|
2
|
+
* Tencent is pleased to support the open source community by making
|
3
|
+
* 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) available.
|
4
|
+
*
|
5
|
+
* Copyright (C) 2021 THL A29 Limited, a Tencent company. All rights reserved.
|
6
|
+
*
|
7
|
+
* 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition) is licensed under the MIT License.
|
8
|
+
*
|
9
|
+
* License for 蓝鲸智云PaaS平台社区版 (BlueKing PaaS Community Edition):
|
10
|
+
*
|
11
|
+
* ---------------------------------------------------
|
12
|
+
* Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated
|
13
|
+
* documentation files (the "Software"), to deal in the Software without restriction, including without limitation
|
14
|
+
* the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and
|
15
|
+
* to permit persons to whom the Software is furnished to do so, subject to the following conditions:
|
16
|
+
*
|
17
|
+
* The above copyright notice and this permission notice shall be included in all copies or substantial portions of
|
18
|
+
* the Software.
|
19
|
+
*
|
20
|
+
* THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO
|
21
|
+
* THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
|
22
|
+
* AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF
|
23
|
+
* CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS
|
24
|
+
* IN THE SOFTWARE.
|
25
|
+
*/
|
26
|
+
import { ExtractPropTypes, PropType } from 'vue';
|
27
|
+
declare const transferProps: {
|
28
|
+
title: PropType<string[]>;
|
29
|
+
extCls: import("vue-types").VueTypeValidableDef<string> & {
|
30
|
+
default: string;
|
31
|
+
};
|
32
|
+
settingKey: import("vue-types").VueTypeValidableDef<string> & {
|
33
|
+
default: string;
|
34
|
+
};
|
35
|
+
displayKey: import("vue-types").VueTypeValidableDef<string> & {
|
36
|
+
default: string;
|
37
|
+
};
|
38
|
+
searchPlaceholder: import("vue-types").VueTypeValidableDef<string> & {
|
39
|
+
default: string;
|
40
|
+
};
|
41
|
+
showOverflowTips: import("vue-types").VueTypeValidableDef<boolean> & {
|
42
|
+
default: boolean;
|
43
|
+
};
|
44
|
+
searchable: import("vue-types").VueTypeValidableDef<boolean> & {
|
45
|
+
default: boolean;
|
46
|
+
};
|
47
|
+
sortKey: import("vue-types").VueTypeValidableDef<string> & {
|
48
|
+
default: string;
|
49
|
+
};
|
50
|
+
sortable: import("vue-types").VueTypeValidableDef<boolean> & {
|
51
|
+
default: boolean;
|
52
|
+
};
|
53
|
+
sourceList: ArrayConstructor;
|
54
|
+
targetList: ArrayConstructor;
|
55
|
+
emptyContent: PropType<string[]>;
|
56
|
+
};
|
57
|
+
export declare type TransferPropType = ExtractPropTypes<typeof transferProps>;
|
58
|
+
declare const _default: import("vue").DefineComponent<{
|
59
|
+
title: {
|
60
|
+
type: PropType<string[]>;
|
61
|
+
default: () => any[];
|
62
|
+
};
|
63
|
+
extCls: {
|
64
|
+
type: StringConstructor;
|
65
|
+
default: string;
|
66
|
+
};
|
67
|
+
searchPlaceholder: {
|
68
|
+
type: StringConstructor;
|
69
|
+
default: string;
|
70
|
+
};
|
71
|
+
settingKey: {
|
72
|
+
type: StringConstructor;
|
73
|
+
default: string;
|
74
|
+
};
|
75
|
+
displayKey: {
|
76
|
+
type: StringConstructor;
|
77
|
+
default: string;
|
78
|
+
};
|
79
|
+
sortKey: {
|
80
|
+
type: StringConstructor;
|
81
|
+
default: string;
|
82
|
+
};
|
83
|
+
showOverflowTips: {
|
84
|
+
type: BooleanConstructor;
|
85
|
+
default: boolean;
|
86
|
+
};
|
87
|
+
searchable: {
|
88
|
+
type: BooleanConstructor;
|
89
|
+
default: boolean;
|
90
|
+
};
|
91
|
+
sortable: {
|
92
|
+
type: BooleanConstructor;
|
93
|
+
default: boolean;
|
94
|
+
};
|
95
|
+
sourceList: {
|
96
|
+
type: ArrayConstructor;
|
97
|
+
default: () => any[];
|
98
|
+
};
|
99
|
+
targetList: {
|
100
|
+
type: ArrayConstructor;
|
101
|
+
default: () => any[];
|
102
|
+
};
|
103
|
+
emptyContent: {
|
104
|
+
type: PropType<string[]>;
|
105
|
+
default: () => any[];
|
106
|
+
};
|
107
|
+
}, {
|
108
|
+
keyword: import("vue").Ref<string>;
|
109
|
+
transferRef: any;
|
110
|
+
dataList: import("vue").Ref<any[]>;
|
111
|
+
allToRight: () => void;
|
112
|
+
allToLeft: () => void;
|
113
|
+
displayDataList: import("vue").ComputedRef<any[]>;
|
114
|
+
displayCode: import("vue").ComputedRef<string>;
|
115
|
+
leftHoverIndex: import("vue").Ref<number>;
|
116
|
+
rightHoverIndex: import("vue").Ref<number>;
|
117
|
+
handleItemMouseEvent: (type: any, event: any, isLeft: any, index: any) => void;
|
118
|
+
handleItemClick: (event: any, index: any, isLeft: any) => void;
|
119
|
+
hasSelectedList: import("vue").Ref<any[]>;
|
120
|
+
}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "change"[], "change", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<ExtractPropTypes<{
|
121
|
+
title: {
|
122
|
+
type: PropType<string[]>;
|
123
|
+
default: () => any[];
|
124
|
+
};
|
125
|
+
extCls: {
|
126
|
+
type: StringConstructor;
|
127
|
+
default: string;
|
128
|
+
};
|
129
|
+
searchPlaceholder: {
|
130
|
+
type: StringConstructor;
|
131
|
+
default: string;
|
132
|
+
};
|
133
|
+
settingKey: {
|
134
|
+
type: StringConstructor;
|
135
|
+
default: string;
|
136
|
+
};
|
137
|
+
displayKey: {
|
138
|
+
type: StringConstructor;
|
139
|
+
default: string;
|
140
|
+
};
|
141
|
+
sortKey: {
|
142
|
+
type: StringConstructor;
|
143
|
+
default: string;
|
144
|
+
};
|
145
|
+
showOverflowTips: {
|
146
|
+
type: BooleanConstructor;
|
147
|
+
default: boolean;
|
148
|
+
};
|
149
|
+
searchable: {
|
150
|
+
type: BooleanConstructor;
|
151
|
+
default: boolean;
|
152
|
+
};
|
153
|
+
sortable: {
|
154
|
+
type: BooleanConstructor;
|
155
|
+
default: boolean;
|
156
|
+
};
|
157
|
+
sourceList: {
|
158
|
+
type: ArrayConstructor;
|
159
|
+
default: () => any[];
|
160
|
+
};
|
161
|
+
targetList: {
|
162
|
+
type: ArrayConstructor;
|
163
|
+
default: () => any[];
|
164
|
+
};
|
165
|
+
emptyContent: {
|
166
|
+
type: PropType<string[]>;
|
167
|
+
default: () => any[];
|
168
|
+
};
|
169
|
+
}>> & {
|
170
|
+
onChange?: (...args: any[]) => any;
|
171
|
+
}, {
|
172
|
+
title: string[];
|
173
|
+
extCls: string;
|
174
|
+
displayKey: string;
|
175
|
+
sortable: boolean;
|
176
|
+
settingKey: string;
|
177
|
+
searchPlaceholder: string;
|
178
|
+
showOverflowTips: boolean;
|
179
|
+
searchable: boolean;
|
180
|
+
sortKey: string;
|
181
|
+
sourceList: unknown[];
|
182
|
+
targetList: unknown[];
|
183
|
+
emptyContent: string[];
|
184
|
+
}>;
|
185
|
+
export default _default;
|