@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 justify-center',
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', 'gap-sm+ md:gap-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*', 'gap-sm+ md:gap-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', 'gap-sm+ md:gap-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
- 'inherit-contained': [],
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 ButtonContentLoadingStyles = {
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 contentStyles = computed(() => ['contents', ...(props.loading ? ButtonContentLoadingStyles[props.variant] : [])]);
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 ButtonContentLoadingStyles: Record<ButtonVariant, string[]>;
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.4",
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.4",
45
- "@onereach/ui-components-common": "^20.1.4",
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": "6dc60792ba3d4b4b45abab2d02f07f8f9e82d335"
109
+ "gitHead": "b46e97a449cd736b8575738ae968fe5570ed5351"
110
110
  }