From cb9965643afbfe8e654ca850eee3dc977655e030 Mon Sep 17 00:00:00 2001
From: Craig Howell <howell.craig@gmail.com>
Date: Wed, 19 Oct 2022 16:29:54 -0400
Subject: [PATCH] fix(Currency): aligned leading and trailing with the rest of
 the library docs(currency): updated examples

---
 src/lib/components/currency/Currency.svelte | 20 +++++++---
 src/lib/components/currency/Leading.svelte  | 37 ------------------
 src/lib/components/currency/Trailing.svelte | 37 ------------------
 src/lib/components/currency/index.ts        | 22 ++---------
 src/routes/currency/+page.svelte            | 36 ++++--------------
 src/routes/currency/examples.ts             | 42 +++------------------
 6 files changed, 30 insertions(+), 164 deletions(-)
 delete mode 100644 src/lib/components/currency/Leading.svelte
 delete mode 100644 src/lib/components/currency/Trailing.svelte

diff --git a/src/lib/components/currency/Currency.svelte b/src/lib/components/currency/Currency.svelte
index 03db8b89..2d43437f 100644
--- a/src/lib/components/currency/Currency.svelte
+++ b/src/lib/components/currency/Currency.svelte
@@ -44,7 +44,10 @@
 
 <div class={$$props.class} style={$$props.style}>
 	<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"
@@ -74,14 +77,19 @@
 			on:input={setTwoNumberDecimal}
 			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/currency/Leading.svelte b/src/lib/components/currency/Leading.svelte
deleted file mode 100644
index 8728555b..00000000
--- a/src/lib/components/currency/Leading.svelte
+++ /dev/null
@@ -1,37 +0,0 @@
-<script lang="ts">
-	import { CURRENCY_CONTEXT_ID } from './Currency.svelte';
-	import { getContext } from 'svelte';
-	import { useContext } from '../../utils/useContext';
-	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());
-
-	useContext({
-		context_id: CURRENCY_CONTEXT_ID,
-		parent: 'Currency',
-		component: 'Currency.Leading'
-	});
-
-	const { error }: { error: string } = getContext(CURRENCY_CONTEXT_ID);
-
-	let defaultClass = 'absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none';
-	if (error) {
-		defaultClass = defaultClass + ' text-danger';
-	} else {
-		defaultClass = defaultClass + ' text-light-secondary-content dark:text-dark-secondary-content';
-	}
-	$: finalClass = twMerge(defaultClass, $$props.class);
-</script>
-
-<span
-	class={finalClass}
-	use:useActions={use}
-	use:forwardEvents
-	{...exclude($$props, ['use', 'class'])}
->
-	<slot />
-	<slot name="icon" />
-</span>
diff --git a/src/lib/components/currency/Trailing.svelte b/src/lib/components/currency/Trailing.svelte
deleted file mode 100644
index eebeb469..00000000
--- a/src/lib/components/currency/Trailing.svelte
+++ /dev/null
@@ -1,37 +0,0 @@
-<script lang="ts">
-	import { CURRENCY_CONTEXT_ID } from './Currency.svelte';
-	import { getContext } from 'svelte';
-	import { useContext } from '../../utils/useContext';
-	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());
-
-	useContext({
-		context_id: CURRENCY_CONTEXT_ID,
-		parent: 'Currency',
-		component: 'Currency.Leading'
-	});
-
-	const { error }: { error: string } = getContext(CURRENCY_CONTEXT_ID);
-
-	let defaultClass = 'absolute inset-y-0 right-0 pr-3 flex items-center pointer-events-none';
-	if (error) {
-		defaultClass = defaultClass + ' text-danger';
-	} else {
-		defaultClass = defaultClass + ' text-light-secondary-content dark:text-dark-secondary-content';
-	}
-	$: finalClass = twMerge(defaultClass, $$props.class);
-</script>
-
-<span
-	class={finalClass}
-	use:useActions={use}
-	use:forwardEvents
-	{...exclude($$props, ['use', 'class'])}
->
-	<slot />
-	<slot name="icon" />
-</span>
diff --git a/src/lib/components/currency/index.ts b/src/lib/components/currency/index.ts
index 66209fab..e5e48c79 100644
--- a/src/lib/components/currency/index.ts
+++ b/src/lib/components/currency/index.ts
@@ -1,31 +1,17 @@
 import OriginalCurrency from './Currency.svelte';
 import Label from './Label.svelte';
-import OriginalLeading from './Leading.svelte';
-import OriginalTrailing from './Trailing.svelte';
 import Icon from '../icon/Icon.svelte';
 
 const Currency = OriginalCurrency as CurrencyStatic;
 Currency.Label = Label;
-Currency.Leading = OriginalLeading as LeadingStatic;
-Currency.Trailing = OriginalTrailing as TrailingStatic;
-Currency.Leading.Icon = Icon;
-Currency.Trailing.Icon = Icon;
+Currency.Leading = Icon;
+Currency.Trailing = Icon;
 
 export default Currency;
 
 export interface CurrencyStatic {
 	new (...args: ConstructorParameters<typeof OriginalCurrency>): OriginalCurrency;
 	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/currency/+page.svelte b/src/routes/currency/+page.svelte
index 7e97b042..608773f9 100644
--- a/src/routes/currency/+page.svelte
+++ b/src/routes/currency/+page.svelte
@@ -1,14 +1,6 @@
 <script lang="ts">
-	import { Card, Col, Currency, Icon } from '../../lib';
-	import {
-		example,
-		props,
-		slots,
-		leadingSlots,
-		labelSlots,
-		trailingSlots,
-		iconProps
-	} from './examples';
+	import { Card, Col, Currency } from '../../lib';
+	import { example, props, slots, labelSlots, iconProps } from './examples';
 	import { PropsTable, SlotsTable, UpdatedComponent, CodeBlock } from '../../docs';
 	import { email, phone } from '../../docs/icons';
 	import { currency_usd } from '../../lib/icons';
@@ -25,19 +17,13 @@
 			<br />
 			<Currency name="currency-2">
 				<Currency.Label slot="label">Label</Currency.Label>
-				<Currency.Leading slot="leading">
-					<Currency.Leading.Icon data={currency_usd} />
-				</Currency.Leading>
-				<Currency.Trailing slot="trailing">
-					<Currency.Trailing.Icon data={phone} />
-				</Currency.Trailing>
+				<Currency.Leading slot="leading" data={currency_usd} />
+				<Currency.Trailing slot="trailing" data={phone} />
 			</Currency>
 			<br />
 			<Currency name="currency-3" error="There has been an error">
 				<Currency.Label slot="label">Label</Currency.Label>
-				<Currency.Leading slot="leading">
-					<Currency.Leading.Icon data={email} />
-				</Currency.Leading>
+				<Currency.Leading slot="leading" data={email} />
 			</Currency>
 
 			<br />
@@ -60,17 +46,9 @@
 </Col>
 
 <Col class="col-24">
-	<SlotsTable component="Currency.Leading" slots={leadingSlots} />
+	<PropsTable component="Currency.Leading" props={iconProps} />
 </Col>
 
 <Col class="col-24">
-	<PropsTable component="Currency.Leading.Icon" props={iconProps} />
-</Col>
-
-<Col class="col-24">
-	<SlotsTable component="Currency.Trailing" slots={trailingSlots} />
-</Col>
-
-<Col class="col-24">
-	<PropsTable component="Currency.Trailing.Icon" props={iconProps} />
+	<PropsTable component="Currency.Trailing" props={iconProps} />
 </Col>
diff --git a/src/routes/currency/examples.ts b/src/routes/currency/examples.ts
index bc880429..c4f4eaf8 100644
--- a/src/routes/currency/examples.ts
+++ b/src/routes/currency/examples.ts
@@ -83,32 +83,6 @@ export const labelSlots: Slot[] = [
 	}
 ];
 
-export const leadingSlots: Slot[] = [
-	{
-		id: '1',
-		slot: 'icon',
-		component: '<Currency.Leading.Icon slot="icon" />'
-	},
-	{
-		id: '2',
-		slot: 'default',
-		component: ''
-	}
-];
-
-export const trailingSlots: Slot[] = [
-	{
-		id: '1',
-		slot: 'icon',
-		component: '<Currency.Trailing.Icon slot="icon" />'
-	},
-	{
-		id: '2',
-		slot: 'default',
-		component: ''
-	}
-];
-
 export const iconProps: Prop[] = [
 	{
 		id: '1',
@@ -170,20 +144,14 @@ export const example = `
 </script>
 
 <Currency name="currency-1" placeholder="Basic" />
-<br />
+
 <Currency name="currency-2">
 	<Currency.Label slot="label">Label</Currency.Label>
-	<Currency.Leading slot="leading">
-		<Currency.Leading.Icon data={currency_usd} />
-	</Currency.Leading>
-	<Currency.Trailing slot="trailing">
-		<Currency.Trailing.Icon data={phone} />
-	</Currency.Trailing>
+	<Currency.Leading slot="leading" data={currency_usd} />
+	<Currency.Trailing slot="trailing" data={phone} />
 </Currency>
-<br />
+
 <Currency name="currency-3" error="There has been an error">
 	<Currency.Label slot="label">Label</Currency.Label>
-	<Currency.Leading slot="leading">
-		<Currency.Leading.Icon data={email} />
-	</Currency.Leading>
+	<Currency.Leading slot="leading" data={email} />
 </Currency>`;