3961077b90
Add `monospace` prop to Textarea component so font-mono is no longer applied by default. Apply it explicitly to env variable editors, private key fields, and shared variable forms where monospace is appropriate. Use Alpine.js x-data/x-model to make the multiline toggle reactive without a full Livewire round-trip. Add wire:key on the input/textarea wrappers to force proper DOM replacement when switching modes.
47 lines
2.5 KiB
PHP
47 lines
2.5 KiB
PHP
<form class="flex flex-col w-full gap-2 rounded-sm" wire:submit='submit'
|
|
x-data="{ isMultiline: $wire.entangle('is_multiline') }">
|
|
<x-forms.input placeholder="NODE_ENV" id="key" label="Name" required />
|
|
<template x-if="isMultiline">
|
|
<div wire:key="env-value-textarea">
|
|
<x-forms.textarea id="value" label="Value" required class="font-sans" spellcheck />
|
|
</div>
|
|
</template>
|
|
<template x-if="!isMultiline">
|
|
<div wire:key="env-value-input">
|
|
<x-forms.env-var-input placeholder="production" id="value" label="Value" required
|
|
:availableVars="$shared ? [] : $this->availableSharedVariables"
|
|
:projectUuid="data_get($parameters, 'project_uuid')"
|
|
:environmentUuid="data_get($parameters, 'environment_uuid')"
|
|
:serverUuid="data_get($parameters, 'server_uuid')" />
|
|
</div>
|
|
</template>
|
|
|
|
@if (!$shared)
|
|
<div x-cloak x-show="!isMultiline" wire:key="env-value-tip" class="text-xs text-neutral-500 dark:text-neutral-400 -mt-1">
|
|
Tip: Type <span class="font-mono dark:text-warning text-coollabs">{{</span> to reference a shared environment
|
|
variable
|
|
</div>
|
|
@endif
|
|
|
|
<x-forms.input id="comment" label="Comment"
|
|
helper="Add a note to document what this environment variable is used for." maxlength="256" />
|
|
|
|
@if (!$shared)
|
|
<x-forms.checkbox id="is_buildtime"
|
|
helper="Make this variable available during Docker build process. Useful for build secrets and dependencies."
|
|
label="Available at Buildtime" />
|
|
|
|
<x-environment-variable-warning :problematic-variables="$problematicVariables" />
|
|
|
|
<x-forms.checkbox id="is_runtime" helper="Make this variable available in the running container at runtime."
|
|
label="Available at Runtime" />
|
|
<x-forms.checkbox id="is_literal"
|
|
helper="This means that when you use $VARIABLES in a value, it should be interpreted as the actual characters '$VARIABLES' and not as the value of a variable named VARIABLE.<br><br>Useful if you have $ sign in your value and there are some characters after it, but you would not like to interpolate it from another value. In this case, you should set this to true."
|
|
label="Is Literal?" />
|
|
@endif
|
|
|
|
<x-forms.checkbox id="is_multiline" x-model="isMultiline" label="Is Multiline?" />
|
|
<x-forms.button type="submit" @click="slideOverOpen=false">
|
|
Save
|
|
</x-forms.button>
|
|
</form>
|