Use typescript in a few example components

owncloud · Mar 28, 2022 · 681072f · 681072f
1 parent 28a914d
commit 681072f
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 15 deletions.
diff --git a/packages/web-app-files/src/components/FilesList/ResourceTable.vue b/packages/web-app-files/src/components/FilesList/ResourceTable.vue
@@ -158,7 +158,7 @@
   </oc-table>
 </template>
 
-<script>
+<script lang="ts">
 import { DateTime } from 'luxon'
 import maxSize from 'popper-max-size-modifier'
 import { mapGetters } from 'vuex'
@@ -168,8 +168,10 @@ import * as path from 'path'
 import { determineSortFields } from '../../helpers/ui/resourceTable'
 import { useCapabilitySpacesEnabled } from 'web-pkg/src/composables'
 import Rename from '../../mixins/actions/rename'
+import { defineComponent, PropType } from '@vue/composition-api'
+import { Resource } from '../../helpers/resource'
 
-export default {
+export default defineComponent({
   mixins: [Rename],
   model: {
     prop: 'selection',
@@ -192,7 +194,7 @@ export default {
      * - opensInNewWindow: Open the link in a new window
      */
     resources: {
-      type: Array,
+      type: Array as PropType<Resource[]>,
       required: true
     },
     /**
@@ -282,7 +284,7 @@ export default {
       type: String,
       required: false,
       default: 'small',
-      validator: (size) => /(xsmall|small|medium|large|xlarge)/.test(size)
+      validator: (size: string) => /(xsmall|small|medium|large|xlarge)/.test(size)
     },
     /**
      * Enable Drag & Drop events
@@ -315,8 +317,10 @@ export default {
       type: String,
       required: false,
       default: undefined,
-      validator: (value) => {
-        return value === undefined || [SortDir.Asc, SortDir.Desc].includes(value)
+      validator: (value: string) => {
+        return (
+          value === undefined || [SortDir.Asc.toString(), SortDir.Desc.toString()].includes(value)
+        )
       }
     }
   },
@@ -663,7 +667,7 @@ export default {
       })
     }
   }
-}
+})
 </script>
 <style lang="scss">
 .resource-table {

diff --git a/packages/web-app-files/src/views/Personal.vue b/packages/web-app-files/src/views/Personal.vue
@@ -62,7 +62,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import { mapGetters, mapState, mapActions, mapMutations } from 'vuex'
 import isNil from 'lodash-es/isNil'
 import debounce from 'lodash-es/debounce'
@@ -89,10 +89,12 @@ import PQueue from 'p-queue'
 import { createLocationSpaces } from '../router'
 import { useResourcesViewDefaults } from '../composables'
 import { fetchResources } from '../services/folder/loaderPersonal'
+import { defineComponent } from '@vue/composition-api'
+import { Resource } from '../helpers/resource'
 
 const visibilityObserver = new VisibilityObserver()
 
-export default {
+export default defineComponent({
   components: {
     ResourceTable,
     QuickActions,
@@ -113,7 +115,7 @@ export default {
   ],
   setup() {
     return {
-      ...useResourcesViewDefaults(),
+      ...useResourcesViewDefaults<Resource, any, any[]>(),
       resourceTargetLocation: createLocationSpaces('files-spaces-personal-home')
     }
   },
@@ -324,5 +326,5 @@ export default {
       return this.selected?.includes(resource)
     }
   }
-}
+})
 </script>
diff --git a/packages/web-runtime/src/App.vue b/packages/web-runtime/src/App.vue
@@ -29,15 +29,16 @@
     />
   </div>
 </template>
-<script>
+<script lang="ts">
 import { mapGetters, mapState, mapActions } from 'vuex'
 import SkipTo from './components/SkipTo.vue'
 import LayoutApplication from './layouts/Application.vue'
 import LayoutLoading from './layouts/Loading.vue'
 import LayoutPlain from './layouts/Plain.vue'
 import { getBackendVersion, getWebVersion } from './container/versions'
+import { defineComponent } from '@vue/composition-api'
 
-export default {
+export default defineComponent({
   components: {
     SkipTo
   },
@@ -130,7 +131,7 @@ export default {
   },
 
   metaInfo() {
-    const metaInfo = {}
+    const metaInfo: any = {}
     if (this.favicon) {
       metaInfo.link = [{ rel: 'icon', href: this.favicon }]
     }
@@ -189,7 +190,7 @@ export default {
       return titleSegments.join(' - ')
     }
   }
-}
+})
 </script>
 <style lang="scss">
 body {