Add Vue 3 demo to examples #10245

maciejbo-handsontable · 2023-02-13T19:35:25Z

Context

We do not have Vue 3 demo at all, we needed to fix this lack.

How has this been tested?

Launched in browser in local environment

Types of changes

Bug fix (non-breaking change which fixes an issue)
New feature or improvement (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to not work as expected)
Additional language file or change to the existing one (translations)

Related issue(s):

Affected project(s):

Checklist:

I have reviewed the guidelines about Contributing to Handsontable and I confirm that my code follows the code style of this project.
I have signed the Contributor License Agreement
My change requires a change to the documentation.

[skip changelog]

jansiegel

@maciejbo-handsontable

Apart from my suggestions in the code, the demo needs a little correction in the styling of the progress bar.

When comparing this demo with the vue2 demo, the progress bars appear in a slightly different position, which would cause issues with the visual tests.

Take a look at this video - in here I'm switching between tabs with the vue2 and vue3 demos:

progress-bar-position.mov

jansiegel · 2023-02-16T09:34:08Z

examples/next/docs/vue3/demo/src/components/DataGrid.vue

@@ -0,0 +1,101 @@
+<script src="./DataGrid.js"></script>


I think we could move the entire logic into this (DataGrid.vue) file to keep it consistent with the vue2 demo.

jansiegel · 2023-02-16T09:36:53Z

examples/next/docs/vue3/demo/src/main.ts

@@ -0,0 +1,10 @@
+import Handsontable from 'handsontable';
+import { HotTable } from "@handsontable/vue3";


In some places, there are single quites (') being used. In others - the double quotes (").
Could you unify that? Most probably to the single quotes, as that's what we use in the Handsontable codebase. (with the exception of DOM-related stuff, like declaring props in the templates)

jansiegel · 2023-02-16T09:39:01Z

examples/next/docs/vue3/demo/src/hooks-callbacks.ts

+    return;
+  }
+
+  const rowData = cellProperties.instance.getSourceDataAtRow(row) as { checked: boolean };


You can use the RowObject type in here (and a couple of lines below).
It's available for importing from:

import type { RowObject } from 'handsontable/types/common';

Suggested change

const rowData = cellProperties.instance.getSourceDataAtRow(row) as { checked: boolean };

const rowData: RowObject = cellProperties.instance.getSourceDataAtRow(row);

jansiegel · 2023-02-16T09:41:16Z

examples/next/docs/vue3/demo/src/renderers/progressBar.ts

+    value = 0;
+  }
+
+  const isValid = /^\d+$/.test(value.toString());


Instead of creating a second-ish validator, you can use the native Handsontable validator.

To do that, you'd need to set the type of the column (in this case type="numeric") and implement logic similar to the one I suggested in your PR updating the React demo:
#9935 (comment)

jansiegel · 2023-02-16T09:41:46Z

examples/next/docs/vue3/demo/src/renderers/stars.ts

+    value = 0;
+  }
+
+  const isValid = /^\d+$/.test(value.toString());


Same comment as with the Progress Bar renderer.

github-actions · 2023-03-10T10:34:03Z

Launch the local version of documentation by running:

npm run docs:review c2deac9a4affd9d2b01ef1f508b6c84a4733be40

…existance of vue3 - Correct the component script type definition

jansiegel · 2023-03-14T10:27:59Z

@wszymanski I think the demo works correctly, and the only thing left to do is fixing the problem with the build failing on the CI.

Co-Authored-By: Jan Siegel <jansiegel@users.noreply.github.com>

…ckage-lock.json file

…sontable into feature/issue-dev-1072

…n Vue3

wszymanski · 2023-03-20T13:58:04Z

It seems that problem found by @jansiegel was caused by adding package-lock.json file. It has been fixed by a033161.

Investigation has shown that there are no significant differences in a way how scripts are run locally and by GA. However, I've seen some parts of code which may be problematic. Thus, I suggest to leave also another changes, not related to the problem:

I also added Smoke test for Vue3 wrapper, just by copying them from Vue package. Some unnecessary changes has been reverted within f4bbebe.

It seems that everything works properly, thus I'm leaving PR for review again.

…eature/issue-dev-1072 # Conflicts: # examples/package.json

wszymanski

@kWeb24 Could you check whether sass isn't needed?

wszymanski · 2023-05-26T16:16:07Z

@kWeb24 Thank you for your effort. Perhaps I wasn't precise enough. I meant adding dev dependency 🙂

kWeb24 · 2023-05-26T16:19:18Z

@wszymanski I think new dependency is not needed for just a few nested selectors. 😄

wszymanski · 2023-05-26T16:23:57Z

@wszymanski I think new dependency is not needed for just a few nested selectors. 😄

You are right! :) Good job.

maciejbo-handsontable added 3 commits February 9, 2023 15:38

HoT Vue3 demo

1c8e86f

HoT Vue3 demo

899fbeb

Vue 3 demo improvements

8ce800a

maciejbo-handsontable self-assigned this Feb 13, 2023

maciejbo-handsontable requested a review from jansiegel February 13, 2023 19:36

use vue 3 app builder in vue 3 demo

a180ab0

jansiegel requested changes Feb 16, 2023

View reviewed changes

maciejbo-handsontable added 4 commits February 16, 2023 11:14

improvements after CR

253d107

improvements after CR

6bbaaca

change single quote to double quote

c143ccf

unify Vue 3 demo progress bar with Vue 2

676b205

jansiegel previously approved these changes Feb 17, 2023

View reviewed changes

jansiegel assigned jansiegel and unassigned maciejbo-handsontable Feb 17, 2023

budnix changed the title ~~Feature/issue dev 1072~~ Add Vue 3 demo to examples Feb 21, 2023

Merge branch 'develop' into feature/issue-dev-1072

4ded335

- Correct the examples' install and build scripts to acknowledge the …

ea450e5

…existance of vue3 - Correct the component script type definition

jansiegel dismissed their stale review via ea450e5 March 10, 2023 11:30

jansiegel added 3 commits March 10, 2023 14:00

Correct the types import

98ea9bc

Bump the vue-tsc package.

30f4d36

Bump the vue and vite dependencies.

28603da

jansiegel assigned wszymanski Mar 14, 2023

wszymanski and others added 6 commits March 16, 2023 11:40

Added missing subpackage

8d8cfef

Co-Authored-By: Jan Siegel <jansiegel@users.noreply.github.com>

Minor change for purpose of running CI

4617d31

Change in GitHub workflow

071d2fe

Next changes related to distinguishing Vue3 from <Vue2

42f2045

Trying to add debugger

edbae9a

Removed debugging entry for tmate within GitHub action and removed pa…

a033161

…ckage-lock.json file

wszymanski added 7 commits March 20, 2023 12:46

Mocked npm script for a while

47fd90d

Merge branch 'develop' into feature/issue-dev-1072

6b27a65

Copied smoke tests from Vue repo

cb7a29a

Merge branch 'feature/issue-dev-1072' of github.com:handsontable/hand…

2227683

…sontable into feature/issue-dev-1072

Minor change in test for purpose of preparing it for implementation i…

a9d9e2e

…n Vue3

Added missing dependencies for testing

afa320d

Reverted some unnecessary changes

f4bbebe

wszymanski requested a review from jansiegel March 20, 2023 13:58

jansiegel previously approved these changes Mar 23, 2023

View reviewed changes

Change: Expose Vite to 8080 port for default WSL compatibility

ee04e07

kWeb24 dismissed jansiegel’s stale review via ee04e07 May 23, 2023 10:42

Merge branch 'develop' of github.com:handsontable/handsontable into f…

15eda86

…eature/issue-dev-1072 # Conflicts: # examples/package.json

krzysztofspilka assigned kWeb24 and unassigned wszymanski and jansiegel May 24, 2023

kWeb24 requested a review from wszymanski May 24, 2023 13:23

wszymanski suggested changes May 24, 2023

View reviewed changes

Use CSS instead of SASS in DataGrid component

7c1d43c

kWeb24 requested a review from wszymanski May 24, 2023 16:04

Merge branch 'develop' into feature/issue-dev-1072

01a8f1b

wszymanski previously approved these changes May 26, 2023

View reviewed changes

Merge branch 'develop' into feature/issue-dev-1072

c2deac9

wszymanski dismissed their stale review via c2deac9 August 22, 2023 13:19

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add Vue 3 demo to examples #10245

Add Vue 3 demo to examples #10245

maciejbo-handsontable commented Feb 13, 2023

jansiegel left a comment

jansiegel Feb 16, 2023

jansiegel Feb 16, 2023

jansiegel Feb 16, 2023

jansiegel Feb 16, 2023

jansiegel Feb 16, 2023

github-actions bot commented Mar 10, 2023 •

edited

jansiegel commented Mar 14, 2023

wszymanski commented Mar 20, 2023

wszymanski left a comment •

edited

wszymanski commented May 26, 2023

kWeb24 commented May 26, 2023 •

edited

wszymanski commented May 26, 2023

		@@ -0,0 +1,10 @@
		import Handsontable from 'handsontable';
		import { HotTable } from "@handsontable/vue3";

	const rowData = cellProperties.instance.getSourceDataAtRow(row) as { checked: boolean };
	const rowData: RowObject = cellProperties.instance.getSourceDataAtRow(row);

Add Vue 3 demo to examples #10245

Are you sure you want to change the base?

Add Vue 3 demo to examples #10245

Conversation

maciejbo-handsontable commented Feb 13, 2023

Context

How has this been tested?

Types of changes

Related issue(s):

Affected project(s):

Checklist:

jansiegel left a comment

Choose a reason for hiding this comment

jansiegel Feb 16, 2023

Choose a reason for hiding this comment

jansiegel Feb 16, 2023

Choose a reason for hiding this comment

jansiegel Feb 16, 2023

Choose a reason for hiding this comment

jansiegel Feb 16, 2023

Choose a reason for hiding this comment

jansiegel Feb 16, 2023

Choose a reason for hiding this comment

github-actions bot commented Mar 10, 2023 • edited

jansiegel commented Mar 14, 2023

wszymanski commented Mar 20, 2023

wszymanski left a comment • edited

Choose a reason for hiding this comment

wszymanski commented May 26, 2023

kWeb24 commented May 26, 2023 • edited

wszymanski commented May 26, 2023

github-actions bot commented Mar 10, 2023 •

edited

wszymanski left a comment •

edited

kWeb24 commented May 26, 2023 •

edited