fix: fix some type-check (#45)

* build: ignore dist in eslint * fix: add `vite` as dependency in every workspaces to solve some type error in `vite.config.ts` * ci: replace `tsc` with `vue-tsc` to check `.vue` files correctly * fix: restore `vite` dependency in client package * build: disable some ESLint rules * build(deps): force downgrade typescript as it is not compatible with vue-tsc * build: optimize ESLint performance * build(deps): add `@vue-motion/core` to supress `template/src`'s `vue-tsc` errors. * fix: right operand of ?? is unreachable because the left operand is never nullish * fix: property 'forEach' does not exist on type 'Ref<Widget<any>[], Widget<any>[]>'. * build(deps): update lockfile * build: update tsconfig.json * fix: accidentially broke container.vue * fix: add wid and ReturnWidget * ci: move unused checks to ESLint * build: update tsconfig.json * fix: 'data' is possibly 'undefined'. * fix: ...
Bug-Duck · Nov 29, 2024 · e8efcb7 · e8efcb7
1 parent 700fbaa
commit e8efcb7
Show file tree

Hide file tree

Showing 45 changed files with 1,973 additions and 2,354 deletions.
diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
@@ -30,7 +30,7 @@ jobs:
 
       - name: Run tsc
         run: |
-          pnpm tsc --noEmit
+          pnpm vue-tsc --noEmit
 
   prettier:
     runs-on: ubuntu-latest

diff --git a/eslint.config.js b/eslint.config.js
@@ -14,4 +14,15 @@ export default [
     files: ["**/*.vue"],
     languageOptions: { parserOptions: { parser: tseslint.parser } },
   },
+  {
+    ignores: ["**/dist/**/*"],
+  },
+  {
+    rules: {
+      // 暂时禁用这几条规则避免干扰提交
+      "@typescript-eslint/no-explicit-any": "off",
+      "vue/multi-word-component-names": "off",
+      "@typescript-eslint/no-unused-vars": "warn",
+    },
+  },
 ];
diff --git a/extensions/animations/package.json b/extensions/animations/package.json
@@ -33,6 +33,7 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.1.4",
+    "vite": "catalog:",
     "vite-plugin-dts": "^3.9.1"
   }
 }
diff --git a/extensions/chart/package.json b/extensions/chart/package.json
@@ -36,6 +36,7 @@
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^5.1.4",
+    "vite": "catalog:",
     "vite-plugin-dts": "^3.9.1"
   }
 }
diff --git a/extensions/chart/src/utils/useSimpleChart.ts b/extensions/chart/src/utils/useSimpleChart.ts
@@ -1,44 +1,48 @@
-import { defineWidget } from '@vue-motion/core'
-import type { Ref } from 'vue'
-import { inject, provide, ref, unref } from 'vue'
+import { defineWidget } from "@vue-motion/core";
+import type { Ref } from "vue";
+import { inject, provide, ref, unref } from "vue";
 
-import type { BaseSimpleChartData, BaseSimpleChartOptions } from '../widgets/baseSimpleChart.vue'
-import type { ChartLayoutConfig } from '../widgets/chartLayout.vue'
-import type { MixedChartData } from '../widgets/mixedChart.vue'
+import type {
+  BaseSimpleChartData,
+  BaseSimpleChartOptions,
+} from "../widgets/baseSimpleChart.vue";
+import type { ChartLayoutConfig } from "../widgets/chartLayout.vue";
+import type { MixedChartData } from "../widgets/mixedChart.vue";
 
 export function useSimpleChart<T extends BaseSimpleChartOptions>(props: T) {
-  const options = defineWidget<T>(props)
+  const options = defineWidget<T>(props);
 
-  const mixedData = inject<Ref<MixedChartData[]>>('mixedChartData', ref<MixedChartData[]>([]))
-  let data = inject<Ref<BaseSimpleChartData>>('chartData')
+  const mixedData = inject<Ref<MixedChartData[]>>(
+    "mixedChartData",
+    ref<MixedChartData[]>([]),
+  );
+  let data = inject<Ref<BaseSimpleChartData>>("chartData");
   if (!data) {
     data = ref<BaseSimpleChartData>({
       labels: (options as BaseSimpleChartOptions).labels,
       datasets: [],
-    })
+    });
     mixedData.value.push({
       data: unref(data) as BaseSimpleChartData,
       options: options as BaseSimpleChartOptions,
-    })
+    });
   }
-  provide('chartData', data)
-  let layoutConfig = inject<Ref<ChartLayoutConfig>>('chartLayoutConfig')
-  if (layoutConfig)
-    options.layout = true
-  else
-    layoutConfig = ref<ChartLayoutConfig>({})
-  provide('chartLayoutConfig', layoutConfig)
+  provide("chartData", data);
+  let layoutConfig = inject<Ref<ChartLayoutConfig>>("chartLayoutConfig");
+  if (layoutConfig) options.layout = true;
+  else layoutConfig = ref<ChartLayoutConfig>({});
+  provide("chartLayoutConfig", layoutConfig);
 
-  data.value.style ??= {}
+  data.value.style ??= {};
   data.value.style = {
-    ...data.value.style,
+    ...data?.value.style,
     ...options.style,
-  }
+  };
 
   return {
     props,
     options: options as ReturnType<typeof defineWidget<T>>,
     data,
     layoutConfig,
-  }
+  };
 }
diff --git a/extensions/chart/src/widgets/barChart.vue b/extensions/chart/src/widgets/barChart.vue
@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import { onMounted, ref, watchEffect } from 'vue'
-import { useSimpleChart } from '../utils/useSimpleChart.ts'
-import type { BaseChartStyle, Color } from '..'
-import { ColorEnum, DataUtil } from '..'
-import BaseSimpleChart from './baseSimpleChart.vue'
-import type { BaseSimpleChartOptions } from './baseSimpleChart.vue'
+import { onMounted, ref, watchEffect } from "vue";
+import type { BaseChartStyle, Color } from "..";
+import { ColorEnum, DataUtil } from "..";
+import { useSimpleChart } from "../utils/useSimpleChart.ts";
+import type { BaseSimpleChartOptions } from "./baseSimpleChart.vue";
+import BaseSimpleChart from "./baseSimpleChart.vue";
 
 /**
  * BarChart style.
@@ -14,116 +14,161 @@ import type { BaseSimpleChartOptions } from './baseSimpleChart.vue'
  * @property borderRadius - The border radius of the bar. Default is 0. Not supported yet.
  */
 export interface BarChartStyle extends BaseChartStyle {
-  borderRadius?: number
+  borderRadius?: number;
 }
 
 export interface BarChartOptions extends BaseSimpleChartOptions {
-  categoryPercentage?: number
-  barPercentage?: number
+  categoryPercentage?: number;
+  barPercentage?: number;
 }
 
 const props = withDefaults(defineProps<BarChartOptions>(), {
   gridAlign: true,
   edgeOffset: undefined,
   categoryPercentage: 0.8,
   barPercentage: 0.8,
-})
-const {
-  options,
-  data,
-  layoutConfig,
-} = useSimpleChart<BarChartOptions>(props)
+});
+const { options, data, layoutConfig } = useSimpleChart<BarChartOptions>(props);
 
-const barSets = ref<{
-  width: number
-  height: number
-  x: number
-  y: number
-  style: {
-    fillColor: Color
-    borderColor: Color
-    borderWidth: number
-    radius: number
-  }
-}[][]>([])
+const barSets = ref<
+  {
+    width: number;
+    height: number;
+    x: number;
+    y: number;
+    style: {
+      fillColor: Color;
+      borderColor: Color;
+      borderWidth: number;
+      radius: number;
+    };
+  }[][]
+>([]);
 
 onMounted(() => {
-  watchEffect(() => {
-    if (!layoutConfig.value.done)
-      return
+  watchEffect(
+    () => {
+      if (!layoutConfig.value.done) return;
 
-    barSets.value = data.value.datasets.map((set, setIndex) => {
-      set.style ??= {}
-      set.style.backgroundColor ??= data.value.style?.backgroundColor ?? ColorEnum.WHITE
-      set.style.borderColor ??= data.value.style?.borderColor ?? ColorEnum.WHITE
-      set.style.borderWidth ??= data.value.style?.borderWidth ?? 1
-      set.style.borderRadius ??= data.value.style?.borderRadius ?? 0
+      barSets.value = data.value.datasets.map((set, setIndex) => {
+        set.style ??= {};
+        set.style.backgroundColor ??=
+          data?.value.style?.backgroundColor ?? ColorEnum.WHITE;
+        set.style.borderColor ??=
+          data?.value.style?.borderColor ?? ColorEnum.WHITE;
+        set.style.borderWidth ??= data?.value.style?.borderWidth ?? 1;
+        set.style.borderRadius ??= data?.value.style?.borderRadius ?? 0;
 
-      if (layoutConfig.value.indexAxis === 'x') {
-        return set.data.map((unit) => {
-          const gridSize = (DataUtil.indexDuration(unit) ?? layoutConfig.value.index!.interval)
-            / (layoutConfig.value.index!.max - layoutConfig.value.index!.min) * layoutConfig.value.width!
-          const categorySize = gridSize * options.categoryPercentage!
-          const barSize = (categorySize / data.value.datasets.length) * options.barPercentage!
+        if (layoutConfig.value.indexAxis === "x") {
+          return set.data.map((unit) => {
+            const gridSize =
+              ((DataUtil.indexDuration(unit) ??
+                layoutConfig.value.index!.interval) /
+                (layoutConfig.value.index!.max -
+                  layoutConfig.value.index!.min)) *
+              layoutConfig.value.width!;
+            const categorySize = gridSize * options.categoryPercentage!;
+            const barSize =
+              (categorySize / data?.value.datasets.length) *
+              options.barPercentage!;
 
-          return {
-            width: barSize,
-            height: -unit.cross * (options.progress ?? 1) * layoutConfig.value.height!
-              / (layoutConfig.value.cross!.max - layoutConfig.value.cross!.min),
-            x: (DataUtil.indexNumber(unit) - (DataUtil.indexDuration(unit) ?? layoutConfig.value.index!.interval) / 2 - layoutConfig.value.index!.min)
-              / (layoutConfig.value.index!.max - layoutConfig.value.index!.min) * layoutConfig.value.width!
-              + (gridSize - categorySize) / 2 + (setIndex * categorySize) / data.value.datasets.length
-              + (categorySize / data.value.datasets.length - barSize) / 2,
-            y: layoutConfig.value.height! - (0 - layoutConfig.value.cross!.min)
-            / (layoutConfig.value.cross!.max - layoutConfig.value.cross!.min) * layoutConfig.value.height!,
-            style: {
-              fillColor: unit.style?.backgroundColor ?? set.style!.backgroundColor!,
-              borderColor: unit.style?.borderColor ?? set.style!.borderColor!,
-              borderWidth: unit.style?.borderWidth ?? set.style!.borderWidth!,
-              radius: unit.style?.borderRadius ?? set.style!.borderRadius!,
-            },
-          }
-        })
-      }
-      else {
-        return set.data.map((unit) => {
-          const gridSize = (DataUtil.indexDuration(unit) ?? layoutConfig.value.index!.interval)
-            / (layoutConfig.value.index!.max - layoutConfig.value.index!.min) * layoutConfig.value.height!
-          const categorySize = gridSize * options.categoryPercentage!
-          const barSize = (categorySize / data.value.datasets.length) * options.barPercentage!
-          return {
-            width: unit.cross * (options.progress ?? 1) * layoutConfig.value.width!
-              / (layoutConfig.value.cross!.max - layoutConfig.value.cross!.min),
-            height: barSize,
-            x: (0 - layoutConfig.value.cross!.min) / (layoutConfig.value.cross!.max - layoutConfig.value.cross!.min) * layoutConfig.value.width!,
-            y: layoutConfig.value.height! - ((DataUtil.indexNumber(unit) - (DataUtil.indexDuration(unit) ?? layoutConfig.value.index!.interval) / 2 - layoutConfig.value.index!.min)
-              / (layoutConfig.value.index!.max - layoutConfig.value.index!.min) * layoutConfig.value.height!
-              + (gridSize + categorySize) / 2
-              - (setIndex * categorySize) / data.value.datasets.length
-              - (categorySize / data.value.datasets.length - barSize) / 2),
-            style: {
-              fillColor: unit.style?.backgroundColor ?? set.style!.backgroundColor!,
-              borderColor: unit.style?.borderColor ?? set.style!.borderColor!,
-              borderWidth: unit.style?.borderWidth ?? set.style!.borderWidth!,
-              radius: unit.style?.borderRadius ?? set.style!.borderRadius!,
-            },
-          }
-        })
-      }
-    })
-  }, {
-    flush: 'post',
-  })
-})
+            return {
+              width: barSize,
+              height:
+                (-unit.cross *
+                  (options.progress ?? 1) *
+                  layoutConfig.value.height!) /
+                (layoutConfig.value.cross!.max - layoutConfig.value.cross!.min),
+              x:
+                ((DataUtil.indexNumber(unit) -
+                  (DataUtil.indexDuration(unit) ??
+                    layoutConfig.value.index!.interval) /
+                    2 -
+                  layoutConfig.value.index!.min) /
+                  (layoutConfig.value.index!.max -
+                    layoutConfig.value.index!.min)) *
+                  layoutConfig.value.width! +
+                (gridSize - categorySize) / 2 +
+                (setIndex * categorySize) / data?.value.datasets.length +
+                (categorySize / data?.value.datasets.length - barSize) / 2,
+              y:
+                layoutConfig.value.height! -
+                ((0 - layoutConfig.value.cross!.min) /
+                  (layoutConfig.value.cross!.max -
+                    layoutConfig.value.cross!.min)) *
+                  layoutConfig.value.height!,
+              style: {
+                fillColor:
+                  unit.style?.backgroundColor ?? set.style!.backgroundColor!,
+                borderColor: unit.style?.borderColor ?? set.style!.borderColor!,
+                borderWidth: unit.style?.borderWidth ?? set.style!.borderWidth!,
+                radius: unit.style?.borderRadius ?? set.style!.borderRadius!,
+              },
+            };
+          });
+        } else {
+          return set.data.map((unit) => {
+            const gridSize =
+              ((DataUtil.indexDuration(unit) ??
+                layoutConfig.value.index!.interval) /
+                (layoutConfig.value.index!.max -
+                  layoutConfig.value.index!.min)) *
+              layoutConfig.value.height!;
+            const categorySize = gridSize * options.categoryPercentage!;
+            const barSize =
+              (categorySize / data?.value.datasets.length) *
+              options.barPercentage!;
+            return {
+              width:
+                (unit.cross *
+                  (options.progress ?? 1) *
+                  layoutConfig.value.width!) /
+                (layoutConfig.value.cross!.max - layoutConfig.value.cross!.min),
+              height: barSize,
+              x:
+                ((0 - layoutConfig.value.cross!.min) /
+                  (layoutConfig.value.cross!.max -
+                    layoutConfig.value.cross!.min)) *
+                layoutConfig.value.width!,
+              y:
+                layoutConfig.value.height! -
+                (((DataUtil.indexNumber(unit) -
+                  (DataUtil.indexDuration(unit) ??
+                    layoutConfig.value.index!.interval) /
+                    2 -
+                  layoutConfig.value.index!.min) /
+                  (layoutConfig.value.index!.max -
+                    layoutConfig.value.index!.min)) *
+                  layoutConfig.value.height! +
+                  (gridSize + categorySize) / 2 -
+                  (setIndex * categorySize) / data?.value.datasets.length -
+                  (categorySize / data?.value.datasets.length - barSize) / 2),
+              style: {
+                fillColor:
+                  unit.style?.backgroundColor ?? set.style!.backgroundColor!,
+                borderColor: unit.style?.borderColor ?? set.style!.borderColor!,
+                borderWidth: unit.style?.borderWidth ?? set.style!.borderWidth!,
+                radius: unit.style?.borderRadius ?? set.style!.borderRadius!,
+              },
+            };
+          });
+        }
+      });
+    },
+    {
+      flush: "post",
+    },
+  );
+});
 
-options.edgeOffset ??= !(options.gridAlign)
+options.edgeOffset ??= !options.gridAlign;
 </script>
 
 <template>
   <BaseSimpleChart
     v-bind="{
       gridAlign: true,
-      edgeOffset: !(options.gridAlign),
+      edgeOffset: !options.gridAlign,
       ...options,
     }"
   >
@@ -147,6 +192,4 @@ options.edgeOffset ??= !(options.gridAlign)
   </BaseSimpleChart>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>