jaro/flowbite-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge branch 'main' into card-component

Browse Source
This commit is contained in:
Ahnaf Ahamed
2022-09-19 19:06:48 +05:30
committed by GitHub
parent dea36eefe1 773e075419
commit 2e57c482b2
11 changed files with 212 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/.vitepress/config.ts
View File

@@ -36,6 +36,7 @@ function getComponents() {
return [
{ text: 'Alert', link: '/components/alert/alert.md' },
{ text: 'Avatar', link: 'components/avatar/avatar.md' },
{ text: 'Breadcrumb', link: 'components/breadcrumb/breadcrumb.md' },
{ text: 'Button', link: '/components/button/button.md' },
{ text: 'Badge', link: 'components/badge/badge.md' },
{ text: 'Button Group', link: '/components/buttonGroup/buttonGroup.md' },
@@ -46,7 +47,6 @@ function getComponents() {
{ text: 'Toast', link: 'components/toast/toast.md' },
{ text: '- Accordion', link: 'components/accordion/accordion.md' },
{ text: '- Breadcrumb', link: 'components/breadcrumb/breadcrumb.md' },
{ text: '- Card', link: 'components/card/card.md' },
{ text: '- Carousel', link: 'components/carousel/carousel.md' },
{ text: '- Footer', link: 'components/footer/footer.md' },

48
docs/components/breadcrumb/breadcrumb.md
View File

@@ -1,15 +1,59 @@
<script setup>
import BreadcrumbExample from './examples/BreadcrumbExample.vue'
import BreadcrumbSolidExample from './examples/BreadcrumbSolidExample.vue'
import BreadcrumbCustomIconsExample from './examples/BreadcrumbCustomIconsExample.vue'
</script>
# Breadcrumb
The breadcrumb component is an important part of any website or application that can be used to show the current location of a page in a hierarchical structure of pages.
Flowbite includes two styles of breadcrumb elements, one that has a transparent background and a few more that come with a background in different colors.
## Default breadcrumb
<BreadcrumbExample />
```vue
<script setup>
import { Breadcrumb } from 'flowbite-vue'
</script>
<template>
<Breadcrumb></Breadcrumb>
<Breadcrumb>
<BreadcrumbItem href="#" home>
Home
</BreadcrumbItem>
<BreadcrumbItem href="#">
Projects
</BreadcrumbItem>
<BreadcrumbItem>
Flowbite
</BreadcrumbItem>
</Breadcrumb>
</template>
```
<BreadcrumbExample />
## Solid Breadcrumb
<BreadcrumbSolidExample />
```vue
<script setup>
import { Breadcrumb } from 'flowbite-vue'
</script>
<template>
<Breadcrumb solid>
<BreadcrumbItem href="#" home>
Home
</BreadcrumbItem>
<BreadcrumbItem href="#">
Projects
</BreadcrumbItem>
<BreadcrumbItem>
Flowbite
</BreadcrumbItem>
</Breadcrumb>
</template>
```
## Custom Icons
<BreadcrumbCustomIconsExample />

26
docs/components/breadcrumb/examples/BreadcrumbCustomIconsExample.vue Normal file
View File

@@ -0,0 +1,26 @@
<template>
<div class="vp-raw flex flex-col">
<Breadcrumb>
<BreadcrumbItem href="#" home>
<template #home-icon>
<svg class="w-4 h-4 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2h-6l-2-2H5a2 2 0 00-2 2z"></path></svg> </template>
Home
</BreadcrumbItem>
<BreadcrumbItem href="#">
<template #arrow-icon>
<svg class="w-4 h-4 text-gray-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
</template>
Projects
</BreadcrumbItem>
<BreadcrumbItem>
<template #arrow-icon>
<svg class="w-4 h-4 text-gray-400 mr-2" fill="none" stroke="currentColor" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M14 5l7 7m0 0l-7 7m7-7H3"></path></svg>
</template>
Flowbite
</BreadcrumbItem>
</Breadcrumb>
</div>
</template>
<script setup>
import { Breadcrumb, BreadcrumbItem } from '../../../../src/index'
</script>

14
docs/components/breadcrumb/examples/BreadcrumbExample.vue
View File

@@ -1,8 +1,18 @@
<template>
<div class="vp-raw flex flex-col">
<Breadcrumb></Breadcrumb>
<Breadcrumb>
<BreadcrumbItem href="#" home>
Home
</BreadcrumbItem>
<BreadcrumbItem href="#">
Projects
</BreadcrumbItem>
<BreadcrumbItem>
Flowbite
</BreadcrumbItem>
</Breadcrumb>
</div>
</template>
<script setup>
import { Breadcrumb } from '../../../../src/index'
import { Breadcrumb, BreadcrumbItem } from '../../../../src/index'
</script>

18
docs/components/breadcrumb/examples/BreadcrumbSolidExample.vue Normal file
View File

@@ -0,0 +1,18 @@
<template>
<div class="vp-raw flex flex-col">
<Breadcrumb solid>
<BreadcrumbItem href="#" home>
Home
</BreadcrumbItem>
<BreadcrumbItem href="#">
Projects
</BreadcrumbItem>
<BreadcrumbItem>
Flowbite
</BreadcrumbItem>
</Breadcrumb>
</div>
</template>
<script setup>
import { Breadcrumb, BreadcrumbItem } from '../../../../src/index'
</script>

33
src/components/Breadcrumb/Breadcrumb.vue
View File

@@ -1,33 +1,20 @@
<template>
<nav class="flex" aria-label="Breadcrumb">
<ol class="inline-flex items-center space-x-1 md:space-x-3">
<li class="inline-flex items-center">
<a href="#" class="inline-flex items-center text-sm font-medium text-gray-700 hover:text-gray-900 dark:text-gray-400 dark:hover:text-white">
<svg class="mr-2 w-4 h-4" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg>
Home
</a>
</li>
<li>
<div class="flex items-center">
<svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
<a href="#" class="ml-1 text-sm font-medium text-gray-700 hover:text-gray-900 md:ml-2 dark:text-gray-400 dark:hover:text-white">Projects</a>
</div>
</li>
<li aria-current="page">
<div class="flex items-center">
<svg class="w-6 h-6 text-gray-400" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
<span class="ml-1 text-sm font-medium text-gray-500 md:ml-2 dark:text-gray-400">Flowbite</span>
</div>
</li>
<nav :class="breadcrumbWrapperClasses" aria-label="Breadcrumb">
<ol :class="breadcrumbClasses">
<slot name="default" />
</ol>
</nav>
</template>
<script lang="ts" setup>
import { computed, toRefs } from 'vue'
import type { PropType } from 'vue'
import { toRefs } from 'vue'
import { useBreadcrumbClasses } from '@/components/Breadcrumb/composables/useBreadcrumbClasses'
const props = defineProps({
solid: {
type: Boolean,
default: false,
},
})
const { breadcrumbWrapperClasses, breadcrumbClasses } = useBreadcrumbClasses(toRefs(props))
</script>

35
src/components/Breadcrumb/BreadcrumbItem.vue Normal file
View File

@@ -0,0 +1,35 @@
<template>
<li class="inline-flex items-center">
<slot name="arrow-icon">
<svg v-if="!home" class="w-6 h-6 text-gray-400 mr-1" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M7.293 14.707a1 1 0 010-1.414L10.586 10 7.293 6.707a1 1 0 011.414-1.414l4 4a1 1 0 010 1.414l-4 4a1 1 0 01-1.414 0z" clip-rule="evenodd"></path></svg>
</slot>
<component :is="breadcrumbElementType" :href="href" :class="breadcrumbItemClasses">
<slot name="home-icon">
<svg v-if="home" class="w-4 h-4 mr-2" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"></path></svg>
</slot>
<slot name="default" />
</component>
</li>
</template>
<script lang="ts" setup>
import { computed, toRefs } from 'vue'
import { useBreadcrumbItemClasses } from '@/components/Breadcrumb/composables/useBreadcrumbItemClasses'
const props = defineProps({
href: {
type: String,
default: null,
},
home: {
type: Boolean,
default: false,
},
})
const breadcrumbElementType = computed(() => {
return props.href ? 'a' : 'span'
})
const { breadcrumbItemClasses } = useBreadcrumbItemClasses(toRefs(props))
</script>

35
src/components/Breadcrumb/composables/useBreadcrumbClasses.ts Normal file
View File

@@ -0,0 +1,35 @@
import type { BreadcrumbType } from '../types'
import type { Ref } from 'vue'
import { computed } from 'vue'
import classNames from 'classnames'
const breadcrumbDefaultClasses = 'inline-flex items-center space-x-1 md:space-x-3'
const breadcrumbWrapperVariantClasses: Record<BreadcrumbType, string> = {
default: 'flex',
solid: 'flex px-5 py-3 text-gray-700 border border-gray-200 rounded-lg bg-gray-50 dark:bg-gray-800 dark:border-gray-700',
}
export type useBreadcrumbProps = {
solid: Ref<boolean>
}
export function useBreadcrumbClasses(props: useBreadcrumbProps): {
breadcrumbClasses: Ref<string>
breadcrumbWrapperClasses: Ref<string>
} {
const breadcrumbClasses = computed<string>(() => {
return classNames(
breadcrumbDefaultClasses,
)
})
const breadcrumbWrapperClasses = computed<string>(() => {
return classNames(
breadcrumbWrapperVariantClasses[props.solid.value ? 'solid' : 'defauilt' as BreadcrumbType],
)
})
return {
breadcrumbClasses,
breadcrumbWrapperClasses,
}
}

26
src/components/Breadcrumb/composables/useBreadcrumbItemClasses.ts Normal file
View File

@@ -0,0 +1,26 @@
import type { Ref } from 'vue'
import { computed } from 'vue'
import classNames from 'classnames'
const breadcrumbItemDefaultClasses = 'ml-1 inline-flex items-center text-sm font-medium dark:text-gray-400'
const breadcrumbItemLinkClasses = 'text-gray-700 hover:text-gray-900 dark:hover:text-white'
const breadcrumbSpanClasses = 'text-gray-500'
export type useBreadcrumbItemProps = {
href: Ref<string>
home: Ref<boolean>
}
export function useBreadcrumbItemClasses(props: useBreadcrumbItemProps): {
breadcrumbItemClasses: Ref<string>
} {
const breadcrumbItemClasses = computed<string>(() => {
return classNames(
breadcrumbItemDefaultClasses,
props.href.value ? breadcrumbItemLinkClasses : breadcrumbSpanClasses,
)
})
return {
breadcrumbItemClasses,
}
}

1
src/components/Breadcrumb/types.ts Normal file
View File

@@ -0,0 +1 @@
export type BreadcrumbType = 'default' | 'solid'

2
src/index.ts
View File

@@ -7,6 +7,8 @@ export { default as Tab } from './components/Tabs/components/Tab/Tab.vue'
export { default as Dropdown } from './components/Dropdown/Dropdown.vue'
export { default as FlowbiteThemable } from './components/utils/FlowbiteThemable/FlowbiteThemable.vue'
export { default as FlowbiteThemableChild } from './components/utils/FlowbiteThemable/components/FlowbiteThemableChild/FlowbiteThemableChild.vue'
export { default as Breadcrumb } from './components/Breadcrumb/Breadcrumb.vue'
export { default as BreadcrumbItem } from './components/Breadcrumb/BreadcrumbItem.vue'
export { default as Avatar } from './components/Avatar/Avatar.vue'
export { default as StackedAvatars } from './components/Avatar/StackedAvatars.vue'
export { default as StackedAvatarsCounter } from './components/Avatar/StackedAvatarsCounter.vue'