From a001c955b3bdab221b2705d53c9de370b377f26d Mon Sep 17 00:00:00 2001 From: Igor Vinicius Date: Tue, 3 Feb 2026 11:07:03 -0300 Subject: [PATCH 1/5] feat: Adiciona prop ghost ao baseInput e select --- docs/components/forms/base-input.md | 1 + docs/components/forms/select.md | 6 +++++- src/components/BaseInput.vue | 18 ++++++++++++++++++ src/components/Select.vue | 8 ++++++++ 4 files changed, 32 insertions(+), 1 deletion(-) diff --git a/docs/components/forms/base-input.md b/docs/components/forms/base-input.md index 619b347b..b1d50224 100644 --- a/docs/components/forms/base-input.md +++ b/docs/components/forms/base-input.md @@ -96,5 +96,6 @@ const args = ref({ tooltipIcon: 'info-outline', trailingIcon: 'info-outline', leadingIcon: 'info-outline', + ghost: true, }); diff --git a/docs/components/forms/select.md b/docs/components/forms/select.md index 93de1cc1..5bd9a383 100644 --- a/docs/components/forms/select.md +++ b/docs/components/forms/select.md @@ -3,21 +3,24 @@ Selects permitem que o usuário escolha uma opção a partir de uma lista de itens. --- +
## Quando usar: -- O usuário tiver de escolher uma única opção em uma lista com diversos itens. +- O usuário tiver de escolher uma única opção em uma lista com diversos itens.
## Quando não usar: + - A lista de opções possuir 3 itens ou menos. Nesses casos, recomendamos a utilização de radio buttons. - O usuário precisar selecionar mais de um item da lista. Nesse caso, utilize ClusteredMultiselects.
## Observações: + - Coloque as opções mais prováveis de serem selecionadas no topo do select. Na dúvida, ordene-os em ordem alfanumérica. - As labels dos selects devem ser sucintas (de uma a três palavras). - As labels devem ser ser escritas com a primeira letra maiúscula e as restantes minúsculas. @@ -143,5 +146,6 @@ const args = ref({ supportingText: null, supportLink: '', supportLinkUrl: '', + ghost: false, }); diff --git a/src/components/BaseInput.vue b/src/components/BaseInput.vue index ec09c95b..ae676a85 100644 --- a/src/components/BaseInput.vue +++ b/src/components/BaseInput.vue @@ -377,6 +377,13 @@ const props = defineProps({ type: Boolean, default: false, }, + /** + * Especifica se o componente deve ser exibido na sua versão ghost. + */ + ghost: { + type: Boolean, + default: false, + }, }); const emits = defineEmits({ @@ -400,6 +407,10 @@ const computedAutocompleteProp = computed(() => props.enableAutocomplete ? 'on' const baseInputClass = computed(() => { let inputClass = props.fluid ? 'base-input--fluid' : 'base-input'; + if (props.ghost) { + inputClass += ' ghost'; + } + if (!isFocused.value) { inputClass += props.disabled ? ' base-input--disabled' @@ -777,4 +788,11 @@ input::-webkit-inner-spin-button { input:disabled { background: none !important; } + +.base-input.ghost { + border: none !important; + background: transparent !important; + box-shadow: none !important; + outline: none !important; +} diff --git a/src/components/Select.vue b/src/components/Select.vue index 7551121a..e1a10905 100644 --- a/src/components/Select.vue +++ b/src/components/Select.vue @@ -23,6 +23,7 @@ :floating-label="floatingLabel || mobile" :class="inputClass" :fluid="computedFluid" + :ghost @keydown.enter.prevent="activateSelectionOnEnter" @keydown.arrow-down.prevent="highlightOnArrowDown" @keydown.arrow-up.prevent="highlightOnArrowUp" @@ -291,6 +292,13 @@ const props = defineProps({ type: Boolean, default: false, }, + /** + * Especifica se o componente deve ser exibido na sua versão ghost. + */ + ghost: { + type: Boolean, + default: false, + }, }); const emits = defineEmits({ From 55fb417ff545ba042c48f8f5f55eb93b74073cce Mon Sep 17 00:00:00 2001 From: Igor Vinicius Date: Tue, 3 Feb 2026 11:07:46 -0300 Subject: [PATCH 2/5] =?UTF-8?q?chore:=20Atualiza=20vers=C3=A3o=20do=20cuid?= =?UTF-8?q?a?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index b375b167..ad0ada5c 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@sysvale/cuida", - "version": "3.153.0", + "version": "3.154.0", "description": "A design system built by Sysvale, using storybook and Vue components", "repository": { "type": "git", From d20b64eb258c7d16e9d19733e4958044cebac0ce Mon Sep 17 00:00:00 2001 From: Igor Vinicius Date: Tue, 3 Feb 2026 11:19:29 -0300 Subject: [PATCH 3/5] tests: Atualiza testes de snapshot --- src/tests/__snapshots__/BaseInput.spec.js.snap | 2 +- src/tests/__snapshots__/DateInput.spec.js.snap | 10 +++++----- src/tests/__snapshots__/NumberInput.spec.js.snap | 2 +- src/tests/__snapshots__/Select.spec.js.snap | 2 +- src/tests/__snapshots__/TextInput.spec.js.snap | 2 +- 5 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/tests/__snapshots__/BaseInput.spec.js.snap b/src/tests/__snapshots__/BaseInput.spec.js.snap index 968705f4..f108dfec 100644 --- a/src/tests/__snapshots__/BaseInput.spec.js.snap +++ b/src/tests/__snapshots__/BaseInput.spec.js.snap @@ -11,7 +11,7 @@ exports[`BaseInput > renders correctly 1`] = `
- +
diff --git a/src/tests/__snapshots__/DateInput.spec.js.snap b/src/tests/__snapshots__/DateInput.spec.js.snap index 2de9c3e5..bc83f58f 100644 --- a/src/tests/__snapshots__/DateInput.spec.js.snap +++ b/src/tests/__snapshots__/DateInput.spec.js.snap @@ -12,7 +12,7 @@ exports[`DateInput > renders correctly 1`] = `
-
dd/MM/yyyy
+
dd/MM/yyyy
@@ -35,7 +35,7 @@ exports[`DateInput > renders correctly 1`] = `