Comments (5)
Yes, please! This would make it truly ready for primetime.
I've got multiple use cases dealing with DB data where the option text should be different from the value passed to an API. An example: six different locations with identical names, all in different places, each with a different ID... you'd better believe we go by the ID!
You might also consider a template of some sort for options. In my example case, options would be formatted something like this:
<Option>
[Location name] ([customer friendly ID])
[address line 1]
[city state zip]
<Button text="Remove">
</Option>
Something that customizable would come in very handy.
from svelte-multiselect.
@MelpomeneMU Thanks for the input! Considering this seems to be quite a popular feature, I'll try to start working on it this weekend.
Just to clarify your example, if there are six identically named places in different locations, you must already include some additional information (like country) for your users, right? Else how would they know which of the 6 to pick?
In any case, I do see the value of sending a different value than what is displayed to the user to an API.
Regarding the template string, I believe it would be easiest for devs to do that on their own. Most people just want to render simple strings, so seems overkill to ship the logic required to hydrate a template to everyone regardless of whether they need it or not. It should as simple as running a map()
over your array of options with some string interpolation to build the template you need yourself.
On a related note, we might consider parsing labels as HTML though with Svelte's {@html ...}
directive in case people want to have tags with inline styles or some such.
from svelte-multiselect.
Ok, I think I have something I would tentatively call a beta version of options as objects. Still a few TS issues to sort out. Will try to do some testing tomorrow.
from svelte-multiselect.
Turned out to be a bigger refactor than expected. I pushed everything to the object-options
branch. No known issues so would be great if everyone interested in this feature could give it a try and report bugs/suggestions before I release this as v2.0.0
.
yarn add -D https://github.com/janosh/svelte-multiselect#object-options
from svelte-multiselect.
This is released in v2.0.0. 🎉
Note the breaking changes mentioned in #16, mainly that bind:selected
now returns objects instead of strings. To get the strings as before, use bind:selectedLabels
.
from svelte-multiselect.
Related Issues (20)
- Change liSelectedClass background color for each option HOT 1
- When allowUserOptions={true} user can't enter custom option if it is a substring of an existing option HOT 2
- Can't force svelte-multiselect box to not grow HOT 9
- Request textDocument/hover failed. Code: -32603 HOT 3
- CSS framework styles are overriden HOT 3
- Can't resolve './types' HOT 11
- The where classes are overwriting the classes I am giving through props. HOT 2
- Fire specific event if `allowUserOptions` was used to create a new option HOT 1
- Close dropdown after selecting option HOT 7
- on:removeAll returns empty array HOT 1
- Hiding dropdown while retaining focus on input, and having a placeholder after first selection
- How to make added values only as string with allowUserOptions? HOT 3
- Customizing user message <li> HOT 1
- Change event that doesn't conform to type HOT 2
- Tailwind css dark mode classes not picked up when passed as props. HOT 2
- Svelte 5 support? HOT 1
- Required doesn't reset when input has been invalidated HOT 1
- Typescript - Error: Property 'value' does not exist on type 'Option'. Did you mean 'valueOf'? HOT 6
- Options background not changing color in dark mode HOT 3
- Options not showing after calling focus on input HOT 1
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 svelte-multiselect.