미디어위키:Gadget-preview-params.js

$('.mw-editform .editOptions').after('<div class="preview-params" />');
const isNullish = (v, then, el) => ((v !== undefined && v !== null)? then(v) : el);
const form = $('form.mw-editform')[0];
const url = new URL(form.action);
const originalSearch = url.search;
const {createMwApp, defineComponent} = require('vue');	
const {CdxField, CdxTextInput, CdxButton, CdxIcon} = require('@wikimedia/codex');
//const {cdxIconAdd, cdxIconTrash} = require('@wikimedia/codex-icons');
const cdxIconAdd = '<path d="M11 9V4H9v5H4v2h5v5h2v-5h5V9z"/>';
const cdxIconTrash = '<path d="M17 2h-3.5l-1-1h-5l-1 1H3v2h14zM4 17a2 2 0 002 2h8a2 2 0 002-2V5H4z"/>';
const ParamField = defineComponent({
	name: 'param-field',
	components: {CdxField, CdxTextInput, CdxButton, CdxIcon},
	props: {
		param: String,
		value: String
	},
	data() {
		return {cdxIconTrash};
	},
	emits: ['update:param', 'update:value', 'destroy'],
	template: `
		<cdx-field
			class="param-field"
			:is-fieldset="true"
		>
			<cdx-field class="param-field--key-field">
				<template #label>키</template>
				<cdx-text-input
					placeholder="키"
					:model-value="param"
					@update:model-value="newparam => $emit('update:param', newparam)"
				/>
			</cdx-field>
			<div class="param-field--middle-eq">=</div>
			<cdx-field class="param-field--value-field">
				<template #label>값</template>
				<cdx-text-input
					placeholder="값"
					:model-value="value"
					@update:model-value="newvalue => $emit('update:value', newvalue)"
				/>
			</cdx-field>
			<cdx-button
				class="param-field--destroy-button"
				@click="$emit('destroy', this.index)"
				aria-label="삭제"
				action="destructive"
				weight="quiet"
			>
				<cdx-icon :icon="cdxIconTrash" />
			</cdx-button>
    	</cdx-field>
    `
});
createMwApp({
	components: {ParamField, CdxField, CdxButton, CdxIcon},
	data() {
		return {
			index: 0,
			params: [],
			cdxIconAdd
		};
	},
	computed: {
		keys() {
			return this.params.map(([index, key, value]) => key);
		},
		urlSearchParams() {
			return (this.params.length)
				? this.params
					.map(([index, key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`)
					.join('&')
				: '';
		}
	},
	methods: {
		addParam() {
			this.params.push([this.index++, '', '']);
		}
	},
	watch: {
		urlSearchParams: {
			handler(search) {
				url.search = originalSearch + '&' + search + '&previewparams=' + this.keys.map(encodeURIComponent).join('|');
				form.action = url;
			}
		}
	},
	created() {
		this.params.push(...isNullish(url.searchParams.get('previewparams'), v=>v.split('|'), []).map(key => [this.index++, key, url.searchParams.get(key)]));
	},
	template: `
		<cdx-field :is-fieldset="true">
			<template #label>미리 보기용 urlget 파라미터</template>
			<param-field v-for="(entries, index) in params"
				:key="entries[0]"
				@destroy="this.params.splice(index, 1)"
				v-model:param="entries[1]"
				v-model:value="entries[2]"
			/>
			<cdx-button
				class="preview-params-add"
				type="button"
				@click="addParam"
				action="progressive"
			>
				<cdx-icon :icon="cdxIconAdd" /> 파라미터 추가
			</cdx-button>
			<input type="hidden"
				name="previewparams"
				:value="keys.join('|')"
			/>
		</cdx-field>
	`
}).mount('.mw-editform .preview-params');