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

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