Skip to content

Improve and make consistent chips' data object #67

@evansharp

Description

@evansharp

Let's restructure the chip data object so that it is more consistent within the module and easier to model on the server side.

Expected & Current Behavior

Currently chips have no built-in capacity for numeric ids and have two different data structures depending on what you're doing.

If chips "represent small blocks of information. They are most commonly used either for contacts or for tags." (from the docs), then let's make them easier to work with as db-savable records without having to do string-comparisons on the tag text.

If the two current data structures look like:

// when initializing a chips component with existing data
[{
    tag: 'Apple',
}, {
    tag: 'Microsoft',
}, {
    tag: 'Google',
}]

// when initializing autocomplete options
{
    'Apple': null,
    'Microsoft': null,
    'Google': null
}

Then let's update them to be both more semantic, consistent, and functional for modelling:

// init a chips component with existing data OR define a set of autocomplete options with
[{
    tag: 'Apple',
    id: 1,
    image: null
}, {
    tag: 'Microsoft',
    id: 2,
    image: null
}, {
    tag: 'Google',
    id: 3,
    image: null
}]

Possible Solution

Part of this is shown-off in a well-travelled Stack Overflow answer that patches v1.0.0 to support an id property for autocomplete.

This could be a starting point as it does provide the desired functionality. I have this hack working on a personal project currently, but it requires additional hacky workarounds for the two different data structures.

I can start this feature in a fork if there is traction, but I've never worked on a project with a build pipeline before and my JS may not be up to what's required here.

Your Environment

  • Version used: 1.0.0
  • Browser Name and version: all
  • Operating System and version (desktop or mobile): either
  • Link to your project (if appropriate): ? https://prism.evansharp.ca/

Metadata

Metadata

Assignees

No one assigned

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions