@progress/kendo-ui
Version:
This package is part of the [Kendo UI for jQuery](http://www.telerik.com/kendo-ui) suite.
3 lines (2 loc) • 12.3 kB
JavaScript
!function(e,t){"object"==typeof exports&&"undefined"!=typeof module?t(exports,require("kendo.editable.js"),require("kendo.button.js"),require("kendo.otpinput.js")):"function"==typeof define&&define.amd?define(["exports","kendo.editable","kendo.button","kendo.otpinput"],t):t(((e="undefined"!=typeof globalThis?globalThis:e||self).kendo=e.kendo||{},e.kendo._globals=e.kendo._globals||{},e.kendo._globals.Form={}))}(this,(function(e){!function(e){var t=window.kendo,i=t.ui,a=".kendoForm",o=i.Widget,l=e.extend,n=t.htmlEncode,r="validate",d="validateField",s="change",p="click"+a,f="submit",u="clear",m="equalSet",c="group",b="aria-describedby",_="data-stop",v="data-role",g=".",h="[data-role='otpinput']",y={form:"k-form",horizontal:"k-form-horizontal",vertical:"",field:"k-form-field",fieldsContainer:"k-form-fields-container",fieldWrap:"k-form-field-wrap",fieldError:"k-form-field-error",fieldHint:"k-form-hint",fieldset:"k-form-fieldset",layout:"k-form-layout",legend:"k-form-legend",label:"k-label k-form-label",emptyLabel:"k-label-empty",optional:"k-label-optional",buttonsContainer:"k-form-buttons",buttonsEnd:"k-buttons-end",submit:"k-form-submit",clear:"k-form-clear",invalid:"k-invalid",hidden:"k-hidden"},k="horizontal",w="vertical",F=o.extend({init:function(e,i){var a=this;o.fn.init.call(a,e,i),a.options=t.deepExtend({},a.options,i),i&&i.formData&&(a.options.formData=i.formData),a._wrapper(),a._setFields(),a._setModel(),a._renderContainers(),a.options.renderButtons&&a._renderButtons(),a._editable(),a._renderBoolLabels(),a._renderFieldsHints(),a._setEvents(),a._applyCssClasses()},events:[d,r,s,f,u],options:{name:"Form",orientation:w,validatable:{validateOnBlur:!0,validationSummary:!1,errorTemplate:null},buttonsTemplate:null,messages:{submit:"Submit",clear:"Clear",optional:"(Optional)"},layout:"",grid:{},clearButton:!0,formData:{},items:[],formatLabel:null,focusFirst:!1,renderButtons:!0,size:"medium"},_noLabelfieldTemplate:({styles:e,colSpan:t,hidden:i,field:a})=>`<div class='${n(e.field)} ${t?`k-col-span-${n(t)}`:""} ${i?n(e.hidden):""}'><span class='${n(e.label)} ${n(e.emptyLabel)}'></span><div class='k-form-field-wrap' data-container-for='${n(a)}'></div></div>`,_fieldTemplate:({styles:e,colSpan:t,hidden:i,field:a,label:o,id:l,optional:r})=>`<div class='${n(e.field)} ${t?`k-col-span-${n(t)}`:""} ${i?`${n(e.hidden)}`:""}'>`+(o&&!i?`<label class='${n(e.label)}' for='${n(l)}' id='${n(l)}-form-label'>`+(void 0!==o.encoded&&!1===o.encoded?o.text||o:n(o.text||o))+(o.optional?`<span class='${n(e.optional)}'>${n(r)}</span>`:"")+"</label>":"")+`<div class='k-form-field-wrap' data-container-for='${n(a)}'></div></div>`,_boolLabelTemplate:({styles:e,colSpan:t,hidden:i,field:a,label:o,id:l,optional:r})=>`<label class='k-checkbox-label' for='${n(l)}' id='${n(l)}-form-label'>`+(void 0!==o.encoded&&!1===o.encoded?o.text||o:n(o.text||o))+(o.optional?`<span class='${n(e.optional)}'>${n(r)}</span>`:"")+"</label>",_groupTemplate:({styles:e,colSpan:t,label:i})=>`<fieldset class='${n(e.fieldset)} ${t?`k-col-span-${n(t)}`:""}'><legend class='${n(e.legend)}'>${n(i.text||i)}</legend></fieldset>`,_errorTemplate:({field:e,message:t})=>`<span class='k-form-error' id='${e}-form-error'><div>${t}</div></span>`,_hintTemplate:({id:e,message:t})=>`<div class='k-form-hint' id='${e}-form-hint'><span>${t}</span></div>`,_wrapper:function(){var e=this,t=e.options,i=F.styles,a=t.width,o=t.height;e.wrapper=e.element.addClass(i.form).addClass(i[t.orientation]),o&&e.wrapper.height(o),a&&e.wrapper.css("max-width",a),e.layoutWrapper=e._setupLayoutContainer(e.wrapper,{grid:t.grid,layout:t.layout})},_flattenFields:function(e){for(var t=[].concat(e),i=t.shift(),a=[],o=[].push;i;)i.items?o.apply(t,i.items):o.call(a,i),i=t.shift();return a},_defaultLabel:function(e){var i=this.options.formatLabel;if(e.length)return t.isFunction(i)?i(e):e.split(/(.*[a-z])(?=[A-Z])/).join(" ").trim()+":"},_formatLabel:function(t,i){return undefined!==(e.isPlainObject(i)?i.text:i)?i:this._defaultLabel(t)},_defaultFields:function(){var e,t=this.options,i=Object.keys(t.formData||{}),a=t.items||{},o=[];if(a.length)return a;for(var l=0;l<i.length;l+=1)e=i[l],o.push({field:e,id:e});return o},_setFields:function(){var e,a,o,n,r,d=this,s=d._flattenFields(d._defaultFields()),p=d.options.formData||{};for(var f in d._fields=[],s)a=p[(e=s[f]).field],o="string"==typeof e.editor?e.editor:t.type(a&&t.parseDate(a.toString())||a),n=t.isFunction(e.editor)?e.editor:i.Editable.fn.options.editors[o]?"":e.editor,d._isHidden(e.editor)||(e.label?r={"aria-labelledby":e.id||e.field+"-form-label"}:e.attributes&&e.attributes["aria-label"]||(r={"aria-label":e.name||e.field})),e=l(!0,{label:e.label||e.name||e.field,optionalText:d.options.messages.optional},e,{id:e.id||e.field,name:e.name||e.field,type:o,editor:n,attributes:r,isHidden:d._isHidden(e.editor)||d._isAntiForgeryToken(e.name||e.field)}),d._fields[f]=e},_setModel:function(){var e=this,i=e.options,a=i.formData||{};if(i.formData instanceof t.data.ObservableObject)e._model=a;else{var o=t.data.Model.define({fields:e._fields});e._model=new o(a)}},_editable:function(){var e=this,t=e.options,i=e.options.validatable;e._addEditableMvvmAttributes(),e.editable=e.wrapper.kendoEditable({model:e._model,fields:e._fields||[],validateOnBlur:i.validateOnBlur,validationSummary:i.validationSummary,errorTemplate:i.errorTemplate||e._errorTemplate,clearContainer:!1,skipFocus:!t.focusFirst,target:e,size:t.size}).getKendoEditable(),e.validator=e.editable.validatable,e._removeEditableMvvmAttributes()},_addEditableMvvmAttributes:function(){this.wrapper.attr(v,"editable")},_removeEditableMvvmAttributes:function(){this.wrapper.attr(_,!0).attr(v,"form")},_getItemTemplate:function(e){return e===c?this._groupTemplate:this._fieldTemplate},_isHidden:function(e){return"string"==typeof e&&"hidden"===e},_isAntiForgeryToken:function(e){return e===i.Editable.antiForgeryTokenName},_renderField:function(e){var i,a=this,o=F.styles,l=a.options.orientation===k,n=a._model.fields&&a._model.fields[e.field]&&a._model.fields[e.field].type,r=n&&"boolean"===n;return i=r&&l&&!e.editor?a._noLabelfieldTemplate:a._fieldTemplate,t.template(i)({styles:o,id:e.id||e.field||"",field:e.field||"",label:r&&!e.editor?null:a._formatLabel(e.field,e.label),colSpan:e.colSpan||"",optional:a.options.messages.optional,hidden:a._isHidden(e.editor)||a._isAntiForgeryToken(e.field)})},_toggleFieldErrorState:function(e,t){var i=e.closest(g+y.field);i.length&&i.toggleClass(y.fieldError,t)},_renderBoolLabels:function(){for(var e,i,a=this,o=F.styles,l=a._fields,n=0;n<l.length;n+=1)e=l[n],(i=a.wrapper.find("[name='"+e.name+"']:not([type='hidden'])"))&&e.label&&!e.isHidden&&"boolean"===e.type&&!e.editor&&i.parent().after(t.template(a._boolLabelTemplate)({styles:o,id:e.id||e.field||"",optional:a.options.messages.optional,label:a._formatLabel(e.field,e.label)}))},_renderFieldsHints:function(){for(var i,a,o,l,n,r=this,d=r._fields,s=0;s<d.length;s+=1)i=d[s],(o=r.wrapper.find(`[name='${i.name}'],[id='${i.name}']`))&&i.hint&&!i.isHidden&&(n=e(t.template(r._hintTemplate)({message:i.hint||"",id:i.id})),r._associateHintContainer(o,n.attr("id")),(a=t.widgetInstance(o))&&(o=(l=a.element.next("label[for='"+a.element.attr("id")+"']")).length?l:a.wrapper),r.validator._errorsByName(i.name).length&&(n.toggleClass(y.hidden),t.removeAttribute(o,b,n.attr("id"))),n.insertAfter(o))},_associateHintContainer:function(e,i){var a=t.getWidgetFocusableElement(e);a&&i&&t.toggleAttribute(a,b,i)},_toggleHint:function(e,t){var i,a=e.closest(g+y.field);a.length&&(i=a.find(g+y.fieldHint)).length&&(i.toggleClass(y.hidden,t),this._associateHintContainer(e,i.attr("id")))},_renderGroup:function(i){var a,o,l,n=this,r=i.type;l=o=e(t.template(n._getItemTemplate(r))({styles:y,label:i.label||"",colSpan:i.colSpan})),l=n._setupLayoutContainer(o,{grid:i.grid,layout:i.layout})||o;for(var d=0;d<i.items.length;d+=1)a=i.items[d],l.append(n._renderField(a));return o},_renderContainers:function(){for(var e,t,i=this,a=i._defaultFields(),o="grid"===i.options.layout?i.layoutWrapper:i.wrapper,l=0;l<a.length;l+=1)t=(e=a[l]).type===c?i._renderGroup(e):i._renderField(e),o.append(t)},_buttonsTemplate:function(){var i,a,o,l=this.options,r=l.messages,d=F.styles;return null!==l.buttonsTemplate?i=t.template(l.buttonsTemplate)({styles:d,messages:r}):(i=a=e("<button class='"+d.submit+"'>"+n(r.submit)+"</button>").kendoButton({type:"submit",themeColor:"primary",size:l.size}),l.clearButton&&(o=e("<button class='"+d.clear+"'>"+n(r.clear)+"</button>").kendoButton({size:l.size}),i=a.add(o))),i},_renderButtons:function(){var t,i=this,a=i.wrapper,o=i.options,l=F.styles,n=o.orientation===k,r=a.find(g+l.buttonsContainer);r.length||(r=e("<div />").addClass(l.buttonsContainer).addClass(n?l.buttonsEnd:"")),t=i._buttonsTemplate(),r.append(t),i.element.append(r)},_setupLayoutContainer:function(t,i){var a,o=i.layout,l=i.grid,n=[];return"string"==typeof o&&""!==o&&(a=e("<div></div>").appendTo(t).addClass(y.layout),n.push("k-d-"+o)),"grid"===o&&"object"==typeof l&&("number"==typeof l.cols?n.push("k-grid-cols-"+l.cols):"string"==typeof l.cols&&a.css("grid-template-columns",l.cols),n.push("k-gap-x-"+l.cols)),a&&a.addClass(n.join(" ")),a},_setEvents:function(){var e=this;e.validator.bind("validateInput",e._validateField.bind(e)).bind(r,e._validate.bind(e)),e.wrapper.on(f+a,e._submit.bind(e)).on(u+a,e._clear.bind(e)).on(p+a,g+y.clear,e._clear.bind(e)),e._changeHandler||(e._changeHandler=e._change.bind(e)),e._model.bind(s,e._changeHandler)},_validateField:function(e){var t=this,i={model:t._model.toJSON(),valid:e.valid,field:e.field,error:e.error,input:e.input};t._toggleFieldErrorState(i.input,!i.valid),t._toggleHint(i.input,!i.valid),t.trigger(d,i)&&e.preventDefault()},_validate:function(e){var t={model:this._model.toJSON(),valid:e.valid,errors:e.errors};this.trigger(r,t)},_change:function(e){var t=e.field,i={field:t,value:this._model[t]};this.trigger(s,i)},_submit:function(e){var t=this._model.toJSON();this.trigger(f,{model:t})&&e.preventDefault()},_clear:function(e){e.preventDefault(),this.clear(),this.trigger(u)},validate:function(){var e=this.validator;if(e)return e.validate()},clear:function(){var e=this,i=e._fields,a=e._model,o=e.editable,l=e.validator.options.validateOnBlur;e.validator.reset(),l&&a.unbind("set").unbind(m);for(var n=0;n<i.length;n+=1){var r=i[n].field,d=e.wrapper.find("[name='"+r+"']"),s=t.widgetInstance(d),p=d.is("input[type=hidden]");(d.is("[data-role='checkboxgroup']")||d.is("[data-role='radiogroup']")||p)&&!d.is(h)||d.val(""),!s&&d.is(h)&&(s=t.widgetInstance(d)),!s&&d.hasClass("k-hidden")&&(s=t.widgetInstance(d.closest(".k-signature"))),s&&(t.ui.Upload&&s instanceof t.ui.Upload?s.clearAllFiles():t.ui.OtpInput&&s instanceof t.ui.OtpInput?(s._emptyValues(),s.value(null)):s.value(null)),e._toggleHint(d,!1),"boolean"==typeof a[r]?(d.val("false"),a.set(r,!1)):p||a.set(r,null)}e.wrapper.find(g+y.fieldError).removeClass(y.fieldError),l&&a.bind("set",o._validateProxy).bind(m,o._validateProxy)},setOptions:function(e){var t=this;t.destroy(),t.wrapper.removeClass(y.horizontal).removeAttr(_).empty(),t.init(t.element,e)},destroy:function(){var e=this;e.wrapper.off(a),e._model&&(e._model.unbind(s,e._changeHandler),e._changeHandler=null),o.fn.destroy.call(e.editable),o.fn.destroy.call(e),e.editable&&(e.editable.destroy(),e.editable=null)}});t.cssProperties.registerPrefix("Form","k-form-"),i.plugin(F),l(!0,F,{styles:y})}(window.kendo.jQuery);var t=kendo;e.__meta__={id:"form",name:"Form",category:"web",description:"The Form widget.",depends:["editable","button"],features:[{id:"form-dropdowns",name:"DropDowns",description:"Support for DropDown editors",depends:["autocomplete","combobox","multiselect","dropdowntree","multicolumncombobox"]},{id:"form-datepickers",name:"DatePickers",description:"Support for DatePicker editors",depends:["dateinput","datepicker","datetimepicker","timepicker"]},{id:"form-inputs",name:"Inputs",description:"Support for Input editors",depends:["numerictextbox","maskedtextbox","switch","rating","slider","colorpicker","radiogroup","checkboxgroup","textbox","textarea","checkbox","otpinput"]},{id:"form-editor",name:"Editor",description:"Support for Editor editor",depends:["editor"]}]},e.default=t,Object.defineProperty(e,"__esModule",{value:!0})}));
//# sourceMappingURL=kendo.form.min.js.map