meguri/static/binding-popover.html

<template x-if="bindingEditor"><section class="binding-editor binding-popover" popover="manual" role="region" :aria-label="t('value_binding_1bb7eb')" @click.outside="if(bindingEditor && !$event.target.closest('.binding-popup-trigger,.binding-tweak,.binding-button,select'))closeRuleEditor(false)" @resize.window="positionBindingPopover()" @keydown.escape.stop.prevent="closeRuleEditor()" @keydown.enter.stop="if($event.target.tagName!=='TEXTAREA'){$event.preventDefault();closeRuleEditor()}" x-effect="if(modal!=='generation-rule')closeRuleEditor(false);else if(bindingEditor){JSON.stringify(bindingEditor.binding);$nextTick(()=>positionBindingPopover())}" @scroll.window.capture="positionBindingPopover()">
<div class="section-line"><h3 x-text="bindingEditor.label"></h3><button type="button" @click="closeRuleEditor()"><span x-text="t('done_e9b450')"></span></button></div>
<code class="template-token binding-template" x-show="bindingEditor.binding?.kind!=='literal' && bindingEditor.binding?.kind!=='output'" x-text="bindingSummary(bindingEditor.binding)"></code>
<template x-for="row in bindingRows()" :key="row.depth"><div class="binding-source" :class="{'binding-key':row.depth}">
<template x-if="row.parent"><div class="section-line"><button type="button" :disabled="row.index===0" :aria-label="t('move_block_up_b67b5b')" @click="const items=row.parent.items;[items[row.index-1],items[row.index]]=[items[row.index],items[row.index-1]]" x-text="t('symbol_9555ff')"></button><button type="button" class="text danger" @click="row.parent.items.splice(row.index,1)" x-text="t('remove_e96390')"></button></div></template>
<label><span x-text="row.label"></span><select :aria-label="t('value_source_c0ae15')" :value="row.binding.kind" @change="changeBindingKind(row.binding,$event.target.value)"><option value="list" x-show="row.binding.kind==='list'" x-text="t('responsible_people_in_priority_order_7205a5')"></option><option value="literal" x-text="t('fixed_value_191429')"></option><option value="variable" x-text="t('workspace_variable_7abc57')"></option><option value="item" x-text="t('current_iteration_value_39357a')"></option><option value="key" x-text="t('current_iteration_key_347e79')"></option><option value="lookup" x-text="t('dictionary_lookup_f38672')"></option><option value="output" x-text="t('created_resource_c04e1e')"></option></select></label>
<template x-if="row.binding.kind==='list'"><button type="button" @click="row.binding.items.push(literal(''))" x-text="t('add_person_c126e2')"></button></template>
<template x-if="row.binding.kind==='literal'"><div>
<template x-if="row.type==='list' || row.type==='collection'"><label><span x-text="t('values_one_per_line_b8e245')"></span><textarea :aria-label="t('fixed_list_a199a2')" :value="Array.isArray(row.binding.value)?row.binding.value.join('\n'):''" @input="row.binding.value=$event.target.value.split(/[\n,;]+/).map(s=>s.trim()).filter(Boolean)" :placeholder="t('alice_example_com_bob_example_com_f2697e')"></textarea></label></template>
<template x-if="row.type==='text'"><label><span x-text="t('fixed_text_ab18dc')"></span><input :aria-label="t('fixed_text_ab18dc')" x-model="row.binding.value"></label></template>
<template x-if="row.type==='number'"><label><span x-text="t('fixed_number_017ee6')"></span><input :aria-label="t('fixed_number_017ee6')" type="number" :value="row.binding.value" @input="row.binding.value=$event.target.value===''?null:Number($event.target.value)"></label></template>
<template x-if="row.type==='boolean'"><label><span x-text="t('fixed_boolean_38876f')"></span><select :aria-label="t('fixed_boolean_38876f')" :value="String(row.binding.value)" @change="row.binding.value=$event.target.value==='true'"><option value="true" x-text="t('true_88b33e')"></option><option value="false" x-text="t('false_97cdbd')"></option></select></label></template>
<template x-if="row.type==='time'"><label><span x-text="t('fixed_time_40176a')"></span><input :aria-label="t('fixed_time_40176a')" type="time" x-model="row.binding.value"></label></template>
<template x-if="row.type==='date'"><label><span x-text="t('fixed_date_1c63b4')"></span><span class="date-field" x-data="dateField" x-modelable="value" x-model="row.binding.value"><input type="text" :aria-label="t('fixed_date_1c63b4')" x-ref="textDate" :value="text" @input="edit($event.target)" :placeholder="t('dd_mm_yyyy_d7e5fe')" maxlength="10"><button type="button" :aria-label="t('open_calendar_41547e')" @click="$refs.calendar.showPicker()"><span x-text="t('symbol_21887f')"></span></button><input class="native-date" type="date" x-ref="calendar" x-model="value" @input="picked()" tabindex="-1" aria-hidden="true"></span></label></template>
<template x-if="row.type==='person'"><div><label><span x-text="t('workspace_person_844f8f')"></span><select :aria-label="t('workspace_person_844f8f')" :value="people.some(p=>p.id===row.binding.value)?row.binding.value:''" @change="row.binding.value=$event.target.value"><option value="" x-text="t('use_email_address_c12ddf')"></option><template x-for="p in people" :key="p.id"><option :value="p.id" :selected="row.binding.value===p.id" x-text="p.display_name"></option></template></select></label><label x-show="!people.some(p=>p.id===row.binding.value)"><span x-text="t('email_84add5')"></span><input :aria-label="t('fixed_email_189696')" :type="people.some(p=>p.id===row.binding.value)?'text':'email'" x-model="row.binding.value" :placeholder="t('person_example_com_371ab9')"></label></div></template>
<p class="validation-warning" x-show="['schedule','policy'].includes(row.type) && row.binding.kind==='literal' && generated(row.binding.value)" x-text="t('generated_direct_reference_hint')"></p>
<template x-if="row.type==='schedule' || row.type==='policy'"><label><span x-text="t('existing_resource_1752f5')"></span><select :aria-label="t('existing_resource_1752f5')" x-model="row.binding.value"><option value="" x-text="t('choose_a_resource_3e0493')"></option><template x-for="resource in manualResources(row.type)" :key="resource.id"><option :value="resource.id" :selected="row.binding.value===resource.id" x-text="resource.name"></option></template></select></label></template>
</div></template>
<label x-show="['variable','lookup'].includes(row.binding.kind)"><span x-text="t('variable_19de69')"></span><select :aria-label="t('binding_variable_137329')" x-model="row.binding.variable"><option value="" x-text="t('choose_a_variable_e27462')"></option><template x-for="v in generationDraft.variables" :key="v.id"><option :value="v.id" :selected="row.binding.variable===v.id" x-text="bindingSummary({kind:'variable',variable:v.id})+' · '+label(v.node.kind)"></option></template></select></label>
<label x-show="['item','key'].includes(row.binding.kind)"><span x-text="t('iteration_18905a')"></span><select :aria-label="t('binding_iteration_f1778d')" x-model="row.binding.iteration"><option value="" x-text="t('choose_an_iteration_5d2162')"></option><template x-for="i in form.iterations" :key="i.id"><option :value="i.id" :selected="row.binding.iteration===i.id" x-text="bindingSummary({kind:row.binding.kind==='key'?'key':'item',iteration:i.id})"></option></template></select></label>
<p class="info-note" x-show="row.binding.kind==='output'" x-text="t('generated_reference_hint')"></p>
<label x-show="row.binding.kind==='output'"><span x-text="t('output_block_3853ab')"></span><select :aria-label="t('binding_output_block_e2b0ab')" x-model="row.binding.output"><option value="" x-text="t('choose_an_output_747632')"></option><template x-for="b in matchingOutputs(row.type)" :key="b.id"><option :value="b.id" :selected="row.binding.output===b.id" x-text="generatedResourceLabel(b)+' · '+bindingSummary(b.fields.name)"></option></template></select></label>
<label x-show="!['literal','output','key'].includes(row.binding.kind)"><span x-text="t('nested_field_list_position_optional_bac49a')"></span><input x-data="{pathText:(row.binding.path||[]).join(' / '),pathBinding:row.binding,pathKind:row.binding.kind}" x-effect="if(pathBinding!==row.binding || pathKind!==row.binding.kind){pathBinding=row.binding;pathKind=row.binding.kind;pathText=(row.binding.path||[]).join(' / ')}" :aria-label="t('nested_field_or_position_eaeb07')" :value="pathText" @input="pathText=$event.target.value;row.binding.path=pathText.split('/').map(s=>s.trim()).filter(Boolean)" :placeholder="t('primary_1_4b34b8')"><small><span x-text="t('leave_empty_to_use_the_whole_value_list_positions_st_8da342')"></span></small></label>
<div class="two-columns" x-show="row.type==='text'"><label><span x-text="t('prefix_90eceb')"></span><input :aria-label="t('text_prefix_62b30b')" x-model="row.binding.prefix" :placeholder="t('optional_0c6c41')"></label><label><span x-text="t('suffix_885db9')"></span><input :aria-label="t('text_suffix_f191fa')" x-model="row.binding.suffix" :placeholder="t('optional_0c6c41')"></label></div>
</div></template>
<div class="binding-value-preview" x-data="{sample:{text:'',context:'',error:''}}" x-effect="sample=bindingValuePreview()">
<div class="section-line"><strong x-text="t('binding_preview_title')"></strong><small x-text="sample.context"></small></div>
<textarea readonly spellcheck="false" wrap="off" rows="3" :aria-label="t('binding_preview_title')" :value="sample.text" :placeholder="sample.error"></textarea>
<p class="validation-warning" x-show="sample.error" x-text="sample.error"></p>
</div>
</section></template>