@raclettejs/workbench 0.1.11 → 0.1.12

package/CHANGELOG.md

@@ -7,7 +7,26 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
-## [0.1.11] - 19.09.2025 <a href="https://gitlab.com/raclettejs/core/-/compare/v0.1.0...v0.1.11" target="_blank" rel="noopener"><b>Overview of all changes</b></a>
+## [0.1.11] - 19.09.2025 <a href="https://gitlab.com/raclettejs/workbench/-/compare/v0.1.11...v0.1.12" target="_blank" rel="noopener"><b>Overview of all changes</b></a>
+
+### Updated
+
+- updated versions to latest core
+
+### Added
+
+- Added color column to tagList
+- new field "slotLayout" for composition
+- default set of settings per widget – temporary solution
+- added datePicker option for dynamic form renderer
+- added objectList for dynamic form renderer
+
+### Fixed
+
+- removed v-container from welcome screen
+- fixed i18n
+
+## [0.1.11] - 19.09.2025 <a href="https://gitlab.com/raclettejs/workbench/-/compare/v0.1.10...v0.1.11" target="_blank" rel="noopener"><b>Overview of all changes</b></a>
 
 ### Security
 

package/i18n/de-DE.json

@@ -77,7 +77,8 @@
       },
       "divider": {
         "general": "Allgemein",
-        "navigation": "Navigation"
+        "navigation": "Navigation",
+        "styling": "Styling"
       },
       "title": {
         "title": "Bezeichnung / Titel",
@@ -94,6 +95,10 @@
       "pathname": {
         "title": "Pfadname",
         "description": "Beschreibt den technischen Titel, der entweder als URL-Pfad, Query-Parameter und andersweitige Referenzierung genutzt wird. Darf keine Leerzeichen enthalten."
+      },
+      "slotLayout": {
+        "title": "Slot Layout",
+        "description": "Beschreibt das Zusammenspiel der einzelnen Widgets auf der Seite (Abstände sowie Rahmen pro Widget)"
       }
     },
     "interactionLinkList": {
@@ -193,6 +198,7 @@
       "dataArticle": "den",
       "tableHeaders": {
         "title": "Bezeichnung",
+        "color": "Farbe",
         "type": "Typ",
         "tags": "Tags",
         "updatedAt": "Zuletzt geändert"

package/i18n/en-EU.json

@@ -7,13 +7,13 @@
       "save_finish": "Save & Finish"
     },
     "loginScreen": {
-      "title": "Welcome to the Raclette Workspace",
+      "title": "Welcome to the Raclette Workbench!",
       "eMail": "Email",
       "password": "Password",
       "login": "Login"
     },
     "welcomeScreen": {
-      "title": "Welcome to the Raclette Workspace!",
+      "title": "Welcome to the Raclette Workbench!",
       "whatIsWhat": "What is what?",
       "compositionInfo": "Create compositions to define the layout of your pages or modals",
       "interactionLinkInfo": "Create InteractionLinks to define how users can access pages or modals",
@@ -77,7 +77,8 @@
       },
       "divider": {
         "general": "General",
-        "navigation": "Navigation"
+        "navigation": "Navigation",
+        "styling": "Styling"
       },
       "title": {
         "title": "Title",
@@ -94,6 +95,10 @@
       "pathname": {
         "title": "Pathname",
         "description": "Describes the technical title used as a URL path, query parameter, or other reference. Must not contain spaces."
+      },
+      "slotLayout": {
+        "title": "Slot Layout",
+        "description": "Describes the interaction of the individual widgets on the page (spacing and borders per widget)"
       }
     },
     "interactionLinkList": {
@@ -193,6 +198,7 @@
       "dataArticle": "the",
       "tableHeaders": {
         "title": "Title",
+        "color": "Color",
         "type": "Type",
         "tags": "Tags",
         "updatedAt": "Last Modified"

package/i18n/sk-SK.json

@@ -7,13 +7,13 @@
       "save_finish": "Uložiť a dokončiť"
     },
     "loginScreen": {
-      "title": "Vitajte v Raclette Workspace",
+      "title": "Vitajte v Raclette Workbench",
       "eMail": "Email",
       "password": "Heslo",
       "login": "Prihlásiť sa"
     },
     "welcomeScreen": {
-      "title": "Vitajte v Raclette Workspace!",
+      "title": "Vitajte v Raclette Workbench!",
       "whatIsWhat": "Čo je čo?",
       "compositionInfo": "Vytvorte kompozície na definovanie rozloženia vašich stránok alebo modálov",
       "interactionLinkInfo": "Vytvorte InteractionLinks na definovanie, ako môžu používatelia pristupovať k stránkam alebo modálom",
@@ -193,6 +193,7 @@
       "dataArticle": "",
       "tableHeaders": {
         "title": "Názov",
+        "color": "Farba",
         "type": "Typ",
         "tags": "Značky",
         "updatedAt": "Naposledy upravené"
@@ -242,4 +243,4 @@
       }
     }
   }
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raclettejs/workbench",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "license": "MIT",
   "description": "racletteJS Workbench - used to configure your application, for dev and prod",
   "repository": "https://gitlab.com/raclettejs/workbench",
@@ -31,13 +31,13 @@
     ".": "./index.ts"
   },
   "dependencies": {
-    "@raclettejs/core": "0.1.11",
+    "@raclettejs/core": "0.1.12",
     "three": "0.180.0",
     "vanta": "0.5.24"
   },
   "devDependencies": {
     "@eslint/js": "9.35.0",
-    "@raclettejs/types": "0.1.11",
+    "@raclettejs/types": "0.1.12",
     "@sinclair/typebox": "0.34.41",
     "@types/ramda": "0.31.1",
     "@vueuse/core": "13.9.0",
@@ -62,5 +62,6 @@
     "vue-eslint-parser": "10.2.0",
     "vue-i18n": "11.1.12",
     "vuetify": "3.10.2"
-  }
+  },
+  "packageManager": "yarn@1.22.22+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610"
 }

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

@@ -110,6 +110,16 @@ const inputFields = computed<
       required: true,
     },
   },
+  { divider: t("workbench.compositionConfiguration.divider.styling") },
+  {
+    title: t("workbench.compositionConfiguration.slotLayout.title"),
+    description: t("workbench.compositionConfiguration.slotLayout.description"),
+    inputType: "select",
+    field: "slotLayout",
+    selectItems: ["default", "spaced", "card", "border", "full"],
+    prependIcon: "view-grid",
+    default: "default",
+  },
 ])
 
 const validateConfigStep = (): boolean => {

package/plugins/pacifico__compositions/frontend/components/compositionConfiguration/widgetsLayout/WidgetSettings.vue

@@ -69,9 +69,19 @@ const { findWidgetByName } = useWidgets()
 
 const widget = computed(() => findWidgetByName(selectedWigdetModel.value.name))
 
-const configurableParameteters = computed(
-  () => widget.value?.configurableParameters,
-)
+// TOOD: find more suitable place, should be affected by theme
+const defaultConfigurabelParameters = {
+  allowPaddingOverride: {
+    type: Boolean,
+    default: true,
+    inputType: "checkbox",
+  },
+}
+
+const configurableParameteters = computed(() => ({
+  ...defaultConfigurabelParameters,
+  ...widget.value?.configurableParameters,
+}))
 
 const getConfigValue = (key: string) => {
   const config = selectedWigdetModel.value.config

package/plugins/pacifico__compositions/frontend/widgets/CompositionCreateWidget.vue

@@ -35,6 +35,7 @@ const newComposition = ref<CompositionCreate>({
     en: "",
   },
   status: "inProgress",
+  slotLayout: "default",
   widgetsLayout: [[]],
 })
 

package/plugins/pacifico__interactionLinks/frontend/components/InteractionLinkConfiguration.vue

@@ -35,6 +35,7 @@ import { Step } from "@app/components/stepNavigator/StepNavigatorTypes"
 import StepNavigator from "@app/components/stepNavigator/StepNavigator.vue"
 import {
   DEFAULT_SLOT_NAME,
+  DEFAULT_INLINE_SLOT_NAME,
   DEFAULT_MODAL_SLOT_NAME,
 } from "@raclettejs/core/orchestrator/router/routeParserHelper"
 
@@ -93,7 +94,11 @@ const inputFields = computed<
     ),
     inputType: "select",
     field: "slotType",
-    selectItems: [DEFAULT_SLOT_NAME, DEFAULT_MODAL_SLOT_NAME],
+    selectItems: [
+      DEFAULT_SLOT_NAME,
+      DEFAULT_MODAL_SLOT_NAME,
+      DEFAULT_INLINE_SLOT_NAME,
+    ],
     prependIcon: "dock-window",
     validation: {
       required: true,

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

@@ -26,6 +26,10 @@ const headers = computed<{ title: string; key: keyof Tag }[]>(() => [
     title: t("workbench.tagList.tableHeaders.title"),
     key: "title",
   },
+  {
+    title: t("workbench.tagList.tableHeaders.color"),
+    key: "color",
+  },
   {
     title: t("workbench.tagList.tableHeaders.type"),
     key: "type",

package/services/frontend/src/app/components/BaseDataTable.vue

@@ -48,6 +48,16 @@
       :loading="loading"
       @click:row="handleRowClick"
     >
+      <template
+        #item.color="{ item }"
+        v-if="!customSlots.includes('item.color')"
+      >
+        <div class="tw:flex tw:gap-2" v-if="item.color?.length">
+          <v-chip :color="item.color" label variant="outlined" size="small">
+            {{ item.color }}
+          </v-chip>
+        </div>
+      </template>
       <!-- Built-in tags column -->
       <template #item.tags="{ item }" v-if="!customSlots.includes('item.tags')">
         <div class="tw:flex tw:gap-2" v-if="item.tags?.length">

package/services/frontend/src/app/components/dynamicForm/DynamicFormTypes.ts

@@ -8,6 +8,7 @@ export type DynamicInputType =
   | "triggers"
   | "record"
   | "list"
+  | "objectList"
   | "text"
   | "textarea"
   | "number"
@@ -33,7 +34,6 @@ export interface InputAttributes {
   appendInnerIcon?: MdiIcon
   prefix?: string
   suffix?: string
-  // click handlers
   onClickPrepend?: (event: PointerEvent) => void
   onClickPrependInner?: (event: PointerEvent) => void
   onClickAppend?: (event: PointerEvent) => void
@@ -49,7 +49,11 @@ export interface ValidationProps {
   minLength?: number
   maxLength?: number
   pattern?: RegExp
-  customValidator?: (value: any) => string | null // return error message or null if valid
+  customValidator?: (value: any) => string | null
+}
+
+export interface ObjectListProps {
+  fields?: DynamicFormField<any>[]
 }
 
 export interface DynamicFormDivider {
@@ -58,6 +62,7 @@ export interface DynamicFormDivider {
 
 export type DynamicFormField<T> = DynamicFormItemBase<T> &
   InputAttributes &
-  SelectionProps & { validation?: ValidationProps }
+  SelectionProps &
+  ObjectListProps & { validation?: ValidationProps }
 
 export type DynamicFormItem<T> = DynamicFormField<T> | DynamicFormDivider

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

@@ -82,6 +82,15 @@
         />
       </template>
 
+      <template v-else-if="inputType === 'objectList'">
+        <ObjectListInput
+          v-model="objectArrayModel"
+          :fields="value.fields"
+          :disabled="!!disabled"
+          @validate="$emit('validate')"
+        />
+      </template>
+
       <template v-else-if="inputType === 'triggers'">
         <TriggerInput
           v-model="triggerModel"
@@ -212,6 +221,7 @@ import { computed, useAttrs, useId, WritableComputedRef } from "vue"
 import LocalizedInput from "./typedInputs/LocalizedInput.vue"
 import CompositionInput from "./typedInputs/CompositionInput.vue"
 import ListInput from "./typedInputs/ListInput.vue"
+import ObjectListInput from "./ObjectListInput.vue"
 import PasswordInput from "./typedInputs/PasswordInput.vue"
 import RecordInput from "./typedInputs/RecordInput.vue"
 import TagsInput from "./typedInputs/TagsInput.vue"
@@ -240,6 +250,7 @@ type DynamicModelType =
   | string[]
   | number
   | Record<string, string>
+  | Record<string, any>[]
   | Trigger[]
   | boolean
 
@@ -252,7 +263,6 @@ const attrs = useAttrs()
 
 const inputId = computed(() => `dynamic-input-${id}`)
 
-// make dynamic typed model to true type
 const createTypedModel = <T extends DynamicModelType>(
   types: DynamicInputType[],
 ): WritableComputedRef<T> =>
@@ -286,6 +296,8 @@ const stringArrayModel = createTypedModel<string[]>([
   "list",
 ])
 
+const objectArrayModel = createTypedModel<Record<string, any>[]>(["objectList"])
+
 const recordModel = createTypedModel<Record<string, string>>([
   "record",
   "localized",
@@ -329,7 +341,6 @@ const additionalInputBindings = computed(() => {
     appendInnerIcon: appendInnerIcon ? `mdi-${appendInnerIcon}` : undefined,
   }
 
-  // add click handlers if they exist
   if (onClickPrepend) result["onClick:prepend"] = onClickPrepend
   if (onClickPrependInner) result["onClick:prependInner"] = onClickPrependInner
   if (onClickAppend) result["onClick:append"] = onClickAppend

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

@@ -0,0 +1,193 @@
+<template>
+  <div class="tw:grid tw:gap-4">
+    <v-expansion-panels v-model="openPanels" multiple>
+      <v-expansion-panel
+        v-for="(item, index) in internalItems"
+        :key="index"
+        :value="index"
+      >
+        <v-expansion-panel-title class="tw:flex tw:items-center tw:gap-2">
+          <span class="tw:flex-1">
+            {{ getPanelTitle(item, index) }}
+          </span>
+          <v-btn
+            icon="mdi-minus"
+            size="small"
+            variant="text"
+            :disabled="disabled"
+            @click.stop="removeItem(index)"
+          />
+        </v-expansion-panel-title>
+
+        <v-expansion-panel-text>
+          <div class="tw:grid tw:gap-4 tw:pt-4">
+            <DynamicInput
+              v-for="field in fields"
+              :key="field.field as string"
+              v-model="internalItems[index][field.field]"
+              :input-type="field.inputType"
+              :value="field"
+              :disabled="disabled"
+              @update:model-value="onItemChange(index)"
+              @validate="$emit('validate')"
+            />
+          </div>
+        </v-expansion-panel-text>
+      </v-expansion-panel>
+    </v-expansion-panels>
+
+    <v-btn
+      v-if="canAddNewItem"
+      color="primary"
+      variant="outlined"
+      prepend-icon="mdi-plus"
+      :disabled="disabled"
+      @click="addNewItem"
+    >
+      Add Entry
+    </v-btn>
+  </div>
+</template>
+
+<script setup lang="ts" generic="T extends Record<string, any>">
+import { ref, watch, computed } from "vue"
+import DynamicInput from "./DynamicInput.vue"
+import type { DynamicFormField } from "./DynamicFormTypes"
+
+const props = defineProps<{
+  fields?: DynamicFormField<T>[]
+  disabled?: boolean
+}>()
+
+defineEmits<{
+  validate: []
+}>()
+
+const modelValue = defineModel<T[]>({ required: true, default: () => [] })
+
+const internalItems = ref<T[]>([])
+const openPanels = ref<number[]>([0])
+
+const initializeEmptyItem = (): T => {
+  const item: any = {}
+  props.fields?.forEach((field) => {
+    const fieldKey = field.field as string
+
+    switch (field.inputType) {
+      case "text":
+      case "textarea":
+      case "select":
+      case "password":
+      case "composition":
+      case "color":
+      case "user":
+        item[fieldKey] = ""
+        break
+      case "number":
+        item[fieldKey] = 0
+        break
+      case "checkbox":
+      case "switch":
+        item[fieldKey] = false
+        break
+      case "tags":
+      case "multiselect":
+      case "list":
+      case "objectList":
+        item[fieldKey] = []
+        break
+      case "record":
+      case "localized":
+        item[fieldKey] = {}
+        break
+      case "triggers":
+        item[fieldKey] = []
+        break
+      default:
+        item[fieldKey] = null
+    }
+  })
+  return item as T
+}
+
+const isItemEmpty = (item: T): boolean => {
+  return !props.fields?.some((field) => {
+    const value = item[field.field]
+
+    if (value === null || value === undefined) return false
+    if (typeof value === "string") return value.trim() !== ""
+    if (Array.isArray(value)) return value.length > 0
+    if (typeof value === "object") return Object.keys(value).length > 0
+    if (typeof value === "boolean") return value === true
+    if (typeof value === "number") return value !== 0
+
+    return false
+  })
+}
+
+const getPanelTitle = (item: T, index: number): string => {
+  if (!props.fields || props.fields.length === 0) {
+    return `Entry ${index + 1}`
+  }
+
+  const firstField = props.fields[0]
+  const firstValue = item[firstField.field]
+
+  if (firstValue && String(firstValue).trim() !== "") {
+    return String(firstValue)
+  }
+
+  return `Entry ${index + 1}`
+}
+
+const syncToModelValue = () => {
+  const nonEmptyItems = internalItems.value.filter((item) => !isItemEmpty(item))
+  modelValue.value = nonEmptyItems
+}
+
+const onItemChange = (index: number) => {
+  syncToModelValue()
+}
+
+const addNewItem = () => {
+  const newItem = initializeEmptyItem()
+  internalItems.value.push(newItem)
+  openPanels.value.push(internalItems.value.length - 1)
+}
+
+const removeItem = (index: number) => {
+  internalItems.value.splice(index, 1)
+  openPanels.value = openPanels.value
+    .filter((panelIndex) => panelIndex !== index)
+    .map((panelIndex) => (panelIndex > index ? panelIndex - 1 : panelIndex))
+
+  syncToModelValue()
+
+  if (internalItems.value.length === 0) {
+    internalItems.value.push(initializeEmptyItem())
+    openPanels.value = [0]
+  }
+}
+
+const canAddNewItem = computed(() => {
+  if (internalItems.value.length === 0) return true
+  const lastItem = internalItems.value[internalItems.value.length - 1]
+  return !isItemEmpty(lastItem)
+})
+
+watch(
+  () => modelValue.value,
+  (newVal) => {
+    if (newVal.length === 0 && internalItems.value.length === 0) {
+      internalItems.value = [initializeEmptyItem()]
+    } else if (newVal.length > 0) {
+      internalItems.value = [...newVal]
+    }
+  },
+  { immediate: true, deep: true },
+)
+
+if (internalItems.value.length === 0) {
+  internalItems.value.push(initializeEmptyItem())
+}
+</script>

package/services/frontend/src/app/components/dynamicForm/typedInputs/UserInput.vue

@@ -51,7 +51,6 @@ const getEmail = (user?: User) => {
   return t("workbench.dynamicInputs.user.placeholder")
 }
 const getUserFullName = (user?: User) => {
-  debugger
   if (user) {
     const { email } = useUserHelper(user)
 

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

@@ -1,40 +1,38 @@
 <template>
-  <v-container class="tw:py-8">
-    <v-row>
-      <v-col cols="12">
-        <v-card flat>
-          <v-card-title>
-            🧀
-            {{ $t("workbench.welcomeScreen.title") }}
-          </v-card-title>
-        </v-card>
-        <v-card-text>
-          <v-list density="compact" disabled>
-            <v-list-subheader
-              ><h3>
-                {{ $t("workbench.welcomeScreen.whatIsWhat") }}
-              </h3></v-list-subheader
-            >
+  <v-row>
+    <v-col cols="12">
+      <v-card flat>
+        <v-card-title>
+          🧀
+          {{ $t("workbench.welcomeScreen.title") }}
+        </v-card-title>
+      </v-card>
+      <v-card-text>
+        <v-list density="compact" disabled>
+          <v-list-subheader
+            ><h3>
+              {{ $t("workbench.welcomeScreen.whatIsWhat") }}
+            </h3></v-list-subheader
+          >
 
-            <v-list-item
-              v-for="(item, i) in whatIsWhatItems"
-              :key="i"
-              :value="item"
-              color="primary"
-            >
-              <template #prepend>
-                <v-icon :icon="item.icon"></v-icon>
-              </template>
+          <v-list-item
+            v-for="(item, i) in whatIsWhatItems"
+            :key="i"
+            :value="item"
+            color="primary"
+          >
+            <template #prepend>
+              <v-icon :icon="item.icon"></v-icon>
+            </template>
 
-              <v-list-item-title>
-                {{ $t("workbench.welcomeScreen." + item.i18nKey) }}
-              </v-list-item-title>
-            </v-list-item>
-          </v-list>
-        </v-card-text>
-      </v-col>
-    </v-row>
-  </v-container>
+            <v-list-item-title>
+              {{ $t("workbench.welcomeScreen." + item.i18nKey) }}
+            </v-list-item-title>
+          </v-list-item>
+        </v-list>
+      </v-card-text>
+    </v-col>
+  </v-row>
 </template>
 
 <script setup lang="ts">

package/yarn.lock

@@ -476,10 +476,10 @@
   resolved "https://registry.yarnpkg.com/@pkgr/core/-/core-0.2.9.tgz#d229a7b7f9dac167a156992ef23c7f023653f53b"
   integrity sha512-QNqXyfVS2wm9hweSYD2O7F0G06uurj9kZ96TRQE5Y9hU7+tgdZwIkbAKc5Ocy1HxEY2kuDQa6cQ1WRs/O5LFKA==
 
-"@raclettejs/core@0.1.11":
-  version "0.1.11"
-  resolved "https://registry.yarnpkg.com/@raclettejs/core/-/core-0.1.11.tgz#886c0905baa90402ef0fd3f49904356f76222706"
-  integrity sha512-Pav4GiFMKYfrtC1gxCLTHBKSqDPN1tjEHlJJ7/E98uZr6CJyp6w4YGCiSr2nS80QrdRF8O0lckt03bz4BOKkzg==
+"@raclettejs/core@^0.1.12":
+  version "0.1.12"
+  resolved "https://registry.yarnpkg.com/@raclettejs/core/-/core-0.1.12.tgz#7b48b29af4512c67e6b922a063b6b0007d74ba1d"
+  integrity sha512-AQ60ZfINVy9d9xNpCQK0V295GkZFQD5+Lv2yOyTqrTvYosvNiDo0REIOS82plUJCsL2ORaQVNGVRlaxi9cV+PA==
   dependencies:
     chalk "5.6.2"
     chokidar "3.6.0"
@@ -492,10 +492,10 @@
     ramda "0.31.3"
     tsc-alias "1.8.16"
 
-"@raclettejs/types@0.1.11":
-  version "0.1.11"
-  resolved "https://registry.yarnpkg.com/@raclettejs/types/-/types-0.1.11.tgz#5149b4d3cfe4518f3a22558afb1e71ca34e9d7c1"
-  integrity sha512-tbwy+fZVUFcrC8fmQEZuWYWooin6+TV3gbqsbVenj5RMmNtqBqcScootFcC4xz5w32wgN17Ay9wwifSwzdC6pw==
+"@raclettejs/types@0.1.12":
+  version "0.1.12"
+  resolved "https://registry.yarnpkg.com/@raclettejs/types/-/types-0.1.12.tgz#5b8ddf2ff70333494abf96be2a3af118b3ca8afc"
+  integrity sha512-hN+mfnv23JMPDwcHodDoVGnM4tVsMyfS5BcUL/vxohYROp2xfBpIFnN7k9WbFbhLeGJhUackjRN/2EfWQi76eQ==
   dependencies:
     "@types/node" "24.5.2"
     fastify "5.6.0"