Skip to content

Commit 067f3bc

Browse files
yevhenlisovenkoyevhenlisovenko
committed
Component "awes-io/form-builder" was updated to v1.5
1 parent 5fc0735 commit 067f3bc

18 files changed

+289
-0
lines changed

‎docs/components/form-builder/1.5/fb-auto-captcha.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ By default, the field is hidden if the `show`property is not passed. If the serv
1212
* [Checkbox](./fb-checkbox.md)
1313
* [Code](./fb-code.md)
1414
* [Company Slug](./fb-company-slug.md)
15+
* [Date](./fb-date.md)
16+
* [Date range](./fb-date-range.md)
1517
* [Editor](./fb-editor.md)
1618
* [Input](./fb-input.md)
1719
* [Multi block](./fb-multi-block.md)

‎docs/components/form-builder/1.5/fb-checkbox.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ It can be located within the <form-builder> component, then it looks for t
1010
* **Checkbox**
1111
* [Code](./fb-code.md)
1212
* [Company Slug](./fb-company-slug.md)
13+
* [Date](./fb-date.md)
14+
* [Date range](./fb-date-range.md)
1315
* [Editor](./fb-editor.md)
1416
* [Input](./fb-input.md)
1517
* [Multi block](./fb-multi-block.md)

‎docs/components/form-builder/1.5/fb-code.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ Here is a visual presentation of this component.
1414
* [Checkbox](./fb-checkbox.md)
1515
* **Code**
1616
* [Company Slug](./fb-company-slug.md)
17+
* [Date](./fb-date.md)
18+
* [Date range](./fb-date-range.md)
1719
* [Editor](./fb-editor.md)
1820
* [Input](./fb-input.md)
1921
* [Multi block](./fb-multi-block.md)

‎docs/components/form-builder/1.5/fb-company-slug.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,8 @@ This component visually looks like:
1515
* [Checkbox](./fb-checkbox.md)
1616
* [Code](./fb-code.md)
1717
* **Company Slug**
18+
* [Date](./fb-date.md)
19+
* [Date range](./fb-date-range.md)
1820
* [Editor](./fb-editor.md)
1921
* [Input](./fb-input.md)
2022
* [Multi block](./fb-multi-block.md)

‎docs/components/form-builder/1.5/fb-date-range.md

Lines changed: 109 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
# The <fb-date-range> Component
2+
3+
A component for selecting a period of time by choosing start and end date (time is not included). For selecting a specific date and time, please use the [Date component](./fb-date.md) It can be located within the <form-builder> component or used with `v-model` directive and can be visualized as follows:
4+
5+
![fb-date-range](https://storage.googleapis.com/static.awes.io/docs/fb-date-range.gif)
6+
7+
The component uses [Tiny Date Range Picker](https://github.com/chrisdavies/tiny-date-picker) internally to render calendars
8+
9+
## Components
10+
* [Form Builder](./form-builder.md)
11+
* [Auto Captcha](./fb-auto-captcha.md)
12+
* [Checkbox](./fb-checkbox.md)
13+
* [Code](./fb-code.md)
14+
* [Company Slug](./fb-company-slug.md)
15+
* [Date](./fb-date.md)
16+
* **Date range**
17+
* [Editor](./fb-editor.md)
18+
* [Input](./fb-input.md)
19+
* [Multi block](./fb-multi-block.md)
20+
* [Phone](./fb-phone.md)
21+
* [Radio Group](./fb-radio-group.md)
22+
* [Select](./fb-select.md)
23+
* [Slider](./fb-slider.md)
24+
* [Switcher](./fb-switcher.md)
25+
* [Textarea](./fb-textarea.md)
26+
* [Uploader](./fb-uploader.md)
27+
28+
## Example
29+
30+
```html
31+
<form-builder url="/api-url">
32+
<fb-date-range name="period"></fb-date>
33+
</form-builder>
34+
```
35+
<div class="vue-example">
36+
<form-builder url="http://httpbin.org/post" disabled-dialog>
37+
<fb-date-range name="period"></fb-date>
38+
</form-builder>
39+
</div>
40+
41+
42+
## Component properties
43+
44+
| Name | Type | Default | Description |
45+
|---------------------|:------------------:|:-------------------:|---------------------------------------------------|
46+
| **name** | `String` | `undefined` | Field identifier in the data object |
47+
| **id** | `Number` | `undefined` | Sequence number within the &lt;fb-multi-block&gt; component |
48+
| **labelStart** | `String` | `'Start date'` | Text in the &lt;label&gt; element for 1st field |
49+
| **labelEnd** | `String` | `'End date'` | Text in the &lt;label&gt; element for 2nd field |
50+
| **min** | `String`, `Number`, `Object` | calculated according to **yearRange** prop and current date | Minimal selectable date |
51+
| **max** | `String`, `Number`, `Object` | calculated according to **yearRange** prop and current date | Maximal selectable date |
52+
| **yearRange** | `Number` | `4` | Max year offset back and forth from current day, if **min** or **max** is not provided |
53+
| **dayOffset** | `Number` | `1` | Set this to 0 for Sunday. 1 is for Monday |
54+
| **valueStart** | `String` | `undefined` | Selected start date |
55+
| **valueEnd** | `String` | `undefined` | Selected end date |
56+
| **format** | `String` | 'MM/DD/YYYY' | Date format for input fields |
57+
| **disabled** | `Boolean` | `false` | Are the inputs disabled |
58+
| **lang** | `Object` | see [lang object](#date-lang-object) | Language strings for current instance. Will be merged with defaults |
59+
60+
The **min** and **max** props could be an ISO date string, timestamp, or Date object - everything that [`Date.parse()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse) method accepts.
61+
62+
The **value** property could only be a date in ISO String format
63+
64+
65+
## Usage examples
66+
67+
```html
68+
<!-- setting min and max dates -->
69+
<fb-date-range min="2019-05-09" max="2019-06-20" value-start="2019-05-15" value-end="2019-06-06"></fb-date-range>
70+
71+
<!-- disabling inputs -->
72+
<fb-date-range min="2019-05-09" max="2019-06-20" disabled></fb-date-range>
73+
```
74+
<div class="vue-example">
75+
<form-builder url="http://httpbin.org/post" disabled-dialog>
76+
<fb-date-range name="one" min="2019-05-09" max="2019-06-20" value-start="2019-05-15" value-end="2019-06-06"></fb-date-range>
77+
<fb-date-range name="two" min="2019-05-09" max="2019-06-20" disabled></fb-date-range>
78+
</form-builder>
79+
</div>
80+
81+
82+
<h2 id="date-lang-object">Lang object</h2>
83+
84+
```javascript
85+
AWES_CONFIG = {
86+
lang: {
87+
FORMS_DATEPICKER: {
88+
// here are the default values
89+
days: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
90+
months: [
91+
'January',
92+
'February',
93+
'March',
94+
'April',
95+
'May',
96+
'June',
97+
'July',
98+
'August',
99+
'September',
100+
'October',
101+
'November',
102+
'December',
103+
],
104+
today: 'Today',
105+
close: 'Close'
106+
}
107+
}
108+
}
109+
```

‎docs/components/form-builder/1.5/fb-date.md

Lines changed: 148 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,148 @@
1+
# The &lt;fb-date&gt; Component
2+
3+
It is a date and time field component. For selecting a period, please use the [Date range component](./fb-date-range.md) It can be located within the &lt;form-builder&gt; component or used with `v-model` directive and can be visualized as follows:
4+
5+
![fb-date](https://storage.googleapis.com/static.awes.io/docs/fb-date.gif)
6+
7+
The component uses [Tiny Date Picker](https://github.com/chrisdavies/tiny-date-picker) internally to render calendar
8+
9+
## Components
10+
* [Form Builder](./form-builder.md)
11+
* [Auto Captcha](./fb-auto-captcha.md)
12+
* [Checkbox](./fb-checkbox.md)
13+
* [Code](./fb-code.md)
14+
* [Company Slug](./fb-company-slug.md)
15+
* **Date**
16+
* [Date range](./fb-date-range.md)
17+
* [Editor](./fb-editor.md)
18+
* [Input](./fb-input.md)
19+
* [Multi block](./fb-multi-block.md)
20+
* [Phone](./fb-phone.md)
21+
* [Radio Group](./fb-radio-group.md)
22+
* [Select](./fb-select.md)
23+
* [Slider](./fb-slider.md)
24+
* [Switcher](./fb-switcher.md)
25+
* [Textarea](./fb-textarea.md)
26+
* [Uploader](./fb-uploader.md)
27+
28+
## Example
29+
30+
```html
31+
<form-builder url="/api-url">
32+
<fb-date name="date" label="Pick a date"></fb-date>
33+
</form-builder>
34+
```
35+
<div class="vue-example">
36+
<form-builder url="http://httpbin.org/post" disabled-dialog>
37+
<fb-date name="date" label="Pick a date"></fb-date>
38+
</form-builder>
39+
</div>
40+
41+
42+
## Component properties
43+
44+
| Name | Type | Default | Description |
45+
|---------------------|:------------------:|:-------------------:|---------------------------------------------------|
46+
| **name** | `String` | `undefined` | Field identifier in the data object |
47+
| **id** | `Number` | `undefined` | Sequence number within the &lt;fb-multi-block&gt; component |
48+
| **label** | `String` | `''` | Text in the &lt;label&gt; element |
49+
| **min** | `String`, `Number`, `Object` | calculated according to **yearRange** prop and current date | Minimal selectable date |
50+
| **max** | `String`, `Number`, `Object` | calculated according to **yearRange** prop and current date | Maximal selectable date |
51+
| **yearRange** | `Number` | `4` | Max year offset back and forth from current day, if **min** or **max** is not provided |
52+
| **dayOffset** | `Number` | `1` | Set this to 0 for Sunday. 1 is for Monday |
53+
| **value** | `String` | `undefined` | Selected date (only stringified Date object) |
54+
| **timeRange** | `Boolean`, `Object`| `true` | See [time range](#time-range-props) props |
55+
| **format** | `String` | 'MM/DD/YYYY' or 'MM/DD/YYYY HH:mm' with time range | Date format for input field |
56+
| **disabled** | `Boolean`, `Array` | `false` | `Boolean` to disable whole field and `Array` of dates to disable specific date |
57+
| **lang** | `Object` | see [lang object](#date-lang-object) | Language strings for current instance. Will be merged with defaults |
58+
59+
Every date property, i. e. **min**, **max**, and items in **disabled** array could be an ISO date string, timestamp or Date object - everything that [`Date.parse()`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Date/parse) method accepts.
60+
61+
The **value** property could only be a date in ISO String format
62+
63+
<h3 id="time-range-props">Time range propertires</h3>
64+
65+
| Name | Type | Default | Description |
66+
|--------------|:------------------:|:-----------:|-------------------------------------------------------------------|
67+
| **min** | `String` | '00:00' | Minimal time to start the range from, 24 format only |
68+
| **max** | `String` | `undefined` | Max value in 24h format, including itself, not more than '23:59' |
69+
| **step** | `String`, `Number` | 30 | Range step in minutes |
70+
| **disabled** | `Boolean`, `Array` | false | `true` to not render time range, or `Array` of specific intervals |
71+
72+
Every time value is a 24-hour formatted `String`.
73+
74+
> Don't forget leading zeros, `'5:00'` is incorrect. Correct one is `'05:00'`
75+
76+
To set time, it should be passed to the **value** prop of `fb-`
77+
78+
79+
## Usage examples
80+
81+
Picking specific interval
82+
83+
```html
84+
<!-- setting min and max dates -->
85+
<fb-date label="Pick a date" min="2019-05-09" max="2019-06-20" value="2019-05-20"></fb-date>
86+
87+
<!-- disabling specific dates -->
88+
<fb-date label="Pick a date" min="2019-05-09" max="2019-06-20" value="2019-05-20" :disabled="['2019-05-22', '2019-05-23']"></fb-date>
89+
```
90+
<div class="vue-example">
91+
<form-builder url="http://httpbin.org/post" disabled-dialog>
92+
<fb-date label="Pick a date" min="2019-05-09" max="2019-06-20" value="2019-05-20"></fb-date>
93+
<fb-date label="Pick a date" min="2019-05-09" max="2019-06-20" value="2019-05-20" :disabled="['2019-05-22', '2019-05-23']"></fb-date>
94+
</form-builder>
95+
</div>
96+
97+
Configuring time range
98+
99+
```html
100+
<!-- not rendered entirely -->
101+
<fb-date label="No time" :time-range="false"></fb-date>
102+
103+
<!-- configuring time range -->
104+
<fb-date label="Configured time range" :time-range="{min: '09:00', max: '10:20', step: 10}"></fb-date>
105+
106+
<!-- setting specific time buttons to disabled state -->
107+
<fb-date label="Disabled time" :time-range="{ disabled: ['09:10', '10:00'] }"></fb-date>
108+
109+
<!-- setting time on current date (only stringified date is accepted) -->
110+
<fb-date label="Selected time" :value="new Date(new Date().setHours(9, 30)).toUTCString()" :time-range="{min: '08:00'}"></fb-date>
111+
```
112+
113+
<div class="vue-example">
114+
<form-builder url="http://httpbin.org/post" disabled-dialog>
115+
<fb-date label="Pick a date" min="2019-05-09" max="2019-06-20" value="2019-05-20"></fb-date>
116+
<fb-date label="Configured time range" :time-range="{min: '09:00', max: '10:20', step: 10, value}"></fb-date>
117+
<fb-date label="Disabled time" :time-range="{ disabled: ['09:10', '10:00'] }"></fb-date>
118+
</form-builder>
119+
</div>
120+
121+
<h2 id="date-lang-object">Lang object</h2>
122+
123+
```javascript
124+
AWES_CONFIG = {
125+
lang: {
126+
FORMS_DATEPICKER: {
127+
// here are the default values
128+
days: ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'],
129+
months: [
130+
'January',
131+
'February',
132+
'March',
133+
'April',
134+
'May',
135+
'June',
136+
'July',
137+
'August',
138+
'September',
139+
'October',
140+
'November',
141+
'December',
142+
],
143+
today: 'Today',
144+
close: 'Close'
145+
}
146+
}
147+
}
148+
```

‎docs/components/form-builder/1.5/fb-editor.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ It is a component for writing and changing code. You paste your code in the wind
1010
* [Checkbox](./fb-checkbox.md)
1111
* [Code](./fb-code.md)
1212
* [Company Slug](./fb-company-slug.md)
13+
* [Date](./fb-date.md)
14+
* [Date range](./fb-date-range.md)
1315
* **Editor**
1416
* [Input](./fb-input.md)
1517
* [Multi block](./fb-multi-block.md)

‎docs/components/form-builder/1.5/fb-input.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ It is a text field component. It can be located within the &lt;form-builder&gt;
1010
* [Checkbox](./fb-checkbox.md)
1111
* [Code](./fb-code.md)
1212
* [Company Slug](./fb-company-slug.md)
13+
* [Date](./fb-date.md)
14+
* [Date range](./fb-date-range.md)
1315
* [Editor](./fb-editor.md)
1416
* **Input**
1517
* [Multi block](./fb-multi-block.md)

‎docs/components/form-builder/1.5/fb-multi-block.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ It can be located only within the &lt;form-builder&gt; component and is visually
1010
* [Checkbox](./fb-checkbox.md)
1111
* [Code](./fb-code.md)
1212
* [Company Slug](./fb-company-slug.md)
13+
* [Date](./fb-date.md)
14+
* [Date range](./fb-date-range.md)
1315
* [Editor](./fb-editor.md)
1416
* [Input](./fb-input.md)
1517
* **Multi block**

‎docs/components/form-builder/1.5/fb-phone.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ It can be located within the &lt;form-builder&gt; component, then it requires `n
1212
* [Checkbox](./fb-checkbox.md)
1313
* [Code](./fb-code.md)
1414
* [Company Slug](./fb-company-slug.md)
15+
* [Date](./fb-date.md)
16+
* [Date range](./fb-date-range.md)
1517
* [Editor](./fb-editor.md)
1618
* [Input](./fb-input.md)
1719
* [Multi block](./fb-multi-block.md)

‎docs/components/form-builder/1.5/fb-radio-group.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ Using this component, you can create a group of radio buttons. It can be located
1010
* [Checkbox](./fb-checkbox.md)
1111
* [Code](./fb-code.md)
1212
* [Company Slug](./fb-company-slug.md)
13+
* [Date](./fb-date.md)
14+
* [Date range](./fb-date-range.md)
1315
* [Editor](./fb-editor.md)
1416
* [Input](./fb-input.md)
1517
* [Multi block](./fb-multi-block.md)

‎docs/components/form-builder/1.5/fb-select.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,8 @@ The component is visualized as follows:
1414
* [Checkbox](./fb-checkbox.md)
1515
* [Code](./fb-code.md)
1616
* [Company Slug](./fb-company-slug.md)
17+
* [Date](./fb-date.md)
18+
* [Date range](./fb-date-range.md)
1719
* [Editor](./fb-editor.md)
1820
* [Input](./fb-input.md)
1921
* [Multi block](./fb-multi-block.md)

‎docs/components/form-builder/1.5/fb-slider.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ The component can be located within the &lt;form-builder&gt; component, then it
1212
* [Checkbox](./fb-checkbox.md)
1313
* [Code](./fb-code.md)
1414
* [Company Slug](./fb-company-slug.md)
15+
* [Date](./fb-date.md)
16+
* [Date range](./fb-date-range.md)
1517
* [Editor](./fb-editor.md)
1618
* [Input](./fb-input.md)
1719
* [Multi block](./fb-multi-block.md)

‎docs/components/form-builder/1.5/fb-switcher.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,8 @@ The `input[type="range"]`-based switcher 0/1. It can be located within the &lt;f
1010
* [Checkbox](./fb-checkbox.md)
1111
* [Code](./fb-code.md)
1212
* [Company Slug](./fb-company-slug.md)
13+
* [Date](./fb-date.md)
14+
* [Date range](./fb-date-range.md)
1315
* [Editor](./fb-editor.md)
1416
* [Input](./fb-input.md)
1517
* [Multi block](./fb-multi-block.md)

‎docs/components/form-builder/1.5/fb-textarea.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ This component can be located within the &lt;form-builder&gt; component, then it
1212
* [Checkbox](./fb-checkbox.md)
1313
* [Code](./fb-code.md)
1414
* [Company Slug](./fb-company-slug.md)
15+
* [Date](./fb-date.md)
16+
* [Date range](./fb-date-range.md)
1517
* [Editor](./fb-editor.md)
1618
* [Input](./fb-input.md)
1719
* [Multi block](./fb-multi-block.md)

‎docs/components/form-builder/1.5/fb-uploader.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,8 @@ It uploads files according to the specified `url` property and sends paths to th
1212
* [Checkbox](./fb-checkbox.md)
1313
* [Code](./fb-code.md)
1414
* [Company Slug](./fb-company-slug.md)
15+
* [Date](./fb-date.md)
16+
* [Date range](./fb-date-range.md)
1517
* [Editor](./fb-editor.md)
1618
* [Input](./fb-input.md)
1719
* [Multi block](./fb-multi-block.md)

‎docs/components/form-builder/1.5/form-builder.md

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,8 @@ external data which are specified via the `store-data` parameter are extracted f
99
* [Checkbox](./fb-checkbox.md)
1010
* [Code](./fb-code.md)
1111
* [Company Slug](./fb-company-slug.md)
12+
* [Date](./fb-date.md)
13+
* [Date range](./fb-date-range.md)
1214
* [Editor](./fb-editor.md)
1315
* [Input](./fb-input.md)
1416
* [Multi block](./fb-multi-block.md)

0 commit comments

Comments
 (0)