@nextcloud/vue/dist/Components/NcInputField.mjs

Nextcloud vue components

import "../assets/index12.css";
import i from "./NcButton.mjs";
import { G as l } from "../chunks/GenRandomId-1e1b509a.mjs";
import s from "vue-material-design-icons/AlertCircleOutline.vue";
import a from "vue-material-design-icons/Check.vue";
import { n as r } from "../chunks/_plugin-vue2_normalizer-5b4c43a4.mjs";
const n = { name: "NcInputField", components: { NcButton: i, AlertCircle: s, Check: a }, inheritAttrs: !1, props: { value: { type: String, required: !0 }, type: { type: String, default: "text", validator: (e) => ["text", "password", "email", "tel", "url", "search", "number"].includes(e) }, label: { type: String, default: void 0 }, labelOutside: { type: Boolean, default: !1 }, placeholder: { type: String, default: void 0 }, showTrailingButton: { type: Boolean, default: !1 }, trailingButtonLabel: { type: String, default: "" }, success: { type: Boolean, default: !1 }, error: { type: Boolean, default: !1 }, helperText: { type: String, default: "" }, disabled: { type: Boolean, default: !1 }, 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" + l();
}, 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 e = this.label || this.labelOutside;
  return e || 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."), e;
}, ariaDescribedby() {
  const e = [];
  return this.helperText.length > 0 && e.push(`${this.inputName}-helper-text`), this.$attrs["aria-describedby"] && e.push(this.$attrs["aria-describedby"]), e.join(" ") || null;
} }, methods: { focus() {
  this.$refs.input.focus();
}, select() {
  this.$refs.input.select();
}, handleInput(e) {
  this.$emit("update:value", e.target.value);
}, handleTrailingButtonClick(e) {
  this.$emit("trailing-button-click", e);
} } };
var o = function() {
  var e = this, t = e._self._c;
  return t("div", { staticClass: "input-field", class: { "input-field--disabled": e.disabled } }, [t("div", { staticClass: "input-field__main-wrapper" }, [t("input", e._g(e._b({ ref: "input", staticClass: "input-field__input", class: [e.inputClass, { "input-field__input--trailing-icon": e.showTrailingButton || e.hasTrailingIcon, "input-field__input--leading-icon": e.hasLeadingIcon, "input-field__input--label-outside": e.labelOutside, "input-field__input--success": e.success, "input-field__input--error": e.error }], attrs: { id: e.computedId, type: e.type, disabled: e.disabled, placeholder: e.computedPlaceholder, "aria-describedby": e.ariaDescribedby, "aria-live": "polite" }, domProps: { value: e.value }, on: { input: e.handleInput } }, "input", e.$attrs, !1), e.$listeners)), !e.labelOutside && e.isValidLabel ? t("label", { staticClass: "input-field__label", class: [{ "input-field__label--trailing-icon": e.showTrailingButton || e.hasTrailingIcon, "input-field__label--leading-icon": e.hasLeadingIcon }], attrs: { for: e.computedId } }, [e._v(" " + e._s(e.label) + " ")]) : e._e(), t("div", { directives: [{ name: "show", rawName: "v-show", value: e.hasLeadingIcon, expression: "hasLeadingIcon" }], staticClass: "input-field__icon input-field__icon--leading" }, [e._t("default")], 2), e.showTrailingButton ? t("NcButton", { staticClass: "input-field__clear-button", attrs: { type: "tertiary-no-background", "aria-label": e.trailingButtonLabel, disabled: e.disabled }, on: { click: e.handleTrailingButtonClick }, scopedSlots: e._u([{ key: "icon", fn: function() {
    return [e._t("trailing-button-icon")];
  }, proxy: !0 }], null, !0) }) : e.success || e.error ? t("div", { staticClass: "input-field__icon input-field__icon--trailing" }, [e.success ? t("Check", { staticStyle: { color: "var(--color-success-text)" }, attrs: { size: 20 } }) : e.error ? t("AlertCircle", { staticStyle: { color: "var(--color-error-text)" }, attrs: { size: 20 } }) : e._e()], 1) : e._e()], 1), e.helperText.length > 0 ? t("p", { staticClass: "input-field__helper-text-message", class: { "input-field__helper-text-message--error": e.error, "input-field__helper-text-message--success": e.success }, attrs: { id: `${e.inputName}-helper-text` } }, [e.success ? t("Check", { staticClass: "input-field__helper-text-message__icon", attrs: { size: 18 } }) : e.error ? t("AlertCircle", { staticClass: "input-field__helper-text-message__icon", attrs: { size: 18 } }) : e._e(), e._v(" " + e._s(e.helperText) + " ")], 1) : e._e()]);
}, u = [], d = r(n, o, u, !1, null, "6c26cc55", null, null);
const g = d.exports;
export {
  g as default
};