@raclettejs/workbench 0.1.6 → 0.1.8

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.
package/CHANGELOG.md CHANGED
@@ -7,11 +7,25 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
7
7
 
8
8
  ## [Unreleased]
9
9
 
10
- ## [0.1.5] + [0.1.6] - 11.09.2025
10
+ ## [0.1.8] - 10.09.2025
11
11
 
12
- ### Changed
12
+ ### QoL
13
13
 
14
- - raclette core update
14
+ - dynamic form can now be navigated by the keyboard!
15
+
16
+ ### Versions
17
+
18
+ - updated core
19
+
20
+ ## [0.1.7] - 10.09.2025
21
+
22
+ ### Style
23
+
24
+ - gave the default landingpage some love
25
+
26
+ ### Chore
27
+
28
+ - skipped versions 0.1.5/0.1.6 to align version numbers with core
15
29
 
16
30
  ## [0.1.4] - 10.09.2025
17
31
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@raclettejs/workbench",
3
- "version": "0.1.6",
3
+ "version": "0.1.8",
4
4
  "license": "MIT",
5
5
  "description": "racletteJS Workbench - used to configure your application, for dev and prod",
6
6
  "repository": "https://gitlab.com/raclettejs/workbench",
@@ -31,7 +31,7 @@
31
31
  ".": "./index.ts"
32
32
  },
33
33
  "dependencies": {
34
- "@raclettejs/core": "^0.1.6"
34
+ "@raclettejs/core": "^0.1.8"
35
35
  },
36
36
  "devDependencies": {
37
37
  "@eslint/js": "^9.31.0",
@@ -1,5 +1,6 @@
1
1
  <template>
2
2
  <StepNavigator
3
+ ref="stepNavigatorRef"
3
4
  :steps
4
5
  :is-saving="disabled"
5
6
  :show-save-button="isEditing"
@@ -22,6 +23,7 @@
22
23
  : $t('workbench.compositionCreate.title')
23
24
  "
24
25
  route-back-interaction-link-id="compositionListInteractionLink"
26
+ @submit="onDynamicFormSubmit"
25
27
  />
26
28
  </div>
27
29
  </template>
@@ -61,6 +63,7 @@ const composition = defineModel<CompositionCreate | CompositionUpdate>({
61
63
  required: true,
62
64
  })
63
65
 
66
+ const stepNavigatorRef = useTemplateRef("stepNavigatorRef")
64
67
  const dynamicFormRef = useTemplateRef("dynamicFormRef")
65
68
 
66
69
  const { t } = useI18n()
@@ -120,6 +123,8 @@ const validateConfigStep = (): boolean => {
120
123
  return true
121
124
  }
122
125
 
126
+ const onDynamicFormSubmit = () => stepNavigatorRef.value?.nextStep()
127
+
123
128
  const steps = computed<Step[]>(() => [
124
129
  {
125
130
  id: "config",
@@ -18,6 +18,7 @@
18
18
  : $t('workbench.tagCreate.title')
19
19
  "
20
20
  route-back-interaction-link-id="tagListInteractionLink"
21
+ @submit="$emit('save')"
21
22
  />
22
23
  </StepNavigator>
23
24
  </template>
@@ -2,6 +2,7 @@
2
2
  <TagConfiguration
3
3
  v-model="newTag"
4
4
  :disabled="isLoading"
5
+ @save="onSubmit"
5
6
  @save-and-finish="onSubmit"
6
7
  />
7
8
  </template>
@@ -18,6 +18,7 @@
18
18
  : $t('workbench.userCreate.title')
19
19
  "
20
20
  route-back-interaction-link-id="userListInteractionLink"
21
+ @submit="$emit('save')"
21
22
  />
22
23
  </StepNavigator>
23
24
  </template>
@@ -3,6 +3,7 @@
3
3
  <UserConfiguration
4
4
  v-model="newUser"
5
5
  :disabled="isLoading"
6
+ @save="onSubmit"
6
7
  @save-and-finish="onSubmit"
7
8
  />
8
9
  </template>
@@ -13,35 +13,37 @@
13
13
  </h1>
14
14
  </div>
15
15
 
16
- <!-- body -->
17
- <div class="tw:grid tw:gap-6">
18
- <template v-for="(value, key) in props.data" :key="key">
19
- <TextDivider v-if="'divider' in value" :label="value.divider" />
20
-
21
- <DynamicInput
22
- v-else
23
- v-model="modelProxy[value.field]"
24
- :input-type="value.inputType"
25
- :value="value"
26
- :disabled="!!disabled"
27
- :error-message="getValidationError(value)"
28
- @validate="validateField(value)"
29
- />
30
- </template>
31
- </div>
16
+ <v-form @submit.prevent="onFormSubmit">
17
+ <!-- body -->
18
+ <div class="tw:grid tw:gap-6">
19
+ <template v-for="(value, key) in props.data" :key="key">
20
+ <TextDivider v-if="'divider' in value" :label="value.divider" />
21
+ <DynamicInput
22
+ v-else
23
+ v-model="modelProxy[value.field]"
24
+ :input-type="value.inputType"
25
+ :value="value"
26
+ :disabled="!!disabled"
27
+ :error-message="getValidationError(value)"
28
+ @validate="validateField(value)"
29
+ />
30
+ </template>
31
+ </div>
32
32
 
33
- <!-- button area -->
34
- <slot name="button-area-override">
35
- <div
36
- class="tw:mt-8 tw:flex tw:gap-4 tw:justify-end"
37
- v-if="$slots?.['button-area']"
38
- >
39
- <slot name="button-area" v-bind="{ isValid, validateAllFields }" />
40
- <!-- <v-btn color="primary" variant="outlined"> Validate Form </v-btn>
33
+ <!-- button area -->
34
+ <slot name="button-area-override">
35
+ <v-btn type="submit" class="tw:hidden!" />
36
+ <div
37
+ class="tw:mt-8 tw:flex tw:gap-4 tw:justify-end"
38
+ v-if="$slots?.['button-area']"
39
+ >
40
+ <slot name="button-area" v-bind="{ isValid, validateAllFields }" />
41
+ <!-- <v-btn color="primary" variant="outlined"> Validate Form </v-btn>
41
42
  <v-btn color="secondary" variant="outlined"> Reset Form </v-btn>
42
43
  <v-btn color="info" variant="outlined"> Show Form Data </v-btn> -->
43
- </div>
44
- </slot>
44
+ </div>
45
+ </slot>
46
+ </v-form>
45
47
  </div>
46
48
  </template>
47
49
 
@@ -66,6 +68,7 @@ const props = defineProps<{
66
68
  const emit = defineEmits<{
67
69
  (e: "update:modelValue", value: T): void
68
70
  (e: "validation-change", isValid: boolean): void
71
+ (e: "submit"): void
69
72
  }>()
70
73
 
71
74
  const { t } = useI18n()
@@ -187,6 +190,12 @@ const navigateBack = () => {
187
190
  }
188
191
  }
189
192
 
193
+ const onFormSubmit = () => {
194
+ if (validateAllFields()) {
195
+ emit("submit")
196
+ }
197
+ }
198
+
190
199
  watch(
191
200
  () => props.modelValue,
192
201
  () => {
@@ -10,10 +10,7 @@
10
10
  </template>
11
11
 
12
12
  <script setup lang="ts">
13
- import {
14
- userNotifier,
15
- type LoginResponse,
16
- } from "@raclettejs/core/frontend"
13
+ import { userNotifier, type LoginResponse } from "@raclettejs/core/frontend"
17
14
  import LoginScreen from "./components/LoginScreen.vue"
18
15
  import { SnackStack } from "@raclettejs/core/orchestrator"
19
16
  import { useTheme } from "vuetify"
@@ -1,30 +1,40 @@
1
1
  <template>
2
- <div class="tw:p-4">
3
- <h1 v-html="$t('workbench.welcomeScreen.title')"></h1>
2
+ <v-container class="tw:py-8">
3
+ <v-row>
4
+ <v-col cols="12">
5
+ <v-card flat>
6
+ <v-card-title>
7
+ 🧀
8
+ {{ $t("workbench.welcomeScreen.title") }}
9
+ </v-card-title>
10
+ </v-card>
11
+ <v-card-text>
12
+ <v-list density="compact" disabled>
13
+ <v-list-subheader
14
+ ><h3>
15
+ {{ $t("workbench.welcomeScreen.whatIsWhat") }}
16
+ </h3></v-list-subheader
17
+ >
4
18
 
5
- <v-list density="compact" disabled>
6
- <v-list-subheader
7
- ><h3>
8
- {{ $t("workbench.welcomeScreen.whatIsWhat") }}
9
- </h3></v-list-subheader
10
- >
19
+ <v-list-item
20
+ v-for="(item, i) in whatIsWhatItems"
21
+ :key="i"
22
+ :value="item"
23
+ color="primary"
24
+ >
25
+ <template #prepend>
26
+ <v-icon :icon="item.icon"></v-icon>
27
+ </template>
11
28
 
12
- <v-list-item
13
- v-for="(item, i) in whatIsWhatItems"
14
- :key="i"
15
- :value="item"
16
- color="primary"
17
- >
18
- <template #prepend>
19
- <v-icon :icon="item.icon"></v-icon>
20
- </template>
21
-
22
- <v-list-item-title>
23
- {{ $t("workbench.welcomeScreen." + item.i18nKey) }}
24
- </v-list-item-title>
25
- </v-list-item>
26
- </v-list>
27
- </div>
29
+ <v-list-item-title>
30
+ {{ $t("workbench.welcomeScreen." + item.i18nKey) }}
31
+ </v-list-item-title>
32
+ </v-list-item>
33
+ </v-list>
34
+ </v-card-text>
35
+ </v-col>
36
+ </v-row>
37
+ </v-container>
28
38
  </template>
29
39
 
30
40
  <script setup lang="ts">
@@ -1,5 +1,6 @@
1
1
  <template>
2
2
  <StepNavigator
3
+ ref="stepNavigator"
3
4
  class="tw:h-full init-screen-gradient"
4
5
  :steps
5
6
  padding-top
@@ -33,6 +34,7 @@
33
34
  :data="getCurrentInputFields(currentStep.id)"
34
35
  :validate-on-change="false"
35
36
  :title="$t('workbench.welcomeScreen.wizard.setupTitle')"
37
+ @submit="onDynamicFormSubmit"
36
38
  />
37
39
  </template>
38
40
 
@@ -164,6 +166,7 @@ import { userNotifier } from "@raclettejs/core/frontend"
164
166
  type StepKey = "confirm" | "application-name" | "register-admin"
165
167
  const emit = defineEmits<{ finish: [{ email: string; password: string }] }>()
166
168
 
169
+ const stepNavigatorRef = useTemplateRef("stepNavigator")
167
170
  const dynamicFormRef = useTemplateRef("dynamicFormRef")
168
171
 
169
172
  const { initProject } = useWelcomeScreen()
@@ -205,6 +208,8 @@ const validateConfigStep = (): boolean => {
205
208
  return true
206
209
  }
207
210
 
211
+ const onDynamicFormSubmit = () => stepNavigatorRef.value?.nextStep()
212
+
208
213
  const inputFieldsStepApplicationName = computed<
209
214
  DynamicFormItem<typeof newProject>[]
210
215
  >(() => [
@@ -94,7 +94,7 @@
94
94
  </template>
95
95
 
96
96
  <script setup lang="ts">
97
- import { PropType } from "vue"
97
+ import type { PropType } from "vue"
98
98
  import SvgButtonArrow from "./SvgButtonArrow.vue"
99
99
 
100
100
  withDefaults(
package/yarn.lock CHANGED
@@ -351,10 +351,10 @@
351
351
  resolved "https://registry.yarnpkg.com/@pkgr/core/-/core-0.2.9.tgz#d229a7b7f9dac167a156992ef23c7f023653f53b"
352
352
  integrity sha512-QNqXyfVS2wm9hweSYD2O7F0G06uurj9kZ96TRQE5Y9hU7+tgdZwIkbAKc5Ocy1HxEY2kuDQa6cQ1WRs/O5LFKA==
353
353
 
354
- "@raclettejs/core@^0.1.6":
355
- version "0.1.6"
356
- resolved "https://registry.yarnpkg.com/@raclettejs/core/-/core-0.1.6.tgz#2358a830ca610e6b3026abb9c153b52bfe872387"
357
- integrity sha512-X2BCuHgqLxUSvCMnLOnpi9iZTRE3zjVD4o6JFuyOBzxlmOqKp2p6VKOvVD3+5AO8eHz4lUxCUg+XZjTKF3mVXQ==
354
+ "@raclettejs/core@^0.1.8":
355
+ version "0.1.8"
356
+ resolved "https://registry.yarnpkg.com/@raclettejs/core/-/core-0.1.8.tgz#950849fc6c7bbe9706b84f6a85f0fd169c35a2c3"
357
+ integrity sha512-VAnwN9Pn6dL0JIWbVP+Qrfp2HC9SVipQvgmOjrNkyuTBlOHhJZ8N7zuVlQSIDkWxKqhr4b2OPSm/oSw+Inuifg==
358
358
  dependencies:
359
359
  chalk "^5.4.1"
360
360
  chokidar "3.5.3"