Use same ordering of script props in all components (#18590)

- Following official docs: https://vuejs.org/guide/typescript/composition-api.html#typing-component-props
- For the sake of consistency, e.g. so that it's easily "grep-able"

app/src/app.vue

@@ -20,7 +20,7 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { useSystem } from '@/composables/use-system';
 import { useAppStore } from '@/stores/app';
 import { useServerStore } from '@/stores/server';

app/src/components/v-fancy-select.vue

@@ -33,7 +33,7 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { computed } from 'vue';
 
 export type FancySelectItem = {

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

@@ -67,7 +67,7 @@ export default {
 };
 </script>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { FieldNode } from '@/composables/use-field-tree';
 import formatTitle from '@directus/format-title';
 import { getFunctionsForType } from '@directus/utils';

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

@@ -32,7 +32,7 @@
 	</v-list>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { FieldNode, useFieldTree } from '@/composables/use-field-tree';
 import { useFieldsStore } from '@/stores/fields';
 import { Field } from '@directus/types';

app/src/components/v-form/validation-errors.vue

@@ -44,7 +44,7 @@
 	</v-notice>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { useI18n } from 'vue-i18n';
 import { computed } from 'vue';
 import { ValidationError, Field } from '@directus/types';

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

@@ -5,7 +5,7 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 interface Props {
 	/** The extension type of the file */
 	ext: string;

app/src/components/v-image.vue

@@ -2,7 +2,7 @@
 	<img ref="imageElement" :src="srcData" v-bind="attrsWithoutSrc" />
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { ref, computed, onMounted, onUnmounted, useAttrs, watch } from 'vue';
 import { omit } from 'lodash';
 import api from '@/api';

app/src/components/v-input.vue

@@ -61,7 +61,7 @@ export default {
 };
 </script>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { keyMap, systemKeys } from '@/composables/use-shortcut';
 import slugify from '@sindresorhus/slugify';
 import { omit } from 'lodash';

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

@@ -97,7 +97,7 @@
 	</thead>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { useI18n } from 'vue-i18n';
 import { computed, ref, useSlots } from 'vue';
 import { ShowSelect } from '@directus/types';

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

@@ -38,7 +38,7 @@
 	</tr>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { computed } from 'vue';
 import { ShowSelect } from '@directus/types';
 import { Header, Item } from './types';

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

@@ -90,7 +90,7 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { i18n } from '@/lang/';
 import { hideDragImage } from '@/utils/hide-drag-image';
 import { ShowSelect } from '@directus/types';

app/src/displays/boolean/boolean.vue

@@ -8,7 +8,7 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { computed } from 'vue';
 
 const props = withDefaults(

app/src/displays/collection/collection.vue

@@ -6,7 +6,7 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { useCollection } from '@directus/composables';
 import { toRefs } from 'vue';
 

app/src/displays/color/color.vue

@@ -5,7 +5,7 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { isHex } from '@/utils/is-hex';
 import { cssVar } from '@directus/utils/browser';
 import Color from 'color';

app/src/displays/datetime/datetime.vue

@@ -2,7 +2,7 @@
 	<span class="datetime">{{ displayValue }}</span>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { useI18n } from 'vue-i18n';
 import { ref, watch, computed, onMounted, onUnmounted } from 'vue';
 import { localizedFormat } from '@/utils/localized-format';

app/src/displays/file/file.vue

@@ -15,7 +15,7 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { readableMimeType } from '@/utils/readable-mime-type';
 import { computed, ref } from 'vue';
 

app/src/displays/formatted-json-value/formatted-json-value.vue

@@ -23,7 +23,7 @@
 	</span>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { render } from 'micromustache';
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';

app/src/displays/rating/rating.vue

@@ -13,7 +13,7 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { computed } from 'vue';
 
 type InterfaceOptions = {

app/src/interfaces/_system/system-fields/system-fields.vue

@@ -38,7 +38,7 @@
 	</template>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { useFieldsStore } from '@/stores/fields';
 import { Field } from '@directus/types';
 import { computed } from 'vue';

app/src/interfaces/_system/system-inline-fields/system-inline-fields.vue

@@ -7,7 +7,7 @@
 	/>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { FIELD_TYPES_SELECT } from '@/constants';
 import { translate } from '@/utils/translate-object-values';
 import formatTitle from '@directus/format-title';

app/src/interfaces/_system/system-input-translated-string/input-translated-string.vue

@@ -83,7 +83,7 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useTranslationStrings, TranslationString } from '@/composables/use-translation-strings';

app/src/interfaces/_system/system-raw-editor/system-raw-editor.vue

@@ -4,7 +4,7 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { useWindowSize } from '@/composables/use-window-size';
 import { parseJSON } from '@directus/utils';
 import CodeMirror from 'codemirror';

app/src/interfaces/_system/system-token/system-token.vue

@@ -36,7 +36,7 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { computed, ref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import api from '@/api';

app/src/interfaces/select-color/select-color.vue

@@ -156,7 +156,7 @@
 	</v-menu>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import Color from 'color';
 import { isHex } from '@/utils/is-hex';
 import { cssVar } from '@directus/utils/browser';

app/src/layouts/calendar/calendar.vue

@@ -7,7 +7,7 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { onMounted, onUnmounted, computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 

app/src/layouts/cards/actions.vue

@@ -6,7 +6,7 @@
 	</transition>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 defineProps<{
 	itemCount?: number;
 	showingCount: string;

app/src/layouts/cards/options.vue

@@ -44,7 +44,7 @@
 	</v-detail>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { useI18n } from 'vue-i18n';
 
 import { useSync } from '@directus/composables';

app/src/layouts/kanban/actions.vue

@@ -10,7 +10,7 @@ export default {
 };
 </script>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { useI18n } from 'vue-i18n';
 
 interface Props {

app/src/layouts/kanban/kanban.vue

@@ -107,7 +107,7 @@ export default {
 };
 </script>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { addTokenToURL } from '@/api';
 import { getRootPath } from '@/utils/get-root-path';
 import { ref } from 'vue';

app/src/layouts/kanban/options.vue

@@ -116,7 +116,7 @@ export default {
 };
 </script>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { useSync } from '@directus/extensions-sdk';
 import { useI18n } from 'vue-i18n';
 

app/src/layouts/map/actions.vue

@@ -6,7 +6,7 @@
 	</transition>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 defineProps<{
 	itemCount?: number;
 	showingCount: string;

app/src/layouts/map/options.vue

@@ -37,7 +37,7 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { useAppStore } from '@/stores/app';
 import { getBasemapSources } from '@/utils/geometry/basemap';
 import { useSync } from '@directus/composables';

app/src/layouts/tabular/actions.vue

@@ -6,7 +6,7 @@
 	</transition>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 defineProps<{
 	itemCount?: number;
 	showingCount: string;

app/src/layouts/tabular/options.vue

@@ -27,7 +27,7 @@ export default {
 };
 </script>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { useI18n } from 'vue-i18n';
 import { useSync } from '@directus/composables';
 import { Field } from '@directus/types';

app/src/layouts/tabular/tabular.vue

@@ -177,7 +177,7 @@ export default {
 };
 </script>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { HeaderRaw } from '@/components/v-table/types';
 import { AliasFields, useAliasFields } from '@/composables/use-alias-fields';
 import { usePageSize } from '@/composables/use-page-size';

app/src/modules/content/components/navigation-bookmark.vue

@@ -85,7 +85,7 @@
 	</v-list-item>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { usePresetsStore } from '@/stores/presets';
 import { useUserStore } from '@/stores/user';
 import { translate } from '@/utils/translate-literal';

app/src/modules/content/routes/item.vue

@@ -214,7 +214,7 @@
 	</private-view>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { computed, ref, unref, toRefs } from 'vue';
 import { useI18n } from 'vue-i18n';
 

app/src/modules/files/components/replace-file.vue

@@ -16,7 +16,7 @@
 	</v-dialog>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { useI18n } from 'vue-i18n';
 
 interface Props {

app/src/modules/files/routes/item.vue

@@ -174,7 +174,7 @@
 	</private-view>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import api from '@/api';
 import { useEditsGuard } from '@/composables/use-edits-guard';
 import { useItem } from '@/composables/use-item';

app/src/modules/insights/routes/dashboard.vue

@@ -199,7 +199,7 @@
 	</private-view>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { AppTile } from '@/components/v-workspace-tile.vue';
 import { useEditsGuard } from '@/composables/use-edits-guard';
 import { useShortcut } from '@/composables/use-shortcut';

app/src/modules/insights/routes/panel-configuration.vue

@@ -93,7 +93,7 @@
 	</v-drawer>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { useDialogRoute } from '@/composables/use-dialog-route';
 import { useExtension } from '@/composables/use-extension';
 import { useExtensions } from '@/extensions';

app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced-validation.vue

@@ -20,7 +20,7 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { storeToRefs } from 'pinia';
 import { useI18n } from 'vue-i18n';
 import { syncFieldDetailStoreProperty, useFieldDetailStore } from '../store';

app/src/modules/settings/routes/data-model/field-detail/field-detail-advanced/field-detail-advanced.vue

@@ -10,7 +10,7 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import FieldDetailAdvancedSchema from './field-detail-advanced-schema.vue';
 import FieldDetailAdvancedRelationship from './field-detail-advanced-relationship.vue';
 import FieldDetailAdvancedField from './field-detail-advanced-field.vue';

app/src/modules/settings/routes/data-model/field-detail/field-detail-simple/field-detail-simple.vue

@@ -38,7 +38,7 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { computed, toRefs, watch } from 'vue';
 import { Collection } from '@directus/types';
 import { useI18n } from 'vue-i18n';

app/src/modules/settings/routes/data-model/field-detail/field-detail.vue

@@ -38,7 +38,7 @@
 	</v-drawer>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { ref, computed, toRefs, watch } from 'vue';
 import { LocalType } from '@directus/types';
 import { useFieldDetailStore } from './store/';

app/src/modules/settings/routes/flows/components/logs-sidebar-detail.vue

@@ -80,7 +80,7 @@
 	</v-drawer>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { useRevisions } from '@/composables/use-revisions';
 import { useExtensions } from '@/extensions';
 import type { FlowRaw } from '@directus/types';

app/src/modules/settings/routes/flows/components/operation.vue

@@ -137,7 +137,7 @@
 	</v-workspace-tile>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { useExtensions } from '@/extensions';
 import { Vector2 } from '@/utils/vector2';
 import { FlowRaw } from '@directus/types';

app/src/modules/settings/routes/flows/flow-drawer.vue

@@ -118,7 +118,7 @@
 	</v-drawer>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import api from '@/api';
 import { useFlowsStore } from '@/stores/flows';
 import { unexpectedError } from '@/utils/unexpected-error';

app/src/modules/settings/routes/flows/overview.vue

@@ -129,7 +129,7 @@
 	</private-view>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import api from '@/api';
 import { Sort, Header } from '@/components/v-table/types';
 import { router } from '@/router';

app/src/modules/settings/routes/roles/item/components/permissions-overview-header.vue

@@ -9,7 +9,7 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { useI18n } from 'vue-i18n';
 
 const { t } = useI18n();

app/src/modules/settings/routes/roles/item/components/role-info-sidebar-detail.vue

@@ -22,7 +22,7 @@
 	</sidebar-detail>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { useI18n } from 'vue-i18n';
 import { useClipboard } from '@/composables/use-clipboard';
 

app/src/modules/settings/routes/translation-strings/collection.vue

@@ -60,7 +60,7 @@
 	</private-view>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { HeaderRaw as TableHeader } from '@/components/v-table/types';

app/src/modules/settings/routes/translation-strings/translation-strings-drawer.vue

@@ -46,7 +46,7 @@
 	</v-drawer>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { ref, computed, watch, toRefs } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { isEqual } from 'lodash';

app/src/modules/settings/routes/translation-strings/translation-strings-tooltip.vue

@@ -34,7 +34,7 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { computed } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useUserStore } from '@/stores/user';

app/src/modules/users/routes/collection.vue

@@ -165,7 +165,7 @@
 	</component>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import UsersInvite from '@/views/private/components/users-invite.vue';
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';

app/src/panels/bar-chart/panel-bar-chart.vue

@@ -4,7 +4,7 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { useFieldsStore } from '@/stores/fields';
 import { PanelFunction, StringConditionalFillOperators } from '@/types/panels';
 import type { Filter } from '@directus/types';

app/src/panels/line-chart/panel-line-chart.vue

@@ -4,7 +4,7 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { useFieldsStore } from '@/stores/fields';
 import { PanelFunction } from '@/types/panels';
 import type { Filter } from '@directus/types';

app/src/panels/meter/panel-meter.vue

@@ -24,7 +24,7 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { BaseConditionalFillOperators, PanelFunction } from '@/types/panels';
 import { computed, unref } from 'vue';
 import { useI18n } from 'vue-i18n';

app/src/panels/pie-chart/panel-pie-chart.vue

@@ -4,7 +4,7 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { useFieldsStore } from '@/stores/fields';
 import { PanelFunction, StringConditionalFillOperators } from '@/types/panels';
 import { cssVar } from '@directus/utils/browser';

app/src/panels/relational-variable/panel-relational-variable.vue

@@ -36,7 +36,7 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { computed, ref } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useInsightsStore } from '@/stores/insights';

app/src/panels/variable/panel-variable.vue

@@ -12,7 +12,7 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { Type } from '@directus/types';
 import { computed } from 'vue';
 import { useInsightsStore } from '@/stores/insights';

app/src/routes/accept-invite.vue

@@ -31,7 +31,7 @@
 	</public-view>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import api, { RequestError } from '@/api';
 import { translateAPIError } from '@/lang';
 import { jwtPayload } from '@/utils/jwt-payload';

app/src/routes/login/components/continue-as.vue

@@ -15,7 +15,7 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import api from '@/api';
 import { logout } from '@/auth';
 import { hydrate } from '@/hydrate';

app/src/routes/login/components/login-form/ldap-form.vue

@@ -14,7 +14,7 @@
 	</form>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { RequestError } from '@/api';
 import { login } from '@/auth';
 import { translateAPIError } from '@/lang';

app/src/routes/login/login.vue

@@ -31,7 +31,7 @@
 	</public-view>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { DEFAULT_AUTH_DRIVER, DEFAULT_AUTH_PROVIDER } from '@/constants';
 import { useAppStore } from '@/stores/app';
 import { useServerStore } from '@/stores/server';

app/src/views/private/components/archive-sidebar-detail.vue

@@ -15,7 +15,7 @@
 	</sidebar-detail>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { computed, ref, unref, watch } from 'vue';
 import { useI18n } from 'vue-i18n';
 import { useRouter } from 'vue-router';

app/src/views/private/components/bookmark-add.vue

@@ -35,7 +35,7 @@
 	</v-dialog>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { reactive } from 'vue';
 import { useI18n } from 'vue-i18n';
 

app/src/views/private/components/drawer-batch.vue

@@ -23,7 +23,7 @@
 	</v-drawer>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import api from '@/api';
 import { VALIDATION_TYPES } from '@/constants';
 import { APIError } from '@/types/error';

app/src/views/private/components/drawer-collection.vue

@@ -60,7 +60,7 @@
 	</component>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { useExtension } from '@/composables/use-extension';
 import { usePreset } from '@/composables/use-preset';
 import SearchInput from '@/views/private/components/search-input.vue';

app/src/views/private/components/export-sidebar-detail.vue

@@ -231,7 +231,7 @@
 	</sidebar-detail>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import api from '@/api';
 import { usePermissionsStore } from '@/stores/permissions';
 import { getPublicURL } from '@/utils/get-root-path';

app/src/views/private/components/file-lightbox.vue

@@ -23,7 +23,7 @@
 	</v-dialog>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import api from '@/api';
 import { computed, ref, watch } from 'vue';
 

app/src/views/private/components/file-preview.vue

@@ -16,7 +16,7 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { addTokenToURL } from '@/api';
 import { getRootPath } from '@/utils/get-root-path';
 import { readableMimeType } from '@/utils/readable-mime-type';

app/src/views/private/components/flow-sidebar-detail.vue

@@ -51,7 +51,7 @@
 	</sidebar-detail>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import api from '@/api';
 import { useFlowsStore } from '@/stores/flows';
 import { notify } from '@/utils/notify';

app/src/views/private/components/folder-picker-list-item.vue

@@ -36,7 +36,7 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 type Folder = {
 	id: string;
 	name: string;

app/src/views/private/components/folder-picker.vue

@@ -33,7 +33,7 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { fetchAll } from '@/utils/fetch-all';
 import { unexpectedError } from '@/utils/unexpected-error';
 import { computed, ref } from 'vue';

app/src/views/private/components/header-bar-actions.vue

@@ -22,7 +22,7 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { ref } from 'vue';
 
 defineProps<{

app/src/views/private/components/header-bar.vue

@@ -38,7 +38,7 @@
 	</header>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { ref, onMounted, onUnmounted } from 'vue';
 import HeaderBarActions from './header-bar-actions.vue';
 

app/src/views/private/components/image-editor.vue

@@ -123,7 +123,7 @@
 	</v-drawer>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import api, { addTokenToURL } from '@/api';
 import { useSettingsStore } from '@/stores/settings';
 import { getRootPath } from '@/utils/get-root-path';

app/src/views/private/components/latency-indicator.vue

@@ -5,7 +5,7 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { useI18n } from 'vue-i18n';
 import { computed } from 'vue';
 import { useLatencyStore } from '@/stores/latency';

app/src/views/private/components/layout-sidebar-detail.vue

@@ -15,7 +15,7 @@
 	</sidebar-detail>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { useExtension } from '@/composables/use-extension';
 import { useExtensions } from '@/extensions';
 import { useSync } from '@directus/composables';

app/src/views/private/components/module-bar-avatar.vue

@@ -50,7 +50,7 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { addTokenToURL } from '@/api';
 import { useAppStore } from '@/stores/app';
 import { useNotificationsStore } from '@/stores/notifications';

app/src/views/private/components/module-bar-logo.vue

@@ -18,7 +18,7 @@
 	</component>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { useRequestsStore } from '@/stores/requests';
 import { useSettingsStore } from '@/stores/settings';
 import { computed, ref, toRefs, watch } from 'vue';

app/src/views/private/components/module-bar.vue

@@ -28,7 +28,7 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { computed } from 'vue';
 import ModuleBarLogo from './module-bar-logo.vue';
 import ModuleBarAvatar from './module-bar-avatar.vue';

app/src/views/private/components/notification-dialogs.vue

@@ -21,7 +21,7 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { useNotificationsStore } from '@/stores/notifications';
 import { useUserStore } from '@/stores/user';
 import { computed } from 'vue';

app/src/views/private/components/notification-item.vue

@@ -15,7 +15,7 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { useNotificationsStore } from '@/stores/notifications';
 
 const props = withDefaults(

app/src/views/private/components/notifications-drawer.vue

@@ -52,7 +52,7 @@
 	</v-drawer>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import api from '@/api';
 import { Header as TableHeader } from '@/components/v-table/types';
 import { useAppStore } from '@/stores/app';

app/src/views/private/components/notifications-group.vue

@@ -17,7 +17,7 @@
 	</transition-group>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { useNotificationsStore } from '@/stores/notifications';
 import { toRefs } from 'vue';
 import NotificationItem from './notification-item.vue';

app/src/views/private/components/notifications-preview.vue

@@ -25,7 +25,7 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { storeToRefs } from 'pinia';
 import { useI18n } from 'vue-i18n';
 import SidebarButton from './sidebar-button.vue';

app/src/views/private/components/project-info.vue

@@ -8,7 +8,7 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { computed } from 'vue';
 import LatencyIndicator from './latency-indicator.vue';
 import { useServerStore } from '@/stores/server';

app/src/views/private/components/refresh-sidebar-detail.vue

@@ -9,7 +9,7 @@
 	</sidebar-detail>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { useI18n } from 'vue-i18n';
 import { computed, ref, watch } from 'vue';
 

app/src/views/private/components/render-display.vue

@@ -19,7 +19,7 @@
 	</v-error-boundary>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { useExtension } from '@/composables/use-extension';
 import { toRefs } from 'vue';
 

app/src/views/private/components/revision-item.vue

@@ -20,7 +20,7 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { Revision } from '@/types/revisions';
 import { userName } from '@/utils/user-name';
 import { format } from 'date-fns';

app/src/views/private/components/revisions-date-group.vue

@@ -12,7 +12,7 @@
 	</v-detail>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { RevisionsByDate } from '@/types/revisions';
 import { ref } from 'vue';
 

app/src/views/private/components/revisions-drawer-detail.vue

@@ -35,7 +35,7 @@
 	</sidebar-detail>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { useRevisions } from '@/composables/use-revisions';
 import { abbreviateNumber } from '@directus/utils';
 import { ref, toRefs, watch } from 'vue';

app/src/views/private/components/revisions-drawer-picker.vue

@@ -22,7 +22,7 @@
 	</v-menu>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { Revision } from '@/types/revisions';
 import { localizedFormat } from '@/utils/localized-format';
 import { userName } from '@/utils/user-name';

app/src/views/private/components/revisions-drawer-preview.vue

@@ -10,7 +10,7 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { useI18n } from 'vue-i18n';
 import { Revision } from '@/types/revisions';
 

app/src/views/private/components/revisions-drawer-updates-change.vue

@@ -13,7 +13,7 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { useI18n } from 'vue-i18n';
 import { computed } from 'vue';
 import { ArrayChange } from 'diff';

app/src/views/private/components/revisions-drawer-updates.vue

@@ -19,7 +19,7 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { useFieldsStore } from '@/stores/fields';
 import { Revision } from '@/types/revisions';
 import { diffArrays, diffJson, diffWordsWithSpace } from 'diff';

app/src/views/private/components/revisions-drawer.vue

@@ -40,7 +40,7 @@
 	</div>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { Revision } from '@/types/revisions';
 import { useSync } from '@directus/composables';
 import { isEqual } from 'lodash';

app/src/views/private/components/save-options.vue

@@ -27,7 +27,7 @@
 	</v-menu>
 </template>
 
-<script lang="ts" setup>
+<script setup lang="ts">
 import { useI18n } from 'vue-i18n';
 import { translateShortcut } from '@/utils/translate-shortcut';