noph-ui 0.43.0 → 0.43.1
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.
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import { onMount } from 'svelte'
|
|
3
3
|
import { MediaQuery } from 'svelte/reactivity'
|
|
4
|
-
import { expandedWidths, parseMotion } from './buttonGroup.js'
|
|
4
|
+
import { expandedWidths, parseMotion, resolveItem } from './buttonGroup.js'
|
|
5
5
|
import type { ButtonGroupProps } from './types.js'
|
|
6
6
|
|
|
7
7
|
let {
|
|
@@ -31,9 +31,9 @@
|
|
|
31
31
|
|
|
32
32
|
const items = () =>
|
|
33
33
|
element
|
|
34
|
-
? (Array.from(element.children) as HTMLElement[])
|
|
35
|
-
(item) => !item.hasAttribute('popover')
|
|
36
|
-
|
|
34
|
+
? (Array.from(element.children) as HTMLElement[])
|
|
35
|
+
.filter((item) => !item.hasAttribute('popover'))
|
|
36
|
+
.map(resolveItem)
|
|
37
37
|
: []
|
|
38
38
|
|
|
39
39
|
const motion = () =>
|
|
@@ -307,16 +307,34 @@
|
|
|
307
307
|
background-color: var(--np-filled-icon-button-container-color, var(--np-color-primary));
|
|
308
308
|
}
|
|
309
309
|
.filled.toggle {
|
|
310
|
-
--np-ripple-hover-color: var(
|
|
311
|
-
|
|
312
|
-
|
|
313
|
-
|
|
310
|
+
--np-ripple-hover-color: var(
|
|
311
|
+
--np-filled-icon-button-unselected-icon-color,
|
|
312
|
+
var(--np-color-on-surface-variant)
|
|
313
|
+
);
|
|
314
|
+
--np-ripple-pressed-color: var(
|
|
315
|
+
--np-filled-icon-button-unselected-icon-color,
|
|
316
|
+
var(--np-color-on-surface-variant)
|
|
317
|
+
);
|
|
318
|
+
color: var(--np-filled-icon-button-unselected-icon-color, var(--np-color-on-surface-variant));
|
|
319
|
+
background-color: var(
|
|
320
|
+
--np-filled-icon-button-unselected-container-color,
|
|
321
|
+
var(--np-color-surface-container)
|
|
322
|
+
);
|
|
314
323
|
}
|
|
315
324
|
.filled.selected {
|
|
316
|
-
--np-ripple-hover-color: var(
|
|
317
|
-
|
|
318
|
-
|
|
319
|
-
|
|
325
|
+
--np-ripple-hover-color: var(
|
|
326
|
+
--np-filled-icon-button-selected-icon-color,
|
|
327
|
+
var(--np-color-on-primary)
|
|
328
|
+
);
|
|
329
|
+
--np-ripple-pressed-color: var(
|
|
330
|
+
--np-filled-icon-button-selected-icon-color,
|
|
331
|
+
var(--np-color-on-primary)
|
|
332
|
+
);
|
|
333
|
+
color: var(--np-filled-icon-button-selected-icon-color, var(--np-color-on-primary));
|
|
334
|
+
background-color: var(
|
|
335
|
+
--np-filled-icon-button-selected-container-color,
|
|
336
|
+
var(--np-color-primary)
|
|
337
|
+
);
|
|
320
338
|
}
|
|
321
339
|
|
|
322
340
|
.tonal {
|
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
export declare const resolveItem: (item: HTMLElement) => HTMLElement;
|
|
1
2
|
export declare const expandedWidths: (widths: number[], index: number, expandedRatio: number, compressionLimit: number) => number[];
|
|
2
3
|
export declare const parseMotion: (token: string) => {
|
|
3
4
|
duration: number;
|
|
@@ -1,3 +1,13 @@
|
|
|
1
|
+
export const resolveItem = (item) => {
|
|
2
|
+
let current = item;
|
|
3
|
+
while (current.ownerDocument.defaultView?.getComputedStyle(current).display === 'contents') {
|
|
4
|
+
const child = Array.from(current.children).find((candidate) => !candidate.hasAttribute('popover'));
|
|
5
|
+
if (!child)
|
|
6
|
+
return current;
|
|
7
|
+
current = child;
|
|
8
|
+
}
|
|
9
|
+
return current;
|
|
10
|
+
};
|
|
1
11
|
export const expandedWidths = (widths, index, expandedRatio, compressionLimit) => {
|
|
2
12
|
const next = [...widths];
|
|
3
13
|
if (widths.length < 2 || index < 0 || index >= widths.length || expandedRatio <= 0)
|