@raclettejs/workbench 0.1.7 → 0.1.8

package/CHANGELOG.md

@@ -7,6 +7,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+## [0.1.8] - 10.09.2025
+
+### QoL
+
+- dynamic form can now be navigated by the keyboard!
+
+### Versions
+
+- updated core
+
 ## [0.1.7] - 10.09.2025
 
 ### Style
@@ -15,7 +25,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Chore
 
-- skipped versions 0.1.5/0.1.6 to align versionnumbers with core
+- skipped versions 0.1.5/0.1.6 to align version numbers with core
 
 ## [0.1.4] - 10.09.2025
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raclettejs/workbench",
-  "version": "0.1.7",
+  "version": "0.1.8",
   "license": "MIT",
   "description": "racletteJS Workbench - used to configure your application, for dev and prod",
   "repository": "https://gitlab.com/raclettejs/workbench",
@@ -31,7 +31,7 @@
     ".": "./index.ts"
   },
   "dependencies": {
-    "@raclettejs/core": "^0.1.7"
+    "@raclettejs/core": "^0.1.8"
   },
   "devDependencies": {
     "@eslint/js": "^9.31.0",

package/plugins/pacifico__compositions/frontend/components/compositionConfiguration/CompositionConfiguration.vue

@@ -1,5 +1,6 @@
 <template>
   <StepNavigator
+    ref="stepNavigatorRef"
     :steps
     :is-saving="disabled"
     :show-save-button="isEditing"
@@ -22,6 +23,7 @@
                 : $t('workbench.compositionCreate.title')
             "
             route-back-interaction-link-id="compositionListInteractionLink"
+            @submit="onDynamicFormSubmit"
           />
         </div>
       </template>
@@ -61,6 +63,7 @@ const composition = defineModel<CompositionCreate | CompositionUpdate>({
   required: true,
 })
 
+const stepNavigatorRef = useTemplateRef("stepNavigatorRef")
 const dynamicFormRef = useTemplateRef("dynamicFormRef")
 
 const { t } = useI18n()
@@ -120,6 +123,8 @@ const validateConfigStep = (): boolean => {
   return true
 }
 
+const onDynamicFormSubmit = () => stepNavigatorRef.value?.nextStep()
+
 const steps = computed<Step[]>(() => [
   {
     id: "config",

package/plugins/pacifico__tags/frontend/components/TagConfiguration.vue

@@ -18,6 +18,7 @@
           : $t('workbench.tagCreate.title')
       "
       route-back-interaction-link-id="tagListInteractionLink"
+      @submit="$emit('save')"
     />
   </StepNavigator>
 </template>

package/plugins/pacifico__tags/frontend/widgets/TagCreateWidget.vue

@@ -2,6 +2,7 @@
   <TagConfiguration
     v-model="newTag"
     :disabled="isLoading"
+    @save="onSubmit"
     @save-and-finish="onSubmit"
   />
 </template>

package/plugins/pacifico__users/frontend/components/UserConfiguration.vue

@@ -18,6 +18,7 @@
           : $t('workbench.userCreate.title')
       "
       route-back-interaction-link-id="userListInteractionLink"
+      @submit="$emit('save')"
     />
   </StepNavigator>
 </template>

package/plugins/pacifico__users/frontend/widgets/UserCreateWidget.vue

@@ -3,6 +3,7 @@
   <UserConfiguration
     v-model="newUser"
     :disabled="isLoading"
+    @save="onSubmit"
     @save-and-finish="onSubmit"
   />
 </template>

package/services/frontend/src/app/components/dynamicForm/DynamicForm.vue

@@ -13,35 +13,37 @@
       </h1>
     </div>
 
-    <!-- body -->
-    <div class="tw:grid tw:gap-6">
-      <template v-for="(value, key) in props.data" :key="key">
-        <TextDivider v-if="'divider' in value" :label="value.divider" />
-
-        <DynamicInput
-          v-else
-          v-model="modelProxy[value.field]"
-          :input-type="value.inputType"
-          :value="value"
-          :disabled="!!disabled"
-          :error-message="getValidationError(value)"
-          @validate="validateField(value)"
-        />
-      </template>
-    </div>
+    <v-form @submit.prevent="onFormSubmit">
+      <!-- body -->
+      <div class="tw:grid tw:gap-6">
+        <template v-for="(value, key) in props.data" :key="key">
+          <TextDivider v-if="'divider' in value" :label="value.divider" />
+          <DynamicInput
+            v-else
+            v-model="modelProxy[value.field]"
+            :input-type="value.inputType"
+            :value="value"
+            :disabled="!!disabled"
+            :error-message="getValidationError(value)"
+            @validate="validateField(value)"
+          />
+        </template>
+      </div>
 
-    <!-- button area -->
-    <slot name="button-area-override">
-      <div
-        class="tw:mt-8 tw:flex tw:gap-4 tw:justify-end"
-        v-if="$slots?.['button-area']"
-      >
-        <slot name="button-area" v-bind="{ isValid, validateAllFields }" />
-        <!-- <v-btn color="primary" variant="outlined"> Validate Form </v-btn>
+      <!-- button area -->
+      <slot name="button-area-override">
+        <v-btn type="submit" class="tw:hidden!" />
+        <div
+          class="tw:mt-8 tw:flex tw:gap-4 tw:justify-end"
+          v-if="$slots?.['button-area']"
+        >
+          <slot name="button-area" v-bind="{ isValid, validateAllFields }" />
+          <!-- <v-btn color="primary" variant="outlined"> Validate Form </v-btn>
         <v-btn color="secondary" variant="outlined"> Reset Form </v-btn>
         <v-btn color="info" variant="outlined"> Show Form Data </v-btn> -->
-      </div>
-    </slot>
+        </div>
+      </slot>
+    </v-form>
   </div>
 </template>
 
@@ -66,6 +68,7 @@ const props = defineProps<{
 const emit = defineEmits<{
   (e: "update:modelValue", value: T): void
   (e: "validation-change", isValid: boolean): void
+  (e: "submit"): void
 }>()
 
 const { t } = useI18n()
@@ -187,6 +190,12 @@ const navigateBack = () => {
   }
 }
 
+const onFormSubmit = () => {
+  if (validateAllFields()) {
+    emit("submit")
+  }
+}
+
 watch(
   () => props.modelValue,
   () => {

package/services/frontend/src/orchestrator/LoginApp.vue

@@ -10,10 +10,7 @@
 </template>
 
 <script setup lang="ts">
-import {
-  userNotifier,
-  type LoginResponse,
-} from "@raclettejs/core/frontend"
+import { userNotifier, type LoginResponse } from "@raclettejs/core/frontend"
 import LoginScreen from "./components/LoginScreen.vue"
 import { SnackStack } from "@raclettejs/core/orchestrator"
 import { useTheme } from "vuetify"

package/services/frontend/src/orchestrator/components/InitProjectScreen.vue

@@ -1,5 +1,6 @@
 <template>
   <StepNavigator
+    ref="stepNavigator"
     class="tw:h-full init-screen-gradient"
     :steps
     padding-top
@@ -33,6 +34,7 @@
               :data="getCurrentInputFields(currentStep.id)"
               :validate-on-change="false"
               :title="$t('workbench.welcomeScreen.wizard.setupTitle')"
+              @submit="onDynamicFormSubmit"
             />
           </template>
 
@@ -164,6 +166,7 @@ import { userNotifier } from "@raclettejs/core/frontend"
 type StepKey = "confirm" | "application-name" | "register-admin"
 const emit = defineEmits<{ finish: [{ email: string; password: string }] }>()
 
+const stepNavigatorRef = useTemplateRef("stepNavigator")
 const dynamicFormRef = useTemplateRef("dynamicFormRef")
 
 const { initProject } = useWelcomeScreen()
@@ -205,6 +208,8 @@ const validateConfigStep = (): boolean => {
   return true
 }
 
+const onDynamicFormSubmit = () => stepNavigatorRef.value?.nextStep()
+
 const inputFieldsStepApplicationName = computed<
   DynamicFormItem<typeof newProject>[]
 >(() => [

package/services/frontend/src/orchestrator/components/layout/AppButton.vue

@@ -94,7 +94,7 @@
 </template>
 
 <script setup lang="ts">
-import { PropType } from "vue"
+import type { PropType } from "vue"
 import SvgButtonArrow from "./SvgButtonArrow.vue"
 
 withDefaults(

package/yarn.lock

@@ -351,10 +351,10 @@
   resolved "https://registry.yarnpkg.com/@pkgr/core/-/core-0.2.9.tgz#d229a7b7f9dac167a156992ef23c7f023653f53b"
   integrity sha512-QNqXyfVS2wm9hweSYD2O7F0G06uurj9kZ96TRQE5Y9hU7+tgdZwIkbAKc5Ocy1HxEY2kuDQa6cQ1WRs/O5LFKA==
 
-"@raclettejs/core@^0.1.7":
-  version "0.1.7"
-  resolved "https://registry.yarnpkg.com/@raclettejs/core/-/core-0.1.7.tgz#0cf18b3c1d2f32b1525300fd117ee79d9c304121"
-  integrity sha512-RJ06lirto8NaVBApiIykinvpdgKpIznx5ztPEmGhx/q+TeDpzfatD/Rkyd9dTJcOsWshGHMq7ZKT2BBVlC3lgw==
+"@raclettejs/core@^0.1.8":
+  version "0.1.8"
+  resolved "https://registry.yarnpkg.com/@raclettejs/core/-/core-0.1.8.tgz#950849fc6c7bbe9706b84f6a85f0fd169c35a2c3"
+  integrity sha512-VAnwN9Pn6dL0JIWbVP+Qrfp2HC9SVipQvgmOjrNkyuTBlOHhJZ8N7zuVlQSIDkWxKqhr4b2OPSm/oSw+Inuifg==
   dependencies:
     chalk "^5.4.1"
     chokidar "3.5.3"