fix(Input): aligned leading and trailing along with the rest of the l…

…ibrary docs(input): updated examples
N00nDay · Oct 20, 2022 · 5878c6a · 5878c6a
1 parent 4d7c75d
commit 5878c6a
Show file tree

Hide file tree

Showing 6 changed files with 31 additions and 173 deletions.
diff --git a/src/lib/components/input/Input.svelte b/src/lib/components/input/Input.svelte
@@ -62,7 +62,10 @@
 
 <div class={finalClass} style={$$props.style}>
 	<slot name="label" />
-	<div class="mt-1 relative rounded-md shadow-sm h-[2.5rem] dark:shadow-black">
+	<div
+		class="mt-1 relative rounded-md shadow-sm h-[2.5rem] dark:shadow-black"
+		class:text-danger={error}
+	>
 		<input
 			bind:this={input}
 			use:useType
@@ -98,7 +101,11 @@
 			{...exclude($$props, ['use', 'class'])}
 		/>
 
-		<slot name="leading" />
+		{#if $$slots.leading}
+			<span class="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
+				<slot name="leading" />
+			</span>
+		{/if}
 
 		{#if allowClear && value && value.length > 0}
 			<button
@@ -125,11 +132,11 @@
 				<Icon slot="off" data={eye_off} />
 			</Swap>
 		{:else if $$slots.trailing && !error}
-			<slot name="trailing" />
+			<span class="absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none">
+				<slot name="trailing" />
+			</span>
 		{:else if error}
-			<span
-				class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none text-danger"
-			>
+			<span class="absolute inset-y-0 right-0 flex items-center pr-2 pointer-events-none">
 				<Icon data={errorIcon} />
 			</span>
 		{/if}

diff --git a/src/lib/components/input/Leading.svelte b/src/lib/components/input/Leading.svelte
diff --git a/src/lib/components/input/Trailing.svelte b/src/lib/components/input/Trailing.svelte
diff --git a/src/lib/components/input/index.ts b/src/lib/components/input/index.ts
@@ -1,30 +1,17 @@
 import OriginalInput from './Input.svelte';
 import Label from './Label.svelte';
-import OriginalLeading from './Leading.svelte';
-import OriginalTrailing from './Trailing.svelte';
 import Icon from '../icon/Icon.svelte';
 
 const Input = OriginalInput as InputStatic;
 Input.Label = Label;
-Input.Leading = OriginalLeading as LeadingStatic;
-Input.Trailing = OriginalTrailing as TrailingStatic;
-Input.Leading.Icon = Icon;
-Input.Trailing.Icon = Icon;
+Input.Leading = Icon;
+Input.Trailing = Icon;
 
 export default Input;
 
 export interface InputStatic {
 	new (...args: ConstructorParameters<typeof OriginalInput>): OriginalInput;
 	Label: typeof Label;
-	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;
+	Leading: typeof Icon;
+	Trailing: typeof Icon;
 }
diff --git a/src/routes/input/+page.svelte b/src/routes/input/+page.svelte
@@ -1,14 +1,6 @@
 <script lang="ts">
-	import { Card, Col, Icon, Input } from '../../lib';
-	import {
-		example,
-		props,
-		slots,
-		labelSlots,
-		leadingSlots,
-		trailingSlots,
-		iconProps
-	} from './examples';
+	import { Card, Col, Input } from '../../lib';
+	import { example, props, slots, labelSlots, iconProps } from './examples';
 	import { PropsTable, SlotsTable, UpdatedComponent, CodeBlock } from '../../docs';
 	import { email, phone, lock } from '../../docs/icons';
 </script>
@@ -24,12 +16,8 @@
 			<br />
 			<Input name="input-2" allowClear>
 				<Input.Label slot="label">Label</Input.Label>
-				<Input.Leading slot="leading">
-					<Input.Leading.Icon slot="icon" data={email} />
-				</Input.Leading>
-				<Input.Trailing slot="trailing">
-					<Input.Trailing.Icon slot="icon" data={phone} />
-				</Input.Trailing>
+				<Input.Leading slot="leading" data={email} />
+				<Input.Trailing slot="trailing" data={phone} />
 			</Input>
 			<br />
 			<Input
@@ -38,19 +26,13 @@
 				handleLeadingClick={() => console.log('clicking leading')}
 			>
 				<Input.Label slot="label">Label</Input.Label>
-				<Input.Leading slot="leading">
-					<Input.Leading.Icon slot="icon" data={email} />
-				</Input.Leading>
-				<Input.Trailing slot="trailing">
-					<Input.Trailing.Icon slot="icon" data={phone} />
-				</Input.Trailing>
+				<Input.Leading slot="leading" data={email} />
+				<Input.Trailing slot="trailing" data={phone} />
 			</Input>
 			<br />
 			<Input type="password" name="input-4" showPasswordToggle>
 				<Input.Label slot="label">Password</Input.Label>
-				<Input.Leading slot="leading">
-					<Input.Leading.Icon slot="icon" data={lock} />
-				</Input.Leading>
+				<Input.Leading slot="leading" data={lock} />
 			</Input>
 
 			<br />
@@ -73,17 +55,9 @@
 </Col>
 
 <Col class="col-24">
-	<SlotsTable component="Input.Leading" slots={leadingSlots} />
+	<PropsTable component="Input.Leading" props={iconProps} />
 </Col>
 
 <Col class="col-24">
-	<PropsTable component="Input.Leading.Icon" props={iconProps} />
-</Col>
-
-<Col class="col-24">
-	<SlotsTable component="Input.Trailing" slots={trailingSlots} />
-</Col>
-
-<Col class="col-24">
-	<PropsTable component="Input.Trailing.Icon" props={iconProps} />
+	<PropsTable component="Input.Trailing" props={iconProps} />
 </Col>
diff --git a/src/routes/input/examples.ts b/src/routes/input/examples.ts
@@ -101,32 +101,6 @@ export const labelSlots: Slot[] = [
 	}
 ];
 
-export const leadingSlots: Slot[] = [
-	{
-		id: '1',
-		slot: 'default',
-		component: ''
-	},
-	{
-		id: '2',
-		slot: 'icon',
-		component: '<Input.Leading.Icon slot="icon" />'
-	}
-];
-
-export const trailingSlots: Slot[] = [
-	{
-		id: '1',
-		slot: 'default',
-		component: ''
-	},
-	{
-		id: '2',
-		slot: 'icon',
-		component: '<Input.Trailing.Icon slot="icon" />'
-	}
-];
-
 export const iconProps: Prop[] = [
 	{
 		id: '1',
@@ -191,12 +165,8 @@ export const example = `
 
 <Input name="input-2" allowClear>
 	<Input.Label slot="label">Label</Input.Label>
-	<Input.Leading slot="leading">
-		<Input.Leading.Icon slot="icon" data={email} />
-	</Input.Leading>
-	<Input.Trailing slot="trailing">
-		<Input.Trailing.Icon slot="icon" data={phone} />
-	</Input.Trailing>
+	<Input.Leading slot="leading" data={email} />
+	<Input.Trailing slot="trailing" data={phone} />
 </Input>
 
 <Input
@@ -205,17 +175,11 @@ export const example = `
 	handleLeadingClick={() => console.log('clicking leading')}
 >
 	<Input.Label slot="label">Label</Input.Label>
-	<Input.Leading slot="leading">
-		<Input.LeadingIcon slot="icon" data={email} />
-	</Input.Leading>
-	<Input.Trailing slot="trailing">
-		<Input.Trailing.Icon slot="icon" data={phone} />
-	</Input.Trailing>
+	<Input.Leading slot="leading" data={email} />
+	<Input.Trailing slot="trailing" data={phone} />
 </Input>
 
 <Input type="password" name="input-4" showPasswordToggle>
 	<Input.Label slot="label">Password</Input.Label>
-	<Input.Leading slot="leading">
-		<Input.Leading.Icon slot="icon" data={lock} />
-	</Input.Leading>
+	<Input.Leading slot="leading" data={lock} />
 </Input>`;