feat: create new Slickgrid-Vue package to support VueJS framework (#1753

)

* feat: add new Slickgrid-Vue to add VueJS support

.github/renovate.json5

@@ -10,6 +10,11 @@
       depTypeList: ['peerDependencies'],
       enabled: false,
     },
+    {
+      description: 'Group all Vue framework/demo dependencies',
+      matchFileNames: ['frameworks/slickgrid-vue/**', 'demos/vue/**'],
+      groupName: 'Vue package'
+    },
     // rimraf new major releases dropped support for Node 18, we'll have to wait our next major to upgrade them
     {
       packageNames: ['rimraf'],

.github/workflows/cypress.yml

@@ -1,4 +1,4 @@
-name: E2E Tests (Cypress)
+name: Vanilla E2E Tests (Cypress)
 
 on:
   push:

.github/workflows/main.yml

@@ -1,5 +1,5 @@
 # CI Build & Vitest Unit Tests (ship smaller name for CI badge)
-name: Build & Tests
+name: Build & Unit Tests
 on:
   # Trigger the workflow on push or pull request,
   # but only for the master branch on Push and any branches on PR
@@ -63,6 +63,13 @@ jobs:
       - name: Run pnpm install dependencies
         run: pnpm install
 
+      - name: ESLint
+        run: pnpm lint
+
+      # only covering frameworks/demos folders for now
+      - name: Prettier
+        run: pnpm prettier:check
+
       - name: TSC Full Bundle (all Bundler types)
         run: pnpm bundle
 

.github/workflows/vue-cypress.yml

@@ -0,0 +1,99 @@
+name: Vue E2E Tests (Cypress)
+
+on:
+  push:
+    branches:
+      - master
+      - next
+  pull_request:
+    branches:
+      - '**'
+    paths-ignore:
+      - "**.md"
+      - "!.github/workflows/ci.yml"
+concurrency:
+  group: ${{ github.workflow }}-${{ github.ref }}
+  cancel-in-progress: true
+
+jobs:
+  run:
+    strategy:
+      fail-fast: false
+      matrix:
+        node: [20]
+        platform:
+          - ubuntu-latest
+
+    name: '${{matrix.platform}} / Node ${{ matrix.node }}'
+    runs-on: ${{matrix.platform}}
+    if: ${{ !startsWith(github.event.head_commit.message, 'docs:') }}
+
+    steps:
+      - name: Check out repository
+        uses: actions/checkout@v4
+
+      - name: Set NodeJS
+        uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node }}
+
+      - name: Install pnpm
+        uses: pnpm/action-setup@v3
+        with:
+          version: 9
+          run_install: false
+
+      - name: Get pnpm store directory
+        shell: bash
+        run: |
+          echo "STORE_PATH=$(pnpm store path --silent)" >> $GITHUB_ENV
+
+      - name: Setup pnpm cache
+        uses: actions/cache@v4
+        with:
+          path: ${{ env.STORE_PATH }}
+          key: ${{ runner.os }}-pnpm-store-${{ hashFiles('**/pnpm-lock.yaml') }}
+          restore-keys: |
+            ${{ runner.os }}-pnpm-store-
+
+      - uses: pnpm/action-setup@v3
+        with:
+          version: 9
+          run_install: true
+
+      - run: pnpm --version
+
+      - name: TSC Build (esm)
+        run: pnpm predev
+
+      - name: Slickgrid-Vue Framework Build
+        run: pnpm vue:build:framework
+
+      - name: Website Dev Build (served for Cypress)
+        run: pnpm vue:build:demo
+
+      - name: Start HTTP Server
+        run: pnpm vue:serve &
+
+      - name: Run Cypress E2E tests
+        uses: cypress-io/github-action@v6
+        with:
+          install: false
+          working-directory: demos/vue
+          # start: pnpm vue:serve
+          wait-on: 'http://localhost:7000'
+          config-file: test/cypress.config.mjs
+          browser: chrome
+          record: false
+        env:
+          # pass the Dashboard record key as an environment variable
+          CYPRESS_RECORD_KEY: ${{ secrets.CYPRESS_RECORD_KEY }}
+          # pass GitHub token to allow accurately detecting a build vs a re-run build
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          Cypress_extended: true
+
+      - uses: actions/upload-artifact@v4
+        if: failure()
+        with:
+          name: cypress-screenshots
+          path: test/cypress/screenshots

.prettierrc

@@ -0,0 +1,15 @@
+{
+  "useTabs": false,
+  "tabWidth": 2,
+  "printWidth": 130,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "overrides": [
+    {
+      "files": ["**/*.spec.ts"],
+      "options": {
+        "printWidth": 160
+      }
+    }
+  ]
+}

README.md

@@ -52,6 +52,7 @@ The GitHub [live demo](https://ghiscoding.github.io/slickgrid-universal) above s
 | [Angular-Slickgrid](https://github.com/ghiscoding/Angular-Slickgrid)  | [demo](https://ghiscoding.github.io/Angular-Slickgrid/) | Bootstrap | for [Angular](https://angular.io/) framework | [![NPM downloads](https://img.shields.io/npm/dy/angular-slickgrid)](https://npmjs.org/package/angular-slickgrid) |
 | [Aurelia-Slickgrid](https://github.com/ghiscoding/aurelia-slickgrid) | [demo](https://ghiscoding.github.io/aurelia-slickgrid/) | Bootstrap | for [Aurelia](https://aurelia.io/) framework | [![NPM downloads](https://img.shields.io/npm/dy/aurelia-slickgrid)](https://npmjs.org/package/aurelia-slickgrid)|
 | [Slickgrid-React](https://github.com/ghiscoding/slickgrid-react/) | [demo](https://ghiscoding.github.io/slickgrid-react/) | Bootstrap | for [React](https://react.dev/) framework | [![NPM downloads](https://img.shields.io/npm/dy/slickgrid-react)](https://npmjs.org/package/slickgrid-react)
+| [Slickgrid-Vue](https://github.com/ghiscoding/slickgrid-vue/) | [demo](https://ghiscoding.github.io/slickgrid-vue/) | Bootstrap | for [Vue](https://vuejs.org/) framework | [![NPM downloads](https://img.shields.io/npm/dy/slickgrid-vue)](https://npmjs.org/package/slickgrid-vue)
 | [Slickgrid-Universal-WebPack-Demo](https://github.com/ghiscoding/slickgrid-universal-webpack-demo) | [demo](https://ghiscoding.github.io/slickgrid-universal-webpack-demo) | Bulma | Vanilla demo with WebPack & TypeScript |
 | [Slickgrid-Universal-Vite-Demo](https://github.com/ghiscoding/slickgrid-universal-vite-demo) | [demo](https://ghiscoding.github.io/slickgrid-universal-vite-demo) | Bulma | Vanilla demo with Vite & TypeScript |
 

demos/vue/README.md

@@ -0,0 +1,36 @@
+# Slickgrid-Vue - Bootstrap 5 Demo with i18n
+
+## Important Note
+Please note that some of the npm packages installed in these demos are **optional** and are installed **only** for demo purposes. If you don't need the feature then don't install it (remove it from your `package.json`) and you'll end up with a smaller production build.
+
+Again the following dependencies are totally **optional**
+
+| Package Name | Description |
+| ------------ | ----------- |
+| [@slickgrid-universal/composite-editor-component](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/composite-editor-component) | Composite Editor Modal Component |
+| [@slickgrid-universal/custom-tooltip-plugin](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/custom-tooltip-plugin) | Custom Tooltip Plugin |
+| [@slickgrid-universal/excel-export](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/excel-export) | Excel Export Service (xls/xlsx) |
+| [@slickgrid-universal/text-export](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/text-export) | Text File Export Service (csv/txt) |
+| [@slickgrid-universal/graphql](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/graphql) | GraphQL Backend Service |
+| [@slickgrid-universal/odata](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/odata) | OData Backend Service |
+| [@slickgrid-universal/rxjs-observable](https://github.com/ghiscoding/slickgrid-universal/tree/master/packages/rxjs-observable) | RxJS Observable Service Wrapper |
+
+---
+
+### Install and Start Demo
+```bash
+git clone https://github.com/ghiscoding/slickgrid-vue-demos
+cd bootstrap5-i18n-demo
+npm install # OR yarn install
+npm dev     # OR yarn start
+```
+
+Then open your browser to
+```html
+http://localhost:7070
+```
+
+### Build Demo
+```bash
+run build # OR yarn run build
+```

demos/vue/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vue.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Slickgrid-Vue</title>
+  </head>
+  <body>
+    <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
+  </body>
+</html>

demos/vue/package.json

@@ -0,0 +1,51 @@
+{
+  "name": "slickgrid-vue-demo",
+  "private": true,
+  "version": "0.1.0",
+  "type": "module",
+  "author": {
+    "name": "Ghislain B."
+  },
+  "scripts": {
+    "vue:dev": "vite",
+    "vue:build": "tsc && vite build",
+    "vue:preview": "vite preview",
+    "vue:cypress": "cypress open --config-file test/cypress.config.mjs"
+  },
+  "dependencies": {
+    "@faker-js/faker": "^9.2.0",
+    "@fnando/sparkline": "^0.3.10",
+    "@formkit/tempo": "^0.1.2",
+    "@popperjs/core": "^2.11.8",
+    "@slickgrid-universal/common": "workspace:*",
+    "@slickgrid-universal/composite-editor-component": "workspace:*",
+    "@slickgrid-universal/custom-tooltip-plugin": "workspace:*",
+    "@slickgrid-universal/event-pub-sub": "workspace:*",
+    "@slickgrid-universal/excel-export": "workspace:*",
+    "@slickgrid-universal/graphql": "workspace:*",
+    "@slickgrid-universal/odata": "workspace:*",
+    "@slickgrid-universal/row-detail-view-plugin": "workspace:*",
+    "@slickgrid-universal/rxjs-observable": "workspace:*",
+    "@slickgrid-universal/text-export": "workspace:*",
+    "bootstrap": "^5.3.3",
+    "dompurify": "^3.2.2",
+    "i18next": "^24.0.2",
+    "i18next-http-backend": "^3.0.1",
+    "i18next-vue": "^5.0.0",
+    "rxjs": "^7.8.1",
+    "slickgrid-vue": "workspace:*",
+    "vue": "^3.5.13",
+    "vue-router": "^4.5.0"
+  },
+  "devDependencies": {
+    "@4tw/cypress-drag-drop": "^2.2.5",
+    "@types/fnando__sparkline": "^0.3.7",
+    "@vitejs/plugin-vue": "^5.2.1",
+    "cypress": "^13.16.0",
+    "cypress-real-events": "^1.13.0",
+    "fetch-jsonp": "^1.3.0",
+    "sass": "^1.81.0",
+    "typescript": "~5.6.2",
+    "vite": "^6.0.1"
+  }
+}

demos/vue/src/App.vue

@@ -0,0 +1,61 @@
+<script setup lang="ts">
+import VueLogo from './assets/vue.svg?url';
+import { routes } from './router';
+</script>
+
+<template>
+  <nav class="navbar navbar-expand-md navbar-dark bg-dark fixed-top">
+    <a class="navbar-brand ms-2" href="https://github.com/ghiscoding/slickgrid-vue">
+      <i class="mdi mdi-github"></i>
+      <span class="ms-2">Slickgrid-Vue</span>
+    </a>
+    <img :src="VueLogo" height="28" />
+    <button
+      class="navbar-toggler"
+      type="button"
+      data-bs-toggle="collapse"
+      data-target="#navbarContent"
+      aria-controls="navbarContent"
+      aria-expanded="false"
+      aria-label="Toggle navigation"
+    >
+      <span class="navbar-toggler-icon"></span>
+    </button>
+    <div class="github-button-container">
+      <a href="https://github.com/ghiscoding/slickgrid-vue">
+        <img src="https://img.shields.io/github/stars/ghiscoding/slickgrid-vue?style=social" />
+      </a>
+    </div>
+
+    <div id="navbarContent" class="navbar-collapse collapse justify-content-end me-2">
+      <ul class="navbar-nav mr-auto">
+        <li class="nav-item">
+          <a class="nav-link" href="/#/home">Home</a>
+        </li>
+        <li class="nav-item">
+          <a class="nav-link" href="https://ghiscoding.gitbook.io/slickgrid-vue/" target="_blank"> Documentation </a>
+        </li>
+      </ul>
+    </div>
+  </nav>
+
+  <div class="panel-wm">
+    <section id="panel-left" class="panel-wm-left">
+      <ul class="well nav nav-pills nav-stacked">
+        <li class="nav-item fw-bold nav-docs">
+          <a class="nav-link" href="https://ghiscoding.gitbook.io/slickgrid-vue/" target="_blank"> 📘 Documentation </a>
+        </li>
+        <li v-for="(route, index) in routes" :key="index" class="nav-item">
+          <RouterLink v-if="route.name !== 'root' && route.name !== 'home'" class="nav-link" active-class="active" :to="route.path">{{
+            route.name
+          }}</RouterLink>
+        </li>
+      </ul>
+    </section>
+    <section class="panel-wm-content">
+      <div id="demo-container">
+        <RouterView />
+      </div>
+    </section>
+  </div>
+</template>

demos/vue/src/Home.vue

@@ -0,0 +1,40 @@
+<script setup lang="ts"></script>
+<template>
+  <h2>Slickgrid-Vue - Demo Site</h2>
+  <div class="subtitle">This site is to demo multiple usage of Slickgrid-Vue, choose an example from the left side menu</div>
+
+  <hr />
+
+  <h4>Quick intro</h4>
+  <p>
+    One of the best javascript datagrid
+    <a href="https://github.com/mleibman/SlickGrid" target="_blank">SlickGrid</a> which was originally developed by &#64;mleibman is now
+    available to Angular. I have tried, and used, a few datagrids and SlickGrid beats most of them in terms of functionalities and
+    performance (it can easily even handle a million row).
+  </p>
+  <h4>Documentation</h4>
+  <p>
+    The documentation is powered by GitBook and can be found at this link
+    <a href="https://ghiscoding.gitbook.io/slickgrid-vue" target="_blank">Slickgrid-Vue - Documentation</a>, so be sure to consult it before
+    opening any new issue.
+    <br />
+    The
+    <a href="https://ghiscoding.gitbook.io/slickgrid-vue/getting-started/quick-start" target="_blank">HOWTO - Quick Start</a>
+    is the best starting point to get going with this library.
+  </p>
+
+  <hr />
+  Like my work? You can support me with caffeine :)
+
+  <br /><br />
+
+  <a href="https://ko-fi.com/ghiscoding" target="_blank">
+    <img
+      height="36"
+      style="border: 0px; height: 36px"
+      src="https://az743702.vo.msecnd.net/cdn/kofi2.png?v=0"
+      border="0"
+      alt="Buy Me a Coffee at ko-fi.com"
+    />
+  </a>
+</template>