Skip to content

Commit

Permalink
Merge pull request #1040 from david-poindexter/dnn-autocomplete
Browse files Browse the repository at this point in the history
Initial implementation of autocomplete component
  • Loading branch information
valadas authored May 11, 2024
2 parents aa6e685 + b324334 commit f36f5a7
Show file tree
Hide file tree
Showing 17 changed files with 1,658 additions and 102 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@ import type { JSX } from '@dnncommunity/dnn-elements';



export const DnnAutocomplete = /*@__PURE__*/createReactComponent<JSX.DnnAutocomplete, HTMLDnnAutocompleteElement>('dnn-autocomplete');
export const DnnButton = /*@__PURE__*/createReactComponent<JSX.DnnButton, HTMLDnnButtonElement>('dnn-button');
export const DnnCheckbox = /*@__PURE__*/createReactComponent<JSX.DnnCheckbox, HTMLDnnCheckboxElement>('dnn-checkbox');
export const DnnChevron = /*@__PURE__*/createReactComponent<JSX.DnnChevron, HTMLDnnChevronElement>('dnn-chevron');
Expand Down
197 changes: 185 additions & 12 deletions packages/stencil-library/custom-elements.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,179 @@
{
"version": "1.0.0",
"modules": [
{
"kind": "javascript-module",
"path": "src/components/dnn-autocomplete/dnn-autocomplete.tsx",
"declarations": [
{
"kind": "class",
"name": "dnn-autocomplete.tsx",
"tagName": "dnn-autocomplete",
"description": "Building a component that is flexible enough for multiple use cases is not easy. This component externalizes some of its behavior to make it more reusable. To use it effectivelly please read the usage examples carefuly.",
"attributes": [
{
"name": "disabled",
"type": {
"text": "boolean"
},
"description": "Defines whether the field is disabled.",
"required": false
},
{
"name": "help-text",
"type": {
"text": "string"
},
"description": "Defines the help label displayed under the field.",
"required": false
},
{
"name": "label",
"type": {
"text": "string"
},
"description": "The label for this autocomplete.",
"required": false
},
{
"name": "name",
"type": {
"text": "string"
},
"description": "The name for this autocomplete when used in forms.",
"required": false
},
{
"name": "preload-threshold-pixels",
"type": {
"text": "number"
},
"description": "How many suggestions to preload in pixels of their height.\nThis is used to calculate the virtual scroll height and request\nmore items before they get into view.",
"default": "1000",
"required": false
},
{
"name": "required",
"type": {
"text": "boolean"
},
"description": "Defines whether the field requires having a value.",
"required": false
},
{
"name": "total-suggestions",
"type": {
"text": "number"
},
"description": "The total amount of suggestions for the given search query.\nThis can be used to show virtual scroll and pagination progressive feeding.\nThe needMoreItems event should be used to request more items.",
"required": false
},
{
"name": "value",
"type": {
"text": "string"
},
"description": "Defines the value for this autocomplete",
"required": false
}
],
"members": [
{
"kind": "field",
"name": "renderSuggestion",
"type": {
"text": "(suggestion: DnnAutocompleteSuggestion) => HTMLElement"
},
"description": "Callback to render suggestions, if not provided, only the label will be rendered.",
"required": false
},
{
"kind": "field",
"name": "suggestions",
"type": {
"text": "DnnAutocompleteSuggestion[]"
},
"description": "Sets the list of suggestions.",
"default": "[]",
"required": false
},
{
"kind": "method",
"name": "checkValidity",
"description": "Reports the input validity details. See https://developer.mozilla.org/en-US/docs/Web/API/ValidityState",
"signature": "checkValidity() => Promise<ValidityState>"
},
{
"kind": "method",
"name": "setCustomValidity",
"description": "Can be used to set a custom validity message.",
"signature": "setCustomValidity(message: string) => Promise<void>"
}
],
"events": [
{
"name": "itemSelected",
"type": {
"text": "string"
},
"description": "Fires when an item is selected."
},
{
"name": "needMoreItems",
"type": {
"text": "NeedMoreItemsEventArgs"
},
"description": "Fires when the component needs to display more items in the suggestions."
},
{
"name": "searchQueryChanged",
"type": {
"text": "string"
},
"description": "Fires when the search query has changed.\nThis is almost like valueInput, but it is debounced\nand can be used to trigger a search query without overloading\nAPI endpoints while typing."
},
{
"name": "valueChange",
"type": {
"text": "number | string | string[]"
},
"description": "Fires when the value has changed and the user exits the input."
},
{
"name": "valueInput",
"type": {
"text": "number | string | string[]"
},
"description": "Fires when the using is inputing data (on keystrokes)."
}
],
"slots": [],
"cssProperties": [
{
"name": "--background-color",
"description": "Defines the background color."
},
{
"name": "--control-radius",
"description": "Defines the radius for the control corners."
},
{
"name": "--danger-color",
"description": "Defines the danger color used for invalid data."
},
{
"name": "--focus-color",
"description": "Defines the color when the component is focused."
},
{
"name": "--foreground-color",
"description": "Defines the foreground color."
}
],
"cssParts": []
}
]
},
{
"kind": "javascript-module",
"path": "src/components/dnn-button/dnn-button.tsx",
Expand Down Expand Up @@ -61,7 +234,7 @@
"type": {
"text": "\"button\" | \"reset\" | \"submit\""
},
"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.",
"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.",
"default": "'button'",
"required": false
},
Expand All @@ -88,7 +261,7 @@
"type": {
"text": "\"danger\" | \"primary\" | \"secondary\" | \"tertiary\""
},
"description": "Optional button style,\r\ncan be either primary, secondary or tertiary or danger and defaults to primary if not specified",
"description": "Optional button style,\ncan be either primary, secondary or tertiary or danger and defaults to primary if not specified",
"default": "'primary'",
"required": false
}
Expand Down Expand Up @@ -447,7 +620,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": "{\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 }",
"default": "{\n contrast: \"Contrast\",\n preview: \"Preview\",\n cancel: \"Cancel\",\n confirm: \"Confirm\",\n normal: \"Normal\",\n light: \"Light\",\n dark: \"Dark\",\n }",
"required": false
}
],
Expand Down Expand Up @@ -563,7 +736,7 @@
"type": {
"text": "boolean"
},
"description": "If true, will allow the user to take a snapshot\r\nusing the device camera. (only works over https).",
"description": "If true, will allow the user to take a snapshot\nusing the device camera. (only works over https).",
"default": "false",
"required": false
},
Expand All @@ -572,7 +745,7 @@
"type": {
"text": "number"
},
"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",
"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",
"default": "0.8",
"required": false
},
Expand Down Expand Up @@ -600,7 +773,7 @@
"type": {
"text": "string[]"
},
"description": "A list of allowed file extensions.\r\nIf not specified, any file is allowed.\r\nEx: [\"jpg\", \"jpeg\", \"gif\", \"png\"]",
"description": "A list of allowed file extensions.\nIf not specified, any file is allowed.\nEx: [\"jpg\", \"jpeg\", \"gif\", \"png\"]",
"required": false
},
{
Expand Down Expand Up @@ -816,7 +989,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.\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.",
"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.",
"attributes": [
{
"name": "height",
Expand Down Expand Up @@ -868,7 +1041,7 @@
"type": {
"text": "ImageCropperResx"
},
"description": "Can be used to customize controls text.\r\nSome values support tokens, see default values for examples.",
"description": "Can be used to customize controls text.\nSome values support tokens, see default values for examples.",
"required": false
},
{
Expand Down Expand Up @@ -1151,7 +1324,7 @@
"type": {
"text": "string"
},
"description": "Optionally pass the aria-label text for the close button.\r\nDefaults to \"Close modal\" if not provided.",
"description": "Optionally pass the aria-label text for the close button.\nDefaults to \"Close modal\" if not provided.",
"default": "\"Close modal\"",
"required": false
},
Expand All @@ -1169,7 +1342,7 @@
"type": {
"text": "boolean"
},
"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.",
"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.",
"default": "true",
"required": false
},
Expand Down Expand Up @@ -1542,7 +1715,7 @@
"type": {
"text": "string"
},
"description": "Fires up each time the search query changes.\r\nThe data passed is the new query."
"description": "Fires up each time the search query changes.\nThe data passed is the new query."
}
],
"slots": [],
Expand Down Expand Up @@ -2131,7 +2304,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.\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.",
"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.",
"attributes": [
{
"name": "split-width-percentage",
Expand Down
85 changes: 3 additions & 82 deletions packages/stencil-library/licenses.json
Original file line number Diff line number Diff line change
@@ -1,94 +1,15 @@
{
"@babel/[email protected]": {
"licenses": "MIT",
"repository": "https://github.com/babel/babel",
"publisher": "Sebastian McKenzie",
"email": "[email protected]",
"path": "node_modules\\@babel\\code-frame",
"licenseFile": "C:\\dev\\dnn-elements\\packages\\stencil-library\\node_modules\\@babel\\code-frame\\LICENSE"
},
"@dnncommunity/[email protected]": {
"licenses": "MIT",
"repository": "https://github.com/dnncommunity/dnn-elements",
"path": "",
"licenseFile": "C:\\dev\\dnn-elements\\packages\\stencil-library\\README.md"
},
"@eslint/[email protected]": {
"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/[email protected]": {
"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/[email protected]": {
"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"
},
"[email protected]": {
"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"
},
"[email protected]": {
"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"
},
"[email protected]": {
"licenses": "MIT",
"repository": "https://github.com/eslint/eslint",
"publisher": "Nicholas C. Zakas",
"email": "[email protected]",
"path": "node_modules\\eslint",
"licenseFile": "C:\\dev\\dnn-elements\\packages\\stencil-library\\node_modules\\eslint\\LICENSE"
},
"[email protected]": {
"licenses": "BSD-2-Clause",
"repository": "https://github.com/eslint/espree",
"publisher": "Nicholas C. Zakas",
"email": "[email protected]",
"path": "node_modules\\espree",
"licenseFile": "C:\\dev\\dnn-elements\\packages\\stencil-library\\node_modules\\espree\\LICENSE"
},
"[email protected]": {
"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"
},
"[email protected]": {
"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"
},
"[email protected]": {
"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"
"licenseFile": "D:\\dnn-elements\\dnn-elements\\packages\\stencil-library\\README.md"
},
"typescript@4.9.5": {
"typescript@5.2.2": {
"licenses": "Apache-2.0",
"repository": "https://github.com/Microsoft/TypeScript",
"publisher": "Microsoft Corp.",
"path": "node_modules\\typescript",
"licenseFile": "C:\\dev\\dnn-elements\\packages\\stencil-library\\node_modules\\typescript\\LICENSE.txt"
"licenseFile": "D:\\dnn-elements\\dnn-elements\\packages\\stencil-library\\node_modules\\typescript\\LICENSE.txt"
}
}
Loading

0 comments on commit f36f5a7

Please sign in to comment.