Skip to content

Update array layout style #1

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

Draft
wants to merge 9 commits into
base: main
Choose a base branch
from
Draft

Update array layout style #1

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
97b8dde
docs(README.md): make it clear this is a fork of the upstream package
yaffol May 30, 2022
96152ea
build: change package namespace and version for fork
yaffol May 30, 2022
78a4015
build: adjust version to use custom cr-* numbering scheme
yaffol May 30, 2022
b5e8aee
v3.0.0-beta.2-cr-1
yaffol May 30, 2022
15909be
Apply inherited background color to expansion panel headers
yaffol May 25, 2022
8495fb4
fix: apply global config
yaffol May 30, 2022
c8095ba
feat: add arraylist container style, update array layout
yaffol May 30, 2022
05a620e
build: increment version
yaffol May 30, 2022
a77eed1
v3.0.0-beta.2-cr-2
yaffol May 30, 2022
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
2 changes: 1 addition & 1 deletion README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
# JSON Forms Vuetify renderers

This is a monorepo containing the JSON Forms Vue 2 Vuetify renderers and an example application.
This is a fork of the monorepo containing the JSON Forms Vue 2 Vuetify renderers and an example application.
Copy link

@sdirix sdirix Jun 15, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should also adapt the vue2-vuetify README as that is the one which is shown on npm, i.e. indicate that this is a fork.


See [jsonforms-vuetify-renderers.netlify.app](https://jsonforms-vuetify-renderers.netlify.app) for the deployed example application.

Expand Down
7 changes: 5 additions & 2 deletions lerna.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
{
"packages": ["vue2-vuetify", "example"],
"version": "3.0.0-beta.2"
"packages": [
"vue2-vuetify",
"example"
],
"version": "3.0.0-beta.2-cr-2"
}
61,586 changes: 42,804 additions & 18,782 deletions package-lock.json
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 2 additions & 2 deletions vue2-vuetify/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@jsonforms/vue2-vuetify",
"version": "3.0.0-beta.2",
"name": "@yaffol/vue2-vuetify",
Copy link

@sdirix sdirix Jun 15, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You also need to consume this version in the example app package.json and code to test it locally

"version": "3.0.0-beta.2-cr-2",
"description": "Vue 2 Vuetify renderers for JSON Forms",
"repository": "https://github.com/eclipsesource/jsonforms-vuetify-renderers",
"bugs": "https://github.com/eclipsesource/jsonforms/issues",
Expand Down
96 changes: 53 additions & 43 deletions vue2-vuetify/src/layouts/ArrayLayoutRenderer.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,46 +1,29 @@
<template>
<v-card v-if="control.visible" :class="styles.arrayList.root" elevation="0">
<v-card v-if="control.visible" :class="styles.arrayList.root">
<v-card-title>
<v-toolbar flat :class="styles.arrayList.toolbar">
<v-toolbar-title :class="styles.arrayList.label">{{
computedLabel
}}</v-toolbar-title>
<validation-icon
v-if="control.childErrors.length > 0"
:errors="control.childErrors"
/>
<v-spacer></v-spacer>

<v-tooltip bottom>
<template v-slot:activator="{ on: onTooltip }">
<v-btn
fab
text
elevation="0"
small
:aria-label="`Add to ${control.label}`"
v-on="onTooltip"
:class="styles.arrayList.addButton"
:disabled="
!control.enabled ||
(appliedOptions.restrict &&
arraySchema !== undefined &&
arraySchema.maxItems !== undefined &&
control.data.length >= arraySchema.maxItems)
"
@click="addButtonClick"
>
<v-icon>mdi-plus</v-icon>
</v-btn>
</template>
{{ `Add to ${control.label}` }}
</v-tooltip>
</v-toolbar>
{{ computedLabel }}
<validation-icon
v-if="
control.childErrors.length > 0 &&
appliedOptions.showValidationOnArrayTitles
Copy link

@sdirix sdirix Jun 15, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It's good to make this configurable. I would call it showArraySummaryValidation. For a contribution we should add this to the example app configuration block to make this easily testable.

"
:errors="control.childErrors"
/>
<v-spacer></v-spacer>
</v-card-title>
<v-card-text>
<v-container justify-space-around align-content-center>
<v-card-text v-if="!noData">
<v-container
justify-space-around
align-content-center
:class="styles.arrayList.container"
>
<v-row justify="center">
<v-expansion-panels accordion focusable v-model="currentlyExpanded">
<v-expansion-panels
accordion
focusable
v-model="currentlyExpanded"
flat
Copy link

@sdirix sdirix Jun 15, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure about forcing the flat style for everyone. I would rather see this as a configuration option. We could let the user set arbitrary props like flat via the vuetifyProps mechanism, e.g. see here.

>
<v-expansion-panel
v-for="(element, index) in control.data"
:key="`${control.path}-${index}`"
Expand Down Expand Up @@ -171,10 +154,31 @@
</v-expansion-panels>
</v-row>
</v-container>
<v-container v-if="noData" :class="styles.arrayList.noData">
No data
Copy link

@sdirix sdirix Jun 15, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of removing this we could make it configurable or you could also just apply display: none to this on the application side to not show it. In general I think it's nice to somehow show that an array is empty.

</v-container></v-card-text
>
</v-card-text>
<v-card-actions class="pb-8">
Copy link

@sdirix sdirix Jun 15, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm not sure about modifying the "new" button to the bottom for everyone. In most UIs we build it's at the top. However we could also make this configurable

<v-tooltip bottom>
<template v-slot:activator="{ on: onTooltip }">
<v-btn
color="primary"
rounded
:aria-label="`Add to ${control.label}`"
v-on="onTooltip"
:class="styles.arrayList.addButton"
:disabled="
!control.enabled ||
(appliedOptions.restrict &&
arraySchema !== undefined &&
arraySchema.maxItems !== undefined &&
control.data.length >= arraySchema.maxItems)
"
@click="addButtonClick"
>
<v-icon>mdi-plus</v-icon> Add new
</v-btn>
</template>
{{ `Add to ${control.label}` }}
Copy link

@sdirix sdirix Jun 15, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would like to see the translation support used here, but this could also be done in a follow up

</v-tooltip>
</v-card-actions>
<v-dialog
:value="suggestToDelete !== null"
max-width="600"
Expand Down Expand Up @@ -366,4 +370,10 @@ export const entry: JsonFormsRendererRegistryEntry = {
.notranslate {
transform: none !important;
}
.v-expansion-panel-header:before {
background-color: inherit;
}
Comment on lines +373 to +375
Copy link

@sdirix sdirix Jun 15, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I would not add this here as discussed in the PR against @jsonforms/vuetify-renderers.

/* .v-expansion-panel::before {
box-shadow: inherit;
} */
</style>
1 change: 1 addition & 0 deletions vue2-vuetify/src/styles/styles.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,7 @@ export interface Styles {
arrayList: {
root?: string;
toolbar?: string;
container?: string;
addButton?: string;
label?: string;
noData?: string;
Expand Down
2 changes: 1 addition & 1 deletion vue2-vuetify/src/util/composition.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -129,7 +129,7 @@ export const useVuetifyLayout = <I extends { layout: any }>(input: I) => {
const appliedOptions = computed(() => {
return merge(
{},
cloneDeep(input.layout.config),
cloneDeep(input.layout.value.config),
cloneDeep(input.layout.value.uischema.options)
);
});
Expand Down