@vime/core
Version:
Customizable, extensible, accessible and framework agnostic media player.
158 lines (157 loc) • 4.29 kB
JavaScript
import { Component, Event, h, Prop } from '@stencil/core';
import { withComponentRegistry } from '../../../core/player/withComponentRegistry';
/**
* Menu radio buttons are presented in radio groups (a collection of radio buttons describing a set
* of related options). Only one radio button in a group can be selected at the same time.
*
* ## Visual
*
* <img
* src="https://raw.githubusercontent.com/vime-js/vime/master/packages/core/src/components/ui/settings/menu-radio/menu-radio.png"
* alt="Vime settings menu radio component"
* />
*/
export class MenuRadio {
constructor() {
/**
* Whether the radio item is selected or not.
*/
this.checked = false;
/**
* The URL to an SVG element or fragment to load.
*/
this.checkIcon = 'check';
withComponentRegistry(this);
}
onClick() {
this.checked = true;
this.vmCheck.emit();
}
render() {
return (h("vm-menu-item", { label: this.label, checked: this.checked, badge: this.badge, checkIcon: this.checkIcon, icons: this.icons, onClick: this.onClick.bind(this) }));
}
static get is() { return "vm-menu-radio"; }
static get encapsulation() { return "shadow"; }
static get properties() { return {
"label": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "The title of the radio item displayed to the user."
},
"attribute": "label",
"reflect": false
},
"value": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string",
"references": {}
},
"required": true,
"optional": false,
"docs": {
"tags": [],
"text": "The value associated with this radio item."
},
"attribute": "value",
"reflect": false
},
"checked": {
"type": "boolean",
"mutable": true,
"complexType": {
"original": "boolean",
"resolved": "boolean",
"references": {}
},
"required": false,
"optional": false,
"docs": {
"tags": [],
"text": "Whether the radio item is selected or not."
},
"attribute": "checked",
"reflect": false,
"defaultValue": "false"
},
"badge": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "This can provide additional context about the value. For example, if the option is for a set of\nvideo qualities, the badge could describe whether the quality is UHD, HD etc."
},
"attribute": "badge",
"reflect": false
},
"checkIcon": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The URL to an SVG element or fragment to load."
},
"attribute": "check-icon",
"reflect": false,
"defaultValue": "'check'"
},
"icons": {
"type": "string",
"mutable": false,
"complexType": {
"original": "string",
"resolved": "string | undefined",
"references": {}
},
"required": false,
"optional": true,
"docs": {
"tags": [],
"text": "The name of an icon library to use. Defaults to the library defined by the `icons` player\nproperty."
},
"attribute": "icons",
"reflect": false
}
}; }
static get events() { return [{
"method": "vmCheck",
"name": "vmCheck",
"bubbles": true,
"cancelable": true,
"composed": true,
"docs": {
"tags": [],
"text": "Emitted when the radio button is selected."
},
"complexType": {
"original": "void",
"resolved": "void",
"references": {}
}
}]; }
}