build: upgrade sass and vitest

.husky/.lintstagedrc

@@ -11,14 +11,14 @@
   ],
   "*.{css,scss,html}": [
     "prettier --write",
-    "stylelint --fix"
+    "stylelint --fix \"strict\""
   ],
   "*.md": [
     "prettier --write"
   ],
   "*.vue": [
     "prettier --write",
     "eslint --fix",
-    "stylelint --fix"
+    "stylelint --fix \"strict\""
   ]
 }

.husky/commit-msg

@@ -1,7 +1,5 @@
-#!/bin/sh
 huskyDir=$(dirname "$0")
 
-. "$huskyDir/_/husky.sh"
 . "$huskyDir/scripts/common.sh"
 
 npx --no-install commitlint --edit "$1"

.husky/post-merge

@@ -1,6 +1,4 @@
-#!/bin/sh
 huskyDir=$(dirname "$0")
 
-. "$huskyDir/_/husky.sh"
 . "$huskyDir/scripts/common.sh"
 . "$huskyDir/scripts/update-deps.sh"

.husky/post-rebase

@@ -1,6 +1,4 @@
-#!/bin/sh
 huskyDir=$(dirname "$0")
 
-. "$huskyDir/_/husky.sh"
 . "$huskyDir/scripts/common.sh"
 . "$huskyDir/scripts/update-deps.sh"

.husky/pre-commit

@@ -1,7 +1,5 @@
-#!/bin/sh
 huskyDir=$(dirname "$0")
 
-. "$huskyDir/_/husky.sh"
 . "$huskyDir/scripts/common.sh"
 
 [ -n "$CI" ] && exit 0

common/config/package.json

@@ -31,8 +31,8 @@
     "@vexip-ui/bem-helper": "workspace:*",
     "@vexip-ui/icons": "workspace:*",
     "@vexip-ui/utils": "workspace:*",
-    "lucide-vue-next": "^0.365.0",
-    "vue": "^3.4.38"
+    "lucide-vue-next": "^0.471.0",
+    "vue": "^3.5.13"
   },
   "peerDependencies": {
     "vue": "^3.2.25"

common/hooks/package.json

@@ -31,12 +31,12 @@
   },
   "homepage": "https://github.com/vexip-ui/vexip-ui/tree/main/common/hooks#readme",
   "dependencies": {
-    "@floating-ui/dom": "^1.5.3",
+    "@floating-ui/dom": "^1.6.13",
     "@juggle/resize-observer": "^3.4.0",
     "@vexip-ui/utils": "workspace:*"
   },
   "devDependencies": {
-    "vue": "^3.4.38"
+    "vue": "^3.5.13"
   },
   "peerDependencies": {
     "vue": "^3.2.25"

common/icons/package.json

@@ -47,13 +47,13 @@
   },
   "homepage": "https://github.com/vexip-ui/vexip-ui/tree/main/common/icons#readme",
   "devDependencies": {
-    "@types/node": "^20.12.5",
-    "execa": "^8.0.1",
-    "fast-glob": "^3.3.2",
+    "@types/node": "^22.10.6",
+    "execa": "^9.5.2",
+    "fast-glob": "^3.3.3",
     "fs-extra": "^11.2.0",
     "kolorist": "^1.8.0",
-    "prettier": "^3.3.3",
-    "vue": "^3.4.38"
+    "prettier": "^3.4.2",
+    "vue": "^3.5.13"
   },
   "peerDependencies": {
     "vue": "^3.2.25"

common/meta/package.json

@@ -1,16 +1,16 @@
 {
   "name": "@vexip-ui/meta",
+  "private": true,
   "author": "winchesHe",
   "scripts": {
     "build": "run-p build:contributors build:components",
-    "build:contributors": "tsx scripts/contributors.ts",
     "build:components": "tsx scripts/components.ts",
+    "build:contributors": "tsx scripts/contributors.ts",
     "dev": "DEV=\"1\" pnpm run build"
   },
-  "private": true,
   "devDependencies": {
     "@vexip-ui/scripts": "workspace:*",
     "@vexip-ui/utils": "workspace:*",
-    "dotenv": "^16.3.1"
+    "dotenv": "^16.4.7"
   }
 }

common/plugins/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@vexip-ui/plugins",
   "version": "1.6.0",
+  "type": "module",
   "license": "MIT",
-  "anchor": "qmhc",
+  "private": false,
   "scripts": {
     "build": "tsx scripts/build.ts",
     "test": "vitest run",
     "test:cover": "vitest run --coverage",
     "test:dev": "vitest dev"
   },
-  "type": "module",
   "main": "dist/index.cjs",
   "module": "dist/index.js",
   "types": "dist/index.d.ts",
@@ -20,25 +20,25 @@
       "import": "./dist/index.js"
     }
   },
-  "private": false,
   "files": [
     "dist"
   ],
-  "homepage": "https://github.com/vexip-ui/vexip-ui/tree/main/common/plugins#readme",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vexip-ui/vexip-ui.git",
     "directory": "common/plugins"
   },
+  "homepage": "https://github.com/vexip-ui/vexip-ui/tree/main/common/plugins#readme",
   "dependencies": {
     "@vexip-ui/utils": "workspace:*",
-    "compare-versions": "^6.1.0",
-    "local-pkg": "^0.5.0"
+    "compare-versions": "^6.1.1",
+    "local-pkg": "^1.0.0"
   },
   "devDependencies": {
-    "@types/node": "^20.12.5",
-    "postcss": "^8.4.38",
-    "tsup": "^8.0.2",
-    "unplugin-vue-components": "^0.26.0"
-  }
+    "@types/node": "^22.10.6",
+    "postcss": "^8.5.0",
+    "tsup": "^8.3.5",
+    "unplugin-vue-components": "^28.0.0"
+  },
+  "anchor": "qmhc"
 }

common/scripts/package.json

@@ -1,16 +1,17 @@
 {
   "name": "@vexip-ui/scripts",
   "version": "1.1.4",
+  "type": "module",
   "license": "MIT",
+  "private": false,
   "author": "qmhc",
   "scripts": {
     "build": "tsx scripts/build.ts"
   },
-  "type": "module",
   "bin": {
     "vexip": "bin/vexip.js",
-    "vxp": "bin/vexip.js",
     "vexip-cli": "bin/vexip.js",
+    "vxp": "bin/vexip.js",
     "vxp-cli": "bin/vexip.js"
   },
   "main": "dist/index.cjs",
@@ -23,34 +24,33 @@
       "import": "./dist/index.js"
     }
   },
-  "private": false,
   "files": [
     "bin",
     "dist"
   ],
-  "homepage": "https://github.com/vexip-ui/vexip-ui/tree/main/common/scripts#readme",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/vexip-ui/vexip-ui.git",
     "directory": "common/scripts"
   },
+  "homepage": "https://github.com/vexip-ui/vexip-ui/tree/main/common/scripts#readme",
   "dependencies": {
     "@vexip-ui/utils": "workspace:*",
-    "compare-versions": "^6.1.0",
-    "execa": "^8.0.1",
+    "compare-versions": "^6.1.1",
+    "execa": "^9.5.2",
     "kolorist": "^1.8.0",
-    "local-pkg": "^0.5.0",
+    "local-pkg": "^1.0.0",
     "prompts": "^2.4.2",
-    "semver": "^7.6.0",
+    "semver": "^7.6.3",
     "yargs": "^17.7.2"
   },
   "devDependencies": {
-    "@pnpm/types": "^9.4.2",
+    "@pnpm/types": "^12.2.0",
     "@types/minimist": "^1.2.5",
-    "@types/node": "^20.12.5",
+    "@types/node": "^22.10.6",
     "@types/prompts": "^2.4.9",
     "@types/semver": "^7.5.8",
-    "@types/yargs": "^17.0.32",
-    "tsup": "^8.0.2"
+    "@types/yargs": "^17.0.33",
+    "tsup": "^8.3.5"
   }
 }

components/affix/tests/affix.spec.tsx

@@ -178,7 +178,7 @@ describe('Affix', () => {
         <>
           <div class={'affix-container'}>
             <div class={'background'}>
-              <Affix target={'.affix-container'} offset={'80'} style={'margin-top: 300px'}>
+              <Affix target={'.affix-container'} offset={80} style={'margin-top: 300px'}>
                 {'指定容器'}
               </Affix>
             </div>

components/anchor/tests/anchor.spec.tsx

@@ -77,7 +77,7 @@ describe('Anchor', () => {
     const viewer = createEl(0, 'viewer')
     viewer.appendChild(createEl(20, 'a'))
     viewer.appendChild(createEl(40, 'b'))
-    document.appendChild(viewer)
+    document.body.appendChild(viewer)
 
     Object.defineProperty(viewer, 'scrollHeight', {
       configurable: true,

components/loading/loading.vue

@@ -69,9 +69,9 @@ function startLoading(options: LoadingOptions) {
 
   const setLoading = () => {
     percent.value = boundRange(options.percent, 0, 100)
-    state.value = options.state ?? 'default'
+    state.value = options.state ?? state.value
     strokeWidth.value = boundRange(options.strokeWidth ?? 2, 1, 10)
-    position.value = options.position ?? 'top'
+    position.value = options.position ?? position.value
     maxPercent = boundRange(options.maxPercent ?? 95, percent.value, 95)
 
     if (percent.value === 100) {

components/loading/tests/loading.spec.tsx

@@ -7,6 +7,10 @@ import { LoadingManager } from '..'
 
 vi.useFakeTimers()
 
+function nextFrame() {
+  return new Promise<void>(resolve => requestAnimationFrame(() => resolve()))
+}
+
 function createLoading() {
   const Loading = new LoadingManager()
 
@@ -68,8 +72,9 @@ describe('Loading', () => {
     wrapper.unmount()
     wrapper = mount(Loading)
 
-    wrapper.vm.startLoading({ percent: 0, position: 'bottom' })
+    wrapper.vm.startLoading({ percent: 10, position: 'bottom' })
     await vi.runAllTimersAsync()
+    await nextFrame()
     expect(wrapper.find('.vxp-loading').attributes('style')).toContain('bottom: 0px;')
   })
 
@@ -88,6 +93,7 @@ describe('Loading', () => {
 
         wrapper.vm.startLoading({ percent: 0, state })
         await vi.runAllTimersAsync()
+        await nextFrame()
 
         if (state === 'default') {
           expect(wrapper.find('.vxp-loading').classes()).not.toContain(`vxp-loading--${state}`)

components/radio/tests/ssr.spec.tsx

@@ -13,7 +13,7 @@ import { Radio } from '..'
 describe('SSR for Radio', () => {
   it('render', async () => {
     try {
-      await renderToString(createSSRApp(() => <Radio></Radio>))
+      await renderToString(createSSRApp(() => <Radio label={'1'}></Radio>))
     } catch (error) {
       expect(error).toBeFalsy()
     }

components/table/table.vue

@@ -1,5 +1,6 @@
 <script setup lang="ts">
 import { NativeScroll } from '@/components/native-scroll'
+import { Renderer } from '@/components/renderer'
 import { Scrollbar } from '@/components/scrollbar'
 
 import {

components/transfer/transfer-panel.tsx

@@ -78,7 +78,7 @@ export default defineComponent({
       default: false
     },
     loadingIcon: {
-      type: Object,
+      type: [Object, Function],
       default: null
     },
     loadingLock: {

components/upload/tests/mock.ts

@@ -1,17 +1,11 @@
 import { nextTick } from 'vue'
+import { vi } from 'vitest'
 
 import type { DOMWrapper } from '@vue/test-utils'
 import type { UploadSourceFile } from '../symbol'
 
-const getMockFile = (element: Element, files: File[]) => {
-  Object.defineProperty(element, 'files', {
-    get() {
-      return files
-    },
-    set() {
-      return true
-    }
-  })
+const getMockFile = (element: HTMLInputElement, files: File[]) => {
+  vi.spyOn(element, 'files', 'get').mockReturnValue(files as unknown as FileList)
 }
 
 export const getXhr = (type: 'success' | 'error' | 'abort') => {

components/video/props.ts

@@ -1,4 +1,4 @@
-import { booleanProp, buildProps, eventProp } from '@vexip-ui/config'
+import { booleanProp, buildProps, eventProp, iconProp } from '@vexip-ui/config'
 
 import type { ExtractPropTypes, PropType } from 'vue'
 import type { FullScreenType } from '@/components/full-screen'
@@ -30,7 +30,7 @@ export const videoProps = buildProps({
   video: Object as PropType<HTMLVideoElement>,
   segments: Array as PropType<(number | VideoSegment)[]>,
   loading: booleanProp,
-  loadingIcon: Object,
+  loadingIcon: iconProp,
   loadingEffect: String as PropType<IconEffect>,
   shortcuts: Object as PropType<VideoShortcutOptions>,
   slots: Object as PropType<VideoSlots>,

components/video/tests/video.spec.tsx

@@ -4,7 +4,7 @@ import { mount } from '@vue/test-utils'
 import { nextTick } from 'vue'
 
 import { globalIcons } from '@vexip-ui/config'
-import { Github } from 'lucide-vue-next'
+import { Activity } from 'lucide-vue-next'
 import { Video } from '..'
 
 describe('Video', () => {
@@ -130,13 +130,13 @@ describe('Video', () => {
 
   it('loading icon', async () => {
     const wrapper = mount(Video, {
-      props: { loading: true, loadingIcon: Github }
+      props: { loading: true, loadingIcon: Activity }
     })
     wrapper.vm.stateHidden = true
     await nextTick()
 
     expect(wrapper.findComponent(globalIcons.value.loading.icon).exists()).toBe(false)
-    expect(wrapper.findComponent(Github).exists()).toBe(true)
+    expect(wrapper.findComponent(Activity).exists()).toBe(true)
   })
 
   it('player slot', async () => {

docs/.vitepress/theme/style/mixins.scss

@@ -1,11 +1,13 @@
 @use 'sass:map';
+@use 'sass:meta';
+
 @use 'vexip-ui/style/design/variables.scss' as vars;
 
 @forward 'vexip-ui/style/shared/mixins.scss';
 
 @mixin query-media($point) {
   @if map.has-key(vars.$break-point-map, $point) {
-    @media screen and #{inspect(map.get(vars.$break-point-map, $point))} {
+    @media screen and #{meta.inspect(map.get(vars.$break-point-map, $point))} {
       @content;
     }
   } @else {