@hoci/components 0.5.6 → 0.5.8

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (6) hide show
  1. package/dist/index.cjs +166 -9
  2. package/dist/index.d.cts +17 -7
  3. package/dist/index.d.mts +17 -7
  4. package/dist/index.d.ts +17 -7
  5. package/dist/index.mjs +170 -14
  6. package/package.json +3 -3
package/dist/index.cjs CHANGED
@@ -2,9 +2,9 @@
2
2
 
3
3
  const vue = require('vue');
4
4
  const core = require('@hoci/core');
5
- const tslx = require('tslx');
6
- const shared = require('@hoci/shared');
7
5
  const core$1 = require('@vueuse/core');
6
+ const shared = require('@hoci/shared');
7
+ const tslx = require('tslx');
8
8
 
9
9
  const HiAffix = vue.defineComponent({
10
10
  name: "HiAffix",
@@ -28,6 +28,145 @@ const HiAffix = vue.defineComponent({
28
28
  }
29
29
  });
30
30
 
31
+ const affixProps = shared.defineHookProps(
32
+ {
33
+ fixedClass: {
34
+ type: String,
35
+ default: ""
36
+ },
37
+ /**
38
+ * @zh 距离窗口顶部达到指定偏移量后触发
39
+ * @en Triggered when the specified offset is reached from the top of the window
40
+ */
41
+ offset: {
42
+ type: Number,
43
+ default: 0
44
+ },
45
+ /**
46
+ * @zh 固定的相对方向
47
+ */
48
+ position: {
49
+ type: String,
50
+ default: "top"
51
+ },
52
+ /**
53
+ * @zh 滚动容器，默认是 `window`
54
+ * @en Scroll container, default is `window`
55
+ */
56
+ target: {
57
+ type: [String, Object, Function]
58
+ },
59
+ /**
60
+ * @zh z-index 值
61
+ * @en Z index value
62
+ */
63
+ zIndex: {
64
+ type: Number,
65
+ default: 998
66
+ }
67
+ }
68
+ );
69
+ shared.defineHookEmits(["scroll", "change"]);
70
+ const AFFIX_TARGET_KEY = Symbol("AFFIX_TARGET_KEY");
71
+ function getTargetRect(target) {
72
+ return shared.isWindow(target) ? {
73
+ top: 0,
74
+ bottom: window.innerHeight
75
+ } : target.getBoundingClientRect();
76
+ }
77
+ shared.defineHookComponent({
78
+ props: affixProps,
79
+ setup(props, { emit }) {
80
+ const wrapperRef = vue.ref(null);
81
+ const wrapperRect = shared.toReactive(core$1.useElementBounding(wrapperRef));
82
+ const parentRef = vue.inject(AFFIX_TARGET_KEY, void 0);
83
+ const targetRef = shared.useElement(props.target, parentRef);
84
+ const isFixed = vue.ref(false);
85
+ const placeholderStyle = vue.ref({});
86
+ const fixedStyle = vue.ref({});
87
+ const className = vue.computed(() => {
88
+ return isFixed.value ? props.fixedClass : "";
89
+ });
90
+ const wrapperVisible = core$1.useElementVisibility(wrapperRef);
91
+ const containerRef = vue.computed(() => {
92
+ if (!wrapperVisible.value) {
93
+ return null;
94
+ }
95
+ return targetRef.value ?? window;
96
+ });
97
+ const updatePosition = shared.throttleByRaf(async () => {
98
+ if (!wrapperRef.value || !containerRef.value) {
99
+ return;
100
+ }
101
+ const area = wrapperRect.width * wrapperRect.height;
102
+ if (area === 0) {
103
+ return;
104
+ }
105
+ const newPlaceholderStyles = {
106
+ width: tslx.px(wrapperRect.width),
107
+ height: tslx.px(wrapperRect.height)
108
+ };
109
+ const targetRect = getTargetRect(containerRef.value);
110
+ let newIsFixed = false;
111
+ let newFixedStyles = {};
112
+ const offset = props.offset;
113
+ if (props.position === "top") {
114
+ newIsFixed = wrapperRect.top - targetRect.top < offset && offset >= 0;
115
+ newFixedStyles = newIsFixed ? {
116
+ position: "fixed",
117
+ zIndex: props.zIndex,
118
+ top: tslx.px(targetRect.top + offset)
119
+ } : {};
120
+ } else {
121
+ newIsFixed = targetRect.bottom - wrapperRect.bottom < offset;
122
+ newFixedStyles = newIsFixed ? {
123
+ position: "fixed",
124
+ bottom: tslx.px(window.innerHeight - targetRect.bottom + offset)
125
+ } : {};
126
+ }
127
+ if (newIsFixed !== isFixed.value) {
128
+ isFixed.value = newIsFixed;
129
+ emit("change", newIsFixed);
130
+ }
131
+ placeholderStyle.value = newPlaceholderStyles;
132
+ fixedStyle.value = {
133
+ ...newFixedStyles,
134
+ ...newIsFixed ? newPlaceholderStyles : {}
135
+ };
136
+ });
137
+ core$1.useEventListener(containerRef, "scroll", () => {
138
+ emit("scroll");
139
+ updatePosition();
140
+ });
141
+ core$1.useEventListener(containerRef, "resize", updatePosition);
142
+ vue.watchPostEffect(updatePosition);
143
+ return {
144
+ className,
145
+ wrapperRef,
146
+ containerRef,
147
+ isFixed,
148
+ placeholderStyle,
149
+ fixedStyle,
150
+ updatePosition
151
+ };
152
+ }
153
+ });
154
+ function provideAffixTarget(target) {
155
+ vue.provide(AFFIX_TARGET_KEY, target);
156
+ }
157
+
158
+ const HiAffixTarget = vue.defineComponent({
159
+ name: "HiAffixTarget",
160
+ setup(_, context) {
161
+ const targetRef = vue.ref(null);
162
+ provideAffixTarget(targetRef);
163
+ return () => vue.h("div", {
164
+ ref: targetRef,
165
+ ...context.attrs
166
+ }, vue.renderSlot(context.slots, "default"));
167
+ }
168
+ });
169
+
31
170
  const HiSelection = vue.defineComponent({
32
171
  name: "HiSelection",
33
172
  props: {
@@ -53,6 +192,7 @@ const HiItem = vue.defineComponent({
53
192
  default: "div"
54
193
  }
55
194
  },
195
+ emits: core.itemEmits,
56
196
  setup(props, context) {
57
197
  const { render, activate, className, isDisabled, activateEvent } = core.useSelectionItem(
58
198
  props,
@@ -191,15 +331,20 @@ const selectionEmits = shared.defineHookEmits([
191
331
  "update:modelValue",
192
332
  "change",
193
333
  "load",
194
- "unload"
334
+ "unload",
335
+ "reject"
195
336
  ]);
196
337
  const HiSelectionContextSymbol = Symbol("[hi-selection]context");
197
338
  function useSelectionContext() {
198
339
  const sharedConfig = shared.useSharedConfig();
199
340
  return vue.inject(HiSelectionContextSymbol, {
200
341
  isActive: () => false,
342
+ activate: () => {
343
+ },
201
344
  changeActive: () => {
202
345
  },
346
+ reject: () => {
347
+ },
203
348
  activeClass: "active",
204
349
  unactiveClass: "unactive",
205
350
  disabledClass: "disabled",
@@ -247,7 +392,7 @@ const useSelectionList = shared.defineHookComponent({
247
392
  function isActive(value) {
248
393
  return actives.includes(value);
249
394
  }
250
- function changeActive(value) {
395
+ function activate(value) {
251
396
  if (isActive(value)) {
252
397
  if (props.multiple || props.clearable) {
253
398
  actives.splice(actives.indexOf(value), 1);
@@ -266,6 +411,9 @@ const useSelectionList = shared.defineHookComponent({
266
411
  }
267
412
  }
268
413
  }
414
+ function reject(value) {
415
+ emit("reject", value);
416
+ }
269
417
  const init = (option) => {
270
418
  function remove() {
271
419
  const index = options.findIndex((e) => e.id === option.id);
@@ -296,8 +444,10 @@ const useSelectionList = shared.defineHookComponent({
296
444
  defaultValue: vue.computed(() => props.defaultValue),
297
445
  activateEvent: vue.computed(() => props.activateEvent ?? sharedConfig.activateEvent),
298
446
  active: currentValue,
299
- changeActive,
447
+ activate,
448
+ changeActive: activate,
300
449
  isActive,
450
+ reject,
301
451
  init
302
452
  }));
303
453
  const renderItem = () => {
@@ -306,7 +456,7 @@ const useSelectionList = shared.defineHookComponent({
306
456
  };
307
457
  const slotData = {
308
458
  isActive,
309
- changeActive,
459
+ changeActive: activate,
310
460
  renderItem
311
461
  };
312
462
  const render = () => {
@@ -316,7 +466,7 @@ const useSelectionList = shared.defineHookComponent({
316
466
  options,
317
467
  actives,
318
468
  isActive,
319
- changeActive,
469
+ changeActive: activate,
320
470
  renderItem,
321
471
  render
322
472
  };
@@ -402,15 +552,19 @@ const itemProps = shared.defineHookProps({
402
552
  default: false
403
553
  }
404
554
  });
555
+ const itemEmits = shared.defineHookEmits(["reject"]);
405
556
  const useSelectionItem = shared.defineHookComponent({
406
557
  props: itemProps,
407
- setup(props, { slots }) {
558
+ emits: itemEmits,
559
+ setup(props, { slots, emit }) {
408
560
  const context = useSelectionContext();
409
561
  const activate = () => {
410
562
  if (props.disabled) {
563
+ emit("reject", props.value);
564
+ context.reject(props.value);
411
565
  return;
412
566
  }
413
- context.changeActive(props.value);
567
+ context.activate(props.value);
414
568
  };
415
569
  const label = vue.computed(() => {
416
570
  let label2 = props.label ?? context.label;
@@ -472,6 +626,7 @@ const HiTabPane = vue.defineComponent({
472
626
  props: {
473
627
  ...itemProps
474
628
  },
629
+ emits: itemEmits,
475
630
  setup(props, context) {
476
631
  const { className, activateEvent, activate, isDisabled, label } = useSelectionItem(props, context);
477
632
  return () => {
@@ -533,6 +688,7 @@ const HiPopover = vue.defineComponent({
533
688
  const components = {
534
689
  __proto__: null,
535
690
  HiAffix: HiAffix,
691
+ HiAffixTarget: HiAffixTarget,
536
692
  HiConfigProvider: HiConfigProvider,
537
693
  HiIcon: HiIcon,
538
694
  HiItem: HiItem,
@@ -550,6 +706,7 @@ const install = (app) => {
550
706
  };
551
707
 
552
708
  exports.HiAffix = HiAffix;
709
+ exports.HiAffixTarget = HiAffixTarget;
553
710
  exports.HiConfigProvider = HiConfigProvider;
554
711
  exports.HiIcon = HiIcon;
555
712
  exports.HiItem = HiItem;
package/dist/index.d.cts CHANGED
@@ -62,6 +62,10 @@ declare const HiAffix: vue.DefineComponent<{
62
62
  as: string;
63
63
  }, {}>;
64
64
 
65
+ declare const HiAffixTarget: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
66
+ [key: string]: any;
67
+ }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}, {}>;
68
+
65
69
  declare const HiSelection: vue.DefineComponent<{
66
70
  as: {
67
71
  type: StringConstructor;
@@ -106,7 +110,7 @@ declare const HiSelection: vue.DefineComponent<{
106
110
  };
107
111
  }, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
108
112
  [key: string]: any;
109
- }>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("change" | "load" | "unload" | "update:modelValue")[], "change" | "load" | "unload" | "update:modelValue", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
113
+ }>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("change" | "load" | "unload" | "update:modelValue" | "reject")[], "change" | "load" | "unload" | "update:modelValue" | "reject", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
110
114
  as: {
111
115
  type: StringConstructor;
112
116
  default: string;
@@ -153,6 +157,7 @@ declare const HiSelection: vue.DefineComponent<{
153
157
  onLoad?: ((...args: any[]) => any) | undefined;
154
158
  onUnload?: ((...args: any[]) => any) | undefined;
155
159
  "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
160
+ onReject?: ((...args: any[]) => any) | undefined;
156
161
  }, {
157
162
  multiple: number | boolean;
158
163
  modelValue: any;
@@ -193,7 +198,7 @@ declare const HiItem: vue.DefineComponent<{
193
198
  };
194
199
  }, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
195
200
  [key: string]: any;
196
- }>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
201
+ }>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "reject"[], "reject", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
197
202
  as: {
198
203
  type: StringConstructor;
199
204
  default: string;
@@ -219,7 +224,9 @@ declare const HiItem: vue.DefineComponent<{
219
224
  type: BooleanConstructor;
220
225
  default: boolean;
221
226
  };
222
- }>>, {
227
+ }>> & {
228
+ onReject?: ((...args: any[]) => any) | undefined;
229
+ }, {
223
230
  value: any;
224
231
  disabled: boolean;
225
232
  keepAlive: boolean;
@@ -316,7 +323,7 @@ declare const HiSwitch: vue.DefineComponent<{
316
323
  };
317
324
  }, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
318
325
  [key: string]: any;
319
- }>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
326
+ }>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("change" | "update:modelValue" | "reject")[], "change" | "update:modelValue" | "reject", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
320
327
  as: {
321
328
  type: StringConstructor;
322
329
  default: string;
@@ -347,6 +354,7 @@ declare const HiSwitch: vue.DefineComponent<{
347
354
  }>> & {
348
355
  onChange?: ((...args: any[]) => any) | undefined;
349
356
  "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
357
+ onReject?: ((...args: any[]) => any) | undefined;
350
358
  }, {
351
359
  disabled: boolean;
352
360
  modelValue: boolean;
@@ -544,7 +552,7 @@ declare const HiTabPane: vue.DefineComponent<{
544
552
  };
545
553
  }, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
546
554
  [key: string]: any;
547
- }>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
555
+ }>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "reject"[], "reject", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
548
556
  value: {
549
557
  type: vue.PropType<any>;
550
558
  default(): string;
@@ -566,7 +574,9 @@ declare const HiTabPane: vue.DefineComponent<{
566
574
  type: BooleanConstructor;
567
575
  default: boolean;
568
576
  };
569
- }>>, {
577
+ }>> & {
578
+ onReject?: ((...args: any[]) => any) | undefined;
579
+ }, {
570
580
  value: any;
571
581
  disabled: boolean;
572
582
  keepAlive: boolean;
@@ -662,4 +672,4 @@ declare const HiPopover: vue.DefineComponent<{
662
672
 
663
673
  declare const install: (app: App) => void;
664
674
 
665
- export { HiAffix, HiConfigProvider, HiIcon, HiItem, HiPopover, HiSelection, HiSwitch, HiTabPane, HiTabs, install };
675
+ export { HiAffix, HiAffixTarget, HiConfigProvider, HiIcon, HiItem, HiPopover, HiSelection, HiSwitch, HiTabPane, HiTabs, install };
package/dist/index.d.mts CHANGED
@@ -62,6 +62,10 @@ declare const HiAffix: vue.DefineComponent<{
62
62
  as: string;
63
63
  }, {}>;
64
64
 
65
+ declare const HiAffixTarget: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
66
+ [key: string]: any;
67
+ }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}, {}>;
68
+
65
69
  declare const HiSelection: vue.DefineComponent<{
66
70
  as: {
67
71
  type: StringConstructor;
@@ -106,7 +110,7 @@ declare const HiSelection: vue.DefineComponent<{
106
110
  };
107
111
  }, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
108
112
  [key: string]: any;
109
- }>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("change" | "load" | "unload" | "update:modelValue")[], "change" | "load" | "unload" | "update:modelValue", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
113
+ }>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("change" | "load" | "unload" | "update:modelValue" | "reject")[], "change" | "load" | "unload" | "update:modelValue" | "reject", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
110
114
  as: {
111
115
  type: StringConstructor;
112
116
  default: string;
@@ -153,6 +157,7 @@ declare const HiSelection: vue.DefineComponent<{
153
157
  onLoad?: ((...args: any[]) => any) | undefined;
154
158
  onUnload?: ((...args: any[]) => any) | undefined;
155
159
  "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
160
+ onReject?: ((...args: any[]) => any) | undefined;
156
161
  }, {
157
162
  multiple: number | boolean;
158
163
  modelValue: any;
@@ -193,7 +198,7 @@ declare const HiItem: vue.DefineComponent<{
193
198
  };
194
199
  }, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
195
200
  [key: string]: any;
196
- }>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
201
+ }>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "reject"[], "reject", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
197
202
  as: {
198
203
  type: StringConstructor;
199
204
  default: string;
@@ -219,7 +224,9 @@ declare const HiItem: vue.DefineComponent<{
219
224
  type: BooleanConstructor;
220
225
  default: boolean;
221
226
  };
222
- }>>, {
227
+ }>> & {
228
+ onReject?: ((...args: any[]) => any) | undefined;
229
+ }, {
223
230
  value: any;
224
231
  disabled: boolean;
225
232
  keepAlive: boolean;
@@ -316,7 +323,7 @@ declare const HiSwitch: vue.DefineComponent<{
316
323
  };
317
324
  }, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
318
325
  [key: string]: any;
319
- }>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
326
+ }>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("change" | "update:modelValue" | "reject")[], "change" | "update:modelValue" | "reject", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
320
327
  as: {
321
328
  type: StringConstructor;
322
329
  default: string;
@@ -347,6 +354,7 @@ declare const HiSwitch: vue.DefineComponent<{
347
354
  }>> & {
348
355
  onChange?: ((...args: any[]) => any) | undefined;
349
356
  "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
357
+ onReject?: ((...args: any[]) => any) | undefined;
350
358
  }, {
351
359
  disabled: boolean;
352
360
  modelValue: boolean;
@@ -544,7 +552,7 @@ declare const HiTabPane: vue.DefineComponent<{
544
552
  };
545
553
  }, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
546
554
  [key: string]: any;
547
- }>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
555
+ }>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "reject"[], "reject", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
548
556
  value: {
549
557
  type: vue.PropType<any>;
550
558
  default(): string;
@@ -566,7 +574,9 @@ declare const HiTabPane: vue.DefineComponent<{
566
574
  type: BooleanConstructor;
567
575
  default: boolean;
568
576
  };
569
- }>>, {
577
+ }>> & {
578
+ onReject?: ((...args: any[]) => any) | undefined;
579
+ }, {
570
580
  value: any;
571
581
  disabled: boolean;
572
582
  keepAlive: boolean;
@@ -662,4 +672,4 @@ declare const HiPopover: vue.DefineComponent<{
662
672
 
663
673
  declare const install: (app: App) => void;
664
674
 
665
- export { HiAffix, HiConfigProvider, HiIcon, HiItem, HiPopover, HiSelection, HiSwitch, HiTabPane, HiTabs, install };
675
+ export { HiAffix, HiAffixTarget, HiConfigProvider, HiIcon, HiItem, HiPopover, HiSelection, HiSwitch, HiTabPane, HiTabs, install };
package/dist/index.d.ts CHANGED
@@ -62,6 +62,10 @@ declare const HiAffix: vue.DefineComponent<{
62
62
  as: string;
63
63
  }, {}>;
64
64
 
65
+ declare const HiAffixTarget: vue.DefineComponent<{}, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
66
+ [key: string]: any;
67
+ }>, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{}>>, {}, {}>;
68
+
65
69
  declare const HiSelection: vue.DefineComponent<{
66
70
  as: {
67
71
  type: StringConstructor;
@@ -106,7 +110,7 @@ declare const HiSelection: vue.DefineComponent<{
106
110
  };
107
111
  }, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
108
112
  [key: string]: any;
109
- }>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("change" | "load" | "unload" | "update:modelValue")[], "change" | "load" | "unload" | "update:modelValue", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
113
+ }>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("change" | "load" | "unload" | "update:modelValue" | "reject")[], "change" | "load" | "unload" | "update:modelValue" | "reject", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
110
114
  as: {
111
115
  type: StringConstructor;
112
116
  default: string;
@@ -153,6 +157,7 @@ declare const HiSelection: vue.DefineComponent<{
153
157
  onLoad?: ((...args: any[]) => any) | undefined;
154
158
  onUnload?: ((...args: any[]) => any) | undefined;
155
159
  "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
160
+ onReject?: ((...args: any[]) => any) | undefined;
156
161
  }, {
157
162
  multiple: number | boolean;
158
163
  modelValue: any;
@@ -193,7 +198,7 @@ declare const HiItem: vue.DefineComponent<{
193
198
  };
194
199
  }, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
195
200
  [key: string]: any;
196
- }>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
201
+ }>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "reject"[], "reject", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
197
202
  as: {
198
203
  type: StringConstructor;
199
204
  default: string;
@@ -219,7 +224,9 @@ declare const HiItem: vue.DefineComponent<{
219
224
  type: BooleanConstructor;
220
225
  default: boolean;
221
226
  };
222
- }>>, {
227
+ }>> & {
228
+ onReject?: ((...args: any[]) => any) | undefined;
229
+ }, {
223
230
  value: any;
224
231
  disabled: boolean;
225
232
  keepAlive: boolean;
@@ -316,7 +323,7 @@ declare const HiSwitch: vue.DefineComponent<{
316
323
  };
317
324
  }, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
318
325
  [key: string]: any;
319
- }>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("change" | "update:modelValue")[], "change" | "update:modelValue", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
326
+ }>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, ("change" | "update:modelValue" | "reject")[], "change" | "update:modelValue" | "reject", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
320
327
  as: {
321
328
  type: StringConstructor;
322
329
  default: string;
@@ -347,6 +354,7 @@ declare const HiSwitch: vue.DefineComponent<{
347
354
  }>> & {
348
355
  onChange?: ((...args: any[]) => any) | undefined;
349
356
  "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
357
+ onReject?: ((...args: any[]) => any) | undefined;
350
358
  }, {
351
359
  disabled: boolean;
352
360
  modelValue: boolean;
@@ -544,7 +552,7 @@ declare const HiTabPane: vue.DefineComponent<{
544
552
  };
545
553
  }, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
546
554
  [key: string]: any;
547
- }>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
555
+ }>, unknown, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, "reject"[], "reject", vue.VNodeProps & vue.AllowedComponentProps & vue.ComponentCustomProps, Readonly<vue.ExtractPropTypes<{
548
556
  value: {
549
557
  type: vue.PropType<any>;
550
558
  default(): string;
@@ -566,7 +574,9 @@ declare const HiTabPane: vue.DefineComponent<{
566
574
  type: BooleanConstructor;
567
575
  default: boolean;
568
576
  };
569
- }>>, {
577
+ }>> & {
578
+ onReject?: ((...args: any[]) => any) | undefined;
579
+ }, {
570
580
  value: any;
571
581
  disabled: boolean;
572
582
  keepAlive: boolean;
@@ -662,4 +672,4 @@ declare const HiPopover: vue.DefineComponent<{
662
672
 
663
673
  declare const install: (app: App) => void;
664
674
 
665
- export { HiAffix, HiConfigProvider, HiIcon, HiItem, HiPopover, HiSelection, HiSwitch, HiTabPane, HiTabs, install };
675
+ export { HiAffix, HiAffixTarget, HiConfigProvider, HiIcon, HiItem, HiPopover, HiSelection, HiSwitch, HiTabPane, HiTabs, install };
package/dist/index.mjs CHANGED
@@ -1,13 +1,13 @@
1
- import { defineComponent, h, renderSlot, reactive, computed, provide, inject, KeepAlive, watch, Teleport } from 'vue';
2
- import { affixProps, useAffix, selectionProps as selectionProps$1, selectionEmits as selectionEmits$1, useSelectionList as useSelectionList$1, itemProps as itemProps$1, useSelectionItem as useSelectionItem$1, iconProps, useIcon, switchProps, switchEmits, useSwitch, configProviderProps, provideSharedConfig, popoverProps, popoverEmits, usePopover } from '@hoci/core';
3
- import { capitalize, cls } from 'tslx';
4
- import { defineHookProps, valuePropType, classPropType, labelPropType, defineHookEmits, defineHookComponent, useSharedConfig, toReactive, getFirstChilld } from '@hoci/shared';
5
- import { syncRef, isDefined, tryOnScopeDispose } from '@vueuse/core';
1
+ import { defineComponent, h, renderSlot, ref, inject, computed, watchPostEffect, provide, reactive, KeepAlive, watch, Teleport } from 'vue';
2
+ import { affixProps as affixProps$1, useAffix, selectionProps as selectionProps$1, selectionEmits as selectionEmits$1, useSelectionList as useSelectionList$1, itemProps as itemProps$1, itemEmits as itemEmits$1, useSelectionItem as useSelectionItem$1, iconProps, useIcon, switchProps, switchEmits, useSwitch, configProviderProps, provideSharedConfig, popoverProps, popoverEmits, usePopover } from '@hoci/core';
3
+ import { useElementBounding, useElementVisibility, useEventListener, syncRef, isDefined, tryOnScopeDispose } from '@vueuse/core';
4
+ import { defineHookProps, defineHookEmits, defineHookComponent, toReactive, useElement, throttleByRaf, isWindow, valuePropType, classPropType, labelPropType, useSharedConfig, getFirstChilld } from '@hoci/shared';
5
+ import { px, capitalize, cls } from 'tslx';
6
6
 
7
7
  const HiAffix = defineComponent({
8
8
  name: "HiAffix",
9
9
  props: {
10
- ...affixProps,
10
+ ...affixProps$1,
11
11
  as: {
12
12
  type: String,
13
13
  default: "div"
@@ -26,6 +26,145 @@ const HiAffix = defineComponent({
26
26
  }
27
27
  });
28
28
 
29
+ const affixProps = defineHookProps(
30
+ {
31
+ fixedClass: {
32
+ type: String,
33
+ default: ""
34
+ },
35
+ /**
36
+ * @zh 距离窗口顶部达到指定偏移量后触发
37
+ * @en Triggered when the specified offset is reached from the top of the window
38
+ */
39
+ offset: {
40
+ type: Number,
41
+ default: 0
42
+ },
43
+ /**
44
+ * @zh 固定的相对方向
45
+ */
46
+ position: {
47
+ type: String,
48
+ default: "top"
49
+ },
50
+ /**
51
+ * @zh 滚动容器，默认是 `window`
52
+ * @en Scroll container, default is `window`
53
+ */
54
+ target: {
55
+ type: [String, Object, Function]
56
+ },
57
+ /**
58
+ * @zh z-index 值
59
+ * @en Z index value
60
+ */
61
+ zIndex: {
62
+ type: Number,
63
+ default: 998
64
+ }
65
+ }
66
+ );
67
+ defineHookEmits(["scroll", "change"]);
68
+ const AFFIX_TARGET_KEY = Symbol("AFFIX_TARGET_KEY");
69
+ function getTargetRect(target) {
70
+ return isWindow(target) ? {
71
+ top: 0,
72
+ bottom: window.innerHeight
73
+ } : target.getBoundingClientRect();
74
+ }
75
+ defineHookComponent({
76
+ props: affixProps,
77
+ setup(props, { emit }) {
78
+ const wrapperRef = ref(null);
79
+ const wrapperRect = toReactive(useElementBounding(wrapperRef));
80
+ const parentRef = inject(AFFIX_TARGET_KEY, void 0);
81
+ const targetRef = useElement(props.target, parentRef);
82
+ const isFixed = ref(false);
83
+ const placeholderStyle = ref({});
84
+ const fixedStyle = ref({});
85
+ const className = computed(() => {
86
+ return isFixed.value ? props.fixedClass : "";
87
+ });
88
+ const wrapperVisible = useElementVisibility(wrapperRef);
89
+ const containerRef = computed(() => {
90
+ if (!wrapperVisible.value) {
91
+ return null;
92
+ }
93
+ return targetRef.value ?? window;
94
+ });
95
+ const updatePosition = throttleByRaf(async () => {
96
+ if (!wrapperRef.value || !containerRef.value) {
97
+ return;
98
+ }
99
+ const area = wrapperRect.width * wrapperRect.height;
100
+ if (area === 0) {
101
+ return;
102
+ }
103
+ const newPlaceholderStyles = {
104
+ width: px(wrapperRect.width),
105
+ height: px(wrapperRect.height)
106
+ };
107
+ const targetRect = getTargetRect(containerRef.value);
108
+ let newIsFixed = false;
109
+ let newFixedStyles = {};
110
+ const offset = props.offset;
111
+ if (props.position === "top") {
112
+ newIsFixed = wrapperRect.top - targetRect.top < offset && offset >= 0;
113
+ newFixedStyles = newIsFixed ? {
114
+ position: "fixed",
115
+ zIndex: props.zIndex,
116
+ top: px(targetRect.top + offset)
117
+ } : {};
118
+ } else {
119
+ newIsFixed = targetRect.bottom - wrapperRect.bottom < offset;
120
+ newFixedStyles = newIsFixed ? {
121
+ position: "fixed",
122
+ bottom: px(window.innerHeight - targetRect.bottom + offset)
123
+ } : {};
124
+ }
125
+ if (newIsFixed !== isFixed.value) {
126
+ isFixed.value = newIsFixed;
127
+ emit("change", newIsFixed);
128
+ }
129
+ placeholderStyle.value = newPlaceholderStyles;
130
+ fixedStyle.value = {
131
+ ...newFixedStyles,
132
+ ...newIsFixed ? newPlaceholderStyles : {}
133
+ };
134
+ });
135
+ useEventListener(containerRef, "scroll", () => {
136
+ emit("scroll");
137
+ updatePosition();
138
+ });
139
+ useEventListener(containerRef, "resize", updatePosition);
140
+ watchPostEffect(updatePosition);
141
+ return {
142
+ className,
143
+ wrapperRef,
144
+ containerRef,
145
+ isFixed,
146
+ placeholderStyle,
147
+ fixedStyle,
148
+ updatePosition
149
+ };
150
+ }
151
+ });
152
+ function provideAffixTarget(target) {
153
+ provide(AFFIX_TARGET_KEY, target);
154
+ }
155
+
156
+ const HiAffixTarget = defineComponent({
157
+ name: "HiAffixTarget",
158
+ setup(_, context) {
159
+ const targetRef = ref(null);
160
+ provideAffixTarget(targetRef);
161
+ return () => h("div", {
162
+ ref: targetRef,
163
+ ...context.attrs
164
+ }, renderSlot(context.slots, "default"));
165
+ }
166
+ });
167
+
29
168
  const HiSelection = defineComponent({
30
169
  name: "HiSelection",
31
170
  props: {
@@ -51,6 +190,7 @@ const HiItem = defineComponent({
51
190
  default: "div"
52
191
  }
53
192
  },
193
+ emits: itemEmits$1,
54
194
  setup(props, context) {
55
195
  const { render, activate, className, isDisabled, activateEvent } = useSelectionItem$1(
56
196
  props,
@@ -189,15 +329,20 @@ const selectionEmits = defineHookEmits([
189
329
  "update:modelValue",
190
330
  "change",
191
331
  "load",
192
- "unload"
332
+ "unload",
333
+ "reject"
193
334
  ]);
194
335
  const HiSelectionContextSymbol = Symbol("[hi-selection]context");
195
336
  function useSelectionContext() {
196
337
  const sharedConfig = useSharedConfig();
197
338
  return inject(HiSelectionContextSymbol, {
198
339
  isActive: () => false,
340
+ activate: () => {
341
+ },
199
342
  changeActive: () => {
200
343
  },
344
+ reject: () => {
345
+ },
201
346
  activeClass: "active",
202
347
  unactiveClass: "unactive",
203
348
  disabledClass: "disabled",
@@ -245,7 +390,7 @@ const useSelectionList = defineHookComponent({
245
390
  function isActive(value) {
246
391
  return actives.includes(value);
247
392
  }
248
- function changeActive(value) {
393
+ function activate(value) {
249
394
  if (isActive(value)) {
250
395
  if (props.multiple || props.clearable) {
251
396
  actives.splice(actives.indexOf(value), 1);
@@ -264,6 +409,9 @@ const useSelectionList = defineHookComponent({
264
409
  }
265
410
  }
266
411
  }
412
+ function reject(value) {
413
+ emit("reject", value);
414
+ }
267
415
  const init = (option) => {
268
416
  function remove() {
269
417
  const index = options.findIndex((e) => e.id === option.id);
@@ -294,8 +442,10 @@ const useSelectionList = defineHookComponent({
294
442
  defaultValue: computed(() => props.defaultValue),
295
443
  activateEvent: computed(() => props.activateEvent ?? sharedConfig.activateEvent),
296
444
  active: currentValue,
297
- changeActive,
445
+ activate,
446
+ changeActive: activate,
298
447
  isActive,
448
+ reject,
299
449
  init
300
450
  }));
301
451
  const renderItem = () => {
@@ -304,7 +454,7 @@ const useSelectionList = defineHookComponent({
304
454
  };
305
455
  const slotData = {
306
456
  isActive,
307
- changeActive,
457
+ changeActive: activate,
308
458
  renderItem
309
459
  };
310
460
  const render = () => {
@@ -314,7 +464,7 @@ const useSelectionList = defineHookComponent({
314
464
  options,
315
465
  actives,
316
466
  isActive,
317
- changeActive,
467
+ changeActive: activate,
318
468
  renderItem,
319
469
  render
320
470
  };
@@ -400,15 +550,19 @@ const itemProps = defineHookProps({
400
550
  default: false
401
551
  }
402
552
  });
553
+ const itemEmits = defineHookEmits(["reject"]);
403
554
  const useSelectionItem = defineHookComponent({
404
555
  props: itemProps,
405
- setup(props, { slots }) {
556
+ emits: itemEmits,
557
+ setup(props, { slots, emit }) {
406
558
  const context = useSelectionContext();
407
559
  const activate = () => {
408
560
  if (props.disabled) {
561
+ emit("reject", props.value);
562
+ context.reject(props.value);
409
563
  return;
410
564
  }
411
- context.changeActive(props.value);
565
+ context.activate(props.value);
412
566
  };
413
567
  const label = computed(() => {
414
568
  let label2 = props.label ?? context.label;
@@ -470,6 +624,7 @@ const HiTabPane = defineComponent({
470
624
  props: {
471
625
  ...itemProps
472
626
  },
627
+ emits: itemEmits,
473
628
  setup(props, context) {
474
629
  const { className, activateEvent, activate, isDisabled, label } = useSelectionItem(props, context);
475
630
  return () => {
@@ -531,6 +686,7 @@ const HiPopover = defineComponent({
531
686
  const components = {
532
687
  __proto__: null,
533
688
  HiAffix: HiAffix,
689
+ HiAffixTarget: HiAffixTarget,
534
690
  HiConfigProvider: HiConfigProvider,
535
691
  HiIcon: HiIcon,
536
692
  HiItem: HiItem,
@@ -547,4 +703,4 @@ const install = (app) => {
547
703
  }
548
704
  };
549
705
 
550
- export { HiAffix, HiConfigProvider, HiIcon, HiItem, HiPopover, HiSelection, HiSwitch, HiTabPane, HiTabs, install };
706
+ export { HiAffix, HiAffixTarget, HiConfigProvider, HiIcon, HiItem, HiPopover, HiSelection, HiSwitch, HiTabPane, HiTabs, install };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@hoci/components",
3
- "version": "0.5.6",
3
+ "version": "0.5.8",
4
4
  "description": "",
5
5
  "author": "Chizuki <chizukicn@outlook.com>",
6
6
  "license": "MIT",
@@ -31,8 +31,8 @@
31
31
  "dependencies": {
32
32
  "maybe-types": "^0.2.0",
33
33
  "tslx": "^0.1.1",
34
- "@hoci/core": "0.5.6",
35
- "@hoci/shared": "0.5.6"
34
+ "@hoci/core": "0.5.8",
35
+ "@hoci/shared": "0.5.8"
36
36
  },
37
37
  "scripts": {
38
38
  "build": "unbuild",