@bunnix/components 0.11.0 → 0.11.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.
- package/package.json +1 -1
- package/src/core/core.css +1 -1
- package/src/core/inputs.mjs +28 -7
package/package.json
CHANGED
package/src/core/core.css
CHANGED
|
@@ -16,7 +16,7 @@
|
|
|
16
16
|
--color-fg-primary: light-dark(black, white);
|
|
17
17
|
--color-fg-primary-dimmed: light-dark(#868686, #ebebeb);
|
|
18
18
|
--color-fg-primary-inverted: light-dark(white, black);
|
|
19
|
-
--color-fg-secondary: light-dark(#
|
|
19
|
+
--color-fg-secondary: light-dark(#737373, #aaa);
|
|
20
20
|
--color-fg-tertiary: light-dark(#888, #777);
|
|
21
21
|
--color-fg-on-danger: light-dark(#fff, #fff);
|
|
22
22
|
|
package/src/core/inputs.mjs
CHANGED
|
@@ -149,6 +149,7 @@ function getTextAreaVerticalInset(node) {
|
|
|
149
149
|
function resizeTextArea(node, minLines, maxLines) {
|
|
150
150
|
if (!node) return;
|
|
151
151
|
|
|
152
|
+
node.style.height = "auto";
|
|
152
153
|
const metrics = getTextAreaHeightMetrics({
|
|
153
154
|
lineHeight: getLineHeightPx(node),
|
|
154
155
|
scrollHeight: node.scrollHeight,
|
|
@@ -157,7 +158,6 @@ function resizeTextArea(node, minLines, maxLines) {
|
|
|
157
158
|
verticalInset: getTextAreaVerticalInset(node),
|
|
158
159
|
});
|
|
159
160
|
|
|
160
|
-
node.style.height = "auto";
|
|
161
161
|
node.style.height = `${metrics.nextHeight}px`;
|
|
162
162
|
node.style.overflowY = metrics.shouldScroll ? "auto" : "hidden";
|
|
163
163
|
}
|
|
@@ -397,8 +397,10 @@ const PickerCore = (props, _) => {
|
|
|
397
397
|
Menu({
|
|
398
398
|
...(anchor ? { anchor } : {}),
|
|
399
399
|
items: menuOptions,
|
|
400
|
-
trigger: ({ toggle }) =>
|
|
401
|
-
|
|
400
|
+
trigger: ({ toggle }) => {
|
|
401
|
+
const triggerColor = finalTriggerProps.style?.color;
|
|
402
|
+
|
|
403
|
+
return button(
|
|
402
404
|
{
|
|
403
405
|
...finalTriggerProps,
|
|
404
406
|
type: "button",
|
|
@@ -416,16 +418,35 @@ const PickerCore = (props, _) => {
|
|
|
416
418
|
div(
|
|
417
419
|
{ class: "picker-selection" },
|
|
418
420
|
...(selectedItem?.icon
|
|
419
|
-
? [
|
|
421
|
+
? [
|
|
422
|
+
Icon({
|
|
423
|
+
name: selectedItem.icon,
|
|
424
|
+
size: 16,
|
|
425
|
+
...(triggerColor ? { color: triggerColor } : {}),
|
|
426
|
+
}),
|
|
427
|
+
]
|
|
420
428
|
: []),
|
|
421
429
|
...(selectedItem
|
|
422
|
-
? [
|
|
430
|
+
? [
|
|
431
|
+
Text(
|
|
432
|
+
{
|
|
433
|
+
weight: "heavy",
|
|
434
|
+
...(triggerColor ? { color: triggerColor } : {}),
|
|
435
|
+
},
|
|
436
|
+
selectedItem.text ?? selectedItem.key,
|
|
437
|
+
),
|
|
438
|
+
]
|
|
423
439
|
: []),
|
|
424
440
|
),
|
|
425
441
|
Spacer(),
|
|
426
|
-
Icon({
|
|
442
|
+
Icon({
|
|
443
|
+
name: "chevron_down",
|
|
444
|
+
size: 16,
|
|
445
|
+
...(triggerColor ? { color: triggerColor } : { color: "secondary" }),
|
|
446
|
+
}),
|
|
427
447
|
),
|
|
428
|
-
)
|
|
448
|
+
);
|
|
449
|
+
},
|
|
429
450
|
})
|
|
430
451
|
)({ minHeight: 32, textSize: "1rem", ...triggerProps }),
|
|
431
452
|
),
|