9 feature add styles exports

.github/workflows/ci_cd.yml

@@ -33,6 +33,7 @@ jobs:
         node-version: ${{ matrix.node-version }}
         cache: 'pnpm'
     - run: pnpm run ci-all
+    - run: pnpm test
 
   build_and_publish:
     runs-on: ubuntu-latest

.gitignore

@@ -12,6 +12,8 @@ node_modules
 dist
 dist-ssr
 coverage
+coverage-e2e
+coverage-unit
 *.local
 
 /cypress/videos/
@@ -41,3 +43,5 @@ robots.txt
 urls.txt
 
 *.tsbuildinfo
+.nyc_output
+screenshots

.vscode/launch.json

@@ -7,6 +7,12 @@
       "request": "launch",
       "type": "node-terminal"
     },
+    {
+      "command": "pnpm test",
+      "name": "Debug vitest",
+      "request": "launch",
+      "type": "node-terminal"
+    },
     {
       "type": "chrome",
       "request": "attach",

README.md

@@ -135,6 +135,13 @@ Customizable native Vue3 data grid with very limited dependencies. Leverages a f
 
 ## Release Notes
 
+### v3.2.0
+  - [#9](https://github.com/nruffing/data-grid-vue/issues/9): Add package export so styles can be loaded via `data-grid-vue/style`.
+  - Fix bug in `ClientSideDataService` where paging through a sorted grid could cause data to not stay sorted.
+  - Update ['dragon-drop-vue'](https://www.npmjs.com/package/dragon-drop-vue) dependency to v2.1.0 to leverage ability to debounce the `dragover` event.
+  - Replace [`debounce`](https://www.npmjs.com/package/debounce) with new [`native-event-vue`](https://www.npmjs.com/package/native-event-vue) package to leverage the lightweight vue-friendly native event handling with debounce.
+  - Update development dependencies.
+
 ### v3.1.0
   - Update ['dragon-drop-vue'](https://www.npmjs.com/package/dragon-drop-vue) dependency to v1.1.0
   - update development dependencies

cspell.json

@@ -7,6 +7,7 @@
     "clickanalytics",
     "datagridvue",
     "docsearch",
+    "dragover",
     "gapi",
     "keyvault",
     "navigatable",
@@ -17,9 +18,11 @@
     "prismjs",
     "shiki",
     "showcolumnselection",
+    "typecheck",
     "vnode",
     "vuejs",
     "vuepress",
+    "webdriverio",
     "xmldocmd"
   ],
   "ignoreWords": ["datagrid", "Freepik"],

dev-app/package.json

@@ -27,17 +27,16 @@
     "@babel/types": "^7.23.6",
     "@tsconfig/node18": "^18.2.2",
     "@types/node": "^18.11.9",
-    "@vitejs/plugin-vue": "^4.5.2",
+    "@vitejs/plugin-vue": "^5.0.3",
     "@vue/tsconfig": "^0.5.1",
     "tslib": "^2.6.2",
     "typescript": "~5.3.3",
-    "vite": "^5.0.10",
-    "vue": "^3.3.13",
+    "vite": "^5.0.11",
+    "vue": "^3.4.12",
     "vue-router": "^4.2.5",
-    "vue-tsc": "^1.8.25"
+    "vue-tsc": "^1.8.27"
   },
   "dependencies": {
-    "debounce": "^2.0.0",
-    "dragon-drop-vue": "^1.1.0"
+    "data-grid-vue": "workspace:*"
   }
 }

dev-app/src/main.ts

@@ -1,6 +1,10 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
-import { DataGridVue } from '../../lib/main'
+import { DataGridVue } from 'data-grid-vue'
+import 'data-grid-vue/style'
 
-createApp(App).use(router).use(DataGridVue).mount('#app')
+createApp(App)
+  .use(router)
+  .use(DataGridVue, { dragonDropVueOptions: { debugLog: true } })
+  .mount('#app')

lib/DataService.spec.ts

@@ -0,0 +1,76 @@
+import { expect, test, describe } from 'vitest'
+import { ClientSideDataService, StubDataService } from './DataService'
+import { SortType } from './Sort'
+import { DataType } from './DataGridVue'
+
+interface TestDataItem {
+  id: number
+  name: string
+}
+
+const TestDataItemOne = { id: 1, name: 'Test 1' }
+const TestDataItemTwo = { id: 2, name: 'Test 2' }
+const TestDataItemThree = { id: 3, name: 'Test 3' }
+const TestDataItemFour = { id: 4, name: 'Test 4' }
+const TestDataItemFive = { id: 5, name: 'Test 5' }
+
+const TestDataSet = [TestDataItemThree, TestDataItemTwo, TestDataItemFour, TestDataItemFive, TestDataItemOne] as TestDataItem[]
+
+describe('StubDataService', () => {
+  test('getPageAsync', async () => {
+    const pageData = await StubDataService.getPageAsync(1, 10, [], undefined)
+    expect(pageData).toEqual({
+      totalItems: 0,
+      dataItems: [],
+    })
+  })
+})
+
+describe('ClientSideDataService', () => {
+  test('getPageAsync | pages', async () => {
+    const dataService = new ClientSideDataService([...TestDataSet])
+    const pageDataOne = await dataService.getPageAsync(1, 2, [], undefined)
+    const pageDataTwo = await dataService.getPageAsync(2, 1, [], undefined)
+    const pageDataThree = await dataService.getPageAsync(2, 3, [], undefined)
+    expect(pageDataOne).toEqual({
+      totalItems: TestDataSet.length,
+      dataItems: [TestDataItemThree, TestDataItemTwo],
+    })
+    expect(pageDataTwo).toEqual({
+      totalItems: TestDataSet.length,
+      dataItems: [TestDataItemTwo],
+    })
+    expect(pageDataThree).toEqual({
+      totalItems: TestDataSet.length,
+      dataItems: [TestDataItemFive, TestDataItemOne],
+    })
+  })
+
+  test('getPageAsync | sorts', async () => {
+    const dataService = new ClientSideDataService([...TestDataSet])
+
+    const testCases = [
+      {
+        sort: { fieldName: 'id', dataType: DataType.number, type: SortType.descending },
+        pageNum: 1,
+        pageSize: 2,
+        expected: [TestDataItemFive, TestDataItemFour],
+      },
+      {
+        sort: { fieldName: 'id', dataType: DataType.number, type: SortType.descending },
+        pageNum: 2,
+        pageSize: 2,
+        expected: [TestDataItemThree, TestDataItemTwo],
+      },
+      { sort: { fieldName: 'id', dataType: DataType.number, type: SortType.descending }, pageNum: 3, pageSize: 2, expected: [TestDataItemOne] },
+    ]
+
+    for (const testCase of testCases) {
+      const pageData = await dataService.getPageAsync(testCase.pageNum, testCase.pageSize, [testCase.sort], undefined)
+      expect(pageData).toEqual({
+        totalItems: TestDataSet.length,
+        dataItems: testCase.expected,
+      })
+    }
+  })
+})

lib/DataService.ts

@@ -52,20 +52,16 @@ export class ClientSideDataService implements DataService {
   }
 
   sort(sort: Sort[]) {
-    this.sorted = [...this.filtered]
-
-    if (!sort?.length && this.previousSortJson === '[]') {
+    if (!sort?.length) {
+      this.sorted = [...this.filtered]
+      this.previousSortJson = '[]'
       return
     }
 
-    if (!sort?.length) {
-      this.previousSortJson = '[]'
-    } else {
-      const sortJson = JSON.stringify(sort)
-      if (sortJson !== this.previousSortJson) {
-        ClientSideSort.sort(sort, this.sorted)
-        this.previousSortJson = sortJson
-      }
+    const sortJson = JSON.stringify(sort)
+    if (sortJson !== this.previousSortJson) {
+      ClientSideSort.sort(sort, this.sorted)
+      this.previousSortJson = sortJson
     }
   }
 
@@ -103,7 +99,7 @@ export class ClientSideDataService implements DataService {
       const endIndex = startIndex + pageSize
 
       if (startIndex >= this.dataItems.length) {
-        console.warn(`ClientSideDataRepository - getPage - pageNum exceeds data length`)
+        console.warn(`ClientSideDataService - getPage - pageNum exceeds data length`)
         return Promise.resolve(EmptyPageData)
       }
 

lib/components/DataGridVue.vue

@@ -271,7 +271,7 @@
 
 <script lang="ts">
 import { defineComponent, type PropType, nextTick, type SlotsType } from 'vue'
-import debounce from 'debounce'
+import { useNativeEvent, type NativeEvent, DebounceMode } from 'native-event-vue'
 import { DataType, Field, type Column } from '../DataGridVue'
 import { type DataService, StubDataService, ClientSideDataService, type ServerSideDataServiceOptions, ServerSideDataService } from '../DataService'
 import { type Sort, type SortOptions, SortType } from '../Sort'
@@ -307,7 +307,7 @@ interface Data {
   filters: FilterCondition[]
   filterOptionsShown: boolean
   externalFilter: Filter | undefined
-  windowResizeDebounce: any | undefined
+  windowResizeDebounce: NativeEvent | undefined
   columnWidths: string[]
   draggingColumn: Column | undefined
   popupOptions:
@@ -788,16 +788,14 @@ export default defineComponent({
 
     await this.loadPageDataAsync()
 
-    this.windowResizeDebounce = debounce(this.onWindowResize, 50)
-    window.addEventListener('resize', this.windowResizeDebounce)
+    this.windowResizeDebounce = useNativeEvent(window, 'resize', this.onWindowResize, undefined, 200, DebounceMode.MaximumFrequency)
 
     nextTick(() => {
       this.calculateColumnWidths()
     })
   },
   beforeUnmount() {
-    window.removeEventListener('resize', this.windowResizeDebounce)
-    this.windowResizeDebounce?.clear()
+    this.windowResizeDebounce?.destroy()
     this.windowResizeDebounce = undefined
   },
   watch: {

package.json

@@ -1,6 +1,6 @@
 {
   "name": "data-grid-vue",
-  "version": "3.1.0",
+  "version": "3.2.0",
   "type": "module",
   "private": false,
   "description": "Customizable native Vue3 data grid with very limited dependencies. Leverages a flat html structure and CSS grid to allow full layout control.",
@@ -44,7 +44,8 @@
       "types": "./dist/types/main.d.ts",
       "import": "./dist/data-grid-vue.js",
       "require": "./dist/data-grid-vue.umd.cjs"
-    }
+    },
+    "./style": "./dist/style.css"
   },
   "types": "./dist/types/main.d.ts",
   "main": "dist/data-grid-vue.umd.js",
@@ -57,6 +58,8 @@
     "build-only": "vite build",
     "type-check": "vue-tsc --noEmit",
     "ci-all": "pnpm i && pnpm run --recursive build",
+    "test": "vitest",
+    "test:unit": "vitest --run",
     "format": "pnpm exec prettier --write \"./**/*.{ts,json,vue,css}\"",
     "upgrade-all": "ncu --upgrade",
     "check-upgrade-all": "clear && ncu",
@@ -84,35 +87,44 @@
     "@types/adm-zip": "^0.5.5",
     "@types/debounce": "^1.2.4",
     "@types/node": "^18.11.9",
-    "@vitejs/plugin-vue": "^4.5.2",
+    "@vitejs/plugin-vue": "^5.0.3",
+    "@vitest/browser": "^1.2.0",
     "@vue/tsconfig": "^0.5.1",
     "@vuepress/utils": "2.0.0-rc.0",
     "adm-zip": "^0.5.10",
-    "cspell": "^8.1.3",
+    "cspell": "^8.3.2",
     "dotenv": "^16.3.1",
-    "googleapis": "^129.0.0",
+    "googleapis": "^130.0.0",
     "husky": "^8.0.3",
     "lint-staged": "^15.2.0",
     "markdown-include": "^0.4.3",
     "npm-check-updates": "^16.14.12",
-    "prettier": "^3.1.1",
+    "prettier": "^3.2.1",
     "rollup-plugin-delete": "^2.0.0",
     "tslib": "^2.6.2",
-    "typedoc": "^0.25.4",
-    "typedoc-plugin-markdown": "4.0.0-next.38",
-    "typedoc-plugin-mdn-links": "^3.1.8",
+    "typedoc": "^0.25.7",
+    "typedoc-plugin-markdown": "4.0.0-next.40",
+    "typedoc-plugin-mdn-links": "^3.1.11",
     "typedoc-plugin-vue": "^1.1.0",
     "typescript": "~5.3.3",
-    "vite": "^5.0.10",
-    "vue": "^3.3.13",
+    "vite": "^5.0.11",
+    "vitest": "^1.2.0",
+    "vue": "^3.4.12",
     "vue-router": "^4.2.5",
-    "vue-tsc": "^1.8.25"
+    "vue-tsc": "^1.8.27",
+    "webdriverio": "^8.27.2"
   },
   "dependencies": {
-    "debounce": "^2.0.0",
-    "dragon-drop-vue": "^1.1.0"
+    "dragon-drop-vue": "^2.1.0",
+    "native-event-vue": "^1.4.0"
   },
   "lint-staged": {
     "*.{ts,json,vue,css}": "prettier --write"
+  },
+  "pnpm": {
+    "overrides": {
+      "glob-parent@<5.1.2": ">=5.1.2",
+      "follow-redirects@<1.15.4": ">=1.15.4"
+    }
   }
 }