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

Bootstrap 5 update (#9)

Browse Source 
Co-authored-by: Alex Freitas <afreitas@jbssa.com>
This commit is contained in:
alexmfreitas
2022-09-27 23:55:53 -03:00
committed by GitHub
parent d766f75bbc
commit 42e11a5b93
9 changed files with 33051 additions and 11560 deletions
Download Patch File Download Diff File Expand all files Collapse all files
dist/vueCronEditorBootstrap.common.js
Vendored
+4740 -5648
View File
File diff suppressed because one or more lines are too long
dist/vueCronEditorBootstrap.common.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
dist/vueCronEditorBootstrap.umd.js
Vendored
+4740 -5648
View File
File diff suppressed because one or more lines are too long
dist/vueCronEditorBootstrap.umd.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
dist/vueCronEditorBootstrap.umd.min.js
Vendored
+2 -9
View File
File diff suppressed because one or more lines are too long
dist/vueCronEditorBootstrap.umd.min.js.map
Vendored
+1 -1
View File
File diff suppressed because one or more lines are too long
package-lock.json
Generated
+23433 -83
View File
File diff suppressed because it is too large Load Diff
package.json
+4 -5
View File
@@ -1,6 +1,6 @@
{ {
"name": "vue-cron-editor-bootstrap", "name": "vue-cron-editor-bootstrap",
"version": "0.1.10", "version": "0.2.1",
"private": false, "private": false,
"main": "dist/vueCronEditorBootstrap.umd.js", "main": "dist/vueCronEditorBootstrap.umd.js",
"module": "dist/vueCronEditorBootstrap.esm.js", "module": "dist/vueCronEditorBootstrap.esm.js",
@@ -34,14 +34,13 @@
"gh-pages": "^2.2.0", "gh-pages": "^2.2.0",
"link-parent-bin": "^1.0.2", "link-parent-bin": "^1.0.2",
"lint-staged": "^10.2.4", "lint-staged": "^10.2.4",
"node-sass": "^4.14.1",
"prettier": "^1.19.1", "prettier": "^1.19.1",
"sass": "^1.26.5", "sass": "^1.46.0",
"sass-loader": "^8.0.0", "sass-loader": "^8.0.2",
"standard-version": "^8.0.0", "standard-version": "^8.0.0",
"typescript": "~3.5.3", "typescript": "~3.5.3",
"vue-template-compiler": "^2.6.10", "vue-template-compiler": "^2.6.10",
"bootstrap-vue": "^2.14.0" "bootstrap-vue": "^2.21.2"
}, },
"author": "alexmfreitas", "author": "alexmfreitas",
"license": "MIT", "license": "MIT",
src/VueCronEditorBootstrap.vue
+129 -164
View File
@@ -1,169 +1,143 @@
<template> <template>
<b-tabs v-model="activeTab" @input="reset" content-class="mt-3"> <b-tabs v-model="activeTab" @input="reset" content-class="mt-3 mb-3">
<b-tab :value="0" :title="_$t('minutes')" class="minutes-tab"> <b-tab :value="0" :title="_$t('minutes')" class="minutes-tab">
<b-form inline> <div class="row">
<label class="mr-sm-2">{{ _$t("every") }}</label> <div class="col d-flex" style="align-items: center;">
<b-form-input <label class="me-2">{{ _$t("every") }}</label>
type="number" <b-form-input
v-model="editorData.minuteInterval" type="number"
v-bind:style="{ width: '80px' }" v-model="editorData.minuteInterval"
/> v-bind:style="{ width: '80px' }"
<label class="mr-sm-2 ml-sm-2">{{ _$t("mminutes") }}</label> />
</b-form> <label class="me-2 ms-2">{{ _$t("mminutes") }}</label>
</div>
</div>
</b-tab> </b-tab>
<b-tab :value="1" :title="_$t('hourly')" class="hourly-tab"> <b-tab :value="1" :title="_$t('hourly')" class="hourly-tab">
<b-row> <div class="row">
<b-col size="12"> <div class="col d-flex" style="align-items: center;">
<b-form inline> <label class="me-2">{{ _$t("every") }}</label>
<label class="mr-sm-2">{{ _$t("every") }}</label> <b-form-input
<b-form-input type="number"
type="number" v-model="editorData.hourInterval"
v-model="editorData.hourInterval" v-bind:style="{ width: '80px' }"
v-bind:style="{ width: '80px' }" />
/> <label class="me-2 ms-2">{{
<label class="mr-sm-2 ml-sm-2">{{ _$t("hoursOnMinute")
_$t("hoursOnMinute") }}</label>
}}</label> <b-form-input
<b-form-input type="number"
type="number" max="59"
max="59" min="0"
min="0" v-model="editorData.minutes"
v-model="editorData.minutes" v-bind:style="{ width: '80px' }"
v-bind:style="{ width: '80px' }" />
/> </div>
</b-form> </div>
</b-col>
</b-row>
</b-tab> </b-tab>
<b-tab :value="2" :title="_$t('daily')" class="daily-tab"> <b-tab :value="2" :title="_$t('daily')" class="daily-tab">
<b-row> <div class="row">
<b-col size="12"> <div class="col d-flex" style="align-items: center;">
<b-form inline> <label class="me-2">{{ _$t("every") }}</label>
<label class="mr-sm-2">{{ _$t("every") }}</label> <b-form-input
<b-form-input type="number"
type="number" v-model="editorData.dayInterval"
v-model="editorData.dayInterval" v-bind:style="{ width: '80px' }"
v-bind:style="{ width: '80px' }" />
/> <label class="me-2 ms-2">{{
<label class="mr-sm-2 ml-sm-2">{{ _$t("daysAt")
_$t("daysAt") }}</label>
}}</label> <b-form-timepicker
<b-form-timepicker :value="dateTime"
:value="dateTime" :hour12="false"
:hour12="false" @input="setDateTime"
@input="setDateTime" style="width: auto; display: flex;"
/> />
</b-form> </div>
</b-col> </div>
</b-row>
</b-tab> </b-tab>
<b-tab :value="3" :title="_$t('weekly')" class="weekly-tab"> <b-tab :value="3" :title="_$t('weekly')" class="weekly-tab">
<b-row> <div class="row">
<b-col size="12"> <div class="col d-flex" style="align-items: center;">
<b-form inline> <label class="me-2">{{ _$t("every") }}</label>
<label class="mr-sm-2">{{ _$t("every") }}</label> <div class="form-check form-switch me-2">
<b-form-checkbox <input :id="`toggle-editor-0`" type="checkbox" class="form-check-input" value="0" v-model="editorData.days">
value="0" <label class="form-check-label" :for="`toggle-editor-0`">{{ _$t("sun") }}</label>
class="mr-sm-2" </div>
v-model="editorData.days" <div class="form-check form-switch me-2">
switch <input :id="`toggle-editor-1`" type="checkbox" class="form-check-input" value="1" v-model="editorData.days">
>{{ _$t("sun") }}</b-form-checkbox <label class="form-check-label" :for="`toggle-editor-1`">{{ _$t("mon") }}</label>
> </div>
<b-form-checkbox <div class="form-check form-switch me-2">
value="1" <input :id="`toggle-editor-2`" type="checkbox" class="form-check-input" value="2" v-model="editorData.days">
class="mr-sm-2" <label class="form-check-label" :for="`toggle-editor-2`">{{ _$t("tue") }}</label>
v-model="editorData.days" </div>
switch <div class="form-check form-switch me-2">
>{{ _$t("mon") }}</b-form-checkbox <input :id="`toggle-editor-3`" type="checkbox" class="form-check-input" value="3" v-model="editorData.days">
> <label class="form-check-label" :for="`toggle-editor-3`">{{ _$t("wed") }}</label>
<b-form-checkbox </div>
value="2" <div class="form-check form-switch me-2">
class="mr-sm-2" <input :id="`toggle-editor-4`" type="checkbox" class="form-check-input" value="4" v-model="editorData.days">
v-model="editorData.days" <label class="form-check-label" :for="`toggle-editor-4`">{{ _$t("thu") }}</label>
switch </div>
>{{ _$t("tue") }}</b-form-checkbox <div class="form-check form-switch me-2">
> <input :id="`toggle-editor-5`" type="checkbox" class="form-check-input" value="5" v-model="editorData.days">
<b-form-checkbox <label class="form-check-label" :for="`toggle-editor-5`">{{ _$t("fri") }}</label>
value="3" </div>
class="mr-sm-2" <div class="form-check form-switch me-2">
v-model="editorData.days" <input :id="`toggle-editor-6`" type="checkbox" class="form-check-input" value="6" v-model="editorData.days">
switch <label class="form-check-label" :for="`toggle-editor-6`">{{ _$t("sat") }}</label>
>{{ _$t("wed") }}</b-form-checkbox </div>
> <label class="me-2">{{ _$t("at") }}</label>
<b-form-checkbox <b-form-timepicker
value="4" :value="dateTime"
class="mr-sm-2" @input="setDateTime"
v-model="editorData.days" :hour12="false"
switch style="width: auto; display: flex;"
>{{ _$t("thu") }}</b-form-checkbox />
> </div>
<b-form-checkbox </div>
value="5"
class="mr-sm-2"
v-model="editorData.days"
switch
>{{ _$t("fri") }}</b-form-checkbox
>
<b-form-checkbox
value="6"
v-model="editorData.days"
switch
>{{ _$t("sat") }}</b-form-checkbox
>
<label class="mr-sm-2 ml-sm-2">{{ _$t("at") }}</label>
<b-form-timepicker
:value="dateTime"
@input="setDateTime"
:hour12="false"
/>
</b-form>
</b-col>
</b-row>
</b-tab> </b-tab>
<b-tab :value="4" :title="_$t('monthly')" class="monthly-tab"> <b-tab :value="4" :title="_$t('monthly')" class="monthly-tab">
<b-row> <div class="row">
<b-col size="12"> <div class="col d-flex" style="align-items: center;">
<b-form inline> <label class="me-2">{{ _$t("onThe") }}</label>
<label class="mr-sm-2">{{ _$t("onThe") }}</label> <b-form-input
<b-form-input type="number"
type="number" v-model="editorData.day"
v-model="editorData.day" v-bind:style="{ width: '80px' }"
v-bind:style="{ width: '80px' }" />
/> <label class="me-2 ms-2">{{
<label class="mr-sm-2 ml-sm-2">{{ _$t("dayOfEvery")
_$t("dayOfEvery") }}</label>
}}</label> <b-form-input
<b-form-input type="number"
type="number" v-model="editorData.monthInterval"
v-model="editorData.monthInterval" v-bind:style="{ width: '80px' }"
v-bind:style="{ width: '80px' }" /><label class="me-2 ms-2">{{
/><label class="mr-sm-2 ml-sm-2">{{ _$t("monthsAt")
_$t("monthsAt") }}</label>
}}</label> <b-form-timepicker
<b-form-timepicker :value="dateTime"
:value="dateTime" @input="setDateTime"
@input="setDateTime" :hour12="false"
:hour12="false" style="width: auto; display: flex;"
/> />
</b-form> </div>
</b-col> </div>
</b-row>
</b-tab> </b-tab>
<b-tab :value="4" :title="_$t('advanced')" class="advanced-tab"> <b-tab :value="4" :title="_$t('advanced')" class="advanced-tab">
<b-row> <div class="row">
<b-col size="12"> <div class="col d-flex" style="align-items: center;">
<b-form inline> <label class="me-2">{{
<label class="mr-sm-2">{{ _$t("cronExpression")
_$t("cronExpression") }}</label>
}}</label> <b-form-input v-model="editorData.cronExpression" style="width:auto"/>
<b-form-input v-model="editorData.cronExpression" /> <label class="me-2 ms-2">
<label class="mr-sm-2 ml-sm-2"> {{ explanation }}
{{ explanation }} </label>
</label> </div>
</b-form> </div>
</b-col>
</b-row>
</b-tab> </b-tab>
</b-tabs> </b-tabs>
</template> </template>
@@ -173,13 +147,8 @@ import vueCronEditorMixin from "./core/vueCronEditorMixin";
import { import {
BTabs, BTabs,
BTab, BTab,
BForm,
BFormInput, BFormInput,
BFormTimepicker, BFormTimepicker,
BFormCheckbox,
BCol,
BRow,
BContainer
} from "bootstrap-vue"; } from "bootstrap-vue";
export default { export default {
@@ -187,13 +156,9 @@ export default {
mixins: [vueCronEditorMixin], mixins: [vueCronEditorMixin],
components: { components: {
BFormInput, BFormInput,
BForm,
BTabs, BTabs,
BTab, BTab,
BCol, BFormTimepicker
BRow,
BFormTimepicker,
BFormCheckbox
}, },
data: () => ({ data: () => ({
activeTab: null, activeTab: null,