Skip to content

Commit

Permalink
fix(Accordion.Item.Title): replaced on:click with forwardEvents to ca…
Browse files Browse the repository at this point in the history 
…tch all actions

fix(Alert): made properties class and type reactive
fix(Alert.Icon): made properties class and type reactive
fix(Alert.Title): made properties class and type reactive
fix(Alert.Description): properties class and type reactive
  • Loading branch information
Craig Howell committed Oct 2, 2022
1 parent 718cd4d commit ff10316
Show file tree
Hide file tree
Showing 5 changed files with 72 additions and 39 deletions.
15 changes: 14 additions & 1 deletion src/lib/components/accordion/Title.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,11 @@
import { ACCORDION_ITEM_CONTEXT_ID } from './Item.svelte';
import { useContext } from '../../utils/useContext';
import type { Writable } from 'svelte/store';
import { current_component } from 'svelte/internal';
import { forwardEventsBuilder, useActions, type ActionArray } from '../../actions';
import { exclude } from '../../utils/exclude';
export let use: ActionArray = [];
const forwardEvents = forwardEventsBuilder(current_component);
useContext({
context_id: ACCORDION_CONTEXT_ID,
Expand All @@ -25,7 +30,15 @@
$: finalClass = twMerge(defaultClass, $$props.class);
</script>

<button on:click class={finalClass} style={$$props.style} type="button">
<!-- TODO: replace on:click with forwardEventsBuilder -->
<button
use:useActions={use}
use:forwardEvents
{...exclude($$props, ['use', 'class'])}
class={finalClass}
style={$$props.style}
type="button"
>
<slot />
<span class="material-icons transition-transform duration-300" class:-rotate-180={$open}
>expand_more</span
Expand Down
23 changes: 15 additions & 8 deletions src/lib/components/alert/Alert.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,25 +5,32 @@
<script lang="ts">
import { twMerge } from 'tailwind-merge';
import { setContext } from 'svelte';
import { writable } from 'svelte/store';
export let type: 'info' | 'warn' | 'success' | 'error' = 'info';
let reactiveType = writable(type);
$: $reactiveType = type;
setContext(ALERT_CONTEXT_ID, {
alert: true,
type
type: reactiveType
});
let defaultClass = 'rounded-md p-4 bg-opacity-20 dark:bg-opacity-20 transition-all duration-150';
if (type === 'info') {
defaultClass += ' bg-info-background';
let defaultClass = '';
$: if (type === 'info') {
defaultClass =
'rounded-md p-4 bg-opacity-20 dark:bg-opacity-20 transition-all duration-150 bg-info-background';
} else if (type === 'warn') {
defaultClass += ' bg-warn-background';
defaultClass =
'rounded-md p-4 bg-opacity-20 dark:bg-opacity-20 transition-all duration-150 bg-warn-background';
} else if (type === 'success') {
defaultClass += ' bg-success-background';
defaultClass =
'rounded-md p-4 bg-opacity-20 dark:bg-opacity-20 transition-all duration-150 bg-success-background';
} else if (type === 'error') {
defaultClass += ' bg-error-background';
defaultClass =
'rounded-md p-4 bg-opacity-20 dark:bg-opacity-20 transition-all duration-150 bg-error-background';
}
const finalClass = twMerge(defaultClass, $$props.class);
$: finalClass = twMerge(defaultClass, $$props.class);
</script>

<div class={finalClass} style={$$props.style}>
Expand Down
29 changes: 18 additions & 11 deletions src/lib/components/alert/Description.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,28 @@
<script lang="ts">
import { getContext } from 'svelte';
import type { Writable } from 'svelte/store';
import { twMerge } from 'tailwind-merge';
import { ALERT_CONTEXT_ID } from './Alert.svelte';
const { type }: { type: 'info' | 'warn' | 'success' | 'error' } = getContext(ALERT_CONTEXT_ID);
const { type }: { type: Writable<'info' | 'warn' | 'success' | 'error'> } =
getContext(ALERT_CONTEXT_ID);
let defaultClass = 'mt-2 text-sm transition-all duration-150';
if (type === 'info') {
defaultClass += ' text-info-secondary-content dark:text-dark-info-secondary-content';
} else if (type === 'warn') {
defaultClass += ' text-warn-secondary-content dark:text-dark-warn-secondary-content';
} else if (type === 'success') {
defaultClass += ' text-success-secondary-content dark:text-dark-success-secondary-content';
} else if (type === 'error') {
defaultClass += ' text-error-secondary-content dark:text-dark-error-secondary-content=';
// TODO: make clsses reactive
let defaultClass = '';
$: if ($type === 'info') {
defaultClass =
'mt-2 text-sm transition-all duration-150 text-info-secondary-content dark:text-dark-info-secondary-content';
} else if ($type === 'warn') {
defaultClass =
'mt-2 text-sm transition-all duration-150 text-warn-secondary-content dark:text-dark-warn-secondary-content';
} else if ($type === 'success') {
defaultClass =
'mt-2 text-sm transition-all duration-150 text-success-secondary-content dark:text-dark-success-secondary-content';
} else if ($type === 'error') {
defaultClass =
'mt-2 text-sm transition-all duration-150 text-error-secondary-content dark:text-dark-error-secondary-content=';
}
const finalClass = twMerge(defaultClass, $$props.class);
$: finalClass = twMerge(defaultClass, $$props.class);
</script>

<div class={finalClass} style={$$props.style}>
Expand Down
25 changes: 14 additions & 11 deletions src/lib/components/alert/Icon.svelte
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,24 @@
<script lang="ts">
import { getContext } from 'svelte';
import type { Writable } from 'svelte/store';
import { twMerge } from 'tailwind-merge';
import { ALERT_CONTEXT_ID } from './Alert.svelte';
const { type }: { type: 'info' | 'warn' | 'success' | 'error' } = getContext(ALERT_CONTEXT_ID);
const { type }: { type: Writable<'info' | 'warn' | 'success' | 'error'> } =
getContext(ALERT_CONTEXT_ID);
let defaultClass = 'flex-shrink-0 h-5 w-5 flex items-center justify-center';
if (type === 'info') {
defaultClass += ' text-info-icon';
} else if (type === 'warn') {
defaultClass += ' text-warn-icon';
} else if (type === 'success') {
defaultClass += ' text-success-icon';
} else if (type === 'error') {
defaultClass += ' text-error-icon';
// TODO: make clsses reactive
let defaultClass = '';
$: if ($type === 'info') {
defaultClass = 'flex-shrink-0 h-5 w-5 flex items-center justify-center text-info-icon';
} else if ($type === 'warn') {
defaultClass = 'flex-shrink-0 h-5 w-5 flex items-center justify-center text-warn-icon';
} else if ($type === 'success') {
defaultClass = 'flex-shrink-0 h-5 w-5 flex items-center justify-center text-success-icon';
} else if ($type === 'error') {
defaultClass = 'flex-shrink-0 h-5 w-5 flex items-center justify-center text-error-icon';
}
const finalClass = twMerge(defaultClass, $$props.class);
$: finalClass = twMerge(defaultClass, $$props.class);
</script>

<div class={finalClass} style={$$props.style}>
Expand Down
19 changes: 11 additions & 8 deletions src/lib/components/alert/Title.svelte
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,21 @@
const { type }: { type: 'info' | 'warn' | 'success' | 'error' } = getContext(ALERT_CONTEXT_ID);
let defaultClass =
'text-sm font-medium flex flex-row items-start justify-between w-full relative h-4 transition-all duration-150';
if (type === 'info') {
defaultClass += ' text-info-content dark:text-dark-info-content';
let defaultClass = '';
$: if (type === 'info') {
defaultClass =
'text-sm font-medium flex flex-row items-start justify-between w-full relative h-4 transition-all duration-150 text-info-content dark:text-dark-info-content';
} else if (type === 'warn') {
defaultClass += ' text-warn-content dark:text-dark-warn-content';
defaultClass =
'text-sm font-medium flex flex-row items-start justify-between w-full relative h-4 transition-all duration-150 text-warn-content dark:text-dark-warn-content';
} else if (type === 'success') {
defaultClass += ' text-success-content dark:text-dark-success-content';
defaultClass =
'text-sm font-medium flex flex-row items-start justify-between w-full relative h-4 transition-all duration-150 text-success-content dark:text-dark-success-content';
} else if (type === 'error') {
defaultClass += ' text-error-content dark:text-dark-error-content';
defaultClass =
'text-sm font-medium flex flex-row items-start justify-between w-full relative h-4 transition-all duration-150 text-error-content dark:text-dark-error-content';
}
const finalClass = twMerge(defaultClass, $$props.class);
$: finalClass = twMerge(defaultClass, $$props.class);
</script>

<h3 class={finalClass} style={$$props.style}>
Expand Down

0 comments on commit ff10316

Please sign in to comment.