@x33025/sveltely 0.1.4 → 0.1.6
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/Library/Dropdown/Dropdown.demo.svelte +14 -22
- package/dist/components/Library/Dropdown/Dropdown.svelte +24 -8
- package/dist/components/Library/Dropdown/Trigger.svelte +71 -0
- package/dist/components/Library/Dropdown/Trigger.svelte.d.ts +8 -0
- package/dist/components/Library/Dropdown/context.d.ts +2 -0
- package/dist/components/Library/Dropdown/context.js +6 -0
- package/dist/components/Library/Dropdown/index.d.ts +2 -0
- package/dist/components/Library/Dropdown/index.js +2 -0
- package/dist/style.css +0 -15
- package/package.json +1 -1
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
</script>
|
|
8
8
|
|
|
9
9
|
<script lang="ts">
|
|
10
|
-
import { CheckIcon,
|
|
10
|
+
import { CheckIcon, PlusIcon, UserRoundXIcon } from '@lucide/svelte';
|
|
11
11
|
import SearchField from '../SearchField';
|
|
12
12
|
import ScrollView, { type ScrollGeometry } from '../ScrollView';
|
|
13
13
|
import Dropdown from './index';
|
|
@@ -117,31 +117,23 @@
|
|
|
117
117
|
selectedLabel={selectedWebsite?.name ?? null}
|
|
118
118
|
showCheck={false}
|
|
119
119
|
>
|
|
120
|
-
{#snippet trigger(
|
|
121
|
-
<
|
|
122
|
-
use:dropdown.useTrigger
|
|
123
|
-
type="button"
|
|
124
|
-
class="hstack w-full items-center gap-2 rounded-full border px-3 py-2 pr-2 text-left text-sm"
|
|
125
|
-
style="border-color: var(--sveltely-border-color); background: var(--sveltely-background-color);"
|
|
126
|
-
aria-expanded={dropdown.open}
|
|
127
|
-
aria-haspopup="dialog"
|
|
128
|
-
onclick={dropdown.toggle}
|
|
129
|
-
>
|
|
120
|
+
{#snippet trigger()}
|
|
121
|
+
<Dropdown.Trigger>
|
|
130
122
|
{#if selectedWebsite}
|
|
131
|
-
<span class="min-w-0
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
{#if selectedWebsite.domain}
|
|
135
|
-
<span class="max-w-32 truncate text-xs text-[var(--sveltely-secondary-color)]"
|
|
136
|
-
>{selectedWebsite.domain}</span
|
|
123
|
+
<span class="hstack min-w-0 items-center gap-2">
|
|
124
|
+
<span class="truncate text-[var(--sveltely-primary-color)]"
|
|
125
|
+
>{selectedWebsite.name}</span
|
|
137
126
|
>
|
|
138
|
-
|
|
127
|
+
{#if selectedWebsite.domain}
|
|
128
|
+
<span class="truncate text-xs text-[var(--sveltely-secondary-color)]">
|
|
129
|
+
{selectedWebsite.domain}
|
|
130
|
+
</span>
|
|
131
|
+
{/if}
|
|
132
|
+
</span>
|
|
139
133
|
{:else}
|
|
140
|
-
<span class="
|
|
141
|
-
>
|
|
134
|
+
<span class="text-[var(--sveltely-secondary-color)]">Select website</span>
|
|
142
135
|
{/if}
|
|
143
|
-
|
|
144
|
-
</button>
|
|
136
|
+
</Dropdown.Trigger>
|
|
145
137
|
{/snippet}
|
|
146
138
|
|
|
147
139
|
<SearchField bind:value={websiteQuery} placeholder="Search websites..." />
|
|
@@ -4,7 +4,11 @@
|
|
|
4
4
|
import Floating from '../Floating/Floating.svelte';
|
|
5
5
|
import { surfaceStyle, type StyleProps } from '../../../style/surface';
|
|
6
6
|
import type { Anchor } from '../../../utils/positioning';
|
|
7
|
-
import {
|
|
7
|
+
import {
|
|
8
|
+
setDropdownContext,
|
|
9
|
+
setDropdownTriggerContext,
|
|
10
|
+
type DropdownTriggerState
|
|
11
|
+
} from './context';
|
|
8
12
|
|
|
9
13
|
type Props = {
|
|
10
14
|
value?: TValue | null;
|
|
@@ -80,7 +84,7 @@
|
|
|
80
84
|
>
|
|
81
85
|
{#snippet trigger(floating)}
|
|
82
86
|
{#if triggerContent}
|
|
83
|
-
{@
|
|
87
|
+
{@const triggerState = setDropdownTriggerContext({
|
|
84
88
|
useTrigger: floating.useTrigger,
|
|
85
89
|
open: floating.open,
|
|
86
90
|
value,
|
|
@@ -91,20 +95,32 @@
|
|
|
91
95
|
openPanel: floating.openPanel,
|
|
92
96
|
closePanel: floating.closePanel
|
|
93
97
|
})}
|
|
98
|
+
{@render triggerContent(triggerState)}
|
|
94
99
|
{:else}
|
|
100
|
+
{@const triggerState = {
|
|
101
|
+
useTrigger: floating.useTrigger,
|
|
102
|
+
open: floating.open,
|
|
103
|
+
value,
|
|
104
|
+
selectedLabel: triggerText,
|
|
105
|
+
placeholder,
|
|
106
|
+
disabled,
|
|
107
|
+
toggle: floating.toggle,
|
|
108
|
+
openPanel: floating.openPanel,
|
|
109
|
+
closePanel: floating.closePanel
|
|
110
|
+
}}
|
|
95
111
|
<button
|
|
96
|
-
use:
|
|
112
|
+
use:triggerState.useTrigger
|
|
97
113
|
type="button"
|
|
98
114
|
class="dropdown-trigger justify-between"
|
|
99
115
|
aria-label={label}
|
|
100
|
-
aria-disabled={disabled}
|
|
101
|
-
{disabled}
|
|
116
|
+
aria-disabled={triggerState.disabled}
|
|
117
|
+
disabled={triggerState.disabled}
|
|
102
118
|
style={dropdownStyle}
|
|
103
|
-
aria-expanded={
|
|
119
|
+
aria-expanded={triggerState.open}
|
|
104
120
|
aria-haspopup="dialog"
|
|
105
|
-
onclick={
|
|
121
|
+
onclick={triggerState.toggle}
|
|
106
122
|
>
|
|
107
|
-
<span class="dropdown-trigger-label">{
|
|
123
|
+
<span class="dropdown-trigger-label">{triggerState.selectedLabel}</span>
|
|
108
124
|
<ChevronDownIcon class="size-4 text-[var(--sveltely-secondary-color)]" />
|
|
109
125
|
</button>
|
|
110
126
|
{/if}
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import { ChevronDownIcon } from '@lucide/svelte';
|
|
3
|
+
import type { Snippet } from 'svelte';
|
|
4
|
+
import { getDropdownTriggerContext, type DropdownTriggerState } from './context';
|
|
5
|
+
|
|
6
|
+
type Props = {
|
|
7
|
+
children?: Snippet<[DropdownTriggerState]>;
|
|
8
|
+
};
|
|
9
|
+
|
|
10
|
+
let { children }: Props = $props();
|
|
11
|
+
|
|
12
|
+
const dropdown = getDropdownTriggerContext();
|
|
13
|
+
</script>
|
|
14
|
+
|
|
15
|
+
<button
|
|
16
|
+
use:dropdown.useTrigger
|
|
17
|
+
type="button"
|
|
18
|
+
class="dropdown-trigger justify-between"
|
|
19
|
+
aria-disabled={dropdown.disabled}
|
|
20
|
+
disabled={dropdown.disabled}
|
|
21
|
+
aria-expanded={dropdown.open}
|
|
22
|
+
aria-haspopup="dialog"
|
|
23
|
+
onclick={dropdown.toggle}
|
|
24
|
+
>
|
|
25
|
+
<span class="dropdown-trigger-label">
|
|
26
|
+
{#if children}
|
|
27
|
+
{@render children(dropdown)}
|
|
28
|
+
{:else}
|
|
29
|
+
{dropdown.selectedLabel}
|
|
30
|
+
{/if}
|
|
31
|
+
</span>
|
|
32
|
+
<ChevronDownIcon class="size-4 text-[var(--sveltely-secondary-color)]" />
|
|
33
|
+
</button>
|
|
34
|
+
|
|
35
|
+
<style>
|
|
36
|
+
.dropdown-trigger {
|
|
37
|
+
display: inline-flex;
|
|
38
|
+
min-width: 8rem;
|
|
39
|
+
max-width: 100%;
|
|
40
|
+
align-items: center;
|
|
41
|
+
border: 1px solid var(--sveltely-border-color);
|
|
42
|
+
border-radius: var(--sveltely-border-radius);
|
|
43
|
+
background: var(--sveltely-background-color);
|
|
44
|
+
color: var(--sveltely-primary-color);
|
|
45
|
+
gap: var(--sveltely-gap);
|
|
46
|
+
padding: calc(var(--sveltely-padding-y) * 0.67) var(--sveltely-padding-x);
|
|
47
|
+
font-size: 0.875rem;
|
|
48
|
+
line-height: 1.25rem;
|
|
49
|
+
text-align: left;
|
|
50
|
+
transition:
|
|
51
|
+
color 150ms,
|
|
52
|
+
border-color 150ms,
|
|
53
|
+
background-color 150ms;
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
.dropdown-trigger-label {
|
|
57
|
+
min-width: 0;
|
|
58
|
+
flex: 1 1 auto;
|
|
59
|
+
overflow: hidden;
|
|
60
|
+
text-overflow: ellipsis;
|
|
61
|
+
white-space: nowrap;
|
|
62
|
+
}
|
|
63
|
+
|
|
64
|
+
.dropdown-trigger :global(svg) {
|
|
65
|
+
flex: 0 0 auto;
|
|
66
|
+
}
|
|
67
|
+
|
|
68
|
+
.dropdown-trigger:hover {
|
|
69
|
+
background: var(--sveltely-hover-color);
|
|
70
|
+
}
|
|
71
|
+
</style>
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
import type { Snippet } from 'svelte';
|
|
2
|
+
import { type DropdownTriggerState } from './context';
|
|
3
|
+
type Props = {
|
|
4
|
+
children?: Snippet<[DropdownTriggerState]>;
|
|
5
|
+
};
|
|
6
|
+
declare const Trigger: import("svelte").Component<Props, {}, "">;
|
|
7
|
+
type Trigger = ReturnType<typeof Trigger>;
|
|
8
|
+
export default Trigger;
|
|
@@ -32,3 +32,5 @@ export type DropdownContext<TValue = DropdownValue> = {
|
|
|
32
32
|
};
|
|
33
33
|
export declare const setDropdownContext: <TValue>(context: DropdownContext<TValue>) => void;
|
|
34
34
|
export declare const getDropdownContext: <TValue>() => DropdownContext<TValue>;
|
|
35
|
+
export declare const setDropdownTriggerContext: <TValue>(context: DropdownTriggerState<TValue>) => DropdownTriggerState<TValue>;
|
|
36
|
+
export declare const getDropdownTriggerContext: <TValue>() => DropdownTriggerState<TValue>;
|
|
@@ -1,6 +1,12 @@
|
|
|
1
1
|
import { getContext, setContext } from 'svelte';
|
|
2
2
|
const dropdownContextKey = Symbol('dropdown');
|
|
3
|
+
const dropdownTriggerContextKey = Symbol('dropdown-trigger');
|
|
3
4
|
export const setDropdownContext = (context) => {
|
|
4
5
|
setContext(dropdownContextKey, context);
|
|
5
6
|
};
|
|
6
7
|
export const getDropdownContext = () => getContext(dropdownContextKey);
|
|
8
|
+
export const setDropdownTriggerContext = (context) => {
|
|
9
|
+
setContext(dropdownTriggerContextKey, context);
|
|
10
|
+
return context;
|
|
11
|
+
};
|
|
12
|
+
export const getDropdownTriggerContext = () => getContext(dropdownTriggerContextKey);
|
|
@@ -3,11 +3,13 @@ import Action from './Action.svelte';
|
|
|
3
3
|
import Divider from './Divider.svelte';
|
|
4
4
|
import Item from './Item.svelte';
|
|
5
5
|
import Section from './Section.svelte';
|
|
6
|
+
import Trigger from './Trigger.svelte';
|
|
6
7
|
declare const Dropdown: typeof DropdownComponent & {
|
|
7
8
|
Action: typeof Action;
|
|
8
9
|
Divider: typeof Divider;
|
|
9
10
|
Item: typeof Item;
|
|
10
11
|
Section: typeof Section;
|
|
12
|
+
Trigger: typeof Trigger;
|
|
11
13
|
};
|
|
12
14
|
export default Dropdown;
|
|
13
15
|
export type { DropdownActionState, DropdownItemState, DropdownTriggerState } from './context';
|
|
@@ -3,9 +3,11 @@ import Action from './Action.svelte';
|
|
|
3
3
|
import Divider from './Divider.svelte';
|
|
4
4
|
import Item from './Item.svelte';
|
|
5
5
|
import Section from './Section.svelte';
|
|
6
|
+
import Trigger from './Trigger.svelte';
|
|
6
7
|
const Dropdown = DropdownComponent;
|
|
7
8
|
Dropdown.Action = Action;
|
|
8
9
|
Dropdown.Divider = Divider;
|
|
9
10
|
Dropdown.Item = Item;
|
|
10
11
|
Dropdown.Section = Section;
|
|
12
|
+
Dropdown.Trigger = Trigger;
|
|
11
13
|
export default Dropdown;
|
package/dist/style.css
CHANGED
|
@@ -298,9 +298,6 @@
|
|
|
298
298
|
.max-w-3xl {
|
|
299
299
|
max-width: var(--container-3xl);
|
|
300
300
|
}
|
|
301
|
-
.max-w-32 {
|
|
302
|
-
max-width: calc(var(--spacing) * 32);
|
|
303
|
-
}
|
|
304
301
|
.max-w-md {
|
|
305
302
|
max-width: var(--container-md);
|
|
306
303
|
}
|
|
@@ -412,9 +409,6 @@
|
|
|
412
409
|
.rounded {
|
|
413
410
|
border-radius: 0.25rem;
|
|
414
411
|
}
|
|
415
|
-
.rounded-full {
|
|
416
|
-
border-radius: calc(infinity * 1px);
|
|
417
|
-
}
|
|
418
412
|
.rounded-md {
|
|
419
413
|
border-radius: var(--radius-md);
|
|
420
414
|
}
|
|
@@ -458,18 +452,9 @@
|
|
|
458
452
|
.px-2 {
|
|
459
453
|
padding-inline: calc(var(--spacing) * 2);
|
|
460
454
|
}
|
|
461
|
-
.px-3 {
|
|
462
|
-
padding-inline: calc(var(--spacing) * 3);
|
|
463
|
-
}
|
|
464
455
|
.py-1 {
|
|
465
456
|
padding-block: calc(var(--spacing) * 1);
|
|
466
457
|
}
|
|
467
|
-
.py-2 {
|
|
468
|
-
padding-block: calc(var(--spacing) * 2);
|
|
469
|
-
}
|
|
470
|
-
.pr-2 {
|
|
471
|
-
padding-right: calc(var(--spacing) * 2);
|
|
472
|
-
}
|
|
473
458
|
.text-left {
|
|
474
459
|
text-align: left;
|
|
475
460
|
}
|