bootstrap-vue-next 0.9.21 → 0.9.22

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 (7) hide show
  1. package/dist/bootstrap-vue-next.mjs +1844 -1806
  2. package/dist/bootstrap-vue-next.mjs.map +1 -1
  3. package/dist/bootstrap-vue-next.umd.js +1 -1
  4. package/dist/bootstrap-vue-next.umd.js.map +1 -1
  5. package/dist/src/components/BAvatar/BAvatar.vue.d.ts +147 -3
  6. package/package.json +1 -1
  7. package/src/components/BAvatar/BAvatar.vue +80 -24
package/dist/src/components/BAvatar/BAvatar.vue.d.ts CHANGED
@@ -1,6 +1,18 @@
1
1
  import type { Booleanish, ButtonType, ColorVariant, Size, TextColorVariant } from '../../types';
2
2
  export declare const computeSize: (value: any) => string | null;
3
3
  declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
4
+ replace: {
5
+ type: import("vue").PropType<Booleanish>;
6
+ default: boolean;
7
+ };
8
+ target: {
9
+ type: import("vue").PropType<import("../../types").LinkTarget>;
10
+ default: string;
11
+ };
12
+ to: {
13
+ type: import("vue").PropType<import("vue-router").RouteLocationRaw>;
14
+ default: undefined;
15
+ };
4
16
  button: {
5
17
  type: import("vue").PropType<Booleanish>;
6
18
  default: boolean;
@@ -9,10 +21,18 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
9
21
  type: import("vue").PropType<string>;
10
22
  default: undefined;
11
23
  };
24
+ href: {
25
+ type: import("vue").PropType<string>;
26
+ default: undefined;
27
+ };
12
28
  src: {
13
29
  type: import("vue").PropType<string>;
14
30
  default: undefined;
15
31
  };
32
+ rel: {
33
+ type: import("vue").PropType<string>;
34
+ default: undefined;
35
+ };
16
36
  alt: {
17
37
  type: import("vue").PropType<string>;
18
38
  default: string;
@@ -25,12 +45,20 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
25
45
  type: import("vue").PropType<string>;
26
46
  default: undefined;
27
47
  };
48
+ active: {
49
+ type: import("vue").PropType<Booleanish>;
50
+ default: undefined;
51
+ };
28
52
  variant: {
29
53
  type: import("vue").PropType<keyof import("../../types").BaseColorVariant | null>;
30
54
  default: string;
31
55
  };
56
+ opacity: {
57
+ type: import("vue").PropType<10 | 100 | 25 | 50 | 75 | "10" | "25" | "50" | "75" | "100">;
58
+ default: undefined;
59
+ };
32
60
  icon: {
33
- type: import("vue").PropType<string>;
61
+ type: import("vue").PropType<"" | "true" | "false">;
34
62
  default: undefined;
35
63
  };
36
64
  square: {
@@ -41,6 +69,42 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
41
69
  type: import("vue").PropType<string>;
42
70
  default: undefined;
43
71
  };
72
+ activeClass: {
73
+ type: import("vue").PropType<string>;
74
+ default: string;
75
+ };
76
+ append: {
77
+ type: import("vue").PropType<Booleanish>;
78
+ default: boolean;
79
+ };
80
+ routerComponentName: {
81
+ type: import("vue").PropType<string>;
82
+ default: string;
83
+ };
84
+ opacityHover: {
85
+ type: import("vue").PropType<10 | 100 | 25 | 50 | 75 | "10" | "25" | "50" | "75" | "100">;
86
+ default: undefined;
87
+ };
88
+ underlineVariant: {
89
+ type: import("vue").PropType<keyof import("../../types").BaseColorVariant | null>;
90
+ default: null;
91
+ };
92
+ underlineOffset: {
93
+ type: import("vue").PropType<1 | 2 | 3 | "1" | "2" | "3">;
94
+ default: undefined;
95
+ };
96
+ underlineOffsetHover: {
97
+ type: import("vue").PropType<1 | 2 | 3 | "1" | "2" | "3">;
98
+ default: undefined;
99
+ };
100
+ underlineOpacity: {
101
+ type: import("vue").PropType<0 | 10 | "0" | 100 | 25 | 50 | 75 | "10" | "25" | "50" | "75" | "100">;
102
+ default: undefined;
103
+ };
104
+ underlineOpacityHover: {
105
+ type: import("vue").PropType<0 | 10 | "0" | 100 | 25 | 50 | 75 | "10" | "25" | "50" | "75" | "100">;
106
+ default: undefined;
107
+ };
44
108
  badge: {
45
109
  type: import("vue").PropType<string | boolean>;
46
110
  default: boolean;
@@ -77,6 +141,18 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
77
141
  click: (value: MouseEvent) => void;
78
142
  'img-error': (value: Event) => void;
79
143
  }, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
144
+ replace: {
145
+ type: import("vue").PropType<Booleanish>;
146
+ default: boolean;
147
+ };
148
+ target: {
149
+ type: import("vue").PropType<import("../../types").LinkTarget>;
150
+ default: string;
151
+ };
152
+ to: {
153
+ type: import("vue").PropType<import("vue-router").RouteLocationRaw>;
154
+ default: undefined;
155
+ };
80
156
  button: {
81
157
  type: import("vue").PropType<Booleanish>;
82
158
  default: boolean;
@@ -85,10 +161,18 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
85
161
  type: import("vue").PropType<string>;
86
162
  default: undefined;
87
163
  };
164
+ href: {
165
+ type: import("vue").PropType<string>;
166
+ default: undefined;
167
+ };
88
168
  src: {
89
169
  type: import("vue").PropType<string>;
90
170
  default: undefined;
91
171
  };
172
+ rel: {
173
+ type: import("vue").PropType<string>;
174
+ default: undefined;
175
+ };
92
176
  alt: {
93
177
  type: import("vue").PropType<string>;
94
178
  default: string;
@@ -101,12 +185,20 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
101
185
  type: import("vue").PropType<string>;
102
186
  default: undefined;
103
187
  };
188
+ active: {
189
+ type: import("vue").PropType<Booleanish>;
190
+ default: undefined;
191
+ };
104
192
  variant: {
105
193
  type: import("vue").PropType<keyof import("../../types").BaseColorVariant | null>;
106
194
  default: string;
107
195
  };
196
+ opacity: {
197
+ type: import("vue").PropType<10 | 100 | 25 | 50 | 75 | "10" | "25" | "50" | "75" | "100">;
198
+ default: undefined;
199
+ };
108
200
  icon: {
109
- type: import("vue").PropType<string>;
201
+ type: import("vue").PropType<"" | "true" | "false">;
110
202
  default: undefined;
111
203
  };
112
204
  square: {
@@ -117,6 +209,42 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
117
209
  type: import("vue").PropType<string>;
118
210
  default: undefined;
119
211
  };
212
+ activeClass: {
213
+ type: import("vue").PropType<string>;
214
+ default: string;
215
+ };
216
+ append: {
217
+ type: import("vue").PropType<Booleanish>;
218
+ default: boolean;
219
+ };
220
+ routerComponentName: {
221
+ type: import("vue").PropType<string>;
222
+ default: string;
223
+ };
224
+ opacityHover: {
225
+ type: import("vue").PropType<10 | 100 | 25 | 50 | 75 | "10" | "25" | "50" | "75" | "100">;
226
+ default: undefined;
227
+ };
228
+ underlineVariant: {
229
+ type: import("vue").PropType<keyof import("../../types").BaseColorVariant | null>;
230
+ default: null;
231
+ };
232
+ underlineOffset: {
233
+ type: import("vue").PropType<1 | 2 | 3 | "1" | "2" | "3">;
234
+ default: undefined;
235
+ };
236
+ underlineOffsetHover: {
237
+ type: import("vue").PropType<1 | 2 | 3 | "1" | "2" | "3">;
238
+ default: undefined;
239
+ };
240
+ underlineOpacity: {
241
+ type: import("vue").PropType<0 | 10 | "0" | 100 | 25 | 50 | 75 | "10" | "25" | "50" | "75" | "100">;
242
+ default: undefined;
243
+ };
244
+ underlineOpacityHover: {
245
+ type: import("vue").PropType<0 | 10 | "0" | 100 | 25 | 50 | 75 | "10" | "25" | "50" | "75" | "100">;
246
+ default: undefined;
247
+ };
120
248
  badge: {
121
249
  type: import("vue").PropType<string | boolean>;
122
250
  default: boolean;
@@ -153,16 +281,32 @@ declare const _default: __VLS_WithTemplateSlots<import("vue").DefineComponent<{
153
281
  onClick?: ((value: MouseEvent) => any) | undefined;
154
282
  "onImg-error"?: ((value: Event) => any) | undefined;
155
283
  }, {
284
+ replace: Booleanish;
285
+ target: import("../../types").LinkTarget;
286
+ to: import("vue-router").RouteLocationRaw;
156
287
  button: Booleanish;
157
288
  text: string;
289
+ href: string;
158
290
  src: string;
291
+ rel: string;
159
292
  alt: string;
160
293
  disabled: Booleanish;
161
294
  size: Size | string;
295
+ active: Booleanish;
162
296
  variant: ColorVariant | null;
163
- icon: string;
297
+ opacity: 10 | 100 | 25 | 50 | 75 | "10" | "25" | "50" | "75" | "100";
298
+ icon: "" | "true" | "false";
164
299
  square: Booleanish;
165
300
  ariaLabel: string;
301
+ activeClass: string;
302
+ append: Booleanish;
303
+ routerComponentName: string;
304
+ opacityHover: 10 | 100 | 25 | 50 | 75 | "10" | "25" | "50" | "75" | "100";
305
+ underlineVariant: keyof import("../../types").BaseColorVariant | null;
306
+ underlineOffset: 1 | 2 | 3 | "1" | "2" | "3";
307
+ underlineOffsetHover: 1 | 2 | 3 | "1" | "2" | "3";
308
+ underlineOpacity: 0 | 10 | "0" | 100 | 25 | 50 | 75 | "10" | "25" | "50" | "75" | "100";
309
+ underlineOpacityHover: 0 | 10 | "0" | 100 | 25 | 50 | 75 | "10" | "25" | "50" | "75" | "100";
166
310
  badge: boolean | string;
167
311
  badgeLeft: Booleanish;
168
312
  badgeOffset: string;
package/package.json CHANGED
@@ -2,7 +2,7 @@
2
2
  "name": "bootstrap-vue-next",
3
3
  "displayName": "BootstrapVueNext",
4
4
  "description": "Early (but lovely) implementation of Vue 3, Bootstrap 5 and Typescript",
5
- "version": "0.9.21",
5
+ "version": "0.9.22",
6
6
  "license": "MIT",
7
7
  "main": "./dist/bootstrap-vue-next.umd.js",
8
8
  "module": "./dist/bootstrap-vue-next.mjs",
package/src/components/BAvatar/BAvatar.vue CHANGED
@@ -24,32 +24,43 @@
24
24
  </template>
25
25
 
26
26
  <script setup lang="ts">
27
- import {avatarGroupInjectionKey, isEmptySlot, isNumeric, toFloat} from '../../utils'
27
+ import {
28
+ avatarGroupInjectionKey,
29
+ isEmptySlot,
30
+ isLink,
31
+ isNumeric,
32
+ pluckProps,
33
+ toFloat,
34
+ } from '../../utils'
28
35
  import {computed, type CSSProperties, inject, type StyleValue, useSlots} from 'vue'
29
36
  import type {Booleanish, ButtonType, ColorVariant, Size, TextColorVariant} from '../../types'
30
37
  import {useBooleanish} from '../../composables'
38
+ import BLink from '../BLink/BLink.vue'
39
+ import type {BLinkProps} from '../../types/BLinkProps'
31
40
 
32
41
  const props = withDefaults(
33
- defineProps<{
34
- alt?: string
35
- ariaLabel?: string
36
- badge?: boolean | string
37
- badgeLeft?: Booleanish
38
- badgeOffset?: string
39
- badgeTop?: Booleanish
40
- badgeVariant?: ColorVariant | null
41
- button?: Booleanish
42
- buttonType?: ButtonType
43
- disabled?: Booleanish
44
- icon?: string
45
- rounded?: boolean | string
46
- size?: Size | string // TODO number --> compat
47
- square?: Booleanish
48
- src?: string
49
- text?: string
50
- textVariant?: TextColorVariant | null
51
- variant?: ColorVariant | null
52
- }>(),
42
+ defineProps<
43
+ {
44
+ alt?: string
45
+ ariaLabel?: string
46
+ badge?: boolean | string
47
+ badgeLeft?: Booleanish
48
+ badgeOffset?: string
49
+ badgeTop?: Booleanish
50
+ badgeVariant?: ColorVariant | null
51
+ button?: Booleanish
52
+ buttonType?: ButtonType
53
+ disabled?: Booleanish
54
+ icon?: string
55
+ rounded?: boolean | string
56
+ size?: Size | string // TODO number --> compat
57
+ square?: Booleanish
58
+ src?: string
59
+ text?: string
60
+ textVariant?: TextColorVariant | null
61
+ variant?: ColorVariant | null
62
+ } & Omit<BLinkProps, 'event' | 'routerTag'>
63
+ >(),
53
64
  {
54
65
  ariaLabel: undefined,
55
66
  badgeOffset: undefined,
@@ -69,6 +80,25 @@ const props = withDefaults(
69
80
  rounded: 'circle',
70
81
  square: false,
71
82
  variant: 'secondary',
83
+ // Link props
84
+ active: undefined,
85
+ activeClass: 'router-link-active',
86
+ append: false,
87
+ href: undefined,
88
+ // noPrefetch: {type: [Boolean, String] as PropType<Booleanish>, default: false},
89
+ // prefetch: {type: [Boolean, String] as PropType<Booleanish>, default: null},
90
+ rel: undefined,
91
+ replace: false,
92
+ routerComponentName: 'router-link',
93
+ target: '_self',
94
+ to: undefined,
95
+ opacity: undefined,
96
+ opacityHover: undefined,
97
+ underlineVariant: null,
98
+ underlineOffset: undefined,
99
+ underlineOffsetHover: undefined,
100
+ underlineOpacity: undefined,
101
+ underlineOpacityHover: undefined,
72
102
  }
73
103
  )
74
104
 
@@ -103,6 +133,8 @@ const hasBadgeSlot = computed(() => !isEmptySlot(slots.badge))
103
133
 
104
134
  const showBadge = computed<boolean>(() => !!props.badge || props.badge === '' || hasBadgeSlot.value)
105
135
 
136
+ const computedLink = computed<boolean>(() => isLink(props))
137
+
106
138
  const computedSize = computed<string | null>(
107
139
  () => parentData?.size.value ?? computeSize(props.size)
108
140
  )
@@ -114,9 +146,31 @@ const computedVariant = computed<ColorVariant | null>(
114
146
  const computedRounded = computed<string | boolean>(() => parentData?.rounded.value ?? props.rounded)
115
147
 
116
148
  const computedAttrs = computed(() => ({
117
- 'type': buttonBoolean.value ? props.buttonType : undefined,
149
+ 'type': buttonBoolean.value && !computedLink.value ? props.buttonType : undefined,
118
150
  'aria-label': props.ariaLabel || null,
119
151
  'disabled': disabledBoolean.value || null,
152
+ // Link props
153
+ ...(computedLink.value
154
+ ? pluckProps(props, {
155
+ active: true,
156
+ activeClass: true,
157
+ append: true,
158
+ href: true,
159
+ rel: true,
160
+ replace: true,
161
+ routerComponentName: true,
162
+ target: true,
163
+ to: true,
164
+ variant: true,
165
+ opacity: true,
166
+ opacityHover: true,
167
+ underlineVariant: true,
168
+ underlineOffset: true,
169
+ underlineOffsetHover: true,
170
+ underlineOpacity: true,
171
+ underlineOpacityHover: true,
172
+ } as Record<keyof Omit<BLinkProps, 'event' | 'routerTag'>, true>)
173
+ : {}),
120
174
  }))
121
175
 
122
176
  const badgeClasses = computed(() => ({
@@ -185,7 +239,9 @@ const marginStyle = computed(() => {
185
239
  return value ? {marginLeft: value, marginRight: value} : {}
186
240
  })
187
241
 
188
- const computedTag = computed<'button' | 'span'>(() => (buttonBoolean.value ? 'button' : 'span'))
242
+ const computedTag = computed<typeof BLink | 'button' | 'span'>(() =>
243
+ computedLink.value ? BLink : buttonBoolean.value ? 'button' : 'span'
244
+ )
189
245
 
190
246
  const computedStyle = computed<CSSProperties>(() => ({
191
247
  ...marginStyle.value,
@@ -197,7 +253,7 @@ const computeContrastVariant = (colorVariant: ColorVariant): 'dark' | 'light' =>
197
253
  colorVariant === 'light' || colorVariant === 'warning' ? 'dark' : 'light'
198
254
 
199
255
  const clicked = (e: MouseEvent): void => {
200
- if (!disabledBoolean.value && buttonBoolean.value) emit('click', e)
256
+ if (!disabledBoolean.value && (computedLink.value || buttonBoolean.value)) emit('click', e)
201
257
  }
202
258
 
203
259
  const onImgError = (e: Event): void => emit('img-error', e)