@live-change/frontend-auto-form 0.9.32 → 0.9.33

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (17) hide show
  1. package/front/src/NavBar.vue +25 -25
  2. package/front/src/Page.vue +2 -2
  3. package/front/src/components/crud/EditorButtons.vue +8 -6
  4. package/front/src/components/crud/ModelEditor.vue +1 -1
  5. package/front/src/components/crud/ModelList.vue +10 -10
  6. package/front/src/components/crud/ModelSingle.vue +10 -10
  7. package/front/src/components/crud/ModelView.vue +8 -8
  8. package/front/src/components/form/ArrayInput.vue +2 -2
  9. package/front/src/components/form/AutoEditor.vue +2 -2
  10. package/front/src/components/form/AutoField.vue +10 -8
  11. package/front/src/components/form/GroupField.vue +5 -2
  12. package/front/src/components/view/ObjectView.vue +2 -2
  13. package/front/src/pages/Editor.vue +2 -2
  14. package/front/src/pages/List.vue +1 -1
  15. package/front/src/pages/Models.vue +5 -5
  16. package/front/src/pages/View.vue +1 -1
  17. package/package.json +14 -14
package/front/src/NavBar.vue CHANGED
@@ -3,49 +3,49 @@ template>
3
3
  <div class="surface-overlay py-3 px-6 shadow-2 flex align-items-center justify-content-between
4
4
  relative md:sticky top-0 z-5"
5
5
  style="min-height: 80px" key="navbar">
6
- <img src="/images/logo.svg" alt="Image" height="40" class="mr-0 lg:mr-6">
7
- <a v-ripple class="cursor-pointer block lg:hidden text-700 p-ripple"
8
- v-styleclass="{ selector: '@next', enterClass: 'hidden', leaveToClass: 'hidden', hideOnOutsideClick: true }">
6
+ <img src="/images/logo.svg" alt="Image" height="40" class="mr-0 lg:mr-12">
7
+ <a v-ripple class="cursor-pointer block lg:hidden text-surface-700 dark:text-surface-100 p-ripple"
8
+ v-styleclass="{ selector: '@next', enterFromClass: 'hidden', leaveToClass: 'hidden', hideOnOutsideClick: true }">
9
9
  <i class="pi pi-bars text-4xl"></i>
10
10
  </a>
11
- <div class="align-items-center flex-grow-1 justify-content-between hidden lg:flex absolute lg:static w-full surface-overlay left-0 top-100 z-1 shadow-2 lg:shadow-none">
12
- <ul class="list-none p-0 m-0 flex lg:align-items-center select-none flex-column lg:flex-row">
11
+ <div class="items-center grow justify-between hidden lg:flex absolute lg:static w-full bg-surface-0 dark:bg-surface-900 left-0 top-full z-10 shadow lg:shadow-none">
12
+ <ul class="list-none p-0 m-0 flex lg:items-center select-none flex-col lg:flex-row">
13
13
  <li>
14
- <a v-ripple class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
14
+ <a v-ripple class="flex px-12 p-4 lg:px-4 lg:py-2 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 font-medium rounded-border cursor-pointer transition-colors duration-150 p-ripple">
15
15
  <i class="pi pi-home mr-2"></i>
16
16
  <span>Home</span>
17
17
  </a>
18
18
  </li>
19
19
  <li class="lg:relative">
20
- <a v-ripple class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple"
21
- v-styleclass="{ selector: '@next', enterClass: 'hidden', enterActiveClass: 'scalein', leaveToClass: 'hidden', leaveActiveClass: 'fadeout', hideOnOutsideClick: true }">
20
+ <a v-ripple class="flex px-12 p-4 lg:px-4 lg:py-2 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 font-medium rounded-border cursor-pointer transition-colors duration-150 p-ripple"
21
+ v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'scalein', leaveToClass: 'hidden', leaveActiveClass: 'fadeout', hideOnOutsideClick: true }">
22
22
  <i class="pi pi-users mr-2"></i>
23
23
  <span>Customers</span>
24
- <i class="pi pi-angle-down ml-auto lg:ml-3"></i>
24
+ <i class="pi pi-angle-down ml-auto lg:ml-4"></i>
25
25
  </a>
26
- <ul class="list-none py-3 px-6 m-0 lg:px-0 lg:py-0 border-round shadow-0 lg:shadow-2 lg:border-1 border-50 lg:absolute surface-overlay hidden origin-top w-full lg:w-15rem cursor-pointer">
26
+ <ul class="list-none py-4 px-12 m-0 lg:px-0 lg:py-0 rounded-border shadow-0 lg:shadow lg:border border-surface-50 dark:border-surface-800 lg:absolute bg-surface-0 dark:bg-surface-900 hidden origin-top w-full lg:w-60 cursor-pointer">
27
27
  <li>
28
- <a v-ripple class="flex p-3 align-items-center text-600 hover:text-900 hover:surface-100 transition-colors transition-duration-150 p-ripple">
28
+ <a v-ripple class="flex p-4 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 transition-colors duration-150 p-ripple">
29
29
  <i class="pi pi-user-plus mr-2"></i>
30
30
  <span class="font-medium">Add New</span>
31
31
  </a>
32
32
  </li>
33
33
  <li class="relative">
34
- <a v-ripple class="flex p-3 align-items-center text-600 hover:text-900 hover:surface-100 transition-colors transition-duration-150 p-ripple"
35
- v-styleclass="{ selector: '@next', enterClass: 'hidden', enterActiveClass: 'scalein', leaveToClass: 'hidden', leaveActiveClass: 'fadeout', hideOnOutsideClick: true }">
34
+ <a v-ripple class="flex p-4 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 transition-colors duration-150 p-ripple"
35
+ v-styleclass="{ selector: '@next', enterFromClass: 'hidden', enterActiveClass: 'scalein', leaveToClass: 'hidden', leaveActiveClass: 'fadeout', hideOnOutsideClick: true }">
36
36
  <i class="pi pi-search mr-2"></i>
37
37
  <span class="font-medium">Search</span>
38
38
  <i class="pi pi-angle-down ml-auto lg:-rotate-90"></i>
39
39
  </a>
40
- <ul class="list-none py-3 pl-3 m-0 lg:px-0 lg:py-0 border-round shadow-0 lg:shadow-2 lg:border-1 border-50 lg:absolute surface-overlay hidden origin-top w-full lg:w-15rem cursor-pointer left-100 top-0">
40
+ <ul class="list-none py-4 pl-4 m-0 lg:px-0 lg:py-0 rounded-border shadow-0 lg:shadow lg:border border-surface-50 dark:border-surface-800 lg:absolute bg-surface-0 dark:bg-surface-900 hidden origin-top w-full lg:w-60 cursor-pointer left-full top-0">
41
41
  <li>
42
- <a v-ripple class="flex p-3 align-items-center text-600 hover:text-900 hover:surface-100 transition-colors transition-duration-150 p-ripple">
42
+ <a v-ripple class="flex p-4 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 transition-colors duration-150 p-ripple">
43
43
  <i class="pi pi-shopping-cart mr-2"></i>
44
44
  <span class="font-medium">Purchases</span>
45
45
  </a>
46
46
  </li>
47
47
  <li class="relative">
48
- <a v-ripple class="flex p-3 align-items-center text-600 hover:text-900 hover:surface-100 transition-colors transition-duration-150 p-ripple">
48
+ <a v-ripple class="flex p-4 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 transition-colors duration-150 p-ripple">
49
49
  <i class="pi pi-comments mr-2"></i>
50
50
  <span class="font-medium">Messages</span>
51
51
  </a>
@@ -55,21 +55,21 @@ template>
55
55
  </ul>
56
56
  </li>
57
57
  <li>
58
- <a v-ripple class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
58
+ <a v-ripple class="flex px-12 p-4 lg:px-4 lg:py-2 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 font-medium rounded-border cursor-pointer transition-colors duration-150 p-ripple">
59
59
  <i class="pi pi-calendar mr-2"></i>
60
60
  <span>Calendar</span>
61
61
  </a>
62
62
  </li>
63
63
  <li>
64
- <a v-ripple class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
64
+ <a v-ripple class="flex px-12 p-4 lg:px-4 lg:py-2 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 font-medium rounded-border cursor-pointer transition-colors duration-150 p-ripple">
65
65
  <i class="pi pi-chart-line mr-2"></i>
66
66
  <span>Stats</span>
67
67
  </a>
68
68
  </li>
69
69
  </ul>
70
- <ul class="list-none p-0 m-0 flex lg:align-items-center select-none flex-column lg:flex-row border-top-1 surface-border lg:border-top-none">
70
+ <ul class="list-none p-0 m-0 flex lg:items-center select-none flex-col lg:flex-row border-t border-surface lg:border-t-0">
71
71
  <li>
72
- <a v-ripple class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center text-600 hover:text-900 hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
72
+ <a v-ripple class="flex px-12 p-4 lg:px-4 lg:py-2 items-center text-surface-600 dark:text-surface-200 hover:text-surface-900 dark:hover:text-surface-0 hover:bg-surface-100 dark:hover:bg-surface-700 font-medium rounded-border cursor-pointer transition-colors duration-150 p-ripple">
73
73
  <i class="pi pi-inbox text-base lg:text-2xl mr-2 lg:mr-0"></i>
74
74
  <span class="block lg:hidden font-medium">Inbox</span>
75
75
  </a>
@@ -83,12 +83,12 @@ template>
83
83
  <span class="block lg:hidden font-medium">Notifications</span>
84
84
  </a>
85
85
  </li>
86
- <li class="border-top-1 surface-border lg:border-top-none">
87
- <a v-ripple class="flex px-6 p-3 lg:px-3 lg:py-2 align-items-center hover:surface-100 font-medium border-round cursor-pointer transition-colors transition-duration-150 p-ripple">
88
- <img src="/images/empty-user-photo.svg" class="mr-3 lg:mr-0 border-circle" style="width: 28px; height: 28px"/>
86
+ <li class="border-t border-surface lg:border-t-0">
87
+ <a v-ripple class="flex px-12 p-4 lg:px-4 lg:py-2 items-center hover:bg-surface-100 dark:hover:bg-surface-700 font-medium rounded-border cursor-pointer transition-colors duration-150 p-ripple">
88
+ <img src="/images/empty-user-photo.svg" class="mr-4 lg:mr-0 rounded-full" style="width: 28px; height: 28px"/>
89
89
  <div class="block lg:hidden">
90
- <div class="text-900 font-medium">Josephine Lillard</div>
91
- <span class="text-600 font-medium text-sm">Marketing Specialist</span>
90
+ <div class="text-surface-900 dark:text-surface-0 font-medium">Josephine Lillard</div>
91
+ <span class="text-surface-600 dark:text-surface-200 font-medium text-sm">Marketing Specialist</span>
92
92
  </div>
93
93
  </a>
94
94
  </li>
package/front/src/Page.vue CHANGED
@@ -1,12 +1,12 @@
1
1
  <template>
2
- <div class="min-h-screen flex flex-column surface-ground">
2
+ <div class="min-h-screen flex flex-col bg-surface-50 dark:bg-surface-950">
3
3
  <NavBar></NavBar>
4
4
  <ConfirmPopup v-if="isMounted"></ConfirmPopup>
5
5
  <Toast v-if="isMounted"></Toast>
6
6
  <div class="relative h-0 w-full">
7
7
  <ProgressBar v-if="loading || working" mode="indeterminate" style="height: .2em" />
8
8
  </div>
9
- <div v-if="pageType == 'simple'" class="p-5 flex flex-column flex-auto align-items-center">
9
+ <div v-if="pageType == 'simple'" class="p-8 flex flex-col flex-auto items-center">
10
10
  <slot></slot>
11
11
  </div>
12
12
  <div v-if="pageType == 'wide'">
package/front/src/components/crud/EditorButtons.vue CHANGED
@@ -1,16 +1,16 @@
1
1
  <template>
2
- <div class="flex flex-column-reverse md:flex-row justify-content-between align-items-center mt-3">
3
- <div class="flex flex-column mt-2 md:mt-0">
4
- <div v-if="savingDraft" class="text-500 mr-2 flex flex-row align-items-center">
2
+ <div class="flex flex-col-reverse md:flex-row justify-between items-center mt-4">
3
+ <div class="flex flex-col mt-2 md:mt-0">
4
+ <div v-if="savingDraft" class="text-surface-500 dark:text-surface-300 mr-2 flex flex-row items-center">
5
5
  <i class="pi pi-spin pi-spinner mr-2" style="font-size: 1.23rem"></i>
6
6
  <span>Saving draft...</span>
7
7
  </div>
8
- <div v-else-if="draftChanged" class="text-sm text-500 mr-2">
8
+ <div v-else-if="draftChanged" class="text-sm text-surface-500 dark:text-surface-300 mr-2">
9
9
  Draft changed
10
10
  </div>
11
- <div v-else-if="validationResult" class="font-semibold p-error mr-2">
11
+ <Message v-else-if="validationResult" severity="error" variant="simple" size="small" class="mr-2">
12
12
  Before saving, please correct the errors above.
13
- </div>
13
+ </Message>
14
14
  <div v-else-if="!changed" class="">
15
15
  No changes to save.
16
16
  </div>
@@ -33,6 +33,8 @@
33
33
 
34
34
  <script setup>
35
35
 
36
+ import Message from "primevue/message"
37
+
36
38
  import { ref, computed, onMounted, defineProps, defineEmits, toRefs, getCurrentInstance } from 'vue'
37
39
 
38
40
  const props = defineProps({
package/front/src/components/crud/ModelEditor.vue CHANGED
@@ -9,7 +9,7 @@
9
9
  <div class="">
10
10
  Service <strong>{{ service }}</strong>
11
11
  </div>
12
- <div class="text-2xl mb-4">
12
+ <div class="text-2xl mb-6">
13
13
  <span v-if="isNew">Create </span>
14
14
  <span v-else>Edit </span>
15
15
  <strong>{{ model }}</strong>
package/front/src/components/crud/ModelList.vue CHANGED
@@ -6,7 +6,7 @@
6
6
  <!-- <pre>{{ modelsPathRangeConfig.view }}</pre>
7
7
  <pre>{{ identifiers }}</pre>-->
8
8
 
9
- <div class="surface-card w-full p-3 shadow-1 border-round mb-2">
9
+ <div class="bg-surface-0 dark:bg-surface-900 w-full p-4 shadow-sm rounded-border mb-2">
10
10
  <slot name="header">
11
11
  <div class="">
12
12
  Service <strong>{{ service }}</strong>
@@ -18,19 +18,19 @@
18
18
  </slot>
19
19
  </div>
20
20
 
21
- <div class="surface-card p-3 shadow-1 border-round" v-if="modelsPathRangeFunctions">
21
+ <div class="bg-surface-0 dark:bg-surface-900 p-4 shadow-sm rounded-border" v-if="modelsPathRangeFunctions">
22
22
  <range-viewer v-for="(modelsPathRangeFunction, index) in modelsPathRangeFunctions"
23
23
  :key="JSON.stringify(modelsPathRangeConfig)+index"
24
24
  :pathFunction="modelsPathRangeFunction"
25
25
  :canLoadTop="false" canDropBottom
26
26
  loadBottomSensorSize="4000px" dropBottomSensorSize="3000px">
27
27
  <template #empty>
28
- <div class="text-xl text-800 my-1 mx-3">
28
+ <div class="text-xl text-surface-800 dark:text-surface-50 my-1 mx-4">
29
29
  No <strong>{{ pluralize(model[0].toLowerCase() + model.slice(1)) }}</strong> found.
30
30
  </div>
31
31
  </template>
32
32
  <template #default="{ item: object }">
33
- <div class="flex flex-row align-items-center justify-content-between my-3">
33
+ <div class="flex flex-row items-center justify-between my-4">
34
34
  <router-link :to="viewRoute(object)" class="no-underline text-color">
35
35
  <ObjectIdentification
36
36
  :objectType="service + '_' + model"
@@ -55,17 +55,17 @@
55
55
  </template>
56
56
  </range-viewer>
57
57
  </div>
58
- <div v-else class="flex align-items-start p-4 bg-pink-100 border-round border-1 border-pink-300 mb-4">
59
- <i class="pi pi-times-circle text-pink-900 text-2xl mr-3" />
60
- <div class="mr-3">
61
- <div class="text-pink-900 font-medium text-xl mb-3 line-height-1">Not authorized</div>
58
+ <div v-else class="flex items-start p-6 bg-pink-100 rounded-border border border-pink-300 mb-6">
59
+ <i class="pi pi-times-circle text-pink-900 text-2xl mr-4" />
60
+ <div class="mr-4">
61
+ <div class="text-pink-900 font-medium text-xl mb-4 leading-none">Not authorized</div>
62
62
  <p class="m-0 p-0 text-pink-700">
63
63
  You do not have sufficient privileges to use this feature of this object.
64
64
  </p>
65
65
  </div>
66
66
  </div>
67
67
 
68
- <div v-if="modelDefinition.crud?.create" class="mt-2 flex flex-row justify-content-end mr-2">
68
+ <div v-if="modelDefinition.crud?.create" class="mt-2 flex flex-row justify-end mr-2">
69
69
  <router-link :to="createRoute" class="no-underline2">
70
70
  <Button icon="pi pi-plus" :label="'Create new '+model" />
71
71
  </router-link>
@@ -73,7 +73,7 @@
73
73
 
74
74
  <ConfirmPopup group="delete">
75
75
  <template #message="slotProps">
76
- <div class="flex flex-row align-items-center w-full gap-3 border-bottom-1 surface-border px-3 pt-1 pb-1">
76
+ <div class="flex flex-row items-center w-full gap-4 border-b border-surface px-4 pt-1 pb-1">
77
77
  <i class="pi pi-trash text-3xl text-primary-500"></i>
78
78
  <p>
79
79
  Do you want to delete {{ model[0].toLowerCase() + model.slice(1) }}
package/front/src/components/crud/ModelSingle.vue CHANGED
@@ -4,7 +4,7 @@
4
4
  <pre>{{ modelDefinition }}</pre>-->
5
5
 
6
6
 
7
- <div class="surface-card w-full p-3 shadow-1 border-round mb-2">
7
+ <div class="bg-surface-0 dark:bg-surface-900 w-full p-4 shadow-sm rounded-border mb-2">
8
8
  <slot name="header">
9
9
  <div class="">
10
10
  Service <strong>{{ service }}</strong>
@@ -15,14 +15,14 @@
15
15
  </slot>
16
16
  </div>
17
17
 
18
- <div class="surface-card p-3 shadow-1 border-round" v-if="modelsPaths">
18
+ <div class="bg-surface-0 dark:bg-surface-900 p-4 shadow-sm rounded-border" v-if="modelsPaths">
19
19
  <div v-for="({ value: object }, index) in (modelsData ?? [])">
20
- <div v-if="!object" class="text-xl text-800 my-1 mx-3">
20
+ <div v-if="!object" class="text-xl text-surface-800 dark:text-surface-50 my-1 mx-4">
21
21
  <strong>{{ model }}</strong> not found.
22
22
  </div>
23
23
  <div v-else
24
24
  :key="JSON.stringify(modelsPaths[index])+index"
25
- class="flex flex-row align-items-center justify-content-between my-3">
25
+ class="flex flex-row items-center justify-between my-4">
26
26
  <router-link :to="viewRoute(object)" class="no-underline text-color">
27
27
  <ObjectIdentification
28
28
  :objectType="service + '_' + model"
@@ -46,10 +46,10 @@
46
46
  </div>
47
47
  </div>
48
48
  </div>
49
- <div v-else class="flex align-items-start p-4 bg-pink-100 border-round border-1 border-pink-300 mb-4">
50
- <i class="pi pi-times-circle text-pink-900 text-2xl mr-3" />
51
- <div class="mr-3">
52
- <div class="text-pink-900 font-medium text-xl mb-3 line-height-1">Not authorized</div>
49
+ <div v-else class="flex items-start p-6 bg-pink-100 rounded-border border border-pink-300 mb-6">
50
+ <i class="pi pi-times-circle text-pink-900 text-2xl mr-4" />
51
+ <div class="mr-4">
52
+ <div class="text-pink-900 font-medium text-xl mb-4 leading-none">Not authorized</div>
53
53
  <p class="m-0 p-0 text-pink-700">
54
54
  You do not have sufficient privileges to use this feature of this object.
55
55
  </p>
@@ -57,7 +57,7 @@
57
57
  </div>
58
58
 
59
59
  <div v-if="modelDefinition.crud?.create && !modelsData.find(x => x?.value)"
60
- class="mt-2 flex flex-row justify-content-end mr-2">
60
+ class="mt-2 flex flex-row justify-end mr-2">
61
61
  <router-link :to="createRoute" class="no-underline2">
62
62
  <Button icon="pi pi-plus" :label="'Set '+model" />
63
63
  </router-link>
@@ -65,7 +65,7 @@
65
65
 
66
66
  <ConfirmPopup group="delete">
67
67
  <template #message="slotProps">
68
- <div class="flex flex-row align-items-center w-full gap-3 border-bottom-1 surface-border px-3 pt-1 pb-1">
68
+ <div class="flex flex-row items-center w-full gap-4 border-b border-surface px-4 pt-1 pb-1">
69
69
  <i class="pi pi-trash text-3xl text-primary-500"></i>
70
70
  <p>
71
71
  Do you want to delete {{ model[0].toLowerCase() + model.slice(1) }}
package/front/src/components/crud/ModelView.vue CHANGED
@@ -11,13 +11,13 @@
11
11
  <pre>{{ object }}</pre>-->
12
12
 
13
13
  <div v-if="object">
14
- <div class="surface-card p-3 shadow-1 border-round mb-4">
14
+ <div class="bg-surface-0 dark:bg-surface-900 p-4 shadow-sm rounded-border mb-6">
15
15
 
16
16
  <div class="">
17
17
  Service <strong>{{ service }}</strong>
18
18
  </div>
19
- <div class="flex flex-row flex-wrap justify-content-between align-items-top">
20
- <div class="text-2xl mb-4">
19
+ <div class="flex flex-row flex-wrap justify-between align-items-top">
20
+ <div class="text-2xl mb-6">
21
21
  <strong>{{ model }}</strong>
22
22
  <ObjectIdentification
23
23
  :objectType="service + '_' + model"
@@ -26,7 +26,7 @@
26
26
  class="ml-2"
27
27
  />
28
28
  </div>
29
- <Button label="Access" icon="pi pi-key" class="p-button mb-4" @click="showAccessControl" />
29
+ <Button label="Access" icon="pi pi-key" class="p-button mb-6" @click="showAccessControl" />
30
30
  </div>
31
31
 
32
32
  <AutoView :value="object" :root-value="object" :i18n="i18n" :attributes="attributes"
@@ -34,7 +34,7 @@
34
34
 
35
35
  </div>
36
36
 
37
- <div v-for="preparedRelation of visibleObjectRelations" class="mb-4">
37
+ <div v-for="preparedRelation of visibleObjectRelations" class="mb-6">
38
38
  <ModelSingle :service="preparedRelation.service" :model="preparedRelation.model"
39
39
  :identifiers="preparedRelation.identifiers">
40
40
  <template #header>
@@ -52,7 +52,7 @@
52
52
  </ModelSingle>
53
53
  </div>
54
54
 
55
- <div v-for="preparedRelation of visibleRangeRelations" class="mb-4">
55
+ <div v-for="preparedRelation of visibleRangeRelations" class="mb-6">
56
56
  <ModelList :service="preparedRelation.service" :model="preparedRelation.model"
57
57
  :identifiers="preparedRelation.identifiers" :view="preparedRelation.view">
58
58
  <template #header>
@@ -73,7 +73,7 @@
73
73
  <Dialog v-model:visible="accessControlDialog"
74
74
  :modal="true">
75
75
  <template #header>
76
- <div class="text-900 text-3xl font-medium">
76
+ <div class="text-surface-900 dark:text-surface-0 text-3xl font-medium">
77
77
  Access Control
78
78
  </div>
79
79
  </template>
@@ -89,7 +89,7 @@
89
89
  </div>
90
90
  <NotFound v-else />
91
91
 
92
- <div class="surface-card p-3 shadow-1 border-round">
92
+ <div class="bg-surface-0 dark:bg-surface-900 p-4 shadow-sm rounded-border">
93
93
 
94
94
  <pre>{{ preparedRelations }}</pre>
95
95
 
package/front/src/components/form/ArrayInput.vue CHANGED
@@ -1,7 +1,7 @@
1
1
  <template>
2
2
  <div>
3
- <div class="mb-4 border-bottom-1" v-for="(value, index) in modelValue">
4
- <div class="flex flex-row align-items-center justify-content-between">
3
+ <div class="mb-6 border-b" v-for="(value, index) in modelValue">
4
+ <div class="flex flex-row items-center justify-between">
5
5
 
6
6
  <div class="text-2xl">
7
7
  {{ te(i18n.slice(0,-1)+':itemTitle')
package/front/src/components/form/AutoEditor.vue CHANGED
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <div v-if="definition" class="grid formgrid p-fluid mt-2 mb-2">
2
+ <div v-if="definition" class="grid grid-cols-12 gap-4 formgrid p-fluid mt-2 mb-2">
3
3
  <auto-field v-for="property in propertiesList" :key="property"
4
4
  :modelValue="modelValue?.[property]"
5
5
  @update:modelValue="value => updateModelProperty(property, value)"
@@ -7,7 +7,7 @@
7
7
  :label="property"
8
8
  :rootValue="props.rootValue" :propName="(propName ? propName + '.' : '') + property"
9
9
  :i18n="i18n"
10
- class="col-12" />
10
+ class="col-span-12" />
11
11
  </div>
12
12
  </template>
13
13
 
package/front/src/components/form/AutoField.vue CHANGED
@@ -17,28 +17,30 @@
17
17
  </slot>
18
18
  <div>
19
19
  <slot name="error" v-bind="{ validationResult, uid }" >
20
- <small v-if="validationResult && !minLengthErrorVisible" class="p-error mt-1">
20
+ <Message v-if="validationResult && !minLengthErrorVisible" severity="error" variant="simple" size="small"
21
+ class="mt-1">
21
22
  {{ (typeof validationResult === 'object')
22
23
  ? t( 'errors.' + validationResult.error, validationResult.validator )
23
24
  : t( 'errors.' + validationResult ) }}
24
- </small>
25
+ </Message>
25
26
  </slot>
26
- <small v-if="maxLengthValidation || minLengthValidation" style="float: right" class="mt-1"
27
- :class="{
28
- 'p-error': minMaxError
29
- }">
27
+ <Message v-if="maxLengthValidation || minLengthValidation" :severity="minMaxError ? 'error' : 'secondary'"
28
+ variant="simple" size="small"
29
+ class="mt-1" style="float: right">
30
30
  {{
31
31
  (minLengthErrorVisible)
32
32
  ? t( 'info.minLength', { minLength: minLengthValidation.length, length: props.modelValue?.length ?? 0 })
33
33
  : t( 'info.maxLength', { maxLength: maxLengthValidation.length, length: props.modelValue?.length ?? 0 })
34
34
  }}
35
- </small>
35
+ </Message>
36
36
  </div>
37
37
  </div>
38
38
  </template>
39
39
 
40
40
  <script setup>
41
41
 
42
+ import Message from "primevue/message"
43
+
42
44
  import AutoInput from "./AutoInput.vue"
43
45
 
44
46
  import { inputs, types } from '../../config.js'
@@ -174,7 +176,7 @@
174
176
 
175
177
  const fieldClass = computed(() => [inputConfig.value?.fieldClass, definition.value?.fieldClass, props.class, {
176
178
  'p-invalid': !!error.value
177
- }, 'flex flex-column'])
179
+ }, 'flex flex-col'])
178
180
  const fieldStyle = computed(() => [inputConfig.value?.fieldStyle, definition.value?.fieldStyle, props.style])
179
181
 
180
182
  const configAttributes = computed(() => {
package/front/src/components/form/GroupField.vue CHANGED
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <div v-if="visible" class="pl-5 mb-3" :class="fieldClass" :style="fieldStyle">
2
+ <div v-if="visible" class="pl-8 mb-4" :class="fieldClass" :style="fieldStyle">
3
3
  <h3>{{ t( i18n + label + ':title' ) }}</h3>
4
4
  <auto-input :modelValue="modelValue" :definition="definition" :name="props.name"
5
5
  :class="props.inputClass" :style="props.inputStyle"
@@ -7,7 +7,9 @@
7
7
  :rootValue="props.rootValue" :propName="props.propName"
8
8
  @update:modelValue="value => emit('update:modelValue', value)"
9
9
  :i18n="props.i18n + props.propName.split('.').pop() + '.'" />
10
- <small v-if="typeof validationResult == 'string'" class="p-error">{{ t( 'errors.' + validationResult ) }}</small>
10
+ <Message v-if="typeof validationResult == 'string'" severity="error" variant="simple" size="small">
11
+ {{ t( 'errors.' + validationResult ) }}
12
+ </Message>
11
13
  </div>
12
14
  </template>
13
15
 
@@ -15,6 +17,7 @@
15
17
  import AutoInput from "./AutoInput.vue"
16
18
  import { inputs, types } from '../../config.js'
17
19
  import { computed, inject, toRefs, getCurrentInstance } from 'vue'
20
+ import Message from 'primevue/message'
18
21
 
19
22
  import { useI18n } from 'vue-i18n'
20
23
  const { t } = useI18n()
package/front/src/components/view/ObjectView.vue CHANGED
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <div v-if="definition" class="grid formgrid p-fluid mt-2 mb-2">
2
+ <div v-if="definition" class="grid grid-cols-12 gap-4 formgrid p-fluid mt-2 mb-2">
3
3
  <AutoViewField v-for="property in propertiesList" :key="property"
4
4
  :value="value?.[property]"
5
5
  :definition="definition.properties[property]"
@@ -7,7 +7,7 @@
7
7
  :name="property"
8
8
  :rootValue="props.rootValue" :propName="(propName ? propName + '.' : '') + property"
9
9
  :i18n="i18n"
10
- class="col-12" />
10
+ class="col-span-12" />
11
11
  </div>
12
12
  </template>
13
13
 
package/front/src/pages/Editor.vue CHANGED
@@ -1,11 +1,11 @@
1
1
  <template>
2
- <div class="w-full lg:w-8 md:w-11">
2
+ <div class="w-full lg:w-8/12 md:w-11/12">
3
3
 
4
4
  <!-- <pre>{{ identifiers }}</pre>
5
5
  <pre>{{ modelDefinition.identifiers }}</pre>
6
6
  <pre>{{identifiersObject}}</pre>-->
7
7
 
8
- <div class="surface-card p-3 shadow-1 border-round">
8
+ <div class="bg-surface-0 dark:bg-surface-900 p-4 shadow-sm rounded-border">
9
9
 
10
10
  <ModelEditor :service="serviceName" :model="modelName" :identifiers="identifiersObject" draft
11
11
  @created="handleCreated"/>
package/front/src/pages/List.vue CHANGED
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <ModelList :service="serviceName" :model="modelName" class="w-full lg:w-8 md:w-11" />
2
+ <ModelList :service="serviceName" :model="modelName" class="w-full lg:w-8/12 md:w-11/12" />
3
3
  </template>
4
4
 
5
5
  <script setup>
package/front/src/pages/Models.vue CHANGED
@@ -1,13 +1,13 @@
1
1
  <template>
2
- <div class="w-full lg:w-8 md:w-11">
2
+ <div class="w-full lg:w-8/12 md:w-11/12">
3
3
  <div v-for="serviceWithModels of editableModelsByService"
4
- class="surface-card p-3 shadow-1 border-round">
4
+ class="bg-surface-0 dark:bg-surface-900 p-4 shadow-sm rounded-border">
5
5
  <div class="text-xl mb-2">
6
6
  Service <strong>{{ serviceWithModels.name }}</strong>
7
7
  </div>
8
- <div v-for="model of serviceWithModels.models" class="mb-2 ml-3">
9
- <div class="mb-1 flex flex-row flex-wrap align-items-center justify-content-between">
10
- <div class="text-xl flex flex-row align-items-center mr-4">
8
+ <div v-for="model of serviceWithModels.models" class="mb-2 ml-4">
9
+ <div class="mb-1 flex flex-row flex-wrap items-center justify-between">
10
+ <div class="text-xl flex flex-row items-center mr-6">
11
11
  <strong>{{ model.name }}</strong>
12
12
  <span class="mx-1">model</span>
13
13
  <div v-for="relation of model.relations">
package/front/src/pages/View.vue CHANGED
@@ -1,5 +1,5 @@
1
1
  <template>
2
- <div class="w-full lg:w-8 md:w-11">
2
+ <div class="w-full lg:w-8/12 md:w-11/12">
3
3
 
4
4
  <ModelView :service="serviceName" :model="modelName" :identifiers="identifiersObject" />
5
5
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@live-change/frontend-auto-form",
3
- "version": "0.9.32",
3
+ "version": "0.9.33",
4
4
  "scripts": {
5
5
  "memDev": "node server/start.js memDev --enableSessions --initScript ./init.js --dbAccess",
6
6
  "localDevInit": "rm tmp.db; lcli localDev --enableSessions --initScript ./init.js",
@@ -22,16 +22,16 @@
22
22
  "type": "module",
23
23
  "dependencies": {
24
24
  "@fortawesome/fontawesome-free": "^6.7.2",
25
- "@live-change/cli": "^0.9.32",
26
- "@live-change/dao": "^0.9.32",
27
- "@live-change/dao-vue3": "^0.9.32",
28
- "@live-change/dao-websocket": "^0.9.32",
29
- "@live-change/framework": "^0.9.32",
30
- "@live-change/image-frontend": "^0.9.32",
31
- "@live-change/image-service": "^0.9.32",
32
- "@live-change/session-service": "^0.9.32",
33
- "@live-change/vue3-components": "^0.9.32",
34
- "@live-change/vue3-ssr": "^0.9.32",
25
+ "@live-change/cli": "^0.9.33",
26
+ "@live-change/dao": "^0.9.33",
27
+ "@live-change/dao-vue3": "^0.9.33",
28
+ "@live-change/dao-websocket": "^0.9.33",
29
+ "@live-change/framework": "^0.9.33",
30
+ "@live-change/image-frontend": "^0.9.33",
31
+ "@live-change/image-service": "^0.9.33",
32
+ "@live-change/session-service": "^0.9.33",
33
+ "@live-change/vue3-components": "^0.9.33",
34
+ "@live-change/vue3-ssr": "^0.9.33",
35
35
  "@vueuse/core": "^12.3.0",
36
36
  "codeceptjs-assert": "^0.0.5",
37
37
  "compression": "^1.7.5",
@@ -41,7 +41,7 @@
41
41
  "pretty-bytes": "^6.1.1",
42
42
  "primeflex": "^3.3.1",
43
43
  "primeicons": "^7.0.0",
44
- "primevue": "^3.52.0",
44
+ "primevue": "^4.2.5",
45
45
  "rollup-plugin-node-builtins": "^2.1.2",
46
46
  "rollup-plugin-visualizer": "5.14.0",
47
47
  "serialize-javascript": "^6.0.2",
@@ -52,7 +52,7 @@
52
52
  "vue3-scroll-border": "0.1.6"
53
53
  },
54
54
  "devDependencies": {
55
- "@live-change/codeceptjs-helper": "^0.9.32",
55
+ "@live-change/codeceptjs-helper": "^0.9.33",
56
56
  "codeceptjs": "^3.6.10",
57
57
  "generate-password": "1.7.1",
58
58
  "playwright": "1.49.1",
@@ -63,5 +63,5 @@
63
63
  "author": "Michał Łaszczewski <michal@laszczewski.pl>",
64
64
  "license": "ISC",
65
65
  "description": "",
66
- "gitHead": "41022fc283020e2da3e82aa27274401052d2379a"
66
+ "gitHead": "c6eaa7764dc12b9489b74386b1227b71d0640e09"
67
67
  }