Skip to content

Commit e09ad29

Browse files
abichingerabichinger
committed
refactor(ant, light): use setupCron and setupSelect
1 parent a4cb6d8 commit e09ad29

File tree

8 files changed

+187
-200
lines changed

8 files changed

+187
-200
lines changed

‎ant/src/components/cron-ant-script.ts

Lines changed: 0 additions & 40 deletions
This file was deleted.

‎ant/src/components/cron-ant.vue

Lines changed: 84 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -1,51 +1,98 @@
11
<template>
2-
<CronCore
3-
v-bind="$attrs"
4-
@update:model-value="$emit('update:model-value', $event)"
5-
@error="$emit('error', $event)"
6-
v-slot="{ fields, period }"
7-
>
8-
<div>
9-
{{ period.prefix }}
2+
<div>
3+
{{ period.prefix.value }}
4+
5+
<div class="vcron-a-spacer">
6+
<custom-select
7+
:model-value="period.selected.value.id"
8+
item-value="id"
9+
:items="period.items"
10+
@update:model-value="period.select($event)"
11+
:button-props="buttonProps"
12+
/>
13+
</div>
14+
15+
{{ period.suffix.value }}
16+
17+
<template v-for="f in selected" :key="f.id">
18+
{{ f.prefix.value }}
1019

1120
<div class="vcron-a-spacer">
1221
<custom-select
13-
v-bind="period.attrs"
14-
:items="period.items"
15-
v-on="period.events"
16-
item-value="id"
22+
:model-value="f.selected.value"
23+
@update:model-value="f.select($event)"
24+
:items="f.items"
25+
:cols="cols[f.id] || 1"
26+
:selection="f.text.value"
27+
multiple
28+
clearable
1729
:button-props="buttonProps"
30+
:dropdown-props="dropdownProps"
31+
:hideOnClick="false"
1832
/>
1933
</div>
2034

21-
{{ period.suffix }}
22-
23-
<template v-for="f in fields" :key="f.id">
24-
{{ f.prefix }}
25-
26-
<div class="vcron-a-spacer">
27-
<custom-select
28-
v-bind="f.attrs"
29-
v-on="f.events"
30-
:selection="f.selectedStr"
31-
:cols="cols[f.id]"
32-
:items="f.items"
33-
multiple
34-
:button-props="buttonProps"
35-
:hideOnClick="false"
36-
clearable
37-
/>
38-
</div>
39-
40-
{{ f.suffix }}
41-
</template>
42-
</div>
43-
</CronCore>
35+
{{ f.suffix.value }}
36+
</template>
37+
</div>
4438
</template>
4539

4640
<script lang="ts">
47-
// External script works better with Typedoc
48-
export { CronAnt as default } from './cron-ant-script'
41+
import CustomSelect from '@/components/select.vue'
42+
import { cronCoreProps, setupCron } from '@vue-js-cron/core'
43+
44+
import type { ButtonProps, DropdownProps } from 'ant-design-vue'
45+
import { defineComponent, type ExtractPropTypes, type PropType } from 'vue'
46+
47+
export const cronAntProps = () => ({
48+
/**
49+
* Properties of Ant Design Vue Button
50+
*
51+
* @remarks
52+
* See {@link https://antdv.com/components/button#api}
53+
*/
54+
buttonProps: {
55+
type: Object as PropType<ButtonProps>,
56+
default() {
57+
return {}
58+
},
59+
},
60+
/**
61+
* Properties of Ant Design Vue Dropdown
62+
*
63+
* @remarks
64+
* See {@link https://antdv.com/components/dropdown#api}
65+
*/
66+
dropdownProps: {
67+
type: Object as PropType<DropdownProps>,
68+
default: () => {},
69+
},
70+
...cronCoreProps(),
71+
})
72+
73+
/**
74+
* Props of {@link CronAnt}
75+
*
76+
* See {@link @vue-js-cron/core!CronCoreProps | CronCoreProps} for a detailed description of each prop
77+
*
78+
* @interface
79+
*/
80+
export type CronAntProps = Partial<ExtractPropTypes<ReturnType<typeof cronAntProps>>>
81+
82+
export default defineComponent({
83+
name: 'CronAnt',
84+
components: {
85+
CustomSelect,
86+
},
87+
props: cronAntProps(),
88+
emits: ['update:model-value', 'error'],
89+
setup(props, ctx) {
90+
const cron = setupCron(props, () => props.modelValue, ctx)
91+
return {
92+
...cron,
93+
}
94+
},
95+
})
4996
</script>
5097

5198
<style lang="css">

‎ant/src/components/select.vue

Lines changed: 59 additions & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -1,79 +1,90 @@
11
<template>
2-
<renderless-select
3-
v-bind="$attrs"
4-
@update:model-value="$emit('update:model-value', $event)"
5-
#default="{ selectedStr, itemRows, select, clearable, clear, modelValue, itemValue }"
6-
>
7-
<span class="custom-select">
8-
<a-dropdown :trigger="['click']" v-model:visible="visible" v-bind="dropdownProps">
9-
<a-button v-bind="buttonProps">
10-
{{ selectedStr }}<CloseCircleFilled v-if="clearable" @click="clear()" @click.stop="" />
11-
</a-button>
2+
<span class="custom-select">
3+
<a-dropdown :trigger="['click']" v-model:visible="visible" v-bind="dropdownProps">
4+
<a-button v-bind="buttonProps">
5+
{{ selection ?? selectedStr
6+
}}<CloseCircleFilled v-if="clearable && !isEmpty" @click="clear()" @click.stop="" />
7+
</a-button>
128

13-
<template #overlay>
14-
<a-menu multiple :selectedKeys="Array.isArray(modelValue) ? modelValue : [modelValue]">
15-
<div class="vcron-a-row" type="flex" v-for="(itemRow, i) in itemRows" :key="i">
16-
<div class="vcron-a-col" :flex="1" v-for="(item, j) in itemRow" :key="j">
17-
<a-menu-item
18-
v-if="item"
19-
:key="item[itemValue]"
20-
@click="
21-
() => {
22-
select(item)
23-
updateVisibility()
24-
}
25-
"
26-
>{{ item.text }}</a-menu-item
27-
>
28-
<a-menu-item v-else></a-menu-item>
29-
</div>
9+
<template #overlay>
10+
<a-menu multiple :selectedKeys="Array.isArray(modelValue) ? modelValue : [modelValue]">
11+
<div class="vcron-a-row" type="flex" v-for="(itemRow, i) in itemRows" :key="i">
12+
<div class="vcron-a-col" :flex="1" v-for="(item, j) in itemRow" :key="j">
13+
<a-menu-item
14+
v-if="item"
15+
:key="item['value']"
16+
@click="
17+
() => {
18+
select(item)
19+
updateVisibility()
20+
}
21+
"
22+
>{{ item.text }}</a-menu-item
23+
>
24+
<a-menu-item v-else></a-menu-item>
3025
</div>
31-
</a-menu>
32-
</template>
33-
</a-dropdown>
34-
</span>
35-
</renderless-select>
26+
</div>
27+
</a-menu>
28+
</template>
29+
</a-dropdown>
30+
</span>
3631
</template>
3732

3833
<script lang="ts">
3934
import { CloseCircleFilled } from '@ant-design/icons-vue'
40-
import { RenderlessSelect } from '@vue-js-cron/core'
35+
import { selectProps, setupSelect } from '@vue-js-cron/core'
36+
import type { ButtonProps, DropdownProps } from 'ant-design-vue'
37+
import { defineComponent, ref, type PropType } from 'vue'
4138
42-
export default {
39+
export default defineComponent({
4340
inheritAttrs: false,
4441
components: {
45-
RenderlessSelect,
4642
CloseCircleFilled,
4743
},
4844
name: 'CustomSelect',
4945
props: {
46+
...selectProps<any, any>(),
47+
modelValue: {
48+
type: [String, Number, Array],
49+
},
50+
selection: {
51+
type: String,
52+
},
53+
clearable: {
54+
type: Boolean,
55+
default: false,
56+
},
5057
buttonProps: {
51-
type: Object,
58+
type: Object as PropType<ButtonProps>,
5259
default: () => {},
5360
},
5461
dropdownProps: {
55-
type: Object,
62+
type: Object as PropType<DropdownProps>,
5663
default: () => {},
5764
},
5865
hideOnClick: {
5966
type: Boolean,
6067
default: true,
6168
},
6269
},
63-
data: () => {
64-
return {
65-
visible: false,
66-
}
67-
},
6870
emits: ['update:model-value'],
69-
methods: {
70-
updateVisibility() {
71-
if (this.hideOnClick && this.visible) {
72-
this.visible = false
71+
setup(props, ctx) {
72+
const s = setupSelect(props, () => props.modelValue, ctx)
73+
const visible = ref(false)
74+
75+
const updateVisibility = () => {
76+
if (props.hideOnClick && visible.value) {
77+
visible.value = false
7378
}
74-
},
79+
}
80+
81+
return {
82+
...s,
83+
updateVisibility,
84+
visible,
85+
}
7586
},
76-
}
87+
})
7788
</script>
7889

7990
<style scoped>

‎ant/src/index.ts

Lines changed: 2 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,7 @@
1-
import CronAnt from '@/components/cron-ant.vue'
1+
import { default as CronAnt, cronAntProps, type CronAntProps } from '@/components/cron-ant.vue'
22
import type { App } from 'vue'
33

4-
export { cronAntProps, type CronAntProps } from '@/components/cron-ant-script'
5-
export { CronAnt }
4+
export { CronAnt, cronAntProps, type CronAntProps }
65
export const CronAntPlugin = {
76
install: (app: App) => {
87
app.component('CronAnt', CronAnt)

‎light/src/components/cron-light-script.ts

Lines changed: 0 additions & 49 deletions
This file was deleted.

0 commit comments

Comments
 (0)