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.
Files changed (77) hide show
  1. package/README.md +7 -3
  2. package/README_EN.md +7 -3
  3. package/dist/bkui-vue.cjs.js +1429 -365
  4. package/dist/bkui-vue.esm.js +1427 -364
  5. package/dist/bkui-vue.umd.js +1429 -365
  6. package/dist/style.css +376 -85
  7. package/lib/button/button.css +9 -0
  8. package/lib/button/button.d.ts +25 -1
  9. package/lib/button/button.less +18 -10
  10. package/lib/button/button.variable.css +9 -0
  11. package/lib/button/index.d.ts +42 -4
  12. package/lib/button/index.js +1 -1
  13. package/lib/code-diff/code-diff.css +114 -0
  14. package/lib/code-diff/code-diff.d.ts +71 -0
  15. package/lib/code-diff/code-diff.less +144 -0
  16. package/lib/code-diff/code-diff.variable.css +207 -0
  17. package/lib/code-diff/index.d.ts +6 -0
  18. package/lib/components.d.ts +1 -0
  19. package/lib/date-picker/date-picker.d.ts +20 -130
  20. package/lib/date-picker/index.js +1 -1
  21. package/lib/date-picker/interface.d.ts +1 -1
  22. package/lib/date-picker/props.d.ts +111 -0
  23. package/lib/directives/clickoutside.d.ts +3 -23
  24. package/lib/directives/index.js +2 -2
  25. package/lib/icon/arrows-right.d.ts +4 -0
  26. package/lib/icon/arrows-right.js +15 -0
  27. package/lib/icon/bk.d.ts +4 -0
  28. package/lib/icon/bk.js +15 -0
  29. package/lib/icon/index.d.ts +4 -0
  30. package/lib/icon/index.js +1 -1
  31. package/lib/icon/qq.d.ts +4 -0
  32. package/lib/icon/qq.js +15 -0
  33. package/lib/icon/weixin.d.ts +4 -0
  34. package/lib/icon/weixin.js +15 -0
  35. package/lib/input/index.d.ts +58 -4
  36. package/lib/input/index.js +2 -2
  37. package/lib/input/input.css +19 -2
  38. package/lib/input/input.d.ts +31 -1
  39. package/lib/input/input.less +25 -3
  40. package/lib/input/input.variable.css +19 -2
  41. package/lib/loading/index.d.ts +31 -9
  42. package/lib/loading/index.js +1 -1
  43. package/lib/loading/loading.css +98 -71
  44. package/lib/loading/loading.d.ts +23 -8
  45. package/lib/loading/loading.less +62 -49
  46. package/lib/loading/loading.variable.css +98 -71
  47. package/lib/shared/index.js +1 -1
  48. package/lib/shared/vue-types.d.ts +4 -0
  49. package/lib/styles/index.d.ts +1 -0
  50. package/lib/styles/index.js +1 -1
  51. package/lib/table/index.d.ts +42 -1
  52. package/lib/table/index.js +1 -1
  53. package/lib/table/props.d.ts +13 -0
  54. package/lib/table/render.d.ts +9 -0
  55. package/lib/table/table.d.ts +19 -0
  56. package/lib/table/utils.d.ts +8 -0
  57. package/lib/tag/index.d.ts +189 -22
  58. package/lib/tag/index.js +1 -1
  59. package/lib/tag/tag.css +91 -0
  60. package/lib/tag/tag.d.ts +83 -7
  61. package/lib/tag/tag.less +103 -2
  62. package/lib/tag/tag.variable.css +91 -0
  63. package/lib/transfer/index.d.ts +27 -0
  64. package/lib/transfer/index.js +1 -0
  65. package/lib/transfer/transfer.css +158 -0
  66. package/lib/transfer/transfer.d.ts +185 -0
  67. package/lib/transfer/transfer.less +171 -0
  68. package/lib/transfer/transfer.variable.css +251 -0
  69. package/lib/tree/index.d.ts +22 -3
  70. package/lib/tree/index.js +1 -1
  71. package/lib/tree/props.d.ts +11 -0
  72. package/lib/tree/tree.css +1 -12
  73. package/lib/tree/tree.d.ts +10 -1
  74. package/lib/tree/tree.less +10 -24
  75. package/lib/tree/tree.variable.css +1 -12
  76. package/lib/tree/util.d.ts +20 -3
  77. 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
- .@{bk-prefix}-tag {
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
  }
@@ -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;