feat: wip

packages/varlet-shared/package.json

@@ -37,7 +37,7 @@
     "build": "tsup src/index.ts --format esm,cjs --out-dir=lib --dts --clean"
   },
   "dependencies": {
-    "rattail": "1.0.14-alpha.1732130069953"
+    "rattail": "1.0.14"
   },
   "devDependencies": {
     "@types/node": "^18.7.18",

packages/varlet-ui/src/count-to/__tests__/index.spec.js

@@ -1,8 +1,140 @@
 import CountTo from '..'
 import { createApp } from 'vue'
-import { expect, test } from 'vitest'
+import { expect, test, vi } from 'vitest'
+import { mount } from '@vue/test-utils'
+import { delay } from '../../utils/test'
 
 test('test count-to plugin', () => {
   const app = createApp({}).use(CountTo)
   expect(app.component(CountTo.name)).toBeTruthy()
 })
+
+const DURATION = 100
+
+test('test count-to basic animation', async () => {
+  const wrapper = mount(CountTo, {
+    props: {
+      from: 0,
+      to: 100,
+      duration: DURATION,
+    },
+  })
+
+  expect(wrapper.text()).toBe('0')
+  await delay(DURATION + 20)
+  expect(wrapper.text()).toBe('100')
+  wrapper.unmount()
+})
+
+test('test count-to props change', async () => {
+  const wrapper = mount(CountTo, {
+    props: {
+      from: 0,
+      to: 100,
+      duration: DURATION,
+    },
+  })
+
+  expect(wrapper.text()).toBe('0')
+  await delay(DURATION + 20)
+  expect(wrapper.text()).toBe('100')
+  await wrapper.setProps({ from: -200, to: 200 })
+  expect(wrapper.text()).toBe('-200')
+  await delay(DURATION + 20)
+  expect(wrapper.text()).toBe('200')
+  wrapper.unmount()
+})
+
+test('test count-to slot', async () => {
+  const wrapper = mount(CountTo, {
+    props: {
+      from: 0,
+      to: 100,
+      duration: DURATION,
+    },
+    slots: {
+      default: ({ value }) => value * 2,
+    },
+  })
+
+  expect(wrapper.text()).toBe('0')
+  await delay(DURATION + 20)
+  expect(wrapper.text()).toBe('200')
+  wrapper.unmount()
+})
+
+test('test count-to manual control', async () => {
+  const wrapper = mount(CountTo, {
+    props: {
+      from: 0,
+      to: 100,
+      duration: DURATION,
+      autoStart: false,
+    },
+  })
+
+  expect(wrapper.text()).toBe('0')
+  await delay(DURATION + 20)
+  expect(wrapper.text()).toBe('0')
+  await wrapper.vm.start()
+  await delay(DURATION + 20)
+  expect(wrapper.text()).toBe('100')
+  await wrapper.vm.reset()
+  expect(wrapper.text()).toBe('0')
+  await wrapper.vm.pause()
+  await delay(DURATION + 20)
+  expect(wrapper.text()).toBe('0')
+  await wrapper.vm.start()
+  await delay(DURATION + 20)
+  expect(wrapper.text()).toBe('100')
+
+  wrapper.unmount()
+})
+
+test('test count-to precision', async () => {
+  const wrapper = mount(CountTo, {
+    props: {
+      from: 0,
+      to: 33.333,
+      duration: DURATION,
+      precision: 2,
+    },
+  })
+
+  expect(wrapper.text()).toBe('0')
+  await delay(DURATION + 20)
+  expect(wrapper.text()).toBe('33.33')
+  wrapper.unmount()
+})
+
+test('test count-to timing function', async () => {
+  const wrapper = mount(CountTo, {
+    props: {
+      from: 0,
+      to: 100,
+      duration: DURATION,
+      timingFunction: () => 1,
+    },
+  })
+
+  await delay(20)
+  expect(wrapper.text()).toBe('100')
+  wrapper.unmount()
+})
+
+test('test count-to end event', async () => {
+  const onEnd = vi.fn()
+
+  const wrapper = mount(CountTo, {
+    props: {
+      from: 0,
+      to: 100,
+      duration: DURATION,
+      onEnd,
+    },
+  })
+
+  await delay(DURATION + 20)
+  expect(onEnd).toHaveBeenCalled()
+  wrapper.unmount()
+})

packages/varlet-ui/types/styleVars.d.ts

@@ -263,6 +263,8 @@ interface BaseStyleVars {
   '--collapse-item-margin-top'?: string
   '--collapse-disable-color'?: string
   '--collapse-border-top'?: string
+  '--count-to-text-color'?: string
+  '--count-to-text-font-size'?: string
   '--countdown-text-color'?: string
   '--countdown-text-font-size'?: string
   '--counter-padding'?: string