refactor: animation system

README.md

@@ -56,27 +56,20 @@ vue-motion's predecessor was the Newcar animation engine, but later the developm
   - [ ] Geometry
     - [x] Angle
     - [x] Dot
-    - [ ] Symmetrical
-    - [ ] Center Symmetry
     - [ ] Difference
     - [ ] Intersection
     - [ ] Union
-    - [ ] CenterDot
-    - [ ] Bisector
-    - [ ] Perpendicular
-    - [ ] Parallel Lines
     - [ ] Brace
-  - [ ] Layout
-    - [ ] Row
-    - [ ] Column
-    - [ ] Center
-  - [ ] Markdown
-  - [ ] Math
+  - [x] Layout
+    - [x] Row
+    - [x] Column
+  - [x] Markdown
+  - [x] Math
     - [x] MathFunction
     - [x] NumberPlane
     - [x] NumberAxis
-    - [ ] PolarPlane
-    - [x] Tex
+    - [x] PolarPlane
+    - [x] Text
   - [ ] Mindmap
   - [ ] Social-Platform
     - [ ] ContentCard

eslint.config.js

@@ -1,17 +1,14 @@
 import antfu from '@antfu/eslint-config'
 
 export default antfu({
-  // TypeScript and Vue are auto-detected, you can also explicitly enable them:
   typescript: true,
   vue: true,
 
-  // `.eslintignore` is no longer supported in Flat config, use `ignores` instead
-  ignores: [
-    '**/fixtures',
-    'cli/bin',
-    '**/.vitepress/cache',
-    '**/.vitepress/dist',
-    'docs/**',
-    'examples',
-  ],
+  overrides: {
+    stylistic: {
+      'ts/array-type': 'warn',
+      'style/arrow-parens': 'error',
+      // 'ts/explicit-function-return-type': 'error',
+    },
+  },
 })

extensions/chart/src/widgets/chartLayout.vue

@@ -144,7 +144,7 @@ function generateDateAxisRange(axis: ChartAxis, data: DateTime[]) {
 watchEffect(() => {
   if (data.value.datasets.length === 0)
     return
-  if (data.value.datasets.some(dataset => (dataset.data.length === 0)))
+  if (data.value.datasets.some((dataset) => (dataset.data.length === 0)))
     return
   if ((data.value.labels ?? []).length === 0)
     return
@@ -162,10 +162,10 @@ watchEffect(() => {
 
   layoutConfig.value.indexAxis = options.indexAxis ?? 'x'
   layoutConfig.value.indexType = options.indexType
-  ?? (data.value.labels && data.value.labels.every(label => (typeof label === 'string')))
+  ?? (data.value.labels && data.value.labels.every((label) => (typeof label === 'string')))
     ? 'label'
-    : (data.value.labels && data.value.labels.every(label => (label instanceof DateTime)))
-      || (data.value.datasets.flatMap(set => (set.data.map(unit => (DataUtil.isIndexDate(unit))))).every(isDate => (isDate)))
+    : (data.value.labels && data.value.labels.every((label) => (label instanceof DateTime)))
+      || (data.value.datasets.flatMap((set) => (set.data.map((unit) => (DataUtil.isIndexDate(unit))))).every((isDate) => (isDate)))
         ? 'date'
         : 'number'
   layoutConfig.value.indexIntervalUnit = options.indexIntervalUnit
@@ -187,9 +187,9 @@ watchEffect(() => {
   // indexType validation
   if (layoutConfig.value.indexType === 'label' && !data.value.labels)
     throw new Error('indexType is label but labels are not provided')
-  if (layoutConfig.value.indexType === 'date' && data.value.datasets.flatMap(set => (set.data.map(unit => (DataUtil.isIndexDate(unit))))).some(isDate => (!isDate)))
+  if (layoutConfig.value.indexType === 'date' && data.value.datasets.flatMap((set) => (set.data.map((unit) => (DataUtil.isIndexDate(unit))))).some((isDate) => (!isDate)))
     throw new Error('indexType is date but some index/labels are not DateTimes')
-  if (layoutConfig.value.indexType === 'number' && data.value.datasets.flatMap(set => (set.data.map(unit => (DataUtil.isIndexDate(unit))))).some(isDate => (isDate)))
+  if (layoutConfig.value.indexType === 'number' && data.value.datasets.flatMap((set) => (set.data.map((unit) => (DataUtil.isIndexDate(unit))))).some((isDate) => (isDate)))
     throw new Error('indexType is number but some index are DateTimes')
 
   layoutConfig.value.index = {
@@ -217,12 +217,12 @@ watchEffect(() => {
     layoutConfig.value.index.interval = 1
     for (let i = 0; i < data.value.labels!.length; i++)
       layoutConfig.value.index.pos.push(i)
-    layoutConfig.value.index.labelTexts = data.value.labels!.map(label => (label.toString()))
+    layoutConfig.value.index.labelTexts = data.value.labels!.map((label) => (label.toString()))
   }
   else if (layoutConfig.value.indexType === 'date') {
     generateDateAxisRange(
       layoutConfig.value.index,
-      data.value.datasets.flatMap(set => (set.data.map(unit => (DataUtil.indexDate(unit))))),
+      data.value.datasets.flatMap((set) => (set.data.map((unit) => (DataUtil.indexDate(unit))))),
     )
     data.value.datasets.forEach((dataset) => {
       dataset.data.forEach((dataUnit) => {
@@ -233,15 +233,15 @@ watchEffect(() => {
   else {
     generateAxisRange(
       layoutConfig.value.index,
-      data.value.datasets.flatMap(set => (set.data.map(unit => (DataUtil.indexNumber(unit))))),
+      data.value.datasets.flatMap((set) => (set.data.map((unit) => (DataUtil.indexNumber(unit))))),
     )
   }
   layoutConfig.value.index.posLine = [...layoutConfig.value.index.pos]
   if (layoutConfig.value.gridAlign) {
     layoutConfig.value.index.min -= 0.5 * layoutConfig.value.index.interval
     layoutConfig.value.index.max += 0.5 * layoutConfig.value.index.interval
     layoutConfig.value.index.posLine.push(layoutConfig.value.index.posLine[layoutConfig.value.index.posLine.length - 1] + layoutConfig.value.index.interval)
-    layoutConfig.value.index.posLine = layoutConfig.value.index.posLine.map(pos => (pos - 0.5 * layoutConfig.value.index!.interval))
+    layoutConfig.value.index.posLine = layoutConfig.value.index.posLine.map((pos) => (pos - 0.5 * layoutConfig.value.index!.interval))
   }
   if (layoutConfig.value.edgeOffset) {
     layoutConfig.value.index.min -= 0.5 * layoutConfig.value.index.interval
@@ -271,7 +271,7 @@ watchEffect(() => {
 
   generateAxisRange(
     layoutConfig.value.cross,
-    data.value.datasets.flatMap(set => (set.data.map(unit => (unit.cross)))),
+    data.value.datasets.flatMap((set) => (set.data.map((unit) => (unit.cross)))),
   )
 
   for (let i = 1; i <= data.value.datasets.length; i++) {

extensions/chart/src/widgets/lineChart.vue

@@ -120,7 +120,7 @@ onMounted(() => {
       return
     if (data.value.datasets.length === 0)
       return
-    if (data.value.datasets.some(dataset => (dataset.data.length === 0)))
+    if (data.value.datasets.some((dataset) => (dataset.data.length === 0)))
       return
 
     dotSets.value = data.value.datasets.map((set) => {

extensions/chart/src/widgets/mixedChart.vue

@@ -34,14 +34,14 @@ const mixedOptions = ref<BaseSimpleChartOptions>({})
 watchEffect(() => {
   const stringLabels: string[] = []
   const dateLabels: DateTime[] = []
-  mixedChartData.value.forEach(data => data.data.labels?.forEach((label) => {
+  mixedChartData.value.forEach((data) => data.data.labels?.forEach((label) => {
     if (typeof label === 'string')
       stringLabels.push(label)
     else if (label instanceof DateTime)
       dateLabels.push(label)
   }))
   mixedData.value.labels = options.labels ?? (stringLabels.length > 0 ? stringLabels : dateLabels)
-  mixedData.value.datasets = mixedChartData.value.flatMap(data => data.data.datasets)
+  mixedData.value.datasets = mixedChartData.value.flatMap((data) => data.data.datasets)
 }, {
   flush: 'post',
 })

extensions/code/src/index.vue

@@ -18,7 +18,7 @@ const props = defineProps<CodeOptions>()
 const options = defineWidget<CodeOptions>(props)
 
 const slots = useSlots()
-const codes = slots.default ? slots.default().map(vnode => vnode.children).join('') : ''
+const codes = slots.default ? slots.default().map((vnode) => vnode.children).join('') : ''
 const content = ref(await codeToHtml(codes, {
   ...options.shikiOptions,
   lang: options.lang,

extensions/geometry/src/dot.vue

@@ -35,7 +35,9 @@ const position = computed(() => {
 
 <template>
   <g v-bind="figure(options)">
-    <Arc :radius="(options.size ?? 20) / 2"/>
-    <Text v-if="options.tag" :x="position[0]" :y="position[1]">{{ options.tag }}</Text>
+    <Arc :radius="(options.size ?? 20) / 2" />
+    <Text v-if="options.tag" :x="position[0]" :y="position[1]">
+      {{ options.tag }}
+    </Text>
   </g>
 </template>

extensions/google-fonts/src/index.vue

@@ -2,7 +2,6 @@
 import { defineWidget } from '@vue-motion/core'
 import { ref, watchEffect } from 'vue'
 import type { WidgetOptions } from '@vue-motion/lib'
-import { widget } from '@vue-motion/lib'
 
 export interface GoogleFontsOptions extends WidgetOptions {
   fontName: string

extensions/layout/src/column.vue

@@ -20,7 +20,7 @@ const options = defineWidget<ColumnOptions>(props)
         :style="{
           width: '100%',
           display: 'flex',
-          flexDirection: 'column'
+          flexDirection: 'column',
         }"
       >
         <slot />

extensions/lights/src/distant-light.vue

@@ -14,10 +14,10 @@ export interface DistantLightOptions extends WidgetOptions {
 
 // Set default values for the optional props
 const props = withDefaults(defineProps<DistantLightOptions>(), {
-  color: '#ffffff',    // Default color is white
-  azimuth: 45,         // Default azimuth angle
-  elevation: 30,       // Default elevation angle
-  type: 'diffuse'      // Default light type is 'diffuse'
+  color: '#ffffff', // Default color is white
+  azimuth: 45, // Default azimuth angle
+  elevation: 30, // Default elevation angle
+  type: 'diffuse', // Default light type is 'diffuse'
 })
 
 // Define the widget options for the component, which are of type DistantLightOptions

extensions/markdown/src/index.vue

@@ -12,11 +12,11 @@ const props = defineProps<MarkdownOptions>()
 const options = defineWidget<MarkdownOptions>(props)
 
 const slots = useSlots()
-const md = ref(slots.default ? slots.default().map(vnode => vnode.children).join('') : '')
+const md = ref(slots.default ? slots.default().map((vnode) => vnode.children).join('') : '')
 
 onUpdated(() => {
   const slots = useSlots()
-  md.value = slots.default ? slots.default().map(vnode => vnode.children).join('') : ''
+  md.value = slots.default ? slots.default().map((vnode) => vnode.children).join('') : ''
 })
 
 const content = computed(() => {

extensions/math/src/math-function.vue

@@ -29,12 +29,12 @@ function generateSvgPath(mathFunc: (x: number) => number, domain: {
 
   for (let x = xMin; x <= xMax; x += step) {
     const y = mathFunc(x)
-    
+
     // Convert the values ​​of a mathematical function to SVG coordinates
     const svgX = (x - xMin) * scaleX
     const svgY = (yMax - y) * scaleY // Invert the y-axis to conform to the SVG coordinate system
-    
-    path.push(`${x === xMin || svgY > 1500 || svgY < -1500  ? 'M' : 'L'} ${svgX} ${svgY}`)   
+
+    path.push(`${x === xMin || svgY > 1500 || svgY < -1500 ? 'M' : 'L'} ${svgX} ${svgY}`)
   }
 
   return path.join(' ')

extensions/math/src/number-axis.vue

@@ -18,11 +18,11 @@ const props = defineProps<NumberAxisOptions>()
 const options = defineWidget<NumberAxisOptions>(props)
 
 function getIntervalOrDefault(interval?: number): number {
-  return interval ?? 100;
+  return interval ?? 100
 }
 
 function getProgressOrDefault(progress?: number): number {
-  return progress ?? 1;
+  return progress ?? 1
 }
 </script>
 
@@ -50,10 +50,10 @@ function getProgressOrDefault(progress?: number): number {
         [0, -10],
         [0, 10],
         [Math.sqrt(300), 0],
-      ]" 
-      :border-color="options.tip ?? 'white'" 
+      ]"
+      :border-color="options.tip ?? 'white'"
       :fill-color="options.tip ?? 'white'"
-      :x="options.domain[1] * getIntervalOrDefault(options.interval)" 
+      :x="options.domain[1] * getIntervalOrDefault(options.interval)"
       :y="0"
     />
   </g>
@@ -65,20 +65,20 @@ function getProgressOrDefault(progress?: number): number {
       :border-color="options.trim ?? 'white'"
     />
     <Line
-      v-for="i in Math.abs(options.domain[1] - options.domain[0])" 
-      :from="[(i + 1) * getIntervalOrDefault(options.interval), -10]" 
-      :to="[(i + 1) * getIntervalOrDefault(options.interval), 10]" 
-      :border-color="options.trim ?? 'white'" 
+      v-for="i in Math.abs(options.domain[1] - options.domain[0])"
+      :from="[(i + 1) * getIntervalOrDefault(options.interval), -10]"
+      :to="[(i + 1) * getIntervalOrDefault(options.interval), 10]"
+      :border-color="options.trim ?? 'white'"
       :x="(options.domain[0] - 1) * getIntervalOrDefault(options.interval)"
     />
     <Text
-      v-for="i in Math.abs(options.domain[1] - options.domain[0] + 1)" 
+      v-for="i in Math.abs(options.domain[1] - options.domain[0] + 1)"
       border-color="none"
-      :fill-color="options.fontColor ?? 'white'" 
-      :x="(options.domain[0] + i - 1) * getIntervalOrDefault(options.interval)" 
+      :fill-color="options.fontColor ?? 'white'"
+      :x="(options.domain[0] + i - 1) * getIntervalOrDefault(options.interval)"
       :y="20"
-      :rotation="-(options.rotation ?? 0)" 
-      align="start" 
+      :rotation="-(options.rotation ?? 0)"
+      align="start"
       :font-size="20"
     >
       {{ (options.trend ?? (x => x.toString()))(i + options.domain[0] - 1) }}
@@ -88,10 +88,10 @@ function getProgressOrDefault(progress?: number): number {
         [0, -10],
         [0, 10],
         [Math.sqrt(300), 0],
-      ]" 
-      :border-color="options.tip ?? 'white'" 
+      ]"
+      :border-color="options.tip ?? 'white'"
       :fill-color="options.tip ?? 'white'"
-      :x="options.domain[1] * getIntervalOrDefault(options.interval)" 
+      :x="options.domain[1] * getIntervalOrDefault(options.interval)"
       :y="0"
     />
   </g>