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