lapikit 0.0.0-insiders.6f3bbea → 0.0.0-insiders.7d632c5
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/components/index.d.ts +0 -3
- package/dist/components/index.js +0 -3
- package/dist/internal/index.d.ts +0 -1
- package/dist/internal/index.js +0 -1
- package/dist/style/css.js +0 -3
- package/package.json +1 -1
- package/dist/components/dialog/dialog.css +0 -103
- package/dist/components/dialog/dialog.svelte +0 -67
- package/dist/components/dialog/dialog.svelte.d.ts +0 -4
- package/dist/components/dialog/types.d.ts +0 -19
- package/dist/components/dialog/types.js +0 -1
- package/dist/components/popover/popover.css +0 -22
- package/dist/components/popover/popover.svelte +0 -73
- package/dist/components/popover/popover.svelte.d.ts +0 -4
- package/dist/components/popover/popover.svelte.js +0 -134
- package/dist/components/popover/types.d.ts +0 -20
- package/dist/components/popover/types.js +0 -1
- package/dist/components/tooltip/tooltip.css +0 -124
- package/dist/components/tooltip/tooltip.svelte +0 -113
- package/dist/components/tooltip/tooltip.svelte.d.ts +0 -4
- package/dist/components/tooltip/tooltip.svelte.js +0 -131
- package/dist/components/tooltip/types.d.ts +0 -23
- package/dist/components/tooltip/types.js +0 -1
- package/dist/internal/scroll.d.ts +0 -1
- package/dist/internal/scroll.js +0 -6
- package/dist/style/variable.css +0 -7
|
@@ -2,6 +2,3 @@ export { default as App } from './app/app.svelte';
|
|
|
2
2
|
export { default as Btn } from './button/button.svelte';
|
|
3
3
|
export { default as Icon } from './icon/icon.svelte';
|
|
4
4
|
export { default as Dropdown } from './dropdown/dropdown.svelte';
|
|
5
|
-
export { default as Popover } from './popover/popover.svelte';
|
|
6
|
-
export { default as Tooltip } from './tooltip/tooltip.svelte';
|
|
7
|
-
export { default as Dialog } from './dialog/dialog.svelte';
|
package/dist/components/index.js
CHANGED
|
@@ -3,6 +3,3 @@ export { default as App } from './app/app.svelte';
|
|
|
3
3
|
export { default as Btn } from './button/button.svelte';
|
|
4
4
|
export { default as Icon } from './icon/icon.svelte';
|
|
5
5
|
export { default as Dropdown } from './dropdown/dropdown.svelte';
|
|
6
|
-
export { default as Popover } from './popover/popover.svelte';
|
|
7
|
-
export { default as Tooltip } from './tooltip/tooltip.svelte';
|
|
8
|
-
export { default as Dialog } from './dialog/dialog.svelte';
|
package/dist/internal/index.d.ts
CHANGED
package/dist/internal/index.js
CHANGED
package/dist/style/css.js
CHANGED
|
@@ -11,7 +11,6 @@ const __dirname = dirname(__filename);
|
|
|
11
11
|
export const processCSS = async (config) => {
|
|
12
12
|
const _normalize = fs.readFileSync(path.resolve(__dirname, './normalize.css'), 'utf-8');
|
|
13
13
|
const _animation = fs.readFileSync(path.resolve(__dirname, './animation.css'), 'utf-8');
|
|
14
|
-
const _variables = fs.readFileSync(path.resolve(__dirname, './variable.css'), 'utf-8');
|
|
15
14
|
let styles = ``;
|
|
16
15
|
if (config.options.normalize)
|
|
17
16
|
styles += `${_normalize}\n`;
|
|
@@ -20,8 +19,6 @@ export const processCSS = async (config) => {
|
|
|
20
19
|
const variablesStyles = variables(config);
|
|
21
20
|
styles += `${colorScheme.root}\n`;
|
|
22
21
|
styles += `${variablesStyles}\n`;
|
|
23
|
-
styles += `${variablesStyles}\n`;
|
|
24
|
-
styles += `${_variables}\n`;
|
|
25
22
|
styles += `${colorScheme.className}\n`;
|
|
26
23
|
styles += `${deviceDisplay}\n`;
|
|
27
24
|
styles += component(config);
|
package/package.json
CHANGED
|
@@ -1,103 +0,0 @@
|
|
|
1
|
-
.kit-dialog {
|
|
2
|
-
border: 0;
|
|
3
|
-
padding: 0;
|
|
4
|
-
margin: auto;
|
|
5
|
-
width: 100%;
|
|
6
|
-
max-width: none;
|
|
7
|
-
background-color: transparent;
|
|
8
|
-
color: inherit;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
.kit-dialog[open] {
|
|
12
|
-
pointer-events: auto;
|
|
13
|
-
visibility: visible;
|
|
14
|
-
opacity: 1;
|
|
15
|
-
}
|
|
16
|
-
|
|
17
|
-
.kit-dialog::backdrop {
|
|
18
|
-
background-color: color-mix(in oklab, var(--kit-shadow) 30%, transparent);
|
|
19
|
-
animation: fade 0.2s ease-out;
|
|
20
|
-
}
|
|
21
|
-
.kit-dialog[open]::backdrop {
|
|
22
|
-
animation: fade 0.2s ease-out;
|
|
23
|
-
}
|
|
24
|
-
|
|
25
|
-
.kit-dialog .kit-dialog-container {
|
|
26
|
-
--dialog-color: var(--on, var(--kit-on-neutral));
|
|
27
|
-
--dialog-background: var(--base, var(--kit-neutral));
|
|
28
|
-
--dialog-radius: var(--shape, var(--kit-radius-md));
|
|
29
|
-
|
|
30
|
-
transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
|
|
31
|
-
transition-timing-function: cubic-bezier(0, 0, 0.2, 1);
|
|
32
|
-
transition-duration: 0.2s;
|
|
33
|
-
}
|
|
34
|
-
|
|
35
|
-
.kit-dialog[class*='kit-dialog--size-full'] .kit-dialog-container {
|
|
36
|
-
height: 100%;
|
|
37
|
-
}
|
|
38
|
-
|
|
39
|
-
.kit-dialog[class*='kit-dialog--size-full'] .kit-dialog-container > * {
|
|
40
|
-
height: 100%;
|
|
41
|
-
max-height: 100%;
|
|
42
|
-
border-radius: 0;
|
|
43
|
-
}
|
|
44
|
-
|
|
45
|
-
.kit-dialog .close-dialog {
|
|
46
|
-
opacity: 0;
|
|
47
|
-
position: fixed;
|
|
48
|
-
top: 0;
|
|
49
|
-
z-index: -1;
|
|
50
|
-
}
|
|
51
|
-
|
|
52
|
-
.kit-dialog .kit-dialog-container > * {
|
|
53
|
-
max-height: calc(100% - 3rem);
|
|
54
|
-
margin: 0 auto;
|
|
55
|
-
}
|
|
56
|
-
|
|
57
|
-
.kit-dialog[breakpoint]kit-dialog--position-bottom {
|
|
58
|
-
margin-bottom: 0;
|
|
59
|
-
margin-top: auto;
|
|
60
|
-
}
|
|
61
|
-
|
|
62
|
-
.kit-dialog[breakpoint]kit-dialog--position-top {
|
|
63
|
-
margin-top: 0;
|
|
64
|
-
margin-bottom: auto;
|
|
65
|
-
}
|
|
66
|
-
|
|
67
|
-
.kit-dialog[breakpoint]kit-dialog--position-center {
|
|
68
|
-
margin: auto;
|
|
69
|
-
}
|
|
70
|
-
|
|
71
|
-
.kit-dialog[breakpoint]kit-dialog--size-xs:not() {
|
|
72
|
-
max-width: var(--kit-dialog-size-xs);
|
|
73
|
-
}
|
|
74
|
-
|
|
75
|
-
.kit-dialog[breakpoint]kit-dialog--size-sm {
|
|
76
|
-
max-width: var(--kit-dialog-size-sm);
|
|
77
|
-
}
|
|
78
|
-
|
|
79
|
-
.kit-dialog[breakpoint]kit-dialog--size-md {
|
|
80
|
-
max-width: var(--kit-dialog-size-md);
|
|
81
|
-
}
|
|
82
|
-
|
|
83
|
-
.kit-dialog[breakpoint]kit-dialog--size-lg {
|
|
84
|
-
max-width: var(--kit-dialog-size-lg);
|
|
85
|
-
}
|
|
86
|
-
|
|
87
|
-
.kit-dialog[breakpoint]kit-dialog--size-xl {
|
|
88
|
-
max-width: var(--kit-dialog-size-xl);
|
|
89
|
-
}
|
|
90
|
-
|
|
91
|
-
.kit-dialog[breakpoint]kit-dialog--size-full {
|
|
92
|
-
height: 100%;
|
|
93
|
-
max-height: 100%;
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
@keyframes fade {
|
|
97
|
-
from {
|
|
98
|
-
opacity: 0;
|
|
99
|
-
}
|
|
100
|
-
to {
|
|
101
|
-
opacity: 1;
|
|
102
|
-
}
|
|
103
|
-
}
|
|
@@ -1,67 +0,0 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
import { disabledScroll } from '../../internal/index.js';
|
|
3
|
-
import { getAssets } from '../../internal/index.js';
|
|
4
|
-
import type { DialogProps } from './types.js';
|
|
5
|
-
|
|
6
|
-
let {
|
|
7
|
-
children,
|
|
8
|
-
open = $bindable(),
|
|
9
|
-
dark,
|
|
10
|
-
light,
|
|
11
|
-
classContent,
|
|
12
|
-
color,
|
|
13
|
-
background,
|
|
14
|
-
size = 'md',
|
|
15
|
-
persistent,
|
|
16
|
-
position = 'center',
|
|
17
|
-
closeWithEsc,
|
|
18
|
-
rounded,
|
|
19
|
-
...rest
|
|
20
|
-
}: DialogProps = $props();
|
|
21
|
-
|
|
22
|
-
const assets = getAssets();
|
|
23
|
-
|
|
24
|
-
let ref: HTMLDialogElement;
|
|
25
|
-
|
|
26
|
-
$effect(() => {
|
|
27
|
-
if (ref && open) ref.showModal();
|
|
28
|
-
if (ref && !open) ref.close();
|
|
29
|
-
disabledScroll(open ? true : false);
|
|
30
|
-
});
|
|
31
|
-
</script>
|
|
32
|
-
|
|
33
|
-
<dialog
|
|
34
|
-
bind:this={ref}
|
|
35
|
-
class={[
|
|
36
|
-
'kit-dialog',
|
|
37
|
-
persistent && 'kit-dialog--persistent',
|
|
38
|
-
size && assets.className('dialog', 'size', size),
|
|
39
|
-
position && assets.className('dialog', 'position', position),
|
|
40
|
-
rest.class
|
|
41
|
-
]}
|
|
42
|
-
onclose={() => (!persistent ? (open = false) : null)}
|
|
43
|
-
onkeydown={(event: KeyboardEvent) => {
|
|
44
|
-
if (!persistent && event.key === 'Escape' && closeWithEsc) {
|
|
45
|
-
event.preventDefault();
|
|
46
|
-
open = false;
|
|
47
|
-
}
|
|
48
|
-
}}
|
|
49
|
-
onclick={(event: MouseEvent) => {
|
|
50
|
-
if (event.target === ref) {
|
|
51
|
-
if (!persistent) ref.close();
|
|
52
|
-
}
|
|
53
|
-
}}
|
|
54
|
-
>
|
|
55
|
-
<!-- surcharge-dialog autofocus-action-element -->
|
|
56
|
-
<button type="button" class="close-dialog">close</button>
|
|
57
|
-
<div
|
|
58
|
-
{...rest}
|
|
59
|
-
class={['kit-dialog-container', light && 'light', dark && 'dark', classContent, rest.class]}
|
|
60
|
-
onclick={(event: MouseEvent) => event.stopPropagation()}
|
|
61
|
-
style:--base={assets.color(background)}
|
|
62
|
-
style:--on={assets.color(color)}
|
|
63
|
-
style:--shape={assets.shape(rounded)}
|
|
64
|
-
>
|
|
65
|
-
{@render children?.()}
|
|
66
|
-
</div>
|
|
67
|
-
</dialog>
|
|
@@ -1,19 +0,0 @@
|
|
|
1
|
-
import type { Component } from '../../internal/types.js';
|
|
2
|
-
type DialogSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
|
|
3
|
-
export interface DialogProps extends Component {
|
|
4
|
-
open?: boolean;
|
|
5
|
-
classContent?: string | string[] | undefined;
|
|
6
|
-
size?: DialogSize | {
|
|
7
|
-
[key: string]: DialogSize;
|
|
8
|
-
};
|
|
9
|
-
persistent?: boolean;
|
|
10
|
-
closeWithEsc?: boolean;
|
|
11
|
-
position?: 'bottom' | 'center' | 'top' | {
|
|
12
|
-
[key: string]: 'bottom' | 'center' | 'top';
|
|
13
|
-
};
|
|
14
|
-
dark?: boolean;
|
|
15
|
-
light?: boolean;
|
|
16
|
-
color?: string;
|
|
17
|
-
background?: string;
|
|
18
|
-
}
|
|
19
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,22 +0,0 @@
|
|
|
1
|
-
.kit-popover-content {
|
|
2
|
-
--popover-color: var(--on, var(--kit-on-neutral));
|
|
3
|
-
--popover-background: var(--base, var(--kit-neutral));
|
|
4
|
-
--popover-radius: var(--shape, var(--kit-radius-md));
|
|
5
|
-
|
|
6
|
-
inset: 0px auto auto 0px;
|
|
7
|
-
margin: 0px;
|
|
8
|
-
position: fixed;
|
|
9
|
-
z-index: 9999;
|
|
10
|
-
display: inline-block;
|
|
11
|
-
width: auto;
|
|
12
|
-
opacity: 1;
|
|
13
|
-
transition-property: opacity, transform;
|
|
14
|
-
transition:
|
|
15
|
-
color 0.5s,
|
|
16
|
-
background-color 0.5s;
|
|
17
|
-
|
|
18
|
-
/* theme */
|
|
19
|
-
background-color: var(--popover-background);
|
|
20
|
-
color: var(--popover-color);
|
|
21
|
-
border-radius: var(--popover-radius);
|
|
22
|
-
}
|
|
@@ -1,73 +0,0 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
import { getAssets } from '../../internal/assets.svelte.js';
|
|
3
|
-
import { clickOutside } from '../../internal/clickOutside.js';
|
|
4
|
-
import { getPositions } from './popover.svelte.js';
|
|
5
|
-
import type { PopoverProps, ModelPopoverProps } from './types.js';
|
|
6
|
-
|
|
7
|
-
let {
|
|
8
|
-
open = $bindable(),
|
|
9
|
-
children,
|
|
10
|
-
activator,
|
|
11
|
-
dark,
|
|
12
|
-
light,
|
|
13
|
-
rounded,
|
|
14
|
-
position,
|
|
15
|
-
color,
|
|
16
|
-
background,
|
|
17
|
-
...rest
|
|
18
|
-
}: PopoverProps = $props();
|
|
19
|
-
|
|
20
|
-
const positionAxis = getPositions();
|
|
21
|
-
const assets = getAssets();
|
|
22
|
-
|
|
23
|
-
let ref: HTMLElement | null = $state(null);
|
|
24
|
-
let refActivator: HTMLElement | null = $state(null);
|
|
25
|
-
let axis = $state({ x: 0, y: 0 });
|
|
26
|
-
let innerHeight = $state(0);
|
|
27
|
-
let innerWidth = $state(0);
|
|
28
|
-
let scrollX = $state(0);
|
|
29
|
-
let scrollY = $state(0);
|
|
30
|
-
|
|
31
|
-
axis = positionAxis?.values;
|
|
32
|
-
|
|
33
|
-
let model: ModelPopoverProps = {
|
|
34
|
-
toggle: (element) => handleToggle(element)
|
|
35
|
-
};
|
|
36
|
-
|
|
37
|
-
const handleToggle = (element: HTMLElement | null) => {
|
|
38
|
-
if (element === null) return;
|
|
39
|
-
refActivator = element;
|
|
40
|
-
open = !open;
|
|
41
|
-
};
|
|
42
|
-
|
|
43
|
-
$effect(() => {
|
|
44
|
-
if (
|
|
45
|
-
open &&
|
|
46
|
-
ref &&
|
|
47
|
-
refActivator &&
|
|
48
|
-
(scrollX > 0 || scrollY > 0 || innerHeight > 0 || innerWidth > 0)
|
|
49
|
-
) {
|
|
50
|
-
positionAxis.update(refActivator, ref, position);
|
|
51
|
-
}
|
|
52
|
-
});
|
|
53
|
-
</script>
|
|
54
|
-
|
|
55
|
-
<svelte:window bind:innerHeight bind:innerWidth bind:scrollX bind:scrollY />
|
|
56
|
-
|
|
57
|
-
{@render activator?.(model)}
|
|
58
|
-
|
|
59
|
-
{#if open}
|
|
60
|
-
<div
|
|
61
|
-
bind:this={ref}
|
|
62
|
-
{...rest}
|
|
63
|
-
role="menu"
|
|
64
|
-
class={['kit-popover-content', light && 'light', dark && 'dark', rest.class]}
|
|
65
|
-
style={`transform: translate(${axis.x}px, ${axis.y}px);`}
|
|
66
|
-
style:--base={assets.color(background)}
|
|
67
|
-
style:--on={assets.color(color)}
|
|
68
|
-
style:--shape={assets.shape(rounded)}
|
|
69
|
-
use:clickOutside={{ exclude: [ref, refActivator], onClose: () => (open = false) }}
|
|
70
|
-
>
|
|
71
|
-
{@render children?.()}
|
|
72
|
-
</div>
|
|
73
|
-
{/if}
|
|
@@ -1,134 +0,0 @@
|
|
|
1
|
-
import { innerWidth, innerHeight } from 'svelte/reactivity/window';
|
|
2
|
-
export function getPositions() {
|
|
3
|
-
// state
|
|
4
|
-
const axis = $state({
|
|
5
|
-
x: 0,
|
|
6
|
-
y: 0,
|
|
7
|
-
location: null
|
|
8
|
-
});
|
|
9
|
-
return {
|
|
10
|
-
get values() {
|
|
11
|
-
return axis;
|
|
12
|
-
},
|
|
13
|
-
update(activator, element, location, centered, avoidCollisions) {
|
|
14
|
-
if (!activator || !element)
|
|
15
|
-
return;
|
|
16
|
-
const elementRect = element.getBoundingClientRect();
|
|
17
|
-
if (activator instanceof HTMLElement) {
|
|
18
|
-
const activatorRect = activator.getBoundingClientRect();
|
|
19
|
-
const spacing = 6;
|
|
20
|
-
const _activator = activatorRect.y + activatorRect.height;
|
|
21
|
-
const _element = elementRect.height + spacing;
|
|
22
|
-
if (location === 'top' || location === 'bottom') {
|
|
23
|
-
if (avoidCollisions) {
|
|
24
|
-
if (location === 'top') {
|
|
25
|
-
if (activatorRect.y - _element < 0) {
|
|
26
|
-
axis.y = activatorRect.bottom + spacing;
|
|
27
|
-
axis.location = 'bottom';
|
|
28
|
-
}
|
|
29
|
-
else {
|
|
30
|
-
axis.y = activatorRect.top - _element;
|
|
31
|
-
axis.location = 'top';
|
|
32
|
-
}
|
|
33
|
-
}
|
|
34
|
-
else {
|
|
35
|
-
if (_activator + _element > innerHeight.current) {
|
|
36
|
-
axis.y = activatorRect.top - _element;
|
|
37
|
-
axis.location = 'top';
|
|
38
|
-
}
|
|
39
|
-
else {
|
|
40
|
-
axis.y = activatorRect.bottom + spacing;
|
|
41
|
-
axis.location = 'bottom';
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
else {
|
|
46
|
-
if (location === 'top') {
|
|
47
|
-
axis.y = activatorRect.top - _element;
|
|
48
|
-
axis.location = 'top';
|
|
49
|
-
}
|
|
50
|
-
else {
|
|
51
|
-
axis.y = activatorRect.bottom + spacing;
|
|
52
|
-
axis.location = 'bottom';
|
|
53
|
-
}
|
|
54
|
-
}
|
|
55
|
-
if (centered &&
|
|
56
|
-
activatorRect.left - (elementRect.width - activatorRect.width) / 2 > 0 &&
|
|
57
|
-
activatorRect.left + elementRect.width < innerWidth.current) {
|
|
58
|
-
axis.x = activatorRect.left - (elementRect.width - activatorRect.width) / 2;
|
|
59
|
-
}
|
|
60
|
-
else if (activatorRect.left + elementRect.width > innerWidth.current) {
|
|
61
|
-
axis.x = activatorRect.left - (elementRect.width - activatorRect.width);
|
|
62
|
-
}
|
|
63
|
-
else {
|
|
64
|
-
axis.x = activatorRect.left;
|
|
65
|
-
}
|
|
66
|
-
}
|
|
67
|
-
else if (location === 'left' || location === 'right') {
|
|
68
|
-
if (avoidCollisions) {
|
|
69
|
-
if (location === 'left' && !(activatorRect.left - elementRect.width < 0)) {
|
|
70
|
-
axis.x = activatorRect.left - (elementRect.width + spacing);
|
|
71
|
-
axis.location = 'left';
|
|
72
|
-
}
|
|
73
|
-
else {
|
|
74
|
-
if (activatorRect.left + activatorRect.width + elementRect.width + spacing >
|
|
75
|
-
innerWidth.current) {
|
|
76
|
-
axis.x = activatorRect.left - (elementRect.width + spacing);
|
|
77
|
-
axis.location = 'left';
|
|
78
|
-
}
|
|
79
|
-
else {
|
|
80
|
-
axis.x = activatorRect.left + activatorRect.width + spacing;
|
|
81
|
-
axis.location = 'right';
|
|
82
|
-
}
|
|
83
|
-
}
|
|
84
|
-
}
|
|
85
|
-
else {
|
|
86
|
-
if (location === 'left') {
|
|
87
|
-
axis.x = activatorRect.left - (elementRect.width + spacing);
|
|
88
|
-
axis.location = 'left';
|
|
89
|
-
}
|
|
90
|
-
else {
|
|
91
|
-
axis.x = activatorRect.left + activatorRect.width + spacing;
|
|
92
|
-
axis.location = 'right';
|
|
93
|
-
}
|
|
94
|
-
}
|
|
95
|
-
if (centered &&
|
|
96
|
-
activatorRect.top - (elementRect.height - activatorRect.height) / 2 > 0 &&
|
|
97
|
-
activatorRect.top + elementRect.height < innerHeight.current) {
|
|
98
|
-
axis.y = activatorRect.top - (elementRect.height - activatorRect.height) / 2;
|
|
99
|
-
}
|
|
100
|
-
else if (activatorRect.y + elementRect.height > innerHeight.current) {
|
|
101
|
-
axis.y = activatorRect.y - elementRect.height + activatorRect.height;
|
|
102
|
-
}
|
|
103
|
-
else {
|
|
104
|
-
axis.y = activatorRect.y;
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
|
-
else {
|
|
108
|
-
if (centered &&
|
|
109
|
-
activatorRect.left - (elementRect.width - activatorRect.width) / 2 > 0 &&
|
|
110
|
-
activatorRect.left + elementRect.width < innerWidth.current) {
|
|
111
|
-
axis.x = activatorRect.left - (elementRect.width - activatorRect.width) / 2;
|
|
112
|
-
}
|
|
113
|
-
else if (activatorRect.left + elementRect.width > innerWidth.current) {
|
|
114
|
-
axis.x = activatorRect.left - (elementRect.width - activatorRect.width);
|
|
115
|
-
}
|
|
116
|
-
else {
|
|
117
|
-
axis.x = activatorRect.left;
|
|
118
|
-
}
|
|
119
|
-
if (centered &&
|
|
120
|
-
activatorRect.top - (elementRect.height - activatorRect.height) / 2 > 0 &&
|
|
121
|
-
activatorRect.top + elementRect.height < innerHeight.current) {
|
|
122
|
-
axis.y = activatorRect.top - (elementRect.height - activatorRect.height) / 2;
|
|
123
|
-
}
|
|
124
|
-
else if (activatorRect.bottom + elementRect.height > innerHeight.current) {
|
|
125
|
-
axis.y = activatorRect.top - elementRect.height;
|
|
126
|
-
}
|
|
127
|
-
else {
|
|
128
|
-
axis.y = activatorRect.bottom;
|
|
129
|
-
}
|
|
130
|
-
}
|
|
131
|
-
}
|
|
132
|
-
}
|
|
133
|
-
};
|
|
134
|
-
}
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import type { Component } from '../../internal/types.js';
|
|
2
|
-
import type { Snippet } from 'svelte';
|
|
3
|
-
export type PositionElement = {
|
|
4
|
-
x: number;
|
|
5
|
-
y: number;
|
|
6
|
-
location: string | null;
|
|
7
|
-
};
|
|
8
|
-
export interface PopoverProps extends Component {
|
|
9
|
-
open?: boolean;
|
|
10
|
-
dark?: boolean;
|
|
11
|
-
light?: boolean;
|
|
12
|
-
rounded?: string;
|
|
13
|
-
position?: 'top' | 'bottom' | 'left' | 'right';
|
|
14
|
-
color?: string;
|
|
15
|
-
background?: string;
|
|
16
|
-
activator?: Snippet<[ModelPopoverProps]>;
|
|
17
|
-
}
|
|
18
|
-
export type ModelPopoverProps = {
|
|
19
|
-
toggle: (element: HTMLElement | null) => void;
|
|
20
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,124 +0,0 @@
|
|
|
1
|
-
.kit-tooltip {
|
|
2
|
-
inset: 0px auto auto 0px;
|
|
3
|
-
margin: 0px;
|
|
4
|
-
position: fixed;
|
|
5
|
-
z-index: 2000;
|
|
6
|
-
}
|
|
7
|
-
|
|
8
|
-
.kit-tooltip-content {
|
|
9
|
-
--tooltip-color: var(--on, var(--kit-on-neutral));
|
|
10
|
-
--tooltip-background: var(--base, var(--kit-neutral));
|
|
11
|
-
--tooltip-radius: var(--shape, var(--kit-radius-md));
|
|
12
|
-
|
|
13
|
-
background-color: var(--tooltip-background);
|
|
14
|
-
color: var(--tooltip-color);
|
|
15
|
-
border-radius: var(--tooltip-radius);
|
|
16
|
-
border: 1px solid var(--tooltip-background);
|
|
17
|
-
font-size: 0.875rem;
|
|
18
|
-
display: inline-block;
|
|
19
|
-
width: auto;
|
|
20
|
-
pointer-events: none;
|
|
21
|
-
overflow-wrap: break-word;
|
|
22
|
-
transition:
|
|
23
|
-
color 0.5s,
|
|
24
|
-
border-color 0.5s,
|
|
25
|
-
background-color 0.5s;
|
|
26
|
-
box-shadow: 0px 16px 29px -10px color-mix(in oklab, var(--kit-scrim) 60%, transparent);
|
|
27
|
-
}
|
|
28
|
-
|
|
29
|
-
/* density */
|
|
30
|
-
.kit-tooltip-content[breakpoint]kit-tooltip-content--density-default {
|
|
31
|
-
padding: 0.15rem 0.625rem;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
|
-
.kit-tooltip-content[breakpoint]kit-tooltip-content--density-compact {
|
|
35
|
-
padding: 0.125rem 0.5rem;
|
|
36
|
-
}
|
|
37
|
-
|
|
38
|
-
.kit-tooltip-content[breakpoint]kit-tooltip-content--density-comfortable {
|
|
39
|
-
padding: 0.35rem 0.75rem;
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
.kit-tooltip-content--arrow::after {
|
|
43
|
-
content: ' ';
|
|
44
|
-
position: absolute;
|
|
45
|
-
border-style: solid;
|
|
46
|
-
}
|
|
47
|
-
|
|
48
|
-
.kit-tooltip-content--arrow.kit-tooltip-content--bottom::after,
|
|
49
|
-
.kit-tooltip-content--arrow.kit-tooltip-content--top::after {
|
|
50
|
-
left: 50%;
|
|
51
|
-
margin-left: -0.35rem;
|
|
52
|
-
border-width: 0.35rem;
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
.kit-tooltip-content--arrow.kit-tooltip-content--bottom::after {
|
|
56
|
-
bottom: 100%;
|
|
57
|
-
border-color: transparent transparent var(--tooltip-background) transparent;
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
.kit-tooltip-content--arrow.kit-tooltip-content--top::after {
|
|
61
|
-
top: 100%;
|
|
62
|
-
border-color: var(--tooltip-background) transparent transparent transparent;
|
|
63
|
-
}
|
|
64
|
-
|
|
65
|
-
.kit-tooltip-content--arrow.kit-tooltip-content--left::after,
|
|
66
|
-
.kit-tooltip-content--arrow.kit-tooltip-content--right::after {
|
|
67
|
-
top: 50%;
|
|
68
|
-
margin-top: -0.35rem;
|
|
69
|
-
border-width: 0.35rem;
|
|
70
|
-
}
|
|
71
|
-
|
|
72
|
-
.kit-tooltip-content--arrow.kit-tooltip-content--right::after {
|
|
73
|
-
right: 100%;
|
|
74
|
-
border-color: transparent var(--tooltip-background) transparent transparent;
|
|
75
|
-
}
|
|
76
|
-
|
|
77
|
-
.kit-tooltip-content--arrow.kit-tooltip-content--left::after {
|
|
78
|
-
left: 100%;
|
|
79
|
-
border-color: transparent transparent transparent var(--tooltip-background);
|
|
80
|
-
}
|
|
81
|
-
|
|
82
|
-
.kit-tooltip-content--top,
|
|
83
|
-
.kit-tooltip-content--bottom,
|
|
84
|
-
.kit-tooltip-content--right,
|
|
85
|
-
.kit-tooltip-content--left {
|
|
86
|
-
animation-duration: 150ms;
|
|
87
|
-
animation-name: enter;
|
|
88
|
-
}
|
|
89
|
-
|
|
90
|
-
.kit-tooltip-content--top {
|
|
91
|
-
--animate-enter-pos1: 0;
|
|
92
|
-
--animate-enter-pos2: 0.5rem;
|
|
93
|
-
--animate-enter-pos3: 0;
|
|
94
|
-
}
|
|
95
|
-
|
|
96
|
-
.kit-tooltip-content--bottom {
|
|
97
|
-
--animate-enter-pos1: 0;
|
|
98
|
-
--animate-enter-pos2: -0.5rem;
|
|
99
|
-
--animate-enter-pos3: 0;
|
|
100
|
-
}
|
|
101
|
-
|
|
102
|
-
.kit-tooltip-content--right {
|
|
103
|
-
--animate-enter-pos1: -0.5rem;
|
|
104
|
-
--animate-enter-pos2: 0;
|
|
105
|
-
--animate-enter-pos3: 0;
|
|
106
|
-
}
|
|
107
|
-
|
|
108
|
-
.kit-tooltip-content--left {
|
|
109
|
-
--animate-enter-pos1: 0.5rem;
|
|
110
|
-
--animate-enter-pos2: 0;
|
|
111
|
-
--animate-enter-pos3: 0;
|
|
112
|
-
}
|
|
113
|
-
|
|
114
|
-
@keyframes enter {
|
|
115
|
-
0% {
|
|
116
|
-
opacity: 0;
|
|
117
|
-
transform: translate3d(
|
|
118
|
-
var(--animate-enter-pos1),
|
|
119
|
-
var(--animate-enter-pos2),
|
|
120
|
-
var(--animate-enter-pos3)
|
|
121
|
-
)
|
|
122
|
-
scale3d(0.95, 0.95, 0.95) rotate(0);
|
|
123
|
-
}
|
|
124
|
-
}
|
|
@@ -1,113 +0,0 @@
|
|
|
1
|
-
<script lang="ts">
|
|
2
|
-
import { getAssets } from '../../internal/assets.svelte.js';
|
|
3
|
-
import { getPositionsTooltip } from './tooltip.svelte.js';
|
|
4
|
-
import type { PositionElement, TooltipProps } from './types.js';
|
|
5
|
-
|
|
6
|
-
let {
|
|
7
|
-
children,
|
|
8
|
-
tooltip,
|
|
9
|
-
open = $bindable(),
|
|
10
|
-
label,
|
|
11
|
-
dark,
|
|
12
|
-
light,
|
|
13
|
-
rounded,
|
|
14
|
-
color,
|
|
15
|
-
background,
|
|
16
|
-
location = 'bottom',
|
|
17
|
-
delayDuration = 850,
|
|
18
|
-
density = 'default',
|
|
19
|
-
variant,
|
|
20
|
-
disabled,
|
|
21
|
-
avoidCollisions = true,
|
|
22
|
-
forceMount,
|
|
23
|
-
...rest
|
|
24
|
-
}: TooltipProps = $props();
|
|
25
|
-
|
|
26
|
-
const positionAxis = getPositionsTooltip();
|
|
27
|
-
const assets = getAssets();
|
|
28
|
-
|
|
29
|
-
let ref: HTMLElement | null = $state(null);
|
|
30
|
-
let refTooltip: HTMLElement | null = $state(null);
|
|
31
|
-
let timer: ReturnType<typeof setTimeout> | null = $state(null);
|
|
32
|
-
let axis: PositionElement = $state({ x: 0, y: 0, location: null });
|
|
33
|
-
let innerHeight = $state(0);
|
|
34
|
-
let innerWidth = $state(0);
|
|
35
|
-
let scrollX = $state(0);
|
|
36
|
-
let scrollY = $state(0);
|
|
37
|
-
|
|
38
|
-
axis = positionAxis?.values;
|
|
39
|
-
|
|
40
|
-
$effect(() => {
|
|
41
|
-
if (
|
|
42
|
-
open &&
|
|
43
|
-
ref &&
|
|
44
|
-
refTooltip &&
|
|
45
|
-
(scrollX > 0 || scrollY > 0 || innerHeight > 0 || innerWidth > 0)
|
|
46
|
-
) {
|
|
47
|
-
positionAxis.update(ref, refTooltip, location, true, avoidCollisions);
|
|
48
|
-
}
|
|
49
|
-
});
|
|
50
|
-
|
|
51
|
-
$effect(() => {
|
|
52
|
-
if (tooltip) forceMount = true;
|
|
53
|
-
});
|
|
54
|
-
|
|
55
|
-
const handleMouse = (state: string) => {
|
|
56
|
-
if (disabled) return (open = false);
|
|
57
|
-
if (state === 'enter') {
|
|
58
|
-
timer = setTimeout(() => {
|
|
59
|
-
open = true;
|
|
60
|
-
}, delayDuration);
|
|
61
|
-
} else if (state === 'leave') {
|
|
62
|
-
if (timer) {
|
|
63
|
-
clearTimeout(timer);
|
|
64
|
-
timer = null;
|
|
65
|
-
}
|
|
66
|
-
open = false;
|
|
67
|
-
}
|
|
68
|
-
};
|
|
69
|
-
</script>
|
|
70
|
-
|
|
71
|
-
<svelte:window bind:innerHeight bind:innerWidth bind:scrollX bind:scrollY />
|
|
72
|
-
|
|
73
|
-
<!-- svelte-ignore a11y_no_static_element_interactions -->
|
|
74
|
-
<span
|
|
75
|
-
bind:this={ref}
|
|
76
|
-
onmouseenter={() => handleMouse('enter')}
|
|
77
|
-
onmouseleave={() => handleMouse('leave')}
|
|
78
|
-
style:display="inline-flex"
|
|
79
|
-
>
|
|
80
|
-
{@render children?.()}
|
|
81
|
-
</span>
|
|
82
|
-
|
|
83
|
-
{#if open || forceMount}
|
|
84
|
-
<div
|
|
85
|
-
bind:this={refTooltip}
|
|
86
|
-
class={['kit-tooltip']}
|
|
87
|
-
role="tooltip"
|
|
88
|
-
aria-label={label}
|
|
89
|
-
style={`transform: translate(${axis.x}px, ${axis.y}px);display: ${open ? 'initial' : 'none'}`}
|
|
90
|
-
>
|
|
91
|
-
<div
|
|
92
|
-
class={[
|
|
93
|
-
'kit-tooltip-content animate-in',
|
|
94
|
-
light && 'light',
|
|
95
|
-
dark && 'dark',
|
|
96
|
-
rounded && assets.shape(rounded),
|
|
97
|
-
axis?.location && `kit-tooltip-content--${axis?.location}`,
|
|
98
|
-
variant && `kit-tooltip-content--${variant}`,
|
|
99
|
-
density && assets.className('tooltip-content', 'density', density),
|
|
100
|
-
rest.class
|
|
101
|
-
]}
|
|
102
|
-
style:--base={assets.color(background)}
|
|
103
|
-
style:--on={assets.color(color)}
|
|
104
|
-
style:--shape={assets.shape(rounded)}
|
|
105
|
-
>
|
|
106
|
-
{#if tooltip}
|
|
107
|
-
{@render tooltip?.()}
|
|
108
|
-
{:else}
|
|
109
|
-
{label}
|
|
110
|
-
{/if}
|
|
111
|
-
</div>
|
|
112
|
-
</div>
|
|
113
|
-
{/if}
|
|
@@ -1,131 +0,0 @@
|
|
|
1
|
-
import { innerWidth, innerHeight } from 'svelte/reactivity/window';
|
|
2
|
-
export function getPositionsTooltip() {
|
|
3
|
-
// state
|
|
4
|
-
const axis = $state({
|
|
5
|
-
x: 0,
|
|
6
|
-
y: 0,
|
|
7
|
-
location: null
|
|
8
|
-
});
|
|
9
|
-
return {
|
|
10
|
-
get values() {
|
|
11
|
-
return axis;
|
|
12
|
-
},
|
|
13
|
-
update(activator, element, location, centered, avoidCollisions) {
|
|
14
|
-
if (!activator || !element)
|
|
15
|
-
return;
|
|
16
|
-
const elementRect = element.getBoundingClientRect();
|
|
17
|
-
const activatorRect = activator.getBoundingClientRect();
|
|
18
|
-
const spacing = 6;
|
|
19
|
-
if (location === 'top' || location === 'bottom') {
|
|
20
|
-
if (avoidCollisions) {
|
|
21
|
-
if (location === 'top') {
|
|
22
|
-
if (activatorRect.y - (elementRect.height + spacing) < 0) {
|
|
23
|
-
axis.y = activatorRect.bottom + spacing;
|
|
24
|
-
axis.location = 'bottom';
|
|
25
|
-
}
|
|
26
|
-
else {
|
|
27
|
-
axis.y = activatorRect.top - (elementRect.height + spacing);
|
|
28
|
-
axis.location = 'top';
|
|
29
|
-
}
|
|
30
|
-
}
|
|
31
|
-
else {
|
|
32
|
-
if (activatorRect.y + activatorRect.height + (elementRect.height + spacing) >
|
|
33
|
-
innerHeight.current) {
|
|
34
|
-
axis.y = activatorRect.top - (elementRect.height + spacing);
|
|
35
|
-
axis.location = 'top';
|
|
36
|
-
}
|
|
37
|
-
else {
|
|
38
|
-
axis.y = activatorRect.bottom + spacing;
|
|
39
|
-
axis.location = 'bottom';
|
|
40
|
-
}
|
|
41
|
-
}
|
|
42
|
-
}
|
|
43
|
-
else {
|
|
44
|
-
if (location === 'top') {
|
|
45
|
-
axis.y = activatorRect.top - (elementRect.height + spacing);
|
|
46
|
-
axis.location = 'top';
|
|
47
|
-
}
|
|
48
|
-
else {
|
|
49
|
-
axis.y = activatorRect.bottom + spacing;
|
|
50
|
-
axis.location = 'bottom';
|
|
51
|
-
}
|
|
52
|
-
}
|
|
53
|
-
if (centered &&
|
|
54
|
-
activatorRect.left - (elementRect.width - activatorRect.width) / 2 > 0 &&
|
|
55
|
-
activatorRect.left + elementRect.width < innerWidth.current) {
|
|
56
|
-
axis.x = activatorRect.left - (elementRect.width - activatorRect.width) / 2;
|
|
57
|
-
}
|
|
58
|
-
else if (activatorRect.left + elementRect.width > innerWidth.current) {
|
|
59
|
-
axis.x = activatorRect.left - (elementRect.width - activatorRect.width);
|
|
60
|
-
}
|
|
61
|
-
else {
|
|
62
|
-
axis.x = activatorRect.left;
|
|
63
|
-
}
|
|
64
|
-
}
|
|
65
|
-
else if (location === 'left' || location === 'right') {
|
|
66
|
-
if (avoidCollisions) {
|
|
67
|
-
if (location === 'left' && !(activatorRect.left - elementRect.width < 0)) {
|
|
68
|
-
axis.x = activatorRect.left - (elementRect.width + spacing);
|
|
69
|
-
axis.location = 'left';
|
|
70
|
-
}
|
|
71
|
-
else {
|
|
72
|
-
if (activatorRect.left + activatorRect.width + elementRect.width + spacing >
|
|
73
|
-
innerWidth.current) {
|
|
74
|
-
axis.x = activatorRect.left - (elementRect.width + spacing);
|
|
75
|
-
axis.location = 'left';
|
|
76
|
-
}
|
|
77
|
-
else {
|
|
78
|
-
axis.x = activatorRect.left + activatorRect.width + spacing;
|
|
79
|
-
axis.location = 'right';
|
|
80
|
-
}
|
|
81
|
-
}
|
|
82
|
-
}
|
|
83
|
-
else {
|
|
84
|
-
if (location === 'left') {
|
|
85
|
-
axis.x = activatorRect.left - (elementRect.width + spacing);
|
|
86
|
-
axis.location = 'left';
|
|
87
|
-
}
|
|
88
|
-
else {
|
|
89
|
-
axis.x = activatorRect.left + activatorRect.width + spacing;
|
|
90
|
-
axis.location = 'right';
|
|
91
|
-
}
|
|
92
|
-
}
|
|
93
|
-
if (centered &&
|
|
94
|
-
activatorRect.top - (elementRect.height - activatorRect.height) / 2 > 0 &&
|
|
95
|
-
activatorRect.top + elementRect.height < innerHeight.current) {
|
|
96
|
-
axis.y = activatorRect.top - (elementRect.height - activatorRect.height) / 2;
|
|
97
|
-
}
|
|
98
|
-
else if (activatorRect.y + elementRect.height > innerHeight.current) {
|
|
99
|
-
axis.y = activatorRect.y - elementRect.height + activatorRect.height;
|
|
100
|
-
}
|
|
101
|
-
else {
|
|
102
|
-
axis.y = activatorRect.y;
|
|
103
|
-
}
|
|
104
|
-
}
|
|
105
|
-
else {
|
|
106
|
-
if (centered &&
|
|
107
|
-
activatorRect.left - (elementRect.width - activatorRect.width) / 2 > 0 &&
|
|
108
|
-
activatorRect.left + elementRect.width < innerWidth.current) {
|
|
109
|
-
axis.x = activatorRect.left - (elementRect.width - activatorRect.width) / 2;
|
|
110
|
-
}
|
|
111
|
-
else if (activatorRect.left + elementRect.width > innerWidth.current) {
|
|
112
|
-
axis.x = activatorRect.left - (elementRect.width - activatorRect.width);
|
|
113
|
-
}
|
|
114
|
-
else {
|
|
115
|
-
axis.x = activatorRect.left;
|
|
116
|
-
}
|
|
117
|
-
if (centered &&
|
|
118
|
-
activatorRect.top - (elementRect.height - activatorRect.height) / 2 > 0 &&
|
|
119
|
-
activatorRect.top + elementRect.height < innerHeight.current) {
|
|
120
|
-
axis.y = activatorRect.top - (elementRect.height - activatorRect.height) / 2;
|
|
121
|
-
}
|
|
122
|
-
else if (activatorRect.bottom + elementRect.height > innerHeight.current) {
|
|
123
|
-
axis.y = activatorRect.top - elementRect.height;
|
|
124
|
-
}
|
|
125
|
-
else {
|
|
126
|
-
axis.y = activatorRect.bottom;
|
|
127
|
-
}
|
|
128
|
-
}
|
|
129
|
-
}
|
|
130
|
-
};
|
|
131
|
-
}
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
import type { Component } from '../../internal/types.js';
|
|
2
|
-
import type { Snippet } from 'svelte';
|
|
3
|
-
export interface TooltipProps extends Component {
|
|
4
|
-
open?: boolean;
|
|
5
|
-
dark?: boolean;
|
|
6
|
-
light?: boolean;
|
|
7
|
-
rounded?: string;
|
|
8
|
-
label?: string;
|
|
9
|
-
location?: 'top' | 'bottom' | 'left' | 'right';
|
|
10
|
-
color?: string;
|
|
11
|
-
background?: string;
|
|
12
|
-
delayDuration?: number;
|
|
13
|
-
variant?: 'arrow';
|
|
14
|
-
density?: 'compact' | 'comfortable' | 'default';
|
|
15
|
-
disabled?: boolean;
|
|
16
|
-
avoidCollisions?: boolean;
|
|
17
|
-
tooltip?: Snippet;
|
|
18
|
-
}
|
|
19
|
-
export type PositionElement = {
|
|
20
|
-
x: number;
|
|
21
|
-
y: number;
|
|
22
|
-
location: string | null;
|
|
23
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare function disabledScroll(state: boolean): void;
|
package/dist/internal/scroll.js
DELETED