Files
vault/ui/lib/core/addon/components/toggle.js
Jordan Reimer e5b1f718f1 Ember Upgrade to 3.24 (#13443)
* Update browserslist

* Add browserslistrc

* ember-cli-update --to 3.26, fix conflicts

* Run codemodes that start with ember-*

* More codemods - before cp*

* More codemods (curly data-test-*)

* WIP ember-basic-dropdown template errors

* updates ember-basic-dropdown and related deps to fix build issues

* updates basic dropdown instances to new version API

* updates more deps -- ember-template-lint is working again

* runs no-implicit-this codemod

* creates and runs no-quoteless-attributes codemod

* runs angle brackets codemod

* updates lint:hbs globs to only touch hbs files

* removes yield only templates

* creates and runs deprecated args transform

* supresses lint error for invokeAction on LinkTo component

* resolves remaining ambiguous path lint errors

* resolves simple-unless lint errors

* adds warnings for deprecated tagName arg on LinkTo components

* adds warnings for remaining curly component invocation

* updates global template lint rules

* resolves remaining template lint errors

* disables some ember specfic lint rules that target pre octane patterns

* js lint fix run

* resolves remaining js lint errors

* fixes test run

* adds npm-run-all dep

* fixes test attribute issues

* fixes console acceptance tests

* fixes tests

* adds yield only wizard/tutorial-active template

* fixes more tests

* attempts to fix more flaky tests

* removes commented out settled in transit test

* updates deprecations workflow and adds initializer to filter by version

* updates flaky policies acl old test

* updates to flaky transit test

* bumps ember deps down to LTS version

* runs linters after main merge

* fixes client count tests after bad merge conflict fixes

* fixes client count history test

* more updates to lint config

* another round of hbs lint fixes after extending stylistic rule

* updates lint-staged commands

* removes indent eslint rule since it seems to break things

* fixes bad attribute in transform-edit-form template

* test fixes

* fixes enterprise tests

* adds changelog

* removes deprecated ember-concurrency-test-waiters dep and adds @ember/test-waiters

* flaky test fix

Co-authored-by: hashishaw <cshaw@hashicorp.com>
2021-12-16 20:44:29 -07:00

44 lines
1.6 KiB
JavaScript

/**
* @module Toggle
* Toggle components are used to indicate boolean values which can be toggled on or off.
* They are a stylistic alternative to checkboxes, but still use the input[type="checkbox"] under the hood.
*
* @example
* ```js
* <Toggle @requiredParam={requiredParam} @optionalParam={optionalParam} @param1={{param1}}/>
* ```
* @param {function} onChange - onChange is triggered on checkbox change (select, deselect). Must manually mutate checked value
* @param {string} name - name is passed along to the form field, as well as to generate the ID of the input & "for" value of the label
* @param {boolean} [checked=false] - checked status of the input, and must be passed in and mutated from the parent
* @param {boolean} [disabled=false] - disabled makes the switch unclickable
* @param {string} [size='medium'] - Sizing can be small or medium
* @param {string} [status='normal'] - Status can be normal or success, which makes the switch have a blue background when checked=true
*/
import Component from '@ember/component';
import { computed } from '@ember/object';
import layout from '../templates/components/toggle';
export default Component.extend({
layout,
tagName: '',
checked: false,
disabled: false,
name: '',
size: 'normal',
status: 'normal',
safeId: computed('name', function () {
return `toggle-${this.name.replace(/\W/g, '')}`;
}),
inputClasses: computed('size', 'status', function () {
const sizeClass = `is-${this.size}`;
const statusClass = `is-${this.status}`;
return `toggle ${statusClass} ${sizeClass}`;
}),
actions: {
handleChange(value) {
this.onChange(value);
},
},
});