# libj-vue-core

# Installation
```
npm i libj-vue-core
```
```
import 'libj-vue-core'
```

# Test

# Showcase
- Run this in a separate command line to start node server
```
node server.js
```
- Run one of the following to re-create bundles
```
npm run dev
npm run dev:watch
```
- Navigate to http://localhost:3000

# Build
```
npm run build
npm run build:watch
```

# Directives:

## v-loading

# Plugins:

## toast
Adds `$toast.show` and `$toast.ask` to all vue instances and components

# Components:

## `j-overlay` and `j-loading`
### SCSS Variables:
```
$j-overlay-bg: black !default;
$j-loading-background-color: rgba(0,0,0,0.25) !default;
$j-loading-color: white !default;
$j-loading-z-index: 1040 !default;
$j-loading-spinner-size: 2rem !default;
$j-loading-border-width: 5px !default;
```

## `j-dragger`
This is used to let the user order items of a list

### props
- __list (Array) | default: []__ List of items for ordering
- __group (String) | default: 'a'__ The group to which this instance belongs. For example, if there are two
j-dragger components on the page, each with 'somegroup' as __group__ prop, then you can move items between these two instances
- __keyProp (String) | default: null__ The key property of the objects in the _list_
- __valueProp (String) | default: null__ The value property of the objects in the _list_. This is only used in the fallback
section of the default slot to show an item. If set null, then item itself is printed
- __canDelete (Boolean) | default: false__ Can user delete an item 
- __iconSize (String) | default: '24px'__ Size of the handle icon.

### Slots
- __default slot__ scope props are _item_ and _index_

### SCSS Variables:
```
$j-dragger-border-color: #ccc !default;
$j-dragger-item-border-color: #aaa !default;
```

## `j-list-mover`
This is used to let the user to devide an original list (_origList_) into two sets of ordered lists

### props
- __group (String) | default: 'a'__ The group to which this instance's internal j-dragger components belong.
- __origList (Array) | default: []__ The original list to divide its items into two groups
- __comparer (Function (a, b) => Boolean) | default: (a, b) => a === b__ The comparer function to check equality of items in
_origList_ array and _dest.list_ array
- __source (Object)__
    - __label (String) | default: ''__ A label for the source list
    - __keyProp (String) | default: ''__ The key property name of objects in _source.list_
    - __valueProp (String) | default: ''__ The value property of objects in _source.list_. If you want to override `source` slot, then omit this
    - __list (Array) | default: []__ The array of items in source
- __dest (Object)__
    - __label (String) | default: ''__ A label for the dest list
    - __keyProp (String) | default: ''__ The key property name of objects in dest.list_
    - __valueProp (String) | default: ''__ The value property of objects in dest.list_. If you want to override `dest` slot, then omit this
    - __list (Array) | default: []__ The array of items in dest
- __direction (String) | default: 'ltr'__ 'ltr' or 'rtl'

### Slots
- __source__ scope props are _item_ (which is a member of _source.list_ array) and _index_
- __dest__ scope props are _item_ (which is a member of _dest.list_ array) and _index_

## `j-modal` and `j-modal-raw` and `j-modal-with-header`
### SCSS Variables:
```
$j-modal-background: #ffffff !default;
$j-modal-text: #666 !default;
$j-modal-close-color: #00c3ff !default;
```

## `j-dropdown`
### props
- __value (Boolean) | default: false__ visibility
- __variant (String) | default: 'primary'__ color: primary, secondary, default, info, danger, warning
- __size (String) | default: null__ size: null, sm, lg

## `j-dropdown` (DEPRECATED)
### props
- __value (Boolean) | default: false__ Visibility of dropdown
- <a name="items"></a> __items (Array) | default: []__ Items of dropdown
- __minWidth (String) | default: '150px'__ min-width of dropdown
- __maxWidth (String) | default: '400px'__ max-width of dropdown
- __width (String) | default: '100%'__ width of dropdown
- __maxHeight (String) | default: '250px'__ max-height of dropdown
- __direction (String) | default: 'ltr'__ ltr or rtl

### Slots
- __trigger__ which is mainly a button to toggle dropdown
- __header__ on top of the list
- __footer__ bottom of the list
- __default slot__ has ___item___ as its _scope_ which is a member of [items](#items)

### Events
- __selected__: Is called when user clicks on an item. Has ___item___ as its _argument_ which is a member of [items](#items).
### SCSS Variables:
```
$j-dropdown-background-color: #f9f9f9 !default;
$j-dropdown-z-index: 1000 !default;
$j-dropdown-item-color: black !default;
$j-dropdown-item-hover-background-color: #f1f1f1 !default;
```

## `j-autocomplete`
### props
- __value (Object) | default: null__ selected option
- __visible (Boolean) | default: false__ if dropdown is visible or not
- __id (String|Number) | default: null__ id of selected option
- __getId(Function(item) => [id of item]) | default: a => a__ a function to get the id from an item
- __serverSide (Boolean) | default: false__ whether the autocomplete needs to connect to server or not
- __getItems Function(query: String, done: Function(result: Array)) | default: (query, done) => { done([]); }__ when _serverSide_ prop is set to true, then set this prop to a function to get items from server
- __options (Array) | default: []__ when _serverSide_ is set to false, set this prop to all items to be searched for
- __searchProperties(Array) | default: []__ when set to a value other than null or undefined or empty array, will indicate
property names of objects that we want to search (in _options_ prop) the user's input
- __placeholder__
- __delay (Number) | default: 500__ debouncing delay for searching user's input
- __clearable (Boolean) | default: false__ whether or not the user can remove the selected item
- __disabled (Boolean) | default: false__ set to true to disable the component
### events
- __input__ which updates the value
- __searched (items: Array)__ is called when searching (both client-side or server-side) is done. returned items are passed to event handler
- __searchTextChanged (query: String)__ is called when user is typing to search. the user input is passed to event handler
- __change (id: (String|Number))__ is called when user selects an item. the id of that item is passed to event handler
### slots
- __placeholder__ slot for placeholder. default value is the _placeholder_ prop
- __result__ slot for the selected item. slot-scope is: { option, id }. option is the item and id is its id extracted via _getId_ prop
- __header__ header slot for dropdown
- __footer__ footer slot for dropdown
- __option__ slot for an item in dropdown. slot-scope is: { option, id }. option is the item and id is its id extracted via _getId_ prop
### methods
- __toggle()__ toggles the visibility of dropdown
- __clear()__ clears the selected item

## `j-country-select`
### props
- __value (String) | default: ''__ selected country code (two-letter country code)
- __displayField (String) | default: null__ it can be 'code', 'name' or null. 'code' and 'name' are country properties and null indicates that a fullname property must be shown for a country. country fullname is 'code' - 'name'
- __placeholder (String) | default: null__ placeholder for underlying autocomplete
- __delay (Number) | default: 500__ debounce delay
- __clearable (Boolean) | default: false__ if set to true, the user can clear selected country
- __disabled (Boolean) | default: false__ if set to true, the component is disabled

## `j-phone-input`
### props
- __value (Object) | default: {phone: '', countryCode: 'US'}__ selected phone object
- __inputName (String) | default: ''__ phone input name
- __countryCodeInputName (String) | default: ''__ phone country code input name
- __disabled (Boolean) | default: false__ if set to true, the component is disabled

## `j-pagination`
### props
- __maxVisibleButtons (Number) | default: 3__ number of buttons between first and last
- __totalRecords (Number) | default: null__ total number of records
- __perPage (Number) | default: null__ number of items for each page
- __currentPage (Number) | default: null__ current page. page numbers start from 1. You must bind this to a variable and
update that variable when _pageChanged_ event fires
### events
- __pageChanged(page)__ is called when page changes

## `j-sidenav-button`
### props
- __value (Boolean) | default: false__ visibility of button
### SCSS Variables:
```
$j-sidenav-button-color: #eee !default;
$j-sidenav-button-active-color: #ccc !default;
```

## `j-sidenav`
### props
- __value (Boolean) | default: false__ visibility of side navigation drawer
- __direction (String) defautl: 'ltr'__ either 'ltr' or 'rtl
### SCSS Variables:
```
$j-sidenav-background: #eee !default;
```

## `j-tree`
### props
- __items (Array) | default: []__ array of tree items
- __idProp (String) | default: 'id'__ id property name of an item
- __parentIdProp (String) | default: 'parentId'__ parent id property name of an item
- __emptyParentId (any) | default: guid.empty()__ empty value for a parent id. Items with this parent id value, will have to parent
- __orderProp (String) | default: 'order'__ order property name of an item. If you set this, then items will be sorted according to this property, if set null, then items have no sequence order
- __expandedFirst (Boolean) | default: true__ whether or not the nodes of tree in UI are expanded by default
### methods
- __delete (id: String)__ deletes a node with this id
- __getAllNodes()__ returns all nodes
### events
- __move__ this is called when a node is moved. See this from source code:
```
this.$emit('move', {
    //node itself
    node: finalNode,
    //node's parent
    parentNode: parentNode,
    //all children of parent
    parentChildren: parentChildren,
    completed: () => { this.isMoving = false; }
});
```
### SCSS Variables:
```
$j-tree-anchor-border-color: black !default;
```

## `j-datepicker`
### props
- __name (String) | default: ''__ html input name
- __value (Number) | default: moment().valueOf()__ value bound to this component. Unix epoch milliseconds
- __view (String) | default: 'day'__ day, month, year, time
- __type (String) | default: 'datetime'__ datetime, date, year, month, time
- __disabled (Boolean) | default: false__ if component is disabled
- __jumpMinute (Number) | default: 1__ number of minutes the time picker jumps
- __roundMinute (Boolean) | default: false__ whether to round minutes to 5 steps
- __min (Number) | default: null__ min value to allow user to choose in Unix epoch milliseconds
- __max (Number) | default: null__ max value to allow user to choose in Unix epoch milliseconds
### methods
- __getMs() -> Number (Unix milliseconds)__ returns current value as unix milliseconds
- __setDateTime(ms)__ sets current value to the give 'ms' (unix milliseconds)
- __setMinDateTime(ms)__ sets min value
- __setMaxDateTime(ms)__ sets max value
- __openDte()__ opens UI modal

## `j-filer`
### events
- __selected (items: Array)__ is called when some files or folders are selected

## `j-filer-modal`
### props
- __value (Boolean) | default: false__ visibility of modal
- __title (String) | default: ''__ title of modal
### events
- __selected (items: Array)__ is called when some files or folders are selected

## `j-image-select`
### props
- __value (Array) | default: []__ array of selected currently image urls
- __maxCount (Number) | default: 1000000__ maximum number of selected items
### SCSS Variables:
```
$j-image-select-height: 150px !default;
$j-image-select-close-button-background-color: white !default;
$j-image-select-close-button-color: black !default;
$j-image-select-close-button-hover-color: red !default;
$j-image-select-add-button-color: dodgerblue !default;
$j-image-select-add-button-hover-color: rgb(0, 201, 60) !default;
```

## `j-code-editor`
### props
- __value (String) | default: ''__ code to edit
- __canCopy (Boolean) | default: true__ can user copy the code
- __visible (Boolean) | default: false__ visibility of control
### SCSS Variables:
```
$j-code-editor-height: 400px !default;
```

## `j-jsoneditor`
### props
- __styles (String) | default: 'width: 100%; height: 300px'__
- __schema (Object) | default: {}__ json schema object
- __value (String) | default: ''__ json string
- __mode (String) | default: 'tree'__ values are 'tree', 'view', 'form', 'text'

## `j-block-editor`
### props
- __value (Object) | default: { blocks: [] }__ html template to edit
```
object of type:
{
    blocks: [
        {
            type: '',   //block type
            data: {}    //block custom data
        }
    ]
}
```
- __modules (Array) | default: []__ enabled modules
```
array of enabled modules (vue components) and their config:
[
     {
         type: '',       //module type
         config: {},     //module config
     }
]
```
- __culture (String) | default: cultureManager.getActiveCulture().code__ language of editor
### Usage
- __Core modules__:
    - __aparat__ Aparat.com video
    ```
    default value: {
        url: '',
        caption: '',
        fullWidth: true
    }
    default config: {}
    ```
    - __delimiter__ Horizontal line
    ```
    default value: {}
    default config: {}
    ```
    - __header__ Header text
    ```
    default value: {
        text: ''
    }
    default config: {
        // This is used for putting variables inside header
        schema: '{}',
        // This is used for putting variables inside header
        json: ''
    }
    ```
    - __image-url__ Single image
    ```
    default value: {
        url: '',
        caption: '',
        width: '100%',
        minWidth: '300px',
        maxWidth: '900px',
        height: 'auto',
        minHeight: '',
        maxHeight: ''
    }
    default config: {
        validExtensions: ['jpg', 'jpeg', 'gif', 'png', 'svg']
    }
    ```
    - __images-url__ Multiple images
    ```
    default value: {
        type: 'unknown',        //gallery, carousel, slider
        images: [],             //array of {url, caption}
    }
    default config: {
        validExtensions: ['jpg', 'jpeg', 'gif', 'png', 'svg'],
        validTypes: ['unknown', 'gallery', 'carousel', 'slider']
    }
    ```
    - __paragraph__ Text paragraph
    ```
    default value: {
        text: ''
    }
    default config: {
        // This is used for putting variables inside header
        schema: '{}',
        // This is used for putting variables inside header
        json: ''
    }
    ```
    - __raw__ Raw html
    ```
    default value: {
        text: ''
    }
    default config: {}
    ```
    - __youtube__ Youtube.com video
    ```
    default value: {
        html: '',
        caption: '',
    }
    default config: {}
    ```
    
- In order to register new modules:
```
import { blockEditorRegistry } from 'libj-vue-core/index-extended'
blockEditorRegistry.register(header, new Header(), headerLoc);
```

## `j-template-editor`
### props
- __template (Object) | default: see below__ template to edit. default value:
```
{
    template: {
        id: '',
        createUtc: '',
        updateUtc: '',
        description: '',
        name: '',
        jsonSchema: '',
    },
    translations: []
}
```
- __sample (Object) | default: {}__ sample object for template
- __modules (Array) | default: []__ enabled modules of j-block-editor
```
array of enabled modules (vue components) and their config [
     {
         type: '',       //module type
         config: {},     //module config
     }
]
```