feat: core in typescript

- use vite-plugin-dts to generate type declarations
- add RenderlessSelect
- bugfixes

Author: abichinger

core-ts/package.json

@@ -1,7 +1,21 @@
 {
-  "name": "core-ts",
-  "version": "0.0.0",
-  "private": true,
+  "name": "@vue-js-cron/core-ts",
+  "version": "3.7.1",
+  "description": "A renderless Vue.js cron editor.",
+  "repository": "https://github.com/abichinger/vue-js-cron",
+  "author": "Andreas Bichinger",
+  "license": "MIT",
+  "private": false,
+  "type": "module",
+  "main": "./dist/core.umd.cjs",
+  "module": "./dist/core.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "import": "./dist/core.js",
+      "require": "./dist/core.umd.cjs"
+    }
+  },
   "scripts": {
     "dev": "vite",
     "build": "run-p type-check \"build-only {@}\" --",
@@ -34,7 +48,22 @@
     "prettier": "^3.0.3",
     "typescript": "~5.2.0",
     "vite": "^4.4.9",
+    "vite-plugin-dts": "^3.6.0",
     "vitest": "^0.34.4",
     "vue-tsc": "^1.8.11"
-  }
-}
+  },
+  "files": [
+    "package.json",
+    "dist",
+    "README.md"
+  ],
+  "keywords": [
+    "vue",
+    "vue.js",
+    "vue component",
+    "cron",
+    "cron expression",
+    "cron editor",
+    "renderless"
+  ]
+}

core-ts/src/App.vue

@@ -54,7 +54,7 @@ import { useCronComponent } from './components/cron-core'
 
 export default {
   components: {
-    'CronCore': useCronComponent()
+    CronCore: useCronComponent()
   },
   props: {},
   data() {
@@ -77,4 +77,3 @@ export default {
   }
 }
 </script>
-./components/core

core-ts/src/components/__tests__/select.spec.ts

@@ -0,0 +1,44 @@
+import { describe, expect, it } from 'vitest'
+import { nextTick, watch } from 'vue'
+import { useSelect } from '../select'
+
+describe('select', () => {
+  it('useSelect updates', async () => {
+    const items = [
+      {
+        value: 0,
+        text: 'zero'
+      },
+      {
+        value: 1,
+        text: 'one'
+      }
+    ]
+
+    const s = useSelect({
+      items: items
+    })
+
+    let counter = 0
+    const zero = items[0]
+    const one = items[1]
+
+    watch(s.updated, () => {
+      counter++
+    })
+
+    s.add(zero)
+    await nextTick()
+
+    s.add(one)
+    await nextTick()
+
+    expect(s.has(one)).toEqual(true)
+
+    s.remove(one)
+    await nextTick()
+
+    expect(s.has(one)).toEqual(false)
+    expect(counter).toEqual(3)
+  })
+})

core-ts/src/components/cron-core.ts

@@ -56,26 +56,27 @@ export function useCron(options: CronOptions) {
   const cronDefaults = new DefaultCronOptions()
 
   const locale = options.locale ?? 'en'
-  const {
-    customLocale,
-    fields = cronDefaults.fields(locale),
-    periods = cronDefaults.periods()
-  } = options
+  const { customLocale, fields = cronDefaults.fields(locale) } = options
   const initialValue = options.initialValue ?? cronDefaults.initialValue(fields.length)
 
   const l10n = getLocale(locale, customLocale)
+  const periods = (options.periods ?? cronDefaults.periods()).map((p) => {
+    return {
+      ...p,
+      text: l10n.getLocaleStr(p.id, TextPosition.Text)
+    }
+  })
 
   const cron = ref(initialValue)
   const error = ref('')
   const period = ref(periods[periods.length - 1])
-  const periodText = ref('')
   const periodPrefix = ref('')
   const periodSuffix = ref('')
   const segments = fields.map((f) => {
     return useCronSegment({ field: new FieldWrapper(f), locale: l10n, period })
   })
 
-  const segmentMap = new Map(segments.map((s) => [s.field.id, s]))
+  const segmentMap = new Map(segments.map((s) => [s.id, s]))
   const selected = computed(() => {
     return period.value.value.map((fieldId) => {
       const segment = segmentMap.get(fieldId)
@@ -111,7 +112,7 @@ export function useCron(options: CronOptions) {
   const toCron = () => {
     cron.value = segments
       .map((s) => {
-        return period.value.value.includes(s.field.id) ? s.cron.value : '*'
+        return period.value.value.includes(s.id) ? s.cron.value : '*'
       })
       .join(' ')
   }
@@ -123,10 +124,16 @@ export function useCron(options: CronOptions) {
   translate()
 
   watch(cron, fromCron)
-  watch(period, translate)
+  watch(period, () => {
+    toCron()
+    translate()
+  })
 
   segments.forEach((s) => {
     watch(s.cron, toCron)
+    watch(s.error, (value) => {
+      error.value = value
+    })
   })
 
   return {
@@ -143,17 +150,10 @@ export function useCron(options: CronOptions) {
         period.value = periods[i]
       },
       selected: period,
-      items: periods.map((p) => {
-        return {
-          ...p,
-          text: l10n.getLocaleStr(p.id, TextPosition.Text)
-        }
-      }),
-      text: periodText,
+      items: periods,
       prefix: periodPrefix,
       suffix: periodSuffix
-    },
-    fields
+    }
   }
 }
 
@@ -205,8 +205,8 @@ export function useCronComponent() {
           error: error,
           fields: selected.value.map((s) => {
             return {
-              id: s.field.id,
-              items: s.field.items,
+              id: s.id,
+              items: s.items,
               cron: s.cron.value,
               selectedStr: s.text.value,
               events: {

core-ts/src/components/cron-segment.ts

@@ -82,7 +82,8 @@ export function useCronSegment(options: FieldOptions) {
   })
 
   return {
-    field,
+    id: field.id,
+    items: field.items,
     cron,
     selected,
     error,