+
- (null)
const dragHandleRef = ref(null)
const isDocked = useLocalStorage('Comfy.MenuPosition.Docked', true)
@@ -66,22 +84,10 @@ const storedPosition = useLocalStorage('Comfy.MenuPosition.Floating', {
x: 0,
y: 0
})
-const {
- x,
- y,
- style: style,
- isDragging
-} = useDraggable(panelRef, {
+const { x, y, style, isDragging } = useDraggable(panelRef, {
initialValue: { x: 0, y: 0 },
handle: dragHandleRef,
- containerElement: document.body,
- onMove: (event) => {
- // Prevent dragging the menu over the top of the tabs
- const minY = tabContainer?.getBoundingClientRect().bottom ?? 40
- if (event.y < minY) {
- event.y = minY
- }
- }
+ containerElement: document.body
})
// Update storedPosition when x or y changes
@@ -126,7 +132,14 @@ const setInitialPosition = () => {
}
}
}
-onMounted(setInitialPosition)
+
+//The ComfyRunButton is a dynamic import. Which means it will not be loaded onMount in this component.
+//So we must use suspense resolve to ensure that is has loaded and updated the DOM before calling setInitialPosition()
+async function comfyRunButtonResolved() {
+ await nextTick()
+ setInitialPosition()
+}
+
watch(visible, async (newVisible) => {
if (newVisible) {
await nextTick(setInitialPosition)
@@ -255,6 +268,16 @@ watch(isDragging, (dragging) => {
isMouseOverDropZone.value = false
}
})
+
+const cancelJobTooltipConfig = computed(() =>
+ buildTooltipConfig(t('menu.interrupt'))
+)
+
+const cancelCurrentJob = async () => {
+ if (isExecutionIdle.value) return
+ await commandStore.execute('Comfy.Interrupt')
+}
+
const actionbarClass = computed(() =>
cn(
'w-[200px] border-dashed border-blue-500 opacity-80',
@@ -267,10 +290,10 @@ const actionbarClass = computed(() =>
)
const panelClass = computed(() =>
cn(
- 'actionbar pointer-events-auto z1000',
+ 'actionbar pointer-events-auto z-1300',
isDragging.value && 'select-none pointer-events-none',
isDocked.value
- ? 'p-0 static mr-2 border-none bg-transparent'
+ ? 'p-0 static border-none bg-transparent'
: 'fixed shadow-interface'
)
)
diff --git a/src/components/actionbar/ComfyRunButton/ComfyQueueButton.vue b/src/components/actionbar/ComfyRunButton/ComfyQueueButton.vue
index db28d980c..4c0ea84e4 100644
--- a/src/components/actionbar/ComfyRunButton/ComfyQueueButton.vue
+++ b/src/components/actionbar/ComfyRunButton/ComfyQueueButton.vue
@@ -22,12 +22,13 @@
value: item.tooltip,
showDelay: 600
}"
- :label="String(item.label ?? '')"
- :icon="item.icon"
- :severity="item.key === queueMode ? 'primary' : 'secondary'"
- size="small"
- text
- />
+ :variant="item.key === queueMode ? 'primary' : 'secondary'"
+ size="sm"
+ class="w-full justify-start"
+ >
+
+ {{ String(item.label ?? '') }}
+
& {
+ placeholder?: string
+ disabled?: boolean
+ },
+ options = {}
+ ) => {
return mount(UrlInput, {
global: {
plugins: [PrimeVue],
@@ -169,25 +176,25 @@ describe('UrlInput', () => {
await input.setValue(' https://leading-space.com')
await input.trigger('input')
await nextTick()
- expect(wrapper.vm.internalValue).toBe('https://leading-space.com')
+ expect(input.element.value).toBe('https://leading-space.com')
// Test trailing whitespace
await input.setValue('https://trailing-space.com ')
await input.trigger('input')
await nextTick()
- expect(wrapper.vm.internalValue).toBe('https://trailing-space.com')
+ expect(input.element.value).toBe('https://trailing-space.com')
// Test both leading and trailing whitespace
await input.setValue(' https://both-spaces.com ')
await input.trigger('input')
await nextTick()
- expect(wrapper.vm.internalValue).toBe('https://both-spaces.com')
+ expect(input.element.value).toBe('https://both-spaces.com')
// Test whitespace in the middle of the URL
await input.setValue('https:// middle-space.com')
await input.trigger('input')
await nextTick()
- expect(wrapper.vm.internalValue).toBe('https://middle-space.com')
+ expect(input.element.value).toBe('https://middle-space.com')
})
it('trims whitespace when value set externally', async () => {
@@ -196,15 +203,17 @@ describe('UrlInput', () => {
placeholder: 'Enter URL'
})
+ const input = wrapper.find('input')
+
// Check initial value is trimmed
- expect(wrapper.vm.internalValue).toBe('https://initial-value.com')
+ expect(input.element.value).toBe('https://initial-value.com')
// Update props with whitespace
await wrapper.setProps({ modelValue: ' https://updated-value.com ' })
await nextTick()
// Check updated value is trimmed
- expect(wrapper.vm.internalValue).toBe('https://updated-value.com')
+ expect(input.element.value).toBe('https://updated-value.com')
})
})
})
diff --git a/src/components/common/UserAvatar.test.ts b/src/components/common/UserAvatar.test.ts
index 0c6b26e4e..0b5df7052 100644
--- a/src/components/common/UserAvatar.test.ts
+++ b/src/components/common/UserAvatar.test.ts
@@ -1,3 +1,5 @@
+import type { ComponentProps } from 'vue-component-type-helpers'
+
import { mount } from '@vue/test-utils'
import Avatar from 'primevue/avatar'
import PrimeVue from 'primevue/config'
@@ -27,7 +29,7 @@ describe('UserAvatar', () => {
app.use(PrimeVue)
})
- const mountComponent = (props: any = {}) => {
+ const mountComponent = (props: ComponentProps = {}) => {
return mount(UserAvatar, {
global: {
plugins: [PrimeVue, i18n],
diff --git a/src/components/common/UserCredit.test.ts b/src/components/common/UserCredit.test.ts
new file mode 100644
index 000000000..7fcb42f49
--- /dev/null
+++ b/src/components/common/UserCredit.test.ts
@@ -0,0 +1,134 @@
+import { mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { createI18n } from 'vue-i18n'
+
+import enMessages from '@/locales/en/main.json' with { type: 'json' }
+
+import UserCredit from './UserCredit.vue'
+
+vi.mock('firebase/app', () => ({
+ initializeApp: vi.fn(),
+ getApp: vi.fn()
+}))
+
+vi.mock('firebase/auth', () => ({
+ getAuth: vi.fn(),
+ setPersistence: vi.fn(),
+ browserLocalPersistence: {},
+ onAuthStateChanged: vi.fn(),
+ signInWithEmailAndPassword: vi.fn(),
+ signOut: vi.fn()
+}))
+
+vi.mock('pinia')
+
+const mockBalance = vi.hoisted(() => ({
+ value: {
+ amount_micros: 100_000,
+ effective_balance_micros: 100_000,
+ currency: 'usd'
+ }
+}))
+
+const mockIsFetchingBalance = vi.hoisted(() => ({ value: false }))
+
+vi.mock('@/stores/firebaseAuthStore', () => ({
+ useFirebaseAuthStore: vi.fn(() => ({
+ balance: mockBalance.value,
+ isFetchingBalance: mockIsFetchingBalance.value
+ }))
+}))
+
+describe('UserCredit', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ mockBalance.value = {
+ amount_micros: 100_000,
+ effective_balance_micros: 100_000,
+ currency: 'usd'
+ }
+ mockIsFetchingBalance.value = false
+ })
+
+ const mountComponent = (props = {}) => {
+ const i18n = createI18n({
+ legacy: false,
+ locale: 'en',
+ messages: { en: enMessages }
+ })
+
+ return mount(UserCredit, {
+ props,
+ global: {
+ plugins: [i18n],
+ stubs: {
+ Skeleton: true,
+ Tag: true
+ }
+ }
+ })
+ }
+
+ describe('effective_balance_micros handling', () => {
+ it('uses effective_balance_micros when present (positive balance)', () => {
+ mockBalance.value = {
+ amount_micros: 200_000,
+ effective_balance_micros: 150_000,
+ currency: 'usd'
+ }
+
+ const wrapper = mountComponent()
+ expect(wrapper.text()).toContain('Credits')
+ })
+
+ it('uses effective_balance_micros when zero', () => {
+ mockBalance.value = {
+ amount_micros: 100_000,
+ effective_balance_micros: 0,
+ currency: 'usd'
+ }
+
+ const wrapper = mountComponent()
+ expect(wrapper.text()).toContain('0')
+ })
+
+ it('uses effective_balance_micros when negative', () => {
+ mockBalance.value = {
+ amount_micros: 0,
+ effective_balance_micros: -50_000,
+ currency: 'usd'
+ }
+
+ const wrapper = mountComponent()
+ expect(wrapper.text()).toContain('-')
+ })
+
+ it('falls back to amount_micros when effective_balance_micros is missing', () => {
+ mockBalance.value = {
+ amount_micros: 100_000,
+ currency: 'usd'
+ } as typeof mockBalance.value
+
+ const wrapper = mountComponent()
+ expect(wrapper.text()).toContain('Credits')
+ })
+
+ it('falls back to 0 when both effective_balance_micros and amount_micros are missing', () => {
+ mockBalance.value = {
+ currency: 'usd'
+ } as typeof mockBalance.value
+
+ const wrapper = mountComponent()
+ expect(wrapper.text()).toContain('0')
+ })
+ })
+
+ describe('loading state', () => {
+ it('shows skeleton when loading', () => {
+ mockIsFetchingBalance.value = true
+
+ const wrapper = mountComponent()
+ expect(wrapper.findComponent({ name: 'Skeleton' }).exists()).toBe(true)
+ })
+ })
+})
diff --git a/src/components/common/UserCredit.vue b/src/components/common/UserCredit.vue
index aac405b90..987406ede 100644
--- a/src/components/common/UserCredit.vue
+++ b/src/components/common/UserCredit.vue
@@ -8,12 +8,18 @@
('all')
+
// Filter templates based on selected navigation item
const navigationFilteredTemplates = computed(() => {
if (!selectedNavItem.value) {
@@ -533,9 +560,40 @@ const {
availableRunsOn,
filteredCount,
totalCount,
- resetFilters
+ resetFilters,
+ loadFuseOptions
} = useTemplateFiltering(navigationFilteredTemplates)
+/**
+ * Coordinates state between the selected navigation item and the sort order to
+ * create deterministic, predictable behavior.
+ * @param source The origin of the change ('nav' or 'sort').
+ */
+const coordinateNavAndSort = (source: 'nav' | 'sort') => {
+ const isPopularNav = selectedNavItem.value === 'popular'
+ const isPopularSort = sortBy.value === 'popular'
+
+ if (source === 'nav') {
+ if (isPopularNav && !isPopularSort) {
+ // When navigating to 'Popular' category, automatically set sort to 'Popular'.
+ sortBy.value = 'popular'
+ } else if (!isPopularNav && isPopularSort) {
+ // When navigating away from 'Popular' category while sort is 'Popular', reset sort to default.
+ sortBy.value = 'default'
+ }
+ } else if (source === 'sort') {
+ // When sort is changed away from 'Popular' while in the 'Popular' category,
+ // reset the category to 'All Templates' to avoid a confusing state.
+ if (isPopularNav && !isPopularSort) {
+ selectedNavItem.value = 'all'
+ }
+ }
+}
+
+// Watch for changes from the two sources ('nav' and 'sort') and trigger the coordinator.
+watch(selectedNavItem, () => coordinateNavAndSort('nav'))
+watch(sortBy, () => coordinateNavAndSort('sort'))
+
// Convert between string array and object array for MultiSelect component
const selectedModelObjects = computed({
get() {
@@ -578,9 +636,6 @@ const cardRefs = ref([])
// Force re-render key for templates when sorting changes
const templateListKey = ref(0)
-// Navigation
-const selectedNavItem = ref('all')
-
// Search text for model filter
const modelSearchText = ref('')
@@ -645,11 +700,19 @@ const runsOnFilterLabel = computed(() => {
// Sort options
const sortOptions = computed(() => [
- { name: t('templateWorkflows.sort.newest', 'Newest'), value: 'newest' },
{
name: t('templateWorkflows.sort.default', 'Default'),
value: 'default'
},
+ {
+ name: t('templateWorkflows.sort.recommended', 'Recommended'),
+ value: 'recommended'
+ },
+ {
+ name: t('templateWorkflows.sort.popular', 'Popular'),
+ value: 'popular'
+ },
+ { name: t('templateWorkflows.sort.newest', 'Newest'), value: 'newest' },
{
name: t('templateWorkflows.sort.vramLowToHigh', 'VRAM Usage (Low to High)'),
value: 'vram-low-to-high'
@@ -750,10 +813,10 @@ const pageTitle = computed(() => {
// Initialize templates loading with useAsyncState
const { isLoading } = useAsyncState(
async () => {
- // Run both operations in parallel for better performance
await Promise.all([
loadTemplates(),
- workflowTemplatesStore.loadWorkflowTemplates()
+ workflowTemplatesStore.loadWorkflowTemplates(),
+ loadFuseOptions()
])
return true
},
@@ -763,6 +826,14 @@ const { isLoading } = useAsyncState(
}
)
+const isTemplateVisibleOnDistribution = (template: TemplateInfo) => {
+ return (template.includeOnDistributions?.length ?? 0) > 0
+ ? distributions.value.some((d) =>
+ template.includeOnDistributions?.includes(d)
+ )
+ : true
+}
+
onBeforeUnmount(() => {
cardRefs.value = [] // Release DOM refs
})
diff --git a/src/components/dialog/GlobalDialog.vue b/src/components/dialog/GlobalDialog.vue
index 4566b0684..aede76907 100644
--- a/src/components/dialog/GlobalDialog.vue
+++ b/src/components/dialog/GlobalDialog.vue
@@ -4,9 +4,14 @@
v-for="item in dialogStore.dialogStack"
:key="item.key"
v-model:visible="item.visible"
- class="global-dialog"
+ :class="[
+ 'global-dialog',
+ item.key === 'global-settings' && teamWorkspacesEnabled
+ ? 'settings-dialog-workspace'
+ : ''
+ ]"
v-bind="item.dialogComponentProps"
- :pt="item.dialogComponentProps.pt"
+ :pt="getDialogPt(item)"
:aria-labelledby="item.key"
>
@@ -14,6 +19,7 @@
= {}): AssetDownload {
+ return {
+ taskId: 'task-1',
+ assetId: 'asset-1',
+ assetName: 'model-v1.safetensors',
+ bytesTotal: 1000000,
+ bytesDownloaded: 0,
+ progress: 0,
+ status: 'created',
+ lastUpdate: Date.now(),
+ ...overrides
+ }
+}
+
+const meta: Meta = {
+ title: 'Toast/HoneyToast',
+ component: HoneyToast,
+ parameters: {
+ layout: 'fullscreen'
+ },
+ decorators: [
+ () => ({
+ template: '
+
+export const Default: Story = {
+ render: () => ({
+ components: { HoneyToast, Button, ProgressToastItem },
+ setup() {
+ const isExpanded = ref(false)
+ const jobs = [
+ createMockJob({
+ taskId: 'task-1',
+ assetName: 'model-v1.safetensors',
+ status: 'completed',
+ progress: 1
+ }),
+ createMockJob({
+ taskId: 'task-2',
+ assetName: 'lora-style.safetensors',
+ status: 'running',
+ progress: 0.45
+ }),
+ createMockJob({
+ taskId: 'task-3',
+ assetName: 'vae-decoder.safetensors',
+ status: 'created'
+ })
+ ]
+ return { isExpanded, cn, jobs }
+ },
+ template: `
+
+
+
+ `
+ })
+}
+
+export const Expanded: Story = {
+ render: () => ({
+ components: { HoneyToast, Button, ProgressToastItem },
+ setup() {
+ const isExpanded = ref(true)
+ const jobs = [
+ createMockJob({
+ taskId: 'task-1',
+ assetName: 'model-v1.safetensors',
+ status: 'completed',
+ progress: 1
+ }),
+ createMockJob({
+ taskId: 'task-2',
+ assetName: 'lora-style.safetensors',
+ status: 'running',
+ progress: 0.45
+ }),
+ createMockJob({
+ taskId: 'task-3',
+ assetName: 'vae-decoder.safetensors',
+ status: 'created'
+ })
+ ]
+ return { isExpanded, cn, jobs }
+ },
+ template: `
+
+
+
+ `
+ })
+}
+
+export const Completed: Story = {
+ render: () => ({
+ components: { HoneyToast, Button, ProgressToastItem },
+ setup() {
+ const isExpanded = ref(false)
+ const jobs = [
+ createMockJob({
+ taskId: 'task-1',
+ assetName: 'model-v1.safetensors',
+ bytesDownloaded: 1000000,
+ progress: 1,
+ status: 'completed'
+ }),
+ createMockJob({
+ taskId: 'task-2',
+ assetId: 'asset-2',
+ assetName: 'lora-style.safetensors',
+ bytesTotal: 500000,
+ bytesDownloaded: 500000,
+ progress: 1,
+ status: 'completed'
+ })
+ ]
+ return { isExpanded, cn, jobs }
+ },
+ template: `
+
+
+
+ `
+ })
+}
+
+export const WithError: Story = {
+ render: () => ({
+ components: { HoneyToast, Button, ProgressToastItem },
+ setup() {
+ const isExpanded = ref(true)
+ const jobs = [
+ createMockJob({
+ taskId: 'task-1',
+ assetName: 'model-v1.safetensors',
+ status: 'failed',
+ progress: 0.23
+ }),
+ createMockJob({
+ taskId: 'task-2',
+ assetName: 'lora-style.safetensors',
+ status: 'completed',
+ progress: 1
+ })
+ ]
+ return { isExpanded, cn, jobs }
+ },
+ template: `
+
+
+
+ `
+ })
+}
+
+export const Hidden: Story = {
+ render: () => ({
+ components: { HoneyToast },
+ template: `
+
+
+
+ `
+ })
+
+ const wrapper = mount(TestWrapper, { attachTo: document.body })
+ await nextTick()
+
+ const content = document.body.querySelector('[data-testid="content"]')
+ expect(content?.textContent).toBe('collapsed')
+
+ const toggleBtn = document.body.querySelector(
+ '[data-testid="toggle-btn"]'
+ ) as HTMLButtonElement
+ expect(toggleBtn?.textContent?.trim()).toBe('Expand')
+
+ toggleBtn?.click()
+ await nextTick()
+
+ expect(content?.textContent).toBe('expanded')
+ expect(toggleBtn?.textContent?.trim()).toBe('Collapse')
+
+ const expandableArea = document.body.querySelector(
+ '[role="status"] > div:first-child'
+ )
+ expect(expandableArea?.classList.contains('max-h-[400px]')).toBe(true)
+
+ wrapper.unmount()
+ })
+})
diff --git a/src/components/honeyToast/HoneyToast.vue b/src/components/honeyToast/HoneyToast.vue
new file mode 100644
index 000000000..a7d86ba77
--- /dev/null
+++ b/src/components/honeyToast/HoneyToast.vue
@@ -0,0 +1,46 @@
+
+
+
+
+
+
+
+
diff --git a/src/components/imagecrop/WidgetImageCrop.vue b/src/components/imagecrop/WidgetImageCrop.vue
new file mode 100644
index 000000000..4a1c39ef6
--- /dev/null
+++ b/src/components/imagecrop/WidgetImageCrop.vue
@@ -0,0 +1,100 @@
+
+
@@ -145,9 +145,13 @@
-
+
@@ -43,22 +54,29 @@ import {
watchDebounced
} from '@vueuse/core'
import { clamp } from 'es-toolkit/compat'
+import { storeToRefs } from 'pinia'
import Panel from 'primevue/panel'
-import { computed, nextTick, onMounted, ref, watch } from 'vue'
+import { computed, nextTick, ref, watch } from 'vue'
+import { useI18n } from 'vue-i18n'
-import { t } from '@/i18n'
+import Button from '@/components/ui/button/Button.vue'
+import { buildTooltipConfig } from '@/composables/useTooltipConfig'
import { useSettingStore } from '@/platform/settings/settingStore'
import { useTelemetry } from '@/platform/telemetry'
+import { useCommandStore } from '@/stores/commandStore'
+import { useExecutionStore } from '@/stores/executionStore'
import { cn } from '@/utils/tailwindUtil'
import ComfyRunButton from './ComfyRunButton'
const settingsStore = useSettingStore()
+const commandStore = useCommandStore()
+const { t } = useI18n()
+const { isIdle: isExecutionIdle } = storeToRefs(useExecutionStore())
const position = computed(() => settingsStore.get('Comfy.UseNewMenu'))
const visible = computed(() => position.value !== 'Disabled')
-const tabContainer = document.querySelector('.workflow-tabs-container')
const panelRef = ref
-
-
+
+
{{ formattedBalance }}
+ >
+
+
+
+
+
+ {{ showCreditsOnly ? formattedCreditsOnly : formattedBalance }}
+
-
-
@@ -382,19 +381,18 @@ import ProgressSpinner from 'primevue/progressspinner'
import { computed, onBeforeUnmount, onMounted, provide, ref, watch } from 'vue'
import { useI18n } from 'vue-i18n'
-import IconButton from '@/components/button/IconButton.vue'
-import IconTextButton from '@/components/button/IconTextButton.vue'
import CardBottom from '@/components/card/CardBottom.vue'
import CardContainer from '@/components/card/CardContainer.vue'
import CardTop from '@/components/card/CardTop.vue'
import SquareChip from '@/components/chip/SquareChip.vue'
+import SearchBox from '@/components/common/SearchBox.vue'
import MultiSelect from '@/components/input/MultiSelect.vue'
-import SearchBox from '@/components/input/SearchBox.vue'
import SingleSelect from '@/components/input/SingleSelect.vue'
import AudioThumbnail from '@/components/templates/thumbnails/AudioThumbnail.vue'
import CompareSliderThumbnail from '@/components/templates/thumbnails/CompareSliderThumbnail.vue'
import DefaultThumbnail from '@/components/templates/thumbnails/DefaultThumbnail.vue'
import HoverDissolveThumbnail from '@/components/templates/thumbnails/HoverDissolveThumbnail.vue'
+import Button from '@/components/ui/button/Button.vue'
import BaseModalLayout from '@/components/widget/layout/BaseModalLayout.vue'
import LeftSidePanel from '@/components/widget/panel/LeftSidePanel.vue'
import { useIntersectionObserver } from '@/composables/useIntersectionObserver'
@@ -405,6 +403,8 @@ import { useTelemetry } from '@/platform/telemetry'
import { useTemplateWorkflows } from '@/platform/workflow/templates/composables/useTemplateWorkflows'
import { useWorkflowTemplatesStore } from '@/platform/workflow/templates/repositories/workflowTemplatesStore'
import type { TemplateInfo } from '@/platform/workflow/templates/types/template'
+import { TemplateIncludeOnDistributionEnum } from '@/platform/workflow/templates/types/template'
+import { useSystemStatsStore } from '@/stores/systemStatsStore'
import type { NavGroupData, NavItemData } from '@/types/navTypes'
import { OnCloseKey } from '@/types/widgetTypes'
import { createGridStyle } from '@/utils/gridUtil'
@@ -423,6 +423,30 @@ onMounted(() => {
sessionStartTime.value = Date.now()
})
+const systemStatsStore = useSystemStatsStore()
+
+const distributions = computed(() => {
+ // eslint-disable-next-line no-undef
+ switch (__DISTRIBUTION__) {
+ case 'cloud':
+ return [TemplateIncludeOnDistributionEnum.Cloud]
+ case 'localhost':
+ return [TemplateIncludeOnDistributionEnum.Local]
+ case 'desktop':
+ default:
+ if (systemStatsStore.systemStats?.system.os === 'darwin') {
+ return [
+ TemplateIncludeOnDistributionEnum.Desktop,
+ TemplateIncludeOnDistributionEnum.Mac
+ ]
+ }
+ return [
+ TemplateIncludeOnDistributionEnum.Desktop,
+ TemplateIncludeOnDistributionEnum.Windows
+ ]
+ }
+})
+
// Wrap onClose to track session end
const onClose = () => {
if (isCloud) {
@@ -511,6 +535,9 @@ const allTemplates = computed(() => {
return workflowTemplatesStore.enhancedTemplates
})
+// Navigation
+const selectedNavItem = ref
-
+
@@ -28,19 +32,22 @@ type GridState = {
const {
items,
+ gridStyle,
bufferRows = 1,
scrollThrottle = 64,
resizeDebounce = 64,
defaultItemHeight = 200,
- defaultItemWidth = 200
+ defaultItemWidth = 200,
+ maxColumns = Infinity
} = defineProps<{
items: (T & { key: string })[]
- gridStyle: Partial
+ gridStyle: CSSProperties
bufferRows?: number
scrollThrottle?: number
resizeDebounce?: number
defaultItemHeight?: number
defaultItemWidth?: number
+ maxColumns?: number
}>()
const emit = defineEmits<{
@@ -59,7 +66,18 @@ const { y: scrollY } = useScroll(container, {
eventListenerOptions: { passive: true }
})
-const cols = computed(() => Math.floor(width.value / itemWidth.value) || 1)
+const cols = computed(() =>
+ Math.min(Math.floor(width.value / itemWidth.value) || 1, maxColumns)
+)
+
+const mergedGridStyle = computed(() => {
+ if (maxColumns === Infinity) return gridStyle
+ return {
+ ...gridStyle,
+ gridTemplateColumns: `repeat(${maxColumns}, minmax(0, 1fr))`
+ }
+})
+
const viewRows = computed(() => Math.ceil(height.value / itemHeight.value))
const offsetRows = computed(() => Math.floor(scrollY.value / itemHeight.value))
const isValidGrid = computed(() => height.value && width.value && items?.length)
@@ -83,6 +101,16 @@ const renderedItems = computed(() =>
isValidGrid.value ? items.slice(state.value.start, state.value.end) : []
)
+function rowsToHeight(rows: number): string {
+ return `${(rows / cols.value) * itemHeight.value}px`
+}
+const topSpacerStyle = computed(() => ({
+ height: rowsToHeight(state.value.start)
+}))
+const bottomSpacerStyle = computed(() => ({
+ height: rowsToHeight(items.length - state.value.end)
+}))
+
whenever(
() => state.value.isNearEnd,
() => {
@@ -109,24 +137,6 @@ const onResize = debounce(updateItemSize, resizeDebounce)
watch([width, height], onResize, { flush: 'post' })
whenever(() => items, updateItemSize, { flush: 'post' })
onBeforeUnmount(() => {
- onResize.cancel() // Clear pending debounced calls
+ onResize.cancel()
})
-
-
diff --git a/src/components/common/WorkspaceProfilePic.vue b/src/components/common/WorkspaceProfilePic.vue
new file mode 100644
index 000000000..bc147a61c
--- /dev/null
+++ b/src/components/common/WorkspaceProfilePic.vue
@@ -0,0 +1,43 @@
+
+
diff --git a/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue b/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
index a1174aa10..0276435f1 100644
--- a/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
+++ b/src/components/custom/widget/WorkflowTemplateSelectorDialog.vue
@@ -3,17 +3,14 @@
:content-title="$t('templateWorkflows.title', 'Workflow Templates')"
class="workflow-template-selector-dialog"
>
+
+
+
-
-
-
-
- {{
- $t('sideToolbar.templates', 'Templates')
- }}
-
-
+
-
-
+
+ {{ letter }}
+
+
+
+
diff --git a/src/components/common/statusBadge.variants.ts b/src/components/common/statusBadge.variants.ts
new file mode 100644
index 000000000..479a0dda8
--- /dev/null
+++ b/src/components/common/statusBadge.variants.ts
@@ -0,0 +1,26 @@
+import type { VariantProps } from 'cva'
+import { cva } from 'cva'
+
+export const statusBadgeVariants = cva({
+ base: 'inline-flex items-center justify-center rounded-full',
+ variants: {
+ severity: {
+ default: 'bg-primary-background text-base-foreground',
+ secondary: 'bg-secondary-background text-base-foreground',
+ warn: 'bg-warning-background text-base-background',
+ danger: 'bg-destructive-background text-white',
+ contrast: 'bg-base-foreground text-base-background'
+ },
+ variant: {
+ label: 'h-3.5 px-1 text-xxxs font-semibold uppercase',
+ dot: 'size-2',
+ circle: 'size-3.5 text-xxxs font-semibold'
+ }
+ },
+ defaultVariants: {
+ severity: 'default',
+ variant: 'label'
+ }
+})
+
+export type StatusBadgeVariants = VariantProps+ {{ $t('sideToolbar.templates', 'Templates') }} +
+ -
-
-
-
-
-
+
+ {{
+ $t('templateWorkflows.resetFilters', 'Clear Filters')
+ }}
+
@@ -174,6 +172,7 @@
@@ -35,11 +41,38 @@
diff --git a/src/components/honeyToast/HoneyToast.stories.ts b/src/components/honeyToast/HoneyToast.stories.ts new file mode 100644 index 000000000..74331d49f --- /dev/null +++ b/src/components/honeyToast/HoneyToast.stories.ts @@ -0,0 +1,293 @@ +import type { Meta, StoryObj } from '@storybook/vue3-vite' +import { ref } from 'vue' + +import ProgressToastItem from '@/components/toast/ProgressToastItem.vue' +import Button from '@/components/ui/button/Button.vue' +import type { AssetDownload } from '@/stores/assetDownloadStore' +import { cn } from '@/utils/tailwindUtil' + +import HoneyToast from './HoneyToast.vue' + +function createMockJob(overrides: Partial
+
+ Download Queue
+
+
+
+
+
+
+
+
+
+
+
+
+ lora-style.safetensors
+
+
+ 1 of 3
+
+
+
+
+
+
+ Download Queue
+
+
+
+
+
+
+
+
+
+
+
+
+ lora-style.safetensors
+
+
+ 1 of 3
+
+
+
+
+
+
+ Download Queue
+
+
+
+
+
+
+
+
+
+
+
+
+ All downloads completed
+
+
+
+
+
+
+
+ Download Queue
+
+
+
+
+
+
+
+
+
+
+
+
+ 1 download failed
+
+
+
+
+
+
+
+
+
+
+ `
+ })
+}
diff --git a/src/components/honeyToast/HoneyToast.test.ts b/src/components/honeyToast/HoneyToast.test.ts
new file mode 100644
index 000000000..ada123053
--- /dev/null
+++ b/src/components/honeyToast/HoneyToast.test.ts
@@ -0,0 +1,137 @@
+import type { VueWrapper } from '@vue/test-utils'
+import { mount } from '@vue/test-utils'
+import { beforeEach, describe, expect, it, vi } from 'vitest'
+import { defineComponent, h, nextTick, ref } from 'vue'
+
+import HoneyToast from './HoneyToast.vue'
+
+describe('HoneyToast', () => {
+ beforeEach(() => {
+ vi.clearAllMocks()
+ document.body.innerHTML = ''
+ })
+
+ function mountComponent(
+ props: { visible: boolean; expanded?: boolean } = { visible: true }
+ ): VueWrapper {
+ return mount(HoneyToast, {
+ props,
+ slots: {
+ default: (slotProps: { isExpanded: boolean }) =>
+ h(
+ 'div',
+ { 'data-testid': 'content' },
+ slotProps.isExpanded ? 'expanded' : 'collapsed'
+ ),
+ footer: (slotProps: { isExpanded: boolean; toggle: () => void }) =>
+ h(
+ 'button',
+ {
+ 'data-testid': 'toggle-btn',
+ onClick: slotProps.toggle
+ },
+ slotProps.isExpanded ? 'Collapse' : 'Expand'
+ )
+ },
+ attachTo: document.body
+ })
+ }
+
+ it('renders when visible is true', async () => {
+ const wrapper = mountComponent({ visible: true })
+ await nextTick()
+
+ const toast = document.body.querySelector('[role="status"]')
+ expect(toast).toBeTruthy()
+
+ wrapper.unmount()
+ })
+
+ it('does not render when visible is false', async () => {
+ const wrapper = mountComponent({ visible: false })
+ await nextTick()
+
+ const toast = document.body.querySelector('[role="status"]')
+ expect(toast).toBeFalsy()
+
+ wrapper.unmount()
+ })
+
+ it('passes is-expanded=false to slots by default', async () => {
+ const wrapper = mountComponent({ visible: true })
+ await nextTick()
+
+ const content = document.body.querySelector('[data-testid="content"]')
+ expect(content?.textContent).toBe('collapsed')
+
+ wrapper.unmount()
+ })
+
+ it('applies collapsed max-height class when collapsed', async () => {
+ const wrapper = mountComponent({ visible: true, expanded: false })
+ await nextTick()
+
+ const expandableArea = document.body.querySelector(
+ '[role="status"] > div:first-child'
+ )
+ expect(expandableArea?.classList.contains('max-h-0')).toBe(true)
+
+ wrapper.unmount()
+ })
+
+ it('has aria-live="polite" for accessibility', async () => {
+ const wrapper = mountComponent({ visible: true })
+ await nextTick()
+
+ const toast = document.body.querySelector('[role="status"]')
+ expect(toast?.getAttribute('aria-live')).toBe('polite')
+
+ wrapper.unmount()
+ })
+
+ it('supports v-model:expanded with reactive parent state', async () => {
+ const TestWrapper = defineComponent({
+ components: { HoneyToast },
+ setup() {
+ const expanded = ref(false)
+ return { expanded }
+ },
+ template: `
+ HoneyToast is hidden when visible=false. Nothing appears at the bottom.
+ +Content
+
+
+ Footer
+
+ {{ slotProps.isExpanded ? 'expanded' : 'collapsed' }}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/src/components/input/MultiSelect.vue b/src/components/input/MultiSelect.vue
index d4b2c2172..21ba0d6a2 100644
--- a/src/components/input/MultiSelect.vue
+++ b/src/components/input/MultiSelect.vue
@@ -62,7 +62,7 @@
// Option row hover and focus tone
option: ({ context }: MultiSelectPassThroughMethodOptions) => ({
class: cn(
- 'flex gap-2 items-center h-10 px-2 rounded-lg',
+ 'flex gap-2 items-center h-10 px-2 rounded-lg cursor-pointer',
'hover:bg-secondary-background-hover',
// Add focus/highlight state for keyboard navigation
context?.focused &&
@@ -112,14 +112,14 @@
: $t('g.itemSelected', { selectedCount })
}}
-
+ ![]()
+
+
+
+
+ {{ $t('imageCrop.loading') }}
+
+
+
+
+
+
+ {{ $t('imageCrop.noInputImage') }}
+
+
+
+
+
+
+
-
+
+ {{ slotProps.option.name }}
+
@@ -172,17 +174,16 @@
diff --git a/src/components/load3d/Load3D.vue b/src/components/load3d/Load3D.vue
index a525481d4..f6942e7c3 100644
--- a/src/components/load3d/Load3D.vue
+++ b/src/components/load3d/Load3D.vue
@@ -1,6 +1,6 @@