Feature/add prop ghost

docs/components/forms/base-input.md

@@ -96,5 +96,6 @@ const args = ref({
 	tooltipIcon: 'info-outline',
 	trailingIcon: 'info-outline',
 	leadingIcon: 'info-outline',
+	ghost: true,
 });
 </script>

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.
 
 ---
+
 <br>
 
 ## 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.
 
 <br>
 
 ## 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 <a href="https://sysvale.github.io/cuida/?path=/docs/componentes-forms-clusteredmultiselect--clustered-multiselect">ClusteredMultiselects</a>.
 
 <br>
 
 ## 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,
 });
 </script>

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",

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;
+}
 </style>

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;
+}
 </style>

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({

src/tests/__snapshots__/BaseInput.spec.js.snap

@@ -11,7 +11,7 @@ exports[`BaseInput > renders correctly 1`] = `
   <div data-v-82c69faf="" class="base-input base-input--default">
     <!--v-if-->
     <div data-v-82c69faf="" style="width: 100%;">
-      <!--v-if--><input data-v-82c69faf="" id="base-input" label="Label" hidelabel="false" state="default" type="text" placeholder="Digite aqui..." errormessage="Valor inválido" supportingtext="" fluid="false" tooltipicon="info-outline" floatinglabel="false" lazy="false" name="" enableautocomplete="false" enabletopcontent="false" class="base-input__field" autocomplete="off">
+      <!--v-if--><input data-v-82c69faf="" id="base-input" label="Label" hidelabel="false" state="default" type="text" placeholder="Digite aqui..." errormessage="Valor inválido" supportingtext="" fluid="false" tooltipicon="info-outline" floatinglabel="false" lazy="false" name="" enableautocomplete="false" enabletopcontent="false" ghost="false" class="base-input__field" autocomplete="off">
     </div>
     <!--v-if-->
     <!--v-if-->

src/tests/__snapshots__/BaseMobileInput.spec.js.snap

@@ -4,7 +4,7 @@ exports[`BaseMobileInput > renders correctly 1`] = `
 "<div data-v-c2ac4e6d="" data-v-06760eb7="" class="flexbox" id="base-mobile-input">
   <!-- @slot Slot com o conteúdo interno do FlexBox -->
   <div data-v-06760eb7="" class="base-mobile-input base-mobile-input--default">
-    <!--v-if--><label data-v-06760eb7="" class="base-mobile-input__label" for="cds-base-mobile-input-text-base-mobile-input"><span data-v-06760eb7="" class="label__content">Nome <!--v-if--></span></label><input data-v-06760eb7="" id="base-mobile-input" label="Nome" state="default" type="text" errormessage="Valor inválido" supportingtext="" fluid="false" tooltipicon="info-outline" hasleadingicon="false" hastrailingicon="false" lazy="false" enableautocomplete="false" placeholder="" class="base-mobile-input__field" autocomplete="off">
+    <!--v-if--><label data-v-06760eb7="" class="base-mobile-input__label" for="cds-base-mobile-input-text-base-mobile-input"><span data-v-06760eb7="" class="label__content">Nome <!--v-if--></span></label><input data-v-06760eb7="" id="base-mobile-input" label="Nome" state="default" type="text" errormessage="Valor inválido" supportingtext="" fluid="false" tooltipicon="info-outline" hasleadingicon="false" hastrailingicon="false" lazy="false" enableautocomplete="false" ghost="false" placeholder="" class="base-mobile-input__field" autocomplete="off">
     <!--v-if-->
     <!--v-if-->
   </div>

src/tests/__snapshots__/DateInput.spec.js.snap

@@ -12,7 +12,7 @@ exports[`DateInput > renders correctly 1`] = `
     </label>
     <div data-v-82c69faf="" class="base-input base-input--default">
       <!--v-if-->
-      <div data-v-82c69faf="" id="" tabindex="0" modelvalue="" label="Selecione uma data" hidelabel="false" disabled="false" state="default" type="date" required="false" placeholder="dd/MM/yyyy" errormessage="Valor inválido" supportingtext="" fluid="false" tooltipicon="info-outline" floatinglabel="false" lazy="false" name="" enableautocomplete="false" enabletopcontent="false" class="base-input__field" autocomplete="off"><small data-v-82c69faf="" class="base-input__date-text">dd/MM/yyyy</small></div>
+      <div data-v-82c69faf="" id="" tabindex="0" modelvalue="" label="Selecione uma data" hidelabel="false" disabled="false" state="default" type="date" required="false" placeholder="dd/MM/yyyy" errormessage="Valor inválido" supportingtext="" fluid="false" tooltipicon="info-outline" floatinglabel="false" lazy="false" name="" enableautocomplete="false" enabletopcontent="false" ghost="false" class="base-input__field" autocomplete="off"><small data-v-82c69faf="" class="base-input__date-text">dd/MM/yyyy</small></div>
       <!--v-if-->
       <div data-v-82c69faf="" class="base-input__trailing-icon-container">
         <div data-v-fcd39cd1="" class="date-input__icon"><svg data-v-fcd39cd1="" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" aria-labelledby="calendar-outline" role="presentation">
@@ -35,7 +35,7 @@ exports[`DateInput > renders correctly 1`] = `
     <div data-v-fcd39cd1="" class="date-input__calendar--down" style="display: none;">
       <div data-v-fcd39cd1="" class="calendar__header">
         <div data-v-c2ac4e6d="" data-v-fcd39cd1="" class="flexbox">
-          <!-- @slot Slot com o conteúdo interno do FlexBox --><span data-v-fcd39cd1="" class="calendar__month-and-title">janeiro</span><span data-v-fcd39cd1="" class="calendar__month-and-title">2026</span>
+          <!-- @slot Slot com o conteúdo interno do FlexBox --><span data-v-fcd39cd1="" class="calendar__month-and-title">fevereiro</span><span data-v-fcd39cd1="" class="calendar__month-and-title">2026</span>
         </div>
         <div data-v-c2ac4e6d="" data-v-fcd39cd1="" class="flexbox">
           <!-- @slot Slot com o conteúdo interno do FlexBox --><svg data-v-fcd39cd1="" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24" aria-labelledby="caret-up-outline" role="presentation" class="calendar__right-caret">
@@ -61,6 +61,9 @@ exports[`DateInput > renders correctly 1`] = `
         <div data-v-fcd39cd1="" class="calendar__empty-day"></div>
         <div data-v-fcd39cd1="" class="calendar__empty-day"></div>
         <div data-v-fcd39cd1="" class="calendar__empty-day"></div>
+        <div data-v-fcd39cd1="" class="calendar__empty-day"></div>
+        <div data-v-fcd39cd1="" class="calendar__empty-day"></div>
+        <div data-v-fcd39cd1="" class="calendar__empty-day"></div>
         <div data-v-fcd39cd1="" class="calendar__day--green" disabled="false">1</div>
         <div data-v-fcd39cd1="" class="calendar__day--green" disabled="false">2</div>
         <div data-v-fcd39cd1="" class="calendar__day--green" disabled="false">3</div>
@@ -89,9 +92,6 @@ exports[`DateInput > renders correctly 1`] = `
         <div data-v-fcd39cd1="" class="calendar__day--green" disabled="false">26</div>
         <div data-v-fcd39cd1="" class="calendar__day--green" disabled="false">27</div>
         <div data-v-fcd39cd1="" class="calendar__day--green" disabled="false">28</div>
-        <div data-v-fcd39cd1="" class="calendar__day--green" disabled="false">29</div>
-        <div data-v-fcd39cd1="" class="calendar__day--green" disabled="false">30</div>
-        <div data-v-fcd39cd1="" class="calendar__day--green" disabled="false">31</div>
       </div>
       <div data-v-958116c6="" data-v-44dffe1e="" data-v-fcd39cd1="" class="grid month-selector__grid" style="display: none;">
         <!-- @slot Slot com o conteúdo interno da grid -->

src/tests/__snapshots__/NumberInput.spec.js.snap

@@ -12,7 +12,7 @@ exports[`CdsNumberInput > renders correctly 1`] = `
     <div data-v-82c69faf="" class="base-input base-input--default">
       <!--v-if-->
       <div data-v-82c69faf="" style="width: 100%;">
-        <!--v-if--><input data-v-82c69faf="" id="number-input" modelvalue="" label="Valor" hidelabel="false" state="default" type="number" placeholder="Digite aqui a informação" errormessage="Valor inválido" supportingtext="" fluid="false" tooltipicon="info-outline" floatinglabel="false" lazy="false" name="" enableautocomplete="false" enabletopcontent="false" class="base-input__field" autocomplete="off">
+        <!--v-if--><input data-v-82c69faf="" id="number-input" modelvalue="" label="Valor" hidelabel="false" state="default" type="number" placeholder="Digite aqui a informação" errormessage="Valor inválido" supportingtext="" fluid="false" tooltipicon="info-outline" floatinglabel="false" lazy="false" name="" enableautocomplete="false" enabletopcontent="false" ghost="false" class="base-input__field" autocomplete="off">
       </div>
       <!--v-if-->
       <!--v-if-->

src/tests/__snapshots__/Select.spec.js.snap

@@ -13,7 +13,7 @@ exports[`Select > renders correctly 1`] = `
       <div data-v-82c69faf="" class="base-input base-input--default">
         <!--v-if-->
         <div data-v-82c69faf="" style="width: 100%;">
-          <!--v-if--><input data-v-82c69faf="" id="select-input" label="label" hidelabel="false" state="default" type="text" placeholder="Selecione..." errormessage="Valor inválido" supportingtext="" fluid="false" tooltipicon="info-outline" floatinglabel="false" lazy="false" readonly="" name="" enableautocomplete="false" enabletopcontent="false" class="base-input__field" autocomplete="off">
+          <!--v-if--><input data-v-82c69faf="" id="select-input" label="label" hidelabel="false" state="default" type="text" placeholder="Selecione..." errormessage="Valor inválido" supportingtext="" fluid="false" tooltipicon="info-outline" floatinglabel="false" lazy="false" readonly="" name="" enableautocomplete="false" enabletopcontent="false" ghost="false" class="base-input__field" autocomplete="off">
         </div>
         <!--v-if-->
         <div data-v-82c69faf="" class="base-input__trailing-icon-container"><span data-v-96b70cc4="" class="select__chevron--closed"></span></div>

src/tests/__snapshots__/TextInput.spec.js.snap

@@ -11,7 +11,7 @@ exports[`TextInput > renders correctly 1`] = `
   <div data-v-82c69faf="" class="base-input base-input--default">
     <!--v-if-->
     <div data-v-82c69faf="" style="width: 100%;">
-      <!--v-if--><input data-v-82c69faf="" id="text-input" modelvalue="" label="Label" hidelabel="false" state="default" type="text" placeholder="Digite aqui a informação" errormessage="Valor inválido" supportingtext="" fluid="false" tooltipicon="info-outline" floatinglabel="false" lazy="false" name="" enableautocomplete="true" enabletopcontent="false" class="base-input__field" autocomplete="on">
+      <!--v-if--><input data-v-82c69faf="" id="text-input" modelvalue="" label="Label" hidelabel="false" state="default" type="text" placeholder="Digite aqui a informação" errormessage="Valor inválido" supportingtext="" fluid="false" tooltipicon="info-outline" floatinglabel="false" lazy="false" name="" enableautocomplete="true" enabletopcontent="false" ghost="false" class="base-input__field" autocomplete="on">
     </div>
     <!--v-if-->
     <!--v-if-->