@marianmeres/stuic 1.18.0 → 1.20.0
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.
|
@@ -40,8 +40,6 @@ parent, div, arrow, opts, log) => {
|
|
|
40
40
|
// position the actual tooltip/popover
|
|
41
41
|
div.style.left = `${r.position[safe].x}px`;
|
|
42
42
|
div.style.top = `${r.position[safe].y}px`;
|
|
43
|
-
// div.style.left = `${0}px`;
|
|
44
|
-
// div.style.top = `${0}px`;
|
|
45
43
|
// now dance with the arrow...
|
|
46
44
|
let arrowStyles = {
|
|
47
45
|
borderStyle: 'solid',
|
|
@@ -16,6 +16,7 @@ export declare class PopoverConfig {
|
|
|
16
16
|
static defaultOptions: Partial<TooltipOptions>;
|
|
17
17
|
}
|
|
18
18
|
export type TooltipLogger = (...args: any[]) => void;
|
|
19
|
+
export type TooltipTrigger = 'hover' | 'focus' | 'click';
|
|
19
20
|
export interface TooltipOptions {
|
|
20
21
|
content: string;
|
|
21
22
|
popover: HTMLElement | null;
|
|
@@ -24,7 +25,7 @@ export interface TooltipOptions {
|
|
|
24
25
|
delay: number;
|
|
25
26
|
class: string;
|
|
26
27
|
arrowClass: string;
|
|
27
|
-
triggers:
|
|
28
|
+
triggers: TooltipTrigger[];
|
|
28
29
|
logger?: TooltipLogger;
|
|
29
30
|
boundaryRoot?: HTMLElement;
|
|
30
31
|
arrowSize: number;
|
|
@@ -144,7 +144,7 @@ export function tooltip(node, initialOptions = {}) {
|
|
|
144
144
|
_resetDelayTimer();
|
|
145
145
|
}, _delay);
|
|
146
146
|
};
|
|
147
|
-
// use popover if provided, otherwise new div will be
|
|
147
|
+
// use popover if provided, otherwise new div will be created
|
|
148
148
|
let div = opts.popover;
|
|
149
149
|
let arrow;
|
|
150
150
|
let _isOn = writable(false); // internal state store
|
|
@@ -168,14 +168,14 @@ export function tooltip(node, initialOptions = {}) {
|
|
|
168
168
|
}
|
|
169
169
|
// measure stuff and set position (provided opts.alignment is considered just as
|
|
170
170
|
// "preferred", which means it may be overwritten if there is no available space)
|
|
171
|
-
if (
|
|
172
|
-
_makeInVisible(div, arrow, _log);
|
|
173
|
-
}
|
|
174
|
-
else {
|
|
171
|
+
if (await _setPosition(opts.boundaryRoot, node, div, arrow, opts, _log)) {
|
|
175
172
|
// finally, fade in
|
|
176
173
|
_makeVisible(div, arrow, _log);
|
|
177
174
|
setTimeout(() => _isOn.set(true), _TRANSITION_OPACITY_DUR);
|
|
178
175
|
}
|
|
176
|
+
else {
|
|
177
|
+
_makeInVisible(div, arrow, _log);
|
|
178
|
+
}
|
|
179
179
|
};
|
|
180
180
|
let show = () => _planDelayedExec(_show, opts.delay);
|
|
181
181
|
//
|
|
@@ -195,6 +195,9 @@ export function tooltip(node, initialOptions = {}) {
|
|
|
195
195
|
};
|
|
196
196
|
//
|
|
197
197
|
const destroy = () => {
|
|
198
|
+
// for obscure cases, where parent node might have be removed from DOM
|
|
199
|
+
// before the planned show/hide happens
|
|
200
|
+
_resetDelayTimer();
|
|
198
201
|
if (!div && !arrow && !opts.popover && !storeGet(_isOn))
|
|
199
202
|
return;
|
|
200
203
|
_log('destroy');
|
|
@@ -209,8 +212,8 @@ export function tooltip(node, initialOptions = {}) {
|
|
|
209
212
|
//
|
|
210
213
|
let unsubs = [_isOn.subscribe((v) => opts?.notifier?.set(v))];
|
|
211
214
|
// by default, listen to windowSize change, as well as window and boundaryRoot scroll
|
|
212
|
-
const
|
|
213
|
-
const onScroll = () =>
|
|
215
|
+
const _scrollSignal = writable(0);
|
|
216
|
+
const onScroll = () => _scrollSignal.set(Date.now());
|
|
214
217
|
if (opts.boundaryRoot) {
|
|
215
218
|
opts.boundaryRoot.addEventListener('scroll', onScroll);
|
|
216
219
|
unsubs.push(() => opts.boundaryRoot?.removeEventListener('scroll', onScroll));
|
|
@@ -218,21 +221,21 @@ export function tooltip(node, initialOptions = {}) {
|
|
|
218
221
|
// also listen to window scroll
|
|
219
222
|
window.addEventListener('scroll', onScroll);
|
|
220
223
|
unsubs.push(() => window.removeEventListener('scroll', onScroll));
|
|
221
|
-
const
|
|
224
|
+
const _setPositionTriggers = [_scrollSignal, windowSize];
|
|
222
225
|
if (opts.touch?.subscribe)
|
|
223
|
-
|
|
224
|
-
const touch = derived(
|
|
226
|
+
_setPositionTriggers.push(opts.touch);
|
|
227
|
+
const touch = derived(_setPositionTriggers, ([_]) => Date.now());
|
|
225
228
|
// final, derived, notifier
|
|
226
229
|
let _touchCount = 0;
|
|
227
230
|
unsubs.push(touch.subscribe(async () => {
|
|
228
231
|
// ignore first
|
|
229
232
|
if (_touchCount++) {
|
|
230
233
|
_log('touch...');
|
|
231
|
-
if (
|
|
232
|
-
|
|
234
|
+
if (await _setPosition(opts.boundaryRoot, node, div, arrow, opts, _log)) {
|
|
235
|
+
_makeVisible(div, arrow, _log);
|
|
233
236
|
}
|
|
234
237
|
else {
|
|
235
|
-
|
|
238
|
+
_makeInVisible(div, arrow, _log);
|
|
236
239
|
}
|
|
237
240
|
}
|
|
238
241
|
}));
|
package/dist/index.d.ts
CHANGED
|
@@ -6,7 +6,7 @@ export { default as LocalColorScheme } from './components/ColorScheme/LocalColor
|
|
|
6
6
|
export { ColorScheme } from './components/ColorScheme/color-scheme.js';
|
|
7
7
|
export { default as Drawer, createDrawerStore } from './components/Drawer/Drawer.svelte';
|
|
8
8
|
export { default as HoverExpandableWidth } from './components/HoverExpandableWidth/HoverExpandableWidth.svelte';
|
|
9
|
-
export { default as Switch } from './components/Switch/Switch.svelte';
|
|
9
|
+
export { default as Switch, SwitchConfig } from './components/Switch/Switch.svelte';
|
|
10
10
|
export { default as X } from './components/X/X.svelte';
|
|
11
11
|
export { focusTrap } from './actions/focus-trap.js';
|
|
12
12
|
export { onOutside } from './actions/on-outside.js';
|
package/dist/index.js
CHANGED
|
@@ -14,7 +14,7 @@ export { default as Drawer, createDrawerStore } from './components/Drawer/Drawer
|
|
|
14
14
|
//
|
|
15
15
|
export { default as HoverExpandableWidth } from './components/HoverExpandableWidth/HoverExpandableWidth.svelte';
|
|
16
16
|
//
|
|
17
|
-
export { default as Switch } from './components/Switch/Switch.svelte';
|
|
17
|
+
export { default as Switch, SwitchConfig } from './components/Switch/Switch.svelte';
|
|
18
18
|
//
|
|
19
19
|
export { default as X } from './components/X/X.svelte';
|
|
20
20
|
// actions
|