Comments (2)
So thinking more on this I don't think it's actually a bug — when you modify the attr
directly you're literally adding the string $remove:text-orange
. There is no more parsing to be done. The parsed list is what is contained is classes.outer
.
Alternatives:
- Do your
$remove:
at the config level if possible - Do
$remove
via the component props which are part of the parsed pathway and end up becoming theclasses.outer
list. https://formkit.link/8126ad0dee4016979f9a62d0822701fb - Use a
feature
(a plugin that is not inherited by children) to make modifications to the node as part of its definition: https://formkit.link/cffe8a25420a66efc371c01bfaf1bb00
from formkit.
Got it, thank you for your answer!
I think it might be interesting to improve the DX here. Note that I use the conditional here, I'm still learning FormKit and it's totally possible there are very good reasons unknown to me why this is not possible.
First, the string concatenation is not very intuitive / cumbersome. "$classes.outer + ' other-class'"
works, but your brain really wants to write "$classes.outer other-class"
.
I was also sure it was possible to manipulate the $classes.outer
in a way or another... and I tested a lot of things before asking on Discord (you know, the there must be a way to do it feeling).
What came to my mind at first glance when I was looking for a solution was:
- Obviously,
$classes.outer $remove:text-orange
, but then the problem of "removetext-orange
from where?$classes.outer
? What if there are multiple class pools concatened? - So maybe something like
$classes.outer.replace('text-orange', '')
, but I know, it's not javascript, it's explained in the doc (Although it looks very much like JavaScript — schema expressions are not JavaScript. They are better thought of as a templating language) :p It's tempting through. - Maybe
$remove
could be available in$fns
? It's currently not, but since there are functions inside it, is there a way to implement something like$fns.remove($classes.outer, 'text-orange')
? - Maybe it could be possible to access the
$classes.outer
output in JS, manipulate it and then use it in theattrs.class
property. This point is interesting, I think accessing the final classes of a particular section could be awesome (using a helper function, a node function or anything else).
That was feedback as a newcomer writing his first inputs. For now I managed to progress without all that so it's obviously not mandatory :p
Have a nice day!
from formkit.
Related Issues (20)
- Clicking on this area will not trigger the Select menu
- formkit/i18n: Validation rule's message is incorrect when using array syntax for the validation
- `autocomplete`: Async options not filterable HOT 5
- Mask input and autocomplete failing validation HOT 1
- Errors don't show with more groups HOT 3
- Repeater should consistently render when the default slot is empty HOT 1
- Mixed order of identical items in dynamic list
- <FormKit type="mask"> renders <input type="mask"> HOT 3
- datetime-local field with initial value resets itself in firefox after the entry of a 0
- FormKit datepicker component: enter key submits the form and display the calendar popup
- `childRemoved` event not triggered for type list HOT 1
- setting Buddist locale breaks datepicker HOT 2
- Changing `datepicker` value makes it to autofocus on Safari
- Pro Inputs - Potential Memory Leak Issue HOT 1
- blur() doesn't remove focused attributes such as highlighted border and text inputs remain focused.
- icon-click does not trigger on keyboard action
- When using Schema, fields rendered within a `children` slot of a custom component don't have access to `$value.xxx`
- Form nodes not retrievable via getNode() or useFormKitNodeById() after component re-render on locale change.
- Support for extra units for the Unit Input
- Autocomplete input - selected option is not reactive with selection-appearance=text
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from formkit.