@makerbi/vue-js-cron

Cron expression editor component for Vue 3 + Ant Design Vue.

This package is a lightweight fork and adaptation of @vue-js-cron/ant, tuned for Ant Design Vue 4 and used inside the Vector Vein project.

Features

• Vue 3 composition API support
• Ant Design Vue 4 UI
• Supports standard 5-field crontab syntax (* * * * *)
• Dropdowns for:
  • Period (minute / hour / day / week / month / year)
  • Minute / hour / day / month / day-of-week fields
• Uses v-model:open for dropdown to avoid deprecated visible API warnings

Install

pnpm add @makerbi/vue-js-cron
# or
npm install @makerbi/vue-js-cron

Peer dependencies (must be installed in your app):

• vue ^3.2.0
• ant-design-vue ^4.2.6

Usage

Global registration

// main.ts
import { createApp } from 'vue'
import Antd from 'ant-design-vue'
import 'ant-design-vue/dist/antd.css'

import CronPlugin from '@makerbi/vue-js-cron'
// or: import CronPlugin, { CronAnt } from '@makerbi/vue-js-cron'

import App from './App.vue'

const app = createApp(App)

app.use(Antd)
app.use(CronPlugin)
// If you prefer manual registration:
// app.component('CronAnt', CronAnt)

app.mount('#app')

In a component

<template>
  <CronAnt v-model="cron" />
</template>

<script setup>
import { ref } from 'vue'

const cron = ref('* * * * *')
</script>

With custom button props

<CronAnt
  v-model="cron"
  :buttonProps="{ type: 'primary', shape: 'round', size: 'small' }"
/>

API

<CronAnt /> props

• v-model (modelValue: string)

  • Current cron expression, e.g. "0 0 * * *".
  • Default: "* * * * *".

• buttonProps (object, optional)

  • Passed directly to Ant Design Vue <a-button>.
  • Example:

    { type: 'primary', size: 'small', shape: 'round' }

• cols (Record<string, number>, optional)

  • Adjusts the number of columns in dropdown grids.
  • Default:

    {
      minute: 5,
      hour: 4,
      day: 4,
    }

Events

• update:model-value
  • Emitted whenever the cron expression changes.
• error
  • Emitted if the internal parser detects an invalid selection / pattern.

Build & Publish (for maintainers)

From the ant subdirectory:

pnpm install
pnpm run build
# then, after logging in to npm:
npm publish --access public

The package name is already set to @makerbi/vue-js-cron in package.json.