fix(InputNumber): aligned leading and trailing to the rest of the lib…

…rary docs(input-number): updated examples
N00nDay · Oct 20, 2022 · 8b0df03 · 8b0df03
1 parent 5878c6a
commit 8b0df03
Show file tree

Hide file tree

Showing 6 changed files with 22 additions and 148 deletions.
diff --git a/src/lib/components/input-number/InputNumber.svelte b/src/lib/components/input-number/InputNumber.svelte
@@ -32,7 +32,10 @@
 
 <div class={$$props.class}>
 	<slot name="label" />
-	<div class="mt-1 relative rounded-md shadow-sm dark:shadow-black h-[2.5rem]">
+	<div
+		class="mt-1 relative rounded-md shadow-sm dark:shadow-black h-[2.5rem]"
+		class:text-danger={error}
+	>
 		<input
 			type="number"
 			inputmode="numeric"
@@ -63,14 +66,18 @@
 			on:keypress={onlyNumeric}
 		/>
 
-		<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 $$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-number/Leading.svelte b/src/lib/components/input-number/Leading.svelte
diff --git a/src/lib/components/input-number/Trailing.svelte b/src/lib/components/input-number/Trailing.svelte
diff --git a/src/lib/components/input-number/index.ts b/src/lib/components/input-number/index.ts
@@ -1,30 +1,17 @@
 import OriginalInputNumber from './InputNumber.svelte';
 import Label from './Label.svelte';
-import OriginalLeading from './Leading.svelte';
-import OriginalTrailing from './Trailing.svelte';
 import Icon from '../icon/Icon.svelte';
 
 const InputNumber = OriginalInputNumber as InputNumberStatic;
 InputNumber.Label = Label;
-InputNumber.Leading = OriginalLeading as LeadingStatic;
-InputNumber.Trailing = OriginalTrailing as TrailingStatic;
-InputNumber.Leading.Icon = Icon;
-InputNumber.Trailing.Icon = Icon;
+InputNumber.Leading = Icon;
+InputNumber.Trailing = Icon;
 
 export default InputNumber;
 
 export interface InputNumberStatic {
 	new (...args: ConstructorParameters<typeof OriginalInputNumber>): OriginalInputNumber;
 	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-number/+page.svelte b/src/routes/input-number/+page.svelte
@@ -1,14 +1,6 @@
 <script lang="ts">
 	import { Card, Col, InputNumber } from '../../lib';
-	import {
-		example,
-		props,
-		slots,
-		leadingSlots,
-		labelSlots,
-		trailingSlots,
-		iconProps
-	} from './examples';
+	import { example, props, slots, labelSlots, iconProps } from './examples';
 	import { PropsTable, SlotsTable, UpdatedComponent, CodeBlock } from '../../docs';
 	import { phone } from '../../docs/icons';
 </script>
@@ -24,9 +16,7 @@
 			<br />
 			<InputNumber name="input-number-2">
 				<InputNumber.Label slot="label">Number</InputNumber.Label>
-				<InputNumber.Trailing slot="trailing">
-					<InputNumber.Trailing.Icon slot="icon" data={phone} />
-				</InputNumber.Trailing>
+				<InputNumber.Trailing slot="trailing" data={phone} />
 			</InputNumber>
 
 			<br />
@@ -49,17 +39,9 @@
 </Col>
 
 <Col class="col-24">
-	<SlotsTable component="InputNumber.Leading" slots={leadingSlots} />
+	<PropsTable component="InputNumber.Leading" props={iconProps} />
 </Col>
 
 <Col class="col-24">
-	<PropsTable component="InputNumber.Leading.Icon" props={iconProps} />
-</Col>
-
-<Col class="col-24">
-	<SlotsTable component="InputNumber.Trailing" slots={trailingSlots} />
-</Col>
-
-<Col class="col-24">
-	<PropsTable component="InputNumber.Trailing.Icon" props={iconProps} />
+	<PropsTable component="InputNumber.Trailing" props={iconProps} />
 </Col>
diff --git a/src/routes/input-number/examples.ts b/src/routes/input-number/examples.ts
@@ -89,32 +89,6 @@ export const labelSlots: Slot[] = [
 	}
 ];
 
-export const leadingSlots: Slot[] = [
-	{
-		id: '1',
-		slot: 'default',
-		component: ''
-	},
-	{
-		id: '2',
-		slot: 'icon',
-		component: '<InputNumber.Leading.Icon slot="icon" />'
-	}
-];
-
-export const trailingSlots: Slot[] = [
-	{
-		id: '1',
-		slot: 'default',
-		component: ''
-	},
-	{
-		id: '2',
-		slot: 'icon',
-		component: '<InputNumber.Leading.Icon slot="icon" />'
-	}
-];
-
 export const iconProps: Prop[] = [
 	{
 		id: '1',
@@ -177,7 +151,5 @@ export const example = `
 
 <InputNumber name="input-number-2">
 	<InputNumber.Label slot="label">Number</InputNumber.Label>
-	<InputNumber.Trailing slot="trailing">
-		<InputNumber.Trailing.Icon slot="icon" data={phone} />
-	</InputNumber.Trailing>
+	<InputNumber.Trailing slot="trailing" data={phone} />
 </InputNumber>`;