bkui-vue 0.0.1-beta.201 → 0.0.1-beta.203

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.esm.js CHANGED
@@ -11324,10 +11324,17 @@ function hide$1(el) {
11324
11324
  onHide();
11325
11325
  }
11326
11326
  }
11327
+ const CachedConst = {};
11327
11328
  const isAvailableId = (query) => {
11328
11329
  const container2 = document.querySelector(query);
11329
11330
  return container2 instanceof HTMLElement;
11330
11331
  };
11332
+ const getFullscreenUid = () => {
11333
+ if (!CachedConst.fullscreenReferId) {
11334
+ CachedConst.fullscreenReferId = `id_${uuid_1.v4()}`;
11335
+ }
11336
+ return CachedConst.fullscreenReferId;
11337
+ };
11331
11338
  function createPopoverComponent(options) {
11332
11339
  let $PopoverInstance = null;
11333
11340
  let $PopoverInstanceVm = null;
@@ -12865,7 +12872,7 @@ function autoUpdate(reference2, floating, update, options) {
12865
12872
  const computePosition = (reference2, floating, options) => computePosition$1(reference2, floating, __spreadValues({
12866
12873
  platform
12867
12874
  }, options));
12868
- var usePlatform = () => {
12875
+ var usePlatform = (fullscreenTarget) => {
12869
12876
  const getElementRects = ({
12870
12877
  reference: reference2,
12871
12878
  floating
@@ -12898,11 +12905,11 @@ var usePlatform = () => {
12898
12905
  };
12899
12906
  };
12900
12907
  const getClippingRect2 = ({}) => {
12901
- var _a, _b;
12908
+ var _a;
12902
12909
  const {
12903
12910
  width = 0,
12904
12911
  height = 0
12905
- } = (_b = (_a = document.fullscreenElement) == null ? void 0 : _a.getBoundingClientRect()) != null ? _b : {};
12912
+ } = (_a = fullscreenTarget == null ? void 0 : fullscreenTarget.getBoundingClientRect()) != null ? _a : {};
12906
12913
  return {
12907
12914
  width,
12908
12915
  height,
@@ -12916,8 +12923,14 @@ var usePlatform = () => {
12916
12923
  getClippingRect: getClippingRect2
12917
12924
  };
12918
12925
  };
12919
- var useFloating = (props2, ctx, refReference, refContent, refArrow, refRoot) => {
12926
+ var useFloating = (props2, ctx, {
12927
+ refReference,
12928
+ refContent,
12929
+ refArrow,
12930
+ refRoot
12931
+ }) => {
12920
12932
  const localIsShow = ref(false);
12933
+ const fullScreenTarget = ref();
12921
12934
  const isElementFullScreen = () => {
12922
12935
  var _a, _b, _c;
12923
12936
  const elReference = resolveTargetElement((_a = refReference.value) == null ? void 0 : _a.$el);
@@ -12926,6 +12939,15 @@ var useFloating = (props2, ctx, refReference, refContent, refArrow, refRoot) =>
12926
12939
  }
12927
12940
  return (_c = document.fullscreenElement) == null ? void 0 : _c.contains(elReference);
12928
12941
  };
12942
+ const getFullscreenRoot = (selector) => {
12943
+ if (isElementFullScreen()) {
12944
+ if (document.fullscreenElement.shadowRoot) {
12945
+ return document.fullscreenElement.shadowRoot.querySelector(selector);
12946
+ }
12947
+ return document.fullscreenElement.querySelector(selector);
12948
+ }
12949
+ return document.body;
12950
+ };
12929
12951
  const themeList = ["dark", "light"];
12930
12952
  const compTheme = computed(() => {
12931
12953
  var _a, _b;
@@ -12938,8 +12960,8 @@ var useFloating = (props2, ctx, refReference, refContent, refArrow, refRoot) =>
12938
12960
  customThemes
12939
12961
  };
12940
12962
  });
12941
- const isHideMiddlewareAvailable = () => !isElementFullScreen() && props2.autoVisibility;
12942
- const isAutoPlacemntAvailable = () => isElementFullScreen() || props2.autoPlacement;
12963
+ const isHideMiddlewareAvailable = () => props2.autoVisibility;
12964
+ const isAutoPlacementAvailable = () => props2.autoPlacement;
12943
12965
  const resolvePopElements = () => {
12944
12966
  var _a, _b, _c, _d;
12945
12967
  const elReference = resolveTargetElement((_a = refReference.value) == null ? void 0 : _a.$el);
@@ -12967,7 +12989,7 @@ var useFloating = (props2, ctx, refReference, refContent, refArrow, refRoot) =>
12967
12989
  element: elArrow
12968
12990
  }));
12969
12991
  }
12970
- if (isAutoPlacemntAvailable()) {
12992
+ if (isAutoPlacementAvailable()) {
12971
12993
  middleware.push(autoPlacement());
12972
12994
  } else {
12973
12995
  middleware.unshift(inline());
@@ -12981,7 +13003,7 @@ var useFloating = (props2, ctx, refReference, refContent, refArrow, refRoot) =>
12981
13003
  getElementRects,
12982
13004
  getDimensions: getDimensions2,
12983
13005
  getClippingRect: getClippingRect2
12984
- } = usePlatform();
13006
+ } = usePlatform(fullScreenTarget.value);
12985
13007
  Object.assign(options, {
12986
13008
  platform: __spreadProps(__spreadValues({}, (_a = props3 == null ? void 0 : props3.platform) != null ? _a : {}), {
12987
13009
  getElementRects,
@@ -13166,6 +13188,9 @@ var useFloating = (props2, ctx, refReference, refContent, refArrow, refRoot) =>
13166
13188
  };
13167
13189
  return (_a = triggerEvents[props2.trigger]) != null ? _a : [];
13168
13190
  };
13191
+ const updateFullscreenTarget = (val) => {
13192
+ fullScreenTarget.value = val;
13193
+ };
13169
13194
  watch(localIsShow, (val) => {
13170
13195
  if (val) {
13171
13196
  hanldePopoverShow();
@@ -13183,15 +13208,16 @@ var useFloating = (props2, ctx, refReference, refContent, refArrow, refRoot) =>
13183
13208
  isElementFullScreen,
13184
13209
  resolveTargetElement,
13185
13210
  createPopInstance,
13211
+ updateFullscreenTarget,
13212
+ getFullscreenRoot,
13186
13213
  localIsShow,
13187
13214
  cleanup
13188
13215
  };
13189
13216
  };
13190
13217
  let popContainerId = null;
13191
- let fullscreenReferId = null;
13192
13218
  let parentNodeReferId = null;
13193
13219
  var usePopperId = (props2, prefix = "#") => {
13194
- const getPrefixId = (isFullscreen = false, root) => {
13220
+ const getPrefixId = (root) => {
13195
13221
  let resolvedBoundary = null;
13196
13222
  const resolveBoundary = (fn2) => {
13197
13223
  if (resolvedBoundary === null) {
@@ -13208,11 +13234,6 @@ var usePopperId = (props2, prefix = "#") => {
13208
13234
  }
13209
13235
  }
13210
13236
  };
13211
- const resolveFullScreenBoundary = () => {
13212
- if (isFullscreen) {
13213
- resolvedBoundary = `[data-fllsrn-id=${fullscreenReferId}]`;
13214
- }
13215
- };
13216
13237
  const resolveCommonBoundary = () => {
13217
13238
  if (!/^body$/i.test(props2.boundary) && typeof props2.boundary === "string") {
13218
13239
  if (!isAvailableId(props2.boundary)) {
@@ -13225,7 +13246,6 @@ var usePopperId = (props2, prefix = "#") => {
13225
13246
  };
13226
13247
  resolveBoundary(resolveParentBoundary);
13227
13248
  resolveBoundary(resolveCommonBoundary);
13228
- resolveBoundary(resolveFullScreenBoundary);
13229
13249
  resolveBoundary(() => {
13230
13250
  resolvedBoundary = typeof props2.boundary === "string" ? props2.boundary : `${prefix}${popContainerId}`;
13231
13251
  });
@@ -13238,33 +13258,20 @@ var usePopperId = (props2, prefix = "#") => {
13238
13258
  popContainer.setAttribute("data-popper-id", popContainerId);
13239
13259
  document.body.append(popContainer);
13240
13260
  }
13241
- if (fullscreenReferId === null) {
13242
- fullscreenReferId = `id_${uuid_1.v4()}`;
13243
- }
13244
13261
  if (parentNodeReferId === null) {
13245
13262
  parentNodeReferId = `id_${uuid_1.v4()}`;
13246
13263
  }
13247
- const resetFullscreenElementTag = () => {
13248
- var _a;
13249
- if (document.fullscreenElement === null) {
13250
- const query = `[data-fllsrn-id=${fullscreenReferId}]`;
13251
- ((_a = document.querySelectorAll(query)) != null ? _a : []).forEach((element) => {
13252
- element.removeAttribute("data-fllsrn-id");
13253
- });
13254
- } else {
13255
- document.fullscreenElement.setAttribute("data-fllsrn-id", fullscreenReferId);
13256
- }
13257
- };
13258
13264
  return {
13259
13265
  popContainerId,
13260
13266
  prefixId: getPrefixId(),
13261
- getPrefixId,
13262
- resetFullscreenElementTag
13267
+ getPrefixId
13263
13268
  };
13264
13269
  };
13265
- var usePopoverInit = (props2, ctx, refReference, refContent, refArrow, refRoot) => {
13270
+ var usePopoverInit = (props2, ctx, { refReference, refContent, refArrow, refRoot }) => {
13266
13271
  let storeEvents = null;
13267
13272
  const isFullscreen = ref(false);
13273
+ const fullscreenReferId = getFullscreenUid();
13274
+ const fullScreenTarget = ref();
13268
13275
  const {
13269
13276
  localIsShow,
13270
13277
  showPopover,
@@ -13273,9 +13280,10 @@ var usePopoverInit = (props2, ctx, refReference, refContent, refArrow, refRoot)
13273
13280
  resolveTriggerEvents,
13274
13281
  resolvePopElements,
13275
13282
  isElementFullScreen,
13276
- cleanup,
13277
- createPopInstance
13278
- } = useFloating(props2, ctx, refReference, refContent, refArrow, refRoot);
13283
+ updateFullscreenTarget,
13284
+ createPopInstance,
13285
+ getFullscreenRoot
13286
+ } = useFloating(props2, ctx, { refReference, refContent, refArrow, refRoot });
13279
13287
  const showFn = () => {
13280
13288
  showPopover();
13281
13289
  };
@@ -13323,16 +13331,39 @@ var usePopoverInit = (props2, ctx, refReference, refContent, refArrow, refRoot)
13323
13331
  };
13324
13332
  const updateBoundary = () => {
13325
13333
  const { elReference, root } = resolvePopElements();
13326
- boundary.value = getPrefixId(isFullscreen.value, root || elReference);
13334
+ if (isFullscreen.value) {
13335
+ boundary.value = fullScreenTarget == null ? void 0 : fullScreenTarget.value;
13336
+ return;
13337
+ }
13338
+ boundary.value = getPrefixId(root || elReference);
13339
+ };
13340
+ const { getPrefixId } = usePopperId(props2, "#");
13341
+ const setFullscreenTag = () => {
13342
+ var _a;
13343
+ (_a = fullScreenTarget == null ? void 0 : fullScreenTarget.value) == null ? void 0 : _a.setAttribute("data-fllsrn-id", fullscreenReferId);
13344
+ };
13345
+ const clearFullscreenTag = () => {
13346
+ var _a, _b;
13347
+ const query = `[data-fllsrn-id=${fullscreenReferId}]`;
13348
+ ((_b = (_a = fullScreenTarget == null ? void 0 : fullScreenTarget.value) == null ? void 0 : _a.querySelectorAll(query)) != null ? _b : []).forEach((element) => {
13349
+ element == null ? void 0 : element.removeAttribute("data-fllsrn-id");
13350
+ });
13327
13351
  };
13328
- const { getPrefixId, resetFullscreenElementTag } = usePopperId(props2, "#");
13329
13352
  const boundary = ref();
13330
13353
  const beforeInstanceUnmount = () => {
13331
13354
  removeEventListener2();
13332
13355
  };
13333
- const handleFullscreenChange = () => {
13356
+ const updateFullscreen = (target) => {
13357
+ fullScreenTarget.value = target;
13358
+ updateFullscreenTarget(target);
13334
13359
  isFullscreen.value = isElementFullScreen();
13335
- resetFullscreenElementTag();
13360
+ setFullscreenTag();
13361
+ };
13362
+ const handleFullscreenChange = (e) => {
13363
+ if (!document.fullscreenElement) {
13364
+ clearFullscreenTag();
13365
+ }
13366
+ updateFullscreen(e.target);
13336
13367
  updateBoundary();
13337
13368
  updatePopover(null, props2);
13338
13369
  };
@@ -13341,6 +13372,11 @@ var usePopoverInit = (props2, ctx, refReference, refContent, refArrow, refRoot)
13341
13372
  return;
13342
13373
  }
13343
13374
  initPopInstance();
13375
+ if (isElementFullScreen()) {
13376
+ const query = `[data-fllsrn-id=${fullscreenReferId}]`;
13377
+ const target = getFullscreenRoot(query);
13378
+ updateFullscreen(target);
13379
+ }
13344
13380
  updateBoundary();
13345
13381
  document.body.addEventListener("fullscreenchange", handleFullscreenChange);
13346
13382
  };
@@ -13365,8 +13401,11 @@ var usePopoverInit = (props2, ctx, refReference, refContent, refArrow, refRoot)
13365
13401
  updateBoundary,
13366
13402
  initPopInstance,
13367
13403
  updatePopover,
13404
+ showPopover,
13405
+ hidePopover,
13368
13406
  showFn,
13369
13407
  hideFn,
13408
+ isFullscreen,
13370
13409
  boundary
13371
13410
  };
13372
13411
  };
@@ -13395,13 +13434,7 @@ var Component$q = defineComponent({
13395
13434
  const refContent = ref();
13396
13435
  const refArrow = ref();
13397
13436
  const refRoot = ref();
13398
- const isFullscreen = ref(false);
13399
13437
  const refReference = computed(() => reference2.value || refDefaultReference.value);
13400
- const {
13401
- showPopover,
13402
- hidePopover,
13403
- updatePopover
13404
- } = useFloating(props2, ctx, refReference, refContent, refArrow, refRoot);
13405
13438
  const {
13406
13439
  onMountedFn,
13407
13440
  onUnmountedFn,
@@ -13411,8 +13444,16 @@ var Component$q = defineComponent({
13411
13444
  initPopInstance,
13412
13445
  showFn,
13413
13446
  hideFn,
13447
+ showPopover,
13448
+ hidePopover,
13449
+ updatePopover,
13414
13450
  boundary
13415
- } = usePopoverInit(props2, ctx, refReference, refContent, refArrow, refRoot);
13451
+ } = usePopoverInit(props2, ctx, {
13452
+ refReference,
13453
+ refContent,
13454
+ refArrow,
13455
+ refRoot
13456
+ });
13416
13457
  if (!props2.always && !props2.disabled) {
13417
13458
  watch(() => props2.isShow, () => {
13418
13459
  props2.isShow ? showPopover() : hidePopover();
@@ -13430,7 +13471,7 @@ var Component$q = defineComponent({
13430
13471
  updateBoundary();
13431
13472
  onMounted(onMountedFn);
13432
13473
  onBeforeUnmount(onUnmountedFn);
13433
- const transBoundary = computed(() => (isFullscreen.value || !disableTeleport) && typeof boundary.value === "string");
13474
+ const transBoundary = computed(() => !disableTeleport);
13434
13475
  const show2 = () => {
13435
13476
  showFn();
13436
13477
  };
@@ -16127,7 +16168,7 @@ var SORT_OPTION = /* @__PURE__ */ ((SORT_OPTION2) => {
16127
16168
  SORT_OPTION2["NULL"] = "null";
16128
16169
  return SORT_OPTION2;
16129
16170
  })(SORT_OPTION || {});
16130
- const SORT_OPTIONS = ["asc", "desc"];
16171
+ const SORT_OPTIONS = ["asc", "desc", "null"];
16131
16172
  var SortScope = /* @__PURE__ */ ((SortScope2) => {
16132
16173
  SortScope2["CURRENT"] = "current";
16133
16174
  SortScope2["ALL"] = "all";
@@ -16155,7 +16196,7 @@ const IColumnType = {
16155
16196
  PropTypes.shape({
16156
16197
  sortFn: PropTypes.func.def(void 0),
16157
16198
  sortScope: PropTypes.commonType(Object.values(SortScope)).def("current"),
16158
- value: PropTypes.string.def(null)
16199
+ value: PropTypes.string.def(SORT_OPTION.NULL)
16159
16200
  }),
16160
16201
  PropTypes.bool,
16161
16202
  PropTypes.string
@@ -16231,7 +16272,7 @@ const tableProps = {
16231
16272
  })]).def(false),
16232
16273
  asyncData: PropTypes.bool.def(false),
16233
16274
  rowHover: PropTypes.oneOf(ROW_HOVER_OPTIONS).def(ROW_HOVER.HIGHLIGHT),
16234
- defaultSort: PropTypes.shape({}).def()
16275
+ defaultSort: PropTypes.shape({}).def({})
16235
16276
  };
16236
16277
  var Column = defineComponent({
16237
16278
  name: "TableColumn",
@@ -17278,7 +17319,7 @@ var HeadFilter = defineComponent({
17278
17319
  return () => createVNode(BkPopover2, mergeProps({
17279
17320
  "trigger": "click",
17280
17321
  "isShow": state.isOpen,
17281
- "placement": "bottom-end",
17322
+ "placement": "bottom-start",
17282
17323
  "arrow": false,
17283
17324
  "offset": 0
17284
17325
  }, {
@@ -17320,7 +17361,7 @@ var HeadSort = defineComponent({
17320
17361
  name: "HeadSort",
17321
17362
  props: {
17322
17363
  column: PropTypes.any.def({}),
17323
- defaultSort: PropTypes.oneOf(SORT_OPTIONS).def(SORT_OPTION.ASC)
17364
+ defaultSort: PropTypes.oneOf(SORT_OPTIONS).def(SORT_OPTION.NULL)
17324
17365
  },
17325
17366
  emits: ["change"],
17326
17367
  setup(props2, {
@@ -18399,13 +18440,15 @@ const useInit = (props2, targetColumns) => {
18399
18440
  const colgroups = reactive([]);
18400
18441
  const { getColumns } = useColumn(props2, targetColumns);
18401
18442
  const updateColGroups = () => {
18402
- var _a2;
18443
+ var _a2, _b2;
18403
18444
  const checked = ((_a2 = props2.settings) == null ? void 0 : _a2.checked) || [];
18445
+ const settingFields = ((_b2 = props2.settings) == null ? void 0 : _b2.fields) || [];
18446
+ const isSettingField = (col) => settingFields.some((field) => field.field === resolvePropVal(col, "field", [col]));
18404
18447
  colgroups.splice(0, colgroups.length, ...getColumns().map((col) => __spreadProps(__spreadValues({}, col), {
18405
18448
  calcWidth: null,
18406
18449
  resizeWidth: null,
18407
18450
  listeners: /* @__PURE__ */ new Map(),
18408
- isHidden: checked.length && !checked.includes(resolvePropVal(col, ["field", "type"], [col]))
18451
+ isHidden: isSettingField(col) && checked.length && !checked.includes(resolvePropVal(col, ["field", "type"], [col]))
18409
18452
  })));
18410
18453
  };
18411
18454
  const { dragOffsetXStyle, dragOffsetX, resetResizeEvents, registerResizeEvent } = useColumnResize(colgroups, true);