Skip to content

Commit a7275b7

Browse files
JesmoDevJesmoDev
committedNov 29, 2021
added package
·
v1.13.0@umbraco-ui/uui@0.0.9
1 parent fa4be54 commit a7275b7

14 files changed

+2774
-71
lines changed
 

‎package-lock.json

+2,541-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎packages/uui-button-inline-create/README.md

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
# uui-button-inline-create
2+
3+
![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-button-inline-create?logoColor=%231B264F)
4+
5+
Umbraco style button-inline-create component.
6+
7+
## Installation
8+
9+
### ES imports
10+
11+
```zsh
12+
npm i @umbraco-ui/uui-button-inline-create
13+
```
14+
15+
Import the registration of `<uui-button-inline-create>` via:
16+
17+
```javascript
18+
import '@umbraco-ui/uui-button-inline-create/lib';
19+
```
20+
21+
When looking to leverage the `UUIButtonInlineCreateElement` base class as a type and/or for extension purposes, do so via:
22+
23+
```javascript
24+
import { UUIButtonInlineCreateElement } from '@umbraco-ui/uui-button-inline-create/lib/uui-button-inline-create.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-button-inline-create@latest/dist/uui-button-inline-create.min.js"></script>
34+
35+
<!-- Specific version -->
36+
<script src="https://cdn.jsdelivr.net/npm/@umbraco-ui/uui-button-inline-create@X.X.X/dist/uui-button-inline-create.min.js"></script>
37+
```
38+
39+
## Usage
40+
41+
```html
42+
<uui-button-inline-create></uui-button-inline-create>
43+
```

‎packages/uui-button-inline-create/lib/UUIButtonInlineCreateEvent.ts

+9
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
import { UUIEvent } from '@umbraco-ui/uui-base/lib/events';
2+
import { UUIButtonInlineCreateElement } from './uui-button-inline-create.element';
3+
4+
export class UUIButtonInlineCreateEvent extends UUIEvent<
5+
{},
6+
UUIButtonInlineCreateElement
7+
> {
8+
public static readonly CLICK: string = 'click';
9+
}

‎packages/uui-button-inline-create/lib/index.ts

+4
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,4 @@
1+
import { UUIButtonInlineCreateElement } from './uui-button-inline-create.element';
2+
import { defineElement } from '@umbraco-ui/uui-base/lib/registration';
3+
4+
defineElement('uui-button-inline-create', UUIButtonInlineCreateElement as any);

‎src/components/uui-inline-create-button/uui-inline-create-button.element.ts renamed to ‎packages/uui-button-inline-create/lib/uui-button-inline-create.element.ts

+25-17
Original file line numberDiff line numberDiff line change
@@ -6,42 +6,44 @@ import {
66
UUIBlinkAnimationValue,
77
} from '@umbraco-ui/uui-base/lib/animations';
88
import { LabelMixin } from '@umbraco-ui/uui-base/lib/mixins';
9-
import { UUIInlineCreateButtonEvent } from './UUIInlineCreateButtonEvent';
9+
import { UUIButtonInlineCreateEvent } from './UUIButtonInlineCreateEvent';
1010
/**
1111
* @element uui-inline-create-button
1212
* @description - Special button for creating new elements
1313
* @attr {Boolean} vertical - display vertical version of the button
1414
* @fires click on user click
1515
*/
1616

17-
export class UUIInlineCreateButtonElement extends LabelMixin('', LitElement) {
17+
export class UUIButtonInlineCreateElement extends LabelMixin('', LitElement) {
1818
static styles = [
1919
UUIBlinkKeyframes,
2020
css`
2121
:host {
22-
display: inline-block;
22+
display: flex;
23+
height: 20px;
2324
width: 100%;
2425
position: relative;
26+
margin: -8px 0;
2527
}
2628
2729
:host([vertical]) {
2830
height: 100%;
2931
}
3032
3133
#button-wrapper {
32-
position: absolute;
34+
display: flex;
35+
justify-content: center;
36+
align-items: center;
3337
38+
position: absolute;
3439
z-index: 1;
35-
3640
outline: 0;
37-
height: 12px;
38-
margin-top: -9px;
39-
padding-top: 6px;
40-
margin-bottom: -6px;
4141
transition: opacity 0.24s;
4242
display: inline-flex;
4343
width: 100%;
4444
border: none;
45+
height: 100%;
46+
padding: 0;
4547
4648
text-decoration: none;
4749
background: transparent;
@@ -71,7 +73,8 @@ export class UUIInlineCreateButtonElement extends LabelMixin('', LitElement) {
7173
#button-wrapper:before {
7274
content: '';
7375
position: absolute;
74-
top: 5px;
76+
top: 50%;
77+
transform: translateY(-50%);
7578
right: 0;
7679
left: 0;
7780
height: 2px;
@@ -95,19 +98,20 @@ export class UUIInlineCreateButtonElement extends LabelMixin('', LitElement) {
9598
);
9699
}
97100
101+
:host(:not(:hover)) #plus:not(:focus) {
102+
left: 50% !important;
103+
}
104+
98105
#plus {
99106
position: absolute;
100-
top: 9px;
101-
left: 14px;
102107
display: flex;
103108
justify-content: center;
104109
align-items: center;
105110
pointer-events: none;
106111
box-sizing: border-box;
107112
width: 28px;
108113
height: 28px;
109-
margin-left: -24px;
110-
margin-top: -16px;
114+
margin-left: -12px;
111115
border-radius: 3em;
112116
font-size: 14px;
113117
border: 2px solid var(--uui-interface-selected, #2152a3);
@@ -117,7 +121,8 @@ export class UUIInlineCreateButtonElement extends LabelMixin('', LitElement) {
117121
118122
opacity: 0;
119123
transform: scale(0);
120-
transition: transform 240ms ease-in, opacity 240ms;
124+
transition: transform 240ms ease-in, opacity 240ms,
125+
left 100ms linear 150ms;
121126
}
122127
:host(:focus) #plus,
123128
:host(:focus-within) #plus,
@@ -158,9 +163,12 @@ export class UUIInlineCreateButtonElement extends LabelMixin('', LitElement) {
158163
this.position = this.vertical ? e.offsetY : e.offsetX;
159164
}
160165

161-
private _handleClick() {
166+
private _handleClick(e: MouseEvent) {
167+
e.preventDefault();
168+
e.stopImmediatePropagation();
169+
162170
this.dispatchEvent(
163-
new UUIInlineCreateButtonEvent(UUIInlineCreateButtonEvent.CLICK)
171+
new UUIButtonInlineCreateEvent(UUIButtonInlineCreateEvent.CLICK)
164172
);
165173
}
166174

‎packages/uui-button-inline-create/lib/uui-button-inline-create.story.ts

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
import { Story } from '@storybook/web-components';
2+
import { html } from 'lit-html';
3+
import '@umbraco-ui/uui-button-inline-create/lib/index';
4+
5+
export default {
6+
id: 'uui-button-inline-create',
7+
title: 'Buttons/Button Inline Create',
8+
component: 'uui-button-inline-create',
9+
parameters: {
10+
docs: {
11+
source: {
12+
code: `<uui-button-inline-create></uui-button-inline-create>`,
13+
},
14+
},
15+
},
16+
};
17+
18+
const words = ['Hello', 'World', 'Umbraco', 'Code', 'Cloud', 'Friendly'];
19+
20+
const getRandomWord = () => {
21+
const index = Math.floor(Math.random() * (words.length - 1));
22+
23+
return words[index];
24+
};
25+
26+
const insertBox = (e: any) => {
27+
const div = document.createElement('div');
28+
const button = document.createElement('uui-button');
29+
const buttonInline = document.createElement('uui-button-inline-create');
30+
buttonInline.addEventListener('click', insertBox);
31+
button.innerHTML = getRandomWord();
32+
button.setAttribute('look', 'outline');
33+
button.style.width = '100%';
34+
button.style.height = '50px';
35+
36+
div.appendChild(button);
37+
div.appendChild(buttonInline);
38+
39+
e.target.parentElement.insertAdjacentElement('afterend', div);
40+
};
41+
42+
const createBox = () => html`<div>
43+
<uui-button look="outline" style="width: 100%; height: 50px;"
44+
>${getRandomWord()}</uui-button
45+
>
46+
<uui-button-inline-create @click=${insertBox}></uui-button-inline-create>
47+
</div>`;
48+
49+
const createBoxes = (count: Number) => {
50+
const boxes = [];
51+
for (let index = 0; index < count; index++) {
52+
boxes.push(createBox());
53+
}
54+
return boxes;
55+
};
56+
57+
export const Vertical: Story = () =>
58+
html`<div id="container" style="max-width: 500px">${createBoxes(5)}</div>`;
59+
60+
// export const Default = () => html`
61+
// <div style="width: 50vw">
62+
// <uui-button-inline-create></uui-button-inline-create>
63+
// </div>
64+
// `;
65+
// export const Vertical = () => html`
66+
// <div style="height: 20vw">
67+
// <uui-button-inline-create vertical></uui-button-inline-create>
68+
// </div>
69+
// `;

‎packages/uui-button-inline-create/lib/uui-button-inline-create.test.ts

+17
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import { html, fixture, expect } from '@open-wc/testing';
2+
import { UUIButtonInlineCreateElement } from './uui-button-inline-create.element';
3+
import '.';
4+
5+
describe('UUIButtonInlineCreateElement', () => {
6+
let element: UUIButtonInlineCreateElement;
7+
8+
beforeEach(async () => {
9+
element = await fixture(
10+
html` <uui-button-inline-create></uui-button-inline-create> `
11+
);
12+
});
13+
14+
it('passes the a11y audit', async () => {
15+
await expect(element).shadowDom.to.be.accessible();
16+
});
17+
});

‎packages/uui-button-inline-create/package.json

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
{
2+
"name": "@umbraco-ui/uui-button-inline-create",
3+
"version": "0.0.0",
4+
"license": "MIT",
5+
"keywords": [
6+
"Umbraco",
7+
"Custom elements",
8+
"Web components",
9+
"UI",
10+
"Lit",
11+
"Button Inline Create"
12+
],
13+
"description": "Umbraco UI button-inline-create component",
14+
"repository": {
15+
"type": "git",
16+
"url": "https://github.com/umbraco/Umbraco.UI.git",
17+
"directory": "packages/uui-button-inline-create"
18+
},
19+
"bugs": {
20+
"url": "https://github.com/umbraco/Umbraco.UI/issues"
21+
},
22+
"main": "./dist/uui-button-inline-create.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.13"
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-button-inline-create"
43+
}

‎packages/uui-button-inline-create/rollup.config.js

+6
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-button-inline-create.element'],
5+
bundle: 'index',
6+
});

‎packages/uui-button-inline-create/tsconfig.json

+17
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+
}

‎src/components/uui-inline-create-button/UUIInlineCreateButtonEvent.ts

-9
This file was deleted.

‎src/components/uui-inline-create-button/index.ts

-3
This file was deleted.

‎src/components/uui-inline-create-button/uui-inline-create-button.story.ts

-19
This file was deleted.

‎src/components/uui-inline-create-button/uui-inline-create-button.test.ts

-21
This file was deleted.

0 commit comments

Comments
 (0)
Please sign in to comment.