poe-svelte-ui-lib 1.2.9 → 1.2.10
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 +78 -80
- package/dist/Switch/Switch.svelte +74 -38
- package/package.json +1 -1
|
@@ -66,90 +66,88 @@
|
|
|
66
66
|
</script>
|
|
67
67
|
|
|
68
68
|
<div class={twMerge(`relative flex w-full flex-col items-center `, wrapperClass)}>
|
|
69
|
-
<
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
`relative m-0 inline-block w-full items-center rounded-2xl
|
|
69
|
+
<button
|
|
70
|
+
{id}
|
|
71
|
+
class="{twMerge(
|
|
72
|
+
`relative m-0 inline-block w-full items-center rounded-2xl
|
|
74
73
|
px-2 py-1 font-semibold transition duration-200 select-none
|
|
75
74
|
${content.icon && !content.name ? 'bg-transparent p-0' : 'bg-blue border border-(--bg-color) '}
|
|
76
75
|
${disabled ? 'cursor-not-allowed opacity-50' : 'cursor-pointer active:scale-97'} `,
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
76
|
+
componentClass,
|
|
77
|
+
)} bg-(--bg-color)"
|
|
78
|
+
onclick={handleClick}
|
|
79
|
+
{disabled}
|
|
80
|
+
aria-label={content.name}
|
|
81
|
+
onmouseenter={() => {
|
|
82
|
+
if (content.info?.text) showInfo = true
|
|
83
|
+
}}
|
|
84
|
+
onmouseleave={() => {
|
|
85
|
+
if (content.info?.text) showInfo = false
|
|
86
|
+
}}
|
|
87
|
+
>
|
|
88
|
+
<span class=" flex flex-row items-center justify-center gap-2">
|
|
89
|
+
{#if content?.icon}
|
|
90
|
+
<span
|
|
91
|
+
class={`flex items-center justify-center overflow-visible
|
|
93
92
|
${content.name ? 'h-8 w-8' : `${svgSize()}`} [&_svg]:h-full [&_svg]:max-h-full [&_svg]:w-full [&_svg]:max-w-full`}
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
93
|
+
>
|
|
94
|
+
{#if typeof content?.icon === 'string'}
|
|
95
|
+
{@html content.icon}
|
|
96
|
+
{:else}
|
|
97
|
+
{@const IconComponent = content?.icon}
|
|
98
|
+
<IconComponent />
|
|
99
|
+
{/if}
|
|
100
|
+
</span>
|
|
101
|
+
{/if}
|
|
103
102
|
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
103
|
+
{#if content.name}
|
|
104
|
+
<div class="flex-1">
|
|
105
|
+
{content.name}
|
|
106
|
+
{#if keyBind}
|
|
107
|
+
<div class="text-xs opacity-70">
|
|
108
|
+
({keyBind.ctrlKey ? 'Ctrl+' : ''}{keyBind.shiftKey ? 'Shift+' : ''}{keyBind.altKey ? 'Alt+' : ''}{keyBind.key})
|
|
109
|
+
</div>
|
|
110
|
+
{/if}
|
|
111
|
+
</div>
|
|
112
|
+
{/if}
|
|
113
|
+
</span>
|
|
114
|
+
</button>
|
|
116
115
|
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
</div>
|
|
116
|
+
{#if showInfo && content.info?.side === 'top'}
|
|
117
|
+
<div
|
|
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'}
|
|
144
|
+
<div
|
|
145
|
+
transition:fly={{ x: -15, duration: 300 }}
|
|
146
|
+
class="absolute top-1/2 left-full z-50 ml-2 w-max max-w-xs rounded-md bg-(--container-color) px-3 py-1 text-sm shadow-lg"
|
|
147
|
+
style="transform: translateY(-50%);"
|
|
148
|
+
>
|
|
149
|
+
{content.info?.text}
|
|
150
|
+
<div class="absolute top-1/2 -left-2 h-2 w-2 translate-x-1/2 -translate-y-1/2 -rotate-45 transform bg-(--container-color)"></div>
|
|
151
|
+
</div>
|
|
152
|
+
{/if}
|
|
155
153
|
</div>
|
|
@@ -9,7 +9,7 @@
|
|
|
9
9
|
wrapperClass = '',
|
|
10
10
|
label = { name: '', class: '', captionLeft: '', captionRight: '' },
|
|
11
11
|
height = '2rem',
|
|
12
|
-
type = '
|
|
12
|
+
type = 'vertical',
|
|
13
13
|
value = $bindable(),
|
|
14
14
|
onChange = () => {},
|
|
15
15
|
}: ISwitchProps = $props()
|
|
@@ -17,7 +17,11 @@
|
|
|
17
17
|
const options = [1, 2]
|
|
18
18
|
let checked = $derived(value === options[1])
|
|
19
19
|
|
|
20
|
-
let knobTransform = $derived(
|
|
20
|
+
let knobTransform = $derived(
|
|
21
|
+
checked
|
|
22
|
+
? `${type === 'horizontal' ? `translateX(calc(${height}))` : `translateY(calc(-${height}/2))`}`
|
|
23
|
+
: `${type === 'horizontal' ? 'translateX(0)' : `translateY(calc(${height}/2))`}`,
|
|
24
|
+
)
|
|
21
25
|
|
|
22
26
|
$effect(() => {
|
|
23
27
|
if (value === undefined || value === null) value = options[0]
|
|
@@ -45,47 +49,79 @@
|
|
|
45
49
|
)
|
|
46
50
|
</script>
|
|
47
51
|
|
|
48
|
-
|
|
49
|
-
{
|
|
50
|
-
|
|
51
|
-
|
|
52
|
+
{#if type !== 'checkbox'}
|
|
53
|
+
<div class={twMerge(`bg-blue relative flex w-full flex-col items-center justify-center`, wrapperClass)}>
|
|
54
|
+
{#if label.name}
|
|
55
|
+
<h5 class={twMerge(`w-full px-4 text-center`, label.class)}>{label.name}</h5>
|
|
56
|
+
{/if}
|
|
57
|
+
|
|
58
|
+
<div class="relative flex w-full grow items-center justify-center bg-transparent">
|
|
59
|
+
{#if type === 'horizontal'}
|
|
60
|
+
<button
|
|
61
|
+
class="mr-2 {disabled ? 'opacity-60' : 'cursor-pointer'}"
|
|
62
|
+
style="width: {maxCaptionWidth}; text-align: end;"
|
|
63
|
+
onclick={() => handleCaptionClick(1)}>{label.captionLeft}</button
|
|
64
|
+
>
|
|
65
|
+
{/if}
|
|
52
66
|
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
class="mr-2 {disabled ? 'opacity-60' : 'cursor-pointer'}"
|
|
56
|
-
style="width: {maxCaptionWidth}; text-align: end;"
|
|
57
|
-
onclick={() => handleCaptionClick(1)}>{label.captionLeft}</button
|
|
58
|
-
>
|
|
59
|
-
<label
|
|
60
|
-
class="relative flex items-center justify-between rounded-full border
|
|
67
|
+
<label
|
|
68
|
+
class="relative flex items-center justify-between rounded-full border
|
|
61
69
|
{checked ? 'border-(--bg-color)' : 'border-(--gray-color)'}
|
|
62
70
|
{disabled ? 'opacity-60' : ''}"
|
|
63
|
-
>
|
|
64
|
-
<input
|
|
65
|
-
{id}
|
|
66
|
-
type="checkbox"
|
|
67
|
-
class="absolute left-1/2 h-full w-full -translate-x-1/2 cursor-pointer appearance-none rounded-md"
|
|
68
|
-
bind:checked
|
|
69
|
-
{disabled}
|
|
70
|
-
onchange={handleToggle}
|
|
71
|
-
/>
|
|
72
|
-
<span
|
|
73
|
-
class="relative flex items-center rounded-full transition-all duration-250
|
|
74
|
-
{checked ? 'bg-(--bg-color)' : 'bg-(--gray-color)'}
|
|
75
|
-
{disabled ? '' : 'cursor-pointer'}"
|
|
76
|
-
style="width: {`calc(${height} * 2)`}; height: {height};"
|
|
77
71
|
>
|
|
72
|
+
<input
|
|
73
|
+
{id}
|
|
74
|
+
type="checkbox"
|
|
75
|
+
class="absolute left-1/2 h-full w-full -translate-x-1/2 cursor-pointer appearance-none rounded-md"
|
|
76
|
+
bind:checked
|
|
77
|
+
{disabled}
|
|
78
|
+
onchange={handleToggle}
|
|
79
|
+
/>
|
|
78
80
|
<span
|
|
79
|
-
class="
|
|
81
|
+
class="relative flex items-center rounded-full transition-all duration-250
|
|
82
|
+
{checked ? 'bg-(--bg-color)' : 'bg-(--gray-color)'}
|
|
83
|
+
{disabled ? '' : 'cursor-pointer'}"
|
|
84
|
+
style="{type === 'horizontal' ? 'width' : 'height'}: {`calc(${height} * 2)`}; {type === 'horizontal' ? 'height' : 'width'}: {height};"
|
|
85
|
+
>
|
|
86
|
+
<span
|
|
87
|
+
class="absolute rounded-full bg-(--back-color) transition-all duration-250
|
|
80
88
|
{disabled ? 'opacity-60' : 'cursor-pointer'}"
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
89
|
+
style="width: {`calc(${height} * 0.8)`}; height: {`calc(${height} * 0.8)`}; margin: 0 {`calc(${height} * 0.1)`}; transform: {knobTransform};"
|
|
90
|
+
></span>
|
|
91
|
+
</span>
|
|
92
|
+
</label>
|
|
93
|
+
{#if type === 'horizontal'}
|
|
94
|
+
<button
|
|
95
|
+
class="ml-2 {disabled ? 'opacity-60' : 'cursor-pointer'}"
|
|
96
|
+
style="width: {maxCaptionWidth}; text-align: start;"
|
|
97
|
+
onclick={() => handleCaptionClick(2)}>{label.captionRight}</button
|
|
98
|
+
>
|
|
99
|
+
{/if}
|
|
100
|
+
</div>
|
|
101
|
+
</div>
|
|
102
|
+
{:else}
|
|
103
|
+
<div class={twMerge('bg-blue m-1 flex items-center justify-center gap-2', wrapperClass)}>
|
|
104
|
+
<input
|
|
105
|
+
{id}
|
|
106
|
+
type="checkbox"
|
|
107
|
+
bind:checked
|
|
108
|
+
{disabled}
|
|
109
|
+
class="
|
|
110
|
+
relative size-8 cursor-pointer appearance-none rounded-2xl border border-(--bg-color)
|
|
111
|
+
bg-white transition duration-300 after:origin-bottom-left after:opacity-0
|
|
112
|
+
checked:border-(--bg-color)
|
|
113
|
+
checked:bg-(--bg-color) checked:after:absolute checked:after:left-[5.5px]
|
|
114
|
+
checked:after:h-[13.5px] checked:after:w-[7.5px] checked:after:rotate-43
|
|
115
|
+
checked:after:border-2 checked:after:border-t-0
|
|
116
|
+
checked:after:border-l-0 checked:after:border-solid
|
|
117
|
+
checked:after:border-white checked:after:opacity-100
|
|
118
|
+
checked:after:content-[''] hover:shadow-md
|
|
119
|
+
disabled:cursor-not-allowed disabled:opacity-70
|
|
120
|
+
"
|
|
121
|
+
onchange={handleToggle}
|
|
122
|
+
/>
|
|
123
|
+
<label for={id} class={twMerge("{disabled ? 'cursor-not-allowed opacity-70' : 'cursor-pointer'} ml-1 select-none", label.class)}>
|
|
124
|
+
{label.name}
|
|
84
125
|
</label>
|
|
85
|
-
<button
|
|
86
|
-
class="ml-2 {disabled ? 'opacity-60' : 'cursor-pointer'}"
|
|
87
|
-
style="width: {maxCaptionWidth}; text-align: start;"
|
|
88
|
-
onclick={() => handleCaptionClick(2)}>{label.captionRight}</button
|
|
89
|
-
>
|
|
90
126
|
</div>
|
|
91
|
-
|
|
127
|
+
{/if}
|