FileMaster

Edit File: sc-form.js

import{h}from"@stencil/core";import{serialize}from"../../../functions/form";export class ScForm{constructor(){this.novalidate=!1}async getFormData(){return new FormData(this.formElement)}async getFormJson(){return serialize(this.formElement)}async handleChange(){this.scFormChange.emit(serialize(this.formElement))}async submit(){return this.submitForm()}getFormControls(){return[...this.form.querySelectorAll("*")]}async validate(){const e=this.getFormControls().filter((e=>"function"==typeof e.reportValidity));if(!this.novalidate)for(const t of e)if((t.offsetWidth||t.offsetHeight||t.getClientRects().length)&&!await t.reportValidity())return!1;return!0}submitForm(){const e=document.createElement("button");this.formElement&&(e.type="submit",e.style.position="absolute",e.style.width="0",e.style.height="0",e.style.clip="rect(0 0 0 0)",e.style.clipPath="inset(50%)",e.style.overflow="hidden",e.style.whiteSpace="nowrap",this.formElement.append(e),e.click(),e.remove())}render(){return h("div",{key:"3de5fa6a416d0229768193fee88765883f0ce02c",part:"base",class:"form",role:"form"},h("form",{key:"c3b48e94449354c6de5bfcec926bfd37744cd533",part:"form",ref:e=>this.formElement=e,class:"test",onSubmit:async e=>{if(e.preventDefault(),!await this.validate())return!1;this.scSubmit.emit(),this.scFormSubmit.emit()},novalidate:this.novalidate},h("slot",{key:"1fa210ea4699297ca5547b4cf139d36fa06f70b2"})))}static get is(){return"sc-form"}static get encapsulation(){return"shadow"}static get originalStyleUrls(){return{$:["sc-form.scss"]}}static get styleUrls(){return{$:["sc-form.css"]}}static get properties(){return{novalidate:{type:"boolean",mutable:!0,complexType:{original:"boolean",resolved:"boolean",references:{}},required:!1,optional:!1,docs:{tags:[],text:"Prevent the form from validating inputs before submitting."},attribute:"novalidate",reflect:!0,defaultValue:"false"}}}static get events(){return[{method:"scSubmit",name:"scSubmit",bubbles:!0,cancelable:!0,composed:!0,docs:{tags:[],text:"Emitted when the form is submitted. This event will not be emitted if any form control inside of\nit is in an invalid state, unless the form has the `novalidate` attribute. Note that there is never a need to prevent\nthis event, since it doen't send a GET or POST request like native forms. To \"prevent\" submission, use a conditional\naround the XHR request you use to submit the form's data with."},complexType:{original:"void",resolved:"void",references:{}}},{method:"scFormSubmit",name:"scFormSubmit",bubbles:!0,cancelable:!0,composed:!0,docs:{tags:[],text:"Backwards compat."},complexType:{original:"void",resolved:"void",references:{}}},{method:"scFormChange",name:"scFormChange",bubbles:!0,cancelable:!0,composed:!0,docs:{tags:[],text:"Emitted when the form is submitted. This event will not be emitted if any form control inside of\nit is in an invalid state, unless the form has the `novalidate` attribute. Note that there is never a need to prevent\nthis event, since it doen't send a GET or POST request like native forms. To \"prevent\" submission, use a conditional\naround the XHR request you use to submit the form's data with."},complexType:{original:"Object",resolved:"Object",references:{Object:{location:"global",id:"global::Object"}}}}]}static get methods(){return{getFormData:{complexType:{signature:"() => Promise<FormData>",parameters:[],references:{Promise:{location:"global",id:"global::Promise"},FormData:{location:"global",id:"global::FormData"}},return:"Promise<FormData>"},docs:{text:"Serializes all form controls elements and returns a `FormData` object.",tags:[]}},getFormJson:{complexType:{signature:"() => Promise<Record<string, unknown>>",parameters:[],references:{Promise:{location:"global",id:"global::Promise"},Record:{location:"global",id:"global::Record"}},return:"Promise<Record<string, unknown>>"},docs:{text:"",tags:[]}},submit:{complexType:{signature:"() => Promise<void>",parameters:[],references:{Promise:{location:"global",id:"global::Promise"}},return:"Promise<void>"},docs:{text:"",tags:[]}},validate:{complexType:{signature:"() => Promise<boolean>",parameters:[],references:{Promise:{location:"global",id:"global::Promise"}},return:"Promise<boolean>"},docs:{text:"",tags:[]}}}}static get elementRef(){return"form"}static get listeners(){return[{name:"scChange",method:"handleChange",target:void 0,capture:!1,passive:!1}]}}

Back