Skip to content

Commit

Permalink
feat(vue): Breadcrumbs components
Browse files Browse the repository at this point in the history
  • Loading branch information
nolimits4web committed Apr 28, 2022
1 parent 3f682dc commit 802aec1
Show file tree
Hide file tree
Showing 9 changed files with 349 additions and 49 deletions.
49 changes: 0 additions & 49 deletions kitchen-sink/react/pages/Breadcrumbs.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,18 +13,9 @@ import {
Popover,
List,
ListItem,
Icon,
Link,
} from 'konsta/react';

import {
HouseFill,
SquareListFill,
DevicePhonePortrait,
} from 'framework7-icons/react';

import { MdHome, MdList, MdSmartphone } from 'react-icons/md';

export default function BreadcrumbsPage() {
const isPreview = document.location.href.includes('examplePreview');

Expand Down Expand Up @@ -125,46 +116,6 @@ export default function BreadcrumbsPage() {
/>
</List>
</Popover>

<BlockTitle>With Icons</BlockTitle>
<Block strong>
<Breadcrumbs>
<BreadcrumbsItem>
<Link colors={{ text: 'text-inherit' }}>
<Icon
className="text-[24px]"
ios={<HouseFill />}
material={<MdHome />}
/>
<span>Home</span>
</Link>
</BreadcrumbsItem>
<BreadcrumbsSeparator />
<BreadcrumbsItem>
<Link colors={{ text: 'text-inherit' }}>
<Icon
className="text-[24px]"
ios={<SquareListFill />}
material={<MdList />}
/>
<span>Catalog</span>
</Link>
</BreadcrumbsItem>
<BreadcrumbsSeparator />
<BreadcrumbsItem>
<Link colors={{ text: 'text-inherit' }}>
<Icon
className="text-[24px]"
ios={<DevicePhonePortrait />}
material={<MdSmartphone />}
/>
<span>Phones</span>
</Link>
</BreadcrumbsItem>
<BreadcrumbsSeparator />
<BreadcrumbsItem active>iPhone 12</BreadcrumbsItem>
</Breadcrumbs>
</Block>
</Page>
);
}
Expand Down
149 changes: 149 additions & 0 deletions kitchen-sink/vue/pages/Breadcrumbs.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,149 @@
<template>
<k-page>
<k-navbar title="Breadcrumbs">
<template v-if="!isPreview" #left>
<k-navbar-back-link @click="() => history.back()" />
</template>
</k-navbar>

<k-block strong>
<p>
Breadcrumbs allow users to keep track and maintain awareness of their
locations within the app or website. They should be used for large sites
and apps with hierarchically arranged pages.
</p>
</k-block>

<k-block-title>Basic</k-block-title>
<k-block strong>
<k-breadcrumbs>
<k-breadcrumbs-item>
<k-link :colors="{ text: 'text-inherit' }">Home</k-link>
</k-breadcrumbs-item>
<k-breadcrumbs-separator />
<k-breadcrumbs-item>
<k-link :colors="{ text: 'text-inherit' }">Catalog</k-link>
</k-breadcrumbs-item>
<k-breadcrumbs-separator />
<k-breadcrumbs-item active>Phones</k-breadcrumbs-item>
</k-breadcrumbs>
</k-block>

<k-block-title>Scrollable</k-block-title>
<k-block-header
>Breadcrumbs will be scrollable if they don't fit the
screen</k-block-header
>
<k-block strong>
<k-breadcrumbs>
<k-breadcrumbs-item>
<k-link :colors="{ text: 'text-inherit' }">Home</k-link>
</k-breadcrumbs-item>
<k-breadcrumbs-separator />
<k-breadcrumbs-item>
<k-link :colors="{ text: 'text-inherit' }">Catalog</k-link>
</k-breadcrumbs-item>
<k-breadcrumbs-separator />
<k-breadcrumbs-item>
<k-link :colors="{ text: 'text-inherit' }">Phones</k-link>
</k-breadcrumbs-item>
<k-breadcrumbs-separator />
<k-breadcrumbs-item>
<k-link :colors="{ text: 'text-inherit' }">Apple</k-link>
</k-breadcrumbs-item>
<k-breadcrumbs-separator />
<k-breadcrumbs-item active>iPhone 12</k-breadcrumbs-item>
</k-breadcrumbs>
</k-block>

<k-block-title>Collapsed</k-block-title>
<k-block strong>
<k-breadcrumbs>
<k-breadcrumbs-item>
<k-link :colors="{ text: 'text-inherit' }">Home</k-link>
</k-breadcrumbs-item>
<k-breadcrumbs-separator />
<k-breadcrumbs-collapsed
ref="popoverTargetRef"
@click="() => (popoverOpened = true)"
/>

<k-breadcrumbs-separator />
<k-breadcrumbs-item active>iPhone 12</k-breadcrumbs-item>
</k-breadcrumbs>
</k-block>
<k-popover
:opened="popoverOpened"
:target="popoverTargetRef"
style="width: 120px"
@backdropclick="() => (popoverOpened = false)"
>
<k-list nested :hairlines="false" :colors="{ bg: 'bg-transparent' }">
<k-list-item
link
title="Catalog"
@click="() => (popoverOpened = false)"
/>
<k-list-item
link
title="Phones"
@click="() => (popoverOpened = false)"
/>
<k-list-item
link
title="Apple"
@click="() => (popoverOpened = false)"
/>
</k-list>
</k-popover>
</k-page>
</template>
<script>
import { ref } from 'vue';
import {
kPage,
kNavbar,
kNavbarBackLink,
kLink,
kBlock,
kBlockTitle,
kBlockHeader,
kBreadcrumbs,
kBreadcrumbsItem,
kBreadcrumbsSeparator,
kBreadcrumbsCollapsed,
kPopover,
kList,
kListItem,
} from 'konsta/vue';
export default {
name: 'BreadcrumbsPage',
components: {
kPage,
kNavbar,
kNavbarBackLink,
kLink,
kBlock,
kBlockTitle,
kBlockHeader,
kBreadcrumbs,
kBreadcrumbsItem,
kBreadcrumbsSeparator,
kBreadcrumbsCollapsed,
kPopover,
kList,
kListItem,
},
setup() {
const popoverOpened = ref(false);
const popoverTargetRef = ref(null);
return {
isPreview: document.location.href.includes('examplePreview'),
history: window.history,
popoverOpened,
popoverTargetRef,
};
},
};
</script>
2 changes: 2 additions & 0 deletions kitchen-sink/vue/routes.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import Home from './pages/Home.vue';
import Badge from './pages/Badge.vue';
import Breadcrumbs from './pages/Breadcrumbs.vue';
import Buttons from './pages/Buttons.vue';
import Cards from './pages/Cards.vue';
import Checkbox from './pages/Checkbox.vue';
Expand Down Expand Up @@ -30,6 +31,7 @@ import Toolbar from './pages/Toolbar.vue';
const routes = [
Home,
Badge,
Breadcrumbs,
Buttons,
Cards,
Checkbox,
Expand Down
2 changes: 2 additions & 0 deletions src/shared/calc-popover-position.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ export const calcPopoverPosition = ({
targetEl = targetEl.value;
} else if (targetEl.el) {
targetEl = targetEl.el;
} else if (targetEl.$el) {
targetEl = targetEl.$el;
}

if (typeof targetEl === 'string') {
Expand Down
41 changes: 41 additions & 0 deletions src/vue/components/Breadcrumbs.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
<template>
<component :is="component" :class="c.base">
<slot />
</component>
</template>
<script>
import { BreadcrumbsClasses } from '../../shared/classes/BreadcrumbsClasses.js';
import { useThemeClasses } from '../shared/use-theme-classes.js';
export default {
name: 'k-breadcrumbs',
props: {
component: {
type: String,
default: 'span',
},
ios: {
type: Boolean,
default: undefined,
},
material: {
type: Boolean,
default: undefined,
},
fontSizeIos: {
type: String,
default: 'text-[17px]',
},
fontSizeMaterial: {
type: String,
default: 'text-[16px]',
},
},
setup(props) {
const c = useThemeClasses(props, () => BreadcrumbsClasses(props));
return {
c,
};
},
};
</script>
52 changes: 52 additions & 0 deletions src/vue/components/BreadcrumbsCollapsed.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
<template>
<component :is="component" :class="c.base">
<span :class="c.dot" />
<span :class="c.dot" />
<span :class="c.dot" />
<slot />
</component>
</template>
<script>
import { computed } from 'vue';
import { BreadcrumbsCollapsedClasses } from '../../shared/classes/BreadcrumbsCollapsedClasses.js';
import { cls } from '../../shared/cls.js';
import { useThemeClasses } from '../shared/use-theme-classes.js';
import { useDarkClasses } from '../shared/use-dark-classes.js';
export default {
name: 'k-breadcrumbs-collapsed',
props: {
component: {
type: String,
default: 'span',
},
ios: {
type: Boolean,
default: undefined,
},
material: {
type: Boolean,
default: undefined,
},
colors: {
type: Object,
},
},
setup(props) {
const colors = computed(() => ({
bg: cls(
'bg-black bg-opacity-15',
useDarkClasses('dark:bg-white dark:bg-opacity-15')
),
dotBg: cls('bg-black', useDarkClasses('dark:bg-white')),
...props.colors,
}));
const c = useThemeClasses(props, () =>
BreadcrumbsCollapsedClasses(props, colors.value)
);
return {
c,
};
},
};
</script>
53 changes: 53 additions & 0 deletions src/vue/components/BreadcrumbsItem.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
<template>
<component :is="component" :class="c.base">
<slot />
</component>
</template>
<script>
import { computed } from 'vue';
import { BreadcrumbsItemClasses } from '../../shared/classes/BreadcrumbsItemClasses.js';
import { useThemeClasses } from '../shared/use-theme-classes.js';
import { useDarkClasses } from '../shared/use-dark-classes.js';
import { cls } from '../../shared/cls.js';
export default {
name: 'k-breadcrumbs-item',
props: {
component: {
type: String,
default: 'span',
},
ios: {
type: Boolean,
default: undefined,
},
material: {
type: Boolean,
default: undefined,
},
colors: {
type: Object,
},
active: {
type: Boolean,
default: false,
},
},
setup(props) {
const colors = computed(() => ({
text: cls(
'text-black text-opacity-55',
useDarkClasses('dark:text-white dark:text-opacity-55')
),
textActive: cls('text-black', useDarkClasses('dark:text-white')),
...props.colors,
}));
const c = useThemeClasses(props, () =>
BreadcrumbsItemClasses(props, colors.value)
);
return {
c,
};
},
};
</script>

0 comments on commit 802aec1

Please sign in to comment.