@onereach/ui-components 2.69.5-beta.2146.0 → 2.69.6-beta.2148.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (77) hide show
  1. package/dist/bundled/v2/{OrCardCollection-f622df47.js → OrCardCollection-c4209a92.js} +13 -9
  2. package/dist/bundled/v2/OrEmptyState-9fb413f9.js +160 -0
  3. package/dist/bundled/v2/{OrSearch-a11b3621.js → OrSearch-76b002cf.js} +1 -1
  4. package/dist/bundled/v2/components/index.d.ts +1 -0
  5. package/dist/bundled/v2/components/index.js +3 -2
  6. package/dist/bundled/v2/components/or-card-collection-v3/OrCardCollection.stories3.d.ts +5 -0
  7. package/dist/bundled/v2/components/or-card-collection-v3/OrCardCollection.vue.d.ts +22 -0
  8. package/dist/bundled/v2/components/or-card-collection-v3/index.js +2 -2
  9. package/dist/bundled/v2/components/or-empty-state-v3/OrEmptyState.vue.d.ts +1 -1
  10. package/dist/bundled/v2/components/or-empty-state-v3/index.js +3 -159
  11. package/dist/bundled/v2/components/or-input-box-v3/OrInputBox.vue.d.ts +1 -2
  12. package/dist/bundled/v2/components/or-search-v3/OrSearch.vue.d.ts +2 -2
  13. package/dist/bundled/v2/components/or-search-v3/index.js +1 -1
  14. package/dist/bundled/v2/index.js +4 -3
  15. package/dist/bundled/v3/{OrCardCollection.vue_vue_type_script_lang-15645a65.js → OrCardCollection.vue_vue_type_script_lang-9a2ae9a3.js} +10 -2
  16. package/dist/bundled/v3/OrEmptyState.vue_vue_type_script_lang-da7d6c42.js +111 -0
  17. package/dist/bundled/v3/{OrSearch.vue_vue_type_script_lang-0ae8a6dd.js → OrSearch.vue_vue_type_script_lang-014ad470.js} +1 -1
  18. package/dist/bundled/v3/components/index.d.ts +1 -0
  19. package/dist/bundled/v3/components/index.js +3 -2
  20. package/dist/bundled/v3/components/or-card-collection-v3/OrCardCollection.stories3.d.ts +5 -0
  21. package/dist/bundled/v3/components/or-card-collection-v3/OrCardCollection.vue.d.ts +22 -0
  22. package/dist/bundled/v3/components/or-card-collection-v3/index.js +2 -2
  23. package/dist/bundled/v3/components/or-empty-state-v3/OrEmptyState.vue.d.ts +1 -1
  24. package/dist/bundled/v3/components/or-empty-state-v3/index.js +2 -134
  25. package/dist/bundled/v3/components/or-input-box-v3/OrInputBox.vue.d.ts +1 -2
  26. package/dist/bundled/v3/components/or-search-v3/OrSearch.vue.d.ts +2 -2
  27. package/dist/bundled/v3/components/or-search-v3/index.js +1 -1
  28. package/dist/bundled/v3/index.js +219 -193
  29. package/dist/esm/v2/{OrCardCollection-43aa4a3c.js → OrCardCollection-57d11adf.js} +13 -9
  30. package/dist/esm/v2/OrEmptyState-2481f13f.js +158 -0
  31. package/dist/esm/v2/{OrSearch-62d91301.js → OrSearch-2f260b09.js} +1 -1
  32. package/dist/esm/v2/components/index.d.ts +1 -0
  33. package/dist/esm/v2/components/index.js +3 -2
  34. package/dist/esm/v2/components/or-card-collection-v3/OrCardCollection.stories3.d.ts +5 -0
  35. package/dist/esm/v2/components/or-card-collection-v3/OrCardCollection.vue.d.ts +22 -0
  36. package/dist/esm/v2/components/or-card-collection-v3/index.js +2 -2
  37. package/dist/esm/v2/components/or-empty-state-v3/OrEmptyState.vue.d.ts +1 -1
  38. package/dist/esm/v2/components/or-empty-state-v3/index.js +3 -158
  39. package/dist/esm/v2/components/or-input-box-v3/OrInputBox.vue.d.ts +1 -2
  40. package/dist/esm/v2/components/or-search-v3/OrSearch.vue.d.ts +2 -2
  41. package/dist/esm/v2/components/or-search-v3/index.js +1 -1
  42. package/dist/esm/v2/index.js +3 -2
  43. package/dist/esm/v3/{OrCardCollection-6b5e6b76.js → OrCardCollection-2a6514f3.js} +15 -6
  44. package/dist/esm/v3/OrEmptyState-bb8e3145.js +135 -0
  45. package/dist/esm/v3/OrInput-41691fb3.js +1 -1
  46. package/dist/esm/v3/{OrInputBox-5247ab25.js → OrInputBox-6d1b6059.js} +1 -1
  47. package/dist/esm/v3/{OrSearch-aafb93b4.js → OrSearch-e5a2e93e.js} +2 -2
  48. package/dist/esm/v3/OrSelect-7e813982.js +1 -1
  49. package/dist/esm/v3/OrTextarea-bb9ef3f2.js +1 -1
  50. package/dist/esm/v3/components/index.d.ts +1 -0
  51. package/dist/esm/v3/components/index.js +4 -3
  52. package/dist/esm/v3/components/or-card-collection-v3/OrCardCollection.stories3.d.ts +5 -0
  53. package/dist/esm/v3/components/or-card-collection-v3/OrCardCollection.vue.d.ts +22 -0
  54. package/dist/esm/v3/components/or-card-collection-v3/index.js +3 -3
  55. package/dist/esm/v3/components/or-confirm-v3/index.js +1 -1
  56. package/dist/esm/v3/components/or-empty-state-v3/OrEmptyState.vue.d.ts +1 -1
  57. package/dist/esm/v3/components/or-empty-state-v3/index.js +3 -135
  58. package/dist/esm/v3/components/or-input-box-v3/OrInputBox.vue.d.ts +1 -2
  59. package/dist/esm/v3/components/or-input-box-v3/index.js +2 -2
  60. package/dist/esm/v3/components/or-input-v3/index.js +1 -1
  61. package/dist/esm/v3/components/or-search-v3/OrSearch.vue.d.ts +2 -2
  62. package/dist/esm/v3/components/or-search-v3/index.js +2 -2
  63. package/dist/esm/v3/components/or-select-v3/index.js +1 -1
  64. package/dist/esm/v3/components/or-textarea-v3/index.js +1 -1
  65. package/dist/esm/v3/index.js +4 -3
  66. package/package.json +1 -1
  67. package/src/components/index.ts +1 -0
  68. package/src/components/or-card/OrCard.stories.ts +1 -1
  69. package/src/components/or-card-collection/OrCardCollection.stories.ts +1 -1
  70. package/src/components/or-card-collection-v3/OrCardCollection.stories3.ts +16 -0
  71. package/src/components/or-card-collection-v3/OrCardCollection.vue +13 -1
  72. package/src/components/or-card-collection-v3/styles.ts +3 -1
  73. package/src/components/or-empty-state-v3/OrEmptyState.vue +16 -10
  74. package/src/components/or-input-box-v3/OrInputBox.vue +1 -2
  75. package/src/components/or-search-v3/OrSearch.stories3.ts +1 -1
  76. package/src/components/or-search-v3/OrSearch.vue +1 -1
  77. package/src/components/or-teleport-v3/OrTeleport.stories3.ts +1 -1
@@ -0,0 +1,135 @@
1
+ import { defineComponent, ref, computed } from 'vue-demi';
2
+ import { openBlock, createElementBlock, normalizeClass, createCommentVNode, createElementVNode, toDisplayString, renderSlot } from 'vue';
3
+
4
+ var EmptyStateSize;
5
+ (function (EmptyStateSize) {
6
+ EmptyStateSize["L"] = "l";
7
+ EmptyStateSize["M"] = "m";
8
+ })(EmptyStateSize || (EmptyStateSize = {}));
9
+
10
+ const EmptyStateRoot = [
11
+ // Layout
12
+ 'grow', 'flex', 'flex-col', 'justify-center', 'items-center',
13
+ // Box
14
+ 'w-full',
15
+ // Sizing
16
+ 'gap-sm'];
17
+ const EmptyStateImage = [
18
+ // Sizing
19
+ 'mb-sm'];
20
+ const EmptyStateImageSizes = {
21
+ [EmptyStateSize.L]: [
22
+ // Box
23
+ 'h-3xl'],
24
+ [EmptyStateSize.M]: [
25
+ // Box
26
+ 'h-2xl']
27
+ };
28
+ const EmptyStateHeading = [
29
+ // Theme
30
+ 'theme-foreground-default', 'dark:theme-foreground-default-dark'];
31
+ const EmptyStateHeadingSizes = {
32
+ [EmptyStateSize.L]: [
33
+ // Typography
34
+ 'typography-headline-2'],
35
+ [EmptyStateSize.M]: [
36
+ // Typography
37
+ 'typography-headline-4']
38
+ };
39
+ const EmptyStateText = ['text-center',
40
+ // Theme
41
+ 'text-outline', 'dark:text-outline-dark'];
42
+ const EmptyStateContent = EmptyStateText;
43
+ const EmptyStateTextSizes = {
44
+ [EmptyStateSize.L]: [
45
+ // Typography
46
+ 'typography-body-2-regular'],
47
+ [EmptyStateSize.M]: [
48
+ // Typography
49
+ 'typography-caption-regular']
50
+ };
51
+ const EmptyStateContentSizes = EmptyStateTextSizes;
52
+
53
+ /**
54
+ * The component to display when there is no content on a page,
55
+ * no records found or selected, or while the data is being loaded.
56
+ * Provides a hint to the user on what to do.
57
+ * Consists of text message, optional icon and optional loader.
58
+ */
59
+ var script = defineComponent({
60
+ name: 'OrEmptyState',
61
+ props: {
62
+ /**
63
+ * Size of the component, affects font and icon size.
64
+ * Use Large if the component takes all screen space,
65
+ * and Medium if it is a part of the complex layout.
66
+ */
67
+ size: {
68
+ type: String,
69
+ default: EmptyStateSize.M
70
+ },
71
+ /**
72
+ * The heading of the empty state block.
73
+ */
74
+ heading: {
75
+ type: String,
76
+ default: ''
77
+ },
78
+ /**
79
+ * Additional text such as a hint for a user with proposed next steps.
80
+ */
81
+ text: {
82
+ type: String,
83
+ default: ''
84
+ },
85
+ /**
86
+ * Path to the image to display above the heading.
87
+ * Image height is fixed depending on `size` prop, width is undefined to preserve aspect ratio.
88
+ */
89
+ imageSrc: {
90
+ type: String,
91
+ default: undefined
92
+ }
93
+ },
94
+ setup(props) {
95
+ const root = ref();
96
+ const rootClasses = computed(() => ['or-empty-state', ...EmptyStateRoot]);
97
+ const imageClasses = computed(() => ['or-empty-state_image', ...EmptyStateImage, ...EmptyStateImageSizes[props.size]]);
98
+ const headingClasses = computed(() => ['or-empty-state_heading', ...EmptyStateHeading, ...EmptyStateHeadingSizes[props.size]]);
99
+ const textClasses = computed(() => ['or-empty-state_text', ...EmptyStateText, ...EmptyStateTextSizes[props.size]]);
100
+ const slotClasses = computed(() => ['or-empty-state_content', ...EmptyStateContent, ...EmptyStateContentSizes[props.size]]);
101
+ return {
102
+ root,
103
+ rootClasses,
104
+ imageClasses,
105
+ headingClasses,
106
+ textClasses,
107
+ slotClasses
108
+ };
109
+ }
110
+ });
111
+
112
+ const _hoisted_1 = ["src"];
113
+ function render(_ctx, _cache, $props, $setup, $data, $options) {
114
+ return openBlock(), createElementBlock("div", {
115
+ ref: "root",
116
+ class: normalizeClass(_ctx.rootClasses)
117
+ }, [_ctx.imageSrc ? (openBlock(), createElementBlock("img", {
118
+ key: 0,
119
+ src: _ctx.imageSrc,
120
+ class: normalizeClass(_ctx.imageClasses),
121
+ alt: ""
122
+ }, null, 10 /* CLASS, PROPS */, _hoisted_1)) : createCommentVNode("v-if", true), createElementVNode("div", {
123
+ class: normalizeClass(_ctx.headingClasses)
124
+ }, toDisplayString(_ctx.heading), 3 /* TEXT, CLASS */), _ctx.$slots.default ? (openBlock(), createElementBlock("div", {
125
+ key: 1,
126
+ class: normalizeClass(_ctx.slotClasses)
127
+ }, [createCommentVNode(" @slot Additional content can be inserted via default slot. The slot uses the same font as a `text` prop. "), renderSlot(_ctx.$slots, "default")], 2 /* CLASS */)) : createCommentVNode("v-if", true), createElementVNode("div", {
128
+ class: normalizeClass(_ctx.textClasses)
129
+ }, toDisplayString(_ctx.text), 3 /* TEXT, CLASS */)], 2 /* CLASS */);
130
+ }
131
+
132
+ script.render = render;
133
+ script.__file = "src/components/or-empty-state-v3/OrEmptyState.vue";
134
+
135
+ export { EmptyStateSize as E, script as s };
@@ -5,7 +5,7 @@ import { s as script$1 } from './OrError-ec8c709d.js';
5
5
  import { s as script$2 } from './OrHint-74bb732d.js';
6
6
  import { s as script$4 } from './OrIconButton-1eebcafc.js';
7
7
  import { s as script$3 } from './OrIcon-b195169c.js';
8
- import { s as script$5, a as InputBoxSize } from './OrInputBox-5247ab25.js';
8
+ import { s as script$5, a as InputBoxSize } from './OrInputBox-6d1b6059.js';
9
9
  import { s as script$6 } from './OrLabel-bdaec602.js';
10
10
  import { resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode, withDirectives, createElementVNode, mergeProps, vModelDynamic, withModifiers, Fragment, createSlots } from 'vue';
11
11
  import { s as styleInject } from './style-inject.es-4c6f2515.js';
@@ -1,7 +1,7 @@
1
1
  import { defineComponent, ref, computed } from 'vue-demi';
2
- import { openBlock, createElementBlock, mergeProps, renderSlot } from 'vue';
3
2
  import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
4
3
  import '@vueuse/core';
4
+ import { openBlock, createElementBlock, mergeProps, renderSlot } from 'vue';
5
5
 
6
6
  var InputBoxVariant;
7
7
  (function (InputBoxVariant) {
@@ -2,7 +2,7 @@ import { defineComponent, ref, computed, watch } from 'vue-demi';
2
2
  import { debouncedWatch } from '@vueuse/core';
3
3
  import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
4
4
  import { s as script$1 } from './OrInput-41691fb3.js';
5
- import { a as InputBoxSize } from './OrInputBox-5247ab25.js';
5
+ import { a as InputBoxSize } from './OrInputBox-6d1b6059.js';
6
6
  import { resolveComponent, openBlock, createBlock, mergeProps } from 'vue';
7
7
 
8
8
  var script = defineComponent({
@@ -23,7 +23,7 @@ var script = defineComponent({
23
23
  },
24
24
  placeholder: {
25
25
  type: String,
26
- default: undefined
26
+ default: 'Search'
27
27
  },
28
28
  debounce: {
29
29
  type: Number,
@@ -8,7 +8,7 @@ import { s as script$2 } from './OrError-ec8c709d.js';
8
8
  import { s as script$3 } from './OrExpansionPanel-311e64cf.js';
9
9
  import { s as script$4 } from './OrHint-74bb732d.js';
10
10
  import { s as script$5 } from './OrIcon-b195169c.js';
11
- import { s as script$7, a as InputBoxSize } from './OrInputBox-5247ab25.js';
11
+ import { s as script$7, a as InputBoxSize } from './OrInputBox-6d1b6059.js';
12
12
  import { s as script$6 } from './OrInput-41691fb3.js';
13
13
  import { s as script$8 } from './OrLabel-bdaec602.js';
14
14
  import { s as script$9 } from './OrMenuItem-9da279f6.js';
@@ -3,7 +3,7 @@ import { u as useClassAttribute } from './useClassAttribute-47fdb016.js';
3
3
  import '@vueuse/core';
4
4
  import { s as script$1 } from './OrError-ec8c709d.js';
5
5
  import { s as script$2 } from './OrHint-74bb732d.js';
6
- import { s as script$3, a as InputBoxSize } from './OrInputBox-5247ab25.js';
6
+ import { s as script$3, a as InputBoxSize } from './OrInputBox-6d1b6059.js';
7
7
  import { s as script$4 } from './OrLabel-bdaec602.js';
8
8
  import { resolveComponent, openBlock, createElementBlock, normalizeClass, createBlock, withCtx, renderSlot, createTextVNode, toDisplayString, createCommentVNode, createVNode, withDirectives, createElementVNode, mergeProps, vModelText, Fragment, createSlots } from 'vue';
9
9
  import { s as styleInject } from './style-inject.es-4c6f2515.js';
@@ -21,6 +21,7 @@ export * from './or-date-time-picker';
21
21
  export * from './or-error';
22
22
  export * from './or-error-tag-v3';
23
23
  export * from './or-error-v3';
24
+ export * from './or-empty-state-v3';
24
25
  export * from './or-expansion-panel-v3';
25
26
  export * from './or-fab-v3';
26
27
  export * from './or-floating';
@@ -6,7 +6,7 @@ export { b as BUTTON_COLOR, d as BUTTON_LOADER_TYPE, c as BUTTON_SIZE, B as BUTT
6
6
  export { a as ButtonColor, b as ButtonType, B as ButtonVariant, s as OrButtonV3 } from '../OrButton-bb6bf8a9.js';
7
7
  export { s as OrCard } from '../OrCard-e3a5aea4.js';
8
8
  export { C as CARD_COLLECTION_LAYOUT, s as OrCardCollection } from '../OrCardCollection-a5e326ef.js';
9
- export { D as DefaultCardCollectionViews, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from '../OrCardCollection-6b5e6b76.js';
9
+ export { D as DefaultCardCollectionViews, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from '../OrCardCollection-2a6514f3.js';
10
10
  export { s as OrCardV3 } from '../OrCard-fd92f7c8.js';
11
11
  export { a as OrCarousel, s as OrCarouselItem } from '../OrCarouselItem-636d99a1.js';
12
12
  export { s as OrCheckbox } from '../OrCheckbox-ed4a19cf.js';
@@ -21,6 +21,7 @@ export { D as DEFAULT_TEXT, s as OrDateTimePicker, a as OrDateTimePickerItemType
21
21
  export { s as OrError } from '../OrError-f90296db.js';
22
22
  export { s as OrErrorTagV3 } from '../OrErrorTag-98252eef.js';
23
23
  export { s as OrErrorV3 } from '../OrError-ec8c709d.js';
24
+ export { E as EmptyStateSize, s as OrEmptyStateV3 } from '../OrEmptyState-bb8e3145.js';
24
25
  export { a as ExpansionPanelColor, E as ExpansionPanelVariant, s as OrExpansionPanelV3 } from '../OrExpansionPanel-311e64cf.js';
25
26
  export { F as FabColor, s as OrFabV3 } from '../OrFab-c8ae6e01.js';
26
27
  export { s as OrFloating, a as OrFloatingHideStrategy, O as OrFloatingPlacements } from '../OrFloating-5240e758.js';
@@ -33,7 +34,7 @@ export { I as InlineInputBoxSize, I as InlineInputSize, s as OrInlineInputBoxV3
33
34
  export { I as InlineInputType, s as OrInlineInputV3 } from '../OrInlineInput-31026cd0.js';
34
35
  export { a as InlineTextEditTrimmingTypes, I as InlineTextEditTypes, s as OrInlineTextEdit } from '../OrInlineTextEdit-1aa477b5.js';
35
36
  export { s as OrInlineTextareaV3 } from '../OrInlineTextarea-b28c3d8c.js';
36
- export { a as InputBoxSize, I as InputBoxVariant, a as InputSize, s as OrInputBoxV3, a as SearchSize, a as SelectSize, a as TextareaSize } from '../OrInputBox-5247ab25.js';
37
+ export { a as InputBoxSize, I as InputBoxVariant, a as InputSize, s as OrInputBoxV3, a as SearchSize, a as SelectSize, a as TextareaSize } from '../OrInputBox-6d1b6059.js';
37
38
  export { I as InputType, s as OrInputV3 } from '../OrInput-41691fb3.js';
38
39
  export { a as OrInput, b as OrNumberInput, c as OrPassword, d as OrSearch, s as OrTextarea } from '../OrSearch-7cb2c91c.js';
39
40
  export { s as OrLabel } from '../OrLabel-876f8729.js';
@@ -58,7 +59,7 @@ export { s as OrProgressV3, P as ProgressColor, a as ProgressType } from '../OrP
58
59
  export { s as OrRadio } from '../OrRadio-c3ab11f2.js';
59
60
  export { s as OrRadioGroup } from '../OrRadioGroup-00785e41.js';
60
61
  export { s as OrRadioV3 } from '../OrRadio-54b6d0de.js';
61
- export { s as OrSearchV3 } from '../OrSearch-aafb93b4.js';
62
+ export { s as OrSearchV3 } from '../OrSearch-e5a2e93e.js';
62
63
  export { s as OrSegmentedControlV3, S as SegmentedControlSize } from '../OrSegmentedControl-171cad78.js';
63
64
  export { s as OrSelect } from '../OrSelect-0821b907.js';
64
65
  export { s as OrSelectV3 } from '../OrSelect-7e813982.js';
@@ -20,3 +20,8 @@ export declare const OverrideViewContainer: StoryFn<typeof OrCardCollection>;
20
20
  export declare const ExtraViewMode: StoryFn<typeof OrCardCollection>;
21
21
  export declare const WithLink: StoryFn<typeof OrCardCollection>;
22
22
  export declare const EmptySearchResults: StoryFn<typeof OrCardCollection>;
23
+ export declare const CustomizeSearch: 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, {
24
+ [x: string]: ((...args: any[]) => any) | null;
25
+ } | string[], {} & {}, {
26
+ [x: number]: string;
27
+ } | {}, true>)>;
@@ -47,6 +47,14 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
47
47
  type: StringConstructor;
48
48
  default: string;
49
49
  };
50
+ searchPlaceholder: {
51
+ type: StringConstructor;
52
+ default: undefined;
53
+ };
54
+ searchDebounce: {
55
+ type: NumberConstructor;
56
+ default: undefined;
57
+ };
50
58
  }, import("@vue/composition-api").ExtractPropTypes<{
51
59
  items: {
52
60
  type: PropType<CardCollectionItem[]>;
@@ -72,6 +80,14 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
72
80
  type: StringConstructor;
73
81
  default: string;
74
82
  };
83
+ searchPlaceholder: {
84
+ type: StringConstructor;
85
+ default: undefined;
86
+ };
87
+ searchDebounce: {
88
+ type: NumberConstructor;
89
+ default: undefined;
90
+ };
75
91
  }>> & Omit<import("vue").VueConstructor<import("vue").default>, never> & (new (...args: any[]) => import("@vue/composition-api").ComponentRenderProxy<{
76
92
  search: string;
77
93
  sort: string;
@@ -79,6 +95,8 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
79
95
  view: string;
80
96
  viewModes: ViewMode[];
81
97
  sortOptions: SortOption[];
98
+ searchPlaceholder: string;
99
+ searchDebounce: number;
82
100
  } & {} & {
83
101
  [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
84
102
  }, import("@vue/composition-api").ShallowUnwrapRef<{
@@ -110,6 +128,8 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
110
128
  view: string;
111
129
  viewModes: ViewMode[];
112
130
  sortOptions: SortOption[];
131
+ searchPlaceholder: string;
132
+ searchDebounce: number;
113
133
  } & {} & {
114
134
  [x: string & `on${string}`]: ((...args: any[]) => any) | undefined;
115
135
  }, {
@@ -119,5 +139,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
119
139
  view: string;
120
140
  viewModes: ViewMode[];
121
141
  sortOptions: SortOption[];
142
+ searchPlaceholder: string;
143
+ searchDebounce: number;
122
144
  }, true>);
123
145
  export default _default;
@@ -1,4 +1,4 @@
1
- export { D as DefaultCardCollectionViews, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from '../../OrCardCollection-6b5e6b76.js';
1
+ export { D as DefaultCardCollectionViews, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from '../../OrCardCollection-2a6514f3.js';
2
2
  import 'vue-demi';
3
3
  import '../../useClassAttribute-47fdb016.js';
4
4
  import '@vueuse/core';
@@ -17,10 +17,10 @@ import '../../OrMenu-840038cd.js';
17
17
  import '../../OrMenuItem-9da279f6.js';
18
18
  import '../../OrButton-bb6bf8a9.js';
19
19
  import '../../OrLoader-b3cf4231.js';
20
- import '../../OrSearch-aafb93b4.js';
20
+ import '../../OrSearch-e5a2e93e.js';
21
21
  import '../../OrInput-41691fb3.js';
22
22
  import '../../OrError-ec8c709d.js';
23
23
  import '../../OrHint-74bb732d.js';
24
- import '../../OrInputBox-5247ab25.js';
24
+ import '../../OrInputBox-6d1b6059.js';
25
25
  import '../../OrLabel-bdaec602.js';
26
26
  import '../../style-inject.es-4c6f2515.js';
@@ -18,7 +18,7 @@ import '../../OrPopover-1075dd38.js';
18
18
  import '@floating-ui/dom';
19
19
  import '../../useResponsive-a02e95b7.js';
20
20
  import '../../OrBottomSheet-62817aec.js';
21
- import '../../OrInputBox-5247ab25.js';
21
+ import '../../OrInputBox-6d1b6059.js';
22
22
  import '../../OrLabel-bdaec602.js';
23
23
  import '../../style-inject.es-4c6f2515.js';
24
24
  import '@vueuse/math';
@@ -1,5 +1,5 @@
1
1
  import { PropType } from 'vue-demi';
2
- import { EmptyStateSize } from '.';
2
+ import { EmptyStateSize } from './props';
3
3
  declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
4
4
  root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
5
5
  rootClasses: import("@vue/composition-api").ComputedRef<string[]>;
@@ -1,135 +1,3 @@
1
- import { defineComponent, ref, computed } from 'vue-demi';
2
- import { openBlock, createElementBlock, normalizeClass, createCommentVNode, createElementVNode, toDisplayString, renderSlot } from 'vue';
3
-
4
- var EmptyStateSize;
5
- (function (EmptyStateSize) {
6
- EmptyStateSize["L"] = "l";
7
- EmptyStateSize["M"] = "m";
8
- })(EmptyStateSize || (EmptyStateSize = {}));
9
-
10
- const EmptyStateRoot = [
11
- // Layout
12
- 'grow', 'flex', 'flex-col', 'justify-center', 'items-center',
13
- // Box
14
- 'w-full',
15
- // Sizing
16
- 'gap-sm'];
17
- const EmptyStateImage = [
18
- // Sizing
19
- 'mb-sm'];
20
- const EmptyStateImageSizes = {
21
- [EmptyStateSize.L]: [
22
- // Box
23
- 'h-3xl'],
24
- [EmptyStateSize.M]: [
25
- // Box
26
- 'h-2xl']
27
- };
28
- const EmptyStateHeading = [
29
- // Theme
30
- 'theme-foreground-default', 'dark:theme-foreground-default-dark'];
31
- const EmptyStateHeadingSizes = {
32
- [EmptyStateSize.L]: [
33
- // Typography
34
- 'typography-headline-2'],
35
- [EmptyStateSize.M]: [
36
- // Typography
37
- 'typography-headline-4']
38
- };
39
- const EmptyStateText = ['text-center',
40
- // Theme
41
- 'text-outline', 'dark:text-outline-dark'];
42
- const EmptyStateContent = EmptyStateText;
43
- const EmptyStateTextSizes = {
44
- [EmptyStateSize.L]: [
45
- // Typography
46
- 'typography-body-2-regular'],
47
- [EmptyStateSize.M]: [
48
- // Typography
49
- 'typography-caption-regular']
50
- };
51
- const EmptyStateContentSizes = EmptyStateTextSizes;
52
-
53
- /**
54
- * The component to display when there is no content on a page,
55
- * no records found or selected, or while the data is being loaded.
56
- * Provides a hint to the user on what to do.
57
- * Consists of text message, optional icon and optional loader.
58
- */
59
- var script = defineComponent({
60
- name: 'OrEmptyState',
61
- props: {
62
- /**
63
- * Size of the component, affects font and icon size.
64
- * Use Large if the component takes all screen space,
65
- * and Medium if it is a part of the complex layout.
66
- */
67
- size: {
68
- type: String,
69
- default: EmptyStateSize.M
70
- },
71
- /**
72
- * The heading of the empty state block.
73
- */
74
- heading: {
75
- type: String,
76
- default: ''
77
- },
78
- /**
79
- * Additional text such as a hint for a user with proposed next steps.
80
- */
81
- text: {
82
- type: String,
83
- default: ''
84
- },
85
- /**
86
- * Path to the image to display above the heading.
87
- * Image height is fixed depending on `size` prop, width is undefined to preserve aspect ratio.
88
- */
89
- imageSrc: {
90
- type: String,
91
- default: undefined
92
- }
93
- },
94
- setup(props) {
95
- const root = ref();
96
- const rootClasses = computed(() => ['or-empty-state', ...EmptyStateRoot]);
97
- const imageClasses = computed(() => ['or-empty-state_image', ...EmptyStateImage, ...EmptyStateImageSizes[props.size]]);
98
- const headingClasses = computed(() => ['or-empty-state_heading', ...EmptyStateHeading, ...EmptyStateHeadingSizes[props.size]]);
99
- const textClasses = computed(() => ['or-empty-state_text', ...EmptyStateText, ...EmptyStateTextSizes[props.size]]);
100
- const slotClasses = computed(() => ['or-empty-state_content', ...EmptyStateContent, ...EmptyStateContentSizes[props.size]]);
101
- return {
102
- root,
103
- rootClasses,
104
- imageClasses,
105
- headingClasses,
106
- textClasses,
107
- slotClasses
108
- };
109
- }
110
- });
111
-
112
- const _hoisted_1 = ["src"];
113
- function render(_ctx, _cache, $props, $setup, $data, $options) {
114
- return openBlock(), createElementBlock("div", {
115
- ref: "root",
116
- class: normalizeClass(_ctx.rootClasses)
117
- }, [_ctx.imageSrc ? (openBlock(), createElementBlock("img", {
118
- key: 0,
119
- src: _ctx.imageSrc,
120
- class: normalizeClass(_ctx.imageClasses),
121
- alt: ""
122
- }, null, 10 /* CLASS, PROPS */, _hoisted_1)) : createCommentVNode("v-if", true), createElementVNode("div", {
123
- class: normalizeClass(_ctx.headingClasses)
124
- }, toDisplayString(_ctx.heading), 3 /* TEXT, CLASS */), _ctx.$slots.default ? (openBlock(), createElementBlock("div", {
125
- key: 1,
126
- class: normalizeClass(_ctx.slotClasses)
127
- }, [createCommentVNode(" @slot Additional content can be inserted via default slot. The slot uses the same font as a `text` prop. "), renderSlot(_ctx.$slots, "default")], 2 /* CLASS */)) : createCommentVNode("v-if", true), createElementVNode("div", {
128
- class: normalizeClass(_ctx.textClasses)
129
- }, toDisplayString(_ctx.text), 3 /* TEXT, CLASS */)], 2 /* CLASS */);
130
- }
131
-
132
- script.render = render;
133
- script.__file = "src/components/or-empty-state-v3/OrEmptyState.vue";
134
-
135
- export { EmptyStateSize, script as OrEmptyStateV3 };
1
+ export { E as EmptyStateSize, s as OrEmptyStateV3 } from '../../OrEmptyState-bb8e3145.js';
2
+ import 'vue-demi';
3
+ import 'vue';
@@ -1,6 +1,5 @@
1
1
  import { PropType } from 'vue-demi';
2
- import { InputBoxVariant } from '.';
3
- import { InputBoxSize } from './props';
2
+ import { InputBoxSize, InputBoxVariant } from './props';
4
3
  declare const _default: import("vue").ComponentOptions<import("vue").default, import("@vue/composition-api").ShallowUnwrapRef<{
5
4
  root: import("@vue/composition-api").Ref<HTMLElement | undefined>;
6
5
  rootStyles: import("@vue/composition-api").ComputedRef<(string | undefined)[]>;
@@ -1,5 +1,5 @@
1
- export { a as InputBoxSize, I as InputBoxVariant, s as OrInputBoxV3 } from '../../OrInputBox-5247ab25.js';
1
+ export { a as InputBoxSize, I as InputBoxVariant, s as OrInputBoxV3 } from '../../OrInputBox-6d1b6059.js';
2
2
  import 'vue-demi';
3
- import 'vue';
4
3
  import '../../useClassAttribute-47fdb016.js';
5
4
  import '@vueuse/core';
5
+ import 'vue';
@@ -1,5 +1,5 @@
1
1
  export { I as InputType, s as OrInputV3 } from '../../OrInput-41691fb3.js';
2
- export { a as InputSize } from '../../OrInputBox-5247ab25.js';
2
+ export { a as InputSize } from '../../OrInputBox-6d1b6059.js';
3
3
  import 'vue-demi';
4
4
  import '../../useClassAttribute-47fdb016.js';
5
5
  import '@vueuse/core';
@@ -22,7 +22,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
22
22
  };
23
23
  placeholder: {
24
24
  type: StringConstructor;
25
- default: undefined;
25
+ default: string;
26
26
  };
27
27
  debounce: {
28
28
  type: NumberConstructor;
@@ -48,7 +48,7 @@ declare const _default: import("vue").ComponentOptions<import("vue").default, im
48
48
  };
49
49
  placeholder: {
50
50
  type: StringConstructor;
51
- default: undefined;
51
+ default: string;
52
52
  };
53
53
  debounce: {
54
54
  type: NumberConstructor;
@@ -1,5 +1,5 @@
1
- export { s as OrSearchV3 } from '../../OrSearch-aafb93b4.js';
2
- export { a as SearchSize } from '../../OrInputBox-5247ab25.js';
1
+ export { s as OrSearchV3 } from '../../OrSearch-e5a2e93e.js';
2
+ export { a as SearchSize } from '../../OrInputBox-6d1b6059.js';
3
3
  import 'vue-demi';
4
4
  import '@vueuse/core';
5
5
  import '../../useClassAttribute-47fdb016.js';
@@ -1,5 +1,5 @@
1
1
  export { s as OrSelectV3 } from '../../OrSelect-7e813982.js';
2
- export { a as SelectSize } from '../../OrInputBox-5247ab25.js';
2
+ export { a as SelectSize } from '../../OrInputBox-6d1b6059.js';
3
3
  import 'vue-demi';
4
4
  import '../../dropdown-open-0d314aa4.js';
5
5
  import '../../useClassAttribute-47fdb016.js';
@@ -1,5 +1,5 @@
1
1
  export { s as OrTextareaV3 } from '../../OrTextarea-bb9ef3f2.js';
2
- export { a as TextareaSize } from '../../OrInputBox-5247ab25.js';
2
+ export { a as TextareaSize } from '../../OrInputBox-6d1b6059.js';
3
3
  import 'vue-demi';
4
4
  import '../../useClassAttribute-47fdb016.js';
5
5
  import '@vueuse/core';
@@ -6,7 +6,7 @@ export { b as BUTTON_COLOR, d as BUTTON_LOADER_TYPE, c as BUTTON_SIZE, B as BUTT
6
6
  export { a as ButtonColor, b as ButtonType, B as ButtonVariant, s as OrButtonV3 } from './OrButton-bb6bf8a9.js';
7
7
  export { s as OrCard } from './OrCard-e3a5aea4.js';
8
8
  export { C as CARD_COLLECTION_LAYOUT, s as OrCardCollection } from './OrCardCollection-a5e326ef.js';
9
- export { D as DefaultCardCollectionViews, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from './OrCardCollection-6b5e6b76.js';
9
+ export { D as DefaultCardCollectionViews, s as OrCardCollectionV3, d as defaultViewModes, g as gridView, l as listView } from './OrCardCollection-2a6514f3.js';
10
10
  export { s as OrCardV3 } from './OrCard-fd92f7c8.js';
11
11
  export { a as OrCarousel, s as OrCarouselItem } from './OrCarouselItem-636d99a1.js';
12
12
  export { s as OrCheckbox } from './OrCheckbox-ed4a19cf.js';
@@ -21,6 +21,7 @@ export { D as DEFAULT_TEXT, s as OrDateTimePicker, a as OrDateTimePickerItemType
21
21
  export { s as OrError } from './OrError-f90296db.js';
22
22
  export { s as OrErrorTagV3 } from './OrErrorTag-98252eef.js';
23
23
  export { s as OrErrorV3 } from './OrError-ec8c709d.js';
24
+ export { E as EmptyStateSize, s as OrEmptyStateV3 } from './OrEmptyState-bb8e3145.js';
24
25
  export { a as ExpansionPanelColor, E as ExpansionPanelVariant, s as OrExpansionPanelV3 } from './OrExpansionPanel-311e64cf.js';
25
26
  export { F as FabColor, s as OrFabV3 } from './OrFab-c8ae6e01.js';
26
27
  export { s as OrFloating, a as OrFloatingHideStrategy, O as OrFloatingPlacements } from './OrFloating-5240e758.js';
@@ -33,7 +34,7 @@ export { I as InlineInputBoxSize, I as InlineInputSize, s as OrInlineInputBoxV3
33
34
  export { I as InlineInputType, s as OrInlineInputV3 } from './OrInlineInput-31026cd0.js';
34
35
  export { a as InlineTextEditTrimmingTypes, I as InlineTextEditTypes, s as OrInlineTextEdit } from './OrInlineTextEdit-1aa477b5.js';
35
36
  export { s as OrInlineTextareaV3 } from './OrInlineTextarea-b28c3d8c.js';
36
- export { a as InputBoxSize, I as InputBoxVariant, a as InputSize, s as OrInputBoxV3, a as SearchSize, a as SelectSize, a as TextareaSize } from './OrInputBox-5247ab25.js';
37
+ export { a as InputBoxSize, I as InputBoxVariant, a as InputSize, s as OrInputBoxV3, a as SearchSize, a as SelectSize, a as TextareaSize } from './OrInputBox-6d1b6059.js';
37
38
  export { I as InputType, s as OrInputV3 } from './OrInput-41691fb3.js';
38
39
  export { a as OrInput, b as OrNumberInput, c as OrPassword, d as OrSearch, s as OrTextarea } from './OrSearch-7cb2c91c.js';
39
40
  export { s as OrLabel } from './OrLabel-876f8729.js';
@@ -58,7 +59,7 @@ export { s as OrProgressV3, P as ProgressColor, a as ProgressType } from './OrPr
58
59
  export { s as OrRadio } from './OrRadio-c3ab11f2.js';
59
60
  export { s as OrRadioGroup } from './OrRadioGroup-00785e41.js';
60
61
  export { s as OrRadioV3 } from './OrRadio-54b6d0de.js';
61
- export { s as OrSearchV3 } from './OrSearch-aafb93b4.js';
62
+ export { s as OrSearchV3 } from './OrSearch-e5a2e93e.js';
62
63
  export { s as OrSegmentedControlV3, S as SegmentedControlSize } from './OrSegmentedControl-171cad78.js';
63
64
  export { s as OrSelect } from './OrSelect-0821b907.js';
64
65
  export { s as OrSelectV3 } from './OrSelect-7e813982.js';
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@onereach/ui-components",
3
- "version": "2.69.5-beta.2146.0",
3
+ "version": "2.69.6-beta.2148.0",
4
4
  "description": "Vue components library for v2/3",
5
5
  "sideEffects": false,
6
6
  "main": "./dist/auto/index.js",
@@ -21,6 +21,7 @@ export * from './or-date-time-picker';
21
21
  export * from './or-error';
22
22
  export * from './or-error-tag-v3';
23
23
  export * from './or-error-v3';
24
+ export * from './or-empty-state-v3';
24
25
  export * from './or-expansion-panel-v3';
25
26
  export * from './or-fab-v3';
26
27
  export * from './or-floating';
@@ -1,5 +1,5 @@
1
1
  import { Story } from '@storybook/vue';
2
- import { OrCard } from '.';
2
+ import OrCard from './OrCard.vue';
3
3
 
4
4
  export default {
5
5
  title: 'Components/OrCard',
@@ -1,4 +1,4 @@
1
- import { OrCardCollection } from '.';
1
+ import OrCardCollection from './OrCardCollection.vue';
2
2
  import { OrIconButton } from '../or-button-v2';
3
3
  import { Story } from '@storybook/vue';
4
4
  import { action } from '@storybook/addon-actions';
@@ -53,6 +53,14 @@ export default {
53
53
  control: { type: 'text' },
54
54
  },
55
55
 
56
+ searchPlaceholder: {
57
+ control: { type: 'text' },
58
+ },
59
+
60
+ searchDebounce: {
61
+ control: { type: 'number' },
62
+ },
63
+
56
64
  // Events
57
65
  viewChange: {
58
66
  table: { disable: true },
@@ -360,3 +368,11 @@ EmptySearchResults.args = {
360
368
  search: 'My favorite ..',
361
369
  items: [],
362
370
  };
371
+
372
+ export const CustomizeSearch = Template.bind({});
373
+
374
+ CustomizeSearch.args = {
375
+ ...Default.args,
376
+ searchPlaceholder: 'What you want to find today?',
377
+ searchDebounce: 0,
378
+ };