Thanks to visit codestin.com
Credit goes to github.com

Skip to content

[stable8] feat(NcSelectUsers): export NcSelectUsersModel type #8159

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

Merged
susnux merged 1 commit into from
Feb 4, 2026
Merged

[stable8] feat(NcSelectUsers): export NcSelectUsersModel type #8159

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
69 changes: 55 additions & 14 deletions src/components/NcSelectUsers/NcSelectUsers.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -164,13 +164,58 @@ export default {
```
</docs>

<script setup>
<script setup lang="ts">
import type { PropType } from 'vue'

import { ref, watch } from 'vue'
import NcListItemIcon from '../NcListItemIcon/NcListItemIcon.vue'
import NcSelect from '../NcSelect/NcSelect.vue'
import { t } from '../../l10n.js'
import createElementId from '../../utils/GenRandomId.js'

export interface NcSelectUsersModel {
id: string

/**
* Main display name
*/
displayName: string

/**
* The user id.
* Will be used to fetch the user status if not disabled.
*/
user?: string

/**
* The secondary displayname (e.g. the email address).
*/
subname?: string

/**
* Optional icon to use as the avatar.
* Setting this will disable the automatic avatar loading.
*/
iconSvg?: string

/**
* Accessible name for the icon.
*/
iconName?: string

/**
* If this is a guest user.
* Needed as guest users have a different API endpoint for avatar loading.
*/
isGuest?: boolean

/**
* Set if this is not a regular user.
* This will disable user status and avatar loading.
*/
isNoUser?: boolean
}

const props = defineProps({
/**
* `aria-label` for the clear input button
Expand All @@ -191,12 +236,10 @@ const props = defineProps({
/**
* Allows to customize the `aria-label` for the deselect-option button
* The default is "Deselect " + optionLabel
*
* @type {(optionLabel: string) => string}
*/
ariaLabelDeselectOption: {
type: Function,
default: (optionLabel) => t('Deselect {option}', { option: optionLabel }),
type: Function as PropType<(optionLabel: string) => string>,
default: (optionLabel: string) => t('Deselect {option}', { option: optionLabel }),
},

/**
Expand All @@ -223,7 +266,7 @@ const props = defineProps({
* option object unless this prop is set explicitly
*/
filterBy: {
type: Function,
type: Function as PropType<(option: NcSelectUsersModel, label: string, search: string) => boolean>,
default: null,
},

Expand Down Expand Up @@ -286,11 +329,9 @@ const props = defineProps({

/**
* Array of users.
*
* @type {{displayName: string, user: string, subname?: string, iconSvg?: string, iconName?: string, isGuest?: boolean, isNoUser?: boolean}[]}
*/
options: {
type: Array,
type: Array as PropType<NcSelectUsersModel[]>,
default: () => [],
},

Expand Down Expand Up @@ -340,11 +381,11 @@ const avatarSize = clickableArea - 2 * gridBaseLine
/**
* Filter function to search users.
*
* @param {{subname: string}} option - The option to check
* @param {string} label - The label of the option
* @param {string} search - The current search string
* @param option - The option to check
* @param label - The label of the option
* @param search - The current search string
*/
function localFilterBy(option, label, search) {
function localFilterBy(option: NcSelectUsersModel, label: string, search: string) {
if (props.filterBy) {
return props.filterBy
}
Expand All @@ -361,7 +402,7 @@ function localFilterBy(option, label, search) {
}
</script>

<script>
<script lang="ts">
/** For backward compatibility with Vue 2 */
export default {
model: {
Expand Down
2 changes: 2 additions & 0 deletions src/components/NcSelectUsers/index.js → src/components/NcSelectUsers/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,6 @@
* SPDX-License-Identifier: AGPL-3.0-or-later
*/

export type { NcSelectUsersModel } from './NcSelectUsers.vue'

export { default } from './NcSelectUsers.vue'
2 changes: 1 addition & 1 deletion src/components/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,7 +87,7 @@ 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 NcSelectUsers } from './NcSelectUsers/index.js'
export { default as NcSelectUsers } from './NcSelectUsers/index.ts'
export { default as NcSettingsInputText } from './NcSettingsInputText/index.js'
export { default as NcSettingsSection } from './NcSettingsSection/index.js'
export { default as NcSettingsSelectGroup } from './NcSettingsSelectGroup/index.js'
Expand Down
Loading