Reusable

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.

How to use reusable component?

First you have to check that your Module or Theme has reusable Components at VaahCms/Themes/BlogTheme/Vue/vaahvue/reusable.

If not found then download it from here.

Now, you need to import and register your Components in Script before use.

Example:

import AutoComplete from "../../vaahvue/reusable/AutoComplete";

export default {
    computed: {

    },
    components: {
        AutoComplete
    },
    data() {
        return {
            
        }
    },
    watch: {
        
    }
}

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>

import AutoComplete from "../../vaahvue/reusable/AutoComplete";

export default {
    components:{
        AutoComplete
    },
    data()
    {
        return {
            "options" : [
                {
                    'id': 1,
                    'name': 'XYZ',
                    'slug': 'xyz'
                },
                {
                    'id': 2,
                    'name': 'ABC',
                    'slug': 'abc'
                }
            ],

            "value" : 'XYZ'
        }
    },
    
}

Properties	Description	Type	Default
selected_value	Value of that `field_name` passes in Options	String, Number
options	Options / suggestions	Array, Object	`Required`
field_name	Property of the object (if data is array of objects) to use as display text, and to keep track of selected option	String	name
search_fields	Fields that are searchable	Array	"name"
icon	Icon name to be added	String	search
open_on_focus	Open dropdown list on focus	Boolean	false
placeholder	Field placeholder, displayed when there's no value.	String	Search

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>

Data Format :

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

"value" = 'XYZ'

Properties	Description	Type	Default
selected_value	Value of that `display_column` passes in Options	String
label	Field Label	String	Search
ajax_url	Ajax Url	String	`Required`
display_column	Fields that are searchable	String	name
unique_column	Column's value display in field option's modal	String	id

Events	Description	Parameters
onSelect	Triggers when an option is selected or unset	option: 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>

setUser: function (user){
   // ----------
   // ----------
}

Properties	Description	Type	Default
selected_value	Binding value	String, Number

Events	Description	Parameters
onSelect	Triggers when an option is selected or unset	option: String

ButtonMeta

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

<ButtonMeta :value="value"></ButtonMeta>

Properties	Description	Type	Default
type	Type (color) of the button	String	is-default
label	Button label	String	View
value	Modal Content	Object, String

ClickToCopy

Click To Copy Vue.js component

<ClickToCopy :text="label" :data="value"></ClickToCopy>

Properties	Description	Type	Default
text	Text to display	String
data	Data to be copied	String

DatePicker

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

<DatePicker :selected_value="value"></DatePicker>

Properties	Description	Type	Default
icon	Icon name to be added	Array	calendar-alt
selected_value	Binding Value	String
placeholder	Field placeholder, displayed when there's no value.	String	Type or select a date...

Events	Description	Parameters
onSelect	Triggers when an date is selected	option: 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>

Properties	Description	Type	Default
value	Binding Value	Array
upload_url	Url to upload a file	String
folder_path	Path of Folder where to upload files	String	public/media
file_input_name	The input field name to use	String	file
file_name	File Name append in ajax request	String
uid	Unique Id for files	String	uid-image-group-current-date
custom_class	Field Class	String	is-primary
label	Field Label	String	Drop your image here or click to upload.
icon	Icon name to be added	String	search
aspect_ratio	Image 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_multiple	Enable or disable adding multiple files	Boolean	true
allowed_types	File types that allowed for upload	String	image/jpeg, image/png, image/gif
max_size	The maximum size of a uploaded file	String	2MB
remove_after_upload	Set `true` to remove file after upload	Boolean	true
show_allowed_types	Set `true` to show File Type Hint	Boolean	true
instant_upload	Immediately upload new files	Boolean	true

Events	Description	Parameters
afterUpload	Triggers when an file is uploaded	option: Object, event: $event

Loader

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

<Loader></Loader>

Pagination

This component is responsive and flexible pagination.

<Pagination :list="list">
</Pagination>

{
   "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...
        }
   ]
}

Properties	Description	Type	Default
list	Laravel Pagination Object

TableTrActedBy

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

<TableTrActedBy :label="label" 
                 :value="value">
</TableTrActedBy>

Properties	Description	Type	Default
label	Table Heading
value	Table Data

TableTrDateTime

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

<TableTrDateTime :label="label" 
                 :value="value" 
                 :is_upper_case="false">
</TableTrDateTime>

Properties	Description	Type	Default
label	Table Heading
value	Table Data
is_upper_case	Whether 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>

Properties	Description	Type	Default
label	Table Heading
value	Table 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>

Properties	Description	Type	Default
label	Table Heading
value	Table Data

TableTrStatus

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

<TableTrStatus :label="label" 
               :value="value">
</TableTrStatus>

Properties	Description	Type	Default
label	Table Heading
value	Table 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>

Properties	Description	Type	Default
label	Table Heading
value	Table Data
is_copiable	Set true to allow copy that value
is_hashed	Whether 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>

Properties	Description	Type	Default
label	Table Heading
value	Table 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>

Properties	Description	Type	Default
label	Table Heading
value	Table Data
is_copiable	Set true to allow copy that value
is_upper_case	Whether 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>

Properties	Description	Type	Default
label	Table Heading
value	Table Data

TagInputs

A simple tag input field that can have autocomplete functionality

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

</TagInputs>

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

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

Properties	Description	Type	Default
selected_value	Binding value	Array
options	Array of available options.	Array
field_name	Property of the object (if data is array of objects) to use as display text	String	name
search_fields	Fields that are searchable	Array	"name", "slug"
icon	Icon name to be added	String	search
open_on_focus	Opens a dropdown with choices when the input field is focused	Boolean	false
allow_new	When autocomplete, it allow to add new tags	Boolean	false
placeholder	Field placeholder, displayed when there's no value.	String	Search

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>

options: [ 
            {
               id: 'a',
               name: 'a',
               children: [ 
                   {
                      id: 'aa',
                      name: 'aa',
                   }, 
                   {
                      id: 'ab',
                      name: 'ab',
                   } 
               ],
            }, 
            {
               id: 'b',
               name: 'b',
            }, 
            {
               id: 'c',
               name: 'c',
            } 
         ],

Properties	Description	Type	Default
v-model	The 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
options	Array of available options.	Array, Object
ajax_url	Ajax Url	String, Number
custom_class	Field classes	String
label	Field label	String
labelPosition	Field label position	String
placeholder	Field placeholder, displayed when there's no value.	String
is_multiple	Set true to allow selecting multiple options (a.k.a., multi-select mode).	Boolean	false
is_clearable	Whether to show an "×" button that resets value.	Boolean	false
show_count	Whether to show a children count next to the label of each branch node.	Boolean	true

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>

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

Properties	Description	Type
ajax_list_url	Url to get list of options	String
options	Binding options	Array, Object
ajax_delete_url	Url to delete	String

VaahVueEditor

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

<VaahVueEditor :content="content">

</VaahVueEditor>

Properties	Description	Type	Default
content	Content 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>

"list":[
    'Error Message 1',
    'Error Message 2'
]

Properties	Description	Type	Default
list	Array of Messages	Array, Object

VueMessages

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

<VueMessages :list="list">

</VueMessages>

"list":[
    'Message 1',
    'Message 2'
]

Properties	Description	Type	Default
list	Array of Messages	Array, Object

VvJoditEditor

This is a Jodit Editor. An excellent WYSIWYG editor written in pure TypeScript without the use of additional libraries. Its file editor and image editor.

<VvJoditEditor :content="content">

</VvJoditEditor>

Properties	Description	Type	Default
content	Content or Data property you wish to bind it to
label	Field label
labelPosition	Position of label
is_simple	Set `true` to show limited options of Editor

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'

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

Value Structure

Common Attributes

value: null

type: null

size: null                        

custom_class : null                 // Field classes

label : null                        // Field label

labelPosition : null                // Field label position

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

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

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

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

Code Mirror


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

Select

meta : {
    option: {}                 // array , object
    is_multiple: true / false
}

Relation


app_url  : null               

meta : {
    is_multiple: true / false
}

Image / Image Group / Media


app_url  : null       // Base Url      

upload_url : null     // Url to upload a file

Properties	Description	Type	Default
field_slug	Array of Messages	String
value	Binding Value	String, Number, Array, Object
type	Type (color) of the field	String
size	Size of the field	String
custom_class	Field classes	String
label	Field label	String
labelPosition	Field label position	String
placeholder	Field placeholder, displayed when there's no value.	String
ajax_url	Ajax Url	String
app_url	Url to get Relation's Options	String
upload_url	Url to upload a file	String
currency_options	Options for Currency Code	Array
meta	Meta value	Array, Object
display_column	Fields that are searchable / visible in field	String	name
unique_column	Column's value display in tag input's modal	String	email
is_simple	Set `true` to visible all features / buttons	Boolean	false

Events	Description	Parameters
onInput	Triggers when value is changed	Number
onChange	Triggers when an option is selected or unset	option: String
onBlur	Triggers when input has lost focus	event: $event
onFocus	Triggers when input has received focus	event: $event

Edit this page on GitHub

VaahvueHelpers

ModuleVaahCms Module