diff --git a/packages/stencil-library/custom-elements.json b/packages/stencil-library/custom-elements.json index 0681df567..427e6e8dd 100644 --- a/packages/stencil-library/custom-elements.json +++ b/packages/stencil-library/custom-elements.json @@ -383,7 +383,18 @@ "required": false } ], - "members": [], + "members": [ + { + "kind": "field", + "name": "nextStateHandler", + "type": { + "text": "(currentState: CheckedState) => CheckedState" + }, + "description": "A function that will be called when the checkbox needs to change state and returns the next state.\nCan be used to customize the order of the states when the component is clicked.\nOnly called if you also use the tri-state feature (useIntermediate).", + "default": "this.defaultNextStateHandler", + "required": false + } + ], "events": [ { "name": "checkedchange", @@ -1660,13 +1671,32 @@ } ], "members": [ + { + "kind": "field", + "name": "customizeOptions", + "type": { + "text": "(options: Config) => Config" + }, + "description": "Customize the options before initializing the editor, will have all the default options merged with 'options' if passed.\nThis is called last after merging default options with your custom 'options' and just before initializing the editor.", + "required": false + }, { "kind": "field", "name": "options", "type": { "text": "Config" }, - "description": "Optional configuration for Jodit, see https://xdsoft.net/jodit/docs/classes/config.Config.html", + "description": "Optional configuration for Jodit, see https://xdsoft.net/jodit/docs/classes/config.Config.html\nThis will be merged with the default options and passed to the editor.\nIf you prefer to not have to pass a full config object,\nyou can use 'customizeOptions' to modify the options before initializing the editor\ninstead of providing all options here.", + "required": false + }, + { + "kind": "field", + "name": "plugins", + "type": { + "text": "{ name: string; callback: (editor: Jodit) => void; }[]" + }, + "description": "Allows registering your own plugins.\nThe callback will be called with the editor instance as the only argument durig initialization.\nAll other behavior needs to be implemented in the plugin itself using editor.on(\"eventname\").\nSee https://xdsoft.net/jodit/examples/plugin/custom_plugin.html for an example.\nCreating a plugin does NOT automatically add it to the toolbar, you need to do that yourself in 'options' or 'customizeOptions',\nSee https://xdsoft.net/jodit/examples/toolbar/custom_button.html for an example.", + "default": "[]", "required": false } ], @@ -2424,24 +2454,6 @@ "cssParts": [] } ] - }, - { - "kind": "javascript-module", - "path": "src/components/test-form/test-form.tsx", - "declarations": [ - { - "kind": "class", - "name": "test-form.tsx", - "tagName": "test-form", - "description": "", - "attributes": [], - "members": [], - "events": [], - "slots": [], - "cssProperties": [], - "cssParts": [] - } - ] } ] } \ No newline at end of file diff --git a/packages/stencil-library/package.json b/packages/stencil-library/package.json index f34427601..6f62530cd 100644 --- a/packages/stencil-library/package.json +++ b/packages/stencil-library/package.json @@ -67,7 +67,7 @@ "react-dom": "^18.2.0", "rollup-plugin-node-polyfills": "^0.2.1", "storybook": "^8.3.2", - "typescript": "5.6.3", + "typescript": "5.7.2", "typescript-debounce-decorator": "^0.0.18" }, "dependencies": { diff --git a/packages/stencil-library/src/components.d.ts b/packages/stencil-library/src/components.d.ts index 329615c91..e6d38ec6b 100644 --- a/packages/stencil-library/src/components.d.ts +++ b/packages/stencil-library/src/components.d.ts @@ -17,6 +17,7 @@ import { IRole } from "./components/dnn-permissions-grid/role-interface"; import { ILocalization } from "./components/dnn-permissions-grid/localization-interface"; import { ISearchedUser } from "./components/dnn-permissions-grid/searched-user-interface"; import { Config } from "jodit/types/config"; +import { Jodit } from "jodit"; import { DnnToggleChangeEventDetail } from "./components/dnn-toggle/toggle-interface"; export { DnnAutocompleteSuggestion, NeedMoreItemsEventArgs } from "./components/dnn-autocomplete/types"; export { CheckedState } from "./components/dnn-checkbox/types"; @@ -30,6 +31,7 @@ export { IRole } from "./components/dnn-permissions-grid/role-interface"; export { ILocalization } from "./components/dnn-permissions-grid/localization-interface"; export { ISearchedUser } from "./components/dnn-permissions-grid/searched-user-interface"; export { Config } from "jodit/types/config"; +export { Jodit } from "jodit"; export { DnnToggleChangeEventDetail } from "./components/dnn-toggle/toggle-interface"; export namespace Components { interface DnnAutocomplete { @@ -141,6 +143,10 @@ export namespace Components { * The name to show in the formData (if using forms). */ "name": string; + /** + * A function that will be called when the checkbox needs to change state and returns the next state. Can be used to customize the order of the states when the component is clicked. Only called if you also use the tri-state feature (useIntermediate). + */ + "nextStateHandler": (currentState: CheckedState) => CheckedState; /** * Defines if clicking the checkbox will go through the intermediate state between checked and unchecked (tri-state) */ @@ -550,14 +556,22 @@ export namespace Components { "value": number; } interface DnnRichtext { + /** + * Customize the options before initializing the editor, will have all the default options merged with 'options' if passed. This is called last after merging default options with your custom 'options' and just before initializing the editor. + */ + "customizeOptions": (options: Config) => Config; /** * Name of the field when used in a form. */ "name": string; /** - * Optional configuration for Jodit, see https://xdsoft.net/jodit/docs/classes/config.Config.html + * Optional configuration for Jodit, see https://xdsoft.net/jodit/docs/classes/config.Config.html This will be merged with the default options and passed to the editor. If you prefer to not have to pass a full config object, you can use 'customizeOptions' to modify the options before initializing the editor instead of providing all options here. */ "options": Config; + /** + * Allows registering your own plugins. The callback will be called with the editor instance as the only argument durig initialization. All other behavior needs to be implemented in the plugin itself using editor.on("eventname"). See https://xdsoft.net/jodit/examples/plugin/custom_plugin.html for an example. Creating a plugin does NOT automatically add it to the toolbar, you need to do that yourself in 'options' or 'customizeOptions', See https://xdsoft.net/jodit/examples/toolbar/custom_button.html for an example. + */ + "plugins": {name: string, callback: (editor: Jodit) => void}[]; /** * Sets the value of the content of the editor. */ @@ -1435,6 +1449,10 @@ declare namespace LocalJSX { * The name to show in the formData (if using forms). */ "name"?: string; + /** + * A function that will be called when the checkbox needs to change state and returns the next state. Can be used to customize the order of the states when the component is clicked. Only called if you also use the tri-state feature (useIntermediate). + */ + "nextStateHandler"?: (currentState: CheckedState) => CheckedState; /** * Fires up when the checkbox checked property changes. */ @@ -1853,6 +1871,10 @@ declare namespace LocalJSX { "value"?: number; } interface DnnRichtext { + /** + * Customize the options before initializing the editor, will have all the default options merged with 'options' if passed. This is called last after merging default options with your custom 'options' and just before initializing the editor. + */ + "customizeOptions"?: (options: Config) => Config; /** * Name of the field when used in a form. */ @@ -1866,9 +1888,13 @@ declare namespace LocalJSX { */ "onValueInput"?: (event: DnnRichtextCustomEvent) => void; /** - * Optional configuration for Jodit, see https://xdsoft.net/jodit/docs/classes/config.Config.html + * Optional configuration for Jodit, see https://xdsoft.net/jodit/docs/classes/config.Config.html This will be merged with the default options and passed to the editor. If you prefer to not have to pass a full config object, you can use 'customizeOptions' to modify the options before initializing the editor instead of providing all options here. */ "options"?: Config; + /** + * Allows registering your own plugins. The callback will be called with the editor instance as the only argument durig initialization. All other behavior needs to be implemented in the plugin itself using editor.on("eventname"). See https://xdsoft.net/jodit/examples/plugin/custom_plugin.html for an example. Creating a plugin does NOT automatically add it to the toolbar, you need to do that yourself in 'options' or 'customizeOptions', See https://xdsoft.net/jodit/examples/toolbar/custom_button.html for an example. + */ + "plugins"?: {name: string, callback: (editor: Jodit) => void}[]; /** * Sets the value of the content of the editor. */ diff --git a/packages/stencil-library/src/components/dnn-button/readme.md b/packages/stencil-library/src/components/dnn-button/readme.md index 0691d30cc..ec2a5067a 100644 --- a/packages/stencil-library/src/components/dnn-button/readme.md +++ b/packages/stencil-library/src/components/dnn-button/readme.md @@ -87,7 +87,6 @@ - [dnn-color-input](../dnn-color-input) - [dnn-example-form](../examples/dnn-example-form) - [dnn-permissions-grid](../dnn-permissions-grid) - - [test-form](../test-form) ### Depends on @@ -101,7 +100,6 @@ graph TD; dnn-color-input --> dnn-button dnn-example-form --> dnn-button dnn-permissions-grid --> dnn-button - test-form --> dnn-button style dnn-button fill:#f9f,stroke:#333,stroke-width:4px ``` diff --git a/packages/stencil-library/src/components/dnn-checkbox/dnn-checkbox.tsx b/packages/stencil-library/src/components/dnn-checkbox/dnn-checkbox.tsx index 53acdf9ee..11df0e864 100644 --- a/packages/stencil-library/src/components/dnn-checkbox/dnn-checkbox.tsx +++ b/packages/stencil-library/src/components/dnn-checkbox/dnn-checkbox.tsx @@ -28,6 +28,12 @@ export class DnnCheckbox { /** The name to show in the formData (if using forms). */ @Prop() name: string; + /** A function that will be called when the checkbox needs to change state and returns the next state. + * Can be used to customize the order of the states when the component is clicked. + * Only called if you also use the tri-state feature (useIntermediate). + */ + @Prop() nextStateHandler: (currentState: CheckedState) => CheckedState = this.defaultNextStateHandler; + /** Fires up when the checkbox checked property changes. */ @Event() checkedchange: EventEmitter<"checked" | "unchecked" | "intermediate">; @@ -63,6 +69,17 @@ export class DnnCheckbox { this.checked = this.originalChecked; } + private defaultNextStateHandler(currentState: CheckedState): CheckedState { + switch (currentState) { + case "checked": + return "intermediate"; + case "intermediate": + return "unchecked"; + case "unchecked": + return "checked"; + } + } + private changeState(): void { if (!this.useIntermediate){ switch (this.checked) { @@ -79,19 +96,8 @@ export class DnnCheckbox { this.checkedchange.emit(this.checked); return; } - switch (this.checked) { - case "checked": - this.checked = "intermediate"; - break; - case "intermediate": - this.checked = "unchecked"; - break; - case "unchecked": - this.checked = "checked"; - break; - default: - break; - } + + this.checked = this.nextStateHandler(this.checked); this.checkedchange.emit(this.checked); } diff --git a/packages/stencil-library/src/components/dnn-checkbox/readme.md b/packages/stencil-library/src/components/dnn-checkbox/readme.md index e7d47d364..d834cae8d 100644 --- a/packages/stencil-library/src/components/dnn-checkbox/readme.md +++ b/packages/stencil-library/src/components/dnn-checkbox/readme.md @@ -36,12 +36,13 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ----------------- | ------------------ | ----------------------------------------------------------------------------------------------------------------- | -------------------------------------------- | ------------- | -| `checked` | `checked` | Defines if the checkbox is checked (true) or unchecked (false) or in an intermediate state (undefined) | `"checked" \| "intermediate" \| "unchecked"` | `"unchecked"` | -| `name` | `name` | The name to show in the formData (if using forms). | `string` | `undefined` | -| `useIntermediate` | `use-intermediate` | Defines if clicking the checkbox will go through the intermediate state between checked and unchecked (tri-state) | `boolean` | `false` | -| `value` | `value` | The value for this checkbox (not to be confused with its checked state). | `string` | `"on"` | +| Property | Attribute | Description | Type | Default | +| ------------------ | ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------- | ------------------------------ | +| `checked` | `checked` | Defines if the checkbox is checked (true) or unchecked (false) or in an intermediate state (undefined) | `"checked" \| "intermediate" \| "unchecked"` | `"unchecked"` | +| `name` | `name` | The name to show in the formData (if using forms). | `string` | `undefined` | +| `nextStateHandler` | -- | A function that will be called when the checkbox needs to change state and returns the next state. Can be used to customize the order of the states when the component is clicked. Only called if you also use the tri-state feature (useIntermediate). | `(currentState: CheckedState) => CheckedState` | `this.defaultNextStateHandler` | +| `useIntermediate` | `use-intermediate` | Defines if clicking the checkbox will go through the intermediate state between checked and unchecked (tri-state) | `boolean` | `false` | +| `value` | `value` | The value for this checkbox (not to be confused with its checked state). | `string` | `"on"` | ## Events diff --git a/packages/stencil-library/src/components/dnn-permissions-grid/dnn-permissions-grid.tsx b/packages/stencil-library/src/components/dnn-permissions-grid/dnn-permissions-grid.tsx index bb69536e9..fdde8b4fc 100644 --- a/packages/stencil-library/src/components/dnn-permissions-grid/dnn-permissions-grid.tsx +++ b/packages/stencil-library/src/components/dnn-permissions-grid/dnn-permissions-grid.tsx @@ -4,6 +4,7 @@ import { IPermissionDefinition, IPermissions, IRolePermission, IUserPermission } import { IRoleGroup } from './role-group-interface'; import { IRole } from './role-interface'; import { ISearchedUser } from './searched-user-interface'; +import { CheckedState } from '../dnn-checkbox/types'; @Component({ tag: 'dnn-permissions-grid', @@ -39,7 +40,6 @@ export class DnnPermissionsGrid { @State() localResx: ILocalization; @State() focused = false; - @Watch("foundUsers") handleFoundUsersChanged(newValue: ISearchedUser[]){ if (newValue?.length > 0){ @@ -166,7 +166,8 @@ export class DnnPermissionsGrid {