Skip to content

Commit b4c62b1

Browse files
committed
feat: add element plus
1 parent db545c5 commit b4c62b1

33 files changed

+647
-64
lines changed

README.md

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,8 @@ This monorepo includes the following packages:
1717
- core - a renderless Vue.js component to generate cron expressions.
1818
- light - a lightweight cron editor without external dependencies
1919
- vuetify - Vuetify component to edit cron expressions.
20-
- docs - Vue.js Cron documentation with [VuePress](https://vuepress.vuejs.org/)
20+
- element-plus - Element Plus component
21+
- docs - Vue.js Cron documentation powered by [VuePress](https://vuepress.vuejs.org/)
2122

2223
# Development
2324

core/src/components/renderless-select.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -118,7 +118,7 @@ export default {
118118
items: this.items,
119119
select: this.select,
120120
isSelected: this.isSelected,
121-
clearable: this.clearable,
121+
clearable: this.clearable && this.selectedItems.length > 0,
122122
clear: this.clear,
123123
cols: this.cols,
124124
rows: this.rows,

docs/package.json

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,7 @@
2323
"@vue-js-cron/core": "^3.0.0",
2424
"@vue-js-cron/light": "^2.0.0",
2525
"@vue-js-cron/vuetify": "^3.0.0",
26+
"@vue-js-cron/element-plus": "^1.0.0",
2627
"vuetify": "^3.0.0-beta.7"
2728
}
2829
}

docs/src/.vuepress/client.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,6 @@
11
import CronCore from '@vue-js-cron/core'
2+
import CronElement from '@vue-js-cron/element-plus'
3+
import '@vue-js-cron/element-plus/dist/element-plus.css'
24
import CronLight from '@vue-js-cron/light'
35
import '@vue-js-cron/light/dist/light.css'
46
import CronVuetify from '@vue-js-cron/vuetify'
@@ -7,6 +9,9 @@ import { createVuetify } from 'vuetify'
79
import * as components from 'vuetify/components'
810
import 'vuetify/styles'
911

12+
import ElementPlus from 'element-plus'
13+
import 'element-plus/dist/index.css'
14+
1015
import { defineClientConfig } from '@vuepress/client'
1116

1217
import { variables } from './vars'
@@ -18,9 +23,11 @@ const vuetify = createVuetify({
1823
export default defineClientConfig({
1924
enhance ({ app, router, siteData }) {
2025
app.use(vuetify)
26+
app.use(ElementPlus)
2127
app.use(CronCore)
2228
app.use(CronVuetify)
2329
app.use(CronLight)
30+
app.use(CronElement)
2431

2532
app.mixin({
2633
computed: {
Lines changed: 86 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,86 @@
1+
<template>
2+
<div>
3+
<p>Flavor</p>
4+
<v-btn-toggle
5+
v-model="text"
6+
tile
7+
color="secondary"
8+
group
9+
density="compact"
10+
class="mb-2">
11+
12+
<v-btn v-for="item in flavors" :value="item.name" :key="item.name" @click="flavor = item">
13+
{{item.name}}
14+
</v-btn>
15+
16+
</v-btn-toggle>
17+
18+
<p>Locale</p>
19+
<v-btn-toggle
20+
v-model="locale"
21+
tile
22+
color="secondary"
23+
group
24+
density="compact"
25+
class="mb-10">
26+
27+
<v-btn v-for="item in locales" :value="item" :key="item">
28+
{{item}}
29+
</v-btn>
30+
31+
</v-btn-toggle>
32+
33+
<p class="mb-2">
34+
<template v-for="l in locales" :key=l>
35+
<component v-if="l == locale" :is="flavor.component" v-model="value" :locale="locale"></component>
36+
</template>
37+
</p>
38+
<p class="text-lightest mb-5">
39+
cron expression: {{value}}
40+
</p>
41+
42+
</div>
43+
</template>
44+
45+
<script>
46+
import { ref } from 'vue'
47+
48+
export default {
49+
setup () {
50+
const flavors = [
51+
{
52+
name: 'Light',
53+
component: 'cron-light'
54+
},
55+
{
56+
name: 'Vuetify',
57+
component: 'cron-vuetify'
58+
},
59+
{
60+
name: 'Element Plus',
61+
component: 'cron-element-plus'
62+
}
63+
]
64+
65+
const locales = ['en', 'de']
66+
67+
const flavor = flavors[0]
68+
69+
const selectFlavor = (name) => {
70+
let i = flavors.map(f => f.name).indexOf(name)
71+
i = i >= 0 ? i : 0
72+
return flavors[i]
73+
}
74+
75+
return {
76+
flavor: ref(flavor),
77+
flavors,
78+
selectFlavor,
79+
text: ref(flavor.name),
80+
locales,
81+
locale: ref('en'),
82+
value: ref('* * * * *')
83+
}
84+
}
85+
}
86+
</script>
Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
<template>
2+
<div>
3+
<cron-element-plus
4+
v-model="value"
5+
:button-props="{ type: 'primary' }"
6+
@error="error=$event" />
7+
8+
<p class="text-lightest pt-2">cron expression: {{value}}</p>
9+
10+
</div>
11+
</template>
12+
13+
<script>
14+
export default {
15+
data () {
16+
return {
17+
value: this.init,
18+
error: ''
19+
}
20+
}
21+
}
22+
</script>
Original file line numberDiff line numberDiff line change
@@ -1,30 +1,19 @@
11
<template>
22
<div class="pt-2">
33

4-
<CronLight v-model="value" @error="error=$event"></CronLight>
4+
<cron-light v-model="value" @error="error=$event"></cron-light>
55
<div class="text-lightest pt-2">cron expression: {{value}}</div>
66

77
</div>
88
</template>
99

1010
<script>
1111
export default {
12-
13-
props: {
14-
init: {
15-
type: String,
16-
default: '30 12,19 24 12 *'
17-
}
18-
},
19-
2012
data () {
2113
return {
22-
value: this.init,
14+
value: '* * * * *',
2315
error: ''
2416
}
25-
},
26-
methods: {
27-
2817
}
2918
}
3019
</script>

docs/src/.vuepress/components/getting-started-renderless.vue renamed to docs/src/.vuepress/components/get-started-renderless.vue

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
<template>
22
<div>
3-
<CronCore v-model="value" v-slot="{fields, period, error}">
3+
<cron-core v-model="value" v-slot="{fields, period, error}">
44
<div>
55

66
<!-- period selection -->
@@ -47,7 +47,7 @@
4747
:error-messages="error" />
4848

4949
</div>
50-
</CronCore>
50+
</cron-core>
5151
</div>
5252
</template>
5353

docs/src/.vuepress/components/getting-started-vuetify.vue renamed to docs/src/.vuepress/components/get-started-vuetify.vue

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,10 @@
11
<template>
22
<div>
33

4-
<CronVuetify v-model="value" @error="error=$event"></CronVuetify>
4+
<cron-vuetify
5+
v-model="value"
6+
:chip-props="{ color: 'success', textColor: 'white' }"
7+
@error="error=$event" />
58

69
<!-- editable cron expression -->
710
<v-text-field
@@ -31,9 +34,6 @@ export default {
3134
nextValue: this.init,
3235
error: ''
3336
}
34-
},
35-
methods: {
36-
3737
}
3838
}
3939
</script>

docs/src/.vuepress/config.js

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -83,6 +83,13 @@ module.exports = {
8383
children: [
8484
'vuetify'
8585
]
86+
},
87+
{
88+
title: 'Element Plus',
89+
collapsable: false,
90+
children: [
91+
'element-plus'
92+
]
8693
}
8794
]
8895
}

docs/src/.vuepress/vars.js

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,11 @@ const variables = {
22
channel: 'next',
33

44
vuetifyProps: [
5-
{ name: 'variant', type: '`string`', default: '`"elevated"`', desc: '' },
6-
{ name: 'density', type: '`string`', default: '`"default"`', desc: 'Available options are: default, comfortable, and compact.' }
5+
{ name: 'chip-props', type: '`Object`', default: '`{}`', desc: 'v-chip properties' }
6+
],
7+
8+
elementProps: [
9+
{ name: 'button-props', type: '`Object`', default: '`{}`', desc: 'el-button properties' }
710
]
811
}
912

docs/src/api/core.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# CronCore - Component
1+
# cron-core
22

33
## Props
44

@@ -15,7 +15,7 @@
1515
</template>
1616
<template v-slot:r4c2>
1717

18-
[en.js](https://github.com/abichinger/vue-js-cron/blob/main/core/src/locale/en.js)
18+
[en.js](https://github.com/abichinger/vue-js-cron/blob/next/core/src/locale/en.js)
1919

2020
</template>
2121
</api-core-props>

docs/src/api/element-plus.md

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
# cron-element-plus
2+
3+
## Props
4+
5+
<api-core-props :appendItems="$vars.elementProps">
6+
<template v-slot:r1c2>
7+
8+
@[code](@/src/api/default/fields.js)
9+
10+
</template>
11+
<template v-slot:r2c2>
12+
13+
@[code](@/src/api/default/periods.js)
14+
15+
</template>
16+
<template v-slot:r4c2>
17+
18+
[en.js](https://github.com/abichinger/vue-js-cron/blob/next/core/src/locale/en.js)
19+
20+
</template>
21+
</api-core-props>
22+
23+
### Types
24+
25+
@[code](@/src/api/types/field.ts)
26+
27+
@[code](@/src/api/types/period.ts)
28+
29+
@[code](@/src/api/types/locale.ts)
30+
31+
## Events
32+
33+
<api-core-events />

docs/src/api/light.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# CronLight - Component
1+
# cron-light
22

33
## Props
44

@@ -15,7 +15,7 @@
1515
</template>
1616
<template v-slot:r4c2>
1717

18-
[en.js](https://github.com/abichinger/vue-js-cron/blob/main/core/src/locale/en.js)
18+
[en.js](https://github.com/abichinger/vue-js-cron/blob/next/core/src/locale/en.js)
1919

2020
</template>
2121
</api-core-props>

docs/src/api/vuetify.md

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# CronVuetify - Component
1+
# cron-vuetify
22

33
## Props
44

@@ -15,7 +15,7 @@
1515
</template>
1616
<template v-slot:r4c2>
1717

18-
[en.js](https://github.com/abichinger/vue-js-cron/blob/main/core/src/locale/en.js)
18+
[en.js](https://github.com/abichinger/vue-js-cron/blob/next/core/src/locale/en.js)
1919

2020
</template>
2121
</api-core-props>

docs/src/demo.md

Lines changed: 3 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,6 @@
11
# Demo
22

3-
### CronLight
3+
<cron-demo>
4+
</cron-demo>
45

5-
<getting-started-light init="* * * * *" class="mt-4" />
6-
7-
<br/>
8-
9-
[Get Started](/guide/getting-started.html#cronlight)
10-
11-
### Vuetify
12-
13-
<getting-started-vuetify init="* * * * *" class="mt-4" />
14-
15-
<br/>
16-
17-
[Get Started](/guide/getting-started.html#cronvuetify)
6+
[Get Started](/guide/getting-started.html)

0 commit comments

Comments
 (0)