Skip to content

Commit f538b36

Browse files
mrholekmrholek
committed
docs: update StackBlitz configuration
1 parent a06b480 commit f538b36

File tree

11 files changed

+130
-118
lines changed

11 files changed

+130
-118
lines changed

‎docs/assets/js/stackblitz.js

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@
1414
import sdk from '@stackblitz/sdk'
1515
// https://gohugo.io/hugo-pipes/js/#options
1616
import {
17-
cssCdn, jsBundleCdn, jsSnippetFile
17+
cssCdn, cssProCdn, jsBundleCdn, jsProBundleCdn, jsSnippetFile
1818
} from '@params' // eslint-disable-line import/no-unresolved
1919

2020
// Open in StackBlitz logic
@@ -23,25 +23,33 @@ document.querySelectorAll('.btn-edit').forEach(btn => {
2323
const codeSnippet = event.target.closest('.docs-code-snippet')
2424
const exampleEl = codeSnippet.querySelector('.docs-example')
2525
const title = document.querySelector('.docs-title')
26+
const highlight = event.target.closest('.docs-code-snippet').querySelector('.highlight').textContent.trimEnd()
27+
const isPro = codeSnippet.querySelector('.btn-edit').getAttribute('data-sb-pro')
28+
const addDayJs = codeSnippet.querySelector('.btn-edit').getAttribute('data-sb-dayjs')
2629

27-
const htmlSnippet = exampleEl.innerHTML
30+
const htmlSnippet = isPro ? highlight : exampleEl.innerHTML
2831
const jsSnippet = codeSnippet.querySelector('.btn-edit').getAttribute('data-sb-js-snippet')
2932
// Get extra classes for this example
3033
const classes = Array.from(exampleEl.classList).join(' ')
3134

32-
openCoreUISnippet(htmlSnippet, jsSnippet, classes, title)
35+
openCoreUISnippet(htmlSnippet, jsSnippet, classes, title, isPro, addDayJs)
3336
})
3437
})
3538

36-
const openCoreUISnippet = (htmlSnippet, jsSnippet, classes, title) => {
39+
const openCoreUISnippet = (htmlSnippet, jsSnippet, classes, title, pro, addDayJs) => {
3740
const indexHtml = `<!doctype html>
3841
<html lang="en">
3942
<head>
4043
<meta charset="utf-8">
4144
<meta name="viewport" content="width=device-width, initial-scale=1">
42-
<link href="${cssCdn}" rel="stylesheet">
45+
<link href="${pro ? cssProCdn : cssCdn}" rel="stylesheet">
4346
<title>CoreUI ${title.innerHTML} Example</title>
44-
<${'script'} defer src="${jsBundleCdn}"></${'script'}>
47+
<${'script'} defer src="${pro ? jsProBundleCdn : jsBundleCdn}"></${'script'}>
48+
${addDayJs ?
49+
`<script defer src="https://cdn.jsdelivr.net/npm/dayjs@1/dayjs.min.js"></script>
50+
<script defer src="https://cdn.jsdelivr.net/npm/dayjs@1/plugin/customParseFormat.js"></script>
51+
<script defer src="https://cdn.jsdelivr.net/npm/dayjs@1/locale/es.js"></script>` :
52+
''}
4553
</head>
4654
<body class="p-3 m-0 border-0 ${classes}">
4755
<!-- Example Code Start-->

‎docs/content/components/calendar.md

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ Explore the Bootstrap 5 Calendar component's basic usage through sample code sni
1717

1818
Select specific days using the Bootstrap Calendar component. The example below shows basic usage.
1919

20-
{{< example >}}
20+
{{< example stackblitz_pro="true" >}}
2121
<div class="d-flex justify-content-center">
2222
<div
2323
class="border rounded"
@@ -32,7 +32,7 @@ Select specific days using the Bootstrap Calendar component. The example below s
3232

3333
Set the `data-coreui-selection-type` to `week` to enable selection of entire week. You can also use `data-coreui-show-week-number="true"` to show week numbers.
3434

35-
{{< example >}}
35+
{{< example stackblitz_pro="true" >}}
3636
<div class="d-flex justify-content-center">
3737
<div
3838
class="border rounded"
@@ -49,7 +49,7 @@ Set the `data-coreui-selection-type` to `week` to enable selection of entire wee
4949

5050
Set the `data-coreui-selection-type` to `month` to enable selection of entire months.
5151

52-
{{< example >}}
52+
{{< example stackblitz_pro="true" >}}
5353
<div class="d-flex justify-content-center">
5454
<div
5555
class="border rounded"
@@ -65,7 +65,7 @@ Set the `data-coreui-selection-type` to `month` to enable selection of entire mo
6565

6666
Set the `data-coreui-selection-type` to `year` to enable years range selection.
6767

68-
{{< example >}}
68+
{{< example stackblitz_pro="true" >}}
6969
<div class="d-flex justify-content-center">
7070
<div
7171
class="border rounded"
@@ -81,7 +81,7 @@ Set the `data-coreui-selection-type` to `year` to enable years range selection.
8181

8282
Display multiple calendar panels side by side by setting the `data-coreui-calendars` attribute. This can be useful for selecting ranges or comparing dates across different months.
8383

84-
{{< example >}}
84+
{{< example stackblitz_pro="true" >}}
8585
<div class="d-flex justify-content-center">
8686
<div
8787
class="border rounded"
@@ -96,7 +96,7 @@ Display multiple calendar panels side by side by setting the `data-coreui-calend
9696

9797
Enable range selection by adding `data-coreui-range="true"` to allow users to pick a start and end date. This example demonstrates how to configure the Bootstrap 5 Calendar component to handle date ranges.
9898

99-
{{< example >}}
99+
{{< example stackblitz_pro="true" >}}
100100
<div class="d-flex justify-content-center">
101101
<div
102102
class="border rounded"
@@ -120,7 +120,7 @@ The Bootstrap Calendar component includes functionality to disable specific date
120120

121121
To disable certain dates, you can provide them in an array. For date ranges, use nested arrays, where each inner array indicates a start date and an end date for that range:
122122

123-
{{< example >}}
123+
{{< example stackblitz_pro="true" stackblitz_add_js="true">}}
124124
<div class="d-flex justify-content-center">
125125
<div id="myCalendarDisabledDates" class="border rounded"></div>
126126
</div>
@@ -132,7 +132,7 @@ To disable certain dates, you can provide them in an array. For date ranges, use
132132

133133
To disable weekends, provide a function for the `disabledDates` option. Here's the method:
134134

135-
{{< example >}}
135+
{{< example stackblitz_pro="true" stackblitz_add_js="true">}}
136136
<div class="d-flex justify-content-center">
137137
<div id="myCalendarDisabledDates2" class="border rounded"></div>
138138
</div>
@@ -149,7 +149,7 @@ In the example above:
149149

150150
You can also combine specific dates and functions in the `disabledDates` array. For instance:
151151

152-
{{< example >}}
152+
{{< example stackblitz_pro="true" stackblitz_add_js="true">}}
153153
<div class="d-flex justify-content-center">
154154
<div id="myCalendarDisabledDates3" class="border rounded"></div>
155155
</div>
@@ -171,7 +171,7 @@ The CoreUI Bootstrap Calendar allows users to display dates in non-English local
171171

172172
By default, the Calendar component uses the browser's default locale. However, you can easily configure it to use a different locale supported by the JavaScript Internationalization API. This feature helps create inclusive and accessible applications for a diverse audience.
173173

174-
{{< example >}}
174+
{{< example stackblitz_pro="true" >}}
175175
<div class="d-flex justify-content-center">
176176
<div class="border rounded" data-coreui-toggle="calendar"></div>
177177
</div>
@@ -181,7 +181,7 @@ By default, the Calendar component uses the browser's default locale. However, y
181181

182182
Here is an example of the Bootstrap Calendar component with Chinese locale settings.
183183

184-
{{< example >}}
184+
{{< example stackblitz_pro="true" >}}
185185
<div class="d-flex justify-content-center">
186186
<div class="border rounded" data-coreui-locale="zh-CN" data-coreui-toggle="calendar"></div>
187187
</div>
@@ -191,7 +191,7 @@ Here is an example of the Bootstrap Calendar component with Chinese locale setti
191191

192192
Below is an example of the Calendar component with Japanese locale settings.
193193

194-
{{< example >}}
194+
{{< example stackblitz_pro="true" >}}
195195
<div class="d-flex justify-content-center">
196196
<div class="border rounded" data-coreui-locale="ja" data-coreui-toggle="calendar"></div>
197197
</div>
@@ -201,7 +201,7 @@ Below is an example of the Calendar component with Japanese locale settings.
201201

202202
Here is an example of the Calendar component with Korean locale settings.
203203

204-
{{< example >}}
204+
{{< example stackblitz_pro="true" >}}
205205
<div class="d-flex justify-content-center" dir="rtl">
206206
<div class="border rounded" data-coreui-locale="ko" data-coreui-toggle="calendar"></div>
207207
</div>
@@ -215,7 +215,7 @@ RTL support is built-in and can be explicitly controlled through the `$enable-rt
215215

216216
Example of the Calendar component with RTL support, using the Hebrew locale.
217217

218-
{{< example >}}
218+
{{< example stackblitz_pro="true" >}}
219219
<div class="d-flex justify-content-center" dir="rtl">
220220
<div class="border rounded" data-coreui-locale="he-IL" data-coreui-toggle="calendar"></div>
221221
</div>
@@ -225,7 +225,7 @@ Example of the Calendar component with RTL support, using the Hebrew locale.
225225

226226
Example of the Bootstrap Calendar component with Persian locale settings.
227227

228-
{{< example >}}
228+
{{< example stackblitz_pro="true" >}}
229229
<div class="d-flex justify-content-center">
230230
<div class="border rounded" data-coreui-locale="fa-IR" data-coreui-toggle="calendar"></div>
231231
</div>

‎docs/content/components/loading-buttons.md

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ other_frameworks: loading-button
1414

1515
Create basic Bootstrap Loading Buttons with different styles: primary, outline, and ghost. These buttons show a loading state when clicked.
1616

17-
{{< example >}}
17+
{{< example stackblitz_pro="true" >}}
1818
<button type="button" class="btn btn-primary" data-coreui-timeout="2000" data-coreui-toggle="loading-button">Submit</button>
1919
<button type="button" class="btn btn-outline-primary" data-coreui-toggle="loading-button">Submit</button>
2020
<button type="button" class="btn btn-ghost-primary" data-coreui-toggle="loading-button">Submit</button>
@@ -26,7 +26,7 @@ Create basic Bootstrap Loading Buttons with different styles: primary, outline,
2626

2727
The default option. Use loading buttons with a border spinner to indicate loading status.
2828

29-
{{< example >}}
29+
{{< example stackblitz_pro="true" >}}
3030
<button type="button" class="btn btn-info" data-coreui-toggle="loading-button">Submit</button>
3131
<button type="button" class="btn btn-outline-success" data-coreui-toggle="loading-button">Submit</button>
3232
<button type="button" class="btn btn-ghost-warning" data-coreui-toggle="loading-button">Submit</button>
@@ -36,7 +36,7 @@ The default option. Use loading buttons with a border spinner to indicate loadin
3636

3737
Switch to a grow spinner for Bootstrap loading buttons by adding `data-coreui-spinner-type="grow"`.
3838

39-
{{< example >}}
39+
{{< example stackblitz_pro="true" >}}
4040
<button type="button" class="btn btn-info" data-coreui-spinner-type="grow" data-coreui-toggle="loading-button">Submit</button>
4141
<button type="button" class="btn btn-outline-success" data-coreui-spinner-type="grow" data-coreui-toggle="loading-button">Submit</button>
4242
<button type="button" class="btn btn-ghost-warning" data-coreui-spinner-type="grow" data-coreui-toggle="loading-button">Submit</button>

‎docs/content/forms/date-picker.md

Lines changed: 19 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ Below is an example of a basic Bootstrap DatePicker.
1818

1919
The following examples demonstrating how to pick dates using the Bootstrap Date Picker Component.
2020

21-
{{< example >}}
21+
{{< example stackblitz_pro="true" >}}
2222
<div class="row">
2323
<div class="col-sm-6 col-lg-5 mb-3 mb-sm-0">
2424
<div data-coreui-locale="en-US" data-coreui-toggle="date-picker"></div>
@@ -33,7 +33,7 @@ The following examples demonstrating how to pick dates using the Bootstrap Date
3333

3434
In addition to supporting date selection, our Bootstrap Date Picker component also includes a Time Picker feature, allowing users to select a specific time of day. Bootstrap Time Picker can be enabled by adding `data-coreui-timepicker="true"`.
3535

36-
{{< example >}}
36+
{{< example stackblitz_pro="true" >}}
3737
<div class="row">
3838
<div class="col-sm-6 col-lg-5 mb-3 mb-sm-0">
3939
<div data-coreui-locale="en-US" data-coreui-timepicker="true" data-coreui-toggle="date-picker"></div>
@@ -48,7 +48,7 @@ In addition to supporting date selection, our Bootstrap Date Picker component al
4848

4949
To add a footer, use `data-coreui-footer="true"`. The footer can display extra information or actions related to the selected date, such as buttons for "Today" or "Clear".
5050

51-
{{< example >}}
51+
{{< example stackblitz_pro="true" >}}
5252
<div class="row">
5353
<div class="col-sm-6 col-lg-5 mb-3 mb-sm-0">
5454
<div data-coreui-footer="true" data-coreui-locale="en-US" data-coreui-toggle="date-picker"></div>
@@ -63,7 +63,7 @@ To add a footer, use `data-coreui-footer="true"`. The footer can display extra i
6363

6464
If you want to select the week number, add the `data-coreui-selection-type="week"` attribute. You can also use `data-coreui-show-week-number="true"` to show week numbers.
6565

66-
{{< example >}}
66+
{{< example stackblitz_pro="true" >}}
6767
<div class="row">
6868
<div class="col-sm-6 col-lg-5 mb-3 mb-sm-0">
6969
<div
@@ -89,7 +89,7 @@ If you want to select the week number, add the `data-coreui-selection-type="week
8989

9090
Selecting whole month by adding the `data-coreui-selection-type="month"` attribute.
9191

92-
{{< example >}}
92+
{{< example stackblitz_pro="true" >}}
9393
<div class="row">
9494
<div class="col-sm-6 col-lg-5 mb-3 mb-sm-0">
9595
<div
@@ -113,7 +113,7 @@ Selecting whole month by adding the `data-coreui-selection-type="month"` attribu
113113

114114
Add the `data-coreui-selection-type="year"` attribute to allow pick years.
115115

116-
{{< example >}}
116+
{{< example stackblitz_pro="true" >}}
117117
<div class="row">
118118
<div class="col-sm-6 col-lg-5 mb-3 mb-sm-0">
119119
<div
@@ -137,7 +137,7 @@ Add the `data-coreui-selection-type="year"` attribute to allow pick years.
137137

138138
Set heights using `data-coreui-size` attribute like `data-coreui-size="lg"` and `data-coreui-size="sm"`.
139139

140-
{{< example >}}
140+
{{< example stackblitz_pro="true" >}}
141141
<div class="row mb-3">
142142
<div class="col-lg-5">
143143
<div data-coreui-locale="en-US" data-coreui-size="lg" data-coreui-toggle="date-picker"></div>
@@ -154,7 +154,7 @@ Set heights using `data-coreui-size` attribute like `data-coreui-size="lg"` and
154154

155155
Add the `data-coreui-disabled="true"` attribute on an input to give it a grayed out appearance and remove pointer events.
156156

157-
{{< example >}}
157+
{{< example stackblitz_pro="true" >}}
158158
<div class="row">
159159
<div class="col-lg-5">
160160
<div data-coreui-disabled="true" data-coreui-locale="en-US" data-coreui-toggle="date-picker"></div>
@@ -166,7 +166,7 @@ Add the `data-coreui-disabled="true"` attribute on an input to give it a grayed
166166

167167
Add the `data-coreui-input-read-only="true"` boolean attribute to prevent modification of the input's value.
168168

169-
{{< example >}}
169+
{{< example stackblitz_pro="true" >}}
170170
<div class="row">
171171
<div class="col-lg-5">
172172
<div data-coreui-input-read-only="true" data-coreui-locale="en-US" data-coreui-toggle="date-picker"></div>
@@ -178,7 +178,7 @@ Add the `data-coreui-input-read-only="true"` boolean attribute to prevent modifi
178178

179179
The CoreUI Bootstrap DatePicker component allows you to disable certain dates, such as weekends or holidays. You can accomplish this by passing the `disabledDates` option to the component, which determines which dates should be disabled based on custom logic.
180180

181-
{{< example >}}
181+
{{< example stackblitz_pro="true" stackblitz_add_js="true">}}
182182
<div class="row">
183183
<div class="col-lg-5">
184184
<div id="myDatePickerDisabledDates"></div>
@@ -192,7 +192,7 @@ The CoreUI Bootstrap DatePicker component allows you to disable certain dates, s
192192

193193
You can disable weekends by passing a function to the `disabledDates` option. Here's how to do it:
194194

195-
{{< example >}}
195+
{{< example stackblitz_pro="true" stackblitz_add_js="true">}}
196196
<div class="row">
197197
<div class="col-lg-5">
198198
<div id="myDatePickerDisabledDates2"></div>
@@ -210,7 +210,7 @@ CoreUI Date Picker allows users to display dates and times in a non-English loca
210210

211211
By default, the DatePicker component uses the default browser locale, but it can be easily configured to use a different locale supported by the JavaScript Internationalization API. To set the locale, you can pass the desired language code as a prop to the DatePicker component. This feature enables the creation of more inclusive and accessible applications that cater to a diverse audience.
212212

213-
{{< example >}}
213+
{{< example stackblitz_pro="true" >}}
214214
<div class="row">
215215
<div class="col-lg-5">
216216
<div data-coreui-toggle="date-picker"></div>
@@ -222,7 +222,7 @@ By default, the DatePicker component uses the default browser locale, but it can
222222

223223
Here is an example of a simple Bootstrap Date Picker with Chinese locales.
224224

225-
{{< example >}}
225+
{{< example stackblitz_pro="true" >}}
226226
<div class="row">
227227
<div class="col-lg-5">
228228
<div data-coreui-locale="zh-CN" data-coreui-placeholder="入住日期" data-coreui-toggle="date-picker"></div>
@@ -234,7 +234,7 @@ Here is an example of a simple Bootstrap Date Picker with Chinese locales.
234234

235235
Here is a basic Date Picker with Japanese locales.
236236

237-
{{< example >}}
237+
{{< example stackblitz_pro="true" >}}
238238
<div class="row">
239239
<div class="col-lg-5">
240240
<div data-coreui-locale="ja" data-coreui-placeholder="日付を選択" data-coreui-toggle="date-picker"></div>
@@ -246,7 +246,7 @@ Here is a basic Date Picker with Japanese locales.
246246

247247
Take a look at the following example, which demonstrates a simple date picker designed to work with Korean locales.
248248

249-
{{< example >}}
249+
{{< example stackblitz_pro="true" >}}
250250
<div class="row">
251251
<div class="col-lg-5">
252252
<div data-coreui-locale="ko" data-coreui-placeholder="날짜 선택" data-coreui-toggle="date-picker"></div>
@@ -260,7 +260,7 @@ RTL support is built-in and can be explicitly controlled through the `$enable-rt
260260

261261
### Hebrew
262262

263-
{{< example >}}
263+
{{< example stackblitz_pro="true" >}}
264264
<div class="row" dir="rtl">
265265
<div class="col-lg-5">
266266
<div data-coreui-locale="he-IL" data-coreui-placeholder="בחר תאריך" data-coreui-toggle="date-picker"></div>
@@ -270,7 +270,7 @@ RTL support is built-in and can be explicitly controlled through the `$enable-rt
270270

271271
### Persian
272272

273-
{{< example >}}
273+
{{< example stackblitz_pro="true" >}}
274274
<div class="row" dir="rtl">
275275
<div class="col-lg-5">
276276
<div data-coreui-locale="fa-IR" data-coreui-placeholder="تاریخ شروع" data-coreui-toggle="date-picker"></div>
@@ -287,7 +287,7 @@ The provided code demonstrates how to use the `inputDateFormat` and `inputDatePa
287287
The `inputDateFormat` property formats the date into a custom string, while the `inputDateParse` property parses a custom string into a Date object. The code showcases the date range in different formats based on locale, such as 'MMMM DD, YYYY' and 'YYYY MMMM DD', and accommodates different locales, like 'en-US' and 'es-ES'.
288288

289289

290-
{{< example >}}
290+
{{< example stackblitz_pro="true" stackblitz_dayjs="true" stackblitz_add_js="true">}}
291291
<div class="row">
292292
<div class="col-lg-5">
293293
<div id="myDatePickerCustomFormats1"></div>
@@ -305,7 +305,7 @@ The `inputDateFormat` property formats the date into a custom string, while the
305305

306306
To use localized dates, we need to additionally add locale files, in this case, Spanish:
307307

308-
{{< example >}}
308+
{{< example stackblitz_pro="true" stackblitz_dayjs="true" stackblitz_add_js="true">}}
309309
<div class="row">
310310
<div class="col-lg-5">
311311
<div id="myDatePickerCustomFormats2"></div>

0 commit comments

Comments
 (0)