vercel[bot]
commented
1 month ago @Chizaruu is attempting to deploy a commit to the Themesberg Team on Vercel.
A member of the Team first needs to authorize it.
Open Chizaruu opened 1 month ago
vercel[bot]
commented
1 month ago @Chizaruu is attempting to deploy a commit to the Themesberg Team on Vercel.
A member of the Team first needs to authorize it.
coderabbitai[bot]
commented
1 month ago The pull request introduces a new Timepicker component to the flowbite-svelte project. This includes updates to the package.json to export the component, the creation of the Timepicker.svelte file with various properties and functionalities, a new JSON definition for the component, and comprehensive documentation. Additionally, a test case for the Timepicker component has been added to ensure its proper integration and functionality within the application.
| File | Change Summary |
|---|---|
package.json |
Added new export for Timepicker.svelte with type definition and Svelte file paths. |
src/lib/forms/Timepicker.svelte |
Introduced Timepicker component with multiple properties and internal state management for time selection. |
src/lib/index.js |
Added export for Timepicker component from ./forms/Timepicker.svelte. |
src/routes/component-data/Timepicker.json |
Created JSON file defining the Timepicker component with its properties and events. |
src/routes/docs/forms/timepicker.md |
Added documentation for the Timepicker component, including setup instructions and usage examples. |
tests/forms.spec.ts |
Added test case to verify the presence of <h1> element on the Timepicker documentation page. |
| Objective | Addressed | Explanation |
|---|---|---|
| Default timepicker | ✅ | |
| Timepicker with icon | ✅ | |
| Timepicker with dropdown | ✅ | |
| Timepicker with select | ✅ | |
| Timepicker range selector | ✅ | |
| Timerange with dropdown | ✅ | |
| Timerange picker with toggle | ✅ | |
| Inline timepicker buttons | ✅ | |
| Modal with timepicker | ✅ | |
| Drawer with timepicker | ✅ |
"In a garden of time, I hop and play,
With a Timepicker here, brightening the day!
Select hours and minutes, in styles galore,
From dropdowns to buttons, oh, what a score!
With each tick and tock, my joy's on display,
Let's celebrate time in a whimsical way! 🐇✨"
vercel[bot]
commented
1 month ago The latest updates on your projects. Learn more about Vercel for Git ↗︎
| Name | Status | Preview | Comments | Updated (UTC) |
|---|---|---|---|---|
| flowbite-svelte | ✅ Ready (Inspect) | Visit Preview | 💬 Add feedback | Oct 19, 2024 1:09pm |
shinokada
commented
1 month ago Thank you for your PR. I had a quick look and the followings are what I found.
When I select a date, it doesn't highlight. Also when I click outside, the letter primary color disappear.
Same issues as Inline timepicker buttons
As you see in the following image, it has wider space between day and time.
Chizaruu
commented
1 month ago Thank you for your PR. I had a quick look and the followings are what I found.
Default timepicker
1. When I click outside to close the dropdown, the selected goes back to 00:00. 2. Above issue happens when you change the selected time.
Default Timepicker doesn't have a dropdown, so I'm struggling to replicate it.
Inline timepicker buttons
When I select a date, it doesn't highlight. Also when I click outside, the letter primary color disappear.
Modal with timepicker
Same issues as Inline timepicker buttons
This is an issue with the Datepicker component, isSelected(day) isn't reactive, so the selected button's color isn't being updated with the component being open | inline
I submitted a PR addressing this issue. https://github.com/themesberg/flowbite-svelte/pull/1466
function isSameDate(date1: Date | null, date2: Date | null): boolean {
if (!date1 || !date2) return false;
return date1.toDateString() === date2.toDateString();
}
$: isSelected = (day: Date): boolean => {
if (range) {
return isSameDate(day, rangeFrom) || isSameDate(day, rangeTo);
}
return isSameDate(day, value);
};Drawer with timepicker
As you see in the following image, it has wider space between day and time.
Sorry, visual design isn't my strong suit. 😅 I've submitted a commit that should be more pleasant to the eye.
shinokada
commented
3 weeks ago Please let me know when it is ready.
Chizaruu
commented
3 weeks ago Please let me know when it is ready.
It looks okay to me. Please let me know if you have anything you want me to add/change. :)
shinokada
commented
3 weeks ago hover:cursor-pointer.Chizaruu
commented
3 weeks ago
- When I click outside to close, the time selected goes back to 00:00.
That is weird. I'll test this out and try to stop it from happening.
- Sometimes, when I click the inside field, the dropdown doesn't open. I noticed that I have to click between numbers and right icon. This means clicking a number doesn't open a dropdown. Is it possible to open the dropdown when a user clicks anywhere in the field?
Ah, by chance, are you using Google Chrome for development? I usually develop using Firefox, which means this may be a browser compatibility issue. I'll see if I can sort this out soon.
- Hover doesn't change to a pointer. It needs
hover:cursor-pointer.
I'll add this in tomorrow afternoon (AEDT). soon.
Closes #1293
📑 Description
This Pull Request adds a fully functional Timepicker.
https://flowbite.com/docs/forms/timepicker/
Status
✅ Checks
ℹ Additional Information
Summary by CodeRabbit
Release Notes
New Features
Timepickercomponent for flexible time selection, supporting various modes such as dropdown, range, and inline buttons.Timepickercomponent.Bug Fixes
Timepickercomponent to ensure proper functionality.Chores
package.jsonto include the newTimepickercomponent in the exports.Timepickercomponent's properties and events.