Skip to content

Commit

Permalink
fix(Currency): aligned leading and trailing with the rest of the library
Browse files Browse the repository at this point in the history
docs(currency): updated examples
  • Loading branch information
N00nDay committed Oct 19, 2022
1 parent 8f6b7b1 commit cb99656
Show file tree
Hide file tree
Showing 6 changed files with 30 additions and 164 deletions.
20 changes: 14 additions & 6 deletions src/lib/components/currency/Currency.svelte
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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}
Expand Down
37 changes: 0 additions & 37 deletions src/lib/components/currency/Leading.svelte

This file was deleted.

37 changes: 0 additions & 37 deletions src/lib/components/currency/Trailing.svelte

This file was deleted.

22 changes: 4 additions & 18 deletions src/lib/components/currency/index.ts
Original file line number Diff line number Diff line change
@@ -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;
}
36 changes: 7 additions & 29 deletions src/routes/currency/+page.svelte
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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 />
Expand All @@ -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>
42 changes: 5 additions & 37 deletions src/routes/currency/examples.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -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>`;

0 comments on commit cb99656

Please sign in to comment.