Skip to content

Commit f129f4a

Browse files
author
antoine
committed
fix tests / embed modal
1 parent df16dc1 commit f129f4a

File tree

15 files changed

+140
-134
lines changed

15 files changed

+140
-134
lines changed

‎demo/app/Sharp/Utils/Embeds/RelatedPostEmbed.php‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ public function buildEmbedConfig(): void
1616
->configureLabel('Related Post')
1717
->configureTagName('x-related-post')
1818
->configureTemplate(<<<'blade'
19-
<div>
19+
<div style="display: flex; gap: .5rem; align-items: center">
2020
@if($online)
2121
<span style="color: blue">●</span>
2222
@else

‎resources/js/components/ui/dialog/DialogScrollContent.vue‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -27,7 +27,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
2727
<template>
2828
<DialogPortal>
2929
<DialogOverlay
30-
class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
30+
class="fixed inset-0 z-50 grid place-items-center overflow-y-auto bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
3131
>
3232
<DialogContent
3333
:class="

‎resources/js/form/components/Form.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@
4343
4444
loading.value = true;
4545
46-
return postFn(form.data)
46+
return postFn(form.serializedData)
4747
.catch(error => {
4848
console.log('handled', error);
4949
if (error.response?.status === 422) {
@@ -143,7 +143,7 @@
143143
</div>
144144
</CardHeader>
145145
</template>
146-
<CardContent :class="inline ? 'p-0' : ''">
146+
<CardContent :class="inline ? '!p-0' : ''">
147147
<template v-if="form.pageAlert">
148148
<PageAlert
149149
class="mb-3"

‎resources/js/form/components/fields/Textarea.vue‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,8 +9,8 @@
99
const props = defineProps<FormFieldProps<FormTextareaFieldData>>();
1010
const emit = defineEmits<FormFieldEmits<FormTextareaFieldData>>();
1111
12-
function onInput(e) {
13-
const value = normalizeText(e.target.value);
12+
function onInput(textareaValue: string) {
13+
const value = normalizeText(textareaValue);
1414
const error = validateTextField(value, {
1515
maxlength: props.field.maxLength,
1616
});

‎resources/js/form/components/fields/editor/Editor.vue‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -166,10 +166,9 @@
166166
</div>
167167
</template>
168168

169-
170169
<EditorAttributes
171170
:class="cn(
172-
'min-h-20 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
171+
'min-h-20 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>p]:mb-4 [&>:last-child]:mb-0',
173172
{
174173
'min-h-[--min-height]': field.minHeight,
175174
'max-h-[--max-height]': field.maxHeight,

‎resources/js/form/components/fields/editor/extensions/embed/EditorEmbedModal.vue‎

Lines changed: 65 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,41 +1,59 @@
11
<script setup lang="ts">
2-
import { ref } from "vue";
2+
import { ref, useTemplateRef } from "vue";
33
import { Form } from "@/form/Form";
4-
import EmbedFormModal from "@/form/components/fields/editor/extensions/embed/EmbedFormModal.vue";
54
import { EmbedData, FormEditorFieldData } from "@/types";
65
import { useParentEditor } from "@/form/components/fields/editor/useParentEditor";
76
import { Editor } from "@tiptap/vue-3";
87
import { useParentForm } from "@/form/useParentForm";
8+
import { __ } from "@/utils/i18n";
9+
import {
10+
Dialog,
11+
DialogClose,
12+
DialogFooter,
13+
DialogHeader,
14+
DialogScrollContent,
15+
DialogTitle
16+
} from "@/components/ui/dialog";
17+
import { Button } from "@/components/ui/button";
18+
import type FormComponent from "@/form/components/Form.vue";
919
1020
const props = defineProps<{
1121
field: FormEditorFieldData,
1222
editor: Editor
1323
}>();
1424
const parentForm = useParentForm();
15-
const currentModalEmbed = ref<{ id?: string, embed: EmbedData, form: Form } | null>(null);
1625
const embedManager = useParentEditor().embedManager;
26+
const modalEmbed = ref<{ id?: string, embed: EmbedData, form: Form, loading?: boolean } | null>(null);
27+
const modalForm = useTemplateRef<InstanceType<typeof FormComponent>>('modalForm');
28+
const modalOpen = ref(false);
1729
1830
async function postForm(data: EmbedData['value']) {
31+
modalEmbed.value.loading = true;
1932
const { id } = await embedManager.postForm(
20-
currentModalEmbed.value.id,
21-
currentModalEmbed.value.embed,
33+
modalEmbed.value.id,
34+
modalEmbed.value.embed,
2235
data
23-
);
36+
)
37+
.finally(() => {
38+
modalEmbed.value.loading = false;
39+
});
2440
25-
if(currentModalEmbed.value.id == null) {
26-
props.editor.commands.insertEmbed({ id, embed: currentModalEmbed.value.embed });
27-
}
41+
modalOpen.value = false;
42+
setTimeout(() => modalEmbed.value = null, 200);
2843
29-
currentModalEmbed.value = null;
44+
if(modalEmbed.value.id == null) {
45+
props.editor.commands.insertEmbed({ id, embed: modalEmbed.value.embed });
46+
}
3047
}
3148
3249
async function open({ id, embed }: { id?: string, embed:EmbedData }) {
3350
const embedForm = await embedManager.postResolveForm(id, embed);
34-
currentModalEmbed.value = {
51+
modalEmbed.value = {
3552
id,
3653
embed,
3754
form: new Form(embedForm, parentForm.entityKey, parentForm.instanceId),
3855
}
56+
modalOpen.value = true;
3957
}
4058
4159
defineExpose({
@@ -44,14 +62,41 @@
4462
</script>
4563

4664
<template>
47-
<EmbedFormModal
48-
:visible="!!currentModalEmbed"
49-
:form="currentModalEmbed?.form"
50-
:post="postForm"
51-
@cancel="currentModalEmbed = null"
65+
<Dialog
66+
v-model:open="modalOpen"
67+
@update:open="!$event && window.setTimeout(() => modalEmbed = null, 200)"
5268
>
53-
<template v-slot:title>
54-
{{ currentModalEmbed?.embed.label }}
55-
</template>
56-
</EmbedFormModal>
69+
<DialogScrollContent class="gap-6" @pointer-down-outside.prevent>
70+
<DialogHeader>
71+
<DialogTitle>
72+
{{ modalEmbed?.embed.label }}
73+
</DialogTitle>
74+
</DialogHeader>
75+
76+
<SharpForm
77+
:entity-key="parentForm.entityKey"
78+
:instance-id="parentForm.instanceId"
79+
:form="modalEmbed?.form"
80+
:post-fn="postForm"
81+
inline
82+
ref="modalForm"
83+
/>
84+
85+
<DialogFooter>
86+
<DialogClose as-child>
87+
<Button variant="outline">
88+
{{ __('sharp::modals.cancel_button') }}
89+
</Button>
90+
</DialogClose>
91+
<Button @click="modalForm!.submit()" :disabled="modalEmbed?.loading">
92+
<template v-if="modalEmbed.id == null">
93+
{{ __('sharp::form.editor.dialogs.embed.submit_button_insert') }}
94+
</template>
95+
<template v-else>
96+
{{ __('sharp::form.editor.dialogs.embed.submit_button_update') }}
97+
</template>
98+
</Button>
99+
</DialogFooter>
100+
</DialogScrollContent>
101+
</Dialog>
57102
</template>

‎resources/js/form/components/fields/editor/extensions/embed/EmbedFormModal.vue‎

Lines changed: 0 additions & 54 deletions
This file was deleted.

‎resources/js/form/components/fields/editor/extensions/embed/EmbedNode.vue‎

Lines changed: 29 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -2,14 +2,17 @@
22
import { __ } from "@/utils/i18n";
33
import { Button } from '@/components/ui/button';
44
import NodeRenderer from "../../NodeRenderer.vue";
5-
import EmbedFormModal from "./EmbedFormModal.vue";
6-
import { Form } from "@/form/Form";
75
import { Embed, EmbedNodeAttributes } from "@/form/components/fields/editor/extensions/embed/Embed";
8-
import { computed, nextTick, onMounted, onUnmounted, ref } from "vue";
9-
import { useParentForm } from "@/form/useParentForm";
6+
import { computed, onMounted, onUnmounted } from "vue";
107
import { ExtensionNodeProps } from "@/form/components/fields/editor/types";
11-
import { EmbedData } from "@/types";
128
import { useParentEditor } from "@/form/components/fields/editor/useParentEditor";
9+
import {
10+
DropdownMenu,
11+
DropdownMenuContent,
12+
DropdownMenuItem,
13+
DropdownMenuTrigger
14+
} from "@/components/ui/dropdown-menu";
15+
import { MoreHorizontal } from "lucide-vue-next";
1316
1417
const props = defineProps<ExtensionNodeProps<typeof Embed, EmbedNodeAttributes>>();
1518
@@ -27,30 +30,27 @@
2730
</script>
2831

2932
<template>
30-
<NodeRenderer class="editor__node embed-node" :node="node">
31-
<div class="card">
32-
<div class="card-body">
33-
<div v-html="embedData._html"></div>
34-
35-
<div class="mt-3">
36-
<div class="row row-cols-auto gx-2">
37-
<template v-if="extension.options.embed.attributes.length">
38-
<div>
39-
<Button variant="outline" size="sm"
40-
@click="embedModal.open({ id: node.attrs['data-key'], embed: extension.options.embed })"
41-
>
42-
{{ __('sharp::form.upload.edit_button') }}
43-
</Button>
44-
</div>
45-
</template>
46-
<div>
47-
<Button variant="destructive" size="sm" @click="deleteNode()">
48-
{{ __('sharp::form.upload.remove_button') }}
49-
</Button>
50-
</div>
51-
</div>
52-
</div>
53-
</div>
33+
<NodeRenderer
34+
class="my-4 first:mt-0 last:mb-0 border rounded-md items-center p-4 flex"
35+
:class="{ '[:focus_&]:border-primary': selected }"
36+
:node="node"
37+
>
38+
<div class="flex-1" v-html="embedData._html">
5439
</div>
40+
<DropdownMenu :modal="false">
41+
<DropdownMenuTrigger as-child>
42+
<Button class="self-center" variant="ghost" size="icon">
43+
<MoreHorizontal class="size-4" />
44+
</Button>
45+
</DropdownMenuTrigger>
46+
<DropdownMenuContent>
47+
<DropdownMenuItem @click="embedModal.open({ id: node.attrs['data-key'], embed: extension.options.embed })">
48+
{{ __('sharp::form.upload.edit_button') }}
49+
</DropdownMenuItem>
50+
<DropdownMenuItem class="text-destructive" @click="deleteNode()">
51+
{{ __('sharp::form.upload.remove_button') }}
52+
</DropdownMenuItem>
53+
</DropdownMenuContent>
54+
</DropdownMenu>
5555
</NodeRenderer>
5656
</template>

‎resources/js/form/components/fields/editor/extensions/upload/EditorUploadModal.vue‎

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,6 @@
88
import { Editor } from "@tiptap/vue-3";
99
import { __ } from "@/utils/i18n";
1010
import { useParentEditor } from "@/form/components/fields/editor/useParentEditor";
11-
import EmbedFormModal from "@/form/components/fields/editor/extensions/embed/EmbedFormModal.vue";
1211
1312
const props = defineProps<{
1413
field: FormEditorFieldData,
@@ -61,19 +60,19 @@
6160
<template>
6261
<input class="hidden" type="file" :accept="props.field.uploads.fields.file.allowedExtensions.join(',')" @change="onInputChange" ref="input">
6362

64-
<EmbedFormModal
65-
:visible="!!currentModalUpload"
66-
:form="currentModalUpload?.form"
67-
:post="postForm"
68-
@cancel="currentModalUpload = null"
69-
>
70-
<template v-slot:title>
71-
<template v-if="currentModalUpload?.id">
72-
{{ __('sharp::form.editor.dialogs.upload.title.new') }}
73-
</template>
74-
<template v-else>
75-
{{ __('sharp::form.editor.dialogs.upload.title.update') }}
76-
</template>
77-
</template>
78-
</EmbedFormModal>
63+
<!-- <EmbedFormModal-->
64+
<!-- :visible="!!currentModalUpload"-->
65+
<!-- :form="currentModalUpload?.form"-->
66+
<!-- :post="postForm"-->
67+
<!-- @cancel="currentModalUpload = null"-->
68+
<!-- >-->
69+
<!-- <template v-slot:title>-->
70+
<!-- <template v-if="currentModalUpload?.id">-->
71+
<!-- {{ __('sharp::form.editor.dialogs.upload.title.new') }}-->
72+
<!-- </template>-->
73+
<!-- <template v-else>-->
74+
<!-- {{ __('sharp::form.editor.dialogs.upload.title.update') }}-->
75+
<!-- </template>-->
76+
<!-- </template>-->
77+
<!-- </EmbedFormModal>-->
7978
</template>

‎resources/js/types/shims.d.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
11
/// <reference types="vite/client" />
22

3-
declare module "*.vue";
3+
// declare module "*.vue";
44
declare module "*.png";

0 commit comments

Comments
 (0)