Skip to content

Commit f5a069d

Browse files
shinokadashinokada
committed
fix: change DropdownItem to DropdownUl and DropdownLi
1 parent 412d0e2 commit f5a069d

File tree

12 files changed

+113
-128
lines changed

12 files changed

+113
-128
lines changed

‎.changeset/brave-jobs-sparkle.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'svelte-5-ui-lib': minor
3+
---
4+
5+
fix: change DropdownItem to DropdownUl and DropdownLi

‎src/lib/dropdown/DropdownItem.svelte‎

Lines changed: 0 additions & 42 deletions
This file was deleted.

‎src/lib/dropdown/DropdownLi.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<script lang="ts">
22
import { page } from '$app/stores';
3-
import { type DropdownItemProps as Props, dropdownli } from './';
3+
import { type DropdownLiProps as Props, dropdownli } from './';
44
55
let { aClass, children, href, activeClass, liClass, ...restProps }: Props =
66
$props();

‎src/lib/dropdown/DropdownUl.svelte‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<script lang="ts">
2-
import { type DropdownulProps as Props, dropdownul } from '.'
2+
import { type DropdownUlProps as Props, dropdownul } from '.'
33
44
let {
55
children,

‎src/lib/dropdown/index.ts‎

Lines changed: 0 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import Dropdown from './Dropdown.svelte';
22
import DropdownDivider from './DropdownDivider.svelte';
3-
import DropdownItem from './DropdownItem.svelte';
43
import DropdownUl from './DropdownUl.svelte';
54
import DropdownLi from './DropdownLi.svelte';
65
import { dropdown, dropdowndivider, dropdownli, dropdownul } from './theme';
@@ -52,15 +51,13 @@ interface DropdownUlProps extends HTMLAttributes<HTMLUListElement> {
5251
export {
5352
Dropdown,
5453
DropdownDivider,
55-
DropdownItem,
5654
DropdownUl,
5755
DropdownLi,
5856
dropdown,
5957
dropdowndivider,
6058
dropdownli, dropdownul,
6159
type DropdownProps,
6260
type DropdownDividerProps,
63-
type DropdownItemProps,
6461
type DropdownLiProps,
6562
type DropdownUlProps
6663
};

‎src/routes/components/avatar/+page.svelte‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,8 @@
33
Avatar,
44
Button,
55
Dropdown,
6-
DropdownItem,
6+
DropdownLi,
7+
DropdownUl,
78
DropdownDivider,
89
uiHelpers,
910
type AvatarProps
@@ -208,11 +209,13 @@
208209
<div class="truncate font-medium">[email protected]</div>
209210
{/snippet}
210211
{#snippet children()}
211-
<DropdownItem href="/">Dashboard</DropdownItem>
212-
<DropdownItem href="/nav">Navbar</DropdownItem>
213-
<DropdownItem href="/footer">Footer</DropdownItem>
214-
<DropdownDivider />
215-
<DropdownItem href="/dropdown">Dropdown</DropdownItem>
212+
<DropdownUl>
213+
<DropdownLi href="/">Dashboard</DropdownLi>
214+
<DropdownLi href="/nav">Navbar</DropdownLi>
215+
<DropdownLi href="/footer">Footer</DropdownLi>
216+
<DropdownDivider />
217+
<DropdownLi href="/dropdown">Dropdown</DropdownLi>
218+
</DropdownUl>
216219
{/snippet}
217220
</Dropdown>
218221
</div>

‎src/routes/components/dropdown/+page.svelte‎

Lines changed: 32 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@
88
Button,
99
Dropdown,
1010
DropdownDivider,
11-
DropdownItem,
11+
DropdownUl, DropdownLi,
1212
uiHelpers
1313
} from '$lib';
1414
import { ChevronDownOutline } from 'flowbite-svelte-icons';
@@ -86,10 +86,12 @@
8686
divClass="absolute top-[40px] -left-[150px]"
8787
>
8888
{#snippet children()}
89-
<DropdownItem href="/">Dashboard</DropdownItem>
90-
<DropdownItem href="/components/drawer">Drawer</DropdownItem>
91-
<DropdownItem href="/components/footer">Footer</DropdownItem>
92-
<DropdownItem href="/components">Alert</DropdownItem>
89+
<DropdownUl>
90+
<DropdownLi href="/">Dashboard</DropdownLi>
91+
<DropdownLi href="/components/drawer">Drawer</DropdownLi>
92+
<DropdownLi href="/components/footer">Footer</DropdownLi>
93+
<DropdownLi href="/components">Alert</DropdownLi>
94+
</DropdownUl>
9395
{/snippet}
9496
</Dropdown>
9597
</div>
@@ -112,11 +114,13 @@
112114
divClass="absolute top-[40px] -left-[150px]"
113115
>
114116
{#snippet children()}
115-
<DropdownItem href="/">Dashboard</DropdownItem>
116-
<DropdownItem href="/components/dropdown">Dropdown</DropdownItem>
117-
<DropdownItem href="/components/footer">Footer</DropdownItem>
118-
<DropdownItem href="/dropdown">Dropdown</DropdownItem>
119-
{/snippet}
117+
<DropdownUl>
118+
<DropdownLi href="/">Dashboard</DropdownLi>
119+
<DropdownLi href="/components/dropdown">Dropdown</DropdownLi>
120+
<DropdownLi href="/components/footer">Footer</DropdownLi>
121+
<DropdownLi href="/dropdown">Dropdown</DropdownLi>
122+
</DropdownUl>
123+
{/snippet}
120124
</Dropdown>
121125
</div>
122126
</CodeWrapper>
@@ -140,11 +144,13 @@
140144
<div class="truncate font-medium">[email protected]</div>
141145
{/snippet}
142146
{#snippet children()}
143-
<DropdownItem href="/">Dashboard</DropdownItem>
144-
<DropdownItem href="/components/dropdown">Dropdown</DropdownItem>
145-
<DropdownItem href="/components/footer">Footer</DropdownItem>
147+
<DropdownUl>
148+
<DropdownLi href="/">Dashboard</DropdownLi>
149+
<DropdownLi href="/components/dropdown">Dropdown</DropdownLi>
150+
<DropdownLi href="/components/footer">Footer</DropdownLi>
146151
<DropdownDivider />
147-
<DropdownItem href="/dropdown">Dropdown</DropdownItem>
152+
<DropdownLi href="/dropdown">Dropdown</DropdownLi>
153+
</DropdownUl>
148154
{/snippet}
149155
{#snippet footer()}
150156
<div class="py-2">
@@ -175,10 +181,12 @@
175181
divClass="absolute top-[40px] -left-[150px]"
176182
>
177183
{#snippet children()}
178-
<DropdownItem href="/">Dashboard</DropdownItem>
179-
<DropdownItem href="/components/drawer">Drawer</DropdownItem>
180-
<DropdownItem href="/components/footer">Footer</DropdownItem>
181-
<DropdownItem href="/components">Alert</DropdownItem>
184+
<DropdownUl>
185+
<DropdownLi href="/">Dashboard</DropdownLi>
186+
<DropdownLi href="/components/drawer">Drawer</DropdownLi>
187+
<DropdownLi href="/components/footer">Footer</DropdownLi>
188+
<DropdownLi href="/components">Alert</DropdownLi>
189+
</DropdownUl>
182190
{/snippet}
183191
</Dropdown>
184192
</div>
@@ -199,10 +207,12 @@
199207
divClass="absolute top-[40px] -left-[150px]"
200208
>
201209
{#snippet children()}
202-
<DropdownItem href="/">Dashboard</DropdownItem>
203-
<DropdownItem href="/components/drawer">Drawer</DropdownItem>
204-
<DropdownItem href="/components/footer">Footer</DropdownItem>
205-
<DropdownItem href="/components">Alert</DropdownItem>
210+
<DropdownUl>
211+
<DropdownLi href="/">Dashboard</DropdownLi>
212+
<DropdownLi href="/components/drawer">Drawer</DropdownLi>
213+
<DropdownLi href="/components/footer">Footer</DropdownLi>
214+
<DropdownLi href="/components">Alert</DropdownLi>
215+
</DropdownUl>
206216
{/snippet}
207217
</Dropdown>
208218
</div>

‎src/routes/forms/checkbox/+page.svelte‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515
Radio,
1616
Button,
1717
Dropdown,
18-
DropdownItem,
18+
DropdownUl,
1919
Search,
2020
uiHelpers,
2121
type CheckboxItem
@@ -223,6 +223,7 @@
223223
<Search size="md" class="pl-8"/>
224224
</div>
225225
{/snippet}
226+
<DropdownUl>
226227
<li class="rounded p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
227228
<Checkbox>Robert Gouth</Checkbox>
228229
</li>
@@ -241,6 +242,7 @@
241242
<li class="rounded p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
242243
<Checkbox>Bonnie Green</Checkbox>
243244
</li>
245+
</DropdownUl>
244246
{#snippet footer()}
245247
<a
246248
href="/"

‎src/routes/forms/input-field/+page.svelte‎

Lines changed: 9 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -24,10 +24,11 @@
2424
InputAddon,
2525
ButtonGroup,
2626
Dropdown,
27-
DropdownItem,
27+
DropdownUl,
28+
DropdownLi,
2829
uiHelpers
2930
} from '$lib';
30-
// import { Dropdown, DropdownItem } from '$lib'
31+
3132
import {
3233
EyeOutline,
3334
EyeSlashOutline,
@@ -416,9 +417,11 @@
416417
</Button>
417418
</ButtonGroup>
418419
<Dropdown {dropdownStatus} {closeDropdown} {transitionParams}>
419-
<DropdownItem>Shopping</DropdownItem>
420-
<DropdownItem>Images</DropdownItem>
421-
<DropdownItem>News</DropdownItem>
422-
<DropdownItem>Finance</DropdownItem>
420+
<DropdownUl>
421+
<DropdownLi>Shopping</DropdownLi>
422+
<DropdownLi>Images</DropdownLi>
423+
<DropdownLi>News</DropdownLi>
424+
<DropdownLi>Finance</DropdownLi>
425+
</DropdownUl>
423426
</Dropdown>
424427
</CodeWrapper>

‎src/routes/forms/radio/+page.svelte‎

Lines changed: 15 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,7 @@
66
RadioButton,
77
ButtonGroup,
88
Label,
9-
P, Dropdown, Button, uiHelpers
9+
P, Dropdown, DropdownUl, Button, uiHelpers
1010
} from '$lib';
1111
// let { group = $bindable() ,technology = $bindable('svelte'), radioGroup = $bindable('notes') } = $props();
1212
// let colors = 'text-purple-500';
@@ -207,18 +207,20 @@
207207
{transitionParams}
208208
divClass="overflow-y-auto p-0 pb-3 text-sm w-64 h-64 absolute top-[50px] -left-[210px]"
209209
>
210-
<li class="rounded p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
211-
<Radio name="group3" bind:group={group3} value={1}>Enable notifications</Radio>
212-
<Helper class="ps-6">Some helpful instruction goes over here.</Helper>
213-
</li>
214-
<li class="rounded p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
215-
<Radio name="group3" bind:group={group3} value={2}>Enable 2FA auth</Radio>
216-
<Helper class="ps-6">Some helpful instruction goes over here.</Helper>
217-
</li>
218-
<li class="rounded p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
219-
<Radio name="group3" bind:group={group3} value={3}>Subscribe newsletter</Radio>
220-
<Helper class="ps-6">Some helpful instruction goes over here.</Helper>
221-
</li>
210+
<DropdownUl>
211+
<li class="rounded p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
212+
<Radio name="group3" bind:group={group3} value={1}>Enable notifications</Radio>
213+
<Helper class="ps-6">Some helpful instruction goes over here.</Helper>
214+
</li>
215+
<li class="rounded p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
216+
<Radio name="group3" bind:group={group3} value={2}>Enable 2FA auth</Radio>
217+
<Helper class="ps-6">Some helpful instruction goes over here.</Helper>
218+
</li>
219+
<li class="rounded p-2 hover:bg-gray-100 dark:hover:bg-gray-600">
220+
<Radio name="group3" bind:group={group3} value={3}>Subscribe newsletter</Radio>
221+
<Helper class="ps-6">Some helpful instruction goes over here.</Helper>
222+
</li>
223+
</DropdownUl>
222224
</Dropdown>
223225
</div>
224226
</CodeWrapper>

0 commit comments

Comments
 (0)