@nextcloud/vue
Version:
Nextcloud vue components
253 lines (252 loc) • 9.94 kB
JavaScript
import '../assets/NcActionInput-C_3Csa6A.css';
import NcDateTimePicker from "../Components/NcDateTimePicker.mjs";
import NcDateTimePickerNative from "../Components/NcDateTimePickerNative.mjs";
import { N as NcPasswordField } from "./NcPasswordField-DLXPfvQB.mjs";
import { N as NcSelect } from "./NcSelect-DRRPiPZG.mjs";
import { N as NcTextField } from "./NcTextField-CmXmPZ4h.mjs";
import { A as ActionGlobalMixin } from "./actionGlobal-DqVa7c7G.mjs";
import { G as GenRandomId } from "./GenRandomId-CMooMQt0.mjs";
import { r as register, g as t46, a as t } from "./_l10n-JYjUKekn.mjs";
import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
register(t46);
const _sfc_main = {
name: "NcActionInput",
components: {
NcDateTimePicker,
NcDateTimePickerNative,
NcPasswordField,
NcSelect,
NcTextField
},
mixins: [ActionGlobalMixin],
props: {
/**
* id attribute of the checkbox element
*/
id: {
type: String,
default: () => "action-" + GenRandomId(),
validator: (id) => id.trim() !== ""
},
/**
* id attribute of the text input element
*/
inputId: {
type: String,
default: () => "action-input-" + GenRandomId(),
validator: (id) => id.trim() !== ""
},
/**
* Icon to show with the action, can be either a CSS class or an URL
*/
icon: {
type: String,
default: ""
},
/**
* type attribute of the input field
*/
type: {
type: String,
default: "text",
validator(type) {
return [
"date",
"datetime-local",
"month",
"multiselect",
"number",
"password",
"search",
"tel",
"text",
"time",
"url",
"week",
"color",
"email"
].indexOf(type) > -1;
}
},
/**
* id attribute for the native date time picker
*/
idNativeDateTimePicker: {
type: String,
default: "date-time-picker_id"
},
/**
* Flag to use a native date time picker
*/
isNativePicker: {
type: Boolean,
default: false
},
/**
* The visible input label for accessibility purposes.
*/
label: {
type: String,
default: null
},
/**
* If you want to show the label just above the
* input field, pass in `true` to this prop.
*/
labelOutside: {
type: Boolean,
default: true
},
/**
* value attribute of the input field
*/
value: {
type: [String, Date, Number, Array],
default: ""
},
/**
* disabled state of the input field
*/
disabled: {
type: Boolean,
default: false
},
/**
* aria-label attribute of the input field
*/
ariaLabel: {
type: String,
default: ""
},
/**
* @deprecated To be removed in @nextcloud/vue 9. Migration guide: remove ariaHidden prop from NcAction* components.
* @todo Add a check in @nextcloud/vue 9 that this prop is not provided,
* otherwise root element will inherit incorrect aria-hidden.
*/
ariaHidden: {
type: Boolean,
default: null
},
/**
* Attribute forwarded to the underlying NcPasswordField and NcTextField
*/
showTrailingButton: {
type: Boolean,
default: true
},
/**
* Trailing button label forwarded to the underlying NcTextField
*/
trailingButtonLabel: {
type: String,
default: t("Submit")
}
},
emits: [
"input",
"submit",
"change",
"update:value"
],
computed: {
isIconUrl() {
try {
return new URL(this.icon);
} catch (error) {
return false;
}
},
isMultiselectType() {
return this.type === "multiselect";
},
nativeDatePickerType() {
switch (this.type) {
case "date":
case "month":
case "time":
case "week":
case "datetime-local":
return this.type;
}
return false;
},
datePickerType() {
if (!this.isNativePicker) {
switch (this.type) {
case "date":
case "month":
case "time":
return this.type;
case "datetime-local":
return "datetime";
}
}
return false;
},
/**
* determines if the action is focusable
*
* @return {boolean} is the action focusable ?
*/
isFocusable() {
return !this.disabled;
}
},
methods: {
// closing datepicker popup on mouseleave = unfocus
onLeave() {
if (this.$refs.datetimepicker && this.$refs.datetimepicker.$refs.datepicker) {
this.$refs.datetimepicker.$refs.datepicker.closePopup();
}
},
onInput(event) {
this.$emit("input", event);
this.$emit("update:value", event.target ? event.target.value : event);
},
onSubmit(event) {
event.preventDefault();
event.stopPropagation();
if (!this.disabled) {
this.$emit("submit", event);
} else {
return false;
}
},
onChange(event) {
this.$emit("change", event);
}
}
};
var _sfc_render = function render() {
var _vm = this, _c = _vm._self._c;
return _c("li", { staticClass: "action", class: { "action--disabled": _vm.disabled } }, [_c("span", { staticClass: "action-input", class: {
"action-input-picker--disabled": _vm.disabled,
"action-input--visible-label": _vm.labelOutside && _vm.label
}, on: { "mouseleave": _vm.onLeave } }, [_c("span", { staticClass: "action-input__icon-wrapper" }, [_vm._t("icon", function() {
return [_c("span", { staticClass: "action-input__icon", class: [_vm.isIconUrl ? "action-input__icon--url" : _vm.icon], style: { backgroundImage: _vm.isIconUrl ? "url(".concat(_vm.icon, ")") : null }, attrs: { "aria-hidden": "true" } })];
})], 2), _c("form", { ref: "form", staticClass: "action-input__form", attrs: { "disabled": _vm.disabled }, on: { "submit": function($event) {
$event.preventDefault();
return _vm.onSubmit.apply(null, arguments);
} } }, [_c("div", { staticClass: "action-input__container" }, [_vm.label && _vm.labelOutside ? _c("label", { staticClass: "action-input__text-label", class: { "action-input__text-label--hidden": !_vm.labelOutside }, attrs: { "for": _vm.inputId } }, [_vm._v(" " + _vm._s(_vm.label) + " ")]) : _vm._e(), _c("div", { staticClass: "action-input__input-container" }, [_vm.datePickerType ? _c("NcDateTimePicker", _vm._b({ ref: "datetimepicker", staticClass: "action-input__datetimepicker", staticStyle: { "z-index": "99999999999" }, attrs: { "value": _vm.value, "placeholder": _vm.text, "disabled": _vm.disabled, "type": _vm.datePickerType, "input-class": ["mx-input", { focusable: _vm.isFocusable }] }, on: { "input": _vm.onInput, "change": _vm.onChange } }, "NcDateTimePicker", _vm.$attrs, false)) : _vm.isNativePicker ? _c("NcDateTimePickerNative", _vm._b({ staticClass: "action-input__datetimepicker", attrs: { "id": _vm.idNativeDateTimePicker, "value": _vm.value, "type": _vm.nativeDatePickerType, "input-class": { focusable: _vm.isFocusable } }, on: { "input": function($event) {
return _vm.$emit("input", $event);
}, "change": function($event) {
return _vm.$emit("change", $event);
} } }, "NcDateTimePickerNative", _vm.$attrs, false)) : _vm.isMultiselectType ? _c("NcSelect", _vm._g(_vm._b({ staticClass: "action-input__multi", attrs: { "value": _vm.value, "placeholder": _vm.text, "disabled": _vm.disabled, "append-to-body": _vm.$attrs.appendToBody || _vm.$attrs["append-to-body"] || false, "input-class": { focusable: _vm.isFocusable } } }, "NcSelect", _vm.$attrs, false), _vm.$listeners)) : _vm.type === "password" ? _c("NcPasswordField", _vm._g(_vm._b({ attrs: { "id": _vm.inputId, "value": _vm.value, "label": _vm.label, "label-outside": !_vm.label || _vm.labelOutside, "placeholder": _vm.text, "disabled": _vm.disabled, "input-class": { focusable: _vm.isFocusable }, "show-trailing-button": _vm.showTrailingButton && !_vm.disabled }, on: { "input": _vm.onInput, "change": _vm.onChange } }, "NcPasswordField", _vm.$attrs, false), _vm.$listeners)) : _vm.type === "color" ? _c("div", { staticClass: "action-input__container" }, [_vm.label && _vm.type === "color" ? _c("label", { staticClass: "action-input__text-label", class: { "action-input__text-label--hidden": !_vm.labelOutside }, attrs: { "for": _vm.inputId } }, [_vm._v(" " + _vm._s(_vm.label) + " ")]) : _vm._e(), _c("div", { staticClass: "action-input__input-container" }, [_c("NcColorPicker", _vm._g(_vm._b({ staticClass: "colorpicker__trigger", attrs: { "id": "inputId", "value": _vm.value }, on: { "input": _vm.onInput, "submit": function($event) {
return _vm.$refs.form.requestSubmit();
} } }, "NcColorPicker", _vm.$attrs, false), _vm.$listeners), [_c("button", { staticClass: "colorpicker__preview", class: { focusable: _vm.isFocusable }, style: { "background-color": _vm.value } })])], 1)]) : _c("NcTextField", _vm._g(_vm._b({ attrs: { "id": _vm.inputId, "value": _vm.value, "label": _vm.label, "label-outside": !_vm.label || _vm.labelOutside, "placeholder": _vm.text, "disabled": _vm.disabled, "input-class": { focusable: _vm.isFocusable }, "type": _vm.type, "trailing-button-icon": "arrowRight", "trailing-button-label": _vm.trailingButtonLabel, "show-trailing-button": _vm.showTrailingButton && !_vm.disabled }, on: { "trailing-button-click": function($event) {
return _vm.$refs.form.requestSubmit();
}, "input": _vm.onInput, "change": _vm.onChange } }, "NcTextField", _vm.$attrs, false), _vm.$listeners))], 1)])])])]);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ normalizeComponent(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns,
false,
null,
"6ba44c48"
);
const NcActionInput = __component__.exports;
export {
NcActionInput as N
};