noph-ui 0.21.17 → 0.22.0
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/badge/Badge.svelte +42 -0
- package/dist/badge/Badge.svelte.d.ts +6 -0
- package/dist/tabs/Tab.svelte +29 -2
- package/dist/tabs/types.d.ts +2 -0
- package/package.json +3 -3
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
let { label }: { label?: string } = $props()
|
|
3
|
+
</script>
|
|
4
|
+
|
|
5
|
+
<div class="np-badge-container">
|
|
6
|
+
{#if label}
|
|
7
|
+
<div class="np-badge-label">
|
|
8
|
+
{label}
|
|
9
|
+
</div>
|
|
10
|
+
{:else}
|
|
11
|
+
<div class="np-badge-no-label"></div>
|
|
12
|
+
{/if}
|
|
13
|
+
</div>
|
|
14
|
+
|
|
15
|
+
<style>
|
|
16
|
+
.np-badge-container {
|
|
17
|
+
display: inline-block;
|
|
18
|
+
background-color: var(--np-color-error);
|
|
19
|
+
border-radius: var(--np-shape-corner-full);
|
|
20
|
+
text-align: center;
|
|
21
|
+
position: var(--np-badge-position, absolute);
|
|
22
|
+
top: var(--np-badge-top, 0);
|
|
23
|
+
left: var(--np-badge-left, auto);
|
|
24
|
+
right: var(--np-badge-right, auto);
|
|
25
|
+
}
|
|
26
|
+
.np-badge-no-label {
|
|
27
|
+
width: 0.375rem;
|
|
28
|
+
height: 0.375rem;
|
|
29
|
+
}
|
|
30
|
+
.np-badge-label {
|
|
31
|
+
color: var(--np-color-on-error);
|
|
32
|
+
padding-inline: 0.25rem;
|
|
33
|
+
min-width: 0.5rem;
|
|
34
|
+
font-weight: 500;
|
|
35
|
+
font-size: 0.6875rem;
|
|
36
|
+
height: 1rem;
|
|
37
|
+
display: flex;
|
|
38
|
+
align-items: center;
|
|
39
|
+
text-align: center;
|
|
40
|
+
justify-content: center;
|
|
41
|
+
}
|
|
42
|
+
</style>
|
package/dist/tabs/Tab.svelte
CHANGED
|
@@ -2,6 +2,7 @@
|
|
|
2
2
|
import Ripple from '../ripple/Ripple.svelte'
|
|
3
3
|
import { getContext } from 'svelte'
|
|
4
4
|
import type { TabProps } from './types.ts'
|
|
5
|
+
import Badge from '../badge/Badge.svelte'
|
|
5
6
|
|
|
6
7
|
let {
|
|
7
8
|
children,
|
|
@@ -12,6 +13,8 @@
|
|
|
12
13
|
value,
|
|
13
14
|
href,
|
|
14
15
|
variant = 'primary',
|
|
16
|
+
badge = false,
|
|
17
|
+
badgeLabel,
|
|
15
18
|
...attributes
|
|
16
19
|
}: TabProps = $props()
|
|
17
20
|
let activeTab: { value: string | number; node: HTMLElement } = getContext('activeTab')
|
|
@@ -82,8 +85,23 @@
|
|
|
82
85
|
!inlineIcon && variant === 'primary' && children && icon && 'np-tab-no-inline',
|
|
83
86
|
]}
|
|
84
87
|
>
|
|
85
|
-
{
|
|
86
|
-
|
|
88
|
+
{#if icon}
|
|
89
|
+
{#if badge && variant === 'primary' && !inlineIcon}
|
|
90
|
+
<div class="np-tab-icon-badge">
|
|
91
|
+
<Badge label={badgeLabel} />
|
|
92
|
+
{@render icon?.()}
|
|
93
|
+
</div>
|
|
94
|
+
{:else}
|
|
95
|
+
{@render icon?.()}
|
|
96
|
+
{/if}
|
|
97
|
+
{/if}
|
|
98
|
+
{#if badge && (!icon || variant === 'secondary' || inlineIcon)}
|
|
99
|
+
<div style="--np-badge-position:static;">
|
|
100
|
+
<span class="np-tab-label-badge">{@render children?.()}</span><Badge label={badgeLabel} />
|
|
101
|
+
</div>
|
|
102
|
+
{:else}
|
|
103
|
+
{@render children?.()}
|
|
104
|
+
{/if}
|
|
87
105
|
{#if variant === 'primary'}
|
|
88
106
|
<div class="np-indicator"></div>
|
|
89
107
|
{/if}
|
|
@@ -160,6 +178,15 @@
|
|
|
160
178
|
text-wrap: nowrap;
|
|
161
179
|
min-width: 1.5rem;
|
|
162
180
|
}
|
|
181
|
+
.np-tab-label-badge {
|
|
182
|
+
margin-right: 4px;
|
|
183
|
+
}
|
|
184
|
+
.np-tab-icon-badge {
|
|
185
|
+
height: 1.5rem;
|
|
186
|
+
width: 1.5rem;
|
|
187
|
+
position: relative;
|
|
188
|
+
--np-badge-left: 1.125rem;
|
|
189
|
+
}
|
|
163
190
|
|
|
164
191
|
.np-tab-no-inline {
|
|
165
192
|
flex-direction: column;
|
package/dist/tabs/types.d.ts
CHANGED
|
@@ -6,6 +6,8 @@ export interface TabProps extends HTMLAttributes<HTMLElement> {
|
|
|
6
6
|
value: string | number;
|
|
7
7
|
href?: string;
|
|
8
8
|
icon?: Snippet;
|
|
9
|
+
badge?: boolean;
|
|
10
|
+
badgeLabel?: string;
|
|
9
11
|
}
|
|
10
12
|
export interface TabsProps extends HTMLAttributes<HTMLDivElement> {
|
|
11
13
|
value: string | number;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "noph-ui",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.22.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"homepage": "https://noph.dev",
|
|
6
6
|
"repository": {
|
|
@@ -57,8 +57,8 @@
|
|
|
57
57
|
"@eslint/js": "^9.33.0",
|
|
58
58
|
"@material/material-color-utilities": "^0.3.0",
|
|
59
59
|
"@playwright/test": "^1.54.2",
|
|
60
|
-
"@sveltejs/adapter-vercel": "^5.
|
|
61
|
-
"@sveltejs/kit": "^2.
|
|
60
|
+
"@sveltejs/adapter-vercel": "^5.9.1",
|
|
61
|
+
"@sveltejs/kit": "^2.31.1",
|
|
62
62
|
"@sveltejs/package": "^2.4.1",
|
|
63
63
|
"@sveltejs/vite-plugin-svelte": "^6.1.2",
|
|
64
64
|
"@types/eslint": "^9.6.1",
|