@nextcloud/vue
Version:
Nextcloud vue components
134 lines (133 loc) • 5.41 kB
JavaScript
import '../assets/NcTextArea-nivEqHE-.css';
import { defineComponent, mergeModels, useModel, useAttrs, useTemplateRef, computed, watch, createElementBlock, openBlock, normalizeClass, unref, createElementVNode, createCommentVNode, mergeProps, toDisplayString, createBlock, createTextVNode } from "vue";
import { d as mdiCheck, f as mdiAlertCircleOutline } from "./mdi-XFJRiRqJ.mjs";
import { N as NcIconSvgWrapper } from "./NcIconSvgWrapper-BvLanNaW.mjs";
import { c as createElementId } from "./createElementId-DhjFt1I9.mjs";
import { i as isLegacy } from "./legacy-DcjXBL_t.mjs";
import { l as logger } from "./logger-D3RVzcfQ.mjs";
import { _ as _export_sfc } from "./_plugin-vue_export-helper-1tPrXgE0.mjs";
const _hoisted_1 = { class: "textarea__main-wrapper" };
const _hoisted_2 = ["id", "aria-describedby", "disabled", "placeholder", "value"];
const _hoisted_3 = ["for"];
const _hoisted_4 = ["id"];
const _sfc_main = /* @__PURE__ */ defineComponent({
...{ inheritAttrs: false },
__name: "NcTextArea",
props: /* @__PURE__ */ mergeModels({
disabled: { type: Boolean },
error: { type: Boolean },
helperText: { default: void 0 },
id: { default: () => createElementId() },
inputClass: { default: "" },
label: { default: void 0 },
labelOutside: { type: Boolean },
placeholder: { default: void 0 },
resize: { default: "both" },
success: { type: Boolean }
}, {
"modelValue": { required: true },
"modelModifiers": {}
}),
emits: ["update:modelValue"],
setup(__props, { expose: __expose }) {
const modelValue = useModel(__props, "modelValue");
const props = __props;
__expose({
focus,
select
});
const attrs = useAttrs();
const textAreaElement = useTemplateRef("input");
const internalPlaceholder = computed(() => props.placeholder || (isLegacy ? props.label : void 0));
watch(() => props.labelOutside, () => {
if (!props.labelOutside && !props.label) {
logger.warn("[NcTextArea] 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.");
}
});
const ariaDescribedby = computed(() => {
const ariaDescribedby2 = [];
if (props.helperText) {
ariaDescribedby2.push(`${props.id}-helper-text`);
}
if (typeof attrs["aria-describedby"] === "string") {
ariaDescribedby2.push(attrs["aria-describedby"]);
}
return ariaDescribedby2.join(" ") || void 0;
});
function handleInput(event) {
const { value } = event.target;
modelValue.value = value;
}
function focus(options) {
textAreaElement.value.focus(options);
}
function select() {
textAreaElement.value.select();
}
return (_ctx, _cache) => {
return openBlock(), createElementBlock("div", {
class: normalizeClass(["textarea", [
_ctx.$attrs.class,
{
"textarea--disabled": _ctx.disabled,
"textarea--legacy": unref(isLegacy)
}
]])
}, [
createElementVNode("div", _hoisted_1, [
createElementVNode("textarea", mergeProps({ ..._ctx.$attrs, class: void 0 }, {
id: _ctx.id,
ref: "input",
"aria-describedby": ariaDescribedby.value,
"aria-live": "polite",
class: ["textarea__input", [
_ctx.inputClass,
{
"textarea__input--label-outside": _ctx.labelOutside,
"textarea__input--legacy": unref(isLegacy),
"textarea__input--success": _ctx.success,
"textarea__input--error": _ctx.error
}
]],
disabled: _ctx.disabled,
placeholder: internalPlaceholder.value,
style: { resize: _ctx.resize },
value: modelValue.value,
onInput: handleInput
}), null, 16, _hoisted_2),
!_ctx.labelOutside ? (openBlock(), createElementBlock("label", {
key: 0,
class: "textarea__label",
for: _ctx.id
}, toDisplayString(_ctx.label), 9, _hoisted_3)) : createCommentVNode("", true)
]),
_ctx.helperText ? (openBlock(), createElementBlock("p", {
key: 0,
id: `${_ctx.id}-helper-text`,
class: normalizeClass(["textarea__helper-text-message", {
"textarea__helper-text-message--error": _ctx.error,
"textarea__helper-text-message--success": _ctx.success
}])
}, [
_ctx.success ? (openBlock(), createBlock(NcIconSvgWrapper, {
key: 0,
class: "textarea__helper-text-message__icon",
path: unref(mdiCheck),
inline: ""
}, null, 8, ["path"])) : _ctx.error ? (openBlock(), createBlock(NcIconSvgWrapper, {
key: 1,
class: "textarea__helper-text-message__icon",
path: unref(mdiAlertCircleOutline),
inline: ""
}, null, 8, ["path"])) : createCommentVNode("", true),
createTextVNode(" " + toDisplayString(_ctx.helperText), 1)
], 10, _hoisted_4)) : createCommentVNode("", true)
], 2);
};
}
});
const NcTextArea = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-a0d5539d"]]);
export {
NcTextArea as N
};
//# sourceMappingURL=NcTextArea-CdtxX_QJ.mjs.map