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.
@@ -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, watchEffect, onBeforeMount, withDirectives, vShow, toRef, unref, vModelText, resolveDirective, onUpdated, render, onUnmounted, Teleport } from "vue";
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 value;
10379
+ return innerValue;
10365
10380
  },
10366
10381
  set(newValue) {
10367
10382
  clearTimeout(timeout);
10368
10383
  timeout = setTimeout(() => {
10369
- value = newValue;
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 children = ref([]);
10456
- const instance = getCurrentInstance();
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 groupLabel = computed(() => `${props.label} (${children.value.filter((option) => option.visible).length})`);
10462
- provide(optionGroupKey, reactive(__spreadProps(__spreadValues({}, toRefs(props)), {
10463
- groupCollapse: toRef(states, "groupCollapse")
10464
- })));
10465
- const flattedChildren = (node) => {
10466
- const children2 = [];
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
- onMounted(() => {
10486
- children.value = flattedChildren(instance.subTree);
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 ? createVNode(angleUpFill, {
10558
+ }, [this.collapsible && createVNode(angleUpFill, {
10516
10559
  "class": groupLabelIconClass
10517
- }, null) : null, createVNode("span", {
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("small"),
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 register = (option) => {
10962
- if (!option)
10963
- return;
10964
- return states.options.add(option);
10965
- };
10966
- const unregister = (option) => states.options.delete(option);
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 handleInput = (e) => {
10978
- searchKey.value = e.target.value;
10979
- };
10980
- const isDisabled = computed(() => disabled.value || loading2.value);
10981
- const selectClass = computed(() => ({
10982
- "bk-select": true,
10983
- "popover-show": isPopoverShow.value,
10984
- "is-disabled": isDisabled.value,
10985
- "is-focus": isFocus.value,
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 handleResetState = () => {
11014
- if (!isRemoteSearch.value || isRemoteSearch.value && !isPopoverShow.value) {
11015
- searchKey.value = "";
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 = selectedLabel.value || placeholder.value;
11145
+ states.currentPlaceholder = label || placeholder.value;
11019
11146
  states.currentSelectedLabel = "";
11020
11147
  } else {
11021
11148
  states.currentPlaceholder = placeholder.value;
11022
- states.currentSelectedLabel = selectedLabel.value;
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 handleOptionSelected = (option) => {
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
- inputRef.value.focus();
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
- handleResetState();
11198
+ handleResetInputValue();
11199
+ emitChange(multiple.value ? [] : "");
11200
+ emit("clear", multiple.value ? [] : "");
11056
11201
  };
11057
- const searchKey = useDebouncedRef("");
11058
- const isRemoteSearch = computed(() => typeof remoteMethod.value === "function");
11059
- const searchLoading = ref(false);
11060
- watchEffect(async () => {
11061
- if (!isRemoteSearch.value || !isPopoverShow.value || !searchKey.value)
11062
- return;
11063
- try {
11064
- searchLoading.value = true;
11065
- await remoteMethod.value(searchKey.value);
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
- const isEmpty2 = computed(() => [...states.options.values()].every((option) => !option.visible));
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
- states.options.forEach((option) => {
11230
+ options.value.forEach((option) => {
11085
11231
  if (initializeValue.includes(option.value)) {
11086
11232
  states.selectedOptions.add(option);
11087
11233
  }
11088
11234
  });
11089
- handleResetState();
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
- selectTriggerRef,
11247
+ popoverRef,
11098
11248
  inputRef,
11099
- searchKey,
11100
11249
  searchLoading,
11101
- isEmpty: isEmpty2,
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
- toggleMenu,
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 renderSelectRightIcon = () => {
11122
- if (this.loading) {
11123
- return createVNode(spinner, {
11124
- "class": "spinner"
11125
- }, null);
11126
- }
11127
- if (this.clearable && this.isHover) {
11128
- return createVNode(close$1, {
11129
- "class": "clear-icon",
11130
- "onClick": this.handleClear
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
- return createVNode(angleUp, {
11134
- "class": "angle-up"
11135
- }, null);
11136
- };
11137
- const renderEmptySelect = () => {
11138
- if (this.searchLoading) {
11139
- return withDirectives(createVNode("div", {
11140
- "class": "bk-select-empty"
11141
- }, [createVNode(spinner, {
11142
- "class": "spinner"
11143
- }, null), createTextVNode("\u52A0\u8F7D\u4E2D...")]), [[vShow, this.searchLoading]]);
11144
- }
11145
- if (this.isEmpty) {
11146
- return withDirectives(createVNode("div", {
11147
- "class": "bk-select-empty"
11148
- }, [createTextVNode("\u65E0\u5339\u914D\u6570\u636E")]), [[vShow, this.isEmpty]]);
11149
- }
11150
- return null;
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, [renderEmptySelect(), withDirectives(createVNode("div", {
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
- }, [(_b = (_a = this.$slots).default) == null ? void 0 : _b.call(_a)])]), this.$slots.extension ? createVNode("div", {
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()]) : null]), [[vShow, !this.searchLoading && !this.isEmpty]])]);
11375
+ }, [this.$slots.extension()])])]);
11166
11376
  };
11167
11377
  return withDirectives(createVNode("div", {
11168
- "class": this.selectClass
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.hidePopover]]);
11392
+ })]), [[resolveDirective("clickoutside"), this.handleClickOutside]]);
11205
11393
  }
11206
11394
  });
11207
- const BkSelect = withInstallProps(Component$b, { Option: BkOption, Group: OptionGroup });
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$a = defineComponent({
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$a);
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$9 = defineComponent({
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$9);
11425
- var Component$8 = defineComponent({
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$8);
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$7 = defineComponent({
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$7);
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$6 = defineComponent({
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$6);
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$5 = defineComponent({
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$5);
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: {