Merge pull request #182 from qianmoQ/feature-components

feat: support cron

CHANGELOG.md

@@ -42,6 +42,20 @@ All notable changes to this project will be documented in this file. See [standa
 - support hsl
 - support showPanel, showDropper, showTransparency, showFormat
 
+#### Date Picker
+
+- feat: support disabled and readonly
+- feat: support format
+- feat: support clearable
+- feat: support show shortcuts
+- feat: support previous and next year
+- feat: support highlighting today
+- feat: support range
+
+#### Cron
+
+- feat: support cron
+
 ### 2024.5.2 (2024-12-15)
 
 ### ✨ Features

docs/.vitepress/config.js

@@ -224,7 +224,8 @@ export default {
                         {text: 'Map', link: 'form/map', icon: '/components/form/map.svg', version: '2024.5.2'},
                         {text: 'Time Picker', link: 'form/time-picker', icon: '/components/form/time-picker.svg', version: '2024.5.3'},
                         {text: 'Color Picker', link: 'form/color-picker', icon: '/components/form/color-picker.svg', version: '2024.5.3'},
-                        {text: 'Date Picker', link: 'form/date-picker', icon: '/components/form/date-picker.svg', version: '2024.5.3'}
+                        {text: 'Date Picker', link: 'form/date-picker', icon: '/components/form/date-picker.svg', version: '2024.5.3'},
+                        {text: 'Cron', link: 'form/cron', icon: '/components/form/cron.svg', version: '2024.5.3'}
                     ]
 
                     return {

docs/components/form/cron.md

@@ -0,0 +1,44 @@
+---
+title: Shadcn Cron
+---
+
+# Introduction
+
+This document describes the features and usage of the ShadcnCron component.
+
+Modify by [vue3-vCrontab](https://github.com/dongchacha/vue3-vCrontab)
+
+## Usage
+
+::: raw
+
+<CodeRunner title="Usage">
+    <ShadcnCron v-model="value" />
+</CodeRunner>
+
+:::
+
+::: details Show code
+
+```vue
+<template>
+    <ShadcnCron v-model="value" />
+</template>
+```
+
+:::
+## Cron Props
+
+<ApiTable title="Props"
+    :headers="['Attribute', 'Description', 'Type', 'Default Value', 'List']"
+    :columns="[
+        ['modelValue', 'modelValue value', 'string', '* * * * * ?', '-']
+    ]">
+</ApiTable>
+
+
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const value = ref('')
+</script>

package.json

@@ -97,6 +97,7 @@
   },
   "dependencies": {
     "clsx": "^2.1.0",
+    "cron-parser": "^4.9.0",
     "highlight.js": "^11.10.0",
     "lodash": "^4.17.21",
     "lucide-vue-next": "^0.360.0",

packages/index.ts

@@ -96,6 +96,7 @@ import ShadcnQrCode from '@/ui/qrcode/ShadcnQrCode.vue'
 import { ShadcnTimePicker } from '@/ui/time-picker'
 import { ShadcnColorPicker } from '@/ui/color-picker'
 import { ShadcnDatePicker } from '@/ui/date-picker'
+import { ShadcnCron } from '@/ui/cron'
 
 let components = [
     ShadcnButton,
@@ -188,7 +189,8 @@ let components = [
     ShadcnQrCode,
     ShadcnTimePicker,
     ShadcnColorPicker,
-    ShadcnDatePicker
+    ShadcnDatePicker,
+    ShadcnCron
 ]
 
 interface InstallOptions
@@ -317,11 +319,13 @@ export { ShadcnQrCode } from '@/ui/qrcode'
 export { ShadcnTimePicker } from '@/ui/time-picker'
 export { ShadcnColorPicker } from '@/ui/color-picker'
 export { ShadcnDatePicker } from '@/ui/date-picker'
+export { ShadcnCron } from '@/ui/cron'
 
 // Export functions
 export { fnToString, fnToFunction } from '@/utils/formatter'
 export { formatLogger, formatFromExample, formatMultipleLines, formatLoggerFromStream } from '@/utils/logger'
-export { randomUUID, validateUUID } from '@/utils/uuid.ts'
+export { randomUUID, validateUUID } from '@/utils/uuid'
+export { getRecentTriggerTime } from '@/utils/cron'
 export { LoadingBar } from '@/ui/loading-bar/service'
 
 // Export locale

src/App.vue

@@ -1,18 +1,15 @@
 <template>
   <div class="space-y-4 p-12">
-    <div>Selected date: {{ selectDate }}</div>
-    <ShadcnDatePicker v-model="selectDate" @on-change="onChange"/>
-    <ShadcnDatePicker v-model="selectDate" disabled @on-change="onChange"/>
-    <ShadcnDatePicker v-model="selectDate" readonly @on-change="onChange"/>
-    <ShadcnDatePicker v-model="selectDate" format="YYYY/MM/DD" @on-change="onChange"/>
-    <ShadcnDatePicker v-model="selectDate" type="range" @on-change="onChange"/>
+    <div>Selected value: {{ value }}</div>
+    <ShadcnCron v-model="value" @on-change="onChange"/>
   </div>
 </template>
 
 <script setup lang="ts">
 import { ref } from 'vue'
 
-const selectDate = ref(null)
+const value = ref(null)
+// value.value = '0 0 0 1/1 2/2 ?'
 
 const onChange = (value: string) => {
   console.log('Selected date:', value)

src/locales/en-US.ts

@@ -222,5 +222,54 @@ export default {
         placeholder: {
             date: 'Please select a date'
         }
+    },
+    cron: {
+        placeholder: {
+            multiple: 'You can select more than one'
+        },
+        text: {
+            second: 'Second',
+            minute: 'Minute',
+            hour: 'Hour',
+            day: 'Day',
+            month: 'Month',
+            week: 'Week',
+            year: 'Year',
+            everySecond: 'Every second',
+            everyMinute: 'Every minute',
+            everyHour: 'Every hour',
+            everyDay: 'Every day',
+            everyWeek: 'Every week',
+            everyMonth: 'Every month',
+            periodFrom: 'Period from',
+            fromStart: 'From start',
+            secondStart: 'Second start',
+            every: 'Every',
+            secondExecute: 'Second execute',
+            specify: 'Specify',
+            minuteStart: 'Minute start',
+            minuteExecute: 'Minute execute',
+            hourStart: 'Hour start',
+            hourExecute: 'Hour execute',
+            notSpecified: 'Not specified',
+            dayStart: 'Day start',
+            dayExecute: 'Day execute',
+            workday: 'Workday',
+            nearestWorkday: 'Nearest workday',
+            lastDayOfMonth: 'Last day of month',
+            monthStart: 'Month start',
+            monthExecute: 'Month execute',
+            weekPeriodFrom: 'Week period from',
+            specificWeek: 'Specific week',
+            the: 'The',
+            weekOf: 'Week of',
+            lastWeek: 'Last week',
+            yearNotFilled: 'Year not filled',
+            everyYear: 'Every year',
+            yearStart: 'Year start',
+            yearExecute: 'Year execute',
+            nextExecutionTime: 'Next execution time',
+            nextExecutionTimeAtOnN: '{{ n }}th execution time: {{ time }}',
+        }
     }
 }

src/locales/zh-CN.ts

@@ -222,5 +222,54 @@ export default {
         placeholder: {
             date: '请选择日期'
         }
+    },
+    cron: {
+        placeholder: {
+            multiple: '可多选'
+        },
+        text: {
+            second: '秒',
+            minute: '分',
+            hour: '时',
+            day: '日',
+            month: '月',
+            week: '周',
+            year: '年',
+            everySecond: '每秒',
+            everyMinute: '每分钟',
+            everyHour: '每小时',
+            everyDay: '每天',
+            everyWeek: '每周',
+            everyMonth: '每月',
+            periodFrom: '周期从',
+            fromStart: '从开始',
+            secondStart: '秒开始',
+            every: '每',
+            secondExecute: '秒执行',
+            specify: '指定',
+            minuteStart: '分钟开始',
+            minuteExecute: '分钟执行',
+            hourStart: '小时开始',
+            hourExecute: '小时执行',
+            notSpecified: '未指定',
+            dayStart: '天开始',
+            dayExecute: '天执行',
+            workday: '工作日',
+            nearestWorkday: '号最近工作日',
+            lastDayOfMonth: '月最后一天',
+            monthStart: '月开始',
+            monthExecute: '月执行',
+            weekPeriodFrom: '周周期从',
+            specificWeek: '指定周',
+            the: '第',
+            weekOf: '周',
+            lastWeek: '上周',
+            yearNotFilled: '年份未填写',
+            everyYear: '每年',
+            yearStart: '年开始',
+            yearExecute: '年执行',
+            nextExecutionTime: '下次执行时间',
+            nextExecutionTimeAtOnN: '第 {{ n }} 次执行时间: {{ time }}'
+        }
     }
 }