svcm/oa
1
0
Fork 0
mirror of https://git.hmsn.ink/kospo/svcm/oa.git synced 2026-03-20 06:33:32 +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

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-->

93
documentation/elements/forms/select/select-multiple-documentation.md Normal file
View File

@@ -0,0 +1,93 @@
---
state:
input: []
---
### Multiple selection
The Vuero `VSelect` can have `multiple` attribute.
Please refer to the code example for more details about usage.
<!--code-->
```vue
<script setup lang="ts">
const input = ref<string[]>([])
</script>
<template>
<VField>
<VControl>
<VSelect
v-model="input"
multiple
size="8"
>
<VOptgroup label="Marvel">
<VOption value="Spider-Man">
Spider-Man
</VOption>
<VOption value="Professor X" disabled>
Professor X
</VOption>
<VOption value="Deadpool">
Deadpool
</VOption>
</VOptgroup>
<VOptgroup label="DC">
<VOption value="Batman">
Batman
</VOption>
<VOption value="Superman">
Superman
</VOption>
<VOption value="Green Lantern">
Green Lantern
</VOption>
</VOptgroup>
<VOptgroup label="Looney Tunes" disabled>
<VOption value="Bugs Bunny">
Bugs Bunny
</VOption>
<VOption value="Daffy Duck">
Daffy Duck
</VOption>
<VOption value="Marvin the Martian">
Marvin the Martian
</VOption>
</VOptgroup>
</VSelect>
</VControl>
</VField>
</template>
```
<!--/code-->
<!--example-->
<VField>
<VControl>
<VSelect v-model="frontmatter.state.input" multiple size="8">
<VOptgroup label="Marvel">
<VOption value="Spider-Man">Spider-Man</VOption>
<VOption value="Professor X" disabled>Professor X</VOption>
<VOption value="Deadpool">Deadpool</VOption>
</VOptgroup>
<VOptgroup label="DC">
<VOption value="Batman">Batman</VOption>
<VOption value="Superman">Superman</VOption>
<VOption value="Green Lantern">Green Lantern</VOption>
</VOptgroup>
<VOptgroup label="Looney Tunes" disabled>
<VOption value="Bugs Bunny">Bugs Bunny</VOption>
<VOption value="Daffy Duck">Daffy Duck</VOption>
<VOption value="Marvin the Martian">Marvin the Martian</VOption>
</VOptgroup>
</VSelect>
<p class="help">Hold down the <kbd>Ctrl</kbd> (windows) / <kbd>Command</kbd> (Mac) button to select multiple options.</p>
</VControl>
</VField>
<!--/example-->

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

@@ -0,0 +1,69 @@
---
state:
input: ''
---
### Select rounded
The Vuero `VSelect` can have rounded edges. Like other controls,
simply add the is-rounded class to the select wrapper element.
Please refer to the code example for more details about usage.
<!--code-->
```vue
<script setup lang="ts">
const input = ref('')
</script>
<template>
<VField>
<VControl>
<VSelect v-model="input" class="is-rounded">
<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" class="is-rounded">
<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-->

79
documentation/elements/forms/textarea/textarea-addon-documentation.md Normal file
View File

@@ -0,0 +1,79 @@
---
state:
textarea: ''
---
### VTextarea addon
`VTextarea` that are wrapped by a control and a field can have a single
bottom addon. You can use it to display a toolbar or any type of user actions.
Use the `textaddon` prop on the `<VField />` and the second `<VControl />`
component. Please refer to the code example for more details about usage.
<!--code-->
```vue
<script setup lang="ts">
const textarea = ref('')
</script>
<template>
<VField textaddon>
<VControl>
<VTextarea
v-model="textarea"
rows="4"
placeholder="A longer message..."
/>
</VControl>
<VControl textaddon>
<div class="start">
<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" />
</div>
</div>
<div class="end">
<VButton color="primary" raised>
Post Comment
</VButton>
</div>
</VControl>
</VField>
</template>
```
<!--/code-->
<!--example-->
<VField textaddon>
<VControl>
<VTextarea
v-model="frontmatter.state.textarea"
rows="4"
placeholder="A longer message..."
></VTextarea>
</VControl>
<VControl textaddon>
<div class="start">
<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" />
</div>
</div>
<div class="end">
<VButton color="primary" raised>Post Comment</VButton>
</div>
</VControl>
</VField>
<!--/example-->

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

@@ -0,0 +1,49 @@
---
state:
textarea: ''
---
### VTextarea
Vuero provides elegant form controls with minimum styling.
`VTextarea` accept all attributes that `<textarea>` accepts.
You can control the box text length with the `rows="*"` attribute.
Always wrap your inputs inside a `<VField />` and a `<VControl />`
to build forms quickly and efficiently.
<!--code-->
```vue
<script setup lang="ts">
const textarea = ref('')
</script>
<template>
<VField>
<VControl>
<VTextarea
v-model="textarea"
rows="4"
placeholder="A longer message..."
/>
</VControl>
</VField>
</template>
```
<!--/code-->
<!--example-->
<VField>
<VControl>
<VTextarea
rows="4"
placeholder="A longer message..."
v-model="frontmatter.state.textarea"
></VTextarea>
</VControl>
</VField>
<!--/example-->

51
documentation/elements/forms/textarea/textarea-disabled-documentation.md Normal file
View File

@@ -0,0 +1,51 @@
---
state:
textarea: ''
disabled: true
---
### Disabled
A `VTextarea` can be shown in a disabled state. For that, you need to wrap it
inside a `<VControl />` component. Simply add the `disabled` attribute
to the target textarea element.
<!--code-->
```vue
<script setup lang="ts">
const textarea = ref('')
const disabled = ref(true)
</script>
<template>
<VField>
<VControl>
<VTextarea
v-model="textarea"
rows="4"
placeholder="A longer message..."
:disabled="disabled"
/>
</VControl>
</VField>
</template>
```
<!--/code-->
<!--example-->
<VField>
<VControl>
<VTextarea
v-model="frontmatter.state.textarea"
rows="4"
placeholder="A longer message..."
:disabled="frontmatter.state.disabled"
></VTextarea>
</VControl>
</VField>
<!--/example-->

141
documentation/elements/forms/textarea/textarea-focus-documentation.md Normal file
View File

@@ -0,0 +1,141 @@
---
state:
textarea: ''
---
### Focus Colors
Like other form controls, `VTextarea` 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
<script setup lang="ts">
const textarea = ref('')
</script>
<template>
<!-- is-primary-focus -->
<VField>
<VControl>
<VTextarea
v-model="textarea"
class="is-primary-focus"
rows="2"
placeholder="Primary..."
/>
</VControl>
</VField>
<!-- is-success-focus -->
<VField>
<VControl>
<VTextarea
v-model="textarea"
class="is-success-focus"
rows="2"
placeholder="Success..."
/>
</VControl>
</VField>
<!-- is-info-focus -->
<VField>
<VControl>
<VTextarea
v-model="textarea"
class="textarea is-info-focus"
rows="2"
placeholder="Info..."
/>
</VControl>
</VField>
<!-- is-warning-focus -->
<VField>
<VControl>
<VTextarea
v-model="textarea"
class="textarea is-warning-focus"
rows="2"
placeholder="Warning..."
/>
</VControl>
</VField>
<!-- is-danger-focus -->
<VField>
<VControl>
<VTextarea
v-model="textarea"
class="textarea is-danger-focus"
rows="2"
placeholder="Danger..."
/>
</VControl>
</VField>
</template>
```
<!--/code-->
<!--example-->
<div>
<VField>
<VControl>
<VTextarea
v-model="frontmatter.state.textarea"
class="textarea is-primary-focus"
rows="2"
placeholder="Primary..."
></VTextarea>
</VControl>
</VField>
<VField>
<VControl>
<VTextarea
v-model="frontmatter.state.textarea"
class="textarea is-success-focus"
rows="2"
placeholder="Success..."
></VTextarea>
</VControl>
</VField>
<VField>
<VControl>
<VTextarea
v-model="frontmatter.state.textarea"
class="textarea is-info-focus"
rows="2"
placeholder="Info..."
></VTextarea>
</VControl>
</VField>
<VField>
<VControl>
<VTextarea
v-model="frontmatter.state.textarea"
class="textarea is-warning-focus"
rows="2"
placeholder="Warning..."
></VTextarea>
</VControl>
</VField>
<VField>
<VControl>
<VTextarea
v-model="frontmatter.state.textarea"
class="textarea is-danger-focus"
rows="2"
placeholder="Danger..."
></VTextarea>
</VControl>
</VField>
</div>
<!--/example-->

43
documentation/elements/forms/textarea/textarea-loading-documentation.md Normal file
View File

@@ -0,0 +1,43 @@
### Loading
A `VTextarea` can be shown in a loading state. For that, you need to wrap
it inside a control element. Then, simply add the `loading` prop to the
wrapping `<VControl />` component.
Please refer to the code example for more details about usage.
<!--code-->
```vue
<script setup lang="ts">
const textarea = ref('')
const loading = ref(true)
</script>
<template>
<VField>
<VControl :loading="loading">
<VTextarea
v-model="textarea"
rows="4"
placeholder="A longer message..."
/>
</VControl>
</VField>
</template>
```
<!--/code-->
<!--example-->
<VField>
<VControl loading>
<VTextarea
rows="4"
placeholder="A longer message..."
></VTextarea>
</VControl>
</VField>
<!--/example-->

9
documentation/elements/helpers-documentation.md Normal file
View File

@@ -0,0 +1,9 @@
---
disable_code: true
disable_example: true
---
### Helpers
Vuero provides some CSS helpers that can help you adding some styles without
writing any CSS. Helpers have been keep short to avoid bloat and unused CSS.

20
documentation/elements/icons/icons-fa-documentation.md Normal file
View File

@@ -0,0 +1,20 @@
### Font Awesome 5
Vuero is bundled with the `Font Awesome 5` free version.
Everyone likes Font Awesome icons and they are widely used
accross a large variety of websites.
Please refer to the code example for more details about usage.
**Usage:**
`<VIcon name="fas icon-name" />`
<!--code-->
```vue
<template>
<!--Font Awesome 5 usage -->
<i class="fas fa-user" />
</template>
```
<!--/code-->

19
documentation/elements/icons/icons-iconify-documentation.md Normal file
View File

@@ -0,0 +1,19 @@
### Iconify
Vuero is bundled with the `Iconify` icon svg library and mostly use
lucide icon set. You can use **over 40,000 icons** from popular fonts
and emoji sets. You can browse all the available [icons here](https://icones.js.org/).
Please refer to the code example for more details about usage.
**Usage:**
`<VIcon name="provider-name:icon-name" />`
<!--code-->
```vue
<template>
<!--Feather icon usage -->
<VIcon icon="lucide:activity" />
</template>
```
<!--/code-->

19
documentation/elements/icons/icons-line-light-documentation.md Normal file
View File

@@ -0,0 +1,19 @@
### Line Icons
Vuero is bundled with the `Line Icons` premium icon set.
This set offers 1000 high quality premium handcrafted icons.
Please refer to the code example for more details about usage.
**Usage:**
`<VIcon name="lnil icon-name" />`
<!--code-->
```vue
<template>
<!--Line Icons usage -->
<i class="lnil lnil-air-flow" />
</template>
```
<!--/code-->

18
documentation/elements/icons/icons-line-regular-documentation.md Normal file
View File

@@ -0,0 +1,18 @@
### Line Icons
Vuero is bundled with the `Line Icons` premium icon set.
This set offers 1000 high quality premium handcrafted icons.
Please refer to the code example for more details about usage.
**Usage:**
`<VIcon name="lnir icon-name" />`
<!--code-->
```vue
<template>
<!--Line Icons usage -->
<i class="lnir lnir-air-flow" />
</template>
```
<!--/code-->

90
documentation/elements/table/table-base-documentation.md Normal file
View File

@@ -0,0 +1,90 @@
---
disable_example: true
---
### Basic Table
Vuero provides a basic Html5 table powered by Bulma.
You simply have to add the `.table` class to a html5 table element.
You can also add the `.is-hoverable` class to highlight the rows on hover.
<!--code-->
```vue
<template>
<table class="table is-hoverable is-fullwidth">
<thead>
<tr>
<th scope="col">
First Name
</th>
<th scope="col">
Last Name
</th>
<th scope="col">
Position
</th>
<th scope="col" class="is-end">
<div class="dark-inverted is-flex is-justify-content-flex-end">
Actions
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tina</td>
<td>Bergmann</td>
<td>Head of Sales</td>
<td class="is-end">
<div class="is-flex is-justify-content-flex-end">
<FlexTableDropdown />
</div>
</td>
</tr>
<tr>
<td>John</td>
<td>Wistmus</td>
<td>Senior Executive</td>
<td class="is-end">
<div class="is-flex is-justify-content-flex-end">
<FlexTableDropdown />
</div>
</td>
</tr>
<tr>
<td>Sam</td>
<td>Watson</td>
<td>Software Engineer</td>
<td class="is-end">
<div class="is-flex is-justify-content-flex-end">
<FlexTableDropdown />
</div>
</td>
</tr>
<tr>
<td>Jolaine</td>
<td>Joestar</td>
<td>HR Manager</td>
<td class="is-end">
<div class="is-flex is-justify-content-flex-end">
<FlexTableDropdown />
</div>
</td>
</tr>
<tr>
<td>Anders</td>
<td>Jensen</td>
<td>Accountant</td>
<td class="is-end">
<div class="is-flex is-justify-content-flex-end">
<FlexTableDropdown />
</div>
</td>
</tr>
</tbody>
</table>
</template>
```
<!--/code-->

106
documentation/elements/table/table-media-documentation.md Normal file
View File

@@ -0,0 +1,106 @@
---
disable_example: true
---
### Media Table
Vuero provides a basic Html5 table powered by Bulma.
You sinply have to add the table class to a html5 table element.
You can easily add media elements like the vuero avatars inside your table rows.
<!--code-->
```vue
<template>
<table class="table is-hoverable is-fullwidth">
<thead>
<tr>
<th scope="col" class="is-media" />
<th scope="col">
First Name
</th>
<th scope="col">
Last Name
</th>
<th scope="col">
Position
</th>
<th scope="col" class="is-end">
<div class="dark-inverted is-flex is-justify-content-flex-end">
Actions
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td class="is-media">
<VAvatar picture="https://media.cssninja.io/content/avatars/8.gif" />
</td>
<td>Tina</td>
<td>Bergmann</td>
<td>Head of Sales</td>
<td class="is-end">
<div class="is-flex is-justify-content-flex-end">
<FlexTableDropdown />
</div>
</td>
</tr>
<tr>
<td class="is-media">
<VAvatar picture="https://media.cssninja.io/content/avatars/1.gif" />
</td>
<td>John</td>
<td>Wistmus</td>
<td>Senior Executive</td>
<td class="is-end">
<div class="is-flex is-justify-content-flex-end">
<FlexTableDropdown />
</div>
</td>
</tr>
<tr>
<td class="is-media">
<VAvatar picture="https://media.cssninja.io/content/avatars/4.gif" />
</td>
<td>Sam</td>
<td>Watson</td>
<td>Software Engineer</td>
<td class="is-end">
<div class="is-flex is-justify-content-flex-end">
<FlexTableDropdown />
</div>
</td>
</tr>
<tr>
<td class="is-media">
<VAvatar initials="JD" color="info" />
</td>
<td>Jolaine</td>
<td>Joestar</td>
<td>HR Manager</td>
<td class="is-end">
<div class="is-flex is-justify-content-flex-end">
<FlexTableDropdown />
</div>
</td>
</tr>
<tr>
<td class="is-media">
<VAvatar picture="https://media.cssninja.io/content/avatars/3.gif" />
</td>
<td>Anders</td>
<td>Jensen</td>
<td>Accountant</td>
<td class="is-end">
<div class="is-flex is-justify-content-flex-end">
<FlexTableDropdown />
</div>
</td>
</tr>
</tbody>
</table>
</template>
```
<!--/code-->

90
documentation/elements/table/table-striped-documentation.md Normal file
View File

@@ -0,0 +1,90 @@
---
disable_example: true
---
### Striped Table
Vuero provides a basic Html5 table powered by Bulma.
You sinply have to add the table class to a html5 table element.
You can also add the is-striped to apply striped styles to the table rows.
<!--code-->
```vue
<template>
<table class="table is-striped is-fullwidth">
<thead>
<tr>
<th scope="col">
First Name
</th>
<th scope="col">
Last Name
</th>
<th scope="col">
Position
</th>
<th scope="col" class="is-end">
<div class="dark-inverted is-flex is-justify-content-flex-end">
Actions
</div>
</th>
</tr>
</thead>
<tbody>
<tr>
<td>Tina</td>
<td>Bergmann</td>
<td>Head of Sales</td>
<td class="is-end">
<div class="is-flex is-justify-content-flex-end">
<FlexTableDropdown />
</div>
</td>
</tr>
<tr>
<td>John</td>
<td>Wistmus</td>
<td>Senior Executive</td>
<td class="is-end">
<div class="is-flex is-justify-content-flex-end">
<FlexTableDropdown />
</div>
</td>
</tr>
<tr>
<td>Sam</td>
<td>Watson</td>
<td>Software Engineer</td>
<td class="is-end">
<div class="is-flex is-justify-content-flex-end">
<FlexTableDropdown />
</div>
</td>
</tr>
<tr>
<td>Jolaine</td>
<td>Joestar</td>
<td>HR Manager</td>
<td class="is-end">
<div class="is-flex is-justify-content-flex-end">
<FlexTableDropdown />
</div>
</td>
</tr>
<tr>
<td>Anders</td>
<td>Jensen</td>
<td>Accountant</td>
<td class="is-end">
<div class="is-flex is-justify-content-flex-end">
<FlexTableDropdown />
</div>
</td>
</tr>
</tbody>
</table>
</template>
```
<!--/code-->