@raclettejs/workbench 0.1.19 → 0.1.20

package/CHANGELOG.md

@@ -7,6 +7,11 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## [Unreleased]
 
+### Added
+
+- widgetId is now configurable in composition layout screen
+- WidgetList.vue (used in the Widget Layout) has a new design, and options for searching and filtering for widgets.
+
 ## [0.1.19] - 12.12.2025 <a href="https://gitlab.com/raclettejs/workbench/-/compare/v0.1.18...v0.1.19" target="_blank" rel="noopener"><b>Overview of all changes</b></a>
 
 ### Added

package/i18n/de-DE.json

@@ -100,6 +100,22 @@
       "slotLayout": {
         "title": "Slot Layout",
         "description": "Beschreibt das Zusammenspiel der einzelnen Widgets auf der Seite (Abstände sowie Rahmen pro Widget)"
+      },
+      "widgetLayout": {
+        "widgetList": {
+          "searchLabel": "Widgets durchsuchen",
+          "menuAriaLabel": "Liste filtern und sortieren",
+          "menuTitle": "Liste anpassen",
+          "sortingTitle": "Sortierung",
+          "pluginFilterTitle": "Plugins anzeigen",
+          "sortOptions": {
+            "group": "Gruppiert",
+            "name": "Nach Name",
+            "author": "Nach Autor"
+          },
+          "countAll": "{count} Widgets",
+          "countFiltered": "{visible} von {total} Widgets"
+        }
       }
     },
     "interactionLinkList": {
@@ -274,4 +290,4 @@
       }
     }
   }
-}
+}

package/i18n/en-EU.json

@@ -100,6 +100,22 @@
       "slotLayout": {
         "title": "Slot Layout",
         "description": "Describes the interaction of the individual widgets on the page (spacing and borders per widget)"
+      },
+      "widgetLayout": {
+        "widgetList": {
+          "searchLabel": "Search widgets",
+          "menuAriaLabel": "Filter and sort list",
+          "menuTitle": "Adjust list",
+          "sortingTitle": "Sorting",
+          "pluginFilterTitle": "Show plugins",
+          "sortOptions": {
+            "group": "Grouped",
+            "name": "By name",
+            "author": "By author"
+          },
+          "countAll": "{count} widgets",
+          "countFiltered": "{visible} of {total} widgets"
+        }
       }
     },
     "interactionLinkList": {
@@ -274,4 +290,4 @@
       }
     }
   }
-}
+}

package/i18n/sk-SK.json

@@ -95,6 +95,22 @@
       "pathname": {
         "title": "Cesta (Pathname)",
         "description": "Popisuje technický názov používaný ako URL cesta, parameter dotazu alebo iný odkaz. Nesmie obsahovať medzery."
+      },
+      "widgetLayout": {
+        "widgetList": {
+          "searchLabel": "Hľadať widgety",
+          "menuAriaLabel": "Filtrovať a triediť zoznam",
+          "menuTitle": "Upraviť zoznam",
+          "sortingTitle": "Triedenie",
+          "pluginFilterTitle": "Zobraziť pluginy",
+          "sortOptions": {
+            "group": "Zoskupené",
+            "name": "Podľa názvu",
+            "author": "Podľa autora"
+          },
+          "countAll": "{count} widgetov",
+          "countFiltered": "{visible} z {total} widgetov"
+        }
       }
     },
     "interactionLinkList": {
@@ -269,4 +285,4 @@
       }
     }
   }
-}
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@raclettejs/workbench",
-  "version": "0.1.19",
+  "version": "0.1.20",
   "license": "MIT",
   "description": "racletteJS Workbench - used to configure your application, for dev and prod",
   "repository": "https://gitlab.com/raclettejs/workbench",
@@ -32,6 +32,8 @@
   },
   "dependencies": {
     "@raclettejs/core": "0.1.19",
+    "@vueuse/integrations": "14.2.1",
+    "fuse.js": "7.1.0",
     "three": "0.180.0",
     "vanta": "0.5.24"
   },
@@ -64,4 +66,4 @@
     "vuetify": "3.10.2"
   },
   "packageManager": "yarn@1.22.22+sha1.ac34549e6aa8e7ead463a7407e1c7390f61a6610"
-}
+}

package/packages.json

@@ -2,7 +2,9 @@
   "frontend": {
     "dependencies": {
       "three": "0.179.1",
-      "vanta": "0.5.24"
+      "vanta": "0.5.24",
+      "@vueuse/integrations": "14.2.1",
+      "fuse.js": "7.1.0"
     },
     "devDependencies": {}
   },

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

@@ -26,7 +26,7 @@
           @resize="onResize($event, dropzoneIndex, widgetIndex)"
           @update-config="onConfigChanges($event, dropzoneIndex, widgetIndex)"
           @remove-widget="removeWidget(widgetSlot.widget.uuid)"
-          @open-settings="showSettingsForWidget = widgetSlot.widget"
+          @open-settings="toggleSettings(widgetSlot.widget)"
         />
       </DropzoneElement>
     </div>
@@ -60,9 +60,14 @@ import DropzoneElement from "@raclettejs/core/orchestrator/components/dragAndDro
 const composition = defineModel<CompositionCreate | CompositionUpdate>({
   required: true,
 })
-
 const showSettingsForWidget = ref<WidgetBase | null>()
-
+const toggleSettings = (widget) => {
+  if (showSettingsForWidget.value == widget) {
+    showSettingsForWidget.value = null
+  } else {
+    showSettingsForWidget.value = widget
+  }
+}
 const createNewWidget = (widgetName: string, pluginKey: string) => ({
   column: 12,
   widget: {

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

@@ -1,6 +1,42 @@
 <template>
   <div class="tw:z-50">
     <div class="tw:flex tw:gap-1">
+      <!-- UUID Edit Button/Input -->
+      <div v-if="!isEditingUuid" class="tw:flex">
+        <v-btn
+          class="tw:rounded"
+          icon="mdi-identifier"
+          color="grey-darken-3"
+          @click="startEditingUuid()"
+        />
+      </div>
+      <div v-else class="tw:flex tw:gap-1 tw:items-center">
+        <v-text-field
+          v-model="editableUuid"
+          density="compact"
+          hide-details
+          class="tw:min-w-[200px]"
+          variant="outlined"
+          @keyup.enter="saveUuid()"
+          @keyup.esc="cancelEditingUuid()"
+        />
+        <v-btn
+          class="tw:rounded"
+          icon="mdi-check"
+          color="success"
+          size="small"
+          @click="saveUuid()"
+        />
+        <v-btn
+          class="tw:rounded"
+          icon="mdi-close"
+          color="grey"
+          size="small"
+          @click="cancelEditingUuid()"
+        />
+      </div>
+
+      <!-- Settings Button -->
       <v-btn
         v-if="Object.keys(configurableParameteters || {}).length"
         class="tw:rounded"
@@ -8,6 +44,8 @@
         color="grey-darken-3"
         @click="openWidgetSettings()"
       />
+
+      <!-- Delete Button -->
       <v-btn
         class="tw:rounded"
         icon="mdi-delete-outline"
@@ -45,6 +83,28 @@ const widget = computed(() => findWidgetByName(widgetConfig.widget.name))
 const configurableParameteters = computed(
   () => widget.value?.configurableParameters,
 )
+
+// UUID editing state
+const isEditingUuid = ref(false)
+const editableUuid = ref("")
+
+const startEditingUuid = () => {
+  editableUuid.value = widgetConfig.widget.uuid
+  isEditingUuid.value = true
+}
+
+const saveUuid = () => {
+  const updatedConfig = clone(editableConfig.value)
+  updatedConfig.widget.uuid = editableUuid.value
+  emit("updateConfig", updatedConfig)
+  isEditingUuid.value = false
+}
+
+const cancelEditingUuid = () => {
+  isEditingUuid.value = false
+  editableUuid.value = ""
+}
+
 const openWidgetSettings = () => emit("openSettings")
 
 const removeWidget = () => emit("removeWidget")

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

@@ -1,15 +1,15 @@
 <template>
   <div>
-    <figure class="tw:flex tw:flex-col tw:items-center tw:gap-4">
+    <figure class="tw:flex tw:items-center tw:gap-2">
       <span
-        class="tw:flex tw:h-24 tw:w-24 tw:items-center tw:justify-center tw:rounded tw:shadow-lg"
+        class="tw:flex tw:h-8 tw:w-8 tw:items-center tw:justify-center tw:rounded tw:shadow-none"
         :style="{
           backgroundColor: module.color,
         }"
       >
         <span
           v-if="svgContent"
-          class="tw:flex tw:h-20 tw:w-20 tw:items-center tw:justify-center"
+          class="tw:flex tw:h-6 tw:w-6 tw:items-center tw:justify-center"
           :style="{
             '--highlight-color': module.color,
             '--base-color': baseColor,
@@ -21,12 +21,9 @@
           v-else
           :src="module.icon"
           :alt="`${module.title} icon`"
-          class="tw:size-20"
+          class="tw:size-6"
         />
       </span>
-      <figcaption class="tw:text-center tw:no-underline">
-        {{ module.title }}
-      </figcaption>
     </figure>
   </div>
 </template>

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

@@ -1,122 +1,39 @@
 <template>
-  <v-list v-model:opened="openListItems">
-    <v-list-subheader>Modules</v-list-subheader>
-
-    <v-list-group
-      v-for="(authorPlugins, authorName) in groupedWidgets"
-      :key="authorName"
-      :value="authorName"
-    >
-      <template #activator="{ props }">
-        <v-list-item v-bind="props" :title="authorName" />
-      </template>
-      <v-list-group
-        v-for="(pluginWidgets, pluginKey) in authorPlugins"
-        :key="pluginKey"
-        :value="pluginKey"
-      >
-        <template #activator="{ props }">
-          <v-list-item
-            v-bind="props"
-            :title="deslugify(pluginKey.split('__')[1])"
-          ></v-list-item>
-        </template>
-
-        <DraggableElement
-          v-for="widget in pluginWidgets"
-          :key="widget.title"
-          class="tw:py-4"
-          :draggable-config="{
-            type: 'widget',
-            widgetName: widget.name,
-            pluginKey: widget.pluginKey,
-          }"
-        >
-          <WidgetIcon :module="widget" />
-        </DraggableElement>
-        <v-divider></v-divider>
-      </v-list-group>
-    </v-list-group>
-  </v-list>
+  <div>
+    <WidgetListHeader
+      v-model:searchQuery="searchQuery"
+      v-model:sortMode="sortMode"
+      v-model:visiblePluginKeys="visiblePluginKeys"
+      :sort-options="sortOptions"
+      :plugin-filter-options="pluginFilterOptions"
+      :widgets-count="widgetsCount"
+      :visible-widgets-count="visibleWidgetsCount"
+    />
+
+    <WidgetListGrouped
+      v-if="sortMode === 'group' && !(searchQuery ?? '').trim()"
+      :grouped-widgets="filteredGroupedWidgets"
+    />
+
+    <WidgetListFlat v-else :widgets="filteredWidgetsFlat" />
+  </div>
 </template>
 
 <script setup lang="ts">
-import { deslugify } from "@shared/helper/pluginHelper"
-import { computed, ref } from "vue"
-import useWidgets from "@raclettejs/core/orchestrator/composables/useWidgets"
-import { RegisteredWidgetDeclaration } from "@raclettejs/core"
-import WidgetIcon from "./WidgetIcon.vue"
-import DraggableElement from "@raclettejs/core/orchestrator/components/dragAndDrop/DraggableElement.vue"
-
-const { widgets } = useWidgets()
-
-const openListItems = ref(["Users"])
-
-const groupedWidgets = computed(() => {
-  const unsortedResult: Record<
-    string,
-    Record<string, RegisteredWidgetDeclaration[]>
-  > = {}
-
-  widgets.value.forEach((widget) => {
-    if (!unsortedResult[widget.author]) {
-      unsortedResult[widget.author] = {}
-    }
-
-    if (!unsortedResult[widget.author][widget.pluginKey]) {
-      unsortedResult[widget.author][widget.pluginKey] = []
-    }
-
-    unsortedResult[widget.author][widget.pluginKey].push(widget)
-  })
-
-  const sortedAuthors = Object.keys(unsortedResult).sort((a, b) => {
-    if (a === "pacifico") {
-      return 1
-    }
-    if (b === "pacifico") {
-      return -1
-    }
-
-    return a.localeCompare(b)
-  })
-
-  const sortedResult: Record<
-    string,
-    Record<string, RegisteredWidgetDeclaration[]>
-  > = {}
-
-  sortedAuthors.forEach((author) => {
-    const plugins = Object.keys(unsortedResult[author]).sort((a, b) => {
-      if (a === "core") {
-        return 1
-      }
-      if (b === "core") {
-        return -1
-      }
-
-      return a.localeCompare(b)
-    })
-
-    sortedResult[author] = {}
-    plugins.forEach((pluginKey) => {
-      sortedResult[author][pluginKey] = unsortedResult[author][pluginKey]
-    })
-  })
-
-  return sortedResult
-})
-
-const initOpenListItems = () => {
-  const keys: string[] = []
-
-  widgets.value.forEach((widget) => {
-    keys.push(widget.author)
-    keys.push(widget.pluginKey)
-  })
-
-  openListItems.value = [...new Set(keys)]
-}
-
-initOpenListItems()
+import WidgetListHeader from "./WidgetListHeader.vue"
+import WidgetListGrouped from "./WidgetListGrouped.vue"
+import WidgetListFlat from "./WidgetListFlat.vue"
+import { useWidgetList } from "../../../composables/useWidgetList"
+
+const {
+  searchQuery,
+  sortMode,
+  visiblePluginKeys,
+  sortOptions,
+  pluginFilterOptions,
+  widgetsCount,
+  visibleWidgetsCount,
+  filteredWidgetsFlat,
+  filteredGroupedWidgets,
+} = useWidgetList()
 </script>

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

@@ -0,0 +1,20 @@
+<template>
+  <v-list>
+    <WidgetListItem
+      v-for="widget in widgets"
+      :key="widget.title"
+      :widget="widget"
+      outer-class="tw:py-2"
+    />
+  </v-list>
+</template>
+
+<script setup lang="ts">
+import type { RegisteredWidgetDeclaration } from "@raclettejs/core"
+import WidgetListItem from "./WidgetListItem.vue"
+
+const props = defineProps<{
+  widgets: RegisteredWidgetDeclaration[]
+}>()
+</script>
+

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

@@ -0,0 +1,50 @@
+<template>
+  <v-list>
+    <div
+      v-for="(authorPlugins, authorName) in groupedWidgets"
+      :key="authorName"
+      class="tw:mb-3"
+    >
+      <div
+        class="tw:px-3 tw:py-1 tw:text-[11px] tw:font-medium tw:uppercase tw:tracking-wide tw:text-slate-500"
+      >
+        {{ authorName }}
+      </div>
+
+      <div
+        v-for="(pluginWidgets, pluginKey) in authorPlugins"
+        :key="pluginKey"
+        class="tw:mb-1"
+      >
+        <div
+          class="tw:px-3 tw:py-0.5 tw:text-[11px] tw:uppercase tw:text-slate-400"
+        >
+          {{ pluginLabel(pluginKey) }}
+        </div>
+
+        <WidgetListItem
+          v-for="widget in pluginWidgets"
+          :key="widget.title"
+          :widget="widget"
+          outer-class="tw:py-1"
+        />
+      </div>
+    </div>
+  </v-list>
+</template>
+
+<script setup lang="ts">
+import { deslugify } from "@shared/helper/pluginHelper"
+import type { GroupedWidgets } from "../../../composables/useWidgetList"
+import WidgetListItem from "./WidgetListItem.vue"
+
+const props = defineProps<{
+  groupedWidgets: GroupedWidgets
+}>()
+
+const pluginLabel = (pluginKey: string) => {
+  const parts = pluginKey.split("__")
+  const slug = parts[1] ?? parts[0]
+  return deslugify(slug)
+}
+</script>