@nextcloud/vue
Version:
Nextcloud vue components
224 lines (223 loc) • 6.84 kB
JavaScript
import '../assets/NcTextArea-B6zS3CRN.css';
import { A as AlertCircle } from "./AlertCircleOutline-DBxbepLy.mjs";
import { C as Check } from "./Check-BkThHPH7.mjs";
import { u as useModelMigration } from "./useModelMigration-EhAWvqDD.mjs";
import { G as GenRandomId } from "./GenRandomId-F5ebeBB_.mjs";
import { i as isLegacy32 } from "./legacy-MK4GvP26.mjs";
import { l as logger } from "./logger-D3RVzcfQ.mjs";
import { n as normalizeComponent } from "./_plugin-vue2_normalizer-DU4iP6Vu.mjs";
const _sfc_main = {
name: "NcTextArea",
components: {
AlertCircle,
Check
},
inheritAttrs: false,
model: {
prop: "modelValue",
event: "update:modelValue"
},
props: {
/**
* Removed in v9 - use `modelValue` (`v-model`) instead
*
* @deprecated
*/
value: {
type: String,
default: void 0
},
/**
* The value of the input field
*/
modelValue: {
type: String,
default: void 0
},
/**
* 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.
*/
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
},
/**
* 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
},
/**
* Class to add to the input field.
* Necessary to use NcInputField in the NcActionInput component.
*/
inputClass: {
type: [Object, String],
default: ""
},
/**
* The resize CSS property sets whether an element is resizable, and if
* so, in which directions.
*/
resize: {
type: String,
default: "both",
validator: (value) => ["both", "vertical", "horizontal", "none"].includes(value)
}
},
emits: [
/**
* Removed in v9 - use `update:modelValue` (`v-model`) instead
*
* @deprecated
*/
"update:value",
"update:modelValue",
/** Same as update:modelValue for Vue 2 compatibility */
"update:model-value"
],
setup() {
const model = useModelMigration("value", "update:value", true);
return {
isLegacy32,
model
};
},
computed: {
computedId() {
return this.$attrs.id && this.$attrs.id !== "" ? this.$attrs.id : this.inputName;
},
inputName() {
return "input" + GenRandomId();
},
hasPlaceholder() {
return this.placeholder !== "" && this.placeholder !== void 0;
},
computedPlaceholder() {
if (this.hasPlaceholder) {
return this.placeholder;
}
if (isLegacy32) {
return this.label;
}
return void 0;
},
isValidLabel() {
const isValidLabel = this.label || this.labelOutside;
if (!isValidLabel) {
logger.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(`${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.model = event.target.value;
}
}
};
var _sfc_render = function render() {
var _vm = this, _c = _vm._self._c;
return _c("div", { staticClass: "textarea", class: {
"textarea--disabled": _vm.disabled,
"textarea--legacy": _vm.isLegacy32
} }, [_c("div", { staticClass: "textarea__main-wrapper" }, [_c("textarea", _vm._g(_vm._b({ ref: "input", staticClass: "textarea__input", class: [
_vm.inputClass,
{
"textarea__input--label-outside": _vm.labelOutside,
"textarea__input--legacy": _vm.isLegacy,
"textarea__input--success": _vm.success,
"textarea__input--error": _vm.error
}
], style: { resize: _vm.resize }, attrs: { "id": _vm.computedId, "disabled": _vm.disabled, "placeholder": _vm.computedPlaceholder, "aria-describedby": _vm.ariaDescribedby, "aria-live": "polite" }, domProps: { "value": _vm.model }, on: { "input": _vm.handleInput } }, "textarea", _vm.$attrs, false), _vm.$listeners)), _vm._v(" "), !_vm.labelOutside && _vm.isValidLabel ? _c("label", { staticClass: "textarea__label", attrs: { "for": _vm.computedId } }, [_vm._v(" " + _vm._s(_vm.label) + " ")]) : _vm._e()]), _vm.helperText.length > 0 ? _c("p", { staticClass: "textarea__helper-text-message", class: {
"textarea__helper-text-message--error": _vm.error,
"textarea__helper-text-message--success": _vm.success
}, attrs: { "id": `${_vm.inputName}-helper-text` } }, [_vm.success ? _c("Check", { staticClass: "textarea__helper-text-message__icon", attrs: { "size": 18 } }) : _vm.error ? _c("AlertCircle", { staticClass: "textarea__helper-text-message__icon", attrs: { "size": 18 } }) : _vm._e(), _vm._v(" " + _vm._s(_vm.helperText) + " ")], 1) : _vm._e()]);
};
var _sfc_staticRenderFns = [];
var __component__ = /* @__PURE__ */ normalizeComponent(
_sfc_main,
_sfc_render,
_sfc_staticRenderFns,
false,
null,
"11ea0e4b"
);
const NcTextArea = __component__.exports;
export {
NcTextArea as N
};
//# sourceMappingURL=NcTextArea-DHmD6-6s.mjs.map