feat(InputTime): add range prop#6203
Conversation
Add `range` prop to enable time range selection with start and end times. Update documentation with time range examples including variants, icons, and custom separators. Add TimeRangeField link to component references.
|
Note Reviews pausedIt looks like this branch is under active development. To avoid overwhelming you with review comments due to an influx of new commits, CodeRabbit has automatically paused this review. You can configure this behavior by changing the Use the following commands to manage reviews:
Use the checkboxes below for quick actions:
📝 WalkthroughWalkthroughAdds time-range support to InputTime by introducing a Estimated code review effort🎯 4 (Complex) | ⏱️ ~45 minutes 🚥 Pre-merge checks | ✅ 5✅ Passed checks (5 passed)
✏️ Tip: You can configure your own custom pre-merge checks in the settings. ✨ Finishing Touches🧪 Generate unit tests (beta)
📝 Coding Plan
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Actionable comments posted: 4
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/runtime/components/InputTime.vue (1)
21-56:⚠️ Potential issue | 🟠 MajorRestore the pass-through Reka props on
InputTimeProps.This interface now only extends
UseComponentIconsProps, sohourCycle,locale,granularity,hideTimeZone, and other field-root props disappear from the typed public API. TypeScript consumers will be unable to pass valid props that the component accepts, creating a breaking regression even though the implementation supports these fields. The documentation still advertiseshourCycle, so this becomes a TS/doc mismatch.Additionally, fix the slot name typo: rename
'range-seperator'to'range-separator'in the interface and template to match the theme configuration.🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/runtime/components/InputTime.vue` around lines 21 - 56, InputTimeProps currently only extends UseComponentIconsProps which drops all pass-through Reka field props (hourCycle, locale, granularity, hideTimeZone, etc.); restore those by extending the appropriate Reka field prop type used elsewhere (e.g. extend UseComponentIconsProps & RekaFieldProps or the concrete props interface that contains hourCycle/locale/granularity/hideTimeZone) so the public API includes those fields again, and also fix the slot name typo by renaming 'range-seperator' to 'range-separator' wherever it appears (both in the InputTimeProps.ui slots type and the component template/slots usage) so the slot key matches the theme configuration.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@playgrounds/nuxt/app/pages/components/input-time.vue`:
- Around line 9-13: The object literal assigned to attrs (created via reactive)
has a trailing comma that triggers the comma-dangle lint rule; open the attrs
declaration where reactive({ color: [theme.defaultVariants.color], size:
[theme.defaultVariants.size], variant: [theme.defaultVariants.variant], }) and
remove the final comma after the last property so the object ends with variant:
[theme.defaultVariants.variant] }); leaving the rest of the reactive/attrs code
unchanged.
- Line 29: The update handler for UInputTime uses Array.isArray($event) to
decide whether to assign to rangeValue or value but range mode emits an object,
so rangeValue never gets updated; change the routing to use the rangeMode flag
(e.g., in the `@update`:model-value handler on UInputTime) so when rangeMode is
true assign $event to rangeValue and otherwise assign to value, preserving the
existing :model-value binding and :range="rangeMode".
In `@src/runtime/components/InputTime.vue`:
- Around line 64-69: The slot name is misspelled as 'range-seperator' in the
InputTimeSlots interface and in the template; rename that slot to
'range-separator' everywhere (update the InputTimeSlots entry currently
declaring 'range-seperator' to 'range-separator' and change the corresponding
slot usage in the InputTime component template and any related slot
exports/registrations), and ensure consistency with the theme's rangeSeparator
naming by verifying any mapping or prop names (e.g., InputTime, its template
slots, and any consumers) are updated to the new 'range-separator' identifier.
- Around line 3-10: Remove the unused type imports (TimeFieldRootProps,
TimeFieldRootEmits, TimeRangeFieldRootProps, TimeRangeFieldRootEmits,
GetModelValue, ApplyModifiers, ModelModifiers) from the import block and keep
only the types actually referenced (e.g., TimeValue, AppConfig, theme,
UseComponentIconsProps, AvatarProps, ComponentConfig, GetModelValueEmits). Also
replace any quoted emit keys in this file (and the similar block at lines
~58-61) with unquoted identifiers to satisfy the redundant-quotes lint rule
(e.g., change "'update:modelValue'" to updateModelValue-style unquoted keys
where appropriate).
---
Outside diff comments:
In `@src/runtime/components/InputTime.vue`:
- Around line 21-56: InputTimeProps currently only extends
UseComponentIconsProps which drops all pass-through Reka field props (hourCycle,
locale, granularity, hideTimeZone, etc.); restore those by extending the
appropriate Reka field prop type used elsewhere (e.g. extend
UseComponentIconsProps & RekaFieldProps or the concrete props interface that
contains hourCycle/locale/granularity/hideTimeZone) so the public API includes
those fields again, and also fix the slot name typo by renaming
'range-seperator' to 'range-separator' wherever it appears (both in the
InputTimeProps.ui slots type and the component template/slots usage) so the slot
key matches the theme configuration.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 0ffef5ca-3175-49de-88b9-377107920e92
📒 Files selected for processing (4)
docs/content/docs/2.components/input-time.mdplaygrounds/nuxt/app/pages/components/input-time.vuesrc/runtime/components/InputTime.vuesrc/theme/input-time.ts
Refactor InputTime component with proper generic typing for range mode. Add explicit TimeValue type casting, improve type definitions for single/range values, and fix props forwarding. Rename 'range-seperator' slot to 'range-separator' for correct spelling. Update playground with better type safety and separate single/range value handling.
commit: |
benjamincanac
left a comment
benjamincanac
left a comment
There was a problem hiding this comment.
@edimitchel It seems your PR formatting is a bit broken if you look at input-time.md. Also wouldn't it be easier to do this with a <component :is="Component" /> like we do in Popover or InputMenu?
benjamincanac
changed the title
range prop
There was a problem hiding this comment.
Actionable comments posted: 2
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@docs/content/docs/2.components/input-time.md`:
- Around line 74-98: The MDC code block opened with "::component-code" is closed
incorrectly with ":::": locate the YAML/example block around the defaultValue
example (the "::component-code" start and the YAML between the --- markers) and
replace the erroneous closing ":::"
with the correct closing "::" so the block closes as "::component-code" ...
"::"; ensure the subsequent "#vue" note remains outside the block.
- Around line 57-58: The docs reference a non-existent type TimeRange for the
modelValue cast; update the cast to use the correct exported API type or remove
it: replace the TimeRange cast with InputTimeModelValue<...> (the public generic
exported type) or simply drop the cast, and ensure any internal TimeRangeType
(internal, not exported) is not used in docs; update occurrences around
modelValue (lines referencing modelValue) to reference InputTimeModelValue or no
cast so the documentation matches the actual exported types.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: 4cdfee14-5bef-441f-9df4-78fdee450338
📒 Files selected for processing (1)
docs/content/docs/2.components/input-time.md
There was a problem hiding this comment.
Actionable comments posted: 2
♻️ Duplicate comments (1)
docs/content/docs/2.components/input-time.md (1)
103-103:⚠️ Potential issue | 🟡 MinorFix malformed MDC block closing.
The
::component-codeblock opened at line 86 is closed with:::(three colons) instead of::(two colons). This can break documentation parsing.🔧 Proposed fix
---- -::: +--- +::🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/content/docs/2.components/input-time.md` at line 103, The MDC block that was opened with "::component-code" is incorrectly closed with ":::". Locate the closing marker in the file (current snippet shows ":::") and change it to the correct two-colon closing sequence "::" so the ::component-code block is properly terminated and documentation parsing will succeed.
🧹 Nitpick comments (1)
src/runtime/components/InputTime.vue (1)
20-20: Use English for code comments.The comment is in French. For consistency and maintainability, use English.
✏️ Proposed fix
-// Omit des props comme dans Calendar.vue / InputDate.vue +// Omit props as in Calendar.vue / InputDate.vue🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@src/runtime/components/InputTime.vue` at line 20, Replace the French inline comment in InputTime.vue ("// Omit des props comme dans Calendar.vue / InputDate.vue") with an English comment such as "// Omit props like in Calendar.vue / InputDate.vue" so comments are consistent and maintainable across components (reference: InputTime.vue and the related Calendar.vue / InputDate.vue comments).
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@docs/content/docs/2.components/input-time.md`:
- Around line 65-82: The docs reference a non-existent TimeRange in the cast
block; update the cast to point to a real exported type or export an alias so
the docs tooling can resolve it: either export a concrete type alias (e.g.
export type TimeRange = InputTimeModelValue<'range'> or similar) from the
component library, or change the cast entry to use the existing exported type
name (for example the public exported InputTimeModelValue or its exported alias)
that represents TimeRange when range is true; modify the component/type exports
and then update the cast: modelValue to that exported name so the documentation
system can resolve it.
In `@src/runtime/components/InputTime.vue`:
- Line 3: The import line in InputTime.vue is importing an unused symbol
TimeValue which causes the linter to fail; edit the import statement that
currently lists TimeFieldRootEmits, TimeFieldRootProps, TimeRangeFieldRootEmits,
TimeRangeFieldRootProps, TimeValue and remove the TimeValue identifier so only
the used types (TimeFieldRootEmits, TimeFieldRootProps, TimeRangeFieldRootEmits,
TimeRangeFieldRootProps) remain.
---
Duplicate comments:
In `@docs/content/docs/2.components/input-time.md`:
- Line 103: The MDC block that was opened with "::component-code" is incorrectly
closed with ":::". Locate the closing marker in the file (current snippet shows
":::") and change it to the correct two-colon closing sequence "::" so the
::component-code block is properly terminated and documentation parsing will
succeed.
---
Nitpick comments:
In `@src/runtime/components/InputTime.vue`:
- Line 20: Replace the French inline comment in InputTime.vue ("// Omit des
props comme dans Calendar.vue / InputDate.vue") with an English comment such as
"// Omit props like in Calendar.vue / InputDate.vue" so comments are consistent
and maintainable across components (reference: InputTime.vue and the related
Calendar.vue / InputDate.vue comments).
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: db3ad320-1d3e-4587-a661-8aa72d57df93
📒 Files selected for processing (2)
docs/content/docs/2.components/input-time.mdsrc/runtime/components/InputTime.vue
Export TimeRangeValue type alias and TimeValue from reka-ui. Update documentation to use TimeRangeValue instead of TimeRange for better type accuracy.
There was a problem hiding this comment.
Actionable comments posted: 1
♻️ Duplicate comments (1)
docs/content/docs/2.components/input-time.md (1)
86-103:⚠️ Potential issue | 🟠 MajorFix malformed MDC block closing for the range
defaultValueexample.The
::component-codeblock opened at Line 86 is closed with:::at Line 103; it should close with::.Proposed fix
-::: +::🤖 Prompt for AI Agents
Verify each finding against the current code and only fix it if needed. In `@docs/content/docs/2.components/input-time.md` around lines 86 - 103, The MDC block opened with "::component-code" (the example for the range defaultValue) is closed incorrectly with ":::". Locate the component-code block that contains the props.range and defaultValue arrays and replace the closing "::: " with the correct closing token "::" so the block is well-formed and the defaultValue range example renders properly.
🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.
Inline comments:
In `@src/runtime/components/InputTime.vue`:
- Around line 8-9: The import/export block in InputTime.vue places `export type
{ TimeValue } from 'reka-ui'` immediately after import statements which violates
the import/newline-after-import rule; add a single blank line after the import
statements (i.e., separate the import lines and the `export type` line) so
there's an empty line between them to satisfy the linter (look for the import
block near the top of InputTime.vue).
---
Duplicate comments:
In `@docs/content/docs/2.components/input-time.md`:
- Around line 86-103: The MDC block opened with "::component-code" (the example
for the range defaultValue) is closed incorrectly with ":::". Locate the
component-code block that contains the props.range and defaultValue arrays and
replace the closing "::: " with the correct closing token "::" so the block is
well-formed and the defaultValue range example renders properly.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Organization UI
Review profile: CHILL
Plan: Pro
Run ID: d54c331b-7f51-4d8b-b58a-f0d7f03237b7
📒 Files selected for processing (2)
docs/content/docs/2.components/input-time.mdsrc/runtime/components/InputTime.vue
|
I cannot know why Vercel build has an issue.. can you give me the source of the issue? |
|
@edimitchel I actually don't have any error, just: Did you try to build locally? |
Yes I had but probably not the doc but the lib. I'll try it later |
…tor alignment Remove unnecessary type assertions in computed properties and improve range separator icon vertical alignment with negative margin.
|
Ok, I tried multiple times to build but got memory heap.. By augmenting memory allocated, i achieve to reproduce the error, very abstract error.. I fix your review comments, good advices ! |
|
Ok, achieve to make it work by just running I added tests cases too. |
benjamincanac
left a comment
benjamincanac
left a comment
There was a problem hiding this comment.
@edimitchel I've made a few changes, let me know if you see anything wrong!
|
Looks good, thank for cleaning my mistakes! |
2 participants
Add
rangeprop to enable time range selection with start and end times.🔗 Linked issue
Resolves #5882
❓ Type of change
📚 Description
Adding range prop for getting range feature from InputTime
📝 Checklist