mirror of
https://github.com/tenrok/vue-cron-editor-bootstrap.git
synced 2026-06-23 20:50:33 +03:00
refactoring
This commit is contained in:
+1
-1
@@ -1,3 +1,3 @@
|
|||||||
module.exports = {
|
module.exports = {
|
||||||
presets: ['@vue/cli-plugin-babel/preset']
|
presets: ['@vue/cli-plugin-babel/preset'],
|
||||||
}
|
}
|
||||||
|
|||||||
+1
-12
@@ -1,19 +1,8 @@
|
|||||||
# EditorConfig is awesome: https://EditorConfig.org
|
|
||||||
|
|
||||||
# top-most EditorConfig file
|
|
||||||
root = true
|
root = true
|
||||||
|
|
||||||
# Unix-style newlines with a newline ending every file
|
|
||||||
[*]
|
[*]
|
||||||
end_of_line = lf
|
end_of_line = lf
|
||||||
insert_final_newline = true
|
insert_final_newline = true
|
||||||
|
|
||||||
# Matches multiple files with brace expansion notation
|
|
||||||
# Set default charset
|
|
||||||
[*]
|
|
||||||
charset = utf-8
|
charset = utf-8
|
||||||
|
indent_style = tab
|
||||||
# Space indentation
|
|
||||||
[*]
|
|
||||||
indent_style = space
|
|
||||||
indent_size = 2
|
indent_size = 2
|
||||||
|
|||||||
+19
-22
@@ -1,25 +1,22 @@
|
|||||||
const isProd = process.env.NODE_ENV === 'production'
|
const isProduction = process.env.NODE_ENV === 'production'
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
root: true,
|
root: true,
|
||||||
env: {
|
env: {
|
||||||
node: true,
|
node: true,
|
||||||
},
|
},
|
||||||
parser: 'vue-eslint-parser',
|
parserOptions: {
|
||||||
parserOptions: {
|
parser: '@typescript-eslint/parser',
|
||||||
parser: '@typescript-eslint/parser',
|
ecmaVersion: 2020,
|
||||||
},
|
},
|
||||||
extends: [
|
extends: ['plugin:vue/recommended', 'eslint:recommended', '@vue/typescript/recommended', 'plugin:prettier/recommended'],
|
||||||
'plugin:vue/recommended',
|
rules: {
|
||||||
'plugin:@typescript-eslint/recommended', // Uses the recommended rules from the @typescript-eslint/eslint-plugin
|
curly: 'warn',
|
||||||
],
|
'no-console': isProduction ? 'error' : 'off',
|
||||||
rules: {
|
'no-debugger': isProduction ? 'error' : 'off',
|
||||||
curly: 'warn',
|
'vue/max-attributes-per-line': 'off',
|
||||||
'no-console': isProd ? 'error' : 'off',
|
'vue/singleline-html-element-content-newline': 'off',
|
||||||
'no-debugger': isProd ? 'error' : 'off',
|
'@typescript-eslint/no-explicit-any': 'off',
|
||||||
'vue/max-attributes-per-line': 'off',
|
'@typescript-eslint/no-non-null-assertion': 'off',
|
||||||
'vue/singleline-html-element-content-newline': 'off',
|
},
|
||||||
'@typescript-eslint/no-explicit-any': 'off',
|
|
||||||
'@typescript-eslint/no-non-null-assertion': 'off',
|
|
||||||
},
|
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -0,0 +1 @@
|
|||||||
|
* text=auto eol=lf
|
||||||
@@ -0,0 +1,31 @@
|
|||||||
|
name: Deploy to GH Pages
|
||||||
|
|
||||||
|
on:
|
||||||
|
push:
|
||||||
|
branches:
|
||||||
|
- main
|
||||||
|
|
||||||
|
jobs:
|
||||||
|
build-deploy:
|
||||||
|
runs-on: ubuntu-latest
|
||||||
|
|
||||||
|
steps:
|
||||||
|
- name: Checkout 🛎️
|
||||||
|
uses: actions/checkout@master
|
||||||
|
with:
|
||||||
|
persist-credentials: false
|
||||||
|
|
||||||
|
- name: Install 🔧
|
||||||
|
run: npm install
|
||||||
|
|
||||||
|
- name: Build 🏗️
|
||||||
|
run: npm run demo:build
|
||||||
|
env:
|
||||||
|
NODE_ENV: production
|
||||||
|
|
||||||
|
- name: Deploy to GH Pages 🚀
|
||||||
|
if: ${{ github.event_name != 'pull_request' }}
|
||||||
|
uses: peaceiris/actions-gh-pages@v3
|
||||||
|
with:
|
||||||
|
github_token: ${{ secrets.GITHUB_TOKEN }}
|
||||||
|
publish_dir: demo
|
||||||
@@ -1,29 +0,0 @@
|
|||||||
name: Node.js Package
|
|
||||||
|
|
||||||
on:
|
|
||||||
release:
|
|
||||||
types: [created]
|
|
||||||
|
|
||||||
jobs:
|
|
||||||
build:
|
|
||||||
runs-on: ubuntu-latest
|
|
||||||
steps:
|
|
||||||
- uses: actions/checkout@v2
|
|
||||||
- uses: actions/setup-node@v1
|
|
||||||
with:
|
|
||||||
node-version: 12
|
|
||||||
- run: npm ci
|
|
||||||
|
|
||||||
publish-npm:
|
|
||||||
needs: build
|
|
||||||
runs-on: ubuntu-latest
|
|
||||||
steps:
|
|
||||||
- uses: actions/checkout@v2
|
|
||||||
- uses: actions/setup-node@v1
|
|
||||||
with:
|
|
||||||
node-version: 12
|
|
||||||
registry-url: https://registry.npmjs.org/
|
|
||||||
- run: npm ci
|
|
||||||
- run: npm publish
|
|
||||||
env:
|
|
||||||
NODE_AUTH_TOKEN: ${{secrets.npm_token}}
|
|
||||||
+11
-20
@@ -1,26 +1,17 @@
|
|||||||
.DS_Store
|
### VisualStudioCode ###
|
||||||
|
.vscode/*
|
||||||
|
!.vscode/settings.json
|
||||||
|
!.vscode/tasks.json
|
||||||
|
!.vscode/launch.json
|
||||||
|
!.vscode/extensions.json
|
||||||
|
|
||||||
# local env files
|
### VisualStudioCode Patch ###
|
||||||
.env.local
|
# Ignore all local history of files
|
||||||
.env.*.local
|
**/.history
|
||||||
|
|
||||||
# Log files
|
|
||||||
npm-debug.log*
|
|
||||||
yarn-debug.log*
|
|
||||||
yarn-error.log*
|
|
||||||
|
|
||||||
# Editor directories and files
|
|
||||||
.idea
|
|
||||||
.vscode
|
|
||||||
*.suo
|
|
||||||
*.ntvs*
|
|
||||||
*.njsproj
|
|
||||||
*.sln
|
|
||||||
*.sw?
|
|
||||||
|
|
||||||
# npm
|
# npm
|
||||||
node_modules
|
node_modules
|
||||||
|
|
||||||
# Output directories
|
# Output directories
|
||||||
/demo
|
/demo/
|
||||||
/dist
|
/dist/
|
||||||
|
|||||||
@@ -0,0 +1,2 @@
|
|||||||
|
registry=https://registry.npmjs.org/
|
||||||
|
@tenrok:registry=https://registry.npmjs.org/
|
||||||
+5
-4
@@ -1,8 +1,9 @@
|
|||||||
// https://prettier.io/docs/en/options.html
|
// https://prettier.io/docs/en/options.html
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
arrowParens: 'avoid', // Include parentheses around a sole arrow function parameter
|
arrowParens: 'avoid',
|
||||||
printWidth: 120, // Specify the line length that the printer will wrap on
|
printWidth: 140,
|
||||||
semi: false, // Print semicolons at the ends of statements
|
semi: false,
|
||||||
singleQuote: true // Use single quotes instead of double quotes
|
singleQuote: true,
|
||||||
|
useTabs: true,
|
||||||
}
|
}
|
||||||
|
|||||||
Vendored
+3
@@ -0,0 +1,3 @@
|
|||||||
|
{
|
||||||
|
"recommendations": ["editorconfig.editorconfig", "esbenp.prettier-vscode"]
|
||||||
|
}
|
||||||
Vendored
+9
@@ -0,0 +1,9 @@
|
|||||||
|
{
|
||||||
|
"editor.fontFamily": "'Fira Code', Consolas, 'Courier New', monospace",
|
||||||
|
"editor.fontLigatures": true,
|
||||||
|
"editor.fontWeight": "400",
|
||||||
|
"editor.foldingStrategy": "indentation",
|
||||||
|
"editor.formatOnSave": true,
|
||||||
|
"editor.rulers": [140],
|
||||||
|
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||||
|
}
|
||||||
@@ -1,63 +0,0 @@
|
|||||||
# Changelog
|
|
||||||
|
|
||||||
All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
|
|
||||||
|
|
||||||
### [0.2.8](https://github.com/karoletrych/vue-cron-editor/compare/v0.2.7...v0.2.8) (2020-04-22)
|
|
||||||
|
|
||||||
|
|
||||||
### Features
|
|
||||||
|
|
||||||
* add explaining of advanced expressions, move i18n to mixin ([0560d1f](https://github.com/karoletrych/vue-cron-editor/commit/0560d1f6dd391d088262626f554108c53a78e60a))
|
|
||||||
|
|
||||||
### [0.2.7](https://github.com/karoletrych/vue-cron-editor/compare/v0.2.6...v0.2.7) (2020-04-14)
|
|
||||||
|
|
||||||
|
|
||||||
### Bug Fixes
|
|
||||||
|
|
||||||
* preserve state on first switch of tab ([8b0371d](https://github.com/karoletrych/vue-cron-editor/commit/8b0371d692cf80ccea4e61b2c448b2fd01b8fb28))
|
|
||||||
|
|
||||||
### [0.2.6](https://github.com/karoletrych/vue-cron-editor/compare/v0.2.4...v0.2.6) (2020-04-14)
|
|
||||||
|
|
||||||
|
|
||||||
### Features
|
|
||||||
|
|
||||||
* preserve state on switch to advanced ([755edeb](https://github.com/karoletrych/vue-cron-editor/commit/755edebb715708ebfe41156443c5ff208f740ae0))
|
|
||||||
|
|
||||||
|
|
||||||
### Bug Fixes
|
|
||||||
|
|
||||||
* error on all days checked ([#33](https://github.com/karoletrych/vue-cron-editor/issues/33)) ([e13deeb](https://github.com/karoletrych/vue-cron-editor/commit/e13deebb2485df3cc1d64031398e6fb6593b53ae))
|
|
||||||
|
|
||||||
### [0.2.5](https://github.com/karoletrych/vue-cron-editor/compare/v0.2.4...v0.2.5) (2020-04-12)
|
|
||||||
|
|
||||||
### [0.2.4](https://github.com/karoletrych/vue-cron-editor/compare/v0.2.2...v0.2.4) (2020-04-12)
|
|
||||||
|
|
||||||
|
|
||||||
### Bug Fixes
|
|
||||||
|
|
||||||
* reopening expressions ([#32](https://github.com/karoletrych/vue-cron-editor/issues/32)) ([bdf7c61](https://github.com/karoletrych/vue-cron-editor/commit/bdf7c61fac2b94ee610057f2dd8fa922d3f6fa28))
|
|
||||||
|
|
||||||
### [0.2.3](https://github.com/karoletrych/vue-cron-editor/compare/v0.2.2...v0.2.3) (2020-04-12)
|
|
||||||
|
|
||||||
|
|
||||||
### Bug Fixes
|
|
||||||
|
|
||||||
* reopening expressions ([#32](https://github.com/karoletrych/vue-cron-editor/issues/32)) ([bdf7c61](https://github.com/karoletrych/vue-cron-editor/commit/bdf7c61fac2b94ee610057f2dd8fa922d3f6fa28))
|
|
||||||
|
|
||||||
### [0.2.2](https://github.com/karoletrych/vue-cron-editor/compare/v0.2.0...v0.2.2) (2020-04-12)
|
|
||||||
|
|
||||||
### [0.2.1](https://github.com/karoletrych/vue-cron-editor/compare/v0.2.0...v0.2.1) (2020-04-12)
|
|
||||||
|
|
||||||
## [0.2.0](https://github.com/karoletrych/vue-cron-editor/compare/v0.1.15...v0.2.0) (2020-04-12)
|
|
||||||
|
|
||||||
### [0.1.16](https://github.com/karoletrych/vue-cron-editor/compare/v0.1.15...v0.1.16) (2020-04-12)
|
|
||||||
|
|
||||||
### [0.1.15](https://github.com/karoletrych/vue-cron-editor/compare/v0.1.14...v0.1.15) (2020-04-02)
|
|
||||||
|
|
||||||
### [0.1.14](https://github.com/karoletrych/vue-cron-editor/compare/v0.1.13...v0.1.14) (2020-04-02)
|
|
||||||
|
|
||||||
### [0.1.13](https://github.com/karoletrych/vue-cron-editor/compare/v0.1.11...v0.1.13) (2020-03-16)
|
|
||||||
|
|
||||||
### [0.1.2](https://github.com/karoletrych/vue-cron-editor/compare/v0.1.11...v0.1.2) (2020-03-16)
|
|
||||||
|
|
||||||
### [0.1.1](https://github.com/karoletrych/vue-cron-editor/compare/v0.1.11...v0.1.1) (2020-01-22)
|
|
||||||
@@ -1,6 +1,6 @@
|
|||||||
MIT License
|
MIT License
|
||||||
|
|
||||||
Copyright (c) 2020 Karol Etrych
|
Copyright (c) 2023 Sergey Solodyagin
|
||||||
|
|
||||||
Permission is hereby granted, free of charge, to any person obtaining a copy
|
Permission is hereby granted, free of charge, to any person obtaining a copy
|
||||||
of this software and associated documentation files (the "Software"), to deal
|
of this software and associated documentation files (the "Software"), to deal
|
||||||
|
|||||||
@@ -1,20 +1,22 @@
|
|||||||
# vue-cron-editor-bootstrap
|
# vue-cron-editor-bootstrap
|
||||||
|
|
||||||
|
[](https://www.npmjs.com/package/@tenrok/vue-cron-editor-bootstrap)
|
||||||
|
[](https://github.com/tenrok/vue-cron-editor-bootstrap/blob/main/LICENSE)
|
||||||
|
[](https://github.com/vuejs/vue)
|
||||||
|
[](https://github.com/tenrok/vue-cron-editor-bootstrap)
|
||||||
|
[](https://npmcharts.com/compare/@tenrok/vue-cron-editor-bootstrap?minimal=true)
|
||||||
|
[](https://tenrok.github.io/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.
|
||||||
Inspired by https://github.com/karoletrych/vue-cron-editor
|
Inspired by https://github.com/karoletrych/vue-cron-editor
|
||||||
|
|
||||||
# Demo
|
|
||||||
[vue-cron-editor-bootstrap.vercel.app](https://vue-cron-editor-bootstrap.vercel.app/)
|
|
||||||
|
|
||||||
# Requirements
|
# Requirements
|
||||||
|
|
||||||
- Vue ^2.0
|
- Vue ^2.0
|
||||||
- Bootstrap-Vue ^2.14.0
|
- @tenrok/bootstrap-vue ^2.23.2
|
||||||
|
|
||||||
# Installation
|
# Installation
|
||||||
|
|
||||||
- vue-cron-editor-bootstrap
|
|
||||||
|
|
||||||
```
|
```
|
||||||
npm install @tenrok/vue-cron-editor-bootstrap --save
|
npm install @tenrok/vue-cron-editor-bootstrap --save
|
||||||
```
|
```
|
||||||
|
|||||||
@@ -0,0 +1,137 @@
|
|||||||
|
<template>
|
||||||
|
<b-tabs v-model="activeTabIndex" content-class="p-2" @input="reset">
|
||||||
|
<b-tab :value="0" :title="translate('minutes')" class="minutes-tab">
|
||||||
|
<b-row>
|
||||||
|
<b-col class="d-flex align-items-center">
|
||||||
|
<span class="mr-1">{{ translate('every') }}</span>
|
||||||
|
<b-form-input v-model="editorData.minuteInterval" type="number" min="1" max="59" class="mr-1" style="width: 80px" />
|
||||||
|
<span>{{ translate('mminutes') }}</span>
|
||||||
|
</b-col>
|
||||||
|
</b-row>
|
||||||
|
</b-tab>
|
||||||
|
<b-tab :value="1" :title="translate('hourly')" class="hourly-tab">
|
||||||
|
<b-row>
|
||||||
|
<b-col class="d-flex align-items-center">
|
||||||
|
<span class="mr-1">{{ translate('every') }}</span>
|
||||||
|
<b-form-input v-model="editorData.hourInterval" type="number" min="1" max="24" class="mr-1" style="width: 80px" />
|
||||||
|
<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>
|
||||||
|
</b-tab>
|
||||||
|
<b-tab :value="2" :title="translate('daily')" class="daily-tab">
|
||||||
|
<b-row>
|
||||||
|
<b-col class="d-flex align-items-center">
|
||||||
|
<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-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-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>
|
||||||
|
<b-tab :value="5" :title="translate('advanced')" class="advanced-tab">
|
||||||
|
<b-row>
|
||||||
|
<b-col class="d-flex" style="align-items: center">
|
||||||
|
<span class="mr-2">{{ translate('cronExpression') }}</span>
|
||||||
|
<b-form-input v-model="editorData.cronExpression" class="mr-2" style="width: auto" />
|
||||||
|
<span>{{ explanation }}</span>
|
||||||
|
</b-col>
|
||||||
|
</b-row>
|
||||||
|
</b-tab>
|
||||||
|
</b-tabs>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
import vueCronEditorMixin from '../core/vueCronEditorMixin'
|
||||||
|
import { BTabs, BTab, BRow, BCol, BFormCheckbox, BFormInput, BFormTimepicker } from '@tenrok/bootstrap-vue'
|
||||||
|
|
||||||
|
export default {
|
||||||
|
name: 'VueCronEditorBootstrap',
|
||||||
|
|
||||||
|
components: {
|
||||||
|
BTabs,
|
||||||
|
BTab,
|
||||||
|
BRow,
|
||||||
|
BCol,
|
||||||
|
BFormCheckbox,
|
||||||
|
BFormInput,
|
||||||
|
BFormTimepicker,
|
||||||
|
},
|
||||||
|
|
||||||
|
mixins: [vueCronEditorMixin],
|
||||||
|
|
||||||
|
data: () => ({
|
||||||
|
activeTabIndex: null,
|
||||||
|
tabs: [
|
||||||
|
{ idx: 0, key: 'minutes' },
|
||||||
|
{ idx: 1, key: 'hourly' },
|
||||||
|
{ idx: 2, key: 'daily' },
|
||||||
|
{ idx: 3, key: 'weekly' },
|
||||||
|
{ idx: 4, key: 'monthly' },
|
||||||
|
{ idx: 5, key: 'advanced' },
|
||||||
|
],
|
||||||
|
}),
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
dateTime() {
|
||||||
|
return `${this.editorData.hours}:${this.editorData.minutes}:00`
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
currentTab() {
|
||||||
|
this.activeTabIndex = this.tabs.find(t => t.key === this.currentTab).idx
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
this.activeTabIndex = this.tabs.find(t => t.key === this.currentTab).idx
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
reset(tabIndex) {
|
||||||
|
const tab = this.tabs.find(t => t.idx === tabIndex)
|
||||||
|
if (tab) {
|
||||||
|
this.resetToTab(tab.key)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
setDateTime(time) {
|
||||||
|
if (time == null) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
const splittedTime = time.split(':')
|
||||||
|
this.editorData.hours = splittedTime[0]
|
||||||
|
this.editorData.minutes = splittedTime[1]
|
||||||
|
},
|
||||||
|
},
|
||||||
|
}
|
||||||
|
</script>
|
||||||
@@ -0,0 +1,151 @@
|
|||||||
|
interface MinutesTabUpdatedEvent {
|
||||||
|
type: 'minutes'
|
||||||
|
minuteInterval: number
|
||||||
|
}
|
||||||
|
|
||||||
|
interface HourlyTabUpdatedEvent {
|
||||||
|
type: 'hourly'
|
||||||
|
minutes: number
|
||||||
|
hourInterval: number
|
||||||
|
}
|
||||||
|
|
||||||
|
interface DailyTabUpdatedEvent {
|
||||||
|
type: 'daily'
|
||||||
|
minutes: number
|
||||||
|
hours: number
|
||||||
|
dayInterval: number
|
||||||
|
}
|
||||||
|
|
||||||
|
interface WeeklyTabUpdatedEvent {
|
||||||
|
type: 'weekly'
|
||||||
|
minutes: number
|
||||||
|
hours: number
|
||||||
|
days: string[]
|
||||||
|
}
|
||||||
|
|
||||||
|
interface MonthlyTabUpdatedEvent {
|
||||||
|
type: 'monthly'
|
||||||
|
minutes: number
|
||||||
|
hours: number
|
||||||
|
day: number
|
||||||
|
monthInterval: number
|
||||||
|
}
|
||||||
|
|
||||||
|
interface AdvancedTabUpdatedEvent {
|
||||||
|
type: 'advanced'
|
||||||
|
cronExpression: string
|
||||||
|
}
|
||||||
|
|
||||||
|
export type TabUpdatedEvent =
|
||||||
|
| MinutesTabUpdatedEvent
|
||||||
|
| HourlyTabUpdatedEvent
|
||||||
|
| DailyTabUpdatedEvent
|
||||||
|
| WeeklyTabUpdatedEvent
|
||||||
|
| MonthlyTabUpdatedEvent
|
||||||
|
| AdvancedTabUpdatedEvent
|
||||||
|
|
||||||
|
export type TabKey = TabUpdatedEvent[keyof TabUpdatedEvent]
|
||||||
|
|
||||||
|
export const buildExpression = (event: TabUpdatedEvent): string => {
|
||||||
|
if (event.type === 'minutes') {
|
||||||
|
return `*/${event.minuteInterval} * * * *`
|
||||||
|
}
|
||||||
|
|
||||||
|
if (event.type === 'hourly') {
|
||||||
|
return `${event.minutes} */${event.hourInterval} * * *`
|
||||||
|
}
|
||||||
|
|
||||||
|
if (event.type === 'daily') {
|
||||||
|
return `${event.minutes} ${event.hours} */${event.dayInterval} * *`
|
||||||
|
}
|
||||||
|
|
||||||
|
if (event.type === 'weekly') {
|
||||||
|
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') {
|
||||||
|
return `${event.minutes} ${event.hours} ${event.day} */${event.monthInterval} *`
|
||||||
|
}
|
||||||
|
|
||||||
|
if (event.type === 'advanced') {
|
||||||
|
return event.cronExpression
|
||||||
|
}
|
||||||
|
|
||||||
|
throw `unknown event type: ${event}`
|
||||||
|
}
|
||||||
|
|
||||||
|
export const parseExpression = (expression: string): TabUpdatedEvent => {
|
||||||
|
let groups = null
|
||||||
|
|
||||||
|
if (expression!.split(' ').length != 5) {
|
||||||
|
return {
|
||||||
|
type: 'advanced',
|
||||||
|
cronExpression: expression,
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if ((groups = expression.match(/^\*\/(\d+) \* \* \* \*$/))) {
|
||||||
|
return {
|
||||||
|
type: 'minutes',
|
||||||
|
minuteInterval: Number(groups[1]),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if ((groups = expression.match(/^(\d+) \*\/(\d+) \* \* \*$/))) {
|
||||||
|
return {
|
||||||
|
type: 'hourly',
|
||||||
|
minutes: Number(groups[1]),
|
||||||
|
hourInterval: Number(groups[2]),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if ((groups = expression.match(/^(\d+) (\d+) \*\/(\d+) \* \*$/))) {
|
||||||
|
return {
|
||||||
|
type: 'daily',
|
||||||
|
minutes: Number(groups[1]),
|
||||||
|
hours: Number(groups[2]),
|
||||||
|
dayInterval: Number(groups[3]),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if ((groups = expression.match(/^(\d+) (\d+) \* \* (\d)(,\d)?(,\d)?(,\d)?(,\d)?(,\d)?(,\d)?$/))) {
|
||||||
|
const optionalDaysBeginIndex = 4
|
||||||
|
const matchesEndIndex = 10
|
||||||
|
return {
|
||||||
|
type: 'weekly',
|
||||||
|
minutes: Number(groups[1]),
|
||||||
|
hours: Number(groups[2]),
|
||||||
|
days: [groups[3]].concat(
|
||||||
|
groups
|
||||||
|
.slice(optionalDaysBeginIndex, matchesEndIndex)
|
||||||
|
.map(d => d && d.replace(/,/, ''))
|
||||||
|
.filter(d => d)
|
||||||
|
),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
if ((groups = expression.match(/^(\d+) (\d+) (\d+) \*\/(\d+) \*$/))) {
|
||||||
|
return {
|
||||||
|
type: 'monthly',
|
||||||
|
minutes: Number(groups[1]),
|
||||||
|
hours: Number(groups[2]),
|
||||||
|
day: Number(groups[3]),
|
||||||
|
monthInterval: Number(groups[4]),
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
return {
|
||||||
|
type: 'advanced',
|
||||||
|
cronExpression: expression,
|
||||||
|
}
|
||||||
|
}
|
||||||
@@ -0,0 +1,63 @@
|
|||||||
|
export const defaultLocales: Record<string, Record<string, string>> = {
|
||||||
|
en: {
|
||||||
|
every: 'Every',
|
||||||
|
mminutes: 'minute(s)',
|
||||||
|
hoursOnMinute: 'hour(s) on minute',
|
||||||
|
daysAt: 'day(s) at',
|
||||||
|
at: 'at',
|
||||||
|
onThe: 'On the',
|
||||||
|
dayOfEvery: 'day, of every',
|
||||||
|
monthsAt: 'month(s), at',
|
||||||
|
// everyDay: 'Every',
|
||||||
|
mon: 'Mon',
|
||||||
|
tue: 'Tue',
|
||||||
|
wed: 'Wed',
|
||||||
|
thu: 'Thu',
|
||||||
|
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:',
|
||||||
|
onlyOn: 'Only on',
|
||||||
|
},
|
||||||
|
pl: {
|
||||||
|
every: 'Co',
|
||||||
|
mminutes: 'minut',
|
||||||
|
hoursOnMinute: 'godzin w minucie',
|
||||||
|
daysAt: 'dni o',
|
||||||
|
at: 'o',
|
||||||
|
onThe: '',
|
||||||
|
dayOfEvery: 'dzień miesiąca, co',
|
||||||
|
monthsAt: 'miesięcy, o godzinie',
|
||||||
|
// everyDay: 'W każdy',
|
||||||
|
mon: 'Pon',
|
||||||
|
tue: 'Wt',
|
||||||
|
wed: 'Śr',
|
||||||
|
thu: 'Czw',
|
||||||
|
fri: 'Pt',
|
||||||
|
sat: 'So',
|
||||||
|
sun: 'Nie',
|
||||||
|
// hasToBeBetween: 'Wymagana wartość pomiędzy',
|
||||||
|
// and: 'i',
|
||||||
|
minutes: 'Minuty',
|
||||||
|
hourly: 'Godziny',
|
||||||
|
daily: 'Dni',
|
||||||
|
weekly: 'Tygodnie',
|
||||||
|
monthly: 'Miesiące',
|
||||||
|
advanced: 'Zaawansowane',
|
||||||
|
cronExpression: 'Wyrażenie cron:',
|
||||||
|
onlyOn: 'Co',
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
export function createI18n(customLocales: Record<string, Record<string, string>>, locale: string): Record<string, string> {
|
||||||
|
const allLocales = { ...defaultLocales, ...customLocales }
|
||||||
|
return allLocales[locale]
|
||||||
|
}
|
||||||
@@ -0,0 +1,154 @@
|
|||||||
|
/**
|
||||||
|
* vueCronEditorMixin
|
||||||
|
* Core logic of a component.
|
||||||
|
* Functionality dependent on UI frameworks should be implemented in derived components
|
||||||
|
*/
|
||||||
|
|
||||||
|
import { buildExpression, parseExpression, TabUpdatedEvent, TabKey } from './cronExpressions'
|
||||||
|
import * as cronValidator from 'cron-validator'
|
||||||
|
import * as cronstrue from 'cronstrue/i18n'
|
||||||
|
import { createI18n } from './i18n'
|
||||||
|
|
||||||
|
import Vue from 'vue'
|
||||||
|
|
||||||
|
const initialData: Record<TabKey, TabUpdatedEvent> = {
|
||||||
|
minutes: {
|
||||||
|
type: 'minutes',
|
||||||
|
minuteInterval: 1,
|
||||||
|
},
|
||||||
|
hourly: {
|
||||||
|
type: 'hourly',
|
||||||
|
minutes: 0,
|
||||||
|
hourInterval: 1,
|
||||||
|
},
|
||||||
|
daily: {
|
||||||
|
type: 'daily',
|
||||||
|
minutes: 0,
|
||||||
|
hours: 0,
|
||||||
|
dayInterval: 1,
|
||||||
|
},
|
||||||
|
weekly: {
|
||||||
|
type: 'weekly',
|
||||||
|
minutes: 0,
|
||||||
|
hours: 0,
|
||||||
|
days: ['1'],
|
||||||
|
},
|
||||||
|
monthly: {
|
||||||
|
type: 'monthly',
|
||||||
|
hours: 0,
|
||||||
|
minutes: 0,
|
||||||
|
day: 1,
|
||||||
|
monthInterval: 1,
|
||||||
|
},
|
||||||
|
advanced: {
|
||||||
|
type: 'advanced',
|
||||||
|
cronExpression: '',
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
interface ComponentData {
|
||||||
|
editorData: any
|
||||||
|
currentTab: TabKey
|
||||||
|
innerValue: string | null
|
||||||
|
i18n: Record<string, string> | null
|
||||||
|
}
|
||||||
|
|
||||||
|
export default Vue.extend({
|
||||||
|
props: {
|
||||||
|
value: { type: String, default: '*/1 * * * *' },
|
||||||
|
isAdvancedTabVisible: { type: Boolean, default: true },
|
||||||
|
preserveStateOnSwitchToAdvanced: { type: Boolean, default: false },
|
||||||
|
locale: { type: String, default: 'en' },
|
||||||
|
customLocales: { type: Object, default: null },
|
||||||
|
},
|
||||||
|
|
||||||
|
data() {
|
||||||
|
return <ComponentData>{
|
||||||
|
innerValue: '*/1 * * * *',
|
||||||
|
editorData: Object.assign({}, initialData.minutes),
|
||||||
|
currentTab: 'minutes',
|
||||||
|
i18n: null,
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
computed: {
|
||||||
|
explanation(): string {
|
||||||
|
if (!this.innerValue) {
|
||||||
|
return ''
|
||||||
|
}
|
||||||
|
|
||||||
|
return (cronstrue as any).toString(this.innerValue, {
|
||||||
|
locale: this.locale,
|
||||||
|
})
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
watch: {
|
||||||
|
value: {
|
||||||
|
handler() {
|
||||||
|
if (this.value == this.innerValue) {
|
||||||
|
return
|
||||||
|
}
|
||||||
|
this.loadDataFromExpression()
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
editorData: {
|
||||||
|
deep: true,
|
||||||
|
handler(changedData) {
|
||||||
|
this.updateCronExpression(changedData)
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
|
||||||
|
created() {
|
||||||
|
this.i18n = createI18n(this.customLocales, this.locale)
|
||||||
|
this.innerValue = this.value
|
||||||
|
this.loadDataFromExpression()
|
||||||
|
},
|
||||||
|
|
||||||
|
methods: {
|
||||||
|
translate(key: string) {
|
||||||
|
return this.i18n![key]
|
||||||
|
},
|
||||||
|
|
||||||
|
loadDataFromExpression() {
|
||||||
|
const tabData = parseExpression(this.value)
|
||||||
|
this.editorData = { ...tabData }
|
||||||
|
this.currentTab = tabData.type
|
||||||
|
},
|
||||||
|
|
||||||
|
updateCronExpression(event: TabUpdatedEvent) {
|
||||||
|
const cronExpression = buildExpression({ ...event })
|
||||||
|
|
||||||
|
if (cronValidator.isValidCron(cronExpression)) {
|
||||||
|
this.innerValue = cronExpression
|
||||||
|
this.$emit('input', cronExpression)
|
||||||
|
} else {
|
||||||
|
this.innerValue = null
|
||||||
|
this.$emit('input', null)
|
||||||
|
}
|
||||||
|
},
|
||||||
|
|
||||||
|
resetToTab(tabKey: TabKey) {
|
||||||
|
this.currentTab = tabKey
|
||||||
|
|
||||||
|
if (this.preserveStateOnSwitchToAdvanced && tabKey === 'advanced') {
|
||||||
|
this.editorData = {
|
||||||
|
type: 'advanced',
|
||||||
|
cronExpression: this.innerValue,
|
||||||
|
}
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
const tabData = parseExpression(this.value)
|
||||||
|
if (tabKey == tabData.type) {
|
||||||
|
this.editorData = Object.assign({}, tabData)
|
||||||
|
return
|
||||||
|
}
|
||||||
|
|
||||||
|
this.editorData = Object.assign({}, initialData[tabKey])
|
||||||
|
this.updateCronExpression(initialData[tabKey])
|
||||||
|
},
|
||||||
|
},
|
||||||
|
})
|
||||||
@@ -0,0 +1,18 @@
|
|||||||
|
import _Vue from 'vue'
|
||||||
|
import VueCronEditorBootstrap from './components/VueCronEditorBootstrap.vue'
|
||||||
|
|
||||||
|
const components = [VueCronEditorBootstrap]
|
||||||
|
|
||||||
|
class CronEditorPluginOptions {}
|
||||||
|
|
||||||
|
type CronEditorPlugin = {
|
||||||
|
install(vue: typeof _Vue, options?: CronEditorPluginOptions): void
|
||||||
|
}
|
||||||
|
|
||||||
|
const instance: CronEditorPlugin = {
|
||||||
|
install(vue) {
|
||||||
|
components.forEach(component => vue.component(component.name, component))
|
||||||
|
},
|
||||||
|
}
|
||||||
|
|
||||||
|
export default instance
|
||||||
Generated
+20127
-20841
File diff suppressed because it is too large
Load Diff
+57
-48
@@ -1,50 +1,59 @@
|
|||||||
{
|
{
|
||||||
"name": "@tenrok/vue-cron-editor-bootstrap",
|
"name": "@tenrok/vue-cron-editor-bootstrap",
|
||||||
"version": "0.2.1",
|
"version": "0.2.2",
|
||||||
"private": false,
|
"homepage": "https://github.com/tenrok/vue-cron-editor-bootstrap",
|
||||||
"repository": {
|
"bugs": {
|
||||||
"type": "git",
|
"url": "https://github.com/tenrok/vue-cron-editor-bootstrap/issues"
|
||||||
"url": "git+https://github.com/alexmfreitas/vue-cron-editor-bootstrap.git"
|
},
|
||||||
},
|
"repository": {
|
||||||
"license": "MIT",
|
"type": "git",
|
||||||
"author": "alexmfreitas",
|
"url": "git+https://github.com/tenrok/vue-cron-editor-bootstrap.git"
|
||||||
"main": "dist/vue-cron-editor-bootstrap.umd.js",
|
},
|
||||||
"unpkg": "dist/vue-cron-editor-bootstrap.min.js",
|
"license": "MIT",
|
||||||
"module": "dist/vue-cron-editor-bootstrap.esm.js",
|
"author": {
|
||||||
"browser": {
|
"name": "alexmfreitas",
|
||||||
"./sfc": "src/VueCronEditorBootstrap.vue"
|
"url": "https://github.com/alexmfreitas"
|
||||||
},
|
},
|
||||||
"files": [
|
"contributors": [
|
||||||
"dist/vue-cron-editor-bootstrap.*"
|
{
|
||||||
],
|
"name": "Sergey Solodyagin",
|
||||||
"scripts": {
|
"url": "https://github.com/solodyagin"
|
||||||
"build": "vue-cli-service build --target lib src/VueCronEditorBootstrap.vue",
|
}
|
||||||
"build:demo": "vue-cli-service build",
|
],
|
||||||
"lint": "vue-cli-service lint --fix",
|
"main": "dist/vue-cron-editor-bootstrap.common.js",
|
||||||
"serve": "vue-cli-service serve --open"
|
"files": [
|
||||||
},
|
"dist/vue-cron-editor-bootstrap.*"
|
||||||
"dependencies": {
|
],
|
||||||
"core-js": "^3.26.0",
|
"scripts": {
|
||||||
"cron-validator": "^1.3.1",
|
"build": "vue-cli-service build --target lib --name vue-cron-editor-bootstrap lib/index.ts",
|
||||||
"cronstrue": "^2.14.0",
|
"demo:build": "vue-cli-service build",
|
||||||
"vue": "^2.7.14"
|
"lint": "vue-cli-service lint --fix",
|
||||||
},
|
"serve": "vue-cli-service serve --open"
|
||||||
"devDependencies": {
|
},
|
||||||
"@typescript-eslint/eslint-plugin": "^5.42.1",
|
"dependencies": {
|
||||||
"@typescript-eslint/parser": "^5.42.1",
|
"bootstrap": "^4.6.0",
|
||||||
"@vue/cli-plugin-babel": "^5.0.8",
|
"core-js": "^3.29.0",
|
||||||
"@vue/cli-plugin-eslint": "^5.0.8",
|
"cron-validator": "^1.3.1",
|
||||||
"@vue/cli-plugin-typescript": "^5.0.8",
|
"cronstrue": "^2.14.0",
|
||||||
"@vue/cli-service": "^5.0.8",
|
"vue": "^2.7.14"
|
||||||
"@vue/eslint-config-typescript": "^11.0.2",
|
},
|
||||||
"eslint": "^7.32.0",
|
"devDependencies": {
|
||||||
"eslint-plugin-prettier": "^4.2.1",
|
"@typescript-eslint/eslint-plugin": "^5.50.0",
|
||||||
"eslint-plugin-vue": "^9.6.0",
|
"@typescript-eslint/parser": "^5.50.0",
|
||||||
"prettier": "^2.7.1",
|
"@vue/cli-plugin-babel": "^5.0.8",
|
||||||
"typescript": "^4.8.4",
|
"@vue/cli-plugin-eslint": "^5.0.8",
|
||||||
"vue-template-compiler": "^2.7.14"
|
"@vue/cli-plugin-typescript": "^5.0.8",
|
||||||
},
|
"@vue/cli-service": "^5.0.8",
|
||||||
"peerDependencies": {
|
"@vue/eslint-config-typescript": "^11.0.2",
|
||||||
"bootstrap-vue": "^2.23.1"
|
"eslint": "^8.33.0",
|
||||||
}
|
"eslint-config-prettier": "^8.6.0",
|
||||||
|
"eslint-plugin-prettier": "^4.2.1",
|
||||||
|
"eslint-plugin-vue": "^9.17.0",
|
||||||
|
"prettier": "^2.8.8",
|
||||||
|
"typescript": "^4.9.5",
|
||||||
|
"vue-template-compiler": "^2.7.14"
|
||||||
|
},
|
||||||
|
"peerDependencies": {
|
||||||
|
"@tenrok/bootstrap-vue": "^2.23.2"
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
+21
-17
@@ -1,19 +1,23 @@
|
|||||||
<!DOCTYPE html>
|
<!DOCTYPE html>
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<head>
|
|
||||||
<meta charset="utf-8">
|
<head>
|
||||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
<meta charset="utf-8">
|
||||||
<meta name="viewport" content="width=device-width,initial-scale=1.0">
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||||
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
||||||
<title>vue-cron-editor</title>
|
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
|
||||||
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900">
|
<title>
|
||||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@mdi/font@latest/css/materialdesignicons.min.css">
|
<%= htmlWebpackPlugin.options.title %>
|
||||||
</head>
|
</title>
|
||||||
<body>
|
</head>
|
||||||
<noscript>
|
|
||||||
<strong>We're sorry but vue-cron-editor doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
|
<body>
|
||||||
</noscript>
|
<noscript>
|
||||||
<div id="app"></div>
|
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
|
||||||
<!-- built files will be auto injected -->
|
Please enable it to continue.</strong>
|
||||||
</body>
|
</noscript>
|
||||||
</html>
|
<div id="app"></div>
|
||||||
|
<!-- built files will be auto injected -->
|
||||||
|
</body>
|
||||||
|
|
||||||
|
</html>
|
||||||
+10
-20
@@ -1,28 +1,18 @@
|
|||||||
<template>
|
<template>
|
||||||
<div id="app">
|
<div id="app">
|
||||||
<div class="p-3">
|
<div class="p-3">
|
||||||
<VueCronEditorBootstrap v-model="sample1CronExpression" preserve-state-on-switch-to-advanced />
|
<vue-cron-editor-bootstrap v-model="sample1CronExpression" preserve-state-on-switch-to-advanced />
|
||||||
<b-form-input v-model="sample1CronExpression" readonly />
|
<b-form-input v-model="sample1CronExpression" readonly />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import VueCronEditorBootstrap from './VueCronEditorBootstrap.vue'
|
|
||||||
import { BFormInput } from 'bootstrap-vue'
|
|
||||||
import 'bootstrap/dist/css/bootstrap.css'
|
|
||||||
import 'bootstrap-vue/dist/bootstrap-vue.css'
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'App',
|
name: 'App',
|
||||||
|
|
||||||
components: {
|
data: () => ({
|
||||||
VueCronEditorBootstrap,
|
sample1CronExpression: '4 4 * * 0,2,3,5',
|
||||||
BFormInput,
|
}),
|
||||||
},
|
|
||||||
|
|
||||||
data: () => ({
|
|
||||||
sample1CronExpression: '4 4 * * 0,2,3,5',
|
|
||||||
}),
|
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|||||||
@@ -1,151 +0,0 @@
|
|||||||
<template>
|
|
||||||
<b-tabs v-model="activeTabIndex" content-class="p-2" @input="reset">
|
|
||||||
<b-tab :value="0" :title="translate('minutes')" class="minutes-tab">
|
|
||||||
<b-row>
|
|
||||||
<b-col class="d-flex align-items-center">
|
|
||||||
<span class="mr-1">{{ translate('every') }}</span>
|
|
||||||
<b-form-input
|
|
||||||
v-model="editorData.minuteInterval"
|
|
||||||
type="number"
|
|
||||||
min="1"
|
|
||||||
max="59"
|
|
||||||
class="mr-1"
|
|
||||||
style="width: 80px"
|
|
||||||
/>
|
|
||||||
<span>{{ translate('mminutes') }}</span>
|
|
||||||
</b-col>
|
|
||||||
</b-row>
|
|
||||||
</b-tab>
|
|
||||||
<b-tab :value="1" :title="translate('hourly')" class="hourly-tab">
|
|
||||||
<b-row>
|
|
||||||
<b-col class="d-flex align-items-center">
|
|
||||||
<span class="mr-1">{{ translate('every') }}</span>
|
|
||||||
<b-form-input
|
|
||||||
v-model="editorData.hourInterval"
|
|
||||||
type="number"
|
|
||||||
min="1"
|
|
||||||
max="24"
|
|
||||||
class="mr-1"
|
|
||||||
style="width: 80px"
|
|
||||||
/>
|
|
||||||
<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>
|
|
||||||
</b-tab>
|
|
||||||
<b-tab :value="2" :title="translate('daily')" class="daily-tab">
|
|
||||||
<b-row>
|
|
||||||
<b-col class="d-flex align-items-center">
|
|
||||||
<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-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-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>
|
|
||||||
<b-tab :value="5" :title="translate('advanced')" class="advanced-tab">
|
|
||||||
<b-row>
|
|
||||||
<b-col class="d-flex" style="align-items: center">
|
|
||||||
<span class="mr-2">{{ translate('cronExpression') }}</span>
|
|
||||||
<b-form-input v-model="editorData.cronExpression" class="mr-2" style="width: auto" />
|
|
||||||
<span>{{ explanation }}</span>
|
|
||||||
</b-col>
|
|
||||||
</b-row>
|
|
||||||
</b-tab>
|
|
||||||
</b-tabs>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script>
|
|
||||||
import vueCronEditorMixin from './core/vueCronEditorMixin'
|
|
||||||
import { BTabs, BTab, BRow, BCol, BFormCheckbox, BFormInput, BFormTimepicker } from 'bootstrap-vue'
|
|
||||||
|
|
||||||
export default {
|
|
||||||
name: 'VueCronEditorBootstrap',
|
|
||||||
|
|
||||||
components: {
|
|
||||||
BTabs,
|
|
||||||
BTab,
|
|
||||||
BRow,
|
|
||||||
BCol,
|
|
||||||
BFormCheckbox,
|
|
||||||
BFormInput,
|
|
||||||
BFormTimepicker,
|
|
||||||
},
|
|
||||||
|
|
||||||
mixins: [vueCronEditorMixin],
|
|
||||||
|
|
||||||
data: () => ({
|
|
||||||
activeTabIndex: null,
|
|
||||||
tabs: [
|
|
||||||
{ idx: 0, key: 'minutes' },
|
|
||||||
{ idx: 1, key: 'hourly' },
|
|
||||||
{ idx: 2, key: 'daily' },
|
|
||||||
{ idx: 3, key: 'weekly' },
|
|
||||||
{ idx: 4, key: 'monthly' },
|
|
||||||
{ idx: 5, key: 'advanced' },
|
|
||||||
],
|
|
||||||
}),
|
|
||||||
|
|
||||||
computed: {
|
|
||||||
dateTime() {
|
|
||||||
return `${this.editorData.hours}:${this.editorData.minutes}:00`
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
watch: {
|
|
||||||
currentTab() {
|
|
||||||
this.activeTabIndex = this.tabs.find(t => t.key === this.currentTab).idx
|
|
||||||
},
|
|
||||||
},
|
|
||||||
|
|
||||||
created() {
|
|
||||||
this.activeTabIndex = this.tabs.find(t => t.key === this.currentTab).idx
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
reset(tabIndex) {
|
|
||||||
const tab = this.tabs.find(t => t.idx === tabIndex)
|
|
||||||
if (tab) {
|
|
||||||
this.resetToTab(tab.key)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
setDateTime(time) {
|
|
||||||
if (time == null) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
const splittedTime = time.split(':')
|
|
||||||
this.editorData.hours = splittedTime[0]
|
|
||||||
this.editorData.minutes = splittedTime[1]
|
|
||||||
},
|
|
||||||
},
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
@@ -1,151 +0,0 @@
|
|||||||
interface MinutesTabUpdatedEvent {
|
|
||||||
type: 'minutes'
|
|
||||||
minuteInterval: number
|
|
||||||
}
|
|
||||||
|
|
||||||
interface HourlyTabUpdatedEvent {
|
|
||||||
type: 'hourly'
|
|
||||||
minutes: number
|
|
||||||
hourInterval: number
|
|
||||||
}
|
|
||||||
|
|
||||||
interface DailyTabUpdatedEvent {
|
|
||||||
type: 'daily'
|
|
||||||
minutes: number
|
|
||||||
hours: number
|
|
||||||
dayInterval: number
|
|
||||||
}
|
|
||||||
|
|
||||||
interface WeeklyTabUpdatedEvent {
|
|
||||||
type: 'weekly'
|
|
||||||
minutes: number
|
|
||||||
hours: number
|
|
||||||
days: string[]
|
|
||||||
}
|
|
||||||
|
|
||||||
interface MonthlyTabUpdatedEvent {
|
|
||||||
type: 'monthly'
|
|
||||||
minutes: number
|
|
||||||
hours: number
|
|
||||||
day: number
|
|
||||||
monthInterval: number
|
|
||||||
}
|
|
||||||
|
|
||||||
interface AdvancedTabUpdatedEvent {
|
|
||||||
type: 'advanced'
|
|
||||||
cronExpression: string
|
|
||||||
}
|
|
||||||
|
|
||||||
export type TabUpdatedEvent =
|
|
||||||
| MinutesTabUpdatedEvent
|
|
||||||
| HourlyTabUpdatedEvent
|
|
||||||
| DailyTabUpdatedEvent
|
|
||||||
| WeeklyTabUpdatedEvent
|
|
||||||
| MonthlyTabUpdatedEvent
|
|
||||||
| AdvancedTabUpdatedEvent
|
|
||||||
|
|
||||||
export type TabKey = TabUpdatedEvent[keyof TabUpdatedEvent]
|
|
||||||
|
|
||||||
export const buildExpression = (event: TabUpdatedEvent): string => {
|
|
||||||
if (event.type === 'minutes') {
|
|
||||||
return `*/${event.minuteInterval} * * * *`
|
|
||||||
}
|
|
||||||
|
|
||||||
if (event.type === 'hourly') {
|
|
||||||
return `${event.minutes} */${event.hourInterval} * * *`
|
|
||||||
}
|
|
||||||
|
|
||||||
if (event.type === 'daily') {
|
|
||||||
return `${event.minutes} ${event.hours} */${event.dayInterval} * *`
|
|
||||||
}
|
|
||||||
|
|
||||||
if (event.type === 'weekly') {
|
|
||||||
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') {
|
|
||||||
return `${event.minutes} ${event.hours} ${event.day} */${event.monthInterval} *`
|
|
||||||
}
|
|
||||||
|
|
||||||
if (event.type === 'advanced') {
|
|
||||||
return event.cronExpression
|
|
||||||
}
|
|
||||||
|
|
||||||
throw `unknown event type: ${event}`
|
|
||||||
}
|
|
||||||
|
|
||||||
export const parseExpression = (expression: string): TabUpdatedEvent => {
|
|
||||||
let groups = null
|
|
||||||
|
|
||||||
if (expression!.split(' ').length != 5) {
|
|
||||||
return {
|
|
||||||
type: 'advanced',
|
|
||||||
cronExpression: expression,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if ((groups = expression.match(/^\*\/(\d+) \* \* \* \*$/))) {
|
|
||||||
return {
|
|
||||||
type: 'minutes',
|
|
||||||
minuteInterval: Number(groups[1]),
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if ((groups = expression.match(/^(\d+) \*\/(\d+) \* \* \*$/))) {
|
|
||||||
return {
|
|
||||||
type: 'hourly',
|
|
||||||
minutes: Number(groups[1]),
|
|
||||||
hourInterval: Number(groups[2]),
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if ((groups = expression.match(/^(\d+) (\d+) \*\/(\d+) \* \*$/))) {
|
|
||||||
return {
|
|
||||||
type: 'daily',
|
|
||||||
minutes: Number(groups[1]),
|
|
||||||
hours: Number(groups[2]),
|
|
||||||
dayInterval: Number(groups[3]),
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if ((groups = expression.match(/^(\d+) (\d+) \* \* (\d)(,\d)?(,\d)?(,\d)?(,\d)?(,\d)?(,\d)?$/))) {
|
|
||||||
const optionalDaysBeginIndex = 4
|
|
||||||
const matchesEndIndex = 10
|
|
||||||
return {
|
|
||||||
type: 'weekly',
|
|
||||||
minutes: Number(groups[1]),
|
|
||||||
hours: Number(groups[2]),
|
|
||||||
days: [groups[3]].concat(
|
|
||||||
groups
|
|
||||||
.slice(optionalDaysBeginIndex, matchesEndIndex)
|
|
||||||
.map(d => d && d.replace(/,/, ''))
|
|
||||||
.filter(d => d)
|
|
||||||
),
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
if ((groups = expression.match(/^(\d+) (\d+) (\d+) \*\/(\d+) \*$/))) {
|
|
||||||
return {
|
|
||||||
type: 'monthly',
|
|
||||||
minutes: Number(groups[1]),
|
|
||||||
hours: Number(groups[2]),
|
|
||||||
day: Number(groups[3]),
|
|
||||||
monthInterval: Number(groups[4]),
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
return {
|
|
||||||
type: 'advanced',
|
|
||||||
cronExpression: expression,
|
|
||||||
}
|
|
||||||
}
|
|
||||||
@@ -1,66 +0,0 @@
|
|||||||
export const defaultLocales: Record<string, Record<string, string>> = {
|
|
||||||
en: {
|
|
||||||
every: 'Every',
|
|
||||||
mminutes: 'minute(s)',
|
|
||||||
hoursOnMinute: 'hour(s) on minute',
|
|
||||||
daysAt: 'day(s) at',
|
|
||||||
at: 'at',
|
|
||||||
onThe: 'On the',
|
|
||||||
dayOfEvery: 'day, of every',
|
|
||||||
monthsAt: 'month(s), at',
|
|
||||||
// everyDay: 'Every',
|
|
||||||
mon: 'Mon',
|
|
||||||
tue: 'Tue',
|
|
||||||
wed: 'Wed',
|
|
||||||
thu: 'Thu',
|
|
||||||
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:',
|
|
||||||
onlyOn: 'Only on',
|
|
||||||
},
|
|
||||||
pl: {
|
|
||||||
every: 'Co',
|
|
||||||
mminutes: 'minut',
|
|
||||||
hoursOnMinute: 'godzin w minucie',
|
|
||||||
daysAt: 'dni o',
|
|
||||||
at: 'o',
|
|
||||||
onThe: '',
|
|
||||||
dayOfEvery: 'dzień miesiąca, co',
|
|
||||||
monthsAt: 'miesięcy, o godzinie',
|
|
||||||
// everyDay: 'W każdy',
|
|
||||||
mon: 'Pon',
|
|
||||||
tue: 'Wt',
|
|
||||||
wed: 'Śr',
|
|
||||||
thu: 'Czw',
|
|
||||||
fri: 'Pt',
|
|
||||||
sat: 'So',
|
|
||||||
sun: 'Nie',
|
|
||||||
// hasToBeBetween: 'Wymagana wartość pomiędzy',
|
|
||||||
// and: 'i',
|
|
||||||
minutes: 'Minuty',
|
|
||||||
hourly: 'Godziny',
|
|
||||||
daily: 'Dni',
|
|
||||||
weekly: 'Tygodnie',
|
|
||||||
monthly: 'Miesiące',
|
|
||||||
advanced: 'Zaawansowane',
|
|
||||||
cronExpression: 'Wyrażenie cron:',
|
|
||||||
onlyOn: 'Co',
|
|
||||||
},
|
|
||||||
}
|
|
||||||
|
|
||||||
export function createI18n(
|
|
||||||
customLocales: Record<string, Record<string, string>>,
|
|
||||||
locale: string
|
|
||||||
): Record<string, string> {
|
|
||||||
const allLocales = { ...defaultLocales, ...customLocales }
|
|
||||||
return allLocales[locale]
|
|
||||||
}
|
|
||||||
@@ -1,154 +0,0 @@
|
|||||||
/**
|
|
||||||
* vueCronEditorMixin
|
|
||||||
* Core logic of a component.
|
|
||||||
* Functionality dependent on UI frameworks should be implemented in derived components
|
|
||||||
*/
|
|
||||||
|
|
||||||
import { buildExpression, parseExpression, TabUpdatedEvent, TabKey } from './cronExpressions'
|
|
||||||
import * as cronValidator from 'cron-validator'
|
|
||||||
import * as cronstrue from 'cronstrue/i18n'
|
|
||||||
import { createI18n } from './i18n'
|
|
||||||
|
|
||||||
import Vue from 'vue'
|
|
||||||
|
|
||||||
const initialData: Record<TabKey, TabUpdatedEvent> = {
|
|
||||||
minutes: {
|
|
||||||
type: 'minutes',
|
|
||||||
minuteInterval: 1
|
|
||||||
},
|
|
||||||
hourly: {
|
|
||||||
type: 'hourly',
|
|
||||||
minutes: 0,
|
|
||||||
hourInterval: 1
|
|
||||||
},
|
|
||||||
daily: {
|
|
||||||
type: 'daily',
|
|
||||||
minutes: 0,
|
|
||||||
hours: 0,
|
|
||||||
dayInterval: 1
|
|
||||||
},
|
|
||||||
weekly: {
|
|
||||||
type: 'weekly',
|
|
||||||
minutes: 0,
|
|
||||||
hours: 0,
|
|
||||||
days: ['1']
|
|
||||||
},
|
|
||||||
monthly: {
|
|
||||||
type: 'monthly',
|
|
||||||
hours: 0,
|
|
||||||
minutes: 0,
|
|
||||||
day: 1,
|
|
||||||
monthInterval: 1
|
|
||||||
},
|
|
||||||
advanced: {
|
|
||||||
type: 'advanced',
|
|
||||||
cronExpression: ''
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
interface ComponentData {
|
|
||||||
editorData: any
|
|
||||||
currentTab: TabKey
|
|
||||||
innerValue: string | null
|
|
||||||
i18n: Record<string, string> | null
|
|
||||||
}
|
|
||||||
|
|
||||||
export default Vue.extend({
|
|
||||||
props: {
|
|
||||||
value: { type: String, default: '*/1 * * * *' },
|
|
||||||
isAdvancedTabVisible: { type: Boolean, default: true },
|
|
||||||
preserveStateOnSwitchToAdvanced: { type: Boolean, default: false },
|
|
||||||
locale: { type: String, default: 'en' },
|
|
||||||
customLocales: { type: Object, default: null }
|
|
||||||
},
|
|
||||||
|
|
||||||
data() {
|
|
||||||
return <ComponentData>{
|
|
||||||
innerValue: '*/1 * * * *',
|
|
||||||
editorData: Object.assign({}, initialData.minutes),
|
|
||||||
currentTab: 'minutes',
|
|
||||||
i18n: null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
computed: {
|
|
||||||
explanation(): string {
|
|
||||||
if (!this.innerValue) {
|
|
||||||
return ''
|
|
||||||
}
|
|
||||||
|
|
||||||
return (cronstrue as any).toString(this.innerValue, {
|
|
||||||
locale: this.locale
|
|
||||||
})
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
watch: {
|
|
||||||
value: {
|
|
||||||
handler() {
|
|
||||||
if (this.value == this.innerValue) {
|
|
||||||
return
|
|
||||||
}
|
|
||||||
this.loadDataFromExpression()
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
editorData: {
|
|
||||||
deep: true,
|
|
||||||
handler(changedData) {
|
|
||||||
this.updateCronExpression(changedData)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
created() {
|
|
||||||
this.i18n = createI18n(this.customLocales, this.locale)
|
|
||||||
this.innerValue = this.value
|
|
||||||
this.loadDataFromExpression()
|
|
||||||
},
|
|
||||||
|
|
||||||
methods: {
|
|
||||||
translate(key: string) {
|
|
||||||
return this.i18n![key]
|
|
||||||
},
|
|
||||||
|
|
||||||
loadDataFromExpression() {
|
|
||||||
const tabData = parseExpression(this.value)
|
|
||||||
this.editorData = { ...tabData }
|
|
||||||
this.currentTab = tabData.type
|
|
||||||
},
|
|
||||||
|
|
||||||
updateCronExpression(event: TabUpdatedEvent) {
|
|
||||||
const cronExpression = buildExpression({ ...event })
|
|
||||||
|
|
||||||
if (cronValidator.isValidCron(cronExpression)) {
|
|
||||||
this.innerValue = cronExpression
|
|
||||||
this.$emit('input', cronExpression)
|
|
||||||
} else {
|
|
||||||
this.innerValue = null
|
|
||||||
this.$emit('input', null)
|
|
||||||
}
|
|
||||||
},
|
|
||||||
|
|
||||||
resetToTab(tabKey: TabKey) {
|
|
||||||
this.currentTab = tabKey
|
|
||||||
|
|
||||||
if (this.preserveStateOnSwitchToAdvanced && tabKey === 'advanced') {
|
|
||||||
this.editorData = {
|
|
||||||
type: 'advanced',
|
|
||||||
cronExpression: this.innerValue
|
|
||||||
}
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
const tabData = parseExpression(this.value)
|
|
||||||
if (tabKey == tabData.type) {
|
|
||||||
this.editorData = Object.assign({}, tabData)
|
|
||||||
return
|
|
||||||
}
|
|
||||||
|
|
||||||
this.editorData = Object.assign({}, initialData[tabKey])
|
|
||||||
this.updateCronExpression(initialData[tabKey])
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
+9
-1
@@ -1,8 +1,16 @@
|
|||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
import App from './App.vue'
|
import App from './App.vue'
|
||||||
|
|
||||||
|
import VueCronEditorBootstrap from '../lib'
|
||||||
|
Vue.use(VueCronEditorBootstrap)
|
||||||
|
|
||||||
|
import { BFormInput } from '@tenrok/bootstrap-vue'
|
||||||
|
import 'bootstrap/dist/css/bootstrap.css'
|
||||||
|
import '@tenrok/bootstrap-vue/dist/bootstrap-vue.css'
|
||||||
|
Vue.component('BFormInput', BFormInput)
|
||||||
|
|
||||||
Vue.config.productionTip = false
|
Vue.config.productionTip = false
|
||||||
|
|
||||||
new Vue({
|
new Vue({
|
||||||
render: h => h(App)
|
render: h => h(App),
|
||||||
}).$mount('#app')
|
}).$mount('#app')
|
||||||
|
|||||||
Vendored
-15
@@ -1,15 +0,0 @@
|
|||||||
import Vue, { VNode } from 'vue'
|
|
||||||
|
|
||||||
declare global {
|
|
||||||
namespace JSX {
|
|
||||||
// tslint:disable no-empty-interface
|
|
||||||
type Element = VNode
|
|
||||||
|
|
||||||
// tslint:disable no-empty-interface
|
|
||||||
type ElementClass = Vue
|
|
||||||
|
|
||||||
interface IntrinsicElements {
|
|
||||||
[elem: string]: any
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
Vendored
+2
-2
@@ -1,4 +1,4 @@
|
|||||||
declare module '*.vue' {
|
declare module '*.vue' {
|
||||||
import Vue from 'vue'
|
import Vue from 'vue'
|
||||||
export default Vue
|
export default Vue
|
||||||
}
|
}
|
||||||
|
|||||||
+14
-19
@@ -1,21 +1,16 @@
|
|||||||
{
|
{
|
||||||
"compilerOptions": {
|
"compilerOptions": {
|
||||||
"target": "esnext",
|
"allowSyntheticDefaultImports": true,
|
||||||
"module": "esnext",
|
"baseUrl": ".",
|
||||||
"strict": true,
|
"moduleResolution": "node",
|
||||||
"jsx": "preserve",
|
"outDir": "dist",
|
||||||
"importHelpers": true,
|
"removeComments": true,
|
||||||
"moduleResolution": "node",
|
"sourceMap": true,
|
||||||
"esModuleInterop": true,
|
"target": "esnext",
|
||||||
"allowSyntheticDefaultImports": true,
|
"paths": {
|
||||||
"sourceMap": true,
|
"@/*": ["src/*"]
|
||||||
"baseUrl": ".",
|
}
|
||||||
"types": ["webpack-env", "jest"],
|
},
|
||||||
"paths": {
|
"include": ["lib/**/*.ts", "src/**/*.ts", "src/**/*.vue"],
|
||||||
"@/*": ["src/*"]
|
"exclude": ["node_modules"]
|
||||||
},
|
|
||||||
"lib": ["esnext", "dom", "dom.iterable", "scripthost"]
|
|
||||||
},
|
|
||||||
"include": ["src/**/*.ts", "src/**/*.tsx", "src/**/*.vue", "tests/**/*.ts", "tests/**/*.tsx"],
|
|
||||||
"exclude": ["node_modules"]
|
|
||||||
}
|
}
|
||||||
|
|||||||
+7
-3
@@ -1,7 +1,11 @@
|
|||||||
|
const isProduction = process.env.NODE_ENV === 'production'
|
||||||
const isBuildLib = (process.env.npm_lifecycle_script || '').indexOf('--target lib') > 0
|
const isBuildLib = (process.env.npm_lifecycle_script || '').indexOf('--target lib') > 0
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
publicPath: '',
|
publicPath: isProduction ? '/vue-cron-editor-bootstrap/' : '',
|
||||||
outputDir: isBuildLib ? 'dist' : 'demo',
|
outputDir: isBuildLib ? 'dist' : 'demo',
|
||||||
css: { extract: false },
|
css: {
|
||||||
|
extract: true,
|
||||||
|
},
|
||||||
|
productionSourceMap: false,
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user