bkui-vue 0.0.1-beta.143 → 0.0.1-beta.146
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/dist/index.cjs.js +26 -26
- package/dist/index.esm.js +1287 -1206
- package/dist/index.umd.js +26 -26
- package/dist/style.css +1 -1
- package/dist/style.variable.css +1 -1
- package/lib/button/button.css +0 -1
- package/lib/button/button.less +0 -1
- package/lib/button/button.variable.css +0 -1
- package/lib/button/index.js +1 -1
- package/lib/collapse/collapse-panel.d.ts +11 -0
- package/lib/collapse/collapse.css +14 -14
- package/lib/collapse/collapse.d.ts +3 -1
- package/lib/collapse/collapse.less +34 -29
- package/lib/collapse/collapse.variable.css +14 -14
- package/lib/collapse/index.d.ts +20 -3
- package/lib/collapse/index.js +1 -1
- package/lib/collapse/props.d.ts +9 -0
- package/lib/color-picker/color-picker.css +275 -0
- package/lib/color-picker/color-picker.d.ts +128 -0
- package/lib/color-picker/color-picker.less +325 -0
- package/lib/color-picker/color-picker.variable.css +388 -0
- package/lib/color-picker/index.d.ts +231 -0
- package/lib/color-picker/index.js +1 -0
- package/lib/color-picker/utils.d.ts +37 -0
- package/lib/components.d.ts +1 -0
- package/lib/components.js +1 -1
- package/lib/dialog/index.js +1 -1
- package/lib/dialog/props.d.ts +132 -0
- package/lib/info-box/index.d.ts +23 -0
- package/lib/info-box/index.js +1 -0
- package/lib/input/index.js +1 -1
- package/lib/styles/index.d.ts +1 -0
- package/lib/table/table.css +0 -1
- package/lib/table/table.variable.css +0 -1
- package/package.json +2 -1
package/lib/button/button.css
CHANGED
package/lib/button/button.less
CHANGED
package/lib/button/index.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
!function(e,o){if("object"==typeof exports&&"object"==typeof module)module.exports=o(require("../shared"),require("vue"),require("../loading"));else if("function"==typeof define&&define.amd)define(["../shared","vue","../loading"],o);else{var t="object"==typeof exports?o(require("../shared"),require("vue"),require("../loading")):o(e["../shared"],e.vue,e["../loading"]);for(var n in t)("object"==typeof exports?exports:e)[n]=t[n]}}(self,((e,o,t)=>(()=>{"use strict";var n={4870:e=>{e.exports=t},4212:o=>{o.exports=e},748:e=>{e.exports=o}},r={};function i(e){var o=r[e];if(void 0!==o)return o.exports;var t=r[e]={exports:{}};return n[e](t,t.exports,i),t.exports}i.n=e=>{var o=e&&e.__esModule?()=>e.default:()=>e;return i.d(o,{a:o}),o},i.d=(e,o)=>{for(var t in o)i.o(o,t)&&!i.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:o[t]})},i.o=(e,o)=>Object.prototype.hasOwnProperty.call(e,o),i.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var a={};return(()=>{i.r(a),i.d(a,{BkButton:()=>c,BkButtonGroup:()=>d,default:()=>p});var e=i(4212);function o(e,o,t){return o in e?Object.defineProperty(e,o,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[o]=t,e}var t=i(748),n=i(4870),r=i.n(n),l=["","small","large"],u={theme:e.PropTypes.theme().def(""),hoverTheme:e.PropTypes.theme(["primary","warning","success","danger"]).def(""),size:e.PropTypes.size(l).def(""),title:e.PropTypes.string,icon:e.PropTypes.string,iconRight:e.PropTypes.string,disabled:e.PropTypes.bool,loading:e.PropTypes.bool,loadingMode:e.PropTypes.commonType(Object.values(n.BkLoadingMode)),outline:e.PropTypes.bool,text:e.PropTypes.bool,selected:e.PropTypes.bool,nativeType:{type:String,default:"button"}};const s=(0,t.defineComponent)({name:"Button",props:u,emits:["click","mouseover"],setup:function(i,a){var u,s=a.slots,d=a.
|
1
|
+
!function(e,o){if("object"==typeof exports&&"object"==typeof module)module.exports=o(require("../shared"),require("vue"),require("../loading"));else if("function"==typeof define&&define.amd)define(["../shared","vue","../loading"],o);else{var t="object"==typeof exports?o(require("../shared"),require("vue"),require("../loading")):o(e["../shared"],e.vue,e["../loading"]);for(var n in t)("object"==typeof exports?exports:e)[n]=t[n]}}(self,((e,o,t)=>(()=>{"use strict";var n={4870:e=>{e.exports=t},4212:o=>{o.exports=e},748:e=>{e.exports=o}},r={};function i(e){var o=r[e];if(void 0!==o)return o.exports;var t=r[e]={exports:{}};return n[e](t,t.exports,i),t.exports}i.n=e=>{var o=e&&e.__esModule?()=>e.default:()=>e;return i.d(o,{a:o}),o},i.d=(e,o)=>{for(var t in o)i.o(o,t)&&!i.o(e,t)&&Object.defineProperty(e,t,{enumerable:!0,get:o[t]})},i.o=(e,o)=>Object.prototype.hasOwnProperty.call(e,o),i.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var a={};return(()=>{i.r(a),i.d(a,{BkButton:()=>c,BkButtonGroup:()=>d,default:()=>p});var e=i(4212);function o(e,o,t){return o in e?Object.defineProperty(e,o,{value:t,enumerable:!0,configurable:!0,writable:!0}):e[o]=t,e}var t=i(748),n=i(4870),r=i.n(n),l=["","small","large"],u={theme:e.PropTypes.theme().def(""),hoverTheme:e.PropTypes.theme(["primary","warning","success","danger"]).def(""),size:e.PropTypes.size(l).def(""),title:e.PropTypes.string,icon:e.PropTypes.string,iconRight:e.PropTypes.string,disabled:e.PropTypes.bool,loading:e.PropTypes.bool,loadingMode:e.PropTypes.commonType(Object.values(n.BkLoadingMode)),outline:e.PropTypes.bool,text:e.PropTypes.bool,selected:e.PropTypes.bool,nativeType:{type:String,default:"button"}};const s=(0,t.defineComponent)({name:"Button",props:u,emits:["click","mouseover"],setup:function(i,a){var u,s=a.slots,d=a.emit,c=(0,t.ref)(!1),p=null!==(u=s.default)&&void 0!==u&&u,v="bk-button",f=(0,t.computed)((function(){return i.text&&!i.hoverTheme})),m=(0,t.computed)((function(){var t,n=i.hoverTheme?"".concat(v,"-hover-").concat(i.hoverTheme):"",r=i.theme?"".concat(v,"-").concat(i.theme):"",a=i.hoverTheme?"":r;return(0,e.classes)((o(t={"is-disabled":i.disabled,"is-outline":i.outline,"is-text":f.value,"is-loading":i.loading,"is-selected":i.selected},"".concat(v,"-").concat(i.size),i.size&&l.includes(i.size)),o(t,"no-slot",!p),t),"".concat(a," ").concat(v," ").concat(n))})),b=(0,t.computed)((function(){return i.text||i.outline||i.hoverTheme?c.value&&!i.text?"white":i.text&&i.disabled?"":i.hoverTheme||i.theme:["","default"].includes(i.theme)?"":"white"})),y=(0,t.computed)((function(){return f.value||i.size===n.BkLoadingSize.Small?n.BkLoadingSize.Mini:n.BkLoadingSize.Small})),g=function(e){i.loading||d("click",e)},h=function(e){c.value=!0,d("mouseover",e)},T=function(){c.value=!1};return function(){var e;return(0,t.createVNode)("button",{title:i.title,disabled:i.disabled,class:m.value,type:i.nativeType,onClick:g,onMouseover:h,onMouseleave:T},[i.loading&&(0,t.createVNode)(r(),{loading:!0,class:"".concat(v,"-loading"),mode:i.loadingMode,theme:b.value,size:y.value},null),s.default&&(0,t.createVNode)("span",{class:"".concat(v,"-text")},[null===(e=s.default)||void 0===e?void 0:e.call(s)])])}}}),d=(0,t.defineComponent)({name:"ButtonGroup",props:{size:e.PropTypes.size()},setup:function(n,r){var i=(0,t.computed)((function(){return(0,e.classes)(o({},"bk-button-group-".concat(n.size),!!n.size),"bk-button-group")}));return function(){var e,o;return(0,t.createVNode)("div",{class:i.value},[null===(o=(e=r.slots).default)||void 0===o?void 0:o.call(e)])}}});var c=(0,e.withInstallProps)(s,{ButtonGroup:d});const p=c})(),a})()));
|
@@ -15,6 +15,11 @@ declare const _default: import("vue").DefineComponent<{
|
|
15
15
|
} & {
|
16
16
|
default: boolean;
|
17
17
|
};
|
18
|
+
isFormList: import("vue-types").VueTypeValidableDef<boolean> & {
|
19
|
+
default: boolean;
|
20
|
+
} & {
|
21
|
+
default: boolean;
|
22
|
+
};
|
18
23
|
renderDirective: import("vue-types").VueTypeDef<string> & {
|
19
24
|
default: string;
|
20
25
|
};
|
@@ -40,6 +45,11 @@ declare const _default: import("vue").DefineComponent<{
|
|
40
45
|
} & {
|
41
46
|
default: boolean;
|
42
47
|
};
|
48
|
+
isFormList: import("vue-types").VueTypeValidableDef<boolean> & {
|
49
|
+
default: boolean;
|
50
|
+
} & {
|
51
|
+
default: boolean;
|
52
|
+
};
|
43
53
|
renderDirective: import("vue-types").VueTypeDef<string> & {
|
44
54
|
default: string;
|
45
55
|
};
|
@@ -59,6 +69,7 @@ declare const _default: import("vue").DefineComponent<{
|
|
59
69
|
disabled: boolean;
|
60
70
|
modelValue: boolean;
|
61
71
|
itemClick: Function;
|
72
|
+
isFormList: boolean;
|
62
73
|
renderDirective: string;
|
63
74
|
}>;
|
64
75
|
export default _default;
|
@@ -10,7 +10,7 @@
|
|
10
10
|
color: #dcdee5;
|
11
11
|
pointer-events: none;
|
12
12
|
}
|
13
|
-
.bk-collapse-
|
13
|
+
.bk-collapse-header {
|
14
14
|
position: relative;
|
15
15
|
height: 42px;
|
16
16
|
padding: 0 10px;
|
@@ -21,26 +21,26 @@
|
|
21
21
|
text-overflow: ellipsis;
|
22
22
|
cursor: pointer;
|
23
23
|
}
|
24
|
-
.bk-collapse-
|
24
|
+
.bk-collapse-content {
|
25
|
+
padding: 0 10px;
|
26
|
+
font-size: 13px;
|
27
|
+
will-change: all;
|
28
|
+
color: #979ba5;
|
29
|
+
}
|
30
|
+
.bk-collapse-content.active {
|
31
|
+
display: block;
|
32
|
+
}
|
33
|
+
.bk-collapse-icon {
|
25
34
|
position: absolute;
|
26
35
|
right: 10px;
|
27
36
|
transition: all linear 0.3s;
|
28
37
|
}
|
29
|
-
.bk-collapse-
|
38
|
+
.bk-collapse-icon.rotate-icon {
|
30
39
|
transform: rotate(90deg);
|
31
40
|
}
|
32
|
-
.bk-collapse-
|
41
|
+
.bk-collapse-icon svg {
|
33
42
|
font-size: 20px;
|
34
43
|
}
|
35
|
-
.bk-collapse-
|
36
|
-
padding: 0 10px;
|
37
|
-
font-size: 13px;
|
38
|
-
will-change: all;
|
39
|
-
color: #979ba5;
|
40
|
-
}
|
41
|
-
.bk-collapse-item .bk-collapse-content.active {
|
42
|
-
display: block;
|
43
|
-
}
|
44
|
-
.collapse-transition {
|
44
|
+
.bk-collapse-transition {
|
45
45
|
transition: all 0.3s ease-in-out;
|
46
46
|
}
|
@@ -23,7 +23,9 @@ declare const _default: import("vue").DefineComponent<{
|
|
23
23
|
} & {
|
24
24
|
default: boolean;
|
25
25
|
};
|
26
|
-
}, () =>
|
26
|
+
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
27
|
+
[key: string]: any;
|
28
|
+
}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "after-leave" | "before-enter" | "item-click")[], "update:modelValue" | "after-leave" | "before-enter" | "item-click", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
|
27
29
|
list: import("vue-types").VueTypeDef<any[]> & {
|
28
30
|
default: () => any[];
|
29
31
|
};
|
@@ -1,20 +1,24 @@
|
|
1
1
|
@import '../styles/themes/themes.less';
|
2
2
|
|
3
|
-
.bk-collapse
|
4
|
-
|
5
|
-
|
6
|
-
|
3
|
+
.bk-collapse {
|
4
|
+
&-item {
|
5
|
+
display: flex;
|
6
|
+
flex-direction: column;
|
7
|
+
text-align: left;
|
8
|
+
|
9
|
+
&.is-disabled {
|
10
|
+
cursor: not-allowed;
|
11
|
+
|
12
|
+
.bk-collapse-header {
|
13
|
+
color: @disable-color;
|
14
|
+
pointer-events: none;
|
15
|
+
}
|
16
|
+
}
|
7
17
|
|
8
|
-
&.is-disabled {
|
9
|
-
cursor: not-allowed;
|
10
18
|
|
11
|
-
.bk-collapse-header {
|
12
|
-
color: @disable-color;
|
13
|
-
pointer-events: none;
|
14
|
-
}
|
15
19
|
}
|
16
20
|
|
17
|
-
|
21
|
+
&-header {
|
18
22
|
position: relative;
|
19
23
|
height: 42px;
|
20
24
|
padding: 0 10px;
|
@@ -25,22 +29,9 @@
|
|
25
29
|
text-overflow: ellipsis;
|
26
30
|
cursor: pointer;
|
27
31
|
|
28
|
-
.bk-collapse-icon {
|
29
|
-
position: absolute;
|
30
|
-
right: 10px;
|
31
|
-
transition: all linear .3s;
|
32
|
-
|
33
|
-
&.rotate-icon {
|
34
|
-
transform: rotate(90deg);
|
35
|
-
}
|
36
|
-
|
37
|
-
svg {
|
38
|
-
font-size: 20px;
|
39
|
-
}
|
40
|
-
}
|
41
32
|
}
|
42
33
|
|
43
|
-
|
34
|
+
&-content {
|
44
35
|
padding: 0 10px;
|
45
36
|
font-size: 13px;
|
46
37
|
will-change: all;
|
@@ -50,8 +41,22 @@
|
|
50
41
|
display: block;
|
51
42
|
}
|
52
43
|
}
|
53
|
-
}
|
54
44
|
|
55
|
-
|
56
|
-
|
57
|
-
|
45
|
+
&-icon {
|
46
|
+
position: absolute;
|
47
|
+
right: 10px;
|
48
|
+
transition: all linear .3s;
|
49
|
+
|
50
|
+
&.rotate-icon {
|
51
|
+
transform: rotate(90deg);
|
52
|
+
}
|
53
|
+
|
54
|
+
svg {
|
55
|
+
font-size: 20px;
|
56
|
+
}
|
57
|
+
}
|
58
|
+
|
59
|
+
&-transition {
|
60
|
+
transition: all .3s ease-in-out;
|
61
|
+
}
|
62
|
+
}
|
@@ -123,7 +123,7 @@
|
|
123
123
|
color: var(--disable-color);
|
124
124
|
pointer-events: none;
|
125
125
|
}
|
126
|
-
.bk-collapse-
|
126
|
+
.bk-collapse-header {
|
127
127
|
position: relative;
|
128
128
|
height: 42px;
|
129
129
|
padding: 0 10px;
|
@@ -134,26 +134,26 @@
|
|
134
134
|
text-overflow: ellipsis;
|
135
135
|
cursor: pointer;
|
136
136
|
}
|
137
|
-
.bk-collapse-
|
137
|
+
.bk-collapse-content {
|
138
|
+
padding: 0 10px;
|
139
|
+
font-size: 13px;
|
140
|
+
will-change: all;
|
141
|
+
color: #979ba5;
|
142
|
+
}
|
143
|
+
.bk-collapse-content.active {
|
144
|
+
display: block;
|
145
|
+
}
|
146
|
+
.bk-collapse-icon {
|
138
147
|
position: absolute;
|
139
148
|
right: 10px;
|
140
149
|
transition: all linear 0.3s;
|
141
150
|
}
|
142
|
-
.bk-collapse-
|
151
|
+
.bk-collapse-icon.rotate-icon {
|
143
152
|
transform: rotate(90deg);
|
144
153
|
}
|
145
|
-
.bk-collapse-
|
154
|
+
.bk-collapse-icon svg {
|
146
155
|
font-size: 20px;
|
147
156
|
}
|
148
|
-
.bk-collapse-
|
149
|
-
padding: 0 10px;
|
150
|
-
font-size: 13px;
|
151
|
-
will-change: all;
|
152
|
-
color: #979ba5;
|
153
|
-
}
|
154
|
-
.bk-collapse-item .bk-collapse-content.active {
|
155
|
-
display: block;
|
156
|
-
}
|
157
|
-
.collapse-transition {
|
157
|
+
.bk-collapse-transition {
|
158
158
|
transition: all 0.3s ease-in-out;
|
159
159
|
}
|
package/lib/collapse/index.d.ts
CHANGED
@@ -84,7 +84,9 @@ declare const BkCollapse: {
|
|
84
84
|
"onAfter-leave"?: (...args: any[]) => any;
|
85
85
|
"onBefore-enter"?: (...args: any[]) => any;
|
86
86
|
"onItem-click"?: (...args: any[]) => any;
|
87
|
-
}, () =>
|
87
|
+
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
88
|
+
[key: string]: any;
|
89
|
+
}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "after-leave" | "before-enter" | "item-click")[], string, {
|
88
90
|
list: any[];
|
89
91
|
idFiled: string;
|
90
92
|
titleField: string;
|
@@ -140,7 +142,9 @@ declare const BkCollapse: {
|
|
140
142
|
"onAfter-leave"?: (...args: any[]) => any;
|
141
143
|
"onBefore-enter"?: (...args: any[]) => any;
|
142
144
|
"onItem-click"?: (...args: any[]) => any;
|
143
|
-
} & import("vue").ShallowUnwrapRef<() =>
|
145
|
+
} & import("vue").ShallowUnwrapRef<() => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
146
|
+
[key: string]: any;
|
147
|
+
}>> & {} & {} & import("vue").ComponentCustomProperties;
|
144
148
|
__isFragment?: never;
|
145
149
|
__isTeleport?: never;
|
146
150
|
__isSuspense?: never;
|
@@ -174,7 +178,9 @@ declare const BkCollapse: {
|
|
174
178
|
"onAfter-leave"?: (...args: any[]) => any;
|
175
179
|
"onBefore-enter"?: (...args: any[]) => any;
|
176
180
|
"onItem-click"?: (...args: any[]) => any;
|
177
|
-
}, () =>
|
181
|
+
}, () => import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
|
182
|
+
[key: string]: any;
|
183
|
+
}>, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("update:modelValue" | "after-leave" | "before-enter" | "item-click")[], "update:modelValue" | "after-leave" | "before-enter" | "item-click", {
|
178
184
|
list: any[];
|
179
185
|
idFiled: string;
|
180
186
|
titleField: string;
|
@@ -198,6 +204,11 @@ declare const BkCollapse: {
|
|
198
204
|
} & {
|
199
205
|
default: boolean;
|
200
206
|
};
|
207
|
+
isFormList: import("vue-types").VueTypeValidableDef<boolean> & {
|
208
|
+
default: boolean;
|
209
|
+
} & {
|
210
|
+
default: boolean;
|
211
|
+
};
|
201
212
|
renderDirective: import("vue-types").VueTypeDef<string> & {
|
202
213
|
default: string;
|
203
214
|
};
|
@@ -223,6 +234,11 @@ declare const BkCollapse: {
|
|
223
234
|
} & {
|
224
235
|
default: boolean;
|
225
236
|
};
|
237
|
+
isFormList: import("vue-types").VueTypeValidableDef<boolean> & {
|
238
|
+
default: boolean;
|
239
|
+
} & {
|
240
|
+
default: boolean;
|
241
|
+
};
|
226
242
|
renderDirective: import("vue-types").VueTypeDef<string> & {
|
227
243
|
default: string;
|
228
244
|
};
|
@@ -242,6 +258,7 @@ declare const BkCollapse: {
|
|
242
258
|
disabled: boolean;
|
243
259
|
modelValue: boolean;
|
244
260
|
itemClick: Function;
|
261
|
+
isFormList: boolean;
|
245
262
|
renderDirective: string;
|
246
263
|
}>;
|
247
264
|
}>;
|
package/lib/collapse/index.js
CHANGED
@@ -1 +1 @@
|
|
1
|
-
!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("../shared"),require("vue"),require("../icon"));else if("function"==typeof define&&define.amd)define(["../shared","vue","../icon"],t);else{var r="object"==typeof exports?t(require("../shared"),require("vue"),require("../icon")):t(e["../shared"],e.vue,e["../icon"]);for(var o in r)("object"==typeof exports?exports:e)[o]=r[o]}}(self,((e,t,r)=>(()=>{"use strict";var o={6870:e=>{e.exports=r},4212:t=>{t.exports=e},748:e=>{e.exports=t}},n={};function a(e){var t=n[e];if(void 0!==t)return t.exports;var r=n[e]={exports:{}};return o[e](r,r.exports,a),r.exports}a.d=(e,t)=>{for(var r in t)a.o(t,r)&&!a.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},a.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),a.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var
|
1
|
+
!function(e,t){if("object"==typeof exports&&"object"==typeof module)module.exports=t(require("../shared"),require("vue"),require("../icon"));else if("function"==typeof define&&define.amd)define(["../shared","vue","../icon"],t);else{var r="object"==typeof exports?t(require("../shared"),require("vue"),require("../icon")):t(e["../shared"],e.vue,e["../icon"]);for(var o in r)("object"==typeof exports?exports:e)[o]=r[o]}}(self,((e,t,r)=>(()=>{"use strict";var o={6870:e=>{e.exports=r},4212:t=>{t.exports=e},748:e=>{e.exports=t}},n={};function a(e){var t=n[e];if(void 0!==t)return t.exports;var r=n[e]={exports:{}};return o[e](r,r.exports,a),r.exports}a.d=(e,t)=>{for(var r in t)a.o(t,r)&&!a.o(e,r)&&Object.defineProperty(e,r,{enumerable:!0,get:t[r]})},a.o=(e,t)=>Object.prototype.hasOwnProperty.call(e,t),a.r=e=>{"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})};var i={};return(()=>{a.r(i),a.d(i,{BkCollapsePanel:()=>p,Collapse:()=>v,default:()=>y});var e=a(4212);function t(e,t){(null==t||t>e.length)&&(t=e.length);for(var r=0,o=new Array(t);r<t;r++)o[r]=e[r];return o}function r(e){return function(e){if(Array.isArray(e))return t(e)}(e)||function(e){if("undefined"!=typeof Symbol&&null!=e[Symbol.iterator]||null!=e["@@iterator"])return Array.from(e)}(e)||function(e,r){if(e){if("string"==typeof e)return t(e,r);var o=Object.prototype.toString.call(e).slice(8,-1);return"Object"===o&&e.constructor&&(o=e.constructor.name),"Map"===o||"Set"===o?Array.from(e):"Arguments"===o||/^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(o)?t(e,r):void 0}}(e)||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.")}()}var o=a(748),n=a(6870),l={list:e.PropTypes.arrayOf(e.PropTypes.any).def([]),idFiled:e.PropTypes.string.def("$index"),titleField:e.PropTypes.string.def("name"),contentField:e.PropTypes.string.def("content"),modelValue:e.PropTypes.oneOfType([e.PropTypes.arrayOf(e.PropTypes.number).def([]),e.PropTypes.arrayOf(e.PropTypes.string).def([]),e.PropTypes.number.def(-1)]),accordion:e.PropTypes.bool.def(!1)},s={itemClick:{type:Function,default:function(){return{}}}},c=Object.assign({name:e.PropTypes.oneOfType([e.PropTypes.number,e.PropTypes.string]).def(""),title:e.PropTypes.any,content:e.PropTypes.string,disabled:e.PropTypes.bool.def(!1),isFormList:e.PropTypes.bool.def(!1),renderDirective:e.PropTypes.commonType(["if","show"],"render").def("show"),modelValue:e.PropTypes.bool.def(!1)},s),u=function(e){return(e||"").split(" ").filter((function(e){return!!e.trim()}))};function d(e,t){if(e&&t){var o=u(t),n=e.getAttribute("class")||"";if(e.classList){var a;(a=e.classList).remove.apply(a,r(o))}else{o.forEach((function(e){n=n.replace(" ".concat(e," ")," ")}));var i=u(n).join(" ");e.setAttribute("class",i)}}}function f(e,t){if(e){var o,n=e.getAttribute("class")||"",a=u(n),i=(t||"").split(" ").filter((function(e){return!a.includes(e)&&!!e.trim()}));e.classList?(o=e.classList).add.apply(o,r(i)):(n+=" ".concat(i.join(" ")),e.setAttribute("class",n))}}const p=(0,o.defineComponent)({name:"CollapsePanel",props:c,emits:["change","update:modelValue","after-leave","before-enter"],setup:function(e,t){var r=t.emit,a=t.slots,i=(0,o.inject)("localActiveItems"),l=(0,o.inject)("handleItemClick"),s=(0,o.ref)(e.modelValue);(0,o.watch)((function(){return e.modelValue}),(function(e){s.value=e})),(0,o.watch)((function(){return i}),(function(t){(null==t?void 0:t.length)&&(s.value=t.includes(e.name))}),{immediate:!0});var c=(0,o.ref)(function(e){return{css:!0,onBeforeEnter:function(e){f(e,"collapse-transition"),e.dataset||(e.dataset={}),e.style.height="0px"},onEnter:function(e){e.dataset.oldOverflow=e.style.overflow,0!==e.scrollHeight?(e.style.height="".concat(e.scrollHeight,"px"),e.style.maxHeight="".concat(e.scrollHeight,"px")):e.style.height="0px",e.style.overflow="hidden"},onAfterEnter:function(t){t.style.height="",t.style.maxHeight="",t.style.overflow=t.dataset.oldOverflow,d(t,"collapse-transition"),e("before-enter")},onBeforeLeave:function(e){e.dataset||(e.dataset={}),e.dataset.oldOverflow=e.style.overflow,e.style.height="".concat(e.scrollHeight,"px"),e.style.maxHeight="".concat(e.scrollHeight,"px"),e.style.overflow="hidden"},onLeave:function(e){0!==e.scrollHeight&&(f(e,"collapse-transition"),e.style.transitionProperty="height",e.style.height="0px")},onAfterLeave:function(t){d(t,"collapse-transition"),t.style.height="",t.style.maxHeight="",t.style.overflow=t.dataset.oldOverflow,e("after-leave")}}}(r));return function(){var t,i,u;return(0,o.createVNode)("div",{class:"bk-collapse-item ".concat(e.disabled?"is-disabled":""," ").concat(s.value?"bk-collapse-item-active":"")},[(0,o.createVNode)("div",{onClick:function(){return function(e){var t=e.disabled,o=e.name,n=e.itemClick;if(!t){var a={name:o};n(a),s.value=!s.value,r("change",a),r("update:modelValue",s.value),l({name:o})}}(e)}},[a.header?"function"==typeof a.header?a.header(o.h):a.header:(u=a.default?"function"==typeof a.default?a.default(o.h):a.default:e.title,(0,o.createVNode)("div",{class:"bk-collapse-header"},[(0,o.createVNode)("span",{class:"bk-collapse-title"},[u]),(0,o.createVNode)(n.AngleRight,{class:"bk-collapse-icon ".concat(s.value?"rotate-icon":"")},null)]))]),(0,o.createVNode)(o.Transition,c.value,(i=t="if"!==e.renderDirective||s.value?(0,o.withDirectives)((0,o.createVNode)("div",{class:"bk-collapse-content ".concat(s.value?"active":"")},[e.content?e.content:"function"==typeof a.content?a.content(o.h):a.content]),[[o.vShow,s.value]]):"","function"==typeof i||"[object Object]"===Object.prototype.toString.call(i)&&!(0,o.isVNode)(i)?t:{default:function(){return[t]}}))])}}}),v=(0,o.defineComponent)({name:"Collapse",props:l,emits:["item-click","update:modelValue","after-leave","before-enter"],setup:function(e,t){var n=t.emit,a=t.slots,i=(0,o.ref)([]);(0,o.watch)((function(){return[e.modelValue]}),(function(){var t=e.modelValue;Array.isArray(t)?i.value=r(t):i.value=void 0!==t?[t]:[]}),{immediate:!0});var l=function(t){var r=t.name;if(e.accordion){var o=i.value.findIndex((function(e){return e===r}));o>=0?i.value.splice(o,1):i.value=[r]}else{var a=i.value.findIndex((function(e){return e===r}));a>=0?i.value.splice(a,1):i.value.push(r)}n("item-click",t),n("update:modelValue",i.value)};(0,o.provide)("localActiveItems",i.value),(0,o.provide)("handleItemClick",l);var s="bk-collapse-wrapper";if(!Array.isArray(e.list)||!e.list.length)return function(){return(0,o.createVNode)("div",{class:s},[(0,o.renderSlot)(a,"default",{props:{isList:!0}})])};var c=(0,o.computed)((function(){return(e.list||[]).map((function(e,t){return"string"==typeof e||"number"==typeof e||"boolean"==typeof e?{$index:t,name:e}:Object.assign({$index:t},e)}))}));return function(){return(0,o.createVNode)("div",{class:s},[c.value.map((function(t,r){var n=t[e.idFiled]||r,i=t[e.titleField];return a.title&&(i="function"==typeof a.title?a.title(t):a.title),(0,o.createVNode)(p,{key:r,"item-click":l,disabled:t.disabled,name:n,isFormList:!0,title:i,content:t[e.contentField]},null)}))])}}}),y=(0,e.withInstallProps)(v,{CollapsePanel:p})})(),i})()));
|
package/lib/collapse/props.d.ts
CHANGED
@@ -95,6 +95,15 @@ export declare const propsCollapsePanel: {
|
|
95
95
|
*/
|
96
96
|
default: boolean;
|
97
97
|
};
|
98
|
+
isFormList: import("vue-types").VueTypeValidableDef<boolean> & {
|
99
|
+
default: boolean;
|
100
|
+
} & {
|
101
|
+
/**
|
102
|
+
* Content 字段,默认渲染内容,不配置时自动读取 content 字段
|
103
|
+
* 自定义配置slot时可以忽略
|
104
|
+
*/
|
105
|
+
default: boolean;
|
106
|
+
};
|
98
107
|
renderDirective: import("vue-types").VueTypeDef<string> & {
|
99
108
|
/**
|
100
109
|
* Content 字段,默认渲染内容,不配置时自动读取 content 字段
|
@@ -0,0 +1,275 @@
|
|
1
|
+
.bk-color-picker {
|
2
|
+
position: relative;
|
3
|
+
display: inline-flex;
|
4
|
+
height: 32px;
|
5
|
+
color: #63656e;
|
6
|
+
cursor: pointer;
|
7
|
+
border: 1px solid #dcdee5;
|
8
|
+
border-radius: 2px;
|
9
|
+
outline: none;
|
10
|
+
transition: border 0.2s, box-shadow 0.2s;
|
11
|
+
align-content: center;
|
12
|
+
}
|
13
|
+
.bk-color-picker.bk-color-picker-show-value {
|
14
|
+
width: 150px;
|
15
|
+
}
|
16
|
+
.bk-color-picker.bk-color-picker-large {
|
17
|
+
height: 36px;
|
18
|
+
}
|
19
|
+
.bk-color-picker.bk-color-picker-large.bk-color-picker-show-value {
|
20
|
+
width: 170px;
|
21
|
+
}
|
22
|
+
.bk-color-picker.bk-color-picker-large.bk-color-picker-show-value .bk-color-picker-text {
|
23
|
+
width: calc(100% - 62px);
|
24
|
+
font-size: 16px;
|
25
|
+
}
|
26
|
+
.bk-color-picker.bk-color-picker-large .bk-color-picker-color .bk-color-picker-color-square {
|
27
|
+
width: 22px;
|
28
|
+
height: 22px;
|
29
|
+
font-size: 22px;
|
30
|
+
}
|
31
|
+
.bk-color-picker.bk-color-picker-small {
|
32
|
+
height: 28px;
|
33
|
+
}
|
34
|
+
.bk-color-picker.bk-color-picker-small.bk-color-picker-show-value {
|
35
|
+
width: 132px;
|
36
|
+
}
|
37
|
+
.bk-color-picker.bk-color-picker-small.bk-color-picker-show-value .bk-color-picker-text {
|
38
|
+
width: calc(100% - 56px);
|
39
|
+
font-size: 12px;
|
40
|
+
}
|
41
|
+
.bk-color-picker.bk-color-picker-small .bk-color-picker-color .bk-color-picker-color-square {
|
42
|
+
width: 16px;
|
43
|
+
height: 16px;
|
44
|
+
font-size: 16px;
|
45
|
+
}
|
46
|
+
.bk-color-picker:hover,
|
47
|
+
.bk-color-picker:focus {
|
48
|
+
border-color: #3a84ff;
|
49
|
+
transition: border 0.2s;
|
50
|
+
}
|
51
|
+
.bk-color-picker.bk-color-picker-show-dropdown {
|
52
|
+
border-color: #3a84ff;
|
53
|
+
box-shadow: 0 0 0 2px rgba(45, 140, 240, 0.2);
|
54
|
+
transition: border 0.2s, box-shadow 0.2s;
|
55
|
+
}
|
56
|
+
.bk-color-picker.bk-color-picker-show-dropdown .icon-angle-down {
|
57
|
+
transform: rotate(-180deg);
|
58
|
+
transition: transform 0.3s;
|
59
|
+
}
|
60
|
+
.bk-color-picker.bk-color-picker-disabled {
|
61
|
+
cursor: not-allowed;
|
62
|
+
background-color: #e1ecff;
|
63
|
+
border-color: #699df4;
|
64
|
+
}
|
65
|
+
.bk-color-picker.bk-color-picker-disabled .bk-color-picker-text {
|
66
|
+
color: #3a84ff;
|
67
|
+
}
|
68
|
+
.bk-color-picker.bk-color-picker-disabled .bk-color-picker-icon .icon-angle-down {
|
69
|
+
color: #3a84ff;
|
70
|
+
}
|
71
|
+
.bk-color-picker .bk-color-picker-color {
|
72
|
+
display: flex;
|
73
|
+
margin-left: 6px;
|
74
|
+
align-items: center;
|
75
|
+
}
|
76
|
+
.bk-color-picker .bk-color-picker-color .bk-color-picker-color-square {
|
77
|
+
width: 18px;
|
78
|
+
height: 18px;
|
79
|
+
font-size: 18px;
|
80
|
+
color: #3a84ff;
|
81
|
+
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
|
82
|
+
}
|
83
|
+
.bk-color-picker .bk-color-picker-text {
|
84
|
+
display: flex;
|
85
|
+
width: calc(100% - 58px);
|
86
|
+
margin-left: 6px;
|
87
|
+
font-size: 14px;
|
88
|
+
line-height: 20px;
|
89
|
+
color: #63656e;
|
90
|
+
align-items: center;
|
91
|
+
}
|
92
|
+
.bk-color-picker .bk-color-picker-text span {
|
93
|
+
overflow: hidden;
|
94
|
+
text-overflow: ellipsis;
|
95
|
+
white-space: nowrap;
|
96
|
+
}
|
97
|
+
.bk-color-picker .bk-color-picker-icon {
|
98
|
+
display: flex;
|
99
|
+
justify-content: center;
|
100
|
+
align-items: center;
|
101
|
+
width: 20px;
|
102
|
+
margin-right: 5px;
|
103
|
+
transform: rotate(180deg);
|
104
|
+
}
|
105
|
+
.bk-color-picker .bk-color-picker-icon .icon-angle-down {
|
106
|
+
position: absolute;
|
107
|
+
right: 4px;
|
108
|
+
display: flex;
|
109
|
+
align-items: center;
|
110
|
+
font-size: 20px;
|
111
|
+
color: #979ba5;
|
112
|
+
transition: transform 0.3s;
|
113
|
+
}
|
114
|
+
/*下拉面板*/
|
115
|
+
.bk-color-picker-dropdown {
|
116
|
+
width: 272px;
|
117
|
+
}
|
118
|
+
.bk-color-picker-saturation {
|
119
|
+
position: relative;
|
120
|
+
height: 180px;
|
121
|
+
margin: 0 6px 6px;
|
122
|
+
}
|
123
|
+
.bk-color-picker-saturation .bk-color-picker-saturation-white {
|
124
|
+
background: linear-gradient(90deg, #fff, hsla(0, 0%, 100%, 0));
|
125
|
+
}
|
126
|
+
.bk-color-picker-saturation .bk-color-picker-saturation-black {
|
127
|
+
background: linear-gradient(0deg, #000, transparent);
|
128
|
+
}
|
129
|
+
.bk-color-picker-saturation .bk-color-picker-saturation-white,
|
130
|
+
.bk-color-picker-saturation .bk-color-picker-saturation-black {
|
131
|
+
position: absolute;
|
132
|
+
top: 0;
|
133
|
+
left: 0;
|
134
|
+
width: 100%;
|
135
|
+
height: 100%;
|
136
|
+
cursor: pointer;
|
137
|
+
}
|
138
|
+
.bk-color-picker-hue {
|
139
|
+
position: relative;
|
140
|
+
height: 10px;
|
141
|
+
margin: 0 6px 6px;
|
142
|
+
cursor: pointer;
|
143
|
+
background: linear-gradient(90deg, red 0, #ff0 17%, #0f0 33%, #0ff 50%, #00f 67%, #f0f 83%, red);
|
144
|
+
}
|
145
|
+
.bk-color-picker-hue .bk-color-picker-hue-pointer {
|
146
|
+
position: absolute;
|
147
|
+
top: 0;
|
148
|
+
}
|
149
|
+
.bk-color-picker-hue .bk-color-picker-hue-pointer .bk-color-picker-hue-rectangle {
|
150
|
+
width: 4px;
|
151
|
+
height: 8px;
|
152
|
+
margin-top: 1px;
|
153
|
+
cursor: pointer;
|
154
|
+
background: #fff;
|
155
|
+
border-radius: 1px;
|
156
|
+
transform: translateX(-2px);
|
157
|
+
box-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
|
158
|
+
}
|
159
|
+
.bk-color-picker-input {
|
160
|
+
display: flex;
|
161
|
+
margin: 0 6px 1px;
|
162
|
+
font-size: 12px;
|
163
|
+
color: #63656e;
|
164
|
+
justify-content: space-between;
|
165
|
+
}
|
166
|
+
.bk-color-picker-input .bk-color-picker-input-hex .bk-color-picker-input-part .bk-color-picker-input-value {
|
167
|
+
width: 70px;
|
168
|
+
}
|
169
|
+
.bk-color-picker-input .bk-color-picker-input-rgba {
|
170
|
+
display: flex;
|
171
|
+
width: 160px;
|
172
|
+
justify-content: space-between;
|
173
|
+
}
|
174
|
+
.bk-color-picker-input .bk-color-picker-input-part {
|
175
|
+
display: flex;
|
176
|
+
flex-flow: column;
|
177
|
+
}
|
178
|
+
.bk-color-picker-input .bk-color-picker-input-part .bk-color-picker-input-value {
|
179
|
+
width: 32px;
|
180
|
+
height: 22px;
|
181
|
+
padding: 0 4px;
|
182
|
+
line-height: 16px;
|
183
|
+
border: 1px solid #c4c6cc;
|
184
|
+
border-radius: 2px;
|
185
|
+
outline: none;
|
186
|
+
transition: border 0.2s;
|
187
|
+
}
|
188
|
+
.bk-color-picker-input .bk-color-picker-input-part .bk-color-picker-input-value:focus {
|
189
|
+
border-color: #3a84ff;
|
190
|
+
transition: border 0.2s;
|
191
|
+
}
|
192
|
+
.bk-color-picker-input .bk-color-picker-input-part .bk-color-picker-input-value.error {
|
193
|
+
border-color: #3a84ff;
|
194
|
+
}
|
195
|
+
.bk-color-picker-input .bk-color-picker-input-part .bk-color-picker-input-value::-webkit-outer-spin-button,
|
196
|
+
.bk-color-picker-input .bk-color-picker-input-part .bk-color-picker-input-value::-webkit-inner-spin-button {
|
197
|
+
margin: 0;
|
198
|
+
appearance: none;
|
199
|
+
}
|
200
|
+
.bk-color-picker-input .bk-color-picker-input-part .bk-color-picker-input-text {
|
201
|
+
height: 18px;
|
202
|
+
line-height: 18px;
|
203
|
+
text-align: center;
|
204
|
+
}
|
205
|
+
.bk-color-picker-recommend-container {
|
206
|
+
padding: 6px;
|
207
|
+
border-top: 1px solid #f0f1f5;
|
208
|
+
}
|
209
|
+
.bk-color-picker-recommend-container .bk-color-picker-recommend {
|
210
|
+
display: flex;
|
211
|
+
flex-wrap: wrap;
|
212
|
+
}
|
213
|
+
.bk-color-picker-recommend-container .bk-color-picker-recommend .bk-color-picker-recommend-color {
|
214
|
+
width: 20px;
|
215
|
+
height: 20px;
|
216
|
+
margin: 3px;
|
217
|
+
cursor: pointer;
|
218
|
+
border-radius: 3px;
|
219
|
+
box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.15);
|
220
|
+
}
|
221
|
+
.bk-color-picker-recommend-container .bk-color-picker-recommend .bk-color-picker-recommend-color.bk-color-picker-recommend-selected-color {
|
222
|
+
box-shadow: 0 0 3px 2px #3a84ff;
|
223
|
+
}
|
224
|
+
.bk-color-picker-saturation,
|
225
|
+
.bk-color-picker-hue,
|
226
|
+
.bk-color-picker-recommend {
|
227
|
+
outline: none;
|
228
|
+
transition: box-shadow 0.2s;
|
229
|
+
}
|
230
|
+
.bk-color-picker-saturation:focus,
|
231
|
+
.bk-color-picker-hue:focus,
|
232
|
+
.bk-color-picker-recommend:focus {
|
233
|
+
box-shadow: 0 0 0 2px rgba(45, 140, 240, 0.5);
|
234
|
+
transition: box-shadow 0.2s;
|
235
|
+
}
|
236
|
+
/*饱和度和预设值共用样式*/
|
237
|
+
.bk-color-picker-pointer {
|
238
|
+
position: absolute;
|
239
|
+
top: 50%;
|
240
|
+
left: 50%;
|
241
|
+
width: 4px;
|
242
|
+
height: 4px;
|
243
|
+
cursor: pointer;
|
244
|
+
}
|
245
|
+
.bk-color-picker-pointer .bk-color-picker-circle {
|
246
|
+
position: absolute;
|
247
|
+
top: 0;
|
248
|
+
left: 0;
|
249
|
+
width: 4px;
|
250
|
+
height: 4px;
|
251
|
+
cursor: pointer;
|
252
|
+
border-radius: 50%;
|
253
|
+
transform: translate(-2px, -2px);
|
254
|
+
box-shadow: 0 0 0 1.5px #fff, inset 0 0 1px 1px rgba(0, 0, 0, 0.3), 0 0 1px 2px rgba(0, 0, 0, 0.4);
|
255
|
+
}
|
256
|
+
.bk-color-picker-empty {
|
257
|
+
position: relative;
|
258
|
+
}
|
259
|
+
.bk-color-picker-empty::after {
|
260
|
+
position: absolute;
|
261
|
+
top: 1px;
|
262
|
+
left: calc(50% - 1px);
|
263
|
+
width: 2px;
|
264
|
+
height: calc(100% - 2px);
|
265
|
+
background: #ea3536;
|
266
|
+
border-radius: 1px;
|
267
|
+
content: '';
|
268
|
+
transform: rotate(45deg);
|
269
|
+
}
|
270
|
+
.bk-color-dropdown-container {
|
271
|
+
padding: 0px;
|
272
|
+
cursor: default;
|
273
|
+
transform-origin: center top;
|
274
|
+
will-change: top, left;
|
275
|
+
}
|