feat(light): upgrade to vue3

issue: #4

BREAKING CHANGE: no vue2 support

Author: abichinger

light/build/rollup.config.js

@@ -1,7 +1,6 @@
 import commonjs from '@rollup/plugin-commonjs'; // Convert CommonJS modules to ES6
+import css from 'rollup-plugin-css-only';
 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: {
@@ -17,11 +16,5 @@ export default {
             compileTemplate: true, // Explicitly convert template to render function
         }),
         commonjs(),
-        /*buble({
-            objectAssign: 'Object.assign',
-            transforms: {
-                forOf: false
-            }
-        }), // Transpile to ES5*/
     ],
 };

light/dev/example-usage.vue

@@ -1,7 +1,9 @@
 <template>
-  <VueCronEditor v-model="value">
-
-  </VueCronEditor>
+  <div>
+    <VueCronEditor :value="value" @update:value="value = $event">
+    </VueCronEditor>
+    <div><br />cron expression: {{value}}</div>
+  </div>
 </template>
 
 <script>

light/dev/serve.js

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

light/package.json

@@ -21,12 +21,9 @@
     "build:unpkg": "yarn rollup --config build/rollup.config.js --format iife --file dist/light.min.js"
   },
   "dependencies": {
-    "@vue-js-cron/core": "2.1.1"
-  },
-  "devDependencies": {
-    "@vue/cli-service": "^4.5.15",
-    "rollup-plugin-css-only": "^3.1.0"
+    "@vue-js-cron/core": "^2.1.1"
   },
+  "devDependencies": {},
   "files": [
     "package.json",
     "dist",

light/src/CronEditor.vue

@@ -1,25 +1,19 @@
 
 <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 v-bind="$attrs" @update:value="$emit('update:value', $event)" @error="$emit('error', $event)" v-slot="{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" :key="f.id">
+                <span>{{f.prefix}}</span>
+                <custom-select v-bind="f.attrs" v-on="f.events" :items="f.items" :cols="cols(f.id)" :width="width(f.id)" multiple>{{f.selectedStr}}</custom-select>
+                <span>{{f.suffix}}</span>
+            </template>
+        </span>
     </CronCore>
-    
 </template>
 
 <script>
@@ -53,6 +47,7 @@ export default {
                 else return 'unset'
             }
         }
-    }   
+    },
+    emits:['update:value', 'error']
 }
 </script>

light/src/components/CustomSelect.vue

@@ -30,9 +30,9 @@ export default {
       default: false
     },
     value: {
-      type: String | Array | Object,
-      default(){
-        return this.multiple ? [] : null
+      type: [String, Array, Object],
+      default(props){
+        return props.multiple ? [] : null
       },
     },
     items: {