Merge branch 'dev' into 'master'

Dev

See merge request awes/wiki!14

Author: yevhenlisovenko

docs/components/filter-wrapper/1.0/filter-wrapper.md

@@ -32,6 +32,7 @@ Here is the implementation of the <filter-wrapper> component:
 | **name**       | `String`  | filter-${uid} | Unique identifier (ID)            |
 | **send-text**  | `String`  | `Apply`       | Text in the “Apply” button        |
 | **reset-text** | `String`  | `Reset`       | Text in the “Reset” button        |
+| **auto-submit**| `Boolean` | `undefined`   | If `true` the filter will be applied on fields value change |
 
 The filter has an *active state (Boolean)*, namely there are such parameters in the address bar which match the field names in the filter. You can get this value from the storage in the `$awesFilters` variable by the filter name, for example:
 

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

@@ -45,14 +45,14 @@ The component uses [Tiny Date Range Picker](https://github.com/chrisdavies/tiny-
 |---------------------|:------------------:|:-------------------:|---------------------------------------------------|
 | **name**            | `String`           | `undefined`         | Field identifier in the data object               |
 | **id**              | `Number`           | `undefined`         | Sequence number within the <fb-multi-block> component    |
-| **labelStart**      | `String`           | `'Start date'`      | Text in the <label> element for 1st field   |
-| **labelEnd**        | `String`           | `'End date'`        | Text in the <label> element for 2nd field   |
+| **label-start**     | `String`           | `'Start date'`      | Text in the <label> element for 1st field   |
+| **label-end**       | `String`           | `'End date'`        | Text in the <label> element for 2nd field   |
 | **min**             | `String`, `Number`, `Object` | calculated according to **yearRange** prop and current date | Minimal selectable date |
 | **max**             | `String`, `Number`, `Object` | calculated according to **yearRange** prop and current date | Maximal selectable date |
-| **yearRange**       | `Number`           | `4`                 | Max year offset back and forth from current day, if **min** or **max** is not provided |
-| **dayOffset**       | `Number`           | `1`                 | Set this to 0 for Sunday. 1 is for Monday         |
-| **valueStart**      | `String`           | `undefined`         | Selected start date                               |
-| **valueEnd**        | `String`           | `undefined`         | Selected end date                                 |
+| **year-range**      | `Number`           | `4`                 | Max year offset back and forth from current day, if **min** or **max** is not provided |
+| **day-offset**      | `Number`           | `1`                 | Set this to 0 for Sunday. 1 is for Monday         |
+| **value-start**     | `String`           | `undefined`         | Selected start date                               |
+| **value-end**       | `String`           | `undefined`         | Selected end date                                 |
 | **format**          | `String`           | 'MM/DD/YYYY'        | Date format for input fields                      |
 | **disabled**        | `Boolean`          | `false`             | Are the inputs disabled                           |
 | **lang**            | `Object`           | see [lang object](#date-lang-object) | Language strings for current instance. Will be merged with defaults |
@@ -65,16 +65,20 @@ The **value** property could only be a date in ISO String format
 ## Usage examples
 
 ```html
-<!-- setting min and max dates -->
-<fb-date-range min="2019-05-09" max="2019-06-20" value-start="2019-05-15" value-end="2019-06-06"></fb-date-range>
+<form-builder url="http://httpbin.org/post" disabled-dialog>
+
+    <!-- setting min and max dates -->
+    <fb-date-range name="range" min="2019-05-09" max="2019-06-20" value-start="2019-05-15" value-end="2019-06-06"></fb-date-range>
 
-<!-- disabling inputs -->
-<fb-date-range min="2019-05-09" max="2019-06-20" disabled></fb-date-range>
+    <!-- disabling inputs -->
+    <fb-date-range name="range-disabled" min="2019-05-09" max="2019-06-20" disabled></fb-date-range>
+
+</form-builder>
 ```
 <div class="vue-example">
     <form-builder url="http://httpbin.org/post" disabled-dialog>
-        <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>
-        <fb-date-range name="two" min="2019-05-09" max="2019-06-20" disabled></fb-date-range>
+        <fb-date-range name="range" min="2019-05-09" max="2019-06-20" value-start="2019-05-15" value-end="2019-06-06"></fb-date-range>
+        <fb-date-range name="range-disabled" min="2019-05-09" max="2019-06-20" disabled></fb-date-range>
     </form-builder>
 </div>
 

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

@@ -48,10 +48,10 @@ The component uses [Tiny Date Picker](https://github.com/chrisdavies/tiny-date-p
 | **label**           | `String`           | `''`                | Text in the <label> element                 |
 | **min**             | `String`, `Number`, `Object` | calculated according to **yearRange** prop and current date | Minimal selectable date |
 | **max**             | `String`, `Number`, `Object` | calculated according to **yearRange** prop and current date | Maximal selectable date |
-| **yearRange**       | `Number`           | `4`                 | Max year offset back and forth from current day, if **min** or **max** is not provided |
-| **dayOffset**       | `Number`           | `1`                 | Set this to 0 for Sunday. 1 is for Monday         |
+| **year-range**      | `Number`           | `4`                 | Max year offset back and forth from current day, if **min** or **max** is not provided |
+| **day-offset**      | `Number`           | `1`                 | Set this to 0 for Sunday. 1 is for Monday         |
 | **value**           | `String`           | `undefined`         | Selected date (only stringified Date object)      |
-| **timeRange**       | `Boolean`, `Object`| `true`              | See [time range](#time-range-props) props         |
+| **time-range**      | `Boolean`, `Object`| `true`              | See [time range](#time-range-props) props         |
 | **format**          | `String`           | 'MM/DD/YYYY' or 'MM/DD/YYYY HH:mm' with time range | Date format for input field |
 | **disabled**        | `Boolean`, `Array` | `false`             | `Boolean` to disable whole field and `Array` of dates to disable specific date |
 | **lang**            | `Object`           | see [lang object](#date-lang-object) | Language strings for current instance. Will be merged with defaults |
@@ -81,40 +81,49 @@ To set time, it should be passed to the **value** prop of `fb-`
 Picking specific interval
 
 ```html
-<!-- setting min and max dates -->
-<fb-date label="Pick a date" min="2019-05-09" max="2019-06-20" value="2019-05-20"></fb-date>
+<form-builder url="http://httpbin.org/post">
 
-<!-- disabling specific dates -->
-<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>
+    <!-- setting min and max dates -->
+    <fb-date name="date-minmax" label="Pick a date" min="2019-05-09" max="2019-06-20" value="2019-05-20"></fb-date>
+
+    <!-- disabling specific dates -->
+    <fb-date name="date-disabled" 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>
+
+</form-builder>
 ```
 <div class="vue-example">
     <form-builder url="http://httpbin.org/post" disabled-dialog>
-        <fb-date label="Pick a date" min="2019-05-09" max="2019-06-20" value="2019-05-20"></fb-date>
-        <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>
+        <fb-date name="date1" label="Pick a date" min="2019-05-09" max="2019-06-20" value="2019-05-20"></fb-date>
+        <fb-date name="date2" 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>
     </form-builder>
 </div>
 
 Configuring time range
 
 ```html
-<!-- not rendered entirely -->
-<fb-date label="No time" :time-range="false"></fb-date>
+<form-builder url="http://httpbin.org/post">
 
-<!-- configuring time range -->
-<fb-date label="Configured time range" :time-range="{min: '09:00', max: '10:20', step: 10}"></fb-date>
+    <!-- not rendered entirely -->
+    <fb-date name="no-time" label="No time" :time-range="false"></fb-date>
 
-<!-- setting specific time buttons to disabled state -->
-<fb-date label="Disabled time" :time-range="{ disabled: ['09:10', '10:00'] }"></fb-date>
+    <!-- configuring time range -->
+    <fb-date name="time-minmax" label="Configured time range" :time-range="{min: '09:00', max: '10:20', step: 10}"></fb-date>
 
-<!-- setting time on current date (only stringified date is accepted) -->
-<fb-date label="Selected time" :value="new Date(new Date().setHours(9, 30)).toUTCString()" :time-range="{min: '08:00'}"></fb-date>
+    <!-- setting specific time buttons to disabled state -->
+    <fb-date name="time-disabled" label="Disabled time" :time-range="{ disabled: ['09:30', '10:00'] }"></fb-date>
+
+    <!-- setting time on current date (only stringified date is accepted) -->
+    <fb-date name="time-selected" label="Selected time" :value="new Date(new Date().setHours(9, 30)).toUTCString()" :time-range="{min: '08:00'}"></fb-date>
+
+</form-builder>
 ```
 
 <div class="vue-example">
     <form-builder url="http://httpbin.org/post" disabled-dialog>
-        <fb-date label="Pick a date" min="2019-05-09" max="2019-06-20" value="2019-05-20"></fb-date>
-        <fb-date label="Configured time range" :time-range="{min: '09:00', max: '10:20', step: 10, value}"></fb-date>
-        <fb-date label="Disabled time" :time-range="{ disabled: ['09:10', '10:00'] }"></fb-date>
+        <fb-date name="no-time" label="No time" :time-range="false"></fb-date>
+        <fb-date name="time-minmax" label="Configured time range" :time-range="{min: '09:00', max: '10:20', step: 10}"></fb-date>
+        <fb-date name="time-disabled" label="Disabled time" :time-range="{ disabled: ['09:30', '10:00'] }"></fb-date>
+        <fb-date name="time-selected" label="Selected time" :value="new Date(new Date().setHours(9, 30)).toUTCString()" :time-range="{min: '08:00'}"></fb-date>
     </form-builder>
 </div>
 

docs/components/indigo-layout/1.9/components.md

@@ -226,3 +226,36 @@ Ready-to-use Blade components and directives.
 @endtable
 ```
 
+## Search form
+
+Search form is a `<filter-wrapper>` component with additional CSS-class for stylization.
+
+Basic markup
+
+```html
+<filter-wrapper class="is-search" send-text="Search">
+    <fb-input name="query" placeholder="Search"></fb-input>
+</filter-wrapper>
+```
+
+<div class="vue-example">
+<filter-wrapper class="is-search" send-text="Search">
+    <fb-input name="query" placeholder="Search"></fb-input>
+</filter-wrapper>   
+</div>
+
+To create a live submitting form, add an `auto-submit` prop. This will also hide form buttons.
+
+By default all input elements send value with 300ms debounce. This value is controlled on the `&lt;fb-input&gt;` component
+
+```html
+<filter-wrapper class="is-search" send-text="Search" auto-submit>
+    <fb-input name="query" placeholder="Search" :debounce="1000"></fb-input>
+</filter-wrapper>
+```
+
+<div class="vue-example">
+<filter-wrapper class="is-search" send-text="Search" auto-submit>
+    <fb-input name="query" placeholder="Search" :debounce="1000"></fb-input>
+</filter-wrapper>   
+</div>

docs/components/localization-helper/1.1/index.md

@@ -0,0 +1,106 @@
+# Localization Helper
+
+Package for convenient work with Laravel's localization features and fast language files generation.
+
+## Installation
+
+Via Composer
+
+``` bash
+$ composer require awes-io/localization-helper
+```
+
+In Laravel 5.5+, service provider and facade will be automatically registered. For older versions, follow the steps below:
+
+Register service provider in `config/app.php`:
+
+```php
+'providers' => [
+// [...]
+        AwesIO\LocalizationHelper\LocalizationHelperServiceProvider::class,
+],
+```
+
+You may also register `LaravelLocalization` facade:
+
+```php
+'aliases' => [
+// [...]
+        'LocalizationHelper' => AwesIO\LocalizationHelper\Facades\LocalizationHelper::class,
+],
+```
+
+## Config
+
+### Config Files
+
+In order to edit default configuration you may execute:
+
+```
+php artisan vendor:publish --provider="AwesIO\LocalizationHelper\LocalizationHelperServiceProvider"
+```
+
+After that, `config/localizationhelper.php` will be created.
+
+## Usage
+
+Package registers global helper function `_p($file_key, $default, $placeholders)`:
+
+```php
+_p('auth.login', 'Login'); // "Login"
+```
+
+It will create new localization file `auth.php` (if it doesn't exist) for fallback locale and write second parameter as language string under `login` key:
+
+```php
+return [
+    "login" => "Login"
+];
+```
+
+Array can be used as default value:
+
+```php
+_p('auth.login', ['en' => 'Login', 'fr' => 'Connexion']);
+```
+
+It will create files `auth.php` for every locale from array keys and write array value as language string.
+
+On second call with same file/key `_p('auth.login')`, localization string will be returned, file will remain untouched.
+
+Placeholders are also supported:
+
+```php
+_p(
+    'mail.invitation', 
+    'You’re invited to join :company company workspace', 
+    ['company' => 'Awesio']
+);
+```
+
+If key is returned, it means that string already exists in localization file and you are trying to add new one using its value as an array.
+
+```php
+// in localization file.php
+return [
+    "test" => "Test string"
+];
+
+_p('file.test.new', 'Test string'); // will return "file.test.new"
+
+_p('file.test_2.new', 'Test string'); // will return "Test string"
+
+// and modify localization file:
+return [
+    "test" => "Test string",
+    "test_2" => [
+        "new" => "Test string"
+    ]
+];
+```
+
+## Testing
+
+``` bash
+$ composer test
+```

docs/components/modal-window/1.1/index.md

@@ -13,7 +13,7 @@ It is a modal window component with a tracked history. Below you will see a visu
 import Vue from 'vue'
 import VueRouter from 'vue-router' // required
 import modalWindow from '@awes-io/modal-window'
-import '@awes-io/modal-windwo/dist/main.css' // optionally, for default styling
+import '@awes-io/modal-window/dist/main.css' // optionally, for default styling
 
 Vue.use(VueRouter) // required
 Vue.use(modalWindow, { /* optional config */}) // registers `<modal-window>` component globally
@@ -55,8 +55,24 @@ include CDN-script, provided by the [platform](//awes.io)
 | **theme**      | `String`  | `'default'`  | Styling modal appearance, simply adds additional class to the wrapper, e.g. `is-${theme}` |
 | **param**      | `String`  | `'modal'`    | GET-parameter, that recieves a value of **name** param when window is opened. All the modals? by default, share the same GET-param. This means opening next modal closes previouse. |
 | **stay**       | `Boolean` | `false`      | Should the content stay in markup, when window is closed. *Could be configured globally* |
+| **bg-сlick-сlose** | `Boolean` | `true`   | Should the modal be closed by clicking on background. *Could be configured globally* |
 | **lang**       | `Object`  | [lang](#mw-lang) | Overwrite default lang strings in current modal. *Could be configured globally* |
 
+The properties, marked as **globally configured**, could be provided in `AWES_CONFIG` in camelCase. For example:
+
+```javascript
+const AWES_CONFIG = {
+
+    // some other config...
+
+    modalWindow: {
+        stay: true,
+        bgClickClose: false,
+        // ... other options
+    }
+}
+```
+
 
 ### Modal window ID
 
@@ -187,4 +203,60 @@ Transition styling colud be done with proper [Vue transition component classes](
 * modal-transition-awesome-enter-to
 * modal-transition-awesome-leave
 * modal-transition-awesome-leave-active
-* modal-transition-awesome-leave-to
+* modal-transition-awesome-leave-to
+
+
+## AJAX modal example
+
+To show dynamically loading content, place a `&lt;content-wrapper/&gt;` component inside a modal.
+
+> Note, that by default, content will be loaded **each time** modal is opened.
+> But if you use modal with `stay` prop turned on - content will be loaded **once**, after the page load
+
+```html
+<modal-window name="ajax-example" title="AJAX modal">
+
+    <!-- dynamic content -->
+    <content-wrapper url="https://jsonplaceholder.typicode.com/users">
+
+        <!-- loading state stylization -->
+        <template slot="loading">
+            <div class="h1 text-center">Loading...</div>
+        </template>
+
+        <!-- content -->
+        <template slot-scope="ajaxData">
+            <table-builder :default="ajaxData.data">
+                <tb-column name="name"></tb-column>
+                <tb-column name="email">
+                    <template slot-scope="col">
+                        <a :href="`mailto:${col.data.email}`">{{ col.data.email }}</a>
+                    </template>
+                </tb-column>
+            </table-builder>
+        </template><!-- / content -->
+
+    </content-wrapper>
+</modal-window>
+```
+
+<div class="vue-example">
+    <button class="btn" @click="AWES.emit('modal::ajax-example:open')">AJAX modal</button>
+    <modal-window name="ajax-example" title="AJAX modal">
+        <content-wrapper url="https://jsonplaceholder.typicode.com/users">
+            <template slot="loading">
+                <div class="h1 text-center">Loading...</div>
+            </template>
+            <template slot-scope="ajaxData">
+                <table-builder :default="ajaxData.data">
+                    <tb-column name="name"></tb-column>
+                    <tb-column name="email">
+                        <template slot-scope="col">
+                            <a :href="`mailto:${col.data.email}`">{{ col.data.email }}</a>
+                        </template>
+                    </tb-column>
+                </table-builder>
+            </template>
+        </content-wrapper>
+    </modal-window>
+</div>