@rokkit/ui 1.0.1 → 1.0.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
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@rokkit/ui",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.2",
|
|
4
4
|
"description": "Data driven UI components for Rokkit applications",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
@@ -43,10 +43,10 @@
|
|
|
43
43
|
"dropdown"
|
|
44
44
|
],
|
|
45
45
|
"dependencies": {
|
|
46
|
-
"@rokkit/core": "1.0.
|
|
47
|
-
"@rokkit/data": "1.0.
|
|
48
|
-
"@rokkit/states": "1.0.
|
|
49
|
-
"@rokkit/actions": "1.0.
|
|
46
|
+
"@rokkit/core": "1.0.2",
|
|
47
|
+
"@rokkit/data": "1.0.2",
|
|
48
|
+
"@rokkit/states": "1.0.2",
|
|
49
|
+
"@rokkit/actions": "1.0.2",
|
|
50
50
|
"marked": "^15.0.0",
|
|
51
51
|
"dompurify": "^3.0.0"
|
|
52
52
|
},
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { Snippet } from 'svelte'
|
|
3
|
+
|
|
4
|
+
interface NavContentProps {
|
|
5
|
+
/** Layout orientation */
|
|
6
|
+
orientation?: 'horizontal' | 'vertical'
|
|
7
|
+
/** Nav panel width (horizontal) or height (vertical) */
|
|
8
|
+
navSize?: string
|
|
9
|
+
/** Collapse nav on small screens */
|
|
10
|
+
collapsible?: boolean
|
|
11
|
+
/** Nav panel snippet */
|
|
12
|
+
nav: Snippet
|
|
13
|
+
/** Content panel snippet */
|
|
14
|
+
content: Snippet
|
|
15
|
+
/** Additional CSS class */
|
|
16
|
+
class?: string
|
|
17
|
+
}
|
|
18
|
+
|
|
19
|
+
const {
|
|
20
|
+
orientation = 'horizontal',
|
|
21
|
+
navSize = '280px',
|
|
22
|
+
collapsible = true,
|
|
23
|
+
nav,
|
|
24
|
+
content,
|
|
25
|
+
class: className = ''
|
|
26
|
+
}: NavContentProps = $props()
|
|
27
|
+
</script>
|
|
28
|
+
|
|
29
|
+
<div
|
|
30
|
+
data-nav-content
|
|
31
|
+
data-orientation={orientation}
|
|
32
|
+
data-collapsible={collapsible || undefined}
|
|
33
|
+
class={className || undefined}
|
|
34
|
+
style:--nav-size={navSize}
|
|
35
|
+
>
|
|
36
|
+
<div data-nav-content-nav>
|
|
37
|
+
{@render nav()}
|
|
38
|
+
</div>
|
|
39
|
+
<div data-nav-content-main>
|
|
40
|
+
{@render content()}
|
|
41
|
+
</div>
|
|
42
|
+
</div>
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import type { Snippet } from 'svelte'
|
|
3
|
+
|
|
4
|
+
interface ResponsiveGridProps {
|
|
5
|
+
/** Minimum column width (CSS value) */
|
|
6
|
+
minWidth?: string
|
|
7
|
+
/** Gap between cells (CSS value) */
|
|
8
|
+
gap?: string
|
|
9
|
+
/** Maximum number of columns */
|
|
10
|
+
maxCols?: number
|
|
11
|
+
/** Grid children */
|
|
12
|
+
children: Snippet
|
|
13
|
+
/** Additional CSS class */
|
|
14
|
+
class?: string
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
const {
|
|
18
|
+
minWidth = '240px',
|
|
19
|
+
gap = '1rem',
|
|
20
|
+
maxCols,
|
|
21
|
+
children,
|
|
22
|
+
class: className = ''
|
|
23
|
+
}: ResponsiveGridProps = $props()
|
|
24
|
+
</script>
|
|
25
|
+
|
|
26
|
+
<div
|
|
27
|
+
data-responsive-grid
|
|
28
|
+
class={className || undefined}
|
|
29
|
+
style:--grid-min-width={minWidth}
|
|
30
|
+
style:--grid-gap={gap}
|
|
31
|
+
style:--grid-max-cols={maxCols || undefined}
|
|
32
|
+
>
|
|
33
|
+
{@render children()}
|
|
34
|
+
</div>
|
package/src/components/index.ts
CHANGED
|
@@ -46,3 +46,5 @@ export { default as Stack } from './Stack.svelte'
|
|
|
46
46
|
export { default as Badge } from './Badge.svelte'
|
|
47
47
|
export { default as Avatar } from './Avatar.svelte'
|
|
48
48
|
export { default as Tooltip } from './Tooltip.svelte'
|
|
49
|
+
export { default as NavContent } from './NavContent.svelte'
|
|
50
|
+
export { default as ResponsiveGrid } from './ResponsiveGrid.svelte'
|