@revenexx/studio-shared 0.3.0 → 0.3.2

package/dist/module.d.mts

@@ -7,6 +7,7 @@ export { PlatformTenant } from '../dist/runtime/composables/usePlatformTenant.js
 export { PlatformTalkback } from '../dist/runtime/composables/usePlatformTalkback.js';
 export { TalkbackChannel, TalkbackChannelOptions, TalkbackMaybeRef } from '../dist/runtime/composables/useTalkbackChannels.js';
 export { MediaLibraryClient } from '../dist/runtime/composables/useMediaLibrary.js';
+export { FloatingPanelDock, FloatingPanelMode, FloatingPanelOptions } from '../dist/runtime/composables/useFloatingPanel.js';
 export { IsoOption } from '../dist/runtime/lib/isoLists.js';
 export { Translate, TranslateNamed, Translator } from '../dist/runtime/lib/i18nBridge.js';
 

package/dist/module.json

@@ -1,7 +1,7 @@
 {
   "name": "studio-shared",
   "configKey": "studioShared",
-  "version": "0.3.0",
+  "version": "0.3.2",
   "builder": {
     "@nuxt/module-builder": "1.0.2",
     "unbuild": "unknown"

package/dist/module.mjs

@@ -36,6 +36,11 @@ const module$1 = defineNuxtModule({
       // Collapsible list-rail state (persisted per surface) behind the
       // DataTable toolbar's rail handle.
       { name: "useListRail", from: join(runtime, "composables/useListRail"), priority: -1 },
+      // A panel that docks to either side of a canvas, floats anywhere on it,
+      // or collapses to a pill — and is dragged between those by its header.
+      // Lifted out of the integration studio's workflow editor so a second
+      // editor can have the same panels without a second implementation.
+      { name: "useFloatingPanel", from: join(runtime, "composables/useFloatingPanel"), priority: -1 },
       // Realtime provider seam (Talkback). Composes usePlatformAuth +
       // usePlatformTenant, so a host that overrides those gets a correct client
       // without overriding this one too.

package/dist/runtime/components/DataTable/ColumnsMenu.d.vue.ts

@@ -6,7 +6,9 @@ type __VLS_Props = {
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     toggle: (key: string) => any;
+    reorder: (from: number, to: number) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onToggle?: ((key: string) => any) | undefined;
+    onReorder?: ((from: number, to: number) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/DataTable/ColumnsMenu.vue

@@ -1,51 +1,107 @@
 <script setup>
-import { Widget as Columns, CheckCircle as Check } from "#solar-icons";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger
-} from "@revenexx/studio";
+import { Eye, EyeClosed, ListArrowDownMinimalistic, Widget as Columns } from "#solar-icons";
+import { Popover, PopoverContent, PopoverTrigger } from "@revenexx/studio";
 const props = defineProps({
   columns: { type: Array, required: true },
   visible: { type: Set, required: true }
 });
-const emit = defineEmits(["toggle"]);
-const toggleable = computed(() => props.columns.filter((c) => c.toggleable !== false));
+const emit = defineEmits(["toggle", "reorder"]);
+const listed = computed(() => props.columns);
+const visibleCount = computed(() => props.columns.filter((c) => props.visible.has(c.key)).length);
+function canHide(col) {
+  if (col.toggleable === false) return false;
+  return !props.visible.has(col.key) || visibleCount.value > 1;
+}
+const dragging = ref(null);
+const over = ref(null);
+const announcement = ref("");
+function move(from, to) {
+  if (to < 0 || to >= listed.value.length || to === from) return;
+  emit("reorder", from, to);
+  const column = listed.value[from];
+  if (column) announcement.value = `${column.label}, ${to + 1} / ${listed.value.length}`;
+}
+function onDrop(index) {
+  if (dragging.value !== null) move(dragging.value, index);
+  dragging.value = null;
+  over.value = null;
+}
+function onKey(event, index) {
+  if (event.key !== "ArrowUp" && event.key !== "ArrowDown") return;
+  event.preventDefault();
+  const to = event.key === "ArrowUp" ? index - 1 : index + 1;
+  move(index, to);
+  const list = event.currentTarget.closest("[data-columns-list]");
+  requestAnimationFrame(() => {
+    list?.querySelectorAll("[data-column-handle]")[to]?.focus();
+  });
+}
 const t = useT();
 </script>
 
 <template>
-  <DropdownMenu>
-    <DropdownMenuTrigger as-child>
+  <Popover>
+    <PopoverTrigger as-child>
       <button
         type="button"
         class="flex size-7 items-center justify-center rounded-md border border-black/[0.06] bg-white text-muted-foreground transition hover:text-foreground"
         :title="t('shared.datatable.columnsmenu.tooltip')"
       >
-        <Columns :size="15" />
+        <Columns :size="15" weight="Bold" />
       </button>
-    </DropdownMenuTrigger>
-    <DropdownMenuContent align="end" class="w-48">
-      <DropdownMenuLabel class="text-sm text-muted-foreground">
+    </PopoverTrigger>
+
+    <PopoverContent align="end" class="w-60 p-1.5">
+      <p class="px-2 py-1.5 text-sm text-muted-foreground">
         {{ t("shared.datatable.columnsmenu.heading") }}
-      </DropdownMenuLabel>
-      <DropdownMenuSeparator />
-      <DropdownMenuItem
-        v-for="col in toggleable"
-        :key="col.key"
-        class="justify-between gap-2"
-        @select.prevent="emit('toggle', col.key)"
-      >
-        <span class="truncate">{{ col.label }}</span>
-        <Check
-          v-if="visible.has(col.key)"
-          :size="14"
-          class="text-muted-foreground shrink-0"
-        />
-      </DropdownMenuItem>
-    </DropdownMenuContent>
-  </DropdownMenu>
+      </p>
+
+      <div data-columns-list class="space-y-0.5">
+        <div
+          v-for="(col, index) in listed"
+          :key="col.key"
+          class="flex items-center gap-1 rounded-md pr-1 transition-colors"
+          :class="[
+  over === index && dragging !== null && dragging !== index ? 'bg-primary/10' : 'hover:bg-muted',
+  dragging === index && 'opacity-40'
+]"
+          @dragover.prevent="over = index"
+          @drop.prevent="onDrop(index)"
+        >
+          <button
+            type="button"
+            data-column-handle
+            draggable="true"
+            class="flex size-7 shrink-0 cursor-grab items-center justify-center rounded text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-2 focus-visible:outline-ring active:cursor-grabbing"
+            :aria-label="t('shared.datatable.columnsmenu.reorder', { column: col.label })"
+            @dragstart="dragging = index"
+            @dragend="dragging = null;
+  over = null"
+            @keydown="onKey($event, index)"
+          >
+            <ListArrowDownMinimalistic :size="15" weight="Linear" />
+          </button>
+
+          <span
+            class="min-w-0 flex-1 truncate py-1.5 text-sm transition-colors"
+            :class="visible.has(col.key) ? 'text-foreground' : 'text-muted-foreground'"
+          >{{ col.label }}</span>
+
+          <button
+            type="button"
+            class="flex size-7 shrink-0 cursor-pointer items-center justify-center rounded text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-2 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-35"
+            :disabled="!canHide(col)"
+            :aria-pressed="visible.has(col.key)"
+            :aria-label="col.label"
+            @click="emit('toggle', col.key)"
+          >
+            <Eye v-if="visible.has(col.key)" :size="16" weight="Linear" />
+            <EyeClosed v-else :size="16" weight="Linear" />
+          </button>
+        </div>
+      </div>
+
+      <p class="sr-only" role="status" aria-live="polite">{{ announcement }}</p>
+    </PopoverContent>
+  </Popover>
 </template>

package/dist/runtime/components/DataTable/ColumnsMenu.vue.d.ts

@@ -6,7 +6,9 @@ type __VLS_Props = {
 };
 declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
     toggle: (key: string) => any;
+    reorder: (from: number, to: number) => any;
 }, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
     onToggle?: ((key: string) => any) | undefined;
+    onReorder?: ((from: number, to: number) => any) | undefined;
 }>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;

package/dist/runtime/components/DataTable/DataTable.d.vue.ts

@@ -11,8 +11,11 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
         data: T[];
         columns: DataTableColumn<T>[];
         rowKey: RowKey<T>;
+        /** `label` is the field's accessible name; it defaults to the placeholder
+         *  where the surface wrote one (see `searchLabel`). */
         search?: boolean | {
             placeholder?: string;
+            label?: string;
         };
         columnsMenu?: boolean;
         /** Mount the surface's own filter panel in the toolbar's Filter popover
@@ -20,6 +23,7 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
         filter?: boolean | {
             width?: string;
             active?: boolean;
+            count?: number;
         };
         /** Built-in status/dimension filter pills (static mode). One dimension, or
          *  several (each renders as its own sub-menu). */
@@ -32,6 +36,26 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
         viewModes?: DataTableViewMode[] | null;
         /** Collapse handle for the surface's left rail (see `ListSurface`). */
         rail?: boolean | DataTableRail;
+        /**
+         * Scroll the ROWS inside the table instead of the page.
+         *
+         * The toolbar, the header and the footer stay put and only the data moves,
+         * so paging through a long list keeps the search box, the filters and the
+         * "showing 20 of 400" in view — you stay in the table's context instead of
+         * scrolling the whole surface away and losing the controls that scope it.
+         *
+         * OPT-IN. A short list scrolling inside a box shorter than the list is worse
+         * than a page that scrolls, and there is no way for this component to know
+         * which it is looking at.
+         *
+         * The header row moves INSIDE the scroll container and sticks, rather than
+         * sitting above it. That is not a detail: a scrollbar takes width from the
+         * scrolling box, so a header outside it stays wider than the rows and every
+         * column drifts by however wide the scrollbar is.
+         */
+        scrollBody?: boolean | {
+            maxHeight?: string;
+        };
         pagination?: boolean | {
             pageSize?: number;
         };
@@ -61,12 +85,12 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
         }) => any) | undefined;
     } & {
         'filter-menu'?: (props: {}) => any;
+    } & {
+        scope?: (props: {}) => any;
     } & {
         'toolbar-left'?: (props: {}) => any;
     } & {
         'toolbar-right'?: (props: {}) => any;
-    } & {
-        scope?: (props: {}) => any;
     } & {
         actions?: (props: {}) => any;
     } & {