Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Released v0.25.0 #1245

Merged
merged 11 commits into from
Jan 5, 2025
Merged

Released v0.25.0 #1245

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
67c7406
Bump typescript from 5.6.3 to 5.7.2
dependabot[bot] Dec 17, 2024
82bb5b5
Added prop to cusomize tri-state order of dnn-checkbox
valadas Dec 23, 2024
83b00b7
Merge pull request #1239 from valadas/issue/546
david-poindexter Dec 23, 2024
29a8b2e
Changed default order of checkboxes in dnn-permission-grid
valadas Dec 23, 2024
4df7804
Update packages/stencil-library/custom-elements.json
valadas Dec 23, 2024
e447933
Fixed an unclear sentence
valadas Dec 23, 2024
ace991b
Merge branch 'issue/1240' of https://github.com/valadas/dnn-elements …
valadas Dec 23, 2024
388eed2
Merge pull request #1241 from valadas/issue/1240
david-poindexter Dec 23, 2024
cdd34a4
Added support for dnn-richtext plugins
valadas Dec 23, 2024
f42383a
Merge pull request #1242 from valadas/issue/1150
david-poindexter Dec 23, 2024
4e0cd92
Merge pull request #1236 from DNNCommunity/dependabot/npm_and_yarn/ty…
valadas Jan 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
52 changes: 32 additions & 20 deletions packages/stencil-library/custom-elements.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down Expand Up @@ -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
}
],
Expand Down Expand Up @@ -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": []
}
]
}
]
}
2 changes: 1 addition & 1 deletion packages/stencil-library/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand Down
30 changes: 28 additions & 2 deletions packages/stencil-library/src/components.d.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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";
Expand All @@ -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 {
Expand Down Expand Up @@ -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)
*/
Expand Down Expand Up @@ -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.
*/
Expand Down Expand Up @@ -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.
*/
Expand Down Expand Up @@ -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.
*/
Expand All @@ -1866,9 +1888,13 @@ declare namespace LocalJSX {
*/
"onValueInput"?: (event: DnnRichtextCustomEvent<string>) => 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.
*/
Expand Down
2 changes: 0 additions & 2 deletions packages/stencil-library/src/components/dnn-button/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand All @@ -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
```

Expand Down
32 changes: 19 additions & 13 deletions packages/stencil-library/src/components/dnn-checkbox/dnn-checkbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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">;

Expand Down Expand Up @@ -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) {
Expand All @@ -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);
}

Expand Down
13 changes: 7 additions & 6 deletions packages/stencil-library/src/components/dnn-checkbox/readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
21 changes: 17 additions & 4 deletions packages/stencil-library/src/components/dnn-permissions-grid/dnn-permissions-grid.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down Expand Up @@ -39,7 +40,6 @@ export class DnnPermissionsGrid {
@State() localResx: ILocalization;
@State() focused = false;


@Watch("foundUsers")
handleFoundUsersChanged(newValue: ISearchedUser[]){
if (newValue?.length > 0){
Expand Down Expand Up @@ -166,7 +166,8 @@ export class DnnPermissionsGrid {
<label>
<span class="hidden">{permissionDefinition.permissionName}</span>
<dnn-checkbox
use-intermediate
useIntermediate
nextStateHandler={state => this.handleNextState(state)}
checked={checked}
onCheckedchange={e => this.handleRoleChanged(e.detail, rolePermission, permissionDefinition)}
>
Expand All @@ -189,7 +190,8 @@ export class DnnPermissionsGrid {
<label>
<span class="hidden">{permissionDefinition.permissionName}</span>
<dnn-checkbox
use-intermediate
useIntermediate
nextStateHandler={state => this.handleNextState(state)}
checked={checked}
onCheckedchange={e => this.handleUserChanged(e.detail, userPermission, permissionDefinition)}
>
Expand All @@ -204,6 +206,17 @@ export class DnnPermissionsGrid {
)
}

private handleNextState(state: string): CheckedState {
switch (state) {
case "checked":
return "unchecked";
case "unchecked":
return "intermediate";
default:
return "checked";
}
}

private handleRoleChanged(
checked: "checked" | "unchecked" | "intermediate",
rolePermission: IRolePermission,
Expand Down Expand Up @@ -289,7 +302,7 @@ export class DnnPermissionsGrid {
}

private handleUserChanged(
checked: "checked" | "unchecked" | "intermediate",
checked: CheckedState,
userPermission: IUserPermission,
permissionDefinition: IPermissionDefinition
): void {
Expand Down
Loading
Loading