Skip to content

Commit 8567ccb

Browse files
mrholekmrholek
committed
docs: update content
1 parent f13608d commit 8567ccb

File tree

8 files changed

+387
-105
lines changed

8 files changed

+387
-105
lines changed

‎docs/components/alert.md

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -34,11 +34,11 @@ Vue Alert is prepared for any length of text, as well as an optional close butto
3434
Click the button below to show an alert (hidden with inline styles to start), then dismiss (and destroy) it with the built-in close button.
3535

3636
::: demo
37-
<CAlert color="primary" :visible="liveExampleVisible" dismissible @dismiss="() => { liveExampleVisible = false }">A simple primary alert—check it out!</CAlert>
37+
<CAlert color="primary" :visible="liveExampleVisible" dismissible @close="() => { liveExampleVisible = false }">A simple primary alert—check it out!</CAlert>
3838
<CButton color="primary" @click="() => { liveExampleVisible = true }">Show live alert</CButton>
3939
:::
4040
```vue
41-
<CAlert color="primary" :visible="liveExampleVisible" dismissible @dismiss="() => { liveExampleVisible = false }">A simple primary alert—check it out!</CAlert>
41+
<CAlert color="primary" :visible="liveExampleVisible" dismissible @close="() => { liveExampleVisible = false }">A simple primary alert—check it out!</CAlert>
4242
<CButton color="primary" @click="() => { liveExampleVisible = true }">Show live alert</CButton>
4343
```
4444

@@ -231,13 +231,13 @@ Use `variant="solid"` to change contextual colors to solid.
231231
Alerts can also be easily dismissed. Just add the `dismissible` prop.
232232

233233
::: demo
234-
<CAlert color="warning" dismissible @dismiss="alert">
234+
<CAlert color="warning" dismissible @close="alert">
235235
<strong>Go right ahead</strong> and click that dimiss over there on the right.
236236
</CAlert>
237237
:::
238238

239239
```vue
240-
<CAlert color="warning" dismissible @dismiss="alert">
240+
<CAlert color="warning" dismissible @close="alert">
241241
<strong>Go right ahead</strong> and click that dimiss over there on the right.
242242
</CAlert>
243243

‎docs/components/modal.md

Lines changed: 32 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ Toggle a working modal demo by clicking the button below. It will slide down and
4242

4343
::: demo
4444
<CButton color="primary" @click="() => { visibleLiveDemo = true }">Launch demo modal</CButton>
45-
<CModal :visible="visibleLiveDemo">
45+
<CModal :visible="visibleLiveDemo" @close="() => { visibleLiveDemo = false }">
4646
<CModalHeader>
4747
<CModalTitle>Modal title</CModalTitle>
4848
</CModalHeader>
@@ -58,7 +58,7 @@ Toggle a working modal demo by clicking the button below. It will slide down and
5858
``` vue
5959
<template>
6060
<CButton color="primary" @click="() => { visibleLiveDemo = true }">Launch demo modal</CButton>
61-
<CModal :visible="visibleLiveDemo" @dismiss="() => { visibleLiveDemo = false }">
61+
<CModal :visible="visibleLiveDemo" @close="() => { visibleLiveDemo = false }">
6262
<CModalHeader>
6363
<CModalTitle>Modal title</CModalTitle>
6464
</CModalHeader>
@@ -89,7 +89,7 @@ If you set `backdrop` property to `static`, your modal will behave as though the
8989

9090
::: demo
9191
<CButton color="primary" @click="() => { visibleStaticBackdropDemo = true }">Launch static backdrop modal</CButton>
92-
<CModal backdrop="static" :visible="visibleStaticBackdropDemo" @dismiss="() => { visibleStaticBackdropDemo = false }">
92+
<CModal backdrop="static" :visible="visibleStaticBackdropDemo" @close="() => { visibleStaticBackdropDemo = false }">
9393
<CModalHeader>
9494
<CModalTitle>Modal title</CModalTitle>
9595
</CModalHeader>
@@ -105,7 +105,7 @@ If you set `backdrop` property to `static`, your modal will behave as though the
105105
``` vue
106106
<template>
107107
<CButton color="primary" @click="() => { visibleStaticBackdropDemo = true }">Launch demo modal</CButton>
108-
<CModal backdrop="static" :visible="visibleStaticBackdropDemo" @dismiss="() => { visibleStaticBackdropDemo = false }">
108+
<CModal backdrop="static" :visible="visibleStaticBackdropDemo" @close="() => { visibleStaticBackdropDemo = false }">
109109
<CModalHeader>
110110
<CModalTitle>Modal title</CModalTitle>
111111
</CModalHeader>
@@ -135,7 +135,7 @@ When modals become too long for the user's viewport or device, they scroll indep
135135

136136
::: demo
137137
<CButton color="primary" @click="() => { visibleScrollingLongContentDemo = true }">Launch static backdrop modal</CButton>
138-
<CModal :visible="visibleScrollingLongContentDemo" @dismiss="() => { visibleScrollingLongContentDemo = false }">
138+
<CModal :visible="visibleScrollingLongContentDemo" @close="() => { visibleScrollingLongContentDemo = false }">
139139
<CModalHeader>
140140
<CModalTitle>Modal title</CModalTitle>
141141
</CModalHeader>
@@ -230,7 +230,7 @@ When modals become too long for the user's viewport or device, they scroll indep
230230
``` vue
231231
<template>
232232
<CButton color="primary" @click="() => { visibleScrollingLongContentDemo = true }">Launch demo modal</CButton>
233-
<CModal :visible="visibleScrollingLongContentDemo" @dismiss="() => { visibleScrollingLongContentDemo = false }">
233+
<CModal :visible="visibleScrollingLongContentDemo" @close="() => { visibleScrollingLongContentDemo = false }">
234234
<CModalHeader>
235235
<CModalTitle>Modal title</CModalTitle>
236236
</CModalHeader>
@@ -337,7 +337,7 @@ You can also create a scrollable modal that allows scroll the modal body by addi
337337

338338
::: demo
339339
<CButton color="primary" @click="() => { visibleScrollableDemo = true }">Launch static backdrop modal</CButton>
340-
<CModal scrollable :visible="visibleScrollableDemo" @dismiss="() => { visibleScrollableDemo = false }">
340+
<CModal scrollable :visible="visibleScrollableDemo" @close="() => { visibleScrollableDemo = false }">
341341
<CModalHeader>
342342
<CModalTitle>Modal title</CModalTitle>
343343
</CModalHeader>
@@ -432,7 +432,7 @@ You can also create a scrollable modal that allows scroll the modal body by addi
432432
``` vue
433433
<template>
434434
<CButton color="primary" @click="() => { visibleScrollableDemo = true }">Launch demo modal</CButton>
435-
<CModal scrollable :visible="visibleScrollableDemo" @dismiss="() => { visibleScrollableDemo = false }">
435+
<CModal scrollable :visible="visibleScrollableDemo" @close="() => { visibleScrollableDemo = false }">
436436
<CModalHeader>
437437
<CModalTitle>Modal title</CModalTitle>
438438
</CModalHeader>
@@ -541,7 +541,7 @@ Add `alignment="center` to `<CModal>` to vertically center the modal.
541541

542542
::: demo
543543
<CButton color="primary" @click="() => { visibleVerticallyCenteredDemo = true }">Vertically centered modal</CButton>
544-
<CModal alignment="center" :visible="visibleVerticallyCenteredDemo" @dismiss="() => { visibleVerticallyCenteredDemo = false }">
544+
<CModal alignment="center" :visible="visibleVerticallyCenteredDemo" @close="() => { visibleVerticallyCenteredDemo = false }">
545545
<CModalHeader>
546546
<CModalTitle>Modal title</CModalTitle>
547547
</CModalHeader>
@@ -559,7 +559,7 @@ Add `alignment="center` to `<CModal>` to vertically center the modal.
559559
``` vue
560560
<template>
561561
<CButton color="primary" @click="() => { visibleVerticallyCenteredDemo = true }">Launch demo modal</CButton>
562-
<CModal alignment="center" :visible="visibleVerticallyCenteredDemo" @dismiss="() => { visibleVerticallyCenteredDemo = false }">
562+
<CModal alignment="center" :visible="visibleVerticallyCenteredDemo" @close="() => { visibleVerticallyCenteredDemo = false }">
563563
<CModalHeader>
564564
<CModalTitle>Modal title</CModalTitle>
565565
</CModalHeader>
@@ -587,7 +587,7 @@ Add `alignment="center` to `<CModal>` to vertically center the modal.
587587

588588
::: demo
589589
<CButton color="primary" @click="() => { visibleVerticallyCenteredScrollableDemo = true }">Vertically centered scrollable modal</CButton>
590-
<CModal alignment="center" scrollable :visible="visibleVerticallyCenteredScrollableDemo" @dismiss="() => { visibleVerticallyCenteredScrollableDemo = false }">
590+
<CModal alignment="center" scrollable :visible="visibleVerticallyCenteredScrollableDemo" @close="() => { visibleVerticallyCenteredScrollableDemo = false }">
591591
<CModalHeader>
592592
<CModalTitle>Modal title</CModalTitle>
593593
</CModalHeader>
@@ -605,7 +605,7 @@ Add `alignment="center` to `<CModal>` to vertically center the modal.
605605
``` vue
606606
<template>
607607
<CButton color="primary" @click="() => { visibleVerticallyCenteredScrollableDemo = true }">Vertically centered scrollable modal</CButton>
608-
<CModal alignment="center" scrollable :visible="visibleVerticallyCenteredScrollableDemo" @dismiss="() => { visibleVerticallyCenteredScrollableDemo = false }">
608+
<CModal alignment="center" scrollable :visible="visibleVerticallyCenteredScrollableDemo" @close="() => { visibleVerticallyCenteredScrollableDemo = false }">
609609
<CModalHeader>
610610
<CModalTitle>Modal title</CModalTitle>
611611
</CModalHeader>
@@ -637,7 +637,7 @@ Add `alignment="center` to `<CModal>` to vertically center the modal.
637637

638638
::: demo
639639
<CButton color="primary" @click="() => { tooltipsAndPopoversDemo = true }">Launch demo modal</CButton>
640-
<CModal :visible="tooltipsAndPopoversDemo" @dismiss="() => { tooltipsAndPopoversDemo = false }">
640+
<CModal :visible="tooltipsAndPopoversDemo" @close="() => { tooltipsAndPopoversDemo = false }">
641641
<CModalHeader>
642642
<CModalTitle>Modal title</CModalTitle>
643643
</CModalHeader>
@@ -661,7 +661,7 @@ Add `alignment="center` to `<CModal>` to vertically center the modal.
661661
``` vue
662662
<template>
663663
<CButton color="primary" @click="() => { tooltipsAndPopoversDemo = true }">Launch demo modal</CButton>
664-
<CModal :visible="tooltipsAndPopoversDemo" @dismiss="() => { tooltipsAndPopoversDemo = false }">
664+
<CModal :visible="tooltipsAndPopoversDemo" @close="() => { tooltipsAndPopoversDemo = false }">
665665
<CModalHeader>
666666
<CModalTitle>Modal title</CModalTitle>
667667
</CModalHeader>
@@ -734,23 +734,23 @@ Modals have three optional sizes, available via modifier classes to be placed on
734734
<CButton color="primary" @click="() => { xlDemo = true }">Extra large modal</CButton>
735735
<CButton color="primary" @click="() => { lgDemo = true }">Large modal</CButton>
736736
<CButton color="primary" @click="() => { smDemo = true }">Small modal</CButton>
737-
<CModal size="xl" :visible="xlDemo" @dismiss="() => { xlDemo = false }">
737+
<CModal size="xl" :visible="xlDemo" @close="() => { xlDemo = false }">
738738
<CModalHeader>
739739
<CModalTitle>Extra large modal</CModalTitle>
740740
</CModalHeader>
741741
<CModalBody>
742742
...
743743
</CModalBody>
744744
</CModal>
745-
<CModal size="lg" :visible="lgDemo" @dismiss="() => { lgDemo = false }">
745+
<CModal size="lg" :visible="lgDemo" @close="() => { lgDemo = false }">
746746
<CModalHeader>
747747
<CModalTitle>Large modal</CModalTitle>
748748
</CModalHeader>
749749
<CModalBody>
750750
...
751751
</CModalBody>
752752
</CModal>
753-
<CModal size="sm" :visible="smDemo" @dismiss="() => { smDemo = false }">
753+
<CModal size="sm" :visible="smDemo" @close="() => { smDemo = false }">
754754
<CModalHeader>
755755
<CModalTitle>Small modal</CModalTitle>
756756
</CModalHeader>
@@ -764,23 +764,23 @@ Modals have three optional sizes, available via modifier classes to be placed on
764764
<CButton color="primary" @click="() => { xlDemo = true }">Extra large modal</CButton>
765765
<CButton color="primary" @click="() => { lgDemo = true }">Large modal</CButton>
766766
<CButton color="primary" @click="() => { smDemo = true }">Small modal</CButton>
767-
<CModal size="xl" :visible="xlDemo" @dismiss="() => { xlDemo = false }">
767+
<CModal size="xl" :visible="xlDemo" @close="() => { xlDemo = false }">
768768
<CModalHeader>
769769
<CModalTitle>Extra large modal</CModalTitle>
770770
</CModalHeader>
771771
<CModalBody>
772772
...
773773
</CModalBody>
774774
</CModal>
775-
<CModal size="lg" :visible="lgDemo" @dismiss="() => { lgDemo = false }">
775+
<CModal size="lg" :visible="lgDemo" @close="() => { lgDemo = false }">
776776
<CModalHeader>
777777
<CModalTitle>Large modal</CModalTitle>
778778
</CModalHeader>
779779
<CModalBody>
780780
...
781781
</CModalBody>
782782
</CModal>
783-
<CModal size="sm" :visible="smDemo" @dismiss="() => { smDemo = false }">
783+
<CModal size="sm" :visible="smDemo" @close="() => { smDemo = false }">
784784
<CModalHeader>
785785
<CModalTitle>Small modal</CModalTitle>
786786
</CModalHeader>
@@ -848,47 +848,47 @@ Another override is the option to pop up a modal that covers the user viewport,
848848
<CButton color="primary" @click="() => { fullscreenLgDemo = true }">Full screen below lg</CButton>
849849
<CButton color="primary" @click="() => { fullscreenXlDemo = true }">Full screen below xl</CButton>
850850
<CButton color="primary" @click="() => { fullscreenXxlDemo = true }">Full screen below xxl</CButton>
851-
<CModal fullscreen :visible="fullscreenDemo" @dismiss="() => { fullscreenDemo = false }">
851+
<CModal fullscreen :visible="fullscreenDemo" @close="() => { fullscreenDemo = false }">
852852
<CModalHeader>
853853
<CModalTitle>Full screen</CModalTitle>
854854
</CModalHeader>
855855
<CModalBody>
856856
...
857857
</CModalBody>
858858
</CModal>
859-
<CModal fullscreen="sm" :visible="fullscreenSmDemo" @dismiss="() => { fullscreenSmDemo = false }">
859+
<CModal fullscreen="sm" :visible="fullscreenSmDemo" @close="() => { fullscreenSmDemo = false }">
860860
<CModalHeader>
861861
<CModalTitle>Full screen below sm</CModalTitle>
862862
</CModalHeader>
863863
<CModalBody>
864864
...
865865
</CModalBody>
866866
</CModal>
867-
<CModal fullscreen="md" :visible="fullscreenMdDemo" @dismiss="() => { fullscreenMdDemo = false }">
867+
<CModal fullscreen="md" :visible="fullscreenMdDemo" @close="() => { fullscreenMdDemo = false }">
868868
<CModalHeader>
869869
<CModalTitle>Full screen below md</CModalTitle>
870870
</CModalHeader>
871871
<CModalBody>
872872
...
873873
</CModalBody>
874874
</CModal>
875-
<CModal fullscreen="lg" :visible="fullscreenLgDemo" @dismiss="() => { fullscreenLgDemo = false }">
875+
<CModal fullscreen="lg" :visible="fullscreenLgDemo" @close="() => { fullscreenLgDemo = false }">
876876
<CModalHeader>
877877
<CModalTitle>Full screen below lg</CModalTitle>
878878
</CModalHeader>
879879
<CModalBody>
880880
...
881881
</CModalBody>
882882
</CModal>
883-
<CModal fullscreen="xl" :visible="fullscreenXlDemo" @dismiss="() => { fullscreenXlDemo = false }">
883+
<CModal fullscreen="xl" :visible="fullscreenXlDemo" @close="() => { fullscreenXlDemo = false }">
884884
<CModalHeader>
885885
<CModalTitle>Full screen below xl</CModalTitle>
886886
</CModalHeader>
887887
<CModalBody>
888888
...
889889
</CModalBody>
890890
</CModal>
891-
<CModal fullscreen="xxl" :visible="fullscreenXxlDemo" @dismiss="() => { fullscreenXxlDemo = false }">
891+
<CModal fullscreen="xxl" :visible="fullscreenXxlDemo" @close="() => { fullscreenXxlDemo = false }">
892892
<CModalHeader>
893893
<CModalTitle>Full screen below xxl</CModalTitle>
894894
</CModalHeader>
@@ -905,47 +905,47 @@ Another override is the option to pop up a modal that covers the user viewport,
905905
<CButton color="primary" @click="() => { fullscreenLgDemo = true }">Full screen below lg</CButton>
906906
<CButton color="primary" @click="() => { fullscreenXlDemo = true }">Full screen below xl</CButton>
907907
<CButton color="primary" @click="() => { fullscreenXxlDemo = true }">Full screen below xxl</CButton>
908-
<CModal fullscreen :visible="fullscreenDemo" @dismiss="() => { fullscreenDemo = false }">
908+
<CModal fullscreen :visible="fullscreenDemo" @close="() => { fullscreenDemo = false }">
909909
<CModalHeader>
910910
<CModalTitle>Full screen</CModalTitle>
911911
</CModalHeader>
912912
<CModalBody>
913913
...
914914
</CModalBody>
915915
</CModal>
916-
<CModal fullscreen="sm" :visible="fullscreenSmDemo" @dismiss="() => { fullscreenSmDemo = false }">
916+
<CModal fullscreen="sm" :visible="fullscreenSmDemo" @close="() => { fullscreenSmDemo = false }">
917917
<CModalHeader>
918918
<CModalTitle>Full screen below sm</CModalTitle>
919919
</CModalHeader>
920920
<CModalBody>
921921
...
922922
</CModalBody>
923923
</CModal>
924-
<CModal fullscreen="md" :visible="fullscreenMdDemo" @dismiss="() => { fullscreenMdDemo = false }">
924+
<CModal fullscreen="md" :visible="fullscreenMdDemo" @close="() => { fullscreenMdDemo = false }">
925925
<CModalHeader>
926926
<CModalTitle>Full screen below md</CModalTitle>
927927
</CModalHeader>
928928
<CModalBody>
929929
...
930930
</CModalBody>
931931
</CModal>
932-
<CModal fullscreen="lg" :visible="fullscreenLgDemo" @dismiss="() => { fullscreenLgDemo = false }">
932+
<CModal fullscreen="lg" :visible="fullscreenLgDemo" @close="() => { fullscreenLgDemo = false }">
933933
<CModalHeader>
934934
<CModalTitle>Full screen below lg</CModalTitle>
935935
</CModalHeader>
936936
<CModalBody>
937937
...
938938
</CModalBody>
939939
</CModal>
940-
<CModal fullscreen="xl" :visible="fullscreenXlDemo" @dismiss="() => { fullscreenXlDemo = false }">
940+
<CModal fullscreen="xl" :visible="fullscreenXlDemo" @close="() => { fullscreenXlDemo = false }">
941941
<CModalHeader>
942942
<CModalTitle>Full screen below xl</CModalTitle>
943943
</CModalHeader>
944944
<CModalBody>
945945
...
946946
</CModalBody>
947947
</CModal>
948-
<CModal fullscreen="xxl" :visible="fullscreenXxlDemo" @dismiss="() => { fullscreenXxlDemo = false }">
948+
<CModal fullscreen="xxl" :visible="fullscreenXxlDemo" @close="() => { fullscreenXxlDemo = false }">
949949
<CModalHeader>
950950
<CModalTitle>Full screen below xxl</CModalTitle>
951951
</CModalHeader>

0 commit comments

Comments
 (0)