Skip to content

Commit a356ca0

Browse files
bastianallgeierbastianallgeier
committed
feat: Render model views with the model form
1 parent 7cc90b5 commit a356ca0

8 files changed

Lines changed: 109 additions & 79 deletions

File tree

‎panel/src/components/Sections/FieldsSection.vue‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,10 @@
2626
import SectionMixin from "@/mixins/section.js";
2727
2828
/**
29+
* A `fields` section is unwrapped into its fields on the
30+
* blueprint level and never reaches the Panel anymore.
31+
*
32+
* @deprecated 6.0.0
2933
* @copyright Bastian Allgeier
3034
* @license https://getkirby.com/license
3135
*/

‎panel/src/components/Sections/Sections.vue‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -51,6 +51,10 @@
5151

5252
<script>
5353
/**
54+
* Sections are converted to fields on the blueprint level.
55+
* Model views render `k-model-form` instead.
56+
*
57+
* @deprecated 6.0.0
5458
* @copyright Bastian Allgeier
5559
* @license https://getkirby.com/license
5660
*/

‎panel/src/components/Views/Files/FileView.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -43,17 +43,17 @@
4343

4444
<k-model-tabs :diff="diff" :tab="tab.name" :tabs="tabs" />
4545

46-
<k-sections
47-
:blueprint="blueprint"
46+
<k-model-form
47+
:api="api"
48+
:columns="tab.columns"
4849
:content="content"
50+
:diff="diff"
4951
:empty="
5052
$panel.config.debug
5153
? $panel.html($t('file.blueprint', { blueprint: $esc(blueprint) }))
5254
: null
5355
"
5456
:lock="lock"
55-
:parent="api"
56-
:tab="tab"
5757
@input="onInput"
5858
@submit="onSubmit"
5959
/>

‎panel/src/components/Views/Pages/PageView.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -36,17 +36,17 @@
3636

3737
<k-model-tabs :diff="diff" :tab="tab.name" :tabs="tabs" />
3838

39-
<k-sections
40-
:blueprint="blueprint"
39+
<k-model-form
40+
:api="api"
41+
:columns="tab.columns"
4142
:content="content"
43+
:diff="diff"
4244
:empty="
4345
$panel.config.debug
4446
? $panel.html($t('page.blueprint', { blueprint: $esc(blueprint) }))
4547
: null
4648
"
4749
:lock="lock"
48-
:parent="api"
49-
:tab="tab"
5050
@input="onInput"
5151
@submit="onSubmit"
5252
/>

‎panel/src/components/Views/Pages/SiteView.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,13 +40,13 @@
4040

4141
<k-model-tabs :diff="diff" :tab="tab.name" :tabs="tabs" />
4242

43-
<k-sections
44-
:blueprint="blueprint"
43+
<k-model-form
44+
:api="api"
45+
:columns="tab.columns"
4546
:content="content"
47+
:diff="diff"
4648
:empty="$panel.config.debug ? $panel.html($t('site.blueprint')) : null"
4749
:lock="lock"
48-
:tab="tab"
49-
parent="site"
5050
@input="onInput"
5151
@submit="onSubmit"
5252
/>

‎panel/src/components/Views/Preview/PreviewForm.test.ts‎

Lines changed: 81 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,9 @@ function factory() {
1414
api: "pages/test",
1515
blueprint: "default",
1616
content: {},
17-
tab: { name: "main" },
18-
tabs: [{ name: "main" }]
17+
diff: {},
18+
tab: { name: "main", columns: {} },
19+
tabs: [{ name: "main" }, { name: "meta" }]
1920
},
2021
shallow: true,
2122
global: {
@@ -63,83 +64,104 @@ describe("PreviewForm.vue", () => {
6364
original.mockClear();
6465
});
6566

66-
it("listens to loaded fields and sections while mounted", () => {
67-
const wrapper = factory();
67+
describe("events", () => {
68+
it("listens to loaded fields and sections while mounted", () => {
69+
const wrapper = factory();
70+
71+
expect(events.on).toHaveBeenCalledWith(
72+
"field.loaded",
73+
wrapper.vm.fixLinks
74+
);
75+
expect(events.on).toHaveBeenCalledWith(
76+
"section.loaded",
77+
wrapper.vm.fixLinks
78+
);
79+
80+
const fixLinks = wrapper.vm.fixLinks;
81+
wrapper.unmount();
82+
83+
expect(events.off).toHaveBeenCalledWith("field.loaded", fixLinks);
84+
expect(events.off).toHaveBeenCalledWith("section.loaded", fixLinks);
85+
});
86+
});
6887

69-
expect(events.on).toHaveBeenCalledWith("field.loaded", wrapper.vm.fixLinks);
70-
expect(events.on).toHaveBeenCalledWith(
71-
"section.loaded",
72-
wrapper.vm.fixLinks
73-
);
88+
describe("form", () => {
89+
it("passes on the events of the form and its controls", async () => {
90+
const wrapper = factory();
7491

75-
const fixLinks = wrapper.vm.fixLinks;
76-
wrapper.unmount();
92+
await wrapper.find("k-model-form").trigger("input");
93+
await wrapper.find("k-model-form").trigger("submit");
94+
await wrapper.find("k-form-controls").trigger("discard");
7795

78-
expect(events.off).toHaveBeenCalledWith("field.loaded", fixLinks);
79-
expect(events.off).toHaveBeenCalledWith("section.loaded", fixLinks);
96+
expect(wrapper.emitted("input")).toHaveLength(1);
97+
expect(wrapper.emitted("submit")).toHaveLength(1);
98+
expect(wrapper.emitted("discard")).toHaveLength(1);
99+
});
80100
});
81101

82-
it("redirects page links to the preview form", () => {
83-
const wrapper = factory();
84-
const { $el, links } = loaded("/pages/test+child");
102+
describe("fixLinks", () => {
103+
it("redirects page links to the preview form", () => {
104+
const wrapper = factory();
105+
const { $el, links } = loaded("/pages/test+child");
85106

86-
wrapper.vm.fixLinks({ $el });
107+
wrapper.vm.fixLinks({ $el });
87108

88-
const event = { preventDefault: vi.fn() };
89-
links[0].__vue__.onClick(event as unknown as Event);
109+
const event = { preventDefault: vi.fn() };
110+
links[0].__vue__.onClick(event as unknown as Event);
90111

91-
expect(event.preventDefault).toHaveBeenCalled();
92-
expect(original).not.toHaveBeenCalled();
93-
expect(wrapper.emitted("navigate")).toStrictEqual([
94-
["/pages/test+child/preview/form"]
95-
]);
96-
});
112+
expect(event.preventDefault).toHaveBeenCalled();
113+
expect(original).not.toHaveBeenCalled();
114+
expect(wrapper.emitted("navigate")).toStrictEqual([
115+
["/pages/test+child/preview/form"]
116+
]);
117+
});
97118

98-
it("redirects all page links of the element", () => {
99-
const wrapper = factory();
100-
const { $el, links } = loaded("/pages/a", "/pages/b");
119+
it("redirects all page links of the element", () => {
120+
const wrapper = factory();
121+
const { $el, links } = loaded("/pages/a", "/pages/b");
101122

102-
wrapper.vm.fixLinks({ $el });
123+
wrapper.vm.fixLinks({ $el });
103124

104-
for (const link of links) {
105-
link.__vue__.onClick({ preventDefault: vi.fn() } as unknown as Event);
106-
}
125+
for (const link of links) {
126+
link.__vue__.onClick({ preventDefault: vi.fn() } as unknown as Event);
127+
}
107128

108-
expect(wrapper.emitted("navigate")).toStrictEqual([
109-
["/pages/a/preview/form"],
110-
["/pages/b/preview/form"]
111-
]);
112-
});
129+
expect(wrapper.emitted("navigate")).toStrictEqual([
130+
["/pages/a/preview/form"],
131+
["/pages/b/preview/form"]
132+
]);
133+
});
113134

114-
it("keeps links that don't point to a page view", () => {
115-
const wrapper = factory();
116-
const { $el, links } = loaded(
117-
"/pages/test+child/files/test.jpg",
118-
"/users/test",
119-
undefined
120-
);
135+
it("keeps links that don't point to a page view", () => {
136+
const wrapper = factory();
137+
const { $el, links } = loaded(
138+
"/pages/test+child/files/test.jpg",
139+
"/users/test",
140+
undefined
141+
);
121142

122-
wrapper.vm.fixLinks({ $el });
143+
wrapper.vm.fixLinks({ $el });
123144

124-
for (const link of links) {
125-
expect(link.__vue__.onClick).toBe(original);
145+
for (const link of links) {
146+
expect(link.__vue__.onClick).toBe(original);
126147

127-
link.__vue__.onClick({ preventDefault: vi.fn() } as unknown as Event);
128-
}
148+
link.__vue__.onClick({ preventDefault: vi.fn() } as unknown as Event);
149+
}
129150

130-
expect(original).toHaveBeenCalledTimes(3);
131-
expect(wrapper.emitted("navigate")).toBeUndefined();
132-
});
151+
expect(original).toHaveBeenCalledTimes(3);
152+
expect(wrapper.emitted("navigate")).toBeUndefined();
153+
});
133154

134-
it("ignores links outside of item titles", () => {
135-
const wrapper = factory();
136-
const { $el, links } = loaded("/pages/test+child");
155+
it("ignores links outside of item titles", () => {
156+
const wrapper = factory();
157+
const { $el, links } = loaded("/pages/test+child");
137158

138-
// move the link out of the item title
139-
$el.append(links[0]);
159+
// move the link out of the item title
160+
$el.append(links[0]);
140161

141-
wrapper.vm.fixLinks({ $el });
162+
wrapper.vm.fixLinks({ $el });
142163

143-
expect(links[0].__vue__.onClick).toBe(original);
164+
expect(links[0].__vue__.onClick).toBe(original);
165+
});
144166
});
145167
});

‎panel/src/components/Views/Preview/PreviewForm.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -21,17 +21,17 @@
2121
</header>
2222

2323
<div class="k-preview-form-body">
24-
<k-sections
25-
:blueprint="blueprint"
24+
<k-model-form
25+
:api="api"
26+
:columns="tab.columns"
2627
:content="content"
28+
:diff="diff"
2729
:empty="
2830
$panel.config.debug
2931
? $panel.html($t('page.blueprint', { blueprint: $esc(blueprint) }))
3032
: null
3133
"
3234
:lock="lock"
33-
:parent="api"
34-
:tab="tab"
3535
@input="$emit('input', $event)"
3636
@submit="$emit('submit', $event)"
3737
/>

‎panel/src/components/Views/Users/UserView.vue‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -61,17 +61,17 @@
6161

6262
<k-model-tabs :diff="diff" :tab="tab.name" :tabs="tabs" />
6363

64-
<k-sections
65-
:blueprint="blueprint"
64+
<k-model-form
65+
:api="api"
66+
:columns="tab.columns"
6667
:content="content"
68+
:diff="diff"
6769
:empty="
6870
$panel.config.debug
6971
? $panel.html($t('user.blueprint', { blueprint: $esc(blueprint) }))
7072
: null
7173
"
7274
:lock="lock"
73-
:parent="api"
74-
:tab="tab"
7575
@input="onInput"
7676
@submit="onSubmit"
7777
/>

0 commit comments

Comments
 (0)