@nextcloud/vue
Version:
Nextcloud vue components
292 lines (291 loc) • 11.7 kB
JavaScript
require('../assets/NcActionInput-DXZaAilC.css');
"use strict";
const Vue = require("vue");
const useModelMigration = require("./useModelMigration-D5zhrNXr.cjs");
const _l10n = require("./_l10n-DM-VRK9x.cjs");
const actionGlobal = require("./actionGlobal-L0Ls8tPJ.cjs");
const GenRandomId = require("./GenRandomId-D7iOvpZS.cjs");
const Components_NcDateTimePickerNative = require("../Components/NcDateTimePickerNative.cjs");
const NcPasswordField = require("./NcPasswordField-DPGGwGEl.cjs");
const NcTextField = require("./NcTextField-Cp3tulze.cjs");
const _pluginVue2_normalizer = require("./_plugin-vue2_normalizer-V0q-tHlQ.cjs");
const _interopNamespaceDefaultOnly = (e) => Object.freeze(Object.defineProperty({ __proto__: null, default: e }, Symbol.toStringTag, { value: "Module" }));
_l10n.register(_l10n.t48);
const _sfc_main = {
name: "NcActionInput",
components: {
NcDateTimePickerNative: Components_NcDateTimePickerNative,
NcPasswordField: NcPasswordField.NcPasswordField,
NcTextField: NcTextField.NcTextField,
// Lazy load components with more than 50kB bundle size impact
NcColorPicker: Vue.defineAsyncComponent(() => Promise.resolve().then(() => /* @__PURE__ */ _interopNamespaceDefaultOnly(require("../Components/NcColorPicker.cjs")))),
NcDateTimePicker: Vue.defineAsyncComponent(() => Promise.resolve().then(() => /* @__PURE__ */ _interopNamespaceDefaultOnly(require("../Components/NcDateTimePicker.cjs")))),
NcSelect: Vue.defineAsyncComponent(() => Promise.resolve().then(() => /* @__PURE__ */ _interopNamespaceDefaultOnly(require("../Components/NcSelect.cjs"))))
},
mixins: [actionGlobal.ActionGlobalMixin],
model: {
prop: "modelValue",
event: "update:modelValue"
},
props: {
/**
* id attribute of the checkbox element
*/
id: {
type: String,
default: () => "action-" + GenRandomId.GenRandomId(),
validator: (id) => id.trim() !== ""
},
/**
* id attribute of the text input element
*/
inputId: {
type: String,
default: () => "action-input-" + GenRandomId.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,
// eslint-disable-next-line vue/no-boolean-default
default: true
},
/**
* Removed in v9 - use `update:modelValue` (`v-model`) instead
*
* @deprecated
*/
value: {
type: [String, Date, Number, Array],
default: void 0
},
/**
* value attribute of the input field
*/
modelValue: {
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,
// eslint-disable-next-line vue/no-boolean-default
default: null
},
/**
* Attribute forwarded to the underlying NcPasswordField and NcTextField
*/
showTrailingButton: {
type: Boolean,
// eslint-disable-next-line vue/no-boolean-default
default: true
},
/**
* Trailing button label forwarded to the underlying NcTextField
*/
trailingButtonLabel: {
type: String,
default: _l10n.t("Submit")
}
},
emits: [
"input",
"submit",
"change",
/**
* Removed in v9 - use `update:modelValue` (`v-model`) instead
*
* @deprecated
*/
"update:value",
/**
* Emitted when the inputs value changes
* ! DatetimePicker only send the value
*
* @type {string|Date}
*/
"update:modelValue",
/** Same as `update:modelValue` but with a different event name */
"update:model-value"
],
setup() {
const model = useModelMigration.useModelMigration("value", "update:value");
return {
model
};
},
computed: {
isIconUrl() {
try {
return new URL(this.icon);
} catch {
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.model = 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(${_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.model, "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.model, "type": _vm.nativeDatePickerType, "input-class": { focusable: _vm.isFocusable } }, on: { "update:model-value": function($event) {
_vm.model = $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.model, "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.model, "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.model }, on: { "update:model-value": _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.model } })])], 1)]) : _c("NcTextField", _vm._g(_vm._b({ attrs: { "id": _vm.inputId, "value": _vm.model, "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__ */ _pluginVue2_normalizer.normalizeComponent(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns,
false,
null,
"b506e1f9"
);
const NcActionInput = __component__.exports;
exports.NcActionInput = NcActionInput;
//# sourceMappingURL=NcActionInput-iIJpNS_Q.cjs.map