Merge pull request #153 from erqk/v8

chore: Update docs

docs/assets/docs/v8/form-component/form-component_en.md

@@ -124,6 +124,10 @@ See [Custom Loading](../../v8/custom-loading/custom-loading_en.md).
 
 The event called after form generation complete. The generated `UntypedFormGroup` will be emitted.
 
+### onChange
+
+The event of form value when it's changed by user.
+
 ### optionsLoaded
 
 The event called after all of the options are loaded.

docs/assets/docs/v8/form-component/form-component_zh-TW.md

@@ -124,6 +124,10 @@ submit(): void {
 
 當表單生成完畢時觸發的事件，並將生成的 `UntypeFormGroup` 發送出去。
 
+### onChange
+
+用戶行為導致的表單的值變化事件。
+
 ### optionsLoaded
 
 當所有選項載入完成後觸發。

docs/docs/conditions/conditions_en.md/index.html

@@ -190,6 +190,6 @@ <h3 id="multiple-conditions">Multiple conditions</h3>
 <p><a title="Layout" routerlink href="docs/layout/layout_en.md">Layout</a></p>
 <p><a title="Styling" routerlink href="docs/styling/styling_en.md">Styling</a></p>
 </div></app-navigator-index></div><button _ngcontent-ng-c3809031132 type="button" class="ng-tns-c3809031132-1 fixed z-[1002] bottom-12 left-8 flex lg:hidden items-center justify-center h-16 w-16 bg-[var(--primary-500)] text-white text-lg !rounded-full shadow-[rgba(0,0,0,0.5)] shadow-xl"><i _ngcontent-ng-c3809031132 class="bi bi-layout-text-sidebar mb-1 ng-tns-c3809031132-1"></i></button></div></app-page-docs><!----></div></div></app-root>
-  <script src="runtime.7a5b0628c491a702.js" type="module"></script><script src="polyfills.cdffba540aee9982.js" type="module"></script><script src="scripts.a40176a5d795c96d.js" defer></script><script src="main.37fa3c241126779a.js" type="module"></script>
+  <script src="runtime.7a5b0628c491a702.js" type="module"></script><script src="polyfills.cdffba540aee9982.js" type="module"></script><script src="scripts.a40176a5d795c96d.js" defer></script><script src="main.23b886790db19921.js" type="module"></script>
 
 <script id="ng-state" type="application/json">{"assets/i18n/en.json":{"FEATURES":{"CONDITIONS":"Toggle control status (hidden or disabled) and validators depends on value from other control","CUSTOM_COMPONENTS":"Support custom components","LAYOUT":"Flexible form layout","NESTED_LEVELS":"Create form with unlimited nesting level","VALIDATORS":"Supports Angular built in validators and custom validators","UI_LIBRARY":"Support third party UI libraries"},"GET_STARTED":"Getting started","INTRODUCTION":{"BRIEF":"Generate Angular reactive form dynamically using JSON"},"MENU":{"DOCS":"Docs","PLAYGROUND":"Playground"},"PLAYGROUND":{"TABS":{"CONFIGS":"Configs","FORM":"Form","VALUE":"Value / Errors"},"TEMPLATE":{"NEW":"New"}}},"assets/docs/v8/conditions/conditions_en.md":"# Conditions\r\n\r\nThe conditions will let user to :\r\n\r\n- toggle control’s validators\r\n- toggle control’s visibility\r\n- toggle control’s disabled state\r\n- execute custom function\r\n\r\nThe following example demonstrates the text input is hidden when the checkbox is unchecked.\r\n\r\n\u003Cdoc-form-viewer config-path=\"CONDITIONS_VISIBILITY.EN\">\u003C/doc-form-viewer>\r\n\r\n## Syntax\r\n\r\nThe `conditions` is build up by `NAME`, `GROUP_OPERATOR` and a tupple of `[CONTROL_PATH, OPERATOR, VALUE]`.\r\n\r\n```ts\r\n{\r\n    ...\r\n    \"conditions\": {\r\n      NAME: {\r\n        GROUP_OPERATOR: [\r\n          [CONTROL_PATH, OPERATOR, VALUE]\r\n        ]\r\n      }\r\n    }\r\n  }\r\n```\r\n\r\n### NAME\r\n\r\nThe available `NAME` are listed as below.\r\n\r\n#### Built-in validators\r\n\r\n- `validator.required`\r\n- `validator.requiredTrue`\r\n- `validator.min`\r\n- `validator.max`\r\n- `validator.minLength`\r\n- `validator.maxLength`\r\n- `validator.email`\r\n- `validator.pattern`\r\n\r\n#### Control state\r\n\r\n- `control.disabled`\r\n- `control.hidden`\r\n\r\n#### Custom validator\r\n\r\n- `validators.` + `name`\r\n\r\n#### Custom action\r\n\r\n- Any string that match with the key inside `conditionsActionFuntions`.\r\n\r\n### GROUP_OPERATOR\r\n\r\n`&&`, `||`\r\n\r\nThis is required for every key inside `conditions`. GROUP_OPERATOR accepts tupple or nested GROUP_OPERATOR.\r\n\r\n> Only provide `&&` or `||` at one time. If both are present, only `&&` will be chosen.\r\n\r\n### LEFT, OPERATOR, RIGHT\r\n\r\nThe tupple `[LEFT, OPERATOR, RIGHT]` acts as the `if` statement:\r\n\r\n```tsx\r\n// [\"controlA\", \"===\", \"foo\"]\r\nif (controlA.value === \"foo\") {...}\r\n\r\n// [\"controlA,prop1\", \"===\", \"foo\"]\r\nif (controlA.value.prop1 === \"foo\") {...}\r\n\r\n// [\"groupA.controlA\", \"===\", \"foo\"]\r\nif (groupA.controls.controlA.value === \"foo\") {...}\r\n\r\n// [\"bar\", \"!==\", \"controlB\"]\r\nif (controlB.value !== \"bar\") {...}\r\n```\r\n\r\nThe `OPERATOR` accepts:\r\n\r\n- `===`\r\n- `!==`\r\n- `>=`\r\n- `\u003C=`\r\n- `>`\r\n- `\u003C`\r\n- `includes`\r\n- `notIncludes`\r\n\r\n## Execute custom function\r\n\r\nProvide `conditionsActionFuntions` with key and function pairs. When the condition met, the corresponding function will be executed.\r\n\r\n\u003Cdoc-tab>\r\n\r\n\u003Cdoc-code name=\"HTML\">\r\n\r\n\u003C!-- prettier-ignore -->\r\n```html\r\n\u003Cng-dynamic-json-form\r\n  [configs]=\"configs\"\r\n  [conditionsActionFuntions]=\"customActions\"\r\n>\u003C/ng-dynamic-json-form>\r\n```\r\n\r\n\u003C/doc-code>\r\n\r\n\u003Cdoc-code name=\"TS\">\r\n\r\n```tsx\r\nconfigs = [\r\n  {\r\n    ...\r\n    \"conditions\": {\r\n      \"doA\": {\r\n        \"&&\": [...]\r\n      },\r\n      \"doB\": {\r\n        \"&&\": [...]\r\n      }\r\n    }\r\n  }\r\n];\r\n\r\ncustomActions = {\r\n  doA: () => this._actionA,\r\n  doB: () => this._actionB\r\n}\r\n\r\nprivate _actionA(): void {\r\n  ...\r\n}\r\n\r\nprivate _actionB(): void {\r\n  ...\r\n}\r\n```\r\n\r\n\u003C/doc-code>\r\n\r\n\u003C/doc-tab>\r\n\r\n## Example\r\n\r\n### Toggle visibility\r\n\r\n\u003Cdoc-form-viewer config-path=\"CONDITIONS_VISIBILITY.EN\">\u003C/doc-form-viewer>\r\n\r\n### Toggle validators\r\n\r\nTo toggle validators, they must exists inside `validators`.\r\n\r\n\u003Cdoc-form-viewer config-path=\"CONDITIONS_VALIDATOR.EN\">\u003C/doc-form-viewer>\r\n\r\n### Multiple conditions\r\n\r\n\u003Cdoc-form-viewer config-path=\"CONDITIONS_MULTIPLE.EN\">\u003C/doc-form-viewer>\r\n","assets/docs/v8/index_en.md":"[Getting Started](../v8/getting-started/getting-started_en.md)\r\n\r\n[Configs](../v8/configs/configs_en.md)\r\n\r\n[Form Component](../v8/form-component/form-component_en.md)\r\n\r\n[Input Types](../v8/input-types/input-types_en.md)\r\n\r\n[Input Mask](../v8/input-mask/input-mask_en.md)\r\n\r\n[Validators](../v8/validators/validators_en.md)\r\n\r\n[Conditions](../v8/conditions/conditions_en.md)\r\n\r\n[Options](../v8/options/options_en.md)\r\n\r\n[Props](../v8/props/props_en.md)\r\n\r\n[Custom Components](../v8/custom-components/custom-components_en.md)\r\n\r\n[UI Components](../v8/ui-components/ui-components_en.md)\r\n\r\n[Custom Label](../v8/custom-label/custom-label_en.md)\r\n\r\n[Custom Error](../v8/custom-error/custom-error_en.md)\r\n\r\n[Custom Loading](../v8/custom-loading/custom-loading_en.md)\r\n\r\n[Layout](../v8/layout/layout_en.md)\r\n\r\n[Styling](../v8/styling/styling_en.md)\r\n"}</script></body></html>

docs/docs/conditions/conditions_zh-TW.md/index.html

@@ -190,6 +190,6 @@ <h3 id="多個條件">多個條件</h3>
 <p><a title="佈局" routerlink href="docs/layout/layout_zh-TW.md">佈局</a></p>
 <p><a title="樣式" routerlink href="docs/styling/styling_zh-TW.md">樣式</a></p>
 </div></app-navigator-index></div><button _ngcontent-ng-c3809031132 type="button" class="ng-tns-c3809031132-1 fixed z-[1002] bottom-12 left-8 flex lg:hidden items-center justify-center h-16 w-16 bg-[var(--primary-500)] text-white text-lg !rounded-full shadow-[rgba(0,0,0,0.5)] shadow-xl"><i _ngcontent-ng-c3809031132 class="bi bi-layout-text-sidebar mb-1 ng-tns-c3809031132-1"></i></button></div></app-page-docs><!----></div></div></app-root>
-  <script src="runtime.7a5b0628c491a702.js" type="module"></script><script src="polyfills.cdffba540aee9982.js" type="module"></script><script src="scripts.a40176a5d795c96d.js" defer></script><script src="main.37fa3c241126779a.js" type="module"></script>
+  <script src="runtime.7a5b0628c491a702.js" type="module"></script><script src="polyfills.cdffba540aee9982.js" type="module"></script><script src="scripts.a40176a5d795c96d.js" defer></script><script src="main.23b886790db19921.js" type="module"></script>
 
 <script id="ng-state" type="application/json">{"assets/i18n/zh-TW.json":{"FEATURES":{"CONDITIONS":"根據其他控制器的值切換當前控制器的狀態（隱藏或禁用）和驗證器","CUSTOM_COMPONENTS":"支援自訂元件","LAYOUT":"靈活的表單樣式和佈局","NESTED_LEVELS":"建立不限巢狀級數的表單","VALIDATORS":"支援 Angular 內建驗證器、自訂驗證器","UI_LIBRARY":"支援第三方 UI 套件"},"GET_STARTED":"開始","INTRODUCTION":{"BRIEF":"使用 JSON 動態生成 Angular 表單"},"MENU":{"DOCS":"文件","PLAYGROUND":"玩沙場"},"PLAYGROUND":{"TABS":{"CONFIGS":"設定","FORM":"表單","VALUE":"值 / 錯誤"},"TEMPLATE":{"NEW":"新增"}}},"assets/docs/v8/conditions/conditions_zh-TW.md":"# 條件\r\n\r\n使用條件可處理一下情況：\r\n\r\n- 切換欄位的驗證器\r\n- 切換欄位的顯示\r\n- 切換欄位的禁用狀態\r\n- 執行自訂動作\r\n\r\n以下例子顯示，當 checkbox 取消勾選之後，則隱藏 input。\r\n\r\n\u003Cdoc-form-viewer config-path=\"CONDITIONS_VISIBILITY.ZH-TW\">\u003C/doc-form-viewer>\r\n\r\n## 語法\r\n\r\n`conditions` 由 `NAME`、`GROUP_OPERATOR` 和一個 tupple `[CONTROL_PATH, OPERATOR, VALUE]` 組成。\r\n\r\n```ts\r\n{\r\n    ...\r\n    \"conditions\": {\r\n      NAME: {\r\n        GROUP_OPERATOR: [\r\n          [CONTROL_PATH, OPERATOR, VALUE]\r\n        ]\r\n      }\r\n    }\r\n  }\r\n```\r\n\r\n### NAME\r\n\r\n以下為可用的 `NAME` 列表。\r\n\r\n#### 內建驗證器\r\n\r\n- `validator.required`\r\n- `validator.requiredTrue`\r\n- `validator.min`\r\n- `validator.max`\r\n- `validator.minLength`\r\n- `validator.maxLength`\r\n- `validator.email`\r\n- `validator.pattern`\r\n\r\n#### 控制器狀態\r\n\r\n- `control.disabled`\r\n- `control.hidden`\r\n\r\n#### 自訂驗證器\r\n\r\n- `validators.` + `name`\r\n\r\n#### 自訂動作\r\n\r\n- `conditionsActionFuntions` 內對應的 key 字串\r\n\r\n### GROUP_OPERATOR\r\n\r\n`&&`, `||`\r\n\r\n每一個 `conditions` 的 key 都必須含有至少一個 GROUP_OPERATOR。可接受 tupple 或巢狀 GROUP_OPERATOR。\r\n\r\n> `&&` or `||` 只需則一，若同時提供，只有 `&&` 會被使用。\r\n\r\n### LEFT, OPERATOR, RIGHT\r\n\r\nTupple `[LEFT, OPERATOR, RIGHT]` 的作用是作為 `if` 表達式：\r\n\r\n```tsx\r\n// [\"controlA\", \"===\", \"foo\"]\r\nif (controlA.value === \"foo\") {...}\r\n\r\n// [\"controlA,prop1\", \"===\", \"foo\"]\r\nif (controlA.value.prop1 === \"foo\") {...}\r\n\r\n// [\"groupA.controlA\", \"===\", \"foo\"]\r\nif (groupA.controls.controlA.value === \"foo\") {...}\r\n\r\n// [\"bar\", \"!==\", \"controlB\"]\r\nif (controlB.value !== \"bar\") {...}\r\n```\r\n\r\n可使用的 `OPERATOR`：\r\n\r\n- `===`\r\n- `!==`\r\n- `>=`\r\n- `\u003C=`\r\n- `>`\r\n- `\u003C`\r\n- `includes`\r\n- `notIncludes`\r\n\r\n## 執行自訂動作\r\n\r\n將 key 和對應的 function 傳入 `conditionsActionFuntions`。當條件達成，相對於的 function 就會自動被執行。\r\n\r\n\u003Cdoc-tab>\r\n\r\n\u003Cdoc-code name=\"HTML\">\r\n\r\n\u003C!-- prettier-ignore -->\r\n```html\r\n\u003Cng-dynamic-json-form\r\n  [configs]=\"configs\"\r\n  [conditionsActionFuntions]=\"customActions\"\r\n>\u003C/ng-dynamic-json-form>\r\n```\r\n\r\n\u003C/doc-code>\r\n\r\n\u003Cdoc-code name=\"TS\">\r\n\r\n```tsx\r\nconfigs = [\r\n  {\r\n    ...\r\n    \"conditions\": {\r\n      \"doA\": {\r\n        \"&&\": [...]\r\n      },\r\n      \"doB\": {\r\n        \"&&\": [...]\r\n      }\r\n    }\r\n  }\r\n];\r\n\r\ncustomActions = {\r\n  doA: () => this._actionA,\r\n  doB: () => this._actionB\r\n}\r\n\r\nprivate _actionA(): void {\r\n  ...\r\n}\r\n\r\nprivate _actionB(): void {\r\n  ...\r\n}\r\n```\r\n\r\n\u003C/doc-code>\r\n\r\n\u003C/doc-tab>\r\n\r\n## 例子\r\n\r\n### 切換顯示狀態\r\n\r\n\u003Cdoc-form-viewer config-path=\"CONDITIONS_VISIBILITY.ZH-TW\">\u003C/doc-form-viewer>\r\n\r\n### 切換驗證器\r\n\r\n若要切換驗證器，該驗證器必須存在於 `validators` 陣列內。\r\n\r\n\u003Cdoc-form-viewer config-path=\"CONDITIONS_VALIDATOR.ZH-TW\">\u003C/doc-form-viewer>\r\n\r\n### 多個條件\r\n\r\n\u003Cdoc-form-viewer config-path=\"CONDITIONS_MULTIPLE.ZH-TW\">\u003C/doc-form-viewer>\r\n","assets/docs/v8/index_zh-TW.md":"[開始](../v8/getting-started/getting-started_zh-TW.md)\r\n\r\n[設定](../v8/configs/configs_zh-TW.md)\r\n\r\n[表單元件](../v8/form-component/form-component_zh-TW.md)\r\n\r\n[欄位類型](../v8/input-types/input-types_zh-TW.md)\r\n\r\n[輸入遮罩](../v8/input-mask/input-mask_zh-TW.md)\r\n\r\n[驗證器](../v8/validators/validators_zh-TW.md)\r\n\r\n[條件](../v8/conditions/conditions_zh-TW.md)\r\n\r\n[選項](../v8/options/options_zh-TW.md)\r\n\r\n[Props](../v8/props/props_zh-TW.md)\r\n\r\n[自訂元件](../v8/custom-components/custom-components_zh-TW.md)\r\n\r\n[UI 元件](../v8/ui-components/ui-components_zh-TW.md)\r\n\r\n[自訂標題](../v8/custom-label/custom-label_zh-TW.md)\r\n\r\n[自訂錯誤](../v8/custom-error/custom-error_zh-TW.md)\r\n\r\n[自訂 Loading](../v8/custom-loading/custom-loading_zh-TW.md)\r\n\r\n[佈局](../v8/layout/layout_zh-TW.md)\r\n\r\n[樣式](../v8/styling/styling_zh-TW.md)\r\n"}</script></body></html>

docs/docs/configs/configs_en.md/index.html

@@ -111,6 +111,6 @@ <h4 id="validators">validators</h4>
 <p><a title="Layout" routerlink href="docs/layout/layout_en.md">Layout</a></p>
 <p><a title="Styling" routerlink href="docs/styling/styling_en.md">Styling</a></p>
 </div></app-navigator-index></div><button _ngcontent-ng-c3809031132 type="button" class="ng-tns-c3809031132-1 fixed z-[1002] bottom-12 left-8 flex lg:hidden items-center justify-center h-16 w-16 bg-[var(--primary-500)] text-white text-lg !rounded-full shadow-[rgba(0,0,0,0.5)] shadow-xl"><i _ngcontent-ng-c3809031132 class="bi bi-layout-text-sidebar mb-1 ng-tns-c3809031132-1"></i></button></div></app-page-docs><!----></div></div></app-root>
-  <script src="runtime.7a5b0628c491a702.js" type="module"></script><script src="polyfills.cdffba540aee9982.js" type="module"></script><script src="scripts.a40176a5d795c96d.js" defer></script><script src="main.37fa3c241126779a.js" type="module"></script>
+  <script src="runtime.7a5b0628c491a702.js" type="module"></script><script src="polyfills.cdffba540aee9982.js" type="module"></script><script src="scripts.a40176a5d795c96d.js" defer></script><script src="main.23b886790db19921.js" type="module"></script>
 
 <script id="ng-state" type="application/json">{"assets/i18n/en.json":{"FEATURES":{"CONDITIONS":"Toggle control status (hidden or disabled) and validators depends on value from other control","CUSTOM_COMPONENTS":"Support custom components","LAYOUT":"Flexible form layout","NESTED_LEVELS":"Create form with unlimited nesting level","VALIDATORS":"Supports Angular built in validators and custom validators","UI_LIBRARY":"Support third party UI libraries"},"GET_STARTED":"Getting started","INTRODUCTION":{"BRIEF":"Generate Angular reactive form dynamically using JSON"},"MENU":{"DOCS":"Docs","PLAYGROUND":"Playground"},"PLAYGROUND":{"TABS":{"CONFIGS":"Configs","FORM":"Form","VALUE":"Value / Errors"},"TEMPLATE":{"NEW":"New"}}},"assets/docs/v8/configs/configs_en.md":"# Configs\r\n\r\nThe configuration to generate form.\r\n\r\n## API\r\n\r\n### FormControlConfig\r\n\r\n```tsx\r\nexport interface FormControlConfig {\r\n  formControlName: string;\r\n  conditions?: Conditions;\r\n  children?: FormControlConfig[];\r\n  description?: string;\r\n  props?: any;\r\n  hidden?: boolean;\r\n  label?: string;\r\n  layout?: FormLayout;\r\n  inputMask?: FactoryArg;\r\n  options?: FormControlOptions;\r\n  readonly?: boolean;\r\n  type?: FormControlType;\r\n  value?: any;\r\n  validators?: ValidatorConfig[];\r\n}\r\n```\r\n\r\n#### formControlName\r\n\r\nThe form control name of this control. Should be unique.\r\n\r\n- All the spaces will be replaced by `_` automatically.\r\n- All the `.` and `,` characters will be removed automatically.\r\n\r\n#### conditions\r\n\r\nSee [Conditions](../../v8/conditions/conditions_en.md).\r\n\r\n#### children\r\n\r\nAn array of `FormControlConfig`, use this to create FormGroup for this control.\r\n\r\n#### description\r\n\r\nDescription for this input.\r\n\r\n#### props\r\n\r\nUse to bind properties and attributes to the target component or the input element.\r\n\r\n#### hidden\r\n\r\nDon't render this input in the DOM.\r\n\r\n#### label\r\n\r\nThe label of this input.\r\n\r\n#### layout\r\n\r\nSee [Layout](../../v8/layout/layout_en.md).\r\n\r\n#### inputMask\r\n\r\nSee [Input Mask](../../v8/input-mask/input-mask_en.md).\r\n\r\n#### options\r\n\r\nSee [Options](../../v8/options/options_en.md).\r\n\r\n#### readonly\r\n\r\nA `readonly` class will be added to the host element. Can use to disable user to interact with this input.\r\n\r\n#### type\r\n\r\nSee [Input Types](../../v8/input-types/input-types_en.md).\r\n\r\n#### value\r\n\r\nDefault value of this control.\r\n\r\n#### validators\r\n\r\nSee [Validators](../../v8/validators/validators_en.md).\r\n","assets/docs/v8/index_en.md":"[Getting Started](../v8/getting-started/getting-started_en.md)\r\n\r\n[Configs](../v8/configs/configs_en.md)\r\n\r\n[Form Component](../v8/form-component/form-component_en.md)\r\n\r\n[Input Types](../v8/input-types/input-types_en.md)\r\n\r\n[Input Mask](../v8/input-mask/input-mask_en.md)\r\n\r\n[Validators](../v8/validators/validators_en.md)\r\n\r\n[Conditions](../v8/conditions/conditions_en.md)\r\n\r\n[Options](../v8/options/options_en.md)\r\n\r\n[Props](../v8/props/props_en.md)\r\n\r\n[Custom Components](../v8/custom-components/custom-components_en.md)\r\n\r\n[UI Components](../v8/ui-components/ui-components_en.md)\r\n\r\n[Custom Label](../v8/custom-label/custom-label_en.md)\r\n\r\n[Custom Error](../v8/custom-error/custom-error_en.md)\r\n\r\n[Custom Loading](../v8/custom-loading/custom-loading_en.md)\r\n\r\n[Layout](../v8/layout/layout_en.md)\r\n\r\n[Styling](../v8/styling/styling_en.md)\r\n"}</script></body></html>