Commit Graph

3580 Commits

Author SHA1 Message Date
Christian Byrne
8ae50d140d [test] Add component test for Vue button widget (#5468)
* add component test for button widget

* [move] relocate WidgetButton test to proper directory

Move test from src/ to tests-ui/ directory structure and update import path
to work from new location - addresses review comment about test organization

* [refactor] make widget name optional in mock factory

Add optional name parameter to createMockWidget function for more flexible
test setup - addresses @DrJKL's suggestion about optional parameters

* [refactor] use it.for for parameterized button tests

Replace forEach loops with it.for syntax for testing button severities
and variants - addresses @DrJKL's suggestion for better test structure

* [auto-fix] Apply ESLint and Prettier fixes

* Revert "[move] relocate WidgetButton test to proper directory"

This reverts commit e9f4d57334.

* [test] increase rapid clicks test from 5 to 16

Better test coverage for concurrent click handling

* name click number a shared variable

---------

Co-authored-by: GitHub Action <action@github.com>
2025-09-13 14:51:39 -07:00
Christian Byrne
90b1b47dd0 [test] Add Vue Node header component test (#5457)
* add node header component test

* [refactor] use separate const declarations instead of mutable variable in test - addresses @DrJKL's code style suggestion

Replace mutable `let icon` with descriptive `const expandedIcon` and `const collapsedIcon`
variables for better code clarity and immutability in the chevron icon test.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

* [config] remove unnecessary vitest exclude patterns - addresses @DrJKL's configuration review

Remove redundant exclude patterns from vitest config as they are already covered by
vitest's default exclusions. Simplifies configuration while maintaining functionality.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

* [config] remove unnecessary vitest exclude patterns - addresses @DrJKL's configuration review

Remove redundant exclude patterns from vitest config as they are already covered by
vitest's default exclusions. Simplifies configuration while maintaining functionality.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

---------

Co-authored-by: Claude <noreply@anthropic.com>
2025-09-13 00:31:36 -07:00
Alexander Brown
0e01ca0a98 a11y: Bigger click/touch target for Slider track (#5524)
* a11y: Bigger click/touch target for Slider track

* a11y: z-index fix and bigger thumb too.
2025-09-12 23:34:39 -07:00
Alexander Brown
1845708ddb Component: Vue Widget Slider (new) (#5516)
* feat: Initial shadcn configuration

* component: Add Slider component from shadcn-vue

* deps: Add tw-animate-css

* component: Align slider with Figma styles

* component: Set the step value for the slider, update styles

* fix: update component tests to work with Array of values

* vite: Don't reload dev server for test changes

* component: Swap text for a number input kept in sync with the slider

* cleanup: Don't need the override if the input isn't type="number"

* test: add step size tests

* cleanup: Don't need cn for these

* css: Update token names to match new Figma Variables

* lint: Fix camelCase vs train-case in passthrough

* feat: If the value is deleted, revert to the slider state cc: @PabloWiedemann

* feat: Improve cursor styles, grabbable thumb, clickable track

* lint: temporarily disable some warnings

* feat: Grabbing while sliding (most of the time)
2025-09-12 18:52:18 -07:00
Johnpaul
578bb54437 fix: enhance CardContainer and MultiSelect components with improved props handling and filtering logic 2025-09-13 02:35:36 +01:00
Johnpaul
6844b77899 fix: update fallback behavior for loading core workflow templates to default to English 2025-09-13 02:35:36 +01:00
Johnpaul
f0c8a6d1ac fix: add data-testid attributes for template workflows in WorkflowTemplateSelectorDialog 2025-09-13 02:35:36 +01:00
Alexander Brown
c588f2f457 Feat: Change the Run button / ActionBar to dock by default (#5519)
* Feat: Change the Run button / ActionBar to dock by default

@PabloWiedemann

* Update test expectations [skip ci]

---------

Co-authored-by: github-actions <github-actions@github.com>
2025-09-12 14:07:32 -07:00
Benjamin Lu
29ad47d20f fix(links): remove drag-end offset in straight/linear modes by honoring CENTER/NONE as no-offset (#5520)
- Add 'none' direction to path renderer
- Map CENTER/NONE to 'none' in adapter
- Keep start-end offset intentional; end follows cursor exactly
- Preserve spline behavior and arrow rendering

Verified with typecheck; no visual changes outside dragging behavior.
2025-09-12 21:01:52 +00:00
Johnpaul Chiwetelu
b1b1312807 Merge branch 'main' into feat/new-workflow-templates 2025-09-12 20:57:51 +01:00
Johnpaul
1bd6fddf2d fix: update category icon mappings to use Lucide icon classes 2025-09-12 20:55:52 +01:00
Johnpaul
482dfcc0c7 fix: reset base components to use default props 2025-09-12 20:55:03 +01:00
Johnpaul
1864b1c9bb fix: Replace BaseWidgetLayout with BaseModalLayout and ensure hoveredTemplates fallback 2025-09-12 20:52:22 +01:00
Rizumu Ayaka
9aeeab9a9f feat: remove the divider that between widgets and slots (#5517) 2025-09-12 12:33:02 -07:00
Johnpaul
406a53a14e Merge branch 'main' into feat/new-workflow-templates 2025-09-12 20:25:18 +01:00
Christian Byrne
6645b3917f Update ApiNodesSignInContent.vue (#5514) 2025-09-12 00:09:04 -07:00
snomiao
4ec6223189 fix: Add JSON import assertions for Node.js ESM compatibility (#5507)
Added `with { type: 'json' }` assertions to all JSON imports to ensure compatibility with Node.js ES modules and Playwright environments. This follows the current ESM specification where JSON imports require explicit type assertions.

Affected areas:
- Tailwind config
- i18n locale imports (36 files)
- Test fixtures and spec files
- API client feature flags
- Core color palettes

References:
- https://nodejs.org/api/esm.html
- https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import/with

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-authored-by: Claude <noreply@anthropic.com>
2025-09-11 20:22:21 -07:00
Johnpaul Chiwetelu
c051c3a507 Drag Multiple Vue Nodes (#5459)
* feat: enhance dragging functionality to support multiple selected nodes

* feat: enhance node selection handling to support drag state detection

* feat: enhance node selection handling to support drag state detection

* fix: update event trigger from pointer down to pointer up in LGraphNode tests
2025-09-11 17:25:23 -07:00
Alexander Brown
54cbf42a84 fix: Missing .value led to the release dot always showing (#5500) 2025-09-12 00:11:55 +00:00
AustinMroz
68845ce33a Fix Connection of Primitive nodes to Subgraph node (#5024)
* Fix connection of primitives to subgraphNodes

* Fix loading and nested subgraphs with primitives

Medium hackyness, but this saves ~100 lines.

* Use improved type check

* Remove requirement for type assertion

* Add warning comment

---------

Co-authored-by: filtered <176114999+webfiltered@users.noreply.github.com>
2025-09-11 14:27:44 -07:00
Rizumu Ayaka
46f4ce3890 feat: style of progress bar in various scenarios (#5492) 2025-09-11 14:07:44 -07:00
AustinMroz
3bc25b7aeb Add Asset Widget (#5475)
* [feat] carve out path to call asset browser in combo widget

* Add Asset Widget

* [feat] add fallback "Select model" label

---------

Co-authored-by: Arjan Singh <arjan@comfy.org>
2025-09-11 12:00:34 -07:00
Rizumu Ayaka
08fe2829d4 feat: node border and hover and selected style, and when error (#5491)
* feat: node border and hover and selected style, and when error

* fix test error
2025-09-11 03:04:16 -07:00
Jin Yi
e70ddea684 fix: Add dropdown size control to Select components and improve UI (#5290)
* feature: size adjust

* feature: design adjust

* fix: popover width, height added

* fix: li style override

* refactor: improve component readability and
  maintainability per PR feedback

  - Replace CardGridList component with
  createGridStyle utility function
  - Add runtime validation for grid column values
  - Remove !important usage in MultiSelect, use cn()
  function instead
  - Extract popover sizing logic into
  usePopoverSizing composable
  - Improve class string readability by splitting
  into logical groups
  - Use Tailwind size utilities (size-8, size-10)
  instead of separate width/height
  - Remove magic numbers in SearchBox, align with
  button sizes
  - Rename BaseWidgetLayout to BaseModalLayout for
  clarity
  - Enhance SearchBox click area to cover entire
  component
  - Refactor long class strings using cn() utility
  across components

* fix: BaseWidgetLayout => BaseModalLayout

* fix: CardGrid deleted

* fix: unused exported types

* Update test expectations [skip ci]

* chore: code review

* Update test expectations [skip ci]

* chore: restore screenshot

---------

Co-authored-by: github-actions <github-actions@github.com>
2025-09-11 03:01:06 -07:00
Benjamin Lu
038f86fe84 fix(canvas): use vertical-align: top to eliminate baseline gap (#5484)
* fix(canvas): make graph canvas block-level to eliminate baseline gap

- Change <canvas id=graph-canvas> to display:block via Tailwind class
- Removes 1–5 px baseline offset between canvas and container
- Aligns canvas and TransformPane origins; fixes link/slot endpoint drift

No behavioral changes beyond layout origin alignment; no dependent CSS relies on inline/baseline.

* switch block to align-top

* Update test expectations [skip ci]

* Revert "Update test expectations [skip ci]"

This reverts commit ee0dfd4e0a.

* empty commit for ci

* Update test expectations [skip ci]

---------

Co-authored-by: github-actions <github-actions@github.com>
2025-09-11 01:52:15 -07:00
AustinMroz
568be0c44c When toggling selected, align state (#5482)
Previously, when toggling the mode of multiple nodes, each node would
have its state individually toggled. Now it enables mode if any node is
not currently set to that mode and only disables if all already match.
2025-09-11 00:50:26 -07:00
Jin Yi
6ea021d595 feat: Auto-close LoadWorkflowWarning dialog when all missing nodes are installed (#5321)
* feat: Auto-close LoadWorkflowWarning dialog when all missing nodes are installed

- Add computed property to check if all missing nodes are installed
- Watch for completion and automatically close dialog with 500ms delay
- Show success toast notification when installation completes
- Add translation key for success message

This improves UX by automatically dismissing the warning dialog once the user has successfully installed all missing nodes through the manager.

* fix: settimeout to nexttick

* [auto-fix] Apply ESLint and Prettier fixes

---------

Co-authored-by: GitHub Action <action@github.com>
2025-09-10 23:19:04 -07:00
Alexander Brown
7245213ed6 Fix: In standard mode, don't stop when you hit a Vue node. (#5445)
* fix: Forward the scrolling events to the litegraph canvas.

* prior-art: Use the existing event forwarding logic from useCanvasInteractions (h/t Ben)

* fix: Get proper scaling from properties in the original event, fix browser zoom

* tests: Fix missing property on mock

* types: Cleanup type annotations in the test

* cleanup: Initialize the mocks in place.

* tests: extract createMockPointerEvent

* tests: extract createMockWheelEvent

* tests: extract createMockLGraphCanvas

* tests: Add additional assertion for stopPropagation

* tests: Comment pruning, test rename suggested by @arjansingh
2025-09-10 23:17:06 -07:00
Christian Byrne
b72e22f6be Add Centralized Vue Node Size/Pos Tracking (#5442)
* add dom element resize observer registry for vue node components

* Update src/renderer/extensions/vueNodes/composables/useVueNodeResizeTracking.ts

Co-authored-by: AustinMroz <austin@comfy.org>

* refactor(vue-nodes): typed TransformState InjectionKey, safer ResizeObserver sizing, centralized slot tracking, and small readability updates

* chore: make TransformState interface non-exported to satisfy knip pre-push

* Revert "chore: make TransformState interface non-exported to satisfy knip pre-push"

This reverts commit 110ecf31da.

* Revert "refactor(vue-nodes): typed TransformState InjectionKey, safer ResizeObserver sizing, centralized slot tracking, and small readability updates"

This reverts commit 428752619c.

* [refactor] Improve resize tracking composable documentation and test utilities

- Rename parameters in useVueElementTracking for clarity (appIdentifier, trackingType)
- Add comprehensive docstring with examples to prevent DOM attribute confusion
- Extract mountLGraphNode test utility to eliminate repetitive mock setup
- Add technical implementation notes documenting optimization decisions

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

* remove typo comment

* convert to functional bounds collection

* remove inline import

* add interfaces for bounds mutations

* remove change log

* fix bounds collection when vue nodes turned off

* fix title offset on y

* move from resize observer to selection toolbox bounds

---------

Co-authored-by: AustinMroz <austin@comfy.org>
Co-authored-by: Benjamin Lu <benjaminlu1107@gmail.com>
Co-authored-by: Claude <noreply@anthropic.com>
2025-09-10 22:38:49 -07:00
Jin Yi
5f045b335d [feat] Improve UX for disabled node packs in Manager dialog (#5478)
* [feat] Improve UX for disabled node packs in Manager dialog

- Hide "Update All" button when only disabled packs have updates
- Add tooltip on "Update All" hover to indicate disabled nodes won't be updated
- Disable version selector and show tooltip for disabled node packs
- Filter updates to only show enabled packs in the update queue
- Add visual indicators (opacity, cursor) for disabled pack cards
- Add comprehensive test coverage for new functionality

This improves the user experience by clearly indicating which packs
can be updated and preventing confusion about disabled packs.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

* chore: missing nodes description added

* test: test code modified

---------

Co-authored-by: Claude <noreply@anthropic.com>
2025-09-10 22:35:16 -07:00
Arjan Singh
44e470488d [feat] carve out path to call asset browser in combo widget (#5464)
* [ci] ignore local browser tests files

this is where i have claude put its one off playwright scripts

* [feat] carve out path to call asset browser in combo widget

* [feat] use buttons on Model Loaders when Asset API setting is on
2025-09-10 22:26:07 -07:00
Alexander Brown
ca220440b2 Tailwind: Move customization into CSS (#5477)
* tailwind: Migrate out of the js/ts config part 1

* tailwind: Migrate custom variant and utility

* Update test expectations [skip ci]

* tailwind: Use relative colors for alpha variants

* fix: Use the new numbered color tokens

---------

Co-authored-by: github-actions <github-actions@github.com>
2025-09-10 18:39:37 -07:00
Alexander Piskun
2e64c64ac7 add pricing for new ByteDance node (#5481) 2025-09-10 17:46:47 -07:00
Christian Byrne
169d7404fe fix text prop area type error (#5471) 2025-09-09 22:24:04 -07:00
Christian Byrne
97d00ea47d [test] Add component tests for Vue node slots (#5461)
* add component tests for slots

* use `for of` for better error report

* add runtime type check to make assertions valid

* add runtime type check to make assertions valid
2025-09-09 18:48:51 -07:00
Christian Byrne
0a2260a666 Add design system color variables to tailwind config and use in Vue Nodes (#5430)
* use tailwind colors for

* add updated tokens with scales
2025-09-09 18:45:55 -07:00
Jin Yi
5b834acc86 feat(tailwind): add lucide icon support via iconify plugin (#5453) 2025-09-10 01:20:25 +00:00
Arjan Singh
7d4437c724 [fix] assets service review nits (#5444)
* [fix] assets service review nits

* [fix] lint
2025-09-09 17:00:23 -07:00
Christian Byrne
43ab1c9b09 Add z-index management in Vue Nodes based on interaction recency (#5429)
* fix z-index on selection for vue nodes

* fix unused export

* refactor to DDD

* Use Tailwind utility for pointer events instead of inline style

Move pointer-events: auto from inline style to Tailwind class
pointer-events-auto as suggested in PR review.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

* Rename defaultSource to layoutSource parameter

Rename parameter in useNodeZIndex options interface for better
clarity as suggested in PR review.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

* Improve test mocking pattern with vi.mocked approach

Replace global mock object with per-test vi.mocked pattern
and proper Partial typing instead of as any, as suggested
in PR review.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

* [auto-fix] Apply ESLint and Prettier fixes

---------

Co-authored-by: Claude <noreply@anthropic.com>
Co-authored-by: GitHub Action <action@github.com>
2025-09-09 15:02:24 -07:00
Rizumu Ayaka
35b30a3ac6 fix: tailwind v4 utilities layer (#5451)
* fix: tailwind v4 utilities layer

* Update test expectations [skip ci]

---------

Co-authored-by: github-actions <github-actions@github.com>
2025-09-09 00:20:24 -07:00
Rizumu Ayaka
6da2cf7b4d feat: vue based input number widget (#5435)
* feat: vue based input number widget

* fix: remove min and max
2025-09-08 23:34:07 -07:00
Jin Yi
b800227783 feat: add dynamic icon support for NavItem components (#5285)
* feat: add dynamic icon support for NavItem components

- Created NavIcon component with switch-case based icon rendering
- Added iconName prop to NavItem and NavItemData interface
- Updated LeftSidePanel to pass icon names to nav items
- Added sample icons to SampleModelSelector navigation (download, tag, layers, grid)
- Uses i-lucide syntax without imports for better tree-shaking

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

* test: add Storybook stories for navigation components

- Add NavIcon.stories.ts with interactive icon selector and all icons gallery
- Add NavItem.stories.ts with text customization and interactive list examples
- Add LeftSidePanel.stories.ts with various navigation configurations
- Remove old Navigation.stories.ts (replaced with component-specific stories)
- Configure slot visibility and hide update:modelValue event in controls

* refactor: simplify NavIcon component and improve type definitions

* fix: add icon size specification for Lucide icons in Storybook

* feature: NavItem story modified

* fix: disable knip unresolved imports rule for virtual icon modules

Add unresolved: 'off' to knip configuration to ignore virtual module imports
from unplugin-icons (~icons/*). These are generated at build time and cannot
be resolved statically.

🤖 Generated with [Claude Code](https://claude.ai/code)

Co-Authored-By: Claude <noreply@anthropic.com>

* chore: v-if condition added

* chore: knip ignoreUnresolved added based on knip issue PR

* refactor: navItem types added & deleting any type on storybook files

---------

Co-authored-by: Claude <noreply@anthropic.com>
2025-09-08 21:34:36 -07:00
Johnpaul
619728ca2b Merge branch 'main' into feat/new-workflow-templates 2025-09-09 02:25:06 +01:00
Johnpaul
2a50793f16 refactor: update BaseThumbnail tests and improve template description handling 2025-09-09 02:24:16 +01:00
Johnpaul
54c7851dbe refactor: delete unused components 2025-09-09 02:23:50 +01:00
Johnpaul
a96a8f5a4e refactor: rename NewWorkflowTemplateSelectorDialog 2025-09-09 01:31:56 +01:00
Johnpaul
06f6b67ecb refactor: remove old WorkflowTemplateSelector component 2025-09-09 01:30:38 +01:00
Johnpaul
cb3a29623b refactor: remove unused getCategoryIconByTitle function and clean up categoryIcons utility 2025-09-09 01:24:19 +01:00
Johnpaul
deb3d942b8 refactor: replace dialogService method call with useWorkflowTemplateSelectorDialog hook 2025-09-09 01:17:10 +01:00
Johnpaul
180a8ea16c refactor: update title styling and enhance hover transition effects 2025-09-09 01:02:25 +01:00