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

		<p>
			<span class="span-component-name">arca-button</span> è un componente utilizzato per uniformizzare la grafica dei pulsanti.
			Non è obbligatorio utilizzarli per qualsiasi pulsante, ma è incoraggiato per un discorso di uniformità.
		</p>

		<hr class="section-separator">

		<h2>Gestione del click</h2>

		<div class="showcase">
			<arca-button text="Pulsante" primary-color="#4444FF" @click="fakeBtnAction" />
		</div>

		<p>
			Per assegnare un'azione ad un pulsante, utilizzare l'evento click.
		</p>

		<code-sample lang="html" :code="codeSamples.button" />
		<code-sample lang="javascript" :code="codeSamples.buttonAction" />

		<div class="showcase">
			<div class="row">
				<arca-button text="Pulsante" primary-color="#4444FF" />
				<arca-button text="Pulsante evidenziato" primary-color="#4444FF" primary />
				<arca-button text="Pulsante senza bordo" primary-color="#4444FF" borderless />
			</div>
		</div>

		<code-sample lang="html" :code="codeSamples.buttons" />

		<hr class="section-separator">

		<h2>Proprietà <i class="token attr-name">transparent</i></h2>

		<p>
			Notare che i pulsanti non evidenziati hanno uno sfondo bianco di default. Per fare in modo che i pulsanti
			siano trasparenti, utilizzare l'attributo <span class="token attr-name">transparent</span>.
		</p>

		<div class="showcase">
			<div class="row">
				<arca-button text="Pulsante" primary-color="#4444FF" transparent />
				<arca-button text="Pulsante senza bordo" primary-color="#4444FF" transparent borderless />
			</div>
		</div>

		<code-sample lang="html" :code="codeSamples.buttons2" />

		<hr class="section-separator">

		<h2>Proprietà <i class="token attr-name">disabled</i></h2>

		<p>
			Per disabilitare un pulsante, utilizzare l'attributo <span class="token attr-name">disabled</span>.
		</p>

		<div class="showcase">
			<div class="row">
				<arca-button text="Pulsante" primary-color="#4444FF" disabled />
				<arca-button text="Pulsante evidenziato" primary-color="#4444FF" primary disabled />
				<arca-button text="Pulsante senza bordo" primary-color="#4444FF" borderless disabled />
			</div>
		</div>

		<code-sample lang="html" :code="codeSamples.disabled" />

		<hr class="section-separator">

		<h2>Proprietà <i class="token attr-name">icon</i></h2>

		<p>
			I pulsanti possono avere anche un'icona, assegnabile tramite l'attributo <span class="token attr-name">icon</span>.
		</p>

		<div class="showcase">
			<arca-button text="Pulsante con icona" icon="edit" primary-color="#4444FF" />
		</div>

		<code-sample lang="html" :code="codeSamples.icon" />

		<hr class="section-separator">

		<h2>Proprietà <i class="token attr-name">primary-color</i></h2>

		<p>
			Di default i pulsanti assumono il colore del tema di Arca, ma è possibile sovrascrivere il colore tramite l'attributo <span class="token attr-name">primary-color</span> al quale va assegnato un colore CSS valido.
		</p>

		<div class="showcase">
			<div class="row">
				<arca-button text="Rosso" primary-color="red" />
			</div>
		</div>

		<code-sample lang="html" :code="codeSamples.customColor" />
	</div>
</template>

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

@Component
export default class ArcaButtonPage extends Vue
{
	codeSamples = {
		button:	`<arca-button text="Pulsante" @click="azione" />`,
		buttonAction: 	`/* Nella classe del componente... */\n` +
							`azione()\n` +
							`{\n` +
							`	alert("Azione pulsante");\n` +
							`}`,
		
		buttons:	`<arca-button text="Pulsante" />\n` +
					`<arca-button text="Pulsante evidenziato" primary />\n` +
					`<arca-button text="Pulsante senza bordo" borderless />`,

		buttons2:	`<arca-button text="Pulsante" transparent />\n` +
						`<arca-button text="Pulsante senza bordo" transparent borderless />`,

		disabled:	`<arca-button text="Pulsante" disabled />\n` +
						`<arca-button text="Pulsante evidenziato" primary disabled />\n` +
						`<arca-button text="Pulsante senza bordo" borderless disabled />`,

		icon:	`<arca-button text="Pulsante con icona" icon="edit" />`,

		customColor:	`<arca-button text="Rosso" primary-color="red" />\n` +
							`<!-- oppure come esadecimale... -->\n` +
							`<arca-button text="Rosso" primary-color="#FF0000" />\n` +
							`<!-- oppure come componente rgb... -->\n` +
							`<arca-button text="Rosso" primary-color="rgb(255, 0, 0)" />\n` +
							`<!-- etc... -->`
	}
	fakeBtnAction()
	{
		alert("Azione pulsante");
	}
}
</script>

<style lang="less" scoped>
.arca-button-page {
	
}
</style>