@onereach/ui-components 2.62.2 → 2.62.3-beta.1897.0

package/dist/v2/OrCardCollection-89a315ed.js

@@ -0,0 +1,227 @@
+import { defineComponent, ref, computed, watch } from 'vue-demi';
+import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
+import '@vueuse/core';
+import { _ as __vue_component__$1 } from './OrCard-1d904e72.js';
+import { _ as __vue_component__$2 } from './OrIconButton-1b34f3fa.js';
+import { _ as __vue_component__$3 } from './OrInput-0508c3fb.js';
+import { _ as __vue_component__$4 } from './OrSortHeader-a6004b24.js';
+import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
+
+var CardCollectionView;
+(function (CardCollectionView) {
+  CardCollectionView["Grid"] = "grid";
+  CardCollectionView["List"] = "list";
+})(CardCollectionView || (CardCollectionView = {}));
+
+const CardCollectionRoot = [
+// Layout
+'flex flex-col',
+// Spacing
+'gap-md'];
+const CardCollectionToolbar = [
+// Layout
+'flex', 'justify-between', 'items-center',
+// Typography
+'typography-body-2-regular',
+// Theme
+'theme-foreground-default', 'dark:theme-foreground-default-dark'];
+const CardCollectionToolbarPanel = [
+// Layout
+'flex', 'justify-normal', 'items-center',
+// Spacing
+'gap-sm'];
+const CardCollectionContent = [
+// Layout
+'grid',
+// Spacing
+'gap-sm md:gap-md'];
+const CardCollectionContentViews = {
+  'grid': [
+  // Layout
+  'sm:grid-cols-1', 'md:grid-cols-2', 'lg:grid-cols-4', 'xl:grid-cols-6'],
+  'list': []
+};
+
+var script = defineComponent({
+  name: 'OrCardCollection',
+  components: {
+    OrCard: __vue_component__$1,
+    OrIconButton: __vue_component__$2,
+    OrInput: __vue_component__$3,
+    OrSortHeader: __vue_component__$4
+  },
+  inheritAttrs: false,
+  props: {
+    items: {
+      type: Array,
+      default: []
+    },
+    view: {
+      type: String,
+      default: CardCollectionView.Grid
+    },
+    sort: {
+      type: Object,
+      default: undefined
+    },
+    sortHeaders: {
+      type: Array,
+      default: undefined
+    },
+    search: {
+      type: String,
+      default: undefined
+    }
+  },
+  emits: ['viewChange', 'sortChange', 'searchChange'],
+  expose: ['root'],
+  setup(props, context) {
+    // Refs
+    const root = ref();
+    // Styles
+    const classAttribute = useClassAttribute();
+    const rootStyles = computed(() => ['or-card-collection', ...CardCollectionRoot, classAttribute.value]);
+    const toolbarStyles = computed(() => [...CardCollectionToolbar]);
+    const toolbarPanelStyles = computed(() => [...CardCollectionToolbarPanel]);
+    const contentStyles = computed(() => [...CardCollectionContent, ...CardCollectionContentViews[proxyView.value]]);
+    // State
+    const proxyView = ref(props.view);
+    const proxySort = ref(props.sort);
+    const proxySearch = ref(props.search);
+    // Methods
+    function switchToGridView() {
+      proxyView.value = CardCollectionView.Grid;
+    }
+    function switchToListView() {
+      proxyView.value = CardCollectionView.List;
+    }
+    // Effects
+    watch(() => props.view, value => {
+      proxyView.value = value;
+    });
+    watch(proxyView, value => {
+      context.emit('viewChange', value);
+    });
+    watch(() => props.sort, value => {
+      proxySort.value = value;
+    });
+    watch(proxySort, value => {
+      context.emit('sortChange', value);
+    });
+    watch(() => props.search, value => {
+      proxySearch.value = value;
+    });
+    watch(proxySearch, value => {
+      context.emit('searchChange', value);
+    });
+    return {
+      root,
+      rootStyles,
+      toolbarStyles,
+      toolbarPanelStyles,
+      contentStyles,
+      proxyView,
+      proxySort,
+      proxySearch,
+      switchToGridView,
+      switchToListView
+    };
+  }
+});
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('div', _vm._b({
+    ref: "root",
+    class: _vm.rootStyles
+  }, 'div', _vm.$attrs, false), [_c('div', {
+    class: _vm.toolbarStyles
+  }, [_c('div', {
+    class: _vm.toolbarPanelStyles
+  }, [_vm.sortHeaders ? _vm._l(_vm.sortHeaders, function (header) {
+    return _c('OrSortHeader', {
+      key: header.value,
+      attrs: {
+        "input-value": header.value
+      },
+      model: {
+        value: _vm.proxySort,
+        callback: function ($$v) {
+          _vm.proxySort = $$v;
+        },
+        expression: "proxySort"
+      }
+    }, [_vm._v("\n          " + _vm._s(header.label) + "\n        ")]);
+  }) : _vm._e()], 2), _vm._v(" "), _c('div', {
+    class: _vm.toolbarPanelStyles
+  }, [_c('OrInput', {
+    attrs: {
+      "type": 'search',
+      "placeholder": 'Search',
+      "size": 's'
+    },
+    model: {
+      value: _vm.proxySearch,
+      callback: function ($$v) {
+        _vm.proxySearch = $$v;
+      },
+      expression: "proxySearch"
+    }
+  }), _vm._v(" "), _c('OrIconButton', {
+    attrs: {
+      "icon": 'grid_view'
+    },
+    on: {
+      "click": function ($event) {
+        return _vm.switchToGridView();
+      }
+    }
+  }), _vm._v(" "), _c('OrIconButton', {
+    attrs: {
+      "icon": 'view_list'
+    },
+    on: {
+      "click": function ($event) {
+        return _vm.switchToListView();
+      }
+    }
+  }), _vm._v(" "), _vm._t("addon")], 2)]), _vm._v(" "), _c('div', {
+    class: _vm.contentStyles
+  }, [_vm.proxyView === 'grid' ? _vm._l(_vm.items, function (item) {
+    return _c('OrCard', {
+      key: item.id
+    }, [_vm._t("gridItem", null, null, item)], 2);
+  }) : _vm._e(), _vm._v(" "), _vm.proxyView === 'list' ? _vm._l(_vm.items, function (item) {
+    return _c('OrCard', {
+      key: item.id
+    }, [_vm._t("listItem", null, null, item)], 2);
+  }) : _vm._e()], 2)]);
+};
+var __vue_staticRenderFns__ = [];
+
+/* style */
+const __vue_inject_styles__ = undefined;
+/* scoped */
+const __vue_scope_id__ = undefined;
+/* module identifier */
+const __vue_module_identifier__ = undefined;
+/* functional template */
+const __vue_is_functional_template__ = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__ = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__,
+  staticRenderFns: __vue_staticRenderFns__
+}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
+
+export { CardCollectionView as C, __vue_component__ as _ };

package/dist/v2/{OrConfirm-d561bf82.js → OrConfirm-3896bd11.js}

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed, watch } from 'vue-demi';
 import { _ as __vue_component__$2, a as ButtonColor } from './OrButton-eb895669.js';
 import { _ as __vue_component__$1 } from './OrOverlay-4838a9b0.js';
-import { _ as __vue_component__$3 } from './OrInput-0dcfba2a.js';
+import { _ as __vue_component__$3 } from './OrInput-0508c3fb.js';
 import { useMagicKeys, whenever } from '@vueuse/core';
 import { logicAnd } from '@vueuse/math';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';

package/dist/v2/{OrInlineInput-e754cb9f.js → OrInlineInput-c1d6fb73.js}

@@ -160,7 +160,7 @@ var script = defineComponent({
   }
 });
 
-var css_248z = "input[data-v-8d82b992]{min-width:0;background:0 0;outline:0}input[type=number][data-v-8d82b992]::-webkit-inner-spin-button{display:none}input[type=search][data-v-8d82b992]::-webkit-search-cancel-button{display:none}";
+var css_248z = "input[data-v-98e5193c]{min-width:0;background:0 0;outline:0}input[type=number][data-v-98e5193c]::-webkit-inner-spin-button{display:none}input[type=search][data-v-98e5193c]::-webkit-search-cancel-button{display:none}";
 styleInject(css_248z);
 
 /* script */
@@ -310,15 +310,15 @@ var __vue_render__ = function () {
         return _vm.reset.apply(null, arguments);
       }
     }
-  })], 1)] : _vm._e()], 2), _vm._v(" "), !_vm.invalid ? [_c('OrHint', {
+  })], 1)] : _vm._e()], 2), _vm._v(" "), !_vm.invalid ? [_vm.hint || _vm.maxLength ? [_c('OrHint', {
     scopedSlots: _vm._u([_vm.maxLength ? {
       key: "addon",
       fn: function () {
-        return [_vm._v("\n        " + _vm._s(_vm.currentLength) + " / " + _vm._s(_vm.maxLength) + "\n      ")];
+        return [_vm._v("\n          " + _vm._s(_vm.currentLength) + " / " + _vm._s(_vm.maxLength) + "\n        ")];
       },
       proxy: true
     } : null], null, true)
-  }, [_vm._v("\n      " + _vm._s(_vm.hint) + "\n\n      ")])] : [_c('OrError', {
+  }, [_vm._v("\n        " + _vm._s(_vm.hint) + "\n\n        ")])] : _vm._e()] : [_c('OrError', {
     scopedSlots: _vm._u([_vm.maxLength ? {
       key: "addon",
       fn: function () {
@@ -333,7 +333,7 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = undefined;
 /* scoped */
-const __vue_scope_id__ = "data-v-8d82b992";
+const __vue_scope_id__ = "data-v-98e5193c";
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */

package/dist/v2/{OrInlineTextarea-7dc58bb1.js → OrInlineTextarea-7ec4c40d.js}

@@ -146,7 +146,7 @@ var script = defineComponent({
   }
 });
 
-var css_248z = "textarea[data-v-d02de720]{min-width:0;background:0 0;outline:0}";
+var css_248z = "textarea[data-v-0bd7ec36]{min-width:0;background:0 0;outline:0}";
 styleInject(css_248z);
 
 /* script */
@@ -222,15 +222,15 @@ var __vue_render__ = function () {
         return _vm.reset.apply(null, arguments);
       }
     }
-  })], 1)] : _vm._e()], 2), _vm._v(" "), !_vm.invalid ? [_c('OrHint', {
+  })], 1)] : _vm._e()], 2), _vm._v(" "), !_vm.invalid ? [_vm.hint || _vm.maxLength ? [_c('OrHint', {
     scopedSlots: _vm._u([_vm.maxLength ? {
       key: "addon",
       fn: function () {
-        return [_vm._v("\n        " + _vm._s(_vm.currentLength) + " / " + _vm._s(_vm.maxLength) + "\n      ")];
+        return [_vm._v("\n          " + _vm._s(_vm.currentLength) + " / " + _vm._s(_vm.maxLength) + "\n        ")];
       },
       proxy: true
     } : null], null, true)
-  }, [_vm._v("\n      " + _vm._s(_vm.hint) + "\n\n      ")])] : [_c('OrError', {
+  }, [_vm._v("\n        " + _vm._s(_vm.hint) + "\n\n        ")])] : _vm._e()] : [_c('OrError', {
     scopedSlots: _vm._u([_vm.maxLength ? {
       key: "addon",
       fn: function () {
@@ -245,7 +245,7 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = undefined;
 /* scoped */
-const __vue_scope_id__ = "data-v-d02de720";
+const __vue_scope_id__ = "data-v-0bd7ec36";
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */

package/dist/v2/{OrInput-0dcfba2a.js → OrInput-0508c3fb.js}

@@ -143,7 +143,7 @@ var script = defineComponent({
   }
 });
 
-var css_248z = "input[data-v-8536ff50]{min-width:0;background:0 0;outline:0}input[type=number][data-v-8536ff50]::-webkit-inner-spin-button{display:none}input[type=search][data-v-8536ff50]::-webkit-search-cancel-button{display:none}";
+var css_248z = "input[data-v-be64b3c2]{min-width:0;background:0 0;outline:0}input[type=number][data-v-be64b3c2]::-webkit-inner-spin-button{display:none}input[type=search][data-v-be64b3c2]::-webkit-search-cancel-button{display:none}";
 styleInject(css_248z);
 
 /* script */
@@ -334,18 +334,18 @@ var __vue_render__ = function () {
       "icon": 'search',
       "variant": 'outlined'
     }
-  })]] : _vm._e()], 2), _vm._v(" "), !_vm.invalid ? [_c('OrHint', {
+  })]] : _vm._e()], 2), _vm._v(" "), !_vm.invalid ? [_vm.hint || _vm.maxLength ? [_c('OrHint', {
     attrs: {
       "disabled": _vm.disabled
     },
     scopedSlots: _vm._u([_vm.maxLength ? {
       key: "addon",
       fn: function () {
-        return [_vm._v("\n        " + _vm._s(_vm.currentLength) + " / " + _vm._s(_vm.maxLength) + "\n      ")];
+        return [_vm._v("\n          " + _vm._s(_vm.currentLength) + " / " + _vm._s(_vm.maxLength) + "\n        ")];
       },
       proxy: true
     } : null], null, true)
-  }, [_vm._v("\n      " + _vm._s(_vm.hint) + "\n\n      ")])] : [_c('OrError', {
+  }, [_vm._v("\n        " + _vm._s(_vm.hint) + "\n\n        ")])] : _vm._e()] : [_c('OrError', {
     attrs: {
       "disabled": _vm.disabled
     },
@@ -363,7 +363,7 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = undefined;
 /* scoped */
-const __vue_scope_id__ = "data-v-8536ff50";
+const __vue_scope_id__ = "data-v-be64b3c2";
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */

package/dist/v2/{OrSearch-45ea8c33.js → OrSearch-feca9f48.js}

@@ -1,7 +1,7 @@
 import { defineComponent, ref, computed } from 'vue-demi';
 import { debouncedWatch } from '@vueuse/core';
 import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
-import { _ as __vue_component__$1 } from './OrInput-0dcfba2a.js';
+import { _ as __vue_component__$1 } from './OrInput-0508c3fb.js';
 import { a as InputBoxSize } from './OrInputBox-208dceac.js';
 import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
 

package/dist/v2/{OrSelect-21247104.js → OrSelect-bb539517.js}

@@ -8,7 +8,7 @@ import { _ as __vue_component__$3 } from './OrExpansionPanel-ce82a6fd.js';
 import { _ as __vue_component__$4 } from './OrHint-44356417.js';
 import { _ as __vue_component__$5 } from './OrIcon-124f3bad.js';
 import { _ as __vue_component__$7, a as InputBoxSize } from './OrInputBox-208dceac.js';
-import { _ as __vue_component__$6 } from './OrInput-0dcfba2a.js';
+import { _ as __vue_component__$6 } from './OrInput-0508c3fb.js';
 import { _ as __vue_component__$8 } from './OrLabel-5670468e.js';
 import { _ as __vue_component__$9 } from './OrMenuItem-3a28db7b.js';
 import { _ as __vue_component__$a } from './OrPopover-9080fc00.js';
@@ -501,11 +501,11 @@ var __vue_render__ = function () {
     class: _vm.noSearchResultsStyles
   }, [_vm._t("noSearchResultsTemplate", function () {
     return [_vm._v("\n            No results\n          ")];
-  })], 2)]], 2)], 2), _vm._v(" "), !_vm.invalid ? [_c('OrHint', {
+  })], 2)]], 2)], 2), _vm._v(" "), !_vm.invalid ? [_vm.hint ? [_c('OrHint', {
     attrs: {
       "disabled": _vm.disabled
     }
-  }, [_vm._v("\n      " + _vm._s(_vm.hint) + "\n    ")])] : [_c('OrError', {
+  }, [_vm._v("\n        " + _vm._s(_vm.hint) + "\n      ")])] : _vm._e()] : [_c('OrError', {
     attrs: {
       "disabled": _vm.disabled
     }

package/dist/v2/OrSortHeader-a6004b24.js

@@ -0,0 +1,133 @@
+import { defineComponent, ref, computed } from 'vue-demi';
+import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
+import '@vueuse/core';
+import { _ as __vue_component__$1 } from './OrIcon-124f3bad.js';
+import { n as normalizeComponent } from './normalize-component-6e8e3d80.js';
+
+const SortHeaderRoot = [
+// Layout
+'inline-flex', 'justify-normal', 'items-center',
+// Interactivity
+'interactivity-auto',
+// Typography
+'typography-caption-regular',
+// Typography (activated)
+'activated:typography-caption-semibold',
+// Theme
+'theme-foreground-outline', 'dark:theme-foreground-outline-dark',
+// Theme (activated)
+'activated:theme-foreground-default', 'dark:activated:theme-foreground-default-dark'];
+
+var script = defineComponent({
+  name: 'OrSortHeader',
+  components: {
+    OrIcon: __vue_component__$1
+  },
+  inheritAttrs: false,
+  props: {
+    modelValue: {
+      type: Object,
+      default: undefined
+    },
+    value: {
+      type: Object,
+      default: undefined
+    },
+    inputValue: {
+      type: String,
+      required: true
+    }
+  },
+  emits: ['update:modelValue', 'input', 'focus', 'blur'],
+  expose: ['root'],
+  setup(props, context) {
+    // Refs
+    const root = ref();
+    // Styles
+    const classAttribute = useClassAttribute();
+    const rootStyles = computed(() => ['or-sort-header', ...SortHeaderRoot, classAttribute.value]);
+    // State
+    const proxyModelValue = computed({
+      get: () => {
+        var _a;
+        return (_a = props.modelValue) !== null && _a !== void 0 ? _a : props.value; // TODO: Remove Vue 2 fallback
+      },
+
+      set: value => {
+        context.emit('input', value);
+        context.emit('update:modelValue', value);
+      }
+    });
+    const activated = computed(() => {
+      var _a;
+      return ((_a = proxyModelValue.value) === null || _a === void 0 ? void 0 : _a.column) === props.inputValue;
+    });
+    // Methods
+    function toggleDirection() {
+      var _a;
+      proxyModelValue.value = {
+        column: props.inputValue,
+        direction: ((_a = proxyModelValue.value) === null || _a === void 0 ? void 0 : _a.direction) === 'asc' ? 'desc' : 'asc'
+      };
+    }
+    return {
+      root,
+      rootStyles,
+      proxyModelValue,
+      activated,
+      toggleDirection
+    };
+  }
+});
+
+/* script */
+const __vue_script__ = script;
+
+/* template */
+var __vue_render__ = function () {
+  var _vm = this;
+  var _h = _vm.$createElement;
+  var _c = _vm._self._c || _h;
+  return _c('div', _vm._b({
+    ref: "root",
+    class: _vm.rootStyles,
+    attrs: {
+      "activated": _vm.activated ? '' : null
+    },
+    on: {
+      "click": function ($event) {
+        $event.stopPropagation();
+        return _vm.toggleDirection();
+      }
+    }
+  }, 'div', _vm.$attrs, false), [_vm._t("default"), _vm._v(" "), _vm.activated ? [_c('OrIcon', {
+    class: {
+      'rotate-180': _vm.proxyModelValue.direction === 'asc'
+    },
+    attrs: {
+      "icon": 'arrow_downward'
+    }
+  })] : _vm._e()], 2);
+};
+var __vue_staticRenderFns__ = [];
+
+/* style */
+const __vue_inject_styles__ = undefined;
+/* scoped */
+const __vue_scope_id__ = undefined;
+/* module identifier */
+const __vue_module_identifier__ = undefined;
+/* functional template */
+const __vue_is_functional_template__ = false;
+/* style inject */
+
+/* style inject SSR */
+
+/* style inject shadow dom */
+
+const __vue_component__ = /*#__PURE__*/normalizeComponent({
+  render: __vue_render__,
+  staticRenderFns: __vue_staticRenderFns__
+}, __vue_inject_styles__, __vue_script__, __vue_scope_id__, __vue_is_functional_template__, __vue_module_identifier__, false, undefined, undefined, undefined);
+
+export { __vue_component__ as _ };

package/dist/v2/{OrTextarea-8773d494.js → OrTextarea-cc70afc9.js}

@@ -113,7 +113,7 @@ var script = defineComponent({
   }
 });
 
-var css_248z = "textarea[data-v-65e7a0bc]{min-width:0;background:0 0;outline:0}";
+var css_248z = "textarea[data-v-61af6ad5]{min-width:0;background:0 0;outline:0}";
 styleInject(css_248z);
 
 /* script */
@@ -184,18 +184,18 @@ var __vue_render__ = function () {
         _vm.proxyModelValue = $event.target.value;
       }
     }
-  }, 'textarea', _vm.$attrs, false))]), _vm._v(" "), !_vm.invalid ? [_c('OrHint', {
+  }, 'textarea', _vm.$attrs, false))]), _vm._v(" "), !_vm.invalid ? [_vm.hint || _vm.maxLength ? [_c('OrHint', {
     attrs: {
       "disabled": _vm.disabled
     },
     scopedSlots: _vm._u([_vm.maxLength ? {
       key: "addon",
       fn: function () {
-        return [_vm._v("\n        " + _vm._s(_vm.currentLength) + " / " + _vm._s(_vm.maxLength) + "\n      ")];
+        return [_vm._v("\n          " + _vm._s(_vm.currentLength) + " / " + _vm._s(_vm.maxLength) + "\n        ")];
       },
       proxy: true
     } : null], null, true)
-  }, [_vm._v("\n      " + _vm._s(_vm.hint) + "\n\n      ")])] : [_c('OrError', {
+  }, [_vm._v("\n        " + _vm._s(_vm.hint) + "\n\n        ")])] : _vm._e()] : [_c('OrError', {
     attrs: {
       "disabled": _vm.disabled
     },
@@ -213,7 +213,7 @@ var __vue_staticRenderFns__ = [];
 /* style */
 const __vue_inject_styles__ = undefined;
 /* scoped */
-const __vue_scope_id__ = "data-v-65e7a0bc";
+const __vue_scope_id__ = "data-v-61af6ad5";
 /* module identifier */
 const __vue_module_identifier__ = undefined;
 /* functional template */

package/dist/v2/components/index.d.ts

@@ -6,6 +6,7 @@ export * from './or-button-v2';
 export * from './or-button-v3';
 export * from './or-card';
 export * from './or-card-collection';
+export * from './or-card-collection-v3';
 export * from './or-card-v3';
 export * from './or-carousel';
 export * from './or-checkbox';
@@ -65,6 +66,7 @@ export * from './or-sidebar-v3';
 export * from './or-skeleton';
 export * from './or-skeleton-v3';
 export * from './or-slider';
+export * from './or-sort-header-v3';
 export * from './or-stepper';
 export * from './or-switch';
 export * from './or-switch-v3';

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

@@ -0,0 +1,17 @@
+import { Meta, StoryFn } from '@storybook/vue3';
+declare const _default: Meta<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, {
+    [x: string]: ((...args: any[]) => any) | null;
+} | string[], {} & {}, {
+    [x: number]: string;
+} | {}, true>)>;
+export default _default;
+export declare const Default: StoryFn<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, {
+    [x: string]: ((...args: any[]) => any) | null;
+} | string[], {} & {}, {
+    [x: number]: string;
+} | {}, true>)>;
+export declare const WithSorting: StoryFn<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, {
+    [x: string]: ((...args: any[]) => any) | null;
+} | string[], {} & {}, {
+    [x: number]: string;
+} | {}, true>)>;