@ulu/frontend-vue 0.2.0-beta.12 → 0.2.0-beta.14

package/dist/components/collapsible/UluTabGroup.vue.d.ts

@@ -5,9 +5,11 @@ type __VLS_WithTemplateSlots<T, S> = T & (new () => {
 });
 declare const __VLS_component: import('vue').DefineComponent<{}, {
     vertical: boolean;
+    modifiers?: string | unknown[] | undefined;
     defaultIndex?: number | undefined;
     $props: {
         readonly vertical?: boolean | undefined;
+        readonly modifiers?: string | unknown[] | undefined;
         readonly defaultIndex?: number | undefined;
     };
 }, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, any>;

package/dist/components/collapsible/UluTabGroup.vue.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UluTabGroup.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/collapsible/UluTabGroup.vue"],"names":[],"mappings":"AAYA;wBAwHqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAVjC;;;;;;;2OAOG"}
+{"version":3,"file":"UluTabGroup.vue.d.ts","sourceRoot":"","sources":["../../../lib/components/collapsible/UluTabGroup.vue"],"names":[],"mappings":"AAoBA;wBAmJqB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;;6BAEtE,CAAC,EAAE,CAAC;;;AAVjC;;;;;;;;;2OAOG"}

package/dist/components/collapsible/UluTabGroup.vue.js

@@ -1,6 +1,7 @@
-import { createBlock as r, openBlock as l, unref as o, withCtx as n, createElementVNode as c, normalizeClass as i, renderSlot as s, normalizeProps as u, guardReactiveProps as d } from "vue";
-import { TabGroup as f } from "@headlessui/vue";
-const b = /* @__PURE__ */ Object.assign({
+import { createBlock as l, openBlock as i, unref as t, withCtx as n, createElementVNode as d, mergeProps as c, renderSlot as u, normalizeProps as f, guardReactiveProps as m } from "vue";
+import { TabGroup as p } from "@headlessui/vue";
+import { useModifiers as v } from "../../composables/useModifiers.js";
+const h = /* @__PURE__ */ Object.assign({
   inheritAttrs: !1
 }, {
   __name: "UluTabGroup",
@@ -12,26 +13,34 @@ const b = /* @__PURE__ */ Object.assign({
     /**
      * Whether or not to use vertical layout
      */
-    vertical: Boolean
+    vertical: Boolean,
+    /**
+     * Class modifiers (ie. 'transparent', 'secondary', etc)
+     */
+    modifiers: [String, Array]
   },
   setup(e) {
-    return (t, m) => (l(), r(o(f), {
+    const a = e, { resolvedModifiers: s } = v({ props: a, baseClass: "tabs" });
+    return (r, b) => (i(), l(t(p), {
       defaultIndex: e.defaultIndex,
       vertical: e.vertical
     }, {
-      default: n((a) => [
-        c("div", {
-          class: i(["tabs", {
-            "tabs--vertical": e.vertical
-          }])
-        }, [
-          s(t.$slots, "default", u(d(a)))
-        ], 2)
+      default: n((o) => [
+        d("div", c(r.$attrs, {
+          class: ["tabs", [
+            t(s),
+            {
+              "tabs--vertical": e.vertical
+            }
+          ]]
+        }), [
+          u(r.$slots, "default", f(m(o)))
+        ], 16)
       ]),
       _: 3
     }, 8, ["defaultIndex", "vertical"]));
   }
 });
 export {
-  b as default
+  h as default
 };

package/dist/components/systems/facets/useFacets.d.ts

@@ -14,6 +14,7 @@
  * @param {Object} [options.urlSync] - Optional configuration to sync state with URL.
  * @param {import('vue-router').Router} [options.urlSync.router] - The Vue Router instance.
  * @param {import('vue-router').RouteLocationNormalizedLoaded} [options.urlSync.route] - The current route instance.
+ * @param {Function} [options.isPinned] - A function that receives an item and returns true if it should be pinned to the top of the results.
  */
 export function useFacets(allItems: import('vue').Ref<Array<Object>>, options?: {
     initialFacets?: any[] | undefined;
@@ -29,6 +30,7 @@ export function useFacets(allItems: import('vue').Ref<Array<Object>>, options?:
         router?: import('vue-router').Router | undefined;
         route?: import('vue-router').RouteLocationNormalizedLoadedGeneric | undefined;
     } | undefined;
+    isPinned?: Function | undefined;
 }): {
     facets: import('vue').Ref<never[], never[]>;
     searchValue: import('vue').Ref<string, string>;
@@ -51,6 +53,7 @@ export function useFacets(allItems: import('vue').Ref<Array<Object>>, options?:
         } | undefined;
     }>;
     displayItems: import('vue').ComputedRef<any>;
+    pinnedItems: import('vue').ComputedRef<any[] | never[]>;
     selectedFacets: import('vue').ComputedRef<any[]>;
     clearFilters: () => void;
     handleFacetChange: ({ groupUid, facetUid, selected }: {

package/dist/components/systems/facets/useFacets.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"useFacets.d.ts","sourceRoot":"","sources":["../../../../lib/components/systems/facets/useFacets.js"],"names":[],"mappings":"AA+GA;;;;;;;;;;;;;;;;GAgBG;AACH,oCAfW,OAAO,KAAK,EAAE,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,YAExC;IAAwB,aAAa;IACb,WAAW;IACV,kBAAkB;IAClB,eAAe;IACd,cAAc;IACf,cAAc;IACd,aAAa;IACX,YAAY;IACd,SAAS;IACT,OAAO;;;;CAGlC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkWA"}
+{"version":3,"file":"useFacets.d.ts","sourceRoot":"","sources":["../../../../lib/components/systems/facets/useFacets.js"],"names":[],"mappings":"AAiHA;;;;;;;;;;;;;;;;;GAiBG;AACH,oCAhBW,OAAO,KAAK,EAAE,GAAG,CAAC,KAAK,CAAC,MAAM,CAAC,CAAC,YAExC;IAAwB,aAAa;IACb,WAAW;IACV,kBAAkB;IAClB,eAAe;IACd,cAAc;IACf,cAAc;IACd,aAAa;IACX,YAAY;IACd,SAAS;IACT,OAAO;;;;IAGL,QAAQ;CACrC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+WA"}

package/dist/components/systems/facets/useFacets.js

@@ -1,18 +1,19 @@
-import { ref as T, computed as F, watch as $, watchPostEffect as G } from "vue";
-import H from "fuse.js";
-function K(u) {
+import { ref as T, computed as E, watch as $, watchPostEffect as X } from "vue";
+import Y from "fuse.js";
+const Z = (u) => typeof u == "function";
+function ee(u) {
   const h = /* @__PURE__ */ new Set();
   for (const d of u)
-    for (const c of d)
-      h.add(c);
+    for (const a of d)
+      h.add(a);
   return h;
 }
 function k(u) {
   if (!u || u.length === 0) return /* @__PURE__ */ new Set();
-  const h = u.sort((c, S) => c.size - S.size), d = new Set(h[0]);
-  for (let c = 1; c < h.length; c++) {
+  const h = u.sort((a, S) => a.size - S.size), d = new Set(h[0]);
+  for (let a = 1; a < h.length; a++) {
     for (const S of d)
-      h[c].has(S) || d.delete(S);
+      h[a].has(S) || d.delete(S);
     if (d.size === 0) break;
   }
   return d;
@@ -20,207 +21,218 @@ function k(u) {
 function O(u, h, d) {
   if (!u || u.length === 0)
     return d;
-  const c = u.map((S) => {
-    const z = S.children.map((b) => {
-      const v = `${S.uid}:${b.uid}`;
+  const a = u.map((S) => {
+    const z = S.children.map((V) => {
+      const v = `${S.uid}:${V.uid}`;
       return h.get(v) || /* @__PURE__ */ new Set();
     });
-    return S.match === "all" ? k(z) : K(z);
+    return S.match === "all" ? k(z) : ee(z);
   });
-  return k(c);
+  return k(a);
 }
-function Q(u, h) {
+function te(u, h) {
   return !h || !Array.isArray(h) ? [] : h.map((d) => {
-    const c = /* @__PURE__ */ new Set(), S = d.getValue || ((v) => v[d.uid]);
+    const a = /* @__PURE__ */ new Set(), S = d.getValue || ((v) => v[d.uid]);
     u.forEach((v) => {
-      const E = S(v);
-      Array.isArray(E) ? E.forEach((I) => I && c.add(I)) : E && c.add(E);
+      const F = S(v);
+      Array.isArray(F) ? F.forEach((A) => A && a.add(A)) : F && a.add(F);
     });
-    const z = d.getLabel || ((v) => v), b = [...c].map((v) => ({
+    const z = d.getLabel || ((v) => v), V = [...a].map((v) => ({
       uid: v,
       label: z(v),
       selected: !1
     }));
-    return b.sort((v, E) => String(v.label).localeCompare(String(E.label))), {
+    return V.sort((v, F) => String(v.label).localeCompare(String(F.label))), {
       ...d,
-      children: b
+      children: V
     };
   });
 }
-function ee(u, h = {}) {
+function re(u, h = {}) {
   const {
     initialFacets: d,
-    facetFields: c,
+    facetFields: a,
     initialSearchValue: S = "",
     initialSortType: z = "az",
-    noDefaultSorts: b = !1,
+    noDefaultSorts: V = !1,
     extraSortTypes: v = {},
-    searchOptions: E = {},
-    getSortValue: I = (e) => e.title || e.label || "",
+    searchOptions: F = {},
+    getSortValue: A = (e) => e.title || e.label || "",
     countMode: q = "none",
     // 'none', 'simple', 'intuitive'
-    urlSync: U
-  } = h, B = (e) => e.sort((t, a) => {
-    const n = I(t), s = I(a);
+    urlSync: U,
+    isPinned: B
+  } = h, _ = (e) => e.sort((t, r) => {
+    const n = A(t), s = A(r);
     return n && s ? String(n).localeCompare(String(s)) : n ? -1 : s ? 1 : 0;
-  }), N = {
-    az: { text: "A-Z", sort: B },
-    za: { text: "Z-A", sort: (e) => B(e).reverse() }
+  }), j = {
+    az: { text: "A-Z", sort: _ },
+    za: { text: "Z-A", sort: (e) => _(e).reverse() }
   };
-  function Z(e) {
+  function D(e) {
     return (e || []).map((t) => ({
       ...t,
       open: t.open || !1,
-      children: t.children.map((a) => ({
-        ...a,
-        selected: a.selected || !1
+      children: t.children.map((r) => ({
+        ...r,
+        selected: r.selected || !1
       })),
       selectedCount: 0
     }));
   }
-  const f = T([]), x = T(S), V = T(z), j = F(() => !c || !u.value?.length ? null : Q(u.value, c)), _ = F(() => ({
-    ...b ? {} : N,
+  const f = T([]), x = T(S), I = T(z), G = E(() => !a || !u.value?.length ? null : te(u.value, a)), J = E(() => ({
+    ...V ? {} : j,
     ...v
-  })), M = F(() => {
+  })), M = E(() => {
     const e = /* @__PURE__ */ new Map(), t = y.value;
-    if (!t || !c) return e;
-    const a = new Map(c.map((n) => {
+    if (!t || !a) return e;
+    const r = new Map(a.map((n) => {
       const s = n.getValue || ((o) => o[n.uid]);
       return [n.uid, s];
     }));
     for (let n = 0; n < t.length; n++) {
       const s = t[n];
-      for (const o of c) {
-        const r = a.get(o.uid)(s), i = Array.isArray(r) ? r : r ? [r] : [];
-        for (const m of i) {
+      for (const o of a) {
+        const l = r.get(o.uid)(s), c = Array.isArray(l) ? l : l ? [l] : [];
+        for (const m of c) {
           const p = `${o.uid}:${m}`;
           e.has(p) || e.set(p, /* @__PURE__ */ new Set()), e.get(p).add(n);
         }
       }
     }
     return e;
-  }), D = F(() => ({
+  }), R = E(() => ({
     shouldSort: !0,
     keys: ["title", "label", "description", "author"],
-    ...E
-  })), y = F(() => x.value?.length ? new H(u.value, D.value).search(x.value).map((t) => t.item) : u.value), A = F(() => {
+    ...F
+  })), y = E(() => x.value?.length ? new Y(u.value, R.value).search(x.value).map((t) => t.item) : u.value), b = E(() => {
     const e = [];
     return f.value.forEach((t) => {
-      const a = t.children.filter((n) => n.selected);
-      a.length > 0 && e.push({ ...t, children: a });
+      const r = t.children.filter((n) => n.selected);
+      r.length > 0 && e.push({ ...t, children: r });
     }), e;
-  }), J = F(() => {
-    if (!A.value.length)
+  }), L = E(() => {
+    if (!b.value.length)
       return y.value;
     const e = M.value;
-    if (e.size === 0 && y.value.length > 0 && c?.length > 0)
+    if (e.size === 0 && y.value.length > 0 && a?.length > 0)
       return [];
-    const t = new Set(y.value.map((s, o) => o)), a = O(A.value, e, t), n = [];
-    for (const s of a)
+    const t = new Set(y.value.map((s, o) => o)), r = O(b.value, e, t), n = [];
+    for (const s of r)
       n.push(y.value[s]);
     return n;
-  }), P = F(() => {
-    const e = _.value[V.value]?.sort;
-    return typeof e != "function" ? J.value : e([...J.value]);
-  });
-  function R() {
+  }), N = E(() => {
+    const e = J.value[I.value]?.sort;
+    let t = Z(e) ? e([...L.value]) : [...L.value];
+    if (Z(B)) {
+      const r = [], n = [];
+      return t.forEach((s) => B(s) ? r.push(s) : n.push(s)), { pinned: r, unpinned: n, all: [...r, ...n] };
+    }
+    return { pinned: [], unpinned: t, all: t };
+  }), W = E(() => N.value.all), H = E(() => N.value.pinned);
+  function K() {
     f.value.forEach((e) => {
       e.children && e.children.forEach((t) => t.selected = !1), e.selectedCount = 0;
     });
   }
-  function L({ groupUid: e, facetUid: t, selected: a }) {
+  function P({ groupUid: e, facetUid: t, selected: r }) {
     const n = f.value.find((s) => s.uid === e);
     if (n) {
-      !n.multiple && a && n.children.forEach((o) => {
+      !n.multiple && r && n.children.forEach((o) => {
         o.uid !== t && (o.selected = !1);
       });
       const s = n.children.find((o) => o.uid === t);
-      s && (s.selected = a), n.selectedCount = n.children.filter((o) => o.selected).length;
+      s && (s.selected = r), n.selectedCount = n.children.filter((o) => o.selected).length;
     }
   }
-  if ($(j, (e) => {
-    const t = Z(d || e);
-    t.forEach((a) => {
-      a.selectedCount = a.children.filter((n) => n.selected).length;
+  if ($(G, (e) => {
+    const t = D(d || e);
+    t.forEach((r) => {
+      r.selectedCount = r.children.filter((n) => n.selected).length;
     }), f.value = t;
-  }, { immediate: !0 }), $([A, y], ([e, t], [a, n]) => {
-    if (!(q === "none" || !f.value.length) && !(e === a && t === n)) {
+  }, { immediate: !0 }), $([b, y], ([e, t], [r, n]) => {
+    if (!(q === "none" || !f.value.length) && !(e === r && t === n)) {
       if (q === "simple") {
         const s = M.value;
-        if (s.size === 0 && y.value.length > 0 && c?.length > 0)
+        if (s.size === 0 && y.value.length > 0 && a?.length > 0)
           return;
-        const o = new Set(y.value.map((l, r) => r));
-        f.value.forEach((l) => {
-          const r = e.filter((m) => m.uid !== l.uid), i = O(r, s, o);
-          l.children.forEach((m) => {
-            const p = `${l.uid}:${m.uid}`, g = s.get(p) || /* @__PURE__ */ new Set(), w = k([i, g]);
+        const o = new Set(y.value.map((i, l) => l));
+        f.value.forEach((i) => {
+          const l = e.filter((m) => m.uid !== i.uid), c = O(l, s, o);
+          i.children.forEach((m) => {
+            const p = `${i.uid}:${m.uid}`, g = s.get(p) || /* @__PURE__ */ new Set(), w = k([c, g]);
             m.count = w.size;
           });
         });
       } else if (q === "intuitive") {
         const s = M.value;
-        if (s.size === 0 && y.value.length > 0 && c?.length > 0)
+        if (s.size === 0 && y.value.length > 0 && a?.length > 0)
           return;
-        const o = new Set(y.value.map((r, i) => i)), l = O(e, s, o);
-        f.value.forEach((r) => {
-          r.children.forEach((i) => {
-            const m = `${r.uid}:${i.uid}`, p = s.get(m) || /* @__PURE__ */ new Set();
-            if (i.selected)
-              if (r.multiple) {
-                const g = k([l, p]);
-                i.count = g.size;
+        const o = new Set(y.value.map((l, c) => c)), i = O(e, s, o);
+        f.value.forEach((l) => {
+          l.children.forEach((c) => {
+            const m = `${l.uid}:${c.uid}`, p = s.get(m) || /* @__PURE__ */ new Set();
+            if (c.selected)
+              if (l.multiple) {
+                const g = k([i, p]);
+                c.count = g.size;
               } else
-                i.count = l.size;
+                c.count = i.size;
             else {
               const g = [];
               for (const C of e)
                 g.push({ ...C, children: [...C.children] });
-              let w = g.find((C) => C.uid === r.uid);
-              w || (w = { ...r, children: [] }, g.push(w)), r.multiple ? w.children.push(i) : w.children = [i];
-              const W = O(g, s, o);
-              i.count = W.size;
+              let w = g.find((C) => C.uid === l.uid);
+              w || (w = { ...l, children: [] }, g.push(w)), l.multiple ? w.children.push(c) : w.children = [c];
+              const Q = O(g, s, o);
+              c.count = Q.size;
             }
           });
         });
       }
     }
   }, { deep: !0, immediate: !0 }), U?.router && U?.route) {
-    const { router: e, route: t } = U, a = () => f.value && f.value.length > 0, n = () => {
-      if (!a()) return;
-      const l = { ...t.query };
-      delete l.sort, delete l.search, f.value.forEach((r) => delete l[r.uid]), V.value && V.value !== z && (l.sort = V.value), x.value && (l.search = x.value), A.value.forEach((r) => {
-        r.children.length > 0 && (l[r.uid] = r.children.map((i) => i.uid).join(","));
-      }), JSON.stringify(l) !== JSON.stringify(t.query) && e.push({ query: l });
+    const { router: e, route: t } = U, r = () => f.value && f.value.length > 0, n = () => {
+      if (!r()) return;
+      const i = { ...t.query };
+      delete i.sort, delete i.search, f.value.forEach((l) => delete i[l.uid]), I.value && I.value !== z && (i.sort = I.value), x.value && (i.search = x.value), b.value.forEach((l) => {
+        l.children.length > 0 && (i[l.uid] = l.children.map((c) => c.uid).join(","));
+      }), JSON.stringify(i) !== JSON.stringify(t.query) && e.push({ query: i });
     }, s = () => {
-      const l = t.query;
-      l.sort && (V.value = l.sort), l.search && (x.value = l.search);
-      const r = /* @__PURE__ */ new Map();
-      f.value.forEach((i) => {
-        const m = l[i.uid] ? l[i.uid].split(",") : [];
-        r.set(i.uid, new Set(m));
-      }), f.value.forEach((i) => {
-        const m = r.get(i.uid) || /* @__PURE__ */ new Set();
-        i.children.forEach((p) => {
+      const i = t.query;
+      i.sort && (I.value = i.sort), i.search && (x.value = i.search);
+      const l = /* @__PURE__ */ new Map();
+      f.value.forEach((c) => {
+        const m = i[c.uid] ? i[c.uid].split(",") : [];
+        l.set(c.uid, new Set(m));
+      }), f.value.forEach((c) => {
+        const m = l.get(c.uid) || /* @__PURE__ */ new Set();
+        c.children.forEach((p) => {
           const g = p.selected, w = m.has(p.uid);
-          g !== w && L({ groupUid: i.uid, facetUid: p.uid, selected: w });
+          g !== w && P({ groupUid: c.uid, facetUid: p.uid, selected: w });
         });
       });
-    }, o = G(() => {
+    }, o = X(() => {
       f.value && f.value.length > 0 && (s(), o());
     });
-    $([V, x, A], n, { deep: !0 }), $(() => t.query, s);
+    $(
+      [I, x, b],
+      n,
+      { deep: !0 }
+    ), $(() => t.query, s);
   }
   return {
     facets: f,
     searchValue: x,
-    selectedSort: V,
-    sortTypes: _,
-    displayItems: P,
-    selectedFacets: A,
-    clearFilters: R,
-    handleFacetChange: L
+    selectedSort: I,
+    sortTypes: J,
+    displayItems: W,
+    pinnedItems: H,
+    selectedFacets: b,
+    clearFilters: K,
+    handleFacetChange: P
   };
 }
 export {
-  ee as useFacets
+  re as useFacets
 };

package/lib/components/collapsible/UluTabGroup.vue

@@ -1,10 +1,18 @@
 <template>
-  <TabGroup v-slot="slotProps" :defaultIndex="defaultIndex" :vertical="vertical">
+  <TabGroup 
+    v-slot="slotProps" 
+    :defaultIndex="defaultIndex" 
+    :vertical="vertical"
+  >
     <div 
+      v-bind="$attrs"
       class="tabs" 
-      :class="{
-       'tabs--vertical' : vertical 
-      }"
+      :class="[
+        resolvedModifiers,
+        {
+         'tabs--vertical' : vertical 
+        }
+      ]"
     >
       <slot v-bind="slotProps"/>
     </div>
@@ -13,12 +21,13 @@
 
 <script setup>
   import { TabGroup } from "@headlessui/vue";
+  import { useModifiers } from "../../composables/useModifiers.js";
 
   defineOptions({ 
     inheritAttrs: false 
   });
 
-  defineProps({ 
+  const props = defineProps({ 
     /**
      * Active tab index by default
      */
@@ -26,6 +35,12 @@
     /**
      * Whether or not to use vertical layout
      */
-    vertical: Boolean
+    vertical: Boolean,
+    /**
+     * Class modifiers (ie. 'transparent', 'secondary', etc)
+     */
+    modifiers: [String, Array]
   });
+
+  const { resolvedModifiers } = useModifiers({ props, baseClass: "tabs" });
 </script>

package/lib/components/systems/facets/useFacets.js

@@ -1,5 +1,7 @@
-import { ref, computed, watch, nextTick, watchPostEffect } from 'vue';
-import Fuse from 'fuse.js';
+import { ref, computed, watch, watchPostEffect } from "vue";
+import Fuse from "fuse.js";
+
+const isFunction = v => typeof v === "function";
 
 /**
  * Helper function to create a union of multiple Sets.
@@ -58,7 +60,7 @@ function getFilteredSetFromIndex(selected, index, allItemsSet) {
     });
 
     // For 'all' (AND), intersect the sets within the group.
-    if (group.match === 'all') {
+    if (group.match === "all") {
       return intersectSets(childSets);
     }
     // For 'some' (OR), union the sets within the group.
@@ -125,19 +127,21 @@ function generateInitialFacets(allItems, facetFields) {
  * @param {Object} [options.urlSync] - Optional configuration to sync state with URL.
  * @param {import('vue-router').Router} [options.urlSync.router] - The Vue Router instance.
  * @param {import('vue-router').RouteLocationNormalizedLoaded} [options.urlSync.route] - The current route instance.
+ * @param {Function} [options.isPinned] - A function that receives an item and returns true if it should be pinned to the top of the results.
  */
 export function useFacets(allItems, options = {}) {
   const {
     initialFacets,
     facetFields,
-    initialSearchValue = '',
-    initialSortType = 'az',
+    initialSearchValue = "",
+    initialSortType = "az",
     noDefaultSorts = false,
     extraSortTypes = {},
     searchOptions: initialSearchOptions = {},
     getSortValue = item => (item.title || item.label || ""),
-    countMode = 'none', // 'none', 'simple', 'intuitive'
-    urlSync: urlSyncOptions
+    countMode = "none", // 'none', 'simple', 'intuitive'
+    urlSync: urlSyncOptions,
+    isPinned
   } = options;
 
   const sortAlpha = items => {
@@ -261,14 +265,22 @@ export function useFacets(allItems, options = {}) {
     return result;
   });
 
-  const displayItems = computed(() => {
+  const displayItemsGrouped = computed(() => {
     const sortFn = sortTypes.value[selectedSort.value]?.sort;
-    if (typeof sortFn !== 'function') {
-      return filteredItems.value;
+    let sorted = isFunction(sortFn) ? sortFn([...filteredItems.value]) : [...filteredItems.value];
+    
+    if (isFunction(isPinned)) {
+      const pinned = [];
+      const unpinned = [];
+      sorted.forEach(item => isPinned(item) ? pinned.push(item) : unpinned.push(item));
+      return { pinned, unpinned, all: [...pinned, ...unpinned] };
     }
-    return sortFn([...filteredItems.value]);
+    return { pinned: [], unpinned: sorted, all: sorted };
   });
 
+  const displayItems = computed(() => displayItemsGrouped.value.all);
+  const pinnedItems = computed(() => displayItemsGrouped.value.pinned);
+
   // --- Methods ---
   function clearFilters() {
     facets.value.forEach(group => {
@@ -309,12 +321,12 @@ export function useFacets(allItems, options = {}) {
   }, { immediate: true });
 
   watch([selectedFacets, searchedItems], ([currentSelected, currentSearchedItems], [prevSelected, prevSearchedItems]) => {
-    if (countMode === 'none' || !facets.value.length) return;
+    if (countMode === "none" || !facets.value.length) return;
 
     // A simple optimization to prevent re-calculating counts if the actual data hasn't changed.
     if (currentSelected === prevSelected && currentSearchedItems === prevSearchedItems) return;
 
-    if (countMode === 'simple') {
+    if (countMode === "simple") {
       const index = facetIndex.value;
       if (index.size === 0 && searchedItems.value.length > 0 && facetFields?.length > 0) {
         return; // Index not ready
@@ -337,7 +349,7 @@ export function useFacets(allItems, options = {}) {
           child.count = intersection.size;
         });
       });
-    } else if (countMode === 'intuitive') {
+    } else if (countMode === "intuitive") {
       const index = facetIndex.value;
       if (index.size === 0 && searchedItems.value.length > 0 && facetFields?.length > 0) {
         // Index might not be ready yet.
@@ -348,7 +360,7 @@ export function useFacets(allItems, options = {}) {
 
       facets.value.forEach(group => {
         group.children.forEach(child => {
-          const key = `${group.uid}:${child.uid}`;
+          const key = `${ group.uid }:${ child.uid }`;
           const childSet = index.get(key) || new Set();
 
           if (child.selected) {
@@ -438,7 +450,7 @@ export function useFacets(allItems, options = {}) {
   
       const selectionsFromUrl = new Map();
       facets.value.forEach(group => {
-        const selectedUids = query[group.uid] ? query[group.uid].split(',') : [];
+        const selectedUids = query[group.uid] ? query[group.uid].split(",") : [];
         selectionsFromUrl.set(group.uid, new Set(selectedUids));
       });
   
@@ -463,7 +475,10 @@ export function useFacets(allItems, options = {}) {
     });
 
     // Sync state changes TO the URL
-    watch([selectedSort, searchValue, selectedFacets], updateUrlFromState, { deep: true });
+    watch(
+      [selectedSort, searchValue, selectedFacets], updateUrlFromState, 
+      { deep: true }
+    );
 
     // Sync URL changes TO the state
     watch(() => route.query, updateStateFromUrl);
@@ -475,6 +490,7 @@ export function useFacets(allItems, options = {}) {
     selectedSort,
     sortTypes,
     displayItems,
+    pinnedItems,
     selectedFacets,
     clearFilters,
     handleFacetChange

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend-vue",
-  "version": "0.2.0-beta.12",
+  "version": "0.2.0-beta.14",
   "description": "A modular and tree-shakeable Vue 3 component library for the Ulu frontend",
   "type": "module",
   "files": [