mirror of
https://github.com/solidtime-io/solidtime.git
synced 2026-10-08 05:43:18 +01:00
Compare commits
6 Commits
feature/mo
...
79f88f48cd
| Author | SHA1 | Date | |
|---|---|---|---|
|
79f88f48cd | ||
|
|
5b12c09747 | ||
|
|
24023353f2 | ||
|
|
720d20c10e | ||
|
|
82ea9af8b5 | ||
|
|
169d522da0 |
@@ -9,6 +9,6 @@
|
||||
},
|
||||
"Invoicing": {
|
||||
"repository": "solidtime-io/extension-invoicing",
|
||||
"ref": "v0.0.5"
|
||||
"ref": "v0.0.6"
|
||||
}
|
||||
}
|
||||
|
||||
4289
package-lock.json
generated
4289
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
30
package.json
30
package.json
@@ -26,13 +26,13 @@
|
||||
},
|
||||
"devDependencies": {
|
||||
"@eslint/eslintrc": "^3.3.5",
|
||||
"@eslint/js": "^9.39.4",
|
||||
"@inertiajs/vue3": "^2.3.23",
|
||||
"@eslint/js": "^10.0.1",
|
||||
"@inertiajs/vue3": "^3.7.0",
|
||||
"@playwright/test": "^1.60.0",
|
||||
"@tailwindcss/forms": "^0.5.11",
|
||||
"@tailwindcss/typography": "^0.5.19",
|
||||
"@types/chroma-js": "^3.1.2",
|
||||
"@types/node": "^22.19.19",
|
||||
"@types/node": "^26.4.1",
|
||||
"@vitejs/plugin-vue": "^6.0.6",
|
||||
"@vue/test-utils": "^2.4.6",
|
||||
"@vue/tsconfig": "^0.8.1",
|
||||
@@ -40,30 +40,30 @@
|
||||
"axios": "^1.16.0",
|
||||
"eslint-plugin-unused-imports": "^4.4.1",
|
||||
"happy-dom": "^20.8.9",
|
||||
"laravel-vite-plugin": "^2.1.0",
|
||||
"laravel-vite-plugin": "^3.2.0",
|
||||
"openapi-zod-client": "^1.18.3",
|
||||
"postcss": "^8.5.14",
|
||||
"postcss-import": "^15.1.0",
|
||||
"postcss-nesting": "^12.1.5",
|
||||
"tailwindcss": "^3.4.19",
|
||||
"typescript": "^5.9.3",
|
||||
"vite": "^7.3.3",
|
||||
"postcss-import": "^17.0.0",
|
||||
"postcss-nesting": "^14.0.1",
|
||||
"tailwindcss": "^4.3.3",
|
||||
"typescript": "^7.0.2",
|
||||
"vite": "^8.2.2",
|
||||
"vite-plugin-checker": "^0.12.0",
|
||||
"vitest": "^4.1.4",
|
||||
"vitest": "^5.0.0",
|
||||
"vue": "^3.5.34",
|
||||
"vue-tsc": "^3.2.8"
|
||||
},
|
||||
"dependencies": {
|
||||
"@floating-ui/core": "^1.7.5",
|
||||
"@floating-ui/vue": "^1.1.11",
|
||||
"@floating-ui/vue": "^2.0.1",
|
||||
"@heroicons/vue": "^2.2.0",
|
||||
"@lucide/vue": "^1.28.0",
|
||||
"@rushstack/eslint-patch": "^1.16.1",
|
||||
"@tailwindcss/container-queries": "^0.1.1",
|
||||
"@tanstack/vue-form": "^1.32.0",
|
||||
"@tanstack/vue-query": "^5.100.10",
|
||||
"@tanstack/vue-query-devtools": "^5.91.0",
|
||||
"@tanstack/vue-table": "^8.21.3",
|
||||
"@tanstack/vue-query-devtools": "^6.1.48",
|
||||
"@tanstack/vue-table": "^9.2.4",
|
||||
"@tanstack/vue-virtual": "^3.13.24",
|
||||
"@vue/eslint-config-prettier": "^10.2.0",
|
||||
"@vue/eslint-config-typescript": "^14.7.0",
|
||||
@@ -77,10 +77,10 @@
|
||||
"echarts": "^6.0.0",
|
||||
"focus-trap": "^8.2.0",
|
||||
"parse-duration": "^2.1.6",
|
||||
"pinia": "^3.0.4",
|
||||
"pinia": "^4.0.3",
|
||||
"radix-vue": "^1.9.17",
|
||||
"reka-ui": "^2.10.1",
|
||||
"tailwind-merge": "^2.6.1",
|
||||
"tailwind-merge": "^3.6.0",
|
||||
"tailwindcss-animate": "^1.0.7",
|
||||
"vue-draggable-plus": "^0.6.1",
|
||||
"vue-echarts": "^8.0.1",
|
||||
|
||||
@@ -63,7 +63,7 @@ const max = computed(() => {
|
||||
});
|
||||
|
||||
const backgroundColor = useCssVariable('--theme-color-card-background');
|
||||
const borderColor = useCssVariable('--color-border');
|
||||
const borderColor = useCssVariable('--color-border-secondary');
|
||||
const labelColor = useCssVariable('--color-text-secondary');
|
||||
const chartColorRaw = useCssVariable('--theme-color-chart');
|
||||
|
||||
|
||||
@@ -29,7 +29,7 @@
|
||||
"author": "solidtime",
|
||||
"license": "AGPL-3.0",
|
||||
"devDependencies": {
|
||||
"vite-plugin-dts": "^4.5.4"
|
||||
"vite-plugin-dts": "^5.1.0"
|
||||
},
|
||||
"peerDependencies": {
|
||||
"@zodios/core": "^10.9.6",
|
||||
|
||||
@@ -50,7 +50,7 @@
|
||||
"devDependencies": {
|
||||
"@types/chroma-js": "^3.1.2",
|
||||
"@zodios/core": "^10.9.6",
|
||||
"vite-plugin-dts": "^4.5.4",
|
||||
"vite-plugin-dts": "^5.1.0",
|
||||
"zod": "^3.25.76"
|
||||
},
|
||||
"peerDependencies": {
|
||||
|
||||
@@ -11,6 +11,7 @@ import {
|
||||
CommandShortcut,
|
||||
} from '../command';
|
||||
import { cn } from '../utils/cn';
|
||||
import { useDialogFocusRestore } from '../utils/useDialogFocusRestore';
|
||||
import type {
|
||||
CommandPaletteCommand,
|
||||
CommandPaletteGroup,
|
||||
@@ -36,6 +37,8 @@ const emit = defineEmits<{
|
||||
select: [command: CommandPaletteCommand | EntitySearchResult];
|
||||
}>();
|
||||
|
||||
const { onOpenAutoFocus, onCloseAutoFocus } = useDialogFocusRestore();
|
||||
|
||||
// Non-empty groups for rendering
|
||||
const nonEmptyGroups = computed(() => props.groups.filter((g) => g.commands.length > 0));
|
||||
|
||||
@@ -71,7 +74,9 @@ watch(open, (isOpen) => {
|
||||
)
|
||||
">
|
||||
<DialogContent
|
||||
class="pointer-events-auto bg-default-background w-full max-w-lg border border-border-tertiary shadow-lg sm:rounded-lg outline-none overflow-hidden p-0 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95">
|
||||
class="pointer-events-auto bg-default-background w-full max-w-lg border border-border-tertiary shadow-lg sm:rounded-lg outline-none overflow-hidden p-0 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95"
|
||||
@open-auto-focus="onOpenAutoFocus"
|
||||
@close-auto-focus="onCloseAutoFocus">
|
||||
<CommandRoot
|
||||
v-model:search-term="searchTerm"
|
||||
class="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { cn } from '../utils/cn';
|
||||
import { useDialogFocusRestore } from '../utils/useDialogFocusRestore';
|
||||
import {
|
||||
DialogContent,
|
||||
type DialogContentEmits,
|
||||
@@ -20,6 +21,10 @@ const delegatedProps = computed(() => {
|
||||
});
|
||||
|
||||
const forwarded = useForwardPropsEmits(delegatedProps, emits);
|
||||
|
||||
// Forwarded consumer listeners run first, so a consumer can still take over
|
||||
// by calling preventDefault() on close-auto-focus.
|
||||
const { onOpenAutoFocus, onCloseAutoFocus } = useDialogFocusRestore();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -36,7 +41,9 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
|
||||
'my-3 md:my-14 xl:my-24 bg-default-background grid w-full max-w-lg border border-border-tertiary shadow-lg duration-200 rounded-lg outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95',
|
||||
props.class
|
||||
)
|
||||
">
|
||||
"
|
||||
@open-auto-focus="onOpenAutoFocus"
|
||||
@close-auto-focus="onCloseAutoFocus">
|
||||
<slot />
|
||||
</DialogContent>
|
||||
</div>
|
||||
|
||||
@@ -1,5 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { cn } from '../utils/cn';
|
||||
import { useDialogFocusRestore } from '../utils/useDialogFocusRestore';
|
||||
import { X } from '@lucide/vue';
|
||||
import {
|
||||
DialogClose,
|
||||
@@ -22,6 +23,10 @@ const delegatedProps = computed(() => {
|
||||
});
|
||||
|
||||
const forwarded = useForwardPropsEmits(delegatedProps, emits);
|
||||
|
||||
// Forwarded consumer listeners run first, so a consumer can still take over
|
||||
// by calling preventDefault() on close-auto-focus.
|
||||
const { onOpenAutoFocus, onCloseAutoFocus } = useDialogFocusRestore();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -36,6 +41,8 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
|
||||
)
|
||||
"
|
||||
v-bind="forwarded"
|
||||
@open-auto-focus="onOpenAutoFocus"
|
||||
@close-auto-focus="onCloseAutoFocus"
|
||||
@pointer-down-outside="
|
||||
(event) => {
|
||||
const originalEvent = event.detail.originalEvent;
|
||||
|
||||
@@ -0,0 +1,87 @@
|
||||
import { describe, expect, it, vi } from 'vitest';
|
||||
import { useDialogFocusRestore } from './useDialogFocusRestore';
|
||||
|
||||
function closeEvent() {
|
||||
return new CustomEvent('focusScope.autoFocusOnUnmount', { cancelable: true });
|
||||
}
|
||||
|
||||
describe('useDialogFocusRestore', () => {
|
||||
it('restores focus to the element focused when the dialog opened', () => {
|
||||
vi.useFakeTimers();
|
||||
const button = document.createElement('button');
|
||||
document.body.appendChild(button);
|
||||
button.focus();
|
||||
|
||||
const { onOpenAutoFocus, onCloseAutoFocus } = useDialogFocusRestore();
|
||||
onOpenAutoFocus();
|
||||
button.blur();
|
||||
|
||||
const event = closeEvent();
|
||||
onCloseAutoFocus(event);
|
||||
expect(event.defaultPrevented).toBe(true);
|
||||
vi.runAllTimers();
|
||||
expect(document.activeElement).toBe(button);
|
||||
|
||||
button.remove();
|
||||
vi.useRealTimers();
|
||||
});
|
||||
|
||||
it('focuses nothing when the dialog was opened with nothing focused', () => {
|
||||
vi.useFakeTimers();
|
||||
const stale = document.createElement('button');
|
||||
document.body.appendChild(stale);
|
||||
const { onOpenAutoFocus, onCloseAutoFocus } = useDialogFocusRestore();
|
||||
|
||||
// First open from the button, then close
|
||||
stale.focus();
|
||||
onOpenAutoFocus();
|
||||
onCloseAutoFocus(closeEvent());
|
||||
vi.runAllTimers();
|
||||
stale.blur();
|
||||
|
||||
// Second open from the body must not refocus the stale button
|
||||
onOpenAutoFocus();
|
||||
const event = closeEvent();
|
||||
onCloseAutoFocus(event);
|
||||
expect(event.defaultPrevented).toBe(true);
|
||||
vi.runAllTimers();
|
||||
expect(document.activeElement).toBe(document.body);
|
||||
|
||||
stale.remove();
|
||||
vi.useRealTimers();
|
||||
});
|
||||
|
||||
it('does not restore focus to an element that was removed', () => {
|
||||
vi.useFakeTimers();
|
||||
const button = document.createElement('button');
|
||||
document.body.appendChild(button);
|
||||
button.focus();
|
||||
const { onOpenAutoFocus, onCloseAutoFocus } = useDialogFocusRestore();
|
||||
onOpenAutoFocus();
|
||||
button.remove();
|
||||
|
||||
onCloseAutoFocus(closeEvent());
|
||||
vi.runAllTimers();
|
||||
expect(document.activeElement).toBe(document.body);
|
||||
vi.useRealTimers();
|
||||
});
|
||||
|
||||
it('leaves control to a consumer that already prevented the event', () => {
|
||||
vi.useFakeTimers();
|
||||
const button = document.createElement('button');
|
||||
document.body.appendChild(button);
|
||||
button.focus();
|
||||
const { onOpenAutoFocus, onCloseAutoFocus } = useDialogFocusRestore();
|
||||
onOpenAutoFocus();
|
||||
button.blur();
|
||||
|
||||
const event = closeEvent();
|
||||
event.preventDefault();
|
||||
onCloseAutoFocus(event);
|
||||
vi.runAllTimers();
|
||||
expect(document.activeElement).toBe(document.body);
|
||||
|
||||
button.remove();
|
||||
vi.useRealTimers();
|
||||
});
|
||||
});
|
||||
41
resources/js/packages/ui/src/utils/useDialogFocusRestore.ts
Normal file
41
resources/js/packages/ui/src/utils/useDialogFocusRestore.ts
Normal file
@@ -0,0 +1,41 @@
|
||||
/**
|
||||
* Restores focus to the element that was focused when a dialog opened.
|
||||
*
|
||||
* reka-ui remembers the active element at content mount as the dialog's
|
||||
* "trigger" (only when it is not the body) and refocuses it on every close,
|
||||
* but it never clears that value. A dialog opened while nothing is focused
|
||||
* (e.g. the command palette via Cmd+K from the body) therefore refocuses
|
||||
* whatever triggered a *previous* open. Bind these handlers to
|
||||
* `DialogContent`'s `open-auto-focus` / `close-auto-focus` events to restore
|
||||
* exactly the previously focused element, or nothing.
|
||||
*
|
||||
* A consumer handler that already called `preventDefault()` on
|
||||
* `close-auto-focus` keeps control; this composable then does nothing.
|
||||
*/
|
||||
export function useDialogFocusRestore() {
|
||||
let previouslyFocused: HTMLElement | null = null;
|
||||
|
||||
function onOpenAutoFocus() {
|
||||
const active = document.activeElement;
|
||||
previouslyFocused =
|
||||
active instanceof HTMLElement && active !== document.body ? active : null;
|
||||
}
|
||||
|
||||
function onCloseAutoFocus(event: Event) {
|
||||
const target = previouslyFocused;
|
||||
previouslyFocused = null;
|
||||
if (event.defaultPrevented) {
|
||||
return;
|
||||
}
|
||||
// Prevents both FocusScope's default restore and reka-ui's trigger refocus
|
||||
event.preventDefault();
|
||||
// Same tick reka-ui uses, so the dialog content is fully gone first
|
||||
setTimeout(() => {
|
||||
if (target?.isConnected) {
|
||||
target.focus({ preventScroll: true });
|
||||
}
|
||||
}, 0);
|
||||
}
|
||||
|
||||
return { onOpenAutoFocus, onCloseAutoFocus };
|
||||
}
|
||||
Reference in New Issue
Block a user