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

89
docs/components/sidebar/examples/SidebarCtaExample.vue → docs/components/sidebar/examples/FwbSidebarCtaExample.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="vp-raw flex flex-col relative">
<Sidebar class="!h-full relative">
<SidebarItem>
<fwb-sidebar class="!h-full relative">
<fwb-sidebar-item>
<template #icon>
<svg
class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -14,9 +14,11 @@
<path d="M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z" />
</svg>
</template>
<template #default>Dashboard</template>
</SidebarItem>
<SidebarItem>
<template #default>
Dashboard
</template>
</fwb-sidebar-item>
<fwb-sidebar-item>
<template #icon>
<svg
class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -30,12 +32,14 @@
/>
</svg>
</template>
<template #default>Kanban</template>
<template #default>
Kanban
</template>
<template #suffix>
<span class="inline-flex items-center justify-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-300">Pro</span>
</template>
</SidebarItem>
<SidebarItem>
</fwb-sidebar-item>
<fwb-sidebar-item>
<template #icon>
<svg
class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -49,12 +53,14 @@
/>
</svg>
</template>
<template #default> Inbox </template>
<template #default>
Inbox
</template>
<template #suffix>
<span class="inline-flex items-center justify-center w-3 h-3 p-3 ml-3 text-sm font-medium text-blue-800 bg-blue-100 rounded-full dark:bg-blue-900 dark:text-blue-300">3</span>
</template>
</SidebarItem>
<SidebarItem>
</fwb-sidebar-item>
<fwb-sidebar-item>
<template #icon>
<svg
class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -68,9 +74,11 @@
/>
</svg>
</template>
<template #default>Users</template>
</SidebarItem>
<SidebarItem>
<template #default>
Users
</template>
</fwb-sidebar-item>
<fwb-sidebar-item>
<template #icon>
<svg
class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -84,9 +92,11 @@
/>
</svg>
</template>
<template #default>Products</template>
</SidebarItem>
<SidebarItem>
<template #default>
Products
</template>
</fwb-sidebar-item>
<fwb-sidebar-item>
<template #icon>
<svg
class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -95,12 +105,20 @@
fill="none"
viewBox="0 0 18 16"
>
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 8h11m0 0L8 4m4 4-4 4m4-11h3a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-3" />
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M1 8h11m0 0L8 4m4 4-4 4m4-11h3a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-3"
/>
</svg>
</template>
<template #default>Sign In</template>
</SidebarItem>
<SidebarItem>
<template #default>
Sign In
</template>
</fwb-sidebar-item>
<fwb-sidebar-item>
<template #icon>
<svg
class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -118,22 +136,33 @@
/>
</svg>
</template>
<template #default>Sign Up</template>
</SidebarItem>
<template #default>
Sign Up
</template>
</fwb-sidebar-item>
<SidebarCta v-if="isShowCta" label="Beta" @close="toggleCta">
<p class="mb-3 text-sm text-blue-800 dark:text-blue-400">Preview the new Flowbite dashboard navigation! You can turn the new navigation off for a limited time in your profile.</p>
<a class="text-sm text-blue-800 underline font-medium hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300" href="#">Turn new navigation off</a>
</SidebarCta>
</Sidebar>
<fwb-sidebar-cta
v-if="isShowCta"
label="Beta"
@close="toggleCta"
>
<p class="mb-3 text-sm text-blue-800 dark:text-blue-400">
Preview the new Flowbite dashboard navigation! You can turn the new navigation off for a limited time in your profile.
</p>
<a
class="text-sm text-blue-800 underline font-medium hover:text-blue-900 dark:text-blue-400 dark:hover:text-blue-300"
href="#"
>Turn new navigation off</a>
</fwb-sidebar-cta>
</fwb-sidebar>
</div>
</template>
<script setup>
import { Sidebar, SidebarCta, SidebarItem } from '../../../../src/index'
import { FwbSidebar, FwbSidebarCta, FwbSidebarItem } from '../../../../src/index'
import { ref } from 'vue'
const isShowCta = ref(true)
function toggleCta() {
function toggleCta () {
isShowCta.value = !isShowCta.value
}
</script>

44
docs/components/sidebar/examples/SidebarDropdownExample.vue → docs/components/sidebar/examples/FwbSidebarDropdownExample.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="vp-raw flex flex-col relative">
<Sidebar class="!h-full relative">
<SidebarItem>
<fwb-sidebar class="!h-full relative">
<fwb-sidebar-item>
<template #icon>
<svg
class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -14,9 +14,11 @@
<path d="M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z" />
</svg>
</template>
<template #default>Dashboard</template>
</SidebarItem>
<SidebarItem>
<template #default>
Dashboard
</template>
</fwb-sidebar-item>
<fwb-sidebar-item>
<template #icon>
<svg
class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -30,12 +32,14 @@
/>
</svg>
</template>
<template #default>Kanban</template>
<template #default>
Kanban
</template>
<template #suffix>
<span class="inline-flex items-center justify-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-300">Pro</span>
</template>
</SidebarItem>
<SidebarDropdownItem>
</fwb-sidebar-item>
<fwb-sidebar-dropdown-item>
<template #icon>
<svg
class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -48,16 +52,24 @@
<path d="M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z" />
</svg>
</template>
<template #trigger> E-commerce </template>
<template #default>
<SidebarItem class="pl-11"> Products </SidebarItem>
<SidebarItem class="pl-11"> Sign In </SidebarItem>
<SidebarItem class="pl-11"> Sign Up </SidebarItem>
<template #trigger>
E-commerce
</template>
</SidebarDropdownItem>
</Sidebar>
<template #default>
<fwb-sidebar-item class="pl-11">
Products
</fwb-sidebar-item>
<fwb-sidebar-item class="pl-11">
Sign In
</fwb-sidebar-item>
<fwb-sidebar-item class="pl-11">
Sign Up
</fwb-sidebar-item>
</template>
</fwb-sidebar-dropdown-item>
</fwb-sidebar>
</div>
</template>
<script setup>
import { Sidebar, SidebarItem, SidebarDropdownItem } from '../../../../src/index'
import { FwbSidebar, FwbSidebarDropdownItem, FwbSidebarItem } from '../../../../src/index'
</script>

71
docs/components/sidebar/examples/SidebarLogoExample.vue → docs/components/sidebar/examples/FwbSidebarExample.vue
View File

@@ -1,8 +1,7 @@
<template>
<div class="vp-raw flex flex-col relative">
<Sidebar class="!h-full relative">
<SidebarLogo name="Flowbite" logo="https://flowbite.com/docs/images/logo.svg" tag="router-link" />
<SidebarItem>
<fwb-sidebar class="!h-full relative">
<fwb-sidebar-item>
<template #icon>
<svg
class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -15,9 +14,11 @@
<path d="M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z" />
</svg>
</template>
<template #default>Dashboard</template>
</SidebarItem>
<SidebarItem>
<template #default>
Dashboard
</template>
</fwb-sidebar-item>
<fwb-sidebar-item>
<template #icon>
<svg
class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -31,12 +32,14 @@
/>
</svg>
</template>
<template #default>Kanban</template>
<template #default>
Kanban
</template>
<template #suffix>
<span class="inline-flex items-center justify-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-300">Pro</span>
</template>
</SidebarItem>
<SidebarItem>
</fwb-sidebar-item>
<fwb-sidebar-item>
<template #icon>
<svg
class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -50,12 +53,14 @@
/>
</svg>
</template>
<template #default> Inbox </template>
<template #default>
Inbox
</template>
<template #suffix>
<span class="inline-flex items-center justify-center w-3 h-3 p-3 ml-3 text-sm font-medium text-blue-800 bg-blue-100 rounded-full dark:bg-blue-900 dark:text-blue-300">3</span>
</template>
</SidebarItem>
<SidebarItem>
</fwb-sidebar-item>
<fwb-sidebar-item>
<template #icon>
<svg
class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -69,9 +74,11 @@
/>
</svg>
</template>
<template #default>Users</template>
</SidebarItem>
<SidebarItem>
<template #default>
Users
</template>
</fwb-sidebar-item>
<fwb-sidebar-item>
<template #icon>
<svg
class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -85,9 +92,11 @@
/>
</svg>
</template>
<template #default>Products</template>
</SidebarItem>
<SidebarItem>
<template #default>
Products
</template>
</fwb-sidebar-item>
<fwb-sidebar-item>
<template #icon>
<svg
class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -96,12 +105,20 @@
fill="none"
viewBox="0 0 18 16"
>
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 8h11m0 0L8 4m4 4-4 4m4-11h3a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-3" />
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M1 8h11m0 0L8 4m4 4-4 4m4-11h3a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-3"
/>
</svg>
</template>
<template #default>Sign In</template>
</SidebarItem>
<SidebarItem>
<template #default>
Sign In
</template>
</fwb-sidebar-item>
<fwb-sidebar-item>
<template #icon>
<svg
class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -119,11 +136,13 @@
/>
</svg>
</template>
<template #default>Sign Up</template>
</SidebarItem>
</Sidebar>
<template #default>
Sign Up
</template>
</fwb-sidebar-item>
</fwb-sidebar>
</div>
</template>
<script setup>
import { Sidebar, SidebarItem, SidebarLogo } from '../../../../src/index'
import { FwbSidebar, FwbSidebarItem } from '../../../../src/index'
</script>

106
docs/components/sidebar/examples/SidebarGroupExample.vue → docs/components/sidebar/examples/FwbSidebarGroupExample.vue
View File

@@ -1,7 +1,7 @@
<template>
<div class="vp-raw flex flex-col relative">
<Sidebar class="!h-full relative">
<SidebarItem>
<fwb-sidebar class="!h-full relative">
<fwb-sidebar-item>
<template #icon>
<svg
class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -14,9 +14,11 @@
<path d="M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z" />
</svg>
</template>
<template #default>Dashboard</template>
</SidebarItem>
<SidebarItem>
<template #default>
Dashboard
</template>
</fwb-sidebar-item>
<fwb-sidebar-item>
<template #icon>
<svg
class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -30,12 +32,14 @@
/>
</svg>
</template>
<template #default>Kanban</template>
<template #default>
Kanban
</template>
<template #suffix>
<span class="inline-flex items-center justify-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-300">Pro</span>
</template>
</SidebarItem>
<SidebarItem>
</fwb-sidebar-item>
<fwb-sidebar-item>
<template #icon>
<svg
class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -49,12 +53,14 @@
/>
</svg>
</template>
<template #default> Inbox </template>
<template #default>
Inbox
</template>
<template #suffix>
<span class="inline-flex items-center justify-center w-3 h-3 p-3 ml-3 text-sm font-medium text-blue-800 bg-blue-100 rounded-full dark:bg-blue-900 dark:text-blue-300">3</span>
</template>
</SidebarItem>
<SidebarItem>
</fwb-sidebar-item>
<fwb-sidebar-item>
<template #icon>
<svg
class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -68,9 +74,11 @@
/>
</svg>
</template>
<template #default>Users</template>
</SidebarItem>
<SidebarItem>
<template #default>
Users
</template>
</fwb-sidebar-item>
<fwb-sidebar-item>
<template #icon>
<svg
class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -84,9 +92,11 @@
/>
</svg>
</template>
<template #default>Products</template>
</SidebarItem>
<SidebarItem>
<template #default>
Products
</template>
</fwb-sidebar-item>
<fwb-sidebar-item>
<template #icon>
<svg
class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -95,12 +105,20 @@
fill="none"
viewBox="0 0 18 16"
>
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 8h11m0 0L8 4m4 4-4 4m4-11h3a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-3" />
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M1 8h11m0 0L8 4m4 4-4 4m4-11h3a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-3"
/>
</svg>
</template>
<template #default>Sign In</template>
</SidebarItem>
<SidebarItem>
<template #default>
Sign In
</template>
</fwb-sidebar-item>
<fwb-sidebar-item>
<template #icon>
<svg
class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -118,10 +136,12 @@
/>
</svg>
</template>
<template #default>Sign Up</template>
</SidebarItem>
<SidebarItemGroup border>
<SidebarItem>
<template #default>
Sign Up
</template>
</fwb-sidebar-item>
<fwb-sidebar-item-group border>
<fwb-sidebar-item>
<template #icon>
<svg
class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -135,9 +155,11 @@
/>
</svg>
</template>
<template #default>Upgrade to Pro</template>
</SidebarItem>
<SidebarItem>
<template #default>
Upgrade to Pro
</template>
</fwb-sidebar-item>
<fwb-sidebar-item>
<template #icon>
<svg
class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -149,9 +171,11 @@
<path d="M16 14V2a2 2 0 0 0-2-2H2a2 2 0 0 0-2 2v15a3 3 0 0 0 3 3h12a1 1 0 0 0 0-2h-1v-2a2 2 0 0 0 2-2ZM4 2h2v12H4V2Zm8 16H3a1 1 0 0 1 0-2h9v2Z" />
</svg>
</template>
<template #default>Documentation</template>
</SidebarItem>
<SidebarItem>
<template #default>
Documentation
</template>
</fwb-sidebar-item>
<fwb-sidebar-item>
<template #icon>
<svg
class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -164,9 +188,11 @@
<path d="M14 4H2a2 2 0 0 0-2 2v10a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2ZM2 16v-6h12v6H2Z" />
</svg>
</template>
<template #default>Components</template>
</SidebarItem>
<SidebarItem>
<template #default>
Components
</template>
</fwb-sidebar-item>
<fwb-sidebar-item>
<template #icon>
<svg
class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -180,12 +206,14 @@
/>
</svg>
</template>
<template #default>Help</template>
</SidebarItem>
</SidebarItemGroup>
</Sidebar>
<template #default>
Help
</template>
</fwb-sidebar-item>
</fwb-sidebar-item-group>
</fwb-sidebar>
</div>
</template>
<script setup>
import { Sidebar, SidebarItemGroup, SidebarItem } from '../../../../src/index'
import { FwbSidebar, FwbSidebarItem, FwbSidebarItemGroup } from '../../../../src/index'
</script>

75
docs/components/sidebar/examples/SidebarExample.vue → docs/components/sidebar/examples/FwbSidebarLogoExample.vue
View File

@@ -1,7 +1,12 @@
<template>
<div class="vp-raw flex flex-col relative">
<Sidebar class="!h-full relative">
<SidebarItem>
<fwb-sidebar class="!h-full relative">
<fwb-sidebar-logo
name="Flowbite"
logo="https://flowbite.com/docs/images/logo.svg"
tag="router-link"
/>
<fwb-sidebar-item>
<template #icon>
<svg
class="w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -14,9 +19,11 @@
<path d="M12.5 0c-.157 0-.311.01-.565.027A1 1 0 0 0 11 1.02V10h8.975a1 1 0 0 0 1-.935c.013-.188.028-.374.028-.565A8.51 8.51 0 0 0 12.5 0Z" />
</svg>
</template>
<template #default>Dashboard</template>
</SidebarItem>
<SidebarItem>
<template #default>
Dashboard
</template>
</fwb-sidebar-item>
<fwb-sidebar-item>
<template #icon>
<svg
class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -30,12 +37,14 @@
/>
</svg>
</template>
<template #default>Kanban</template>
<template #default>
Kanban
</template>
<template #suffix>
<span class="inline-flex items-center justify-center px-2 ml-3 text-sm font-medium text-gray-800 bg-gray-100 rounded-full dark:bg-gray-700 dark:text-gray-300">Pro</span>
</template>
</SidebarItem>
<SidebarItem>
</fwb-sidebar-item>
<fwb-sidebar-item>
<template #icon>
<svg
class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -49,12 +58,14 @@
/>
</svg>
</template>
<template #default> Inbox </template>
<template #default>
Inbox
</template>
<template #suffix>
<span class="inline-flex items-center justify-center w-3 h-3 p-3 ml-3 text-sm font-medium text-blue-800 bg-blue-100 rounded-full dark:bg-blue-900 dark:text-blue-300">3</span>
</template>
</SidebarItem>
<SidebarItem>
</fwb-sidebar-item>
<fwb-sidebar-item>
<template #icon>
<svg
class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -68,9 +79,11 @@
/>
</svg>
</template>
<template #default>Users</template>
</SidebarItem>
<SidebarItem>
<template #default>
Users
</template>
</fwb-sidebar-item>
<fwb-sidebar-item>
<template #icon>
<svg
class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -84,9 +97,11 @@
/>
</svg>
</template>
<template #default>Products</template>
</SidebarItem>
<SidebarItem>
<template #default>
Products
</template>
</fwb-sidebar-item>
<fwb-sidebar-item>
<template #icon>
<svg
class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -95,12 +110,20 @@
fill="none"
viewBox="0 0 18 16"
>
<path stroke="currentColor" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M1 8h11m0 0L8 4m4 4-4 4m4-11h3a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-3" />
<path
stroke="currentColor"
stroke-linecap="round"
stroke-linejoin="round"
stroke-width="2"
d="M1 8h11m0 0L8 4m4 4-4 4m4-11h3a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-3"
/>
</svg>
</template>
<template #default>Sign In</template>
</SidebarItem>
<SidebarItem>
<template #default>
Sign In
</template>
</fwb-sidebar-item>
<fwb-sidebar-item>
<template #icon>
<svg
class="flex-shrink-0 w-5 h-5 text-gray-500 transition duration-75 dark:text-gray-400 group-hover:text-gray-900 dark:group-hover:text-white"
@@ -118,11 +141,13 @@
/>
</svg>
</template>
<template #default>Sign Up</template>
</SidebarItem>
</Sidebar>
<template #default>
Sign Up
</template>
</fwb-sidebar-item>
</fwb-sidebar>
</div>
</template>
<script setup>
import { Sidebar, SidebarItem } from '../../../../src/index'
import { FwbSidebar, FwbSidebarItem, FwbSidebarLogo } from '../../../../src/index'
</script>