From d1c3dd0e925adcf8d13df32a95d1cb25ee617a1f Mon Sep 17 00:00:00 2001 From: David Poindexter Date: Fri, 8 Mar 2024 20:38:23 -0500 Subject: [PATCH] Implemented Usage documentation for dnn-tabs --- packages/stencil-library/custom-elements.json | 32 ++++--- packages/stencil-library/licenses.json | 85 ++++++++++++++++++- .../src/components/dnn-richtext/readme.md | 14 +++ .../src/components/dnn-tabs/readme.md | 12 ++- .../src/components/dnn-tabs/usage/HTML.md | 10 +++ .../src/components/dnn-tabs/usage/JSX-TSX.md | 10 +++ .../examples/dnn-example-form/readme.md | 2 + packages/stencil-library/vscode-data.json | 20 +++-- 8 files changed, 160 insertions(+), 25 deletions(-) create mode 100644 packages/stencil-library/src/components/dnn-tabs/usage/HTML.md create mode 100644 packages/stencil-library/src/components/dnn-tabs/usage/JSX-TSX.md diff --git a/packages/stencil-library/custom-elements.json b/packages/stencil-library/custom-elements.json index 36bb2643a..96d85460c 100644 --- a/packages/stencil-library/custom-elements.json +++ b/packages/stencil-library/custom-elements.json @@ -61,7 +61,7 @@ "type": { "text": "\"button\" | \"reset\" | \"submit\"" }, - "description": "Optional button type,\ncan be either submit, reset or button and defaults to button if not specified.\nWarning: DNN wraps the whole page in a form, only use this if you are handling\nform submission manually.", + "description": "Optional button type,\r\ncan be either submit, reset or button and defaults to button if not specified.\r\nWarning: DNN wraps the whole page in a form, only use this if you are handling\r\nform submission manually.", "default": "'button'", "required": false }, @@ -88,7 +88,7 @@ "type": { "text": "\"danger\" | \"primary\" | \"secondary\" | \"tertiary\"" }, - "description": "Optional button style,\ncan be either primary, secondary or tertiary or danger and defaults to primary if not specified", + "description": "Optional button style,\r\ncan be either primary, secondary or tertiary or danger and defaults to primary if not specified", "default": "'primary'", "required": false } @@ -447,7 +447,7 @@ "text": "{ contrast: string; preview: string; cancel: string; confirm: string; normal: string; light: string; dark: string; }" }, "description": "Can be used to customize the text language.", - "default": "{\n contrast: \"Contrast\",\n preview: \"Preview\",\n cancel: \"Cancel\",\n confirm: \"Confirm\",\n normal: \"Normal\",\n light: \"Light\",\n dark: \"Dark\",\n }", + "default": "{\r\n contrast: \"Contrast\",\r\n preview: \"Preview\",\r\n cancel: \"Cancel\",\r\n confirm: \"Confirm\",\r\n normal: \"Normal\",\r\n light: \"Light\",\r\n dark: \"Dark\",\r\n }", "required": false } ], @@ -563,7 +563,7 @@ "type": { "text": "boolean" }, - "description": "If true, will allow the user to take a snapshot\nusing the device camera. (only works over https).", + "description": "If true, will allow the user to take a snapshot\r\nusing the device camera. (only works over https).", "default": "false", "required": false }, @@ -572,7 +572,7 @@ "type": { "text": "number" }, - "description": "Specifies the jpeg quality for when the device\ncamera is used to generate a picture.\nNeeds to be a number between 0 and 1 and defaults to 0.8", + "description": "Specifies the jpeg quality for when the device\r\ncamera is used to generate a picture.\r\nNeeds to be a number between 0 and 1 and defaults to 0.8", "default": "0.8", "required": false }, @@ -600,7 +600,7 @@ "type": { "text": "string[]" }, - "description": "A list of allowed file extensions.\nIf not specified, any file is allowed.\nEx: [\"jpg\", \"jpeg\", \"gif\", \"png\"]", + "description": "A list of allowed file extensions.\r\nIf not specified, any file is allowed.\r\nEx: [\"jpg\", \"jpeg\", \"gif\", \"png\"]", "required": false }, { @@ -667,7 +667,7 @@ "kind": "class", "name": "dnn-image-cropper.tsx", "tagName": "dnn-image-cropper", - "description": "Allows cropping an image in-browser with the option to enforce a specific final size.\nAll computation happens in the browser and the final image is emmited\nin an event that has a data-url of the image.", + "description": "Allows cropping an image in-browser with the option to enforce a specific final size.\r\nAll computation happens in the browser and the final image is emmited\r\nin an event that has a data-url of the image.", "attributes": [ { "name": "height", @@ -719,7 +719,7 @@ "type": { "text": "ImageCropperResx" }, - "description": "Can be used to customize controls text.\nSome values support tokens, see default values for examples.", + "description": "Can be used to customize controls text.\r\nSome values support tokens, see default values for examples.", "required": false }, { @@ -995,7 +995,7 @@ "type": { "text": "string" }, - "description": "Optionally pass the aria-label text for the close button.\nDefaults to \"Close modal\" if not provided.", + "description": "Optionally pass the aria-label text for the close button.\r\nDefaults to \"Close modal\" if not provided.", "default": "\"Close modal\"", "required": false }, @@ -1013,7 +1013,7 @@ "type": { "text": "boolean" }, - "description": "Optionally you can pass false to not show the close button.\nIf you decide to do so, you should either not also prevent dismissal by clicking the backdrop\nor provide your own dismissal logic in the modal content.", + "description": "Optionally you can pass false to not show the close button.\r\nIf you decide to do so, you should either not also prevent dismissal by clicking the backdrop\r\nor provide your own dismissal logic in the modal content.", "default": "true", "required": false }, @@ -1291,6 +1291,14 @@ "tagName": "dnn-richtext", "description": "", "attributes": [ + { + "name": "name", + "type": { + "text": "string" + }, + "description": "Name of the field when used in a form.", + "required": false + }, { "name": "value", "type": { @@ -1378,7 +1386,7 @@ "type": { "text": "string" }, - "description": "Fires up each time the search query changes.\nThe data passed is the new query." + "description": "Fires up each time the search query changes.\r\nThe data passed is the new query." } ], "slots": [], @@ -1802,7 +1810,7 @@ "kind": "class", "name": "dnn-vertical-splitview.tsx", "tagName": "dnn-vertical-splitview", - "description": "This allows splitting a UI into vertical adjustable panels, the splitter itself is not part of this component.\n- The content for the left part should be injected in the `left` slot.\n- The content for the right part should be injected in the `right` slot.\n- The content for the actual splitter should go in the default slot and other UI elements can be injected as long as you handle their behaviour, by default only the drag behavior is implemented in the component.", + "description": "This allows splitting a UI into vertical adjustable panels, the splitter itself is not part of this component.\r\n- The content for the left part should be injected in the `left` slot.\r\n- The content for the right part should be injected in the `right` slot.\r\n- The content for the actual splitter should go in the default slot and other UI elements can be injected as long as you handle their behaviour, by default only the drag behavior is implemented in the component.", "attributes": [ { "name": "split-width-percentage", diff --git a/packages/stencil-library/licenses.json b/packages/stencil-library/licenses.json index 48f1aadbc..af32535f6 100644 --- a/packages/stencil-library/licenses.json +++ b/packages/stencil-library/licenses.json @@ -1,15 +1,94 @@ { + "@babel/code-frame@7.12.11": { + "licenses": "MIT", + "repository": "https://github.com/babel/babel", + "publisher": "Sebastian McKenzie", + "email": "sebmck@gmail.com", + "path": "node_modules\\@babel\\code-frame", + "licenseFile": "C:\\dev\\dnn-elements\\packages\\stencil-library\\node_modules\\@babel\\code-frame\\LICENSE" + }, "@dnncommunity/dnn-elements@0.23.3-alpha.7": { "licenses": "MIT", "repository": "https://github.com/dnncommunity/dnn-elements", "path": "", - "licenseFile": "D:\\dnn-elements\\dnn-elements\\packages\\stencil-library\\README.md" + "licenseFile": "C:\\dev\\dnn-elements\\packages\\stencil-library\\README.md" + }, + "@eslint/eslintrc@0.4.3": { + "licenses": "MIT", + "repository": "https://github.com/eslint/eslintrc", + "publisher": "Nicholas C. Zakas", + "path": "node_modules\\@eslint\\eslintrc", + "licenseFile": "C:\\dev\\dnn-elements\\packages\\stencil-library\\node_modules\\@eslint\\eslintrc\\LICENSE" + }, + "@humanwhocodes/config-array@0.5.0": { + "licenses": "Apache-2.0", + "repository": "https://github.com/humanwhocodes/config-array", + "publisher": "Nicholas C. Zakas", + "path": "node_modules\\@humanwhocodes\\config-array", + "licenseFile": "C:\\dev\\dnn-elements\\packages\\stencil-library\\node_modules\\@humanwhocodes\\config-array\\LICENSE" + }, + "@stencil/eslint-plugin@0.4.0": { + "licenses": "MIT", + "repository": "https://github.com/ionic-team/stencil-eslint", + "path": "node_modules\\@stencil\\eslint-plugin", + "licenseFile": "C:\\dev\\dnn-elements\\packages\\stencil-library\\node_modules\\@stencil\\eslint-plugin\\LICENSE.md" + }, + "eslint-utils@2.1.0": { + "licenses": "MIT", + "repository": "https://github.com/mysticatea/eslint-utils", + "publisher": "Toru Nagashima", + "path": "node_modules\\eslint\\node_modules\\eslint-utils", + "licenseFile": "C:\\dev\\dnn-elements\\packages\\stencil-library\\node_modules\\eslint\\node_modules\\eslint-utils\\LICENSE" + }, + "eslint-visitor-keys@1.3.0": { + "licenses": "Apache-2.0", + "repository": "https://github.com/eslint/eslint-visitor-keys", + "publisher": "Toru Nagashima", + "path": "node_modules\\espree\\node_modules\\eslint-visitor-keys", + "licenseFile": "C:\\dev\\dnn-elements\\packages\\stencil-library\\node_modules\\espree\\node_modules\\eslint-visitor-keys\\LICENSE" + }, + "eslint@7.32.0": { + "licenses": "MIT", + "repository": "https://github.com/eslint/eslint", + "publisher": "Nicholas C. Zakas", + "email": "nicholas+npm@nczconsulting.com", + "path": "node_modules\\eslint", + "licenseFile": "C:\\dev\\dnn-elements\\packages\\stencil-library\\node_modules\\eslint\\LICENSE" + }, + "espree@7.3.1": { + "licenses": "BSD-2-Clause", + "repository": "https://github.com/eslint/espree", + "publisher": "Nicholas C. Zakas", + "email": "nicholas+npm@nczconsulting.com", + "path": "node_modules\\espree", + "licenseFile": "C:\\dev\\dnn-elements\\packages\\stencil-library\\node_modules\\espree\\LICENSE" + }, + "ignore@4.0.6": { + "licenses": "MIT", + "repository": "https://github.com/kaelzhang/node-ignore", + "publisher": "kael", + "path": "node_modules\\ignore", + "licenseFile": "C:\\dev\\dnn-elements\\packages\\stencil-library\\node_modules\\ignore\\LICENSE-MIT" + }, + "tslib@1.14.1": { + "licenses": "0BSD", + "repository": "https://github.com/Microsoft/tslib", + "publisher": "Microsoft Corp.", + "path": "node_modules\\tslib", + "licenseFile": "C:\\dev\\dnn-elements\\packages\\stencil-library\\node_modules\\tslib\\LICENSE.txt" + }, + "tsutils@3.0.0": { + "licenses": "MIT", + "repository": "https://github.com/ajafff/tsutils", + "publisher": "Klaus Meinhardt", + "path": "node_modules\\tsutils", + "licenseFile": "C:\\dev\\dnn-elements\\packages\\stencil-library\\node_modules\\tsutils\\LICENSE" }, - "typescript@5.2.2": { + "typescript@4.9.5": { "licenses": "Apache-2.0", "repository": "https://github.com/Microsoft/TypeScript", "publisher": "Microsoft Corp.", "path": "node_modules\\typescript", - "licenseFile": "D:\\dnn-elements\\dnn-elements\\packages\\stencil-library\\node_modules\\typescript\\LICENSE.txt" + "licenseFile": "C:\\dev\\dnn-elements\\packages\\stencil-library\\node_modules\\typescript\\LICENSE.txt" } } diff --git a/packages/stencil-library/src/components/dnn-richtext/readme.md b/packages/stencil-library/src/components/dnn-richtext/readme.md index 9d25d6151..b5c607f98 100644 --- a/packages/stencil-library/src/components/dnn-richtext/readme.md +++ b/packages/stencil-library/src/components/dnn-richtext/readme.md @@ -9,6 +9,7 @@ | Property | Attribute | Description | Type | Default | | --------- | --------- | ---------------------------------------------------------------------------------------------- | -------- | ----------- | +| `name` | `name` | Name of the field when used in a form. | `string` | `undefined` | | `options` | -- | Optional configuration for Jodit, see https://xdsoft.net/jodit/docs/classes/config.Config.html | `Config` | `undefined` | | `value` | `value` | Sets the value of the content of the editor. | `string` | `undefined` | @@ -21,6 +22,19 @@ | `valueInput` | Fires during value input. | `CustomEvent` | +## Dependencies + +### Used by + + - [dnn-example-form](../examples/dnn-example-form) + +### Graph +```mermaid +graph TD; + dnn-example-form --> dnn-richtext + style dnn-richtext fill:#f9f,stroke:#333,stroke-width:4px +``` + ---------------------------------------------- *Built with [StencilJS](https://stenciljs.com/)* diff --git a/packages/stencil-library/src/components/dnn-tabs/readme.md b/packages/stencil-library/src/components/dnn-tabs/readme.md index 304aa00a7..be53054ca 100644 --- a/packages/stencil-library/src/components/dnn-tabs/readme.md +++ b/packages/stencil-library/src/components/dnn-tabs/readme.md @@ -2,7 +2,13 @@ `dnn-tabs` is a container for `dnn-tab` and should only contain `dnn-tab` elements for its content. -## Example usage + + + +## Usage + +### HTML + ```html @@ -14,6 +20,9 @@ ``` + +### JSX-TSX + ```tsx @@ -25,7 +34,6 @@ ``` - ## CSS Custom Properties diff --git a/packages/stencil-library/src/components/dnn-tabs/usage/HTML.md b/packages/stencil-library/src/components/dnn-tabs/usage/HTML.md new file mode 100644 index 000000000..11a9aaea5 --- /dev/null +++ b/packages/stencil-library/src/components/dnn-tabs/usage/HTML.md @@ -0,0 +1,10 @@ +```html + + +

Content of the first tab.

+ + +

This is the second tab

+ + +``` diff --git a/packages/stencil-library/src/components/dnn-tabs/usage/JSX-TSX.md b/packages/stencil-library/src/components/dnn-tabs/usage/JSX-TSX.md new file mode 100644 index 000000000..678cb2463 --- /dev/null +++ b/packages/stencil-library/src/components/dnn-tabs/usage/JSX-TSX.md @@ -0,0 +1,10 @@ +```tsx + + +

Content of the first tab.

+ + +

This is the second tab

+ + +``` diff --git a/packages/stencil-library/src/components/examples/dnn-example-form/readme.md b/packages/stencil-library/src/components/examples/dnn-example-form/readme.md index 23219113c..a56ca2bd9 100644 --- a/packages/stencil-library/src/components/examples/dnn-example-form/readme.md +++ b/packages/stencil-library/src/components/examples/dnn-example-form/readme.md @@ -21,6 +21,7 @@ Do not use this component in production, it is meant for testing purposes only a - [dnn-dropzone](../../dnn-dropzone) - [dnn-image-cropper](../../dnn-image-cropper) - [dnn-monaco-editor](../../dnn-monaco-editor) +- [dnn-richtext](../../dnn-richtext) - [dnn-button](../../dnn-button) ### Graph @@ -34,6 +35,7 @@ graph TD; dnn-example-form --> dnn-dropzone dnn-example-form --> dnn-image-cropper dnn-example-form --> dnn-monaco-editor + dnn-example-form --> dnn-richtext dnn-example-form --> dnn-button dnn-color-input --> dnn-modal dnn-color-input --> dnn-tabs diff --git a/packages/stencil-library/vscode-data.json b/packages/stencil-library/vscode-data.json index 7bcabf86f..f92575e0e 100644 --- a/packages/stencil-library/vscode-data.json +++ b/packages/stencil-library/vscode-data.json @@ -30,7 +30,7 @@ }, { "name": "form-button-type", - "description": "Optional button type,\ncan be either submit, reset or button and defaults to button if not specified.\nWarning: DNN wraps the whole page in a form, only use this if you are handling\nform submission manually.", + "description": "Optional button type,\r\ncan be either submit, reset or button and defaults to button if not specified.\r\nWarning: DNN wraps the whole page in a form, only use this if you are handling\r\nform submission manually.", "values": [ { "name": "button" @@ -64,7 +64,7 @@ }, { "name": "type", - "description": "Optional button style,\ncan be either primary, secondary or tertiary or danger and defaults to primary if not specified", + "description": "Optional button style,\r\ncan be either primary, secondary or tertiary or danger and defaults to primary if not specified", "values": [ { "name": "danger" @@ -235,11 +235,11 @@ "attributes": [ { "name": "allow-camera-mode", - "description": "If true, will allow the user to take a snapshot\nusing the device camera. (only works over https)." + "description": "If true, will allow the user to take a snapshot\r\nusing the device camera. (only works over https)." }, { "name": "capture-quality", - "description": "Specifies the jpeg quality for when the device\ncamera is used to generate a picture.\nNeeds to be a number between 0 and 1 and defaults to 0.8" + "description": "Specifies the jpeg quality for when the device\r\ncamera is used to generate a picture.\r\nNeeds to be a number between 0 and 1 and defaults to 0.8" }, { "name": "max-file-size", @@ -263,7 +263,7 @@ "name": "dnn-image-cropper", "description": { "kind": "markdown", - "value": "Allows cropping an image in-browser with the option to enforce a specific final size.\nAll computation happens in the browser and the final image is emmited\nin an event that has a data-url of the image." + "value": "Allows cropping an image in-browser with the option to enforce a specific final size.\r\nAll computation happens in the browser and the final image is emmited\r\nin an event that has a data-url of the image." }, "attributes": [ { @@ -414,7 +414,7 @@ }, { "name": "close-text", - "description": "Optionally pass the aria-label text for the close button.\nDefaults to \"Close modal\" if not provided." + "description": "Optionally pass the aria-label text for the close button.\r\nDefaults to \"Close modal\" if not provided." }, { "name": "resizable", @@ -422,7 +422,7 @@ }, { "name": "show-close-button", - "description": "Optionally you can pass false to not show the close button.\nIf you decide to do so, you should either not also prevent dismissal by clicking the backdrop\nor provide your own dismissal logic in the modal content." + "description": "Optionally you can pass false to not show the close button.\r\nIf you decide to do so, you should either not also prevent dismissal by clicking the backdrop\r\nor provide your own dismissal logic in the modal content." }, { "name": "visible", @@ -603,6 +603,10 @@ "value": "" }, "attributes": [ + { + "name": "name", + "description": "Name of the field when used in a form." + }, { "name": "value", "description": "Sets the value of the content of the editor." @@ -762,7 +766,7 @@ "name": "dnn-vertical-splitview", "description": { "kind": "markdown", - "value": "This allows splitting a UI into vertical adjustable panels, the splitter itself is not part of this component.\n- The content for the left part should be injected in the `left` slot.\n- The content for the right part should be injected in the `right` slot.\n- The content for the actual splitter should go in the default slot and other UI elements can be injected as long as you handle their behaviour, by default only the drag behavior is implemented in the component." + "value": "This allows splitting a UI into vertical adjustable panels, the splitter itself is not part of this component.\r\n- The content for the left part should be injected in the `left` slot.\r\n- The content for the right part should be injected in the `right` slot.\r\n- The content for the actual splitter should go in the default slot and other UI elements can be injected as long as you handle their behaviour, by default only the drag behavior is implemented in the component." }, "attributes": [ {