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
+87 −66
Merged

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

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
11 changes: 10 additions & 1 deletion package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

3 changes: 2 additions & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -97,7 +97,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

},
"peerDependencies": {
"vue": "^3.3.4"
Expand Down
12 changes: 6 additions & 6 deletions src/components/NcListItemIcon/NcListItemIcon.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -127,15 +127,14 @@ It might be used for list rendering or within the multiselect for example
<template>
<span :id="id"
class="option"
:style="cssVars"
v-on="$listeners">
<NcAvatar v-bind="$attrs"
:style="cssVars">
<!-- <NcAvatar v-bind="$attrs"
: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.

<div class="option__details">
<NcHighlight class="option__lineone"
:text="name"
Expand Down Expand Up @@ -165,7 +164,8 @@ It might be used for list rendering or within the multiselect for example
</template>

<script>
import NcAvatar from '../NcAvatar/index.js'
// TODO: bring back avatar once migrated
// import NcAvatar from '../NcAvatar/index.js'
import NcHighlight from '../NcHighlight/index.js'
import NcIconSvgWrapper from '../NcIconSvgWrapper/index.js'
Expand All @@ -179,7 +179,7 @@ export default {
name: 'NcListItemIcon',
components: {
NcAvatar,
// NcAvatar,
NcHighlight,
NcIconSvgWrapper,
},
Expand Down
32 changes: 18 additions & 14 deletions src/components/NcSelect/NcSelect.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -481,8 +481,8 @@ export default {
'select--no-wrap': noWrap,
}"
v-bind="propsToForward"
v-on="$listeners"
@search="searchString => search = searchString">
@search="search = $event"
@update:model-value="$emit('update:modelValue', $event)">
<template #search="{ attributes, events }">
<input :class="['vs__search', inputClass]"
v-bind="attributes"
Expand Down Expand Up @@ -518,16 +518,19 @@ export default {
<template #no-options>
{{ t('No results') }}
</template>
<template v-for="(_, name) in $scopedSlots" #[name]="data">
<template v-for="(_, name) in $slots" #[name]="data">
<!-- @slot Any combination of slots from https://vue-select.org/api/slots.html -->
<slot :name="name" v-bind="data" />
</template>
</VueSelect>
</template>

<script>
import { VueSelect } from '@nextcloud/vue-select'
import '@nextcloud/vue-select/dist/vue-select.css'
// TODO: Use @nextcloud/vue-select once a vue 3 version is available.
// Until then, all @nextcloud/vue-select specific improvements won't be available.
// E.g. the `limit` prop has no effect, currently.
import VueSelect from 'vue-select'
import 'vue-select/dist/vue-select.css'
import {
autoUpdate,
computePosition,
Expand All @@ -546,6 +549,8 @@ import NcLoadingIcon from '../NcLoadingIcon/index.js'
import l10n from '../../mixins/l10n.js'
import { h } from 'vue'
export default {
name: 'NcSelect',
Expand Down Expand Up @@ -610,14 +615,12 @@ export default {
type: Object,
default: () => ({
Deselect: {
render: createElement => createElement(Close, {
props: {
size: 20,
fillColor: 'var(--vs-controls-color)',
},
style: {
cursor: 'pointer',
},
render: () => h(Close, {
size: 20,
fillColor: 'var(--vs-controls-color)',
style: [
{ cursor: 'pointer' },
],
}),
},
}),
Expand Down Expand Up @@ -841,7 +844,7 @@ export default {
*
* @see https://vue-select.org/api/props.html#value
*/
value: {
modelValue: {
type: [String, Number, Object, Array],
default: null,
},
Expand All @@ -862,6 +865,7 @@ export default {
*/
// Not an actual event but needed to show in vue-styleguidist docs
' ',
'update:modelValue',
],
data() {
Expand Down
32 changes: 18 additions & 14 deletions src/components/NcSelectTags/NcSelectTags.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -134,12 +134,9 @@ export default {
<NcSelect v-bind="propsToForward"
:options="availableOptions"
:close-on-select="!multiple"
:value="passthru ? value : localValue"
@search="searchString => search = searchString"
v-on="{
...$listeners,
input: passthru ? $listeners.input : handleInput,
}">
:model-value="localValue"
@search="search = $event"
@update:model-value="handleInput">
<template #option="option">
<NcEllipsisedOption :name="getOptionLabel(option)"
:search="search" />
Expand All @@ -148,7 +145,7 @@ export default {
<NcEllipsisedOption :name="getOptionLabel(selectedOption)"
:search="search" />
</template>
<template v-for="(_, name) in $scopedSlots" #[name]="data">
<template v-for="(_, name) in $slots" #[name]="data">
<!-- @slot Any combination of slots from https://vue-select.org/api/slots.html -->
<slot :name="name" v-bind="data" />
</template>
Expand Down Expand Up @@ -259,7 +256,7 @@ export default {
/**
* Currently selected value
*/
value: {
modelValue: {
type: [Number, Array],
default: null,
},
Expand All @@ -275,7 +272,7 @@ export default {
},
emits: [
'input',
'update:modelValue',
/**
* All events from https://vue-select.org/api/events.html
*/
Expand All @@ -299,15 +296,18 @@ export default {
},
localValue() {
if (this.passthru) {
return this.modelValue
}
if (this.tags.length === 0) {
return []
}
if (this.multiple) {
return this.value
return this.modelValue
.filter(tag => tag !== '')
.map(id => this.tags.find(tag2 => tag2.id === id))
} else {
return this.tags.find(tag => tag.id === this.value)
return this.tags.find(tag => tag.id === this.modelValue)
}
},
Expand Down Expand Up @@ -346,18 +346,22 @@ export default {
methods: {
handleInput(value) {
if (this.passthru) {
this.$emit('update:modelValue', value)
return
}
if (this.multiple) {
/**
* Emitted on input events of the multiselect field
*
* @type {number|number[]}
*/
this.$emit('input', value.map(element => element.id))
this.$emit('update:modelValue', value.map(element => element.id))
} else {
if (value === null) {
this.$emit('input', null)
this.$emit('update:modelValue', null)
} else {
this.$emit('input', value.id)
this.$emit('update:modelValue', value.id)
}
}
},
Expand Down
12 changes: 6 additions & 6 deletions src/components/NcSettingsSelectGroup/NcSettingsSelectGroup.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ section * {
<template>
<div>
<label v-if="label" :for="id" class="hidden-visually">{{ label }}</label>
<NcSelect :value="inputValue"
<NcSelect :model-value="inputValue"
:options="groupsArray"
:placeholder="placeholder || label"
:filter-by="filterGroups"
Expand All @@ -62,7 +62,7 @@ section * {
:multiple="true"
:close-on-select="false"
:disabled="disabled"
@input="update"
@update:model-value="update"
@search="onSearch" />
<div v-show="hasError" class="select-group-error">
{{ errorMessage }}
Expand Down Expand Up @@ -117,7 +117,7 @@ export default {
* value of the select group input
* A list of group IDs can be provided
*/
value: {
modelValue: {
type: Array,
default: () => [],
},
Expand Down Expand Up @@ -156,7 +156,7 @@ export default {
* @return {string[]}
*/
filteredValue() {
return this.value.filter((group) => group !== '' && typeof group === 'string')
return this.modelValue.filter((group) => group !== '' && typeof group === 'string')
},

/**
Expand All @@ -183,7 +183,7 @@ export default {
* @return {object[]}
*/
groupsArray() {
return Object.values(this.groups).filter(g => !this.value.includes(g.id))
return Object.values(this.groups).filter(g => !this.modelValue.includes(g.id))
},
},
watch: {
Expand Down Expand Up @@ -227,7 +227,7 @@ export default {
update(updatedValue) {
const value = updatedValue.map((element) => element.id)
/** Emitted when the groups selection changes<br />**Payload:** `value` (`Array`) - *Ids of selected groups */
this.$emit('input', value)
this.$emit('update:modelValue', value)
},

/**
Expand Down
10 changes: 6 additions & 4 deletions src/components/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,7 @@ export { default as NcIconSvgWrapper } from './NcIconSvgWrapper/index.js'

// Not yet adjusted for vue3
// export { default as NcListItem } from './NcListItem/index.js'
// export { default as NcListItemIcon } from './NcListItemIcon/index.js'
export { default as NcListItemIcon } from './NcListItemIcon/index.js'
export { default as NcLoadingIcon } from './NcLoadingIcon/index.js'
// export { default as NcModal } from './NcModal/index.js'
export { default as NcNoteCard } from './NcNoteCard/index.js'
Expand All @@ -86,9 +86,11 @@ export { default as NcProgressBar } from './NcProgressBar/index.js'
// export { default as NcRichContenteditable, NcAutoCompleteResult, NcMentionBubble } from './NcRichContenteditable/index.js'
// export { default as NcRichText } from './NcRichText/index.js'
export { default as NcSavingIndicatorIcon } from './NcSavingIndicatorIcon/index.js'
// export { default as NcSelect } from './NcSelect/index.js'
// export { default as NcSelectTags } from './NcSelectTags/index.js'
// export { default as NcSettingsSection } from './NcSettingsSection/index.js'
export { default as NcSelect } from './NcSelect/index.js'
export { default as NcSelectTags } from './NcSelectTags/index.js'
export { default as NcSettingsInputText } from './NcSettingsInputText/index.js'
export { default as NcSettingsSection } from './NcSettingsSection/index.js'
export { default as NcSettingsSelectGroup } from './NcSettingsSelectGroup/index.js'
export { default as NcTextField } from './NcTextField/index.js'
// export { default as NcTimezonePicker } from './NcTimezonePicker/index.js'
// export { default as NcUserBubble } from './NcUserBubble/index.js'
4 changes: 2 additions & 2 deletions src/mixins/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,6 @@

export { default as clickOutsideOptions } from './clickOutsideOptions/index.js'
export { default as isFullscreen } from './isFullscreen/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.

export { default as userStatus } from './userStatus.js'
37 changes: 19 additions & 18 deletions styleguide.config.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -183,18 +183,19 @@ module.exports = async () => {
'src/components/Nc*Field/*.vue',
],
},
// {
// name: 'NcListItems',
// components: [
// 'src/components/NcListItem*/*.vue',
// ],
// },
// {
// name: 'NcSelect',
// components: [
// 'src/components/NcSelect*/*.vue',
// ],
// },
{
name: 'NcListItems',
components: [
//'src/components/NcListItem*/*.vue',
'src/components/NcListItemIcon/*.vue',
],
},
{
name: 'NcSelect',
components: [
'src/components/NcSelect*/*.vue',
],
},
{
name: 'NcPickers',
components: [
Expand All @@ -210,12 +211,12 @@ module.exports = async () => {
// 'src/components/NcRichText/NcRichText.vue',
// ],
// },
// {
// name: 'NcSettings',
// components: [
// 'src/components/NcSettings*/*.vue',
// ],
// },
{
name: 'NcSettings',
components: [
'src/components/NcSettings*/*.vue',
],
},
],
},
],
Expand Down
Loading