@nextcloud/vue 8.2.0 → 8.4.0
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 +67 -2
- package/dist/Components/NcActionButton.cjs +4 -4
- package/dist/Components/NcActionButton.cjs.map +1 -1
- package/dist/Components/NcActionButton.mjs +9 -9
- package/dist/Components/NcActionButton.mjs.map +1 -1
- package/dist/Components/NcActionButtonGroup.cjs +13 -9
- package/dist/Components/NcActionButtonGroup.cjs.map +1 -1
- package/dist/Components/NcActionButtonGroup.mjs +16 -11
- package/dist/Components/NcActionButtonGroup.mjs.map +1 -1
- package/dist/Components/NcActionInput.cjs +9 -8
- package/dist/Components/NcActionInput.cjs.map +1 -1
- package/dist/Components/NcActionInput.mjs +11 -10
- package/dist/Components/NcActionInput.mjs.map +1 -1
- package/dist/Components/NcActionLink.cjs +1 -1
- package/dist/Components/NcActionLink.mjs +1 -1
- package/dist/Components/NcActionRouter.cjs +1 -1
- package/dist/Components/NcActionRouter.mjs +1 -1
- package/dist/Components/NcActionText.cjs +1 -1
- package/dist/Components/NcActionText.mjs +1 -1
- package/dist/Components/NcActionTextEditable.cjs +1 -1
- package/dist/Components/NcActionTextEditable.mjs +1 -1
- package/dist/Components/NcActions.cjs +40 -40
- package/dist/Components/NcActions.cjs.map +1 -1
- package/dist/Components/NcActions.mjs +37 -37
- package/dist/Components/NcActions.mjs.map +1 -1
- package/dist/Components/NcAppContent.cjs +15 -14
- package/dist/Components/NcAppContent.cjs.map +1 -1
- package/dist/Components/NcAppContent.mjs +35 -34
- package/dist/Components/NcAppContent.mjs.map +1 -1
- package/dist/Components/NcAppNavigation.cjs +14 -14
- package/dist/Components/NcAppNavigation.cjs.map +1 -1
- package/dist/Components/NcAppNavigation.mjs +20 -20
- package/dist/Components/NcAppNavigation.mjs.map +1 -1
- package/dist/Components/NcAppNavigationCaption.cjs +2 -2
- package/dist/Components/NcAppNavigationCaption.cjs.map +1 -1
- package/dist/Components/NcAppNavigationCaption.mjs +2 -2
- package/dist/Components/NcAppNavigationCaption.mjs.map +1 -1
- package/dist/Components/NcAppNavigationItem.cjs +28 -24
- package/dist/Components/NcAppNavigationItem.cjs.map +1 -1
- package/dist/Components/NcAppNavigationItem.mjs +66 -63
- package/dist/Components/NcAppNavigationItem.mjs.map +1 -1
- package/dist/Components/NcAppNavigationNewItem.cjs +2 -2
- package/dist/Components/NcAppNavigationNewItem.mjs +2 -2
- package/dist/Components/NcAppNavigationSettings.cjs +7 -8
- package/dist/Components/NcAppNavigationSettings.cjs.map +1 -1
- package/dist/Components/NcAppNavigationSettings.mjs +27 -29
- package/dist/Components/NcAppNavigationSettings.mjs.map +1 -1
- package/dist/Components/NcAppNavigationToggle.cjs +1 -1
- package/dist/Components/NcAppNavigationToggle.mjs +1 -1
- package/dist/Components/NcAppSettingsDialog.cjs +31 -30
- package/dist/Components/NcAppSettingsDialog.cjs.map +1 -1
- package/dist/Components/NcAppSettingsDialog.mjs +30 -29
- package/dist/Components/NcAppSettingsDialog.mjs.map +1 -1
- package/dist/Components/NcAppSidebar.cjs +88 -45
- package/dist/Components/NcAppSidebar.cjs.map +1 -1
- package/dist/Components/NcAppSidebar.mjs +158 -112
- package/dist/Components/NcAppSidebar.mjs.map +1 -1
- package/dist/Components/NcAvatar.cjs +1 -1
- package/dist/Components/NcAvatar.mjs +1 -1
- package/dist/Components/NcBreadcrumb.cjs +4 -3
- package/dist/Components/NcBreadcrumb.cjs.map +1 -1
- package/dist/Components/NcBreadcrumb.mjs +6 -5
- package/dist/Components/NcBreadcrumb.mjs.map +1 -1
- package/dist/Components/NcBreadcrumbs.cjs +26 -19
- package/dist/Components/NcBreadcrumbs.cjs.map +1 -1
- package/dist/Components/NcBreadcrumbs.mjs +48 -41
- package/dist/Components/NcBreadcrumbs.mjs.map +1 -1
- package/dist/Components/NcCheckboxRadioSwitch.cjs +48 -38
- package/dist/Components/NcCheckboxRadioSwitch.cjs.map +1 -1
- package/dist/Components/NcCheckboxRadioSwitch.mjs +73 -63
- package/dist/Components/NcCheckboxRadioSwitch.mjs.map +1 -1
- package/dist/Components/NcColorPicker.cjs +35 -12
- package/dist/Components/NcColorPicker.cjs.map +1 -1
- package/dist/Components/NcColorPicker.mjs +52 -29
- package/dist/Components/NcColorPicker.mjs.map +1 -1
- package/dist/Components/NcDashboardWidget.cjs +7 -6
- package/dist/Components/NcDashboardWidget.cjs.map +1 -1
- package/dist/Components/NcDashboardWidget.mjs +17 -16
- package/dist/Components/NcDashboardWidget.mjs.map +1 -1
- package/dist/Components/NcDashboardWidgetItem.cjs +1 -1
- package/dist/Components/NcDashboardWidgetItem.mjs +1 -1
- package/dist/Components/NcDateTime.cjs +15 -13
- package/dist/Components/NcDateTime.cjs.map +1 -1
- package/dist/Components/NcDateTime.mjs +12 -11
- package/dist/Components/NcDateTime.mjs.map +1 -1
- package/dist/Components/NcDateTimePicker.cjs +24 -23
- package/dist/Components/NcDateTimePicker.cjs.map +1 -1
- package/dist/Components/NcDateTimePicker.mjs +36 -36
- package/dist/Components/NcDateTimePicker.mjs.map +1 -1
- package/dist/Components/NcDateTimePickerNative.cjs +3 -3
- package/dist/Components/NcDateTimePickerNative.cjs.map +1 -1
- package/dist/Components/NcDateTimePickerNative.mjs +3 -3
- package/dist/Components/NcDateTimePickerNative.mjs.map +1 -1
- package/dist/Components/NcDialog.cjs +21 -20
- package/dist/Components/NcDialog.cjs.map +1 -1
- package/dist/Components/NcDialog.mjs +30 -28
- package/dist/Components/NcDialog.mjs.map +1 -1
- package/dist/Components/NcDialogButton.cjs +1 -1
- package/dist/Components/NcDialogButton.cjs.map +1 -1
- package/dist/Components/NcDialogButton.mjs +1 -1
- package/dist/Components/NcDialogButton.mjs.map +1 -1
- package/dist/Components/NcEmojiPicker.cjs +2 -1
- package/dist/Components/NcEmojiPicker.cjs.map +1 -1
- package/dist/Components/NcEmojiPicker.mjs +18 -17
- package/dist/Components/NcEmojiPicker.mjs.map +1 -1
- package/dist/Components/NcHeaderMenu.cjs +8 -8
- package/dist/Components/NcHeaderMenu.cjs.map +1 -1
- package/dist/Components/NcHeaderMenu.mjs +6 -6
- package/dist/Components/NcHeaderMenu.mjs.map +1 -1
- package/dist/Components/NcInputField.cjs +15 -4
- package/dist/Components/NcInputField.cjs.map +1 -1
- package/dist/Components/NcInputField.mjs +18 -7
- package/dist/Components/NcInputField.mjs.map +1 -1
- package/dist/Components/NcListItem.cjs +15 -10
- package/dist/Components/NcListItem.cjs.map +1 -1
- package/dist/Components/NcListItem.mjs +22 -17
- package/dist/Components/NcListItem.mjs.map +1 -1
- package/dist/Components/NcListItemIcon.cjs +1 -1
- package/dist/Components/NcListItemIcon.mjs +1 -1
- package/dist/Components/NcModal.cjs +50 -46
- package/dist/Components/NcModal.cjs.map +1 -1
- package/dist/Components/NcModal.mjs +66 -63
- package/dist/Components/NcModal.mjs.map +1 -1
- package/dist/Components/NcPasswordField.cjs +14 -12
- package/dist/Components/NcPasswordField.cjs.map +1 -1
- package/dist/Components/NcPasswordField.mjs +25 -23
- package/dist/Components/NcPasswordField.mjs.map +1 -1
- package/dist/Components/NcRelatedResourcesPanel.cjs +6 -4
- package/dist/Components/NcRelatedResourcesPanel.cjs.map +1 -1
- package/dist/Components/NcRelatedResourcesPanel.mjs +24 -22
- package/dist/Components/NcRelatedResourcesPanel.mjs.map +1 -1
- package/dist/Components/NcRichContenteditable.cjs +113 -82
- package/dist/Components/NcRichContenteditable.cjs.map +1 -1
- package/dist/Components/NcRichContenteditable.mjs +89 -55
- package/dist/Components/NcRichContenteditable.mjs.map +1 -1
- package/dist/Components/NcRichText.cjs +1 -1
- package/dist/Components/NcRichText.mjs +3 -3
- package/dist/Components/NcSelect.cjs +22 -21
- package/dist/Components/NcSelect.cjs.map +1 -1
- package/dist/Components/NcSelect.mjs +28 -28
- package/dist/Components/NcSelect.mjs.map +1 -1
- package/dist/Components/NcSelectTags.cjs +4 -2
- package/dist/Components/NcSelectTags.cjs.map +1 -1
- package/dist/Components/NcSelectTags.mjs +46 -44
- package/dist/Components/NcSelectTags.mjs.map +1 -1
- package/dist/Components/NcSettingsInputText.cjs +5 -4
- package/dist/Components/NcSettingsInputText.cjs.map +1 -1
- package/dist/Components/NcSettingsInputText.mjs +15 -14
- package/dist/Components/NcSettingsInputText.mjs.map +1 -1
- package/dist/Components/NcSettingsSection.cjs +8 -6
- package/dist/Components/NcSettingsSection.cjs.map +1 -1
- package/dist/Components/NcSettingsSection.mjs +18 -17
- package/dist/Components/NcSettingsSection.mjs.map +1 -1
- package/dist/Components/NcSettingsSelectGroup.cjs +1 -1
- package/dist/Components/NcSettingsSelectGroup.mjs +1 -1
- package/dist/Components/NcTextArea.cjs +5 -5
- package/dist/Components/NcTextArea.cjs.map +1 -1
- package/dist/Components/NcTextArea.mjs +4 -4
- package/dist/Components/NcTextArea.mjs.map +1 -1
- package/dist/Components/NcTextField.cjs +4 -2
- package/dist/Components/NcTextField.cjs.map +1 -1
- package/dist/Components/NcTextField.mjs +19 -17
- package/dist/Components/NcTextField.mjs.map +1 -1
- package/dist/Components/NcTimezonePicker.cjs +10 -8
- package/dist/Components/NcTimezonePicker.cjs.map +1 -1
- package/dist/Components/NcTimezonePicker.mjs +35 -33
- package/dist/Components/NcTimezonePicker.mjs.map +1 -1
- package/dist/Components/NcUserBubble.cjs +1 -1
- package/dist/Components/NcUserBubble.mjs +1 -1
- package/dist/Composables/useIsMobile.cjs +13 -8
- package/dist/Composables/useIsMobile.cjs.map +1 -1
- package/dist/Composables/useIsMobile.mjs +15 -10
- package/dist/Composables/useIsMobile.mjs.map +1 -1
- package/dist/Functions/usernameToColor.cjs +1 -1
- package/dist/Functions/usernameToColor.cjs.map +1 -1
- package/dist/Functions/usernameToColor.mjs +1 -1
- package/dist/Functions/usernameToColor.mjs.map +1 -1
- package/dist/assets/{NcAppNavigationToggle-9e170630.css → NcAppNavigationToggle-48c375e8.css} +4 -2
- package/dist/assets/{NcSettingsSelectGroup-6ddb63a6.css → NcSettingsSelectGroup-a29e2156.css} +2 -2
- package/dist/assets/{index-a9d1ad5c.css → index-13720a46.css} +24 -24
- package/dist/assets/{index-93bc89ef.css → index-1a317434.css} +9 -12
- package/dist/assets/{index-a0532427.css → index-2a1ec06b.css} +42 -36
- package/dist/assets/{index-3d1ccc15.css → index-2d5cf6b2.css} +45 -45
- package/dist/assets/index-3b654875.css +144 -0
- package/dist/assets/{index-4437e6bf.css → index-5784183b.css} +8 -8
- package/dist/assets/{index-e9fce208.css → index-7868494b.css} +16 -16
- package/dist/assets/{index-db846386.css → index-7f77b8ae.css} +49 -45
- package/dist/assets/{index-dc612aa3.css → index-86454928.css} +15 -12
- package/dist/assets/{index-2d4de2fc.css → index-8b327013.css} +11 -3
- package/dist/assets/{index-30ca9574.css → index-97305c1f.css} +27 -40
- package/dist/assets/{index-73ded07b.css → index-a3c23731.css} +63 -63
- package/dist/assets/{index-5c74e333.css → index-a7fc7815.css} +16 -16
- package/dist/assets/{index-51c1f2a9.css → index-a9999048.css} +13 -20
- package/dist/assets/{index-3764a447.css → index-aacb7cf8.css} +16 -16
- package/dist/assets/{index-d1c0876d.css → index-b0bba2fc.css} +11 -11
- package/dist/assets/{index-b991895f.css → index-c20f9f7e.css} +15 -15
- package/dist/assets/{index-f8d6daf3.css → index-d8bc189c.css} +38 -41
- package/dist/assets/{index-ffa6d11c.css → index-dab51681.css} +64 -31
- package/dist/assets/{index-4e03d941.css → index-f24e102f.css} +49 -48
- package/dist/assets/{index-4611417f.css → index-f5162bbd.css} +7 -7
- package/dist/assets/{index-34dfc54e.css → index-f78bd735.css} +13 -13
- package/dist/assets/{index-edee3304.css → index-fe84a063.css} +6 -7
- package/dist/chunks/GenColors-5c054042.mjs +137 -0
- package/dist/chunks/GenColors-5c054042.mjs.map +1 -0
- package/dist/chunks/GenColors-7495e6f6.cjs +136 -0
- package/dist/chunks/GenColors-7495e6f6.cjs.map +1 -0
- package/dist/chunks/{NcAppNavigationToggle-2574bba5.mjs → NcAppNavigationToggle-0bc638a8.mjs} +27 -31
- package/dist/chunks/{NcAppNavigationToggle-2574bba5.mjs.map → NcAppNavigationToggle-0bc638a8.mjs.map} +1 -1
- package/dist/chunks/{NcAppNavigationToggle-1301e882.cjs → NcAppNavigationToggle-6d192bea.cjs} +27 -30
- package/dist/chunks/{NcAppNavigationToggle-1301e882.cjs.map → NcAppNavigationToggle-6d192bea.cjs.map} +1 -1
- package/dist/chunks/{NcInputConfirmCancel-a612e6a3.mjs → NcInputConfirmCancel-a08c5cb4.mjs} +14 -13
- package/dist/chunks/{NcInputConfirmCancel-a612e6a3.mjs.map → NcInputConfirmCancel-a08c5cb4.mjs.map} +1 -1
- package/dist/chunks/{NcInputConfirmCancel-9906b563.cjs → NcInputConfirmCancel-b99898db.cjs} +8 -7
- package/dist/chunks/{NcInputConfirmCancel-9906b563.cjs.map → NcInputConfirmCancel-b99898db.cjs.map} +1 -1
- package/dist/chunks/{NcRichText-f5cfcd57.mjs → NcRichText-e4bf7767.mjs} +1 -1
- package/dist/chunks/{NcRichText-f5cfcd57.mjs.map → NcRichText-e4bf7767.mjs.map} +1 -1
- package/dist/chunks/{NcRichText-9f77a9c6.cjs → NcRichText-f729896c.cjs} +1 -1
- package/dist/chunks/{NcRichText-9f77a9c6.cjs.map → NcRichText-f729896c.cjs.map} +1 -1
- package/dist/chunks/{NcSettingsSelectGroup-0f71fef4.cjs → NcSettingsSelectGroup-b065ffc8.cjs} +18 -17
- package/dist/chunks/NcSettingsSelectGroup-b065ffc8.cjs.map +1 -0
- package/dist/chunks/{NcSettingsSelectGroup-091c0306.mjs → NcSettingsSelectGroup-ecc8bc5a.mjs} +19 -19
- package/dist/chunks/NcSettingsSelectGroup-ecc8bc5a.mjs.map +1 -0
- package/dist/chunks/{ScopeComponent-df4b58b1.cjs → ScopeComponent-06c558d3.cjs} +1 -1
- package/dist/chunks/{ScopeComponent-df4b58b1.cjs.map → ScopeComponent-06c558d3.cjs.map} +1 -1
- package/dist/chunks/{ScopeComponent-3ea00dcd.mjs → ScopeComponent-b039a43c.mjs} +1 -1
- package/dist/chunks/{ScopeComponent-3ea00dcd.mjs.map → ScopeComponent-b039a43c.mjs.map} +1 -1
- package/dist/chunks/_l10n-72c5e29e.cjs +62 -0
- package/dist/chunks/_l10n-72c5e29e.cjs.map +1 -0
- package/dist/chunks/_l10n-f5af5269.mjs +64 -0
- package/dist/chunks/_l10n-f5af5269.mjs.map +1 -0
- package/dist/chunks/{actionText-60ff01d1.mjs → actionText-123f26b0.mjs} +3 -3
- package/dist/chunks/{actionText-60ff01d1.mjs.map → actionText-123f26b0.mjs.map} +1 -1
- package/dist/chunks/{actionText-9582810f.cjs → actionText-e450809c.cjs} +5 -5
- package/dist/chunks/{actionText-9582810f.cjs.map → actionText-e450809c.cjs.map} +1 -1
- package/dist/chunks/{index-cea13a24.mjs → index-309426ff.mjs} +123 -77
- package/dist/chunks/index-309426ff.mjs.map +1 -0
- package/dist/chunks/{index-dc10fd2b.cjs → index-693e993c.cjs} +109 -64
- package/dist/chunks/index-693e993c.cjs.map +1 -0
- package/dist/chunks/{referencePickerModal-c2f33569.mjs → referencePickerModal-12935fb3.mjs} +175 -169
- package/dist/chunks/{referencePickerModal-c2f33569.mjs.map → referencePickerModal-12935fb3.mjs.map} +1 -1
- package/dist/chunks/{referencePickerModal-aa5d3f47.cjs → referencePickerModal-12fa2ad0.cjs} +36 -30
- package/dist/chunks/{referencePickerModal-aa5d3f47.cjs.map → referencePickerModal-12fa2ad0.cjs.map} +1 -1
- package/dist/index.cjs +93 -93
- package/dist/index.cjs.map +1 -1
- package/dist/index.mjs +96 -95
- package/dist/index.mjs.map +1 -1
- package/dist/utils/UserStatus.d.ts +26 -0
- package/package.json +10 -4
- package/dist/assets/index-2e5e3b55.css +0 -151
- package/dist/chunks/GenColors-02173e2c.mjs +0 -56
- package/dist/chunks/GenColors-02173e2c.mjs.map +0 -1
- package/dist/chunks/GenColors-4314c256.cjs +0 -55
- package/dist/chunks/GenColors-4314c256.cjs.map +0 -1
- package/dist/chunks/NcSettingsSelectGroup-091c0306.mjs.map +0 -1
- package/dist/chunks/NcSettingsSelectGroup-0f71fef4.cjs.map +0 -1
- package/dist/chunks/index-cea13a24.mjs.map +0 -1
- package/dist/chunks/index-dc10fd2b.cjs.map +0 -1
- package/dist/chunks/l10n-a12cdbfa.cjs +0 -8
- package/dist/chunks/l10n-a12cdbfa.cjs.map +0 -1
- package/dist/chunks/l10n-c603e589.mjs +0 -10
- package/dist/chunks/l10n-c603e589.mjs.map +0 -1
- package/dist/chunks/l10n-e9ffbe5e.cjs +0 -29
- package/dist/chunks/l10n-e9ffbe5e.cjs.map +0 -1
- package/dist/chunks/l10n-ef44019c.mjs +0 -31
- package/dist/chunks/l10n-ef44019c.mjs.map +0 -1
|
@@ -6,9 +6,10 @@ import o from "./NcSelect.mjs";
|
|
|
6
6
|
import c from "./NcTextField.mjs";
|
|
7
7
|
import { A as u } from "../chunks/actionGlobal-8c1c28c9.mjs";
|
|
8
8
|
import { G as l } from "../chunks/GenRandomId-cb9ccebe.mjs";
|
|
9
|
-
import {
|
|
10
|
-
import { n as
|
|
11
|
-
|
|
9
|
+
import { r as d, v as p, a as b } from "../chunks/_l10n-f5af5269.mjs";
|
|
10
|
+
import { n as m } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
|
|
11
|
+
d(p);
|
|
12
|
+
const f = {
|
|
12
13
|
name: "NcActionInput",
|
|
13
14
|
components: {
|
|
14
15
|
NcDateTimePicker: s,
|
|
@@ -138,7 +139,7 @@ const b = {
|
|
|
138
139
|
*/
|
|
139
140
|
trailingButtonLabel: {
|
|
140
141
|
type: String,
|
|
141
|
-
default:
|
|
142
|
+
default: b("Submit")
|
|
142
143
|
}
|
|
143
144
|
},
|
|
144
145
|
emits: [
|
|
@@ -209,7 +210,7 @@ const b = {
|
|
|
209
210
|
}
|
|
210
211
|
}
|
|
211
212
|
};
|
|
212
|
-
var
|
|
213
|
+
var _ = function() {
|
|
213
214
|
var t = this, i = t._self._c;
|
|
214
215
|
return i("li", { staticClass: "action", class: { "action--disabled": t.disabled } }, [i("span", { staticClass: "action-input", class: {
|
|
215
216
|
"action-input-picker--disabled": t.disabled,
|
|
@@ -227,17 +228,17 @@ var m = function() {
|
|
|
227
228
|
} } }, "NcColorPicker", t.$attrs, !1), t.$listeners), [i("button", { staticClass: "colorpicker__preview", class: { focusable: t.isFocusable }, style: { "background-color": t.value } })])], 1)]) : i("NcTextField", t._g(t._b({ attrs: { id: t.inputId, value: t.value, label: t.label, "label-outside": !t.label || t.labelOutside, placeholder: t.text, disabled: t.disabled, "input-class": { focusable: t.isFocusable }, type: t.type, "trailing-button-icon": "arrowRight", "trailing-button-label": t.trailingButtonLabel, "show-trailing-button": t.showTrailingButton && !t.disabled }, on: { "trailing-button-click": function(a) {
|
|
228
229
|
return t.$refs.form.requestSubmit();
|
|
229
230
|
}, input: t.onInput, change: t.onChange } }, "NcTextField", t.$attrs, !1), t.$listeners))], 1)])])])]);
|
|
230
|
-
},
|
|
231
|
-
b,
|
|
232
|
-
m,
|
|
231
|
+
}, h = [], v = /* @__PURE__ */ m(
|
|
233
232
|
f,
|
|
233
|
+
_,
|
|
234
|
+
h,
|
|
234
235
|
!1,
|
|
235
236
|
null,
|
|
236
237
|
"48dfde24",
|
|
237
238
|
null,
|
|
238
239
|
null
|
|
239
240
|
);
|
|
240
|
-
const
|
|
241
|
+
const w = v.exports;
|
|
241
242
|
export {
|
|
242
|
-
|
|
243
|
+
w as default
|
|
243
244
|
};
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"NcActionInput.mjs","sources":["../../src/components/NcActionInput/NcActionInput.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>\n -\n - @author John Molakvoæ <skjnldsv@protonmail.com>\n - @author Marco Ambrosini <marcoambrosini@icloud.com>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n\n<docs>\nThis component is made to be used inside of the [NcActions](#NcActions) component slots.\n\nIt is recommended to not only provide a placeholder, but also a label.\nThe label should describe what input is expected and the placehold what format the input should have.\n\nAll undocumented attributes will be bound to the input, the datepicker or the select component, e.g. `maxlength`, `not-before`.\nFor the `NcSelect` component, all events will be passed through. Please see the `NcSelect` component's documentation for more details and examples.\n```vue\n\t<template>\n\t\t<NcActions>\n\t\t\t<NcActionInput :value.sync=\"text\" :label-outside=\"true\" label=\"Label outside the input\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput :value.sync=\"text\" :show-trailing-button=\"false\" label=\"Input without trailing button\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput :value.sync=\"text\" label=\"Input with placeholder\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tThis is the placeholder\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput type=\"password\" :value.sync=\"text\" label=\"Password with visible label\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Key :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPassword placeholder\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput type=\"password\" :value.sync=\"text\" :show-trailing-button=\"false\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Key :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPassword placeholder\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput type=\"color\" :value.sync=\"color\" label=\"Favorite color\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Eyedropper :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tColor placeholder\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput label=\"Visible label\" :value.sync=\"text\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tInput with visible label\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput :disabled=\"true\" label=\"This is a disabled input\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Close :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput type=\"date\" isNativePicker :value=\"new Date()\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPlease pick a date\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput type=\"date\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPlease pick a date\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput type=\"multiselect\" :options=\"['Apple', 'Banana', 'Cherry']\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPlease pick a fruit\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput\n\t\t\t\tv-model=\"multiSelected\"\n\t\t\t\ttype=\"multiselect\"\n\t\t\t\tlabel=\"label\"\n\t\t\t\ttrack-by=\"id\"\n\t\t\t\t:multiple=\"true\"\n\t\t\t\t:options=\"[{label:'Apple', id: 'apple'}, {label:'Banana', id: 'banana'}, {label:'Cherry', id: 'cherry'}]\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPlease pick a fruit object\n\t\t\t</NcActionInput>\n\t\t</NcActions>\n\t</template>\n\t<script>\n\timport Close from 'vue-material-design-icons/Close'\n\timport Eyedropper from 'vue-material-design-icons/Eyedropper'\n\timport Key from 'vue-material-design-icons/Key'\n\timport Pencil from 'vue-material-design-icons/Pencil'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tClose,\n\t\t\tEyedropper,\n\t\t\tKey,\n\t\t\tPencil,\n\t\t},\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tcolor: '#0082C9',\n\t\t\t\ttext: 'This is the input text',\n\t\t\t\tmultiSelected: [],\n\t\t\t}\n\t\t},\n\t}\n\t</script>\n```\n</docs>\n\n<template>\n\t<li class=\"action\" :class=\"{ 'action--disabled': disabled }\">\n\t\t<span :class=\"{\n\t\t\t\t'action-input-picker--disabled': disabled,\n\t\t\t\t'action-input--visible-label': labelOutside && label,\n\t\t\t}\"\n\t\t\tclass=\"action-input\"\n\t\t\t@mouseleave=\"onLeave\">\n\t\t\t<span class=\"action-input__icon-wrapper\">\n\t\t\t\t<!-- @slot Manually provide icon -->\n\t\t\t\t<slot name=\"icon\">\n\t\t\t\t\t<span :class=\"[isIconUrl ? 'action-input__icon--url' : icon]\"\n\t\t\t\t\t\t:style=\"{ backgroundImage: isIconUrl ? `url(${icon})` : null }\"\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\tclass=\"action-input__icon\" />\n\t\t\t\t</slot>\n\t\t\t</span>\n\n\t\t\t<!-- form and input -->\n\t\t\t<form ref=\"form\"\n\t\t\t\tclass=\"action-input__form\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t@submit.prevent=\"onSubmit\">\n\t\t\t\t<div class=\"action-input__container\">\n\t\t\t\t\t<label v-if=\"label && labelOutside\"\n\t\t\t\t\t\tclass=\"action-input__text-label\"\n\t\t\t\t\t\t:class=\"{ 'action-input__text-label--hidden': !labelOutside}\"\n\t\t\t\t\t\t:for=\"inputId\">\n\t\t\t\t\t\t{{ label }}\n\t\t\t\t\t</label>\n\t\t\t\t\t<div class=\"action-input__input-container\">\n\n\t\t\t\t\t\t<NcDateTimePicker v-if=\"datePickerType\"\n\t\t\t\t\t\t\tref=\"datetimepicker\"\n\t\t\t\t\t\t\t:value=\"value\"\n\t\t\t\t\t\t\tstyle=\"z-index: 99999999999;\"\n\t\t\t\t\t\t\t:placeholder=\"text\"\n\t\t\t\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t\t\t\t:type=\"datePickerType\"\n\t\t\t\t\t\t\t:input-class=\"['mx-input', { focusable: isFocusable }]\"\n\t\t\t\t\t\t\tclass=\"action-input__datetimepicker\"\n\t\t\t\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t\t\t\t@input=\"onInput\"\n\t\t\t\t\t\t\t@change=\"onChange\" />\n\n\t\t\t\t\t\t<NcDateTimePickerNative v-else-if=\"isNativePicker\"\n\t\t\t\t\t\t\t:id=\"idNativeDateTimePicker\"\n\t\t\t\t\t\t\t:value=\"value\"\n\t\t\t\t\t\t\t:type=\"nativeDatePickerType\"\n\t\t\t\t\t\t\t:input-class=\"{ focusable: isFocusable }\"\n\t\t\t\t\t\t\tclass=\"action-input__datetimepicker\"\n\t\t\t\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t\t\t\t@input=\"$emit('input', $event)\"\n\t\t\t\t\t\t\t@change=\"$emit('change', $event)\" />\n\n\t\t\t\t\t\t<NcSelect v-else-if=\"isMultiselectType\"\n\t\t\t\t\t\t\t:value=\"value\"\n\t\t\t\t\t\t\t:placeholder=\"text\"\n\t\t\t\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t\t\t\t:append-to-body=\"false\"\n\t\t\t\t\t\t\t:input-class=\"{ focusable: isFocusable }\"\n\t\t\t\t\t\t\tclass=\"action-input__multi\"\n\t\t\t\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t\t\t\tv-on=\"$listeners\" />\n\n\t\t\t\t\t\t<NcPasswordField v-else-if=\"type==='password'\"\n\t\t\t\t\t\t\t:id=\"inputId\"\n\t\t\t\t\t\t\t:value=\"value\"\n\t\t\t\t\t\t\t:label=\"label\"\n\t\t\t\t\t\t\t:label-outside=\"!label || labelOutside\"\n\t\t\t\t\t\t\t:placeholder=\"text\"\n\t\t\t\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t\t\t\t:input-class=\"{ focusable: isFocusable }\"\n\t\t\t\t\t\t\t:show-trailing-button=\"showTrailingButton && !disabled\"\n\t\t\t\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t\t\t\tv-on=\"$listeners\"\n\t\t\t\t\t\t\t@input=\"onInput\"\n\t\t\t\t\t\t\t@change=\"onChange\" />\n\n\t\t\t\t\t\t<div v-else-if=\"type === 'color'\" class=\"action-input__container\">\n\t\t\t\t\t\t\t<label v-if=\"label && type === 'color'\"\n\t\t\t\t\t\t\t\tclass=\"action-input__text-label\"\n\t\t\t\t\t\t\t\t:class=\"{ 'action-input__text-label--hidden': !labelOutside}\"\n\t\t\t\t\t\t\t\t:for=\"inputId\">\n\t\t\t\t\t\t\t\t{{ label }}\n\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t<div class=\"action-input__input-container\">\n\t\t\t\t\t\t\t\t<NcColorPicker id=\"inputId\"\n\t\t\t\t\t\t\t\t\t:value=\"value\"\n\t\t\t\t\t\t\t\t\tclass=\"colorpicker__trigger\"\n\t\t\t\t\t\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t\t\t\t\t\tv-on=\"$listeners\"\n\t\t\t\t\t\t\t\t\t@input=\"onInput\"\n\t\t\t\t\t\t\t\t\t@submit=\"$refs.form.requestSubmit()\">\n\t\t\t\t\t\t\t\t\t<button :style=\"{'background-color': value}\"\n\t\t\t\t\t\t\t\t\t\tclass=\"colorpicker__preview\"\n\t\t\t\t\t\t\t\t\t\t:class=\"{ focusable: isFocusable }\" />\n\t\t\t\t\t\t\t\t</NcColorPicker>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<NcTextField v-else\n\t\t\t\t\t\t\t:id=\"inputId\"\n\t\t\t\t\t\t\t:value=\"value\"\n\t\t\t\t\t\t\t:label=\"label\"\n\t\t\t\t\t\t\t:label-outside=\"!label || labelOutside\"\n\t\t\t\t\t\t\t:placeholder=\"text\"\n\t\t\t\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t\t\t\t:input-class=\"{ focusable: isFocusable }\"\n\t\t\t\t\t\t\t:type=\"type\"\n\t\t\t\t\t\t\ttrailing-button-icon=\"arrowRight\"\n\t\t\t\t\t\t\t:trailing-button-label=\"trailingButtonLabel\"\n\t\t\t\t\t\t\t:show-trailing-button=\"showTrailingButton && !disabled\"\n\t\t\t\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t\t\t\tv-on=\"$listeners\"\n\t\t\t\t\t\t\t@trailing-button-click=\"$refs.form.requestSubmit()\"\n\t\t\t\t\t\t\t@input=\"onInput\"\n\t\t\t\t\t\t\t@change=\"onChange\" />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</form>\n\t\t</span>\n\t</li>\n</template>\n\n<script>\nimport NcDateTimePicker from '../NcDateTimePicker/index.js'\nimport NcDateTimePickerNative from '../NcDateTimePickerNative/index.js'\nimport NcPasswordField from '../NcPasswordField/index.js'\nimport NcSelect from '../NcSelect/index.js'\nimport NcTextField from '../NcTextField/index.js'\nimport ActionGlobalMixin from '../../mixins/actionGlobal.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport { t } from '../../l10n.js'\n\nexport default {\n\tname: 'NcActionInput',\n\n\tcomponents: {\n\t\tNcDateTimePicker,\n\t\tNcDateTimePickerNative,\n\t\tNcPasswordField,\n\t\tNcSelect,\n\t\tNcTextField,\n\t},\n\n\tmixins: [ActionGlobalMixin],\n\n\tprops: {\n\t\t/**\n\t\t * id attribute of the checkbox element\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: () => 'action-' + GenRandomId(),\n\t\t\tvalidator: id => id.trim() !== '',\n\t\t},\n\t\t/**\n\t\t * id attribute of the text input element\n\t\t */\n\t\tinputId: {\n\t\t\ttype: String,\n\t\t\tdefault: () => 'action-input-' + GenRandomId(),\n\t\t\tvalidator: id => id.trim() !== '',\n\t\t},\n\t\t/**\n\t\t * Icon to show with the action, can be either a CSS class or an URL\n\t\t */\n\t\ticon: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * type attribute of the input field\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'text',\n\t\t\tvalidator(type) {\n\t\t\t\treturn ['date', 'datetime-local', 'month', 'multiselect',\n\t\t\t\t\t'number', 'password', 'search', 'tel',\n\t\t\t\t\t'text', 'time', 'url', 'week', 'color',\n\t\t\t\t\t'email'].indexOf(type) > -1\n\t\t\t},\n\t\t},\n\t\t/**\n\t\t * id attribute for the native date time picker\n\t\t */\n\t\tidNativeDateTimePicker: {\n\t\t\ttype: String,\n\t\t\tdefault: 'date-time-picker_id',\n\t\t},\n\t\t/**\n\t\t * Flag to use a native date time picker\n\t\t */\n\t\tisNativePicker: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * The visible input label for accessibility purposes.\n\t\t */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t\t/**\n\t\t * If you want to show the label just above the\n\t\t * input field, pass in `true` to this prop.\n\t\t */\n\t\tlabelOutside: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t\t/**\n\t\t * value attribute of the input field\n\t\t */\n\t\tvalue: {\n\t\t\ttype: [String, Date, Number, Array],\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * disabled state of the input field\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * aria-label attribute of the input field\n\t\t */\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * @deprecated To be removed in @nextcloud/vue 9. Migration guide: remove ariaHidden prop from NcAction* components.\n\t\t * @todo Add a check in @nextcloud/vue 9 that this prop is not provided,\n\t\t * otherwise root element will inherit incorrect aria-hidden.\n\t\t */\n\t\tariaHidden: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: null,\n\t\t},\n\t\t/**\n\t\t * Attribute forwarded to the underlying NcPasswordField and NcTextField\n\t\t */\n\t\tshowTrailingButton: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t\t/**\n\t\t * Trailing button label forwarded to the underlying NcTextField\n\t\t */\n\t\ttrailingButtonLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: t('Submit'),\n\t\t},\n\t},\n\n\temits: [\n\t\t'input',\n\t\t'submit',\n\t\t'change',\n\t\t'update:value',\n\t],\n\n\tcomputed: {\n\t\tisIconUrl() {\n\t\t\ttry {\n\t\t\t\treturn new URL(this.icon)\n\t\t\t} catch (error) {\n\t\t\t\treturn false\n\t\t\t}\n\t\t},\n\n\t\tisMultiselectType() {\n\t\t\treturn this.type === 'multiselect'\n\t\t},\n\n\t\tnativeDatePickerType() {\n\t\t\tswitch (this.type) {\n\t\t\tcase 'date':\n\t\t\tcase 'month':\n\t\t\tcase 'time':\n\t\t\tcase 'week':\n\t\t\tcase 'datetime-local':\n\t\t\t\treturn this.type\n\t\t\t}\n\t\t\treturn false\n\t\t},\n\n\t\tdatePickerType() {\n\t\t\tif (!this.isNativePicker) {\n\t\t\t\tswitch (this.type) {\n\t\t\t\tcase 'date':\n\t\t\t\tcase 'month':\n\t\t\t\tcase 'time':\n\t\t\t\t\treturn this.type\n\n\t\t\t\tcase 'datetime-local':\n\t\t\t\t\treturn 'datetime'\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn false\n\t\t},\n\t\t/**\n\t\t * determines if the action is focusable\n\t\t *\n\t\t * @return {boolean} is the action focusable ?\n\t\t */\n\t\tisFocusable() {\n\t\t\treturn !this.disabled\n\t\t},\n\t},\n\n\tmethods: {\n\t\t// closing datepicker popup on mouseleave = unfocus\n\t\tonLeave() {\n\t\t\tif (this.$refs.datetimepicker && this.$refs.datetimepicker.$refs.datepicker) {\n\t\t\t\tthis.$refs.datetimepicker.$refs.datepicker.closePopup()\n\t\t\t}\n\t\t},\n\t\tonInput(event) {\n\t\t\t/**\n\t\t\t * Emitted on input events of the text field\n\t\t\t *\n\t\t\t * @type {Event|Date}\n\t\t\t */\n\t\t\tthis.$emit('input', event)\n\t\t\t/**\n\t\t\t * Emitted when the inputs value changes\n\t\t\t * ! DatetimePicker only send the value\n\t\t\t *\n\t\t\t * @type {string|Date}\n\t\t\t */\n\t\t\tthis.$emit('update:value', event.target ? event.target.value : event)\n\t\t},\n\t\tonSubmit(event) {\n\t\t\tevent.preventDefault()\n\t\t\tevent.stopPropagation()\n\t\t\tif (!this.disabled) {\n\t\t\t\t/**\n\t\t\t\t * Emitted on submit of the input field\n\t\t\t\t *\n\t\t\t\t * @type {Event}\n\t\t\t\t */\n\t\t\t\tthis.$emit('submit', event)\n\t\t\t} else {\n\t\t\t\t// ignore submit\n\t\t\t\treturn false\n\t\t\t}\n\t\t},\n\t\tonChange(event) {\n\t\t\t/**\n\t\t\t * Emitted on change of the input field\n\t\t\t *\n\t\t\t * @type {Event}\n\t\t\t */\n\t\t\tthis.$emit('change', event)\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n@import '../../assets/inputs';\n@import '../../assets/action';\n@include action-active;\n@include action--disabled;\n\n$input-margin: 4px;\n\n.action-input {\n\tdisplay: flex;\n\talign-items: flex-start;\n\n\twidth: 100%;\n\theight: auto;\n\tmargin: 0;\n\tpadding: 0;\n\n\tcursor: pointer;\n\twhite-space: nowrap;\n\n\tcolor: var(--color-main-text);\n\tborder: 0;\n\tborder-radius: 0; // otherwise Safari will cut the border-radius area\n\tbackground-color: transparent;\n\tbox-shadow: none;\n\n\tfont-weight: normal;\n\n\t&__icon-wrapper {\n\t\tdisplay: flex;\n\t\talign-self: center;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\n\t\t&:deep(.material-design-icon) {\n\t\t\twidth: $clickable-area;\n\t\t\theight: $clickable-area;\n\t\t\topacity: $opacity_full;\n\n\t\t\t.material-design-icon__svg {\n\t\t\t\tvertical-align: middle;\n\t\t\t}\n\t\t}\n\t}\n\n\t& > span {\n\t\tcursor: pointer;\n\t\twhite-space: nowrap;\n\t}\n\n\t&__icon {\n\t\tmin-width: 0; /* Overwrite icons*/\n\t\tmin-height: 0;\n\t\t/* Keep padding to define the width to\n\t\t\tassure correct position of a possible text */\n\t\tpadding: #{math.div($clickable-area, 2)} 0 #{math.div($clickable-area, 2)} $clickable-area;\n\n\t\tbackground-position: #{$icon-margin} center;\n\t\tbackground-size: $icon-size;\n\t}\n\n\t// Forms & text inputs\n\t&__form {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tflex: 1 1 auto;\n\n\t\tmargin: $input-margin 0;\n\t\tpadding-right: $icon-margin;\n\t}\n\n\t&__container {\n\t\twidth: 100%;\n\t}\n\n\t&__input-container {\n\t\tdisplay: flex;\n\n\t\t.colorpicker {\n\t\t\t&__trigger,\n\t\t\t&__preview {\n\t\t\t\twidth: 100%;\n\t\t\t}\n\n\t\t\t&__preview {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 36px;\n\t\t\t\tborder-radius: var(--border-radius-large);\n\t\t\t\tborder: 2px solid var(--color-border-maxcontrast);\n\t\t\t\tbox-shadow: none !important;\n\t\t\t}\n\t\t}\n\t}\n\n\t&__text-label {\n\t\tpadding: 4px 0;\n\t\tdisplay: block;\n\n\t\t&--hidden {\n\t\t\tposition: absolute;\n\t\t\tleft: -10000px;\n\t\t\ttop: auto;\n\t\t\twidth: 1px;\n\t\t\theight: 1px;\n\t\t\toverflow: hidden;\n\t\t}\n\t}\n\n\t&__datetimepicker {\n\t\twidth: 100%;\n\n\t\t:deep(.mx-input) {\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\n\t&__multi {\n\t\twidth: 100%;\n\t}\n}\n\n// if a form is the last of the list\n// add the same bottomMargin as the right padding\n// for visual balance\nli:last-child > .action-input {\n\tpadding-bottom: $icon-margin - $input-margin;\n}\n\n// same for first item\nli:first-child > .action-input:not(.action-input--visible-label) {\n\tpadding-top: $icon-margin - $input-margin;\n}\n\n</style>\n"],"names":["_sfc_main","NcDateTimePicker","NcDateTimePickerNative","NcPasswordField","NcSelect","NcTextField","ActionGlobalMixin","GenRandomId","id","type","t","event"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"NcActionInput.mjs","sources":["../../src/components/NcActionInput/NcActionInput.vue"],"sourcesContent":["<!--\n - @copyright Copyright (c) 2019 John Molakvoæ <skjnldsv@protonmail.com>\n -\n - @author John Molakvoæ <skjnldsv@protonmail.com>\n - @author Marco Ambrosini <marcoambrosini@icloud.com>\n -\n - @license GNU AGPL version 3 or any later version\n -\n - This program is free software: you can redistribute it and/or modify\n - it under the terms of the GNU Affero General Public License as\n - published by the Free Software Foundation, either version 3 of the\n - License, or (at your option) any later version.\n -\n - This program is distributed in the hope that it will be useful,\n - but WITHOUT ANY WARRANTY; without even the implied warranty of\n - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the\n - GNU Affero General Public License for more details.\n -\n - You should have received a copy of the GNU Affero General Public License\n - along with this program. If not, see <http://www.gnu.org/licenses/>.\n -\n -->\n\n<docs>\nThis component is made to be used inside of the [NcActions](#NcActions) component slots.\n\nIt is recommended to not only provide a placeholder, but also a label.\nThe label should describe what input is expected and the placehold what format the input should have.\n\nAll undocumented attributes will be bound to the input, the datepicker or the select component, e.g. `maxlength`, `not-before`.\nFor the `NcSelect` component, all events will be passed through. Please see the `NcSelect` component's documentation for more details and examples.\n```vue\n\t<template>\n\t\t<NcActions>\n\t\t\t<NcActionInput :value.sync=\"text\" :label-outside=\"true\" label=\"Label outside the input\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput :value.sync=\"text\" :show-trailing-button=\"false\" label=\"Input without trailing button\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput :value.sync=\"text\" label=\"Input with placeholder\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tThis is the placeholder\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput type=\"password\" :value.sync=\"text\" label=\"Password with visible label\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Key :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPassword placeholder\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput type=\"password\" :value.sync=\"text\" :show-trailing-button=\"false\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Key :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPassword placeholder\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput type=\"color\" :value.sync=\"color\" label=\"Favorite color\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Eyedropper :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tColor placeholder\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput label=\"Visible label\" :value.sync=\"text\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tInput with visible label\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput :disabled=\"true\" label=\"This is a disabled input\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Close :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput type=\"date\" isNativePicker :value=\"new Date()\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPlease pick a date\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput type=\"date\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPlease pick a date\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput type=\"multiselect\" :options=\"['Apple', 'Banana', 'Cherry']\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPlease pick a fruit\n\t\t\t</NcActionInput>\n\t\t\t<NcActionInput\n\t\t\t\tv-model=\"multiSelected\"\n\t\t\t\ttype=\"multiselect\"\n\t\t\t\tlabel=\"label\"\n\t\t\t\ttrack-by=\"id\"\n\t\t\t\t:multiple=\"true\"\n\t\t\t\t:options=\"[{label:'Apple', id: 'apple'}, {label:'Banana', id: 'banana'}, {label:'Cherry', id: 'cherry'}]\">\n\t\t\t\t<template #icon>\n\t\t\t\t\t<Pencil :size=\"20\" />\n\t\t\t\t</template>\n\t\t\t\tPlease pick a fruit object\n\t\t\t</NcActionInput>\n\t\t</NcActions>\n\t</template>\n\t<script>\n\timport Close from 'vue-material-design-icons/Close'\n\timport Eyedropper from 'vue-material-design-icons/Eyedropper'\n\timport Key from 'vue-material-design-icons/Key'\n\timport Pencil from 'vue-material-design-icons/Pencil'\n\n\texport default {\n\t\tcomponents: {\n\t\t\tClose,\n\t\t\tEyedropper,\n\t\t\tKey,\n\t\t\tPencil,\n\t\t},\n\t\tdata() {\n\t\t\treturn {\n\t\t\t\tcolor: '#0082C9',\n\t\t\t\ttext: 'This is the input text',\n\t\t\t\tmultiSelected: [],\n\t\t\t}\n\t\t},\n\t}\n\t</script>\n```\n</docs>\n\n<template>\n\t<li class=\"action\" :class=\"{ 'action--disabled': disabled }\">\n\t\t<span :class=\"{\n\t\t\t\t'action-input-picker--disabled': disabled,\n\t\t\t\t'action-input--visible-label': labelOutside && label,\n\t\t\t}\"\n\t\t\tclass=\"action-input\"\n\t\t\t@mouseleave=\"onLeave\">\n\t\t\t<span class=\"action-input__icon-wrapper\">\n\t\t\t\t<!-- @slot Manually provide icon -->\n\t\t\t\t<slot name=\"icon\">\n\t\t\t\t\t<span :class=\"[isIconUrl ? 'action-input__icon--url' : icon]\"\n\t\t\t\t\t\t:style=\"{ backgroundImage: isIconUrl ? `url(${icon})` : null }\"\n\t\t\t\t\t\taria-hidden=\"true\"\n\t\t\t\t\t\tclass=\"action-input__icon\" />\n\t\t\t\t</slot>\n\t\t\t</span>\n\n\t\t\t<!-- form and input -->\n\t\t\t<form ref=\"form\"\n\t\t\t\tclass=\"action-input__form\"\n\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t@submit.prevent=\"onSubmit\">\n\t\t\t\t<div class=\"action-input__container\">\n\t\t\t\t\t<label v-if=\"label && labelOutside\"\n\t\t\t\t\t\tclass=\"action-input__text-label\"\n\t\t\t\t\t\t:class=\"{ 'action-input__text-label--hidden': !labelOutside}\"\n\t\t\t\t\t\t:for=\"inputId\">\n\t\t\t\t\t\t{{ label }}\n\t\t\t\t\t</label>\n\t\t\t\t\t<div class=\"action-input__input-container\">\n\n\t\t\t\t\t\t<NcDateTimePicker v-if=\"datePickerType\"\n\t\t\t\t\t\t\tref=\"datetimepicker\"\n\t\t\t\t\t\t\t:value=\"value\"\n\t\t\t\t\t\t\tstyle=\"z-index: 99999999999;\"\n\t\t\t\t\t\t\t:placeholder=\"text\"\n\t\t\t\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t\t\t\t:type=\"datePickerType\"\n\t\t\t\t\t\t\t:input-class=\"['mx-input', { focusable: isFocusable }]\"\n\t\t\t\t\t\t\tclass=\"action-input__datetimepicker\"\n\t\t\t\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t\t\t\t@input=\"onInput\"\n\t\t\t\t\t\t\t@change=\"onChange\" />\n\n\t\t\t\t\t\t<NcDateTimePickerNative v-else-if=\"isNativePicker\"\n\t\t\t\t\t\t\t:id=\"idNativeDateTimePicker\"\n\t\t\t\t\t\t\t:value=\"value\"\n\t\t\t\t\t\t\t:type=\"nativeDatePickerType\"\n\t\t\t\t\t\t\t:input-class=\"{ focusable: isFocusable }\"\n\t\t\t\t\t\t\tclass=\"action-input__datetimepicker\"\n\t\t\t\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t\t\t\t@input=\"$emit('input', $event)\"\n\t\t\t\t\t\t\t@change=\"$emit('change', $event)\" />\n\n\t\t\t\t\t\t<NcSelect v-else-if=\"isMultiselectType\"\n\t\t\t\t\t\t\t:value=\"value\"\n\t\t\t\t\t\t\t:placeholder=\"text\"\n\t\t\t\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t\t\t\t:append-to-body=\"false\"\n\t\t\t\t\t\t\t:input-class=\"{ focusable: isFocusable }\"\n\t\t\t\t\t\t\tclass=\"action-input__multi\"\n\t\t\t\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t\t\t\tv-on=\"$listeners\" />\n\n\t\t\t\t\t\t<NcPasswordField v-else-if=\"type==='password'\"\n\t\t\t\t\t\t\t:id=\"inputId\"\n\t\t\t\t\t\t\t:value=\"value\"\n\t\t\t\t\t\t\t:label=\"label\"\n\t\t\t\t\t\t\t:label-outside=\"!label || labelOutside\"\n\t\t\t\t\t\t\t:placeholder=\"text\"\n\t\t\t\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t\t\t\t:input-class=\"{ focusable: isFocusable }\"\n\t\t\t\t\t\t\t:show-trailing-button=\"showTrailingButton && !disabled\"\n\t\t\t\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t\t\t\tv-on=\"$listeners\"\n\t\t\t\t\t\t\t@input=\"onInput\"\n\t\t\t\t\t\t\t@change=\"onChange\" />\n\n\t\t\t\t\t\t<div v-else-if=\"type === 'color'\" class=\"action-input__container\">\n\t\t\t\t\t\t\t<label v-if=\"label && type === 'color'\"\n\t\t\t\t\t\t\t\tclass=\"action-input__text-label\"\n\t\t\t\t\t\t\t\t:class=\"{ 'action-input__text-label--hidden': !labelOutside}\"\n\t\t\t\t\t\t\t\t:for=\"inputId\">\n\t\t\t\t\t\t\t\t{{ label }}\n\t\t\t\t\t\t\t</label>\n\t\t\t\t\t\t\t<div class=\"action-input__input-container\">\n\t\t\t\t\t\t\t\t<NcColorPicker id=\"inputId\"\n\t\t\t\t\t\t\t\t\t:value=\"value\"\n\t\t\t\t\t\t\t\t\tclass=\"colorpicker__trigger\"\n\t\t\t\t\t\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t\t\t\t\t\tv-on=\"$listeners\"\n\t\t\t\t\t\t\t\t\t@input=\"onInput\"\n\t\t\t\t\t\t\t\t\t@submit=\"$refs.form.requestSubmit()\">\n\t\t\t\t\t\t\t\t\t<button :style=\"{'background-color': value}\"\n\t\t\t\t\t\t\t\t\t\tclass=\"colorpicker__preview\"\n\t\t\t\t\t\t\t\t\t\t:class=\"{ focusable: isFocusable }\" />\n\t\t\t\t\t\t\t\t</NcColorPicker>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\n\t\t\t\t\t\t<NcTextField v-else\n\t\t\t\t\t\t\t:id=\"inputId\"\n\t\t\t\t\t\t\t:value=\"value\"\n\t\t\t\t\t\t\t:label=\"label\"\n\t\t\t\t\t\t\t:label-outside=\"!label || labelOutside\"\n\t\t\t\t\t\t\t:placeholder=\"text\"\n\t\t\t\t\t\t\t:disabled=\"disabled\"\n\t\t\t\t\t\t\t:input-class=\"{ focusable: isFocusable }\"\n\t\t\t\t\t\t\t:type=\"type\"\n\t\t\t\t\t\t\ttrailing-button-icon=\"arrowRight\"\n\t\t\t\t\t\t\t:trailing-button-label=\"trailingButtonLabel\"\n\t\t\t\t\t\t\t:show-trailing-button=\"showTrailingButton && !disabled\"\n\t\t\t\t\t\t\tv-bind=\"$attrs\"\n\t\t\t\t\t\t\tv-on=\"$listeners\"\n\t\t\t\t\t\t\t@trailing-button-click=\"$refs.form.requestSubmit()\"\n\t\t\t\t\t\t\t@input=\"onInput\"\n\t\t\t\t\t\t\t@change=\"onChange\" />\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\t\t\t</form>\n\t\t</span>\n\t</li>\n</template>\n\n<script>\nimport NcDateTimePicker from '../NcDateTimePicker/index.js'\nimport NcDateTimePickerNative from '../NcDateTimePickerNative/index.js'\nimport NcPasswordField from '../NcPasswordField/index.js'\nimport NcSelect from '../NcSelect/index.js'\nimport NcTextField from '../NcTextField/index.js'\nimport ActionGlobalMixin from '../../mixins/actionGlobal.js'\nimport GenRandomId from '../../utils/GenRandomId.js'\nimport { t } from '../../l10n.js'\n\nexport default {\n\tname: 'NcActionInput',\n\n\tcomponents: {\n\t\tNcDateTimePicker,\n\t\tNcDateTimePickerNative,\n\t\tNcPasswordField,\n\t\tNcSelect,\n\t\tNcTextField,\n\t},\n\n\tmixins: [ActionGlobalMixin],\n\n\tprops: {\n\t\t/**\n\t\t * id attribute of the checkbox element\n\t\t */\n\t\tid: {\n\t\t\ttype: String,\n\t\t\tdefault: () => 'action-' + GenRandomId(),\n\t\t\tvalidator: id => id.trim() !== '',\n\t\t},\n\t\t/**\n\t\t * id attribute of the text input element\n\t\t */\n\t\tinputId: {\n\t\t\ttype: String,\n\t\t\tdefault: () => 'action-input-' + GenRandomId(),\n\t\t\tvalidator: id => id.trim() !== '',\n\t\t},\n\t\t/**\n\t\t * Icon to show with the action, can be either a CSS class or an URL\n\t\t */\n\t\ticon: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * type attribute of the input field\n\t\t */\n\t\ttype: {\n\t\t\ttype: String,\n\t\t\tdefault: 'text',\n\t\t\tvalidator(type) {\n\t\t\t\treturn ['date', 'datetime-local', 'month', 'multiselect',\n\t\t\t\t\t'number', 'password', 'search', 'tel',\n\t\t\t\t\t'text', 'time', 'url', 'week', 'color',\n\t\t\t\t\t'email'].indexOf(type) > -1\n\t\t\t},\n\t\t},\n\t\t/**\n\t\t * id attribute for the native date time picker\n\t\t */\n\t\tidNativeDateTimePicker: {\n\t\t\ttype: String,\n\t\t\tdefault: 'date-time-picker_id',\n\t\t},\n\t\t/**\n\t\t * Flag to use a native date time picker\n\t\t */\n\t\tisNativePicker: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * The visible input label for accessibility purposes.\n\t\t */\n\t\tlabel: {\n\t\t\ttype: String,\n\t\t\tdefault: null,\n\t\t},\n\t\t/**\n\t\t * If you want to show the label just above the\n\t\t * input field, pass in `true` to this prop.\n\t\t */\n\t\tlabelOutside: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t\t/**\n\t\t * value attribute of the input field\n\t\t */\n\t\tvalue: {\n\t\t\ttype: [String, Date, Number, Array],\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * disabled state of the input field\n\t\t */\n\t\tdisabled: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: false,\n\t\t},\n\t\t/**\n\t\t * aria-label attribute of the input field\n\t\t */\n\t\tariaLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: '',\n\t\t},\n\t\t/**\n\t\t * @deprecated To be removed in @nextcloud/vue 9. Migration guide: remove ariaHidden prop from NcAction* components.\n\t\t * @todo Add a check in @nextcloud/vue 9 that this prop is not provided,\n\t\t * otherwise root element will inherit incorrect aria-hidden.\n\t\t */\n\t\tariaHidden: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: null,\n\t\t},\n\t\t/**\n\t\t * Attribute forwarded to the underlying NcPasswordField and NcTextField\n\t\t */\n\t\tshowTrailingButton: {\n\t\t\ttype: Boolean,\n\t\t\tdefault: true,\n\t\t},\n\t\t/**\n\t\t * Trailing button label forwarded to the underlying NcTextField\n\t\t */\n\t\ttrailingButtonLabel: {\n\t\t\ttype: String,\n\t\t\tdefault: t('Submit'),\n\t\t},\n\t},\n\n\temits: [\n\t\t'input',\n\t\t'submit',\n\t\t'change',\n\t\t'update:value',\n\t],\n\n\tcomputed: {\n\t\tisIconUrl() {\n\t\t\ttry {\n\t\t\t\treturn new URL(this.icon)\n\t\t\t} catch (error) {\n\t\t\t\treturn false\n\t\t\t}\n\t\t},\n\n\t\tisMultiselectType() {\n\t\t\treturn this.type === 'multiselect'\n\t\t},\n\n\t\tnativeDatePickerType() {\n\t\t\tswitch (this.type) {\n\t\t\tcase 'date':\n\t\t\tcase 'month':\n\t\t\tcase 'time':\n\t\t\tcase 'week':\n\t\t\tcase 'datetime-local':\n\t\t\t\treturn this.type\n\t\t\t}\n\t\t\treturn false\n\t\t},\n\n\t\tdatePickerType() {\n\t\t\tif (!this.isNativePicker) {\n\t\t\t\tswitch (this.type) {\n\t\t\t\tcase 'date':\n\t\t\t\tcase 'month':\n\t\t\t\tcase 'time':\n\t\t\t\t\treturn this.type\n\n\t\t\t\tcase 'datetime-local':\n\t\t\t\t\treturn 'datetime'\n\t\t\t\t}\n\t\t\t}\n\t\t\treturn false\n\t\t},\n\t\t/**\n\t\t * determines if the action is focusable\n\t\t *\n\t\t * @return {boolean} is the action focusable ?\n\t\t */\n\t\tisFocusable() {\n\t\t\treturn !this.disabled\n\t\t},\n\t},\n\n\tmethods: {\n\t\t// closing datepicker popup on mouseleave = unfocus\n\t\tonLeave() {\n\t\t\tif (this.$refs.datetimepicker && this.$refs.datetimepicker.$refs.datepicker) {\n\t\t\t\tthis.$refs.datetimepicker.$refs.datepicker.closePopup()\n\t\t\t}\n\t\t},\n\t\tonInput(event) {\n\t\t\t/**\n\t\t\t * Emitted on input events of the text field\n\t\t\t *\n\t\t\t * @type {Event|Date}\n\t\t\t */\n\t\t\tthis.$emit('input', event)\n\t\t\t/**\n\t\t\t * Emitted when the inputs value changes\n\t\t\t * ! DatetimePicker only send the value\n\t\t\t *\n\t\t\t * @type {string|Date}\n\t\t\t */\n\t\t\tthis.$emit('update:value', event.target ? event.target.value : event)\n\t\t},\n\t\tonSubmit(event) {\n\t\t\tevent.preventDefault()\n\t\t\tevent.stopPropagation()\n\t\t\tif (!this.disabled) {\n\t\t\t\t/**\n\t\t\t\t * Emitted on submit of the input field\n\t\t\t\t *\n\t\t\t\t * @type {Event}\n\t\t\t\t */\n\t\t\t\tthis.$emit('submit', event)\n\t\t\t} else {\n\t\t\t\t// ignore submit\n\t\t\t\treturn false\n\t\t\t}\n\t\t},\n\t\tonChange(event) {\n\t\t\t/**\n\t\t\t * Emitted on change of the input field\n\t\t\t *\n\t\t\t * @type {Event}\n\t\t\t */\n\t\t\tthis.$emit('change', event)\n\t\t},\n\t},\n}\n</script>\n\n<style lang=\"scss\" scoped>\n@import '../../assets/inputs';\n@import '../../assets/action';\n@include action-active;\n@include action--disabled;\n\n$input-margin: 4px;\n\n.action-input {\n\tdisplay: flex;\n\talign-items: flex-start;\n\n\twidth: 100%;\n\theight: auto;\n\tmargin: 0;\n\tpadding: 0;\n\n\tcursor: pointer;\n\twhite-space: nowrap;\n\n\tcolor: var(--color-main-text);\n\tborder: 0;\n\tborder-radius: 0; // otherwise Safari will cut the border-radius area\n\tbackground-color: transparent;\n\tbox-shadow: none;\n\n\tfont-weight: normal;\n\n\t&__icon-wrapper {\n\t\tdisplay: flex;\n\t\talign-self: center;\n\t\talign-items: center;\n\t\tjustify-content: center;\n\n\t\t&:deep(.material-design-icon) {\n\t\t\twidth: $clickable-area;\n\t\t\theight: $clickable-area;\n\t\t\topacity: $opacity_full;\n\n\t\t\t.material-design-icon__svg {\n\t\t\t\tvertical-align: middle;\n\t\t\t}\n\t\t}\n\t}\n\n\t& > span {\n\t\tcursor: pointer;\n\t\twhite-space: nowrap;\n\t}\n\n\t&__icon {\n\t\tmin-width: 0; /* Overwrite icons*/\n\t\tmin-height: 0;\n\t\t/* Keep padding to define the width to\n\t\t\tassure correct position of a possible text */\n\t\tpadding: #{math.div($clickable-area, 2)} 0 #{math.div($clickable-area, 2)} $clickable-area;\n\n\t\tbackground-position: #{$icon-margin} center;\n\t\tbackground-size: $icon-size;\n\t}\n\n\t// Forms & text inputs\n\t&__form {\n\t\tdisplay: flex;\n\t\talign-items: center;\n\t\tflex: 1 1 auto;\n\n\t\tmargin: $input-margin 0;\n\t\tpadding-right: $icon-margin;\n\t}\n\n\t&__container {\n\t\twidth: 100%;\n\t}\n\n\t&__input-container {\n\t\tdisplay: flex;\n\n\t\t.colorpicker {\n\t\t\t&__trigger,\n\t\t\t&__preview {\n\t\t\t\twidth: 100%;\n\t\t\t}\n\n\t\t\t&__preview {\n\t\t\t\twidth: 100%;\n\t\t\t\theight: 36px;\n\t\t\t\tborder-radius: var(--border-radius-large);\n\t\t\t\tborder: 2px solid var(--color-border-maxcontrast);\n\t\t\t\tbox-shadow: none !important;\n\t\t\t}\n\t\t}\n\t}\n\n\t&__text-label {\n\t\tpadding: 4px 0;\n\t\tdisplay: block;\n\n\t\t&--hidden {\n\t\t\tposition: absolute;\n\t\t\tleft: -10000px;\n\t\t\ttop: auto;\n\t\t\twidth: 1px;\n\t\t\theight: 1px;\n\t\t\toverflow: hidden;\n\t\t}\n\t}\n\n\t&__datetimepicker {\n\t\twidth: 100%;\n\n\t\t:deep(.mx-input) {\n\t\t\tmargin: 0;\n\t\t}\n\t}\n\n\t&__multi {\n\t\twidth: 100%;\n\t}\n}\n\n// if a form is the last of the list\n// add the same bottomMargin as the right padding\n// for visual balance\nli:last-child > .action-input {\n\tpadding-bottom: $icon-margin - $input-margin;\n}\n\n// same for first item\nli:first-child > .action-input:not(.action-input--visible-label) {\n\tpadding-top: $icon-margin - $input-margin;\n}\n\n</style>\n"],"names":["_sfc_main","NcDateTimePicker","NcDateTimePickerNative","NcPasswordField","NcSelect","NcTextField","ActionGlobalMixin","GenRandomId","id","type","t","event"],"mappings":"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"}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
var _ = require("../assets/index-4ba699a1.css");
|
|
2
|
-
const i = require("../chunks/actionText-
|
|
2
|
+
const i = require("../chunks/actionText-e450809c.cjs"), a = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs");
|
|
3
3
|
const r = {
|
|
4
4
|
name: "NcActionLink",
|
|
5
5
|
mixins: [i.ActionTextMixin],
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import "../assets/index-4ba699a1.css";
|
|
2
|
-
import { A as a } from "../chunks/actionText-
|
|
2
|
+
import { A as a } from "../chunks/actionText-123f26b0.mjs";
|
|
3
3
|
import { n as i } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
|
|
4
4
|
const r = {
|
|
5
5
|
name: "NcActionLink",
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
var u = require("../assets/index-7fac55ed.css");
|
|
2
|
-
const n = require("../chunks/actionText-
|
|
2
|
+
const n = require("../chunks/actionText-e450809c.cjs"), o = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs");
|
|
3
3
|
const r = {
|
|
4
4
|
name: "NcActionRouter",
|
|
5
5
|
mixins: [n.ActionTextMixin],
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import "../assets/index-7fac55ed.css";
|
|
2
|
-
import { A as n } from "../chunks/actionText-
|
|
2
|
+
import { A as n } from "../chunks/actionText-123f26b0.mjs";
|
|
3
3
|
import { n as o } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
|
|
4
4
|
const a = {
|
|
5
5
|
name: "NcActionRouter",
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
var l = require("../assets/index-00012a4c.css");
|
|
2
|
-
const e = require("../chunks/actionText-
|
|
2
|
+
const e = require("../chunks/actionText-e450809c.cjs"), s = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs");
|
|
3
3
|
const a = {
|
|
4
4
|
name: "NcActionText",
|
|
5
5
|
mixins: [e.ActionTextMixin],
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import "../assets/index-00012a4c.css";
|
|
2
|
-
import { A as e } from "../chunks/actionText-
|
|
2
|
+
import { A as e } from "../chunks/actionText-123f26b0.mjs";
|
|
3
3
|
import { n as s } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
|
|
4
4
|
const a = {
|
|
5
5
|
name: "NcActionText",
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
var b = require("../assets/index-93ad846c.css");
|
|
2
|
-
const n = require("../chunks/actionText-
|
|
2
|
+
const n = require("../chunks/actionText-e450809c.cjs"), i = require("../chunks/GenRandomId-c214d235.cjs"), o = require("../chunks/ArrowRight-7315f6c1.cjs"), l = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs");
|
|
3
3
|
const r = {
|
|
4
4
|
name: "NcActionTextEditable",
|
|
5
5
|
components: {
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import "../assets/index-93ad846c.css";
|
|
2
|
-
import { A as n } from "../chunks/actionText-
|
|
2
|
+
import { A as n } from "../chunks/actionText-123f26b0.mjs";
|
|
3
3
|
import { G as i } from "../chunks/GenRandomId-cb9ccebe.mjs";
|
|
4
4
|
import { A as l } from "../chunks/ArrowRight-74a9fcb2.mjs";
|
|
5
5
|
import { n as o } from "../chunks/_plugin-vue2_normalizer-71e2aa87.mjs";
|
|
@@ -1,11 +1,12 @@
|
|
|
1
|
-
var oe = require("../assets/index-
|
|
2
|
-
const
|
|
1
|
+
var oe = require("../assets/index-b0bba2fc.css");
|
|
2
|
+
const j = require("./NcButton.cjs"), J = require("./NcPopover.cjs"), Q = require("../chunks/GenRandomId-c214d235.cjs"), A = require("../chunks/_l10n-72c5e29e.cjs"), G = require("vue"), W = require("../chunks/DotsHorizontal-ac96129a.cjs"), X = require("../chunks/_plugin-vue2_normalizer-7f9efb60.cjs"), Y = (e) => e && e.__esModule ? e : { default: e }, Z = /* @__PURE__ */ Y(G);
|
|
3
|
+
A.register(A.t4);
|
|
3
4
|
const a = ".focusable", ee = {
|
|
4
5
|
name: "NcActions",
|
|
5
6
|
components: {
|
|
6
|
-
NcButton:
|
|
7
|
+
NcButton: j,
|
|
7
8
|
DotsHorizontal: W.DotsHorizontal,
|
|
8
|
-
NcPopover:
|
|
9
|
+
NcPopover: J
|
|
9
10
|
},
|
|
10
11
|
provide() {
|
|
11
12
|
return {
|
|
@@ -18,7 +19,7 @@ const a = ".focusable", ee = {
|
|
|
18
19
|
* Provide the role for NcAction* components in the NcActions content.
|
|
19
20
|
* @type {import('vue').ComputedRef<boolean>}
|
|
20
21
|
*/
|
|
21
|
-
"NcActions:isSemanticMenu":
|
|
22
|
+
"NcActions:isSemanticMenu": G.computed(() => this.isSemanticMenu)
|
|
22
23
|
};
|
|
23
24
|
},
|
|
24
25
|
props: {
|
|
@@ -97,7 +98,7 @@ const a = ".focusable", ee = {
|
|
|
97
98
|
*/
|
|
98
99
|
ariaLabel: {
|
|
99
100
|
type: String,
|
|
100
|
-
default:
|
|
101
|
+
default: A.t("Actions")
|
|
101
102
|
},
|
|
102
103
|
/**
|
|
103
104
|
* @deprecated To be removed in @nextcloud/vue 9. Migration guide: remove ariaHidden prop from NcAction* components.
|
|
@@ -156,7 +157,7 @@ const a = ".focusable", ee = {
|
|
|
156
157
|
return {
|
|
157
158
|
opened: this.open,
|
|
158
159
|
focusIndex: 0,
|
|
159
|
-
randomId: `menu-${
|
|
160
|
+
randomId: `menu-${Q.GenRandomId()}`,
|
|
160
161
|
isSemanticMenu: !1,
|
|
161
162
|
isSemanticNavigation: !1,
|
|
162
163
|
isSemanticPopoverLike: !1
|
|
@@ -182,8 +183,8 @@ const a = ".focusable", ee = {
|
|
|
182
183
|
* @return {boolean}
|
|
183
184
|
*/
|
|
184
185
|
isValidSingleAction(e) {
|
|
185
|
-
var r, p,
|
|
186
|
-
const s = (d = (
|
|
186
|
+
var r, p, l, f, d;
|
|
187
|
+
const s = (d = (l = (p = (r = e == null ? void 0 : e.componentOptions) == null ? void 0 : r.Ctor) == null ? void 0 : p.extendOptions) == null ? void 0 : l.name) != null ? d : (f = e == null ? void 0 : e.componentOptions) == null ? void 0 : f.tag;
|
|
187
188
|
return ["NcActionButton", "NcActionLink", "NcActionRouter"].includes(s);
|
|
188
189
|
},
|
|
189
190
|
// MENU STATE MANAGEMENT
|
|
@@ -210,8 +211,8 @@ const a = ".focusable", ee = {
|
|
|
210
211
|
if (s && this.$refs.menu.contains(s)) {
|
|
211
212
|
const r = s.querySelector(a);
|
|
212
213
|
if (r) {
|
|
213
|
-
const
|
|
214
|
-
|
|
214
|
+
const l = [...this.$refs.menu.querySelectorAll(a)].indexOf(r);
|
|
215
|
+
l > -1 && (this.focusIndex = l, this.focusAction());
|
|
215
216
|
}
|
|
216
217
|
}
|
|
217
218
|
},
|
|
@@ -279,34 +280,34 @@ const a = ".focusable", ee = {
|
|
|
279
280
|
), r = (t) => {
|
|
280
281
|
var n, i, o, c, m;
|
|
281
282
|
return (m = (o = (i = (n = t == null ? void 0 : t.componentOptions) == null ? void 0 : n.Ctor) == null ? void 0 : i.extendOptions) == null ? void 0 : o.name) != null ? m : (c = t == null ? void 0 : t.componentOptions) == null ? void 0 : c.tag;
|
|
282
|
-
}, p = ["NcActionButton", "NcActionButtonGroup", "NcActionCheckbox", "NcActionRadio"],
|
|
283
|
-
this.isSemanticMenu =
|
|
284
|
-
let
|
|
285
|
-
if (this.forceMenu &&
|
|
283
|
+
}, p = ["NcActionButton", "NcActionButtonGroup", "NcActionCheckbox", "NcActionRadio"], l = ["NcActionInput", "NcActionTextEditable"], f = ["NcActionLink", "NcActionRouter"], d = s.some((t) => l.includes(r(t))), g = s.some((t) => p.includes(r(t))), K = s.some((t) => f.includes(r(t)));
|
|
284
|
+
this.isSemanticMenu = g && !d, this.isSemanticNavigation = K && !g && !d, this.isSemanticPopoverLike = !this.isSemanticMenu && !this.isSemanticNavigation;
|
|
285
|
+
let u = s.filter(this.isValidSingleAction);
|
|
286
|
+
if (this.forceMenu && u.length > 0 && this.inline > 0 && (Z.default.util.warn("Specifying forceMenu will ignore any inline actions rendering."), u = []), s.length === 0)
|
|
286
287
|
return;
|
|
287
|
-
const
|
|
288
|
-
var
|
|
289
|
-
const n = ((
|
|
290
|
-
let y = (
|
|
288
|
+
const v = (t) => {
|
|
289
|
+
var I, N, b, S, $, B, k, O, M, L, q, h, E, w, P, D, F, T, C, z, R, H, V;
|
|
290
|
+
const n = ((b = (N = (I = t == null ? void 0 : t.data) == null ? void 0 : I.scopedSlots) == null ? void 0 : N.icon()) == null ? void 0 : b[0]) || e("span", { class: ["icon", ($ = (S = t == null ? void 0 : t.componentOptions) == null ? void 0 : S.propsData) == null ? void 0 : $.icon] }), i = ((B = t == null ? void 0 : t.data) == null ? void 0 : B.attrs) || {}, o = (O = (k = t == null ? void 0 : t.componentOptions) == null ? void 0 : k.listeners) == null ? void 0 : O.click, c = (E = (h = (q = (L = (M = t == null ? void 0 : t.componentOptions) == null ? void 0 : M.children) == null ? void 0 : L[0]) == null ? void 0 : q.text) == null ? void 0 : h.trim) == null ? void 0 : E.call(h), m = ((P = (w = t == null ? void 0 : t.componentOptions) == null ? void 0 : w.propsData) == null ? void 0 : P.ariaLabel) || c, x = this.forceName ? c : "";
|
|
291
|
+
let y = (F = (D = t == null ? void 0 : t.componentOptions) == null ? void 0 : D.propsData) == null ? void 0 : F.title;
|
|
291
292
|
return this.forceName || y || (y = c), e(
|
|
292
293
|
"NcButton",
|
|
293
294
|
{
|
|
294
295
|
class: [
|
|
295
296
|
"action-item action-item--single",
|
|
296
|
-
(
|
|
297
|
-
(
|
|
297
|
+
(T = t == null ? void 0 : t.data) == null ? void 0 : T.staticClass,
|
|
298
|
+
(C = t == null ? void 0 : t.data) == null ? void 0 : C.class
|
|
298
299
|
],
|
|
299
300
|
attrs: {
|
|
300
301
|
...i,
|
|
301
302
|
"aria-label": m,
|
|
302
303
|
title: y
|
|
303
304
|
},
|
|
304
|
-
ref: (
|
|
305
|
+
ref: (z = t == null ? void 0 : t.data) == null ? void 0 : z.ref,
|
|
305
306
|
props: {
|
|
306
307
|
// If it has a menuName, we use a secondary button
|
|
307
|
-
type: this.type || (
|
|
308
|
-
disabled: this.disabled || ((
|
|
309
|
-
...(
|
|
308
|
+
type: this.type || (x ? "secondary" : "tertiary"),
|
|
309
|
+
disabled: this.disabled || ((H = (R = t == null ? void 0 : t.componentOptions) == null ? void 0 : R.propsData) == null ? void 0 : H.disabled),
|
|
310
|
+
...(V = t == null ? void 0 : t.componentOptions) == null ? void 0 : V.propsData
|
|
310
311
|
},
|
|
311
312
|
on: {
|
|
312
313
|
focus: this.onFocus,
|
|
@@ -314,18 +315,18 @@ const a = ".focusable", ee = {
|
|
|
314
315
|
// If we have a click listener,
|
|
315
316
|
// we bind it to execute on click and forward the click event
|
|
316
317
|
...!!o && {
|
|
317
|
-
click: (
|
|
318
|
-
o && o(
|
|
318
|
+
click: (U) => {
|
|
319
|
+
o && o(U);
|
|
319
320
|
}
|
|
320
321
|
}
|
|
321
322
|
}
|
|
322
323
|
},
|
|
323
324
|
[
|
|
324
325
|
e("template", { slot: "icon" }, [n]),
|
|
325
|
-
|
|
326
|
+
x
|
|
326
327
|
]
|
|
327
328
|
);
|
|
328
|
-
},
|
|
329
|
+
}, _ = (t) => {
|
|
329
330
|
var i, o;
|
|
330
331
|
const n = ((i = this.$slots.icon) == null ? void 0 : i[0]) || (this.defaultIcon ? e("span", { class: ["icon", this.defaultIcon] }) : e("DotsHorizontal", {
|
|
331
332
|
props: {
|
|
@@ -377,11 +378,10 @@ const a = ".focusable", ee = {
|
|
|
377
378
|
slot: "trigger",
|
|
378
379
|
ref: "menuButton",
|
|
379
380
|
attrs: {
|
|
380
|
-
"aria-haspopup": this.isSemanticMenu ?
|
|
381
|
+
"aria-haspopup": this.isSemanticMenu ? "menu" : null,
|
|
381
382
|
"aria-label": this.menuName ? null : this.ariaLabel,
|
|
382
383
|
"aria-controls": this.opened ? this.randomId : null,
|
|
383
|
-
|
|
384
|
-
"aria-expanded": this.opened ? "true" : void 0
|
|
384
|
+
"aria-expanded": this.opened ? "true" : "false"
|
|
385
385
|
},
|
|
386
386
|
on: {
|
|
387
387
|
focus: this.onFocus,
|
|
@@ -417,12 +417,12 @@ const a = ".focusable", ee = {
|
|
|
417
417
|
]
|
|
418
418
|
);
|
|
419
419
|
};
|
|
420
|
-
if (s.length === 1 &&
|
|
421
|
-
return
|
|
420
|
+
if (s.length === 1 && u.length === 1 && !this.forceMenu)
|
|
421
|
+
return v(u[0]);
|
|
422
422
|
if (this.$nextTick(() => {
|
|
423
423
|
this.opened && this.$refs.menu && (this.$refs.menu.querySelector("li.active") || []).length === 0 && this.focusFirstAction();
|
|
424
|
-
}),
|
|
425
|
-
const t =
|
|
424
|
+
}), u.length > 0 && this.inline > 0) {
|
|
425
|
+
const t = u.slice(0, this.inline), n = s.filter((i) => !t.includes(i));
|
|
426
426
|
return e(
|
|
427
427
|
"div",
|
|
428
428
|
{
|
|
@@ -433,7 +433,7 @@ const a = ".focusable", ee = {
|
|
|
433
433
|
},
|
|
434
434
|
[
|
|
435
435
|
// Render inline actions
|
|
436
|
-
...t.map(
|
|
436
|
+
...t.map(v),
|
|
437
437
|
// render the rest within the popover menu
|
|
438
438
|
n.length > 0 ? e(
|
|
439
439
|
"div",
|
|
@@ -446,7 +446,7 @@ const a = ".focusable", ee = {
|
|
|
446
446
|
]
|
|
447
447
|
},
|
|
448
448
|
[
|
|
449
|
-
|
|
449
|
+
_(n)
|
|
450
450
|
]
|
|
451
451
|
) : null
|
|
452
452
|
]
|
|
@@ -464,7 +464,7 @@ const a = ".focusable", ee = {
|
|
|
464
464
|
]
|
|
465
465
|
},
|
|
466
466
|
[
|
|
467
|
-
|
|
467
|
+
_(s)
|
|
468
468
|
]
|
|
469
469
|
);
|
|
470
470
|
}
|
|
@@ -475,7 +475,7 @@ var ne = /* @__PURE__ */ X.normalizeComponent(
|
|
|
475
475
|
se,
|
|
476
476
|
!1,
|
|
477
477
|
null,
|
|
478
|
-
"
|
|
478
|
+
"377272aa",
|
|
479
479
|
null,
|
|
480
480
|
null
|
|
481
481
|
);
|