@lion/switch
Advanced tools
@lion/switch - npm Package Compare versions
Comparing version 0.13.5 to 0.14.0
| # Change Log | ||
| ## 0.14.0 | ||
| ### Minor Changes | ||
| - f3e54c56: Publish documentation with a format for Rocket | ||
| - 5db622e9: BREAKING: Align exports fields. This means no more wildcards, meaning you always import with bare import specifiers, extensionless. Import components where customElements.define side effect is executed by importing from '@lion/package/define'. For multi-component packages this defines all components (e.g. radio-group + radio). If you want to only import a single one, do '@lion/radio-group/define-radio' for example for just lion-radio. | ||
| ### Patch Changes | ||
| - Updated dependencies [f3e54c56] | ||
| - Updated dependencies [af90b20e] | ||
| - Updated dependencies [5db622e9] | ||
| - @lion/core@0.15.0 | ||
| - @lion/form-core@0.9.0 | ||
| - @lion/helpers@0.7.0 | ||
| ## 0.13.5 | ||
@@ -4,0 +20,0 @@ |
@@ -7,2 +7,14 @@ { | ||
| "kind": "javascript-module", | ||
| "path": "./define.d.ts", | ||
| "declarations": [], | ||
| "exports": [] | ||
| }, | ||
| { | ||
| "kind": "javascript-module", | ||
| "path": "./define.js", | ||
| "declarations": [], | ||
| "exports": [] | ||
| }, | ||
| { | ||
| "kind": "javascript-module", | ||
| "path": "./index.d.ts", | ||
@@ -9,0 +21,0 @@ "declarations": [], |
| { | ||
| "name": "@lion/switch", | ||
| "version": "0.13.5", | ||
| "version": "0.14.0", | ||
| "description": "A Switch is used for switching a property or feature on and off", | ||
@@ -27,10 +27,12 @@ "license": "MIT", | ||
| "scripts": { | ||
| "custom-elements-manifest": "custom-elements-manifest analyze --litelement --exclude 'docs/**/*'", | ||
| "custom-elements-manifest": "custom-elements-manifest analyze --litelement --exclude \"docs/**/*\" \"test-helpers/**/*\"", | ||
| "debug": "cd ../../ && npm run debug -- --group switch", | ||
| "debug:firefox": "cd ../../ && npm run debug:firefox -- --group switch", | ||
| "debug:webkit": "cd ../../ && npm run debug:webkit -- --group switch", | ||
| "prepublishOnly": "../../scripts/npm-prepublish.js && npm run custom-elements-manifest", | ||
| "publish-docs": "node ../../packages-node/publish-docs/src/cli.js --github-url https://github.com/ing-bank/lion/ --git-root-dir ../../", | ||
| "prepublishOnly": "npm run publish-docs && npm run custom-elements-manifest", | ||
| "test": "cd ../../ && npm run test:browser -- --group switch" | ||
| }, | ||
| "sideEffects": [ | ||
| "define.js", | ||
| "lion-switch.js", | ||
@@ -40,5 +42,5 @@ "lion-switch-button.js" | ||
| "dependencies": { | ||
| "@lion/core": "0.14.1", | ||
| "@lion/form-core": "0.8.5", | ||
| "@lion/helpers": "0.6.1" | ||
| "@lion/core": "0.15.0", | ||
| "@lion/form-core": "0.9.0", | ||
| "@lion/helpers": "0.7.0" | ||
| }, | ||
@@ -56,5 +58,7 @@ "keywords": [ | ||
| ".": "./index.js", | ||
| "./lion-switch": "./lion-switch.js", | ||
| "./lion-switch-button": "./lion-switch-button.js" | ||
| "./define": "./define.js", | ||
| "./define-switch": "./lion-switch.js", | ||
| "./define-switch-button": "./lion-switch-button.js", | ||
| "./docs/": "./docs/" | ||
| } | ||
| } |
@@ -1,2 +0,2 @@ | ||
| # Switch | ||
| # Interaction >> Switch >> Overview ||10 | ||
@@ -7,10 +7,3 @@ `lion-switch` is a component that is used to toggle a property or feature on or off. Toggling the component on or off should have immediate action and should not require pressing any additional buttons (submit) to confirm what just happened. The Switch is not a Checkbox in disguise and should not be used as part of a form. | ||
| import { html } from '@lion/core'; | ||
| import { Validator } from '@lion/form-core'; | ||
| import { LionSwitch } from './index.js'; | ||
| import './lion-switch.js'; | ||
| import '@lion/helpers/sb-action-logger.js'; | ||
| export default { | ||
| title: 'Buttons/Switch', | ||
| }; | ||
| import '@lion/switch/define'; | ||
| ``` | ||
@@ -28,6 +21,4 @@ | ||
| ## How to use | ||
| ## Installation | ||
| ### Installation | ||
| ```bash | ||
@@ -40,76 +31,3 @@ npm i --save @lion/switch | ||
| // or | ||
| import '@lion/switch/lion-switch.js'; | ||
| import '@lion/switch/define'; | ||
| ``` | ||
| ### Example | ||
| ```html | ||
| <lion-switch name="airplaneMode" label="Airplane mode" checked></lion-switch> | ||
| ``` | ||
| ### Disabled | ||
| You can disable switches. | ||
| ```js preview-story | ||
| export const disabled = () => html` <lion-switch label="Label" disabled></lion-switch> `; | ||
| ``` | ||
| ### Validation | ||
| Simple example that illustrates where validation feedback will be displayed. | ||
| ```js preview-story | ||
| export const validation = () => { | ||
| const IsTrue = class extends Validator { | ||
| static get validatorName() { | ||
| return 'IsTrue'; | ||
| } | ||
| execute(value) { | ||
| return !value.checked; | ||
| } | ||
| static async getMessage() { | ||
| return "You won't get the latest news!"; | ||
| } | ||
| }; | ||
| const tagName = 'custom-switch'; | ||
| if (!customElements.get(tagName)) { | ||
| customElements.define( | ||
| tagName, | ||
| class CustomSwitch extends LionSwitch { | ||
| static get validationTypes() { | ||
| return [...super.validationTypes, 'info']; | ||
| } | ||
| }, | ||
| ); | ||
| } | ||
| return html` | ||
| <custom-switch | ||
| id="newsletterCheck" | ||
| name="newsletterCheck" | ||
| label="Subscribe to newsletter" | ||
| .validators="${[new IsTrue(null, { type: 'info' })]}" | ||
| ></custom-switch> | ||
| `; | ||
| }; | ||
| ``` | ||
| ### With checked-changed handler | ||
| You can listen for a `checked-changed` event that is fired when the switch is clicked. | ||
| ```js preview-story | ||
| export const handler = () => { | ||
| const uid = Math.random().toString(36).substr(2, 10); | ||
| return html` | ||
| <lion-switch | ||
| label="Label" | ||
| @checked-changed="${e => { | ||
| document.getElementById(`logger-${uid}`).log(`Current value: ${e.target.checked}`); | ||
| }}" | ||
| > | ||
| </lion-switch> | ||
| <sb-action-logger id="logger-${uid}"></sb-action-logger> | ||
| `; | ||
| }; | ||
| ``` |
@@ -1,2 +0,2 @@ | ||
| export type LionSwitchButton = import("../src/LionSwitchButton.js").LionSwitchButton; | ||
| export type LionSwitchButton = import("../src/LionSwitchButton").LionSwitchButton; | ||
| export type TemplateResult = import("@lion/core").TemplateResult; |
| import { expect, fixture as _fixture, html } from '@open-wc/testing'; | ||
| import sinon from 'sinon'; | ||
| import '../lion-switch-button.js'; | ||
| import '@lion/switch/define-switch-button'; | ||
@@ -5,0 +5,0 @@ /** |
@@ -1,2 +0,2 @@ | ||
| export type LionSwitch = import("../src/LionSwitch.js").LionSwitch; | ||
| export type LionSwitch = import("../src/LionSwitch").LionSwitch; | ||
| export type TemplateResult = import("@lion/core").TemplateResult; |
| import { expect, fixture as _fixture, html } from '@open-wc/testing'; | ||
| import sinon from 'sinon'; | ||
| import '../lion-switch.js'; | ||
| import '@lion/switch/define'; | ||
@@ -5,0 +5,0 @@ /** |
New alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Fixed alerts
License Policy Violation
LicenseThis package is not allowed per your license policy. Review the package's license to ensure compliance.
Found 1 instance in 1 package
Improved metrics
- Total package byte prevSize
- increased by3.85%
58530
- Number of package files
- increased by22.22%
22
- Lines of code
- increased by1.47%
1032
Worsened metrics
- Number of lines in readme file
- decreased by-72.57%
31
Dependency changes
+ Added@lion/core@0.15.0(transitive)
+ Added@lion/form-core@0.9.0(transitive)
+ Added@lion/helpers@0.7.0(transitive)
+ Added@lion/localize@0.17.0(transitive)
+ Addedsingleton-manager@1.4.0(transitive)
- Removed@lion/core@0.14.1(transitive)
- Removed@lion/form-core@0.8.5(transitive)
- Removed@lion/helpers@0.6.1(transitive)
- Removed@lion/localize@0.16.1(transitive)
- Removedsingleton-manager@1.3.0(transitive)
Updated@lion/core@0.15.0
Updated@lion/form-core@0.9.0
Updated@lion/helpers@0.7.0