@appcorp/app-corp-vista 0.0.72 → 0.0.73
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -39,24 +39,24 @@ var react_1 = __importStar(require("react"));
|
|
|
39
39
|
var react_2 = require("@headlessui/react");
|
|
40
40
|
var solid_1 = require("@heroicons/react/20/solid");
|
|
41
41
|
var VistaComboboxV1 = function (_a) {
|
|
42
|
-
var handleInputOnChange = _a.handleInputOnChange, handleOnBlur = _a.handleOnBlur, handleOnChange = _a.handleOnChange,
|
|
42
|
+
var checkClassName = _a.checkClassName, comboboxButtonClassName = _a.comboboxButtonClassName, comboboxClassName = _a.comboboxClassName, comboboxInputClassName = _a.comboboxInputClassName, comboboxOptionClassName = _a.comboboxOptionClassName, comboboxOptionsClassName = _a.comboboxOptionsClassName, error = _a.error, handleInputOnChange = _a.handleInputOnChange, handleOnBlur = _a.handleOnBlur, handleOnChange = _a.handleOnChange, inputIconClassName = _a.inputIconClassName, label = _a.label, labelClassName = _a.labelClassName, listItems = _a.listItems, nodeQueryKey = _a.nodeQueryKey, nodeSelectKey = _a.nodeSelectKey, placeholder = _a.placeholder, query = _a.query, _b = _a.required, required = _b === void 0 ? false : _b, selectKey1 = _a.selectKey1, selectedItem = _a.selectedItem;
|
|
43
43
|
var filteredList = (0, react_1.useMemo)(function () {
|
|
44
44
|
return query === ''
|
|
45
45
|
? listItems
|
|
46
46
|
: listItems.filter(function (item) { var _a; return (_a = item[selectKey1]) === null || _a === void 0 ? void 0 : _a.toLowerCase().includes(query.toLowerCase()); });
|
|
47
47
|
}, [listItems, query, selectKey1]);
|
|
48
|
-
return (react_1.default.createElement(react_2.Combobox, { as: "div", onChange: function (v) { return handleOnChange(nodeSelectKey, v); }, value: selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem[selectKey1] },
|
|
49
|
-
react_1.default.createElement(react_2.Label, { className: "block text-sm/6 font-medium text-gray-900 dark:text-white" },
|
|
48
|
+
return (react_1.default.createElement(react_2.Combobox, { as: "div", className: "".concat(comboboxClassName), onChange: function (v) { return handleOnChange(nodeSelectKey, v); }, value: selectedItem === null || selectedItem === void 0 ? void 0 : selectedItem[selectKey1] },
|
|
49
|
+
react_1.default.createElement(react_2.Label, { className: "block text-sm/6 font-medium text-gray-900 dark:text-white ".concat(labelClassName) },
|
|
50
50
|
label,
|
|
51
51
|
" ",
|
|
52
52
|
required && react_1.default.createElement("sup", { className: "text-red-500" }, "*")),
|
|
53
53
|
react_1.default.createElement("div", { className: "relative mt-2" },
|
|
54
|
-
react_1.default.createElement(react_2.ComboboxInput, { className: "w-full rounded-md border-0 bg-white/5 dark:bg-white/5 py-1.5 pl-3 pr-10 text-gray-900 dark:text-white shadow-sm ring-1 ring-inset ring-gray-500 focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm/6", onChange: function (e) { return handleInputOnChange(nodeQueryKey, e.target.value); }, onBlur: function (e) { return handleOnBlur(nodeQueryKey, e.target.value); } }),
|
|
55
|
-
react_1.default.createElement(react_2.ComboboxButton, { className: "absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none" },
|
|
56
|
-
react_1.default.createElement(solid_1.ChevronUpDownIcon, { className: "size-5 text-gray-900 dark:text-white"
|
|
57
|
-
(filteredList === null || filteredList === void 0 ? void 0 : filteredList.length) > 0 && (react_1.default.createElement(react_2.ComboboxOptions, { className: "absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-gray-200 dark:bg-gray-700 py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm" }, filteredList.map(function (item) { return (react_1.default.createElement(react_2.ComboboxOption, { className: "group relative cursor-default select-none py-2 pl-3 pr-9 text-gray-900 dark:text-white data-[focus]:bg-primary data-[focus]:text-white data-[focus]:outline-none", key: item[selectKey1] || item, value: item[selectKey1] || item },
|
|
54
|
+
react_1.default.createElement(react_2.ComboboxInput, { className: "w-full rounded-md border-0 bg-white/5 dark:bg-white/5 py-1.5 pl-3 pr-10 text-gray-900 dark:text-white shadow-sm ring-1 ring-inset ring-gray-500 focus:ring-2 focus:ring-inset focus:ring-primary sm:text-sm/6 ".concat(comboboxInputClassName), onChange: function (e) { return handleInputOnChange(nodeQueryKey, e.target.value); }, onBlur: function (e) { return handleOnBlur(nodeQueryKey, e.target.value); }, placeholder: placeholder }),
|
|
55
|
+
react_1.default.createElement(react_2.ComboboxButton, { className: "absolute inset-y-0 right-0 flex items-center rounded-r-md px-2 focus:outline-none ".concat(comboboxButtonClassName) },
|
|
56
|
+
react_1.default.createElement(solid_1.ChevronUpDownIcon, { className: "size-5 text-gray-900 dark:text-white\" aria-hidden=\"true ".concat(inputIconClassName) })),
|
|
57
|
+
(filteredList === null || filteredList === void 0 ? void 0 : filteredList.length) > 0 && (react_1.default.createElement(react_2.ComboboxOptions, { className: "absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-gray-200 dark:bg-gray-700 py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm ".concat(comboboxOptionsClassName) }, filteredList.map(function (item) { return (react_1.default.createElement(react_2.ComboboxOption, { className: "group relative cursor-default select-none py-2 pl-3 pr-9 text-gray-900 dark:text-white data-[focus]:bg-primary data-[focus]:text-white data-[focus]:outline-none ".concat(comboboxOptionClassName), key: item[selectKey1] || item, value: item[selectKey1] || item },
|
|
58
58
|
react_1.default.createElement("span", { className: "block truncate group-data-[selected]:font-semibold" }, item[selectKey1] || item),
|
|
59
|
-
react_1.default.createElement("span", { className: "absolute inset-y-0 right-0 hidden items-center pr-4 text-primary group-data-[selected]:flex group-data-[focus]:text-white" },
|
|
59
|
+
react_1.default.createElement("span", { className: "absolute inset-y-0 right-0 hidden items-center pr-4 text-primary group-data-[selected]:flex group-data-[focus]:text-white ".concat(checkClassName) },
|
|
60
60
|
react_1.default.createElement(solid_1.CheckIcon, { className: "size-5", "aria-hidden": "true" })))); })))),
|
|
61
61
|
error && (react_1.default.createElement("p", { id: "".concat(nodeQueryKey, "-error"), className: "mt-2 text-sm text-red-500" }, error))));
|
|
62
62
|
};
|
package/package.json
CHANGED
|
@@ -1,12 +1,21 @@
|
|
|
1
1
|
export interface VistaComboboxV1Props {
|
|
2
|
+
checkClassName?: string;
|
|
3
|
+
comboboxButtonClassName?: string;
|
|
4
|
+
comboboxClassName?: string;
|
|
5
|
+
comboboxInputClassName?: string;
|
|
6
|
+
comboboxOptionClassName?: string;
|
|
7
|
+
comboboxOptionsClassName?: string;
|
|
2
8
|
error?: string;
|
|
3
9
|
handleInputOnChange: (k: string, v: string) => void;
|
|
4
10
|
handleOnBlur: (k: string, v: string) => void;
|
|
5
11
|
handleOnChange: (k: string, v: string) => void;
|
|
12
|
+
inputIconClassName?: string;
|
|
6
13
|
label: string;
|
|
14
|
+
labelClassName?: string;
|
|
7
15
|
listItems: any[];
|
|
8
16
|
nodeQueryKey: string;
|
|
9
17
|
nodeSelectKey: string;
|
|
18
|
+
placeholder: string;
|
|
10
19
|
query: string;
|
|
11
20
|
required?: boolean;
|
|
12
21
|
selectKey1: string;
|