feat(vuetify): upgrade to vue3 and add CustomSelect

issue: #4

BREAKING CHANGE: no vue2 support

Author: abichinger

core/dev/example-usage.vue

@@ -1,19 +1,19 @@
 <template>
     <div id="app">
         Cron: <input :value="value" @change="value = $event.target.value" type="text" />
-        <VueCronCore :value="value" @update:value="value = $event" v-slot="{period, error, fields}">
+        <VueCronCore v-model="value" v-slot="{period, error, fields}">
             <div>
                 <span>
                     {{period.prefix}}:
-                    <select @input="period.events.input(JSON.parse($event.target.value))">
+                    <select @input="period.events['update:model-value'](JSON.parse($event.target.value).id)">
                         <option v-for="item in period.items" :key="item.text" :value="JSON.stringify(item)">{{item.text}}</option>
                     </select>
                 </span>
 
                 <template v-for="f in fields" :key="f.id">
                     <span>
                         {{f.prefix}}
-                        <select @input="f.events.input(getSelected($event.target))" multiple>
+                        <select @input="f.events['update:model-value'](getSelected($event.target))" multiple>
                             <option v-for="item in f.items" :key="item.value" :value="item.value">{{item.text}}</option>
                         </select>
                         {{f.suffix}}

core/src/core.vue

@@ -10,7 +10,7 @@ const {Field} = types
 export default {
     name: "VueCronCore",
     props: {
-        value: {
+        modelValue: {
             type: String,
             default: '* * * * *'
         },
@@ -57,7 +57,7 @@ export default {
             default: true
         },
     },
-    emits: ["update:value", "error"],
+    emits: ["update:model-value", "error"],
     data(){
 
         let selected = {}
@@ -74,7 +74,7 @@ export default {
 
     computed: {
         splitValue(){
-            return this.value.split(' ')
+            return this.modelValue.split(' ')
         },
         fieldIndex(){
             return this.fields.reduce((acc, f, i) => {
@@ -145,10 +145,10 @@ export default {
             let values = this.selected[field.id]
 
             let attrs = {
-                value: values,
+                modelValue: values,
             }
             let events = {
-                input: ((fieldId) => (evt) => {
+                'update:model-value': ((fieldId) => (evt) => {
                     this.selected[fieldId] = evt
                 })(field.id)
             }
@@ -170,10 +170,10 @@ export default {
 
             period:{
                 attrs:{
-                    value: this.selectedPeriod.id
+                    modelValue: this.selectedPeriod.id
                 },
                 events:{
-                    input: (periodId) => {
+                    'update:model-value': (periodId) => {
                         let i = this.periodIndex[periodId] || 0
                         this.selectedPeriod = this.periods[i]
                     }
@@ -191,7 +191,7 @@ export default {
         },
         cronToSelected(value){
             if(!value){
-                this.$emit('update:value', this.defaultValue())
+                this.$emit('update:model-value', this.defaultValue())
                 return
             }
 
@@ -233,7 +233,7 @@ export default {
                 strings.push(str.value)
             }
             this.error = ''
-            this.$emit('update:value', strings.join(' '))
+            this.$emit('update:model-value', strings.join(' '))
         },
 
         sort(array){

core/test/core.test.js

@@ -1,9 +1,7 @@
-import { config, mount } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
 import 'regenerator-runtime/runtime'
 import VueCron from '../src/core.vue'
 
-config.renderStubDefaultSlot = true
-
 test('test VueCron', async () => {
     // render the component
     let onUpdateValue = jest.fn()

light/dev/example-usage.vue

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

light/src/CronEditor.vue

@@ -1,12 +1,11 @@
 
 <template>
-    <CronCore v-bind="$attrs" @update:value="$emit('update:value', $event)" @error="$emit('error', $event)" v-slot="{fields, period}">
+    <CronCore v-bind="$attrs" @update:model-value="$emit('update:model-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>
@@ -48,6 +47,6 @@ export default {
             }
         }
     },
-    emits:['update:value', 'error']
+    emits:['update:model-value', 'error']
 }
 </script>

light/src/components/CustomSelect.vue

@@ -29,7 +29,7 @@ export default {
       type: Boolean,
       default: false
     },
-    value: {
+    modelValue: {
       type: [String, Array, Object],
       default(props){
         return props.multiple ? [] : null
@@ -60,6 +60,7 @@ export default {
       default: 'unset'
     }
   },
+  emits: ['update:model-value'],
   data(){
     return {
       menu: false
@@ -79,7 +80,7 @@ export default {
       }
     },
     _value(){
-      return (this.multiple) ? this.value : [this.value]
+      return (this.multiple) ? this.modelValue : [this.modelValue]
     },
     selectedItems(){
       return this.items.filter((item) => {
@@ -127,10 +128,10 @@ export default {
         else{
           value.push(item)
         }
-        this.$emit('input', (this.returnObject) ? value : value.map((item) => item[this.itemValue]))
+        this.$emit('update:model-value', (this.returnObject) ? value : value.map((item) => item[this.itemValue]))
       }
       else {
-        this.$emit('input', (this.returnObject) ? item : item[this.itemValue])
+        this.$emit('update:model-value', (this.returnObject) ? item : item[this.itemValue])
       }
     }
   }

vuetify/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*/
     ],
 };

vuetify/dev/example-usage.vue

@@ -3,7 +3,7 @@
     <v-container>
         <v-card>
             <v-card-text>
-                <v-text-field label="" :value="value" @change="value=$event"></v-text-field>
+                <v-text-field label="" :value="value" @change="value=$event" density="compact"></v-text-field>
                 <VueCronEditor v-model="value">
 
                 </VueCronEditor>

vuetify/dev/serve.js

@@ -1,15 +1,14 @@
-import Vue from 'vue'
+import '@mdi/font/css/materialdesignicons.css'
+import { createApp } from 'vue'
+import { createVuetify } from 'vuetify'
+import * as components from 'vuetify/components'
+import 'vuetify/styles'
 import example from './example-usage.vue'
-import Vuetify from 'vuetify'
-import 'vuetify/dist/vuetify.min.css'
 
-Vue.use(Vuetify)
-const opts = {}
-const vuetify = new Vuetify(opts)
+const app = createApp(example)
+const vuetify = createVuetify({
+  components: components
+})
+app.use(vuetify)
 
-Vue.config.productionTip = false
-
-new Vue({
-  render: h => h(example),
-  vuetify
-}).$mount('#app')
+app.mount('#app')

vuetify/package.json

@@ -22,11 +22,10 @@
   },
   "dependencies": {
     "@vue-js-cron/core": "2.1.1",
-    "vuetify": "^2.4.6"
+    "vuetify": "^3.0.0-beta.6"
   },
   "devDependencies": {
-    "@vue/cli-service": "^4.5.15",
-    "rollup-plugin-css-only": "^3.1.0"
+    "@mdi/font": "^7.0.96"
   },
   "files": [
     "package.json",

vuetify/src/CronEditor.vue

@@ -1,67 +1,63 @@
 
 <template>
-    <CronCore v-bind="$attrs" @input="$emit('input', $event)" @error="$emit('error', $event)">
-        <template #default="{fields, period}">
-            <v-row align="baseline" dense>
-                <v-col v-if="period.prefix" class="flex-grow-0">{{period.prefix}}</v-col>
+    <CronCore v-bind="$attrs" @update:model-value="$emit('update:model-value', $event)" @error="$emit('error', $event)" v-slot="{fields, period}">
+
+        <v-row align="baseline" dense>
+            <v-col v-if="period.prefix" class="flex-grow-0">{{period.prefix}}</v-col>
+            <v-col cols="auto">
+                <custom-select v-bind="period.attrs" :items="period.items" v-on="period.events" item-value="id" :density="density" :variant="variant"></custom-select>
+            </v-col>
+            <v-col v-if="period.suffix" class="flex-grow-0">{{period.suffix}}</v-col>
+            
+            
+            <template v-for="f in fields" :key="f.id">
+                <v-col v-if="f.prefix" class="flex-grow-0">{{f.prefix}}</v-col>
                 <v-col cols="auto">
-                    <v-select class="fit" v-bind="period.attrs" :items="period.items" @input="period.events.input" item-value="id" dense></v-select>
+                    <custom-select v-bind="f.attrs" v-on="f.events" :selection="f.selectedStr" :cols="cols(f.id)" :items="f.items" multiple :density="density" :variant="variant" :close-on-content-click="false" clearable>
+                    </custom-select>
                 </v-col>
-                <v-col v-if="period.suffix" class="flex-grow-0">{{period.suffix}}</v-col>
-                
-                
-                <template v-for="f in fields">
-                    <v-col v-if="f.prefix" class="flex-grow-0" :key="f.id+'-prefix'">{{f.prefix}}</v-col>
-                    <v-col cols="auto" :key="f.id">
-                        <v-select class="fit" v-bind="f.attrs" v-on="f.events" :items="f.items" multiple dense :menu-props="{ auto: false, offsetY: true }">
-                            <template #prepend-inner>
-                                <div>{{f.selectedStr}}</div>
-                            </template>
-                            <template #selection>
-                                
-                            </template>
-                            <template #item="{item, attrs}">
-                                <v-list-item-title v-bind="attrs">{{item.text}}</v-list-item-title>
-                            </template>
-                        </v-select>
-                    </v-col>
-                    <v-col v-if="f.suffix" class="flex-grow-0" :key="f.id+'-suffix'">{{f.suffix}}</v-col>
-                </template>
-            </v-row>
-            
-        </template>
+                <v-col v-if="f.suffix" class="flex-grow-0">{{f.suffix}}</v-col>
+            </template>
+        </v-row>
+
     </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: {
+        variant: {
+            type: String,
+            default: 'elevated'
+        },
+            density: {
+            type: String,
+            default: 'default'
+        },
+        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
+                
+            }
+        },
     },
+    emits: ['update:model-value', 'error']
 }
 </script>
 
 <style lang="css">
 
-.v-select.fit {
-  width: min-content;
-}
-.v-select.fit  .v-select__selection--comma {
-    text-overflow: unset;
-}
-.v-select.fit  .v-input__prepend-inner {
-    white-space: nowrap;
-    align-items: center;
-
-}
-.v-select.fit  .v-input__prepend-inner div {
-    min-height: 10px;
-    line-height: 26px;
-}
-
-
-
 </style>