@leavepulse/ui 0.74.2 → 0.76.0

package/src/composables/useTableFilterChoice.ts

@@ -0,0 +1,51 @@
+import { computed, toValue, type MaybeRefOrGetter, type Ref, type WritableComputedRef } from "vue"
+import { shownValues, showOnly, type TableFilters } from "../components/tableFilter"
+
+/**
+ * One column of LpTable's header filters as a single choice, for a control
+ * above the table (LpSegmented, LpSelect, a row of stat tiles) that filters
+ * the same thing as the column's funnel. Both then read and write one state:
+ * picking a choice sets the funnel, and narrowing the funnel to a choice's
+ * values lights that choice up.
+ *
+ * `choices` maps each choice to the values it shows; `null` is the choice
+ * that shows everything. `values` is the column's vocabulary, by default every
+ * value the choices name. The ref reads `undefined` while the funnel holds a
+ * mix no choice describes, so the control shows nothing picked rather than a
+ * choice that is not what the table shows.
+ */
+export function useTableFilterChoice<C extends string>(
+  filters: Ref<TableFilters>,
+  column: string,
+  choices: Record<C, readonly unknown[] | null>,
+  values?: MaybeRefOrGetter<readonly unknown[]>,
+): WritableComputedRef<C | undefined> {
+  const entries = Object.entries(choices) as [C, readonly unknown[] | null][]
+  const vocabulary = computed(() => {
+    const own = values === undefined ? undefined : toValue(values)
+    return own ?? [...new Set(entries.flatMap(([, shown]) => shown ?? []))]
+  })
+
+  return computed({
+    get: () => {
+      const all = vocabulary.value
+      const shown = new Set(shownValues(all, filters.value[column]))
+      for (const [choice, keep] of entries) {
+        if (keep === null) {
+          if (shown.size === all.length) return choice
+          continue
+        }
+        if (keep.length === shown.size && keep.every((v) => shown.has(v))) return choice
+      }
+      return undefined
+    },
+    set: (choice) => {
+      const keep = choice === undefined ? null : choices[choice]
+      const hidden = keep === null ? [] : showOnly(vocabulary.value, keep)
+      const next = { ...filters.value }
+      delete next[column]
+      if (hidden.length) next[column] = hidden
+      filters.value = next
+    },
+  })
+}

package/src/index.ts

@@ -220,6 +220,9 @@ export type { SortState, TableColumn, TablePage, TableQuery } from "./components
 export type { TableLabels } from "./components/LpTable.vue"
 export type { TableExportOptions } from "./components/LpTable.vue"
 export { compareValues } from "./components/tableSort"
+export { filterRows, showOnly, shownValues } from "./components/tableFilter"
+export type { TableFilters } from "./components/tableFilter"
+export { useTableFilterChoice } from "./composables/useTableFilterChoice"
 export { resolveRowMenu } from "./components/tableRowMenu"
 export type { TableRowMenu, TableRowMenuResult } from "./components/tableRowMenu"
 export { default as LpTableOfContents } from "./components/LpTableOfContents.vue"
@@ -355,6 +358,9 @@ export type { UseGamepadNavOptions } from "./composables/useGamepadNav"
 export { focusableIn, nextInDirection } from "./composables/spatialNav"
 export type { Box, Direction } from "./composables/spatialNav"
 export { provideGlass, useGlass } from "./composables/useGlass"
+export { provideOverlayHistory, useOverlayHistory, useStepHistory } from "./composables/useOverlayHistory"
+export type { OverlayHistoryMode, OverlayHistoryOptions, ProvideOverlayHistoryOptions, StepHistoryOptions } from "./composables/useOverlayHistory"
+export type { HistoryRouter } from "./composables/overlayHistory"
 export { LP_CONFIG, lpConfig, mergeConfig, provideLpConfig, useLabels, useLinkComponent, useLpConfig } from "./composables/useLpConfig"
 export type { KitStorage, LabelScope, LpConfig } from "./composables/useLpConfig"
 export { browserStorage, useKitStorage, usePersisted } from "./composables/usePersisted"

package/dist/assets/LpTabs-CDchzoRL.css

@@ -1,18 +0,0 @@
-
-.lp-tab-badge-enter-active[data-v-9f51a497],
-.lp-tab-badge-leave-active[data-v-9f51a497] {
-  transition:
-    opacity var(--duration-fast) var(--ease-emphasized),
-    transform var(--duration-fast) var(--ease-emphasized);
-}
-.lp-tab-badge-enter-from[data-v-9f51a497],
-.lp-tab-badge-leave-to[data-v-9f51a497] {
-  opacity: 0;
-  transform: scale(0.6);
-}
-@media (prefers-reduced-motion: reduce) {
-.lp-tab-badge-enter-active[data-v-9f51a497],
-  .lp-tab-badge-leave-active[data-v-9f51a497] {
-    transition: none;
-}
-}