Skip to content
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.

Commit e8ce6d1

Browse files
nielslyngsoenielslyngsoe
committedJan 17, 2022
Move uui-boolean-input to its own package
1 parent 8322f03 commit e8ce6d1

File tree

15 files changed

+146
-26
lines changed

15 files changed

+146
-26
lines changed
 

‎packages/uui-base/lib/uui-boolean-input/UUIBooleanInputEvent.ts

Lines changed: 0 additions & 9 deletions
This file was deleted.

‎packages/uui-base/lib/uui-boolean-input/index.ts

Lines changed: 0 additions & 1 deletion
This file was deleted.

‎packages/uui-boolean-input/README.md

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
# uui-boolean-input
2+
3+
![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-boolean-input?logoColor=%231B264F)
4+
5+
Umbraco style boolean-input component.
6+
7+
## Installation
8+
9+
### ES imports
10+
11+
```zsh
12+
npm i @umbraco-ui/uui-boolean-input
13+
```
14+
15+
Import the registration of `<uui-boolean-input>` via:
16+
17+
```javascript
18+
import '@umbraco-ui/uui-boolean-input/lib';
19+
```
20+
21+
When looking to leverage the `UUIBooleanInputElement` base class as a type and/or for extension purposes, do so via:
22+
23+
```javascript
24+
import { UUIBooleanInputElement } from '@umbraco-ui/uui-boolean-input/lib/uui-boolean-input.element';
25+
```
26+
27+
### CDN
28+
29+
The component is available via CDN. This means it can be added to your application without the need of any bundler configuration. Here is how to use it with jsDelivr.
30+
31+
```html
32+
<!-- Latest Version -->
33+
<script src="https://cdn.jsdelivr.net/npm/@umbraco-ui/uui-boolean-input@latest/dist/uui-boolean-input.min.js"></script>
34+
35+
<!-- Specific version -->
36+
<script src="https://cdn.jsdelivr.net/npm/@umbraco-ui/uui-boolean-input@X.X.X/dist/uui-boolean-input.min.js"></script>
37+
```
38+
39+
## Usage
40+
41+
```html
42+
<uui-boolean-input></uui-boolean-input>
43+
```

‎packages/uui-boolean-input/lib/UUIBooleanInputEvent.ts

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { UUIEvent } from '@umbraco-ui/uui-base/lib/events';
2+
import { UUIBooleanInputElement } from './uui-boolean-input.element';
3+
4+
export class UUIBooleanInputEvent extends UUIEvent<{}, UUIBooleanInputElement> {
5+
public static readonly CHANGE: string = 'change';
6+
}

‎packages/uui-boolean-input/lib/index.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { UUIBooleanInputElement } from './uui-boolean-input.element';
2+
import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
3+
4+
defineElement('uui-boolean-input', UUIBooleanInputElement as any);

‎packages/uui-base/lib/uui-boolean-input/uui-boolean-input-base.element.ts renamed to ‎packages/uui-boolean-input/lib/uui-boolean-input.element.ts

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,17 @@
11
import { LitElement, html, css, TemplateResult } from 'lit';
22
import { property, query } from 'lit/decorators.js';
3-
import { LabelMixin } from '../mixins/LabelMixin';
3+
import { LabelMixin } from '@umbraco-ui/uui-base/lib/mixins';
44
import { UUIBooleanInputEvent } from './UUIBooleanInputEvent';
55

66
type LabelPosition = 'left' | 'right' | 'top' | 'bottom';
77

88
/**
9-
* Base class wrapping native input type="checkbox". Extend if you need to make a custom boolean input. Change the role of the input by passing a 'checkbox' || 'switch' to the super() when extending this class. Default is checkbox. Extending this class will make your element formAssociated, meaning it can participate in the native form element.
9+
* Base class wrapping native input type="checkbox". Extend for custom boolean input.
1010
* @extends LabelMixin
1111
* @fires UUIBooleanInputEvent#change on change
1212
* @abstract
1313
*/
14-
export abstract class UUIBooleanInputBaseElement extends LabelMixin(
14+
export abstract class UUIBooleanInputElement extends LabelMixin(
1515
'',
1616
LitElement
1717
) {

‎packages/uui-base/lib/uui-boolean-input/uui-boolean-input-base.test.ts renamed to ‎packages/uui-boolean-input/lib/uui-boolean-input.test.ts

Lines changed: 6 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -3,16 +3,17 @@
33
import {
44
defineCE,
55
elementUpdated,
6-
expect,
7-
fixture,
86
html,
7+
fixture,
8+
expect,
99
unsafeStatic,
1010
} from '@open-wc/testing';
11+
import { UUIBooleanInputElement } from './uui-boolean-input.element';
12+
import '.';
1113
import { html as litHTMLLiteral } from 'lit';
12-
import { UUIBooleanInputBaseElement } from './uui-boolean-input-base.element';
1314

1415
const tagName = defineCE(
15-
class BooleanInputTestElement extends UUIBooleanInputBaseElement {
16+
class BooleanInputTestElement extends UUIBooleanInputElement {
1617
renderCheckbox() {
1718
return litHTMLLiteral`
1819
<div id="testCheckbox">
@@ -24,7 +25,7 @@ const tagName = defineCE(
2425

2526
const tag = unsafeStatic(tagName);
2627

27-
describe('UUI Boolean input base class', () => {
28+
describe('UUIBooleanInputElement', () => {
2829
let element: any;
2930
let label: HTMLLabelElement;
3031
let input: HTMLInputElement | null | undefined;

‎packages/uui-boolean-input/package.json

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
{
2+
"name": "@umbraco-ui/uui-boolean-input",
3+
"version": "0.0.0",
4+
"license": "MIT",
5+
"keywords": [
6+
"Umbraco",
7+
"Custom elements",
8+
"Web components",
9+
"UI",
10+
"Lit",
11+
"Boolean Input"
12+
],
13+
"description": "Umbraco UI boolean-input component",
14+
"repository": {
15+
"type": "git",
16+
"url": "https://github.com/umbraco/Umbraco.UI.git",
17+
"directory": "packages/uui-boolean-input"
18+
},
19+
"bugs": {
20+
"url": "https://github.com/umbraco/Umbraco.UI/issues"
21+
},
22+
"main": "./dist/uui-boolean-input.min.js",
23+
"module": "./lib/index.js",
24+
"customElements": "custom-elements.json",
25+
"files": [
26+
"dist",
27+
"lib/**/*.d.ts",
28+
"lib/**/*.js",
29+
"custom-elements.json"
30+
],
31+
"dependencies": {
32+
"@umbraco-ui/uui-base": "0.0.14"
33+
},
34+
"scripts": {
35+
"build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",
36+
"clean": "tsc --build --clean && rimraf dist lib/*.js lib/**/*.js custom-elements.json",
37+
"analyze": "web-component-analyzer **/*.element.ts --outFile custom-elements.json"
38+
},
39+
"publishConfig": {
40+
"access": "public"
41+
},
42+
"homepage": "https://uui.umbraco.com/?path=/story/uui-boolean-input"
43+
}

‎packages/uui-boolean-input/rollup.config.js

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
import { UUIProdConfig } from '../rollup-package.config';
2+
3+
export default UUIProdConfig({
4+
entryPoints: ['index', 'uui-boolean-input.element', 'UUIBooleanInputEvent'],
5+
bundle: 'index',
6+
});

‎packages/uui-boolean-input/tsconfig.json

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
// Don't edit this file directly. It is generated by /scripts/generate-ts-config.js
2+
3+
{
4+
"extends": "../../tsconfig.json",
5+
"compilerOptions": {
6+
"outDir": "./lib",
7+
"rootDir": "./lib",
8+
"composite": true
9+
},
10+
"include": ["./**/*.ts"],
11+
"exclude": ["./**/*.test.ts", "./**/*.story.ts"],
12+
"references": [
13+
{
14+
"path": "../uui-base"
15+
}
16+
]
17+
}

‎packages/uui-checkbox/lib/uui-checkbox.element.ts

Lines changed: 5 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -4,18 +4,19 @@ import {
44
UUIHorizontalShakeAnimationValue,
55
} from '@umbraco-ui/uui-base/lib/animations';
66
import { iconCheck } from '@umbraco-ui/uui-icon-registry-essential/lib/svgs';
7-
import { UUIBooleanInputBaseElement } from '@umbraco-ui/uui-base/lib/uui-boolean-input';
7+
import { UUIBooleanInputElement } from '@umbraco-ui/uui-boolean-input/lib/uui-boolean-input.element';
88

99
/**
1010
* Umbraco checkbox, toggles between checked and uncheck
1111
* @element uui-checkbox
12-
* @fires UUIBooleanInputBaseEvent#change - fires when the element is begin checked by a user action
12+
* @fires UUIBooleanInputEvent#change - fires when the element is begin checked by a user action
1313
* @slot to overwrite displayed label content
1414
* @cssprop --uui-checkbox-size - To set the size of the checkbox.
15+
* @extends UUIBooleanInputElement
1516
*/
16-
export class UUICheckboxElement extends UUIBooleanInputBaseElement {
17+
export class UUICheckboxElement extends UUIBooleanInputElement {
1718
static styles = [
18-
...UUIBooleanInputBaseElement.styles,
19+
...UUIBooleanInputElement.styles,
1920
UUIHorizontalShakeKeyframes,
2021
css`
2122
:host {

‎packages/uui-checkbox/package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,9 @@
3434
"dependencies": {
3535
"@umbraco-ui/uui-base": "0.0.14"
3636
},
37+
"devDependencies": {
38+
"@umbraco-ui/uui-boolean-input": "0.0.0"
39+
},
3740
"scripts": {
3841
"build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",
3942
"clean": "tsc --build --clean && rimraf dist lib/*.js lib/**/*.js custom-elements.json",

‎packages/uui-toggle/lib/uui-toggle.element.ts

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@ import {
77
iconWrong,
88
iconCheck,
99
} from '@umbraco-ui/uui-icon-registry-essential/lib/svgs';
10-
import { UUIBooleanInputBaseElement } from '@umbraco-ui/uui-base/lib/uui-boolean-input';
10+
import { UUIBooleanInputElement } from '@umbraco-ui/uui-boolean-input/lib/uui-boolean-input.element';
1111

1212
/**
1313
* Umbraco Toggle-switch, toggles between off/on.
@@ -22,11 +22,11 @@ import { UUIBooleanInputBaseElement } from '@umbraco-ui/uui-base/lib/uui-boolean
2222
* @cssprop --uui-toggle-background-color-hover - Set the toggle background color when hovered
2323
* @cssprop --uui-toggle-border-color-focus - Set the toggle background color when focused
2424
* @cssprop --uui-toggle-background-color-focus - Set the toggle background color when focused
25-
* @extends UUIBooleanInputBaseElement
25+
* @extends UUIBooleanInputElement
2626
*/
27-
export class UUIToggleElement extends UUIBooleanInputBaseElement {
27+
export class UUIToggleElement extends UUIBooleanInputElement {
2828
static styles = [
29-
...UUIBooleanInputBaseElement.styles,
29+
...UUIBooleanInputElement.styles,
3030
UUIHorizontalShakeKeyframes,
3131
css`
3232
:host {

‎packages/uui-toggle/package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -31,6 +31,9 @@
3131
"dependencies": {
3232
"@umbraco-ui/uui-base": "0.0.14"
3333
},
34+
"devDependencies": {
35+
"@umbraco-ui/uui-boolean-input": "0.0.0"
36+
},
3437
"scripts": {
3538
"build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js",
3639
"clean": "tsc --build --clean && rimraf dist lib/*.js lib/**/*.js custom-elements.json",

‎packages/uui/package.json

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -34,6 +34,7 @@
3434
"@umbraco-ui/uui-avatar": "0.0.16",
3535
"@umbraco-ui/uui-avatar-group": "0.0.16",
3636
"@umbraco-ui/uui-badge": "0.0.9",
37+
"@umbraco-ui/uui-boolean-input": "0.0.0",
3738
"@umbraco-ui/uui-box": "0.0.11",
3839
"@umbraco-ui/uui-breadcrumbs": "0.0.16",
3940
"@umbraco-ui/uui-button": "0.1.7",
@@ -51,7 +52,9 @@
5152
"@umbraco-ui/uui-icon-registry": "0.0.0",
5253
"@umbraco-ui/uui-icon-registry-essential": "0.0.0",
5354
"@umbraco-ui/uui-input": "0.0.16",
55+
"@umbraco-ui/uui-input-password": "0.0.0",
5456
"@umbraco-ui/uui-keyboard-shortcut": "0.0.10",
57+
"@umbraco-ui/uui-label": "0.0.16",
5558
"@umbraco-ui/uui-loader": "0.0.16",
5659
"@umbraco-ui/uui-loader-bar": "0.0.17",
5760
"@umbraco-ui/uui-loader-circle": "0.0.17",

0 commit comments

Comments
 (0)
Please sign in to comment.