feat(docs): rewrite docs for datepicker in TS

Rewrites the documentation for the datepicker components in the `src/pages/components/datepicker` folder in TypeScript. All the changes are straightforward. Here is a TypeScript migration tip: - Explicitly import and register components so that they are type checked. No type-checking is performed for globally registered components.
ntohq · Jan 13, 2025 · d02a730 · d02a730
1 parent d7e0464
commit d02a730
Show file tree

Hide file tree

Showing 16 changed files with 154 additions and 56 deletions.
diff --git a/packages/docs/src/pages/components/datepicker/Datepicker.vue b/packages/docs/src/pages/components/datepicker/Datepicker.vue
@@ -85,51 +85,62 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
+    import { defineComponent } from 'vue'
+
+    import { shallowFields } from '@/utils'
+    import ApiView from '@/components/ApiView.vue'
+    import Example from '@/components/Example.vue'
+    import VariablesView from '@/components/VariablesView.vue'
+
     import api from './api/datepicker'
     import variables from './variables/datepicker'
-    import { shallowFields } from '@/utils'
 
-    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 ExHeader from './examples/ExHeader'
+    import ExHeader from './examples/ExHeader.vue'
     import ExHeaderCode from './examples/ExHeader.vue?raw'
 
-    import ExProgrammatically from './examples/ExProgrammatically'
+    import ExProgrammatically from './examples/ExProgrammatically.vue'
     import ExProgrammaticallyCode from './examples/ExProgrammatically.vue?raw'
 
-    import ExTrigger from './examples/ExTrigger'
+    import ExTrigger from './examples/ExTrigger.vue'
     import ExTriggerCode from './examples/ExTrigger.vue?raw'
 
-    import ExMonth from './examples/ExMonth'
+    import ExMonth from './examples/ExMonth.vue'
     import ExMonthCode from './examples/ExMonth.vue?raw'
 
-    import ExInline from './examples/ExInline'
+    import ExInline from './examples/ExInline.vue'
     import ExInlineCode from './examples/ExInline.vue?raw'
 
-    import ExUnselectable from './examples/ExUnselectable'
+    import ExUnselectable from './examples/ExUnselectable.vue'
     import ExUnselectableCode from './examples/ExUnselectable.vue?raw'
 
-    import ExEvents from './examples/ExEvents'
+    import ExEvents from './examples/ExEvents.vue'
     import ExEventsCode from './examples/ExEvents.vue?raw'
 
-    import ExRangeInput from './examples/ExRangeInput'
+    import ExRangeInput from './examples/ExRangeInput.vue'
     import ExRangeInputCode from './examples/ExRangeInput.vue?raw'
 
-    import ExMultipleInput from './examples/ExMultipleInput'
+    import ExMultipleInput from './examples/ExMultipleInput.vue'
     import ExMultipleInputCode from './examples/ExMultipleInput.vue?raw'
 
-    export default {
+    export default defineComponent({
+        components: {
+            ApiView,
+            Example,
+            VariablesView
+        },
         data() {
             return {
                 api,
@@ -164,5 +175,5 @@
                 ExMultipleInputCode
             }
         }
-    }
+    })
 </script>
diff --git a/...s/components/datepicker/api/datepicker.js → ...s/components/datepicker/api/datepicker.ts b/...s/components/datepicker/api/datepicker.js → ...s/components/datepicker/api/datepicker.ts
diff --git a/packages/docs/src/pages/components/datepicker/examples/ExEditable.vue b/packages/docs/src/pages/components/datepicker/examples/ExEditable.vue
@@ -29,8 +29,16 @@
     </section>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { BDatepicker, BField, BSelect } from '@ntohq/buefy-next'
+
 export default {
+    components: {
+        BDatepicker,
+        BField,
+        BSelect
+    },
     data() {
         return {
             locale: undefined // Browser locale

diff --git a/packages/docs/src/pages/components/datepicker/examples/ExEvents.vue b/packages/docs/src/pages/components/datepicker/examples/ExEvents.vue
@@ -14,10 +14,18 @@
     </span>
 </template>
 
-<script>
+<script lang="ts">
+    import { defineComponent } from 'vue'
+    import { BDatepicker, BField, BSwitch } from '@ntohq/buefy-next'
+
     const thisMonth = new Date().getMonth()
 
-    export default {
+    export default defineComponent({
+        components: {
+            BDatepicker,
+            BField,
+            BSwitch
+        },
         computed: {
             indicators() {
                 return this.bars ? 'bars' : 'dots'
@@ -74,5 +82,5 @@
                 bars: false
             }
         }
-    }
+    })
 </script>
diff --git a/packages/docs/src/pages/components/datepicker/examples/ExFooter.vue b/packages/docs/src/pages/components/datepicker/examples/ExFooter.vue
@@ -20,12 +20,20 @@
     </b-field>
 </template>
 
-<script>
-    export default {
+<script lang="ts">
+    import { defineComponent } from 'vue'
+    import { BButton, BDatepicker, BField } from '@ntohq/buefy-next'
+
+    export default defineComponent({
+        components: {
+            BButton,
+            BDatepicker,
+            BField
+        },
         data() {
             return {
-                date: new Date()
+                date: new Date() as Date | null
             }
         }
-    }
+    })
 </script>
diff --git a/packages/docs/src/pages/components/datepicker/examples/ExHeader.vue b/packages/docs/src/pages/components/datepicker/examples/ExHeader.vue
@@ -24,12 +24,20 @@
     </b-field>
 </template>
 
-<script>
-    export default {
+<script lang="ts">
+    import { defineComponent } from 'vue'
+    import { BAutocomplete, BDatepicker, BField } from '@ntohq/buefy-next'
+
+    export default defineComponent({
+        components: {
+            BAutocomplete,
+            BDatepicker,
+            BField
+        },
         data() {
             return {
                 date: new Date(),
-                month: null,
+                month: null as string | null,
                 months: [
                     { name: 'January', value: 0 },
                     { name:'February', value: 1 },
@@ -47,7 +55,7 @@
             }
         },
         methods: {
-            selectMonth(option) {
+            selectMonth(option: { value: number } | undefined) {
                 if (option) {
                     this.date = new Date(this.date)
                     this.date.setMonth(option.value)
@@ -59,5 +67,5 @@
                 item.value == this.date.getMonth()
             )[0].name
         }
-    }
+    })
 </script>
diff --git a/packages/docs/src/pages/components/datepicker/examples/ExInline.vue b/packages/docs/src/pages/components/datepicker/examples/ExInline.vue
@@ -5,12 +5,16 @@
     </b-datepicker>
 </template>
 
-<script>
-    export default {
+<script lang="ts">
+    import { defineComponent } from 'vue'
+    import { BDatepicker } from '@ntohq/buefy-next'
+
+    export default defineComponent({
+        components: { BDatepicker },
         data() {
             return {
                 date: new Date()
             }
         }
-    }
+    })
 </script>
diff --git a/packages/docs/src/pages/components/datepicker/examples/ExMonth.vue b/packages/docs/src/pages/components/datepicker/examples/ExMonth.vue
@@ -8,3 +8,7 @@
         </b-datepicker>
     </b-field>
 </template>
+
+<script setup lang="ts">
+import { BDatepicker, BField } from '@ntohq/buefy-next'
+</script>
diff --git a/packages/docs/src/pages/components/datepicker/examples/ExMultipleInput.vue b/packages/docs/src/pages/components/datepicker/examples/ExMultipleInput.vue
@@ -8,12 +8,19 @@
     </b-field>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { BDatepicker, BField } from '@ntohq/buefy-next'
+
+export default defineComponent({
+    components: {
+        BDatepicker,
+        BField
+    },
     data() {
         return {
             dates: []
         }
     }
-}
+})
 </script>
diff --git a/packages/docs/src/pages/components/datepicker/examples/ExProgrammatically.vue b/packages/docs/src/pages/components/datepicker/examples/ExProgrammatically.vue
@@ -7,14 +7,13 @@
                 placeholder="Select a date">
             </b-datepicker>
             <b-button
-                @click="$refs.datepicker.toggle()"
+                @click="($refs.datepicker as InstanceType<typeof BDatepicker>).toggle()"
                 icon-left="calendar-today"
                 type="is-primary" />
         </b-field>
     </section>
 </template>
 
-<script>
-// TODO: remove this empty script section after TypeScript migration completes
-export default {}
+<script setup lang="ts">
+import { BButton, BDatepicker, BField } from '@ntohq/buefy-next'
 </script>
diff --git a/packages/docs/src/pages/components/datepicker/examples/ExRange.vue b/packages/docs/src/pages/components/datepicker/examples/ExRange.vue
@@ -8,8 +8,15 @@
     </b-field>
 </template>
 
-<script>
+<script lang="ts">
+    import { defineComponent } from 'vue'
+    import { BDatepicker, BField } from '@ntohq/buefy-next'
+
     export default {
+        components: {
+            BDatepicker,
+            BField
+        },
         data() {
             const today = new Date()
 

diff --git a/packages/docs/src/pages/components/datepicker/examples/ExRangeInput.vue b/packages/docs/src/pages/components/datepicker/examples/ExRangeInput.vue
@@ -8,12 +8,19 @@
     </b-field>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { BDatepicker, BField } from '@ntohq/buefy-next'
+
+export default defineComponent({
+    components: {
+        BDatepicker,
+        BField
+    },
     data() {
         return {
             dates: []
         }
     }
-}
+})
 </script>
diff --git a/packages/docs/src/pages/components/datepicker/examples/ExSimple.vue b/packages/docs/src/pages/components/datepicker/examples/ExSimple.vue
@@ -40,11 +40,20 @@
     </section>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { BDatepicker, BField, BSelect, BSwitch } from '@ntohq/buefy-next'
+
+export default defineComponent({
+    components: {
+        BDatepicker,
+        BField,
+        BSelect,
+        BSwitch
+    },
     data() {
         return {
-            selected: new Date(),
+            selected: new Date() as Date | null,
             showWeekNumber: false,
             locale: undefined // Browser locale
         }
@@ -54,6 +63,6 @@ export default {
             this.selected = null
         }
     }
-}
+})
 </script>
 
diff --git a/packages/docs/src/pages/components/datepicker/examples/ExTrigger.vue b/packages/docs/src/pages/components/datepicker/examples/ExTrigger.vue
@@ -13,17 +13,26 @@
     </section>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { BButton, BDatepicker, BField, BInput } from '@ntohq/buefy-next'
+
+export default defineComponent({
+    components: {
+        BButton,
+        BDatepicker,
+        BField,
+        BInput
+    },
     data() {
         return {
-            selected: null
+            selected: null as Date | null
         }
     },
     computed: {
         selectedString() {
             return this.selected ? this.selected.toDateString() : ''
         }
     }
-}
+})
 </script>