Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

Commit 766700b

Browse filesBrowse files
mrholekmrholek
committed
docs: migrate examples to <script setup> 
1 parent 7cc0c88 commit 766700b
Copy full SHA for 766700b

15 files changed

+904
-1262
lines changed

‎packages/docs/components/alert.md

Copy file name to clipboardExpand all lines: packages/docs/components/alert.md
+55-53Lines changed: 55 additions & 53 deletions
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,8 @@ Vue Alert is prepared for any length of text, as well as an optional close butto
1919
<CAlert color="light">A simple light alert—check it out!</CAlert>
2020
<CAlert color="dark">A simple dark alert—check it out!</CAlert>
2121
:::
22-
```markup
22+
23+
```vue
2324
<CAlert color="primary">A simple primary alert—check it out!</CAlert>
2425
<CAlert color="secondary">A simple secondary alert—check it out!</CAlert>
2526
<CAlert color="success">A simple success alert—check it out!</CAlert>
@@ -38,42 +39,49 @@ Click the button below to show an alert (hidden with inline styles to start), th
3839
<CAlert color="primary" :visible="liveExampleVisible" dismissible @close="() => { liveExampleVisible = false }">A simple primary alert—check it out!</CAlert>
3940
<CButton color="primary" @click="() => { liveExampleVisible = true }">Show live alert</CButton>
4041
:::
41-
```markup
42-
<CAlert color="primary" :visible="liveExampleVisible" dismissible @close="() => { liveExampleVisible = false }">A simple primary alert—check it out!</CAlert>
43-
<CButton color="primary" @click="() => { liveExampleVisible = true }">Show live alert</CButton>
42+
43+
```vue
44+
<script setup>
45+
import { ref } from 'vue'
46+
const liveExampleVisible = ref(false)
47+
</script>
48+
<template>
49+
<CAlert color="primary" :visible="liveExampleVisible" dismissible @close="() => { liveExampleVisible = false }">A simple primary alert—check it out!</CAlert>
50+
<CButton color="primary" @click="() => { liveExampleVisible = true }">Show live alert</CButton>
51+
</template>
4452
```
4553

4654
### Link color
4755

4856
Use the `<CAlertLink>` component to immediately give matching colored links inside any alert.
4957
::: demo
5058
<CAlert color="primary">
51-
A simple primary alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
59+
A simple primary alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
5260
</CAlert>
5361
<CAlert color="secondary">
54-
A simple secondary alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
62+
A simple secondary alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
5563
</CAlert>
5664
<CAlert color="success">
57-
A simple success alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
65+
A simple success alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
5866
</CAlert>
5967
<CAlert color="danger">
60-
A simple danger alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
68+
A simple danger alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
6169
</CAlert>
6270
<CAlert color="warning">
63-
A simple warning alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
71+
A simple warning alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
6472
</CAlert>
6573
<CAlert color="info">
66-
A simple info alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
74+
A simple info alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
6775
</CAlert>
6876
<CAlert color="light">
69-
A simple light alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
77+
A simple light alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
7078
</CAlert>
7179
<CAlert color="dark">
72-
A simple dark alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
80+
A simple dark alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
7381
</CAlert>
7482
:::
7583

76-
```markup
84+
```vue
7785
<CAlert color="primary">
7886
A simple primary alert with <CAlertLink href="#">an example link</CAlertLink>. Give it a click if you like.
7987
</CAlert>
@@ -106,36 +114,39 @@ Alert can also incorporate supplementary HTML elements like heading, paragraph,
106114

107115
::: demo
108116
<CAlert color="success">
109-
<CAlertHeading>Well done!</CAlertHeading>
117+
<CAlertHeading>Well done!</CAlertHeading>
118+
110119
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
111120
<hr />
112121
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
113122
</CAlert>
114123
:::
115124

116-
```markup
125+
```vue
117126
<CAlert color="success" v-bind:visible="true">
118127
<CAlertHeading>Well done!</CAlertHeading>
119128
<p>Aww yeah, you successfully read this important alert message. This example text is going to run a bit longer so that you can see how spacing within an alert works with this kind of content.</p>
120129
<hr />
121130
<p class="mb-0">Whenever you need to, be sure to use margin utilities to keep things nice and tidy.</p>
122131
</CAlert>
123132
```
133+
124134
### Icons
125135

126136
Similarly, you can use [flexbox utilities](https//coreui.io/docs/4.0/utilities/flex") and [CoreUI Icons](https://icons.coreui.io) to create alerts with icons. Depending on your icons and content, you may want to add more utilities or custom styles.
127137

128138
::: demo
129139
<CAlert color="primary" class="d-flex align-items-center">
130-
<svg class="flex-shrink-0 me-2" width="24" height="24" viewBox="0 0 512 512">
131-
<rect width="32" height="176" x="240" y="176" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect><rect width="32" height="32" x="240" y="384" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect><path fill="var(--ci-primary-color, currentColor)" d="M274.014,16H237.986L16,445.174V496H496V445.174ZM464,464H48V452.959L256,50.826,464,452.959Z" class="ci-primary"></path>
132-
</svg>
140+
<svg class="flex-shrink-0 me-2" width="24" height="24" viewBox="0 0 512 512">
141+
<rect width="32" height="176" x="240" y="176" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect><rect width="32" height="32" x="240" y="384" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect><path fill="var(--ci-primary-color, currentColor)" d="M274.014,16H237.986L16,445.174V496H496V445.174ZM464,464H48V452.959L256,50.826,464,452.959Z" class="ci-primary"></path>
142+
</svg>
143+
133144
<div>
134145
An example alert with an icon
135146
</div>
136147
</CAlert>
137148
:::
138-
```markup
149+
```vue
139150
<CAlert color="primary" class="d-flex align-items-center">
140151
<svg class="flex-shrink-0 me-2" width="24" height="24" viewBox="0 0 512 512">
141152
<rect width="32" height="176" x="240" y="176" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect><rect width="32" height="32" x="240" y="384" fill="var(--ci-primary-color, currentColor)" class="ci-primary"></rect><path fill="var(--ci-primary-color, currentColor)" d="M274.014,16H237.986L16,445.174V496H496V445.174ZM464,464H48V452.959L256,50.826,464,452.959Z" class="ci-primary"></path>
@@ -150,7 +161,8 @@ Need more than one icon for your alerts? Consider using [CoreUI Icons](https://i
150161

151162
::: demo
152163
<CAlert color="primary" class="d-flex align-items-center">
153-
<CIcon icon="cil-info" class="flex-shrink-0 me-2" width="24" height="24" />
164+
<CIcon icon="cil-info" class="flex-shrink-0 me-2" width="24" height="24" />
165+
154166
<div>
155167
An example alert with an icon
156168
</div>
@@ -174,7 +186,7 @@ Need more than one icon for your alerts? Consider using [CoreUI Icons](https://i
174186
</div>
175187
</CAlert>
176188
:::
177-
```markup
189+
```vue
178190
<CAlert color="primary" class="d-flex align-items-center">
179191
<CIcon icon="cil-info" class="flex-shrink-0 me-2" width="24" height="24" />
180192
<div>
@@ -216,7 +228,7 @@ Use `variant="solid"` to change contextual colors to solid.
216228
<CAlert color="dark" variant="solid">A simple solid dark alert—check it out!</CAlert>
217229
:::
218230

219-
```markup
231+
```vue
220232
<CAlert color="primary" variant="solid">A simple solid primary alert—check it out!</CAlert>
221233
<CAlert color="secondary" variant="solid">A simple solid secondary alert—check it out!</CAlert>
222234
<CAlert color="success" variant="solid">A simple solid success alert—check it out!</CAlert>
@@ -232,42 +244,24 @@ Use `variant="solid"` to change contextual colors to solid.
232244
Alerts can also be easily dismissed. Just add the `dismissible` prop.
233245

234246
::: demo
235-
<CAlert color="warning" dismissible @close="alert">
247+
<CAlert color="warning" dismissible @close="message">
236248
<strong>Go right ahead</strong> and click that dimiss over there on the right.
237249
</CAlert>
238250
:::
239251

240-
```markup
241-
<CAlert color="warning" dismissible @close="alert">
242-
<strong>Go right ahead</strong> and click that dimiss over there on the right.
243-
</CAlert>
244-
245-
<script>
246-
export default {
247-
methods: {
248-
alert () {
249-
alert("👋 Well, hi there! Thanks for dismissing me.")
250-
},
251-
}
252+
```vue
253+
<script setup>
254+
const message = () => {
255+
alert("👋 Well, hi there! Thanks for dismissing me.")
252256
}
253257
</script>
258+
<template>
259+
<CAlert color="warning" dismissible @close="message">
260+
<strong>Go right ahead</strong> and click that dimiss over there on the right.
261+
</CAlert>
262+
</template>
254263
```
255264

256-
<script>
257-
export default {
258-
data() {
259-
return {
260-
liveExampleVisible: false,
261-
}
262-
},
263-
methods: {
264-
alert () {
265-
alert("👋 Well, hi there! Thanks for dismissing me.")
266-
},
267-
}
268-
}
269-
</script>
270-
271265
## Customizing
272266

273267
### CSS variables
@@ -279,9 +273,9 @@ Vue alerts use local CSS variables on `.alert` for enhanced real-time customizat
279273
#### How to use CSS variables
280274

281275
```js
282-
const vars = {
276+
const vars = {
283277
'--my-css-var': 10,
284-
'--my-another-css-var': "red"
278+
'--my-another-css-var': "red"
285279
}
286280
return <CAlert :style="vars">...</CAlert>
287281
```
@@ -294,4 +288,12 @@ return <CAlert :style="vars">...</CAlert>
294288

295289
!!!include(./api/alert/CAlert.api.md)!!!
296290

297-
!!!include(./api/alert/CAlertHeading.api.md)!!!
291+
!!!include(./api/alert/CAlertHeading.api.md)!!!
292+
293+
<script setup>
294+
import { ref } from 'vue'
295+
const liveExampleVisible = ref(false)
296+
const message = () => {
297+
alert("👋 Well, hi there! Thanks for dismissing me.")
298+
}
299+
</script>

‎packages/docs/components/collapse.md

Copy file name to clipboardExpand all lines: packages/docs/components/collapse.md
+23-43Lines changed: 23 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -28,6 +28,10 @@ You can use a link or a button component.
2828
</CCollapse>
2929
:::
3030
```vue
31+
<script setup>
32+
import { ref } from 'vue'
33+
const visible = ref(false)
34+
</script>
3135
<template>
3236
<CButton color="primary" href="#" @click.prevent="visible = !visible">Link</CButton>
3337
<CButton color="primary" @click="visible = !visible">Button</CButton>
@@ -41,15 +45,6 @@ You can use a link or a button component.
4145
</CCard>
4246
</CCollapse>
4347
</template>
44-
<script>
45-
export default {
46-
data() {
47-
return {
48-
visible: false,
49-
}
50-
}
51-
}
52-
</script>
5348
```
5449

5550
## Horizontal
@@ -69,6 +64,10 @@ The collapse plugin also supports horizontal collapsing. Add the `horizontal` pr
6964
</div>
7065
:::
7166
```vue
67+
<script setup>
68+
import { ref } from 'vue'
69+
const visibleHorizontal = ref(false)
70+
</script>
7271
<template>
7372
<CButton class="mb-3" color="primary" aria-expanded={visible} aria-controls="collapseWidthExample" @click="visibleHorizontal = !visibleHorizontal">Button</CButton>
7473
<div style="min-height: 120px">
@@ -81,15 +80,6 @@ The collapse plugin also supports horizontal collapsing. Add the `horizontal` pr
8180
</CCollapse>
8281
</div>
8382
</template>
84-
<script>
85-
export default {
86-
data() {
87-
return {
88-
visibleHorizontal: false,
89-
}
90-
}
91-
}
92-
</script>
9383
```
9484

9585
## Multiple targets
@@ -132,6 +122,11 @@ A `<CButton>` can show and hide multiple elements.
132122
</CRow>
133123
:::
134124
```vue
125+
<script setup>
126+
import { ref } from 'vue'
127+
const visibleA = ref(false)
128+
const visibleB = ref(false)
129+
</script>
135130
<template>
136131
<CButton color="primary" @click="visibleA = !visibleA">Toggle first element</CButton>
137132
<CButton color="primary" @click="visibleB = !visibleB">Toggle second element</CButton>
@@ -166,32 +161,17 @@ A `<CButton>` can show and hide multiple elements.
166161
</CCollapse>
167162
</CCol>
168163
</CRow>
169-
</template>
170-
<script>
171-
export default {
172-
data() {
173-
return {
174-
visibleA: false,
175-
visibleB: false,
176-
}
177-
}
178-
}
179-
</script>
164+
</template>
180165
```
181166

182-
<script>
183-
export default {
184-
data() {
185-
return {
186-
visible: false,
187-
visibleHorizontal: false,
188-
visibleA: false,
189-
visibleB: false,
190-
}
191-
}
192-
}
193-
</script>
194-
195167
## API
196168

197-
!!!include(./api/collapse/CCollapse.api.md)!!!
169+
!!!include(./api/collapse/CCollapse.api.md)!!!
170+
171+
<script setup>
172+
import { ref } from 'vue'
173+
const visible = ref(false)
174+
const visibleHorizontal = ref(false)
175+
const visibleA = ref(false)
176+
const visibleB = ref(false)
177+
</script>

0 commit comments

Comments
0 (0)
Morty Proxy This is a proxified and sanitized view of the page, visit original site.