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

Nextcloud vue components

var p=require("../assets/index35.css");const i=require("./NcButton.cjs"),l=require("../chunks/GenRandomId-67df40eb.cjs"),s=require("vue-material-design-icons/AlertCircleOutline.vue"),a=require("vue-material-design-icons/Check.vue"),r=require("../chunks/_plugin-vue2_normalizer-764a4c12.cjs");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.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 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 u=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()])},o=[],d=r.normalizeComponent(n,u,o,!1,null,"6c26cc55",null,null);const c=d.exports;module.exports=c;