@nextcloud/vue
Version:
Nextcloud vue components
2 lines (1 loc) • 5.88 kB
JavaScript
var f=require("../assets/index58.css");const l=require("./NcDatetimePicker.cjs"),n=require("./NcDateTimePickerNative.cjs"),s=require("./NcPasswordField.cjs"),r=require("./NcSelect.cjs"),c=require("./NcTextField.cjs"),u=require("../chunks/actionGlobal-ec7003e8.cjs"),a=require("../chunks/GenRandomId-67df40eb.cjs"),o=require("../chunks/_plugin-vue2_normalizer-764a4c12.cjs");const d={name:"NcActionInput",components:{NcDatetimePicker:l,NcDateTimePickerNative:n,NcPasswordField:s,NcSelect:r,NcTextField:c},mixins:[u.ActionGlobalMixin],props:{id:{type:String,default:()=>"action-"+a.GenRandomId(),validator:e=>e.trim()!==""},inputId:{type:String,default:()=>"action-input-"+a.GenRandomId(),validator:e=>e.trim()!==""},icon:{type:String,default:""},type:{type:String,default:"text",validator(e){return["date","datetime-local","month","multiselect","number","password","search","tel","text","time","url","week","color","email"].indexOf(e)>-1}},idNativeDateTimePicker:{type:String,default:"date-time-picker_id"},isNativePicker:{type:Boolean,default:!1},label:{type:String,default:null},labelOutside:{type:Boolean,default:!0},value:{type:[String,Date,Number,Array],default:""},disabled:{type:Boolean,default:!1},ariaLabel:{type:String,default:""},ariaHidden:{type:Boolean,default:null},showTrailingButton:{type:Boolean,default:!0}},emits:["input","submit","change","update:value"],computed:{isIconUrl(){try{return new URL(this.icon)}catch{return!1}},isMultiselectType(){return this.type==="multiselect"},nativeDatePickerType(){switch(this.type){case"date":case"month":case"time":case"week":case"datetime-local":return this.type}return!1},datePickerType(){if(!this.isNativePicker)switch(this.type){case"date":case"month":case"time":return this.type;case"datetime-local":return"datetime"}return!1},isFocusable(){return!this.disabled}},methods:{onLeave(){this.$refs.datetimepicker&&this.$refs.datetimepicker.$refs.datepicker&&this.$refs.datetimepicker.$refs.datepicker.closePopup()},onInput(e){this.$emit("input",e),this.$emit("update:value",e.target?e.target.value:e)},onSubmit(e){if(e.preventDefault(),e.stopPropagation(),!this.disabled)this.$emit("submit",e);else return!1},onChange(e){this.$emit("change",e)}}};var p=function(){var e=this,t=e._self._c;return t("li",{staticClass:"action",class:{"action--disabled":e.disabled}},[t("span",{staticClass:"action-input",class:{"action-input-picker--disabled":e.disabled,"action-input--visible-label":e.labelOutside&&e.label},on:{mouseleave:e.onLeave}},[t("span",{staticClass:"action-input__icon-wrapper"},[e._t("icon",function(){return[t("span",{staticClass:"action-input__icon",class:[e.isIconUrl?"action-input__icon--url":e.icon],style:{backgroundImage:e.isIconUrl?`url(${e.icon})`:null},attrs:{"aria-hidden":e.ariaHidden}})]})],2),t("form",{ref:"form",staticClass:"action-input__form",attrs:{disabled:e.disabled},on:{submit:function(i){return i.preventDefault(),e.onSubmit.apply(null,arguments)}}},[t("div",{staticClass:"action-input__container"},[e.label&&e.labelOutside?t("label",{staticClass:"action-input__text-label",class:{"action-input__text-label--hidden":!e.labelOutside},attrs:{for:e.inputId}},[e._v(" "+e._s(e.label)+" ")]):e._e(),t("div",{staticClass:"action-input__input-container"},[e.datePickerType?t("NcDatetimePicker",e._b({ref:"datetimepicker",staticClass:"action-input__datetimepicker",staticStyle:{"z-index":"99999999999"},attrs:{value:e.value,placeholder:e.text,disabled:e.disabled,type:e.datePickerType,"input-class":["mx-input",{focusable:e.isFocusable}]},on:{input:e.onInput,change:e.onChange}},"NcDatetimePicker",e.$attrs,!1)):e.isNativePicker?t("NcDateTimePickerNative",e._b({staticClass:"action-input__datetimepicker",attrs:{id:e.idNativeDateTimePicker,value:e.value,type:e.nativeDatePickerType,"input-class":{focusable:e.isFocusable}},on:{input:function(i){return e.$emit("input",i)},change:function(i){return e.$emit("change",i)}}},"NcDateTimePickerNative",e.$attrs,!1)):e.isMultiselectType?t("NcSelect",e._g(e._b({staticClass:"action-input__multi",attrs:{value:e.value,placeholder:e.text,disabled:e.disabled,"append-to-body":!1,"input-class":{focusable:e.isFocusable}}},"NcSelect",e.$attrs,!1),e.$listeners)):e.type==="password"?t("NcPasswordField",e._g(e._b({attrs:{id:e.inputId,value:e.value,label:e.label,"label-outside":!e.label||e.labelOutside,placeholder:e.text,disabled:e.disabled,"input-class":{focusable:e.isFocusable},"trailing-button-icon":"arrowRight","show-trailing-button":e.showTrailingButton&&!e.disabled},on:{"trailing-button-click":function(i){return e.$refs.form.requestSubmit()},input:e.onInput,change:e.onChange}},"NcPasswordField",e.$attrs,!1),e.$listeners)):e.type==="color"?t("div",{staticClass:"action-input__container"},[e.label&&e.type==="color"?t("label",{staticClass:"action-input__text-label",class:{"action-input__text-label--hidden":!e.labelOutside},attrs:{for:e.inputId}},[e._v(" "+e._s(e.label)+" ")]):e._e(),t("div",{staticClass:"action-input__input-container"},[t("NcColorPicker",e._g(e._b({staticClass:"colorpicker__trigger",attrs:{id:"inputId",value:e.value},on:{input:e.onInput,submit:function(i){return e.$refs.form.requestSubmit()}}},"NcColorPicker",e.$attrs,!1),e.$listeners),[t("button",{staticClass:"colorpicker__preview",class:{focusable:e.isFocusable},style:{"background-color":e.value}})])],1)]):t("NcTextField",e._g(e._b({attrs:{id:e.inputId,value:e.value,label:e.label,"label-outside":!e.label||e.labelOutside,placeholder:e.text,disabled:e.disabled,"input-class":{focusable:e.isFocusable},type:e.type,"trailing-button-icon":"arrowRight","show-trailing-button":e.showTrailingButton&&!e.disabled},on:{"trailing-button-click":function(i){return e.$refs.form.requestSubmit()},input:e.onInput,change:e.onChange}},"NcTextField",e.$attrs,!1),e.$listeners))],1)])])])])},b=[],m=o.normalizeComponent(d,p,b,!1,null,"eddb045f",null,null);const _=m.exports;module.exports=_;