From e9a9e8aa7ee5b2af96bf236a383b1e7ba4f4dda0 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Fri, 17 Jan 2025 16:16:14 -0800 Subject: [PATCH 1/9] chore: test formkit dnd --- package-lock.json | 7 + packages/calcite-components/package.json | 1 + .../src/components/tile-group/tile-group.tsx | 39 +- .../src/components/tile/tile.tsx | 3 + .../src/demos/tile-group.html | 2580 +---------------- 5 files changed, 57 insertions(+), 2573 deletions(-) diff --git a/package-lock.json b/package-lock.json index 4f229c17029..43ec1aa1731 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1749,6 +1749,12 @@ "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.9.tgz", "integrity": "sha512-MDWhGtE+eHw5JW7lq4qhc5yRLS11ERl1c7Z6Xd0a58DozHES6EnNNwUWbMiG4J9Cgj053Bhk8zvlhFYKVhULwg==" }, + "node_modules/@formkit/drag-and-drop": { + "version": "0.3.3", + "resolved": "https://registry.npmjs.org/@formkit/drag-and-drop/-/drag-and-drop-0.3.3.tgz", + "integrity": "sha512-/2o1ud4o6aw+du8KZcLwS3pKlGkwFLnVIIIcC/YI12XJ3J9Z5E1mpKz9thodzklNI9njUk54iyk7jZK2cE55Nw==", + "license": "MIT" + }, "node_modules/@gar/promisify": { "version": "1.1.3", "resolved": "https://registry.npmjs.org/@gar/promisify/-/promisify-1.1.3.tgz", @@ -31905,6 +31911,7 @@ "@esri/calcite-ui-icons": "4.0.0-next.9", "@floating-ui/dom": "^1.6.12", "@floating-ui/utils": "^0.2.8", + "@formkit/drag-and-drop": "0.3.3", "@types/color": "^4.2.0", "@types/sortablejs": "^1.15.8", "color": "^4.2.3", diff --git a/packages/calcite-components/package.json b/packages/calcite-components/package.json index 4a019c488c1..c9682d2606d 100644 --- a/packages/calcite-components/package.json +++ b/packages/calcite-components/package.json @@ -75,6 +75,7 @@ "@esri/calcite-ui-icons": "4.0.0-next.9", "@floating-ui/dom": "^1.6.12", "@floating-ui/utils": "^0.2.8", + "@formkit/drag-and-drop": "0.3.3", "@types/color": "^4.2.0", "@types/sortablejs": "^1.15.8", "color": "^4.2.3", diff --git a/packages/calcite-components/src/components/tile-group/tile-group.tsx b/packages/calcite-components/src/components/tile-group/tile-group.tsx index 9c3efee2545..ef89a1482e8 100644 --- a/packages/calcite-components/src/components/tile-group/tile-group.tsx +++ b/packages/calcite-components/src/components/tile-group/tile-group.tsx @@ -1,6 +1,7 @@ // @ts-strict-ignore import { PropertyValues } from "lit"; -import { LitElement, property, createEvent, h, JsxNode } from "@arcgis/lumina"; +import { LitElement, property, createEvent, h, JsxNode, state } from "@arcgis/lumina"; +import { dragAndDrop } from "@formkit/drag-and-drop"; import { InteractiveComponent, InteractiveContainer, @@ -8,7 +9,7 @@ import { } from "../../utils/interactive"; import { Alignment, Layout, Scale, SelectionAppearance, SelectionMode } from "../interfaces"; import { createObserver } from "../../utils/observers"; -import { focusElementInGroup } from "../../utils/dom"; +import { focusElementInGroup, getRootNode } from "../../utils/dom"; import { SelectableGroupComponent } from "../../utils/selectableComponent"; import type { Tile } from "../tile/tile"; import { CSS } from "./resources"; @@ -35,6 +36,8 @@ export class TileGroup private items: Tile["el"][] = []; + @state() private values: string[] = []; + private mutationObserver = createObserver("mutation", () => this.updateTiles()); private slotEl: HTMLSlotElement; @@ -135,8 +138,33 @@ export class TileGroup updateHostInteraction(this); } - loaded(): void { + async loaded(): Promise { + await this.componentOnReady(); this.updateSelectedItems(); + dragAndDrop({ + parent: this.el, + + getValues: () => { + console.log("get values", this.values); + return this.values; + }, + + setValues: (newValues) => { + console.log("new values", newValues); + this.values = newValues; + }, + + config: { + root: getRootNode(this.el), + onSort: (event) => { + console.log(event); + const values = event.values as string[]; + const items = Array.from(this.el.children) as Tile["el"][]; + items.sort((a, b) => (values.indexOf(a.value) > values.indexOf(b.value) ? 1 : -1)); + items.forEach((item) => this.el.appendChild(item)); + }, + }, + }); } override disconnectedCallback(): void { @@ -199,8 +227,11 @@ export class TileGroup } } - private updateTiles(): void { + private async updateTiles(): Promise { + await this.componentOnReady(); this.items = this.getSlottedTiles(); + this.values = this.items?.map((el) => el.value) ?? []; + console.log(this.values); this.items?.forEach((el) => { el.alignment = this.alignment; el.interactive = true; diff --git a/packages/calcite-components/src/components/tile/tile.tsx b/packages/calcite-components/src/components/tile/tile.tsx index 8764493c981..ad4b4800d1b 100644 --- a/packages/calcite-components/src/components/tile/tile.tsx +++ b/packages/calcite-components/src/components/tile/tile.tsx @@ -148,6 +148,9 @@ export class Tile extends LitElement implements InteractiveComponent, Selectable SelectionMode > = "none"; + /** The component's value. */ + @property() value: string; + // #endregion // #region Public Methods diff --git a/packages/calcite-components/src/demos/tile-group.html b/packages/calcite-components/src/demos/tile-group.html index 81310e0544a..f24fb467006 100644 --- a/packages/calcite-components/src/demos/tile-group.html +++ b/packages/calcite-components/src/demos/tile-group.html @@ -60,2598 +60,40 @@ heading="Tile heading lorem ipsum" description="Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collab on thinking to further the overall." icon="layers" + value="one" selected > - - - - - - - - - - - -
- multiple - - - - - - - - - - - - - - - -
-
- none - - - - - - - - - - - - - - - -
- - - -
-

horizontal

-
- -
-
-
small
-
medium
-
large
-
- - -
-
single selection-appearance="border"
-
- - - - - - -
-
- - - - - - -
-
- - - - - - -
-
- - -
-
multiple selection-appearance="border"
-
- - - - - - -
-
- - - - - - -
-
- - - - - - -
-
- - -
-
single-persist
-
- - - - - - -
-
- - - - - - -
-
- - - - - - -
-
- - -
-
none
-
- - - - - - -
-
- - - - - - -
-
- - - - - - -
-
- - -
-
center alignment
-
- - - - - - - - - - - - - - - - - - -
-
- - - - - - - - - - - - - - - - - - -
-
- - - - - - - - - - - - - - - - - - -
-
- - -
-
links
-
- - - - - - -
-
- - - - - - -
-
- - - - - - -
-
- - -
-
disabled
-
- - - - - - -
-
- - - - - - -
-
- - - - - - -
-
- - -
-
disabled links
-
- - - - - - -
-
- - - - - - -
-
- - - - - - -
-
- - -
-
heading
-
- - - - - - -
-
- - - - - - -
-
- - - - - - -
-
- - -
-
heading links
-
- - - - - - -
-
- - - - - - -
-
- - - - - - -
-
- - -
-
description
-
- - - - - - -
-
- - - - - - -
-
- - - - - - -
-
- - -
-
description links
-
- - - - - - -
-
- - - - - - -
-
- - - - - - -
-
- - -
-
heading and description
-
- - - - - - -
-
- - - - - - -
-
- - - - - - -
-
- - -
-
heading and description links
-
- - - - - - -
-
- - - - - - -
-
- - - - - - -
-
- - -
-
icon and heading (large visual)
-
- - - - - - -
-
- - - - - - -
-
- - - - - - -
-
- - -
-
icon and heading (large visual) links
-
- - - - - - -
-
- - - - - - -
-
- - - - - - -
-
- - -
-
content-top slotted images
-
- - - - - - - - - - - - - - -
-
- - - - - - - - - - - - - - -
-
- - - - - - - - - - - - - - -
-
- - -
-
content-bottom slotted images
-
- - - - - - - - - - - - - - -
-
- - - - - - - - - - - - - - -
-
- - - - - - - - - - - - - - -
-
- - -
-
slotted images in both slots
-
- - - - - - - - - - - - - - - - - - -
-
- - - - - - - - - - - - - - - - - - -
-
- - - - - - - - - - - - - - - - - - -
-
- - - - -
-
themed single
-
- - - - - - -
-
- - - - - - -
-
- - - - - - -
-
- - -
-
themed multiple
-
- - - - - - -
-
- - - - - - -
-
- - - - - - -
-
-
- - -
- - -
-

vertical

-
- -
-
-
small
-
medium
-
large
-
- - -
-
single
-
- - - - - - -
-
- - - - - - -
-
- - - - - - -
-
- - -
-
single selection-appearance="border"
-
- - - - - - -
-
- - - - - - -
-
- - - - - - -
-
- - -
-
multiple
-
- - - - - - -
-
- - - - - - -
-
- - - - - - -
-
- - -
-
single-persist
-
- - - - - - -
-
- - - - - - -
-
- - - - - - -
-
- - -
-
none
-
- - - - - - -
-
- - - - - - -
-
- - - - - - -
-
- - -
-
links
-
- - - - - - -
-
- - - - - - -
-
- - - - - - -
-
- - -
-
disabled
-
- - - - - - -
-
- - - - - - -
-
- - - - - - -
-
- - -
-
heading
-
- - - - - - -
-
- - - - - - -
-
- - - - - -
- -
-
heading links
-
- - - - - - -
-
- - - - - - -
-
- - - - - - -
-
+ - -
-
description
-
- - - - - - -
-
- - - - - - -
-
- - - - - - -
-
+ - -
-
description links
-
- - - - - - -
-
- - - - - - -
-
- - - - - - -
-
+ - -
-
heading and description
-
- - - - - - -
-
- - - - - - -
-
- - - - - - -
-
+ - -
-
heading and description links
-
- - - - - - -
-
- - - - - - -
-
- - - - - - -
-
+ - -
-
icon and heading (large visual)
-
- - - - - - -
-
- - - - - - -
-
- - - - - - -
-
+ - -
-
icon and heading (large visual) links
-
- - - - - - -
-
- - - - - - -
-
- - - - - - -
-
+ - - -
-
themed
-
- - - - - - -
-
- - - - - - -
-
- - - - - - -
-
-
+