clean up files

Author: oddcelot

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@ag-grid-community/core": "^29.3.5",
+    "@vueuse/core": "^10.1.2",
     "ag-grid-autocomplete-editor": "^3.0.1",
     "vue": "3.3.4"
   },

pnpm-lock.yaml

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import HelloWorld from './components/HelloWorld.vue';
 import Grid from './components/Grid.vue';
 </script>
 
@@ -11,8 +10,11 @@ import Grid from './components/Grid.vue';
     <a href="https://vuejs.org/" target="_blank">
       <img src="./assets/vue.svg" class="logo vue" alt="Vue logo" />
     </a>
+    <br />
+    <a href="https://ag-grid.com/" target="_blank">
+      <img src="https://blog.ag-grid.com/content/images/2021/02/logo-white.svg" class="logo ag-grid" alt="Vue logo" />
+    </a>
   </div>
-  <HelloWorld msg="Vite + Vue" />
   <Grid />
 </template>
 
@@ -29,4 +31,7 @@ import Grid from './components/Grid.vue';
 .logo.vue:hover {
   filter: drop-shadow(0 0 2em #42b883aa);
 }
+.logo.ag-grid:hover {
+  filter: drop-shadow(0 0 2em #007bff);
+}
 </style>

src/App.vue

@@ -5,45 +5,38 @@ export default {
     AgGridVue,
     GridCell,
     GridCellEditor,
-    GridCellEditorClassic,
-    GridCellEditorWrapper,
   },
 };
 </script>
 
 <script setup lang="ts">
+import { usePreferredDark } from "@vueuse/core";
 import "ag-grid-community/styles/ag-grid.css";
 import "ag-grid-community/styles/ag-theme-alpine.css";
 import { AgGridVue } from "ag-grid-vue3";
 import GridCell from "./GridCell.vue";
 import GridCellEditor from "./GridCellEditor.vue";
-import GridCellEditorClassic from "./GridCellEditorClassic.vue";
-import GridCellEditorWrapper from "./GridCellEditorWrapper.vue";
-import { ColDef } from "ag-grid-community";
+import { ColDef, GridReadyEvent } from "ag-grid-community";
 
 const columnDefs: ColDef[] = [
   {
     headerName: "Make",
     field: "make",
-    editable: true,
     cellRenderer: "GridCell",
     cellRendererParams: { name: "custom" },
-    cellEditor: "GridCellEditor",
   },
   {
     headerName: "Model",
     field: "model",
-    editable: true,
-    cellEditor: "GridCellEditorWrapper",
   },
   {
     headerName: "Price",
     field: "price",
-    cellRenderer: "GridCellEditor",
     editable: true,
-    cellEditor: "GridCellEditorClassic",
+    cellEditor: "GridCellEditor",
   },
 ];
+
 const rowData = [
   { make: "Toyota", model: "Celica", price: 35000 },
   {
@@ -57,11 +50,18 @@ const rowData = [
 
 <template>
   <div class="grid">
+    <pre>{{ usePreferredDark() }}</pre>
     <AgGridVue
-      style="height: 200px"
       class="ag-theme-alpine"
+      :class="{ 'ag-theme-alpine-dark': usePreferredDark().value }"
       :columnDefs="columnDefs"
       :rowData="rowData"
+      @grid-ready="
+        ($event: GridReadyEvent<typeof rowData>) => {
+          $event.api.sizeColumnsToFit();
+        }
+      "
+      dom-layout="autoHeight"
     >
     </AgGridVue>
   </div>

src/components/Grid.vue

@@ -34,7 +34,7 @@ const isCancelBeforeStart = () => {
 // If you return true, then the result of the edit will be ignored.
 const isCancelAfterEnd = () => {
   // our editor will reject any value greater than 1000
-  return value.value > 1000;
+  return value.value > 100000;
 };
 
 onMounted(() => {
@@ -43,7 +43,6 @@ onMounted(() => {
     input.value?.focus();
   });
 
-  // console.log(this);
 });
 
 defineExpose({