Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: more alert options #67

Merged
merged 4 commits into from
May 11, 2022
Merged

feat: more alert options #67

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
7071490
feat: more alert options
edde746 May 10, 2022
62fb89a
chore: clean up
edde746 May 10, 2022
542b88a
fix: demo page bugs
edde746 May 10, 2022
fa46244
fix: demo page text dark mode, dropdown error
edde746 May 11, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 8 additions & 17 deletions src/app.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,23 +3,14 @@
@tailwind components;
@tailwind utilities;

pre{
background-color: rgb(242, 242, 242);
white-space: pre-wrap;
width: 100%;
pre {
background-color: rgb(242, 242, 242);
white-space: pre-wrap;
width: 100%;
}

@layer base {
p {
@apply text-lg w-full text-gray-900 dark:text-white py-1;
}
h2{
/* @apply text-2xl w-full dark:text-white py-8; */
}
h3{
@apply text-xl w-full dark:text-white py-4;
}
.max-w-3xl a{
@apply text-blue-600 hover:underline dark:text-blue-300;
}
}
p {
@apply text-gray-900 dark:text-white;
}
}
163 changes: 62 additions & 101 deletions src/lib/alerts/Alert.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,126 +1,87 @@
<script lang="ts">
import { createEventDispatcher } from 'svelte';
import type { SvelteComponent } from 'svelte';

const dispatch = createEventDispatcher();
import type { Colors } from '../types';
export let color: Colors = 'blue';
export let alertId: string | number = 'alert-1';
export let icon: typeof SvelteComponent | null = null;
export let closeBtn: boolean = false;
export let btn1: boolean = false;
export let rounded: boolean = true;
export let borderAccent: boolean = false;

let hidden = false;

const handlebtn1 = () => {
dispatch('handlebtn1');
};

const handleHide = () => {
hidden = !hidden;
};
let divClass: string;
let svgClass: string;
let slotClass: string;
let buttonClass: string;
let divClass: string = 'flex flex-col p-4 mb-4 gap-2 ';
let contentClass: string;
let buttonClass: string = 'ml-auto -mx-1.5 -my-1.5 rounded-lg focus:ring-2 p-1.5 inline-flex h-8 w-8 ';

if (color === 'blue') {
divClass = 'flex p-4 mb-4 bg-blue-100 rounded-lg dark:bg-blue-200';
svgClass = 'flex-shrink-0 w-5 h-5 text-blue-700 dark:text-blue-800';
slotClass = 'ml-3 text-sm font-medium text-blue-700 dark:text-blue-800';
buttonClass =
'ml-auto -mx-1.5 -my-1.5 bg-blue-100 text-blue-500 rounded-lg focus:ring-2 focus:ring-blue-400 p-1.5 hover:bg-blue-200 inline-flex h-8 w-8 dark:bg-blue-200 dark:text-blue-600 dark:hover:bg-blue-300';
} else if (color === 'gray') {
divClass = 'flex p-4 mb-4 bg-gray-100 rounded-lg dark:bg-gray-200';
svgClass = 'flex-shrink-0 w-5 h-5 text-gray-700 dark:text-gray-800';
slotClass = 'ml-3 text-sm font-medium text-gray-700 dark:text-gray-800';
buttonClass =
'ml-auto -mx-1.5 -my-1.5 bg-gray-100 text-gray-500 rounded-lg focus:ring-2 focus:ring-gray-400 p-1.5 hover:bg-gray-200 inline-flex h-8 w-8 dark:bg-gray-200 dark:text-gray-600 dark:hover:bg-gray-300';
// TODO: update on change
if (rounded) divClass+= 'rounded-lg ';
if (borderAccent) divClass+= 'border-t-4 ';
if (color === 'gray') {
divClass += 'bg-gray-100 dark:bg-gray-200 ';
if (borderAccent) divClass += 'border-gray-500 dark:bg-gray-200 ';
contentClass = 'text-gray-700 dark:text-gray-800';
buttonClass += 'bg-gray-100 text-gray-500 focus:ring-gray-400 hover:bg-gray-200 dark:bg-gray-200 dark:text-gray-600 dark:hover:bg-gray-300';
} else if (color === 'red') {
divClass = 'flex p-4 mb-4 bg-red-100 rounded-lg dark:bg-red-200';
svgClass = 'flex-shrink-0 w-5 h-5 text-red-700 dark:text-red-800';
slotClass = 'ml-3 text-sm font-medium text-red-700 dark:text-red-800';
buttonClass =
'ml-auto -mx-1.5 -my-1.5 bg-red-100 text-red-500 rounded-lg focus:ring-2 focus:ring-red-400 p-1.5 hover:bg-red-200 inline-flex h-8 w-8 dark:bg-red-200 dark:text-red-600 dark:hover:bg-red-300';
divClass += 'bg-red-100 dark:bg-red-200';
if (borderAccent) divClass += 'border-red-500 dark:bg-red-200 ';
contentClass = 'text-red-700 dark:text-red-800';
buttonClass += 'bg-red-100 text-red-500 focus:ring-red-400 hover:bg-red-200 dark:bg-red-200 dark:text-red-600 dark:hover:bg-red-300';
} else if (color === 'yellow') {
divClass = 'flex p-4 mb-4 bg-yellow-100 rounded-lg dark:bg-yellow-200';
svgClass = 'flex-shrink-0 w-5 h-5 text-yellow-700 dark:text-yellow-800';
slotClass = 'ml-3 text-sm font-medium text-yellow-700 dark:text-yellow-800';
buttonClass =
'ml-auto -mx-1.5 -my-1.5 bg-yellow-100 text-yellow-500 rounded-lg focus:ring-2 focus:ring-yellow-400 p-1.5 hover:bg-yellow-200 inline-flex h-8 w-8 dark:bg-yellow-200 dark:text-yellow-600 dark:hover:bg-yellow-300';
divClass += 'bg-yellow-100 dark:bg-yellow-200 ';
if (borderAccent) divClass += 'border-yellow-500 dark:bg-tellow-200 ';
contentClass = 'text-yellow-700 dark:text-yellow-800';
buttonClass += 'bg-yellow-100 text-yellow-500 focus:ring-yellow-400 hover:bg-yellow-200 dark:bg-yellow-200 dark:text-yellow-600 dark:hover:bg-yellow-300';
} else if (color === 'green') {
divClass = 'flex p-4 mb-4 bg-green-100 rounded-lg dark:bg-green-200';
svgClass = 'flex-shrink-0 w-5 h-5 text-green-700 dark:text-green-800';
slotClass = 'ml-3 text-sm font-medium text-green-700 dark:text-green-800';
buttonClass =
'ml-auto -mx-1.5 -my-1.5 bg-green-100 text-green-500 rounded-lg focus:ring-2 focus:ring-green-400 p-1.5 hover:bg-green-200 inline-flex h-8 w-8 dark:bg-green-200 dark:text-green-600 dark:hover:bg-green-300';
divClass += 'bg-green-100 dark:bg-green-200 ';
if (borderAccent) divClass += 'border-green-500 dark:bg-green-200 ';
contentClass = 'text-green-700 dark:text-green-800';
buttonClass += 'bg-green-100 text-green-500 focus:ring-green-400 hover:bg-green-200 dark:bg-green-200 dark:text-green-600 dark:hover:bg-green-300';
} else if (color === 'indigo') {
divClass = 'flex p-4 mb-4 bg-indigo-100 rounded-lg dark:bg-indigo-200';
svgClass = 'flex-shrink-0 w-5 h-5 text-indigo-700 dark:text-indigo-800';
slotClass = 'ml-3 text-sm font-medium text-indigo-700 dark:text-indigo-800';
buttonClass =
'ml-auto -mx-1.5 -my-1.5 bg-indigo-100 text-indigo-500 rounded-lg focus:ring-2 focus:ring-indigo-400 p-1.5 hover:bg-indigo-200 inline-flex h-8 w-8 dark:bg-indigo-200 dark:text-indigo-600 dark:hover:bg-indigo-300';
divClass += 'bg-indigo-100 dark:bg-indigo-200 ';
if (borderAccent) divClass += 'border-indigo-500 dark:bg-indigo-200 ';
contentClass = 'text-indigo-700 dark:text-indigo-800';
buttonClass += 'bg-indigo-100 text-indigo-500 focus:ring-indigo-400 hover:bg-indigo-200 dark:bg-indigo-200 dark:text-indigo-600 dark:hover:bg-indigo-300';
} else if (color === 'purple') {
divClass = 'flex p-4 mb-4 bg-purple-100 rounded-lg dark:bg-purple-200';
svgClass = 'flex-shrink-0 w-5 h-5 text-purple-700 dark:text-purple-800';
slotClass = 'ml-3 text-sm font-medium text-purple-700 dark:text-purple-800';
buttonClass =
'ml-auto -mx-1.5 -my-1.5 bg-purple-100 text-purple-500 rounded-lg focus:ring-2 focus:ring-purple-400 p-1.5 hover:bg-purple-200 inline-flex h-8 w-8 dark:bg-purple-200 dark:text-purple-600 dark:hover:bg-purple-300';
divClass += 'bg-purple-100 dark:bg-purple-200 ';
if (borderAccent) divClass += 'border-purple-500 dark:bg-purple-200 ';
contentClass = 'text-purple-700 dark:text-purple-800';
buttonClass += 'bg-purple-100 text-purple-500 focus:ring-purple-400 hover:bg-purple-200 dark:bg-purple-200 dark:text-purple-600 dark:hover:bg-purple-300';
} else if (color === 'pink') {
divClass = 'flex p-4 mb-4 bg-pink-100 rounded-lg dark:bg-pink-200';
svgClass = 'flex-shrink-0 w-5 h-5 text-pink-700 dark:text-pink-800';
slotClass = 'ml-3 text-sm font-medium text-pink-700 dark:text-pink-800';
buttonClass =
'ml-auto -mx-1.5 -my-1.5 bg-pink-100 text-pink-500 rounded-lg focus:ring-2 focus:ring-pink-400 p-1.5 hover:bg-pink-200 inline-flex h-8 w-8 dark:bg-pink-200 dark:text-pink-600 dark:hover:bg-pink-300';
divClass += 'bg-pink-100 dark:bg-pink-200 ';
if (borderAccent) divClass += 'border-pink-500 dark:bg-pink-200 ';
contentClass = 'text-pink-700 dark:text-pink-800';
buttonClass += 'bg-pink-100 text-pink-500 focus:ring-pink-400 hover:bg-pink-200 dark:bg-pink-200 dark:text-pink-600 dark:hover:bg-pink-300';
} else {
divClass = 'flex p-4 mb-4 bg-blue-100 rounded-lg dark:bg-blue-200';
svgClass = 'flex-shrink-0 w-5 h-5 text-blue-700 dark:text-blue-800';
slotClass = 'ml-3 text-sm font-medium text-blue-700 dark:text-blue-800';
buttonClass =
'ml-auto -mx-1.5 -my-1.5 bg-gray-100 text-gray-500 rounded-lg focus:ring-2 focus:ring-gray-400 p-1.5 hover:bg-gray-200 inline-flex h-8 w-8 dark:bg-gray-200 dark:text-gray-600 dark:hover:bg-gray-300';
divClass += 'bg-blue-100 dark:bg-blue-200 ';
if (borderAccent) divClass += 'border-blue-500 dark:bg-blue-200 ';
contentClass = 'text-blue-700 dark:text-blue-800';
buttonClass += 'bg-blue-100 text-blue-500 focus:ring-blue-400 hover:bg-blue-200 dark:bg-blue-200 dark:text-blue-600 dark:hover:bg-blue-300';
}
let button1Class =
'text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800';
</script>

<div id={alertId} class:hidden class={divClass} role="alert">
<svg class={svgClass} fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"
><path
fill-rule="evenodd"
d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z"
clip-rule="evenodd"
/></svg
>
<div class={slotClass}>
<slot />
<div id={$$props.id} class:hidden class="{divClass} {$$props.class}" role="alert">
<div class="flex">
{#if icon}
<svelte:component this={icon} class="flex-shrink-0 w-5 h-5 {contentClass} mr-3" />
{/if}

<div class="text-sm font-medium {contentClass}">
<slot name="content"/>
</div>

{#if closeBtn}
<button on:click={handleHide} type="button" class={buttonClass} aria-label="Close">
<span class="sr-only">Close</span>
<svg class="w-5 h-5" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>
</button>
{/if}
</div>
{#if closeBtn}
<button on:click={handleHide} type="button" class={buttonClass} aria-label="Close">
<span class="sr-only">Close</span>
<svg
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
><path
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"
/></svg
>
</button>
{/if}
{#if btn1}
<button on:click={handlebtn1} type="button" class={buttonClass} aria-label="Close">
<span class="sr-only">Close</span>
<svg
class="w-5 h-5"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
><path
fill-rule="evenodd"
d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z"
clip-rule="evenodd"
/></svg
>
</button>
{/if}

<slot name="extra"/>
</div>
75 changes: 0 additions & 75 deletions src/lib/alerts/BorderAlert.svelte
View file
Open in desktop

This file was deleted.

Loading