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

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