chore(ui): update UI vue version (#3575)

Co-authored-by: userquin <userquin@gmail.com>
Co-authored-by: Vladimir <sleuths.slews0s@icloud.com>

.eslintignore

@@ -9,3 +9,4 @@ coverage
 !.vitepress
 docs/.vitepress/cache/deps/*.*
 test/core/src/self
+test/workspaces/results.json

examples/vitesse/src/components.d.ts

@@ -1,11 +1,11 @@
-// generated by unplugin-vue-components
-// We suggest you to commit this file into source control
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// Generated by unplugin-vue-components
 // Read more: https://github.com/vuejs/core/pull/3399
-import '@vue/runtime-core'
-
 export {}
 
-declare module '@vue/runtime-core' {
+declare module 'vue' {
   export interface GlobalComponents {
     Foo: typeof import('./components/Foo.vue')['default']
     Hello: typeof import('./components/Hello.vue')['default']

packages/ui/client/auto-imports.d.ts

@@ -5,37 +5,60 @@
 export {}
 declare global {
   const EffectScope: typeof import('vue')['EffectScope']
+  const activeFileId: typeof import('./composables/params')['activeFileId']
   const asyncComputed: typeof import('@vueuse/core')['asyncComputed']
   const autoResetRef: typeof import('@vueuse/core')['autoResetRef']
+  const calcExternalLabels: typeof import('./composables/module-graph')['calcExternalLabels']
   const computed: typeof import('vue')['computed']
   const computedAsync: typeof import('@vueuse/core')['computedAsync']
   const computedEager: typeof import('@vueuse/core')['computedEager']
   const computedInject: typeof import('@vueuse/core')['computedInject']
   const computedWithControl: typeof import('@vueuse/core')['computedWithControl']
   const controlledComputed: typeof import('@vueuse/core')['controlledComputed']
   const controlledRef: typeof import('@vueuse/core')['controlledRef']
+  const coverage: typeof import('./composables/navigation')['coverage']
+  const coverageConfigured: typeof import('./composables/navigation')['coverageConfigured']
+  const coverageEnabled: typeof import('./composables/navigation')['coverageEnabled']
+  const coverageUrl: typeof import('./composables/navigation')['coverageUrl']
+  const coverageVisible: typeof import('./composables/navigation')['coverageVisible']
+  const createAnsiToHtmlFilter: typeof import('./composables/error')['createAnsiToHtmlFilter']
   const createApp: typeof import('vue')['createApp']
   const createEventHook: typeof import('@vueuse/core')['createEventHook']
   const createGlobalState: typeof import('@vueuse/core')['createGlobalState']
   const createInjectionState: typeof import('@vueuse/core')['createInjectionState']
+  const createModuleLabelItem: typeof import('./composables/module-graph')['createModuleLabelItem']
   const createReactiveFn: typeof import('@vueuse/core')['createReactiveFn']
   const createReusableTemplate: typeof import('@vueuse/core')['createReusableTemplate']
   const createSharedComposable: typeof import('@vueuse/core')['createSharedComposable']
   const createTemplatePromise: typeof import('@vueuse/core')['createTemplatePromise']
   const createUnrefFn: typeof import('@vueuse/core')['createUnrefFn']
+  const currentModule: typeof import('./composables/navigation')['currentModule']
   const customRef: typeof import('vue')['customRef']
+  const dashboardVisible: typeof import('./composables/navigation')['dashboardVisible']
   const debouncedRef: typeof import('@vueuse/core')['debouncedRef']
   const debouncedWatch: typeof import('@vueuse/core')['debouncedWatch']
   const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']
   const defineComponent: typeof import('vue')['defineComponent']
+  const disableCoverage: typeof import('./composables/navigation')['disableCoverage']
   const eagerComputed: typeof import('@vueuse/core')['eagerComputed']
   const effectScope: typeof import('vue')['effectScope']
   const extendRef: typeof import('@vueuse/core')['extendRef']
+  const filesFailed: typeof import('./composables/summary')['filesFailed']
+  const filesIgnore: typeof import('./composables/summary')['filesIgnore']
+  const filesRunning: typeof import('./composables/summary')['filesRunning']
+  const filesSkipped: typeof import('./composables/summary')['filesSkipped']
+  const filesSnapshotFailed: typeof import('./composables/summary')['filesSnapshotFailed']
+  const filesSuccess: typeof import('./composables/summary')['filesSuccess']
+  const filesTodo: typeof import('./composables/summary')['filesTodo']
+  const finished: typeof import('./composables/summary')['finished']
   const getCurrentInstance: typeof import('vue')['getCurrentInstance']
   const getCurrentScope: typeof import('vue')['getCurrentScope']
+  const getModuleGraph: typeof import('./composables/module-graph')['getModuleGraph']
   const h: typeof import('vue')['h']
   const ignorableWatch: typeof import('@vueuse/core')['ignorableWatch']
+  const initializeNavigation: typeof import('./composables/navigation')['initializeNavigation']
   const inject: typeof import('vue')['inject']
+  const isDark: typeof import('./composables/dark')['isDark']
   const isDefined: typeof import('@vueuse/core')['isDefined']
   const isProxy: typeof import('vue')['isProxy']
   const isReactive: typeof import('vue')['isReactive']
@@ -63,6 +86,8 @@ declare global {
   const onStartTyping: typeof import('@vueuse/core')['onStartTyping']
   const onUnmounted: typeof import('vue')['onUnmounted']
   const onUpdated: typeof import('vue')['onUpdated']
+  const openInEditor: typeof import('./composables/error')['openInEditor']
+  const params: typeof import('./composables/params')['params']
   const pausableWatch: typeof import('@vueuse/core')['pausableWatch']
   const provide: typeof import('vue')['provide']
   const reactify: typeof import('@vueuse/core')['reactify']
@@ -84,22 +109,35 @@ declare global {
   const shallowReactive: typeof import('vue')['shallowReactive']
   const shallowReadonly: typeof import('vue')['shallowReadonly']
   const shallowRef: typeof import('vue')['shallowRef']
+  const shouldOpenInEditor: typeof import('./composables/error')['shouldOpenInEditor']
+  const showCoverage: typeof import('./composables/navigation')['showCoverage']
+  const showDashboard: typeof import('./composables/navigation')['showDashboard']
   const syncRef: typeof import('@vueuse/core')['syncRef']
   const syncRefs: typeof import('@vueuse/core')['syncRefs']
   const templateRef: typeof import('@vueuse/core')['templateRef']
+  const tests: typeof import('./composables/summary')['tests']
+  const testsFailed: typeof import('./composables/summary')['testsFailed']
+  const testsIgnore: typeof import('./composables/summary')['testsIgnore']
+  const testsSkipped: typeof import('./composables/summary')['testsSkipped']
+  const testsSuccess: typeof import('./composables/summary')['testsSuccess']
+  const testsTodo: typeof import('./composables/summary')['testsTodo']
   const throttledRef: typeof import('@vueuse/core')['throttledRef']
   const throttledWatch: typeof import('@vueuse/core')['throttledWatch']
+  const time: typeof import('./composables/summary')['time']
   const toRaw: typeof import('vue')['toRaw']
   const toReactive: typeof import('@vueuse/core')['toReactive']
   const toRef: typeof import('vue')['toRef']
   const toRefs: typeof import('vue')['toRefs']
   const toValue: typeof import('vue')['toValue']
+  const toggleDark: typeof import('./composables/dark')['toggleDark']
+  const totalTests: typeof import('./composables/summary')['totalTests']
   const triggerRef: typeof import('vue')['triggerRef']
   const tryOnBeforeMount: typeof import('@vueuse/core')['tryOnBeforeMount']
   const tryOnBeforeUnmount: typeof import('@vueuse/core')['tryOnBeforeUnmount']
   const tryOnMounted: typeof import('@vueuse/core')['tryOnMounted']
   const tryOnScopeDispose: typeof import('@vueuse/core')['tryOnScopeDispose']
   const tryOnUnmounted: typeof import('@vueuse/core')['tryOnUnmounted']
+  const unifiedDiff: typeof import('./composables/diff')['unifiedDiff']
   const unref: typeof import('vue')['unref']
   const unrefElement: typeof import('@vueuse/core')['unrefElement']
   const until: typeof import('@vueuse/core')['until']
@@ -129,6 +167,7 @@ declare global {
   const useCached: typeof import('@vueuse/core')['useCached']
   const useClipboard: typeof import('@vueuse/core')['useClipboard']
   const useCloned: typeof import('@vueuse/core')['useCloned']
+  const useCodeMirror: typeof import('./composables/codemirror')['useCodeMirror']
   const useColorMode: typeof import('@vueuse/core')['useColorMode']
   const useConfirmDialog: typeof import('@vueuse/core')['useConfirmDialog']
   const useCounter: typeof import('@vueuse/core')['useCounter']
@@ -263,6 +302,7 @@ declare global {
   const useWindowFocus: typeof import('@vueuse/core')['useWindowFocus']
   const useWindowScroll: typeof import('@vueuse/core')['useWindowScroll']
   const useWindowSize: typeof import('@vueuse/core')['useWindowSize']
+  const viewMode: typeof import('./composables/params')['viewMode']
   const watch: typeof import('vue')['watch']
   const watchArray: typeof import('@vueuse/core')['watchArray']
   const watchAtMost: typeof import('@vueuse/core')['watchAtMost']

packages/ui/client/components/CodeMirror.vue

@@ -1,19 +1,19 @@
 <script setup lang="ts">
 import type CodeMirror from 'codemirror'
-import { useCodeMirror } from '../composables/codemirror'
 
-const props = defineProps<{
-  modelValue: string
+const { mode, readOnly } = defineProps<{
   mode?: string
   readOnly?: boolean
 }>()
 
 const emit = defineEmits<{
-  (event: 'update:modelValue', value: string): void
   (event: 'save', content: string): void
 }>()
 
+const modelValue = defineModel<string>()
+
 const attrs = useAttrs()
+
 const modeMap: Record<string, any> = {
   // html: 'htmlmixed',
   // vue: 'htmlmixed',
@@ -29,18 +29,16 @@ const modeMap: Record<string, any> = {
 }
 
 const el = ref<HTMLTextAreaElement>()
-const input = useVModel(props, 'modelValue', emit, { passive: true })
 
 const cm = shallowRef<CodeMirror.EditorFromTextArea>()
 
 defineExpose({ cm })
 
 onMounted(async () => {
-  cm.value = useCodeMirror(el, input, {
-    ...props,
+  cm.value = useCodeMirror(el, modelValue as unknown as Ref<string>, {
     ...attrs,
-    mode: modeMap[props.mode || ''] || props.mode,
-    readOnly: props.readOnly ? true : undefined,
+    mode: modeMap[mode || ''] || mode,
+    readOnly: readOnly ? true : undefined,
     extraKeys: {
       'Cmd-S': function (cm) {
         emit('save', cm.getValue())

packages/ui/client/components/ConnectionOverlay.vue

@@ -15,7 +15,6 @@ import { client, isConnected, isConnecting } from '~/composables/client'
     >
       <div
         h-full
-
         flex="~ col gap-2"
         items-center justify-center
         :class="isConnecting ? 'animate-pulse' : ''"

packages/ui/client/components/FileDetails.vue

@@ -37,6 +37,7 @@ function changeViewMode(view: Params['view']) {
 const consoleCount = computed(() => {
   return currentLogs.value?.reduce((s, { size }) => s + size, 0) ?? 0
 })
+
 function onDraft(value: boolean) {
   draft.value = value
 }

packages/ui/client/components/Modal.vue

@@ -1,18 +1,12 @@
 <script setup lang='ts'>
-const props = withDefaults(defineProps<{
-  modelValue?: boolean
+const { direction = 'bottom' } = defineProps<{
   direction?: string
-}>(), {
-  modelValue: false,
-  direction: 'bottom',
-})
-
-defineEmits<{
-  (e: 'update:modelValue', value: boolean): void
 }>()
 
+const modelValue = defineModel<boolean>({ default: false })
+
 const positionClass = computed(() => {
-  switch (props.direction) {
+  switch (direction) {
     case 'bottom':
       return 'bottom-0 left-0 right-0 border-t'
     case 'top':
@@ -27,7 +21,7 @@ const positionClass = computed(() => {
 })
 
 const transform = computed(() => {
-  switch (props.direction) {
+  switch (direction) {
     case 'bottom':
       return 'translateY(100%)'
     case 'top':
@@ -40,6 +34,8 @@ const transform = computed(() => {
       return ''
   }
 })
+
+const closeModal = () => modelValue.value = false
 </script>
 
 <template>
@@ -50,7 +46,7 @@ const transform = computed(() => {
     <div
       class="bg-base inset-0 absolute transition-opacity duration-500 ease-out"
       :class="modelValue ? 'opacity-50' : 'opacity-0'"
-      @click="$emit('update:modelValue', false)"
+      @click="closeModal"
     />
     <div
       class="bg-base border-base absolute transition-all duration-200 ease-out scrolls"

packages/ui/client/components/Navigation.vue

@@ -22,12 +22,14 @@ function updateSnapshot() {
   return client.rpc.updateSnapshot()
 }
 
+const toggleMode = computed(() => isDark.value ? 'light' : 'dark')
+
 function onItemClick(task: Task) {
   activeFileId.value = task.id
   currentModule.value = findById(task.id)
   showDashboard(false)
 }
-const toggleMode = computed(() => isDark.value ? 'light' : 'dark')
+
 async function onRunAll(files?: File[]) {
   if (coverageEnabled.value) {
     disableCoverage.value = true

packages/ui/client/components/TaskTree.vue

@@ -2,22 +2,15 @@
 import type { Task } from '#types'
 import { caseInsensitiveMatch } from '~/utils/task'
 
-withDefaults(defineProps<{
+defineOptions({ inheritAttrs: false })
+
+const { task, indent = 0, nested = false, search, onItemClick } = defineProps<{
   task: Task
   indent?: number
   nested?: boolean
   search?: string
   onItemClick?: (task: Task) => void
-}>(), {
-  indent: 0,
-  nested: false,
-})
-</script>
-
-<script lang="ts">
-export default {
-  inheritAttrs: false,
-}
+}>()
 </script>
 
 <template>