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.
@@ -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';
@@ -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';
@@ -1,4 +1,3 @@
1
1
  export * from './terminal.js';
2
2
  export * from './ansi.js';
3
3
  export * from './assets.svelte.js';
4
- export * from './scroll.js';
@@ -1,4 +1,3 @@
1
1
  export * from './terminal.js';
2
2
  export * from './ansi.js';
3
3
  export * from './assets.svelte.js';
4
- export * from './scroll.js';
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,6 +1,6 @@
1
1
  {
2
2
  "name": "lapikit",
3
- "version": "0.0.0-insiders.6f3bbea",
3
+ "version": "0.0.0-insiders.7d632c5",
4
4
  "license": "MIT",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -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,4 +0,0 @@
1
- import type { DialogProps } from './types.js';
2
- declare const Dialog: import("svelte").Component<DialogProps, {}, "open">;
3
- type Dialog = ReturnType<typeof Dialog>;
4
- export default 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,4 +0,0 @@
1
- import type { PopoverProps } from './types.js';
2
- declare const Popover: import("svelte").Component<PopoverProps, {}, "open">;
3
- type Popover = ReturnType<typeof Popover>;
4
- export default Popover;
@@ -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,4 +0,0 @@
1
- import type { TooltipProps } from './types.js';
2
- declare const Tooltip: import("svelte").Component<TooltipProps, {}, "open">;
3
- type Tooltip = ReturnType<typeof Tooltip>;
4
- export default Tooltip;
@@ -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;
@@ -1,6 +0,0 @@
1
- import { BROWSER } from 'esm-env';
2
- export function disabledScroll(state) {
3
- if (BROWSER) {
4
- document.body.style.overflow = state ? 'hidden' : '';
5
- }
6
- }
@@ -1,7 +0,0 @@
1
- :root {
2
- --kit-dialog-size-xs: 18.75rem;
3
- --kit-dialog-size-sm: 25rem;
4
- --kit-dialog-size-md: 37.5rem;
5
- --kit-dialog-size-lg: 53.125rem;
6
- --kit-dialog-size-xl: 75rem;
7
- }