refactor: use ts definitions for defineProps

Author: edenchazard

app/components/DragonPortrait.vue

@@ -24,20 +24,17 @@
 </template>
 
 <script setup lang="ts">
-import type { PropType } from 'vue';
 import type { PortraitData } from '../shared/types';
 
-defineProps({
-  data: {
-    type: Object as PropType<PortraitData>,
-    required: true,
+withDefaults(
+  defineProps<{
+    data: PortraitData;
+    gen?: number;
+  }>(),
+  {
+    gen: 1,
   },
-  gen: {
-    type: Number,
-    required: false,
-    default: 1,
-  },
-});
+);
 /*,
 computed:{
     // determines whether to provide a full size image or a small image

app/components/DragonProblem.vue

@@ -25,29 +25,21 @@
 </template>
 
 <script setup lang="ts">
-import type { PropType } from 'vue';
 import type { MaybePartialLineageWithMetadata } from '../shared/types';
 import { hasParents } from '../shared/utils.js';
 import { Lineage } from '../shared/lineageHandler';
 
-defineProps({
-  dragon: {
-    type: Object as PropType<MaybePartialLineageWithMetadata>,
-    required: true,
+withDefaults(
+  defineProps<{
+    dragon: MaybePartialLineageWithMetadata;
+    highlight?: string;
+    error?: string;
+  }>(),
+  {
+    highlight: '',
+    error: '',
   },
-
-  highlight: {
-    type: String,
-    required: false,
-    default: '',
-  },
-
-  error: {
-    type: String,
-    required: false,
-    default: '',
-  },
-});
+);
 </script>
 <style scoped>
 .dragon-formatting-block {

app/components/FeedbackPanel.vue

@@ -32,7 +32,6 @@
 </template>
 <script setup lang="ts">
 import { onBeforeUnmount, ref } from 'vue';
-import type { PropType } from 'vue';
 
 const Feedbacks = {
   none: 'none',
@@ -53,13 +52,14 @@ interface Properties {
 
 type Feedback = Partial<Properties>;
 
-const props = defineProps({
-  globalSettings: {
-    type: Object as PropType<Feedback>,
-    required: false,
-    default: () => {},
+const props = withDefaults(
+  defineProps<{
+    globalSettings?: Feedback;
+  }>(),
+  {
+    globalSettings: () => ({}),
   },
-});
+);
 
 defineEmits<{
   (e: 'closed'): void;

app/components/GhostBreedUpload.vue

@@ -27,16 +27,15 @@ import settings from '../shared/settings.js';
 import DragonPortrait from './DragonPortrait.vue';
 import { placeholder } from '../shared/breeds.js';
 
-const props = defineProps({
-  label: {
-    type: String,
-    required: true,
+const props = withDefaults(
+  defineProps<{
+    label: string;
+    disabled?: boolean;
+  }>(),
+  {
+    disabled: false,
   },
-  disabled: {
-    type: Boolean,
-    default: false,
-  },
-});
+);
 
 const emit = defineEmits<{
   (e: 'tileChosen', base64Data: string): void;

app/components/InputTextbox.vue

@@ -70,7 +70,6 @@
 </template>
 <script setup lang="ts">
 import { ref, computed } from 'vue';
-import type { PropType } from 'vue';
 import { useDebounceFn, useShare } from '@vueuse/core';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
@@ -81,40 +80,30 @@ const emit = defineEmits<{
   (e: 'copyFail'): void;
 }>();
 
-const props = defineProps({
-  type: {
-    type: String as PropType<'input' | 'textarea'>,
-    default: 'input',
-  },
-  tooltipTimeout: {
-    type: Number,
-    default: 2000,
-  },
-  showCopyButton: {
-    type: Boolean,
-    default: false,
-  },
-  showShareButton: {
-    type: Boolean,
-    default: false,
-  },
-  shareParams: {
-    type: Object as PropType<{
+const props = withDefaults(
+  defineProps<{
+    type?: 'input' | 'textarea';
+    tooltipTimeout?: number;
+    showCopyButton?: boolean;
+    showShareButton?: boolean;
+    shareParams?: {
       title?: string;
       text?: string;
       buttonTitle?: string;
-    }>,
-    default: () => ({}),
-  },
-  copyButtonTitle: {
-    type: String,
-    default: 'Copy text',
-  },
-  selectAllOnFocus: {
-    type: Boolean,
-    default: false,
+    };
+    copyButtonTitle?: string;
+    selectAllOnFocus?: boolean;
+  }>(),
+  {
+    type: 'input',
+    tooltipTimeout: 2000,
+    showCopyButton: false,
+    showShareButton: false,
+    shareParams: () => ({}),
+    copyButtonTitle: 'Copy text',
+    selectAllOnFocus: false,
   },
-});
+);
 
 const model = defineModel<string>({ required: true, default: '' });
 

app/components/LineageBuilderToolbar.vue

@@ -214,7 +214,6 @@
 
 <script setup lang="ts">
 import { computed, reactive, ref } from 'vue';
-import type { PropType } from 'vue';
 import { useResizeObserver } from '@vueuse/core';
 import type {
   BreedEntry,
@@ -393,16 +392,10 @@ const dialogs = reactive({
   showGenerateDialog: false,
 });
 
-defineProps({
-  config: {
-    type: Object as PropType<LineageConfig>,
-    required: true,
-  },
-  tree: {
-    type: Object as PropType<PartialLineage>,
-    required: true,
-  },
-});
+defineProps<{
+  config: LineageConfig;
+  tree: PartialLineage;
+}>();
 
 const emit = defineEmits<{
   (e: 'addParents'): void;

app/components/LineageView.vue

@@ -18,7 +18,6 @@
 </template>
 
 <script setup lang="ts">
-import type { PropType } from 'vue';
 import type {
   LineageConfig,
   PartialLineageWithMetadata,
@@ -28,22 +27,20 @@ import LineageViewNode from './LineageViewNode.vue';
 import { Lineage } from '../shared/lineageHandler';
 import LineageWrapper from './LineageWrapper.vue';
 
-const props = defineProps({
-  root: {
-    type: Object as PropType<PartialLineageWithMetadata> | null,
-    required: true,
-    default: null,
-  },
-  config: {
-    type: Object as PropType<LineageConfig>,
-    required: false,
-    default: () => ({
+const props = withDefaults(
+  defineProps<{
+    root?: PartialLineageWithMetadata | null;
+    config?: LineageConfig;
+  }>(),
+  {
+    root: null,
+    config: () => ({
       showLabels: true,
       showInterface: false,
       disabled: true,
     }),
   },
-});
+);
 
 const generations = computed(() =>
   props.root ? Lineage(props.root).generations() : 0,

app/components/LineageViewGenerationCounter.vue

@@ -12,17 +12,19 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-const props = defineProps({
-  count: {
-    type: Number,
-    default: 1,
+const props = withDefaults(
+  defineProps<{
+    count?: number;
+    /**
+     * when set to -1, the lineage will not be cut off at any gen.
+     */
+    limit?: number;
+  }>(),
+  {
+    count: 1,
+    limit: -1,
   },
-  // when set to 1, the lineage will not be cut off at any gen
-  limit: {
-    type: Number,
-    default: -1,
-  },
-});
+);
 
 const gens = computed<number[]>(() => {
   let length: number;

app/components/LineageViewNode.vue

@@ -120,7 +120,6 @@
 <script setup lang="ts">
 /* eslint-disable vue/no-mutating-props */
 import { computed } from 'vue';
-import type { PropType } from 'vue';
 import type {
   BreedEntry,
   PartialLineageWithMetadata,
@@ -143,24 +142,16 @@ import { placeholder } from '../shared/breeds.js';
 import vOnLongPress from '../directives/long-press/vue-3-long-press';
 import useBreedSelector from '../composables/useBreedSelector';
 
-const props = defineProps({
-  // Dragon properties
-  data: {
-    type: Object as PropType<PartialLineageWithMetadata>,
-    required: true,
+const props = withDefaults(
+  defineProps<{
+    data: PartialLineageWithMetadata;
+    disabled?: boolean;
+    nodesFromRoot: number;
+  }>(),
+  {
+    disabled: true,
   },
-  // Whether to disable the click
-  disabled: {
-    type: Boolean,
-    default: true,
-    required: false,
-  },
-  // How many gens is this?
-  nodesFromRoot: {
-    type: Number,
-    required: true,
-  },
-});
+);
 
 const ls = localStorage;
 const appStore = useAppStore();

app/components/LineageViewNodeButton.vue

@@ -15,16 +15,11 @@
 <script setup lang="ts">
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
 
-defineProps({
-  title: {
-    type: String,
-    required: true,
-  },
-  icon: {
-    type: String,
-    required: true,
-  },
-});
+defineProps<{
+  title: string;
+  icon: string;
+}>();
+
 const emit = defineEmits<{
   (e: 'click'): void;
 }>();