<script setup>
import { computed, onMounted, ref } from "vue";
const props = defineProps(["df"]);
let cronEditor = ref(null);
let cron_control = computed(() => {
    if (!cronEditor.value) return;
    cronEditor.value.innerHTML = "";
    return jingrow.ui.form.make_control({
        parent: cronEditor.value,
        df: { ...props.df, hidden: 0 },
        disabled: true,
        render_input: true,
        only_input: true,
    });
});
onMounted(() => {
    if (cronEditor.value) cron_control.value;
});
</script>
<template>
    <div class="control editable">
        <div class="field-controls">
            <slot name="label" />
            <slot name="actions" />
        </div>
        <div class="cron-editor" ref="cronEditor"></div>
        <div v-if="df.description" class="mt-2 description" v-html="df.description"></div>
    </div>
</template> 