@bagelink/vue 1.4.107 → 1.4.109
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/components/Btn.vue.d.ts +8 -0
- package/dist/components/Btn.vue.d.ts.map +1 -1
- package/dist/index.cjs +1 -1
- package/dist/index.mjs +1 -1
- package/dist/style.css +1 -1
- package/package.json +1 -1
- package/src/components/Btn.vue +53 -0
package/package.json
CHANGED
package/src/components/Btn.vue
CHANGED
|
@@ -28,6 +28,10 @@ const props = withDefaults(
|
|
|
28
28
|
round?: boolean
|
|
29
29
|
is?: string
|
|
30
30
|
ripple?: boolean
|
|
31
|
+
fullWidth?: boolean
|
|
32
|
+
fullWidthMobile?: boolean
|
|
33
|
+
alignTxt?: 'center' | 'start' | 'end'
|
|
34
|
+
alignTxtMobile?: 'center' | 'start' | 'end'
|
|
31
35
|
onClick?: (e: MouseEvent) => void
|
|
32
36
|
confirm?: boolean | string
|
|
33
37
|
}>(),
|
|
@@ -42,6 +46,10 @@ const props = withDefaults(
|
|
|
42
46
|
border: false,
|
|
43
47
|
outline: false,
|
|
44
48
|
ripple: true,
|
|
49
|
+
fullWidth: false,
|
|
50
|
+
fullWidthMobile: false,
|
|
51
|
+
alignTxt: 'center',
|
|
52
|
+
alignTxtMobile: 'center',
|
|
45
53
|
},
|
|
46
54
|
)
|
|
47
55
|
|
|
@@ -138,6 +146,12 @@ const slots: SetupContext['slots'] = useSlots()
|
|
|
138
146
|
'bgl_btn_mSize': size === 'm' || size === 'medium',
|
|
139
147
|
'bgl_btn_lSize': size === 'l' || size === 'large',
|
|
140
148
|
'bgl_btn_xlSize': size === 'xl' || size === 'extra-large',
|
|
149
|
+
'bgl_btn_fullWidth': fullWidth,
|
|
150
|
+
'bgl_btn_fullWidthMobile': fullWidthMobile,
|
|
151
|
+
'bgl_btn_alignStart': alignTxt === 'start',
|
|
152
|
+
'bgl_btn_alignEnd': alignTxt === 'end',
|
|
153
|
+
'bgl_btn_alignStartMobile': alignTxtMobile === 'start',
|
|
154
|
+
'bgl_btn_alignEndMobile': alignTxtMobile === 'end',
|
|
141
155
|
round,
|
|
142
156
|
'bgl_btn_flat': flat,
|
|
143
157
|
'bgl_btn-border': border || outline,
|
|
@@ -336,4 +350,43 @@ a {
|
|
|
336
350
|
height: calc(var(--btn-height) * 1.5);
|
|
337
351
|
width: calc(var(--btn-height) * 1.5);
|
|
338
352
|
}
|
|
353
|
+
.bgl_btn_fullWidth {
|
|
354
|
+
width: 100%;
|
|
355
|
+
}
|
|
356
|
+
|
|
357
|
+
.bgl_btn_fullWidthMobile {
|
|
358
|
+
width: auto;
|
|
359
|
+
}
|
|
360
|
+
|
|
361
|
+
|
|
362
|
+
/* Content alignment styles */
|
|
363
|
+
.bgl_btn_alignStart .bgl_btn-flex {
|
|
364
|
+
justify-content: flex-start;
|
|
365
|
+
}
|
|
366
|
+
|
|
367
|
+
.bgl_btn_alignEnd .bgl_btn-flex {
|
|
368
|
+
justify-content: flex-end;
|
|
369
|
+
}
|
|
370
|
+
|
|
371
|
+
.bgl_btn_alignStartMobile .bgl_btn-flex {
|
|
372
|
+
justify-content: center;
|
|
373
|
+
}
|
|
374
|
+
|
|
375
|
+
.bgl_btn_alignEndMobile .bgl_btn-flex {
|
|
376
|
+
justify-content: center;
|
|
377
|
+
}
|
|
378
|
+
|
|
379
|
+
@media screen and (max-width: 910px) {
|
|
380
|
+
.bgl_btn_fullWidthMobile {
|
|
381
|
+
width: 100%;
|
|
382
|
+
}
|
|
383
|
+
|
|
384
|
+
.bgl_btn_alignStartMobile .bgl_btn-flex {
|
|
385
|
+
justify-content: flex-start;
|
|
386
|
+
}
|
|
387
|
+
|
|
388
|
+
.bgl_btn_alignEndMobile .bgl_btn-flex {
|
|
389
|
+
justify-content: flex-end;
|
|
390
|
+
}
|
|
391
|
+
}
|
|
339
392
|
</style>
|