{"id":17857767,"url":"https://github.com/oscarmarina/sortable-controller-playground","last_synced_at":"2025-10-04T22:35:42.197Z","repository":{"id":216011167,"uuid":"740235143","full_name":"oscarmarina/sortable-controller-playground","owner":"oscarmarina","description":"sortable-controller playground","archived":false,"fork":false,"pushed_at":"2024-01-18T14:43:25.000Z","size":153,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-02-08T09:13:04.222Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/oscarmarina.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2024-01-07T22:42:45.000Z","updated_at":"2024-01-07T22:55:32.000Z","dependencies_parsed_at":"2024-01-17T18:26:50.306Z","dependency_job_id":"7c1c71d8-b864-4759-b3c2-3d2f180e70ee","html_url":"https://github.com/oscarmarina/sortable-controller-playground","commit_stats":null,"previous_names":["oscarmarina/sortable-controller-playground"],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oscarmarina%2Fsortable-controller-playground","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oscarmarina%2Fsortable-controller-playground/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oscarmarina%2Fsortable-controller-playground/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/oscarmarina%2Fsortable-controller-playground/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/oscarmarina","download_url":"https://codeload.github.com/oscarmarina/sortable-controller-playground/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":246868082,"owners_count":20846873,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-28T04:03:52.830Z","updated_at":"2025-10-04T22:35:37.152Z","avatar_url":"https://github.com/oscarmarina.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"## A sortable list component.\n- https://lit.dev/playground/#gist=9b0da2d828676afff4aba3823f38c966\n- https://twitter.com/techytacos/status/1743019772537647273\n\n[![Open in StackBlitz](https://developer.stackblitz.com/img/open_in_stackblitz.svg)](https://stackblitz.com/github/oscarmarina/sortable-controller-playground)\n\n__Scaffold generated using__:\n\u003e [npm init @blockquote/wc](https://github.com/oscarmarina/create-wc)\n\n__Reactive Controllers - Lit__:\n- [Lit-Xstate Controller](https://github.com/oscarmarina/XstateController)\n\n\u003chr\u003e\n\n\n### `src/AllSortableComponents.ts`:\n\n#### class: `AllSortableComponents`, `all-sortable-components`\n\n##### Fields\n\n| Name     | Privacy | Type    | Default                                                                                                                                                                | Description | Inherited From |\n| -------- | ------- | ------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | -------------- |\n| `group1` |         | `array` | `[    { name: 'Elliott', email: 'elliott@google.com' },    { name: 'Kevin', email: 'kevin@google.com' },    { name: 'Justin', email: 'justin@google.com' },  ]`        |             |                |\n| `group2` |         | `array` | `[    { name: 'Augustine', email: 'augustine@google.com' },    { name: 'Andrew', email: 'andrew@google.com' },    { name: 'Justin', email: 'justinf@google.com' },  ]` |             |                |\n\n##### Methods\n\n| Name       | Privacy | Description | Parameters        | Return | Inherited From |\n| ---------- | ------- | ----------- | ----------------- | ------ | -------------- |\n| `#addUser` |         |             | `ev: SubmitEvent` |        |                |\n\n\u003cdetails\u003e\u003csummary\u003ePrivate API\u003c/summary\u003e\n\n##### Methods\n\n| Name         | Privacy | Description | Parameters   | Return | Inherited From |\n| ------------ | ------- | ----------- | ------------ | ------ | -------------- |\n| `renderItem` | private |             | `item: Item` |        |                |\n\n\u003c/details\u003e\n\n\u003chr/\u003e\n\n#### Exports\n\n| Kind | Name                    | Declaration           | Module                       | Package |\n| ---- | ----------------------- | --------------------- | ---------------------------- | ------- |\n| `js` | `AllSortableComponents` | AllSortableComponents | src/AllSortableComponents.ts |         |\n\n### `src/SortableComponent.ts`:\n\n#### class: `SortableComponent`, `sortable-component`\n\n##### Fields\n\n| Name           | Privacy | Type          | Default                                                                                                                                                                                                                                                                     | Description                                         | Inherited From |\n| -------------- | ------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------- | -------------- |\n| `items`        |         | `Item[]`      | `[    { name: 'Jasper', animal: 'dog', uid: 12345 },    { name: 'Wumbo', animal: 'elephant', uid: 234456 },    { name: 'Waffles', animal: 'dog', uid: 135677 },    { name: 'Nike', animal: 'cat', uid: 234456 },    { name: 'Jumbo', animal: 'elephant', uid: 234456 },  ]` | The items in the sortable list.                     |                |\n| `heading`      |         | `string`      | `'Hey there'`                                                                                                                                                                                                                                                               | The heading to say \"Hello\" to.                      |                |\n| `counter`      |         | `number`      | `5`                                                                                                                                                                                                                                                                         | The number of times the button has been clicked.    |                |\n| `renderTarget` |         | `HTMLElement` |                                                                                                                                                                                                                                                                             | The target element for rendering the sortable list. |                |\n| `_sortableTpl` |         |               |                                                                                                                                                                                                                                                                             |                                                     |                |\n\n##### Methods\n\n| Name          | Privacy | Description                             | Parameters | Return | Inherited From |\n| ------------- | ------- | --------------------------------------- | ---------- | ------ | -------------- |\n| `#onClick`    |         | Add one plus the current counter value. |            |        |                |\n| `#toggleSort` |         | Re-sort the list.                       |            |        |                |\n\n##### Events\n\n| Name            | Type          | Description                      | Inherited From |\n| --------------- | ------------- | -------------------------------- | -------------- |\n| `counterchange` | `CustomEvent` | Indicates when the count changes |                |\n\n##### Attributes\n\n| Name      | Field   | Inherited From |\n| --------- | ------- | -------------- |\n| `heading` | heading |                |\n| `counter` | counter |                |\n| `items`   | items   |                |\n\n##### Slots\n\n| Name | Description             |\n| ---- | ----------------------- |\n|      | This element has a slot |\n\n\u003cdetails\u003e\u003csummary\u003ePrivate API\u003c/summary\u003e\n\n##### Fields\n\n| Name                  | Privacy | Type                              | Default                        | Description                       | Inherited From |\n| --------------------- | ------- | --------------------------------- | ------------------------------ | --------------------------------- | -------------- |\n| `#sort`               | private | `number`                          | `1`                            |                                   |                |\n| `#sortableController` | private | `SortableController \\| undefined` | `new SortableController(this)` | Controller for the sortable list. |                |\n\n\u003c/details\u003e\n\n\u003chr/\u003e\n\n#### Exports\n\n| Kind | Name                | Declaration       | Module                   | Package |\n| ---- | ------------------- | ----------------- | ------------------------ | ------- |\n| `js` | `SortableComponent` | SortableComponent | src/SortableComponent.ts |         |\n\n### `src/SortableComponentList.ts`:\n\n#### class: `SortableComponentList`, `sortable-component-list`\n\n##### Fields\n\n| Name                    | Privacy | Type                                                                                                                                                                            | Default               | Description                                         | Inherited From |\n| ----------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------------------- | --------------------------------------------------- | -------------- |\n| `items`                 |         | `T[]`                                                                                                                                                                           | `[]`                  |                                                     |                |\n| `renderItem`            |         | `ItemTemplate\u003cT\u003e`                                                                                                                                                               |                       |                                                     |                |\n| `keyFn`                 |         | `KeyFn\u003cT\u003e`                                                                                                                                                                      |                       |                                                     |                |\n| `group`                 |         | `string \\| Sortable.GroupOptions \\| undefined`                                                                                                                                  |                       |                                                     |                |\n| `sort`                  |         | `boolean`                                                                                                                                                                       | `true`                |                                                     |                |\n| `delay`                 |         | `number`                                                                                                                                                                        | `0`                   |                                                     |                |\n| `delayOnTouchOnly`      |         | `boolean`                                                                                                                                                                       | `false`               |                                                     |                |\n| `touchStartThreshold`   |         | `number`                                                                                                                                                                        | `0`                   |                                                     |                |\n| `disabled`              |         | `boolean`                                                                                                                                                                       | `false`               |                                                     |                |\n| `store`                 |         | `\\| {\n        get: (sortable: Sortable) =\u003e string[];\n        set: (sortable: Sortable) =\u003e void;\n      }     \\| undefined`                                                       |                       |                                                     |                |\n| `animation`             |         | `number`                                                                                                                                                                        | `0`                   |                                                     |                |\n| `easing`                |         | `string \\| undefined`                                                                                                                                                           |                       |                                                     |                |\n| `handle`                |         | `string \\| undefined`                                                                                                                                                           |                       |                                                     |                |\n| `filter`                |         | `\\| string     \\| ((\n        this: Sortable,\n        event: Event \\| TouchEvent,\n        target: HTMLElement,\n        sortable: Sortable,\n      ) =\u003e boolean)     \\| undefined` | `'.ignore-elements'`  |                                                     |                |\n| `preventOnFilter`       |         | `boolean`                                                                                                                                                                       | `true`                |                                                     |                |\n| `draggableSelector`     |         | `string`                                                                                                                                                                        | `'\u003e*'`                |                                                     |                |\n| `dataIdAttr`            |         | `string`                                                                                                                                                                        | `'data-id'`           |                                                     |                |\n| `ghostClass`            |         | `string`                                                                                                                                                                        | `'sortable-ghost'`    |                                                     |                |\n| `chosenClass`           |         | `string`                                                                                                                                                                        | `'sortable-chosen'`   |                                                     |                |\n| `dragClass`             |         | `string`                                                                                                                                                                        | `'sortable-drag'`     |                                                     |                |\n| `ignore`                |         | `string`                                                                                                                                                                        | `'a, img'`            |                                                     |                |\n| `swapThreshold`         |         | `number`                                                                                                                                                                        | `1`                   |                                                     |                |\n| `invertSwap`            |         | `boolean`                                                                                                                                                                       | `false`               |                                                     |                |\n| `invertedSwapThreshold` |         | `number \\| undefined`                                                                                                                                                           |                       |                                                     |                |\n| `direction`             |         | `'vertical' \\| 'horizontal'`                                                                                                                                                    | `'vertical'`          |                                                     |                |\n| `forceFallback`         |         | `boolean`                                                                                                                                                                       | `false`               |                                                     |                |\n| `fallbackClass`         |         | `string`                                                                                                                                                                        | `'sortable-fallback'` |                                                     |                |\n| `fallbackOnBody`        |         | `boolean`                                                                                                                                                                       | `false`               |                                                     |                |\n| `fallbackTolerance`     |         | `number`                                                                                                                                                                        | `0`                   |                                                     |                |\n| `fallbackOffset`        |         | `object`                                                                                                                                                                        | `{ x: 0, y: 0 }`      |                                                     |                |\n| `dropBubble`            |         | `boolean`                                                                                                                                                                       | `false`               |                                                     |                |\n| `dragoverBubble`        |         | `boolean`                                                                                                                                                                       | `false`               |                                                     |                |\n| `removeCloneOnHide`     |         | `boolean`                                                                                                                                                                       | `true`                |                                                     |                |\n| `emptyInsertThreshold`  |         | `number`                                                                                                                                                                        | `5`                   |                                                     |                |\n| `renderTarget`          |         | `Array\u003cHTMLElement\u003e`                                                                                                                                                            |                       | The target element for rendering the sortable list. |                |\n| `_lightDomTpl`          |         |                                                                                                                                                                                 |                       |                                                     |                |\n| `_sortableTpl`          |         |                                                                                                                                                                                 |                       |                                                     |                |\n\n##### Methods\n\n| Name             | Privacy | Description | Parameters | Return | Inherited From |\n| ---------------- | ------- | ----------- | ---------- | ------ | -------------- |\n| `_litHtmlRender` |         |             |            |        |                |\n\n##### Attributes\n\n| Name                    | Field                 | Inherited From |\n| ----------------------- | --------------------- | -------------- |\n| `items`                 | items                 |                |\n| `renderItem`            | renderItem            |                |\n| `keyFn`                 | keyFn                 |                |\n| `group`                 | group                 |                |\n| `sort`                  | sort                  |                |\n| `delay`                 | delay                 |                |\n| `delayOnTouchOnly`      | delayOnTouchOnly      |                |\n| `touchStartThreshold`   | touchStartThreshold   |                |\n| `disabled`              | disabled              |                |\n| `store`                 | store                 |                |\n| `animation`             | animation             |                |\n| `easing`                | easing                |                |\n| `handle`                | handle                |                |\n| `filter`                | filter                |                |\n| `preventOnFilter`       | preventOnFilter       |                |\n| `draggableSelector`     | draggableSelector     |                |\n| `data-id`               | dataIdAttr            |                |\n| `ghostClass`            | ghostClass            |                |\n| `chosenClass`           | chosenClass           |                |\n| `dragClass`             | dragClass             |                |\n| `ignore`                | ignore                |                |\n| `swapThreshold`         | swapThreshold         |                |\n| `invertSwap`            | invertSwap            |                |\n| `invertedSwapThreshold` | invertedSwapThreshold |                |\n| `direction`             | direction             |                |\n| `forceFallback`         | forceFallback         |                |\n| `fallbackClass`         | fallbackClass         |                |\n| `fallbackOnBody`        | fallbackOnBody        |                |\n| `fallbackTolerance`     | fallbackTolerance     |                |\n| `fallbackOffset`        | fallbackOffset        |                |\n| `dropBubble`            | dropBubble            |                |\n| `dragoverBubble`        | dragoverBubble        |                |\n| `removeCloneOnHide`     | removeCloneOnHide     |                |\n| `emptyInsertThreshold`  | emptyInsertThreshold  |                |\n\n\u003cdetails\u003e\u003csummary\u003ePrivate API\u003c/summary\u003e\n\n##### Fields\n\n| Name                  | Privacy | Type                              | Default                        | Description                       | Inherited From |\n| --------------------- | ------- | --------------------------------- | ------------------------------ | --------------------------------- | -------------- |\n| `#sortableController` | private | `SortableController \\| undefined` | `new SortableController(this)` | Controller for the sortable list. |                |\n\n\u003c/details\u003e\n\n\u003chr/\u003e\n\n#### Exports\n\n| Kind | Name                    | Declaration           | Module                       | Package |\n| ---- | ----------------------- | --------------------- | ---------------------------- | ------- |\n| `js` | `SortableComponentList` | SortableComponentList | src/SortableComponentList.ts |         |\n\n### `src/SortableController.ts`:\n\n#### class: `SortableController`\n\n##### Methods\n\n| Name               | Privacy | Description | Parameters | Return | Inherited From |\n| ------------------ | ------- | ----------- | ---------- | ------ | -------------- |\n| `hostDisconnected` |         |             |            |        |                |\n\n\u003cdetails\u003e\u003csummary\u003ePrivate API\u003c/summary\u003e\n\n##### Fields\n\n| Name       | Privacy | Type                    | Default | Description | Inherited From |\n| ---------- | ------- | ----------------------- | ------- | ----------- | -------------- |\n| `sortable` | private | `Sortable \\| undefined` |         |             |                |\n\n\u003c/details\u003e\n\n\u003chr/\u003e\n\n#### Exports\n\n| Kind | Name                 | Declaration        | Module                    | Package |\n| ---- | -------------------- | ------------------ | ------------------------- | ------- |\n| `js` | `SortableController` | SortableController | src/SortableController.ts |         |\n\n### `src/styles/all-sortable-components-styles.css.ts`:\n\n#### Variables\n\n| Name     | Description | Type |\n| -------- | ----------- | ---- |\n| `styles` |             |      |\n\n\u003chr/\u003e\n\n#### Exports\n\n| Kind | Name     | Declaration | Module                                           | Package |\n| ---- | -------- | ----------- | ------------------------------------------------ | ------- |\n| `js` | `styles` | styles      | src/styles/all-sortable-components-styles.css.ts |         |\n\n### `src/styles/sortable-component-list-styles.css.ts`:\n\n#### Variables\n\n| Name     | Description | Type |\n| -------- | ----------- | ---- |\n| `styles` |             |      |\n\n\u003chr/\u003e\n\n#### Exports\n\n| Kind | Name     | Declaration | Module                                           | Package |\n| ---- | -------- | ----------- | ------------------------------------------------ | ------- |\n| `js` | `styles` | styles      | src/styles/sortable-component-list-styles.css.ts |         |\n\n### `src/styles/sortable-component-styles.css.ts`:\n\n#### Variables\n\n| Name     | Description | Type |\n| -------- | ----------- | ---- |\n| `styles` |             |      |\n\n\u003chr/\u003e\n\n#### Exports\n\n| Kind | Name     | Declaration | Module                                      | Package |\n| ---- | -------- | ----------- | ------------------------------------------- | ------- |\n| `js` | `styles` | styles      | src/styles/sortable-component-styles.css.ts |         |\n\n### `define/all-sortable-components.ts`:\n\n#### Exports\n\n| Kind                        | Name                      | Declaration           | Module                        | Package |\n| --------------------------- | ------------------------- | --------------------- | ----------------------------- | ------- |\n| `custom-element-definition` | `all-sortable-components` | AllSortableComponents | /src/AllSortableComponents.js |         |\n\n### `define/sortable-component-list.ts`:\n\n#### Exports\n\n| Kind                        | Name                      | Declaration           | Module                        | Package |\n| --------------------------- | ------------------------- | --------------------- | ----------------------------- | ------- |\n| `custom-element-definition` | `sortable-component-list` | SortableComponentList | /src/SortableComponentList.js |         |\n\n### `define/sortable-component.ts`:\n\n#### Exports\n\n| Kind                        | Name                 | Declaration       | Module                    | Package |\n| --------------------------- | -------------------- | ----------------- | ------------------------- | ------- |\n| `custom-element-definition` | `sortable-component` | SortableComponent | /src/SortableComponent.js |         |\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foscarmarina%2Fsortable-controller-playground","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Foscarmarina%2Fsortable-controller-playground","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Foscarmarina%2Fsortable-controller-playground/lists"}