Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →
@pap-it/templates-form-element
Advanced tools
@pap-it/templates-form-element - npm Package Compare versions
Comparing version 1.0.19 to 1.0.20
@@ -14,2 +14,3 @@ import { CustomElement, CustomElementSetting } from "@pap-it/system-utils"; | ||
| formDisabledCallback(disabled: boolean): void; | ||
| formAssociatedCallback(form: HTMLFormElement): void; | ||
| formStateRestoreCallback(state: any, mode: any): void; | ||
@@ -23,3 +24,3 @@ checkValidity(): boolean; | ||
| protected connectElement(element: HTMLElement): void; | ||
| protected updateform(value: string): void; | ||
| protected updateform(value?: string): void; | ||
| protected validateElement(): void; | ||
@@ -26,0 +27,0 @@ protected debouncedchange(): void; |
@@ -1,1 +0,1 @@ | ||
| "use strict";import{__decorate as i}from"tslib";import{property as n,debounce as l,CustomElement as r}from"@pap-it/system-utils";export class FormElement extends r{constructor(e){super(e),this.defaultinternal=!1,this.name="missing-name",this._internals=this.attachInternals(),this.debouncedchange=l(this.debouncedchange,120)}firstRender(){super.firstRender(),this.defaultValue===void 0&&(this.defaultinternal=!0,this.defaultValue=this.value)}formDisabledCallback(e){this.disabled=e}formStateRestoreCallback(e,a){console.log("[field]: formStateRestoreCallback",{state:e,mode:a})}checkValidity(){var e;return this._internals===void 0?!0:(e=this._internals)===null||e===void 0?void 0:e.checkValidity()}reportValidity(){var e;return this._internals===void 0?!0:(e=this._internals)===null||e===void 0?void 0:e.reportValidity()}get validity(){return this.element&&"validity"in this.element?this.element.validity:this._internals===void 0?{valid:!0}:this._internals.validity}get validationMessage(){return this.element&&"validationMessage"in this.element?this.element.validationMessage:this._internals===void 0?"":this._internals.validationMessage}setValidity(e,a,s){!this._internals!==void 0&&this._internals.setValidity(e,a,s||void 0)}formResetCallback(){this.value=this.defaultValue,this.element&&"value"in this.element&&(this.element.value=this.value||"")}connectElement(e){this.element||(this.element=e)}updateform(e){this._internals!==void 0&&this._internals.setFormValue(e)}validateElement(){}debouncedchange(){this.dispatchEvent(new Event("change")),this.validateElement()}}FormElement.formAssociated=!0,i([n({attribute:"default-value",after:function(t){this.defaultinternal||(this.value=t),this.defaultinternal=!1}})],FormElement.prototype,"defaultValue",void 0),i([n({type:Boolean,after:function(t){t?this.setAttribute("aria-disabled","true"):this.setAttribute("aria-disabled","false")}})],FormElement.prototype,"disabled",void 0),i([n({rerender:!1})],FormElement.prototype,"name",void 0),i([n({after:function(t){this.updateform(t),this.debouncedchange()}})],FormElement.prototype,"value",void 0); | ||
| "use strict";import{__decorate as i}from"tslib";import{property as n,debounce as s,CustomElement as r}from"@pap-it/system-utils";export class FormElement extends r{constructor(e){super(e),this.defaultinternal=!1,this.name="missing-name",this._internals=this.attachInternals(),this.debouncedchange=s(this.debouncedchange,120)}firstRender(){super.firstRender(),this.defaultValue===void 0&&(this.defaultinternal=!0,this.defaultValue=this.value)}formDisabledCallback(e){this.disabled=e}formAssociatedCallback(e){}formStateRestoreCallback(e,a){console.log("[field]: formStateRestoreCallback",{state:e,mode:a})}checkValidity(){var e;return this._internals===void 0?!0:(e=this._internals)===null||e===void 0?void 0:e.checkValidity()}reportValidity(){var e;return this._internals===void 0?!0:(e=this._internals)===null||e===void 0?void 0:e.reportValidity()}get validity(){return this.element&&"validity"in this.element?this.element.validity:this._internals===void 0?{valid:!0}:this._internals.validity}get validationMessage(){return this.element&&"validationMessage"in this.element?this.element.validationMessage:this._internals===void 0?"":this._internals.validationMessage}setValidity(e,a,l){!this._internals!==void 0&&this._internals.setValidity(e,a,l||void 0)}formResetCallback(){this.value=this.defaultValue,this.element&&"value"in this.element&&(this.element.value=this.value||"")}connectElement(e){this.element||(this.element=e)}updateform(e){this._internals!==void 0&&this._internals.setFormValue(e||null)}validateElement(){}debouncedchange(){this.dispatchEvent(new Event("change")),this.validateElement()}}FormElement.formAssociated=!0,i([n({attribute:"default-value",after:function(t){this.defaultinternal||(this.value=t),this.defaultinternal=!1}})],FormElement.prototype,"defaultValue",void 0),i([n({type:Boolean,after:function(t){t?this.setAttribute("aria-disabled","true"):this.setAttribute("aria-disabled","false")}})],FormElement.prototype,"disabled",void 0),i([n({rerender:!1})],FormElement.prototype,"name",void 0),i([n({after:function(t){this.updateform(t),this.debouncedchange()}})],FormElement.prototype,"value",void 0); |
| { | ||
| "name": "@pap-it/templates-form-element", | ||
| "version": "1.0.19", | ||
| "version": "1.0.20", | ||
| "scripts": { | ||
@@ -10,3 +10,3 @@ "init": "sh .scripts/init.sh", | ||
| "watch": ".scripts/watch.sh", | ||
| "manual-publish": "sh .scripts/publish.sh", | ||
| "publish:manual": "sh .scripts/publish.sh", | ||
| "preversion": "sh .scripts/preversion.sh", | ||
@@ -44,7 +44,7 @@ "postversion": "sh .scripts/postversion.sh", | ||
| "dependencies": { | ||
| "@pap-it/system-utils": "1.0.13", | ||
| "@pap-it/system-utils": "1.0.14", | ||
| "@pap-it/system-react": "0.0.8" | ||
| }, | ||
| "devDependencies": { | ||
| "@pap-it/system-doc": "1.0.27", | ||
| "@pap-it/system-doc": "1.0.28", | ||
| "esbuild": "^0.17.18", | ||
@@ -51,0 +51,0 @@ "tslib": "^2.5.0", |
@@ -5,13 +5,57 @@ # FormElement | ||
| Version: Version: Version: 1.0.19 | ||
| Version: Version: 1.0.20 | ||
| ## Use Case | ||
| ### installation | ||
| ```bash | ||
| npm install @pap-it/templates-form-element | ||
| ``` | ||
| ### to use in **html** | ||
| ```html | ||
| <script type="module" defer> | ||
| import "@pap-it/templates-form-element/wc" | ||
| </script> | ||
| <pap-form-element-template></pap-form-element-template> | ||
| ``` | ||
| ### to use in **react** | ||
| ```jsx | ||
| import { FormElement } from "@pap-it/templates-form-element/react"; | ||
| function Component() { | ||
| return ( | ||
| <FormElement /> | ||
| ) | ||
| } | ||
| ``` | ||
| ## Development | ||
| Development servers can be started and should all exist inside `"views"` folder | ||
| Development takes place within the `src` folder. To add a new subcomponent, use the command `npm run component:add`. This command updates the `.env` file, creates a view folder, and adds a subfolder in the `components` folder (creating it if it doesn't exist) inside `src` with all the necessary files. | ||
| ## Scripts | ||
| Styling is managed in the `style.scss` file, which automatically generates a `style.ts` file for use in the component. | ||
| ## Viewing | ||
| To view the component, run `npm start`. This command is equivalent to `npm run start demo` and launches the development server for the demo folder located within the `views` folder. This allows you to preview your component during development. | ||
| ## Assets | ||
| All assets required by the component, such as icons and images for translations, should be placed in the `assets` folder. This folder will already include an `icons` and `translations` folder with an `en.json` file for English translations. Use this structure to organize translations and make them easily accessible for other projects. | ||
| For assets used solely for display or demo purposes, create a `public` folder under the relevant directory inside the `views` folder. These assets are not included in the component package. | ||
| ## Commands | ||
| - **build**: Builds the component in development mode. Use the `--prod` flag (`npm run build -- --prod`) for a production build, which includes minification. | ||
| - **watch**: Watches for changes to the component files and rebuilds them automatically without starting the development server. | ||
| - **start**: Starts the development server for a specific demo. The target folder within the `views` directory must contain an `index.html` file. Usage example: `npm run start --name=<folder>`. | ||
| - **analyse**: Generates a comprehensive analysis file, mainly useful for React scripts and potentially for generating pages. The analysis file is only generated if it does not exist, unless the `--force` flag is used. Optional flags include `--verbose` and `--force`. | ||
| - **react**: Generates the necessary React code based on the web component code, including any subcomponents. The generated code will not overwrite existing files, allowing for manual customization. Flags: `--verbose` & `--force`. |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by35.36%
10080
- Lines of code
- increased by1.06%
95
- Number of lines in readme file
- increased by258.82%
61
Dependency changes
+ Added@pap-it/system-utils@1.0.14(transitive)
- Removed@pap-it/system-utils@1.0.13(transitive)
Updated@pap-it/system-utils@1.0.14