@nextcloud/vue
Version:
Nextcloud vue components
234 lines (233 loc) • 8.36 kB
JavaScript
require('../assets/NcInputField-CQc5dRbY.css');
"use strict";
const Components_NcButton = require("./NcButton.cjs");
const GenRandomId = require("../chunks/GenRandomId-BQDud3d4.cjs");
const AlertCircleOutline = require("../chunks/AlertCircleOutline-DLtiWgZd.cjs");
const Check = require("../chunks/Check-fCbe4vqy.cjs");
const _pluginVue2_normalizer = require("../chunks/_plugin-vue2_normalizer-V0q-tHlQ.cjs");
const _sfc_main = {
name: "NcInputField",
components: {
NcButton: Components_NcButton,
AlertCircle: AlertCircleOutline.AlertCircle,
Check: Check.Check
},
inheritAttrs: false,
props: {
/**
* The value of the input field
* If type is 'number' and a number is passed as value than the type of `update:value` will also be 'number'
*/
value: {
type: [String, Number],
required: true
},
/**
* The type of the input element
*/
type: {
type: String,
default: "text",
validator: (value) => [
"text",
"password",
"email",
"tel",
"url",
"search",
"number"
].includes(value)
},
/**
* The input label, always provide one for accessibility purposes.
* This will also be used as a placeholder unless the placeholder
* prop is populated with a different string.
*
* Note: If the background color is not `--color-main-background` consider using an external label instead (see `labelOutside`).
*/
label: {
type: String,
default: void 0
},
/**
* Pass in true if you want to use an external label. This is useful
* if you need a label that looks different from the one provided by
* this component
*/
labelOutside: {
type: Boolean,
default: false
},
/**
* The placeholder of the input. This defaults as the string that's
* passed into the label prop. In order to remove the placeholder,
* pass in an empty string.
*/
placeholder: {
type: String,
default: void 0
},
/**
* Controls whether to display the trailing button.
*/
showTrailingButton: {
type: Boolean,
default: false
},
/**
* Label of the trailing button
*
* Required when showTrailingButton is set
*/
trailingButtonLabel: {
type: String,
default: ""
},
/**
* Toggles the success state of the component. Adds a checkmark icon.
* this cannot be used together with canClear.
*/
success: {
type: Boolean,
default: false
},
/**
* Toggles the error state of the component. Adds an error icon.
* this cannot be used together with canClear.
*/
error: {
type: Boolean,
default: false
},
/**
* Additional helper text message
*
* This will be displayed beneath the input field. In case the field is
* also marked as having an error, the text will be displayed in red.
*/
helperText: {
type: String,
default: ""
},
/**
* Disable the input field
*/
disabled: {
type: Boolean,
default: false
},
/**
* Specifies whether the input should have a pill form.
* By default, input has rounded corners.
*/
pill: {
type: Boolean,
default: false
},
/**
* Class to add to the input field.
* Necessary to use NcInputField in the NcActionInput component.
*/
inputClass: {
type: [Object, String],
default: ""
}
},
emits: [
"update:value",
"trailing-button-click"
],
computed: {
computedId() {
return this.$attrs.id && this.$attrs.id !== "" ? this.$attrs.id : this.inputName;
},
inputName() {
return "input" + GenRandomId.GenRandomId();
},
hasLeadingIcon() {
return this.$slots.default;
},
hasTrailingIcon() {
return this.success;
},
hasPlaceholder() {
return this.placeholder !== "" && this.placeholder !== void 0;
},
computedPlaceholder() {
return this.hasPlaceholder ? this.placeholder : this.label;
},
isValidLabel() {
const isValidLabel = this.label || this.labelOutside;
if (!isValidLabel) {
console.warn("You need to add a label to the NcInputField component. Either use the prop label or use an external one, as per the example in the documentation.");
}
return isValidLabel;
},
ariaDescribedby() {
const ariaDescribedby = [];
if (this.helperText.length > 0) {
ariaDescribedby.push("".concat(this.inputName, "-helper-text"));
}
if (this.$attrs["aria-describedby"]) {
ariaDescribedby.push(this.$attrs["aria-describedby"]);
}
return ariaDescribedby.join(" ") || null;
}
},
methods: {
/**
* Focus the input element
*
* @public
*/
focus() {
this.$refs.input.focus();
},
/**
* Select all the text in the input
*
* @public
*/
select() {
this.$refs.input.select();
},
handleInput(event) {
this.$emit("update:value", this.type === "number" && typeof this.value === "number" ? parseFloat(event.target.value, 10) : event.target.value);
},
handleTrailingButtonClick(event) {
this.$emit("trailing-button-click", event);
}
}
};
var _sfc_render = function render() {
var _vm = this, _c = _vm._self._c;
return _c("div", { staticClass: "input-field", class: {
"input-field--disabled": _vm.disabled,
"input-field--label-outside": _vm.labelOutside || !_vm.isValidLabel,
"input-field--leading-icon": _vm.hasLeadingIcon,
"input-field--trailing-icon": _vm.showTrailingButton || _vm.hasTrailingIcon,
"input-field--pill": _vm.pill
} }, [_c("div", { staticClass: "input-field__main-wrapper" }, [_c("input", _vm._g(_vm._b({ ref: "input", staticClass: "input-field__input", class: [
_vm.inputClass,
{
"input-field__input--success": _vm.success,
"input-field__input--error": _vm.error
}
], attrs: { "id": _vm.computedId, "type": _vm.type, "disabled": _vm.disabled, "placeholder": _vm.computedPlaceholder, "aria-describedby": _vm.ariaDescribedby, "aria-live": "polite" }, domProps: { "value": _vm.value.toString() }, on: { "input": _vm.handleInput } }, "input", _vm.$attrs, false), _vm.$listeners)), !_vm.labelOutside && _vm.isValidLabel ? _c("label", { staticClass: "input-field__label", attrs: { "for": _vm.computedId } }, [_vm._v(" " + _vm._s(_vm.label) + " ")]) : _vm._e(), _c("div", { directives: [{ name: "show", rawName: "v-show", value: _vm.hasLeadingIcon, expression: "hasLeadingIcon" }], staticClass: "input-field__icon input-field__icon--leading" }, [_vm._t("default")], 2), _vm.showTrailingButton ? _c("NcButton", { staticClass: "input-field__trailing-button", attrs: { "type": "tertiary-no-background", "aria-label": _vm.trailingButtonLabel, "disabled": _vm.disabled }, on: { "click": _vm.handleTrailingButtonClick }, scopedSlots: _vm._u([{ key: "icon", fn: function() {
return [_vm._t("trailing-button-icon")];
}, proxy: true }], null, true) }) : _vm.success || _vm.error ? _c("div", { staticClass: "input-field__icon input-field__icon--trailing" }, [_vm.success ? _c("Check", { staticStyle: { "color": "var(--color-success-text)" }, attrs: { "size": 20 } }) : _vm.error ? _c("AlertCircle", { staticStyle: { "color": "var(--color-error-text)" }, attrs: { "size": 20 } }) : _vm._e()], 1) : _vm._e()], 1), _vm.helperText.length > 0 ? _c("p", { staticClass: "input-field__helper-text-message", class: {
"input-field__helper-text-message--error": _vm.error,
"input-field__helper-text-message--success": _vm.success
}, attrs: { "id": "".concat(_vm.inputName, "-helper-text") } }, [_vm.success ? _c("Check", { staticClass: "input-field__helper-text-message__icon", attrs: { "size": 18 } }) : _vm.error ? _c("AlertCircle", { staticClass: "input-field__helper-text-message__icon", attrs: { "size": 18 } }) : _vm._e(), _vm._v(" " + _vm._s(_vm.helperText) + " ")], 1) : _vm._e()]);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ _pluginVue2_normalizer.normalizeComponent(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns,
false,
null,
"374fffac"
);
const NcInputField = __component__.exports;
module.exports = NcInputField;