@onereach/ui-components 2.69.1-beta.2090.0 → 2.69.1-beta.2097.0

package/dist/bundled/v2/{OrCardCollection-a8d5ce32.js → OrCardCollection-8606c407.js}

@@ -165,6 +165,10 @@ var script = defineComponent({
     const rootStyles = computed(() => ['or-card-collection', ...CardCollectionRoot, classAttribute.value]);
     const toolbarStyles = computed(() => [...CardCollectionToolbar]);
     const toolbarPanelStyles = computed(() => [...CardCollectionToolbarPanel]);
+    const sortLabel = computed(() => {
+      var _a;
+      return (_a = props.sortOptions.find(item => item.value === props.sort)) === null || _a === void 0 ? void 0 : _a.label;
+    });
     // State
     const proxyView = ref(props.view);
     const proxySort = ref(props.sort);
@@ -208,6 +212,7 @@ var script = defineComponent({
       proxyView,
       proxySort,
       proxySearch,
+      sortLabel,
       switchView,
       handleSort,
       handleSearch
@@ -241,7 +246,7 @@ var __vue_render__ = function () {
         return _vm.sortMenu.toggle();
       }
     }
-  }, [_vm._v("\n          " + _vm._s(_vm.proxySort) + "\n          "), _vm.sortMenu ? _c('OrIcon', {
+  }, [_vm._v("\n          " + _vm._s(_vm.sortLabel) + "\n          "), _vm.sortMenu ? _c('OrIcon', {
     attrs: {
       "icon": _vm.sortMenu.isOpen ? 'arrow_drop_up' : 'arrow_drop_down'
     }
@@ -255,10 +260,10 @@ var __vue_render__ = function () {
       key: sortItem,
       on: {
         "click": function ($event) {
-          return _vm.handleSort(sortItem);
+          return _vm.handleSort(sortItem.value);
         }
       }
-    }, [_vm._v("\n            " + _vm._s(sortItem) + "\n          ")]);
+    }, [_vm._v("\n            " + _vm._s(sortItem.label) + "\n          ")]);
   }), 1)] : _vm._e()], 2), _vm._v(" "), _c('div', {
     class: _vm.toolbarPanelStyles
   }, [_c('OrSearch', {
@@ -286,7 +291,10 @@ var __vue_render__ = function () {
         }
       }
     });
-  }) : _vm._e(), _vm._v(" "), _vm._t("addon")], 2)], 1)]), _vm._v(" "), _vm._t(_vm.proxyView, function () {
+  }) : _vm._e(), _vm._v(" "), _vm._t("addon")], 2)], 1)]), _vm._v(" "), _vm._t("header", null, null, {
+    items: _vm.items,
+    mode: _vm.proxyView
+  }), _vm._v(" "), _vm._t(_vm.proxyView, function () {
     return [_c('OrCardCollectionView', {
       attrs: {
         "items": _vm.items,

package/dist/bundled/v2/components/index.js

@@ -8,7 +8,7 @@ export { a as BUTTON_COLOR, c as BUTTON_LOADER_TYPE, b as BUTTON_SIZE, B as BUTT
 export { a as ButtonColor, b as ButtonType, B as ButtonVariant, O as OrButtonV3 } from '../OrButton-0e91a808.js';
 export { O as OrCard } from '../OrCard-a6b30f8f.js';
 export { C as CARD_COLLECTION_LAYOUT, _ as OrCardCollection } from '../OrCardCollection-89428bbf.js';
-export { C as CardCollectionView, _ as OrCardCollectionV3 } from '../OrCardCollection-a8d5ce32.js';
+export { C as CardCollectionView, _ as OrCardCollectionV3 } from '../OrCardCollection-8606c407.js';
 export { _ as OrCardV3 } from '../OrCard-29116e1f.js';
 export { a as OrCarousel, _ as OrCarouselItem } from '../OrCarouselItem-6da755c0.js';
 export { O as OrCheckbox } from '../OrCheckbox-4cbddd67.js';

package/dist/bundled/v2/components/or-card-collection-v3/OrCardCollection.vue.d.ts

@@ -1,6 +1,6 @@
 import { PropType } from 'vue-demi';
 import { CardCollectionView } from './props';
-import { CardCollectionItem, ViewMode } from './types';
+import { CardCollectionItem, SortOption, ViewMode } from './types';
 declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     sortMenu: import("@vue/composition-api").Ref<(import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<unknown>, import("@vue/composition-api").MethodOptions, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>, import("@vue/composition-api").ExtractPropTypes<import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
@@ -19,6 +19,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     proxyView: import("@vue/composition-api").Ref<string>;
     proxySort: import("@vue/composition-api").Ref<string>;
     proxySearch: import("@vue/composition-api").Ref<string>;
+    sortLabel: import("@vue/composition-api").ComputedRef<string | undefined>;
     switchView: (view: string) => void;
     handleSort: (sort: string) => void;
     handleSearch: (search: string) => void;
@@ -40,7 +41,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         default: undefined;
     };
     sortOptions: {
-        type: PropType<string[]>;
+        type: PropType<SortOption[]>;
         default: () => never[];
     };
     search: {
@@ -65,7 +66,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         default: undefined;
     };
     sortOptions: {
-        type: PropType<string[]>;
+        type: PropType<SortOption[]>;
         default: () => never[];
     };
     search: {
@@ -78,7 +79,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     items: CardCollectionItem[];
     view: string;
     viewModes: ViewMode[];
-    sortOptions: string[];
+    sortOptions: SortOption[];
 } & {} & {
     [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
 }, import("@vue/composition-api").ShallowUnwrapRef<{
@@ -99,6 +100,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     proxyView: import("@vue/composition-api").Ref<string>;
     proxySort: import("@vue/composition-api").Ref<string>;
     proxySearch: import("@vue/composition-api").Ref<string>;
+    sortLabel: import("@vue/composition-api").ComputedRef<string | undefined>;
     switchView: (view: string) => void;
     handleSort: (sort: string) => void;
     handleSearch: (search: string) => void;
@@ -108,7 +110,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     items: CardCollectionItem[];
     view: string;
     viewModes: ViewMode[];
-    sortOptions: string[];
+    sortOptions: SortOption[];
 } & {} & {
     [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
 }, {
@@ -117,6 +119,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     items: CardCollectionItem[];
     view: string;
     viewModes: ViewMode[];
-    sortOptions: string[];
+    sortOptions: SortOption[];
 }, true>);
 export default _default;

package/dist/bundled/v2/components/or-card-collection-v3/index.js

@@ -1,4 +1,4 @@
-export { C as CardCollectionView, _ as OrCardCollectionV3 } from '../../OrCardCollection-a8d5ce32.js';
+export { C as CardCollectionView, _ as OrCardCollectionV3 } from '../../OrCardCollection-8606c407.js';
 import '../../index-fa6eb4ca.js';
 import 'vue';
 import '@vue/composition-api/dist/vue-composition-api.mjs';

package/dist/bundled/v2/components/or-card-collection-v3/types.d.ts

@@ -6,3 +6,7 @@ export interface ViewMode {
     view: string;
     icon: string;
 }
+export interface SortOption {
+    label: string;
+    value: string;
+}

package/dist/bundled/v2/index.js

@@ -13,7 +13,7 @@ export { a as BUTTON_COLOR, c as BUTTON_LOADER_TYPE, b as BUTTON_SIZE, B as BUTT
 export { a as ButtonColor, b as ButtonType, B as ButtonVariant, O as OrButtonV3 } from './OrButton-0e91a808.js';
 export { O as OrCard } from './OrCard-a6b30f8f.js';
 export { C as CARD_COLLECTION_LAYOUT, _ as OrCardCollection } from './OrCardCollection-89428bbf.js';
-export { C as CardCollectionView, _ as OrCardCollectionV3 } from './OrCardCollection-a8d5ce32.js';
+export { C as CardCollectionView, _ as OrCardCollectionV3 } from './OrCardCollection-8606c407.js';
 export { _ as OrCardV3 } from './OrCard-29116e1f.js';
 export { a as OrCarousel, _ as OrCarouselItem } from './OrCarouselItem-6da755c0.js';
 export { O as OrCheckbox } from './OrCheckbox-4cbddd67.js';

package/dist/bundled/v3/{OrCardCollection.vue_vue_type_script_lang-f9f329a2.js → OrCardCollection.vue_vue_type_script_lang-80c10c12.js}

@@ -171,6 +171,10 @@ var script = defineComponent({
     const rootStyles = computed(() => ['or-card-collection', ...CardCollectionRoot, classAttribute.value]);
     const toolbarStyles = computed(() => [...CardCollectionToolbar]);
     const toolbarPanelStyles = computed(() => [...CardCollectionToolbarPanel]);
+    const sortLabel = computed(() => {
+      var _a;
+      return (_a = props.sortOptions.find(item => item.value === props.sort)) === null || _a === void 0 ? void 0 : _a.label;
+    });
     // State
     const proxyView = ref(props.view);
     const proxySort = ref(props.sort);
@@ -214,6 +218,7 @@ var script = defineComponent({
       proxyView,
       proxySort,
       proxySearch,
+      sortLabel,
       switchView,
       handleSort,
       handleSearch

package/dist/bundled/v3/components/index.js

@@ -8,7 +8,7 @@ export { a as BUTTON_COLOR, c as BUTTON_LOADER_TYPE, b as BUTTON_SIZE, B as BUTT
 export { a as ButtonColor, b as ButtonType, B as ButtonVariant, s as OrButtonV3 } from '../OrButton.vue_vue_type_script_lang-3718b300.js';
 export { s as OrCard } from '../OrCard.vue_vue_type_script_lang-90ba001b.js';
 export { C as CARD_COLLECTION_LAYOUT, s as OrCardCollection } from '../OrCardCollection.vue_vue_type_script_lang-d8124dda.js';
-export { C as CardCollectionView, s as OrCardCollectionV3 } from '../OrCardCollection.vue_vue_type_script_lang-f9f329a2.js';
+export { C as CardCollectionView, s as OrCardCollectionV3 } from '../OrCardCollection.vue_vue_type_script_lang-80c10c12.js';
 export { s as OrCardV3 } from '../OrCard.vue_vue_type_script_lang-165de137.js';
 export { a as OrCarousel, s as OrCarouselItem } from '../OrCarouselItem.vue_vue_type_script_lang-ad286afc.js';
 export { s as OrCheckbox } from '../OrCheckbox.vue_vue_type_script_lang-d8a66818.js';

package/dist/bundled/v3/components/or-card-collection-v3/OrCardCollection.vue.d.ts

@@ -1,6 +1,6 @@
 import { PropType } from 'vue-demi';
 import { CardCollectionView } from './props';
-import { CardCollectionItem, ViewMode } from './types';
+import { CardCollectionItem, SortOption, ViewMode } from './types';
 declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     sortMenu: import("@vue/composition-api").Ref<(import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<unknown>, import("@vue/composition-api").MethodOptions, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>, import("@vue/composition-api").ExtractPropTypes<import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
@@ -19,6 +19,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     proxyView: import("@vue/composition-api").Ref<string>;
     proxySort: import("@vue/composition-api").Ref<string>;
     proxySearch: import("@vue/composition-api").Ref<string>;
+    sortLabel: import("@vue/composition-api").ComputedRef<string | undefined>;
     switchView: (view: string) => void;
     handleSort: (sort: string) => void;
     handleSearch: (search: string) => void;
@@ -40,7 +41,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         default: undefined;
     };
     sortOptions: {
-        type: PropType<string[]>;
+        type: PropType<SortOption[]>;
         default: () => never[];
     };
     search: {
@@ -65,7 +66,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         default: undefined;
     };
     sortOptions: {
-        type: PropType<string[]>;
+        type: PropType<SortOption[]>;
         default: () => never[];
     };
     search: {
@@ -78,7 +79,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     items: CardCollectionItem[];
     view: string;
     viewModes: ViewMode[];
-    sortOptions: string[];
+    sortOptions: SortOption[];
 } & {} & {
     [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
 }, import("@vue/composition-api").ShallowUnwrapRef<{
@@ -99,6 +100,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     proxyView: import("@vue/composition-api").Ref<string>;
     proxySort: import("@vue/composition-api").Ref<string>;
     proxySearch: import("@vue/composition-api").Ref<string>;
+    sortLabel: import("@vue/composition-api").ComputedRef<string | undefined>;
     switchView: (view: string) => void;
     handleSort: (sort: string) => void;
     handleSearch: (search: string) => void;
@@ -108,7 +110,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     items: CardCollectionItem[];
     view: string;
     viewModes: ViewMode[];
-    sortOptions: string[];
+    sortOptions: SortOption[];
 } & {} & {
     [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
 }, {
@@ -117,6 +119,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     items: CardCollectionItem[];
     view: string;
     viewModes: ViewMode[];
-    sortOptions: string[];
+    sortOptions: SortOption[];
 }, true>);
 export default _default;

package/dist/bundled/v3/components/or-card-collection-v3/index.js

@@ -1,4 +1,4 @@
-export { C as CardCollectionView, s as OrCardCollectionV3 } from '../../OrCardCollection.vue_vue_type_script_lang-f9f329a2.js';
+export { C as CardCollectionView, s as OrCardCollectionV3 } from '../../OrCardCollection.vue_vue_type_script_lang-80c10c12.js';
 import 'vue';
 import '../../OrIconButton-4bd33e3c.js';
 import '../../OrIconButton.vue_vue_type_script_lang-641f6e06.js';

package/dist/bundled/v3/components/or-card-collection-v3/types.d.ts

@@ -6,3 +6,7 @@ export interface ViewMode {
     view: string;
     icon: string;
 }
+export interface SortOption {
+    label: string;
+    value: string;
+}

package/dist/bundled/v3/index.js

@@ -18,8 +18,8 @@ export { a as ButtonColor, b as ButtonType, B as ButtonVariant, s as OrButtonV3
 import { s as script$6 } from './OrCardCollection.vue_vue_type_script_lang-d8124dda.js';
 export { C as CARD_COLLECTION_LAYOUT, s as OrCardCollection } from './OrCardCollection.vue_vue_type_script_lang-d8124dda.js';
 export { s as OrCard } from './OrCard.vue_vue_type_script_lang-90ba001b.js';
-import { s as script$7 } from './OrCardCollection.vue_vue_type_script_lang-f9f329a2.js';
-export { C as CardCollectionView, s as OrCardCollectionV3 } from './OrCardCollection.vue_vue_type_script_lang-f9f329a2.js';
+import { s as script$7 } from './OrCardCollection.vue_vue_type_script_lang-80c10c12.js';
+export { C as CardCollectionView, s as OrCardCollectionV3 } from './OrCardCollection.vue_vue_type_script_lang-80c10c12.js';
 import { s as script$8 } from './OrCard.vue_vue_type_script_lang-165de137.js';
 export { s as OrCardV3 } from './OrCard.vue_vue_type_script_lang-165de137.js';
 import './OrCarouselItem-f4b9541d.js';
@@ -604,7 +604,7 @@ function render$J(_ctx, _cache, $props, $setup, $data, $options) {
     color: "inherit",
     onClick: _cache[0] || (_cache[0] = $event => _ctx.sortMenu.toggle())
   }, {
-    default: withCtx(() => [createTextVNode(toDisplayString(_ctx.proxySort) + " ", 1 /* TEXT */), _ctx.sortMenu ? (openBlock(), createBlock(_component_OrIcon, {
+    default: withCtx(() => [createTextVNode(toDisplayString(_ctx.sortLabel) + " ", 1 /* TEXT */), _ctx.sortMenu ? (openBlock(), createBlock(_component_OrIcon, {
       key: 0,
       icon: _ctx.sortMenu.isOpen ? 'arrow_drop_up' : 'arrow_drop_down'
     }, null, 8 /* PROPS */, ["icon"])) : createCommentVNode("v-if", true)]),
@@ -616,9 +616,9 @@ function render$J(_ctx, _cache, $props, $setup, $data, $options) {
     default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.sortOptions, sortItem => {
       return openBlock(), createBlock(_component_OrMenuItem, {
         key: sortItem,
-        onClick: $event => _ctx.handleSort(sortItem)
+        onClick: $event => _ctx.handleSort(sortItem.value)
       }, {
-        default: withCtx(() => [createTextVNode(toDisplayString(sortItem), 1 /* TEXT */)]),
+        default: withCtx(() => [createTextVNode(toDisplayString(sortItem.label), 1 /* TEXT */)]),
 
         _: 2 /* DYNAMIC */
       }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["onClick"]);
@@ -642,7 +642,10 @@ function render$J(_ctx, _cache, $props, $setup, $data, $options) {
       },
       onClick: $event => _ctx.switchView(viewOption.view)
     }, null, 8 /* PROPS */, ["icon", "onClick"]);
-  }), 128 /* KEYED_FRAGMENT */)) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "addon")])], 2 /* CLASS */)], 2 /* CLASS */), renderSlot(_ctx.$slots, _ctx.proxyView, normalizeProps(guardReactiveProps({
+  }), 128 /* KEYED_FRAGMENT */)) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "addon")])], 2 /* CLASS */)], 2 /* CLASS */), renderSlot(_ctx.$slots, "header", normalizeProps(guardReactiveProps({
+    items: _ctx.items,
+    mode: _ctx.proxyView
+  }))), renderSlot(_ctx.$slots, _ctx.proxyView, normalizeProps(guardReactiveProps({
     items: _ctx.items
   })), () => [createVNode(_component_OrCardCollectionView, {
     items: _ctx.items,

package/dist/esm/v2/{OrCardCollection-95b051e1.js → OrCardCollection-e7a4ead6.js}

@@ -166,6 +166,10 @@ var script = defineComponent({
     const rootStyles = computed(() => ['or-card-collection', ...CardCollectionRoot, classAttribute.value]);
     const toolbarStyles = computed(() => [...CardCollectionToolbar]);
     const toolbarPanelStyles = computed(() => [...CardCollectionToolbarPanel]);
+    const sortLabel = computed(() => {
+      var _a;
+      return (_a = props.sortOptions.find(item => item.value === props.sort)) === null || _a === void 0 ? void 0 : _a.label;
+    });
     // State
     const proxyView = ref(props.view);
     const proxySort = ref(props.sort);
@@ -209,6 +213,7 @@ var script = defineComponent({
       proxyView,
       proxySort,
       proxySearch,
+      sortLabel,
       switchView,
       handleSort,
       handleSearch
@@ -242,7 +247,7 @@ var __vue_render__ = function () {
         return _vm.sortMenu.toggle();
       }
     }
-  }, [_vm._v("\n          " + _vm._s(_vm.proxySort) + "\n          "), _vm.sortMenu ? _c('OrIcon', {
+  }, [_vm._v("\n          " + _vm._s(_vm.sortLabel) + "\n          "), _vm.sortMenu ? _c('OrIcon', {
     attrs: {
       "icon": _vm.sortMenu.isOpen ? 'arrow_drop_up' : 'arrow_drop_down'
     }
@@ -256,10 +261,10 @@ var __vue_render__ = function () {
       key: sortItem,
       on: {
         "click": function ($event) {
-          return _vm.handleSort(sortItem);
+          return _vm.handleSort(sortItem.value);
         }
       }
-    }, [_vm._v("\n            " + _vm._s(sortItem) + "\n          ")]);
+    }, [_vm._v("\n            " + _vm._s(sortItem.label) + "\n          ")]);
   }), 1)] : _vm._e()], 2), _vm._v(" "), _c('div', {
     class: _vm.toolbarPanelStyles
   }, [_c('OrSearch', {
@@ -287,7 +292,10 @@ var __vue_render__ = function () {
         }
       }
     });
-  }) : _vm._e(), _vm._v(" "), _vm._t("addon")], 2)], 1)]), _vm._v(" "), _vm._t(_vm.proxyView, function () {
+  }) : _vm._e(), _vm._v(" "), _vm._t("addon")], 2)], 1)]), _vm._v(" "), _vm._t("header", null, null, {
+    items: _vm.items,
+    mode: _vm.proxyView
+  }), _vm._v(" "), _vm._t(_vm.proxyView, function () {
     return [_c('OrCardCollectionView', {
       attrs: {
         "items": _vm.items,

package/dist/esm/v2/components/index.js

@@ -8,7 +8,7 @@ export { a as BUTTON_COLOR, c as BUTTON_LOADER_TYPE, b as BUTTON_SIZE, B as BUTT
 export { a as ButtonColor, b as ButtonType, B as ButtonVariant, _ as OrButtonV3 } from '../OrButton-357a5756.js';
 export { _ as OrCard } from '../OrCard-b7268256.js';
 export { C as CARD_COLLECTION_LAYOUT, _ as OrCardCollection } from '../OrCardCollection-f6b07557.js';
-export { C as CardCollectionView, _ as OrCardCollectionV3 } from '../OrCardCollection-95b051e1.js';
+export { C as CardCollectionView, _ as OrCardCollectionV3 } from '../OrCardCollection-e7a4ead6.js';
 export { _ as OrCardV3 } from '../OrCard-de799db0.js';
 export { a as OrCarousel, _ as OrCarouselItem } from '../OrCarouselItem-4e2cf3d8.js';
 export { _ as OrCheckbox } from '../OrCheckbox-915f1f0a.js';

package/dist/esm/v2/components/or-card-collection-v3/OrCardCollection.vue.d.ts

@@ -1,6 +1,6 @@
 import { PropType } from 'vue-demi';
 import { CardCollectionView } from './props';
-import { CardCollectionItem, ViewMode } from './types';
+import { CardCollectionItem, SortOption, ViewMode } from './types';
 declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     sortMenu: import("@vue/composition-api").Ref<(import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<unknown>, import("@vue/composition-api").MethodOptions, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>, import("@vue/composition-api").ExtractPropTypes<import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
@@ -19,6 +19,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     proxyView: import("@vue/composition-api").Ref<string>;
     proxySort: import("@vue/composition-api").Ref<string>;
     proxySearch: import("@vue/composition-api").Ref<string>;
+    sortLabel: import("@vue/composition-api").ComputedRef<string | undefined>;
     switchView: (view: string) => void;
     handleSort: (sort: string) => void;
     handleSearch: (search: string) => void;
@@ -40,7 +41,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         default: undefined;
     };
     sortOptions: {
-        type: PropType<string[]>;
+        type: PropType<SortOption[]>;
         default: () => never[];
     };
     search: {
@@ -65,7 +66,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         default: undefined;
     };
     sortOptions: {
-        type: PropType<string[]>;
+        type: PropType<SortOption[]>;
         default: () => never[];
     };
     search: {
@@ -78,7 +79,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     items: CardCollectionItem[];
     view: string;
     viewModes: ViewMode[];
-    sortOptions: string[];
+    sortOptions: SortOption[];
 } & {} & {
     [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
 }, import("@vue/composition-api").ShallowUnwrapRef<{
@@ -99,6 +100,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     proxyView: import("@vue/composition-api").Ref<string>;
     proxySort: import("@vue/composition-api").Ref<string>;
     proxySearch: import("@vue/composition-api").Ref<string>;
+    sortLabel: import("@vue/composition-api").ComputedRef<string | undefined>;
     switchView: (view: string) => void;
     handleSort: (sort: string) => void;
     handleSearch: (search: string) => void;
@@ -108,7 +110,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     items: CardCollectionItem[];
     view: string;
     viewModes: ViewMode[];
-    sortOptions: string[];
+    sortOptions: SortOption[];
 } & {} & {
     [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
 }, {
@@ -117,6 +119,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     items: CardCollectionItem[];
     view: string;
     viewModes: ViewMode[];
-    sortOptions: string[];
+    sortOptions: SortOption[];
 }, true>);
 export default _default;

package/dist/esm/v2/components/or-card-collection-v3/index.js

@@ -1,4 +1,4 @@
-export { C as CardCollectionView, _ as OrCardCollectionV3 } from '../../OrCardCollection-95b051e1.js';
+export { C as CardCollectionView, _ as OrCardCollectionV3 } from '../../OrCardCollection-e7a4ead6.js';
 import 'vue-demi';
 import '../../useClassAttribute-47fdb016.js';
 import '@vueuse/core';

package/dist/esm/v2/components/or-card-collection-v3/types.d.ts

@@ -6,3 +6,7 @@ export interface ViewMode {
     view: string;
     icon: string;
 }
+export interface SortOption {
+    label: string;
+    value: string;
+}

package/dist/esm/v2/index.js

@@ -8,7 +8,7 @@ export { a as BUTTON_COLOR, c as BUTTON_LOADER_TYPE, b as BUTTON_SIZE, B as BUTT
 export { a as ButtonColor, b as ButtonType, B as ButtonVariant, _ as OrButtonV3 } from './OrButton-357a5756.js';
 export { _ as OrCard } from './OrCard-b7268256.js';
 export { C as CARD_COLLECTION_LAYOUT, _ as OrCardCollection } from './OrCardCollection-f6b07557.js';
-export { C as CardCollectionView, _ as OrCardCollectionV3 } from './OrCardCollection-95b051e1.js';
+export { C as CardCollectionView, _ as OrCardCollectionV3 } from './OrCardCollection-e7a4ead6.js';
 export { _ as OrCardV3 } from './OrCard-de799db0.js';
 export { a as OrCarousel, _ as OrCarouselItem } from './OrCarouselItem-4e2cf3d8.js';
 export { _ as OrCheckbox } from './OrCheckbox-915f1f0a.js';

package/dist/esm/v3/{OrCardCollection-afd863fc.js → OrCardCollection-3bd67c5c.js}

@@ -142,6 +142,10 @@ var script = defineComponent({
     const rootStyles = computed(() => ['or-card-collection', ...CardCollectionRoot, classAttribute.value]);
     const toolbarStyles = computed(() => [...CardCollectionToolbar]);
     const toolbarPanelStyles = computed(() => [...CardCollectionToolbarPanel]);
+    const sortLabel = computed(() => {
+      var _a;
+      return (_a = props.sortOptions.find(item => item.value === props.sort)) === null || _a === void 0 ? void 0 : _a.label;
+    });
     // State
     const proxyView = ref(props.view);
     const proxySort = ref(props.sort);
@@ -185,6 +189,7 @@ var script = defineComponent({
       proxyView,
       proxySort,
       proxySearch,
+      sortLabel,
       switchView,
       handleSort,
       handleSearch
@@ -219,7 +224,7 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     color: "inherit",
     onClick: _cache[0] || (_cache[0] = $event => _ctx.sortMenu.toggle())
   }, {
-    default: withCtx(() => [createTextVNode(toDisplayString(_ctx.proxySort) + " ", 1 /* TEXT */), _ctx.sortMenu ? (openBlock(), createBlock(_component_OrIcon, {
+    default: withCtx(() => [createTextVNode(toDisplayString(_ctx.sortLabel) + " ", 1 /* TEXT */), _ctx.sortMenu ? (openBlock(), createBlock(_component_OrIcon, {
       key: 0,
       icon: _ctx.sortMenu.isOpen ? 'arrow_drop_up' : 'arrow_drop_down'
     }, null, 8 /* PROPS */, ["icon"])) : createCommentVNode("v-if", true)]),
@@ -231,9 +236,9 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
     default: withCtx(() => [(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.sortOptions, sortItem => {
       return openBlock(), createBlock(_component_OrMenuItem, {
         key: sortItem,
-        onClick: $event => _ctx.handleSort(sortItem)
+        onClick: $event => _ctx.handleSort(sortItem.value)
       }, {
-        default: withCtx(() => [createTextVNode(toDisplayString(sortItem), 1 /* TEXT */)]),
+        default: withCtx(() => [createTextVNode(toDisplayString(sortItem.label), 1 /* TEXT */)]),
 
         _: 2 /* DYNAMIC */
       }, 1032 /* PROPS, DYNAMIC_SLOTS */, ["onClick"]);
@@ -257,7 +262,10 @@ function render(_ctx, _cache, $props, $setup, $data, $options) {
       },
       onClick: $event => _ctx.switchView(viewOption.view)
     }, null, 8 /* PROPS */, ["icon", "onClick"]);
-  }), 128 /* KEYED_FRAGMENT */)) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "addon")])], 2 /* CLASS */)], 2 /* CLASS */), renderSlot(_ctx.$slots, _ctx.proxyView, normalizeProps(guardReactiveProps({
+  }), 128 /* KEYED_FRAGMENT */)) : createCommentVNode("v-if", true), renderSlot(_ctx.$slots, "addon")])], 2 /* CLASS */)], 2 /* CLASS */), renderSlot(_ctx.$slots, "header", normalizeProps(guardReactiveProps({
+    items: _ctx.items,
+    mode: _ctx.proxyView
+  }))), renderSlot(_ctx.$slots, _ctx.proxyView, normalizeProps(guardReactiveProps({
     items: _ctx.items
   })), () => [createVNode(_component_OrCardCollectionView, {
     items: _ctx.items,

package/dist/esm/v3/components/index.js

@@ -6,7 +6,7 @@ export { b as BUTTON_COLOR, d as BUTTON_LOADER_TYPE, c as BUTTON_SIZE, B as BUTT
 export { a as ButtonColor, b as ButtonType, B as ButtonVariant, s as OrButtonV3 } from '../OrButton-f4b9ee51.js';
 export { s as OrCard } from '../OrCard-e3a5aea4.js';
 export { C as CARD_COLLECTION_LAYOUT, s as OrCardCollection } from '../OrCardCollection-a5e326ef.js';
-export { C as CardCollectionView, s as OrCardCollectionV3 } from '../OrCardCollection-afd863fc.js';
+export { C as CardCollectionView, s as OrCardCollectionV3 } from '../OrCardCollection-3bd67c5c.js';
 export { s as OrCardV3 } from '../OrCard-fd92f7c8.js';
 export { a as OrCarousel, s as OrCarouselItem } from '../OrCarouselItem-636d99a1.js';
 export { s as OrCheckbox } from '../OrCheckbox-ed4a19cf.js';

package/dist/esm/v3/components/or-card-collection-v3/OrCardCollection.vue.d.ts

@@ -1,6 +1,6 @@
 import { PropType } from 'vue-demi';
 import { CardCollectionView } from './props';
-import { CardCollectionItem, ViewMode } from './types';
+import { CardCollectionItem, SortOption, ViewMode } from './types';
 declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
     root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
     sortMenu: import("@vue/composition-api").Ref<(import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<unknown>, import("@vue/composition-api").MethodOptions, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>, import("@vue/composition-api").ExtractPropTypes<import("@vue/composition-api").ComponentPropsOptions<import("@vue/composition-api").Data>>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{} & {}, import("@vue/composition-api").ShallowUnwrapRef<unknown>, unknown, import("@vue/composition-api").ComputedOptions, import("@vue/composition-api").MethodOptions, unknown, unknown, {
@@ -19,6 +19,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     proxyView: import("@vue/composition-api").Ref<string>;
     proxySort: import("@vue/composition-api").Ref<string>;
     proxySearch: import("@vue/composition-api").Ref<string>;
+    sortLabel: import("@vue/composition-api").ComputedRef<string | undefined>;
     switchView: (view: string) => void;
     handleSort: (sort: string) => void;
     handleSearch: (search: string) => void;
@@ -40,7 +41,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         default: undefined;
     };
     sortOptions: {
-        type: PropType<string[]>;
+        type: PropType<SortOption[]>;
         default: () => never[];
     };
     search: {
@@ -65,7 +66,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
         default: undefined;
     };
     sortOptions: {
-        type: PropType<string[]>;
+        type: PropType<SortOption[]>;
         default: () => never[];
     };
     search: {
@@ -78,7 +79,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     items: CardCollectionItem[];
     view: string;
     viewModes: ViewMode[];
-    sortOptions: string[];
+    sortOptions: SortOption[];
 } & {} & {
     [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
 }, import("@vue/composition-api").ShallowUnwrapRef<{
@@ -99,6 +100,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     proxyView: import("@vue/composition-api").Ref<string>;
     proxySort: import("@vue/composition-api").Ref<string>;
     proxySearch: import("@vue/composition-api").Ref<string>;
+    sortLabel: import("@vue/composition-api").ComputedRef<string | undefined>;
     switchView: (view: string) => void;
     handleSort: (sort: string) => void;
     handleSearch: (search: string) => void;
@@ -108,7 +110,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     items: CardCollectionItem[];
     view: string;
     viewModes: ViewMode[];
-    sortOptions: string[];
+    sortOptions: SortOption[];
 } & {} & {
     [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
 }, {
@@ -117,6 +119,6 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
     items: CardCollectionItem[];
     view: string;
     viewModes: ViewMode[];
-    sortOptions: string[];
+    sortOptions: SortOption[];
 }, true>);
 export default _default;

package/dist/esm/v3/components/or-card-collection-v3/index.js

@@ -1,4 +1,4 @@
-export { C as CardCollectionView, s as OrCardCollectionV3 } from '../../OrCardCollection-afd863fc.js';
+export { C as CardCollectionView, s as OrCardCollectionV3 } from '../../OrCardCollection-3bd67c5c.js';
 import 'vue-demi';
 import '../../useClassAttribute-47fdb016.js';
 import '@vueuse/core';

package/dist/esm/v3/components/or-card-collection-v3/types.d.ts

@@ -6,3 +6,7 @@ export interface ViewMode {
     view: string;
     icon: string;
 }
+export interface SortOption {
+    label: string;
+    value: string;
+}

package/dist/esm/v3/index.js

@@ -6,7 +6,7 @@ export { b as BUTTON_COLOR, d as BUTTON_LOADER_TYPE, c as BUTTON_SIZE, B as BUTT
 export { a as ButtonColor, b as ButtonType, B as ButtonVariant, s as OrButtonV3 } from './OrButton-f4b9ee51.js';
 export { s as OrCard } from './OrCard-e3a5aea4.js';
 export { C as CARD_COLLECTION_LAYOUT, s as OrCardCollection } from './OrCardCollection-a5e326ef.js';
-export { C as CardCollectionView, s as OrCardCollectionV3 } from './OrCardCollection-afd863fc.js';
+export { C as CardCollectionView, s as OrCardCollectionV3 } from './OrCardCollection-3bd67c5c.js';
 export { s as OrCardV3 } from './OrCard-fd92f7c8.js';
 export { a as OrCarousel, s as OrCarouselItem } from './OrCarouselItem-636d99a1.js';
 export { s as OrCheckbox } from './OrCheckbox-ed4a19cf.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@onereach/ui-components",
-  "version": "2.69.1-beta.2090.0",
+  "version": "2.69.1-beta.2097.0",
   "description": "Vue components library for v2/3",
   "sideEffects": false,
   "main": "./dist/auto/index.js",

package/src/components/or-card-collection-v3/OrCardCollection.stories3.ts

@@ -1,5 +1,6 @@
 import { action } from '@storybook/addon-actions';
 import { Meta, StoryFn } from '@storybook/vue3';
+import { ref } from 'vue-demi';
 import { OrIconV3 as OrIcon } from '../or-icon-v3';
 import OrCardCollectionDocs from './OrCardCollection.docs.mdx';
 import OrCardCollection from './OrCardCollection.vue';
@@ -14,7 +15,7 @@ export default {
 
   argTypes: {
     // Slots
-    gridItem: {
+    item: {
       type: {
         name: 'string',
         required: true,
@@ -23,10 +24,9 @@ export default {
       control: { type: 'text' },
     },
 
-    listItem: {
+    header: {
       type: {
         name: 'string',
-        required: true,
       },
 
       control: { type: 'text' },
@@ -46,7 +46,7 @@ export default {
       control: { type: 'object' },
     },
 
-    sortHeaders: {
+    sortOptions: {
       control: { type: 'object' },
     },
 
@@ -84,10 +84,17 @@ const Template: StoryFn<typeof OrCardCollection> = (args) => ({
   },
 
   setup() {
+    const sort = ref(args.sort);
+    const onSortChange = (newSort: string) => {
+      sort.value = newSort;
+      action('searchChange')(newSort);
+    };
+
     return {
       args,
+      sort,
+      onSortChange,
       onViewChange: action('viewChange'),
-      onSortChange: action('sortChange'),
       onSearchChange: action('searchChange'),
     };
   },
@@ -96,10 +103,14 @@ const Template: StoryFn<typeof OrCardCollection> = (args) => ({
     <div class="p-md bg-surface-1 dark:bg-surface-1-dark">
       <OrCardCollection
         v-bind="args"
+        :sort="sort"
         @viewChange="onViewChange"
         @sortChange="onSortChange"
         @searchChange="onSearchChange"
       >
+        <template #header>
+          ${args.header}
+        </template>
         <template #item="{item, mode}">
           <OrCard>${args.item} ({{mode}})</OrCard>
         </template>
@@ -156,12 +167,24 @@ WithSorting.args = {
   ...Default.args,
 
   // Props
-  sort: 'Bar',
+  sort: 'bar',
   sortOptions: [
-    'Foo',
-    'Bar',
-    'Baz',
-    'Qux',
+    {
+      label: 'Foo',
+      value: 'foo',
+    },
+    {
+      label: 'Bar',
+      value: 'bar',
+    },
+    {
+      label: 'Baz',
+      value: 'baz',
+    },
+    {
+      label: 'Qux',
+      value: 'qux',
+    },
   ],
 };
 
@@ -189,8 +212,10 @@ export const OverrideViewContainer: StoryFn<typeof OrCardCollection> = (args) =>
         @sortChange="onSortChange"
         @searchChange="onSearchChange"
       >
+      <template #header="{mode}">
+        <div class="typography-headline-3">Custom {{ mode }}</div>
+      </template>
       <template #grid="{items}">
-        <div class="typography-headline-3">Custom grid</div>
         <div class="grid grid-cols-3">
           <OrCard
             v-for="item in items"
@@ -201,7 +226,6 @@ export const OverrideViewContainer: StoryFn<typeof OrCardCollection> = (args) =>
         </div>
       </template>
         <template #list="{items}">
-          <div class="typography-headline-3">Custom list</div>
           <ul>
             <li
               v-for="item in items"

package/src/components/or-card-collection-v3/OrCardCollection.vue

@@ -13,7 +13,7 @@
             color="inherit"
             @click="sortMenu.toggle()"
           >
-            {{ proxySort }}
+            {{ sortLabel }}
             <OrIcon
               v-if="sortMenu"
               :icon="sortMenu.isOpen ? 'arrow_drop_up' : 'arrow_drop_down'"
@@ -26,14 +26,13 @@
             <OrMenuItem
               v-for="sortItem in sortOptions"
               :key="sortItem"
-              @click="handleSort(sortItem)"
+              @click="handleSort(sortItem.value)"
             >
-              {{ sortItem }}
+              {{ sortItem.label }}
             </OrMenuItem>
           </OrMenu>
         </template>
       </div>
-
       <div
         :class="toolbarPanelStyles"
       >
@@ -55,7 +54,13 @@
         </div>
       </div>
     </div>
-
+    <slot
+      name="header"
+      v-bind="{
+        items,
+        mode: proxyView,
+      }"
+    />
     <slot
       :name="proxyView"
       v-bind="{items}"
@@ -88,7 +93,7 @@ import {
   CardCollectionToolbar,
   CardCollectionToolbarPanel,
 } from './styles';
-import { CardCollectionItem, ViewMode } from './types';
+import { CardCollectionItem, SortOption, ViewMode } from './types';
 import OrCardCollectionView from './OrCardCollectionView.vue3.vue';
 import { OrButtonV3 as OrButton } from '../or-button-v3';
 import { OrSearchV3 as OrSearch } from '../or-search-v3';
@@ -131,7 +136,7 @@ export default defineComponent({
     },
 
     sortOptions: {
-      type: Array as PropType<string[]>,
+      type: Array as PropType<SortOption[]>,
       default: () => [],
     },
 
@@ -174,6 +179,9 @@ export default defineComponent({
       ...CardCollectionToolbarPanel,
     ]);
 
+    const sortLabel = computed(() => {
+      return props.sortOptions.find(item => item.value === props.sort)?.label;
+    });
     // State
     const proxyView = ref(props.view);
     const proxySort = ref(props.sort);
@@ -226,6 +234,7 @@ export default defineComponent({
       proxyView,
       proxySort,
       proxySearch,
+      sortLabel,
       switchView,
       handleSort,
       handleSearch,

package/src/components/or-card-collection-v3/types.ts

@@ -7,3 +7,8 @@ export interface ViewMode {
   view: string;
   icon: string;
 }
+
+export interface SortOption {
+  label: string;
+  value: string;
+}