Merge pull request #48 from abichinger/feat/period-event

feat: add event `update:period` #47

Author: abichinger

ant/src/components/cron-ant.vue

@@ -87,9 +87,9 @@ export default defineComponent({
     CustomSelect,
   },
   props: cronAntProps(),
-  emits: ['update:model-value', 'error'],
+  emits: ['update:model-value', 'update:period', 'error'],
   setup(props, ctx) {
-    return setupCron(props, () => props.modelValue, ctx)
+    return setupCron(props, ctx)
   },
 })
 </script>

core/src/components/__tests__/cron-core.spec.ts

@@ -1,8 +1,9 @@
 import { describe, expect, it } from 'vitest'
 
 import type { CronFormat } from '@/types'
-import { nextTick } from 'vue'
-import { useCron } from '../cron-core'
+import { mount } from '@vue/test-utils'
+import { defineComponent, nextTick } from 'vue'
+import { cronCoreProps, setupCron, useCron } from '../cron-core'
 
 type UseCronReturn = ReturnType<typeof useCron>
 
@@ -97,3 +98,38 @@ describe('useCron', () => {
     }
   })
 })
+
+it('setupCron events', async () => {
+  let cron!: UseCronReturn
+
+  const component = defineComponent({
+    props: cronCoreProps(),
+    emits: ['update:model-value', 'update:period', 'error'],
+    setup(props, ctx) {
+      cron = setupCron(props, ctx)
+
+      return () => {}
+    },
+  })
+
+  const wrapper = mount(component, {
+    props: {
+      modelValue: '5 * * * *',
+      period: 'day',
+    },
+  })
+
+  expect(cron.cron.value).toEqual('5 * * * *')
+  expect(cron.period.selected.value.id).toEqual('day')
+
+  cron.segments[1].select([12]) // select hour: 12
+  cron.period.select('month')
+
+  await nextTick()
+
+  expect(cron.cron.value).toEqual('5 12 * * *')
+  expect(cron.period.selected.value.id).toEqual('month')
+
+  expect(wrapper.emitted('update:model-value')![0]).toEqual(['5 12 * * *'])
+  expect(wrapper.emitted('update:period')![0]).toEqual(['month'])
+})

core/src/components/cron-core.ts

@@ -8,7 +8,6 @@ import {
   type ExtractPropTypes,
   type PropType,
   type SetupContext,
-  type WatchSource,
 } from 'vue'
 import { getLocale } from '../locale'
 import { FieldWrapper, TextPosition, type CronFormat, type Field, type Period } from '../types'
@@ -235,26 +234,43 @@ export function useCron(options: CronOptions) {
 export type UseCronReturn = ReturnType<typeof useCron>
 
 export function setupCron(
-  options: CronOptions,
-  modelValue: WatchSource<string | undefined>,
-  { emit }: SetupContext<['update:model-value', 'error']>,
+  props: CronCoreProps,
+  { emit }: SetupContext<['update:model-value', 'update:period', 'error']>,
 ): UseCronReturn {
+  const options: CronOptions = {
+    ...props,
+    initialValue: props.modelValue,
+    initialPeriod: props.period,
+  }
+
   const cron = useCron(options)
 
   watch(
-    modelValue,
+    () => props.modelValue,
     (value) => {
       if (value) {
         cron.cron.value = value
       }
     },
-    { immediate: true },
+  )
+
+  watch(
+    () => props.period,
+    (value) => {
+      if (value) {
+        cron.period.select(value)
+      }
+    },
   )
 
   watch(cron.cron, (value) => {
     emit('update:model-value', value)
   })
 
+  watch(cron.period.selected, (value) => {
+    emit('update:period', value.id)
+  })
+
   watch(cron.error, (error) => {
     emit('error', error)
   })
@@ -276,7 +292,7 @@ export const cronCoreProps = () => ({
    *
    * @defaultValue last entry of `CronCoreProps.periods`
    */
-  initialPeriod: {
+  period: {
     type: String,
   },
   /**
@@ -349,26 +365,9 @@ export type CronCoreProps = Partial<ExtractPropTypes<ReturnType<typeof cronCoreP
 export const CronCore = defineComponent({
   name: 'VueCronCore',
   props: cronCoreProps(),
-  emits: ['update:model-value', 'error'],
+  emits: ['update:model-value', 'update:period', 'error'],
   setup(props, ctx) {
-    const { cron, error, selected, period } = useCron(props)
-
-    watch(cron, (value) => {
-      ctx.emit('update:model-value', value)
-    })
-
-    watch(error, (value) => {
-      ctx.emit('error', value)
-    })
-
-    watch(
-      () => props.modelValue,
-      (value) => {
-        if (value) {
-          cron.value = value
-        }
-      },
-    )
+    const { error, selected, period } = setupCron(props, ctx)
 
     return () => {
       const slotProps = {

docs/src/.vuepress/components/cron-demo.vue

@@ -117,7 +117,6 @@ export default {
     const disabled = ref(false)
 
     const selectFlavor = (name) => {
-      console.log(name)
       let i = flavors.map(f => f.name).indexOf(name)
       i = i >= 0 ? i : 0
       flavor.value = flavors[i]

element-plus/src/components/cron-element-plus.vue

@@ -74,9 +74,9 @@ export default defineComponent({
     CustomSelect,
   },
   props: cronElementPlusProps(),
-  emits: ['update:model-value', 'error'],
+  emits: ['update:model-value', 'update:period', 'error'],
   setup(props, ctx) {
-    return setupCron(props, () => props.modelValue, ctx)
+    return setupCron(props, ctx)
   },
 })
 </script>

light/src/App.vue

@@ -2,7 +2,7 @@
   <div>
     <cron-light
       v-model="value"
-      initial-period="month"
+      v-model:period="period"
       format="quartz"
       locale="en"
       @error="error = $event"
@@ -27,9 +27,18 @@ export default {
   data: () => {
     return {
       value: '* * * * * *',
+      period: 'month',
       error: '',
     }
   },
+  watch: {
+    value: function (value) {
+      console.log('value changed: ' + value)
+    },
+    period: function (value) {
+      console.log('period changed: ' + value)
+    },
+  },
   methods: {
     updateValue(evt: any) {
       this.value = evt.target.value

light/src/components/cron-light.vue

@@ -55,10 +55,10 @@ export default defineComponent({
   components: {
     CustomSelect,
   },
-  emits: ['update:model-value', 'error'],
+  emits: ['update:model-value', 'update:period', 'error'],
   props: cronLightProps(),
   setup(props, ctx) {
-    return setupCron(props, () => props.modelValue, ctx)
+    return setupCron(props, ctx)
   },
 })
 </script>

naive-ui/src/components/cron-naive-ui.vue

@@ -85,9 +85,9 @@ export default defineComponent({
     CustomSelect,
   },
   props: cronNaiveProps(),
-  emits: ['update:model-value', 'error'],
+  emits: ['update:model-value', 'update:period', 'error'],
   setup(props, ctx) {
-    return setupCron(props, () => props.modelValue, ctx)
+    return setupCron(props, ctx)
   },
 })
 </script>