Skip to content

Commit d8c6fef

Browse files
distantnativedistantnative
committed
feat: Models picker dialogs Vue components
1 parent 5cd3993 commit d8c6fef

File tree

11 files changed

+823
-0
lines changed

11 files changed

+823
-0
lines changed

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
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+
'text' => 'File ' . $item,
11+
'image' => [
12+
'src' => 'https://picsum.photos/800/600/?v=' . Str::random()
13+
]
14+
];
15+
})
16+
];

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

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

‎panel/lab/components/dialogs/12_pages-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-pages-picker-dialog',
8+
'items' => A::map(range(0, 5), function ($item) {
9+
return [
10+
'text' => 'Page ' . $item,
11+
'image' => [
12+
'src' => 'https://picsum.photos/800/600/?v=' . Str::random()
13+
],
14+
'hasChildren' => rand(0, 1) === 0
15+
];
16+
})
17+
];

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

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

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

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
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+
'text' => 'User ' . $item,
11+
'image' => [
12+
'src' => 'https://picsum.photos/800/600/?v=' . Str::random()
13+
]
14+
];
15+
})
16+
];

0 commit comments

Comments
 (0)