fix variable editor

This commit is contained in:
Ruben Fiszel
2022-11-03 10:03:00 +01:00
parent 20bc904e5f
commit bec2ddfbce
7 changed files with 73 additions and 72 deletions
+3 -22
View File
@@ -33,7 +33,6 @@
"eslint": "^8.26.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-svelte3": "^4.0.0",
"flowbite": "^1.5.3",
"openapi-typescript-codegen": "^0.23.0",
"path-browserify": "^1.0.1",
"postcss": "^8.4.18",
@@ -397,6 +396,7 @@
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
"integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==",
"dev": true,
"peer": true,
"funding": {
"type": "opencollective",
"url": "https://opencollective.com/popperjs"
@@ -2726,16 +2726,6 @@
"integrity": "sha512-0sQoMh9s0BYsm+12Huy/rkKxVu4R1+r96YX5cG44rHV0pQ6iC3Q+mkoMFaGWObMFYQxCVT+ssG1ksneA2MI9KQ==",
"dev": true
},
"node_modules/flowbite": {
"version": "1.5.3",
"resolved": "https://registry.npmjs.org/flowbite/-/flowbite-1.5.3.tgz",
"integrity": "sha512-e2OHfndxTHtGMqcPqvqwg3gGLg57hmIDVgE/BazMDccgirQ0JEtirKnbZZ4WSOIEhNDgO9pJZuyC8rRlcMm6pQ==",
"dev": true,
"dependencies": {
"@popperjs/core": "^2.9.3",
"mini-svg-data-uri": "^1.4.3"
}
},
"node_modules/fraction.js": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
@@ -6840,7 +6830,8 @@
"version": "2.11.6",
"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
"integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw==",
"dev": true
"dev": true,
"peer": true
},
"@rollup/pluginutils": {
"version": "4.2.1",
@@ -8426,16 +8417,6 @@
"integrity": "sha512-0sQoMh9s0BYsm+12Huy/rkKxVu4R1+r96YX5cG44rHV0pQ6iC3Q+mkoMFaGWObMFYQxCVT+ssG1ksneA2MI9KQ==",
"dev": true
},
"flowbite": {
"version": "1.5.3",
"resolved": "https://registry.npmjs.org/flowbite/-/flowbite-1.5.3.tgz",
"integrity": "sha512-e2OHfndxTHtGMqcPqvqwg3gGLg57hmIDVgE/BazMDccgirQ0JEtirKnbZZ4WSOIEhNDgO9pJZuyC8rRlcMm6pQ==",
"dev": true,
"requires": {
"@popperjs/core": "^2.9.3",
"mini-svg-data-uri": "^1.4.3"
}
},
"fraction.js": {
"version": "4.2.0",
"resolved": "https://registry.npmjs.org/fraction.js/-/fraction.js-4.2.0.tgz",
-1
View File
@@ -29,7 +29,6 @@
"eslint": "^8.26.0",
"eslint-config-prettier": "^8.3.0",
"eslint-plugin-svelte3": "^4.0.0",
"flowbite": "^1.5.3",
"openapi-typescript-codegen": "^0.23.0",
"path-browserify": "^1.0.1",
"postcss": "^8.4.18",
+58 -38
View File
@@ -91,13 +91,6 @@
el?.focus()
}
export async function recomputeSize() {
if (el) {
el.style.height = '30px'
el.style.height = el.scrollHeight + 'px'
}
}
function validateInput(pattern: string | undefined, v: any): void {
if (required && (v == undefined || v == null || v === '')) {
error = 'This field is required'
@@ -273,21 +266,24 @@
/>
</div>
{:else}
<textarea
bind:this={el}
on:focus
{disabled}
style="max-height: {maxHeight}"
on:input={() => {
recomputeSize()
dispatch('input', { rawValue: value, isRaw: false })
}}
class="col-span-10 {valid
? ''
: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}"
placeholder={defaultValue ? JSON.stringify(defaultValue, null, 4) : ''}
bind:value={rawValue}
/>
<div class="container">
<pre aria-hidden="true" style="min-height: 2.2em; max-height: {maxHeight}"
>{rawValue + '\n'}</pre
>
<textarea
on:focus
{disabled}
style="max-height: {maxHeight}"
on:input={() => {
dispatch('input', { rawValue: value, isRaw: false })
}}
class="col-span-10 {valid
? ''
: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}"
placeholder={defaultValue ? JSON.stringify(defaultValue, null, 4) : ''}
bind:value={rawValue}
/>
</div>
{/if}
{:else if inputCat == 'enum'}
<select {disabled} class="px-6" bind:value>
@@ -326,22 +322,25 @@
: undefined}
/>
{:else if inputCat == 'string'}
<textarea
bind:this={el}
on:focus={() => dispatch('focus')}
on:blur={() => dispatch('blur')}
{disabled}
style="height: 30px; max-height: {maxHeight}"
class="col-span-10 {valid
? ''
: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}"
placeholder={defaultValue ?? ''}
bind:value
on:input={() => {
recomputeSize()
dispatch('input', { rawValue: value, isRaw: false })
}}
/>
<div class="container">
<pre aria-hidden="true" style="min-height: 2.2em; max-height: {maxHeight}"
>{value + '\n'}</pre
>
<textarea
on:focus={() => dispatch('focus')}
on:blur={() => dispatch('blur')}
type="text"
{disabled}
class="col-span-10 resize {valid
? ''
: 'border border-red-700 border-opacity-30 focus:border-red-700 focus:border-opacity-30 bg-red-100'}"
placeholder={defaultValue ?? ''}
bind:value
on:input={() => {
dispatch('input', { rawValue: value, isRaw: false })
}}
/>
</div>
{/if}
{#if !required && inputCat != 'resource-object'}
<!-- <Tooltip placement="bottom" content="Reset to default value">
@@ -363,3 +362,24 @@
</div>
</div>
</div>
<style>
.container {
position: relative;
}
pre,
textarea {
font-family: inherit;
padding: 0.5em;
box-sizing: border-box;
line-height: 1.2;
overflow: hidden;
}
textarea {
position: absolute;
width: 100%;
height: 100%;
top: 0;
}
</style>
@@ -12,7 +12,7 @@
<pre aria-hidden="true" style="min-height: {minHeight}; max-height: {maxHeight}">
{value + '\n'}
</pre>
<textarea class="col-span-10 resize" bind:value {placeholder} />
<textarea type="text" class="col-span-10 resize" bind:value {placeholder} />
</div>
<style>
+2
View File
@@ -194,6 +194,7 @@
<label class="block">
<span class="text-gray-700 text-sm">Owner</span>
<input
type="text"
bind:value={meta.owner}
placeholder={$userStore?.username ?? ''}
disabled={!($userStore?.is_admin ?? false)}
@@ -215,6 +216,7 @@
<Required required={true} />
</span>
<input
type="text"
id="path"
autofocus
bind:this={inputP}
@@ -147,7 +147,7 @@
{/if}
</div>
</div>
<!--
{#if variable.is_secret}
<div class="mb-1 col-span-10">
<Password
@@ -157,15 +157,15 @@
<span class="text-sm text-gray-500">(${variable.value.length}/3000 characters)</span>`}
/>
</div>
{:else}
<div>
<div class="mb-1">
<span class="font-semibold text-gray-700">Variable value</span>
<span class="text-sm text-gray-500">({variable.value.length}/3000 characters)</span>
</div>
<AutosizedTextarea bind:value={variable.value} minRows={5} />
{:else} -->
<div>
<div class="mb-1">
<span class="font-semibold text-gray-700">Variable value</span>
<span class="text-sm text-gray-500">({variable.value.length}/3000 characters)</span>
</div>
{/if}
<AutosizedTextarea bind:value={variable.value} minRows={5} />
</div>
<!-- {/if} -->
<div>
<div class="mb-1 font-semibold text-gray-700">
-1
View File
@@ -134,7 +134,6 @@ const config = {
plugins: [
require('@tailwindcss/forms'),
require('@tailwindcss/typography'),
require('flowbite/plugin'),
plugin(({ addBase, addComponents, addUtilities, theme }) => {
addBase({
'html': {