mirror of
https://github.com/solidtime-io/solidtime.git
synced 2026-10-09 06:13:17 +01:00
Compare commits
6 Commits
feature/fi
...
c45d6e2f5e
| Author | SHA1 | Date | |
|---|---|---|---|
|
c45d6e2f5e | ||
|
|
5b12c09747 | ||
|
|
24023353f2 | ||
|
|
720d20c10e | ||
|
|
82ea9af8b5 | ||
|
|
169d522da0 |
@@ -9,9 +9,9 @@
|
||||
"ext-zip": "*",
|
||||
"brick/money": "^0.10.0",
|
||||
"datomatic/laravel-enum-helper": "^2.0.0",
|
||||
"dedoc/scramble": "^0.12.2",
|
||||
"dedoc/scramble": "^0.13.43",
|
||||
"filament/filament": "^3.2",
|
||||
"flowframe/laravel-trend": "^0.4.0",
|
||||
"flowframe/laravel-trend": "^0.5.0",
|
||||
"gotenberg/gotenberg-php": "^2.8",
|
||||
"guzzlehttp/guzzle": "^7.2",
|
||||
"inertiajs/inertia-laravel": "^2.0.3",
|
||||
|
||||
1461
composer.lock
generated
1461
composer.lock
generated
File diff suppressed because it is too large
Load Diff
@@ -1579,57 +1579,6 @@ test('test that project selection works in create modal', async ({ page, ctx })
|
||||
expect(createBody.data.project_id).not.toBeNull();
|
||||
});
|
||||
|
||||
test('test that ctrl+enter submits the create modal after selecting a project via keyboard', async ({
|
||||
page,
|
||||
ctx,
|
||||
}) => {
|
||||
// Regression test for https://github.com/solidtime-io/solidtime/issues/1238
|
||||
const projectName = 'Keyboard Submit Project ' + Math.floor(1 + Math.random() * 10000);
|
||||
await createProjectViaApi(ctx, { name: projectName });
|
||||
|
||||
await goToTimeOverview(page);
|
||||
|
||||
await page.getByRole('button', { name: 'Time entry actions' }).click();
|
||||
await page.getByRole('menuitem', { name: 'Manual time entry' }).click();
|
||||
await expect(page.getByRole('dialog')).toBeVisible();
|
||||
// The menu that opened the modal animates out and only then hands focus back to its
|
||||
// own trigger.
|
||||
await expect(page.locator('[role="menu"]')).toHaveCount(0);
|
||||
|
||||
// Fill the description, then move to the project dropdown and select a project purely via keyboard
|
||||
const description = page.getByRole('dialog').getByRole('textbox', { name: 'Description' });
|
||||
await description.fill('Keyboard submit test');
|
||||
await description.press('Tab');
|
||||
await expect(
|
||||
page.getByRole('dialog').getByRole('button', { name: 'No Project' })
|
||||
).toBeFocused();
|
||||
await page.keyboard.press('Enter');
|
||||
await page.getByTestId('client_dropdown_search').fill(projectName);
|
||||
await expect(page.getByRole('option', { name: projectName })).toBeVisible();
|
||||
await page.keyboard.press('Enter');
|
||||
const projectTrigger = page.getByRole('dialog').getByRole('button', { name: projectName });
|
||||
await expect(projectTrigger).toBeVisible();
|
||||
// The trigger label updates on the next tick, but the dropdown keeps focus until its
|
||||
// exit animation has finished and reka-ui hands focus back to the trigger.
|
||||
await expect(projectTrigger).toBeFocused();
|
||||
|
||||
// Ctrl+Enter must submit even though focus is no longer on the description input
|
||||
const [createResponse] = await Promise.all([
|
||||
page.waitForResponse(
|
||||
(response) => response.url().includes('/time-entries') && response.status() === 201
|
||||
),
|
||||
page.keyboard.press('Control+Enter'),
|
||||
]);
|
||||
const createBody = await createResponse.json();
|
||||
expect(createBody.data.description).toBe('Keyboard submit test');
|
||||
expect(createBody.data.project_id).not.toBeNull();
|
||||
await expect(page.getByRole('dialog')).toBeHidden();
|
||||
const newTimeEntry = page.locator('[data-testid="time_entry_row"]').first();
|
||||
await expect(newTimeEntry.getByTestId('time_entry_description').first()).toHaveValue(
|
||||
'Keyboard submit test'
|
||||
);
|
||||
});
|
||||
|
||||
test('test that tag selection works in create modal', async ({ page }) => {
|
||||
await goToTimeOverview(page);
|
||||
|
||||
|
||||
@@ -9,6 +9,6 @@
|
||||
},
|
||||
"Invoicing": {
|
||||
"repository": "solidtime-io/extension-invoicing",
|
||||
"ref": "v0.0.5"
|
||||
"ref": "v0.0.6"
|
||||
}
|
||||
}
|
||||
|
||||
2
package-lock.json
generated
2
package-lock.json
generated
@@ -8564,7 +8564,7 @@
|
||||
},
|
||||
"resources/js/packages/ui": {
|
||||
"name": "@solidtime/ui",
|
||||
"version": "0.0.22",
|
||||
"version": "0.0.23",
|
||||
"license": "AGPL-3.0",
|
||||
"devDependencies": {
|
||||
"@types/chroma-js": "^3.1.2",
|
||||
|
||||
@@ -28,7 +28,7 @@ useFocus(clientNameInput, { initialValue: true });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DialogModal closeable :show="show" @close="show = false" @submit="submit">
|
||||
<DialogModal closeable :show="show" @close="show = false">
|
||||
<template #title>
|
||||
<div class="flex space-x-2">
|
||||
<span> Create Client </span>
|
||||
|
||||
@@ -30,7 +30,7 @@ useFocus(clientNameInput, { initialValue: true });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DialogModal closeable :show="show" @close="show = false" @submit="submit">
|
||||
<DialogModal closeable :show="show" @close="show = false">
|
||||
<template #title>
|
||||
<div class="flex space-x-2">
|
||||
<span> Update Client </span>
|
||||
|
||||
@@ -7,7 +7,7 @@ import { type Client } from '@/packages/api/src';
|
||||
import ClientTableRow from '@/Components/Common/Client/ClientTableRow.vue';
|
||||
import ClientCreateModal from '@/Components/Common/Client/ClientCreateModal.vue';
|
||||
import ClientTableHeading from '@/Components/Common/Client/ClientTableHeading.vue';
|
||||
import Pagination from '@/Components/Common/Pagination.vue';
|
||||
import Pagination from '@/packages/ui/src/Pagination.vue';
|
||||
import { canCreateClients } from '@/utils/permissions';
|
||||
import { useProjectsQuery } from '@/utils/useProjectsQuery';
|
||||
import {
|
||||
|
||||
@@ -136,7 +136,7 @@ const roleDescription = computed(() => {
|
||||
v-model:show="showOwnershipTransferConfirmModal"
|
||||
:member-name="member.name"
|
||||
@submit="submit"></MemberOwnershipTransferConfirmModal>
|
||||
<DialogModal closeable :show="show" @close="show = false" @submit="saveWithChecks()">
|
||||
<DialogModal closeable :show="show" @close="show = false">
|
||||
<template #title>
|
||||
<div class="flex space-x-2">
|
||||
<span> Update Member </span>
|
||||
|
||||
@@ -78,7 +78,7 @@ useFocus(clientNameInput, { initialValue: true });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DialogModal closeable :show="show" @close="show = false" @submit="submit">
|
||||
<DialogModal closeable :show="show" @close="show = false">
|
||||
<template #title>
|
||||
<div class="flex space-x-2">
|
||||
<span> Invite Member </span>
|
||||
|
||||
@@ -79,7 +79,7 @@ async function submitBillableRate() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DialogModal closeable :show="show" @close="show = false" @submit="submit">
|
||||
<DialogModal closeable :show="show" @close="show = false">
|
||||
<template #title>
|
||||
<div class="flex space-x-2">
|
||||
<span> Edit Project {{ props.originalProject.name }} </span>
|
||||
|
||||
@@ -6,7 +6,7 @@ import { computed, ref, watch } from 'vue';
|
||||
import ProjectCreateModal from '@/packages/ui/src/Project/ProjectCreateModal.vue';
|
||||
import ProjectTableHeading from '@/Components/Common/Project/ProjectTableHeading.vue';
|
||||
import ProjectTableRow from '@/Components/Common/Project/ProjectTableRow.vue';
|
||||
import Pagination from '@/Components/Common/Pagination.vue';
|
||||
import Pagination from '@/packages/ui/src/Pagination.vue';
|
||||
import LoadingSpinner from '@/packages/ui/src/LoadingSpinner.vue';
|
||||
|
||||
export type SortColumn =
|
||||
|
||||
@@ -38,7 +38,7 @@ useFocus(projectNameInput, { initialValue: true });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DialogModal closeable :show="show" @close="show = false" @submit="submit">
|
||||
<DialogModal closeable :show="show" @close="show = false">
|
||||
<template #title>
|
||||
<div class="flex space-x-2">
|
||||
<span>Add Project Member</span>
|
||||
|
||||
@@ -63,7 +63,7 @@ useFocus(projectNameInput, { initialValue: true });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DialogModal closeable :show="show" @close="show = false" @submit="submit">
|
||||
<DialogModal closeable :show="show" @close="show = false">
|
||||
<template #title>
|
||||
<div class="flex space-x-2">
|
||||
<span>Edit Project Member</span>
|
||||
|
||||
@@ -79,7 +79,7 @@ async function submit() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DialogModal closeable :show="show" @close="show = false" @submit="submit">
|
||||
<DialogModal closeable :show="show" @close="show = false">
|
||||
<template #title>
|
||||
<div class="flex space-x-2">
|
||||
<span> Create Report </span>
|
||||
|
||||
@@ -96,7 +96,7 @@ async function submit() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DialogModal closeable :show="show" @close="show = false" @submit="submit">
|
||||
<DialogModal closeable :show="show" @close="show = false">
|
||||
<template #title>
|
||||
<div class="flex space-x-2">
|
||||
<span> Create Report </span>
|
||||
|
||||
@@ -36,7 +36,7 @@ useFocus(tagNameInput, { initialValue: true });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DialogModal closeable :show="show" @close="show = false" @submit="submit">
|
||||
<DialogModal closeable :show="show" @close="show = false">
|
||||
<template #title>
|
||||
<div class="flex space-x-2">
|
||||
<span> Update Tag </span>
|
||||
|
||||
@@ -50,7 +50,7 @@ useFocus(taskNameInput, { initialValue: true });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DialogModal closeable :show="show" @close="show = false" @submit="submit">
|
||||
<DialogModal closeable :show="show" @close="show = false">
|
||||
<template #title>
|
||||
<div class="flex space-x-2">
|
||||
<span> Create Task </span>
|
||||
|
||||
@@ -35,7 +35,7 @@ useFocus(taskNameInput, { initialValue: true });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DialogModal closeable :show="show" @close="show = false" @submit="submit">
|
||||
<DialogModal closeable :show="show" @close="show = false">
|
||||
<template #title>
|
||||
<div class="flex space-x-2">
|
||||
<span> Update Task </span>
|
||||
|
||||
@@ -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');
|
||||
|
||||
|
||||
@@ -179,7 +179,7 @@ async function submit() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DialogModal closeable :show="show" @close="emit('cancel')" @submit="submit">
|
||||
<DialogModal closeable :show="show" @close="emit('cancel')">
|
||||
<template #title>
|
||||
<div class="flex items-center space-x-2">
|
||||
<Coffee class="w-5 h-5 text-text-secondary" />
|
||||
|
||||
@@ -9,7 +9,7 @@ import {
|
||||
ArrowDownTrayIcon,
|
||||
LockClosedIcon,
|
||||
} from '@heroicons/vue/20/solid';
|
||||
import Pagination from '@/Components/Common/Pagination.vue';
|
||||
import Pagination from '@/packages/ui/src/Pagination.vue';
|
||||
import {
|
||||
DropdownMenu,
|
||||
DropdownMenuContent,
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "@solidtime/ui",
|
||||
"version": "0.0.22",
|
||||
"version": "0.0.23",
|
||||
"description": "Package containing the solidtime ui components",
|
||||
"main": "./dist/solidtime-ui-lib.umd.cjs",
|
||||
"module": "./dist/solidtime-ui-lib.js",
|
||||
|
||||
@@ -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,7 +1,7 @@
|
||||
<script setup lang="ts">
|
||||
import Modal from './Modal.vue';
|
||||
|
||||
const emit = defineEmits(['close', 'submit']);
|
||||
const emit = defineEmits(['close']);
|
||||
|
||||
defineProps({
|
||||
show: {
|
||||
@@ -24,12 +24,7 @@ const close = () => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Modal
|
||||
:show="show"
|
||||
:max-width="maxWidth"
|
||||
:closeable="closeable"
|
||||
@close="close"
|
||||
@submit="emit('submit')">
|
||||
<Modal :show="show" :max-width="maxWidth" :closeable="closeable" @close="close">
|
||||
<div class="px-4 lg:px-6 py-4">
|
||||
<div class="text-lg font-medium text-text-primary" role="heading">
|
||||
<slot name="title" />
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<script setup lang="ts">
|
||||
import { Dialog, DialogContent, DialogFooter } from './dialog/index';
|
||||
import { computed, nextTick } from 'vue';
|
||||
import { computed } from 'vue';
|
||||
|
||||
const props = defineProps({
|
||||
show: {
|
||||
@@ -17,7 +17,7 @@ const props = defineProps({
|
||||
},
|
||||
});
|
||||
|
||||
const emit = defineEmits(['close', 'submit']);
|
||||
const emit = defineEmits(['close']);
|
||||
|
||||
const close = () => {
|
||||
if (props.closeable) {
|
||||
@@ -25,25 +25,6 @@ const close = () => {
|
||||
}
|
||||
};
|
||||
|
||||
// Ctrl+Enter (Cmd+Enter on macOS) submits the modal from any focused element inside it.
|
||||
// Handled in the capture phase so child elements (buttons, dropdown triggers, inputs with
|
||||
// their own Enter handlers) never see the keystroke and cannot open or double-submit.
|
||||
async function onKeydownCapture(event: KeyboardEvent) {
|
||||
if (event.key !== 'Enter' || !(event.ctrlKey || event.metaKey) || event.isComposing) {
|
||||
return;
|
||||
}
|
||||
event.preventDefault();
|
||||
event.stopPropagation();
|
||||
// Inputs like the time and duration fields commit their value on blur, so blur first
|
||||
// and let the resulting model updates settle before submitting.
|
||||
const active = document.activeElement;
|
||||
if (active instanceof HTMLElement) {
|
||||
active.blur();
|
||||
}
|
||||
await nextTick();
|
||||
emit('submit');
|
||||
}
|
||||
|
||||
const maxWidthClass = computed(() => {
|
||||
return {
|
||||
sm: 'sm:max-w-sm',
|
||||
@@ -58,7 +39,7 @@ const maxWidthClass = computed(() => {
|
||||
<template>
|
||||
<Dialog :open="show" @update:open="close">
|
||||
<DialogContent :class="maxWidthClass">
|
||||
<div class="min-w-0" @keydown.capture="onKeydownCapture">
|
||||
<div class="min-w-0">
|
||||
<slot />
|
||||
</div>
|
||||
|
||||
|
||||
@@ -16,8 +16,8 @@ import {
|
||||
ChevronRightIcon,
|
||||
EllipsisHorizontalIcon,
|
||||
} from '@heroicons/vue/20/solid';
|
||||
import { buttonVariants } from '@/packages/ui/src';
|
||||
import { cn } from '@/lib/utils';
|
||||
import { buttonVariants } from './Buttons/index';
|
||||
import { cn } from './utils/cn';
|
||||
import { computed, watch } from 'vue';
|
||||
|
||||
const page = defineModel<number>('page', { default: 1 });
|
||||
@@ -72,7 +72,7 @@ const currentClientName = computed(() => {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DialogModal closeable :show="show" @close="show = false" @submit="submit">
|
||||
<DialogModal closeable :show="show" @close="show = false">
|
||||
<template #title>
|
||||
<div class="flex space-x-2">
|
||||
<span> Create Project </span>
|
||||
|
||||
@@ -30,7 +30,7 @@ useFocus(tagNameInput, { initialValue: true });
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DialogModal closeable :show="show" @close="show = false" @submit="submit">
|
||||
<DialogModal closeable :show="show" @close="show = false">
|
||||
<template #title>
|
||||
<div class="flex space-x-2">
|
||||
<span> Create Tags </span>
|
||||
|
||||
@@ -78,7 +78,7 @@ async function submit() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DialogModal closeable :show="show" @close="show = false" @submit="submit">
|
||||
<DialogModal closeable :show="show" @close="show = false">
|
||||
<template #title>
|
||||
<div class="flex items-center space-x-2 text-amber-600 dark:text-amber-400">
|
||||
<Coffee class="w-5 h-5" />
|
||||
|
||||
@@ -126,7 +126,7 @@ const billableProxy = computed({
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DialogModal closeable :show="show" @close="show = false" @submit="submit">
|
||||
<DialogModal closeable :show="show" @close="show = false">
|
||||
<template #title>
|
||||
<div class="flex space-x-2">
|
||||
<span> Create manual time entry </span>
|
||||
|
||||
@@ -164,7 +164,7 @@ const typeProxy = computed({
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DialogModal closeable :show="show" @close="show = false" @submit="submit">
|
||||
<DialogModal closeable :show="show" @close="show = false">
|
||||
<template #title>
|
||||
<div class="flex space-x-2">
|
||||
<span> Edit time entry </span>
|
||||
|
||||
@@ -16,7 +16,6 @@ import {
|
||||
} from '@/packages/api/src';
|
||||
import { Checkbox } from '@/packages/ui/src';
|
||||
import { TagIcon, ExclamationTriangleIcon } from '@heroicons/vue/20/solid';
|
||||
import { XMarkIcon } from '@heroicons/vue/16/solid';
|
||||
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '..';
|
||||
import { Button } from '@/packages/ui/src/Buttons';
|
||||
import TagDropdown from '@/packages/ui/src/Tag/TagDropdown.vue';
|
||||
@@ -61,13 +60,6 @@ const projectId = ref<string | null>(null);
|
||||
const billable = ref<boolean | undefined>(undefined);
|
||||
const selectedTags = ref<string[]>([]);
|
||||
|
||||
// Clearing the project puts both fields back to "leave unchanged", the same state the form
|
||||
// returns to after a successful submit.
|
||||
function resetProject() {
|
||||
projectId.value = null;
|
||||
taskId.value = undefined;
|
||||
}
|
||||
|
||||
const timeEntryBillable = computed({
|
||||
get: () => {
|
||||
if (billable.value === undefined) {
|
||||
@@ -155,7 +147,7 @@ const showBreakWarning = computed(
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<DialogModal closeable :show="show" @close="show = false" @submit="submit">
|
||||
<DialogModal closeable :show="show" @close="show = false">
|
||||
<template #title>
|
||||
<div class="flex space-x-2">
|
||||
<span> Update {{ timeEntries.length }} time entries </span>
|
||||
@@ -190,59 +182,42 @@ const showBreakWarning = computed(
|
||||
</Field>
|
||||
<Field>
|
||||
<FieldLabel for="project">Project</FieldLabel>
|
||||
<div class="flex items-center gap-1 min-w-0">
|
||||
<!-- the dropdown declares its own `class` prop, which goes to the
|
||||
trigger button, so the growing has to happen on a wrapper -->
|
||||
<div class="flex-1 min-w-0">
|
||||
<TimeTrackerProjectTaskDropdown
|
||||
v-model:project="projectId"
|
||||
v-model:task="taskId"
|
||||
variant="input"
|
||||
align="start"
|
||||
size="default"
|
||||
:clients
|
||||
:create-project
|
||||
:create-client
|
||||
:currency="currency"
|
||||
:organization-billable-rate="organizationBillableRate"
|
||||
:can-create-project
|
||||
empty-placeholder="Select project..."
|
||||
:enable-estimated-time
|
||||
:projects="projects"
|
||||
:tasks="tasks"></TimeTrackerProjectTaskDropdown>
|
||||
</div>
|
||||
<button
|
||||
v-if="projectId !== null"
|
||||
type="button"
|
||||
data-testid="project_reset_button"
|
||||
class="p-1 rounded hover:bg-quaternary text-text-tertiary hover:text-text-primary"
|
||||
@click="resetProject">
|
||||
<XMarkIcon class="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
<TimeTrackerProjectTaskDropdown
|
||||
v-model:project="projectId"
|
||||
v-model:task="taskId"
|
||||
variant="input"
|
||||
align="start"
|
||||
size="default"
|
||||
:clients
|
||||
:create-project
|
||||
:create-client
|
||||
:currency="currency"
|
||||
:organization-billable-rate="organizationBillableRate"
|
||||
:can-create-project
|
||||
empty-placeholder="Select project..."
|
||||
allow-reset
|
||||
:enable-estimated-time
|
||||
:projects="projects"
|
||||
:tasks="tasks"></TimeTrackerProjectTaskDropdown>
|
||||
</Field>
|
||||
<Field>
|
||||
<FieldLabel>Tag</FieldLabel>
|
||||
<div class="flex items-center space-x-5">
|
||||
<!-- the dropdown root is `min-w-0`, so as a flex item it would shrink
|
||||
below its trigger and let the button overflow into the checkbox -->
|
||||
<div class="shrink-0">
|
||||
<TagDropdown
|
||||
v-model="selectedTags"
|
||||
:create-tag
|
||||
:tags="tags"
|
||||
:show-no-tag-option="false">
|
||||
<template #trigger>
|
||||
<Button variant="input" :disabled="removeAllTags">
|
||||
<TagIcon class="h-4 text-icon-default" />
|
||||
<span v-if="selectedTags.length > 0">
|
||||
Set {{ selectedTags.length }} tags
|
||||
</span>
|
||||
<span v-else>Select Tags...</span>
|
||||
</Button>
|
||||
</template>
|
||||
</TagDropdown>
|
||||
</div>
|
||||
<div class="flex space-x-5">
|
||||
<TagDropdown
|
||||
v-model="selectedTags"
|
||||
:create-tag
|
||||
:tags="tags"
|
||||
:show-no-tag-option="false">
|
||||
<template #trigger>
|
||||
<Button variant="input" :disabled="removeAllTags">
|
||||
<TagIcon class="h-4 text-icon-default" />
|
||||
<span v-if="selectedTags.length > 0">
|
||||
Set {{ selectedTags.length }} tags
|
||||
</span>
|
||||
<span v-else>Select Tags...</span>
|
||||
</Button>
|
||||
</template>
|
||||
</TagDropdown>
|
||||
<Field orientation="horizontal">
|
||||
<Checkbox id="no_tags" v-model:checked="removeAllTags"></Checkbox>
|
||||
<FieldLabel for="no_tags">Remove all tags</FieldLabel>
|
||||
|
||||
@@ -12,7 +12,7 @@ import type {
|
||||
Client,
|
||||
} from '@/packages/api/src';
|
||||
|
||||
import { PlusCircleIcon, MinusIcon } from '@heroicons/vue/16/solid';
|
||||
import { PlusCircleIcon, MinusIcon, XMarkIcon } from '@heroicons/vue/16/solid';
|
||||
import ProjectCreateModal from '@/packages/ui/src/Project/ProjectCreateModal.vue';
|
||||
import { twMerge } from 'tailwind-merge';
|
||||
import { Button } from '@/packages/ui/src/Buttons';
|
||||
@@ -58,6 +58,7 @@ const props = withDefaults(
|
||||
createClient: (client: CreateClientBody) => Promise<Client | undefined>;
|
||||
currency: string;
|
||||
emptyPlaceholder?: string;
|
||||
allowReset?: boolean;
|
||||
noProjectValue?: string | null;
|
||||
enableEstimatedTime: boolean;
|
||||
organizationBillableRate: number | null;
|
||||
@@ -69,6 +70,7 @@ const props = withDefaults(
|
||||
}>(),
|
||||
{
|
||||
emptyPlaceholder: 'No Project',
|
||||
allowReset: false,
|
||||
noProjectValue: NO_PROJECT_ID,
|
||||
variant: 'ghost',
|
||||
align: 'center',
|
||||
@@ -556,6 +558,12 @@ function selectProject(projectId: string) {
|
||||
emit('changed', project.value, task.value);
|
||||
}
|
||||
|
||||
function resetProject() {
|
||||
project.value = null;
|
||||
task.value = null;
|
||||
emit('changed', project.value, task.value);
|
||||
}
|
||||
|
||||
const showCreateProject = ref(false);
|
||||
</script>
|
||||
|
||||
@@ -563,28 +571,40 @@ const showCreateProject = ref(false);
|
||||
<Dropdown v-model="open" :close-on-content-click="false" :align="props.align">
|
||||
<template #trigger>
|
||||
<slot name="trigger">
|
||||
<Button
|
||||
:variant="props.variant"
|
||||
:size="props.size"
|
||||
:class="twMerge('w-full justify-start overflow-hidden', props.class)">
|
||||
<div
|
||||
class="w-2.5 h-2.5 rounded-full shrink-0"
|
||||
:style="{ backgroundColor: selectedProjectColor }"></div>
|
||||
<span class="truncate shrink-[1] text-text-primary">{{
|
||||
selectedProjectName
|
||||
}}</span>
|
||||
<template v-if="currentTask">
|
||||
<ChevronRightIcon class="!size-3 text-text-primary shrink-0 -mx-1" />
|
||||
<span class="truncate shrink-[100]">{{ currentTask.name }}</span>
|
||||
</template>
|
||||
<template v-if="selectedClientName">
|
||||
<span class="dark:text-text-tertiary text-text-quaternary shrink-0">•</span>
|
||||
<span
|
||||
class="truncate shrink-[200] dark:text-text-tertiary text-text-quaternary"
|
||||
>{{ selectedClientName }}</span
|
||||
>
|
||||
</template>
|
||||
</Button>
|
||||
<div class="flex items-center gap-1">
|
||||
<Button
|
||||
:variant="props.variant"
|
||||
:size="props.size"
|
||||
:class="twMerge('w-full justify-start overflow-hidden', props.class)">
|
||||
<div
|
||||
class="w-2.5 h-2.5 rounded-full shrink-0"
|
||||
:style="{ backgroundColor: selectedProjectColor }"></div>
|
||||
<span class="truncate shrink-[1] text-text-primary">{{
|
||||
selectedProjectName
|
||||
}}</span>
|
||||
<template v-if="currentTask">
|
||||
<ChevronRightIcon class="!size-3 text-text-primary shrink-0 -mx-1" />
|
||||
<span class="truncate shrink-[100]">{{ currentTask.name }}</span>
|
||||
</template>
|
||||
<template v-if="selectedClientName">
|
||||
<span class="dark:text-text-tertiary text-text-quaternary shrink-0"
|
||||
>•</span
|
||||
>
|
||||
<span
|
||||
class="truncate shrink-[200] dark:text-text-tertiary text-text-quaternary"
|
||||
>{{ selectedClientName }}</span
|
||||
>
|
||||
</template>
|
||||
</Button>
|
||||
<button
|
||||
v-if="allowReset && project !== null"
|
||||
type="button"
|
||||
data-testid="project_reset_button"
|
||||
class="p-1 rounded hover:bg-quaternary text-text-tertiary hover:text-text-primary"
|
||||
@click.stop="resetProject">
|
||||
<XMarkIcon class="w-4 h-4" />
|
||||
</button>
|
||||
</div>
|
||||
</slot>
|
||||
</template>
|
||||
<template #content>
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -32,6 +32,7 @@ import InputLabel from './Input/InputLabel.vue';
|
||||
import TextInput from './Input/TextInput.vue';
|
||||
import LoadingSpinner from './LoadingSpinner.vue';
|
||||
import Modal from './Modal.vue';
|
||||
import Pagination from './Pagination.vue';
|
||||
import ProjectBadge from './Project/ProjectBadge.vue';
|
||||
import TimeEntryCreateModal from './TimeEntry/TimeEntryCreateModal.vue';
|
||||
import TimeEntryEditModal from './TimeEntry/TimeEntryEditModal.vue';
|
||||
@@ -257,6 +258,7 @@ export {
|
||||
NumberFieldDecrement,
|
||||
NumberFieldIncrement,
|
||||
NumberFieldInput,
|
||||
Pagination,
|
||||
Popover,
|
||||
PopoverAnchor,
|
||||
PopoverContent,
|
||||
|
||||
@@ -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