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

feat: Added Navbar component

Browse Source
This commit is contained in:
Ilya Artamonov
2022-11-17 21:05:24 +03:00
parent c658c323cd
commit 8f27fb03fd
12 changed files with 403 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
docs/.vitepress/config.ts
View File

@@ -47,11 +47,11 @@ function getComponents() {
{ text: 'ListGroup', link: 'components/listGroup/listGroup.md' },
{ text: 'Toast', link: 'components/toast/toast.md' },
{ text: 'Modal', link: 'components/modal/modal.md' },
{ text: 'Navbar', link: 'components/navbar/navbar.md' },
{ text: '- Accordion', link: 'components/accordion/accordion.md' },
{ text: '- Carousel', link: 'components/carousel/carousel.md' },
{ text: '- Footer', link: 'components/footer/footer.md' },
{ text: '- Navbar', link: 'components/navbar/navbar.md' },
{ text: '- Pagination', link: 'components/pagination/pagination.md' },
{ text: '- Progress', link: 'components/progress/progress.md' },
{ text: '- Rating', link: 'components/rating/rating.md' },

25
docs/components/navbar/examples/NavbarActionButtonExample.vue Normal file
View File

@@ -0,0 +1,25 @@
<template>
<div class="vp-raw flex flex-col">
<Navbar>
<template #logo>
<NavbarLogo link="https://www.google.com/" alt="Flowbite logo" image-url="https://flowbite.com/docs/images/logo.svg">
Flowbite
</NavbarLogo>
</template>
<template #default="{isShowMenu}">
<NavbarCollapse :isShowMenu="isShowMenu">
<NavbarLink is-active>Home</NavbarLink>
<NavbarLink>Services</NavbarLink>
<NavbarLink>Pricing</NavbarLink>
<NavbarLink>Contact</NavbarLink>
</NavbarCollapse>
</template>
<template #right-side>
<button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-3 md:mr-0 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Get started</button>
</template>
</Navbar>
</div>
</template>
<script setup>
import { Navbar, NavbarLogo, NavbarCollapse, NavbarLink } from '../../../../src/index'
</script>

25
docs/components/navbar/examples/NavbarCustomMobileIconExample.vue Normal file
View File

@@ -0,0 +1,25 @@
<template>
<div class="vp-raw flex flex-col">
<Navbar>
<template #logo>
<NavbarLogo link="https://www.google.com/" alt="Flowbite logo" image-url="https://flowbite.com/docs/images/logo.svg">
Flowbite
</NavbarLogo>
</template>
<template #default="{isShowMenu}">
<NavbarCollapse :isShowMenu="isShowMenu">
<NavbarLink is-active>Home</NavbarLink>
<NavbarLink>Services</NavbarLink>
<NavbarLink>Pricing</NavbarLink>
<NavbarLink>Contact</NavbarLink>
</NavbarCollapse>
</template>
<template #menu-icon>
<svg class="w-6 h-6" 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="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path></svg>
</template>
</Navbar>
</div>
</template>
<script setup>
import { Navbar, NavbarLogo, NavbarCollapse, NavbarLink } from '../../../../src/index'
</script>

18
docs/components/navbar/examples/NavbarExample.vue
View File

@@ -1,8 +1,22 @@
<template>
<div class="vp-raw flex flex-col">
<Navbar></Navbar>
<Navbar>
<template #logo>
<NavbarLogo link="https://www.google.com/" alt="Flowbite logo" image-url="https://flowbite.com/docs/images/logo.svg">
Flowbite
</NavbarLogo>
</template>
<template #default="{isShowMenu}">
<NavbarCollapse :isShowMenu="isShowMenu">
<NavbarLink isActive link="#">Home</NavbarLink>
<NavbarLink link="#">Services</NavbarLink>
<NavbarLink link="#">Pricing</NavbarLink>
<NavbarLink link="#">Contact</NavbarLink>
</NavbarCollapse>
</template>
</Navbar>
</div>
</template>
<script setup>
import { Navbar } from '../../../../src/index'
import { Navbar, NavbarLogo, NavbarCollapse, NavbarLink } from '../../../../src/index'
</script>

22
docs/components/navbar/examples/NavbarSolidExample.vue Normal file
View File

@@ -0,0 +1,22 @@
<template>
<div class="vp-raw flex flex-col">
<Navbar solid>
<template #logo>
<NavbarLogo link="https://www.google.com/" alt="Flowbite logo" image-url="https://flowbite.com/docs/images/logo.svg">
Flowbite
</NavbarLogo>
</template>
<template #default="{isShowMenu}">
<NavbarCollapse :isShowMenu="isShowMenu">
<NavbarLink is-active>Home</NavbarLink>
<NavbarLink>Services</NavbarLink>
<NavbarLink>Pricing</NavbarLink>
<NavbarLink>Contact</NavbarLink>
</NavbarCollapse>
</template>
</Navbar>
</div>
</template>
<script setup>
import { Navbar, NavbarLogo, NavbarCollapse, NavbarLink } from '../../../../src/index'
</script>

110
docs/components/navbar/navbar.md
View File

@@ -1,15 +1,119 @@
<script setup>
import NavbarExample from './examples/NavbarExample.vue'
import NavbarSolidExample from './examples/NavbarSolidExample.vue'
import NavbarActionButtonExample from './examples/NavbarActionButtonExample.vue'
import NavbarCustomMobileIconExample from './examples/NavbarCustomMobileIconExample.vue'
</script>
# Vue Navbar Component - Flowbite
# Navbar Component – Flowbite
The navbar component can be used to show a list of navigation links positioned on the top side of your page based on multiple layouts, sizes, and dropdowns
## Default navbar
```vue
<script setup>
import { Navbar } from 'flowbite-vue'
import { Navbar, NavbarLogo, NavbarCollapse, NavbarLink } from 'flowbite-vue'
</script>
<template>
<Navbar></Navbar>
<Navbar>
<template #logo>
<NavbarLogo link="https://www.google.com/" alt="Flowbite logo" image-url="https://flowbite.com/docs/images/logo.svg">
Flowbite
</NavbarLogo>
</template>
<template #default="{isShowMenu}">
<NavbarCollapse :isShowMenu="isShowMenu">
<NavbarLink isActive link="#">Home</NavbarLink>
<NavbarLink link="#">Services</NavbarLink>
<NavbarLink link="#">Pricing</NavbarLink>
<NavbarLink link="#">Contact</NavbarLink>
</NavbarCollapse>
</template>
</Navbar>
</template>
```
<NavbarExample />
## Solid navbar
```vue
<script setup>
import { Navbar, NavbarLogo, NavbarCollapse, NavbarLink } from 'flowbite-vue'
</script>
<template>
<Navbar solid>
<template #logo>
<NavbarLogo link="https://www.google.com/" alt="Flowbite logo" image-url="https://flowbite.com/docs/images/logo.svg">
Flowbite
</NavbarLogo>
</template>
<template #default="{isShowMenu}">
<NavbarCollapse :isShowMenu="isShowMenu">
<NavbarLink is-active>Home</NavbarLink>
<NavbarLink>Services</NavbarLink>
<NavbarLink>Pricing</NavbarLink>
<NavbarLink>Contact</NavbarLink>
</NavbarCollapse>
</template>
</Navbar>
</template>
```
<NavbarSolidExample />
## Navbar with action button
```vue
<script setup>
import { Navbar, NavbarLogo, NavbarCollapse, NavbarLink } from 'flowbite-vue'
</script>
<template>
<Navbar>
<template #logo>
<NavbarLogo link="https://www.google.com/" alt="Flowbite logo" image-url="https://flowbite.com/docs/images/logo.svg">
Flowbite
</NavbarLogo>
</template>
<template #default="{isShowMenu}">
<NavbarCollapse :isShowMenu="isShowMenu">
<NavbarLink is-active>Home</NavbarLink>
<NavbarLink>Services</NavbarLink>
<NavbarLink>Pricing</NavbarLink>
<NavbarLink>Contact</NavbarLink>
</NavbarCollapse>
</template>
<template #right-side>
<button type="button" class="text-white bg-blue-700 hover:bg-blue-800 focus:ring-4 focus:outline-none focus:ring-blue-300 font-medium rounded-lg text-sm px-5 py-2.5 text-center mr-3 md:mr-0 dark:bg-blue-600 dark:hover:bg-blue-700 dark:focus:ring-blue-800">Get started</button>
</template>
</Navbar>
</template>
```
<NavbarActionButtonExample />
## Navbar with custom mobile icon
```vue
<script setup>
import { Navbar, NavbarLogo, NavbarCollapse, NavbarLink } from 'flowbite-vue'
</script>
<template>
<Navbar>
<template #logo>
<NavbarLogo link="https://www.google.com/" alt="Flowbite logo" image-url="https://flowbite.com/docs/images/logo.svg">
Flowbite
</NavbarLogo>
</template>
<template #default="{isShowMenu}">
<NavbarCollapse :isShowMenu="isShowMenu">
<NavbarLink is-active>Home</NavbarLink>
<NavbarLink>Services</NavbarLink>
<NavbarLink>Pricing</NavbarLink>
<NavbarLink>Contact</NavbarLink>
</NavbarCollapse>
</template>
<template #menu-icon>
<svg class="w-6 h-6" 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="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path></svg>
</template>
</Navbar>
</template>
```
<NavbarCustomMobileIconExample />

19
package.json
View File

@@ -32,8 +32,8 @@
"typecheck": "vue-tsc --noEmit"
},
"peerDependencies": {
"vue": "^3",
"tailwindcss": "^3"
"tailwindcss": "^3",
"vue": "^3.2.41"
},
"devDependencies": {
"@types/lodash": "^4.14.182",
@@ -41,30 +41,29 @@
"@typescript-eslint/eslint-plugin": "^5.30.0",
"@typescript-eslint/parser": "^5.30.0",
"@vitejs/plugin-vue": "^2.3.3",
"@vue/compiler-sfc": "^3.2.37",
"@vue/test-utils": "^2.0.0",
"@vue/tsconfig": "^0.1.3",
"c8": "^7.11.3",
"class-names": "^1.0.0",
"eslint": "^8.18.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-vue": "^9.1.1",
"flowbite": "^1.4.2",
"flowbite": "^1.5.3",
"jsdom": "^20.0.0",
"lodash": "^4.17.21",
"postcss": "^8.4.14",
"postcss-prefix-selector": "^1.16.0",
"prettier": "^2.3.2",
"tailwindcss": "^3",
"tailwindcss": "^3.1.8",
"tsc-alias": "^1.7.0",
"typescript": "^4.7.3",
"typescript": "4.7.3",
"vite": "^2.4.3",
"vitest": "^0.16.0",
"vue-eslint-parser": "^9.0.3",
"vue-tsc": "^0.30.0"
"vue-tsc": "0.30.0"
},
"dependencies": {
"@vueuse/core": "^8.9.1",
"vitepress": "^1.0.0-alpha.4"
"@vueuse/core": "9.3.0",
"classnames": "^2.3.2",
"vitepress": "1.0.0-alpha.19"
}
}

90
src/components/Navbar/Navbar.vue
View File

@@ -1,61 +1,27 @@
<template>
<nav class="bg-white border-gray-200 px-2 sm:px-4 py-2.5 rounded dark:bg-gray-800">
<nav :class="navbarClasses">
<div class="container flex flex-wrap justify-between items-center mx-auto">
<a href="https://flowbite.com/" class="flex items-center">
<!-- <img src="/docs/images/logo.svg" class="mr-3 h-6 sm:h-9" alt="Flowbite Logo" />-->
<span class="self-center text-xl font-semibold whitespace-nowrap dark:text-white">Flowbite</span>
</a>
<button data-collapse-toggle="mobile-menu" type="button" class="inline-flex items-center p-2 ml-3 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="mobile-menu" aria-expanded="false">
<slot name="logo"/>
<button @click="toggleMobileMenu()" type="button" class="inline-flex items-center p-2 ml-3 text-sm text-gray-500 rounded-lg md:hidden hover:bg-gray-100 focus:outline-none focus:ring-2 focus:ring-gray-200 dark:text-gray-400 dark:hover:bg-gray-700 dark:focus:ring-gray-600" aria-controls="navbar-default" aria-expanded="false">
<span class="sr-only">Open main menu</span>
<svg class="w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
<svg class="hidden w-6 h-6" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M4.293 4.293a1 1 0 011.414 0L10 8.586l4.293-4.293a1 1 0 111.414 1.414L11.414 10l4.293 4.293a1 1 0 01-1.414 1.414L10 11.414l-4.293 4.293a1 1 0 01-1.414-1.414L8.586 10 4.293 5.707a1 1 0 010-1.414z" clip-rule="evenodd"></path></svg>
<slot name="menu-icon">
<svg class="w-6 h-6" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" d="M3 5a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 10a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM3 15a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1z" clip-rule="evenodd"></path></svg>
</slot>
</button>
<div class="hidden w-full md:block md:w-auto" id="mobile-menu">
<ul class="flex flex-col mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium">
<li>
<a href="#" class="block py-2 pr-4 pl-3 text-white bg-blue-700 rounded md:bg-transparent md:text-blue-700 md:p-0 dark:text-white" aria-current="page">Home</a>
</li>
<li>
<a href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">About</a>
</li>
<li>
<a href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Services</a>
</li>
<li>
<a href="#" class="block py-2 pr-4 pl-3 text-gray-700 border-b border-gray-100 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent dark:border-gray-700">Pricing</a>
</li>
<li>
<a href="#" class="block py-2 pr-4 pl-3 text-gray-700 hover:bg-gray-50 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 md:p-0 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent">Contact</a>
</li>
</ul>
<slot name="default" :isShowMenu="isShowMenu" />
<div v-if="slots['right-side']" class="flex md:order-2 hidden md:flex">
<slot name="right-side" />
</div>
</div>
</nav>
</template>
<script lang="ts" setup>
import { computed, toRefs } from 'vue'
import type { PropType } from 'vue'
import { useSlots, ref, computed } from 'vue'
import { breakpointsTailwind, useBreakpoints, useToggle } from '@vueuse/core'
import classNames from 'classnames'
const props = defineProps({
border: {
type: Boolean,
default: false,
},
children: {
type: Array,
default() {
return []
},
},
className: {
type: String,
default: '',
},
fluid: {
type: Boolean,
default: false,
},
menuOpen: {
sticky: {
type: Boolean,
default: false,
},
@@ -63,6 +29,36 @@ const props = defineProps({
type: Boolean,
default: false,
},
solid: {
type: Boolean,
default: false,
},
})
const slots = useSlots()
const breakpoints = useBreakpoints(breakpointsTailwind)
const isMobile = breakpoints.smaller('md')
const isShowMenuOnMobile = ref(false)
const toggleMobileMenu = useToggle(isShowMenuOnMobile)
const navbarBaseClasses = ' border-gray-200'
const navbarFloatClasses = 'fixed w-full z-20 top-0 left-0 border-b border-gray-200 dark:border-gray-600'
const navbarRoundedClasses = 'rounded'
const navbarSolidClasses = 'p-3 bg-gray-50 dark:bg-gray-800 dark:border-gray-700'
const navbarWhiteClasses = 'bg-white px-2 sm:px-4 py-2.5 dark:bg-gray-900'
const navbarClasses = computed(() => {
return classNames(
navbarBaseClasses,
props.sticky ? navbarFloatClasses : '',
props.rounded ? navbarRoundedClasses: '',
props.solid ? navbarSolidClasses : navbarWhiteClasses,
)
})
const isShowMenu = computed(() => {
if(!isMobile) {
return true
} else {
return isShowMenuOnMobile.value
}
})
</script>

31
src/components/Navbar/NavbarCollapse.vue Normal file
View File

@@ -0,0 +1,31 @@
<template>
<div :class="menuClasses">
<ul :class="listClasses">
<slot name="default" />
</ul>
</div>
</template>
<script setup lang="ts">
import classNames from 'classnames'
import { computed } from 'vue'
import { breakpointsTailwind, useBreakpoints } from '@vueuse/core'
const breakpoints = useBreakpoints(breakpointsTailwind)
const isMobile = breakpoints.smaller('md')
const props = defineProps({
isShowMenu: {
type: Boolean,
default: false,
},
})
const menuClassesDefault = 'w-full md:block md:w-auto'
const listClassesDefault = 'flex flex-col p-4 mt-4 rounded-lg border border-gray-100 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium md:border-0 dark:bg-gray-800 md:dark:bg-gray-900 dark:border-gray-700'
const mobileListClasses = 'bg-gray-50'
const menuClasses = computed(() => {
return classNames(menuClassesDefault, props.isShowMenu ? '': 'hidden')
})
const listClasses = computed(() => {
return classNames(listClassesDefault, isMobile.value ? mobileListClasses : '')
})
</script>

61
src/components/Navbar/NavbarLink.ts Normal file
View File

@@ -0,0 +1,61 @@
import { defineComponent, h } from 'vue'
import classNames from 'classnames'
export default defineComponent({
name: 'NavbarLink',
props: {
link: {
type: String,
default: '/',
},
isActive: {
type: Boolean,
default: false,
},
component: {
type: [Object, String],
default: 'a',
},
linkAttr: {
type: String,
default: 'href',
},
disabled: {
type: Boolean,
default: false,
},
},
emits: [
'click',
],
setup(props, { slots, emit }) {
const currentPageClasses = 'bg-blue-700 md:bg-transparent text-white md:text-blue-700 dark:text-white'
const defaultStateClasses = 'text-gray-700 hover:bg-gray-100 md:hover:bg-transparent md:border-0 md:hover:text-blue-700 dark:text-gray-400 md:dark:hover:text-white dark:hover:bg-gray-700 dark:hover:text-white md:dark:hover:bg-transparent'
const defaultClasses = 'block py-2 pr-4 pl-3 rounded md:p-0'
const linkClasses = classNames(
defaultClasses,
props.isActive ? currentPageClasses : defaultStateClasses,
)
const handleClick = (event: Event) => {
if (props.disabled) {
return
}
emit('click', event)
}
return () =>
h('li', null, h(
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
props.component,
{
...props,
class: linkClasses,
[props.linkAttr]: props.link,
onClick: handleClick,
},
{
default: () => slots.default && slots.default(),
},
))
},
})

60
src/components/Navbar/NavbarLogo.ts Normal file
View File

@@ -0,0 +1,60 @@
import { defineComponent, h } from 'vue'
export default defineComponent({
name: 'NavbarLogo',
props: {
link: {
type: String,
default: '/',
},
imageUrl: {
type: String,
default: '/assets/logo.svg',
},
alt: {
type: String,
default: 'Logo',
},
component: {
type: [Object, String],
default: 'a',
},
linkAttr: {
type: String,
default: 'href',
},
},
emits: [
'click',
],
setup(props, { slots }) {
return () =>
h(
// eslint-disable-next-line @typescript-eslint/ban-ts-comment
// @ts-ignore
props.component,
{
[props.linkAttr]: props.link,
class: 'flex items-center',
},
{
default: () => [
h(
'img',
{
src: props.imageUrl,
class: 'mr-3 h-6 sm:h-10',
alt: props.alt,
},
),
h(
'span',
{
class: 'self-center text-xl font-semibold whitespace-nowrap dark:text-white',
},
slots,
)],
},
)
},
})

3
src/index.ts
View File

@@ -21,6 +21,9 @@ export { default as ListGroup } from './components/ListGroup/ListGroup.vue'
export { default as ListGroupItem } from './components/ListGroup/components/ListGroupItem/ListGroupItem.vue'
export { default as Modal } from './components/Modal/Modal.vue'
export { default as Navbar } from './components/Navbar/Navbar.vue'
export { default as NavbarLogo } from './components/Navbar/NavbarLogo'
export { default as NavbarCollapse } from './components/Navbar/NavbarCollapse.vue'
export { default as NavbarLink } from './components/Navbar/NavbarLink'
export { default as Pagination } from './components/Pagination/Pagination.vue'
export { default as Progress } from './components/Progress/Progress.vue'
export { default as Rating } from './components/Rating/Rating.vue'