Skip to content
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.

Sign up for GitHub

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

Jump to bottom

chore(vue3): Migrate NcSelect* and related components #4587

Merged
merged 1 commit into from
Oct 8, 2023
Merged

chore(vue3): Migrate NcSelect* and related components #4587

merged 1 commit into from
Oct 8, 2023

Conversation

raimund-schluessler
Copy link
Contributor

@raimund-schluessler raimund-schluessler commented Sep 28, 2023 •
edited
Loading

This migrates NcSelect and related components.

The components behave slightly different to the version in master currently, because I had to fall back to vue-select as our forked nextcloud/vue-select version lacks vue 3 support. Once this is done, we have to adjust the dependency. However, I would like to ignore this for now, as I need NcSelect to migrate the other components of nextcloud/vue.

@raimund-schluessler raimund-schluessler added 2. developing Work in progress feature: select Related to the NcSelect* components feature: list-item-icon Related to the list-item-icon component feature: settings Related to the settings component labels Sep 28, 2023
@raimund-schluessler raimund-schluessler added this to the 9.0.0 next Vue 3 milestone Sep 28, 2023
@raimund-schluessler raimund-schluessler changed the base branch from master to next September 28, 2023 08:08
@raimund-schluessler raimund-schluessler changed the title Chore/2154/select chore(vue3): Migrate NcSelect* and related components Sep 28, 2023
raimund-schluessler
raimund-schluessler commented Sep 28, 2023
View reviewed changes
src/mixins/index.js
export { default as isMobile } from './isMobile/index.js'
export { default as richEditor } from './richEditor/index.js'
// export { default as isMobile } from './isMobile/index.js'
// export { default as richEditor } from './richEditor/index.js'
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

These mixins are not yet migrated, and would break the build.

raimund-schluessler
raimund-schluessler commented Sep 28, 2023
View reviewed changes
package.json
@@ -96,7 +96,8 @@
"unist-builder": "^4.0.0",
"unist-util-visit": "^5.0.0",
"vue": "^3.3.4",
"vue-material-design-icons": "^5.1.2"
"vue-material-design-icons": "^5.1.2",
"vue-select": "^4.0.0-beta.6"
Copy link
Contributor Author

@raimund-schluessler raimund-schluessler Sep 28, 2023 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I fell back to the upstream library here, because nextcloud/vue-select does not have a vue3 version yet. Once we migrated this, we have to change the dependency here.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

See nextcloud-libraries/vue-select#23

@raimund-schluessler raimund-schluessler mentioned this pull request Sep 28, 2023
Open
raimund-schluessler
raimund-schluessler commented Sep 28, 2023
View reviewed changes
src/components/NcListItemIcon/NcListItemIcon.vue
:disable-menu="true"
:disable-tooltip="true"
:display-name="displayName || name"
:is-no-user="isNoUser"
:size="avatarSize"
class="option__avatar" />
class="option__avatar" /> -->
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

NcAvatar relies on NcActions, which relies on NcSelect. So I commented it out here, to not have a giant PR with actions, datepicker and select together. I will bring it back once NcActions are migrated.

@raimund-schluessler raimund-schluessler added 3. to review Waiting for reviews and removed 2. developing Work in progress labels Sep 28, 2023
@raimund-schluessler raimund-schluessler added the vue 3 Related to the vue 3 migration label Sep 28, 2023
@raimund-schluessler raimund-schluessler marked this pull request as ready for review September 28, 2023 08:21
ShGKme
ShGKme requested changes Sep 28, 2023
View reviewed changes
Copy link
Contributor

@ShGKme ShGKme left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

There is a problem with duplicating events (see comments above)

Pytal
Pytal reviewed Sep 28, 2023
View reviewed changes
Copy link
Contributor

@Pytal Pytal left a comment •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

👍 as an iterative migration without 100% feature+functional parity, but for reference please put a TODO in NcSelect.vue that all @nextcloud/vue-select specific improvements need to be reimplemented on top of the upstream vue-select beta branch

@raimund-schluessler
Copy link
Contributor Author

👍 as an iterative migration without 100% feature+functional parity, but for reference please put a TODO in NcSelect.vue that all @nextcloud/vue-select specific improvements need to be reimplemented on top of the upstream vue-select beta branch

I added a TODO that we have to switch to nextcloud/vue-select as soon as we migrated it to vue3. However, I wonder what's easier; use our branch, and migrate to vue 3, or use the upstream vue 3 version and implement our changes.

@raimund-schluessler
Copy link
Contributor Author

👍 as an iterative migration without 100% feature+functional parity, but for reference please put a TODO in NcSelect.vue that all @nextcloud/vue-select specific improvements need to be reimplemented on top of the upstream vue-select beta branch

@Pytal I just migrated nextcloud\vue-select to vue 3, please see nextcloud-libraries/vue-select#24. Using npm link, the nextcloud/vue styleguide works just fine with the vue 3 version.
In order to use it without npm link, we need a release to npm. Could you take care of this, and maybe release a alpha/beta version, so we can go ahead here?

ShGKme
ShGKme reviewed Oct 2, 2023
View reviewed changes
src/components/NcSelect/NcSelect.vue Outdated Show resolved Hide resolved
src/components/NcSettingsSelectGroup/NcSettingsSelectGroup.vue Outdated Show resolved Hide resolved
src/components/NcSelectTags/NcSelectTags.vue Outdated Show resolved Hide resolved
ShGKme
ShGKme approved these changes Oct 2, 2023
View reviewed changes
Copy link
Contributor

@ShGKme ShGKme left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks!

@raimund-schluessler
Copy link
Contributor Author

Anyone up for a second review so we can go ahead here? Many other migrations depend on this.

@ShGKme
Copy link
Contributor

ShGKme commented Oct 5, 2023

@susnux 👉👈

@raimund-schluessler
chore(vue3): Migrate NcSelect*
61bb1f9 
Signed-off-by: Raimund Schlüßler <raimund.schluessler@mailbox.org>
@raimund-schluessler
Copy link
Contributor Author

Rebased and squashed.

@susnux susnux merged commit f768418 into next Oct 8, 2023
14 checks passed
@susnux susnux deleted the chore/2154/select branch October 8, 2023 21:30
@susnux susnux mentioned this pull request Jan 23, 2024
Merged
1 task
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@susnux susnux susnux approved these changes

@ShGKme ShGKme ShGKme approved these changes

@skjnldsv skjnldsv Awaiting requested review from skjnldsv

@Pytal Pytal Awaiting requested review from Pytal

Assignees
No one assigned
Labels
3. to review Waiting for reviews feature: list-item-icon Related to the list-item-icon component feature: select Related to the NcSelect* components feature: settings Related to the settings component vue 3 Related to the vue 3 migration
Projects
None yet
Milestone
9.0.0
Development

Successfully merging this pull request may close these issues.
4 participants
@raimund-schluessler @ShGKme @susnux @Pytal