wip

src/client/components/ui/button.vue

@@ -14,8 +14,8 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({
+import { defineComponent } from 'vue';
+export default defineComponent({
 	props: {
 		type: {
 			type: String,

src/client/components/ui/container.vue

@@ -22,10 +22,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faAngleUp, faAngleDown } from '@fortawesome/free-solid-svg-icons';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		showHeader: {
 			type: Boolean,

src/client/components/ui/hr.vue

@@ -3,8 +3,8 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({});
+import { defineComponent } from 'vue';
+export default defineComponent({});
 </script>
 
 <style lang="scss" scoped>

src/client/components/ui/info.vue

@@ -7,10 +7,10 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import { faInfoCircle, faExclamationTriangle } from '@fortawesome/free-solid-svg-icons';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		warn: {
 			type: Boolean,

src/client/components/ui/input.vue

@@ -69,11 +69,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import debounce from 'v-debounce';
 import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons';
 
-export default Vue.extend({
+export default defineComponent({
 	directives: {
 		debounce
 	},

src/client/components/ui/pagination.vue

@@ -14,11 +14,11 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 import MkButton from './button.vue';
 import paging from '../../scripts/paging';
 
-export default Vue.extend({
+export default defineComponent({
 	mixins: [
 		paging({}),
 	],

src/client/components/ui/radio.vue

@@ -17,8 +17,8 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({
+import { defineComponent } from 'vue';
+export default defineComponent({
 	model: {
 		prop: 'model',
 		event: 'change'

src/client/components/ui/range.vue

@@ -20,7 +20,7 @@
 
 <script lang="ts">
 import Vue from "vue";
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		value: {
 			type: Number,

src/client/components/ui/select.vue

@@ -20,9 +20,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		value: {
 			required: false

src/client/components/ui/switch.vue

@@ -26,8 +26,8 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
-export default Vue.extend({
+import { defineComponent } from 'vue';
+export default defineComponent({
 	model: {
 		prop: 'value',
 		event: 'change'

src/client/components/ui/textarea.vue

@@ -19,9 +19,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		value: {
 			required: false

src/client/components/ui/tooltip.vue

@@ -7,9 +7,9 @@
 </template>
 
 <script lang="ts">
-import Vue from 'vue';
+import { defineComponent } from 'vue';
 
-export default Vue.extend({
+export default defineComponent({
 	props: {
 		source: {
 			required: true,