fix(Dropdown): refactored Item

fix(Dropdown): added Divider docs(dropdown): updated examples
N00nDay · Oct 21, 2022 · 677a33a · 677a33a · vercel · Oct 21, 2022
1 parent 8848f45
commit 677a33a
Show file tree

Hide file tree

Showing 5 changed files with 169 additions and 21 deletions.
diff --git a/src/lib/components/dropdown/Divider.svelte b/src/lib/components/dropdown/Divider.svelte
@@ -0,0 +1,22 @@
+<script lang="ts">
+	import { twMerge } from 'tailwind-merge';
+	import { get_current_component } from 'svelte/internal';
+	import { forwardEventsBuilder, useActions, type ActionArray } from '../../actions';
+	export let use: ActionArray = [];
+	import { exclude } from '../../utils/exclude';
+	const forwardEvents = forwardEventsBuilder(get_current_component());
+
+	const defaultClass = 'relative my-2 h-px';
+	$: finalClass = twMerge(defaultClass, $$props.class);
+</script>
+
+<div
+	class={finalClass}
+	use:useActions={use}
+	use:forwardEvents
+	{...exclude($$props, ['use', 'class'])}
+>
+	<div class="absolute inset-0 flex items-center" aria-hidden="true">
+		<div class="w-full border-t light-border-base dark:dark-border-base" />
+	</div>
+</div>
diff --git a/src/lib/components/dropdown/Item.svelte b/src/lib/components/dropdown/Item.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
 	import { DROPDOWN_CONTEXT_ID } from './Dropdown.svelte';
+	import HoverBackground from '../HoverBackground.svelte';
 	import { useContext } from '../../utils/useContext';
 	import { twMerge } from 'tailwind-merge';
 	import { get_current_component } from 'svelte/internal';
@@ -8,14 +9,16 @@
 	import { exclude } from '../../utils/exclude';
 	const forwardEvents = forwardEventsBuilder(get_current_component());
 
+	export let label: string;
+
 	useContext({
 		context_id: DROPDOWN_CONTEXT_ID,
 		parent: 'Dropdown',
 		component: 'DropdownItem'
 	});
 
 	const defaultClass =
-		'w-full group flex items-center px-3 py-2 text-sm font-medium rounded-md overflow-hidden text-light-secondary-content dark:text-dark-secondary-content dark:hover:bg-dark-icon-background-hover hover:bg-light-icon-background-hover hover:text-light-content dark:hover:text-dark-content';
+		'w-full group relative flex items-center px-3 py-2 text-sm font-medium rounded-md overflow-hidden text-light-secondary-content dark:text-dark-secondary-content';
 	$: finalClass = twMerge(defaultClass, $$props.class);
 </script>
 
@@ -26,5 +29,11 @@
 	use:forwardEvents
 	{...exclude($$props, ['use', 'class'])}
 >
-	<slot />
+	<span class="flex items-center justify-start flex-grow">
+		<slot name="icon" />
+		<span class="truncate" class:ml-3={$$slots.icon}>{label}</span>
+	</span>
+
+	<slot name="extra" />
+	<HoverBackground class="rounded-md" />
 </button>
diff --git a/src/lib/components/dropdown/index.ts b/src/lib/components/dropdown/index.ts
@@ -1,10 +1,14 @@
 import OriginalDropdown from './Dropdown.svelte';
 import OriginalItems from './Items.svelte';
 import Item from './Item.svelte';
+import Divider from './Divider.svelte';
+import Icon from '../icon/Icon.svelte';
 
 const Dropdown = OriginalDropdown as DropdownStatic;
 Dropdown.Items = OriginalItems as DropdownItemsStatic;
-Dropdown.Items.Item = Item;
+Dropdown.Items.Item = Item as ItemStatic;
+Dropdown.Items.Divider = Divider;
+Dropdown.Items.Item.Icon = Icon;
 
 export default Dropdown;
 
@@ -15,5 +19,11 @@ export interface DropdownStatic {
 
 export interface DropdownItemsStatic {
 	new (...args: ConstructorParameters<typeof OriginalItems>): OriginalItems;
-	Item: typeof Item;
+	Item: ItemStatic;
+	Divider: typeof Divider;
+}
+
+export interface ItemStatic {
+	new (...args: ConstructorParameters<typeof Item>): Item;
+	Icon: typeof Icon;
 }
diff --git a/src/routes/dropdown/+page.svelte b/src/routes/dropdown/+page.svelte
@@ -1,7 +1,17 @@
 <script lang="ts">
-	import { Dropdown, Button, Card, Col } from '../../lib';
-	import { example, props, slots, itemsProps, itemsSlots, itemSlots } from './examples';
+	import { Dropdown, Button, Card, Col, Badge } from '../../lib';
+	import {
+		example,
+		props,
+		slots,
+		itemsProps,
+		itemsSlots,
+		itemSlots,
+		itemProps,
+		iconProps
+	} from './examples';
 	import { PropsTable, SlotsTable, CodeBlock } from '../../docs';
+	import { home, trash } from '../../docs/icons';
 
 	let visible1 = false;
 	let visible2 = false;
@@ -32,9 +42,21 @@
 				<Dropdown bind:visible={visible1}>
 					<Button slot="trigger" type="primary" on:click={toggleDropdown1}>Toggle Dropdown</Button>
 					<Dropdown.Items slot="items">
-						<Dropdown.Items.Item on:click={closeDropdown1}>Item 1</Dropdown.Items.Item>
-						<Dropdown.Items.Item on:click={closeDropdown1}>Item 2</Dropdown.Items.Item>
-						<Dropdown.Items.Item on:click={closeDropdown1}>Item 3</Dropdown.Items.Item>
+						<Dropdown.Items.Item on:click={closeDropdown1} label="Item 1">
+							<Dropdown.Items.Item.Icon slot="icon" data={trash} />
+						</Dropdown.Items.Item>
+						<Dropdown.Items.Item on:click={closeDropdown1} label="Item 2">
+							<Dropdown.Items.Item.Icon slot="extra" data={trash} />
+						</Dropdown.Items.Item>
+						<Dropdown.Items.Item on:click={closeDropdown1} label="Notifications">
+							<Badge type="info" slot="extra">+99</Badge>
+						</Dropdown.Items.Item>
+						<Dropdown.Items.Divider />
+						<Button type="danger" class="w-full justify-between">
+							<Button.Leading slot="leading" data={home} />
+							Home
+							<Button.Trailing slot="trailing" data={home} />
+						</Button>
 					</Dropdown.Items>
 				</Dropdown>
 
@@ -55,9 +77,9 @@
 						/>
 					</button>
 					<Dropdown.Items slot="items" placement="right">
-						<Dropdown.Items.Item on:click={closeDropdown2}>Item 1</Dropdown.Items.Item>
-						<Dropdown.Items.Item on:click={closeDropdown2}>Item 2</Dropdown.Items.Item>
-						<Dropdown.Items.Item on:click={closeDropdown2}>Item 3</Dropdown.Items.Item>
+						<Dropdown.Items.Item on:click={closeDropdown2} label="Item 1" />
+						<Dropdown.Items.Item on:click={closeDropdown2} label="Item 2" />
+						<Dropdown.Items.Item on:click={closeDropdown2} label="Item 3" />
 					</Dropdown.Items>
 				</Dropdown>
 			</div>
@@ -84,6 +106,14 @@
 	<SlotsTable component="Dropdown.Items" slots={itemsSlots} />
 </Col>
 
+<Col class="col-24">
+	<PropsTable component="Dropdown.Items.Item" props={itemProps} />
+</Col>
+
 <Col class="col-24">
 	<SlotsTable component="Dropdown.Items.Item" slots={itemSlots} />
 </Col>
+
+<Col class="col-24">
+	<PropsTable component="Dropdown.Items.Item.Icon" props={iconProps} />
+</Col>
diff --git a/src/routes/dropdown/examples.ts b/src/routes/dropdown/examples.ts
@@ -39,17 +39,82 @@ export const itemsSlots: Slot[] = [
 	}
 ];
 
+export const itemProps: Prop[] = [
+	{
+		id: '1',
+		prop: 'label',
+		type: 'string',
+		default: ''
+	}
+];
+
 export const itemSlots: Slot[] = [
 	{
 		id: '1',
-		slot: 'default',
+		slot: 'icon',
+		component: '<Dropdown.Items.Item.Icon slot="icon" />'
+	},
+	{
+		id: '2',
+		slot: 'extra',
 		component: ''
 	}
 ];
 
+export const iconProps: Prop[] = [
+	{
+		id: '1',
+		prop: 'data',
+		type: '<a href="/types#IconData" class="link">string (IconData)</a>',
+		default: ''
+	},
+	{
+		id: '2',
+		prop: 'viewBox',
+		type: 'string',
+		default: '0 0 24 24'
+	},
+	{
+		id: '3',
+		prop: 'size',
+		type: 'string',
+		default: '24px'
+	},
+	{
+		id: '4',
+		prop: 'width',
+		type: 'string',
+		default: '24px'
+	},
+	{
+		id: '5',
+		prop: 'height',
+		type: 'string',
+		default: '24px'
+	},
+	{
+		id: '6',
+		prop: 'color',
+		type: 'string',
+		default: 'currentColor'
+	},
+	{
+		id: '7',
+		prop: 'stroke',
+		type: 'string | undefined',
+		default: ''
+	},
+	{
+		id: '8',
+		prop: 'fill',
+		type: 'string',
+		default: 'currentColor'
+	}
+];
+
 export const example = `
 <script lang="ts">
-	import { Dropdown } from 'stwui';
+	import { Dropdown, Button, Badge } from 'stwui';
 
    let visible = false;
 
@@ -63,11 +128,23 @@ export const example = `
 	}
 </script>
 
-<Dropdown {visible}>
-   <Button slot="trigger" type="primary" on:click={toggleDropdown}>Toggle Dropdown</Button>
-   <Dropdown.Items slot="items">
-      <Dropdown.Items.Item on:click={closeDropdown}>Item 1</Dropdown.Items.Item>
-      <Dropdown.Items.Item on:click={closeDropdown}>Item 2</Dropdown.Items.Item>
-      <Dropdown.Items.Item on:click={closeDropdown}>Item 3</Dropdown.Items.Item>
-   </Dropdown.Items>
+<Dropdown bind:visible={visible1}>
+	<Button slot="trigger" type="primary" on:click={toggleDropdown1}>Toggle Dropdown</Button>
+	<Dropdown.Items slot="items">
+		<Dropdown.Items.Item on:click={closeDropdown1} label="Item 1">
+			<Dropdown.Items.Item.Icon slot="icon" data={trash} />
+		</Dropdown.Items.Item>
+		<Dropdown.Items.Item on:click={closeDropdown1} label="Item 2">
+			<Dropdown.Items.Item.Icon slot="extra" data={trash} />
+		</Dropdown.Items.Item>
+		<Dropdown.Items.Item on:click={closeDropdown1} label="Notifications">
+			<Badge type="info" slot="extra">+99</Badge>
+		</Dropdown.Items.Item>
+		<Dropdown.Items.Divider />
+		<Button type="danger" class="w-full justify-between">
+			<Button.Leading slot="leading" data={home} />
+			Home
+			<Button.Trailing slot="trailing" data={home} />
+		</Button>
+	</Dropdown.Items>
 </Dropdown>`;