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

Components renaming (#225)

Browse Source 
* refactor: eslint config adjusted for better diff's

* refactor: stricter linting
 + dependencies updated

* refactoring: paragraph component
 - component
 - docs

* refactoring: heading component
 - component
 - docs

* Update docs/components/heading.md

Co-authored-by: Ilya Artamonov <ilya.sosidka@gmail.com>

* refactoring: link component
 - component
 - docs

* refactoring: image component
 - component
 - docs

* refactoring: alert component
 - component
 - docs

* refactoring: avatar component
 - component
 - docs

* refactoring: removed unnecessary code
    - component names come from the file name

* refactoring: breadcrumb component
 - component
 - docs

* refactoring: accordion component
 - component
 - docs

* refactoring: buttom component
 - component
 - docs

* refactoring: badge component
 - component
 - docs

* refactoring: card component
 - component
 - docs

* refactoring: order of components in docs updated

* refactoring: unnecessary semicolons removed

* refactoring: button group component
 - component
 - docs

* refactoring: carousel component
 - component
 - docs

* refactoring: dropdown component
 - component
 - docs

* refactoring: footer component
 - component
 - docs

* refactoring:list-group component
 - component
 - docs

* refactoring: modal component
 - component
 - docs

* refactoring: navbar component
 - component
 - docs

* refactoring: pagination component
 - component
 - docs

* refactoring: progress component
 - component
 - docs

* refactoring: rating component
 - component
 - docs

* refactoring: spinner component
 - component
 - docs

* refactoring: table component
 - component
 - docs

* refactoring: tabs component
 - component
 - docs

* feat: Updated pagination examples

* lint: Lister fixes

* feat: Sidebar component and some fixes

* feat: Input component

* feat: Some fixes

* feat: Some fixes

* chore: update deps

* refactor: removed old Modal component

* refactor: radio component and some fixes

* fix: fixed path error

* refactor: Range component

* refactoring: timeline component
 - component
 - docs

* refactor: Select component

* refactoring: toast component
 - component
 - docs

* refactoring: tooltip component
 - component
 - docs

* refactoring: sidebar component
 - component
 - docs

* refactoring: input component
 - component
 - docs

* refactoring: fileInput component
 - component
 - docs

* refactoring: select component
 - component
 - docs

* refactoring: textarea component
 - component
 - docs

* refactoring: checkbox component
 - component
 - docs

* refactoring: radio component
 - component
 - docs

* refactoring: toggle component
 - component
 - docs

* refactoring: range component
 - component
 - docs

* local configs linted

* documentation quick start updated

* flowbite-themable refactored to fit new linters and style guide

* random linter fixes

* refactoring: toast-provider component
 - component
 - docs

* final linter fixes

* lint: Linter fixes

* fix: Fixed types

* fix: Fixed card component

* docs: Updated card examples

* fix: Fixed tabs

* refactor: Heading component refactoring

* Fwb rename - few fixes after component review (#237)

* fix: button documentation

* fix: model type in range examples

* chore: Toast marked as WIP

---------

Co-authored-by: Sqrcz <naorniakowski@slashlab.pl>
Co-authored-by: Sqrcz <naorniakowski@gmail.com>
This commit is contained in:
Ilya Artamonov
2023-10-23 18:23:14 +03:00
committed by GitHub
parent ea6fcf1a4c
commit d316cf3a12
600 changed files with 16349 additions and 10239 deletions
Download Patch File Download Diff File Expand all files Collapse all files

17
docs/components/footer/examples/FooterExample.vue
View File

@@ -1,17 +0,0 @@
<template>
<div class="vp-raw">
<Footer>
<FooterCopyright by="Flowbite™" href="https://flowbite.com/" copyright-message="All Rights Reserved." />
<FooterLinkGroup>
<FooterLink href="#"> About </FooterLink>
<FooterLink href="#"> Privacy Policy </FooterLink>
<FooterLink href="#"> Licensing </FooterLink>
<FooterLink href="#"> Contact </FooterLink>
</FooterLinkGroup>
</Footer>
</div>
</template>
<script setup>
import { Footer, FooterCopyright, FooterLinkGroup, FooterLink } from '../../../../src/index'
</script>

91
docs/components/footer/examples/FooterSitemapLinksExample.vue
View File

@@ -1,91 +0,0 @@
<template>
<div class="vp-raw">
<Footer footer-type="sitemap">
<div class="grid grid-cols-2 gap-8 py-8 px-6 md:grid-cols-4">
<div>
<h2 class="mb-6 text-sm font-semibold text-gray-400 uppercase">Company</h2>
<FooterLinkGroup class="text-gray-300 flex flex-col items-start">
<FooterLink class="mb-4" href="/">About</FooterLink>
<FooterLink class="mb-4" href="/">Careers</FooterLink>
<FooterLink class="mb-4" href="/">Brand Center</FooterLink>
<FooterLink class="mb-4" href="/">Blog</FooterLink>
</FooterLinkGroup>
</div>
<div>
<h2 class="mb-6 text-sm font-semibold uppercase text-gray-400">Download</h2>
<FooterLinkGroup class="text-gray-300 flex flex-col items-start">
<FooterLink class="mb-4" href="/">Discord Server</FooterLink>
<FooterLink class="mb-4" href="/">Twitter</FooterLink>
<FooterLink class="mb-4" href="/">Facebook</FooterLink>
<FooterLink class="mb-4" href="/">Contact Us</FooterLink>
</FooterLinkGroup>
</div>
<div>
<h2 class="mb-6 text-sm font-semibold uppercase text-gray-400">Legal</h2>
<FooterLinkGroup class="text-gray-300 flex flex-col items-start">
<FooterLink class="mb-4" href="/">Privacy Policy</FooterLink>
<FooterLink class="mb-4" href="/">Licensing</FooterLink>
<FooterLink class="mb-4" href="/">Terms & Conditions</FooterLink>
</FooterLinkGroup>
</div>
<div>
<h2 class="mb-6 text-sm font-semibold uppercase text-gray-400">Download</h2>
<FooterLinkGroup class="text-gray-300 flex flex-col items-start">
<FooterLink class="mb-4" href="/">iOS</FooterLink>
<FooterLink class="mb-4" href="/">Android</FooterLink>
<FooterLink class="mb-4" href="/">Windows</FooterLink>
<FooterLink class="mb-4" href="/">MacOS</FooterLink>
</FooterLinkGroup>
</div>
</div>
<div class="py-6 px-4 bg-gray-700 md:flex md:items-center md:justify-between">
<FooterCopyright class="text-sm text-gray-300 sm:text-center" href="/" by="Flowbite™" />
<div class="flex mt-4 space-x-6 sm:justify-center md:mt-0">
<FooterIcon href="/" sr-text="Facebook page">
<svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 8 19">
<path fill-rule="evenodd" d="M6.135 3H8V0H6.135a4.147 4.147 0 0 0-4.142 4.142V6H0v3h2v9.938h3V9h2.021l.592-3H5V3.591A.6.6 0 0 1 5.592 3h.543Z" clip-rule="evenodd" />
</svg>
</FooterIcon>
<FooterIcon href="/" sr-text="Discord community">
<svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 21 16">
<path
d="M16.942 1.556a16.3 16.3 0 0 0-4.126-1.3 12.04 12.04 0 0 0-.529 1.1 15.175 15.175 0 0 0-4.573 0 11.585 11.585 0 0 0-.535-1.1 16.274 16.274 0 0 0-4.129 1.3A17.392 17.392 0 0 0 .182 13.218a15.785 15.785 0 0 0 4.963 2.521c.41-.564.773-1.16 1.084-1.785a10.63 10.63 0 0 1-1.706-.83c.143-.106.283-.217.418-.33a11.664 11.664 0 0 0 10.118 0c.137.113.277.224.418.33-.544.328-1.116.606-1.71.832a12.52 12.52 0 0 0 1.084 1.785 16.46 16.46 0 0 0 5.064-2.595 17.286 17.286 0 0 0-2.973-11.59ZM6.678 10.813a1.941 1.941 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.919 1.919 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Zm6.644 0a1.94 1.94 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.918 1.918 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Z"
/>
</svg>
</FooterIcon>
<FooterIcon href="/" sr-text="Twitter page">
<svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 17">
<path
fill-rule="evenodd"
d="M20 1.892a8.178 8.178 0 0 1-2.355.635 4.074 4.074 0 0 0 1.8-2.235 8.344 8.344 0 0 1-2.605.98A4.13 4.13 0 0 0 13.85 0a4.068 4.068 0 0 0-4.1 4.038 4 4 0 0 0 .105.919A11.705 11.705 0 0 1 1.4.734a4.006 4.006 0 0 0 1.268 5.392 4.165 4.165 0 0 1-1.859-.5v.05A4.057 4.057 0 0 0 4.1 9.635a4.19 4.19 0 0 1-1.856.07 4.108 4.108 0 0 0 3.831 2.807A8.36 8.36 0 0 1 0 14.184 11.732 11.732 0 0 0 6.291 16 11.502 11.502 0 0 0 17.964 4.5c0-.177 0-.35-.012-.523A8.143 8.143 0 0 0 20 1.892Z"
clip-rule="evenodd"
/>
</svg>
</FooterIcon>
<FooterIcon href="/" sr-text="GitHub account">
<svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path
fill-rule="evenodd"
d="M10 .333A9.911 9.911 0 0 0 6.866 19.65c.5.092.678-.215.678-.477 0-.237-.01-1.017-.014-1.845-2.757.6-3.338-1.169-3.338-1.169a2.627 2.627 0 0 0-1.1-1.451c-.9-.615.07-.6.07-.6a2.084 2.084 0 0 1 1.518 1.021 2.11 2.11 0 0 0 2.884.823c.044-.503.268-.973.63-1.325-2.2-.25-4.516-1.1-4.516-4.9A3.832 3.832 0 0 1 4.7 7.068a3.56 3.56 0 0 1 .095-2.623s.832-.266 2.726 1.016a9.409 9.409 0 0 1 4.962 0c1.89-1.282 2.717-1.016 2.717-1.016.366.83.402 1.768.1 2.623a3.827 3.827 0 0 1 1.02 2.659c0 3.807-2.319 4.644-4.525 4.889a2.366 2.366 0 0 1 .673 1.834c0 1.326-.012 2.394-.012 2.72 0 .263.18.572.681.475A9.911 9.911 0 0 0 10 .333Z"
clip-rule="evenodd"
/>
</svg>
</FooterIcon>
<FooterIcon href="/" sr-text="Dribbble account">
<svg class="w-4 h-4" aria-hidden="true" xmlns="http://www.w3.org/2000/svg" fill="currentColor" viewBox="0 0 20 20">
<path
fill-rule="evenodd"
d="M10 0a10 10 0 1 0 10 10A10.009 10.009 0 0 0 10 0Zm6.613 4.614a8.523 8.523 0 0 1 1.93 5.32 20.094 20.094 0 0 0-5.949-.274c-.059-.149-.122-.292-.184-.441a23.879 23.879 0 0 0-.566-1.239 11.41 11.41 0 0 0 4.769-3.366ZM8 1.707a8.821 8.821 0 0 1 2-.238 8.5 8.5 0 0 1 5.664 2.152 9.608 9.608 0 0 1-4.476 3.087A45.758 45.758 0 0 0 8 1.707ZM1.642 8.262a8.57 8.57 0 0 1 4.73-5.981A53.998 53.998 0 0 1 9.54 7.222a32.078 32.078 0 0 1-7.9 1.04h.002Zm2.01 7.46a8.51 8.51 0 0 1-2.2-5.707v-.262a31.64 31.64 0 0 0 8.777-1.219c.243.477.477.964.692 1.449-.114.032-.227.067-.336.1a13.569 13.569 0 0 0-6.942 5.636l.009.003ZM10 18.556a8.508 8.508 0 0 1-5.243-1.8 11.717 11.717 0 0 1 6.7-5.332.509.509 0 0 1 .055-.02 35.65 35.65 0 0 1 1.819 6.476 8.476 8.476 0 0 1-3.331.676Zm4.772-1.462A37.232 37.232 0 0 0 13.113 11a12.513 12.513 0 0 1 5.321.364 8.56 8.56 0 0 1-3.66 5.73h-.002Z"
clip-rule="evenodd"
/>
</svg>
</FooterIcon>
</div>
</div>
</Footer>
</div>
</template>
<script setup>
import { Footer, FooterCopyright, FooterLinkGroup, FooterLink, FooterIcon } from '../../../../src/index'
</script>

23
docs/components/footer/examples/FooterWithLogoExample.vue
View File

@@ -1,23 +0,0 @@
<template>
<div class="vp-raw">
<Footer footer-type="logo">
<div class="w-full max-w-screen-xl mx-auto p-4 md:py-8">
<div class="sm:flex sm:items-center sm:justify-between">
<FooterBrand href="https://flowbite.com" src="https://flowbite.com/docs/images/logo.svg" alt="Flowbite Logo" name="Flowbite" />
<FooterLinkGroup class="flex flex-wrap items-center mb-6 text-sm text-gray-500 sm:mb-0 dark:text-gray-400">
<FooterLink href="/">About</FooterLink>
<FooterLink href="/">Privacy Policy</FooterLink>
<FooterLink href="/">Licensing</FooterLink>
<FooterLink href="/">Contact</FooterLink>
</FooterLinkGroup>
</div>
<hr class="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8" />
<FooterCopyright href="/" by="Flowbite™" />
</div>
</Footer>
</div>
</template>
<script setup>
import { Footer, FooterCopyright, FooterLinkGroup, FooterLink, FooterBrand } from '../../../../src/index'
</script>

34
docs/components/footer/examples/FwbFooterExample.vue Normal file
View File

@@ -0,0 +1,34 @@
<template>
<div class="vp-raw">
<fwb-footer>
<fwb-footer-copyright
by="Flowbite™"
copyright-message="All Rights Reserved."
href="https://flowbite.com/"
/>
<fwb-footer-link-group>
<fwb-footer-link href="#">
About
</fwb-footer-link>
<fwb-footer-link href="#">
Privacy Policy
</fwb-footer-link>
<fwb-footer-link href="#">
Licensing
</fwb-footer-link>
<fwb-footer-link href="#">
Contact
</fwb-footer-link>
</fwb-footer-link-group>
</fwb-footer>
</div>
</template>
<script setup>
import {
FwbFooter,
FwbFooterCopyright,
FwbFooterLink,
FwbFooterLinkGroup,
} from '../../../../src/index'
</script>

233
docs/components/footer/examples/FwbFooterExampleSitemapLinks.vue Normal file
View File

@@ -0,0 +1,233 @@
<template>
<div class="vp-raw">
<fwb-footer footer-type="sitemap">
<div class="grid grid-cols-2 gap-8 py-8 px-6 md:grid-cols-4">
<div>
<h2 class="mb-6 text-sm font-semibold text-gray-400 uppercase">
Company
</h2>
<fwb-footer-link-group class="text-gray-300 flex flex-col items-start">
<fwb-footer-link
class="mb-4"
href="/"
>
About
</fwb-footer-link>
<fwb-footer-link
class="mb-4"
href="/"
>
Careers
</fwb-footer-link>
<fwb-footer-link
class="mb-4"
href="/"
>
Brand Center
</fwb-footer-link>
<fwb-footer-link
class="mb-4"
href="/"
>
Blog
</fwb-footer-link>
</fwb-footer-link-group>
</div>
<div>
<h2 class="mb-6 text-sm font-semibold uppercase text-gray-400">
Download
</h2>
<fwb-footer-link-group class="text-gray-300 flex flex-col items-start">
<fwb-footer-link
class="mb-4"
href="/"
>
Discord Server
</fwb-footer-link>
<fwb-footer-link
class="mb-4"
href="/"
>
Twitter
</fwb-footer-link>
<fwb-footer-link
class="mb-4"
href="/"
>
Facebook
</fwb-footer-link>
<fwb-footer-link
class="mb-4"
href="/"
>
Contact Us
</fwb-footer-link>
</fwb-footer-link-group>
</div>
<div>
<h2 class="mb-6 text-sm font-semibold uppercase text-gray-400">
Legal
</h2>
<fwb-footer-link-group class="text-gray-300 flex flex-col items-start">
<fwb-footer-link
class="mb-4"
href="/"
>
Privacy Policy
</fwb-footer-link>
<fwb-footer-link
class="mb-4"
href="/"
>
Licensing
</fwb-footer-link>
<fwb-footer-link
class="mb-4"
href="/"
>
Terms & Conditions
</fwb-footer-link>
</fwb-footer-link-group>
</div>
<div>
<h2 class="mb-6 text-sm font-semibold uppercase text-gray-400">
Download
</h2>
<fwb-footer-link-group class="text-gray-300 flex flex-col items-start">
<fwb-footer-link
class="mb-4"
href="/"
>
iOS
</fwb-footer-link>
<fwb-footer-link
class="mb-4"
href="/"
>
Android
</fwb-footer-link>
<fwb-footer-link
class="mb-4"
href="/"
>
Windows
</fwb-footer-link>
<fwb-footer-link
class="mb-4"
href="/"
>
MacOS
</fwb-footer-link>
</fwb-footer-link-group>
</div>
</div>
<div class="py-6 px-4 bg-gray-700 md:flex md:items-center md:justify-between">
<fwb-footer-copyright
by="Flowbite™"
class="text-sm text-gray-300 sm:text-center"
href="/"
/>
<div class="flex mt-4 space-x-6 sm:justify-center md:mt-0">
<fwb-footer-icon
href="/"
sr-text="Facebook page"
>
<svg
aria-hidden="true"
class="w-4 h-4"
fill="currentColor"
viewBox="0 0 8 19"
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M6.135 3H8V0H6.135a4.147 4.147 0 0 0-4.142 4.142V6H0v3h2v9.938h3V9h2.021l.592-3H5V3.591A.6.6 0 0 1 5.592 3h.543Z"
fill-rule="evenodd"
/>
</svg>
</fwb-footer-icon>
<fwb-footer-icon
href="/"
sr-text="Discord community"
>
<svg
aria-hidden="true"
class="w-4 h-4"
fill="currentColor"
viewBox="0 0 21 16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.942 1.556a16.3 16.3 0 0 0-4.126-1.3 12.04 12.04 0 0 0-.529 1.1 15.175 15.175 0 0 0-4.573 0 11.585 11.585 0 0 0-.535-1.1 16.274 16.274 0 0 0-4.129 1.3A17.392 17.392 0 0 0 .182 13.218a15.785 15.785 0 0 0 4.963 2.521c.41-.564.773-1.16 1.084-1.785a10.63 10.63 0 0 1-1.706-.83c.143-.106.283-.217.418-.33a11.664 11.664 0 0 0 10.118 0c.137.113.277.224.418.33-.544.328-1.116.606-1.71.832a12.52 12.52 0 0 0 1.084 1.785 16.46 16.46 0 0 0 5.064-2.595 17.286 17.286 0 0 0-2.973-11.59ZM6.678 10.813a1.941 1.941 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.919 1.919 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Zm6.644 0a1.94 1.94 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.918 1.918 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Z"
/>
</svg>
</fwb-footer-icon>
<fwb-footer-icon
href="/"
sr-text="Twitter page"
>
<svg
aria-hidden="true"
class="w-4 h-4"
fill="currentColor"
viewBox="0 0 20 17"
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M20 1.892a8.178 8.178 0 0 1-2.355.635 4.074 4.074 0 0 0 1.8-2.235 8.344 8.344 0 0 1-2.605.98A4.13 4.13 0 0 0 13.85 0a4.068 4.068 0 0 0-4.1 4.038 4 4 0 0 0 .105.919A11.705 11.705 0 0 1 1.4.734a4.006 4.006 0 0 0 1.268 5.392 4.165 4.165 0 0 1-1.859-.5v.05A4.057 4.057 0 0 0 4.1 9.635a4.19 4.19 0 0 1-1.856.07 4.108 4.108 0 0 0 3.831 2.807A8.36 8.36 0 0 1 0 14.184 11.732 11.732 0 0 0 6.291 16 11.502 11.502 0 0 0 17.964 4.5c0-.177 0-.35-.012-.523A8.143 8.143 0 0 0 20 1.892Z"
fill-rule="evenodd"
/>
</svg>
</fwb-footer-icon>
<fwb-footer-icon
href="/"
sr-text="GitHub account"
>
<svg
aria-hidden="true"
class="w-4 h-4"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M10 .333A9.911 9.911 0 0 0 6.866 19.65c.5.092.678-.215.678-.477 0-.237-.01-1.017-.014-1.845-2.757.6-3.338-1.169-3.338-1.169a2.627 2.627 0 0 0-1.1-1.451c-.9-.615.07-.6.07-.6a2.084 2.084 0 0 1 1.518 1.021 2.11 2.11 0 0 0 2.884.823c.044-.503.268-.973.63-1.325-2.2-.25-4.516-1.1-4.516-4.9A3.832 3.832 0 0 1 4.7 7.068a3.56 3.56 0 0 1 .095-2.623s.832-.266 2.726 1.016a9.409 9.409 0 0 1 4.962 0c1.89-1.282 2.717-1.016 2.717-1.016.366.83.402 1.768.1 2.623a3.827 3.827 0 0 1 1.02 2.659c0 3.807-2.319 4.644-4.525 4.889a2.366 2.366 0 0 1 .673 1.834c0 1.326-.012 2.394-.012 2.72 0 .263.18.572.681.475A9.911 9.911 0 0 0 10 .333Z"
fill-rule="evenodd"
/>
</svg>
</fwb-footer-icon>
<fwb-footer-icon
href="/"
sr-text="Dribbble account"
>
<svg
aria-hidden="true"
class="w-4 h-4"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M10 0a10 10 0 1 0 10 10A10.009 10.009 0 0 0 10 0Zm6.613 4.614a8.523 8.523 0 0 1 1.93 5.32 20.094 20.094 0 0 0-5.949-.274c-.059-.149-.122-.292-.184-.441a23.879 23.879 0 0 0-.566-1.239 11.41 11.41 0 0 0 4.769-3.366ZM8 1.707a8.821 8.821 0 0 1 2-.238 8.5 8.5 0 0 1 5.664 2.152 9.608 9.608 0 0 1-4.476 3.087A45.758 45.758 0 0 0 8 1.707ZM1.642 8.262a8.57 8.57 0 0 1 4.73-5.981A53.998 53.998 0 0 1 9.54 7.222a32.078 32.078 0 0 1-7.9 1.04h.002Zm2.01 7.46a8.51 8.51 0 0 1-2.2-5.707v-.262a31.64 31.64 0 0 0 8.777-1.219c.243.477.477.964.692 1.449-.114.032-.227.067-.336.1a13.569 13.569 0 0 0-6.942 5.636l.009.003ZM10 18.556a8.508 8.508 0 0 1-5.243-1.8 11.717 11.717 0 0 1 6.7-5.332.509.509 0 0 1 .055-.02 35.65 35.65 0 0 1 1.819 6.476 8.476 8.476 0 0 1-3.331.676Zm4.772-1.462A37.232 37.232 0 0 0 13.113 11a12.513 12.513 0 0 1 5.321.364 8.56 8.56 0 0 1-3.66 5.73h-.002Z"
fill-rule="evenodd"
/>
</svg>
</fwb-footer-icon>
</div>
</div>
</fwb-footer>
</div>
</template>
<script setup>
import {
FwbFooter,
FwbFooterCopyright,
FwbFooterIcon,
FwbFooterLink,
FwbFooterLinkGroup,
} from '../../../../src/index'
</script>

152
docs/components/footer/examples/FooterSocialMediaIconsExample.vue → docs/components/footer/examples/FwbFooterExampleSocialMediaIcons.vue
View File

@@ -1,110 +1,166 @@
<template>
<div class="vp-raw w-full">
<Footer footer-type="socialmedia">
<fwb-footer footer-type="socialmedia">
<div class="md:flex md:justify-between">
<FooterBrand href="https://flowbite.com" src="https://flowbite.com/docs/images/logo.svg" alt="Flowbite Logo" name="Flowbite" />
<fwb-footer-brand
alt="Flowbite Logo"
href="https://flowbite.com"
name="Flowbite"
src="https://flowbite.com/docs/images/logo.svg"
/>
<div class="grid grid-cols-2 gap-8 sm:gap-6 sm:grid-cols-3">
<div>
<h2 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">Resources</h2>
<FooterLinkGroup class="flex flex-col items-start">
<FooterLink class="mb-4" href="/">Flowbite</FooterLink>
<FooterLink class="mb-4" href="/">Tailwind CSS</FooterLink>
</FooterLinkGroup>
<h2 class="mb-6 text-sm font-semibold text-gray-900 uppercase dark:text-white">
Resources
</h2>
<fwb-footer-link-group class="flex flex-col items-start">
<fwb-footer-link
class="mb-4"
href="/"
>
Flowbite
</fwb-footer-link>
<fwb-footer-link
class="mb-4"
href="/"
>
Tailwind CSS
</fwb-footer-link>
</fwb-footer-link-group>
</div>
<div>
<h2 class="mb-6 text-sm font-semibold uppercase text-gray-900 dark:text-white">Follow us</h2>
<FooterLinkGroup class="flex flex-col items-start">
<FooterLink class="mb-4" href="/">GitHub</FooterLink>
<FooterLink class="mb-4" href="/">Discord</FooterLink>
</FooterLinkGroup>
<h2 class="mb-6 text-sm font-semibold uppercase text-gray-900 dark:text-white">
Follow us
</h2>
<fwb-footer-link-group class="flex flex-col items-start">
<fwb-footer-link
class="mb-4"
href="/"
>
GitHub
</fwb-footer-link>
<fwb-footer-link
class="mb-4"
href="/"
>
Discord
</fwb-footer-link>
</fwb-footer-link-group>
</div>
<div>
<h2 class="mb-6 text-sm font-semibold uppercase text-gray-900 dark:text-white">Legal</h2>
<FooterLinkGroup class="flex flex-col items-start">
<FooterLink class="mb-4" href="/">Privacy Policy</FooterLink>
<FooterLink class="mb-4" href="/">Terms & Conditions</FooterLink>
</FooterLinkGroup>
<h2 class="mb-6 text-sm font-semibold uppercase text-gray-900 dark:text-white">
Legal
</h2>
<fwb-footer-link-group class="flex flex-col items-start">
<fwb-footer-link
class="mb-4"
href="/"
>
Privacy Policy
</fwb-footer-link>
<fwb-footer-link
class="mb-4"
href="/"
>
Terms & Conditions
</fwb-footer-link>
</fwb-footer-link-group>
</div>
</div>
</div>
<hr class="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8" />
<hr class="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8">
<div class="sm:flex sm:items-center sm:justify-between">
<FooterCopyright href="/" by="Flowbite™" />
<fwb-footer-copyright
by="Flowbite™"
href="/"
/>
<div class="flex mt-4 space-x-6 sm:justify-center sm:mt-0">
<FooterIcon href="/">
<svg class="w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white" fill="currentColor" viewBox="0 0 24 24" aria-hidden="true">
<fwb-footer-icon href="/">
<svg
aria-hidden="true"
class="w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white"
fill="currentColor"
viewBox="0 0 24 24"
>
<path
fill-rule="evenodd"
d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
clip-rule="evenodd"
d="M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z"
fill-rule="evenodd"
/>
</svg>
</FooterIcon>
<FooterIcon href="/">
</fwb-footer-icon>
<fwb-footer-icon href="/">
<svg
class="w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white"
fill="currentColor"
viewBox="0 0 21 16"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M16.942 1.556a16.3 16.3 0 0 0-4.126-1.3 12.04 12.04 0 0 0-.529 1.1 15.175 15.175 0 0 0-4.573 0 11.585 11.585 0 0 0-.535-1.1 16.274 16.274 0 0 0-4.129 1.3A17.392 17.392 0 0 0 .182 13.218a15.785 15.785 0 0 0 4.963 2.521c.41-.564.773-1.16 1.084-1.785a10.63 10.63 0 0 1-1.706-.83c.143-.106.283-.217.418-.33a11.664 11.664 0 0 0 10.118 0c.137.113.277.224.418.33-.544.328-1.116.606-1.71.832a12.52 12.52 0 0 0 1.084 1.785 16.46 16.46 0 0 0 5.064-2.595 17.286 17.286 0 0 0-2.973-11.59ZM6.678 10.813a1.941 1.941 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.919 1.919 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Zm6.644 0a1.94 1.94 0 0 1-1.8-2.045 1.93 1.93 0 0 1 1.8-2.047 1.918 1.918 0 0 1 1.8 2.047 1.93 1.93 0 0 1-1.8 2.045Z"
/>
</svg>
</FooterIcon>
<FooterIcon href="/">
</fwb-footer-icon>
<fwb-footer-icon href="/">
<svg
class="w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white"
fill="currentColor"
viewBox="0 0 20 17"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M20 1.892a8.178 8.178 0 0 1-2.355.635 4.074 4.074 0 0 0 1.8-2.235 8.344 8.344 0 0 1-2.605.98A4.13 4.13 0 0 0 13.85 0a4.068 4.068 0 0 0-4.1 4.038 4 4 0 0 0 .105.919A11.705 11.705 0 0 1 1.4.734a4.006 4.006 0 0 0 1.268 5.392 4.165 4.165 0 0 1-1.859-.5v.05A4.057 4.057 0 0 0 4.1 9.635a4.19 4.19 0 0 1-1.856.07 4.108 4.108 0 0 0 3.831 2.807A8.36 8.36 0 0 1 0 14.184 11.732 11.732 0 0 0 6.291 16 11.502 11.502 0 0 0 17.964 4.5c0-.177 0-.35-.012-.523A8.143 8.143 0 0 0 20 1.892Z"
clip-rule="evenodd"
fill-rule="evenodd"
/>
</svg>
</FooterIcon>
<FooterIcon href="/">
</fwb-footer-icon>
<fwb-footer-icon href="/">
<svg
class="w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
clip-rule="evenodd"
d="M10 .333A9.911 9.911 0 0 0 6.866 19.65c.5.092.678-.215.678-.477 0-.237-.01-1.017-.014-1.845-2.757.6-3.338-1.169-3.338-1.169a2.627 2.627 0 0 0-1.1-1.451c-.9-.615.07-.6.07-.6a2.084 2.084 0 0 1 1.518 1.021 2.11 2.11 0 0 0 2.884.823c.044-.503.268-.973.63-1.325-2.2-.25-4.516-1.1-4.516-4.9A3.832 3.832 0 0 1 4.7 7.068a3.56 3.56 0 0 1 .095-2.623s.832-.266 2.726 1.016a9.409 9.409 0 0 1 4.962 0c1.89-1.282 2.717-1.016 2.717-1.016.366.83.402 1.768.1 2.623a3.827 3.827 0 0 1 1.02 2.659c0 3.807-2.319 4.644-4.525 4.889a2.366 2.366 0 0 1 .673 1.834c0 1.326-.012 2.394-.012 2.72 0 .263.18.572.681.475A9.911 9.911 0 0 0 10 .333Z"
clip-rule="evenodd"
fill-rule="evenodd"
/>
</svg>
</FooterIcon>
<FooterIcon href="/">
</fwb-footer-icon>
<fwb-footer-icon href="/">
<svg
class="w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white"
aria-hidden="true"
xmlns="http://www.w3.org/2000/svg"
class="w-4 h-4 text-gray-500 dark:text-gray-500 hover:text-gray-900 dark:hover:text-white"
fill="currentColor"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
>
<path
fill-rule="evenodd"
d="M10 0a10 10 0 1 0 10 10A10.009 10.009 0 0 0 10 0Zm6.613 4.614a8.523 8.523 0 0 1 1.93 5.32 20.094 20.094 0 0 0-5.949-.274c-.059-.149-.122-.292-.184-.441a23.879 23.879 0 0 0-.566-1.239 11.41 11.41 0 0 0 4.769-3.366ZM8 1.707a8.821 8.821 0 0 1 2-.238 8.5 8.5 0 0 1 5.664 2.152 9.608 9.608 0 0 1-4.476 3.087A45.758 45.758 0 0 0 8 1.707ZM1.642 8.262a8.57 8.57 0 0 1 4.73-5.981A53.998 53.998 0 0 1 9.54 7.222a32.078 32.078 0 0 1-7.9 1.04h.002Zm2.01 7.46a8.51 8.51 0 0 1-2.2-5.707v-.262a31.64 31.64 0 0 0 8.777-1.219c.243.477.477.964.692 1.449-.114.032-.227.067-.336.1a13.569 13.569 0 0 0-6.942 5.636l.009.003ZM10 18.556a8.508 8.508 0 0 1-5.243-1.8 11.717 11.717 0 0 1 6.7-5.332.509.509 0 0 1 .055-.02 35.65 35.65 0 0 1 1.819 6.476 8.476 8.476 0 0 1-3.331.676Zm4.772-1.462A37.232 37.232 0 0 0 13.113 11a12.513 12.513 0 0 1 5.321.364 8.56 8.56 0 0 1-3.66 5.73h-.002Z"
clip-rule="evenodd"
d="M10 0a10 10 0 1 0 10 10A10.009 10.009 0 0 0 10 0Zm6.613 4.614a8.523 8.523 0 0 1 1.93 5.32 20.094 20.094 0 0 0-5.949-.274c-.059-.149-.122-.292-.184-.441a23.879 23.879 0 0 0-.566-1.239 11.41 11.41 0 0 0 4.769-3.366ZM8 1.707a8.821 8.821 0 0 1 2-.238 8.5 8.5 0 0 1 5.664 2.152 9.608 9.608 0 0 1-4.476 3.087A45.758 45.758 0 0 0 8 1.707ZM1.642 8.262a8.57 8.57 0 0 1 4.73-5.981A53.998 53.998 0 0 1 9.54 7.222a32.078 32.078 0 0 1-7.9 1.04h.002Zm2.01 7.46a8.51 8.51 0 0 1-2.2-5.707v-.262a31.64 31.64 0 0 0 8.777-1.219c.243.477.477.964.692 1.449-.114.032-.227.067-.336.1a13.569 13.569 0 0 0-6.942 5.636l.009.003ZM10 18.556a8.508 8.508 0 0 1-5.243-1.8 11.717 11.717 0 0 1 6.7-5.332.509.509 0 0 1 .055-.02 35.65 35.65 0 0 1 1.819 6.476 8.476 8.476 0 0 1-3.331.676Zm4.772-1.462A37.232 37.232 0 0 0 13.113 11a12.513 12.513 0 0 1 5.321.364 8.56 8.56 0 0 1-3.66 5.73h-.002Z"
fill-rule="evenodd"
/>
</svg>
</FooterIcon>
</fwb-footer-icon>
</div>
</div>
</Footer>
</fwb-footer>
</div>
</template>
<script setup>
import { Footer, FooterCopyright, FooterLinkGroup, FooterLink, FooterBrand, FooterIcon } from '../../../../src/index'
import {
FwbFooter,
FwbFooterBrand,
FwbFooterCopyright,
FwbFooterIcon,
FwbFooterLink,
FwbFooterLinkGroup,
} from '../../../../src/index'
</script>

51
docs/components/footer/examples/FwbFooterExampleSticky.vue Normal file
View File

@@ -0,0 +1,51 @@
<template>
<div class="vp-raw relative">
<div
class="overflow-scroll bg-white dark:bg-gray-900"
style="height: 200px"
>
<div
class="px-20 py-5"
style="height: 800px;"
>
<p class="mb-5">
Lorem ipsum dolor sit amet consectetur adipisicing elit.
</p>
<p>Perferendis, ducimus laboriosam veritatis dolorem culpa fugiat eum voluptate fugit, enim eaque aspernatur optio saepe doloremque hic voluptates est dignissimos ex quae?</p>
</div>
<fwb-footer
class="rounded-none"
sticky
>
<fwb-footer-copyright
by="Flowbite™"
copyright-message="All Rights Reserved."
href="https://flowbite.com/"
/>
<fwb-footer-link-group>
<fwb-footer-link href="#">
About
</fwb-footer-link>
<fwb-footer-link href="#">
Privacy Policy
</fwb-footer-link>
<fwb-footer-link href="#">
Licensing
</fwb-footer-link>
<fwb-footer-link href="#">
Contact
</fwb-footer-link>
</fwb-footer-link-group>
</fwb-footer>
</div>
</div>
</template>
<script setup>
import {
FwbFooter,
FwbFooterCopyright,
FwbFooterLink,
FwbFooterLinkGroup,
} from '../../../../src/index'
</script>

45
docs/components/footer/examples/FwbFooterExampleWithLogo.vue Normal file
View File

@@ -0,0 +1,45 @@
<template>
<div class="vp-raw">
<fwb-footer footer-type="logo">
<div class="w-full max-w-screen-xl mx-auto p-4 md:py-8">
<div class="sm:flex sm:items-center sm:justify-between">
<fwb-footer-brand
alt="Flowbite Logo"
href="https://flowbite.com"
name="Flowbite"
src="https://flowbite.com/docs/images/logo.svg"
/>
<fwb-footer-link-group class="flex flex-wrap items-center mb-6 text-sm text-gray-500 sm:mb-0 dark:text-gray-400">
<fwb-footer-link href="/">
About
</fwb-footer-link>
<fwb-footer-link href="/">
Privacy Policy
</fwb-footer-link>
<fwb-footer-link href="/">
Licensing
</fwb-footer-link>
<fwb-footer-link href="/">
Contact
</fwb-footer-link>
</fwb-footer-link-group>
</div>
<hr class="my-6 border-gray-200 sm:mx-auto dark:border-gray-700 lg:my-8">
<fwb-footer-copyright
by="Flowbite™"
href="/"
/>
</div>
</fwb-footer>
</div>
</template>
<script setup>
import {
FwbFooter,
FwbFooterBrand,
FwbFooterCopyright,
FwbFooterLink,
FwbFooterLinkGroup,
} from '../../../../src/index'
</script>

18
docs/components/footer/examples/StickyFooterExample.vue
View File

@@ -1,18 +0,0 @@
<template>
<div class="vp-raw relative">
<div style="height: 300px" class="overflow-scroll pb-16 pt-4 px-4 bg-white dark:bg-gray-900">Some content</div>
<Footer sticky class="rounded-none">
<FooterCopyright by="Flowbite™" href="https://flowbite.com/" copyright-message="All Rights Reserved." />
<FooterLinkGroup>
<FooterLink href="#"> About </FooterLink>
<FooterLink href="#"> Privacy Policy </FooterLink>
<FooterLink href="#"> Licensing </FooterLink>
<FooterLink href="#"> Contact </FooterLink>
</FooterLinkGroup>
</Footer>
</div>
</template>
<script setup>
import { Footer, FooterCopyright, FooterLinkGroup, FooterLink } from '../../../../src/index'
</script>