Skip to content

Commit

Permalink
feat(svelte): Breadcrumbs components
Browse files Browse the repository at this point in the history
  • Loading branch information
nolimits4web committed Apr 28, 2022
1 parent 802aec1 commit 098a8ec
Show file tree
Hide file tree
Showing 7 changed files with 239 additions and 0 deletions.
105 changes: 105 additions & 0 deletions kitchen-sink/svelte/pages/Breadcrumbs.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,105 @@
<script>
import {
Page,
Navbar,
NavbarBackLink,
BlockTitle,
BlockHeader,
Block,
Breadcrumbs,
BreadcrumbsItem,
BreadcrumbsSeparator,
BreadcrumbsCollapsed,
Popover,
List,
ListItem,
Link,
} from 'konsta/svelte';
let popoverOpened = false;
const isPreview = document.location.href.includes('examplePreview');
</script>

<Page>
<Navbar title="Cards">
<svelte:fragment slot="left">
{#if !isPreview}
<NavbarBackLink onClick={() => history.back()} />
{/if}
</svelte:fragment>
</Navbar>

<BlockTitle>Basic</BlockTitle>
<Block strong>
<Breadcrumbs>
<BreadcrumbsItem>
<Link colors={{ text: 'text-inherit' }}>Home</Link>
</BreadcrumbsItem>
<BreadcrumbsSeparator />
<BreadcrumbsItem>
<Link colors={{ text: 'text-inherit' }}>Catalog</Link>
</BreadcrumbsItem>
<BreadcrumbsSeparator />
<BreadcrumbsItem active>Phones</BreadcrumbsItem>
</Breadcrumbs>
</Block>

<BlockTitle>Scrollable</BlockTitle>
<BlockHeader
>Breadcrumbs will be scrollable if they don't fit the screen</BlockHeader
>
<Block strong>
<Breadcrumbs>
<BreadcrumbsItem>
<Link colors={{ text: 'text-inherit' }}>Home</Link>
</BreadcrumbsItem>
<BreadcrumbsSeparator />
<BreadcrumbsItem>
<Link colors={{ text: 'text-inherit' }}>Catalog</Link>
</BreadcrumbsItem>
<BreadcrumbsSeparator />
<BreadcrumbsItem>
<Link colors={{ text: 'text-inherit' }}>Phones</Link>
</BreadcrumbsItem>
<BreadcrumbsSeparator />
<BreadcrumbsItem>
<Link colors={{ text: 'text-inherit' }}>Apple</Link>
</BreadcrumbsItem>
<BreadcrumbsSeparator />
<BreadcrumbsItem active>iPhone 12</BreadcrumbsItem>
</Breadcrumbs>
</Block>

<BlockTitle>Collapsed</BlockTitle>
<Block strong>
<Breadcrumbs>
<BreadcrumbsItem>
<Link colors={{ text: 'text-inherit' }}>Home</Link>
</BreadcrumbsItem>
<BreadcrumbsSeparator />
<BreadcrumbsCollapsed
class="breadcrumbs-popover-link"
onClick={() => (popoverOpened = true)}
/>
<BreadcrumbsSeparator />
<BreadcrumbsItem active>iPhone 12</BreadcrumbsItem>
</Breadcrumbs>
<Popover
target=".breadcrumbs-popover-link"
style="width: 120px"
onBackdropClick={() => (popoverOpened = false)}
opened={popoverOpened}
>
<List nested hairlines={false} colors={{ bg: 'bg-transparent' }}>
<ListItem
link
title="Catalog"
onClick={() => (popoverOpened = false)}
/>
<ListItem link title="Phones" onClick={() => (popoverOpened = false)} />
<ListItem link title="Apple" onClick={() => (popoverOpened = false)} />
</List>
</Popover>
</Block>
</Page>
2 changes: 2 additions & 0 deletions kitchen-sink/svelte/routes.js
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import Badge from './pages/Badge.svelte';
import Breadcrumbs from './pages/Breadcrumbs.svelte';
import Buttons from './pages/Buttons.svelte';
import Cards from './pages/Cards.svelte';
import Checkbox from './pages/Checkbox.svelte';
Expand Down Expand Up @@ -28,6 +29,7 @@ import Toolbar from './pages/Toolbar.svelte';

const pages = {
Badge,
Breadcrumbs,
Buttons,
Cards,
Checkbox,
Expand Down
23 changes: 23 additions & 0 deletions src/svelte/components/Breadcrumbs.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<script>
import { BreadcrumbsClasses } from '../../shared/classes/BreadcrumbsClasses.js';
import { useThemeClasses } from '../shared/use-theme-classes.js';
let className = undefined;
export { className as class };
export let ios = undefined;
export let material = undefined;
export let fontSizeIos = 'text-[17px]';
export let fontSizeMaterial = 'text-[16px]';
$: c = useThemeClasses(
{ ios, material },
BreadcrumbsClasses({ fontSizeIos, fontSizeMaterial }),
className,
(v) => (c = v)
);
</script>

<div class={c.base} {...$$restProps}>
<slot />
</div>
38 changes: 38 additions & 0 deletions src/svelte/components/BreadcrumbsCollapsed.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
<script>
import { BreadcrumbsCollapsedClasses } from '../../shared/classes/BreadcrumbsCollapsedClasses.js';
import { cls } from '../../shared/cls.js';
import { useDarkClasses } from '../shared/use-dark-classes.js';
import { useThemeClasses } from '../shared/use-theme-classes.js';
let className = undefined;
export { className as class };
export let ios = undefined;
export let material = undefined;
let colorsProp = undefined;
export { colorsProp as colors };
export let onClick = undefined;
const dark = useDarkClasses();
$: colors = {
bg: cls('bg-black bg-opacity-15', dark('dark:bg-white dark:bg-opacity-15')),
dotBg: cls('bg-black', dark('dark:bg-white')),
...colorsProp,
};
$: c = useThemeClasses(
{ ios, material },
BreadcrumbsCollapsedClasses({}, colors),
className,
(v) => (c = v)
);
</script>

<div class={c.base} {...$$restProps} on:click={onClick}>
<span class={c.dot} />
<span class={c.dot} />
<span class={c.dot} />
<slot />
</div>
40 changes: 40 additions & 0 deletions src/svelte/components/BreadcrumbsItem.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<script>
import { BreadcrumbsItemClasses } from '../../shared/classes/BreadcrumbsItemClasses.js';
import { cls } from '../../shared/cls.js';
import { useDarkClasses } from '../shared/use-dark-classes.js';
import { useThemeClasses } from '../shared/use-theme-classes.js';
let className = undefined;
export { className as class };
export let ios = undefined;
export let material = undefined;
let colorsProp = undefined;
export { colorsProp as colors };
export let onClick = undefined;
export let active = false;
const dark = useDarkClasses();
$: colors = {
text: cls(
'text-black text-opacity-55',
dark('dark:text-white dark:text-opacity-55')
),
textActive: cls('text-black', dark('dark:text-white')),
...colorsProp,
};
$: c = useThemeClasses(
{ ios, material },
BreadcrumbsItemClasses({ active }, colors),
className,
(v) => (c = v)
);
</script>

<div class={c.base} {...$$restProps} on:click={onClick}>
<slot />
</div>
23 changes: 23 additions & 0 deletions src/svelte/components/BreadcrumbsSeparator.svelte
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
<script>
import { BreadcrumbsSeparatorClasses } from '../../shared/classes/BreadcrumbsSeparatorClasses.js';
import { useThemeClasses } from '../shared/use-theme-classes.js';
import ChevronIcon from './icons/ChevronIcon.svelte';
let className = undefined;
export { className as class };
export let ios = undefined;
export let material = undefined;
$: c = useThemeClasses(
{ ios, material },
BreadcrumbsSeparatorClasses({}),
className,
(v) => (c = v)
);
</script>

<div class={c.base} {...$$restProps}>
<ChevronIcon class={c.icon} />
<slot />
</div>
8 changes: 8 additions & 0 deletions src/svelte/konsta-svelte.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,10 @@ import Block from './components/Block.svelte';
import BlockFooter from './components/BlockFooter.svelte';
import BlockHeader from './components/BlockHeader.svelte';
import BlockTitle from './components/BlockTitle.svelte';
import Breadcrumbs from './components/Breadcrumbs.svelte';
import BreadcrumbsItem from './components/BreadcrumbsItem.svelte';
import BreadcrumbsSeparator from './components/BreadcrumbsSeparator.svelte';
import BreadcrumbsCollapsed from './components/BreadcrumbsCollapsed.svelte';
import Button from './components/Button.svelte';
import Card from './components/Card.svelte';
import Checkbox from './components/Checkbox.svelte';
Expand Down Expand Up @@ -52,6 +56,10 @@ export {
BlockFooter,
BlockHeader,
BlockTitle,
Breadcrumbs,
BreadcrumbsItem,
BreadcrumbsSeparator,
BreadcrumbsCollapsed,
Button,
Card,
Checkbox,
Expand Down

0 comments on commit 098a8ec

Please sign in to comment.