VaahCMS

Introduction

Reusable components are super important in VueJS. It helps you save so much time and when done right, really makes your project more readable and maintainable.

One of the key phrases that developers love using is Don’t Repeat Yourself (DRY). In VueJS, there are lots of cases where reusable code is useful: a scroll functionality, a header component.

Components

AutoComplete

Extended input that provide suggestions while the user types. Use with Field to access all functionalities

<AutoComplete :options="options"
              :selected_value="value">

</AutoComplete>
1
2
3
4
"options" = {
    [
      'id': 1,                
      'name': 'XYZ',        
      'slug': 'xyz'
    ],
    [
      'id': 2,  
      'name': 'ABC',         
      'slug': 'abc'
    ]
},

"value" = 'XYZ'

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
PropertiesDescriptionTypeDefault
selected_valueValue of that field_name passes in OptionsString, Number
optionsOptions / suggestionsArray, ObjectRequired
field_nameProperty of the object (if data is array of objects) to use as display text, and to keep track of selected optionStringname
search_fieldsFields that are searchableArray["name"]
iconIcon name to be addedStringsearch
open_on_focusOpen dropdown list on focusBooleanfalse
placeholderField placeholder, displayed when there's no value.StringSearch

AutoCompleteAjax

Extended input that provide suggestions while the user types. The options/suggestions will be fetch from ajax url.

<AutoCompleteAjax :options="options"
              :ajax_url="ajax_url"
              :selected_value="value">

</AutoCompleteAjax>
1
2
3
4
5

Data Format :

"options" = {
    [
      'id': 1,                
      'name': 'XYZ',        
      'slug': 'xyz'
    ],
    [
      'id': 2,  
      'name': 'ABC',         
      'slug': 'abc'
    ]
},

"value" = 'XYZ'

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
PropertiesDescriptionTypeDefault
selected_valueValue of that display_column passes in OptionsString
labelField LabelStringSearch
ajax_urlAjax UrlStringRequired
display_columnFields that are searchableStringname
unique_columnColumn's value display in field option's modalStringid
EventsDescriptionParameters
onSelectTriggers when an option is selected or unsetoption: String

AutoCompleteUsers

Extended input that provide suggestions of VaahCms Users while the user types. Use with Field to access all functionalities

<AutoCompleteUsers @onSelect="setUser"
                   :selected_value="value">

</AutoCompleteUsers>
1
2
3
4
setUser: function (user){
   // ----------
   // ----------
}
1
2
3
4
PropertiesDescriptionTypeDefault
selected_valueBinding valueString, Number
EventsDescriptionParameters
onSelectTriggers when an option is selected or unsetoption: String

ButtonMeta

Button to show Classic modal overlay to include any content you may need

<ButtonMeta :value="value"></ButtonMeta>
1
PropertiesDescriptionTypeDefault
typeType (color) of the buttonStringis-default
labelButton labelStringView
valueModal ContentObject, String

ClickToCopy

Click To Copy Vue.js component

<ClickToCopy :text="label" :data="value"></ClickToCopy>
1
PropertiesDescriptionTypeDefault
textText to displayString
dataData to be copiedString

DatePicker

An input with a simple dropdown/modal for selecting a date, uses native datepicker for mobile

<DatePicker :selected_value="value"></DatePicker>
1
PropertiesDescriptionTypeDefault
iconIcon name to be addedArraycalendar-alt
selected_valueBinding ValueString
placeholderField placeholder, displayed when there's no value.StringType or select a date...
EventsDescriptionParameters
onSelectTriggers when an date is selectedoption: Object, event: $event

FileUploader

Component that can upload anything you throw at it, optimizes images for faster uploads, and offers a great, accessible, silky smooth user experience.

<FileUploader max_size="200KB"
              label="Upload user avatar"
              aspect_ratio="1:1"
              :allow_multiple="false"
              :upload_url="upload_url">
</FileUploader>
1
2
3
4
5
6
PropertiesDescriptionTypeDefault
valueBinding ValueArray
upload_urlUrl to upload a fileString
folder_pathPath of Folder where to upload filesStringpublic/media
file_input_nameThe input field name to useStringfile
file_nameFile Name append in ajax requestString
uidUnique Id for filesStringuid-image-group-current-date
custom_classField ClassStringis-primary
labelField LabelStringDrop your image here or click to upload.
iconIcon name to be addedStringsearch
aspect_ratioImage Crop Aspect Ratio - Set a forced aspect ratio for the FilePond drop area. Useful to make the drop area take up a fixed amount of space.String
allow_multipleEnable or disable adding multiple filesBooleantrue
allowed_typesFile types that allowed for uploadStringimage/jpeg, image/png, image/gif
max_sizeThe maximum size of a uploaded fileString2MB
remove_after_uploadSet true to remove file after uploadBooleantrue
show_allowed_typesSet true to show File Type HintBooleantrue
instant_uploadImmediately upload new filesBooleantrue
EventsDescriptionParameters
afterUploadTriggers when an file is uploadedoption: Object, event: $event

Loader

This component to create placeholder loading, like Facebook cards loading.

<Loader></Loader>
1

Pagination

This component is responsive and flexible pagination.

<Pagination :list="list">
</Pagination>
1
2
{
   "total": 50,
   "per_page": 15,
   "current_page": 1,
   "last_page": 4,
   "first_page_url": "http://laravel.app?page=1",
   "last_page_url": "http://laravel.app?page=4",
   "next_page_url": "http://laravel.app?page=2",
   "prev_page_url": null,
   "path": "http://laravel.app",
   "from": 1,
   "to": 15,
   "data":[
        {
            // Record...
        },
        {
            // Record...
        }
   ]
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
PropertiesDescriptionTypeDefault
listLaravel Pagination Object

TableTrActedBy

This component can be used to show User name in tabular format.

<TableTrActedBy :label="label" 
                 :value="value">
</TableTrActedBy>
1
2
3
PropertiesDescriptionTypeDefault
labelTable Heading
valueTable Data

TableTrDateTime

This component can be used to show Date Time in tabular format.

<TableTrDateTime :label="label" 
                 :value="value" 
                 :is_upper_case="false">
</TableTrDateTime>
1
2
3
4
PropertiesDescriptionTypeDefault
labelTable Heading
valueTable Data
is_upper_caseWhether to show value in Uppercase format

TableTrActedBy

This component can be used to show User name in tabular format.

<TableTrDateTime :label="label" 
                 :value="value">
</TableTrDateTime>
1
2
3
PropertiesDescriptionTypeDefault
labelTable Heading
valueTable Data

TableTrMeta

This component can be used to visualize view button to show Object or Array data in modal.

<TableTrMeta :label="label" 
             :value="value">
</TableTrMeta>
1
2
3
PropertiesDescriptionTypeDefault
labelTable Heading
valueTable Data

TableTrStatus

This component can be used to show value as status in tabular format.

<TableTrStatus :label="label" 
               :value="value">
</TableTrStatus>
1
2
3
PropertiesDescriptionTypeDefault
labelTable Heading
valueTable Data

TableTrTag

This component can be used to show value as tag in tabular format.

<TableTrTag :label="label" 
            :value="value"
            :is_copiable="false"
            :is_hashed="false">
</TableTrTag>
1
2
3
4
5
PropertiesDescriptionTypeDefault
labelTable Heading
valueTable Data
is_copiableSet true to allow copy that value
is_hashedWhether to show # as prefix with value

TableTrUrl

This component can be used to visualize Url in tabular format. “URL link” columns are used to render hyperlinks that can be clicked to open pages within your website, or in external websites.

<TableTrUrl :label="label" 
               :value="value">
</TableTrUrl>
1
2
3
PropertiesDescriptionTypeDefault
labelTable Heading
valueTable Data

TableTrView

This component can be used to visualize data value in tabular format.

<TableTrView :label="label" 
               :value="value" 
               :is_copiable="false" 
               :is_upper_case="true">

</TableTrView>
1
2
3
4
5
6
PropertiesDescriptionTypeDefault
labelTable Heading
valueTable Data
is_copiableSet true to allow copy that value
is_upper_caseWhether to show value in Uppercase format

TableTrYesNo

This component can be used to visualize Boolean value in tabular format.

<TableTrYesNo :label="label" :value="value">

</TableTrYesNo>
1
2
3
PropertiesDescriptionTypeDefault
labelTable Heading
valueTable Data

TagInputs

A simple tag input field that can have autocomplete functionality

<TagInputs :selected_value="value" :options="options">

</TagInputs>
1
2
3
"options" = {
    [
      'id': 1,                
      'name': 'XYZ',        
      'slug': 'xyz'
    ],
    [
      'id': 2,  
      'name': 'ABC',         
      'slug': 'abc'
    ]
},

"value" = {
    [
        'id': 1,                
         'name': 'XYZ',        
         'slug': 'xyz'
    ]
}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
PropertiesDescriptionTypeDefault
selected_valueBinding valueArray
optionsArray of available options.Array
field_nameProperty of the object (if data is array of objects) to use as display textStringname
search_fieldsFields that are searchableArray["name", "slug"]
iconIcon name to be addedStringsearch
open_on_focusOpens a dropdown with choices when the input field is focusedBooleanfalse
allow_newWhen autocomplete, it allow to add new tagsBooleanfalse
placeholderField placeholder, displayed when there's no value.StringSearch

TreeSelect

TreeSelect is a multi-select component with hierarchical options support for Vue.js.

 <TreeSelect v-model="type_id"
             placeholder="Select a Type"
             :is_clearable="false"
             :is_multiple="false" 
             :options="options" >

</TreeSelect>
1
2
3
4
5
6
7
options: [ 
            {
               id: 'a',
               name: 'a',
               children: [ 
                   {
                      id: 'aa',
                      name: 'aa',
                   }, 
                   {
                      id: 'ab',
                      name: 'ab',
                   } 
               ],
            }, 
            {
               id: 'b',
               name: 'b',
            }, 
            {
               id: 'c',
               name: 'c',
            } 
         ],
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
PropertiesDescriptionTypeDefault
v-modelThe value of the control. Should be id or node object when :is_multiple="false", or an array of id or node object when :multiple="true".String, Number, Array, Object
optionsArray of available options.Array, Object
ajax_urlAjax UrlString, Number
custom_classField classesString
labelField labelString
labelPositionField label positionString
placeholderField placeholder, displayed when there's no value.String
is_multipleSet true to allow selecting multiple options (a.k.a., multi-select mode).Booleanfalse
is_clearableWhether to show an "×" button that resets value.Booleanfalse
show_countWhether to show a children count next to the label of each branch node.Booleantrue

TreeView

The TreeView displays hierarchical data in a traditional tree structure.

It supports user interaction through mouse or touch events and performs re-ordering operations by using the drag-and-drop functionality.

<TreeView :options="options">

</TreeView>
1
2
3
 data: [
          {
            name: 'Node 1',
            id: 1,
            pid: 0,
            children: [
              {
                name: 'Node 1-2',
                id: 2,
                isLeaf: true,
                pid: 1
              }
            ]
          },
          {
            name: 'Node 2',
            id: 3,
            pid: 0,
            disabled: true
          },
          {
            name: 'Node 3',
            id: 4,
            pid: 0
          }
        ]
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
PropertiesDescriptionTypeDefault
ajax_list_urlUrl to get list of optionsString
optionsBinding optionsArray, Object
ajax_delete_urlUrl to deleteString

VaahVueEditor

This is a TipTap Editor. Tiptap gives you full control about every single aspect of your text editor experience.

<VaahVueEditor :content="content">

</VaahVueEditor>
1
2
3
PropertiesDescriptionTypeDefault
contentContent or Data property you wish to bind it to

VueErrors

The component to display single error message or multiple error messages to user.

<VueErrors :list="list">

</VueErrors>
1
2
3
"list":[
    'Error Message 1',
    'Error Message 2'
]
1
2
3
4
PropertiesDescriptionTypeDefault
listArray of MessagesArray, Object

VueMessages

The component to display single message or multiple messages to user.

<VueMessages :list="list">

</VueMessages>
1
2
3
"list":[
    'Message 1',
    'Message 2'
]
1
2
3
4
PropertiesDescriptionTypeDefault
listArray of MessagesArray, Object

Content Fields

One component applicable to multiple elements. This component is basically use for Cms module but you can use it as an other reusable component.

import ContentFieldAll from '../../../vaahvue/reusable/content-fields/All'
1
<ContentFieldAll :label="label"
     :field_slug="field_slug"    // text, slug, textarea, number, phone-number, boolean, 
                                 editor, code-mirror, select, date, time, date-time, 
                                 user, email, password, uuid, currency-code, list, image,
                                  media, image-group, phone-number, address, relation, 
                                 tags, json, seo-meta-tags, twitter-card, facebook-card, 
     :meta="meta"
     :placeholder="placeholder"
     :labelPosition="label_position"
     v-model="value">
</ContentFieldAll>
1
2
3
4
5
6
7
8
9
10
11

Value Structure

Common Attributes
value: null

type: null

size: null                        

custom_class : null                 // Field classes

label : null                        // Field label

labelPosition : null                // Field label position

1
2
3
4
5
6
7
8
9
10
11
12
Seo Meta Tags
value:{
    seo_description: {
        content: null
        maxlength: 200
        message: "Description of content (maximum 200 characters)"
        name: "SEO Meta Description"
        type: "textarea"
    }
    seo_keywords: {
        content: null
        maxlength: 200
        name: "SEO Meta Keywords"
        type: "textarea"
    }
    seo_title: {
        content: null
        maxlength: 70
        name: "SEO Title"
        type: "text"
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Twitter Card
value:{
    "twitter_site":{
        name: "twitter:site",
        message: "@username of website. Either twitter:site or twitter:site:id is required.",
        maxlength: 70,
        type: 'text',
        content: null
    },
    "twitter_title":{
        name: "twitter:title",
        type: 'text',
        message: "Title of content (max 70 characters).",
        maxlength: 70,
        content: null
    },
    "twitter_description":{
        name: "twitter:description",
        type: 'textarea',
        message: "Description of content (maximum 200 characters)",
        maxlength: 200,
        content: null
    },
    "twitter_image":{
        name: "twitter:image",
        type: 'text',
        message: "URL of image to use in the card. Images must be less than 5MB in size. JPG, PNG, WEBP and GIF formats are supported.",
        maxlength: 200,
        content: null
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
Facebook Card
value:{
    "og_title":{
        name: "og:title",
        type: 'text',
        message: "Title of content (max 70 characters).",
        maxlength: 70,
        content: null
    },
    "og_description":{
        name: "og:description",
        type: 'textarea',
        message: "Description of content (maximum 200 characters)",
        maxlength: 200,
        content: null
    },
    "og_image":{
        name: "og:image",
        type: 'text',
        message: "URL of image to use in the card. Images must be less than 5MB in size. JPG, PNG, WEBP and GIF formats are supported.",
        maxlength: 200,
        content: null
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
Address
value:{
    "address_line_1": {
        name: "Address Line 1",
        type: 'text',
        maxlength: 50,
        content: null
    },
    "address_line_2":{
        name: "Address Line 2",
        type: 'text',
        maxlength: 50,
        content: null
    },
    "landmark":{
        name: "Landmark",
        type: 'text',
        maxlength: 50,
        content: null
    },
    "city":{
        name: "City",
        type: 'text',
        maxlength: 50,
        content: null
    },
    "state":{
        name: "State",
        type: 'text',
        maxlength: 50,
        content: null
    },
    "country":{
        name: "Country",
        type: 'text',
        maxlength: 20,
        content: null
    },
    "zip_code": {
        name: "Zip Code",
        type: 'text',
        maxlength: 20,
        content: null
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
Code Mirror

type: "text/html"               // mode of code mirror

1
2
3
Select
meta : {
    option: {}                 // array , object
    is_multiple: true / false
}

1
2
3
4
5
Tags
ajax_url  : null               //     Ajax Url

display_column : "name"        // Fields that are searchable	

unique_column : "email"        // Column's value display in field option's modal	

1
2
3
4
5
6
Relation

app_url  : null               

meta : {
    is_multiple: true / false
}

1
2
3
4
5
6
7
Image / Image Group / Media

app_url  : null       // Base Url      

upload_url : null     // Url to upload a file	

1
2
3
4
5
PropertiesDescriptionTypeDefault
field_slugArray of MessagesString
valueBinding ValueString, Number, Array, Object
typeType (color) of the fieldString
sizeSize of the fieldString
custom_classField classesString
labelField labelString
labelPositionField label positionString
placeholderField placeholder, displayed when there's no value.String
ajax_urlAjax UrlString
app_urlUrl to get Relation's OptionsString
upload_urlUrl to upload a fileString
currency_optionsOptions for Currency CodeArray
metaMeta valueArray, Object
display_columnFields that are searchable / visible in fieldStringname
unique_columnColumn's value display in tag input's modalStringemail
is_simpleSet true to visible all features / buttonsBooleanfalse
EventsDescriptionParameters
onInputTriggers when value is changedNumber
onChangeTriggers when an option is selected or unsetoption: String
onBlurTriggers when input has lost focusevent: $event
onFocusTriggers when input has received focusevent: $event