Skip to content

refactor: Improve spacing behavior for nested layouts with conditional visibility #2533

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
kchobantonov wants to merge 21 commits into
base: master
Choose a base branch
from
Open

refactor: Improve spacing behavior for nested layouts with conditional visibility #2533

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
616522f
update vuetify
kchobantonov Jan 19, 2026
a6a3a6c
add new example for layouts
kchobantonov Jan 19, 2026
c58de82
update the unknown render to show the message in red similar to react…
kchobantonov Jan 19, 2026
1f77dff
wrap the form to have some padding since the vertical/horizontal/grou…
kchobantonov Jan 19, 2026
3d14b16
use expansion-panels so that we can collaps the whole additional prop…
kchobantonov Jan 19, 2026
5501cea
add default density to match other vuetify text fields as hight
kchobantonov Jan 19, 2026
1942829
use collapsable panels for group layout
kchobantonov Jan 19, 2026
0dcd847
remove any paddings so if we use nested layouts those padding do not …
kchobantonov Jan 19, 2026
0c38668
use inline for horizontal/vertical radio group layout
kchobantonov Jan 19, 2026
fadefdd
use expansion panels so we can collapse/expand the array items, also …
kchobantonov Jan 19, 2026
c27a8cc
use all space
kchobantonov Jan 19, 2026
2592acc
remove extra v-card, remove extra margin from stepper window
kchobantonov Jan 19, 2026
ba95800
revert the vuetify upgrade and leave that to other opened PRs
kchobantonov Jan 19, 2026
1c751ab
revert using the gap and stick with padding since the horizontal layo…
kchobantonov Jan 20, 2026
e04df21
remove no-gutters and use v-if to check visibility so we can remove i…
kchobantonov Jan 20, 2026
8fb68bb
show only the visible elements and do not preserve extra space for el…
kchobantonov Jan 20, 2026
a6abd59
allow applying v-row and v-col props for all rows/columns
kchobantonov Jan 20, 2026
fb20772
wrap items with visibility check
kchobantonov Jan 21, 2026
b81f30f
update render to be useful under dynamic context like additionalPrope…
kchobantonov Jan 21, 2026
a14d492
revert the no-gutters
kchobantonov Jan 21, 2026
529d129
add gap between the object and the additional properties since we do …
kchobantonov Jan 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
688 changes: 688 additions & 0 deletions packages/examples/src/examples/employee-registration.ts
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 2 additions & 0 deletions packages/examples/src/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -72,6 +72,7 @@ import * as readonly from './examples/readonly';
import * as listWithDetailPrimitives from './examples/list-with-detail-primitives';
import * as conditionalSchemaComposition from './examples/conditional-schema-compositions';
import * as additionalErrors from './examples/additional-errors';
import * as employeeRegistration from './examples/employee-registration';
import * as multiEnumWithLabelAndDesc from './examples/enum-multi-with-label-and-desc';
import * as additionalProperties from './examples/additional-properties';
import * as login from './examples/login';
Expand Down Expand Up @@ -133,6 +134,7 @@ export {
enumExample,
radioGroupExample,
multiEnum,
employeeRegistration,
multiEnumWithLabelAndDesc,
enumInArray,
readonly,
Expand Down
78 changes: 41 additions & 37 deletions packages/vue-vuetify/dev/components/ExampleForm.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -96,42 +96,46 @@ const properties = computed<JsonFormsProps>(() => ({
</script>

<template>
<div>
<json-forms
v-if="resolvedSchema.resolved && resolvedSchema.error === undefined"
v-bind="properties"
@change="onChange"
></json-forms>
<v-container v-else>
<v-row
v-if="!resolvedSchema.resolved"
class="fill-height"
align-content="center"
justify="center"
<v-container fluid>
<v-row no-gutters>
<v-col
v-if="resolvedSchema.resolved && resolvedSchema.error === undefined"
>
<v-col class="text-subtitle-1 text-center" cols="12">
Resolving Schema Refs
</v-col>
<v-col cols="6">
<v-progress-linear
indeterminate
rounded
height="6"
></v-progress-linear>
</v-col>
</v-row>
<v-row
v-else-if="resolvedSchema.error !== undefined"
class="fill-height"
align-content="center"
justify="center"
>
<v-col class="text-subtitle-1 text-center" cols="12">
<v-alert color="red" dark>
{{ resolvedSchema.error }}
</v-alert>
</v-col>
</v-row>
</v-container>
</div>
<json-forms v-bind="properties" @change="onChange"></json-forms>
</v-col>
<v-col v-else>
<v-container>
<v-row
v-if="!resolvedSchema.resolved"
class="fill-height"
align-content="center"
justify="center"
>
<v-col class="text-subtitle-1 text-center" cols="12">
Resolving Schema Refs
</v-col>
<v-col cols="6">
<v-progress-linear
indeterminate
rounded
height="6"
></v-progress-linear>
</v-col>
</v-row>
<v-row
v-else-if="resolvedSchema.error !== undefined"
class="fill-height"
align-content="center"
justify="center"
>
<v-col class="text-subtitle-1 text-center" cols="12">
<v-alert color="red" dark>
{{ resolvedSchema.error }}
</v-alert>
</v-col>
</v-row>
</v-container>
</v-col>
</v-row>
</v-container>
</template>
53 changes: 23 additions & 30 deletions packages/vue-vuetify/dev/plugins/vuetify.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -131,6 +131,22 @@ function toBlueprint(value: string): Blueprint {
return md1;
}

const baseDefaults = {
VField: { hideDetails: 'auto' },
VTextField: { hideDetails: 'auto' },
VCombobox: { hideDetails: 'auto' },
VSelect: { hideDetails: 'auto' },
VAutocomplete: { hideDetails: 'auto' },
VTextarea: { hideDetails: 'auto' },
VNumberInput: { density: 'comfortable', hideDetails: 'auto' },
VDateInput: { hideDetails: 'auto' },
VCheckbox: {
density: 'comfortable',
hideDetails: 'auto',
color: 'primary',
},
};

function createVuetifyInstance(
dark: boolean,
blueprint: string,
Expand All @@ -139,36 +155,13 @@ function createVuetifyInstance(
locale: string,
) {
const defaults = variant
? {
VField: {
variant: variant,
},
VTextField: {
variant: variant,
},
VCombobox: {
variant: variant,
},
VSelect: {
variant: variant,
},
VAutocomplete: {
variant: variant,
},
VTextarea: {
variant: variant,
},
VNumberInput: {
variant: variant,
},
VDateInput: {
variant: variant,
},
VCheckbox: { color: 'primary' },
}
: {
VCheckbox: { color: 'primary' },
};
? Object.fromEntries(
Object.entries(baseDefaults).map(([key, props]) => [
key,
{ ...props, variant },
]),
)
: baseDefaults;

dayjs.locale(locale);

Expand Down
Loading
Loading