mirror of
https://github.com/mozilla/gecko-dev.git
synced 2025-11-05 18:58:33 +02:00
eeff9ddade
When a control is provided in config-based prefs then an element of that name will be created and passed a standard set of properties. If the element supports the static activatedProperty getter then that property will be set to the setting's value, otherwise the value property will be set. This additionally adds support for the getControlConfig() method when registering a Setting with preferencesBindings.js. This method allows for settings code to modify the static configuration to create more dynamic controls. Differential Revision: https://phabricator.services.mozilla.com/D253056
79 lines
1.8 KiB
JavaScript
79 lines
1.8 KiB
JavaScript
/* This Source Code Form is subject to the terms of the Mozilla Public
|
|
* License, v. 2.0. If a copy of the MPL was not distributed with this
|
|
* file, You can obtain one at http://mozilla.org/MPL/2.0/. */
|
|
|
|
import { html } from "chrome://global/content/vendor/lit.all.mjs";
|
|
import "chrome://browser/content/preferences/widgets/setting-control.mjs";
|
|
|
|
export default {
|
|
title: "Domain-specific UI Widgets/Settings/Setting Control",
|
|
component: "setting-control",
|
|
parameters: {
|
|
status: "in-development",
|
|
handles: ["click", "input", "change"],
|
|
fluent: `
|
|
checkbox-example-input =
|
|
.label = Checkbox example of setting-control
|
|
.description = Could have a description like moz-checkbox.
|
|
select-example-input =
|
|
.label = Select example of setting-control
|
|
.description = Could have a description like moz-select.
|
|
select-option-0 =
|
|
.label = Option 0
|
|
select-option-1 =
|
|
.label = Option 1
|
|
select-option-2 =
|
|
.label = Option 2
|
|
`,
|
|
},
|
|
};
|
|
|
|
const Template = ({ config, setting }) => html`
|
|
<setting-control .config=${config} .setting=${setting}></setting-control>
|
|
`;
|
|
|
|
export const Checkbox = Template.bind({});
|
|
Checkbox.args = {
|
|
config: {
|
|
id: "checkbox-example",
|
|
l10nId: "checkbox-example-input",
|
|
},
|
|
setting: {
|
|
value: true,
|
|
on() {},
|
|
off() {},
|
|
userChange() {},
|
|
getControlConfig: c => c,
|
|
},
|
|
};
|
|
|
|
export const Select = Template.bind({});
|
|
Select.args = {
|
|
config: {
|
|
id: "select-example",
|
|
l10nId: "select-example-input",
|
|
control: "moz-select",
|
|
supportPage: "example-support",
|
|
options: [
|
|
{
|
|
value: "0",
|
|
l10nId: "select-option-0",
|
|
},
|
|
{
|
|
value: "1",
|
|
l10nId: "select-option-1",
|
|
},
|
|
{
|
|
value: "2",
|
|
l10nId: "select-option-2",
|
|
},
|
|
],
|
|
},
|
|
setting: {
|
|
value: "1",
|
|
on() {},
|
|
off() {},
|
|
userChange() {},
|
|
getControlConfig: c => c,
|
|
},
|
|
};
|