@nextcloud/vue 9.7.0 → 9.8.1
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.
- package/CHANGELOG.md +23 -0
- package/dist/assets/{NcActionButton-Bb0ihLdt.css → NcActionButton-DLer-aUY.css} +3 -2
- package/dist/assets/{NcActionCheckbox-DLJQfCUI.css → NcActionCheckbox-wD8m_a8-.css} +3 -2
- package/dist/assets/{NcActionInput-BO4gR6sg.css → NcActionInput-t9WvlgV0.css} +66 -66
- package/dist/assets/{NcActionLink-DAEr-vmd.css → NcActionLink-b4Ph5q10.css} +3 -2
- package/dist/assets/{NcActionRadio-Bd4RFH-l.css → NcActionRadio-D2rLM1ci.css} +3 -2
- package/dist/assets/{NcActionRouter-DeYzeM5W.css → NcActionRouter-BWXfCfxM.css} +3 -2
- package/dist/assets/{NcActionText-D9InmayH.css → NcActionText-Dzegj6AY.css} +3 -2
- package/dist/assets/{NcActionTextEditable-TPYz4ma-.css → NcActionTextEditable-BlZeHZ7J.css} +66 -66
- package/dist/assets/{NcAppNavigation-BSo8jV19.css → NcAppNavigation-2b1jxOXM.css} +18 -14
- package/dist/assets/{NcAppNavigationCaption-HUg9fMCm.css → NcAppNavigationCaption-ggcWspH2.css} +8 -8
- package/dist/assets/{NcAppNavigationItem-qicc4X_c.css → NcAppNavigationItem-BsuZoJAq.css} +78 -40
- package/dist/assets/{NcAppNavigationNewItem-e_CtdnzP.css → NcAppNavigationNewItem-MaYQVcKF.css} +42 -4
- package/dist/assets/{NcAppNavigationSettings-BmfpoWXN.css → NcAppNavigationSettings-HQEDobBQ.css} +1 -1
- package/dist/assets/NcAppSettingsDialog-HsZoLuDy.css +221 -0
- package/dist/assets/{NcAppSettingsSection-ObwpPdgW.css → NcAppSettingsSection-DIw8GLHR.css} +7 -7
- package/dist/assets/{NcAppSidebar-Ci7hXMpX.css → NcAppSidebar-dHtSShIl.css} +116 -70
- package/dist/assets/{NcAssistantIcon-CxXrcBfu.css → NcAssistantIcon-CsBmzIxJ.css} +4 -4
- package/dist/assets/{NcAvatar-CuPj3fbb.css → NcAvatar-Bs7qEhkA.css} +25 -25
- package/dist/assets/{NcBreadcrumb-D9N_qB_o.css → NcBreadcrumb-BxhZKQlW.css} +16 -16
- package/dist/assets/{NcButton-CCY9S6Db.css → NcButton-Bf9wuDV-.css} +53 -50
- package/dist/assets/{NcCheckboxRadioSwitch-DRqOiQON.css → NcCheckboxRadioSwitch-BlQSZVW0.css} +51 -49
- package/dist/assets/{NcColorPicker-CCanY5eB.css → NcColorPicker-DVYGs8R3.css} +32 -32
- package/dist/assets/{NcContent-CVIwhwfc.css → NcContent-DX4Rs6Pc.css} +22 -11
- package/dist/assets/{NcEmptyContent-CLjlZ-UT.css → NcEmptyContent-DJMDuGVz.css} +10 -10
- package/dist/assets/{NcFormBoxItem-CATNOTQx.css → NcFormBoxItem-Bjbi17-B.css} +4 -0
- package/dist/assets/{NcFormGroup-BjWhd5Ky.css → NcFormGroup-qFucmL8a.css} +1 -1
- package/dist/assets/{NcHotkeyList-Braxeyah.css → NcHotkeyList-BfrEkKmK.css} +1 -1
- package/dist/assets/{NcIconToggleSwitch-saytabt5.css → NcIconToggleSwitch-V-AKJgPA.css} +2 -2
- package/dist/assets/NcInputConfirmCancel-BEmwC87z.css +53 -0
- package/dist/assets/{NcInputField-DR0FULeu.css → NcInputField-DpyFJ1xw.css} +44 -44
- package/dist/assets/NcListItem-1uR7AJIf.css +219 -0
- package/dist/assets/{NcModal-RDmyJqvC.css → NcModal-D81luiuU.css} +59 -59
- package/dist/assets/{NcNoteCard-DZSuYX4-.css → NcNoteCard-DfescGKl.css} +11 -11
- package/dist/assets/{NcProgressBar-D1DYRrCN.css → NcProgressBar-B6wveIA1.css} +2 -2
- package/dist/assets/{NcRadioGroupButton-xGU7fVa3.css → NcRadioGroupButton-DUF_3DDU.css} +1 -1
- package/dist/assets/{NcRelatedResourcesPanel-Bx4CA8ph.css → NcRelatedResourcesPanel-CiG_Ixb6.css} +30 -30
- package/dist/assets/{NcRichContenteditable-BXRR0rmI.css → NcRichContenteditable-DNABzVif.css} +12 -12
- package/dist/assets/{NcRichText-9e40m1to.css → NcRichText-BTu-LT3p.css} +93 -93
- package/dist/assets/{NcTextArea-DF9NgPUa.css → NcTextArea-BxGe3Lqn.css} +28 -28
- package/dist/assets/{referencePickerModal-CpzDUJ5f.css → referencePickerModal-Dod7nzta.css} +18 -18
- package/dist/chunks/{NcActionButton-BuRnYpJX.mjs → NcActionButton-BO5T5ePT.mjs} +3 -3
- package/dist/chunks/{NcActionButton-BuRnYpJX.mjs.map → NcActionButton-BO5T5ePT.mjs.map} +1 -1
- package/dist/chunks/{NcActionButtonGroup-CgYSlRXJ.mjs → NcActionButtonGroup-B9LfyE-G.mjs} +2 -2
- package/dist/chunks/{NcActionButtonGroup-CgYSlRXJ.mjs.map → NcActionButtonGroup-B9LfyE-G.mjs.map} +1 -1
- package/dist/chunks/{NcActionCheckbox-CjawS972.mjs → NcActionCheckbox-DBqiK-AZ.mjs} +3 -3
- package/dist/chunks/{NcActionCheckbox-CjawS972.mjs.map → NcActionCheckbox-DBqiK-AZ.mjs.map} +1 -1
- package/dist/chunks/{NcActionInput-CKbFgbxQ.mjs → NcActionInput-BO0lB4VP.mjs} +7 -7
- package/dist/chunks/{NcActionInput-CKbFgbxQ.mjs.map → NcActionInput-BO0lB4VP.mjs.map} +1 -1
- package/dist/chunks/{NcActionLink-CCszAEdZ.mjs → NcActionLink-BFiaYt9A.mjs} +2 -2
- package/dist/chunks/{NcActionLink-CCszAEdZ.mjs.map → NcActionLink-BFiaYt9A.mjs.map} +1 -1
- package/dist/chunks/{NcActionRadio-BV9Ra5tq.mjs → NcActionRadio-BA08CAtA.mjs} +3 -3
- package/dist/chunks/{NcActionRadio-BV9Ra5tq.mjs.map → NcActionRadio-BA08CAtA.mjs.map} +1 -1
- package/dist/chunks/{NcActionRouter-CvDVCQiQ.mjs → NcActionRouter-vYFtIOzD.mjs} +2 -2
- package/dist/chunks/{NcActionRouter-CvDVCQiQ.mjs.map → NcActionRouter-vYFtIOzD.mjs.map} +1 -1
- package/dist/chunks/{NcActionText-SU4ghOlw.mjs → NcActionText-CQ9qwJ0p.mjs} +2 -2
- package/dist/chunks/{NcActionText-SU4ghOlw.mjs.map → NcActionText-CQ9qwJ0p.mjs.map} +1 -1
- package/dist/chunks/{NcActionTextEditable-BC66QDvV.mjs → NcActionTextEditable-B8y_GEre.mjs} +4 -4
- package/dist/chunks/NcActionTextEditable-B8y_GEre.mjs.map +1 -0
- package/dist/chunks/{NcActions-CeP_c9MH.mjs → NcActions-CUmcZ3C3.mjs} +3 -3
- package/dist/chunks/{NcActions-CeP_c9MH.mjs.map → NcActions-CUmcZ3C3.mjs.map} +1 -1
- package/dist/chunks/{NcAppContent-CdEdgX3o.mjs → NcAppContent--92JdjRr.mjs} +4 -4
- package/dist/chunks/{NcAppContent-CdEdgX3o.mjs.map → NcAppContent--92JdjRr.mjs.map} +1 -1
- package/dist/chunks/{NcAppNavigation-C2njwnqV.mjs → NcAppNavigation-Bb9-C2eO.mjs} +13 -9
- package/dist/chunks/NcAppNavigation-Bb9-C2eO.mjs.map +1 -0
- package/dist/chunks/{NcAppNavigationCaption-C7cl2M2w.mjs → NcAppNavigationCaption-E9iJtiQt.mjs} +4 -4
- package/dist/chunks/{NcAppNavigationCaption-C7cl2M2w.mjs.map → NcAppNavigationCaption-E9iJtiQt.mjs.map} +1 -1
- package/dist/chunks/{NcAppNavigationItem-Csh8IBIf.mjs → NcAppNavigationItem-BFAIHyTL.mjs} +21 -15
- package/dist/chunks/NcAppNavigationItem-BFAIHyTL.mjs.map +1 -0
- package/dist/chunks/{NcAppNavigationNew-BkybFzV0.mjs → NcAppNavigationNew-Dspn3-4i.mjs} +2 -2
- package/dist/chunks/{NcAppNavigationNew-BkybFzV0.mjs.map → NcAppNavigationNew-Dspn3-4i.mjs.map} +1 -1
- package/dist/chunks/{NcAppNavigationNewItem-DsLct9Bj.mjs → NcAppNavigationNewItem-Cg8IJ6ZV.mjs} +4 -4
- package/dist/chunks/{NcAppNavigationNewItem-DsLct9Bj.mjs.map → NcAppNavigationNewItem-Cg8IJ6ZV.mjs.map} +1 -1
- package/dist/chunks/{NcAppNavigationSearch-C5XwT74Z.mjs → NcAppNavigationSearch-CiOKjV3M.mjs} +3 -3
- package/dist/chunks/{NcAppNavigationSearch-C5XwT74Z.mjs.map → NcAppNavigationSearch-CiOKjV3M.mjs.map} +1 -1
- package/dist/chunks/{NcAppNavigationSettings-Drwi5qgh.mjs → NcAppNavigationSettings-fbuQmy-q.mjs} +7 -7
- package/dist/chunks/{NcAppNavigationSettings-Drwi5qgh.mjs.map → NcAppNavigationSettings-fbuQmy-q.mjs.map} +1 -1
- package/dist/chunks/{NcAppSettingsDialog-CjOvPWbc.mjs → NcAppSettingsDialog-DByPnndK.mjs} +24 -18
- package/dist/chunks/NcAppSettingsDialog-DByPnndK.mjs.map +1 -0
- package/dist/chunks/{NcAppSettingsSection-B-ak1kbx.mjs → NcAppSettingsSection-BosSmisT.mjs} +5 -5
- package/dist/chunks/{NcAppSettingsSection-B-ak1kbx.mjs.map → NcAppSettingsSection-BosSmisT.mjs.map} +1 -1
- package/dist/chunks/{NcAppSettingsShortcutsSection-yDWzNzFB.mjs → NcAppSettingsShortcutsSection-DgqVuZGx.mjs} +3 -3
- package/dist/chunks/{NcAppSettingsShortcutsSection-yDWzNzFB.mjs.map → NcAppSettingsShortcutsSection-DgqVuZGx.mjs.map} +1 -1
- package/dist/chunks/{NcAppSidebar-BvXH4I-d.mjs → NcAppSidebar-Ch7Vp7q5.mjs} +23 -18
- package/dist/chunks/NcAppSidebar-Ch7Vp7q5.mjs.map +1 -0
- package/dist/chunks/{NcAppSidebarHeader.vue_vue_type_script_setup_true_lang-Bk4yFBHY.mjs → NcAppSidebarHeader.vue_vue_type_script_setup_true_lang-C-QhdyiN.mjs} +4 -4
- package/dist/chunks/{NcAppSidebarHeader.vue_vue_type_script_setup_true_lang-Bk4yFBHY.mjs.map → NcAppSidebarHeader.vue_vue_type_script_setup_true_lang-C-QhdyiN.mjs.map} +1 -1
- package/dist/chunks/{NcAssistantButton-DxNbEbqt.mjs → NcAssistantButton-CTrCv4CO.mjs} +10 -10
- package/dist/chunks/NcAssistantButton-CTrCv4CO.mjs.map +1 -0
- package/dist/chunks/{NcAssistantContent-DWv2sak_.mjs → NcAssistantContent-CeuwcdMY.mjs} +2 -2
- package/dist/chunks/{NcAssistantContent-DWv2sak_.mjs.map → NcAssistantContent-CeuwcdMY.mjs.map} +1 -1
- package/dist/chunks/{NcAssistantIcon-Cf0B3EsL.mjs → NcAssistantIcon-Dpp9_LUg.mjs} +4 -4
- package/dist/chunks/{NcAssistantIcon-Cf0B3EsL.mjs.map → NcAssistantIcon-Dpp9_LUg.mjs.map} +1 -1
- package/dist/chunks/{NcAvatar-D9yNUkjq.mjs → NcAvatar-M3-CbKbq.mjs} +14 -14
- package/dist/chunks/{NcAvatar-D9yNUkjq.mjs.map → NcAvatar-M3-CbKbq.mjs.map} +1 -1
- package/dist/chunks/{NcBlurHash-B3MufoB_.mjs → NcBlurHash-yPfSKY7W.mjs} +6 -6
- package/dist/chunks/{NcBlurHash-B3MufoB_.mjs.map → NcBlurHash-yPfSKY7W.mjs.map} +1 -1
- package/dist/chunks/{NcBreadcrumb-CfFsCTmn.mjs → NcBreadcrumb-BeDMWE_b.mjs} +5 -5
- package/dist/chunks/{NcBreadcrumb-CfFsCTmn.mjs.map → NcBreadcrumb-BeDMWE_b.mjs.map} +1 -1
- package/dist/chunks/{NcBreadcrumbs-bX1x_cye.mjs → NcBreadcrumbs-CuQDDvin.mjs} +6 -6
- package/dist/chunks/{NcBreadcrumbs-bX1x_cye.mjs.map → NcBreadcrumbs-CuQDDvin.mjs.map} +1 -1
- package/dist/chunks/{NcButton-lQra4n2g.mjs → NcButton-QbPBynlU.mjs} +10 -9
- package/dist/chunks/NcButton-QbPBynlU.mjs.map +1 -0
- package/dist/chunks/{NcCheckboxRadioSwitch-VV_Err2A.mjs → NcCheckboxRadioSwitch-D8Dfv4iw.mjs} +9 -9
- package/dist/chunks/NcCheckboxRadioSwitch-D8Dfv4iw.mjs.map +1 -0
- package/dist/chunks/{NcChip-JjodlHFu.mjs → NcChip-nVHnbjaY.mjs} +13 -13
- package/dist/chunks/{NcChip-JjodlHFu.mjs.map → NcChip-nVHnbjaY.mjs.map} +1 -1
- package/dist/chunks/{NcCollectionList-DK050qCv.mjs → NcCollectionList-CO-iHqi6.mjs} +7 -7
- package/dist/chunks/{NcCollectionList-DK050qCv.mjs.map → NcCollectionList-CO-iHqi6.mjs.map} +1 -1
- package/dist/chunks/{NcColorPicker-B1FEzC_4.mjs → NcColorPicker-D6NbBOX3.mjs} +15 -15
- package/dist/chunks/{NcColorPicker-B1FEzC_4.mjs.map → NcColorPicker-D6NbBOX3.mjs.map} +1 -1
- package/dist/chunks/{NcContent-bQ5c_Pwd.mjs → NcContent-BhMoPROW.mjs} +9 -8
- package/dist/chunks/{NcContent-bQ5c_Pwd.mjs.map → NcContent-BhMoPROW.mjs.map} +1 -1
- package/dist/chunks/{NcCounterBubble-VUNXKsnk.mjs → NcCounterBubble-CV0YMrXW.mjs} +4 -4
- package/dist/chunks/{NcCounterBubble-VUNXKsnk.mjs.map → NcCounterBubble-CV0YMrXW.mjs.map} +1 -1
- package/dist/chunks/{NcDashboardWidget-CCeqnB6g.mjs → NcDashboardWidget-ftOfMTzx.mjs} +5 -5
- package/dist/chunks/{NcDashboardWidget-CCeqnB6g.mjs.map → NcDashboardWidget-ftOfMTzx.mjs.map} +1 -1
- package/dist/chunks/{NcDashboardWidgetItem-i7xArH0I.mjs → NcDashboardWidgetItem-BwwFiNOL.mjs} +4 -4
- package/dist/chunks/{NcDashboardWidgetItem-i7xArH0I.mjs.map → NcDashboardWidgetItem-BwwFiNOL.mjs.map} +1 -1
- package/dist/chunks/{NcDateTime.vue_vue_type_script_setup_true_lang-B4upiZjL.mjs → NcDateTime.vue_vue_type_script_setup_true_lang-BJuPH7S7.mjs} +2 -2
- package/dist/chunks/NcDateTime.vue_vue_type_script_setup_true_lang-BJuPH7S7.mjs.map +1 -0
- package/dist/chunks/{NcDateTimePicker-4-6ux1S_.mjs → NcDateTimePicker-CK4rhfEB.mjs} +18 -18
- package/dist/chunks/{NcDateTimePicker-4-6ux1S_.mjs.map → NcDateTimePicker-CK4rhfEB.mjs.map} +1 -1
- package/dist/chunks/{NcDateTimePickerNative-XO_O44n2.mjs → NcDateTimePickerNative-BeM4WOA4.mjs} +8 -8
- package/dist/chunks/{NcDateTimePickerNative-XO_O44n2.mjs.map → NcDateTimePickerNative-BeM4WOA4.mjs.map} +1 -1
- package/dist/chunks/{NcDialog-DnJfLwGR.mjs → NcDialog-kwzJ3A4X.mjs} +9 -9
- package/dist/chunks/{NcDialog-DnJfLwGR.mjs.map → NcDialog-kwzJ3A4X.mjs.map} +1 -1
- package/dist/chunks/{NcDialogButton.vue_vue_type_script_setup_true_lang-DMoLf2ll.mjs → NcDialogButton.vue_vue_type_script_setup_true_lang-Cn-8O9iZ.mjs} +12 -12
- package/dist/chunks/{NcDialogButton.vue_vue_type_script_setup_true_lang-DMoLf2ll.mjs.map → NcDialogButton.vue_vue_type_script_setup_true_lang-Cn-8O9iZ.mjs.map} +1 -1
- package/dist/chunks/{NcEmojiPicker-Cuy9A4DP.mjs → NcEmojiPicker-Bpw-68QP.mjs} +6 -6
- package/dist/chunks/{NcEmojiPicker-Cuy9A4DP.mjs.map → NcEmojiPicker-Bpw-68QP.mjs.map} +1 -1
- package/dist/chunks/{NcEmptyContent-CDgWCt_m.mjs → NcEmptyContent-CGAPqk4S.mjs} +7 -7
- package/dist/chunks/{NcEmptyContent-CDgWCt_m.mjs.map → NcEmptyContent-CGAPqk4S.mjs.map} +1 -1
- package/dist/chunks/{NcFilePicker-CrHd83Bv.mjs → NcFilePicker-nPCwHMqj.mjs} +18 -18
- package/dist/chunks/{NcFilePicker-CrHd83Bv.mjs.map → NcFilePicker-nPCwHMqj.mjs.map} +1 -1
- package/dist/chunks/{NcFormBox-wP5mpW88.mjs → NcFormBox-ClWfuBWz.mjs} +2 -2
- package/dist/chunks/{NcFormBox-wP5mpW88.mjs.map → NcFormBox-ClWfuBWz.mjs.map} +1 -1
- package/dist/chunks/{NcFormBoxButton-JvZ6_2E3.mjs → NcFormBoxButton-i4i3Lt_Q.mjs} +8 -8
- package/dist/chunks/{NcFormBoxButton-JvZ6_2E3.mjs.map → NcFormBoxButton-i4i3Lt_Q.mjs.map} +1 -1
- package/dist/chunks/{NcFormBoxCopyButton.vue_vue_type_script_setup_true_lang-DhKiWUS8.mjs → NcFormBoxCopyButton.vue_vue_type_script_setup_true_lang-NfKiRrIn.mjs} +8 -8
- package/dist/chunks/{NcFormBoxCopyButton.vue_vue_type_script_setup_true_lang-DhKiWUS8.mjs.map → NcFormBoxCopyButton.vue_vue_type_script_setup_true_lang-NfKiRrIn.mjs.map} +1 -1
- package/dist/chunks/{NcFormBoxItem-B7YVodqN.mjs → NcFormBoxItem-BTB68AEB.mjs} +10 -10
- package/dist/chunks/{NcFormBoxItem-B7YVodqN.mjs.map → NcFormBoxItem-BTB68AEB.mjs.map} +1 -1
- package/dist/chunks/{NcFormBoxSwitch-DP4dD4xe.mjs → NcFormBoxSwitch-DlNcJ1q7.mjs} +8 -8
- package/dist/chunks/{NcFormBoxSwitch-DP4dD4xe.mjs.map → NcFormBoxSwitch-DlNcJ1q7.mjs.map} +1 -1
- package/dist/chunks/{NcFormGroup-B3a2iUnT.mjs → NcFormGroup-DvLGFMdb.mjs} +7 -7
- package/dist/chunks/{NcFormGroup-B3a2iUnT.mjs.map → NcFormGroup-DvLGFMdb.mjs.map} +1 -1
- package/dist/chunks/{NcHeaderButton-CXu9xIQP.mjs → NcHeaderButton-m4oAOSTa.mjs} +6 -6
- package/dist/chunks/{NcHeaderButton-CXu9xIQP.mjs.map → NcHeaderButton-m4oAOSTa.mjs.map} +1 -1
- package/dist/chunks/{NcHeaderMenu-CYU4Y3h5.mjs → NcHeaderMenu-DRxcyWNX.mjs} +10 -10
- package/dist/chunks/{NcHeaderMenu-CYU4Y3h5.mjs.map → NcHeaderMenu-DRxcyWNX.mjs.map} +1 -1
- package/dist/chunks/{NcHotkey-B0qDRy1t.mjs → NcHotkey-C-TYyC8X.mjs} +3 -3
- package/dist/chunks/{NcHotkey-B0qDRy1t.mjs.map → NcHotkey-C-TYyC8X.mjs.map} +1 -1
- package/dist/chunks/{NcHotkeyList-lslhX0EJ.mjs → NcHotkeyList-CmMgGhMr.mjs} +5 -5
- package/dist/chunks/NcHotkeyList-CmMgGhMr.mjs.map +1 -0
- package/dist/chunks/{NcIconSvgWrapper-De-2-ukl.mjs → NcIconSvgWrapper-g8ubWhoz.mjs} +6 -6
- package/dist/chunks/{NcIconSvgWrapper-De-2-ukl.mjs.map → NcIconSvgWrapper-g8ubWhoz.mjs.map} +1 -1
- package/dist/chunks/{NcIconToggleSwitch-B7kfYo0B.mjs → NcIconToggleSwitch-CbfRwb67.mjs} +7 -7
- package/dist/chunks/{NcIconToggleSwitch-B7kfYo0B.mjs.map → NcIconToggleSwitch-CbfRwb67.mjs.map} +1 -1
- package/dist/chunks/{NcInputConfirmCancel-xoQuby4k.mjs → NcInputConfirmCancel-B6qC3s63.mjs} +16 -11
- package/dist/chunks/NcInputConfirmCancel-B6qC3s63.mjs.map +1 -0
- package/dist/chunks/{NcInputField-CPL-a_MM.mjs → NcInputField-B1bGxYHt.mjs} +28 -28
- package/dist/chunks/{NcInputField-CPL-a_MM.mjs.map → NcInputField-B1bGxYHt.mjs.map} +1 -1
- package/dist/chunks/{NcKbd-Caeq706M.mjs → NcKbd-Iyp0KDp4.mjs} +2 -2
- package/dist/chunks/{NcKbd-Caeq706M.mjs.map → NcKbd-Iyp0KDp4.mjs.map} +1 -1
- package/dist/chunks/{NcListItem-C0y1LfQx.mjs → NcListItem-Y5a098Cw.mjs} +15 -8
- package/dist/chunks/NcListItem-Y5a098Cw.mjs.map +1 -0
- package/dist/chunks/{NcListItemIcon-ByoiA9YZ.mjs → NcListItemIcon-D_f5AGrh.mjs} +3 -3
- package/dist/chunks/{NcListItemIcon-ByoiA9YZ.mjs.map → NcListItemIcon-D_f5AGrh.mjs.map} +1 -1
- package/dist/chunks/{NcLoadingIcon-CInLzPtA.mjs → NcLoadingIcon-BOVpFVQz.mjs} +5 -5
- package/dist/chunks/{NcLoadingIcon-CInLzPtA.mjs.map → NcLoadingIcon-BOVpFVQz.mjs.map} +1 -1
- package/dist/chunks/{NcModal-CDj4hQx7.mjs → NcModal-DUWLRm_F.mjs} +28 -28
- package/dist/chunks/{NcModal-CDj4hQx7.mjs.map → NcModal-DUWLRm_F.mjs.map} +1 -1
- package/dist/chunks/{NcNoteCard-CWiO3Dse.mjs → NcNoteCard-mI7qVZ9j.mjs} +9 -9
- package/dist/chunks/{NcNoteCard-CWiO3Dse.mjs.map → NcNoteCard-mI7qVZ9j.mjs.map} +1 -1
- package/dist/chunks/{NcPasswordField-C7yuRADA.mjs → NcPasswordField-Be5_qcfm.mjs} +9 -9
- package/dist/chunks/{NcPasswordField-C7yuRADA.mjs.map → NcPasswordField-Be5_qcfm.mjs.map} +1 -1
- package/dist/chunks/{NcProgressBar-JyXXoHLT.mjs → NcProgressBar-C-ane-Ni.mjs} +10 -10
- package/dist/chunks/{NcProgressBar-JyXXoHLT.mjs.map → NcProgressBar-C-ane-Ni.mjs.map} +1 -1
- package/dist/chunks/{NcRadioGroup-LkOsE5Mc.mjs → NcRadioGroup-BzW4XHoK.mjs} +6 -6
- package/dist/chunks/{NcRadioGroup-LkOsE5Mc.mjs.map → NcRadioGroup-BzW4XHoK.mjs.map} +1 -1
- package/dist/chunks/{NcRadioGroupButton-BtE_SLVd.mjs → NcRadioGroupButton-CXKQMID9.mjs} +9 -9
- package/dist/chunks/{NcRadioGroupButton-BtE_SLVd.mjs.map → NcRadioGroupButton-CXKQMID9.mjs.map} +1 -1
- package/dist/chunks/{NcRelatedResourcesPanel-B01Lid3d.mjs → NcRelatedResourcesPanel-C0j0Fs4r.mjs} +11 -11
- package/dist/chunks/NcRelatedResourcesPanel-C0j0Fs4r.mjs.map +1 -0
- package/dist/chunks/{NcRichContenteditable-DeN1H5pQ.mjs → NcRichContenteditable-DO3_WniI.mjs} +17 -17
- package/dist/chunks/NcRichContenteditable-DO3_WniI.mjs.map +1 -0
- package/dist/chunks/{NcRichText-DGV7OHFb.mjs → NcRichText-BOBQq7Od.mjs} +19 -12
- package/dist/chunks/NcRichText-BOBQq7Od.mjs.map +1 -0
- package/dist/chunks/{NcSavingIndicatorIcon.vue_vue_type_script_setup_true_lang-CA0r_04W.mjs → NcSavingIndicatorIcon.vue_vue_type_script_setup_true_lang-DbQnMYZm.mjs} +5 -5
- package/dist/chunks/{NcSavingIndicatorIcon.vue_vue_type_script_setup_true_lang-CA0r_04W.mjs.map → NcSavingIndicatorIcon.vue_vue_type_script_setup_true_lang-DbQnMYZm.mjs.map} +1 -1
- package/dist/chunks/{NcSelect-Ba-lsVsl.mjs → NcSelect-BOFzoCwK.mjs} +4 -4
- package/dist/chunks/{NcSelect-Ba-lsVsl.mjs.map → NcSelect-BOFzoCwK.mjs.map} +1 -1
- package/dist/chunks/{NcSelectTags-cNBPJ5FM.mjs → NcSelectTags-D7qWNjXa.mjs} +3 -3
- package/dist/chunks/{NcSelectTags-cNBPJ5FM.mjs.map → NcSelectTags-D7qWNjXa.mjs.map} +1 -1
- package/dist/chunks/{NcSelectUsers-LqSEQ2A_.mjs → NcSelectUsers-CI8twLn9.mjs} +3 -3
- package/dist/chunks/{NcSelectUsers-LqSEQ2A_.mjs.map → NcSelectUsers-CI8twLn9.mjs.map} +1 -1
- package/dist/chunks/{NcSettingsSection-DnzR8DRc.mjs → NcSettingsSection-DmfxX2se.mjs} +6 -6
- package/dist/chunks/{NcSettingsSection-DnzR8DRc.mjs.map → NcSettingsSection-DmfxX2se.mjs.map} +1 -1
- package/dist/chunks/{NcSettingsSelectGroup-C15v3EvD.mjs → NcSettingsSelectGroup-TN64yH4k.mjs} +3 -3
- package/dist/chunks/{NcSettingsSelectGroup-C15v3EvD.mjs.map → NcSettingsSelectGroup-TN64yH4k.mjs.map} +1 -1
- package/dist/chunks/{NcTextArea-CseOD9aM.mjs → NcTextArea-Dxzj4zdb.mjs} +23 -23
- package/dist/chunks/{NcTextArea-CseOD9aM.mjs.map → NcTextArea-Dxzj4zdb.mjs.map} +1 -1
- package/dist/chunks/{NcTextField.vue_vue_type_script_setup_true_lang-1ABbHJ0f.mjs → NcTextField.vue_vue_type_script_setup_true_lang-BQHjkK8r.mjs} +7 -7
- package/dist/chunks/{NcTextField.vue_vue_type_script_setup_true_lang-1ABbHJ0f.mjs.map → NcTextField.vue_vue_type_script_setup_true_lang-BQHjkK8r.mjs.map} +1 -1
- package/dist/chunks/{NcTimezonePicker.vue_vue_type_script_setup_true_lang-lGMjb2u1.mjs → NcTimezonePicker.vue_vue_type_script_setup_true_lang-Csd1JQe6.mjs} +4 -4
- package/dist/chunks/{NcTimezonePicker.vue_vue_type_script_setup_true_lang-lGMjb2u1.mjs.map → NcTimezonePicker.vue_vue_type_script_setup_true_lang-Csd1JQe6.mjs.map} +1 -1
- package/dist/chunks/{NcUserBubble-D00m2qmd.mjs → NcUserBubble-CDQa0hGy.mjs} +13 -13
- package/dist/chunks/{NcUserBubble-D00m2qmd.mjs.map → NcUserBubble-CDQa0hGy.mjs.map} +1 -1
- package/dist/chunks/{NcUserStatusIcon-CNh1vXUF.mjs → NcUserStatusIcon-DsviB2Cr.mjs} +2 -2
- package/dist/chunks/{NcUserStatusIcon-CNh1vXUF.mjs.map → NcUserStatusIcon-DsviB2Cr.mjs.map} +1 -1
- package/dist/chunks/{_l10n-BCg4udFv.mjs → _l10n-CG4CuN3H.mjs} +3 -3
- package/dist/chunks/_l10n-CG4CuN3H.mjs.map +1 -0
- package/dist/chunks/{autolink-_k1FETYm.mjs → autolink-BT8u-IL-.mjs} +4 -4
- package/dist/chunks/{autolink-_k1FETYm.mjs.map → autolink-BT8u-IL-.mjs.map} +1 -1
- package/dist/chunks/{colors-CSua0q55.mjs → colors-BDeMBgfq.mjs} +6 -2
- package/dist/chunks/{colors-CSua0q55.mjs.map → colors-BDeMBgfq.mjs.map} +1 -1
- package/dist/chunks/legacy-BoqDmOCa.mjs +9 -0
- package/dist/chunks/legacy-BoqDmOCa.mjs.map +1 -0
- package/dist/chunks/{referencePickerModal-Bsq4XIcs.mjs → referencePickerModal-B4bsiMOy.mjs} +19 -19
- package/dist/chunks/referencePickerModal-B4bsiMOy.mjs.map +1 -0
- package/dist/chunks/{useCopy--plF8q1P.mjs → useCopy-PckLYUAU.mjs} +2 -2
- package/dist/chunks/{useCopy--plF8q1P.mjs.map → useCopy-PckLYUAU.mjs.map} +1 -1
- package/dist/components/NcActionButton/index.mjs +1 -1
- package/dist/components/NcActionButtonGroup/index.mjs +1 -1
- package/dist/components/NcActionCheckbox/index.mjs +1 -1
- package/dist/components/NcActionInput/NcActionInput.vue.d.ts +10 -18
- package/dist/components/NcActionInput/index.mjs +1 -1
- package/dist/components/NcActionLink/index.mjs +1 -1
- package/dist/components/NcActionRadio/index.mjs +1 -1
- package/dist/components/NcActionRouter/index.mjs +1 -1
- package/dist/components/NcActionText/index.mjs +1 -1
- package/dist/components/NcActionTextEditable/index.mjs +1 -1
- package/dist/components/NcActions/index.mjs +1 -1
- package/dist/components/NcAppContent/index.mjs +1 -1
- package/dist/components/NcAppNavigation/index.mjs +1 -1
- package/dist/components/NcAppNavigationCaption/index.mjs +1 -1
- package/dist/components/NcAppNavigationItem/NcAppNavigationIconCollapsible.vue.d.ts +3 -1
- package/dist/components/NcAppNavigationItem/NcAppNavigationItem.vue.d.ts +7 -2
- package/dist/components/NcAppNavigationItem/NcInputConfirmCancel.vue.d.ts +3 -1
- package/dist/components/NcAppNavigationItem/index.mjs +1 -1
- package/dist/components/NcAppNavigationNew/index.mjs +1 -1
- package/dist/components/NcAppNavigationNewItem/NcAppNavigationNewItem.vue.d.ts +3 -1
- package/dist/components/NcAppNavigationNewItem/index.mjs +1 -1
- package/dist/components/NcAppNavigationSearch/NcAppNavigationSearch.vue.d.ts +6 -10
- package/dist/components/NcAppNavigationSearch/index.mjs +1 -1
- package/dist/components/NcAppNavigationSettings/index.mjs +1 -1
- package/dist/components/NcAppSettingsDialog/index.mjs +1 -1
- package/dist/components/NcAppSettingsSection/index.mjs +1 -1
- package/dist/components/NcAppSettingsSectionShortcuts/index.mjs +1 -1
- package/dist/components/NcAppSettingsShortcutsSection/index.mjs +1 -1
- package/dist/components/NcAppSidebar/NcAppSidebar.vue.d.ts +2 -1
- package/dist/components/NcAppSidebar/NcAppSidebarTabs.vue.d.ts +3 -2
- package/dist/components/NcAppSidebar/index.mjs +1 -1
- package/dist/components/NcAppSidebarHeader/index.mjs +1 -1
- package/dist/components/NcAssistantButton/index.mjs +1 -1
- package/dist/components/NcAssistantContent/index.mjs +1 -1
- package/dist/components/NcAssistantIcon/index.mjs +1 -1
- package/dist/components/NcAvatar/index.mjs +1 -1
- package/dist/components/NcBlurHash/index.mjs +1 -1
- package/dist/components/NcBreadcrumb/NcBreadcrumb.vue.d.ts +1 -3
- package/dist/components/NcBreadcrumb/index.mjs +1 -1
- package/dist/components/NcBreadcrumbs/NcBreadcrumbs.vue.d.ts +1 -3
- package/dist/components/NcBreadcrumbs/index.mjs +1 -1
- package/dist/components/NcButton/index.mjs +1 -1
- package/dist/components/NcCheckboxRadioSwitch/index.mjs +1 -1
- package/dist/components/NcChip/index.mjs +1 -1
- package/dist/components/NcCollectionList/index.mjs +1 -1
- package/dist/components/NcColorPicker/index.mjs +1 -1
- package/dist/components/NcContent/index.mjs +1 -1
- package/dist/components/NcCounterBubble/index.mjs +1 -1
- package/dist/components/NcDashboardWidget/index.mjs +1 -1
- package/dist/components/NcDashboardWidgetItem/index.mjs +1 -1
- package/dist/components/NcDateTime/index.mjs +1 -1
- package/dist/components/NcDateTimePicker/NcDateTimePicker.vue.d.ts +4 -8
- package/dist/components/NcDateTimePicker/index.mjs +1 -1
- package/dist/components/NcDateTimePickerNative/index.mjs +1 -1
- package/dist/components/NcDialog/index.mjs +1 -1
- package/dist/components/NcDialogButton/index.mjs +1 -1
- package/dist/components/NcEmojiPicker/NcEmojiPicker.vue.d.ts +3 -5
- package/dist/components/NcEmojiPicker/index.mjs +1 -1
- package/dist/components/NcEmptyContent/index.mjs +1 -1
- package/dist/components/NcFilePicker/index.mjs +1 -1
- package/dist/components/NcFormBox/index.mjs +1 -1
- package/dist/components/NcFormBoxButton/index.mjs +1 -1
- package/dist/components/NcFormBoxCopyButton/index.mjs +1 -1
- package/dist/components/NcFormBoxSwitch/index.mjs +1 -1
- package/dist/components/NcFormGroup/index.mjs +1 -1
- package/dist/components/NcHeaderButton/index.mjs +1 -1
- package/dist/components/NcHeaderMenu/NcHeaderMenu.vue.d.ts +4 -8
- package/dist/components/NcHeaderMenu/index.mjs +1 -1
- package/dist/components/NcHotkey/index.mjs +1 -1
- package/dist/components/NcHotkeyList/index.mjs +1 -1
- package/dist/components/NcIconSvgWrapper/index.mjs +1 -1
- package/dist/components/NcInputField/index.mjs +1 -1
- package/dist/components/NcKbd/index.mjs +1 -1
- package/dist/components/NcListItem/NcListItem.vue.d.ts +3 -1
- package/dist/components/NcListItem/index.mjs +1 -1
- package/dist/components/NcListItemIcon/index.mjs +1 -1
- package/dist/components/NcLoadingIcon/index.mjs +1 -1
- package/dist/components/NcModal/index.mjs +1 -1
- package/dist/components/NcNoteCard/index.mjs +1 -1
- package/dist/components/NcPasswordField/NcPasswordField.vue.d.ts +6 -10
- package/dist/components/NcPasswordField/index.mjs +1 -1
- package/dist/components/NcProgressBar/index.mjs +1 -1
- package/dist/components/NcRadioGroup/index.mjs +1 -1
- package/dist/components/NcRadioGroupButton/index.mjs +1 -1
- package/dist/components/NcRelatedResourcesPanel/index.mjs +1 -1
- package/dist/components/NcRichContenteditable/index.mjs +1 -1
- package/dist/components/NcRichText/NcReferencePicker/NcRawLinkInput.vue.d.ts +3 -5
- package/dist/components/NcRichText/NcReferencePicker/NcReferencePicker.vue.d.ts +3 -5
- package/dist/components/NcRichText/NcReferencePicker/NcReferencePickerModal.vue.d.ts +3 -5
- package/dist/components/NcRichText/index.mjs +3 -3
- package/dist/components/NcSavingIndicatorIcon/index.mjs +1 -1
- package/dist/components/NcSelect/index.mjs +1 -1
- package/dist/components/NcSelectTags/index.mjs +1 -1
- package/dist/components/NcSelectUsers/index.mjs +1 -1
- package/dist/components/NcSettingsSection/index.mjs +1 -1
- package/dist/components/NcSettingsSelectGroup/index.mjs +1 -1
- package/dist/components/NcTextArea/index.mjs +1 -1
- package/dist/components/NcTextField/NcTextField.vue.d.ts +6 -10
- package/dist/components/NcTextField/index.mjs +1 -1
- package/dist/components/NcTimezonePicker/index.mjs +1 -1
- package/dist/components/NcUserBubble/index.mjs +1 -1
- package/dist/components/NcUserStatusIcon/index.mjs +1 -1
- package/dist/composables/useFormatDateTime/index.mjs +1 -1
- package/dist/functions/reference/index.mjs +1 -1
- package/dist/functions/usernameToColor/index.mjs +1 -1
- package/dist/index.mjs +83 -83
- package/dist/utils/legacy.d.ts +1 -0
- package/package.json +15 -15
- package/dist/assets/NcAppSettingsDialog-Ckc0OWTs.css +0 -98
- package/dist/assets/NcInputConfirmCancel-BrdZEfr2.css +0 -39
- package/dist/assets/NcListItem-Cat18cSx.css +0 -177
- package/dist/chunks/NcActionTextEditable-BC66QDvV.mjs.map +0 -1
- package/dist/chunks/NcAppNavigation-C2njwnqV.mjs.map +0 -1
- package/dist/chunks/NcAppNavigationItem-Csh8IBIf.mjs.map +0 -1
- package/dist/chunks/NcAppSettingsDialog-CjOvPWbc.mjs.map +0 -1
- package/dist/chunks/NcAppSidebar-BvXH4I-d.mjs.map +0 -1
- package/dist/chunks/NcAssistantButton-DxNbEbqt.mjs.map +0 -1
- package/dist/chunks/NcButton-lQra4n2g.mjs.map +0 -1
- package/dist/chunks/NcCheckboxRadioSwitch-VV_Err2A.mjs.map +0 -1
- package/dist/chunks/NcDateTime.vue_vue_type_script_setup_true_lang-B4upiZjL.mjs.map +0 -1
- package/dist/chunks/NcHotkeyList-lslhX0EJ.mjs.map +0 -1
- package/dist/chunks/NcInputConfirmCancel-xoQuby4k.mjs.map +0 -1
- package/dist/chunks/NcListItem-C0y1LfQx.mjs.map +0 -1
- package/dist/chunks/NcRelatedResourcesPanel-B01Lid3d.mjs.map +0 -1
- package/dist/chunks/NcRichContenteditable-DeN1H5pQ.mjs.map +0 -1
- package/dist/chunks/NcRichText-DGV7OHFb.mjs.map +0 -1
- package/dist/chunks/_l10n-BCg4udFv.mjs.map +0 -1
- package/dist/chunks/legacy-DcjXBL_t.mjs +0 -6
- package/dist/chunks/legacy-DcjXBL_t.mjs.map +0 -1
- package/dist/chunks/referencePickerModal-Bsq4XIcs.mjs.map +0 -1
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NcFilePicker-CrHd83Bv.mjs","sources":["../../node_modules/vue-material-design-icons/FolderUpload.vue","../../node_modules/vue-material-design-icons/Plus.vue","../../node_modules/vue-material-design-icons/Upload.vue","../../src/l10n.ts","../../src/components/NcFilePicker/NcFilePicker.vue"],"sourcesContent":["<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : 'true'\"\n :aria-label=\"title\"\n class=\"material-design-icon folder-upload-icon\"\n role=\"img\"\n @click=\"$emit('click', $event)\">\n <svg :fill=\"fillColor\"\n class=\"material-design-icon__svg\"\n :width=\"size\"\n :height=\"size\"\n viewBox=\"0 0 24 24\">\n <path d=\"M20,6A2,2 0 0,1 22,8V18A2,2 0 0,1 20,20H4A2,2 0 0,1 2,18V6A2,2 0 0,1 4,4H10L12,6H20M10.75,13H14V17H16V13H19.25L15,8.75\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"FolderUploadIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : 'true'\"\n :aria-label=\"title\"\n class=\"material-design-icon plus-icon\"\n role=\"img\"\n @click=\"$emit('click', $event)\">\n <svg :fill=\"fillColor\"\n class=\"material-design-icon__svg\"\n :width=\"size\"\n :height=\"size\"\n viewBox=\"0 0 24 24\">\n <path d=\"M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"PlusIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : 'true'\"\n :aria-label=\"title\"\n class=\"material-design-icon upload-icon\"\n role=\"img\"\n @click=\"$emit('click', $event)\">\n <svg :fill=\"fillColor\"\n class=\"material-design-icon__svg\"\n :width=\"size\"\n :height=\"size\"\n viewBox=\"0 0 24 24\">\n <path d=\"M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"UploadIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","/*!\n * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\n// This is only a dummy file, the real translations are injected by the vite plugin from build/l10n-plugin!\nimport { getGettextBuilder } from '@nextcloud/l10n/gettext'\n\nconst gtBuilder = getGettextBuilder().detectLanguage()\nconst gt = gtBuilder.build()\n\nconst n = gt.ngettext.bind(gt)\nconst t = gt.gettext.bind(gt)\n\nexport { n, t }\n","<!--\n - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\n\nimport { computed, nextTick, useTemplateRef } from 'vue'\nimport IconFolderUpload from 'vue-material-design-icons/FolderUpload.vue'\nimport IconPlus from 'vue-material-design-icons/Plus.vue'\nimport IconUpload from 'vue-material-design-icons/Upload.vue'\nimport NcActionButton from '../NcActionButton/NcActionButton.vue'\nimport NcActionCaption from '../NcActionCaption/NcActionCaption.vue'\nimport NcActions from '../NcActions/NcActions.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport NcLoadingIcon from '../NcLoadingIcon/NcLoadingIcon.vue'\nimport { t } from '../../l10n.js'\n\nexport interface FilePickerItem {\n\t/**\n\t * SVG icon (as string) for the action\n\t */\n\ticonSvg: string\n\t/**\n\t * Label of the action\n\t */\n\tlabel: string\n\t/**\n\t * Callback when the action is clicked\n\t */\n\tonClick: () => void\n}\n\nexport interface FilePickerItemGroup {\n\t/**\n\t * Caption for the action group\n\t */\n\tcaption: string\n\t/**\n\t * Actions within this group\n\t */\n\tactions: FilePickerItem[]\n}\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * File types to accept\n\t */\n\taccept?: string[]\n\n\t/**\n\t * Optional menu caption to be shown above the actions\n\t */\n\tactionCaption?: string\n\n\t/**\n\t * Additional actions to be shown within the picker menu\n\t */\n\tactions?: FilePickerItem[] | FilePickerItemGroup[]\n\n\t/**\n\t * Allow picking a directory\n\t */\n\tdirectory?: boolean\n\n\t/**\n\t * Disable picking files and only allow picking a directory\n\t */\n\tdirectoryOnly?: boolean\n\n\t/**\n\t * Disabled state of the picker\n\t */\n\tdisabled?: boolean\n\n\t/**\n\t * If set then the label is only used for accessibility but not shown visually\n\t */\n\ticonOnly?: boolean\n\n\t/**\n\t * Label of the picker\n\t *\n\t * @default 'Pick file' or 'Pick files' depending on `multiple`\n\t */\n\tlabel?: string\n\n\t/**\n\t * If set then the picker will be set into a loading state.\n\t * This means the picker is disabled, a loading spinner is shown and the label is adjusted.\n\t */\n\tloading?: boolean\n\n\t/**\n\t * Can the user pick multiple files.\n\t * This is ignored when picking folder (by browser limitations).\n\t */\n\tmultiple?: boolean\n\n\t/**\n\t * The variant of the button\n\t */\n\tvariant?: 'primary' | 'secondary' | 'tertiary'\n}>(), {\n\tactions: () => [],\n\taccept: undefined,\n\tactionCaption: '',\n\tlabel: undefined,\n\tvariant: 'primary',\n})\n\nconst emit = defineEmits<{\n\tpick: [files: File[]]\n}>()\n\ndefineSlots<{\n\t/**\n\t * Optional custom icon for the picker menu\n\t */\n\ticon?: Slot\n\n\t/**\n\t * Optional content to be shown in the picker.\n\t * This can be used e.g. for a progress bar or similar.\n\t */\n\tdefault?: Slot\n}>()\n\ndefineExpose({\n\treset,\n})\n\nconst formElement = useTemplateRef('form')\nconst inputElement = useTemplateRef('input')\n\n/**\n * The current label to be used as menu name and accessible name of the picker.\n */\nconst currentLabel = computed(() => {\n\tif (props.loading) {\n\t\treturn t('Uploading …')\n\t} else if (props.label) {\n\t\treturn props.label\n\t} else if (props.directoryOnly) {\n\t\treturn t('Pick folder')\n\t}\n\treturn props.multiple ? t('Pick files') : t('Pick file')\n})\n\n/**\n * Check whether the current browser supports uploading directories\n * Hint: This does not check if the current connection supports this, as some browsers require a secure context!\n */\nconst canUploadFolders = computed(() => {\n\treturn (props.directory || props.directoryOnly) && 'webkitdirectory' in HTMLInputElement.prototype\n})\n\n/**\n * Trigger file picker\n *\n * @param uploadFolders - Whether to upload folders or files\n */\nfunction triggerPickFiles(uploadFolders: boolean) {\n\t// Without reset selecting the same file doesn't trigger the change event\n\treset()\n\n\t// Only if the browser supports picking folders and the user selected \"pick folder\" we set the file input to directory picking.\n\tif (canUploadFolders.value) {\n\t\tinputElement.value!.webkitdirectory = uploadFolders\n\t}\n\n\t// Wait for the reset and the `webkitdirectory` to be dispatched in DOM\n\tnextTick(() => inputElement.value!.click())\n}\n\n/**\n * Handle picking some local files\n */\nfunction onPick() {\n\tconst files = inputElement.value?.files ? Array.from(inputElement.value.files) : []\n\temit('pick', files)\n}\n\n/**\n * Reset the picker state of the currently selected files.\n */\nfunction reset() {\n\tformElement.value!.reset()\n}\n</script>\n\n<template>\n\t<form\n\t\tref=\"form\"\n\t\t:class=\"$style.filePicker\">\n\t\t<NcActions\n\t\t\t:aria-label=\"currentLabel\"\n\t\t\t:disabled=\"disabled || loading\"\n\t\t\t:menuName=\"iconOnly ? undefined : currentLabel\"\n\t\t\t:forceName=\"!iconOnly\"\n\t\t\t:variant>\n\t\t\t<template #icon>\n\t\t\t\t<slot v-if=\"!loading\" name=\"icon\">\n\t\t\t\t\t<IconPlus :size=\"20\" />\n\t\t\t\t</slot>\n\t\t\t\t<NcLoadingIcon v-else />\n\t\t\t</template>\n\n\t\t\t<NcActionCaption v-if=\"actionCaption\" :name=\"actionCaption\" />\n\n\t\t\t<NcActionButton\n\t\t\t\tv-if=\"!directoryOnly\"\n\t\t\t\tcloseAfterClick\n\t\t\t\t@click=\"triggerPickFiles(false)\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconUpload :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<!-- If this is not the only action in the NcActions this is a menu entry and we need a generic name - otherwise this will be a single button where we need to apply the label -->\n\t\t\t\t{{ canUploadFolders || $slots.actions ? (multiple ? t('Upload files') : t('Upload file')) : currentLabel }}\n\t\t\t</NcActionButton>\n\n\t\t\t<NcActionButton\n\t\t\t\tv-if=\"canUploadFolders\"\n\t\t\t\tcloseAfterClick\n\t\t\t\t@click=\"triggerPickFiles(true)\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconFolderUpload style=\"color: var(--color-primary-element)\" :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<!-- If this is not the only action in the NcActions this is a menu entry and we need a generic name - otherwise this will be a single button where we need to apply the label -->\n\t\t\t\t{{ !directoryOnly || $slots.actions ? t('Upload folder') : currentLabel }}\n\t\t\t</NcActionButton>\n\n\t\t\t<template v-for=\"group of actions\">\n\t\t\t\t<NcActionCaption\n\t\t\t\t\tv-if=\"(group as FilePickerItemGroup).caption\"\n\t\t\t\t\t:key=\"(group as FilePickerItemGroup).caption\"\n\t\t\t\t\t:name=\"(group as FilePickerItemGroup).caption\" />\n\n\t\t\t\t<NcActionButton\n\t\t\t\t\tv-for=\"action of (group as FilePickerItemGroup).actions ?? [group as FilePickerItem]\"\n\t\t\t\t\t:key=\"action.label\"\n\t\t\t\t\tcloseAfterClick\n\t\t\t\t\t@click=\"action.onClick\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :svg=\"action.iconSvg\" />\n\t\t\t\t\t</template>\n\t\t\t\t\t{{ action.label }}\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcActions>\n\n\t\t<!-- Hidden files picker input - also hidden for accessibility as otherwise such users also loose the ability to pick files -->\n\t\t<input\n\t\t\tref=\"input\"\n\t\t\t:accept=\"accept?.join(', ')\"\n\t\t\taria-hidden=\"true\"\n\t\t\tclass=\"hidden-visually\"\n\t\t\t:multiple\n\t\t\ttype=\"file\"\n\t\t\t@change=\"onPick\">\n\n\t\t<slot />\n\t</form>\n</template>\n\n<style module>\n.filePicker {\n\tdisplay: inline-flex;\n\talign-items: center;\n\theight: var(--default-clickable-area);\n}\n</style>\n\n<docs>\nThis component allows to pick local files (or directories) which can be used to upload them to Nextcloud or directly process them in the browser.\n\n### Exposed methods\n\n- `function reset(): void`\n This method allows to reset the internal state of the file picker to clear the current selection\n\n### Example\n\n```vue\n<template>\n\t<div>\n\t\t<div class=\"wrapper\">\n\t\t\t<NcFilePicker ref=\"picker\"\n\t\t\t\tdirectory\n\t\t\t\t@pick=\"selectedFiles = $event\" />\n\n\t\t\t<NcButton variant=\"tertiary\"\n\t\t\t\t@click=\"clearPicker\">\n\t\t\t\tClear\n\t\t\t</NcButton>\n\t\t</div>\n\n\t\t<h3>Selected files:</h3>\n\t\t<ul>\n\t\t\t<li v-for=\"file in selectedFiles\" key=\"file.name\">\n\t\t\t\t{{ file.webkitRelativePath || file.name }}\n\t\t\t</li>\n\t\t</ul>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tselectedFiles: [],\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\t/**\n\t\t\t * This will clear the selected files from the picker.\n\t\t\t */\n\t\t\tclearPicker() {\n\t\t\t\tthis.$refs.picker.reset()\n\t\t\t},\n\t\t},\n\t}\n</script>\n<style scoped>\n.wrapper {\n\tdisplay: flex;\n\tgap: 10px;\n}\n</style>\n```\n</docs>\n"],"names":["_sfc_main","_hoisted_3","_createElementBlock","_mergeProps","_createElementVNode","_openBlock","_normalizeClass","$style","_createVNode","disabled","loading","iconOnly","variant","_renderSlot","_createBlock","actionCaption","directoryOnly","_createTextVNode","_toDisplayString","$slots","multiple","_unref","_Fragment","_renderList","actions","accept"],"mappings":"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","x_google_ignoreList":[0,1,2]}
|
|
1
|
+
{"version":3,"file":"NcFilePicker-nPCwHMqj.mjs","sources":["../../node_modules/vue-material-design-icons/FolderUpload.vue","../../node_modules/vue-material-design-icons/Plus.vue","../../node_modules/vue-material-design-icons/Upload.vue","../../src/l10n.ts","../../src/components/NcFilePicker/NcFilePicker.vue"],"sourcesContent":["<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : 'true'\"\n :aria-label=\"title\"\n class=\"material-design-icon folder-upload-icon\"\n role=\"img\"\n @click=\"$emit('click', $event)\">\n <svg :fill=\"fillColor\"\n class=\"material-design-icon__svg\"\n :width=\"size\"\n :height=\"size\"\n viewBox=\"0 0 24 24\">\n <path d=\"M20,6A2,2 0 0,1 22,8V18A2,2 0 0,1 20,20H4A2,2 0 0,1 2,18V6A2,2 0 0,1 4,4H10L12,6H20M10.75,13H14V17H16V13H19.25L15,8.75\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"FolderUploadIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : 'true'\"\n :aria-label=\"title\"\n class=\"material-design-icon plus-icon\"\n role=\"img\"\n @click=\"$emit('click', $event)\">\n <svg :fill=\"fillColor\"\n class=\"material-design-icon__svg\"\n :width=\"size\"\n :height=\"size\"\n viewBox=\"0 0 24 24\">\n <path d=\"M19,13H13V19H11V13H5V11H11V5H13V11H19V13Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"PlusIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","<template>\n <span v-bind=\"$attrs\"\n :aria-hidden=\"title ? null : 'true'\"\n :aria-label=\"title\"\n class=\"material-design-icon upload-icon\"\n role=\"img\"\n @click=\"$emit('click', $event)\">\n <svg :fill=\"fillColor\"\n class=\"material-design-icon__svg\"\n :width=\"size\"\n :height=\"size\"\n viewBox=\"0 0 24 24\">\n <path d=\"M9,16V10H5L12,3L19,10H15V16H9M5,20V18H19V20H5Z\">\n <title v-if=\"title\">{{ title }}</title>\n </path>\n </svg>\n </span>\n</template>\n\n<script>\nexport default {\n name: \"UploadIcon\",\n emits: ['click'],\n props: {\n title: {\n type: String,\n },\n fillColor: {\n type: String,\n default: \"currentColor\"\n },\n size: {\n type: Number,\n default: 24\n }\n }\n}\n</script>","/*!\n * SPDX-FileCopyrightText: 2020 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\n// This is only a dummy file, the real translations are injected by the vite plugin from build/l10n-plugin!\nimport { getGettextBuilder } from '@nextcloud/l10n/gettext'\n\nconst gtBuilder = getGettextBuilder().detectLanguage()\nconst gt = gtBuilder.build()\n\nconst n = gt.ngettext.bind(gt)\nconst t = gt.gettext.bind(gt)\n\nexport { n, t }\n","<!--\n - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\n\nimport { computed, nextTick, useTemplateRef } from 'vue'\nimport IconFolderUpload from 'vue-material-design-icons/FolderUpload.vue'\nimport IconPlus from 'vue-material-design-icons/Plus.vue'\nimport IconUpload from 'vue-material-design-icons/Upload.vue'\nimport NcActionButton from '../NcActionButton/NcActionButton.vue'\nimport NcActionCaption from '../NcActionCaption/NcActionCaption.vue'\nimport NcActions from '../NcActions/NcActions.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport NcLoadingIcon from '../NcLoadingIcon/NcLoadingIcon.vue'\nimport { t } from '../../l10n.js'\n\nexport interface FilePickerItem {\n\t/**\n\t * SVG icon (as string) for the action\n\t */\n\ticonSvg: string\n\t/**\n\t * Label of the action\n\t */\n\tlabel: string\n\t/**\n\t * Callback when the action is clicked\n\t */\n\tonClick: () => void\n}\n\nexport interface FilePickerItemGroup {\n\t/**\n\t * Caption for the action group\n\t */\n\tcaption: string\n\t/**\n\t * Actions within this group\n\t */\n\tactions: FilePickerItem[]\n}\n\nconst props = withDefaults(defineProps<{\n\t/**\n\t * File types to accept\n\t */\n\taccept?: string[]\n\n\t/**\n\t * Optional menu caption to be shown above the actions\n\t */\n\tactionCaption?: string\n\n\t/**\n\t * Additional actions to be shown within the picker menu\n\t */\n\tactions?: FilePickerItem[] | FilePickerItemGroup[]\n\n\t/**\n\t * Allow picking a directory\n\t */\n\tdirectory?: boolean\n\n\t/**\n\t * Disable picking files and only allow picking a directory\n\t */\n\tdirectoryOnly?: boolean\n\n\t/**\n\t * Disabled state of the picker\n\t */\n\tdisabled?: boolean\n\n\t/**\n\t * If set then the label is only used for accessibility but not shown visually\n\t */\n\ticonOnly?: boolean\n\n\t/**\n\t * Label of the picker\n\t *\n\t * @default 'Pick file' or 'Pick files' depending on `multiple`\n\t */\n\tlabel?: string\n\n\t/**\n\t * If set then the picker will be set into a loading state.\n\t * This means the picker is disabled, a loading spinner is shown and the label is adjusted.\n\t */\n\tloading?: boolean\n\n\t/**\n\t * Can the user pick multiple files.\n\t * This is ignored when picking folder (by browser limitations).\n\t */\n\tmultiple?: boolean\n\n\t/**\n\t * The variant of the button\n\t */\n\tvariant?: 'primary' | 'secondary' | 'tertiary'\n}>(), {\n\tactions: () => [],\n\taccept: undefined,\n\tactionCaption: '',\n\tlabel: undefined,\n\tvariant: 'primary',\n})\n\nconst emit = defineEmits<{\n\tpick: [files: File[]]\n}>()\n\ndefineSlots<{\n\t/**\n\t * Optional custom icon for the picker menu\n\t */\n\ticon?: Slot\n\n\t/**\n\t * Optional content to be shown in the picker.\n\t * This can be used e.g. for a progress bar or similar.\n\t */\n\tdefault?: Slot\n}>()\n\ndefineExpose({\n\treset,\n})\n\nconst formElement = useTemplateRef('form')\nconst inputElement = useTemplateRef('input')\n\n/**\n * The current label to be used as menu name and accessible name of the picker.\n */\nconst currentLabel = computed(() => {\n\tif (props.loading) {\n\t\treturn t('Uploading …')\n\t} else if (props.label) {\n\t\treturn props.label\n\t} else if (props.directoryOnly) {\n\t\treturn t('Pick folder')\n\t}\n\treturn props.multiple ? t('Pick files') : t('Pick file')\n})\n\n/**\n * Check whether the current browser supports uploading directories\n * Hint: This does not check if the current connection supports this, as some browsers require a secure context!\n */\nconst canUploadFolders = computed(() => {\n\treturn (props.directory || props.directoryOnly) && 'webkitdirectory' in HTMLInputElement.prototype\n})\n\n/**\n * Trigger file picker\n *\n * @param uploadFolders - Whether to upload folders or files\n */\nfunction triggerPickFiles(uploadFolders: boolean) {\n\t// Without reset selecting the same file doesn't trigger the change event\n\treset()\n\n\t// Only if the browser supports picking folders and the user selected \"pick folder\" we set the file input to directory picking.\n\tif (canUploadFolders.value) {\n\t\tinputElement.value!.webkitdirectory = uploadFolders\n\t}\n\n\t// Wait for the reset and the `webkitdirectory` to be dispatched in DOM\n\tnextTick(() => inputElement.value!.click())\n}\n\n/**\n * Handle picking some local files\n */\nfunction onPick() {\n\tconst files = inputElement.value?.files ? Array.from(inputElement.value.files) : []\n\temit('pick', files)\n}\n\n/**\n * Reset the picker state of the currently selected files.\n */\nfunction reset() {\n\tformElement.value!.reset()\n}\n</script>\n\n<template>\n\t<form\n\t\tref=\"form\"\n\t\t:class=\"$style.filePicker\">\n\t\t<NcActions\n\t\t\t:aria-label=\"currentLabel\"\n\t\t\t:disabled=\"disabled || loading\"\n\t\t\t:menuName=\"iconOnly ? undefined : currentLabel\"\n\t\t\t:forceName=\"!iconOnly\"\n\t\t\t:variant>\n\t\t\t<template #icon>\n\t\t\t\t<slot v-if=\"!loading\" name=\"icon\">\n\t\t\t\t\t<IconPlus :size=\"20\" />\n\t\t\t\t</slot>\n\t\t\t\t<NcLoadingIcon v-else />\n\t\t\t</template>\n\n\t\t\t<NcActionCaption v-if=\"actionCaption\" :name=\"actionCaption\" />\n\n\t\t\t<NcActionButton\n\t\t\t\tv-if=\"!directoryOnly\"\n\t\t\t\tcloseAfterClick\n\t\t\t\t@click=\"triggerPickFiles(false)\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconUpload :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<!-- If this is not the only action in the NcActions this is a menu entry and we need a generic name - otherwise this will be a single button where we need to apply the label -->\n\t\t\t\t{{ canUploadFolders || $slots.actions ? (multiple ? t('Upload files') : t('Upload file')) : currentLabel }}\n\t\t\t</NcActionButton>\n\n\t\t\t<NcActionButton\n\t\t\t\tv-if=\"canUploadFolders\"\n\t\t\t\tcloseAfterClick\n\t\t\t\t@click=\"triggerPickFiles(true)\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<IconFolderUpload style=\"color: var(--color-primary-element)\" :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\t<!-- If this is not the only action in the NcActions this is a menu entry and we need a generic name - otherwise this will be a single button where we need to apply the label -->\n\t\t\t\t{{ !directoryOnly || $slots.actions ? t('Upload folder') : currentLabel }}\n\t\t\t</NcActionButton>\n\n\t\t\t<template v-for=\"group of actions\">\n\t\t\t\t<NcActionCaption\n\t\t\t\t\tv-if=\"(group as FilePickerItemGroup).caption\"\n\t\t\t\t\t:key=\"(group as FilePickerItemGroup).caption\"\n\t\t\t\t\t:name=\"(group as FilePickerItemGroup).caption\" />\n\n\t\t\t\t<NcActionButton\n\t\t\t\t\tv-for=\"action of (group as FilePickerItemGroup).actions ?? [group as FilePickerItem]\"\n\t\t\t\t\t:key=\"action.label\"\n\t\t\t\t\tcloseAfterClick\n\t\t\t\t\t@click=\"action.onClick\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :svg=\"action.iconSvg\" />\n\t\t\t\t\t</template>\n\t\t\t\t\t{{ action.label }}\n\t\t\t\t</NcActionButton>\n\t\t\t</template>\n\t\t</NcActions>\n\n\t\t<!-- Hidden files picker input - also hidden for accessibility as otherwise such users also loose the ability to pick files -->\n\t\t<input\n\t\t\tref=\"input\"\n\t\t\t:accept=\"accept?.join(', ')\"\n\t\t\taria-hidden=\"true\"\n\t\t\tclass=\"hidden-visually\"\n\t\t\t:multiple\n\t\t\ttype=\"file\"\n\t\t\t@change=\"onPick\">\n\n\t\t<slot />\n\t</form>\n</template>\n\n<style module>\n.filePicker {\n\tdisplay: inline-flex;\n\talign-items: center;\n\theight: var(--default-clickable-area);\n}\n</style>\n\n<docs>\nThis component allows to pick local files (or directories) which can be used to upload them to Nextcloud or directly process them in the browser.\n\n### Exposed methods\n\n- `function reset(): void`\n This method allows to reset the internal state of the file picker to clear the current selection\n\n### Example\n\n```vue\n<template>\n\t<div>\n\t\t<div class=\"wrapper\">\n\t\t\t<NcFilePicker ref=\"picker\"\n\t\t\t\tdirectory\n\t\t\t\t@pick=\"selectedFiles = $event\" />\n\n\t\t\t<NcButton variant=\"tertiary\"\n\t\t\t\t@click=\"clearPicker\">\n\t\t\t\tClear\n\t\t\t</NcButton>\n\t\t</div>\n\n\t\t<h3>Selected files:</h3>\n\t\t<ul>\n\t\t\t<li v-for=\"file in selectedFiles\" key=\"file.name\">\n\t\t\t\t{{ file.webkitRelativePath || file.name }}\n\t\t\t</li>\n\t\t</ul>\n\t</div>\n</template>\n<script>\n\texport default {\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tselectedFiles: [],\n\t\t\t}\n\t\t},\n\t\tmethods: {\n\t\t\t/**\n\t\t\t * This will clear the selected files from the picker.\n\t\t\t */\n\t\t\tclearPicker() {\n\t\t\t\tthis.$refs.picker.reset()\n\t\t\t},\n\t\t},\n\t}\n</script>\n<style scoped>\n.wrapper {\n\tdisplay: flex;\n\tgap: 10px;\n}\n</style>\n```\n</docs>\n"],"names":["_sfc_main","_hoisted_3","_createElementBlock","_mergeProps","_createElementVNode","_openBlock","_normalizeClass","$style","_createVNode","_renderSlot","_createBlock","_createTextVNode","_toDisplayString","$slots","_unref","_Fragment","_renderList"],"mappings":"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","x_google_ignoreList":[0,1,2]}
|
|
@@ -15,7 +15,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
15
15
|
});
|
|
16
16
|
return (_ctx, _cache) => {
|
|
17
17
|
return openBlock(), createElementBlock("div", {
|
|
18
|
-
class: normalizeClass([_ctx.$style.ncFormBox,
|
|
18
|
+
class: normalizeClass([_ctx.$style.ncFormBox, __props.row ? _ctx.$style.ncFormBox_row : _ctx.$style.ncFormBox_col])
|
|
19
19
|
}, [
|
|
20
20
|
renderSlot(_ctx.$slots, "default", {
|
|
21
21
|
itemClass: _ctx.$style.ncFormBox__item
|
|
@@ -42,4 +42,4 @@ const NcFormBox = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", cssMo
|
|
|
42
42
|
export {
|
|
43
43
|
NcFormBox as N
|
|
44
44
|
};
|
|
45
|
-
//# sourceMappingURL=NcFormBox-
|
|
45
|
+
//# sourceMappingURL=NcFormBox-ClWfuBWz.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NcFormBox-
|
|
1
|
+
{"version":3,"file":"NcFormBox-ClWfuBWz.mjs","sources":["../../src/components/NcFormBox/NcFormBox.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\n\nimport { provide, useCssModule } from 'vue'\nimport { NC_FORM_BOX_CONTEXT_KEY } from './useNcFormBox.ts'\n\ndefineProps<{\n\t/**\n\t * Display the group as a row instead of a column\n\t */\n\trow?: boolean\n}>()\n\ndefineSlots<{\n\t/**\n\t * Grouped content\n\t */\n\tdefault?: Slot<{\n\t\t/**\n\t\t * Class to add on a custom item to apply the border radius effect\n\t\t */\n\t\titemClass: string\n\t}>\n}>()\n\nconst style = useCssModule()\n\nprovide(NC_FORM_BOX_CONTEXT_KEY, {\n\tisInFormBox: true,\n\tformBoxItemClass: style.ncFormBox__item,\n})\n</script>\n\n<template>\n\t<div :class=\"[$style.ncFormBox, row ? $style.ncFormBox_row : $style.ncFormBox_col]\">\n\t\t<slot :itemClass=\"$style.ncFormBox__item\" />\n\t</div>\n</template>\n\n<style lang=\"scss\" module>\n.ncFormBox {\n\tdisplay: flex;\n\tflex-direction: column;\n\tgap: calc(1 * var(--default-grid-baseline));\n\n\t&.ncFormBox_row {\n\t\tflex-direction: row;\n\t}\n}\n\n.ncFormBox__item {\n\tborder-radius: var(--border-radius-small) !important;\n}\n\n.ncFormBox_col {\n\tflex-direction: column;\n\n\t.ncFormBox__item {\n\t\t&:first-child {\n\t\t\tborder-start-start-radius: var(--border-radius-element) !important;\n\t\t\tborder-start-end-radius: var(--border-radius-element) !important;\n\t\t}\n\n\t\t&:last-child {\n\t\t\tborder-end-start-radius: var(--border-radius-element) !important;\n\t\t\tborder-end-end-radius: var(--border-radius-element) !important;\n\t\t}\n\t}\n}\n\n.ncFormBox_row {\n\tflex-direction: row;\n\n\t.ncFormBox__item {\n\t\tflex: 1 1;\n\n\t\t&:first-child {\n\t\t\tborder-start-start-radius: var(--border-radius-element) !important;\n\t\t\tborder-end-start-radius: var(--border-radius-element) !important;\n\t\t}\n\n\t\t&:last-child {\n\t\t\tborder-end-end-radius: var(--border-radius-element) !important;\n\t\t\tborder-start-end-radius: var(--border-radius-element) !important;\n\t\t}\n\t}\n}\n</style>\n\n<docs>\n### General\n\nA container of supported components with a small gap and rounded corners forming a solid group.\n\nCurrently supported components:\n- **`<NcFormBoxButton>`**: an action button/link with an optional description specially for the `<NcFormBox>` context\n- **`<NcFormBoxCopyButton>`**: a special case of a button to copy a text to the clipboard\n- **`<NcFormBoxSwitch>`**: a toggle switch replacing `<NcCheckboxRadioSwitch type=\"switch\">` in a box\n- **`<NcButton>`**: a general button in case there is a kind of primary action within a box\n\n**Note**: if the group has a semantic meaning, consider wrapping the `<NcFormBox>` into `<NcFormGroup>` component with a label.\n\n```vue\n<script>\nimport { mdiArrowRight, mdiFolderOpenOutline, mdiPlus } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\treturn { mdiArrowRight, mdiFolderOpenOutline, mdiPlus }\n\t},\n\n\tdata() {\n\t\treturn {\n\t\t\ttext: 'Text',\n\t\t\tswitchValue: false,\n\t\t}\n\t},\n}\n</script>\n\n<template>\n\t<div style=\"display: flex; flex-direction: column; gap: calc(6 * var(--default-grid-baseline));\">\n\t\t<NcFormBox>\n\t\t\t<NcFormBoxCopyButton label=\"WebDAV URL\" value=\"https://cloud.example.tld/remote.php/dav/files/user\" />\n\t\t</NcFormBox>\n\n\t\t<NcFormGroup label=\"Account settings\">\n\t\t\t<NcFormBox>\n\t\t\t\t<NcFormBoxButton label=\"user@example.com\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiArrowRight\" inline />\n\t\t\t\t\t</template>\n\t\t\t\t</NcFormBoxButton>\n\t\t\t\t<NcFormBoxButton label=\"sales@example.com\">\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiArrowRight\" inline />\n\t\t\t\t\t</template>\n\t\t\t\t</NcFormBoxButton>\n\t\t\t\t<NcButton wide>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiPlus\" />\n\t\t\t\t\t</template>\n\t\t\t\t\tAdd mail account\n\t\t\t\t</NcButton>\n\t\t\t</NcFormBox>\n\t\t</NcFormGroup>\n\n\t\t<NcFormGroup label=\"Device settings\">\n\t\t\t<NcFormBox>\n\t\t\t\t<NcFormBoxSwitch v-model=\"switchValue\" label=\"Turn camera and microphone off by default\" />\n\t\t\t\t<NcFormBoxSwitch v-model=\"switchValue\" label=\"Blur camera background by default\" />\n\t\t\t\t<NcFormBoxSwitch\n\t\t\t\t\tv-model=\"switchValue\"\n\t\t\t\t\tlabel=\"Skip device preview before joining a call\"\n\t\t\t\t\tdescription=\"Will always show if recording consent is required\" />\n\t\t\t</NcFormBox>\n\t\t</NcFormGroup>\n\n\t\t<NcFormBox>\n\t\t\t<NcFormBoxButton\n\t\t\t\tlabel=\"Attachments folder\"\n\t\t\t\tdescription=\"/Talk\"\n\t\t\t\tinverted-accent>\n\t\t\t\t<template #icon>\n\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiFolderOpenOutline\" inline />\n\t\t\t\t</template>\n\t\t\t</NcFormBoxButton>\n\t\t</NcFormBox>\n\t</div>\n</template>\n```\n\n### Advanced usage\n\nScoped slot prop `itemClass` can be used to apply the same border radius effect to custom components.\nCreate an issue if you need a composable to inject the class into a custom component.\n\n```vue\n<template>\n\t<NcFormBox v-slot=\"{ itemClass }\">\n\t\t<button class=\"native-button\" :class=\"itemClass\">\n\t\t\tFirst native button\n\t\t</button>\n\t\t<button class=\"native-button\" :class=\"itemClass\">\n\t\t\tSecond native button\n\t\t</button>\n\t\t<button class=\"native-button\" :class=\"itemClass\">\n\t\t\tThird native button\n\t\t</button>\n\t</NcFormBox>\n</template>\n\n<style scoped>\n.native-button {\n\t/* Remove default server margin around a native button */\n\tmargin: 0 !important;\n}\n</style>\n```\n</docs>\n"],"names":["_createElementBlock","_normalizeClass","$style","_renderSlot"],"mappings":";;;;;;;;;AA8BA,UAAM,QAAQ,aAAA;AAEd,YAAQ,yBAAyB;AAAA,MAChC,aAAa;AAAA,MACb,kBAAkB,MAAM;AAAA,IAAA,CACxB;;0BAIAA,mBAEM,OAAA;AAAA,QAFA,OAAKC,eAAA,CAAGC,KAAAA,OAAO,WAAW,QAAA,MAAMA,KAAAA,OAAO,gBAAgBA,KAAAA,OAAO,aAAa,CAAA;AAAA,MAAA;QAChFC,WAA4C,KAAA,QAAA,WAAA;AAAA,UAArC,WAAWD,KAAAA,OAAO;AAAA,QAAA;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import '../assets/NcFormBoxButton-BWfU7d2r.css';
|
|
2
2
|
import { reactive, inject, computed, defineComponent, toRef, openBlock, createBlock, mergeProps, unref, createSlots, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode } from "vue";
|
|
3
3
|
import { s as mdiOpenInNew, t as mdiArrowTopRight } from "./mdi-CpchYUUV.mjs";
|
|
4
|
-
import { N as NcFormBoxItem } from "./NcFormBoxItem-
|
|
5
|
-
import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-
|
|
4
|
+
import { N as NcFormBoxItem } from "./NcFormBoxItem-BTB68AEB.mjs";
|
|
5
|
+
import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-g8ubWhoz.mjs";
|
|
6
6
|
import { routerKey } from "vue-router";
|
|
7
7
|
import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
|
|
8
8
|
/*!
|
|
@@ -90,25 +90,25 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
90
90
|
/* Reset server's global HTML button styles */
|
|
91
91
|
_ctx.$style.formBoxButton
|
|
92
92
|
],
|
|
93
|
-
invertedAccent:
|
|
93
|
+
invertedAccent: __props.invertedAccent
|
|
94
94
|
}, unref(attrs), {
|
|
95
95
|
tabindex: "0",
|
|
96
96
|
onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
|
|
97
97
|
}), createSlots({ _: 2 }, [
|
|
98
|
-
_ctx.$slots.default ||
|
|
98
|
+
_ctx.$slots.default || __props.label ? {
|
|
99
99
|
name: "default",
|
|
100
100
|
fn: withCtx(() => [
|
|
101
101
|
renderSlot(_ctx.$slots, "default", {}, () => [
|
|
102
|
-
createTextVNode(toDisplayString(
|
|
102
|
+
createTextVNode(toDisplayString(__props.label), 1)
|
|
103
103
|
])
|
|
104
104
|
]),
|
|
105
105
|
key: "0"
|
|
106
106
|
} : void 0,
|
|
107
|
-
_ctx.$slots.description ||
|
|
107
|
+
_ctx.$slots.description || __props.description ? {
|
|
108
108
|
name: "description",
|
|
109
109
|
fn: withCtx(() => [
|
|
110
110
|
renderSlot(_ctx.$slots, "description", {}, () => [
|
|
111
|
-
createTextVNode(toDisplayString(
|
|
111
|
+
createTextVNode(toDisplayString(__props.description), 1)
|
|
112
112
|
])
|
|
113
113
|
]),
|
|
114
114
|
key: "1"
|
|
@@ -142,4 +142,4 @@ const NcFormBoxButton = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules",
|
|
|
142
142
|
export {
|
|
143
143
|
NcFormBoxButton as N
|
|
144
144
|
};
|
|
145
|
-
//# sourceMappingURL=NcFormBoxButton-
|
|
145
|
+
//# sourceMappingURL=NcFormBoxButton-i4i3Lt_Q.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NcFormBoxButton-JvZ6_2E3.mjs","sources":["../../src/composables/useButtonLink.ts","../../src/components/NcFormBoxButton/NcFormBoxButton.vue"],"sourcesContent":["/*!\n * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport type { AnchorHTMLAttributes, ButtonHTMLAttributes, MaybeRef } from 'vue'\nimport type { RouteLocationRaw } from 'vue-router'\n\nimport { computed, inject, reactive } from 'vue'\nimport { routerKey } from 'vue-router'\n\ntype ButtonLinkProps = {\n\t// Required - general link props\n\n\t/**\n\t * RouterLink's to props and a trigger to use RouterLink.\n\t * Note: This takes precedence over the href attribute.\n\t */\n\tto: MaybeRef<RouteLocationRaw | undefined>\n\t/**\n\t * HyperLink href attribute and a trigger to use <a> hyperlink.\n\t */\n\thref: MaybeRef<string | undefined>\n\t/**\n\t * Define additional attributes, based on the tag\n\t */\n\tadditionalAttrs?: (tag: 'RouterLink' | 'a' | 'button') => object | undefined\n\n\t// RouterLink props\n\n\t/**\n\t * RouterLink's activeClass prop\n\t */\n\tactiveClass?: MaybeRef<string | undefined>\n\n\t// Hyperlink\n\n\t/**\n\t * <a> hyperlink's target attribute\n\t */\n\ttarget?: MaybeRef<AnchorHTMLAttributes['target'] | undefined>\n\t/**\n\t * <a> hyperlink's download attribute\n\t */\n\tdownload?: MaybeRef<string | boolean | undefined>\n\n\t// Button\n\n\t/**\n\t * <button> element's type attribute, but default to \"button\" instead of \"submit\"\n\t */\n\ttype?: MaybeRef<ButtonHTMLAttributes['type'] | undefined>\n\t/**\n\t * <button> element's disabled attribute\n\t */\n\tdisabled?: MaybeRef<boolean | undefined>\n}\n\n/**\n * Reusable implementation of an interactive button-like element that can be a link or a button\n *\n * @param options - Props to determine the button/link behavior. Can be a reactive object, or an object with nested refs, or mixed.\n */\nexport function useButtonLink(options: ButtonLinkProps) {\n\t// Resolve all MaybeRef-s values and maybe reactive object via unwrapping\n\tconst props = reactive(options)\n\n\tconst hasVueRouterContext = inject(routerKey, null) !== null\n\n\t/**\n\t * Tag name to be used\n\t */\n\tconst tag = computed(() => {\n\t\t// TODO: should we warn if props.to is provided but there is no vue-router?\n\t\tif (hasVueRouterContext && props.to) {\n\t\t\t// Note: RouterLink is used as globally registered component (by name) and not imported intentionally\n\t\t\t// to use injected component from the app and not bundle it to the button\n\t\t\treturn 'RouterLink'\n\t\t} else if (props.href) {\n\t\t\treturn 'a'\n\t\t} else {\n\t\t\treturn 'button'\n\t\t}\n\t})\n\n\tconst isLink = computed(() => tag.value === 'RouterLink' || tag.value === 'a')\n\tconst isHyperLink = computed(() => tag.value === 'a')\n\tconst isRouterLink = computed(() => tag.value === 'RouterLink')\n\tconst isButton = computed(() => tag.value === 'button')\n\n\tconst attrs = computed(() => {\n\t\tif (tag.value === 'RouterLink') {\n\t\t\treturn {\n\t\t\t\tto: props.to,\n\t\t\t\tactiveClass: 'active',\n\t\t\t\t...(props.additionalAttrs?.('RouterLink') ?? {}),\n\t\t\t}\n\t\t} else if (tag.value === 'a') {\n\t\t\treturn {\n\t\t\t\thref: props.href,\n\t\t\t\ttarget: props.target,\n\t\t\t\tdownload: props.download || undefined,\n\t\t\t\trel: 'nofollow noreferrer noopener',\n\t\t\t\t...(props.additionalAttrs?.('a') ?? {}),\n\t\t\t}\n\t\t} else if (tag.value === 'button') {\n\t\t\treturn {\n\t\t\t\ttype: props.type || 'button',\n\t\t\t\tdisabled: props.disabled,\n\t\t\t\t...(props.additionalAttrs?.('button') ?? {}),\n\t\t\t}\n\t\t}\n\t})\n\n\treturn {\n\t\ttag,\n\t\tisLink,\n\t\tisHyperLink,\n\t\tisRouterLink,\n\t\tisButton,\n\t\tattrs,\n\t}\n}\n","<!--\n - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport type { AnchorHTMLAttributes, Slot } from 'vue'\nimport type { RouteLocationRaw } from 'vue-router'\n\nimport { mdiArrowTopRight, mdiOpenInNew } from '@mdi/js'\nimport { computed, toRef } from 'vue'\nimport NcFormBoxItem from '../NcFormBox/NcFormBoxItem.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport { useButtonLink } from '../../composables/useButtonLink.ts'\n\nconst {\n\tlabel = undefined,\n\tdescription = undefined,\n\tinvertedAccent = false,\n\tto = undefined,\n\thref = undefined,\n\ttarget = undefined, // TODO: should it be _blank by default?\n\tdisabled = false,\n} = defineProps<{\n\t/** Main label */\n\tlabel?: string\n\t/** Optional description below the label, also used for the aria-describedby */\n\tdescription?: string\n\t/** Accent on the description instead of the label (see docs) */\n\tinvertedAccent?: boolean\n\t/** RouterLink's `to` prop; when provided, renders as `<RouterLink>` (takes precedence over the `href` prop) */\n\tto?: RouteLocationRaw\n\t/** Hyperlink `href` attribute; when provided, renders as `<a>` */\n\thref?: string\n\t/** Hyperlink's target attribute */\n\ttarget?: AnchorHTMLAttributes['target']\n\t/** Button's disabled attribute, not applicable to links */\n\tdisabled?: boolean\n}>()\n\ndefineEmits<{\n\t/** Native click event */\n\tclick: [event: MouseEvent]\n}>()\n\ndefineSlots<{\n\t/** Custom label content */\n\tdefault?: Slot\n\t/** Custom description content */\n\tdescription?: Slot\n\t/** Required icon (links have a default icon) */\n\ticon?: Slot // TODO: should the default link icon only be used for _blank links?\n}>()\n\nconst { tag, attrs, isLink } = useButtonLink({\n\tto: toRef(() => to),\n\thref: toRef(() => href),\n\ttarget: toRef(() => target),\n\tdisabled: toRef(() => disabled),\n})\n\nconst icon = computed(() => {\n\tif (isLink.value) {\n\t\treturn target === '_blank' ? mdiOpenInNew : mdiArrowTopRight\n\t}\n\treturn undefined\n})\n</script>\n\n<template>\n\t<NcFormBoxItem\n\t\t:tag\n\t\t:itemClasses=\"[\n\t\t\t'button-vue', /* Reset server's global HTML button styles */\n\t\t\t$style.formBoxButton,\n\t\t]\"\n\t\t:invertedAccent\n\t\tv-bind=\"attrs\"\n\t\ttabindex=\"0\"\n\t\t@click=\"$emit('click', $event)\">\n\t\t<template v-if=\"$slots.default || label\" #default>\n\t\t\t<slot>\n\t\t\t\t{{ label }}\n\t\t\t</slot>\n\t\t</template>\n\t\t<template v-if=\"$slots.description || description\" #description>\n\t\t\t<slot name=\"description\">\n\t\t\t\t{{ description }}\n\t\t\t</slot>\n\t\t</template>\n\t\t<template v-if=\"$slots.icon || icon\" #icon>\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<NcIconSvgWrapper v-if=\"icon\" :path=\"icon\" inline />\n\t\t\t</slot>\n\t\t</template>\n\t</NcFormBoxItem>\n</template>\n\n<style lang=\"scss\" module>\n.formBoxButton {\n\t/* Reset default HTML button styles */\n\tbackground: unset;\n\tborder: none;\n\tcolor: inherit;\n\tfont-size: inherit;\n\tfont-weight: inherit;\n\ttext-decoration: none;\n\ttext-align: inherit;\n\tline-height: inherit;\n\tpadding: 0;\n\tmargin: 0;\n\toutline: none;\n}\n</style>\n\n<docs>\n### General\n\nAn interactive button-like item within `<NcFormBox>`. It can be a button or a native link/router link if `to` or `href` props are provided.\n\nLike other form box items, it has a label and an optional description.\n\n```vue\n<script>\nimport { mdiContentCopy, mdiInformationOutline } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\treturn {\n\t\t\tmdiContentCopy,\n\t\t\tmdiInformationOutline,\n\t\t}\n\t},\n}\n</script>\n\n<template>\n\t<NcFormBox>\n\t\t<NcFormBoxButton\n\t\t\tlabel=\"Nextcloud\"\n\t\t\thref=\"https://nextcloud.com\"\n\t\t\ttarget=\"_blank\" />\n\n\t\t<NcFormBoxButton\n\t\t\thref=\"https://nextcloud-vue-components.netlify.app\">\n\t\t\t<code>@nextcloud/vue</code> documentation\n\t\t</NcFormBoxButton>\n\n\t\t<NcFormBoxButton\n\t\t\tlabel=\"About\"\n\t\t\tdescription=\"Installation details\"\n\t\t\thref=\"https://nextcloud.com\"\n\t\t\ttarget=\"_blank\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :path=\"mdiInformationOutline\" inline />\n\t\t\t</template>\n\t\t</NcFormBoxButton>\n\n\t\t<NcFormBoxButton\n\t\t\tlabel=\"Public signing key\">\n\t\t\t<template #description>\n\t\t\t\t<code>SSBkb24ndCBrbm93IHdoeSB5b3UgZGVjb2RlZCB0aGlzIHZhbHVlDQrgvLwg44GkIOKXlV/il5Ug4Ly944Gk</code>\n\t\t\t</template>\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :path=\"mdiContentCopy\" inline />\n\t\t\t</template>\n\t\t</NcFormBoxButton>\n\t</NcFormBox>\n</template>\n```\n\n### Inverted accent\n\nSometimes the description is more important than the label. In such cases use `inverted-accent` prop.\n\nFor example:\n- **Steps:** the description of the step is more important than the step number\n- **Copy button:** the value being copied is more important than the value label\n- **Folder picker:** the selected folder path is more important than the input label\n\n```vue\n<script>\nimport { mdiContentCopy, mdiDomain, mdiFolderOpenOutline } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\treturn { mdiContentCopy, mdiDomain, mdiFolderOpenOutline }\n\t},\n}\n</script>\n\n<template>\n\t<div style=\"display: flex; flex-direction: column; gap: calc(4 * var(--default-grid-baseline));\">\n\t\t<NcFormGroup label=\"Mailvelope\" description=\"A browser extension that enables easy OpenPGP encryption and decryption of emails\">\n\t\t\t<NcFormBox>\n\t\t\t\t<NcFormBoxButton\n\t\t\t\t\tlabel=\"Step 1\"\n\t\t\t\t\tdescription=\"Install the browser extension\"\n\t\t\t\t\thref=\"https://www.mailvelope.com/\"\n\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\tinverted-accent />\n\t\t\t\t<NcFormBoxButton\n\t\t\t\t\tlabel=\"Step 2\"\n\t\t\t\t\tdescription=\"Enable the current domain\"\n\t\t\t\t\tinverted-accent>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiDomain\" inline />\n\t\t\t\t\t</template>\n\t\t\t\t</NcFormBoxButton>\n\t\t\t</NcFormBox>\n\t\t</NcFormGroup>\n\n\t\t<NcFormGroup label=\"CalDAV\" description=\"Access Nextcloud calendars from other apps and devices\">\n\t\t\t<NcFormBox>\n\t\t\t\t<NcFormBoxButton\n\t\t\t\t\tlabel=\"CalDAV URL\"\n\t\t\t\t\tdescription=\"https://cloud.example.com/remote.php/dav/\"\n\t\t\t\t\tinverted-accent>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiContentCopy\" inline />\n\t\t\t\t\t</template>\n\t\t\t\t</NcFormBoxButton>\n\t\t\t\t<NcFormBoxButton\n\t\t\t\t\tlabel=\"Server Address for iOS and macOS\"\n\t\t\t\t\tdescription=\"https://cloud.example.com/remote.php/dav/principals/users/user/\"\n\t\t\t\t\tinverted-accent>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiContentCopy\" inline />\n\t\t\t\t\t</template>\n\t\t\t\t</NcFormBoxButton>\n\t\t\t</NcFormBox>\n\t\t</NcFormGroup>\n\n\t\t<NcFormGroup label=\"Files\">\n\t\t\t<NcFormBox>\n\t\t\t\t<NcFormBoxButton\n\t\t\t\t\tlabel=\"Attachments folder\"\n\t\t\t\t\tdescription=\"/Talk\"\n\t\t\t\t\tinverted-accent>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiFolderOpenOutline\" inline />\n\t\t\t\t\t</template>\n\t\t\t\t</NcFormBoxButton>\n\t\t\t</NcFormBox>\n\t\t</NcFormGroup>\n\t</div>\n</template>\n```\n\n### Requirements\n\n- Label is required (`label` prop or the default slot)\n- Icon is required unless there is a default icon (links)\n\n```vue\n<template>\n\t<NcFormBox>\n\t\t<NcFormBoxButton description=\"No label example\">\n\t\t\t<template #icon>\n\t\t\t\t✅\n\t\t\t</template>\n\t\t</NcFormBoxButton>\n\t\t<NcFormBoxButton label=\"No icon example\"/>\n\t\t<NcFormBoxButton\n\t\t\tlabel=\"No icon link example\"\n\t\t\tdescription=\"Links have a default icon\"\n\t\t\thref=\"https://nextcloud.com\"\n\t\t\ttarget=\"_blank\" />\n\t</NcFormBox>\n</template>\n```\n</docs>\n"],"names":["_openBlock","_createBlock","_mergeProps","_unref","$style","invertedAccent","$emit","$slots","label","_renderSlot","description"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"NcFormBoxButton-i4i3Lt_Q.mjs","sources":["../../src/composables/useButtonLink.ts","../../src/components/NcFormBoxButton/NcFormBoxButton.vue"],"sourcesContent":["/*!\n * SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n * SPDX-License-Identifier: AGPL-3.0-or-later\n */\n\nimport type { AnchorHTMLAttributes, ButtonHTMLAttributes, MaybeRef } from 'vue'\nimport type { RouteLocationRaw } from 'vue-router'\n\nimport { computed, inject, reactive } from 'vue'\nimport { routerKey } from 'vue-router'\n\ntype ButtonLinkProps = {\n\t// Required - general link props\n\n\t/**\n\t * RouterLink's to props and a trigger to use RouterLink.\n\t * Note: This takes precedence over the href attribute.\n\t */\n\tto: MaybeRef<RouteLocationRaw | undefined>\n\t/**\n\t * HyperLink href attribute and a trigger to use <a> hyperlink.\n\t */\n\thref: MaybeRef<string | undefined>\n\t/**\n\t * Define additional attributes, based on the tag\n\t */\n\tadditionalAttrs?: (tag: 'RouterLink' | 'a' | 'button') => object | undefined\n\n\t// RouterLink props\n\n\t/**\n\t * RouterLink's activeClass prop\n\t */\n\tactiveClass?: MaybeRef<string | undefined>\n\n\t// Hyperlink\n\n\t/**\n\t * <a> hyperlink's target attribute\n\t */\n\ttarget?: MaybeRef<AnchorHTMLAttributes['target'] | undefined>\n\t/**\n\t * <a> hyperlink's download attribute\n\t */\n\tdownload?: MaybeRef<string | boolean | undefined>\n\n\t// Button\n\n\t/**\n\t * <button> element's type attribute, but default to \"button\" instead of \"submit\"\n\t */\n\ttype?: MaybeRef<ButtonHTMLAttributes['type'] | undefined>\n\t/**\n\t * <button> element's disabled attribute\n\t */\n\tdisabled?: MaybeRef<boolean | undefined>\n}\n\n/**\n * Reusable implementation of an interactive button-like element that can be a link or a button\n *\n * @param options - Props to determine the button/link behavior. Can be a reactive object, or an object with nested refs, or mixed.\n */\nexport function useButtonLink(options: ButtonLinkProps) {\n\t// Resolve all MaybeRef-s values and maybe reactive object via unwrapping\n\tconst props = reactive(options)\n\n\tconst hasVueRouterContext = inject(routerKey, null) !== null\n\n\t/**\n\t * Tag name to be used\n\t */\n\tconst tag = computed(() => {\n\t\t// TODO: should we warn if props.to is provided but there is no vue-router?\n\t\tif (hasVueRouterContext && props.to) {\n\t\t\t// Note: RouterLink is used as globally registered component (by name) and not imported intentionally\n\t\t\t// to use injected component from the app and not bundle it to the button\n\t\t\treturn 'RouterLink'\n\t\t} else if (props.href) {\n\t\t\treturn 'a'\n\t\t} else {\n\t\t\treturn 'button'\n\t\t}\n\t})\n\n\tconst isLink = computed(() => tag.value === 'RouterLink' || tag.value === 'a')\n\tconst isHyperLink = computed(() => tag.value === 'a')\n\tconst isRouterLink = computed(() => tag.value === 'RouterLink')\n\tconst isButton = computed(() => tag.value === 'button')\n\n\tconst attrs = computed(() => {\n\t\tif (tag.value === 'RouterLink') {\n\t\t\treturn {\n\t\t\t\tto: props.to,\n\t\t\t\tactiveClass: 'active',\n\t\t\t\t...(props.additionalAttrs?.('RouterLink') ?? {}),\n\t\t\t}\n\t\t} else if (tag.value === 'a') {\n\t\t\treturn {\n\t\t\t\thref: props.href,\n\t\t\t\ttarget: props.target,\n\t\t\t\tdownload: props.download || undefined,\n\t\t\t\trel: 'nofollow noreferrer noopener',\n\t\t\t\t...(props.additionalAttrs?.('a') ?? {}),\n\t\t\t}\n\t\t} else if (tag.value === 'button') {\n\t\t\treturn {\n\t\t\t\ttype: props.type || 'button',\n\t\t\t\tdisabled: props.disabled,\n\t\t\t\t...(props.additionalAttrs?.('button') ?? {}),\n\t\t\t}\n\t\t}\n\t})\n\n\treturn {\n\t\ttag,\n\t\tisLink,\n\t\tisHyperLink,\n\t\tisRouterLink,\n\t\tisButton,\n\t\tattrs,\n\t}\n}\n","<!--\n - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport type { AnchorHTMLAttributes, Slot } from 'vue'\nimport type { RouteLocationRaw } from 'vue-router'\n\nimport { mdiArrowTopRight, mdiOpenInNew } from '@mdi/js'\nimport { computed, toRef } from 'vue'\nimport NcFormBoxItem from '../NcFormBox/NcFormBoxItem.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport { useButtonLink } from '../../composables/useButtonLink.ts'\n\nconst {\n\tlabel = undefined,\n\tdescription = undefined,\n\tinvertedAccent = false,\n\tto = undefined,\n\thref = undefined,\n\ttarget = undefined, // TODO: should it be _blank by default?\n\tdisabled = false,\n} = defineProps<{\n\t/** Main label */\n\tlabel?: string\n\t/** Optional description below the label, also used for the aria-describedby */\n\tdescription?: string\n\t/** Accent on the description instead of the label (see docs) */\n\tinvertedAccent?: boolean\n\t/** RouterLink's `to` prop; when provided, renders as `<RouterLink>` (takes precedence over the `href` prop) */\n\tto?: RouteLocationRaw\n\t/** Hyperlink `href` attribute; when provided, renders as `<a>` */\n\thref?: string\n\t/** Hyperlink's target attribute */\n\ttarget?: AnchorHTMLAttributes['target']\n\t/** Button's disabled attribute, not applicable to links */\n\tdisabled?: boolean\n}>()\n\ndefineEmits<{\n\t/** Native click event */\n\tclick: [event: MouseEvent]\n}>()\n\ndefineSlots<{\n\t/** Custom label content */\n\tdefault?: Slot\n\t/** Custom description content */\n\tdescription?: Slot\n\t/** Required icon (links have a default icon) */\n\ticon?: Slot // TODO: should the default link icon only be used for _blank links?\n}>()\n\nconst { tag, attrs, isLink } = useButtonLink({\n\tto: toRef(() => to),\n\thref: toRef(() => href),\n\ttarget: toRef(() => target),\n\tdisabled: toRef(() => disabled),\n})\n\nconst icon = computed(() => {\n\tif (isLink.value) {\n\t\treturn target === '_blank' ? mdiOpenInNew : mdiArrowTopRight\n\t}\n\treturn undefined\n})\n</script>\n\n<template>\n\t<NcFormBoxItem\n\t\t:tag\n\t\t:itemClasses=\"[\n\t\t\t'button-vue', /* Reset server's global HTML button styles */\n\t\t\t$style.formBoxButton,\n\t\t]\"\n\t\t:invertedAccent\n\t\tv-bind=\"attrs\"\n\t\ttabindex=\"0\"\n\t\t@click=\"$emit('click', $event)\">\n\t\t<template v-if=\"$slots.default || label\" #default>\n\t\t\t<slot>\n\t\t\t\t{{ label }}\n\t\t\t</slot>\n\t\t</template>\n\t\t<template v-if=\"$slots.description || description\" #description>\n\t\t\t<slot name=\"description\">\n\t\t\t\t{{ description }}\n\t\t\t</slot>\n\t\t</template>\n\t\t<template v-if=\"$slots.icon || icon\" #icon>\n\t\t\t<slot name=\"icon\">\n\t\t\t\t<NcIconSvgWrapper v-if=\"icon\" :path=\"icon\" inline />\n\t\t\t</slot>\n\t\t</template>\n\t</NcFormBoxItem>\n</template>\n\n<style lang=\"scss\" module>\n.formBoxButton {\n\t/* Reset default HTML button styles */\n\tbackground: unset;\n\tborder: none;\n\tcolor: inherit;\n\tfont-size: inherit;\n\tfont-weight: inherit;\n\ttext-decoration: none;\n\ttext-align: inherit;\n\tline-height: inherit;\n\tpadding: 0;\n\tmargin: 0;\n\toutline: none;\n}\n</style>\n\n<docs>\n### General\n\nAn interactive button-like item within `<NcFormBox>`. It can be a button or a native link/router link if `to` or `href` props are provided.\n\nLike other form box items, it has a label and an optional description.\n\n```vue\n<script>\nimport { mdiContentCopy, mdiInformationOutline } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\treturn {\n\t\t\tmdiContentCopy,\n\t\t\tmdiInformationOutline,\n\t\t}\n\t},\n}\n</script>\n\n<template>\n\t<NcFormBox>\n\t\t<NcFormBoxButton\n\t\t\tlabel=\"Nextcloud\"\n\t\t\thref=\"https://nextcloud.com\"\n\t\t\ttarget=\"_blank\" />\n\n\t\t<NcFormBoxButton\n\t\t\thref=\"https://nextcloud-vue-components.netlify.app\">\n\t\t\t<code>@nextcloud/vue</code> documentation\n\t\t</NcFormBoxButton>\n\n\t\t<NcFormBoxButton\n\t\t\tlabel=\"About\"\n\t\t\tdescription=\"Installation details\"\n\t\t\thref=\"https://nextcloud.com\"\n\t\t\ttarget=\"_blank\">\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :path=\"mdiInformationOutline\" inline />\n\t\t\t</template>\n\t\t</NcFormBoxButton>\n\n\t\t<NcFormBoxButton\n\t\t\tlabel=\"Public signing key\">\n\t\t\t<template #description>\n\t\t\t\t<code>SSBkb24ndCBrbm93IHdoeSB5b3UgZGVjb2RlZCB0aGlzIHZhbHVlDQrgvLwg44GkIOKXlV/il5Ug4Ly944Gk</code>\n\t\t\t</template>\n\t\t\t<template #icon>\n\t\t\t\t<NcIconSvgWrapper :path=\"mdiContentCopy\" inline />\n\t\t\t</template>\n\t\t</NcFormBoxButton>\n\t</NcFormBox>\n</template>\n```\n\n### Inverted accent\n\nSometimes the description is more important than the label. In such cases use `inverted-accent` prop.\n\nFor example:\n- **Steps:** the description of the step is more important than the step number\n- **Copy button:** the value being copied is more important than the value label\n- **Folder picker:** the selected folder path is more important than the input label\n\n```vue\n<script>\nimport { mdiContentCopy, mdiDomain, mdiFolderOpenOutline } from '@mdi/js'\n\nexport default {\n\tsetup() {\n\t\treturn { mdiContentCopy, mdiDomain, mdiFolderOpenOutline }\n\t},\n}\n</script>\n\n<template>\n\t<div style=\"display: flex; flex-direction: column; gap: calc(4 * var(--default-grid-baseline));\">\n\t\t<NcFormGroup label=\"Mailvelope\" description=\"A browser extension that enables easy OpenPGP encryption and decryption of emails\">\n\t\t\t<NcFormBox>\n\t\t\t\t<NcFormBoxButton\n\t\t\t\t\tlabel=\"Step 1\"\n\t\t\t\t\tdescription=\"Install the browser extension\"\n\t\t\t\t\thref=\"https://www.mailvelope.com/\"\n\t\t\t\t\ttarget=\"_blank\"\n\t\t\t\t\tinverted-accent />\n\t\t\t\t<NcFormBoxButton\n\t\t\t\t\tlabel=\"Step 2\"\n\t\t\t\t\tdescription=\"Enable the current domain\"\n\t\t\t\t\tinverted-accent>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiDomain\" inline />\n\t\t\t\t\t</template>\n\t\t\t\t</NcFormBoxButton>\n\t\t\t</NcFormBox>\n\t\t</NcFormGroup>\n\n\t\t<NcFormGroup label=\"CalDAV\" description=\"Access Nextcloud calendars from other apps and devices\">\n\t\t\t<NcFormBox>\n\t\t\t\t<NcFormBoxButton\n\t\t\t\t\tlabel=\"CalDAV URL\"\n\t\t\t\t\tdescription=\"https://cloud.example.com/remote.php/dav/\"\n\t\t\t\t\tinverted-accent>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiContentCopy\" inline />\n\t\t\t\t\t</template>\n\t\t\t\t</NcFormBoxButton>\n\t\t\t\t<NcFormBoxButton\n\t\t\t\t\tlabel=\"Server Address for iOS and macOS\"\n\t\t\t\t\tdescription=\"https://cloud.example.com/remote.php/dav/principals/users/user/\"\n\t\t\t\t\tinverted-accent>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiContentCopy\" inline />\n\t\t\t\t\t</template>\n\t\t\t\t</NcFormBoxButton>\n\t\t\t</NcFormBox>\n\t\t</NcFormGroup>\n\n\t\t<NcFormGroup label=\"Files\">\n\t\t\t<NcFormBox>\n\t\t\t\t<NcFormBoxButton\n\t\t\t\t\tlabel=\"Attachments folder\"\n\t\t\t\t\tdescription=\"/Talk\"\n\t\t\t\t\tinverted-accent>\n\t\t\t\t\t<template #icon>\n\t\t\t\t\t\t<NcIconSvgWrapper :path=\"mdiFolderOpenOutline\" inline />\n\t\t\t\t\t</template>\n\t\t\t\t</NcFormBoxButton>\n\t\t\t</NcFormBox>\n\t\t</NcFormGroup>\n\t</div>\n</template>\n```\n\n### Requirements\n\n- Label is required (`label` prop or the default slot)\n- Icon is required unless there is a default icon (links)\n\n```vue\n<template>\n\t<NcFormBox>\n\t\t<NcFormBoxButton description=\"No label example\">\n\t\t\t<template #icon>\n\t\t\t\t✅\n\t\t\t</template>\n\t\t</NcFormBoxButton>\n\t\t<NcFormBoxButton label=\"No icon example\"/>\n\t\t<NcFormBoxButton\n\t\t\tlabel=\"No icon link example\"\n\t\t\tdescription=\"Links have a default icon\"\n\t\t\thref=\"https://nextcloud.com\"\n\t\t\ttarget=\"_blank\" />\n\t</NcFormBox>\n</template>\n```\n</docs>\n"],"names":["_openBlock","_createBlock","_mergeProps","_unref","$style","$emit","$slots","_renderSlot"],"mappings":"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"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
import { defineComponent, openBlock, createBlock, unref, createSlots, withCtx, createVNode, createTextVNode, toDisplayString, createElementVNode, renderSlot } from "vue";
|
|
2
2
|
import { whenever } from "@vueuse/core";
|
|
3
|
-
import { N as NcFormBoxButton } from "./NcFormBoxButton-
|
|
4
|
-
import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-
|
|
5
|
-
import { u as useCopy } from "./useCopy
|
|
3
|
+
import { N as NcFormBoxButton } from "./NcFormBoxButton-i4i3Lt_Q.mjs";
|
|
4
|
+
import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-g8ubWhoz.mjs";
|
|
5
|
+
import { u as useCopy } from "./useCopy-PckLYUAU.mjs";
|
|
6
6
|
const _hoisted_1 = { class: "hidden-visually" };
|
|
7
7
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
8
8
|
__name: "NcFormBoxCopyButton",
|
|
@@ -18,12 +18,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
18
18
|
whenever(isCopied, () => emit("copy"));
|
|
19
19
|
return (_ctx, _cache) => {
|
|
20
20
|
return openBlock(), createBlock(NcFormBoxButton, {
|
|
21
|
-
disabled:
|
|
21
|
+
disabled: __props.disabled,
|
|
22
22
|
invertedAccent: "",
|
|
23
23
|
onClick: unref(copy)
|
|
24
24
|
}, createSlots({
|
|
25
25
|
description: withCtx(() => [
|
|
26
|
-
createTextVNode(toDisplayString(
|
|
26
|
+
createTextVNode(toDisplayString(__props.value), 1)
|
|
27
27
|
]),
|
|
28
28
|
icon: withCtx(() => [
|
|
29
29
|
createVNode(NcIconSvgWrapper, {
|
|
@@ -33,12 +33,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
33
33
|
]),
|
|
34
34
|
_: 2
|
|
35
35
|
}, [
|
|
36
|
-
_ctx.$slots.default ||
|
|
36
|
+
_ctx.$slots.default || __props.label ? {
|
|
37
37
|
name: "default",
|
|
38
38
|
fn: withCtx(() => [
|
|
39
39
|
createElementVNode("span", _hoisted_1, toDisplayString(unref(altText)), 1),
|
|
40
40
|
renderSlot(_ctx.$slots, "default", {}, () => [
|
|
41
|
-
createTextVNode(toDisplayString(
|
|
41
|
+
createTextVNode(toDisplayString(__props.label), 1)
|
|
42
42
|
])
|
|
43
43
|
]),
|
|
44
44
|
key: "0"
|
|
@@ -50,4 +50,4 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
50
50
|
export {
|
|
51
51
|
_sfc_main as _
|
|
52
52
|
};
|
|
53
|
-
//# sourceMappingURL=NcFormBoxCopyButton.vue_vue_type_script_setup_true_lang-
|
|
53
|
+
//# sourceMappingURL=NcFormBoxCopyButton.vue_vue_type_script_setup_true_lang-NfKiRrIn.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NcFormBoxCopyButton.vue_vue_type_script_setup_true_lang-
|
|
1
|
+
{"version":3,"file":"NcFormBoxCopyButton.vue_vue_type_script_setup_true_lang-NfKiRrIn.mjs","sources":["../../src/components/NcFormBoxCopyButton/NcFormBoxCopyButton.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\n\nimport { whenever } from '@vueuse/core'\nimport NcFormBoxButton from '../NcFormBoxButton/NcFormBoxButton.vue'\nimport NcIconSvgWrapper from '../NcIconSvgWrapper/NcIconSvgWrapper.vue'\nimport { useCopy } from '../../composables/useCopy.ts'\n\nconst {\n\tlabel = undefined,\n\tvalue,\n\tdisabled = false,\n} = defineProps<{\n\t/** Copied value's value */\n\tlabel?: string\n\t/** The value to be copied */\n\tvalue: string\n\t/** Native disabled attribute */\n\tdisabled?: boolean\n}>()\n\nconst emit = defineEmits<{\n\t/** Value has been successfully copied */\n\tcopy: []\n}>()\n\ndefineSlots<{\n\t/** Custom label content */\n\tdefault?: Slot\n}>()\n\nconst { isCopied, copy, icon, altText } = useCopy(() => value)\n\nwhenever(isCopied, () => emit('copy'))\n</script>\n\n<template>\n\t<NcFormBoxButton\n\t\t:disabled\n\t\tinvertedAccent\n\t\t@click=\"copy\">\n\t\t<template v-if=\"$slots.default || label\" #default>\n\t\t\t<span class=\"hidden-visually\">\n\t\t\t\t{{ altText }}\n\t\t\t</span>\n\t\t\t<slot>\n\t\t\t\t{{ label }}\n\t\t\t</slot>\n\t\t</template>\n\t\t<template #description>\n\t\t\t{{ value }}\n\t\t</template>\n\t\t<template #icon>\n\t\t\t<NcIconSvgWrapper :path=\"icon\" inline />\n\t\t</template>\n\t</NcFormBoxButton>\n</template>\n\n<docs>\n### General\n\n`NcFormBoxButton` set up to be a copy button.\n\n```vue\n<template>\n\t<NcFormGroup label=\"CalDAV\" description=\"Access Nextcloud calendars from other apps and devices\">\n\t\t<NcFormBox>\n\t\t\t<NcFormBoxCopyButton\n\t\t\t\tlabel=\"CalDAV URL\"\n\t\t\t\tvalue=\"https://cloud.example.com/remote.php/dav/\" />\n\t\t\t<NcFormBoxCopyButton\n\t\t\t\tlabel=\"Server Address for iOS and macOS\"\n\t\t\t\tvalue=\"https://cloud.example.com/remote.php/dav/principals/users/user/\" />\n\t\t</NcFormBox>\n\t</NcFormGroup>\n</template>\n```\n</docs>\n"],"names":["_createBlock","_unref","_createVNode","$slots","_createElementVNode","_toDisplayString","_renderSlot"],"mappings":";;;;;;;;;;;;;;;AA0BA,UAAM,OAAO;AAUb,UAAM,EAAE,UAAU,MAAM,MAAM,YAAY,QAAQ,MAAM,QAAA,KAAK;AAE7D,aAAS,UAAU,MAAM,KAAK,MAAM,CAAC;;0BAIpCA,YAkBkB,iBAAA;AAAA,QAjBhB,UAAA,QAAA;AAAA,QACD,gBAAA;AAAA,QACC,SAAOC,MAAA,IAAA;AAAA,MAAA;QASG,qBACV,MAAW;AAAA,0CAAR,QAAA,KAAK,GAAA,CAAA;AAAA,QAAA;QAEE,cACV,MAAwC;AAAA,UAAxCC,YAAwC,kBAAA;AAAA,YAArB,MAAMD,MAAA,IAAA;AAAA,YAAM,QAAA;AAAA,UAAA;;;;QAZhBE,KAAAA,OAAO,WAAW,QAAA;gBAAQ;AAAA,sBACzC,MAEO;AAAA,YAFPC,mBAEO,QAFP,YAEOC,gBADHJ,MAAA,OAAA,CAAO,GAAA,CAAA;AAAA,YAEXK,WAEO,4BAFP,MAEO;AAAA,8CADH,QAAA,KAAK,GAAA,CAAA;AAAA,YAAA;;;;;;;;"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import '../assets/NcFormBoxItem-
|
|
1
|
+
import '../assets/NcFormBoxItem-Bjbi17-B.css';
|
|
2
2
|
import { defineComponent, useSlots, openBlock, createElementBlock, normalizeClass, unref, createElementVNode, createBlock, resolveDynamicComponent, mergeProps, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode } from "vue";
|
|
3
3
|
import { u as useNcFormBox } from "./useNcFormBox-Djlh582y.mjs";
|
|
4
4
|
import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
|
|
5
|
-
import {
|
|
5
|
+
import { a as isLegacy } from "./legacy-BoqDmOCa.mjs";
|
|
6
6
|
import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
|
|
7
7
|
const _hoisted_1 = ["id"];
|
|
8
8
|
const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
@@ -29,7 +29,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
29
29
|
_ctx.$style.formBoxItem,
|
|
30
30
|
unref(formBoxItemClass),
|
|
31
31
|
{
|
|
32
|
-
[_ctx.$style.formBoxItem_inverted]:
|
|
32
|
+
[_ctx.$style.formBoxItem_inverted]: __props.invertedAccent && hasDescription(),
|
|
33
33
|
[_ctx.$style.formBoxItem_legacy]: unref(isLegacy)
|
|
34
34
|
}
|
|
35
35
|
])
|
|
@@ -37,14 +37,14 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
37
37
|
createElementVNode("span", {
|
|
38
38
|
class: normalizeClass(_ctx.$style.formBoxItem__content)
|
|
39
39
|
}, [
|
|
40
|
-
(openBlock(), createBlock(resolveDynamicComponent(
|
|
41
|
-
class: [_ctx.$style.formBoxItem__element,
|
|
40
|
+
(openBlock(), createBlock(resolveDynamicComponent(__props.tag), mergeProps({
|
|
41
|
+
class: [_ctx.$style.formBoxItem__element, __props.itemClasses]
|
|
42
42
|
}, _ctx.$attrs, {
|
|
43
43
|
onClick: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("click", $event))
|
|
44
44
|
}), {
|
|
45
45
|
default: withCtx(() => [
|
|
46
46
|
renderSlot(_ctx.$slots, "default", { descriptionId: unref(descriptionId) }, () => [
|
|
47
|
-
createTextVNode(toDisplayString(
|
|
47
|
+
createTextVNode(toDisplayString(__props.label || "⚠️ Label is missing"), 1)
|
|
48
48
|
])
|
|
49
49
|
]),
|
|
50
50
|
_: 3
|
|
@@ -55,7 +55,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
55
55
|
class: normalizeClass(_ctx.$style.formBoxItem__description)
|
|
56
56
|
}, [
|
|
57
57
|
renderSlot(_ctx.$slots, "description", {}, () => [
|
|
58
|
-
createTextVNode(toDisplayString(
|
|
58
|
+
createTextVNode(toDisplayString(__props.description), 1)
|
|
59
59
|
])
|
|
60
60
|
], 10, _hoisted_1)) : createCommentVNode("", true)
|
|
61
61
|
], 2),
|
|
@@ -71,19 +71,19 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
71
71
|
}
|
|
72
72
|
});
|
|
73
73
|
const formBoxItem = "_formBoxItem_74l6r";
|
|
74
|
+
const formBoxItem__description = "_formBoxItem__description_1GjPD";
|
|
74
75
|
const formBoxItem_legacy = "_formBoxItem_legacy_IgNr3";
|
|
75
76
|
const formBoxItem_inverted = "_formBoxItem_inverted_9GGkh";
|
|
76
77
|
const formBoxItem__element = "_formBoxItem__element_YEZDA";
|
|
77
|
-
const formBoxItem__description = "_formBoxItem__description_1GjPD";
|
|
78
78
|
const formBoxItem__content = "_formBoxItem__content_CcZbG";
|
|
79
79
|
const formBoxItem__icon = "_formBoxItem__icon_eZXNE";
|
|
80
80
|
const style0 = {
|
|
81
81
|
"material-design-icon": "_material-design-icon_D2F-K",
|
|
82
82
|
formBoxItem,
|
|
83
|
+
formBoxItem__description,
|
|
83
84
|
formBoxItem_legacy,
|
|
84
85
|
formBoxItem_inverted,
|
|
85
86
|
formBoxItem__element,
|
|
86
|
-
formBoxItem__description,
|
|
87
87
|
formBoxItem__content,
|
|
88
88
|
formBoxItem__icon
|
|
89
89
|
};
|
|
@@ -94,4 +94,4 @@ const NcFormBoxItem = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", c
|
|
|
94
94
|
export {
|
|
95
95
|
NcFormBoxItem as N
|
|
96
96
|
};
|
|
97
|
-
//# sourceMappingURL=NcFormBoxItem-
|
|
97
|
+
//# sourceMappingURL=NcFormBoxItem-BTB68AEB.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NcFormBoxItem-
|
|
1
|
+
{"version":3,"file":"NcFormBoxItem-BTB68AEB.mjs","sources":["../../src/components/NcFormBox/NcFormBoxItem.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\nimport type { VueClassType } from '../../utils/VueTypes.ts'\n\nimport { useNcFormBox } from '../../components/NcFormBox/useNcFormBox.ts'\nimport { createElementId } from '../../utils/createElementId.ts'\nimport { isLegacy } from '../../utils/legacy.ts'\n\ndefineOptions({ inheritAttrs: false })\n\nconst {\n\ttag,\n\tlabel = undefined,\n\tdescription = undefined,\n\tinvertedAccent = false,\n\tclass: rootClasses = undefined,\n\titemClasses = undefined,\n} = defineProps<{\n\t/** Interactive item element's tag */\n\ttag: string\n\t/** Main Label */\n\tlabel?: string\n\t/** Optional description below the label, also used for the aria-describedby */\n\tdescription?: string\n\t/** Accent on the description instead of the label */\n\tinvertedAccent?: boolean\n\t/** Root element classes */\n\tclass?: VueClassType\n\t/** Interactive item classes */\n\titemClasses?: VueClassType\n}>()\n\ndefineEmits<{\n\t/** Click on the item */\n\tclick: [event: MouseEvent]\n}>()\n\nconst slots = defineSlots<{\n\t/** Item's label custom content */\n\tdefault?: Slot<{\n\t\t/** IDRef of the description element if present */\n\t\tdescriptionId?: string\n\t}>\n\t/** Custom description content */\n\tdescription?: Slot<{\n\t\t/** IDRef of the description element if present */\n\t\tdescriptionId?: string\n\t}>\n\t/** Icon content */\n\ticon?: Slot\n}>()\n\nconst { formBoxItemClass } = useNcFormBox()\n\nconst descriptionId = createElementId()\nconst hasDescription = () => !!description || !!slots.description\n</script>\n\n<template>\n\t<div\n\t\t:class=\"[\n\t\t\trootClasses,\n\t\t\t$style.formBoxItem,\n\t\t\tformBoxItemClass,\n\t\t\t{\n\t\t\t\t[$style.formBoxItem_inverted]: invertedAccent && hasDescription(),\n\t\t\t\t[$style.formBoxItem_legacy]: isLegacy,\n\t\t\t},\n\t\t]\">\n\t\t<span :class=\"$style.formBoxItem__content\">\n\t\t\t<component\n\t\t\t\t:is=\"tag\"\n\t\t\t\t:class=\"[$style.formBoxItem__element, itemClasses]\"\n\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t@click=\"$emit('click', $event)\">\n\t\t\t\t<slot :descriptionId>\n\t\t\t\t\t{{ label || '⚠️ Label is missing' }}\n\t\t\t\t</slot>\n\t\t\t</component>\n\t\t\t<span v-if=\"hasDescription()\" :id=\"descriptionId\" :class=\"$style.formBoxItem__description\">\n\t\t\t\t<slot name=\"description\">\n\t\t\t\t\t{{ description }}\n\t\t\t\t</slot>\n\t\t\t</span>\n\t\t</span>\n\t\t<span :class=\"$style.formBoxItem__icon\">\n\t\t\t<slot name=\"icon\" :descriptionId>\n\t\t\t\t⚠️ Icon is missing\n\t\t\t</slot>\n\t\t</span>\n\t</div>\n</template>\n\n<style lang=\"scss\" module>\n.formBoxItem {\n\t--nc-form-box-item-border-width: 1px;\n\t--nc-form-box-item-min-height: 40px; // Special size defined by the design\n\t--form-element-label-offset: calc(var(--border-radius-element) + var(--default-grid-baseline));\n\t--form-element-label-padding: calc(var(--form-element-label-offset) - var(--nc-form-box-item-border-width));\n\t// New colors we don't yet have in theming\n\t// TODO: add new colors to the theming\n\t--color-primary-element-extra-light: hsl(from var(--color-primary-element-light) h s calc(l * 1.045));\n\t--color-primary-element-extra-light-hover: hsl(from var(--color-primary-element-light-hover) h s calc(l * 1.045));\n\tposition: relative;\n\tdisplay: flex;\n\talign-items: center;\n\tgap: calc(2 * var(--default-grid-baseline));\n\tmin-height: var(--nc-form-box-item-min-height);\n\tpadding-inline: var(--form-element-label-padding);\n\tborder: 1px solid var(--color-primary-element-extra-light-hover);\n\tborder-bottom-width: 2px;\n\tborder-radius: var(--border-radius-element);\n\tbackground-color: var(--color-primary-element-extra-light);\n\tcolor: var(--color-main-text);\n\tfont-weight: var(--font-weight-element, normal);\n\ttransition-property: color, border-color, background-color;\n\ttransition-duration: var(--animation-quick);\n\ttransition-timing-function: linear;\n\t-webkit-user-select: none;\n\tuser-select: none;\n\tcursor: pointer;\n\n\t* {\n\t\tcursor: inherit;\n\t}\n\n\t&:has(:disabled) {\n\t\tcursor: default;\n\t\topacity: 0.5;\n\t}\n\n\t&:hover:not(:has(:disabled)) {\n\t\tcolor: var(--color-primary-element-light-text);\n\t\tbackground-color: var(--color-primary-element-extra-light-hover);\n\t}\n\n\t&:has(:focus-visible) {\n\t\toutline: 2px solid var(--color-main-text);\n\t\tbox-shadow: 0 0 0 4px var(--color-main-background);\n\t}\n\n\t&__description {\n\t\tfont-weight: var(--font-weight-default, normal);\n\t}\n\n\t&.formBoxItem_legacy {\n\t\t--nc-form-box-item-border-width: 0px;\n\t\tborder: none;\n\t}\n\n\t&.formBoxItem_inverted {\n\t\t.formBoxItem__element {\n\t\t\tcolor: var(--color-text-maxcontrast);\n\t\t}\n\n\t\t.formBoxItem__description {\n\t\t\tcolor: inherit;\n\t\t}\n\t}\n}\n\n.formBoxItem__content {\n\tflex: 1;\n\tdisplay: flex;\n\tflex-direction: column;\n\tpadding-block: calc(2 * var(--default-grid-baseline));\n\toverflow-wrap: anywhere;\n}\n\n// A trick for accessibility:\n// make entire component clickable while internally splitting the interactive item and the description\n.formBoxItem__element::after {\n\tcontent: '';\n\tposition: absolute;\n\tinset: 0;\n}\n\n.formBoxItem__description {\n\tcolor: var(--color-text-maxcontrast);\n}\n\n.formBoxItem__icon {\n\tdisplay: flex;\n\talign-items: center;\n\tjustify-content: flex-end;\n}\n</style>\n\n<docs>\nAn internal component\n</docs>\n"],"names":["_useSlots","_createElementBlock","_normalizeClass","$style","_unref","_createElementVNode","_createBlock","_resolveDynamicComponent","_mergeProps","$attrs","$emit","_renderSlot"],"mappings":";;;;;;;;;;;;;;;;;;;AA0CA,UAAM,QAAQA,SAAA;AAed,UAAM,EAAE,iBAAA,IAAqB,aAAA;AAE7B,UAAM,gBAAgB,gBAAA;AACtB,UAAM,iBAAiB,MAAM,CAAC,CAAC,QAAA,eAAe,CAAC,CAAC,MAAM;;0BAIrDC,mBA+BM,OAAA;AAAA,QA9BJ,OAAKC,eAAA;AAAA,UAAO,QAAA;AAAA,UAAgBC,KAAAA,OAAO;AAAA,UAAgBC,MAAA,gBAAA;AAAA;YAA4BD,CAAAA,KAAAA,OAAO,oBAAoB,GAAG,QAAA,kBAAkB,eAAA;AAAA,aAAuBA,KAAAA,OAAO,kBAAkB,GAAGC,MAAA,QAAA;AAAA,UAAA;AAAA;;QASnLC,mBAeO,QAAA;AAAA,UAfA,OAAKH,eAAEC,KAAAA,OAAO,oBAAoB;AAAA,QAAA;wBACxCG,YAQYC,wBAPN,QAAA,GAAG,GADTC,WAQY;AAAA,YANV,OAAK,CAAGL,KAAAA,OAAO,sBAAsB,QAAA,WAAW;AAAA,UAAA,GACzCM,KAAAA,QAAM;AAAA,YACb,SAAK,OAAA,CAAA,MAAA,OAAA,CAAA,IAAA,CAAA,WAAEC,KAAAA,MAAK,SAAU,MAAM;AAAA,UAAA;6BAC7B,MAEO;AAAA,cAFPC,WAEO,KAAA,QAAA,WAAA,EAFA,eAAAP,MAAA,aAAA,EAAA,GAAP,MAEO;AAAA,gDADH,QAAA,SAAK,qBAAA,GAAA,CAAA;AAAA,cAAA;;;;UAGE,iCAAZH,mBAIO,QAAA;AAAA;YAJwB,IAAIG,MAAA,aAAA;AAAA,YAAgB,OAAKF,eAAEC,KAAAA,OAAO,wBAAwB;AAAA,UAAA;YACxFQ,WAEO,gCAFP,MAEO;AAAA,8CADH,QAAA,WAAW,GAAA,CAAA;AAAA,YAAA;;;QAIjBN,mBAIO,QAAA;AAAA,UAJA,OAAKH,eAAEC,KAAAA,OAAO,iBAAiB;AAAA,QAAA;UACrCQ,WAEO,KAAA,QAAA,QAAA,EAFY,eAAAP,MAAA,aAAA,EAAA,GAAnB,MAEO;AAAA,sDAF0B,wBAEjC,EAAA;AAAA,UAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import '../assets/NcFormBoxSwitch-Cn-MBAzZ.css';
|
|
2
2
|
import { defineComponent, useModel, watch, openBlock, createBlock, unref, createSlots, withCtx, withDirectives, createElementVNode, normalizeClass, vModelCheckbox, createVNode, renderSlot, createTextVNode, toDisplayString, mergeModels } from "vue";
|
|
3
|
-
import { N as NcFormBoxItem } from "./NcFormBoxItem-
|
|
4
|
-
import { N as NcIconToggleSwitch } from "./NcIconToggleSwitch-
|
|
3
|
+
import { N as NcFormBoxItem } from "./NcFormBoxItem-BTB68AEB.mjs";
|
|
4
|
+
import { N as NcIconToggleSwitch } from "./NcIconToggleSwitch-CbfRwb67.mjs";
|
|
5
5
|
import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
|
|
6
6
|
import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
|
|
7
7
|
const _hoisted_1 = ["id", "aria-describedby", "disabled"];
|
|
@@ -44,7 +44,7 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
44
44
|
type: "checkbox",
|
|
45
45
|
role: "switch",
|
|
46
46
|
"aria-describedby": descriptionId,
|
|
47
|
-
disabled:
|
|
47
|
+
disabled: __props.disabled
|
|
48
48
|
}, null, 10, _hoisted_1), [
|
|
49
49
|
[vModelCheckbox, modelValue.value]
|
|
50
50
|
]),
|
|
@@ -55,20 +55,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
55
55
|
]),
|
|
56
56
|
_: 2
|
|
57
57
|
}, [
|
|
58
|
-
_ctx.$slots.default ||
|
|
58
|
+
_ctx.$slots.default || __props.label ? {
|
|
59
59
|
name: "default",
|
|
60
60
|
fn: withCtx(() => [
|
|
61
61
|
renderSlot(_ctx.$slots, "default", {}, () => [
|
|
62
|
-
createTextVNode(toDisplayString(
|
|
62
|
+
createTextVNode(toDisplayString(__props.label), 1)
|
|
63
63
|
])
|
|
64
64
|
]),
|
|
65
65
|
key: "0"
|
|
66
66
|
} : void 0,
|
|
67
|
-
_ctx.$slots.description ||
|
|
67
|
+
_ctx.$slots.description || __props.description ? {
|
|
68
68
|
name: "description",
|
|
69
69
|
fn: withCtx(() => [
|
|
70
70
|
renderSlot(_ctx.$slots, "description", {}, () => [
|
|
71
|
-
createTextVNode(toDisplayString(
|
|
71
|
+
createTextVNode(toDisplayString(__props.description), 1)
|
|
72
72
|
])
|
|
73
73
|
]),
|
|
74
74
|
key: "1"
|
|
@@ -89,4 +89,4 @@ const NcFormBoxSwitch = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules",
|
|
|
89
89
|
export {
|
|
90
90
|
NcFormBoxSwitch as N
|
|
91
91
|
};
|
|
92
|
-
//# sourceMappingURL=NcFormBoxSwitch-
|
|
92
|
+
//# sourceMappingURL=NcFormBoxSwitch-DlNcJ1q7.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NcFormBoxSwitch-
|
|
1
|
+
{"version":3,"file":"NcFormBoxSwitch-DlNcJ1q7.mjs","sources":["../../src/components/NcFormBoxSwitch/NcFormBoxSwitch.vue"],"sourcesContent":["<!--\n - SPDX-FileCopyrightText: 2025 Nextcloud GmbH and Nextcloud contributors\n - SPDX-License-Identifier: AGPL-3.0-or-later\n-->\n\n<script setup lang=\"ts\">\nimport type { Slot } from 'vue'\n\nimport { watch } from 'vue'\nimport NcFormBoxItem from '../NcFormBox/NcFormBoxItem.vue'\nimport NcIconToggleSwitch from '../NcIconToggleSwitch/NcIconToggleSwitch.vue'\nimport { createElementId } from '../../utils/createElementId.ts'\n\n/** Switch toggle model value */\nconst modelValue = defineModel<boolean>({ required: true })\n\nconst {\n\tlabel = undefined,\n\tdescription = undefined,\n\tdisabled = false,\n} = defineProps<{\n\t/** Main label */\n\tlabel?: string\n\t/** Optional description below the label, also used for the aria-describedby */\n\tdescription?: string\n\t/** Disabled state */\n\tdisabled?: boolean\n}>()\n\nconst emit = defineEmits<{\n\t/** Switch is toggled ON */\n\tenable: []\n\t/** Switch is toggled OFF */\n\tdisable: []\n}>()\n\ndefineSlots<{\n\t/** Custom label content */\n\tdefault?: Slot\n\t/** Custom description content */\n\tdescription?: Slot\n}>()\n\nconst inputId = createElementId()\n\nwatch(modelValue, () => {\n\tif (modelValue.value) {\n\t\temit('enable')\n\t} else {\n\t\temit('disable')\n\t}\n}, {\n\t// defineModel emits update:modelValue synchronously\n\t// Watching it synchronously to emit the enable/disable events together with the update:modelValue event\n\tflush: 'sync',\n})\n</script>\n\n<template>\n\t<NcFormBoxItem\n\t\ttag=\"label\"\n\t\t:for=\"inputId\">\n\t\t<template v-if=\"$slots.default || label\" #default>\n\t\t\t<slot>\n\t\t\t\t{{ label }}\n\t\t\t</slot>\n\t\t</template>\n\t\t<template v-if=\"$slots.description || description\" #description>\n\t\t\t<slot name=\"description\">\n\t\t\t\t{{ description }}\n\t\t\t</slot>\n\t\t</template>\n\t\t<template #icon=\"{ descriptionId }\">\n\t\t\t<input\n\t\t\t\t:id=\"inputId\"\n\t\t\t\tv-model=\"modelValue\"\n\t\t\t\t:class=\"$style.formBoxSwitch__input\"\n\t\t\t\ttype=\"checkbox\"\n\t\t\t\trole=\"switch\"\n\t\t\t\t:aria-describedby=\"descriptionId\"\n\t\t\t\t:disabled>\n\t\t\t<NcIconToggleSwitch :checked=\"modelValue\" inline />\n\t\t</template>\n\t</NcFormBoxItem>\n</template>\n\n<style lang=\"scss\" module>\ninput.formBoxSwitch__input {\n\tmargin: 0;\n\twidth: var(--default-clickable-area);\n\t/* Keep it visually hidden but on the position of visual switch icon */\n\tposition: absolute;\n\tinset-block: 0;\n\tinset-inline-end: var(--form-element-label-offset);\n\tz-index: -1;\n\topacity: 0 !important;\n\t/* Override server styles */\n\theight: auto;\n\tcursor: inherit;\n}\n</style>\n\n<docs>\n### General\n\nA toggle switch to be used within `<NcFormBox>`.\n\nLike other form box items, it has a label and an optional description.\n\nIn addition to the standard `v-model` binding, it emits `enable` and `disable` events when toggled **on** or **off**.\n\n```vue\n<script>\nexport default {\n\tdata() {\n\t\treturn {\n\t\t\tswitchValue: false,\n\t\t}\n\t}\n}\n</script>\n\n<template>\n\t<NcFormBox>\n\t\t<NcFormBoxSwitch v-model=\"switchValue\" label=\"Turn camera and microphone off by default\" />\n\t\t<NcFormBoxSwitch\n\t\t\tv-model=\"switchValue\"\n\t\t\tlabel=\"Blur camera background by default\"\n\t\t\tdisabled />\n\t\t<NcFormBoxSwitch\n\t\t\tv-model=\"switchValue\"\n\t\t\tlabel=\"Skip device preview before joining a call\"\n\t\t\tdescription=\"Will always show if recording consent is required\"\n\t\t\t@update:modelValue=\"console.log('Switch toggled', $event, switchValue)\"\n\t\t\t@enable=\"console.log('Switch enabled', switchValue)\"\n\t\t\t@disable=\"console.log('Switch disabled', switchValue)\"\n\t\t/>\n\t\t<NcFormBoxSwitch v-model=\"switchValue\" />\n\t</NcFormBox>\n</template>\n```\n</docs>\n"],"names":["_useModel","_createBlock","_unref","_withCtx","_createElementVNode","_normalizeClass","$style","_createVNode","$slots","_renderSlot"],"mappings":";;;;;;;;;;;;;;;;;;AAcA,UAAM,aAAaA,SAAoB,SAAA,YAAmB;AAe1D,UAAM,OAAO;AAcb,UAAM,UAAU,gBAAA;AAEhB,UAAM,YAAY,MAAM;AACvB,UAAI,WAAW,OAAO;AACrB,aAAK,QAAQ;AAAA,MACd,OAAO;AACN,aAAK,SAAS;AAAA,MACf;AAAA,IACD,GAAG;AAAA;AAAA;AAAA,MAGF,OAAO;AAAA,IAAA,CACP;;0BAIAC,YAwBgB,eAAA;AAAA,QAvBf,KAAI;AAAA,QACH,KAAKC,MAAA,OAAA;AAAA,MAAA;QAWK,MAAIC,QACd,CAOW,EARO,oBAAa;AAAA,yBAC/BC,mBAOW,SAAA;AAAA,YANT,IAAIF,MAAA,OAAA;AAAA,yEACI,WAAU,QAAA;AAAA,YAClB,OAAKG,eAAEC,KAAAA,OAAO,oBAAoB;AAAA,YACnC,MAAK;AAAA,YACL,MAAK;AAAA,YACJ,oBAAkB;AAAA,YAClB,UAAA,QAAA;AAAA,UAAA;6BALQ,WAAA,KAAU;AAAA,UAAA;UAMpBC,YAAmD,oBAAA;AAAA,YAA9B,SAAS,WAAA;AAAA,YAAY,QAAA;AAAA,UAAA;;;;QAnB3BC,KAAAA,OAAO,WAAW,QAAA;gBAAQ;AAAA,sBACzC,MAEO;AAAA,YAFPC,WAEO,4BAFP,MAEO;AAAA,8CADH,QAAA,KAAK,GAAA,CAAA;AAAA,YAAA;;;;QAGMD,KAAAA,OAAO,eAAe,QAAA;gBAAc;AAAA,sBACnD,MAEO;AAAA,YAFPC,WAEO,gCAFP,MAEO;AAAA,8CADH,QAAA,WAAW,GAAA,CAAA;AAAA,YAAA;;;;;;;;;;;;;;;;;"}
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import '../assets/NcFormGroup-
|
|
1
|
+
import '../assets/NcFormGroup-qFucmL8a.css';
|
|
2
2
|
import { defineComponent, useSlots, openBlock, createElementBlock, normalizeClass, createElementVNode, renderSlot, createTextVNode, toDisplayString, createCommentVNode } from "vue";
|
|
3
3
|
import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
|
|
4
4
|
import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
|
|
@@ -21,23 +21,23 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
|
|
|
21
21
|
const hasContentOnly = () => __props.hideLabel && (!hasDescription() || __props.hideDescription);
|
|
22
22
|
return (_ctx, _cache) => {
|
|
23
23
|
return openBlock(), createElementBlock("fieldset", {
|
|
24
|
-
class: normalizeClass([_ctx.$style.formGroup, { [_ctx.$style.formGroup_noGap]:
|
|
24
|
+
class: normalizeClass([_ctx.$style.formGroup, { [_ctx.$style.formGroup_noGap]: __props.noGap }]),
|
|
25
25
|
"aria-describedby": getDescriptionId()
|
|
26
26
|
}, [
|
|
27
27
|
createElementVNode("legend", {
|
|
28
|
-
class: normalizeClass([_ctx.$style.formGroup__label, { "hidden-visually":
|
|
28
|
+
class: normalizeClass([_ctx.$style.formGroup__label, { "hidden-visually": __props.hideLabel }])
|
|
29
29
|
}, [
|
|
30
30
|
renderSlot(_ctx.$slots, "label", {}, () => [
|
|
31
|
-
createTextVNode(toDisplayString(
|
|
31
|
+
createTextVNode(toDisplayString(__props.label || "⚠️ Missing label"), 1)
|
|
32
32
|
])
|
|
33
33
|
], 2),
|
|
34
34
|
hasDescription() ? (openBlock(), createElementBlock("div", {
|
|
35
35
|
key: 0,
|
|
36
36
|
id: descriptionId,
|
|
37
|
-
class: normalizeClass([_ctx.$style.formGroup__description, { "hidden-visually":
|
|
37
|
+
class: normalizeClass([_ctx.$style.formGroup__description, { "hidden-visually": __props.hideDescription }])
|
|
38
38
|
}, [
|
|
39
39
|
renderSlot(_ctx.$slots, "description", {}, () => [
|
|
40
|
-
createTextVNode(toDisplayString(
|
|
40
|
+
createTextVNode(toDisplayString(__props.description), 1)
|
|
41
41
|
])
|
|
42
42
|
], 2)) : createCommentVNode("", true),
|
|
43
43
|
createElementVNode("div", {
|
|
@@ -71,4 +71,4 @@ const NcFormGroup = /* @__PURE__ */ _export_sfc(_sfc_main, [["__cssModules", css
|
|
|
71
71
|
export {
|
|
72
72
|
NcFormGroup as N
|
|
73
73
|
};
|
|
74
|
-
//# sourceMappingURL=NcFormGroup-
|
|
74
|
+
//# sourceMappingURL=NcFormGroup-DvLGFMdb.mjs.map
|