Combobox

import ProximaCombobox from 'proxima-vue/field/combobox';

import { ref } from 'vue';
import ProximaCombobox from 'proxima-vue/field/combobox';

const value = ref();
const candidates = [
  { person: { fullname: 'Hal Finney' } },
  { person: { fullname: 'Nick Szabo' } },
  { person: { fullname: 'Adam Back' } },
  { person: { fullname: 'Len Sassaman' } },
  { person: { fullname: 'Bram Cohen' } },
  { person: { fullname: 'Dorian Nakamoto' } },
  { person: { fullname: 'Craig Wright' } },
  { person: { fullname: 'Elon Musk' } },
];

import { ref } from 'vue';
import ProximaCombobox from 'proxima-vue/field/combobox';

const findCoinByNameAndCode = (option, query) => {
  const str = [option.name, option.code].join(' ').toLowerCase();
  return str.includes(query.toLowerCase());
};

const value = ref();
const coins = [
  { name: 'Tether (TRC-20)', code: 'usdt' },
  { name: 'Bitcoin', code: 'btc' },
  { name: 'Toncoin', code: 'ton' },
  { name: 'Dogecoin', code: 'doge' },
  { name: 'Ethereum', code: 'eth' },
  { name: 'Litecoin', code: 'ltc' },
  { name: 'Dash', code: 'dash' },
  { name: 'Chia', code: 'xch' },
];

import { ref } from 'vue';
import ProximaCombobox from 'proxima-vue/field/combobox';

const pinGreatPersons = (name) => name.toLowerCase().includes('great');

const value = ref();
const options = ['Ivan III', 'Vasili III', 'Ivan IV Vasilyevich', 'Feodor I', 'Boris Godunov', 'Feodor II', 'False Dmitry I', 'Vasili IV', 'Fedor Mstislavsky', 'Michael I', 'Alexei Mikhailovich', 'Feodor III', 'Ivan V', 'Sophia Alekseyevna', 'Peter the Great', 'Catherine I', 'Peter II', 'Anna Ioannovna', 'Ivan VI', 'Elizaveta Petrovna', 'Peter III', 'Catherine the Great', 'Paul I', 'Alexander I', 'Nicholas I', 'Alexander II', 'Alexander III', 'Nicholas II'];

import { ref } from 'vue';
import ProximaCombobox from 'proxima-vue/field/combobox';

const disablePersons = (name) => name.toLowerCase().includes('ivan');

const value = ref();
const options = ['Ivan III', 'Vasili III', 'Ivan IV Vasilyevich', 'Feodor I', 'Boris Godunov', 'Feodor II', 'False Dmitry I', 'Vasili IV', 'Fedor Mstislavsky', 'Michael I', 'Alexei Mikhailovich', 'Feodor III', 'Ivan V', 'Sophia Alekseyevna', 'Peter the Great', 'Catherine I', 'Peter II', 'Anna Ioannovna', 'Ivan VI', 'Elizaveta Petrovna', 'Peter III', 'Catherine the Great', 'Paul I', 'Alexander I', 'Nicholas I', 'Alexander II', 'Alexander III', 'Nicholas II'];

import { ref, unref } from 'vue';
import ProximaCombobox from 'proxima-vue/field/combobox';

const city = ref();
const cities = ref(['Saint Petersburg', 'Barcelona', 'New York']);

const createAndSelect = (name) => {
  unref(cities).push(name);
  city.value = name;
};

import { ref } from 'vue';
import ProximaCombobox from 'proxima-vue/field/combobox';
import useProximaFlySearch from 'proxima-vue/composables/flySearch';

const country = ref();

const findCountry = async (query) => {
  const response = await fetch(`https://mocky.yoobe.ru/countries/find?name=${query}`);
  const results = await response.json();
  return results;
};

const { isFlySearchPending, onFlySearchUpdate, flySearchResults } =
  useProximaFlySearch(findCountry);

{
  fieldCreateLabel: "Create “{query}”",
  fieldCreateDescription: "Press Enter to create and select “{query}”",
  fieldNotfoundLabel: "Nothing was found",
  fieldFilterCountLabel: "Showing {visibleCount} of {totalCount} items, refine your request to see the rest",
}