feat: add light package

Author: abichinger

light/.gitignore

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

light/.npmrc

@@ -0,0 +1 @@
+access = "public"

light/README.md

@@ -0,0 +1,9 @@
+# Vue.js Cron Vuetify
+
+lightweight vue.js cron editor
+
+This component is inspired by [react-js-cron](https://github.com/xrutayisire/react-js-cron) and [jqcron](https://github.com/arnapou/jqcron)
+
+## Usage
+
+**Demo** and **getting started guide** at [https://abichinger.github.io/vue-js-cron/guide/getting-started.html#quick-start-cronlight](https://abichinger.github.io/vue-js-cron/guide/getting-started.html#quick-start-vuetify)

light/build/rollup.config.js

@@ -0,0 +1,27 @@
+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
+import css from 'rollup-plugin-css-only'
+export default {
+    input: 'src/index.js', // Path relative to package.json
+    output: {
+        name: 'light',
+        exports: 'named',
+    },
+    plugins: [
+        css({
+            output: 'light.css',
+        }),
+        vue({
+            css: false, // Dynamically inject css as a <style> tag
+            compileTemplate: true, // Explicitly convert template to render function
+        }),
+        commonjs(),
+        /*buble({
+            objectAssign: 'Object.assign',
+            transforms: {
+                forOf: false
+            }
+        }), // Transpile to ES5*/
+    ],
+};

light/dev/example-usage.vue

@@ -0,0 +1,28 @@
+<template>
+  <VueCronEditor v-model="value">
+
+  </VueCronEditor>
+</template>
+
+<script>
+import VueCronEditor from '../src/CronEditor'
+
+export default {
+  name: 'Editor',
+  components:{
+    VueCronEditor
+  },
+
+  data:() => {
+    return {
+      value: '* * * * *'
+    }
+  }
+}
+</script>
+
+<style>
+.vcron-editor{
+    font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
+}
+</style>

light/dev/serve.js

@@ -0,0 +1,8 @@
+import Vue from 'vue'
+import example from './example-usage.vue'
+
+Vue.config.productionTip = false
+
+new Vue({
+  render: h => h(example),
+}).$mount('#app')

light/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@vue-js-cron/light",
+  "version": "1.0.0",
+  "description": "lightweight vue.js cron editor",
+  "main": "dist/light.umd.js",
+  "module": "dist/light.esm.js",
+  "unpkg": "dist/light.min.js",
+  "browser": {
+    "./sfc": "src/CronEditor.vue"
+  },
+  "repository": "https://github.com/abichinger/vue-js-cron",
+  "author": "Andreas Bichinger",
+  "license": "MIT",
+  "private": false,
+  "scripts": {
+    "test": "jest",
+    "serve": "vue-cli-service serve dev/serve.js",
+    "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/light.umd.js",
+    "build:es": "yarn rollup --config build/rollup.config.js --format es --file dist/light.esm.js",
+    "build:unpkg": "yarn rollup --config build/rollup.config.js --format iife --file dist/light.min.js"
+  },
+  "dependencies": {
+    "@vue-js-cron/core": "1.0.1"
+  },
+  "devDependencies": {
+    "@vue/cli-service": "^4.5.15",
+    "rollup-plugin-css-only": "^3.1.0"
+  },
+  "files": [
+    "package.json",
+    "dist",
+    "README.md"
+  ],
+  "keywords": [
+    "vue",
+    "vue.js",
+    "vue component",
+    "cron",
+    "cron expression",
+    "cron editor",
+    "light"
+  ]
+}

light/src/CronEditor.vue

@@ -0,0 +1,58 @@
+
+<template>
+    <CronCore v-bind="$attrs" @input="$emit('input', $event)" @error="$emit('error', $event)">
+        <template #default="{fields, period}">
+            
+            <span class="vcron-editor">
+                <span>{{period.prefix}}</span>
+                <custom-select v-bind="period.attrs" v-on="period.events" :items="period.items" item-value="id" :cols="cols('period')" :width="width('period')" />
+                <span>{{period.suffix}}</span>
+            
+            
+                <template v-for="f in fields">
+                    <span :key="f.id+'prefix'">{{f.prefix}}</span>
+                    <custom-select v-bind="f.attrs" v-on="f.events" :items="f.items" :key="f.id" :cols="cols(f.id)" :width="width(f.id)" multiple>{{f.selectedStr}}</custom-select>
+                    <span :key="f.id+'suffix'">{{f.suffix}}</span>
+                </template>
+
+            </span>
+            
+        </template>
+    </CronCore>
+    
+</template>
+
+<script>
+import CronCore from '@vue-js-cron/core'
+import CustomSelect from './components/CustomSelect.vue'
+
+export default {
+    name: "VueCronEditor",
+    components:{
+        'CronCore': CronCore.component,
+        CustomSelect
+    },
+    props:{
+        cols: {
+            type: Function,
+            default: (fieldId) => {
+
+                if(fieldId == 'minute') return 5
+                else if (fieldId == 'hour') return 4
+                else if (fieldId == 'day') return 4
+                else return 1
+                
+            }
+        },
+        width: {
+            type: Function,
+            default: (fieldId) => {
+                if(fieldId == 'minute') return '10em'
+                else if (fieldId == 'hour') return '8em'
+                else if (fieldId == 'day') return '8em'
+                else return 'unset'
+            }
+        }
+    }   
+}
+</script>

light/src/components/CustomSelect.vue

@@ -0,0 +1,189 @@
+<template>
+  <div class="vcron-select-container">
+    <span class="vcron-select-input" @click="toggleMenu">
+      <slot>{{selectedStr}}</slot>
+    </span>
+    <span class="vcron-select-list" :style="listStyle">
+      <span v-for="item in items" 
+        :key="item[itemValue]+''" 
+        class="vcron-select-list-item" 
+        :class="{'vcron-select-list-item-selected': selectedItems.includes(item)}" 
+        :style="listItemStyle"
+        @click="select(item)"
+        @click.stop="multiple ? () => {} : toggleMenu()">
+        
+        {{item[itemText]}}
+      </span> 
+    </span>
+  </div>
+</template>
+
+<script>
+import multiple from '@vue-js-cron/core/src/fields/multiple'
+
+export default {
+  inheritAttrs: false,
+  name: 'CustomSelect',
+  props:{
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    value: {
+      type: String | Array | Object,
+      default(){
+        return this.multiple ? [] : null
+      },
+    },
+    items: {
+      type: Array,
+      default: () => []
+    },
+    returnObject: {
+      type: Boolean,
+      default: false
+    },
+    itemText: {
+      type: String,
+      default: 'text'
+    },
+    itemValue: {
+      type: String,
+      default: 'value'
+    },
+    cols: {
+      type: Number,
+      default: 1
+    },
+    width: {
+      type: String,
+      default: 'unset'
+    }
+  },
+  data(){
+    return {
+      menu: false
+    }
+  },
+  computed: {
+    listStyle() {
+      return {
+        display: (this.menu) ? 'inline-block' : 'none',
+        minWidth: '5em',
+        width: this.width
+      }
+    },
+    listItemStyle() {
+      return {
+        width: 100/this.cols + '%'
+      }
+    },
+    _value(){
+      return (this.multiple) ? this.value : [this.value]
+    },
+    selectedItems(){
+      return this.items.filter((item) => {
+        for(let value of this._value){
+          if(this.returnObject){
+            if (value == item) return true
+          }
+          else{
+            if (value == item[this.itemValue]) return true
+          }
+        }
+        return false
+      })
+    },
+    selectedStr(){
+      return this.selectedItems.map((item) => item[this.itemText]).join(',')
+    }
+  },
+  methods: {
+    menuEvtListener(evt){
+      this.menu = false
+      document.removeEventListener('click', this.menuEvtListener)
+    },
+    toggleMenu(){
+      this.menu = !this.menu
+
+      if(this.menu){
+        setTimeout(() => {
+          document.addEventListener('click', this.menuEvtListener)
+        }, 1)
+      }
+      else {
+        document.removeEventListener('click', this.menuEvtListener)
+      }
+    },
+    select(item){
+      if(this.multiple){
+        let value = this.selectedItems.slice()
+        let i = this.selectedItems.indexOf(item)
+        //deselect
+        if(i >= 0){
+          value.splice(i,1)
+        }
+        //select
+        else{
+          value.push(item)
+        }
+        this.$emit('input', (this.returnObject) ? value : value.map((item) => item[this.itemValue]))
+      }
+      else {
+        this.$emit('input', (this.returnObject) ? item : item[this.itemValue])
+      }
+    }
+  }
+}
+</script>
+
+<style>
+
+.vcron-select-container {
+  display: inline-block;
+  position: relative;
+  margin: 0 0.2em;
+}
+
+.vcron-select-input {
+  display: inline-block;
+  border-radius: 3px;
+  border: 1px solid #eee;
+  background-color: #ddd;
+  user-select: none;
+  padding: 0 0.5em;
+}
+
+.vcron-select-list {
+  position: absolute;
+  top: 1.8em;
+  left: 0px;
+  margin: 0;
+  padding: 0;
+  box-shadow: 2px 2px 3px rgba(0,0,0,0.5);
+  border: 1px solid #aaa;
+  background-color: #eee;
+  list-style: none;
+  z-index: 100;
+}
+
+.vcron-select-list-item {
+  display: inline-block;
+  box-sizing: border-box;
+  user-select: none;
+  width: 100%;
+  padding: 0.2em 0.5em;
+  text-align: center;
+}
+
+.vcron-select-list-item:hover {
+  background-color: rgb(52, 147, 190);
+  color: white;
+}
+
+.vcron-select-list-item-selected {
+  background-color: rgb(43, 108, 138);
+  color: white;
+}
+
+</style>