Giter Club home page Giter Club logo

vue-cron-editor's Introduction

Actions Status

vue-cron-editor

VueCronEditor is a component library built with Vue allowing for easier editing of cron expressions.

Demo

https://karoletrych.github.io/vue-cron-editor/

Requirements

  • Vue ^2.0

Installation

  • vue-cron-editor-buefy
npm install vue-cron-editor-buefy --save

Usage

<template>
  <div>
    <VueCronEditorBuefy v-model="cronExpression"/>
    {{cronExpression}}
  </div>
</template>

<script>
import VueCronEditorBuefy from 'vue-cron-editor-buefy';
// or include the vue-cron-editor-buefy.umd.js file and call: 
// Vue.component("vue-cron-editor-buefy", window["vue-cron-editor-buefy"]);

export default {
  name: 'App',
  components: {
    VueCronEditorBuefy
  },
  data: () => ({
      cronExpression: "*/1 * * * *"
  }),
};
</script>

The editor tab will be set to the one which is able to represent an initial expression given to a value prop (minutes tab in the example above). If none of the tabs can represent the given expression then advanced tab is selected.

Kind of cron syntax can be selected with cronSyntax prop. Available:

  • basic (default) - (classic GNU version, 5 digits)
  • quartz - (6 digits)

To show only some of the tabs, specify them using visibleTabs prop: :visibleTabs="['daily', 'weekly', 'monthly']" Possible tabs: "minutes", "hourly", "daily", "weekly", "monthly", "advanced".

To preserve expression on switch to advanced tab set the preserveStateOnSwitchToAdvanced to true.

i18n

The language of the component can be selected with the locale prop.

<VueCronEditorBuefy
    v-model="expression"
    locale="pl"
></VueCronEditorBuefy>

Currently supported languages:

  • en
  • pl
  • pt
  • it
  • es

Custom locales can be provided via a customLocales prop:

<VueCronEditorBuefy
    v-model="expression"
    locale="test"
    :custom-locales="{
    test: {
        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:"
    }
}"
></VueCronEditorBuefy>

Development

To build the samples app run in root directory:

npm install
npm run serve

In case you get “$attrs is readonly”,“$listeners is readonly” in console, clean the node_modules in root folder and in src/buefy (it's probably caused by duplicate vue loading by webpack.

To run unit tests:

npm run test:unit

To release version:

cd src/buefy
npm run release:full
npm publish

vue-cron-editor's People

Contributors

0n1rick avatar brunobg avatar dependabot[bot] avatar joaquinwojcik avatar karoletrych avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.