lapikit 0.7.3 → 0.7.4

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 (67) hide show
  1. package/dist/@types/components.d.ts +1 -7
  2. package/dist/@types/dom.d.ts +4 -3
  3. package/dist/@types/props.d.ts +3 -3
  4. package/dist/animations/ripple.js +8 -2
  5. package/dist/components/accordion/accordion.svelte +192 -228
  6. package/dist/components/accordion/accordion.types.d.ts +5 -7
  7. package/dist/components/accordion/modules/accordion-item.svelte +144 -140
  8. package/dist/components/alert/alert.svelte +246 -293
  9. package/dist/components/alert/alert.types.d.ts +5 -5
  10. package/dist/components/app/app.svelte +25 -43
  11. package/dist/components/appbar/appbar.svelte +205 -190
  12. package/dist/components/appbar/appbar.types.d.ts +6 -6
  13. package/dist/components/aspect-ratio/aspect-ratio.svelte +43 -63
  14. package/dist/components/avatar/avatar.svelte +169 -161
  15. package/dist/components/avatar/avatar.types.d.ts +3 -4
  16. package/dist/components/btn/btn.svelte +431 -465
  17. package/dist/components/btn/btn.types.d.ts +5 -6
  18. package/dist/components/card/card.svelte +24 -23
  19. package/dist/components/card/card.types.d.ts +2 -2
  20. package/dist/components/card/modules/card-content.svelte +4 -1
  21. package/dist/components/card/modules/card-title.svelte +4 -1
  22. package/dist/components/chip/chip.svelte +416 -464
  23. package/dist/components/chip/chip.types.d.ts +5 -5
  24. package/dist/components/dialog/dialog.svelte +174 -171
  25. package/dist/components/dialog/dialog.types.d.ts +6 -6
  26. package/dist/components/dropdown/dropdown.svelte +149 -144
  27. package/dist/components/dropdown/dropdown.types.d.ts +4 -11
  28. package/dist/components/field/field.svelte +474 -0
  29. package/dist/components/field/field.svelte.d.ts +4 -0
  30. package/dist/components/field/field.types.d.ts +46 -0
  31. package/dist/components/field/field.types.js +1 -0
  32. package/dist/components/icon/icon.svelte +67 -96
  33. package/dist/components/icon/icon.types.d.ts +2 -1
  34. package/dist/components/index.d.ts +2 -0
  35. package/dist/components/index.js +1 -0
  36. package/dist/components/list/list.svelte +193 -194
  37. package/dist/components/list/list.types.d.ts +5 -7
  38. package/dist/components/list/modules/list-item.svelte +134 -147
  39. package/dist/components/modal/modal.svelte +239 -222
  40. package/dist/components/modal/modal.types.d.ts +6 -6
  41. package/dist/components/popover/popover.svelte +125 -127
  42. package/dist/components/popover/popover.types.d.ts +4 -11
  43. package/dist/components/separator/separator.svelte +56 -87
  44. package/dist/components/separator/separator.types.d.ts +1 -1
  45. package/dist/components/spacer/spacer.svelte +6 -25
  46. package/dist/components/textfield/textfield.svelte +94 -543
  47. package/dist/components/textfield/textfield.types.d.ts +13 -33
  48. package/dist/components/toolbar/toolbar.svelte +216 -211
  49. package/dist/components/toolbar/toolbar.types.d.ts +8 -9
  50. package/dist/components/tooltip/tooltip.svelte +201 -266
  51. package/dist/components/tooltip/tooltip.types.d.ts +3 -10
  52. package/dist/constants.js +1 -0
  53. package/dist/html-mapped.d.ts +1 -15
  54. package/dist/html-mapped.js +0 -19
  55. package/dist/labs/sheet/sheet.svelte +27 -22
  56. package/dist/utils/color.d.ts +2 -2
  57. package/dist/utils/color.js +2 -1
  58. package/dist/utils/components.d.ts +10 -10
  59. package/dist/utils/components.js +16 -75
  60. package/dist/utils/floating.d.ts +58 -0
  61. package/dist/utils/floating.js +131 -0
  62. package/dist/utils/index.d.ts +1 -0
  63. package/dist/utils/index.js +1 -0
  64. package/package.json +3 -3
  65. package/dist/components/dropdown/dropdown.svelte.js +0 -148
  66. package/dist/components/popover/popover.svelte.js +0 -134
  67. package/dist/components/tooltip/tooltip.svelte.js +0 -131
package/dist/components/dropdown/dropdown.svelte.js DELETED
@@ -1,148 +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
- if (activator.clientX + elementRect.width > innerWidth.current) {
19
- axis.x = activator.clientX - elementRect.width;
20
- }
21
- else {
22
- axis.x = activator.clientX;
23
- }
24
- if (activator.clientY + elementRect.height > innerHeight.current) {
25
- axis.y = activator.clientY - elementRect.height;
26
- }
27
- else {
28
- axis.y = activator.clientY;
29
- }
30
- }
31
- else if (activator instanceof HTMLElement) {
32
- const activatorRect = activator.getBoundingClientRect();
33
- const spacing = 0;
34
- const _activator = activatorRect.y + activatorRect.height;
35
- const _element = elementRect.height + spacing;
36
- if (location === 'top' || location === 'bottom') {
37
- if (avoidCollisions) {
38
- if (location === 'top') {
39
- if (activatorRect.y - _element < 0) {
40
- axis.y = activatorRect.bottom + spacing;
41
- axis.location = 'bottom';
42
- }
43
- else {
44
- axis.y = activatorRect.top - _element;
45
- axis.location = 'top';
46
- }
47
- }
48
- else {
49
- if (_activator + _element > innerHeight.current) {
50
- axis.y = activatorRect.top - _element;
51
- axis.location = 'top';
52
- }
53
- else {
54
- axis.y = activatorRect.bottom + spacing;
55
- axis.location = 'bottom';
56
- }
57
- }
58
- }
59
- else {
60
- if (location === 'top') {
61
- axis.y = activatorRect.top - _element;
62
- axis.location = 'top';
63
- }
64
- else {
65
- axis.y = activatorRect.bottom + spacing;
66
- axis.location = 'bottom';
67
- }
68
- }
69
- if (centered &&
70
- activatorRect.left - (elementRect.width - activatorRect.width) / 2 > 0 &&
71
- activatorRect.left + elementRect.width < innerWidth.current) {
72
- axis.x = activatorRect.left - (elementRect.width - activatorRect.width) / 2;
73
- }
74
- else if (activatorRect.left + elementRect.width > innerWidth.current) {
75
- axis.x = activatorRect.left - (elementRect.width - activatorRect.width);
76
- }
77
- else {
78
- axis.x = activatorRect.left;
79
- }
80
- }
81
- else if (location === 'left' || location === 'right') {
82
- if (avoidCollisions) {
83
- if (location === 'left' && !(activatorRect.left - elementRect.width < 0)) {
84
- axis.x = activatorRect.left - (elementRect.width + spacing);
85
- axis.location = 'left';
86
- }
87
- else {
88
- if (activatorRect.left + activatorRect.width + elementRect.width + spacing >
89
- innerWidth.current) {
90
- axis.x = activatorRect.left - (elementRect.width + spacing);
91
- axis.location = 'left';
92
- }
93
- else {
94
- axis.x = activatorRect.left + activatorRect.width + spacing;
95
- axis.location = 'right';
96
- }
97
- }
98
- }
99
- else {
100
- if (location === 'left') {
101
- axis.x = activatorRect.left - (elementRect.width + spacing);
102
- axis.location = 'left';
103
- }
104
- else {
105
- axis.x = activatorRect.left + activatorRect.width + spacing;
106
- axis.location = 'right';
107
- }
108
- }
109
- if (centered &&
110
- activatorRect.top - (elementRect.height - activatorRect.height) / 2 > 0 &&
111
- activatorRect.top + elementRect.height < innerHeight.current) {
112
- axis.y = activatorRect.top - (elementRect.height - activatorRect.height) / 2;
113
- }
114
- else if (activatorRect.y + elementRect.height > innerHeight.current) {
115
- axis.y = activatorRect.y - elementRect.height + activatorRect.height;
116
- }
117
- else {
118
- axis.y = activatorRect.y;
119
- }
120
- }
121
- else {
122
- if (centered &&
123
- activatorRect.left - (elementRect.width - activatorRect.width) / 2 > 0 &&
124
- activatorRect.left + elementRect.width < innerWidth.current) {
125
- axis.x = activatorRect.left - (elementRect.width - activatorRect.width) / 2;
126
- }
127
- else if (activatorRect.left + elementRect.width > innerWidth.current) {
128
- axis.x = activatorRect.left - (elementRect.width - activatorRect.width);
129
- }
130
- else {
131
- axis.x = activatorRect.left;
132
- }
133
- if (centered &&
134
- activatorRect.top - (elementRect.height - activatorRect.height) / 2 > 0 &&
135
- activatorRect.top + elementRect.height < innerHeight.current) {
136
- axis.y = activatorRect.top - (elementRect.height - activatorRect.height) / 2;
137
- }
138
- else if (activatorRect.bottom + elementRect.height > innerHeight.current) {
139
- axis.y = activatorRect.top - elementRect.height;
140
- }
141
- else {
142
- axis.y = activatorRect.bottom;
143
- }
144
- }
145
- }
146
- }
147
- };
148
- }
package/dist/components/popover/popover.svelte.js DELETED
@@ -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
- }
package/dist/components/tooltip/tooltip.svelte.js DELETED
@@ -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
- }