TypeScript Rollout Tier 9 - Timepicker

packages/buefy-next/rollup.config.mjs

@@ -32,7 +32,6 @@ const components = fs
 const JS_COMPONENTS = [
     'datepicker',
     'datetimepicker',
-    'timepicker',
 ]
 
 const entries = {

packages/buefy-next/src/components/timepicker/Timepicker.spec.js → packages/buefy-next/src/components/timepicker/Timepicker.spec.ts

@@ -1,7 +1,9 @@
+import { beforeEach, describe, expect, it } from 'vitest'
 import { shallowMount } from '@vue/test-utils'
-import BTimepicker from '@components/timepicker/Timepicker'
+import type { VueWrapper } from '@vue/test-utils'
+import BTimepicker from '@components/timepicker/Timepicker.vue'
 
-let wrapper
+let wrapper: VueWrapper<InstanceType<typeof BTimepicker>>
 
 describe('BTimepicker', () => {
     beforeEach(() => {

packages/buefy-next/src/components/timepicker/Timepicker.vue

@@ -145,24 +145,24 @@
     </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
+
 import TimepickerMixin from '../../utils/TimepickerMixin'
-import Dropdown from '../dropdown/Dropdown.vue'
-import DropdownItem from '../dropdown/DropdownItem.vue'
-import Input from '../input/Input.vue'
-import Field from '../field/Field.vue'
-import Select from '../select/Select.vue'
-import Icon from '../icon/Icon.vue'
+import BDropdown from '../dropdown/Dropdown.vue'
+import BDropdownItem from '../dropdown/DropdownItem.vue'
+import BInput from '../input/Input.vue'
+import BField from '../field/Field.vue'
+import BSelect from '../select/Select.vue'
 
-export default {
+export default defineComponent({
     name: 'BTimepicker',
     components: {
-        [Input.name]: Input,
-        [Field.name]: Field,
-        [Select.name]: Select,
-        [Icon.name]: Icon,
-        [Dropdown.name]: Dropdown,
-        [DropdownItem.name]: DropdownItem
+        BInput,
+        BField,
+        BSelect,
+        BDropdown,
+        BDropdownItem
     },
     mixins: [TimepickerMixin],
     data() {
@@ -179,5 +179,5 @@ export default {
             }
         }
     }
-}
+})
 </script>

packages/buefy-next/src/components/timepicker/__snapshots__/Timepicker.spec.ts.snap

@@ -0,0 +1,41 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+
+exports[`BTimepicker > render correctly 1`] = `
+"<div class=\\"timepicker control\\">
+  <div class=\\"dropdown dropdown-menu-animation is-mobile-modal\\">
+    <div tabindex=\\"0\\" class=\\"dropdown-trigger\\" aria-haspopup=\\"true\\">
+      <b-input-stub type=\\"text\\" lazy=\\"false\\" passwordreveal=\\"false\\" iconclickable=\\"false\\" hascounter=\\"true\\" customclass=\\"\\" iconrightclickable=\\"false\\" autocomplete=\\"off\\" loading=\\"false\\" readonly=\\"\\" rounded=\\"false\\" use-html5-validation=\\"true\\"></b-input-stub>
+    </div>
+    <transition-stub name=\\"fade\\" appear=\\"false\\" persisted=\\"false\\" css=\\"true\\">
+      <div class=\\"background\\" aria-hidden=\\"true\\" style=\\"display: none;\\"></div>
+    </transition-stub>
+    <transition-stub name=\\"fade\\" appear=\\"false\\" persisted=\\"true\\" css=\\"true\\">
+      <div class=\\"dropdown-menu\\" aria-hidden=\\"true\\" style=\\"display: none;\\">
+        <div class=\\"dropdown-content\\" aria-modal=\\"true\\">
+          <div class=\\"dropdown-item\\" tabindex=\\"0\\">
+            <div class=\\"field\\">
+              <!--v-if-->
+              <div class=\\"field-body\\">
+                <div class=\\"field is-grouped is-grouped-centered\\">
+                  <!--v-if-->
+                  <div class=\\"control\\"><span class=\\"select is-empty\\"><select><option disabled=\\"\\" hidden=\\"\\">00</option><option value=\\"0\\">00</option><option value=\\"1\\">01</option><option value=\\"2\\">02</option><option value=\\"3\\">03</option><option value=\\"4\\">04</option><option value=\\"5\\">05</option><option value=\\"6\\">06</option><option value=\\"7\\">07</option><option value=\\"8\\">08</option><option value=\\"9\\">09</option><option value=\\"10\\">10</option><option value=\\"11\\">11</option><option value=\\"12\\">12</option><option value=\\"13\\">13</option><option value=\\"14\\">14</option><option value=\\"15\\">15</option><option value=\\"16\\">16</option><option value=\\"17\\">17</option><option value=\\"18\\">18</option><option value=\\"19\\">19</option><option value=\\"20\\">20</option><option value=\\"21\\">21</option><option value=\\"22\\">22</option><option value=\\"23\\">23</option></select></span>
+                    <!--v-if-->
+                  </div><span class=\\"control is-colon\\">:</span>
+                  <div class=\\"control\\"><span class=\\"select is-empty\\"><select><option disabled=\\"\\" hidden=\\"\\">00</option><option value=\\"0\\">00</option><option value=\\"1\\">01</option><option value=\\"2\\">02</option><option value=\\"3\\">03</option><option value=\\"4\\">04</option><option value=\\"5\\">05</option><option value=\\"6\\">06</option><option value=\\"7\\">07</option><option value=\\"8\\">08</option><option value=\\"9\\">09</option><option value=\\"10\\">10</option><option value=\\"11\\">11</option><option value=\\"12\\">12</option><option value=\\"13\\">13</option><option value=\\"14\\">14</option><option value=\\"15\\">15</option><option value=\\"16\\">16</option><option value=\\"17\\">17</option><option value=\\"18\\">18</option><option value=\\"19\\">19</option><option value=\\"20\\">20</option><option value=\\"21\\">21</option><option value=\\"22\\">22</option><option value=\\"23\\">23</option><option value=\\"24\\">24</option><option value=\\"25\\">25</option><option value=\\"26\\">26</option><option value=\\"27\\">27</option><option value=\\"28\\">28</option><option value=\\"29\\">29</option><option value=\\"30\\">30</option><option value=\\"31\\">31</option><option value=\\"32\\">32</option><option value=\\"33\\">33</option><option value=\\"34\\">34</option><option value=\\"35\\">35</option><option value=\\"36\\">36</option><option value=\\"37\\">37</option><option value=\\"38\\">38</option><option value=\\"39\\">39</option><option value=\\"40\\">40</option><option value=\\"41\\">41</option><option value=\\"42\\">42</option><option value=\\"43\\">43</option><option value=\\"44\\">44</option><option value=\\"45\\">45</option><option value=\\"46\\">46</option><option value=\\"47\\">47</option><option value=\\"48\\">48</option><option value=\\"49\\">49</option><option value=\\"50\\">50</option><option value=\\"51\\">51</option><option value=\\"52\\">52</option><option value=\\"53\\">53</option><option value=\\"54\\">54</option><option value=\\"55\\">55</option><option value=\\"56\\">56</option><option value=\\"57\\">57</option><option value=\\"58\\">58</option><option value=\\"59\\">59</option></select></span>
+                    <!--v-if-->
+                  </div>
+                  <!--v-if-->
+                  <!--v-if-->
+                  <!--v-if-->
+                </div>
+              </div>
+              <!--v-if-->
+            </div>
+            <!--v-if-->
+          </div>
+        </div>
+      </div>
+    </transition-stub>
+  </div>
+</div>"
+`;

packages/buefy-next/src/components/timepicker/index.js → packages/buefy-next/src/components/timepicker/index.ts

@@ -1,9 +1,11 @@
+import type { App } from 'vue'
+
 import Timepicker from './Timepicker.vue'
 
 import { registerComponent } from '../../utils/plugins'
 
 const Plugin = {
-    install(Vue) {
+    install(Vue: App) {
         registerComponent(Vue, Timepicker)
     }
 }

packages/docs/src/pages/components/timepicker/Timepicker.vue

@@ -26,29 +26,38 @@
     </div>
 </template>
 
-<script>
-    import api from './api/timepicker'
+<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/timepicker'
 
-    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 @@
                 ExInlineCode
             }
         }
-    }
+    })
 </script>

packages/docs/src/pages/components/timepicker/examples/ExEditable.vue

@@ -45,8 +45,17 @@
     </section>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { BField, BSelect, BSwitch, BTimepicker } from '@ntohq/buefy-next'
+
+export default defineComponent({
+    components: {
+        BField,
+        BSelect,
+        BSwitch,
+        BTimepicker
+    },
     data() {
         return {
             enableSeconds: false,
@@ -66,5 +75,5 @@ export default {
             return dtf.format(new Date(2000, 12, 12, 22, 23, 24))
         }
     }
-}
+})
 </script>

packages/docs/src/pages/components/timepicker/examples/ExFooter.vue

@@ -18,12 +18,20 @@
     </b-field>
 </template>
 
-<script>
-    export default {
+<script lang="ts">
+    import { defineComponent } from 'vue'
+    import { BButton, BField, BTimepicker } from '@ntohq/buefy-next'
+
+    export default defineComponent({
+        components: {
+            BButton,
+            BField,
+            BTimepicker
+        },
         data() {
             return {
-                time: new Date()
+                time: new Date() as Date | null
             }
         }
-    }
+    })
 </script>

packages/docs/src/pages/components/timepicker/examples/ExGranularity.vue

@@ -9,13 +9,20 @@
         </b-timepicker>
     </b-field>
 </template>
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { BField, BTimepicker } from '@ntohq/buefy-next'
+
+export default defineComponent({
+    components: {
+        BField,
+        BTimepicker
+    },
     data() {
         return {
             minutesGranularity: 15,
             hoursGranularity: 2
         }
     }
-}
-</script>>
+})
+</script>>

packages/docs/src/pages/components/timepicker/examples/ExInline.vue

@@ -2,8 +2,12 @@
     <b-timepicker v-model="time" inline></b-timepicker>
 </template>
 
-<script>
+<script lang="ts">
+    import { defineComponent } from 'vue'
+    import { BTimepicker } from '@ntohq/buefy-next'
+
     export default {
+        components: { BTimepicker },
         data() {
             return {
                 time: new Date()

packages/docs/src/pages/components/timepicker/examples/ExRange.vue

@@ -8,8 +8,15 @@
     </b-field>
 </template>
 
-<script>
-    export default {
+<script lang="ts">
+    import { defineComponent } from 'vue'
+    import { BField, BTimepicker } from '@ntohq/buefy-next'
+
+    export default defineComponent({
+        components: {
+            BField,
+            BTimepicker
+        },
         data() {
             const min = new Date()
             min.setHours(9)
@@ -22,5 +29,5 @@
                 maxTime: max
             }
         }
-    }
+    })
 </script>

packages/docs/src/pages/components/timepicker/examples/ExSimple.vue

@@ -43,14 +43,23 @@
     </section>
 </template>
 
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+import { BField, BSelect, BSwitch, BTimepicker } from '@ntohq/buefy-next'
+
+export default defineComponent({
+    components: {
+        BField,
+        BSelect,
+        BSwitch,
+        BTimepicker
+    },
     data() {
         return {
             hourFormat: undefined, // Browser locale
             enableSeconds: false,
             locale: undefined // Browser locale
         }
     }
-}
+})
 </script>