@nextcloud/vue 9.3.2 → 9.3.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (128) hide show
  1. package/CHANGELOG.md +9 -0
  2. package/dist/assets/NcActionCheckbox-DLJQfCUI.css +127 -0
  3. package/dist/assets/NcActionRadio-Bd4RFH-l.css +127 -0
  4. package/dist/chunks/{NcActionButton-BHXE4UKQ.mjs → NcActionButton-DNXoAooH.mjs} +2 -2
  5. package/dist/chunks/{NcActionButton-BHXE4UKQ.mjs.map → NcActionButton-DNXoAooH.mjs.map} +1 -1
  6. package/dist/chunks/NcActionCheckbox-DeHAMd23.mjs +122 -0
  7. package/dist/chunks/NcActionCheckbox-DeHAMd23.mjs.map +1 -0
  8. package/dist/chunks/{NcActionInput-D1uLWx4N.mjs → NcActionInput-BemRG66_.mjs} +3 -3
  9. package/dist/chunks/{NcActionInput-D1uLWx4N.mjs.map → NcActionInput-BemRG66_.mjs.map} +1 -1
  10. package/dist/chunks/NcActionRadio-DILn0DxW.mjs +120 -0
  11. package/dist/chunks/NcActionRadio-DILn0DxW.mjs.map +1 -0
  12. package/dist/chunks/{NcActionTextEditable-DAMWWXnR.mjs → NcActionTextEditable-DL4idmon.mjs} +2 -2
  13. package/dist/chunks/{NcActionTextEditable-DAMWWXnR.mjs.map → NcActionTextEditable-DL4idmon.mjs.map} +1 -1
  14. package/dist/chunks/{NcAppContent-DFbY2ERd.mjs → NcAppContent-BTNf1r8Z.mjs} +2 -2
  15. package/dist/chunks/{NcAppContent-DFbY2ERd.mjs.map → NcAppContent-BTNf1r8Z.mjs.map} +1 -1
  16. package/dist/chunks/{NcAppNavigation-CjnufbC2.mjs → NcAppNavigation-DQB0KqoZ.mjs} +2 -2
  17. package/dist/chunks/{NcAppNavigation-CjnufbC2.mjs.map → NcAppNavigation-DQB0KqoZ.mjs.map} +1 -1
  18. package/dist/chunks/{NcAppNavigationItem-B307vBI9.mjs → NcAppNavigationItem-OrqBniiI.mjs} +2 -2
  19. package/dist/chunks/{NcAppNavigationItem-B307vBI9.mjs.map → NcAppNavigationItem-OrqBniiI.mjs.map} +1 -1
  20. package/dist/chunks/{NcAppNavigationSearch-Bi367hd4.mjs → NcAppNavigationSearch-ByuV3q2c.mjs} +2 -2
  21. package/dist/chunks/{NcAppNavigationSearch-Bi367hd4.mjs.map → NcAppNavigationSearch-ByuV3q2c.mjs.map} +1 -1
  22. package/dist/chunks/{NcAppNavigationSettings-CaTjgcVj.mjs → NcAppNavigationSettings-A0DXzd5B.mjs} +2 -2
  23. package/dist/chunks/{NcAppNavigationSettings-CaTjgcVj.mjs.map → NcAppNavigationSettings-A0DXzd5B.mjs.map} +1 -1
  24. package/dist/chunks/{NcAppSettingsDialog-NlVP7Fo7.mjs → NcAppSettingsDialog-BaN30xl4.mjs} +2 -2
  25. package/dist/chunks/{NcAppSettingsDialog-NlVP7Fo7.mjs.map → NcAppSettingsDialog-BaN30xl4.mjs.map} +1 -1
  26. package/dist/chunks/{NcAssistantButton-DqXCpiMp.mjs → NcAssistantButton-CioiSWRg.mjs} +3 -3
  27. package/dist/chunks/{NcAssistantButton-DqXCpiMp.mjs.map → NcAssistantButton-CioiSWRg.mjs.map} +1 -1
  28. package/dist/chunks/{NcAssistantIcon-PMYKxGuH.mjs → NcAssistantIcon-8pL-4h5f.mjs} +2 -2
  29. package/dist/chunks/{NcAssistantIcon-PMYKxGuH.mjs.map → NcAssistantIcon-8pL-4h5f.mjs.map} +1 -1
  30. package/dist/chunks/{NcAvatar-S8EJR2BK.mjs → NcAvatar-CK_dTsmT.mjs} +2 -2
  31. package/dist/chunks/{NcAvatar-S8EJR2BK.mjs.map → NcAvatar-CK_dTsmT.mjs.map} +1 -1
  32. package/dist/chunks/{NcBreadcrumbs-DHS31Ax7.mjs → NcBreadcrumbs-CbJmdlaF.mjs} +2 -2
  33. package/dist/chunks/{NcBreadcrumbs-DHS31Ax7.mjs.map → NcBreadcrumbs-CbJmdlaF.mjs.map} +1 -1
  34. package/dist/chunks/{NcChip-QHPd3nMF.mjs → NcChip-B8jcrLqG.mjs} +3 -3
  35. package/dist/chunks/{NcChip-QHPd3nMF.mjs.map → NcChip-B8jcrLqG.mjs.map} +1 -1
  36. package/dist/chunks/{NcCollectionList-ByFl0-ca.mjs → NcCollectionList-TB1GbWbo.mjs} +3 -3
  37. package/dist/chunks/{NcCollectionList-ByFl0-ca.mjs.map → NcCollectionList-TB1GbWbo.mjs.map} +1 -1
  38. package/dist/chunks/{NcColorPicker-DpSDaGrh.mjs → NcColorPicker-3wpX7pKD.mjs} +2 -2
  39. package/dist/chunks/{NcColorPicker-DpSDaGrh.mjs.map → NcColorPicker-3wpX7pKD.mjs.map} +1 -1
  40. package/dist/chunks/{NcDashboardWidget-CIUrPOLo.mjs → NcDashboardWidget-1tax78_e.mjs} +3 -3
  41. package/dist/chunks/{NcDashboardWidget-CIUrPOLo.mjs.map → NcDashboardWidget-1tax78_e.mjs.map} +1 -1
  42. package/dist/chunks/{NcDashboardWidgetItem-DdYM1QYk.mjs → NcDashboardWidgetItem-BjsN8uF0.mjs} +3 -3
  43. package/dist/chunks/{NcDashboardWidgetItem-DdYM1QYk.mjs.map → NcDashboardWidgetItem-BjsN8uF0.mjs.map} +1 -1
  44. package/dist/chunks/{NcDateTimePicker-DtQaoKbG.mjs → NcDateTimePicker-DCuHXZjc.mjs} +2 -2
  45. package/dist/chunks/{NcDateTimePicker-DtQaoKbG.mjs.map → NcDateTimePicker-DCuHXZjc.mjs.map} +1 -1
  46. package/dist/chunks/{NcDialog-BTmnYNeo.mjs → NcDialog-BHl_LOs_.mjs} +2 -2
  47. package/dist/chunks/{NcDialog-BTmnYNeo.mjs.map → NcDialog-BHl_LOs_.mjs.map} +1 -1
  48. package/dist/chunks/{NcEmojiPicker-U5k_zceS.mjs → NcEmojiPicker-CReazifM.mjs} +3 -3
  49. package/dist/chunks/{NcEmojiPicker-U5k_zceS.mjs.map → NcEmojiPicker-CReazifM.mjs.map} +1 -1
  50. package/dist/chunks/{NcFormBoxButton-Bptd324P.mjs → NcFormBoxButton-DvMw5yUf.mjs} +2 -2
  51. package/dist/chunks/{NcFormBoxButton-Bptd324P.mjs.map → NcFormBoxButton-DvMw5yUf.mjs.map} +1 -1
  52. package/dist/chunks/{NcFormBoxCopyButton.vue_vue_type_script_setup_true_lang-DhnfC18v.mjs → NcFormBoxCopyButton.vue_vue_type_script_setup_true_lang-DYtyXBqR.mjs} +3 -3
  53. package/dist/chunks/{NcFormBoxCopyButton.vue_vue_type_script_setup_true_lang-DhnfC18v.mjs.map → NcFormBoxCopyButton.vue_vue_type_script_setup_true_lang-DYtyXBqR.mjs.map} +1 -1
  54. package/dist/chunks/{NcInputField-D7Nv5QhT.mjs → NcInputField-Clm9jOGJ.mjs} +2 -2
  55. package/dist/chunks/{NcInputField-D7Nv5QhT.mjs.map → NcInputField-Clm9jOGJ.mjs.map} +1 -1
  56. package/dist/chunks/{NcListItemIcon-IJLXY-te.mjs → NcListItemIcon-DVy6eGJx.mjs} +2 -2
  57. package/dist/chunks/{NcListItemIcon-IJLXY-te.mjs.map → NcListItemIcon-DVy6eGJx.mjs.map} +1 -1
  58. package/dist/chunks/{NcModal-DSCYMxfe.mjs → NcModal-D00OJZV2.mjs} +2 -2
  59. package/dist/chunks/{NcModal-DSCYMxfe.mjs.map → NcModal-D00OJZV2.mjs.map} +1 -1
  60. package/dist/chunks/{NcNoteCard-BUg07N13.mjs → NcNoteCard-Cok_4Fld.mjs} +2 -2
  61. package/dist/chunks/{NcNoteCard-BUg07N13.mjs.map → NcNoteCard-Cok_4Fld.mjs.map} +1 -1
  62. package/dist/chunks/{NcPasswordField-CTuWpUWd.mjs → NcPasswordField-BOZlUwhr.mjs} +3 -3
  63. package/dist/chunks/{NcPasswordField-CTuWpUWd.mjs.map → NcPasswordField-BOZlUwhr.mjs.map} +1 -1
  64. package/dist/chunks/{NcRichContenteditable-Bq1NOBCE.mjs → NcRichContenteditable-B-w64JsT.mjs} +6 -6
  65. package/dist/chunks/{NcRichContenteditable-Bq1NOBCE.mjs.map → NcRichContenteditable-B-w64JsT.mjs.map} +1 -1
  66. package/dist/chunks/{NcRichText-B6VwyPUp.mjs → NcRichText-1U5RXjPL.mjs} +3 -3
  67. package/dist/chunks/{NcRichText-B6VwyPUp.mjs.map → NcRichText-1U5RXjPL.mjs.map} +1 -1
  68. package/dist/chunks/{NcSelectUsers-CiTKYuOb.mjs → NcSelectUsers-DlUM6S6l.mjs} +2 -2
  69. package/dist/chunks/{NcSelectUsers-CiTKYuOb.mjs.map → NcSelectUsers-DlUM6S6l.mjs.map} +1 -1
  70. package/dist/chunks/{NcTextArea-2CifgNom.mjs → NcTextArea-PIs9Kt0A.mjs} +2 -2
  71. package/dist/chunks/{NcTextArea-2CifgNom.mjs.map → NcTextArea-PIs9Kt0A.mjs.map} +1 -1
  72. package/dist/chunks/{NcTextField.vue_vue_type_script_setup_true_lang-BfjSL2EJ.mjs → NcTextField.vue_vue_type_script_setup_true_lang-CCsZqnkM.mjs} +3 -3
  73. package/dist/chunks/{NcTextField.vue_vue_type_script_setup_true_lang-BfjSL2EJ.mjs.map → NcTextField.vue_vue_type_script_setup_true_lang-CCsZqnkM.mjs.map} +1 -1
  74. package/dist/chunks/{NcUserBubble-CiB-Lu5C.mjs → NcUserBubble-Cs84CNHz.mjs} +2 -2
  75. package/dist/chunks/{NcUserBubble-CiB-Lu5C.mjs.map → NcUserBubble-Cs84CNHz.mjs.map} +1 -1
  76. package/dist/chunks/{mdi-DvQxv1t7.mjs → mdi-CpchYUUV.mjs} +33 -25
  77. package/dist/chunks/{mdi-DvQxv1t7.mjs.map → mdi-CpchYUUV.mjs.map} +1 -1
  78. package/dist/chunks/{referencePickerModal-CDHqLZC-.mjs → referencePickerModal-CXAtbcPd.mjs} +3 -3
  79. package/dist/chunks/{referencePickerModal-CDHqLZC-.mjs.map → referencePickerModal-CXAtbcPd.mjs.map} +1 -1
  80. package/dist/chunks/{useCopy-D3yAxBJi.mjs → useCopy-D4CcMqlA.mjs} +2 -2
  81. package/dist/chunks/{useCopy-D3yAxBJi.mjs.map → useCopy-D4CcMqlA.mjs.map} +1 -1
  82. package/dist/components/NcActionButton/index.mjs +1 -1
  83. package/dist/components/NcActionCheckbox/NcActionCheckbox.vue.d.ts +27 -16
  84. package/dist/components/NcActionCheckbox/index.mjs +1 -1
  85. package/dist/components/NcActionInput/index.mjs +1 -1
  86. package/dist/components/NcActionRadio/NcActionRadio.vue.d.ts +26 -17
  87. package/dist/components/NcActionRadio/index.mjs +1 -1
  88. package/dist/components/NcActionTextEditable/index.mjs +1 -1
  89. package/dist/components/NcAppContent/index.mjs +1 -1
  90. package/dist/components/NcAppNavigation/index.mjs +1 -1
  91. package/dist/components/NcAppNavigationItem/index.mjs +1 -1
  92. package/dist/components/NcAppNavigationSearch/index.mjs +1 -1
  93. package/dist/components/NcAppNavigationSettings/index.mjs +1 -1
  94. package/dist/components/NcAppSettingsDialog/index.mjs +1 -1
  95. package/dist/components/NcAssistantButton/index.mjs +1 -1
  96. package/dist/components/NcAssistantIcon/index.mjs +1 -1
  97. package/dist/components/NcAvatar/index.mjs +1 -1
  98. package/dist/components/NcBreadcrumbs/index.mjs +1 -1
  99. package/dist/components/NcChip/index.mjs +1 -1
  100. package/dist/components/NcCollectionList/index.mjs +1 -1
  101. package/dist/components/NcColorPicker/index.mjs +1 -1
  102. package/dist/components/NcDashboardWidget/index.mjs +1 -1
  103. package/dist/components/NcDashboardWidgetItem/index.mjs +1 -1
  104. package/dist/components/NcDateTimePicker/index.mjs +1 -1
  105. package/dist/components/NcDialog/index.mjs +1 -1
  106. package/dist/components/NcEmojiPicker/index.mjs +1 -1
  107. package/dist/components/NcFormBoxButton/index.mjs +1 -1
  108. package/dist/components/NcFormBoxCopyButton/index.mjs +1 -1
  109. package/dist/components/NcInputField/index.mjs +1 -1
  110. package/dist/components/NcListItemIcon/index.mjs +1 -1
  111. package/dist/components/NcModal/index.mjs +1 -1
  112. package/dist/components/NcNoteCard/index.mjs +1 -1
  113. package/dist/components/NcPasswordField/index.mjs +1 -1
  114. package/dist/components/NcRichContenteditable/index.mjs +1 -1
  115. package/dist/components/NcRichText/index.mjs +3 -3
  116. package/dist/components/NcSelectUsers/index.mjs +1 -1
  117. package/dist/components/NcTextArea/index.mjs +1 -1
  118. package/dist/components/NcTextField/index.mjs +1 -1
  119. package/dist/components/NcUserBubble/index.mjs +1 -1
  120. package/dist/functions/reference/index.mjs +1 -1
  121. package/dist/index.mjs +37 -37
  122. package/package.json +2 -2
  123. package/dist/assets/NcActionCheckbox-BeT6fCCy.css +0 -80
  124. package/dist/assets/NcActionRadio-DgdLD238.css +0 -79
  125. package/dist/chunks/NcActionCheckbox-BTHrh-Mu.mjs +0 -127
  126. package/dist/chunks/NcActionCheckbox-BTHrh-Mu.mjs.map +0 -1
  127. package/dist/chunks/NcActionRadio-BM24rDbc.mjs +0 -136
  128. package/dist/chunks/NcActionRadio-BM24rDbc.mjs.map +0 -1
@@ -1,6 +1,6 @@
1
1
  import '../assets/NcSelectUsers-BWhtNRbI.css';
2
2
  import { defineComponent, mergeModels, useModel, ref, watch, createBlock, openBlock, unref, mergeProps, withCtx, createVNode } from "vue";
3
- import { N as NcListItemIcon } from "./NcListItemIcon-IJLXY-te.mjs";
3
+ import { N as NcListItemIcon } from "./NcListItemIcon-DVy6eGJx.mjs";
4
4
  import { N as NcSelect } from "./NcSelect-Cc9_a8nG.mjs";
5
5
  import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
6
6
  const _sfc_main = /* @__PURE__ */ defineComponent({
@@ -73,4 +73,4 @@ const NcSelectUsers = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "dat
73
73
  export {
74
74
  NcSelectUsers as N
75
75
  };
76
- //# sourceMappingURL=NcSelectUsers-CiTKYuOb.mjs.map
76
+ //# sourceMappingURL=NcSelectUsers-DlUM6S6l.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"NcSelectUsers-CiTKYuOb.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'\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\n/**\n * Currently selected value.\n * The `v-model` directive may be used for two-way data binding.\n *\n * If the `multiple` property is set then an array of users is emitted,\n * otherwise a single user data object will be emitted.\n */\nconst modelValue = defineModel<IUserData | IUserData[]>('modelValue')\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\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\n\t\tv-model=\"modelValue\"\n\t\tclass=\"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<template #option=\"option\">\n\t\t\t<NcListItemIcon\n\t\t\t\tv-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\n\t\t\t\tv-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","_openBlock","_createBlock","_unref","_mergeProps","$props","_withCtx","_createVNode"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA6NA,UAAM,aAAaA,SAAoC,SAAC,YAAY;AAuFpE,UAAM,OAAO;AAQb,UAAM,SAAS,IAAI,EAAE;AACrB,UAAM,QAAQ,MAAM,KAAK,UAAU,OAAO,KAAK,CAAC;AAGhD,UAAM,gBAAgB,OAAO,SAAS,OAAO,iBAAiB,SAAS,IAAI,EAAE,iBAAiB,0BAA0B,CAAC;AACzH,UAAM,eAAe,OAAO,SAAS,OAAO,iBAAiB,SAAS,IAAI,EAAE,iBAAiB,yBAAyB,CAAC;AACvH,UAAM,aAAa,gBAAgB,IAAI;AAUvC,aAAS,SAAS,QAA8B,OAAeC,SAAgB;AAE9E,YAAM,iBAAiB;AAEvB,YAAM,QAAQA,QAAO,MAAM,cAAc;AACzC,YAAM,UAAU,OAAO,SAAS,kBAAA,KAAuB;AACvD,aAAQ,SAAS,QAAQ,QAAQ,MAAM,CAAC,EAAG,kBAAA,CAAmB,IAAI,MAC7D,GAAG,KAAK,IAAI,OAAO,OAAO,GAC5B,oBACA,QAAQA,QAAO,kBAAA,CAAmB,IAAI;AAAA,IAC1C;;AAIC,aAAAC,aAAAC,YAsBWC,iBAtBXC,WAsBW;AAAA,oBArBD,WAAA;AAAA,qEAAA,WAAU,QAAA;AAAA,QACnB,OAAM;AAAA,MAAA,GACEC,KAAAA,QAAM;AAAA,QACb,aAAA;AAAA,QACD,OAAM;AAAA,QACL,UAAM,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAE,OAAA,QAAS;AAAA,MAAA;QACP,QAAMC,QAChB,CAIW,WALa;AAAA,UACxBC,YAIWJ,MAAA,cAAA,GAJXC,WAIW,QAHI;AAAA,YACb,eAAa;AAAA,YACb,MAAM,OAAO;AAAA,YACb,QAAA,OAAA;AAAA,UAAA;;QAEQ,mBAAeE,QACzB,CAKW,mBAN8B;AAAA,UACzCC,YAKWJ,MAAA,cAAA,GALXC,WAKW,gBAJY;AAAA,YACrB,eAAA;AAAA,YACA,MAAM,eAAe;AAAA,YACtB,aAAA;AAAA,YACC,QAAA,OAAA;AAAA,UAAA;;;;;;;;"}
1
+ {"version":3,"file":"NcSelectUsers-DlUM6S6l.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'\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\n/**\n * Currently selected value.\n * The `v-model` directive may be used for two-way data binding.\n *\n * If the `multiple` property is set then an array of users is emitted,\n * otherwise a single user data object will be emitted.\n */\nconst modelValue = defineModel<IUserData | IUserData[]>('modelValue')\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\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\n\t\tv-model=\"modelValue\"\n\t\tclass=\"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<template #option=\"option\">\n\t\t\t<NcListItemIcon\n\t\t\t\tv-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\n\t\t\t\tv-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","_openBlock","_createBlock","_unref","_mergeProps","$props","_withCtx","_createVNode"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;AA6NA,UAAM,aAAaA,SAAoC,SAAC,YAAY;AAuFpE,UAAM,OAAO;AAQb,UAAM,SAAS,IAAI,EAAE;AACrB,UAAM,QAAQ,MAAM,KAAK,UAAU,OAAO,KAAK,CAAC;AAGhD,UAAM,gBAAgB,OAAO,SAAS,OAAO,iBAAiB,SAAS,IAAI,EAAE,iBAAiB,0BAA0B,CAAC;AACzH,UAAM,eAAe,OAAO,SAAS,OAAO,iBAAiB,SAAS,IAAI,EAAE,iBAAiB,yBAAyB,CAAC;AACvH,UAAM,aAAa,gBAAgB,IAAI;AAUvC,aAAS,SAAS,QAA8B,OAAeC,SAAgB;AAE9E,YAAM,iBAAiB;AAEvB,YAAM,QAAQA,QAAO,MAAM,cAAc;AACzC,YAAM,UAAU,OAAO,SAAS,kBAAA,KAAuB;AACvD,aAAQ,SAAS,QAAQ,QAAQ,MAAM,CAAC,EAAG,kBAAA,CAAmB,IAAI,MAC7D,GAAG,KAAK,IAAI,OAAO,OAAO,GAC5B,oBACA,QAAQA,QAAO,kBAAA,CAAmB,IAAI;AAAA,IAC1C;;AAIC,aAAAC,aAAAC,YAsBWC,iBAtBXC,WAsBW;AAAA,oBArBD,WAAA;AAAA,qEAAA,WAAU,QAAA;AAAA,QACnB,OAAM;AAAA,MAAA,GACEC,KAAAA,QAAM;AAAA,QACb,aAAA;AAAA,QACD,OAAM;AAAA,QACL,UAAM,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAE,OAAA,QAAS;AAAA,MAAA;QACP,QAAMC,QAChB,CAIW,WALa;AAAA,UACxBC,YAIWJ,MAAA,cAAA,GAJXC,WAIW,QAHI;AAAA,YACb,eAAa;AAAA,YACb,MAAM,OAAO;AAAA,YACb,QAAA,OAAA;AAAA,UAAA;;QAEQ,mBAAeE,QACzB,CAKW,mBAN8B;AAAA,UACzCC,YAKWJ,MAAA,cAAA,GALXC,WAKW,gBAJY;AAAA,YACrB,eAAA;AAAA,YACA,MAAM,eAAe;AAAA,YACtB,aAAA;AAAA,YACC,QAAA,OAAA;AAAA,UAAA;;;;;;;;"}
@@ -1,6 +1,6 @@
1
1
  import '../assets/NcTextArea-nivEqHE-.css';
2
2
  import { defineComponent, mergeModels, useModel, useAttrs, useTemplateRef, computed, watch, createElementBlock, openBlock, normalizeClass, unref, createElementVNode, createCommentVNode, mergeProps, toDisplayString, createBlock, createTextVNode } from "vue";
3
- import { d as mdiCheck, f as mdiAlertCircleOutline } from "./mdi-DvQxv1t7.mjs";
3
+ import { d as mdiCheck, j as mdiAlertCircleOutline } from "./mdi-CpchYUUV.mjs";
4
4
  import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-BvLanNaW.mjs";
5
5
  import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
6
6
  import { i as isLegacy } from "./legacy-DcjXBL_t.mjs";
@@ -130,4 +130,4 @@ const NcTextArea = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v
130
130
  export {
131
131
  NcTextArea as N
132
132
  };
133
- //# sourceMappingURL=NcTextArea-2CifgNom.mjs.map
133
+ //# sourceMappingURL=NcTextArea-PIs9Kt0A.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"NcTextArea-2CifgNom.mjs","sources":["../../src/components/NcTextArea/NcTextArea.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Description\n\nThis component is a textarea field.\nIt extends and styles an HTMLTextAreaElement.\n\n```\n<template>\n\t<div class=\"wrapper\">\n\t\t<NcTextArea v-model=\"text\"\n\t\t\tlabel=\"Text area\"\n\t\t\tplaceholder=\"Placeholders are possible\"\n\t\t\thelper-text=\"This is a regular helper text.\" />\n\t\t<NcTextArea label=\"Success state\"\n\t\t\t:success=\"true\" />\n\t\t<NcTextArea label=\"Error state\"\n\t\t\tplaceholder=\"Enter something valid\"\n\t\t\thelper-text=\"Helper texts will be styled accordingly.\"\n\t\t\t:error=\"true\" />\n\t\t<NcTextArea label=\"Disabled\"\n\t\t\t:disabled=\"true\" />\n\t\t<NcTextArea label=\"Disabled + Success\"\n\t\t\t:success=\"true\"\n\t\t\t:disabled=\"true\" />\n\t\t<div class=\"external-label\">\n\t\t\t<label for=\"textField\">External label</label>\n\t\t\t<NcTextArea id=\"textField\"\n\t\t\t\t:label-outside=\"true\"\n\t\t\t\tplaceholder=\"Text area with external label\" />\n\t\t</div>\n\t\t<NcTextArea label=\"Custom size and no resize\"\n\t\t\tresize=\"none\"\n\t\t\trows=\"5\" />\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttext: 'This is text.',\n\t\t}\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.wrapper {\n\tdisplay: flex;\n\tgap: 4px;\n\talign-items: flex-end;\n\tflex-wrap: wrap;\n}\n\n.external-label {\n\tdisplay: flex;\n\twidth: 100%;\n\talign-items: center;\n\tgap: 14px;\n\n\t> label {\n\t\tflex-shrink: 0;\n\t}\n}\n</style>\n```\n</docs>\n\n<script setup lang=\"ts\">\nimport type { VueClassType } from '../../utils/VueTypes.ts'\n\nimport { mdiAlertCircleOutline, mdiCheck } from '@mdi/js'\nimport { computed, useAttrs, useTemplateRef, watch } from 'vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { isLegacy } from '../../utils/legacy.ts'\nimport { logger } from '../../utils/logger.ts'\n\ndefineOptions({ inheritAttrs: false })\n\n/**\n * The value of the text area\n */\nconst modelValue = defineModel<string>({ required: true })\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * Disable the text area\n\t */\n\tdisabled?: boolean\n\n\t/**\n\t * Toggles the error state of the component.\n\t * Adds an error icon.\n\t */\n\terror?: boolean\n\n\t/**\n\t * Additional helper text message\n\t *\n\t * This will be displayed beneath the input field. In case the field is\n\t * also marked as having an error, the text will be displayed in red.\n\t */\n\thelperText?: string\n\n\t/**\n\t * The id of the textarea element\n\t */\n\tid?: string\n\n\t/**\n\t * Class to add to the `<textarea>` element.\n\t */\n\tinputClass?: VueClassType\n\n\t/**\n\t * The input label, always provide one for accessibility purposes.\n\t * On Nextcloud before version 32 this will also be used as a placeholder\n\t * unless the placeholder prop is populated with a different string.\n\t */\n\tlabel?: string\n\n\t/**\n\t * Pass in true if you want to use an external label. This is useful\n\t * if you need a label that looks different from the one provided by\n\t * this component\n\t */\n\tlabelOutside?: boolean\n\n\t/**\n\t * The placeholder of the input.\n\t * On Nextcloud before 32 this defaults to the value of the `label` prop.\n\t */\n\tplaceholder?: string\n\n\t/**\n\t * The resize CSS property sets whether an element is resizable, and if\n\t * so, in which directions.\n\t */\n\tresize?: 'both' | 'vertical' | 'horizontal' | 'none'\n\n\t/**\n\t * Toggles the success state of the component.\n\t * Adds a checkmark icon.\n\t */\n\tsuccess?: boolean\n}>(), {\n\thelperText: undefined,\n\tid: () => createElementId(),\n\tinputClass: '',\n\tlabel: undefined,\n\tplaceholder: undefined,\n\tresize: 'both',\n})\n\ndefineExpose({\n\tfocus,\n\tselect,\n})\n\nconst attrs = useAttrs()\n\n/**\n * The native text area component instance\n */\nconst textAreaElement = useTemplateRef('input')\n\nconst internalPlaceholder = computed(() => props.placeholder || (isLegacy ? props.label : undefined))\n\n// warn about invalid labels (missing label and no label outside)\nwatch(() => props.labelOutside, () => {\n\tif (!props.labelOutside && !props.label) {\n\t\tlogger.warn('[NcTextArea] You need to add a label to the NcInputField component. Either use the prop label or use an external one, as per the example in the documentation.')\n\t}\n})\n\nconst ariaDescribedby = computed(() => {\n\tconst ariaDescribedby: string[] = []\n\tif (props.helperText) {\n\t\tariaDescribedby.push(`${props.id}-helper-text`)\n\t}\n\tif (typeof attrs['aria-describedby'] === 'string') {\n\t\tariaDescribedby.push(attrs['aria-describedby'])\n\t}\n\treturn ariaDescribedby.join(' ') || undefined\n})\n\n/**\n * Update the model value to the text area value.\n *\n * @param event - The input event\n */\nfunction handleInput(event: Event) {\n\tconst { value } = event.target as HTMLTextAreaElement\n\tmodelValue.value = value\n}\n\n/**\n * Focus the input element\n *\n * @param options - Focus options\n * @public\n */\nfunction focus(options?: FocusOptions) {\n\ttextAreaElement.value!.focus(options)\n}\n\n/**\n * Select all the text in the input\n *\n * @public\n */\nfunction select() {\n\ttextAreaElement.value!.select()\n}\n</script>\n\n<template>\n\t<div\n\t\tclass=\"textarea\"\n\t\t:class=\"[\n\t\t\t$attrs.class,\n\t\t\t{\n\t\t\t\t'textarea--disabled': disabled,\n\t\t\t\t'textarea--legacy': isLegacy,\n\t\t\t},\n\t\t]\">\n\t\t<div class=\"textarea__main-wrapper\">\n\t\t\t<textarea\n\t\t\t\tv-bind=\"{ ...$attrs, class: undefined }\"\n\t\t\t\t:id\n\t\t\t\tref=\"input\"\n\t\t\t\t:aria-describedby\n\t\t\t\taria-live=\"polite\"\n\t\t\t\tclass=\"textarea__input\"\n\t\t\t\t:class=\"[\n\t\t\t\t\tinputClass,\n\t\t\t\t\t{\n\t\t\t\t\t\t'textarea__input--label-outside': labelOutside,\n\t\t\t\t\t\t'textarea__input--legacy': isLegacy,\n\t\t\t\t\t\t'textarea__input--success': success,\n\t\t\t\t\t\t'textarea__input--error': error,\n\t\t\t\t\t},\n\t\t\t\t]\"\n\t\t\t\t:disabled\n\t\t\t\t:placeholder=\"internalPlaceholder\"\n\t\t\t\t:style=\"{ resize }\"\n\t\t\t\t:value=\"modelValue\"\n\t\t\t\t@input=\"handleInput\" />\n\t\t\t<!-- Label -->\n\t\t\t<label\n\t\t\t\tv-if=\"!labelOutside\"\n\t\t\t\tclass=\"textarea__label\"\n\t\t\t\t:for=\"id\">\n\t\t\t\t{{ label }}\n\t\t\t</label>\n\t\t</div>\n\t\t<p\n\t\t\tv-if=\"helperText\"\n\t\t\t:id=\"`${id}-helper-text`\"\n\t\t\tclass=\"textarea__helper-text-message\"\n\t\t\t:class=\"{\n\t\t\t\t'textarea__helper-text-message--error': error,\n\t\t\t\t'textarea__helper-text-message--success': success,\n\t\t\t}\">\n\t\t\t<NcIconSvgWrapper\n\t\t\t\tv-if=\"success\"\n\t\t\t\tclass=\"textarea__helper-text-message__icon\"\n\t\t\t\t:path=\"mdiCheck\"\n\t\t\t\tinline />\n\t\t\t<NcIconSvgWrapper\n\t\t\t\tv-else-if=\"error\"\n\t\t\t\tclass=\"textarea__helper-text-message__icon\"\n\t\t\t\t:path=\"mdiAlertCircleOutline\"\n\t\t\t\tinline />\n\t\t\t{{ helperText }}\n\t\t</p>\n\t</div>\n</template>\n\n<style lang=\"scss\" scoped>\n@use '../../assets/input-border.scss' as border;\n\n.textarea {\n\t--input-border-color: var(--color-border-maxcontrast);\n\t--input-border-width-offset: calc(var(--border-width-input-focused, 2px) - var(--border-width-input, 2px));\n\tposition: relative;\n\twidth: 100%;\n\tborder-radius: var(--border-radius-element);\n\tmargin-block-start: 6px; // for the label in active state\n\tresize: vertical;\n\n\t&--disabled {\n\t\topacity: 0.7;\n\t\tfilter: saturate(0.7);\n\t}\n\n\t&__main-wrapper {\n\t\theight: calc(var(--default-clickable-area) * 2);\n\t\tpadding: var(--border-width-input-focused, 2px);\n\t\tposition: relative;\n\t}\n\n\t&__input {\n\t\tmargin: 0;\n\t\tpadding-block: var(--border-radius-element);\n\t\tpadding-inline: 10px; // align with label 8px margin label + 4px padding label - 2px border input\n\t\twidth: 100%;\n\t\tfont-size: var(--default-font-size);\n\t\ttext-overflow: ellipsis;\n\t\tcursor: pointer;\n\n\t\tbackground-color: var(--color-main-background);\n\t\tcolor: var(--color-main-text);\n\t\t@include border.inputBorder('.textarea--legacy', var(--input-border-color));\n\n\t\t&:active:not([disabled]),\n\t\t&:focus:not([disabled]) {\n\t\t\t--input-border-width-offset: 0px;\n\t\t\t--input-border-color: var(--color-main-text);\n\t\t}\n\n\t\t// Hide placeholder while not focussed -> show label instead (only if internal label is used)\n\t\t&:not(:focus,&--label-outside)::placeholder {\n\t\t\topacity: 0;\n\t\t}\n\n\t\t&:focus {\n\t\t\tcursor: text;\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: default;\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbox-shadow: unset !important; // Override server rules\n\t\t}\n\n\t\t&--success {\n\t\t\t--input-border-color: var(--color-border-success, var(--color-success)) !important; //Override hover border color\n\t\t\t&:focus-visible {\n\t\t\t\tbox-shadow: rgb(248, 250, 252) 0px 0px 0px 2px, var(--color-primary-element) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px\n\t\t\t}\n\t\t}\n\n\t\t&--error {\n\t\t\t--input-border-color: var(--color-border-error, var(--color-error)) !important; //Override hover border color\n\t\t\t&:focus-visible {\n\t\t\t\tbox-shadow: rgb(248, 250, 252) 0px 0px 0px 2px, var(--color-primary-element) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px\n\t\t\t}\n\t\t}\n\t}\n\n\t&__label {\n\t\tposition: absolute;\n\t\tmargin-inline: 12px 0;\n\t\tmax-width: fit-content;\n\t\tinset-block-start: 11px;\n\t\tinset-inline: 0;\n\t\t// Fix color so that users do not think the input already has content\n\t\tcolor: var(--color-text-maxcontrast);\n\t\t// only one line labels are allowed\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\t// forward events to input\n\t\tpointer-events: none;\n\t\t// Position transition\n\t\ttransition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick), background-color var(--animation-quick) var(--animation-slow);\n\t}\n\n\t&__input:focus + &__label,\n\t&__input:not(:placeholder-shown) + &__label {\n\t\tinset-block-start: -10px;\n\t\tline-height: 1.5; // minimum allowed line height for accessibility\n\t\tfont-size: 13px; // minimum allowed font size for accessibility\n\t\tfont-weight: 500;\n\t\tcolor: var(--color-main-text);\n\t\tbackground-color: var(--color-main-background);\n\t\tpadding-inline: 4px;\n\t\tmargin-inline-start: 8px;\n\n\t\ttransition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick);\n\t}\n\n\t&__helper-text-message {\n\t\tpadding-block: 4px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\n\t\t&__icon {\n\t\t\tmargin-inline-end: 8px;\n\t\t}\n\n\t\t&--error {\n\t\t\tcolor: var(--color-error-text);\n\t\t}\n\n\t\t&--success {\n\t\t\tcolor: var(--color-success-text);\n\t\t}\n\t}\n}\n</style>\n"],"names":["_useModel","ariaDescribedby","_createElementBlock","$attrs","disabled","_unref","_createElementVNode","_mergeProps","id","inputClass","labelOutside","success","error","resize","label","helperText","_createBlock","_createTextVNode"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwFA,UAAM,aAAaA,SAAmB,SAAA,YAAmB;AAEzD,UAAM,QAAQ;AAsEd,aAAa;AAAA,MACZ;AAAA,MACA;AAAA,IAAA,CACA;AAED,UAAM,QAAQ,SAAA;AAKd,UAAM,kBAAkB,eAAe,OAAO;AAE9C,UAAM,sBAAsB,SAAS,MAAM,MAAM,gBAAgB,WAAW,MAAM,QAAQ,OAAU;AAGpG,UAAM,MAAM,MAAM,cAAc,MAAM;AACrC,UAAI,CAAC,MAAM,gBAAgB,CAAC,MAAM,OAAO;AACxC,eAAO,KAAK,gKAAgK;AAAA,MAC7K;AAAA,IACD,CAAC;AAED,UAAM,kBAAkB,SAAS,MAAM;AACtC,YAAMC,mBAA4B,CAAA;AAClC,UAAI,MAAM,YAAY;AACrBA,yBAAgB,KAAK,GAAG,MAAM,EAAE,cAAc;AAAA,MAC/C;AACA,UAAI,OAAO,MAAM,kBAAkB,MAAM,UAAU;AAClDA,yBAAgB,KAAK,MAAM,kBAAkB,CAAC;AAAA,MAC/C;AACA,aAAOA,iBAAgB,KAAK,GAAG,KAAK;AAAA,IACrC,CAAC;AAOD,aAAS,YAAY,OAAc;AAClC,YAAM,EAAE,UAAU,MAAM;AACxB,iBAAW,QAAQ;AAAA,IACpB;AAQA,aAAS,MAAM,SAAwB;AACtC,sBAAgB,MAAO,MAAM,OAAO;AAAA,IACrC;AAOA,aAAS,SAAS;AACjB,sBAAgB,MAAO,OAAA;AAAA,IACxB;;0BAICC,mBA2DM,OAAA;AAAA,QA1DL,uBAAM,YAAU;AAAA,UACHC,KAAAA,OAAO;AAAA;kCAAsCC,KAAAA;AAAAA,gCAAkCC,MAAA,QAAA;AAAA,UAAA;AAAA;;QAO5FC,mBA6BM,OA7BN,YA6BM;AAAA,UA5BLA,mBAoBwB,YApBxBC,WAoBwB,EAAA,GAnBVJ,KAAAA,eAAe,UAAS;AAAA,YACpC,IAAAK,KAAAA;AAAAA,YACD,KAAI;AAAA,YACH,oBAAA,gBAAA;AAAA,YACD,aAAU;AAAA,YACV,QAAM,mBAAiB;AAAA,cACRC,KAAAA;AAAAA;kDAA2DC,KAAAA;AAAAA,2CAA+CL,MAAA,QAAA;AAAA,4CAA4CM,KAAAA;AAAAA,0CAAyCC,KAAAA;AAAAA,cAAAA;AAAAA;YAS7M,UAAAR,KAAAA;AAAAA,YACA,aAAa,oBAAA;AAAA,YACb,iBAASS,KAAAA,OAAAA;AAAAA,YACT,OAAO,WAAA;AAAA,YACP,SAAO;AAAA,UAAA;WAGDH,KAAAA,6BADRR,mBAKQ,SAAA;AAAA;YAHP,OAAM;AAAA,YACL,KAAKM,KAAAA;AAAAA,UAAAA,mBACHM,KAAAA,KAAK,GAAA,GAAA,UAAA;;QAIHC,KAAAA,2BADPb,mBAmBI,KAAA;AAAA;UAjBF,OAAOM,KAAAA,EAAE;AAAA,UACV,uBAAM,iCAA+B;AAAA,oDACiBI,KAAAA;AAAAA,sDAAqDD,KAAAA;AAAAA,UAAAA;;UAKpGA,KAAAA,wBADPK,YAIU,kBAAA;AAAA;YAFT,OAAM;AAAA,YACL,MAAMX,MAAA,QAAA;AAAA,YACP,QAAA;AAAA,UAAA,yBAEWO,KAAAA,sBADZI,YAIU,kBAAA;AAAA;YAFT,OAAM;AAAA,YACL,MAAMX,MAAA,qBAAA;AAAA,YACP,QAAA;AAAA,UAAA;UAASY,gBAAA,sBACPF,KAAAA,UAAU,GAAA,CAAA;AAAA,QAAA;;;;;;"}
1
+ {"version":3,"file":"NcTextArea-PIs9Kt0A.mjs","sources":["../../src/components/NcTextArea/NcTextArea.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2023 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Description\n\nThis component is a textarea field.\nIt extends and styles an HTMLTextAreaElement.\n\n```\n<template>\n\t<div class=\"wrapper\">\n\t\t<NcTextArea v-model=\"text\"\n\t\t\tlabel=\"Text area\"\n\t\t\tplaceholder=\"Placeholders are possible\"\n\t\t\thelper-text=\"This is a regular helper text.\" />\n\t\t<NcTextArea label=\"Success state\"\n\t\t\t:success=\"true\" />\n\t\t<NcTextArea label=\"Error state\"\n\t\t\tplaceholder=\"Enter something valid\"\n\t\t\thelper-text=\"Helper texts will be styled accordingly.\"\n\t\t\t:error=\"true\" />\n\t\t<NcTextArea label=\"Disabled\"\n\t\t\t:disabled=\"true\" />\n\t\t<NcTextArea label=\"Disabled + Success\"\n\t\t\t:success=\"true\"\n\t\t\t:disabled=\"true\" />\n\t\t<div class=\"external-label\">\n\t\t\t<label for=\"textField\">External label</label>\n\t\t\t<NcTextArea id=\"textField\"\n\t\t\t\t:label-outside=\"true\"\n\t\t\t\tplaceholder=\"Text area with external label\" />\n\t\t</div>\n\t\t<NcTextArea label=\"Custom size and no resize\"\n\t\t\tresize=\"none\"\n\t\t\trows=\"5\" />\n\t</div>\n</template>\n\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttext: 'This is text.',\n\t\t}\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n.wrapper {\n\tdisplay: flex;\n\tgap: 4px;\n\talign-items: flex-end;\n\tflex-wrap: wrap;\n}\n\n.external-label {\n\tdisplay: flex;\n\twidth: 100%;\n\talign-items: center;\n\tgap: 14px;\n\n\t> label {\n\t\tflex-shrink: 0;\n\t}\n}\n</style>\n```\n</docs>\n\n<script setup lang=\"ts\">\nimport type { VueClassType } from '../../utils/VueTypes.ts'\n\nimport { mdiAlertCircleOutline, mdiCheck } from '@mdi/js'\nimport { computed, useAttrs, useTemplateRef, watch } from 'vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { isLegacy } from '../../utils/legacy.ts'\nimport { logger } from '../../utils/logger.ts'\n\ndefineOptions({ inheritAttrs: false })\n\n/**\n * The value of the text area\n */\nconst modelValue = defineModel<string>({ required: true })\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * Disable the text area\n\t */\n\tdisabled?: boolean\n\n\t/**\n\t * Toggles the error state of the component.\n\t * Adds an error icon.\n\t */\n\terror?: boolean\n\n\t/**\n\t * Additional helper text message\n\t *\n\t * This will be displayed beneath the input field. In case the field is\n\t * also marked as having an error, the text will be displayed in red.\n\t */\n\thelperText?: string\n\n\t/**\n\t * The id of the textarea element\n\t */\n\tid?: string\n\n\t/**\n\t * Class to add to the `<textarea>` element.\n\t */\n\tinputClass?: VueClassType\n\n\t/**\n\t * The input label, always provide one for accessibility purposes.\n\t * On Nextcloud before version 32 this will also be used as a placeholder\n\t * unless the placeholder prop is populated with a different string.\n\t */\n\tlabel?: string\n\n\t/**\n\t * Pass in true if you want to use an external label. This is useful\n\t * if you need a label that looks different from the one provided by\n\t * this component\n\t */\n\tlabelOutside?: boolean\n\n\t/**\n\t * The placeholder of the input.\n\t * On Nextcloud before 32 this defaults to the value of the `label` prop.\n\t */\n\tplaceholder?: string\n\n\t/**\n\t * The resize CSS property sets whether an element is resizable, and if\n\t * so, in which directions.\n\t */\n\tresize?: 'both' | 'vertical' | 'horizontal' | 'none'\n\n\t/**\n\t * Toggles the success state of the component.\n\t * Adds a checkmark icon.\n\t */\n\tsuccess?: boolean\n}>(), {\n\thelperText: undefined,\n\tid: () => createElementId(),\n\tinputClass: '',\n\tlabel: undefined,\n\tplaceholder: undefined,\n\tresize: 'both',\n})\n\ndefineExpose({\n\tfocus,\n\tselect,\n})\n\nconst attrs = useAttrs()\n\n/**\n * The native text area component instance\n */\nconst textAreaElement = useTemplateRef('input')\n\nconst internalPlaceholder = computed(() => props.placeholder || (isLegacy ? props.label : undefined))\n\n// warn about invalid labels (missing label and no label outside)\nwatch(() => props.labelOutside, () => {\n\tif (!props.labelOutside && !props.label) {\n\t\tlogger.warn('[NcTextArea] You need to add a label to the NcInputField component. Either use the prop label or use an external one, as per the example in the documentation.')\n\t}\n})\n\nconst ariaDescribedby = computed(() => {\n\tconst ariaDescribedby: string[] = []\n\tif (props.helperText) {\n\t\tariaDescribedby.push(`${props.id}-helper-text`)\n\t}\n\tif (typeof attrs['aria-describedby'] === 'string') {\n\t\tariaDescribedby.push(attrs['aria-describedby'])\n\t}\n\treturn ariaDescribedby.join(' ') || undefined\n})\n\n/**\n * Update the model value to the text area value.\n *\n * @param event - The input event\n */\nfunction handleInput(event: Event) {\n\tconst { value } = event.target as HTMLTextAreaElement\n\tmodelValue.value = value\n}\n\n/**\n * Focus the input element\n *\n * @param options - Focus options\n * @public\n */\nfunction focus(options?: FocusOptions) {\n\ttextAreaElement.value!.focus(options)\n}\n\n/**\n * Select all the text in the input\n *\n * @public\n */\nfunction select() {\n\ttextAreaElement.value!.select()\n}\n</script>\n\n<template>\n\t<div\n\t\tclass=\"textarea\"\n\t\t:class=\"[\n\t\t\t$attrs.class,\n\t\t\t{\n\t\t\t\t'textarea--disabled': disabled,\n\t\t\t\t'textarea--legacy': isLegacy,\n\t\t\t},\n\t\t]\">\n\t\t<div class=\"textarea__main-wrapper\">\n\t\t\t<textarea\n\t\t\t\tv-bind=\"{ ...$attrs, class: undefined }\"\n\t\t\t\t:id\n\t\t\t\tref=\"input\"\n\t\t\t\t:aria-describedby\n\t\t\t\taria-live=\"polite\"\n\t\t\t\tclass=\"textarea__input\"\n\t\t\t\t:class=\"[\n\t\t\t\t\tinputClass,\n\t\t\t\t\t{\n\t\t\t\t\t\t'textarea__input--label-outside': labelOutside,\n\t\t\t\t\t\t'textarea__input--legacy': isLegacy,\n\t\t\t\t\t\t'textarea__input--success': success,\n\t\t\t\t\t\t'textarea__input--error': error,\n\t\t\t\t\t},\n\t\t\t\t]\"\n\t\t\t\t:disabled\n\t\t\t\t:placeholder=\"internalPlaceholder\"\n\t\t\t\t:style=\"{ resize }\"\n\t\t\t\t:value=\"modelValue\"\n\t\t\t\t@input=\"handleInput\" />\n\t\t\t<!-- Label -->\n\t\t\t<label\n\t\t\t\tv-if=\"!labelOutside\"\n\t\t\t\tclass=\"textarea__label\"\n\t\t\t\t:for=\"id\">\n\t\t\t\t{{ label }}\n\t\t\t</label>\n\t\t</div>\n\t\t<p\n\t\t\tv-if=\"helperText\"\n\t\t\t:id=\"`${id}-helper-text`\"\n\t\t\tclass=\"textarea__helper-text-message\"\n\t\t\t:class=\"{\n\t\t\t\t'textarea__helper-text-message--error': error,\n\t\t\t\t'textarea__helper-text-message--success': success,\n\t\t\t}\">\n\t\t\t<NcIconSvgWrapper\n\t\t\t\tv-if=\"success\"\n\t\t\t\tclass=\"textarea__helper-text-message__icon\"\n\t\t\t\t:path=\"mdiCheck\"\n\t\t\t\tinline />\n\t\t\t<NcIconSvgWrapper\n\t\t\t\tv-else-if=\"error\"\n\t\t\t\tclass=\"textarea__helper-text-message__icon\"\n\t\t\t\t:path=\"mdiAlertCircleOutline\"\n\t\t\t\tinline />\n\t\t\t{{ helperText }}\n\t\t</p>\n\t</div>\n</template>\n\n<style lang=\"scss\" scoped>\n@use '../../assets/input-border.scss' as border;\n\n.textarea {\n\t--input-border-color: var(--color-border-maxcontrast);\n\t--input-border-width-offset: calc(var(--border-width-input-focused, 2px) - var(--border-width-input, 2px));\n\tposition: relative;\n\twidth: 100%;\n\tborder-radius: var(--border-radius-element);\n\tmargin-block-start: 6px; // for the label in active state\n\tresize: vertical;\n\n\t&--disabled {\n\t\topacity: 0.7;\n\t\tfilter: saturate(0.7);\n\t}\n\n\t&__main-wrapper {\n\t\theight: calc(var(--default-clickable-area) * 2);\n\t\tpadding: var(--border-width-input-focused, 2px);\n\t\tposition: relative;\n\t}\n\n\t&__input {\n\t\tmargin: 0;\n\t\tpadding-block: var(--border-radius-element);\n\t\tpadding-inline: 10px; // align with label 8px margin label + 4px padding label - 2px border input\n\t\twidth: 100%;\n\t\tfont-size: var(--default-font-size);\n\t\ttext-overflow: ellipsis;\n\t\tcursor: pointer;\n\n\t\tbackground-color: var(--color-main-background);\n\t\tcolor: var(--color-main-text);\n\t\t@include border.inputBorder('.textarea--legacy', var(--input-border-color));\n\n\t\t&:active:not([disabled]),\n\t\t&:focus:not([disabled]) {\n\t\t\t--input-border-width-offset: 0px;\n\t\t\t--input-border-color: var(--color-main-text);\n\t\t}\n\n\t\t// Hide placeholder while not focussed -> show label instead (only if internal label is used)\n\t\t&:not(:focus,&--label-outside)::placeholder {\n\t\t\topacity: 0;\n\t\t}\n\n\t\t&:focus {\n\t\t\tcursor: text;\n\t\t}\n\n\t\t&:disabled {\n\t\t\tcursor: default;\n\t\t}\n\n\t\t&:focus-visible {\n\t\t\tbox-shadow: unset !important; // Override server rules\n\t\t}\n\n\t\t&--success {\n\t\t\t--input-border-color: var(--color-border-success, var(--color-success)) !important; //Override hover border color\n\t\t\t&:focus-visible {\n\t\t\t\tbox-shadow: rgb(248, 250, 252) 0px 0px 0px 2px, var(--color-primary-element) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px\n\t\t\t}\n\t\t}\n\n\t\t&--error {\n\t\t\t--input-border-color: var(--color-border-error, var(--color-error)) !important; //Override hover border color\n\t\t\t&:focus-visible {\n\t\t\t\tbox-shadow: rgb(248, 250, 252) 0px 0px 0px 2px, var(--color-primary-element) 0px 0px 0px 4px, rgba(0, 0, 0, 0.05) 0px 1px 2px 0px\n\t\t\t}\n\t\t}\n\t}\n\n\t&__label {\n\t\tposition: absolute;\n\t\tmargin-inline: 12px 0;\n\t\tmax-width: fit-content;\n\t\tinset-block-start: 11px;\n\t\tinset-inline: 0;\n\t\t// Fix color so that users do not think the input already has content\n\t\tcolor: var(--color-text-maxcontrast);\n\t\t// only one line labels are allowed\n\t\twhite-space: nowrap;\n\t\toverflow: hidden;\n\t\ttext-overflow: ellipsis;\n\t\t// forward events to input\n\t\tpointer-events: none;\n\t\t// Position transition\n\t\ttransition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick), background-color var(--animation-quick) var(--animation-slow);\n\t}\n\n\t&__input:focus + &__label,\n\t&__input:not(:placeholder-shown) + &__label {\n\t\tinset-block-start: -10px;\n\t\tline-height: 1.5; // minimum allowed line height for accessibility\n\t\tfont-size: 13px; // minimum allowed font size for accessibility\n\t\tfont-weight: 500;\n\t\tcolor: var(--color-main-text);\n\t\tbackground-color: var(--color-main-background);\n\t\tpadding-inline: 4px;\n\t\tmargin-inline-start: 8px;\n\n\t\ttransition: height var(--animation-quick), inset-block-start var(--animation-quick), font-size var(--animation-quick), color var(--animation-quick);\n\t}\n\n\t&__helper-text-message {\n\t\tpadding-block: 4px;\n\t\tdisplay: flex;\n\t\talign-items: center;\n\n\t\t&__icon {\n\t\t\tmargin-inline-end: 8px;\n\t\t}\n\n\t\t&--error {\n\t\t\tcolor: var(--color-error-text);\n\t\t}\n\n\t\t&--success {\n\t\t\tcolor: var(--color-success-text);\n\t\t}\n\t}\n}\n</style>\n"],"names":["_useModel","ariaDescribedby","_createElementBlock","$attrs","disabled","_unref","_createElementVNode","_mergeProps","id","inputClass","labelOutside","success","error","resize","label","helperText","_createBlock","_createTextVNode"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAwFA,UAAM,aAAaA,SAAmB,SAAA,YAAmB;AAEzD,UAAM,QAAQ;AAsEd,aAAa;AAAA,MACZ;AAAA,MACA;AAAA,IAAA,CACA;AAED,UAAM,QAAQ,SAAA;AAKd,UAAM,kBAAkB,eAAe,OAAO;AAE9C,UAAM,sBAAsB,SAAS,MAAM,MAAM,gBAAgB,WAAW,MAAM,QAAQ,OAAU;AAGpG,UAAM,MAAM,MAAM,cAAc,MAAM;AACrC,UAAI,CAAC,MAAM,gBAAgB,CAAC,MAAM,OAAO;AACxC,eAAO,KAAK,gKAAgK;AAAA,MAC7K;AAAA,IACD,CAAC;AAED,UAAM,kBAAkB,SAAS,MAAM;AACtC,YAAMC,mBAA4B,CAAA;AAClC,UAAI,MAAM,YAAY;AACrBA,yBAAgB,KAAK,GAAG,MAAM,EAAE,cAAc;AAAA,MAC/C;AACA,UAAI,OAAO,MAAM,kBAAkB,MAAM,UAAU;AAClDA,yBAAgB,KAAK,MAAM,kBAAkB,CAAC;AAAA,MAC/C;AACA,aAAOA,iBAAgB,KAAK,GAAG,KAAK;AAAA,IACrC,CAAC;AAOD,aAAS,YAAY,OAAc;AAClC,YAAM,EAAE,UAAU,MAAM;AACxB,iBAAW,QAAQ;AAAA,IACpB;AAQA,aAAS,MAAM,SAAwB;AACtC,sBAAgB,MAAO,MAAM,OAAO;AAAA,IACrC;AAOA,aAAS,SAAS;AACjB,sBAAgB,MAAO,OAAA;AAAA,IACxB;;0BAICC,mBA2DM,OAAA;AAAA,QA1DL,uBAAM,YAAU;AAAA,UACHC,KAAAA,OAAO;AAAA;kCAAsCC,KAAAA;AAAAA,gCAAkCC,MAAA,QAAA;AAAA,UAAA;AAAA;;QAO5FC,mBA6BM,OA7BN,YA6BM;AAAA,UA5BLA,mBAoBwB,YApBxBC,WAoBwB,EAAA,GAnBVJ,KAAAA,eAAe,UAAS;AAAA,YACpC,IAAAK,KAAAA;AAAAA,YACD,KAAI;AAAA,YACH,oBAAA,gBAAA;AAAA,YACD,aAAU;AAAA,YACV,QAAM,mBAAiB;AAAA,cACRC,KAAAA;AAAAA;kDAA2DC,KAAAA;AAAAA,2CAA+CL,MAAA,QAAA;AAAA,4CAA4CM,KAAAA;AAAAA,0CAAyCC,KAAAA;AAAAA,cAAAA;AAAAA;YAS7M,UAAAR,KAAAA;AAAAA,YACA,aAAa,oBAAA;AAAA,YACb,iBAASS,KAAAA,OAAAA;AAAAA,YACT,OAAO,WAAA;AAAA,YACP,SAAO;AAAA,UAAA;WAGDH,KAAAA,6BADRR,mBAKQ,SAAA;AAAA;YAHP,OAAM;AAAA,YACL,KAAKM,KAAAA;AAAAA,UAAAA,mBACHM,KAAAA,KAAK,GAAA,GAAA,UAAA;;QAIHC,KAAAA,2BADPb,mBAmBI,KAAA;AAAA;UAjBF,OAAOM,KAAAA,EAAE;AAAA,UACV,uBAAM,iCAA+B;AAAA,oDACiBI,KAAAA;AAAAA,sDAAqDD,KAAAA;AAAAA,UAAAA;;UAKpGA,KAAAA,wBADPK,YAIU,kBAAA;AAAA;YAFT,OAAM;AAAA,YACL,MAAMX,MAAA,QAAA;AAAA,YACP,QAAA;AAAA,UAAA,yBAEWO,KAAAA,sBADZI,YAIU,kBAAA;AAAA;YAFT,OAAM;AAAA,YACL,MAAMX,MAAA,qBAAA;AAAA,YACP,QAAA;AAAA,UAAA;UAASY,gBAAA,sBACPF,KAAAA,UAAU,GAAA,CAAA;AAAA,QAAA;;;;;;"}
@@ -1,8 +1,8 @@
1
1
  import { defineComponent, mergeModels, useModel, useTemplateRef, computed, createBlock, openBlock, unref, mergeProps, createSlots, withCtx, renderSlot } from "vue";
2
- import { m as mdiArrowRight, a as mdiUndo, b as mdiClose } from "./mdi-DvQxv1t7.mjs";
2
+ import { m as mdiArrowRight, a as mdiUndo, b as mdiClose } from "./mdi-CpchYUUV.mjs";
3
3
  import { r as register, b as t50, c as t18, a as t } from "./_l10n-CgsPi8nC.mjs";
4
4
  import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-BvLanNaW.mjs";
5
- import { N as NcInputField } from "./NcInputField-D7Nv5QhT.mjs";
5
+ import { N as NcInputField } from "./NcInputField-Clm9jOGJ.mjs";
6
6
  register(t18, t50);
7
7
  const _sfc_main = /* @__PURE__ */ defineComponent({
8
8
  __name: "NcTextField",
@@ -86,4 +86,4 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
86
86
  export {
87
87
  _sfc_main as _
88
88
  };
89
- //# sourceMappingURL=NcTextField.vue_vue_type_script_setup_true_lang-BfjSL2EJ.mjs.map
89
+ //# sourceMappingURL=NcTextField.vue_vue_type_script_setup_true_lang-CCsZqnkM.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"NcTextField.vue_vue_type_script_setup_true_lang-BfjSL2EJ.mjs","sources":["../../src/components/NcTextField/NcTextField.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Description\nSee [NcInputField](#/Components/NcFields?id=ncinputfield) for a list of all available props.\n\nGeneral purpose text field component.\nIt is recommended to not only provide a placeholder, but also a label.\nThe label should describe what input is expected and the placehold what format the input should have.\n\nNote: the inner html `input` element inherits all the attributes from the\nNcTextField component so you can add things like `autocomplete`, `maxlength`\nand `minlength`.\n\n```\n<template>\n\t<div class=\"wrapper\">\n\t\t<NcTextField v-model=\"text1\"\n\t\t\tlabel=\"Leading icon and clear trailing button\"\n\t\t\ttrailing-button-icon=\"close\"\n\t\t\t:show-trailing-button=\"text1 !== ''\"\n\t\t\t@trailing-button-click=\"clearText\">\n\t\t\t<template #icon>\n\t\t\t\t<Magnify :size=\"20\" />\n\t\t\t</template>\n\t\t</NcTextField>\n\t\t<NcTextField v-model=\"text4\"\n\t\t\tlabel=\"Internal label\"\n\t\t\tplaceholder=\"That can be used together with placeholder\"\n\t\t\ttrailing-button-icon=\"close\"\n\t\t\t:show-trailing-button=\"text4 !== ''\"\n\t\t\t@trailing-button-click=\"clearText\">\n\t\t\t<template #icon>\n\t\t\t\t<IconLockOutline :size=\"20\" />\n\t\t\t</template>\n\t\t</NcTextField>\n\t\t<NcTextField v-model=\"text2\"\n\t\t\tlabel=\"With helper text\"\n\t\t\thelper-text=\"This is an optional message to show e.g. validation errors.\"\n\t\t\t@trailing-button-click=\"clearText\">\n\t\t</NcTextField>\n\t\t<NcTextField v-model=\"text2\"\n\t\t\tlabel=\"Success state\"\n\t\t\tplaceholder=\"Placeholders are possible\"\n\t\t\t:success=\"true\"\n\t\t\t@trailing-button-click=\"clearText\">\n\t\t</NcTextField>\n\t\t<NcTextField v-model=\"text3\"\n\t\t\tlabel=\"Error state\"\n\t\t\tplaceholder=\"Enter something valid\"\n\t\t\t:error=\"true\"\n\t\t\t@trailing-button-click=\"clearText\">\n\t\t</NcTextField>\n\t\t<NcTextField :model-value=\"\"\n\t\t\tlabel=\"Disabled\"\n\t\t\t:disabled=\"true\" />\n\t\t<NcTextField :model-value=\"\"\n\t\t\tlabel=\"Disabled + Success\"\n\t\t\t:success=\"true\"\n\t\t\t:disabled=\"true\" />\n\t\t<div class=\"external-label\">\n\t\t\t<label for=\"textField\">External label</label>\n\t\t\t<NcTextField v-model=\"text5\"\n\t\t\t\tid=\"textField\"\n\t\t\t\t:label-outside=\"true\"\n\t\t\t\tplaceholder=\"Input with external label\"\n\t\t\t\t@trailing-button-click=\"clearText\" />\n\t\t</div>\n\t</div>\n</template>\n<script>\nimport Magnify from 'vue-material-design-icons/Magnify'\nimport IconLockOutline from 'vue-material-design-icons/LockOutline'\nimport Close from 'vue-material-design-icons/Close'\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttext1: '',\n\t\t\ttext2: '',\n\t\t\ttext3: '',\n\t\t\ttext4: '',\n\t\t\ttext5: '',\n\t\t}\n\t},\n\n\tcomponents: {\n\t\tMagnify,\n\t\tIconLockOutline,\n\t\tClose,\n\t},\n\n\tmethods: {\n\t\tclearText() {\n\t\t\tthis.text1 = ''\n\t\t\tthis.text3 = ''\n\t\t}\n\t}\n}\n</script>\n<style lang=\"scss\" scoped>\n.wrapper {\n\tdisplay: flex;\n\tgap: 4px;\n\talign-items: flex-end;\n\tflex-wrap: wrap;\n}\n\n.external-label {\n\tdisplay: flex;\n\tgap: 14px;\n\twidth: 100%;\n\tmargin-top: 1rem;\n}\n\n.external-label label {\n\tpadding-top: 7px;\n\twhite-space: nowrap;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<NcInputField\n\t\tv-bind=\"propsToForward\"\n\t\tref=\"inputField\"\n\t\tv-model=\"modelValue\">\n\t\t<template v-if=\"!!$slots.icon\" #icon>\n\t\t\t<slot name=\"icon\" />\n\t\t</template>\n\n\t\t<!-- Trailing icon slot, except for search type input as the browser already adds a trailing close icon -->\n\t\t<template v-if=\"type !== 'search'\" #trailing-button-icon>\n\t\t\t<NcIconSvgWrapper v-if=\"trailingButtonIcon === 'arrowEnd'\" directional :path=\"mdiArrowRight\" />\n\t\t\t<NcIconSvgWrapper v-else :path=\"trailingButtonIcon === 'undo' ? mdiUndo : mdiClose\" />\n\t\t</template>\n\t</NcInputField>\n</template>\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\nimport type { NcInputFieldProps } from '../NcInputField/index.ts'\n\nimport { mdiArrowRight, mdiClose, mdiUndo } from '@mdi/js'\nimport { computed, useTemplateRef } from 'vue'\nimport { t } from '../../l10n.ts'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.ts'\nimport NcInputField from '../NcInputField/index.ts'\n\n/**\n * The value of the input field\n * If type is 'number' and a number is passed as value than the type of `update:value` will also be 'number'\n */\nconst modelValue = defineModel<string | number>('modelValue', { default: '' })\n\nconst props = withDefaults(defineProps<NcInputFieldProps & {\n\t/**\n\t * Specifies which material design icon should be used for the trailing button.\n\t */\n\ttrailingButtonIcon?: 'arrowEnd' | 'close' | 'undo'\n\n\t/**\n\t * The `aria-label` to set on the trailing button\n\t * If no explicit value is set it will default to the one matching the `trailingButtonIcon`:\n\t * - 'Clear text'\n\t * - 'Save changes'\n\t * - 'Undo changes'\n\t */\n\ttrailingButtonLabel?: string\n}>(), {\n\ttrailingButtonIcon: 'close',\n\ttrailingButtonLabel: undefined,\n})\n\ndefineSlots<{\n\t/**\n\t * Leading icon, set the size to 20.\n\t */\n\ticon?: Slot\n}>()\n\ndefineExpose({\n\tfocus,\n\tselect,\n})\n\nconst inputFieldInstance = useTemplateRef('inputField')\n\nconst defaultTrailingButtonLabels = {\n\tarrowEnd: t('Save changes'),\n\tclose: t('Clear text'),\n\tundo: t('Undo changes'),\n}\n\nconst NcInputFieldPropNames = new Set(Object.keys(NcInputField.props))\nconst propsToForward = computed<NcInputFieldProps>(() => {\n\tconst sharedProps = Object.fromEntries(Object.entries(props)\n\t\t.filter(([key]) => NcInputFieldPropNames.has(key)))\n\n\tsharedProps.trailingButtonLabel ??= defaultTrailingButtonLabels[props.trailingButtonIcon]\n\treturn sharedProps satisfies NcInputFieldProps\n})\n\n/**\n * Focus the input element\n *\n * @param options - Focus options\n * @public\n */\nfunction focus(options?: FocusOptions) {\n\tinputFieldInstance.value!.focus(options)\n}\n\n/**\n * Select all the text in the input\n *\n * @public\n */\nfunction select() {\n\tinputFieldInstance.value!.select()\n}\n</script>\n"],"names":["_useModel","_createBlock","_unref","_mergeProps","$slots","_renderSlot","type","trailingButtonIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6JA,UAAM,aAAaA,SAA4B,SAAC,YAA6B;AAE7E,UAAM,QAAQ;AA0Bd,aAAa;AAAA,MACZ;AAAA,MACA;AAAA,IAAA,CACA;AAED,UAAM,qBAAqB,eAAe,YAAY;AAEtD,UAAM,8BAA8B;AAAA,MACnC,UAAU,EAAE,cAAc;AAAA,MAC1B,OAAO,EAAE,YAAY;AAAA,MACrB,MAAM,EAAE,cAAc;AAAA,IAAA;AAGvB,UAAM,wBAAwB,IAAI,IAAI,OAAO,KAAK,aAAa,KAAK,CAAC;AACrE,UAAM,iBAAiB,SAA4B,MAAM;AACxD,YAAM,cAAc,OAAO,YAAY,OAAO,QAAQ,KAAK,EACzD,OAAO,CAAC,CAAC,GAAG,MAAM,sBAAsB,IAAI,GAAG,CAAC,CAAC;AAEnD,kBAAY,wBAAwB,4BAA4B,MAAM,kBAAkB;AACxF,aAAO;AAAA,IACR,CAAC;AAQD,aAAS,MAAM,SAAwB;AACtC,yBAAmB,MAAO,MAAM,OAAO;AAAA,IACxC;AAOA,aAAS,SAAS;AACjB,yBAAmB,MAAO,OAAA;AAAA,IAC3B;;0BAjGCC,YAaeC,MAAA,YAAA,GAbfC,WAae,eAAA,OAZQ;AAAA,QACtB,KAAI;AAAA,oBACK,WAAA;AAAA,qEAAA,WAAU,QAAA;AAAA,MAAA;QACDC,CAAAA,CAAAA,KAAAA,OAAO;gBAAO;AAAA,sBAC/B,MAAoB;AAAA,YAApBC,WAAoB,KAAA,QAAA,MAAA;AAAA,UAAA;;;QAILC,KAAAA,SAAI;gBAAgB;AAAA,sBACnC,MAA+F;AAAA,YAAvEC,KAAAA,uBAAkB,2BAA1CN,YAA+FC,MAAA,gBAAA,GAAA;AAAA;cAApC,aAAA;AAAA,cAAa,MAAMA,MAAA,aAAA;AAAA,YAAA,uCAC9ED,YAAsFC,MAAA,gBAAA,GAAA;AAAA;cAA5D,MAAMK,KAAAA,uBAAkB,SAAcL,MAAA,OAAA,IAAUA,MAAA,QAAA;AAAA,YAAA;;;;;;;;"}
1
+ {"version":3,"file":"NcTextField.vue_vue_type_script_setup_true_lang-CCsZqnkM.mjs","sources":["../../src/components/NcTextField/NcTextField.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n### Description\nSee [NcInputField](#/Components/NcFields?id=ncinputfield) for a list of all available props.\n\nGeneral purpose text field component.\nIt is recommended to not only provide a placeholder, but also a label.\nThe label should describe what input is expected and the placehold what format the input should have.\n\nNote: the inner html `input` element inherits all the attributes from the\nNcTextField component so you can add things like `autocomplete`, `maxlength`\nand `minlength`.\n\n```\n<template>\n\t<div class=\"wrapper\">\n\t\t<NcTextField v-model=\"text1\"\n\t\t\tlabel=\"Leading icon and clear trailing button\"\n\t\t\ttrailing-button-icon=\"close\"\n\t\t\t:show-trailing-button=\"text1 !== ''\"\n\t\t\t@trailing-button-click=\"clearText\">\n\t\t\t<template #icon>\n\t\t\t\t<Magnify :size=\"20\" />\n\t\t\t</template>\n\t\t</NcTextField>\n\t\t<NcTextField v-model=\"text4\"\n\t\t\tlabel=\"Internal label\"\n\t\t\tplaceholder=\"That can be used together with placeholder\"\n\t\t\ttrailing-button-icon=\"close\"\n\t\t\t:show-trailing-button=\"text4 !== ''\"\n\t\t\t@trailing-button-click=\"clearText\">\n\t\t\t<template #icon>\n\t\t\t\t<IconLockOutline :size=\"20\" />\n\t\t\t</template>\n\t\t</NcTextField>\n\t\t<NcTextField v-model=\"text2\"\n\t\t\tlabel=\"With helper text\"\n\t\t\thelper-text=\"This is an optional message to show e.g. validation errors.\"\n\t\t\t@trailing-button-click=\"clearText\">\n\t\t</NcTextField>\n\t\t<NcTextField v-model=\"text2\"\n\t\t\tlabel=\"Success state\"\n\t\t\tplaceholder=\"Placeholders are possible\"\n\t\t\t:success=\"true\"\n\t\t\t@trailing-button-click=\"clearText\">\n\t\t</NcTextField>\n\t\t<NcTextField v-model=\"text3\"\n\t\t\tlabel=\"Error state\"\n\t\t\tplaceholder=\"Enter something valid\"\n\t\t\t:error=\"true\"\n\t\t\t@trailing-button-click=\"clearText\">\n\t\t</NcTextField>\n\t\t<NcTextField :model-value=\"\"\n\t\t\tlabel=\"Disabled\"\n\t\t\t:disabled=\"true\" />\n\t\t<NcTextField :model-value=\"\"\n\t\t\tlabel=\"Disabled + Success\"\n\t\t\t:success=\"true\"\n\t\t\t:disabled=\"true\" />\n\t\t<div class=\"external-label\">\n\t\t\t<label for=\"textField\">External label</label>\n\t\t\t<NcTextField v-model=\"text5\"\n\t\t\t\tid=\"textField\"\n\t\t\t\t:label-outside=\"true\"\n\t\t\t\tplaceholder=\"Input with external label\"\n\t\t\t\t@trailing-button-click=\"clearText\" />\n\t\t</div>\n\t</div>\n</template>\n<script>\nimport Magnify from 'vue-material-design-icons/Magnify'\nimport IconLockOutline from 'vue-material-design-icons/LockOutline'\nimport Close from 'vue-material-design-icons/Close'\n\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\ttext1: '',\n\t\t\ttext2: '',\n\t\t\ttext3: '',\n\t\t\ttext4: '',\n\t\t\ttext5: '',\n\t\t}\n\t},\n\n\tcomponents: {\n\t\tMagnify,\n\t\tIconLockOutline,\n\t\tClose,\n\t},\n\n\tmethods: {\n\t\tclearText() {\n\t\t\tthis.text1 = ''\n\t\t\tthis.text3 = ''\n\t\t}\n\t}\n}\n</script>\n<style lang=\"scss\" scoped>\n.wrapper {\n\tdisplay: flex;\n\tgap: 4px;\n\talign-items: flex-end;\n\tflex-wrap: wrap;\n}\n\n.external-label {\n\tdisplay: flex;\n\tgap: 14px;\n\twidth: 100%;\n\tmargin-top: 1rem;\n}\n\n.external-label label {\n\tpadding-top: 7px;\n\twhite-space: nowrap;\n}\n</style>\n```\n</docs>\n\n<template>\n\t<NcInputField\n\t\tv-bind=\"propsToForward\"\n\t\tref=\"inputField\"\n\t\tv-model=\"modelValue\">\n\t\t<template v-if=\"!!$slots.icon\" #icon>\n\t\t\t<slot name=\"icon\" />\n\t\t</template>\n\n\t\t<!-- Trailing icon slot, except for search type input as the browser already adds a trailing close icon -->\n\t\t<template v-if=\"type !== 'search'\" #trailing-button-icon>\n\t\t\t<NcIconSvgWrapper v-if=\"trailingButtonIcon === 'arrowEnd'\" directional :path=\"mdiArrowRight\" />\n\t\t\t<NcIconSvgWrapper v-else :path=\"trailingButtonIcon === 'undo' ? mdiUndo : mdiClose\" />\n\t\t</template>\n\t</NcInputField>\n</template>\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\nimport type { NcInputFieldProps } from '../NcInputField/index.ts'\n\nimport { mdiArrowRight, mdiClose, mdiUndo } from '@mdi/js'\nimport { computed, useTemplateRef } from 'vue'\nimport { t } from '../../l10n.ts'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/index.ts'\nimport NcInputField from '../NcInputField/index.ts'\n\n/**\n * The value of the input field\n * If type is 'number' and a number is passed as value than the type of `update:value` will also be 'number'\n */\nconst modelValue = defineModel<string | number>('modelValue', { default: '' })\n\nconst props = withDefaults(defineProps<NcInputFieldProps & {\n\t/**\n\t * Specifies which material design icon should be used for the trailing button.\n\t */\n\ttrailingButtonIcon?: 'arrowEnd' | 'close' | 'undo'\n\n\t/**\n\t * The `aria-label` to set on the trailing button\n\t * If no explicit value is set it will default to the one matching the `trailingButtonIcon`:\n\t * - 'Clear text'\n\t * - 'Save changes'\n\t * - 'Undo changes'\n\t */\n\ttrailingButtonLabel?: string\n}>(), {\n\ttrailingButtonIcon: 'close',\n\ttrailingButtonLabel: undefined,\n})\n\ndefineSlots<{\n\t/**\n\t * Leading icon, set the size to 20.\n\t */\n\ticon?: Slot\n}>()\n\ndefineExpose({\n\tfocus,\n\tselect,\n})\n\nconst inputFieldInstance = useTemplateRef('inputField')\n\nconst defaultTrailingButtonLabels = {\n\tarrowEnd: t('Save changes'),\n\tclose: t('Clear text'),\n\tundo: t('Undo changes'),\n}\n\nconst NcInputFieldPropNames = new Set(Object.keys(NcInputField.props))\nconst propsToForward = computed<NcInputFieldProps>(() => {\n\tconst sharedProps = Object.fromEntries(Object.entries(props)\n\t\t.filter(([key]) => NcInputFieldPropNames.has(key)))\n\n\tsharedProps.trailingButtonLabel ??= defaultTrailingButtonLabels[props.trailingButtonIcon]\n\treturn sharedProps satisfies NcInputFieldProps\n})\n\n/**\n * Focus the input element\n *\n * @param options - Focus options\n * @public\n */\nfunction focus(options?: FocusOptions) {\n\tinputFieldInstance.value!.focus(options)\n}\n\n/**\n * Select all the text in the input\n *\n * @public\n */\nfunction select() {\n\tinputFieldInstance.value!.select()\n}\n</script>\n"],"names":["_useModel","_createBlock","_unref","_mergeProps","$slots","_renderSlot","type","trailingButtonIcon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AA6JA,UAAM,aAAaA,SAA4B,SAAC,YAA6B;AAE7E,UAAM,QAAQ;AA0Bd,aAAa;AAAA,MACZ;AAAA,MACA;AAAA,IAAA,CACA;AAED,UAAM,qBAAqB,eAAe,YAAY;AAEtD,UAAM,8BAA8B;AAAA,MACnC,UAAU,EAAE,cAAc;AAAA,MAC1B,OAAO,EAAE,YAAY;AAAA,MACrB,MAAM,EAAE,cAAc;AAAA,IAAA;AAGvB,UAAM,wBAAwB,IAAI,IAAI,OAAO,KAAK,aAAa,KAAK,CAAC;AACrE,UAAM,iBAAiB,SAA4B,MAAM;AACxD,YAAM,cAAc,OAAO,YAAY,OAAO,QAAQ,KAAK,EACzD,OAAO,CAAC,CAAC,GAAG,MAAM,sBAAsB,IAAI,GAAG,CAAC,CAAC;AAEnD,kBAAY,wBAAwB,4BAA4B,MAAM,kBAAkB;AACxF,aAAO;AAAA,IACR,CAAC;AAQD,aAAS,MAAM,SAAwB;AACtC,yBAAmB,MAAO,MAAM,OAAO;AAAA,IACxC;AAOA,aAAS,SAAS;AACjB,yBAAmB,MAAO,OAAA;AAAA,IAC3B;;0BAjGCC,YAaeC,MAAA,YAAA,GAbfC,WAae,eAAA,OAZQ;AAAA,QACtB,KAAI;AAAA,oBACK,WAAA;AAAA,qEAAA,WAAU,QAAA;AAAA,MAAA;QACDC,CAAAA,CAAAA,KAAAA,OAAO;gBAAO;AAAA,sBAC/B,MAAoB;AAAA,YAApBC,WAAoB,KAAA,QAAA,MAAA;AAAA,UAAA;;;QAILC,KAAAA,SAAI;gBAAgB;AAAA,sBACnC,MAA+F;AAAA,YAAvEC,KAAAA,uBAAkB,2BAA1CN,YAA+FC,MAAA,gBAAA,GAAA;AAAA;cAApC,aAAA;AAAA,cAAa,MAAMA,MAAA,aAAA;AAAA,YAAA,uCAC9ED,YAAsFC,MAAA,gBAAA,GAAA;AAAA;cAA5D,MAAMK,KAAAA,uBAAkB,SAAcL,MAAA,OAAA,IAAUA,MAAA,QAAA;AAAA,YAAA;;;;;;;;"}
@@ -1,7 +1,7 @@
1
1
  import '../assets/NcUserBubble-B3Jad98g.css';
2
2
  import { createElementBlock, openBlock, renderSlot, defineComponent, mergeModels, useModel, computed, warn, watch, createBlock, resolveDynamicComponent, withCtx, mergeProps, createVNode, createElementVNode, createCommentVNode, normalizeStyle, toDisplayString } from "vue";
3
3
  import { RouterLink } from "vue-router";
4
- import { N as NcAvatar } from "./NcAvatar-S8EJR2BK.mjs";
4
+ import { N as NcAvatar } from "./NcAvatar-CK_dTsmT.mjs";
5
5
  import { N as NcPopover } from "./NcPopover-C-MTaPCs.mjs";
6
6
  import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
7
7
  const _sfc_main$1 = {};
@@ -133,4 +133,4 @@ const NcUserBubble = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data
133
133
  export {
134
134
  NcUserBubble as N
135
135
  };
136
- //# sourceMappingURL=NcUserBubble-CiB-Lu5C.mjs.map
136
+ //# sourceMappingURL=NcUserBubble-Cs84CNHz.mjs.map
@@ -1 +1 @@
1
- {"version":3,"file":"NcUserBubble-CiB-Lu5C.mjs","sources":["../../src/components/NcUserBubble/NcUserBubbleDiv.vue","../../src/components/NcUserBubble/NcUserBubble.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<template>\n\t<div>\n\t\t<slot name=\"trigger\" />\n\t</div>\n</template>\n","<!--\n - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n\n### General description\n\nThis component displays a user together with a small avatar in a grey bubble.\nIt's possible to use an actual user's avatar, just an image/icon as a url or an icon-class,\nto link the bubble to e.g. a users profile\nand to show a popover on hover with e.g. the full user name handle / email address or something else.\n\nThis component has the following slot:\n* a default slot which is for the content of the popover (this is passed to the popover component directly).\n\n### Examples\n\n```vue\n<p>\n\tSome text before <NcUserBubble user=\"admin\" display-name=\"Admin Example\" url=\"/test\">@admin@foreign-host.com</NcUserBubble> and after the bubble.\n\t<NcUserBubble avatar-image=\"icon-group\" display-name=\"test group xyz\" :primary=\"true\">Hey there!</NcUserBubble>\n</p>\n```\n\n### Example with name slot\n\n```vue\n<template>\n<NcUserBubble\n\t:size=\"34\"\n\tdisplay-name=\"Administrator\"\n\tuser=\"admin\">\n\t<template #name>\n\t\t<NcButton aria-label=\"Remove user\"\n\t\t\tvariant=\"tertiary-no-background\"\n\t\t\t@click=\"alert\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :path=\"mdiClose\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t</template>\n</NcUserBubble>\n</template>\n<script>\nimport { mdiClose } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\treturn {\n\t\t\tmdiClose,\n\t\t}\n\t},\n\tmethods: {\n\t\talert() {\n\t\t\talert('Removed')\n\t\t},\n\t},\n}\n</script>\n```\n\n</docs>\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\nimport type { RouteLocation } from 'vue-router'\n\nimport { computed, warn, watch } from 'vue'\nimport { RouterLink } from 'vue-router'\nimport NcAvatar from '../NcAvatar/NcAvatar.vue'\nimport NcPopover from '../NcPopover/NcPopover.vue'\nimport NcUserBubbleDiv from './NcUserBubbleDiv.vue'\n\n/**\n * Default popover state. Requires the UserBubble\n * to have some content to render inside the popover\n */\nconst isOpen = defineModel<boolean>('open')\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * Override generated avatar, can be an url or an icon class\n\t */\n\tavatarImage?: string\n\n\t/**\n\t * Provide the user id if this is a user\n\t */\n\tuser?: string\n\n\t/**\n\t * Displayed label\n\t */\n\tdisplayName?: string\n\n\t/**\n\t * Whether or not to display the user-status\n\t */\n\tshowUserStatus?: boolean\n\n\t/**\n\t * Define the whole bubble as a link\n\t */\n\turl?: string\n\n\t/**\n\t * Use bubble as a router-link for in-app navigation\n\t */\n\tto?: RouteLocation\n\n\t/**\n\t * Use the primary colour\n\t */\n\tprimary?: boolean\n\n\t/**\n\t * This is the height of the component\n\t */\n\tsize?: number\n\n\t/**\n\t * This is the margin of the avatar (size - margin = avatar size)\n\t */\n\tmargin?: number\n}>(), {\n\tavatarImage: undefined,\n\tdisplayName: undefined,\n\tuser: undefined,\n\turl: undefined,\n\tto: undefined,\n\tmargin: 2,\n\tsize: 20,\n})\n\nconst emit = defineEmits<{\n\t/**\n\t * The mouse click event\n\t */\n\tclick: [event: MouseEvent]\n}>()\n\ndefineSlots<{\n\t/**\n\t * Main Popover content on userbubble hover/focus\n\t */\n\tdefault?: Slot\n\n\t/**\n\t * Optional slot just after the name\n\t */\n\tname?: Slot\n}>()\n\n/**\n * Is the provided avatar url valid or not\n */\nconst isAvatarUrl = computed(() => {\n\tif (!props.avatarImage) {\n\t\treturn false\n\t}\n\n\ttry {\n\t\tconst url = new URL(props.avatarImage)\n\t\treturn !!url\n\t} catch {\n\t\treturn false\n\t}\n})\n\n/**\n * Do we have a custom avatar or not\n */\nconst isCustomAvatar = computed(() => !!props.avatarImage)\n\nconst avatarStyle = computed(() => ({\n\tmarginInlineStart: `${props.margin}px`,\n}))\n\n/**\n * Is the URL prop set\n */\nconst hasUrl = computed(() => {\n\tif (!props.url || props.url.trim() === '') {\n\t\treturn false\n\t}\n\ttry {\n\t\tconst url = new URL(props.url, props.url?.startsWith?.('/') ? window.location.href : undefined)\n\t\treturn !!url\n\t} catch {\n\t\twarn('[NcUserBubble] Invalid URL passed', { url: props.url })\n\t\treturn false\n\t}\n})\n\n/**\n * href attribute to pass to content container\n */\nconst href = computed(() => hasUrl.value ? props.url : undefined)\n\nconst contentComponent = computed(() => {\n\tif (hasUrl.value) {\n\t\treturn 'a'\n\t} else if (props.to) {\n\t\treturn RouterLink\n\t} else {\n\t\treturn 'div'\n\t}\n})\n\nconst contentStyle = computed(() => ({\n\theight: `${props.size}px`,\n\tlineHeight: `${props.size}px`,\n\tborderRadius: `${props.size / 2}px`,\n}))\n\nwatch([() => props.displayName, () => props.user], () => {\n\tif (!props.displayName && !props.user) {\n\t\twarn('[NcUserBubble] At least `displayName` or `user` property should be set.')\n\t}\n})\n</script>\n\n<template>\n\t<component\n\t\t:is=\"!!$slots.default ? NcPopover : NcUserBubbleDiv\"\n\t\tv-model:shown=\"isOpen\"\n\t\tclass=\"user-bubble__wrapper\"\n\t\ttrigger=\"hover focus\">\n\t\t<!-- Main userbubble structure -->\n\t\t<template #trigger=\"{ attrs }\">\n\t\t\t<component\n\t\t\t\t:is=\"contentComponent\"\n\t\t\t\tclass=\"user-bubble__content\"\n\t\t\t\t:class=\"{ 'user-bubble__content--primary': primary }\"\n\t\t\t\t:style=\"contentStyle\"\n\t\t\t\t:to\n\t\t\t\t:href\n\t\t\t\tv-bind=\"attrs\"\n\t\t\t\t@click=\"emit('click', $event)\">\n\t\t\t\t<!-- NcAvatar -->\n\t\t\t\t<NcAvatar\n\t\t\t\t\t:url=\"isCustomAvatar && isAvatarUrl ? avatarImage : undefined\"\n\t\t\t\t\t:icon-class=\"isCustomAvatar && !isAvatarUrl ? avatarImage : undefined\"\n\t\t\t\t\t:user=\"user\"\n\t\t\t\t\t:display-name=\"displayName\"\n\t\t\t\t\t:size=\"size - (margin * 2)\"\n\t\t\t\t\t:style=\"avatarStyle\"\n\t\t\t\t\t:disable-tooltip=\"true\"\n\t\t\t\t\t:disable-menu=\"true\"\n\t\t\t\t\t:hide-status=\"!showUserStatus\"\n\t\t\t\t\tclass=\"user-bubble__avatar\" />\n\n\t\t\t\t<!-- Name -->\n\t\t\t\t<span class=\"user-bubble__name\">\n\t\t\t\t\t{{ displayName || user }}\n\t\t\t\t</span>\n\n\t\t\t\t<span v-if=\"!!$slots.name\" class=\"user-bubble__secondary\">\n\t\t\t\t\t<slot name=\"name\" />\n\t\t\t\t</span>\n\t\t\t</component>\n\t\t</template>\n\n\t\t<slot />\n\t</component>\n</template>\n\n<style lang=\"scss\" scoped>\n.user-bubble {\n\t&__wrapper {\n\t\t// align inline with text\n\t\tdisplay: inline-block;\n\t\tvertical-align: middle;\n\t\t// shrink and allow grow to fit\n\t\tmin-width: 0;\n\t\tmax-width: 100%;\n\t}\n\n\t&__content {\n\t\tdisplay: inline-flex;\n\t\tmax-width: 100%;\n\t\tbackground-color: var(--color-background-dark);\n\n\t\t&--primary {\n\t\t\tcolor: var(--color-primary-element-text);\n\t\t\tbackground-color: var(--color-primary-element);\n\t\t}\n\n\t\t> :last-child {\n\t\t\t// border radius end padding\n\t\t\tpadding-inline-end: 8px;\n\t\t}\n\t}\n\n\t&__avatar {\n\t\talign-self: center;\n\t}\n\n\t&__name {\n\t\toverflow: hidden;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t}\n\n\t&__name,\n\t&__secondary {\n\t\t// proper spacing between avatar, name & slot\n\t\tpadding-block: 0;\n\t\tpadding-inline: 4px 0;\n\t}\n}\n</style>\n"],"names":["_createElementBlock","_renderSlot","_useModel","_openBlock","_createBlock","_resolveDynamicComponent","$slots","_withCtx","_mergeProps","primary","to","_createVNode","avatarImage","user","displayName","size","margin","showUserStatus","_createElementVNode","_toDisplayString"],"mappings":"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"}
1
+ {"version":3,"file":"NcUserBubble-Cs84CNHz.mjs","sources":["../../src/components/NcUserBubble/NcUserBubbleDiv.vue","../../src/components/NcUserBubble/NcUserBubble.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2021 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<template>\n\t<div>\n\t\t<slot name=\"trigger\" />\n\t</div>\n</template>\n","<!--\n - SPDX-FileCopyrightText: 2019 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<docs>\n\n### General description\n\nThis component displays a user together with a small avatar in a grey bubble.\nIt's possible to use an actual user's avatar, just an image/icon as a url or an icon-class,\nto link the bubble to e.g. a users profile\nand to show a popover on hover with e.g. the full user name handle / email address or something else.\n\nThis component has the following slot:\n* a default slot which is for the content of the popover (this is passed to the popover component directly).\n\n### Examples\n\n```vue\n<p>\n\tSome text before <NcUserBubble user=\"admin\" display-name=\"Admin Example\" url=\"/test\">@admin@foreign-host.com</NcUserBubble> and after the bubble.\n\t<NcUserBubble avatar-image=\"icon-group\" display-name=\"test group xyz\" :primary=\"true\">Hey there!</NcUserBubble>\n</p>\n```\n\n### Example with name slot\n\n```vue\n<template>\n<NcUserBubble\n\t:size=\"34\"\n\tdisplay-name=\"Administrator\"\n\tuser=\"admin\">\n\t<template #name>\n\t\t<NcButton aria-label=\"Remove user\"\n\t\t\tvariant=\"tertiary-no-background\"\n\t\t\t@click=\"alert\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :path=\"mdiClose\" />\n\t\t\t</template>\n\t\t</NcButton>\n\t</template>\n</NcUserBubble>\n</template>\n<script>\nimport { mdiClose } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\treturn {\n\t\t\tmdiClose,\n\t\t}\n\t},\n\tmethods: {\n\t\talert() {\n\t\t\talert('Removed')\n\t\t},\n\t},\n}\n</script>\n```\n\n</docs>\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\nimport type { RouteLocation } from 'vue-router'\n\nimport { computed, warn, watch } from 'vue'\nimport { RouterLink } from 'vue-router'\nimport NcAvatar from '../NcAvatar/NcAvatar.vue'\nimport NcPopover from '../NcPopover/NcPopover.vue'\nimport NcUserBubbleDiv from './NcUserBubbleDiv.vue'\n\n/**\n * Default popover state. Requires the UserBubble\n * to have some content to render inside the popover\n */\nconst isOpen = defineModel<boolean>('open')\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * Override generated avatar, can be an url or an icon class\n\t */\n\tavatarImage?: string\n\n\t/**\n\t * Provide the user id if this is a user\n\t */\n\tuser?: string\n\n\t/**\n\t * Displayed label\n\t */\n\tdisplayName?: string\n\n\t/**\n\t * Whether or not to display the user-status\n\t */\n\tshowUserStatus?: boolean\n\n\t/**\n\t * Define the whole bubble as a link\n\t */\n\turl?: string\n\n\t/**\n\t * Use bubble as a router-link for in-app navigation\n\t */\n\tto?: RouteLocation\n\n\t/**\n\t * Use the primary colour\n\t */\n\tprimary?: boolean\n\n\t/**\n\t * This is the height of the component\n\t */\n\tsize?: number\n\n\t/**\n\t * This is the margin of the avatar (size - margin = avatar size)\n\t */\n\tmargin?: number\n}>(), {\n\tavatarImage: undefined,\n\tdisplayName: undefined,\n\tuser: undefined,\n\turl: undefined,\n\tto: undefined,\n\tmargin: 2,\n\tsize: 20,\n})\n\nconst emit = defineEmits<{\n\t/**\n\t * The mouse click event\n\t */\n\tclick: [event: MouseEvent]\n}>()\n\ndefineSlots<{\n\t/**\n\t * Main Popover content on userbubble hover/focus\n\t */\n\tdefault?: Slot\n\n\t/**\n\t * Optional slot just after the name\n\t */\n\tname?: Slot\n}>()\n\n/**\n * Is the provided avatar url valid or not\n */\nconst isAvatarUrl = computed(() => {\n\tif (!props.avatarImage) {\n\t\treturn false\n\t}\n\n\ttry {\n\t\tconst url = new URL(props.avatarImage)\n\t\treturn !!url\n\t} catch {\n\t\treturn false\n\t}\n})\n\n/**\n * Do we have a custom avatar or not\n */\nconst isCustomAvatar = computed(() => !!props.avatarImage)\n\nconst avatarStyle = computed(() => ({\n\tmarginInlineStart: `${props.margin}px`,\n}))\n\n/**\n * Is the URL prop set\n */\nconst hasUrl = computed(() => {\n\tif (!props.url || props.url.trim() === '') {\n\t\treturn false\n\t}\n\ttry {\n\t\tconst url = new URL(props.url, props.url?.startsWith?.('/') ? window.location.href : undefined)\n\t\treturn !!url\n\t} catch {\n\t\twarn('[NcUserBubble] Invalid URL passed', { url: props.url })\n\t\treturn false\n\t}\n})\n\n/**\n * href attribute to pass to content container\n */\nconst href = computed(() => hasUrl.value ? props.url : undefined)\n\nconst contentComponent = computed(() => {\n\tif (hasUrl.value) {\n\t\treturn 'a'\n\t} else if (props.to) {\n\t\treturn RouterLink\n\t} else {\n\t\treturn 'div'\n\t}\n})\n\nconst contentStyle = computed(() => ({\n\theight: `${props.size}px`,\n\tlineHeight: `${props.size}px`,\n\tborderRadius: `${props.size / 2}px`,\n}))\n\nwatch([() => props.displayName, () => props.user], () => {\n\tif (!props.displayName && !props.user) {\n\t\twarn('[NcUserBubble] At least `displayName` or `user` property should be set.')\n\t}\n})\n</script>\n\n<template>\n\t<component\n\t\t:is=\"!!$slots.default ? NcPopover : NcUserBubbleDiv\"\n\t\tv-model:shown=\"isOpen\"\n\t\tclass=\"user-bubble__wrapper\"\n\t\ttrigger=\"hover focus\">\n\t\t<!-- Main userbubble structure -->\n\t\t<template #trigger=\"{ attrs }\">\n\t\t\t<component\n\t\t\t\t:is=\"contentComponent\"\n\t\t\t\tclass=\"user-bubble__content\"\n\t\t\t\t:class=\"{ 'user-bubble__content--primary': primary }\"\n\t\t\t\t:style=\"contentStyle\"\n\t\t\t\t:to\n\t\t\t\t:href\n\t\t\t\tv-bind=\"attrs\"\n\t\t\t\t@click=\"emit('click', $event)\">\n\t\t\t\t<!-- NcAvatar -->\n\t\t\t\t<NcAvatar\n\t\t\t\t\t:url=\"isCustomAvatar && isAvatarUrl ? avatarImage : undefined\"\n\t\t\t\t\t:icon-class=\"isCustomAvatar && !isAvatarUrl ? avatarImage : undefined\"\n\t\t\t\t\t:user=\"user\"\n\t\t\t\t\t:display-name=\"displayName\"\n\t\t\t\t\t:size=\"size - (margin * 2)\"\n\t\t\t\t\t:style=\"avatarStyle\"\n\t\t\t\t\t:disable-tooltip=\"true\"\n\t\t\t\t\t:disable-menu=\"true\"\n\t\t\t\t\t:hide-status=\"!showUserStatus\"\n\t\t\t\t\tclass=\"user-bubble__avatar\" />\n\n\t\t\t\t<!-- Name -->\n\t\t\t\t<span class=\"user-bubble__name\">\n\t\t\t\t\t{{ displayName || user }}\n\t\t\t\t</span>\n\n\t\t\t\t<span v-if=\"!!$slots.name\" class=\"user-bubble__secondary\">\n\t\t\t\t\t<slot name=\"name\" />\n\t\t\t\t</span>\n\t\t\t</component>\n\t\t</template>\n\n\t\t<slot />\n\t</component>\n</template>\n\n<style lang=\"scss\" scoped>\n.user-bubble {\n\t&__wrapper {\n\t\t// align inline with text\n\t\tdisplay: inline-block;\n\t\tvertical-align: middle;\n\t\t// shrink and allow grow to fit\n\t\tmin-width: 0;\n\t\tmax-width: 100%;\n\t}\n\n\t&__content {\n\t\tdisplay: inline-flex;\n\t\tmax-width: 100%;\n\t\tbackground-color: var(--color-background-dark);\n\n\t\t&--primary {\n\t\t\tcolor: var(--color-primary-element-text);\n\t\t\tbackground-color: var(--color-primary-element);\n\t\t}\n\n\t\t> :last-child {\n\t\t\t// border radius end padding\n\t\t\tpadding-inline-end: 8px;\n\t\t}\n\t}\n\n\t&__avatar {\n\t\talign-self: center;\n\t}\n\n\t&__name {\n\t\toverflow: hidden;\n\t\twhite-space: nowrap;\n\t\ttext-overflow: ellipsis;\n\t}\n\n\t&__name,\n\t&__secondary {\n\t\t// proper spacing between avatar, name & slot\n\t\tpadding-block: 0;\n\t\tpadding-inline: 4px 0;\n\t}\n}\n</style>\n"],"names":["_createElementBlock","_renderSlot","_useModel","_openBlock","_createBlock","_resolveDynamicComponent","$slots","_withCtx","_mergeProps","primary","to","_createVNode","avatarImage","user","displayName","size","margin","showUserStatus","_createElementVNode","_toDisplayString"],"mappings":"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"}
@@ -6,6 +6,8 @@ var mdiArrowRight = "M4,11V13H16L10.5,18.5L11.92,19.92L19.84,12L11.92,4.08L10.5,
6
6
  var mdiArrowTopRight = "M5,17.59L15.59,7H9V5H19V15H17V8.41L6.41,19L5,17.59Z";
7
7
  var mdiCalendarBlank = "M19,19H5V8H19M16,1V3H8V1H6V3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3H18V1";
8
8
  var mdiCheck = "M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z";
9
+ var mdiCheckboxBlankOutline = "M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z";
10
+ var mdiCheckboxMarked = "M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z";
9
11
  var mdiCheckboxMarkedCircle = "M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z";
10
12
  var mdiChevronDown = "M7.41,8.58L12,13.17L16.59,8.58L18,10L12,16L6,10L7.41,8.58Z";
11
13
  var mdiChevronLeft = "M15.41,16.58L10.83,12L15.41,7.41L14,6L8,12L14,18L15.41,16.58Z";
@@ -27,37 +29,43 @@ var mdiMenuOpen = "M21,15.61L19.59,17L14.58,12L19.59,7L21,8.39L17.44,12L21,15.61
27
29
  var mdiOpenInNew = "M14,3V5H17.59L7.76,14.83L9.17,16.24L19,6.41V10H21V3M19,19H5V5H12V3H5C3.89,3 3,3.9 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V12H19V19Z";
28
30
  var mdiPause = "M14,19H18V5H14M6,19H10V5H6V19Z";
29
31
  var mdiPlay = "M8,5.14V19.14L19,12.14L8,5.14Z";
32
+ var mdiRadioboxBlank = "M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2Z";
33
+ var mdiRadioboxMarked = "M12,20A8,8 0 0,1 4,12A8,8 0 0,1 12,4A8,8 0 0,1 20,12A8,8 0 0,1 12,20M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12A10,10 0 0,0 12,2M12,7A5,5 0 0,0 7,12A5,5 0 0,0 12,17A5,5 0 0,0 17,12A5,5 0 0,0 12,7Z";
30
34
  var mdiUndo = "M12.5,8C9.85,8 7.45,9 5.6,10.6L2,7V16H11L7.38,12.38C8.77,11.22 10.54,10.5 12.5,10.5C16.04,10.5 19.05,12.81 20.1,16L22.47,15.22C21.08,11.03 17.15,8 12.5,8Z";
31
35
  export {
32
- mdiPause as A,
33
- mdiPlay as B,
34
- mdiMenuOpen as C,
35
- mdiMenu as D,
36
+ mdiClock as A,
37
+ mdiCalendarBlank as B,
38
+ mdiCog as C,
39
+ mdiCogOutline as D,
40
+ mdiPause as E,
41
+ mdiPlay as F,
42
+ mdiMenuOpen as G,
43
+ mdiMenu as H,
36
44
  mdiUndo as a,
37
45
  mdiClose as b,
38
46
  mdiChevronRight as c,
39
47
  mdiCheck as d,
40
48
  mdiContentCopy as e,
41
- mdiAlertCircleOutline as f,
42
- mdiAlert as g,
43
- mdiInformation as h,
44
- mdiCheckboxMarkedCircle as i,
45
- mdiAlertDecagram as j,
46
- mdiCreation as k,
47
- mdiEyeOff as l,
49
+ mdiRadioboxMarked as f,
50
+ mdiRadioboxBlank as g,
51
+ mdiCheckboxMarked as h,
52
+ mdiCheckboxBlankOutline as i,
53
+ mdiAlertCircleOutline as j,
54
+ mdiAlert as k,
55
+ mdiInformation as l,
48
56
  mdiArrowRight as m,
49
- mdiEye as n,
50
- mdiOpenInNew as o,
51
- mdiArrowTopRight as p,
52
- mdiCloseCircleOutline as q,
53
- mdiArrowLeft as r,
54
- mdiDotsHorizontal as s,
55
- mdiChevronUp as t,
56
- mdiChevronDown as u,
57
- mdiChevronLeft as v,
58
- mdiClock as w,
59
- mdiCalendarBlank as x,
60
- mdiCog as y,
61
- mdiCogOutline as z
57
+ mdiCheckboxMarkedCircle as n,
58
+ mdiAlertDecagram as o,
59
+ mdiCreation as p,
60
+ mdiEyeOff as q,
61
+ mdiEye as r,
62
+ mdiOpenInNew as s,
63
+ mdiArrowTopRight as t,
64
+ mdiCloseCircleOutline as u,
65
+ mdiArrowLeft as v,
66
+ mdiDotsHorizontal as w,
67
+ mdiChevronUp as x,
68
+ mdiChevronDown as y,
69
+ mdiChevronLeft as z
62
70
  };
63
- //# sourceMappingURL=mdi-DvQxv1t7.mjs.map
71
+ //# sourceMappingURL=mdi-CpchYUUV.mjs.map