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

61
documentation/plugins/datepicker/datepicker-base-documentation.md Normal file
View File

@@ -0,0 +1,61 @@
---
state:
date: 2021-02-28
---
### Datepicker
Vuero ships with the `<VCalendar />` component, a multipurpose calendar /
datepicker component for your forms. Below is a basic example. Please check the
[plugin documentation](https://vcalendar.io/) for more details
about usage.
<!--code-->
```vue
<script setup lang="ts">
const date = ref(null)
</script>
<template>
<ClientOnly>
<VDatePicker
v-model="date"
color="green"
trim-weeks
>
<template #default="{ inputValue, inputEvents }">
<VField>
<VControl icon="lucide:calendar">
<input
class="input v-input"
type="text"
:value="inputValue"
v-on="inputEvents"
>
</VControl>
</VField>
</template>
</VDatePicker>
</ClientOnly>
</template>
```
<!--/code-->
<!--example-->
<ClientOnly>
<VDatePicker v-model="frontmatter.state.date" color="green" trim-weeks>
<template #default="{ inputValue, inputEvents }">
<VField>
<VControl icon="lucide:calendar">
<input class="input v-input" type="text" :value="inputValue" v-on="inputEvents" />
</VControl>
</VField>
</template>
</VDatePicker>
</ClientOnly>
<!--/example-->

80
documentation/plugins/datepicker/datepicker-range-documentation.md Normal file
View File

@@ -0,0 +1,80 @@
---
state:
range:
start: 2021-02-08
end: 2021-02-14
---
### DateRangepicker
`<VCalendar />` can be turned into a date range picker if needed. Check the
code example for more details about usage.
<!--code-->
```vue
<script setup lang="ts">
const range = reactive({
start: new Date(),
end: new Date(),
})
</script>
<template>
<ClientOnly>
<VDatePicker
v-model.range="range"
color="green"
trim-weeks
>
<template #default="{ inputValue, inputEvents }">
<VField addons>
<VControl>
<input
class="input v-input"
type="text"
:value="inputValue.start"
v-on="inputEvents.start"
>
</VControl>
<VControl>
<VButton static icon="lucide:arrow-right" />
</VControl>
<VControl subcontrol>
<input
class="input v-input"
type="text"
:value="inputValue.end"
v-on="inputEvents.end"
>
</VControl>
</VField>
</template>
</VDatePicker>
</ClientOnly>
</template>
```
<!--/code-->
<!--example-->
<ClientOnly>
<VDatePicker v-model.range="frontmatter.state.range" color="green" trim-weeks>
<template v-slot="{ inputValue, inputEvents }">
<VField addons>
<VControl expanded icon="lucide:corner-down-right">
<input class="input v-input" type="text" :value="inputValue.start" v-on="inputEvents.start" />
</VControl>
<VControl>
<VButton static>to</VButton>
</VControl>
<VControl expanded icon="lucide:corner-right-up" subcontrol>
<input class="input v-input" type="text" :value="inputValue.end" v-on="inputEvents.end" />
</VControl>
</VField>
</template>
</VDatePicker>
</ClientOnly>
<!--/example-->

55
documentation/plugins/datepicker/datepicker-time-documentation.md Normal file
View File

@@ -0,0 +1,55 @@
---
state:
date: 2021-02-28T16:20:00.000Z
---
### DateTimepicker
`<VCalendar />` can be turned into a date range picker if needed. Check the
code example for more details about usage.
<!--code-->
```vue
<script setup lang="ts">
const date = ref(new Date())
</script>
<template>
<ClientOnly>
<VDatePicker v-model="date" mode="dateTime">
<template #default="{ inputValue, inputEvents }">
<VField>
<VControl icon="lucide:calendar">
<input
class="input v-input"
type="text"
:value="inputValue"
v-on="inputEvents"
>
</VControl>
</VField>
</template>
</VDatePicker>
</ClientOnly>
</template>
```
<!--/code-->
<!--example-->
<ClientOnly>
<VDatePicker v-model="frontmatter.state.date" color="green" mode="dateTime">
<template #default="{ inputValue, inputEvents }">
<VField>
<VControl icon="lucide:calendar">
<input class="input v-input" type="text" :value="inputValue" v-on="inputEvents" />
</VControl>
</VField>
</template>
</VDatePicker>
</ClientOnly>
<!--/example-->

60
documentation/plugins/datepicker/datepicker-time-single-documentation.md Normal file
View File

@@ -0,0 +1,60 @@
---
state:
date: 2021-02-28T16:20:00.000Z
---
### Timepicker
`<VCalendar />` can be turned into a simple time picker if needed.
You can add the `is24hr` attribute to display hours in 24h format.
Check the code example for more details about usage.
<!--code-->
```vue
<script setup lang="ts">
const date = ref(null)
</script>
<template>
<ClientOnly>
<VDatePicker
v-model="date"
mode="dateTime"
is24hr
>
<template #default="{ inputValue, inputEvents }">
<VField>
<VControl icon="lucide:clock">
<input
class="input v-input"
type="text"
:value="inputValue"
v-on="inputEvents"
>
</VControl>
</VField>
</template>
</VDatePicker>
</ClientOnly>
</template>
```
<!--/code-->
<!--example-->
<ClientOnly>
<VDatePicker v-model="frontmatter.state.date" color="green" mode="time" is24hr>
<template #default="{ inputValue, inputEvents }">
<VField>
<VControl icon="lucide:clock">
<input class="input v-input" type="text" :value="inputValue" v-on="inputEvents" />
</VControl>
</VField>
</template>
</VDatePicker>
</ClientOnly>
<!--/example-->