Thanks, your examples were very useful for the modals, which I still haven’t managed to get working as well as I want, but at least it gives me something to work with (I believe some of the “problems” are due to the fact that your examples use bootstrap 4 and I want to use bootstrap 5, which has some subtle differences. I had already managed to get the form validation functionality working by doing what @LostKobrakai had suggested (i.e. adding some extra scoping rules).
The hard part was dealing with the fact that to support all Bootswatch themes I had to find the default border color and focus shadow color for the form inputs, but I managed to scrape that from the bootswatch.css files using some hacky regexes and with that I managed to build the class overrides programmatically. This means I now have an end-to-end elixir script which can download the bootswatch.css files, extract the “no feedback” border colors and generate the class overrides which are either included as inline CSS in my components file (if the user decides to load bootswatch from a CDN) or append it (at build-time, obviously) to the static files if the user wants to serve the CSS files from the app.
For completeness:
- I’ve replaced heroicons with bootstrap icons for better integration, which I’m serving as inline CSS. Bootstrap already uses their own icons for form validation, and using bootstrap icons
- I’m working on defining a
PhoenixCoreComponentsbehaviour which should support all functionality used in the default phoenix generators so that one can use external CoreComponents files and have everything work seamlessly - I’ve made it so that the user can do the equivalent of
use Bootstrap5Componentsin theirMyAppWeb.CoreComponentsand have everything work by default, but also easily dump the original source code ofBootstrap5Componentsinto the file in order to override the default components. This uses my new project: CodeGen - simple, succint and customizable code generation for your libraries - #17 by tmbb
