diff --git a/src/components/AgCellRenderer.vue b/src/components/AgCellRenderer.vue index 0a5c0794719186f0cf1d5bafaa6b68414db9b796..165d333bb10f17ee4d4aed34227f77770d9cb2df 100644 --- a/src/components/AgCellRenderer.vue +++ b/src/components/AgCellRenderer.vue @@ -1,7 +1,7 @@ <script setup lang="ts"> import type { IHeaderParams } from "ag-grid-community"; -const props = defineProps(); -const params = props.params as IHeaderParams; +const props: any = defineProps(); +const params = props.params as IHeaderParams & { value: boolean }; console.log(params?.value); const hasValue = params?.value !== undefined; @@ -9,12 +9,11 @@ const hasValue = params?.value !== undefined; const f = (evt: any) => console.log("focus"); </script> <template> - <div class="focus:ring-green-500 " > - <div v-if="hasValue" class="bg-blue300"> + <div class="focus:ring-green-500"> + <div v-if="hasValue" class="bg-blue300"> <input class="" type="checkbox" :checked="params.value" /> <!-- <input type="text" value="asdf" @focus="f" name="asdf" id=""/> --> </div> <div v-else class="c">n/a</div> </div> </template> - diff --git a/src/components/AgHeader.vue b/src/components/AgHeader.vue index c49bfe5cd2e161afbd7a1b2944945ea5f42a1367..3b9fb7c82fa982a0f0a863b3d1791b5f1e674fcb 100644 --- a/src/components/AgHeader.vue +++ b/src/components/AgHeader.vue @@ -9,22 +9,26 @@ 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 = defineProps(); -const params = props.params as IHeaderParams; +const props: any = defineProps(); +const params = props.params as IHeaderParams & { menuIcon: string }; const menuButton = ref(null); console.log(params); function onMenuClicked(evt: any) { - params.showColumnMenu(menuButton.value); // some problem here + params.showColumnMenu(menuButton.value as any); // some problem here } - </script> <template> <div> <span> {{ params.displayName }} </span> - <div v-if="params.enableMenu" ref="menuButton" class="customHeaderMenuButton" @click="onMenuClicked($event)"> - <i class="fa" :class="params.menuIcon"></i> - </div> + <div + v-if="params.enableMenu" + ref="menuButton" + class="customHeaderMenuButton" + @click="onMenuClicked($event)" + > + <i class="fa" :class="params.menuIcon"></i> + </div> </div> </template> diff --git a/src/components/AgTooltip.vue b/src/components/AgTooltip.vue index e25e9878e965465c5d9bf20807b73d0cd012dad2..007ea1889d260bdba510c2537763b1d14760ca22 100644 --- a/src/components/AgTooltip.vue +++ b/src/components/AgTooltip.vue @@ -7,7 +7,7 @@ <script setup lang="ts"> import { ref } from "vue"; -const props = defineProps(); +const props: any = defineProps(); const params: any = props.params; const isHeader = params.rowIndex === undefined; diff --git a/src/components/Table.vue b/src/components/Table.vue index 482e1af8b9776cf3cbb290a90a9104be0bc72fd2..75c26d5256c3c2e9e6e20a66c81cef08f2c9d4d2 100644 --- a/src/components/Table.vue +++ b/src/components/Table.vue @@ -55,7 +55,8 @@ const cellFocused = (evt: any) => { console.log("xxx cell was focused", evt); }; -const columnDefs: ColDef[] = ref([ +// should be ColDef[] +const columnDefs = ref([ { field: "make", headerTooltip: "make", @@ -102,7 +103,7 @@ const get = async () => { const url = "https://www.ag-grid.com/example-assets/row-data.json"; const response = await fetch(url); - let remoteRowData = (await response.json()) satisfies ICar; + let remoteRowData = (await response.json()) as ICar[]; remoteRowData = remoteRowData.map((r: any) => ({ ...r, isValid: false })); rowData.value = remoteRowData; }; diff --git a/src/components/__tests__/HelloWorld.spec.ts b/src/components/__tests__/HelloWorld.spec.ts index da11e2e8c927c111091d5e3e3edc1878f9ce93cb..6157699ea8dd99b4ecb94d509c8a244c109245fc 100644 --- a/src/components/__tests__/HelloWorld.spec.ts +++ b/src/components/__tests__/HelloWorld.spec.ts @@ -1,7 +1,7 @@ import { describe, it, expect } from "vitest"; import { mount } from "@vue/test-utils"; -import HelloWorld from "../HelloWorld.vue"; +import HelloWorld from "../List.vue"; describe("HelloWorld", () => { it("renders properly", () => {