@profidev/pleiades 1.7.1 → 1.8.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/components/ui/command/command-input.svelte +6 -3
- package/dist/components/ui/field/field-label.svelte +1 -1
- package/dist/components/ui/field/field-title.svelte +1 -1
- package/dist/components/ui/slider/slider.svelte +1 -1
- package/dist/components/ui/tooltip/tooltip.svelte +1 -4
- package/dist/components/ui-extra/alert-dialog/alert-dialog-action.svelte +40 -0
- package/dist/components/ui-extra/alert-dialog/alert-dialog-action.svelte.d.ts +10 -0
- package/dist/components/ui-extra/alert-dialog/alert-dialog-cancel.svelte +31 -0
- package/dist/components/ui-extra/alert-dialog/alert-dialog-cancel.svelte.d.ts +9 -0
- package/dist/components/ui-extra/alert-dialog/alert-dialog-content.svelte +38 -0
- package/dist/components/ui-extra/alert-dialog/alert-dialog-content.svelte.d.ts +11 -0
- package/dist/components/ui-extra/alert-dialog/alert-dialog-description.svelte +20 -0
- package/dist/components/ui-extra/alert-dialog/alert-dialog-description.svelte.d.ts +4 -0
- package/dist/components/ui-extra/alert-dialog/alert-dialog-footer.svelte +23 -0
- package/dist/components/ui-extra/alert-dialog/alert-dialog-footer.svelte.d.ts +5 -0
- package/dist/components/ui-extra/alert-dialog/alert-dialog-header.svelte +23 -0
- package/dist/components/ui-extra/alert-dialog/alert-dialog-header.svelte.d.ts +5 -0
- package/dist/components/ui-extra/alert-dialog/alert-dialog-media.svelte +23 -0
- package/dist/components/ui-extra/alert-dialog/alert-dialog-media.svelte.d.ts +5 -0
- package/dist/components/ui-extra/alert-dialog/alert-dialog-overlay.svelte +20 -0
- package/dist/components/ui-extra/alert-dialog/alert-dialog-overlay.svelte.d.ts +4 -0
- package/dist/components/ui-extra/alert-dialog/alert-dialog-portal.svelte +7 -0
- package/dist/components/ui-extra/alert-dialog/alert-dialog-portal.svelte.d.ts +3 -0
- package/dist/components/ui-extra/alert-dialog/alert-dialog-title.svelte +20 -0
- package/dist/components/ui-extra/alert-dialog/alert-dialog-title.svelte.d.ts +4 -0
- package/dist/components/ui-extra/alert-dialog/alert-dialog-trigger.svelte +14 -0
- package/dist/components/ui-extra/alert-dialog/alert-dialog-trigger.svelte.d.ts +4 -0
- package/dist/components/ui-extra/alert-dialog/alert-dialog.svelte +10 -0
- package/dist/components/ui-extra/alert-dialog/alert-dialog.svelte.d.ts +3 -0
- package/dist/components/ui-extra/alert-dialog/index.d.ts +13 -0
- package/dist/components/ui-extra/alert-dialog/index.js +15 -0
- package/dist/components/ui-extra/button-group/button-group-separator.svelte +23 -0
- package/dist/components/ui-extra/button-group/button-group-separator.svelte.d.ts +13 -0
- package/dist/components/ui-extra/button-group/button-group-text.svelte +31 -0
- package/dist/components/ui-extra/button-group/button-group-text.svelte.d.ts +11 -0
- package/dist/components/ui-extra/button-group/button-group.svelte +48 -0
- package/dist/components/ui-extra/button-group/button-group.svelte.d.ts +26 -0
- package/dist/components/ui-extra/button-group/index.d.ts +4 -0
- package/dist/components/ui-extra/button-group/index.js +6 -0
- package/dist/components/ui-extra/confirm-delete-dialog/confirm-delete-dialog.svelte +131 -0
- package/dist/components/ui-extra/confirm-delete-dialog/confirm-delete-dialog.svelte.d.ts +35 -0
- package/dist/components/ui-extra/confirm-delete-dialog/index.d.ts +2 -0
- package/dist/components/ui-extra/confirm-delete-dialog/index.js +2 -0
- package/dist/components/ui-extra/github-button/github-button.svelte +81 -0
- package/dist/components/ui-extra/github-button/github-button.svelte.d.ts +13 -0
- package/dist/components/ui-extra/github-button/index.d.ts +20 -0
- package/dist/components/ui-extra/github-button/index.js +27 -0
- package/dist/components/ui-extra/select/index.d.ts +12 -0
- package/dist/components/ui-extra/select/index.js +14 -0
- package/dist/components/ui-extra/select/select-content.svelte +45 -0
- package/dist/components/ui-extra/select/select-content.svelte.d.ts +11 -0
- package/dist/components/ui-extra/select/select-group-heading.svelte +21 -0
- package/dist/components/ui-extra/select/select-group-heading.svelte.d.ts +10 -0
- package/dist/components/ui-extra/select/select-group.svelte +17 -0
- package/dist/components/ui-extra/select/select-group.svelte.d.ts +4 -0
- package/dist/components/ui-extra/select/select-item.svelte +38 -0
- package/dist/components/ui-extra/select/select-item.svelte.d.ts +4 -0
- package/dist/components/ui-extra/select/select-label.svelte +20 -0
- package/dist/components/ui-extra/select/select-label.svelte.d.ts +6 -0
- package/dist/components/ui-extra/select/select-portal.svelte +7 -0
- package/dist/components/ui-extra/select/select-portal.svelte.d.ts +3 -0
- package/dist/components/ui-extra/select/select-scroll-down-button.svelte +23 -0
- package/dist/components/ui-extra/select/select-scroll-down-button.svelte.d.ts +4 -0
- package/dist/components/ui-extra/select/select-scroll-up-button.svelte +23 -0
- package/dist/components/ui-extra/select/select-scroll-up-button.svelte.d.ts +4 -0
- package/dist/components/ui-extra/select/select-separator.svelte +18 -0
- package/dist/components/ui-extra/select/select-separator.svelte.d.ts +4 -0
- package/dist/components/ui-extra/select/select-trigger.svelte +29 -0
- package/dist/components/ui-extra/select/select-trigger.svelte.d.ts +8 -0
- package/dist/components/ui-extra/select/select.svelte +11 -0
- package/dist/components/ui-extra/select/select.svelte.d.ts +3 -0
- package/dist/components/ui-extra/separator/index.d.ts +2 -0
- package/dist/components/ui-extra/separator/index.js +4 -0
- package/dist/components/ui-extra/separator/separator.svelte +23 -0
- package/dist/components/ui-extra/separator/separator.svelte.d.ts +4 -0
- package/dist/components/ui-extra/split-button/index.d.ts +14 -0
- package/dist/components/ui-extra/split-button/index.js +9 -0
- package/dist/components/ui-extra/split-button/split-button-action.svelte +41 -0
- package/dist/components/ui-extra/split-button/split-button-action.svelte.d.ts +9 -0
- package/dist/components/ui-extra/split-button/split-button-content.svelte +19 -0
- package/dist/components/ui-extra/split-button/split-button-content.svelte.d.ts +6 -0
- package/dist/components/ui-extra/split-button/split-button-select-action.svelte +54 -0
- package/dist/components/ui-extra/split-button/split-button-select-action.svelte.d.ts +6 -0
- package/dist/components/ui-extra/split-button/split-button-select-trigger.svelte +47 -0
- package/dist/components/ui-extra/split-button/split-button-select-trigger.svelte.d.ts +10 -0
- package/dist/components/ui-extra/split-button/split-button-select.svelte +31 -0
- package/dist/components/ui-extra/split-button/split-button-select.svelte.d.ts +6 -0
- package/dist/components/ui-extra/split-button/split-button.svelte +53 -0
- package/dist/components/ui-extra/split-button/split-button.svelte.d.ts +17 -0
- package/dist/components/ui-extra/split-button/split-button.svelte.js +82 -0
- package/package.json +47 -19
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Select as SelectPrimitive } from 'bits-ui';
|
|
3
|
+
import { cn, type WithoutChild } from '../../../blocks/utils.js';
|
|
4
|
+
import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
|
|
5
|
+
|
|
6
|
+
let {
|
|
7
|
+
ref = $bindable(null),
|
|
8
|
+
class: className,
|
|
9
|
+
children,
|
|
10
|
+
size = 'default',
|
|
11
|
+
...restProps
|
|
12
|
+
}: WithoutChild<SelectPrimitive.TriggerProps> & {
|
|
13
|
+
size?: 'sm' | 'default';
|
|
14
|
+
} = $props();
|
|
15
|
+
</script>
|
|
16
|
+
|
|
17
|
+
<SelectPrimitive.Trigger
|
|
18
|
+
bind:ref
|
|
19
|
+
data-slot="select-trigger"
|
|
20
|
+
data-size={size}
|
|
21
|
+
class={cn(
|
|
22
|
+
"border-input data-placeholder:text-muted-foreground dark:bg-input/30 dark:hover:bg-input/50 focus-visible:border-ring focus-visible:ring-ring/50 aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive dark:aria-invalid:border-destructive/50 flex w-fit items-center justify-between gap-1.5 rounded-md border bg-transparent py-2 pr-2 pl-2.5 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
23
|
+
className
|
|
24
|
+
)}
|
|
25
|
+
{...restProps}
|
|
26
|
+
>
|
|
27
|
+
{@render children?.()}
|
|
28
|
+
<ChevronDownIcon class="text-muted-foreground pointer-events-none size-4" />
|
|
29
|
+
</SelectPrimitive.Trigger>
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import { Select as SelectPrimitive } from 'bits-ui';
|
|
2
|
+
import { type WithoutChild } from '../../../blocks/utils.js';
|
|
3
|
+
type $$ComponentProps = WithoutChild<SelectPrimitive.TriggerProps> & {
|
|
4
|
+
size?: 'sm' | 'default';
|
|
5
|
+
};
|
|
6
|
+
declare const SelectTrigger: import("svelte").Component<$$ComponentProps, {}, "ref">;
|
|
7
|
+
type SelectTrigger = ReturnType<typeof SelectTrigger>;
|
|
8
|
+
export default SelectTrigger;
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Select as SelectPrimitive } from 'bits-ui';
|
|
3
|
+
|
|
4
|
+
let {
|
|
5
|
+
open = $bindable(false),
|
|
6
|
+
value = $bindable(),
|
|
7
|
+
...restProps
|
|
8
|
+
}: SelectPrimitive.RootProps = $props();
|
|
9
|
+
</script>
|
|
10
|
+
|
|
11
|
+
<SelectPrimitive.Root bind:open bind:value={value as never} {...restProps} />
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { Separator as SeparatorPrimitive } from 'bits-ui';
|
|
3
|
+
import { cn } from '../../../blocks/utils.js';
|
|
4
|
+
|
|
5
|
+
let {
|
|
6
|
+
ref = $bindable(null),
|
|
7
|
+
class: className,
|
|
8
|
+
'data-slot': dataSlot = 'separator',
|
|
9
|
+
...restProps
|
|
10
|
+
}: SeparatorPrimitive.RootProps = $props();
|
|
11
|
+
</script>
|
|
12
|
+
|
|
13
|
+
<SeparatorPrimitive.Root
|
|
14
|
+
bind:ref
|
|
15
|
+
data-slot={dataSlot}
|
|
16
|
+
class={cn(
|
|
17
|
+
'bg-border shrink-0 data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px',
|
|
18
|
+
// this is different in shadcn/ui but self-stretch breaks things for us
|
|
19
|
+
'data-[orientation=vertical]:h-full',
|
|
20
|
+
className
|
|
21
|
+
)}
|
|
22
|
+
{...restProps}
|
|
23
|
+
/>
|
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
import Root from './split-button.svelte';
|
|
2
|
+
import Action from './split-button-action.svelte';
|
|
3
|
+
import Select from './split-button-select.svelte';
|
|
4
|
+
import SelectTrigger from './split-button-select-trigger.svelte';
|
|
5
|
+
import SelectAction from './split-button-select-action.svelte';
|
|
6
|
+
import SelectContent from './split-button-content.svelte';
|
|
7
|
+
import { SelectGroup, SelectGroupHeading, SelectLabel, SelectSeparator } from '../select';
|
|
8
|
+
export type { SplitButtonProps, SplitButtonPropsWithoutHTML } from './split-button.svelte';
|
|
9
|
+
export type { SplitButtonActionProps } from './split-button-action.svelte';
|
|
10
|
+
export type { SplitButtonSelectProps } from './split-button-select.svelte';
|
|
11
|
+
export type { SplitButtonSelectTriggerProps } from './split-button-select-trigger.svelte';
|
|
12
|
+
export type { SplitButtonSelectActionProps } from './split-button-select-action.svelte';
|
|
13
|
+
export type { SplitButtonClickEvent } from './split-button.svelte.js';
|
|
14
|
+
export { Root, Action, Select, SelectTrigger, SelectContent, SelectAction, SelectGroup, SelectGroupHeading, SelectLabel, SelectSeparator };
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import Root from './split-button.svelte';
|
|
2
|
+
import Action from './split-button-action.svelte';
|
|
3
|
+
import Select from './split-button-select.svelte';
|
|
4
|
+
import SelectTrigger from './split-button-select-trigger.svelte';
|
|
5
|
+
import SelectAction from './split-button-select-action.svelte';
|
|
6
|
+
import SelectContent from './split-button-content.svelte';
|
|
7
|
+
// re-export select components
|
|
8
|
+
import { SelectGroup, SelectGroupHeading, SelectLabel, SelectSeparator } from '../select';
|
|
9
|
+
export { Root, Action, Select, SelectTrigger, SelectContent, SelectAction, SelectGroup, SelectGroupHeading, SelectLabel, SelectSeparator };
|
|
@@ -0,0 +1,41 @@
|
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
import type { WithoutChildren } from 'bits-ui';
|
|
3
|
+
|
|
4
|
+
export type SplitButtonActionProps = WithoutChildren<ButtonProps> & {
|
|
5
|
+
value: string;
|
|
6
|
+
children?: import('svelte').Snippet;
|
|
7
|
+
};
|
|
8
|
+
</script>
|
|
9
|
+
|
|
10
|
+
<script lang="ts">
|
|
11
|
+
import Button, { type ButtonProps } from '../../../blocks/button.svelte';
|
|
12
|
+
import { useSplitButtonAction } from './split-button.svelte.js';
|
|
13
|
+
import { box } from 'svelte-toolbelt';
|
|
14
|
+
|
|
15
|
+
let {
|
|
16
|
+
ref = $bindable(null),
|
|
17
|
+
value,
|
|
18
|
+
onclick,
|
|
19
|
+
disabled,
|
|
20
|
+
loading,
|
|
21
|
+
children,
|
|
22
|
+
...rest
|
|
23
|
+
}: SplitButtonActionProps = $props();
|
|
24
|
+
|
|
25
|
+
const state = useSplitButtonAction({
|
|
26
|
+
value: box.with(() => value),
|
|
27
|
+
onclick: box.with(() => onclick)
|
|
28
|
+
});
|
|
29
|
+
</script>
|
|
30
|
+
|
|
31
|
+
{#if state.isActive}
|
|
32
|
+
<Button
|
|
33
|
+
bind:ref
|
|
34
|
+
disabled={disabled || state.rootState.disabled}
|
|
35
|
+
loading={loading || state.rootState.loading}
|
|
36
|
+
onclick={(e) => state.onclick(e)}
|
|
37
|
+
{...rest}
|
|
38
|
+
>
|
|
39
|
+
{@render children?.()}
|
|
40
|
+
</Button>
|
|
41
|
+
{/if}
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
import type { WithoutChildren } from 'bits-ui';
|
|
2
|
+
export type SplitButtonActionProps = WithoutChildren<ButtonProps> & {
|
|
3
|
+
value: string;
|
|
4
|
+
children?: import('svelte').Snippet;
|
|
5
|
+
};
|
|
6
|
+
import { type ButtonProps } from '../../../blocks/button.svelte';
|
|
7
|
+
declare const SplitButtonAction: import("svelte").Component<SplitButtonActionProps, {}, "ref">;
|
|
8
|
+
type SplitButtonAction = ReturnType<typeof SplitButtonAction>;
|
|
9
|
+
export default SplitButtonAction;
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { SelectContent } from '../select';
|
|
3
|
+
import type { ComponentProps } from 'svelte';
|
|
4
|
+
|
|
5
|
+
let {
|
|
6
|
+
align = 'end',
|
|
7
|
+
children,
|
|
8
|
+
...restProps
|
|
9
|
+
}: ComponentProps<typeof SelectContent> = $props();
|
|
10
|
+
</script>
|
|
11
|
+
|
|
12
|
+
<SelectContent
|
|
13
|
+
data-slot="split-button-content"
|
|
14
|
+
{align}
|
|
15
|
+
class="p-2"
|
|
16
|
+
{...restProps}
|
|
17
|
+
>
|
|
18
|
+
{@render children?.()}
|
|
19
|
+
</SelectContent>
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type { ComponentProps } from 'svelte';
|
|
2
|
+
declare const SplitButtonContent: import("svelte").Component<Omit<import("bits-ui").ComboboxContentProps, "child"> & {
|
|
3
|
+
portalProps?: import("../../../blocks/utils").WithoutChildrenOrChild<ComponentProps<typeof import("../select").Portal>>;
|
|
4
|
+
}, {}, "">;
|
|
5
|
+
type SplitButtonContent = ReturnType<typeof SplitButtonContent>;
|
|
6
|
+
export default SplitButtonContent;
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
import type { Select as SelectPrimitiveNs } from 'bits-ui';
|
|
3
|
+
import type { WithoutChild } from '../../../blocks/utils.js';
|
|
4
|
+
|
|
5
|
+
export type SplitButtonSelectActionProps =
|
|
6
|
+
WithoutChild<SelectPrimitiveNs.ItemProps>;
|
|
7
|
+
</script>
|
|
8
|
+
|
|
9
|
+
<script lang="ts">
|
|
10
|
+
import { Select as SelectPrimitive } from 'bits-ui';
|
|
11
|
+
import { cn } from '../../../blocks/utils.js';
|
|
12
|
+
import { useSplitButtonSelectAction } from './split-button.svelte.js';
|
|
13
|
+
import { box } from 'svelte-toolbelt';
|
|
14
|
+
import CheckIcon from '@lucide/svelte/icons/check';
|
|
15
|
+
|
|
16
|
+
let {
|
|
17
|
+
ref = $bindable(null),
|
|
18
|
+
class: className,
|
|
19
|
+
value,
|
|
20
|
+
label,
|
|
21
|
+
children: childrenProp,
|
|
22
|
+
...restProps
|
|
23
|
+
}: SplitButtonSelectActionProps = $props();
|
|
24
|
+
|
|
25
|
+
useSplitButtonSelectAction({
|
|
26
|
+
value: box.with(() => value)
|
|
27
|
+
});
|
|
28
|
+
</script>
|
|
29
|
+
|
|
30
|
+
<SelectPrimitive.Item
|
|
31
|
+
bind:ref
|
|
32
|
+
{value}
|
|
33
|
+
data-slot="split-button-select-action"
|
|
34
|
+
class={cn(
|
|
35
|
+
"focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-highlighted:bg-accent data-highlighted:text-accent-foreground relative flex w-full cursor-default items-start gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
|
|
36
|
+
className
|
|
37
|
+
)}
|
|
38
|
+
{...restProps}
|
|
39
|
+
>
|
|
40
|
+
{#snippet children({ selected, highlighted })}
|
|
41
|
+
<span
|
|
42
|
+
class="absolute end-2 top-2 flex size-3.5 items-center justify-center"
|
|
43
|
+
>
|
|
44
|
+
{#if selected}
|
|
45
|
+
<CheckIcon />
|
|
46
|
+
{/if}
|
|
47
|
+
</span>
|
|
48
|
+
{#if childrenProp}
|
|
49
|
+
{@render childrenProp({ selected, highlighted })}
|
|
50
|
+
{:else}
|
|
51
|
+
{label || value}
|
|
52
|
+
{/if}
|
|
53
|
+
{/snippet}
|
|
54
|
+
</SelectPrimitive.Item>
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type { Select as SelectPrimitiveNs } from 'bits-ui';
|
|
2
|
+
import type { WithoutChild } from '../../../blocks/utils.js';
|
|
3
|
+
export type SplitButtonSelectActionProps = WithoutChild<SelectPrimitiveNs.ItemProps>;
|
|
4
|
+
declare const SplitButtonSelectAction: import("svelte").Component<Omit<SelectPrimitiveNs.ItemProps, "child">, {}, "ref">;
|
|
5
|
+
type SplitButtonSelectAction = ReturnType<typeof SplitButtonSelectAction>;
|
|
6
|
+
export default SplitButtonSelectAction;
|
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
import type { WithoutChild } from '../../../blocks/utils.js';
|
|
3
|
+
import type {
|
|
4
|
+
ButtonSize,
|
|
5
|
+
ButtonVariant
|
|
6
|
+
} from '../button';
|
|
7
|
+
|
|
8
|
+
export type SplitButtonSelectTriggerProps =
|
|
9
|
+
WithoutChild<SelectPrimitive.TriggerProps> & {
|
|
10
|
+
variant?: ButtonVariant;
|
|
11
|
+
size?: ButtonSize;
|
|
12
|
+
};
|
|
13
|
+
</script>
|
|
14
|
+
|
|
15
|
+
<script lang="ts">
|
|
16
|
+
import { Select as SelectPrimitive } from 'bits-ui';
|
|
17
|
+
import { cn } from '../../../blocks/utils.js';
|
|
18
|
+
import { buttonVariants } from '../button';
|
|
19
|
+
import { useSplitButtonRootCtx } from './split-button.svelte.js';
|
|
20
|
+
import ChevronDownIcon from '@lucide/svelte/icons/chevron-down';
|
|
21
|
+
|
|
22
|
+
let {
|
|
23
|
+
ref = $bindable(null),
|
|
24
|
+
class: className,
|
|
25
|
+
variant = 'default',
|
|
26
|
+
size = 'icon',
|
|
27
|
+
disabled,
|
|
28
|
+
children,
|
|
29
|
+
...restProps
|
|
30
|
+
}: SplitButtonSelectTriggerProps = $props();
|
|
31
|
+
|
|
32
|
+
const root = useSplitButtonRootCtx();
|
|
33
|
+
</script>
|
|
34
|
+
|
|
35
|
+
<SelectPrimitive.Trigger
|
|
36
|
+
bind:ref
|
|
37
|
+
data-slot="split-button-select-trigger"
|
|
38
|
+
disabled={disabled || root.disabled}
|
|
39
|
+
class={cn(buttonVariants({ variant, size }), className)}
|
|
40
|
+
{...restProps}
|
|
41
|
+
>
|
|
42
|
+
{#if children}
|
|
43
|
+
{@render children()}
|
|
44
|
+
{:else}
|
|
45
|
+
<ChevronDownIcon />
|
|
46
|
+
{/if}
|
|
47
|
+
</SelectPrimitive.Trigger>
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import type { WithoutChild } from '../../../blocks/utils.js';
|
|
2
|
+
import type { ButtonSize, ButtonVariant } from '../button';
|
|
3
|
+
export type SplitButtonSelectTriggerProps = WithoutChild<SelectPrimitive.TriggerProps> & {
|
|
4
|
+
variant?: ButtonVariant;
|
|
5
|
+
size?: ButtonSize;
|
|
6
|
+
};
|
|
7
|
+
import { Select as SelectPrimitive } from 'bits-ui';
|
|
8
|
+
declare const SplitButtonSelectTrigger: import("svelte").Component<SplitButtonSelectTriggerProps, {}, "ref">;
|
|
9
|
+
type SplitButtonSelectTrigger = ReturnType<typeof SplitButtonSelectTrigger>;
|
|
10
|
+
export default SplitButtonSelectTrigger;
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
import type { WithoutChild } from '../../../blocks/utils.js';
|
|
3
|
+
|
|
4
|
+
export type SplitButtonSelectProps = Omit<
|
|
5
|
+
WithoutChild<SelectPrimitive.RootProps>,
|
|
6
|
+
'type' | 'value' | 'onValueChange'
|
|
7
|
+
>;
|
|
8
|
+
</script>
|
|
9
|
+
|
|
10
|
+
<script lang="ts">
|
|
11
|
+
import { Select as SelectPrimitive } from 'bits-ui';
|
|
12
|
+
import { useSplitButtonRootCtx } from './split-button.svelte.js';
|
|
13
|
+
|
|
14
|
+
let {
|
|
15
|
+
open = $bindable(false),
|
|
16
|
+
children,
|
|
17
|
+
...restProps
|
|
18
|
+
}: SplitButtonSelectProps = $props();
|
|
19
|
+
|
|
20
|
+
const root = useSplitButtonRootCtx();
|
|
21
|
+
</script>
|
|
22
|
+
|
|
23
|
+
<SelectPrimitive.Root
|
|
24
|
+
type="single"
|
|
25
|
+
bind:open
|
|
26
|
+
bind:value={root.action}
|
|
27
|
+
onValueChange={(v) => root.onSelect(v)}
|
|
28
|
+
{...restProps}
|
|
29
|
+
>
|
|
30
|
+
{@render children?.()}
|
|
31
|
+
</SelectPrimitive.Root>
|
|
@@ -0,0 +1,6 @@
|
|
|
1
|
+
import type { WithoutChild } from '../../../blocks/utils.js';
|
|
2
|
+
export type SplitButtonSelectProps = Omit<WithoutChild<SelectPrimitive.RootProps>, 'type' | 'value' | 'onValueChange'>;
|
|
3
|
+
import { Select as SelectPrimitive } from 'bits-ui';
|
|
4
|
+
declare const SplitButtonSelect: import("svelte").Component<SplitButtonSelectProps, {}, "open">;
|
|
5
|
+
type SplitButtonSelect = ReturnType<typeof SplitButtonSelect>;
|
|
6
|
+
export default SplitButtonSelect;
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
<script lang="ts" module>
|
|
2
|
+
import type { ButtonGroupOrientation } from '../button-group';
|
|
3
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
4
|
+
import type { WithChildren, WithoutChildren } from 'bits-ui';
|
|
5
|
+
import type { SplitButtonClickEvent } from './split-button.svelte.js';
|
|
6
|
+
|
|
7
|
+
export type SplitButtonPropsWithoutHTML = WithChildren<{
|
|
8
|
+
ref?: HTMLDivElement | null;
|
|
9
|
+
orientation?: ButtonGroupOrientation;
|
|
10
|
+
value?: string;
|
|
11
|
+
disabled?: boolean;
|
|
12
|
+
onclick?: (event: SplitButtonClickEvent) => void;
|
|
13
|
+
onClickPromise?: (event: SplitButtonClickEvent) => Promise<void>;
|
|
14
|
+
onActionSelect?: (value: string) => void;
|
|
15
|
+
}>;
|
|
16
|
+
|
|
17
|
+
export type SplitButtonProps = SplitButtonPropsWithoutHTML &
|
|
18
|
+
WithoutChildren<Omit<HTMLAttributes<HTMLDivElement>, 'onclick'>>;
|
|
19
|
+
</script>
|
|
20
|
+
|
|
21
|
+
<script lang="ts">
|
|
22
|
+
import ButtonGroup from '../button-group/button-group.svelte';
|
|
23
|
+
import { useSplitButtonRoot } from './split-button.svelte.js';
|
|
24
|
+
import { box } from 'svelte-toolbelt';
|
|
25
|
+
|
|
26
|
+
let {
|
|
27
|
+
ref = $bindable(null),
|
|
28
|
+
class: className,
|
|
29
|
+
orientation = 'horizontal',
|
|
30
|
+
value = $bindable(undefined),
|
|
31
|
+
disabled,
|
|
32
|
+
onclick,
|
|
33
|
+
onClickPromise,
|
|
34
|
+
onActionSelect,
|
|
35
|
+
children,
|
|
36
|
+
...rest
|
|
37
|
+
}: SplitButtonProps = $props();
|
|
38
|
+
|
|
39
|
+
useSplitButtonRoot({
|
|
40
|
+
value: box.with(
|
|
41
|
+
() => value,
|
|
42
|
+
(v) => (value = v)
|
|
43
|
+
),
|
|
44
|
+
disabled: box.with(() => disabled),
|
|
45
|
+
onclick: box.with(() => onclick),
|
|
46
|
+
onClickPromise: box.with(() => onClickPromise),
|
|
47
|
+
onActionSelect: box.with(() => onActionSelect)
|
|
48
|
+
});
|
|
49
|
+
</script>
|
|
50
|
+
|
|
51
|
+
<ButtonGroup bind:ref class={className} {orientation} {...rest}>
|
|
52
|
+
{@render children?.()}
|
|
53
|
+
</ButtonGroup>
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import type { ButtonGroupOrientation } from '../button-group';
|
|
2
|
+
import type { HTMLAttributes } from 'svelte/elements';
|
|
3
|
+
import type { WithChildren, WithoutChildren } from 'bits-ui';
|
|
4
|
+
import type { SplitButtonClickEvent } from './split-button.svelte.js';
|
|
5
|
+
export type SplitButtonPropsWithoutHTML = WithChildren<{
|
|
6
|
+
ref?: HTMLDivElement | null;
|
|
7
|
+
orientation?: ButtonGroupOrientation;
|
|
8
|
+
value?: string;
|
|
9
|
+
disabled?: boolean;
|
|
10
|
+
onclick?: (event: SplitButtonClickEvent) => void;
|
|
11
|
+
onClickPromise?: (event: SplitButtonClickEvent) => Promise<void>;
|
|
12
|
+
onActionSelect?: (value: string) => void;
|
|
13
|
+
}>;
|
|
14
|
+
export type SplitButtonProps = SplitButtonPropsWithoutHTML & WithoutChildren<Omit<HTMLAttributes<HTMLDivElement>, 'onclick'>>;
|
|
15
|
+
declare const SplitButton: import("svelte").Component<SplitButtonProps, {}, "value" | "ref">;
|
|
16
|
+
type SplitButton = ReturnType<typeof SplitButton>;
|
|
17
|
+
export default SplitButton;
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
import { Context } from 'runed';
|
|
2
|
+
class SplitButtonRootState {
|
|
3
|
+
opts;
|
|
4
|
+
pending = $state(false);
|
|
5
|
+
constructor(opts) {
|
|
6
|
+
this.opts = opts;
|
|
7
|
+
}
|
|
8
|
+
seed(value) {
|
|
9
|
+
if (this.opts.value.current === undefined) {
|
|
10
|
+
this.opts.value.current = value;
|
|
11
|
+
}
|
|
12
|
+
}
|
|
13
|
+
get action() {
|
|
14
|
+
return this.opts.value.current ?? '';
|
|
15
|
+
}
|
|
16
|
+
set action(value) {
|
|
17
|
+
this.opts.value.current = value;
|
|
18
|
+
}
|
|
19
|
+
get disabled() {
|
|
20
|
+
return this.opts.disabled.current === true || this.pending;
|
|
21
|
+
}
|
|
22
|
+
get loading() {
|
|
23
|
+
return this.pending;
|
|
24
|
+
}
|
|
25
|
+
onSelect(value) {
|
|
26
|
+
this.opts.onActionSelect.current?.(value);
|
|
27
|
+
}
|
|
28
|
+
async onclick(event) {
|
|
29
|
+
const action = this.opts.value.current;
|
|
30
|
+
if (action === undefined)
|
|
31
|
+
return;
|
|
32
|
+
const payload = { action, originalEvent: event };
|
|
33
|
+
this.opts.onclick.current?.(payload);
|
|
34
|
+
const promiseFn = this.opts.onClickPromise.current;
|
|
35
|
+
if (promiseFn) {
|
|
36
|
+
this.pending = true;
|
|
37
|
+
try {
|
|
38
|
+
await promiseFn(payload);
|
|
39
|
+
}
|
|
40
|
+
finally {
|
|
41
|
+
this.pending = false;
|
|
42
|
+
}
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
class SplitButtonActionState {
|
|
47
|
+
opts;
|
|
48
|
+
rootState;
|
|
49
|
+
constructor(opts, rootState) {
|
|
50
|
+
this.opts = opts;
|
|
51
|
+
this.rootState = rootState;
|
|
52
|
+
this.rootState.seed(this.opts.value.current);
|
|
53
|
+
}
|
|
54
|
+
isActive = $derived.by(() => this.opts.value.current === this.rootState.opts.value.current);
|
|
55
|
+
onclick(event) {
|
|
56
|
+
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
57
|
+
this.opts.onclick.current?.(event);
|
|
58
|
+
this.rootState.onclick(event);
|
|
59
|
+
}
|
|
60
|
+
}
|
|
61
|
+
class SplitButtonSelectActionState {
|
|
62
|
+
opts;
|
|
63
|
+
rootState;
|
|
64
|
+
constructor(opts, rootState) {
|
|
65
|
+
this.opts = opts;
|
|
66
|
+
this.rootState = rootState;
|
|
67
|
+
this.rootState.seed(this.opts.value.current);
|
|
68
|
+
}
|
|
69
|
+
}
|
|
70
|
+
const SplitButtonCtx = new Context('split-button-root');
|
|
71
|
+
export function useSplitButtonRoot(props) {
|
|
72
|
+
return SplitButtonCtx.set(new SplitButtonRootState(props));
|
|
73
|
+
}
|
|
74
|
+
export function useSplitButtonAction(props) {
|
|
75
|
+
return new SplitButtonActionState(props, SplitButtonCtx.get());
|
|
76
|
+
}
|
|
77
|
+
export function useSplitButtonSelectAction(props) {
|
|
78
|
+
return new SplitButtonSelectActionState(props, SplitButtonCtx.get());
|
|
79
|
+
}
|
|
80
|
+
export function useSplitButtonRootCtx() {
|
|
81
|
+
return SplitButtonCtx.get();
|
|
82
|
+
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@profidev/pleiades",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.8.0",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "https://github.com/Profiidev/pleiades"
|
|
@@ -226,6 +226,10 @@
|
|
|
226
226
|
"types": "./dist/components/table/table-head.svelte.d.ts",
|
|
227
227
|
"svelte": "./dist/components/table/table-head.svelte"
|
|
228
228
|
},
|
|
229
|
+
"./components/ui-extra/alert-dialog": {
|
|
230
|
+
"types": "./dist/components/ui-extra/alert-dialog/index.d.ts",
|
|
231
|
+
"svelte": "./dist/components/ui-extra/alert-dialog/index.js"
|
|
232
|
+
},
|
|
229
233
|
"./components/ui-extra/avatar": {
|
|
230
234
|
"types": "./dist/components/ui-extra/avatar/index.d.ts",
|
|
231
235
|
"svelte": "./dist/components/ui-extra/avatar/index.js"
|
|
@@ -238,6 +242,10 @@
|
|
|
238
242
|
"types": "./dist/components/ui-extra/button/index.d.ts",
|
|
239
243
|
"svelte": "./dist/components/ui-extra/button/index.js"
|
|
240
244
|
},
|
|
245
|
+
"./components/ui-extra/button-group": {
|
|
246
|
+
"types": "./dist/components/ui-extra/button-group/index.d.ts",
|
|
247
|
+
"svelte": "./dist/components/ui-extra/button-group/index.js"
|
|
248
|
+
},
|
|
241
249
|
"./components/ui-extra/chat": {
|
|
242
250
|
"types": "./dist/components/ui-extra/chat/index.d.ts",
|
|
243
251
|
"svelte": "./dist/components/ui-extra/chat/index.js"
|
|
@@ -250,6 +258,10 @@
|
|
|
250
258
|
"types": "./dist/components/ui-extra/command/index.d.ts",
|
|
251
259
|
"svelte": "./dist/components/ui-extra/command/index.js"
|
|
252
260
|
},
|
|
261
|
+
"./components/ui-extra/confirm-delete-dialog": {
|
|
262
|
+
"types": "./dist/components/ui-extra/confirm-delete-dialog/index.d.ts",
|
|
263
|
+
"svelte": "./dist/components/ui-extra/confirm-delete-dialog/index.js"
|
|
264
|
+
},
|
|
253
265
|
"./components/ui-extra/copy-button": {
|
|
254
266
|
"types": "./dist/components/ui-extra/copy-button/index.d.ts",
|
|
255
267
|
"svelte": "./dist/components/ui-extra/copy-button/index.js"
|
|
@@ -278,6 +290,10 @@
|
|
|
278
290
|
"types": "./dist/components/ui-extra/file-drop-zone/index.d.ts",
|
|
279
291
|
"svelte": "./dist/components/ui-extra/file-drop-zone/index.js"
|
|
280
292
|
},
|
|
293
|
+
"./components/ui-extra/github-button": {
|
|
294
|
+
"types": "./dist/components/ui-extra/github-button/index.d.ts",
|
|
295
|
+
"svelte": "./dist/components/ui-extra/github-button/index.js"
|
|
296
|
+
},
|
|
281
297
|
"./components/ui-extra/image-cropper": {
|
|
282
298
|
"types": "./dist/components/ui-extra/image-cropper/index.d.ts",
|
|
283
299
|
"svelte": "./dist/components/ui-extra/image-cropper/index.js"
|
|
@@ -342,6 +358,14 @@
|
|
|
342
358
|
"types": "./dist/components/ui-extra/scroll-area/index.d.ts",
|
|
343
359
|
"svelte": "./dist/components/ui-extra/scroll-area/index.js"
|
|
344
360
|
},
|
|
361
|
+
"./components/ui-extra/select": {
|
|
362
|
+
"types": "./dist/components/ui-extra/select/index.d.ts",
|
|
363
|
+
"svelte": "./dist/components/ui-extra/select/index.js"
|
|
364
|
+
},
|
|
365
|
+
"./components/ui-extra/separator": {
|
|
366
|
+
"types": "./dist/components/ui-extra/separator/index.d.ts",
|
|
367
|
+
"svelte": "./dist/components/ui-extra/separator/index.js"
|
|
368
|
+
},
|
|
345
369
|
"./components/ui-extra/snippet": {
|
|
346
370
|
"types": "./dist/components/ui-extra/snippet/index.d.ts",
|
|
347
371
|
"svelte": "./dist/components/ui-extra/snippet/index.js"
|
|
@@ -350,6 +374,10 @@
|
|
|
350
374
|
"types": "./dist/components/ui-extra/spinner/index.d.ts",
|
|
351
375
|
"svelte": "./dist/components/ui-extra/spinner/index.js"
|
|
352
376
|
},
|
|
377
|
+
"./components/ui-extra/split-button": {
|
|
378
|
+
"types": "./dist/components/ui-extra/split-button/index.d.ts",
|
|
379
|
+
"svelte": "./dist/components/ui-extra/split-button/index.js"
|
|
380
|
+
},
|
|
353
381
|
"./components/ui-extra/star-rating": {
|
|
354
382
|
"types": "./dist/components/ui-extra/star-rating/index.d.ts",
|
|
355
383
|
"svelte": "./dist/components/ui-extra/star-rating/index.js"
|
|
@@ -767,24 +795,24 @@
|
|
|
767
795
|
"zod": "^4.0.0"
|
|
768
796
|
},
|
|
769
797
|
"devDependencies": {
|
|
770
|
-
"@jsrepo/transform-prettier": "
|
|
771
|
-
"@sveltejs/adapter-auto": "
|
|
772
|
-
"@sveltejs/package": "
|
|
773
|
-
"@sveltejs/vite-plugin-svelte": "
|
|
774
|
-
"@tailwindcss/typography": "
|
|
775
|
-
"@types/node": "
|
|
776
|
-
"jsrepo": "
|
|
777
|
-
"oxlint": "
|
|
778
|
-
"oxlint-tsgolint": "
|
|
779
|
-
"prettier": "
|
|
780
|
-
"prettier-plugin-svelte": "
|
|
781
|
-
"prettier-plugin-tailwindcss": "
|
|
782
|
-
"publint": "
|
|
783
|
-
"svelte-check": "
|
|
784
|
-
"tailwindcss": "
|
|
785
|
-
"tw-animate-css": "
|
|
786
|
-
"typescript": "
|
|
787
|
-
"vite": "
|
|
798
|
+
"@jsrepo/transform-prettier": "7.0.0",
|
|
799
|
+
"@sveltejs/adapter-auto": "7.0.1",
|
|
800
|
+
"@sveltejs/package": "2.5.7",
|
|
801
|
+
"@sveltejs/vite-plugin-svelte": "7.0.0",
|
|
802
|
+
"@tailwindcss/typography": "0.5.19",
|
|
803
|
+
"@types/node": "25.6.0",
|
|
804
|
+
"jsrepo": "3.7.0",
|
|
805
|
+
"oxlint": "1.61.0",
|
|
806
|
+
"oxlint-tsgolint": "0.21.1",
|
|
807
|
+
"prettier": "3.8.3",
|
|
808
|
+
"prettier-plugin-svelte": "3.5.1",
|
|
809
|
+
"prettier-plugin-tailwindcss": "0.7.2",
|
|
810
|
+
"publint": "0.3.18",
|
|
811
|
+
"svelte-check": "4.4.6",
|
|
812
|
+
"tailwindcss": "4.2.4",
|
|
813
|
+
"tw-animate-css": "1.4.0",
|
|
814
|
+
"typescript": "6.0.3",
|
|
815
|
+
"vite": "8.0.10"
|
|
788
816
|
},
|
|
789
817
|
"peerDependencies": {
|
|
790
818
|
"@sveltejs/kit": "^2.0.0",
|