vue-select/docs/components/Sandbox.vue

<template>
  <div id="sandbox-wrap">
    <div id="config">
      <div class="list-item" v-if="!hideHelp">
        <p>
          Use the controls below to adjust the props used by the vue-select
          components.
        </p>
        <p>
          The API provides more props than are shown here, these are some
          commonly adjusted settings.
        </p>
      </div>

      <h5 class="list-item">Basic Features</h5>

      <div class="list-item">
        <label for="multiple">
          <input
            id="multiple"
            type="checkbox"
            v-model="configuration.multiple"
          />
          <code
            >:multiple="{{ configuration.multiple ? "true" : "false" }}"</code
          >
        </label>
      </div>

      <div class="list-item">
        <label for="disabled">
          <input
            id="disabled"
            type="checkbox"
            v-model="configuration.disabled"
          />
          <code
            >:disabled="{{ configuration.disabled ? "true" : "false" }}"</code
          >
        </label>
      </div>

      <div class="list-item">
        <label for="clearable">
          <input
            id="clearable"
            type="checkbox"
            v-model="configuration.clearable"
          />
          <code
            >:clearable="{{ configuration.clearable ? "true" : "false" }}"</code
          >
        </label>
      </div>

      <div class="list-item">
        <label for="searchable">
          <input
            id="searchable"
            type="checkbox"
            v-model="configuration.searchable"
          />
          <code
            >:searchable="{{
              configuration.searchable ? "true" : "false"
            }}"</code
          >
        </label>
      </div>

      <div class="list-item">
        <label for="filterable">
          <input
            id="filterable"
            type="checkbox"
            v-model="configuration.filterable"
          />
          <code
            >:filterable="{{
              configuration.searchable ? "true" : "false"
            }}"</code
          >
        </label>
      </div>

      <h5 class="list-item">Tagging</h5>

      <div class="list-item">
        <label for="taggable">
          <input
            id="taggable"
            type="checkbox"
            v-model="configuration.taggable"
          />
          <code
            >:taggable="{{ configuration.taggable ? "true" : "false" }}"</code
          >
        </label>
      </div>

      <div class="list-item">
        <label for="noDrop">
          <input id="noDrop" type="checkbox" v-model="configuration.noDrop" />
          <code>:no-drop="{{ configuration.noDrop ? "true" : "false" }}"</code>
        </label>
      </div>

      <div class="list-item">
        <label for="pushTags">
          <input
            id="pushTags"
            type="checkbox"
            v-model="configuration.pushTags"
          />
          <code
            >:push-tags="{{ configuration.pushTags ? "true" : "false" }}"</code
          >
        </label>
      </div>

      <h5 class="list-item">UX</h5>

      <div class="list-item">
        <label for="selectOnTab">
          <input
            id="selectOnTab"
            type="checkbox"
            v-model="configuration.selectOnTab"
          />
          <code
            >:select-on-tab="{{
              configuration.selectOnTab ? "true" : "false"
            }}"</code
          >
        </label>
      </div>

      <div class="list-item">
        <label for="closeOnSelect">
          <input
            id="closeOnSelect"
            type="checkbox"
            v-model="configuration.closeOnSelect"
          />
          <code
            >:close-on-select="{{
              configuration.closeOnSelect ? "true" : "false"
            }}"</code
          >
        </label>
      </div>

      <h5 class="list-item">Localization / i18n</h5>

      <div class="list-item">
        <label for="rtl">
          <input
            id="rtl"
            type="radio"
            v-model="configuration.dir"
            value="rtl"
          />
          <code>dir="rtl"</code>
        </label>
        <label for="ltr">
          <input
            id="ltr"
            type="radio"
            v-model="configuration.dir"
            value="ltr"
          />
          <code>dir="ltr"</code>
        </label>
      </div>
    </div>

    <div id="sandbox">
      <slot v-bind="configuration">
        <div class="example">
          <v-select
            v-bind="configuration"
            placeholder="country objects"
          ></v-select>
        </div>

        <div class="example">
          <v-select
            v-bind="configuration"
            placeholder="country objects, using option scoped slots"
          >
            <template slot="selected-option" slot-scope="{ label, value }">
              {{ label }} -- {{ value }}
            </template>
            <template slot="option" slot-scope="{ label, value }">
              {{ label }} ({{ value }})
            </template>
          </v-select>
        </div>

        <div class="example">
          <v-select
            v-bind="configuration"
            :options="['cat', 'dog', 'bear']"
            placeholder="string options, option slots"
          >
            <template slot="selected-option" slot-scope="{ label }">
              {{ label }}
            </template>
            <template slot="option" slot-scope="{ label }">
              {{ label }}
            </template>
          </v-select>
        </div>

        <div class="example">
          <v-select
            v-bind="configuration"
            :options="[1, 5, 10]"
            placeholder="options=[1,5,10]"
          ></v-select>
        </div>

        <div class="example">
          <v-select
            v-bind="configuration"
            label="title"
            :options="optionDataSets.books"
            :filter="fuseSearch"
            placeholder="advanced filtering w/ fuse.js + scoped slots"
          >
            <template slot="option" slot-scope="option">
              <strong>{{ option.title }}</strong
              ><br />
              <em>{{
                `${option.author.firstName} ${option.author.lastName}`
              }}</em>
            </template>
          </v-select>
        </div>

        <div class="example">
          <v-select
            v-bind="configuration"
            placeholder="search github repositories.."
            label="full_name"
            @search="search"
            :options="ajaxRes"
          >
          </v-select>
        </div>

        <div class="example">
          <v-select
            v-bind="configuration"
            :options="[]"
            placeholder="options=[]"
          ></v-select>
        </div>
      </slot>
    </div>
  </div>
</template>

<script>
import Fuse from "fuse.js";
import debounce from "lodash/debounce";
import vSelect from "../../src/components/Select.vue";
import countries from "../assets/data/countryCodes.js";
import books from "../assets/data/books.js";

const defaultConfig = () => ({
  options: countries,
  multiple: false,
  dir: "ltr",
  clearable: true,
  searchable: true,
  filterable: true,
  noDrop: false,
  closeOnSelect: true,
  disabled: false,
  selectOntab: false,
  placeholder: "Select a Country...",
});

export default {
  props: {
    hideHelp: {
      type: Boolean,
      default: false,
    },
  },
  components: { vSelect },
  data() {
    return {
      configuration: defaultConfig(),
      value: null,
      ajaxRes: [],
      people: [],
      optionDataSet: "countries",
      optionDataSets: {
        countries,
        books,
      },
    };
  },
  methods: {
    search(search, loading) {
      loading(true);
      this.getRepositories(search, loading, this);
    },
    searchPeople(search, loading) {
      loading(true);
      this.getPeople(loading, this);
    },
    getPeople: debounce((loading, vm) => {
      vm.$http.get(`https://reqres.in/api/users?per_page=10`).then((res) => {
        vm.people = res.data.data;
        loading(false);
      });
    }, 250),
    getRepositories: debounce((search, loading, vm) => {
      vm.$http
        .get(`https://api.github.com/search/repositories?q=${search}`)
        .then((res) => {
          vm.ajaxRes = res.data.items;
          loading(false);
        });
    }, 250),
  },
};
</script>

<style scoped>
#sandbox-wrap {
  min-height: 100%;
  display: grid;
  grid-template-columns: auto 75%;
  grid-template-rows: auto;
  grid-template-areas: "sidebar component";
}

#config {
  grid-area: sidebar;
  border-right: 1px solid #eaecef;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

#sandbox {
  grid-area: component;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.list-item {
  margin-top: 0;
  margin-bottom: 1rem;
  padding: 1rem 1rem 0;
}

.list-item:not(:first-child) {
  border-top: 1px solid #eaecef;
}

.example {
  margin-bottom: 2rem;
}

.v-select {
  width: 25em;
}
</style>