poe-svelte-ui-lib 1.5.15 → 1.5.16
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/Button/Button.svelte +33 -32
- package/dist/Table/Table.svelte +4 -1
- package/package.json +1 -1
|
@@ -21,6 +21,33 @@
|
|
|
21
21
|
|
|
22
22
|
let showInfo = $state(false)
|
|
23
23
|
|
|
24
|
+
let tooltipConfig = $derived({
|
|
25
|
+
top: {
|
|
26
|
+
pos: 'bottom-full left-1/2 mb-2',
|
|
27
|
+
tr: 'translateX(-50%)',
|
|
28
|
+
arr: 'top-full left-1/2 -translate-x-1/2 -translate-y-1/2 rotate-45',
|
|
29
|
+
off: 'y:-15',
|
|
30
|
+
},
|
|
31
|
+
bottom: {
|
|
32
|
+
pos: 'top-full left-1/2 mt-2',
|
|
33
|
+
tr: 'translateX(-50%)',
|
|
34
|
+
arr: 'bottom-full left-1/2 -translate-x-1/2 translate-y-1/2 rotate-45',
|
|
35
|
+
off: 'y:15',
|
|
36
|
+
},
|
|
37
|
+
left: {
|
|
38
|
+
pos: 'top-1/2 right-full mr-2',
|
|
39
|
+
tr: 'translateY(-50%)',
|
|
40
|
+
arr: 'top-1/2 -right-2 -translate-x-1/2 -translate-y-1/2 rotate-45',
|
|
41
|
+
off: 'x:15',
|
|
42
|
+
},
|
|
43
|
+
right: {
|
|
44
|
+
pos: 'top-1/2 left-full ml-2',
|
|
45
|
+
tr: 'translateY(-50%)',
|
|
46
|
+
arr: 'top-1/2 -left-2 translate-x-1/2 -translate-y-1/2 rotate-45 ',
|
|
47
|
+
off: 'x:-15',
|
|
48
|
+
},
|
|
49
|
+
})
|
|
50
|
+
|
|
24
51
|
const svgSize = $derived(() => {
|
|
25
52
|
const widthClass = twMerge(
|
|
26
53
|
wrapperClass.split(' ').find((cls: string) => cls.startsWith('w-')),
|
|
@@ -113,41 +140,15 @@
|
|
|
113
140
|
</div>
|
|
114
141
|
</button>
|
|
115
142
|
|
|
116
|
-
{#if showInfo && content.info?.side
|
|
117
|
-
|
|
118
|
-
transition:fly={{ y: -15, duration: 300 }}
|
|
119
|
-
class="absolute bottom-full left-1/2 z-50 mb-2 w-max max-w-xs rounded-md bg-(--container-color) px-3 py-1 text-sm shadow-lg"
|
|
120
|
-
style="transform: translateX(-50%);"
|
|
121
|
-
>
|
|
122
|
-
{content.info?.text}
|
|
123
|
-
<div class="absolute top-full left-1/2 h-2 w-2 -translate-x-1/2 -translate-y-1/2 rotate-45 transform bg-(--container-color)"></div>
|
|
124
|
-
</div>
|
|
125
|
-
{:else if showInfo && content.info?.side === 'bottom'}
|
|
126
|
-
<div
|
|
127
|
-
transition:fly={{ y: 15, duration: 300 }}
|
|
128
|
-
class="absolute top-full left-1/2 z-50 mt-2 w-max max-w-xs rounded-md bg-(--container-color) px-3 py-1 text-sm shadow-lg"
|
|
129
|
-
style="transform: translateX(-50%);"
|
|
130
|
-
>
|
|
131
|
-
{content.info?.text}
|
|
132
|
-
<div class="absolute bottom-full left-1/2 h-2 w-2 -translate-x-1/2 translate-y-1/2 rotate-45 transform bg-(--container-color)"></div>
|
|
133
|
-
</div>
|
|
134
|
-
{:else if showInfo && content.info?.side === 'left'}
|
|
135
|
-
<div
|
|
136
|
-
transition:fly={{ x: 15, duration: 300 }}
|
|
137
|
-
class="absolute top-1/2 right-full z-50 mr-2 w-max max-w-xs rounded-md bg-(--container-color) px-3 py-1 text-sm shadow-lg"
|
|
138
|
-
style="transform: translateY(-50%);"
|
|
139
|
-
>
|
|
140
|
-
{content.info?.text}
|
|
141
|
-
<div class="absolute top-1/2 -right-2 h-2 w-2 -translate-x-1/2 -translate-y-1/2 rotate-45 transform bg-(--container-color)"></div>
|
|
142
|
-
</div>
|
|
143
|
-
{:else if showInfo && content.info?.side === 'right'}
|
|
143
|
+
{#if showInfo && content.info?.side && tooltipConfig[content.info?.side]}
|
|
144
|
+
{@const config = tooltipConfig[content.info?.side]}
|
|
144
145
|
<div
|
|
145
|
-
transition:fly={{
|
|
146
|
-
class=
|
|
147
|
-
style=
|
|
146
|
+
transition:fly={{ [config.off.split(':')[0]]: parseInt(config.off.split(':')[1]), duration: 300 }}
|
|
147
|
+
class={`absolute z-50 w-max max-w-xs rounded-md bg-(--container-color) px-3 py-1 text-sm shadow-lg ${config.pos}`}
|
|
148
|
+
style={`transform: ${config.tr};`}
|
|
148
149
|
>
|
|
149
150
|
{content.info?.text}
|
|
150
|
-
<div class=
|
|
151
|
+
<div class={`absolute ${config.arr} h-2 w-2 transform bg-(--container-color)`}></div>
|
|
151
152
|
</div>
|
|
152
153
|
{/if}
|
|
153
154
|
</div>
|
package/dist/Table/Table.svelte
CHANGED
|
@@ -324,7 +324,10 @@
|
|
|
324
324
|
</div>
|
|
325
325
|
{#if dataBuffer.clearButton}
|
|
326
326
|
<button
|
|
327
|
-
class={twMerge(
|
|
327
|
+
class={twMerge(
|
|
328
|
+
'absolute right-2 bg-(--back-color) rounded-full p-1 cursor-pointer [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full',
|
|
329
|
+
dataBuffer.clearClass,
|
|
330
|
+
)}
|
|
328
331
|
onclick={() => (buffer = [])}
|
|
329
332
|
>
|
|
330
333
|
<ButtonClear />
|