Fields

photo

model must be valid photo url

{
type: "photo",
cssClasses: "w-full",
inputName: 'media',
label: "Selected Media",
model: "media",
multiple: false,
styleClasses: 'col-md-12'
},

media-upload

{
type: "media-upload",
cssClasses: "w-full",
inputName: 'cover',
label: "Cover",
model: "cover",
multiple: false,
styleClasses: 'col-md-6',
validator: ['required', 'array']
},
$user->saveMedia($request->cover, 'collection_name');

media-manager

{
type: "media-manager",
cssClasses: "w-full",
mediaClasses: "w-full h-full",
disabled: true,
inputName: 'media',
label: "Media",
model: "media",
multiple: false,
styleClasses: 'col-md-12',
validator: ['required', 'array'],
onChanged: function (model, newVal, oldVal, field) {
console.log(model, newVal, oldVal, field)
if (newVal.tags != "") model.tags = newVal.tags
}
}

check-box-ext

{
type: "checkBoxExt",
cssClasses: "",
column: 3,
label: "Waht am i ?",
model: "",
options: [
{
label: "Cute",
value: ""
}
]
}

ctk-date-time-picker

{
type: "ctkDateTimePicker",
cssClasses: "w-full",
inputName: "dob",
label: "Date of Birth"
model: ""
}

divider

{
type: "divider",
}

heading

{
type: "heading",
cssClasses: "my-2",
title: "",
subtitle: ""
}

location-setter

{
type: "locationSetter",
inputType: "text",
inputName: "location",
label: "Mark your exact location",
model: "location",
required: true,
placeholder: ""
}

services

{
type: "checkBoxExt",
cssClasses: "",
label: "Your services",
model: "",
options: [
{
label: "Delivery",
description: "Delivery me up",
value: "20",
is_active: false
},
{
label: "Pickup",
description: "Pick me up",
value: "5",
is_active: true
}
]
}

table-input

{
type: "tableInput",
model: "",
cssClasses: "w-full",
label: "Treatment charges?",
fields: [
{"key": "treatment", "label": "Treatment", },
{"key": "charge", "label": "Charge (RM)", }
],
items: [
{"treatment": "Consultation Fee", "charge": 32,},
{"treatment": "To fill", "charge": 10,},
]
}

title

{
type: "title",
title: "Hi tq all"
}

phone-number

{
type: "phoneNumber",
inputType: "text",
inputName: "phone",
label: "Contact Number",
model: "phone",
mustVerified: true,
checkUrl: "{{ route('verify.check') }}",
sendUrl: "{{ route('verify.send') }}",
verifyUrl: "{{ route('verify.code') }}",
required: true,
validator: ['required', 'requiredObject']
}

card

{
type: "card",
inputType: "text",
inputName: "phone_number",
label: "Contact Number",
model: "phone_number",
checkUrl: "{{ route('verify.check') }}",
sendUrl: "{{ route('verify.send') }}",
verifyUrl: "{{ route('verify.code') }}",
required: true,
validator: ['required']
}

country | state

{
type: "country",
inputName: "address[country]",
model: "address.country",
label: "Country",
required: true,
styleClasses: "col",
validator: ['required']
},
{
type: "state",
inputName: "address[state]",
model: "address.state",
label: "State",
required: true,
styleClasses: "col",
validator: ['required']
}

multiselect

{
type: "multiselect",
model: "category_id",
label: "Category",
inputName: 'category_id',
placeholder: "Select your favorite library",
required: true,
styleClasses: 'col-md-6',
selectOptions: {
multiple: false,
key: "name",
label: "name",
searchable: true,
closeOnSelect: true,
customLabel: this.vueMultiselectCustomLabel('_data_categories'),
allowEmpty: false
},
values: this.vueMultiselectValues('_data_categories')
},

repeater

{
type: "repeater",
label: "Sources",
inputName: "sources",
model: "sources",
fields: [
{
type: "input",
inputType: "text",
label: "Source Name",
inputName: "name",
model: "name",
required: true,
styleClasses: 'col-md-6',
placeholder: "",
validator: ['required']
},
{
type: "input",
inputType: "text",
label: "Source URL",
inputName: "url",
model: "url",
required: true,
styleClasses: 'col-md-6',
placeholder: "",
validator: ['required']
}
],
},

rich-editor

{
type: "rich-editor",
inputName: "content",
label: "Content",
model: "content",
required: true,
height: "550",
placeholder: "",
validator: ['required']
}

radio-box

{
type: "radio-box",
inputName: "radio",
options: [
{
label: "hi",
value: 3
}
]
}

masked-input

{
type: "masked-input",
label: "Price to compare",
model: "price_old",
styleClasses: 'w-6/12',
required: true,
validator: ['required'],
placeholder: ""
}

toggle

{
type: "toggle",
label: "Charge tax on this product",
model: "taxable",
styleClasses: 'w-6/12',
required: true,
validator: ['required'],
placeholder: ""
}

button

{
type: "toggle",
label: "Charge tax on this product",
model: "taxable",
options: { action: null }
}