Merge pull request #30 from marcosrjjunior/27-removing_option_tweak

#27 - Removing option tweak

Author: wesleyhf

example/fire-select.css

@@ -13,14 +13,16 @@
   .fire-select-box.multiple .fire-selected-item:not(.empty) {
     display: inline-block;
     font-size: 14px;
-    padding: 2px 5px;
+    padding: 2px 1px 2px 5px;
     margin: 3px 0 3px 3px;
     border: 1px solid #ccc; }
     .fire-select-box.multiple .fire-selected-item:not(.empty)::after {
       display: none; }
     .fire-select-box.multiple .fire-selected-item:not(.empty) > b {
+      border-left: 1px solid #B7B7B7;
       float: none;
-      margin: 0; }
+      margin: 0;
+      padding: 0 3px; }
 
 .fire-select-list,
 .fire-selected-list {

example/fire-select.js

@@ -1,5 +1,5 @@
 (function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
-module.exports = '<div\n    class="fire-select-box"\n    :class="{\n        \'multiple\': multiple,\n    }"\n    @click="open()"\n>\n    <ul class="fire-selected-list">\n        <li class="fire-selected-item empty" v-show="selected.length == 0">{{ placeholder }}</li>\n        <li class="fire-selected-item"\n            :class="{\n                \'animated\': animation\n            }"\n            :transition="animation ? \'bounce\' : \'\'"\n            v-for="option in selected"\n            @click.stop="multiple ? deselect(option) : open()"\n        >\n            {{ option.label }} <b @click.stop="deselect(option)">&times;</b>\n        </li>\n    </ul>\n\n    <ul class="fire-select-list" v-show="isOpen" transition="bounce">\n        <li class="fire-select-item-input">\n            <input\n                type="text"\n                class="fire-select-input"\n                :placeholder="helperMessage"\n                v-model="input"\n                v-el:input\n                @keyup.enter="index === null || index == -1 ? newOption() : select(index)"\n                @keydown.esc="close()"\n                @keydown.up.prevent="up()"\n                @keydown.down.prevent="down()"\n                @blur="close() | debounce 100"\n            >\n        </li>\n\n        <li class="fire-select-item"\n            v-if="input && create"\n            @click="newOption()"\n            :class="{\n                \'hover\': index == -1,\n            }"\n        >\n            {{ pressEnterLabel }} <b>{{ input }}</b>\n        </li>\n\n        <li class="fire-select-item" v-if="tips.length == 0 && ! create">\n            {{ noResultsLabel }} <b>{{ input }}</b>\n        </li>\n\n        <li\n            class="fire-select-item"\n            v-for="option in tips"\n            @click.stop="select(option)"\n            @mouseover="index = null"\n            :class="{\n                \'hover\': $index == index,\n            }"\n        >\n            {{{ option.label | highlight }}}\n        </li>\n    </ul>\n\n    <select :name="name" :id="id" multiple style="display: none;">\n        <option :value="option.value" selected v-for="option in selected">{{ option.label }}</option>\n    </select>\n</div>\n';
+module.exports = '<div\n    class="fire-select-box"\n    :class="{\n        \'multiple\': multiple,\n    }"\n    @click="open()"\n>\n    <ul class="fire-selected-list">\n        <li class="fire-selected-item empty" v-show="selected.length == 0">{{ placeholder }}</li>\n        <li class="fire-selected-item"\n            :class="{\n                \'animated\': animation\n            }"\n            :transition="animation ? \'bounce\' : \'\'"\n            v-for="option in selected"\n            @click.stop="open()"\n        >\n            {{ option.label }} <b @click.stop="deselect(option)">&times;</b>\n        </li>\n    </ul>\n\n    <ul class="fire-select-list" v-show="isOpen" transition="bounce">\n        <li class="fire-select-item-input">\n            <input\n                type="text"\n                class="fire-select-input"\n                :placeholder="helperMessage"\n                v-model="input"\n                v-el:input\n                @keyup.enter="index === null || index == -1 ? newOption() : select(index)"\n                @keydown.esc="close()"\n                @keydown.up.prevent="up()"\n                @keydown.down.prevent="down()"\n                @blur="close() | debounce 100"\n            >\n        </li>\n\n        <li class="fire-select-item"\n            v-if="input && create"\n            @click="newOption()"\n            :class="{\n                \'hover\': index == -1,\n            }"\n        >\n            {{ pressEnterLabel }} <b>{{ input }}</b>\n        </li>\n\n        <li class="fire-select-item" v-if="tips.length == 0 && ! create">\n            {{ noResultsLabel }} <b>{{ input }}</b>\n        </li>\n\n        <li\n            class="fire-select-item"\n            v-for="option in tips"\n            @click.stop="select(option)"\n            @mouseover="index = null"\n            :class="{\n                \'hover\': $index == index,\n            }"\n        >\n            {{{ option.label | highlight }}}\n        </li>\n    </ul>\n\n    <select :name="name" :id="id" multiple style="display: none;">\n        <option :value="option.value" selected v-for="option in selected">{{ option.label }}</option>\n    </select>\n</div>\n';
 },{}],2:[function(require,module,exports){
 'use strict';
 

src/fire-select.html

@@ -13,7 +13,7 @@
             }"
             :transition="animation ? 'bounce' : ''"
             v-for="option in selected"
-            @click.stop="multiple ? deselect(option) : open()"
+            @click.stop="open()"
         >
             {{ option.label }} <b @click.stop="deselect(option)">&times;</b>
         </li>

src/fire-select.scss

@@ -24,7 +24,7 @@
         .fire-selected-item:not(.empty) {
             display: inline-block;
             font-size: 14px;
-            padding: 2px 5px;
+            padding: 2px 1px 2px 5px;
             margin: 3px 0 3px 3px;
             border: 1px solid #ccc;
 
@@ -33,8 +33,10 @@
             }
 
             & > b {
+                border-left: 1px solid #B7B7B7;
                 float: none;
                 margin: 0;
+                padding: 0 3px;
             }
         }
     }