@dorsk/tsumikit 0.59.0 → 0.59.2
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.
|
@@ -99,20 +99,25 @@
|
|
|
99
99
|
{/snippet}
|
|
100
100
|
{#snippet children({ close })}
|
|
101
101
|
<div class="detail">
|
|
102
|
-
<
|
|
102
|
+
<div class="detail-head">
|
|
103
|
+
<Text variant="code" size="sm" class="detail-name">{f.name}</Text>
|
|
104
|
+
{#if onremove}
|
|
105
|
+
<Button
|
|
106
|
+
variant="ghost"
|
|
107
|
+
box="sm"
|
|
108
|
+
hoverDanger
|
|
109
|
+
aria-label={removeLabel}
|
|
110
|
+
title={removeLabel}
|
|
111
|
+
onclick={() => {
|
|
112
|
+
close();
|
|
113
|
+
onremove?.(i);
|
|
114
|
+
}}
|
|
115
|
+
>
|
|
116
|
+
<Icon name="trash" size={16} />
|
|
117
|
+
</Button>
|
|
118
|
+
{/if}
|
|
119
|
+
</div>
|
|
103
120
|
{#if f.size !== undefined}<Text size="xs" tone="faint">{fmt(f.size)}</Text>{/if}
|
|
104
|
-
{#if onremove}
|
|
105
|
-
<Button
|
|
106
|
-
size="sm"
|
|
107
|
-
variant="danger"
|
|
108
|
-
onclick={() => {
|
|
109
|
-
close();
|
|
110
|
-
onremove?.(i);
|
|
111
|
-
}}
|
|
112
|
-
>
|
|
113
|
-
{removeLabel}
|
|
114
|
-
</Button>
|
|
115
|
-
{/if}
|
|
116
121
|
</div>
|
|
117
122
|
{/snippet}
|
|
118
123
|
</Popover>
|
|
@@ -167,7 +172,20 @@
|
|
|
167
172
|
padding: var(--sp-1);
|
|
168
173
|
max-width: 16rem;
|
|
169
174
|
}
|
|
175
|
+
.detail-head {
|
|
176
|
+
display: flex;
|
|
177
|
+
align-items: flex-start;
|
|
178
|
+
gap: var(--sp-2);
|
|
179
|
+
width: 100%;
|
|
180
|
+
}
|
|
181
|
+
.detail-head > :global(button) {
|
|
182
|
+
flex: none;
|
|
183
|
+
margin-inline-start: auto;
|
|
184
|
+
}
|
|
170
185
|
.detail :global(.detail-name) {
|
|
171
186
|
overflow-wrap: anywhere;
|
|
172
187
|
}
|
|
188
|
+
.chip :global(.action) {
|
|
189
|
+
font-size: 1.4em;
|
|
190
|
+
}
|
|
173
191
|
</style>
|
|
@@ -158,6 +158,58 @@
|
|
|
158
158
|
top: 0;
|
|
159
159
|
height: auto;
|
|
160
160
|
}
|
|
161
|
+
/* Until the field grows into a bar, the adornments fill it inside its 1px
|
|
162
|
+
border, their outer corners following the field's; inner corners go square. */
|
|
163
|
+
.ig:not(.ig-bar) .ig-adorn {
|
|
164
|
+
--ig-fuse-r: calc(var(--ig-radius) - 1px);
|
|
165
|
+
top: 1px;
|
|
166
|
+
bottom: 1px;
|
|
167
|
+
height: auto;
|
|
168
|
+
padding-inline: 0;
|
|
169
|
+
}
|
|
170
|
+
.ig:not(.ig-bar) .ig-leading {
|
|
171
|
+
inset-inline-start: 1px;
|
|
172
|
+
}
|
|
173
|
+
.ig:not(.ig-bar) .ig-trailing {
|
|
174
|
+
inset-inline-end: 1px;
|
|
175
|
+
}
|
|
176
|
+
.ig:not(.ig-bar) .ig-adorn > :global(*) {
|
|
177
|
+
align-self: stretch;
|
|
178
|
+
height: auto;
|
|
179
|
+
min-height: 0;
|
|
180
|
+
--btn-size: 100%;
|
|
181
|
+
--btn-radius: 0;
|
|
182
|
+
--pop-trigger-radius: 0;
|
|
183
|
+
border-radius: 0;
|
|
184
|
+
}
|
|
185
|
+
.ig:not(.ig-bar) .ig-adorn > :global(:is(.btn-box, .btn-square, .btn-icon, .icon-only)) {
|
|
186
|
+
width: auto;
|
|
187
|
+
min-width: 0;
|
|
188
|
+
aspect-ratio: 1;
|
|
189
|
+
}
|
|
190
|
+
.ig:not(.ig-bar) .ig-leading > :global(:first-child) {
|
|
191
|
+
--btn-radius: var(--ig-fuse-r) 0 0 var(--ig-fuse-r);
|
|
192
|
+
border-radius: var(--ig-fuse-r) 0 0 var(--ig-fuse-r);
|
|
193
|
+
}
|
|
194
|
+
.ig:not(.ig-bar) .ig-trailing > :global(:last-child) {
|
|
195
|
+
--btn-radius: 0 var(--ig-fuse-r) var(--ig-fuse-r) 0;
|
|
196
|
+
border-radius: 0 var(--ig-fuse-r) var(--ig-fuse-r) 0;
|
|
197
|
+
}
|
|
198
|
+
.ig:not(.ig-bar) .ig-adorn :global(.split-main) {
|
|
199
|
+
--btn-radius: 0;
|
|
200
|
+
}
|
|
201
|
+
.ig:not(.ig-bar) .ig-adorn :global(.split-caret) {
|
|
202
|
+
--pop-trigger-radius: 0;
|
|
203
|
+
}
|
|
204
|
+
.ig:not(.ig-bar) .ig-adorn :global(.split-caret .pop-trigger) {
|
|
205
|
+
height: 100%;
|
|
206
|
+
}
|
|
207
|
+
.ig:not(.ig-bar) .ig-leading > :global(:first-child .split-main) {
|
|
208
|
+
--btn-radius: var(--ig-fuse-r) 0 0 var(--ig-fuse-r);
|
|
209
|
+
}
|
|
210
|
+
.ig:not(.ig-bar) .ig-trailing > :global(:last-child .split-caret) {
|
|
211
|
+
--pop-trigger-radius: 0 var(--ig-fuse-r) var(--ig-fuse-r) 0;
|
|
212
|
+
}
|
|
161
213
|
.ig-bar .ig-field {
|
|
162
214
|
padding-bottom: var(--ig-h);
|
|
163
215
|
}
|
package/package.json
CHANGED