@revenexx/studio-shared 0.3.2 → 0.4.0

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

@@ -1,16 +1,9 @@
-import type { DataTableColumn, DataTableFilter, DataTableRail, DataTableSavedViews, DataTableState, DataTableViewMode, RowKey, SortState } from './types.js';
-declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
-    props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
-        readonly "onUpdate:sort"?: ((value: SortState) => any) | undefined;
-        readonly "onUpdate:page"?: ((value: number) => any) | undefined;
-        readonly "onUpdate:viewMode"?: ((value: string) => any) | undefined;
-        readonly "onUpdate:railOpen"?: ((value: boolean) => any) | undefined;
-        readonly onRowClick?: ((row: T) => any) | undefined;
-        readonly onStateChange?: ((state: DataTableState) => any) | undefined;
-    } & import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, never>, "onUpdate:sort" | "onUpdate:page" | "onUpdate:viewMode" | "onUpdate:railOpen" | "onRowClick" | "onStateChange"> & ({
+import { Eye } from '#solar-icons';
+declare const __VLS_export: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_exposed?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
+    props: import("vue").PublicProps & __VLS_PrettifyLocal<({
         data: T[];
-        columns: DataTableColumn<T>[];
-        rowKey: RowKey<T>;
+        columns: Eye<T>[];
+        rowKey: Eye<T>;
         /** `label` is the field's accessible name; it defaults to the placeholder
          *  where the surface wrote one (see `searchLabel`). */
         search?: boolean | {
@@ -27,15 +20,34 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
         };
         /** Built-in status/dimension filter pills (static mode). One dimension, or
          *  several (each renders as its own sub-menu). */
-        filterTabs?: DataTableFilter<T> | DataTableFilter<T>[];
+        filterTabs?: Eye<T> | Eye<T>[];
+        /**
+         * The surface's declared dimensions, as one facet model (PE-6xx).
+         *
+         * The THIRD filter path, and the one the others are being folded into. It
+         * differs from `filterTabs` in who does the work: those are filtered in
+         * memory here, which a server-paged list cannot use — a facet count taken
+         * over one page of fifty rows out of twenty-three thousand is a number
+         * nobody can reconcile with the table under it. Here the surface owns the
+         * query and the counts, and this component only draws the control and hands
+         * back a committed selection (`v-model:facet-selection`).
+         *
+         * EVERY declared dimension lives in this one panel, committed together, and
+         * reads back in one chip strip under the toolbar. There is deliberately no
+         * second placement: a tree pinned in a left column beside a panel is two
+         * places to look and two commit rules for one question.
+         */
+        facets?: Eye[];
+        /** Say which facet each chip belongs to (see `FacetChips.showFacet`). */
+        chipFacetLabels?: boolean;
         /** Saved views control — the surface supplies snapshot/apply, the table
          *  owns the control, the storage and the dialogs. */
-        savedViews?: DataTableSavedViews | null;
+        savedViews?: Eye | null;
         /** View-mode switch (e.g. List | Gallery). Any mode other than `list`
          *  renders the `#view` slot in place of the table body. */
-        viewModes?: DataTableViewMode[] | null;
+        viewModes?: Eye[] | null;
         /** Collapse handle for the surface's left rail (see `ListSurface`). */
-        rail?: boolean | DataTableRail;
+        rail?: boolean | Eye;
         /**
          * Scroll the ROWS inside the table instead of the page.
          *
@@ -52,8 +64,13 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
          * 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.
+         *
+         * `'fit'` measures instead of guessing: the rows get whatever height is left
+         * in the surrounding scroll container, so the table ends where the page ends
+         * and nothing below it is pushed out of sight. A short list still ends after
+         * its last row — the measurement is a MAXIMUM, not a height.
          */
-        scrollBody?: boolean | {
+        scrollBody?: boolean | "fit" | {
             maxHeight?: string;
         };
         pagination?: boolean | {
@@ -69,18 +86,66 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
         emptyText?: string;
         groupBy?: ((row: T) => string[]) | null;
         groupEmptyLabel?: string;
+        /** The row whose record is open beside the table (a DetailSheet), marked so
+         *  reading down the list keeps the place visible (PE-690). */
+        activeRowKey?: string | number | null;
+        /**
+         * A row's own tint — a quantity tier set apart under the SKU it belongs to.
+         * Replaces the row's default ground rather than stacking on it: two
+         * translucent backgrounds on one element are whichever Tailwind emitted last.
+         */
+        rowClass?: ((row: T) => string | null | undefined) | null;
+        /**
+         * Rows the operator orders by dragging (PE-952). Draws a handle in a leading
+         * column; a drop — or the arrow keys on a focused handle — emits `rowMove`
+         * with the new order. The table writes nothing: what a position MEANS, and
+         * which rows have to be written for it, is the surface's to decide.
+         */
+        reorderable?: boolean;
+        /**
+         * Why the handles are off right now, or null when they are on. The surface
+         * knows the cases this component cannot see — a sort that is not the
+         * sequence, a write still in flight. The table adds its own: a search, a
+         * filter or a grouping, under any of which "the row above" is not the row
+         * above in the sequence.
+         */
+        reorderDisabled?: string | null;
     } & {
-        sort?: SortState;
+        sort?: Eye;
         page?: number;
         viewMode?: string;
         railOpen?: boolean;
-    }) & Partial<{}>> & import("vue").PublicProps;
-    expose(exposed: import("vue").ShallowUnwrapRef<{}>): void;
+        /**
+         * The committed facet selection. Two-way so a chip removed under the toolbar,
+         * a facet picked in the surface's pinned rail and the panel's own Apply all
+         * write to one place — and so the surface can seed it from a saved view or a
+         * URL without this component holding a second copy to drift from.
+         */
+        facetSelection?: Eye;
+    }) & {
+        onRowClick?: ((row: T) => any) | undefined;
+        onStateChange?: ((state: DataTableState) => any) | undefined;
+        onOrderChange?: ((keys: (string | number)[]) => any) | undefined;
+        onRowMove?: ((move: {
+            key: string | number;
+            from: number;
+            to: number;
+            keys: (string | number)[];
+        }) => any) | undefined;
+        "onUpdate:sort"?: ((value: SortState) => any) | undefined;
+        "onUpdate:page"?: ((value: number) => any) | undefined;
+        "onUpdate:viewMode"?: ((value: string) => any) | undefined;
+        "onUpdate:railOpen"?: ((value: boolean) => any) | undefined;
+        "onUpdate:facetSelection"?: ((value: FacetSelection) => any) | undefined;
+    }> & (typeof globalThis extends {
+        __VLS_PROPS_FALLBACK: infer P;
+    } ? P : {});
+    expose: (exposed: {}) => void;
     attrs: any;
     slots: {
-        [x: string]: ((props: {}) => any) | undefined;
+        [x: `header-${any}`]: ((props: {}) => any) | undefined;
     } & {
-        [x: string]: ((props: {
+        [x: `cell-${any}`]: ((props: {
             row: any;
         }) => any) | undefined;
     } & {
@@ -96,16 +161,28 @@ declare const _default: <T>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>
     } & {
         view?: (props: {
             rows: any;
-            loading: any;
+            loading: boolean;
         }) => any;
     } & {
-        empty?: (props: {}) => any;
+        empty?: (props: {
+            query: any;
+            filters: any;
+            clear: () => void;
+        }) => any;
     };
-    emit: (((evt: "rowClick", row: T) => void) & ((evt: "stateChange", state: DataTableState) => void)) & (((evt: "update:sort", value: SortState) => void) & ((evt: "update:page", value: number) => void) & ((evt: "update:viewMode", value: string) => void) & ((evt: "update:railOpen", value: boolean) => void));
+    emit: (((evt: "rowClick", row: T) => void) & ((evt: "stateChange", state: DataTableState) => void) & ((evt: "orderChange", keys: (string | number)[]) => void) & ((evt: "rowMove", move: {
+        key: string | number;
+        from: number;
+        to: number;
+        keys: (string | number)[];
+    }) => void)) & (((event: "update:sort", value: SortState) => void) & ((event: "update:page", value: number) => void) & ((event: "update:viewMode", value: string) => void) & ((event: "update:railOpen", value: boolean) => void) & ((event: "update:facetSelection", value: FacetSelection) => void));
 }>) => import("vue").VNode & {
-    __ctx?: Awaited<typeof __VLS_setup>;
+    __ctx?: NonNullable<Awaited<typeof __VLS_setup>>;
 };
+declare const _default: typeof __VLS_export;
 export default _default;
-type __VLS_PrettifyLocal<T> = {
+type __VLS_PrettifyLocal<T> = (T extends any ? {
     [K in keyof T]: T[K];
-} & {};
+} : {
+    [K in keyof T as K]: T[K];
+}) & {};

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

@@ -0,0 +1,17 @@
+import type { Facet, FacetSelection } from '../../lib/facets.js';
+type __VLS_Props = {
+    facets: Facet[];
+    modelValue: FacetSelection;
+    /**
+     * Say which facet each chip belongs to. On where "Draft" could be a status or
+     * a lifecycle; off where the values speak for themselves.
+     */
+    showFacet?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: FacetSelection) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: FacetSelection) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,72 @@
+<script setup>
+import { computed } from "vue";
+import { CloseCircle } from "#solar-icons";
+import { dateTimeFormat } from "../../lib/formatBridge";
+import { appliedFacets, clearFacetValue } from "../../lib/facets";
+const props = defineProps({
+  facets: { type: Array, required: true },
+  modelValue: { type: Object, required: true },
+  showFacet: { type: Boolean, required: false }
+});
+const emit = defineEmits(["update:modelValue"]);
+const t = useT();
+function formatRange(range) {
+  const fmt = dateTimeFormat({ dateStyle: "medium" });
+  const one = (value) => {
+    if (!value) return null;
+    const date = new Date(value);
+    return Number.isNaN(date.getTime()) ? value : fmt.format(date);
+  };
+  const from = one(range.from);
+  const to = one(range.to);
+  if (from && to) return `${from} \u2013 ${to}`;
+  if (from) return t("shared.facetchips.range.since", { date: from });
+  return t("shared.facetchips.range.until", { date: to ?? "" });
+}
+const chips = computed(() => appliedFacets(props.facets, props.modelValue, {
+  range: formatRange,
+  text: (value) => `\u201C${value}\u201D`
+}));
+function remove(chip) {
+  emit("update:modelValue", clearFacetValue(props.modelValue, chip.facetKey, chip.value));
+}
+function clearAll() {
+  emit("update:modelValue", {});
+}
+</script>
+
+<template>
+  <div
+    v-if="chips.length"
+    class="flex flex-wrap items-center gap-1.5 border-t border-black/[0.04] bg-white px-4 py-2.5"
+    role="group"
+    :aria-label="t('shared.facetchips.aria')"
+  >
+    <span
+      v-for="chip in chips"
+      :key="chip.id"
+      class="inline-flex items-center gap-1.5 rounded-full bg-primary/10 py-0.5 pr-1 pl-2.5 text-xs font-medium text-primary"
+    >
+      <span v-if="showFacet" class="font-normal opacity-60">{{ chip.facetLabel }}</span>
+      <span class="max-w-60 truncate">{{ chip.label }}</span>
+      <button
+        type="button"
+        class="cursor-pointer rounded-full opacity-60 transition-opacity hover:opacity-100"
+        :aria-label="t('shared.facetchips.remove', { facet: chip.facetLabel, value: chip.label })"
+        @click="remove(chip)"
+      >
+        <CloseCircle :size="13" weight="Bold" />
+      </button>
+    </span>
+    <!-- Only past two. With one chip beside it, "clear all" is a second control
+         for what the cross next to it already does. -->
+    <button
+      v-if="chips.length > 1"
+      type="button"
+      class="ml-1 cursor-pointer text-xs text-muted-foreground underline decoration-from-font underline-offset-2 hover:text-foreground"
+      @click="clearAll"
+    >
+      {{ t("shared.facetchips.clearAll") }}
+    </button>
+  </div>
+</template>

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

@@ -0,0 +1,17 @@
+import type { Facet, FacetSelection } from '../../lib/facets.js';
+type __VLS_Props = {
+    facets: Facet[];
+    modelValue: FacetSelection;
+    /**
+     * Say which facet each chip belongs to. On where "Draft" could be a status or
+     * a lifecycle; off where the values speak for themselves.
+     */
+    showFacet?: boolean;
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    "update:modelValue": (value: FacetSelection) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    "onUpdate:modelValue"?: ((value: FacetSelection) => any) | undefined;
+}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;

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

@@ -0,0 +1,21 @@
+import type { Facet, FacetSelection } from '../../lib/facets.js';
+type __VLS_Props = {
+    /** Every dimension this list can be narrowed by. All of them live here. */
+    facets: Facet[];
+    /** What is applied right now. */
+    modelValue: FacetSelection;
+    size?: 'sm' | 'default';
+};
+declare const __VLS_export: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    reset: () => any;
+    "update:modelValue": (value: FacetSelection) => any;
+    apply: (value: FacetSelection) => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onReset?: (() => any) | undefined;
+    "onUpdate:modelValue"?: ((value: FacetSelection) => any) | undefined;
+    onApply?: ((value: FacetSelection) => any) | undefined;
+}>, {
+    size: "sm" | "default";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: typeof __VLS_export;
+export default _default;