Replies: 21 comments 30 replies
-
|
It would be nice to know what the changes are, so we know what could be tested. Otherwise it's just shots in the dark. |
Beta Was this translation helpful? Give feedback.
-
|
Yes of course. I will write the full changelog as soon as I can. The commits are here: Also regardless of v5 changes, I would like to receive feedbacks and ideas about the the existing things from v4 that I can improve in v5. |
Beta Was this translation helpful? Give feedback.
-
|
I love DaisyUI. I suggest a date picker. |
Beta Was this translation helpful? Give feedback.
-
|
absolutely, datepicker is the hardest component though to do |
Beta Was this translation helpful? Give feedback.
-
|
Hey there , Date and Calendar most important for development, I also not find multi select, I see these in future |
Beta Was this translation helpful? Give feedback.
-
|
Hi! I would like to see progress with percentage feedback |
Beta Was this translation helpful? Give feedback.
-
|
Like a tooltip, showing a number? |
Beta Was this translation helpful? Give feedback.
-
|
yep! seems great |
Beta Was this translation helpful? Give feedback.
-
|
You would need some JS to get the value of range input and show it in the tooltip: |
Beta Was this translation helpful? Give feedback.
-
|
A context menu (https://primeng.org/contextmenu) would be very pog |
Beta Was this translation helpful? Give feedback.
-
|
That is pretty interesting |
Beta Was this translation helpful? Give feedback.
-
|
I suggest Select with search, for example.
I made the gif component using input + dropdown from DaisyUI S2. |
Beta Was this translation helpful? Give feedback.
-
|
The broser has some nice features supporting this https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist |
Beta Was this translation helpful? Give feedback.
-
|
datalist cannot be styled. |
Beta Was this translation helpful? Give feedback.
-
|
Well, for those who need to use select search without waiting for the new version of DaisyUI, I managed to make one that, in my opinion, was good, but using hook forms. Use const { register, handleSubmit, formState: { errors }, watch } = useForm();
<SelectSearch
className="w-full"
name="country"
placeholder="Busque pelo país"
contentText="Digite pelo menos 3 caracteres para buscar"
inputChange={handleSearchCountry}
loading={loading}
options={countries?.map((country) => ({ label: country.native, value: country.id }))}
register={register("country", {
required: { value: true, message: "O país é obrigatório" }
})}
errors={errors}
/>Component import { Search } from "lucide-react";
import React, { useRef, useState } from "react";
import { FieldErrors, FieldValues, UseFormRegisterReturn } from "react-hook-form";
export type Option = {
label: string;
value: any;
};
export type SelectSearchProps = {
name: string;
className?: string;
placeholder?: string;
contentText?: string;
inputChange?: (event: React.ChangeEvent<HTMLInputElement>) => void;
options?: Option[];
loading?: boolean;
register?: UseFormRegisterReturn<string>;
errors?: FieldErrors<FieldValues>;
};
export const SelectSearch: React.FC<SelectSearchProps> = ({ name, ...props }) => {
const { className, placeholder, contentText, inputChange, options, loading, register, errors } = props;
const divRef = useRef<HTMLDivElement>(null);
const inputShowRef = useRef<HTMLInputElement>(null);
const [ required ] = useState<boolean>(register?.required || false);
const isError = errors && register && errors[register.name]
function handleSelectItem(option: Option) {
if (inputShowRef.current) inputShowRef.current!.value = option.label;
removeFocusDiv();
register?.onChange({ target: { name, value: option.value } });
}
function handleBlur(e: any) {
const value = e.target.value;
if (options?.find((option) => option.label === value)) {
return;
}
if (inputShowRef.current) {
inputShowRef.current.value = "";
register?.onChange({ target: { name, value: "" } });
}
}
function handleOnChange(e: any) {
const value = e.target.value;
inputChange && inputChange(value);
}
function removeFocusDiv() {
divRef.current?.focus();
divRef.current?.blur();
}
return (
<>
<div tabIndex={-1} className="dropdown" ref={divRef}>
<label className={`input input-bordered flex items-center gap-2 ${className} ${isError ? "input-error" : "input-primary"}`} >
<input ref={inputShowRef} type="text" className="grow" placeholder={placeholder} onChange={handleOnChange} onBlur={handleBlur} required={required} />
<select className="hidden" {...register}>
{
options?.map((option, index) =>
<option key={index} value={option.value}>
{option.label}
</option>
)
}
</select>
<Search size={22} className="text-base" />
</label>
<ul
tabIndex={0}
className="dropdown-content dropdown-open z-10 menu p-2 shadow bg-base-100 rounded-box w-full"
>
{
loading && <span className="loading loading-spinner loading-md text-primary mx-auto py-4"></span>
}
{
!loading && options && options?.map((option, index) =>
<li key={index} onClick={() => handleSelectItem(option)}>
<a>
{option.label}
</a>
</li>
)
}
{
!loading && !options?.length &&
<li className="text-center text-sm py-6">
{ contentText }
</li>
}
</ul>
</div>
{
isError &&
<span className="w-full text-start text-error text-sm"> {`${errors[register.name]?.message}`} </span>
}
</>
)
} |
Beta Was this translation helpful? Give feedback.
-
Datalists are nice, but I need ID/label pairs which doesn't work sadly. |
Beta Was this translation helpful? Give feedback.
-
|
Would love to see a way to control state for inputs like So for example, something like this would be super handy for me to control props and styling with.
|
Beta Was this translation helpful? Give feedback.
-
|
The new "shiny" effect on buttons should be optional, not used as default.
|
Beta Was this translation helpful? Give feedback.
-
|
@saadeghi yeah the shiny style looks a little bit off with the flat design, if put into different context (background) it would look better |
Beta Was this translation helpful? Give feedback.
-
|
I'm improving the design ✅ This is not final |
Beta Was this translation helpful? Give feedback.
-
I'm not saying that is bad. It just does not fit to flat style of daisyUI, that I love ❤️ I believe CSS styles are like fashion trends—they come back around every 10-20 years :P |
Beta Was this translation helpful? Give feedback.
-
|
In all seriousness it would be great 🙏 to easily keep the same visual appearance for existing apps. Predictability and consistency is an under-rated feature (and avoids me being told off by my company's design team)! Many thanks for all that you do - DaisyUI is genuinely impressive. |
Beta Was this translation helpful? Give feedback.
-
|
I also observed this shiny effect on checkboxes and radio buttons. It doesn't look modern. Sure, the trend may come back, but I want to build apps that look good according to current trends, not the trends 15 years earlier or later from today. DaisyUI 4 styles are optimal for this. |
Beta Was this translation helpful? Give feedback.
-
|
I will suggest the date picker with range date definition. Example you can select only the date from range. |
Beta Was this translation helpful? Give feedback.
-
|
Animating progress and radial progress bar. For radial progress bar I've managed to upgrade my previous attempt on the problem #3206 by using some javascript (edit: sorry for angular notation)
|
Beta Was this translation helpful? Give feedback.
-
|
Working with table I see a little problem with the table-zebra class, I have a bg-color set to the specifi case where I need to change a bg color for entry. Maybe you can add a important tag for bg color? |
Beta Was this translation helpful? Give feedback.
-
|
Are you guys planning to add Combo boxes? (select + text field search) |
Beta Was this translation helpful? Give feedback.
-
|
If u need #3246 (reply in thread) |
Beta Was this translation helpful? Give feedback.
-
|
Ability to extend the colors, base-400, base-500 etc would be great |
Beta Was this translation helpful? Give feedback.
-
|
Same with using the standard tailwind colors in the buttons and other components. |
Beta Was this translation helpful? Give feedback.
-
|
I've been able to extend the base colours fine by using variables and then adding it the tailwind config. For example, in my custom 'light' theme I have this code in the daisyui block: then I just 'extend' the base-400 into the tailwind colours (along with my other custom colours): Using this approach you can put as many extra base numbers as you want (-500,-600,-700...). They are used in the same way all the other colours are used: bg-base-400, text-content-200, bg-muted/80 e.t.c. |
Beta Was this translation helpful? Give feedback.
-
|
This will be even easier in daisyUI 5 |
Beta Was this translation helpful? Give feedback.
-
I don't think VanillaFramework use any JS to achieve this. I am kind of assuming it's feasible for DaisyUI too. Lastly, thank you so much for all your hard work and sacrifices in creating this for us. |
Beta Was this translation helpful? Give feedback.
-
|
Just wanted to say thank you so much for this incredible project. Looking forward to the animated progress components ❤️ |
Beta Was this translation helpful? Give feedback.
-
|
I really like the range sliders. |
Beta Was this translation helpful? Give feedback.
-
|
Agreed. A dual range slider is very much needed |
Beta Was this translation helpful? Give feedback.
-
|
I would suggest expanding the semantic color palette in DaisyUI by incorporating additional options such as red, green, blue, orange, yellow, cyan, and others, following a similar approach to Tailwind These new semantic colors, defined within each DaisyUI theme, would automatically adapt to the active theme, allowing developers to use them via classes as easily as the existing color variables (primary, secondary, accent). |
Beta Was this translation helpful? Give feedback.
-
|
You can already use Tailwind colors. The whole point of daisyUI color names like If you want a color to always be blue regardless of the theme, you can still use Tailwind colors like Read more: |
Beta Was this translation helpful? Give feedback.
-
|
A floating label input variation would be nice |
Beta Was this translation helpful? Give feedback.
-
|
I know it's off-topic, but also a faster website, cause only DaisyUI documentation tends to be slow for me, sometimes really slow... 😢 (Germany; both Arc and Chrome) |
Beta Was this translation helpful? Give feedback.
-
|
@eokic daisyUI docs is just static files hosted on GitHub Pages. |
Beta Was this translation helpful? Give feedback.
-
Same in Firefox. With the same network, can't reproduce on mobile atm. Will try again later. EDIT: marked an incorrect spot there, but you can see seconds/minutes around it. No throttling enabled, just checked.
|
Beta Was this translation helpful? Give feedback.
-
|
I had issues with slow downloading from github when I was living in DE. You can try to use VPN. That was helping in my case. I'm 99% sure that the problem lies somewhere on route between github and your home. |
Beta Was this translation helpful? Give feedback.
-
|
@Avaray thanks for the tip! Now I'm definitely intrigued as I'm at the NL & BE border. In DE, I'm on Telekom (supposedly the most reliable ISP? 🤷🏻) but nothing would surprise me. |
Beta Was this translation helpful? Give feedback.
-
|
Maybe this is the issue: https://www.msn.com/en-us/money/companies/two-undersea-cables-in-baltic-sea-cut-germany-and-finland-fear-sabotage/ar-AA1ujCdD |
Beta Was this translation helpful? Give feedback.
-
|
|
Beta Was this translation helpful? Give feedback.
-
|
I would like to add such a secondary menu |
Beta Was this translation helpful? Give feedback.
and others
-
Hello and welcome 💚
daisyUI 5 is in development [v5 branch]
Try it
You can try this Tailwind Play link which includes a big dump of components
Or you can try the new full.css or the new chunks.css!
Or if you're brave enough to try Tailwind CSS 4 alpha + daisyUI 5 alpha,
Install Tailwind CSS 4
alphaand then install daisyUIalphaYour CSS file:
Use options
Add a custom theme
Feedbacks needed
Here's how you can help:
Put your comments 👇
Beta Was this translation helpful? Give feedback.
All reactions