@intechstudio/grid-uikit 0.0.7 → 0.0.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.
- package/dist/MoltenPushButton.svelte +54 -0
- package/dist/MoltenPushButton.svelte.d.ts +28 -0
- package/dist/MoltenTooltip.svelte +252 -0
- package/dist/MoltenTooltip.svelte.d.ts +26 -0
- package/dist/index.d.ts +2 -0
- package/dist/index.js +2 -0
- package/package.json +2 -1
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
<script>const styleMap = {
|
|
2
|
+
normal: {
|
|
3
|
+
enabled: "text-gray-50 bg-black bg-opacity-10 border border-black border-opacity-40 hover:bg-opacity-40",
|
|
4
|
+
disabled: "text-gray-50/25 bg-black/25 bg-opacity-10 border border-black/25 border-opacity-40"
|
|
5
|
+
},
|
|
6
|
+
outlined: {
|
|
7
|
+
enabled: "border hover:bg-commit-saturate-20 text-white border-commit-saturate-10 hover:border-commit-desaturate-10",
|
|
8
|
+
disabled: "border text-white border-commit-saturate-10 bg-opacity-50 text-opacity-50"
|
|
9
|
+
},
|
|
10
|
+
accept: {
|
|
11
|
+
enabled: "text-white bg-commit hover:bg-commit-saturate-20",
|
|
12
|
+
disabled: "text-white bg-commit bg-opacity-50 text-opacity-50"
|
|
13
|
+
}
|
|
14
|
+
};
|
|
15
|
+
export let selected = false;
|
|
16
|
+
export let text = "";
|
|
17
|
+
export let style = "normal";
|
|
18
|
+
export let disabled = false;
|
|
19
|
+
export let popup = void 0;
|
|
20
|
+
export let ratio = "normal";
|
|
21
|
+
export let snap = "auto";
|
|
22
|
+
export let click;
|
|
23
|
+
let showPopup = false;
|
|
24
|
+
</script>
|
|
25
|
+
|
|
26
|
+
<container class="relative" class:w-full={snap === "full"}>
|
|
27
|
+
<button
|
|
28
|
+
class:selected
|
|
29
|
+
on:click={() => {
|
|
30
|
+
if (!showPopup) {
|
|
31
|
+
showPopup = true;
|
|
32
|
+
setTimeout(() => {
|
|
33
|
+
showPopup = false;
|
|
34
|
+
}, popup?.duration ?? 3000);
|
|
35
|
+
}
|
|
36
|
+
click();
|
|
37
|
+
}}
|
|
38
|
+
{disabled}
|
|
39
|
+
class="{disabled
|
|
40
|
+
? styleMap[style].disabled
|
|
41
|
+
: styleMap[style].enabled} rounded focus:outline-none truncate py-1"
|
|
42
|
+
class:px-4={ratio === "normal"}
|
|
43
|
+
class:px-1={ratio === "box"}
|
|
44
|
+
class:w-full={snap === "full"}
|
|
45
|
+
class:w-fit={snap === "auto"}
|
|
46
|
+
>
|
|
47
|
+
<span>{text}</span>
|
|
48
|
+
<slot name="content" />
|
|
49
|
+
</button>
|
|
50
|
+
|
|
51
|
+
{#if showPopup}
|
|
52
|
+
<slot name="popup" />
|
|
53
|
+
{/if}
|
|
54
|
+
</container>
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
import { SvelteComponent } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: {
|
|
4
|
+
selected?: boolean | undefined;
|
|
5
|
+
text?: string | undefined;
|
|
6
|
+
style?: string | undefined;
|
|
7
|
+
disabled?: boolean | undefined;
|
|
8
|
+
popup?: {
|
|
9
|
+
duration?: number;
|
|
10
|
+
} | undefined;
|
|
11
|
+
ratio?: string | undefined;
|
|
12
|
+
snap?: string | undefined;
|
|
13
|
+
click: (...args: any) => void;
|
|
14
|
+
};
|
|
15
|
+
events: {
|
|
16
|
+
[evt: string]: CustomEvent<any>;
|
|
17
|
+
};
|
|
18
|
+
slots: {
|
|
19
|
+
content: {};
|
|
20
|
+
popup: {};
|
|
21
|
+
};
|
|
22
|
+
};
|
|
23
|
+
export type MoltenPushButtonProps = typeof __propDef.props;
|
|
24
|
+
export type MoltenPushButtonEvents = typeof __propDef.events;
|
|
25
|
+
export type MoltenPushButtonSlots = typeof __propDef.slots;
|
|
26
|
+
export default class MoltenPushButton extends SvelteComponent<MoltenPushButtonProps, MoltenPushButtonEvents, MoltenPushButtonSlots> {
|
|
27
|
+
}
|
|
28
|
+
export {};
|
|
@@ -0,0 +1,252 @@
|
|
|
1
|
+
<script>import { fade, slide } from "svelte/transition";
|
|
2
|
+
import Popover from "svelte-easy-popover";
|
|
3
|
+
import { SvelteComponent, onDestroy, onMount } from "svelte";
|
|
4
|
+
import MoltenPushButton from "./MoltenPushButton.svelte";
|
|
5
|
+
export let text = "";
|
|
6
|
+
export let placement = "top";
|
|
7
|
+
export let duration = 250;
|
|
8
|
+
export let delay = 750;
|
|
9
|
+
export let instant = false;
|
|
10
|
+
export let nowrap = false;
|
|
11
|
+
export let buttons = [];
|
|
12
|
+
export let triggerEvents = ["hover"];
|
|
13
|
+
export let referenceElement;
|
|
14
|
+
export let component = void 0;
|
|
15
|
+
let showbuttons = false;
|
|
16
|
+
let showTooltip;
|
|
17
|
+
let closeTimeout;
|
|
18
|
+
let openTimeout;
|
|
19
|
+
function handleClick(e) {
|
|
20
|
+
e.stopPropagation();
|
|
21
|
+
}
|
|
22
|
+
function handleMouseEnter(e) {
|
|
23
|
+
handleReferenceElementMouseEnter(e);
|
|
24
|
+
e.stopPropagation();
|
|
25
|
+
}
|
|
26
|
+
function handleMouseLeave(e) {
|
|
27
|
+
handleReferenceElementMouseLeave(e);
|
|
28
|
+
e.stopPropagation();
|
|
29
|
+
}
|
|
30
|
+
function handleReferenceElementClick(e) {
|
|
31
|
+
if (triggerEvents.includes("click")) {
|
|
32
|
+
showTooltip = true;
|
|
33
|
+
showbuttons = true;
|
|
34
|
+
}
|
|
35
|
+
if (triggerEvents.includes("show-buttons")) {
|
|
36
|
+
if (!showbuttons) {
|
|
37
|
+
clearTimeout(openTimeout);
|
|
38
|
+
showTooltip = true;
|
|
39
|
+
showbuttons = true;
|
|
40
|
+
}
|
|
41
|
+
}
|
|
42
|
+
if (triggerEvents.includes("hover") && !showbuttons) {
|
|
43
|
+
showTooltip = false;
|
|
44
|
+
}
|
|
45
|
+
e.stopPropagation();
|
|
46
|
+
}
|
|
47
|
+
function handleReferenceElementMouseEnter(e) {
|
|
48
|
+
if (triggerEvents.includes("hover")) {
|
|
49
|
+
clearTimeout(closeTimeout);
|
|
50
|
+
if (instant) {
|
|
51
|
+
showTooltip = true;
|
|
52
|
+
} else {
|
|
53
|
+
openTimeout = setTimeout(() => {
|
|
54
|
+
showTooltip = true;
|
|
55
|
+
}, delay);
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
if (triggerEvents.includes("click")) {
|
|
59
|
+
clearTimeout(closeTimeout);
|
|
60
|
+
}
|
|
61
|
+
e.stopPropagation();
|
|
62
|
+
}
|
|
63
|
+
function handleReferenceElementMouseLeave(e) {
|
|
64
|
+
if (triggerEvents.includes("hover") && !showbuttons) {
|
|
65
|
+
clearTimeout(openTimeout);
|
|
66
|
+
closeTimeout = setTimeout(
|
|
67
|
+
() => {
|
|
68
|
+
showTooltip = false;
|
|
69
|
+
},
|
|
70
|
+
instant ? 0 : 100
|
|
71
|
+
);
|
|
72
|
+
}
|
|
73
|
+
if (triggerEvents.includes("click")) {
|
|
74
|
+
closeTimeout = setTimeout(() => {
|
|
75
|
+
showTooltip = false;
|
|
76
|
+
}, 100);
|
|
77
|
+
}
|
|
78
|
+
e.stopPropagation();
|
|
79
|
+
}
|
|
80
|
+
onMount(() => {
|
|
81
|
+
referenceElement.addEventListener(
|
|
82
|
+
"mouseenter",
|
|
83
|
+
handleReferenceElementMouseEnter
|
|
84
|
+
);
|
|
85
|
+
referenceElement.addEventListener(
|
|
86
|
+
"mouseleave",
|
|
87
|
+
handleReferenceElementMouseLeave
|
|
88
|
+
);
|
|
89
|
+
referenceElement.addEventListener("click", handleReferenceElementClick);
|
|
90
|
+
});
|
|
91
|
+
onDestroy(() => {
|
|
92
|
+
referenceElement.removeEventListener(
|
|
93
|
+
"mouseenter",
|
|
94
|
+
handleReferenceElementMouseEnter
|
|
95
|
+
);
|
|
96
|
+
referenceElement.removeEventListener(
|
|
97
|
+
"mouseleave",
|
|
98
|
+
handleReferenceElementMouseLeave
|
|
99
|
+
);
|
|
100
|
+
referenceElement.removeEventListener("click", handleReferenceElementClick);
|
|
101
|
+
});
|
|
102
|
+
function interceptEvent(e) {
|
|
103
|
+
const { type, data } = e.detail;
|
|
104
|
+
switch (type) {
|
|
105
|
+
case "close": {
|
|
106
|
+
close();
|
|
107
|
+
break;
|
|
108
|
+
}
|
|
109
|
+
default:
|
|
110
|
+
forwardEvent(e);
|
|
111
|
+
}
|
|
112
|
+
e.stopPropagation();
|
|
113
|
+
}
|
|
114
|
+
function forwardEvent(e) {
|
|
115
|
+
const { type, data } = e.detail;
|
|
116
|
+
referenceElement?.dispatchEvent(
|
|
117
|
+
new CustomEvent(type, {
|
|
118
|
+
detail: data
|
|
119
|
+
})
|
|
120
|
+
);
|
|
121
|
+
}
|
|
122
|
+
function close() {
|
|
123
|
+
clearTimeout(openTimeout);
|
|
124
|
+
clearTimeout(closeTimeout);
|
|
125
|
+
showTooltip = false;
|
|
126
|
+
showbuttons = false;
|
|
127
|
+
}
|
|
128
|
+
</script>
|
|
129
|
+
|
|
130
|
+
<Popover
|
|
131
|
+
bind:isOpen={showTooltip}
|
|
132
|
+
triggerEvents={["manual"]}
|
|
133
|
+
{referenceElement}
|
|
134
|
+
bind:placement
|
|
135
|
+
spaceAway={10}
|
|
136
|
+
>
|
|
137
|
+
<button
|
|
138
|
+
on:mouseenter={handleMouseEnter}
|
|
139
|
+
on:mouseleave={handleMouseLeave}
|
|
140
|
+
on:click={handleClick}
|
|
141
|
+
class="{$$props.class} tooltip-bg cursor-default flex flex-col relative rounded-md z-[99]"
|
|
142
|
+
transition:fade|global={{
|
|
143
|
+
duration: instant ? 0 : duration, //Make it instant when explicitly clicked
|
|
144
|
+
}}
|
|
145
|
+
>
|
|
146
|
+
<div class="flex flex-col w-full h-full" class:gap-2={buttons.length > 0}>
|
|
147
|
+
{#if typeof component === "undefined"}
|
|
148
|
+
<div
|
|
149
|
+
class="text-white text-left font-normal"
|
|
150
|
+
class:whitespace-nowrap={nowrap}
|
|
151
|
+
>
|
|
152
|
+
{text}
|
|
153
|
+
</div>
|
|
154
|
+
{:else}
|
|
155
|
+
<svelte:component
|
|
156
|
+
this={component.object}
|
|
157
|
+
{...component.props}
|
|
158
|
+
class="z-10"
|
|
159
|
+
on:event={interceptEvent}
|
|
160
|
+
/>
|
|
161
|
+
{/if}
|
|
162
|
+
|
|
163
|
+
{#if showbuttons}
|
|
164
|
+
<div
|
|
165
|
+
transition:slide|global={{ duration: instant ? 0 : 100 }}
|
|
166
|
+
class="gap-2 flex flex-row w-full"
|
|
167
|
+
>
|
|
168
|
+
{#each buttons as button}
|
|
169
|
+
<MoltenPushButton
|
|
170
|
+
text={button.label}
|
|
171
|
+
snap={"full"}
|
|
172
|
+
on:click={() => {
|
|
173
|
+
if (typeof button.handler !== "undefined") {
|
|
174
|
+
button.handler();
|
|
175
|
+
}
|
|
176
|
+
close();
|
|
177
|
+
}}
|
|
178
|
+
/>
|
|
179
|
+
{/each}
|
|
180
|
+
</div>
|
|
181
|
+
{/if}
|
|
182
|
+
</div>
|
|
183
|
+
</button>
|
|
184
|
+
<div
|
|
185
|
+
transition:fade|global={{
|
|
186
|
+
duration: instant ? 0 : duration,
|
|
187
|
+
}}
|
|
188
|
+
class="absolute"
|
|
189
|
+
id="arrow"
|
|
190
|
+
data-popper-arrow
|
|
191
|
+
>
|
|
192
|
+
<div class="absolute" id="arrow_face" />
|
|
193
|
+
</div>
|
|
194
|
+
</Popover>
|
|
195
|
+
|
|
196
|
+
<style global>
|
|
197
|
+
:root {
|
|
198
|
+
--tooltip-bg-color: rgba(14, 20, 24, 0.8);
|
|
199
|
+
}
|
|
200
|
+
|
|
201
|
+
.tooltip-bg {
|
|
202
|
+
background-color: var(--tooltip-bg-color);
|
|
203
|
+
}
|
|
204
|
+
|
|
205
|
+
.svelte-easy-popover[data-popper-placement^="top"] > #arrow {
|
|
206
|
+
bottom: 0px;
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
.svelte-easy-popover[data-popper-placement^="top"] > #arrow > #arrow_face {
|
|
210
|
+
transform: translateX(-10px);
|
|
211
|
+
border-left: 10px solid transparent;
|
|
212
|
+
border-right: 10px solid transparent;
|
|
213
|
+
|
|
214
|
+
border-top: 10px solid var(--tooltip-bg-color);
|
|
215
|
+
}
|
|
216
|
+
|
|
217
|
+
.svelte-easy-popover[data-popper-placement^="bottom"] > #arrow {
|
|
218
|
+
top: -10px;
|
|
219
|
+
}
|
|
220
|
+
|
|
221
|
+
.svelte-easy-popover[data-popper-placement^="bottom"] > #arrow > #arrow_face {
|
|
222
|
+
transform: translateX(-10px);
|
|
223
|
+
border-left: 10px solid transparent;
|
|
224
|
+
border-right: 10px solid transparent;
|
|
225
|
+
|
|
226
|
+
border-bottom: 10px solid var(--tooltip-bg-color);
|
|
227
|
+
}
|
|
228
|
+
|
|
229
|
+
.svelte-easy-popover[data-popper-placement^="left"] > #arrow {
|
|
230
|
+
right: 0px;
|
|
231
|
+
}
|
|
232
|
+
|
|
233
|
+
.svelte-easy-popover[data-popper-placement^="left"] > #arrow > #arrow_face {
|
|
234
|
+
transform: translateY(-10px);
|
|
235
|
+
border-top: 10px solid transparent;
|
|
236
|
+
border-bottom: 10px solid transparent;
|
|
237
|
+
|
|
238
|
+
border-left: 10px solid var(--tooltip-bg-color);
|
|
239
|
+
}
|
|
240
|
+
|
|
241
|
+
.svelte-easy-popover[data-popper-placement^="right"] > #arrow {
|
|
242
|
+
left: -9px;
|
|
243
|
+
}
|
|
244
|
+
|
|
245
|
+
.svelte-easy-popover[data-popper-placement^="right"] > #arrow > #arrow_face {
|
|
246
|
+
transform: translateY(-10px);
|
|
247
|
+
border-top: 10px solid transparent;
|
|
248
|
+
border-bottom: 10px solid transparent;
|
|
249
|
+
|
|
250
|
+
border-right: 10px solid var(--tooltip-bg-color);
|
|
251
|
+
}
|
|
252
|
+
</style>
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
import { SvelteComponent } from "svelte";
|
|
2
|
+
declare const __propDef: {
|
|
3
|
+
props: {
|
|
4
|
+
[x: string]: any;
|
|
5
|
+
text?: string | undefined;
|
|
6
|
+
placement?: string | undefined;
|
|
7
|
+
duration?: number | undefined;
|
|
8
|
+
delay?: number | undefined;
|
|
9
|
+
instant?: boolean | undefined;
|
|
10
|
+
nowrap?: boolean | undefined;
|
|
11
|
+
buttons?: any[] | undefined;
|
|
12
|
+
triggerEvents?: string[] | undefined;
|
|
13
|
+
referenceElement: HTMLElement;
|
|
14
|
+
component?: SvelteComponent | undefined;
|
|
15
|
+
};
|
|
16
|
+
events: {
|
|
17
|
+
[evt: string]: CustomEvent<any>;
|
|
18
|
+
};
|
|
19
|
+
slots: {};
|
|
20
|
+
};
|
|
21
|
+
export type MoltenTooltipProps = typeof __propDef.props;
|
|
22
|
+
export type MoltenTooltipEvents = typeof __propDef.events;
|
|
23
|
+
export type MoltenTooltipSlots = typeof __propDef.slots;
|
|
24
|
+
export default class MoltenTooltip extends SvelteComponent<MoltenTooltipProps, MoltenTooltipEvents, MoltenTooltipSlots> {
|
|
25
|
+
}
|
|
26
|
+
export {};
|
package/dist/index.d.ts
CHANGED
|
@@ -9,3 +9,5 @@ export { default as MeltSlider } from "./MeltSlider.svelte";
|
|
|
9
9
|
export { default as MeltSelect } from "./MeltSelect.svelte";
|
|
10
10
|
export { default as MoltenButton } from "./MoltenButton.svelte";
|
|
11
11
|
export { default as MoltenInput } from "./MoltenInput.svelte";
|
|
12
|
+
export { default as MoltenTooltip } from "./MoltenTooltip.svelte";
|
|
13
|
+
export { default as MoltenPushButton } from "./MoltenPushButton.svelte";
|
package/dist/index.js
CHANGED
|
@@ -9,3 +9,5 @@ export { default as MeltSlider } from "./MeltSlider.svelte";
|
|
|
9
9
|
export { default as MeltSelect } from "./MeltSelect.svelte";
|
|
10
10
|
export { default as MoltenButton } from "./MoltenButton.svelte";
|
|
11
11
|
export { default as MoltenInput } from "./MoltenInput.svelte";
|
|
12
|
+
export { default as MoltenTooltip } from "./MoltenTooltip.svelte";
|
|
13
|
+
export { default as MoltenPushButton } from "./MoltenPushButton.svelte";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@intechstudio/grid-uikit",
|
|
3
|
-
"version": "0.0.
|
|
3
|
+
"version": "0.0.8",
|
|
4
4
|
"scripts": {
|
|
5
5
|
"dev": "vite dev",
|
|
6
6
|
"build": "vite build && npm run package",
|
|
@@ -25,6 +25,7 @@
|
|
|
25
25
|
],
|
|
26
26
|
"dependencies": {
|
|
27
27
|
"@melt-ui/svelte": "^0.42.0",
|
|
28
|
+
"svelte-easy-popover": "^1.0.0",
|
|
28
29
|
"tailwindcss": "^3.1.8"
|
|
29
30
|
},
|
|
30
31
|
"peerDependencies": {
|