@raclettejs/workbench 0.1.19 → 0.1.21

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

@@ -0,0 +1,213 @@
+<template>
+  <div
+    class="tw:sticky tw:top-0 tw:z-10 tw:bg-[rgb(var(--v-theme-surface))] tw:pt-2 tw:pb-2 tw:backdrop-blur-sm"
+  >
+    <div
+      class="tw:flex tw:items-center tw:gap-2 tw:mb-2 tw:px-1 tw:rounded-xl tw:border tw:border-slate-500/60 tw:bg-slate-50/80 tw:dark:bg-slate-900/60"
+    >
+      <SimpleSearchInput
+        :model-value="searchQuery"
+        variant="solo"
+        class="tw:flex-1"
+        :clearable="false"
+        :label="
+          $t(
+            'workbench.compositionConfiguration.widgetLayout.widgetList.searchLabel',
+          )
+        "
+        @update:model-value="onUpdateSearchQuery"
+      />
+
+      <v-menu :max-width="380" :close-on-content-click="false">
+        <template #activator="{ props }">
+          <v-btn
+            v-bind="props"
+            icon
+            variant="tonal"
+            density="comfortable"
+            class="tw:ml-auto tw:border tw:border-slate-200/80 tw:bg-slate-100/80 hover:tw:bg-slate-200/80 tw:dark:bg-slate-800/80 dark:hover:tw:bg-slate-700/80"
+            :aria-label="
+              $t(
+                'workbench.compositionConfiguration.widgetLayout.widgetList.menuAriaLabel',
+              )
+            "
+          >
+            <v-icon icon="mdi-tune-variant" />
+          </v-btn>
+        </template>
+
+        <v-card
+          class="tw:min-w-[260px] tw:rounded-xl tw:shadow-lg tw:border tw:border-slate-200/80"
+        >
+          <v-card-title class="tw:py-2.5 tw:px-3">
+            <div
+              class="tw:flex tw:items-center tw:justify-between tw:gap-2 tw:text-sm tw:font-medium"
+            >
+              <span>
+                {{
+                  $t(
+                    "workbench.compositionConfiguration.widgetLayout.widgetList.menuTitle",
+                  )
+                }}
+              </span>
+              <span
+                class="tw:inline-flex tw:items-center tw:rounded-full tw:bg-slate-100/90 tw:px-2 tw:py-[2px] tw:text-[11px] tw:font-medium tw:uppercase tw:tracking-wide tw:text-slate-500 tw:dark:bg-slate-800/80"
+              >
+                {{ visibleWidgetsCount }}/{{ widgetsCount }}
+              </span>
+            </div>
+          </v-card-title>
+          <v-divider />
+
+          <v-card-text class="tw:!py-2.5 tw:!px-3 tw:space-y-4">
+            <div
+              class="tw:rounded-lg tw:bg-slate-50/80 tw:dark:bg-slate-900/40 tw:p-2.5"
+            >
+              <div
+                class="tw:flex tw:items-center tw:justify-between tw:gap-2 tw:mb-2"
+              >
+                <div
+                  class="tw:text-[11px] tw:font-semibold tw:uppercase tw:tracking-wide tw:text-slate-500"
+                >
+                  {{
+                    $t(
+                      "workbench.compositionConfiguration.widgetLayout.widgetList.sortingTitle",
+                    )
+                  }}
+                </div>
+              </div>
+              <v-chip-group
+                :model-value="sortMode"
+                column
+                class="tw:flex tw:flex-wrap tw:gap-1 tw:max-w-[320px]"
+                @update:model-value="onUpdateSortMode"
+                mandatory
+              >
+                <v-chip
+                  v-for="option in sortOptions"
+                  :key="option.value"
+                  :value="option.value"
+                  size="small"
+                  variant="outlined"
+                  class="tw:text-xs tw:font-medium tw:rounded-full tw:border-slate-200/80 tw:bg-white/90 tw:dark:bg-slate-900/60"
+                  color="primary"
+                >
+                  {{ $t(option.labelKey) }}
+                </v-chip>
+              </v-chip-group>
+            </div>
+
+            <div
+              class="tw:rounded-lg tw:bg-slate-50/80 tw:dark:bg-slate-900/40 tw:px-2.5 tw:py-2.5"
+            >
+              <div
+                class="tw:flex tw:items-center tw:justify-between tw:gap-2 tw:mb-2"
+              >
+                <div
+                  class="tw:text-[11px] tw:font-semibold tw:uppercase tw:tracking-wide tw:text-slate-500"
+                >
+                  {{
+                    $t(
+                      "workbench.compositionConfiguration.widgetLayout.widgetList.pluginFilterTitle",
+                    )
+                  }}
+                </div>
+                <div class="tw:flex tw:items-center tw:gap-2">
+                  <span
+                    class="tw:inline-flex tw:items-center tw:rounded-full tw:bg-slate-100/90 tw:px-2 tw:py-[2px] tw:text-[11px] tw:font-medium tw:uppercase tw:tracking-wide tw:text-slate-500 tw:dark:bg-slate-800/80"
+                  >
+                    {{ visiblePluginKeysModel.length }}/{{
+                      pluginFilterOptions.length
+                    }}
+                  </span>
+                </div>
+              </div>
+
+              <div class="tw:max-h-64 tw:overflow-y-auto tw:pr-1">
+                <v-chip-group
+                  v-model="visiblePluginKeysModel"
+                  multiple
+                  column
+                  class="tw:flex tw:flex-wrap tw:gap-1"
+                >
+                  <v-chip
+                    v-for="plugin in pluginFilterOptions"
+                    :key="plugin.key"
+                    :value="plugin.key"
+                    size="small"
+                    variant="outlined"
+                    filter
+                    color="primary"
+                    class="tw:text-[11px] tw:font-medium tw:rounded-full tw:border-slate-200/80 tw:bg-white/90 tw:dark:bg-slate-900/60"
+                  >
+                    {{ plugin.label }}
+                  </v-chip>
+                </v-chip-group>
+              </div>
+            </div>
+          </v-card-text>
+        </v-card>
+      </v-menu>
+    </div>
+
+    <div
+      v-if="widgetsCount > 0"
+      class="tw:flex tw:items-center tw:justify-between tw:px-1.5 tw:pt-0.5 tw:text-[11px] tw:text-slate-500"
+    >
+      <span>
+        <template v-if="visibleWidgetsCount === widgetsCount">
+          {{
+            $t(
+              "workbench.compositionConfiguration.widgetLayout.widgetList.countAll",
+              { count: widgetsCount },
+            )
+          }}
+        </template>
+        <template v-else>
+          {{
+            $t(
+              "workbench.compositionConfiguration.widgetLayout.widgetList.countFiltered",
+              { visible: visibleWidgetsCount, total: widgetsCount },
+            )
+          }}
+        </template>
+      </span>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue"
+import SimpleSearchInput from "@raclettejs/core/orchestrator/components/input/SimpleSearchInput.vue"
+import type { SortMode, SortOption } from "../../../composables/useWidgetList"
+
+const props = defineProps<{
+  searchQuery: string
+  sortMode: SortMode
+  sortOptions: SortOption[]
+  pluginFilterOptions: { key: string; label: string }[]
+  visiblePluginKeys: string[]
+  widgetsCount: number
+  visibleWidgetsCount: number
+}>()
+
+const emit = defineEmits<{
+  (e: "update:searchQuery", value: string): void
+  (e: "update:sortMode", value: SortMode): void
+  (e: "update:visiblePluginKeys", value: string[]): void
+}>()
+
+const visiblePluginKeysModel = computed({
+  get: () => props.visiblePluginKeys,
+  set: (value: string[]) => emit("update:visiblePluginKeys", value),
+})
+
+const onUpdateSearchQuery = (value: string) => {
+  emit("update:searchQuery", value)
+}
+
+const onUpdateSortMode = (value: SortMode | null) => {
+  if (value === null) return
+  emit("update:sortMode", value)
+}
+</script>

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

@@ -0,0 +1,56 @@
+<template>
+  <DraggableElement
+    :class="outerClass"
+    :draggable-config="{
+      type: 'widget',
+      widgetName: widget.name,
+      pluginKey: widget.pluginKey,
+    }"
+  >
+    <div
+      class="tw:flex tw:items-center tw:gap-3 tw:px-3 tw:py-2 tw:rounded-lg"
+      tabindex="0"
+    >
+      <div class="tw:flex tw:items-center tw:gap-3 tw:min-w-0">
+        <div
+          class="tw:flex-shrink-0 tw:w-8 tw:h-8 tw:flex tw:items-center tw:justify-center"
+        >
+          <WidgetIcon :module="widget" />
+        </div>
+        <div class="tw:min-w-0">
+          <div
+            class="tw:text-sm tw:font-medium tw:whitespace-nowrap tw:truncate"
+          >
+            {{ widget.title }}
+          </div>
+          <div
+            class="tw:text-xs tw:text-slate-500 tw:whitespace-nowrap tw:truncate"
+          >
+            {{ pluginLabel }} ·
+            {{ widget.author }}
+          </div>
+        </div>
+      </div>
+    </div>
+  </DraggableElement>
+</template>
+
+<script setup lang="ts">
+import { computed } from "vue"
+import { RegisteredWidgetDeclaration } from "@raclettejs/core"
+import DraggableElement from "@raclettejs/core/orchestrator/components/dragAndDrop/DraggableElement.vue"
+import WidgetIcon from "./WidgetIcon.vue"
+import { deslugify } from "@shared/helper/pluginHelper"
+
+const props = defineProps<{
+  widget: RegisteredWidgetDeclaration
+  outerClass?: string
+}>()
+
+const pluginLabel = computed(() => {
+  const parts = props.widget.pluginKey.split("__")
+  const slug = parts[1] ?? parts[0]
+  return deslugify(slug)
+})
+</script>
+

package/plugins/pacifico__compositions/frontend/composables/useWidgetList.ts

@@ -0,0 +1,288 @@
+import { computed, ref, watch } from "vue"
+import { useFuse } from "@vueuse/integrations/useFuse"
+import useWidgets from "@raclettejs/core/orchestrator/composables/useWidgets"
+import type { RegisteredWidgetDeclaration } from "@raclettejs/core"
+import { deslugify } from "@shared/helper/pluginHelper"
+
+export type SortMode = "name" | "author" | "plugin" | "group"
+
+export type SortOption = { labelKey: string; value: SortMode }
+
+export type GroupedWidgets = Record<
+  string,
+  Record<string, RegisteredWidgetDeclaration[]>
+>
+
+const sortOptions: SortOption[] = [
+  {
+    labelKey:
+      "workbench.compositionConfiguration.widgetLayout.widgetList.sortOptions.group",
+    value: "group",
+  },
+  {
+    labelKey:
+      "workbench.compositionConfiguration.widgetLayout.widgetList.sortOptions.name",
+    value: "name",
+  },
+  {
+    labelKey:
+      "workbench.compositionConfiguration.widgetLayout.widgetList.sortOptions.author",
+    value: "author",
+  },
+]
+
+export function useWidgetList() {
+  const { widgets } = useWidgets()
+
+  const searchQuery = ref("")
+  const sortMode = ref<SortMode>("group")
+  const visiblePluginKeys = ref<string[]>([])
+
+  const pluginFilterOptions = computed(() => {
+    const map = new Map<string, { key: string; label: string }>()
+
+    widgets.value.forEach((widget) => {
+      if (!map.has(widget.pluginKey)) {
+        const parts = widget.pluginKey.split("__")
+        const slug = parts[1] ?? parts[0]
+        map.set(widget.pluginKey, {
+          key: widget.pluginKey,
+          label: deslugify(slug),
+        })
+      }
+    })
+
+    return Array.from(map.values()).sort((a, b) =>
+      a.label.localeCompare(b.label),
+    )
+  })
+
+  const widgetsCount = computed(() => widgets.value.length)
+
+  const { results: fuseResults } = useFuse<RegisteredWidgetDeclaration>(
+    searchQuery,
+    widgets,
+    {
+      fuseOptions: {
+        keys: ["title", "description", "author", "pluginKey", "name"],
+        includeScore: true,
+        threshold: 0.4,
+      },
+      matchAllWhenSearchEmpty: true,
+    },
+  )
+
+  const visibleWidgetsCount = computed(() => {
+    const query = (searchQuery.value ?? "").trim()
+
+    const baseList = query
+      ? fuseResults.value.map(
+          (result: { item: RegisteredWidgetDeclaration }) => result.item,
+        )
+      : widgets.value
+
+    const allowedPlugins = new Set(visiblePluginKeys.value)
+
+    const filteredByPlugin =
+      allowedPlugins.size === 0
+        ? baseList
+        : baseList.filter((widget) => allowedPlugins.has(widget.pluginKey))
+
+    return filteredByPlugin.length
+  })
+
+  watch(
+    () => widgets.value,
+    (current) => {
+      if (!current.length) return
+      if (visiblePluginKeys.value.length) return
+
+      visiblePluginKeys.value = Array.from(
+        new Set(current.map((w) => w.pluginKey)),
+      )
+    },
+    { immediate: true },
+  )
+
+  const groupedWidgets = computed<GroupedWidgets>(() => {
+    const unsortedResult: GroupedWidgets = {}
+
+    const allowedPlugins = new Set(visiblePluginKeys.value)
+
+    widgets.value.forEach((widget) => {
+      if (allowedPlugins.size && !allowedPlugins.has(widget.pluginKey)) {
+        return
+      }
+
+      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: GroupedWidgets = {}
+
+    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 sortWidgets = (
+    list: RegisteredWidgetDeclaration[],
+    mode: SortMode,
+  ): RegisteredWidgetDeclaration[] => {
+    const copy = [...list]
+
+    switch (mode) {
+      case "name":
+        copy.sort((a, b) => a.title.localeCompare(b.title))
+        break
+      case "author":
+        copy.sort((a, b) => a.author.localeCompare(b.author))
+        break
+      default:
+        break
+    }
+
+    return copy
+  }
+
+  const filteredWidgetsFlat = computed<RegisteredWidgetDeclaration[]>(() => {
+    const query = (searchQuery.value ?? "").trim()
+
+    const allowedPlugins = new Set(visiblePluginKeys.value)
+
+    if (query) {
+      const fuseOrdered = fuseResults.value
+        .map((result: { item: RegisteredWidgetDeclaration }) => result.item)
+        .filter(
+          (widget: RegisteredWidgetDeclaration) =>
+            allowedPlugins.size === 0 || allowedPlugins.has(widget.pluginKey),
+        )
+
+      return fuseOrdered
+    }
+
+    const baseList = widgets.value
+
+    const filteredByPlugin =
+      allowedPlugins.size === 0
+        ? baseList
+        : baseList.filter((widget) => allowedPlugins.has(widget.pluginKey))
+
+    if (sortMode.value === "group") {
+      return filteredByPlugin
+    }
+
+    return sortWidgets(filteredByPlugin, sortMode.value)
+  })
+
+  const filteredGroupedWidgets = computed<GroupedWidgets>(() => {
+    const query = (searchQuery.value ?? "").trim()
+
+    if (!query) {
+      return groupedWidgets.value
+    }
+
+    const allowedPlugins = new Set(visiblePluginKeys.value)
+
+    const matchedWidgets = fuseResults.value
+      .map((result: { item: RegisteredWidgetDeclaration }) => result.item)
+      .filter(
+        (widget: RegisteredWidgetDeclaration) =>
+          allowedPlugins.size === 0 || allowedPlugins.has(widget.pluginKey),
+      )
+
+    const unsortedResult: GroupedWidgets = {}
+
+    matchedWidgets.forEach((widget: RegisteredWidgetDeclaration) => {
+      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: GroupedWidgets = {}
+
+    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
+  })
+
+  return {
+    widgets,
+    searchQuery,
+    sortMode,
+    visiblePluginKeys,
+    sortOptions,
+    pluginFilterOptions,
+    widgetsCount,
+    visibleWidgetsCount,
+    filteredWidgetsFlat,
+    filteredGroupedWidgets,
+  }
+}

package/raclette.config.js

@@ -4,7 +4,7 @@ import interactionLinks from "./config/interactionLinks.js"
 
 export default defineRacletteConfig({
   name: "raclette-workbench",
-
+  root: ".raclette",
   // Configure services
   services: {
     frontend: {
@@ -144,4 +144,7 @@ export default defineRacletteConfig({
   eslint: {
     useRecommended: true,
   },
+  global: {
+    requiresAuthentication: true
+  }
 })