Skip to content

Commit 97bc75f

Browse files
distantnativedistantnative
authored
feat: Models picker dialogs Vue components
1 parent e911e9c commit 97bc75f

File tree

11 files changed

+840
-0
lines changed

11 files changed

+840
-0
lines changed

‎panel/lab/components/dialogs/11_files-picker/index.php

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<?php
2+
3+
use Kirby\Toolkit\A;
4+
use Kirby\Toolkit\Str;
5+
6+
return [
7+
'docs' => 'k-files-picker-dialog',
8+
'items' => A::map(range(0, 5), function ($item) {
9+
return [
10+
'id' => $item,
11+
'text' => 'File ' . $item,
12+
'image' => [
13+
'src' => 'https://picsum.photos/800/600/?v=' . Str::random()
14+
]
15+
];
16+
})
17+
];

‎panel/lab/components/dialogs/11_files-picker/index.vue

Lines changed: 135 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,135 @@
1+
<template>
2+
<k-lab-examples>
3+
<k-lab-example label="Empty">
4+
<k-button
5+
icon="open"
6+
variant="filled"
7+
@click="
8+
$panel.dialog.open({
9+
component: 'k-files-picker-dialog'
10+
})
11+
"
12+
>
13+
Open
14+
</k-button>
15+
</k-lab-example>
16+
<k-lab-example label="Items">
17+
<k-button
18+
icon="open"
19+
variant="filled"
20+
@click="
21+
$panel.dialog.open({
22+
component: 'k-files-picker-dialog',
23+
props: {
24+
items: items,
25+
value: selected
26+
},
27+
on: {
28+
submit: ({ ids }) => {
29+
selected = ids;
30+
$panel.dialog.close();
31+
}
32+
}
33+
})
34+
"
35+
>
36+
Open
37+
</k-button>
38+
<br /><br />
39+
<k-code>Submitted: {{ selected.join(", ") }}</k-code>
40+
</k-lab-example>
41+
<k-lab-example label="Layout: cards">
42+
<k-button
43+
icon="open"
44+
variant="filled"
45+
@click="
46+
$panel.dialog.open({
47+
component: 'k-files-picker-dialog',
48+
props: {
49+
items: items,
50+
layout: 'cards',
51+
value: selected
52+
},
53+
on: {
54+
submit: ({ ids }) => {
55+
selected = ids;
56+
$panel.dialog.close();
57+
}
58+
}
59+
})
60+
"
61+
>
62+
Open
63+
</k-button>
64+
<br /><br />
65+
<k-code>Submitted: {{ selected.join(", ") }}</k-code>
66+
</k-lab-example>
67+
<k-lab-example label="Multiple: false">
68+
<k-button
69+
icon="open"
70+
variant="filled"
71+
@click="
72+
$panel.dialog.open({
73+
component: 'k-files-picker-dialog',
74+
props: {
75+
items: items,
76+
multiple: false,
77+
value: selected
78+
},
79+
on: {
80+
submit: ({ ids }) => {
81+
selected = ids;
82+
$panel.dialog.close();
83+
}
84+
}
85+
})
86+
"
87+
>
88+
Open
89+
</k-button>
90+
<br /><br />
91+
<k-code>Submitted: {{ selected.join(", ") }}</k-code>
92+
</k-lab-example>
93+
<k-lab-example label="Size: huge">
94+
<k-button
95+
icon="open"
96+
variant="filled"
97+
@click="
98+
$panel.dialog.open({
99+
component: 'k-files-picker-dialog',
100+
props: {
101+
items: items,
102+
size: 'huge',
103+
value: selected
104+
},
105+
on: {
106+
submit: ({ ids }) => {
107+
selected = ids;
108+
$panel.dialog.close();
109+
}
110+
}
111+
})
112+
"
113+
>
114+
Open
115+
</k-button>
116+
<br /><br />
117+
<k-code>Submitted: {{ selected.join(", ") }}</k-code>
118+
</k-lab-example>
119+
</k-lab-examples>
120+
</template>
121+
122+
<script>
123+
export default {
124+
props: {
125+
items: {
126+
type: Array
127+
}
128+
},
129+
data() {
130+
return {
131+
selected: []
132+
};
133+
}
134+
};
135+
</script>

‎panel/lab/components/dialogs/12_pages-picker/index.php

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<?php
2+
3+
use Kirby\Toolkit\A;
4+
use Kirby\Toolkit\Str;
5+
6+
return [
7+
'docs' => 'k-pages-picker-dialog',
8+
'items' => A::map(range(0, 5), function ($item) {
9+
return [
10+
'id' => $item,
11+
'text' => 'Page ' . $item,
12+
'image' => [
13+
'src' => 'https://picsum.photos/800/600/?v=' . Str::random()
14+
],
15+
'hasChildren' => rand(0, 1) === 0
16+
];
17+
})
18+
];

‎panel/lab/components/dialogs/12_pages-picker/index.vue

Lines changed: 166 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,166 @@
1+
<template>
2+
<k-lab-examples>
3+
<k-lab-example label="Empty">
4+
<k-button
5+
icon="open"
6+
variant="filled"
7+
@click="
8+
$panel.dialog.open({
9+
component: 'k-pages-picker-dialog'
10+
})
11+
"
12+
>
13+
Open
14+
</k-button>
15+
</k-lab-example>
16+
<k-lab-example label="Items">
17+
<k-button
18+
icon="open"
19+
variant="filled"
20+
@click="
21+
$panel.dialog.open({
22+
component: 'k-pages-picker-dialog',
23+
props: {
24+
items: items,
25+
value: selected
26+
},
27+
on: {
28+
submit: ({ ids }) => {
29+
selected = ids;
30+
$panel.dialog.close();
31+
}
32+
}
33+
})
34+
"
35+
>
36+
Open
37+
</k-button>
38+
<br /><br />
39+
<k-code>Submitted: {{ selected.join(", ") }}</k-code>
40+
</k-lab-example>
41+
42+
<k-lab-example label="With parent">
43+
<k-button
44+
icon="open"
45+
variant="filled"
46+
@click="
47+
$panel.dialog.open({
48+
component: 'k-pages-picker-dialog',
49+
props: {
50+
items: items,
51+
parent: {
52+
id: 'test/a',
53+
title: 'Parent',
54+
parent: 'test'
55+
},
56+
value: selected
57+
},
58+
on: {
59+
submit: ({ ids }) => {
60+
selected = ids;
61+
$panel.dialog.close();
62+
}
63+
}
64+
})
65+
"
66+
>
67+
Open
68+
</k-button>
69+
<br /><br />
70+
<k-code>Submitted: {{ selected.join(", ") }}</k-code>
71+
</k-lab-example>
72+
<k-lab-example label="Layout: cards">
73+
<k-button
74+
icon="open"
75+
variant="filled"
76+
@click="
77+
$panel.dialog.open({
78+
component: 'k-pages-picker-dialog',
79+
props: {
80+
items: items,
81+
layout: 'cards',
82+
value: selected
83+
},
84+
on: {
85+
submit: ({ ids }) => {
86+
selected = ids;
87+
$panel.dialog.close();
88+
}
89+
}
90+
})
91+
"
92+
>
93+
Open
94+
</k-button>
95+
<br /><br />
96+
<k-code>Submitted: {{ selected.join(", ") }}</k-code>
97+
</k-lab-example>
98+
<k-lab-example label="Multiple: false">
99+
<k-button
100+
icon="open"
101+
variant="filled"
102+
@click="
103+
$panel.dialog.open({
104+
component: 'k-pages-picker-dialog',
105+
props: {
106+
items: items,
107+
multiple: false,
108+
value: selected
109+
},
110+
on: {
111+
submit: ({ ids }) => {
112+
selected = ids;
113+
$panel.dialog.close();
114+
}
115+
}
116+
})
117+
"
118+
>
119+
Open
120+
</k-button>
121+
<br /><br />
122+
<k-code>Submitted: {{ selected.join(", ") }}</k-code>
123+
</k-lab-example>
124+
<k-lab-example label="Size: huge">
125+
<k-button
126+
icon="open"
127+
variant="filled"
128+
@click="
129+
$panel.dialog.open({
130+
component: 'k-pages-picker-dialog',
131+
props: {
132+
items: items,
133+
size: 'huge',
134+
value: selected
135+
},
136+
on: {
137+
submit: ({ ids }) => {
138+
selected = ids;
139+
$panel.dialog.close();
140+
}
141+
}
142+
})
143+
"
144+
>
145+
Open
146+
</k-button>
147+
<br /><br />
148+
<k-code>Submitted: {{ selected.join(", ") }}</k-code>
149+
</k-lab-example>
150+
</k-lab-examples>
151+
</template>
152+
153+
<script>
154+
export default {
155+
props: {
156+
items: {
157+
type: Array
158+
}
159+
},
160+
data() {
161+
return {
162+
selected: []
163+
};
164+
}
165+
};
166+
</script>

‎panel/lab/components/dialogs/12_users-picker/index.php

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
<?php
2+
3+
use Kirby\Toolkit\A;
4+
use Kirby\Toolkit\Str;
5+
6+
return [
7+
'docs' => 'k-users-picker-dialog',
8+
'items' => A::map(range(0, 5), function ($item) {
9+
return [
10+
'id' => $item,
11+
'text' => 'User ' . $item,
12+
'image' => [
13+
'src' => 'https://picsum.photos/800/600/?v=' . Str::random()
14+
]
15+
];
16+
})
17+
];

0 commit comments

Comments
 (0)