Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/stagas/x-sortable
Sortable Web Component
https://github.com/stagas/x-sortable
Last synced: 14 days ago
JSON representation
Sortable Web Component
- Host: GitHub
- URL: https://github.com/stagas/x-sortable
- Owner: stagas
- License: mit
- Created: 2022-04-20T10:29:52.000Z (over 2 years ago)
- Default Branch: main
- Last Pushed: 2022-08-01T14:10:58.000Z (over 2 years ago)
- Last Synced: 2024-04-08T15:45:43.334Z (7 months ago)
- Language: TypeScript
- Size: 221 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
x-sortable 
Sortable Web Component
npm i x-sortable
pnpm add x-sortable
yarn add x-sortable
## Examples
# web
- #
view source example/web.ts
```ts
import { SortableElement } from 'x-sortable'
const style = document.createElement('style')
document.head.appendChild(style)
style.textContent = /*css*/ `
x-sortable {
display: flex;
flex-flow: column nowrap;
}
button {
padding: 10px;
background: #444;
color: #aaa;
border: 2px solid #988;
}
`
customElements.define('x-sortable', SortableElement)
const sortable = new SortableElement()
sortable.vertical = true
// sortable.selector = 'button'
const items: any = []
for (let i = 0; i < 10; i++) {
const btn = document.createElement('button')
btn.textContent = '' + i
items.push(btn)
sortable.appendChild(btn)
}
document.body.appendChild(sortable)
sortable.onsortend = ({ detail: { oldIndex, newIndex } }) => {
const item = items.splice(oldIndex, 1)[0]
items.splice(newIndex, 0, item)
for (const item of items)
sortable.appendChild(item)
}
```
## API
# SortableElement src/x-sortable.ts#L16
# constructor()
# new SortableElement()
$ src/work/stagas/sigl/dist/types/sigl.d.ts#L25 Context<SortableElement & JsxContext<SortableElement> & Omit<{
# ctor
Class<T>
<T>(ctor) =>
CleanClass<T>
ctx <T>(ctx) =>
Wrapper<T>
# Boolean src/work/stagas/sigl/dist/types/index.d.ts#L9
undefined | boolean
Number src/work/stagas/sigl/dist/types/index.d.ts#L8 undefined | number
String src/work/stagas/sigl/dist/types/index.d.ts#L7 undefined | string
"transition">> # context src/work/stagas/sigl/dist/types/sigl.d.ts#L26 ContextClass<SortableElement & JsxContext<SortableElement> & Omit<{
# ctor
Class<T>
<T>(ctor) =>
CleanClass<T>
ctx <T>(ctx) =>
Wrapper<T>
# Boolean src/work/stagas/sigl/dist/types/index.d.ts#L9
undefined | boolean
Number src/work/stagas/sigl/dist/types/index.d.ts#L8 undefined | number
String src/work/stagas/sigl/dist/types/index.d.ts#L7 undefined | string
"transition">> dispatch src/work/stagas/sigl/dist/types/events.d.ts#L4 Dispatch<# (name, detail, init)
dragElementImage src/x-sortable.ts#L30 HTMLElement
host src/work/stagas/sigl/dist/types/sigl.d.ts#L24 # item src/x-sortable.ts#L25 HTMLElement
itemPrevDisplay src/x-sortable.ts#L28 string
items = ... src/x-sortable.ts#L24 HTMLElement []
onDragEnd src/x-sortable.ts#L33 EventHandler<HTMLElement, DragEvent>
onDragOver src/x-sortable.ts#L34 EventHandler<SortableElement, DragEvent>
onDragStart src/x-sortable.ts#L32 EventHandler<HTMLElement, DragEvent>
onmounted EventHandler<SortableElement, CustomEvent<any>>
onsortend EventHandler<SortableElement, CustomEvent<{
# newIndex src/x-sortable.ts#L7
number
oldIndex src/x-sortable.ts#L7 number
onsortstart EventHandler<SortableElement, CustomEvent<{
# currentIndex src/x-sortable.ts#L6
number
onunmounted EventHandler<SortableElement, CustomEvent<any>>
placeholder src/x-sortable.ts#L22 HTMLElement
root = ... src/x-sortable.ts#L17 ShadowRoot
state = ... src/x-sortable.ts#L19 State<SortableElement, {
# Idle = 'idle'
"idle"
Sort = 'sort' "sort"
"idle" | "sort"> & EventMethods<SortableElement, { # idlecancel
CustomEvent<any>
idleend CustomEvent<any>
idlepause CustomEvent<any>
idleresume CustomEvent<any>
idlestart CustomEvent<any>
sortcancel CustomEvent<any>
sortend CustomEvent<any>
sortpause CustomEvent<any>
sortresume CustomEvent<any>
sortstart CustomEvent<any>
# idlecancel
CustomEvent<any>
idleend CustomEvent<any>
idlepause CustomEvent<any>
idleresume CustomEvent<any>
idlestart CustomEvent<any>
sortcancel CustomEvent<any>
sortend CustomEvent<any>
sortpause CustomEvent<any>
sortresume CustomEvent<any>
sortstart CustomEvent<any>
vertical = false src/x-sortable.ts#L20 boolean
created(ctx) # ctx
Context<SortableElement & JsxContext<SortableElement> & Omit<{
# ctor
Class<T>
<T>(ctor) =>
CleanClass<T>
ctx <T>(ctx) =>
Wrapper<T>
# Boolean src/work/stagas/sigl/dist/types/index.d.ts#L9
undefined | boolean
Number src/work/stagas/sigl/dist/types/index.d.ts#L8 undefined | number
String src/work/stagas/sigl/dist/types/index.d.ts#L7 undefined | string
"transition">> created(ctx) =>
- void
mounted($) src/x-sortable.ts#L36 # $
Context<SortableElement & JsxContext<SortableElement> & Omit<{
# ctor
Class<T>
<T>(ctor) =>
CleanClass<T>
ctx <T>(ctx) =>
Wrapper<T>
# Boolean src/work/stagas/sigl/dist/types/index.d.ts#L9
undefined | boolean
Number src/work/stagas/sigl/dist/types/index.d.ts#L8 undefined | number
String src/work/stagas/sigl/dist/types/index.d.ts#L7 undefined | string
"transition">> mounted($) =>
- void
on(name) # name
on<K>(name) =>
On<Fn<[ EventHandler<SortableElement, LifecycleEvents & SortableEvents [K]> ], Off>>
toJSON()
toJSON() =>
Pick<SortableElement, keyof SortableElement>
SortableEvents src/x-sortable.ts#L5 {
# sortend src/x-sortable.ts#L7
CustomEvent<{
# newIndex src/x-sortable.ts#L7
number
oldIndex src/x-sortable.ts#L7 number
sortstart src/x-sortable.ts#L6 CustomEvent<{
# currentIndex src/x-sortable.ts#L6
number
SortableState = ... src/x-sortable.ts#L10
## Credits
- [sigl](https://npmjs.org/package/sigl) by [stagas](https://github.com/stagas) – Web framework
## Contributing
[Fork](https://github.com/stagas/x-sortable/fork) or [edit](https://github.dev/stagas/x-sortable) and submit a PR.
All contributions are welcome!
## License
MIT © 2022 [stagas](https://github.com/stagas)