@vuu-ui/vuu-data-react 2.3.0 → 3.0.0-beta.2
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.
- package/cjs/data-editing/get-data-item-edit-control.js +9 -8
- package/cjs/data-editing/get-data-item-edit-control.js.map +1 -1
- package/esm/data-editing/get-data-item-edit-control.js +10 -9
- package/esm/data-editing/get-data-item-edit-control.js.map +1 -1
- package/package.json +14 -14
- package/types/data-editing/get-data-item-edit-control.d.ts +5 -4
|
@@ -6,12 +6,13 @@ var vuuUtils = require('@vuu-ui/vuu-utils');
|
|
|
6
6
|
var vuuFilters = require('@vuu-ui/vuu-filters');
|
|
7
7
|
|
|
8
8
|
const getDataItemEditControl = ({
|
|
9
|
-
InputProps
|
|
9
|
+
InputProps,
|
|
10
10
|
TypeaheadProps,
|
|
11
11
|
className,
|
|
12
12
|
commitOnBlur,
|
|
13
13
|
commitWhenCleared,
|
|
14
14
|
dataDescriptor,
|
|
15
|
+
editOperation = "update",
|
|
15
16
|
errorMessage,
|
|
16
17
|
onCommit,
|
|
17
18
|
table,
|
|
@@ -22,20 +23,20 @@ const getDataItemEditControl = ({
|
|
|
22
23
|
onCommit(evt, value.toString());
|
|
23
24
|
};
|
|
24
25
|
const dataVariant = variant && variant !== "toggle" ? variant : void 0;
|
|
25
|
-
if (dataDescriptor
|
|
26
|
+
if (!vuuUtils.isDataValueEditable(dataDescriptor, editOperation, true)) {
|
|
26
27
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
27
28
|
vuuUiControls.VuuInput,
|
|
28
29
|
{
|
|
29
30
|
variant: "secondary",
|
|
30
|
-
...
|
|
31
|
+
...InputProps,
|
|
31
32
|
onCommit,
|
|
32
33
|
readOnly: true,
|
|
33
34
|
"data-edit-control": true
|
|
34
35
|
}
|
|
35
36
|
);
|
|
36
37
|
} else if (vuuUtils.isTimeDataValue(dataDescriptor)) {
|
|
37
|
-
if (
|
|
38
|
-
const { value, onChange } =
|
|
38
|
+
if (InputProps?.inputProps) {
|
|
39
|
+
const { value, onChange } = InputProps.inputProps;
|
|
39
40
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
40
41
|
vuuUiControls.VuuTimePicker,
|
|
41
42
|
{
|
|
@@ -67,14 +68,14 @@ const getDataItemEditControl = ({
|
|
|
67
68
|
onCommit,
|
|
68
69
|
table,
|
|
69
70
|
values,
|
|
70
|
-
value:
|
|
71
|
+
value: InputProps?.inputProps?.value ?? "all"
|
|
71
72
|
}
|
|
72
73
|
);
|
|
73
74
|
} else {
|
|
74
75
|
return /* @__PURE__ */ jsxRuntime.jsx(
|
|
75
76
|
vuuUiControls.VuuTypeaheadInput,
|
|
76
77
|
{
|
|
77
|
-
...
|
|
78
|
+
...InputProps,
|
|
78
79
|
...TypeaheadProps,
|
|
79
80
|
className,
|
|
80
81
|
column: dataDescriptor.name,
|
|
@@ -90,7 +91,7 @@ const getDataItemEditControl = ({
|
|
|
90
91
|
vuuUiControls.VuuInput,
|
|
91
92
|
{
|
|
92
93
|
variant: "secondary",
|
|
93
|
-
...
|
|
94
|
+
...InputProps,
|
|
94
95
|
className,
|
|
95
96
|
commitOnBlur,
|
|
96
97
|
commitWhenCleared,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"get-data-item-edit-control.js","sources":["../../../../packages/vuu-data-react/src/data-editing/get-data-item-edit-control.tsx"],"sourcesContent":["import type {\n DataValueDescriptor,\n TableSchemaTable,\n} from \"@vuu-ui/vuu-data-types\";\nimport {\n VuuDatePicker,\n VuuInput,\n VuuTimePicker,\n VuuTypeaheadInput,\n VuuTypeaheadInputProps,\n} from \"@vuu-ui/vuu-ui-controls\";\nimport {\n CommitHandler,\n isDateTimeDataValue,\n isTimeDataValue,\n} from \"@vuu-ui/vuu-utils\";\nimport { InputProps } from \"@salt-ds/core\";\nimport { asTimeString } from \"@vuu-ui/vuu-utils\";\nimport { ToggleFilter } from \"@vuu-ui/vuu-filters\";\n\n/**\n * variant can be used to provide a rendering hint to the filter control rendered.\n * 'toggle' for A ToggleButtonGroup, only suitable for up to 3 value choices\n * 'search' to render a search icon and require at least one character to be entered.\n * 'pick' to show a dropdown list, even before any text is entered, best for smaller lists\n */\nexport type FilterControlVariant = \"search\" | \"pick\" | \"toggle\";\nexport interface DataItemEditControlProps {\n InputProps?: Partial<InputProps>;\n TypeaheadProps?: Pick<\n VuuTypeaheadInputProps,\n | \"highlightFirstSuggestion\"\n | \"minCharacterCountToTriggerSuggestions\"\n | \"selectOnTab\"\n >;\n className?: string;\n commitOnBlur?: boolean;\n commitWhenCleared?: boolean;\n /**\n * A table column or form field Descriptor.\n */\n dataDescriptor: DataValueDescriptor;\n errorMessage?: string;\n onCommit: CommitHandler<HTMLElement>;\n table?: TableSchemaTable;\n /**\n * Where provided, only these values will be offered as suggestions.\n * They will be validated against server with Typeahead service, so\n * unavailable options are not offered.\n * Recommended for toggle filters, not usually necessary for other\n * filter variants.\n */\n values?: string[];\n variant?: FilterControlVariant;\n}\n\nexport type ValidationStatus = \"initial\" | true | string;\n\nexport const getDataItemEditControl = ({\n InputProps,\n TypeaheadProps,\n className,\n commitOnBlur,\n commitWhenCleared,\n dataDescriptor,\n errorMessage,\n onCommit,\n table,\n values,\n variant,\n}: DataItemEditControlProps) => {\n const handleCommitNumber: CommitHandler<HTMLElement, number> = (\n evt,\n value,\n ) => {\n onCommit(evt, value.toString());\n };\n\n const dataVariant = variant && variant !== \"toggle\" ? variant : undefined;\n\n if (dataDescriptor
|
|
1
|
+
{"version":3,"file":"get-data-item-edit-control.js","sources":["../../../../packages/vuu-data-react/src/data-editing/get-data-item-edit-control.tsx"],"sourcesContent":["import type {\n DataValueDescriptor,\n TableSchemaTable,\n} from \"@vuu-ui/vuu-data-types\";\nimport {\n VuuDatePicker,\n VuuInput,\n VuuTimePicker,\n VuuTypeaheadInput,\n type VuuTypeaheadInputProps,\n} from \"@vuu-ui/vuu-ui-controls\";\nimport {\n type CommitHandler,\n isDateTimeDataValue,\n isDataValueEditable,\n isTimeDataValue,\n} from \"@vuu-ui/vuu-utils\";\nimport type { InputProps } from \"@salt-ds/core\";\nimport { asTimeString } from \"@vuu-ui/vuu-utils\";\nimport { ToggleFilter } from \"@vuu-ui/vuu-filters\";\n\n/**\n * variant can be used to provide a rendering hint to the filter control rendered.\n * 'toggle' for A ToggleButtonGroup, only suitable for up to 3 value choices\n * 'search' to render a search icon and require at least one character to be entered.\n * 'pick' to show a dropdown list, even before any text is entered, best for smaller lists\n */\nexport type FilterControlVariant = \"search\" | \"pick\" | \"toggle\";\nexport interface DataItemEditControlProps {\n InputProps?: Partial<InputProps>;\n TypeaheadProps?: Pick<\n VuuTypeaheadInputProps,\n | \"highlightFirstSuggestion\"\n | \"minCharacterCountToTriggerSuggestions\"\n | \"selectOnTab\"\n >;\n className?: string;\n commitOnBlur?: boolean;\n commitWhenCleared?: boolean;\n /**\n * A table column or form field Descriptor.\n */\n dataDescriptor: DataValueDescriptor;\n editOperation?: \"insert\" | \"update\";\n errorMessage?: string;\n onCommit: CommitHandler<HTMLElement>;\n table?: TableSchemaTable;\n /**\n * Where provided, only these values will be offered as suggestions.\n * They will be validated against server with Typeahead service, so\n * unavailable options are not offered.\n * Recommended for toggle filters, not usually necessary for other\n * filter variants.\n */\n values?: string[];\n variant?: FilterControlVariant;\n}\n\nexport type ValidationStatus = \"initial\" | true | string;\n\nexport const getDataItemEditControl = ({\n InputProps,\n TypeaheadProps,\n className,\n commitOnBlur,\n commitWhenCleared,\n dataDescriptor,\n editOperation = \"update\",\n errorMessage,\n onCommit,\n table,\n values,\n variant,\n}: DataItemEditControlProps) => {\n const handleCommitNumber: CommitHandler<HTMLElement, number> = (\n evt,\n value,\n ) => {\n onCommit(evt, value.toString());\n };\n\n const dataVariant = variant && variant !== \"toggle\" ? variant : undefined;\n\n // WOnb't this prevent a filter on an non-editable field ?\n if (!isDataValueEditable(dataDescriptor, editOperation, true)) {\n return (\n <VuuInput\n variant=\"secondary\"\n {...InputProps}\n onCommit={onCommit}\n readOnly\n data-edit-control\n />\n );\n } else if (isTimeDataValue(dataDescriptor)) {\n if (InputProps?.inputProps) {\n const { value, onChange } = InputProps.inputProps;\n return (\n <VuuTimePicker\n className={className}\n value={asTimeString(value, true)}\n onChange={onChange}\n onCommit={onCommit}\n data-edit-control\n />\n );\n }\n } else if (isDateTimeDataValue(dataDescriptor)) {\n return (\n <VuuDatePicker\n className={className}\n onCommit={handleCommitNumber}\n data-edit-control\n />\n );\n } else if (dataDescriptor.serverDataType === \"string\" && table) {\n if (variant === \"toggle\" && values?.length) {\n return (\n <ToggleFilter\n className={className}\n column={dataDescriptor.name}\n data-edit-control\n onCommit={onCommit}\n table={table}\n values={values}\n value={InputProps?.inputProps?.value ?? \"all\"}\n />\n );\n } else {\n return (\n <VuuTypeaheadInput\n {...InputProps}\n {...TypeaheadProps}\n className={className}\n column={dataDescriptor.name}\n data-edit-control\n data-variant={dataVariant}\n onCommit={onCommit}\n table={table}\n />\n );\n }\n }\n\n return (\n <VuuInput\n variant=\"secondary\"\n {...InputProps}\n className={className}\n commitOnBlur={commitOnBlur}\n commitWhenCleared={commitWhenCleared}\n onCommit={onCommit}\n errorMessage={errorMessage}\n data-edit-control\n />\n );\n};\n"],"names":["isDataValueEditable","jsx","VuuInput","isTimeDataValue","VuuTimePicker","asTimeString","isDateTimeDataValue","VuuDatePicker","ToggleFilter","VuuTypeaheadInput"],"mappings":"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"}
|
|
@@ -1,15 +1,16 @@
|
|
|
1
1
|
import { jsx } from 'react/jsx-runtime';
|
|
2
2
|
import { VuuInput, VuuTimePicker, VuuDatePicker, VuuTypeaheadInput } from '@vuu-ui/vuu-ui-controls';
|
|
3
|
-
import { isTimeDataValue, asTimeString, isDateTimeDataValue } from '@vuu-ui/vuu-utils';
|
|
3
|
+
import { isDataValueEditable, isTimeDataValue, asTimeString, isDateTimeDataValue } from '@vuu-ui/vuu-utils';
|
|
4
4
|
import { ToggleFilter } from '@vuu-ui/vuu-filters';
|
|
5
5
|
|
|
6
6
|
const getDataItemEditControl = ({
|
|
7
|
-
InputProps
|
|
7
|
+
InputProps,
|
|
8
8
|
TypeaheadProps,
|
|
9
9
|
className,
|
|
10
10
|
commitOnBlur,
|
|
11
11
|
commitWhenCleared,
|
|
12
12
|
dataDescriptor,
|
|
13
|
+
editOperation = "update",
|
|
13
14
|
errorMessage,
|
|
14
15
|
onCommit,
|
|
15
16
|
table,
|
|
@@ -20,20 +21,20 @@ const getDataItemEditControl = ({
|
|
|
20
21
|
onCommit(evt, value.toString());
|
|
21
22
|
};
|
|
22
23
|
const dataVariant = variant && variant !== "toggle" ? variant : void 0;
|
|
23
|
-
if (dataDescriptor
|
|
24
|
+
if (!isDataValueEditable(dataDescriptor, editOperation, true)) {
|
|
24
25
|
return /* @__PURE__ */ jsx(
|
|
25
26
|
VuuInput,
|
|
26
27
|
{
|
|
27
28
|
variant: "secondary",
|
|
28
|
-
...
|
|
29
|
+
...InputProps,
|
|
29
30
|
onCommit,
|
|
30
31
|
readOnly: true,
|
|
31
32
|
"data-edit-control": true
|
|
32
33
|
}
|
|
33
34
|
);
|
|
34
35
|
} else if (isTimeDataValue(dataDescriptor)) {
|
|
35
|
-
if (
|
|
36
|
-
const { value, onChange } =
|
|
36
|
+
if (InputProps?.inputProps) {
|
|
37
|
+
const { value, onChange } = InputProps.inputProps;
|
|
37
38
|
return /* @__PURE__ */ jsx(
|
|
38
39
|
VuuTimePicker,
|
|
39
40
|
{
|
|
@@ -65,14 +66,14 @@ const getDataItemEditControl = ({
|
|
|
65
66
|
onCommit,
|
|
66
67
|
table,
|
|
67
68
|
values,
|
|
68
|
-
value:
|
|
69
|
+
value: InputProps?.inputProps?.value ?? "all"
|
|
69
70
|
}
|
|
70
71
|
);
|
|
71
72
|
} else {
|
|
72
73
|
return /* @__PURE__ */ jsx(
|
|
73
74
|
VuuTypeaheadInput,
|
|
74
75
|
{
|
|
75
|
-
...
|
|
76
|
+
...InputProps,
|
|
76
77
|
...TypeaheadProps,
|
|
77
78
|
className,
|
|
78
79
|
column: dataDescriptor.name,
|
|
@@ -88,7 +89,7 @@ const getDataItemEditControl = ({
|
|
|
88
89
|
VuuInput,
|
|
89
90
|
{
|
|
90
91
|
variant: "secondary",
|
|
91
|
-
...
|
|
92
|
+
...InputProps,
|
|
92
93
|
className,
|
|
93
94
|
commitOnBlur,
|
|
94
95
|
commitWhenCleared,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"get-data-item-edit-control.js","sources":["../../../../packages/vuu-data-react/src/data-editing/get-data-item-edit-control.tsx"],"sourcesContent":["import type {\n DataValueDescriptor,\n TableSchemaTable,\n} from \"@vuu-ui/vuu-data-types\";\nimport {\n VuuDatePicker,\n VuuInput,\n VuuTimePicker,\n VuuTypeaheadInput,\n VuuTypeaheadInputProps,\n} from \"@vuu-ui/vuu-ui-controls\";\nimport {\n CommitHandler,\n isDateTimeDataValue,\n isTimeDataValue,\n} from \"@vuu-ui/vuu-utils\";\nimport { InputProps } from \"@salt-ds/core\";\nimport { asTimeString } from \"@vuu-ui/vuu-utils\";\nimport { ToggleFilter } from \"@vuu-ui/vuu-filters\";\n\n/**\n * variant can be used to provide a rendering hint to the filter control rendered.\n * 'toggle' for A ToggleButtonGroup, only suitable for up to 3 value choices\n * 'search' to render a search icon and require at least one character to be entered.\n * 'pick' to show a dropdown list, even before any text is entered, best for smaller lists\n */\nexport type FilterControlVariant = \"search\" | \"pick\" | \"toggle\";\nexport interface DataItemEditControlProps {\n InputProps?: Partial<InputProps>;\n TypeaheadProps?: Pick<\n VuuTypeaheadInputProps,\n | \"highlightFirstSuggestion\"\n | \"minCharacterCountToTriggerSuggestions\"\n | \"selectOnTab\"\n >;\n className?: string;\n commitOnBlur?: boolean;\n commitWhenCleared?: boolean;\n /**\n * A table column or form field Descriptor.\n */\n dataDescriptor: DataValueDescriptor;\n errorMessage?: string;\n onCommit: CommitHandler<HTMLElement>;\n table?: TableSchemaTable;\n /**\n * Where provided, only these values will be offered as suggestions.\n * They will be validated against server with Typeahead service, so\n * unavailable options are not offered.\n * Recommended for toggle filters, not usually necessary for other\n * filter variants.\n */\n values?: string[];\n variant?: FilterControlVariant;\n}\n\nexport type ValidationStatus = \"initial\" | true | string;\n\nexport const getDataItemEditControl = ({\n InputProps,\n TypeaheadProps,\n className,\n commitOnBlur,\n commitWhenCleared,\n dataDescriptor,\n errorMessage,\n onCommit,\n table,\n values,\n variant,\n}: DataItemEditControlProps) => {\n const handleCommitNumber: CommitHandler<HTMLElement, number> = (\n evt,\n value,\n ) => {\n onCommit(evt, value.toString());\n };\n\n const dataVariant = variant && variant !== \"toggle\" ? variant : undefined;\n\n if (dataDescriptor
|
|
1
|
+
{"version":3,"file":"get-data-item-edit-control.js","sources":["../../../../packages/vuu-data-react/src/data-editing/get-data-item-edit-control.tsx"],"sourcesContent":["import type {\n DataValueDescriptor,\n TableSchemaTable,\n} from \"@vuu-ui/vuu-data-types\";\nimport {\n VuuDatePicker,\n VuuInput,\n VuuTimePicker,\n VuuTypeaheadInput,\n type VuuTypeaheadInputProps,\n} from \"@vuu-ui/vuu-ui-controls\";\nimport {\n type CommitHandler,\n isDateTimeDataValue,\n isDataValueEditable,\n isTimeDataValue,\n} from \"@vuu-ui/vuu-utils\";\nimport type { InputProps } from \"@salt-ds/core\";\nimport { asTimeString } from \"@vuu-ui/vuu-utils\";\nimport { ToggleFilter } from \"@vuu-ui/vuu-filters\";\n\n/**\n * variant can be used to provide a rendering hint to the filter control rendered.\n * 'toggle' for A ToggleButtonGroup, only suitable for up to 3 value choices\n * 'search' to render a search icon and require at least one character to be entered.\n * 'pick' to show a dropdown list, even before any text is entered, best for smaller lists\n */\nexport type FilterControlVariant = \"search\" | \"pick\" | \"toggle\";\nexport interface DataItemEditControlProps {\n InputProps?: Partial<InputProps>;\n TypeaheadProps?: Pick<\n VuuTypeaheadInputProps,\n | \"highlightFirstSuggestion\"\n | \"minCharacterCountToTriggerSuggestions\"\n | \"selectOnTab\"\n >;\n className?: string;\n commitOnBlur?: boolean;\n commitWhenCleared?: boolean;\n /**\n * A table column or form field Descriptor.\n */\n dataDescriptor: DataValueDescriptor;\n editOperation?: \"insert\" | \"update\";\n errorMessage?: string;\n onCommit: CommitHandler<HTMLElement>;\n table?: TableSchemaTable;\n /**\n * Where provided, only these values will be offered as suggestions.\n * They will be validated against server with Typeahead service, so\n * unavailable options are not offered.\n * Recommended for toggle filters, not usually necessary for other\n * filter variants.\n */\n values?: string[];\n variant?: FilterControlVariant;\n}\n\nexport type ValidationStatus = \"initial\" | true | string;\n\nexport const getDataItemEditControl = ({\n InputProps,\n TypeaheadProps,\n className,\n commitOnBlur,\n commitWhenCleared,\n dataDescriptor,\n editOperation = \"update\",\n errorMessage,\n onCommit,\n table,\n values,\n variant,\n}: DataItemEditControlProps) => {\n const handleCommitNumber: CommitHandler<HTMLElement, number> = (\n evt,\n value,\n ) => {\n onCommit(evt, value.toString());\n };\n\n const dataVariant = variant && variant !== \"toggle\" ? variant : undefined;\n\n // WOnb't this prevent a filter on an non-editable field ?\n if (!isDataValueEditable(dataDescriptor, editOperation, true)) {\n return (\n <VuuInput\n variant=\"secondary\"\n {...InputProps}\n onCommit={onCommit}\n readOnly\n data-edit-control\n />\n );\n } else if (isTimeDataValue(dataDescriptor)) {\n if (InputProps?.inputProps) {\n const { value, onChange } = InputProps.inputProps;\n return (\n <VuuTimePicker\n className={className}\n value={asTimeString(value, true)}\n onChange={onChange}\n onCommit={onCommit}\n data-edit-control\n />\n );\n }\n } else if (isDateTimeDataValue(dataDescriptor)) {\n return (\n <VuuDatePicker\n className={className}\n onCommit={handleCommitNumber}\n data-edit-control\n />\n );\n } else if (dataDescriptor.serverDataType === \"string\" && table) {\n if (variant === \"toggle\" && values?.length) {\n return (\n <ToggleFilter\n className={className}\n column={dataDescriptor.name}\n data-edit-control\n onCommit={onCommit}\n table={table}\n values={values}\n value={InputProps?.inputProps?.value ?? \"all\"}\n />\n );\n } else {\n return (\n <VuuTypeaheadInput\n {...InputProps}\n {...TypeaheadProps}\n className={className}\n column={dataDescriptor.name}\n data-edit-control\n data-variant={dataVariant}\n onCommit={onCommit}\n table={table}\n />\n );\n }\n }\n\n return (\n <VuuInput\n variant=\"secondary\"\n {...InputProps}\n className={className}\n commitOnBlur={commitOnBlur}\n commitWhenCleared={commitWhenCleared}\n onCommit={onCommit}\n errorMessage={errorMessage}\n data-edit-control\n />\n );\n};\n"],"names":[],"mappings":";;;;;AA4DO,MAAM,yBAAyB,CAAC;AAAA,EACrC,UAAA;AAAA,EACA,cAAA;AAAA,EACA,SAAA;AAAA,EACA,YAAA;AAAA,EACA,iBAAA;AAAA,EACA,cAAA;AAAA,EACA,aAAgB,GAAA,QAAA;AAAA,EAChB,YAAA;AAAA,EACA,QAAA;AAAA,EACA,KAAA;AAAA,EACA,MAAA;AAAA,EACA;AACF,CAAgC,KAAA;AAC9B,EAAM,MAAA,kBAAA,GAAyD,CAC7D,GAAA,EACA,KACG,KAAA;AACH,IAAS,QAAA,CAAA,GAAA,EAAK,KAAM,CAAA,QAAA,EAAU,CAAA;AAAA,GAChC;AAEA,EAAA,MAAM,WAAc,GAAA,OAAA,IAAW,OAAY,KAAA,QAAA,GAAW,OAAU,GAAA,KAAA,CAAA;AAGhE,EAAA,IAAI,CAAC,mBAAA,CAAoB,cAAgB,EAAA,aAAA,EAAe,IAAI,CAAG,EAAA;AAC7D,IACE,uBAAA,GAAA;AAAA,MAAC,QAAA;AAAA,MAAA;AAAA,QACC,OAAQ,EAAA,WAAA;AAAA,QACP,GAAG,UAAA;AAAA,QACJ,QAAA;AAAA,QACA,QAAQ,EAAA,IAAA;AAAA,QACR,mBAAiB,EAAA;AAAA;AAAA,KACnB;AAAA,GAEJ,MAAA,IAAW,eAAgB,CAAA,cAAc,CAAG,EAAA;AAC1C,IAAA,IAAI,YAAY,UAAY,EAAA;AAC1B,MAAA,MAAM,EAAE,KAAA,EAAO,QAAS,EAAA,GAAI,UAAW,CAAA,UAAA;AACvC,MACE,uBAAA,GAAA;AAAA,QAAC,aAAA;AAAA,QAAA;AAAA,UACC,SAAA;AAAA,UACA,KAAA,EAAO,YAAa,CAAA,KAAA,EAAO,IAAI,CAAA;AAAA,UAC/B,QAAA;AAAA,UACA,QAAA;AAAA,UACA,mBAAiB,EAAA;AAAA;AAAA,OACnB;AAAA;AAEJ,GACF,MAAA,IAAW,mBAAoB,CAAA,cAAc,CAAG,EAAA;AAC9C,IACE,uBAAA,GAAA;AAAA,MAAC,aAAA;AAAA,MAAA;AAAA,QACC,SAAA;AAAA,QACA,QAAU,EAAA,kBAAA;AAAA,QACV,mBAAiB,EAAA;AAAA;AAAA,KACnB;AAAA,GAEO,MAAA,IAAA,cAAA,CAAe,cAAmB,KAAA,QAAA,IAAY,KAAO,EAAA;AAC9D,IAAI,IAAA,OAAA,KAAY,QAAY,IAAA,MAAA,EAAQ,MAAQ,EAAA;AAC1C,MACE,uBAAA,GAAA;AAAA,QAAC,YAAA;AAAA,QAAA;AAAA,UACC,SAAA;AAAA,UACA,QAAQ,cAAe,CAAA,IAAA;AAAA,UACvB,mBAAiB,EAAA,IAAA;AAAA,UACjB,QAAA;AAAA,UACA,KAAA;AAAA,UACA,MAAA;AAAA,UACA,KAAA,EAAO,UAAY,EAAA,UAAA,EAAY,KAAS,IAAA;AAAA;AAAA,OAC1C;AAAA,KAEG,MAAA;AACL,MACE,uBAAA,GAAA;AAAA,QAAC,iBAAA;AAAA,QAAA;AAAA,UACE,GAAG,UAAA;AAAA,UACH,GAAG,cAAA;AAAA,UACJ,SAAA;AAAA,UACA,QAAQ,cAAe,CAAA,IAAA;AAAA,UACvB,mBAAiB,EAAA,IAAA;AAAA,UACjB,cAAc,EAAA,WAAA;AAAA,UACd,QAAA;AAAA,UACA;AAAA;AAAA,OACF;AAAA;AAEJ;AAGF,EACE,uBAAA,GAAA;AAAA,IAAC,QAAA;AAAA,IAAA;AAAA,MACC,OAAQ,EAAA,WAAA;AAAA,MACP,GAAG,UAAA;AAAA,MACJ,SAAA;AAAA,MACA,YAAA;AAAA,MACA,iBAAA;AAAA,MACA,QAAA;AAAA,MACA,YAAA;AAAA,MACA,mBAAiB,EAAA;AAAA;AAAA,GACnB;AAEJ;;;;"}
|
package/package.json
CHANGED
|
@@ -1,23 +1,23 @@
|
|
|
1
1
|
{
|
|
2
|
-
"version": "
|
|
2
|
+
"version": "3.0.0-beta.2",
|
|
3
3
|
"author": "heswell",
|
|
4
4
|
"license": "Apache-2.0",
|
|
5
5
|
"devDependencies": {
|
|
6
|
-
"@vuu-ui/vuu-data-types": "
|
|
7
|
-
"@vuu-ui/vuu-filter-types": "
|
|
8
|
-
"@vuu-ui/vuu-protocol-types": "
|
|
9
|
-
"@vuu-ui/vuu-table-types": "
|
|
6
|
+
"@vuu-ui/vuu-data-types": "3.0.0-beta.2",
|
|
7
|
+
"@vuu-ui/vuu-filter-types": "3.0.0-beta.2",
|
|
8
|
+
"@vuu-ui/vuu-protocol-types": "3.0.0-beta.2",
|
|
9
|
+
"@vuu-ui/vuu-table-types": "3.0.0-beta.2"
|
|
10
10
|
},
|
|
11
11
|
"dependencies": {
|
|
12
|
-
"@vuu-ui/vuu-context-menu": "
|
|
13
|
-
"@vuu-ui/vuu-data-remote": "
|
|
14
|
-
"@vuu-ui/vuu-filter-parser": "
|
|
15
|
-
"@vuu-ui/vuu-filters": "
|
|
16
|
-
"@vuu-ui/vuu-layout": "
|
|
17
|
-
"@vuu-ui/vuu-notifications": "
|
|
18
|
-
"@vuu-ui/vuu-ui-controls": "
|
|
19
|
-
"@vuu-ui/vuu-utils": "
|
|
20
|
-
"@vuu-ui/vuu-table": "
|
|
12
|
+
"@vuu-ui/vuu-context-menu": "3.0.0-beta.2",
|
|
13
|
+
"@vuu-ui/vuu-data-remote": "3.0.0-beta.2",
|
|
14
|
+
"@vuu-ui/vuu-filter-parser": "3.0.0-beta.2",
|
|
15
|
+
"@vuu-ui/vuu-filters": "3.0.0-beta.2",
|
|
16
|
+
"@vuu-ui/vuu-layout": "3.0.0-beta.2",
|
|
17
|
+
"@vuu-ui/vuu-notifications": "3.0.0-beta.2",
|
|
18
|
+
"@vuu-ui/vuu-ui-controls": "3.0.0-beta.2",
|
|
19
|
+
"@vuu-ui/vuu-utils": "3.0.0-beta.2",
|
|
20
|
+
"@vuu-ui/vuu-table": "3.0.0-beta.2",
|
|
21
21
|
"@salt-ds/core": "1.54.1",
|
|
22
22
|
"@salt-ds/styles": "0.2.1",
|
|
23
23
|
"@salt-ds/window": "0.1.1"
|
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
import type { DataValueDescriptor, TableSchemaTable } from "@vuu-ui/vuu-data-types";
|
|
2
|
-
import { VuuTypeaheadInputProps } from "@vuu-ui/vuu-ui-controls";
|
|
3
|
-
import { CommitHandler } from "@vuu-ui/vuu-utils";
|
|
4
|
-
import { InputProps } from "@salt-ds/core";
|
|
2
|
+
import { type VuuTypeaheadInputProps } from "@vuu-ui/vuu-ui-controls";
|
|
3
|
+
import { type CommitHandler } from "@vuu-ui/vuu-utils";
|
|
4
|
+
import type { InputProps } from "@salt-ds/core";
|
|
5
5
|
/**
|
|
6
6
|
* variant can be used to provide a rendering hint to the filter control rendered.
|
|
7
7
|
* 'toggle' for A ToggleButtonGroup, only suitable for up to 3 value choices
|
|
@@ -19,6 +19,7 @@ export interface DataItemEditControlProps {
|
|
|
19
19
|
* A table column or form field Descriptor.
|
|
20
20
|
*/
|
|
21
21
|
dataDescriptor: DataValueDescriptor;
|
|
22
|
+
editOperation?: "insert" | "update";
|
|
22
23
|
errorMessage?: string;
|
|
23
24
|
onCommit: CommitHandler<HTMLElement>;
|
|
24
25
|
table?: TableSchemaTable;
|
|
@@ -33,4 +34,4 @@ export interface DataItemEditControlProps {
|
|
|
33
34
|
variant?: FilterControlVariant;
|
|
34
35
|
}
|
|
35
36
|
export type ValidationStatus = "initial" | true | string;
|
|
36
|
-
export declare const getDataItemEditControl: ({ InputProps, TypeaheadProps, className, commitOnBlur, commitWhenCleared, dataDescriptor, errorMessage, onCommit, table, values, variant, }: DataItemEditControlProps) => import("react/jsx-runtime").JSX.Element;
|
|
37
|
+
export declare const getDataItemEditControl: ({ InputProps, TypeaheadProps, className, commitOnBlur, commitWhenCleared, dataDescriptor, editOperation, errorMessage, onCommit, table, values, variant, }: DataItemEditControlProps) => import("react/jsx-runtime").JSX.Element;
|