Skip to content

Commit

Permalink
feat(Layout): added footer
Browse files Browse the repository at this point in the history
  • Loading branch information
N00nDay committed May 7, 2023
1 parent 2112c38 commit ce243d3
Show file tree
Hide file tree
Showing 5 changed files with 240 additions and 19 deletions.
23 changes: 23 additions & 0 deletions src/lib/components/layout/Footer.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<script lang="ts">
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());
const defaultClass =
'flex pb-[var(--sab)] z-10 pl-[calc(var(--sal)+1rem)] pr-[calc(var(--sar)+1rem)] w-full flex-row h-16 min-h-[64px] flex-shrink items-center bg-surface text-content shadow-md flex-1';
$: finalClass = twMerge(defaultClass, $$props.class);
</script>

<footer
aria-labelledby="footer-heading"
class={finalClass}
use:useActions={use}
use:forwardEvents
{...exclude($$props, ['use', 'class'])}
>
<slot />
<slot name="extra" />
</footer>
20 changes: 20 additions & 0 deletions src/lib/components/layout/FooterExtra.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<script lang="ts">
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());
const defaultClass = 'flex-grow flex flex-row items-center justify-end';
$: finalClass = twMerge(defaultClass, $$props.class);
</script>

<div
class={finalClass}
use:useActions={use}
use:forwardEvents
{...exclude($$props, ['use', 'class'])}
>
<slot />
</div>
10 changes: 10 additions & 0 deletions src/lib/components/layout/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -4,20 +4,25 @@ import Extra from './HeaderExtra.svelte';
import Sidebar from './Sidebar.svelte';
import OriginalContent from './Content.svelte';
import Body from './Body.svelte';
import OriginalFooter from './Footer.svelte';
import FooterExtra from './FooterExtra.svelte';

const Layout = OriginalLayout as LayoutStatic;
Layout.Header = OriginalHeader as LayoutHeaderStatic;
Layout.Header.Extra = Extra;
Layout.Content = OriginalContent as LayoutContentStatic;
Layout.Content.Body = Body;
Layout.Content.Sidebar = Sidebar;
Layout.Footer = OriginalFooter as LayoutFooterStatic;
Layout.Footer.Extra = FooterExtra;

export default Layout;

export interface LayoutStatic {
new (...args: ConstructorParameters<typeof OriginalLayout>): OriginalLayout;
Header: LayoutHeaderStatic;
Content: LayoutContentStatic;
Footer: LayoutFooterStatic;
}

export interface LayoutHeaderStatic {
Expand All @@ -30,3 +35,8 @@ export interface LayoutContentStatic {
Body: typeof Body;
Sidebar: typeof Sidebar;
}

export interface LayoutFooterStatic {
new (...args: ConstructorParameters<typeof OriginalFooter>): OriginalFooter;
Extra: typeof FooterExtra;
}
109 changes: 101 additions & 8 deletions src/routes/layout/+page.svelte
Original file line number Diff line number Diff line change
@@ -1,30 +1,123 @@
<script lang="ts">
import { Card, Layout, Col } from '../../lib';
import { example, contentProps, headerSlots } from './examples';
import { Layout } from '../../lib';
import {
contentProps,
headerSlots,
sidebarOutsideExample,
sidebarRightExample,
sidebarExample,
defaultExample
} from './examples';
import { PropsTable, SlotsTable, CodeBlock, ExampleContainer } from '../../docs';
const defaultClass = 'shadow-none border-none text-white';
const headerAndFooter = defaultClass + ' bg-blue-500';
const body = defaultClass + ' bg-primary';
const sidebar = defaultClass + ' bg-blue-700';
</script>

<ExampleContainer title="Default">
<div slot="preview" class="w-full flex flex-row gap-2 items-center justify-center">
<Layout class="h-full">
<Layout.Header class="shadow-none border border-border static z-0"
<Layout.Header class="{headerAndFooter} static z-0"
>Header
<Layout.Header.Extra slot="extra">Header Extra</Layout.Header.Extra>
</Layout.Header>
<Layout.Content>
<Layout.Content.Sidebar
class="flex items-center justify-center border-l border-b border-border min-h-[200px]"
<Layout.Content.Body class="{body} flex items-center justify-center min-h-[200px]"
>Body</Layout.Content.Body
>
</Layout.Content>
<Layout.Footer class="{headerAndFooter} static z-0">
Footer
<Layout.Footer.Extra slot="extra">Footer Extra</Layout.Footer.Extra>
</Layout.Footer>
</Layout>
</div>

<CodeBlock slot="code" language="svelte" code={defaultExample} />
</ExampleContainer>

<ExampleContainer title="With Sidebar">
<div slot="preview" class="w-full flex flex-row gap-2 items-center justify-center">
<Layout class="h-full">
<Layout.Header class="{headerAndFooter} static z-0"
>Header
<Layout.Header.Extra slot="extra">Header Extra</Layout.Header.Extra>
</Layout.Header>
<Layout.Content>
<Layout.Content.Sidebar class="{sidebar} flex items-center justify-center min-h-[200px]"
>Sidebar</Layout.Content.Sidebar
>
<Layout.Content.Body
class="flex items-center justify-center border-b border-r border-l border-border min-h-[200px]"
<Layout.Content.Body class="{body} flex items-center justify-center min-h-[200px]"
>Body</Layout.Content.Body
>
</Layout.Content>
<Layout.Footer class="{headerAndFooter} static z-0">
Footer
<Layout.Footer.Extra slot="extra">Footer Extra</Layout.Footer.Extra>
</Layout.Footer>
</Layout>
</div>

<CodeBlock slot="code" language="svelte" code={sidebarExample} />
</ExampleContainer>

<ExampleContainer title="With Sidebar Right">
<div slot="preview" class="w-full flex flex-row gap-2 items-center justify-center">
<Layout class="h-full">
<Layout.Header class="{headerAndFooter} static z-0"
>Header
<Layout.Header.Extra slot="extra">Header Extra</Layout.Header.Extra>
</Layout.Header>
<Layout.Content>
<Layout.Content.Body class="{body} flex items-center justify-center min-h-[200px]"
>Body</Layout.Content.Body
>
<Layout.Content.Sidebar class="{sidebar} flex items-center justify-center min-h-[200px]"
>Sidebar</Layout.Content.Sidebar
>
</Layout.Content>
<Layout.Footer class="{headerAndFooter} static z-0">
Footer
<Layout.Footer.Extra slot="extra">Footer Extra</Layout.Footer.Extra>
</Layout.Footer>
</Layout>
</div>

<CodeBlock slot="code" language="svelte" code={sidebarRightExample} />
</ExampleContainer>

<ExampleContainer title="Sidebar Outside">
<div slot="preview" class="w-full flex flex-row gap-2 items-center justify-center">
<Layout class="h-full">
<Layout.Content>
<Layout.Content.Sidebar class="{sidebar} flex items-center justify-center min-h-[328px]"
>Sidebar</Layout.Content.Sidebar
>
<Layout class="flex flex-col items-center justify-center border-b-none min-h-[200px]">
<Layout.Header class="{headerAndFooter} static z-0"
>Header
<Layout.Header.Extra slot="extra">Header Extra</Layout.Header.Extra>
</Layout.Header>

<Layout.Content>
<Layout.Content.Body class="{body} flex items-center justify-center min-h-[200px]"
>Body</Layout.Content.Body
>
</Layout.Content>

<Layout.Footer class="{headerAndFooter} static z-0 max-h-[64px]">
Footer
<Layout.Footer.Extra slot="extra">Footer Extra</Layout.Footer.Extra>
</Layout.Footer>
</Layout>
</Layout.Content>
</Layout>
</div>

<CodeBlock slot="code" language="svelte" code={example} />
<CodeBlock slot="code" language="svelte" code={sidebarOutsideExample} />
</ExampleContainer>

<PropsTable component="Layout.Content" props={contentProps} />
Expand Down
97 changes: 86 additions & 11 deletions src/routes/layout/examples.ts
Original file line number Diff line number Diff line change
Expand Up @@ -29,26 +29,101 @@ export const headerSlots: Slot[] = [
}
];

export const example = `
export const defaultExample = `
<script lang="ts">
import { Layout } from 'stwui';
</script>
<Layout class="h-full">
<Layout.Header class="static z-0 shadow-none border border-gray-500">
Header
<Layout.Header class="static z-0"
>Header
<Layout.Header.Extra slot="extra">Header Extra</Layout.Header.Extra>
</Layout.Header>
<Layout.Content>
<Layout.Content.Sidebar
class="flex items-center justify-center border-l border-b border-gray-500 min-h-[200px]"
<Layout.Content.Body class="flex items-center justify-center min-h-[200px]"
>Body</Layout.Content.Body
>
Sidebar
</Layout.Content.Sidebar>
<Layout.Content.Body
class="flex items-center justify-center border-b border-r border-l border-gray-500 min-h-[200px]"
</Layout.Content>
<Layout.Footer class="static z-0">
Footer
<Layout.Footer.Extra slot="extra">Footer Extra</Layout.Footer.Extra>
</Layout.Footer>
</Layout>`;

export const sidebarExample = `
<script lang="ts">
import { Layout } from 'stwui';
</script>
<Layout class="h-full">
<Layout.Header class="static z-0"
>Header
<Layout.Header.Extra slot="extra">Header Extra</Layout.Header.Extra>
</Layout.Header>
<Layout.Content>
<Layout.Content.Sidebar class="flex items-center justify-center min-h-[200px]"
>Sidebar</Layout.Content.Sidebar
>
<Layout.Content.Body class="flex items-center justify-center min-h-[200px]"
>Body</Layout.Content.Body
>
Body
</Layout.Content.Body>
</Layout.Content>
<Layout.Footer class="static z-0">
Footer
<Layout.Footer.Extra slot="extra">Footer Extra</Layout.Footer.Extra>
</Layout.Footer>
</Layout>`;

export const sidebarRightExample = `
<script lang="ts">
import { Layout } from 'stwui';
</script>
<Layout class="h-full">
<Layout.Header class="static z-0"
>Header
<Layout.Header.Extra slot="extra">Header Extra</Layout.Header.Extra>
</Layout.Header>
<Layout.Content>
<Layout.Content.Body class="flex items-center justify-center min-h-[200px]"
>Body</Layout.Content.Body
>
<Layout.Content.Sidebar class="flex items-center justify-center min-h-[200px]"
>Sidebar</Layout.Content.Sidebar
>
</Layout.Content>
<Layout.Footer class="static z-0">
Footer
<Layout.Footer.Extra slot="extra">Footer Extra</Layout.Footer.Extra>
</Layout.Footer>
</Layout>`;

export const sidebarOutsideExample = `
<script lang="ts">
import { Layout } from 'stwui';
</script>
<Layout class="h-full">
<Layout.Content>
<Layout.Content.Sidebar class="flex items-center justify-center min-h-[328px]"
>Sidebar</Layout.Content.Sidebar
>
<Layout class="flex flex-col items-center justify-center min-h-[200px]">
<Layout.Header class="static z-0"
>Header
<Layout.Header.Extra slot="extra">Header Extra</Layout.Header.Extra>
</Layout.Header>
<Layout.Content>
<Layout.Content.Body class="flex items-center justify-center min-h-[200px]"
>Body</Layout.Content.Body
>
</Layout.Content>
<Layout.Footer class="static z-0 max-h-[64px]">
Footer
<Layout.Footer.Extra slot="extra">Footer Extra</Layout.Footer.Extra>
</Layout.Footer>
</Layout>
</Layout.Content>
</Layout>`;

1 comment on commit ce243d3

@vercel
Copy link

@vercel vercel bot commented on ce243d3 May 7, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

stwui – ./

stwui.vercel.app
stwui-n00nday.vercel.app
stwui-git-main-n00nday.vercel.app

Please sign in to comment.