mirrors/vue-cron-editor-bootstrap
2
0
Fork 0
mirror of https://github.com/tenrok/vue-cron-editor-bootstrap.git synced 2026-05-15 11:59:45 +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
/demo
/dist
.gitignore
+1
View File
@@ -22,4 +22,5 @@ yarn-error.log*
node_modules
# Output directories
/demo
/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
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
- Vue ^2.0
- Bootstrap-Vue ^2.14.0
- Vue ^2.0
- Bootstrap-Vue ^2.14.0
# 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
```
<template>
<VueCronEditorBootstrap v-model="cronExpression"/>
<VueCronEditorBootstrap v-model="cronExpression" />
{{cronExpression}}
</template>
<script>
import VueCronEditorBootstrap from 'vue-cron-editor-bootstrap';
import VueCronEditorBootstrap from '@tenrok/vue-cron-editor-bootstrap';
export default {
name: 'App',
components: {
VueCronEditorBootstrap
},
data: () => ({
data() {
return {
cronExpression: "*/1 * * * *"
}),
}
},
};
</script>
```
@@ -57,13 +57,13 @@ The language of the component can be selected with the `locale` prop.
<VueCronEditorBootstrap
v-model="expression"
locale="pl"
></VueCronEditorBootstrap>
/>
```
Currently supported languages:
- en
- pl
- en
- pl
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",
dayOfEvery: "day, of every",
monthsAt: "month(s), at",
everyDay: "Every",
mon: "Mon",
tue: "Tue",
wed: "Wed",
@@ -89,18 +88,17 @@ Custom locales can be provided via a `customLocales` prop:
fri: "Fri",
sat: "Sat",
sun: "Sun",
hasToBeBetween: "Has to be between",
and: "and",
minutes: "MINUTES",
hourly: "HOURLY",
daily: "DAILY",
weekly: "WEEKLY",
monthly: "MONTHLY",
advanced: "ADVANCED",
cronExpression: "cron expression:"
cronExpression: "cron expression:",
onlyOn: "Only on"
}
}"
></VueCronEditorBootstrap>
/>
```
# Contributing
package-lock.json
Generated
+6 -6
View File
@@ -11252,9 +11252,9 @@
"integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
},
"node_modules/webpack": {
"version": "5.74.0",
"resolved": "https://registry.npmjs.org/webpack/-/webpack-5.74.0.tgz",
"integrity": "sha512-A2InDwnhhGN4LYctJj6M1JEaGL7Luj6LOmyBHjcI8529cm5p6VXiTIW2sn6ffvEAKmveLzvu4jrihwXtPojlAA==",
"version": "5.75.0",
"resolved": "https://registry.npmjs.org/webpack/-/webpack-5.75.0.tgz",
"integrity": "sha512-piaIaoVJlqMsPtX/+3KTTO6jfvrSYgauFVdt8cr9LTHKmcq/AMd4mhzsiP7ZF/PGRNPGA8336jldh9l2Kt2ogQ==",
"dev": true,
"dependencies": {
"@types/eslint-scope": "^3.7.3",
@@ -20290,9 +20290,9 @@
"integrity": "sha512-2JAn3z8AR6rjK8Sm8orRC0h/bcl/DqL7tRPdGZ4I1CjdF+EaMLmYxBHyXuKL849eucPFhvBoxMsflfOb8kxaeQ=="
},
"webpack": {
"version": "5.74.0",
"resolved": "https://registry.npmjs.org/webpack/-/webpack-5.74.0.tgz",
"integrity": "sha512-A2InDwnhhGN4LYctJj6M1JEaGL7Luj6LOmyBHjcI8529cm5p6VXiTIW2sn6ffvEAKmveLzvu4jrihwXtPojlAA==",
"version": "5.75.0",
"resolved": "https://registry.npmjs.org/webpack/-/webpack-5.75.0.tgz",
"integrity": "sha512-piaIaoVJlqMsPtX/+3KTTO6jfvrSYgauFVdt8cr9LTHKmcq/AMd4mhzsiP7ZF/PGRNPGA8336jldh9l2Kt2ogQ==",
"dev": true,
"requires": {
"@types/eslint-scope": "^3.7.3",
package.json
+15 -11
View File
@@ -2,16 +2,26 @@
"name": "@tenrok/vue-cron-editor-bootstrap",
"version": "0.2.1",
"private": false,
"main": "dist/vueCronEditorBootstrap.umd.js",
"module": "dist/vueCronEditorBootstrap.esm.js",
"unpkg": "dist/vueCronEditorBootstrap.min.js",
"repository": {
"type": "git",
"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": {
"./sfc": "src/VueCronEditorBootstrap.vue"
},
"files": [
"dist/vue-cron-editor-bootstrap.*"
],
"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",
"serve": "vue-cli-service serve"
"serve": "vue-cli-service serve --open"
},
"dependencies": {
"core-js": "^3.26.0",
@@ -36,11 +46,5 @@
},
"peerDependencies": {
"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-row>
<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.minuteInterval"
type="number"
min="1"
max="59"
class="mr-2"
class="mr-1"
style="width: 80px"
/>
<span>{{ translate('mminutes') }}</span>
@@ -19,16 +19,16 @@
<b-tab :value="1" :title="translate('hourly')" class="hourly-tab">
<b-row>
<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.hourInterval"
type="number"
min="1"
max="24"
class="mr-2"
class="mr-1"
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-col>
</b-row>
@@ -36,38 +36,38 @@
<b-tab :value="2" :title="translate('daily')" class="daily-tab">
<b-row>
<b-col class="d-flex align-items-center">
<span class="mr-2">{{ translate('every') }}</span>
<b-form-input v-model="editorData.dayInterval" type="number" class="mr-2" style="width: 80px" />
<span class="mr-2">{{ translate('daysAt') }}</span>
<b-form-timepicker :value="dateTime" :hour12="false" style="width: auto" @input="setDateTime" />
<span class="mr-1">{{ translate('every') }}</span>
<b-form-input v-model="editorData.dayInterval" type="number" class="mr-1" style="width: 80px" />
<span class="mr-1">{{ translate('daysAt') }}</span>
<b-form-timepicker :value="dateTime" :hour12="false" now-button style="width: auto" @input="setDateTime" />
</b-col>
</b-row>
</b-tab>
<b-tab :value="3" :title="translate('weekly')" class="weekly-tab">
<b-row>
<b-col class="d-flex align-items-center">
<span class="mr-2">{{ translate('every') }}</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-2">{{ translate('mon') }}</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-2">{{ translate('wed') }}</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-2">{{ translate('fri') }}</b-form-checkbox>
<b-form-checkbox v-model="editorData.days" value="6" class="mr-2">{{ translate('sat') }}</b-form-checkbox>
<span class="mr-2">{{ translate('at') }}</span>
<b-form-timepicker :value="dateTime" :hour12="false" style="width: auto" @input="setDateTime" />
<span class="mr-3">{{ translate('onlyOn') }}</span>
<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="2" class="mr-3">{{ 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="4" class="mr-3">{{ 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="6" class="mr-3">{{ 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-1">{{ translate('at') }}</span>
<b-form-timepicker :value="dateTime" :hour12="false" now-button style="width: auto" @input="setDateTime" />
</b-col>
</b-row>
</b-tab>
<b-tab :value="4" :title="translate('monthly')" class="monthly-tab">
<b-row>
<b-col class="d-flex align-items-center">
<span class="mr-2">{{ translate('onThe') }}</span>
<b-form-input v-model="editorData.day" type="number" class="mr-2" style="width: 80px" />
<span class="mr-2">{{ translate('dayOfEvery') }}</span>
<b-form-input v-model="editorData.monthInterval" type="number" class="mr-2" style="width: 80px" />
<span class="mr-2">{{ translate('monthsAt') }}</span>
<b-form-timepicker :value="dateTime" :hour12="false" style="width: auto" @input="setDateTime" />
<span class="mr-1">{{ translate('onThe') }}</span>
<b-form-input v-model="editorData.day" type="number" min="1" max="31" class="mr-1" style="width: 80px" />
<span class="mr-1">{{ translate('dayOfEvery') }}</span>
<b-form-input v-model="editorData.monthInterval" type="number" min="1" class="mr-1" style="width: 80px" />
<span class="mr-1">{{ translate('monthsAt') }}</span>
<b-form-timepicker :value="dateTime" :hour12="false" now-button style="width: auto" @input="setDateTime" />
</b-col>
</b-row>
</b-tab>
src/core/cronExpressions.ts
+18 -14
View File
@@ -60,13 +60,17 @@ export const buildExpression = (event: TabUpdatedEvent): string => {
}
if (event.type === 'weekly') {
return (
`${event.minutes} ${event.hours} * * ` +
`${event.days
.filter(d => d)
.sort()
.join()}`
)
if ([0, 7].includes(event.days.length)) {
return `${event.minutes} ${event.hours} * * *`
} else {
return (
`${event.minutes} ${event.hours} * * ` +
`${event.days
.filter(d => d)
.sort()
.join()}`
)
}
}
if (event.type === 'monthly') {
@@ -86,14 +90,14 @@ export const parseExpression = (expression: string): TabUpdatedEvent => {
if (expression!.split(' ').length != 5) {
return {
type: 'advanced',
cronExpression: expression
cronExpression: expression,
}
}
if ((groups = expression.match(/^\*\/(\d+) \* \* \* \*$/))) {
return {
type: 'minutes',
minuteInterval: Number(groups[1])
minuteInterval: Number(groups[1]),
}
}
@@ -101,7 +105,7 @@ export const parseExpression = (expression: string): TabUpdatedEvent => {
return {
type: 'hourly',
minutes: Number(groups[1]),
hourInterval: Number(groups[2])
hourInterval: Number(groups[2]),
}
}
@@ -110,7 +114,7 @@ export const parseExpression = (expression: string): TabUpdatedEvent => {
type: 'daily',
minutes: Number(groups[1]),
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)
.map(d => d && d.replace(/,/, ''))
.filter(d => d)
)
),
}
}
@@ -136,12 +140,12 @@ export const parseExpression = (expression: string): TabUpdatedEvent => {
minutes: Number(groups[1]),
hours: Number(groups[2]),
day: Number(groups[3]),
monthInterval: Number(groups[4])
monthInterval: Number(groups[4]),
}
}
return {
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',
dayOfEvery: 'day, of every',
monthsAt: 'month(s), at',
everyDay: 'Every',
// everyDay: 'Every',
mon: 'Mon',
tue: 'Tue',
wed: 'Wed',
@@ -16,15 +16,16 @@ export const defaultLocales: Record<string, Record<string, string>> = {
fri: 'Fri',
sat: 'Sat',
sun: 'Sun',
hasToBeBetween: 'Has to be between',
and: 'and',
// hasToBeBetween: 'Has to be between',
// and: 'and',
minutes: 'MINUTES',
hourly: 'HOURLY',
daily: 'DAILY',
weekly: 'WEEKLY',
monthly: 'MONTHLY',
advanced: 'ADVANCED',
cronExpression: 'cron expression:'
cronExpression: 'cron expression:',
onlyOn: 'Only on',
},
pl: {
every: 'Co',
@@ -35,7 +36,7 @@ export const defaultLocales: Record<string, Record<string, string>> = {
onThe: '',
dayOfEvery: 'dzień miesiąca, co',
monthsAt: 'miesięcy, o godzinie',
everyDay: 'W każdy',
// everyDay: 'W każdy',
mon: 'Pon',
tue: 'Wt',
wed: 'Śr',
@@ -43,16 +44,17 @@ export const defaultLocales: Record<string, Record<string, string>> = {
fri: 'Pt',
sat: 'So',
sun: 'Nie',
hasToBeBetween: 'Wymagana wartość pomiędzy',
and: 'i',
// hasToBeBetween: 'Wymagana wartość pomiędzy',
// and: 'i',
minutes: 'Minuty',
hourly: 'Godziny',
daily: 'Dni',
weekly: 'Tygodnie',
monthly: 'Miesiące',
advanced: 'Zaawansowane',
cronExpression: 'Wyrażenie cron:'
}
cronExpression: 'Wyrażenie cron:',
onlyOn: 'Co',
},
}
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 = {
publicPath: '/vue-cron-editor-bootstrap',
publicPath: '',
outputDir: isBuildLib ? 'dist' : 'demo',
css: { extract: false },
};
}