svcm/oa
1
0
Fork 0
mirror of https://git.hmsn.ink/kospo/svcm/oa.git synced 2026-03-20 22:03:36 +09:00
Code Issues Packages Projects Releases Wiki Activity

first

Browse Source
This commit is contained in:
bangae1
2025-05-24 01:49:48 +09:00
commit 62abbcf4eb
2376 changed files with 325522 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

89
src/pages/components/accordion/image.vue Normal file
View File

@@ -0,0 +1,89 @@
<script setup lang="ts">
import { VAccordionImageMeta } from '/@src/data/documentation/components-meta'
const data = [
{
image: 'https://source.unsplash.com/FV3GConVSss/1600x900',
title: 'Office Part I',
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
},
{
image: 'https://source.unsplash.com/rRiAzFkJPMo/1600x900',
title: 'Office Part II',
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
},
{
image: 'https://source.unsplash.com/tvleqH3p1os/1600x900',
title: '12 Great Landscapes',
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
},
{
image: 'https://source.unsplash.com/-Xv7k95vOFA/1600x900',
title: 'Team Meetup',
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
},
{
image: 'https://source.unsplash.com/F6NvgzU3RfM/1600x900',
title: 'Purple Shades',
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
},
{
image: 'https://source.unsplash.com/5E5N49RWtbA/1600x900',
title: 'Blue Note',
content: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit',
},
]
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'VAccordionImage'
})
useHead({
title: 'VAccordionImage - Components - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'Accordions',
},
{
label: 'VAccordionImage',
to: '/components/accordion/image',
},
]"
/>
<div class="columns is-multiline">
<div class="column is-12">
<!--Image Accordion-->
<AccordionImageDocumentation />
</div>
<div class="column is-12">
<VAccordionImage :items="data" />
</div>
<div class="column is-12">
<DocumentationMeta
name="VAccordionImage"
:meta="VAccordionImageMeta"
/>
</div>
</div>
</div>
</template>

93
src/pages/components/accordion/index.vue Normal file
View File

@@ -0,0 +1,93 @@
<script setup lang="ts">
import { VAccordionMeta } from '/@src/data/documentation/components-meta'
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'VAccordion'
})
useHead({
title: 'VAccordion - Components - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'Accordions',
},
{
label: 'V-Accordion',
to: '/components/accordion/',
},
]"
/>
<div class="columns is-multiline">
<div class="column is-12">
<!--Accordion-->
<AccordionDefaultDocumentation />
</div>
<div class="column is-6 is-full-tablet">
<VAccordion
:items="[
{
title: 'Accordion Item 1',
content: 'Sed ut perspiciatis unde omnis iste ...',
},
{
title: 'Accordion Item 2',
content: 'Sed ut perspiciatis unde omnis iste ...',
},
{
title: 'Accordion Item 3',
content: 'Sed ut perspiciatis unde omnis iste ...',
},
]"
/>
</div>
<div class="column is-6 is-full-tablet">
<VAccordion
:items="[
{
title: 'Accordion Item 1',
content: 'Sed ut perspiciatis unde omnis iste ...',
},
{
title: 'Accordion Item 2',
content: 'Sed ut perspiciatis unde omnis iste ...',
},
{
title: 'Accordion Item 3',
content: 'Sed ut perspiciatis unde omnis iste ...',
},
]"
exclusive
/>
</div>
<div class="column is-12 mt-5">
<DocumentationMeta
name="VAccordion"
:meta="VAccordionMeta"
/>
</div>
</div>
</div>
</template>

65
src/pages/components/action.vue Normal file
View File

@@ -0,0 +1,65 @@
<script setup lang="ts">
import { VActionMeta } from '/@src/data/documentation/components-meta'
const markdownContainer = ref<HTMLElement>()
const toc = useMarkdownToc(markdownContainer)
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'VAction'
})
useHead({
title: 'VAction - Components - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'Buttons',
},
{
label: 'VAction',
to: '/components/action',
},
]"
/>
<div class="columns">
<div
ref="markdownContainer"
:class="[toc.length > 0 ? 'is-9' : 'is-12']"
class="column doc-column stay-focus-container"
>
<!--VAction-->
<VActionDocumentation />
<DocumentationMeta
name="VAction"
:meta="VActionMeta"
/>
</div>
<div
v-if="toc.length"
class="column is-3 toc-column"
>
<DocumentationToc :toc="toc" />
</div>
</div>
</div>
</template>

67
src/pages/components/addons/calendar.vue Normal file
View File

@@ -0,0 +1,67 @@
<script setup lang="ts">
const markdownContainer = ref<HTMLElement>()
const toc = useMarkdownToc(markdownContainer)
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'VCalendar'
})
useHead({
title: 'VCalendar - Addons - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'Addons',
},
{
label: 'VCalendar',
to: '/components/addons/calendar',
},
]"
/>
<div class="columns is-multiline">
<div
ref="markdownContainer"
:class="[toc.length > 0 ? 'is-9' : 'is-12']"
class="column doc-column stay-focus-container"
>
<!--Datepicker-->
<DatepickerBaseDocumentation />
<!--DateRangepicker-->
<DatepickerRangeDocumentation />
<!--DateTimepicker-->
<DatepickerTimeDocumentation />
<!--Timepicker-->
<DatepickerTimeSingleDocumentation />
</div>
<div
v-if="toc.length"
class="column is-3 toc-column"
>
<DocumentationToc :toc="toc" />
</div>
</div>
</div>
</template>

117
src/pages/components/addons/ckeditor.vue Normal file
View File

@@ -0,0 +1,117 @@
<script setup lang="ts">
import type { EditorConfig } from '@ckeditor/ckeditor5-core'
// augment EditorConfig with fonts options
import type {} from '@ckeditor/ckeditor5-font'
const editor = shallowRef<any>()
const CKEditor = defineAsyncComponent(() =>
import('@ckeditor/ckeditor5-vue').then(m => m.default.component),
)
const editorConfig = {
fontFamily: {
options: ['"Montserrat Variable", sans-serif', '"Roboto Flex Variable", sans-serif'],
},
} satisfies EditorConfig
const editorData = ref(`
<h2>The three greatest things you learn from travelling</h2>
<p>Like all the great things on earth travelling teaches us by example. Here are some of the most precious lessons I’ve learned over the years of travelling.</p>
<figure class="image image-style-side"><img src="https://images.pexels.com/photos/2335126/pexels-photo-2335126.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=650&w=940" alt="A lone wanderer looking at Mount Bromo volcano in Indonesia.">
<figcaption>Leaving your comfort zone might lead you to such beautiful sceneries like this one.</figcaption>
</figure>
<h3>Appreciation of diversity</h3>
<p>Getting used to an entirely different culture can be challenging. While it’s also nice to learn about cultures online or from books, nothing comes close to experiencing cultural diversity in person. You learn to appreciate each and every single one of the differences while you become more culturally fluid.</p>
<blockquote>
<p>The real voyage of discovery consists not in seeking new landscapes, but having new eyes.</p>
<p><strong>Marcel Proust</strong></p>
</blockquote>
<h3>Improvisation</h3>
<p>Life doesn't allow us to execute every single plan perfectly. This especially seems to be the case when you travel. You plan it down to every minute with a big checklist; but when it comes to executing it, something always comes up, and you’re left with your improvising skills. You learn to adapt as you go. Here’s how my travel checklist looks now:</p>
<ul>
<li>buy the ticket</li>
<li>start your adventure</li>
</ul>
<figure class="image image-style-side"><img src="https://images.pexels.com/photos/2967596/pexels-photo-2967596.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500" alt="Three Monks walking on ancient temple.">
<figcaption>Leaving your comfort zone might lead you to such beautiful sceneries like this one.</figcaption>
</figure>
<h3>Confidence</h3>
<p>Going to a new place can be quite terrifying. While change and uncertainty makes us scared, travelling teaches us how ridiculous it is to be afraid of something before it happens. The moment you face your fear and see there was nothing to be afraid of, is the moment you discover bliss.</p>
`)
onMounted(async () => {
// lazy load the editor when the component is mounted
editor.value = await import('@ckeditor/ckeditor5-build-classic').then(m => m.default)
})
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'CKEditor'
})
useHead({
title: 'CKEditor - Addons - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'Addons',
},
{
label: 'CKEditor',
to: '/components/addons/ckeditor',
},
]"
/>
<div class="columns is-multiline">
<div class="column is-12">
<!--Simple Datatable-->
<CKEditorBasicDocumentation />
<div class="columns">
<div class="column is-12 content">
<CKEditor
v-if="editor"
v-model="editorData"
:editor="editor"
:config="editorConfig"
/>
<VPlaceload
v-else
height="500px"
/>
</div>
</div>
</div>
</div>
</div>
</template>

64
src/pages/components/addons/credit-card.vue Normal file
View File

@@ -0,0 +1,64 @@
<script setup lang="ts">
import { VCreditCardMeta } from '/@src/data/documentation/components-meta'
const markdownContainer = ref<HTMLElement>()
const toc = useMarkdownToc(markdownContainer)
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'VCreditCard'
})
useHead({
title: 'VCreditCard - Addons - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'Addons',
},
{
label: 'VCreditCard',
to: '/components/addons/credit-card',
},
]"
/>
<div class="columns is-multiline">
<div
ref="markdownContainer"
:class="[toc.length > 0 ? 'is-9' : 'is-12']"
class="column doc-column stay-focus-container"
>
<VCreditCardDocumentation />
<DocumentationMeta
name="VCreditCard"
:meta="VCreditCardMeta"
/>
</div>
<div
v-if="toc.length"
class="column is-3 toc-column"
>
<DocumentationToc :toc="toc" />
</div>
</div>
</div>
</template>

64
src/pages/components/addons/filepond.vue Normal file
View File

@@ -0,0 +1,64 @@
<script setup lang="ts">
import { VFilePondMeta } from '/@src/data/documentation/components-meta'
const markdownContainer = ref<HTMLElement>()
const toc = useMarkdownToc(markdownContainer)
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'VFilePond'
})
useHead({
title: 'VFilePond - Addons - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'Addons',
},
{
label: 'VFilePond',
to: '/components/addons/filepond',
},
]"
/>
<div class="columns is-multiline">
<div
ref="markdownContainer"
:class="[toc.length > 0 ? 'is-9' : 'is-12']"
class="column doc-column stay-focus-container"
>
<VFilepondDocumentation />
<DocumentationMeta
name="VFilePond"
:meta="VFilePondMeta"
/>
</div>
<div
v-if="toc.length"
class="column is-3 toc-column"
>
<DocumentationToc :toc="toc" />
</div>
</div>
</div>
</template>

64
src/pages/components/addons/imask-input.vue Normal file
View File

@@ -0,0 +1,64 @@
<script setup lang="ts">
import { VIMaskInputMeta } from '/@src/data/documentation/components-meta'
const markdownContainer = ref<HTMLElement>()
const toc = useMarkdownToc(markdownContainer)
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'VIMaskInput'
})
useHead({
title: 'VIMaskInput - Addons - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'Addons',
},
{
label: 'VIMaskInput',
to: '/components/addons/imask-input',
},
]"
/>
<div class="columns is-multiline">
<div
ref="markdownContainer"
:class="[toc.length > 0 ? 'is-9' : 'is-12']"
class="column doc-column stay-focus-container"
>
<VImaskInputDocumentation />
<DocumentationMeta
name="VIMaskInput"
:meta="VIMaskInputMeta"
/>
</div>
<div
v-if="toc.length"
class="column is-3 toc-column"
>
<DocumentationToc :toc="toc" />
</div>
</div>
</div>
</template>

99
src/pages/components/addons/vueform-multiselect.vue Normal file
View File

@@ -0,0 +1,99 @@
<script setup lang="ts">
const markdownContainer = ref<HTMLElement>()
const toc = useMarkdownToc(markdownContainer)
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'vueform/multiselect'
})
useHead({
title: 'vueform/multiselect - Addons - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'Addons',
},
{
label: 'vueform/multiselect',
to: '/components/addons/vueform-multiselect',
},
]"
/>
<div class="columns is-multiline">
<div
ref="markdownContainer"
:class="[toc.length > 0 ? 'is-9' : 'is-12']"
class="column doc-column stay-focus-container"
>
<!--Autocomplete-->
<MultiselectAutocompleteDocumentation />
<!--Simple select-->
<MultiselectBaseDocumentation />
<!--Multiselect-->
<MultiselectMultipleObjectDocumentation />
<!--Multiselect custom label-->
<MultiselectMultipleCustomLabelDocumentation />
<!--Disabled option-->
<MultiselectDisabledOptionDocumentation />
<!--Tags-->
<MultiselectTagsBaseDocumentation />
<!--Slot-->
<MultiselectSelectSlotDocumentation />
<!--Slot search-->
<MultiselectSelectSlotSearchDocumentation />
<!--Slot search-->
<MultiselectSelectSlotUsersDocumentation />
<!--Slot icons search-->
<MultiselectSelectSlotIconsDocumentation />
<!--Tags images-->
<MultiselectTagsImageSlotDocumentation />
<!--Tags users-->
<MultiselectTagsCustomSlotDocumentation />
<!--Tags images stacked-->
<MultiselectTagsImagesStackedDocumentation />
<!--Tags users stacked-->
<MultiselectTagsUsersStackedDocumentation />
<div class="pb-6 mb-6" />
</div>
<div
v-if="toc.length"
class="column is-3 toc-column"
>
<DocumentationToc :toc="toc" />
</div>
</div>
</div>
</template>

78
src/pages/components/addons/vueform-slider.vue Normal file
View File

@@ -0,0 +1,78 @@
<script setup lang="ts">
const markdownContainer = ref<HTMLElement>()
const toc = useMarkdownToc(markdownContainer)
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'vueform/slider'
})
useHead({
title: 'vueform/slider - Addons - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'Addons',
},
{
label: 'vueform/slider',
to: '/components/addons/vueform-slider',
},
]"
/>
<div class="columns is-multiline">
<div
ref="markdownContainer"
:class="[toc.length > 0 ? 'is-9' : 'is-12']"
class="column doc-column stay-focus-container"
>
<!--Simple slider-->
<SliderBaseDocumentation />
<!--Squared tooltip-->
<SliderSquaredDocumentation />
<!--Curved tooltip-->
<SliderCurvedDocumentation />
<!--Slider colors-->
<SliderColorDocumentation />
<!--Multiple sliders-->
<SliderMultipleDocumentation />
<!--Tooltip format-->
<SliderFormatDocumentation />
<!--Slider Mergin-->
<SliderMergingDocumentation />
<div class="pb-6 mb-6" />
</div>
<div
v-if="toc.length"
class="column is-3 toc-column"
>
<DocumentationToc :toc="toc" />
</div>
</div>
</div>
</template>

65
src/pages/components/animated-checkbox.vue Normal file
View File

@@ -0,0 +1,65 @@
<script setup lang="ts">
import { VAnimatedCheckboxMeta } from '/@src/data/documentation/components-meta'
const markdownContainer = ref<HTMLElement>()
const toc = useMarkdownToc(markdownContainer)
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'VAnimatedCheckbox'
})
useHead({
title: 'VAnimatedCheckbox - Switches Elements - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'Switches',
},
{
label: 'VAnimatedCheckbox',
to: '/components/animated-checkbox',
},
]"
/>
<div class="columns">
<div
ref="markdownContainer"
:class="[toc.length > 0 ? 'is-9' : 'is-12']"
class="column doc-column stay-focus-container"
>
<!-- @TODO -->
<AnimatedCheckboxDocumentation />
<DocumentationMeta
name="VAnimatedCheckbox"
:meta="VAnimatedCheckboxMeta"
/>
</div>
<div
v-if="toc.length"
class="column is-3 toc-column"
>
<DocumentationToc :toc="toc" />
</div>
</div>
</div>
</template>

95
src/pages/components/avatar/index.vue Normal file
View File

@@ -0,0 +1,95 @@
<script setup lang="ts">
import { VAvatarMeta } from '/@src/data/documentation/components-meta'
const markdownContainer = ref<HTMLElement>()
const toc = useMarkdownToc(markdownContainer)
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'VAvatar'
})
useHead({
title: 'VAvatar - Components - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'VAvatar',
to: '/components/avatar/',
},
]"
/>
<div class="columns">
<div
ref="markdownContainer"
:class="[toc.length > 0 ? 'is-9' : 'is-12']"
class="column doc-column stay-focus-container"
>
<!--Avatar-->
<AvatarDefaultDocumentation />
<!--Avatar Square-->
<AvatarSquareDocumentation />
<!--Avatar Fallback-->
<AvatarHandleFallbackDocumentation />
<!--Avatar Dot-->
<AvatarDotDocumentation />
<!--Avatar Dot Squared-->
<AvatarDotSquaredDocumentation />
<!--Avatar Dot Colors-->
<AvatarDotColorsDocumentation />
<!--Avatar Badge-->
<AvatarBadgeDocumentation />
<!--Avatar Fake-->
<AvatarFakeDocumentation />
<!--Avatar Fake Squared-->
<AvatarFakeSquareDocumentation />
<!--Avatar Fake Badge-->
<AvatarFakeBadgeDocumentation />
<!--Avatar Fake Colors-->
<AvatarFakeColorDocumentation />
<!--Avatar Fake Squared Colors-->
<AvatarFakeSquaredColorDocumentation />
<DocumentationMeta
name="VAvatar"
:meta="VAvatarMeta"
/>
</div>
<div
v-if="toc.length"
class="column is-3 toc-column"
>
<DocumentationToc :toc="toc" />
</div>
</div>
</div>
</template>

68
src/pages/components/avatar/stack.vue Normal file
View File

@@ -0,0 +1,68 @@
<script setup lang="ts">
import { VAvatarStackMeta } from '/@src/data/documentation/components-meta'
const markdownContainer = ref<HTMLElement>()
const toc = useMarkdownToc(markdownContainer)
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'VAvatarStack'
})
useHead({
title: 'VAvatarStack - Components - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'VAvatarStack',
to: '/components/avatar/stack',
},
]"
/>
<div class="columns">
<div
ref="markdownContainer"
:class="[toc.length > 0 ? 'is-9' : 'is-12']"
class="column doc-column stay-focus-container"
>
<!--Small Stack-->
<AvatarStackSmallDocumentation />
<!--Regular Stack-->
<AvatarStackRegularDocumentation />
<!--Medium Stack-->
<AvatarStackMediumDocumentation />
<DocumentationMeta
name="VAvatarStack"
:meta="VAvatarStackMeta"
/>
</div>
<div
v-if="toc.length"
class="column is-3 toc-column"
>
<DocumentationToc :toc="toc" />
</div>
</div>
</div>
</template>

77
src/pages/components/block.vue Normal file
View File

@@ -0,0 +1,77 @@
<script setup lang="ts">
import { VBlockMeta } from '/@src/data/documentation/components-meta'
const markdownContainer = ref<HTMLElement>()
const toc = useMarkdownToc(markdownContainer)
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'VBlock'
})
useHead({
title: 'VBlock - Components - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'VBlock',
to: '/components/block',
},
]"
/>
<div class="columns">
<div
ref="markdownContainer"
:class="[toc.length > 0 ? 'is-9' : 'is-12']"
class="column doc-column stay-focus-container"
>
<!--VBlock base-->
<VBlockBaseDocumentation />
<!--VBlock icon-->
<VBlockIconDocumentation />
<!--VBlock center-->
<VBlockCenterDocumentation />
<!--VBlock icon center-->
<VBlockIconCenterDocumentation />
<!--VBlock base responsive-->
<VBlockBaseResponsiveDocumentation />
<!--VBlock center responsive-->
<VBlockCenterResponsiveDocumentation />
<DocumentationMeta
name="VBlock"
:meta="VBlockMeta"
/>
</div>
<div
v-if="toc.length"
class="column is-3 toc-column"
>
<DocumentationToc :toc="toc" />
</div>
</div>
</div>
</template>

74
src/pages/components/breadcrumb.vue Normal file
View File

@@ -0,0 +1,74 @@
<script setup lang="ts">
import { VBreadcrumbMeta } from '/@src/data/documentation/components-meta'
const markdownContainer = ref<HTMLElement>()
const toc = useMarkdownToc(markdownContainer)
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'VBreadcrumb'
})
useHead({
title: 'VBreadcrumb - Components - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'VBreadcrumb',
to: '/components/breadcrumb',
},
]"
/>
<div class="columns">
<div
ref="markdownContainer"
:class="[toc.length > 0 ? 'is-9' : 'is-12']"
class="column doc-column stay-focus-container"
>
<!--Breadcrumb Default-->
<BreadcrumbDefaultDocumentation />
<!--Arrow Separator-->
<BreadcrumbArrowDocumentation />
<!--Bullet Separator-->
<BreadcrumbBulletDocumentation />
<!--Dot Separator-->
<BreadcrumbDotDocumentation />
<!--Succeeds Separator-->
<BreadcrumbSucceedsDocumentation />
<DocumentationMeta
name="VBreadcrumb"
:meta="VBreadcrumbMeta"
/>
</div>
<div
v-if="toc.length"
class="column is-3 toc-column"
>
<DocumentationToc :toc="toc" />
</div>
</div>
</div>
</template>

103
src/pages/components/button.vue Normal file
View File

@@ -0,0 +1,103 @@
<script setup lang="ts">
import { VButtonMeta, VButtonsMeta } from '/@src/data/documentation/components-meta'
const markdownContainer = ref<HTMLElement>()
const toc = useMarkdownToc(markdownContainer)
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'VButton'
})
useHead({
title: 'VButton - Components - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'Buttons',
},
{
label: 'VButton',
to: '/components/button',
},
]"
/>
<div class="columns">
<div
ref="markdownContainer"
:class="[toc.length > 0 ? 'is-9' : 'is-12']"
class="column doc-column stay-focus-container"
>
<!--VButton base-->
<VButtonBaseDocumentation />
<!--VButton link-->
<VButtonLinkDocumentation />
<!--VButton colors-->
<VButtonColorsDocumentation />
<!--VButton light colors-->
<VButtonColorsLightDocumentation />
<!--VButton outlined colors-->
<VButtonColorsOutlinedDocumentation />
<!--VButton placeload-->
<VButtonPlaceloadDocumentation />
<!--VButton Elevation-->
<VButtonElevatedDocumentation />
<!--VButton Disabled-->
<VButtonDisabledDocumentation />
<!--VButton Font Awesome-->
<VButtonFaDocumentation />
<!--VButton Feather-->
<VButtonFeatherDocumentation />
<!--VButton Group-->
<VButtonGroupDocumentation />
<!--VButton Addons-->
<VButtonAddonsDocumentation />
<DocumentationMeta
name="VButton"
:meta="VButtonMeta"
/>
<DocumentationMeta
name="VButtons"
:meta="VButtonsMeta"
/>
</div>
<div
v-if="toc.length"
class="column is-3 toc-column"
>
<DocumentationToc :toc="toc" />
</div>
</div>
</div>
</template>

169
src/pages/components/card/action.vue Normal file
View File

@@ -0,0 +1,169 @@
<script setup lang="ts">
import { VCardActionMeta } from '/@src/data/documentation/components-meta'
const markdownContainer = ref<HTMLElement>()
const toc = useMarkdownToc(markdownContainer)
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'VCardAction'
})
useHead({
title: 'VCardAction - Components - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'VCardAction',
to: '/components/card/action',
},
]"
/>
<div class="columns is-multiline">
<div
ref="markdownContainer"
:class="[toc.length > 0 ? 'is-9' : 'is-12']"
class="column doc-column stay-focus-container"
>
<VCardActionDocumentation />
<div class="columns is-multiline mb-6">
<div class="column is-4">
<VCardAction
avatar="https://media.cssninja.io/content/avatars/19.jpg"
badge="/images/icons/flags/germany.svg"
title="Greta K."
subtitle="Sales Manager"
>
<template #action>
<VTag
color="green"
label="trending"
rounded
/>
</template>
</VCardAction>
</div>
<div class="column is-4">
<VCardAction
avatar="https://media.cssninja.io/content/avatars/18.jpg"
badge="/images/icons/flags/united-states-of-america.svg"
title="George W."
subtitle="Software Engineer"
>
<template #action>
<VIconButton
icon="lucide:heart"
circle
/>
</template>
</VCardAction>
</div>
<div class="column is-4">
<VCardAction
avatar="https://media.cssninja.io/content/avatars/22.jpg"
badge="/images/icons/flags/france.svg"
title="Sandrine C."
subtitle="HR Manager"
radius="rounded"
>
<template #action>
<WidgetDropdown />
</template>
</VCardAction>
</div>
</div>
<VCardActionContentDocumentation />
<div class="columns is-multiline mb-6">
<div class="column is-4">
<VCardAction
avatar="https://media.cssninja.io/content/avatars/19.jpg"
badge="/images/icons/flags/germany.svg"
title="Greta K."
subtitle="Sales Manager"
>
<template #action>
<VTag
color="green"
label="trending"
rounded
/>
</template>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quibusnam
praeteritis? At multis se probavit. Quoniam, si dis placet, ab Epicuro
loqui discimus. Et ille ridens.
</p>
</VCardAction>
</div>
<div class="column is-4">
<VCardAction
avatar="https://media.cssninja.io/content/avatars/18.jpg"
badge="/images/icons/flags/united-states-of-america.svg"
title="George W."
subtitle="Software Engineer"
>
<template #action>
<VAction>View</VAction>
</template>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quibusnam
praeteritis? At multis se probavit. Quoniam, si dis placet, ab Epicuro
loqui discimus. Et ille ridens.
</p>
</VCardAction>
</div>
<div class="column is-4">
<VCardAction
avatar="https://media.cssninja.io/content/avatars/22.jpg"
badge="/images/icons/flags/france.svg"
title="Sandrine C."
subtitle="HR Manager"
radius="rounded"
>
<template #action>
<WidgetDropdown />
</template>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quibusnam
praeteritis? At multis se probavit. Quoniam, si dis placet, ab Epicuro
loqui discimus. Et ille ridens.
</p>
</VCardAction>
</div>
</div>
<DocumentationMeta
name="VCardAction"
:meta="VCardActionMeta"
/>
</div>
<div
v-if="toc.length"
class="column is-3 toc-column"
>
<DocumentationToc :toc="toc" />
</div>
</div>
</div>
</template>

199
src/pages/components/card/advanced.vue Normal file
View File

@@ -0,0 +1,199 @@
<script setup lang="ts">
import type { VAvatarProps } from '/@src/components/base/VAvatar.vue'
import * as userStacks from '/@src/data/users/userStacks'
import { VCardAdvancedMeta } from '/@src/data/documentation/components-meta'
const userStack2 = userStacks.userStack2 as VAvatarProps[]
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'VCardAdvanced'
})
useHead({
title: 'VCardAdvanced - Components - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'Cards',
},
{
label: 'VCardAdvanced',
to: '/components/card/advanced',
},
]"
/>
<div class="columns is-multiline">
<div class="column is-12">
<!--VCard Advanced-->
<VCardAdvancedDocumentation />
</div>
<div class="column is-4">
<VCardAdvanced>
<template #header-left>
<VBlock
title="Anna B."
subtitle="UX Designer"
center
>
<template #icon>
<VAvatar
picture="https://media.cssninja.io/content/avatars/19.jpg"
badge="/images/icons/flags/germany.svg"
/>
</template>
</VBlock>
</template>
<template #header-right>
<VAvatarStack
:avatars="userStack2"
:limit="1"
size="small"
/>
</template>
<template #content>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quibusnam
praeteritis? At multis se probavit. Quoniam, si dis placet, ab Epicuro loqui
discimus. Et ille ridens.
</p>
</template>
<template #footer-left>
<div class="tags">
<VTag
label="Business"
color="solid"
rounded
/>
</div>
</template>
<template #footer-right>
<VButton
color="primary"
raised
>
Action
</VButton>
</template>
</VCardAdvanced>
</div>
<div class="column is-4">
<VCardAdvanced radius="smooth">
<template #header-left>
<div class="tags">
<VTag
label="Business"
color="solid"
rounded
/>
</div>
</template>
<template #header-right>
<VButton
color="primary"
raised
>
Action
</VButton>
</template>
<template #content>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quibusnam
praeteritis? At multis se probavit. Quoniam, si dis placet, ab Epicuro loqui
discimus. Et ille ridens.
</p>
</template>
<template #footer-left>
<VBlock
title="Anna B."
subtitle="UX Designer"
center
>
<template #icon>
<VAvatar
picture="https://media.cssninja.io/content/avatars/19.jpg"
badge="/images/icons/flags/germany.svg"
/>
</template>
</VBlock>
</template>
<template #footer-right>
<VAvatarStack
:avatars="userStack2"
:limit="1"
size="small"
/>
</template>
</VCardAdvanced>
</div>
<div class="column is-4">
<VCardAdvanced radius="rounded">
<template #header-left>
<h3 class="title is-6">
A Card Title
</h3>
</template>
<template #header-right>
<WidgetDropdown />
</template>
<template #content>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quibusnam
praeteritis? At multis se probavit. Quoniam, si dis placet, ab Epicuro loqui
discimus. Et ille ridens.
</p>
</template>
<template #footer-left>
<VBlock
title="Anna B."
subtitle="UX Designer"
center
>
<template #icon>
<VAvatar
picture="https://media.cssninja.io/content/avatars/19.jpg"
badge="/images/icons/flags/germany.svg"
/>
</template>
</VBlock>
</template>
<template #footer-right>
<VAvatarStack
:avatars="userStack2"
:limit="1"
size="small"
/>
</template>
</VCardAdvanced>
</div>
<div class="column is-12 mt-5">
<DocumentationMeta
name="VCardAdvanced"
:meta="VCardAdvancedMeta"
/>
</div>
</div>
</div>
</template>

352
src/pages/components/card/index.vue Normal file
View File

@@ -0,0 +1,352 @@
<script setup lang="ts">
import { popovers } from '/@src/data/users/userPopovers'
import { VCardMeta } from '/@src/data/documentation/components-meta'
const markdownContainer = ref<HTMLElement>()
const toc = useMarkdownToc(markdownContainer)
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'VCard'
})
useHead({
title: 'VCard - Components - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'VCard',
to: '/components/card/',
},
]"
/>
<div class="columns is-multiline">
<div
ref="markdownContainer"
:class="[toc.length > 0 ? 'is-9' : 'is-12']"
class="column doc-column stay-focus-container"
>
<!--Basic Cards-->
<CardBaseDocumentation />
<div class="columns is-multiline mb-6">
<div class="column is-4">
<VCard radius="smooth">
<h3 class="title is-5 mb-2">
I have smooth radius
</h3>
<p>
I can be used as is in any layout. VCards are simple containers that can
hold any type of content.
</p>
</VCard>
</div>
<div class="column is-4">
<VCard>
<h3 class="title is-5 mb-2">
I have regular radius
</h3>
<p>
I can be used as is in any layout. VCards are simple containers that can
hold any type of content.
</p>
</VCard>
</div>
<div class="column is-4">
<VCard radius="rounded">
<h3 class="title is-5 mb-2">
I have rounded radius
</h3>
<p>
I can be used as is in any layout. VCards are simple containers that can
hold any type of content.
</p>
</VCard>
</div>
</div>
<!--Elevated Cards-->
<CardElevatedDocumentation />
<div class="columns is-multiline mb-6">
<div class="column is-4 mb-2">
<VCard
radius="smooth"
elevated
>
<h3 class="title is-5 mb-2">
Raised VCard
</h3>
<p>
I can be used as is in any layout. VCards are simple containers that can
hold any type of content.
</p>
</VCard>
</div>
<div class="column is-4">
<VCard elevated>
<h3 class="title is-5 mb-2">
Raised VCard
</h3>
<p>
I can be used as is in any layout. VCards are simple containers that can
hold any type of content.
</p>
</VCard>
</div>
<div class="column is-4">
<VCard
radius="rounded"
elevated
>
<h3 class="title is-5 mb-2">
Raised VCard
</h3>
<p>
I can be used as is in any layout. VCards are simple containers that can
hold any type of content.
</p>
</VCard>
</div>
</div>
<!--Colored Cards-->
<CardColorsDocumentation />
<div class="columns is-multiline mb-6">
<div class="column is-4">
<VCard
radius="smooth"
color="primary"
>
<h3 class="title is-5 mb-2">
Primary VCard
</h3>
<p>
I can be used as is in any layout. VCards are simple containers that can
hold any type of content.
</p>
</VCard>
</div>
<div class="column is-4">
<VCard color="secondary">
<h3 class="title is-5 mb-2">
Secondary VCard
</h3>
<p>
I can be used as is in any layout. VCards are simple containers that can
hold any type of content.
</p>
</VCard>
</div>
<div class="column is-4">
<VCard
radius="rounded"
color="info"
>
<h3 class="title is-5 mb-2">
Info VCard
</h3>
<p>
I can be used as is in any layout. VCards are simple containers that can
hold any type of content.
</p>
</VCard>
</div>
<div class="column is-4">
<VCard
radius="smooth"
color="success"
>
<h3 class="title is-5 mb-2">
Success VCard
</h3>
<p>
I can be used as is in any layout. VCards are simple containers that can
hold any type of content.
</p>
</VCard>
</div>
<div class="column is-4">
<VCard color="warning">
<h3 class="title is-5 mb-2">
Warning VCard
</h3>
<p>
I can be used as is in any layout. VCards are simple containers that can
hold any type of content.
</p>
</VCard>
</div>
<div class="column is-4">
<VCard
radius="rounded"
color="danger"
>
<h3 class="title is-5 mb-2">
Danger VCard
</h3>
<p>
I can be used as is in any layout. VCards are simple containers that can
hold any type of content.
</p>
</VCard>
</div>
</div>
<!--Structured Cards-->
<CardStructuredDocumentation />
<div class="columns is-multiline mb-6">
<div class="column is-4">
<VCard
radius="smooth"
elevated
>
<div class="card-head">
<VBlock
title="Greta K."
subtitle="Sales Manager"
center
class="no-margin"
>
<template #icon>
<Tippy
class="has-help-cursor"
interactive
:offset="[0, 10]"
placement="top-start"
>
<VAvatar
picture="https://media.cssninja.io/content/avatars/19.jpg"
badge="/images/icons/flags/germany.svg"
/>
<template #content>
<UserPopoverContent :user="popovers.user19" />
</template>
</Tippy>
</template>
</VBlock>
<UserCardDropdown />
</div>
<div class="card-inner">
<p>
I can be used as is in any layout. VCards are simple containers that can
hold any type of content.
</p>
</div>
</VCard>
</div>
<div class="column is-4">
<VCard elevated>
<div class="card-head">
<VBlock
title="Greta K."
subtitle="Sales Manager"
center
class="no-margin"
>
<template #icon>
<Tippy
class="has-help-cursor"
interactive
:offset="[0, 10]"
placement="top-start"
>
<VAvatar
picture="https://media.cssninja.io/content/avatars/19.jpg"
badge="/images/icons/flags/germany.svg"
/>
<template #content>
<UserPopoverContent :user="popovers.user19" />
</template>
</Tippy>
</template>
</VBlock>
<UserCardDropdown />
</div>
<div class="card-inner">
<p>
I can be used as is in any layout. VCards are simple containers that can
hold any type of content.
</p>
</div>
</VCard>
</div>
<div class="column is-4">
<VCard
radius="rounded"
elevated
>
<div class="card-head">
<VBlock
title="Greta K."
subtitle="Sales Manager"
center
class="no-margin"
>
<template #icon>
<Tippy
class="has-help-cursor"
interactive
:offset="[0, 10]"
placement="top-start"
>
<VAvatar
picture="https://media.cssninja.io/content/avatars/19.jpg"
badge="/images/icons/flags/germany.svg"
/>
<template #content>
<UserPopoverContent :user="popovers.user19" />
</template>
</Tippy>
</template>
</VBlock>
<UserCardDropdown />
</div>
<div class="card-inner">
<p>
I can be used as is in any layout. VCards are simple containers that can
hold any type of content.
</p>
</div>
</VCard>
</div>
</div>
<DocumentationMeta
name="VCard"
:meta="VCardMeta"
/>
</div>
<div
v-if="toc.length"
class="column is-3 toc-column"
>
<DocumentationToc :toc="toc" />
</div>
</div>
</div>
</template>

117
src/pages/components/card/media.vue Normal file
View File

@@ -0,0 +1,117 @@
<script setup lang="ts">
import { VCardMediaMeta } from '/@src/data/documentation/components-meta'
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'VCardMedia'
})
useHead({
title: 'VCardMedia - Components - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'Cards',
},
{
label: 'VCardMedia',
to: '/components/card/media',
},
]"
/>
<div class="columns is-multiline">
<div class="column is-12">
<!--VCardMedia-->
<VCardMediaDocumentation />
</div>
<div class="column is-4">
<VCardMedia
image="https://media.cssninja.io/content/photos/apps/1.jpg"
avatar="https://media.cssninja.io/content/avatars/19.jpg"
badge="/images/icons/flags/germany.svg"
title="Greta K."
subtitle="Sales Manager"
>
<p class="pb-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ego vero isti,
inquam, permitto. Id Sextilius factum negabat. Apparet statim, quae sint
officia, quae actiones. Sed hoc sane concedamus...
</p>
<a
class="action-link"
tabindex="0"
>Read More</a>
</VCardMedia>
</div>
<div class="column is-4">
<VCardMedia
image="https://media.cssninja.io/content/photos/apps/2.png"
avatar="https://media.cssninja.io/content/avatars/23.jpg"
badge="/images/icons/flags/united-states-of-america.svg"
title="Irina V."
subtitle="Project Manager"
>
<p class="pb-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ego vero isti,
inquam, permitto. Id Sextilius factum negabat. Apparet statim, quae sint
officia, quae actiones. Sed hoc sane concedamus...
</p>
<a
class="action-link"
tabindex="0"
>Read More</a>
</VCardMedia>
</div>
<div class="column is-4">
<VCardMedia
image="https://media.cssninja.io/content/photos/apps/3.png"
avatar="https://media.cssninja.io/content/avatars/12.jpg"
badge="/images/icons/flags/united-states-of-america.svg"
title="Joshua S."
subtitle="Backend Developer"
>
<p class="pb-4">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ego vero isti,
inquam, permitto. Id Sextilius factum negabat. Apparet statim, quae sint
officia, quae actiones. Sed hoc sane concedamus...
</p>
<a
class="action-link"
tabindex="0"
>Read More</a>
</VCardMedia>
</div>
<div class="column is-12 mt-5">
<DocumentationMeta
name="VCardMedia"
:meta="VCardMediaMeta"
/>
</div>
</div>
</div>
</template>

103
src/pages/components/card/social.vue Normal file
View File

@@ -0,0 +1,103 @@
<script setup lang="ts">
import { VCardSocialMeta } from '/@src/data/documentation/components-meta'
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'VCardSocial'
})
useHead({
title: 'VCardSocial - Components - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'Cards',
},
{
label: 'VCardSocial',
to: '/components/card/social',
},
]"
/>
<div class="columns is-multiline">
<div class="column is-12">
<!--VCard Social-->
<VCardSocialDocumentation />
</div>
<div class="column is-4">
<VCardSocial
title="Featured Tweet"
network="twitter"
avatar="https://media.cssninja.io/content/avatars/19.jpg"
username="@gretak"
:hashtags="['#bulmaio', '#css', '#responsive']"
share-label="Retweet"
like-label="Save"
>
<span class="dark-inverted">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis
mauris.
</span>
</VCardSocial>
</div>
<div class="column is-4">
<VCardSocial
title="Featured Story"
network="instagram"
avatar="https://media.cssninja.io/content/avatars/5.jpg"
username="Mary L."
:hashtags="['#bulmaio', '#css', '#responsive']"
>
<span class="dark-inverted">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis
mauris.
</span>
</VCardSocial>
</div>
<div class="column is-4">
<VCardSocial
title="Featured Post"
network="facebook"
avatar="https://media.cssninja.io/content/avatars/36.jpg"
username="Benoit L."
:hashtags="['#bulmaio', '#css', '#responsive']"
>
<template #default>
<span class="dark-inverted">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec
iaculis mauris.
</span>
</template>
</VCardSocial>
</div>
<div class="column is-12 mt-5">
<DocumentationMeta
name="VCardSocial"
:meta="VCardSocialMeta"
/>
</div>
</div>
</div>
</template>

71
src/pages/components/checkbox.vue Normal file
View File

@@ -0,0 +1,71 @@
<script setup lang="ts">
import { VCheckboxMeta } from '/@src/data/documentation/components-meta'
const markdownContainer = ref<HTMLElement>()
const toc = useMarkdownToc(markdownContainer)
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'VCheckbox'
})
useHead({
title: 'VCheckbox - Forms Elements - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'Switches',
},
{
label: 'VCheckbox',
to: '/components/checkbox',
},
]"
/>
<div class="columns">
<div
ref="markdownContainer"
:class="[toc.length > 0 ? 'is-9' : 'is-12']"
class="column doc-column stay-focus-container"
>
<!-- VCheckbox -->
<CheckboxOutlinedDocumentation />
<CheckboxOutlinedCircleDocumentation />
<CheckboxSolidDocumentation />
<CheckboxSolidCircleDocumentation />
<DocumentationMeta
name="VCheckbox"
:meta="VCheckboxMeta"
/>
</div>
<div
v-if="toc.length"
class="column is-3 toc-column"
>
<DocumentationToc :toc="toc" />
</div>
</div>
</div>
</template>

87
src/pages/components/collapse.vue Normal file
View File

@@ -0,0 +1,87 @@
<script setup lang="ts">
import {
VCollapseMeta,
VCollapseModelMeta,
} from '/@src/data/documentation/components-meta'
const data = [
{
title: 'Accordion Item 1',
content: 'Sed ut perspiciatis unde omnis iste ...',
},
{
title: 'Accordion Item 2',
content: 'Sed ut perspiciatis unde omnis iste ...',
},
{
title: 'Accordion Item 3',
content: 'Sed ut perspiciatis unde omnis iste ...',
},
]
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'VCollapse'
})
useHead({
title: 'VCollapse - Components - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'Accordions',
},
{
label: 'VCollapse',
to: '/components/collapse',
},
]"
/>
<div class="columns is-multiline">
<div class="column is-12">
<!--Collapse-->
<AccordionCollapseDocumentation />
</div>
<div class="column is-6">
<VCollapse :items="data" />
</div>
<div class="column is-6">
<VCollapse
:items="data"
with-chevron
/>
</div>
<div class="column is-12">
<DocumentationMeta
name="VCollapse"
:meta="VCollapseMeta"
/>
<DocumentationMeta
name="VCollapseModel"
:meta="VCollapseModelMeta"
/>
</div>
</div>
</div>
</template>

114
src/pages/components/colors.vue Normal file
View File

@@ -0,0 +1,114 @@
<script setup lang="ts">
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'Colors'
})
useHead({
title: 'Colors - Components - Vuero',
})
const bulmaColors = [
'primary',
'secondary',
'danger',
'success',
'info',
'warning',
'dark',
'link',
]
const additionalColors = [
'purple',
'blue',
'red',
'orange',
'yellow',
'pink',
'green',
'lime',
]
const layoutColors = [
'dark-sidebar',
'body-color',
'background-grey',
// 'medium-grey',
// 'light-grey',
// 'primary-grey',
// 'muted-grey',
'fade-grey',
// 'widget-grey',
// 'smoke-white',
'white',
// 'border',
// 'placeholder',
'light-text',
]
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'Colors',
to: '/components/colors',
},
]"
/>
<div class="columns is-multiline">
<div class="column is-12">
<!--Theme Colors-->
<ColorsDocumentation />
<div class="columns is-multiline mb-6">
<div
v-for="color in bulmaColors"
:key="color"
class="column is-4"
>
<DocumentationColor :color />
</div>
</div>
<!-- <ThemeDocumentation /> -->
<div class="columns is-multiline mb-6">
<div
v-for="color in layoutColors"
:key="color"
class="column is-4"
>
<DocumentationColor :color />
</div>
</div>
<!-- <ThemingDocumentation /> -->
<div class="columns is-multiline mb-6">
<div
v-for="color in additionalColors"
:key="color"
class="column is-4"
>
<DocumentationColor :color />
</div>
</div>
</div>
</div>
</div>
</template>

73
src/pages/components/content.vue Normal file
View File

@@ -0,0 +1,73 @@
<script setup lang="ts">
const markdownContainer = ref<HTMLElement>()
const toc = useMarkdownToc(markdownContainer)
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'Content'
})
useHead({
title: 'Content - Components - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'Content',
to: '/components/content',
},
]"
/>
<div class="columns">
<div
ref="markdownContainer"
:class="[toc.length > 0 ? 'is-9' : 'is-12']"
class="column doc-column stay-focus-container"
>
<!--Typography-->
<ContentUnorderedListsDocumentation />
<!--Typography-->
<ContentOrderedListsDocumentation />
<!--Typography-->
<ContentTitlesDocumentation />
<!--Typography-->
<ContentSubtitlesDocumentation />
<!--Typography-->
<ContentBlockquotesDocumentation />
<!--Typography-->
<ContentDividersDocumentation />
<!--Typography-->
<ContentTablesDocumentation />
</div>
<div
v-if="toc.length"
class="column is-3 toc-column"
>
<DocumentationToc :toc="toc" />
</div>
</div>
</div>
</template>

84
src/pages/components/dropdown.vue Normal file
View File

@@ -0,0 +1,84 @@
<script setup lang="ts">
import { VDropdownMeta } from '/@src/data/documentation/components-meta'
const markdownContainer = ref<HTMLElement>()
const toc = useMarkdownToc(markdownContainer)
const pageTitle = useVueroContext<string>('page-title')
// pageTitle.value = 'VDropdown'
onMounted(() => {
pageTitle.value = 'VDropdown'
})
useHead({
title: 'VDropdown - Components - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'VDropdown',
to: '/components/dropdown',
},
]"
/>
<div class="columns">
<div
ref="markdownContainer"
:class="[toc.length > 0 ? 'is-9' : 'is-12']"
class="column doc-column stay-focus-container"
>
<!--Dropdown-->
<DropdownDocumentation />
<!--Dropdown-->
<DropdownColorsDocumentation />
<!--Dropdown-->
<DropdownButtonSlotDocumentation />
<!--Dropdown-->
<DropdownButtonHoverDocumentation />
<!--Dropdown-->
<DropdownModernDocumentation />
<!--Dropdown-->
<DropdownWithIconsDocumentation />
<!--Dropdown-->
<DropdownWithImagesDocumentation />
<DocumentationMeta
name="VDropdown"
:meta="VDropdownMeta"
/>
<!--Artificial Spacing-->
<div class="demo-spacer" />
</div>
<div
v-if="toc.length"
class="column is-3 toc-column"
>
<DocumentationToc :toc="toc" />
</div>
</div>
</div>
</template>

67
src/pages/components/flex.vue Normal file
View File

@@ -0,0 +1,67 @@
<script setup lang="ts">
import { VFlexMeta, VFlexItemMeta } from '/@src/data/documentation/components-meta'
const markdownContainer = ref<HTMLElement>()
const toc = useMarkdownToc(markdownContainer)
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'VFlex'
})
useHead({
title: 'VFlex - Components - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'VFlex',
to: '/components/flex',
},
]"
/>
<div class="columns">
<div
ref="markdownContainer"
:class="[toc.length > 0 ? 'is-9' : 'is-12']"
class="column doc-column stay-focus-container"
>
<!--VFlex-->
<VFlexBaseDocumentation />
<DocumentationMeta
name="VFlex"
:meta="VFlexMeta"
/>
<DocumentationMeta
name="VFlexItem"
:meta="VFlexItemMeta"
/>
</div>
<div
v-if="toc.length"
class="column is-3 toc-column"
>
<DocumentationToc :toc="toc" />
</div>
</div>
</div>
</template>

273
src/pages/components/flextable/columns.vue Normal file
View File

@@ -0,0 +1,273 @@
<script setup lang="ts">
import { flexRowsContacts, flexRowsAdvanced } from '/@src/data/documentation/table'
const markdownContainer = ref<HTMLElement>()
const toc = useMarkdownToc(markdownContainer)
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'Customize columns'
})
useHead({
title: 'Customize columns - VFlexTable - Components - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'VFlexTable',
to: '/components/flextable/',
},
{
label: 'Customize columns',
to: '/components/flextable/columns',
},
]"
/>
<div class="columns">
<div
ref="markdownContainer"
:class="[toc.length > 0 ? 'is-9' : 'is-12']"
class="column doc-column stay-focus-container"
>
<VFlexTableColumnsDocumentation />
<div class="mt-4">
<VFlexTable
rounded
:data="flexRowsContacts"
:columns="{
id: {
label: 'Identifier (inverted)',
inverted: true,
format: (value) => `ID-0000${value}`,
},
company: {
label: 'Company (bold)',
bold: true,
},
type: 'Type',
status: {
label: 'Status (center)',
align: 'center',
},
contacts: {
label: 'Contacts (end)',
align: 'end',
format: (value) => value.map((r: any) => r.initials).join(', '),
},
}"
/>
</div>
<DocumentationDivider
id="grow"
title="Grow"
/>
<div class="mt-4">
<VFlexTable
rounded
:data="flexRowsContacts"
:columns="{
id: {
label: 'Identifier',
inverted: true,
format: (value) => `ID-0000${value}`,
},
company: {
label: 'Company',
bold: true,
},
type: 'Type',
status: {
label: 'Status',
align: 'center',
},
contacts: {
label: 'Contacts (grow)',
align: 'end',
grow: true,
format: (value) => value.map((r: any) => r.initials).join(', '),
},
}"
/>
</div>
<DocumentationDivider
id="grow-lg"
title="Grow (large)"
/>
<div class="mt-4">
<VFlexTable
rounded
:data="flexRowsContacts"
:columns="{
id: {
label: 'Identifier',
inverted: true,
format: (value) => `ID-0000${value}`,
},
company: {
label: 'Company',
bold: true,
},
type: 'Type',
status: {
label: 'Status',
align: 'center',
},
contacts: {
label: 'Contacts (grow: lg)',
align: 'end',
grow: 'lg',
format: (value) => value.map((r: any) => r.initials).join(', '),
},
}"
/>
</div>
<DocumentationDivider
id="grow-xl"
title="Grow (xl)"
/>
<div class="mt-4">
<VFlexTable
rounded
:data="flexRowsContacts"
:columns="{
id: {
label: 'Identifier',
inverted: true,
format: (value) => `ID-0000${value}`,
},
company: {
label: 'Company',
bold: true,
},
type: 'Type',
status: {
label: 'Status',
align: 'center',
},
contacts: {
label: 'Contacts (grow: xl)',
align: 'end',
grow: 'xl',
format: (value) => value.map((r: any) => r.initials).join(', '),
},
}"
/>
</div>
<VFlexTableScrollableDocumentation class="mt-6" />
<div class="mt-4">
<VFlexTable
rounded
print-objects
:data="flexRowsContacts"
:columns="{
id: {
label: 'Identifier',
inverted: true,
format: (value) => `ID-0000${value}`,
},
company: {
label: 'Company',
bold: true,
grow: true,
},
contacts: {
label: 'Contacts (scrollX & scrollY)',
grow: true,
scrollX: true,
scrollY: true,
cellClass: 'max-h-280',
},
}"
/>
</div>
<VFlexTableMediaDocumentation class="mt-6" />
<div class="mt-4">
<VFlexTable
rounded
:data="flexRowsAdvanced"
:columns="{
username: {
label: 'User (media)',
grow: true,
media: true,
},
position: 'Position',
status: {
label: 'Status',
},
contacts: {
label: 'Contacts',
align: 'end',
format: (value) => value.map((r: any) => r.initials).join(', '),
},
}"
>
<template #body-cell="{ row, column, value }">
<template v-if="column.key === 'username'">
<VAvatar
size="medium"
:picture="row.picture"
:badge="row.badge"
/>
<div>
<span class="item-name">{{ row.name }}</span>
<span class="item-meta">
<strong>{{ value }}</strong>
</span>
</div>
</template>
<VPlaceload
v-else-if="column.key === 'status'"
mobile-width="30%"
/>
<VAvatarStack
v-else-if="column.key === 'contacts'"
class="is-pushed-mobile"
size="small"
:avatars="row.contacts"
:title="value"
:limit="3"
/>
</template>
</VFlexTable>
</div>
</div>
<div
v-if="toc.length"
class="column is-3 toc-column"
>
<DocumentationToc :toc="toc" />
</div>
</div>
</div>
</template>

170
src/pages/components/flextable/index.vue Normal file
View File

@@ -0,0 +1,170 @@
<script setup lang="ts">
import { flexRowsBasic, flexRowsContacts } from '/@src/data/documentation/table'
import { VFlexTableMeta } from '/@src/data/documentation/components-meta'
const markdownContainer = ref<HTMLElement>()
const toc = useMarkdownToc(markdownContainer)
const rowClick = (row: any) => {
console.log(row)
}
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'VFlexTable'
})
useHead({
title: 'VFlexTable - Components - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'VFlexTable',
to: '/components/flextable/',
},
]"
/>
<div class="columns">
<div
ref="markdownContainer"
:class="[toc.length > 0 ? 'is-9' : 'is-12']"
class="column doc-column stay-focus-container"
>
<VFlexTableBaseDocumentation />
<div class="mt-4 mb-4">
<VFlexTable :data="flexRowsBasic" />
</div>
<DocumentationDivider
id="no-header"
title="Without header"
/>
<div class="mt-4">
<VFlexTable
:data="flexRowsBasic"
no-header
/>
</div>
<DocumentationDivider
id="separators"
title="With separators"
/>
<div class="mt-4">
<VFlexTable
:data="flexRowsBasic"
separators
/>
</div>
<DocumentationDivider
id="rounded"
title="Rounded"
/>
<div class="mt-4">
<VFlexTable
:data="flexRowsBasic"
rounded
/>
</div>
<DocumentationDivider
id="compact"
title="Compact"
/>
<div class="mt-4 mb-4">
<VFlexTable
:data="flexRowsBasic"
compact
/>
</div>
<DocumentationDivider
id="all-options"
title="All options together"
/>
<div class="mt-4">
<VFlexTable
:data="flexRowsBasic"
no-header
compact
rounded
separators
clickable
@row-click="rowClick"
/>
</div>
<DocumentationDivider
id="subtable"
title="SubTable"
/>
<div class="mt-4">
<VFlexTable
:data="flexRowsBasic"
subtable
/>
</div>
<VFlexTablePrintObjectsDocumentation class="mt-6" />
<div class="mt-4">
<VFlexTable
rounded
:data="flexRowsContacts"
print-objects
/>
</div>
<DocumentationDivider
id="without-print-object"
title="Without print-objects"
/>
<div class="mt-4">
<VFlexTable
rounded
:data="flexRowsContacts"
/>
</div>
<DocumentationMeta
name="VFlexTable"
:meta="VFlexTableMeta"
/>
</div>
<div
v-if="toc.length"
class="column is-3 toc-column"
>
<DocumentationToc :toc="toc" />
</div>
</div>
</div>
</template>

221
src/pages/components/flextable/render.vue Normal file
View File

@@ -0,0 +1,221 @@
<script setup lang="ts">
import { flexRowsAdvanced } from '/@src/data/documentation/table'
import VTag from '/@src/components/base/VTag.vue'
import FlexTableDropdown from '/@src/components/partials/dropdowns/FlexTableDropdown.vue'
import VFlexTableSortColumn from '/@src/components/base/VFlexTableSortColumn.vue'
import VAvatarStack from '/@src/components/base/VAvatarStack.vue'
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'Render functions (advanced)'
})
useHead({
title: 'Render functions (advanced) - VFlexTable - Components - Vuero',
})
const collator = new Intl.Collator('en')
const numberFormat = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
})
const router = useRoute()
const sortedData = computed(() => {
switch (router.query.sort) {
case 'username:asc': {
return [...flexRowsAdvanced].sort((a, b) =>
collator.compare(a.username, b.username),
)
}
case 'username:desc': {
return [...flexRowsAdvanced].sort((a, b) =>
collator.compare(b.username, a.username),
)
}
case 'annual-earnings:asc': {
return [...flexRowsAdvanced].sort((a, b) =>
a.annualEarnings > b.annualEarnings ? 1 : -1,
)
}
case 'annual-earnings:desc': {
return [...flexRowsAdvanced].sort((a, b) =>
a.annualEarnings > b.annualEarnings ? -1 : 1,
)
}
case 'position:asc': {
return [...flexRowsAdvanced].sort((a, b) =>
collator.compare(a.position, b.position),
)
}
case 'position:desc': {
return [...flexRowsAdvanced].sort((a, b) =>
collator.compare(b.position, a.position),
)
}
case 'status:asc': {
return [...flexRowsAdvanced].sort((a, b) => collator.compare(a.status, b.status))
}
case 'status:desc': {
return [...flexRowsAdvanced].sort((a, b) => collator.compare(b.status, a.status))
}
case 'contacts:asc': {
return [...flexRowsAdvanced].sort((a, b) =>
a.contacts.length > b.contacts.length ? 1 : -1,
)
}
case 'contacts:desc': {
return [...flexRowsAdvanced].sort((a, b) =>
a.contacts.length > b.contacts.length ? -1 : 1,
)
}
default: {
return flexRowsAdvanced
}
}
})
// this is the how rows and columns are rendered
const exampleColumns = {
username: {
bold: true,
// we can use custom render function for column heading
renderHeader: () =>
h(VFlexTableSortColumn, {
label: 'Name',
id: 'username',
}),
},
position: {
renderHeader: () =>
h(VFlexTableSortColumn, {
label: 'Position',
id: 'position',
}),
},
annualEarnings: {
inverted: true,
format: (value: any) => numberFormat.format(value),
// we can use custom render function for column heading
renderHeader: () =>
h(VFlexTableSortColumn, {
label: 'Revenue',
id: 'annual-earnings',
}),
},
status: {
label: 'Status',
// we can use custom render function for each rows
renderRow: (row: any) =>
h(
VTag,
{
rounded: true,
color:
row.status === 'Active'
? 'success'
: row.status === 'New'
? 'info'
: row.status === 'Suspended'
? 'orange'
: undefined,
},
// that notation is to render content in the default slot
{
default() {
return `${row.status}`
},
},
),
// we can use custom render function for column heading
renderHeader: () =>
h(VFlexTableSortColumn, {
label: 'Status',
id: 'status',
}),
},
contacts: {
renderHeader: () =>
h(
'span',
{},
h(VFlexTableSortColumn, {
label: 'Contacts',
id: 'contacts',
}),
),
renderRow: (row: any) =>
// We can render custom components and set props
h(VAvatarStack, {
class: 'is-pushed-mobile',
size: 'small',
avatars: row.contacts,
limit: 3,
}),
},
actions: {
label: '',
align: 'end',
renderRow: (row: any) =>
h(FlexTableDropdown, {
// We can catch all events from vue
onView: () => {
console.log('viewing', row)
},
onProjects: () => {
console.log('projects', row)
},
onSchedule: () => {
console.log('schedule', row)
},
onRemove: () => {
console.log('remove', row)
},
}),
},
} as const
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'VFlexTable',
to: '/components/flextable/',
},
{
label: 'Render functions (advanced)',
to: '/components/flextable/render',
},
]"
/>
<div class="columns">
<div class="column is-12">
<!--Flex Table-->
<VFlexTableWithRenderDocumentation class="mt-5" />
<div class="mt-4">
<!--VFlexTabe-->
<VFlexTable
:data="sortedData"
:columns="exampleColumns"
rounded
/>
</div>
</div>
</div>
</div>
</template>

362
src/pages/components/flextable/slots.vue Normal file
View File

@@ -0,0 +1,362 @@
<script setup lang="ts">
import { flexRowsContacts } from '/@src/data/documentation/table'
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'Slots usage'
})
useHead({
title: 'Slots usage - VFlexTable - Components - Vuero',
})
// this is a local directive (it begins with V..., usable with v-focus)
// that is used to force the focus on input when mounted
const VFocus = {
mounted(el: HTMLInputElement) {
el.focus()
},
}
const selectedRows = ref<number[]>([])
const editCompanyIndex = ref<number>()
const isAllSelected = computed(
() => flexRowsContacts.length === selectedRows.value.length,
)
const columns = {
select: {
label: '',
cellClass: 'is-flex-grow-0',
},
company: {
label: 'Company',
grow: true,
},
type: 'Type',
industry: 'Industry',
status: 'Status',
contacts: {
label: '',
align: 'end',
},
} as const
function toggleSelection() {
if (isAllSelected.value) {
selectedRows.value = []
}
else {
selectedRows.value = flexRowsContacts.map(item => item.id)
}
}
function clickOnRow(row: any) {
if (selectedRows.value.includes(row.id)) {
selectedRows.value = selectedRows.value.filter(i => i !== row.id)
}
else {
selectedRows.value = [...selectedRows.value, row.id]
}
}
function contactUser(row: any) {
alert(`Contacting "${row.company}" ...`)
}
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'VFlexTable',
to: '/components/flextable/',
},
{
label: 'Slots usage',
to: '/components/flextable/slots',
},
]"
/>
<div class="columns">
<div class="column is-12">
<!--Flex Table-->
<VFlexTableWithSlotsDocumentation class="mt-5" />
<div class="mt-4">
<!--VFlexTabe-->
<VFlexTable
:data="flexRowsContacts"
:columns="columns"
compact
rounded
reactive
>
<!-- header-column slot -->
<template #header-column="{ column }">
<VCheckbox
v-if="column.key === 'select'"
class="ml-2 mr-3"
:checked="isAllSelected"
name="all_selected"
color="primary"
square
@click="toggleSelection"
/>
</template>
<!-- body-cell slot -->
<template #body-cell="{ row, column, index, value }">
<VCheckbox
v-if="column.key === 'select'"
v-model="selectedRows"
:value="row.id"
name="selection"
square
/>
<template v-else-if="column.key === 'company'">
<VControl v-if="editCompanyIndex === index">
<VField>
<input
v-model="row[column.key]"
v-focus
type="text"
class="input is-primary-focus"
@blur="editCompanyIndex = undefined"
@keydown.enter.prevent="editCompanyIndex = undefined"
>
</VField>
</VControl>
<a
v-else
class="is-overlay-desktop is-flex is-pushed-mobile is-align-items-center mx-3-desktop edit-icon-link is-clickable"
tabindex="0"
role="button"
@keydown.enter.prevent="editCompanyIndex = index"
@click="editCompanyIndex = index"
>
{{ value }}
<VIcon
class="is-inline ml-1"
icon="lucide:edit-3"
role="img"
aria-label="edit"
/>
</a>
</template>
<VTag
v-else-if="column.key === 'status'"
rounded
:color="
value === 'Suspended'
? 'orange'
: value === 'New'
? 'info'
: value === 'Active'
? 'primary'
: undefined
"
>
{{ value }}
</VTag>
<VAction
v-else-if="column.key === 'contacts'"
hoverable
@click="contactUser(row)"
>
Contact manager
</VAction>
</template>
</VFlexTable>
</div>
<DocumentationDivider
id="with-reactive"
title="With reactive props"
/>
<div class="mt-4">
<VFlexTable
:data="flexRowsContacts"
:columns="columns"
compact
rounded
reactive
>
<template #header-column="{ column }">
<VCheckbox
v-if="column.key === 'select'"
class="ml-2 mr-3"
:checked="isAllSelected"
name="all_selected"
color="primary"
square
@click="toggleSelection"
/>
</template>
<template #body-cell="{ row, column, value }">
<VCheckbox
v-if="column.key === 'select'"
v-model="selectedRows"
:value="row.id"
name="selection"
square
/>
<VTag
v-else-if="column.key === 'status'"
rounded
:color="
value === 'Suspended'
? 'orange'
: value === 'New'
? 'info'
: value === 'Active'
? 'primary'
: undefined
"
>
{{ value }}
</VTag>
<VAction
v-if="column.key === 'contacts'"
hoverable
@click="contactUser(row)"
>
Contact manager
</VAction>
</template>
</VFlexTable>
</div>
<DocumentationDivider
id="without-reactive"
title="Without reactive props"
/>
<div class="mt-4">
<VFlexTable
:data="flexRowsContacts"
:columns="columns"
compact
rounded
>
<template #header-column="{ column }">
<VCheckbox
v-if="column.key === 'select'"
class="ml-2 mr-3"
:checked="isAllSelected"
name="all_selected"
color="primary"
square
@click="toggleSelection"
/>
</template>
<template #body-cell="{ row, column, value }">
<VCheckbox
v-if="column.key === 'select'"
v-model="selectedRows"
:value="row.id"
name="selection"
square
/>
<VTag
v-else-if="column.key === 'status'"
rounded
:color="
value === 'Suspended'
? 'orange'
: value === 'New'
? 'info'
: value === 'Active'
? 'primary'
: undefined
"
>
{{ value }}
</VTag>
<VAction
v-else-if="column.key === 'contacts'"
hoverable
@click="contactUser(row)"
>
Contact manager
</VAction>
</template>
</VFlexTable>
</div>
<DocumentationDivider
id="with-clickable"
title="With clickable props"
/>
<div class="mt-4">
<VFlexTable
:data="flexRowsContacts"
:columns="columns"
clickable
compact
rounded
@row-click="clickOnRow"
>
<template #header-column="{ column }">
<VCheckbox
v-if="column.key === 'select'"
class="ml-2 mr-3"
:checked="isAllSelected"
name="all_selected"
color="primary"
square
@click="toggleSelection"
/>
</template>
<template #body-cell="{ row, column, value }">
<VCheckbox
v-if="column.key === 'select'"
v-model="selectedRows"
:value="row.id"
name="selection"
square
/>
<VTag
v-else-if="column.key === 'status'"
rounded
:color="
value === 'Suspended'
? 'orange'
: value === 'New'
? 'info'
: value === 'Active'
? 'primary'
: undefined
"
>
{{ value }}
</VTag>
<VAction
v-else-if="column.key === 'contacts'"
@click.stop="contactUser(row)"
>
Contact manager
</VAction>
</template>
</VFlexTable>
</div>
</div>
</div>
</div>
</template>

560
src/pages/components/flextable/wrapper/async.vue Normal file
View File

@@ -0,0 +1,560 @@
<script setup lang="ts">
import type { VFlexTableWrapperDataResolver } from '/@src/components/base/VFlexTableWrapper.vue'
const { isMobileScreen } = useScreenSize()
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'Async data (advanced)'
})
useHead({
title: 'Async data (advanced) - VFlexTableWrapper - Vuero',
})
// the total data will be set by the fetchData function
const total = ref(0)
// we don't have to set "searchable" parameter
// this will be handled by the fetchData function
const columns = {
name: {
label: 'Username',
media: true,
grow: true,
sortable: true,
},
location: {
label: 'Location',
sortable: true,
},
position: {
label: 'Positions',
sortable: true,
},
actions: {
label: '',
align: 'end',
},
} as const
// this is an example of useXxx function that we can reuse across components.
// it will return writable computeds that works like ref values
// but the values will be sync with the route query params
function useQueryParam() {
const router = useRouter()
const route = useRoute()
// when the params match those value,
// we don't set their value to the query params
const defaultSearch = ''
const defaultSort = ''
const defaultLimit = 10
const defaultPage = 1
const searchTerm = computed({
get: () => {
let searchTermQuery: string
// read "search" from the query params
if (Array.isArray(route?.query?.search)) {
searchTermQuery = route.query.search?.[0] ?? defaultSearch
}
else {
searchTermQuery = route.query.search ?? defaultSearch
}
return searchTermQuery
},
set(value) {
// update the route query params with our new "search" value.
// we can use router.replace instead of router.push
// to not write state to the browser history
router.push({
query: {
search: value === defaultSearch ? undefined : value,
sort: sort.value === defaultSort ? undefined : sort.value,
limit: limit.value === defaultLimit ? undefined : limit.value,
page: page.value === defaultPage ? undefined : page.value,
},
})
},
})
const sort = computed({
get: () => {
let sortQuery: string
// read "sort" from the query params
if (Array.isArray(route?.query?.sort)) {
sortQuery = route.query.sort?.[0] ?? defaultSort
}
else {
sortQuery = route.query.sort ?? defaultSort
}
return sortQuery
},
set(value) {
// update the route query params with our new "sort" value.
// we can use router.replace instead of router.push
// to not write state to the browser history
router.push({
query: {
search: searchTerm.value === defaultSearch ? undefined : searchTerm.value,
sort: value === defaultSort ? undefined : value,
limit: limit.value === defaultLimit ? undefined : limit.value,
page: page.value === defaultPage ? undefined : page.value,
},
})
},
})
const limit = computed({
get: () => {
let limitQuery: number
// read "limit" from the query params
if (Array.isArray(route?.query?.limit)) {
limitQuery = parseInt(route.query.limit[0] ?? `${defaultLimit}`)
}
else {
limitQuery = parseInt(route.query.limit ?? `${defaultLimit}`)
}
if (Object.is(limitQuery, NaN)) {
limitQuery = defaultLimit
}
return limitQuery
},
set(value) {
// update the route query params with our new "limit" value.
// we can use router.replace instead of router.push
// to not write state to the browser history
router.push({
query: {
search: searchTerm.value === defaultSearch ? undefined : searchTerm.value,
sort: sort.value === defaultSort ? undefined : sort.value,
limit: value === defaultLimit ? undefined : value,
page: page.value === defaultPage ? undefined : page.value,
},
})
},
})
const page = computed({
get: () => {
let pageQuery: number
if (Array.isArray(route?.query?.page)) {
pageQuery = parseInt(route.query.page[0] ?? `${defaultPage}`)
}
else {
pageQuery = parseInt(route.query.page ?? `${defaultPage}`)
}
// read "page" from the query params
if (Object.is(pageQuery, NaN)) {
pageQuery = defaultPage
}
return pageQuery
},
set(value) {
// update the route query params with our new "page" value.
// we can use router.replace instead of router.push
// to not write state to the browser history
router.push({
query: {
search: searchTerm.value === defaultSearch ? undefined : searchTerm.value,
sort: sort.value === defaultSort ? undefined : sort.value,
limit: limit.value === defaultLimit ? undefined : limit.value,
page: value === defaultPage ? undefined : value,
},
})
},
})
return reactive({
searchTerm,
sort,
limit,
page,
})
}
const queryParam = useQueryParam()
// the fetchData function will be called each time one of the parameter changes
const $fetch = useApiFetch()
const fetchData: VFlexTableWrapperDataResolver = async ({
searchTerm,
start,
limit,
sort,
controller,
}) => {
// sort will be a string like "name:asc"
let [sortField, sortOrder]
= sort && sort.includes(':') ? sort.split(':') : [undefined, undefined]
// async fetch data to our server
const { _data: users, headers } = await $fetch.raw(`/api/users`, {
query: {
// searchTerm will contains the value of the wrapperState.searchInput
// the update will be debounced to avoid to much requests
q: searchTerm,
_start: start,
_limit: limit,
_sort: sortField,
_order: sortOrder,
},
// controller is an instance of AbortController,
// this allow to abort the request when the state
// is invalidated (before fetchData will be retriggered)
signal: controller?.signal,
})
// wait more time
await sleep(1000)
// our backend send us the count in the headers,
// but we can also get it from another request
if (headers.has('X-Total-Count')) {
total.value = parseInt(headers.get('X-Total-Count') ?? '0')
}
// the return of the function must be an array
return users
}
// those data are for the interaction example
const openedRowId = ref<number>()
function onRowClick(row: any) {
if (openedRowId.value === row.id) {
openedRowId.value = undefined
}
else {
openedRowId.value = row.id
}
}
const incomingCallerId = ref<number>()
function onCallClick(row: any) {
if (incomingCallerId.value === row.id) {
incomingCallerId.value = undefined
}
else {
incomingCallerId.value = row.id
}
}
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'VFlexTable',
to: '/components/flextable/',
},
{
label: 'VFlexTableWrapper',
to: '/components/flextable/wrapper/',
},
{
label: 'Async data (advanced)',
to: '/components/flextable/wrapper/async',
},
]"
/>
<div class="columns">
<div class="column is-12">
<!--Flex Table Advanced-->
<VFlexTableWrapperAdvancedDocumentation />
<!--
We use v-model to let VFlexTableWrapper update queryParam
-->
<VFlexTableWrapper
v-model:page="queryParam.page"
v-model:limit="queryParam.limit"
v-model:searchTerm="queryParam.searchTerm"
v-model:sort="queryParam.sort"
:columns="columns"
:data="fetchData"
:total="total"
class="mt-4"
>
<!--
Here we retrieve the internal wrapperState.
Note that we can not destructure it
-->
<template #default="wrapperState">
<!--Table Pagination-->
<VFlexPagination
v-if="!isMobileScreen"
v-model:current-page="wrapperState.page"
:item-per-page="wrapperState.limit ?? 0"
:total-items="wrapperState.total ?? 0"
:max-links-displayed="2"
no-router
>
<!-- The controls can be updated anywhere in the slot -->
<template #before-pagination>
<VFlex class="mr-4">
<VField>
<VControl icon="lucide:search">
<input
v-model="wrapperState.searchInput"
type="text"
class="input is-rounded"
placeholder="Filter..."
>
</VControl>
</VField>
</VFlex>
</template>
<template #before-navigation>
<VFlex
class="mr-4"
column-gap="1rem"
>
<VButton
:loading="wrapperState.loading"
size="medium"
rounded
@click="wrapperState.fetchData"
>
Refresh
</VButton>
<VField>
<VControl>
<div class="select is-rounded">
<select v-model="wrapperState.limit">
<option :value="1">
1 results per page
</option>
<option :value="10">
10 results per page
</option>
<option :value="15">
15 results per page
</option>
<option :value="25">
25 results per page
</option>
<option :value="50">
50 results per page
</option>
</select>
</div>
</VControl>
</VField>
</VFlex>
</template>
</VFlexPagination>
<VFlexTable
rounded
clickable
:no-header="!wrapperState.loading && wrapperState.data?.length === 0"
@row-click="onRowClick"
>
<template #body>
<!--
The wrapperState.loading will be update
when the fetchData function is running
-->
<div
v-if="wrapperState.loading"
class="flex-list-inner"
>
<div
v-for="key in wrapperState.limit"
:key="key"
class="flex-table-item"
>
<VFlexTableCell :column="{ grow: true, media: true }">
<VPlaceloadAvatar size="medium" />
<VPlaceloadText
:lines="2"
width="60%"
last-line-width="20%"
class="mx-2"
/>
</VFlexTableCell>
<VFlexTableCell>
<VPlaceload
width="60%"
class="mx-1"
/>
</VFlexTableCell>
<VFlexTableCell>
<VPlaceload
width="60%"
class="mx-1"
/>
</VFlexTableCell>
<VFlexTableCell :column="{ align: 'end' }">
<VPlaceload
width="45%"
class="mx-1"
/>
</VFlexTableCell>
</div>
</div>
<!-- This is the empty state -->
<div
v-else-if="wrapperState.data?.length === 0"
class="flex-list-inner"
>
<VPlaceholderSection
title="No matches"
subtitle="There is no data that match your query."
class="my-6"
>
<template #image>
<img
class="light-image"
src="/images/illustrations/placeholders/search-4.svg"
alt=""
>
<img
class="dark-image"
src="/images/illustrations/placeholders/search-4-dark.svg"
alt=""
>
</template>
</VPlaceholderSection>
</div>
</template>
<!-- We can inject content before any rows -->
<template #body-row-pre="{ row }">
<template v-if="row.id === incomingCallerId">
<VProgress
size="tiny"
class="m-0 mb-1"
/>
</template>
</template>
<!-- This is the body cell slot -->
<template #body-cell="{ row, column }">
<template v-if="column.key === 'name'">
<VAvatar
size="medium"
:picture="row.pic"
:badge="row.badge"
:initials="row.initials"
/>
<div>
<span class="dark-text">{{ row.name }}</span>
<VTextEllipsis
width="280px"
mobile-width="180px"
class="light-text"
>
{{ row.bio }}
</VTextEllipsis>
</div>
</template>
<template v-if="column.key === 'actions'">
<VAction>
{{ row.id === openedRowId ? 'Hide details' : 'View details' }}
</VAction>
</template>
</template>
<!-- We can also inject content after rows -->
<template #body-row-post="{ row }">
<template v-if="row.id === incomingCallerId">
<VTags class="mt-2 mb-0">
<VTag
color="primary"
outlined
>
<VIcon
class="is-inline mr-2"
icon="lucide:send"
/>
Calling...
</VTag>
</VTags>
</template>
<template v-if="row.id === openedRowId">
<div class="is-block p-4 my-2 is-rounded">
<div class="dark-text mb-4 is-size-4">
{{ row.name }}'s details
</div>
<VFlex justify-content="space-between">
<VFlexItem>
<VCard>
<pre><code>{{ row }}</code></pre>
</VCard>
</VFlexItem>
<VFlexItem align-self="flex-end">
<VFlex flex-direction="column">
<VButton
v-if="row.id === incomingCallerId"
class="mb-2"
color="danger"
@click="() => onCallClick(row)"
>
<VIcon
class="is-inline mr-2"
icon="lucide:phone-off"
/>
Cancel call
</VButton>
<VButton
color="primary"
outlined
:disabled="row.id === incomingCallerId"
:loading="row.id === incomingCallerId"
@click="() => onCallClick(row)"
>
<VIcon
class="is-inline mr-2"
icon="lucide:phone"
/>
Call {{ row.name }}
</VButton>
</VFlex>
</VFlexItem>
</VFlex>
</div>
</template>
</template>
</VFlexTable>
<!--Table Pagination-->
<VFlexPagination
v-model:current-page="wrapperState.page"
class="mt-5"
:item-per-page="wrapperState.limit ?? 0"
:total-items="wrapperState.total ?? 0"
:max-links-displayed="2"
no-router
/>
</template>
</VFlexTableWrapper>
</div>
</div>
</div>
</template>

219
src/pages/components/flextable/wrapper/index.vue Normal file
View File

@@ -0,0 +1,219 @@
<script setup lang="ts">
import type {
VFlexTableWrapperSortFunction,
VFlexTableWrapperFilterFunction,
} from '/@src/components/base/VFlexTableWrapper.vue'
import { users } from '/@src/data/layouts/card-grid-v1'
import { VFlexTableWrapperMeta } from '/@src/data/documentation/components-meta'
const markdownContainer = ref<HTMLElement>()
const toc = useMarkdownToc(markdownContainer)
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'VFlexTableWrapper'
})
useHead({
title: 'VFlexTableWrapper - VFlexTable - Vuero',
})
type User = (typeof users)[0]
// duplicate user data to grow data array
const data: User[] = []
for (let i = 0; i < 1000; i++) {
data.push(...users)
}
// this is a sample for custom sort function
const locationSorter: VFlexTableWrapperSortFunction<User> = ({ order, a, b }) => {
if (order === 'asc') {
return a.location.localeCompare(b.location)
}
else if (order === 'desc') {
return b.location.localeCompare(a.location)
}
return 0
}
// this is a sample for custom filter function
const userFilter: VFlexTableWrapperFilterFunction<User> = ({ searchTerm, row }) => {
if (!searchTerm) {
return true
}
// search either in the name or the bio
return (
row.name.toLocaleLowerCase().includes(searchTerm.toLocaleLowerCase())
|| row.bio.toLocaleLowerCase().includes(searchTerm.toLocaleLowerCase())
)
}
const columns = {
name: {
label: 'Username',
media: true,
grow: true,
searchable: true,
sortable: true,
filter: userFilter,
},
location: {
label: 'Location',
sortable: true,
searchable: true,
sort: locationSorter,
},
role: 'Role',
} as const
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'VFlexTable',
to: '/components/flextable/',
},
{
label: 'VFlexTableWrapper',
to: '/components/flextable/wrapper/',
},
]"
/>
<div class="columns">
<div
ref="markdownContainer"
:class="[toc.length > 0 ? 'is-9' : 'is-12']"
class="column doc-column stay-focus-container"
>
<!--Flex Table Wrapper base documentation-->
<VFlexTableWrapperDocumentation />
<VFlexTableWrapper
:columns="columns"
:data="data"
class="mt-4"
>
<!--
Here we retrieve the internal wrapperState.
Note that we can not destructure it
-->
<template #default="wrapperState">
<!-- We can place any content inside the default slot-->
<VFlexTableToolbar>
<template #left>
<!-- We can bind wrapperState.searchInput to any input -->
<VField>
<VControl icon="lucide:search">
<input
v-model="wrapperState.searchInput"
type="text"
class="input is-rounded"
placeholder="Filter..."
>
</VControl>
</VField>
</template>
<template #right>
<!-- We can also bind wrapperState.limit -->
<VField>
<VControl>
<div class="select is-rounded">
<select v-model="wrapperState.limit">
<option :value="1">
1 results per page
</option>
<option :value="10">
10 results per page
</option>
<option :value="15">
15 results per page
</option>
<option :value="25">
25 results per page
</option>
<option :value="50">
50 results per page
</option>
</select>
</div>
</VControl>
</VField>
</template>
</VFlexTableToolbar>
<!--
The VFlexTable "data" and "columns" props
will be inherited from parent VFlexTableWrapper
-->
<VFlexTable rounded>
<!-- Custom "name" cell content -->
<template #body-cell="{ row, column }">
<template v-if="column.key === 'name'">
<VAvatar
size="medium"
:picture="row.medias.avatar"
:badge="row.medias.badge"
:initials="row.initials"
/>
<div>
<span
class="dark-text"
:title="row.name"
>{{ row.shortname }}</span>
<VTextEllipsis
width="240px"
class="light-text"
:title="row.bio"
>
<small>{{ row.bio }}</small>
</VTextEllipsis>
</div>
</template>
</template>
</VFlexTable>
<!-- Table Pagination with wrapperState.page binded-->
<VFlexPagination
v-model:current-page="wrapperState.page"
class="mt-6"
:item-per-page="wrapperState.limit ?? 0"
:total-items="wrapperState.total ?? 0"
:max-links-displayed="5"
no-router
/>
</template>
</VFlexTableWrapper>
<DocumentationMeta
name="VFlexTableWrapper"
:meta="VFlexTableWrapperMeta"
/>
</div>
<div
v-if="toc.length"
class="column is-3 toc-column"
>
<DocumentationToc :toc="toc" />
</div>
</div>
</div>
</template>

55
src/pages/components/forms/addons.vue Normal file
View File

@@ -0,0 +1,55 @@
<script setup lang="ts">
const markdownContainer = ref<HTMLElement>()
const toc = useMarkdownToc(markdownContainer)
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'Input Addons'
})
useHead({
title: 'Input Addons - Forms Elements - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'Forms',
},
{
label: 'Input Addons',
to: '/components/forms/addons',
},
]"
/>
<div class="columns">
<div
ref="markdownContainer"
:class="[toc.length > 0 ? 'is-9' : 'is-12']"
class="column doc-column stay-focus-container"
/>
<div
v-if="toc.length"
class="column is-3 toc-column"
>
<DocumentationToc :toc="toc" />
</div>
</div>
</div>
</template>

72
src/pages/components/forms/control.vue Normal file
View File

@@ -0,0 +1,72 @@
<script setup lang="ts">
import { VControlMeta } from '/@src/data/documentation/components-meta'
const markdownContainer = ref<HTMLElement>()
const toc = useMarkdownToc(markdownContainer)
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'VControl'
})
const breadcrumb = [
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'Forms',
},
{
label: 'VControl',
to: '/components/forms/control',
},
]
useHead({
title: 'VControl - Components - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="breadcrumb"
/>
<div class="columns">
<div
ref="markdownContainer"
:class="[toc.length > 0 ? 'is-9' : 'is-12']"
class="column doc-column stay-focus-container"
>
<VControlValidationDocumentation />
<VControlValidationRoundedDocumentation />
<VControlValidationVeeZodDocumentation>
<template #example>
<DocumentationDemoFormValidation />
</template>
</VControlValidationVeeZodDocumentation>
<DocumentationMeta
name="VControl"
:meta="VControlMeta"
/>
</div>
<div
v-if="toc.length"
class="column is-3 toc-column"
>
<DocumentationToc :toc="toc" />
</div>
</div>
</div>
</template>

70
src/pages/components/forms/field.vue Normal file
View File

@@ -0,0 +1,70 @@
<script setup lang="ts">
import { VFieldMeta } from '/@src/data/documentation/components-meta'
const markdownContainer = ref<HTMLElement>()
const toc = useMarkdownToc(markdownContainer)
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'VField'
})
useHead({
title: 'VField - Components - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'Forms',
},
{
label: 'VField',
to: '/components/forms/field',
},
]"
/>
<div class="columns">
<div
ref="markdownContainer"
:class="[toc.length > 0 ? 'is-9' : 'is-12']"
class="column doc-column stay-focus-container"
>
<VFieldBaseDocumentation />
<VFieldLabelInlineDocumentation />
<VFieldIdTrackingDocumentation />
<VFieldAddonEndDocumentation />
<VFieldAddonStartDocumentation />
<VFieldAddonRoundedDocumentation />
<VFieldAddonDirectionalDocumentation />
<DocumentationMeta
name="VField"
:meta="VFieldMeta"
/>
</div>
<div
v-if="toc.length"
class="column is-3 toc-column"
>
<DocumentationToc :toc="toc" />
</div>
</div>
</div>
</template>

67
src/pages/components/forms/file.vue Normal file
View File

@@ -0,0 +1,67 @@
<script setup lang="ts">
const markdownContainer = ref<HTMLElement>()
const toc = useMarkdownToc(markdownContainer)
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'File Input'
})
useHead({
title: 'File Input - Forms Elements - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'Forms',
},
{
label: 'File Input',
to: '/components/forms/file',
},
]"
/>
<div class="columns">
<div
ref="markdownContainer"
:class="[toc.length > 0 ? 'is-9' : 'is-12']"
class="column doc-column stay-focus-container"
>
<!--File input button-->
<FileBaseDocumentation />
<!--File input boxed-->
<FileBoxedDocumentation />
<!--File Left-->
<FileLeftDocumentation />
<!--File Right-->
<FileRightDocumentation />
</div>
<div
v-if="toc.length"
class="column is-3 toc-column"
>
<DocumentationToc :toc="toc" />
</div>
</div>
</div>
</template>

92
src/pages/components/forms/inputs.vue Normal file
View File

@@ -0,0 +1,92 @@
<script setup lang="ts">
import { VInputMeta } from '/@src/data/documentation/components-meta'
const markdownContainer = ref<HTMLElement>()
const toc = useMarkdownToc(markdownContainer)
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'VInput'
})
useHead({
title: 'VInput - Forms Elements - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'Forms',
},
{
label: 'VInput',
to: '/components/forms/inputs',
},
]"
/>
<div class="columns">
<div
ref="markdownContainer"
:class="[toc.length > 0 ? 'is-9' : 'is-12']"
class="column doc-column stay-focus-container"
>
<!--Input-->
<InputBasicDocumentation />
<!--Help Text-->
<InputHelpDocumentation />
<!--Rounded Input-->
<InputRoundedDocumentation />
<!--Focus Colors-->
<InputFocusDocumentation />
<!--Font Awesome-->
<InputFaDocumentation />
<!--Line Icons-->
<InputLineDocumentation />
<!--Lucide Icons-->
<InputFeatherDocumentation />
<!--Loading State-->
<InputLoadingDocumentation />
<!--Disabled Input-->
<InputDisabledDocumentation />
<InputDatasetDocumentation />
<DocumentationMeta
name="VInput"
:meta="VInputMeta"
/>
</div>
<div
v-if="toc.length"
class="column is-3 toc-column"
>
<DocumentationToc :toc="toc" />
</div>
</div>
</div>
</template>

75
src/pages/components/forms/range-rating.vue Normal file
View File

@@ -0,0 +1,75 @@
<script setup lang="ts">
import { VRangeRatingMeta } from '/@src/data/documentation/components-meta'
const markdownContainer = ref<HTMLElement>()
const toc = useMarkdownToc(markdownContainer)
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'Rating'
})
useHead({
title: 'VRangeRating - Forms Elements - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'Forms',
},
{
label: 'VRangeRating',
to: '/components/forms/range-rating',
},
]"
/>
<div class="columns">
<div
ref="markdownContainer"
:class="[toc.length > 0 ? 'is-9' : 'is-12']"
class="column doc-column stay-focus-container"
>
<!--Rating button-->
<RangeRatingBasicDocumentation />
<RangeRatingMaxDocumentation />
<RangeRatingLabelDocumentation />
<RangeRatingReadonlyDocumentation />
<RangeRatingSizesDocumentation />
<RangeRatingCustomIconDocumentation />
<DocumentationMeta
name="VRangeRating"
:meta="VRangeRatingMeta"
/>
</div>
<div
v-if="toc.length"
class="column is-3 toc-column"
>
<DocumentationToc :toc="toc" />
</div>
</div>
</div>
</template>

83
src/pages/components/forms/selects.vue Normal file
View File

@@ -0,0 +1,83 @@
<script setup lang="ts">
import { VSelectMeta } from '/@src/data/documentation/components-meta'
const markdownContainer = ref<HTMLElement>()
const toc = useMarkdownToc(markdownContainer)
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'VSelect'
})
useHead({
title: 'VSelect - Forms Elements - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'Forms',
},
{
label: 'VSelect',
to: '/components/forms/selects',
},
]"
/>
<div class="columns">
<div
ref="markdownContainer"
:class="[toc.length > 0 ? 'is-9' : 'is-12']"
class="column doc-column stay-focus-container"
>
<!--Select-->
<SelectBaseDocumentation />
<!--Rounded Select-->
<SelectRoundedDocumentation />
<!--Font Awesome-->
<SelectFaDocumentation />
<!--Line Icons-->
<SelectLineDocumentation />
<!--Lucide Icons-->
<SelectFeatherDocumentation />
<!--Loading-->
<SelectLoadingDocumentation />
<!--Multiple-->
<SelectMultipleDocumentation />
<DocumentationMeta
name="VSelect"
:meta="VSelectMeta"
/>
</div>
<div
v-if="toc.length"
class="column is-3 toc-column"
>
<DocumentationToc :toc="toc" />
</div>
</div>
</div>
</template>

77
src/pages/components/forms/textarea.vue Normal file
View File

@@ -0,0 +1,77 @@
<script setup lang="ts">
import { VTextareaMeta } from '/@src/data/documentation/components-meta'
const markdownContainer = ref<HTMLElement>()
const toc = useMarkdownToc(markdownContainer)
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'VTextarea'
})
useHead({
title: 'VTextarea - Forms Elements - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'Forms',
},
{
label: 'VTextarea',
to: '/components/forms/textarea',
},
]"
/>
<div class="columns">
<div
ref="markdownContainer"
:class="[toc.length > 0 ? 'is-9' : 'is-12']"
class="column doc-column stay-focus-container"
>
<!--Textarea-->
<TextareaBaseDocumentation />
<!--Textarea Focus-->
<TextareaFocusDocumentation />
<!--Textarea loading-->
<TextareaLoadingDocumentation />
<!--Textarea disabled-->
<TextareaDisabledDocumentation />
<!--Textarea Addon-->
<TextareaAddonDocumentation />
<DocumentationMeta
name="VTextarea"
:meta="VTextareaMeta"
/>
</div>
<div
v-if="toc.length"
class="column is-3 toc-column"
>
<DocumentationToc :toc="toc" />
</div>
</div>
</div>
</template>

67
src/pages/components/grid.vue Normal file
View File

@@ -0,0 +1,67 @@
<script setup lang="ts">
import { VGridMeta, VGridItemMeta } from '/@src/data/documentation/components-meta'
const markdownContainer = ref<HTMLElement>()
const toc = useMarkdownToc(markdownContainer)
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'VGrid'
})
useHead({
title: 'VGrid - Components - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'VGrid',
to: '/components/flex',
},
]"
/>
<div class="columns">
<div
ref="markdownContainer"
:class="[toc.length > 0 ? 'is-9' : 'is-12']"
class="column doc-column stay-focus-container"
>
<!--VGrid-->
<VGridBaseDocumentation />
<DocumentationMeta
name="VGrid"
:meta="VGridMeta"
/>
<DocumentationMeta
name="VGridItem"
:meta="VGridItemMeta"
/>
</div>
<div
v-if="toc.length"
class="column is-3 toc-column"
>
<DocumentationToc :toc="toc" />
</div>
</div>
</div>
</template>

350
src/pages/components/helpers.vue Normal file
View File

@@ -0,0 +1,350 @@
<script setup lang="ts">
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'Helpers'
})
useHead({
title: 'Helpers - Components - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'Helpers',
to: '/components/helpers',
},
]"
/>
<div class="columns is-multiline">
<div class="column is-12">
<!--Theme Colors-->
<HelpersDocumentation />
<div class="columns is-multiline">
<div class="column is-12">
<div class="s-card demo-table">
<table
class="table is-hoverable is-fullwidth helper-table"
aria-label="Vuero CSS classes helpers"
>
<thead>
<tr>
<td />
<th scope="col">
Helper
</th>
<th scope="col">
Description
</th>
</tr>
</thead>
<tbody>
<tr>
<th
scope="rowgroup"
rowspan="4"
class="category"
>
<strong>Spacing</strong>
</th>
<td class="name">
Margin (<code>m-*-*</code>)
</td>
<td class="description">
Sets a margin on the target element following the
<code>m-*-*</code> pattern, where the first <code>*</code> stands
for directon (<code>t</code>, <code>b</code>, <code>l</code> and
<code>r</code>) and the second one for pixel amount. Minimum and
maximum pixel amounts are <code>5</code> and <code>100</code>.
</td>
</tr>
<tr>
<td class="name">
Padding (<code>p-*-*</code>)
</td>
<td class="description">
Sets a padding on the target element following the
<code>p-*-*</code> pattern, where the first <code>*</code> stands
for directon (<code>t</code>, <code>b</code>, <code>l</code> and
<code>r</code>) and the second one for pixel amount. Minimum and
maximum pixel amounts are <code>5</code> and <code>100</code>.
</td>
</tr>
<tr>
<td class="name">
No Margin (<code>no-margin-*</code>)
</td>
<td class="description">
Sets a margin on the target element following the
<code>no-margin-*</code> pattern, where the first
<code>*</code> stands for directon (<code>all</code>,
<code>top</code>, <code>bottom</code>, <code>left</code> and
<code>right</code>).
</td>
</tr>
<tr>
<td class="name">
No Padding (<code>no-padding-*</code>)
</td>
<td class="description">
Sets a padding on the target element following the
<code>no-padding-*</code> pattern, where the first
<code>*</code> stands for directon (<code>all</code>,
<code>top</code>, <code>bottom</code>, <code>left</code> and
<code>right</code>).
</td>
</tr>
<tr>
<th
scope="rowgroup"
rowspan="3"
class="category"
>
<strong>States</strong>
</th>
<td class="name">
Hidden (<code>is-hidden</code>)
</td>
<td class="description">
Sets the <code>display</code> property to <code>none</code> on the
target element.
</td>
</tr>
<tr>
<td class="name">
VHidden (<code>is-vhidden</code>)
</td>
<td class="description">
Sets the <code>visibility</code> property to <code>hidden</code> on
the target element.
</td>
</tr>
<tr>
<td class="name">
Disabled (<code>is-disabled</code>)
</td>
<td class="description">
Sets the <code>pointer-events</code> property to
<code>none</code> on the target element and decreases its opacity.
</td>
</tr>
<tr>
<th
scope="row"
class="category"
>
<strong>Scroll</strong>
</th>
<td class="name">
Slimscroll (<code>has-slimscroll</code>)
</td>
<td class="description">
Sets the <code>overflowY</code> property to <code>auto</code> on the
target element and tweaks the webkit scrollbar.
</td>
</tr>
<tr>
<th
scope="row"
class="category"
>
<strong>Scroll</strong>
</th>
<td class="name">
Slimscroll X (<code>has-slimscroll-x</code>)
</td>
<td class="description">
Sets the <code>overflowX</code> property to <code>auto</code> on the
target element and tweaks the webkit scrollbar.
</td>
</tr>
<tr>
<th
scope="row"
class="category"
>
<strong>Scroll</strong>
</th>
<td class="name">
Slimscroll X and Y (<code>has-slimscroll-all</code>)
</td>
<td class="description">
Sets the <code>overflow</code> property to <code>auto</code> on the
target element and tweaks the webkit scrollbar.
</td>
</tr>
<tr>
<th
scope="rowgroup"
rowspan="2"
class="category"
>
<strong>Dark Mode</strong>
</th>
<td class="name">
Images
</td>
<td class="description">
Toggle images between light mode and dark mode using the
corresponding classes:
<code>light-image</code> and <code>dark-image</code>. Displayed
images will be displayed as <code>inline-block</code>. To display
images as <code>block</code> use the
<code>light-image-block</code> and
<code>dark-image-block</code> classes instead.
</td>
</tr>
<tr>
<td class="name">
Dark Background (<code>is-dark-bg-*</code>)
</td>
<td class="description">
Sets the <code>background-color</code> property to the specidifed
value, where <code>*</code> is a percentage of the dark mode main
color. Accepted values: 2, 3, 4, 6.
</td>
</tr>
<tr>
<th
scope="rowgroup"
rowspan="4"
class="category"
>
<strong>Responsive</strong>
</th>
<td class="name">
Hidden mobile (<code>h-hidden-mobile</code>)
</td>
<td class="description">
Sets the <code>display</code> property to <code>none</code> on the
target element when on a mobile display.
</td>
</tr>
<tr>
<td class="name">
Hidden tablet (<code>h-hidden-tablet-p</code>)
</td>
<td class="description">
Sets the <code>display</code> property to <code>none</code> on the
target element when on a tablet display in portrait mode.
</td>
</tr>
<tr>
<td class="name">
Hidden tablet (<code>h-hidden-tablet-l</code>)
</td>
<td class="description">
Sets the <code>display</code> property to <code>none</code> on the
target element when on a tablet display in landscape mode.
</td>
</tr>
<tr>
<td class="name">
Hidden desktop (<code>h-hidden-desktop</code>)
</td>
<td class="description">
Sets the <code>display</code> property to <code>none</code> on the
target element when on a desktop display.
</td>
</tr>
<tr>
<th
scope="rowgroup"
rowspan="4"
class="category"
>
<strong>Typography</strong>
</th>
<td class="name">
Font (<code>.is-font</code>)
</td>
<td class="description">
Sets the <code>font-family</code> property to the
<code>$font</code> variable value.
</td>
</tr>
<tr>
<td class="name">
Font Alt (<code>.is-font-alt</code>)
</td>
<td class="description">
Sets the <code>font-family</code> property to the
<code>$font-alt</code> variable value.
</td>
</tr>
<tr>
<td class="name">
Font Weight (<code>.is-weight-*</code>)
</td>
<td class="description">
Sets the <code>font-weight</code> property to the specidifed value,
where <code>*</code> is a value between 300 and 900.
</td>
</tr>
<tr>
<td class="name">
Font Size (<code>.rem-*</code>)
</td>
<td class="description">
Sets the <code>font-size</code> property to the specidifed value,
where <code>*</code> is a value between 70 and 100. Increments by 5.
</td>
</tr>
<tr>
<th
scope="rowgroup"
rowspan="2"
class="category"
>
<strong>Stay Focus</strong>
</th>
<td class="name">
Container (<code>.stay-focus-container</code>)
</td>
<td class="description">
Sets the stay focus container. Will blur all child
<code>.stay-focus-element</code> except the hovered one.
</td>
</tr>
<tr>
<td class="name">
Element (<code>.stay-focus-element</code>)
</td>
<td class="description">
Element that will be blured when user hover over the container.
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<style scoped lang="scss">
.is-dark strong {
color: var(--dark-dark-text);
}
</style>

80
src/pages/components/icon-box.vue Normal file
View File

@@ -0,0 +1,80 @@
<script setup lang="ts">
import { VIconBoxMeta } from '/@src/data/documentation/components-meta'
const markdownContainer = ref<HTMLElement>()
const toc = useMarkdownToc(markdownContainer)
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'VIconBox'
})
useHead({
title: 'VIconBox - Components - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'VIconBox',
to: '/components/icon-box',
},
]"
/>
<div class="columns">
<div
ref="markdownContainer"
:class="[toc.length > 0 ? 'is-9' : 'is-12']"
class="column doc-column stay-focus-container"
>
<!--Icon Box-->
<IconBoxDefaultDocumentation />
<!--Box Colors-->
<IconBoxColorsDocumentation />
<!--Box Border-->
<IconBoxSquaredBorderDocumentation />
<!--Box Rounded-->
<IconBoxRoundedDocumentation />
<!--Box Colors-->
<IconBoxRoundedBorderDocumentation />
<!--Lucide Icons-->
<IconBoxFeatherDocumentation />
<!--Font Awesome-->
<IconBoxFaDocumentation />
<DocumentationMeta
name="VIconBox"
:meta="VIconBoxMeta"
/>
</div>
<div
v-if="toc.length"
class="column is-3 toc-column"
>
<DocumentationToc :toc="toc" />
</div>
</div>
</div>
</template>

64
src/pages/components/icon-button.vue Normal file
View File

@@ -0,0 +1,64 @@
<script setup lang="ts">
import { VIconButtonMeta } from '/@src/data/documentation/components-meta'
const markdownContainer = ref<HTMLElement>()
const toc = useMarkdownToc(markdownContainer)
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'VIconButton'
})
useHead({
title: 'VIconButton - Components - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'Buttons',
},
{
label: 'VIconButton',
to: '/components/icon-button',
},
]"
/>
<div class="columns">
<div
ref="markdownContainer"
:class="[toc.length > 0 ? 'is-9' : 'is-12']"
class="column doc-column stay-focus-container"
>
<VIconButtonDefaultDocumentation />
<DocumentationMeta
name="VIconButton"
:meta="VIconButtonMeta"
/>
</div>
<div
v-if="toc.length"
class="column is-3 toc-column"
>
<DocumentationToc :toc="toc" />
</div>
</div>
</div>
</template>

67
src/pages/components/icon-wrap.vue Normal file
View File

@@ -0,0 +1,67 @@
<script setup lang="ts">
import { VIconWrapMeta } from '/@src/data/documentation/components-meta'
const markdownContainer = ref<HTMLElement>()
const toc = useMarkdownToc(markdownContainer)
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'VIconWrap'
})
useHead({
title: 'VIconWrap - Components - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'VIconWrap',
to: '/components/icon-wrap',
},
]"
/>
<div class="columns">
<div
ref="markdownContainer"
:class="[toc.length > 0 ? 'is-9' : 'is-12']"
class="column doc-column stay-focus-container"
>
<!--IconBox-->
<IconWrapDefaultDocumentation />
<IconWrapColorsDocumentation />
<IconWrapSizesDocumentation />
<IconWrapDarkDocumentation />
<IconWrapTooltipsDocumentation />
<DocumentationMeta
name="VIconWrap"
:meta="VIconWrapMeta"
/>
</div>
<div
v-if="toc.length"
class="column is-3 toc-column"
>
<DocumentationToc :toc="toc" />
</div>
</div>
</div>
</template>

126
src/pages/components/icons/font-awesome.vue Normal file
View File

@@ -0,0 +1,126 @@
<script setup lang="ts">
import { fontAwesome } from '/@src/data/icons/fontAwesome'
const { text, copy, copied } = useClipboard()
const { y } = useWindowScroll()
const filter = ref('')
const isScrolling = computed(() => {
return y.value > 30
})
const filteredIcons = computed(() => {
if (filter.value === '') {
return fontAwesome
}
return fontAwesome.filter((icon) => {
return icon.name.match(new RegExp(filter.value, 'i'))
})
})
function getSnippet(icon: any) {
return `<i class="fas fa-${icon.name}" aria-hidden="true"></i>`
}
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'Font Awesome Icons'
})
useHead({
title: 'Font Awesome Icons - Components - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'Icons',
},
{
label: 'Font Awesome',
to: '/components/icons/font-awesome',
},
]"
/>
<div class="columns">
<div class="column is-12">
<!--Font Awesome-->
<IconsFaDocumentation />
<DocumentationDemoCard>
<div
class="card-inner"
:class="{ 'is-scrolling': isScrolling }"
>
<VFlex
justify-content="flex-end"
class="demo-icon-search py-4 px-6"
>
<VField>
<VControl icon="lucide:search">
<input
v-model="filter"
type="search"
class="input is-rounded"
placeholder="Search font awesome icons ..."
>
</VControl>
</VField>
</VFlex>
<ul class="demo-icon-list">
<li
v-for="icon in filteredIcons"
:id="icon.name"
:key="icon.name"
role="button"
class="icon w-grid-2 textFilter-target w-grid-4-l w-grid-6-xl w-grid-8-2x pr4 pb2 pt2 bb bw1 b--gray1 hover-black bw0-pr db fl-pr is-copy-trigger"
tabindex="0"
@keydown.enter.prevent="copy(getSnippet(icon))"
@click="copy(getSnippet(icon))"
>
<dl class="dt clpse w-100 ma0 pa0">
<dt class="dtc v-top tl w2">
<span class="fa-fw select-all fas">{{ icon.char }}</span>
</dt>
<dd
class="ma0 pa0 pr2 select-all word-wrap dtc v-top tl f2 icon-name textFilter-match"
>
{{ icon.name }}
</dd>
<dd class="ma0 pa0 select-all gray5 dtc v-top tr f2 icon-unicode">
{{ icon.charCode }}
</dd>
</dl>
<Transition name="fade-fast">
<span
v-if="copied && text === getSnippet(icon)"
class="is-copied"
>
copied!
</span>
</Transition>
</li>
</ul>
</div>
</DocumentationDemoCard>
</div>
</div>
</div>
</template>

118
src/pages/components/icons/iconify.vue Normal file
View File

@@ -0,0 +1,118 @@
<script setup lang="ts">
import { iconifyFeather } from '/@src/data/icons/iconifyFeather'
const { text, copy, copied } = useClipboard()
const { y } = useWindowScroll()
const filter = ref('')
const isScrolling = computed(() => {
return y.value > 30
})
const filteredIcons = computed(() => {
if (filter.value === '') {
return iconifyFeather
}
return iconifyFeather.filter((icon) => {
return icon.name.match(new RegExp(filter.value, 'i'))
})
})
function getSnippet(icon: any) {
return `<VIcon icon="lucide:${icon.name}" />`
}
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'Iconify Icons'
})
useHead({
title: 'Iconify Icons - Components - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'Icons',
},
{
label: 'Iconify',
to: '/components/icons/iconify',
},
]"
/>
<div class="columns">
<div class="column is-12">
<!--Iconify Icons-->
<IconsIconifyDocumentation />
<DocumentationDemoCard>
<div
class="card-inner"
:class="{ 'is-scrolling': isScrolling }"
>
<VFlex
justify-content="flex-end"
class="demo-icon-search py-4 px-6"
>
<VField>
<VControl icon="lucide:search">
<input
v-model="filter"
type="search"
class="input is-rounded"
placeholder="Search Lucide Icons ..."
>
</VControl>
</VField>
</VFlex>
<ul class="demo-icon-list">
<li
v-for="icon in filteredIcons"
:key="icon.name"
class="textFilter-target is-copy-trigger"
tabindex="0"
role="button"
@keydown.enter.prevent="copy(getSnippet(icon))"
@click="copy(getSnippet(icon))"
>
<VIcon
:icon="icon.dataicon"
/>
<p class="textFilter-match">
{{ icon.name }}
</p>
<Transition name="fade-fast">
<span
v-if="copied && text === getSnippet(icon)"
class="is-copied"
>
copied!
</span>
</Transition>
</li>
</ul>
</div>
</DocumentationDemoCard>
</div>
</div>
</div>
</template>

128
src/pages/components/icons/line-icons-light.vue Normal file
View File

@@ -0,0 +1,128 @@
<script setup lang="ts">
import { lineIcons } from '/@src/data/icons/lineIcons'
const { text, copy, copied } = useClipboard()
const { y } = useWindowScroll()
const filter = ref('')
const isScrolling = computed(() => {
return y.value > 30
})
const filteredIcons = computed(() => {
if (filter.value === '') {
return lineIcons
}
const filterRe = new RegExp(filter.value, 'i')
return lineIcons.filter((icon) => {
return icon.className.match(filterRe)
})
})
function getSnippet(icon: any) {
return ` <i class="lnil ${icon.className}" aria-hidden="true"></i>`
}
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'Line Icons Icons'
})
useHead({
title: 'Line Icons Icons - Components - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'Icons',
},
{
label: 'Line Icons',
to: '/components/icons/line-icons-light',
},
]"
/>
<div class="columns">
<div class="column is-12">
<!--Line Icons-->
<IconsLineLightDocumentation />
<DocumentationDemoCard class="mt-4">
<div
class="card-inner"
:class="{ 'is-scrolling': isScrolling }"
>
<VFlex
justify-content="flex-end"
class="demo-icon-search py-4 px-6"
>
<VField>
<VControl icon="lucide:search">
<input
v-model="filter"
type="search"
class="input is-rounded"
placeholder="Search line icons ..."
>
</VControl>
</VField>
</VFlex>
<ul class="demo-icon-list">
<li
v-for="icon in filteredIcons"
:key="icon.className"
role="button"
class="textFilter-target is-copy-trigger"
tabindex="0"
@keydown.enter.prevent="copy(getSnippet(icon))"
@click="copy(getSnippet(icon))"
>
<i
aria-hidden="true"
class="lnil"
:class="icon.className"
/>
<p class="textFilter-match">
{{ icon.className }}
</p>
<em>{{ icon.className }}</em>
<input
type="text"
maxlength="1"
readonly
:value="icon.char"
>
<Transition name="fade-fast">
<span
v-if="copied && text === getSnippet(icon)"
class="is-copied"
>
copied!
</span>
</Transition>
</li>
</ul>
</div>
</DocumentationDemoCard>
</div>
</div>
</div>
</template>

129
src/pages/components/icons/line-icons-regular.vue Normal file
View File

@@ -0,0 +1,129 @@
<script setup lang="ts">
import { lineIconsRegular } from '/@src/data/icons/lineIconsRegular'
const { text, copy, copied } = useClipboard()
const { y } = useWindowScroll()
const filter = ref('')
const isScrolling = computed(() => {
return y.value > 30
})
const filteredIcons = computed(() => {
if (filter.value === '') {
return lineIconsRegular
}
const filterRe = new RegExp(filter.value, 'i')
return lineIconsRegular.filter((icon) => {
return icon.className.match(filterRe)
})
})
function getSnippet(icon: any) {
return ` <i class="lnir ${icon.className}" aria-hidden="true"></i>`
}
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'Line Icons Regular Icons'
})
useHead({
title: 'Line Icons Regular Icons - Components - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'Icons',
},
{
label: 'Line Icons Regular',
to: '/components/icons/line-icons-regular',
},
]"
/>
<div class="columns">
<div class="column is-12">
<!--Line Icons-->
<IconsLineRegularDocumentation />
<DocumentationDemoCard class="mt-4">
<div
class="card-inner"
:class="{ 'is-scrolling': isScrolling }"
>
<VFlex
justify-content="flex-end"
class="demo-icon-search py-4 px-6"
>
<VField>
<VControl icon="lucide:search">
<input
v-model="filter"
type="search"
class="input is-rounded"
placeholder="Search regular line icons ..."
>
</VControl>
</VField>
</VFlex>
<ul class="demo-icon-list">
<li
v-for="icon in filteredIcons"
:key="icon.className"
class="textFilter-target is-copy-trigger"
tabindex="0"
role="button"
@keydown.enter.prevent="copy(getSnippet(icon))"
@click="copy(getSnippet(icon))"
>
<i
aria-hidden="true"
class="lnir"
:class="icon.className"
/>
<p class="textFilter-match">
{{ icon.className }}
</p>
<em>{{ icon.className }}</em>
<input
type="text"
maxlength="1"
readonly
:value="icon.char"
>
<Transition name="fade-fast">
<span
v-if="copied && text === getSnippet(icon)"
class="is-copied"
>
copied!
</span>
</Transition>
</li>
</ul>
</div>
</DocumentationDemoCard>
</div>
</div>
</div>
</template>

628
src/pages/components/index.vue Normal file
View File

@@ -0,0 +1,628 @@
<script setup lang="ts">
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'Components Hub'
})
useHead({
title: 'Components - Vuero',
})
</script>
<template>
<main class="card-hub">
<div class="columns">
<div class="column is-12">
<div class="hub-wrapper">
<div class="hub-header has-text-centered">
<VAvatar
size="xl"
picture="/images/avatars/svg/vuero-2.svg"
badge="https://media.cssninja.io/content/photos/misc/buoy.jpg"
/>
<h3 class="title is-4 is-narrow is-thin">
Vuero Components
</h3>
<p class="light-text">
This is the Vuero components library with detailed code examples.
</p>
</div>
<div class="hub-body">
<div class="body-inner">
<!--Component/buttons-->
<HubCard
title="Buttons"
content="Get familiar with the Vuero button styles. Code examples included."
>
<RouterLink to="/components/button">
Get Started
</RouterLink>
<template #icon>
<img
class="light-image"
src="/images/illustrations/components/buttons.svg"
alt=""
>
<img
class="dark-image"
src="/images/illustrations/components/buttons-dark.svg"
alt=""
>
</template>
</HubCard>
<!--Component/icons-->
<HubCard
title="Icons"
content="Get familiar with the Vuero icon libraries. Code examples included."
>
<RouterLink to="/components/icons/line-icons-light">
Get Started
</RouterLink>
<template #icon>
<img
class="light-image"
src="/images/illustrations/components/icons.svg"
alt=""
>
<img
class="dark-image"
src="/images/illustrations/components/icons-dark.svg"
alt=""
>
</template>
</HubCard>
<!--Component/dropdowns-->
<HubCard
title="Dropdowns"
content="Get familiar with the Vuero dropdown styles. Code examples included."
>
<RouterLink to="/components/dropdown">
Get Started
</RouterLink>
<template #icon>
<img
class="light-image"
src="/images/illustrations/components/dropdown.svg"
alt=""
>
<img
class="dark-image"
src="/images/illustrations/components/dropdown-dark.svg"
alt=""
>
</template>
</HubCard>
<!--Component/modals-->
<HubCard
title="Modals"
content="Get familiar with the Vuero modal styles. Code examples included."
>
<RouterLink to="/components/modal">
Get Started
</RouterLink>
<template #icon>
<img
class="light-image"
src="/images/illustrations/components/modal.svg"
alt=""
>
<img
class="dark-image"
src="/images/illustrations/components/modal-dark.svg"
alt=""
>
</template>
</HubCard>
<!--Component/progress-->
<HubCard
title="Progress"
content="Get familiar with the Vuero progress bar styles. Code examples included."
>
<RouterLink to="/components/progress">
Get Started
</RouterLink>
<template #icon>
<img
class="light-image"
src="/images/illustrations/components/progress.svg"
alt=""
>
<img
class="dark-image"
src="/images/illustrations/components/progress-dark.svg"
alt=""
>
</template>
</HubCard>
<!--Component/forms-->
<HubCard
title="Forms"
content="Get familiar with the Vuero form elements. Code examples included."
>
<RouterLink to="/components/forms/inputs">
Get Started
</RouterLink>
<template #icon>
<img
class="light-image"
src="/images/illustrations/components/forms.svg"
alt=""
>
<img
class="dark-image"
src="/images/illustrations/components/forms-dark.svg"
alt=""
>
</template>
</HubCard>
<!--Component/checkbox-->
<HubCard
title="Checkboxes"
content="Get familiar with the Vuero checkboxes styles. Code examples included."
>
<RouterLink to="/components/checkbox">
Get Started
</RouterLink>
<template #icon>
<img
class="light-image"
src="/images/illustrations/components/checkboxes.svg"
alt=""
>
<img
class="dark-image"
src="/images/illustrations/components/checkboxes-dark.svg"
alt=""
>
</template>
</HubCard>
<!--Component/switch-block-->
<HubCard
title="Switches"
content="Get familiar with the Vuero switches styles. Code examples included."
>
<RouterLink to="/components/switch-block">
Get Started
</RouterLink>
<template #icon>
<img
class="light-image"
src="/images/illustrations/components/switches.svg"
alt=""
>
<img
class="dark-image"
src="/images/illustrations/components/switches-dark.svg"
alt=""
>
</template>
</HubCard>
<!--Component/content-->
<HubCard
title="Content"
content="Get familiar with the Vuero content styles. Code examples included."
>
<RouterLink to="/components/content">
Get Started
</RouterLink>
<template #icon>
<img
class="light-image"
src="/images/illustrations/components/lists.svg"
alt=""
>
<img
class="dark-image"
src="/images/illustrations/components/lists-dark.svg"
alt=""
>
</template>
</HubCard>
<!--Component/tags-->
<HubCard
title="Tags"
content="Get familiar with the Vuero tags styles. Code examples included."
>
<RouterLink to="/components/tag">
Get Started
</RouterLink>
<template #icon>
<img
class="light-image"
src="/images/illustrations/components/tags.svg"
alt=""
>
<img
class="dark-image"
src="/images/illustrations/components/tags-dark.svg"
alt=""
>
</template>
</HubCard>
<!--Component/tabs-->
<HubCard
title="Tabs"
content="Get familiar with the Vuero nav tabs styles. Code examples included."
>
<RouterLink to="/components/tabs">
Get Started
</RouterLink>
<template #icon>
<img
class="light-image"
src="/images/illustrations/components/tabs.svg"
alt=""
>
<img
class="dark-image"
src="/images/illustrations/components/tabs-dark.svg"
alt=""
>
</template>
</HubCard>
<!--Component/cards-->
<HubCard
title="Cards"
content="Get familiar with the Vuero card styles. Code examples included."
>
<RouterLink to="/components/card/">
Get Started
</RouterLink>
<template #icon>
<img
class="light-image"
src="/images/illustrations/components/cards.svg"
alt=""
>
<img
class="dark-image"
src="/images/illustrations/components/cards-dark.svg"
alt=""
>
</template>
</HubCard>
<!--Component/avatars-->
<HubCard
title="Avatars"
content="Get familiar with the Vuero avatar styles. Code examples included."
>
<RouterLink to="/components/avatar/">
Get Started
</RouterLink>
<template #icon>
<img
class="light-image"
src="/images/illustrations/components/avatar.svg"
alt=""
>
<img
class="dark-image"
src="/images/illustrations/components/avatar-dark.svg"
alt=""
>
</template>
</HubCard>
<!--Component/accordions-->
<HubCard
title="Accordions"
content="Get familiar with the Vuero accordion styles. Code examples included."
>
<RouterLink to="/components/accordion/">
Get Started
</RouterLink>
<template #icon>
<img
class="light-image"
src="/images/illustrations/components/accordion.svg"
alt=""
>
<img
class="dark-image"
src="/images/illustrations/components/accordion-dark.svg"
alt=""
>
</template>
</HubCard>
<!--Component/breadcrumbs-->
<HubCard
title="Breadcrumbs"
content="Get familiar with the Vuero breadcrumb styles. Code examples included."
>
<RouterLink to="/components/breadcrumb">
Get Started
</RouterLink>
<template #icon>
<img
class="light-image"
src="/images/illustrations/components/breadcrumb.svg"
alt=""
>
<img
class="dark-image"
src="/images/illustrations/components/breadcrumb-dark.svg"
alt=""
>
</template>
</HubCard>
<!--Component/iconbox-->
<HubCard
title="Icon Box"
content="Get familiar with the Vuero icon boxes styles. Code examples included."
>
<RouterLink to="/components/icon-box">
Get Started
</RouterLink>
<template #icon>
<img
class="light-image"
src="/images/illustrations/components/icon-box.svg"
alt=""
>
<img
class="dark-image"
src="/images/illustrations/components/icon-box-dark.svg"
alt=""
>
</template>
</HubCard>
<!--Component/flextables-->
<HubCard
title="Flex Table"
content="Get familiar with the Vuero flex table styles. Code examples included."
>
<RouterLink to="/components/flextable/">
Get Started
</RouterLink>
<template #icon>
<img
class="light-image"
src="/images/illustrations/components/table.svg"
alt=""
>
<img
class="dark-image"
src="/images/illustrations/components/table-dark.svg"
alt=""
>
</template>
</HubCard>
<!--Component/snacks-->
<HubCard
title="Snacks"
content="Get familiar with the Vuero snacks styles. Code examples included."
>
<RouterLink to="/components/snack">
Get Started
</RouterLink>
<template #icon>
<img
class="light-image"
src="/images/illustrations/components/snacks.svg"
alt=""
>
<img
class="dark-image"
src="/images/illustrations/components/snacks-dark.svg"
alt=""
>
</template>
</HubCard>
</div>
</div>
<div class="hub-footer">
<p>
<a
class="action-link"
tabindex="0"
>Online Documentation</a>
</p>
</div>
</div>
</div>
</div>
</main>
</template>
<style lang="scss">
.card-hub {
max-width: 840px;
margin: 0 auto;
.hub-header {
text-align: center;
> img {
display: block;
margin: 0 auto;
max-width: 300px;
}
.v-avatar {
margin: 0 auto 12px;
}
.anim-icon {
margin-bottom: 12px;
}
p {
font-size: 1.15rem;
}
}
.hub-body {
padding: 10px 0 20px;
.body-inner {
display: flex;
flex-wrap: wrap;
.hub-card {
background-color: var(--white);
border-radius: var(--radius-large);
border: 1px solid color-mix(in oklab, var(--fade-grey), black 3%);
width: calc(50% - 20px);
max-width: calc(50% - 20px);
margin: 10px;
transition: all 0.3s; // transition-all test
&:hover {
box-shadow: var(--light-box-shadow);
.hub-card-body {
img {
filter: grayscale(0);
opacity: 1;
}
}
}
.hub-card-body {
display: flex;
flex-direction: row;
justify-content: space-between;
padding: 24px;
.inner-content {
.title {
font-size: 1.3rem;
margin-bottom: 8px;
}
p {
max-width: 220px;
}
.partner-name {
span {
font-weight: 500;
color: var(--dark-text);
}
}
}
img {
display: block;
width: 100%;
max-width: 100px;
height: 100px;
filter: grayscale(1);
opacity: 0.6;
transition: all 0.3s; // transition-all test
}
}
.hub-card-foot {
border-top: 1px dashed color-mix(in oklab, var(--fade-grey), black 4%);
border-top-width: 1.6px;
padding: 18px 24px;
a {
color: var(--primary);
opacity: 0.6;
font-weight: 500;
transition: opacity 0.3s;
&:hover,
&:focus {
opacity: 1;
}
}
}
}
}
}
.hub-footer {
text-align: center;
padding-top: 20px;
p {
font-weight: 500;
a {
position: relative;
transition: color 0.3s;
}
}
}
}
.is-dark {
.card-hub {
.hub-header {
.v-avatar {
.badge {
border-color: color-mix(in oklab, var(--dark-sidebar), white 6%) !important;
}
}
}
.hub-body {
.body-inner {
.hub-card {
background: color-mix(in oklab, var(--dark-sidebar), white 6%);
border-color: color-mix(in oklab, var(--dark-sidebar), white 12%);
.hub-card-foot {
border-color: color-mix(in oklab, var(--muted-grey), black 25%);
a {
color: var(--primary);
}
}
}
}
}
}
}
@media only screen and (width <= 767px) {
.card-hub {
.hub-body {
.body-inner {
.hub-card {
width: calc(100% - 20px);
max-width: calc(100% - 20px);
}
}
}
}
}
</style>

192
src/pages/components/loader.vue Normal file
View File

@@ -0,0 +1,192 @@
<script setup lang="ts">
import { VLoaderMeta } from '/@src/data/documentation/components-meta'
const isLoaderActive = ref(false)
const toggleLoaders = () => {
isLoaderActive.value = !isLoaderActive.value
}
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'VLoader'
})
useHead({
title: 'VLoader - Components - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'VLoader',
to: '/components/loader',
},
]"
/>
<div class="columns">
<div class="column is-12">
<!--Loader-->
<VLoaderDocumentation />
<div class="mb-4">
<VButton
color="primary"
elevated
@click="toggleLoaders"
>
<span v-if="!isLoaderActive">Show Loaders</span>
<span v-else>Hide Loaders</span>
</VButton>
</div>
<div class="columns is-multiline">
<div class="column is-4">
<VLoader
size="small"
:active="isLoaderActive"
grey
>
<VCardAction
avatar="https://media.cssninja.io/content/avatars/19.jpg"
badge="/images/icons/flags/germany.svg"
title="Greta K."
subtitle="Sales Manager"
>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quibusnam
praeteritis? At multis se probavit. Quoniam, si dis placet, ab Epicuro
loqui discimus. Et ille ridens.
</p>
</VCardAction>
</VLoader>
</div>
<div class="column is-4">
<VLoader
card="regular"
size="small"
:active="isLoaderActive"
>
<VCardAction
avatar="https://media.cssninja.io/content/avatars/19.jpg"
badge="/images/icons/flags/germany.svg"
title="Greta K."
subtitle="Sales Manager"
>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quibusnam
praeteritis? At multis se probavit. Quoniam, si dis placet, ab Epicuro
loqui discimus. Et ille ridens.
</p>
</VCardAction>
</VLoader>
</div>
<div class="column is-4">
<VLoader
card="regular"
size="small"
:active="isLoaderActive"
translucent
>
<VCardAction
avatar="https://media.cssninja.io/content/avatars/19.jpg"
badge="/images/icons/flags/germany.svg"
title="Greta K."
subtitle="Sales Manager"
>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quibusnam
praeteritis? At multis se probavit. Quoniam, si dis placet, ab Epicuro
loqui discimus. Et ille ridens.
</p>
</VCardAction>
</VLoader>
</div>
<div class="column is-4">
<VLoader
card="smooth"
:active="isLoaderActive"
>
<VCardAction
avatar="https://media.cssninja.io/content/avatars/19.jpg"
badge="/images/icons/flags/germany.svg"
title="Greta K."
subtitle="Sales Manager"
radius="smooth"
>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quibusnam
praeteritis? At multis se probavit. Quoniam, si dis placet, ab Epicuro
loqui discimus. Et ille ridens.
</p>
</VCardAction>
</VLoader>
</div>
<div class="column is-4">
<VLoader
card="rounded"
size="large"
:active="isLoaderActive"
>
<VCardAction
avatar="https://media.cssninja.io/content/avatars/19.jpg"
badge="/images/icons/flags/germany.svg"
title="Greta K."
subtitle="Sales Manager"
radius="rounded"
>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quibusnam
praeteritis? At multis se probavit. Quoniam, si dis placet, ab Epicuro
loqui discimus. Et ille ridens.
</p>
</VCardAction>
</VLoader>
</div>
<div class="column is-4">
<VLoader
card="rounded"
size="xl"
:active="isLoaderActive"
>
<VCardAction
avatar="https://media.cssninja.io/content/avatars/19.jpg"
badge="/images/icons/flags/germany.svg"
title="Greta K."
subtitle="Sales Manager"
radius="rounded"
>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quibusnam
praeteritis? At multis se probavit. Quoniam, si dis placet, ab Epicuro
loqui discimus. Et ille ridens.
</p>
</VCardAction>
</VLoader>
</div>
</div>
<DocumentationMeta
name="VLoader"
:meta="VLoaderMeta"
/>
</div>
</div>
</div>
</template>

63
src/pages/components/markdown-editor.vue Normal file
View File

@@ -0,0 +1,63 @@
<script setup lang="ts">
import { VMarkdownEditorMeta } from '/@src/data/documentation/components-meta'
const markdownContainer = ref<HTMLElement>()
const toc = useMarkdownToc(markdownContainer)
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'VMarkdownEditor'
})
useHead({
title: 'VMarkdownEditor - Components - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'VMarkdownEditor',
to: '/components/markdown-editor',
},
]"
/>
<div class="columns">
<div
ref="markdownContainer"
:class="[toc.length > 0 ? 'is-9' : 'is-12']"
class="column doc-column stay-focus-container"
>
<VMarkdownEditorBaseDocumentation />
<VMarkdownEditorToolbarDocumentation />
<VMarkdownEditorCustomPreviewDocumentation />
<DocumentationMeta
name="VMarkdownEditor"
:meta="VMarkdownEditorMeta"
/>
</div>
<div
v-if="toc.length"
class="column is-3 toc-column"
>
<DocumentationToc :toc="toc" />
</div>
</div>
</div>
</template>

79
src/pages/components/markdown-preview.vue Normal file
View File

@@ -0,0 +1,79 @@
<script setup lang="ts">
import { demoMarkdown } from '/@src/data/documentation/markdown'
import { VMarkdownPreviewMeta } from '/@src/data/documentation/components-meta'
const markdownContainer = ref<HTMLElement>()
const toc = useMarkdownToc(markdownContainer)
const { y } = useWindowScroll()
const isScrolling = computed(() => {
return y.value > 30
})
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'VMarkdownPreview'
})
useHead({
title: 'VMarkdownPreview - Components - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'VMarkdownPreview',
to: '/components/markdown-preview',
},
]"
/>
<div class="columns">
<div
ref="markdownContainer"
:class="[toc.length > 0 ? 'is-9' : 'is-12']"
class="column doc-column stay-focus-container"
>
<VMarkdownPreviewBaseDocumentation />
<DocumentationDemoCard class="mt-4">
<div
class="card-inner"
:class="{ 'is-scrolling': isScrolling }"
>
<VMarkdownPreview
size="medium"
max-width="small"
:source="demoMarkdown"
/>
</div>
</DocumentationDemoCard>
<DocumentationMeta
name="VMarkdownPreview"
:meta="VMarkdownPreviewMeta"
/>
</div>
<div
v-if="toc.length"
class="column is-3 toc-column"
>
<DocumentationToc :toc="toc" />
</div>
</div>
</div>
</template>

65
src/pages/components/message.vue Normal file
View File

@@ -0,0 +1,65 @@
<script setup lang="ts">
import { VMessageMeta } from '/@src/data/documentation/components-meta'
const markdownContainer = ref<HTMLElement>()
const toc = useMarkdownToc(markdownContainer)
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'VMessage'
})
useHead({
title: 'VMessage - Components - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'VMessage',
to: '/components/message',
},
]"
/>
<div class="columns">
<div
ref="markdownContainer"
:class="[toc.length > 0 ? 'is-9' : 'is-12']"
class="column doc-column stay-focus-container"
>
<!--Message-->
<VMessageBaseDocumentation />
<!--Message Colors-->
<VMessageColorsDocumentation />
<DocumentationMeta
name="VMessage"
:meta="VMessageMeta"
/>
</div>
<div
v-if="toc.length"
class="column is-3 toc-column"
>
<DocumentationToc :toc="toc" />
</div>
</div>
</div>
</template>

914
src/pages/components/modal.vue Normal file
View File

@@ -0,0 +1,914 @@
<script setup lang="ts">
import { VModalMeta } from '/@src/data/documentation/components-meta'
const markdownContainer = ref<HTMLElement>()
const toc = useMarkdownToc(markdownContainer)
const leftActionsOpen = ref(false)
const centeredActionsOpen = ref(false)
const rightActionsOpen = ref(false)
const customLabelActionsOpen = ref(false)
const smallOpen = ref(false)
const standardOpen = ref(false)
const mediumOpen = ref(false)
const largeOpen = ref(false)
const bigOpen = ref(false)
const smallFormOpen = ref(false)
const standardFormOpen = ref(false)
const mediumFormOpen = ref(false)
const largeFormOpen = ref(false)
const bigFormOpen = ref(false)
const noscrollOpen = ref(false)
const nocloseOpen = ref(false)
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'VModal'
})
useHead({
title: 'VModal - Components - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'VModal',
to: '/components/modal',
},
]"
/>
<div class="columns is-multiline">
<div
ref="markdownContainer"
:class="[toc.length > 0 ? 'is-9' : 'is-12']"
class="column doc-column stay-focus-container"
>
<!--VModal-->
<VModalBaseDocumentation />
<div class="buttons mb-6">
<VButton
bold
@click="leftActionsOpen = true"
>
Left Actions
</VButton>
<VButton
bold
@click="centeredActionsOpen = true"
>
Center Actions
</VButton>
<VButton
bold
@click="rightActionsOpen = true"
>
Right Actions
</VButton>
<VButton
bold
@click="customLabelActionsOpen = true"
>
Custom label
</VButton>
</div>
<!--VModal sizes-->
<VModalSizesDocumentation />
<div class="buttons mb-6">
<VButton
bold
@click="smallOpen = true"
>
Small Modal
</VButton>
<VButton
bold
@click="standardOpen = true"
>
Standard Modal
</VButton>
<VButton
bold
@click="mediumOpen = true"
>
Medium Modal
</VButton>
<VButton
bold
@click="largeOpen = true"
>
Large Modal
</VButton>
<VButton
bold
@click="bigOpen = true"
>
Big Modal
</VButton>
</div>
<!--VModal forms-->
<VModalFormsDocumentation />
<div class="buttons mb-6">
<VButton
bold
@click="smallFormOpen = true"
>
Small Modal
</VButton>
<VButton
bold
@click="standardFormOpen = true"
>
Standard Modal
</VButton>
<VButton
bold
@click="mediumFormOpen = true"
>
Medium Modal
</VButton>
<VButton
bold
@click="largeFormOpen = true"
>
Large Modal
</VButton>
<VButton
bold
@click="bigFormOpen = true"
>
Big Modal
</VButton>
</div>
<!--VModal options-->
<VModalOptionsDocumentation />
<div class="buttons mb-6">
<VButton
bold
@click="noscrollOpen = true"
>
Scroll disabled
</VButton>
<VButton
bold
@click="nocloseOpen = true"
>
No background close handler
</VButton>
</div>
<DocumentationMeta
name="VModal"
:meta="VModalMeta"
/>
</div>
<div
v-if="toc.length"
class="column is-3 toc-column"
>
<DocumentationToc :toc="toc" />
</div>
</div>
<VModal
title="Standard actions"
:open="leftActionsOpen"
@close="leftActionsOpen = false"
>
<template #content>
<VPlaceholderSection
title="Go Premium"
subtitle="Unlock more features and business tools by going premium"
/>
</template>
<template #action="{ close }">
<VButton
color="primary"
raised
@click="close()"
>
Confirm
</VButton>
</template>
</VModal>
<VModal
title="Centered actions"
:open="centeredActionsOpen"
actions="center"
@close="centeredActionsOpen = false"
>
<template #content>
<VPlaceholderSection
title="Go Premium"
subtitle="Unlock more features and business tools by going premium"
/>
</template>
<template #action="{ close }">
<VButton
color="primary"
raised
@click="close()"
>
Confirm
</VButton>
</template>
</VModal>
<VModal
title="Right actions"
:open="rightActionsOpen"
actions="right"
@close="rightActionsOpen = false"
>
<template #content>
<VPlaceholderSection
title="Go Premium"
subtitle="Unlock more features and business tools by going premium"
/>
</template>
<template #action="{ close }">
<VButton
color="primary"
raised
@click="close()"
>
Confirm
</VButton>
</template>
</VModal>
<VModal
title="Custom Label"
:open="customLabelActionsOpen"
actions="right"
cancel-label="Return"
@close="customLabelActionsOpen = false"
>
<template #content>
<VPlaceholderSection
title="Go Premium"
subtitle="Unlock more features and business tools by going premium"
/>
</template>
</VModal>
<VModal
:open="smallOpen"
title="Invitation"
size="small"
actions="center"
rounded
@close="smallOpen = false"
>
<template #content>
<VPlaceholderSection
title="You were invited"
subtitle="Jimmy H. invited you to join the Heartman &amp; Sons project."
>
<template #image>
<VAvatar
picture="https://media.cssninja.io/content/avatars/22.jpg"
badge="/images/icons/flags/united-states-of-america.svg"
/>
</template>
</VPlaceholderSection>
</template>
<template #action="{ close }">
<VButton
color="primary"
rounded
raised
@click="close()"
>
Confirm
</VButton>
</template>
</VModal>
<VModal
:open="standardOpen"
title="Invitation"
actions="center"
rounded
@close="standardOpen = false"
>
<template #content>
<VPlaceholderSection
title="You were invited"
subtitle="Jimmy H. invited you to join the Heartman &amp; Sons project."
>
<template #image>
<VAvatar
picture="https://media.cssninja.io/content/avatars/22.jpg"
badge="/images/icons/flags/united-states-of-america.svg"
/>
</template>
</VPlaceholderSection>
</template>
<template #action="{ close }">
<VButton
color="primary"
rounded
raised
@click="close()"
>
Confirm
</VButton>
</template>
</VModal>
<VModal
:open="mediumOpen"
title="Invitation"
size="medium"
actions="center"
rounded
@close="mediumOpen = false"
>
<template #content>
<VPlaceholderSection
title="You were invited"
subtitle="Jimmy H. invited you to join the Heartman &amp; Sons project."
>
<template #image>
<VAvatar
picture="https://media.cssninja.io/content/avatars/22.jpg"
badge="/images/icons/flags/united-states-of-america.svg"
/>
</template>
</VPlaceholderSection>
</template>
<template #action="{ close }">
<VButton
color="primary"
rounded
raised
@click="close()"
>
Confirm
</VButton>
</template>
</VModal>
<VModal
:open="largeOpen"
title="Invitation"
size="large"
actions="center"
rounded
@close="largeOpen = false"
>
<template #content>
<VPlaceholderSection
title="You were invited"
subtitle="Jimmy H. invited you to join the Heartman &amp; Sons project."
>
<template #image>
<VAvatar
picture="https://media.cssninja.io/content/avatars/22.jpg"
badge="/images/icons/flags/united-states-of-america.svg"
/>
</template>
</VPlaceholderSection>
</template>
<template #action="{ close }">
<VButton
color="primary"
rounded
raised
@click="close()"
>
Confirm
</VButton>
</template>
</VModal>
<VModal
:open="bigOpen"
title="Invitation"
size="big"
actions="center"
rounded
@close="bigOpen = false"
>
<template #content>
<VPlaceholderSection
title="You were invited"
subtitle="Jimmy H. invited you to join the Heartman &amp; Sons project."
>
<template #image>
<VAvatar
picture="https://media.cssninja.io/content/avatars/22.jpg"
badge="/images/icons/flags/united-states-of-america.svg"
/>
</template>
</VPlaceholderSection>
</template>
<template #action="{ close }">
<VButton
color="primary"
rounded
raised
@click="close()"
>
Confirm
</VButton>
</template>
</VModal>
<VModal
is="form"
method="post"
novalidate
:open="smallFormOpen"
title="Leave a Comment"
size="small"
actions="right"
@submit.prevent="smallFormOpen = false"
@close="smallFormOpen = false"
>
<template #content>
<div class="modal-form">
<VField label="Username *">
<VControl>
<VInput
type="text"
placeholder="Username"
/>
</VControl>
</VField>
<VField label="Email *">
<VControl>
<VInput
type="text"
placeholder="Email Address"
/>
</VControl>
</VField>
<VField label="Comment *">
<VControl>
<VTextarea
rows="4"
placeholder="Your message..."
/>
</VControl>
</VField>
</div>
</template>
<template #action>
<VButton
type="submit"
color="primary"
raised
>
Publish
</VButton>
</template>
</VModal>
<VModal
is="form"
method="post"
novalidate
:open="standardFormOpen"
title="Leave a Comment"
actions="right"
@submit.prevent="standardFormOpen = false"
@close="standardFormOpen = false"
>
<template #content>
<div class="modal-form">
<VField label="Username *">
<VControl>
<VInput
type="text"
placeholder="Username"
/>
</VControl>
</VField>
<VField label="Email *">
<VControl>
<VInput
type="text"
placeholder="Email Address"
/>
</VControl>
</VField>
<VField label="Comment *">
<VControl>
<VTextarea
rows="4"
placeholder="Your message..."
/>
</VControl>
</VField>
</div>
</template>
<template #action>
<VButton
type="submit"
color="primary"
raised
>
Publish
</VButton>
</template>
</VModal>
<VModal
is="form"
method="post"
novalidate
:open="mediumFormOpen"
size="medium"
title="Horizontal Form"
actions="right"
@submit.prevent="mediumFormOpen = false"
@close="mediumFormOpen = false"
>
<template #content>
<div class="modal-form">
<VField
label="Username *"
horizontal
>
<VControl expanded>
<VInput
type="text"
placeholder="Username"
/>
</VControl>
</VField>
<VField
label="Email *"
horizontal
>
<VControl expanded>
<VInput
type="text"
placeholder="Username"
/>
</VControl>
</VField>
<VField
label="Comment *"
horizontal
>
<VControl expanded>
<VTextarea
rows="4"
placeholder="Your message..."
/>
</VControl>
</VField>
</div>
</template>
<template #action>
<VButton
type="submit"
color="primary"
raised
>
Publish
</VButton>
</template>
</VModal>
<VModal
is="form"
method="post"
novalidate
:open="largeFormOpen"
size="large"
title="Create Project"
actions="right"
@submit.prevent="largeFormOpen = false"
@close="largeFormOpen = false"
>
<template #content>
<div class="modal-form">
<div class="columns is-multiline">
<div class="column is-12">
<VField label="Project Name *">
<VControl>
<VInput
type="text"
placeholder="Ex: A cool project"
/>
</VControl>
</VField>
</div>
<div class="column is-6">
<VField label="Project Budget *">
<VControl>
<VInput
type="text"
placeholder="Ex: $3,500"
/>
</VControl>
</VField>
</div>
<div class="column is-6">
<VField label="Project URL *">
<VControl>
<VInput
type="text"
class="VInput"
placeholder="Ex: https://project.com"
/>
</VControl>
</VField>
</div>
<div class="column is-12">
<VField label="Description *">
<VControl>
<VTextarea
rows="3"
placeholder="Details about the project..."
/>
</VControl>
</VField>
</div>
</div>
</div>
</template>
<template #action>
<VButton
type="submit"
color="primary"
raised
>
Save Changes
</VButton>
</template>
</VModal>
<VModal
is="form"
:open="bigFormOpen"
size="large"
title="Create Project"
actions="right"
@submit.prevent="bigFormOpen = false"
@close="bigFormOpen = false"
>
<template #content>
<div class="modal-form">
<div class="columns is-multiline">
<div class="column is-12">
<VField label="Project Name *">
<VControl>
<VInput
type="text"
placeholder="Ex: A cool project"
/>
</VControl>
</VField>
</div>
<div class="column is-6">
<VField
class="is-image-select"
label="Project Member"
>
<VControl>
<Multiselect
placeholder="Select employees"
track-by="name"
label="name"
:search="true"
:options="[
{
value: 'alice',
name: 'Alice Carasca',
image: 'https://media.cssninja.io/content/avatars/7.jpg',
},
{
value: 'erik',
name: 'Erik Kovalsky',
image: '/images/avatars/svg/vuero-1.svg',
},
{
value: 'melany',
name: 'melany Wallace',
image: 'https://media.cssninja.io/content/avatars/25.jpg',
},
{
value: 'tara',
name: 'Tara Svenson',
image: 'https://media.cssninja.io/content/avatars/13.jpg',
},
{
value: 'mary',
name: 'Mary Lebowski',
image: 'https://media.cssninja.io/content/avatars/5.jpg',
},
{
value: 'irina',
name: 'Irina Vierbovsky',
image: 'https://media.cssninja.io/content/avatars/23.jpg',
},
{
value: 'jonathan',
name: 'Jonathan Krugger',
image: 'https://media.cssninja.io/content/avatars/32.jpg',
},
]"
:max-height="145"
>
<template #singlelabel="{ value }">
<div class="multiselect-single-label">
<img
class="select-label-icon"
:src="value.image"
alt=""
>
{{ value.name }}
</div>
</template>
<template #option="{ option }">
<img
class="select-option-icon"
:src="option.image"
alt=""
>
{{ option.name }}
</template>
</Multiselect>
</VControl>
</VField>
</div>
<div class="column is-6">
<VField
class="is-image-select"
label="Project Type *"
>
<VControl>
<Multiselect
placeholder="Select language"
track-by="name"
label="name"
:search="true"
:options="[
{
value: 'javascript',
name: 'Javascript',
image: '/images/icons/stacks/js.svg',
},
{
value: 'reactjs',
name: 'ReactJS',
image: '/images/icons/stacks/reactjs.svg',
},
{
value: 'vuejs',
name: 'VueJS',
image: '/images/icons/stacks/vuejs.svg',
},
]"
:max-height="145"
>
<template #singlelabel="{ value }">
<div class="multiselect-single-label">
<img
class="select-label-icon"
:src="value.image"
alt=""
>
{{ value.name }}
</div>
</template>
<template #option="{ option }">
<img
class="select-option-icon"
:src="option.image"
alt=""
>
{{ option.name }}
</template>
</Multiselect>
</VControl>
</VField>
</div>
<div class="column is-6">
<VField label="Project Budget *">
<VControl>
<VInput
type="text"
placeholder="Ex: $3,500"
/>
</VControl>
</VField>
</div>
<div class="column is-6">
<VField label="Project URL *">
<VControl>
<VInput
type="text"
class="VInput"
placeholder="Ex: https://project.com"
/>
</VControl>
</VField>
</div>
<div class="column is-12">
<VField label="Description *">
<VControl>
<VTextarea
rows="3"
placeholder="Details about the project..."
/>
</VControl>
</VField>
</div>
</div>
</div>
</template>
<template #action>
<VButton
type="submit"
color="primary"
raised
>
Save Changes
</VButton>
</template>
</VModal>
<VModal
:open="noscrollOpen"
title="Invitation"
size="small"
actions="center"
noscroll
@close="noscrollOpen = false"
>
<template #content>
<VPlaceholderSection
title="Go Premium"
subtitle="Unlock more features and business tools by going premium"
/>
</template>
<template #action="{ close }">
<VButton
color="primary"
raised
@click="close()"
>
Confirm
</VButton>
</template>
</VModal>
<VModal
:open="nocloseOpen"
title="Invitation"
size="small"
actions="center"
noclose
@close="nocloseOpen = false"
>
<template #content>
<VPlaceholderSection
title="Go Premium"
subtitle="Unlock more features and business tools by going premium"
/>
</template>
<template #action="{ close }">
<VButton
color="primary"
raised
@click="close()"
>
Confirm
</VButton>
</template>
</VModal>
</div>
</template>

77
src/pages/components/pagination.vue Normal file
View File

@@ -0,0 +1,77 @@
<script setup lang="ts">
import { VFlexPaginationMeta } from '/@src/data/documentation/components-meta'
const route = useRoute()
const currentPage = computed(() => {
try {
return Number.parseInt(route.query.page as string) || 1
}
catch {
// discard
}
return 1
})
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'VFlexPagination'
})
useHead({
title: 'VFlexPagination - Components - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'VFlexPagination',
to: '/components/pagination',
},
]"
/>
<div class="columns">
<div class="column is-12">
<!--Flex Table-->
<VFlexPaginationBaseDocumentation />
<div class="mt-4">
<VFlexPagination
:item-per-page="8"
:total-items="512"
:current-page="currentPage"
/>
</div>
<div class="mt-4 mb-6">
<VFlexPagination
:item-per-page="8"
:total-items="512"
:current-page="currentPage"
:max-links-displayed="6"
/>
</div>
<DocumentationMeta
name="VFlexPagination"
:meta="VFlexPaginationMeta"
/>
</div>
</div>
</div>
</template>

90
src/pages/components/placeholder-page.vue Normal file
View File

@@ -0,0 +1,90 @@
<script setup lang="ts">
import { VPlaceholderPageMeta } from '/@src/data/documentation/components-meta'
const markdownContainer = ref<HTMLElement>()
const toc = useMarkdownToc(markdownContainer)
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'VPlaceholderPage'
})
useHead({
title: 'VPlaceholderPage - Components - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'VPlaceholderPage',
to: '/components/placeholder-page',
},
]"
/>
<div class="columns is-multiline">
<div
ref="markdownContainer"
:class="[toc.length > 0 ? 'is-9' : 'is-12']"
class="column doc-column stay-focus-container"
>
<VPlaceholderPage
title="We couldn't find any matching results."
subtitle="Too bad. Looks like we couldn't find any matching results for the
search terms you've entered. Please try different search terms or
criteria."
larger
>
<template #image>
<img
class="light-image"
src="/images/illustrations/placeholders/search-1.svg"
alt=""
>
<img
class="dark-image"
src="/images/illustrations/placeholders/search-1-dark.svg"
alt=""
>
</template>
<template #action>
<VButtons align="centered">
<VButton>Go to the catalog</VButton>
<VButton color="primary">
Search everywhere
</VButton>
</VButtons>
</template>
</VPlaceholderPage>
<div class="pt-6">
<DocumentationMeta
name="VPlaceholderPage"
:meta="VPlaceholderPageMeta"
/>
</div>
</div>
<div
v-if="toc.length"
class="column is-3 toc-column"
>
<DocumentationToc :toc="toc" />
</div>
</div>
</div>
</template>

92
src/pages/components/placeholder-section.vue Normal file
View File

@@ -0,0 +1,92 @@
<script setup lang="ts">
import { VPlaceholderSectionMeta } from '/@src/data/documentation/components-meta'
const markdownContainer = ref<HTMLElement>()
const toc = useMarkdownToc(markdownContainer)
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'VPlaceholderSection'
})
useHead({
title: 'VPlaceholderSection - Components - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'VPlaceholderSection',
to: '/components/placeholder-section',
},
]"
/>
<div class="columns is-multiline">
<div
ref="markdownContainer"
:class="[toc.length > 0 ? 'is-9' : 'is-12']"
class="column doc-column stay-focus-container"
>
<div class="columns is-vcentered">
<div class="column is-6">
<VCard>
<VPlaceholderSection
title="You were invited"
subtitle="Jimmy H. invited you to join the Heartman &amp; Sons project."
>
<template #image>
<VAvatar
picture="https://media.cssninja.io/content/avatars/22.jpg"
badge="/images/icons/flags/united-states-of-america.svg"
/>
</template>
</VPlaceholderSection>
</VCard>
</div>
<div class="column is-6">
<VPlaceholderSection
title="Go Premium"
subtitle="Unlock more features and business tools by going premium"
>
<template #action>
<VButtons align="centered">
<VButton color="primary">
View plans
</VButton>
</VButtons>
</template>
</VPlaceholderSection>
</div>
</div>
<DocumentationMeta
name="VPlaceholderSection"
:meta="VPlaceholderSectionMeta"
/>
</div>
<div
v-if="toc.length"
class="column is-3 toc-column"
>
<DocumentationToc :toc="toc" />
</div>
</div>
</div>
</template>

65
src/pages/components/placeload/avatar.vue Normal file
View File

@@ -0,0 +1,65 @@
<script setup lang="ts">
import { VPlaceloadAvatarMeta } from '/@src/data/documentation/components-meta'
const markdownContainer = ref<HTMLElement>()
const toc = useMarkdownToc(markdownContainer)
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'VPlaceloadAvatar'
})
useHead({
title: 'VPlaceloadAvatar - Components - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'VPlaceloadAvatar',
to: '/components/placeload/avatar',
},
]"
/>
<div class="columns">
<div
ref="markdownContainer"
:class="[toc.length > 0 ? 'is-9' : 'is-12']"
class="column doc-column stay-focus-container"
>
<!--Loader-->
<PlaceloadAvatarBaseDocumentation />
<PlaceloadAvatarWrapDocumentation />
<PlaceloadAvatarSizeDocumentation />
<PlaceloadAvatarRadiusDocumentation />
<DocumentationMeta
name="VPlaceloadAvatar"
:meta="VPlaceloadAvatarMeta"
/>
</div>
<div
v-if="toc.length"
class="column is-3 toc-column"
>
<DocumentationToc :toc="toc" />
</div>
</div>
</div>
</template>

66
src/pages/components/placeload/index.vue Normal file
View File

@@ -0,0 +1,66 @@
<script setup lang="ts">
import { VPlaceloadMeta } from '/@src/data/documentation/components-meta'
const markdownContainer = ref<HTMLElement>()
const toc = useMarkdownToc(markdownContainer)
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'VPlaceload'
})
useHead({
title: 'VPlaceload - Components - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'VPlaceload',
to: '/components/placeload/',
},
]"
/>
<div class="columns">
<div
ref="markdownContainer"
:class="[toc.length > 0 ? 'is-9' : 'is-12']"
class="column doc-column stay-focus-container"
>
<!--Loader-->
<PlaceloadBaseDocumentation />
<PlaceloadWrapDocumentation />
<PlaceloadSizeDocumentation />
<DocumentationMeta
name="VPlaceload"
:meta="VPlaceloadMeta"
/>
</div>
<div
v-if="toc.length"
class="column is-3 toc-column"
>
<DocumentationToc :toc="toc" />
</div>
</div>
</div>
</template>

62
src/pages/components/placeload/text.vue Normal file
View File

@@ -0,0 +1,62 @@
<script setup lang="ts">
import { VPlaceloadTextMeta } from '/@src/data/documentation/components-meta'
const markdownContainer = ref<HTMLElement>()
const toc = useMarkdownToc(markdownContainer)
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'VPlaceloadText'
})
useHead({
title: 'VPlaceloadText - Components - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'VPlaceloadText',
to: '/components/placeload/text',
},
]"
/>
<div class="columns">
<div
ref="markdownContainer"
:class="[toc.length > 0 ? 'is-9' : 'is-12']"
class="column doc-column stay-focus-container"
>
<PlaceloadTextBaseDocumentation />
<PlaceloadTextSizeDocumentation />
<DocumentationMeta
name="VPlaceloadText"
:meta="VPlaceloadTextMeta"
/>
</div>
<div
v-if="toc.length"
class="column is-3 toc-column"
>
<DocumentationToc :toc="toc" />
</div>
</div>
</div>
</template>

131
src/pages/components/plugins/billboard-js.vue Normal file
View File

@@ -0,0 +1,131 @@
<script setup lang="ts">
import { VBillboardJSMeta } from '/@src/data/documentation/components-meta'
import { useSplineSimple } from '/@src/data/dashboards/billboardjs-demo/splineSimple'
const markdownContainer = ref<HTMLElement>()
const toc = useMarkdownToc(markdownContainer)
const themeColors = useThemeColors()
const { options } = useSplineSimple()
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'VBillboardJS'
})
useHead({
title: 'VBillboardJS - Plugins - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'Plugins',
},
{
label: 'VBillboardJS',
to: '/components/plugins/billboard-js',
},
]"
/>
<div class="columns is-multiline">
<div
ref="markdownContainer"
:class="[toc.length > 0 ? 'is-9' : 'is-12']"
class="column doc-column stay-focus-container"
>
<VBillboardJsDocumentation />
<div class="columns is-mutliline">
<div class="column is-6">
<VCard>
<VBillboardJS
:options="{
data: {
x: 'x',
columns: [
['x', 'Data A', 'Data B', 'Data C', 'Data D', 'Data E'],
['data1', 330, 350, 200, 380, 150],
['data2', 130, 100, 30, 200, 80],
['data3', 230, 153, 85, 300, 250],
],
colors: {
data1: themeColors.purple,
data2: themeColors.lime,
data3: themeColors.info,
data4: themeColors.purple,
},
type: 'radar',
labels: true,
},
radar: {
axis: {
max: 400,
},
level: {
depth: 4,
},
direction: {
clockwise: true,
},
},
size: {
height: 280,
},
padding: {
bottom: 20,
},
title: {
text: 'Radar Chart',
position: 'left',
padding: {
bottom: 20,
right: 20,
top: 0,
left: 20,
},
},
legend: {
position: 'inset',
},
}"
/>
</VCard>
</div>
<div class="column is-6">
<VCard type="smooth">
<VBillboardJS :options="options" />
</VCard>
</div>
</div>
<DocumentationMeta
name="VBillboardJS"
:meta="VBillboardJSMeta"
/>
</div>
<div
v-if="toc.length"
class="column is-3 toc-column"
>
<DocumentationToc :toc="toc" />
</div>
</div>
</div>
</template>

169
src/pages/components/plugins/notif.vue Normal file
View File

@@ -0,0 +1,169 @@
<script setup lang="ts">
const markdownContainer = ref<HTMLElement>()
const toc = useMarkdownToc(markdownContainer)
const notyf = useNotyf()
onMounted(() => {
notyf?.success('This toast is displayed when the page is mounted')
})
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'notyf'
})
useHead({
title: 'Notyf - Plugins - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'Plugins',
},
{
label: 'Notif',
to: '/components/plugins/notif',
},
]"
/>
<div class="columns is-multiline">
<div
ref="markdownContainer"
:class="[toc.length > 0 ? 'is-9' : 'is-12']"
class="column doc-column stay-focus-container"
>
<!--Success Toast-->
<NotyfSuccessDocumentation />
<div class="buttons mb-6">
<VButton
bold
@click="notyf.primary('Success Toast')"
>
Success Toast
</VButton>
</div>
<!--Error Toast-->
<NotyfErrorDocumentation />
<div class="buttons mb-6">
<VButton
bold
@click="notyf.error('Error Toast')"
>
Error Toast
</VButton>
</div>
<!--Info Toast-->
<NotyfInfoDocumentation />
<div class="buttons mb-6">
<VButton
bold
@click="notyf.info('Info Toast')"
>
Info Toast
</VButton>
</div>
<!--Warning Toast-->
<NotyfWarningDocumentation />
<div class="buttons mb-6">
<VButton
bold
@click="notyf.warning('Warning Toast')"
>
Warning Toast
</VButton>
</div>
<!--Primary Toast-->
<NotyfPrimaryDocumentation />
<div class="buttons mb-6">
<VButton
bold
@click="notyf.primary('Primary Toast')"
>
Primary Toast
</VButton>
</div>
<!--Purple Toast-->
<NotyfPurpleDocumentation />
<div class="buttons mb-6">
<VButton
bold
@click="notyf.purple('Purple Toast')"
>
Purple Toast
</VButton>
</div>
<!--Blue Toast-->
<NotyfBlueDocumentation />
<div class="buttons mb-6">
<VButton
bold
@click="notyf.blue('Blue Toast')"
>
Blue Toast
</VButton>
</div>
<!--Green Toast-->
<NotyfGreenDocumentation />
<div class="buttons mb-6">
<VButton
bold
@click="notyf.green('Green Toast')"
>
Green Toast
</VButton>
</div>
<!--Orange Toast-->
<NotyfOrangeDocumentation />
<div class="buttons mb-6">
<VButton
bold
@click="notyf.orange('Orange Toast')"
>
Orange Toast
</VButton>
</div>
</div>
<div
v-if="toc.length"
class="column is-3 toc-column"
>
<DocumentationToc :toc="toc" />
</div>
</div>
</div>
</template>

74
src/pages/components/plugins/photos-swipe.vue Normal file
View File

@@ -0,0 +1,74 @@
<script setup lang="ts">
import { VPhotosSwipeMeta } from '/@src/data/documentation/components-meta'
const markdownContainer = ref<HTMLElement>()
const toc = useMarkdownToc(markdownContainer)
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'VPhotosSwipe'
})
useHead({
title: 'VPhotosSwipe - Plugins - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'Plugins',
},
{
label: 'VPhotosSwipe',
to: '/components/plugins/photos-swipe',
},
]"
/>
<div class="columns is-multiline">
<div
ref="markdownContainer"
:class="[toc.length > 0 ? 'is-9' : 'is-12']"
class="column doc-column stay-focus-container"
>
<!--Thumbnails-->
<GalleryImagesDocumentation />
<!--Curved Thumbnails-->
<GalleryImagesCurvedDocumentation />
<!--Rounded Thumbnails-->
<GalleryImagesRoundedDocumentation />
<!--Bigger Thumbnails-->
<GalleryImagesLargerDocumentation />
<DocumentationMeta
name="VPhotosSwipe"
:meta="VPhotosSwipeMeta"
/>
</div>
<div
v-if="toc.length"
class="column is-3 toc-column"
>
<DocumentationToc :toc="toc" />
</div>
</div>
</div>
</template>

71
src/pages/components/plugins/plyr.vue Normal file
View File

@@ -0,0 +1,71 @@
<script setup lang="ts">
import { VPlyrMeta } from '/@src/data/documentation/components-meta'
const markdownContainer = ref<HTMLElement>()
const toc = useMarkdownToc(markdownContainer)
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'VPlyr'
})
useHead({
title: 'VPlyr - Plugins - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'Plugins',
},
{
label: 'VPlyr',
to: '/components/plugins/plyr',
},
]"
/>
<div class="columns is-multiline">
<div
ref="markdownContainer"
:class="[toc.length > 0 ? 'is-9' : 'is-12']"
class="column doc-column stay-focus-container"
>
<!--1:1 Video Player-->
<VideoBaseDocumentation />
<!--4:3 Video Player-->
<VideoFourDocumentation />
<!--16:9 Video Player-->
<VideoSixteenDocumentation />
<DocumentationMeta
name="VPlyr"
:meta="VPlyrMeta"
/>
</div>
<div
v-if="toc.length"
class="column is-3 toc-column"
>
<DocumentationToc :toc="toc" />
</div>
</div>
</div>
</template>

70
src/pages/components/plugins/tippy.vue Normal file
View File

@@ -0,0 +1,70 @@
<script setup lang="ts">
const markdownContainer = ref<HTMLElement>()
const toc = useMarkdownToc(markdownContainer)
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'Tippy'
})
useHead({
title: 'Tippy - Plugins - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'Plugins',
},
{
label: 'Tippy',
to: '/components/plugins/tippy',
},
]"
/>
<div class="columns is-multiline">
<div
ref="markdownContainer"
:class="[toc.length > 0 ? 'is-9' : 'is-12']"
class="column doc-column stay-focus-container"
>
<!--Text Popover-->
<PopoverBaseDocumentation />
<!--Popover Position-->
<PopoverPositionDocumentation />
<!--Avatar Popover-->
<PopoverAvatarDocumentation />
<!--Icon Popover-->
<PopoverIconDocumentation />
<!--Profile Popover-->
<PopoverComplexDocumentation />
</div>
<div
v-if="toc.length"
class="column is-3 toc-column"
>
<DocumentationToc :toc="toc" />
</div>
</div>
</div>
</template>

68
src/pages/components/progress.vue Normal file
View File

@@ -0,0 +1,68 @@
<script setup lang="ts">
import { VProgressMeta } from '/@src/data/documentation/components-meta'
const markdownContainer = ref<HTMLElement>()
const toc = useMarkdownToc(markdownContainer)
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'VProgress'
})
useHead({
title: 'VProgress - Components - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'VProgess',
to: '/components/progress',
},
]"
/>
<div class="columns">
<div
ref="markdownContainer"
:class="[toc.length > 0 ? 'is-9' : 'is-12']"
class="column doc-column stay-focus-container"
>
<!--VProgress-->
<VProgressBaseDocumentation />
<!--VProgress colors-->
<VProgressColorsDocumentation />
<!--VProgress undeterminate-->
<VProgressUndeterminateDocumentation />
<DocumentationMeta
name="VProgress"
:meta="VProgressMeta"
/>
</div>
<div
v-if="toc.length"
class="column is-3 toc-column"
>
<DocumentationToc :toc="toc" />
</div>
</div>
</div>
</template>

75
src/pages/components/radio.vue Normal file
View File

@@ -0,0 +1,75 @@
<script setup lang="ts">
import { VRadioMeta } from '/@src/data/documentation/components-meta'
const markdownContainer = ref<HTMLElement>()
const toc = useMarkdownToc(markdownContainer)
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'VRadio'
})
useHead({
title: 'VRadio - Switches Elements - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'Switches',
},
{
label: 'VRadio',
to: '/components/radio',
},
]"
/>
<div class="columns">
<div
ref="markdownContainer"
:class="[toc.length > 0 ? 'is-9' : 'is-12']"
class="column doc-column stay-focus-container"
>
<!-- @TODO -->
<!--Outlined Radio-->
<RadioOutlinedDocumentation />
<!--Outlined Square Radio-->
<RadioOutlinedSquareDocumentation />
<!--Radio Solid-->
<RadioSolidDocumentation />
<!--Radio Solid Square-->
<RadioSolidSquareDocumentation />
<DocumentationMeta
name="VRadio"
:meta="VRadioMeta"
/>
</div>
<div
v-if="toc.length"
class="column is-3 toc-column"
>
<DocumentationToc :toc="toc" />
</div>
</div>
</div>
</template>

89
src/pages/components/snack.vue Normal file
View File

@@ -0,0 +1,89 @@
<script setup lang="ts">
import { VSnackMeta } from '/@src/data/documentation/components-meta'
const markdownContainer = ref<HTMLElement>()
const toc = useMarkdownToc(markdownContainer)
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'VSnack'
})
useHead({
title: 'VSnack - Components - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'VSnack',
to: '/components/snack',
},
]"
/>
<div class="columns">
<div
ref="markdownContainer"
:class="[toc.length > 0 ? 'is-9' : 'is-12']"
class="column doc-column stay-focus-container"
>
<!--VSnack base-->
<VSnackBaseDocumentation />
<!--VSnack white-->
<VSnackWhiteDocumentation />
<!--VSnack feather-->
<VSnackFeatherDocumentation />
<!--VSnack feather solid-->
<VSnackFeatherSolidDocumentation />
<!--VSnack fa-->
<VSnackFaDocumentation />
<!--VSnack fa solid-->
<VSnackFaSolidDocumentation />
<!--VSnack line-->
<VSnackLineDocumentation />
<!--VSnack line solid-->
<VSnackLineSolidDocumentation />
<!--VSnack small image-->
<VSnackSmallImageDocumentation />
<!--VSnack small icon-->
<VSnackSmallIconDocumentation />
<DocumentationMeta
name="VSnack"
:meta="VSnackMeta"
/>
</div>
<div
v-if="toc.length"
class="column is-3 toc-column"
>
<DocumentationToc :toc="toc" />
</div>
</div>
</div>
</template>

74
src/pages/components/switch-block.vue Normal file
View File

@@ -0,0 +1,74 @@
<script setup lang="ts">
import { VSwitchBlockMeta } from '/@src/data/documentation/components-meta'
const markdownContainer = ref<HTMLElement>()
const toc = useMarkdownToc(markdownContainer)
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'VSwitchBlock'
})
useHead({
title: 'VSwitchBlock - Switches Elements - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'Switches',
},
{
label: 'VSwitchBlock',
to: '/components/switch-block',
},
]"
/>
<div class="columns">
<div
ref="markdownContainer"
:class="[toc.length > 0 ? 'is-9' : 'is-12']"
class="column doc-column stay-focus-container"
>
<!--Switch-->
<SwitchBlockDocumentation />
<!--Thin Switch-->
<SwitchBlockThinDocumentation />
<!--Switch Block-->
<SwitchBlockLabelDocumentation />
<!--Switch Block Thin-->
<SwitchBlockThinLabelDocumentation />
<DocumentationMeta
name="VSwitchBlock"
:meta="VSwitchBlockMeta"
/>
</div>
<div
v-if="toc.length"
class="column is-3 toc-column"
>
<DocumentationToc :toc="toc" />
</div>
</div>
</div>
</template>

68
src/pages/components/switch-segment.vue Normal file
View File

@@ -0,0 +1,68 @@
<script setup lang="ts">
import { VSwitchSegmentMeta } from '/@src/data/documentation/components-meta'
const markdownContainer = ref<HTMLElement>()
const toc = useMarkdownToc(markdownContainer)
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'VSwitchSegment'
})
useHead({
title: 'VSwitchSegment - Switches Elements - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'Switches',
},
{
label: 'VSwitchSegment',
to: '/components/switch-segment',
},
]"
/>
<div class="columns">
<div
ref="markdownContainer"
:class="[toc.length > 0 ? 'is-9' : 'is-12']"
class="column doc-column stay-focus-container"
>
<!--Switch-->
<SwitchSegmentDocumentation />
<!--Label-->
<SwitchSegmentLabelDocumentation />
<DocumentationMeta
name="VSwitchSegment"
:meta="VSwitchSegmentMeta"
/>
</div>
<div
v-if="toc.length"
class="column is-3 toc-column"
>
<DocumentationToc :toc="toc" />
</div>
</div>
</div>
</template>

335
src/pages/components/table.vue Normal file
View File

@@ -0,0 +1,335 @@
<script setup lang="ts">
const markdownContainer = ref<HTMLElement>()
const toc = useMarkdownToc(markdownContainer)
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'Table'
})
useHead({
title: 'Table - Components - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'Table',
to: '/components/table',
},
]"
/>
<div class="columns">
<div
ref="markdownContainer"
:class="[toc.length > 0 ? 'is-9' : 'is-12']"
class="column doc-column stay-focus-container"
>
<!--Table-->
<TableBaseDocumentation />
<VCard
radius="smooth"
class="demo-table mb-6"
>
<table
class="table is-hoverable is-fullwidth"
aria-label="Vuero basic table example"
>
<thead>
<tr>
<th scope="col">
First Name
</th>
<th scope="col">
Last Name
</th>
<th scope="col">
Position
</th>
<th
scope="col"
class="is-end"
>
<div class="dark-inverted is-flex is-justify-content-flex-end">
Actions
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tina</td>
<td>Bergmann</td>
<td>Head of Sales</td>
<td class="is-end">
<div class="is-flex is-justify-content-flex-end">
<FlexTableDropdown />
</div>
</td>
</tr>
<tr>
<td>John</td>
<td>Wistmus</td>
<td>Senior Executive</td>
<td class="is-end">
<div class="is-flex is-justify-content-flex-end">
<FlexTableDropdown />
</div>
</td>
</tr>
<tr>
<td>Sam</td>
<td>Watson</td>
<td>Software Engineer</td>
<td class="is-end">
<div class="is-flex is-justify-content-flex-end">
<FlexTableDropdown />
</div>
</td>
</tr>
<tr>
<td>Jolaine</td>
<td>Joestar</td>
<td>HR Manager</td>
<td class="is-end">
<div class="is-flex is-justify-content-flex-end">
<FlexTableDropdown />
</div>
</td>
</tr>
<tr>
<td>Anders</td>
<td>Jensen</td>
<td>Accountant</td>
<td class="is-end">
<div class="is-flex is-justify-content-flex-end">
<FlexTableDropdown />
</div>
</td>
</tr>
</tbody>
</table>
</VCard>
<!--Table striped-->
<TableStripedDocumentation />
<VCard
radius="smooth"
class="demo-table"
>
<table
class="table is-striped is-fullwidth"
aria-label="Vuero striped table example"
>
<thead>
<tr>
<th scope="col">
First Name
</th>
<th scope="col">
Last Name
</th>
<th scope="col">
Position
</th>
<th
scope="col"
class="is-end"
>
<div class="dark-inverted is-flex is-justify-content-flex-end">
Actions
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tina</td>
<td>Bergmann</td>
<td>Head of Sales</td>
<td class="is-end">
<div class="is-flex is-justify-content-flex-end">
<FlexTableDropdown />
</div>
</td>
</tr>
<tr>
<td>John</td>
<td>Wistmus</td>
<td>Senior Executive</td>
<td class="is-end">
<div class="is-flex is-justify-content-flex-end">
<FlexTableDropdown />
</div>
</td>
</tr>
<tr>
<td>Sam</td>
<td>Watson</td>
<td>Software Engineer</td>
<td class="is-end">
<div class="is-flex is-justify-content-flex-end">
<FlexTableDropdown />
</div>
</td>
</tr>
<tr>
<td>Jolaine</td>
<td>Joestar</td>
<td>HR Manager</td>
<td class="is-end">
<div class="is-flex is-justify-content-flex-end">
<FlexTableDropdown />
</div>
</td>
</tr>
<tr>
<td>Anders</td>
<td>Jensen</td>
<td>Accountant</td>
<td class="is-end">
<div class="is-flex is-justify-content-flex-end">
<FlexTableDropdown />
</div>
</td>
</tr>
</tbody>
</table>
</VCard>
<!--Table media-->
<TableMediaDocumentation />
<VCard
radius="smooth"
class="demo-table"
>
<table
class="table is-hoverable is-fullwidth"
aria-label="Vuero media table example"
>
<thead>
<tr>
<th
scope="col"
class="is-media"
/>
<th scope="col">
First Name
</th>
<th scope="col">
Last Name
</th>
<th scope="col">
Position
</th>
<th
scope="col"
class="is-end"
>
<div class="dark-inverted is-flex is-justify-content-flex-end">
Actions
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="is-media">
<VAvatar picture="https://media.cssninja.io/content/avatars/8.gif" />
</td>
<td>Tina</td>
<td>Bergmann</td>
<td>Head of Sales</td>
<td class="is-end">
<div class="is-flex is-justify-content-flex-end">
<FlexTableDropdown />
</div>
</td>
</tr>
<tr>
<td class="is-media">
<VAvatar picture="https://media.cssninja.io/content/avatars/1.gif" />
</td>
<td>John</td>
<td>Wistmus</td>
<td>Senior Executive</td>
<td class="is-end">
<div class="is-flex is-justify-content-flex-end">
<FlexTableDropdown />
</div>
</td>
</tr>
<tr>
<td class="is-media">
<VAvatar picture="https://media.cssninja.io/content/avatars/4.gif" />
</td>
<td>Sam</td>
<td>Watson</td>
<td>Software Engineer</td>
<td class="is-end">
<div class="is-flex is-justify-content-flex-end">
<FlexTableDropdown />
</div>
</td>
</tr>
<tr>
<td class="is-media">
<VAvatar
initials="JD"
color="info"
/>
</td>
<td>Jolaine</td>
<td>Joestar</td>
<td>HR Manager</td>
<td class="is-end">
<div class="is-flex is-justify-content-flex-end">
<FlexTableDropdown />
</div>
</td>
</tr>
<tr>
<td class="is-media">
<VAvatar picture="https://media.cssninja.io/content/avatars/3.gif" />
</td>
<td>Anders</td>
<td>Jensen</td>
<td>Accountant</td>
<td class="is-end">
<div class="is-flex is-justify-content-flex-end">
<FlexTableDropdown />
</div>
</td>
</tr>
</tbody>
</table>
</VCard>
</div>
<div
v-if="toc.length"
class="column is-3 toc-column"
>
<DocumentationToc :toc="toc" />
</div>
</div>
</div>
</template>

92
src/pages/components/tabs.vue Normal file
View File

@@ -0,0 +1,92 @@
<script setup lang="ts">
import { VTabsMeta } from '/@src/data/documentation/components-meta'
const markdownContainer = ref<HTMLElement>()
const toc = useMarkdownToc(markdownContainer)
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'VTabs'
})
useHead({
title: 'VTabs - Components - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'VTabs',
to: '/components/tabs',
},
]"
/>
<div class="columns">
<div
ref="markdownContainer"
:class="[toc.length > 0 ? 'is-9' : 'is-12']"
class="column doc-column stay-focus-container"
>
<!--VTabs-->
<TabsBaseDocumentation />
<!--Centered Tabs-->
<TabsCenteredDocumentation />
<!--Right Tabs-->
<TabsRightDocumentation />
<!--Iconify Tabs-->
<TabsIconifyDocumentation />
<!--Boxed Tabs-->
<TabsBoxedDocumentation />
<!--Toggle Tabs-->
<TabsToggleDocumentation />
<!--Rounded Toggle Tabs-->
<TabsRoundedDocumentation />
<!--Slider Tabs 2x-->
<TabsSliderDoubleDocumentation />
<!--Square Slider Tabs 2x-->
<TabsSliderDsquareDocumentation />
<!--Slider Tabs 3x-->
<TabsSliderTripleDocumentation />
<!--Squared Slider Tabs 3x-->
<TabsSliderTsquareDocumentation />
<DocumentationMeta
name="VTabs"
:meta="VTabsMeta"
/>
</div>
<div
v-if="toc.length"
class="column is-3 toc-column"
>
<DocumentationToc :toc="toc" />
</div>
</div>
</div>
</template>

84
src/pages/components/tag.vue Normal file
View File

@@ -0,0 +1,84 @@
<script setup lang="ts">
import { VTagMeta, VTagsMeta } from '/@src/data/documentation/components-meta'
const markdownContainer = ref<HTMLElement>()
const toc = useMarkdownToc(markdownContainer)
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'VTag'
})
useHead({
title: 'VTag - Components - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'VTag',
to: '/components/tag',
},
]"
/>
<div class="columns">
<div
ref="markdownContainer"
:class="[toc.length > 0 ? 'is-9' : 'is-12']"
class="column doc-column stay-focus-container"
>
<!--VTag base-->
<VTagBaseDocumentation />
<!--VTag rounded-->
<VTagRoundedDocumentation />
<!--VTag curved-->
<VTagCurvedDocumentation />
<!--VTag Outlined-->
<VTagOutlinedDocumentation />
<!--VTag Elevated-->
<VTagElevatedDocumentation />
<!--VTag addons-->
<VTagAddonsDocumentation />
<!--VTag list-->
<VTagListDocumentation />
<DocumentationMeta
name="VTag"
:meta="VTagMeta"
/>
<DocumentationMeta
name="VTags"
:meta="VTagsMeta"
/>
</div>
<div
v-if="toc.length"
class="column is-3 toc-column"
>
<DocumentationToc :toc="toc" />
</div>
</div>
</div>
</template>

62
src/pages/components/tooltip.vue Normal file
View File

@@ -0,0 +1,62 @@
<script setup lang="ts">
const markdownContainer = ref<HTMLElement>()
const toc = useMarkdownToc(markdownContainer)
const pageTitle = useVueroContext<string>('page-title')
onMounted(() => {
pageTitle.value = 'VTooltip'
})
useHead({
title: 'VTooltip - Components - Vuero',
})
</script>
<template>
<div>
<VBreadcrumb
with-icons
separator="bullet"
:items="[
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
to: '/',
},
{
label: 'Components',
to: '/components/',
},
{
label: 'VTooltip',
to: '/components/tooltip',
},
]"
/>
<div class="columns">
<div
ref="markdownContainer"
:class="[toc.length > 0 ? 'is-9' : 'is-12']"
class="column doc-column stay-focus-container"
>
<!-- @TODO -->
<!--Default Tooltip-->
<TooltipBaseDocumentation />
<!--Tooltip Colors-->
<TooltipColorsDocumentation />
<!--Tooltip Shapes-->
<TooltipShapesDocumentation />
</div>
<div
v-if="toc.length"
class="column is-3 toc-column"
>
<DocumentationToc :toc="toc" />
</div>
</div>
</div>
</template>