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/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",
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/BaseMobileInput.vue b/src/components/BaseMobileInput.vue
index c9157f80..c8810a14 100644
--- a/src/components/BaseMobileInput.vue
+++ b/src/components/BaseMobileInput.vue
@@ -405,6 +405,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({
@@ -426,6 +433,10 @@ const computedAutocompleteProp = computed(() => props.enableAutocomplete ? 'on'
const baseMobileInputClass = computed(() => {
let mobileInputClass = props.fluid ? 'base-mobile-input--fluid' : 'base-mobile-input';
+ if (props.ghost) {
+ mobileInputClass += ' ghost';
+ }
+
if (!isFocused.value) {
mobileInputClass += props.disabled
? ' base-mobile-input--disabled'
@@ -791,4 +802,11 @@ input::-webkit-inner-spin-button {
input:disabled {
background: none !important;
}
+
+.base-mobile-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({
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`] = `