bkui-vue 0.0.1-beta.25 → 0.0.1-beta.26
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/bkui-vue.cjs.js +395 -268
- package/dist/bkui-vue.esm.js +396 -269
- package/dist/bkui-vue.umd.js +395 -268
- package/dist/style.css +365 -66
- package/lib/popover/index.js +1 -1
- package/lib/resize-layout/index.d.ts +336 -0
- package/lib/resize-layout/index.js +1 -0
- package/lib/resize-layout/resize-layout.css +189 -0
- package/lib/resize-layout/resize-layout.d.ts +127 -0
- package/lib/resize-layout/resize-layout.less +233 -0
- package/lib/resize-layout/resize-layout.variable.css +282 -0
- package/lib/select/common.d.ts +23 -27
- package/lib/select/index.d.ts +530 -145
- package/lib/select/index.js +12 -12
- package/lib/select/optionGroup.d.ts +0 -76
- package/lib/select/select.css +154 -44
- package/lib/select/select.d.ts +150 -39
- package/lib/select/select.less +131 -75
- package/lib/select/select.variable.css +154 -44
- package/lib/select/type.d.ts +31 -0
- package/lib/styles/index.d.ts +1 -0
- package/lib/styles/index.js +1 -1
- package/lib/swiper/index.js +1 -1
- package/lib/swiper/swiper.css +14 -14
- package/lib/swiper/swiper.less +93 -77
- package/lib/swiper/swiper.variable.css +14 -14
- package/lib/table/table.css +1 -1
- package/lib/table/table.less +1 -1
- package/lib/table/table.variable.css +1 -1
- package/lib/tag/tag.css +1 -1
- package/lib/tag/tag.less +1 -1
- package/lib/tag/tag.variable.css +1 -1
- package/lib/tree/tree.css +6 -6
- package/lib/tree/tree.less +7 -6
- package/lib/tree/tree.variable.css +6 -6
- package/package.json +3 -3
package/dist/bkui-vue.esm.js
CHANGED
@@ -33,7 +33,7 @@ var __publicField = (obj, key, value) => {
|
|
33
33
|
__defNormalProp(obj, typeof key !== "symbol" ? key + "" : key, value);
|
34
34
|
return value;
|
35
35
|
};
|
36
|
-
import { createVNode, h as h$1, mergeProps, defineComponent, reactive, ref, computed, watch, onMounted, onBeforeUnmount, Transition, getCurrentInstance, provide, inject, nextTick, isVNode, Fragment, createTextVNode, toRefs, customRef,
|
36
|
+
import { createVNode, h as h$1, mergeProps, defineComponent, reactive, ref, computed, watch, onMounted, onBeforeUnmount, Transition, getCurrentInstance, provide, inject, nextTick, isVNode, Fragment, createTextVNode, toRefs, customRef, onBeforeMount, withDirectives, vShow, toRef, unref, resolveDirective, vModelText, watchEffect, onUpdated, render, onUnmounted, Teleport } from "vue";
|
37
37
|
var reset = "";
|
38
38
|
var alert = "";
|
39
39
|
var backtop = "";
|
@@ -78,6 +78,7 @@ var virtualRender$1 = "";
|
|
78
78
|
var transfer = "";
|
79
79
|
var pagination = "";
|
80
80
|
var timeline = "";
|
81
|
+
var resizeLayout = "";
|
81
82
|
const BKLAYERD_INDEX_EFAULT_VALUE = {
|
82
83
|
["bottom"]: 0,
|
83
84
|
["content"]: 1,
|
@@ -9526,8 +9527,9 @@ var Component$g = defineComponent({
|
|
9526
9527
|
};
|
9527
9528
|
});
|
9528
9529
|
const handleManualShow = (val) => {
|
9530
|
+
var _a, _b;
|
9529
9531
|
if (trigger.value === "manual" && isPopInstance) {
|
9530
|
-
val ? popoverInstance.show() : popoverInstance.hide();
|
9532
|
+
val ? (_a = popoverInstance.show) == null ? void 0 : _a.call(popoverInstance) : (_b = popoverInstance.hide) == null ? void 0 : _b.call(popoverInstance);
|
9531
9533
|
}
|
9532
9534
|
};
|
9533
9535
|
watch(() => props.isShow, (val) => {
|
@@ -9604,7 +9606,7 @@ var Component$g = defineComponent({
|
|
9604
9606
|
"ref": refContent,
|
9605
9607
|
"class": contentClass,
|
9606
9608
|
"style": compStyle.value
|
9607
|
-
}, customTheme), [(_c = (_b2 = (_a2 = ctx.slots).content) == null ? void 0 : _b2.call(_a2)) != null ? _c : content.value, arrow2 && createVNode("div", {
|
9609
|
+
}, customTheme), [(_c = (_b2 = (_a2 = ctx.slots).content) == null ? void 0 : _b2.call(_a2)) != null ? _c : content.value, arrow2.value && createVNode("div", {
|
9608
9610
|
"class": "arrow",
|
9609
9611
|
"data-popper-arrow": true
|
9610
9612
|
}, null)])];
|
@@ -10356,22 +10358,79 @@ function useHover() {
|
|
10356
10358
|
cancelHover
|
10357
10359
|
};
|
10358
10360
|
}
|
10361
|
+
function useRegistry(data2) {
|
10362
|
+
const register = (item) => {
|
10363
|
+
if (!item)
|
10364
|
+
return;
|
10365
|
+
return data2.value.add(item);
|
10366
|
+
};
|
10367
|
+
const unregister = (item) => data2.value.delete(item);
|
10368
|
+
return {
|
10369
|
+
register,
|
10370
|
+
unregister
|
10371
|
+
};
|
10372
|
+
}
|
10359
10373
|
function useDebouncedRef(value, delay = 200) {
|
10360
10374
|
let timeout;
|
10375
|
+
let innerValue = value;
|
10361
10376
|
return customRef((track, trigger) => ({
|
10362
10377
|
get() {
|
10363
10378
|
track();
|
10364
|
-
return
|
10379
|
+
return innerValue;
|
10365
10380
|
},
|
10366
10381
|
set(newValue) {
|
10367
10382
|
clearTimeout(timeout);
|
10368
10383
|
timeout = setTimeout(() => {
|
10369
|
-
|
10384
|
+
innerValue = newValue;
|
10370
10385
|
trigger();
|
10371
10386
|
}, delay);
|
10372
10387
|
}
|
10373
10388
|
}));
|
10374
10389
|
}
|
10390
|
+
function usePopover(config) {
|
10391
|
+
const { popoverMinWidth } = config;
|
10392
|
+
const popperWidth = ref("auto");
|
10393
|
+
const isPopoverShow = ref(false);
|
10394
|
+
const onPopoverFirstUpdate = (instance) => {
|
10395
|
+
const { reference: reference2 } = instance.elements;
|
10396
|
+
popperWidth.value = Math.max(reference2.offsetWidth, popoverMinWidth);
|
10397
|
+
};
|
10398
|
+
const togglePopover = () => {
|
10399
|
+
isPopoverShow.value = !isPopoverShow.value;
|
10400
|
+
};
|
10401
|
+
const hidePopover = () => {
|
10402
|
+
isPopoverShow.value = false;
|
10403
|
+
};
|
10404
|
+
const showPopover = () => {
|
10405
|
+
isPopoverShow.value = true;
|
10406
|
+
};
|
10407
|
+
return {
|
10408
|
+
isPopoverShow,
|
10409
|
+
popperWidth,
|
10410
|
+
togglePopover,
|
10411
|
+
onPopoverFirstUpdate,
|
10412
|
+
hidePopover,
|
10413
|
+
showPopover
|
10414
|
+
};
|
10415
|
+
}
|
10416
|
+
function useRemoteSearch(method) {
|
10417
|
+
const searchKey = useDebouncedRef("");
|
10418
|
+
const searchLoading = ref(false);
|
10419
|
+
watch(searchKey, async () => {
|
10420
|
+
searchLoading.value = true;
|
10421
|
+
await method(searchKey.value);
|
10422
|
+
searchLoading.value = false;
|
10423
|
+
});
|
10424
|
+
return {
|
10425
|
+
searchKey,
|
10426
|
+
searchLoading
|
10427
|
+
};
|
10428
|
+
}
|
10429
|
+
function toLowerCase(value = "") {
|
10430
|
+
if (!value)
|
10431
|
+
return value;
|
10432
|
+
return String(value).trim().toLowerCase();
|
10433
|
+
}
|
10375
10434
|
var BkOption = defineComponent({
|
10376
10435
|
name: "Option",
|
10377
10436
|
props: {
|
@@ -10387,28 +10446,12 @@ var BkOption = defineComponent({
|
|
10387
10446
|
visible: true
|
10388
10447
|
});
|
10389
10448
|
const {
|
10390
|
-
disabled
|
10391
|
-
label
|
10449
|
+
disabled
|
10392
10450
|
} = toRefs(props);
|
10393
10451
|
const select2 = inject(selectKey, null);
|
10394
10452
|
const group = inject(optionGroupKey, null);
|
10395
10453
|
const selected = computed(() => select2.selectedOptions.has(proxy));
|
10396
10454
|
const multiple = computed(() => select2 == null ? void 0 : select2.props.multiple);
|
10397
|
-
watchEffect(() => {
|
10398
|
-
var _a;
|
10399
|
-
if (group == null ? void 0 : group.groupCollapse) {
|
10400
|
-
states.visible = false;
|
10401
|
-
} else if (!(select2 == null ? void 0 : select2.isRemoteSearch) && (select2 == null ? void 0 : select2.searchKey)) {
|
10402
|
-
states.visible = (_a = toLowerCase(String(label.value))) == null ? void 0 : _a.includes(toLowerCase(select2 == null ? void 0 : select2.searchKey));
|
10403
|
-
} else {
|
10404
|
-
states.visible = true;
|
10405
|
-
}
|
10406
|
-
});
|
10407
|
-
const toLowerCase = (value = "") => {
|
10408
|
-
if (!value)
|
10409
|
-
return value;
|
10410
|
-
return String(value).trim().toLowerCase();
|
10411
|
-
};
|
10412
10455
|
const handleOptionClick = () => {
|
10413
10456
|
if (disabled.value)
|
10414
10457
|
return;
|
@@ -10416,9 +10459,11 @@ var BkOption = defineComponent({
|
|
10416
10459
|
};
|
10417
10460
|
onBeforeMount(() => {
|
10418
10461
|
select2 == null ? void 0 : select2.register(proxy);
|
10462
|
+
group == null ? void 0 : group.register(proxy);
|
10419
10463
|
});
|
10420
10464
|
onBeforeUnmount(() => {
|
10421
10465
|
select2 == null ? void 0 : select2.unregister(proxy);
|
10466
|
+
group == null ? void 0 : group.unregister(proxy);
|
10422
10467
|
});
|
10423
10468
|
return __spreadProps(__spreadValues({}, toRefs(states)), {
|
10424
10469
|
selected,
|
@@ -10452,41 +10497,38 @@ var OptionGroup = defineComponent({
|
|
10452
10497
|
setup(props, {
|
10453
10498
|
emit
|
10454
10499
|
}) {
|
10455
|
-
const
|
10456
|
-
|
10500
|
+
const {
|
10501
|
+
proxy
|
10502
|
+
} = getCurrentInstance();
|
10503
|
+
const select2 = inject(selectKey, null);
|
10457
10504
|
const states = reactive({
|
10458
10505
|
groupCollapse: props.collapse,
|
10459
10506
|
visible: true
|
10460
10507
|
});
|
10461
|
-
const
|
10462
|
-
|
10463
|
-
|
10464
|
-
|
10465
|
-
|
10466
|
-
|
10467
|
-
if (Array.isArray(node.children)) {
|
10468
|
-
node.children.forEach((child) => {
|
10469
|
-
var _a;
|
10470
|
-
if (child.type && child.type.name === "Option" && child.component && child.component.proxy) {
|
10471
|
-
children2.push(child.component.proxy);
|
10472
|
-
} else if ((_a = child.children) == null ? void 0 : _a.length) {
|
10473
|
-
children2.push(...flattedChildren(child));
|
10474
|
-
}
|
10475
|
-
});
|
10476
|
-
}
|
10477
|
-
return children2;
|
10478
|
-
};
|
10508
|
+
const options = ref(/* @__PURE__ */ new Set());
|
10509
|
+
const {
|
10510
|
+
register,
|
10511
|
+
unregister
|
10512
|
+
} = useRegistry(options);
|
10513
|
+
const groupLabel = computed(() => `${props.label} (${[...options.value.values()].filter((option) => option.visible).length})`);
|
10479
10514
|
const handleToggleCollapse = () => {
|
10480
|
-
if (!props.collapsible)
|
10515
|
+
if (!props.collapsible || props.disabled)
|
10481
10516
|
return;
|
10482
10517
|
states.groupCollapse = !states.groupCollapse;
|
10483
10518
|
emit("update:collapse", states.groupCollapse);
|
10484
10519
|
};
|
10485
|
-
|
10486
|
-
|
10520
|
+
provide(optionGroupKey, reactive(__spreadProps(__spreadValues({}, toRefs(props)), {
|
10521
|
+
register,
|
10522
|
+
unregister,
|
10523
|
+
groupCollapse: toRef(states, "groupCollapse")
|
10524
|
+
})));
|
10525
|
+
onBeforeMount(() => {
|
10526
|
+
select2 == null ? void 0 : select2.registerGroup(proxy);
|
10527
|
+
});
|
10528
|
+
onBeforeUnmount(() => {
|
10529
|
+
select2 == null ? void 0 : select2.unregisterGroup(proxy);
|
10487
10530
|
});
|
10488
10531
|
return __spreadProps(__spreadValues({}, toRefs(states)), {
|
10489
|
-
children,
|
10490
10532
|
groupLabel,
|
10491
10533
|
handleToggleCollapse
|
10492
10534
|
});
|
@@ -10495,7 +10537,8 @@ var OptionGroup = defineComponent({
|
|
10495
10537
|
var _a, _b;
|
10496
10538
|
const groupClass = classes({
|
10497
10539
|
"bk-option-group": true,
|
10498
|
-
collapsible: this.collapsible
|
10540
|
+
collapsible: this.collapsible,
|
10541
|
+
disabled: this.disabled
|
10499
10542
|
});
|
10500
10543
|
const groupLabelClass = classes({
|
10501
10544
|
"bk-option-group-label": true,
|
@@ -10512,13 +10555,13 @@ var OptionGroup = defineComponent({
|
|
10512
10555
|
"onClick": this.handleToggleCollapse
|
10513
10556
|
}, [this.$slots.label ? this.$slots.label() : createVNode("span", {
|
10514
10557
|
"class": "default-group-label"
|
10515
|
-
}, [this.collapsible
|
10558
|
+
}, [this.collapsible && createVNode(angleUpFill, {
|
10516
10559
|
"class": groupLabelIconClass
|
10517
|
-
}, null)
|
10560
|
+
}, null), createVNode("span", {
|
10518
10561
|
"class": "default-group-label-title"
|
10519
|
-
}, [this.groupLabel])])]), createVNode("ul", {
|
10562
|
+
}, [this.groupLabel])])]), withDirectives(createVNode("ul", {
|
10520
10563
|
"class": "bk-option-group-content"
|
10521
|
-
}, [(_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)])]), [[vShow, this.visible]]);
|
10564
|
+
}, [(_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)]), [[vShow, !this.groupCollapse]])]), [[vShow, this.visible]]);
|
10522
10565
|
}
|
10523
10566
|
});
|
10524
10567
|
var _populated = false;
|
@@ -10920,6 +10963,67 @@ function createPopperInstance(el, popper2, options) {
|
|
10920
10963
|
}
|
10921
10964
|
}
|
10922
10965
|
var Component$b = defineComponent({
|
10966
|
+
name: "Tag",
|
10967
|
+
props: {
|
10968
|
+
theme: PropTypes.theme(["success", "info", "warning", "danger"]).def(""),
|
10969
|
+
closable: PropTypes.bool.def(false),
|
10970
|
+
type: PropTypes.commonType(["", "filled", "stroke"]).def(""),
|
10971
|
+
checkable: PropTypes.bool.def(false),
|
10972
|
+
checked: PropTypes.bool.def(false),
|
10973
|
+
radius: PropTypes.string.def("2px"),
|
10974
|
+
extCls: PropTypes.string.def("")
|
10975
|
+
},
|
10976
|
+
emits: ["change", "close"],
|
10977
|
+
slots: ["icon"],
|
10978
|
+
setup(props, {
|
10979
|
+
emit
|
10980
|
+
}) {
|
10981
|
+
const wrapperCls = computed(() => classes({
|
10982
|
+
"bk-tag-closable": props.closable,
|
10983
|
+
"bk-tag-checkable": props.checkable,
|
10984
|
+
"bk-tag-check": props.checked,
|
10985
|
+
[`bk-tag-${props.type}`]: props.type,
|
10986
|
+
[`bk-tag-${props.theme}`]: props.theme,
|
10987
|
+
[props.extCls]: !!props.extCls
|
10988
|
+
}, "bk-tag"));
|
10989
|
+
const wrapperStyle = computed(() => ({
|
10990
|
+
borderRadius: props.radius
|
10991
|
+
}));
|
10992
|
+
const handleClose = (e) => {
|
10993
|
+
e.preventDefault();
|
10994
|
+
e.stopPropagation();
|
10995
|
+
emit("close", e);
|
10996
|
+
};
|
10997
|
+
const handleClick = (e) => {
|
10998
|
+
e.preventDefault();
|
10999
|
+
e.stopPropagation();
|
11000
|
+
if (props.checkable) {
|
11001
|
+
emit("change", !props.checked);
|
11002
|
+
}
|
11003
|
+
};
|
11004
|
+
return {
|
11005
|
+
wrapperCls,
|
11006
|
+
wrapperStyle,
|
11007
|
+
handleClose,
|
11008
|
+
handleClick
|
11009
|
+
};
|
11010
|
+
},
|
11011
|
+
render() {
|
11012
|
+
var _a, _b;
|
11013
|
+
return createVNode("div", {
|
11014
|
+
"class": this.wrapperCls,
|
11015
|
+
"style": this.wrapperStyle,
|
11016
|
+
"onClick": this.handleClick
|
11017
|
+
}, [this.$slots.icon ? createVNode("span", {
|
11018
|
+
"class": "bk-tag-icon"
|
11019
|
+
}, [this.$slots.icon()]) : "", createVNode("span", null, [(_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)]), this.closable ? createVNode(error, {
|
11020
|
+
"class": "bk-tag-close",
|
11021
|
+
"onClick": this.handleClose
|
11022
|
+
}, null) : ""]);
|
11023
|
+
}
|
11024
|
+
});
|
11025
|
+
const BkTag = withInstall(Component$b);
|
11026
|
+
var Component$a = defineComponent({
|
10923
11027
|
name: "Select",
|
10924
11028
|
directives: {
|
10925
11029
|
clickoutside: ClickOutside
|
@@ -10927,43 +11031,84 @@ var Component$b = defineComponent({
|
|
10927
11031
|
props: {
|
10928
11032
|
modelValue: PropTypes.any,
|
10929
11033
|
multiple: PropTypes.bool.def(false),
|
10930
|
-
placeholder: PropTypes.string.def("\u8BF7\u9009\u62E9"),
|
10931
11034
|
disabled: PropTypes.bool.def(false),
|
10932
|
-
size: PropTypes.size().def("
|
11035
|
+
size: PropTypes.size().def("default"),
|
10933
11036
|
clearable: PropTypes.bool.def(true),
|
10934
11037
|
loading: PropTypes.bool.def(false),
|
10935
11038
|
filterable: PropTypes.bool.def(false),
|
10936
11039
|
remoteMethod: PropTypes.func,
|
10937
|
-
scrollHeight: PropTypes.number.def(216)
|
11040
|
+
scrollHeight: PropTypes.number.def(216),
|
11041
|
+
showSelectAll: PropTypes.bool.def(false),
|
11042
|
+
popoverMinWidth: PropTypes.number.def(0),
|
11043
|
+
showOnInit: PropTypes.bool.def(false),
|
11044
|
+
multipleMode: PropTypes.oneOf(["default", "tag"]).def("default"),
|
11045
|
+
tagTheme: PropTypes.theme(["success", "info", "warning", "danger"]).def(""),
|
11046
|
+
behavior: PropTypes.oneOf(["normal", "simplicity"]).def("normal"),
|
11047
|
+
collapseTags: PropTypes.bool.def(false),
|
11048
|
+
noDataText: PropTypes.string.def("\u65E0\u6570\u636E"),
|
11049
|
+
noMatchText: PropTypes.string.def("\u65E0\u5339\u914D\u6570\u636E"),
|
11050
|
+
loadingText: PropTypes.string.def("\u52A0\u8F7D\u4E2D..."),
|
11051
|
+
placeholder: PropTypes.string.def("\u8BF7\u9009\u62E9"),
|
11052
|
+
selectAllText: PropTypes.string.def("\u5168\u90E8")
|
10938
11053
|
},
|
10939
|
-
emits: ["update:modelValue", "change", "toggle"],
|
11054
|
+
emits: ["update:modelValue", "change", "toggle", "clear"],
|
10940
11055
|
setup(props, {
|
10941
11056
|
emit
|
10942
11057
|
}) {
|
10943
11058
|
const {
|
10944
11059
|
modelValue,
|
10945
11060
|
disabled,
|
10946
|
-
size,
|
10947
11061
|
filterable,
|
10948
11062
|
placeholder,
|
10949
11063
|
multiple,
|
10950
11064
|
remoteMethod,
|
10951
|
-
loading: loading2
|
11065
|
+
loading: loading2,
|
11066
|
+
loadingText,
|
11067
|
+
noDataText,
|
11068
|
+
noMatchText,
|
11069
|
+
popoverMinWidth,
|
11070
|
+
showOnInit
|
10952
11071
|
} = toRefs(props);
|
10953
11072
|
const states = reactive({
|
10954
11073
|
currentPlaceholder: placeholder.value,
|
10955
|
-
options: /* @__PURE__ */ new Set(),
|
10956
11074
|
selectedOptions: /* @__PURE__ */ new Set(),
|
10957
11075
|
currentSelectedLabel: ""
|
10958
11076
|
});
|
10959
|
-
const selectTriggerRef = ref();
|
10960
11077
|
const inputRef = ref();
|
10961
|
-
const
|
10962
|
-
|
10963
|
-
|
10964
|
-
|
10965
|
-
|
10966
|
-
const
|
11078
|
+
const popoverRef = ref();
|
11079
|
+
const options = ref(/* @__PURE__ */ new Set());
|
11080
|
+
const groups = ref(/* @__PURE__ */ new Set());
|
11081
|
+
const isDisabled = computed(() => disabled.value || loading2.value);
|
11082
|
+
const selectedLabel = computed(() => [...states.selectedOptions.values()].map((option) => option.label));
|
11083
|
+
const isAllSelected = computed(() => [...options.value.values()].filter((option) => !option.disabled).every((option) => states.selectedOptions.has(option)));
|
11084
|
+
const isGroup = computed(() => !!groups.value.size);
|
11085
|
+
const isOptionsEmpty = computed(() => !options.value.size);
|
11086
|
+
const isSearchEmpty = computed(() => {
|
11087
|
+
const data2 = [...options.value.values()];
|
11088
|
+
return data2.length && data2.every((option) => !option.visible);
|
11089
|
+
});
|
11090
|
+
const isRemoteSearch = computed(() => typeof remoteMethod.value === "function");
|
11091
|
+
const isShowSelectContent = computed(() => !(searchLoading.value || isOptionsEmpty.value || isSearchEmpty.value));
|
11092
|
+
const curContentText = computed(() => {
|
11093
|
+
if (searchLoading.value) {
|
11094
|
+
return loadingText.value;
|
11095
|
+
}
|
11096
|
+
if (isOptionsEmpty.value) {
|
11097
|
+
return noDataText.value;
|
11098
|
+
}
|
11099
|
+
if (isSearchEmpty.value) {
|
11100
|
+
return noMatchText.value;
|
11101
|
+
}
|
11102
|
+
return "";
|
11103
|
+
});
|
11104
|
+
const {
|
11105
|
+
register,
|
11106
|
+
unregister
|
11107
|
+
} = useRegistry(options);
|
11108
|
+
const {
|
11109
|
+
register: registerGroup,
|
11110
|
+
unregister: unregisterGroup
|
11111
|
+
} = useRegistry(groups);
|
10967
11112
|
const {
|
10968
11113
|
isHover,
|
10969
11114
|
setHover,
|
@@ -10974,63 +11119,63 @@ var Component$b = defineComponent({
|
|
10974
11119
|
handleFocus,
|
10975
11120
|
handleBlur
|
10976
11121
|
} = useFocus();
|
10977
|
-
const
|
10978
|
-
|
10979
|
-
|
10980
|
-
|
10981
|
-
|
10982
|
-
|
10983
|
-
|
10984
|
-
|
10985
|
-
|
10986
|
-
[size.value]: true
|
10987
|
-
}));
|
10988
|
-
const selectedLabel = computed(() => [...states.selectedOptions.values()].map((option) => option.label).join(","));
|
10989
|
-
const popperWidth = ref("auto");
|
10990
|
-
const onPopoverFirstUpdate = (instance) => {
|
10991
|
-
const {
|
10992
|
-
reference: reference2
|
10993
|
-
} = instance.elements;
|
10994
|
-
popperWidth.value = reference2.offsetWidth;
|
10995
|
-
};
|
10996
|
-
const isPopoverShow = ref(false);
|
10997
|
-
const toggleMenu = () => {
|
10998
|
-
if (isDisabled.value)
|
10999
|
-
return;
|
11000
|
-
isPopoverShow.value = !isPopoverShow.value;
|
11001
|
-
emit("toggle", isPopoverShow.value);
|
11002
|
-
};
|
11003
|
-
const hidePopover = () => {
|
11004
|
-
isPopoverShow.value = false;
|
11005
|
-
handleBlur();
|
11006
|
-
};
|
11007
|
-
const showPopover = () => {
|
11008
|
-
isPopoverShow.value = true;
|
11009
|
-
};
|
11010
|
-
watch(isPopoverShow, () => {
|
11011
|
-
handleResetState();
|
11122
|
+
const {
|
11123
|
+
popperWidth,
|
11124
|
+
isPopoverShow,
|
11125
|
+
onPopoverFirstUpdate,
|
11126
|
+
hidePopover,
|
11127
|
+
showPopover,
|
11128
|
+
togglePopover
|
11129
|
+
} = usePopover({
|
11130
|
+
popoverMinWidth: popoverMinWidth.value
|
11012
11131
|
});
|
11013
|
-
const
|
11014
|
-
|
11015
|
-
|
11016
|
-
|
11132
|
+
const defaultSearchMethod = (value) => {
|
11133
|
+
options.value.forEach((option) => {
|
11134
|
+
var _a;
|
11135
|
+
option.visible = (_a = toLowerCase(String(option.label))) == null ? void 0 : _a.includes(toLowerCase(value));
|
11136
|
+
});
|
11137
|
+
};
|
11138
|
+
const {
|
11139
|
+
searchKey,
|
11140
|
+
searchLoading
|
11141
|
+
} = useRemoteSearch(isRemoteSearch.value ? remoteMethod.value : defaultSearchMethod);
|
11142
|
+
const handleResetInputValue = () => {
|
11143
|
+
const label = selectedLabel.value.join(",");
|
11017
11144
|
if (filterable.value && isPopoverShow.value) {
|
11018
|
-
states.currentPlaceholder =
|
11145
|
+
states.currentPlaceholder = label || placeholder.value;
|
11019
11146
|
states.currentSelectedLabel = "";
|
11020
11147
|
} else {
|
11021
11148
|
states.currentPlaceholder = placeholder.value;
|
11022
|
-
states.currentSelectedLabel =
|
11149
|
+
states.currentSelectedLabel = label;
|
11150
|
+
searchKey.value = "";
|
11023
11151
|
}
|
11024
11152
|
};
|
11153
|
+
watch(isPopoverShow, () => {
|
11154
|
+
handleResetInputValue();
|
11155
|
+
});
|
11025
11156
|
const emitChange = (val) => {
|
11026
11157
|
if (val === modelValue.value)
|
11027
11158
|
return;
|
11028
11159
|
emit("change", val);
|
11029
11160
|
emit("update:modelValue", val);
|
11030
11161
|
};
|
11031
|
-
const
|
11162
|
+
const handleTogglePopover = () => {
|
11032
11163
|
if (isDisabled.value)
|
11033
11164
|
return;
|
11165
|
+
togglePopover();
|
11166
|
+
emit("toggle", isPopoverShow.value);
|
11167
|
+
};
|
11168
|
+
const handleInput = (e) => {
|
11169
|
+
searchKey.value = e.target.value;
|
11170
|
+
};
|
11171
|
+
const selectedCallback = () => {
|
11172
|
+
inputRef.value.focus();
|
11173
|
+
popoverRef.value.update();
|
11174
|
+
!searchKey.value && handleResetInputValue();
|
11175
|
+
};
|
11176
|
+
const handleOptionSelected = (option) => {
|
11177
|
+
if (isDisabled.value || !option)
|
11178
|
+
return;
|
11034
11179
|
if (multiple.value) {
|
11035
11180
|
if (states.selectedOptions.has(option)) {
|
11036
11181
|
states.selectedOptions.delete(option);
|
@@ -11044,129 +11189,195 @@ var Component$b = defineComponent({
|
|
11044
11189
|
emitChange(option.value);
|
11045
11190
|
hidePopover();
|
11046
11191
|
}
|
11047
|
-
|
11048
|
-
handleResetState();
|
11192
|
+
selectedCallback();
|
11049
11193
|
};
|
11050
11194
|
const handleClear = (e) => {
|
11051
11195
|
e.stopPropagation();
|
11052
11196
|
states.selectedOptions.clear();
|
11053
|
-
emitChange(multiple.value ? [] : "");
|
11054
11197
|
hidePopover();
|
11055
|
-
|
11198
|
+
handleResetInputValue();
|
11199
|
+
emitChange(multiple.value ? [] : "");
|
11200
|
+
emit("clear", multiple.value ? [] : "");
|
11056
11201
|
};
|
11057
|
-
const
|
11058
|
-
|
11059
|
-
|
11060
|
-
|
11061
|
-
|
11062
|
-
|
11063
|
-
|
11064
|
-
|
11065
|
-
|
11066
|
-
} catch (e) {
|
11067
|
-
console.error(e);
|
11068
|
-
} finally {
|
11069
|
-
searchLoading.value = false;
|
11202
|
+
const handleToggleAll = () => {
|
11203
|
+
if (isAllSelected.value) {
|
11204
|
+
states.selectedOptions.clear();
|
11205
|
+
} else {
|
11206
|
+
options.value.forEach((option) => {
|
11207
|
+
if (option.disabled || states.selectedOptions.has(option))
|
11208
|
+
return;
|
11209
|
+
states.selectedOptions.add(option);
|
11210
|
+
});
|
11070
11211
|
}
|
11071
|
-
|
11072
|
-
|
11212
|
+
selectedCallback();
|
11213
|
+
emitChange([...states.selectedOptions.values()].map((option) => option.value));
|
11214
|
+
};
|
11215
|
+
const handleClickOutside = () => {
|
11216
|
+
hidePopover();
|
11217
|
+
handleBlur();
|
11218
|
+
};
|
11073
11219
|
provide(selectKey, reactive({
|
11074
11220
|
props,
|
11075
|
-
searchKey,
|
11076
11221
|
selectedOptions: unref(states.selectedOptions),
|
11077
|
-
isRemoteSearch,
|
11078
11222
|
register,
|
11079
11223
|
unregister,
|
11224
|
+
registerGroup,
|
11225
|
+
unregisterGroup,
|
11080
11226
|
handleOptionSelected
|
11081
11227
|
}));
|
11082
11228
|
onMounted(() => {
|
11083
11229
|
const initializeValue = Array.isArray(modelValue.value) ? modelValue.value : [modelValue.value];
|
11084
|
-
|
11230
|
+
options.value.forEach((option) => {
|
11085
11231
|
if (initializeValue.includes(option.value)) {
|
11086
11232
|
states.selectedOptions.add(option);
|
11087
11233
|
}
|
11088
11234
|
});
|
11089
|
-
|
11235
|
+
handleResetInputValue();
|
11236
|
+
setTimeout(() => {
|
11237
|
+
showOnInit.value && showPopover();
|
11238
|
+
});
|
11090
11239
|
});
|
11091
11240
|
return __spreadProps(__spreadValues({}, toRefs(states)), {
|
11241
|
+
options,
|
11242
|
+
isDisabled,
|
11092
11243
|
selectedLabel,
|
11093
|
-
selectClass,
|
11094
11244
|
isPopoverShow,
|
11095
11245
|
isHover,
|
11096
11246
|
popperWidth,
|
11097
|
-
|
11247
|
+
popoverRef,
|
11098
11248
|
inputRef,
|
11099
|
-
searchKey,
|
11100
11249
|
searchLoading,
|
11101
|
-
|
11250
|
+
isOptionsEmpty,
|
11251
|
+
isSearchEmpty,
|
11102
11252
|
isFocus,
|
11253
|
+
isShowSelectContent,
|
11254
|
+
curContentText,
|
11255
|
+
isGroup,
|
11256
|
+
searchKey,
|
11103
11257
|
setHover,
|
11104
11258
|
cancelHover,
|
11105
11259
|
handleFocus,
|
11106
11260
|
handleInput,
|
11107
|
-
|
11261
|
+
handleTogglePopover,
|
11108
11262
|
handleClear,
|
11109
11263
|
onPopoverFirstUpdate,
|
11110
11264
|
hidePopover,
|
11111
|
-
showPopover
|
11265
|
+
showPopover,
|
11266
|
+
handleToggleAll,
|
11267
|
+
handleOptionSelected,
|
11268
|
+
handleClickOutside
|
11112
11269
|
});
|
11113
11270
|
},
|
11114
11271
|
render() {
|
11272
|
+
const selectClass = classes({
|
11273
|
+
"bk-select": true,
|
11274
|
+
"popover-show": this.isPopoverShow,
|
11275
|
+
"is-disabled": this.isDisabled,
|
11276
|
+
"is-focus": this.isFocus,
|
11277
|
+
"is-filterable": this.filterable,
|
11278
|
+
[this.size]: true,
|
11279
|
+
[this.behavior]: true
|
11280
|
+
});
|
11115
11281
|
const modifiers = [{
|
11116
11282
|
name: "offset",
|
11117
11283
|
options: {
|
11118
11284
|
offset: [0, 4]
|
11119
11285
|
}
|
11120
11286
|
}];
|
11121
|
-
const
|
11122
|
-
|
11123
|
-
|
11124
|
-
|
11125
|
-
|
11126
|
-
|
11127
|
-
|
11128
|
-
|
11129
|
-
|
11130
|
-
|
11287
|
+
const renderSelectTrigger = () => {
|
11288
|
+
var _a, _b;
|
11289
|
+
const suffixIcon = () => {
|
11290
|
+
if (this.loading) {
|
11291
|
+
return createVNode(BkLoading, {
|
11292
|
+
"class": "spinner",
|
11293
|
+
"mode": "spin",
|
11294
|
+
"size": "mini"
|
11295
|
+
}, null);
|
11296
|
+
}
|
11297
|
+
if (this.clearable && this.isHover) {
|
11298
|
+
return createVNode(close$1, {
|
11299
|
+
"class": "clear-icon",
|
11300
|
+
"onClick": this.handleClear
|
11301
|
+
}, null);
|
11302
|
+
}
|
11303
|
+
return createVNode(angleUp, {
|
11304
|
+
"class": "angle-up"
|
11131
11305
|
}, null);
|
11132
|
-
}
|
11133
|
-
|
11134
|
-
"
|
11135
|
-
|
11136
|
-
|
11137
|
-
|
11138
|
-
|
11139
|
-
|
11140
|
-
|
11141
|
-
|
11142
|
-
|
11143
|
-
|
11144
|
-
|
11145
|
-
|
11146
|
-
|
11147
|
-
|
11148
|
-
|
11149
|
-
|
11150
|
-
|
11306
|
+
};
|
11307
|
+
const renderTriggerInput = () => {
|
11308
|
+
if (this.multipleMode === "tag") {
|
11309
|
+
return createVNode("div", {
|
11310
|
+
"class": "bk-select-tag"
|
11311
|
+
}, [[...this.selectedOptions.values()].map((option) => createVNode(BkTag, {
|
11312
|
+
"closable": true,
|
11313
|
+
"style": {
|
11314
|
+
marginTop: "3px"
|
11315
|
+
},
|
11316
|
+
"theme": this.tagTheme,
|
11317
|
+
"onClose": () => this.handleOptionSelected(option)
|
11318
|
+
}, {
|
11319
|
+
default: () => [option.label]
|
11320
|
+
})), withDirectives(createVNode("input", {
|
11321
|
+
"class": "bk-select-tag-input",
|
11322
|
+
"ref": "inputRef",
|
11323
|
+
"type": "text",
|
11324
|
+
"placeholder": !this.selectedOptions.size ? this.placeholder : "",
|
11325
|
+
"readonly": !this.filterable || !this.isPopoverShow,
|
11326
|
+
"onUpdate:modelValue": ($event) => this.searchKey = $event,
|
11327
|
+
"onFocus": this.handleFocus
|
11328
|
+
}, null), [[vModelText, this.searchKey]])]);
|
11329
|
+
}
|
11330
|
+
return withDirectives(createVNode("input", {
|
11331
|
+
"ref": "inputRef",
|
11332
|
+
"type": "text",
|
11333
|
+
"class": "bk-select-input",
|
11334
|
+
"style": {
|
11335
|
+
paddingLeft: this.$slots.prefixIcon ? "20px" : "10px"
|
11336
|
+
},
|
11337
|
+
"onUpdate:modelValue": ($event) => this.currentSelectedLabel = $event,
|
11338
|
+
"placeholder": this.currentPlaceholder,
|
11339
|
+
"readonly": !this.filterable || !this.isPopoverShow,
|
11340
|
+
"onFocus": this.handleFocus,
|
11341
|
+
"onInput": this.handleInput
|
11342
|
+
}, null), [[vModelText, this.currentSelectedLabel]]);
|
11343
|
+
};
|
11344
|
+
return createVNode("div", {
|
11345
|
+
"class": "bk-select-trigger",
|
11346
|
+
"onClick": this.handleTogglePopover,
|
11347
|
+
"onMouseenter": this.setHover,
|
11348
|
+
"onMouseleave": this.cancelHover
|
11349
|
+
}, [this.$slots.prefixIcon ? createVNode("span", {
|
11350
|
+
"class": "bk-select-prefix"
|
11351
|
+
}, [(_b = (_a = this.$slots).prefixIcon) == null ? void 0 : _b.call(_a)]) : null, renderTriggerInput(), suffixIcon()]);
|
11151
11352
|
};
|
11152
11353
|
const renderSelectContent = () => {
|
11153
11354
|
var _a, _b;
|
11154
|
-
return createVNode("div", null, [
|
11355
|
+
return createVNode("div", null, [!this.isShowSelectContent && createVNode("div", {
|
11356
|
+
"class": "bk-select-empty"
|
11357
|
+
}, [this.searchLoading && createVNode(BkLoading, {
|
11358
|
+
"class": "mr5",
|
11359
|
+
"mode": "spin",
|
11360
|
+
"size": "mini"
|
11361
|
+
}, null), this.curContentText]), createVNode("div", {
|
11155
11362
|
"class": "bk-select-content"
|
11156
11363
|
}, [createVNode("div", {
|
11157
11364
|
"class": "bk-select-dropdown",
|
11158
11365
|
"style": {
|
11159
11366
|
maxHeight: `${this.scrollHeight}px`
|
11160
11367
|
}
|
11161
|
-
}, [createVNode("ul", {
|
11368
|
+
}, [withDirectives(createVNode("ul", {
|
11162
11369
|
"class": "bk-select-options"
|
11163
|
-
}, [
|
11370
|
+
}, [this.multiple && this.showSelectAll && !this.searchKey && createVNode("li", {
|
11371
|
+
"class": "bk-select-option",
|
11372
|
+
"onClick": this.handleToggleAll
|
11373
|
+
}, [this.selectAllText]), (_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)]), [[vShow, this.isShowSelectContent]])]), this.$slots.extension && createVNode("div", {
|
11164
11374
|
"class": "bk-select-extension"
|
11165
|
-
}, [this.$slots.extension()])
|
11375
|
+
}, [this.$slots.extension()])])]);
|
11166
11376
|
};
|
11167
11377
|
return withDirectives(createVNode("div", {
|
11168
|
-
"class":
|
11378
|
+
"class": selectClass
|
11169
11379
|
}, [createVNode(BkPopover, {
|
11380
|
+
"ref": "popoverRef",
|
11170
11381
|
"theme": "light",
|
11171
11382
|
"trigger": "manual",
|
11172
11383
|
"width": this.popperWidth,
|
@@ -11176,35 +11387,12 @@ var Component$b = defineComponent({
|
|
11176
11387
|
"modifiers": modifiers,
|
11177
11388
|
"handleFirstUpdate": this.onPopoverFirstUpdate
|
11178
11389
|
}, {
|
11179
|
-
default: () =>
|
11180
|
-
var _a, _b;
|
11181
|
-
return createVNode("div", {
|
11182
|
-
"class": "bk-select-trigger",
|
11183
|
-
"ref": "selectTriggerRef",
|
11184
|
-
"onClick": this.toggleMenu,
|
11185
|
-
"onMouseenter": this.setHover,
|
11186
|
-
"onMouseleave": this.cancelHover
|
11187
|
-
}, [this.$slots.prefixIcon ? createVNode("span", {
|
11188
|
-
"class": "bk-select-prefix"
|
11189
|
-
}, [(_b = (_a = this.$slots).prefixIcon) == null ? void 0 : _b.call(_a)]) : null, withDirectives(createVNode("input", {
|
11190
|
-
"ref": "inputRef",
|
11191
|
-
"type": "text",
|
11192
|
-
"class": "bk-select-input",
|
11193
|
-
"style": {
|
11194
|
-
paddingLeft: this.$slots.prefixIcon ? "20px" : "10px"
|
11195
|
-
},
|
11196
|
-
"onUpdate:modelValue": ($event) => this.currentSelectedLabel = $event,
|
11197
|
-
"placeholder": this.currentPlaceholder,
|
11198
|
-
"readonly": !this.filterable || !this.isPopoverShow,
|
11199
|
-
"onFocus": this.handleFocus,
|
11200
|
-
"onInput": this.handleInput
|
11201
|
-
}, null), [[vModelText, this.currentSelectedLabel]]), renderSelectRightIcon()]);
|
11202
|
-
},
|
11390
|
+
default: () => renderSelectTrigger(),
|
11203
11391
|
content: () => renderSelectContent()
|
11204
|
-
})]), [[resolveDirective("clickoutside"), this.
|
11392
|
+
})]), [[resolveDirective("clickoutside"), this.handleClickOutside]]);
|
11205
11393
|
}
|
11206
11394
|
});
|
11207
|
-
const BkSelect = withInstallProps(Component$
|
11395
|
+
const BkSelect = withInstallProps(Component$a, { Option: BkOption, Group: OptionGroup });
|
11208
11396
|
function _isSlot$1(s2) {
|
11209
11397
|
return typeof s2 === "function" || Object.prototype.toString.call(s2) === "[object Object]" && !isVNode(s2);
|
11210
11398
|
}
|
@@ -11214,7 +11402,7 @@ const {
|
|
11214
11402
|
const sliderPops = Object.assign({}, propsMixin);
|
11215
11403
|
sliderPops.width.default = "400";
|
11216
11404
|
sliderPops.height.default = "100%";
|
11217
|
-
var Component$
|
11405
|
+
var Component$9 = defineComponent({
|
11218
11406
|
name: "Sideslider",
|
11219
11407
|
components: {
|
11220
11408
|
BkModal,
|
@@ -11271,7 +11459,7 @@ var Component$a = defineComponent({
|
|
11271
11459
|
});
|
11272
11460
|
}
|
11273
11461
|
});
|
11274
|
-
const BkSideslider = withInstall(Component$
|
11462
|
+
const BkSideslider = withInstall(Component$9);
|
11275
11463
|
const stepsProps = {
|
11276
11464
|
theme: PropTypes.theme().def("primary"),
|
11277
11465
|
size: PropTypes.size(),
|
@@ -11285,7 +11473,7 @@ const stepsProps = {
|
|
11285
11473
|
steps: PropTypes.array.def([]),
|
11286
11474
|
beforeChange: PropTypes.func
|
11287
11475
|
};
|
11288
|
-
var Component$
|
11476
|
+
var Component$8 = defineComponent({
|
11289
11477
|
name: "Steps",
|
11290
11478
|
props: stepsProps,
|
11291
11479
|
emits: ["update:curStep", "click"],
|
@@ -11421,8 +11609,8 @@ var Component$9 = defineComponent({
|
|
11421
11609
|
})]);
|
11422
11610
|
}
|
11423
11611
|
});
|
11424
|
-
const BkSteps = withInstall(Component$
|
11425
|
-
var Component$
|
11612
|
+
const BkSteps = withInstall(Component$8);
|
11613
|
+
var Component$7 = defineComponent({
|
11426
11614
|
name: "Switcher",
|
11427
11615
|
props: {
|
11428
11616
|
theme: PropTypes.theme().def(""),
|
@@ -11516,7 +11704,7 @@ var Component$8 = defineComponent({
|
|
11516
11704
|
}, [isChecked.value ? props.onText : props.offText]) : ""]);
|
11517
11705
|
}
|
11518
11706
|
});
|
11519
|
-
const BkSwitcher = withInstall(Component$
|
11707
|
+
const BkSwitcher = withInstall(Component$7);
|
11520
11708
|
const EventProps$1 = {
|
11521
11709
|
onContentScroll: Function
|
11522
11710
|
};
|
@@ -11620,7 +11808,7 @@ var virtualRender = {
|
|
11620
11808
|
}
|
11621
11809
|
}
|
11622
11810
|
};
|
11623
|
-
var Component$
|
11811
|
+
var Component$6 = defineComponent({
|
11624
11812
|
name: "VirtualRender",
|
11625
11813
|
directives: {
|
11626
11814
|
bkVirtualRender: virtualRender
|
@@ -11767,7 +11955,7 @@ var Component$7 = defineComponent({
|
|
11767
11955
|
};
|
11768
11956
|
}
|
11769
11957
|
});
|
11770
|
-
const BkVirtualRender = withInstall(Component$
|
11958
|
+
const BkVirtualRender = withInstall(Component$6);
|
11771
11959
|
const BORDER_OPRIONS = ["none", "row", "col", "outer"];
|
11772
11960
|
const EventProps = {
|
11773
11961
|
onRowClick: Function
|
@@ -12167,7 +12355,7 @@ const paginationProps = {
|
|
12167
12355
|
return value.some((item) => layoutNameMap[item]);
|
12168
12356
|
}, "layout \u7684\u503C\u53EA\u652F\u6301 * total\u3001list\u3001limit *").def(["total", "list", "limit"])
|
12169
12357
|
};
|
12170
|
-
var Component$
|
12358
|
+
var Component$5 = defineComponent({
|
12171
12359
|
name: "Pagination",
|
12172
12360
|
props: paginationProps,
|
12173
12361
|
emits: ["update:modelValue", "change", "update:limit", "limit-change"],
|
@@ -12233,7 +12421,7 @@ var Component$6 = defineComponent({
|
|
12233
12421
|
})), this.renderSmallList()]);
|
12234
12422
|
}
|
12235
12423
|
});
|
12236
|
-
const BkPagination = withInstall(Component$
|
12424
|
+
const BkPagination = withInstall(Component$5);
|
12237
12425
|
class TablePlugins {
|
12238
12426
|
constructor(props, ctx) {
|
12239
12427
|
__publicField(this, "props", null);
|
@@ -12498,7 +12686,7 @@ class TableRender {
|
|
12498
12686
|
})]);
|
12499
12687
|
}
|
12500
12688
|
}
|
12501
|
-
var Component$
|
12689
|
+
var Component$4 = defineComponent({
|
12502
12690
|
name: "Table",
|
12503
12691
|
props: tableProps,
|
12504
12692
|
emits: ["column-pick", "row-click", "page-limit-change", "page-value-change"],
|
@@ -12633,68 +12821,7 @@ var Component$5 = defineComponent({
|
|
12633
12821
|
}, [props.pagination && tableRender.renderTableFooter(localPagination.value)])]);
|
12634
12822
|
}
|
12635
12823
|
});
|
12636
|
-
const BkTable = withInstall(Component$
|
12637
|
-
var Component$4 = defineComponent({
|
12638
|
-
name: "Tag",
|
12639
|
-
props: {
|
12640
|
-
theme: PropTypes.theme(["success", "info", "warning", "danger"]).def(""),
|
12641
|
-
closable: PropTypes.bool.def(false),
|
12642
|
-
type: PropTypes.commonType(["", "filled", "stroke"]).def(""),
|
12643
|
-
checkable: PropTypes.bool.def(false),
|
12644
|
-
checked: PropTypes.bool.def(false),
|
12645
|
-
radius: PropTypes.string.def("2px"),
|
12646
|
-
extCls: PropTypes.string.def("")
|
12647
|
-
},
|
12648
|
-
emits: ["change", "close"],
|
12649
|
-
slots: ["icon"],
|
12650
|
-
setup(props, {
|
12651
|
-
emit
|
12652
|
-
}) {
|
12653
|
-
const wrapperCls = computed(() => classes({
|
12654
|
-
"bk-tag-closable": props.closable,
|
12655
|
-
"bk-tag-checkable": props.checkable,
|
12656
|
-
"bk-tag-check": props.checked,
|
12657
|
-
[`bk-tag-${props.type}`]: props.type,
|
12658
|
-
[`bk-tag-${props.theme}`]: props.theme,
|
12659
|
-
[props.extCls]: !!props.extCls
|
12660
|
-
}, "bk-tag"));
|
12661
|
-
const wrapperStyle = computed(() => ({
|
12662
|
-
borderRadius: props.radius
|
12663
|
-
}));
|
12664
|
-
const handleClose = (e) => {
|
12665
|
-
e.preventDefault();
|
12666
|
-
e.stopPropagation();
|
12667
|
-
emit("close", e);
|
12668
|
-
};
|
12669
|
-
const handleClick = (e) => {
|
12670
|
-
e.preventDefault();
|
12671
|
-
e.stopPropagation();
|
12672
|
-
if (props.checkable) {
|
12673
|
-
emit("change", !props.checked);
|
12674
|
-
}
|
12675
|
-
};
|
12676
|
-
return {
|
12677
|
-
wrapperCls,
|
12678
|
-
wrapperStyle,
|
12679
|
-
handleClose,
|
12680
|
-
handleClick
|
12681
|
-
};
|
12682
|
-
},
|
12683
|
-
render() {
|
12684
|
-
var _a, _b;
|
12685
|
-
return createVNode("div", {
|
12686
|
-
"class": this.wrapperCls,
|
12687
|
-
"style": this.wrapperStyle,
|
12688
|
-
"onClick": this.handleClick
|
12689
|
-
}, [this.$slots.icon ? createVNode("span", {
|
12690
|
-
"class": "bk-tag-icon"
|
12691
|
-
}, [this.$slots.icon()]) : "", createVNode("span", null, [(_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)]), this.closable ? createVNode(error, {
|
12692
|
-
"class": "bk-tag-close",
|
12693
|
-
"onClick": this.handleClose
|
12694
|
-
}, null) : ""]);
|
12695
|
-
}
|
12696
|
-
});
|
12697
|
-
const BkTag = withInstall(Component$4);
|
12824
|
+
const BkTable = withInstall(Component$4);
|
12698
12825
|
var bkDivider = defineComponent({
|
12699
12826
|
name: "Divider",
|
12700
12827
|
props: {
|