52 lines
1.3 KiB
JavaScript
52 lines
1.3 KiB
JavaScript
|
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,
|
||
|
|
}),
|
||
|
|
);
|
||
|
|
},
|
||
|
|
},
|
||
|
|
});
|
||
|
|
},
|
||
|
|
});
|
||
|
|
};
|