svcm/oa
1
0
Fork 0
mirror of https://git.hmsn.ink/kospo/svcm/oa.git synced 2026-03-19 21:35:11 +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

54
documentation/accordion-image/accordion-image-documentation.md Normal file
View File

@@ -0,0 +1,54 @@
### Image accordion
A nice experimental and playful CSS only image
accordion component: `<VAccordionImage />`.
Images simply stack on mobile.
Pass an **Array** to the `items` props to render the accordion.
Check markup for more details about usage.
<!--code-->
```vue
<script setup lang="ts">
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',
},
]
</script>
<template>
<div class="column is-12">
<VAccordionImage :items="accordionImagesData" />
</div>
</template>
```
<!--/code-->

40
documentation/accordion/accordion-default-documentation.md Normal file
View File

@@ -0,0 +1,40 @@
### VAccordion
Vuero provides 2 accordion components with enough styling to be able to use
them out of the box: `<VAccordion />` and `<VCollapse />`.
In the simple accordion, each item can be openened separately, whereas in the
exclusive accordion, only one item can be expanded at a time.
Pass an **Array** to the `items` props to render the accordion.
<!--code-->
```vue
<script setup lang="ts">
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 ...',
},
]
</script>
<template>
<div class="column is-6">
<VAccordion :items="data" />
</div>
<div class="column is-6">
<VAccordion :items="data" exclusive />
</div>
</template>
```
<!--/code-->

37
documentation/action/v-action-documentation.md Normal file
View File

@@ -0,0 +1,37 @@
### VAction
Vuero provides a versatile small button component named
`<VAction />` components can have different colors.
VActions can be `rounded`, `hoverable` or `grey` using the related props.
<!--code-->
```vue
<template>
<VButtons>
<VAction> Action </VAction>
<VAction rounded>
Action
</VAction>
<VAction hoverable>
Action
</VAction>
<VAction grey>
Action
</VAction>
</VButtons>
</template>
```
<!--/code-->
<!--example-->
<VButtons>
<VAction> Action </VAction>
<VAction rounded> Action </VAction>
<VAction hoverable> Action </VAction>
<VAction grey> Action </VAction>
</VButtons>
<!--/example-->

145
documentation/animated-checkbox/animated-checkbox-documentation.md Normal file
View File

@@ -0,0 +1,145 @@
---
state:
options:
- 'Option 2'
- 'Option 7'
---
### VAnimatedCheckbox
Vuero provides nicely styled switch segment when you need to
display such control in your forms. Vuero `VAnimatedCheckbox` component have
several color modififers. Available modifiers are `primary`, `success`,
`info`, `warning` and `danger`.
Please refer to the markup for more details about usage.
<!--code-->
```vue
<script setup lang="ts">
const options = ref(['Option 2', 'Option 7'])
</script>
<template>
<VField grouped>
<VFlex column-gap="1rem">
<VControl>
<VAnimatedCheckbox v-model="options" value="Option 1" />
</VControl>
<VControl>
<VAnimatedCheckbox
v-model="options"
value="Option 2"
color="primary"
checked
/>
</VControl>
<VControl>
<VAnimatedCheckbox
v-model="options"
value="Option 3"
color="success"
checked
/>
</VControl>
<VControl>
<VAnimatedCheckbox
v-model="options"
value="Option 4"
color="info"
checked
/>
</VControl>
<VControl>
<VAnimatedCheckbox
v-model="options"
value="Option 5"
color="warning"
checked
/>
</VControl>
<VControl>
<VAnimatedCheckbox
v-model="options"
value="Option 6"
color="danger"
checked
/>
</VControl>
<VControl>
<VAnimatedCheckbox
v-model="options"
value="Option 7"
color="purple"
checked
/>
</VControl>
</VFlex>
</VField>
</template>
```
<!--/code-->
<!--example-->
<VField grouped horizontal>
<VFlex column-gap="1rem">
<VControl>
<VAnimatedCheckbox
v-model="frontmatter.state.options"
value="Option 1"
/>
</VControl>
<VControl>
<VAnimatedCheckbox
v-model="frontmatter.state.options"
value="Option 2"
color="primary"
checked
/>
</VControl>
<VControl>
<VAnimatedCheckbox
v-model="frontmatter.state.options"
value="Option 3"
color="success"
checked
/>
</VControl>
<VControl>
<VAnimatedCheckbox
v-model="frontmatter.state.options"
value="Option 4"
color="info"
checked
/>
</VControl>
<VControl>
<VAnimatedCheckbox
v-model="frontmatter.state.options"
value="Option 5"
color="warning"
checked
/>
</VControl>
<VControl>
<VAnimatedCheckbox
v-model="frontmatter.state.options"
value="Option 6"
color="danger"
checked
/>
</VControl>
<VControl>
<VAnimatedCheckbox
v-model="frontmatter.state.options"
value="Option 7"
color="purple"
checked
/>
</VControl>
</VFlex>
</VField>
<!--/example-->

52
documentation/avatar-stack/avatar-stack-medium-documentation.md Normal file
View File

@@ -0,0 +1,52 @@
### Medium stack
Vuero avatars can be stacked in an slighlty overlaping line.
Use the `<VAvatarStack />` component. The component takes 2 props:
`avatars` and `size`. Available sizes are normal, `small` and `medium`.
<!--code-->
```vue
<script setup lang="ts">
const users = [
{
id: 0,
picture: 'https://media.cssninja.io/content/avatars/7.jpg',
initials: 'AC',
color: 'info',
},
{
id: 1,
picture: null,
initials: 'JP',
color: 'info',
},
// etc...
]
</script>
<template>
<VAvatarStack :avatars="users" size="medium" />
</template>
```
<!--/code-->
<!--example-->
<div class="avatar-stack">
<VAvatar picture="https://media.cssninja.io/content/avatars/7.jpg" size="medium" />
<VAvatar initials="JO" color="info" size="medium" />
<VAvatar picture="/images/avatars/svg/vuero-1.svg" size="medium" />
<VAvatar picture="https://media.cssninja.io/content/avatars/5.jpg" size="medium" />
<VAvatar initials="CP" color="success" size="medium" />
<VAvatar picture="https://media.cssninja.io/content/avatars/5.jpg" size="medium" />
<div class="v-avatar is-medium">
<span class="avatar is-more">
<span class="inner">
<span>+2</span>
</span>
</span>
</div>
</div>
<!--/example-->

53
documentation/avatar-stack/avatar-stack-regular-documentation.md Normal file
View File

@@ -0,0 +1,53 @@
### Regular stack
Vuero avatars can be stacked in an slighlty overlaping line.
Use the `<VAvatarStack />` component. The component takes 2 props:
`avatars` and `size`. Available sizes are normal, `small` and `medium`.
<!--code-->
```vue
<script setup lang="ts">
const users = [
{
id: 0,
picture: 'https://media.cssninja.io/content/avatars/7.jpg',
initials: 'AC',
color: 'info',
test: true,
},
{
id: 1,
picture: null,
initials: 'JP',
color: 'info',
},
// etc...
]
</script>
<template>
<VAvatarStack :avatars="users" />
</template>
```
<!--/code-->
<!--example-->
<div class="avatar-stack">
<VAvatar picture="https://media.cssninja.io/content/avatars/7.jpg" />
<VAvatar initials="JO" color="info" />
<VAvatar picture="/images/avatars/svg/vuero-1.svg" />
<VAvatar picture="https://media.cssninja.io/content/avatars/5.jpg" />
<VAvatar initials="CP" color="success" />
<VAvatar picture="https://media.cssninja.io/content/avatars/5.jpg" />
<div class="v-avatar">
<span class="avatar is-more">
<span class="inner">
<span>+2</span>
</span>
</span>
</div>
</div>
<!--/example-->

52
documentation/avatar-stack/avatar-stack-small-documentation.md Normal file
View File

@@ -0,0 +1,52 @@
### Small stack
Vuero avatars can be stacked in an slighlty overlaping line.
Use the `<VAvatarStack />` component. The component takes 2 props:
`avatars` and `size`. Available sizes are normal, `small` and `medium`.
<!--code-->
```vue
<script setup lang="ts">
const users = [
{
id: 0,
picture: 'https://media.cssninja.io/content/avatars/7.jpg',
initials: 'AC',
color: 'info',
},
{
id: 1,
picture: null,
initials: 'JP',
color: 'info',
},
// etc...
]
</script>
<template>
<VAvatarStack :avatars="users" size="small" />
</template>
```
<!--/code-->
<!--example-->
<div class="avatar-stack">
<VAvatar picture="https://media.cssninja.io/content/avatars/7.jpg" size="small" />
<VAvatar initials="JO" color="info" size="small" />
<VAvatar picture="/images/avatars/svg/vuero-1.svg" size="small" />
<VAvatar picture="https://media.cssninja.io/content/avatars/5.jpg" size="small" />
<VAvatar initials="CP" color="success" size="small" />
<VAvatar picture="https://media.cssninja.io/content/avatars/5.jpg" size="small" />
<div class="v-avatar is-small">
<span class="avatar is-more">
<span class="inner">
<span>+2</span>
</span>
</span>
</div>
</div>
<!--/example-->

61
documentation/avatar/avatar-badge-documentation.md Normal file
View File

@@ -0,0 +1,61 @@
### Avatar badge
Vuero avatars can have badge images attached to them.
Simply add a 1:1 ratio image URL to the avatar component using the `badge` prop.
<!--code-->
```vue
<template>
<VFlex
flex-wrap="wrap"
align-items="flex-end"
row-gap=".5rem"
column-gap=".25rem"
>
<VAvatar
picture="https://media.cssninja.io/content/avatars/7.jpg"
size="small"
badge="/images/icons/flags/united-states-of-america.svg"
/>
<VAvatar
picture="/images/avatars/svg/vuero-1.svg"
badge="/images/icons/flags/united-states-of-america.svg"
/>
<VAvatar
picture="https://media.cssninja.io/content/avatars/11.jpg"
badge="/images/icons/flags/united-states-of-america.svg"
size="medium"
/>
<VAvatar
picture="https://media.cssninja.io/content/avatars/21.jpg"
badge="/images/icons/flags/united-states-of-america.svg"
size="large"
/>
<VAvatar
picture="https://media.cssninja.io/content/avatars/13.jpg"
badge="/images/icons/flags/united-states-of-america.svg"
size="big"
/>
<VAvatar
picture="https://media.cssninja.io/content/avatars/5.jpg"
badge="/images/icons/flags/united-states-of-america.svg"
size="xl"
/>
</VFlex>
</template>
```
<!--/code-->
<!--example-->
<VFlex flex-wrap="wrap" align-items="flex-end" row-gap=".5rem" column-gap=".25rem">
<VAvatar picture="https://media.cssninja.io/content/avatars/7.jpg" size="small" badge="/images/icons/flags/united-states-of-america.svg" />
<VAvatar picture="/images/avatars/svg/vuero-1.svg" badge="/images/icons/flags/united-states-of-america.svg" />
<VAvatar picture="https://media.cssninja.io/content/avatars/11.jpg" badge="/images/icons/flags/united-states-of-america.svg" size="medium" />
<VAvatar picture="https://media.cssninja.io/content/avatars/21.jpg" badge="/images/icons/flags/united-states-of-america.svg" size="large" />
<VAvatar picture="https://media.cssninja.io/content/avatars/13.jpg" badge="/images/icons/flags/united-states-of-america.svg" size="big" />
<VAvatar picture="https://media.cssninja.io/content/avatars/5.jpg" badge="/images/icons/flags/united-states-of-america.svg" size="xl" />
</VFlex>
<!--/example-->

41
documentation/avatar/avatar-default-documentation.md Normal file
View File

@@ -0,0 +1,41 @@
### VAvatar
Vuero `<VAvatar />` components are rounded images used for media
and personal pages. Avatar sizes can be controled with 'size' prop.
Available size prop values `small`, `medium`, `large`, `big` and `xl`.
See code for more details about usage.
<!--code-->
```vue
<template>
<VFlex
flex-wrap="wrap"
align-items="flex-end"
row-gap=".5rem"
column-gap=".25rem"
>
<VAvatar picture="https://media.cssninja.io/content/avatars/7.jpg" size="small" />
<VAvatar picture="/images/avatars/svg/vuero-1.svg" />
<VAvatar picture="https://media.cssninja.io/content/avatars/11.jpg" size="medium" />
<VAvatar picture="https://media.cssninja.io/content/avatars/21.jpg" size="large" />
<VAvatar picture="https://media.cssninja.io/content/avatars/13.jpg" size="big" />
<VAvatar picture="https://media.cssninja.io/content/avatars/5.jpg" size="xl" />
</VFlex>
</template>
```
<!--/code-->
<!--example-->
<VFlex flex-wrap="wrap" align-items="flex-end" row-gap=".5rem" column-gap=".25rem">
<VAvatar picture="https://media.cssninja.io/content/avatars/7.jpg" size="small" />
<VAvatar picture="/images/avatars/svg/vuero-1.svg" />
<VAvatar picture="https://media.cssninja.io/content/avatars/11.jpg" size="medium" />
<VAvatar picture="https://media.cssninja.io/content/avatars/21.jpg" size="large" />
<VAvatar picture="https://media.cssninja.io/content/avatars/13.jpg" size="big" />
<VAvatar picture="https://media.cssninja.io/content/avatars/5.jpg" size="xl" />
</VFlex>
<!--/example-->

69
documentation/avatar/avatar-dot-colors-documentation.md Normal file
View File

@@ -0,0 +1,69 @@
### Dot colors
Avatar dots can have different colors. Set the `dotColor` prop
to `primary`, `info`, `warning`, `danger` or `grey` to change the dot color.
See code for more details about usage.
<!--code-->
```vue
<template>
<VFlex
flex-wrap="wrap"
align-items="flex-end"
row-gap=".5rem"
column-gap=".25rem"
>
<VAvatar
picture="https://media.cssninja.io/content/avatars/7.jpg"
size="medium"
dot
/>
<VAvatar
picture="/images/avatars/svg/vuero-1.svg"
size="medium"
dot
dot-color="primary"
/>
<VAvatar
picture="https://media.cssninja.io/content/avatars/11.jpg"
size="medium"
dot
dot-color="info"
/>
<VAvatar
picture="https://media.cssninja.io/content/avatars/21.jpg"
size="medium"
dot
dot-color="warning"
/>
<VAvatar
picture="https://media.cssninja.io/content/avatars/13.jpg"
size="medium"
dot
dot-color="danger"
/>
<VAvatar
picture="https://media.cssninja.io/content/avatars/5.jpg"
size="medium"
dot
dot-color="grey"
/>
</VFlex>
</template>
```
<!--/code-->
<!--example-->
<VFlex flex-wrap="wrap" align-items="flex-end" row-gap=".5rem" column-gap=".25rem">
<VAvatar picture="https://media.cssninja.io/content/avatars/7.jpg" size="medium" dot />
<VAvatar picture="/images/avatars/svg/vuero-1.svg" size="medium" dot dotColor="primary" />
<VAvatar picture="https://media.cssninja.io/content/avatars/11.jpg" size="medium" dot dotColor="info" />
<VAvatar picture="https://media.cssninja.io/content/avatars/21.jpg" size="medium" dot dotColor="warning" />
<VAvatar picture="https://media.cssninja.io/content/avatars/13.jpg" size="medium" dot dotColor="danger" />
<VAvatar picture="https://media.cssninja.io/content/avatars/5.jpg" size="medium" dot dotColor="grey" />
</VFlex>
<!--/example-->

61
documentation/avatar/avatar-dot-documentation.md Normal file
View File

@@ -0,0 +1,61 @@
### Avatar dot
Avatars can have a small dot attached to them,
if you'd like to show a user status for example.
Add the `dot` prop to the target avatar component.
See code for more details about usage.
<!--code-->
```vue
<template>
<VFlex
flex-wrap="wrap"
align-items="flex-end"
row-gap=".5rem"
column-gap=".25rem"
>
<VAvatar
picture="https://media.cssninja.io/content/avatars/7.jpg"
size="small"
dot
/>
<VAvatar picture="/images/avatars/svg/vuero-1.svg" dot />
<VAvatar
picture="https://media.cssninja.io/content/avatars/11.jpg"
size="medium"
dot
/>
<VAvatar
picture="https://media.cssninja.io/content/avatars/21.jpg"
size="large"
dot
/>
<VAvatar
picture="https://media.cssninja.io/content/avatars/13.jpg"
size="big"
dot
/>
<VAvatar
picture="https://media.cssninja.io/content/avatars/5.jpg"
size="xl"
dot
/>
</VFlex>
</template>
```
<!--/code-->
<!--example-->
<VFlex flex-wrap="wrap" align-items="flex-end" row-gap=".5rem" column-gap=".25rem">
<VAvatar picture="https://media.cssninja.io/content/avatars/7.jpg" size="small" dot />
<VAvatar picture="/images/avatars/svg/vuero-1.svg" dot />
<VAvatar picture="https://media.cssninja.io/content/avatars/11.jpg" size="medium" dot />
<VAvatar picture="https://media.cssninja.io/content/avatars/21.jpg" size="large" dot />
<VAvatar picture="https://media.cssninja.io/content/avatars/13.jpg" size="big" dot />
<VAvatar picture="https://media.cssninja.io/content/avatars/5.jpg" size="xl" dot />
</VFlex>
<!--/example-->

69
documentation/avatar/avatar-dot-squared-documentation.md Normal file
View File

@@ -0,0 +1,69 @@
### Squared dot
Avatars can have a small dot attached to them, if you'd like to
show a user status for example. Add the `dot` prop
to the target avatar component. See code for more details about usage.
<!--code-->
```vue
<template>
<VFlex
flex-wrap="wrap"
align-items="flex-end"
row-gap=".5rem"
column-gap=".25rem"
>
<VAvatar
picture="https://media.cssninja.io/content/avatars/7.jpg"
size="small"
dot
squared
/>
<VAvatar
picture="/images/avatars/svg/vuero-1.svg"
dot
squared
/>
<VAvatar
picture="https://media.cssninja.io/content/avatars/11.jpg"
size="medium"
dot
squared
/>
<VAvatar
picture="https://media.cssninja.io/content/avatars/21.jpg"
size="large"
dot
squared
/>
<VAvatar
picture="https://media.cssninja.io/content/avatars/13.jpg"
size="big"
dot
squared
/>
<VAvatar
picture="https://media.cssninja.io/content/avatars/5.jpg"
size="xl"
dot
squared
/>
</VFlex>
</template>
```
<!--/code-->
<!--example-->
<VFlex flex-wrap="wrap" align-items="flex-end" row-gap=".5rem" column-gap=".25rem">
<VAvatar picture="https://media.cssninja.io/content/avatars/7.jpg" size="small" dot squared />
<VAvatar picture="/images/avatars/svg/vuero-1.svg" dot squared />
<VAvatar picture="https://media.cssninja.io/content/avatars/11.jpg" size="medium" dot squared />
<VAvatar picture="https://media.cssninja.io/content/avatars/21.jpg" size="large" dot squared />
<VAvatar picture="https://media.cssninja.io/content/avatars/13.jpg" size="big" dot squared />
<VAvatar picture="https://media.cssninja.io/content/avatars/5.jpg" size="xl" dot squared />
</VFlex>
<!--/example-->

60
documentation/avatar/avatar-fake-badge-documentation.md Normal file
View File

@@ -0,0 +1,60 @@
### Fake badge
When the provided picture URL is null, the avatar component
falls back to a fake avatar. Fake avatars can also have badges.
See the code examples for more details about usage.
<!--code-->
```vue
<template>
<VFlex
flex-wrap="wrap"
align-items="flex-end"
row-gap=".5rem"
column-gap=".25rem"
>
<VAvatar
initials="CT"
size="small"
badge="/images/icons/flags/united-states-of-america.svg"
/>
<VAvatar initials="CT" badge="/images/icons/flags/united-states-of-america.svg" />
<VAvatar
initials="CT"
size="medium"
badge="/images/icons/flags/united-states-of-america.svg"
/>
<VAvatar
initials="CT"
size="large"
badge="/images/icons/flags/united-states-of-america.svg"
/>
<VAvatar
initials="CT"
size="big"
badge="/images/icons/flags/united-states-of-america.svg"
/>
<VAvatar
initials="CT"
size="xl"
badge="/images/icons/flags/united-states-of-america.svg"
/>
</VFlex>
</template>
```
<!--/code-->
<!--example-->
<VFlex flex-wrap="wrap" align-items="flex-end" row-gap=".5rem" column-gap=".25rem">
<VAvatar initials="CT" size="small" badge="/images/icons/flags/united-states-of-america.svg" />
<VAvatar initials="CT" badge="/images/icons/flags/united-states-of-america.svg" />
<VAvatar initials="CT" size="medium" badge="/images/icons/flags/united-states-of-america.svg" />
<VAvatar initials="CT" size="large" badge="/images/icons/flags/united-states-of-america.svg" />
<VAvatar initials="CT" size="big" badge="/images/icons/flags/united-states-of-america.svg" />
<VAvatar initials="CT" size="xl" badge="/images/icons/flags/united-states-of-america.svg" />
</VFlex>
<!--/example-->

98
documentation/avatar/avatar-fake-color-documentation.md Normal file
View File

@@ -0,0 +1,98 @@
### Fake avatar colors
Fake avatars can have different colors to break monotony.
You can change the avatar color passing one of the following values
to the `color` prop: `primary`, `success`, `info`, `warning`, `danger`,
`h-purple`, `h-orange`, `h-blue`, `h-green`, `h-red`, `h-yellow`.
Supports dark mode.
<!--code-->
```vue
<template>
<VFlex
flex-wrap="wrap"
align-items="flex-end"
row-gap=".5rem"
column-gap=".25rem"
>
<VAvatar initials="CT" size="medium" />
<VAvatar
initials="CT"
size="medium"
color="primary"
/>
<VAvatar
initials="CT"
size="medium"
color="success"
/>
<VAvatar
initials="CT"
size="medium"
color="info"
/>
<VAvatar
initials="CT"
size="medium"
color="warning"
/>
<VAvatar
initials="CT"
size="medium"
color="danger"
/>
<VAvatar
initials="CT"
size="medium"
color="h-purple"
/>
<VAvatar
initials="CT"
size="medium"
color="h-orange"
/>
<VAvatar
initials="CT"
size="medium"
color="h-blue"
/>
<VAvatar
initials="CT"
size="medium"
color="h-green"
/>
<VAvatar
initials="CT"
size="medium"
color="h-red"
/>
<VAvatar
initials="CT"
size="medium"
color="h-yellow"
/>
</VFlex>
</template>
```
<!--/code-->
<!--example-->
<VFlex flex-wrap="wrap" align-items="flex-end" row-gap=".5rem" column-gap=".25rem">
<VAvatar initials="CT" size="medium"/>
<VAvatar initials="CT" size="medium" color="primary" />
<VAvatar initials="CT" size="medium" color="success" />
<VAvatar initials="CT" size="medium" color="info" />
<VAvatar initials="CT" size="medium" color="warning" />
<VAvatar initials="CT" size="medium" color="danger" />
<VAvatar initials="CT" size="medium" color="h-purple" />
<VAvatar initials="CT" size="medium" color="h-orange" />
<VAvatar initials="CT" size="medium" color="h-blue" />
<VAvatar initials="CT" size="medium" color="h-green" />
<VAvatar initials="CT" size="medium" color="h-red" />
<VAvatar initials="CT" size="medium" color="h-yellow" />
</VFlex>
<!--/example-->

41
documentation/avatar/avatar-fake-documentation.md Normal file
View File

@@ -0,0 +1,41 @@
### Fake avatar
When the provided picture URL is null, the avatar component
falls back to a fake avatar. Same size mofifiers are available.
Use the `initials` prop to pass initials to the component.
See the code examples for more details about usage.
<!--code-->
```vue
<template>
<VFlex
flex-wrap="wrap"
align-items="flex-end"
row-gap=".5rem"
column-gap=".25rem"
>
<VAvatar initials="CT" size="small" />
<VAvatar initials="CT" />
<VAvatar initials="CT" size="medium" />
<VAvatar initials="CT" size="large" />
<VAvatar initials="CT" size="big" />
<VAvatar initials="CT" size="xl" />
</VFlex>
</template>
```
<!--/code-->
<!--example-->
<VFlex flex-wrap="wrap" align-items="flex-end" row-gap=".5rem" column-gap=".25rem">
<VAvatar initials="CT" size="small" />
<VAvatar initials="CT" />
<VAvatar initials="CT" size="medium" />
<VAvatar initials="CT" size="large" />
<VAvatar initials="CT" size="big" />
<VAvatar initials="CT" size="xl" />
</VFlex>
<!--/example-->

61
documentation/avatar/avatar-fake-square-documentation.md Normal file
View File

@@ -0,0 +1,61 @@
### Fake squared
When the provided picture URL is null, the avatar component
falls back to a fake avatar. Same size mofifiers are available.
Use the `initials` prop to pass initials to the component.
See the code examples for more details about usage.
<!--code-->
```vue
<template>
<VFlex
flex-wrap="wrap"
align-items="flex-end"
row-gap=".5rem"
column-gap=".25rem"
>
<VAvatar
initials="CT"
size="small"
squared
/>
<VAvatar initials="CT" squared />
<VAvatar
initials="CT"
size="medium"
squared
/>
<VAvatar
initials="CT"
size="large"
squared
/>
<VAvatar
initials="CT"
size="big"
squared
/>
<VAvatar
initials="CT"
size="xl"
squared
/>
</VFlex>
</template>
```
<!--/code-->
<!--example-->
<VFlex flex-wrap="wrap" align-items="flex-end" row-gap=".5rem" column-gap=".25rem">
<VAvatar initials="CT" size="small" squared />
<VAvatar initials="CT" squared />
<VAvatar initials="CT" size="medium" squared />
<VAvatar initials="CT" size="large" squared />
<VAvatar initials="CT" size="big" squared />
<VAvatar initials="CT" size="xl" squared />
</VFlex>
<!--/example-->

113
documentation/avatar/avatar-fake-squared-color-documentation.md Normal file
View File

@@ -0,0 +1,113 @@
### Fake squared colors
Fake avatars can have different colors to break monotony.
You can change the avatar color passing one of the following
values to the `color` prop: `primary`, `success`, `info`, `warning`,
`danger`, `h-purple`, `h-orange`, `h-blue`, `h-green`, `h-red`, `h-yellow`.
Supports dark mode.
<!--code-->
```vue
<template>
<VFlex
flex-wrap="wrap"
align-items="flex-end"
row-gap=".5rem"
column-gap=".25rem"
>
<VAvatar
initials="CT"
size="medium"
squared
/>
<VAvatar
initials="CT"
size="medium"
color="primary"
squared
/>
<VAvatar
initials="CT"
size="medium"
color="success"
squared
/>
<VAvatar
initials="CT"
size="medium"
color="info"
squared
/>
<VAvatar
initials="CT"
size="medium"
color="warning"
squared
/>
<VAvatar
initials="CT"
size="medium"
color="danger"
squared
/>
<VAvatar
initials="CT"
size="medium"
color="h-purple"
squared
/>
<VAvatar
initials="CT"
size="medium"
color="h-orange"
squared
/>
<VAvatar
initials="CT"
size="medium"
color="h-blue"
squared
/>
<VAvatar
initials="CT"
size="medium"
color="h-green"
squared
/>
<VAvatar
initials="CT"
size="medium"
color="h-red"
squared
/>
<VAvatar
initials="CT"
size="medium"
color="h-yellow"
squared
/>
</VFlex>
</template>
```
<!--/code-->
<!--example-->
<VFlex flex-wrap="wrap" align-items="flex-end" row-gap=".5rem" column-gap=".25rem">
<VAvatar initials="CT" size="medium" squared/>
<VAvatar initials="CT" size="medium" color="primary" squared />
<VAvatar initials="CT" size="medium" color="success" squared />
<VAvatar initials="CT" size="medium" color="info" squared />
<VAvatar initials="CT" size="medium" color="warning" squared />
<VAvatar initials="CT" size="medium" color="danger" squared />
<VAvatar initials="CT" size="medium" color="h-purple" squared />
<VAvatar initials="CT" size="medium" color="h-orange" squared />
<VAvatar initials="CT" size="medium" color="h-blue" squared />
<VAvatar initials="CT" size="medium" color="h-green" squared />
<VAvatar initials="CT" size="medium" color="h-red" squared />
<VAvatar initials="CT" size="medium" color="h-yellow" squared />
</VFlex>
<!--/example-->

62
documentation/avatar/avatar-handle-fallback-documentation.md Normal file
View File

@@ -0,0 +1,62 @@
### Fallback avatar
Vuero Avatars automatically fall back to a placeholder
when no valid URL is provided for the `picture` prop.
<!--code-->
```vue
<template>
<VFlex
flex-wrap="wrap"
align-items="flex-end"
row-gap=".5rem"
column-gap=".25rem"
>
<VAvatar
placeholder="https://via.placeholder.com/64?text=32x32"
picture="no-file.jpg"
size="small"
/>
<VAvatar
placeholder="https://via.placeholder.com/80?text=40x40"
picture="no-file.jpg"
/>
<VAvatar
placeholder="https://via.placeholder.com/100?text=50x50"
picture="no-file.jpg"
size="medium"
/>
<VAvatar
placeholder="https://via.placeholder.com/136?text=68x68"
picture="no-file.jpg"
size="large"
/>
<VAvatar
placeholder="https://via.placeholder.com/160?text=80x80"
picture="no-file.jpg"
size="big"
/>
<VAvatar
placeholder="https://via.placeholder.com/200?text=100x100"
picture="no-file.jpg"
size="xl"
/>
</VFlex>
</template>
```
<!--/code-->
<!--example-->
<VFlex flex-wrap="wrap" align-items="flex-end" row-gap=".5rem" column-gap=".25rem">
<VAvatar placeholder="https://via.placeholder.com/64?text=32x32" picture="no-file.jpg" size="small" />
<VAvatar placeholder="https://via.placeholder.com/80?text=40x40" picture="no-file.jpg" />
<VAvatar placeholder="https://via.placeholder.com/100?text=50x50" picture="no-file.jpg" size="medium" />
<VAvatar placeholder="https://via.placeholder.com/136?text=68x68" picture="no-file.jpg" size="large" />
<VAvatar placeholder="https://via.placeholder.com/160?text=80x80" picture="no-file.jpg" size="big" />
<VAvatar placeholder="https://via.placeholder.com/200?text=100x100" picture="no-file.jpg" size="xl" />
</VFlex>
<!--/example-->

60
documentation/avatar/avatar-square-documentation.md Normal file
View File

@@ -0,0 +1,60 @@
### Squared avatar
Avatars can have a square shape instead of a circle shape
by adding the `squared` prop to the avatar component.
See code for more details about usage.
<!--code-->
```vue
<template>
<VFlex
flex-wrap="wrap"
align-items="flex-end"
row-gap=".5rem"
column-gap=".25rem"
>
<VAvatar
picture="https://media.cssninja.io/content/avatars/7.jpg"
size="small"
squared
/>
<VAvatar picture="/images/avatars/svg/vuero-1.svg" squared />
<VAvatar
picture="https://media.cssninja.io/content/avatars/11.jpg"
size="medium"
squared
/>
<VAvatar
picture="https://media.cssninja.io/content/avatars/21.jpg"
size="large"
squared
/>
<VAvatar
picture="https://media.cssninja.io/content/avatars/13.jpg"
size="big"
squared
/>
<VAvatar
picture="https://media.cssninja.io/content/avatars/5.jpg"
size="xl"
squared
/>
</VFlex>
</template>
```
<!--/code-->
<!--example-->
<VFlex flex-wrap="wrap" align-items="flex-end" row-gap=".5rem" column-gap=".25rem">
<VAvatar picture="https://media.cssninja.io/content/avatars/7.jpg" size="small" squared />
<VAvatar picture="/images/avatars/svg/vuero-1.svg" squared />
<VAvatar picture="https://media.cssninja.io/content/avatars/11.jpg" size="medium" squared />
<VAvatar picture="https://media.cssninja.io/content/avatars/21.jpg" size="large" squared />
<VAvatar picture="https://media.cssninja.io/content/avatars/13.jpg" size="big" squared />
<VAvatar picture="https://media.cssninja.io/content/avatars/5.jpg" size="xl" squared />
</VFlex>
<!--/example-->

51
documentation/block/v-block-base-documentation.md Normal file
View File

@@ -0,0 +1,51 @@
### VBlock
Vuero provides a versatile flex block media component named `<VBlock />`.
VBlock has 2 named slots. One for the `icon` element, which can
be whatever you want, and one for the `action`.
<!--code-->
```vue
<template>
<VBlock title="Anna B." subtitle="UX Designer">
<template #icon>
<VAvatar
size="medium"
picture="https://media.cssninja.io/content/avatars/19.jpg"
badge="/images/icons/flags/germany.svg"
/>
</template>
<template #action>
<VButton color="primary" elevated>
View
</VButton>
</template>
</VBlock>
</template>
```
<!--/code-->
<!--example-->
<div class="field">
<div class="control">
<div class="l-card">
<VBlock title="Anna B." subtitle="UX Designer">
<template #icon>
<VAvatar
size="medium"
picture="https://media.cssninja.io/content/avatars/19.jpg"
badge="/images/icons/flags/germany.svg"
/>
</template>
<template #action>
<VButton color="primary" elevated>View</VButton>
</template>
</VBlock>
</div>
</div>
</div>
<!--/example-->

57
documentation/block/v-block-base-responsive-documentation.md Normal file
View File

@@ -0,0 +1,57 @@
### Responsive mobile
`<VBlock />` can be made responsive for the mobile viewport by
adding the `mResponsive` prop to the component.
When set to responsive mode, the flex block elements stack
to fit in the available space. Resize your screen to see it in action.
<!--code-->
```vue
<template>
<VBlock
title="Anna B."
subtitle="UX Designer"
center
m-responsive
>
<template #icon>
<VAvatar
size="medium"
picture="https://media.cssninja.io/content/avatars/19.jpg"
badge="/images/icons/flags/germany.svg"
/>
</template>
<template #action>
<VButton color="primary" elevated>
View
</VButton>
</template>
</VBlock>
</template>
```
<!--/code-->
<!--example-->
<div class="field">
<div class="control">
<div class="l-card">
<VBlock title="Anna B." subtitle="UX Designer" center mResponsive>
<template #icon>
<VAvatar
size="medium"
picture="https://media.cssninja.io/content/avatars/19.jpg"
badge="/images/icons/flags/germany.svg"
/>
</template>
<template #action>
<VButton color="primary" elevated>View</VButton>
</template>
</VBlock>
</div>
</div>
</div>
<!--/example-->

55
documentation/block/v-block-center-documentation.md Normal file
View File

@@ -0,0 +1,55 @@
### Centered align
You can adjust the `<VBlock />` component flex alignment
using the `center` prop. This will apply the `flex` property
`align-items: center;` to the component.
<!--code-->
```vue
<template>
<VBlock
title="Anna B."
subtitle="UX Designer"
center
>
<template #icon>
<VAvatar
size="medium"
picture="https://media.cssninja.io/content/avatars/19.jpg"
badge="/images/icons/flags/germany.svg"
/>
</template>
<template #action>
<VButton color="primary" elevated>
View
</VButton>
</template>
</VBlock>
</template>
```
<!--/code-->
<!--example-->
<div class="field">
<div class="control">
<div class="l-card">
<VBlock title="Anna B." subtitle="UX Designer" center>
<template #icon>
<VAvatar
size="medium"
picture="https://media.cssninja.io/content/avatars/19.jpg"
badge="/images/icons/flags/germany.svg"
/>
</template>
<template #action>
<VButton color="primary" elevated>View</VButton>
</template>
</VBlock>
</div>
</div>
</div>
<!--/example-->

64
documentation/block/v-block-center-responsive-documentation.md Normal file
View File

@@ -0,0 +1,64 @@
### Tablet responsive
`<VBlock />` can be made responsive for the tablet portrait viewport
by adding the `tResponsive` prop to the component. When set to responsive mode,
the flex block elements stack to fit in the available space.
Resize your screen to see it in action.
<!--code-->
```vue
<template>
<VBlock
title="Team Tasks"
subtitle="View all tasks"
center
m-responsive
t-responsive
>
<template #icon>
<VIconBox
color="info"
size="medium"
rounded
>
<VIcon icon="lucide:chrome" />
</VIconBox>
</template>
<template #action>
<VButton color="primary" elevated>
View
</VButton>
</template>
</VBlock>
</template>
```
<!--/code-->
<!--example-->
<div class="field">
<div class="control">
<div class="l-card">
<VBlock
title="Team Tasks"
subtitle="View all tasks"
center
m-responsive
t-responsive
>
<template #icon>
<VIconBox color="info" size="medium" rounded>
<VIcon icon="lucide:chrome"/>
</VIconBox>
</template>
<template #action>
<VButton color="primary" elevated>View</VButton>
</template>
</VBlock>
</div>
</div>
</div>
<!--/example-->

55
documentation/block/v-block-icon-center-documentation.md Normal file
View File

@@ -0,0 +1,55 @@
### Icon centered
You can adjust the `<VBlock />` component flex alignment using
the `center` prop. This will apply the `flex` property
`align-items: center;` to the component.
<!--code-->
```vue
<template>
<VBlock
title="Team Tasks"
subtitle="View all tasks"
center
>
<template #icon>
<VIconBox
color="info"
size="medium"
rounded
>
<VIcon icon="lucide:chrome" />
</VIconBox>
</template>
<template #action>
<VButton color="primary" elevated>
View
</VButton>
</template>
</VBlock>
</template>
```
<!--/code-->
<!--example-->
<div class="field">
<div class="control">
<div class="l-card">
<VBlock title="Team Tasks" subtitle="View all tasks" center>
<template #icon>
<VIconBox color="info" size="medium" rounded>
<VIcon icon="lucide:chrome"/>
</VIconBox>
</template>
<template #action>
<VButton color="primary" elevated>View</VButton>
</template>
</VBlock>
</div>
</div>
</div>
<!--/example-->

47
documentation/block/v-block-icon-documentation.md Normal file
View File

@@ -0,0 +1,47 @@
### VBlock icon
Vuero provides a versatile flex block media component named
`<VBlock />`. VBlock has 2 named slots. One for the `icon` element,
which can be whatever you want, and one for the `action`.
<!--code-->
```vue
<template>
<VBlock title="Team Tasks" subtitle="View all tasks">
<template #icon>
<VIconBox color="success" rounded>
<VIcon icon="lucide:clock" />
</VIconBox>
</template>
<template #action>
<VButton color="primary" elevated>
View
</VButton>
</template>
</VBlock>
</template>
```
<!--/code-->
<!--example-->
<div class="field">
<div class="control">
<div class="l-card">
<VBlock title="Team Tasks" subtitle="View all tasks">
<template #icon>
<VIconBox color="success" rounded>
<VIcon icon="lucide:clock"/>
</VIconBox>
</template>
<template #action>
<VButton color="primary" elevated>View</VButton>
</template>
</VBlock>
</div>
</div>
</div>
<!--/example-->

63
documentation/breadcrumb/breadcrumb-arrow-documentation.md Normal file
View File

@@ -0,0 +1,63 @@
---
breadcrumb:
- label: Vuero
hideLabel: true
icon: lucide:home
link: https://vuero.cssninja.io/
- label: Components
icon: lucide:cpu
to:
name: /components/
- label: VBreadcrumb
---
### Arrow Separator
Breadcrumb items can be separated by alternative separators.
To display arrow breadcrumb separators,
set the `separator` prop to `arrow`. See markup for more details.
<!--code-->
```vue
<script setup lang="ts">
const breadcrumb = [
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
// use external links
link: 'https://vuero.cssninja.io/',
},
{
label: 'Components',
icon: 'lucide:cpu',
// or generate a router link with 'to' props
to: '/components/',
},
{
label: 'VBreadcrumb',
},
]
</script>
<template>
<VBreadcrumb :items="breadcrumb" separator="arrow" />
<VBreadcrumb
:items="breadcrumb"
separator="arrow"
with-icons
/>
</template>
```
<!--/code-->
<!--example-->
<div>
<VBreadcrumb :items="frontmatter.breadcrumb" separator="arrow" />
<VBreadcrumb :items="frontmatter.breadcrumb" separator="arrow" with-icons />
</div>
<!--/example-->

62
documentation/breadcrumb/breadcrumb-bullet-documentation.md Normal file
View File

@@ -0,0 +1,62 @@
---
breadcrumb:
- label: Vuero
hideLabel: true
icon: lucide:home
link: https://vuero.cssninja.io/
- label: Components
icon: lucide:cpu
to:
name: /components/
- label: VBreadcrumb
---
### Bullet Separator
Breadcrumb items can be separated by alternative separators.
To display bullet breadcrumb separators,
set the `separator` prop to `bullet`. See markup for more details.
<!--code-->
```vue
<script setup lang="ts">
const breadcrumb = [
{
icon: 'lucide:home',
hideLabel: true,
// use external links
link: 'https://vuero.cssninja.io/',
},
{
label: 'Components',
icon: 'lucide:cpu',
// or generate a router link with 'to' props
to: '/components/',
},
{
label: 'VBreadcrumb',
},
]
</script>
<template>
<VBreadcrumb :items="breadcrumb" separator="bullet" />
<VBreadcrumb
:items="breadcrumb"
separator="bullet"
with-icons
/>
</template>
```
<!--/code-->
<!--example-->
<div>
<VBreadcrumb :items="frontmatter.breadcrumb" separator="bullet" />
<VBreadcrumb :items="frontmatter.breadcrumb" separator="bullet" with-icons />
</div>
<!--/example-->

62
documentation/breadcrumb/breadcrumb-default-documentation.md Normal file
View File

@@ -0,0 +1,62 @@
---
breadcrumb:
- label: Vuero
hideLabel: true
icon: lucide:home
link: https://vuero.cssninja.io/
- label: Components
icon: lucide:cpu
to:
name: /components/
- label: VBreadcrumb
---
### Default Separator
Vuero provides a `<VBreadcrumb />` component.
Default breadcrumb items are separated by a slash sign.
To show icons, use the `with-icons` prop. You can also change the alignment
by using the `align` prop (possible values are `center` and `right`).
Pass an **Array** to the `items` prop to render the component.
See markup for more details about usage.
<!--code-->
```vue
<script setup lang="ts">
const breadcrumb = [
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
// use external links
link: 'https://vuero.cssninja.io/',
},
{
label: 'Components',
icon: 'lucide:cpu',
// or generate a router link with 'to' props
to: '/components/',
},
{
label: 'VBreadcrumb',
},
]
</script>
<template>
<VBreadcrumb :items="breadcrumb" />
<VBreadcrumb :items="breadcrumb" with-icons />
</template>
```
<!--/code-->
<!--example-->
<div>
<VBreadcrumb :items="frontmatter.breadcrumb" />
<VBreadcrumb :items="frontmatter.breadcrumb" with-icons />
</div>
<!--/example-->

63
documentation/breadcrumb/breadcrumb-dot-documentation.md Normal file
View File

@@ -0,0 +1,63 @@
---
breadcrumb:
- label: Vuero
hideLabel: true
icon: lucide:home
link: https://vuero.cssninja.io/
- label: Components
icon: lucide:cpu
to:
name: /components/
- label: VBreadcrumb
---
### Dot Separator
Breadcrumb items can be separated by alternative separators.
To display dot breadcrumb separators, set the `separator` prop to `dot`.
See markup for more details.
<!--code-->
```vue
<script setup lang="ts">
const breadcrumb = [
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
// use external links
link: 'https://vuero.cssninja.io/',
},
{
label: 'Components',
icon: 'lucide:cpu',
// or generate a router link with 'to' props
to: '/components/',
},
{
label: 'VBreadcrumb',
},
]
</script>
<template>
<VBreadcrumb :items="breadcrumb" separator="dot" />
<VBreadcrumb
:items="breadcrumb"
separator="dot"
with-icons
/>
</template>
```
<!--/code-->
<!--example-->
<div>
<VBreadcrumb :items="frontmatter.breadcrumb" separator="dot" />
<VBreadcrumb :items="frontmatter.breadcrumb" separator="dot" with-icons />
</div>
<!--/example-->

62
documentation/breadcrumb/breadcrumb-succeeds-documentation.md Normal file
View File

@@ -0,0 +1,62 @@
---
breadcrumb:
- label: Vuero
hideLabel: true
icon: lucide:home
link: https://vuero.cssninja.io/
- label: Components
icon: lucide:cpu
to:
name: /components/
- label: VBreadcrumb
---
### Succeeds Separator
Breadcrumb items can be separated by alternative separators.
To display succeeds breadcrumb separators,
set the `separator` prop to `succeeds`. See markup for more details.
<!--code-->
```vue
<script setup lang="ts">
const breadcrumb = [
{
label: 'Vuero',
hideLabel: true,
icon: 'lucide:home',
// use external links
link: 'https://vuero.cssninja.io/',
},
{
label: 'Components',
icon: 'lucide:cpu',
// or generate a router link with 'to' props
to: '/components/',
},
{
label: 'VBreadcrumb',
},
]
</script>
<template>
<VBreadcrumb :items="breadcrumb" separator="succeeds" />
<VBreadcrumb
:items="breadcrumb"
separator="succeeds"
with-icons
/>
</template>
```
<!--/code-->
<!--example-->
<div>
<VBreadcrumb :items="frontmatter.breadcrumb" separator="succeeds" />
<VBreadcrumb :items="frontmatter.breadcrumb" separator="succeeds" with-icons />
</div>
<!--/example-->

47
documentation/button/v-button-addons-documentation.md Normal file
View File

@@ -0,0 +1,47 @@
### Addons
You can easily create `<VButton />` addons and group them together
by wrapping them inside a `<div class="field is-grouped"><div>` element.
You can mix any button styles.
<!--code-->
```vue
<template>
<VField addons>
<VControl>
<VButton icon="fas fa-align-left">
Left
</VButton>
</VControl>
<VControl>
<VButton icon="fas fa-align-center">
Center
</VButton>
</VControl>
<VControl>
<VButton icon="fas fa-align-right">
Right
</VButton>
</VControl>
</VField>
</template>
```
<!--/code-->
<!--example-->
<VField addons>
<VControl>
<VButton icon="fas fa-align-left"> Left </VButton>
</VControl>
<VControl>
<VButton icon="fas fa-align-center"> Center </VButton>
</VControl>
<VControl>
<VButton icon="fas fa-align-right"> Right </VButton>
</VControl>
</VField>
<!--/example-->

60
documentation/button/v-button-base-documentation.md Normal file
View File

@@ -0,0 +1,60 @@
---
state:
clicked: 0
---
### VButton
Vuero provides a `<VButton />` component if you don't want to use the
simple Html button. VButtons can be made bold and rounded
by using the `bold` and `rounded` props on the component.
<!--code-->
```vue
<script setup lang="ts">
const clicked = ref(0)
</script>
<template>
<VButtons>
<VButton @click="clicked++">
clicked: {{ clicked }}
</VButton>
<VButton bold @click="clicked++">
clicked: {{ clicked }}
</VButton>
<VButton rounded @click="clicked++">
clicked: {{ clicked }}
</VButton>
<VButton
bold
rounded
@click="clicked++"
>
clicked: {{ clicked }}
</VButton>
</VButtons>
</template>
```
<!--/code-->
<!--example-->
<VButtons>
<VButton @click="frontmatter.state.clicked++">
clicked: {{ frontmatter.state.clicked }}
</VButton>
<VButton bold @click="frontmatter.state.clicked++">
clicked: {{ frontmatter.state.clicked }}
</VButton>
<VButton rounded @click="frontmatter.state.clicked++">
clicked: {{ frontmatter.state.clicked }}
</VButton>
<VButton bold rounded @click="frontmatter.state.clicked++">
clicked: {{ frontmatter.state.clicked }}
</VButton>
</VButtons>
<!--/example-->

66
documentation/button/v-button-colors-documentation.md Normal file
View File

@@ -0,0 +1,66 @@
### Colors
`<VButton />` components can have different colors.
Use the `color` prop on the component to change its color.
Available color values are `primary`, `info`, `success`, `warning`,
`danger` and `white`.
<!--code-->
```vue
<template>
<VButtons>
<VButton color="primary">
Button
</VButton>
<VButton color="info">
Button
</VButton>
<VButton color="success">
Button
</VButton>
<VButton color="warning">
Button
</VButton>
<VButton color="danger">
Button
</VButton>
<VButton color="dark">
Button
</VButton>
<VButton color="white">
Button
</VButton>
</VButtons>
</template>
```
<!--/code-->
<!--example-->
<VButtons>
<VButton color="primary">
Button
</VButton>
<VButton color="info">
Button
</VButton>
<VButton color="success">
Button
</VButton>
<VButton color="warning">
Button
</VButton>
<VButton color="danger">
Button
</VButton>
<VButton color="dark">
Button
</VButton>
<VButton color="white">
Button
</VButton>
</VButtons>
<!--/example-->

51
documentation/button/v-button-colors-light-documentation.md Normal file
View File

@@ -0,0 +1,51 @@
### Light Colors
`<VButton />` solid color can have a very light tint of their original color.
Use the `color` prop to set a solid color and
use the `light` modifier prop to make a light colored button.
<!--code-->
```vue
<template>
<VButtons>
<VButton color="primary" light>
Button
</VButton>
<VButton color="info" light>
Button
</VButton>
<VButton color="success" light>
Button
</VButton>
<VButton color="warning" light>
Button
</VButton>
<VButton color="danger" light>
Button
</VButton>
<VButton color="dark" light>
Button
</VButton>
<VButton light>
Button
</VButton>
</VButtons>
</template>
```
<!--/code-->
<!--example-->
<VButtons>
<VButton color="primary" light> Button </VButton>
<VButton color="info" light> Button </VButton>
<VButton color="success" light> Button </VButton>
<VButton color="warning" light> Button </VButton>
<VButton color="danger" light> Button </VButton>
<VButton color="dark" light> Button </VButton>
<VButton light> Button </VButton>
</VButtons>
<!--/example-->

55
documentation/button/v-button-colors-outlined-documentation.md Normal file
View File

@@ -0,0 +1,55 @@
### Outlined Colors
`<VButton />` solid color can have an outlined button style.
Use the `color` prop to set a solid color and
use the `outlined` modifier prop to make an outlined button.
<!--code-->
```vue
<template>
<VButtons>
<VButton color="primary" outlined>
Button
</VButton>
<VButton color="info" outlined>
Button
</VButton>
<VButton color="success" outlined>
Button
</VButton>
<VButton color="warning" outlined>
Button
</VButton>
<VButton color="danger" outlined>
Button
</VButton>
<VButton color="dark" outlined>
Button
</VButton>
<VButton outlined>
Button
</VButton>
</VButtons>
</template>
```
<!--/code-->
<!--example-->
<VButtons>
<VButton color="primary" outlined> Button </VButton>
<VButton color="info" outlined> Button </VButton>
<VButton color="success" outlined> Button </VButton>
<VButton color="warning" outlined> Button </VButton>
<VButton color="danger" outlined> Button </VButton>
<VButton color="dark" outlined>
Button
</VButton>
<VButton outlined>
Button
</VButton>
</VButtons>
<!--/example-->

52
documentation/button/v-button-disabled-documentation.md Normal file
View File

@@ -0,0 +1,52 @@
### Disabled
`<VButton />` components can be disabled and not responsive to pointer events.
Use the `disabled` prop to set a button in a disabled state.
<!--code-->
```vue
<template>
<VButtons>
<VButton color="primary" disabled>
Button
</VButton>
<VButton color="info" disabled>
Button
</VButton>
<VButton color="success" disabled>
Button
</VButton>
<VButton color="warning" disabled>
Button
</VButton>
<VButton color="danger" disabled>
Button
</VButton>
</VButtons>
</template>
```
<!--/code-->
<!--example-->
<VButtons>
<VButton color="primary" disabled>
Button
</VButton>
<VButton color="info" disabled>
Button
</VButton>
<VButton color="success" disabled>
Button
</VButton>
<VButton color="warning" disabled>
Button
</VButton>
<VButton color="danger" disabled>
Button
</VButton>
</VButtons>
<!--/example-->

53
documentation/button/v-button-elevated-documentation.md Normal file
View File

@@ -0,0 +1,53 @@
### Elevation
`<VButton />` components can be elevated using box shadows.
Use the `raised` prop to show a box shadow on hover or
use the `elevated` prop to set a permanent box shadow.
<!--code-->
```vue
<template>
<VButtons>
<VButton color="primary" raised>
Button
</VButton>
<VButton color="info" raised>
Button
</VButton>
<VButton color="success" raised>
Button
</VButton>
<VButton color="warning" raised>
Button
</VButton>
<VButton color="danger" elevated>
Button
</VButton>
</VButtons>
</template>
```
<!--/code-->
<!--example-->
<VButtons>
<VButton color="primary" raised>
Button
</VButton>
<VButton color="info" raised>
Button
</VButton>
<VButton color="success" raised>
Button
</VButton>
<VButton color="warning" raised>
Button
</VButton>
<VButton color="danger" elevated>
Button
</VButton>
</VButtons>
<!--/example-->

46
documentation/button/v-button-fa-documentation.md Normal file
View File

@@ -0,0 +1,46 @@
### Font Awesome
`<VButton />` components work well with Font Awesome Icons.
Add an icon name inside the `icon` prop to set a Font Awesome icon.
You can also create square and circle buttons with a single icon
using the `<VIconButton />` component.
Please refer to markup for detailed examples.
<!--code-->
```vue
<template>
<VButtons>
<VButton
color="primary"
icon="fab fa-twitter"
elevated
>
Tweet Now
</VButton>
<VButton
color="success"
icon="fas fa-check"
raised
rounded
>
Save Changes
</VButton>
</VButtons>
</template>
```
<!--/code-->
<!--example-->
<VButtons>
<VButton color="primary" icon="fab fa-twitter" elevated>
Tweet Now
</VButton>
<VButton color="success" icon="fas fa-check" raised rounded>
Save Changes
</VButton>
</VButtons>
<!--/example-->

46
documentation/button/v-button-feather-documentation.md Normal file
View File

@@ -0,0 +1,46 @@
### Lucide Icons
`<VButton />` components work well with Font Awesome Icons.
Add an icon name inside the `icon` prop to set a Font Awesome icon.
You can also create square and circle buttons with a single icon
using the `<VIconButton />` component.
Please refer to markup for detailed examples.
<!--code-->
```vue
<template>
<VButtons>
<VButton
color="info"
icon="lucide:twitter"
elevated
>
Tweet Now
</VButton>
<VButton
color="danger"
icon="lucide:gitlab"
raised
rounded
>
Commit Code
</VButton>
</VButtons>
</template>
```
<!--/code-->
<!--example-->
<VButtons>
<VButton color="info" icon="lucide:twitter" elevated>
Tweet Now
</VButton>
<VButton color="danger" icon="lucide:gitlab" raised rounded>
Commit Code
</VButton>
</VButtons>
<!--/example-->

45
documentation/button/v-button-group-documentation.md Normal file
View File

@@ -0,0 +1,45 @@
### Button group
You can easily align `<VButton />` components and group them together
by wrapping them inside a `<VButtons />` element.
You can mix any button styles.
<!--code-->
```vue
<template>
<VButtons>
<VButton icon="lucide:eye">
View
</VButton>
<VButton icon="lucide:edit-2">
View
</VButton>
<VButton
color="primary"
icon="fas fa-check"
elevated
>
Approve
</VButton>
</VButtons>
</template>
```
<!--/code-->
<!--example-->
<VButtons>
<VButton icon="lucide:eye">
View
</VButton>
<VButton icon="lucide:edit-2">
View
</VButton>
<VButton color="primary" icon="fas fa-check" elevated>
Approve
</VButton>
</VButtons>
<!--/example-->

51
documentation/button/v-button-link-documentation.md Normal file
View File

@@ -0,0 +1,51 @@
### RouterLink
`<VButton />` provides a `to` property that can be used like
on `<RouterLink />`. You can also use a `href` property to render
a standard `<a>` tag. If none is used a `<button>` is rendered insted.
<!--code-->
```vue
<template>
<VButtons>
<VButton to="/">
Home
</VButton>
<VButton bold to="/">
Home
</VButton>
<VButton rounded href="https://vuero.cssninja.io">
Home
</VButton>
<VButton
bold
rounded
href="https://vuero.cssninja.io"
>
Home
</VButton>
</VButtons>
</template>
```
<!--/code-->
<!--example-->
<VButtons>
<VButton to="/">
Home
</VButton>
<VButton bold to="/">
Home
</VButton>
<VButton rounded href="https://vuero.cssninja.io">
Home
</VButton>
<VButton bold rounded href="https://vuero.cssninja.io">
Home
</VButton>
</VButtons>
<!--/example-->

50
documentation/button/v-button-placeload-documentation.md Normal file
View File

@@ -0,0 +1,50 @@
### Placeload
`<VButton />` components can have a placeloading status.
Use the `placeload` prop on the component to change its state.
<!--code-->
```vue
<template>
<VButtons>
<VButton placeload="40px">
Button
</VButton>
<VButton placeload="40px" color="primary">
Button
</VButton>
<VButton placeload="40px" color="info">
Button
</VButton>
<VButton placeload="40px" color="success">
Button
</VButton>
<VButton placeload="40px" color="warning">
Button
</VButton>
<VButton placeload="40px" color="danger">
Button
</VButton>
<VButton placeload="40px" color="white">
Button
</VButton>
</VButtons>
</template>
```
<!--/code-->
<!--example-->
<VButtons class="placeload-wrap">
<VButton placeload="40px"> Button </VButton>
<VButton placeload="40px" color="primary"> Button </VButton>
<VButton placeload="40px" color="info"> Button </VButton>
<VButton placeload="40px" color="success"> Button </VButton>
<VButton placeload="40px" color="warning"> Button </VButton>
<VButton placeload="40px" color="danger"> Button </VButton>
<VButton placeload="40px" color="white"> Button </VButton>
</VButtons>
<!--/example-->

13
documentation/button/v-buttons-props-documentation.md Normal file
View File

@@ -0,0 +1,13 @@
---
disable_code: true
slimscroll: true
---
### VButtons Props
Here is the full props available for `<VButtons />` component:
| Props | Default | Type |
| ------ | --------------------------------------------- | ------------------- |
| addons | <span class="is-boolean">`false`</span> | boolean |
| align | <span class="is-undefined">`undefined`</span> | `centered`, `right` |

32
documentation/card-action/v-card-action-content-documentation.md Normal file
View File

@@ -0,0 +1,32 @@
### Content
You can add content inside the `<VCardAction />` component. It will act as
any other component slot.
<!--code-->
```vue
<template>
<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>
</template>
```
<!--/code-->

32
documentation/card-action/v-card-action-documentation.md Normal file
View File

@@ -0,0 +1,32 @@
### VCardAction
The `<VCardAction />` component is a enhamcement and port to Vue
of the classic bulma card component, a classy and easy way
to display post-like content. The component has several props
to pass in the content you want to display.
Check the code example for more details.
<!--code-->
<!--code-->
```vue
<template>
<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>
</template>
```
<!--/code-->

90
documentation/card-advanced/v-card-advanced-documentation.md Normal file
View File

@@ -0,0 +1,90 @@
### VCardAdvanced
Vuero ships with a `<VCardAdvanced />` component that features a card header,
body, and footer, to display any type of content.
Card header and footer have both a left and right `slots` where you
can insert your UI elements/components. You can also control the card radius
using the `radius` prop.
<!--code-->
```vue
<template>
<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="[
{
id: 5,
picture: 'https://media.cssninja.io/content/avatars/12.jpg',
initials: 'JS',
color: 'info',
},
{
id: 22,
picture: 'https://media.cssninja.io/content/avatars/22.jpg',
initials: 'JH',
color: 'info',
},
{
id: 40,
picture: 'https://media.cssninja.io/content/avatars/40.jpg',
initials: 'SM',
color: 'h-purple',
},
{
id: 3,
picture: 'https://media.cssninja.io/content/avatars/5.jpg',
initials: 'ML',
color: 'danger',
},
]"
:limit="3"
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="Sales"
color="solid"
rounded
/>
<VTag
label="Business"
color="solid"
rounded
/>
</div>
</template>
<template #footer-right>
<VButton color="primary" raised>
Action
</VButton>
</template>
</VCardAdvanced>
</template>
```
<!--/code-->

31
documentation/card-media/v-card-media-documentation.md Normal file
View File

@@ -0,0 +1,31 @@
### VCardMedia
The `<VCardMedia />` component is a enhamcement and port to Vue
of the classic bulma card component, a classy and easy way
to display media content. The component has several props
to pass in the content you want to display.
Check the code example for more details.
<!--code-->
```vue
<template>
<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>
</template>
```
<!--/code-->

27
documentation/card-social/v-card-social-documentation.md Normal file
View File

@@ -0,0 +1,27 @@
### VCardSocial
The `<VCardSocial />` component is a enhamcement and port to Vue
of the classic bulma card component, a classy and easy way
to display post-like content. The component has several props
to pass in the content you want to display.
Check the code example for more details.
<!--code-->
```vue
<template>
<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="Like"
>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus nec iaculis mauris.
</VCardSocial>
</template>
```
<!--/code-->

51
documentation/card/card-base-documentation.md Normal file
View File

@@ -0,0 +1,51 @@
---
disable_example: true
---
### VCard
Vuero cards are very versatile and can be used in any type of layout.
Vuero provides 3 main Html cards with the following classes: `.s-card`,
`.r-card` and `.l-card`. The main difference each one of those is
the border radius, giving a unique look and feel to each one of them.
<!--code-->
```vue
<template>
<VCard radius="small">
<h3 class="title is-5 mb-2">
Iam an S-Card
</h3>
<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>
</VCard>
<VCard>
<h3 class="title is-5 mb-2">
Iam an R-Card
</h3>
<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>
</VCard>
<VCard radius="large">
<h3 class="title is-5 mb-2">
Iam an L-Card
</h3>
<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>
</VCard>
</template>
```
<!--/code-->

83
documentation/card/card-colors-documentation.md Normal file
View File

@@ -0,0 +1,83 @@
---
disable_example: true
---
### Colored Card
Vuero cards can have colored backgrounds when you need them to.
To display Available color modifiers are `is-primary`, `is-secondary`,
`is-info`, `is-success`, `is-warning` and `is-danger`.
<!--code-->
```vue
<template>
<VCard radius="small" color="primary">
<h3 class="title is-5 mb-2">
Primary Card
</h3>
<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>
</VCard>
<VCard color="secondary">
<h3 class="title is-5 mb-2">
Secondary Card
</h3>
<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>
</VCard>
<VCard radius="large" color="info">
<h3 class="title is-5 mb-2">
Info Card
</h3>
<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>
</VCard>
<VCard radius="small" color="success">
<h3 class="title is-5 mb-2">
Success Card
</h3>
<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>
</VCard>
<VCard color="warning">
<h3 class="title is-5 mb-2">
Warning Card
</h3>
<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>
</VCard>
<VCard radius="large" color="danger">
<h3 class="title is-5 mb-2">
Danger L-Card
</h3>
<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>
</VCard>
</template>
```
<!--/code-->

50
documentation/card/card-elevated-documentation.md Normal file
View File

@@ -0,0 +1,50 @@
---
disable_example: true
---
### Elevated Card
Vuero cards can be elevated and show a light box shadow.
To display elevated cards, simply add the `is-raised`
class to the target card element.
<!--code-->
```vue
<template>
<VCard radius="small" elevated>
<h3 class="title is-5 mb-2">
Iam an Card
</h3>
<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>
</VCard>
<VCard elevated>
<h3 class="title is-5 mb-2">
Iam an Card
</h3>
<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>
</VCard>
<VCard radius="large" elevated>
<h3 class="title is-5 mb-2">
Iam an Card
</h3>
<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>
</VCard>
</template>
```
<!--/code-->

67
documentation/card/card-structured-documentation.md Normal file
View File

@@ -0,0 +1,67 @@
---
disable_example: true
---
### Structured Card
Vuero cards can have a small flex header where you can put
come content. Check the markup for more details about usage.
<!--code-->
```vue
<template>
<VCard radius="small" 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="{
id: 19,
avatar: 'https://media.cssninja.io/content/avatars/19.jpg',
badge: '/images/icons/flags/germany.svg',
username: 'Greta K.',
fullName: 'Greta Kroppfer',
initials: 'GK',
color: 'h-yellow',
location: 'Los Angeles, CA',
position: 'Sales Manager',
bio: 'This is a nice user description that we can use as demo content.',
}"
/>
</template>
</Tippy>
</template>
</VBlock>
<UserCardDropdown />
</div>
<div class="card-inner">
<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>
</div>
</VCard>
</template>
```
<!--/code-->

138
documentation/checkbox/checkbox-outlined-circle-documentation.md Normal file
View File

@@ -0,0 +1,138 @@
---
state:
options: 'Option 2'
---
### Outlined circle
Vuero checkboxes can be circles instead of squares. Simply add the `circle`
attribute to your checkbox element.
See the code example for more details about usage.
<!--code-->
```vue
<script setup lang="ts">
const options = ref('Option 2')
</script>
<template>
<VField class="is-flex">
<VControl raw subcontrol>
<VCheckbox
v-model="options"
true-value="Option 1"
label="Option 1"
circle
/>
</VControl>
<VControl raw subcontrol>
<VCheckbox
v-model="options"
true-value="Option 2"
label="Option 2"
color="primary"
circle
/>
</VControl>
<VControl raw subcontrol>
<VCheckbox
v-model="options"
true-value="Option 3"
label="Option 3"
color="info"
circle
/>
</VControl>
<VControl raw subcontrol>
<VCheckbox
v-model="options"
true-value="Option 4"
label="Option 4"
color="success"
circle
/>
</VControl>
<VControl raw subcontrol>
<VCheckbox
v-model="options"
true-value="Option 5"
label="Option 5"
color="warning"
circle
/>
</VControl>
<VControl raw subcontrol>
<VCheckbox
v-model="options"
true-value="Option 6"
label="Option 6"
color="danger"
circle
/>
</VControl>
</VField>
</template>
```
<!--/code-->
<!--example-->
<VField class="is-flex">
<VControl raw subcontrol>
<VCheckbox
v-model="frontmatter.state.options"
trueValue="Option 1"
label="Option 1"
circle
/>
</VControl>
<VControl raw subcontrol>
<VCheckbox
v-model="frontmatter.state.options"
trueValue="Option 2"
label="Option 2"
color="primary"
circle
/>
</VControl>
<VControl raw subcontrol>
<VCheckbox
v-model="frontmatter.state.options"
trueValue="Option 3"
label="Option 3"
color="info"
circle
/>
</VControl>
<VControl raw subcontrol>
<VCheckbox
v-model="frontmatter.state.options"
trueValue="Option 4"
label="Option 4"
color="success"
circle
/>
</VControl>
<VControl raw subcontrol>
<VCheckbox
v-model="frontmatter.state.options"
trueValue="Option 5"
label="Option 5"
color="warning"
circle
/>
</VControl>
<VControl raw subcontrol>
<VCheckbox
v-model="frontmatter.state.options"
trueValue="Option 6"
label="Option 6"
color="danger"
circle
/>
</VControl>
</VField>
<!--/example-->

99
documentation/checkbox/checkbox-outlined-documentation.md Normal file
View File

@@ -0,0 +1,99 @@
---
state:
option1: true
option2: false
option3: false
option4: true
option5: false
option6: false
---
### VCheckbox
Vuero provides default styled checkboxes in 2 main styles, `outlined` (default)
and `solid`. Those checkboxes also support all main colors.
The available colors are `primary`, `success`, `info`,
`warning`, `danger`.
<!--code-->
```vue
<script setup lang="ts">
const option1 = ref(true)
const option2 = ref(false)
const option3 = ref(false)
const option4 = ref(true)
const option5 = ref(false)
const option6 = ref(false)
</script>
<template>
<VField class="is-flex">
<VControl raw subcontrol>
<VCheckbox v-model="option1" label="Option 1" />
</VControl>
<VControl raw subcontrol>
<VCheckbox
v-model="option2"
label="Option 2"
color="primary"
/>
</VControl>
<VControl raw subcontrol>
<VCheckbox
v-model="option3"
label="Option 3"
color="info"
/>
</VControl>
<VControl raw subcontrol>
<VCheckbox
v-model="option4"
label="Option 4"
color="success"
/>
</VControl>
<VControl raw subcontrol>
<VCheckbox
v-model="option5"
label="Option 5"
color="warning"
/>
</VControl>
<VControl raw subcontrol>
<VCheckbox
v-model="option6"
label="Option 6"
color="danger"
/>
</VControl>
</VField>
</template>
```
<!--/code-->
<!--example-->
<VField class="is-flex">
<VControl raw subcontrol>
<VCheckbox v-model="frontmatter.state.option1" label="Option 1" />
</VControl>
<VControl raw subcontrol>
<VCheckbox v-model="frontmatter.state.option2" label="Option 2" color="primary" />
</VControl>
<VControl raw subcontrol>
<VCheckbox v-model="frontmatter.state.option3" label="Option 3" color="info" />
</VControl>
<VControl raw subcontrol>
<VCheckbox v-model="frontmatter.state.option4" label="Option 4" color="success" />
</VControl>
<VControl raw subcontrol>
<VCheckbox v-model="frontmatter.state.option5" label="Option 5" color="warning" />
</VControl>
<VControl raw subcontrol>
<VCheckbox v-model="frontmatter.state.option6" label="Option 6" color="danger" />
</VControl>
</VField>
<!--/example-->

150
documentation/checkbox/checkbox-solid-circle-documentation.md Normal file
View File

@@ -0,0 +1,150 @@
---
state:
options: 'Option 2'
---
### Solid circle
Vuero checkboxes can be circles instead of squares. Simply add the `circle`
attribute to your checkbox element.
See the code example for more details about usage.
<!--code-->
```vue
<script setup lang="ts">
const options = ref('Option 2')
</script>
<template>
<VField class="is-flex">
<VControl raw subcontrol>
<VCheckbox
v-model="options"
true-value="Option 1"
label="Option 1"
solid
circle
/>
</VControl>
<VControl raw subcontrol>
<VCheckbox
v-model="options"
true-value="Option 2"
label="Option 2"
color="primary"
solid
circle
/>
</VControl>
<VControl raw subcontrol>
<VCheckbox
v-model="options"
true-value="Option 3"
label="Option 3"
color="info"
solid
circle
/>
</VControl>
<VControl raw subcontrol>
<VCheckbox
v-model="options"
true-value="Option 4"
label="Option 4"
color="success"
solid
circle
/>
</VControl>
<VControl raw subcontrol>
<VCheckbox
v-model="options"
true-value="Option 5"
label="Option 5"
color="warning"
solid
circle
/>
</VControl>
<VControl raw subcontrol>
<VCheckbox
v-model="options"
true-value="Option 6"
label="Option 6"
color="danger"
solid
circle
/>
</VControl>
</VField>
</template>
```
<!--/code-->
<!--example-->
<VField class="is-flex">
<VControl raw subcontrol>
<VCheckbox
v-model="frontmatter.state.options"
trueValue="Option 1"
label="Option 1"
solid
circle
/>
</VControl>
<VControl raw subcontrol>
<VCheckbox
v-model="frontmatter.state.options"
trueValue="Option 2"
label="Option 2"
color="primary"
solid
circle
/>
</VControl>
<VControl raw subcontrol>
<VCheckbox
v-model="frontmatter.state.options"
trueValue="Option 3"
label="Option 3"
color="info"
solid
circle
/>
</VControl>
<VControl raw subcontrol>
<VCheckbox
v-model="frontmatter.state.options"
trueValue="Option 4"
label="Option 4"
color="success"
solid
circle
/>
</VControl>
<VControl raw subcontrol>
<VCheckbox
v-model="frontmatter.state.options"
trueValue="Option 5"
label="Option 5"
color="warning"
solid
circle
/>
</VControl>
<VControl raw subcontrol>
<VCheckbox
v-model="frontmatter.state.options"
trueValue="Option 6"
label="Option 6"
color="danger"
solid
circle
/>
</VControl>
</VField>
<!--/example-->

142
documentation/checkbox/checkbox-solid-documentation.md Normal file
View File

@@ -0,0 +1,142 @@
---
state:
options: false
---
### Complex object value
You can use complex object values to store the state of the checkbox by using
the `trueValue` and `falseValue` props.
Note that alternative checkbox style with `solid` attribute.
Those checkboxes also support all main colors.
The available modifiers are `primary`, `success`, `info`,
`warning`, `danger`.
<!--code-->
```vue
<script setup lang="ts">
const options = ref(false)
</script>
<template>
<VField class="is-flex">
<VControl raw subcontrol>
<VCheckbox
v-model="options"
:true-value="{ name: 'option1', label: 'Option 1' }"
label="Option 1"
solid
/>
</VControl>
<VControl raw subcontrol>
<VCheckbox
v-model="options"
:true-value="{ name: 'option2', label: 'Option 2' }"
label="Option 2"
color="primary"
solid
/>
</VControl>
<VControl raw subcontrol>
<VCheckbox
v-model="options"
:true-value="{ name: 'option3', label: 'Option 3' }"
label="Option 3"
color="info"
solid
/>
</VControl>
<VControl raw subcontrol>
<VCheckbox
v-model="options"
:true-value="{ name: 'option4', label: 'Option 4' }"
label="Option 4"
color="success"
solid
/>
</VControl>
<VControl raw subcontrol>
<VCheckbox
v-model="options"
:true-value="{ name: 'option5', label: 'Option 5' }"
label="Option 5"
color="warning"
solid
/>
</VControl>
<VControl raw subcontrol>
<VCheckbox
v-model="options"
:true-value="{ name: 'option6', label: 'Option 6' }"
label="Option 6"
color="danger"
solid
/>
</VControl>
</VField>
</template>
```
<!--/code-->
<!--example-->
<VField class="is-flex">
<VControl raw subcontrol>
<VCheckbox
v-model="frontmatter.state.options"
:trueValue="{ name: 'option1', label: 'Option 1' }"
label="Option 1"
solid
/>
</VControl>
<VControl raw subcontrol>
<VCheckbox
v-model="frontmatter.state.options"
:trueValue="{ name: 'option2', label: 'Option 2' }"
label="Option 2"
color="primary"
solid
/>
</VControl>
<VControl raw subcontrol>
<VCheckbox
v-model="frontmatter.state.options"
:trueValue="{ name: 'option3', label: 'Option 3' }"
label="Option 3"
color="info"
solid
/>
</VControl>
<VControl raw subcontrol>
<VCheckbox
v-model="frontmatter.state.options"
:trueValue="{ name: 'option4', label: 'Option 4' }"
label="Option 4"
color="success"
solid
/>
</VControl>
<VControl raw subcontrol>
<VCheckbox
v-model="frontmatter.state.options"
:trueValue="{ name: 'option5', label: 'Option 5' }"
label="Option 5"
color="warning"
solid
/>
</VControl>
<VControl raw subcontrol>
<VCheckbox
v-model="frontmatter.state.options"
:trueValue="{ name: 'option6', label: 'Option 6' }"
label="Option 6"
color="danger"
solid
/>
</VControl>
</VField>
<!--/example-->

40
documentation/collapse/accordion-collapse-documentation.md Normal file
View File

@@ -0,0 +1,40 @@
### VCollapse
Vuero provides 2 collapse component variations:
`<VCollapse />` and `<VCollapse with-chevron />`.
There are 2 available variations that you can use to change the
collapse header icon. Pass an **Array** to the `items` props to render
the chosen collapse component. Check markup for more details.
<!--code-->
```vue
<script setup lang="ts">
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 ...',
},
]
</script>
<template>
<div class="column is-6">
<VCollapse :items="data" />
</div>
<div class="column is-6">
<VCollapse :items="data" with-chevron />
</div>
</template>
```
<!--/code-->

67
documentation/control/v-control-validation-documentation.md Normal file
View File

@@ -0,0 +1,67 @@
### Validation
Vuero offers `VControl` validation styles to go with any type of
form validation library you could use in your project.
Use the props shown in the code examples to handle validation.
<!--code-->
```vue
<template>
<VField>
<VControl icon="lucide:user" is-valid>
<VInput
type="text"
placeholder="Username"
value="Superman"
/>
<p class="help has-text-success">
This username is available
</p>
</VControl>
</VField>
<VField>
<VControl icon="lucide:lock" has-error>
<VInput
type="text"
placeholder="Password"
value="passwd"
/>
<p class="help has-text-danger">
The password must contains 8 characters
</p>
</VControl>
</VField>
</template>
```
<!--/code-->
<!--example-->
<form method="post" novalidate @submit.prevent>
<VField>
<VControl icon="lucide:user" is-valid>
<VInput
type="text"
placeholder="Username"
value="Superman"
autocomplete="username"
/>
<p class="help has-text-success">This username is available</p>
</VControl>
</VField>
<VField>
<VControl icon="lucide:lock" has-error>
<VInput
type="text"
placeholder="Password"
value="passwd"
autocomplete="current-password"
/>
<p class="help has-text-danger">The password must contains 8 characters</p>
</VControl>
</VField>
</form>
<!--/example-->

71
documentation/control/v-control-validation-rounded-documentation.md Normal file
View File

@@ -0,0 +1,71 @@
### Validation rounded
Vuero offers `VControl` validation styles to go with any type of form validation
library you could use in your project.
Use the props shown in the code examples to handle validation.
<!--code-->
```vue
<template>
<VField>
<VControl icon="lucide:user" is-valid>
<VInput
type="text"
class="is-rounded"
placeholder="Username"
value="Superman"
/>
<p class="help has-text-success">
This username is available
</p>
</VControl>
</VField>
<VField>
<VControl icon="lucide:lock" has-error>
<VInput
type="text"
class="is-rounded"
placeholder="Password"
value="passwd"
/>
<p class="help has-text-danger">
The password must contains 8 characters
</p>
</VControl>
</VField>
</template>
```
<!--/code-->
<!--example-->
<form method="post" novalidate @submit.prevent>
<VField>
<VControl icon="lucide:user" is-valid>
<VInput
type="text"
class="is-rounded"
placeholder="Username"
value="Superman"
autocomplete="username"
/>
<p class="help has-text-success">This username is available</p>
</VControl>
</VField>
<VField>
<VControl icon="lucide:lock" has-error>
<VInput
type="text"
class="is-rounded"
placeholder="Password"
value="passwd"
autocomplete="current-password"
/>
<p class="help has-text-danger">The password must contains 8 characters</p>
</VControl>
</VField>
</form>
<!--/example-->

471
documentation/control/v-control-validation-vee-zod-documentation.md Normal file
View File

@@ -0,0 +1,471 @@
### VeeValidate and Zod
[VeeValidate](https://vee-validate.logaretm.com/v4/) offer a great set of tools
to validate your forms wich work perfectly with vuero.
We recommand you to use [zod](https://github.com/colinhacks/zod) to
declare schema for VeeValidate forms but you can also use [yup]()
if you already are familiar with it.
<!--code-->
```vue
<script setup lang="ts">
import { toTypedSchema } from '@vee-validate/zod'
import { useField, useFieldArray, useForm } from 'vee-validate'
import { z } from 'zod'
import VueScrollTo from 'vue-scrollto'
const notyf = useNotyf()
const { scrollTo } = VueScrollTo
// This is the Zod schema for the form input
// It's used to define the shape that the form data will have
const zodSchema = z
.object({
email: z
.string({
required_error: 'Enter your email first',
})
.email('A valid email address should be provided'),
rating: z
.number({
required_error: 'Enter a valid rating first',
})
.gte(1, 'The rating should be at least 1'),
password: z
.string({
required_error: 'Enter your password to sign in',
})
.min(8, 'Your password should contains at least 8 characters'),
passwordCheck: z.string(),
birthdate: z
.date({
invalid_type_error: 'Please enter a valid date',
required_error: 'Please enter a date',
})
.max(new Date(), 'You cannot be born in the future')
.nullable(),
agreeTerms: z
.boolean()
.refine(value => value, 'You must agree our terms of service'),
area: z.object({
timezone: z.string().min(1, 'Please select a timezone'),
}),
interests: z
.string()
.array()
.min(2, 'You must select at least 2 center of interest')
.max(3, 'You can select up to 3 center of interest'),
allergens: z.string().array().max(4, 'You can select up to 4 allergen'),
feedback: z
.array(
z.object({
title: z
.string()
.min(10, 'Your experience title should be at least 10 characters'),
rating: z.number().gte(1, 'The rating should be at least 1'),
}),
)
.min(1, 'You must send at least 1 feedback')
.max(3, 'You can send up to 3 feedbacks'),
emailOptin: z.boolean(),
})
.refine(data => data.password === data.passwordCheck, {
message: 'The confirmation does not match the password',
path: ['passwordCheck'],
})
// Zod has a great infer method that will
// infer the shape of the schema into a TypeScript type
type FormInput = z.infer<typeof zodSchema>
// we need to declare the schema for the form
const validationSchema = toTypedSchema(zodSchema)
// Set initial values for the form
const initialValues = computed<FormInput>(() => ({
email: '',
password: '',
rating: 1,
passwordCheck: '',
birthdate: null,
interests: [],
allergens: [],
feedback: [],
agreeTerms: false,
emailOptin: false,
}))
// here we create a vee-validate form context that
// will be used in all vuero form components
const { handleSubmit, setFieldError, handleReset, values, errors } = useForm({
validationSchema,
initialValues,
})
const { remove, push, fields } = useFieldArray<FormInput['feedback'][0]>('feedback')
const { errorMessage } = useField<FormInput['feedback'][0]>('feedback')
const loading = ref(false)
// here we handle our form submission
const handleSignup = handleSubmit(async (values) => {
if (loading.value) return
loading.value = true
await sleep(1600)
if (values.email !== 'awesome@cssninja.io') {
setFieldError('email', 'This email is already taken! Tip: use awesome@cssninja.io')
scrollTo('#email')
loading.value = false
return
}
notyf.primary('You have successfully signed up!')
loading.value = false
})
</script>
<template>
<form
method="post"
novalidate
@submit.prevent="handleSignup"
>
<VField
id="email"
v-slot="{ field }"
label="Your email"
>
<VControl icon="lucide:user">
<VInput
type="email"
placeholder="john.doe@gmail.com"
autocomplete="username"
/>
<p v-if="field?.errorMessage" class="help is-danger">
{{ field.errorMessage }}
</p>
</VControl>
</VField>
<VField
id="password"
v-slot="{ field }"
label="Choose a password"
>
<VControl icon="lucide:lock">
<VInput
type="password"
placeholder="Not$3cret"
autocomplete="new-password"
/>
<p v-if="field?.errorMessage" class="help is-danger">
{{ field.errorMessage }}
</p>
</VControl>
</VField>
<VField
id="passwordCheck"
v-slot="{ field }"
label="Confirm your new password"
>
<VControl icon="lucide:check">
<VInput
type="password"
placeholder="Not$3cret"
autocomplete="new-password"
/>
<p v-if="field?.errorMessage" class="help is-danger">
{{ field.errorMessage }}
</p>
</VControl>
</VField>
<VField
id="birthdate"
v-slot="{ field }"
label="Birthdate"
>
<VControl icon="lucide:calendar">
<ClientOnly>
<VDatePicker
:model-value="field?.value"
color="green"
trim-weeks
@update:model-value="field?.handleChange"
>
<template #default="{ inputValue, inputEvents }">
<input
class="input"
type="text"
:value="inputValue"
placeholder="Select your birthdate"
v-on="inputEvents"
>
<p v-if="field?.errorMessage" class="help is-danger">
{{ field.errorMessage }}
</p>
</template>
</VDatePicker>
</ClientOnly>
</VControl>
</VField>
<VField
id="interests"
v-slot="{ field }"
class="pb-4"
label="Choose 2 or 3 center of interests"
>
<VControl>
<VSelect multiple size="9">
<VOption value="Food">
Food
</VOption>
<VOption value="Home Appliances">
Home Appliances
</VOption>
<VOption value="Computer & Office">
Computer & Office
</VOption>
<VOption value="Home Improvement">
Home Improvement
</VOption>
<VOption value="Home & Garden">
Home & Garden
</VOption>
<VOption value="Sports & Entertainment">
Sports & Entertainment
</VOption>
<VOption value="Toys & Hobbies">
Education & Office Supplies
</VOption>
<VOption value="Security & Protection">
Security & Protection
</VOption>
<VOption value="Lights & Lighting">
Lights & Lighting
</VOption>
</VSelect>
<p v-if="field?.errorMessage" class="help is-danger">
{{ field.errorMessage }}
</p>
<p class="help">
Hold down the <kbd>Ctrl</kbd> (windows) / <kbd>Command</kbd> (Mac) button to
select multiple options.
</p>
</VControl>
</VField>
<VField
id="area"
v-slot="{ field }"
class="pb-4"
label="Choose your timezone"
>
<VControl>
<VSelect>
<VOption :value="{ timezone: 'europe/paris', label: 'Paris' }">
europe
</VOption>
<VOption :value="{ timezone: 'asia/tokyo', label: 'Tokyo' }">
asia
</VOption>
<VOption :value="{ timezone: 'america/new_york', label: 'New York' }">
america
</VOption>
<VOption :value="{ timezone: 'australia/sydney', label: 'Sydney' }">
australia
</VOption>
</VSelect>
<p v-if="field?.errorMessage" class="help is-danger">
{{ field.errorMessage }}
</p>
</VControl>
</VField>
<VField
id="allergens"
v-slot="{ field }"
label="Pick your allergens"
>
<VControl>
<VCheckbox
class="pl-0"
color="primary"
value="peanuts"
>
Peanuts
</VCheckbox>
<VCheckbox
id="allergens-milk"
color="primary"
value="milk"
>
Milk
</VCheckbox>
<VCheckbox
id="allergens-egg"
color="primary"
value="egg"
>
Egg
</VCheckbox>
<VCheckbox
id="allergens-fish"
color="primary"
value="fish"
>
Fish
</VCheckbox>
<VCheckbox
id="allergens-soybeans"
color="primary"
value="soybeans"
>
Soybeans
</VCheckbox>
</VControl>
<p v-if="field?.errorMessage" class="help is-danger">
{{ field.errorMessage }}
</p>
</VField>
<div class="py-4">
<!-- eslint-disable-next-line vue/require-v-for-key -->
<div v-for="(element, index) in fields" class="my-3">
<div class="columns">
<VField
:id="`feedback[${index}].title`"
v-slot="{ field }"
label="Name your experience"
class="column is-two-fifths"
>
<VControl>
<VInput
type="email"
placeholder="john.doe@gmail.com"
autocomplete="username"
/>
<p v-if="field?.errorMessage" class="help is-danger">
{{ field.errorMessage }}
</p>
</VControl>
</VField>
<VField
:id="`feedback[${index}].rating`"
v-slot="{ field }"
class="ml-4"
label="Give a rating"
>
<VControl>
<VRangeRating class="mt-5" size="medium" />
<p v-if="field?.errorMessage" class="help is-danger">
{{ field.errorMessage }}
</p>
</VControl>
</VField>
<VIconButton
class="is-remove"
:style="{}"
light
raised
circle
color="danger"
icon="lucide:trash-2"
@click="() => remove(index)"
/>
</div>
</div>
<div class="mb-5">
<VButton @click="() => push({ rating: 3, title: '' })">
Add feedback
</VButton>
<p v-if="errorMessage" class="help is-danger">
{{ errorMessage }}
</p>
</div>
</div>
<VField id="agreeTerms" v-slot="{ field }">
<VControl>
<VCheckbox paddingless>
I agree to the <a href="#">terms and conditions</a>
</VCheckbox>
<p v-if="field?.errorMessage" class="help is-danger">
{{ field.errorMessage }}
</p>
</VControl>
</VField>
<VField id="emailOptin">
<VControl>
<VCheckbox color="primary" paddingless>
I want to receive exclusive news and updates
</VCheckbox>
</VControl>
</VField>
<VButtons class="pt-4">
<VButton
:loading="loading"
type="submit"
color="primary"
>
Submit
</VButton>
<VButton type="reset" @click="handleReset">
Reset
</VButton>
</VButtons>
<div class="demo-code-wrapper">
<div class="demo-state">
<pre>{{ values }}</pre>
</div>
<div class="demo-state">
<pre>{{ errors }}</pre>
</div>
</div>
</form>
</template>
<style lang="scss" scoped>
.is-remove {
margin-inline-start: 1.5rem;
margin-top: 2.25rem;
}
.demo-code-wrapper {
display: flex;
flex-direction: column-reverse;
margin-top: 2rem;
overflow-x: auto;
.demo-code {
flex-grow: 1;
}
.demo-state {
// flex-grow: 1;
position: relative;
margin-bottom: 1.5rem;
max-width: 100%;
&::before {
position: absolute;
top: 0.6em;
inset-inline-end: 1em;
z-index: 2;
font-size: 0.8rem;
color: #888;
content: 'values';
}
}
}
@media only screen and (width <= 767px) {
.is-remove {
margin-inline-start: 1rem;
margin-top: 1em;
margin-bottom: 2.25rem;
}
}
</style>
```
<!--/code-->

102
documentation/dropdown/dropdown-button-hover-documentation.md Normal file
View File

@@ -0,0 +1,102 @@
### Hover buttons
Vuero's `<VDropdown />` component can also be opened
on hover or after any custom event.
Please refer to the markup for more details about usage.
<!--code-->
```vue
<template>
<VDropdown>
<template #button="{ open, toggle }">
<VButton
icon="lucide:help-circle"
class="is-trigger"
@mouseenter="open"
@focusin="open"
@click="toggle"
>
Hover me!
</VButton>
</template>
<template #content="{ close }">
<div
role="button"
tabIndex="0"
@mouseleave="close"
@focusout="close"
>
<a href="#" class="dropdown-item"> Dropdown item </a>
<a href="#" class="dropdown-item"> Other dropdown item </a>
<a href="#" class="dropdown-item is-active"> Active dropdown item </a>
<a href="#" class="dropdown-item"> Other dropdown item </a>
<hr class="dropdown-divider">
<a href="#" class="dropdown-item"> With a divider </a>
</div>
</template>
</VDropdown>
</template>
```
<!--/code-->
<!--example-->
<VField horizontal style="gap: 0.5rem;">
<VControl>
<VDropdown>
<template #button="{ open, toggle }">
<VButton
icon="lucide:alert-triangle"
class="is-trigger"
color="warning"
@mouseenter="open"
@focusin="open"
@click="toggle"
>
Hover me!
</VButton>
</template>
<template #content="{ close }">
<div @mouseleave="close" @focusout="close">
<a href="#" class="dropdown-item"> Dropdown item </a>
<a href="#" class="dropdown-item"> Other dropdown item </a>
<a href="#" class="dropdown-item is-active"> Active dropdown item </a>
<a href="#" class="dropdown-item"> Other dropdown item </a>
<hr class="dropdown-divider" />
<a href="#" class="dropdown-item"> With a divider </a>
</div>
</template>
</VDropdown>
</VControl>
<VControl>
<VDropdown title="Primary button" up>
<template #button="{ open, toggle }">
<VButton
icon="lucide:help-circle"
class="is-trigger"
@mouseenter="open"
@focusin="open"
@click="toggle"
>
Hover me!
</VButton>
</template>
<template #content="{ close }">
<div @mouseleave="close" @focusout="close">
<a href="#" class="dropdown-item"> Dropdown item </a>
<a href="#" class="dropdown-item"> Other dropdown item </a>
<a href="#" class="dropdown-item is-active"> Active dropdown item </a>
<a href="#" class="dropdown-item"> Other dropdown item </a>
<hr class="dropdown-divider" />
<a href="#" class="dropdown-item"> With a divider </a>
</div>
</template>
</VDropdown>
</VControl>
</VField>
<!--/example-->

70
documentation/dropdown/dropdown-button-slot-documentation.md Normal file
View File

@@ -0,0 +1,70 @@
### Context Menu
Vuero's `<VDropdown />` component can also be displayed
as a context menu holding a single icon.
The icon can be whatever you want with the specific `icon` prop set.
Please refer to the markup for more details about usage.
<!--code-->
```vue
<template>
<VDropdown icon="lucide:more-vertical">
<template #content>
<a href="#" class="dropdown-item"> Dropdown item </a>
<a href="#" class="dropdown-item"> Other dropdown item </a>
<a href="#" class="dropdown-item is-active"> Active dropdown item </a>
<a href="#" class="dropdown-item"> Other dropdown item </a>
<hr class="dropdown-divider">
<a href="#" class="dropdown-item"> With a divider </a>
</template>
</VDropdown>
</template>
```
<!--/code-->
<!--example-->
<VField horizontal style="gap: 0.5rem;">
<VControl>
<VDropdown icon="lucide:more-horizontal">
<template #content>
<a href="#" class="dropdown-item"> Dropdown item </a>
<a href="#" class="dropdown-item"> Other dropdown item </a>
<a href="#" class="dropdown-item is-active"> Active dropdown item </a>
<a href="#" class="dropdown-item"> Other dropdown item </a>
<hr class="dropdown-divider" />
<a href="#" class="dropdown-item"> With a divider </a>
</template>
</VDropdown>
</VControl>
<VControl>
<VDropdown icon="lucide:more-vertical">
<template #content>
<a href="#" class="dropdown-item"> Dropdown item </a>
<a href="#" class="dropdown-item"> Other dropdown item </a>
<a href="#" class="dropdown-item is-active"> Active dropdown item </a>
<a href="#" class="dropdown-item"> Other dropdown item </a>
<hr class="dropdown-divider" />
<a href="#" class="dropdown-item"> With a divider </a>
</template>
</VDropdown>
</VControl>
<VControl>
<VDropdown icon="lucide:help-circle" up>
<template #content>
<a href="#" class="dropdown-item"> Dropdown item </a>
<a href="#" class="dropdown-item"> Other dropdown item </a>
<a href="#" class="dropdown-item is-active"> Active dropdown item </a>
<a href="#" class="dropdown-item"> Other dropdown item </a>
<hr class="dropdown-divider" />
<a href="#" class="dropdown-item"> With a divider </a>
</template>
</VDropdown>
</VControl>
</VField>
<!--/example-->

94
documentation/dropdown/dropdown-colors-documentation.md Normal file
View File

@@ -0,0 +1,94 @@
### Dropdown Colors
You can customize the `<VDropdown />`, using `color` property.
Refer to the dropdown prop documentation for full customization options.
<!--code-->
```vue
<template>
<VDropdown title="Primary" color="primary">
<template #content>
<a href="#" class="dropdown-item"> Dropdown item </a>
<a href="#" class="dropdown-item"> Other dropdown item </a>
<a href="#" class="dropdown-item is-active"> Active dropdown item </a>
<a href="#" class="dropdown-item"> Other dropdown item </a>
<hr class="dropdown-divider">
<a href="#" class="dropdown-item"> With a divider </a>
</template>
</VDropdown>
</template>
```
<!--/code-->
<!--example-->
<VField horizontal style="gap: 0.5rem;">
<VControl>
<VDropdown title="Primary" color="primary">
<template #content>
<a href="#" class="dropdown-item"> Dropdown item </a>
<a href="#" class="dropdown-item"> Other dropdown item </a>
<a href="#" class="dropdown-item is-active"> Active dropdown item </a>
<a href="#" class="dropdown-item"> Other dropdown item </a>
<hr class="dropdown-divider" />
<a href="#" class="dropdown-item"> With a divider </a>
</template>
</VDropdown>
</VControl>
<VControl>
<VDropdown title="Danger" color="danger">
<template #content>
<a href="#" class="dropdown-item"> Dropdown item </a>
<a href="#" class="dropdown-item"> Other dropdown item </a>
<a href="#" class="dropdown-item is-active"> Active dropdown item </a>
<a href="#" class="dropdown-item"> Other dropdown item </a>
<hr class="dropdown-divider" />
<a href="#" class="dropdown-item"> With a divider </a>
</template>
</VDropdown>
</VControl>
<VControl>
<VDropdown title="Warning" color="warning">
<template #content>
<a href="#" class="dropdown-item"> Dropdown item </a>
<a href="#" class="dropdown-item"> Other dropdown item </a>
<a href="#" class="dropdown-item is-active"> Active dropdown item </a>
<a href="#" class="dropdown-item"> Other dropdown item </a>
<hr class="dropdown-divider" />
<a href="#" class="dropdown-item"> With a divider </a>
</template>
</VDropdown>
</VControl>
<VControl>
<VDropdown title="Info" color="info">
<template #content>
<a href="#" class="dropdown-item"> Dropdown item </a>
<a href="#" class="dropdown-item"> Other dropdown item </a>
<a href="#" class="dropdown-item is-active"> Active dropdown item </a>
<a href="#" class="dropdown-item"> Other dropdown item </a>
<hr class="dropdown-divider" />
<a href="#" class="dropdown-item"> With a divider </a>
</template>
</VDropdown>
</VControl>
<VControl>
<VDropdown title="Success" color="success">
<template #content>
<a href="#" class="dropdown-item"> Dropdown item </a>
<a href="#" class="dropdown-item"> Other dropdown item </a>
<a href="#" class="dropdown-item is-active"> Active dropdown item </a>
<a href="#" class="dropdown-item"> Other dropdown item </a>
<hr class="dropdown-divider" />
<a href="#" class="dropdown-item"> With a divider </a>
</template>
</VDropdown>
</VControl>
</VField>
<!--/example-->

74
documentation/dropdown/dropdown-documentation.md Normal file
View File

@@ -0,0 +1,74 @@
### VDropdown
You can use a `<VDropdown />` component to display a menu that
will hold your options. pass the `right` prop to the component to align
it to the right instead of left, which is the default.
Use the `up` prop to make it a dropup.
<!--code-->
```vue
<template>
<VDropdown
title="Dropdown button"
right
up
>
<template #content>
<a href="#" class="dropdown-item"> Dropdown item </a>
<a href="#" class="dropdown-item"> Other dropdown item </a>
<a href="#" class="dropdown-item is-active"> Active dropdown item </a>
<a href="#" class="dropdown-item"> Other dropdown item </a>
<hr class="dropdown-divider">
<a href="#" class="dropdown-item"> With a divider </a>
</template>
</VDropdown>
</template>
```
<!--/code-->
<!--example-->
<VField horizontal style="gap: 0.5rem;">
<VControl>
<VDropdown title="Dropdown button">
<template #content>
<a href="#" class="dropdown-item"> Dropdown item </a>
<a href="#" class="dropdown-item"> Other dropdown item </a>
<a href="#" class="dropdown-item is-active"> Active dropdown item </a>
<a href="#" class="dropdown-item"> Other dropdown item </a>
<hr class="dropdown-divider" />
<a href="#" class="dropdown-item"> With a divider </a>
</template>
</VDropdown>
</VControl>
<VControl>
<VDropdown title="Dropdown right" right>
<template #content>
<a href="#" class="dropdown-item"> Dropdown item </a>
<a href="#" class="dropdown-item"> Other dropdown item </a>
<a href="#" class="dropdown-item is-active"> Active dropdown item </a>
<a href="#" class="dropdown-item"> Other dropdown item </a>
<hr class="dropdown-divider" />
<a href="#" class="dropdown-item"> With a divider </a>
</template>
</VDropdown>
</VControl>
<VControl>
<VDropdown title="Dropdown up" up>
<template #content>
<a href="#" class="dropdown-item"> Dropdown item </a>
<a href="#" class="dropdown-item"> Other dropdown item </a>
<a href="#" class="dropdown-item is-active"> Active dropdown item </a>
<a href="#" class="dropdown-item"> Other dropdown item </a>
<hr class="dropdown-divider" />
<a href="#" class="dropdown-item"> With a divider </a>
</template>
</VDropdown>
</VControl>
</VField>
<!--/example-->

56
documentation/dropdown/dropdown-modern-documentation.md Normal file
View File

@@ -0,0 +1,56 @@
### Modern Dropdown
If you add in some specific markup, `<VDropdown />` buttons can
be enhanced into modern dropdowns with an animated caret icon.
Use the `modern` prop on the component.
<!--code-->
```vue
<template>
<VDropdown title="Modern dropdown" modern>
<template #content>
<a href="#" class="dropdown-item"> Dropdown item </a>
<a href="#" class="dropdown-item"> Other dropdown item </a>
<a href="#" class="dropdown-item is-active"> Active dropdown item </a>
<a href="#" class="dropdown-item"> Other dropdown item </a>
<hr class="dropdown-divider">
<a href="#" class="dropdown-item"> With a divider </a>
</template>
</VDropdown>
</template>
```
<!--/code-->
<!--example-->
<VField horizontal style="gap: 0.5rem;">
<VControl>
<VDropdown title="Modern rounded" class="is-rounded" rounded modern>
<template #content>
<a href="#" class="dropdown-item"> Dropdown item </a>
<a href="#" class="dropdown-item"> Other dropdown item </a>
<a href="#" class="dropdown-item is-active"> Active dropdown item </a>
<a href="#" class="dropdown-item"> Other dropdown item </a>
<hr class="dropdown-divider" />
<a href="#" class="dropdown-item"> With a divider </a>
</template>
</VDropdown>
</VControl>
<VControl>
<VDropdown title="Modern dropdown" modern up right>
<template #content>
<a href="#" class="dropdown-item"> Dropdown item </a>
<a href="#" class="dropdown-item"> Other dropdown item </a>
<a href="#" class="dropdown-item is-active"> Active dropdown item </a>
<a href="#" class="dropdown-item"> Other dropdown item </a>
<hr class="dropdown-divider" />
<a href="#" class="dropdown-item"> With a divider </a>
</template>
</VDropdown>
</VControl>
</VField>
<!--/example-->

148
documentation/dropdown/dropdown-with-icons-documentation.md Normal file
View File

@@ -0,0 +1,148 @@
### Menu with Icons
`<VDropdown />` menu items can have icons and a more structured layout.
Use the `spaced` prop with the provided markup in the code example.
<!--code-->
```vue
<template>
<VDropdown title="Dropdown with icon" spaced>
<template #content>
<a href="#" class="dropdown-item is-media">
<div class="icon">
<i class="lnil lnil-coins" />
</div>
<div class="meta">
<span>Invest</span>
<span>Buy more stocks</span>
</div>
</a>
<a href="#" class="dropdown-item is-media is-active">
<div class="icon">
<i class="lnil lnil-dollar-up" />
</div>
<div class="meta">
<span>Compare</span>
<span>Compare with others</span>
</div>
</a>
<a href="#" class="dropdown-item is-media">
<div class="icon">
<i class="lnil lnil-bank" />
</div>
<div class="meta">
<span>Trade</span>
<span>View opportunities</span>
</div>
</a>
<hr class="dropdown-divider">
<a href="#" class="dropdown-item is-media">
<div class="icon">
<i class="lnil lnil-wallet-alt-1" />
</div>
<div class="meta">
<span>Wallet</span>
<span>Open stock wallet</span>
</div>
</a>
</template>
</VDropdown>
</template>
```
<!--/code-->
<!--example-->
<VField horizontal style="gap: 0.5rem;">
<VControl>
<VDropdown title="Dropdown with icon" spaced>
<template #content>
<a href="#" class="dropdown-item is-media">
<div class="icon">
<i class="lnil lnil-coins"></i>
</div>
<div class="meta">
<span>Invest</span>
<span>Buy more stocks</span>
</div>
</a>
<a href="#" class="dropdown-item is-media is-active">
<div class="icon">
<i class="lnil lnil-dollar-up"></i>
</div>
<div class="meta">
<span>Compare</span>
<span>Compare with others</span>
</div>
</a>
<a href="#" class="dropdown-item is-media">
<div class="icon">
<i class="lnil lnil-bank"></i>
</div>
<div class="meta">
<span>Trade</span>
<span>View opportunities</span>
</div>
</a>
<hr class="dropdown-divider" />
<a href="#" class="dropdown-item is-media">
<div class="icon">
<i class="lnil lnil-wallet-alt-1"></i>
</div>
<div class="meta">
<span>Wallet</span>
<span>Open stock wallet</span>
</div>
</a>
</template>
</VDropdown>
</VControl>
<VControl>
<VDropdown title="With unicons" spaced>
<template #content>
<a href="#" class="dropdown-item is-media">
<div class="icon">
<VIcon icon="uil:pagelines"/>
</div>
<div class="meta">
<span>Invest</span>
<span>Buy more stocks</span>
</div>
</a>
<a href="#" class="dropdown-item is-media is-active">
<div class="icon">
<VIcon icon="uil:meeting-board"/>
</div>
<div class="meta">
<span>Compare</span>
<span>Compare with others</span>
</div>
</a>
<a href="#" class="dropdown-item is-media">
<div class="icon">
<VIcon icon="uil:social-distancing"/>
</div>
<div class="meta">
<span>Trade</span>
<span>View opportunities</span>
</div>
</a>
<hr class="dropdown-divider" />
<a href="#" class="dropdown-item is-media">
<div class="icon">
<VIcon icon="uil:palette"/>
</div>
<div class="meta">
<span>Wallet</span>
<span>Open stock wallet</span>
</div>
</a>
</template>
</VDropdown>
</VControl>
</VField>
<!--/example-->

174
documentation/dropdown/dropdown-with-images-documentation.md Normal file
View File

@@ -0,0 +1,174 @@
### Menu with Images
`<VDropdown />` menus items can have images and more original layout.
Use the `spaced` prop with the provided markup in the code example.
The inner images can be be made rounded by adding
the `is-rounded` class to the image element.
<!--code-->
```vue
<template>
<VDropdown title="Dropdown with image" spaced>
<template #content>
<a href="#" class="dropdown-item is-media">
<img
class="item-img"
src="/images/avatars/svg/vuero-1.svg"
alt=""
>
<div class="meta">
<span>Erik K.</span>
<span>New York, NY</span>
</div>
</a>
<a href="#" class="dropdown-item is-media is-active">
<img
class="item-img"
src="https://media.cssninja.io/content/avatars/7.jpg"
alt=""
>
<div class="meta">
<span>Alice C.</span>
<span>San Diego, CA</span>
</div>
</a>
<a href="#" class="dropdown-item is-media">
<img
class="item-img"
src="https://media.cssninja.io/content/avatars/25.jpg"
alt=""
>
<div class="meta">
<span>Melany W.</span>
<span>San Jose, CA</span>
</div>
</a>
<hr class="dropdown-divider">
<a href="#" class="dropdown-item is-media">
<img
class="item-img"
src="https://media.cssninja.io/content/avatars/9.jpg"
alt=""
>
<div class="meta">
<span>Anna B</span>
<span>San Francisco, CA</span>
</div>
</a>
</template>
</VDropdown>
</template>
```
<!--/code-->
<!--example-->
<VField horizontal style="gap: 0.5rem;">
<VControl>
<VDropdown title="Dropdown with image" spaced>
<template #content>
<a href="#" class="dropdown-item is-media">
<img
class="item-img"
src="/images/avatars/svg/vuero-1.svg"
alt=""
/>
<div class="meta">
<span>Erik K.</span>
<span>New York, NY</span>
</div>
</a>
<a href="#" class="dropdown-item is-media is-active">
<img
class="item-img"
src="https://media.cssninja.io/content/avatars/7.jpg"
alt=""
/>
<div class="meta">
<span>Alice C.</span>
<span>San Diego, CA</span>
</div>
</a>
<a href="#" class="dropdown-item is-media">
<img
class="item-img"
src="https://media.cssninja.io/content/avatars/25.jpg"
alt=""
/>
<div class="meta">
<span>Melany W.</span>
<span>San Jose, CA</span>
</div>
</a>
<hr class="dropdown-divider" />
<a href="#" class="dropdown-item is-media">
<img
class="item-img"
src="https://media.cssninja.io/content/avatars/9.jpg"
alt=""
/>
<div class="meta">
<span>Anna B</span>
<span>San Francisco, CA</span>
</div>
</a>
</template>
</VDropdown>
</VControl>
<VControl>
<VDropdown title="Dropdown with rounded image" spaced>
<template #content>
<a href="#" class="dropdown-item is-media">
<img
class="item-img is-rounded"
src="/images/avatars/svg/vuero-1.svg"
alt=""
/>
<div class="meta">
<span>Erik K.</span>
<span>New York, NY</span>
</div>
</a>
<a href="#" class="dropdown-item is-media is-active">
<img
class="item-img is-rounded"
src="https://media.cssninja.io/content/avatars/7.jpg"
alt=""
/>
<div class="meta">
<span>Alice C.</span>
<span>San Diego, CA</span>
</div>
</a>
<a href="#" class="dropdown-item is-media">
<img
class="item-img is-rounded"
src="https://media.cssninja.io/content/avatars/25.jpg"
alt=""
/>
<div class="meta">
<span>Melany W.</span>
<span>San Jose, CA</span>
</div>
</a>
<hr class="dropdown-divider" />
<a href="#" class="dropdown-item is-media">
<img
class="item-img is-rounded"
src="https://media.cssninja.io/content/avatars/9.jpg"
alt=""
/>
<div class="meta">
<span>Anna B</span>
<span>San Francisco, CA</span>
</div>
</a>
</template>
</VDropdown>
</VControl>
</VField>
<!--/example-->

13
documentation/elements/colors-documentation.md Normal file
View File

@@ -0,0 +1,13 @@
---
disable_code: true
disable_example: true
---
### Theme Colors
Vuero use native CSS variables to define colors.
You can use any color format you want, including new CSS4 color formats like
HSL, HSLA, HWB, etc.
You can edit them with colors pickers below,
then update `src/scss/css-variables/_colors.scss` file with your new colors.

78
documentation/elements/content/content-blockquotes-documentation.md Normal file
View File

@@ -0,0 +1,78 @@
### Blockquotes
Vuero provides `blockquote` html element styling.
Wrap your `blockquote` element inside a `div` with the `content` class.
Blockquotes can have different colors.
Available color modifier classes are `is-primary`, `is-success`,
`is-info`, `is-warning` and `is-danger`.
<!--code-->
```vue
<template>
<div class="content">
<blockquote>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ergo, inquit, tibi Q. Est
enim effectrix multarum et magnarum voluptatum. Equidem, sed audistine modo de
Carneade? Dici enim nihil potest verius. Praeteritis, inquit, gaudeo. Aliter autem
vobis placet.
</p>
</blockquote>
<blockquote class="is-primary">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ergo, inquit, tibi Q. Est
enim effectrix multarum et magnarum voluptatum. Equidem, sed audistine modo de
Carneade? Dici enim nihil potest verius. Praeteritis, inquit, gaudeo. Aliter autem
vobis placet.
</p>
</blockquote>
<blockquote class="is-success">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ergo, inquit, tibi Q. Est
enim effectrix multarum et magnarum voluptatum. Equidem, sed audistine modo de
Carneade? Dici enim nihil potest verius. Praeteritis, inquit, gaudeo. Aliter autem
vobis placet.
</p>
</blockquote>
</div>
</template>
```
<!--/code-->
<!--example-->
<div class="content">
<blockquote>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ergo, inquit, tibi Q. Est enim effectrix multarum et
magnarum voluptatum. Equidem, sed audistine modo de
Carneade? Dici enim nihil potest verius. Praeteritis,
inquit, gaudeo. Aliter autem vobis placet.
</p>
</blockquote>
<blockquote class="is-primary">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ergo, inquit, tibi Q. Est enim effectrix multarum et
magnarum voluptatum. Equidem, sed audistine modo de
Carneade? Dici enim nihil potest verius. Praeteritis,
inquit, gaudeo. Aliter autem vobis placet.
</p>
</blockquote>
<blockquote class="is-success">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Ergo, inquit, tibi Q. Est enim effectrix multarum et
magnarum voluptatum. Equidem, sed audistine modo de
Carneade? Dici enim nihil potest verius. Praeteritis,
inquit, gaudeo. Aliter autem vobis placet.
</p>
</blockquote>
</div>
<!--/example-->

89
documentation/elements/content/content-dividers-documentation.md Normal file
View File

@@ -0,0 +1,89 @@
### Horizontal dividers
Vuero provides dividers for your textual content.
You can use horizontal and vertical dividers by passing
the divider text as a `data-content` html attribute.
See the code example for more details about usage.
<!--code-->
```vue
<template>
<div class="columns">
<div class="column is-5">
<div class="content">
<p>
Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit
ipsum, ut blandit est tellus sit amet turpis.
</p>
<div class="is-divider" data-content="OR" />
<p>
Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit
ipsum, ut blandit est tellus sit amet turpis.
</p>
</div>
</div>
<div class="column is-5 is-offset-1">
<div class="columns">
<div class="column">
<p>
Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit
ipsum, ut blandit est tellus sit amet turpis.
</p>
</div>
<div class="is-divider-vertical" data-content="OR" />
<div class="column">
<p>
Ut venenatis, nisl scelerisque sollicitudin fermentum, quam libero hendrerit
ipsum, ut blandit est tellus sit amet turpis.
</p>
</div>
</div>
</div>
</div>
</template>
```
<!--/code-->
<!--example-->
<div class="columns">
<div class="column is-5">
<div class="content">
<p>
Ut venenatis, nisl scelerisque sollicitudin fermentum,
quam libero hendrerit ipsum, ut blandit est tellus sit
amet turpis.
</p>
<div class="is-divider" data-content="OR"></div>
<p>
Ut venenatis, nisl scelerisque sollicitudin fermentum,
quam libero hendrerit ipsum, ut blandit est tellus sit
amet turpis.
</p>
</div>
</div>
<div class="column is-5 is-offset-1">
<div class="columns">
<div class="column">
<p>
Ut venenatis, nisl scelerisque sollicitudin fermentum,
quam libero hendrerit ipsum, ut blandit est tellus sit
amet turpis.
</p>
</div>
<div class="is-divider-vertical" data-content="OR"></div>
<div class="column">
<p>
Ut venenatis, nisl scelerisque sollicitudin fermentum,
quam libero hendrerit ipsum, ut blandit est tellus sit
amet turpis.
</p>
</div>
</div>
</div>
</div>
<!--/example-->

117
documentation/elements/content/content-ordered-lists-documentation.md Normal file
View File

@@ -0,0 +1,117 @@
### Ordered Lists
Ordered lists `ol` are also genrated using a div with the content class.
Ordered list bullets can be controlled with the type attribute.
Available types are `type="1"`, `type="A"`, `type="a"`, `type="I"`, `type="i"`
<!--code-->
```vue
<template>
<div class="columns">
<div class="column is-one-fifth">
<div class="content">
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</div>
</div>
<div class="column is-one-fifth">
<div class="content">
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</div>
</div>
<div class="column is-one-fifth">
<div class="content">
<ol class="is-light" type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</div>
</div>
<div class="column is-one-fifth">
<div class="content">
<ol class="is-light" type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</div>
</div>
<div class="column is-one-fifth">
<div class="content">
<ol class="is-light" type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</div>
</div>
</div>
</template>
```
<!--/code-->
<!--example-->
<div class="columns">
<div class="column is-one-fifth">
<div class="content">
<ol type="1">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</div>
</div>
<div class="column is-one-fifth">
<div class="content">
<ol type="A">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</div>
</div>
<div class="column is-one-fifth">
<div class="content">
<ol class="is-light" type="a">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</div>
</div>
<div class="column is-one-fifth">
<div class="content">
<ol class="is-light" type="I">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</div>
</div>
<div class="column is-one-fifth">
<div class="content">
<ol class="is-light" type="i">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ol>
</div>
</div>
</div>
<!--/example-->

71
documentation/elements/content/content-subtitles-documentation.md Normal file
View File

@@ -0,0 +1,71 @@
### Subtitles
To create a subtitle, you can add the `subtitle` class to any html element.
Subtitle sizes can be controlled with numbered modifiers using
the patter `is-*` where `*` represents a number between 4 and 6.
<!--code-->
```vue
<template>
<div class="columns">
<div class="column is-3">
<h1 class="title is-3 toc-ignore">
This is a title
</h1>
<p class="subtitle is-4">
This is a huge subtitle
</p>
</div>
<div class="column is-3">
<h2 class="title is-4 toc-ignore">
This is a title
</h2>
<p class="subtitle is-4">
This is a big subtitle
</p>
</div>
<div class="column is-3">
<h2 class="title is-5 toc-ignore">
This is a title
</h2>
<p class="subtitle is-5">
This is a medium subtitle
</p>
</div>
<div class="column is-3">
<h2 class="title is-6 toc-ignore">
This is a title
</h2>
<p class="subtitle is-6">
This is a smaller subtitle
</p>
</div>
</div>
</template>
```
<!--/code-->
<!--example-->
<div class="columns">
<div class="column is-3">
<h1 class="title is-3 toc-ignore">This is a title</h1>
<p class="subtitle is-4">This is a huge subtitle</p>
</div>
<div class="column is-3">
<h2 class="title is-4 toc-ignore">This is a title</h2>
<p class="subtitle is-4">This is a big subtitle</p>
</div>
<div class="column is-3">
<h2 class="title is-5 toc-ignore">This is a title</h2>
<p class="subtitle is-5">This is a medium subtitle</p>
</div>
<div class="column is-3">
<h2 class="title is-6 toc-ignore">This is a title</h2>
<p class="subtitle is-6">This is a smaller subtitle</p>
</div>
</div>
<!--/example-->

176
documentation/elements/content/content-tables-documentation.md Normal file
View File

@@ -0,0 +1,176 @@
### Tables
You can also use the `content` class to wrap an html `table` element
to apply minimum styles to your table UI.
Please refer to the Vuero components section to find more advanced table
examples and layouts.
<!--code-->
```vue
<template>
<div class="content">
<table>
<thead>
<tr>
<th>Heroes</th>
<th>Power</th>
<th>Availability</th>
</tr>
</thead>
<tbody>
<tr>
<td>Superman</td>
<td>
<i class="fas fa-star warning-text" />
<i class="fas fa-star warning-text" />
<i class="fas fa-star warning-text" />
<i class="fas fa-star warning-text" />
<i class="fas fa-star warning-text" />
</td>
<td>
<span class="tag is-rounded is-success">Available</span>
</td>
</tr>
<tr>
<td>Batman</td>
<td>
<i class="fas fa-star warning-text" />
<i class="fas fa-star warning-text" />
<i class="fas fa-star warning-text" />
<i class="fas fa-star" />
<i class="fas fa-star" />
</td>
<td>
<span class="tag is-rounded">Unavailable</span>
</td>
</tr>
<tr>
<td>Deadpool</td>
<td>
<i class="fas fa-star warning-text" />
<i class="fas fa-star warning-text" />
<i class="fas fa-star" />
<i class="fas fa-star" />
<i class="fas fa-star" />
</td>
<td>
<span class="tag is-rounded">Unavailable</span>
</td>
</tr>
<tr>
<td>Spawn</td>
<td>
<i class="fas fa-star warning-text" />
<i class="fas fa-star warning-text" />
<i class="fas fa-star warning-text" />
<i class="fas fa-star warning-text" />
<i class="fas fa-star" />
</td>
<td>
<span class="tag is-rounded is-success">Available</span>
</td>
</tr>
<tr>
<td>Galactus</td>
<td>
<i class="fas fa-star warning-text" />
<i class="fas fa-star warning-text" />
<i class="fas fa-star warning-text" />
<i class="fas fa-star warning-text" />
<i class="fas fa-star warning-text" />
</td>
<td>
<span class="tag is-rounded">Unavailable</span>
</td>
</tr>
</tbody>
</table>
</div>
</template>
```
<!--/code-->
<!--example-->
<div class="content">
<table>
<thead>
<tr>
<th>Heroes</th>
<th>Power</th>
<th>Availability</th>
</tr>
</thead>
<tbody>
<tr>
<td>Superman</td>
<td>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star warning-text"></i>
</td>
<td>
<span class="tag is-rounded is-success">Available</span>
</td>
</tr>
<tr>
<td>Batman</td>
<td>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</td>
<td>
<span class="tag is-rounded">Unavailable</span>
</td>
</tr>
<tr>
<td>Deadpool</td>
<td>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
<i class="fas fa-star"></i>
</td>
<td>
<span class="tag is-rounded">Unavailable</span>
</td>
</tr>
<tr>
<td>Spawn</td>
<td>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star"></i>
</td>
<td>
<span class="tag is-rounded is-success">Available</span>
</td>
</tr>
<tr>
<td>Galactus</td>
<td>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star warning-text"></i>
<i class="fas fa-star warning-text"></i>
</td>
<td>
<span class="tag is-rounded">Unavailable</span>
</td>
</tr>
</tbody>
</table>
</div>
<!--/example-->

193
documentation/elements/content/content-titles-documentation.md Normal file
View File

@@ -0,0 +1,193 @@
### Titles
To create a title, you can add the `title` class to any html element.
Title sizes can be controlled with numbered modifiers using the patter
`is-*` where `*` represents a number between 3 and 6.
Titles can also be thinner using the `is-thin`, bold using the `is-bold`
or bolder using the `is-bolder` modifier classes.
<!--code-->
```vue
<template>
<div class="columns is-multiline">
<div class="column is-3">
<h1 class="title is-3 is-narrow toc-ignore">
This is a title
</h1>
<p>This is a huge title</p>
</div>
<div class="column is-3">
<h2 class="title is-4 is-narrow toc-ignore">
This is a title
</h2>
<p>This is a big title</p>
</div>
<div class="column is-3">
<h2 class="title is-5 is-narrow toc-ignore">
This is a title
</h2>
<p>This is a medium title</p>
</div>
<div class="column is-3">
<h2 class="title is-6 is-narrow toc-ignore">
This is a title
</h2>
<p>This is a smaller title</p>
</div>
<div class="column is-3">
<h1 class="title is-3 is-narrow toc-ignore is-bold">
This is a title
</h1>
<p>This is a huge bold title</p>
</div>
<div class="column is-3">
<h2 class="title is-4 is-narrow toc-ignore is-bold">
This is a title
</h2>
<p>This is a big bold title</p>
</div>
<div class="column is-3">
<h2 class="title is-5 is-narrow toc-ignore is-bold">
This is a title
</h2>
<p>This is a medium bold title</p>
</div>
<div class="column is-3">
<h2 class="title is-6 is-narrow toc-ignore is-bold">
This is a title
</h2>
<p>This is a smaller bold title</p>
</div>
<div class="column is-3">
<h1 class="title is-3 is-narrow toc-ignore is-bolder">
This is a title
</h1>
<p>This is a huge bolder title</p>
</div>
<div class="column is-3">
<h2 class="title is-4 is-narrow toc-ignore is-bolder">
This is a title
</h2>
<p>This is a big bolder title</p>
</div>
<div class="column is-3">
<h2 class="title is-5 is-narrow toc-ignore is-bolder">
This is a title
</h2>
<p>This is a medium bolder title</p>
</div>
<div class="column is-3">
<h2 class="title is-6 is-narrow toc-ignore is-bolder">
This is a title
</h2>
<p>This is a smaller bolder title</p>
</div>
<div class="column is-3">
<h1 class="title is-3 is-narrow toc-ignore is-thin">
This is a title
</h1>
<p>This is a huge thin title</p>
</div>
<div class="column is-3">
<h2 class="title is-4 is-narrow toc-ignore is-thin">
This is a title
</h2>
<p>This is a big thin title</p>
</div>
<div class="column is-3">
<h2 class="title is-5 is-narrow toc-ignore is-thin">
This is a title
</h2>
<p>This is a medium thin title</p>
</div>
<div class="column is-3">
<h2 class="title is-6 is-narrow toc-ignore is-thin">
This is a title
</h2>
<p>This is a smaller thin title</p>
</div>
</div>
</template>
```
<!--/code-->
<!--example-->
<div class="columns is-multiline">
<div class="column is-3">
<h1 class="title is-3 is-narrow toc-ignore">This is a title</h1>
<p>This is a huge title</p>
</div>
<div class="column is-3">
<h2 class="title is-4 is-narrow toc-ignore">This is a title</h2>
<p>This is a big title</p>
</div>
<div class="column is-3">
<h2 class="title is-5 is-narrow toc-ignore">This is a title</h2>
<p>This is a medium title</p>
</div>
<div class="column is-3">
<h2 class="title is-6 is-narrow toc-ignore">This is a title</h2>
<p>This is a smaller title</p>
</div>
<div class="column is-3">
<h1 class="title is-3 is-narrow toc-ignore is-bold">This is a title</h1>
<p>This is a huge bold title</p>
</div>
<div class="column is-3">
<h2 class="title is-4 is-narrow toc-ignore is-bold">This is a title</h2>
<p>This is a big bold title</p>
</div>
<div class="column is-3">
<h2 class="title is-5 is-narrow toc-ignore is-bold">This is a title</h2>
<p>This is a medium bold title</p>
</div>
<div class="column is-3">
<h2 class="title is-6 is-narrow toc-ignore is-bold">This is a title</h2>
<p>This is a smaller bold title</p>
</div>
<div class="column is-3">
<h1 class="title is-3 is-narrow toc-ignore is-bolder">
This is a title
</h1>
<p>This is a huge bolder title</p>
</div>
<div class="column is-3">
<h2 class="title is-4 is-narrow toc-ignore is-bolder">
This is a title
</h2>
<p>This is a big bolder title</p>
</div>
<div class="column is-3">
<h2 class="title is-5 is-narrow toc-ignore is-bolder">
This is a title
</h2>
<p>This is a medium bolder title</p>
</div>
<div class="column is-3">
<h2 class="title is-6 is-narrow toc-ignore is-bolder">
This is a title
</h2>
<p>This is a smaller bolder title</p>
</div>
<div class="column is-3">
<h1 class="title is-3 is-narrow toc-ignore is-thin">This is a title</h1>
<p>This is a huge thin title</p>
</div>
<div class="column is-3">
<h2 class="title is-4 is-narrow toc-ignore is-thin">This is a title</h2>
<p>This is a big thin title</p>
</div>
<div class="column is-3">
<h2 class="title is-5 is-narrow toc-ignore is-thin">This is a title</h2>
<p>This is a medium thin title</p>
</div>
<div class="column is-3">
<h2 class="title is-6 is-narrow toc-ignore is-thin">This is a title</h2>
<p>This is a smaller thin title</p>
</div>
</div>
<!--/example-->

61
documentation/elements/content/content-unordered-lists-documentation.md Normal file
View File

@@ -0,0 +1,61 @@
### Unordered Lists
By default, using an unordered `ul` list won't generate an html list.
This is part of the Bulma specification. To generate you unordered list,
wrap it inside a `div` with the `content` class. Lists can also
have the `is-light` modifier to change the text color.
<!--code-->
```vue
<template>
<div class="columns">
<div class="column is-one-fifth">
<div class="content">
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</div>
</div>
<div class="column is-one-fifth">
<div class="content">
<ul class="is-light">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</div>
</div>
</div>
</template>
```
<!--/code-->
<!--example-->
<div class="columns">
<div class="column is-one-fifth">
<div class="content">
<ul>
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</div>
</div>
<div class="column is-one-fifth">
<div class="content">
<ul class="is-light">
<li>Coffee</li>
<li>Tea</li>
<li>Milk</li>
</ul>
</div>
</div>
</div>
<!--/example-->

101
documentation/elements/forms/file/file-base-documentation.md Normal file
View File

@@ -0,0 +1,101 @@
### Input File
Vuero provides default styles for file inputs, in case you need a control
to upload a single file in your forms.
File inputs can look like upload buttons.
Please refer to markup for more details about usage.
<!--code-->
```vue
<template>
<VField grouped>
<VControl>
<div class="file">
<label class="file-label">
<input
class="file-input"
type="file"
name="resume"
>
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-cloud-upload-alt" />
</span>
<span class="file-label"> Choose a file… </span>
</span>
</label>
</div>
</VControl>
</VField>
</template>
```
<!--/code-->
<!--example-->
<VField grouped>
<VControl>
<div class="file">
<label class="file-label">
<input class="file-input" type="file" name="resume">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-cloud-upload-alt"></i>
</span>
<span class="file-label">
Choose a file…
</span>
</span>
</label>
</div>
</VControl>
<VControl>
<div class="file is-default">
<label class="file-label">
<input class="file-input" type="file" name="resume">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-cloud-upload-alt"></i>
</span>
<span class="file-label">
Choose a file…
</span>
</span>
</label>
</div>
</VControl>
<VControl>
<div class="file is-primary">
<label class="file-label">
<input class="file-input" type="file" name="resume">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-cloud-upload-alt"></i>
</span>
<span class="file-label">
Choose a file…
</span>
</span>
</label>
</div>
</VControl>
<VControl>
<div class="file is-info">
<label class="file-label">
<input class="file-input" type="file" name="resume">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-cloud-upload-alt"></i>
</span>
<span class="file-label">
Choose a file…
</span>
</span>
</label>
</div>
</VControl>
</VField>
<!--/example-->

85
documentation/elements/forms/file/file-boxed-documentation.md Normal file
View File

@@ -0,0 +1,85 @@
### Boxed File
Vuero file inputs can have a boxed style.
You just need to add the `is-boxed` class to your file input element
to apply this style. Please refer to markup for more details about usage.
<!--code-->
```vue
<template>
<VField grouped>
<VControl>
<div class="file is-boxed">
<label class="file-label">
<input
class="file-input"
type="file"
name="resume"
>
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-cloud-upload-alt" />
</span>
<span class="file-label"> Choose a file… </span>
</span>
</label>
</div>
</VControl>
</VField>
</template>
```
<!--/code-->
<!--example-->
<VField grouped>
<VControl>
<div class="file is-boxed">
<label class="file-label">
<input class="file-input" type="file" name="resume">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-cloud-upload-alt"></i>
</span>
<span class="file-label">
Choose a file…
</span>
</span>
</label>
</div>
</VControl>
<VControl>
<div class="file is-default is-boxed">
<label class="file-label">
<input class="file-input" type="file" name="resume">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-cloud-upload-alt"></i>
</span>
<span class="file-label">
Choose a file…
</span>
</span>
</label>
</div>
</VControl>
<VControl>
<div class="file is-primary is-boxed">
<label class="file-label">
<input class="file-input" type="file" name="resume">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-cloud-upload-alt"></i>
</span>
<span class="file-label">
Choose a file…
</span>
</span>
</label>
</div>
</VControl>
</VField>
<!--/example-->

59
documentation/elements/forms/file/file-left-documentation.md Normal file
View File

@@ -0,0 +1,59 @@
### File left
File inputs can show an additional area to display the selected file name.
You just need to add the `has-name` class to your file input element
to apply this style. Please refer to markup for more details about usage.
<!--code-->
```vue
<template>
<VField grouped>
<VControl>
<div class="file has-name">
<label class="file-label">
<input
class="file-input"
type="file"
name="resume"
>
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-cloud-upload-alt" />
</span>
<span class="file-label"> Choose a file… </span>
</span>
<span class="file-name light-text"> 22082020_project_budget.xls </span>
</label>
</div>
</VControl>
</VField>
</template>
```
<!--/code-->
<!--example-->
<VField grouped>
<VControl>
<div class="file has-name">
<label class="file-label">
<input class="file-input" type="file" name="resume">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-cloud-upload-alt"></i>
</span>
<span class="file-label">
Choose a file…
</span>
</span>
<span class="file-name light-text">
22082020_project_budget.xls
</span>
</label>
</div>
</VControl>
</VField>
<!--/example-->

60
documentation/elements/forms/file/file-right-documentation.md Normal file
View File

@@ -0,0 +1,60 @@
### File right
File inputs can show an additional area to display the selected file name.
You just need to add the `has-name` and `is-right` classes
to your file input element to apply this style. Please refer to markup
for more details about usage.
<!--code-->
```vue
<template>
<VField grouped>
<VControl>
<div class="file has-name is-right">
<label class="file-label">
<input
class="file-input"
type="file"
name="resume"
>
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-cloud-upload-alt" />
</span>
<span class="file-label"> Choose a file… </span>
</span>
<span class="file-name light-text"> 22082020_project_budget.xls </span>
</label>
</div>
</VControl>
</VField>
</template>
```
<!--/code-->
<!--example-->
<VField grouped>
<VControl>
<div class="file has-name is-right">
<label class="file-label">
<input class="file-input" type="file" name="resume">
<span class="file-cta">
<span class="file-icon">
<i class="fas fa-cloud-upload-alt"></i>
</span>
<span class="file-label">
Choose a file…
</span>
</span>
<span class="file-name light-text">
22082020_project_budget.xls
</span>
</label>
</div>
</VControl>
</VField>
<!--/example-->

48
documentation/elements/forms/inputs/input-basic-documentation.md Normal file
View File

@@ -0,0 +1,48 @@
---
state:
input: ''
---
### VInput
Vuero provides elegant form controls with minimum styling.
`VInput` accept all attributes that `<input>` accepts.
Always wrap your inputs inside a `<VField />` and a `<VControl />`
to build forms quickly and efficiently.
<!--code-->
```vue
<script setup lang="ts">
const input = ref('')
</script>
<template>
<VField>
<VControl>
<VInput
v-model="input"
type="text"
placeholder="Your username"
/>
</VControl>
</VField>
</template>
```
<!--/code-->
<!--example-->
<VField>
<VControl>
<VInput
v-model="frontmatter.state.input"
type="text"
placeholder="Your username"
/>
</VControl>
</VField>
<!--/example-->

180
documentation/elements/forms/inputs/input-dataset-documentation.md Normal file
View File

@@ -0,0 +1,180 @@
---
state:
color: '#8b5cf6'
cake: ''
date: ''
---
### Autocomplete using native datalist
You can use native [`datalist`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist)
let your browser handle the autocomplete for you. Just add a `list` attribute
to your input and add the `datalist` element with the `id` that matches the `list` attribute.
This is a great way to provide a list of options to your users.
<!--code-->
```vue
<script setup lang="ts">
const color = ref('#8b5cf6')
const cake = ref('')
const date = ref('')
</script>
<template>
<div class="is-flex is-flex-wrap-wrap" :style="{ gap: '1rem' }">
<VField>
<VControl :style="{ width: '70px' }">
<VInput
v-model="color"
list="colors-list"
type="color"
placeholder="Pick a color"
/>
<datalist id="colors-list">
<option value="#84cc16" />
<option value="#22c55e" />
<option value="#0ea5e9" />
<option value="#6366f1" />
<option value="#8b5cf6" />
<option value="#d946ef" />
<option value="#f43f5e" />
<option value="#facc15" />
<option value="#fb923c" />
<option value="#9ca3af" />
</datalist>
</VControl>
</VField>
<VField>
<VControl class="is-flex-grow-1">
<VInput
v-model="cake"
list="cake-list"
type="text"
placeholder="Choose a recipe"
/>
<datalist id="cake-list">
<option value="Chocolate cake" />
<option value="Vanilla cake" />
<option value="Red velvet cake" />
<option value="Carrot cake" />
<option value="Lemon cake" />
<option value="Strawberry cake" />
<option value="Coconut cake" />
<option value="Black forest cake" />
<option value="Pineapple upside-down cake" />
<option value="Marble cake" />
<option value="Funfetti cake" />
<option value="Coffee cake" />
<option value="Tiramisu cake" />
<option value="Banana cake" />
<option value="Raspberry cake" />
<option value="Oreo cake" />
<option value="German chocolate cake" />
<option value="Pumpkin cake" />
<option value="Blueberry cake" />
<option value="Almond cake" />
</datalist>
</VControl>
</VField>
<VField>
<VControl class="is-flex-grow-1">
<VInput
v-model="date"
list="times-list"
type="time"
placeholder="Pick an hour"
/>
<datalist id="times-list">
<option value="12:00" />
<option value="13:00" />
<option value="14:00" />
</datalist>
</VControl>
</VField>
</div>
</template>
```
<!--/code-->
<!--example-->
<div
class="is-flex is-flex-wrap-wrap"
:style="{ gap: '1rem' }"
>
<VField>
<VControl :style="{ width: '70px' }">
<VInput
v-model="frontmatter.state.color"
list="colors-list"
type="color"
placeholder="Pick a color"
/>
<datalist id="colors-list">
<option value="#84cc16"></option>
<option value="#22c55e"></option>
<option value="#0ea5e9"></option>
<option value="#6366f1"></option>
<option value="#8b5cf6"></option>
<option value="#d946ef"></option>
<option value="#f43f5e"></option>
<option value="#facc15"></option>
<option value="#fb923c"></option>
<option value="#9ca3af"></option>
</datalist>
</VControl>
</VField>
<VField>
<VControl class="is-flex-grow-1">
<VInput
v-model="frontmatter.state.cake"
list="cake-list"
type="text"
placeholder="Choose a recipe"
/>
<datalist id="cake-list">
<option value="Chocolate cake"></option>
<option value="Vanilla cake"></option>
<option value="Red velvet cake"></option>
<option value="Carrot cake"></option>
<option value="Lemon cake"></option>
<option value="Strawberry cake"></option>
<option value="Coconut cake"></option>
<option value="Black forest cake"></option>
<option value="Pineapple upside-down cake"></option>
<option value="Marble cake"></option>
<option value="Funfetti cake"></option>
<option value="Coffee cake"></option>
<option value="Tiramisu cake"></option>
<option value="Banana cake"></option>
<option value="Raspberry cake"></option>
<option value="Oreo cake"></option>
<option value="German chocolate cake"></option>
<option value="Pumpkin cake"></option>
<option value="Blueberry cake"></option>
<option value="Almond cake"></option>
</datalist>
</VControl>
</VField>
<VField>
<VControl class="is-flex-grow-1">
<VInput
v-model="frontmatter.state.date"
list="times-list"
type="time"
placeholder="Pick an hour"
/>
<datalist id="times-list">
<option value="12:00"></option>
<option value="13:00"></option>
<option value="14:00"></option>
</datalist>
</VControl>
</VField>
</div>
<!--/example-->

36
documentation/elements/forms/inputs/input-disabled-documentation.md Normal file
View File

@@ -0,0 +1,36 @@
### Disabled input
An `VInput` can be shown in a disabled state. To apply that style,
simply add the `disabled` atribute to the target input element.
<!--code-->
```vue
<template>
<VField>
<VControl>
<VInput
type="text"
placeholder="Username"
disabled
/>
</VControl>
</VField>
</template>
```
<!--/code-->
<!--example-->
<VField>
<VControl>
<VInput
type="text"
placeholder="Username"
disabled
/>
</VControl>
</VField>
<!--/example-->

37
documentation/elements/forms/inputs/input-fa-documentation.md Normal file
View File

@@ -0,0 +1,37 @@
### Font Awesome
Vuero `VInput` are fully compatible with Font Awesome 5 icons.
Use the `iconed` prop on the `<VControl />` component to show an icon.
You also have to provide an icon type using the `icon` or `iconify` props.
<!--code-->
```vue
<template>
<VField>
<VControl icon="fab fa-twitter">
<VInput
type="text"
class="is-rounded"
placeholder="Username"
/>
</VControl>
</VField>
</template>
```
<!--/code-->
<!--example-->
<VField>
<VControl icon="fab fa-twitter">
<VInput
type="text"
class="is-rounded"
placeholder="Username"
/>
</VControl>
</VField>
<!--/example-->

37
documentation/elements/forms/inputs/input-feather-documentation.md Normal file
View File

@@ -0,0 +1,37 @@
### Lucide Icons
Vuero `VInput` are fully compatible with any icons from [icones.js](https://icones.js.org/).
Use the `icon` or `iconify` propson the `<VControl />`
component to show an icon.
<!--code-->
```vue
<template>
<VField>
<VControl icon="lucide:github">
<VInput
type="text"
class="is-rounded"
placeholder="GitHub URL"
/>
</VControl>
</VField>
</template>
```
<!--/code-->
<!--example-->
<VField>
<VControl icon="lucide:github">
<VInput
type="text"
class="is-rounded"
placeholder="GitHub URL"
/>
</VControl>
</VField>
<!--/example-->

110
documentation/elements/forms/inputs/input-focus-documentation.md Normal file
View File

@@ -0,0 +1,110 @@
### Focus Colors
An `VInput` can have different border colors when focused.
Simply add the appropriate color modifier class.
Available classes are `is-primary-focus`, `is-success-focus`,
`is-info-focus`, `is-warning-focus`, `is-danger-focus`.
<!--code-->
```vue
<template>
<VField>
<VControl>
<VInput
type="text"
class="is-primary-focus"
placeholder="Primary"
/>
</VControl>
</VField>
<VField>
<VControl>
<VInput
type="text"
class="is-info-focus"
placeholder="Info"
/>
</VControl>
</VField>
<VField>
<VControl>
<VInput
type="text"
class="is-success-focus"
placeholder="Success"
/>
</VControl>
</VField>
<VField>
<VControl>
<VInput
type="text"
class="is-warning-focus"
placeholder="Warning"
/>
</VControl>
</VField>
<VField>
<VControl>
<VInput
type="text"
class="is-danger-focus"
placeholder="Danger"
/>
</VControl>
</VField>
</template>
```
<!--/code-->
<!--example-->
<VField>
<VControl>
<VInput
type="text"
class="is-primary-focus"
placeholder="Primary"
/>
</VControl>
</VField>
<VField>
<VControl>
<VInput
type="text"
class="is-info-focus"
placeholder="Info"
/>
</VControl>
</VField>
<VField>
<VControl>
<VInput
type="text"
class="is-success-focus"
placeholder="Success"
/>
</VControl>
</VField>
<VField>
<VControl>
<VInput
type="text"
class="is-warning-focus"
placeholder="Warning"
/>
</VControl>
</VField>
<VField>
<VControl>
<VInput
type="text"
class="is-danger-focus"
placeholder="Danger"
/>
</VControl>
</VField>
<!--/example-->

37
documentation/elements/forms/inputs/input-help-documentation.md Normal file
View File

@@ -0,0 +1,37 @@
### Help Text
You can easily add a help text to guide users when they
interact with your forms. Use the `help` prop of the `<VField />`
component to inject your help text string. See the code example
for more details about usage.
<!--code-->
```vue
<template>
<VField>
<VControl>
<VInput type="text" placeholder="Username" />
<p class="help">
Choose a nice username
</p>
</VControl>
</VField>
</template>
```
<!--/code-->
<!--example-->
<VField>
<VControl>
<VInput
type="text"
placeholder="Username"
/>
<p class="help">Choose a nice username</p>
</VControl>
</VField>
<!--/example-->

32
documentation/elements/forms/inputs/input-line-documentation.md Normal file
View File

@@ -0,0 +1,32 @@
### Line Icons
Vuero `VInput` are fully compatible with Line Icons.
Use the `icon` or `iconify` props on the `<VControl />`
component to show an icon.
<!--code-->
```vue
<template>
<VField>
<VControl icon="lnil lnil-briefcase">
<VInput type="text" placeholder="Company" />
</VControl>
</VField>
</template>
```
<!--/code-->
<!--example-->
<VField>
<VControl icon="lnil lnil-briefcase">
<VInput
type="text"
placeholder="Company"
/>
</VControl>
</VField>
<!--/example-->

31
documentation/elements/forms/inputs/input-loading-documentation.md Normal file
View File

@@ -0,0 +1,31 @@
### Input Loading
An `VInput` can be shown in a loading state. To apply that style,
simply add the `loading` prop to the wrapping `<VControl />` component.
<!--code-->
```vue
<template>
<VField>
<VControl loading>
<VInput type="text" placeholder="Username" />
</VControl>
</VField>
</template>
```
<!--/code-->
<!--example-->
<VField>
<VControl loading>
<VInput
type="text"
placeholder="Username"
/>
</VControl>
</VField>
<!--/example-->

36
documentation/elements/forms/inputs/input-rounded-documentation.md Normal file
View File

@@ -0,0 +1,36 @@
### Rounded input
You can easily change the shape of the `VInput` inside the field.
Simply add the `is-rounded` class to the Html `input` element.
<!--code-->
```vue
<template>
<VField>
<VControl>
<VInput
type="text"
class="is-rounded"
placeholder="Username"
/>
</VControl>
</VField>
</template>
```
<!--/code-->
<!--example-->
<VField>
<VControl>
<VInput
type="text"
class="is-rounded"
placeholder="Username"
/>
</VControl>
</VField>
<!--/example-->

43
documentation/elements/forms/range-rating/range-rating-basic-documentation.md Normal file
View File

@@ -0,0 +1,43 @@
---
state:
input: 2
---
### VRangeRating
Vuero provides number rating component with minimum styling.
`VRangeRating` act like a radio button group, with a custom style, this means
that you can use keyboard navigation to select the rating.
Always wrap your inputs inside a `<VField />` and a `<VControl />`
to build forms quickly and efficiently.
<!--code-->
```vue
<script setup lang="ts">
const input = ref(2)
</script>
<template>
<VField>
<VControl>
<VRangeRating v-model="input" />
</VControl>
</VField>
</template>
```
<!--/code-->
<!--example-->
<VField>
<VControl>
<VRangeRating
v-model="frontmatter.state.input"
/>
</VControl>
</VField>
<!--/example-->

167
documentation/elements/forms/range-rating/range-rating-custom-icon-documentation.md Normal file
View File

@@ -0,0 +1,167 @@
---
state:
hears: 2
water: 3
electric: 1
kitty: 4
---
### Custom Icon
You can use default slot to customize the icon.
<!--code-->
```vue
<script setup lang="ts">
const hears = ref(2)
const water = ref(3)
const electric = ref(1)
const kitty = ref(4)
</script>
<template>
<div
class="is-flex is-justify-content-space-between is-flex-wrap-wrap"
:style="{ gap: '2rem' }"
>
<VField>
<VControl>
<VRangeRating v-slot="{ isSelected }" v-model="hears">
<VIcon
v-if="isSelected"
icon="ic:baseline-favorite"
class="is-size-3 mr-1 has-text-warning"
:class="{
'has-text-danger': isSelected,
}"
/>
<VIcon
v-else
icon="ic:baseline-favorite-border"
class="is-size-3 mr-1"
/>
</VRangeRating>
</VControl>
</VField>
<VField>
<VControl>
<VRangeRating v-slot="{ isSelected }" v-model="water">
<VIcon
icon="ic:twotone-water-drop"
class="is-size-3 mr-1"
:class="{
'has-text-info': isSelected,
}"
/>
</VRangeRating>
</VControl>
</VField>
<VField>
<VControl>
<VRangeRating v-slot="{ isSelected }" v-model="electric">
<VIcon
:icon="isSelected ? 'material-symbols:bolt' : 'material-symbols:bolt-outline'"
class="is-size-3 mr-1"
:class="{
'has-text-warning': isSelected,
}"
/>
</VRangeRating>
</VControl>
</VField>
<VField>
<VControl>
<VRangeRating v-slot="{ isSelected }" v-model="kitty">
<VIcon
:icon="
isSelected
? 'streamline-emojis:smiling-cat-face-with-heart-eyes'
: 'streamline-emojis:cat-face'
"
class="is-size-3 mr-1"
:style="{
filter: isSelected ? undefined : 'grayscale(1)',
opacity: isSelected ? undefined : 0.5,
}"
/>
</VRangeRating>
</VControl>
</VField>
</div>
</template>
```
<!--/code-->
<!--example-->
<div>
<div
class="is-flex is-justify-content-space-between is-flex-wrap-wrap"
:style="{ gap: '2rem' }"
>
<VField>
<VControl>
<VRangeRating v-slot="{ isSelected }" v-model="frontmatter.state.hears">
<VIcon
v-if="isSelected"
icon="ic:baseline-favorite"
class="is-size-3 mr-1 has-text-warning"
:class="{
'has-text-danger': isSelected,
}"
/>
<VIcon v-else icon="ic:baseline-favorite-border" class="is-size-3 mr-1" />
</VRangeRating>
</VControl>
</VField>
<VField>
<VControl>
<VRangeRating v-slot="{ isSelected }" v-model="frontmatter.state.water">
<VIcon
icon="ic:twotone-water-drop"
class="is-size-3 mr-1"
:class="{
'has-text-info': isSelected,
}"
/>
</VRangeRating>
</VControl>
</VField>
<VField>
<VControl>
<VRangeRating v-slot="{ isSelected }" v-model="frontmatter.state.electric">
<VIcon
:icon="isSelected ? 'material-symbols:bolt' : 'material-symbols:bolt-outline'"
class="is-size-3 mr-1"
:class="{
'has-text-warning': isSelected,
}"
/>
</VRangeRating>
</VControl>
</VField>
<VField>
<VControl>
<VRangeRating v-slot="{ isSelected }" v-model="frontmatter.state.kitty">
<VIcon
:icon="
isSelected
? 'streamline-emojis:smiling-cat-face-with-heart-eyes'
: 'streamline-emojis:cat-face'
"
class="is-size-3 mr-1"
:style="{
filter: isSelected ? undefined : 'grayscale(1)',
opacity: isSelected ? undefined : 0.5,
}"
/>
</VRangeRating>
</VControl>
</VField>
</div>
</div>
<!--/example-->

41
documentation/elements/forms/range-rating/range-rating-label-documentation.md Normal file
View File

@@ -0,0 +1,41 @@
---
state:
input: 7
---
### Accessible label
To add a label to the rating component, use the `label` prop. You can also
use the `label` slot to customize the label.
<!--code-->
```vue
<script setup lang="ts">
const input = ref(2)
</script>
<template>
<VField>
<VControl>
<VRangeRating v-model="input" label="Rating" />
</VControl>
</VField>
</template>
```
<!--/code-->
<!--example-->
<VField>
<VControl>
<VRangeRating
v-model="frontmatter.state.input"
label="Rating"
/>
</VControl>
</VField>
<!--/example-->

41
documentation/elements/forms/range-rating/range-rating-max-documentation.md Normal file
View File

@@ -0,0 +1,41 @@
---
state:
input: 7
---
### Change max values
You can change the max value of the rating component by using the `max` prop
which defaults to `5`.
<!--code-->
```vue
<script setup lang="ts">
const input = ref(2)
</script>
<template>
<VField>
<VControl>
<VRangeRating v-model="input" :max="10" />
</VControl>
</VField>
</template>
```
<!--/code-->
<!--example-->
<VField>
<VControl>
<VRangeRating
v-model="frontmatter.state.input"
:max="10"
/>
</VControl>
</VField>
<!--/example-->

70
documentation/elements/forms/range-rating/range-rating-readonly-documentation.md Normal file
View File

@@ -0,0 +1,70 @@
---
state:
input: 2
---
### Readonly and disabled
To make the rating component readonly or disabled, use the `readonly` and `disabled` props.
The `readonly` prop will make the rating component readonly by disabling
the user interaction, while the `disabled` prop will make the rating component
disabled by disabling value changes.
<!--code-->
```vue
<script setup lang="ts">
const input = ref(2)
</script>
<template>
<div
class="is-flex is-justify-content-space-between is-flex-wrap-wrap"
:style="{ gap: '2rem' }"
>
<VField>
<VControl>
<VRangeRating
v-model="input"
label="Readonly"
readonly
/>
</VControl>
</VField>
<VField>
<VControl>
<VRangeRating
v-model="input"
label="Disabled"
disabled
/>
</VControl>
</VField>
</div>
</template>
```
<!--/code-->
<!--example-->
<div>
<div
class="is-flex is-flex-wrap-wrap"
:style="{ gap: '2rem' }"
>
<VField>
<VControl>
<VRangeRating v-model="frontmatter.state.input" label="Readonly" readonly />
</VControl>
</VField>
<VField>
<VControl>
<VRangeRating v-model="frontmatter.state.input" label="Disabled" disabled />
</VControl>
</VField>
</div>
</div>
<!--/example-->

103
documentation/elements/forms/range-rating/range-rating-sizes-documentation.md Normal file
View File

@@ -0,0 +1,103 @@
---
state:
input: 3
---
### Adjusting the size
You can adjust the size of the rating component by using the `size` prop which
<!--code-->
```vue
<script setup lang="ts">
const input = ref(2)
</script>
<template>
<div
class="is-flex is-justify-content-space-between is-flex-wrap-wrap"
:style="{ gap: '2rem' }"
>
<VField>
<VControl>
<VRangeRating
v-model="input"
label="Small"
size="small"
/>
</VControl>
</VField>
<VField>
<VControl>
<VRangeRating v-model="input" label="Default" />
</VControl>
</VField>
<VField>
<VControl>
<VRangeRating
v-model="input"
label="Medium"
size="medium"
/>
</VControl>
</VField>
<VField>
<VControl>
<VRangeRating
v-model="input"
label="Large"
size="large"
/>
</VControl>
</VField>
<VField>
<VControl>
<VRangeRating
v-model="input"
label="XLarge"
size="xlarge"
/>
</VControl>
</VField>
</div>
</template>
```
<!--/code-->
<!--example-->
<div
class="is-flex is-flex-wrap-wrap"
:style="{ gap: '2rem' }"
>
<VField>
<VControl>
<VRangeRating v-model="frontmatter.state.input" label="Small" size="small" />
</VControl>
</VField>
<VField>
<VControl>
<VRangeRating v-model="frontmatter.state.input" label="Default" />
</VControl>
</VField>
<VField>
<VControl>
<VRangeRating v-model="frontmatter.state.input" label="Medium" size="medium" />
</VControl>
</VField>
<VField>
<VControl>
<VRangeRating v-model="frontmatter.state.input" label="Large" size="large" />
</VControl>
</VField>
<VField>
<VControl>
<VRangeRating v-model="frontmatter.state.input" label="XLarge" size="xlarge" />
</VControl>
</VField>
</div>
<!--/example-->

70
documentation/elements/forms/select/select-base-documentation.md Normal file
View File

@@ -0,0 +1,70 @@
---
state:
input: ''
---
### VSelect
Vuero provides elegant form controls with minimum styling.
`VSelect` accept all attributes that `<select>` accepts.
Always wrap your inputs inside a `<VField />` and a `<VControl />`
to build forms quickly and efficiently.
<!--code-->
```vue
<script setup lang="ts">
const input = ref('')
</script>
<template>
<VField>
<VControl>
<VSelect v-model="input">
<VOption value="">
Select a Hero
</VOption>
<VOption value="Superman">
Superman
</VOption>
<VOption value="Batman">
Batman
</VOption>
<VOption value="Spiderman">
Spiderman
</VOption>
<VOption value="Deadpool">
Deadpool
</VOption>
<VOption value="Spawn">
Spawn
</VOption>
<VOption value="Galactus">
Galactus
</VOption>
</VSelect>
</VControl>
</VField>
</template>
```
<!--/code-->
<!--example-->
<VField>
<VControl>
<VSelect v-model="frontmatter.state.input">
<VOption value="">Select a Hero</VOption>
<VOption value="Superman">Superman</VOption>
<VOption value="Batman">Batman</VOption>
<VOption value="Spiderman">Spiderman</VOption>
<VOption value="Deadpool">Deadpool</VOption>
<VOption value="Spawn">Spawn</VOption>
<VOption value="Galactus">Galactus</VOption>
</VSelect>
</VControl>
</VField>
<!--/example-->

70
documentation/elements/forms/select/select-fa-documentation.md Normal file
View File

@@ -0,0 +1,70 @@
---
state:
input: ''
---
### Font Awesome
Vuero `VSelect` can have icons attached to them.
They work pretty well with Font Awesome icons. You can add an
icon element inside the select. Please refer to the code example
for more details about usage.
<!--code-->
```vue
<script setup lang="ts">
const input = ref('')
</script>
<template>
<VField>
<VControl class="has-icons-left" icon="fas fa-globe">
<VSelect v-model="input">
<VOption value="">
Select a Hero
</VOption>
<VOption value="Superman">
Superman
</VOption>
<VOption value="Batman">
Batman
</VOption>
<VOption value="Spiderman">
Spiderman
</VOption>
<VOption value="Deadpool">
Deadpool
</VOption>
<VOption value="Spawn">
Spawn
</VOption>
<VOption value="Galactus">
Galactus
</VOption>
</VSelect>
</VControl>
</VField>
</template>
```
<!--/code-->
<!--example-->
<VField>
<VControl class="has-icons-left" icon="fas fa-globe">
<VSelect v-model="frontmatter.state.input">
<VOption value="">Select a Hero</VOption>
<VOption value="Superman">Superman</VOption>
<VOption value="Batman">Batman</VOption>
<VOption value="Spiderman">Spiderman</VOption>
<VOption value="Deadpool">Deadpool</VOption>
<VOption value="Spawn">Spawn</VOption>
<VOption value="Galactus">Galactus</VOption>
</VSelect>
</VControl>
</VField>
<!--/example-->

69
documentation/elements/forms/select/select-feather-documentation.md Normal file
View File

@@ -0,0 +1,69 @@
---
state:
input: ''
---
### Lucide Icons
Vuero `VSelect` can have icons attached to them. They work pretty well with
Lucide Icons. You can add an icon element inside the select.
Please refer to the code example for more details about usage.
<!--code-->
```vue
<script setup lang="ts">
const input = ref('')
</script>
<template>
<VField>
<VControl class="has-icons-left" icon="lucide:globe">
<VSelect v-model="input">
<VOption value="">
Select a Hero
</VOption>
<VOption value="Superman">
Superman
</VOption>
<VOption value="Batman">
Batman
</VOption>
<VOption value="Spiderman">
Spiderman
</VOption>
<VOption value="Deadpool">
Deadpool
</VOption>
<VOption value="Spawn">
Spawn
</VOption>
<VOption value="Galactus">
Galactus
</VOption>
</VSelect>
</VControl>
</VField>
</template>
```
<!--/code-->
<!--example-->
<VField>
<VControl class="has-icons-left" icon="lucide:globe">
<VSelect v-model="frontmatter.state.input">
<VOption value="">Select a Hero</VOption>
<VOption value="Superman">Superman</VOption>
<VOption value="Batman">Batman</VOption>
<VOption value="Spiderman">Spiderman</VOption>
<VOption value="Deadpool">Deadpool</VOption>
<VOption value="Spawn">Spawn</VOption>
<VOption value="Galactus">Galactus</VOption>
</VSelect>
</VControl>
</VField>
<!--/example-->

69
documentation/elements/forms/select/select-line-documentation.md Normal file
View File

@@ -0,0 +1,69 @@
---
state:
input: ''
---
### Line Icons
Vuero `VSelect` can have icons attached to them. They work pretty well with
Line Icons. You can add an icon element inside the select.
Please refer to the code example for more details about usage.
<!--code-->
```vue
<script setup lang="ts">
const input = ref('')
</script>
<template>
<VField>
<VControl class="has-icons-left" icon="lnil lnil-basketball">
<VSelect v-model="input">
<VOption value="">
Select a Hero
</VOption>
<VOption value="Superman">
Superman
</VOption>
<VOption value="Batman">
Batman
</VOption>
<VOption value="Spiderman">
Spiderman
</VOption>
<VOption value="Deadpool">
Deadpool
</VOption>
<VOption value="Spawn">
Spawn
</VOption>
<VOption value="Galactus">
Galactus
</VOption>
</VSelect>
</VControl>
</VField>
</template>
```
<!--/code-->
<!--example-->
<VField>
<VControl class="has-icons-left" icon="lnil lnil-basketball">
<VSelect v-model="frontmatter.state.input">
<VOption value="">Select a Hero</VOption>
<VOption value="Superman">Superman</VOption>
<VOption value="Batman">Batman</VOption>
<VOption value="Spiderman">Spiderman</VOption>
<VOption value="Deadpool">Deadpool</VOption>
<VOption value="Spawn">Spawn</VOption>
<VOption value="Galactus">Galactus</VOption>
</VSelect>
</VControl>
</VField>
<!--/example-->

74
documentation/elements/forms/select/select-loading-documentation.md Normal file
View File

@@ -0,0 +1,74 @@
---
state:
input: 'Batman'
---
### Loading and Disabled select
vuero `VSelect` can be shown in a loading state. To apply that style,
simply add the `loading` property to the `VControl` wrapping element.
The `disabled` property should be set on `VSelect`, like the default behavior.
Please refer to the code example for more details about usage.
<!--code-->
```vue
<script setup lang="ts">
const input = ref('')
</script>
<template>
<VField>
<VControl
loading
class="has-icons-left"
icon="lnil lnil-basketball"
>
<VSelect v-model="input" disabled>
<VOption value="">
Select a Hero
</VOption>
<VOption value="Superman">
Superman
</VOption>
<VOption value="Batman">
Batman
</VOption>
<VOption value="Spiderman">
Spiderman
</VOption>
<VOption value="Deadpool">
Deadpool
</VOption>
<VOption value="Spawn">
Spawn
</VOption>
<VOption value="Galactus">
Galactus
</VOption>
</VSelect>
</VControl>
</VField>
</template>
```
<!--/code-->
<!--example-->
<VField>
<VControl loading class="has-icons-left" icon="lnil lnil-basketball">
<VSelect v-model="frontmatter.state.input" disabled>
<VOption value="">Select a Hero</VOption>
<VOption value="Superman">Superman</VOption>
<VOption value="Batman">Batman</VOption>
<VOption value="Spiderman">Spiderman</VOption>
<VOption value="Deadpool">Deadpool</VOption>
<VOption value="Spawn">Spawn</VOption>
<VOption value="Galactus">Galactus</VOption>
</VSelect>
</VControl>
</VField>
<!--/example-->

Some files were not shown because too many files have changed in this diff Show More