@nextcloud/vue 9.0.0-rc.7 → 9.0.0-rc.9

package/dist/index.mjs

@@ -1,70 +1,76 @@
-import { N } from "./chunks/NcActionButton-DseKq57Q.mjs";
-import { N as N2 } from "./chunks/NcActionButtonGroup-eJGS5If0.mjs";
+import { N } from "./chunks/NcActionButton-D8JTFCmI.mjs";
+import { N as N2 } from "./chunks/NcActionButtonGroup-4-oVar5v.mjs";
 import { N as N3 } from "./chunks/NcActionCaption-Fumfjzxj.mjs";
 import { N as N4 } from "./chunks/NcActionCheckbox-CwrO3g3I.mjs";
-import { N as N5 } from "./chunks/NcActionInput-Cby01w-7.mjs";
+import { N as N5 } from "./chunks/NcActionInput-VRjeb_HB.mjs";
 import { N as N6 } from "./chunks/NcActionLink-afakPM_N.mjs";
 import { N as N7 } from "./chunks/NcActionRadio-ByCpOD0q.mjs";
 import { N as N8 } from "./chunks/NcActionRouter-oT-YU_jf.mjs";
-import { N as N9 } from "./chunks/NcActions-BOqfKgN5.mjs";
+import { N as N9 } from "./chunks/NcActions-B1Zg0lCE.mjs";
 import { N as N10 } from "./chunks/NcActionSeparator-Doekl1NX.mjs";
 import { N as N11 } from "./chunks/NcActionText-uKvLcEY6.mjs";
-import { N as N12 } from "./chunks/NcActionTextEditable-CoAscywz.mjs";
-import { N as N13 } from "./chunks/NcAppContent-CBiklfOg.mjs";
+import { N as N12 } from "./chunks/NcActionTextEditable-DT1X0o3v.mjs";
+import { N as N13 } from "./chunks/NcAppContent-C0PyJQuL.mjs";
 import { _ } from "./chunks/NcAppContentDetails.vue_vue_type_script_setup_true_lang-Dnf4r_Ng.mjs";
 import { N as N14 } from "./chunks/NcAppContentList-DYFsuDKh.mjs";
-import { N as N15 } from "./chunks/NcAppNavigation-VmhZBTF5.mjs";
-import { N as N16 } from "./chunks/NcAppNavigationCaption-zs07YHtS.mjs";
+import { N as N15 } from "./chunks/NcAppNavigation-CFXc92ve.mjs";
+import { N as N16 } from "./chunks/NcAppNavigationCaption-8IL1TQhc.mjs";
 import { N as N17 } from "./chunks/NcAppNavigationIconBullet-PrlhOoE9.mjs";
-import { N as N18 } from "./chunks/NcAppNavigationItem-DpimA76Q.mjs";
+import { N as N18 } from "./chunks/NcAppNavigationItem-DQKh1kuI.mjs";
 import { N as N19 } from "./chunks/NcAppNavigationList-BX0wE-dB.mjs";
 import { N as N20 } from "./chunks/NcAppNavigationNew-Y50s6jTC.mjs";
-import { N as N21 } from "./chunks/NcAppNavigationNewItem-CkWp0oFr.mjs";
-import { N as N22 } from "./chunks/NcAppNavigationSearch-Cs14jpSe.mjs";
-import { N as N23 } from "./chunks/NcAppNavigationSettings-D_u5pIPX.mjs";
+import { N as N21 } from "./chunks/NcAppNavigationNewItem-EiuAARhC.mjs";
+import { N as N22 } from "./chunks/NcAppNavigationSearch-4s_h51nG.mjs";
+import { N as N23 } from "./chunks/NcAppNavigationSettings-BZXKmqAD.mjs";
 import { N as N24 } from "./chunks/NcAppNavigationSpacer-BvkBfuVw.mjs";
-import { N as N25 } from "./chunks/NcAppSettingsDialog-Dy2SrGfl.mjs";
+import { N as N25 } from "./chunks/NcAppSettingsDialog-GHmlZjop.mjs";
 import { N as N26 } from "./chunks/NcAppSettingsSection-tccU68DQ.mjs";
-import { N as N27 } from "./chunks/NcAppSidebar-BNTlPC1G.mjs";
+import { N as N27 } from "./chunks/NcAppSidebar-CaRxsIi3.mjs";
 import { _ as _2 } from "./chunks/NcAppSidebarHeader.vue_vue_type_script_setup_true_lang-0j0aFDeK.mjs";
 import { N as N28 } from "./chunks/NcAppSidebarTab-Cjetm3Fs.mjs";
-import { N as N29 } from "./chunks/NcAvatar-42dhVtul.mjs";
-import { N as N30 } from "./chunks/NcBlurHash-BiFktE2N.mjs";
-import { N as N31 } from "./chunks/NcBreadcrumb-C86Yxww0.mjs";
-import { N as N32 } from "./chunks/NcBreadcrumbs-BTFyDGO2.mjs";
-import { N as N33 } from "./chunks/NcButton-DkC5k3Lb.mjs";
-import { N as N34 } from "./chunks/NcCheckboxRadioSwitch-iCknuL0_.mjs";
-import { N as N35 } from "./chunks/NcChip-Dplke0gD.mjs";
-import { N as N36 } from "./chunks/NcCollectionList-IC-VyCa-.mjs";
-import { N as N37 } from "./chunks/NcColorPicker-BPd1i3-9.mjs";
-import { N as N38 } from "./chunks/NcContent-BAiLhI_2.mjs";
-import { N as N39 } from "./chunks/NcCounterBubble-CxxHHh8i.mjs";
-import { N as N40 } from "./chunks/NcDashboardWidget-P6DhIXT2.mjs";
-import { N as N41 } from "./chunks/NcDashboardWidgetItem-GGmhjTfk.mjs";
-import { _ as _3 } from "./chunks/NcDateTime.vue_vue_type_script_setup_true_lang-B0Lci6v0.mjs";
-import { N as N42 } from "./chunks/NcDateTimePicker-DmeWERxv.mjs";
-import { N as N43 } from "./chunks/NcDateTimePickerNative-BiU3SIRj.mjs";
-import { N as N44 } from "./chunks/NcDialog-DmKbeOcJ.mjs";
-import { _ as _4 } from "./chunks/NcDialogButton.vue_vue_type_script_setup_true_lang-BvBSeEuo.mjs";
-import { N as N45 } from "./chunks/NcEllipsisedOption-dT-CtXYp.mjs";
-import { N as N46 } from "./chunks/NcEmojiPicker-VUnUOWfg.mjs";
-import { N as N47 } from "./chunks/NcEmptyContent-BdOezubv.mjs";
-import { N as N48 } from "./chunks/NcGuestContent-CfCh49o0.mjs";
-import { N as N49 } from "./chunks/NcHeaderButton-DafXYbXB.mjs";
-import { N as N50 } from "./chunks/NcHeaderMenu-fnBUbMrU.mjs";
+import { N as N29 } from "./chunks/NcAssistantButton-V44xlwm5.mjs";
+import { N as N30 } from "./chunks/NcAssistantContent-Boi-0v_0.mjs";
+import { N as N31 } from "./chunks/NcAssistantIcon-BQZQIt5W.mjs";
+import { N as N32 } from "./chunks/NcAvatar-Bdy7vKd8.mjs";
+import { N as N33 } from "./chunks/NcBlurHash-BiFktE2N.mjs";
+import { N as N34 } from "./chunks/NcBreadcrumb-DCs3D5xv.mjs";
+import { N as N35 } from "./chunks/NcBreadcrumbs-CG1-NUFL.mjs";
+import { N as N36 } from "./chunks/NcButton-DkC5k3Lb.mjs";
+import { N as N37 } from "./chunks/NcCheckboxRadioSwitch-DdIGHhQz.mjs";
+import { N as N38 } from "./chunks/NcChip-D_5q7NZO.mjs";
+import { N as N39 } from "./chunks/NcCollectionList-kmngwwsK.mjs";
+import { N as N40 } from "./chunks/NcColorPicker-BA2HkCh_.mjs";
+import { N as N41 } from "./chunks/NcContent-BPZeQ3Wr.mjs";
+import { N as N42 } from "./chunks/NcCounterBubble-CxxHHh8i.mjs";
+import { N as N43 } from "./chunks/NcDashboardWidget-nMY8_RHq.mjs";
+import { N as N44 } from "./chunks/NcDashboardWidgetItem-qMv-p11B.mjs";
+import { _ as _3 } from "./chunks/NcDateTime.vue_vue_type_script_setup_true_lang-BhB8yA4U.mjs";
+import { N as N45 } from "./chunks/NcDateTimePicker-CCOph7f6.mjs";
+import { N as N46 } from "./chunks/NcDateTimePickerNative-BS-cYf6V.mjs";
+import { N as N47 } from "./chunks/NcDialog-7-cxNVxV.mjs";
+import { _ as _4 } from "./chunks/NcDialogButton.vue_vue_type_script_setup_true_lang-CUKZOcC7.mjs";
+import { N as N48 } from "./chunks/NcEllipsisedOption-dT-CtXYp.mjs";
+import { N as N49 } from "./chunks/NcEmojiPicker-DT7vZdsR.mjs";
+import { N as N50 } from "./chunks/NcEmptyContent-BdOezubv.mjs";
+import { N as N51 } from "./chunks/NcGuestContent-CfCh49o0.mjs";
+import { N as N52 } from "./chunks/NcHeaderButton-DafXYbXB.mjs";
+import { N as N53 } from "./chunks/NcHeaderMenu-DfO7ghiM.mjs";
 import { _ as _5 } from "./chunks/NcHighlight.vue_vue_type_script_lang-DnWQDM_2.mjs";
-import { N as N51 } from "./chunks/NcIconSvgWrapper-5AA93z-F.mjs";
-import { N as N52 } from "./chunks/NcInputField-DugqxUR2.mjs";
-import { N as N53 } from "./chunks/NcListItem-C2YXq4EL.mjs";
-import { N as N54 } from "./chunks/NcListItemIcon-Du1PyhkH.mjs";
-import { N as N55 } from "./chunks/NcLoadingIcon-b_ajZ_nQ.mjs";
-import { N as N56 } from "./chunks/NcModal-Jb_FjSoh.mjs";
-import { N as N57 } from "./chunks/NcNoteCard-BBnJMdJu.mjs";
-import { N as N58 } from "./chunks/NcPasswordField-F-JcomYe.mjs";
-import { N as N59 } from "./chunks/NcPopover-D8iSVK-p.mjs";
-import { N as N60 } from "./chunks/NcProgressBar-DDMAo4h-.mjs";
-import { N as N61 } from "./chunks/NcRelatedResourcesPanel-BpH5XQ76.mjs";
-import { a, N as N62, b } from "./chunks/NcRichContenteditable-CknkQPrW.mjs";
+import { N as N54 } from "./chunks/NcIconSvgWrapper-5AA93z-F.mjs";
+import { N as N55 } from "./chunks/NcInputField-D5lRaUiK.mjs";
+import { N as N56 } from "./chunks/NcKbd-kRS12jei.mjs";
+import { N as N57 } from "./chunks/NcListItem-BxxYYPjv.mjs";
+import { N as N58 } from "./chunks/NcListItemIcon-zxWWjgoO.mjs";
+import { N as N59 } from "./chunks/NcLoadingIcon-b_ajZ_nQ.mjs";
+import { N as N60 } from "./chunks/NcModal-vyUsS1qu.mjs";
+import { N as N61 } from "./chunks/NcNoteCard-glxPCBcu.mjs";
+import { N as N62 } from "./chunks/NcPasswordField-CbeEJLKt.mjs";
+import { N as N63 } from "./chunks/NcPopover-D8iSVK-p.mjs";
+import { N as N64 } from "./chunks/NcProgressBar-DDMAo4h-.mjs";
+import { N as N65 } from "./chunks/NcRadioGroup-B_BNFM6V.mjs";
+import { N as N66 } from "./chunks/NcRadioGroupButton-WXtnV-iL.mjs";
+import { N as N67 } from "./chunks/NcRelatedResourcesPanel-BwCcw217.mjs";
+import { a, N as N68, b } from "./chunks/NcRichContenteditable-ByDxlcix.mjs";
 import "@nextcloud/auth";
 import "@nextcloud/axios";
 import "@nextcloud/router";
@@ -72,26 +78,25 @@ import "@nextcloud/sharing/public";
 import "@vueuse/core";
 import "vue";
 import "vue-router";
-import { a as a2, g, b as b2, c, s, d } from "./chunks/referencePickerModal-tSRu6940.mjs";
-import { N as N63, h, c as c2, i, e, r, f, a as a3 } from "./chunks/customPickerElements-4pQTZUnk.mjs";
+import { a as a2, g, b as b2, c, s, d } from "./chunks/referencePickerModal-B2XHvg0V.mjs";
+import { N as N69, h, c as c2, i, e, r, f, a as a3 } from "./chunks/customPickerElements-4pQTZUnk.mjs";
 import "./chunks/autolink-U5pBzLgI.mjs";
-import { N as N64 } from "./chunks/NcRichText-4S-Bcw6_.mjs";
-import { N as N65 } from "./chunks/NcSelect-CqmU4nl3.mjs";
+import { N as N70 } from "./chunks/NcRichText-jQc4sfgS.mjs";
+import { N as N71 } from "./chunks/NcSelect-D8ZEOizf.mjs";
 import "debounce";
 import "./chunks/logger-D3RVzcfQ.mjs";
-import { _ as _6 } from "./chunks/NcTextField.vue_vue_type_script_setup_true_lang-BN-Pgz4E.mjs";
+import { _ as _6 } from "./chunks/NcTextField.vue_vue_type_script_setup_true_lang-C7tMhmsN.mjs";
 import "@nextcloud/event-bus";
 import { _ as _7 } from "./chunks/NcSavingIndicatorIcon.vue_vue_type_script_setup_true_lang-jUf1K561.mjs";
-import { N as N66 } from "./chunks/NcSelectTags-CcsDvt0V.mjs";
-import { N as N67 } from "./chunks/NcSelectUsers-BLzx7FTX.mjs";
-import { N as N68 } from "./chunks/NcSettingsInputText-BmOtUODF.mjs";
-import { N as N69 } from "./chunks/NcSettingsSection-B1XS0NQu.mjs";
-import { N as N70 } from "./chunks/NcSettingsSelectGroup-BmtDlJ3e.mjs";
-import { N as N71 } from "./chunks/NcTextArea-CLM4W-yg.mjs";
+import { N as N72 } from "./chunks/NcSelectTags-DrMDRnwZ.mjs";
+import { N as N73 } from "./chunks/NcSelectUsers-DdT04dN1.mjs";
+import { N as N74 } from "./chunks/NcSettingsSection-Bp99Q74i.mjs";
+import { N as N75 } from "./chunks/NcSettingsSelectGroup-BkPLZPNn.mjs";
+import { N as N76 } from "./chunks/NcTextArea-DeoDvFwH.mjs";
 import { _ as _8 } from "./chunks/NcThemeProvider.vue_vue_type_script_setup_true_lang-nUDJsDGI.mjs";
-import { _ as _9 } from "./chunks/NcTimezonePicker.vue_vue_type_script_setup_true_lang-CERjSiE5.mjs";
-import { N as N72 } from "./chunks/NcUserBubble-CxGixaPY.mjs";
-import { N as N73 } from "./chunks/NcUserStatusIcon-BUBFkE3m.mjs";
+import { _ as _9 } from "./chunks/NcTimezonePicker.vue_vue_type_script_setup_true_lang-DcUR0zAy.mjs";
+import { N as N77 } from "./chunks/NcUserBubble-CklD5ttg.mjs";
+import { N as N78 } from "./chunks/NcUserStatusIcon-DiX6zPGT.mjs";
 import { _ as _10 } from "./chunks/NcVNodes.vue_vue_type_script_lang-BqUHinRZ.mjs";
 import { useFormatRelativeTime, useFormatTime } from "./composables/useFormatDateTime/index.mjs";
 import { useHotKey } from "./composables/useHotKey/index.mjs";
@@ -143,60 +148,65 @@ export {
   N27 as NcAppSidebar,
   _2 as NcAppSidebarHeader,
   N28 as NcAppSidebarTab,
+  N29 as NcAssistantButton,
+  N30 as NcAssistantContent,
+  N31 as NcAssistantIcon,
   a as NcAutoCompleteResult,
-  N29 as NcAvatar,
-  N30 as NcBlurHash,
-  N31 as NcBreadcrumb,
-  N32 as NcBreadcrumbs,
-  N33 as NcButton,
-  N34 as NcCheckboxRadioSwitch,
-  N35 as NcChip,
-  N36 as NcCollectionList,
-  N37 as NcColorPicker,
-  N38 as NcContent,
-  N39 as NcCounterBubble,
-  N63 as NcCustomPickerRenderResult,
-  N40 as NcDashboardWidget,
-  N41 as NcDashboardWidgetItem,
+  N32 as NcAvatar,
+  N33 as NcBlurHash,
+  N34 as NcBreadcrumb,
+  N35 as NcBreadcrumbs,
+  N36 as NcButton,
+  N37 as NcCheckboxRadioSwitch,
+  N38 as NcChip,
+  N39 as NcCollectionList,
+  N40 as NcColorPicker,
+  N41 as NcContent,
+  N42 as NcCounterBubble,
+  N69 as NcCustomPickerRenderResult,
+  N43 as NcDashboardWidget,
+  N44 as NcDashboardWidgetItem,
   _3 as NcDateTime,
-  N42 as NcDateTimePicker,
-  N43 as NcDateTimePickerNative,
-  N44 as NcDialog,
+  N45 as NcDateTimePicker,
+  N46 as NcDateTimePickerNative,
+  N47 as NcDialog,
   _4 as NcDialogButton,
-  N45 as NcEllipsisedOption,
-  N46 as NcEmojiPicker,
-  N47 as NcEmptyContent,
-  N48 as NcGuestContent,
-  N49 as NcHeaderButton,
-  N50 as NcHeaderMenu,
+  N48 as NcEllipsisedOption,
+  N49 as NcEmojiPicker,
+  N50 as NcEmptyContent,
+  N51 as NcGuestContent,
+  N52 as NcHeaderButton,
+  N53 as NcHeaderMenu,
   _5 as NcHighlight,
-  N51 as NcIconSvgWrapper,
-  N52 as NcInputField,
-  N53 as NcListItem,
-  N54 as NcListItemIcon,
-  N55 as NcLoadingIcon,
-  N62 as NcMentionBubble,
-  N56 as NcModal,
-  N57 as NcNoteCard,
-  N58 as NcPasswordField,
-  N59 as NcPopover,
-  N60 as NcProgressBar,
-  N61 as NcRelatedResourcesPanel,
+  N54 as NcIconSvgWrapper,
+  N55 as NcInputField,
+  N56 as NcKbd,
+  N57 as NcListItem,
+  N58 as NcListItemIcon,
+  N59 as NcLoadingIcon,
+  N68 as NcMentionBubble,
+  N60 as NcModal,
+  N61 as NcNoteCard,
+  N62 as NcPasswordField,
+  N63 as NcPopover,
+  N64 as NcProgressBar,
+  N65 as NcRadioGroup,
+  N66 as NcRadioGroupButton,
+  N67 as NcRelatedResourcesPanel,
   b as NcRichContenteditable,
-  N64 as NcRichText,
+  N70 as NcRichText,
   _7 as NcSavingIndicatorIcon,
-  N65 as NcSelect,
-  N66 as NcSelectTags,
-  N67 as NcSelectUsers,
-  N68 as NcSettingsInputText,
-  N69 as NcSettingsSection,
-  N70 as NcSettingsSelectGroup,
-  N71 as NcTextArea,
+  N71 as NcSelect,
+  N72 as NcSelectTags,
+  N73 as NcSelectUsers,
+  N74 as NcSettingsSection,
+  N75 as NcSettingsSelectGroup,
+  N76 as NcTextArea,
   _6 as NcTextField,
   _8 as NcThemeProvider,
   _9 as NcTimezonePicker,
-  N72 as NcUserBubble,
-  N73 as NcUserStatusIcon,
+  N77 as NcUserBubble,
+  N78 as NcUserStatusIcon,
   _10 as NcVNodes,
   a2 as anyLinkProviderId,
   checkIfDarkTheme,

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.mjs","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/dist/utils/platform.d.ts

@@ -0,0 +1 @@
+export declare const isMac: boolean;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@nextcloud/vue",
-  "version": "9.0.0-rc.7",
+  "version": "9.0.0-rc.9",
   "description": "Nextcloud vue components",
   "keywords": [
     "vuejs",
@@ -86,21 +86,22 @@
     "@nextcloud/l10n": "^3.4.0",
     "@nextcloud/logger": "^3.0.2",
     "@nextcloud/router": "^3.0.1",
-    "@nextcloud/sharing": "^0.2.5",
+    "@nextcloud/sharing": "^0.3.0",
     "@nextcloud/timezones": "^1.0.0",
     "@vuepic/vue-datepicker": "^11.0.2",
-    "@vueuse/components": "^13.8.0",
-    "@vueuse/core": "^13.6.0",
+    "@vueuse/components": "^13.9.0",
+    "@vueuse/core": "^13.9.0",
     "blurhash": "^2.0.5",
     "clone": "^2.1.2",
+    "crypto-browserify": "^3.12.1",
     "debounce": "^2.2.0",
     "dompurify": "^3.2.6",
-    "emoji-mart-vue-fast": "^15.0.4",
+    "emoji-mart-vue-fast": "^15.0.5",
     "escape-html": "^1.0.3",
     "floating-vue": "^5.2.2",
     "focus-trap": "^7.6.5",
     "linkifyjs": "^4.3.2",
-    "p-queue": "^8.1.0",
+    "p-queue": "^8.1.1",
     "rehype-external-links": "^3.0.0",
     "rehype-highlight": "^7.0.2",
     "rehype-react": "^8.0.0",
@@ -130,18 +131,18 @@
     "@nextcloud/browserslist-config": "^3.0.1",
     "@nextcloud/eslint-config": "^9.0.0-rc.5",
     "@nextcloud/stylelint-config": "^3.1.0",
-    "@nextcloud/vite-config": "^2.4.0",
+    "@nextcloud/vite-config": "^2.5.0",
     "@nextcloud/webpack-vue-config": "github:nextcloud/webpack-vue-config#vue3",
     "@playwright/experimental-ct-vue": "^1.55.0",
     "@playwright/test": "^1.55.0",
     "@types/gettext-parser": "^8.0.0",
-    "@types/node": "^24.3.0",
+    "@types/node": "^24.3.1",
     "@vitest/coverage-v8": "^3.2.4",
     "@vue/test-utils": "^2.4.6",
     "@vue/tsconfig": "^0.8.1",
     "babel-loader-exclude-node-modules-except": "^1.2.1",
     "core-js": "^3.45.1",
-    "eslint": "^9.34.0",
+    "eslint": "^9.35.0",
     "file-loader": "^6.2.0",
     "gettext-extractor": "^4.0.1",
     "gettext-parser": "^8.0.0",
@@ -149,13 +150,12 @@
     "jsdom": "^26.1.0",
     "remark-gfm": "^4.0.1",
     "resolve-url-loader": "^5.0.0",
-    "sass": "^1.91.0",
-    "stylelint": "^16.23.1",
+    "sass": "^1.92.1",
+    "stylelint": "^16.24.0",
     "ts-node": "^10.9.2",
     "typescript": "^5.9.2",
     "url-loader": "^4.1.1",
-    "vite": "^7.1.3",
-    "vite-plugin-node-polyfills": "^0.24.0",
+    "vite": "^7.1.5",
     "vitest": "^3.2.4",
     "vue-eslint-parser": "^10.2.0",
     "vue-material-design-icons": "^5.3.1",

package/dist/chunks/NcAppNavigation-VmhZBTF5.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcAppNavigation-VmhZBTF5.mjs","sources":["../../src/components/NcAppNavigation/NcAppNavigationToggle.vue","../../src/components/NcAppNavigation/NcAppNavigation.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n  -->\n\n<script setup lang=\"ts\">\nimport { mdiMenu, mdiMenuOpen } from '@mdi/js'\nimport { computed } from 'vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport { t } from '../../l10n.ts'\nimport NcButton from '../NcButton/index.ts'\n\n/**\n * Tracks whether the toggle has been clicked or not.\n * If it has been clicked, switches between the different MenuIcons\n * and emits a boolean indicating its opened status\n */\nconst open = defineModel<boolean>('open', { required: true })\n\nconst title = computed(() => open.value ? t('Close navigation') : t('Open navigation'))\n</script>\n\n<template>\n\t<div class=\"app-navigation-toggle-wrapper\">\n\t\t<NcButton\n\t\t\tclass=\"app-navigation-toggle\"\n\t\t\taria-controls=\"app-navigation-vue\"\n\t\t\t:aria-expanded=\"open ? 'true' : 'false'\"\n\t\t\t:aria-label=\"title\"\n\t\t\t:title\n\t\t\tvariant=\"tertiary\"\n\t\t\t@click=\"open = !open\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :path=\"open ? mdiMenuOpen : mdiMenu\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t</div>\n</template>\n\n<style scoped lang=\"scss\">\n.app-navigation-toggle-wrapper {\n\tposition: absolute;\n\ttop: var(--app-navigation-padding);\n\tinset-inline-end: calc(0px - var(--app-navigation-padding));\n\tmargin-inline-end: calc(-1 * var(--default-clickable-area));\n}\n\nbutton.app-navigation-toggle {\n\tbackground-color: var(--color-main-background);\n}\n</style>\n","<!--\n  - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n```vue\n<template>\n\t<div class=\"styleguide-nc-content\">\n\t\t<NcAppNavigation>\n\t\t\t<template #search>\n\t\t\t\t<div class=\"navigation__header\">\n\t\t\t\t\t<NcAppNavigationSearch v-model=\"searchValue\" label=\"Search …\" />\n\t\t\t\t\t<NcActions>\n\t\t\t\t\t\t<NcActionButton close-after-click @click=\"showModal = true\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<IconCog />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\tApp settings (close after click)\n\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t<NcActionButton @click=\"showModal = true\">\n\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t<IconCog />\n\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\tApp settings (handle only click)\n\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t</NcActions>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t\t<template #list>\n\t\t\t\t<NcAppNavigationItem v-for=\"item in items\" :key=\"item\" :name=\"item\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<IconCheck :size=\"20\" />\n\t\t\t\t\t</template>\n\t\t\t\t</NcAppNavigationItem>\n\t\t\t</template>\n\t\t\t<template #footer>\n\t\t\t\t<div class=\"navigation__footer\">\n\t\t\t\t\t<NcButton wide @click=\"showModal = true\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<IconCog />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t\tApp settings\n\t\t\t\t\t</NcButton>\n\t\t\t\t\t<NcModal v-if=\"showModal\" name=\"Modal for focus-trap check\" @close=\"showModal = false\">\n\t\t\t\t\t\t<div class=\"modal-content\">\n\t\t\t\t\t\t\t<h4>Focus-trap should be locked inside the modal</h4>\n\t\t\t\t\t\t\t<NcTextField v-model=\"modalValue\" label=\"Focus me\" />\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</NcModal>\n\t\t\t\t</div>\n\t\t\t</template>\n\t\t</NcAppNavigation>\n\t</div>\n</template>\n\n<script>\n\timport IconCheck from 'vue-material-design-icons/Check'\n\timport IconCog from 'vue-material-design-icons/Cog'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tIconCheck,\n\t\t\tIconCog,\n\t\t},\n\t\tprovide() {\n\t\t\treturn {\n\t\t\t\t'NcContent:setHasAppNavigation': () => {},\n\t\t\t}\n\t\t},\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\titems: Array.from({ length: 5 }, (v, i) => `Item ${i+1}`),\n\t\t\t\tsearchValue: '',\n\t\t\t\tmodalValue: '',\n\t\t\t\tshowModal: false,\n\t\t\t}\n\t\t},\n\t}\n</script>\n\n<style scoped>\n\t/* Mock NcContent */\n\t.styleguide-nc-content {\n\t\tposition: relative;\n\t\theight: 300px;\n\t\tbackground-color: var(--color-background-plain);\n\t\toverflow: hidden;\n\t}\n\n\t.navigation__header,\n\t.navigation__footer {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tgap: 4px;\n\t\tpadding: 4px;\n\t}\n\n\t.modal-content {\n\t\theight: 120px;\n\t\tpadding: 10px;\n\t}\n</style>\n```\n\nThe navigation bar can be open and closed from anywhere in the app using the\nnextcloud event bus.\n\n### Install the event bus package\n\n```bash\nnpm i -S @nextcloud/event-bus\n```\n\n### Usage\n\n#### Open the navigation\n\n```js static\nimport { emit } from '@nextcloud/event-bus'\nemit('toggle-navigation', {\n\topen: true,\n})\n```\n\n#### Close the navigation\n\n```js static\nimport { emit } from '@nextcloud/event-bus'\nemit('toggle-navigation', {\n\topen: false,\n})\n```\n\n</docs>\n\n<script setup lang=\"ts\">\nimport type { FocusTrap } from 'focus-trap'\nimport type { Slot } from 'vue'\n\nimport { emit, subscribe, unsubscribe } from '@nextcloud/event-bus'\nimport { createFocusTrap } from 'focus-trap'\nimport { inject, onMounted, onUnmounted, ref, useTemplateRef, warn, watch, watchEffect } from 'vue'\nimport NcAppNavigationList from '../NcAppNavigationList/NcAppNavigationList.vue'\nimport NcAppNavigationToggle from './NcAppNavigationToggle.vue'\nimport { useIsMobile } from '../../composables/useIsMobile/index.ts'\nimport { getTrapStack } from '../../utils/focusTrap.ts'\nimport { HAS_APP_NAVIGATION_KEY } from '../NcContent/constants.ts'\n\nconst props = defineProps<{\n\t/**\n\t * The aria label to describe the navigation\n\t */\n\tariaLabel?: string\n\n\t/**\n\t * aria-labelledby attribute to describe the navigation\n\t */\n\tariaLabelledby?: string\n}>()\n\ndefineSlots<{\n\t/**\n\t * The main content of the navigation.\n\t * If no list is passed to the `#list` slot, stretched vertically.\n\t */\n\tdefault?: Slot\n\t/**\n\t * Footer for e.g. `NcAppNavigationSettings`\n\t */\n\tfooter?: Slot\n\t/**\n\t * List for Navigation list items.\n\t * Stretched between the main content and the footer\n\t */\n\tlist?: Slot\n\t/**\n\t * For in-app search you can pass a `NcAppNavigationSearch` component as the slot content.\n\t */\n\tsearch?: Slot\n}>()\n\nlet focusTrap: FocusTrap\nconst setHasAppNavigation = inject(\n\tHAS_APP_NAVIGATION_KEY,\n\t() => warn('NcAppNavigation is not mounted inside NcContent, this is probably an error.'),\n\tfalse,\n)\n\nconst appNavigationContainer = useTemplateRef('app-navigation-container-key')\nconst isMobile = useIsMobile()\nconst open = ref(!isMobile.value)\n\nwatchEffect(() => {\n\tif (!props.ariaLabel && !props.ariaLabelledby) {\n\t\twarn('NcAppNavigation requires either `ariaLabel` or `ariaLabelledby` to be set for accessibility.')\n\t}\n})\n\nwatch(isMobile, () => {\n\topen.value = !isMobile.value\n})\n\nwatch(open, () => {\n\ttoggleFocusTrap()\n})\n\nonMounted(() => {\n\tsetHasAppNavigation(true)\n\tsubscribe('toggle-navigation', toggleNavigationByEventBus)\n\t// Emit an event with the initial state of the navigation\n\temit('navigation-toggled', {\n\t\topen: open.value,\n\t})\n\n\tfocusTrap = createFocusTrap(appNavigationContainer.value!, {\n\t\tallowOutsideClick: true,\n\t\tfallbackFocus: appNavigationContainer.value!,\n\t\ttrapStack: getTrapStack(),\n\t\tescapeDeactivates: false,\n\t})\n\ttoggleFocusTrap()\n})\n\nonUnmounted(() => {\n\tsetHasAppNavigation(false)\n\tunsubscribe('toggle-navigation', toggleNavigationByEventBus)\n\tfocusTrap.deactivate()\n})\n\n/**\n * Toggle the navigation\n *\n * @param state set the state instead of inverting the current one\n */\nfunction toggleNavigation(state?: boolean): void {\n\t// Early return if already in that state\n\tif (open.value === state) {\n\t\temit('navigation-toggled', {\n\t\t\topen: open.value,\n\t\t})\n\t\treturn\n\t}\n\n\topen.value = state === undefined ? !open.value : state\n\tconst bodyStyles = getComputedStyle(document.body)\n\tconst animationLength = parseInt(bodyStyles.getPropertyValue('--animation-quick')) || 100\n\n\tsetTimeout(() => {\n\t\temit('navigation-toggled', {\n\t\t\topen: open.value,\n\t\t})\n\t// We wait for 1.5 times the animation length to give the animation time to really finish.\n\t}, 1.5 * animationLength)\n}\n\n/**\n * Handler for the event-bus navigation event.\n *\n * @param context - The event bus context\n * @param context.open - The new navigation open state\n */\nfunction toggleNavigationByEventBus({ open }: { open: boolean }): void {\n\treturn toggleNavigation(open)\n}\n\n/**\n * Activate focus trap if it is currently needed, otherwise deactivate\n */\nfunction toggleFocusTrap(): void {\n\tif (isMobile.value && open.value) {\n\t\tfocusTrap.activate()\n\t} else {\n\t\tfocusTrap.deactivate()\n\t}\n}\n\n/**\n * Handle hotkey for closing the navigation.\n */\nfunction handleEsc(): void {\n\tif (isMobile.value) {\n\t\ttoggleNavigation(false)\n\t}\n}\n</script>\n\n<template>\n\t<div\n\t\tref=\"app-navigation-container-key\"\n\t\tclass=\"app-navigation\"\n\t\t:class=\"{ 'app-navigation--closed': !open }\">\n\t\t<nav\n\t\t\tid=\"app-navigation-vue\"\n\t\t\t:aria-hidden=\"open ? 'false' : 'true'\"\n\t\t\t:aria-label=\"ariaLabel || undefined\"\n\t\t\t:aria-labelledby=\"ariaLabelledby || undefined\"\n\t\t\tclass=\"app-navigation__content\"\n\t\t\t:inert=\"!open || undefined\"\n\t\t\t@keydown.esc=\"handleEsc\">\n\t\t\t<div class=\"app-navigation__search\">\n\t\t\t\t<slot name=\"search\" />\n\t\t\t</div>\n\n\t\t\t<div class=\"app-navigation__body\" :class=\"{ 'app-navigation__body--no-list': !$slots.list }\">\n\t\t\t\t<slot />\n\t\t\t</div>\n\n\t\t\t<NcAppNavigationList v-if=\"$slots.list\" class=\"app-navigation__list\">\n\t\t\t\t<slot name=\"list\" />\n\t\t\t</NcAppNavigationList>\n\n\t\t\t<slot name=\"footer\" />\n\t\t</nav>\n\t\t<NcAppNavigationToggle :open @update:open=\"toggleNavigation\" />\n\t</div>\n</template>\n\n<style lang=\"scss\">\n.app-navigation,\n.app-content {\n\t/** Distance of the app navigation toggle and the first navigation item to the top edge of the app content container */\n\t--app-navigation-padding: #{$app-navigation-padding};\n}\n</style>\n\n<style lang=\"scss\" scoped>\n.app-navigation {\n\t// Set scoped variable override\n\t// Using --color-text-maxcontrast as a fallback evaluates to an invalid value as it references itself in this scope instead of the variable defined higher up\n\t--color-text-maxcontrast: var(--color-text-maxcontrast-background-blur, var(--color-text-maxcontrast-default));\n\ttransition: transform var(--animation-quick), margin var(--animation-quick);\n\twidth: $navigation-width;\n\t// Left toggle button padding + toggle button + right padding from NcAppContent\n\t--app-navigation-max-width: calc(100vw - (var(--app-navigation-padding) + var(--default-clickable-area) + var(--default-grid-baseline)));\n\tmax-width: var(--app-navigation-max-width);\n\tposition: relative;\n\ttop: 0;\n\tinset-inline-start: 0;\n\tpadding: 0px;\n\t// Above NcAppContent\n\tz-index: 1800;\n\theight: 100%;\n\t-webkit-user-select: none;\n\t-moz-user-select: none;\n\t-ms-user-select: none;\n\tuser-select: none;\n\tflex-grow: 0;\n\tflex-shrink: 0;\n\tbackground-color: var(--color-main-background-blur, var(--color-main-background));\n\t-webkit-backdrop-filter: var(--filter-background-blur, none);\n\tbackdrop-filter: var(--filter-background-blur, none);\n\n\t&--closed {\n\t\tmargin-inline-start: calc(-1 * min($navigation-width, var(--app-navigation-max-width)));\n\t}\n\n\t&__search {\n\t\twidth: 100%;\n\t}\n\n\t&__body {\n\t\toverflow-y: scroll;\n\t}\n\n\t// For legacy purposes support passing a bare list to the content in #default slot and including #footer slot\n\t// Same styles as NcAppNavigationList\n\t&__content > ul {\n\t\tposition: relative;\n\t\twidth: 100%;\n\t\toverflow-x: hidden;\n\t\toverflow-y: auto;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t\tgap: var(--default-grid-baseline, 4px);\n\t\tpadding: var(--app-navigation-padding);\n\t}\n\n\t// Always stretch the navigation list\n\t& &__list {\n\t\theight: 100%;\n\t}\n\n\t// Stretch the main content if there is no stretched list\n\t&__body--no-list {\n\t\tflex: 1 1 auto;\n\t\toverflow: auto;\n\t\theight: 100%;\n\t}\n\n\t&__content {\n\t\theight: 100%;\n\t\tdisplay: flex;\n\t\tflex-direction: column;\n\t}\n}\n\n// Add extra border for high contrast mode\n[data-themes*=\"highcontrast\"] {\n\t.app-navigation {\n\t\tborder-inline-end: 1px solid var(--color-border);\n\t}\n}\n\n// When on mobile, we make the navigation slide over the NcAppContent\n@media only screen and (max-width: $breakpoint-mobile) {\n\t.app-navigation {\n\t\tposition: absolute;\n\t\tborder-inline-end: 1px solid var(--color-border);\n\t}\n}\n\n// Put the toggle behind NcAppSidebar on small screens\n@media only screen and (max-width: $breakpoint-small-mobile) {\n\t.app-navigation {\n\t\tz-index: 1400;\n\t}\n}\n\n</style>\n"],"names":["_useModel","_openBlock","_createElementBlock","_hoisted_1","_createVNode","_unref","open","_normalizeClass","_createElementVNode","ariaLabel","ariaLabelledby","_renderSlot","$slots","_createBlock"],"mappings":"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"}

package/dist/chunks/NcAppNavigationSearch-Cs14jpSe.mjs.map

@@ -1 +0,0 @@
-{"version":3,"file":"NcAppNavigationSearch-Cs14jpSe.mjs","sources":["../../src/components/NcAppNavigationSearch/NcAppNavigationSearch.vue"],"sourcesContent":["<!--\n  - SPDX-FileCopyrightText: 2024 Nextcloud GmbH and Nextcloud contributors\n  - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Usage\n\n```vue\n<template>\n\t<div class=\"styleguide-wrapper\">\n\t\t<NcContent app-name=\"styleguide-app-navigation\" class=\"content-styleguidist\">\n\t\t\t<NcAppNavigation>\n\t\t\t\t<template #search>\n\t\t\t\t\t<NcAppNavigationSearch v-model=\"searchQuery\">\n\t\t\t\t\t\t<template #actions>\n\t\t\t\t\t\t\t<NcActions aria-label=\"Filters\">\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconFilter :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t\t<IconAccount :size=\"20\" />\n\t\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t\tFilter by name\n\t\t\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t\t\t<NcActionButton>\n\t\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t\t<IconCalendarAccount :size=\"20\" />\n\t\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t\t\tFilter by year\n\t\t\t\t\t\t\t\t</NcActionButton>\n\t\t\t\t\t\t\t</NcActions>\n\t\t\t\t\t\t\t<NcButton aria-label=\"Search globally\" variant=\"tertiary\">\n\t\t\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t\t\t<IconSearchGlobal :size=\"20\" />\n\t\t\t\t\t\t\t\t</template>\n\t\t\t\t\t\t\t</NcButton>\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcAppNavigationSearch>\n\t\t\t\t</template>\n\t\t\t\t<template #list>\n\t\t\t\t\t<NcAppNavigationItem name=\"First navigation entry\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<IconStar :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcAppNavigationItem>\n\t\t\t\t\t<NcAppNavigationItem name=\"Second navigation entry\">\n\t\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t\t<IconStar :size=\"20\" />\n\t\t\t\t\t\t</template>\n\t\t\t\t\t</NcAppNavigationItem>\n\t\t\t\t</template>\n\t\t\t</NcAppNavigation>\n\t\t\t<NcAppContent>\n\t\t\t\t<ul class=\"fake-content\">\n\t\t\t\t\t<li>Search query: {{ searchQuery }}</li>\n\t\t\t\t\t<li v-for=\"(item, index) in items\" :key=\"index\">\n\t\t\t\t\t\t{{ item }}\n\t\t\t\t\t</li>\n\t\t\t\t</ul>\n\t\t\t</NcAppContent>\n\t\t</NcContent>\n\t</div>\n</template>\n<script>\nimport IconAccount from 'vue-material-design-icons/Account.vue'\nimport IconCalendarAccount from 'vue-material-design-icons/CalendarAccount.vue'\nimport IconFilter from 'vue-material-design-icons/Filter.vue'\nimport IconSearchGlobal from 'vue-material-design-icons/CloudSearch.vue'\nimport IconStar from 'vue-material-design-icons/Star.vue'\n\nconst exampleItem = ['Mary', 'Patricia', 'James', 'Michael']\n\nexport default {\n\tcomponents: {\n\t\tIconAccount,\n\t\tIconCalendarAccount,\n\t\tIconFilter,\n\t\tIconSearchGlobal,\n\t\tIconStar,\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\tsearchQuery: '',\n\t\t}\n\t},\n\n\tcomputed: {\n\t\titems() {\n\t\t\treturn exampleItem.filter((item) => item.toLocaleLowerCase().includes(this.searchQuery.toLocaleLowerCase()))\n\t\t},\n\t},\n}\n</script>\n<style scoped>\n/* This styles just mock NcContent and NcAppContent */\n.content-styleguidist {\n\tposition: relative !important;\n\tmargin: 0 !important;\n\t/* prevent jumping */\n\tmin-height: 200px;\n}\n\n.content-styleguidist > * {\n\theight: auto;\n}\n\n.fake-content {\n\tpadding: var(--app-navigation-padding);\n\tpadding-top: calc(2 * var(--app-navigation-padding) + var(--default-clickable-area));\n}\n\n.styleguide-wrapper {\n\tbackground-color: var(--color-background-plain);\n\tpadding: var(--body-container-margin);\n}\n</style>\n```\n</docs>\n\n<template>\n\t<div\n\t\tclass=\"app-navigation-search\"\n\t\t:class=\"{\n\t\t\t'app-navigation-search--has-actions': hasActions(),\n\t\t}\">\n\t\t<NcInputField\n\t\t\tref=\"inputElement\"\n\t\t\tv-model=\"model\"\n\t\t\t:aria-label=\"label\"\n\t\t\tclass=\"app-navigation-search__input\"\n\t\t\tlabel-outside\n\t\t\t:placeholder=\"placeholder ?? label\"\n\t\t\tshow-trailing-button\n\t\t\t:trailing-button-label=\"t('Clear search')\"\n\t\t\ttype=\"search\"\n\t\t\t@trailing-button-click=\"onCloseSearch\">\n\t\t\t<template #trailing-button-icon>\n\t\t\t\t<IconClose :size=\"20\" />\n\t\t\t</template>\n\t\t</NcInputField>\n\t\t<div\n\t\t\tv-if=\"hasActions()\"\n\t\t\tref=\"actions-container-key\"\n\t\t\tclass=\"app-navigation-search__actions\"\n\t\t\t:class=\"{\n\t\t\t\t'app-navigation-search__actions--hidden': !showActions,\n\t\t\t\t'hidden-visually': hideActions,\n\t\t\t}\">\n\t\t\t<slot name=\"actions\" />\n\t\t</div>\n\t</div>\n</template>\n\n<script setup lang=\"ts\">\nimport { useFocusWithin } from '@vueuse/core'\nimport { nextTick, ref, useSlots, useTemplateRef, watch } from 'vue'\nimport IconClose from 'vue-material-design-icons/Close.vue'\nimport NcInputField from '../NcInputField/NcInputField.vue'\nimport { t } from '../../l10n.ts'\n\n/**\n * Current search input\n */\nconst model = defineModel<string>({ default: '' })\n\ndefineProps({\n\t/**\n\t * Text used to label the search input\n\t */\n\tlabel: {\n\t\ttype: String,\n\t\tdefault: t('Search …'),\n\t},\n\n\t/**\n\t * Placeholder of the search input\n\t * By default the value of `label` is used.\n\t */\n\tplaceholder: {\n\t\ttype: String,\n\t\tdefault: null,\n\t},\n})\n\nconst slots = useSlots()\n\nconst inputElement = ref()\nconst { focused: inputHasFocus } = useFocusWithin(inputElement)\n\n/** Timeout used to define when the search input is fully expanded */\nconst transitionTimeout = Number.parseInt(window.getComputedStyle(window.document.body).getPropertyValue('--animation-quick')) || 100\n\nconst actionsContainer = useTemplateRef('actions-container-key')\nconst hasActions = () => !!slots.actions?.({})\nconst showActions = ref(true)\nconst timeoutId = ref()\n/** This is used to hide the actions after the transition is done */\nconst hideActions = ref(false)\nwatch(inputHasFocus, () => {\n\tshowActions.value = !inputHasFocus.value\n\twindow.clearTimeout(timeoutId.value)\n\tif (showActions.value) {\n\t\thideActions.value = false\n\t} else {\n\t\t// If the transition is done, we fully hide the actions visually\n\t\twindow.setTimeout(() => {\n\t\t\thideActions.value = !showActions.value\n\t\t}, transitionTimeout)\n\t}\n})\n\n/**\n * Handle close the search\n */\nfunction onCloseSearch() {\n\tmodel.value = ''\n\tif (hasActions()) {\n\t\tshowActions.value = true\n\t\tnextTick(() => actionsContainer.value?.querySelector('button')?.focus())\n\t}\n}\n</script>\n\n<style scoped lang=\"scss\">\n.app-navigation-search {\n\tdisplay: flex;\n\tgap: var(--app-navigation-padding);\n\tpadding: var(--app-navigation-padding);\n\n\t&--has-actions &__input {\n\t\tflex-grow: 1;\n\t\tz-index: 3;\n\t}\n\n\t&__actions {\n\t\tdisplay: flex;\n\t\tgap: var(--default-grid-baseline);\n\n\t\tmargin-inline-start: 0;\n\t\tmax-width: calc(2 * var(--default-clickable-area) + var(--default-grid-baseline));\n\t\tmax-height: var(--default-clickable-area);\n\n\t\ttransition: margin-inline-start var(--animation-quick);\n\n\t\t&--hidden {\n\t\t\tmargin-inline-start: calc(-1 * var(--default-clickable-area));\n\t\t}\n\t}\n}\n</style>\n"],"names":["_useModel","_createElementBlock","_createVNode","_unref","_renderSlot"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsKA,UAAM,QAAQA,SAAmB,SAAA,YAAgB;AAqBjD,UAAM,QAAQ,SAAA;AAEd,UAAM,eAAe,IAAA;AACrB,UAAM,EAAE,SAAS,kBAAkB,eAAe,YAAY;AAG9D,UAAM,oBAAoB,OAAO,SAAS,OAAO,iBAAiB,OAAO,SAAS,IAAI,EAAE,iBAAiB,mBAAmB,CAAC,KAAK;AAElI,UAAM,mBAAmB,eAAe,uBAAuB;AAC/D,UAAM,aAAa,MAAM,CAAC,CAAC,MAAM,UAAU,CAAA,CAAE;AAC7C,UAAM,cAAc,IAAI,IAAI;AAC5B,UAAM,YAAY,IAAA;AAElB,UAAM,cAAc,IAAI,KAAK;AAC7B,UAAM,eAAe,MAAM;AAC1B,kBAAY,QAAQ,CAAC,cAAc;AACnC,aAAO,aAAa,UAAU,KAAK;AACnC,UAAI,YAAY,OAAO;AACtB,oBAAY,QAAQ;AAAA,MACrB,OAAO;AAEN,eAAO,WAAW,MAAM;AACvB,sBAAY,QAAQ,CAAC,YAAY;AAAA,QAClC,GAAG,iBAAiB;AAAA,MACrB;AAAA,IACD,CAAC;AAKD,aAAS,gBAAgB;AACxB,YAAM,QAAQ;AACd,UAAI,cAAc;AACjB,oBAAY,QAAQ;AACpB,iBAAS,MAAM,iBAAiB,OAAO,cAAc,QAAQ,GAAG,OAAO;AAAA,MACxE;AAAA,IACD;;0BApGCC,mBA8BM,OAAA;AAAA,QA7BL,uBAAM,yBAAuB;AAAA,gDACsB,WAAA;AAAA,QAAU;;QAG7DC,YAce,cAAA;AAAA,mBAbV;AAAA,UAAJ,KAAI;AAAA,sBACK,MAAA;AAAA,uEAAA,MAAK,QAAA;AAAA,UACb,cAAY,QAAA;AAAA,UACb,OAAM;AAAA,UACN,iBAAA;AAAA,UACC,aAAa,QAAA,eAAe,QAAA;AAAA,UAC7B,wBAAA;AAAA,UACC,yBAAuBC,MAAA,CAAA,EAAC,cAAA;AAAA,UACzB,MAAK;AAAA,UACJ,uBAAuB;AAAA,QAAA;UACb,gCACV,MAAwB;AAAA,YAAxBD,YAAwB,WAAA,EAAZ,MAAM,IAAE;AAAA,UAAA;;;QAIf,6BADPD,mBASM,OAAA;AAAA;UAPL,KAAI;AAAA,UACJ,uBAAM,kCAAgC;AAAA,uDACmB,YAAA;AAAA,+BAAoC,YAAA;AAAA,UAAA;;UAI7FG,WAAuB,KAAA,QAAA,WAAA,CAAA,GAAA,QAAA,IAAA;AAAA,QAAA;;;;;;"}