From 88e88f4d09959868e32359735f95de2a86b5df68 Mon Sep 17 00:00:00 2001
From: Kikuo Emoto <kemoto@codemonger.io>
Date: Wed, 9 Oct 2024 09:24:30 +0900
Subject: [PATCH 1/4] feat(lib): rewrite Datetimepicker in TS

Rewrites `Datetimepicker` in the `src/components/datetimepicker` folder
in TypeScript:
- `modelValue` allow `null`
- Replaces `isNaN(date)` with `isNaN(date.valueOf())` which should
  produce an equivalent result
- Introduces new types:
  - `DatetimeFormatter`: type of the `datetimeFormatter` prop
  - `DatetimeParser`: type of the `datetimeParser` prop
  - `DatetimeCreator`: type of the `datetimeCreator` prop

Here is a tip for TypeScript migration:
- Register Buefy components with "direct" names rather than the `name`
  fields so that they are type-checked
---
 .../datetimepicker/Datetimepicker.vue         | 129 ++++++++++--------
 .../datetimepicker/{index.js => index.ts}     |   3 +-
 2 files changed, 74 insertions(+), 58 deletions(-)
 rename packages/buefy-next/src/components/datetimepicker/{index.js => index.ts} (82%)

diff --git a/packages/buefy-next/src/components/datetimepicker/Datetimepicker.vue b/packages/buefy-next/src/components/datetimepicker/Datetimepicker.vue
index 07df86145..04b7b6cb9 100644
--- a/packages/buefy-next/src/components/datetimepicker/Datetimepicker.vue
+++ b/packages/buefy-next/src/components/datetimepicker/Datetimepicker.vue
@@ -94,28 +94,38 @@
     />
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import type { PropType } from 'vue'
+
 import FormElementMixin from '../../utils/FormElementMixin'
 import { isMobile, matchWithGroups } from '../../utils/helpers'
 import config from '../../utils/config'
-import Input from '../input/Input.vue'
-import Datepicker from '../datepicker/Datepicker.vue'
-import Timepicker from '../timepicker/Timepicker.vue'
+import BInput from '../input/Input.vue'
+import BDatepicker from '../datepicker/Datepicker.vue'
+import BTimepicker from '../timepicker/Timepicker.vue'
+
+type BDatepickerInstance = InstanceType<typeof BDatepicker>
+type BTimepickerInstance = InstanceType<typeof BTimepicker>
+
+export type DatetimeFormatter = (date: Date) => string
+export type DatetimeParser = (date: string) => Date | null
+export type DatetimeCreator = (date: Date) => Date
 
 const AM = 'AM'
 const PM = 'PM'
-export default {
+export default defineComponent({
     name: 'BDatetimepicker',
     components: {
-        [Datepicker.name]: Datepicker,
-        [Input.name]: Input,
-        [Timepicker.name]: Timepicker
+        BDatepicker,
+        BInput,
+        BTimepicker
     },
     mixins: [FormElementMixin],
     inheritAttrs: false,
     props: {
         modelValue: {
-            type: Date
+            type: [Date, null] as PropType<Date | null>
         },
         editable: {
             type: Boolean,
@@ -156,14 +166,14 @@ export default {
             default: config.defaultDatepickerNearbyMonthDays
         },
         datetimeFormatter: {
-            type: Function
+            type: Function as PropType<DatetimeFormatter>
         },
         datetimeParser: {
-            type: Function
+            type: Function as PropType<DatetimeParser>
         },
         datetimeCreator: {
-            type: Function,
-            default: (date) => {
+            type: Function as PropType<DatetimeCreator>,
+            default: (date: Date) => {
                 if (typeof config.defaultDatetimeCreator === 'function') {
                     return config.defaultDatetimeCreator(date)
                 } else {
@@ -183,13 +193,15 @@ export default {
         },
         appendToBody: Boolean
     },
-    emits: [
-        'active-change',
-        'change-month',
-        'change-year',
-        'icon-right-click',
-        'update:modelValue'
-    ],
+    emits: {
+        /* eslint-disable @typescript-eslint/no-unused-vars */
+        'active-change': (_active: boolean) => true,
+        'change-month': (_month: number) => true,
+        'change-year': (_year: number) => true,
+        'icon-right-click': () => true,
+        'update:modelValue': (_value: Date | null | undefined) => true
+        /* eslint-enable @typescript-eslint/no-unused-vars */
+    },
     data() {
         return {
             newValue: this.adjustValue(this.modelValue)
@@ -200,7 +212,7 @@ export default {
             get() {
                 return this.newValue
             },
-            set(value) {
+            set(value: Date | null) {
                 if (value) {
                     let val = new Date(value.getTime())
                     if (this.newValue) {
@@ -219,10 +231,10 @@ export default {
                         val = this.datetimeCreator(value)
                     }
                     // check min and max range
-                    if (this.minDatetime && val < this.adjustValue(this.minDatetime)) {
-                        val = this.adjustValue(this.minDatetime)
-                    } else if (this.maxDatetime && val > this.adjustValue(this.maxDatetime)) {
-                        val = this.adjustValue(this.maxDatetime)
+                    if (this.minDatetime && val < this.adjustValue(this.minDatetime)!) {
+                        val = this.adjustValue(this.minDatetime)!
+                    } else if (this.maxDatetime && val > this.adjustValue(this.maxDatetime)!) {
+                        val = this.adjustValue(this.maxDatetime)!
                     }
                     this.newValue = new Date(val.getTime())
                 } else {
@@ -240,7 +252,7 @@ export default {
                 hour: 'numeric',
                 minute: 'numeric',
                 second: this.enableSeconds() ? 'numeric' : undefined
-            }).resolvedOptions()
+            }).resolvedOptions() as Intl.DateTimeFormatOptions
         },
         dtf() {
             return new Intl.DateTimeFormat(this.locale, {
@@ -263,7 +275,7 @@ export default {
             if (!this.minDatetime) {
                 return this.datepicker ? this.adjustValue(this.datepicker.minDate) : null
             }
-            const adjMinDatetime = this.adjustValue(this.minDatetime)
+            const adjMinDatetime = this.adjustValue(this.minDatetime)!
             return new Date(adjMinDatetime.getFullYear(),
                 adjMinDatetime.getMonth(),
                 adjMinDatetime.getDate(), 0, 0, 0, 0)
@@ -272,7 +284,7 @@ export default {
             if (!this.maxDatetime) {
                 return this.datepicker ? this.adjustValue(this.datepicker.maxDate) : null
             }
-            const adjMaxDatetime = this.adjustValue(this.maxDatetime)
+            const adjMaxDatetime = this.adjustValue(this.maxDatetime)!
             return new Date(adjMaxDatetime.getFullYear(),
                 adjMaxDatetime.getMonth(),
                 adjMaxDatetime.getDate(), 0, 0, 0, 0)
@@ -281,7 +293,7 @@ export default {
             if (!this.minDatetime || (this.newValue === null || typeof this.newValue === 'undefined')) {
                 return this.timepicker ? this.adjustValue(this.timepicker.minTime) : null
             }
-            const adjMinDatetime = this.adjustValue(this.minDatetime)
+            const adjMinDatetime = this.adjustValue(this.minDatetime)!
             if (adjMinDatetime.getFullYear() === this.newValue.getFullYear() &&
                 adjMinDatetime.getMonth() === this.newValue.getMonth() &&
                 adjMinDatetime.getDate() === this.newValue.getDate()) {
@@ -293,7 +305,7 @@ export default {
             if (!this.maxDatetime || (this.newValue === null || typeof this.newValue === 'undefined')) {
                 return this.timepicker ? this.adjustValue(this.timepicker.maxTime) : null
             }
-            const adjMaxDatetime = this.adjustValue(this.maxDatetime)
+            const adjMaxDatetime = this.adjustValue(this.maxDatetime)!
             if (adjMaxDatetime.getFullYear() === this.newValue.getFullYear() &&
                 adjMaxDatetime.getMonth() === this.newValue.getMonth() &&
                 adjMaxDatetime.getDate() === this.newValue.getDate()) {
@@ -334,17 +346,17 @@ export default {
     methods: {
         enableSeconds() {
             if (this.$refs.timepicker) {
-                return this.$refs.timepicker.enableSeconds
+                return (this.$refs.timepicker as BTimepickerInstance).enableSeconds
             }
             return false
         },
         isHourFormat24() {
             if (this.$refs.timepicker) {
-                return this.$refs.timepicker.isHourFormat24
+                return (this.$refs.timepicker as BTimepickerInstance).isHourFormat24
             }
             return !this.localeOptions.hour12
         },
-        adjustValue(value, reverse = false) {
+        adjustValue(value: Date | null | undefined, reverse: boolean = false) {
             if (!value) return value
             if (reverse) {
                 return new Date(value.getTime() - this.tzOffset * 60000)
@@ -352,7 +364,7 @@ export default {
                 return new Date(value.getTime() + this.tzOffset * 60000)
             }
         },
-        defaultDatetimeParser(date) {
+        defaultDatetimeParser(date: string) {
             if (typeof this.datetimeParser === 'function') {
                 return this.datetimeParser(date)
             } else if (typeof config.defaultDatetimeParser === 'function') {
@@ -361,8 +373,8 @@ export default {
                 if (this.dtf.formatToParts && typeof this.dtf.formatToParts === 'function') {
                     const dayPeriods = [AM, PM, AM.toLowerCase(), PM.toLowerCase()]
                     if (this.$refs.timepicker) {
-                        dayPeriods.push(this.$refs.timepicker.amString)
-                        dayPeriods.push(this.$refs.timepicker.pmString)
+                        dayPeriods.push((this.$refs.timepicker as BTimepickerInstance).amString)
+                        dayPeriods.push((this.$refs.timepicker as BTimepickerInstance).pmString)
                     }
                     const parts = this.dtf.formatToParts(new Date())
                     const formatRegex = parts.map((part, idx) => {
@@ -384,23 +396,23 @@ export default {
                         datetimeGroups.year &&
                         datetimeGroups.year.length === 4 &&
                         datetimeGroups.month &&
-                        datetimeGroups.month <= 12 &&
+                        +datetimeGroups.month <= 12 &&
                         datetimeGroups.day &&
-                        datetimeGroups.day <= 31 &&
+                        +datetimeGroups.day <= 31 &&
                         datetimeGroups.hour &&
-                        datetimeGroups.hour >= 0 &&
-                        datetimeGroups.hour < 24 &&
+                        +datetimeGroups.hour >= 0 &&
+                        +datetimeGroups.hour < 24 &&
                         datetimeGroups.minute &&
-                        datetimeGroups.minute >= 0 &&
-                        datetimeGroups.minute <= 59
+                        +datetimeGroups.minute >= 0 &&
+                        +datetimeGroups.minute <= 59
                     ) {
                         const d = new Date(
-                            datetimeGroups.year,
-                            datetimeGroups.month - 1,
-                            datetimeGroups.day,
-                            datetimeGroups.hour,
-                            datetimeGroups.minute,
-                            datetimeGroups.second || 0)
+                            +datetimeGroups.year,
+                            +datetimeGroups.month - 1,
+                            +datetimeGroups.day,
+                            +datetimeGroups.hour,
+                            +datetimeGroups.minute,
+                            +(datetimeGroups.second || 0))
                         return d
                     }
                 }
@@ -408,7 +420,10 @@ export default {
                 return new Date(Date.parse(date))
             }
         },
-        defaultDatetimeFormatter(date) {
+        defaultDatetimeFormatter(date: Date | Date[]) {
+            // FIXME: BDatepicker.dateFormatter should deal with an array
+            // but this function is not ready yet
+            date = date as Date
             if (typeof this.datetimeFormatter === 'function') {
                 return this.datetimeFormatter(date)
             } else if (typeof config.defaultDatetimeFormatter === 'function') {
@@ -420,7 +435,7 @@ export default {
         /*
         * Parse date from string
         */
-        onChangeNativePicker(event) {
+        onChangeNativePicker(event: { target: { value: string } }) {
             const date = event.target.value
             const s = date ? date.split(/\D/) : []
             if (s.length >= 5) {
@@ -439,12 +454,12 @@ export default {
         /*
          * Emit 'active-change' on datepicker active state change
          */
-        onActiveChange(value) {
+        onActiveChange(value: boolean) {
             this.$emit('active-change', value)
         },
-        formatNative(value) {
-            const date = new Date(value)
-            if (value && !isNaN(date)) {
+        formatNative(value: Date | null | undefined) {
+            const date = new Date(value!)
+            if (value && !isNaN(date.valueOf())) {
                 const year = date.getFullYear()
                 const month = date.getMonth() + 1
                 const day = date.getDate()
@@ -461,16 +476,16 @@ export default {
             return ''
         },
         toggle() {
-            this.$refs.datepicker.toggle()
+            (this.$refs.datepicker as BDatepickerInstance).toggle()
         }
     },
     mounted() {
         if (!this.isMobile || this.inline) {
             // $refs attached, it's time to refresh datepicker (input)
             if (this.newValue) {
-                this.$refs.datepicker.$forceUpdate()
+                (this.$refs.datepicker as BDatepickerInstance).$forceUpdate()
             }
         }
     }
-}
+})
 </script>
diff --git a/packages/buefy-next/src/components/datetimepicker/index.js b/packages/buefy-next/src/components/datetimepicker/index.ts
similarity index 82%
rename from packages/buefy-next/src/components/datetimepicker/index.js
rename to packages/buefy-next/src/components/datetimepicker/index.ts
index c06b245cc..35a91a80f 100644
--- a/packages/buefy-next/src/components/datetimepicker/index.js
+++ b/packages/buefy-next/src/components/datetimepicker/index.ts
@@ -1,9 +1,10 @@
+import type { App } from 'vue'
 import Datetimepicker from './Datetimepicker.vue'
 
 import { registerComponent } from '../../utils/plugins'
 
 const Plugin = {
-    install(Vue) {
+    install(Vue: App) {
         registerComponent(Vue, Datetimepicker)
     }
 }

From 5e9285521240e0a8ff221a3028366bb608784be4 Mon Sep 17 00:00:00 2001
From: Kikuo Emoto <kemoto@codemonger.io>
Date: Wed, 9 Oct 2024 09:44:56 +0900
Subject: [PATCH 2/4] test(lib): rewrites Datetimepicker.spec in TS
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Rewrites the spec for `Datetimepicker` in the
`src/components/datetimepicker` folder in TypeScript.

All the changes are straightforward. Here are a tip for Jest → Vitest
migration:
- Import the spec building blocks from the `vitest` package
---
 .../{Datetimepicker.spec.js => Datetimepicker.spec.ts}      | 6 ++++--
 1 file changed, 4 insertions(+), 2 deletions(-)
 rename packages/buefy-next/src/components/datetimepicker/{Datetimepicker.spec.js => Datetimepicker.spec.ts} (96%)

diff --git a/packages/buefy-next/src/components/datetimepicker/Datetimepicker.spec.js b/packages/buefy-next/src/components/datetimepicker/Datetimepicker.spec.ts
similarity index 96%
rename from packages/buefy-next/src/components/datetimepicker/Datetimepicker.spec.js
rename to packages/buefy-next/src/components/datetimepicker/Datetimepicker.spec.ts
index 0dd9f1270..6461e21bc 100644
--- a/packages/buefy-next/src/components/datetimepicker/Datetimepicker.spec.js
+++ b/packages/buefy-next/src/components/datetimepicker/Datetimepicker.spec.ts
@@ -1,7 +1,9 @@
+import { beforeEach, describe, expect, it } from 'vitest'
 import { shallowMount, mount } from '@vue/test-utils'
-import Datetimepicker from '@components/datetimepicker/Datetimepicker'
+import type { VueWrapper } from '@vue/test-utils'
+import Datetimepicker from '@components/datetimepicker/Datetimepicker.vue'
 
-let wrapper
+let wrapper: VueWrapper<InstanceType<typeof Datetimepicker>>
 
 describe('Datetimepicker', () => {
     beforeEach(() => {

From 324a31ee23e31bfbe5c7f7c556ba4eb502fca52f Mon Sep 17 00:00:00 2001
From: Kikuo Emoto <kemoto@codemonger.io>
Date: Wed, 9 Oct 2024 09:46:59 +0900
Subject: [PATCH 3/4] chore(lib): bundle datetimepicker in TS

`rollup.config.mjs` removes "datetimepicker" from `JS_COMPONENTS`.
---
 packages/buefy-next/rollup.config.mjs | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/buefy-next/rollup.config.mjs b/packages/buefy-next/rollup.config.mjs
index e9a95badd..162a1e098 100644
--- a/packages/buefy-next/rollup.config.mjs
+++ b/packages/buefy-next/rollup.config.mjs
@@ -30,7 +30,6 @@ const components = fs
     )
 
 const JS_COMPONENTS = [
-    'datetimepicker',
 ]
 
 const entries = {

From cbb17fcf966a867d8bc3000998849f563cd3b5db Mon Sep 17 00:00:00 2001
From: Kikuo Emoto <kemoto@codemonger.io>
Date: Wed, 9 Oct 2024 09:48:21 +0900
Subject: [PATCH 4/4] feat(docs): rewrite datetimepicker docs in TS

Rewrites the documentation for `Datetimepicker` in the
`src/pages/components/datetimepicker` folder in TypeScript.

In `examples/ExEditable.vue`:
- Adds a missing field `enableSeconds` to `data`, which is `false`
  anyway

Other changes are straightforward. Here is a tip for TypeScript
migration:
- Explicitly import and register components so that they are type
  checked. Note that no type-checking is performed for globally
  registered components.
---
 .../datetimepicker/Datetimepicker.vue         | 29 ++++++++++++-------
 .../{datetimepicker.js => datetimepicker.ts}  |  0
 .../datetimepicker/examples/ExEditable.vue    | 17 ++++++++---
 .../datetimepicker/examples/ExFooter.vue      | 16 +++++++---
 .../datetimepicker/examples/ExGranularity.vue | 15 +++++++---
 .../datetimepicker/examples/ExInline.vue      | 10 +++++--
 .../datetimepicker/examples/ExRange.vue       | 13 +++++++--
 .../datetimepicker/examples/ExSimple.vue      | 17 ++++++++---
 8 files changed, 85 insertions(+), 32 deletions(-)
 rename packages/docs/src/pages/components/datetimepicker/api/{datetimepicker.js => datetimepicker.ts} (100%)

diff --git a/packages/docs/src/pages/components/datetimepicker/Datetimepicker.vue b/packages/docs/src/pages/components/datetimepicker/Datetimepicker.vue
index 7504d16f4..903b9e819 100644
--- a/packages/docs/src/pages/components/datetimepicker/Datetimepicker.vue
+++ b/packages/docs/src/pages/components/datetimepicker/Datetimepicker.vue
@@ -26,29 +26,38 @@
     </div>
 </template>
 
-<script>
-    import api from './api/datetimepicker'
+<script lang="ts">
+    import { defineComponent } from 'vue'
+
     import { shallowFields } from '@/utils'
+    import ApiView from '@/components/ApiView.vue'
+    import Example from '@/components/Example.vue'
+
+    import api from './api/datetimepicker'
 
-    import ExSimple from './examples/ExSimple'
+    import ExSimple from './examples/ExSimple.vue'
     import ExSimpleCode from './examples/ExSimple.vue?raw'
 
-    import ExEditable from './examples/ExEditable'
+    import ExEditable from './examples/ExEditable.vue'
     import ExEditableCode from './examples/ExEditable.vue?raw'
 
-    import ExRange from './examples/ExRange'
+    import ExRange from './examples/ExRange.vue'
     import ExRangeCode from './examples/ExRange.vue?raw'
 
-    import ExFooter from './examples/ExFooter'
+    import ExFooter from './examples/ExFooter.vue'
     import ExFooterCode from './examples/ExFooter.vue?raw'
 
-    import ExInline from './examples/ExInline'
+    import ExInline from './examples/ExInline.vue'
     import ExInlineCode from './examples/ExInline.vue?raw'
 
-    import ExGranularity from './examples/ExGranularity'
+    import ExGranularity from './examples/ExGranularity.vue'
     import ExGranularityCode from './examples/ExGranularity.vue?raw'
 
-    export default {
+    export default defineComponent({
+        components: {
+            ApiView,
+            Example
+        },
         data() {
             return {
                 api,
@@ -68,5 +77,5 @@
                 ExGranularityCode
             }
         }
-    }
+    })
 </script>
diff --git a/packages/docs/src/pages/components/datetimepicker/api/datetimepicker.js b/packages/docs/src/pages/components/datetimepicker/api/datetimepicker.ts
similarity index 100%
rename from packages/docs/src/pages/components/datetimepicker/api/datetimepicker.js
rename to packages/docs/src/pages/components/datetimepicker/api/datetimepicker.ts
diff --git a/packages/docs/src/pages/components/datetimepicker/examples/ExEditable.vue b/packages/docs/src/pages/components/datetimepicker/examples/ExEditable.vue
index 081c34906..f134ccf5f 100644
--- a/packages/docs/src/pages/components/datetimepicker/examples/ExEditable.vue
+++ b/packages/docs/src/pages/components/datetimepicker/examples/ExEditable.vue
@@ -32,11 +32,20 @@
     </section>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { BDatetimepicker, BField, BSelect } from '@ntohq/buefy-next'
+
+export default defineComponent({
+    components: {
+        BDatetimepicker,
+        BField,
+        BSelect
+    },
     data() {
         return {
-            locale: undefined // Browser locale
+            locale: undefined, // Browser locale
+            enableSeconds: false
         }
     },
     computed: {
@@ -52,5 +61,5 @@ export default {
             return dtf.format(new Date(2020, 11, 11, 13, 14, 15))
         }
     }
-}
+})
 </script>
diff --git a/packages/docs/src/pages/components/datetimepicker/examples/ExFooter.vue b/packages/docs/src/pages/components/datetimepicker/examples/ExFooter.vue
index c57a4ac38..59cc5ce39 100644
--- a/packages/docs/src/pages/components/datetimepicker/examples/ExFooter.vue
+++ b/packages/docs/src/pages/components/datetimepicker/examples/ExFooter.vue
@@ -23,12 +23,20 @@
     </b-field>
 </template>
 
-<script>
-    export default {
+<script lang="ts">
+    import { defineComponent } from 'vue'
+    import { BButton, BDatetimepicker, BField } from '@ntohq/buefy-next'
+
+    export default defineComponent({
+        components: {
+            BButton,
+            BDatetimepicker,
+            BField
+        },
         data() {
             return {
-                datetime: new Date()
+                datetime: new Date() as Date | null
             }
         }
-    }
+    })
 </script>
diff --git a/packages/docs/src/pages/components/datetimepicker/examples/ExGranularity.vue b/packages/docs/src/pages/components/datetimepicker/examples/ExGranularity.vue
index f78ff8cf4..4c4707110 100644
--- a/packages/docs/src/pages/components/datetimepicker/examples/ExGranularity.vue
+++ b/packages/docs/src/pages/components/datetimepicker/examples/ExGranularity.vue
@@ -8,8 +8,15 @@
         </b-datetimepicker>
     </b-field>
 </template>
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { BDatetimepicker, BField } from '@ntohq/buefy-next'
+
+export default defineComponent({
+    components: {
+        BDatetimepicker,
+        BField
+    },
     data() {
         return {
             timepicker: {
@@ -18,5 +25,5 @@ export default {
             }
         }
     },
-}
-</script>
\ No newline at end of file
+})
+</script>
diff --git a/packages/docs/src/pages/components/datetimepicker/examples/ExInline.vue b/packages/docs/src/pages/components/datetimepicker/examples/ExInline.vue
index 856c17076..676bd06dd 100644
--- a/packages/docs/src/pages/components/datetimepicker/examples/ExInline.vue
+++ b/packages/docs/src/pages/components/datetimepicker/examples/ExInline.vue
@@ -2,12 +2,16 @@
     <b-datetimepicker v-model="datetime" inline></b-datetimepicker>
 </template>
 
-<script>
-    export default {
+<script lang="ts">
+    import { defineComponent } from 'vue'
+    import { BDatetimepicker } from '@ntohq/buefy-next'
+
+    export default defineComponent({
+        components: { BDatetimepicker },
         data() {
             return {
                 datetime: new Date()
             }
         }
-    }
+    })
 </script>
diff --git a/packages/docs/src/pages/components/datetimepicker/examples/ExRange.vue b/packages/docs/src/pages/components/datetimepicker/examples/ExRange.vue
index 72e0f7d48..d1a6a43d9 100644
--- a/packages/docs/src/pages/components/datetimepicker/examples/ExRange.vue
+++ b/packages/docs/src/pages/components/datetimepicker/examples/ExRange.vue
@@ -8,8 +8,15 @@
     </b-field>
 </template>
 
-<script>
-    export default {
+<script lang="ts">
+    import { defineComponent } from 'vue'
+    import { BDatetimepicker, BField } from '@ntohq/buefy-next'
+
+    export default defineComponent({
+        components: {
+            BDatetimepicker,
+            BField
+        },
         data() {
             const min = new Date()
             min.setDate(min.getDate() - 7)
@@ -26,5 +33,5 @@
                 maxDatetime: max
             }
         }
-    }
+    })
 </script>
diff --git a/packages/docs/src/pages/components/datetimepicker/examples/ExSimple.vue b/packages/docs/src/pages/components/datetimepicker/examples/ExSimple.vue
index 60f71eea2..2a6b00107 100644
--- a/packages/docs/src/pages/components/datetimepicker/examples/ExSimple.vue
+++ b/packages/docs/src/pages/components/datetimepicker/examples/ExSimple.vue
@@ -64,11 +64,20 @@
     </section>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { BDatetimepicker, BField, BSelect, BSwitch } from '@ntohq/buefy-next'
+
+export default defineComponent({
+    components: {
+        BDatetimepicker,
+        BField,
+        BSelect,
+        BSwitch
+    },
     data() {
         return {
-            selected: new Date(),
+            selected: new Date() as Date | null,
             showWeekNumber: false,
             enableSeconds: false,
             hourFormat: undefined, // Browser locale
@@ -81,5 +90,5 @@ export default {
             this.selected = null
         }
     }
-}
+})
 </script>