@nextcloud/vue 9.0.0-alpha.0 → 9.0.0-alpha.2

package/dist/src/components/NcActions/NcActions.vue.d.ts

@@ -129,28 +129,48 @@ declare const _default: import("vue").DefineComponent<{
     opened: boolean;
     focusIndex: number;
     randomId: string;
-    isSemanticMenu: boolean;
-    isSemanticNavigation: boolean;
-    isSemanticPopoverLike: boolean;
+    /**
+     * @type {'menu'|'navigation'|'dialog'|'tooltip'|''}
+     */
+    actionsMenuSemanticType: 'menu' | 'navigation' | 'dialog' | 'tooltip' | '';
+    externalFocusTrapStack: never[];
 }, {
     triggerBtnType(): any;
+    withFocusTrap(): boolean;
 }, {
+    /**
+     * Get the name of the action component
+     *
+     * @param {import('vue').VNode} action - a vnode with a NcAction* component instance
+     * @return {string} the name of the action component
+     */
+    getActionName(action: import('vue').VNode): string;
+    /**
+     * When the component has its own focus trap, then it is managed by global trap stack by focus-trap.
+     *
+     * However if the component has no focus trap and is used inside another focus trap - there is an issue.
+     * By default popover content is rendered in body or other container, which is likely outside the current focus trap containers.
+     * It results in broken behavior from focus-trap.
+     *
+     * We need to pause all the focus traps for opening popover and then unpause them back after closing.
+     */
+    intersectIntoCurrentFocusTrapStack(): void;
     /**
      * Do we have exactly one Action and
      * is it allowed as a standalone element?
      *
-     * @param {Array} action The action to check
+     * @param {import('vue').VNode} action The action to check
      * @return {boolean}
      */
-    isValidSingleAction(action: any[]): boolean;
-    isAction(vnode: any): any;
+    isValidSingleAction(action: import('vue').VNode): boolean;
+    isAction(action: any): boolean;
     /**
      * Check whether a icon prop value is an URL or not
      * @param {string} url The icon prop value
      */
     isIconUrl(url: string): boolean;
     openMenu(): void;
-    closeMenu(returnFocus?: boolean): void;
+    closeMenu(returnFocus?: boolean): Promise<void>;
     onOpen(event: any): void;
     onMouseFocusAction(event: any): void;
     /**
@@ -168,7 +188,8 @@ declare const _default: import("vue").DefineComponent<{
     preventIfEvent(event: any): void;
     onFocus(event: any): void;
     onBlur(event: any): void;
-}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("blur" | "close" | "focus" | "open" | "update:open")[], "blur" | "close" | "focus" | "open" | "update:open", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    onClick(event: any): void;
+}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "blur" | "close" | "focus" | "open" | "update:open")[], "click" | "blur" | "close" | "focus" | "open" | "update:open", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     /**
      * Specify the open state of the popover menu
      */
@@ -296,6 +317,7 @@ declare const _default: import("vue").DefineComponent<{
         default: number;
     };
 }>> & {
+    onClick?: ((...args: any[]) => any) | undefined;
     onFocus?: ((...args: any[]) => any) | undefined;
     onBlur?: ((...args: any[]) => any) | undefined;
     onClose?: ((...args: any[]) => any) | undefined;

package/dist/src/components/NcAppNavigationToggle/NcAppNavigationToggle.vue.d.ts

@@ -1,4 +1,9 @@
 declare const _default: import("vue").DefineComponent<{
+    /**
+     * Tracks whether the toggle has been clicked or not.
+     * If it has been clicked, switches between the different MenuIcons
+     * and emits a boolean indicating its opened status
+     */
     open: {
         type: BooleanConstructor;
         required: true;
@@ -6,8 +11,17 @@ declare const _default: import("vue").DefineComponent<{
 }, any, any, {
     label(): string;
 }, {
+    /**
+     * Once the toggle has been clicked, emits the toggle status
+     * so parent components can gauge the status of the navigation button
+     */
     toggleNavigation(): void;
 }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "update:open"[], "update:open", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * Tracks whether the toggle has been clicked or not.
+     * If it has been clicked, switches between the different MenuIcons
+     * and emits a boolean indicating its opened status
+     */
     open: {
         type: BooleanConstructor;
         required: true;

package/dist/src/components/NcAppSidebar/NcAppSidebar.vue.d.ts

@@ -99,6 +99,7 @@ declare const _default: import("vue").DefineComponent<{
         default: string;
     };
 }, {
+    uid: string;
     isMobile: Readonly<import("vue").Ref<boolean>>;
 }, {
     changeNameTranslated: string;
@@ -106,6 +107,7 @@ declare const _default: import("vue").DefineComponent<{
     favoriteTranslated: string;
     isStarred: boolean;
     focusTrap: null;
+    elementToReturnFocus: null;
 }, {
     canStar(): boolean;
     hasFigureClickListener(): boolean;
@@ -113,6 +115,7 @@ declare const _default: import("vue").DefineComponent<{
     isSlotPopulated: (vnodes?: import("vue").VNode<import("vue").RendererNode, import("vue").RendererElement, {
         [key: string]: any;
     }>[] | import("vue").VNodeNormalizedChildren | undefined) => boolean;
+    preserveElementToReturnFocus(): void;
     initFocusTrap(): void;
     /**
      * Activate focus trap if it is currently needed, otherwise deactivate
@@ -140,6 +143,16 @@ declare const _default: import("vue").DefineComponent<{
      */
     toggleStarred(): void;
     editName(): Promise<void>;
+    /**
+     * Focus the sidebar
+     * @public
+     */
+    focus(): void;
+    /**
+     * Focus the active tab
+     * @public
+     */
+    focusActiveTabContent(): void;
     /**
      * Emit name change event to parent component
      *

package/dist/src/components/NcBreadcrumb/NcBreadcrumb.vue.d.ts

@@ -30,12 +30,19 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
     /**
-     * Set a css icon-class to show an icon instead of the name text.
+     * Set a css icon-class to show an icon along name text (if forceIconText is provided, otherwise just icon).
      */
     icon: {
         type: StringConstructor;
         default: string;
     };
+    /**
+     * Enables text to accompany the icon, if the icon was provided. The text that will be displayed is the name prop.
+     */
+    forceIconText: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     /**
      * Disable dropping on this breadcrumb.
      */
@@ -145,12 +152,19 @@ declare const _default: import("vue").DefineComponent<{
         default: undefined;
     };
     /**
-     * Set a css icon-class to show an icon instead of the name text.
+     * Set a css icon-class to show an icon along name text (if forceIconText is provided, otherwise just icon).
      */
     icon: {
         type: StringConstructor;
         default: string;
     };
+    /**
+     * Enables text to accompany the icon, if the icon was provided. The text that will be displayed is the name prop.
+     */
+    forceIconText: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
     /**
      * Disable dropping on this breadcrumb.
      */
@@ -192,6 +206,7 @@ declare const _default: import("vue").DefineComponent<{
     to: string | Record<string, any>;
     open: boolean;
     forceMenu: boolean;
+    forceIconText: boolean;
     disableDrop: boolean;
 }, {}>;
 export default _default;

package/dist/src/components/NcBreadcrumbs/NcBreadcrumbs.vue.d.ts

@@ -29,7 +29,7 @@ declare const _default: import("vue").DefineComponent<{
         disableDrop: boolean;
         open: boolean;
     };
-    breadcrumbsRefs: {};
+    breadcrumbsRefs: never[];
 }, {}, {
     /**
      * Close the actions menu
@@ -58,10 +58,9 @@ declare const _default: import("vue").DefineComponent<{
     /**
      * Calculates the total width of all breadcrumbs
      *
-     * @param {Array} breadcrumbs All breadcrumbs
      * @return {number} The total width
      */
-    getTotalWidth(breadcrumbs: any[]): number;
+    getTotalWidth(): number;
     /**
      * Calculates the width of the provided element
      *

package/dist/src/components/NcButton/NcButton.vue.d.ts

@@ -115,6 +115,7 @@ declare const _default: import("vue").DefineComponent<{
      * If the button content should be reversed (icon on the end)
      */
     isReverseAligned(): boolean;
+    ncPopoverTriggerAttrs(): any;
 }, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "update:pressed")[], "click" | "update:pressed", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
     /**
      * Set the text and icon alignment

package/dist/src/components/NcListItem/NcListItem.vue.d.ts

@@ -98,14 +98,13 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, any, {
     hovered: boolean;
-    focused: boolean;
     hasActions: boolean;
     hasSubname: boolean;
     displayActionsOnHoverFocus: boolean;
     menuOpen: boolean;
     hasIndicator: boolean;
+    hasDetails: boolean;
 }, {
-    hasDetails(): boolean;
     oneLine(): boolean;
     showAdditionalElements(): any;
     showDetails(): any;
@@ -114,30 +113,22 @@ declare const _default: import("vue").DefineComponent<{
     /**
      * Handle link click
      *
-     * @param {PointerEvent} event - Native click event
+     * @param {MouseEvent|KeyboardEvent} event - Native click or keydown event
      * @param {Function} [navigate] - VueRouter link's navigate if any
      * @param {string} [routerLinkHref] - VueRouter link's href
      */
-    onClick(event: PointerEvent, navigate?: Function | undefined, routerLinkHref?: string | undefined): void;
-    handleMouseover(): void;
+    onClick(event: MouseEvent | KeyboardEvent, navigate?: Function | undefined, routerLinkHref?: string | undefined): void;
     showActions(): void;
     hideActions(): void;
     /**
-     * Show actions upon focus
+     * @param {FocusEvent} event UI event
      */
-    handleFocus(): void;
-    handleBlur(): void;
+    handleBlur(event: FocusEvent): void;
     /**
      * Hide the actions on mouseleave unless the menu is open
      */
     handleMouseleave(): void;
-    /**
-     * This method checks if the root element of the component is focused and
-     * if that's the case it focuses the actions button if available
-     *
-     * @param {Event} e the keydown event
-     */
-    handleTab(e: Event): void;
+    handleMouseover(): void;
     handleActionsUpdateOpen(e: any): void;
     checkSlots(): void;
 }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("click" | "update:menuOpen")[], "click" | "update:menuOpen", import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{

package/dist/src/components/NcRichContenteditable/NcAutoCompleteResult.vue.d.ts

@@ -1,7 +1,16 @@
 declare const _default: import("vue").DefineComponent<{
+    /**
+     * @deprecated Use `label` instead
+     */
     title: {
         type: StringConstructor;
-        required: true;
+        required: false;
+        default: null;
+    };
+    label: {
+        type: StringConstructor;
+        required: false;
+        default: null;
     };
     subline: {
         type: StringConstructor;
@@ -29,12 +38,22 @@ declare const _default: import("vue").DefineComponent<{
     };
 }, any, any, {
     avatarUrl(): any;
+    labelWithFallback(): any;
 }, {
     getAvatarUrl(user: any, size: any): string;
 }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    /**
+     * @deprecated Use `label` instead
+     */
     title: {
         type: StringConstructor;
-        required: true;
+        required: false;
+        default: null;
+    };
+    label: {
+        type: StringConstructor;
+        required: false;
+        default: null;
     };
     subline: {
         type: StringConstructor;
@@ -61,6 +80,8 @@ declare const _default: import("vue").DefineComponent<{
         default: () => {};
     };
 }>>, {
+    label: string;
+    title: string;
     id: string;
     status: Record<string, any> | unknown[];
     iconUrl: string;

package/dist/src/components/NcRichContenteditable/NcRichContenteditable.vue.d.ts

@@ -86,44 +86,22 @@ declare const _default: import("vue").DefineComponent<{
         type: (StringConstructor | ObjectConstructor | ArrayConstructor)[];
         default: string;
     };
-}, any, {
+}, {
     labelId: string;
-    textSmiles: never[];
-    tribute: null;
-    autocompleteOptions: {
-        allowSpaces: boolean;
-        fillAttr: string;
-        lookup: (result: any) => string;
-        menuContainer: Element;
-        menuItemTemplate: (item: any) => string;
-        noMatchTemplate: () => "<span class=\"hidden\"></span>";
-        selectTemplate: (item: any) => string;
-        values: never;
-    };
-    emojiOptions: {
-        trigger: string;
-        lookup: (result: any, query: any) => any;
-        menuContainer: Element;
-        menuItemTemplate: (item: any) => any;
-        noMatchTemplate: () => string;
-        selectTemplate: (item: any) => any;
-        values: (text: any, cb: any) => void;
-        containerClass: string;
-        itemClass: string;
-    };
-    linkOptions: {
-        trigger: string;
-        lookup: (result: any, query: any) => any;
-        menuContainer: Element;
-        menuItemTemplate: (item: any) => string;
-        noMatchTemplate: () => string;
-        selectTemplate: never;
-        values: (text: any, cb: any) => any;
-        containerClass: string;
-        itemClass: string;
-    };
+    tributeId: string;
+    /**
+     * Non-reactive property to store Tribute instance
+     *
+     * @type {import('tributejs').default | null}
+     */
+    tribute: import("tributejs").default<any> | null;
+    tributeStyleMutationObserver: null;
+}, {
     localValue: string;
     isComposing: boolean;
+    isAutocompleteOpen: boolean;
+    autocompleteActiveId: undefined;
+    isTributeIntegrationDone: boolean;
 }, {
     /**
      * Is the current trimmed value empty?
@@ -155,6 +133,10 @@ declare const _default: import("vue").DefineComponent<{
      * @return {boolean}
      */
     canEdit(): boolean;
+    /**
+     * Compute debounce function for the autocomplete function
+     */
+    debouncedAutoComplete(): debounce.DebouncedFunction<(search: any, callback: any) => Promise<void>>;
 }, {
     /**
      * Focus the richContenteditable
@@ -162,6 +144,7 @@ declare const _default: import("vue").DefineComponent<{
      * @public
      */
     focus(): void;
+    initializeTribute(): void;
     getLink(item: any): "<span id=\"tmp-smart-picker-result-node\"></span>";
     setCursorAfter(element: any): void;
     moveCursorToEnd(): void;
@@ -212,11 +195,34 @@ declare const _default: import("vue").DefineComponent<{
      * @param {Event} event the keydown event
      */
     onCtrlEnter(event: Event): void;
+    onKeyUp(event: any): void;
     /**
-     * Debounce the autocomplete function
+     * Get HTML element with Tribute.js container
+     * @return {HTMLElement}
      */
-    debouncedAutoComplete: debounce.DebouncedFunction<(search: any, callback: any) => Promise<void>>;
-    onKeyUp(event: any): void;
+    getTributeContainer(): HTMLElement;
+    /**
+     * Get the currently selected item element id in Tribute.js container
+     * @return {HTMLElement}
+     */
+    getTributeSelectedItem(): HTMLElement;
+    /**
+     * Handle Tribute activation
+     * @param {boolean} isActive - is active
+     */
+    onTributeActive(isActive: boolean): void;
+    onTributeArrowKeyDown(): void;
+    onTributeSelectedItemWillChange(): void;
+    setupTributeIntegration(): void;
+    /**
+     * Set tribute-container--focus-visible class on the Tribute container when the user navigates the listbox via keyboard.
+     *
+     * Because the real focus is kept on the textbox, we cannot use the :focus-visible pseudo-class
+     * to style selected options in the autocomplete listbox.
+     *
+     * @param {boolean} withFocusVisible - should the focus-visible class be added
+     */
+    setTributeFocusVisible(withFocusVisible: boolean): void;
 }, {
     props: {
         userData: {

package/dist/src/components/NcRichText/NcReferenceList.vue.d.ts

@@ -15,6 +15,10 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    interactive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }, any, {
     references: null;
     loading: boolean;
@@ -52,11 +56,16 @@ declare const _default: import("vue").DefineComponent<{
         type: BooleanConstructor;
         default: boolean;
     };
+    interactive: {
+        type: BooleanConstructor;
+        default: boolean;
+    };
 }>> & {
     onLoaded?: ((...args: any[]) => any) | undefined;
 }, {
     text: string;
     limit: number;
+    interactive: boolean;
     referenceData: Record<string, any>;
     displayFallback: boolean;
 }, {}>;

package/dist/src/components/NcRichText/NcReferenceWidget.vue.d.ts

@@ -18,6 +18,17 @@ declare const _default: import("vue").DefineComponent<{
         display?: undefined;
     };
     compactLink(): any;
+    route(): import("vue-router").RouteLocation | null;
+    referenceWidgetLinkComponent(): "a" | import("vue-router")._RouterLinkI;
+    referenceWidgetLinkProps(): {
+        to: import("vue-router").RouteLocation;
+        href?: undefined;
+        target?: undefined;
+    } | {
+        href: any;
+        target: string;
+        to?: undefined;
+    };
 }, {
     renderWidget(): void;
 }, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{

package/dist/src/components/NcRichText/NcRichText.vue.d.ts

@@ -129,12 +129,12 @@ declare const _default: import("vue").DefineComponent<{
 }, {
     text: string;
     arguments: Record<string, any>;
-    references: Record<string, any>;
     autolink: boolean;
     useMarkdown: boolean;
     useExtendedMarkdown: boolean;
+    interactive: boolean;
+    references: Record<string, any>;
     referenceLimit: number;
     markdownCssClasses: Record<string, any>;
-    interactive: boolean;
 }, {}>;
 export default _default;

package/dist/src/components/NcRichText/autolink.d.ts

@@ -0,0 +1,8 @@
+import type { RouteLocation, Router } from 'vue-router';
+export declare const remarkAutolink: ({ autolink, useMarkdown, useExtendedMarkdown }: {
+    autolink: any;
+    useMarkdown: any;
+    useExtendedMarkdown: any;
+}) => (tree: any) => void;
+export declare const parseUrl: (text: string) => string | (string | Record<string, any>)[];
+export declare const getRoute: (router: Router, url: string) => RouteLocation | null;

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

@@ -1,6 +1,7 @@
 declare const _default: import("vue").DefineComponent<{}, {}, {
     search: string;
 }, {
+    inputRequired(): any;
     localCalculatePosition(): any;
     localFilterBy(): any;
     localLabel(): any;

package/dist/vendor.LICENSE.txt

@@ -1,5 +1,9 @@
 Included dependencies:
 
 vue-material-design-icons
-version: 5.2.0
+version: 5.3.0
+license: MIT
+
+vue-router
+version: 4.2.5
 license: MIT

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextcloud/vue",
-  "version": "9.0.0-alpha.0",
+  "version": "9.0.0-alpha.2",
   "description": "Nextcloud vue components",
   "keywords": [
     "vuejs",
@@ -77,13 +77,13 @@
     "@nextcloud/initial-state": "^2.0.0",
     "@nextcloud/l10n": "^2.0.1",
     "@nextcloud/logger": "^2.2.1",
-    "@nextcloud/router": "^2.0.0",
+    "@nextcloud/router": "^3.0.0",
     "@vueuse/components": "^10.0.2",
     "@vueuse/core": "^10.1.2",
     "clone": "^2.1.2",
     "debounce": "2.0.0",
     "dompurify": "^3.0.8",
-    "emoji-mart-vue-fast": "^15.0.0",
+    "emoji-mart-vue-fast": "^15.0.1",
     "escape-html": "^1.0.3",
     "floating-vue": "^5.0.2",
     "focus-trap": "^7.4.3",
@@ -106,7 +106,7 @@
     "vue-select": "^4.0.0-beta.6"
   },
   "peerDependencies": {
-    "vue": "^3.4.13"
+    "vue": "^3.4.19"
   },
   "engines": {
     "node": "^20.0.0",
@@ -127,17 +127,18 @@
     "@nextcloud/vite-config": "github:nextcloud-libraries/nextcloud-vite-config#vue3",
     "@nextcloud/webpack-vue-config": "github:nextcloud/webpack-vue-config#1f4277c6ab14be63810f425ef6b762d8ca59697b",
     "@types/gettext-parser": "^4.0.4",
+    "@vitest/coverage-v8": "^1.2.2",
     "@vue/test-utils": "^2.4.1",
     "@vue/tsconfig": "^0.4.0",
     "babel-loader-exclude-node-modules-except": "^1.2.1",
     "cypress": "^13.3.3",
-    "cypress-visual-regression": "^3.0.0",
+    "cypress-visual-regression": "^5.0.0",
     "eslint-plugin-cypress": "^2.11.1",
     "file-loader": "^6.2.0",
     "gettext-extractor": "^3.7.2",
-    "gettext-parser": "^7.0.0",
+    "gettext-parser": "^8.0.0",
     "glob": "^10.0.0",
-    "jsdom": "^22.1.0",
+    "jsdom": "^24.0.0",
     "resolve-url-loader": "^5.0.0",
     "sanitize-filename": "^1.6.3",
     "ts-node": "^10.9.2",