diff --git a/.eslintrc.cjs b/.eslintrc.cjs index dc51c01e0a46a3a4b11eec2b4085b9da3220d66c..7c24883ac232e091330d3c0398e1749fc72f8fce 100644 --- a/.eslintrc.cjs +++ b/.eslintrc.cjs @@ -3,6 +3,10 @@ require("@rushstack/eslint-patch/modern-module-resolution"); module.exports = { root: true, + // env.node = true, makes eslint accept module.exports + env: { + node: true, + }, extends: [ "plugin:vue/vue3-essential", "eslint:recommended", diff --git a/README.md b/README.md index 61a733b446c04a78ef0ddc0ae046140ace760245..933a0557f2b9c1b2b3a1cb6263f1df5f3e5e30c7 100644 --- a/README.md +++ b/README.md @@ -70,3 +70,5 @@ npm run test:e2e -- --debug npm run lint npm run format ``` + +Linting rules: https://eslint.vuejs.org/rules diff --git a/src/components/AgCellRenderer.vue b/src/components/AgCellRenderer.vue index 165d333bb10f17ee4d4aed34227f77770d9cb2df..306cb5322447a7953e57ec805306ac110c3007d8 100644 --- a/src/components/AgCellRenderer.vue +++ b/src/components/AgCellRenderer.vue @@ -1,12 +1,12 @@ <script setup lang="ts"> import type { IHeaderParams } from "ag-grid-community"; -const props: any = defineProps(); +const props: any = defineProps<{ params: any; value?: any }>(); const params = props.params as IHeaderParams & { value: boolean }; console.log(params?.value); const hasValue = params?.value !== undefined; -const f = (evt: any) => console.log("focus"); +// const f = (evt: any) => console.log("focus"); </script> <template> <div class="focus:ring-green-500"> diff --git a/src/components/AgHeader.vue b/src/components/AgHeader.vue index 3b9fb7c82fa982a0f0a863b3d1791b5f1e674fcb..1c0b9c33d1fc127efd745195d643a6748824c769 100644 --- a/src/components/AgHeader.vue +++ b/src/components/AgHeader.vue @@ -9,12 +9,12 @@ import "ag-grid-community/styles/ag-grid.css"; // Core grid CSS, always needed import "ag-grid-community/styles/ag-theme-alpine.css"; // Optional theme CSS // const props = defineProps<IComponent<any>>(); -const props: any = defineProps(); +const props: any = defineProps<{ params: any; value: any }>(); const params = props.params as IHeaderParams & { menuIcon: string }; const menuButton = ref(null); console.log(params); -function onMenuClicked(evt: any) { +function onMenuClicked() { params.showColumnMenu(menuButton.value as any); // some problem here } </script> @@ -26,7 +26,7 @@ function onMenuClicked(evt: any) { v-if="params.enableMenu" ref="menuButton" class="customHeaderMenuButton" - @click="onMenuClicked($event)" + @click="onMenuClicked()" > <i class="fa" :class="params.menuIcon"></i> </div> diff --git a/src/components/Table.vue b/src/components/AgTable.vue similarity index 92% rename from src/components/Table.vue rename to src/components/AgTable.vue index 75c26d5256c3c2e9e6e20a66c81cef08f2c9d4d2..fa2839ed4baf3e6fc2c327d224d32ccfb2eccba1 100644 --- a/src/components/Table.vue +++ b/src/components/AgTable.vue @@ -1,7 +1,8 @@ <script setup lang="ts"> import { AgGridVue } from "ag-grid-vue3"; import { ref } from "vue"; -import type { GridReadyEvent, ColDef } from "ag-grid-community"; +import type { ColDef } from "ag-grid-community"; +// import type { GridReadyEvent } from "ag-grid-community"; import { useTippy } from "vue-tippy"; // import AgHeader from "./AgHeader.vue"; import AgTooltip from "./AgTooltip.vue"; @@ -42,15 +43,15 @@ interface ICar { isValid?: boolean; } -const gridApi: any = ref(null); -const onGridReady = (params: GridReadyEvent) => { - gridApi.value = params.api; -}; +// const gridApi: any = ref(null); +// const onGridReady = (params: GridReadyEvent) => { +// gridApi.value = params.api; +// }; const rowData: any = ref(rows); -const cellWasClicked = (evt: any) => { - console.log("xxx cell was clicked", evt.value); -}; +// const cellWasClicked = (evt: any) => { +// console.log("xxx cell was clicked", evt.value); +// }; const cellFocused = (evt: any) => { console.log("xxx cell was focused", evt); }; diff --git a/src/components/AgTooltip.vue b/src/components/AgTooltip.vue index e66bafafad435e6f88ee59df635ac8ce7158617e..8048da04bd11fd64f2ca73968eb7f0d0f40beadf 100644 --- a/src/components/AgTooltip.vue +++ b/src/components/AgTooltip.vue @@ -5,20 +5,19 @@ --> <script setup lang="ts"> -import { ref } from "vue"; -import Echart from "./Echart.vue"; +// import { ref } from "vue"; +import ChartComp from "./ChartComp.vue"; -const props: any = defineProps(); -const params: any = props.params; +const props: any = defineProps<{ params: any; value: any }>(); -const isHeader = params.rowIndex === undefined; +const isHeader = props.params.rowIndex === undefined; </script> <template> <div class="border"> <div class="bg-slate-700 text-white center" v-if="isHeader">hello!</div> <div class=""> - <echart /> + <chart-comp /> </div> </div> </template> diff --git a/src/components/Echart.vue b/src/components/ChartComp.vue similarity index 100% rename from src/components/Echart.vue rename to src/components/ChartComp.vue diff --git a/src/components/Home.vue b/src/components/HomePage.vue similarity index 91% rename from src/components/Home.vue rename to src/components/HomePage.vue index 4faf5bfb26956c54dafa69afe9eb9ba2ae395abe..36324445b31f0947c908a46d5bfe2cb3ad8a53aa 100644 --- a/src/components/Home.vue +++ b/src/components/HomePage.vue @@ -1,5 +1,5 @@ <script setup lang="ts"> -import List from "./List.vue"; +import List from "./ListComp.vue"; </script> <template> diff --git a/src/components/List.vue b/src/components/ListComp.vue similarity index 100% rename from src/components/List.vue rename to src/components/ListComp.vue diff --git a/src/components/TanTable.vue b/src/components/TanTable.vue index c06895b3b1a4fb94ccd03550d0200d5eb42ac736..896f52ab9b1919db4f8924d4c3a1b3d681b49cbf 100644 --- a/src/components/TanTable.vue +++ b/src/components/TanTable.vue @@ -78,9 +78,9 @@ const columns = [ const data = ref(defaultData); -const rerender = () => { - data.value = defaultData; -}; +// const rerender = () => { +// data.value = defaultData; +// }; const table = useVueTable({ get data() { diff --git a/src/router/index.ts b/src/router/index.ts index 2875bdd76db8193193753aca13ee5ccd00fd1f69..4e2a2be92dea6e996864e5caf83b27870f757f06 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -1,11 +1,11 @@ import { createRouter, createWebHistory } from "vue-router"; -import Home from "../components/Home.vue"; +import Home from "../components/HomePage.vue"; const router = createRouter({ history: createWebHistory(), routes: [ { path: "/", component: Home }, - { path: "/ag-grid", component: () => import("../components/Table.vue") }, + { path: "/ag-grid", component: () => import("../components/AgTable.vue") }, { path: "/tanstack", component: () => import("../components/TanTable.vue"),