fix(DatePicker): removed dependency on material icons

docs(date-picker): updated examples
N00nDay · Oct 18, 2022 · fd06245 · fd06245
1 parent a69cd9a
commit fd06245
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 12 deletions.
diff --git a/src/lib/components/datepicker/Leading.svelte b/src/lib/components/datepicker/Leading.svelte
@@ -33,4 +33,5 @@
 	{...exclude($$props, ['use', 'class'])}
 >
 	<slot />
+	<slot name="icon" />
 </span>
diff --git a/src/lib/components/datepicker/Trailing.svelte b/src/lib/components/datepicker/Trailing.svelte
@@ -33,4 +33,5 @@
 	{...exclude($$props, ['use', 'class'])}
 >
 	<slot />
+	<slot name="icon" />
 </span>
diff --git a/src/lib/components/datepicker/index.ts b/src/lib/components/datepicker/index.ts
@@ -1,17 +1,30 @@
 import OriginalDatePicker from './DateInput.svelte';
 import Label from './Label.svelte';
-import Leading from './Leading.svelte';
-import Trailing from './Trailing.svelte';
+import OriginalLeading from './Leading.svelte';
+import OriginalTrailing from './Trailing.svelte';
+import Icon from '../icon/Icon.svelte';
 
 const DatePicker = OriginalDatePicker as DatePickerStatic;
 DatePicker.Label = Label;
-DatePicker.Leading = Leading;
-DatePicker.Trailing = Trailing;
+DatePicker.Leading = OriginalLeading as LeadingStatic;
+DatePicker.Trailing = OriginalTrailing as TrailingStatic;
+DatePicker.Leading.Icon = Icon;
+DatePicker.Trailing.Icon = Icon;
 
 export default DatePicker;
 export interface DatePickerStatic {
 	new (...args: ConstructorParameters<typeof OriginalDatePicker>): OriginalDatePicker;
 	Label: typeof Label;
-	Leading: typeof Leading;
-	Trailing: typeof Trailing;
+	Leading: LeadingStatic;
+	Trailing: TrailingStatic;
+}
+
+export interface LeadingStatic {
+	new (...args: ConstructorParameters<typeof OriginalLeading>): OriginalLeading;
+	Icon: typeof Icon;
+}
+
+export interface TrailingStatic {
+	new (...args: ConstructorParameters<typeof OriginalTrailing>): OriginalTrailing;
+	Icon: typeof Icon;
 }
diff --git a/src/routes/datepicker/+page.svelte b/src/routes/datepicker/+page.svelte
@@ -1,6 +1,14 @@
 <script lang="ts">
 	import { Card, Col, DatePicker, Icon } from '../../lib';
-	import { example, props, slots, labelSlots, leadingSlots, trailingSlots } from './examples';
+	import {
+		example,
+		props,
+		slots,
+		labelSlots,
+		leadingSlots,
+		trailingSlots,
+		iconProps
+	} from './examples';
 	import { PropsTable, SlotsTable, UpdatedComponent, CodeBlock } from '../../docs';
 	import { phone } from '../../docs/icons';
 	import { calendar } from '../../lib/icons';
@@ -22,15 +30,15 @@
 			<DatePicker name="date-2" label="Date" max={date2Max} min={date2Min}>
 				<DatePicker.Label slot="label">Date</DatePicker.Label>
 				<DatePicker.Trailing slot="trailing">
-					<Icon data={calendar} />
+					<DatePicker.Trailing.Icon slot="icon" data={calendar} />
 				</DatePicker.Trailing>
 			</DatePicker>
 			<br />
 			<br />
 			<DatePicker name="date-3" min={date2Min} error="Your doing it wrong">
 				<DatePicker.Label slot="label">Date</DatePicker.Label>
 				<DatePicker.Leading slot="leading">
-					<Icon data={phone} />
+					<DatePicker.Leading.Icon slot="icon" data={phone} />
 				</DatePicker.Leading>
 			</DatePicker>
 
@@ -58,6 +66,14 @@
 	<SlotsTable component="DatePicker.Leading" slots={leadingSlots} />
 </Col>
 
+<Col class="col-24">
+	<PropsTable component="DatePicker.Leading.Icon" props={iconProps} />
+</Col>
+
 <Col class="col-24">
 	<SlotsTable component="DatePicker.Trailing" slots={trailingSlots} />
 </Col>
+
+<Col class="col-24">
+	<PropsTable component="DatePicker.Trailing.Icon" props={iconProps} />
+</Col>
diff --git a/src/routes/datepicker/examples.ts b/src/routes/datepicker/examples.ts
@@ -100,6 +100,11 @@ export const leadingSlots: Slot[] = [
 		id: '1',
 		slot: 'default',
 		component: ''
+	},
+	{
+		id: '2',
+		slot: 'icon',
+		component: '<DatePicker.Leading.Icon slot="icon" />'
 	}
 ];
 
@@ -108,12 +113,68 @@ export const trailingSlots: Slot[] = [
 		id: '1',
 		slot: 'default',
 		component: ''
+	},
+	{
+		id: '2',
+		slot: 'icon',
+		component: '<DatePicker.Trailing.Icon slot="icon" />'
+	}
+];
+
+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 { DatePicker, Icon } from 'stwui';
+	import { DatePicker } from 'stwui';
 
 	const date2Max = new Date(2022, 7, 30);
 	const date2Min = new Date(2022, 7, 3);
@@ -127,13 +188,13 @@ export const example = `
 <DatePicker name="date-2" label="Date" max={date2Max} min={date2Min}>
 	<DatePicker.Label slot="label">Date</DatePicker.Label>
 	<DatePicker.Trailing slot="trailing">
-		<Icon data={calendar} />
+		<DatePicker.Trailing.Icon slot="icon" data={calendar} />
 	</DatePicker.Trailing>
 </DatePicker>
 
 <DatePicker name="date-3" min={date2Min} error="Your doing it wrong">
 	<DatePicker.Label slot="label">Date</DatePicker.Label>
 	<DatePicker.Leading slot="leading">
-		<Icon data={phone} />
+		<DatePicker.Leading.Icon slot="icon" data={phone} />
 	</DatePicker.Leading>
 </DatePicker>`;