@nextcloud/vue 9.0.0-alpha.8 → 9.0.0-rc.1

package/dist/components/NcSelect/NcSelect.vue.d.ts

@@ -0,0 +1,121 @@
+declare const _default: import('vue').DefineComponent<{}, {
+    avatarSize: number;
+}, {
+    search: string;
+}, {
+    inputRequired(): any;
+    localCalculatePosition(): any;
+    localFilterBy(): any;
+    localLabel(): any;
+    propsToForward(): any;
+}, {
+    t: (original: string, placeholders?: Record<string, string | number>) => string;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, (" " | "update:modelValue")[], " " | "update:modelValue", import('vue').PublicProps, Readonly<{}> & Readonly<{
+    "on "?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {} | {
+    [x: string]: any;
+}, {}, {
+    ChevronDown: any;
+    NcEllipsisedOption: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+        name: {
+            type: StringConstructor;
+            default: string;
+        };
+        search: {
+            type: StringConstructor;
+            default: string;
+        };
+    }>, {}, {}, {
+        needsTruncate(): boolean | "";
+        split(): number;
+        part1(): string;
+        part2(): string;
+        highlight1(): any[];
+        highlight2(): any[];
+    }, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+        name: {
+            type: StringConstructor;
+            default: string;
+        };
+        search: {
+            type: StringConstructor;
+            default: string;
+        };
+    }>> & Readonly<{}>, {
+        name: string;
+        search: string;
+    }, {}, {
+        NcHighlight: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+            text: {
+                type: StringConstructor;
+                default: string;
+            };
+            search: {
+                type: StringConstructor;
+                default: string;
+            };
+            highlight: {
+                type: ArrayConstructor;
+                default: () => never[];
+            };
+        }>, {}, {}, {
+            ranges(): any[];
+            chunks(): any[];
+        }, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+            text: {
+                type: StringConstructor;
+                default: string;
+            };
+            search: {
+                type: StringConstructor;
+                default: string;
+            };
+            highlight: {
+                type: ArrayConstructor;
+                default: () => never[];
+            };
+        }>> & Readonly<{}>, {
+            search: string;
+            text: string;
+            highlight: unknown[];
+        }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+    }, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+    NcLoadingIcon: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+        size: {
+            type: NumberConstructor;
+            default: number;
+        };
+        appearance: {
+            type: StringConstructor;
+            validator(value: unknown): boolean;
+            default: string;
+        };
+        name: {
+            type: StringConstructor;
+            default: string;
+        };
+    }>, {}, {}, {
+        colors(): string[];
+    }, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+        size: {
+            type: NumberConstructor;
+            default: number;
+        };
+        appearance: {
+            type: StringConstructor;
+            validator(value: unknown): boolean;
+            default: string;
+        };
+        name: {
+            type: StringConstructor;
+            default: string;
+        };
+    }>> & Readonly<{}>, {
+        name: string;
+        size: number;
+        appearance: string;
+    }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+    VueSelect: any;
+}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/NcSelect/index.mjs

@@ -1,4 +1,4 @@
-import { N } from "../../chunks/NcSelect-CAx_ixPU.mjs";
+import { N } from "../../chunks/NcSelect-DFMnY4fI.mjs";
 export {
   N as default
 };

package/dist/components/NcSelectTags/NcSelectTags.vue.d.ts

@@ -0,0 +1,205 @@
+declare const _default: import('vue').DefineComponent<{}, {}, {
+    search: string;
+    availableTags: never[];
+}, {
+    availableOptions(): any;
+    localValue(): any;
+    propsToForward(): {
+        "on "?: ((...args: any[]) => any) | undefined;
+        "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    };
+    tags(): any;
+}, {
+    handleInput(value: any): void;
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, (" " | "update:modelValue")[], " " | "update:modelValue", import('vue').PublicProps, Readonly<{}> & Readonly<{
+    "on "?: ((...args: any[]) => any) | undefined;
+    "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+}>, {} | {
+    [x: string]: any;
+}, {}, {
+    NcEllipsisedOption: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+        name: {
+            type: StringConstructor;
+            default: string;
+        };
+        search: {
+            type: StringConstructor;
+            default: string;
+        };
+    }>, {}, {}, {
+        needsTruncate(): boolean | "";
+        split(): number;
+        part1(): string;
+        part2(): string;
+        highlight1(): any[];
+        highlight2(): any[];
+    }, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+        name: {
+            type: StringConstructor;
+            default: string;
+        };
+        search: {
+            type: StringConstructor;
+            default: string;
+        };
+    }>> & Readonly<{}>, {
+        name: string;
+        search: string;
+    }, {}, {
+        NcHighlight: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+            text: {
+                type: StringConstructor;
+                default: string;
+            };
+            search: {
+                type: StringConstructor;
+                default: string;
+            };
+            highlight: {
+                type: ArrayConstructor;
+                default: () => never[];
+            };
+        }>, {}, {}, {
+            ranges(): any[];
+            chunks(): any[];
+        }, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+            text: {
+                type: StringConstructor;
+                default: string;
+            };
+            search: {
+                type: StringConstructor;
+                default: string;
+            };
+            highlight: {
+                type: ArrayConstructor;
+                default: () => never[];
+            };
+        }>> & Readonly<{}>, {
+            search: string;
+            text: string;
+            highlight: unknown[];
+        }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+    }, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+    NcSelect: import('vue').DefineComponent<{}, {
+        avatarSize: number;
+    }, {
+        search: string;
+    }, {
+        inputRequired(): any;
+        localCalculatePosition(): any;
+        localFilterBy(): any;
+        localLabel(): any;
+        propsToForward(): any;
+    }, {
+        t: (original: string, placeholders?: Record<string, string | number>) => string;
+    }, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, (" " | "update:modelValue")[], " " | "update:modelValue", import('vue').PublicProps, Readonly<{}> & Readonly<{
+        "on "?: ((...args: any[]) => any) | undefined;
+        "onUpdate:modelValue"?: ((...args: any[]) => any) | undefined;
+    }>, {} | {
+        [x: string]: any;
+    }, {}, {
+        ChevronDown: any;
+        NcEllipsisedOption: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+            name: {
+                type: StringConstructor;
+                default: string;
+            };
+            search: {
+                type: StringConstructor;
+                default: string;
+            };
+        }>, {}, {}, {
+            needsTruncate(): boolean | "";
+            split(): number;
+            part1(): string;
+            part2(): string;
+            highlight1(): any[];
+            highlight2(): any[];
+        }, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+            name: {
+                type: StringConstructor;
+                default: string;
+            };
+            search: {
+                type: StringConstructor;
+                default: string;
+            };
+        }>> & Readonly<{}>, {
+            name: string;
+            search: string;
+        }, {}, {
+            NcHighlight: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+                text: {
+                    type: StringConstructor;
+                    default: string;
+                };
+                search: {
+                    type: StringConstructor;
+                    default: string;
+                };
+                highlight: {
+                    type: ArrayConstructor;
+                    default: () => never[];
+                };
+            }>, {}, {}, {
+                ranges(): any[];
+                chunks(): any[];
+            }, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+                text: {
+                    type: StringConstructor;
+                    default: string;
+                };
+                search: {
+                    type: StringConstructor;
+                    default: string;
+                };
+                highlight: {
+                    type: ArrayConstructor;
+                    default: () => never[];
+                };
+            }>> & Readonly<{}>, {
+                search: string;
+                text: string;
+                highlight: unknown[];
+            }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+        }, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+        NcLoadingIcon: import('vue').DefineComponent<import('vue').ExtractPropTypes<{
+            size: {
+                type: NumberConstructor;
+                default: number;
+            };
+            appearance: {
+                type: StringConstructor;
+                validator(value: unknown): boolean;
+                default: string;
+            };
+            name: {
+                type: StringConstructor;
+                default: string;
+            };
+        }>, {}, {}, {
+            colors(): string[];
+        }, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+            size: {
+                type: NumberConstructor;
+                default: number;
+            };
+            appearance: {
+                type: StringConstructor;
+                validator(value: unknown): boolean;
+                default: string;
+            };
+            name: {
+                type: StringConstructor;
+                default: string;
+            };
+        }>> & Readonly<{}>, {
+            name: string;
+            size: number;
+            appearance: string;
+        }, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+        VueSelect: any;
+    }, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;
+export default _default;

package/dist/components/NcSelectTags/index.mjs

@@ -1,4 +1,4 @@
-import { N } from "../../chunks/NcSelectTags-UXzC7lDz.mjs";
+import { N } from "../../chunks/NcSelectTags-BpFmhbdp.mjs";
 export {
   N as default
 };

package/dist/components/NcSelectUsers/NcSelectUsers.vue.d.ts

@@ -0,0 +1,117 @@
+export interface IUserData {
+    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;
+}
+type __VLS_Props = {
+    /**
+     * `aria-label` for the clear input button.
+     *
+     * @default 'Clear selected'
+     */
+    ariaLabelClearSelected?: string;
+    /**
+     * `aria-label` for the listbox element.
+     *
+     * @default 'Options'
+     */
+    ariaLabelListbox?: string;
+    /**
+     * Allows to customize the `aria-label` for the deselect-option button.
+     *
+     * @default (label) => `Deselect ${label}`
+     */
+    ariaLabelDeselectOption?: (label: string) => string;
+    /**
+     * Disable the component.
+     */
+    disabled?: boolean;
+    /**
+     * Input element id.
+     *
+     * @default random generated id
+     */
+    inputId?: string;
+    /**
+     * Visible label for the input element
+     *
+     * @default 'Select account'
+     */
+    inputLabel?: string;
+    /**
+     * Pass true if you are using an external label.
+     * In this case make sure you set the `for` attribute of your `<label>` to the `inputId` of this component.
+     */
+    labelOutside?: boolean;
+    /**
+     * Keep the dropdown open after selecting an entry.
+     */
+    keepOpen?: boolean;
+    /**
+     * Show a loading icon.
+     */
+    loading?: boolean;
+    /**
+     * Allow selection of multiple options
+     */
+    multiple?: boolean;
+    /**
+     * Disable automatic wrapping when selected options overflow the width.
+     */
+    noWrap?: boolean;
+    /**
+     * Array of users or similar object (e.g. groups or guest users).
+     */
+    options: IUserData[];
+    /**
+     * Placeholder text.
+     *
+     * @default ''
+     */
+    placeholder?: string;
+    /**
+     * Enable if a value is required for native form validation.
+     */
+    required?: boolean;
+};
+type __VLS_PublicProps = {
+    'modelValue'?: IUserData;
+} & __VLS_Props;
+declare const _default: import('vue').DefineComponent<__VLS_PublicProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {
+    search: (args_0: string) => any;
+    "update:modelValue": (value: IUserData) => any;
+}, string, import('vue').PublicProps, Readonly<__VLS_PublicProps> & Readonly<{
+    onSearch?: ((args_0: string) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: IUserData) => any) | undefined;
+}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
+export default _default;

package/dist/components/NcSelectUsers/index.d.ts

@@ -0,0 +1,5 @@
+/**
+ * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors
+ * SPDX-License-Identifier: AGPL-3.0-or-later
+ */
+export { default } from './NcSelectUsers.vue';

package/dist/components/NcSelectUsers/index.mjs

@@ -0,0 +1,73 @@
+import '../../assets/index-D9L0rgJk.css';
+import { defineComponent, mergeModels, useModel, ref, watch, createBlock, openBlock, unref, mergeProps, withCtx, createVNode } from "vue";
+import { N as NcListItemIcon } from "../../chunks/NcListItemIcon-CytWJM69.mjs";
+import { N as NcSelect } from "../../chunks/NcSelect-DFMnY4fI.mjs";
+import { _ as _export_sfc } from "../../chunks/_plugin-vue_export-helper-1tPrXgE0.mjs";
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "NcSelectUsers",
+  props: /* @__PURE__ */ mergeModels({
+    ariaLabelClearSelected: {},
+    ariaLabelListbox: {},
+    ariaLabelDeselectOption: { type: Function },
+    disabled: { type: Boolean },
+    inputId: {},
+    inputLabel: {},
+    labelOutside: { type: Boolean },
+    keepOpen: { type: Boolean },
+    loading: { type: Boolean },
+    multiple: { type: Boolean },
+    noWrap: { type: Boolean },
+    options: {},
+    placeholder: {},
+    required: { type: Boolean }
+  }, {
+    "modelValue": {},
+    "modelModifiers": {}
+  }),
+  emits: /* @__PURE__ */ mergeModels(["search"], ["update:modelValue"]),
+  setup(__props, { emit: __emit }) {
+    useModel(__props, "modelValue");
+    const emit = __emit;
+    const search = ref("");
+    watch(search, () => emit("search", search.value));
+    const clickableArea = Number.parseInt(window.getComputedStyle(document.body).getPropertyValue("--default-clickable-area"));
+    const gridBaseLine = Number.parseInt(window.getComputedStyle(document.body).getPropertyValue("--default-grid-baseline"));
+    const avatarSize = clickableArea - 2 * gridBaseLine;
+    function filterBy(option, label, search2) {
+      const EMAIL_NOTATION = /[^<]*<([^>]+)/;
+      const match = search2.match(EMAIL_NOTATION);
+      const subname = option.subname?.toLocaleLowerCase() ?? "";
+      return match && subname.indexOf(match[1].toLocaleLowerCase()) > -1 || `${label} ${option.subname}`.toLocaleLowerCase().indexOf(search2.toLocaleLowerCase()) > -1;
+    }
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(unref(NcSelect), mergeProps({ class: "nc-select-users" }, _ctx.$props, {
+        "filter-by": filterBy,
+        label: "displayName",
+        onSearch: _cache[0] || (_cache[0] = ($event) => search.value = $event),
+        "onUpdate:modelValue": _cache[1] || (_cache[1] = ($event) => _ctx.$emit("update:modelValue", $event))
+      }), {
+        option: withCtx((option) => [
+          createVNode(unref(NcListItemIcon), mergeProps(option, {
+            "avatar-size": 32,
+            name: option.displayName,
+            search: search.value
+          }), null, 16, ["name", "search"])
+        ]),
+        "selected-option": withCtx((selectedOption) => [
+          createVNode(unref(NcListItemIcon), mergeProps(selectedOption, {
+            "avatar-size": avatarSize,
+            name: selectedOption.displayName,
+            "no-margin": "",
+            search: search.value
+          }), null, 16, ["name", "search"])
+        ]),
+        _: 1
+      }, 16);
+    };
+  }
+});
+const NcSelectUsers = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-cb274075"]]);
+export {
+  NcSelectUsers as default
+};
+//# sourceMappingURL=index.mjs.map

package/dist/components/NcSelectUsers/index.mjs.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.mjs","sources":["../../../src/components/NcSelectUsers/NcSelectUsers.vue"],"sourcesContent":["<!--\n\t- SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n\t- SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Nextcloud user picker\n\n#### Examples\n\n```vue\n<template>\n\t<div class=\"grid\">\n\t\t<div v-for=\"{ props } in selectArray\"\n\t\t\tclass=\"container\">\n\t\t\t<NcSelectUsers v-bind=\"props\"\n\t\t\t\tv-model=\"props.value\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script>\nimport svgAccountGroup from '@mdi/svg/svg/account-group.svg?raw'\nimport svgEmail from '@mdi/svg/svg/email.svg?raw'\n\nconst selectArray = [\n\t{\n\t\tprops: {\n\t\t\tinputLabel: 'User select',\n\t\t\toptions: [\n\t\t\t\t{\n\t\t\t\t\tid: '0-john',\n\t\t\t\t\tdisplayName: 'John',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'john@example.org',\n\t\t\t\t\t// Example of how to show the user status within the option\n\t\t\t\t\tuser: '0-john',\n\t\t\t\t\tpreloadedUserStatus: {\n\t\t\t\t\t\tstatus: 'online',\n\t\t\t\t\t\tmessage: 'I am online',\n\t\t\t\t\t},\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-emma',\n\t\t\t\t\tdisplayName: 'Emma',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'emma@example.org',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-olivia',\n\t\t\t\t\tdisplayName: 'Olivia',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'olivia@example.org',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-noah',\n\t\t\t\t\tdisplayName: 'Noah',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'noah@example.org',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-oliver',\n\t\t\t\t\tdisplayName: 'Oliver',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'oliver@example.org',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '1-admin',\n\t\t\t\t\tdisplayName: 'Admin',\n\t\t\t\t\tisNoUser: true,\n\t\t\t\t\ticonSvg: svgAccountGroup,\n\t\t\t\t\ticonName: 'Group icon',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '2-org@example.org',\n\t\t\t\t\tdisplayName: 'Organization',\n\t\t\t\t\tisNoUser: true,\n\t\t\t\t\tsubname: 'org@example.org',\n\t\t\t\t\ticonSvg: svgEmail,\n\t\t\t\t\ticonName: 'Email icon',\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t},\n\n\t{\n\t\tprops: {\n\t\t\tinputLabel: 'Multiple user select (stay open on select)',\n\t\t\tkeepOpen: true,\n\t\t\tmultiple: true,\n\t\t\toptions: [\n\t\t\t\t{\n\t\t\t\t\tid: '0-john',\n\t\t\t\t\tdisplayName: 'John',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'john@example.org',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-emma',\n\t\t\t\t\tdisplayName: 'Emma',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'emma@example.org',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-olivia',\n\t\t\t\t\tdisplayName: 'Olivia',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'olivia@example.org',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-noah',\n\t\t\t\t\tdisplayName: 'Noah',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'noah@example.org',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '0-oliver',\n\t\t\t\t\tdisplayName: 'Oliver',\n\t\t\t\t\tisNoUser: false,\n\t\t\t\t\tsubname: 'oliver@example.org',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '1-admin',\n\t\t\t\t\tdisplayName: 'Admin',\n\t\t\t\t\tisNoUser: true,\n\t\t\t\t\ticonSvg: svgAccountGroup,\n\t\t\t\t\ticonName: 'Group icon',\n\t\t\t\t},\n\t\t\t\t{\n\t\t\t\t\tid: '2-org@example.org',\n\t\t\t\t\tdisplayName: 'Organization',\n\t\t\t\t\tisNoUser: true,\n\t\t\t\t\tsubname: 'org@example.org',\n\t\t\t\t\ticonSvg: svgEmail,\n\t\t\t\t\ticonName: 'Email icon',\n\t\t\t\t},\n\t\t\t],\n\t\t},\n\t},\n]\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tselectArray,\n\t\t}\n\t},\n}\n</script>\n\n<style>\n.grid {\n\tdisplay: grid;\n\tgrid-template-columns: repeat(1, 500px);\n\tgap: 10px;\n}\n\n.container {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: 2px 0;\n}\n</style>\n```\n</docs>\n\n<script setup lang=\"ts\">\nimport { ref, watch } from 'vue'\n\nimport NcListItemIcon from '../NcListItemIcon/index.js'\nimport NcSelect from '../NcSelect/index.js'\n\nexport interface IUserData {\n\tid: string\n\n\t/**\n\t * Main display name\n\t */\n\tdisplayName: string\n\n\t/**\n\t * The user id.\n\t * Will be used to fetch the user status if not disabled.\n\t */\n\tuser?: string\n\n\t/**\n\t * The secondary displayname (e.g. the email address).\n\t */\n\tsubname?: string\n\n\t/**\n\t * Optional icon to use as the avatar.\n\t * Setting this will disable the automatic avatar loading.\n\t */\n\ticonSvg?: string\n\n\t/**\n\t * Accessible name for the icon.\n\t */\n\ticonName?: string\n\n\t/**\n\t * If this is a guest user.\n\t * Needed as guest users have a different API endpoint for avatar loading.\n\t */\n\tisGuest?: boolean\n\n\t/**\n\t * Set if this is not a regular user.\n\t * This will disable user status and avatar loading.\n\t */\n\tisNoUser?: boolean\n}\n\ndefineProps<{\n\t/**\n\t * `aria-label` for the clear input button.\n\t *\n\t * @default 'Clear selected'\n\t */\n\tariaLabelClearSelected?: string\n\n\t/**\n\t * `aria-label` for the listbox element.\n\t *\n\t * @default 'Options'\n\t */\n\tariaLabelListbox?: string\n\n\t/**\n\t * Allows to customize the `aria-label` for the deselect-option button.\n\t *\n\t * @default (label) => `Deselect ${label}`\n\t */\n\tariaLabelDeselectOption?: (label: string) => string\n\n\t/**\n\t * Disable the component.\n\t */\n\tdisabled?: boolean\n\n\t/**\n\t * Input element id.\n\t *\n\t * @default random generated id\n\t */\n\tinputId?: string\n\n\t/**\n\t * Visible label for the input element\n\t *\n\t * @default 'Select account'\n\t */\n\tinputLabel?: string\n\n\t/**\n\t * Pass true if you are using an external label.\n\t * In this case make sure you set the `for` attribute of your `<label>` to the `inputId` of this component.\n\t */\n\tlabelOutside?: boolean\n\n\t/**\n\t * Keep the dropdown open after selecting an entry.\n\t */\n\tkeepOpen?: boolean\n\n\t/**\n\t * Show a loading icon.\n\t */\n\tloading?: boolean\n\n\t/**\n\t * Allow selection of multiple options\n\t */\n\tmultiple?: boolean\n\n\t/**\n\t * Disable automatic wrapping when selected options overflow the width.\n\t */\n\tnoWrap?: boolean\n\n\t/**\n\t * Array of users or similar object (e.g. groups or guest users).\n\t */\n\toptions: IUserData[]\n\n\t/**\n\t * Placeholder text.\n\t *\n\t * @default ''\n\t */\n\tplaceholder?: string\n\n\t/**\n\t * Enable if a value is required for native form validation.\n\t */\n\trequired?: boolean\n}>()\n\n/**\n * Currently selected value.\n * The `v-model` directive may be used for two-way data binding.\n */\ndefineModel<IUserData>('modelValue')\n\nconst emit = defineEmits<{\n\t/**\n\t * Emitted when the user enters some query.\n\t * This can be used to asynchronously fetch more options.\n\t */\n\tsearch: [string]\n}>()\n\nconst search = ref('')\nwatch(search, () => emit('search', search.value))\n\n// Avatar size so the component has the same size as Nc*Field\nconst clickableArea = Number.parseInt(window.getComputedStyle(document.body).getPropertyValue('--default-clickable-area'))\nconst gridBaseLine = Number.parseInt(window.getComputedStyle(document.body).getPropertyValue('--default-grid-baseline'))\nconst avatarSize = clickableArea - 2 * gridBaseLine\n\n/**\n * Filter function to search users.\n *\n * @param option - The option to check\n * @param option.subname - The second line to check (often the email address)\n * @param label - The label of the option\n * @param search - The current search string\n */\nfunction filterBy(option: { subname?: string }, label: string, search: string) {\n\t// Match the email notation like \"Jane <j.doe@example.com>\" with the email address as matching group\n\tconst EMAIL_NOTATION = /[^<]*<([^>]+)/\n\n\tconst match = search.match(EMAIL_NOTATION)\n\tconst subname = option.subname?.toLocaleLowerCase() ?? ''\n\treturn (match && subname.indexOf(match[1].toLocaleLowerCase()) > -1)\n\t\t|| (`${label} ${option.subname}`\n\t\t\t.toLocaleLowerCase()\n\t\t\t.indexOf(search.toLocaleLowerCase()) > -1)\n}\n</script>\n\n<template>\n\t<NcSelect class=\"nc-select-users\"\n\t\tv-bind=\"$props\"\n\t\t:filter-by\n\t\tlabel=\"displayName\"\n\t\t@search=\"search = $event\"\n\t\t@update:model-value=\"$emit('update:modelValue', $event)\">\n\t\t<template #option=\"option\">\n\t\t\t<NcListItemIcon v-bind=\"option\"\n\t\t\t\t:avatar-size=\"32\"\n\t\t\t\t:name=\"option.displayName\"\n\t\t\t\t:search />\n\t\t</template>\n\t\t<template #selected-option=\"selectedOption\">\n\t\t\t<NcListItemIcon v-bind=\"selectedOption\"\n\t\t\t\t:avatar-size\n\t\t\t\t:name=\"selectedOption.displayName\"\n\t\t\t\tno-margin\n\t\t\t\t:search />\n\t\t</template>\n\t</NcSelect>\n</template>\n\n<style scoped lang=\"css\">\n.nc-select-users :deep(.vs__selected) {\n\tpadding-inline: 0 5px !important;\n}\n</style>\n"],"names":["_useModel","search"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AAgTAA,sBAAuB,YAAY;AAEnC,UAAM,OAAO;AAQP,UAAA,SAAS,IAAI,EAAE;AACrB,UAAM,QAAQ,MAAM,KAAK,UAAU,OAAO,KAAK,CAAC;AAG1C,UAAA,gBAAgB,OAAO,SAAS,OAAO,iBAAiB,SAAS,IAAI,EAAE,iBAAiB,0BAA0B,CAAC;AACnH,UAAA,eAAe,OAAO,SAAS,OAAO,iBAAiB,SAAS,IAAI,EAAE,iBAAiB,yBAAyB,CAAC;AACjH,UAAA,aAAa,gBAAgB,IAAI;AAU9B,aAAA,SAAS,QAA8B,OAAeC,SAAgB;AAE9E,YAAM,iBAAiB;AAEjB,YAAA,QAAQA,QAAO,MAAM,cAAc;AACzC,YAAM,UAAU,OAAO,SAAS,kBAAuB,KAAA;AAC/C,aAAA,SAAS,QAAQ,QAAQ,MAAM,CAAC,EAAE,kBAAA,CAAmB,IAAI,MAC5D,GAAG,KAAK,IAAI,OAAO,OAAO,GAC5B,oBACA,QAAQA,QAAO,kBAAmB,CAAA,IAAI;AAAA,IAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/components/NcSettingsInputText/NcSettingsInputText.vue.d.ts

@@ -46,7 +46,7 @@ declare const _default: import('vue').DefineComponent<import('vue').ExtractPropT
     onInput(event: any): void;
     onSubmit(event: any): void;
     onChange(event: any): void;
-}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("submit" | "change" | "input" | "update:modelValue")[], "submit" | "change" | "input" | "update:modelValue", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
+}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, ("submit" | "input" | "update:modelValue" | "change")[], "submit" | "input" | "update:modelValue" | "change", import('vue').PublicProps, Readonly<import('vue').ExtractPropTypes<{
     /**
      * label of the select group element
      */

package/dist/components/NcSettingsInputText/index.mjs

@@ -1,4 +1,4 @@
-import { N } from "../../chunks/NcSettingsInputText-BEHu3xAI.mjs";
+import { N } from "../../chunks/NcSettingsInputText-CMBC7DaG.mjs";
 export {
   N as default
 };

package/dist/components/NcSettingsSection/index.mjs

@@ -1,4 +1,4 @@
-import { N } from "../../chunks/NcSettingsSection-X7f0W7vZ.mjs";
+import { N } from "../../chunks/NcSettingsSection-Crla6NXM.mjs";
 export {
   N as default
 };