chore: Typescript all the things

owncloud · Jan 13, 2023 · 7c43b38 · 7c43b38
1 parent 3829f4b
commit 7c43b38
Show file tree

Hide file tree

Showing 95 changed files with 416 additions and 280 deletions.
diff --git a/packages/design-system/docs/components/status/ComponentsList.vue b/packages/design-system/docs/components/status/ComponentsList.vue
@@ -63,7 +63,7 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
 import orderBy from '../../utils/orderBy'
 
 export default {

diff --git a/packages/design-system/docs/components/tokens/AllTokens.vue b/packages/design-system/docs/components/tokens/AllTokens.vue
@@ -33,7 +33,8 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
 import designTokens from '../../../src/assets/tokens/ods.json'
 
 /**
@@ -42,14 +43,14 @@ import designTokens from '../../../src/assets/tokens/ods.json'
  * To edit these tokens and add more, see
  * [/src/tokens/](https://github.com/owncloud/owncloud-design-system/blob/master/src/tokens).
  */
-export default {
+export default defineComponent({
   name: 'AllTokens',
   data() {
     return {
       tokens: Object.values(designTokens)
     }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>

diff --git a/packages/design-system/docs/components/tokens/ColorTokens.vue b/packages/design-system/docs/components/tokens/ColorTokens.vue
@@ -19,7 +19,8 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
 import designTokens from '../../../src/assets/tokens/ods.json'
 
 /**
@@ -29,15 +30,15 @@ import designTokens from '../../../src/assets/tokens/ods.json'
  * like destructive actions and error messages. To edit the colors, see
  * [/src/tokens/color.yml](https://github.com/owncloud/owncloud-design-system/blob/master/src/tokens/color.yml).
  */
-export default {
+export default defineComponent({
   name: 'ColorTokens',
 
   computed: {
     tokens() {
       return Object.values(designTokens).filter((token) => token.name.startsWith('oc-color-'))
     }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>

diff --git a/packages/design-system/docs/components/tokens/IconList.vue b/packages/design-system/docs/components/tokens/IconList.vue
@@ -66,7 +66,9 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
+
 import OcIcon from '../../../src/components/OcIcon/OcIcon.vue'
 import OcTable from '../../../src/components/OcTable/OcTable.vue'
 import OcSearchBar from '../../../src/components/OcSearchBar/OcSearchBar'
@@ -79,7 +81,7 @@ const req = require.context('../../../src/assets/icons/', true, /^\.\/.*\.svg$/)
  *  Icons made by <a href="https://remixicon.com/">Remixicon</a> and, in the case of the `resource-type-*` icons, <a href="https://fontawesome.com/">Font Awesome</a> (available under the [CC-BY-4.0](https://creativecommons.org/licenses/by/4.0/) license).
  * </p>
  */
-export default {
+export default defineComponent({
   name: 'IconList',
   components: { HighlightedText, OcSearchBar, OcIcon, OcTable },
   data() {
@@ -147,7 +149,7 @@ export default {
       return filename.split('.').slice(0, -1).join('.').substring(2)
     })
   }
-}
+})
 </script>
 
 <docs>

diff --git a/packages/design-system/docs/components/tokens/SpacingTokens.vue b/packages/design-system/docs/components/tokens/SpacingTokens.vue
@@ -12,7 +12,9 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
+
 import designTokens from '../../../src/assets/tokens/ods.json'
 
 /**
@@ -22,14 +24,14 @@ import designTokens from '../../../src/assets/tokens/ods.json'
  * To edit spacing, see
  * [/src/tokens/spacing.yml](https://github.com/owncloud/web/blob/master/packages/design-system/src/tokens/spacing.yml).
  */
-export default {
+export default defineComponent({
   name: 'SpacingTokens',
   computed: {
     tokens() {
       return Object.values(designTokens).filter((token) => token.name.startsWith('oc-space'))
     }
   }
-}
+})
 </script>
 
 <style lang="scss" scoped>

diff --git a/packages/design-system/src/components/OcAccordion/OcAccordion.vue b/packages/design-system/src/components/OcAccordion/OcAccordion.vue
@@ -5,9 +5,10 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
 import OcAccordionItem from '../OcAccordionItem/OcAccordionItem.vue'
-export default {
+export default defineComponent({
   name: 'OcAccordion',
   // eslint-disable-next-line vue/no-unused-components
   components: { OcAccordionItem },
@@ -144,7 +145,7 @@ export default {
       this.expandedIdsInternal = this.expandedIdsInternal.filter((expandedId) => expandedId !== id)
     }
   }
-}
+})
 </script>
 
 <style lang="scss">

diff --git a/packages/design-system/src/components/OcAvatarCount/OcAvatarCount.vue b/packages/design-system/src/components/OcAvatarCount/OcAvatarCount.vue
@@ -6,11 +6,13 @@
   />
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
+
 /**
  * Count of avatars which weren't displayed.
  */
-export default {
+export default defineComponent({
   name: 'OcAvatarCount',
   status: 'ready',
   release: '2.1.0',
@@ -37,7 +39,7 @@ export default {
       return Math.floor(this.size / 2.5) + 'px'
     }
   }
-}
+})
 </script>
 
 <style lang="scss">

diff --git a/packages/design-system/src/components/OcAvatarFederated/OcAvatarFederated.vue b/packages/design-system/src/components/OcAvatarFederated/OcAvatarFederated.vue
@@ -10,10 +10,11 @@
   />
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
 import OcAvatarItem from '../OcAvatarItem/OcAvatarItem.vue'
 
-export default {
+export default defineComponent({
   name: 'OcAvatarFederated',
   status: 'ready',
   release: '10.0.0',
@@ -55,7 +56,7 @@ export default {
       default: 'small'
     }
   }
-}
+})
 </script>
 
 <docs>

diff --git a/packages/design-system/src/components/OcAvatarGroup/OcAvatarGroup.vue b/packages/design-system/src/components/OcAvatarGroup/OcAvatarGroup.vue
@@ -8,10 +8,11 @@
   />
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
 import OcAvatarItem from '../OcAvatarItem/OcAvatarItem.vue'
 
-export default {
+export default defineComponent({
   name: 'OcAvatarGroup',
   status: 'ready',
   release: '10.0.0',
@@ -53,7 +54,7 @@ export default {
       default: 'small'
     }
   }
-}
+})
 </script>
 
 <docs>

diff --git a/packages/design-system/src/components/OcAvatarGuest/OcAvatarGuest.vue b/packages/design-system/src/components/OcAvatarGuest/OcAvatarGuest.vue
@@ -10,10 +10,11 @@
   />
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
 import OcAvatarItem from '../OcAvatarItem/OcAvatarItem.vue'
 
-export default {
+export default defineComponent({
   name: 'OcAvatarGuest',
   status: 'ready',
   release: '10.0.0',
@@ -55,7 +56,7 @@ export default {
       default: 'small'
     }
   }
-}
+})
 </script>
 
 <docs>

diff --git a/packages/design-system/src/components/OcAvatarItem/OcAvatarItem.vue b/packages/design-system/src/components/OcAvatarItem/OcAvatarItem.vue
@@ -19,10 +19,11 @@
   </div>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
 import OcIcon from '../OcIcon/OcIcon.vue'
 
-export default {
+export default defineComponent({
   name: 'OcAvatarItem',
   status: 'ready',
   release: '10.0.0',
@@ -130,7 +131,7 @@ export default {
       return backgroundColors[Math.floor(Math.random() * backgroundColors.length)]
     }
   }
-}
+})
 </script>
 
 <style lang="scss">

diff --git a/packages/design-system/src/components/OcAvatarLink/OcAvatarLink.vue b/packages/design-system/src/components/OcAvatarLink/OcAvatarLink.vue
@@ -8,10 +8,12 @@
   />
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
+
 import OcAvatarItem from '../OcAvatarItem/OcAvatarItem.vue'
 
-export default {
+export default defineComponent({
   name: 'OcAvatarLink',
   status: 'ready',
   release: '2.1.0',
@@ -53,7 +55,7 @@ export default {
       default: 'small'
     }
   }
-}
+})
 </script>
 
 <docs>

diff --git a/packages/design-system/src/components/OcAvatars/OcAvatars.vue b/packages/design-system/src/components/OcAvatars/OcAvatars.vue
@@ -29,7 +29,7 @@
   </span>
 </template>
 
-<script>
+<script lang="ts">
 import { shareType } from '../../utils/shareType.js'
 import OcAvatar from '../OcAvatar/OcAvatar.vue'
 import OcAvatarCount from '../OcAvatarCount/OcAvatarCount.vue'

diff --git a/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue b/packages/design-system/src/components/OcBreadcrumb/OcBreadcrumb.vue
@@ -89,7 +89,9 @@
   </nav>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
+
 import { AVAILABLE_SIZES } from '../../helpers/constants'
 
 import OcButton from '../OcButton/OcButton.vue'
@@ -102,7 +104,7 @@ import OcIcon from '../OcIcon/OcIcon.vue'
  *  - text: mandatory element, holds the text which is to be displayed in the breadcrumb
  *  - to: optional element, the vue router link
  */
-export default {
+export default defineComponent({
   name: 'OcBreadcrumb',
   status: 'ready',
   release: '1.0.0',
@@ -175,7 +177,7 @@ export default {
       return this.items.length - 1 === index ? 'page' : null
     }
   }
-}
+})
 </script>
 
 <style lang="scss">
@@ -274,7 +276,7 @@ export default {
       padding: var(--oc-space-small);
     }
   }
-}
+})
 </style>
 
 <docs>

diff --git a/packages/design-system/src/components/OcButton/OcButton.vue b/packages/design-system/src/components/OcButton/OcButton.vue
@@ -12,7 +12,7 @@
   </component>
 </template>
 
-<script>
+<script lang="ts">
 import { getSizeClass } from '../../utils/sizeClasses'
 
 export default {
@@ -578,8 +578,10 @@ Every button has to have an accessible name. It cannot be provided by a text bet
   </oc-table-simple>
   </div>
 </template>
-<script>
-export default {
+<script lang="ts">
+import { defineComponent } from 'vue'
+
+export default defineComponent{
   computed: {
     variations() {
       return [

diff --git a/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue b/packages/design-system/src/components/OcCheckbox/OcCheckbox.vue
@@ -13,13 +13,14 @@
   </span>
 </template>
 
-<script>
+<script lang="ts">
+import { defineComponent } from 'vue'
 import { getSizeClass } from '../../utils/sizeClasses'
 import uniqueId from '../../utils/uniqueId'
 /**
  * A checkbox input element. The checkbox is either checked or unchecked.
  */
-export default {
+export default defineComponent({
   name: 'OcCheckbox',
   status: 'ready',
   release: '1.0.0',
@@ -136,7 +137,7 @@ export default {
       }
     }
   }
-}
+})
 </script>
 
 <style lang="scss">