@onereach/ui-components 2.69.5 → 2.69.6
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.
- package/dist/bundled/v2/{OrCode-edc7a1f5.js → OrCode-fc6876ec.js} +56 -17
- package/dist/bundled/v2/OrEmptyState-9fb413f9.js +160 -0
- package/dist/bundled/v2/components/index.d.ts +1 -0
- package/dist/bundled/v2/components/index.js +2 -1
- package/dist/bundled/v2/components/or-code/index.js +1 -1
- package/dist/bundled/v2/components/or-empty-state-v3/OrEmptyState.vue.d.ts +1 -1
- package/dist/bundled/v2/components/or-empty-state-v3/index.js +3 -159
- package/dist/bundled/v2/components/or-input-box-v3/OrInputBox.vue.d.ts +1 -2
- package/dist/bundled/v2/index.js +2 -1
- package/dist/bundled/v3/{OrCode.vue_vue_type_script_lang-ef5e7f04.js → OrCode.vue_vue_type_script_lang-c55de81d.js} +53 -14
- package/dist/bundled/v3/OrEmptyState.vue_vue_type_script_lang-da7d6c42.js +111 -0
- package/dist/bundled/v3/components/index.d.ts +1 -0
- package/dist/bundled/v3/components/index.js +2 -1
- package/dist/bundled/v3/components/or-code/index.js +1 -1
- package/dist/bundled/v3/components/or-empty-state-v3/OrEmptyState.vue.d.ts +1 -1
- package/dist/bundled/v3/components/or-empty-state-v3/index.js +2 -134
- package/dist/bundled/v3/components/or-input-box-v3/OrInputBox.vue.d.ts +1 -2
- package/dist/bundled/v3/index.js +214 -189
- package/dist/esm/v2/{OrCode-41dd5f9b.js → OrCode-d4400b42.js} +6 -4
- package/dist/esm/v2/OrEmptyState-2481f13f.js +158 -0
- package/dist/esm/v2/components/index.d.ts +1 -0
- package/dist/esm/v2/components/index.js +4 -1
- package/dist/esm/v2/components/or-code/index.js +3 -1
- package/dist/esm/v2/components/or-empty-state-v3/OrEmptyState.vue.d.ts +1 -1
- package/dist/esm/v2/components/or-empty-state-v3/index.js +3 -158
- package/dist/esm/v2/components/or-input-box-v3/OrInputBox.vue.d.ts +1 -2
- package/dist/esm/v2/index.js +4 -1
- package/dist/esm/v3/OrCardCollection-2a6514f3.js +1 -1
- package/dist/esm/v3/{OrCode-ee19a5e6.js → OrCode-5ed69c23.js} +3 -1
- package/dist/esm/v3/OrEmptyState-bb8e3145.js +135 -0
- package/dist/esm/v3/OrInput-41691fb3.js +1 -1
- package/dist/esm/v3/{OrInputBox-5247ab25.js → OrInputBox-6d1b6059.js} +1 -1
- package/dist/esm/v3/OrSearch-e5a2e93e.js +1 -1
- package/dist/esm/v3/OrSelect-7e813982.js +1 -1
- package/dist/esm/v3/OrTextarea-bb9ef3f2.js +1 -1
- package/dist/esm/v3/components/index.d.ts +1 -0
- package/dist/esm/v3/components/index.js +5 -2
- package/dist/esm/v3/components/or-card-collection-v3/index.js +1 -1
- package/dist/esm/v3/components/or-code/index.js +3 -1
- package/dist/esm/v3/components/or-confirm-v3/index.js +1 -1
- package/dist/esm/v3/components/or-empty-state-v3/OrEmptyState.vue.d.ts +1 -1
- package/dist/esm/v3/components/or-empty-state-v3/index.js +3 -135
- package/dist/esm/v3/components/or-input-box-v3/OrInputBox.vue.d.ts +1 -2
- package/dist/esm/v3/components/or-input-box-v3/index.js +2 -2
- package/dist/esm/v3/components/or-input-v3/index.js +1 -1
- package/dist/esm/v3/components/or-search-v3/index.js +1 -1
- package/dist/esm/v3/components/or-select-v3/index.js +1 -1
- package/dist/esm/v3/components/or-textarea-v3/index.js +1 -1
- package/dist/esm/v3/index.js +5 -2
- package/package.json +3 -2
- package/src/components/index.ts +1 -0
- package/src/components/or-card/OrCard.stories.ts +1 -1
- package/src/components/or-card-collection/OrCardCollection.stories.ts +1 -1
- package/src/components/or-code/OrCode.vue +3 -1
- package/src/components/or-empty-state-v3/OrEmptyState.vue +16 -10
- package/src/components/or-input-box-v3/OrInputBox.vue +1 -2
- package/src/components/or-teleport-v3/OrTeleport.stories3.ts +1 -1
|
@@ -0,0 +1,111 @@
|
|
|
1
|
+
import { defineComponent, ref, computed } from 'vue';
|
|
2
|
+
|
|
3
|
+
var EmptyStateSize;
|
|
4
|
+
(function (EmptyStateSize) {
|
|
5
|
+
EmptyStateSize["L"] = "l";
|
|
6
|
+
EmptyStateSize["M"] = "m";
|
|
7
|
+
})(EmptyStateSize || (EmptyStateSize = {}));
|
|
8
|
+
|
|
9
|
+
const EmptyStateRoot = [
|
|
10
|
+
// Layout
|
|
11
|
+
'grow', 'flex', 'flex-col', 'justify-center', 'items-center',
|
|
12
|
+
// Box
|
|
13
|
+
'w-full',
|
|
14
|
+
// Sizing
|
|
15
|
+
'gap-sm'];
|
|
16
|
+
const EmptyStateImage = [
|
|
17
|
+
// Sizing
|
|
18
|
+
'mb-sm'];
|
|
19
|
+
const EmptyStateImageSizes = {
|
|
20
|
+
[EmptyStateSize.L]: [
|
|
21
|
+
// Box
|
|
22
|
+
'h-3xl'],
|
|
23
|
+
[EmptyStateSize.M]: [
|
|
24
|
+
// Box
|
|
25
|
+
'h-2xl']
|
|
26
|
+
};
|
|
27
|
+
const EmptyStateHeading = [
|
|
28
|
+
// Theme
|
|
29
|
+
'theme-foreground-default', 'dark:theme-foreground-default-dark'];
|
|
30
|
+
const EmptyStateHeadingSizes = {
|
|
31
|
+
[EmptyStateSize.L]: [
|
|
32
|
+
// Typography
|
|
33
|
+
'typography-headline-2'],
|
|
34
|
+
[EmptyStateSize.M]: [
|
|
35
|
+
// Typography
|
|
36
|
+
'typography-headline-4']
|
|
37
|
+
};
|
|
38
|
+
const EmptyStateText = ['text-center',
|
|
39
|
+
// Theme
|
|
40
|
+
'text-outline', 'dark:text-outline-dark'];
|
|
41
|
+
const EmptyStateContent = EmptyStateText;
|
|
42
|
+
const EmptyStateTextSizes = {
|
|
43
|
+
[EmptyStateSize.L]: [
|
|
44
|
+
// Typography
|
|
45
|
+
'typography-body-2-regular'],
|
|
46
|
+
[EmptyStateSize.M]: [
|
|
47
|
+
// Typography
|
|
48
|
+
'typography-caption-regular']
|
|
49
|
+
};
|
|
50
|
+
const EmptyStateContentSizes = EmptyStateTextSizes;
|
|
51
|
+
|
|
52
|
+
/**
|
|
53
|
+
* The component to display when there is no content on a page,
|
|
54
|
+
* no records found or selected, or while the data is being loaded.
|
|
55
|
+
* Provides a hint to the user on what to do.
|
|
56
|
+
* Consists of text message, optional icon and optional loader.
|
|
57
|
+
*/
|
|
58
|
+
var script = defineComponent({
|
|
59
|
+
name: 'OrEmptyState',
|
|
60
|
+
props: {
|
|
61
|
+
/**
|
|
62
|
+
* Size of the component, affects font and icon size.
|
|
63
|
+
* Use Large if the component takes all screen space,
|
|
64
|
+
* and Medium if it is a part of the complex layout.
|
|
65
|
+
*/
|
|
66
|
+
size: {
|
|
67
|
+
type: String,
|
|
68
|
+
default: EmptyStateSize.M
|
|
69
|
+
},
|
|
70
|
+
/**
|
|
71
|
+
* The heading of the empty state block.
|
|
72
|
+
*/
|
|
73
|
+
heading: {
|
|
74
|
+
type: String,
|
|
75
|
+
default: ''
|
|
76
|
+
},
|
|
77
|
+
/**
|
|
78
|
+
* Additional text such as a hint for a user with proposed next steps.
|
|
79
|
+
*/
|
|
80
|
+
text: {
|
|
81
|
+
type: String,
|
|
82
|
+
default: ''
|
|
83
|
+
},
|
|
84
|
+
/**
|
|
85
|
+
* Path to the image to display above the heading.
|
|
86
|
+
* Image height is fixed depending on `size` prop, width is undefined to preserve aspect ratio.
|
|
87
|
+
*/
|
|
88
|
+
imageSrc: {
|
|
89
|
+
type: String,
|
|
90
|
+
default: undefined
|
|
91
|
+
}
|
|
92
|
+
},
|
|
93
|
+
setup(props) {
|
|
94
|
+
const root = ref();
|
|
95
|
+
const rootClasses = computed(() => ['or-empty-state', ...EmptyStateRoot]);
|
|
96
|
+
const imageClasses = computed(() => ['or-empty-state_image', ...EmptyStateImage, ...EmptyStateImageSizes[props.size]]);
|
|
97
|
+
const headingClasses = computed(() => ['or-empty-state_heading', ...EmptyStateHeading, ...EmptyStateHeadingSizes[props.size]]);
|
|
98
|
+
const textClasses = computed(() => ['or-empty-state_text', ...EmptyStateText, ...EmptyStateTextSizes[props.size]]);
|
|
99
|
+
const slotClasses = computed(() => ['or-empty-state_content', ...EmptyStateContent, ...EmptyStateContentSizes[props.size]]);
|
|
100
|
+
return {
|
|
101
|
+
root,
|
|
102
|
+
rootClasses,
|
|
103
|
+
imageClasses,
|
|
104
|
+
headingClasses,
|
|
105
|
+
textClasses,
|
|
106
|
+
slotClasses
|
|
107
|
+
};
|
|
108
|
+
}
|
|
109
|
+
});
|
|
110
|
+
|
|
111
|
+
export { EmptyStateSize as E, script as s };
|
|
@@ -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';
|
|
@@ -15,7 +15,7 @@ export { s as OrCheckbox } from '../OrCheckbox.vue_vue_type_script_lang-d8a66818
|
|
|
15
15
|
export { s as OrCheckboxV3 } from '../OrCheckbox.vue_vue_type_script_lang-8b36e06c.js';
|
|
16
16
|
export { s as OrChip } from '../OrChip-5d502431.js';
|
|
17
17
|
export { s as OrChips } from '../OrChips.vue_vue_type_script_lang-69917e34.js';
|
|
18
|
-
export { s as OrCode, O as OrCodeLanguages } from '../OrCode.vue_vue_type_script_lang-
|
|
18
|
+
export { s as OrCode, O as OrCodeLanguages } from '../OrCode.vue_vue_type_script_lang-c55de81d.js';
|
|
19
19
|
export { s as OrCollapse } from '../OrCollapse.vue_vue_type_script_lang-65cbb754.js';
|
|
20
20
|
export { s as OrColorPicker, h as amber, n as black, b as blue, m as blueGrey, k as brown, c as cyan, j as deepOrange, d as deepPurple, g as green, i as indigo, l as lightBlue, e as lightGreen, f as lime, o as orange, p as pink, a as purple, r as red, t as teal, w as white, y as yellow } from '../OrColorPicker.vue_vue_type_script_lang-4141378d.js';
|
|
21
21
|
export { s as OrConfirm } from '../OrConfirm.vue_vue_type_script_lang-0f16fc67.js';
|
|
@@ -24,6 +24,7 @@ export { D as DEFAULT_TEXT, s as OrDateTimePicker, a as OrDateTimePickerItemType
|
|
|
24
24
|
export { s as OrError } from '../OrError.vue_vue_type_script_lang-7c39e012.js';
|
|
25
25
|
export { s as OrErrorTagV3 } from '../OrErrorTag.vue_vue_type_script_lang-4828c387.js';
|
|
26
26
|
export { s as OrErrorV3 } from '../OrError.vue_vue_type_script_lang-cc6c135f.js';
|
|
27
|
+
export { E as EmptyStateSize, s as OrEmptyStateV3 } from '../OrEmptyState.vue_vue_type_script_lang-da7d6c42.js';
|
|
27
28
|
export { a as ExpansionPanelColor, E as ExpansionPanelVariant, s as OrExpansionPanelV3 } from '../OrExpansionPanel.vue_vue_type_script_lang-7f9c6721.js';
|
|
28
29
|
export { F as FabColor, s as OrFabV3 } from '../OrFab.vue_vue_type_script_lang-2adeaed6.js';
|
|
29
30
|
export { s as OrFloating, a as OrFloatingHideStrategy, O as OrFloatingPlacements } from '../OrFloating.vue_vue_type_script_lang-8bf2b7ae.js';
|
|
@@ -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,134 +1,2 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
var EmptyStateSize;
|
|
4
|
-
(function (EmptyStateSize) {
|
|
5
|
-
EmptyStateSize["L"] = "l";
|
|
6
|
-
EmptyStateSize["M"] = "m";
|
|
7
|
-
})(EmptyStateSize || (EmptyStateSize = {}));
|
|
8
|
-
|
|
9
|
-
const EmptyStateRoot = [
|
|
10
|
-
// Layout
|
|
11
|
-
'grow', 'flex', 'flex-col', 'justify-center', 'items-center',
|
|
12
|
-
// Box
|
|
13
|
-
'w-full',
|
|
14
|
-
// Sizing
|
|
15
|
-
'gap-sm'];
|
|
16
|
-
const EmptyStateImage = [
|
|
17
|
-
// Sizing
|
|
18
|
-
'mb-sm'];
|
|
19
|
-
const EmptyStateImageSizes = {
|
|
20
|
-
[EmptyStateSize.L]: [
|
|
21
|
-
// Box
|
|
22
|
-
'h-3xl'],
|
|
23
|
-
[EmptyStateSize.M]: [
|
|
24
|
-
// Box
|
|
25
|
-
'h-2xl']
|
|
26
|
-
};
|
|
27
|
-
const EmptyStateHeading = [
|
|
28
|
-
// Theme
|
|
29
|
-
'theme-foreground-default', 'dark:theme-foreground-default-dark'];
|
|
30
|
-
const EmptyStateHeadingSizes = {
|
|
31
|
-
[EmptyStateSize.L]: [
|
|
32
|
-
// Typography
|
|
33
|
-
'typography-headline-2'],
|
|
34
|
-
[EmptyStateSize.M]: [
|
|
35
|
-
// Typography
|
|
36
|
-
'typography-headline-4']
|
|
37
|
-
};
|
|
38
|
-
const EmptyStateText = ['text-center',
|
|
39
|
-
// Theme
|
|
40
|
-
'text-outline', 'dark:text-outline-dark'];
|
|
41
|
-
const EmptyStateContent = EmptyStateText;
|
|
42
|
-
const EmptyStateTextSizes = {
|
|
43
|
-
[EmptyStateSize.L]: [
|
|
44
|
-
// Typography
|
|
45
|
-
'typography-body-2-regular'],
|
|
46
|
-
[EmptyStateSize.M]: [
|
|
47
|
-
// Typography
|
|
48
|
-
'typography-caption-regular']
|
|
49
|
-
};
|
|
50
|
-
const EmptyStateContentSizes = EmptyStateTextSizes;
|
|
51
|
-
|
|
52
|
-
/**
|
|
53
|
-
* The component to display when there is no content on a page,
|
|
54
|
-
* no records found or selected, or while the data is being loaded.
|
|
55
|
-
* Provides a hint to the user on what to do.
|
|
56
|
-
* Consists of text message, optional icon and optional loader.
|
|
57
|
-
*/
|
|
58
|
-
var script = defineComponent({
|
|
59
|
-
name: 'OrEmptyState',
|
|
60
|
-
props: {
|
|
61
|
-
/**
|
|
62
|
-
* Size of the component, affects font and icon size.
|
|
63
|
-
* Use Large if the component takes all screen space,
|
|
64
|
-
* and Medium if it is a part of the complex layout.
|
|
65
|
-
*/
|
|
66
|
-
size: {
|
|
67
|
-
type: String,
|
|
68
|
-
default: EmptyStateSize.M
|
|
69
|
-
},
|
|
70
|
-
/**
|
|
71
|
-
* The heading of the empty state block.
|
|
72
|
-
*/
|
|
73
|
-
heading: {
|
|
74
|
-
type: String,
|
|
75
|
-
default: ''
|
|
76
|
-
},
|
|
77
|
-
/**
|
|
78
|
-
* Additional text such as a hint for a user with proposed next steps.
|
|
79
|
-
*/
|
|
80
|
-
text: {
|
|
81
|
-
type: String,
|
|
82
|
-
default: ''
|
|
83
|
-
},
|
|
84
|
-
/**
|
|
85
|
-
* Path to the image to display above the heading.
|
|
86
|
-
* Image height is fixed depending on `size` prop, width is undefined to preserve aspect ratio.
|
|
87
|
-
*/
|
|
88
|
-
imageSrc: {
|
|
89
|
-
type: String,
|
|
90
|
-
default: undefined
|
|
91
|
-
}
|
|
92
|
-
},
|
|
93
|
-
setup(props) {
|
|
94
|
-
const root = ref();
|
|
95
|
-
const rootClasses = computed(() => ['or-empty-state', ...EmptyStateRoot]);
|
|
96
|
-
const imageClasses = computed(() => ['or-empty-state_image', ...EmptyStateImage, ...EmptyStateImageSizes[props.size]]);
|
|
97
|
-
const headingClasses = computed(() => ['or-empty-state_heading', ...EmptyStateHeading, ...EmptyStateHeadingSizes[props.size]]);
|
|
98
|
-
const textClasses = computed(() => ['or-empty-state_text', ...EmptyStateText, ...EmptyStateTextSizes[props.size]]);
|
|
99
|
-
const slotClasses = computed(() => ['or-empty-state_content', ...EmptyStateContent, ...EmptyStateContentSizes[props.size]]);
|
|
100
|
-
return {
|
|
101
|
-
root,
|
|
102
|
-
rootClasses,
|
|
103
|
-
imageClasses,
|
|
104
|
-
headingClasses,
|
|
105
|
-
textClasses,
|
|
106
|
-
slotClasses
|
|
107
|
-
};
|
|
108
|
-
}
|
|
109
|
-
});
|
|
110
|
-
|
|
111
|
-
const _hoisted_1 = ["src"];
|
|
112
|
-
function render(_ctx, _cache, $props, $setup, $data, $options) {
|
|
113
|
-
return openBlock(), createElementBlock("div", {
|
|
114
|
-
ref: "root",
|
|
115
|
-
class: normalizeClass(_ctx.rootClasses)
|
|
116
|
-
}, [_ctx.imageSrc ? (openBlock(), createElementBlock("img", {
|
|
117
|
-
key: 0,
|
|
118
|
-
src: _ctx.imageSrc,
|
|
119
|
-
class: normalizeClass(_ctx.imageClasses),
|
|
120
|
-
alt: ""
|
|
121
|
-
}, null, 10 /* CLASS, PROPS */, _hoisted_1)) : createCommentVNode("v-if", true), createElementVNode("div", {
|
|
122
|
-
class: normalizeClass(_ctx.headingClasses)
|
|
123
|
-
}, toDisplayString(_ctx.heading), 3 /* TEXT, CLASS */), _ctx.$slots.default ? (openBlock(), createElementBlock("div", {
|
|
124
|
-
key: 1,
|
|
125
|
-
class: normalizeClass(_ctx.slotClasses)
|
|
126
|
-
}, [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", {
|
|
127
|
-
class: normalizeClass(_ctx.textClasses)
|
|
128
|
-
}, toDisplayString(_ctx.text), 3 /* TEXT, CLASS */)], 2 /* CLASS */);
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
script.render = render;
|
|
132
|
-
script.__file = "src/components/or-empty-state-v3/OrEmptyState.vue";
|
|
133
|
-
|
|
134
|
-
export { EmptyStateSize, script as OrEmptyStateV3 };
|
|
1
|
+
export { E as EmptyStateSize, s as OrEmptyStateV3 } from '../../OrEmptyState.vue_vue_type_script_lang-da7d6c42.js';
|
|
2
|
+
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)[]>;
|