Giter Club home page Giter Club logo

ember-tag-input's Introduction

ember-tag-input

ember-tag-input is a simple Ember addon that converts a user's typing into tags. New tags are created when the user types a comma, space, or hits the enter key. Tags can be removed using the backspace key or by clicking the x button on each tag.

Usage

In the simplest case, just pass a list of tags to render and actions for adding and removing tags. The component will never change the tags list for you, it will instead call actions when changes need to be made. The component will yield each tag in the list, allowing you to render it as you wish.

<TagInput
  @tags={{this.tags}}
  @addTag={{this.addTag}}
  @removeTagAtIndex={{this.removeTagAtIndex}}
  as |tag|
>
  {{tag}}
</TagInput>
import Controller from '@ember/controller';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class ApplicationController extends Controller {
  @tracked tags = [];

  @action addTag(tag) {
    this.tags.pushObject(tag);
  }

  @action removeTagAtIndex(index) {
    this.tags.removeAt(index);
  }
}

The above example works if your tags array is just an simple array of strings. If your tags are more complex objects, you can render them however you want, as demonstrated by the following example:

<TagInput
  @tags={{this.tags}}
  @addTag={{this.addTag}}
  @removeTagAtIndex={{this.removeTagAtIndex}}
  as |tag|
>
  <div class="tagInput-name">
    {{tag.name}}
  </div>
  <div class="tagInput-date">
    {{tag.date}}
  </div>
</TagInput>

If you pass tags objects, you can use the modifiers property to pass extra classes to individual tags:

tags = A([
  { name: 'first', modifiers: 'primaryTag' },
  { name: 'second', modifiers: 'secondaryTag' },
]);

Options

tags

  • An array of tags to render.
  • default: null

removeConfirmation

  • Whether or not it takes two presses of the backspace key to remove a tag. When enabled, the first backspace press will add the class emberTagInput-tag--remove to the element that is about to be removed.
  • default: true

allowCommaInTags

  • If tags are allowed to contain comma.
  • default: false

allowSpacesInTags

  • If tags are allowed to contain spaces.
  • default: false

allowDuplicates

  • If duplicates tags are allowed in the list.
  • default: false

showRemoveButtons

  • If 'x' removal links should be displayed at the right side of each tag.
  • default: true

placeholder

  • The placeholder text to display when the user hasn't typed anything. Isn't displayed if readOnly=true.
  • default: ''

ariaLabel

  • The aria-label for the input field.
  • default: ''

readOnly

  • If a read only view of the tags should be displayed. If enabled, existing tags can't be removed and new tags can't be added.
  • default: false

maxlength

  • If maxlength value is passed in, each <input> field(tag) will have maximum number of characters allowed.
  • default: ''

Actions

addTag

  • This action will get called when the user is trying to add a new tag. Your implementation should either add the tag to the tags array or return false if the tag wasn't added.
  • parameters: tag

removeTagAtIndex

  • This action will get called when the user is trying to remove a tag. Your implementation should remove the element from the tags array at the specified index.
  • parameters: index

onKeyUp

  • This action will get called after each key press.
  • parameters: currentInputValue

ember-tag-input's People

Contributors

brianjgeiger avatar calvin-fb avatar calvinlough avatar charlesfries avatar demirhanaydin avatar dependabot-preview[bot] avatar dependabot[bot] avatar github-actions[bot] avatar ianknauer avatar ranzem avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar

ember-tag-input's Issues

Published NPM Package is gigantic

Hi there, was just doing a bundle size audit and it came up that the bundle size of this package is >100MB

image

image

The 2.0.0 package seems to have been published with a full node_modules directory embedded.

Looks like this was a change between 1.2.2 and 2.0.0.

Disabled Mode

it would be great if disable mode is added
There can be an option like disabled=true or disabled=false

Aria Labels

For accessibility, all input fields need labels of some kind. Our design doesn't work with a wrapping label, so it would be awesome to have the ability to use an aria label option in the control.

would be nice to have tags as objects

Right now

image

{{tag-input
  tags=selectedItems
  property='title'
}}

would be nice to include property attr, that will look for that property inside 'selectedItems' array.

Cannot read property 'indexOf' of undefined

hi - i'm getting the following error:

tag-input.js:53 Uncaught TypeError: Cannot read property 'indexOf' of undefined
    at Class.addNewTag (tag-input.js:53)
    at HTMLInputElement.<anonymous> (tag-input.js:92)
    at HTMLInputElement.dispatch (jquery.js:5206)
    at HTMLInputElement.elemData.handle (jquery.js:5014)

If i set the tags array as [], i receive this error as soon as i hit a seperator key (enter, space, etc). If i populate the tags array, the input looks great (blue bubbles with close) but same thing happens when i begin typing.

implemented like so, where gear.sportList is an empty array

{{#tag-input
	  tags=gear.sportList
	  addTag=(action 'addTag')
	  removeTagAtIndex=(action 'removeTagAtIndex')
	  as |tag|
	}}
	  {{tag}}
	{{/tag-input}}

my actions are implemented as in the example ... any advice?

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.