resolve conflict
This commit is contained in:
hirakei1203
3
.gitignore
vendored
3
.gitignore
vendored
@@ -84,6 +84,3 @@ jspm_packages/
|
|||||||
.pnp.*
|
.pnp.*
|
||||||
|
|
||||||
.idea
|
.idea
|
||||||
|
|
||||||
#
|
|
||||||
package-lock.json
|
|
||||||
48
README.md
48
README.md
@@ -84,8 +84,8 @@ module.exports = {
|
|||||||
<table>
|
<table>
|
||||||
<tr>
|
<tr>
|
||||||
<td width="33.3333%">Alerts</td>
|
<td width="33.3333%">Alerts</td>
|
||||||
<td width="33.3333%">:construction: Badge</td>
|
<td width="33.3333%">Badge</td>
|
||||||
<td width="33.3333%">:construction: Breadcrumbs</td>
|
<td width="33.3333%">Breadcrumbs</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td width="33.3333%">
|
<td width="33.3333%">
|
||||||
@@ -94,12 +94,12 @@ module.exports = {
|
|||||||
</a>
|
</a>
|
||||||
</td>
|
</td>
|
||||||
<td width="33.3333%">
|
<td width="33.3333%">
|
||||||
<a href="https://flowbite-react.com/badges/">
|
<a href="https://flowbite-vue.com/components/badge/badge.html">
|
||||||
<img alt="Tailwind CSS Badge" src="https://flowbite.s3.amazonaws.com/github/badge.jpg">
|
<img alt="Tailwind CSS Badge" src="https://flowbite.s3.amazonaws.com/github/badge.jpg">
|
||||||
</a>
|
</a>
|
||||||
</td>
|
</td>
|
||||||
<td width="33.3333%">
|
<td width="33.3333%">
|
||||||
<a href="https://flowbite-react.com/breadcrumb/">
|
<a href="https://flowbite-vue.com/components/breadcrumb/breadcrumb.html">
|
||||||
<img alt="Tailwind CSS Breadcrumbs" src="https://flowbite.s3.amazonaws.com/github/breadcrumbs.jpg">
|
<img alt="Tailwind CSS Breadcrumbs" src="https://flowbite.s3.amazonaws.com/github/breadcrumbs.jpg">
|
||||||
</a>
|
</a>
|
||||||
</td>
|
</td>
|
||||||
@@ -107,7 +107,7 @@ module.exports = {
|
|||||||
<tr>
|
<tr>
|
||||||
<td width="33.3333%">Buttons</td>
|
<td width="33.3333%">Buttons</td>
|
||||||
<td width="33.3333%">Button group</td>
|
<td width="33.3333%">Button group</td>
|
||||||
<td width="33.3333%">:construction: Cards</td>
|
<td width="33.3333%">Cards</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td width="33.3333%">
|
<td width="33.3333%">
|
||||||
@@ -121,7 +121,7 @@ module.exports = {
|
|||||||
</a>
|
</a>
|
||||||
</td>
|
</td>
|
||||||
<td width="33.3333%">
|
<td width="33.3333%">
|
||||||
<a href="https://flowbite-react.com/card/">
|
<a href="https://flowbite-vue.com/components/card/card.html">
|
||||||
<img alt="Tailwind CSS Cards" src="https://flowbite.s3.amazonaws.com/github/cards.jpg">
|
<img alt="Tailwind CSS Cards" src="https://flowbite.s3.amazonaws.com/github/cards.jpg">
|
||||||
</a>
|
</a>
|
||||||
</td>
|
</td>
|
||||||
@@ -138,7 +138,7 @@ module.exports = {
|
|||||||
</a>
|
</a>
|
||||||
</td>
|
</td>
|
||||||
<td width="33.3333%">
|
<td width="33.3333%">
|
||||||
<a href="https://flowbite-react.com/forms/">
|
<a href="https://flowbite-vue.com/components/input/input.html">
|
||||||
<img alt="Tailwind CSS Forms" src="https://flowbite.s3.amazonaws.com/github/forms.jpg">
|
<img alt="Tailwind CSS Forms" src="https://flowbite.s3.amazonaws.com/github/forms.jpg">
|
||||||
</a>
|
</a>
|
||||||
</td>
|
</td>
|
||||||
@@ -150,7 +150,7 @@ module.exports = {
|
|||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td width="33.3333%">:construction: Typography</td>
|
<td width="33.3333%">:construction: Typography</td>
|
||||||
<td width="33.3333%">:construction: Modal</td>
|
<td width="33.3333%">Modal</td>
|
||||||
<td width="33.3333%">Tabs</td>
|
<td width="33.3333%">Tabs</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
@@ -160,7 +160,7 @@ module.exports = {
|
|||||||
</a>
|
</a>
|
||||||
</td>
|
</td>
|
||||||
<td width="33.3333%">
|
<td width="33.3333%">
|
||||||
<a href="https://flowbite-react.com/modal/">
|
<a href="https://flowbite-vue.com/components/modal/modal.html">
|
||||||
<img alt="Tailwind CSS Modal" src="https://flowbite.s3.amazonaws.com/github/modal.jpg">
|
<img alt="Tailwind CSS Modal" src="https://flowbite.s3.amazonaws.com/github/modal.jpg">
|
||||||
</a>
|
</a>
|
||||||
</td>
|
</td>
|
||||||
@@ -171,40 +171,40 @@ module.exports = {
|
|||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td width="33.3333%">:construction: Navbar</td>
|
<td width="33.3333%">Navbar</td>
|
||||||
<td width="33.3333%">:construction: Pagination</td>
|
<td width="33.3333%">:construction: Pagination</td>
|
||||||
<td width="33.3333%">:construction: Timeline</td>
|
<td width="33.3333%">:construction: Timeline</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td width="33.3333%">
|
<td width="33.3333%">
|
||||||
<a href="https://flowbite-react.com/navbars/">
|
<a href="https://flowbite-vue.com/components/navbar/navbar.html">
|
||||||
<img alt="Tailwind CSS Navbar" src="https://flowbite.s3.amazonaws.com/github/navbar.jpg">
|
<img alt="Tailwind CSS Navbar" src="https://flowbite.s3.amazonaws.com/github/navbar.jpg">
|
||||||
</a>
|
</a>
|
||||||
</td>
|
</td>
|
||||||
<td width="33.3333%">
|
<td width="33.3333%">
|
||||||
<a href="https://flowbite-react.com/pagination/">
|
<a href="https://flowbite-vue.com/components/pagination/pagination.html">
|
||||||
<img alt="Tailwind CSS Pagination" src="https://flowbite.s3.amazonaws.com/github/pagination.jpg">
|
<img alt="Tailwind CSS Pagination" src="https://flowbite.s3.amazonaws.com/github/pagination.jpg">
|
||||||
</a>
|
</a>
|
||||||
</td>
|
</td>
|
||||||
<td width="33.3333%">
|
<td width="33.3333%">
|
||||||
<a href="https://flowbite-react.com/timeline/">
|
<a href="https://flowbite-vue.com/components/timeline/timeline.html">
|
||||||
<img alt="Tailwind CSS Timeline" src="https://flowbite.s3.amazonaws.com/github/timeline.jpg">
|
<img alt="Tailwind CSS Timeline" src="https://flowbite.s3.amazonaws.com/github/timeline.jpg">
|
||||||
</a>
|
</a>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td width="33.3333%">:construction: Progress bar</td>
|
<td width="33.3333%">Progress bar</td>
|
||||||
<td width="33.3333%">:construction: Tables</td>
|
<td width="33.3333%">:construction: Tables</td>
|
||||||
<td width="33.3333%">Toast</td>
|
<td width="33.3333%">Toast</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td width="33.3333%">
|
<td width="33.3333%">
|
||||||
<a href="https://flowbite-react.com/progress/">
|
<a href="https://flowbite-vue.com/components/progress/progress.html">
|
||||||
<img alt="Tailwind CSS Progress Bar" src="https://flowbite.s3.amazonaws.com/github/progress.jpg">
|
<img alt="Tailwind CSS Progress Bar" src="https://flowbite.s3.amazonaws.com/github/progress.jpg">
|
||||||
</a>
|
</a>
|
||||||
</td>
|
</td>
|
||||||
<td width="33.3333%">
|
<td width="33.3333%">
|
||||||
<a href="https://flowbite-react.com/tables/">
|
<a href="https://flowbite-vue.com/components/table/table.html">
|
||||||
<img alt="Tailwind CSS Tables" src="https://flowbite.s3.amazonaws.com/github/tables.jpg">
|
<img alt="Tailwind CSS Tables" src="https://flowbite.s3.amazonaws.com/github/tables.jpg">
|
||||||
</a>
|
</a>
|
||||||
</td>
|
</td>
|
||||||
@@ -221,7 +221,7 @@ module.exports = {
|
|||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td width="33.3333%">
|
<td width="33.3333%">
|
||||||
<a href="https://flowbite-react.com/tooltips/">
|
<a href="https://flowbite-vue.com/components/tooltip/tooltip.html">
|
||||||
<img alt="Tailwind CSS Tooltips" src="https://flowbite.s3.amazonaws.com/github/tooltips.jpg">
|
<img alt="Tailwind CSS Tooltips" src="https://flowbite.s3.amazonaws.com/github/tooltips.jpg">
|
||||||
</a>
|
</a>
|
||||||
</td>
|
</td>
|
||||||
@@ -243,39 +243,39 @@ module.exports = {
|
|||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td width="33.3333%">
|
<td width="33.3333%">
|
||||||
<a href="https://flowbite-react.com/footer/">
|
<a href="https://flowbite-vue.com/components/footer/footer.html">
|
||||||
<img alt="Tailwind CSS Footer" src="https://flowbite.s3.amazonaws.com/github/footer.jpg">
|
<img alt="Tailwind CSS Footer" src="https://flowbite.s3.amazonaws.com/github/footer.jpg">
|
||||||
</a>
|
</a>
|
||||||
</td>
|
</td>
|
||||||
<td width="33.3333%">
|
<td width="33.3333%">
|
||||||
<a href="https://flowbite-react.com/accordion/">
|
<a href="https://flowbite-vue.com/components/accordion/accordion.html">
|
||||||
<img alt="Tailwind CSS Accordion" src="https://flowbite.s3.amazonaws.com/github/accordion.jpg">
|
<img alt="Tailwind CSS Accordion" src="https://flowbite.s3.amazonaws.com/github/accordion.jpg">
|
||||||
</a>
|
</a>
|
||||||
</td>
|
</td>
|
||||||
<td width="33.3333%">
|
<td width="33.3333%">
|
||||||
<a href="https://flowbite-react.com/sidebar/">
|
<a href="https://flowbite-vue.com/components/sidebar/sidebar.html">
|
||||||
<img alt="Tailwind CSS Sidebar" src="https://flowbite.s3.amazonaws.com/github/sidebar.jpg">
|
<img alt="Tailwind CSS Sidebar" src="https://flowbite.s3.amazonaws.com/github/sidebar.jpg">
|
||||||
</a>
|
</a>
|
||||||
</td>
|
</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td width="33.3333%">:construction: Carousel</td>
|
<td width="33.3333%">:construction: Carousel</td>
|
||||||
<td width="33.3333%">:construction: Avatar</td>
|
<td width="33.3333%">Avatar</td>
|
||||||
<td width="33.3333%">:construction: Rating</td>
|
<td width="33.3333%">:construction: Rating</td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td width="33.3333%">
|
<td width="33.3333%">
|
||||||
<a href="https://flowbite-react.com/carousel/">
|
<a href="https://flowbite-vue.com/components/carousel/carousel.html">
|
||||||
<img alt="Tailwind CSS Carousel" src="https://flowbite.s3.amazonaws.com/github/carousel.jpg">
|
<img alt="Tailwind CSS Carousel" src="https://flowbite.s3.amazonaws.com/github/carousel.jpg">
|
||||||
</a>
|
</a>
|
||||||
</td>
|
</td>
|
||||||
<td width="33.3333%">
|
<td width="33.3333%">
|
||||||
<a href="https://flowbite-react.com/avatar/">
|
<a href="https://flowbite-vue.com/components/avatar/avatar.html">
|
||||||
<img alt="Tailwind CSS Avatar" src="https://flowbite.s3.amazonaws.com/github/avatar.jpg">
|
<img alt="Tailwind CSS Avatar" src="https://flowbite.s3.amazonaws.com/github/avatar.jpg">
|
||||||
</a>
|
</a>
|
||||||
</td>
|
</td>
|
||||||
<td width="33.3333%">
|
<td width="33.3333%">
|
||||||
<a href="https://flowbite-react.com/rating/">
|
<a href="https://flowbite-vue.com/components/rating/rating.html">
|
||||||
<img alt="Tailwind CSS Rating" src="https://flowbite.s3.amazonaws.com/github/rating.jpg">
|
<img alt="Tailwind CSS Rating" src="https://flowbite.s3.amazonaws.com/github/rating.jpg">
|
||||||
</a>
|
</a>
|
||||||
</td>
|
</td>
|
||||||
|
|||||||
@@ -42,19 +42,19 @@ function getComponents() {
|
|||||||
{ text: 'Button Group', link: '/components/buttonGroup/buttonGroup.md' },
|
{ text: 'Button Group', link: '/components/buttonGroup/buttonGroup.md' },
|
||||||
{ text: 'Card', link: 'components/card/card.md' },
|
{ text: 'Card', link: 'components/card/card.md' },
|
||||||
{ text: 'Dropdown', link: '/components/dropdown/dropdown.md' },
|
{ text: 'Dropdown', link: '/components/dropdown/dropdown.md' },
|
||||||
|
{ text: 'Progress', link: 'components/progress/progress.md' },
|
||||||
{ text: 'Spinner', link: '/components/spinner/spinner.md' },
|
{ text: 'Spinner', link: '/components/spinner/spinner.md' },
|
||||||
{ text: 'Tabs', link: '/components/tabs/tabs.md' },
|
{ text: 'Tabs', link: '/components/tabs/tabs.md' },
|
||||||
{ text: 'ListGroup', link: 'components/listGroup/listGroup.md' },
|
{ text: 'ListGroup', link: 'components/listGroup/listGroup.md' },
|
||||||
{ text: 'Toast', link: 'components/toast/toast.md' },
|
{ text: 'Toast', link: 'components/toast/toast.md' },
|
||||||
{ text: 'Modal', link: 'components/modal/modal.md' },
|
|
||||||
{ text: 'Tooltip', link: 'components/tooltip/tooltip.md' },
|
{ text: 'Tooltip', link: 'components/tooltip/tooltip.md' },
|
||||||
|
{ text: 'Modal', link: 'components/modal/modal.md' },
|
||||||
|
{ text: 'Navbar', link: 'components/navbar/navbar.md' },
|
||||||
|
|
||||||
{ text: '- Accordion', link: 'components/accordion/accordion.md' },
|
{ text: '- Accordion', link: 'components/accordion/accordion.md' },
|
||||||
{ text: '- Carousel', link: 'components/carousel/carousel.md' },
|
{ text: '- Carousel', link: 'components/carousel/carousel.md' },
|
||||||
{ text: '- Footer', link: 'components/footer/footer.md' },
|
{ text: '- Footer', link: 'components/footer/footer.md' },
|
||||||
{ text: '- Navbar', link: 'components/navbar/navbar.md' },
|
|
||||||
{ text: '- Pagination', link: 'components/pagination/pagination.md' },
|
{ text: '- Pagination', link: 'components/pagination/pagination.md' },
|
||||||
{ text: '- Progress', link: 'components/progress/progress.md' },
|
|
||||||
{ text: '- Rating', link: 'components/rating/rating.md' },
|
{ text: '- Rating', link: 'components/rating/rating.md' },
|
||||||
{ text: '- Sidebar', link: 'components/sidebar/sidebar.md' },
|
{ text: '- Sidebar', link: 'components/sidebar/sidebar.md' },
|
||||||
{ text: '- Table', link: 'components/table/table.md' },
|
{ text: '- Table', link: 'components/table/table.md' },
|
||||||
|
|||||||
@@ -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>
|
||||||
@@ -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>
|
||||||
@@ -1,8 +1,22 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="vp-raw flex flex-col">
|
<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>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import { Navbar } from '../../../../src/index'
|
import { Navbar, NavbarLogo, NavbarCollapse, NavbarLink } from '../../../../src/index'
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
22
docs/components/navbar/examples/NavbarSolidExample.vue
Normal file
22
docs/components/navbar/examples/NavbarSolidExample.vue
Normal 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>
|
||||||
@@ -1,15 +1,119 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import NavbarExample from './examples/NavbarExample.vue'
|
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>
|
</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
|
```vue
|
||||||
<script setup>
|
<script setup>
|
||||||
import { Navbar } from 'flowbite-vue'
|
import { Navbar, NavbarLogo, NavbarCollapse, NavbarLink } from 'flowbite-vue'
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<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>
|
</template>
|
||||||
```
|
```
|
||||||
|
|
||||||
<NavbarExample />
|
<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 />
|
||||||
|
|||||||
15
docs/components/progress/examples/ProgressColorExample.vue
Normal file
15
docs/components/progress/examples/ProgressColorExample.vue
Normal file
@@ -0,0 +1,15 @@
|
|||||||
|
<template>
|
||||||
|
<div class="vp-raw flex flex-col grid gap-4">
|
||||||
|
<Progress label="Default" progress="45"></Progress>
|
||||||
|
<Progress color="dark" label="Dark" progress="45"></Progress>
|
||||||
|
<Progress color="blue" label="Blue" progress="45"></Progress>
|
||||||
|
<Progress color="red" label="Red" progress="45"></Progress>
|
||||||
|
<Progress color="green" label="Green" progress="45"></Progress>
|
||||||
|
<Progress color="yellow" label="Yellow" progress="45"></Progress>
|
||||||
|
<Progress color="indigo" label="Indigo" progress="45"></Progress>
|
||||||
|
<Progress color="purple" label="Purple" progress="45"></Progress>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { Progress } from '../../../../src/index'
|
||||||
|
</script>
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="vp-raw flex flex-col">
|
<div class="vp-raw flex flex-col">
|
||||||
<Progress></Progress>
|
<Progress progress="45"></Progress>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
|
|||||||
@@ -0,0 +1,6 @@
|
|||||||
|
<template>
|
||||||
|
<Progress labelProgress="true" labelPosition="inside" size="lg" progress="45"></Progress>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { Progress } from '../../../../src/index'
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,6 @@
|
|||||||
|
<template>
|
||||||
|
<Progress labelProgress="true" labelPosition="outside" label="Flowbite Vue 3" progress="45"></Progress>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { Progress } from '../../../../src/index'
|
||||||
|
</script>
|
||||||
11
docs/components/progress/examples/ProgressSizeExample.vue
Normal file
11
docs/components/progress/examples/ProgressSizeExample.vue
Normal file
@@ -0,0 +1,11 @@
|
|||||||
|
<template>
|
||||||
|
<div class="flex flex-col grid gap-4">
|
||||||
|
<Progress size="sm" label="Small" progress="45"></Progress>
|
||||||
|
<Progress size="md" label="Medium" progress="45"></Progress>
|
||||||
|
<Progress size="lg" label="Large" progress="45"></Progress>
|
||||||
|
<Progress size="xl" label="Extra Large" progress="45"></Progress>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<script setup>
|
||||||
|
import { Progress } from '../../../../src/index'
|
||||||
|
</script>
|
||||||
@@ -1,15 +1,102 @@
|
|||||||
<script setup>
|
<script setup>
|
||||||
import ProgressExample from './examples/ProgressExample.vue'
|
import ProgressExample from './examples/ProgressExample.vue'
|
||||||
|
import ProgressSizeExample from './examples/ProgressSizeExample.vue'
|
||||||
|
import ProgressInsideLabelExample from './examples/ProgressInsideLabelExample.vue'
|
||||||
|
import ProgressOutsideLabelExample from './examples/ProgressOutsideLabelExample.vue'
|
||||||
|
import ProgressColorExample from './examples/ProgressColorExample.vue'
|
||||||
|
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
# Vue Progress Bar Component - Flowbite
|
# Vue Progress Bar Component - Flowbite
|
||||||
|
|
||||||
|
## Default
|
||||||
|
|
||||||
```vue
|
```vue
|
||||||
<script setup>
|
<script setup>
|
||||||
import { Progress } from 'flowbite-vue'
|
import { Progress } from 'flowbite-vue'
|
||||||
</script>
|
</script>
|
||||||
<template>
|
<template>
|
||||||
<Progress></Progress>
|
<Progress progress="45"></Progress>
|
||||||
</template>
|
</template>
|
||||||
```
|
```
|
||||||
|
|
||||||
<ProgressExample />
|
<ProgressExample />
|
||||||
|
|
||||||
|
## Sizes
|
||||||
|
You can also use different sizes by using various sizing.
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<script setup>
|
||||||
|
import { Progress } from 'flowbite-vue'
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<!-- small size -->
|
||||||
|
<Progress size="sm" label="Small" progress="45"></Progress>
|
||||||
|
<!-- medium size -->
|
||||||
|
<Progress size="md" label="Medium" progress="45"></Progress>
|
||||||
|
<!-- large size -->
|
||||||
|
<Progress size="lg" label="Large" progress="45"></Progress>
|
||||||
|
<!-- extra large size -->
|
||||||
|
<Progress size="xl" label="Extra Large" progress="45"></Progress>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
||||||
|
<ProgressSizeExample />
|
||||||
|
|
||||||
|
## With label inside
|
||||||
|
Here is an example of using a progress bar with the label inside the bar.
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<script setup>
|
||||||
|
import { Progress } from 'flowbite-vue'
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<Progress labelProgress="true" labelPosition="inside" size="lg" progress="45"></Progress>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
||||||
|
<ProgressInsideLabelExample />
|
||||||
|
|
||||||
|
## With label outside
|
||||||
|
And this is an example of using a progress bar outside the bar.
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<script setup>
|
||||||
|
import { Progress } from 'flowbite-vue'
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<Progress labelProgress="true" labelPosition="outside" label="Flowbite Vue 3" progress="45"></Progress>
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
||||||
|
<ProgressOutsideLabelExample />
|
||||||
|
|
||||||
|
## Colors
|
||||||
|
You can also apply color.
|
||||||
|
|
||||||
|
```vue
|
||||||
|
<script setup>
|
||||||
|
import { Progress } from 'flowbite-vue'
|
||||||
|
</script>
|
||||||
|
<template>
|
||||||
|
<!-- Default color -->
|
||||||
|
<Progress label="Default" progress="45"></Progress>
|
||||||
|
<!-- Dark -->
|
||||||
|
<Progress color="dark" label="Dark" progress="45"></Progress>
|
||||||
|
<!-- Blue -->
|
||||||
|
<Progress color="blue" label="Blue" progress="45"></Progress>
|
||||||
|
<!-- Red -->
|
||||||
|
<Progress color="red" label="Red" progress="45"></Progress>
|
||||||
|
<!-- Green -->
|
||||||
|
<Progress color="green" label="Green" progress="45"></Progress>
|
||||||
|
<!-- Yellow -->
|
||||||
|
<Progress color="yellow" label="Yellow" progress="45"></Progress>
|
||||||
|
<!-- Indigo -->
|
||||||
|
<Progress color="indigo" label="Indigo" progress="45"></Progress>
|
||||||
|
<!-- Purple -->
|
||||||
|
<Progress color="purple" label="Purple" progress="45"></Progress>
|
||||||
|
|
||||||
|
</template>
|
||||||
|
```
|
||||||
|
|
||||||
|
<ProgressColorExample />
|
||||||
10503
package-lock.json
generated
Normal file
10503
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
63
package.json
63
package.json
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "flowbite-vue",
|
"name": "flowbite-vue",
|
||||||
"version": "0.0.6",
|
"version": "0.0.7",
|
||||||
"repository": "https://github.com/themesberg/flowbite-vue.git",
|
"repository": "https://github.com/themesberg/flowbite-vue.git",
|
||||||
"author": "themesberg",
|
"author": "themesberg",
|
||||||
"license": "MIT",
|
"license": "MIT",
|
||||||
@@ -33,39 +33,42 @@
|
|||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"tailwindcss": "^3",
|
"tailwindcss": "^3",
|
||||||
"vue": "^3"
|
"vue": "^3.2.41"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@types/lodash": "^4.14.182",
|
"@types/lodash-es": "4.17.6",
|
||||||
"@types/node": "^18.0.0",
|
"@types/node": "18.11.9",
|
||||||
"@typescript-eslint/eslint-plugin": "^5.30.0",
|
"@typescript-eslint/eslint-plugin": "5.43.0",
|
||||||
"@typescript-eslint/parser": "^5.30.0",
|
"@typescript-eslint/parser": "5.43.0",
|
||||||
"@vitejs/plugin-vue": "^2.3.3",
|
"@vitejs/plugin-vue": "2.3.4",
|
||||||
"@vue/compiler-sfc": "^3.2.37",
|
"@vue/test-utils": "2.2.4",
|
||||||
"@vue/test-utils": "^2.0.0",
|
"@vue/tsconfig": "0.1.3",
|
||||||
"@vue/tsconfig": "^0.1.3",
|
"c8": "7.12.0",
|
||||||
"c8": "^7.11.3",
|
"eslint": "8.28.0",
|
||||||
"class-names": "^1.0.0",
|
"eslint-config-prettier": "8.5.0",
|
||||||
"eslint": "^8.18.0",
|
"eslint-plugin-vue": "9.7.0",
|
||||||
"eslint-config-prettier": "^8.3.0",
|
"jsdom": "20.0.3",
|
||||||
"eslint-plugin-vue": "^9.1.1",
|
"postcss": "8.4.19",
|
||||||
"flowbite": "^1.4.2",
|
"postcss-prefix-selector": "1.16.0",
|
||||||
"jsdom": "^20.0.0",
|
"prettier": "2.7.1",
|
||||||
"lodash": "^4.17.21",
|
"tsc-alias": "1.7.1",
|
||||||
"postcss": "^8.4.14",
|
"typescript": "4.7.3",
|
||||||
"postcss-prefix-selector": "^1.16.0",
|
"vite": "2.9.15",
|
||||||
"prettier": "^2.3.2",
|
"vitepress": "1.0.0-alpha.29",
|
||||||
"tailwindcss": "^3",
|
"vitest": "0.25.2",
|
||||||
"tsc-alias": "^1.7.0",
|
"vue-eslint-parser": "9.1.0",
|
||||||
"typescript": "^4.7.3",
|
"vue-tsc": "0.30.0"
|
||||||
"vite": "^2.4.3",
|
|
||||||
"vitest": "^0.16.0",
|
|
||||||
"vue-eslint-parser": "^9.0.3",
|
|
||||||
"vue-tsc": "^0.30.0"
|
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@vueuse/core": "^8.9.1",
|
|
||||||
"floating-vue": "^2.0.0-beta.20",
|
"floating-vue": "^2.0.0-beta.20",
|
||||||
"vitepress": "^1.0.0-alpha.4"
|
"@vueuse/core": "9.3.0",
|
||||||
|
"classnames": "2.3.2",
|
||||||
|
"flowbite": "1.5.4",
|
||||||
|
"lodash-es": "4.17.21",
|
||||||
|
"tailwindcss": "3.2.4"
|
||||||
|
},
|
||||||
|
"engines": {
|
||||||
|
"node": "14.x",
|
||||||
|
"npm": "8.x"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -122,7 +122,6 @@ const buttonOutlineGradientClasses: ButtonClassMap<ButtonDuotoneGradient> = {
|
|||||||
},
|
},
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
const buttonSizeClasses: Record<ButtonSize, string> = {
|
const buttonSizeClasses: Record<ButtonSize, string> = {
|
||||||
xs: 'text-xs px-2 py-1',
|
xs: 'text-xs px-2 py-1',
|
||||||
sm: 'text-sm px-3 py-1.5',
|
sm: 'text-sm px-3 py-1.5',
|
||||||
|
|||||||
@@ -9,14 +9,14 @@
|
|||||||
<!-- Modal content -->
|
<!-- Modal content -->
|
||||||
<div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
|
<div class="relative bg-white rounded-lg shadow dark:bg-gray-700">
|
||||||
<!-- Modal header -->
|
<!-- Modal header -->
|
||||||
<div class="p-4 rounded-t flex justify-between items-center" :class="$slots.header ? 'border-b dark:border-gray-600' : ''">
|
<div class="p-4 rounded-t flex justify-between items-center" :class="$slots.header ? 'border-b border-gray-200 dark:border-gray-600' : ''">
|
||||||
<slot name="header" />
|
<slot name="header" />
|
||||||
<div>
|
|
||||||
<button @click="closeModal" type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white">
|
<button @click="closeModal" type="button" class="text-gray-400 bg-transparent hover:bg-gray-200 hover:text-gray-900 rounded-lg text-sm p-1.5 ml-auto inline-flex items-center dark:hover:bg-gray-600 dark:hover:text-white">
|
||||||
|
<slot name="close-icon">
|
||||||
<svg class="w-5 h-5" 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>
|
<svg class="w-5 h-5" 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>
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<!-- Modal body -->
|
<!-- Modal body -->
|
||||||
<div class="p-6" :class="$slots.header ? '' : 'pt-0'">
|
<div class="p-6" :class="$slots.header ? '' : 'pt-0'">
|
||||||
<slot name="body" />
|
<slot name="body" />
|
||||||
|
|||||||
@@ -1,61 +1,27 @@
|
|||||||
<template>
|
<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">
|
<div class="container flex flex-wrap justify-between items-center mx-auto">
|
||||||
<a href="https://flowbite.com/" class="flex items-center">
|
<slot name="logo"/>
|
||||||
<!-- <img src="/docs/images/logo.svg" class="mr-3 h-6 sm:h-9" alt="Flowbite 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="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">
|
|
||||||
<span class="sr-only">Open main menu</span>
|
<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>
|
<slot name="menu-icon">
|
||||||
<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>
|
<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>
|
</button>
|
||||||
<div class="hidden w-full md:block md:w-auto" id="mobile-menu">
|
<slot name="default" :isShowMenu="isShowMenu" />
|
||||||
<ul class="flex flex-col mt-4 md:flex-row md:space-x-8 md:mt-0 md:text-sm md:font-medium">
|
<div v-if="slots['right-side']" class="flex md:order-2 hidden md:flex">
|
||||||
<li>
|
<slot name="right-side" />
|
||||||
<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>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</nav>
|
</nav>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { computed, toRefs } from 'vue'
|
import { useSlots, ref, computed } from 'vue'
|
||||||
import type { PropType } from 'vue'
|
import { breakpointsTailwind, useBreakpoints, useToggle } from '@vueuse/core'
|
||||||
|
import classNames from 'classnames'
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
border: {
|
sticky: {
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
children: {
|
|
||||||
type: Array,
|
|
||||||
default() {
|
|
||||||
return []
|
|
||||||
},
|
|
||||||
},
|
|
||||||
className: {
|
|
||||||
type: String,
|
|
||||||
default: '',
|
|
||||||
},
|
|
||||||
fluid: {
|
|
||||||
type: Boolean,
|
|
||||||
default: false,
|
|
||||||
},
|
|
||||||
menuOpen: {
|
|
||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false,
|
default: false,
|
||||||
},
|
},
|
||||||
@@ -63,6 +29,36 @@ const props = defineProps({
|
|||||||
type: Boolean,
|
type: Boolean,
|
||||||
default: false,
|
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>
|
</script>
|
||||||
|
|||||||
31
src/components/Navbar/NavbarCollapse.vue
Normal file
31
src/components/Navbar/NavbarCollapse.vue
Normal 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
61
src/components/Navbar/NavbarLink.ts
Normal 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
60
src/components/Navbar/NavbarLogo.ts
Normal 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,
|
||||||
|
)],
|
||||||
|
},
|
||||||
|
)
|
||||||
|
},
|
||||||
|
})
|
||||||
@@ -1,23 +1,37 @@
|
|||||||
<template>
|
<template>
|
||||||
<div class="w-full bg-gray-200 rounded-full h-2.5 dark:bg-gray-700">
|
<div>
|
||||||
<div class="bg-blue-600 h-2.5 rounded-full" style="width: 45%"></div>
|
<template v-if="label || (labelProgress && labelPosition === 'outside')">
|
||||||
|
<div class="flex justify-between mb-1">
|
||||||
|
<span class="text-base font-medium" :class="outsideLabelClasses">{{ label }}</span>
|
||||||
|
<span v-if="labelProgress && labelPosition === 'outside'" class="text-sm font-medium" :class="outsideLabelClasses">{{ progress }}%</span>
|
||||||
</div>
|
</div>
|
||||||
|
</template>
|
||||||
|
<div class="w-full bg-gray-200 rounded-full dark:bg-gray-700" :class="outerClasses">
|
||||||
|
<div class="rounded-full font-medium text-blue-100 text-center p-0.5" :class="innerClasses" :style="{ width: progress + '%' }">
|
||||||
|
<template v-if="labelProgress && labelPosition === 'inside'">
|
||||||
|
{{ progress }}%
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import { computed, toRefs } from 'vue'
|
import { toRefs } from 'vue'
|
||||||
import type { PropType } from 'vue'
|
import type { PropType } from 'vue'
|
||||||
|
import { useProgressClasses } from './composables/useProgressClasses'
|
||||||
|
import type { ProgressLabelPosition, ProgressSize, ProgressVariant } from './types'
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
color: {
|
color: {
|
||||||
type: String, // 'dark' | 'blue' | 'red' | 'green' | 'yellow' | 'indigo' | 'purple'
|
type: String as PropType<ProgressVariant>,
|
||||||
default: 'blue',
|
default: 'default',
|
||||||
},
|
},
|
||||||
label: {
|
label: {
|
||||||
type: String,
|
type: String,
|
||||||
default: 'progressbar',
|
default: '',
|
||||||
},
|
},
|
||||||
labelPosition: {
|
labelPosition: {
|
||||||
type: String, // 'inside' | 'outside' | 'none'
|
type: String as PropType<ProgressLabelPosition>,
|
||||||
default: 'none',
|
default: 'none',
|
||||||
},
|
},
|
||||||
labelProgress: {
|
labelProgress: {
|
||||||
@@ -29,9 +43,11 @@ const props = defineProps({
|
|||||||
default: 0,
|
default: 0,
|
||||||
},
|
},
|
||||||
size: {
|
size: {
|
||||||
type: String, // 'sm' | 'md' | 'lg' | 'xl'
|
type: String as PropType<ProgressSize>,
|
||||||
default: 'md',
|
default: 'md',
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
|
||||||
|
const { innerClasses, outerClasses, outsideLabelClasses } = useProgressClasses(toRefs(props))
|
||||||
|
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
64
src/components/Progress/composables/useProgressClasses.ts
Normal file
64
src/components/Progress/composables/useProgressClasses.ts
Normal file
@@ -0,0 +1,64 @@
|
|||||||
|
import type { Ref } from 'vue'
|
||||||
|
import { computed } from 'vue'
|
||||||
|
import classNames from 'classnames'
|
||||||
|
import type { ProgressVariant, ProgressSize, ProgressLabelPosition } from '../types'
|
||||||
|
|
||||||
|
const barColorClasses: Record<ProgressVariant, string> = {
|
||||||
|
default: 'bg-blue-600 dark:bg-blue-600',
|
||||||
|
blue: 'bg-blue-600 dark:bg-blue-600',
|
||||||
|
dark: 'bg-gray-600 dark:bg-gray-300',
|
||||||
|
green: 'bg-green-600 dark:bg-green-500',
|
||||||
|
red: 'bg-red-600 dark:bg-red-500',
|
||||||
|
yellow: 'bg-yellow-400',
|
||||||
|
indigo: 'bg-indigo-600 dark:bg-indigo-500',
|
||||||
|
purple: 'bg-purple-600 dark:bg-purple-500',
|
||||||
|
}
|
||||||
|
|
||||||
|
const outsideTextColorClasses: Record<ProgressVariant, string> = {
|
||||||
|
default: '',
|
||||||
|
blue: 'text-blue-700 dark:text-blue-500',
|
||||||
|
dark: 'dark:text-white',
|
||||||
|
green: 'text-green-700 dark:text-green-500',
|
||||||
|
red: 'text-red-700 dark:text-red-500',
|
||||||
|
yellow: 'text-yellow-700 dark:text-yellow-500',
|
||||||
|
indigo: 'text-indigo-700 dark:text-indigo-500',
|
||||||
|
purple: 'text-purple-700 dark:text-purple-500',
|
||||||
|
}
|
||||||
|
|
||||||
|
const progressSizeClasses: Record<ProgressSize, string> = {
|
||||||
|
sm: 'h-1.5 text-xs leading-none',
|
||||||
|
md: 'h-2.5 text-xs leading-none',
|
||||||
|
lg: 'h-4 text-sm leading-none',
|
||||||
|
xl: 'h-6 text-base leading-tight',
|
||||||
|
}
|
||||||
|
|
||||||
|
export type UseProgressClassesProps = {
|
||||||
|
color: Ref<ProgressVariant>
|
||||||
|
size: Ref<ProgressSize>
|
||||||
|
labelPosition: Ref<ProgressLabelPosition>
|
||||||
|
}
|
||||||
|
|
||||||
|
export function useProgressClasses(props: UseProgressClassesProps): { innerClasses: Ref<string>, outerClasses: Ref<string>, outsideLabelClasses: Ref<string>} {
|
||||||
|
const bindClasses = computed(() => {
|
||||||
|
return classNames(
|
||||||
|
barColorClasses[props.color.value],
|
||||||
|
progressSizeClasses[props.size.value],
|
||||||
|
)
|
||||||
|
})
|
||||||
|
const outerClasses = computed(() => {
|
||||||
|
return classNames(
|
||||||
|
progressSizeClasses[props.size.value],
|
||||||
|
)
|
||||||
|
})
|
||||||
|
const outsideLabelClasses = computed(() => {
|
||||||
|
return classNames(
|
||||||
|
outsideTextColorClasses[props.color.value],
|
||||||
|
)
|
||||||
|
})
|
||||||
|
|
||||||
|
return {
|
||||||
|
innerClasses: bindClasses,
|
||||||
|
outerClasses,
|
||||||
|
outsideLabelClasses,
|
||||||
|
}
|
||||||
|
}
|
||||||
3
src/components/Progress/types.ts
Normal file
3
src/components/Progress/types.ts
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
export type ProgressVariant = 'default' | 'dark' | 'green' | 'red' | 'yellow' | 'purple' | 'blue' | 'indigo'
|
||||||
|
export type ProgressSize = 'sm' | 'md' | 'lg' | 'xl'
|
||||||
|
export type ProgressLabelPosition = 'inside' | 'outside' | 'none'
|
||||||
@@ -3,7 +3,7 @@ import { defineComponent } from 'vue'
|
|||||||
import type { VNode, PropType } from 'vue'
|
import type { VNode, PropType } from 'vue'
|
||||||
import type { SlotListenerTrigger, TriggerEventHandlers } from '@/components/utils/SlotListener/types'
|
import type { SlotListenerTrigger, TriggerEventHandlers } from '@/components/utils/SlotListener/types'
|
||||||
import { getFirstSlotVNode } from '@/utils/getFirstSlotNode'
|
import { getFirstSlotVNode } from '@/utils/getFirstSlotNode'
|
||||||
import pick from 'lodash/pick'
|
import { pick } from 'lodash-es'
|
||||||
|
|
||||||
// inspired from https://github.com/TuSimple/naive-ui/blob/main/src/popover/src/Popover.tsx
|
// inspired from https://github.com/TuSimple/naive-ui/blob/main/src/popover/src/Popover.tsx
|
||||||
|
|
||||||
|
|||||||
@@ -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 ListGroupItem } from './components/ListGroup/components/ListGroupItem/ListGroupItem.vue'
|
||||||
export { default as Modal } from './components/Modal/Modal.vue'
|
export { default as Modal } from './components/Modal/Modal.vue'
|
||||||
export { default as Navbar } from './components/Navbar/Navbar.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 Pagination } from './components/Pagination/Pagination.vue'
|
||||||
export { default as Progress } from './components/Progress/Progress.vue'
|
export { default as Progress } from './components/Progress/Progress.vue'
|
||||||
export { default as Rating } from './components/Rating/Rating.vue'
|
export { default as Rating } from './components/Rating/Rating.vue'
|
||||||
|
|||||||
3
static.json
Normal file
3
static.json
Normal file
@@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"root": "docs/.vitepress/dist"
|
||||||
|
}
|
||||||
Reference in New Issue
Block a user