diff --git a/apps/demo/src/Views/Ui/components/FormWidgets/Typeahead.tsx b/apps/demo/src/Views/Ui/components/FormWidgets/Typeahead.tsx index fe32c2e55..c37aa1362 100644 --- a/apps/demo/src/Views/Ui/components/FormWidgets/Typeahead.tsx +++ b/apps/demo/src/Views/Ui/components/FormWidgets/Typeahead.tsx @@ -1,5 +1,5 @@ import { useTranslation } from "@prefabs.tech/react-i18n"; -import { Button, Page, Typeahead } from "@prefabs.tech/react-ui"; +import { Button, Page, Typeahead, TDataTable } from "@prefabs.tech/react-ui"; import { useState } from "react"; import { useNavigate } from "react-router-dom"; @@ -104,6 +104,142 @@ export const TypeaheadDemo = () => { ); }; + const propertiesData = [ + { + default: '""', + description: t("typeahead.propertiesDescription.className"), + id: 1, + prop: "className", + type: "string", + }, + { + default: "[]", + description: t("typeahead.propertiesDescription.data"), + id: 2, + prop: "data", + type: "T[]", + }, + { + default: "300", + description: t("typeahead.propertiesDescription.debounceTime"), + id: 3, + prop: "debounceTime", + type: "number", + }, + { + default: "false", + description: t("typeahead.propertiesDescription.disabled"), + id: 4, + prop: "disabled", + type: "boolean", + }, + { + default: "-", + description: t("typeahead.propertiesDescription.emptyMessage"), + id: 5, + prop: "emptyMessage", + type: "string", + }, + { + default: "-", + description: t("typeahead.propertiesDescription.errorMessage"), + id: 6, + prop: "errorMessage", + type: "string", + }, + { + default: "true", + description: t("typeahead.propertiesDescription.forceSelect"), + id: 7, + prop: "forceSelect", + type: "boolean", + }, + { + default: "false", + description: t("typeahead.propertiesDescription.hasError"), + id: 8, + prop: "hasError", + type: "boolean", + }, + { + default: "-", + description: t("typeahead.propertiesDescription.helperText"), + id: 9, + prop: "helperText", + type: "string", + }, + { + default: "-", + description: t("typeahead.propertiesDescription.label"), + id: 10, + prop: "label", + type: "string | React.ReactNode", + }, + { + default: "false", + description: t("typeahead.propertiesDescription.loading"), + id: 11, + prop: "loading", + type: "boolean", + }, + { + default: "-", + description: t("typeahead.propertiesDescription.name"), + id: 12, + prop: "name", + type: "string", + }, + { + default: "-", + description: t("typeahead.propertiesDescription.onChange"), + id: 13, + prop: "onChange", + type: "(value?: T) => void", + }, + { + default: "-", + description: t("typeahead.propertiesDescription.onSearch"), + id: 14, + prop: "onSearch", + type: "(value: string | number | readonly string[]) => void", + }, + { + default: "-", + description: t("typeahead.propertiesDescription.placeholder"), + id: 15, + prop: "placeholder", + type: "string", + }, + { + default: "-", + description: t("typeahead.propertiesDescription.renderSuggestion"), + id: 16, + prop: "renderSuggestion", + type: "(suggestion: T) => React.ReactNode", + }, + { + default: "-", + description: t("typeahead.propertiesDescription.suggestionLabel"), + id: 17, + prop: "suggestionLabel", + type: "keyof T", + }, + { + default: '"text"', + description: t("typeahead.propertiesDescription.type"), + id: 18, + prop: "type", + type: "string", + }, + { + default: '""', + description: t("typeahead.propertiesDescription.value"), + id: 19, + prop: "value", + type: "string | number | readonly string[]", + }, + ]; + return ( { emptyMessage={t("typeahead.message.emptyMessage")} /> +
+ +
); }; diff --git a/apps/demo/src/locales/en/ui.json b/apps/demo/src/locales/en/ui.json index 1db0a957c..1464062c4 100644 --- a/apps/demo/src/locales/en/ui.json +++ b/apps/demo/src/locales/en/ui.json @@ -598,18 +598,39 @@ "subtitle": "The SwitchInput component is a customizable checkbox switch for toggling states. It supports additional properties such as error handling and labeling." }, "typeahead": { - "message": { - "emptyMessage": "No results found" - }, - "title": "Typeahead", "label": { "client": "Client side typeahead", "customSuggestion": "Custom suggestion typeahead", "disabled": "Disabled", "emptyMessage": "Empty message typeahead", - "server": "Server side typeahead", - "invalid": "Invalid" + "invalid": "Invalid", + "server": "Server side typeahead" + }, + "message": { + "emptyMessage": "No results found" + }, + "placeholder": "Search...", + "propertiesDescription": { + "className": "Style class of the component.", + "data": "An array of suggestions to display.", + "debounceTime": "Delay in milliseconds before the search triggers.", + "disabled": "When present, it specifies that the component should be disabled.", + "emptyMessage": "Message to display when no results are found.", + "errorMessage": "Message to display when there is an error.", + "forceSelect": "When enabled, clears the input if the value is not selected from the suggestions.", + "hasError": "Specifies if the input has an invalid state.", + "helperText": "Helper text to display below the input.", + "label": "Label of the component.", + "loading": "Displays a loading icon when true.", + "name": "Name attribute of the input element.", + "onChange": "Callback function invoked when a suggestion is selected.", + "onSearch": "Callback function invoked when the input value changes.", + "placeholder": "Placeholder text for the input.", + "renderSuggestion": "Function to customize the rendering of each suggestion.", + "suggestionLabel": "Property name to use as the display label when data items are objects.", + "type": "Type of the input element (e.g., text).", + "value": "Value of the component." }, - "placeholder": "Search..." + "title": "Typeahead" } } diff --git a/apps/demo/src/locales/fr/ui.json b/apps/demo/src/locales/fr/ui.json index 8b8a65ba4..a413c2e71 100644 --- a/apps/demo/src/locales/fr/ui.json +++ b/apps/demo/src/locales/fr/ui.json @@ -114,7 +114,7 @@ "label": "Label (fr)", "locale": "Locales support (fr)", "notFound": "Missing country code (fr)", - "positions": { + "positions": { "left": "Left (default) (fr)", "right": "Right (fr)", "rightEdge": "Right edge (fr)" @@ -165,7 +165,7 @@ "single": "Select a country... (fr)" }, "propertiesDescription": { - "autoSortOptions":"By default, options are sorted alphabetically. If false, countries are sorted by priority in the order groups → favorites → include → fallback-locale translations, preserving the defined order. (fr)", + "autoSortOptions": "By default, options are sorted alphabetically. If false, countries are sorted by priority in the order groups → favorites → include → fallback-locale translations, preserving the defined order. (fr)", "data": "Custom country data to overwrite existing entries or add new ones. (fr)", "exclude": "An array of country codes to remove from the list. (fr)", "fallbackLocale": "Locale used when active locale translation is missing. (fr)", @@ -598,18 +598,39 @@ "subtitle": "The SwitchInput component is a customizable checkbox switch for toggling states. It supports additional properties such as error handling and labeling. (fr)" }, "typeahead": { - "message": { - "emptyMessage": "No results found (fr)" - }, - "title": "Typeahead (fr)", "label": { "client": "Client side typeahead (fr)", "customSuggestion": "Custom suggestion typeahead (fr)", "disabled": "Disabled (fr)", "emptyMessage": "Empty message typeahead (fr)", - "server": "Server side typeahead (fr)", - "invalid": "Invalid (fr)" + "invalid": "Invalid (fr)", + "server": "Server side typeahead (fr)" + }, + "message": { + "emptyMessage": "No results found (fr)" + }, + "placeholder": "Search... (fr)", + "propertiesDescription": { + "className": "Style class of the component. (fr)", + "data": "An array of suggestions to display. (fr)", + "debounceTime": "Delay in milliseconds before the search triggers. (fr)", + "disabled": "When present, it specifies that the component should be disabled. (fr)", + "emptyMessage": "Message to display when no results are found. (fr)", + "errorMessage": "Message to display when there is an error. (fr)", + "forceSelect": "When enabled, clears the input if the value is not selected from the suggestions. (fr)", + "hasError": "Specifies if the input has an invalid state. (fr)", + "helperText": "Helper text to display below the input. (fr)", + "label": "Label of the component. (fr)", + "loading": "Displays a loading icon when true. (fr)", + "name": "Name attribute of the input element. (fr)", + "onChange": "Callback function invoked when a suggestion is selected. (fr)", + "onSearch": "Callback function invoked when the input value changes. (fr)", + "placeholder": "Placeholder text for the input. (fr)", + "renderSuggestion": "Function to customize the rendering of each suggestion. (fr)", + "suggestionLabel": "Property name to use as the display label when data items are objects. (fr)", + "type": "Type of the input element (e.g., text). (fr)", + "value": "Value of the component. (fr)" }, - "placeholder": "Search... (fr)" + "title": "Typeahead (fr)" } }