@ship-ui/core 0.18.13 → 0.19.1

package/assets/mcp/components.json

@@ -172,13 +172,34 @@
     "name": "ShipSortable",
     "selector": "[shSortable]",
     "path": "core/projects/ship-ui/src/lib/ship-sortable/ship-sortable.ts",
-    "description": "### Enable Sorting\n\nApply the\n`shSortable`\ndirective to a\n`sh-list`\nor any container element to enable drag-and-drop reordering.\n\n### Event Handling\n\nListen to the\n`afterDrop`\nevent to update your data source when an item is moved:\n`(afterDrop)=\"reorder($event)\"`\n.\n\n### Handles\n\nAdd the\n`sort-handle`\nattribute to a specific element within a sortable item to limit dragging to that specific area.",
-    "inputs": [],
+    "description": "### Enable Sorting\n\nApply the\n`shSortable`\ndirective to a\n`sh-list`\nor any container element to enable drag-and-drop reordering.\n\n### Event Handling\n\nListen to the\n`sortDrop`\nevent to update your data source when an item is moved. For complex implementations, skip events and use the\n`SortableManager`\n(see below).\n\n### Sortable Manager (Recommended)\n\nVastly simplify drag-and-drop state by passing a unified manager to the\n`shSortable`\ninput. Pass a dictionary of signals to\n`createSortableManager()`\n, and bind it using\n`[shSortable]=\"manager\" sortableGroup=\"listId\"`\n. For single lists, simply use\n`[shSortable]=\"manager\"`\n. You can even provide an\n`onBeforeDrop`\nhook to await an API request (Promise or RxJS Observable) before accepting the drop automatically!\n\n### Handles\n\nAdd the\n`sort-handle`\nattribute to a specific element within a sortable item to limit dragging to that specific area.",
+    "inputs": [
+      {
+        "name": "shSortable",
+        "type": "any",
+        "description": ""
+      },
+      {
+        "name": "sortableGroup",
+        "type": "string",
+        "description": ""
+      }
+    ],
     "outputs": [
+      {
+        "name": "sortDrop",
+        "type": "ShipDropEvent",
+        "description": ""
+      },
       {
         "name": "afterDrop",
         "type": "AfterDropResponse",
         "description": ""
+      },
+      {
+        "name": "crossDrop",
+        "type": "CrossDropResponse",
+        "description": ""
       }
     ],
     "methods": [
@@ -194,12 +215,30 @@
         "returnType": "any",
         "description": ""
       },
+      {
+        "name": "dragEnter",
+        "parameters": "e: DragEvent",
+        "returnType": "any",
+        "description": ""
+      },
+      {
+        "name": "dragLeave",
+        "parameters": "e: DragEvent",
+        "returnType": "any",
+        "description": ""
+      },
       {
         "name": "dragOver",
         "parameters": "e: DragEvent",
         "returnType": "any",
         "description": ""
       },
+      {
+        "name": "getVisualIndexOfElement",
+        "parameters": "i: number",
+        "returnType": "number",
+        "description": ""
+      },
       {
         "name": "drop",
         "parameters": "",
@@ -217,44 +256,28 @@
     "examples": [
       {
         "name": "base-sortable",
-        "html": "<sh-list shSortable (afterDrop)=\"reorderTodo($event)\">\n  @for (todo of todos(); track $index) {\n    <div item [draggable]=\"true\" [class.active]=\"todo.done\" (click)=\"toggleTodo($index)\">\n      <sh-checkbox [checked]=\"todo.done\" class=\"primary raised\" />\n\n      @if (todo.done) {\n        <s>{{ todo.title }}</s>\n      } @else {\n        {{ todo.title }}\n      }\n    </div>\n  }\n</sh-list>\n",
-        "ts": "import { ChangeDetectionStrategy, Component, signal } from '@angular/core';\nimport { AfterDropResponse, moveIndex, ShipCheckbox, ShipList, ShipSortable } from 'ship-ui';\n\nconst TODOS = [\n  {\n    title: 'Simple sorting of list',\n    done: true,\n  },\n  {\n    title: 'Sorting animation',\n    done: true,\n  },\n  {\n    title: 'Support sortable handle',\n    done: true,\n  },\n  {\n    title: 'Support gap in sorting list ',\n    done: true,\n  },\n  {\n    title: 'Support placeholder',\n    done: true,\n  },\n  {\n    title: 'Support animation only when dragging',\n    done: true,\n  },\n  {\n    title: 'Support multiple lists',\n    done: false,\n  },\n  {\n    title: 'Support draggable grids',\n    done: false,\n  },\n];\n\ntype Todo = (typeof TODOS)[0];\n\n@Component({\n  selector: 'app-base-sortable',\n  standalone: true,\n  imports: [ShipList, ShipSortable, ShipCheckbox],\n  templateUrl: './base-sortable.html',\n  styleUrl: './base-sortable.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class BaseSortable {\n  todos = signal(TODOS);\n\n  toggleTodo(index: number) {\n    this.todos.update((todos) => {\n      todos[index].done = !todos[index].done;\n\n      return todos;\n    });\n  }\n\n  reorderTodo(event: AfterDropResponse) {\n    this.todos.update((arr) => moveIndex<Todo>(arr, event));\n  }\n}\n"
-      }
-    ]
-  },
-  {
-    "name": "GridSortable",
-    "selector": "[shGridSortable]",
-    "path": "core/projects/ship-ui/src/lib/ship-sortable/grid-sortable.ts",
-    "description": "### Enable Sorting\n\nApply the\n`shSortable`\ndirective to a\n`sh-list`\nor any container element to enable drag-and-drop reordering.\n\n### Event Handling\n\nListen to the\n`afterDrop`\nevent to update your data source when an item is moved:\n`(afterDrop)=\"reorder($event)\"`\n.\n\n### Handles\n\nAdd the\n`sort-handle`\nattribute to a specific element within a sortable item to limit dragging to that specific area.",
-    "inputs": [],
-    "outputs": [],
-    "methods": [
+        "html": "<sh-list [shSortable]=\"manager\">\n  @for (todo of todos(); track $index) {\n    <div item [draggable]=\"true\" [class.active]=\"todo.done\" (click)=\"toggleTodo($index)\">\n      <sh-checkbox [checked]=\"todo.done\" class=\"primary raised\" />\n\n      @if (todo.done) {\n        <s>{{ todo.title }}</s>\n      } @else {\n        {{ todo.title }}\n      }\n    </div>\n  }\n</sh-list>\n",
+        "ts": "import { ChangeDetectionStrategy, Component, signal } from '@angular/core';\nimport { createSortableManager, ShipCheckbox, ShipList, ShipSortable } from 'ship-ui';\n\nconst TODOS = [\n  {\n    title: 'Simple sorting of list',\n    done: true,\n  },\n  {\n    title: 'Sorting animation',\n    done: true,\n  },\n  {\n    title: 'Support sortable handle',\n    done: true,\n  },\n  {\n    title: 'Support gap in sorting list ',\n    done: true,\n  },\n  {\n    title: 'Support placeholder',\n    done: true,\n  },\n  {\n    title: 'Support animation only when dragging',\n    done: true,\n  },\n  {\n    title: 'Support multiple lists',\n    done: false,\n  },\n  {\n    title: 'Support draggable grids',\n    done: false,\n  },\n];\n\ntype Todo = (typeof TODOS)[0];\n\n@Component({\n  selector: 'app-base-sortable',\n  standalone: true,\n  imports: [ShipList, ShipSortable, ShipCheckbox],\n  templateUrl: './base-sortable.html',\n  styleUrl: './base-sortable.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class BaseSortable {\n  todos = signal(TODOS);\n  manager = createSortableManager(this.todos);\n\n  toggleTodo(index: number) {\n    this.todos.update((todos) => {\n      todos[index].done = !todos[index].done;\n\n      return todos;\n    });\n  }\n}\n"
+      },
       {
-        "name": "onDragStart",
-        "parameters": "event: DragEvent",
-        "returnType": "any",
-        "description": ""
+        "name": "cross-list-sortable",
+        "html": "<div class=\"board\">\n  <sh-card class=\"column\">\n    <h3>To Do</h3>\n    <div [shSortable]=\"manager\" sortableGroup=\"todo\" class=\"sortable-list\">\n      @for (item of todoList(); track item; let i = $index) {\n        <div class=\"item\" draggable=\"true\">\n          {{ item }}\n        </div>\n      }\n    </div>\n  </sh-card>\n\n  <sh-card class=\"column\">\n    <h3>In Progress</h3>\n    <div [shSortable]=\"manager\" sortableGroup=\"inProgress\" class=\"sortable-list\">\n      @for (item of inProgressList(); track item; let i = $index) {\n        <div class=\"item\" draggable=\"true\">\n          {{ item }}\n        </div>\n      }\n    </div>\n  </sh-card>\n\n  <sh-card class=\"column\">\n    <h3>Done</h3>\n    <div [shSortable]=\"manager\" sortableGroup=\"done\" class=\"sortable-list\">\n      @for (item of doneList(); track item; let i = $index) {\n        <div class=\"item\" draggable=\"true\">\n          {{ item }}\n        </div>\n      }\n    </div>\n  </sh-card>\n</div>\n",
+        "ts": "import { ChangeDetectionStrategy, Component, signal } from '@angular/core';\nimport { createSortableManager, ShipCard, ShipSortable } from 'ship-ui';\n\n@Component({\n  selector: 'app-cross-list-sortable',\n  standalone: true,\n  imports: [ShipSortable, ShipCard],\n  templateUrl: './cross-list-sortable.html',\n  styleUrl: './cross-list-sortable.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class CrossListSortable {\n  todoList = signal(['Implement Grids', 'Implement multiple boards', 'Refactor drag drop core']);\n  inProgressList = signal(['Write implementation plan', 'Check examples']);\n  doneList = signal(['Read documentation', 'Setup ship-ui workspace']);\n\n  manager = createSortableManager({\n    todo: this.todoList,\n    inProgress: this.inProgressList,\n    done: this.doneList,\n  });\n}\n"
       },
       {
-        "name": "onDragOver",
-        "parameters": "event: DragEvent",
-        "returnType": "any",
-        "description": ""
+        "name": "mixed-size-sortable",
+        "html": "<div class=\"mixed-list\" [shSortable]=\"manager\">\n  @for (item of items(); track item.id) {\n    <div class=\"item\" [draggable]=\"true\" [class]=\"item.size\">\n      {{ item.text }}\n    </div>\n  }\n</div>\n",
+        "ts": "import { ChangeDetectionStrategy, Component, signal } from '@angular/core';\nimport { createSortableManager, ShipSortable } from 'ship-ui';\n\nconst ITEMS = [\n  { id: 1, text: 'Small item', size: 'small' },\n  { id: 2, text: 'This is a much larger item that spans multiple lines to show off the fact that the sortable handles differently sized elements cleanly.', size: 'large' },\n  { id: 3, text: 'Medium item with a bit more content.', size: 'medium' },\n  { id: 4, text: 'Another small item', size: 'small' },\n  { id: 5, text: 'Massive item. Huge block of text here to make it really tall. '.repeat(3), size: 'extra-large' },\n];\n\n@Component({\n  selector: 'app-mixed-size-sortable',\n  standalone: true,\n  imports: [ShipSortable],\n  templateUrl: './mixed-size-sortable.html',\n  styleUrl: './mixed-size-sortable.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class MixedSizeSortable {\n  items = signal(ITEMS);\n  manager = createSortableManager(this.items);\n}\n"
       },
       {
-        "name": "onDragEnter",
-        "parameters": "event: DragEvent",
-        "returnType": "any",
-        "description": ""
-      }
-    ],
-    "cssVariables": [],
-    "examples": [
+        "name": "grid-sortable",
+        "html": "<div class=\"grid-container\" [shSortable]=\"manager\">\n  @for (item of items(); track item) {\n    <div class=\"grid-item\" draggable=\"true\">\n      {{ item }}\n    </div>\n  }\n</div>\n",
+        "ts": "import { ChangeDetectionStrategy, Component, signal } from '@angular/core';\nimport { createSortableManager, ShipSortable } from 'ship-ui';\n\n@Component({\n  selector: 'app-grid-sortable-example',\n  standalone: true,\n  imports: [ShipSortable],\n  templateUrl: './grid-sortable-example.html',\n  styleUrl: './grid-sortable-example.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class GridSortableExample {\n  items = signal(Array.from({ length: 12 }, (_, i) => `Item ${i + 1}`));\n\n\n  manager = createSortableManager(this.items);\n}\n"
+      },
       {
-        "name": "base-sortable",
-        "html": "<sh-list shSortable (afterDrop)=\"reorderTodo($event)\">\n  @for (todo of todos(); track $index) {\n    <div item [draggable]=\"true\" [class.active]=\"todo.done\" (click)=\"toggleTodo($index)\">\n      <sh-checkbox [checked]=\"todo.done\" class=\"primary raised\" />\n\n      @if (todo.done) {\n        <s>{{ todo.title }}</s>\n      } @else {\n        {{ todo.title }}\n      }\n    </div>\n  }\n</sh-list>\n",
-        "ts": "import { ChangeDetectionStrategy, Component, signal } from '@angular/core';\nimport { AfterDropResponse, moveIndex, ShipCheckbox, ShipList, ShipSortable } from 'ship-ui';\n\nconst TODOS = [\n  {\n    title: 'Simple sorting of list',\n    done: true,\n  },\n  {\n    title: 'Sorting animation',\n    done: true,\n  },\n  {\n    title: 'Support sortable handle',\n    done: true,\n  },\n  {\n    title: 'Support gap in sorting list ',\n    done: true,\n  },\n  {\n    title: 'Support placeholder',\n    done: true,\n  },\n  {\n    title: 'Support animation only when dragging',\n    done: true,\n  },\n  {\n    title: 'Support multiple lists',\n    done: false,\n  },\n  {\n    title: 'Support draggable grids',\n    done: false,\n  },\n];\n\ntype Todo = (typeof TODOS)[0];\n\n@Component({\n  selector: 'app-base-sortable',\n  standalone: true,\n  imports: [ShipList, ShipSortable, ShipCheckbox],\n  templateUrl: './base-sortable.html',\n  styleUrl: './base-sortable.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class BaseSortable {\n  todos = signal(TODOS);\n\n  toggleTodo(index: number) {\n    this.todos.update((todos) => {\n      todos[index].done = !todos[index].done;\n\n      return todos;\n    });\n  }\n\n  reorderTodo(event: AfterDropResponse) {\n    this.todos.update((arr) => moveIndex<Todo>(arr, event));\n  }\n}\n"
+        "name": "handle-sortable",
+        "html": "<sh-list [shSortable]=\"manager\">\n  @for (item of items(); track item) {\n    <div class=\"list-item\" draggable=\"true\">\n      <div class=\"drag-handle\" sort-handle>\n        <svg xmlns=\"http://www.w3.org/2000/svg\" width=\"16\" height=\"16\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">\n          <circle cx=\"9\" cy=\"12\" r=\"1\"></circle>\n          <circle cx=\"9\" cy=\"5\" r=\"1\"></circle>\n          <circle cx=\"9\" cy=\"19\" r=\"1\"></circle>\n          <circle cx=\"15\" cy=\"12\" r=\"1\"></circle>\n          <circle cx=\"15\" cy=\"5\" r=\"1\"></circle>\n          <circle cx=\"15\" cy=\"19\" r=\"1\"></circle>\n        </svg>\n      </div>\n      <div class=\"content\">{{ item }}</div>\n    </div>\n  }\n</sh-list>\n",
+        "ts": "import { ChangeDetectionStrategy, Component, signal } from '@angular/core';\nimport { createSortableManager, ShipList, ShipSortable } from 'ship-ui';\n\n@Component({\n  selector: 'app-handle-sortable',\n  standalone: true,\n  imports: [ShipList, ShipSortable],\n  templateUrl: './handle-sortable.html',\n  styleUrl: './handle-sortable.scss',\n  changeDetection: ChangeDetectionStrategy.OnPush,\n})\nexport class HandleSortable {\n  items = signal(['Task 1: Design Review', 'Task 2: Build Sortables', 'Task 3: Drag Handles', 'Task 4: Publish SDK', 'Task 5: Profit']);\n  manager = createSortableManager(this.items);\n}\n"
       }
     ]
   },