@motor-cms/ui-admin 3.0.0 → 3.0.2

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 (3) hide show
  1. package/app/components/client/FrontendConfigSection.vue +62 -44
  2. package/app/components/client/GlobalComponentsSection.vue +29 -14
  3. package/package.json +2 -2
package/app/components/client/FrontendConfigSection.vue CHANGED
@@ -12,6 +12,19 @@ const props = defineProps<{
12
12
  logoSlugOptions: { label: string, value: string }[]
13
13
  }>()
14
14
 
15
+ const appSettings = useAppSettingsStore()
16
+ const isCompact = computed(() => appSettings.formLayout === 'compact')
17
+
18
+ const formFieldUi = computed(() => isCompact.value
19
+ ? { container: 'w-full' }
20
+ : { container: 'w-full max-w-2xl' }
21
+ )
22
+
23
+ const cardUi = computed(() => isCompact.value
24
+ ? { root: 'relative flex rounded-lg items-start', container: 'relative flex flex-col p-4 sm:p-6 gap-x-8 gap-y-4', wrapper: 'flex flex-col items-start', body: '' }
25
+ : undefined
26
+ )
27
+
15
28
  // ============================================
16
29
  // Dot-path helpers
17
30
  // ============================================
@@ -59,57 +72,62 @@ function optionsForField(fieldKey: string): { label: string, value: string }[] {
59
72
  </script>
60
73
 
61
74
  <template>
62
- <template
63
- v-for="group in groups"
64
- :key="group.key"
65
- >
66
- <UPageCard :title="group.label">
67
- <div class="space-y-4">
75
+ <div :class="isCompact ? 'grid grid-cols-2 gap-4' : 'flex flex-col gap-4'">
76
+ <UPageCard
77
+ v-for="(group, groupIdx) in groups"
78
+ :key="group.key"
79
+ :class="isCompact && groups.length % 2 === 1 && groupIdx === groups.length - 1 ? 'col-span-2' : ''"
80
+ :title="group.label"
81
+ :ui="cardUi"
82
+ >
83
+ <div :class="isCompact ? 'grid grid-cols-12 gap-x-4 gap-y-3' : 'space-y-4'">
68
84
  <template
69
85
  v-for="field in fieldsForGroup(group.key)"
70
86
  :key="field.key"
71
87
  >
72
- <UFormField
73
- :label="field.label"
74
- :name="field.key"
75
- :required="field.required"
76
- :error="errors[field.key]"
77
- orientation="horizontal"
78
- :ui="{ container: 'w-full max-w-2xl' }"
79
- >
80
- <!-- Toggle -->
81
- <USwitch
82
- v-if="field.input === 'toggle'"
83
- :model-value="(getNestedValue(state, field.key) as boolean) ?? false"
84
- :disabled="disabled"
85
- @update:model-value="setNestedValue(state, field.key, $event)"
86
- />
88
+ <div :class="isCompact ? 'col-span-12' : ''">
89
+ <UFormField
90
+ :label="field.label"
91
+ :name="field.key"
92
+ :required="field.required"
93
+ :error="errors[field.key]"
94
+ :orientation="isCompact ? 'vertical' : 'horizontal'"
95
+ :ui="formFieldUi"
96
+ >
97
+ <!-- Toggle -->
98
+ <USwitch
99
+ v-if="field.input === 'toggle'"
100
+ :model-value="(getNestedValue(state, field.key) as boolean) ?? false"
101
+ :disabled="disabled"
102
+ @update:model-value="setNestedValue(state, field.key, $event)"
103
+ />
87
104
 
88
- <!-- Select -->
89
- <USelectMenu
90
- v-else-if="field.input === 'select'"
91
- :model-value="(getNestedValue(state, field.key) as string | undefined)"
92
- :items="optionsForField(field.key)"
93
- value-key="value"
94
- label-key="label"
95
- :placeholder="field.label"
96
- :disabled="disabled"
97
- class="w-full"
98
- @update:model-value="setNestedValue(state, field.key, $event)"
99
- />
105
+ <!-- Select -->
106
+ <USelectMenu
107
+ v-else-if="field.input === 'select'"
108
+ :model-value="(getNestedValue(state, field.key) as string | undefined)"
109
+ :items="optionsForField(field.key)"
110
+ value-key="value"
111
+ label-key="label"
112
+ :placeholder="field.label"
113
+ :disabled="disabled"
114
+ class="w-full"
115
+ @update:model-value="setNestedValue(state, field.key, $event)"
116
+ />
100
117
 
101
- <!-- Text / Email / URL -->
102
- <UInput
103
- v-else
104
- :model-value="(getNestedValue(state, field.key) as string) ?? ''"
105
- :type="field.input === 'email' ? 'email' : field.input === 'url' ? 'url' : 'text'"
106
- :disabled="disabled"
107
- class="w-full"
108
- @update:model-value="setNestedValue(state, field.key, $event)"
109
- />
110
- </UFormField>
118
+ <!-- Text / Email / URL -->
119
+ <UInput
120
+ v-else
121
+ :model-value="(getNestedValue(state, field.key) as string) ?? ''"
122
+ :type="field.input === 'email' ? 'email' : field.input === 'url' ? 'url' : 'text'"
123
+ :disabled="disabled"
124
+ class="w-full"
125
+ @update:model-value="setNestedValue(state, field.key, $event)"
126
+ />
127
+ </UFormField>
128
+ </div>
111
129
  </template>
112
130
  </div>
113
131
  </UPageCard>
114
- </template>
132
+ </div>
115
133
  </template>
package/app/components/client/GlobalComponentsSection.vue CHANGED
@@ -17,13 +17,24 @@ const emit = defineEmits<{
17
17
  'footer-unlinked': [languageId: number]
18
18
  }>()
19
19
 
20
+ const appSettings = useAppSettingsStore()
21
+ const isCompact = computed(() => appSettings.formLayout === 'compact')
22
+
23
+ const cardUi = computed(() => isCompact.value
24
+ ? { root: 'relative flex rounded-lg items-start', container: 'relative flex flex-col p-4 sm:p-6 gap-x-8 gap-y-4', wrapper: 'flex flex-col items-start', body: '' }
25
+ : undefined
26
+ )
27
+
20
28
  function getFooterUuid(languageId: number): string | null {
21
29
  return props.footerMap?.[String(languageId)] ?? null
22
30
  }
23
31
  </script>
24
32
 
25
33
  <template>
26
- <UPageCard :title="t('motor-admin.clients.global_components.title')">
34
+ <UPageCard
35
+ :title="t('motor-admin.clients.global_components.title')"
36
+ :ui="cardUi"
37
+ >
27
38
  <div v-if="languagesLoading" class="flex items-center gap-2 text-muted py-4">
28
39
  <UIcon name="i-lucide-loader-2" class="size-4 animate-spin" />
29
40
  <span class="text-sm">{{ t('motor-core.global.loading') }}</span>
@@ -31,20 +42,24 @@ function getFooterUuid(languageId: number): string | null {
31
42
  <div v-else-if="languages.length === 0" class="text-sm text-muted py-4">
32
43
  {{ t('motor-admin.clients.global_components.no_languages') }}
33
44
  </div>
34
- <template v-else>
35
- <ClientFooterSlotCard
45
+ <div v-else :class="isCompact ? 'grid grid-cols-12 gap-x-4 gap-y-3' : 'space-y-4'">
46
+ <div
36
47
  v-for="lang in languages"
37
48
  :key="lang.id"
38
- :client-id="clientId"
39
- :client-name="clientName"
40
- :language-id="lang.id"
41
- :language-name="lang.name"
42
- :show-language-label="isMultiLanguage"
43
- :builder-page-uuid="getFooterUuid(lang.id)"
44
- :disabled="disabled"
45
- @linked="(uuid: string, pageId: number) => emit('footer-linked', lang.id, uuid, pageId)"
46
- @unlinked="emit('footer-unlinked', lang.id)"
47
- />
48
- </template>
49
+ :class="isCompact ? 'col-span-12' : ''"
50
+ >
51
+ <ClientFooterSlotCard
52
+ :client-id="clientId"
53
+ :client-name="clientName"
54
+ :language-id="lang.id"
55
+ :language-name="lang.name"
56
+ :show-language-label="isMultiLanguage"
57
+ :builder-page-uuid="getFooterUuid(lang.id)"
58
+ :disabled="disabled"
59
+ @linked="(uuid: string, pageId: number) => emit('footer-linked', lang.id, uuid, pageId)"
60
+ @unlinked="emit('footer-unlinked', lang.id)"
61
+ />
62
+ </div>
63
+ </div>
49
64
  </UPageCard>
50
65
  </template>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@motor-cms/ui-admin",
3
- "version": "3.0.0",
3
+ "version": "3.0.2",
4
4
  "type": "module",
5
5
  "main": "./nuxt.config.ts",
6
6
  "files": [
@@ -20,7 +20,7 @@
20
20
  "zod": "^4.0.0"
21
21
  },
22
22
  "peerDependencies": {
23
- "@motor-cms/ui-core": ">=3.0.0",
23
+ "@motor-cms/ui-core": ">=3.0.2",
24
24
  "nuxt": "^4.0.0",
25
25
  "vue": "^3.5.0"
26
26
  }