I have the same issue. The field has a value and props are used, but the field works without registering them in index.php
and the guide doesn’t mention that part: My first Panel field | Kirby CMS
Summary: I save the milliseconds since epoch, convert them to ISO and display only the time part (00:00:00). The field has a computed value for that, now I need a corresponding structure preview.
Any feedback on how to improve the plugin (besides structure preview) is very welcome. ![:slight_smile: :slight_smile:](https://emoji.discourse-cdn.com/apple/slight_smile.png?v=12)
index.php
<?php
Kirby::plugin('ca/timer', [
'fields' => [
'timer' => [],
],
]);
index.js
panel.plugin('ca/timer', {
fields: {
timer: {
template: `
<div class="k-ca-timer-field">
<k-field :label="label">
<k-input theme="field" type="text" name="textfield" :value="timeValue" @input="onInput">
</k-field>
<div class="ca-timer" @click="trackTime">
<k-icon type="clock">
</div>
</div>
`,
computed: {
timeValue() {
// Convert milliseconds since epoch to ISO and display the 00:00:00 part only.
return new Date(Math.floor(this.value / 1000) * 1000).toISOString().slice(11, 19);
},
},
props: {
label: String,
value: {
type: Number,
default: 0,
},
},
data() {
return {
interval: 0,
};
},
methods: {
onInput(value) {
this.$emit('input', value);
},
trackTime() {
if (this.interval === 0) {
const start = this.value === 0 ? Date.now() : Date.now() - this.value;
this.interval = setInterval(() => {
this.value = Date.now() - start;
this.$emit('input', this.value);
}, 1000);
} else {
clearInterval(this.interval);
this.interval = 0;
}
},
},
components: {
'k-timer-field-preview': {
props: {
value: String,
column: Object,
field: Object
},
template: '<p>test</p>',
}
},
},
},
});
Edit: Replaced JS-code with final logic.