From 6ee76fe665349953fd649bed1d48e49bac3002e2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jesper=20M=C3=B8ller=20Jensen?= <26099018+JesmoDev@users.noreply.github.com> Date: Tue, 23 Jan 2024 10:07:34 +0100 Subject: [PATCH 1/3] add href and target --- .../lib/uui-button-inline-create.element.ts | 75 +++++++++++++++---- 1 file changed, 59 insertions(+), 16 deletions(-) diff --git a/packages/uui-button-inline-create/lib/uui-button-inline-create.element.ts b/packages/uui-button-inline-create/lib/uui-button-inline-create.element.ts index 8b4052bcf..8ea621562 100644 --- a/packages/uui-button-inline-create/lib/uui-button-inline-create.element.ts +++ b/packages/uui-button-inline-create/lib/uui-button-inline-create.element.ts @@ -6,6 +6,7 @@ import { defineElement } from '@umbraco-ui/uui-base/lib/registration'; import { css, html, LitElement } from 'lit'; import { property, state } from 'lit/decorators.js'; import { styleMap } from 'lit/directives/style-map.js'; +import { ifDefined } from 'lit/directives/if-defined.js'; import { UUIButtonInlineCreateEvent } from './UUIButtonInlineCreateEvent'; @@ -37,8 +38,26 @@ export class UUIButtonInlineCreateElement extends LitElement { @property({ type: Boolean, reflect: true }) vertical = false; + /** + * Set an href, this will turns the button into an anchor tag. + * @type {string} + * @attr + * @default undefined + */ + @property({ type: String }) + public href?: string; + + /** + * Set an anchor tag target, only used when using href. + * @type {string} + * @attr + * @default undefined + */ + @property({ type: String }) + public target?: '_blank' | '_parent' | '_self' | '_top'; + private _onMouseMove(e: MouseEvent) { - this._position = this.vertical ? e.offsetY : e.offsetX; + this._position = (this.vertical ? e.offsetY : e.offsetX) + 5; } private _handleClick(e: MouseEvent) { @@ -50,31 +69,55 @@ export class UUIButtonInlineCreateElement extends LitElement { ); } - render() { + #renderContent() { + return html` +
+ + + +
+ `; + } + + #renderLink() { + return html` + ${this.#renderContent()} + `; + } + + #renderButton() { return html` `; } + render() { + return this.href ? this.#renderLink() : this.#renderButton(); + } + static styles = [ UUIBlinkKeyframes, css` From 2704134032462fd3f8ef91d13d52897e2231b8d7 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 23 Jan 2024 15:58:49 +0100 Subject: [PATCH 2/3] re position the create-circle --- .../lib/uui-button-inline-create.element.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/uui-button-inline-create/lib/uui-button-inline-create.element.ts b/packages/uui-button-inline-create/lib/uui-button-inline-create.element.ts index 8ea621562..be69d9925 100644 --- a/packages/uui-button-inline-create/lib/uui-button-inline-create.element.ts +++ b/packages/uui-button-inline-create/lib/uui-button-inline-create.element.ts @@ -57,7 +57,7 @@ export class UUIButtonInlineCreateElement extends LitElement { public target?: '_blank' | '_parent' | '_self' | '_top'; private _onMouseMove(e: MouseEvent) { - this._position = (this.vertical ? e.offsetY : e.offsetX) + 5; + this._position = (this.vertical ? e.offsetY : e.offsetX) - 5; } private _handleClick(e: MouseEvent) { @@ -248,12 +248,12 @@ export class UUIButtonInlineCreateElement extends LitElement { } :host(:not([vertical])) #plus { - margin-left: -21px; + margin-left: -18px; } :host([vertical]) #plus { left: -4px; - margin-top: -21px; + margin-top: -18px; } #button-wrapper:focus #plus { From d577df55b306d7be41c4b8462fe20ee0e4b0396a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Niels=20Lyngs=C3=B8?= Date: Tue, 23 Jan 2024 16:32:39 +0100 Subject: [PATCH 3/3] no blur and better story --- .../lib/uui-button-inline-create.element.ts | 3 + .../lib/uui-button-inline-create.story.ts | 75 +++++++++++++++++-- 2 files changed, 70 insertions(+), 8 deletions(-) diff --git a/packages/uui-button-inline-create/lib/uui-button-inline-create.element.ts b/packages/uui-button-inline-create/lib/uui-button-inline-create.element.ts index be69d9925..ded3f4129 100644 --- a/packages/uui-button-inline-create/lib/uui-button-inline-create.element.ts +++ b/packages/uui-button-inline-create/lib/uui-button-inline-create.element.ts @@ -64,6 +64,9 @@ export class UUIButtonInlineCreateElement extends LitElement { e.preventDefault(); e.stopImmediatePropagation(); + // We do not want to focus the button after click. + (e.target as any)?.blur?.(); + this.dispatchEvent( new UUIButtonInlineCreateEvent(UUIButtonInlineCreateEvent.CLICK) ); diff --git a/packages/uui-button-inline-create/lib/uui-button-inline-create.story.ts b/packages/uui-button-inline-create/lib/uui-button-inline-create.story.ts index 5612ef10e..f28cc4496 100644 --- a/packages/uui-button-inline-create/lib/uui-button-inline-create.story.ts +++ b/packages/uui-button-inline-create/lib/uui-button-inline-create.story.ts @@ -24,6 +24,7 @@ export default { const insertBox = (e: any) => { const div = document.createElement('div'); + const labelDiv = document.createElement('div'); const label = document.createElement('div'); const buttonInline = document.createElement('uui-button-inline-create'); buttonInline.addEventListener('click', insertBox); @@ -33,18 +34,31 @@ const insertBox = (e: any) => { if (e.target.vertical) { buttonInline.setAttribute('vertical', 'true'); - div.style.display = 'grid'; - div.style.gridTemplateColumns = '1fr auto'; + labelDiv.style.display = 'grid'; + labelDiv.style.gridTemplateColumns = '1fr auto'; + buttonInline.style.position = 'absolute'; + buttonInline.style.right = '0'; + buttonInline.style.top = '0'; + } else { + labelDiv.style.display = 'block'; } - div.appendChild(label); div.appendChild(buttonInline); + labelDiv.appendChild(label); + div.appendChild(labelDiv); - e.target.parentElement.insertAdjacentElement('afterend', div); + e.target.parentElement.parentElement.insertBefore( + div, + e.target.parentElement + ); }; const createBox = (vertical: boolean) => html`
+
`; const createBoxes = (count: number, vertical = false) => { @@ -66,6 +76,14 @@ const createBoxes = (count: number, vertical = false) => { for (let index = 0; index < count; index++) { boxes.push(createBox(vertical)); } + boxes.push(html` +
+ +
+ `); return boxes; }; @@ -80,6 +98,7 @@ AAAOverview.parameters = { source: { code: `
+
Item 1
Item 2
@@ -102,6 +121,7 @@ Vertical.parameters = { source: { code: `
+
Item 1
Item 2
@@ -124,6 +144,7 @@ Horizontal.parameters = { source: { code: `
+
Item 1
Item 2
@@ -135,3 +156,41 @@ Horizontal.parameters = { }, }, }; + +export const Href: Story = () => + html`

Using HREF

+
+ +
Item 1
+ +
Item 2
+ +
Item 3
+ +
`; +AAAOverview.storyName = 'Overview'; +AAAOverview.parameters = { + docs: { + source: { + code: ` +
+ +
Item 1
+ +
Item 2
+ +
Item 3
+ +
+ `, + }, + }, +};