Upgrade to latest deps + fix stricter typing issues

Author: mythz

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@servicestack/vue",
-  "version": "3.0.127",
+  "version": "3.0.128",
   "private": false,
   "files": [
     "dist"
@@ -21,11 +21,11 @@
     "build-minify": "uglifyjs dist/servicestack-vue.mjs --compress --mangle --webkit -o dist/servicestack-vue.min.mjs",
     "build-style": "postcss src/tailwind.css -o dist/styles.css",
     "build-copy": "npm run build && npm run copy-src && npm run copy-blazor-vue && npm run copy-comfy",
-    "copy-src": "shx cp dist/servicestack-vue.min.mjs ../ServiceStack/ServiceStack/src/ServiceStack/js/servicestack-vue.mjs && shx cp dist/servicestack-vue.mjs ../ServiceStack/ServiceStack/tests/NorthwindAuto/wwwroot/lib/mjs/",
+    "copy-src": "shx cp dist/servicestack-vue.min.mjs ../ServiceStack/ServiceStack/src/ServiceStack/js/servicestack-vue.mjs && shx cp dist/servicestack-vue.mjs ../ServiceStack/ServiceStack/tests/NorthwindAuto/wwwroot/lib/mjs/servicestack-vue.mjs",
     "copy-diffusion": "shx cp  dist/servicestack-vue.m* ../../netcore/BlazorDiffusionVue/BlazorDiffusion/wwwroot/lib/mjs/ && shx cp dist/index.d.ts ../../netcore/BlazorDiffusionVue/BlazorDiffusion/wwwroot/lib/typings/@servicestack/vue/",
     "copy-creatorkit": "shx cp dist/servicestack-vue.m* ../../netcore/CreatorKit/CreatorKit/wwwroot/lib/mjs/ && shx cp dist/index.d.ts ../../netcore/CreatorKit/CreatorKit/wwwroot/lib/typings/@servicestack/vue/",
     "copy-aiserver": "shx cp dist/servicestack-vue.m* ../ai-server/AiServer/wwwroot/lib/mjs/ && shx cp dist/index.d.ts ../ai-server/AiServer/wwwroot/lib/typings/@servicestack/vue/",
-    "copy-comfy": "shx cp dist/servicestack-vue.m* ../ComfyGateway/MyApp/wwwroot/lib/mjs/ && shx cp dist/index.d.ts ../ComfyGateway/MyApp/wwwroot/lib/typings/@servicestack/vue/",
+    "copy-comfy": "shx cp dist/servicestack-vue.m* ../ubixar.com/MyApp/wwwroot/lib/mjs/ && shx cp dist/index.d.ts ../ubixar.com/MyApp/wwwroot/lib/typings/@servicestack/vue/ && shx cp dist/servicestack-vue.min.mjs ../ubixar.com/MyApp/wwwroot/js/servicestack-vue.mjs",
     "copy-blazor-vue": "shx mkdir -p ../../NetCoreTemplates/blazor-vue/MyApp/wwwroot/js/ && shx cp dist/servicestack-vue.m* ../../NetCoreTemplates/blazor-vue/MyApp/wwwroot/js/ && shx cp dist/servicestack-vue.m* ../../NetCoreTemplates/blazor-vue/MyApp/wwwroot/lib/mjs/ && shx cp dist/index.d.ts ../../NetCoreTemplates/blazor-vue/MyApp/wwwroot/lib/typings/@servicestack/vue/",
     "preview": "vite preview",
     "build-only": "vite build -l error",
@@ -34,29 +34,29 @@
     "release": "bump patch --commit --push --tag && npm publish"
   },
   "dependencies": {
-    "@servicestack/client": "^2.1.2",
-    "vue": "^3.4.19",
-    "vue-router": "^4.2.5"
+    "@servicestack/client": "^2.1.13",
+    "vue": "^3.5.22",
+    "vue-router": "^4.5.1"
   },
   "devDependencies": {
-    "@tailwindcss/forms": "^0.5.3",
-    "@types/node": "^18.11.19",
-    "@vitejs/plugin-vue": "^4.4.0",
-    "@vitest/browser": "^0.34.6",
-    "@vue/test-utils": "^2.4.1",
-    "@vue/tsconfig": "^0.1.3",
-    "autoprefixer": "^10.4.13",
+    "@tailwindcss/forms": "^0.5.10",
+    "@types/node": "^24.6.2",
+    "@vitejs/plugin-vue": "^6.0.1",
+    "@vitest/browser": "^3.2.4",
+    "@vue/test-utils": "^2.4.6",
+    "@vue/tsconfig": "^0.8.1",
+    "autoprefixer": "^10.4.21",
     "npm-run-all": "^4.1.5",
-    "postcss": "^8.4.21",
-    "postcss-cli": "^10.1.0",
-    "shx": "^0.3.4",
-    "tailwindcss": "^3.2.4",
-    "typescript": "~4.9.5",
+    "postcss": "^8.5.6",
+    "postcss-cli": "^11.0.1",
+    "shx": "^0.4.0",
+    "tailwindcss": "^3.4.18",
+    "typescript": "^5.9.3",
     "uglify-js": "^3.19.3",
-    "vite": "^4.1.5",
+    "vite": "^7.1.7",
     "vite-plugin-dts": "^4.5.4",
-    "vitest": "^0.34.6",
-    "vue-tsc": "^1.0.24",
-    "webdriverio": "^8.35.1"
+    "vitest": "^3.2.4",
+    "vue-tsc": "^3.1.0",
+    "webdriverio": "^9.20.0"
   }
 }

package.json

@@ -158,7 +158,7 @@
                 <span class="mr-1 select-none">
                     {{ label }}
                 </span>
-                <SettingsIcons :column="columns.find(x => x.name.toLowerCase() === column.toLowerCase())" :is-open="showFilters?.column.name === column" />
+                <SettingsIcons :column="columns.find((x:Column) => x.name.toLowerCase() === column.toLowerCase())" :is-open="showFilters?.column.name === column" />
             </div>
             <div v-else class="flex justify-between items-center">
                 <span class="mr-1 select-none">{{ label }}</span>
@@ -177,7 +177,7 @@
 import type { JsonServiceClient } from '@servicestack/client'
 import type { ApiPrefs, ApiResponse, Column, ColumnSettings, MetadataPropertyType, GridAllowOptions, GridShowOptions } from '@/types'
 import type { AutoQueryGridProps, AutoQueryGridEmits } from '@/components/types'
-import { computed, inject, nextTick, onMounted, ref, useSlots, getCurrentInstance } from 'vue'
+import { computed, inject, nextTick, onMounted, ref, useSlots, getCurrentInstance, type Slots } from 'vue'
 import { ApiResult, appendQueryString, combinePaths, delaySet, leftPart, mapGet, queryString, rightPart } from '@servicestack/client'
 import { Apis, createDto, getPrimaryKey, isComplexProp, typeProperties, useMetadata } from '@/use/metadata'
 import { a, grid } from './css'
@@ -238,7 +238,7 @@ function getTableRowClass(item:any, i:number) {
     return grid.getTableRowClass(props.tableStyle, i, isSelected, canUpdate)
 }
 
-const slots = useSlots()
+const slots: Slots = useSlots()
 
 //const dataModel = computed(() => typeOf(apis.value.AnyQuery!.dataModel.name))
 const viewModel = computed(() => typeOf(apis.value.AnyQuery!.viewModel?.name || apis.value.AnyQuery!.dataModel.name))
@@ -299,7 +299,7 @@ const properties = computed(() => typeProperties(typeOf(typeName.value || apis.v
 const primaryKey = computed(() => getPrimaryKey(typeOf(typeName.value || apis.value.AnyQuery?.dataModel.name)))
 
 const take = computed(() => apiPrefs.value.take ?? defaultTake)
-const results = computed<any[]>(() => api.value.response ? mapGet(api.value.response, 'results') : null ?? [])
+const results = computed<any[]>(() => (api.value.response ? mapGet(api.value.response, 'results') : null) ?? [])
 const total = computed<number>(() => (api.value.response?.total || results.value.length) ?? 0)
 
 const canFirst = computed(() => skip.value > 0)

src/components/AutoQueryGrid.vue

@@ -82,7 +82,7 @@ function hasOption(option:any) {
 const useLabel = computed(() => props.label ?? humanize(toPascalCase(props.id)))
 
 let ctx: ApiState|undefined = inject('ApiState', undefined)
-const errorField = computed(() => errorResponse.call({ responseStatus: props.status ?? ctx?.error.value }, props.id))
+const errorField = computed(() => errorResponse.call({ responseStatus: props.status ?? (ctx as any)?.error.value }, props.id))
 
 const cls = computed(() => [input.base, errorField.value ? input.invalid : input.valid])
 

src/components/Autocomplete.vue

@@ -38,7 +38,7 @@ const emit = defineEmits<CheckboxInputEmits>()
 const useLabel = computed(() => props.label ?? humanize(toPascalCase(props.id)))
 
 let ctx: ApiState|undefined = inject('ApiState', undefined)
-const errorField = computed(() => errorResponse.call({ responseStatus: props.status ?? ctx?.error.value }, props.id))
+const errorField = computed(() => errorResponse.call({ responseStatus: props.status ?? (ctx as any)?.error.value }, props.id))
 
 const cls = computed(() => filterClass(['focus:ring-indigo-500 h-4 w-4 text-indigo-600 rounded border-gray-300 dark:border-gray-600 dark:bg-gray-800',props.inputClass], 'CheckboxInput', props.filterClass))
 </script>

src/components/CheckboxInput.vue

@@ -45,7 +45,7 @@ import type { Breakpoint, FormatInfo, MetadataPropertyType } from '@/types'
 import type { DataGridProps, DataGridEmits } from '@/components/types'
 
 import { form, grid } from './css'
-import { computed, ref, useSlots, type StyleValue } from 'vue'
+import { computed, ref, useSlots, type Slots, type StyleValue } from 'vue'
 import { humanify, map, uniqueKeys, mapGet } from '@servicestack/client'
 import { useMetadata } from '@/use/metadata'
 import { getTypeName } from '@/use/utils'
@@ -62,7 +62,7 @@ const refResults = ref<HTMLDivElement|null>()
 const showFilters = ref<string|null>(null)
 const isOpen = (column:string) => showFilters.value === column
 
-const slots = useSlots()
+const slots:Slots = useSlots()
 const slotHeader = (column:string) => Object.keys(slots).find(x => x.toLowerCase() == column.toLowerCase()+'-header')
 const slotColumn = (column:string) => Object.keys(slots).find(x => x.toLowerCase() == column.toLowerCase())
 const columnSlots = computed(() => uniqueKeys(props.items).filter(k => !!(slots[k] || slots[k+'-header'])))

src/components/DataGrid.vue

@@ -21,7 +21,7 @@ import { computed, inject } from "vue"
 const props = defineProps<ErrorSummaryProps>()
 
 let ctx: ApiState|undefined = inject('ApiState', undefined)
-const errorSummary = computed(() => props.status || ctx?.error.value 
-    ? errorResponseExcept.call({ responseStatus: props.status ?? ctx?.error.value }, props.except ?? [])
+const errorSummary = computed(() => props.status || (ctx as any)?.error.value 
+    ? errorResponseExcept.call({ responseStatus: props.status ?? (ctx as any)?.error.value }, props.except ?? [])
     : null)
 </script>

src/components/ErrorSummary.vue

@@ -91,12 +91,13 @@ const useLabel = computed(() => props.label ?? humanize(toPascalCase(props.id)))
 const usePlaceholder = computed(() => props.placeholder ?? useLabel.value)
 
 let ctx: ApiState|undefined = inject('ApiState', undefined)
-const errorField = computed(() => errorResponse.call({ responseStatus: props.status ?? ctx?.error.value }, props.id))
+const errorField = computed(() => errorResponse.call({ responseStatus: props.status ?? (ctx as any)?.error.value }, props.id))
 
-const cls = computed(() => filterClass(['block w-full sm:text-sm rounded-md dark:text-white dark:bg-gray-900 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-violet-50 dark:file:bg-violet-900 file:text-violet-700 dark:file:text-violet-200 hover:file:bg-violet-100 dark:hover:file:bg-violet-800', errorField.value
-    ? 'pr-10 border-red-300 text-red-900 placeholder-red-300 focus:outline-none focus:ring-red-500 focus:border-red-500'
-    : 'text-slate-500 dark:text-slate-400'
-    , props.inputClass], 'FileInput', props.filterClass))
+const cls = computed(() => filterClass(['block w-full sm:text-sm rounded-md dark:text-white dark:bg-gray-900 file:mr-4 file:py-2 file:px-4 file:rounded-full file:border-0 file:text-sm file:font-semibold file:bg-violet-50 dark:file:bg-violet-900 file:text-violet-700 dark:file:text-violet-200 hover:file:bg-violet-100 dark:hover:file:bg-violet-800', 
+    errorField.value
+        ? 'pr-10 border-red-300 text-red-900 placeholder-red-300 focus:outline-none focus:ring-red-500 focus:border-red-500'
+        : 'text-slate-500 dark:text-slate-400'
+        , props.inputClass], 'FileInput', props.filterClass))
 
 const onChange = (e:Event) => {
     let f = e.target as HTMLInputElement
@@ -116,7 +117,7 @@ const isDataUri = (src?:string|null) => src == null ? false : src.startsWith("da
 const src = computed(() => {
     
     if (fileList.value.length > 0)
-        return fileList.value[0].filePath
+        return (fileList.value[0] as UploadedFile).filePath
     let filePath = typeof props.modelValue == 'string' ? props.modelValue : props.values && props.values[0]
     return filePath && filePathUri(assetsPathResolver(filePath)) || null    
 })

src/components/FileInput.vue

@@ -88,17 +88,18 @@ let history:Item[] = []
 let redos:Item[] = []
 
 let ctx: ApiState|undefined = inject('ApiState', undefined)
-const errorField = computed(() => errorResponse.call({ responseStatus: props.status ?? ctx?.error.value }, props.id))
+const errorField = computed(() => errorResponse.call({ responseStatus: props.status ?? (ctx as any)?.error.value }, props.id))
 const useLabel = computed(() => props.label ?? humanize(toPascalCase(props.id)))
 
 const allShow = 'bold,italics,link,image,blockquote,code,heading,orderedList,unorderedList,strikethrough,undo,redo,help'.split(',') as MarkdownInputOptions[]
 const showOptions  = computed<{[k:string]:boolean}>(() => props.hide ? asOptions(allShow,props.hide)  : asOptions(allShow,[]))
 function show(target:MarkdownInputOptions) { return showOptions.value[target] }
 
 
-const cls = computed(() => filterClass(['shadow-sm font-mono' + input.base.replace('rounded-md',''), errorField.value 
-  ? 'text-red-900 focus:ring-red-500 focus:border-red-500 border-red-300'
-  : 'text-gray-900 ' + input.valid, props.inputClass], 'MarkdownInput', props.filterClass))
+const cls = computed(() => filterClass(['shadow-sm font-mono' + input.base.replace('rounded-md',''), 
+    errorField.value 
+        ? 'text-red-900 focus:ring-red-500 focus:border-red-500 border-red-300'
+        : 'text-gray-900 ' + input.valid, props.inputClass], 'MarkdownInput', props.filterClass))
 const btnCls = "w-5 h-5 cursor-pointer select-none text-gray-700 dark:text-gray-300 hover:text-indigo-600 dark:hover:text-indigo-400"
   
 const txt = ref()

src/components/MarkdownInput.vue

@@ -8,7 +8,7 @@
         <div class="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
             <div :class="[modalClass, sizeClass, transition2]" @mousedown.stop="">
                 <div>
-                    <slot v-if="slots.closebutton" name="createform"></slot>
+                    <slot v-if="(slots as any).closebutton" name="createform"></slot>
                     <div v-else class="hidden sm:block absolute top-0 right-0 pt-4 pr-4 z-10">
                         <button type="button" @click="close":class="closeButtonClass" title="Close">
                             <span class="sr-only">Close</span>