initial commit

Author: abichinger

.babelrc

@@ -0,0 +1,3 @@
+{
+    "presets": ["@babel/preset-env"]
+}

.gitignore

@@ -0,0 +1,3 @@
+.vscode
+node_modules
+dist

build/rollup.config.js

@@ -0,0 +1,23 @@
+import commonjs from '@rollup/plugin-commonjs'; // Convert CommonJS modules to ES6
+import vue from 'rollup-plugin-vue'; // Handle .vue SFC files
+import buble from '@rollup/plugin-buble'; // Transpile/polyfill with reasonable browser support
+export default {
+    input: 'src/index.js', // Path relative to package.json
+    output: {
+        name: 'core',
+        exports: 'named',
+    },
+    plugins: [
+        commonjs(),
+        vue({
+            css: true, // Dynamically inject css as a <style> tag
+            compileTemplate: true, // Explicitly convert template to render function
+        }),
+        buble({
+            objectAssign: 'Object.assign',
+            transforms: {
+                forOf: false
+            }
+        }), // Transpile to ES5
+    ],
+};

examples/vue-cron.vue

@@ -0,0 +1,74 @@
+<template>
+    <div>
+        Cron: <input :value="value" @change="value = $event.target.value" type="text" />
+        <VueCronCore v-model="value">
+            <template #default="p">
+                <div>
+                    <span>
+                        Every:
+                        <select @input="p.rankEvents.input(parseInt($event.target.value))">
+                            <option v-for="item in p.rankData.items" :key="item.value" :value="item.value">{{item.text}}</option>
+                        </select>
+                    </span>
+
+                    
+                    <template v-for="f in p.fields">
+                        <span :key="f.name" v-if="p.rankAttrs.value >= f.rank">
+                            {{f.name}}:
+                            <select @input="f.events.input(getSelected($event.target))" multiple>
+                                <option v-for="item in f.items" :key="item.value" :value="item.value">{{item.text}}</option>
+                            </select>
+                        </span>
+                    </template>
+
+                    <div>-</div>
+                    
+                    <div>error:{{p.error}}</div>
+                    <div>rank:{{p.rankAttrs.value}}</div>
+                    <div v-for="f in p.fields" :key="'div'+f.name">{{f.name}}: {{f.attrs.value}}, {{f.cron}}, {{f.selectedStr}}</div>
+                </div>
+            </template>
+        </VueCronCore>
+    </div>
+</template>
+
+<style scoped>
+
+select[multiple] {
+    height: 200px;
+}
+
+</style>
+
+<script>
+import VueCronCore from '../src/core'
+
+export default {
+    components: {
+        VueCronCore
+    },
+    props: {
+
+    },
+    data(){
+        return {
+            value: '* * * * *'
+        }
+    },
+
+    computed: {
+        
+    },
+    
+    watch: {
+        
+    },
+
+    methods: {
+        getSelected(select){
+            let options = select && select.options;
+            return Array.from(options).filter((opt) => opt.selected).map((opt) => opt.value)
+        }
+    }
+}
+</script>

jest.config.js

@@ -0,0 +1,26 @@
+/*
+ * For a detailed explanation regarding each configuration property, visit:
+ * https://jestjs.io/docs/en/configuration.html
+ */
+
+module.exports = {
+
+  coverageProvider: "v8",
+
+
+  "moduleFileExtensions": [
+    "js",
+    "ts",
+    "json",
+    // tell Jest to handle `*.vue` files
+    "vue"
+  ],
+  "transform": {
+    '^.+\\.vue$': 'vue-jest',
+    '^.+\\.(js|jsx)?$': 'babel-jest'
+  },
+  moduleNameMapper: {
+    '^@/(.*)$': '<rootDir>/src/$1'
+  },
+  //transformIgnorePatterns: ['<rootDir>/node_modules/']
+};

package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@vue-js-cron/core",
+  "version": "1.0.0",
+  "description": "A renderless Vue.js cron editor.",
+  "main": "dist/core.umd.js",
+  "module": "dist/core.esm.js",
+  "unpkg": "dist/core.min.js",
+  "browser": {
+    "./sfc": "src/core.vue"
+  },
+  "scripts": {
+    "test": "jest",
+    "build": "yarn build:umd & yarn run build:es & yarn run build:unpkg",
+    "build:umd": "yarn rollup --config build/rollup.config.js --format umd --file dist/core.umd.js",
+    "build:es": "yarn rollup --config build/rollup.config.js --format es --file dist/core.esm.js",
+    "build:unpkg": "yarn rollup --config build/rollup.config.js --format iife --file dist/core.min.js"
+  },
+  "keywords": [
+    "cron",
+    "editor",
+    "renderless",
+    "vue.js",
+    "vue"
+  ],
+  "author": "Andreas Bichinger",
+  "license": "MIT",
+  "devDependencies": {
+    "@babel/core": "^7.12.13",
+    "@babel/preset-env": "^7.12.13",
+    "@rollup/plugin-buble": "^0.21.3",
+    "@rollup/plugin-commonjs": "^17.1.0",
+    "@vue/compiler-sfc": "^3.0.5",
+    "@vue/test-utils": "^1.1.3",
+    "babel-core": "^7.0.0-bridge.0",
+    "babel-jest": "^26.6.3",
+    "jest": "^26.6.3",
+    "rollup": "^2.38.5",
+    "rollup-jest": "^1.1.1",
+    "rollup-plugin-vue": "^6.0.0",
+    "vue": "^2.6.12",
+    "vue-jest": "^3.0.7",
+    "vue-template-compiler": "^2.6.12"
+  }
+}

src/core.vue

@@ -0,0 +1,190 @@
+<script>
+import multiple from './fields/multiple'
+import util from './util'
+import en from './locale/en'
+
+const {Field} = util
+
+export default {
+    name: "VueCronCore",
+    props: {
+        value: {
+            type: String,
+            required: true
+        },
+        fields: {
+            type: Array,
+            default: () => {
+                return [
+                    {name: 'minute', items: en.minuteItems, rank: 0},
+                    {name: 'hour', items: en.hourItems, rank: 1},
+                    {name: 'day', items: en.dayItems, rank: 2},
+                    {name: 'month', items: en.monthItems, rank: 4},
+                    {name: 'dayOfWeek', items: en.dayOfWeekItems, rank: 3},
+                ]
+            }
+        },
+        ranks: {
+            type: Array,
+            default: () => {
+                return [
+                    { text: 'Minute', value: -1 },
+                    { text: 'Hour', value: 0 },
+                    { text: 'Day', value: 1 },
+                    { text: 'Week', value: 2 },
+                    { text: 'Month', value: 3 },
+                    { text: 'Year', value: 4 },
+                ]
+            }
+        }
+    },
+    data(){
+
+        let selected = {}
+        for(let field of this.fields){
+            selected[field.name] = []
+        }
+
+        return {
+            selected: selected,
+            error: '',
+            selectedRank: this.ranks[this.ranks.length-1].value 
+        }
+    },
+
+    computed: {
+        splitValue(){
+            return this.value.split(' ')
+        },
+        fieldIndex(){
+            return this.fields.reduce((acc, f, i) => {
+                acc[f.name] = i
+                return acc
+            }, {})
+        },
+        computedFields(){
+            return this.fields.map((f) => new Field(f.name, f.items, f.rank))
+        }
+    },
+    
+    watch: {
+        value: {
+            handler: function(value){
+                this.cronToSelected(value)
+            },
+            immediate: true
+        },
+        selected: {
+            handler: function(selected){
+                this.selectedToCron(selected)
+            },
+            deep:true
+        },
+        selectedRank: {
+            handler: function(){
+                this.selectedToCron(this.selected)
+            },
+        }
+    },
+
+    render(){
+
+        if(!this.$scopedSlots.default){
+            return
+        }
+
+        let fieldProps = []
+        for(let field of this.computedFields){
+            let i = this.fieldIndex[field.name]
+            let values = this.selected[field.name]
+
+            let attrs = {
+                value: values,
+            }
+            let events = {
+                input: ((fieldName) => (evt) => {
+                    console.log('input', fieldName, evt)
+                    this.selected[fieldName] = evt
+                })(field.name)
+            }
+
+            fieldProps.push({
+                ...field,
+                cron: this.splitValue[i],
+                selectedStr: multiple.arrayToStr(values, field),
+                events,
+                attrs
+            })
+        }
+
+        return this.$scopedSlots.default({
+            error: this.error,
+            fields: fieldProps,
+
+            rankAttrs: {
+                value: this.selectedRank
+            },
+            rankEvents: {
+                input: (evt) => {
+                    this.selectedRank = evt
+                }
+            },
+            rankData: {
+                items: this.ranks
+            },
+        })
+    },
+
+    methods: {
+        defaultValue(){
+            return new Array(this.fields.length).fill('*').join(' ')
+        },
+        cronToSelected(value){
+            if(!value){
+                this.$emit('input', this.defaultValue())
+                return
+            }
+
+            if(this.splitValue.length != this.fields.length){
+                this.error = 'invalid pattern'
+                return
+            }
+            
+            for(var i = 0; i < this.splitValue.length; i++){
+                let field = this.computedFields[i]
+                if(field.rank > this.selectedRank){
+                    continue
+                }
+
+                let array = multiple.strToArray(this.splitValue[i], field)
+                if(array === null){
+                    this.error = 'invalid pattern'
+                    return
+                }
+                this.selected[field.name] = array
+            }
+
+            this.error = ''
+        },
+        selectedToCron(selected){
+
+            let strings = []
+            for(let field of this.computedFields){
+                if(field.rank > this.selectedRank){
+                    strings.push('*')
+                    continue
+                }
+                let array = selected[field.name]
+                let str = multiple.arrayToStr(array, field)
+                if(str === null){
+                    this.error = 'invalid selection'
+                    return
+                }
+                strings.push(str)
+            }
+            this.error = ''
+            this.$emit('input', strings.join(' '))
+        }
+    }
+}
+</script>