@propeller-commerce/propeller-v2-vue-ui 0.3.35 → 0.3.36

package/CHANGELOG.md

@@ -8,6 +8,40 @@ once it reaches 1.0. Until then (the `0.x` line) the public API may change
 between minor versions; breaking changes are called out below and in
 [MIGRATION.md](./MIGRATION.md).
 
+## [0.3.36] - 2026-07-21
+
+### Added
+
+- **`SearchBar`: real anchor links for navigation.** New optional
+  `getResultHref(result)` and `getViewAllHref(term)` props. When provided, the
+  autosuggest result rows and the "View all results" CTA render as real
+  `<a href>` elements — middle-clickable, open-in-new-tab, hover-preview,
+  crawlable — while the existing `onResultClick`/`onViewAllClick` callbacks
+  still fire for SPA navigation (modified clicks fall through to the browser).
+  Omit the props to keep the previous behaviour.
+- **`OrderList`: URL-persistable filters.** New optional `initialSearchForm`
+  (seed the filter form on mount, e.g. rehydrated from the URL) and
+  `onSearchApply(form)` (fires when the user applies/clears filters) props, so
+  the consuming page can keep the filter state in the URL — bookmarkable,
+  shareable, back-button-friendly. `useOrders` gained the matching
+  `initialSearchForm` option.
+
+### Changed
+
+- **`AccountIconAndMenu`: account-menu items are now `<a href>` instead of
+  `<button>`** (both the sidebar and dropdown variants). They use each link's
+  existing `href`, so they are middle-clickable / new-tab-able / crawlable;
+  `onMenuItemClick` still handles plain-click SPA navigation.
+- **`SearchBar`: the "View all results" fallback is now a `<button>`** (was a
+  non-focusable `<div>`), so it is keyboard-accessible even without the new
+  `getViewAllHref` prop.
+
+### Fixed
+
+- **`OrderList`: clickable rows now show `cursor: pointer`.** When
+  `rowsClickable` is set, the row cursor matches its behaviour (was `auto`,
+  inconsistent with the favourites cards).
+
 ## [0.3.35] - 2026-07-20
 
 ### Fixed

package/dist/components/OrderList.vue.d.ts

@@ -1,4 +1,5 @@
 import { Contact, Customer, GraphQLClient } from '@propeller-commerce/propeller-sdk-v2';
+import { OrderSearchForm } from '../composables/vue/useOrders';
 export interface OrderListProps {
     /** The authenticated user (Contact or Customer). Resolved from PropellerProvider when omitted. */
     user?: Contact | Customer | null;
@@ -16,6 +17,19 @@ export interface OrderListProps {
     enableSearch?: boolean;
     /** Fields enabled for searching (UI inputs) */
     searchFields?: string[];
+    /**
+     * Seed the filter form on mount — typically rehydrated from the URL query so
+     * a bookmarked/shared filtered view restores on reload. Pair with
+     * `onSearchApply` so the page can keep the URL in sync when filters change.
+     */
+    initialSearchForm?: OrderSearchForm;
+    /**
+     * Fires when the user applies or clears filters (the "Search"/"Clear"
+     * buttons). Receives the active filter form. Use it to persist the filters
+     * to the URL — the component owns no router, so the page decides how (and
+     * whether) to reflect them in `location`.
+     */
+    onSearchApply?: (form: OrderSearchForm) => void;
     /** Term fields configuration (backend) */
     termFields?: any[];
     /** Override company ID for order filtering (respects company switcher) */

package/dist/components/SearchBar.vue.d.ts

@@ -47,6 +47,20 @@ export interface SearchBarProps {
     onResultClick?: (result: SearchBarResult) => void;
     /** Fires when "View all results" is clicked. Receives the search term. */
     onViewAllClick?: (term: string) => void;
+    /**
+     * Build the destination URL for a result item. When provided, each result
+     * renders as a real `<a href>` (middle-clickable, new-tab, crawlable) while
+     * `onResultClick` still fires for SPA navigation. Omit to keep the
+     * div-based fallback.
+     */
+    getResultHref?: (result: SearchBarResult) => string;
+    /**
+     * Build the destination URL for the "View all results" CTA. When provided,
+     * the CTA renders as a real `<a href>` (middle-clickable, new-tab, crawlable,
+     * keyboard-focusable) while `onViewAllClick` still fires for SPA navigation.
+     * Omit to keep the button fallback.
+     */
+    getViewAllHref?: (term: string) => string;
     /** Custom price formatting function */
     formatPrice?: (price: number) => string;
     /** Labels for the component */

package/dist/composables/vue/useOrders.d.ts

@@ -18,6 +18,11 @@ export interface UseOrdersOptions {
     /** Default statuses to filter by */
     orderStatuses?: string[];
     termFields?: OrderSearchFields[];
+    /**
+     * Seed the search/filter form on mount — e.g. rehydrated from the URL query
+     * so a bookmarked/shared filtered view restores. The consumer owns the fetch.
+     */
+    initialSearchForm?: OrderSearchForm;
     configuration?: {
         imageSearchFiltersGrid?: MediaImageProductSearchInput;
         imageVariantFiltersSmall?: TransformationsInput;

package/dist/index.cjs

@@ -1549,7 +1549,7 @@ function useOrders(options) {
   const orders = vue.ref([]);
   const loading = vue.ref(false);
   const error = vue.ref(null);
-  const searchForm = vue.ref({});
+  const searchForm = vue.ref(options.initialSearchForm ?? {});
   const currentOrder = vue.ref(null);
   const orderLoading = vue.ref(false);
   const termFields = options.termFields ?? [
@@ -3406,7 +3406,7 @@ const _hoisted_4$J = { class: "propeller-account-menu__user-label text-xs text-m
 const _hoisted_5$I = { class: "propeller-account-menu__user-name font-medium text-foreground truncate" };
 const _hoisted_6$H = { class: "propeller-account-menu__nav py-2" };
 const _hoisted_7$H = { class: "propeller-account-menu__list space-y-0.5" };
-const _hoisted_8$D = ["onClick", "data-active"];
+const _hoisted_8$D = ["href", "onClick", "data-active"];
 const _hoisted_9$B = { class: "propeller-account-menu__logout-wrapper px-4 py-3 border-t border-border" };
 const _hoisted_10$z = ["aria-label", "data-open"];
 const _hoisted_11$v = {
@@ -3429,7 +3429,7 @@ const _hoisted_15$s = { class: "propeller-account-menu__user-label text-xs text-
 const _hoisted_16$r = { class: "propeller-account-menu__user-name font-medium text-foreground truncate" };
 const _hoisted_17$q = { class: "propeller-account-menu__nav" };
 const _hoisted_18$o = { class: "propeller-account-menu__list space-y-0.5" };
-const _hoisted_19$o = ["onClick"];
+const _hoisted_19$o = ["href", "onClick"];
 const _hoisted_20$m = { class: "propeller-account-menu__logout-wrapper mt-3 pt-3 border-t border-border" };
 const _hoisted_21$k = {
   key: 1,
@@ -3564,6 +3564,13 @@ const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
       menuOpen.value = false;
       if (props.onMenuItemClick) props.onMenuItemClick(href);
     }
+    function handleMenuLinkClick(event, href) {
+      if (event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey) {
+        return;
+      }
+      event.preventDefault();
+      handleMenuItemClick(href);
+    }
     function handleLogoutClick() {
       menuOpen.value = false;
       if (props.onLogoutClick) props.onLogoutClick();
@@ -3605,9 +3612,9 @@ const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
                     key: link.href,
                     class: "propeller-account-menu__item"
                   }, [
-                    vue.createElementVNode("button", {
-                      type: "button",
-                      onClick: async (event) => handleMenuItemClick(link.href),
+                    vue.createElementVNode("a", {
+                      href: link.href,
+                      onClick: (event) => handleMenuLinkClick(event, link.href),
                       "data-active": isActiveLink(link.href) ? "true" : "false",
                       class: vue.normalizeClass(`propeller-account-menu__link flex w-full items-center gap-3 px-4 py-2.5 text-sm font-medium transition-colors ${isActiveLink(link.href) ? "bg-secondary/5 text-secondary border-l-2 border-secondary" : "text-muted-foreground hover:bg-surface-hover hover:text-foreground"}`)
                     }, vue.toDisplayString(link.label), 11, _hoisted_8$D)
@@ -3661,10 +3668,10 @@ const _sfc_main$T = /* @__PURE__ */ vue.defineComponent({
                         key: link.href,
                         class: "propeller-account-menu__item"
                       }, [
-                        vue.createElementVNode("button", {
-                          type: "button",
+                        vue.createElementVNode("a", {
+                          href: link.href,
                           class: "propeller-account-menu__link flex w-full items-center gap-3 px-3 py-2 text-sm font-medium rounded-[var(--radius-control)] text-muted-foreground hover:bg-surface-hover hover:text-foreground transition-colors",
-                          onClick: async (event) => handleMenuItemClick(link.href)
+                          onClick: (event) => handleMenuLinkClick(event, link.href)
                         }, vue.toDisplayString(link.label), 9, _hoisted_19$o)
                       ]);
                     }), 128))
@@ -13844,6 +13851,8 @@ const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
     columnConfig: {},
     enableSearch: { type: Boolean },
     searchFields: {},
+    initialSearchForm: {},
+    onSearchApply: { type: Function },
     termFields: {},
     companyId: {},
     orderStatus: {},
@@ -13888,7 +13897,8 @@ const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
       configuration: infra.configuration,
       channelIds: props.channelIds,
       onCartCreated: props.onCartCreated,
-      afterReorder: props.afterReorder
+      afterReorder: props.afterReorder,
+      initialSearchForm: props.initialSearchForm
     });
     const columns = vue.ref(
       props.columns || ["id", "date", "status", "total"]
@@ -14198,11 +14208,15 @@ const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
               class: "propeller-order-list__clear-btn inline-flex items-center px-4 py-2 border border-input text-sm font-medium rounded-[var(--radius-control)] shadow-sm text-muted-foreground bg-card hover:bg-surface-hover focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary",
               onClick: _cache[11] || (_cache[11] = async (event) => {
                 vue.unref(resetSearch)();
+                props.onSearchApply?.({});
               })
             }, vue.toDisplayString(getLabel("clearButton", "Clear")), 1),
             vue.createElementVNode("button", {
               class: "propeller-order-list__search-btn inline-flex items-center px-4 py-2 border border-transparent text-sm font-medium rounded-[var(--radius-control)] shadow-sm text-primary-foreground bg-primary hover:bg-primary/80 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-primary",
-              onClick: _cache[12] || (_cache[12] = async (event) => vue.unref(fetchOrders)(1))
+              onClick: _cache[12] || (_cache[12] = async (event) => {
+                vue.unref(fetchOrders)(1);
+                props.onSearchApply?.(vue.unref(searchForm));
+              })
             }, vue.toDisplayString(getLabel("searchButton", "Search")), 1)
           ])
         ])) : vue.createCommentVNode("", true),
@@ -14225,7 +14239,7 @@ const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
                   (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(vue.unref(orders), (order, index2) => {
                     return vue.openBlock(), vue.createElementBlock("tr", {
                       key: order.id,
-                      class: "propeller-order-list__row hover:bg-surface-hover",
+                      class: vue.normalizeClass(`propeller-order-list__row hover:bg-surface-hover ${rowsClickable.value ? "cursor-pointer" : ""}`),
                       "data-clickable": rowsClickable.value ? "true" : "false",
                       onClick: async (event) => rowsClickable.value && __props.onOrderClick(order.id)
                     }, [
@@ -14272,7 +14286,7 @@ const _sfc_main$i = /* @__PURE__ */ vue.defineComponent({
                           ], 64)) : vue.createCommentVNode("", true)
                         ], 10, _hoisted_36$6);
                       }), 128))
-                    ], 8, _hoisted_35$6);
+                    ], 10, _hoisted_35$6);
                   }), 128))
                 ])
               ])
@@ -19911,24 +19925,24 @@ const _hoisted_5$1 = {
   class: "propeller-search-bar__dropdown absolute top-full left-0 right-0 mt-2 bg-card rounded-[var(--radius-container)] shadow-xl border z-50 flex flex-col max-h-96"
 };
 const _hoisted_6$1 = { class: "propeller-search-bar__results flex-1 overflow-y-auto" };
-const _hoisted_7$1 = ["onClick"];
-const _hoisted_8$1 = {
+const _hoisted_7$1 = {
   key: 0,
   class: "propeller-search-bar__result-media relative w-16 h-16 flex-shrink-0"
 };
-const _hoisted_9$1 = ["src", "alt"];
-const _hoisted_10$1 = { class: "flex-1 min-w-0" };
-const _hoisted_11$1 = { class: "propeller-search-bar__result-name font-semibold truncate" };
-const _hoisted_12$1 = {
+const _hoisted_8$1 = ["src", "alt"];
+const _hoisted_9$1 = { class: "flex-1 min-w-0" };
+const _hoisted_10$1 = { class: "propeller-search-bar__result-name font-semibold truncate" };
+const _hoisted_11$1 = {
   key: 0,
   class: "propeller-search-bar__result-sku text-sm text-muted-foreground"
 };
-const _hoisted_13$1 = {
+const _hoisted_12$1 = {
   key: 1,
   class: "propeller-search-bar__result-price text-sm font-semibold text-foreground flex-shrink-0 text-right"
 };
-const _hoisted_14$1 = { class: "propeller-search-bar__result-price-value" };
-const _hoisted_15$1 = { class: "propeller-search-bar__result-price-label block text-xs font-normal text-muted-foreground" };
+const _hoisted_13$1 = { class: "propeller-search-bar__result-price-value" };
+const _hoisted_14$1 = { class: "propeller-search-bar__result-price-label block text-xs font-normal text-muted-foreground" };
+const _hoisted_15$1 = ["href"];
 const _hoisted_16$1 = {
   key: 1,
   class: "propeller-search-bar__empty p-4 text-center text-muted-foreground"
@@ -19948,6 +19962,8 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
     onSubmit: { type: Function },
     onResultClick: { type: Function },
     onViewAllClick: { type: Function },
+    getResultHref: { type: Function },
+    getViewAllHref: { type: Function },
     formatPrice: { type: Function },
     labels: {},
     includeTax: { type: Boolean },
@@ -20101,6 +20117,21 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
       }
       showDropdown.value = false;
     }
+    function isModifiedClick(event) {
+      return event.defaultPrevented || event.button !== 0 || event.metaKey || event.ctrlKey || event.shiftKey || event.altKey;
+    }
+    function handleResultAnchorClick(event, result) {
+      if (props.getResultHref) {
+        if (isModifiedClick(event)) return;
+        event.preventDefault();
+      }
+      handleResultClick(result);
+    }
+    function handleViewAllAnchorClick(event) {
+      if (isModifiedClick(event)) return;
+      event.preventDefault();
+      handleViewAllClick();
+    }
     return (_ctx, _cache) => {
       return vue.openBlock(), vue.createElementBlock("div", {
         "data-search-bar": true,
@@ -20112,7 +20143,7 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
           onSubmit: _cache[1] || (_cache[1] = async (e) => handleSubmit(e))
         }, [
           vue.createElementVNode("div", _hoisted_2$1, [
-            _cache[4] || (_cache[4] = vue.createElementVNode("button", {
+            _cache[3] || (_cache[3] = vue.createElementVNode("button", {
               type: "submit",
               class: "propeller-search-bar__submit absolute left-3 top-1/2 transform -translate-y-1/2 p-0 bg-transparent border-none cursor-pointer"
             }, [
@@ -20138,7 +20169,7 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
               value: searchTerm.value,
               onInput: _cache[0] || (_cache[0] = async (e) => handleInputChange(e.target.value))
             }, null, 40, _hoisted_3$1),
-            vue.unref(isLoading) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$1, [..._cache[3] || (_cache[3] = [
+            vue.unref(isLoading) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_4$1, [..._cache[2] || (_cache[2] = [
               vue.createElementVNode("div", { class: "propeller-search-bar__spinner animate-spin rounded-full h-5 w-5 border-b-2 border-primary" }, null, -1)
             ])])) : vue.createCommentVNode("", true)
           ])
@@ -20147,34 +20178,46 @@ const _sfc_main$1 = /* @__PURE__ */ vue.defineComponent({
           results.value.length > 0 ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
             vue.createElementVNode("div", _hoisted_6$1, [
               (vue.openBlock(true), vue.createElementBlock(vue.Fragment, null, vue.renderList(results.value, (result, index2) => {
-                return vue.openBlock(), vue.createElementBlock("div", {
+                return vue.openBlock(), vue.createBlock(vue.resolveDynamicComponent(props.getResultHref ? "a" : "div"), {
                   key: result.id + "-" + index2,
+                  href: props.getResultHref ? props.getResultHref(result) : void 0,
                   class: "propeller-search-bar__result flex items-center gap-4 p-3 hover:bg-surface-hover cursor-pointer border-b border-border last:border-b-0",
-                  onClick: async (event) => handleResultClick(result)
-                }, [
-                  result.imageUrl || noImageUrl.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_8$1, [
-                    vue.createElementVNode("img", {
-                      class: "propeller-search-bar__result-image w-full h-full object-contain",
-                      src: result.imageUrl || noImageUrl.value,
-                      alt: result.name
-                    }, null, 8, _hoisted_9$1)
-                  ])) : vue.createCommentVNode("", true),
-                  vue.createElementVNode("div", _hoisted_10$1, [
-                    vue.createElementVNode("div", _hoisted_11$1, vue.toDisplayString(result.name), 1),
-                    result.sku ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_12$1, "SKU: " + vue.toDisplayString(result.sku), 1)) : vue.createCommentVNode("", true)
+                  onClick: (event) => handleResultAnchorClick(event, result)
+                }, {
+                  default: vue.withCtx(() => [
+                    result.imageUrl || noImageUrl.value ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_7$1, [
+                      vue.createElementVNode("img", {
+                        class: "propeller-search-bar__result-image w-full h-full object-contain",
+                        src: result.imageUrl || noImageUrl.value,
+                        alt: result.name
+                      }, null, 8, _hoisted_8$1)
+                    ])) : vue.createCommentVNode("", true),
+                    vue.createElementVNode("div", _hoisted_9$1, [
+                      vue.createElementVNode("div", _hoisted_10$1, vue.toDisplayString(result.name), 1),
+                      result.sku ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_11$1, "SKU: " + vue.toDisplayString(result.sku), 1)) : vue.createCommentVNode("", true)
+                    ]),
+                    result.price !== void 0 && result.price !== null ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_12$1, [
+                      vue.createElementVNode("span", _hoisted_13$1, vue.toDisplayString(formatItemPrice(leadingPrice(result))), 1),
+                      vue.createElementVNode("span", _hoisted_14$1, vue.toDisplayString(priceTaxLabel()), 1)
+                    ])) : vue.createCommentVNode("", true)
                   ]),
-                  result.price !== void 0 && result.price !== null ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_13$1, [
-                    vue.createElementVNode("span", _hoisted_14$1, vue.toDisplayString(formatItemPrice(leadingPrice(result))), 1),
-                    vue.createElementVNode("span", _hoisted_15$1, vue.toDisplayString(priceTaxLabel()), 1)
-                  ])) : vue.createCommentVNode("", true)
-                ], 8, _hoisted_7$1);
+                  _: 2
+                }, 1032, ["href", "onClick"]);
               }), 128))
             ]),
-            itemsFound.value > results.value.length ? (vue.openBlock(), vue.createElementBlock("div", {
-              key: 0,
-              class: "propeller-search-bar__view-all flex-shrink-0 p-3 text-center text-primary hover:bg-primary/5 cursor-pointer font-semibold border-t border-border bg-card rounded-b-[var(--radius-container)]",
-              onClick: _cache[2] || (_cache[2] = async (event) => handleViewAllClick())
-            }, vue.toDisplayString(getLabel("viewAll", "View all results")) + " (" + vue.toDisplayString(itemsFound.value) + ") ", 1)) : vue.createCommentVNode("", true)
+            itemsFound.value > results.value.length ? (vue.openBlock(), vue.createElementBlock(vue.Fragment, { key: 0 }, [
+              props.getViewAllHref ? (vue.openBlock(), vue.createElementBlock("a", {
+                key: 0,
+                href: props.getViewAllHref(searchTerm.value),
+                class: "propeller-search-bar__view-all block flex-shrink-0 p-3 text-center text-primary hover:bg-primary/5 cursor-pointer font-semibold border-t border-border bg-card rounded-b-[var(--radius-container)]",
+                onClick: handleViewAllAnchorClick
+              }, vue.toDisplayString(getLabel("viewAll", "View all results")) + " (" + vue.toDisplayString(itemsFound.value) + ") ", 9, _hoisted_15$1)) : (vue.openBlock(), vue.createElementBlock("button", {
+                key: 1,
+                type: "button",
+                class: "propeller-search-bar__view-all block w-full flex-shrink-0 p-3 text-center text-primary hover:bg-primary/5 cursor-pointer font-semibold border-t border-border bg-card rounded-b-[var(--radius-container)]",
+                onClick: handleViewAllClick
+              }, vue.toDisplayString(getLabel("viewAll", "View all results")) + " (" + vue.toDisplayString(itemsFound.value) + ") ", 1))
+            ], 64)) : vue.createCommentVNode("", true)
           ], 64)) : vue.createCommentVNode("", true),
           results.value.length === 0 && searchTerm.value.length >= minLength.value && !vue.unref(isLoading) ? (vue.openBlock(), vue.createElementBlock("div", _hoisted_16$1, vue.toDisplayString(getLabel("noResults", "No products found for")) + ' "' + vue.toDisplayString(searchTerm.value) + '" ', 1)) : vue.createCommentVNode("", true)
         ])) : vue.createCommentVNode("", true)