Skip to content

Commit b7d73fe

Browse files
didodadidoda
authored
Merge pull request #1235 from bedita/feat/add-richtext-placeholder-params
Rich text placeholder params
2 parents 7df569c + 46877a1 commit b7d73fe

File tree

3 files changed

+113
-25
lines changed

3 files changed

+113
-25
lines changed

‎config/app_local.example.php

+2
Original file line numberDiff line numberDiff line change
@@ -614,10 +614,12 @@
614614
// 'bearing' => 'integer',
615615
// 'pitch' => 'integer',
616616
// 'zoom' => 'integer',
617+
// 'caption' => 'richtext'
617618
// ],
618619
// 'videos' => [
619620
// 'controls' => 'boolean',
620621
// 'autoplay' => 'boolean',
622+
// 'caption' => 'richtext',
621623
// ],
622624
// ],
623625

‎resources/js/app/components/placeholder-list/placeholder-list.vue

+56-13
Original file line numberDiff line numberDiff line change
@@ -11,19 +11,54 @@
1111
v-for="item in items"
1212
:key="itemKey(item)"
1313
>
14-
<app-icon v-if="item.obj?.type === 'audio'" icon="carbon:document-audio" height="24" />
15-
<app-icon v-if="item.obj?.type === 'documents'" icon="carbon:document" height="24" />
16-
<app-icon v-if="item.obj?.type === 'events'" icon="carbon:event" height="24" />
17-
<app-icon v-if="item.obj?.type === 'files'" icon="carbon:document-blank" height="24" />
18-
<app-icon v-if="item.obj?.type === 'images'" icon="carbon:image" height="24" />
19-
<app-icon v-if="item.obj?.type === 'links'" icon="carbon:link" height="24" />
20-
<app-icon v-if="item.obj?.type === 'locations'" icon="carbon:location" height="24" />
21-
<app-icon v-if="item.obj?.type === 'news'" icon="carbon:calendar" height="24" />
22-
<app-icon v-if="item.obj?.type === 'profiles'" icon="carbon:person" height="24" />
23-
<app-icon v-if="item.obj?.type === 'publications'" icon="carbon:wikis" height="24" />
24-
<app-icon v-if="item.obj?.type === 'videos'" icon="carbon:video" height="24" />
14+
<div class="placeholder-item-name">
15+
<app-icon icon="carbon:document-audio"
16+
height="24"
17+
v-if="item.obj?.type === 'audio'"
18+
/>
19+
<app-icon icon="carbon:document"
20+
height="24"
21+
v-if="item.obj?.type === 'documents'"
22+
/>
23+
<app-icon icon="carbon:event"
24+
height="24"
25+
v-if="item.obj?.type === 'events'"
26+
/>
27+
<app-icon icon="carbon:document-blank"
28+
height="24"
29+
v-if="item.obj?.type === 'files'"
30+
/>
31+
<app-icon icon="carbon:image"
32+
height="24"
33+
v-if="item.obj?.type === 'images'"
34+
/>
35+
<app-icon icon="carbon:link"
36+
height="24"
37+
v-if="item.obj?.type === 'links'"
38+
/>
39+
<app-icon icon="carbon:location"
40+
height="24"
41+
v-if="item.obj?.type === 'locations'"
42+
/>
43+
<app-icon icon="carbon:calendar"
44+
height="24"
45+
v-if="item.obj?.type === 'news'"
46+
/>
47+
<app-icon icon="carbon:person"
48+
height="24"
49+
v-if="item.obj?.type === 'profiles'"
50+
/>
51+
<app-icon icon="carbon:wikis"
52+
height="24"
53+
v-if="item.obj?.type === 'publications'"
54+
/>
55+
<app-icon icon="carbon:video"
56+
height="24"
57+
v-if="item.obj?.type === 'videos'"
58+
/>
2559

26-
<span>{{ item.obj?.title }}</span>
60+
<span>{{ item.obj?.title }}</span>
61+
</div>
2762
<placeholder-params
2863
:id="item.id"
2964
:field="field"
@@ -163,11 +198,19 @@ div.placeholdersList > div.header {
163198
}
164199
div.placeholdersList > div.placeholder-item {
165200
display: grid;
166-
grid-template-columns: 5% 60% 1fr;
201+
grid-template-columns: 35% 60% 1fr;
167202
text-align: left;
168203
align-items: center;
169204
gap: 8px;
205+
padding: 4px 0;
170206
margin: 4px 0;
171207
border-top: dotted 1px #ccc;
172208
}
209+
div.placeholdersList > div.placeholder-item > div.placeholder-item-name {
210+
display: flex;
211+
align-items: start;
212+
align-self: flex-start;
213+
gap: 8px;
214+
margin: 4px 0;
215+
}
173216
</style>

‎resources/js/app/components/placeholder-list/placeholder-params.vue

+55-12
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,51 @@
11
<template>
22
<div class="placeholderParams">
3-
<div v-for="column in Object.keys(parameters)">
4-
<span>{{ t(column) }}</span>
3+
<div v-for="column in Object.keys(parameters)"
4+
:key="column"
5+
>
6+
<span class="paramName">{{ t(column) }}</span>
57
<template v-if="parameters[column] === 'integer'">
6-
<input type="number" :placeholder="column" v-model="decodedValue[column]" @change="changeParams" />
8+
<input type="number"
9+
:placeholder="column"
10+
v-model="decodedValue[column]"
11+
@change="changeParams"
12+
>
713
</template>
814
<template v-if="parameters[column] === 'string'">
9-
<input type="text" :placeholder="column" v-model="decodedValue[column]" @change="changeParams" />
15+
<input type="text"
16+
:placeholder="column"
17+
v-model="decodedValue[column]"
18+
@change="changeParams"
19+
>
1020
</template>
1121
<template v-if="parameters[column] === 'boolean'">
12-
<input type="checkbox" v-model="decodedValue[column]" @click="changeParams" />
22+
<input type="checkbox"
23+
v-model="decodedValue[column]"
24+
@change="changeParams"
25+
>
26+
</template>
27+
<template v-if="parameters[column] === 'richtext'">
28+
<field-textarea
29+
:id="`${column}-${Math.random().toString(36)}`"
30+
:name="column"
31+
:field="column"
32+
:value="decodedValue[column]"
33+
@change="(value) => changeRichText(value, column)"
34+
/>
1335
</template>
1436
<template v-if="typeof parameters[column] === 'object' ">
15-
<select v-model="decodedValue[column]" @change="changeParams">
16-
<option v-for="option in parameters[column]" :value="option">{{ t(option) }}</option>
17-
</select>
37+
<div>
38+
<select v-model="decodedValue[column]"
39+
@change="changeParams"
40+
>
41+
<option v-for="option in parameters[column]"
42+
:key="option"
43+
:value="option"
44+
>
45+
{{ t(option) }}
46+
</option>
47+
</select>
48+
</div>
1849
</template>
1950
</div>
2051
</div>
@@ -82,6 +113,14 @@ export default {
82113
});
83114
this.oldValue = this.newValue;
84115
},
116+
changeParamsBoolean(value, column) {
117+
this.decodedValue[column] = value;
118+
this.changeParams();
119+
},
120+
changeRichText(value, column) {
121+
this.decodedValue[column] = value;
122+
this.changeParams();
123+
},
85124
decoded(item) {
86125
return atob(item);
87126
},
@@ -90,11 +129,15 @@ export default {
90129
</script>
91130
<style>
92131
div.placeholderParams {
93-
display: grid;
94-
grid-template-columns: 1fr 1fr 1fr;
95-
text-align: center;
96-
align-items: center;
132+
display: flex;
133+
flex-direction: column;
97134
gap: 8px;
98135
margin: 4px 0;
99136
}
137+
138+
.paramName {
139+
display: block;
140+
margin-bottom: 4px;
141+
text-transform: capitalize;
142+
}
100143
</style>

0 commit comments

Comments
 (0)