@onereach/ui-components-vue2 20.1.4 → 20.1.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.
|
@@ -299,6 +299,9 @@ var script = defineComponent({
|
|
|
299
299
|
}
|
|
300
300
|
function onBlur(event) {
|
|
301
301
|
activated.value = false;
|
|
302
|
+
if (props.multiple) {
|
|
303
|
+
clear();
|
|
304
|
+
}
|
|
302
305
|
context.emit('blur', event);
|
|
303
306
|
}
|
|
304
307
|
function openMobilePopover() {
|
|
@@ -420,6 +423,9 @@ var __vue_render__ = function () {
|
|
|
420
423
|
},
|
|
421
424
|
"focus": function ($event) {
|
|
422
425
|
return _vm.onFocus($event);
|
|
426
|
+
},
|
|
427
|
+
"blur": function ($event) {
|
|
428
|
+
return _vm.onBlur($event);
|
|
423
429
|
}
|
|
424
430
|
},
|
|
425
431
|
scopedSlots: _vm._u([{
|
|
@@ -7,7 +7,7 @@ import '@vueuse/core';
|
|
|
7
7
|
|
|
8
8
|
const Button = [
|
|
9
9
|
// Layout
|
|
10
|
-
'layout-inline-row
|
|
10
|
+
'layout-inline-row',
|
|
11
11
|
// Overflow
|
|
12
12
|
'overflow-hidden',
|
|
13
13
|
// Interactivity
|
|
@@ -18,34 +18,60 @@ const Button = [
|
|
|
18
18
|
'typography-button'];
|
|
19
19
|
const ButtonVariants = {
|
|
20
20
|
[ButtonVariant.Contained]: [
|
|
21
|
+
// Layout
|
|
22
|
+
'layout-inline-row justify-center',
|
|
21
23
|
// Box
|
|
22
24
|
'min-w-[96px]',
|
|
23
25
|
// Spacing
|
|
24
|
-
'px-md md:px-md', 'py-sm+ md:py-sm',
|
|
25
|
-
// Elevation (enabled)
|
|
26
|
-
'enabled:shadow-button', 'dark:enabled:shadow-button-dark'],
|
|
26
|
+
'px-md md:px-md', 'py-sm+ md:py-sm'],
|
|
27
27
|
[ButtonVariant.Outlined]: [
|
|
28
|
+
// Layout
|
|
29
|
+
'layout-inline-row justify-center',
|
|
28
30
|
// Box
|
|
29
31
|
'min-w-[96px]',
|
|
30
32
|
// Spacing
|
|
31
|
-
'px-md* md:px-md*', 'py-sm+* md:py-sm*'
|
|
33
|
+
'px-md* md:px-md*', 'py-sm+* md:py-sm*'],
|
|
32
34
|
[ButtonVariant.Text]: [
|
|
35
|
+
// Layout
|
|
36
|
+
'layout-inline-row justify-center',
|
|
33
37
|
// Box
|
|
34
38
|
'min-w-[96px]',
|
|
35
39
|
// Spacing
|
|
36
|
-
'px-md md:px-md', 'py-sm+ md:py-sm'
|
|
40
|
+
'px-md md:px-md', 'py-sm+ md:py-sm'],
|
|
37
41
|
[ButtonVariant.Link]: [
|
|
42
|
+
// Layout
|
|
43
|
+
'layout-inline-row justify-center']
|
|
44
|
+
};
|
|
45
|
+
const ButtonContainerVariants = {
|
|
46
|
+
[ButtonVariant.Contained]: [
|
|
47
|
+
// Layout
|
|
48
|
+
'layout-inline-row', 'gap-sm+ md:gap-sm'],
|
|
49
|
+
[ButtonVariant.Outlined]: [
|
|
50
|
+
// Layout
|
|
51
|
+
'layout-inline-row', 'gap-sm+ md:gap-sm'],
|
|
52
|
+
[ButtonVariant.Text]: [
|
|
53
|
+
// Layout
|
|
54
|
+
'layout-inline-row', 'gap-sm+ md:gap-sm'],
|
|
55
|
+
[ButtonVariant.Link]: [
|
|
56
|
+
// Layout
|
|
57
|
+
'layout-inline-row',
|
|
38
58
|
// Spacing
|
|
39
59
|
'gap-xs']
|
|
40
60
|
};
|
|
41
61
|
const ButtonColors = {
|
|
42
62
|
'primary-contained': [
|
|
43
63
|
// Theme
|
|
44
|
-
'theme-preset-1-primary', 'dark:theme-preset-1-primary-dark'
|
|
64
|
+
'theme-preset-1-primary', 'dark:theme-preset-1-primary-dark',
|
|
65
|
+
// Elevation (enabled)
|
|
66
|
+
'enabled:shadow-button', 'dark:enabled:shadow-button-dark'],
|
|
45
67
|
'danger-contained': [
|
|
46
68
|
// Theme
|
|
47
|
-
'theme-preset-1-error', 'dark:theme-preset-1-error-dark'
|
|
48
|
-
|
|
69
|
+
'theme-preset-1-error', 'dark:theme-preset-1-error-dark',
|
|
70
|
+
// Elevation (enabled)
|
|
71
|
+
'enabled:shadow-button', 'dark:enabled:shadow-button-dark'],
|
|
72
|
+
'inherit-contained': [
|
|
73
|
+
// Elevation (enabled)
|
|
74
|
+
'enabled:shadow-button', 'dark:enabled:shadow-button-dark'],
|
|
49
75
|
'primary-outlined': [
|
|
50
76
|
// Theme
|
|
51
77
|
'theme-preset-3-primary', 'dark:theme-preset-3-primary-dark', 'theme-border-outline border-1', 'dark:theme-border-outline-dark',
|
|
@@ -90,7 +116,31 @@ const ButtonLoadingColors = {
|
|
|
90
116
|
'danger-link': ['interactivity-none', 'text-error-hover dark:text-error-hover-dark'],
|
|
91
117
|
'inherit-link': ['interactivity-none']
|
|
92
118
|
};
|
|
93
|
-
const
|
|
119
|
+
const ButtonContainerVariantsLoading = {
|
|
120
|
+
'contained': [
|
|
121
|
+
// Position
|
|
122
|
+
'relative', 'flex',
|
|
123
|
+
// Box
|
|
124
|
+
'w-full', 'h-full',
|
|
125
|
+
// Aligment
|
|
126
|
+
'items-center', 'justify-center'],
|
|
127
|
+
'outlined': [
|
|
128
|
+
// Position
|
|
129
|
+
'relative', 'flex',
|
|
130
|
+
// Box
|
|
131
|
+
'w-full', 'h-full',
|
|
132
|
+
// Aligment
|
|
133
|
+
'items-center', 'justify-center'],
|
|
134
|
+
'text': [
|
|
135
|
+
// Position
|
|
136
|
+
'relative', 'flex',
|
|
137
|
+
// Box
|
|
138
|
+
'w-full', 'h-full',
|
|
139
|
+
// Aligment
|
|
140
|
+
'items-center', 'justify-center'],
|
|
141
|
+
'link': ['contents']
|
|
142
|
+
};
|
|
143
|
+
const ButtonContentLoading = {
|
|
94
144
|
'contained': ['invisible'],
|
|
95
145
|
'outlined': ['invisible'],
|
|
96
146
|
'text': ['hidden'],
|
|
@@ -139,11 +189,13 @@ var script = defineComponent({
|
|
|
139
189
|
const root = ref();
|
|
140
190
|
// Styles
|
|
141
191
|
const rootStyles = computed(() => ['or-button-v3', ...Button, ...ButtonVariants[props.variant], ...ButtonColors[`${props.color}-${props.variant}`], ...(props.loading ? ButtonLoadingColors[`${props.color}-${props.variant}`] : [])]);
|
|
142
|
-
const
|
|
192
|
+
const contentContainerStyles = computed(() => [...ButtonContainerVariants[props.variant], ...(props.loading ? ButtonContainerVariantsLoading[props.variant] : [])]);
|
|
193
|
+
const contentStyles = computed(() => ['contents', ...(props.loading ? ButtonContentLoading[props.variant] : [])]);
|
|
143
194
|
return {
|
|
144
195
|
root,
|
|
145
196
|
rootStyles,
|
|
146
197
|
contentStyles,
|
|
198
|
+
contentContainerStyles,
|
|
147
199
|
isVue3
|
|
148
200
|
};
|
|
149
201
|
}
|
|
@@ -177,6 +229,8 @@ var __vue_render__ = function () {
|
|
|
177
229
|
return _vm.$emit('blur', e);
|
|
178
230
|
}
|
|
179
231
|
})), [_c('div', {
|
|
232
|
+
class: _vm.contentContainerStyles
|
|
233
|
+
}, [_c('div', {
|
|
180
234
|
class: _vm.contentStyles
|
|
181
235
|
}, [_vm._t("default")], 2), _vm._v(" "), _vm.loading ? [_vm.variant == 'contained' || _vm.variant == 'outlined' ? [_c('div', {
|
|
182
236
|
class: ['absolute']
|
|
@@ -191,7 +245,7 @@ var __vue_render__ = function () {
|
|
|
191
245
|
"variant": "text",
|
|
192
246
|
"text": _vm.loadingText
|
|
193
247
|
}
|
|
194
|
-
})]] : _vm._e()], 2);
|
|
248
|
+
})]] : _vm._e()], 2)]);
|
|
195
249
|
};
|
|
196
250
|
var __vue_staticRenderFns__ = [];
|
|
197
251
|
|
|
@@ -1,6 +1,8 @@
|
|
|
1
1
|
import { ButtonColor, ButtonVariant } from './props';
|
|
2
2
|
export declare const Button: string[];
|
|
3
3
|
export declare const ButtonVariants: Record<ButtonVariant, string[]>;
|
|
4
|
+
export declare const ButtonContainerVariants: Record<ButtonVariant, string[]>;
|
|
4
5
|
export declare const ButtonColors: Record<`${ButtonColor}-${ButtonVariant}`, string[]>;
|
|
5
6
|
export declare const ButtonLoadingColors: Record<`${ButtonColor}-${ButtonVariant}`, string[]>;
|
|
6
|
-
export declare const
|
|
7
|
+
export declare const ButtonContainerVariantsLoading: Record<ButtonVariant, string[]>;
|
|
8
|
+
export declare const ButtonContentLoading: Record<ButtonVariant, string[]>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@onereach/ui-components-vue2",
|
|
3
|
-
"version": "20.1.
|
|
3
|
+
"version": "20.1.6",
|
|
4
4
|
"description": "Vue components library for v2",
|
|
5
5
|
"sideEffects": false,
|
|
6
6
|
"exports": {
|
|
@@ -41,8 +41,8 @@
|
|
|
41
41
|
"@codemirror/view": "^6",
|
|
42
42
|
"@floating-ui/dom": "1.5.3",
|
|
43
43
|
"@lezer/highlight": "*",
|
|
44
|
-
"@onereach/styles": "^20.1.
|
|
45
|
-
"@onereach/ui-components-common": "^20.1.
|
|
44
|
+
"@onereach/styles": "^20.1.6",
|
|
45
|
+
"@onereach/ui-components-common": "^20.1.6",
|
|
46
46
|
"@splidejs/splide": "4.0.6",
|
|
47
47
|
"@tiptap/core": "2.0.3",
|
|
48
48
|
"@tiptap/extension-blockquote": "2.0.3",
|
|
@@ -106,5 +106,5 @@
|
|
|
106
106
|
"access": "public"
|
|
107
107
|
},
|
|
108
108
|
"npmUnpacked": "4.15.2",
|
|
109
|
-
"gitHead": "
|
|
109
|
+
"gitHead": "b46e97a449cd736b8575738ae968fe5570ed5351"
|
|
110
110
|
}
|