Bump @vue/composition-api from 0.3.4 to 0.4.0 (#137)

* Bump @vue/composition-api from 0.3.4 to 0.4.0

Bumps [@vue/composition-api](https://github.com/vuejs/composition-api) from 0.3.4 to 0.4.0.
- [Release notes](https://github.com/vuejs/composition-api/releases)
- [Changelog](https://github.com/vuejs/composition-api/blob/master/CHANGELOG.md)
- [Commits](https://github.com/vuejs/composition-api/compare/v0.3.4...v0.4.0)

Signed-off-by: dependabot-preview[bot] <support@dependabot.com>

* Replace createComponent with defineComponent

Co-authored-by: Rijk van Zanten <rijkvanzanten@me.com>

package.json

@@ -20,7 +20,7 @@
     "@types/debug": "^4.1.5",
     "@types/lodash": "^4.14.149",
     "@types/nanoid": "^2.1.0",
-    "@vue/composition-api": "^0.3.4",
+    "@vue/composition-api": "^0.4.0",
     "axios": "^0.19.2",
     "date-fns": "^2.9.0",
     "lodash": "^4.17.15",

src/components/v-avatar/v-avatar.vue

@@ -5,11 +5,11 @@
 </template>
 
 <script lang="ts">
-import { createComponent, computed } from '@vue/composition-api';
+import { defineComponent, computed } from '@vue/composition-api';
 import parseCSSVar from '../../utils/parse-css-var';
 import useSizeClass, { sizeProps } from '@/compositions/size-class';
 
-export default createComponent({
+export default defineComponent({
 	props: {
 		size: {
 			type: Number,

src/components/v-badge/v-badge.vue

@@ -10,9 +10,9 @@
 </template>
 
 <script lang="ts">
-import { createComponent, reactive, computed, Ref } from '@vue/composition-api';
+import { defineComponent, reactive, computed, Ref } from '@vue/composition-api';
 
-export default createComponent({
+export default defineComponent({
 	props: {
 		value: {
 			type: String,

src/components/v-breadcrumb/v-breadcrumb.vue

@@ -20,7 +20,7 @@
 </template>
 
 <script lang="ts">
-import { createComponent, ref, PropType } from '@vue/composition-api';
+import { defineComponent, ref, PropType } from '@vue/composition-api';
 
 interface Breadcrumb {
 	to: string;
@@ -29,7 +29,7 @@ interface Breadcrumb {
 	disabled?: boolean;
 }
 
-export default createComponent({
+export default defineComponent({
 	props: {
 		items: {
 			type: Array as PropType<Breadcrumb[]>,

src/components/v-button/v-button.vue

@@ -19,12 +19,12 @@
 </template>
 
 <script lang="ts">
-import { createComponent, reactive, computed, Ref, PropType } from '@vue/composition-api';
+import { defineComponent, reactive, computed, Ref, PropType } from '@vue/composition-api';
 import { Location } from 'vue-router';
 import parseCSSVar from '@/utils/parse-css-var';
 import useSizeClass, { sizeProps } from '@/compositions/size-class';
 
-export default createComponent({
+export default defineComponent({
 	props: {
 		block: {
 			type: Boolean,

src/components/v-checkbox/v-checkbox.vue

@@ -16,10 +16,10 @@
 </template>
 
 <script lang="ts">
-import { createComponent, computed } from '@vue/composition-api';
+import { defineComponent, computed } from '@vue/composition-api';
 import parseCSSVar from '@/utils/parse-css-var';
 
-export default createComponent({
+export default defineComponent({
 	model: {
 		prop: 'inputValue',
 		event: 'change'

src/components/v-chip/v-chip.vue

@@ -20,11 +20,11 @@
 </template>
 
 <script lang="ts">
-import { createComponent, ref, computed } from '@vue/composition-api';
+import { defineComponent, ref, computed } from '@vue/composition-api';
 import parseCSSVar from '@/utils/parse-css-var';
 import useSizeClass, { sizeProps } from '@/compositions/size-class';
 
-export default createComponent({
+export default defineComponent({
 	props: {
 		active: {
 			type: Boolean,

src/components/v-hover/v-hover.vue

@@ -5,9 +5,9 @@
 </template>
 
 <script lang="ts">
-import { createComponent, ref } from '@vue/composition-api';
+import { defineComponent, ref } from '@vue/composition-api';
 
-export default createComponent({
+export default defineComponent({
 	props: {
 		closeDelay: {
 			type: Number,

src/components/v-icon/v-icon.vue

@@ -11,14 +11,14 @@
 </template>
 
 <script lang="ts">
-import { createComponent, reactive, computed } from '@vue/composition-api';
+import { defineComponent, reactive, computed } from '@vue/composition-api';
 import parseCSSVar from '@/utils/parse-css-var';
 import CustomIconBox from './custom-icons/box.vue';
 import useSizeClass, { sizeProps } from '@/compositions/size-class';
 
 const customIcons: string[] = ['box'];
 
-export default createComponent({
+export default defineComponent({
 	components: { CustomIconBox },
 	props: {
 		name: {

src/components/v-input/v-input.vue

@@ -27,9 +27,9 @@
 </template>
 
 <script lang="ts">
-import { createComponent, computed } from '@vue/composition-api';
+import { defineComponent, computed } from '@vue/composition-api';
 
-export default createComponent({
+export default defineComponent({
 	inheritAttrs: false,
 	props: {
 		autofocus: {

src/components/v-item-group/v-item-group.readme.md

@@ -17,9 +17,9 @@ Provides the ability to make groups of items out of any nested component. Can be
 </template>
 
 <script lang="ts">
-import { createComponent, ref } from '@vue/composition-api';
+import { defineComponent, ref } from '@vue/composition-api';
 
-export default createComponent({
+export default defineComponent({
 	setup() {
 		const selection = ref([]);
 		return { selection };
@@ -102,9 +102,9 @@ By default, the `v-item-group` component will use the index of the child as mode
 </template>
 
 <script lang="ts">
-import { createComponent, ref } from '@vue/composition-api';
+import { defineComponent, ref } from '@vue/composition-api';
 
-export default createComponent({
+export default defineComponent({
 	setup() {
 		const selection = ref([]);
 		const items = [

src/components/v-item-group/v-item-group.vue

@@ -7,7 +7,7 @@
 <script lang="ts">
 import Vue, { VNode } from 'vue';
 import {
-	createComponent,
+	defineComponent,
 	ref,
 	provide,
 	PropType,
@@ -20,7 +20,7 @@ import { useGroupableParent } from '@/compositions/groupable';
 import arraysAreEqual from '@/utils/arrays-are-equal';
 import { notEmpty } from '@/utils/is-empty';
 
-export default createComponent({
+export default defineComponent({
 	props: {
 		mandatory: {
 			type: Boolean,

src/components/v-item-group/v-item.vue

@@ -5,10 +5,10 @@
 </template>
 
 <script lang="ts">
-import { createComponent, ref, provide } from '@vue/composition-api';
+import { defineComponent, ref, provide } from '@vue/composition-api';
 import { useGroupable } from '@/compositions/groupable';
 
-export default createComponent({
+export default defineComponent({
 	props: {
 		value: {
 			type: String,

src/components/v-list/v-list-item.vue

@@ -13,9 +13,9 @@
 
 <script lang="ts">
 import { Location } from 'vue-router';
-import { createComponent, PropType, computed } from '@vue/composition-api';
+import { defineComponent, PropType, computed } from '@vue/composition-api';
 
-export default createComponent({
+export default defineComponent({
 	props: {
 		dense: {
 			type: Boolean,

src/components/v-list/v-list.vue

@@ -5,9 +5,9 @@
 </template>
 
 <script lang="ts">
-import { createComponent } from '@vue/composition-api';
+import { defineComponent } from '@vue/composition-api';
 
-export default createComponent({
+export default defineComponent({
 	props: {
 		dense: {
 			type: Boolean,

src/components/v-notice/v-notice.vue

@@ -6,9 +6,9 @@
 </template>
 
 <script lang="ts">
-import { createComponent, computed } from '@vue/composition-api';
+import { defineComponent, computed } from '@vue/composition-api';
 
-export default createComponent({
+export default defineComponent({
 	props: {
 		success: {
 			type: Boolean,

src/components/v-overlay/v-overlay.vue

@@ -6,10 +6,10 @@
 </template>
 
 <script lang="ts">
-import { createComponent, computed } from '@vue/composition-api';
+import { defineComponent, computed } from '@vue/composition-api';
 import parseCSSVar from '@/utils/parse-css-var';
 
-export default createComponent({
+export default defineComponent({
 	props: {
 		active: {
 			type: Boolean,

src/components/v-progress/circular/v-progress-circular.vue

@@ -18,11 +18,11 @@
 </template>
 
 <script lang="ts">
-import { createComponent, computed } from '@vue/composition-api';
+import { defineComponent, computed } from '@vue/composition-api';
 import parseCSSVar from '@/utils/parse-css-var';
 import useSizeClass, { sizeProps } from '@/compositions/size-class';
 
-export default createComponent({
+export default defineComponent({
 	props: {
 		indeterminate: {
 			type: Boolean,

src/components/v-progress/linear/v-progress-linear.vue

@@ -22,10 +22,10 @@
 </template>
 
 <script lang="ts">
-import { createComponent, computed } from '@vue/composition-api';
+import { defineComponent, computed } from '@vue/composition-api';
 import parseCSSVar from '@/utils/parse-css-var';
 
-export default createComponent({
+export default defineComponent({
 	props: {
 		absolute: {
 			type: Boolean,

src/components/v-sheet/v-sheet.vue

@@ -5,9 +5,9 @@
 </template>
 
 <script lang="ts">
-import { createComponent, computed } from '@vue/composition-api';
+import { defineComponent, computed } from '@vue/composition-api';
 
-export default createComponent({
+export default defineComponent({
 	props: {},
 	setup() {
 		return {};

src/components/v-slider/v-slider.vue

@@ -32,11 +32,11 @@
 </template>
 
 <script lang="ts">
-import { createComponent, computed } from '@vue/composition-api';
+import { defineComponent, computed } from '@vue/composition-api';
 import parseCSSVar from '@/utils/parse-css-var';
 import { ChangeEvent } from 'react';
 
-export default createComponent({
+export default defineComponent({
 	props: {
 		showThumbLabel: {
 			type: Boolean,

src/components/v-switch/v-switch.vue

@@ -15,10 +15,10 @@
 </template>
 
 <script lang="ts">
-import { createComponent, computed } from '@vue/composition-api';
+import { defineComponent, computed } from '@vue/composition-api';
 import parseCSSVar from '@/utils/parse-css-var';
 
-export default createComponent({
+export default defineComponent({
 	model: {
 		prop: 'inputValue',
 		event: 'change'

src/components/v-table/_table-header.vue

@@ -34,12 +34,12 @@
 </template>
 
 <script lang="ts">
-import { createComponent, ref, onMounted, onBeforeUnmount, PropType } from '@vue/composition-api';
+import { defineComponent, ref, onMounted, onBeforeUnmount, PropType } from '@vue/composition-api';
 import useEventListener from '@/compositions/event-listener';
 import { Alignment, Header, Sort } from './types';
 import { throttle, clone } from 'lodash';
 
-export default createComponent({
+export default defineComponent({
 	props: {
 		headers: {
 			type: Array as PropType<Header[]>,

src/components/v-table/_table-row.vue

@@ -23,10 +23,10 @@
 </template>
 
 <script lang="ts">
-import { createComponent, PropType } from '@vue/composition-api';
+import { defineComponent, PropType } from '@vue/composition-api';
 import { Header, Sort } from './types';
 
-export default createComponent({
+export default defineComponent({
 	props: {
 		headers: {
 			type: Array as PropType<Header[]>,

src/components/v-table/v-table.readme.md

@@ -86,10 +86,10 @@ Adding the `show-resize` prop allows the user to resize the columns at will. You
 </template>
 
 <script>
-import { createComponent, ref } from '@vue/composition-api';
+import { defineComponent, ref } from '@vue/composition-api';
 import { HeaderRaw } from '@/components/v-table/types';
 
-export default createComponent({
+export default defineComponent({
 	setup() {
 		const headers = ref<HeaderRaw[]>([
 			{

src/components/v-table/v-table.vue

@@ -60,7 +60,7 @@
 
 <script lang="ts">
 import { VNode } from 'vue';
-import { createComponent, computed, ref, watch, Ref, PropType } from '@vue/composition-api';
+import { defineComponent, computed, ref, watch, Ref, PropType } from '@vue/composition-api';
 import { Header, HeaderRaw, ItemSelectEvent, Sort } from './types';
 import TableHeader from './_table-header.vue';
 import TableRow from './_table-row.vue';
@@ -77,7 +77,7 @@ const HeaderDefaults: Header = {
 	width: null
 };
 
-export default createComponent({
+export default defineComponent({
 	components: {
 		TableHeader,
 		TableRow,

src/compositions/readme.md

@@ -20,10 +20,10 @@ The composition removes the event handler whenever the component is unmounted.
 ### Usage
 
 ```js
-import { createComponent } from '@vue/composition-api';
+import { defineComponent } from '@vue/composition-api';
 import useEventListener from '@/compositions/event-listener';
 
-export default createComponent({
+export default defineComponent({
 	setup() {
 		useEventListener(window, 'scroll', onScroll);
 
@@ -43,10 +43,10 @@ Shared size class prop handler for base components. Adds `x-small`, `small`, `la
 ### Usage
 
 ```js
-import { createComponent } from '@vue/composition-api';
+import { defineComponent } from '@vue/composition-api';
 import useSizeClass, { sizeProps } from '@/compositions/size-class';
 
-export default createComponent({
+export default defineComponent({
 	props: {
 		...sizeProps
 	},
@@ -65,10 +65,10 @@ Returns ref string time from current datetime based on date-fns formatDistance.
 ### Usage
 
 ```js
-import { createComponent } from '@vue/composition-api';
+import { defineComponent } from '@vue/composition-api';
 import useTimeFromNow from '@/compositions/time-from-now';
 
-export default createComponent({
+export default defineComponent({
 	setup() {
 		const date = new Date('2020-01-01T13:55');
 		const timeFromNow = useTimeFromNow(date);
@@ -87,10 +87,10 @@ Returns a `ref` of `width` and `height` of the current window size. Updates the
 ### Usage
 
 ```js
-import { createComponent } from '@vue/composition-api';
+import { defineComponent } from '@vue/composition-api';
 import useWindowSize from '@/compositions/window-size';
 
-export default createComponent({
+export default defineComponent({
 	setup() {
 		const { width, height } = useWindowSize();
 	}

src/layouts/tabular/tabular.vue

@@ -5,9 +5,9 @@
 </template>
 
 <script lang="ts">
-import { createComponent } from '@vue/composition-api';
+import { defineComponent } from '@vue/composition-api';
 
-export default createComponent({
+export default defineComponent({
 	props: {},
 	setup() {
 		return {};

src/modules/collections/components/collections-navigation.vue

@@ -9,11 +9,11 @@
 </template>
 
 <script lang="ts">
-import { createComponent, computed } from '@vue/composition-api';
+import { defineComponent, computed } from '@vue/composition-api';
 import VueI18n from 'vue-i18n';
 import useNavigation from '../compositions/use-navigation';
 
-export default createComponent({
+export default defineComponent({
 	props: {},
 	setup() {
 		const { navItems } = useNavigation();

src/modules/collections/routes/collections-overview.vue

@@ -13,13 +13,13 @@
 </template>
 
 <script lang="ts">
-import { createComponent, computed } from '@vue/composition-api';
+import { defineComponent, computed } from '@vue/composition-api';
 import CollectionsNavigation from '../components/collections-navigation.vue';
 import { i18n } from '@/lang';
 import useNavigation, { NavItem } from '../compositions/use-navigation';
 import router from '@/router';
 
-export default createComponent({
+export default defineComponent({
 	components: {
 		CollectionsNavigation
 	},

src/routes/debug.vue

@@ -5,10 +5,10 @@
 </template>
 
 <script lang="ts">
-import { createComponent } from '@vue/composition-api';
+import { defineComponent } from '@vue/composition-api';
 import api from '@/api';
 
-export default createComponent({
+export default defineComponent({
 	props: {},
 	setup() {
 		return { forceLogout };

src/routes/login/login.vue

@@ -14,13 +14,13 @@
 </template>
 
 <script lang="ts">
-import { createComponent, ref } from '@vue/composition-api';
+import { defineComponent, ref } from '@vue/composition-api';
 import api from '@/api';
 import { useProjectsStore } from '@/stores/projects';
 import router from '@/router';
 import { login } from '@/auth';
 
-export default createComponent({
+export default defineComponent({
 	setup() {
 		const projectsStore = useProjectsStore();
 

src/routes/project-chooser/project-chooser.vue

@@ -8,8 +8,8 @@
 </template>
 
 <script lang="ts">
-import { createComponent } from '@vue/composition-api';
-export default createComponent({
+import { defineComponent } from '@vue/composition-api';
+export default defineComponent({
 	props: {},
 	setup() {
 		return {};

src/views/private/_drawer-detail-group.vue

@@ -5,9 +5,9 @@
 </template>
 
 <script lang="ts">
-import { createComponent, ref, watch, toRefs } from '@vue/composition-api';
+import { defineComponent, ref, watch, toRefs } from '@vue/composition-api';
 
-export default createComponent({
+export default defineComponent({
 	props: {
 		drawerOpen: {
 			type: Boolean,

src/views/private/_module-bar-logo.vue

@@ -11,12 +11,12 @@
 </template>
 
 <script lang="ts">
-import { createComponent, ref, computed, watch } from '@vue/composition-api';
+import { defineComponent, ref, computed, watch } from '@vue/composition-api';
 import { useProjectsStore } from '@/stores/projects';
 import { ProjectWithKey, ProjectError } from '@/stores/projects/types';
 import { useRequestsStore } from '@/stores/requests';
 
-export default createComponent({
+export default defineComponent({
 	setup() {
 		const projectsStore = useProjectsStore();
 		const requestsStore = useRequestsStore();

src/views/private/_module-bar.vue

@@ -8,12 +8,12 @@
 </template>
 
 <script lang="ts">
-import { createComponent, computed } from '@vue/composition-api';
+import { defineComponent, computed } from '@vue/composition-api';
 import ModuleBarLogo from './_module-bar-logo.vue';
 import { useProjectsStore } from '@/stores/projects';
 import { modules } from '@/modules/';
 
-export default createComponent({
+export default defineComponent({
 	components: {
 		ModuleBarLogo
 	},

src/views/private/drawer-detail/drawer-detail.vue

@@ -15,10 +15,10 @@
 </template>
 
 <script lang="ts">
-import { createComponent, PropType, computed, ref, Ref, inject } from '@vue/composition-api';
+import { defineComponent, PropType, computed, ref, Ref, inject } from '@vue/composition-api';
 import { useGroupable } from '@/compositions/groupable';
 
-export default createComponent({
+export default defineComponent({
 	props: {
 		icon: {
 			type: String,

src/views/private/private-view.vue

@@ -51,7 +51,7 @@
 </template>
 
 <script lang="ts">
-import { createComponent, ref, computed, watch, provide } from '@vue/composition-api';
+import { defineComponent, ref, computed, watch, provide } from '@vue/composition-api';
 import useWindowSize from '@/compositions/window-size';
 import ModuleBar from './_module-bar.vue';
 import api from '@/api';
@@ -60,7 +60,7 @@ import DrawerDetailGroup from './_drawer-detail-group.vue';
 // Breakpoints:
 // 600, 960, 1260, 1900
 
-export default createComponent({
+export default defineComponent({
 	components: {
 		ModuleBar,
 		DrawerDetailGroup

src/views/public/_logo.vue

@@ -10,9 +10,9 @@
 
 <script lang="ts">
 import { version } from '../../../package.json';
-import { createComponent } from '@vue/composition-api';
+import { defineComponent } from '@vue/composition-api';
 
-export default createComponent({
+export default defineComponent({
 	props: {
 		version: {
 			type: String,

src/views/public/public-view.vue

@@ -15,12 +15,12 @@
 
 <script lang="ts">
 import { version } from '../../../package.json';
-import { createComponent, computed } from '@vue/composition-api';
+import { defineComponent, computed } from '@vue/composition-api';
 import PublicViewLogo from './_logo.vue';
 import { useProjectsStore } from '@/stores/projects/';
 import { ProjectWithKey, ProjectError } from '@/stores/projects/types';
 
-export default createComponent({
+export default defineComponent({
 	components: {
 		PublicViewLogo
 	},

yarn.lock

@@ -2170,10 +2170,10 @@
     source-map "~0.6.1"
     vue-template-es2015-compiler "^1.9.0"
 
-"@vue/composition-api@^0.3.4":
-  version "0.3.4"
-  resolved "https://registry.yarnpkg.com/@vue/composition-api/-/composition-api-0.3.4.tgz#43d2c3377173cfe1d02e51e3342bcf0fbde9c4b6"
-  integrity sha512-aMbg/pEk0PSQAIFyWWLqbAmaCCTx1kFq+49KZslIBJH9Wqos7eEPLtMv4gGxd/EcciBIgfbtUXaXGg/O3mheRA==
+"@vue/composition-api@^0.4.0":
+  version "0.4.0"
+  resolved "https://registry.yarnpkg.com/@vue/composition-api/-/composition-api-0.4.0.tgz#04e600106687de719d587c704296aa4a5b37ca28"
+  integrity sha512-8QxZK3BBbn29vIoiso+UthT6JUbeS0gPBWAxDUK2EComWNHluaGVWXC9fAnUG+L6PM+ApkFE2dOlv5Oi/o+cSQ==
   dependencies:
     tslib "^1.9.3"