feat: adiciona props de placeholder customizáveis no TimeInput

docs/docgen/PlaygroundBuilder.vue

@@ -174,7 +174,7 @@ watch(model, () => {
 				parsedValue = rawValue;
 			}
 
-			if (!isNaN(parsedValue) && !isNaN(parseFloat(parsedValue)) && isFinite(parsedValue)) {
+			if (propData.type.name.includes('number') && !isNaN(parsedValue) && !isNaN(parseFloat(parsedValue)) && isFinite(parsedValue)) {
 				parsedValue = Number(parsedValue);
 			}
 

package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sysvale/cuida",
-	"version": "3.159.0",
+	"version": "3.160.0",
 	"description": "A design system built by Sysvale, using storybook and Vue components",
 	"repository": {
 		"type": "git",

src/components/TimeInput.vue

@@ -34,7 +34,7 @@
 					min="0"
 					max="23"
 					step="1"
-					placeholder="00"
+					:placeholder="hourPlaceholder"
 					@keyup.up="startHour++"
 					@keyup.down="startHour > 0 ? startHour-- : null"
 					@input="handleTimeInput"
@@ -50,7 +50,7 @@
 					min="0"
 					max="59"
 					step="1"
-					placeholder="00"
+					:placeholder="minutePlaceholder"
 					@keyup.up="startMinute++"
 					@keyup.down="startMinute > 0 ? startMinute-- : null"
 					@input="handleTimeInput"
@@ -73,7 +73,7 @@
 					min="0"
 					max="23"
 					step="1"
-					placeholder="00"
+					:placeholder="hourPlaceholder"
 					@keyup.up="endHour++"
 					@keyup.down="endHour > 0 ? endHour-- : null"
 					@input="handleTimeInput"
@@ -89,7 +89,7 @@
 					min="0"
 					max="59"
 					step="1"
-					placeholder="00"
+					:placeholder="minutePlaceholder"
 					@keyup.up="endMinute++"
 					@keyup.down="endMinute > 0 ? endMinute-- : null"
 					@input="handleTimeInput"
@@ -204,6 +204,22 @@ export default {
 			type: String,
 			default: 'Horário inválido',
 		},
+		/**
+		 * Texto exibido como placeholder nos campos de hora.
+		 * Por padrão, exibe '00'.
+		 */
+		hourPlaceholder: {
+			type: String,
+			default: '00',
+		},
+		/**
+		 * Texto exibido como placeholder nos campos de minuto.
+		 * Por padrão, exibe '00'.
+		 */
+		minutePlaceholder: {
+			type: String,
+			default: '00',
+		},
 	},
 
 	data() {

src/tests/TimeInput.spec.ts

@@ -12,5 +12,83 @@ describe('TimeInput', () => {
 
 		expect(wrapper.html()).toMatchSnapshot();
 	});
+
+	test('uses "00" as default placeholder for hour and minute inputs', () => {
+		const wrapper = mount(TimeInput, {
+			props: { label: 'Horário' },
+		});
+
+		const inputs = wrapper.findAll('input');
+		inputs.forEach((input) => {
+			expect(input.attributes('placeholder')).toBe('00');
+		});
+	});
+
+	test('applies custom hourPlaceholder to hour inputs', () => {
+		const wrapper = mount(TimeInput, {
+			props: {
+				label: 'Horário',
+				hourPlaceholder: 'HH',
+			},
+		});
+
+		const hourInputs = wrapper.findAll('input[type="text"]').filter(
+			(_, i) => i % 2 === 0,
+		);
+
+		hourInputs.forEach((input) => {
+			expect(input.attributes('placeholder')).toBe('HH');
+		});
+	});
+
+	test('applies custom minutePlaceholder to minute inputs', () => {
+		const wrapper = mount(TimeInput, {
+			props: {
+				label: 'Horário',
+				minutePlaceholder: 'mm',
+			},
+		});
+
+		const minuteInputs = wrapper.findAll('input[type="text"]').filter(
+			(_, i) => i % 2 !== 0,
+		);
+
+		minuteInputs.forEach((input) => {
+			expect(input.attributes('placeholder')).toBe('mm');
+		});
+	});
+
+	test('supports different placeholders for hour and minute simultaneously', () => {
+		const wrapper = mount(TimeInput, {
+			props: {
+				label: 'Horário',
+				hourPlaceholder: 'HH',
+				minutePlaceholder: 'mm',
+			},
+		});
+
+		const inputs = wrapper.findAll('input[type="text"]');
+
+		expect(inputs[0].attributes('placeholder')).toBe('HH');
+		expect(inputs[1].attributes('placeholder')).toBe('mm');
+	});
+
+	test('applies placeholders to range mode inputs as well', () => {
+		const wrapper = mount(TimeInput, {
+			props: {
+				label: 'Horário',
+				mode: 'range',
+				hourPlaceholder: 'HH',
+				minutePlaceholder: 'mm',
+			},
+		});
+
+		const inputs = wrapper.findAll('input[type="text"]');
+
+		expect(inputs[0].attributes('placeholder')).toBe('HH');
+		expect(inputs[1].attributes('placeholder')).toBe('mm');
+		expect(inputs[2].attributes('placeholder')).toBe('HH');
+		expect(inputs[3].attributes('placeholder')).toBe('mm');
+	});
 });