mirrors/vue-cron-editor-bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/vue-cron-editor-bootstrap.git synced 2026-06-20 20:10:34 +03:00
Code Activity

demo

Browse Source
This commit is contained in:
Сергей Солодягин
2022-11-10 00:50:44 +03:00
parent c6417fea48
commit 81dd9da0d6
9 changed files with 98 additions and 85 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.eslintignore
+1
View File
@@ -1,2 +1,3 @@
node_modules node_modules
/demo
/dist /dist
.gitignore
+1
View File
@@ -22,4 +22,5 @@ yarn-error.log*
node_modules node_modules
# Output directories # Output directories
/demo
/dist /dist
README.md
+16 -18
View File
@@ -1,5 +1,3 @@
[![Actions Status](https://github.com/karoletrych/vue-cron-editor/workflows/Node%20CI/badge.svg)](https://github.com/karoletrych/vue-cron-editor/actions)
# vue-cron-editor-bootstrap # vue-cron-editor-bootstrap
VueCronEditor is a component library built with Vue and Bootstrap-Vue allowing for easier editing of cron expressions. VueCronEditor is a component library built with Vue and Bootstrap-Vue allowing for easier editing of cron expressions.
@@ -9,36 +7,38 @@ Inspired by https://github.com/karoletrych/vue-cron-editor
# Requirements # Requirements
- Vue ^2.0 - Vue ^2.0
- Bootstrap-Vue ^2.14.0 - Bootstrap-Vue ^2.14.0
# Installation # Installation
- vue-cron-editor-bootstrap - vue-cron-editor-bootstrap
``` ```
npm install vue-cron-editor-bootstrap --save npm install @tenrok/vue-cron-editor-bootstrap --save
``` ```
# Usage # Usage
``` ```
<template> <template>
<VueCronEditorBootstrap v-model="cronExpression"/> <VueCronEditorBootstrap v-model="cronExpression" />
{{cronExpression}} {{cronExpression}}
</template> </template>
<script> <script>
import VueCronEditorBootstrap from 'vue-cron-editor-bootstrap'; import VueCronEditorBootstrap from '@tenrok/vue-cron-editor-bootstrap';
export default { export default {
name: 'App', name: 'App',
components: { components: {
VueCronEditorBootstrap VueCronEditorBootstrap
}, },
data: () => ({ data() {
return {
cronExpression: "*/1 * * * *" cronExpression: "*/1 * * * *"
}), }
},
}; };
</script> </script>
``` ```
@@ -57,13 +57,13 @@ The language of the component can be selected with the `locale` prop.
<VueCronEditorBootstrap <VueCronEditorBootstrap
v-model="expression" v-model="expression"
locale="pl" locale="pl"
></VueCronEditorBootstrap> />
``` ```
Currently supported languages: Currently supported languages:
- en - en
- pl - pl
Custom locales can be provided via a `customLocales` prop: Custom locales can be provided via a `customLocales` prop:
@@ -81,7 +81,6 @@ Custom locales can be provided via a `customLocales` prop:
onThe: "On the", onThe: "On the",
dayOfEvery: "day, of every", dayOfEvery: "day, of every",
monthsAt: "month(s), at", monthsAt: "month(s), at",
everyDay: "Every",
mon: "Mon", mon: "Mon",
tue: "Tue", tue: "Tue",
wed: "Wed", wed: "Wed",
@@ -89,18 +88,17 @@ Custom locales can be provided via a `customLocales` prop:
fri: "Fri", fri: "Fri",
sat: "Sat", sat: "Sat",
sun: "Sun", sun: "Sun",
hasToBeBetween: "Has to be between",
and: "and",
minutes: "MINUTES", minutes: "MINUTES",
hourly: "HOURLY", hourly: "HOURLY",
daily: "DAILY", daily: "DAILY",
weekly: "WEEKLY", weekly: "WEEKLY",
monthly: "MONTHLY", monthly: "MONTHLY",
advanced: "ADVANCED", advanced: "ADVANCED",
cronExpression: "cron expression:" cronExpression: "cron expression:",
onlyOn: "Only on"
} }
}" }"
></VueCronEditorBootstrap> />
``` ```
# Contributing # Contributing
package-lock.json
Generated
+6 -6
View File
@@ -11252,9 +11252,9 @@
"integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==" "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
}, },
"node_modules/webpack": { "node_modules/webpack": {
"version": "5.74.0", "version": "5.75.0",
"resolved": "https://registry.npmjs.org/webpack/-/webpack-5.74.0.tgz", "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.75.0.tgz",
"integrity": "sha512-A2InDwnhhGN4LYctJj6M1JEaGL7Luj6LOmyBHjcI8529cm5p6VXiTIW2sn6ffvEAKmveLzvu4jrihwXtPojlAA==", "integrity": "sha512-piaIaoVJlqMsPtX/+3KTTO6jfvrSYgauFVdt8cr9LTHKmcq/AMd4mhzsiP7ZF/PGRNPGA8336jldh9l2Kt2ogQ==",
"dev": true, "dev": true,
"dependencies": { "dependencies": {
"@types/eslint-scope": "^3.7.3", "@types/eslint-scope": "^3.7.3",
@@ -20290,9 +20290,9 @@
"integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ==" "integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
}, },
"webpack": { "webpack": {
"version": "5.74.0", "version": "5.75.0",
"resolved": "https://registry.npmjs.org/webpack/-/webpack-5.74.0.tgz", "resolved": "https://registry.npmjs.org/webpack/-/webpack-5.75.0.tgz",
"integrity": "sha512-A2InDwnhhGN4LYctJj6M1JEaGL7Luj6LOmyBHjcI8529cm5p6VXiTIW2sn6ffvEAKmveLzvu4jrihwXtPojlAA==", "integrity": "sha512-piaIaoVJlqMsPtX/+3KTTO6jfvrSYgauFVdt8cr9LTHKmcq/AMd4mhzsiP7ZF/PGRNPGA8336jldh9l2Kt2ogQ==",
"dev": true, "dev": true,
"requires": { "requires": {
"@types/eslint-scope": "^3.7.3", "@types/eslint-scope": "^3.7.3",
package.json
+15 -11
View File
@@ -2,16 +2,26 @@
"name": "@tenrok/vue-cron-editor-bootstrap", "name": "@tenrok/vue-cron-editor-bootstrap",
"version": "0.2.1", "version": "0.2.1",
"private": false, "private": false,
"main": "dist/vueCronEditorBootstrap.umd.js", "repository": {
"module": "dist/vueCronEditorBootstrap.esm.js", "type": "git",
"unpkg": "dist/vueCronEditorBootstrap.min.js", "url": "git+https://github.com/alexmfreitas/vue-cron-editor-bootstrap.git"
},
"license": "MIT",
"author": "alexmfreitas",
"main": "dist/vue-cron-editor-bootstrap.umd.js",
"unpkg": "dist/vue-cron-editor-bootstrap.min.js",
"module": "dist/vue-cron-editor-bootstrap.esm.js",
"browser": { "browser": {
"./sfc": "src/VueCronEditorBootstrap.vue" "./sfc": "src/VueCronEditorBootstrap.vue"
}, },
"files": [
"dist/vue-cron-editor-bootstrap.*"
],
"scripts": { "scripts": {
"build:npm": "vue-cli-service build --target lib --name vueCronEditorBootstrap src/VueCronEditorBootstrap.vue", "build": "vue-cli-service build --target lib src/VueCronEditorBootstrap.vue",
"build:demo": "vue-cli-service build",
"lint": "vue-cli-service lint --fix", "lint": "vue-cli-service lint --fix",
"serve": "vue-cli-service serve" "serve": "vue-cli-service serve --open"
}, },
"dependencies": { "dependencies": {
"core-js": "^3.26.0", "core-js": "^3.26.0",
@@ -36,11 +46,5 @@
}, },
"peerDependencies": { "peerDependencies": {
"bootstrap-vue": "^2.23.1" "bootstrap-vue": "^2.23.1"
},
"author": "alexmfreitas",
"license": "MIT",
"repository": {
"type": "git",
"url": "git+https://github.com/alexmfreitas/vue-cron-editor-bootstrap.git"
} }
} }
src/VueCronEditorBootstrap.vue
+25 -25
View File
@@ -3,13 +3,13 @@
<b-tab :value="0" :title="translate('minutes')" class="minutes-tab"> <b-tab :value="0" :title="translate('minutes')" class="minutes-tab">
<b-row> <b-row>
<b-col class="d-flex align-items-center"> <b-col class="d-flex align-items-center">
<span class="mr-2">{{ translate('every') }}</span> <span class="mr-1">{{ translate('every') }}</span>
<b-form-input <b-form-input
v-model="editorData.minuteInterval" v-model="editorData.minuteInterval"
type="number" type="number"
min="1" min="1"
max="59" max="59"
class="mr-2" class="mr-1"
style="width: 80px" style="width: 80px"
/> />
<span>{{ translate('mminutes') }}</span> <span>{{ translate('mminutes') }}</span>
@@ -19,16 +19,16 @@
<b-tab :value="1" :title="translate('hourly')" class="hourly-tab"> <b-tab :value="1" :title="translate('hourly')" class="hourly-tab">
<b-row> <b-row>
<b-col class="d-flex align-items-center"> <b-col class="d-flex align-items-center">
<span class="mr-2">{{ translate('every') }}</span> <span class="mr-1">{{ translate('every') }}</span>
<b-form-input <b-form-input
v-model="editorData.hourInterval" v-model="editorData.hourInterval"
type="number" type="number"
min="1" min="1"
max="24" max="24"
class="mr-2" class="mr-1"
style="width: 80px" style="width: 80px"
/> />
<span class="mr-2">{{ translate('hoursOnMinute') }}</span> <span class="mr-1">{{ translate('hoursOnMinute') }}</span>
<b-form-input v-model="editorData.minutes" type="number" min="0" max="59" style="width: 80px" /> <b-form-input v-model="editorData.minutes" type="number" min="0" max="59" style="width: 80px" />
</b-col> </b-col>
</b-row> </b-row>
@@ -36,38 +36,38 @@
<b-tab :value="2" :title="translate('daily')" class="daily-tab"> <b-tab :value="2" :title="translate('daily')" class="daily-tab">
<b-row> <b-row>
<b-col class="d-flex align-items-center"> <b-col class="d-flex align-items-center">
<span class="mr-2">{{ translate('every') }}</span> <span class="mr-1">{{ translate('every') }}</span>
<b-form-input v-model="editorData.dayInterval" type="number" class="mr-2" style="width: 80px" /> <b-form-input v-model="editorData.dayInterval" type="number" class="mr-1" style="width: 80px" />
<span class="mr-2">{{ translate('daysAt') }}</span> <span class="mr-1">{{ translate('daysAt') }}</span>
<b-form-timepicker :value="dateTime" :hour12="false" style="width: auto" @input="setDateTime" /> <b-form-timepicker :value="dateTime" :hour12="false" now-button style="width: auto" @input="setDateTime" />
</b-col> </b-col>
</b-row> </b-row>
</b-tab> </b-tab>
<b-tab :value="3" :title="translate('weekly')" class="weekly-tab"> <b-tab :value="3" :title="translate('weekly')" class="weekly-tab">
<b-row> <b-row>
<b-col class="d-flex align-items-center"> <b-col class="d-flex align-items-center">
<span class="mr-2">{{ translate('every') }}</span> <span class="mr-3">{{ translate('onlyOn') }}</span>
<b-form-checkbox v-model="editorData.days" value="0" class="mr-2">{{ translate('sun') }}</b-form-checkbox> <b-form-checkbox v-model="editorData.days" value="1" class="mr-3">{{ translate('mon') }}</b-form-checkbox>
<b-form-checkbox v-model="editorData.days" value="1" class="mr-2">{{ translate('mon') }}</b-form-checkbox> <b-form-checkbox v-model="editorData.days" value="2" class="mr-3">{{ translate('tue') }}</b-form-checkbox>
<b-form-checkbox v-model="editorData.days" value="2" class="mr-2">{{ translate('tue') }}</b-form-checkbox> <b-form-checkbox v-model="editorData.days" value="3" class="mr-3">{{ translate('wed') }}</b-form-checkbox>
<b-form-checkbox v-model="editorData.days" value="3" class="mr-2">{{ translate('wed') }}</b-form-checkbox> <b-form-checkbox v-model="editorData.days" value="4" class="mr-3">{{ translate('thu') }}</b-form-checkbox>
<b-form-checkbox v-model="editorData.days" value="4" class="mr-2">{{ translate('thu') }}</b-form-checkbox> <b-form-checkbox v-model="editorData.days" value="5" class="mr-3">{{ translate('fri') }}</b-form-checkbox>
<b-form-checkbox v-model="editorData.days" value="5" class="mr-2">{{ translate('fri') }}</b-form-checkbox> <b-form-checkbox v-model="editorData.days" value="6" class="mr-3">{{ translate('sat') }}</b-form-checkbox>
<b-form-checkbox v-model="editorData.days" value="6" class="mr-2">{{ translate('sat') }}</b-form-checkbox> <b-form-checkbox v-model="editorData.days" value="0" class="mr-3">{{ translate('sun') }}</b-form-checkbox>
<span class="mr-2">{{ translate('at') }}</span> <span class="mr-1">{{ translate('at') }}</span>
<b-form-timepicker :value="dateTime" :hour12="false" style="width: auto" @input="setDateTime" /> <b-form-timepicker :value="dateTime" :hour12="false" now-button style="width: auto" @input="setDateTime" />
</b-col> </b-col>
</b-row> </b-row>
</b-tab> </b-tab>
<b-tab :value="4" :title="translate('monthly')" class="monthly-tab"> <b-tab :value="4" :title="translate('monthly')" class="monthly-tab">
<b-row> <b-row>
<b-col class="d-flex align-items-center"> <b-col class="d-flex align-items-center">
<span class="mr-2">{{ translate('onThe') }}</span> <span class="mr-1">{{ translate('onThe') }}</span>
<b-form-input v-model="editorData.day" type="number" class="mr-2" style="width: 80px" /> <b-form-input v-model="editorData.day" type="number" min="1" max="31" class="mr-1" style="width: 80px" />
<span class="mr-2">{{ translate('dayOfEvery') }}</span> <span class="mr-1">{{ translate('dayOfEvery') }}</span>
<b-form-input v-model="editorData.monthInterval" type="number" class="mr-2" style="width: 80px" /> <b-form-input v-model="editorData.monthInterval" type="number" min="1" class="mr-1" style="width: 80px" />
<span class="mr-2">{{ translate('monthsAt') }}</span> <span class="mr-1">{{ translate('monthsAt') }}</span>
<b-form-timepicker :value="dateTime" :hour12="false" style="width: auto" @input="setDateTime" /> <b-form-timepicker :value="dateTime" :hour12="false" now-button style="width: auto" @input="setDateTime" />
</b-col> </b-col>
</b-row> </b-row>
</b-tab> </b-tab>
src/core/cronExpressions.ts
+18 -14
View File
@@ -60,13 +60,17 @@ export const buildExpression = (event: TabUpdatedEvent): string => {
} }
if (event.type === 'weekly') { if (event.type === 'weekly') {
return ( if ([0, 7].includes(event.days.length)) {
`${event.minutes} ${event.hours} * * ` + return `${event.minutes} ${event.hours} * * *`
`${event.days } else {
.filter(d => d) return (
.sort() `${event.minutes} ${event.hours} * * ` +
.join()}` `${event.days
) .filter(d => d)
.sort()
.join()}`
)
}
} }
if (event.type === 'monthly') { if (event.type === 'monthly') {
@@ -86,14 +90,14 @@ export const parseExpression = (expression: string): TabUpdatedEvent => {
if (expression!.split(' ').length != 5) { if (expression!.split(' ').length != 5) {
return { return {
type: 'advanced', type: 'advanced',
cronExpression: expression cronExpression: expression,
} }
} }
if ((groups = expression.match(/^\*\/(\d+) \* \* \* \*$/))) { if ((groups = expression.match(/^\*\/(\d+) \* \* \* \*$/))) {
return { return {
type: 'minutes', type: 'minutes',
minuteInterval: Number(groups[1]) minuteInterval: Number(groups[1]),
} }
} }
@@ -101,7 +105,7 @@ export const parseExpression = (expression: string): TabUpdatedEvent => {
return { return {
type: 'hourly', type: 'hourly',
minutes: Number(groups[1]), minutes: Number(groups[1]),
hourInterval: Number(groups[2]) hourInterval: Number(groups[2]),
} }
} }
@@ -110,7 +114,7 @@ export const parseExpression = (expression: string): TabUpdatedEvent => {
type: 'daily', type: 'daily',
minutes: Number(groups[1]), minutes: Number(groups[1]),
hours: Number(groups[2]), hours: Number(groups[2]),
dayInterval: Number(groups[3]) dayInterval: Number(groups[3]),
} }
} }
@@ -126,7 +130,7 @@ export const parseExpression = (expression: string): TabUpdatedEvent => {
.slice(optionalDaysBeginIndex, matchesEndIndex) .slice(optionalDaysBeginIndex, matchesEndIndex)
.map(d => d && d.replace(/,/, '')) .map(d => d && d.replace(/,/, ''))
.filter(d => d) .filter(d => d)
) ),
} }
} }
@@ -136,12 +140,12 @@ export const parseExpression = (expression: string): TabUpdatedEvent => {
minutes: Number(groups[1]), minutes: Number(groups[1]),
hours: Number(groups[2]), hours: Number(groups[2]),
day: Number(groups[3]), day: Number(groups[3]),
monthInterval: Number(groups[4]) monthInterval: Number(groups[4]),
} }
} }
return { return {
type: 'advanced', type: 'advanced',
cronExpression: expression cronExpression: expression,
} }
} }
src/core/i18n.ts
+11 -9
View File
@@ -8,7 +8,7 @@ export const defaultLocales: Record<string, Record<string, string>> = {
onThe: 'On the', onThe: 'On the',
dayOfEvery: 'day, of every', dayOfEvery: 'day, of every',
monthsAt: 'month(s), at', monthsAt: 'month(s), at',
everyDay: 'Every', // everyDay: 'Every',
mon: 'Mon', mon: 'Mon',
tue: 'Tue', tue: 'Tue',
wed: 'Wed', wed: 'Wed',
@@ -16,15 +16,16 @@ export const defaultLocales: Record<string, Record<string, string>> = {
fri: 'Fri', fri: 'Fri',
sat: 'Sat', sat: 'Sat',
sun: 'Sun', sun: 'Sun',
hasToBeBetween: 'Has to be between', // hasToBeBetween: 'Has to be between',
and: 'and', // and: 'and',
minutes: 'MINUTES', minutes: 'MINUTES',
hourly: 'HOURLY', hourly: 'HOURLY',
daily: 'DAILY', daily: 'DAILY',
weekly: 'WEEKLY', weekly: 'WEEKLY',
monthly: 'MONTHLY', monthly: 'MONTHLY',
advanced: 'ADVANCED', advanced: 'ADVANCED',
cronExpression: 'cron expression:' cronExpression: 'cron expression:',
onlyOn: 'Only on',
}, },
pl: { pl: {
every: 'Co', every: 'Co',
@@ -35,7 +36,7 @@ export const defaultLocales: Record<string, Record<string, string>> = {
onThe: '', onThe: '',
dayOfEvery: 'dzień miesiąca, co', dayOfEvery: 'dzień miesiąca, co',
monthsAt: 'miesięcy, o godzinie', monthsAt: 'miesięcy, o godzinie',
everyDay: 'W każdy', // everyDay: 'W każdy',
mon: 'Pon', mon: 'Pon',
tue: 'Wt', tue: 'Wt',
wed: 'Śr', wed: 'Śr',
@@ -43,16 +44,17 @@ export const defaultLocales: Record<string, Record<string, string>> = {
fri: 'Pt', fri: 'Pt',
sat: 'So', sat: 'So',
sun: 'Nie', sun: 'Nie',
hasToBeBetween: 'Wymagana wartość pomiędzy', // hasToBeBetween: 'Wymagana wartość pomiędzy',
and: 'i', // and: 'i',
minutes: 'Minuty', minutes: 'Minuty',
hourly: 'Godziny', hourly: 'Godziny',
daily: 'Dni', daily: 'Dni',
weekly: 'Tygodnie', weekly: 'Tygodnie',
monthly: 'Miesiące', monthly: 'Miesiące',
advanced: 'Zaawansowane', advanced: 'Zaawansowane',
cronExpression: 'Wyrażenie cron:' cronExpression: 'Wyrażenie cron:',
} onlyOn: 'Co',
},
} }
export function createI18n( export function createI18n(
vue.config.js
+5 -2
View File
@@ -1,4 +1,7 @@
const isBuildLib = (process.env.npm_lifecycle_script || '').indexOf('--target lib') > 0
module.exports = { module.exports = {
publicPath: '/vue-cron-editor-bootstrap', publicPath: '',
outputDir: isBuildLib ? 'dist' : 'demo',
css: { extract: false }, css: { extract: false },
}; }