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

44
documentation/plugins/slider/slider-base-documentation.md Normal file
View File

@@ -0,0 +1,44 @@
---
state:
value: 0
---
### Rounded tooltip
Vuero provides a customisable `<Slider />` component. You can check the plugin
documentation on [Github](https://github.com/vueform/slider). Use the
`has-rounded-tooltip`class on the `<VField />` component to show a rounded
tooltip.
<!--code-->
```vue
<script setup lang="ts">
const value = ref(0)
</script>
<template>
<VField v-slot="{ id }" class="has-rounded-tooltip">
<VControl>
<Slider :id="id" v-model="value" />
</VControl>
</VField>
</template>
```
<!--/code-->
<!--example-->
<div class="columns mt-2">
<div class="column is-6">
<VField v-slot="{ id }" class="pt-5 px-4 has-rounded-tooltip">
<VControl>
<Slider :id="id" v-model="frontmatter.state.value" />
</VControl>
</VField>
</div>
</div>
<!--/example-->

67
documentation/plugins/slider/slider-color-documentation.md Normal file
View File

@@ -0,0 +1,67 @@
---
state:
value1: 78
value2: 24
value3: 52
value4: 61
---
### Slider colors
The `<Slider />` component supports multiple colors. The default color is the
theme `$primary` color. Available color classes modifiers are: `is-slider-info`,
`is-slider-success`, `is-slider-warning`, `is-slider-danger`.
<!--code-->
```vue
<script setup lang="ts">
const value = ref(0)
</script>
<template>
<VField v-slot="{ id }" class="has-rounded-tooltip is-slider-info">
<VControl>
<Slider :id="id" v-model="value" />
</VControl>
</VField>
</template>
```
<!--/code-->
<!--example-->
<div class="columns is-multiline">
<div class="column is-6">
<VField v-slot="{ id }" class="pt-6 px-4 has-rounded-tooltip is-slider-info">
<VControl>
<Slider :id="id" v-model="frontmatter.state.value1" />
</VControl>
</VField>
</div>
<div class="column is-6">
<VField v-slot="{ id }" class="pt-6 px-4 has-rounded-tooltip is-slider-success">
<VControl>
<Slider :id="id" v-model="frontmatter.state.value2" />
</VControl>
</VField>
</div>
<div class="column is-6">
<VField v-slot="{ id }" class="pt-6 px-4 has-rounded-tooltip is-slider-warning">
<VControl>
<Slider :id="id" v-model="frontmatter.state.value3" />
</VControl>
</VField>
</div>
<div class="column is-6">
<VField v-slot="{ id }" class="pt-6 px-4 has-rounded-tooltip is-slider-danger">
<VControl>
<Slider :id="id" v-model="frontmatter.state.value4" />
</VControl>
</VField>
</div>
</div>
<!--/example-->

42
documentation/plugins/slider/slider-curved-documentation.md Normal file
View File

@@ -0,0 +1,42 @@
---
state:
value: 54
---
### Curved tooltip
Use the `has-curved-tooltip` class on the `<VField />` component to show a
curved shaped tooltip. Supports bigger values than the rounded tooltip.
<!--code-->
```vue
<script setup lang="ts">
const value = ref(0)
</script>
<template>
<VField v-slot="{ id }" class="has-curved-tooltip">
<VControl>
<Slider :id="id" v-model="value" />
</VControl>
</VField>
</template>
```
<!--/code-->
<!--example-->
<div class="columns mt-2">
<div class="column is-6">
<VField v-slot="{ id }" class="pt-5 px-4 has-curved-tooltip">
<VControl>
<Slider :id="id" v-model="frontmatter.state.value" />
</VControl>
</VField>
</div>
</div>
<!--/example-->

53
documentation/plugins/slider/slider-format-documentation.md Normal file
View File

@@ -0,0 +1,53 @@
---
state:
value: 54
---
### Tooltip format
The `<Slider />` component allows to pass a formatting function to its `format`
property. You can return the tooltip value with the format that you want.
<!--code-->
```vue
<script setup lang="ts">
const value = ref(54)
const format = (value) => {
return `${value}%`
}
</script>
<template>
<VField v-slot="{ id }" class="has-curved-tooltip">
<VControl>
<Slider
:id="id"
v-model="value"
:format="format"
/>
</VControl>
</VField>
</template>
```
<!--/code-->
<!--example-->
<div class="columns mt-2">
<div class="column is-6">
<VField v-slot="{ id }" class="pt-5 px-4 has-curved-tooltip">
<VControl>
<Slider
:id="id"
v-model="frontmatter.state.value"
:format="(value) => value + '%'"
/>
</VControl>
</VField>
</div>
</div>
<!--/example-->

56
documentation/plugins/slider/slider-merging-documentation.md Normal file
View File

@@ -0,0 +1,56 @@
---
state:
value:
- 20
- 50
- 70
merge: 10
---
### Tooltip merging
The `<Slider />` component can automatically merge multiple tooltips when they
reach a certain threshold. Specify a `merge` value and pass it to the
component's `:merge` prop.
<!--code-->
```vue
<script setup lang="ts">
const value = ref([20, 50, 70])
const merge = 10
</script>
<template>
<VField v-slot="{ id }">
<VControl>
<Slider
:id="id"
v-model="value"
:merge="merge"
/>
</VControl>
</VField>
</template>
```
<!--/code-->
<!--example-->
<div class="columns mt-2">
<div class="column is-6">
<VField v-slot="{ id }" class="pt-5 px-4 is-slider-info">
<VControl>
<Slider
:id="id"
v-model="frontmatter.state.value"
:merge="frontmatter.state.merge"
/>
</VControl>
</VField>
</div>
</div>
<!--/example-->

44
documentation/plugins/slider/slider-multiple-documentation.md Normal file
View File

@@ -0,0 +1,44 @@
---
state:
value:
- 16
- 62
---
### Multiple handles
The `<Slider />` component can render multiple tooltips when passing an `array`
to its `v-model` property.
<!--code-->
```vue
<script setup lang="ts">
const value = ref([16, 62])
</script>
<template>
<VField v-slot="{ id }" class="has-rounded-tooltip">
<VControl>
<Slider :id="id" v-model="value" />
</VControl>
</VField>
</template>
```
<!--/code-->
<!--example-->
<div class="columns mt-2">
<div class="column is-6">
<VField v-slot="{ id }" class="pt-5 px-4 has-rounded-tooltip">
<VControl>
<Slider :id="id" v-model="frontmatter.state.value" />
</VControl>
</VField>
</div>
</div>
<!--/example-->

42
documentation/plugins/slider/slider-squared-documentation.md Normal file
View File

@@ -0,0 +1,42 @@
---
state:
value: 36
---
### Squared tooltip
Use the `has-squared-tooltip` class on the `<VField />` component to show a
square shaped tooltip. Supports bigger values than the rounded tooltip.
<!--code-->
```vue
<script setup lang="ts">
const value = ref(0)
</script>
<template>
<VField v-slot="{ id }" class="has-squared-tooltip">
<VControl>
<Slider :id="id" v-model="value" />
</VControl>
</VField>
</template>
```
<!--/code-->
<!--example-->
<div class="columns mt-2">
<div class="column is-6">
<VField v-slot="{ id }" class="pt-5 px-4 has-squared-tooltip">
<VControl>
<Slider :id="id" v-model="frontmatter.state.value" />
</VControl>
</VField>
</div>
</div>
<!--/example-->