@noxlovette/material 0.1.33 → 0.1.35
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.
|
@@ -17,9 +17,9 @@ Large badges are used for specific counts.
|
|
|
17
17
|
const styling = $derived(badge({ size }));
|
|
18
18
|
</script>
|
|
19
19
|
|
|
20
|
-
{#if number}
|
|
20
|
+
{#if size === 'sm' || number}
|
|
21
21
|
<div class={clsx(styling, className)} {...restProps}>
|
|
22
|
-
{#if size
|
|
22
|
+
{#if size !== 'sm' && number}
|
|
23
23
|
{number > 99 ? '99+' : number}
|
|
24
24
|
{/if}
|
|
25
25
|
</div>
|
|
@@ -3,6 +3,7 @@
|
|
|
3
3
|
import clsx from 'clsx';
|
|
4
4
|
import { listiem } from './theme.js';
|
|
5
5
|
import type { ListitemProps } from './types.js';
|
|
6
|
+
import Badge from '../../badge/Badge.svelte';
|
|
6
7
|
|
|
7
8
|
let {
|
|
8
9
|
leading,
|
|
@@ -10,6 +11,7 @@
|
|
|
10
11
|
headline = '',
|
|
11
12
|
supporting = '',
|
|
12
13
|
trailing,
|
|
14
|
+
badge,
|
|
13
15
|
selected,
|
|
14
16
|
class: className,
|
|
15
17
|
asChild = false,
|
|
@@ -36,9 +38,17 @@
|
|
|
36
38
|
<p class={cls.supporting()}>{supporting}</p>
|
|
37
39
|
{/if}
|
|
38
40
|
</div>
|
|
39
|
-
{#if trailing}
|
|
40
|
-
<div class={cls.trailing()}>
|
|
41
|
-
{
|
|
41
|
+
{#if trailing || badge !== undefined}
|
|
42
|
+
<div class={clsx(cls.trailing(), 'relative overflow-visible')}>
|
|
43
|
+
{#if trailing}
|
|
44
|
+
{@render trailing()}
|
|
45
|
+
{/if}
|
|
46
|
+
{#if badge !== undefined}
|
|
47
|
+
<Badge
|
|
48
|
+
size={badge === true ? 'sm' : 'lg'}
|
|
49
|
+
number={badge === true ? undefined : (badge as number)}
|
|
50
|
+
/>
|
|
51
|
+
{/if}
|
|
42
52
|
</div>
|
|
43
53
|
{/if}
|
|
44
54
|
{/snippet}
|
|
@@ -35,6 +35,12 @@ export type ListitemProps = {
|
|
|
35
35
|
* Optional trailing slot, typically used for an icon, metadata, or switch.
|
|
36
36
|
*/
|
|
37
37
|
trailing?: Snippet;
|
|
38
|
+
/**
|
|
39
|
+
* Badge to display in the trailing area.
|
|
40
|
+
* - `true`: renders a small dot badge (notification indicator).
|
|
41
|
+
* - `number`: renders a large badge with that count (capped at 99+).
|
|
42
|
+
*/
|
|
43
|
+
badge?: number | boolean;
|
|
38
44
|
/**
|
|
39
45
|
* The number of text lines to reserve space for.
|
|
40
46
|
* If not provided, it's calculated based on presence of overline and supporting text.
|
|
@@ -65,8 +65,19 @@ SupportingPane provides a layout with a main content area and a supporting side
|
|
|
65
65
|
let entered = $state(false);
|
|
66
66
|
let supportingVisible = $state(true);
|
|
67
67
|
let mobileSheetOpen = $state(false);
|
|
68
|
+
let isLargeScreen = $state(false);
|
|
68
69
|
const supportingId = 'supporting-pane';
|
|
69
70
|
|
|
71
|
+
$effect(() => {
|
|
72
|
+
const mq = window.matchMedia('(min-width: 1024px)');
|
|
73
|
+
isLargeScreen = mq.matches;
|
|
74
|
+
const handler = (e: MediaQueryListEvent) => {
|
|
75
|
+
isLargeScreen = e.matches;
|
|
76
|
+
};
|
|
77
|
+
mq.addEventListener('change', handler);
|
|
78
|
+
return () => mq.removeEventListener('change', handler);
|
|
79
|
+
});
|
|
80
|
+
|
|
70
81
|
const {
|
|
71
82
|
base,
|
|
72
83
|
main: mainCls,
|
|
@@ -79,19 +90,24 @@ SupportingPane provides a layout with a main content area and a supporting side
|
|
|
79
90
|
: ''
|
|
80
91
|
);
|
|
81
92
|
|
|
93
|
+
const mainViewportStyle = $derived(
|
|
94
|
+
anchor === 'viewport' && isLargeScreen
|
|
95
|
+
? `transition: margin-${position === 'right' ? 'right' : 'left'} ${supportingVisible ? '500ms' : '280ms'} cubic-bezier(0.2, 0, 0, 1); margin-${position === 'right' ? 'right' : 'left'}: ${supportingVisible ? supportingWidth : 0}px;`
|
|
96
|
+
: ''
|
|
97
|
+
);
|
|
98
|
+
|
|
82
99
|
const inlineSupportingClass = $derived(mobileSheet ? 'hidden lg:block' : '');
|
|
83
100
|
</script>
|
|
84
101
|
|
|
85
102
|
<div class={base({ class: clsx(className) })} style={cssVars}>
|
|
86
|
-
<div class={mainCls({ class: clsx('relative', mainClass) })}>
|
|
103
|
+
<div class={mainCls({ class: clsx('relative', mainClass) })} style={mainViewportStyle}>
|
|
87
104
|
{#if collapsible}
|
|
88
105
|
<div class="top-3 right-3 z-10 hidden h-12 w-12 lg:absolute lg:block">
|
|
89
106
|
<ButtonIcon
|
|
90
|
-
triggerClass=""
|
|
91
107
|
type="button"
|
|
92
|
-
variant="
|
|
108
|
+
variant="elevated"
|
|
93
109
|
tooltipContent={supportingVisible ? 'Скрыть панель' : 'Показать панель'}
|
|
94
|
-
size="
|
|
110
|
+
size="xs"
|
|
95
111
|
iconProps={{
|
|
96
112
|
name: supportingVisible ? 'right_panel_close' : 'right_panel_open'
|
|
97
113
|
}}
|