diff --git a/docs/docgen/PlaygroundBuilder.vue b/docs/docgen/PlaygroundBuilder.vue index baa3c9e5..3b4412fc 100644 --- a/docs/docgen/PlaygroundBuilder.vue +++ b/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); } diff --git a/package.json b/package.json index 2b29b19c..16821cbd 100644 --- a/package.json +++ b/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", diff --git a/src/components/TimeInput.vue b/src/components/TimeInput.vue index 246a2606..2ab0f640 100644 --- a/src/components/TimeInput.vue +++ b/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() { diff --git a/src/tests/TimeInput.spec.ts b/src/tests/TimeInput.spec.ts index 1c380794..ea4fb616 100644 --- a/src/tests/TimeInput.spec.ts +++ b/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'); + }); });