JSFiddle - React, Tailwind, and code Playground

by raymondralibi

HTML

<link rel="stylesheet" href="//unpkg.com/[email protected]/build/pure-min.css">
<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/[email protected]/index.js"></script>
<div id="app">
  <cmyk-select-demo></cmyk-select-demo>
</div>

CSS

li.selected {
  font-weight: bold;
}

table {
  width: 100%;
}

th, td {
  width: 33%;
  vertical-align: top;
}

Babel + JSX

Vue.use(VueMultipleSelectHelper)

Vue.component('cmyk-select-demo', {
  template: `
    <div class="c-cmyk-select-demo">

      <h5>CMYK Single</h5>

      <table class="pure-table">
        <thead>
          <tr>
            <th>
              Collection
            </th>
            <th>
              Recent Single Clicked
            </th>
            <th>
              Current Single Selection
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <multiple-select-helper
                :data="colors"
                :initialSelection="preselectedSingleColor"
                :multiple="false"
                v-model="clickedSingleColor"
                @selection-change="handleSingleSelectionChange">
                <ul v-for="color in colors">
                  <li :class="{selected: isSingleSelected(color)}">
                    <p>
                      {{ color.name }}
                      <button @click.prevent="clickedSingleColor = color">
                        {{ isSingleSelected(color) ? "Deselect" : "Select" }}
                      </button>
                    </p>
                  </li>
                </ul>
              </multiple-select-helper>
            </td>
            <td>
              <pre>{{ recentSingleColor }}</pre>
            </td>

            <td>
              <pre>{{ currentSingleSelection }}</pre>
            </td>
          </tr>
        </tbody>
      </table>

      <h5>CMYK Multiple</h5>

      <table class="pure-table">
        <thead>
          <tr>
            <th>
              Collection
            </th>
            <th>
              Recent Multiple Clicked
            </th>
            <th>
              Current Multiple Selection
            </th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>
              <multiple-select-helper
                :data="colors"
               ...