[@svelteui/core]: add new drawer component

packages/svelteui-core/src/components/Drawer/Drawer.d.ts

@@ -0,0 +1,39 @@
+import { HTMLAttributes } from 'svelte/elements';
+import { LiteralUnion, Transition } from '$lib/internal';
+import { DefaultProps, SvelteUINumberSize, SvelteUIShadow, SvelteUISize } from '$lib/styles';
+
+export interface DrawerProps extends DefaultProps, HTMLAttributes<HTMLElement> {
+	opened: boolean;
+	title?: any;
+	zIndex?: number;
+	overflow?: 'outside' | 'inside';
+	withCloseButton?: boolean;
+	overlay?: boolean;
+	overlayOpacity?: number;
+	overlayColor?: string;
+	overlayBlur?: number;
+	position?: DrawerPosition;
+	size?: LiteralUnion<SvelteUISize, number | string>;
+	transition?: Transition;
+	transitionDuration?: number;
+	transitionTimingFunction?: string;
+	closeButtonLabel?: string;
+	id?: string;
+	shadow?: SvelteUIShadow;
+	padding?: SvelteUINumberSize;
+	closeOnClickOutside?: boolean;
+	closeOnEscape?: boolean;
+	trapFocus?: boolean;
+	centered?: boolean;
+	target?: HTMLElement | string;
+	withinPortal?: boolean;
+	speed?: number;
+}
+
+export interface DrawerEvents {
+	close: CustomEvent;
+	[evt: string]: CustomEvent<any>;
+}
+
+
+export type DrawerPosition = 'right' | 'left' | 'top' | 'bottom';

packages/svelteui-core/src/components/Drawer/Drawer.stories.svelte

@@ -0,0 +1,135 @@
+<script lang="ts">
+	import { Meta, Template, Story } from '@storybook/addon-svelte-csf';
+	import { Drawer } from './index';
+	import { Button } from '../Button';
+	import TextInput from '../TextInput/TextInput.svelte';
+	import Checkbox from '../Checkbox/Checkbox.svelte';
+	import InputWrapper from '../InputWrapper/InputWrapper.svelte';
+	import Input from '../Input/Input.svelte';
+	import { Grid } from '../Grid';
+	import { EnvelopeClosed, LockClosed } from 'radix-icons-svelte';
+	import type { DrawerPosition } from './Drawer';
+
+	let opened = false;
+
+	function toggleOpen() {
+		opened = !opened;
+	}
+	function handleClose() {
+		opened = false;
+	}
+
+	let openedPosition = false;
+
+	function toggleOpenPosition() {
+		openedPosition = !openedPosition;
+	}
+	function handleClosePosition() {
+		openedPosition = false;
+	}
+
+	let position: DrawerPosition = 'left';
+</script>
+
+<Meta title="Components/Drawer" component={Drawer} />
+
+<Template let:args>
+	<Button on:click={toggleOpen}>Bottom</Button>
+	<Drawer
+		size={'500px'}
+		title={'Title of Drawer'}
+		{opened}
+		position={'bottom'}
+		on:close={handleClose}
+		{...args}
+	>
+		<div style="height: 100%;width:200px;background-color: brown;">fsdfdsfsƒ</div>
+	</Drawer>
+</Template>
+
+<Story name="Right">
+	<Button on:click={toggleOpen}>Right</Button>
+
+	<Drawer
+		withinPortal={true}
+		size={'500px'}
+		title={'Title of Drawer'}
+		{opened}
+		position={'right'}
+		on:close={handleClose}
+	>
+		<Grid>
+			<Grid.Col span={6}
+				><InputWrapper id="input-demo1" label="First Name">
+					<Input placeholder="Enter first name" />
+				</InputWrapper></Grid.Col
+			>
+			<Grid.Col span={6}>
+				<InputWrapper id="input-demo3" label="Last Name">
+					<Input placeholder="Enter last name" />
+				</InputWrapper></Grid.Col
+			>
+			<Grid.Col span={12}>
+				<InputWrapper id="input-demo2" label="Email" description="">
+					<Input icon={EnvelopeClosed} placeholder="Enter your email id" />
+				</InputWrapper></Grid.Col
+			>
+			<Grid.Col span={12}>
+				<InputWrapper id="input-demo4" label="Password" description="">
+					<Input icon={LockClosed} placeholder="Enter Password" />
+				</InputWrapper></Grid.Col
+			>
+			<Grid.Col span={12}>
+				<InputWrapper id="input-demo4" label="Confirm Password" description="">
+					<Input icon={LockClosed} placeholder="Enter Confirm Password" />
+				</InputWrapper></Grid.Col
+			>
+			<Grid.Col span={12}><Checkbox size={'md'} label="I agree to sell my privacy" /></Grid.Col>
+			<Grid.Col span={12}><Button>Save</Button></Grid.Col>
+		</Grid>
+	</Drawer>
+</Story>
+
+<Story name="Position">
+	<Grid>
+		<Grid.Col span={6}
+			><Button
+				on:click={() => {
+					toggleOpenPosition();
+					position = 'right';
+				}}>Right</Button
+			></Grid.Col
+		><Grid.Col span={6}
+			><Button
+				on:click={() => {
+					toggleOpenPosition();
+					position = 'left';
+				}}>Left</Button
+			></Grid.Col
+		><Grid.Col span={6}
+			><Button
+				on:click={() => {
+					toggleOpenPosition();
+					position = 'top';
+				}}>Top</Button
+			></Grid.Col
+		><Grid.Col span={6}
+			><Button
+				on:click={() => {
+					toggleOpenPosition();
+					position = 'bottom';
+				}}>Bottom</Button
+			></Grid.Col
+		></Grid
+	>
+
+	<Drawer
+		size={'300px'}
+		title={'Title of Drawer'}
+		opened={openedPosition}
+		{position}
+		on:close={handleClosePosition}
+	>
+		<div style="height: 100%;width:200px;">Drawer content</div>
+	</Drawer>
+</Story>

packages/svelteui-core/src/components/Drawer/Drawer.styles.ts

@@ -0,0 +1,78 @@
+import { createStyles } from '$lib/styles';
+
+export interface DrawerStylesParams {
+	overflow: 'outside' | 'inside';
+	size: string | number;
+	speed: number;
+	zIndex: number;
+	position: 'right' | 'left' | 'top' | 'bottom';
+}
+
+export const sizes = {
+	xs: 320,
+	sm: 380,
+	md: 440,
+	lg: 620,
+	xl: 780,
+	full: '100%'
+};
+
+export default createStyles((theme, { overflow, size, zIndex, position, speed }: DrawerStylesParams) => {
+	const customSize = size in sizes === false;
+	const computedSize = typeof size === 'string' && customSize ? size : theme.fn.size({ sizes, size });
+	return {
+		close: {},
+		overlay: {},
+		root: {
+			position: 'fixed',
+			zIndex,
+			top: 0,
+			left: 0,
+			right: 0,
+			bottom: 0
+		},
+
+		wrapper: {
+			backgroundColor: 'white',
+			zIndex: 1111
+		},
+		title: {
+			marginRight: +theme.space.md.value,
+			textOverflow: 'ellipsis',
+			display: 'block',
+			wordBreak: 'break-word'
+		},
+		Drawer: {
+			[`${theme.dark} &`]: {
+				backgroundColor: theme.fn.themeColor('dark', 7)
+			},
+			position: 'fixed',
+			top: `${position === 'top' || position === 'left' || position === 'right' ? (position === 'top' ? ('-' + computedSize) : 0) : 'auto'}`,
+			bottom: `${position === 'bottom' || position === 'left' || position === 'right' ? (position === 'bottom' ? ('-' + computedSize) : 0) : 'auto'} `,
+			right: `${position === 'right' || position === 'bottom' || position === 'top' ? (position === 'right' ? ('-' + computedSize) : 0) : 'auto'} `,
+			left: `${position === 'left' || position === 'bottom' || position === 'top' ? (position === 'left' ? ('-' + computedSize) : 0) : 'auto'} `,
+			width: position === 'left' || position === 'right' ? computedSize : '100vw',
+			height: position === 'top' || position === 'bottom' ? computedSize : '100vh',
+			boxShadow: '-6px 0 16px -8px #00000014, -9px 0 28px #0000000d, -12px 0 48px 16px #00000008;',
+			transition: `${position} ${speed}ms cubic-bezier(.23,1,.32,1),box-shadow ${speed}ms cubic-bezier(.23,1,.32,1)`,
+			outline: 0,
+			backgroundColor: 'white',
+			zIndex: 1
+
+		},
+
+		header: {
+			display: 'flex',
+			alignItems: 'center',
+			justifyContent: 'space-between',
+			marginBottom: parseInt(theme.space.md.value),
+			marginRight: -9
+		},
+
+		body: {
+			maxHeight: overflow === 'inside' ? 'calc(100vh - 185px)' : null,
+			overflowY: overflow === 'inside' ? 'auto' : null,
+			wordBreak: 'break-word'
+		}
+	};
+});