diff --git a/README.md b/README.md index 1ab27b7..f909d7b 100644 --- a/README.md +++ b/README.md @@ -1 +1 @@ -# tp-element +# tp-sortable diff --git a/package-lock.json b/package-lock.json new file mode 100644 index 0000000..e0195f9 --- /dev/null +++ b/package-lock.json @@ -0,0 +1,109 @@ +{ + "name": "@tp/tp-sortable", + "version": "0.0.1", + "lockfileVersion": 2, + "requires": true, + "packages": { + "": { + "name": "@tp/tp-sortable", + "version": "0.0.1", + "license": "Apache-2.0", + "dependencies": { + "lit": "^2.2.0", + "sortablejs": "^1.15.0" + } + }, + "node_modules/@lit/reactive-element": { + "version": "1.3.1", + "resolved": "https://verdaccio.codeblob.work/@lit%2freactive-element/-/reactive-element-1.3.1.tgz", + "integrity": "sha512-nOJARIr3pReqK3hfFCSW2Zg/kFcFsSAlIE7z4a0C9D2dPrgD/YSn3ZP2ET/rxKB65SXyG7jJbkynBRm+tGlacw==", + "license": "BSD-3-Clause" + }, + "node_modules/@types/trusted-types": { + "version": "2.0.2", + "resolved": "https://verdaccio.codeblob.work/@types%2ftrusted-types/-/trusted-types-2.0.2.tgz", + "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==", + "license": "MIT" + }, + "node_modules/lit": { + "version": "2.2.1", + "resolved": "https://verdaccio.codeblob.work/lit/-/lit-2.2.1.tgz", + "integrity": "sha512-dSe++R50JqrvNGXmI9OE13de1z5U/Y3J2dTm/9GC86vedI8ILoR8ZGnxfThFpvQ9m0lR0qRnIR4IiKj/jDCfYw==", + "license": "BSD-3-Clause", + "dependencies": { + "@lit/reactive-element": "^1.3.0", + "lit-element": "^3.2.0", + "lit-html": "^2.2.0" + } + }, + "node_modules/lit-element": { + "version": "3.2.0", + "resolved": "https://verdaccio.codeblob.work/lit-element/-/lit-element-3.2.0.tgz", + "integrity": "sha512-HbE7yt2SnUtg5DCrWt028oaU4D5F4k/1cntAFHTkzY8ZIa8N0Wmu92PxSxucsQSOXlODFrICkQ5x/tEshKi13g==", + "license": "BSD-3-Clause", + "dependencies": { + "@lit/reactive-element": "^1.3.0", + "lit-html": "^2.2.0" + } + }, + "node_modules/lit-html": { + "version": "2.2.1", + "resolved": "https://verdaccio.codeblob.work/lit-html/-/lit-html-2.2.1.tgz", + "integrity": "sha512-AiJ/Rs0awjICs2FioTnHSh+Np5dhYSkyRczKy3wKjp8qjLhr1Ov+GiHrUQNdX8ou1LMuznpIME990AZsa/tR8g==", + "license": "BSD-3-Clause", + "dependencies": { + "@types/trusted-types": "^2.0.2" + } + }, + "node_modules/sortablejs": { + "version": "1.15.0", + "resolved": "https://verdaccio.codeblob.work/sortablejs/-/sortablejs-1.15.0.tgz", + "integrity": "sha512-bv9qgVMjUMf89wAvM6AxVvS/4MX3sPeN0+agqShejLU5z5GX4C75ow1O2e5k4L6XItUyAK3gH6AxSbXrOM5e8w==", + "license": "MIT" + } + }, + "dependencies": { + "@lit/reactive-element": { + "version": "1.3.1", + "resolved": "https://verdaccio.codeblob.work/@lit%2freactive-element/-/reactive-element-1.3.1.tgz", + "integrity": "sha512-nOJARIr3pReqK3hfFCSW2Zg/kFcFsSAlIE7z4a0C9D2dPrgD/YSn3ZP2ET/rxKB65SXyG7jJbkynBRm+tGlacw==" + }, + "@types/trusted-types": { + "version": "2.0.2", + "resolved": "https://verdaccio.codeblob.work/@types%2ftrusted-types/-/trusted-types-2.0.2.tgz", + "integrity": "sha512-F5DIZ36YVLE+PN+Zwws4kJogq47hNgX3Nx6WyDJ3kcplxyke3XIzB8uK5n/Lpm1HBsbGzd6nmGehL8cPekP+Tg==" + }, + "lit": { + "version": "2.2.1", + "resolved": "https://verdaccio.codeblob.work/lit/-/lit-2.2.1.tgz", + "integrity": "sha512-dSe++R50JqrvNGXmI9OE13de1z5U/Y3J2dTm/9GC86vedI8ILoR8ZGnxfThFpvQ9m0lR0qRnIR4IiKj/jDCfYw==", + "requires": { + "@lit/reactive-element": "^1.3.0", + "lit-element": "^3.2.0", + "lit-html": "^2.2.0" + } + }, + "lit-element": { + "version": "3.2.0", + "resolved": "https://verdaccio.codeblob.work/lit-element/-/lit-element-3.2.0.tgz", + "integrity": "sha512-HbE7yt2SnUtg5DCrWt028oaU4D5F4k/1cntAFHTkzY8ZIa8N0Wmu92PxSxucsQSOXlODFrICkQ5x/tEshKi13g==", + "requires": { + "@lit/reactive-element": "^1.3.0", + "lit-html": "^2.2.0" + } + }, + "lit-html": { + "version": "2.2.1", + "resolved": "https://verdaccio.codeblob.work/lit-html/-/lit-html-2.2.1.tgz", + "integrity": "sha512-AiJ/Rs0awjICs2FioTnHSh+Np5dhYSkyRczKy3wKjp8qjLhr1Ov+GiHrUQNdX8ou1LMuznpIME990AZsa/tR8g==", + "requires": { + "@types/trusted-types": "^2.0.2" + } + }, + "sortablejs": { + "version": "1.15.0", + "resolved": "https://verdaccio.codeblob.work/sortablejs/-/sortablejs-1.15.0.tgz", + "integrity": "sha512-bv9qgVMjUMf89wAvM6AxVvS/4MX3sPeN0+agqShejLU5z5GX4C75ow1O2e5k4L6XItUyAK3gH6AxSbXrOM5e8w==" + } + } +} diff --git a/package.json b/package.json index c39fdff..ea2a95c 100644 --- a/package.json +++ b/package.json @@ -1,18 +1,19 @@ { - "name": "@tp/tp-element", - "version": "0.0.1", + "name": "@tp/tp-sortable", + "version": "1.0.0", "description": "", - "main": "tp-element.js", + "main": "tp-sortable.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "type": "git", - "url": "https://gitea.codeblob.work/tp-elements/tp-element.git" + "url": "https://gitea.codeblob.work/tp-elements/tp-sortable.git" }, "author": "trading_peter", "license": "Apache-2.0", "dependencies": { - "lit": "^2.2.0" + "lit": "^2.2.0", + "sortablejs": "^1.15.0" } } diff --git a/tp-element.js b/tp-element.js deleted file mode 100644 index 6a92a2f..0000000 --- a/tp-element.js +++ /dev/null @@ -1,35 +0,0 @@ -/** -@license -Copyright (c) 2022 trading_peter -This program is available under Apache License Version 2.0 -*/ - -import { LitElement, html, css } from 'lit'; - -class TpElement extends LitElement { - static get styles() { - return [ - css` - :host { - display: block; - } - ` - ]; - } - - render() { - const { } = this; - - return html` - - `; - } - - static get properties() { - return { }; - } - - -} - -window.customElements.define('tp-element', TpElement); diff --git a/tp-sortable.js b/tp-sortable.js new file mode 100644 index 0000000..731a17a --- /dev/null +++ b/tp-sortable.js @@ -0,0 +1,62 @@ +/** +@license +Copyright (c) 2022 trading_peter +This program is available under Apache License Version 2.0 +*/ + +import { LitElement, html, css } from 'lit'; +import Sortable from 'sortablejs/modular/sortable.core.esm.js'; + +class TpSortable extends LitElement { + static get styles() { + return [ + css` + :host { + display: block; + user-select: none; + } + ` + ]; + } + + render() { + return html` + + `; + } + + static get properties() { + return { + selector: { type: String }, + + handle: { type: String }, + + // Use long press gesture to activate dragging. + longPress: { type: Boolean }, + + sorting: { type: Boolean, reflect: true }, + + _sortables: { type: Array } + }; + } + + constructor() { + super(); + this.selector = 'div'; + this.handle = null; + this.longPress = false; + this.sorting = false; + this._sortables = []; + } + + firstUpdated() { + this.sortable = Sortable.create(this.querySelector('[slot="list"]'), { + animation: 150, + onSort: e => { + this.dispatchEvent(new CustomEvent('sorting-changed', { detail: e, bubbles: true, composed: true })); + } + }); + } +} + +window.customElements.define('tp-sortable', TpSortable);