-
Notifications
You must be signed in to change notification settings - Fork 3k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add Vue 3 demo to examples #10245
Closed
Closed
Add Vue 3 demo to examples #10245
Changes from 4 commits
Commits
Show all changes
31 commits
Select commit
Hold shift + click to select a range
1c8e86f
HoT Vue3 demo
maciejbo-handsontable 899fbeb
HoT Vue3 demo
maciejbo-handsontable 8ce800a
Vue 3 demo improvements
maciejbo-handsontable a180ab0
use vue 3 app builder in vue 3 demo
maciejbo-handsontable 253d107
improvements after CR
maciejbo-handsontable 6bbaaca
improvements after CR
maciejbo-handsontable c143ccf
change single quote to double quote
maciejbo-handsontable 676b205
unify Vue 3 demo progress bar with Vue 2
maciejbo-handsontable 4ded335
Merge branch 'develop' into feature/issue-dev-1072
jansiegel ea450e5
- Correct the examples' install and build scripts to acknowledge the …
jansiegel 98ea9bc
Correct the types import
jansiegel 30f4d36
Bump the vue-tsc package.
jansiegel 28603da
Bump the vue and vite dependencies.
jansiegel 8d8cfef
Added missing subpackage
wszymanski 4617d31
Minor change for purpose of running CI
wszymanski 071d2fe
Change in GitHub workflow
wszymanski 42f2045
Next changes related to distinguishing Vue3 from <Vue2
wszymanski edbae9a
Trying to add debugger
wszymanski a033161
Removed debugging entry for tmate within GitHub action and removed pa…
wszymanski 47fd90d
Mocked npm script for a while
wszymanski 6b27a65
Merge branch 'develop' into feature/issue-dev-1072
wszymanski cb7a29a
Copied smoke tests from Vue repo
wszymanski 2227683
Merge branch 'feature/issue-dev-1072' of github.com:handsontable/hand…
wszymanski a9d9e2e
Minor change in test for purpose of preparing it for implementation i…
wszymanski afa320d
Added missing dependencies for testing
wszymanski f4bbebe
Reverted some unnecessary changes
wszymanski ee04e07
Change: Expose Vite to 8080 port for default WSL compatibility
15eda86
Merge branch 'develop' of github.com:handsontable/handsontable into f…
7c1d43c
Use CSS instead of SASS in DataGrid component
01a8f1b
Merge branch 'develop' into feature/issue-dev-1072
wszymanski c2deac9
Merge branch 'develop' into feature/issue-dev-1072
wszymanski File filter
Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
# Logs | ||
logs | ||
*.log | ||
npm-debug.log* | ||
yarn-debug.log* | ||
yarn-error.log* | ||
pnpm-debug.log* | ||
lerna-debug.log* | ||
|
||
node_modules | ||
.DS_Store | ||
dist | ||
dist-ssr | ||
coverage | ||
*.local | ||
|
||
/cypress/videos/ | ||
/cypress/screenshots/ | ||
|
||
# Editor directories and files | ||
.vscode/* | ||
!.vscode/extensions.json | ||
.idea | ||
*.suo | ||
*.ntvs* | ||
*.njsproj | ||
*.sln | ||
*.sw? |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,40 @@ | ||
# HoT Vue3 demo | ||
|
||
This template should help get you started developing with Vue 3 in Vite. | ||
|
||
## Recommended IDE Setup | ||
|
||
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin). | ||
|
||
## Type Support for `.vue` Imports in TS | ||
|
||
TypeScript cannot handle type information for `.vue` imports by default, so we replace the `tsc` CLI with `vue-tsc` for type checking. In editors, we need [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin) to make the TypeScript language service aware of `.vue` types. | ||
|
||
If the standalone TypeScript plugin doesn't feel fast enough to you, Volar has also implemented a [Take Over Mode](https://github.com/johnsoncodehk/volar/discussions/471#discussioncomment-1361669) that is more performant. You can enable it by the following steps: | ||
|
||
1. Disable the built-in TypeScript Extension | ||
1) Run `Extensions: Show Built-in Extensions` from VSCode's command palette | ||
2) Find `TypeScript and JavaScript Language Features`, right click and select `Disable (Workspace)` | ||
2. Reload the VSCode window by running `Developer: Reload Window` from the command palette. | ||
|
||
## Customize configuration | ||
|
||
See [Vite Configuration Reference](https://vitejs.dev/config/). | ||
|
||
## Project Setup | ||
|
||
```sh | ||
npm install | ||
``` | ||
|
||
### Compile and Hot-Reload for Development | ||
|
||
```sh | ||
npm run dev | ||
``` | ||
|
||
### Type-Check, Compile and Minify for Production | ||
|
||
```sh | ||
npm run build | ||
``` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
/// <reference types="vite/client" /> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
<!DOCTYPE html> | ||
<html lang="en"> | ||
<head> | ||
<meta charset="UTF-8"> | ||
<link rel="icon" href="/favicon.ico"> | ||
<meta name="viewport" content="width=device-width, initial-scale=1.0"> | ||
<title>Vite App</title> | ||
</head> | ||
<body> | ||
<div id="app"></div> | ||
<script type="module" src="/src/main.ts"></script> | ||
</body> | ||
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,60 @@ | ||
{ | ||
"name": "hot-vue3-demo", | ||
"version": "0.0.0", | ||
"private": true, | ||
"homepage": "https://handsontable.com/.", | ||
"repository": { | ||
"type": "git", | ||
"url": "https://github.com/handsontable/handsontable.git" | ||
}, | ||
"bugs": { | ||
"url": "https://github.com/handsontable/handsontable/issues" | ||
}, | ||
"author": "Handsoncode <[email protected]>", | ||
"scripts": { | ||
"dev": "vite", | ||
"build": "run-p type-check build-only", | ||
"preview": "vite preview", | ||
"build-only": "vite build", | ||
"type-check": "vue-tsc --noEmit" | ||
}, | ||
"dependencies": { | ||
"handsontable": "latest", | ||
"@handsontable/vue3": "latest", | ||
"vue": "^3.2.45", | ||
"vue-router": "^4.1.6" | ||
}, | ||
"devDependencies": { | ||
"@typescript-eslint/eslint-plugin": "^4.18.0", | ||
"@typescript-eslint/parser": "^4.18.0", | ||
"@types/node": "^18.11.12", | ||
"@vitejs/plugin-vue": "^4.0.0", | ||
"@vitejs/plugin-vue-jsx": "^3.0.0", | ||
"@vue/tsconfig": "^0.1.3", | ||
"npm-run-all": "^4.1.5", | ||
"typescript": "~4.7.4", | ||
"vite": "^4.0.0", | ||
"vue-tsc": "^1.0.12" | ||
}, | ||
"license": "SEE LICENSE IN LICENSE.txt", | ||
"eslintConfig": { | ||
"root": true, | ||
"env": { | ||
"node": true | ||
}, | ||
"extends": [ | ||
"plugin:vue/essential", | ||
"eslint:recommended", | ||
"@vue/typescript" | ||
], | ||
"rules": {}, | ||
"parserOptions": { | ||
"parser": "@typescript-eslint/parser" | ||
} | ||
}, | ||
"browserslist": [ | ||
"> 1%", | ||
"last 2 versions", | ||
"not dead" | ||
] | ||
} |
Binary file not shown.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,17 @@ | ||
<template> | ||
<div> | ||
<DataGrid /> | ||
</div> | ||
</template> | ||
|
||
<script lang="ts"> | ||
import { defineComponent } from 'vue'; | ||
import DataGrid from "./components/DataGrid.vue"; | ||
|
||
export default defineComponent({ | ||
name: "HoT vue 3 demo", | ||
components: { | ||
DataGrid | ||
} | ||
}); | ||
</script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,55 @@ | ||
import { defineComponent } from 'vue'; | ||
import { HotTable, HotColumn } from '@handsontable/vue3'; | ||
import { registerAllModules } from 'handsontable/registry'; | ||
import 'handsontable/dist/handsontable.full.css' | ||
|
||
import { data } from '../constants'; | ||
import { progressBarRenderer } from '../renderers/progressBar'; | ||
import { starsRenderer } from '../renderers/stars'; | ||
|
||
import { | ||
alignHeaders, | ||
drawCheckboxInRowHeaders, | ||
addClassesToRows, | ||
changeCheckboxCell | ||
} from '../hooks-callbacks'; | ||
|
||
// register Handsontable's modules | ||
registerAllModules(); | ||
|
||
export default defineComponent({ | ||
name: 'DataGrid', | ||
components: { | ||
HotTable, | ||
HotColumn | ||
}, | ||
computed: { | ||
alignHeadersProp () { | ||
return alignHeaders; | ||
}, | ||
|
||
addClassesToRowsProp() { | ||
return addClassesToRows; | ||
}, | ||
|
||
drawCheckboxInRowHeadersProp() { | ||
return drawCheckboxInRowHeaders; | ||
}, | ||
|
||
changeCheckboxCellProp() { | ||
return changeCheckboxCell; | ||
}, | ||
|
||
dataProp() { | ||
return data; | ||
}, | ||
|
||
starsRendererProp() { | ||
return starsRenderer; | ||
}, | ||
|
||
progressBarRendererProp() { | ||
return progressBarRenderer; | ||
} | ||
} | ||
}); |
101 changes: 101 additions & 0 deletions
101
examples/next/docs/vue3/demo/src/components/DataGrid.vue
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,101 @@ | ||
<script src="./DataGrid.js"></script> | ||
|
||
<template> | ||
<div id="example"> | ||
<HotTable | ||
:data=dataProp | ||
:height=450 | ||
:colWidths="[140, 192, 100, 90, 90, 110, 97, 100, 126]" | ||
:colHeaders="[ | ||
'Company name', | ||
'Name', | ||
'Sell date', | ||
'In stock', | ||
'Qty', | ||
'Progress', | ||
'Rating', | ||
'Order ID', | ||
'Country' | ||
]" | ||
:dropdownMenu=true | ||
:hiddenColumns='{ | ||
indicators: true | ||
}' | ||
:contextMenu=true | ||
:multiColumnSorting=true | ||
:filters=true | ||
:rowHeaders=true | ||
:afterGetColHeader=alignHeadersProp | ||
:beforeRenderer=addClassesToRowsProp | ||
:afterGetRowHeader=drawCheckboxInRowHeadersProp | ||
:afterOnCellMouseDown=changeCheckboxCellProp | ||
:manualRowMove=true | ||
licenseKey="non-commercial-and-evaluation" | ||
> | ||
<HotColumn data="companyName" /> | ||
<HotColumn data="name" /> | ||
<HotColumn data="sellDate" type="date" :allowInvalid=false /> | ||
<HotColumn data="inStock" type="checkbox" className="htCenter" /> | ||
<HotColumn data="quantity" type="numeric" /> | ||
<HotColumn | ||
data="progress" | ||
className="htMiddle" | ||
:renderer=progressBarRendererProp | ||
/> | ||
<HotColumn | ||
data="rating" | ||
className="star htCenter" | ||
:renderer=starsRendererProp | ||
> | ||
</HotColumn> | ||
<HotColumn data="orderId" /> | ||
<HotColumn data="country" /> | ||
</HotTable> | ||
</div> | ||
</template> | ||
|
||
<style lang="scss"> | ||
/* | ||
A stylesheet customizing app (custom renderers) | ||
*/ | ||
|
||
|
||
table.htCore { | ||
tr.odd td { | ||
background: #fafbff; | ||
} | ||
|
||
tr.selected td { | ||
background: #edf3fd; | ||
} | ||
|
||
td .progressBar { | ||
background: #37bc6c; | ||
height: 10px; | ||
transform: translate(0, 50%); | ||
} | ||
|
||
td .star { | ||
color: #fcb515; | ||
} | ||
} | ||
|
||
/* | ||
A stylesheet customizing Handsontable style | ||
*/ | ||
|
||
.handsontable { | ||
font-size: 13px; | ||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', | ||
'Ubuntu', 'Helvetica Neue', Arial, sans-serif; | ||
font-weight: 400; | ||
|
||
.collapsibleIndicator { | ||
text-align: center; | ||
} | ||
} | ||
|
||
td .error { | ||
background: #ff4c42; | ||
} | ||
</style> |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I think we could move the entire logic into this (
DataGrid.vue
) file to keep it consistent with the vue2 demo.