Libj-vue-core NPM

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
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

Events

selected: Is called when user clicks on an item. Has item as its argument which is a member of 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
     }
]