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

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