@celar-ui/svelte 0.1.0 → 0.2.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/index.d.ts +3 -0
- package/dist/index.js +3 -0
- package/dist/overlay/CommandDialog.svelte +62 -0
- package/dist/overlay/CommandDialog.svelte.d.ts +25 -0
- package/dist/overlay/CommandGroupItems.svelte +22 -0
- package/dist/overlay/CommandGroupItems.svelte.d.ts +10 -0
- package/dist/overlay/CommandItem.svelte +26 -0
- package/dist/overlay/CommandItem.svelte.d.ts +9 -0
- package/dist/overlay/MinimalDialog.svelte +5 -3
- package/dist/overlay/MinimalDialog.svelte.d.ts +3 -2
- package/dist/overlay/styles/command.scss +123 -0
- package/package.json +3 -3
package/dist/index.d.ts
CHANGED
|
@@ -10,6 +10,9 @@ export { default as Breadcrumb } from './containment/Breadcrumb.svelte';
|
|
|
10
10
|
export { default as Avatar } from './containment/Avatar.svelte';
|
|
11
11
|
export { default as Dialog } from './overlay/Dialog.svelte';
|
|
12
12
|
export { default as MinimalDialog } from './overlay/MinimalDialog.svelte';
|
|
13
|
+
export { default as CommandDialog } from './overlay/CommandDialog.svelte';
|
|
14
|
+
export { default as CommandGroupItems } from './overlay/CommandGroupItems.svelte';
|
|
15
|
+
export { default as CommandItem } from './overlay/CommandItem.svelte';
|
|
13
16
|
export { default as Gap } from './misc/Gap.svelte';
|
|
14
17
|
export { default as DuckSpinner } from './misc/DuckSpinner.svelte';
|
|
15
18
|
export { default as DotSpinner } from './misc/DotSpinner.svelte';
|
package/dist/index.js
CHANGED
|
@@ -11,6 +11,9 @@ export { default as Breadcrumb } from './containment/Breadcrumb.svelte';
|
|
|
11
11
|
export { default as Avatar } from './containment/Avatar.svelte';
|
|
12
12
|
export { default as Dialog } from './overlay/Dialog.svelte';
|
|
13
13
|
export { default as MinimalDialog } from './overlay/MinimalDialog.svelte';
|
|
14
|
+
export { default as CommandDialog } from './overlay/CommandDialog.svelte';
|
|
15
|
+
export { default as CommandGroupItems } from './overlay/CommandGroupItems.svelte';
|
|
16
|
+
export { default as CommandItem } from './overlay/CommandItem.svelte';
|
|
14
17
|
export { default as Gap } from './misc/Gap.svelte';
|
|
15
18
|
export { default as DuckSpinner } from './misc/DuckSpinner.svelte';
|
|
16
19
|
export { default as DotSpinner } from './misc/DotSpinner.svelte';
|
|
@@ -0,0 +1,62 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import './styles/command.scss';
|
|
3
|
+
import { Command } from 'bits-ui';
|
|
4
|
+
import { default as MinimalDialog, type MinimalDialogProps } from './MinimalDialog.svelte';
|
|
5
|
+
import type { Snippet } from 'svelte';
|
|
6
|
+
|
|
7
|
+
type CommandDialogProps = MinimalDialogProps & {
|
|
8
|
+
trigger?: Snippet<[{ props: Record<string, unknown> }]>;
|
|
9
|
+
xs?: boolean;
|
|
10
|
+
sm?: boolean;
|
|
11
|
+
md?: boolean;
|
|
12
|
+
fluid?: boolean;
|
|
13
|
+
transitionDuration?: number;
|
|
14
|
+
placeholder?: string;
|
|
15
|
+
emptyText?: string;
|
|
16
|
+
shouldFilter?: boolean;
|
|
17
|
+
value?: string;
|
|
18
|
+
onValueChange?: (value: string) => void;
|
|
19
|
+
filter?: (value: string, search: string, keywords?: string[]) => number;
|
|
20
|
+
loop?: boolean;
|
|
21
|
+
disablePointerSelection?: boolean;
|
|
22
|
+
vimBindings?: boolean;
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
let {
|
|
26
|
+
value = $bindable(''),
|
|
27
|
+
children,
|
|
28
|
+
placeholder = 'Type a command or search...',
|
|
29
|
+
emptyText = 'No results found.',
|
|
30
|
+
shouldFilter = true,
|
|
31
|
+
onValueChange,
|
|
32
|
+
filter,
|
|
33
|
+
loop = false,
|
|
34
|
+
disablePointerSelection = false,
|
|
35
|
+
vimBindings = true,
|
|
36
|
+
...rest
|
|
37
|
+
}: CommandDialogProps = $props();
|
|
38
|
+
|
|
39
|
+
let searchValue = $state('');
|
|
40
|
+
</script>
|
|
41
|
+
|
|
42
|
+
<MinimalDialog {...rest} data-command-dialog>
|
|
43
|
+
<Command.Root
|
|
44
|
+
bind:value
|
|
45
|
+
{onValueChange}
|
|
46
|
+
{shouldFilter}
|
|
47
|
+
{filter}
|
|
48
|
+
{loop}
|
|
49
|
+
{disablePointerSelection}
|
|
50
|
+
{vimBindings}
|
|
51
|
+
>
|
|
52
|
+
<Command.Input bind:value={searchValue} {placeholder} />
|
|
53
|
+
<Command.List>
|
|
54
|
+
<Command.Viewport>
|
|
55
|
+
<Command.Empty>
|
|
56
|
+
{emptyText}
|
|
57
|
+
</Command.Empty>
|
|
58
|
+
{@render children?.()}
|
|
59
|
+
</Command.Viewport>
|
|
60
|
+
</Command.List>
|
|
61
|
+
</Command.Root>
|
|
62
|
+
</MinimalDialog>
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
import './styles/command.scss';
|
|
2
|
+
import { type MinimalDialogProps } from './MinimalDialog.svelte';
|
|
3
|
+
import type { Snippet } from 'svelte';
|
|
4
|
+
type CommandDialogProps = MinimalDialogProps & {
|
|
5
|
+
trigger?: Snippet<[{
|
|
6
|
+
props: Record<string, unknown>;
|
|
7
|
+
}]>;
|
|
8
|
+
xs?: boolean;
|
|
9
|
+
sm?: boolean;
|
|
10
|
+
md?: boolean;
|
|
11
|
+
fluid?: boolean;
|
|
12
|
+
transitionDuration?: number;
|
|
13
|
+
placeholder?: string;
|
|
14
|
+
emptyText?: string;
|
|
15
|
+
shouldFilter?: boolean;
|
|
16
|
+
value?: string;
|
|
17
|
+
onValueChange?: (value: string) => void;
|
|
18
|
+
filter?: (value: string, search: string, keywords?: string[]) => number;
|
|
19
|
+
loop?: boolean;
|
|
20
|
+
disablePointerSelection?: boolean;
|
|
21
|
+
vimBindings?: boolean;
|
|
22
|
+
};
|
|
23
|
+
declare const CommandDialog: import("svelte").Component<CommandDialogProps, {}, "value">;
|
|
24
|
+
type CommandDialog = ReturnType<typeof CommandDialog>;
|
|
25
|
+
export default CommandDialog;
|
|
@@ -0,0 +1,22 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Command } from 'bits-ui';
|
|
3
|
+
import type { Snippet } from 'svelte';
|
|
4
|
+
|
|
5
|
+
type CommandGroupItemsProps = {
|
|
6
|
+
heading?: Snippet;
|
|
7
|
+
value?: string;
|
|
8
|
+
forceMount?: boolean;
|
|
9
|
+
children?: Snippet;
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
let { heading, value, forceMount = false, children }: CommandGroupItemsProps = $props();
|
|
13
|
+
</script>
|
|
14
|
+
|
|
15
|
+
<Command.Group {value} {forceMount}>
|
|
16
|
+
<Command.GroupHeading>
|
|
17
|
+
{@render heading?.()}
|
|
18
|
+
</Command.GroupHeading>
|
|
19
|
+
<Command.GroupItems>
|
|
20
|
+
{@render children?.()}
|
|
21
|
+
</Command.GroupItems>
|
|
22
|
+
</Command.Group>
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { Snippet } from 'svelte';
|
|
2
|
+
type CommandGroupItemsProps = {
|
|
3
|
+
heading?: Snippet;
|
|
4
|
+
value?: string;
|
|
5
|
+
forceMount?: boolean;
|
|
6
|
+
children?: Snippet;
|
|
7
|
+
};
|
|
8
|
+
declare const CommandGroupItems: import("svelte").Component<CommandGroupItemsProps, {}, "">;
|
|
9
|
+
type CommandGroupItems = ReturnType<typeof CommandGroupItems>;
|
|
10
|
+
export default CommandGroupItems;
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import Spacer from '../containment/Spacer.svelte';
|
|
3
|
+
import { Command, type CommandItemProps as BitCommandItemProps } from 'bits-ui';
|
|
4
|
+
import type { Snippet } from 'svelte';
|
|
5
|
+
|
|
6
|
+
type CommandItemProps = BitCommandItemProps & {
|
|
7
|
+
icon?: Snippet;
|
|
8
|
+
shortcut?: string;
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
let { children, icon, shortcut, ...rest }: CommandItemProps = $props();
|
|
12
|
+
</script>
|
|
13
|
+
|
|
14
|
+
<Command.Item {...rest}>
|
|
15
|
+
<Spacer wrap="nowrap" align="center">
|
|
16
|
+
{@render icon?.()}
|
|
17
|
+
|
|
18
|
+
<div data-command-item-content>
|
|
19
|
+
{@render children?.()}
|
|
20
|
+
</div>
|
|
21
|
+
</Spacer>
|
|
22
|
+
|
|
23
|
+
{#if shortcut}
|
|
24
|
+
<div data-command-item-shortcut>{shortcut}</div>
|
|
25
|
+
{/if}
|
|
26
|
+
</Command.Item>
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import { type CommandItemProps as BitCommandItemProps } from 'bits-ui';
|
|
2
|
+
import type { Snippet } from 'svelte';
|
|
3
|
+
type CommandItemProps = BitCommandItemProps & {
|
|
4
|
+
icon?: Snippet;
|
|
5
|
+
shortcut?: string;
|
|
6
|
+
};
|
|
7
|
+
declare const CommandItem: import("svelte").Component<CommandItemProps, {}, "">;
|
|
8
|
+
type CommandItem = ReturnType<typeof CommandItem>;
|
|
9
|
+
export default CommandItem;
|
|
@@ -1,10 +1,11 @@
|
|
|
1
1
|
<script lang="ts">
|
|
2
2
|
import './styles/dialog.scss';
|
|
3
3
|
import { fade, fly } from 'svelte/transition';
|
|
4
|
-
import { Dialog as BitDialog, type
|
|
4
|
+
import { Dialog as BitDialog, type DialogContentProps } from 'bits-ui';
|
|
5
5
|
import type { Snippet } from 'svelte';
|
|
6
6
|
|
|
7
|
-
type MinimalDialogProps =
|
|
7
|
+
export type MinimalDialogProps = DialogContentProps & {
|
|
8
|
+
open?: boolean;
|
|
8
9
|
trigger?: Snippet<[{ props: Record<string, unknown> }]>;
|
|
9
10
|
xs?: boolean;
|
|
10
11
|
sm?: boolean;
|
|
@@ -26,7 +27,7 @@
|
|
|
26
27
|
}: MinimalDialogProps = $props();
|
|
27
28
|
</script>
|
|
28
29
|
|
|
29
|
-
<BitDialog.Root
|
|
30
|
+
<BitDialog.Root bind:open>
|
|
30
31
|
<BitDialog.Trigger>
|
|
31
32
|
{#snippet child({ props })}
|
|
32
33
|
{@render trigger?.({ props })}
|
|
@@ -41,6 +42,7 @@
|
|
|
41
42
|
{/snippet}
|
|
42
43
|
</BitDialog.Overlay>
|
|
43
44
|
<BitDialog.Content
|
|
45
|
+
{...rest}
|
|
44
46
|
forceMount
|
|
45
47
|
data-xs={xs}
|
|
46
48
|
data-sm={sm}
|
|
@@ -1,7 +1,8 @@
|
|
|
1
1
|
import './styles/dialog.scss';
|
|
2
|
-
import { type
|
|
2
|
+
import { type DialogContentProps } from 'bits-ui';
|
|
3
3
|
import type { Snippet } from 'svelte';
|
|
4
|
-
type MinimalDialogProps =
|
|
4
|
+
export type MinimalDialogProps = DialogContentProps & {
|
|
5
|
+
open?: boolean;
|
|
5
6
|
trigger?: Snippet<[{
|
|
6
7
|
props: Record<string, unknown>;
|
|
7
8
|
}]>;
|
|
@@ -0,0 +1,123 @@
|
|
|
1
|
+
@use '../../../styles/colors.scss';
|
|
2
|
+
@use '../../../styles/misc.scss';
|
|
3
|
+
@use '../../../styles/spacing.scss';
|
|
4
|
+
|
|
5
|
+
[data-command-dialog] {
|
|
6
|
+
top: 25dvh;
|
|
7
|
+
left: calc(50lvw - var(--gap));
|
|
8
|
+
transform: translate(-50%, 0);
|
|
9
|
+
max-height: calc(75dvh - (var(--gap) * 2));
|
|
10
|
+
|
|
11
|
+
[data-command-input] {
|
|
12
|
+
background-color: var(--color-bg);
|
|
13
|
+
border: 1px solid var(--color-border);
|
|
14
|
+
border-radius: var(--radius--half);
|
|
15
|
+
padding: var(--gap--half);
|
|
16
|
+
font-size: inherit;
|
|
17
|
+
font-family: inherit;
|
|
18
|
+
line-height: 1.5;
|
|
19
|
+
color: var(--color-text);
|
|
20
|
+
outline: none;
|
|
21
|
+
transition: border-color var(--transition-dur) ease-in-out;
|
|
22
|
+
width: 100%;
|
|
23
|
+
box-sizing: border-box;
|
|
24
|
+
|
|
25
|
+
&::placeholder {
|
|
26
|
+
color: rgba(var(--color-text--rgb), 0.6);
|
|
27
|
+
}
|
|
28
|
+
|
|
29
|
+
&:focus {
|
|
30
|
+
border-color: var(--color-primary);
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
[data-command-list] {
|
|
35
|
+
flex: 1;
|
|
36
|
+
overflow-y: auto;
|
|
37
|
+
overflow-x: hidden;
|
|
38
|
+
margin-top: var(--gap);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
[data-command-viewport] {
|
|
42
|
+
display: flex;
|
|
43
|
+
flex-direction: column;
|
|
44
|
+
gap: var(--gap--xs);
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
[data-command-group] {
|
|
48
|
+
display: flex;
|
|
49
|
+
flex-direction: column;
|
|
50
|
+
gap: var(--gap--xs);
|
|
51
|
+
|
|
52
|
+
&:not(:first-child) {
|
|
53
|
+
margin-top: var(--gap--md);
|
|
54
|
+
}
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
[data-command-group-heading] {
|
|
58
|
+
font-weight: 600;
|
|
59
|
+
font-size: 0.8em;
|
|
60
|
+
color: rgba(var(--color-text--rgb), 0.6);
|
|
61
|
+
text-transform: uppercase;
|
|
62
|
+
letter-spacing: 0.05em;
|
|
63
|
+
margin-bottom: var(--gap--half);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
[data-command-group-items] {
|
|
67
|
+
display: flex;
|
|
68
|
+
flex-direction: column;
|
|
69
|
+
gap: var(--gap--xs);
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
[data-command-item] {
|
|
73
|
+
display: flex;
|
|
74
|
+
align-items: center;
|
|
75
|
+
justify-content: space-between;
|
|
76
|
+
gap: var(--gap--md);
|
|
77
|
+
padding: var(--gap--md);
|
|
78
|
+
border-radius: var(--radius--half);
|
|
79
|
+
cursor: pointer;
|
|
80
|
+
line-height: 1.5;
|
|
81
|
+
color: var(--color-text);
|
|
82
|
+
background-color: transparent;
|
|
83
|
+
border: none;
|
|
84
|
+
text-align: left;
|
|
85
|
+
width: 100%;
|
|
86
|
+
outline: none;
|
|
87
|
+
box-sizing: border-box;
|
|
88
|
+
|
|
89
|
+
&[data-selected] {
|
|
90
|
+
background-color: rgba(var(--color-alt--rgb), 0.4);
|
|
91
|
+
}
|
|
92
|
+
|
|
93
|
+
&[data-disabled] {
|
|
94
|
+
opacity: 0.5;
|
|
95
|
+
cursor: not-allowed;
|
|
96
|
+
|
|
97
|
+
&:hover {
|
|
98
|
+
background-color: transparent;
|
|
99
|
+
}
|
|
100
|
+
}
|
|
101
|
+
|
|
102
|
+
&:focus-visible {
|
|
103
|
+
background-color: rgba(var(--color-primary--rgb), 0.1);
|
|
104
|
+
box-shadow: 0 0 0 2px var(--color-primary);
|
|
105
|
+
}
|
|
106
|
+
|
|
107
|
+
[data-command-item-shortcut] {
|
|
108
|
+
font-size: 0.9rem;
|
|
109
|
+
color: rgba(var(--color-text--rgb), 0.6);
|
|
110
|
+
background-color: var(--color-border);
|
|
111
|
+
padding: var(--gap--xs) var(--gap--sm);
|
|
112
|
+
border-radius: var(--radius--half);
|
|
113
|
+
border: 1px solid var(--color-border--strong);
|
|
114
|
+
font-family:
|
|
115
|
+
ui-monospace, SFMono-Regular, 'SF Mono', Consolas, 'Liberation Mono', Menlo, monospace;
|
|
116
|
+
}
|
|
117
|
+
}
|
|
118
|
+
|
|
119
|
+
[data-command-empty] {
|
|
120
|
+
color: rgba(var(--color-text--rgb), 0.5);
|
|
121
|
+
text-align: center;
|
|
122
|
+
}
|
|
123
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@celar-ui/svelte",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.2.0",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"author": {
|
|
6
6
|
"name": "cuikho210",
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
"@sveltejs/package": "^2.3.10",
|
|
56
56
|
"@sveltejs/vite-plugin-svelte": "^5.0.3",
|
|
57
57
|
"autoprefixer": "^10.4.21",
|
|
58
|
-
"bits-ui": "^2.8.
|
|
58
|
+
"bits-ui": "^2.8.8",
|
|
59
59
|
"csstype": "^3.1.3",
|
|
60
60
|
"eslint": "^9.24.0",
|
|
61
61
|
"eslint-config-prettier": "^10.1.2",
|
|
@@ -65,7 +65,7 @@
|
|
|
65
65
|
"prettier-plugin-svelte": "^3.3.3",
|
|
66
66
|
"publint": "^0.3.11",
|
|
67
67
|
"sass": "^1.86.3",
|
|
68
|
-
"svelte": "^5.34.
|
|
68
|
+
"svelte": "^5.34.7",
|
|
69
69
|
"svelte-check": "^4.1.5",
|
|
70
70
|
"typescript": "^5.8.3",
|
|
71
71
|
"typescript-eslint": "^8.29.1",
|