MenuItem ​

<template>
	<cdx-menu-item
		v-bind="menuItem"
	/>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { CdxMenuItem, MenuItemDataWithId } from '@wikimedia/codex';

const menuItem : MenuItemDataWithId = {
	value: 5921,
	label: 'Color',
	id: 'menu-item-default'
};

export default defineComponent( {
	name: 'MenuItemDefault',
	components: { CdxMenuItem },
	setup() {
		return {
			menuItem
		};
	}
} );
</script>

<template>
	<cdx-menu-item
		v-bind="menuItem"
		:bold-label="true"
	/>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { CdxMenuItem, MenuItemDataWithId } from '@wikimedia/codex';

const menuItem : MenuItemDataWithId = {
	value: 5921,
	label: 'Color',
	description: 'visual perception of light wavelengths',
	id: 'menu-item-with-description'
};

export default defineComponent( {
	name: 'MenuItemWithDescription',
	components: { CdxMenuItem },
	setup() {
		return {
			menuItem
		};
	}
} );
</script>

<template>
	<cdx-menu-item
		v-bind="menuItem"
	/>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { CdxMenuItem, MenuItemDataWithId } from '@wikimedia/codex';

const menuItem : MenuItemDataWithId = {
	value: 5921,
	label: 'Color',
	url: 'https://en.wikipedia.org/wiki/Color',
	description: 'visual perception of light wavelengths',
	id: 'menu-item-with-url'
};

export default defineComponent( {
	name: 'MenuItemWithUrl',
	components: { CdxMenuItem },
	setup() {
		return {
			menuItem
		};
	}
} );
</script>

<template>
	<cdx-menu-item
		v-bind="menuItem"
	/>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { CdxMenuItem, MenuItemDataWithId } from '@wikimedia/codex';
import { cdxIconTag } from '@wikimedia/codex-icons';

const menuItem : MenuItemDataWithId = {
	value: 5921,
	label: 'Color',
	description: 'visual perception of light wavelengths',
	icon: cdxIconTag,
	id: 'menu-item-with-icon'
};

export default defineComponent( {
	name: 'MenuItemWithIcon',
	components: { CdxMenuItem },
	setup() {
		return {
			menuItem
		};
	}
} );
</script>

<template>
	<cdx-menu-item
		v-bind="menuItem"
		:show-thumbnail="true"
	/>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { CdxMenuItem, MenuItemDataWithId } from '@wikimedia/codex';

const menuItem : MenuItemDataWithId = {
	value: 5921,
	label: 'Color',
	url: 'https://en.wikipedia.org/wiki/Color',
	description: 'visual perception of light wavelengths',
	thumbnail: {
		width: 200,
		height: 150,
		url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/21/64_365_Color_Macro_%285498808099%29.jpg/200px-64_365_Color_Macro_%285498808099%29.jpg'
	},
	id: 'menu-item-with-thumbnail'
};

export default defineComponent( {
	name: 'MenuItemWithThumbnail',
	components: { CdxMenuItem },
	setup() {
		return {
			menuItem
		};
	}
} );
</script>

<template>
	<cdx-menu-item
		v-bind="menuItem"
		search-query="Co"
		:highlight-query="true"
	/>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { CdxMenuItem, MenuItemDataWithId } from '@wikimedia/codex';

const menuItem : MenuItemDataWithId = {
	value: 5921,
	label: 'Color',
	url: 'https://en.wikipedia.org/wiki/Color',
	description: 'visual perception of light wavelengths',
	id: 'menu-item-highlight-query'
};

export default defineComponent( {
	name: 'MenuItemHighlightQuery',
	components: { CdxMenuItem },
	setup() {
		return {
			menuItem
		};
	}
} );
</script>

<template>
	<cdx-menu-item
		v-bind="menuItem"
		search-query="felis margarita"
	/>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { CdxMenuItem, MenuItemDataWithId } from '@wikimedia/codex';

const menuItem : MenuItemDataWithId = {
	value: 'Q175329',
	label: 'sand cat',
	match: '(Felis margarita)',
	description: 'species of the only cat living foremost in true deserts',
	id: 'menu-item-with-match'
};

export default defineComponent( {
	name: 'MenuItemWithMatch',
	components: { CdxMenuItem },
	setup() {
		return {
			menuItem
		};
	}
} );
</script>

<template>
	<cdx-menu-item
		v-bind="menuItem"
		search-query="corn"
	/>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { CdxMenuItem, MenuItemDataWithId } from '@wikimedia/codex';

const menuItem : MenuItemDataWithId = {
	value: 20656228,
	label: 'Maize',
	supportingText: '(redirected from Corn)',
	url: 'https://en.wikipedia.org/wiki/Maize',
	description: 'Genus of grass cultivated as a food crop',
	thumbnail: {
		width: 147,
		height: 200,
		url: 'https://upload.wikimedia.org/wikipedia/commons/thumb/e/e3/Zea_mays_-_K%C3%B6hler%E2%80%93s_Medizinal-Pflanzen-283.jpg/147px-Zea_mays_-_K%C3%B6hler%E2%80%93s_Medizinal-Pflanzen-283.jpg'
	},
	id: 'menu-item-with-supporting-text'
};

export default defineComponent( {
	name: 'MenuItemWithSupportingText',
	components: { CdxMenuItem },
	setup() {
		return {
			menuItem
		};
	}
} );
</script>

<template>
	<cdx-menu-item
		v-bind="menuItem"
		search-query="moon"
	/>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { CdxMenuItem, MenuItemDataWithId } from '@wikimedia/codex';

const menuItem : MenuItemDataWithId = {
	value: 'Q405',
	label: 'Σελήνη',
	match: '(moon)',
	description: 'ο μοναδικός φυσικός δορυφόρος της Γης',
	language: {
		label: 'el',
		match: 'en',
		description: 'el'
	},
	id: 'menu-item-multiple-langs'
};

export default defineComponent( {
	name: 'MenuItemMultipleLangs',
	components: { CdxMenuItem },
	setup() {
		return {
			menuItem
		};
	}
} );
</script>

<template>
	<cdx-menu-item
		v-bind="menuItem"
		search-query="Donaudampfschiffahrtselektrizit"
		:highlight-query="true"
	/>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { CdxMenuItem, MenuItemDataWithId } from '@wikimedia/codex';

// See https://phabricator.wikimedia.org/T280982.
const menuItem : MenuItemDataWithId = {
	value: 2201357,
	label: 'Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft',
	url: 'https://en.wikipedia.org/wiki/Donaudampfschiffahrtselektrizit%C3%A4tenhauptbetriebswerkbauunterbeamtengesellschaft',
	description: 'Arguably the longest German word',
	id: 'menu-item-long-text'
};

export default defineComponent( {
	name: 'MenuItemLongText',
	components: { CdxMenuItem },
	setup() {
		return {
			menuItem
		};
	}
} );
</script>

<template>
	<cdx-menu-item
		v-bind="menuItem"
		search-query="Donaudampfschiffahrtselektrizit"
		:highlight-query="true"
		:hide-description-overflow="true"
	/>
</template>

<script lang="ts">
import { defineComponent } from 'vue';
import { CdxMenuItem, MenuItemDataWithId } from '@wikimedia/codex';

const menuItem : MenuItemDataWithId = {
	value: 2201357,
	label: 'Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft',
	url: 'https://en.wikipedia.org/wiki/Donaudampfschiffahrtselektrizit%C3%A4tenhauptbetriebswerkbauunterbeamtengesellschaft',
	description: 'Arguably the longest German word, which again, is Donaudampfschiffahrtselektrizitätenhauptbetriebswerkbauunterbeamtengesellschaft',
	id: 'menu-item-hide-overflow'
};

export default defineComponent( {
	name: 'MenuItemHideOverflow',
	components: { CdxMenuItem },
	setup() {
		return {
			menuItem
		};
	}
} );
</script>

<template>
	<cdx-menu
		v-model:selected="selection"
		:expanded="true"
		:menu-items="searchResults"
		:show-thumbnail="true"
		:search-query="searchQuery"
		:highlight-query="true"
	/>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { CdxMenu } from '@wikimedia/codex';
import searchResults from './searchResults';

export default defineComponent( {
	name: 'MenuItems',
	components: { CdxMenu },
	setup() {
		const selection = ref( '' );
		return {
			selection,
			searchResults,
			searchQuery: 'Co'
		};
	}
} );
</script>

<template>
	<cdx-menu
		v-model:selected="selection"
		:expanded="true"
		:menu-items="searchResults"
		:show-thumbnail="true"
		:search-query="searchQuery"
		:highlight-query="true"
	/>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';
import { CdxMenu } from '@wikimedia/codex';
import searchResults from './searchResultsGraphemes';

// This demo serves to demonstrate how the highlighting mechanism in the
// SearchResultTitle component handles languages with characters represented by
// more than one Unicode scalar values.
//
// See https://phabricator.wikimedia.org/T277256 and
// https://phabricator.wikimedia.org/T35242 for details.
export default defineComponent( {
	name: 'MenuItemsGraphemes',
	components: { CdxMenu },
	setup() {
		const selection = ref( '' );
		return {
			selection,
			searchResults,
			searchQuery: 'ইতাল'
		};
	}
} );
</script>