diff --git a/.gitignore b/.gitignore
index e1d41df5..452ea51d 100644
--- a/.gitignore
+++ b/.gitignore
@@ -34,3 +34,4 @@ docs/.vitepress/*.timestamp-*.mjs
# Vite/VitePress temporary timestamp files
*.timestamp-*.mjs
+docs/.docgen/components-metadata.json
diff --git a/docs/.docgen/components-metadata.json b/docs/.docgen/components-metadata.json
deleted file mode 100644
index 3209ee87..00000000
--- a/docs/.docgen/components-metadata.json
+++ /dev/null
@@ -1,14695 +0,0 @@
-{
- "CdsActionBar": {
- "displayName": "CdsActionBar",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "show",
- "description": "Controla a exibição do modal.",
- "type": {
- "name": "boolean"
- },
- "required": false,
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "float",
- "description": "Faz com que a ActionBar flutue acima do conteúdo da view,\nsendo colocada na parte inferior da página",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "dismissible",
- "description": "Prop que exibe botão de fechamento da ActionBar.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "light",
- "description": "Especifica se a versão da ActionBar é a light.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "actions",
- "description": "Indica os botões a serem exibidos na ActionBar.",
- "type": {
- "name": "array"
- },
- "defaultValue": {
- "func": false,
- "value": "[]"
- }
- }
- ],
- "events": [
- {
- "name": "click",
- "description": "Evento emitido quando os botões são clicados.",
- "type": {
- "names": [
- "Event"
- ]
- }
- },
- {
- "name": "close",
- "description": "Evento emitido quando o botão \"X\" é clicado.",
- "type": {
- "names": [
- "Event"
- ]
- }
- }
- ],
- "slots": [
- {
- "name": "description",
- "description": "Slot utilizado para renderização de texto no componente."
- },
- {
- "name": "actions",
- "description": "Slot para renderização de botões na ActionBar."
- }
- ],
- "sourceFiles": [
- "src/components/ActionBar.vue"
- ]
- },
- "CdsActionsList": {
- "displayName": "CdsActionsList",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "actions",
- "description": "A lista de actions a ser renderizada. Caso queira que um item da lista fique desabilitado, basta passar a prop `disabled` como true nesse item no array.",
- "type": {
- "name": "array"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "[]"
- }
- },
- {
- "name": "numberOfExpandedActions",
- "description": "O número de itens que vai ser mostrado quando o componente for renderizado.",
- "type": {
- "name": "number"
- },
- "required": false,
- "defaultValue": {
- "func": false,
- "value": "2"
- }
- }
- ],
- "events": [
- {
- "name": "expanded",
- "description": "Evento emitido quando a lista é expandida ('true') ou contraída ('false').",
- "type": {
- "names": [
- "Event"
- ]
- }
- },
- {
- "name": "action-clicked",
- "description": "Evento emitido quando o item da lista é clicado.",
- "type": {
- "names": [
- "Event"
- ]
- }
- }
- ],
- "slots": [
- {
- "name": "action",
- "scoped": true,
- "description": "Scoped slot para renderização customizada das 'actions'.",
- "bindings": [
- {
- "name": "list",
- "title": "binding"
- }
- ]
- },
- {
- "name": "action-trigger",
- "description": "Slot para renderização customizada do conteúdo do item"
- }
- ],
- "sourceFiles": [
- "src/components/ActionsList.vue"
- ]
- },
- "CdsAlert": {
- "displayName": "CdsAlert",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "variant",
- "description": "A variante do Alert. São 3 variantes implementadas:",
- "tags": {},
- "values": [
- "info",
- "warning",
- "danger"
- ],
- "type": {
- "name": "string"
- },
- "required": false,
- "defaultValue": {
- "func": false,
- "value": "'info'"
- }
- },
- {
- "name": "text",
- "description": "O título do alert. O título também pode ser usado com o slot.",
- "type": {
- "name": "string"
- },
- "required": false,
- "defaultValue": {
- "func": false,
- "value": "'Título do AlertCard'"
- }
- },
- {
- "name": "dismissible",
- "description": "Prop que exibe botão de fechamento do alert.",
- "type": {
- "name": "boolean"
- },
- "required": false,
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- }
- ],
- "events": [
- {
- "name": "close",
- "description": "Evento emitido quando o botão de fechar o alert é clicado.",
- "type": {
- "names": [
- "Event"
- ]
- }
- }
- ],
- "slots": [
- {
- "name": "default"
- }
- ],
- "sourceFiles": [
- "src/components/Alert.vue"
- ]
- },
- "CdsAlertCard": {
- "displayName": "CdsAlertCard",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "variant",
- "description": "A variante do Alert. São 3 variantes implementadas: 'info', 'warning'\ne 'danger'",
- "tags": {},
- "values": [
- "info",
- "warning",
- "danger"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'info'"
- }
- },
- {
- "name": "selectable",
- "description": "Define se o AlertCard é selecionável.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "muted",
- "description": "Variante de estilo muted do componente.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "noTitle",
- "description": "Controla exibição do título do AlertCard.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "title",
- "description": "O título do alerta. O título também pode ser usado com o slot.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Título do AlertCard'"
- }
- },
- {
- "name": "subTitle",
- "description": "O subtítulo do alerta. O subtítulo também pode ser usado com o slot.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Subtítulo do AlertCard'"
- }
- },
- {
- "name": "withIcon",
- "description": "Determina se o Alert vai ter ícone ou não.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "value",
- "description": "Prop utilizada como v-model. Controla a visibilidade do popover .",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- }
- ],
- "slots": [
- {
- "name": "subTitle-slot"
- },
- {
- "name": "content-slot",
- "scoped": true,
- "description": "Slot usado para inserção de conteúdo adicional no AlertCard",
- "bindings": [
- {
- "name": "class",
- "title": "binding"
- }
- ]
- }
- ],
- "sourceFiles": [
- "src/components/AlertCard.vue"
- ]
- },
- "CdsAppBar": {
- "displayName": "CdsAppBar",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "hideSettings",
- "description": "Controla a exibição do ícone de settings.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "hideHelp",
- "description": "Controla a exibição do ícone de ajuda.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "hideNotification",
- "description": "Controla a exibição do ícone de notificação.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "hideAppSwitcher",
- "description": "Controla a exibição do ícone de notificação.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "hideLogout",
- "description": "Controla a exibição do ícone de Logout.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "sysvaleBrand",
- "description": "Indica se a logo a ser exibida é da Sysvale.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "csBrand",
- "description": "Indica se a logo a ser exibida é do Cidade Saudável.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "userName",
- "description": "Nome do usuário exibido no Avatar.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "userDescription",
- "description": "Descrição do usuário mostrada embaixo do nome.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "clickable",
- "description": "Ativa ou desativa o clique no componente Avatar.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- }
- ],
- "events": [
- {
- "name": "`${element}-click`",
- "description": "Evento emitido quando os elementos da AppBar são clicados.\nEsse emit é dinâmico, gerando os eventos:\n\n`settings-click`\n\n`help-click`\n\n`notification-click`\n\n`avatar-click`\n\n`app-switcher-click`\n\n`logout-click`",
- "type": {
- "names": [
- "Event"
- ]
- }
- }
- ],
- "slots": [
- {
- "name": "brand",
- "scoped": true,
- "description": "Slot utilizado para renderização da logo no AppBar.",
- "bindings": [
- {
- "name": "class",
- "title": "binding"
- }
- ]
- },
- {
- "name": "user-info",
- "scoped": true,
- "description": "Slot utilizado para adição de informações sobre o usuário no AppBar.",
- "bindings": [
- {
- "name": "class",
- "title": "binding"
- }
- ]
- },
- {
- "name": "dropdown-content",
- "description": "Slot utilizado para renderização do conteúdo do dropdown do Avatar."
- },
- {
- "name": "app-info"
- }
- ],
- "sourceFiles": [
- "src/components/AppBar.vue"
- ]
- },
- "CdsAvatar": {
- "displayName": "CdsAvatar",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "variant",
- "description": "A variante de cor. São 10 variantes:",
- "tags": {},
- "values": [
- "green",
- "teal",
- "blue",
- "indigo",
- "violet",
- "pink",
- "red",
- "orange",
- "amber",
- "dark"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'green'"
- }
- },
- {
- "name": "size",
- "description": "Especifica o tamanho do avatar. São 3 tamanhos implementados: 'sm', 'md', 'lg'.",
- "tags": {},
- "values": [
- "sm",
- "md",
- "lg"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'md'"
- }
- },
- {
- "name": "src",
- "description": "src da imagem do avatar. Tem prioridade maior que as props de iniciais de nome.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "''"
- }
- },
- {
- "name": "initials",
- "description": "Recebe as iniciais do usuário cujas informações vão ser mostradas no Avatar.\nAs iniciais são exibidas apenas quando nenhuma imagem é especificada.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "name",
- "description": "Recebe o nome do usuário cujas informações vão ser mostradas no Avatar.\nDo nome são extraídas as duas primeiras iniciais para exibição no componente\nquando nenhuma imagem é especificada.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "clickable",
- "description": "Ativa ou desativa o clique no componente",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- }
- ],
- "slots": [
- {
- "name": "dropdown-content"
- }
- ],
- "sourceFiles": [
- "src/components/Avatar.vue"
- ]
- },
- "CdsAvatarGroup": {
- "displayName": "CdsAvatarGroup",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "size",
- "description": "Tamanho dos avatares do AvatarGroup",
- "tags": {},
- "values": [
- "sm",
- "md",
- "lg"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'md'"
- }
- },
- {
- "name": "avatars",
- "description": "Array de objetos contendo as propriedades dos Avatares.\nAs props aqui aceitas são as mesmas da API do componente Avatar.",
- "type": {
- "name": "array"
- },
- "defaultValue": {
- "func": false,
- "value": "[]"
- }
- },
- {
- "name": "maxCount",
- "description": "O número máximo de avatares a ser exibido na lista.",
- "type": {
- "name": "number"
- },
- "defaultValue": {
- "func": false,
- "value": "4"
- }
- }
- ],
- "sourceFiles": [
- "src/components/AvatarGroup.vue"
- ]
- },
- "CdsBadge": {
- "displayName": "CdsBadge",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "variant",
- "description": "A variante de cor. São 10 variantes:",
- "tags": {},
- "values": [
- "green",
- "teal",
- "blue",
- "indigo",
- "violet",
- "pink",
- "red",
- "orange",
- "amber",
- "dark"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'gray'"
- }
- },
- {
- "name": "size",
- "description": "Especifica o tamanho da badge. São 3 tamanhos implementados.",
- "tags": {},
- "values": [
- "sm",
- "md",
- "lg"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'md'"
- }
- },
- {
- "name": "clickable",
- "description": "Especifica o tamanho da badge. São 3 tamanhos implementados: 'sm', 'md', 'lg'.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- }
- ],
- "events": [
- {
- "name": "click",
- "description": "Evento que indica se a Badge foi clicada",
- "type": {
- "names": [
- "Event"
- ]
- }
- }
- ],
- "slots": [
- {
- "name": "default",
- "description": "Slot padrão utilizado para exibir o conteúdo dentro da badge"
- }
- ],
- "sourceFiles": [
- "src/components/Badge.vue"
- ]
- },
- "CdsBarChart": {
- "displayName": "CdsBarChart",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "data",
- "description": "Define o conjunto de dados a serem mostrados no gráfico.\nO objeto deve conter o parâmetro `name` (para identificar o conjunto de dados)\ne `datasets`, array de objetos que apresentará `label` (indicar o rótulo do dado) e\n`data` (array com os valores númericos).",
- "type": {
- "name": "array"
- },
- "required": true
- },
- {
- "name": "variant",
- "description": "A variante de cor. São 11 variantes:",
- "tags": {},
- "values": [
- "green",
- "teal",
- "blue",
- "indigo",
- "violet",
- "pink",
- "red",
- "orange",
- "amber",
- "dark"
- ],
- "type": {
- "name": "string"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "'green'"
- }
- },
- {
- "name": "labels",
- "description": "Defina as labels do gráfico",
- "type": {
- "name": "array"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "[]"
- }
- },
- {
- "name": "barWidth",
- "description": "Configura a porcentagem ocupada pela barra do gráfico. (0.1-1).",
- "type": {
- "name": "number"
- },
- "defaultValue": {
- "func": false,
- "value": "1"
- }
- },
- {
- "name": "horizontalBar",
- "description": "Prop para exibir as barras na direção do eixo x",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- }
- ],
- "sourceFiles": [
- "src/components/BarChart.vue"
- ]
- },
- "CdsBaseInput": {
- "name": "CdsBaseInput",
- "exportName": "default",
- "displayName": "BaseInput",
- "description": "",
- "tags": {},
- "expose": [
- {
- "name": "componentRef"
- },
- {
- "name": "isFocused"
- },
- {
- "name": "focus"
- },
- {
- "name": "blur"
- },
- {
- "name": "clear"
- },
- {
- "name": "select"
- }
- ],
- "props": [
- {
- "name": "id",
- "description": "ID do input.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "''"
- }
- },
- {
- "name": "label",
- "description": "Especifica a label do input.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Label'"
- }
- },
- {
- "name": "hideLabel",
- "description": "Quando ativado e o tipo selecionado for for search a label não será exibida.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "disabled",
- "description": "Desabilita o input.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "state",
- "description": "Especifica o estado do TextInput. As opções são 'default', 'valid', 'loading' e 'invalid'.",
- "tags": {},
- "values": [
- "default",
- "valid",
- "loading",
- "invalid"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'default'"
- }
- },
- {
- "name": "type",
- "description": "Especifica o tipo do TextInput. As opções são 'text' e 'email'.",
- "tags": {},
- "values": [
- "text",
- "email"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'text'"
- }
- },
- {
- "name": "required",
- "description": "Exibe asterisco de obrigatório (obs.: não faz a validação)",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "placeholder",
- "description": "Especifica o placeholder do input",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Digite aqui...'"
- }
- },
- {
- "name": "errorMessage",
- "description": "Especifica a mensagem de erro, que será exibida caso o estado seja inválido",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Valor inválido'"
- }
- },
- {
- "name": "supportingText",
- "description": "Especifica mensagem de auxílio.",
- "type": {
- "name": "string|array"
- },
- "defaultValue": {
- "func": false,
- "value": "''"
- }
- },
- {
- "name": "fluid",
- "description": "Especifica se a largura do TextInput deve ser fluida.",
- "type": {
- "name": "boolean"
- },
- "required": false,
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "tooltip",
- "description": "Define exibição e texto do tooltip do input",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "tooltipIcon",
- "description": "Especifica ícone do tooltip do TextInput.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'info-outline'"
- }
- },
- {
- "name": "supportLink",
- "description": "Controla a exibição e o conteúdo do link de suporte exibido ao lado da label.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "supportLinkUrl",
- "description": "Define a url a ser acessada no clique do link de suporte.",
- "type": {
- "name": "string|null"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "floatingLabel",
- "description": "Define o tipo do input, se `true` será um input adaptado para o mobile. Quando essa prop está ativa é renderizado o componente baseMobileInput.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "leadingIcon",
- "description": "Define o ícone que será exibido à esquerda do input",
- "type": {
- "name": "string|null"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "trailingIcon",
- "description": "Define o ícone que será exibido à direita do input",
- "type": {
- "name": "string|null"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "lazy",
- "description": "Quando true, o v-model é atualizado com o evento `change` no lugar do `input`.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "readonly",
- "description": "Quando true, o input é somente leitura.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "maxlength",
- "description": "Define o número máximo de caracteres do input.",
- "type": {
- "name": "number"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "minlength",
- "description": "Define o número mínimo de caracteres do input.",
- "type": {
- "name": "number"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "name",
- "description": "Define o nome do input.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "''"
- }
- },
- {
- "name": "enableAutocomplete",
- "description": "Habilita autocomplete do browser.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "enableTopContent",
- "description": "Habilita exibição de conteudo na parte superior do input",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- }
- ],
- "events": [
- {
- "name": "supportLinkClick"
- }
- ],
- "slots": [
- {
- "name": "trailing-icon"
- },
- {
- "name": "leading-icon"
- },
- {
- "name": "label"
- },
- {
- "name": "top-content"
- }
- ],
- "sourceFiles": [
- "src/components/BaseInput.vue"
- ]
- },
- "CdsBaseMobileInput": {
- "name": "CdsBaseMobileInput",
- "exportName": "default",
- "displayName": "BaseMobileInput",
- "description": "",
- "tags": {},
- "expose": [
- {
- "name": "componentRef"
- },
- {
- "name": "isFocused"
- },
- {
- "name": "focus"
- },
- {
- "name": "blur"
- },
- {
- "name": "clear"
- },
- {
- "name": "select"
- }
- ],
- "props": [
- {
- "name": "label",
- "description": "Especifica a label do input.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Nome'"
- }
- },
- {
- "name": "disabled",
- "description": "Desabilita o input.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "state",
- "description": "Especifica o estado do TextInput. As opções são 'default', 'valid', 'loading' e 'invalid'.",
- "tags": {},
- "values": [
- "default",
- "valid",
- "loading",
- "invalid"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'default'"
- }
- },
- {
- "name": "type",
- "description": "Especifica o tipo do TextInput. As opções são 'text' e 'email'.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'text'"
- }
- },
- {
- "name": "required",
- "description": "Exibe asterisco de obrigatório (obs.: não faz a validação)",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "errorMessage",
- "description": "Especifica a mensagem de erro, que será exibida caso o estado seja inválido",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Valor inválido'"
- }
- },
- {
- "name": "supportingText",
- "description": "Especifica mensagem de auxílio",
- "type": {
- "name": "string|array"
- },
- "defaultValue": {
- "func": false,
- "value": "''"
- }
- },
- {
- "name": "fluid",
- "description": "Especifica se a largura do TextInput deve ser fluida.",
- "type": {
- "name": "boolean"
- },
- "required": false,
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "tooltip",
- "description": "Define exibição e texto do tooltip do input",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "tooltipIcon",
- "description": "Especifica ícone do tooltip do TextInput.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'info-outline'"
- }
- },
- {
- "name": "supportLink",
- "description": "Controla a exibição e o conteúdo do link de suporte exibido ao lado da label.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "supportLinkUrl",
- "description": "Define a url a ser acessada no clique do link de suporte.",
- "type": {
- "name": "string|null"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "trailingIcon",
- "description": "Define o ícone que será exibido à direita do input",
- "type": {
- "name": "string|null"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "leadingIcon",
- "description": "Define o ícone que será exibido à esquerda do input",
- "type": {
- "name": "string|null"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "hasLeadingIcon",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "hasTrailingIcon",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "lazy",
- "description": "Quando true, o v-model é atualizado com o evento `change` no lugar do `input`.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "readonly",
- "description": "Quando true, o input é somente leitura.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "enableAutocomplete",
- "description": "Habilita autocomplete do browser.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- }
- ],
- "slots": [
- {
- "name": "leading-icon"
- },
- {
- "name": "trailing-icon"
- }
- ],
- "sourceFiles": [
- "src/components/BaseMobileInput.vue"
- ]
- },
- "CdsBottomSheet": {
- "name": "CdsBottomSheet",
- "exportName": "default",
- "displayName": "BottomSheet",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "title",
- "description": "Define o título do bottom sheet exibido no header",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Onde encontrar o meu CNS'"
- }
- },
- {
- "name": "noCloseOnBackdrop",
- "description": "Define se o BottomSheet vai ser fechado com o click no backdrop.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- }
- ],
- "events": [
- {
- "name": "update:model-value",
- "description": "Evento emitido quando a visibilidade do bottom sheet é alterada.",
- "type": {
- "names": [
- "Event"
- ]
- }
- },
- {
- "name": "close",
- "description": "Evento emitido quando o bottom sheet é fechado.",
- "type": {
- "names": [
- "Event"
- ]
- }
- }
- ],
- "slots": [
- {
- "name": "default",
- "description": "Scoped slot usado para inserção de conteúdo customizado."
- }
- ],
- "sourceFiles": [
- "src/components/BottomSheet.vue"
- ]
- },
- "CdsBox": {
- "displayName": "CdsBox",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "elevated",
- "description": "Quando true aplica o token $shadow-sm como box-shadow do componente.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "fluid",
- "description": "Indica se o componente deverá ocupar 100% da largura disponível.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "verticalFluid",
- "description": "Indica se o componente deverá ocupar 100% da altura disponível.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "padding",
- "description": "O valor setado é sempre multiplicado por 4, assim como nos tokens scss do Cuida.\nO valor mínimo aceito é 4 e o máximo aceito é 12.",
- "type": {
- "name": "number|string"
- },
- "defaultValue": {
- "func": false,
- "value": "4"
- }
- },
- {
- "name": "clickable",
- "description": "Ativa ou desativa o clique no componente",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "variant",
- "description": "A variante de cor. São 10 variantes:",
- "tags": {},
- "values": [
- "green",
- "teal",
- "blue",
- "indigo",
- "violet",
- "pink",
- "red",
- "orange",
- "amber",
- "dark"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'gray'"
- }
- },
- {
- "name": "light",
- "description": "Aplica uma versão mais suave da variante de cor.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "overflowVisible",
- "description": "Quando true, oculta o overflow do componente.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- }
- ],
- "events": [
- {
- "name": "boxClick",
- "description": "Evento emitido quando a prop `clickable` é `true` e o `Box` é clicado.",
- "type": {
- "names": [
- "Event"
- ]
- }
- }
- ],
- "slots": [
- {
- "name": "default",
- "description": "Slot utilizado para renderização do conteúdo interno do Box."
- }
- ],
- "sourceFiles": [
- "src/components/Box.vue"
- ]
- },
- "CdsBreadcrumb": {
- "displayName": "CdsBreadcrumb",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "items",
- "description": "Define a lista dos itens do Breadcrumb a serem\nmostrados. Os itens da lista devem ser\nobjetos com path ou route, e com uma label.",
- "type": {
- "name": "array"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "[]"
- }
- }
- ],
- "sourceFiles": [
- "src/components/Breadcrumb.vue"
- ]
- },
- "CdsButton": {
- "displayName": "CdsButton",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "variant",
- "description": "A variante de cor. São 10 variantes:",
- "tags": {},
- "values": [
- "green",
- "teal",
- "blue",
- "indigo",
- "violet",
- "pink",
- "red",
- "orange",
- "amber",
- "dark"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'green'"
- }
- },
- {
- "name": "size",
- "description": "Especifica o tamanho do botão. São 3 tamanhos implementados:",
- "tags": {},
- "values": [
- "'sm'",
- "'md'",
- "'lg'"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'md'"
- }
- },
- {
- "name": "block",
- "description": "Quando true, torna a largura do botão fluida",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "text",
- "description": "Especifica o texto a ser apresentado no corpo do botão.\nEste texto será exibido apenas se o slot default não for utilizado.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Click here'"
- }
- },
- {
- "name": "disabled",
- "description": "Controla a disponibilidade do Botão.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "tooltipText",
- "description": "Texto a ser exibido como tooltip com o hover do botão quando a prop disabled estiver ativa.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "secondary",
- "description": "Especifica se a versão do Botão é a secundária.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "loading",
- "description": "Especifica se a versão do Botão é a secundária.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "ghost",
- "description": "Especifica se o componente deve ser exibido na sua versão ghost.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- }
- ],
- "events": [
- {
- "name": "button-click",
- "description": "Evento que indica que o Botão foi clicado",
- "type": {
- "names": [
- "Event"
- ]
- }
- }
- ],
- "slots": [
- {
- "name": "prepend",
- "description": "Slot para exibir prepend do botão."
- },
- {
- "name": "default",
- "description": "Slot padrão utilizado para exibir texto do botão."
- },
- {
- "name": "append",
- "description": "Slot para exibir append do botão."
- }
- ],
- "sourceFiles": [
- "src/components/Button.vue"
- ]
- },
- "CdsCalloutCard": {
- "displayName": "CdsCalloutCard",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "title",
- "description": "O título do card. O título também pode ser usado com o slot.",
- "type": {
- "name": "string"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "'Título do AlertCard'"
- }
- },
- {
- "name": "text",
- "description": "O texto do card. O texto também pode ser usado com o slot.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Subtítulo do AlertCard'"
- }
- },
- {
- "name": "image",
- "description": "A imagem do card.",
- "type": {
- "name": "string"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "''"
- }
- },
- {
- "name": "imageDescription",
- "description": "A descrição da imagem do card.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Imagem de CalloutCard'"
- }
- },
- {
- "name": "actionButtonVariant",
- "description": "A cor do botão do card.",
- "tags": {},
- "values": [
- "green",
- "teal",
- "turquoise",
- "blue",
- "indigo",
- "violet",
- "pink",
- "red",
- "orange",
- "amber",
- "gray",
- "dark"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'green'"
- }
- },
- {
- "name": "actionButtonText",
- "description": "O texto do botão do card.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Ok'"
- }
- },
- {
- "name": "actionButtonSecondary",
- "description": "A versão secundária do botão.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "actionButtonDisabled",
- "description": "A versão disabled do botão.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "compact",
- "description": "Modo de exibição do card.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- }
- ],
- "events": [
- {
- "name": "action-button-click",
- "description": "Evento que indica que o Botão foi clicado",
- "type": {
- "names": [
- "Event"
- ]
- }
- }
- ],
- "slots": [
- {
- "name": "text",
- "description": "Slot usado para inserção de conteúdo customizado no texto."
- },
- {
- "name": "action",
- "description": "Slot usado para inserção de conteúdo customizado no lugar do botão de ação."
- }
- ],
- "sourceFiles": [
- "src/components/CalloutCard.vue"
- ]
- },
- "CdsCard": {
- "name": "CdsCard",
- "exportName": "default",
- "displayName": "Card",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "title",
- "description": "Especifica o título do card. Quando conteúdo é enviado para o slot `Header` o conteúdo dessa prop não é exibido.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "''"
- }
- },
- {
- "name": "content",
- "description": "Especifica texto do Card. Quando conteúdo é enviado para o slot `Body` o conteúdo dessa prop não é exibido.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "''"
- }
- },
- {
- "name": "imageSrc",
- "description": "Caminho da imagem que vai ser renderizada. Quando conteúdo é enviado para\n o slot `Image` o conteúdo dessa prop não é exibido.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "''"
- }
- },
- {
- "name": "imageAlt",
- "description": "Descrição em texto da imagem.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'imagem do card'"
- }
- },
- {
- "name": "imageWidth",
- "description": "Largura da imagem do card. Tem comportamento sobrescrito quando o card é vertical\n e a prop `fluid` está ativa.",
- "type": {
- "name": "string|number"
- },
- "defaultValue": {
- "func": false,
- "value": "300"
- }
- },
- {
- "name": "imageHeight",
- "description": "Altura da imagem do card.",
- "type": {
- "name": "string|number"
- },
- "defaultValue": {
- "func": false,
- "value": "180"
- }
- },
- {
- "name": "bodyWidth",
- "description": "Largura do conteúdo do card.",
- "type": {
- "name": "string|number"
- },
- "defaultValue": {
- "func": false,
- "value": "300"
- }
- },
- {
- "name": "horizontal",
- "description": "Torna o alinhamento do Card horizontal.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "clickable",
- "description": "Ativa ou desativa o clique no componente",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "fluid",
- "description": "Ativa ou desativa o comportamento fluido do Card",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- }
- ],
- "events": [
- {
- "name": "cardClick",
- "description": "Evento que indica se o card foi clicado.",
- "type": {
- "names": [
- "Event"
- ]
- }
- }
- ],
- "slots": [
- {
- "name": "extra",
- "description": "Slot para incluir conteúdo adicional no canto superior direito do card."
- },
- {
- "name": "image",
- "description": "Slot utilizado para incluir imagens no Card."
- },
- {
- "name": "icon",
- "description": "Slot utilizado para incluir ícones no Card."
- },
- {
- "name": "header",
- "description": "Slot para conteúdo customizado do Header."
- },
- {
- "name": "body",
- "description": "Slot para conteúdo customizado do Body."
- },
- {
- "name": "footer",
- "description": "Slot para conteúdo customizado do Footer."
- }
- ],
- "sourceFiles": [
- "src/components/Card.vue"
- ]
- },
- "CdsCarousel": {
- "name": "CdsCarousel",
- "exportName": "default",
- "displayName": "Carousel",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "items",
- "description": "Array de itens a serem exibidos no carousel.",
- "type": {
- "name": "array"
- },
- "defaultValue": {
- "func": false,
- "value": "[]"
- }
- },
- {
- "name": "snapTo",
- "description": "Define a posição em que os itens serão alinhados quando for feita a ação de rolagem no carrossel.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'start'"
- },
- "values": [
- "start",
- "center",
- "end"
- ]
- },
- {
- "name": "gap",
- "description": "Define o espaçamento entre os itens do carrossel.",
- "type": {
- "name": "number"
- },
- "defaultValue": {
- "func": false,
- "value": "0"
- }
- },
- {
- "name": "showArrows",
- "description": "Controla a exibição das setas de rolagem.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "darkArrows",
- "description": "Define se a cor das setas de rolagem deve ser escura.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "clickable",
- "description": "Define se os itens do carrossel devem ser clicáveis.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- }
- ],
- "events": [
- {
- "name": "item-click",
- "description": "Evento emitido quando algum item do carrossel é clicado.",
- "type": {
- "names": [
- "Event"
- ]
- }
- }
- ],
- "slots": [
- {
- "name": "default",
- "scoped": true,
- "description": "Slot utilizado para renderização de cada item do carrossel. Os dados do escopo do slot podem ser acessados no formato a seguir: ```slot={ item, index }```",
- "bindings": [
- {
- "name": "item",
- "title": "binding"
- },
- {
- "name": "index",
- "title": "binding"
- }
- ]
- }
- ],
- "sourceFiles": [
- "src/components/Carousel.vue"
- ]
- },
- "CdsCarouselController": {
- "displayName": "CdsCarouselController",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "propertyName",
- "description": "Nome da propriedade exibida no controle do carousel.",
- "type": {
- "name": "string"
- },
- "required": true
- },
- {
- "name": "perPage",
- "description": "Número de itens por página do carousel.",
- "type": {
- "name": "number"
- },
- "required": true
- },
- {
- "name": "total",
- "description": "Número total de itens no carousel.",
- "type": {
- "name": "number"
- },
- "required": true
- },
- {
- "name": "simple",
- "description": "Quando true, exibe o controle em modo simples (página atual de total de páginas).",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "fluid",
- "description": "Quando true, o controle ocupa toda a largura disponível com espaçamento distribuído.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- }
- ],
- "events": [
- {
- "name": "click-back",
- "description": "Evento que indica que o botão voltar foi clicado",
- "type": {
- "names": [
- "Object"
- ]
- },
- "properties": [
- {
- "type": {
- "names": [
- "number"
- ]
- },
- "name": "min",
- "description": "Índice mínimo da página atual (base 0)"
- },
- {
- "type": {
- "names": [
- "number"
- ]
- },
- "name": "max",
- "description": "Índice máximo da página atual (base 0)"
- }
- ]
- },
- {
- "name": "click-forward",
- "description": "Evento que indica que o botão avançar foi clicado",
- "type": {
- "names": [
- "Object"
- ]
- },
- "properties": [
- {
- "type": {
- "names": [
- "number"
- ]
- },
- "name": "min",
- "description": "Índice mínimo da página atual (base 0)"
- },
- {
- "type": {
- "names": [
- "number"
- ]
- },
- "name": "max",
- "description": "Índice máximo da página atual (base 0)"
- }
- ]
- }
- ],
- "sourceFiles": [
- "src/components/CarouselController.vue"
- ]
- },
- "CdsCheckbox": {
- "displayName": "CdsCheckbox",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "modelValue",
- "description": "A prop usada como v-model para monitorar a seleção do Checkbox",
- "type": {
- "name": "boolean"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "label",
- "description": "Exibe a etiqueta do checkbox",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'checkbox content'"
- }
- },
- {
- "name": "variant",
- "description": "A variante de cor. São 10 variantes:",
- "tags": {},
- "values": [
- "green",
- "teal",
- "blue",
- "indigo",
- "violet",
- "pink",
- "red",
- "orange",
- "amber",
- "dark"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'green'"
- }
- },
- {
- "name": "indeterminate",
- "description": "Prop usada para indicar visualmente se o checkbox está no estado indeterminado. Two-way binding ativo com o `v-model:indeterminate`",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "prominent",
- "description": "Destaca visualmente a label",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "disabled",
- "description": "Controla o status checkbox",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- }
- ],
- "events": [
- {
- "name": "update:modelValue",
- "description": "Evento utilizado para implementar o v-model.",
- "type": {
- "names": [
- "Event"
- ]
- }
- },
- {
- "name": "update:indeterminate",
- "description": "Evento utilizado para implementar o modelValue com a prop \"Indeterminate\".",
- "type": {
- "names": [
- "Event"
- ]
- }
- }
- ],
- "sourceFiles": [
- "src/components/Checkbox.vue"
- ]
- },
- "CdsCheckboxGroup": {
- "name": "CdsCheckboxGroup",
- "exportName": "default",
- "displayName": "CheckboxGroup",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "modelValue",
- "description": "Prop usada como v-model para monitorar as seleções do CheckboxGroup",
- "type": {
- "name": "array"
- },
- "defaultValue": {
- "func": false,
- "value": "[]"
- }
- },
- {
- "name": "options",
- "description": "Opções disponíveis para seleção na lista a ser renderizada pelo componente. Deve ser formada por objetos contendo `label` e `value`.",
- "type": {
- "name": "array"
- },
- "defaultValue": {
- "func": false,
- "value": "[]"
- }
- },
- {
- "name": "label",
- "description": "Etiqueta do componente.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Label'"
- }
- },
- {
- "name": "required",
- "description": "Exibe asterisco de obrigatório (obs.: não faz a validação)",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "variant",
- "description": "A variante de cor. São 10 variantes:",
- "tags": {},
- "values": [
- "green",
- "teal",
- "blue",
- "indigo",
- "violet",
- "pink",
- "red",
- "orange",
- "amber",
- "dark"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'green'"
- }
- },
- {
- "name": "disabled",
- "description": "Controla o status checkbox",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "state",
- "description": "Especifica o estado do CheckboxGroup. As opções são 'default', 'valid' e 'invalid'.",
- "tags": {},
- "values": [
- "default",
- "valid",
- "invalid"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'default'"
- }
- },
- {
- "name": "errorMessage",
- "description": "Especifica a mensagem de erro, que será exibida caso o estado seja inválido",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Valor inválido'"
- }
- }
- ],
- "events": [
- {
- "name": "update:modelValue"
- }
- ],
- "sourceFiles": [
- "src/components/CheckboxGroup.vue"
- ]
- },
- "CdsChevron": {
- "displayName": "CdsChevron",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "direction",
- "description": "Indica em que direção o Chevron vai ser renderizado. As opções são: 'Top', 'Right', 'Bottom' e 'Left'",
- "tags": {},
- "values": [
- "top",
- "right",
- "bottom",
- "left"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'bottom'"
- }
- },
- {
- "name": "light",
- "description": "Quando true, torna o chevron mais claro",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "size",
- "description": "Especifica o tamanho do Chevron. São 3 tamanhos implementados: 'sm', 'md', 'lg'.",
- "tags": {},
- "values": [
- "sm",
- "md",
- "lg"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'md'"
- }
- },
- {
- "name": "animate",
- "description": "Ativa animação na transição das posições do Chevron",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- }
- ],
- "sourceFiles": [
- "src/components/Chevron.vue"
- ]
- },
- "CdsChip": {
- "name": "CdsChip",
- "exportName": "default",
- "displayName": "Chip",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "variant",
- "description": "A variante da Badge. São 9 variantes.",
- "tags": {},
- "values": [
- "green",
- "teal",
- "blue",
- "indigo",
- "violet",
- "pink",
- "red",
- "orange",
- "amber",
- "dark"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'gray'"
- }
- },
- {
- "name": "size",
- "description": "Especifica o tamanho da chip. São 3 tamanhos implementados.",
- "tags": {},
- "values": [
- "sm",
- "md",
- "lg"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'md'"
- }
- },
- {
- "name": "persistantActionIcon",
- "description": "Especifíca se o ícone de ação da chip é mostrado independentemente do estado de seleção.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "iconLeft",
- "description": "Especifica se o ícone da chip é mostrado na esquerda (true) ou direita (false).",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "true"
- }
- }
- ],
- "slots": [
- {
- "name": "icon",
- "description": "Slot utilizado para alterar o ícone mostrado na chip."
- },
- {
- "name": "default",
- "description": "Slot utilizado para o conteúdo textual da chip."
- }
- ],
- "sourceFiles": [
- "src/components/Chip.vue"
- ]
- },
- "CdsClickable": {
- "displayName": "CdsClickable",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "clickable",
- "description": "Ativa ou desativa o clique no componente",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "fluid",
- "description": "Permite que o clickable se expanda de forma fluida",
- "type": {
- "name": "boolean"
- },
- "required": false,
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- }
- ],
- "events": [
- {
- "name": "cds-click",
- "description": "Evento emitido quando o wrapper é clicado",
- "type": {
- "names": [
- "Event"
- ]
- }
- }
- ],
- "slots": [
- {
- "name": "default",
- "description": "Slot default."
- }
- ],
- "sourceFiles": [
- "src/components/Clickable.vue"
- ]
- },
- "CdsCollapsibleContainer": {
- "displayName": "CdsCollapsibleContainer",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "modelValue",
- "description": "Representa o estado do componente. Quando 'false' o conteúdo não é mostrado\ne quando 'true' o conteúdo do container é exibido.",
- "type": {
- "name": "boolean"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "title",
- "description": "Título do item a ser expandido",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Visualizar mais'"
- }
- }
- ],
- "events": [
- {
- "name": "update:model-value",
- "description": "Evento emitido quando o conteúdo do item é exibido ('true') ou ocultado ('false').",
- "type": {
- "names": [
- "Event"
- ]
- }
- }
- ],
- "slots": [
- {
- "name": "title",
- "description": "Slot para renderização do conteúdo do header/title customizado do item"
- },
- {
- "name": "default",
- "description": "Slot para renderização conteúdo do container"
- }
- ],
- "sourceFiles": [
- "src/components/CollapsibleContainer.vue"
- ]
- },
- "CdsColorPicker": {
- "displayName": "CdsColorPicker",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "modelValue",
- "description": "Guarda a cor selecionada no Color Picker.",
- "type": {
- "name": "string"
- },
- "required": true
- },
- {
- "name": "label",
- "description": "Especifica a label do ColorPicker.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Label'"
- }
- },
- {
- "name": "inline",
- "description": "Quando true passa a mostrar as opções de cores fora do popover.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "popoverHeight",
- "description": "Especifica a altura do popover. ⚠️ Quando a prop inline estiver ativa essa prop não surte efeito.",
- "type": {
- "name": "number"
- },
- "defaultValue": {
- "func": false,
- "value": "190"
- }
- },
- {
- "name": "swatch",
- "description": "Conjunto de cores a serem renderizadas no ColorPicker. A prop espera um Array de Array de tokens de cor. Ex.: tokens.$gp-400",
- "type": {
- "name": "array"
- },
- "defaultValue": {
- "func": false,
- "value": "[]"
- }
- }
- ],
- "events": [
- {
- "name": "update:modelValue",
- "description": "**Implementa v-model**. Evento utilizado para emitir a *cor* selecionada. A cor é emitida como uma string no formato HEX.",
- "type": {
- "names": [
- "Event"
- ]
- }
- },
- {
- "name": "update:colorVariant",
- "description": "Evento utilizado para emitir a *variante* da cor selecionada. A variante é emitida como uma string. ⚠️ Importante: a variante emitida só irá mudar se a cor mudar. A mudança de shade dentro da mesma cor não altera a variante. Ex.: tokens.$gp-400 e tokens.$gp-600 emitirão a mesta variante, a saber, \"green\".",
- "type": {
- "names": [
- "Event"
- ]
- }
- }
- ],
- "sourceFiles": [
- "src/components/ColorPicker.vue"
- ]
- },
- "CdsComboBox": {
- "name": "CdsComboBox",
- "exportName": "default",
- "displayName": "ComboBox",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "label",
- "description": "Especifica o título do select.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Label'"
- }
- },
- {
- "name": "options",
- "description": "Array de objetos que especifica a lista de opções do select. Os valores\na serem mostrado como opções do select devem estar atribuídos a chave\n`value` do objeto.",
- "type": {
- "name": "array"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "[]"
- }
- },
- {
- "name": "required",
- "description": "Controla a exibição do asterísco indicativo de campo obrigatório.",
- "type": {
- "name": "boolean"
- },
- "required": false,
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "fluid",
- "description": "Especifica se a largura do select deve ser fluida.",
- "type": {
- "name": "boolean"
- },
- "required": false,
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "disabled",
- "description": "Especifica o status de interação do select.",
- "type": {
- "name": "boolean"
- },
- "required": false,
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "optionsKeyField",
- "description": "Indica o nome da chave do objeto a ser considerada na renderização\ndas opções do select.",
- "type": {
- "name": "string"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "'name'"
- }
- },
- {
- "name": "optionsValueField",
- "description": "Indicar o nome do valor do objeto a ser considerado na renderização",
- "type": {
- "name": "string"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "'value'"
- }
- },
- {
- "name": "state",
- "description": "Especifica o estado do input. As opções são 'default', 'valid', 'loading' e 'invalid'.",
- "tags": {},
- "values": [
- "default",
- "valid",
- "invalid",
- "loading"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'default'"
- }
- },
- {
- "name": "errorMessage",
- "description": "Especifica a mensagem de erro, que será exibida caso o estado seja inválido",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Valor inválido'"
- }
- },
- {
- "name": "tooltip",
- "description": "Define exibição e texto do tooltip do input",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "tooltipIcon",
- "description": "Especifica ícone do tooltip do TextInput.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'info-outline'"
- }
- },
- {
- "name": "variant",
- "description": "A variante de cor. São 10 variantes:",
- "tags": {},
- "values": [
- "green",
- "teal",
- "blue",
- "indigo",
- "violet",
- "pink",
- "red",
- "orange",
- "amber",
- "dark"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'green'"
- }
- }
- ],
- "events": [
- {
- "name": "update:modelValue"
- }
- ],
- "sourceFiles": [
- "src/components/ComboBox.vue"
- ]
- },
- "CdsDashboardCard": {
- "displayName": "CdsDashboardCard",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "title",
- "description": "O título do alert. O título também pode ser usado com o slot.",
- "type": {
- "name": "string"
- },
- "required": false,
- "defaultValue": {
- "func": false,
- "value": "''"
- }
- },
- {
- "name": "description",
- "description": "Texto que será exibido abaixo do título. Utilizado para melhor\ndescrever a informação exibida no dashboard-card.",
- "type": {
- "name": "string"
- },
- "required": false,
- "defaultValue": {
- "func": false,
- "value": "''"
- }
- },
- {
- "name": "showAction",
- "description": "Prop que exibe o botão de ação do dashboard-card.",
- "type": {
- "name": "boolean"
- },
- "required": false,
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "action",
- "description": "Prop que indica o texto do botão de ação do dashboard-card.",
- "type": {
- "name": "string"
- },
- "required": false,
- "defaultValue": {
- "func": false,
- "value": "'Action'"
- }
- },
- {
- "name": "fluid",
- "description": "Prop que indica se o componente deverá ocupar 100% do espaço disponível.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- }
- ],
- "events": [
- {
- "name": "action-button-click"
- }
- ],
- "slots": [
- {
- "name": "title-slot"
- },
- {
- "name": "status-slot"
- },
- {
- "name": "description-slot"
- },
- {
- "name": "action-slot",
- "description": "Slot para renderização customizada do conteúdo das actions. Sobrescreve a prop `showAction`."
- }
- ],
- "sourceFiles": [
- "src/components/DashboardCard.vue"
- ]
- },
- "CdsDataTable": {
- "name": "CdsDataTable",
- "exportName": "default",
- "displayName": "DataTable",
- "description": "",
- "tags": {},
- "expose": [
- {
- "name": "resetSearch"
- },
- {
- "name": "setSearch"
- }
- ],
- "props": [
- {
- "name": "selectionVariant",
- "description": "Variante de cor usada na estilização do componente.",
- "tags": {},
- "values": [
- "green",
- "teal",
- "blue",
- "indigo",
- "violet",
- "pink",
- "red",
- "orange",
- "amber",
- "dark"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'green'"
- }
- },
- {
- "name": "totalItems",
- "description": "Quantidade total de registros encontrados.",
- "type": {
- "name": "number"
- },
- "required": true
- },
- {
- "name": "customFieldsList",
- "description": "Lista de colunas que serão exibidas na tabela personalizada.",
- "type": {
- "name": "array"
- },
- "defaultValue": {
- "func": false,
- "value": "[]"
- }
- },
- {
- "name": "customFieldsSearchable",
- "description": "Especifica se deve ter pesquisa por colunas na personalização da tabela.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "hideCustomizeButton",
- "description": "Especifica se o botão de personalizar tabela deve ser escondido.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "presetsOptions",
- "description": "Define as opções de presets que serão exibidas no sidesheet de personalizar tabela. Se nenhum for fornecido, não será exibido.",
- "type": {
- "name": "array"
- },
- "defaultValue": {
- "func": false,
- "value": "[]"
- }
- },
- {
- "name": "customFieldsTrackBy",
- "description": "Define o campo que será usado como chave na lista de customFieldsList.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'id'"
- }
- },
- {
- "name": "loadingCustomFields",
- "description": "Ativa o feedback de loading no sidesheet de personalizar tabela.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "minVisibleFields",
- "description": "Especifica a quantidade mínima de colunas que devem ser visíveis na tabela.",
- "type": {
- "name": "number"
- },
- "defaultValue": {
- "func": false,
- "value": "1"
- }
- },
- {
- "name": "maxVisibleFields",
- "description": "Especifica a quantidade máxima de colunas que devem ser visíveis na tabela. Se for `0`, não há limite.",
- "type": {
- "name": "number"
- },
- "defaultValue": {
- "func": false,
- "value": "0"
- }
- },
- {
- "name": "withSearch",
- "description": "Especifica se a barra de busca da tabela deve ser exibida.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "searchPlaceholder",
- "description": "Especifica o placeholder da barra de busca.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Buscar...'"
- }
- },
- {
- "name": "withSearchButton",
- "description": "Especifica se deve ser mostrado botão junto à barra de busca.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "loading",
- "description": "Ativa o estado de carregamento do componente, desabilitando as ações superiores e exibindo um Skeleton para a tabela.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "emptySrcImg",
- "description": "Caminho da imagem que vai ser renderizada quando o estado for empty.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "emptyTitle",
- "description": "Título que vai ser renderizado quando o estado for empty.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Nenhum registro'"
- }
- },
- {
- "name": "emptyDescription",
- "description": "Descrição que vai ser renderizado quando o estado for empty.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Certifique-se de ajustar os filtros para encontrar resultados.'"
- }
- },
- {
- "name": "searchInputDelay",
- "description": "Tempo de atraso entre a digitação e a emissão do evento de busca (em ms).",
- "type": {
- "name": "number"
- },
- "defaultValue": {
- "func": false,
- "value": "500"
- }
- }
- ],
- "events": [
- {
- "name": "update-fields-list"
- },
- {
- "name": "customize-click"
- },
- {
- "name": "search"
- },
- {
- "name": "search-button-click"
- }
- ],
- "slots": [
- {
- "name": "right",
- "description": "Slot para renderização de conteúdo à direita do DataTable header."
- },
- {
- "name": "empty"
- },
- {
- "name": "header-item",
- "scoped": true,
- "bindings": [
- {
- "name": "data",
- "title": "binding"
- },
- {
- "name": "field",
- "title": "binding"
- }
- ]
- },
- {
- "name": "table-item",
- "scoped": true,
- "bindings": [
- {
- "name": "data",
- "title": "binding"
- },
- {
- "name": "field",
- "title": "binding"
- },
- {
- "name": "row-index",
- "title": "binding"
- },
- {
- "name": "col-index",
- "title": "binding"
- }
- ]
- }
- ],
- "sourceFiles": [
- "src/components/DataTable.vue"
- ]
- },
- "CdsDateInput": {
- "name": "CdsDateInput",
- "exportName": "default",
- "displayName": "DateInput",
- "description": "",
- "tags": {},
- "expose": [
- {
- "name": "componentRef"
- },
- {
- "name": "isFocused"
- },
- {
- "name": "focus"
- },
- {
- "name": "blur"
- },
- {
- "name": "clear"
- },
- {
- "name": "select"
- },
- {
- "name": "getDMYFormat"
- },
- {
- "name": "toISO"
- },
- {
- "name": "toString"
- },
- {
- "name": "toJSDate"
- },
- {
- "name": "toDateTime"
- },
- {
- "name": "clearSelection"
- }
- ],
- "props": [
- {
- "name": "label",
- "description": "Especifica a label do input.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Label'"
- }
- },
- {
- "name": "variant",
- "description": "A variante de cor. São 10 variantes:",
- "tags": {},
- "values": [
- "green",
- "teal",
- "blue",
- "indigo",
- "violet",
- "pink",
- "red",
- "orange",
- "amber",
- "dark"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'green'"
- }
- },
- {
- "name": "state",
- "description": "Especifica o estado do TextInput. As opções são 'default', 'valid', 'loading' e 'invalid'.",
- "tags": {},
- "values": [
- "default",
- "valid",
- "loading",
- "invalid"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'default'"
- }
- },
- {
- "name": "mode",
- "description": "Define o modo de interação com o DateInput. Quando definido como 'typing', o componente permite apenas\ndigitação. No modo 'picking', a data deve ser selecionada através do date picker, desabilitando a digitação direta.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'picking'"
- },
- "values": [
- "typing",
- "picking"
- ]
- },
- {
- "name": "range",
- "description": "Quando true, o usuário poderá selecionar um intervalo de datas.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "required",
- "description": "Exibe asterisco de obrigatório (obs.: não faz a validação)",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "disabled",
- "description": "Desabilita o input.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "fluid",
- "description": "Especifica se a largura do DateInput deve ser fluida.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "mobile",
- "tags": {
- "deprecated": [
- {
- "description": "Essa prop vai ser substituída pela prop `floatingLabel` na v4. Define o tipo do input, se true será um input adaptado para o mobile",
- "title": "deprecated"
- }
- ]
- },
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "floatingLabel",
- "description": "Define o tipo do input, se true será um input adaptado para o mobile",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "showTodayDot",
- "tags": {
- "deprecated": [
- {
- "description": "Essa prop vai ser renomeada para prop `highlightToday` na v4. Controla a marcação do dia atual no calendário.",
- "title": "deprecated"
- }
- ]
- },
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "highlightToday",
- "description": "Controla a marcação do dia atual no calendário.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "placeholder",
- "description": "Texto placeholder para o DateInput.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Selecione uma data'"
- }
- },
- {
- "name": "errorMessage",
- "description": "Especifica a mensagem de erro, que será exibida caso o estado seja inválido",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Valor inválido'"
- }
- },
- {
- "name": "minDate",
- "description": "A data mínima selecionável no DateInput. Deve ser uma string no formato `yyyy-MM-dd`.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "''"
- }
- },
- {
- "name": "maxDate",
- "description": "A data máxima selecionável no DateInput. Deve ser uma string no formato `yyyy-MM-dd`.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "''"
- }
- },
- {
- "name": "tooltip",
- "description": "Define exibição e texto do tooltip do input",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "tooltipIcon",
- "description": "Especifica ícone do tooltip do TextInput.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'info-outline'"
- }
- },
- {
- "name": "supportingText",
- "description": "Especifica mensagem de auxílio.",
- "type": {
- "name": "string|array"
- },
- "defaultValue": {
- "func": false,
- "value": "''"
- }
- },
- {
- "name": "supportLink",
- "description": "Controla a exibição e o conteúdo do link de suporte exibido ao lado da label.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "supportLinkUrl",
- "description": "Define a url a ser acessada no clique do link de suporte.",
- "type": {
- "name": "string|null"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- }
- ],
- "sourceFiles": [
- "src/components/DateInput.vue"
- ]
- },
- "CdsDialog": {
- "displayName": "CdsDialog",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "show",
- "description": "Controla a exibição do modal.",
- "type": {
- "name": "boolean"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "title",
- "description": "Define o título do modal exibido no header",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Título'"
- }
- },
- {
- "name": "size",
- "description": "Especifica o tamanho do modal. São 3 tamanhos implementados: 'sm', 'md', 'lg'.",
- "tags": {},
- "values": [
- "sm",
- "md",
- "lg"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'md'"
- }
- },
- {
- "name": "disabled",
- "description": "Define o estado das ações do modal.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "noCloseOnBackdrop",
- "description": "Controla a ação de fechar o modal ao clicar fora.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "noCloseButton",
- "description": "Controla a exibição do botão de fechar do modal.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "noCancelButton",
- "description": "Controla a exibição do botão de cancelar do modal.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "noFooter",
- "description": "Controla a exibição do rodapé (footer) do modal.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "noHeader",
- "description": "Controla a exibição do cabeçalho (header) do modal.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "okButtonText",
- "description": "Define texto do botão de ação do modal",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Confirmar'"
- }
- },
- {
- "name": "cancelButtonText",
- "description": "Define texto do botão de cancelar do modal",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Cancelar'"
- }
- }
- ],
- "events": [
- {
- "name": "close",
- "description": "Evento que indica se o modal foi escondido.",
- "type": {
- "names": [
- "Event"
- ]
- }
- },
- {
- "name": "ok",
- "description": "Evento que indica se o botão de ação do modal foi clicado.",
- "type": {
- "names": [
- "Event"
- ]
- }
- }
- ],
- "slots": [
- {
- "name": "header",
- "description": "Slot usado para utilização de header customizado."
- },
- {
- "name": "default"
- },
- {
- "name": "footer",
- "description": "Slot usado para inserção de footer customizado."
- }
- ],
- "sourceFiles": [
- "src/components/Dialog.vue"
- ]
- },
- "CdsDialogModal": {
- "displayName": "CdsDialogModal",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "variant",
- "description": "Define a variante do Dialog Modal.",
- "tags": {},
- "values": [
- "warning",
- "error",
- "info"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'warning'"
- }
- },
- {
- "name": "description",
- "description": "Define a descrição do Dialog Modal.",
- "type": {
- "name": "string"
- },
- "required": true
- },
- {
- "name": "modelValue",
- "description": "Controla a exibição do Dialog Modal.",
- "type": {
- "name": "boolean"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "title",
- "description": "Define o título do Dialog Modal exibido no header",
- "type": {
- "name": "string"
- },
- "required": true
- },
- {
- "name": "okButtonText",
- "description": "Define texto do botão de ação do Dialog Modal",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Continuar'"
- }
- },
- {
- "name": "cancelButtonText",
- "description": "Define texto do botão de cancelar do Dialog Modal",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Cancelar'"
- }
- },
- {
- "name": "actionButtonVariant",
- "description": "Define a variante do botão de ação do Dialog Modal (segue as variantes do componente de botão do Cuida)",
- "tags": {},
- "values": [
- "green",
- "teal",
- "turquoise",
- "blue",
- "indigo",
- "violet",
- "pink",
- "red",
- "orange",
- "amber",
- "gray",
- "dark"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'green'"
- }
- }
- ],
- "events": [
- {
- "name": "close",
- "type": {
- "names": [
- "undefined"
- ]
- }
- },
- {
- "name": "update:modelValue",
- "type": {
- "names": [
- "undefined"
- ]
- }
- },
- {
- "name": "ok",
- "type": {
- "names": [
- "undefined"
- ]
- }
- }
- ],
- "sourceFiles": [
- "src/components/DialogModal.vue"
- ]
- },
- "CdsDivider": {
- "displayName": "CdsDivider",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "text",
- "description": "Texto renderizado em cima ou ao lado do Divider",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "vertical",
- "description": "Quando true, mostra o Divider na vertical",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "width",
- "description": "Quando não especificado ou 0, o comportamento do\ncomponente é fluid, com width 100%.",
- "type": {
- "name": "string|number"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "dimmed",
- "description": "Torna o divider branco",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "light",
- "description": "Torna o divider branco",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "inline",
- "description": "Quando especificado, determina a largura do Divider.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- }
- ],
- "sourceFiles": [
- "src/components/Divider.vue"
- ]
- },
- "CdsDonutChart": {
- "displayName": "CdsDonutChart",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "data",
- "description": "Define o conjunto de dados a serem mostrados no gráfico.\nO objeto deve conter o parâmetro `name` (para identificar o conjunto de dados)\ne `datasets`, array de objetos que apresentará `label` (indicar o rótulo do dado) e\n`data` (array com os valores númericos).",
- "type": {
- "name": "object"
- },
- "required": true
- },
- {
- "name": "variant",
- "description": "Personaliza a paleta de cores do gráfico. São 11 variantes implementadas:\n`green`, `teal`, `turquoise`, `blue`, `indigo`, `violet`, `pink`, `red`, `orange`, `amber`, `gray`, `dark`.",
- "tags": {},
- "values": [
- "green",
- "teal",
- "turquoise",
- "blue",
- "indigo",
- "violet",
- "pink",
- "red",
- "orange",
- "amber",
- "gray",
- "dark"
- ],
- "type": {
- "name": "string"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "'green'"
- }
- },
- {
- "name": "theme",
- "description": "Define o tema do gráfico.",
- "tags": {},
- "values": [
- "blue",
- "indigo"
- ],
- "type": {
- "name": "string"
- },
- "required": false,
- "defaultValue": {
- "func": false,
- "value": "''"
- }
- },
- {
- "name": "labels",
- "description": "Defina as labels do gráfico",
- "type": {
- "name": "array"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "[]"
- }
- },
- {
- "name": "colors",
- "description": "Defina as cores do gráfico. Essa prop sobrescreve as shades da variante.\nA prop espera um Array de variantes de cor. Ex.: ['green', 'turquoise']",
- "type": {
- "name": "array"
- },
- "defaultValue": {
- "func": false,
- "value": "[]"
- }
- }
- ],
- "events": [
- {
- "name": "chart-click",
- "type": {
- "names": [
- "undefined"
- ]
- }
- }
- ],
- "sourceFiles": [
- "src/components/DonutChart.vue"
- ]
- },
- "CdsDropdown": {
- "displayName": "CdsDropdown",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "content",
- "description": "Conteúdo do Dropdown.",
- "type": {
- "name": "string"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "'Conteúdo'"
- }
- },
- {
- "name": "label",
- "description": "Label exibida ao lado do conteúdo",
- "type": {
- "name": "string"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "'Label'"
- }
- },
- {
- "name": "disabled",
- "description": "Controla a disponibilidade do Dropdown",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "dropdownWidth",
- "description": "Controla o tamanho do popover do Dropdown (em pixels).\nO tamanho nunca é menor que a largura do Dropdown.",
- "type": {
- "name": "number"
- },
- "defaultValue": {
- "func": false,
- "value": "0"
- }
- }
- ],
- "events": [
- {
- "name": "click",
- "description": "Evento que indica que o FilterPill foi clicado",
- "type": {
- "names": [
- "Event"
- ]
- }
- }
- ],
- "slots": [
- {
- "name": "default",
- "description": "Slot usado para inserção de conteúdo dentro do dropdown do FilterPill."
- }
- ],
- "sourceFiles": [
- "src/components/Dropdown.vue"
- ]
- },
- "CdsDropdownButton": {
- "displayName": "CdsDropdownButton",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "items",
- "description": "Define a lista dos itens do DropdownButton a serem\nmostrados. Os itens da lista devem ser\nobjetos com path ou route, e com uma label",
- "type": {
- "name": "array"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "[]"
- }
- },
- {
- "name": "variant",
- "description": "A variante de cor. São 10 variantes:",
- "tags": {},
- "values": [
- "green",
- "teal",
- "blue",
- "indigo",
- "violet",
- "pink",
- "red",
- "orange",
- "amber",
- "dark"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'gray'"
- }
- },
- {
- "name": "secondary",
- "description": "Especifica se a versão do DropdownButton é a secundária. Essa propriedade tem\nmaior prevalência que a prop `variant`.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "ghost",
- "description": "Especifica se o componente deve ser exibido na sua versão ghost.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "text",
- "description": "Conteúdo do Dropdown.",
- "type": {
- "name": "string"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "'Conteúdo'"
- }
- },
- {
- "name": "dropdownWidth",
- "description": "Controla o tamanho do popover do Dropdown (em pixels).\nO tamanho nunca é menor que a largura do botão.",
- "type": {
- "name": "number"
- },
- "defaultValue": {
- "func": false,
- "value": "0"
- }
- },
- {
- "name": "size",
- "description": "Especifica o tamanho do botão. São 3 tamanhos implementados: 'sm', 'md', 'lg'.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'md'"
- },
- "values": [
- "sm",
- "md",
- "lg"
- ]
- }
- ],
- "events": [
- {
- "name": "click",
- "description": "Evento que indica que o DropdownButton foi clicado",
- "type": {
- "names": [
- "Event"
- ]
- }
- },
- {
- "name": "action-click",
- "type": {
- "names": [
- "undefined"
- ]
- }
- }
- ],
- "sourceFiles": [
- "src/components/DropdownButton.vue"
- ]
- },
- "CdsDynamicInputList": {
- "name": "CdsDynamicInputList",
- "exportName": "default",
- "displayName": "DynamicInputList",
- "description": "",
- "tags": {},
- "expose": [
- {
- "name": "arrayOfValues"
- }
- ],
- "props": [
- {
- "name": "label",
- "description": "Label do DynamicInputList.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Adicione opções'"
- }
- },
- {
- "name": "inputLabel",
- "description": "Label usada em cada um dos inputs adicionados ao DynamicInputList.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Nova opção'"
- }
- },
- {
- "name": "buttonText",
- "description": "Texto do botão de adição de inputs.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Adicionar'"
- }
- },
- {
- "name": "buttonVariant",
- "description": "A variante de cor. São 10 variantes:",
- "tags": {},
- "values": [
- "green",
- "teal",
- "blue",
- "indigo",
- "violet",
- "pink",
- "red",
- "orange",
- "amber",
- "dark"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'dark'"
- }
- },
- {
- "name": "tooltip",
- "description": "Define exibição e texto do tooltip do DynamicInputList.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "tooltipIcon",
- "description": "Especifica ícone do tooltip do DynamicInputList.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'info-outline'"
- }
- },
- {
- "name": "supportLink",
- "description": "Controla a exibição e o conteúdo do link de suporte exibido ao lado da label.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "supportLinkUrl",
- "description": "Define a url a ser acessada no clique do link de suporte.",
- "type": {
- "name": "string|null"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "disabled",
- "description": "Define estado de desabilitação do componente.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "incrementResolver",
- "description": "Define método para geração de novos itens. Deve retornar um objeto com `label` e `value`. Sobrescreve o método padrão de geração de novos itens.",
- "type": {
- "name": "func"
- },
- "defaultValue": {
- "func": true,
- "value": "() => ({\n label: '',\n value: generateKey(),\n})"
- }
- },
- {
- "name": "disableEdit",
- "description": "Define se o usuário pode preencher manualmente o conteúdo. Utilize-o apenas quando o conteúdo dos inputs forem gerados programaticamente, via incrementResolver.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- }
- ],
- "sourceFiles": [
- "src/components/DynamicInputList.vue"
- ]
- },
- "CdsEmptyState": {
- "displayName": "CdsEmptyState",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "image",
- "description": "A imagem a ser mostrada no Empty State. Obs.: o addon Controls\ndo Storybook ainda não permite a seleção de arquivos. Desse modo\nnão é possível testar o funcionamento dessa prop por aqui.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "''"
- }
- },
- {
- "name": "imageDescription",
- "description": "O descritor da imagem do Empty State adicionado à 'alt' da tag ![]()
",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Imagem de Empty State'"
- }
- },
- {
- "name": "title",
- "description": "O título do Empty State.",
- "type": {
- "name": "string"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "'Título do empty state'"
- }
- },
- {
- "name": "text",
- "description": "O texto instrutivo do Empty State",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Para sair dessa situação de empty state, realize a ação abaixo.'"
- }
- },
- {
- "name": "hideActionButton",
- "description": "Prop utilizada para ocultar o botão de ação do Empty State.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "actionButtonText",
- "description": "O texto mostrado no botão de ação do Empty State",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Finalizar'"
- }
- },
- {
- "name": "actionButtonVariant",
- "description": "A variante do botão de ação do Empty State (segue as variantes do componente de botão do Cuida)",
- "tags": {},
- "values": [
- "green",
- "teal",
- "blue",
- "indigo",
- "violet",
- "pink",
- "red",
- "orange",
- "amber",
- "dark"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'green'"
- }
- }
- ],
- "events": [
- {
- "name": "action-button-click",
- "description": "Evento emitido quando o botão do Empty State é clicado",
- "type": {
- "names": [
- "Event"
- ]
- }
- }
- ],
- "slots": [
- {
- "name": "graphic-element",
- "description": "Slot usado para inserção de conteúdo gráfico"
- },
- {
- "name": "text",
- "description": "Slot usado para inserção de conteúdo customizado no texto do corpo do"
- }
- ],
- "sourceFiles": [
- "src/components/EmptyState.vue"
- ]
- },
- "CdsFileInput": {
- "displayName": "CdsFileInput",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "modelValue",
- "description": "O conteúdo do arquivo upado.",
- "type": {
- "name": "object"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "allowedExtensions",
- "description": "Lista com extensões de arquivos (separadas por vírgula) as quais o usuário pode selecionar.\nEx.: jpg,png",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "size",
- "description": "Define o tamanho do input [lg, md, sm]",
- "tags": {},
- "values": [
- "sm",
- "md",
- "lg"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'md'"
- }
- },
- {
- "name": "state",
- "description": "Especifica o estado do Select. As opções são 'default', 'valid', 'loading' e 'invalid'.",
- "tags": {},
- "values": [
- "default",
- "valid",
- "loading",
- "invalid"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'default'"
- }
- },
- {
- "name": "textMessage",
- "description": "Especifica o texto exibido como placeholder no componente",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Arraste o arquivo aqui ou pesquise no seu dispositivo'"
- }
- },
- {
- "name": "errorMessage",
- "description": "Especifica a mensagem de erro, que será exibida caso o estado seja inválido",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Valor inválido'"
- }
- },
- {
- "name": "disabled",
- "description": "Controla a disponibilidade do Select.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- }
- ],
- "events": [
- {
- "name": "update:modelValue",
- "description": "Evento utilizado para implementar o v-model.",
- "type": {
- "names": [
- "Event"
- ]
- }
- }
- ],
- "sourceFiles": [
- "src/components/FileInput.vue"
- ]
- },
- "CdsFileViewer": {
- "name": "CdsFileViewer",
- "exportName": "default",
- "displayName": "FileViewer",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "label",
- "description": "Especifica a label do arquivo. A label deve ter no máximo 50 caracteres.",
- "type": {
- "name": "string"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "'Comprovante de residência'"
- }
- },
- {
- "name": "fileUrl",
- "description": "Especifica a URL do arquivo. A URL deve conter a extensão do arquivo\npara que a pre-visualização seja gerada.",
- "type": {
- "name": "string"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "'https://images.pexels.com/photos/1254140/pexels-photo-1254140.jpeg'"
- }
- },
- {
- "name": "variant",
- "description": "Especifica a variante de cor do componente.",
- "tags": {},
- "values": [
- "green",
- "teal",
- "blue",
- "indigo",
- "violet",
- "pink",
- "red",
- "orange",
- "amber",
- "dark"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'green'"
- }
- }
- ],
- "events": [
- {
- "name": "close",
- "description": "Evento que indica que o backdrop foi fechado.",
- "type": {
- "names": [
- "Event"
- ]
- }
- },
- {
- "name": "download-click",
- "description": "Evento que indica que a ação de download foi acionada. O componente não implementa a lógica\nde download. A lógica deve ser implementada pelo desenvolvedor.",
- "type": {
- "names": [
- "Event"
- ]
- }
- }
- ],
- "sourceFiles": [
- "src/components/FileViewer.vue"
- ]
- },
- "CdsFilterSelect": {
- "displayName": "CdsFilterSelect",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "label",
- "description": "Especifica o título do FilterSelect.",
- "type": {
- "name": "string"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "'Label'"
- }
- },
- {
- "name": "placeholder",
- "description": "Indica o texto que instrui o usuário a como interagir com o FilterSelect.",
- "type": {
- "name": "string"
- },
- "required": false,
- "defaultValue": {
- "func": false,
- "value": "'Selecione...'"
- }
- },
- {
- "name": "options",
- "description": "Array de objetos que especifica a lista de opções do Filter Select. Os valores\na serem mostrado como opções do FilterSelect devem estar atribuídos a chave\n`value` do objeto.",
- "type": {
- "name": "array"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "[]"
- }
- },
- {
- "name": "modelValue",
- "description": "Guarda o valor selecionado do FilterSelect.",
- "type": {
- "name": "array|object"
- },
- "required": true
- },
- {
- "name": "searchable",
- "description": "Indica se vai ser possível fazer buscas no FilterSelect.",
- "type": {
- "name": "boolean"
- },
- "required": false,
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "width",
- "description": "Define a largura do FilterSelect. As opções são 'thin', 'default' e 'wide'.",
- "type": {
- "name": "string"
- },
- "required": false,
- "defaultValue": {
- "func": false,
- "value": "'default'"
- }
- },
- {
- "name": "fluid",
- "description": "Especifica se a largura do FilterSelect deve ser fluida.",
- "type": {
- "name": "boolean"
- },
- "required": false,
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "disabled",
- "description": "Especifica o status de interação do FilterSelect.",
- "type": {
- "name": "boolean"
- },
- "required": false,
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "optionsField",
- "description": "Indica o nome da da chave do objeto a ser considerada na renderização\ndas opções do FilterSelect.",
- "type": {
- "name": "string"
- },
- "required": false,
- "defaultValue": {
- "func": false,
- "value": "'value'"
- }
- },
- {
- "name": "returnValue",
- "description": "Quando true, passa a retornar o optionsField no modelValue fora do objeto\ndas opções do FilterSelect.",
- "type": {
- "name": "boolean"
- },
- "required": false,
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- }
- ],
- "events": [
- {
- "name": "update:modelValue",
- "description": "Evento que indica que o valor do Select foi alterado",
- "type": {
- "names": [
- "Event"
- ]
- }
- }
- ],
- "sourceFiles": [
- "src/components/FilterSelect.vue"
- ]
- },
- "CdsFlatButton": {
- "name": "CdsFlatButton",
- "exportName": "default",
- "displayName": "FlatButton",
- "description": "",
- "tags": {},
- "expose": [
- {
- "name": "componentRef"
- }
- ],
- "props": [
- {
- "name": "variant",
- "description": "A variante de cor.",
- "tags": {},
- "values": [
- "green",
- "teal",
- "blue",
- "indigo",
- "violet",
- "pink",
- "red",
- "orange",
- "amber",
- "dark"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'green'"
- }
- },
- {
- "name": "text",
- "description": "Especifica o texto a ser apresentado no corpo do botão.\nEste texto será exibido apenas se o slot default não for utilizado.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Flat Button'"
- }
- },
- {
- "name": "disabled",
- "description": "Controla a disponibilidade do Botão.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- }
- ],
- "events": [
- {
- "name": "click"
- }
- ],
- "slots": [
- {
- "name": "default",
- "description": "Slot padrão utilizado para exibir texto do botão."
- }
- ],
- "sourceFiles": [
- "src/components/FlatButton.vue"
- ]
- },
- "CdsFlexbox": {
- "name": "CdsFlexbox",
- "exportName": "default",
- "displayName": "Flexbox",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "direction",
- "description": "Define a direção dos itens dentro do FlexBox. \nValores aceitos: 'row', 'row-reverse', 'column', 'column-reverse'.",
- "tags": {},
- "values": [
- "row",
- "row-reverse",
- "column",
- "column-reverse"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'row'"
- }
- },
- {
- "name": "wrap",
- "description": "Controla o comportamento de quebra de linha dos itens no FlexBox.\nValores aceitos: 'nowrap', 'wrap', 'wrap-reverse'.",
- "tags": {},
- "values": [
- "nowrap",
- "wrap",
- "wrap-reverse"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'wrap'"
- }
- },
- {
- "name": "gap",
- "description": "Define o espaçamento entre os itens no FlexBox. \nO valor setado é multiplicado por 4, assim como nos tokens scss do Cuida.\nO valor padrão é 0, mas pode ser configurado para outros valores numéricos ou strings.",
- "type": {
- "name": "number|string"
- },
- "defaultValue": {
- "func": false,
- "value": "0"
- }
- },
- {
- "name": "justify",
- "description": "Controla a distribuição dos itens ao longo do eixo principal. \nValores aceitos: 'flex-start', 'flex-end', 'center', 'space-between', 'space-around', 'space-evenly'.",
- "tags": {},
- "values": [
- "flex-start",
- "flex-end",
- "center",
- "space-between",
- "space-around",
- "space-evenly"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'flex-start'"
- }
- },
- {
- "name": "align",
- "description": "Define o alinhamento dos itens ao longo do eixo transversal.\nValores aceitos: 'stretch', 'flex-start', 'flex-end', 'center', 'baseline'.",
- "tags": {},
- "values": [
- "stretch",
- "flex-start",
- "flex-end",
- "center",
- "baseline"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'stretch'"
- }
- },
- {
- "name": "tag",
- "description": "Define a tag que o componente deve utilizar na sua renderização. Valores aceitos: 'div', 'span', 'main', 'footer',\n'form', 'header', 'aside', 'ul', e 'li'.\nPor padrão o componente renderiza uma div.",
- "tags": {},
- "values": [
- "div",
- "span",
- "main",
- "footer",
- "form",
- "header",
- "aside",
- "ul",
- "li"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'div'"
- }
- },
- {
- "name": "fluid",
- "description": "Quando true, o flexbox irá ocupar 100% da largura disponível.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- }
- ],
- "slots": [
- {
- "name": "default",
- "description": "Slot com o conteúdo interno do FlexBox"
- }
- ],
- "sourceFiles": [
- "src/components/Flexbox.vue"
- ]
- },
- "CdsFloatingActionButton": {
- "name": "CdsFloatingActionButton",
- "exportName": "default",
- "displayName": "FloatingActionButton",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "variant",
- "description": "Define a variante de cor do botão. São 9 variantes implementadas: 'green', 'teal',\n'blue', 'indigo', 'violet', 'pink', 'red', 'orange', 'amber', 'gray' e 'dark'.",
- "tags": {},
- "values": [
- "green",
- "teal",
- "blue",
- "indigo",
- "violet",
- "pink",
- "red",
- "orange",
- "amber",
- "dark"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'green'"
- }
- },
- {
- "name": "icon",
- "description": "Define o ícone do botão.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'plus-outline'"
- }
- },
- {
- "name": "actions",
- "description": "Lista de ações do subMenu. Cada item deve conter os atributos `label` e `icon`.",
- "type": {
- "name": "array"
- },
- "defaultValue": {
- "func": false,
- "value": "[]"
- }
- },
- {
- "name": "size",
- "description": "Define o tamanho do botão. São 3 variantes implementadas: 'sm', 'md' e 'lg'.",
- "tags": {},
- "values": [
- "sm",
- "md",
- "lg"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'md'"
- }
- }
- ],
- "events": [
- {
- "name": "main-button-click"
- },
- {
- "name": "action-click"
- }
- ],
- "sourceFiles": [
- "src/components/FloatingActionButton.vue"
- ]
- },
- "CdsFloatingAssistant": {
- "displayName": "CdsFloatingAssistant",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "modelValue",
- "description": "Representa o estado do componente. Quando 'false' o componente não é mostrado\ne quando 'true' o componente é exibido.",
- "type": {
- "name": "boolean"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "true"
- }
- },
- {
- "name": "title",
- "description": "O título do card flutuante que é exibido.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Nova funcionalidade!'"
- }
- },
- {
- "name": "startOnScroll",
- "description": "Define se a animação de exibição do componente vai começar apenas após a ação de scroll pelo usuário.",
- "type": {
- "name": "boolean"
- },
- "required": false,
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "url",
- "description": "A url para redirecionar para uma página externa ao clicar no\n'clicando aqui' para saber mais sobre o que é descrito no card",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "''"
- }
- },
- {
- "name": "variant",
- "description": "A variante da Badge. São 9 variantes: 'turquoise', 'green', 'blue',\n'violet', 'pink', 'red', 'orange', 'amber' e 'gray'.",
- "tags": {},
- "values": [
- "green",
- "teal",
- "blue",
- "indigo",
- "violet",
- "pink",
- "red",
- "orange",
- "amber",
- "dark"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'green'"
- }
- },
- {
- "name": "targetId",
- "description": "Id do elemento que será referência para a renderização do FloatingAssistant.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "''"
- }
- }
- ],
- "events": [
- {
- "name": "expanded",
- "description": "Evento emitido quando o componente é exibido ('true') ou ocultado ('false').",
- "type": {
- "names": [
- "Event"
- ]
- }
- },
- {
- "name": "disable-tip",
- "description": "Evento que indica que a opção de desativar a dica foi selecionada",
- "type": {
- "names": [
- "Event"
- ]
- }
- }
- ],
- "slots": [
- {
- "name": "default",
- "description": "Slot usado para inserção de conteúdo dentro do card do FloatingAssistant"
- }
- ],
- "sourceFiles": [
- "src/components/FloatingAssistant.vue"
- ]
- },
- "CdsGaugeChart": {
- "displayName": "CdsGaugeChart",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "value",
- "description": "Define o valor indicador de progresso do GaugeChart.\nO valor deve ser entre 0 e 100.",
- "type": {
- "name": "number"
- },
- "defaultValue": {
- "func": false,
- "value": "0"
- }
- },
- {
- "name": "variant",
- "description": "A variante de cor. São 9 variantes implementadas: 'green', 'teal', 'turquoise',\n'blue', 'indigo', 'violet', 'pink', 'red', 'orange' e 'amber'.",
- "tags": {},
- "values": [
- "green",
- "teal",
- "blue",
- "indigo",
- "violet",
- "pink",
- "red",
- "orange",
- "amber",
- "dark"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'green'"
- }
- },
- {
- "name": "size",
- "description": "Tamanho, em pixels, do componente na tela.",
- "type": {
- "name": "number"
- },
- "defaultValue": {
- "func": false,
- "value": "300"
- }
- },
- {
- "name": "subtitle",
- "description": "Legenda do indicador de progresso.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "''"
- }
- },
- {
- "name": "target",
- "description": "Legenda do indicador de progresso.",
- "type": {
- "name": "number"
- },
- "defaultValue": {
- "func": false,
- "value": "0"
- }
- },
- {
- "name": "showTarget",
- "description": "Controla a exibição do target no GaugeChart.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- }
- ],
- "slots": [
- {
- "name": "popover"
- }
- ],
- "sourceFiles": [
- "src/components/GaugeChart.vue"
- ]
- },
- "CdsGrid": {
- "name": "CdsGrid",
- "exportName": "default",
- "displayName": "Grid",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "cols",
- "type": {
- "name": "number|string|array"
- },
- "defaultValue": {
- "func": false,
- "value": "1"
- }
- },
- {
- "name": "rows",
- "type": {
- "name": "number|string|array"
- },
- "defaultValue": {
- "func": false,
- "value": "1"
- }
- },
- {
- "name": "autoCols",
- "type": {
- "name": "number|string"
- },
- "defaultValue": {
- "func": false,
- "value": "1"
- }
- },
- {
- "name": "autoRows",
- "type": {
- "name": "number|string"
- },
- "defaultValue": {
- "func": false,
- "value": "1"
- }
- },
- {
- "name": "gap",
- "type": {
- "name": "number|string"
- },
- "defaultValue": {
- "func": false,
- "value": "0"
- }
- },
- {
- "name": "rowGap",
- "type": {
- "name": "number|string"
- },
- "defaultValue": {
- "func": false,
- "value": "0"
- }
- },
- {
- "name": "colGap",
- "type": {
- "name": "number|string"
- },
- "defaultValue": {
- "func": false,
- "value": "0"
- }
- },
- {
- "name": "justify",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'stretch'"
- }
- },
- {
- "name": "align",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'stretch'"
- }
- },
- {
- "name": "tag",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'div'"
- },
- "values": [
- "div",
- "span",
- "main",
- "footer",
- "form",
- "header",
- "aside",
- "ul",
- "li"
- ]
- }
- ],
- "slots": [
- {
- "name": "default",
- "description": "Slot com o conteúdo interno da grid"
- }
- ],
- "sourceFiles": [
- "src/components/Grid.vue"
- ]
- },
- "CdsGridItem": {
- "name": "CdsGridItem",
- "exportName": "default",
- "displayName": "GridItem",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "colSpan",
- "type": {
- "name": "number|string"
- },
- "defaultValue": {
- "func": false,
- "value": "'auto'"
- }
- },
- {
- "name": "rowSpan",
- "type": {
- "name": "number|string"
- },
- "defaultValue": {
- "func": false,
- "value": "'1'"
- }
- },
- {
- "name": "colStart",
- "type": {
- "name": "number|string"
- },
- "defaultValue": {
- "func": false,
- "value": "'auto'"
- }
- },
- {
- "name": "rowStart",
- "type": {
- "name": "number|string"
- },
- "defaultValue": {
- "func": false,
- "value": "'auto'"
- }
- },
- {
- "name": "gap",
- "type": {
- "name": "number|string"
- },
- "defaultValue": {
- "func": false,
- "value": "0"
- }
- },
- {
- "name": "rowGap",
- "type": {
- "name": "number|string"
- },
- "defaultValue": {
- "func": false,
- "value": "0"
- }
- },
- {
- "name": "colGap",
- "type": {
- "name": "number|string"
- },
- "defaultValue": {
- "func": false,
- "value": "0"
- }
- },
- {
- "name": "subGrid",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "justify",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'auto'"
- }
- },
- {
- "name": "align",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'auto'"
- }
- },
- {
- "name": "direction",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'row'"
- }
- }
- ],
- "slots": [
- {
- "name": "default",
- "description": "Slot com o conteúdo interno do GridItem"
- }
- ],
- "sourceFiles": [
- "src/components/GridItem.vue"
- ]
- },
- "CdsHighlight": {
- "displayName": "CdsHighlight",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "variant",
- "description": "A variante do Highlight. São 3 variantes implementadas",
- "tags": {},
- "values": [
- "info",
- "success",
- "danger"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'info'"
- }
- },
- {
- "name": "animated",
- "description": "Especifica se o highlight vai ser estático ou animado.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "duration",
- "description": "Especifica a duração da animação.",
- "type": {
- "name": "number"
- },
- "defaultValue": {
- "func": false,
- "value": "1"
- }
- },
- {
- "name": "delay",
- "description": "O tempo de espera até a animação começar.",
- "type": {
- "name": "number"
- },
- "defaultValue": {
- "func": false,
- "value": "0"
- }
- },
- {
- "name": "highlightedText",
- "description": "Define uma substring específica do texto enviada por slot que deve receber o destaque (highlight).",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "caseSensitive",
- "description": "Informa se o highlight vai ser Case Sensitive.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- }
- ],
- "slots": [
- {
- "name": "default",
- "description": "Slot usado para especificar o texto que receberá o highlight."
- }
- ],
- "sourceFiles": [
- "src/components/Highlight.vue"
- ]
- },
- "CdsIcon": {
- "displayName": "CdsIcon",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "name",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'box-outline'"
- }
- },
- {
- "name": "width",
- "type": {
- "name": "number|string"
- },
- "defaultValue": {
- "func": false,
- "value": "24"
- }
- },
- {
- "name": "height",
- "type": {
- "name": "number|string"
- },
- "defaultValue": {
- "func": false,
- "value": "24"
- }
- },
- {
- "name": "color",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'currentColor'"
- }
- },
- {
- "name": "dark",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "light",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- }
- ],
- "sourceFiles": [
- "src/components/Icon.vue"
- ]
- },
- "CdsIconButton": {
- "displayName": "CdsIconButton",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "size",
- "description": "Especifica o tamanho do botão. São 3 tamanhos implementados: 'sm', 'md', 'lg'.",
- "tags": {},
- "values": [
- "sm",
- "md",
- "lg"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'md'"
- }
- },
- {
- "name": "icon",
- "description": "Especifica o `name` do ícone do cuida icons a ser apresentado no corpo do botão.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'create-outline'"
- }
- },
- {
- "name": "disabled",
- "description": "Controla a disponibilidade do botão.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "tooltipText",
- "description": "Texto a ser exibido como tooltip com o hover do botão.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "feedbackOnClick",
- "description": "Quando ativo, faz com que, após iteração do usuário, o ícone do botão seja temporariamente alterado.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "feedbackIcon",
- "description": "Ícone mostrado após clique do usuário.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'check-outline'"
- }
- },
- {
- "name": "variant",
- "description": "A variante de cor. São 10 variantes:",
- "tags": {},
- "values": [
- "green",
- "teal",
- "blue",
- "indigo",
- "violet",
- "pink",
- "red",
- "orange",
- "amber",
- "dark"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'white'"
- }
- }
- ],
- "events": [
- {
- "name": "cds-click",
- "description": "Evento que indica que o botão foi clicado",
- "type": {
- "names": [
- "Event"
- ]
- }
- }
- ],
- "sourceFiles": [
- "src/components/IconButton.vue"
- ]
- },
- "CdsImage": {
- "name": "CdsImage",
- "exportName": "default",
- "displayName": "Image",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "src",
- "description": "Caminho da imagem que vai ser renderizada.",
- "type": {
- "name": "string"
- },
- "required": true
- },
- {
- "name": "fallbackSrc",
- "description": "Caminho da imagem que vai ser renderizada como fallback, caso a imagem principal\napresentar algum erro de carregamento.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'https://sysfront.nyc3.cdn.digitaloceanspaces.com/cuida/images/imagePlaceholder.png'"
- }
- },
- {
- "name": "width",
- "description": "Largura da imagem. Quando não especificada, o valor `auto` é aplicado.",
- "type": {
- "name": "number|string"
- },
- "defaultValue": {
- "func": false,
- "value": "'auto'"
- }
- },
- {
- "name": "height",
- "description": "Altura da imagem. Quando não especificada, o valor `auto` é aplicado.",
- "type": {
- "name": "number|string"
- },
- "defaultValue": {
- "func": false,
- "value": "'auto'"
- }
- },
- {
- "name": "alt",
- "description": "Descrição em texto da imagem.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Imagem'"
- }
- },
- {
- "name": "opacity",
- "description": "Opacidade da imagem.",
- "type": {
- "name": "number|string"
- },
- "defaultValue": {
- "func": false,
- "value": "1"
- }
- },
- {
- "name": "dimmed",
- "description": "Quando true, aplica um grayscale de 35% na imagem.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "blackAndWhite",
- "description": "Torna a imagem preto e branca.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "roundedCorners",
- "description": "Arrendonda as bordas da imagem.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "round",
- "description": "Torna a imagem redonda.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- }
- ],
- "sourceFiles": [
- "src/components/Image.vue"
- ]
- },
- "CdsInlineDateInput": {
- "displayName": "CdsInlineDateInput",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "modelValue",
- "description": "Prop utilizada como v-model. Deve ser uma string no formato `yyyy-MM-dd`\nou um objeto com as propriedades `start` e `end`, no mesmo formato.",
- "type": {
- "name": "string|object"
- },
- "defaultValue": {
- "func": false,
- "value": "''"
- }
- },
- {
- "name": "label",
- "description": "Especifica a label do input.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Date'"
- }
- },
- {
- "name": "disabled",
- "description": "Desabilita o input.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "range",
- "description": "Controla o modo do input.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "fluid",
- "description": "Especifica se a largura do DateInput deve ser fluida.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "minDate",
- "description": "A data mínima selecionável no DateInput. Deve ser uma string no formato `yyyy-MM-dd`.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "''"
- }
- },
- {
- "name": "maxDate",
- "description": "A data máxima selecionável no DateInput. Deve ser uma string no formato `yyyy-MM-dd`.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "''"
- }
- },
- {
- "name": "placeholder",
- "description": "Texto placeholder para o DateInput.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Selecione uma data'"
- }
- },
- {
- "name": "showTodayDot",
- "description": "Controla a marcação do dia atual no calendário.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "variant",
- "description": "A variante de cor. São 9 variantes implementadas: 'green', 'teal',\n'blue', 'indigo', 'violet', 'pink', 'red', 'orange' e 'amber'.",
- "tags": {},
- "values": [
- "green",
- "teal",
- "blue",
- "indigo",
- "violet",
- "pink",
- "red",
- "orange",
- "amber",
- "dark"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'green'"
- }
- }
- ],
- "events": [
- {
- "name": "update:modelValue",
- "type": {
- "names": [
- "Event"
- ]
- },
- "description": "Evento emitido quando uma data é selecionada. Utilizado para implementar o v-model."
- }
- ],
- "slots": [
- {
- "name": "label",
- "description": "Slot para renderização customizada da label."
- }
- ],
- "sourceFiles": [
- "src/components/InlineDateInput.vue"
- ]
- },
- "CdsInnerTabs": {
- "name": "CdsInnerTabs",
- "exportName": "default",
- "displayName": "InnerTabs",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "tabs",
- "description": "Define a lista dos itens da InnerTabs a serem mostrados.\nOs itens da lista devem ser objetos com `name` (para identificar o slot)\ne `title` (título da aba)",
- "type": {
- "name": "array"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "[]"
- }
- },
- {
- "name": "activeTab",
- "description": "O item ativo dentre as abas",
- "type": {
- "name": "object"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "{}"
- }
- },
- {
- "name": "variant",
- "description": "Cor da borda que indica o item ativo.\nExistem algumas cores predefinidas seguindo os guias do Cuida, são elas: \n`turquoise`, `green`, `blue`, `violet`, `pink`, `red`, `orange`, `amber` e `gray`.",
- "tags": {},
- "values": [
- "green",
- "teal",
- "blue",
- "indigo",
- "violet",
- "pink",
- "red",
- "orange",
- "amber",
- "dark"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'green'"
- }
- },
- {
- "name": "headerLeft",
- "description": "Define se as abas devem ser alinhadas à esquerda. Caso `false`, o container das abas\ntomará todo o espaço disponível.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "lazy",
- "description": "Define se as abas devem ser todas carregadas na renderização do componente ou\nsob demanda, apenas após elas serem acessadas pela primeira vez",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- }
- ],
- "events": [
- {
- "name": "tab-click"
- },
- {
- "name": "change"
- }
- ],
- "slots": [
- {
- "name": "getSlotName(tab)",
- "scoped": true,
- "description": "Slot para renderização customizada do conteúdo das abas",
- "bindings": [
- {
- "name": "name",
- "title": "binding"
- }
- ]
- }
- ],
- "sourceFiles": [
- "src/components/InnerTabs.vue"
- ]
- },
- "CdsInteractionBlockingOverlay": {
- "name": "CdsInteractionBlockingOverlay",
- "exportName": "default",
- "displayName": "InteractionBlockingOverlay",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "blockInteraction",
- "description": "Define qual critério vai ser usado para exibir o componente.",
- "tags": {},
- "values": [
- "mobile",
- "landscape"
- ],
- "type": {
- "name": "string"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "'mobile'"
- }
- },
- {
- "name": "title",
- "description": "Define o título do componente.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "''"
- }
- },
- {
- "name": "description",
- "description": "Define a mensagem descritiva a ser exibida no componente.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "''"
- }
- },
- {
- "name": "buttonVariant",
- "description": "Define qual é a variante de cor do botão exibido quando a propriedade 'block-interaction' for 'mobile'.",
- "tags": {},
- "values": [
- "green",
- "teal",
- "blue",
- "indigo",
- "violet",
- "pink",
- "red",
- "orange",
- "amber",
- "dark"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'green'"
- }
- },
- {
- "name": "buttonText",
- "description": "Define qual o texto do botão exibido quando a propriedade 'block-interaction' for 'mobile'.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Ir para o início'"
- }
- }
- ],
- "events": [
- {
- "name": "button-click",
- "description": "Evento que indica que o botão de ação foi clicado",
- "type": {
- "names": [
- "Event"
- ]
- }
- }
- ],
- "sourceFiles": [
- "src/components/InteractionBlockingOverlay.vue"
- ]
- },
- "CdsLabel": {
- "name": "CdsLabel",
- "exportName": "default",
- "displayName": "Label",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "for",
- "description": "ID de referência ao input.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "''"
- }
- },
- {
- "name": "text",
- "description": "Especifica a label do input.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Label'"
- }
- },
- {
- "name": "tooltip",
- "description": "Define exibição e texto do tooltip do input",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "tooltipIcon",
- "description": "Especifica ícone do tooltip do TextInput.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'info-outline'"
- }
- },
- {
- "name": "supportLink",
- "description": "Controla a exibição e o conteúdo do link de suporte exibido ao lado da label.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "supportLinkUrl",
- "description": "Define a url a ser acessada no clique do link de suporte.",
- "type": {
- "name": "string|null"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "required",
- "description": "Exibe asterisco de obrigatório (obs.: não faz a validação)",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "fluid",
- "description": "Especifica se a largura do TextInput deve ser fluida.",
- "type": {
- "name": "boolean"
- },
- "required": false,
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- }
- ],
- "events": [
- {
- "name": "supportLinkClick"
- }
- ],
- "sourceFiles": [
- "src/components/Label.vue"
- ]
- },
- "CdsLineChart": {
- "displayName": "CdsLineChart",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "data",
- "description": "Define o conjunto de dados a serem mostrados no gráfico.\nO objeto deve conter o parâmetro `name` (para identificar o conjunto de dados)\ne `datasets`, array de objetos que apresentará `label` (indicar o rótulo do dado) e\n`data` (array com os valores númericos).",
- "type": {
- "name": "object"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "{\n datasets: [\n {\n label: '',\n data: [],\n }\n ]\n}"
- }
- },
- {
- "name": "xAxisRange",
- "description": "Define os intervalos máximo e mínimo sugeridos para o eixo X.\nCaso os valores do dataset ultrapassem os intervalos sugeridos, \nestes serão desconsiderados, prevalencendo o dataset.",
- "type": {
- "name": "array"
- },
- "defaultValue": {
- "func": false,
- "value": "[0, 100]"
- }
- },
- {
- "name": "yAxisRange",
- "description": "Define os intervalos máximo e mínimo sugeridos para o eixo Y.\nCaso os valores do dataset ultrapassem os intervalos sugeridos, \nestes serão desconsiderados, prevalencendo o dataset.",
- "type": {
- "name": "array"
- },
- "defaultValue": {
- "func": false,
- "value": "[0, 100]"
- }
- },
- {
- "name": "variant",
- "description": "Personaliza a paleta de cores do gráfico. São 11 variantes implementadas:\n`green`, `teal`, `turquoise`, `blue`, `indigo`, `violet`, `pink`, `red`, `orange`, `amber`, `gray`, `dark`.",
- "tags": {},
- "values": [
- "green",
- "teal",
- "blue",
- "indigo",
- "violet",
- "pink",
- "red",
- "orange",
- "amber",
- "dark"
- ],
- "type": {
- "name": "string"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "'green'"
- }
- },
- {
- "name": "theme",
- "description": "Define o tema do gráfico.",
- "tags": {},
- "values": [
- "blue",
- "indigo"
- ],
- "type": {
- "name": "string"
- },
- "required": false,
- "defaultValue": {
- "func": false,
- "value": "''"
- }
- },
- {
- "name": "labels",
- "description": "Defina as labels do gráfico",
- "type": {
- "name": "array"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "[]"
- }
- },
- {
- "name": "showLabelName",
- "description": "Defina o texto a ser exibido para a legenda. Quando definido como verdadeiro\n(true), espera-se que exiba o nome do data. Quando definido\ncomo falso (false), será definido o nome do dataset",
- "type": {
- "name": "boolean"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "true"
- }
- },
- {
- "name": "fill",
- "description": "Defina se deve ser aplicado preenchimento ao gráfico.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "isDashed",
- "description": "Defina se deve transformar o gráfico de linhas sólidas em linhas tracejadas.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "borderDash",
- "description": "Defina efeito de linha tracejada. Especificamente, o valor [a, b] define o padrão\nde traços da linha, onde `a` representa o comprimento de cada traço sólido e `b`\nrepresenta o comprimento de cada espaço entre os traços.",
- "type": {
- "name": "array"
- },
- "defaultValue": {
- "func": false,
- "value": "[]"
- }
- },
- {
- "name": "smoothing",
- "description": "Defina o nível de suavização das linhas do gráfico.",
- "type": {
- "name": "number"
- },
- "defaultValue": {
- "func": false,
- "value": "0.3"
- }
- },
- {
- "name": "scales",
- "description": "Objeto de configuação de animation. O objeto sobrescreve a configuração padrão.",
- "type": {
- "name": "object"
- },
- "defaultValue": {
- "func": false,
- "value": "{}"
- }
- },
- {
- "name": "animation",
- "description": "Objeto de configuação de animation. O objeto sobrescreve a configuração padrão.",
- "type": {
- "name": "object"
- },
- "defaultValue": {
- "func": false,
- "value": "{}"
- }
- },
- {
- "name": "plugins",
- "description": "Objeto de configuação de plugins. O objeto sobrescreve a configuração padrão.",
- "type": {
- "name": "object"
- },
- "defaultValue": {
- "func": false,
- "value": "{}"
- }
- }
- ],
- "sourceFiles": [
- "src/components/LineChart.vue"
- ]
- },
- "CdsLink": {
- "displayName": "CdsLink",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "href",
- "description": "URL de redirecionamento.",
- "type": {
- "name": "string"
- },
- "required": true
- },
- {
- "name": "newTab",
- "description": "Prop utilizada para o redirecionamento do link ser a partir de uma nova aba.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "text",
- "description": "Texto do link",
- "type": {
- "name": "string"
- },
- "required": true
- },
- {
- "name": "size",
- "description": "Controla o tamanho da fonte do Link",
- "tags": {},
- "values": [
- "sm",
- "md",
- "lg"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'md'"
- }
- },
- {
- "name": "bold",
- "description": "Deixa o link em negrito.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- }
- ],
- "slots": [
- {
- "name": "default",
- "scoped": true,
- "description": "Slot padrão para renderização de conteúdo customizado do texto do link.",
- "bindings": [
- {
- "name": "class",
- "title": "binding"
- }
- ]
- }
- ],
- "sourceFiles": [
- "src/components/Link.vue"
- ]
- },
- "CdsList": {
- "name": "CdsList",
- "exportName": "default",
- "displayName": "List",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "items",
- "description": "Lista de itens a serem exibidos no componente. Cada item deve seguir o formato padrão:\n\n```js\n{ title: 'Título do item', content: 'Conteúdo do item' }\n```\n\nEsse formato permite o uso da listagem no layout padrão, onde cada item\nserá exibido com um título e um conteúdo.\n\nCaso deseje utilizar uma estrutura personalizada, você pode fornecer os\nitens no formato desejado e personalizar a exibição dentro do slot `item`.",
- "type": {
- "name": "array"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "[]"
- }
- },
- {
- "name": "variant",
- "description": "A variante de cor do título são 10 variantes implementadas: 'green', 'teal',\n'blue', 'indigo', 'violet', 'pink', 'red', 'orange','amber' e 'white'.",
- "tags": {},
- "values": [
- "green",
- "teal",
- "blue",
- "indigo",
- "violet",
- "pink",
- "red",
- "orange",
- "amber",
- "dark"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'blue'"
- }
- },
- {
- "name": "clickable",
- "description": "Indica se o componente deve ser clicável ou não.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "padding",
- "description": "Define o valor do padding do item da lista. Os valores são múltiplos de 4px separados por\nvírgula para vertical e horizontal (ex: '2, 4').",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'7, 3'"
- }
- }
- ],
- "events": [
- {
- "name": "click",
- "description": "Evento que indica que um item da listagem foi clicado. A prop __clickable__ tem que estar definida como __true__."
- }
- ],
- "slots": [
- {
- "name": "item",
- "scoped": true,
- "description": "Slot utilizado para renderização de conteúdo de listagem.",
- "bindings": [
- {
- "name": "item",
- "title": "binding"
- }
- ]
- },
- {
- "name": "actions",
- "scoped": true,
- "description": "Slot utilizado para renderização de botões de ação para listagem desktop.",
- "bindings": [
- {
- "name": "item",
- "title": "binding"
- }
- ]
- }
- ],
- "sourceFiles": [
- "src/components/List.vue"
- ]
- },
- "CdsLoadingBar": {
- "displayName": "CdsLoadingBar",
- "exportName": "default",
- "description": "",
- "tags": {},
- "sourceFiles": [
- "src/components/LoadingBar.vue"
- ]
- },
- "CdsLoadingIndicator": {
- "name": "CdsLoadingIndicator",
- "exportName": "default",
- "displayName": "LoadingIndicator",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "modelValue",
- "description": "Controla a exibição do LoadingIndicator.",
- "type": {
- "name": "boolean"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "variant",
- "description": "A variante de cor. São 10 variantes:",
- "tags": {},
- "values": [
- "green",
- "teal",
- "blue",
- "indigo",
- "violet",
- "pink",
- "red",
- "orange",
- "amber",
- "dark"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'green'"
- }
- },
- {
- "name": "intervalTime",
- "description": "Define o tempo, em ms, do intervalo de mudança da barra de progresso.",
- "type": {
- "name": "number"
- },
- "defaultValue": {
- "func": false,
- "value": "500"
- }
- }
- ],
- "sourceFiles": [
- "src/components/LoadingIndicator.vue"
- ]
- },
- "CdsMobileNavbar": {
- "name": "CdsMobileNavbar",
- "exportName": "default",
- "displayName": "MobileNavbar",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "items",
- "description": "Define os itens de menu da navbar.",
- "type": {
- "name": "array"
- },
- "required": true
- },
- {
- "name": "variant",
- "description": "Define a variante de cor dos detalhes do componente. São 9 variantes implementadas: 'green', 'teal',\n'blue', 'indigo', 'violet', 'pink', 'red', 'orange', 'amber', 'gray' e 'dark'.",
- "tags": {},
- "values": [
- "green",
- "teal",
- "blue",
- "indigo",
- "violet",
- "pink",
- "red",
- "orange",
- "amber",
- "dark"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'green'"
- }
- },
- {
- "name": "showLabel",
- "description": "Remove as labels dos itens da navbar.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "activeItem",
- "description": "O item ativo da NavBar",
- "type": {
- "name": "object"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "{}"
- }
- }
- ],
- "events": [
- {
- "name": "item-click"
- }
- ],
- "sourceFiles": [
- "src/components/MobileNavbar.vue"
- ]
- },
- "CdsMobileNavigation": {
- "name": "CdsMobileNavigation",
- "exportName": "default",
- "displayName": "MobileNavigation",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "variant",
- "description": "A variante de cor. São 10 variantes implementadas: 'green', 'teal',\n'blue', 'indigo', 'violet', 'pink', 'red', 'orange','amber' e 'white'.\nA variante só terá efeito quando a SideBar estiver no modo light.",
- "tags": {},
- "values": [
- "green",
- "teal",
- "blue",
- "indigo",
- "violet",
- "pink",
- "red",
- "orange",
- "amber",
- "dark"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'green'"
- }
- },
- {
- "name": "light",
- "description": "Ativa o modo light da navegação.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "sidebarLogo",
- "description": "Define a logo que vai aparecer na barra lateral da navegação",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "''"
- }
- },
- {
- "name": "items",
- "description": "Define a lista dos itens da navegação a serem\nmostrados. Os itens da lista devem ser\nobjetos com path ou route, e com uma label.",
- "type": {
- "name": "array"
- },
- "defaultValue": {
- "func": false,
- "value": "[]"
- }
- },
- {
- "name": "activeItem",
- "description": "O item ativo da navegação.",
- "type": {
- "name": "object"
- },
- "defaultValue": {
- "func": true,
- "value": "() => {}"
- }
- },
- {
- "name": "user",
- "description": "Define as informações referentes ao usuário. O objeto deve seguir a assinatura:\n{ name: String, role: String, picture: String }",
- "type": {
- "name": "object"
- },
- "defaultValue": {
- "func": true,
- "value": "() => {}"
- }
- },
- {
- "name": "sticky",
- "description": "Define se o componente estará no modo sticky",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- }
- ],
- "events": [
- {
- "name": "logout",
- "description": "Evento emitido quando o botão de logout é clicado",
- "type": {
- "names": [
- "Event"
- ]
- }
- },
- {
- "name": "item-click",
- "description": "Evento emitido quando um dos itens da navegação é clicado",
- "type": {
- "names": [
- "Event"
- ]
- }
- },
- {
- "name": "profile-click",
- "description": "Evento emitido quando o clique é feito nas informações do usuário",
- "type": {
- "names": [
- "Event"
- ]
- }
- }
- ],
- "slots": [
- {
- "name": "sidebar-logo",
- "description": "Slot para renderização do logo da sidebar."
- }
- ],
- "sourceFiles": [
- "src/components/MobileNavigation.vue"
- ]
- },
- "CdsMobileStepperInput": {
- "name": "CdsMobileStepperInput",
- "exportName": "default",
- "displayName": "MobileStepperInput",
- "description": "",
- "tags": {},
- "events": [
- {
- "name": "add"
- },
- {
- "name": "subtract"
- }
- ],
- "slots": [
- {
- "name": "suffix",
- "description": "Slot e prop de mesmo nome utilizados para adicionar sufixo ao stepperInput. O valor padrão é `%`. O valor passado por slot tem maior precedência que o valor enviado para a prop."
- }
- ],
- "sourceFiles": [
- "src/components/MobileStepperInput.vue"
- ]
- },
- "CdsModal": {
- "displayName": "CdsModal",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "modelValue",
- "description": "Controla a exibição do modal.",
- "type": {
- "name": "boolean"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "title",
- "description": "Define o título do modal exibido no header",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Título'"
- }
- },
- {
- "name": "size",
- "description": "Especifica o tamanho do modal. São 3 tamanhos implementados: 'sm', 'md', 'lg' e 'xl'.",
- "tags": {},
- "values": [
- "sm",
- "md",
- "lg",
- "xl"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'md'"
- }
- },
- {
- "name": "disableOkButton",
- "description": "Define o estado do botão de ação do modal.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "disableCancelButton",
- "description": "Define o estado do botão de cancelar do modal.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "noCloseOnBackdrop",
- "description": "Controla a ação de fechar o modal ao clicar fora.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "noCloseOkButton",
- "description": "Controla a ação de fechar o modal ao clicar no botão de ação.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "noCloseCancelButton",
- "description": "Controla a ação de fechar o modal ao clicar no botão de cancelar.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "noCloseButton",
- "description": "Controla a exibição do botão de fechar do modal.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "noCancelButton",
- "description": "Controla a exibição do botão de cancelar do modal.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "noFooter",
- "description": "Controla a exibição do rodapé (footer) do modal.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "noHeader",
- "description": "Controla a exibição do cabeçalho (header) do modal.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "okButtonText",
- "description": "Define texto do botão de ação do modal",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Confirmar'"
- }
- },
- {
- "name": "cancelButtonText",
- "description": "Define texto do botão de cancelar do modal",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Cancelar'"
- }
- },
- {
- "name": "actionButtonVariant",
- "description": "Define a variante do botão de ação do Modal (segue as variantes do componente de botão do Cuida)",
- "tags": {},
- "values": [
- "green",
- "teal",
- "blue",
- "indigo",
- "violet",
- "pink",
- "red",
- "orange",
- "amber",
- "dark"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'green'"
- }
- },
- {
- "name": "scrollable",
- "description": "Define se o conteúdo do modal precisa ser \"scrollado\" e adiciona um scroll vertical quando a altura máxima é atingida",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- }
- ],
- "events": [
- {
- "name": "close",
- "type": {
- "names": [
- "undefined"
- ]
- }
- },
- {
- "name": "update:modelValue",
- "type": {
- "names": [
- "undefined"
- ]
- }
- },
- {
- "name": "ok",
- "type": {
- "names": [
- "undefined"
- ]
- }
- },
- {
- "name": "cancel"
- }
- ],
- "slots": [
- {
- "name": "header",
- "description": "Slot usado para utilização de header customizado."
- },
- {
- "name": "default"
- },
- {
- "name": "footer",
- "description": "Slot usado para inserção de footer customizado."
- }
- ],
- "sourceFiles": [
- "src/components/Modal.vue"
- ]
- },
- "CdsMonthAndYearPicker": {
- "name": "CdsMonthAndYearPicker",
- "exportName": "default",
- "displayName": "MonthAndYearPicker",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "label",
- "description": "Especifica a label do input.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Label'"
- }
- },
- {
- "name": "variant",
- "description": "A variante de cor. São 10 variantes:",
- "tags": {},
- "values": [
- "green",
- "teal",
- "blue",
- "indigo",
- "violet",
- "pink",
- "red",
- "orange",
- "amber",
- "dark"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'green'"
- }
- },
- {
- "name": "state",
- "description": "Especifica o estado do Input. As opções são 'default', 'valid', 'loading' e 'invalid'.",
- "tags": {},
- "values": [
- "default",
- "valid",
- "loading",
- "invalid"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'default'"
- }
- },
- {
- "name": "required",
- "description": "Exibe asterisco de obrigatório (obs.: não faz a validação)",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "disabled",
- "description": "Desabilita o input.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "fluid",
- "description": "Especifica se a largura do MonthAndYearPicker deve ser fluida.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "mobile",
- "tags": {
- "deprecated": [
- {
- "description": "Essa prop vai ser substituída pela prop `floatingLabel` na v4. Define o tipo do input, se true será um input adaptado para o mobile",
- "title": "deprecated"
- }
- ]
- },
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "floatingLabel",
- "description": "Define o tipo do input, se true será um input adaptado para o mobile",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "placeholder",
- "description": "Texto placeholder para o MonthAndYearPicker.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Selecione uma data'"
- }
- },
- {
- "name": "errorMessage",
- "description": "Especifica a mensagem de erro, que será exibida caso o estado seja inválido",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Valor inválido'"
- }
- },
- {
- "name": "minDate",
- "description": "A data mínima selecionável no MonthAndYearPicker. Deve ser uma string no formato `yyyy-MM-dd`.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "''"
- }
- },
- {
- "name": "maxDate",
- "description": "A data máxima selecionável no MonthAndYearPicker. Deve ser uma string no formato `yyyy-MM-dd`.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "''"
- }
- },
- {
- "name": "tooltip",
- "description": "Define exibição e texto do tooltip do input",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "tooltipIcon",
- "description": "Especifica ícone do tooltip do MonthAndYearPicker.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'info-outline'"
- }
- },
- {
- "name": "supportingText",
- "description": "Especifica mensagem de auxílio.",
- "type": {
- "name": "string|array"
- },
- "defaultValue": {
- "func": false,
- "value": "''"
- }
- },
- {
- "name": "supportLink",
- "description": "Controla a exibição e o conteúdo do link de suporte exibido ao lado da label.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "supportLinkUrl",
- "description": "Define a url a ser acessada no clique do link de suporte.",
- "type": {
- "name": "string|null"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- }
- ],
- "sourceFiles": [
- "src/components/MonthAndYearPicker.vue"
- ]
- },
- "CdsMultiFileInput": {
- "name": "CdsMultiFileInput",
- "exportName": "default",
- "displayName": "MultiFileInput",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "documents",
- "description": "Especifica os itens que serão exibidos nas opções de arquivos. os itens devem conter, ao menos, os atributos `name` e `required`.",
- "type": {
- "name": "array"
- },
- "required": true
- },
- {
- "name": "variant",
- "description": "Especifica a principal do componente. Essa cor será aplicada aos detalhes de estilo do componente, bem como em seu botão principal.\nSão 10 variantes: 'teal', 'green', 'blue', 'indigo', 'violet', 'pink', 'red', 'orange', 'amber' e 'dark'.",
- "tags": {},
- "values": [
- "green",
- "teal",
- "blue",
- "indigo",
- "violet",
- "pink",
- "red",
- "orange",
- "amber",
- "dark"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'green'"
- }
- },
- {
- "name": "submitButtonText",
- "description": "Especifica o texto do botão de submit.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Enviar'"
- }
- },
- {
- "name": "buttonSecondary",
- "description": "Especifica se o botão de submit é do tipo secundário.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- }
- ],
- "events": [
- {
- "name": "submit"
- }
- ],
- "sourceFiles": [
- "src/components/MultiFileInput.vue"
- ]
- },
- "CdsMultiselect": {
- "displayName": "CdsMultiselect",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "modelValue",
- "description": "Guarda o valor selecionado do multiselect.",
- "type": {
- "name": "array"
- },
- "required": true
- },
- {
- "name": "label",
- "description": "Especifica a label do input.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'text'"
- }
- },
- {
- "name": "variant",
- "description": "A variante de cor. São 10 variantes:",
- "tags": {},
- "values": [
- "green",
- "teal",
- "blue",
- "indigo",
- "violet",
- "pink",
- "red",
- "orange",
- "amber",
- "dark"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'green'"
- }
- },
- {
- "name": "trackBy",
- "description": "Utilizada para comparar objetos. Seu valor deve ser único.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'value'"
- }
- },
- {
- "name": "required",
- "description": "Exibe asterisco indicativo de obrigatoriedade (obs.: não faz a validação)",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "disabled",
- "description": "Desabilita o Multiselect.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "errorMessage",
- "description": "Especifica a mensagem de erro, que será exibida caso o estado seja inválido",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Valor inválido'"
- }
- },
- {
- "name": "state",
- "description": "Especifica o estado do TextInput. As opções são 'default' e 'invalid'.",
- "tags": {},
- "values": [
- "default",
- "invalid"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'default'"
- }
- },
- {
- "name": "options",
- "description": "Lista de opções do Multiselect.",
- "type": {
- "name": "array"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "[]"
- }
- },
- {
- "name": "optionsField",
- "description": "Indica o nome da chave do objeto a ser considerada na renderização das opções do select.",
- "type": {
- "name": "string"
- },
- "required": false,
- "defaultValue": {
- "func": false,
- "value": "'value'"
- }
- },
- {
- "name": "hideSelectAll",
- "description": "Permite ocultar o botão \"selecionar todos\"",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "mobile",
- "description": "Define o tipo do input, se true será um input adaptado para o mobile",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- }
- ],
- "events": [
- {
- "name": "input",
- "description": "Evento utilizado para implementar o v-model.",
- "type": {
- "names": [
- "Event"
- ]
- }
- },
- {
- "name": "update:modelValue",
- "description": "Evento que indica que o valor do Multiselect foi alterado",
- "type": {
- "names": [
- "Event"
- ]
- }
- },
- {
- "name": "remove",
- "description": "Evento disparado quando um item é deselecionado.",
- "type": {
- "names": [
- "Event"
- ]
- }
- },
- {
- "name": "select",
- "description": "Evento disparado quando um item é selecionado.",
- "type": {
- "names": [
- "Event"
- ]
- }
- },
- {
- "name": "close",
- "description": "Evento disparado quando o select é fechado.",
- "type": {
- "names": [
- "Event"
- ]
- }
- }
- ],
- "slots": [
- {
- "name": "label"
- },
- {
- "name": "option",
- "scoped": true,
- "bindings": [
- {
- "name": "option",
- "title": "binding"
- },
- {
- "name": "option-field",
- "title": "binding"
- }
- ]
- },
- {
- "name": "selection",
- "scoped": true,
- "bindings": [
- {
- "name": "values",
- "title": "binding"
- },
- {
- "name": "is-open",
- "title": "binding"
- },
- {
- "name": "unselect-item",
- "title": "binding"
- }
- ]
- }
- ],
- "sourceFiles": [
- "src/components/Multiselect.vue"
- ]
- },
- "CdsNavBar": {
- "displayName": "CdsNavBar",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "items",
- "description": "Define a lista dos itens do NavBar a serem\nmostrados. Os itens da lista devem ser\nobjetos com path ou route, e com uma label",
- "type": {
- "name": "array"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "[]"
- }
- },
- {
- "name": "activeItem",
- "description": "O item ativo da NavBar",
- "type": {
- "name": "object"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "{}"
- }
- },
- {
- "name": "variant",
- "description": "Cor da borda que indica o item ativo na NavBar.\nExistem algumas cores predefinidas seguindo os guias do Cuida, são elas:\n`turquoise`, `green`, `blue`, `violet`, `pink`, `red`, `orange`, `amber` e `gray`.",
- "tags": {},
- "values": [
- "green",
- "teal",
- "blue",
- "indigo",
- "violet",
- "pink",
- "red",
- "orange",
- "amber",
- "dark"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'green'"
- }
- }
- ],
- "events": [
- {
- "name": "navbar-click",
- "description": "Evento emitido quando um dos itens da NavBar é clicado",
- "type": {
- "names": [
- "Event"
- ]
- }
- }
- ],
- "sourceFiles": [
- "src/components/NavBar.vue"
- ]
- },
- "CdsNumberInput": {
- "name": "CdsNumberInput",
- "exportName": "default",
- "displayName": "NumberInput",
- "description": "",
- "tags": {},
- "expose": [
- {
- "name": "componentRef"
- },
- {
- "name": "isFocused"
- },
- {
- "name": "focus"
- },
- {
- "name": "blur"
- },
- {
- "name": "clear"
- },
- {
- "name": "select"
- }
- ],
- "props": [
- {
- "name": "label",
- "description": "Especifica a label do input.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Valor'"
- }
- },
- {
- "name": "disabled",
- "description": "Desabilita o input.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "state",
- "description": "Especifica o estado do TextInput. As opções são 'default', 'valid', 'loading' e 'invalid'.",
- "tags": {},
- "values": [
- "default",
- "valid",
- "loading",
- "invalid"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'default'"
- }
- },
- {
- "name": "required",
- "description": "Exibe asterisco de obrigatório (obs.: não faz a validação)",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "placeholder",
- "description": "Especifica o placeholder do input",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Digite aqui a informação'"
- }
- },
- {
- "name": "supportingText",
- "description": "Especifica mensagem de auxílio.",
- "type": {
- "name": "string|array"
- },
- "defaultValue": {
- "func": false,
- "value": "''"
- }
- },
- {
- "name": "errorMessage",
- "description": "Especifica a mensagem de erro, que será exibida caso o estado seja inválido",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Valor inválido'"
- }
- },
- {
- "name": "fluid",
- "description": "Especifica se a largura do TextInput deve ser fluida.",
- "type": {
- "name": "boolean"
- },
- "required": false,
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "tooltip",
- "description": "Define exibição e texto do tooltip do input",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "tooltipIcon",
- "description": "Especifica ícone do tooltip do TextInput.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'info-outline'"
- }
- },
- {
- "name": "money",
- "description": "Indica se o input vai funcionar com a máscara de dinheiro.\nA máscara utiliza `R$` como prefixo,` , ` como separador de decimais\ne tem precisão de 2 dígitos.\n\n\nAo utilizar essa prop o `update:modelValue` vai deixar de emitir\n`Number`e vai passar a emitir uma `String` contendo a máscara.\n\n\nPara receber o valor sem máscara, utilize a prop `unmaskedValue`\ncom v-model: `v-model:unmaskedValue=\"nome da propriedade a ser atualizada\"`",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "linkText",
- "tags": {
- "deprecated": [
- {
- "description": "Define exibição e texto do link do input (localizado à direita da label).",
- "title": "deprecated"
- }
- ]
- },
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "linkUrl",
- "tags": {
- "deprecated": [
- {
- "description": "Define a url a ser acessada no clique do link (no caso do link ser exibido).",
- "title": "deprecated"
- }
- ]
- },
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'https://cuida.framer.wiki/'"
- }
- },
- {
- "name": "supportLink",
- "description": "Controla a exibição e o conteúdo do link de suporte exibido ao lado da label.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "supportLinkUrl",
- "description": "Define a url a ser acessada no clique do link de suporte.",
- "type": {
- "name": "string|null"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "lazy",
- "description": "Quando true, o v-model é atualizado com o evento `change` no lugar do `input`.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "mask",
- "description": "Especifica a máscara a ser aplicada ao TextInput.\nExemplo: \"(##) #####-####\"",
- "type": {
- "name": "string|array"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "mobile",
- "tags": {
- "deprecated": [
- {
- "description": "Define o tipo do input, se true será um input adaptador para o mobile",
- "title": "deprecated"
- }
- ]
- },
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "floatingLabel",
- "description": "Define o tipo do input, se true será um input adaptado para o mobile",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- }
- ],
- "sourceFiles": [
- "src/components/NumberInput.vue"
- ]
- },
- "CdsOverlayLoader": {
- "displayName": "CdsOverlayLoader",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "size",
- "description": "Propriedade referente ao tamanho do componente ('sm', 'md' ou 'lg')",
- "tags": {},
- "values": [
- "sm",
- "md",
- "lg"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'md'"
- }
- },
- {
- "name": "variant",
- "description": "Variante de cor do componente ('turquoise', 'green', 'blue',\n 'indigo', 'violet', 'pink', 'red', 'orange', 'amber')",
- "tags": {},
- "values": [
- "green",
- "teal",
- "blue",
- "indigo",
- "violet",
- "pink",
- "red",
- "orange",
- "amber",
- "dark"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'green'"
- }
- }
- ],
- "sourceFiles": [
- "src/components/OverlayLoader.vue"
- ]
- },
- "CdsPageContainer": {
- "displayName": "CdsPageContainer",
- "exportName": "default",
- "description": "",
- "tags": {},
- "slots": [
- {
- "name": "default"
- }
- ],
- "sourceFiles": [
- "src/components/PageContainer.vue"
- ]
- },
- "CdsPageHeader": {
- "exportName": "default",
- "displayName": "PageHeader",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "title",
- "description": "O título das páginas nas quais o PageHeader será utilizado.",
- "type": {
- "name": "string"
- },
- "required": true
- },
- {
- "name": "subtitle",
- "description": "O subtítulo das páginas nas quais o PageHeader será utilizado.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "compact",
- "description": "Quando ativa, define a largura do PageHeader como 50% do container.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "loading",
- "description": "Quando true, ativa o skeleton do componente.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- }
- ],
- "slots": [
- {
- "name": "aside"
- }
- ],
- "sourceFiles": [
- "src/components/PageHeader.vue"
- ]
- },
- "CdsPageLayout": {
- "name": "CdsPageLayout",
- "exportName": "default",
- "displayName": "PageLayout",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "variant",
- "description": "A variante de cor. São 10 variantes implementadas: 'green', 'teal',\n'blue', 'indigo', 'violet', 'pink', 'red', 'orange','amber' e 'white'.\nA variante só terá efeito quando o PageLayout estiver no modo light.",
- "tags": {},
- "values": [
- "green",
- "teal",
- "blue",
- "indigo",
- "violet",
- "pink",
- "red",
- "orange",
- "amber",
- "dark"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'green'"
- }
- },
- {
- "name": "light",
- "description": "Ativa o modo light do PageLayout.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "user",
- "description": "Define as informações referentes ao usuário. O objeto deve seguir a assinatura:\n{ name: String, role: String, picture: String }",
- "type": {
- "name": "object"
- },
- "defaultValue": {
- "func": true,
- "value": "() => {}"
- }
- },
- {
- "name": "collapsibleSideBar",
- "description": "Define se a sidebar pode ser colapsada.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "showProfileMenu",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "sideBarItems",
- "description": "Define os itens da da barra lateral de navegação.",
- "type": {
- "name": "array"
- },
- "defaultValue": {
- "func": false,
- "value": "[]"
- }
- },
- {
- "name": "profileMenuItems",
- "description": "Define os itens a serem exibidos no menu dropdown mostrado ao clicar no \"perfil\".",
- "type": {
- "name": "array"
- },
- "defaultValue": {
- "func": false,
- "value": "[]"
- }
- },
- {
- "name": "navigationItems",
- "description": "Define os itens da da barra de navegação secundária.",
- "type": {
- "name": "array"
- },
- "defaultValue": {
- "func": false,
- "value": "[]"
- }
- },
- {
- "name": "logos",
- "description": "Define as logos da barra lateral de navegação, collapsible é a logo\n que aparecerá quando a sidebar estiver colapsada.",
- "type": {
- "name": "object"
- },
- "defaultValue": {
- "func": true,
- "value": "() => {}"
- }
- },
- {
- "name": "sideBarActiveItem",
- "description": "Define o item ativo da sideBar",
- "type": {
- "name": "object"
- },
- "defaultValue": {
- "func": true,
- "value": "() => {}"
- }
- },
- {
- "name": "navigationActiveItem",
- "description": "Define o item ativo da navegação secundária",
- "type": {
- "name": "object"
- },
- "defaultValue": {
- "func": true,
- "value": "() => {}"
- }
- }
- ],
- "events": [
- {
- "name": "sidebar-item-click",
- "description": "Evento emitido quando um dos itens da SideBar é clicado",
- "type": {
- "names": [
- "Event"
- ]
- }
- },
- {
- "name": "sidebar-logout",
- "description": "Evento emitido quando o icone de logout da SideBar é clicado",
- "type": {
- "names": [
- "Event"
- ]
- }
- },
- {
- "name": "popover-item-click"
- },
- {
- "name": "navigation-item-click",
- "description": "Evento emitido quando o icone da SecondaryNavbar é clicado",
- "type": {
- "names": [
- "Event"
- ]
- }
- }
- ],
- "slots": [
- {
- "name": "default",
- "description": "Slot usado para inserção de conteúdo do PageLayout."
- }
- ],
- "sourceFiles": [
- "src/components/PageLayout.vue"
- ]
- },
- "CdsPagination": {
- "name": "CdsPagination",
- "exportName": "default",
- "displayName": "Pagination",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "total",
- "description": "Prop utilizada para receber o número total de registros a serem paginados.",
- "type": {
- "name": "number"
- },
- "defaultValue": {
- "func": false,
- "value": "1"
- }
- },
- {
- "name": "perPage",
- "description": "Prop utilizada para receber o número de registros a serem exibidos\npor página.",
- "type": {
- "name": "number"
- },
- "defaultValue": {
- "func": false,
- "value": "1"
- }
- },
- {
- "name": "fluid",
- "description": "Prop que indica se o componente deverá ocupar 100% do espaço disponível.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "variant",
- "description": "A variante de cor. São 10 variantes:",
- "tags": {},
- "values": [
- "green",
- "teal",
- "blue",
- "indigo",
- "violet",
- "pink",
- "red",
- "orange",
- "amber",
- "dark"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'green'"
- }
- }
- ],
- "sourceFiles": [
- "src/components/Pagination.vue"
- ]
- },
- "CdsPanelCard": {
- "displayName": "CdsPanelCard",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "title",
- "description": "Título do card.",
- "type": {
- "name": "string"
- },
- "required": true
- },
- {
- "name": "subtitle",
- "description": "Subtítulo do card.",
- "type": {
- "name": "string"
- },
- "required": true
- },
- {
- "name": "noContentPadding",
- "description": "Remove o padding padrão do corpo do card.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- }
- ],
- "slots": [
- {
- "name": "panel-actions",
- "description": "Slot usado para inserção de elemento à direita no header."
- },
- {
- "name": "default",
- "description": "Slot usado para inserção de conteúdo customizado."
- }
- ],
- "sourceFiles": [
- "src/components/PanelCard.vue"
- ]
- },
- "CdsPasswordInput": {
- "displayName": "CdsPasswordInput",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "modelValue",
- "description": "Prop utilizada como v-model.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "''"
- }
- },
- {
- "name": "label",
- "description": "Especifica a label do input.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Label'"
- }
- },
- {
- "name": "disabled",
- "description": "Desabilita o input.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "state",
- "description": "Especifica o estado do PasswordInput. As opções são 'default', 'valid', 'loading' e 'invalid'.",
- "tags": {},
- "values": [
- "default",
- "valid",
- "loading",
- "invalid"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'default'"
- }
- },
- {
- "name": "required",
- "description": "Exibe asterisco de campo obrigatório (obs.: não faz a validação).",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "placeholder",
- "description": "Especifica o placeholder do input.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Digite aqui a informação'"
- }
- },
- {
- "name": "errorMessage",
- "description": "Especifica a mensagem de erro, que será exibida caso o estado seja inválido.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Valor inválido'"
- }
- },
- {
- "name": "fluid",
- "description": "Especifica se a largura do PasswordInput deve ser fluida.",
- "type": {
- "name": "boolean"
- },
- "required": false,
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "tooltip",
- "description": "Define exibição e texto do tooltip do input",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "tooltipIcon",
- "description": "Especifica ícone do tooltip do TextInput.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'info-outline'"
- }
- },
- {
- "name": "mobile",
- "description": "Define o tipo do input, se true será um input adaptador para o mobile",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- }
- ],
- "events": [
- {
- "name": "update:modelValue",
- "description": "Evento utilizado para implementar o v-model.",
- "type": {
- "names": [
- "Event"
- ]
- }
- }
- ],
- "slots": [
- {
- "name": "label"
- }
- ],
- "sourceFiles": [
- "src/components/PasswordInput.vue"
- ]
- },
- "CdsPieChart": {
- "displayName": "CdsPieChart",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "data",
- "description": "Define o conjunto de dados a serem mostrados no gráfico.\nO objeto deve conter o parâmetro `name` (para identificar o conjunto de dados)\ne `datasets`, array de objetos que apresentará `label` (indicar o rótulo do dado) e\n`data` (array com os valores númericos).",
- "type": {
- "name": "object"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "{\n datasets: [\n {\n label: '',\n data: [],\n }\n ]\n}"
- }
- },
- {
- "name": "variant",
- "description": "Personaliza a paleta de cores do gráfico. São 11 variantes implementadas:\n`green`, `teal`, `turquoise`, `blue`, `indigo`, `violet`, `pink`, `red`, `orange`, `amber`, `gray`, `dark`.",
- "tags": {},
- "values": [
- "green",
- "teal",
- "blue",
- "indigo",
- "violet",
- "pink",
- "red",
- "orange",
- "amber",
- "dark"
- ],
- "type": {
- "name": "string"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "'green'"
- }
- },
- {
- "name": "labels",
- "description": "Defina as labels do gráfico",
- "type": {
- "name": "array"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "[]"
- }
- },
- {
- "name": "colors",
- "description": "Defina as cores do gráfico. Essa prop sobrescreve as shades da variante.\nA prop espera um Array de variantes de cor. Ex.: ['green', 'turquoise']",
- "type": {
- "name": "array"
- },
- "defaultValue": {
- "func": false,
- "value": "[]"
- }
- }
- ],
- "sourceFiles": [
- "src/components/PieChart.vue"
- ]
- },
- "CdsPinInput": {
- "name": "CdsPinInput",
- "exportName": "default",
- "displayName": "PinInput",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "modelValue",
- "description": "O conteúdo do PIN.",
- "type": {
- "name": "string"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "''"
- }
- },
- {
- "name": "length",
- "description": "Especifica a quantidade de caracteres no PIN.",
- "type": {
- "name": "number"
- },
- "defaultValue": {
- "func": false,
- "value": "4"
- }
- },
- {
- "name": "state",
- "description": "Especifica o estado do componente.",
- "tags": {},
- "values": [
- "default",
- "valid",
- "invalid"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'default'"
- }
- },
- {
- "name": "visible",
- "description": "Especifica se os caracteres do PIN são visíveis.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "mobile",
- "description": "Especifica se o PinInput deve estar na versão mobile.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- }
- ],
- "events": [
- {
- "name": "update:modelValue",
- "description": "Evento disparado com a modificação do v-model.",
- "type": {
- "names": [
- "Event"
- ]
- }
- }
- ],
- "sourceFiles": [
- "src/components/PinInput.vue"
- ]
- },
- "CdsPolarAreaChart": {
- "displayName": "CdsPolarAreaChart",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "data",
- "description": "Define o conjunto de dados a serem mostrados no gráfico.\nO objeto deve conter o parâmetro `name` (para identificar o conjunto de dados)\ne `datasets`, array de objetos que apresentará `label` (indicar o rótulo do dado) e\n`data` (array com os valores númericos).",
- "type": {
- "name": "object"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "{\n datasets: [\n {\n label: '',\n data: [],\n }\n ]\n}"
- }
- },
- {
- "name": "variant",
- "description": "Personaliza a paleta de cores do gráfico. São 11 variantes implementadas:\n`green`, `teal`, `turquoise`, `blue`, `indigo`, `violet`, `pink`, `red`, `orange`, `amber`, `gray`, `dark`.",
- "tags": {},
- "values": [
- "green",
- "teal",
- "blue",
- "indigo",
- "violet",
- "pink",
- "red",
- "orange",
- "amber",
- "dark"
- ],
- "type": {
- "name": "string"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "'green'"
- }
- },
- {
- "name": "labels",
- "description": "Defina as labels do gráfico",
- "type": {
- "name": "array"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "[]"
- }
- },
- {
- "name": "isVisiblePointNames",
- "description": "Exibe o nome das labels centralizadas aos dados",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- }
- ],
- "sourceFiles": [
- "src/components/PolarAreaChart.vue"
- ]
- },
- "CdsPopover": {
- "displayName": "CdsPopover",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "modelValue",
- "description": "Prop utilizada como v-model.\ncontrola a exibição do Popover.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "width",
- "description": "Largura do Popover. A largura mínima é 100px e a máxima é 400px.",
- "type": {
- "name": "string|number"
- },
- "defaultValue": {
- "func": false,
- "value": "250"
- }
- },
- {
- "name": "fitContentWidth",
- "description": "Quando true deixa a largura do popover adaptável ao conteúdo. `Essa prop tem prevalência sobre a prop width!`",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "height",
- "description": "Altura do Popover. A altura máxima é 500px",
- "type": {
- "name": "string|number"
- },
- "defaultValue": {
- "func": false,
- "value": "200"
- }
- },
- {
- "name": "targetId",
- "description": "Id do elemento que será referência para a renderização\ndo Popover.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "''"
- }
- },
- {
- "name": "rightAligned",
- "description": "Quando `true`, alinha o popover à direita do\ndo componente referência (target).",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "verticalFluid",
- "description": "Quando `true`, remove o scroll interno e torna\no tamanho do Popover fluido.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- }
- ],
- "events": [
- {
- "name": "update:modelValue",
- "description": "Evento utilizado para implementar o v-model.",
- "type": {
- "names": [
- "Event"
- ]
- }
- }
- ],
- "slots": [
- {
- "name": "default",
- "description": "Slot utilizado para renderização do conteúdo do Popover."
- }
- ],
- "sourceFiles": [
- "src/components/Popover.vue"
- ]
- },
- "CdsProgressBar": {
- "name": "CdsProgressBar",
- "exportName": "default",
- "displayName": "ProgressBar",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "variant",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'green'"
- }
- },
- {
- "name": "value",
- "description": "Define o indicador de progresso da ProgressBar.",
- "type": {
- "name": "number"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "0"
- }
- },
- {
- "name": "showText",
- "description": "Define se a porcentagem vai ser mostrada.",
- "type": {
- "name": "boolean"
- },
- "required": false,
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "textAside",
- "description": "Quando true, dispõe o texto à direita.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "textLeft",
- "description": "Quando true, dispõe o texto à esquerda.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "shadeSteps",
- "description": "Ativa shades na progressBar que mudam com o value.\nAceita valores de 1 a 5, indicando a quantidade de gradações (shades) aplicadas",
- "type": {
- "name": "number"
- },
- "defaultValue": {
- "func": false,
- "value": "1"
- }
- }
- ],
- "slots": [
- {
- "name": "default",
- "description": "Slot padrão da progressBar. Pode ser utilizado para sobrescrever o valor de progresso."
- }
- ],
- "sourceFiles": [
- "src/components/ProgressBar.vue"
- ]
- },
- "CdsProgressCircular": {
- "displayName": "CdsProgressCircular",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "variant",
- "description": "Define a cor da ProgressCircular.",
- "tags": {},
- "values": [
- "green",
- "teal",
- "turquoise",
- "blue",
- "indigo",
- "violet",
- "pink",
- "red",
- "orange",
- "amber",
- "gray",
- "dark"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'green'"
- }
- },
- {
- "name": "size",
- "description": "Define o tamanho (diâmetro) da ProgressCircular.",
- "tags": {},
- "values": [
- "sm",
- "md",
- "lg"
- ],
- "type": {
- "name": "string"
- },
- "required": false,
- "defaultValue": {
- "func": false,
- "value": "'md'"
- }
- },
- {
- "name": "value",
- "description": "Define o valor correspondente ao percentual ou fração preenchida da ProgressCircular.",
- "type": {
- "name": "number"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "0"
- }
- },
- {
- "name": "maxValue",
- "description": "Define o valor máximo, a porção toda do processo, da ProgressCircular.\nPor padrão o valor máximo é 100 (padrão porcentagem).",
- "type": {
- "name": "number"
- },
- "required": false,
- "defaultValue": {
- "func": false,
- "value": "100"
- }
- },
- {
- "name": "slim",
- "description": "Torna a espessura do circulo da ProgressCircular menor.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "thick",
- "description": "Torna a espessura do circulo da ProgressCircular maior.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "noLabel",
- "description": "Controla a exibição da label.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- }
- ],
- "sourceFiles": [
- "src/components/ProgressCircular.vue"
- ]
- },
- "CdsPulsar": {
- "displayName": "CdsPulsar",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "variant",
- "description": "A variante de cor. São 10 variantes:",
- "tags": {},
- "values": [
- "green",
- "teal",
- "blue",
- "indigo",
- "violet",
- "pink",
- "red",
- "orange",
- "amber",
- "dark"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'green'"
- }
- },
- {
- "name": "targetId",
- "description": "Id do elemento que será referência para a renderização do Pulsar.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "''"
- }
- },
- {
- "name": "position",
- "description": "Posicionamento do Pulsar com relação ao elemento de referência.",
- "tags": {},
- "values": [
- "auto",
- "top",
- "right",
- "bottom",
- "left",
- "top-start",
- "right-start",
- "bottom-start",
- "left-start",
- "top-end",
- "right-end",
- "bottom-end",
- "left-end"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'top-end'"
- }
- }
- ],
- "sourceFiles": [
- "src/components/Pulsar.vue"
- ]
- },
- "CdsQuickActionBar": {
- "name": "CdsQuickActionBar",
- "exportName": "default",
- "displayName": "QuickActionBar",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "modelValue",
- "description": "Controla a exibição da barra de busca.",
- "type": {
- "name": "boolean"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "loading",
- "description": "Informa ao componente se a requisição ainda está em curso ou já foi finalizada.",
- "type": {
- "name": "boolean"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "groups",
- "description": "Resultados da busca a serem mostrados. Os objetos da lista devem ter, obrigatoriamente, uma chave \"category\" e uma lista \"results\".\nOs itens de results devem ter, obrigatoriamente, uma key chamada \"title\".",
- "type": {
- "name": "array"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "[]"
- }
- },
- {
- "name": "recents",
- "description": "Itens de buscas recentes a serem mostrados no estado inicial do componente. Os itens devem ter, obrigatoriamente, uma key chamada \"title\".",
- "type": {
- "name": "array"
- },
- "required": false,
- "defaultValue": {
- "func": false,
- "value": "[]"
- }
- },
- {
- "name": "numRecents",
- "description": "Define a quantidade máxima de itens recentes que serão exibidos. O mínimo de itens é 1 e o máximo é 10.",
- "type": {
- "name": "number"
- },
- "required": false,
- "defaultValue": {
- "func": false,
- "value": "5"
- }
- },
- {
- "name": "numResults",
- "description": "Define a quantidade máxima de itens de busca que serão exibidos.",
- "type": {
- "name": "number"
- },
- "required": false,
- "defaultValue": {
- "func": false,
- "value": "5"
- }
- },
- {
- "name": "placeholder",
- "description": "Define o texto que será exibido placeholder do componente.",
- "type": {
- "name": "string"
- },
- "required": false,
- "defaultValue": {
- "func": false,
- "value": "'Buscar por nome, CPF ou CNS...'"
- }
- },
- {
- "name": "initialStateText",
- "description": "Define o texto que será exibido no estado inicial quando não houver itens recentes.",
- "type": {
- "name": "string"
- },
- "required": false,
- "defaultValue": {
- "func": false,
- "value": "'Ainda não há nada aqui. Experimente fazer uma busca!'"
- }
- },
- {
- "name": "emptyStateText",
- "description": "Define o texto que será exibido quando não houver resultados.",
- "type": {
- "name": "string"
- },
- "required": false,
- "defaultValue": {
- "func": false,
- "value": "'Nenhum resultado encontrado'"
- }
- }
- ],
- "events": [
- {
- "name": "update:modelValue",
- "description": "Evento que indica se a variável de controle de exibição foi alterada.",
- "type": {
- "names": [
- "Event"
- ]
- }
- },
- {
- "name": "search",
- "description": "Evento disparado quando há uma pausa na digitação e retorna o texto da busca.",
- "type": {
- "names": [
- "Event"
- ]
- }
- },
- {
- "name": "onItemClick",
- "description": "Evento que indica qual item da lista de resultados foi clicado.",
- "type": {
- "names": [
- "Event"
- ]
- }
- },
- {
- "name": "onSeeMoreClick",
- "description": "Evento que indica que o botão de \"Ver mais\" foi clicado.",
- "type": {
- "names": [
- "Event"
- ]
- }
- },
- {
- "name": "close",
- "description": "Evento que indica que a barra de busca foi fechada.",
- "type": {
- "names": [
- "Event"
- ]
- }
- },
- {
- "name": "onRemoveRecent",
- "description": "Evento que retorna o item a ser removido.",
- "type": {
- "names": [
- "Event"
- ]
- }
- },
- {
- "name": "onEnterPress",
- "description": "Evento que indica se a tecla enter foi pressionada no campo de busca.",
- "type": {
- "names": [
- "Event"
- ]
- }
- }
- ],
- "slots": [
- {
- "name": "recent-item",
- "scoped": true,
- "description": "Slot usado para renderizar itens personalizados para os itens recentes. Dados do item podem ser acessados através da propriedade `recentItem`.",
- "bindings": [
- {
- "name": "data",
- "title": "binding"
- }
- ]
- },
- {
- "name": "result-item",
- "scoped": true,
- "description": "Slot usado para renderizar itens personalizados para os resultados da busca. Dados do item podem ser acessados através da propriedade `item`.",
- "bindings": [
- {
- "name": "data",
- "title": "binding"
- }
- ]
- },
- {
- "name": "footer",
- "scoped": true,
- "description": "Slot usado para renderizar o footer da barra de busca.",
- "bindings": [
- {
- "name": "class",
- "title": "binding"
- }
- ]
- }
- ],
- "sourceFiles": [
- "src/components/QuickActionBar.vue"
- ]
- },
- "CdsRadialBarChart": {
- "displayName": "CdsRadialBarChart",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "data",
- "description": "Define o conjunto de dados a serem mostrados no gráfico.\nO objeto deve conter o parâmetro `name` (para identificar o conjunto de dados)\ne `datasets`, array de objetos que apresentará `label` (indicar o rótulo do dado) e\n`data` (array com os valores númericos).",
- "type": {
- "name": "object"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "{\n datasets: [\n {\n label: '',\n data: [],\n }\n ]\n}"
- }
- },
- {
- "name": "variant",
- "description": "Personaliza a paleta de cores do gráfico. São 11 variantes implementadas:\n`green`, `teal`, `turquoise`, `blue`, `indigo`, `violet`, `pink`, `red`, `orange`, `amber`, `gray`, `dark`.",
- "tags": {},
- "values": [
- "green",
- "teal",
- "blue",
- "indigo",
- "violet",
- "pink",
- "red",
- "orange",
- "amber",
- "dark"
- ],
- "type": {
- "name": "string"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "'green'"
- }
- },
- {
- "name": "theme",
- "description": "Define o tema do gráfico.",
- "type": {
- "name": "string"
- },
- "required": false,
- "defaultValue": {
- "func": false,
- "value": "''"
- }
- },
- {
- "name": "labels",
- "description": "Defina as labels do gráfico",
- "type": {
- "name": "array"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "[]"
- }
- },
- {
- "name": "colors",
- "description": "Defina as cores do gráfico. Essa prop sobrescreve as shades da variante.\nA prop espera um Array de variantes de cor. Ex.: ['green', 'turquoise']",
- "type": {
- "name": "array"
- },
- "defaultValue": {
- "func": false,
- "value": "[]"
- }
- }
- ],
- "events": [
- {
- "name": "chart-click",
- "type": {
- "names": [
- "undefined"
- ]
- }
- }
- ],
- "sourceFiles": [
- "src/components/RadialBarChart.vue"
- ]
- },
- "CdsRadio": {
- "displayName": "CdsRadio",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "modelValue",
- "description": "A prop usada como v-model para monitorar a seleção do Radio",
- "type": {
- "name": "object"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "value",
- "description": "A prop usada como valor associado ao Radio. O que será atribuído\nv-model quando essa opção for selecionado",
- "type": {
- "name": "object"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "variant",
- "description": "A variante de cor. São 10 variantes:",
- "tags": {},
- "values": [
- "green",
- "teal",
- "blue",
- "indigo",
- "violet",
- "pink",
- "red",
- "orange",
- "amber",
- "dark"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'green'"
- }
- },
- {
- "name": "label",
- "description": "Define a label do input, o conteúdo que é exibido para descrever o Radio",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'radio content'"
- }
- },
- {
- "name": "disabled",
- "description": "Controla o status do Radio",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- }
- ],
- "events": [
- {
- "name": "update:modelValue",
- "description": "Evento emitido quando o Radio muda seu estado.",
- "type": {
- "names": [
- "Event"
- ]
- }
- }
- ],
- "slots": [
- {
- "name": "default",
- "description": "Slot padrão para renderização de conteúdo customizado da label"
- }
- ],
- "sourceFiles": [
- "src/components/Radio.vue"
- ]
- },
- "CdsRadioButtonGroup": {
- "name": "CdsRadioButtonGroup",
- "exportName": "default",
- "displayName": "RadioButtonGroup",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "label",
- "description": "Especifica o título do grupo de radio buttons",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Label'"
- }
- },
- {
- "name": "required",
- "description": "Especifica se o grupo de radio buttons é obrigatório",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "options",
- "description": "Define a quantidade de radio buttons a serem renderizados no grupo. Espera um array de objetos contendo, no mínimo, as propriedades `text` e `value`. Agora, a propriedade `label` também é suportada e pode ser usada no lugar de `text`. Na versão 4, apenas `label` e `value` serão aceitos.",
- "type": {
- "name": "array"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "[]"
- }
- },
- {
- "name": "disabled",
- "description": "Controla o status do grupo de radio buttons",
- "type": {
- "name": "boolean"
- },
- "required": false,
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "inline",
- "description": "Quando verdadeira, faz com que os radio buttons sejam renderizados um ao lado do outro",
- "type": {
- "name": "boolean"
- },
- "required": false,
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "allowsExpand",
- "tags": {
- "deprecated": [
- {
- "description": "Essa prop vai ser substituída pela prop `fluid` na v4. Quando verdadeiro, faz com que o button se adapte a expansão, podendo agora, adicionar uma descrição",
- "title": "deprecated"
- }
- ]
- },
- "type": {
- "name": "boolean"
- },
- "required": false,
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "fluid",
- "description": "Quando verdadeiro, faz com que o button se adapte a expansão, podendo agora, adicionar uma descrição",
- "type": {
- "name": "boolean"
- },
- "required": false,
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "state",
- "description": "Especifica o estado do RadioButtonGroup. As opções são 'default', 'valid', 'loading' e 'invalid'.",
- "tags": {},
- "values": [
- "default",
- "valid",
- "loading",
- "invalid"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'default'"
- }
- },
- {
- "name": "errorMessage",
- "description": "Especifica a mensagem de erro, que será exibida caso o estado seja inválido",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Valor inválido'"
- }
- },
- {
- "name": "variant",
- "description": "A variante de cor. São 10 variantes:",
- "tags": {},
- "values": [
- "green",
- "teal",
- "blue",
- "indigo",
- "violet",
- "pink",
- "red",
- "orange",
- "amber",
- "dark"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'blue'"
- }
- },
- {
- "name": "tooltip",
- "description": "Define exibição e texto do tooltip do DynamicInputList.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "tooltipIcon",
- "description": "Especifica ícone do tooltip do DynamicInputList.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'info-outline'"
- }
- },
- {
- "name": "supportLink",
- "description": "Controla a exibição e o conteúdo do link de suporte exibido ao lado da label.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "supportLinkUrl",
- "description": "Define a url a ser acessada no clique do link de suporte.",
- "type": {
- "name": "string|null"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- }
- ],
- "sourceFiles": [
- "src/components/RadioButtonGroup.vue"
- ]
- },
- "CdsRequiredIndicator": {
- "name": "CdsRequiredIndicator",
- "exportName": "default",
- "displayName": "RequiredIndicator",
- "description": "",
- "tags": {},
- "sourceFiles": [
- "src/components/RequiredIndicator.vue"
- ]
- },
- "CdsRichTooltip": {
- "displayName": "CdsRichTooltip",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "modelValue",
- "description": "Prop utilizada como v-model.\ncontrola a exibição do Popover.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "width",
- "description": "Largura do Popover. A largura mínima é 100px e a máxima é 400px.",
- "type": {
- "name": "string|number"
- },
- "defaultValue": {
- "func": false,
- "value": "250"
- }
- },
- {
- "name": "fitContentWidth",
- "description": "Quando true deixa a largura do popover adaptável ao conteúdo. `Essa prop tem prevalência sobre a prop width!`",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "targetId",
- "description": "Id do elemento que será referência para a renderização\ndo Popover.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "''"
- }
- },
- {
- "name": "defaultPlacement",
- "description": "Indica o posicionamento padrão do Popover.\nQuando não especificado é considerado o posicionamento \"bottom\"",
- "tags": {},
- "values": [
- "auto",
- "top",
- "right",
- "bottom",
- "left",
- "top-start",
- "right-start",
- "bottom-start",
- "left-start",
- "top-end",
- "right-end",
- "bottom-end",
- "left-end"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- }
- ],
- "events": [
- {
- "name": "update:modelValue",
- "description": "Evento utilizado para implementar o v-model.",
- "type": {
- "names": [
- "Event"
- ]
- }
- }
- ],
- "slots": [
- {
- "name": "default"
- }
- ],
- "sourceFiles": [
- "src/components/RichTooltip.vue"
- ]
- },
- "CdsScrollable": {
- "displayName": "CdsScrollable",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "maxHeight",
- "description": "Altura máxima do container até ser scrollado",
- "type": {
- "name": "string"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "'300px'"
- }
- },
- {
- "name": "autoHeight",
- "description": "Define altura como 'auto' para o container até o limite máximo",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "horizontalScroll",
- "description": "Torna o container scrollável horizontalmente",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- }
- ],
- "slots": [
- {
- "name": "default",
- "description": "Slot com o conteúdo que você deseja que seja scrollable"
- }
- ],
- "sourceFiles": [
- "src/components/Scrollable.vue"
- ]
- },
- "CdsSearchInput": {
- "name": "CdsSearchInput",
- "exportName": "default",
- "displayName": "SearchInput",
- "description": "",
- "tags": {},
- "expose": [
- {
- "name": "componentRef"
- },
- {
- "name": "isFocused"
- },
- {
- "name": "focus"
- },
- {
- "name": "blur"
- },
- {
- "name": "clear"
- },
- {
- "name": "select"
- }
- ],
- "props": [
- {
- "name": "disabled",
- "description": "Desabilita o SearchInput.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "placeholder",
- "description": "Especifica o placeholder do input",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Busque...'"
- }
- },
- {
- "name": "hideLabel",
- "description": "Quando ativado a label não será exibida",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "fluid",
- "description": "Especifica se a largura do SearchInput deve ser fluida.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "enableAutocomplete",
- "description": "Habilita autocomplete do browser.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- }
- ],
- "sourceFiles": [
- "src/components/SearchInput.vue"
- ]
- },
- "CdsSecondaryNavigation": {
- "name": "CdsSecondaryNavigation",
- "exportName": "default",
- "displayName": "SecondaryNavigation",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "light",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "activeItem",
- "type": {
- "name": "object"
- },
- "defaultValue": {
- "func": true,
- "value": "() => {}"
- }
- },
- {
- "name": "items",
- "type": {
- "name": "array"
- },
- "defaultValue": {
- "func": false,
- "value": "[]"
- }
- }
- ],
- "events": [
- {
- "name": "item-click"
- }
- ],
- "sourceFiles": [
- "src/components/SecondaryNavigation.vue"
- ]
- },
- "CdsSegmentedControl": {
- "displayName": "CdsSegmentedControl",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "segments",
- "type": {
- "name": "array"
- },
- "defaultValue": {
- "func": false,
- "value": "[]"
- }
- },
- {
- "name": "withIcon",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "segmentsTooltipText",
- "type": {
- "name": "array"
- },
- "defaultValue": {
- "func": false,
- "value": "[]"
- }
- }
- ],
- "events": [
- {
- "name": "click",
- "type": {
- "names": [
- "undefined"
- ]
- },
- "properties": [
- {
- "type": {
- "names": [
- "undefined"
- ]
- },
- "name": ""
- }
- ]
- }
- ],
- "sourceFiles": [
- "src/components/SegmentedControl.vue"
- ]
- },
- "CdsSelect": {
- "name": "CdsSelect",
- "exportName": "default",
- "displayName": "Select",
- "description": "",
- "tags": {},
- "expose": [
- {
- "name": "componentRef"
- },
- {
- "name": "isFocused"
- },
- {
- "name": "focus"
- },
- {
- "name": "blur"
- },
- {
- "name": "clear"
- },
- {
- "name": "select"
- }
- ],
- "props": [
- {
- "name": "label",
- "description": "Especifica o título do select.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Label'"
- }
- },
- {
- "name": "placeholder",
- "description": "Indica o texto que instrui o usuário a como interagir com o select.",
- "type": {
- "name": "string"
- },
- "required": false,
- "defaultValue": {
- "func": false,
- "value": "'Selecione...'"
- }
- },
- {
- "name": "options",
- "description": "Array de objetos que especifica a lista de opções do select. Os valores\na serem mostrado como opções do select devem estar atribuídos a chave\n`value` do objeto.",
- "type": {
- "name": "array"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "[]"
- }
- },
- {
- "name": "state",
- "description": "Especifica o estado do Select. As opções são 'default', 'valid', 'loading' e 'invalid'.",
- "tags": {},
- "values": [
- "default",
- "valid",
- "loading",
- "invalid"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'default'"
- }
- },
- {
- "name": "required",
- "description": "Controla a exibição do asterísco indicativo de campo obrigatório.",
- "type": {
- "name": "boolean"
- },
- "required": false,
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "errorMessage",
- "description": "Especifica a mensagem de erro, que será exibida caso o estado seja inválido",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Valor inválido'"
- }
- },
- {
- "name": "searchable",
- "description": "Indica se vai ser possível fazer buscas no select.",
- "type": {
- "name": "boolean"
- },
- "required": false,
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "width",
- "tags": {
- "deprecated": [
- {
- "description": "Define a largura do Select. As opções são 'thin', 'default' e 'wide'.",
- "title": "deprecated"
- }
- ]
- },
- "type": {
- "name": "string"
- },
- "required": false,
- "defaultValue": {
- "func": false,
- "value": "''"
- }
- },
- {
- "name": "fluid",
- "description": "Especifica se a largura do select deve ser fluida.",
- "type": {
- "name": "boolean"
- },
- "required": false,
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "disabled",
- "description": "Especifica o status de interação do select.",
- "type": {
- "name": "boolean"
- },
- "required": false,
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "tooltip",
- "description": "Define exibição e texto do tooltip do select",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "tooltipIcon",
- "description": "Especifica ícone do tooltip do Select.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'info-outline'"
- }
- },
- {
- "name": "optionsField",
- "description": "Indica o nome da da chave do objeto a ser considerada na renderização\ndas opções do select.",
- "type": {
- "name": "string"
- },
- "required": false,
- "defaultValue": {
- "func": false,
- "value": "'value'"
- }
- },
- {
- "name": "returnValue",
- "description": "Quando true, passa a retornar o optionsField no modelValue fora do objeto\ndas opções do select.",
- "type": {
- "name": "boolean"
- },
- "required": false,
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "linkText",
- "tags": {
- "deprecated": [
- {
- "description": "Essa prop vai ser substituída pela `supportLink` na v4. Define texto do link do input (localizado à direita da label).",
- "title": "deprecated"
- }
- ]
- },
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "linkUrl",
- "tags": {
- "deprecated": [
- {
- "description": "Essa prop vai ser substituída pela `supportLinkUrl` na v4. Define a url a ser acessada no clique do link (no caso do link ser exibido).",
- "title": "deprecated"
- }
- ]
- },
- "type": {
- "name": "string|null"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "supportLink",
- "description": "Controla a exibição e o conteúdo do link de suporte exibido ao lado da label.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "supportingText",
- "description": "Especifica mensagem de auxílio.",
- "type": {
- "name": "string|array"
- },
- "defaultValue": {
- "func": false,
- "value": "''"
- }
- },
- {
- "name": "supportLinkUrl",
- "description": "Define a url a ser acessada no clique do link de suporte.",
- "type": {
- "name": "string|null"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "mobile",
- "tags": {
- "deprecated": [
- {
- "description": "Essa prop vai ser substituída pela prop `floatingLabel` na v4. Define o tipo do input, se true será um input adaptado para o mobile",
- "title": "deprecated"
- }
- ]
- },
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "floatingLabel",
- "description": "Define o tipo do input, se true será um input adaptado para o mobile",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "addable",
- "description": "Indica se vai ser possível adicionar novas opções ao Select. Só tem efeito se a prop `searchable` for `true`.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- }
- ],
- "slots": [
- {
- "name": "option",
- "scoped": true,
- "description": "Slot utilizado para personalizar a lista de opções do select. Os dados do scoped slot podem ser acessados como: ```slot-scope={ 'option', 'index', 'value' }```",
- "bindings": [
- {
- "name": "index",
- "title": "binding"
- },
- {
- "name": "option",
- "title": "binding"
- },
- {
- "name": "value",
- "title": "binding"
- }
- ]
- }
- ],
- "sourceFiles": [
- "src/components/Select.vue"
- ]
- },
- "CdsSideBar": {
- "name": "CdsSideBar",
- "exportName": "default",
- "displayName": "SideBar",
- "description": "",
- "tags": {},
- "expose": [
- {
- "name": "isCollapsed"
- }
- ],
- "props": [
- {
- "name": "variant",
- "description": "A variante de cor. São 10 variantes implementadas: 'green', 'teal',\n'blue', 'indigo', 'violet', 'pink', 'red', 'orange','amber' e 'white'.\nA variante só terá efeito quando a SideBar estiver no modo light.",
- "tags": {},
- "values": [
- "green",
- "teal",
- "blue",
- "indigo",
- "violet",
- "pink",
- "red",
- "orange",
- "amber",
- "dark"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'green'"
- }
- },
- {
- "name": "items",
- "description": "Define a lista dos itens do SideBar a serem\nmostrados. Os itens da lista devem ser\nobjetos com path ou route, e com uma label",
- "type": {
- "name": "array"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "[]"
- }
- },
- {
- "name": "activeItem",
- "description": "O item ativo da SideBar",
- "type": {
- "name": "object"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "{}"
- }
- },
- {
- "name": "showLogout",
- "description": "Controla exibição do botão \"sair\" no footer da sidebar",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "true"
- }
- },
- {
- "name": "showProfileMenu",
- "description": "Controla exibição do menu/dropdown ao clicar nas informações de perfil",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "profileMenuItems",
- "description": "Controla os itens do menu/dropdown exibidos ao clicar nas informações de perfil",
- "type": {
- "name": "array"
- },
- "defaultValue": {
- "func": false,
- "value": "[]"
- }
- },
- {
- "name": "userName",
- "description": "Nome do usuário logado. Essa informação é colocada ao lado do Avatar",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "''"
- }
- },
- {
- "name": "userRole",
- "description": "Perfil do usuário logado. Essa informação é colocada ao lado do Avatar",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "''"
- }
- },
- {
- "name": "userPicture",
- "description": "Imagem do usuário logado. Informação é usada para montar o Avatar",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "collapsible",
- "description": "Permite que a sidebar seja colapsada em uma versão mínima",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "collapsibleState",
- "description": "Controla o estado da sidebar, se aberta ou colapsada.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "logoImage",
- "description": "Imagem do logo que será renderizada",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "light",
- "description": "Ativa o modo light da sidebar",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "searchButton",
- "description": "Ativa o modo light da sidebar",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- }
- ],
- "events": [
- {
- "name": "search-button-click"
- },
- {
- "name": "logout"
- },
- {
- "name": "sidebar-click"
- },
- {
- "name": "collapse-click"
- },
- {
- "name": "profile-menu-option-click"
- },
- {
- "name": "logo-click"
- }
- ],
- "slots": [
- {
- "name": "logo"
- }
- ],
- "sourceFiles": [
- "src/components/SideBar.vue"
- ]
- },
- "CdsSideSheet": {
- "displayName": "CdsSideSheet",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "title",
- "description": "Define o título do SideSheet.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "modelValue",
- "description": "Prop utilizada como v-model. Controla a visilidade do SideSheet.",
- "type": {
- "name": "boolean"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "withOverlay",
- "description": "Indica se vai ser usado overlay junto ao SideSheet.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "size",
- "description": "Especifica o tamanho do SideSheet. São 4 tamanhos implementados: 'sm', 'md', 'lg', 'xl'.",
- "tags": {},
- "values": [
- "sm",
- "md",
- "lg",
- "xl"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'md'"
- }
- },
- {
- "name": "noCloseOnBackdrop",
- "description": "Define se o SideSheet vai ser fechado com o click no backdrop.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "noCloseOnEsc",
- "description": "Define se o SideSheet vai ser fechado quando o usuário pressionar 'ESC'.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "actionButtonVariant",
- "description": "Define a variante do botão de ação do SideSheet (segue as variantes do componente de botão do Cuida)",
- "tags": {},
- "values": [
- "green",
- "teal",
- "blue",
- "indigo",
- "violet",
- "pink",
- "red",
- "orange",
- "amber",
- "dark"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'green'"
- }
- },
- {
- "name": "noFooter",
- "description": "Controla a exibição do rodapé (footer) do SideSheet.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "noCancelButton",
- "description": "Controla a exibição do botão de cancelar do SideSheet.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "disableOkButton",
- "description": "Define o estado do botão de ação do SideSheet.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "disableCancelButton",
- "description": "Define o estado do botão de cancelar do SideSheet.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "okButtonText",
- "description": "Define texto do botão de ação do SideSheet",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "cancelButtonText",
- "description": "Define texto do botão de cancelar do SideSheet",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "blockOkButton",
- "description": "Altera o tipo de botão de confirmação para block",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "noCloseOkButton",
- "description": "Controla a ação de fechar o modal ao clicar no botão de ação.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "noCloseCancelButton",
- "description": "Controla a ação de fechar o modal ao clicar no botão de cancelar.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- }
- ],
- "events": [
- {
- "name": "update:modelValue",
- "description": "Evento utilizado para implementar o v-model.",
- "type": {
- "names": [
- "Event"
- ]
- }
- },
- {
- "name": "cancel",
- "description": "Evento que indica se o botão de cancelar do SideSheet foi clicado.",
- "type": {
- "names": [
- "Event"
- ]
- }
- },
- {
- "name": "close",
- "description": "Evento que indica se a SideBar foi fechada.",
- "type": {
- "names": [
- "Event"
- ]
- }
- },
- {
- "name": "ok",
- "description": "Evento que indica se o botão de ação do SideSheet foi clicado.",
- "type": {
- "names": [
- "Event"
- ]
- }
- }
- ],
- "slots": [
- {
- "name": "header",
- "description": "Slot usado para utilização de header customizado."
- },
- {
- "name": "default",
- "description": "Slot usado para mostrar o conteúdo dentro do componente."
- },
- {
- "name": "footer",
- "description": "Slot usado para inserção de footer customizado."
- }
- ],
- "sourceFiles": [
- "src/components/SideSheet.vue"
- ]
- },
- "CdsSkeleton": {
- "displayName": "CdsSkeleton",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "width",
- "description": "Largura do skeleton",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'20'"
- }
- },
- {
- "name": "height",
- "description": "Altura do skeleton",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'16'"
- }
- },
- {
- "name": "fluid",
- "description": "Ajusta de acordo com o componente pai. Não se aplica ao shape 'circle'",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "shape",
- "description": "Indica o shape do elemento. São duas opções: circle, square",
- "tags": {},
- "values": [
- "circle",
- "square"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'square'"
- }
- }
- ],
- "sourceFiles": [
- "src/components/Skeleton.vue"
- ]
- },
- "CdsSkeletonText": {
- "displayName": "CdsSkeletonText",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "width",
- "type": {
- "name": "string"
- },
- "required": false
- },
- {
- "name": "height",
- "type": {
- "name": "string"
- },
- "required": false,
- "defaultValue": {
- "func": false,
- "value": "'16'"
- }
- }
- ],
- "sourceFiles": [
- "src/components/SkeletonText.vue"
- ]
- },
- "CdsSlider": {
- "displayName": "CdsSlider",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "min",
- "description": "O valor mínimo do slider.",
- "type": {
- "name": "number"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "0"
- }
- },
- {
- "name": "max",
- "description": "O valor máximo do slider.",
- "type": {
- "name": "number"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "100"
- }
- },
- {
- "name": "modelValue",
- "description": "Prop utilizada como v-model. Retorna as posições selecionadas no slider.",
- "type": {
- "name": "array"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "[0, 100]"
- }
- },
- {
- "name": "variant",
- "description": "A variante de cor. São 10 variantes implementadas: 'green', 'teal',\n'blue', 'indigo', 'violet', 'pink', 'red', 'orange','amber' e 'white'.",
- "tags": {},
- "values": [
- "green",
- "teal",
- "blue",
- "indigo",
- "violet",
- "pink",
- "red",
- "orange",
- "amber",
- "dark"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'green'"
- }
- }
- ],
- "events": [
- {
- "name": "update:modelValue",
- "description": "Evento utilizado para implementar o v-model.",
- "type": {
- "names": [
- "Event"
- ]
- }
- }
- ],
- "slots": [
- {
- "name": "tooltip",
- "scoped": true,
- "description": "Scoped slot para renderização customizada dos tooltips. A propriedade 'tooltip', que pode ser acessada através do slot, contém pos (posição do componente em %), index (o índice do slider), value (o valor do slider), focus (se o slider está no estado de focus ou não), disabled (se o slider está disabilitado ou não).",
- "bindings": [
- {
- "name": "tooltip",
- "title": "binding"
- }
- ]
- }
- ],
- "sourceFiles": [
- "src/components/Slider.vue"
- ]
- },
- "CdsSliderNext": {
- "exportName": "default",
- "displayName": "SliderNext",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "min",
- "type": {
- "name": "number"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "0"
- }
- },
- {
- "name": "max",
- "type": {
- "name": "number"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "100"
- }
- },
- {
- "name": "modelValue",
- "type": {
- "name": "array|number"
- },
- "required": true,
- "defaultValue": {
- "func": true,
- "value": "() => [0, 100]"
- }
- },
- {
- "name": "variant",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'green'"
- }
- },
- {
- "name": "step",
- "type": {
- "name": "number"
- },
- "defaultValue": {
- "func": false,
- "value": "1"
- }
- },
- {
- "name": "withText",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- }
- ],
- "events": [
- {
- "name": "update:modelValue"
- }
- ],
- "slots": [
- {
- "name": "tooltip",
- "scoped": true,
- "bindings": [
- {
- "name": "tooltip",
- "title": "binding"
- }
- ]
- }
- ],
- "sourceFiles": [
- "src/components/SliderNext.vue"
- ]
- },
- "CdsSpacer": {
- "displayName": "CdsSpacer",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "padding",
- "tags": {
- "min": [
- {
- "description": "0",
- "title": "min"
- }
- ],
- "max": [
- {
- "description": "12",
- "title": "max"
- }
- ]
- },
- "type": {
- "name": "number|string"
- },
- "defaultValue": {
- "func": false,
- "value": "0"
- },
- "min": 0,
- "max": 12
- },
- {
- "name": "paddingTop",
- "tags": {
- "min": [
- {
- "description": "0",
- "title": "min"
- }
- ],
- "max": [
- {
- "description": "12",
- "title": "max"
- }
- ]
- },
- "type": {
- "name": "number|string"
- },
- "defaultValue": {
- "func": false,
- "value": "0"
- },
- "min": 0,
- "max": 12
- },
- {
- "name": "paddingRight",
- "tags": {
- "min": [
- {
- "description": "0",
- "title": "min"
- }
- ],
- "max": [
- {
- "description": "12",
- "title": "max"
- }
- ]
- },
- "type": {
- "name": "number|string"
- },
- "defaultValue": {
- "func": false,
- "value": "0"
- },
- "min": 0,
- "max": 12
- },
- {
- "name": "paddingBottom",
- "tags": {
- "min": [
- {
- "description": "0",
- "title": "min"
- }
- ],
- "max": [
- {
- "description": "12",
- "title": "max"
- }
- ]
- },
- "type": {
- "name": "number|string"
- },
- "defaultValue": {
- "func": false,
- "value": "0"
- },
- "min": 0,
- "max": 12
- },
- {
- "name": "paddingLeft",
- "tags": {
- "min": [
- {
- "description": "0",
- "title": "min"
- }
- ],
- "max": [
- {
- "description": "12",
- "title": "max"
- }
- ]
- },
- "type": {
- "name": "number|string"
- },
- "defaultValue": {
- "func": false,
- "value": "0"
- },
- "min": 0,
- "max": 12
- },
- {
- "name": "margin",
- "tags": {
- "min": [
- {
- "description": "0",
- "title": "min"
- }
- ],
- "max": [
- {
- "description": "12",
- "title": "max"
- }
- ]
- },
- "type": {
- "name": "number|string"
- },
- "defaultValue": {
- "func": false,
- "value": "0"
- },
- "min": 0,
- "max": 12
- },
- {
- "name": "marginTop",
- "tags": {
- "min": [
- {
- "description": "0",
- "title": "min"
- }
- ],
- "max": [
- {
- "description": "12",
- "title": "max"
- }
- ]
- },
- "type": {
- "name": "number|string"
- },
- "defaultValue": {
- "func": false,
- "value": "0"
- },
- "min": 0,
- "max": 12
- },
- {
- "name": "marginRight",
- "tags": {
- "min": [
- {
- "description": "0",
- "title": "min"
- }
- ],
- "max": [
- {
- "description": "12",
- "title": "max"
- }
- ]
- },
- "type": {
- "name": "number|string"
- },
- "defaultValue": {
- "func": false,
- "value": "0"
- },
- "min": 0,
- "max": 12
- },
- {
- "name": "marginBottom",
- "tags": {
- "min": [
- {
- "description": "0",
- "title": "min"
- }
- ],
- "max": [
- {
- "description": "12",
- "title": "max"
- }
- ]
- },
- "type": {
- "name": "number|string"
- },
- "defaultValue": {
- "func": false,
- "value": "0"
- },
- "min": 0,
- "max": 12
- },
- {
- "name": "marginLeft",
- "tags": {
- "min": [
- {
- "description": "0",
- "title": "min"
- }
- ],
- "max": [
- {
- "description": "12",
- "title": "max"
- }
- ]
- },
- "type": {
- "name": "number|string"
- },
- "defaultValue": {
- "func": false,
- "value": "0"
- },
- "min": 0,
- "max": 12
- }
- ],
- "slots": [
- {
- "name": "default",
- "description": "Slot default."
- }
- ],
- "sourceFiles": [
- "src/components/Spacer.vue"
- ]
- },
- "CdsSpinner": {
- "displayName": "CdsSpinner",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "size",
- "description": "Propriedade referente ao tamanho do componente",
- "tags": {},
- "values": [
- "sm",
- "md",
- "lg"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'md'"
- }
- },
- {
- "name": "variant",
- "description": "A variante de cor. São 10 variantes:",
- "tags": {},
- "values": [
- "green",
- "teal",
- "blue",
- "indigo",
- "violet",
- "pink",
- "red",
- "orange",
- "amber",
- "dark"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'green'"
- }
- },
- {
- "name": "delay",
- "description": "Delay para exibição do spinner, em ms",
- "type": {
- "name": "number"
- },
- "defaultValue": {
- "func": false,
- "value": "0"
- }
- }
- ],
- "sourceFiles": [
- "src/components/Spinner.vue"
- ]
- },
- "CdsStackedBarChart": {
- "displayName": "CdsStackedBarChart",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "data",
- "description": "Define o conjunto de dados a serem mostrados no gráfico.\nO objeto deve conter o parâmetro `name` (para identificar o conjunto de dados)\ne `datasets`, array de objetos que apresentará `label` (indicar o rótulo do dado) e\n`data` (array com os valores númericos).",
- "type": {
- "name": "object"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "{\n datasets: [\n {\n label: '',\n data: [],\n }\n ]\n}"
- }
- },
- {
- "name": "variant",
- "description": "Personaliza a paleta de cores do gráfico. São 11 variantes implementadas:\n`green`, `teal`, `turquoise`, `blue`, `indigo`, `violet`, `pink`, `red`, `orange`, `amber`, `gray`, `dark`.",
- "tags": {},
- "values": [
- "green",
- "teal",
- "blue",
- "indigo",
- "violet",
- "pink",
- "red",
- "orange",
- "amber",
- "dark"
- ],
- "type": {
- "name": "string"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "'green'"
- }
- },
- {
- "name": "theme",
- "description": "Define o tema do gráfico.",
- "tags": {},
- "values": [
- "blue",
- "indigo"
- ],
- "type": {
- "name": "string"
- },
- "required": false,
- "defaultValue": {
- "func": false,
- "value": "''"
- }
- },
- {
- "name": "labels",
- "description": "Defina as labels do gráfico",
- "type": {
- "name": "array"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "[]"
- }
- },
- {
- "name": "barWidth",
- "description": "Configura a porcentagem ocupada pela barra do gráfico. (0.1-1).",
- "type": {
- "name": "number"
- },
- "defaultValue": {
- "func": false,
- "value": "1"
- }
- }
- ],
- "sourceFiles": [
- "src/components/StackedBarChart.vue"
- ]
- },
- "CdsStepper": {
- "displayName": "CdsStepper",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "steps",
- "description": "Um array com objetos com as propriedades 'label', 'inProcessing',\n'error' e 'completed'. A 'label' é o texto que descreve o passo,\ne as demais props são booleanas e representam o status do passo.",
- "type": {
- "name": "array"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "[]"
- }
- },
- {
- "name": "vertical",
- "description": "Define direção do stepper como vertical, por padrão a direção é horizontal (vertical = false).",
- "type": {
- "name": "boolean"
- },
- "required": false,
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "value",
- "description": "Controla qual step está ativo variando de 1 até o número de steps.",
- "type": {
- "name": "number"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "1"
- }
- },
- {
- "name": "disableOnClick",
- "description": "Desabilita navegação pelos steps quando setado como `true`.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- }
- ],
- "events": [
- {
- "name": "input",
- "type": {
- "names": [
- "undefined"
- ]
- }
- }
- ],
- "sourceFiles": [
- "src/components/Stepper.vue"
- ]
- },
- "CdsStepperInput": {
- "name": "CdsStepperInput",
- "exportName": "default",
- "displayName": "StepperInput",
- "description": "",
- "tags": {},
- "expose": [
- {
- "name": "componentRef"
- }
- ],
- "props": [
- {
- "name": "min",
- "description": "Especifica o menor valor que o StepperInput deve aceitar.",
- "type": {
- "name": "number|string"
- },
- "defaultValue": {
- "func": false,
- "value": "Number.MIN_SAFE_INTEGER"
- }
- },
- {
- "name": "max",
- "description": "Especifica o menor valor que o StepperInput deve aceitar.",
- "type": {
- "name": "number|string"
- },
- "defaultValue": {
- "func": false,
- "value": "Number.MAX_SAFE_INTEGER"
- }
- },
- {
- "name": "step",
- "description": "Indica passo usado no incremento e decremento do valor do StepperInput.",
- "type": {
- "name": "number"
- },
- "defaultValue": {
- "func": false,
- "value": "1"
- }
- },
- {
- "name": "label",
- "description": "A label do StepperInput.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Label'"
- }
- },
- {
- "name": "required",
- "description": "Exibe asterisco indicativo de campo obrigatório.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "width",
- "tags": {
- "deprecated": [
- {
- "description": "Define a largura do StepperInput. As opções são 'thin', 'default', 'wide' e 'fluid'.",
- "title": "deprecated"
- }
- ]
- },
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'default'"
- },
- "values": [
- "thin",
- "default",
- "wide",
- "fluid"
- ]
- },
- {
- "name": "fluid",
- "description": "Indica se o componente deverá ocupar 100% da largura disponível.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "disabled",
- "description": "Desabilita o StepperInput.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "state",
- "description": "Especifica o estado do StepperInput. As opções são 'default', 'valid' e 'invalid'.",
- "tags": {},
- "values": [
- "default",
- "valid",
- "invalid"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'default'"
- }
- },
- {
- "name": "errorMessage",
- "description": "Especifica a mensagem de erro, que será exibida caso o estado seja inválido",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Valor inválido'"
- }
- },
- {
- "name": "mobile",
- "description": "Indica se o componente deve ter sua apresentação ajustada a aplicações móveis.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "suffix",
- "description": "Quando ativo adiciona sufixo que indica ao usuário que ele está manipulando dados com caracterísitcas específicas, como porcentagem, milhares, pesos, etc.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "''"
- }
- }
- ],
- "events": [
- {
- "name": "invalid-number",
- "description": "Evento emitido quando o valor do modelValue está fora dos limites definidos pelas props `min` e `max`.",
- "type": {
- "names": [
- "Event"
- ]
- }
- },
- {
- "name": "step-out-of-bounds",
- "description": "Evento emitido quando o valor da prop `Step` está fora dos limites definidos pelas props `min` e `max`.",
- "type": {
- "names": [
- "Event"
- ]
- }
- }
- ],
- "slots": [
- {
- "name": "label"
- },
- {
- "name": "suffix",
- "description": "Slot e prop de mesmo nome utilizados para adicionar sufixo ao stepperInput. O valor padrão é `%`. O valor passado por slot tem maior precedência que o valor enviado para a prop."
- }
- ],
- "sourceFiles": [
- "src/components/StepperInput.vue"
- ]
- },
- "CdsSwitch": {
- "name": "CdsSwitch",
- "exportName": "default",
- "displayName": "Switch",
- "description": "",
- "tags": {},
- "expose": [
- {
- "name": "componentRef"
- }
- ],
- "props": [
- {
- "name": "label",
- "description": "Especifica a label do Switch.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "''"
- }
- },
- {
- "name": "small",
- "description": "Torna o Switch pequeno.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "variant",
- "description": "A variante de cor. São 10 variantes:",
- "tags": {},
- "values": [
- "green",
- "teal",
- "blue",
- "indigo",
- "violet",
- "pink",
- "red",
- "orange",
- "amber",
- "dark"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'green'"
- }
- },
- {
- "name": "large",
- "description": "Torna o Switch grande.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "disabled",
- "description": "Controla a disponibilidade do Switch",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "focused",
- "description": "Controla o focus do Switch",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "tooltip",
- "description": "Define exibição e texto do tooltip do input",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "tooltipIcon",
- "description": "Especifica ícone do tooltip do TextInput.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'info-outline'"
- }
- },
- {
- "name": "supportingText",
- "description": "Especifica mensagem de auxílio.",
- "type": {
- "name": "string|array"
- },
- "defaultValue": {
- "func": false,
- "value": "''"
- }
- }
- ],
- "sourceFiles": [
- "src/components/Switch.vue"
- ]
- },
- "CdsTable": {
- "displayName": "CdsTable",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "modelValue",
- "description": "Guarda os itens selecionados da tabela.",
- "type": {
- "name": "array"
- },
- "defaultValue": {
- "func": false,
- "value": "[]"
- }
- },
- {
- "name": "items",
- "description": "Array contendo os itens a serem exibidos na tabela. Os itens devem estar no seguinte formato:\n\n\n``{ 'exampleKey1': 'exampleValue1', 'exampleKey2': 'exampleValue2' }``\n\nCom a 'key' sendo a mesma do campo da tabela onde o valor deve ser exibido",
- "type": {
- "name": "array|object"
- },
- "required": true,
- "defaultValue": {
- "func": true,
- "value": "() => ([])"
- }
- },
- {
- "name": "fields",
- "description": "Array contendo os campos a serem exibidos no cabeçalho da tabela. Os campos devem estar no seguinte formato:\n\n``{ key: 'exampleKey1', label: 'exampleLabel1' }``\n\nOu em formato de string simples (``'fieldkey'``). Neste caso, o valor exibido no cabeçalho da tabela será a string convertida para [Start Case](https://en.wikipedia.org/wiki/Letter_case#Stylistic_or_specialised_usage).\n\nCaso essa propriedade não seja enviada, o cabeçalho da tabela será montado de acordo com as `keys` do primeiro objeto do array enviado através da prop `items`.",
- "type": {
- "name": "array"
- },
- "defaultValue": {
- "func": false,
- "value": "[]"
- }
- },
- {
- "name": "hover",
- "description": "Boolean, informa se o estilo será alterado no hover da linha.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "allowSelection",
- "description": "Boolean, informa se devem ser exibidas checkboxes para selecionar linhas.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "selectionVariant",
- "description": "A variante das checkboxes de seleção. São 10 variantes: 'teal', 'green', 'blue',\n'indigo', 'violet', 'pink', 'red', 'orange', 'amber' e 'dark'.",
- "tags": {},
- "values": [
- "green",
- "teal",
- "blue",
- "indigo",
- "violet",
- "pink",
- "red",
- "orange",
- "amber",
- "dark"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'green'"
- }
- },
- {
- "name": "sortable",
- "description": "Boolean, informa se a UI de ordenação deve ser exibida nos itens\ndo header",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "sortBy",
- "description": "Específica a propriedade (chave da coluna) usada para ordenação.\nPor padrão os itens são exibidos na sequência definida pelo array `items`",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "fixedHeader",
- "description": "Especifica se o cabeçalho da tabela deve ser fixo ou não.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "sortDesc",
- "description": "Boolean, informa que a ordenação deve ser descendente, por padrão\na ordenação é ascendente (`sortDesc: false`).",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "noWrap",
- "description": "Boolean, quando true, os textos do header e valores da tabela não terão quebra de linha.\nPor padrão, os textos do header e valores da tabela terão quebra de linha quando atingirem o tamanho máximo do container.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "transparent",
- "description": "Remove a cor de fundo da tabela",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- }
- ],
- "events": [
- {
- "name": "update:modelValue",
- "description": "Evento que indica que o valor do Select foi alterado",
- "type": {
- "names": [
- "Event"
- ]
- }
- }
- ],
- "slots": [
- {
- "name": "header-item",
- "scoped": true,
- "description": "Slot usado para renderizar itens personalizados para o cabeçalho da tabela. Dados do item referente à coluna podem ser acessados através da propriedade `data`. Os dados do escopo do slot podem ser acessados no formato a seguir: slot-scope={ data }",
- "bindings": [
- {
- "name": "data",
- "title": "binding"
- }
- ]
- },
- {
- "name": "table-item",
- "scoped": true,
- "description": "Slot usado para renderizar itens personalizados para o conteúdo da tabela. Dados do item referente à linha podem ser acessados através da propriedade `data`, enquanto a key referente à coluna pode ser acessada através da propriedade `field`. Os dados do escopo do slot podem ser acessados no formato a seguir: slot-scope={ `data`, `field`, `rowIndex` e `colIndex` }",
- "bindings": [
- {
- "name": "data",
- "title": "binding"
- },
- {
- "name": "field",
- "title": "binding"
- },
- {
- "name": "row-index",
- "title": "binding"
- },
- {
- "name": "col-index",
- "title": "binding"
- }
- ]
- }
- ],
- "sourceFiles": [
- "src/components/Table.vue"
- ]
- },
- "CdsTabs": {
- "displayName": "CdsTabs",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "tabs",
- "description": "Define a lista dos itens da InnerTabs a serem mostrados.\nOs itens da lista devem ser objetos com `name` (para identificar o slot)\ne `title` (título da aba)",
- "type": {
- "name": "array"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "[]"
- }
- },
- {
- "name": "activeTab",
- "description": "O item ativo dentre as abas",
- "type": {
- "name": "object"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "{}"
- }
- },
- {
- "name": "variant",
- "description": "Cor da borda que indica o item ativo.\nExistem algumas cores predefinidas seguindo os guias do Cuida, são elas:\n`turquoise`, `green`, `blue`, `violet`, `pink`, `red`, `orange`, `amber` e `gray`.",
- "tags": {},
- "values": [
- "green",
- "teal",
- "blue",
- "indigo",
- "violet",
- "pink",
- "red",
- "orange",
- "amber",
- "dark"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'green'"
- }
- },
- {
- "name": "showAddAction",
- "description": "Define se o botão de adicionar deve ser exibido ou não, por padrão ele não será exibido",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- }
- ],
- "events": [
- {
- "name": "right-click",
- "description": "Evento emitido quando uma das abas é clicada com o botão direito",
- "type": {
- "names": [
- "Event"
- ]
- }
- },
- {
- "name": "tabs-change",
- "description": "Evento emitido quando a aba ativa é alterada",
- "type": {
- "names": [
- "Event"
- ]
- }
- },
- {
- "name": "add-action",
- "description": "Evento emitido ao clicar no botão de adicionar",
- "type": {
- "names": [
- "Event"
- ]
- }
- }
- ],
- "slots": [
- {
- "name": "getSlotName(tab)",
- "scoped": true,
- "description": "Slot para renderização customizada do conteúdo das abas",
- "bindings": [
- {
- "name": "name",
- "title": "binding"
- }
- ]
- }
- ],
- "sourceFiles": [
- "src/components/Tabs.vue"
- ]
- },
- "CdsText": {
- "name": "CdsText",
- "exportName": "default",
- "displayName": "Text",
- "description": "",
- "tags": {},
- "expose": [
- {
- "name": "componentRef"
- }
- ],
- "props": [
- {
- "name": "as",
- "description": "A tag HTML que o componente deve renderizar.",
- "tags": {},
- "values": [
- "h1",
- "h2",
- "h3",
- "h4",
- "h5",
- "h6",
- "heading-1",
- "heading-2",
- "heading-3",
- "subheading-1",
- "subheading-2",
- "subheading-3",
- "p",
- "q",
- "span",
- "body-1",
- "body-2",
- "caption",
- "overline",
- "strong",
- "em",
- "del",
- "small",
- "legend"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'span'"
- }
- },
- {
- "name": "color",
- "description": "Define a cor do texto. Aceita os tokes de cor do design system da shade 'neutrals'. Para cores fora da paleta neutra, utilize uma classe personalizada.",
- "tags": {},
- "values": [
- "n-0",
- "n-10",
- "n-20",
- "n-30",
- "n-40",
- "n-50",
- "n-100",
- "n-200",
- "n-300",
- "n-400",
- "n-500",
- "n-600",
- "n-700",
- "n-800",
- "n-900"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'n-800'"
- }
- },
- {
- "name": "fontWeight",
- "description": "Define o peso da fonte.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'regular'"
- }
- },
- {
- "name": "textAlign",
- "description": "Define o alinhamento do texto.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'start'"
- }
- },
- {
- "name": "noMargin",
- "description": "Remove as margens padrão de tags HTML como `p`, `h1`, `h2`, `h3`, etc.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- }
- ],
- "slots": [
- {
- "name": "default"
- }
- ],
- "sourceFiles": [
- "src/components/Text.vue"
- ]
- },
- "CdsTextArea": {
- "name": "CdsTextArea",
- "exportName": "default",
- "displayName": "TextArea",
- "description": "",
- "tags": {},
- "expose": [
- {
- "name": "componentRef"
- },
- {
- "name": "isFocused"
- },
- {
- "name": "focus"
- },
- {
- "name": "blur"
- },
- {
- "name": "clear"
- },
- {
- "name": "select"
- }
- ],
- "props": [
- {
- "name": "label",
- "description": "Especifica a label do textarea.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Label'"
- }
- },
- {
- "name": "required",
- "description": "Exibe asterisco que indica campo obrigatório (Obs: Não faz a validação)",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "placeholder",
- "description": "Especifica o placeholder do textarea.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Digite aqui a descrição'"
- }
- },
- {
- "name": "disabled",
- "description": "Desabilita o input do textarea.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "state",
- "description": "Especifica o estado do textarea. As opções são 'default', 'valid', 'invalid' e 'loading'.",
- "tags": {},
- "values": [
- "default",
- "valid",
- "loading",
- "invalid"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'default'"
- }
- },
- {
- "name": "errorMessage",
- "description": "Especifica a mensagem de erro que será exibida, caso o estado do textarea seja inválido.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Valor inválido'"
- }
- },
- {
- "name": "supportingText",
- "description": "Especifica mensagem de auxílio.",
- "type": {
- "name": "string|array"
- },
- "defaultValue": {
- "func": false,
- "value": "''"
- }
- },
- {
- "name": "supportLink",
- "description": "Controla a exibição e o conteúdo do link de suporte exibido ao lado da label.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "''"
- }
- },
- {
- "name": "supportLinkUrl",
- "description": "Define a url a ser acessada no clique do link de suporte.",
- "type": {
- "name": "string|null"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "fluid",
- "description": "Especifica se a largura do textarea deve ser fluida.",
- "type": {
- "name": "boolean"
- },
- "required": false,
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "lazy",
- "description": "Quando true, o v-model é atualizado com o evento `change` no lugar do `input`.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "tooltip",
- "description": "Define exibição e texto do tooltip do input",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "tooltipIcon",
- "description": "Especifica ícone do tooltip do TextInput.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'info-outline'"
- }
- },
- {
- "name": "floatingLabel",
- "description": "Define o tipo do input, se true será um input adaptado para o mobile",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- }
- ],
- "sourceFiles": [
- "src/components/TextArea.vue"
- ]
- },
- "CdsTextInput": {
- "name": "CdsTextInput",
- "exportName": "default",
- "displayName": "TextInput",
- "description": "",
- "tags": {},
- "expose": [
- {
- "name": "componentRef"
- },
- {
- "name": "isFocused"
- },
- {
- "name": "focus"
- },
- {
- "name": "blur"
- },
- {
- "name": "clear"
- },
- {
- "name": "select"
- }
- ],
- "props": [
- {
- "name": "label",
- "description": "Especifica a label do input.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Label'"
- }
- },
- {
- "name": "disabled",
- "description": "Desabilita o input.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "state",
- "description": "Especifica o estado do TextInput. As opções são 'default', 'valid', 'loading' e 'invalid'.",
- "tags": {},
- "values": [
- "default",
- "valid",
- "loading",
- "invalid"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'default'"
- }
- },
- {
- "name": "inputType",
- "tags": {
- "deprecated": [
- {
- "description": "Use o componente EmailInput caso precise de um campo para Emails. Especifica o tipo do TextInput. As opções são 'text' e 'email'.",
- "title": "deprecated"
- }
- ]
- },
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'text'"
- },
- "values": [
- "text",
- "email"
- ]
- },
- {
- "name": "required",
- "description": "Exibe asterisco de obrigatório (obs.: não faz a validação)",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "placeholder",
- "description": "Especifica o placeholder do input",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Digite aqui a informação'"
- }
- },
- {
- "name": "errorMessage",
- "description": "Especifica a mensagem de erro, que será exibida caso o estado seja inválido",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Valor inválido'"
- }
- },
- {
- "name": "fluid",
- "description": "Especifica se a largura do TextInput deve ser fluida.",
- "type": {
- "name": "boolean"
- },
- "required": false,
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "mask",
- "description": "Especifica a máscara a ser aplicada ao TextInput.\nExemplo: \"(##) #####-####\"",
- "type": {
- "name": "string|array"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "tooltip",
- "description": "Define exibição e texto do tooltip do input",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "tooltipIcon",
- "description": "Especifica ícone do tooltip do TextInput.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'info-outline'"
- }
- },
- {
- "name": "linkText",
- "tags": {
- "deprecated": [
- {
- "description": "Essa prop vai ser substituída pela `supportLink` na v4. Define texto do link do input (localizado à direita da label).",
- "title": "deprecated"
- }
- ]
- },
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "linkUrl",
- "tags": {
- "deprecated": [
- {
- "description": "Essa prop vai ser substituída pela `supportLinkUrl` na v4. Define a url a ser acessada no clique do link (no caso do link ser exibido).",
- "title": "deprecated"
- }
- ]
- },
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'https://cuida.framer.wiki/'"
- }
- },
- {
- "name": "supportLink",
- "description": "Controla a exibição e o conteúdo do link de suporte exibido ao lado da label.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "supportingText",
- "description": "Especifica mensagem de auxílio.",
- "type": {
- "name": "string|array"
- },
- "defaultValue": {
- "func": false,
- "value": "''"
- }
- },
- {
- "name": "supportLinkUrl",
- "description": "Define a url a ser acessada no clique do link de suporte.",
- "type": {
- "name": "string|null"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "lazy",
- "description": "Quando true, o v-model é atualizado com o evento `change` no lugar do `input`.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "mobile",
- "tags": {
- "deprecated": [
- {
- "description": "Essa prop vai ser substituída pela prop `floatingLabel` na v4. Define o tipo do input, se true será um input adaptado para o mobile",
- "title": "deprecated"
- }
- ]
- },
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "floatingLabel",
- "description": "Define o tipo do input, se true será um input adaptado para o mobile",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "disableAutocomplete",
- "description": "Desabilita autocomplete do browser.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- }
- ],
- "sourceFiles": [
- "src/components/TextInput.vue"
- ]
- },
- "CdsTile": {
- "name": "CdsTile",
- "exportName": "default",
- "displayName": "Tile",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "icon",
- "description": "Ícone a ser exibido no componente. Caso seja um ícone do próprio cuida icons, informe apenas o nome do ícone. Também é possível informar a url do ícone.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'settings-outline'"
- }
- },
- {
- "name": "title",
- "description": "Texto a ser exibido no componente.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "''"
- }
- },
- {
- "name": "size",
- "description": "Especifica o tamanho do botão. São 3 tamanhos implementados: 'sm', 'md', 'lg'.",
- "tags": {},
- "values": [
- "sm",
- "md",
- "lg"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'md'"
- }
- },
- {
- "name": "variant",
- "description": "A variante de cor. São 10 variantes:",
- "tags": {},
- "values": [
- "green",
- "teal",
- "blue",
- "indigo",
- "violet",
- "pink",
- "red",
- "orange",
- "amber",
- "dark"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'green'"
- }
- },
- {
- "name": "disabled",
- "description": "Controla o estado de desabilitação do componente.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "loading",
- "description": "Controla o estado de carregamento do componente.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- }
- ],
- "events": [
- {
- "name": "cdsClick",
- "description": "Evento que indica se a tile foi clicada.",
- "type": {
- "names": [
- "Event"
- ]
- }
- }
- ],
- "slots": [
- {
- "name": "extra",
- "description": "Slot para incluir conteúdo adicional no canto superior direito da tile."
- }
- ],
- "sourceFiles": [
- "src/components/Tile.vue"
- ]
- },
- "CdsTimeInput": {
- "displayName": "CdsTimeInput",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "modelValue",
- "description": "Prop utilizada como v-model. Define o horário exibido.\n\nModo `single`: Deve ser enviada como uma String contendo o horário.\n\nModo `range`: Deve ser enviada como um Array contendo dois horários (inicial e final).\n\nPode ser enviada como um Array vazio ou String vazia.\n\nTodos os horários devem estar no formato `HH:mm`.",
- "type": {
- "name": "string|array"
- },
- "defaultValue": {
- "func": false,
- "value": "''"
- }
- },
- {
- "name": "id",
- "description": "O id a ser utilizado pelo elemento HTML.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'time-input'"
- }
- },
- {
- "name": "label",
- "description": "A label a ser exibida acima do input.",
- "type": {
- "name": "string"
- },
- "required": true
- },
- {
- "name": "required",
- "description": "Propriedade utilizada para definir o estilo da label do componente.\nEm caso positivo, exibe um * indicando que o campo é de preenchimento obrigatório.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "disabled",
- "description": "Propriedade utilizada para definir o desabilitado do componente",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "mode",
- "description": "Propriedade utilizada para definir o modo de exibição do componente.\n\n`single`: Apenas um input de tempo;\n\n`range`: Dois inputs de tempo (início e fim).",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'single'"
- },
- "values": [
- "single",
- "range"
- ]
- },
- {
- "name": "state",
- "description": "Propriedade utilizada para indicar o estado de validação do componente.",
- "tags": {},
- "values": [
- "default",
- "valid",
- "loading",
- "invalid"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'default'"
- }
- },
- {
- "name": "errorMessage",
- "description": "Mensagem a ser exibida em caso de estado inválido.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Horário inválido'"
- }
- }
- ],
- "events": [
- {
- "name": "update:modelValue",
- "type": {
- "names": [
- "Event"
- ]
- },
- "description": "Evento indicando que o input foi preenchido.\nRetorna uma string com o horário, caso o componente esteja em modo `single`,\nou um array contendo horários inicial e final, quando em modo `range`.\n\nEm caso de o valor do campo estar inválido, o evento é emitido com valor `null`,\nleve isto em consideração em possíveis formatações.\n\nAs datas são retornadas sempre no formato `HH:mm`."
- }
- ],
- "sourceFiles": [
- "src/components/TimeInput.vue"
- ]
- },
- "CdsTimeline": {
- "displayName": "CdsTimeline",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "reverse",
- "description": "Inverte a ordem dos elementos da Timeline.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- }
- ],
- "slots": [
- {
- "name": "default",
- "description": "Conteúdo a ser colocar na Timeline. Suporta o `TimelineItem` como subcomponente."
- }
- ],
- "sourceFiles": [
- "src/components/Timeline.vue"
- ]
- },
- "CdsTimelineItem": {
- "displayName": "CdsTimelineItem",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "variant",
- "description": "A variante de cor. São 10 variantes:",
- "tags": {},
- "values": [
- "green",
- "teal",
- "blue",
- "indigo",
- "violet",
- "pink",
- "red",
- "orange",
- "amber",
- "dark"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'green'"
- }
- },
- {
- "name": "loading",
- "description": "Altera o estado do pin. Quando true torna o pin em um `CdsSpinner`.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "hollowed",
- "description": "Altera o estado do pin. Quando true deixa o pin sem preenchimento, apenas com borda.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "icon",
- "description": "Define o ícone a ser exibido no lugar do pin do TimelineItem. Caso não informado, o pin será exibido.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- }
- ],
- "slots": [
- {
- "name": "opposite",
- "description": "Slot utilizado para renderização de conteúdo no lado esquerdo do TimelineItem."
- },
- {
- "name": "title",
- "description": "Slot utilizado para renderização do título do TimelineItem."
- },
- {
- "name": "content",
- "description": "Slot utilizado para renderização do conteúdo do TimelineItem. Os elementos adicionados nesse slot ficam dispostos abaixo do título."
- }
- ],
- "sourceFiles": [
- "src/components/TimelineItem.vue"
- ]
- },
- "CdsToast": {
- "name": "CdsToast",
- "exportName": "default",
- "displayName": "Toast",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "title",
- "description": "Título do toast.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Título do toast'"
- }
- },
- {
- "name": "description",
- "description": "Texto opcional apresentado abaixo do título do toast.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Descrição do toast, exibida abaixo do título'"
- }
- },
- {
- "name": "dismissible",
- "description": "Quando true, apresenta ícone para fechar o toast.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "autoDismissible",
- "description": "Quando true, o toast fecha-se automaticamente após o tempo definido no `dismissAfter`.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "dismissAfter",
- "description": "Tempo em milisegundos para que o toast seja automaticamente fechado. O valor padrão é 4s (4000ms).",
- "type": {
- "name": "number"
- },
- "defaultValue": {
- "func": false,
- "value": "4000"
- }
- },
- {
- "name": "variant",
- "description": "Variante do toast. São 4 variantes implementadas: 'success', 'info', 'warning', 'danger'.",
- "tags": {},
- "values": [
- "success",
- "info",
- "warning",
- "danger"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'info'"
- }
- },
- {
- "name": "light",
- "description": "Especifica o tema do toast. Quando true, o toast terá o tema claro. O tema escuro é o padrão.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- }
- ],
- "events": [
- {
- "name": "dismiss"
- },
- {
- "name": "update:modelValue",
- "description": "Controla a visibilidade do componente.",
- "type": {
- "name": "unknown"
- },
- "properties": []
- }
- ],
- "sourceFiles": [
- "src/components/Toast.vue"
- ]
- },
- "CdsToastContainer": {
- "name": "CdsToastContainer",
- "exportName": "default",
- "displayName": "ToastContainer",
- "description": "",
- "tags": {},
- "sourceFiles": [
- "src/components/ToastContainer.vue"
- ]
- },
- "CdsTooltip": {
- "name": "CdsTooltip",
- "exportName": "default",
- "displayName": "Tooltip",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "position",
- "description": "O posicionamento do Tooltip. A prop aceita as opções: top, right, bottom e left.",
- "tags": {},
- "values": [
- "auto",
- "auto-start",
- "auto-end",
- "top",
- "top-start",
- "top-end",
- "right",
- "right-start",
- "right-end",
- "bottom",
- "bottom-start",
- "bottom-end",
- "left",
- "left-start",
- "left-end"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'top'"
- }
- },
- {
- "name": "text",
- "description": "Texto do Tooltip",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "null"
- }
- },
- {
- "name": "slim",
- "description": "Quando marcada como true, deixa o texto e o tamanho do tooltip menores.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "rounded",
- "description": "Define o arredondamento da borda do tooltip.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "true"
- }
- },
- {
- "name": "trigger",
- "description": "Define como o tooltip é acionado.",
- "tags": {},
- "values": [
- "hover",
- "click"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'hover'"
- }
- }
- ],
- "slots": [
- {
- "name": "default"
- }
- ],
- "sourceFiles": [
- "src/components/Tooltip.vue"
- ]
- },
- "CdsTopAppBar": {
- "name": "CdsTopAppBar",
- "exportName": "default",
- "displayName": "TopAppBar",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "title",
- "description": "Título da sessão ou da página",
- "type": {
- "name": "string"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "''"
- }
- },
- {
- "name": "logoUrl",
- "description": "URL da imagem do logo. Quando definida o título será substituído pela logo",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "''"
- }
- },
- {
- "name": "showMenuIcon",
- "description": "Habilita a exibição do botão de menu",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "showBackNavigation",
- "description": "Habilita a exibição do botão de voltar\nObs: se showMenuIcon estiver habilitado esta prop não surtirá efeito",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "defaultRoute",
- "description": "Rota default para quando a prop showBackNavigation estiver habilitada\nDeve seguir o seguinte formato: { name: 'route-name', path: 'route-path' }\nObs: não é necessário fornecer name e path, apenas um já é o suficiente",
- "type": {
- "name": "object"
- },
- "defaultValue": {
- "func": false,
- "value": "{}"
- }
- }
- ],
- "events": [
- {
- "name": "on-menu-click",
- "description": "Evento emitido quando o botão de menu é clicado\nObs: necessário habilitar a prop showMenuIcon"
- }
- ],
- "slots": [
- {
- "name": "actions",
- "description": "Slot utilizado para os botões de action do lado direito"
- }
- ],
- "sourceFiles": [
- "src/components/TopAppBar.vue"
- ]
- },
- "CdsTruncate": {
- "displayName": "CdsTruncate",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "width",
- "description": "Largura do container. Define a partir de qual largura texto será truncado.",
- "type": {
- "name": "string|number"
- },
- "defaultValue": {
- "func": false,
- "value": "'20'"
- }
- }
- ],
- "slots": [
- {
- "name": "default",
- "description": "Slot default."
- }
- ],
- "sourceFiles": [
- "src/components/Truncate.vue"
- ]
- },
- "CdsTruncateContainer": {
- "name": "CdsTruncateContainer",
- "exportName": "default",
- "displayName": "TruncateContainer",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "height",
- "description": "Altura do container.",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'250px'"
- }
- },
- {
- "name": "textAlign",
- "description": "Define o alinhamento do texto.",
- "tags": {},
- "values": [
- "start",
- "center",
- "end"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'center'"
- }
- },
- {
- "name": "variant",
- "description": "A variante da FlatButton. São 9 variantes.",
- "tags": {},
- "values": [
- "green",
- "teal",
- "turquoise",
- "blue",
- "indigo",
- "violet",
- "pink",
- "red",
- "orange",
- "amber e dark."
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'dark'"
- }
- }
- ],
- "events": [
- {
- "name": "button-click",
- "description": "Evento emitido quando o FlatButton do TruncateContainer é clicado.",
- "type": {
- "names": [
- "Event"
- ]
- }
- },
- {
- "name": "expand",
- "description": "Evento emitido o TruncateContainer é expandido.",
- "type": {
- "names": [
- "Event"
- ]
- }
- },
- {
- "name": "collapse",
- "description": "Evento emitido o TruncateContainer é colapsado.",
- "type": {
- "names": [
- "Event"
- ]
- }
- }
- ],
- "slots": [
- {
- "name": "default",
- "description": "Slot padrão utilizado para exibir o conteúdo enviado para o container"
- }
- ],
- "sourceFiles": [
- "src/components/TruncateContainer.vue"
- ]
- },
- "CdsWebcamModal": {
- "name": "CdsWebcamModal",
- "exportName": "default",
- "displayName": "WebcamModal",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "modelValue",
- "description": "Valor recebido pelo v-model",
- "type": {
- "name": "boolean"
- },
- "required": true
- },
- {
- "name": "title",
- "description": "Título do modal do componente",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Camera'"
- }
- },
- {
- "name": "feedbackText",
- "description": "Texto de feedback ao tirar uma foto",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Foto capturada'"
- }
- },
- {
- "name": "takePhotoButtonText",
- "description": "Texto do botão de tirar uma foto",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Tirar foto'"
- }
- },
- {
- "name": "takeAnotherPhotoButtonText",
- "description": "Texto do botão de tirar uma outra foto",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Tirar outra'"
- }
- },
- {
- "name": "savePhotoButtonText",
- "description": "Texto do botão de salvar uma foto",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Salvar foto'"
- }
- },
- {
- "name": "errorMessageText",
- "description": "Texto da mensagem de erro quando ocorrer um erro ao carregar a câmera",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Erro ao carregar a câmera'"
- }
- },
- {
- "name": "variant",
- "description": "Variante dos botões e do spinner",
- "tags": {},
- "values": [
- "green",
- "teal",
- "blue",
- "indigo",
- "violet",
- "pink",
- "red",
- "orange",
- "amber",
- "dark"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'green'"
- }
- }
- ],
- "events": [
- {
- "name": "update:model-value",
- "description": "Evento emitido quando o valor do modal é atualizado",
- "type": {
- "names": [
- "Event"
- ]
- }
- },
- {
- "name": "on-take-photo",
- "description": "Evento emitido quando uma foto é salva, o evento retorna um File",
- "type": {
- "names": [
- "Event"
- ]
- }
- }
- ],
- "sourceFiles": [
- "src/components/WebcamModal.vue"
- ]
- },
- "CdsWizard": {
- "displayName": "CdsWizard",
- "exportName": "default",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "steps",
- "description": "Um array com objetos com as propriedades 'title' (obrigatório), 'subtitle' e 'image'.\nO 'title' e 'subtitle' são textos que descrevem a etapa, a 'imagem' é o caminho para\na imagem do empty-state;",
- "type": {
- "name": "array"
- },
- "required": true,
- "defaultValue": {
- "func": false,
- "value": "[]"
- }
- },
- {
- "name": "activeStep",
- "description": "O índice da etapa atual (0, 1 ou 2)",
- "type": {
- "name": "number"
- },
- "defaultValue": {
- "func": false,
- "value": "0"
- }
- },
- {
- "name": "clickable",
- "description": "Ativa ou desativa o clique no passo (etapa) para ir para esta etapa",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "nextButtonText",
- "description": "O texto do botão de avançar (ação principal).",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Próximo'"
- }
- },
- {
- "name": "cancelButtonText",
- "description": "O texto do botão de voltar (ação secundária).",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'Anterior'"
- }
- },
- {
- "name": "nextButtonVariant",
- "description": "A variante de cor. São 10 variantes:",
- "tags": {},
- "values": [
- "green",
- "teal",
- "blue",
- "indigo",
- "violet",
- "pink",
- "red",
- "orange",
- "amber",
- "dark"
- ],
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'green'"
- }
- },
- {
- "name": "disableNextButton",
- "description": "Controla a disponibilidade do botão de ação principal.",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- }
- ],
- "events": [
- {
- "name": "step-change",
- "description": "Evento emitido quando a etapa ativa é alterada",
- "type": {
- "names": [
- "Event"
- ]
- }
- },
- {
- "name": "cancel-action",
- "description": "Evento que indica que a ação de cancelar foi acionada.\nEmitido ao clicar no botão de voltar na primeira etapa.",
- "type": {
- "names": [
- "Event"
- ]
- }
- },
- {
- "name": "next-action",
- "description": "Evento que indica que ação de avançar foi acionada",
- "type": {
- "names": [
- "Event"
- ]
- }
- }
- ],
- "slots": [
- {
- "name": "`step-${index + 1}-header`",
- "scoped": true,
- "bindings": [
- {
- "name": "name",
- "title": "binding"
- }
- ]
- },
- {
- "name": "`step-${index + 1}`",
- "scoped": true,
- "bindings": [
- {
- "name": "name",
- "title": "binding"
- }
- ]
- }
- ],
- "sourceFiles": [
- "src/components/Wizard.vue"
- ]
- },
- "CdsCustomFieldsSideSheet": {
- "name": "CustomFieldsSideSheet",
- "exportName": "default",
- "displayName": "CustomFieldsSideSheet",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "customFieldsList",
- "type": {
- "name": "array"
- },
- "defaultValue": {
- "func": false,
- "value": "[]"
- }
- },
- {
- "name": "customFieldsSearchable",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "selectionVariant",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'primary'"
- }
- },
- {
- "name": "presetsOptions",
- "type": {
- "name": "array"
- },
- "defaultValue": {
- "func": false,
- "value": "[]"
- }
- },
- {
- "name": "trackBy",
- "type": {
- "name": "string"
- },
- "required": true
- },
- {
- "name": "loadingCustomFields",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "shouldDisableOkButton",
- "type": {
- "name": "boolean"
- },
- "defaultValue": {
- "func": false,
- "value": "false"
- }
- },
- {
- "name": "minFields",
- "type": {
- "name": "number"
- },
- "required": true
- },
- {
- "name": "maxFields",
- "type": {
- "name": "number"
- },
- "required": true
- }
- ],
- "events": [
- {
- "name": "update-fields-list"
- },
- {
- "name": "cancel"
- },
- {
- "name": "update-preset"
- }
- ],
- "sourceFiles": [
- "src/components/InternalComponents/CustomFieldsSideSheet.vue"
- ]
- },
- "CdsMonthSelectorGrid": {
- "name": "CdsMonthSelectorGrid",
- "exportName": "default",
- "displayName": "MonthSelectorGrid",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "variant",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'green'"
- }
- },
- {
- "name": "minDate",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "''"
- }
- },
- {
- "name": "maxDate",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "''"
- }
- },
- {
- "name": "selectedDate",
- "type": {
- "name": "string"
- },
- "required": false,
- "defaultValue": {
- "func": false,
- "value": "''"
- }
- }
- ],
- "events": [
- {
- "name": "click"
- }
- ],
- "sourceFiles": [
- "src/components/InternalComponents/MonthSelectorGrid.vue"
- ]
- },
- "CdsYearSelectorGrid": {
- "name": "CdsYearSelectorGrid",
- "exportName": "default",
- "displayName": "YearSelectorGrid",
- "description": "",
- "tags": {},
- "props": [
- {
- "name": "variant",
- "type": {
- "name": "string"
- },
- "defaultValue": {
- "func": false,
- "value": "'green'"
- }
- },
- {
- "name": "selectedDate",
- "type": {
- "name": "string"
- },
- "required": false,
- "defaultValue": {
- "func": false,
- "value": "''"
- }
- }
- ],
- "events": [
- {
- "name": "click"
- }
- ],
- "sourceFiles": [
- "src/components/InternalComponents/YearSelectorGrid.vue"
- ]
- }
-}
\ No newline at end of file
diff --git a/package-lock.json b/package-lock.json
index 7ddd1e0f..a136d384 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
{
"name": "@sysvale/cuida",
- "version": "3.154.1",
+ "version": "3.154.6",
"lockfileVersion": 3,
"requires": true,
"packages": {
"": {
"name": "@sysvale/cuida",
- "version": "3.154.1",
+ "version": "3.154.6",
"dependencies": {
"@popperjs/core": "^2.11.6",
"@sysvale/cuida-icons": "^1.18.0",
diff --git a/package.json b/package.json
index 2fa9f185..abcc627d 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
{
"name": "@sysvale/cuida",
- "version": "3.154.1",
+ "version": "3.154.6",
"description": "A design system built by Sysvale, using storybook and Vue components",
"repository": {
"type": "git",
@@ -20,7 +20,7 @@
},
"unpkg": "dist/@sysvale/cuida.umd.js",
"scripts": {
- "build": "vue-tsc --declaration --emitDeclarationOnly && npm run generate:docs && vite build && node buildtokens.js",
+ "build": "npm run generate:docs && vue-tsc --declaration --emitDeclarationOnly && vite build && node buildtokens.js",
"preview": "vite preview",
"docs:dev": "vitepress dev docs",
"docs:build": "vitepress build docs",
diff --git a/src/components/DateInput.vue b/src/components/DateInput.vue
index f8d84d73..1857cd8d 100644
--- a/src/components/DateInput.vue
+++ b/src/components/DateInput.vue
@@ -124,7 +124,7 @@
{
return currentDate.value.setLocale('pt-BR').toFormat('yyyy');
});
+const currentDateISO = computed(() => {
+ return currentDate.value.toFormat('yyyy-MM-dd');
+});
+
+const pickerSelectedDate = computed(() => {
+ return currentDateISO.value;
+});
+
const emptyDays = computed(() => {
const firstDayOfMonth = currentDate.value.startOf('month');
return firstDayOfMonth.weekday - 1;
@@ -829,23 +837,13 @@ function toDateTime() {
}
function handleMonthSelection(selectedMonth) {
- internalValue.value = internalValue.value ? internalValue.value : DateTime.now().setLocale('pt-BR').toFormat('dd/MM/yyyy');
showMonthPicker.value = !showMonthPicker.value;
- let [day, month, year] = internalValue.value.split('/');
- month = selectedMonth.index;
- let daysInMonth = DateTime.local(+year, +month).daysInMonth;
-
- day = daysInMonth < day ? daysInMonth : day;
-
- currentDate.value = DateTime.fromFormat(`${day}/${month}/${year}`, 'dd/MM/yyyy');
+ currentDate.value = currentDate.value.set({ month: parseInt(selectedMonth.index) });
}
function handleYearSelection(selectedYear) {
- internalValue.value = internalValue.value ? internalValue.value : DateTime.now().setLocale('pt-BR').toFormat('dd/MM/yyyy');
showYearPicker.value = !showYearPicker.value;
- let [day, month] = internalValue.value.split('/');
-
- currentDate.value = DateTime.fromFormat(`${day}/${month}/${selectedYear}`, 'dd/MM/yyyy');
+ currentDate.value = currentDate.value.set({ year: selectedYear });
}
function toggleMonthPickerDisplay() {
diff --git a/src/components/InternalComponents/MonthSelectorGrid.vue b/src/components/InternalComponents/MonthSelectorGrid.vue
index 7a88fe8a..49972af6 100644
--- a/src/components/InternalComponents/MonthSelectorGrid.vue
+++ b/src/components/InternalComponents/MonthSelectorGrid.vue
@@ -58,9 +58,9 @@ const internalMaxDate = ref(props.maxDate);
/* COMPUTED */
const currentMonth = computed(() => {
- if (!internalDate.value) return 1;
+ if (!internalDate.value) return null;
const month = internalDate.value.split('-')[1];
- return month ? parseInt(month) : 1;
+ return month ? parseInt(month) : null;
});
/* WATCHERS */
diff --git a/src/components/InternalComponents/YearSelectorGrid.vue b/src/components/InternalComponents/YearSelectorGrid.vue
index 3685953c..5e9204cd 100644
--- a/src/components/InternalComponents/YearSelectorGrid.vue
+++ b/src/components/InternalComponents/YearSelectorGrid.vue
@@ -61,20 +61,25 @@ const props = defineProps({
const emits = defineEmits(['click']);
/* REACTIVE DATA */
-const currentYear = ref(new Date().getFullYear());
+const todayYear = new Date().getFullYear();
+const selectedYear = computed(() => {
+ if (!props.selectedDate) return null;
+ return parseInt(props.selectedDate.split('-')[0]);
+});
+
const minYear = computed(() => {
if (props.minDate) {
return parseInt(props.minDate.split('-')[0]);
}
- return currentYear.value - 120;
+ return todayYear - 120;
});
const maxYear = computed(() => {
if (props.maxDate) {
return parseInt(props.maxDate.split('-')[0]);
}
- return currentYear.value + 50;
+ return todayYear + 50;
});
-const initialYear = ref(currentYear.value - 7);
+const initialYear = ref((selectedYear.value || todayYear) - 7);
const scrollThumbHeight = ref(33);
const isDragging = ref(false);
const startY = ref(0);
@@ -113,7 +118,7 @@ function yearSelectorClasses(year) {
let classes = {
[`year-selector__year--${props.variant}`]: true,
'year-selector__year--disabled':( year < minYear.value) || (year > maxYear.value),
- [`year-selector__year--selected--${props.variant}`]: year == currentYear.value,
+ [`year-selector__year--selected--${props.variant}`]: year == selectedYear.value,
}
return classes;
diff --git a/src/tests/SelectorGridHighlight.spec.js b/src/tests/SelectorGridHighlight.spec.js
new file mode 100644
index 00000000..c7969e54
--- /dev/null
+++ b/src/tests/SelectorGridHighlight.spec.js
@@ -0,0 +1,60 @@
+import { describe, test, expect, beforeEach, vi } from 'vitest';
+import { mount } from '@vue/test-utils';
+import MonthSelectorGrid from '../components/InternalComponents/MonthSelectorGrid.vue';
+import YearSelectorGrid from '../components/InternalComponents/YearSelectorGrid.vue';
+
+describe('SelectorGrid Highlight Fix', () => {
+ beforeEach(() => {
+ vi.useFakeTimers();
+ vi.setSystemTime(new Date(2026, 1, 10)); // Feb 10, 2026
+ });
+
+ describe('MonthSelectorGrid', () => {
+ test('no month should be highlighted when selectedDate is empty', () => {
+ const wrapper = mount(MonthSelectorGrid, {
+ props: {
+ selectedDate: '',
+ },
+ });
+ const selectedMonths = wrapper.findAll('.month-selector__month--selected--green');
+ expect(selectedMonths.length).toBe(0);
+ });
+
+ test('correct month should be highlighted when selectedDate is provided', () => {
+ const wrapper = mount(MonthSelectorGrid, {
+ props: {
+ selectedDate: '2025-05-15',
+ },
+ });
+ // May is index 4 (0-based) in MONTHS array, so it's the 5th element
+ const months = wrapper.findAll('.month-selector__month');
+ expect(months[4].classes()).toContain('month-selector__month--selected--green');
+
+ const selectedMonths = wrapper.findAll('[class*="month-selector__month--selected--"]');
+ expect(selectedMonths.length).toBe(1);
+ });
+ });
+
+ describe('YearSelectorGrid', () => {
+ test('no year should be highlighted when selectedDate is empty', () => {
+ const wrapper = mount(YearSelectorGrid, {
+ props: {
+ selectedDate: '',
+ },
+ });
+ const selectedYears = wrapper.findAll('.year-selector__year--selected--green');
+ expect(selectedYears.length).toBe(0);
+ });
+
+ test('correct year should be highlighted when selectedDate is provided', () => {
+ const wrapper = mount(YearSelectorGrid, {
+ props: {
+ selectedDate: '2025-05-15',
+ },
+ });
+ const selectedYears = wrapper.findAll('.year-selector__year--selected--green');
+ expect(selectedYears.length).toBe(1);
+ expect(selectedYears[0].text()).toBe('2025');
+ });
+ });
+});
diff --git a/src/tests/__snapshots__/DateInput.spec.js.snap b/src/tests/__snapshots__/DateInput.spec.js.snap
index ec44b8bf..d51c965e 100644
--- a/src/tests/__snapshots__/DateInput.spec.js.snap
+++ b/src/tests/__snapshots__/DateInput.spec.js.snap
@@ -95,8 +95,8 @@ exports[`DateInput > renders correctly 1`] = `
-
jan
-
fev
+
jan
+
fev
mar
abr
maio