From 2595878babc2eface767aadcdd0c8991aa1c70cf Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Fri, 30 May 2025 22:44:38 +0200 Subject: [PATCH 1/5] Add drag handle component --- packages/uui-drag-handle/README.md | 31 +++++++++++++ packages/uui-drag-handle/lib/index.ts | 1 + .../lib/uui-drag-handle.element.ts | 33 ++++++++++++++ .../lib/uui-drag-handle.story.ts | 24 ++++++++++ .../lib/uui-drag-handle.test.ts | 18 ++++++++ packages/uui-drag-handle/package.json | 44 +++++++++++++++++++ packages/uui-drag-handle/rollup.config.js | 5 +++ packages/uui-drag-handle/tsconfig.json | 17 +++++++ .../lib/UUIIconRegistryEssential.ts | 2 + .../lib/svgs/iconDrag.ts | 3 ++ .../lib/svgs/index.ts | 1 + packages/uui/lib/index.ts | 2 + 12 files changed, 181 insertions(+) create mode 100644 packages/uui-drag-handle/README.md create mode 100644 packages/uui-drag-handle/lib/index.ts create mode 100644 packages/uui-drag-handle/lib/uui-drag-handle.element.ts create mode 100644 packages/uui-drag-handle/lib/uui-drag-handle.story.ts create mode 100644 packages/uui-drag-handle/lib/uui-drag-handle.test.ts create mode 100644 packages/uui-drag-handle/package.json create mode 100644 packages/uui-drag-handle/rollup.config.js create mode 100644 packages/uui-drag-handle/tsconfig.json create mode 100644 packages/uui-icon-registry-essential/lib/svgs/iconDrag.ts diff --git a/packages/uui-drag-handle/README.md b/packages/uui-drag-handle/README.md new file mode 100644 index 000000000..e912737c6 --- /dev/null +++ b/packages/uui-drag-handle/README.md @@ -0,0 +1,31 @@ +# uui-drag-handle + +![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-drag-handle?logoColor=%231B264F) + +Umbraco style drag-handle component. + +## Installation + +### ES imports + +```zsh +npm i @umbraco-ui/uui-drag-handle +``` + +Import the registration of `` via: + +```javascript +import '@umbraco-ui/uui-drag-handle'; +``` + +When looking to leverage the `UUIDragHandleElement` base class as a type and/or for extension purposes, do so via: + +```javascript +import { UUIDragHandleElement } from '@umbraco-ui/uui-drag-handle'; +``` + +## Usage + +```html + +``` diff --git a/packages/uui-drag-handle/lib/index.ts b/packages/uui-drag-handle/lib/index.ts new file mode 100644 index 000000000..24c96bb16 --- /dev/null +++ b/packages/uui-drag-handle/lib/index.ts @@ -0,0 +1 @@ +export * from './uui-drag-handle.element'; diff --git a/packages/uui-drag-handle/lib/uui-drag-handle.element.ts b/packages/uui-drag-handle/lib/uui-drag-handle.element.ts new file mode 100644 index 000000000..34ec712a3 --- /dev/null +++ b/packages/uui-drag-handle/lib/uui-drag-handle.element.ts @@ -0,0 +1,33 @@ +import { LabelMixin } from '@umbraco-ui/uui-base/lib/mixins'; +import { defineElement } from '@umbraco-ui/uui-base/lib/registration'; +import { css, html, LitElement } from 'lit'; +import { ifDefined } from 'lit/directives/if-defined.js'; + +/** + * @element uui-drag-handle + */ +@defineElement('uui-drag-handle') +export class UUIDragHandleElement extends LabelMixin('', LitElement) { + render() { + return html``; + } + + static styles = [ + css` + :host { + cursor: grab; + } + :host:active { + cursor: grabbing; + } + `, + ]; +} + +declare global { + interface HTMLElementTagNameMap { + 'uui-drag-handle': UUIDragHandleElement; + } +} diff --git a/packages/uui-drag-handle/lib/uui-drag-handle.story.ts b/packages/uui-drag-handle/lib/uui-drag-handle.story.ts new file mode 100644 index 000000000..4df1cf52e --- /dev/null +++ b/packages/uui-drag-handle/lib/uui-drag-handle.story.ts @@ -0,0 +1,24 @@ +import type { Meta, StoryObj } from '@storybook/web-components'; + +import './uui-drag-handle.element'; +import type { UUIDragHandleElement } from './uui-drag-handle.element'; +import readme from '../README.md?raw'; + +const meta: Meta = { + id: 'uui-drag-handle', + title: 'Symbols/Drag Handle', + component: 'uui-drag-handle', + parameters: { + readme: { markdown: readme }, + docs: { + source: { + code: ``, + }, + }, + }, +}; + +export default meta; +type Story = StoryObj; + +export const Overview: Story = {}; diff --git a/packages/uui-drag-handle/lib/uui-drag-handle.test.ts b/packages/uui-drag-handle/lib/uui-drag-handle.test.ts new file mode 100644 index 000000000..ef10681c7 --- /dev/null +++ b/packages/uui-drag-handle/lib/uui-drag-handle.test.ts @@ -0,0 +1,18 @@ +import { html, fixture, expect } from '@open-wc/testing'; +import { UUIDragHandleElement } from './uui-drag-handle.element'; + +describe('UUIDragHandleElement', () => { + let element: UUIDragHandleElement; + + beforeEach(async () => { + element = await fixture(html` `); + }); + + it('is defined with its own instance', () => { + expect(element).to.be.instanceOf(UUIDragHandleElement); + }); + + it('passes the a11y audit', async () => { + await expect(element).shadowDom.to.be.accessible(); + }); +}); diff --git a/packages/uui-drag-handle/package.json b/packages/uui-drag-handle/package.json new file mode 100644 index 000000000..91657ff44 --- /dev/null +++ b/packages/uui-drag-handle/package.json @@ -0,0 +1,44 @@ +{ + "name": "@umbraco-ui/uui-drag-handle", + "version": "0.0.0", + "license": "MIT", + "keywords": [ + "Umbraco", + "Custom elements", + "Web components", + "UI", + "Lit", + "Drag Handle" + ], + "description": "Umbraco UI drag-handle component", + "repository": { + "type": "git", + "url": "https://github.com/umbraco/Umbraco.UI.git", + "directory": "packages/uui-drag-handle" + }, + "bugs": { + "url": "https://github.com/umbraco/Umbraco.UI/issues" + }, + "main": "./lib/index.js", + "module": "./lib/index.js", + "types": "./lib/index.d.ts", + "type": "module", + "customElements": "custom-elements.json", + "files": [ + "lib/**/*.d.ts", + "lib/**/*.js", + "custom-elements.json" + ], + "dependencies": { + "@umbraco-ui/uui-base": "1.14.0-rc.1" + }, + "scripts": { + "build": "npm run analyze && tsc --build --force && rollup -c rollup.config.js", + "clean": "tsc --build --clean && rimraf -g dist lib/*.js lib/**/*.js *.tgz lib/**/*.d.ts custom-elements.json", + "analyze": "web-component-analyzer **/*.element.ts --outFile custom-elements.json" + }, + "publishConfig": { + "access": "public" + }, + "homepage": "https://uui.umbraco.com/?path=/story/uui-drag-handle" +} diff --git a/packages/uui-drag-handle/rollup.config.js b/packages/uui-drag-handle/rollup.config.js new file mode 100644 index 000000000..34524a90d --- /dev/null +++ b/packages/uui-drag-handle/rollup.config.js @@ -0,0 +1,5 @@ +import { UUIProdConfig } from '../rollup-package.config.mjs'; + +export default UUIProdConfig({ + entryPoints: ['index'], +}); diff --git a/packages/uui-drag-handle/tsconfig.json b/packages/uui-drag-handle/tsconfig.json new file mode 100644 index 000000000..40d176776 --- /dev/null +++ b/packages/uui-drag-handle/tsconfig.json @@ -0,0 +1,17 @@ +// Don't edit this file directly. It is generated by /scripts/generate-ts-config.js + +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "./lib", + "rootDir": "./lib", + "composite": true + }, + "include": ["./**/*.ts"], + "exclude": ["./**/*.test.ts", "./**/*.story.ts"], + "references": [ + { + "path": "../uui-base" + } + ] +} diff --git a/packages/uui-icon-registry-essential/lib/UUIIconRegistryEssential.ts b/packages/uui-icon-registry-essential/lib/UUIIconRegistryEssential.ts index 352fb36af..d86d7a83a 100644 --- a/packages/uui-icon-registry-essential/lib/UUIIconRegistryEssential.ts +++ b/packages/uui-icon-registry-essential/lib/UUIIconRegistryEssential.ts @@ -17,6 +17,7 @@ import { iconFavorite, iconFolder, iconForbidden, + iconDrag, iconInfo, iconLink, iconLock, @@ -51,6 +52,7 @@ export class UUIIconRegistryEssential extends UUIIconRegistry { this.defineIcon('delete', iconDelete.strings[0]); this.defineIcon('document', iconDocument.strings[0]); this.defineIcon('download', iconDownload.strings[0]); + this.defineIcon('drag', iconDrag.strings[0]); this.defineIcon('edit', iconEdit.strings[0]); this.defineIcon('favorite', iconFavorite.strings[0]); this.defineIcon('folder', iconFolder.strings[0]); diff --git a/packages/uui-icon-registry-essential/lib/svgs/iconDrag.ts b/packages/uui-icon-registry-essential/lib/svgs/iconDrag.ts new file mode 100644 index 000000000..2469587c2 --- /dev/null +++ b/packages/uui-icon-registry-essential/lib/svgs/iconDrag.ts @@ -0,0 +1,3 @@ +import { svg } from 'lit'; + +export const iconDrag = svg``; diff --git a/packages/uui-icon-registry-essential/lib/svgs/index.ts b/packages/uui-icon-registry-essential/lib/svgs/index.ts index d55a08c18..d4cfbf0f6 100644 --- a/packages/uui-icon-registry-essential/lib/svgs/index.ts +++ b/packages/uui-icon-registry-essential/lib/svgs/index.ts @@ -10,6 +10,7 @@ export * from './iconCopy'; export * from './iconDelete'; export * from './iconDocument'; export * from './iconDownload'; +export * from './iconDrag'; export * from './iconEdit'; export * from './iconFavorite'; export * from './iconFolder'; diff --git a/packages/uui/lib/index.ts b/packages/uui/lib/index.ts index aa3f630c3..4076c484b 100644 --- a/packages/uui/lib/index.ts +++ b/packages/uui/lib/index.ts @@ -81,3 +81,5 @@ export * from '@umbraco-ui/uui-toast-notification-layout/lib'; export * from '@umbraco-ui/uui-toast-notification/lib'; export * from '@umbraco-ui/uui-toggle/lib'; export * from '@umbraco-ui/uui-visually-hidden/lib'; + +export * from '@umbraco-ui/uui-drag-handle/lib/index.js'; From 9b8a7cd97da091ee36856bc2cf66f67a50837c22 Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Tue, 3 Jun 2025 01:22:02 +0200 Subject: [PATCH 2/5] Update packages/uui/lib/index.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- packages/uui/lib/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/uui/lib/index.ts b/packages/uui/lib/index.ts index 4076c484b..d1b357e06 100644 --- a/packages/uui/lib/index.ts +++ b/packages/uui/lib/index.ts @@ -82,4 +82,4 @@ export * from '@umbraco-ui/uui-toast-notification/lib'; export * from '@umbraco-ui/uui-toggle/lib'; export * from '@umbraco-ui/uui-visually-hidden/lib'; -export * from '@umbraco-ui/uui-drag-handle/lib/index.js'; +export * from '@umbraco-ui/uui-drag-handle/lib'; From 02d3112d00524abc889391c1aa70f78597301fae Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Tue, 3 Jun 2025 01:23:01 +0200 Subject: [PATCH 3/5] Update packages/uui-icon-registry-essential/lib/svgs/index.ts Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- packages/uui-icon-registry-essential/lib/svgs/index.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/uui-icon-registry-essential/lib/svgs/index.ts b/packages/uui-icon-registry-essential/lib/svgs/index.ts index d4cfbf0f6..3b01fdefb 100644 --- a/packages/uui-icon-registry-essential/lib/svgs/index.ts +++ b/packages/uui-icon-registry-essential/lib/svgs/index.ts @@ -9,8 +9,8 @@ export * from './iconColorPicker'; export * from './iconCopy'; export * from './iconDelete'; export * from './iconDocument'; -export * from './iconDownload'; export * from './iconDrag'; +export * from './iconDownload'; export * from './iconEdit'; export * from './iconFavorite'; export * from './iconFolder'; From f8eddcfff4c057327e654ac26dcca82e429a0c45 Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Sat, 28 Jun 2025 13:52:08 +0200 Subject: [PATCH 4/5] Rename to uui-symbol-drag --- packages/uui-drag-handle/README.md | 14 +++++++------- packages/uui-drag-handle/lib/index.ts | 2 +- .../uui-drag-handle/lib/uui-drag-handle.element.ts | 6 +++--- .../uui-drag-handle/lib/uui-drag-handle.story.ts | 10 +++++----- .../uui-drag-handle/lib/uui-drag-handle.test.ts | 4 ++-- packages/uui-drag-handle/package.json | 6 +++--- packages/uui/lib/index.ts | 2 +- 7 files changed, 22 insertions(+), 22 deletions(-) diff --git a/packages/uui-drag-handle/README.md b/packages/uui-drag-handle/README.md index e912737c6..c52bab05e 100644 --- a/packages/uui-drag-handle/README.md +++ b/packages/uui-drag-handle/README.md @@ -1,6 +1,6 @@ -# uui-drag-handle +# uui-symbol-drag -![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-drag-handle?logoColor=%231B264F) +![npm](https://img.shields.io/npm/v/@umbraco-ui/uui-symbol-drag?logoColor=%231B264F) Umbraco style drag-handle component. @@ -9,23 +9,23 @@ Umbraco style drag-handle component. ### ES imports ```zsh -npm i @umbraco-ui/uui-drag-handle +npm i @umbraco-ui/uui-symbol-drag ``` -Import the registration of `` via: +Import the registration of `` via: ```javascript -import '@umbraco-ui/uui-drag-handle'; +import '@umbraco-ui/uui-symbol-drag'; ``` When looking to leverage the `UUIDragHandleElement` base class as a type and/or for extension purposes, do so via: ```javascript -import { UUIDragHandleElement } from '@umbraco-ui/uui-drag-handle'; +import { UUIDragHandleElement } from '@umbraco-ui/uui-symbol-drag'; ``` ## Usage ```html - + ``` diff --git a/packages/uui-drag-handle/lib/index.ts b/packages/uui-drag-handle/lib/index.ts index 24c96bb16..6a0ddd6cc 100644 --- a/packages/uui-drag-handle/lib/index.ts +++ b/packages/uui-drag-handle/lib/index.ts @@ -1 +1 @@ -export * from './uui-drag-handle.element'; +export * from './uui-symbol-drag.element'; diff --git a/packages/uui-drag-handle/lib/uui-drag-handle.element.ts b/packages/uui-drag-handle/lib/uui-drag-handle.element.ts index 34ec712a3..7607719cb 100644 --- a/packages/uui-drag-handle/lib/uui-drag-handle.element.ts +++ b/packages/uui-drag-handle/lib/uui-drag-handle.element.ts @@ -4,9 +4,9 @@ import { css, html, LitElement } from 'lit'; import { ifDefined } from 'lit/directives/if-defined.js'; /** - * @element uui-drag-handle + * @element uui-symbol-drag */ -@defineElement('uui-drag-handle') +@defineElement('uui-symbol-drag') export class UUIDragHandleElement extends LabelMixin('', LitElement) { render() { return html` = { - id: 'uui-drag-handle', + id: 'uui-symbol-drag', title: 'Symbols/Drag Handle', - component: 'uui-drag-handle', + component: 'uui-symbol-drag', parameters: { readme: { markdown: readme }, docs: { source: { - code: ``, + code: ``, }, }, }, diff --git a/packages/uui-drag-handle/lib/uui-drag-handle.test.ts b/packages/uui-drag-handle/lib/uui-drag-handle.test.ts index ef10681c7..03c5a7177 100644 --- a/packages/uui-drag-handle/lib/uui-drag-handle.test.ts +++ b/packages/uui-drag-handle/lib/uui-drag-handle.test.ts @@ -1,11 +1,11 @@ import { html, fixture, expect } from '@open-wc/testing'; -import { UUIDragHandleElement } from './uui-drag-handle.element'; +import { UUIDragHandleElement } from './uui-symbol-drag.element'; describe('UUIDragHandleElement', () => { let element: UUIDragHandleElement; beforeEach(async () => { - element = await fixture(html` `); + element = await fixture(html` `); }); it('is defined with its own instance', () => { diff --git a/packages/uui-drag-handle/package.json b/packages/uui-drag-handle/package.json index 91657ff44..a24533960 100644 --- a/packages/uui-drag-handle/package.json +++ b/packages/uui-drag-handle/package.json @@ -1,5 +1,5 @@ { - "name": "@umbraco-ui/uui-drag-handle", + "name": "@umbraco-ui/uui-symbol-drag", "version": "0.0.0", "license": "MIT", "keywords": [ @@ -14,7 +14,7 @@ "repository": { "type": "git", "url": "https://github.com/umbraco/Umbraco.UI.git", - "directory": "packages/uui-drag-handle" + "directory": "packages/uui-symbol-drag" }, "bugs": { "url": "https://github.com/umbraco/Umbraco.UI/issues" @@ -40,5 +40,5 @@ "publishConfig": { "access": "public" }, - "homepage": "https://uui.umbraco.com/?path=/story/uui-drag-handle" + "homepage": "https://uui.umbraco.com/?path=/story/uui-symbol-drag" } diff --git a/packages/uui/lib/index.ts b/packages/uui/lib/index.ts index d1b357e06..f79063d4f 100644 --- a/packages/uui/lib/index.ts +++ b/packages/uui/lib/index.ts @@ -82,4 +82,4 @@ export * from '@umbraco-ui/uui-toast-notification/lib'; export * from '@umbraco-ui/uui-toggle/lib'; export * from '@umbraco-ui/uui-visually-hidden/lib'; -export * from '@umbraco-ui/uui-drag-handle/lib'; +export * from '@umbraco-ui/uui-symbol-drag/lib'; From cfba73788d87e3df5b7e50e637c239d37f825eff Mon Sep 17 00:00:00 2001 From: Bjarne Fyrstenborg Date: Sat, 28 Jun 2025 13:54:16 +0200 Subject: [PATCH 5/5] Rename folder and files as well --- packages/{uui-drag-handle => uui-symbol-drag}/README.md | 0 packages/{uui-drag-handle => uui-symbol-drag}/lib/index.ts | 0 .../lib/uui-symbol-drag.element.ts} | 0 .../lib/uui-symbol-drag.story.ts} | 0 .../lib/uui-symbol-drag.test.ts} | 0 packages/{uui-drag-handle => uui-symbol-drag}/package.json | 0 packages/{uui-drag-handle => uui-symbol-drag}/rollup.config.js | 0 packages/{uui-drag-handle => uui-symbol-drag}/tsconfig.json | 0 8 files changed, 0 insertions(+), 0 deletions(-) rename packages/{uui-drag-handle => uui-symbol-drag}/README.md (100%) rename packages/{uui-drag-handle => uui-symbol-drag}/lib/index.ts (100%) rename packages/{uui-drag-handle/lib/uui-drag-handle.element.ts => uui-symbol-drag/lib/uui-symbol-drag.element.ts} (100%) rename packages/{uui-drag-handle/lib/uui-drag-handle.story.ts => uui-symbol-drag/lib/uui-symbol-drag.story.ts} (100%) rename packages/{uui-drag-handle/lib/uui-drag-handle.test.ts => uui-symbol-drag/lib/uui-symbol-drag.test.ts} (100%) rename packages/{uui-drag-handle => uui-symbol-drag}/package.json (100%) rename packages/{uui-drag-handle => uui-symbol-drag}/rollup.config.js (100%) rename packages/{uui-drag-handle => uui-symbol-drag}/tsconfig.json (100%) diff --git a/packages/uui-drag-handle/README.md b/packages/uui-symbol-drag/README.md similarity index 100% rename from packages/uui-drag-handle/README.md rename to packages/uui-symbol-drag/README.md diff --git a/packages/uui-drag-handle/lib/index.ts b/packages/uui-symbol-drag/lib/index.ts similarity index 100% rename from packages/uui-drag-handle/lib/index.ts rename to packages/uui-symbol-drag/lib/index.ts diff --git a/packages/uui-drag-handle/lib/uui-drag-handle.element.ts b/packages/uui-symbol-drag/lib/uui-symbol-drag.element.ts similarity index 100% rename from packages/uui-drag-handle/lib/uui-drag-handle.element.ts rename to packages/uui-symbol-drag/lib/uui-symbol-drag.element.ts diff --git a/packages/uui-drag-handle/lib/uui-drag-handle.story.ts b/packages/uui-symbol-drag/lib/uui-symbol-drag.story.ts similarity index 100% rename from packages/uui-drag-handle/lib/uui-drag-handle.story.ts rename to packages/uui-symbol-drag/lib/uui-symbol-drag.story.ts diff --git a/packages/uui-drag-handle/lib/uui-drag-handle.test.ts b/packages/uui-symbol-drag/lib/uui-symbol-drag.test.ts similarity index 100% rename from packages/uui-drag-handle/lib/uui-drag-handle.test.ts rename to packages/uui-symbol-drag/lib/uui-symbol-drag.test.ts diff --git a/packages/uui-drag-handle/package.json b/packages/uui-symbol-drag/package.json similarity index 100% rename from packages/uui-drag-handle/package.json rename to packages/uui-symbol-drag/package.json diff --git a/packages/uui-drag-handle/rollup.config.js b/packages/uui-symbol-drag/rollup.config.js similarity index 100% rename from packages/uui-drag-handle/rollup.config.js rename to packages/uui-symbol-drag/rollup.config.js diff --git a/packages/uui-drag-handle/tsconfig.json b/packages/uui-symbol-drag/tsconfig.json similarity index 100% rename from packages/uui-drag-handle/tsconfig.json rename to packages/uui-symbol-drag/tsconfig.json