<template>
	<div class="arca-combo-box-page">
		<h1>arca-combo-box</h1>

		<p><span class="span-component-name">arca-combo-box</span> è un componente utilizzato per gestire la scelta di un valore da una lista predefinita.</p>
	
		<hr class="section-separator">

		<h2>Proprietà <i class="token attr-name">options</i> e <i class="token attr-name">selected</i></h2>

		<div class="showcase">
			<arca-combo-box :options="options" :selected.sync="selectedOption" />
			<span>Valore selezionato: {{ selectedOption }}</span>
		</div>

		<p>Questo <span class="span-component-name">arca-combo-box</span> è modellato su questo oggetto, presente in una proprietà della classe del componente:</p>

		<code-sample lang="javascript" :code="codeSamples.model" />

		<p>
			Le chiavi dell'oggetto diventano i nomi delle opzioni nella combo box, i valori invece diventano i valori delle opzioni.
		</p>
		<p>
			N.B: I valori non devono essere per forza numeri. I valori possono essere di qualsiasi tipo.
		</p>
		
		<code-sample lang="html" :code="codeSamples.choices" />

		<p>
			Oltre a fornire le opzioni, bisogna fornire anche una proprietà che tenga traccia del valore selezionato.
		</p>

		<code-sample lang="javascript" :code="codeSamples.selectedVar" />
		<code-sample lang="html" :code="codeSamples.selectedAssign" />

		<p>
			Una volta collegati questi due dati, la configurazione è completa!
		</p>

		<hr class="section-separator">

		<h2>Note sulla lunghezza</h2>

		<p>
			Di default, la lunghezza dell'<span class="span-component-name">arca-combo-box</span> si adatta al testo del valore selezionato.<br>
			Per evitare questo bisogna assegnare una lunghezza fissa tramite CSS.
		</p>
	</div>
</template>

<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator"

@Component
export default class ArcaComboBoxPage extends Vue
{
	selectedOption = 1

	options = {
		"Primo valore": 1,
		"Secondo valore": 2,
		"Terzo valore": 3,
	}

	codeSamples = {
		model:	[
			`export default class NomeWidget ...`,
			`{`,
			`	opzioni_combo = {`,
			`		"Primo valore": 1,`,
			`		"Secondo valore": 2,`,
			`		"Terzo valore": 3,`,
			`	}`,
		].join('\n'),

		choices:	`<arca-combo-box :options="opzioni_combo" />`,

		selectedVar:	`/**\n` +
							`* Questa proprietà verrà modificata dall'arca-combo-box ogni volta\n` +
							`* che verrà selezionata un'opzione.\n` +
							`*/\n` +
							`selectedOption = 1`,

		selectedAssign:	`<arca-combo-box :options="opzioni_combo" :selected.sync="selectedOption" />`
	}
}
</script>

<style lang="less" scoped>
.arca-combo-box-page {
	.arca-combo-box {
		width: 240px;
	}
}
</style>