@archbase/core 3.0.23 → 4.0.0
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.
|
@@ -0,0 +1,110 @@
|
|
|
1
|
+
import { FloatingPosition, MantineSize, MantineStyleProp, OptionsFilter } from '@mantine/core';
|
|
2
|
+
import { default as React, FocusEventHandler, ReactNode } from 'react';
|
|
3
|
+
import { ArchbaseDataSource } from '../datasource';
|
|
4
|
+
export interface ArchbaseMultiSelectProps<T, ID, O> {
|
|
5
|
+
/** Permite ou não desselecionar um item */
|
|
6
|
+
allowDeselect?: boolean;
|
|
7
|
+
/** Indicador se permite limpar o select */
|
|
8
|
+
clearable?: boolean;
|
|
9
|
+
/** Fonte de dados onde será atribuido o item selecionado */
|
|
10
|
+
dataSource?: ArchbaseDataSource<T, ID>;
|
|
11
|
+
/** Campo onde deverá ser atribuido o item selecionado na fonte de dados */
|
|
12
|
+
dataField?: string;
|
|
13
|
+
/** Indicador se o select está desabilitado */
|
|
14
|
+
disabled?: boolean;
|
|
15
|
+
/** Indicador se o select é somente leitura. Obs: usado em conjunto com o status da fonte de dados */
|
|
16
|
+
readOnly?: boolean;
|
|
17
|
+
/** Texto explicativo do select */
|
|
18
|
+
placeholder?: string;
|
|
19
|
+
/** Título do select */
|
|
20
|
+
label?: string;
|
|
21
|
+
/** Descrição do select */
|
|
22
|
+
description?: string;
|
|
23
|
+
/** Último erro ocorrido no select */
|
|
24
|
+
error?: string;
|
|
25
|
+
/** Permite pesquisar no select */
|
|
26
|
+
searchable?: boolean;
|
|
27
|
+
/** Icon a esquerda do select */
|
|
28
|
+
icon?: ReactNode;
|
|
29
|
+
/** Largura do icone a esquerda do select */
|
|
30
|
+
iconWidth?: MantineSize;
|
|
31
|
+
/** Valor de entrada controlado */
|
|
32
|
+
value?: any[];
|
|
33
|
+
/** Valor padrão de entrada não controlado */
|
|
34
|
+
defaultValue?: any[];
|
|
35
|
+
/** Função com base em quais itens no menu suspenso são filtrados */
|
|
36
|
+
filter?: OptionsFilter;
|
|
37
|
+
/** Estilo do select */
|
|
38
|
+
style?: MantineStyleProp;
|
|
39
|
+
/** Tamanho do campo */
|
|
40
|
+
size?: MantineSize;
|
|
41
|
+
/** Largura do select */
|
|
42
|
+
width?: number | string | undefined;
|
|
43
|
+
/** Estado aberto do menu suspenso inicial */
|
|
44
|
+
initiallyOpened?: boolean;
|
|
45
|
+
/** Alterar renderizador de item */
|
|
46
|
+
itemComponent?: React.FC<any>;
|
|
47
|
+
/** Alterar renderizador de item selecionado */
|
|
48
|
+
selectedItemComponent?: React.FC<any>;
|
|
49
|
+
/** Chamado quando o menu suspenso é aberto */
|
|
50
|
+
onDropdownOpen?(): void;
|
|
51
|
+
/** Chamado quando o menu suspenso é aberto */
|
|
52
|
+
onDropdownClose?(): void;
|
|
53
|
+
/** Limite a quantidade de itens exibidos por vez para seleção pesquisável */
|
|
54
|
+
limit?: number;
|
|
55
|
+
/** Rótulo nada encontrado */
|
|
56
|
+
nothingFound?: React.ReactNode;
|
|
57
|
+
/** Índice z dropdown */
|
|
58
|
+
zIndex?: React.CSSProperties['zIndex'];
|
|
59
|
+
/** Comportamento de posicionamento dropdown */
|
|
60
|
+
dropdownPosition?: FloatingPosition;
|
|
61
|
+
/** Evento quando os valores selecionados são alterados */
|
|
62
|
+
onChangeValues?: (values: O[]) => void;
|
|
63
|
+
/** Evento quando o foco sai do select */
|
|
64
|
+
onFocusExit?: FocusEventHandler<T> | undefined;
|
|
65
|
+
/** Evento quando o select recebe o foco */
|
|
66
|
+
onFocusEnter?: FocusEventHandler<T> | undefined;
|
|
67
|
+
/** Opções de seleção iniciais */
|
|
68
|
+
initialOptions?: O[];
|
|
69
|
+
/** Function que retorna o label de uma opção */
|
|
70
|
+
getOptionLabel: (option: O) => string;
|
|
71
|
+
/** Function que retorna o valor de uma opção */
|
|
72
|
+
getOptionValue: (option: O) => any;
|
|
73
|
+
/** Function que retorna a imagem de uma opção */
|
|
74
|
+
getOptionImage?: (option: O) => any | undefined | null;
|
|
75
|
+
/** Indica se o select tem o preenchimento obrigatório */
|
|
76
|
+
required?: boolean;
|
|
77
|
+
/** Chamado sempre que o valor da pesquisa muda */
|
|
78
|
+
onSearchChange?(query: string): void;
|
|
79
|
+
/** Converte o valor antes de atribuir ao field do registro atual no datasource */
|
|
80
|
+
converter?: (value: O) => any;
|
|
81
|
+
/** Function que busca o valor original antes de converter pelo valor de retorno do converter */
|
|
82
|
+
getConvertedOption?: (value: any) => Promise<O>;
|
|
83
|
+
/** Coleção de opções do select */
|
|
84
|
+
options?: ReadonlyArray<any> | ArchbaseDataSource<any, any>;
|
|
85
|
+
/** Campo do label quando options é um ArchbaseDataSource */
|
|
86
|
+
optionsLabelField?: string;
|
|
87
|
+
/** Coleção de ReactNode que representam as opções do select */
|
|
88
|
+
children?: ReactNode | ReactNode[];
|
|
89
|
+
/** Máxima altura do dropdown */
|
|
90
|
+
maxDropdownHeight?: number;
|
|
91
|
+
/** Função de ordenação customizada para os valores selecionados */
|
|
92
|
+
sortSelectedValues?: (a: O, b: O) => number;
|
|
93
|
+
}
|
|
94
|
+
export declare const SelectItem: ({ image, label, description, values, ...others }: {
|
|
95
|
+
[x: string]: any;
|
|
96
|
+
image: any;
|
|
97
|
+
label: any;
|
|
98
|
+
description: any;
|
|
99
|
+
values: any;
|
|
100
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
101
|
+
export declare const SelectedItem: ({ item, value, onRemove, label }: {
|
|
102
|
+
item: any;
|
|
103
|
+
value: any;
|
|
104
|
+
onRemove: any;
|
|
105
|
+
label: any;
|
|
106
|
+
}) => import("react/jsx-runtime").JSX.Element;
|
|
107
|
+
export declare function ArchbaseMultiSelect<T, ID, O>({ allowDeselect, clearable, dataSource, dataField, disabled, readOnly, placeholder, initialOptions, searchable, label, description, error, icon, iconWidth, required, getOptionLabel, getOptionValue, getOptionImage, onFocusEnter, onFocusExit, onChangeValues, value, defaultValue, filter, size, style, width, initiallyOpened, itemComponent: ItemComponent, selectedItemComponent: SelectedItemComponent, onDropdownOpen, onDropdownClose, limit, nothingFound, zIndex, dropdownPosition, onSearchChange, converter, getConvertedOption, options, optionsLabelField, children, maxDropdownHeight, sortSelectedValues }: ArchbaseMultiSelectProps<T, ID, O>): import("react/jsx-runtime").JSX.Element;
|
|
108
|
+
export declare namespace ArchbaseMultiSelect {
|
|
109
|
+
var displayName: string;
|
|
110
|
+
}
|
|
@@ -0,0 +1,91 @@
|
|
|
1
|
+
import { ActionIconVariant, MantineSize, ComboboxStringData, ComboboxLikeRenderOptionInput, ComboboxStringItem, InputClearButtonProps, ScrollAreaProps } from '@mantine/core';
|
|
2
|
+
import { CSSProperties, FocusEventHandler, ReactNode, default as React } from 'react';
|
|
3
|
+
import { ArchbaseDataSource } from '../datasource';
|
|
4
|
+
export interface ArchbaseTagInputEditProps<T, ID> {
|
|
5
|
+
/** Fonte de dados onde será atribuido o valor do edit */
|
|
6
|
+
dataSource?: ArchbaseDataSource<T, ID>;
|
|
7
|
+
/** Campo onde deverá ser atribuido o valor do edit na fonte de dados */
|
|
8
|
+
dataField?: string;
|
|
9
|
+
/** Indicador se o edit está desabilitado */
|
|
10
|
+
disabled?: boolean;
|
|
11
|
+
/** Indicador se o edit é somente leitura. Obs: usado em conjunto com o status da fonte de dados */
|
|
12
|
+
readOnly?: boolean;
|
|
13
|
+
/** Indicador se o preenchimento do edit é obrigatório */
|
|
14
|
+
required?: boolean;
|
|
15
|
+
/** Valor controlado do componente */
|
|
16
|
+
value?: string[];
|
|
17
|
+
/** Valor padrão para componente não controlado */
|
|
18
|
+
defaultValue?: string[];
|
|
19
|
+
/** Estilo do edit */
|
|
20
|
+
style?: CSSProperties;
|
|
21
|
+
/** Tamanho do edit */
|
|
22
|
+
size?: MantineSize;
|
|
23
|
+
/** Largura do edit */
|
|
24
|
+
width?: string | number | undefined;
|
|
25
|
+
/** Icone à direita */
|
|
26
|
+
icon?: ReactNode;
|
|
27
|
+
/** Dica para botão localizar */
|
|
28
|
+
tooltipIconSearch?: string;
|
|
29
|
+
/** Evento ocorre quando clica no botão localizar */
|
|
30
|
+
onActionSearchExecute?: () => void;
|
|
31
|
+
/** Texto sugestão do edit */
|
|
32
|
+
placeholder?: string;
|
|
33
|
+
/** Título do edit */
|
|
34
|
+
label?: string;
|
|
35
|
+
/** Descrição do edit */
|
|
36
|
+
description?: string;
|
|
37
|
+
/** Último erro ocorrido no edit */
|
|
38
|
+
error?: string;
|
|
39
|
+
/** Evento quando o foco sai do edit */
|
|
40
|
+
onFocusExit?: FocusEventHandler<T> | undefined;
|
|
41
|
+
/** Evento quando o edit recebe o foco */
|
|
42
|
+
onFocusEnter?: FocusEventHandler<T> | undefined;
|
|
43
|
+
/** Evento quando o valor do edit é alterado */
|
|
44
|
+
onChangeValue?: (value: string[]) => void;
|
|
45
|
+
/** Chamado quando uma tag é removida */
|
|
46
|
+
onRemove?: (value: string) => void;
|
|
47
|
+
/** Chamado quando o botão limpar é clicado */
|
|
48
|
+
onClear?: () => void;
|
|
49
|
+
onKeyDown?: (event: any) => void;
|
|
50
|
+
onKeyUp?: (event: any) => void;
|
|
51
|
+
/** Referência para o componente interno */
|
|
52
|
+
innerRef?: React.RefObject<HTMLInputElement> | undefined;
|
|
53
|
+
variant?: ActionIconVariant;
|
|
54
|
+
/** Dados exibidos no dropdown. Valores devem ser únicos */
|
|
55
|
+
data?: ComboboxStringData;
|
|
56
|
+
/** Valor de busca controlado */
|
|
57
|
+
searchValue?: string;
|
|
58
|
+
/** Valor de busca padrão */
|
|
59
|
+
defaultSearchValue?: string;
|
|
60
|
+
/** Chamado quando a busca muda */
|
|
61
|
+
onSearchChange?: (value: string) => void;
|
|
62
|
+
/** Número máximo de tags, `Infinity` por padrão */
|
|
63
|
+
maxTags?: number;
|
|
64
|
+
/** Determina se tags duplicadas são permitidas, `false` por padrão */
|
|
65
|
+
allowDuplicates?: boolean;
|
|
66
|
+
/** Chamado quando usuário tenta submeter uma tag duplicada */
|
|
67
|
+
onDuplicate?: (value: string) => void;
|
|
68
|
+
/** Caracteres que devem disparar a divisão de tags, `[',']` por padrão */
|
|
69
|
+
splitChars?: string[];
|
|
70
|
+
/** Determina se o botão limpar deve ser exibido quando o componente tem valor, `false` por padrão */
|
|
71
|
+
clearable?: boolean;
|
|
72
|
+
/** Props passadas para o botão limpar */
|
|
73
|
+
clearButtonProps?: InputClearButtonProps & React.ComponentPropsWithoutRef<'button'>;
|
|
74
|
+
/** Props passadas para o input oculto */
|
|
75
|
+
hiddenInputProps?: Omit<React.ComponentPropsWithoutRef<'input'>, 'value'>;
|
|
76
|
+
/** Divisor usado para separar valores no atributo `value` do input oculto, `','` por padrão */
|
|
77
|
+
hiddenInputValuesDivider?: string;
|
|
78
|
+
/** Função para renderizar o conteúdo da opção */
|
|
79
|
+
renderOption?: (input: ComboboxLikeRenderOptionInput<ComboboxStringItem>) => React.ReactNode;
|
|
80
|
+
/** Props passadas para o componente `ScrollArea` subjacente no dropdown */
|
|
81
|
+
scrollAreaProps?: ScrollAreaProps;
|
|
82
|
+
/** Determina se o valor digitado pelo usuário mas não submetido deve ser aceito quando o input perde o foco, `true` por padrão */
|
|
83
|
+
acceptValueOnBlur?: boolean;
|
|
84
|
+
/** Limite de itens exibidos no dropdown */
|
|
85
|
+
limit?: number;
|
|
86
|
+
/** Converter para transformar o valor antes de salvar no dataSource */
|
|
87
|
+
outputConverter?: (tags: string[]) => any;
|
|
88
|
+
/** Converter para transformar o valor do dataSource antes de exibir */
|
|
89
|
+
inputConverter?: (value: any) => string[];
|
|
90
|
+
}
|
|
91
|
+
export declare function ArchbaseTagInputEdit<T, ID>({ dataSource, dataField, disabled, readOnly, style, placeholder, label, description, error, required, size, width, innerRef, value, defaultValue, icon, onKeyDown, onKeyUp, onActionSearchExecute, tooltipIconSearch, onFocusExit, onFocusEnter, onChangeValue, onRemove, onClear, variant, data, searchValue, defaultSearchValue, onSearchChange, maxTags, allowDuplicates, onDuplicate, splitChars, clearable, clearButtonProps, hiddenInputProps, hiddenInputValuesDivider, renderOption, scrollAreaProps, acceptValueOnBlur, limit, outputConverter, inputConverter, }: ArchbaseTagInputEditProps<T, ID>): import("react/jsx-runtime").JSX.Element;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@archbase/core",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "4.0.0",
|
|
4
4
|
"description": "Core utilities and foundation for Archbase React v3",
|
|
5
5
|
"author": "Edson Martins <edsonmartins2005@gmail.com>",
|
|
6
6
|
"license": "MIT",
|
|
@@ -30,12 +30,12 @@
|
|
|
30
30
|
"README.md"
|
|
31
31
|
],
|
|
32
32
|
"peerDependencies": {
|
|
33
|
-
"@mantine/core": "
|
|
34
|
-
"@mantine/dates": "
|
|
35
|
-
"@mantine/hooks": "
|
|
36
|
-
"@mantine/modals": "
|
|
37
|
-
"@mantine/notifications": "
|
|
38
|
-
"@mantine/spotlight": "
|
|
33
|
+
"@mantine/core": "9.1.1",
|
|
34
|
+
"@mantine/dates": "9.1.1",
|
|
35
|
+
"@mantine/hooks": "9.1.1",
|
|
36
|
+
"@mantine/modals": "9.1.1",
|
|
37
|
+
"@mantine/notifications": "9.1.1",
|
|
38
|
+
"@mantine/spotlight": "9.1.1",
|
|
39
39
|
"react": "^18.3.0 || ^19.2.0",
|
|
40
40
|
"react-dom": "^18.3.0 || ^19.2.0"
|
|
41
41
|
},
|