@revenexx/studio-shared 0.3.1 → 0.3.3

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,16 @@
+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 _default: 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>;
+export default _default;

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

@@ -0,0 +1,20 @@
+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 _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    apply: (value: FacetSelection) => any;
+    "update:modelValue": (value: FacetSelection) => any;
+    reset: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onApply?: ((value: FacetSelection) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: FacetSelection) => any) | undefined;
+    onReset?: (() => any) | undefined;
+}>, {
+    size: "sm" | "default";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -0,0 +1,359 @@
+<script setup>
+import { computed, ref, watch } from "vue";
+import { AltArrowDown, AltArrowRight, Filter, Magnifier } from "#solar-icons";
+import {
+  Button,
+  Checkbox,
+  Input,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  ToolbarFilterTrigger
+} from "@revenexx/studio";
+import {
+  allNodes,
+  copySelection,
+  countInFacet,
+  countSelected,
+  expandTo,
+  flattenNodes,
+  initialExpanded,
+  isEmptyFacetValue,
+  sameSelection,
+  setFacetValue,
+  toggleFacetValue
+} from "../../lib/facets";
+const props = defineProps({
+  facets: { type: Array, required: true },
+  modelValue: { type: Object, required: true },
+  size: { type: String, required: false, default: "sm" }
+});
+const emit = defineEmits(["update:modelValue", "apply", "reset"]);
+const t = useT();
+const open = ref(false);
+const draft = ref(copySelection(props.modelValue));
+const search = ref("");
+const panelFacets = computed(() => props.facets);
+const activeKey = ref("");
+const activeFacet = computed(() => panelFacets.value.find((f) => f.key === activeKey.value) ?? panelFacets.value[0]);
+watch([panelFacets, open], () => {
+  if (!panelFacets.value.some((f) => f.key === activeKey.value)) {
+    activeKey.value = panelFacets.value[0]?.key ?? "";
+  }
+}, { immediate: true });
+watch(open, (isOpen) => {
+  if (isOpen) draft.value = copySelection(props.modelValue);
+  else search.value = "";
+});
+watch(() => props.modelValue, (value) => {
+  if (!open.value) draft.value = copySelection(value);
+}, { deep: true });
+const appliedCount = computed(() => countSelected(props.facets, props.modelValue));
+const dirty = computed(() => !sameSelection(draft.value, props.modelValue));
+const query = computed(() => search.value.trim().toLowerCase());
+function matches(facet, label) {
+  if (!query.value) return true;
+  if (facet.label.toLowerCase().includes(query.value)) return true;
+  return label.toLowerCase().includes(query.value);
+}
+function visibleOptions(facet) {
+  return (facet.options ?? []).filter((option) => matches(facet, option.label));
+}
+const visibleFacets = computed(() => {
+  if (!query.value) return panelFacets.value;
+  return panelFacets.value.filter((facet) => {
+    if (facet.label.toLowerCase().includes(query.value)) return true;
+    if (facet.kind === "check") return visibleOptions(facet).length > 0;
+    if (facet.kind === "tree") return visibleNodes(facet).length > 0;
+    return false;
+  });
+});
+function isTicked(key, value) {
+  const current = draft.value[key];
+  return Array.isArray(current) && current.includes(value);
+}
+function tick(key, value, on) {
+  const single = props.facets.find((f) => f.key === key)?.single;
+  draft.value = toggleFacetValue(draft.value, key, value, on, { single });
+}
+function textValue(key) {
+  const current = draft.value[key];
+  return typeof current === "string" ? current : "";
+}
+function setText(key, value) {
+  draft.value = setFacetValue(draft.value, key, value);
+}
+function range(key) {
+  const current = draft.value[key];
+  return current && typeof current === "object" && !Array.isArray(current) ? current : {};
+}
+function setBound(key, bound, value) {
+  draft.value = setFacetValue(draft.value, key, { ...range(key), [bound]: value });
+}
+const expanded = ref({});
+function expandedFor(facet) {
+  const existing = expanded.value[facet.key];
+  if (existing) return existing;
+  const seed = initialExpanded(facet.nodes ?? []);
+  const applied = props.modelValue[facet.key];
+  if (Array.isArray(applied)) {
+    for (const value of applied) {
+      for (const id of expandTo(facet.nodes ?? [], value)) seed.add(id);
+    }
+  }
+  expanded.value[facet.key] = seed;
+  return seed;
+}
+function toggleBranch(facet, value) {
+  const set = expandedFor(facet);
+  const next = new Set(set);
+  if (next.has(value)) next.delete(value);
+  else next.add(value);
+  expanded.value = { ...expanded.value, [facet.key]: next };
+}
+function isExpanded(facet, value) {
+  return expandedFor(facet).has(value);
+}
+function visibleNodes(facet) {
+  if (query.value) {
+    return allNodes(facet.nodes ?? []).filter((node) => node.label.toLowerCase().includes(query.value)).map((node) => ({ node, depth: 0 }));
+  }
+  return flattenNodes(facet.nodes ?? [], expandedFor(facet));
+}
+function apply() {
+  const next = copySelection(draft.value);
+  emit("update:modelValue", next);
+  emit("apply", next);
+  open.value = false;
+}
+function reset() {
+  draft.value = {};
+  emit("update:modelValue", {});
+  emit("reset");
+  open.value = false;
+}
+const nothingToReset = computed(() => Object.keys(draft.value).every((key) => isEmptyFacetValue(draft.value[key])) && appliedCount.value === 0);
+</script>
+
+<template>
+  <Popover v-model:open="open">
+    <PopoverTrigger as-child>
+      <ToolbarFilterTrigger
+        icon-only
+        :active="appliedCount > 0"
+        :count="appliedCount"
+        :label="t('shared.facetpanel.trigger.label')"
+        :size="size"
+      >
+        <template #icon>
+          <Filter :size="14" weight="BoldDuotone" />
+        </template>
+      </ToolbarFilterTrigger>
+    </PopoverTrigger>
+
+    <PopoverContent
+      align="start"
+      class="w-[34rem] max-w-[calc(100vw-2rem)] overflow-hidden p-0"
+    >
+      <div class="relative border-b border-border">
+        <Magnifier
+          :size="14"
+          class="pointer-events-none absolute top-1/2 left-3 -translate-y-1/2 text-muted-foreground"
+        />
+        <input
+          v-model="search"
+          type="search"
+          :placeholder="t('shared.facetpanel.search.placeholder')"
+          :aria-label="t('shared.facetpanel.search.placeholder')"
+          class="h-10 w-full bg-transparent pr-3 pl-9 text-sm outline-hidden placeholder:text-muted-foreground [&::-webkit-search-cancel-button]:hidden"
+        >
+      </div>
+
+      <!-- Facets left, the one being edited right. Fixed size at two facets or
+           twenty; the rail's counts are what is left of "everything at once". -->
+      <div class="flex h-72">
+        <div
+          class="w-44 shrink-0 overflow-y-auto border-r border-border p-1.5"
+          role="tablist"
+          :aria-label="t('shared.facetpanel.rail.aria')"
+        >
+          <button
+            v-for="facet in visibleFacets"
+            :key="facet.key"
+            type="button"
+            role="tab"
+            :aria-selected="facet.key === activeFacet?.key"
+            class="flex w-full cursor-pointer items-center gap-2 rounded-md px-2.5 py-1.5 text-left text-sm transition-colors"
+            :class="facet.key === activeFacet?.key ? 'bg-primary/10 font-medium text-primary' : 'text-muted-foreground hover:bg-muted hover:text-foreground'"
+            @click="activeKey = facet.key"
+          >
+            <span class="min-w-0 flex-1 truncate">{{ facet.label }}</span>
+            <span
+              v-if="countInFacet(draft, facet.key)"
+              class="flex h-4 min-w-4 items-center justify-center rounded-full px-1 text-[0.625rem] font-semibold tabular-nums"
+              :class="facet.key === activeFacet?.key ? 'bg-primary text-primary-foreground' : 'bg-primary/15 text-primary'"
+            >{{ countInFacet(draft, facet.key) }}</span>
+          </button>
+          <p v-if="!visibleFacets.length" class="px-2.5 py-4 text-center text-sm text-muted-foreground">
+            {{ t("shared.facetpanel.empty.noFacet") }}
+          </p>
+        </div>
+
+        <div
+          v-if="activeFacet"
+          :key="activeFacet.key"
+          role="tabpanel"
+          class="min-w-0 flex-1 overflow-y-auto p-3"
+        >
+          <!-- Loading its options. A skeleton rather than an empty list, which
+               otherwise reads as "this dimension has no values". -->
+          <div v-if="activeFacet.loading" class="space-y-1.5 p-1">
+            <div v-for="i in 4" :key="i" class="h-6 animate-pulse rounded-md bg-muted" />
+          </div>
+
+          <!-- A set of values. Rows sit close and the hover band separates
+               them, which also makes each a comfortable target. -->
+          <div v-else-if="activeFacet.kind === 'check'" class="space-y-px">
+            <label
+              v-for="option in visibleOptions(activeFacet)"
+              :key="option.value"
+              class="flex items-start gap-2.5 rounded-md px-2 py-1.5 text-sm hover:bg-muted"
+              :class="option.disabled ? 'pointer-events-none opacity-45' : 'cursor-pointer'"
+            >
+              <Checkbox
+                class="mt-0.5"
+                :model-value="isTicked(activeFacet.key, option.value)"
+                :disabled="option.disabled"
+                @update:model-value="(v) => tick(activeFacet.key, option.value, v === true)"
+              />
+              <!-- Wraps rather than truncates: a label reading "Net 30 days,
+                   2% early settlement" is unusable cut off, and the pane cannot
+                   grow to fit it without becoming the layout it replaced. -->
+              <span class="min-w-0 flex-1">{{ option.label }}</span>
+              <span
+                v-if="option.count !== void 0"
+                class="shrink-0 tabular-nums text-muted-foreground"
+              >{{ option.count }}</span>
+            </label>
+            <p v-if="!visibleOptions(activeFacet).length" class="px-1.5 py-6 text-center text-sm text-muted-foreground">
+              {{ query ? t("shared.facetpanel.empty.noMatch", { query: search }) : t("shared.facetpanel.empty.noOption") }}
+            </p>
+          </div>
+
+          <!-- A hierarchy. The caret opens a branch; the box picks it. Two
+               targets, because "show me what is under Tools" and "narrow to
+               Tools" are different instructions and one control for both makes
+               every browse click a filter change. -->
+          <div v-else-if="activeFacet.kind === 'tree'" class="space-y-px">
+            <div
+              v-for="{ node, depth } in visibleNodes(activeFacet)"
+              :key="node.value"
+              class="flex items-start gap-1 rounded-md pr-2 text-sm hover:bg-muted"
+              :style="{ paddingLeft: `${depth * 18}px` }"
+            >
+              <!--
+                A chevron, at Bold weight.
+
+                Weight is the whole point here. The `▸` character it started as
+                rendered like a stray tick above the baseline; the Linear icon
+                that replaced it was two hairlines that read as a smudge beside
+                the checkbox. Bold gives the arrow enough body to be seen as a
+                control at this size without becoming the filled block a duotone
+                turns into at 15px — which would outweigh the checkbox next to
+                it, and the checkbox is what actually changes the list.
+
+                Only a branch gets one. A leaf keeps the spacer: an arrow with
+                nothing under it is a promise the row cannot keep, and the
+                absence is the cheapest way to see at a glance which rows go
+                deeper.
+              -->
+              <button
+                v-if="node.children?.length && !query"
+                type="button"
+                class="mt-1 flex size-5 shrink-0 cursor-pointer items-center justify-center rounded text-muted-foreground transition-colors hover:text-primary"
+                :aria-expanded="isExpanded(activeFacet, node.value)"
+                :aria-label="isExpanded(activeFacet, node.value) ? t('shared.facetpanel.tree.collapse', { label: node.label }) : t('shared.facetpanel.tree.expand', { label: node.label })"
+                @click="toggleBranch(activeFacet, node.value)"
+              >
+                <AltArrowDown v-if="isExpanded(activeFacet, node.value)" :size="14" weight="Bold" />
+                <AltArrowRight v-else :size="14" weight="Bold" />
+              </button>
+              <span v-else class="mt-1 size-5 shrink-0" />
+              <label class="flex min-w-0 flex-1 cursor-pointer items-start gap-2.5 py-1.5">
+                <Checkbox
+                  class="mt-0.5"
+                  :model-value="isTicked(activeFacet.key, node.value)"
+                  @update:model-value="(v) => tick(activeFacet.key, node.value, v === true)"
+                />
+                <span class="min-w-0 flex-1">{{ node.label }}</span>
+                <span
+                  v-if="node.count !== void 0"
+                  class="shrink-0 tabular-nums text-muted-foreground"
+                >{{ node.count }}</span>
+              </label>
+            </div>
+            <p v-if="!visibleNodes(activeFacet).length" class="px-1.5 py-6 text-center text-sm text-muted-foreground">
+              {{ query ? t("shared.facetpanel.empty.noMatch", { query: search }) : t("shared.facetpanel.empty.noOption") }}
+            </p>
+          </div>
+
+          <!-- A typed string. Still a facet, still committed with the rest —
+               which is the whole reason it is not a second box in the toolbar. -->
+          <div v-else-if="activeFacet.kind === 'text'" class="p-1">
+            <Input
+              :model-value="textValue(activeFacet.key)"
+              :placeholder="activeFacet.placeholder || activeFacet.label"
+              :aria-label="activeFacet.label"
+              class="h-8 text-sm"
+              @update:model-value="(v) => setText(activeFacet.key, String(v))"
+              @keydown.enter="apply"
+            />
+          </div>
+
+          <!-- A bounded range. Either side alone is a real answer — "everything
+               since the migration" has no upper bound. -->
+          <div v-else-if="activeFacet.kind === 'date-range'" class="flex items-center gap-2 p-1">
+            <input
+              type="date"
+              :value="range(activeFacet.key).from ?? ''"
+              :aria-label="t('shared.facetpanel.range.from', { label: activeFacet.label })"
+              class="h-8 w-full rounded-md border border-input bg-background px-2 text-sm shadow-xs"
+              @input="setBound(activeFacet.key, 'from', $event.target.value)"
+            >
+            <span class="text-xs text-muted-foreground">–</span>
+            <input
+              type="date"
+              :value="range(activeFacet.key).to ?? ''"
+              :aria-label="t('shared.facetpanel.range.to', { label: activeFacet.label })"
+              class="h-8 w-full rounded-md border border-input bg-background px-2 text-sm shadow-xs"
+              @input="setBound(activeFacet.key, 'to', $event.target.value)"
+            >
+          </div>
+
+          <p v-if="activeFacet.hint && !activeFacet.loading" class="px-1.5 pt-3 text-xs text-muted-foreground">
+            {{ activeFacet.hint }}
+          </p>
+        </div>
+      </div>
+
+      <!--
+        The commit, in a bar of its own so it sits somewhere fixed rather than
+        floating after the last facet. A ghost and a primary at the same height
+        as every other button in the product — the two flush square-cornered
+        rectangles this pattern is usually drawn with read as a different
+        product, and did so at the one place where the decision gets made.
+
+        The dot is the only thing saying the draft differs from what the list is
+        showing.
+      -->
+      <div class="flex items-center justify-between gap-2 border-t border-border bg-muted/30 px-3 py-2.5">
+        <Button variant="ghost" size="sm" :disabled="nothingToReset" @click="reset">
+          {{ t("shared.facetpanel.action.reset") }}
+        </Button>
+        <Button size="sm" @click="apply">
+          {{ t("shared.facetpanel.action.apply") }}<span v-if="dirty" class="ml-1 opacity-70">•</span>
+        </Button>
+      </div>
+    </PopoverContent>
+  </Popover>
+</template>

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

@@ -0,0 +1,20 @@
+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 _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {
+    apply: (value: FacetSelection) => any;
+    "update:modelValue": (value: FacetSelection) => any;
+    reset: () => any;
+}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{
+    onApply?: ((value: FacetSelection) => any) | undefined;
+    "onUpdate:modelValue"?: ((value: FacetSelection) => any) | undefined;
+    onReset?: (() => any) | undefined;
+}>, {
+    size: "sm" | "default";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+export default _default;

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

@@ -1,6 +1,10 @@
 import type { DataTableSavedViews } from './types.js';
 type __VLS_Props = {
     config: DataTableSavedViews;
+    /** Matches the row it sits in; `sm` is the 32px square its neighbours are. */
+    size?: 'sm' | 'default';
 };
-declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
+declare const _default: import("vue").DefineComponent<__VLS_Props, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<__VLS_Props> & Readonly<{}>, {
+    size: "sm" | "default";
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, false, {}, any>;
 export default _default;