import Vue from 'vue'; import VueApollo from 'vue-apollo'; import createDefaultClient from '~/lib/graphql'; import TopicsTokenSelector from './components/topics_token_selector.vue'; Vue.use(VueApollo); const apolloProvider = new VueApollo({ defaultClient: createDefaultClient(), }); export default () => { const el = document.querySelector('.js-topics-selector'); if (!el) return null; const { hiddenInputId } = el.dataset; const hiddenInput = document.getElementById(hiddenInputId); const selected = hiddenInput.value ? hiddenInput.value.split(/,\s*/).map((token, index) => ({ id: index, name: token, })) : []; return new Vue({ el, apolloProvider, render(createElement) { return createElement(TopicsTokenSelector, { props: { selected, }, on: { update(tokens) { const value = tokens.map(({ name }) => name).join(', '); hiddenInput.value = value; // Dispatch `input` event so form submit button becomes active hiddenInput.dispatchEvent( new Event('input', { bubbles: true, cancelable: true, }), ); }, }, }); }, }); };