Skip to content

Commit 80da72f

Browse files
HSGamerHSGamer
committed
Improve the output of the forms in Value Display
1 parent 7eb3020 commit 80da72f

6 files changed

Lines changed: 140 additions & 36 deletions

File tree

‎src/components/forms/HolderForm.vue‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -71,7 +71,9 @@
7171
</template>
7272
</form>
7373

74-
<CodeBlock :code="code" :lang="config.codeLang" />
74+
<slot name="output" :code="code" :values="formState.values">
75+
<CodeBlock v-if="config.generateCode" :code="code" :lang="config.codeLang" />
76+
</slot>
7577
</template>
7678

7779
<script setup lang="ts">
@@ -94,7 +96,7 @@ const props = defineProps<{
9496
const config = props.config;
9597
const form = useForm({ defaultValues: config.defaults });
9698
const formState = useStore(form.store);
97-
const code = computed(() => config.generateCode(formState.value.values));
99+
const code = computed(() => config.generateCode ? config.generateCode(formState.value.values) : '');
98100
</script>
99101

100102
<style scoped>

‎src/components/forms/ValueDisplayDecimalForm.vue‎

Lines changed: 16 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
11
<template>
2-
<HolderForm :config="config" />
2+
<HolderForm :config="config">
3+
<template #output="{ values }">
4+
<ValueDisplayOutput :code="getFormat(values)" />
5+
</template>
6+
</HolderForm>
37
</template>
48

59
<script setup lang="ts">
610
import HolderForm from '~/components/forms/HolderForm.vue';
11+
import ValueDisplayOutput from '~/components/forms/ValueDisplayOutput.vue';
712
import type { FormConfig } from '~/utils/formTypes';
813
914
const config: FormConfig = {
@@ -19,16 +24,15 @@ const config: FormConfig = {
1924
groupingSize: '3',
2025
maximumFractionDigits: '2',
2126
},
22-
codeLang: 'text',
23-
generateCode: (v) => {
24-
const parts = [];
25-
if (v.decimalSeparator) parts.push(`decimalSeparator=${v.decimalSeparator}`);
26-
if (v.groupingSeparator) parts.push(`groupingSeparator=${v.groupingSeparator}`);
27-
if (v.groupingSize) parts.push(`groupingSize=${v.groupingSize}`);
28-
if (v.maximumFractionDigits) parts.push(`maximumFractionDigits=${v.maximumFractionDigits}`);
29-
const cfg = parts.join('&');
30-
const format = `decimal:${cfg}`;
31-
return `{value_${format}}\n<holder>;value;${format}\n<holder>;top_value;<position>;${format}`;
32-
},
27+
};
28+
29+
const getFormat = (v: any) => {
30+
const parts = [];
31+
if (v.decimalSeparator) parts.push(`decimalSeparator=${v.decimalSeparator}`);
32+
if (v.groupingSeparator) parts.push(`groupingSeparator=${v.groupingSeparator}`);
33+
if (v.groupingSize) parts.push(`groupingSize=${v.groupingSize}`);
34+
if (v.maximumFractionDigits) parts.push(`maximumFractionDigits=${v.maximumFractionDigits}`);
35+
const cfg = parts.join('&');
36+
return `decimal:${cfg}`;
3337
};
3438
</script>

‎src/components/forms/ValueDisplayOutput.vue‎

Lines changed: 89 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,89 @@
1+
<template>
2+
<div class="value-display-container">
3+
<div class="value-display-header">
4+
<span class="value-display-title">Generated Queries</span>
5+
</div>
6+
<div class="value-display-content">
7+
<div class="output-item">
8+
<span class="output-label">Format String</span>
9+
<code class="output-code">{{ code }}</code>
10+
</div>
11+
<div class="output-item">
12+
<span class="output-label">In default-line</span>
13+
<code class="output-code">{value_{{ code }}}</code>
14+
</div>
15+
<div class="output-item">
16+
<span class="output-label">In <code class="inline-code">value</code> query</span>
17+
<code class="output-code">&lt;holder&gt;;value;{{ code }}</code>
18+
</div>
19+
<div class="output-item">
20+
<span class="output-label">In <code class="inline-code">top_value</code> query</span>
21+
<code class="output-code">&lt;holder&gt;;top_value;&lt;position&gt;;{{ code }}</code>
22+
</div>
23+
</div>
24+
</div>
25+
</template>
26+
27+
<script setup lang="ts">
28+
defineProps<{
29+
code: string;
30+
}>();
31+
</script>
32+
33+
<style scoped>
34+
.value-display-container {
35+
margin-top: 1.5rem;
36+
border-radius: 0.5rem;
37+
overflow: hidden;
38+
background-color: var(--sl-color-bg);
39+
border: 1px solid var(--sl-color-gray-5);
40+
}
41+
42+
.value-display-header {
43+
background-color: var(--sl-color-gray-6);
44+
padding: 0.5rem 1rem;
45+
border-bottom: 1px solid var(--sl-color-gray-5);
46+
color: var(--sl-color-white);
47+
font-size: 0.875rem;
48+
font-weight: 600;
49+
}
50+
51+
.value-display-content {
52+
padding: 1rem;
53+
display: flex;
54+
flex-direction: column;
55+
gap: 1.25rem;
56+
}
57+
58+
.output-item {
59+
display: flex;
60+
flex-direction: column;
61+
gap: 0.5rem;
62+
}
63+
64+
.output-label {
65+
font-size: 0.875rem;
66+
color: var(--sl-color-gray-3);
67+
font-weight: 500;
68+
}
69+
70+
.output-code {
71+
display: block;
72+
padding: 0.75rem 1rem;
73+
background-color: var(--sl-color-black);
74+
border: 1px solid var(--sl-color-gray-5);
75+
border-radius: 0.375rem;
76+
color: var(--sl-color-text);
77+
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
78+
font-size: 0.875rem;
79+
overflow-x: auto;
80+
white-space: pre;
81+
}
82+
83+
.inline-code {
84+
color: var(--sl-color-text-accent);
85+
background-color: transparent;
86+
padding: 0;
87+
font-size: 0.875rem;
88+
}
89+
</style>

‎src/components/forms/ValueDisplayShortenForm.vue‎

Lines changed: 16 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
11
<template>
2-
<HolderForm :config="config" />
2+
<HolderForm :config="config">
3+
<template #output="{ values }">
4+
<ValueDisplayOutput :code="getFormat(values)" />
5+
</template>
6+
</HolderForm>
37
</template>
48

59
<script setup lang="ts">
610
import HolderForm from '~/components/forms/HolderForm.vue';
11+
import ValueDisplayOutput from '~/components/forms/ValueDisplayOutput.vue';
712
import type { FormConfig } from '~/utils/formTypes';
813
914
const config: FormConfig = {
@@ -24,15 +29,15 @@ const config: FormConfig = {
2429
defaults: {
2530
customGroups: [] as { number: string; suffix: string }[],
2631
},
27-
codeLang: 'text',
28-
generateCode: (v) => {
29-
let format = 'shorten';
30-
const validGroups = (v.customGroups || []).filter((g: any) => g && g.number && g.suffix);
31-
if (validGroups.length > 0) {
32-
const cfg = validGroups.map((g: any) => `${g.number}=${g.suffix}`).join('&');
33-
format = `shorten:${cfg}`;
34-
}
35-
return `{value_${format}}\n<holder>;value;${format}\n<holder>;top_value;<position>;${format}`;
36-
},
32+
};
33+
34+
const getFormat = (v: any) => {
35+
let format = 'shorten';
36+
const validGroups = (v.customGroups || []).filter((g: any) => g && g.number && g.suffix);
37+
if (validGroups.length > 0) {
38+
const cfg = validGroups.map((g: any) => `${g.number}=${g.suffix}`).join('&');
39+
format = `shorten:${cfg}`;
40+
}
41+
return format;
3742
};
3843
</script>

‎src/components/forms/ValueDisplayTimeForm.vue‎

Lines changed: 11 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,14 @@
11
<template>
2-
<HolderForm :config="config" />
2+
<HolderForm :config="config">
3+
<template #output="{ values }">
4+
<ValueDisplayOutput :code="getFormat(values)" />
5+
</template>
6+
</HolderForm>
37
</template>
48

59
<script setup lang="ts">
610
import HolderForm from '~/components/forms/HolderForm.vue';
11+
import ValueDisplayOutput from '~/components/forms/ValueDisplayOutput.vue';
712
import type { FormConfig } from '~/utils/formTypes';
813
914
const config: FormConfig = {
@@ -31,11 +36,10 @@ const config: FormConfig = {
3136
},
3237
],
3338
defaults: { pattern: 'HH:mm:ss', type: 'duration', unit: 'seconds' },
34-
codeLang: 'text',
35-
generateCode: (v) => {
36-
const cfg = `pattern=${v.pattern}&type=${v.type}&unit=${v.unit}`;
37-
const format = `time:${cfg}`;
38-
return `{value_${format}}\n<holder>;value;${format}\n<holder>;top_value;<position>;${format}`;
39-
},
39+
};
40+
41+
const getFormat = (v: any) => {
42+
const cfg = `pattern=${v.pattern}&type=${v.type}&unit=${v.unit}`;
43+
return `time:${cfg}`;
4044
};
4145
</script>

‎src/utils/formTypes.ts‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -23,8 +23,8 @@ export type FormConfig = {
2323
fields: FieldDef[];
2424
/** Default values for all form fields */
2525
defaults: Record<string, any>;
26-
/** Language for the output code block (e.g. 'yaml', 'json', 'text') */
27-
codeLang: string;
28-
/** Converts current form values into the output code string */
29-
generateCode: (values: Record<string, any>) => string;
26+
/** Language for the output code block (if used as default output type) */
27+
codeLang?: string;
28+
/** Converts current form values into the output code string OR the format string */
29+
generateCode?: (values: Record<string, any>) => string;
3030
};

0 commit comments

Comments
 (0)