ToggleButton ​

<template>
	<div>
		<p class="cdx-docs-demo-text">
			Toggle button value: {{ buttonValue }}
		</p>
		<cdx-toggle-button
			v-model="buttonValue"
			@update:model-value="onUpdate"
		>
			Button label
		</cdx-toggle-button>
	</div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { CdxToggleButton } from '@wikimedia/codex';
import getEventLogger from '../../../src/utils/getEventLogger';

export default defineComponent( {
	name: 'SingleButton',
	components: { CdxToggleButton },
	setup() {
		const buttonValue = ref( false );

		const onUpdate = getEventLogger<boolean>( 'update:modelValue' );

		return {
			buttonValue,
			onUpdate
		};
	}
} );
</script>

<template>
	<div>
		<cdx-toggle-button
			v-model="buttonValue"
		>
			<cdx-icon :icon="buttonIcon" />
			{{ buttonText }}
		</cdx-toggle-button>
	</div>
</template>

<script lang="ts">
import { computed, defineComponent, ref } from 'vue';
import { CdxToggleButton, CdxIcon } from '@wikimedia/codex';
import { cdxIconPause, cdxIconPlay, Icon } from '@wikimedia/codex-icons';

export default defineComponent( {
	name: 'IconButton',
	components: { CdxToggleButton, CdxIcon },
	setup() {
		const buttonValue = ref( false );

		// Pause/play menu - button not active means currently paused
		const buttonIcon = computed( (): Icon => {
			if ( buttonValue.value ) {
				// Currently playing
				return cdxIconPause;
			}
			return cdxIconPlay;
		} );
		const buttonText = computed( (): string => {
			if ( buttonValue.value ) {
				// Currently playing
				return 'Pause';
			}
			return 'Play';
		} );

		return {
			buttonValue,
			buttonIcon,
			buttonText
		};
	}
} );
</script>

<template>
	<div>
		<cdx-toggle-button
			v-model="buttonValue"
		>
			<cdx-icon :icon="buttonIcon" :icon-label="iconLabel" />
		</cdx-toggle-button>
	</div>
</template>

<script lang="ts">
import { computed, defineComponent, ref } from 'vue';
import { CdxToggleButton, CdxIcon } from '@wikimedia/codex';
import { cdxIconPause, cdxIconPlay, Icon } from '@wikimedia/codex-icons';

export default defineComponent( {
	name: 'IconOnlyButton',
	components: { CdxToggleButton, CdxIcon },
	setup() {
		const buttonValue = ref( false );

		// Pause/play menu - button not toggled on means currently paused.
		const buttonIcon = computed( (): Icon => {
			if ( buttonValue.value ) {
				// Currently playing.
				return cdxIconPause;
			}
			return cdxIconPlay;
		} );
		const iconLabel = computed( (): string => {
			if ( buttonValue.value ) {
				// Currently playing
				return 'Pause';
			}
			return 'Play';
		} );

		return {
			buttonValue,
			buttonIcon,
			iconLabel
		};
	}
} );
</script>