refactor(light): use composition api

Author: abichinger

core-ts/yarn.lock

@@ -1,8 +1,12 @@
 <template>
   <div>
-    <VueCronEditor v-model="value">
+    <VueCronEditor v-model="value" @error="error = $event">
     </VueCronEditor>
-    <div><br />cron expression: {{value}}</div>
+    <div>
+      <br />
+      cron expression: <input :value="value" @change="updateValue"/></div>
+      <br />
+      Error: {{ error }}
   </div>
 </template>
 
@@ -13,10 +17,15 @@ export default {
   components: {
     VueCronEditor
   },
-
   data: () => {
     return {
-      value: '* * * * *'
+      value: '* * * * *',
+      error: ''
+    }
+  },
+  methods: {
+    updateValue (evt) {
+      this.value = evt.target.value
     }
   }
 }

light/dev/example-usage.vue

@@ -22,9 +22,8 @@
     "clean": "git clean -xf dist"
   },
   "dependencies": {
-    "@vue-js-cron/core": "3.7.1"
+    "@vue-js-cron/core-ts": "^3.7.1"
   },
-  "devDependencies": {},
   "files": [
     "package.json",
     "dist",

light/package.json

@@ -1,35 +1,36 @@
 
 <template>
-    <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>
+    <span class="vcron-editor">
+      {{ period.text }}
+        <span>{{period.prefix.value}}</span>
+        <div class="vcron-l-spacer">
+        <custom-select :model-value="period.selected.value.id" item-value="id" :items="period.items" @update:model-value="period.select($event)" :cols="cols['period'] || 1" />
+        </div>
+        <span>{{period.suffix.value}}</span>
+
+        <template v-for="f in selected" :key="f.id">
+            <span>{{f.prefix.value}}</span>
             <div class="vcron-l-spacer">
-            <custom-select v-bind="period.attrs" v-on="period.events" :items="period.items" item-value="id" :cols="cols['period'] || 1" />
+            <custom-select :model-value="f.selected.value" @update:model-value="f.select($event)" :items="f.items" :cols="cols[f.id] || 1" :selection="f.text.value" multiple></custom-select>
             </div>
-            <span>{{period.suffix}}</span>
-
-            <template v-for="f in fields" :key="f.id">
-                <span>{{f.prefix}}</span>
-                <div class="vcron-l-spacer">
-                <custom-select v-bind="f.attrs" v-on="f.events" :items="f.items" :cols="cols[f.id] || 1" :selection="f.selectedStr" multiple></custom-select>
-                </div>
-                <span>{{f.suffix}}</span>
-            </template>
-        </span>
-    </CronCore>
+            <span>{{f.suffix.value}}</span>
+        </template>
+    </span>
 </template>
 
 <script>
-import CronCore from '@vue-js-cron/core'
+import { cronProps, useCron } from '@vue-js-cron/core-ts'
+import { defineComponent, watch } from 'vue'
 import CustomSelect from './components/CustomSelect.vue'
 
-export default {
+export default defineComponent({
   name: 'VueCronEditor',
   components: {
-    CronCore: CronCore.component,
     CustomSelect
   },
+  emits: ['update:model-value', 'error'],
   props: {
+    ...cronProps,
     cols: {
       type: Object,
       default: () => {
@@ -41,8 +42,27 @@ export default {
       }
     }
   },
-  emits: ['update:model-value', 'error']
-}
+  setup (props, { emit }) {
+    const cron = useCron(props)
+
+    watch(() => props.modelValue, (value) => {
+      cron.cron.value = value
+    })
+
+    watch(cron.cron, (value) => {
+      emit('update:model-value', value)
+    })
+
+    watch(cron.error, (error) => {
+      emit('error', error)
+    })
+
+    return {
+      ...cron
+    }
+  }
+})
+
 </script>
 
 <style>

light/src/CronEditor.vue

@@ -1,63 +1,78 @@
 <template>
-  <renderless-select
-    v-bind="$attrs"
-    @update:model-value="$emit('update:model-value', $event)"
-    #default="{ selectedStr, itemRows, select, isSelected, multiple }">
-
-    <div class="vcron-select-container">
-      <span class="vcron-select-input" @click="toggleMenu">
-        {{selectedStr}}
-      </span>
-
-      <div class="vcron-select-list" v-if="menu">
-        <div class="vcron-select-row" v-for="(row, i) in itemRows" :key="i">
-          <div v-for="(item, j) in row"
-            :key="i+'-'+j"
-            class="vcron-select-col"
-            :class="{'vcron-select-selected': isSelected(item)}"
-            @click="select(item)"
-            @click.stop="multiple ? () => {} : toggleMenu()">
-
-            <div v-if="item">{{item.text}}</div>
-          </div>
+  <div class="vcron-select-container">
+    <span class="vcron-select-input" @click="toggleMenu">
+      {{ selection ?? selectedStr }}
+    </span>
+
+    <div class="vcron-select-list" v-if="menu">
+      <div class="vcron-select-row" v-for="(row, i) in itemRows" :key="i">
+        <div v-for="(item, j) in row"
+          :key="i+'-'+j"
+          class="vcron-select-col"
+          :class="{'vcron-select-selected': has(item)}"
+          @click="select(item)"
+          @click.stop="multiple ? () => {} : toggleMenu()">
+
+          <div v-if="item">{{item.text}}</div>
         </div>
       </div>
     </div>
-  </renderless-select>
+  </div>
 </template>
 
 <script>
-import { RenderlessSelect } from '@vue-js-cron/core'
+import { selectProps, useSelect } from '@vue-js-cron/core-ts'
+import { ref, watch } from 'vue'
 
 export default {
-  inheritAttrs: false,
-  components: {
-    RenderlessSelect
-  },
   name: 'CustomSelect',
-  props: {},
-  emits: ['update:model-value'],
-  data () {
-    return {
-      menu: false
+  props: {
+    ...selectProps(),
+    modelValue: {
+      type: [String, Number, Array]
+    },
+    selection: {
+      type: String
     }
   },
-  methods: {
-    menuEvtListener (evt) {
-      this.menu = false
-      document.removeEventListener('click', this.menuEvtListener)
-    },
-    toggleMenu () {
-      this.menu = !this.menu
+  emits: ['update:modelValue'],
+  setup (props, { emit }) {
+    const s = useSelect(props)
+    const menu = ref(false)
 
-      if (this.menu) {
+    if (props.modelValue) {
+      s.selectValues(props.modelValue)
+    }
+
+    const menuEvtListener = (evt) => {
+      menu.value = false
+      document.removeEventListener('click', menuEvtListener)
+    }
+    const toggleMenu = () => {
+      menu.value = !menu.value
+
+      if (menu.value) {
         setTimeout(() => {
-          document.addEventListener('click', this.menuEvtListener)
+          document.addEventListener('click', menuEvtListener)
         }, 1)
       } else {
-        document.removeEventListener('click', this.menuEvtListener)
+        document.removeEventListener('click', menuEvtListener)
       }
     }
+
+    watch(s.selected, () => {
+      emit('update:modelValue', s.selected.value)
+    })
+
+    watch(() => props.modelValue, (value) => {
+      s.selectValues(value)
+    })
+
+    return {
+      ...s,
+      menu,
+      toggleMenu
+    }
   }
 }
 </script>

light/src/components/CustomSelect.vue

@@ -1,5 +1,4 @@
 // Import vue component
-import core from '@vue-js-cron/core'
 import component from './CronEditor.vue'
 
 // Declare install function executed by Vue.use()
@@ -12,8 +11,7 @@ export function install (Vue) {
 // Create module definition for Vue.use()
 const plugin = {
   install,
-  component,
-  util: core.util
+  component
 }
 
 // To allow use as module (npm/webpack/etc.) export component

light/src/index.js

@@ -5,6 +5,7 @@
   "license": "MIT",
   "workspaces": [
     "core",
+    "core-ts",
     "light",
     "vuetify",
     "element-plus",
@@ -65,6 +66,6 @@
     "vue-jest": "^5.0.0-alpha.10"
   },
   "dependencies": {
-    "vue": "^3.2.37"
+    "vue": "^3.3.4"
   }
-}
+}