Skip to content

Commit 354ad83

Browse files
mrholekmrholek
committed
docs: update content
1 parent 8598d2f commit 354ad83

File tree

6 files changed

+27
-176
lines changed

6 files changed

+27
-176
lines changed

‎docs/assets/js/snippets.js

Lines changed: 21 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -187,10 +187,11 @@
187187
// Multi Selects
188188
// -------------------------------
189189
// 'Multi Selects components' example in docs only
190+
// js-docs-start multi-select-array-data
190191
const myMultiSelect = document.getElementById('multiSelect')
191192

192193
if (myMultiSelect) {
193-
const cuiMultiSelect = new coreui.MultiSelect(myMultiSelect, {
194+
new coreui.MultiSelect(myMultiSelect, {
194195
name: 'multiSelect',
195196
options: [
196197
{
@@ -232,54 +233,17 @@
232233
],
233234
search: true
234235
})
235-
cuiMultiSelect.update({
236-
options: [
237-
{
238-
value: 0,
239-
text: 'Angular2'
240-
},
241-
{
242-
value: 1,
243-
text: 'Bootstrap2',
244-
selected: true
245-
},
246-
{
247-
value: 2,
248-
text: 'React.js',
249-
selected: true
250-
},
251-
{
252-
value: 3,
253-
text: 'Vue.js'
254-
},
255-
{
256-
label: 'backend',
257-
options: [
258-
{
259-
value: 4,
260-
text: 'Django'
261-
},
262-
{
263-
value: 5,
264-
text: 'Laravel'
265-
},
266-
{
267-
value: 6,
268-
text: 'Node.js',
269-
selected: true
270-
}
271-
]
272-
}
273-
]
274-
})
275236
}
237+
// js-docs-end multi-select-array-data
276238

277239
// -------------------------------
278240
// Date Pickers
279241
// -------------------------------
280242
// 'Date Pickers components' example in docs only
281243

282-
if (document.getElementById('myDatePickerDisabledDates')) {
244+
// js-docs-start date-picker-disabled-dates
245+
const myDatePickerDisabledDates = document.getElementById('myDatePickerDisabledDates')
246+
if (myDatePickerDisabledDates) {
283247
const optionsDatePickerDisabledDates = {
284248
locale: 'en-US',
285249
calendarDate: new Date(2022, 2, 1),
@@ -292,16 +256,19 @@
292256
maxDate: new Date(2022, 5, 0),
293257
minDate: new Date(2022, 1, 1)
294258
}
295-
// eslint-disable-next-line no-unused-vars
296-
const myDatePickerDisabledDates = new coreui.DatePicker(document.getElementById('myDatePickerDisabledDates'), optionsDatePickerDisabledDates)
259+
260+
new coreui.DatePicker(document.getElementById('myDatePickerDisabledDates'), optionsDatePickerDisabledDates)
297261
}
262+
// js-docs-end date-picker-disabled-dates
298263

299264
// -------------------------------
300265
// Date Range Pickers
301266
// -------------------------------
302267
// 'Date Range Pickers components' example in docs only
303268

304-
if (document.getElementById('myDateRangePickerDisabledDates')) {
269+
// js-docs-start date-range-picker-disabled-dates
270+
const myDateRangePickerDisabledDates = document.getElementById('myDateRangePickerDisabledDates')
271+
if (myDateRangePickerDisabledDates) {
305272
const optionsDateRangePickerDisabledDates = {
306273
locale: 'en-US',
307274
calendarDate: new Date(2022, 2, 1),
@@ -314,11 +281,14 @@
314281
maxDate: new Date(2022, 5, 0),
315282
minDate: new Date(2022, 1, 1)
316283
}
317-
// eslint-disable-next-line no-unused-vars
318-
const myDateRangePickerDisabledDates = new coreui.DateRangePicker(document.getElementById('myDateRangePickerDisabledDates'), optionsDateRangePickerDisabledDates)
284+
285+
new coreui.DateRangePicker(document.getElementById('myDateRangePickerDisabledDates'), optionsDateRangePickerDisabledDates)
319286
}
287+
// js-docs-end date-range-picker-disabled-dates
320288

321-
if (document.getElementById('myDateRangePickerCustomRanges')) {
289+
// js-docs-start date-range-picker-custom-ranges
290+
const myDateRangePickerCustomRanges = document.getElementById('myDateRangePickerCustomRanges')
291+
if (myDateRangePickerCustomRanges) {
322292
const optionsCustomRanges = {
323293
locale: 'en-US',
324294
ranges: {
@@ -345,7 +315,8 @@
345315
]
346316
}
347317
}
348-
// eslint-disable-next-line no-unused-vars
349-
const myDateRangePickerCustomRanges = new coreui.DateRangePicker(document.getElementById('myDateRangePickerCustomRanges'), optionsCustomRanges)
318+
319+
new coreui.DateRangePicker(myDateRangePickerCustomRanges, optionsCustomRanges)
350320
}
321+
// js-docs-end date-range-picker-custom-ranges
351322
})()

‎docs/assets/scss/docs.scss

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,9 @@ $enable-cssgrid: true;
6161
/* stylelint-disable */
6262
div[dir="rtl"] .input-group > :not(:last-child),
6363
div[dir="rtl"] .input-group > .dropdown-toggle:nth-last-child(n+3) {
64+
border-left: 0 !important;
6465
border-right: 0 !important;
66+
@include border-start-radius(0 !important);
6567
@include border-end-radius($input-border-radius !important);
6668
}
6769

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

Lines changed: 1 addition & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -98,22 +98,7 @@ Add the `data-coreui-input-read-only="true"` boolean attribute to prevent modifi
9898
</div>
9999
{{< /example >}}
100100

101-
```js
102-
const options = {
103-
locale: 'en-US',
104-
calendarDate: new Date(2022, 2, 1),
105-
disabledDates: [
106-
[new Date(2022, 2, 4), new Date(2022, 2, 7)],
107-
new Date(2022, 2, 16),
108-
new Date(2022, 3, 16),
109-
[new Date(2022, 4, 2), new Date(2022, 4, 8)]
110-
],
111-
maxDate: new Date(2022, 5, 0),
112-
minDate: new Date(2022, 1, 1)
113-
}
114-
115-
const myDatePickerDisabledDates = new coreui.DatePicker(document.getElementById('myDatePickerDisabledDates'), options)
116-
```
101+
{{< js-docs name="date-picker-disabled-dates" file="docs/assets/js/snippets.js" >}}
117102

118103
## Non-english locale
119104

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

Lines changed: 2 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -126,22 +126,7 @@ Add the `data-coreui-input-read-only="true"` boolean attribute to prevent modifi
126126
</div>
127127
{{< /example >}}
128128

129-
```js
130-
const options = {
131-
locale: 'en-US',
132-
calendarDate: new Date(2022, 2, 1),
133-
disabledDates: [
134-
[new Date(2022, 2, 4), new Date(2022, 2, 7)],
135-
new Date(2022, 2, 16),
136-
new Date(2022, 3, 16),
137-
[new Date(2022, 4, 2), new Date(2022, 4, 8)]
138-
],
139-
maxDate: new Date(2022, 5, 0),
140-
minDate: new Date(2022, 1, 1)
141-
}
142-
143-
const myDateRangePickerDisabledDates = new coreui.DateRangePicker(document.getElementById('myDateRangePickerDisabledDates'), options)
144-
```
129+
{{< js-docs name="date-range-picker-disabled-dates" file="docs/assets/js/snippets.js" >}}
145130

146131
## Custom ranges
147132

@@ -153,36 +138,7 @@ const myDateRangePickerDisabledDates = new coreui.DateRangePicker(document.getEl
153138
</div>
154139
{{< /example >}}
155140

156-
```js
157-
const optionsCustomRanges = {
158-
locale: 'en-US',
159-
ranges: {
160-
Today: [new Date(), new Date()],
161-
Yesterday: [
162-
new Date(new Date().setDate(new Date().getDate() - 1)),
163-
new Date(new Date().setDate(new Date().getDate() - 1))
164-
],
165-
'Last 7 Days': [
166-
new Date(new Date().setDate(new Date().getDate() - 6)),
167-
new Date(new Date())
168-
],
169-
'Last 30 Days': [
170-
new Date(new Date().setDate(new Date().getDate() - 29)),
171-
new Date(new Date())
172-
],
173-
'This Month': [
174-
new Date(new Date().setDate(1)),
175-
new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0)
176-
],
177-
'Last Month': [
178-
new Date(new Date().getFullYear(), new Date().getMonth() - 1, 1),
179-
new Date(new Date().getFullYear(), new Date().getMonth(), 0)
180-
]
181-
}
182-
}
183-
184-
const myDateRangePickerCustomRanges = new coreui.DateRangePicker(document.getElementById('myDateRangePickerCustomRanges'), optionsCustomRanges)
185-
```
141+
{{< js-docs name="date-range-picker-custom-ranges" file="docs/assets/js/snippets.js" >}}
186142

187143
## Non-english locale
188144

‎docs/content/forms/multi-select.md

Lines changed: 1 addition & 48 deletions
Original file line numberDiff line numberDiff line change
@@ -65,54 +65,7 @@ other_frameworks: multi-select
6565
<select id="multiSelect" name="multiSelect"></select>
6666
</div>
6767

68-
```html
69-
<select id="multiSelect"></select>
70-
71-
<script type="text/javascript">
72-
const myMultiSelect = document.querySelector('#multiSelect')
73-
const cuiMultiSelect = new coreui.MultiSelect(myMultiSelect, {
74-
options: [
75-
{
76-
value: 0,
77-
text: 'Angular'
78-
},
79-
{
80-
value: 1,
81-
text: 'Bootstrap',
82-
selected: true
83-
},
84-
{
85-
value: 2,
86-
text: 'React.js',
87-
selected: true
88-
},
89-
{
90-
value: 3,
91-
text: 'Vue.js'
92-
},
93-
{
94-
label: 'backend',
95-
options: [
96-
{
97-
value: 4,
98-
text: 'Django'
99-
},
100-
{
101-
value: 5,
102-
text: 'Laravel'
103-
},
104-
{
105-
value: 6,
106-
text: 'Node.js',
107-
selected: true
108-
}
109-
]
110-
}
111-
]
112-
})
113-
</script>
114-
```
115-
68+
{{< js-docs name="multi-select-array-data" file="docs/assets/js/snippets.js" >}}
11669
## Selection types
11770
### Text
11871

‎docs/layouts/partials/banner.html

Lines changed: 0 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,20 +5,4 @@ <h3 class="mb-4">CoreUI PRO Component</h3>
55
To use this component you must have a CoreUI PRO license. Buy the <a href="https://coreui.io/pricing/?framework=bootstrap&docs=coreui-banner-pro">CoreUI PRO</a> and get access to all PRO components, features, templates, and dedicated support.
66
</p>
77
</div>
8-
{{ else }}
9-
<div class="bg-info bg-opacity-10 border-start border-start-5 border-start-info p-4 pb-3 mb-5">
10-
<h3 class="mb-4">Support CoreUI Development</h3>
11-
<p>
12-
CoreUI is an MIT-licensed open source project and is completely free to use. However, the amount of effort needed to maintain and develop new features for the project is not sustainable without proper financial backing.
13-
</p>
14-
<p>
15-
You can support our Open Source software development in the following ways:
16-
</p>
17-
<ul>
18-
<li>Buy the <a href="https://coreui.io/pricing/?framework=bootstrap&docs=coreui-banner-free">CoreUI PRO</a> and get access to all PRO components, features, templates, and dedicated support.</li>
19-
<li><a href="https://coreui.io/about/services/?docs=coreui-banner-free">Hire Us!</a> We create stunning designs, high-conversion landing pages, functional mobile apps and reliable web services – everything you need to offer your products or services online and always stay a tap away from your customers.</li>
20-
<!-- <li><a href="https://opencollective.com/coreui" target="_blank">Became a sponsor</a>, and get your logo on BACKERS.md/README.md files or each site of this documentation</li> -->
21-
<li>Give us a star ⭐️ on <a href="https://github.com/coreui/coreui" target="_blank">Github</a>.</li>
22-
</ul>
23-
</div>
248
{{ end }}

0 commit comments

Comments
 (0)