xclele/vue-material-kit
1
0
Fork 0
mirror of https://github.com/creativetimofficial/vue-material-kit.git synced 2025-05-23 04:04:22 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

update the content

Browse Source
This commit is contained in:
sajadevo 2022-08-19 17:33:50 +04:30
parent ef533be92f
commit 89e9116917
57 changed files with 455 additions and 403 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

491
src/assets/js/material-kit-pro.js
View File

@ -1,7 +1,7 @@
/*! /*!
========================================================= =========================================================
* Material Kit 2 PRO - v3.0.2 * Material Kit 2 - v3.0.2
========================================================= =========================================================
* Product Page: https://www.creative-tim.com/product/soft-ui-design-system * Product Page: https://www.creative-tim.com/product/soft-ui-design-system
@ -22,23 +22,23 @@
function debounce(func, wait, immediate) { function debounce(func, wait, immediate) {
var timeout; var timeout;
return function() { return function () {
var context = this, var context = this,
args = arguments; args = arguments;
clearTimeout(timeout); clearTimeout(timeout);
timeout = setTimeout(function() { timeout = setTimeout(function () {
timeout = null; timeout = null;
if (!immediate) func.apply(context, args); if (!immediate) func.apply(context, args);
}, wait); }, wait);
if (immediate && !timeout) func.apply(context, args); if (immediate && !timeout) func.apply(context, args);
}; };
}; }
// Function for smooth scroll to element // Function for smooth scroll to element
function smoothToPricing(id) { function smoothToPricing(id) {
if (document.getElementById(id)) { if (document.getElementById(id)) {
document.getElementById(id).scrollIntoView({ document.getElementById(id).scrollIntoView({
behavior: 'smooth' behavior: "smooth"
}); });
} }
} }
@ -46,277 +46,341 @@ function smoothToPricing(id) {
// Debounce function // Debounce function
function debounce(func, wait, immediate) { function debounce(func, wait, immediate) {
var timeout; var timeout;
return function() { return function () {
var context = this, var context = this,
args = arguments; args = arguments;
clearTimeout(timeout); clearTimeout(timeout);
timeout = setTimeout(function() { timeout = setTimeout(function () {
timeout = null; timeout = null;
if (!immediate) func.apply(context, args); if (!immediate) func.apply(context, args);
}, wait); }, wait);
if (immediate && !timeout) func.apply(context, args); if (immediate && !timeout) func.apply(context, args);
}; };
}; }
// initialization of Popovers // initialization of Popovers
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]')) var popoverTriggerList = [].slice.call(
var popoverList = popoverTriggerList.map(function(popoverTriggerEl) { document.querySelectorAll('[data-bs-toggle="popover"]')
return new bootstrap.Popover(popoverTriggerEl) );
}) var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl);
});
// initialization of Tooltips // initialization of Tooltips
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')) var tooltipTriggerList = [].slice.call(
var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) { document.querySelectorAll('[data-bs-toggle="tooltip"]')
return new bootstrap.Tooltip(tooltipTriggerEl) );
}) var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl);
});
// helper for adding on all elements multiple attributes // helper for adding on all elements multiple attributes
function setAttributes(el, options) { function setAttributes(el, options) {
Object.keys(options).forEach(function(attr) { Object.keys(options).forEach(function (attr) {
el.setAttribute(attr, options[attr]); el.setAttribute(attr, options[attr]);
}) });
} }
// activate popovers // activate popovers
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="popover"]')) var popoverTriggerList = [].slice.call(
var popoverList = popoverTriggerList.map(function(popoverTriggerEl) { document.querySelectorAll('[data-toggle="popover"]')
return new bootstrap.Popover(popoverTriggerEl) );
}) var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl);
});
// activate tooltips // activate tooltips
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-toggle="tooltip"]')) var tooltipTriggerList = [].slice.call(
var tooltipList = tooltipTriggerList.map(function(tooltipTriggerEl) { document.querySelectorAll('[data-toggle="tooltip"]')
return new bootstrap.Tooltip(tooltipTriggerEl) );
}) var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
return new bootstrap.Tooltip(tooltipTriggerEl);
});
window.onload = function () {
window.onload = function() {
// Material Design Input function // Material Design Input function
var inputs = document.querySelectorAll('input'); var inputs = document.querySelectorAll("input");
for (var i = 0; i < inputs.length; i++) { for (var i = 0; i < inputs.length; i++) {
inputs[i].addEventListener('focus', function(e) { inputs[i].addEventListener(
this.parentElement.classList.add('is-focused'); "focus",
}, false); function (e) {
this.parentElement.classList.add("is-focused");
},
false
);
inputs[i].onkeyup = function(e) { inputs[i].onkeyup = function (e) {
if (this.value != "") { if (this.value != "") {
this.parentElement.classList.add('is-filled'); this.parentElement.classList.add("is-filled");
} else { } else {
this.parentElement.classList.remove('is-filled'); this.parentElement.classList.remove("is-filled");
} }
}; };
inputs[i].addEventListener('focusout', function(e) { inputs[i].addEventListener(
if (this.value != "") { "focusout",
this.parentElement.classList.add('is-filled'); function (e) {
} if (this.value != "") {
this.parentElement.classList.remove('is-focused'); this.parentElement.classList.add("is-filled");
}, false); }
this.parentElement.classList.remove("is-focused");
},
false
);
} }
// Ripple Effect // Ripple Effect
var ripples = document.querySelectorAll('.btn'); var ripples = document.querySelectorAll(".btn");
for (var i = 0; i < ripples.length; i++) { for (var i = 0; i < ripples.length; i++) {
ripples[i].addEventListener('click', function(e) { ripples[i].addEventListener(
var targetEl = e.target; "click",
var rippleDiv = targetEl.querySelector('.ripple'); function (e) {
var targetEl = e.target;
var rippleDiv = targetEl.querySelector(".ripple");
rippleDiv = document.createElement('span'); rippleDiv = document.createElement("span");
rippleDiv.classList.add('ripple'); rippleDiv.classList.add("ripple");
rippleDiv.style.width = rippleDiv.style.height = Math.max(targetEl.offsetWidth, targetEl.offsetHeight) + 'px'; rippleDiv.style.width = rippleDiv.style.height =
targetEl.appendChild(rippleDiv); Math.max(targetEl.offsetWidth, targetEl.offsetHeight) + "px";
targetEl.appendChild(rippleDiv);
rippleDiv.style.left = (e.offsetX - rippleDiv.offsetWidth / 2) + 'px'; rippleDiv.style.left = e.offsetX - rippleDiv.offsetWidth / 2 + "px";
rippleDiv.style.top = (e.offsetY - rippleDiv.offsetHeight / 2) + 'px'; rippleDiv.style.top = e.offsetY - rippleDiv.offsetHeight / 2 + "px";
rippleDiv.classList.add('ripple'); rippleDiv.classList.add("ripple");
setTimeout(function() { setTimeout(function () {
rippleDiv.parentElement.removeChild(rippleDiv); rippleDiv.parentElement.removeChild(rippleDiv);
}, 600); }, 600);
}, false); },
false
);
} }
}; };
// Multi Level Dropdown // Multi Level Dropdown
function dropDown(a) { function dropDown(a) {
if (!document.querySelector('.dropdown-hover')) { if (!document.querySelector(".dropdown-hover")) {
event.stopPropagation(); event.stopPropagation();
event.preventDefault(); event.preventDefault();
var multilevel = a.parentElement.parentElement.children; var multilevel = a.parentElement.parentElement.children;
for (var i = 0; i < multilevel.length; i++) { for (var i = 0; i < multilevel.length; i++) {
if (multilevel[i].lastElementChild != a.parentElement.lastElementChild) { if (multilevel[i].lastElementChild != a.parentElement.lastElementChild) {
multilevel[i].lastElementChild.classList.remove('show'); multilevel[i].lastElementChild.classList.remove("show");
multilevel[i].firstElementChild.classList.remove('show'); multilevel[i].firstElementChild.classList.remove("show");
} }
} }
if (!a.nextElementSibling.classList.contains("show")) { if (!a.nextElementSibling.classList.contains("show")) {
a.nextElementSibling.classList.add("show"); a.nextElementSibling.classList.add("show");
a.classList.add("show"); a.classList.add("show");
} else { } else {
a.nextElementSibling.classList.remove("show"); a.nextElementSibling.classList.remove("show");
a.classList.remove("show"); a.classList.remove("show");
} }
} }
} }
// Colored shadows from Cards // Colored shadows from Cards
if (document.querySelector('.blur-shadow-image')) { if (document.querySelector(".blur-shadow-image")) {
var shadowCards = document.querySelectorAll('.blur-shadow-image'); var shadowCards = document.querySelectorAll(".blur-shadow-image");
var shadowCardsRounded = document.querySelectorAll('.blur-shadow-image.rounded-circle'); var shadowCardsRounded = document.querySelectorAll(
".blur-shadow-image.rounded-circle"
);
if (shadowCardsRounded) { if (shadowCardsRounded) {
for (var i = 0; i < shadowCardsRounded.length; i++) { for (var i = 0; i < shadowCardsRounded.length; i++) {
var div = document.createElement("DIV"); var div = document.createElement("DIV");
shadowCardsRounded[i].parentElement.appendChild(div); shadowCardsRounded[i].parentElement.appendChild(div);
div.classList.add('colored-shadow', 'rounded'); div.classList.add("colored-shadow", "rounded");
var currentSrc = shadowCardsRounded[i].children[0].getAttribute('src'); var currentSrc = shadowCardsRounded[i].children[0].getAttribute("src");
var el = shadowCardsRounded[i].nextElementSibling; var el = shadowCardsRounded[i].nextElementSibling;
el.style.backgroundImage = 'url(' + currentSrc + ')'; el.style.backgroundImage = "url(" + currentSrc + ")";
} }
} }
if (shadowCards) { if (shadowCards) {
for (var i = 0; i < shadowCards.length; i++) { for (var i = 0; i < shadowCards.length; i++) {
var div = document.createElement("DIV"); var div = document.createElement("DIV");
shadowCards[i].parentElement.appendChild(div); shadowCards[i].parentElement.appendChild(div);
div.classList.add('colored-shadow'); div.classList.add("colored-shadow");
var currentSrc = shadowCards[i].children[0].getAttribute('src'); var currentSrc = shadowCards[i].children[0].getAttribute("src");
var el = shadowCards[i].nextElementSibling; var el = shadowCards[i].nextElementSibling;
el.style.backgroundImage = 'url(' + currentSrc + ')'; el.style.backgroundImage = "url(" + currentSrc + ")";
} }
} }
} }
// Colored shadows for Avatars // Colored shadows for Avatars
if (document.querySelector('.blur-shadow-avatar')) { if (document.querySelector(".blur-shadow-avatar")) {
var shadowCards = document.querySelectorAll('.blur-shadow-avatar'); var shadowCards = document.querySelectorAll(".blur-shadow-avatar");
var shadowCardsRounded = document.querySelectorAll('.blur-shadow-avatar.rounded-circle'); var shadowCardsRounded = document.querySelectorAll(
".blur-shadow-avatar.rounded-circle"
);
if (shadowCardsRounded) { if (shadowCardsRounded) {
for (var i = 0; i < shadowCardsRounded.length; i++) { for (var i = 0; i < shadowCardsRounded.length; i++) {
var div = document.createElement("DIV"); var div = document.createElement("DIV");
shadowCardsRounded[i].parentElement.appendChild(div); shadowCardsRounded[i].parentElement.appendChild(div);
div.classList.add('colored-shadow', 'rounded', 'start-0', 'end-0', 'mx-auto'); div.classList.add(
"colored-shadow",
"rounded",
"start-0",
"end-0",
"mx-auto"
);
var avatarClasses = ['avatar-xs', 'avatar-sm', 'avatar-lg', 'avatar-xl', 'avatar-xxl']; var avatarClasses = [
"avatar-xs",
"avatar-sm",
"avatar-lg",
"avatar-xl",
"avatar-xxl"
];
for (var k = 0; k < avatarClasses.length; k++) { for (var k = 0; k < avatarClasses.length; k++) {
if (shadowCardsRounded[i].firstElementChild.classList.contains(avatarClasses[k])) { if (
shadowCardsRounded[i].firstElementChild.classList.contains(
avatarClasses[k]
)
) {
div.classList.add(avatarClasses[k]); div.classList.add(avatarClasses[k]);
} }
} }
var currentSrc = shadowCardsRounded[i].children[0].getAttribute('src'); var currentSrc = shadowCardsRounded[i].children[0].getAttribute("src");
var el = shadowCardsRounded[i].nextElementSibling; var el = shadowCardsRounded[i].nextElementSibling;
el.style.backgroundImage = 'url(' + currentSrc + ')'; el.style.backgroundImage = "url(" + currentSrc + ")";
} }
} }
if (shadowCards) { if (shadowCards) {
for (var i = 0; i < shadowCards.length; i++) { for (var i = 0; i < shadowCards.length; i++) {
var div = document.createElement("DIV"); var div = document.createElement("DIV");
shadowCards[i].parentElement.appendChild(div); shadowCards[i].parentElement.appendChild(div);
div.classList.add('colored-shadow', 'start-0', 'end-0', 'mx-auto'); div.classList.add("colored-shadow", "start-0", "end-0", "mx-auto");
var avatarClasses = ['avatar-xs', 'avatar-sm', 'avatar-lg', 'avatar-xl', 'avatar-xxl']; var avatarClasses = [
"avatar-xs",
"avatar-sm",
"avatar-lg",
"avatar-xl",
"avatar-xxl"
];
for (var k = 0; k < avatarClasses.length; k++) { for (var k = 0; k < avatarClasses.length; k++) {
if (shadowCards[i].firstElementChild.classList.contains(avatarClasses[k])) { if (
shadowCards[i].firstElementChild.classList.contains(avatarClasses[k])
) {
div.classList.add(avatarClasses[k]); div.classList.add(avatarClasses[k]);
} }
} }
var currentSrc = shadowCards[i].children[0].getAttribute('src'); var currentSrc = shadowCards[i].children[0].getAttribute("src");
var el = shadowCards[i].nextElementSibling; var el = shadowCards[i].nextElementSibling;
el.style.backgroundImage = 'url(' + currentSrc + ')'; el.style.backgroundImage = "url(" + currentSrc + ")";
} }
} }
} }
//Google Maps //Google Maps
if (document.querySelector('#google-maps')) { if (document.querySelector("#google-maps")) {
var myLatlng = new google.maps.LatLng(40.748817, -73.985428); var myLatlng = new google.maps.LatLng(40.748817, -73.985428);
var mapOptions = { var mapOptions = {
zoom: 13, zoom: 13,
center: myLatlng, center: myLatlng,
scrollwheel: false, //we disable de scroll over the map, it is a really annoing when you scroll through page scrollwheel: false, //we disable de scroll over the map, it is a really annoing when you scroll through page
styles: [{ styles: [
"featureType": "administrative", {
"elementType": "labels.text.fill", featureType: "administrative",
"stylers": [{ elementType: "labels.text.fill",
"color": "#444444" stylers: [
}] {
color: "#444444"
}
]
}, },
{ {
"featureType": "landscape", featureType: "landscape",
"elementType": "all", elementType: "all",
"stylers": [{ stylers: [
"color": "#f2f2f2" {
}] color: "#f2f2f2"
}
]
}, },
{ {
"featureType": "poi", featureType: "poi",
"elementType": "all", elementType: "all",
"stylers": [{ stylers: [
"visibility": "off" {
}] visibility: "off"
}
]
}, },
{ {
"featureType": "road", featureType: "road",
"elementType": "all", elementType: "all",
"stylers": [{ stylers: [
"saturation": -100 {
}, { saturation: -100
"lightness": 45 },
}] {
lightness: 45
}
]
}, },
{ {
"featureType": "road.highway", featureType: "road.highway",
"elementType": "all", elementType: "all",
"stylers": [{ stylers: [
"visibility": "simplified" {
}] visibility: "simplified"
}
]
}, },
{ {
"featureType": "road.arterial", featureType: "road.arterial",
"elementType": "labels.icon", elementType: "labels.icon",
"stylers": [{ stylers: [
"visibility": "off" {
}] visibility: "off"
}
]
}, },
{ {
"featureType": "transit", featureType: "transit",
"elementType": "all", elementType: "all",
"stylers": [{ stylers: [
"visibility": "off" {
}] visibility: "off"
}
]
}, },
{ {
"featureType": "water", featureType: "water",
"elementType": "all", elementType: "all",
"stylers": [{ stylers: [
"color": "#C5CBF5" {
}, { color: "#C5CBF5"
"visibility": "on" },
}] {
visibility: "on"
}
]
} }
] ]
}; };
var map = new google.maps.Map(document.getElementById("google-maps"), mapOptions); var map = new google.maps.Map(
document.getElementById("google-maps"),
mapOptions
);
var marker = new google.maps.Marker({ var marker = new google.maps.Marker({
position: myLatlng, position: myLatlng,
@ -329,111 +393,118 @@ if (document.querySelector('#google-maps')) {
// Tabs navigation // Tabs navigation
var total = document.querySelectorAll('.nav-pills'); var total = document.querySelectorAll(".nav-pills");
total.forEach(function(item, i) { total.forEach(function (item, i) {
var moving_div = document.createElement('div'); var moving_div = document.createElement("div");
var first_li = item.querySelector('li:first-child .nav-link'); var first_li = item.querySelector("li:first-child .nav-link");
var tab = first_li.cloneNode(); var tab = first_li.cloneNode();
tab.innerHTML = "-"; tab.innerHTML = "-";
moving_div.classList.add('moving-tab', 'position-absolute', 'nav-link'); moving_div.classList.add("moving-tab", "position-absolute", "nav-link");
moving_div.appendChild(tab); moving_div.appendChild(tab);
item.appendChild(moving_div); item.appendChild(moving_div);
var list_length = item.getElementsByTagName("li").length; var list_length = item.getElementsByTagName("li").length;
moving_div.style.padding = '0px'; moving_div.style.padding = "0px";
moving_div.style.width = item.querySelector('li:nth-child(1)').offsetWidth + 'px'; moving_div.style.width =
moving_div.style.transform = 'translate3d(0px, 0px, 0px)'; item.querySelector("li:nth-child(1)").offsetWidth + "px";
moving_div.style.transition = '.5s ease'; moving_div.style.transform = "translate3d(0px, 0px, 0px)";
moving_div.style.transition = ".5s ease";
item.onmouseover = function(event) { item.onmouseover = function (event) {
let target = getEventTarget(event); let target = getEventTarget(event);
let li = target.closest('li'); // get reference let li = target.closest("li"); // get reference
if (li) { if (li) {
let nodes = Array.from(li.closest('ul').children); // get array let nodes = Array.from(li.closest("ul").children); // get array
let index = nodes.indexOf(li) + 1; let index = nodes.indexOf(li) + 1;
item.querySelector('li:nth-child(' + index + ') .nav-link').onclick = function() { item.querySelector("li:nth-child(" + index + ") .nav-link").onclick =
moving_div = item.querySelector('.moving-tab'); function () {
let sum = 0; moving_div = item.querySelector(".moving-tab");
if (item.classList.contains('flex-column')) { let sum = 0;
for (var j = 1; j <= nodes.indexOf(li); j++) { if (item.classList.contains("flex-column")) {
sum += item.querySelector('li:nth-child(' + j + ')').offsetHeight; for (var j = 1; j <= nodes.indexOf(li); j++) {
sum += item.querySelector("li:nth-child(" + j + ")").offsetHeight;
}
moving_div.style.transform = "translate3d(0px," + sum + "px, 0px)";
moving_div.style.height = item.querySelector(
"li:nth-child(" + j + ")"
).offsetHeight;
} else {
for (var j = 1; j <= nodes.indexOf(li); j++) {
sum += item.querySelector("li:nth-child(" + j + ")").offsetWidth;
}
moving_div.style.transform = "translate3d(" + sum + "px, 0px, 0px)";
moving_div.style.width =
item.querySelector("li:nth-child(" + index + ")").offsetWidth +
"px";
} }
moving_div.style.transform = 'translate3d(0px,' + sum + 'px, 0px)'; };
moving_div.style.height = item.querySelector('li:nth-child(' + j + ')').offsetHeight;
} else {
for (var j = 1; j <= nodes.indexOf(li); j++) {
sum += item.querySelector('li:nth-child(' + j + ')').offsetWidth;
}
moving_div.style.transform = 'translate3d(' + sum + 'px, 0px, 0px)';
moving_div.style.width = item.querySelector('li:nth-child(' + index + ')').offsetWidth + 'px';
}
}
} }
} };
}); });
// Tabs navigation resize // Tabs navigation resize
window.addEventListener('resize', function(event) { window.addEventListener("resize", function (event) {
total.forEach(function(item, i) { total.forEach(function (item, i) {
item.querySelector('.moving-tab').remove(); item.querySelector(".moving-tab").remove();
var moving_div = document.createElement('div'); var moving_div = document.createElement("div");
var tab = item.querySelector(".nav-link.active").cloneNode(); var tab = item.querySelector(".nav-link.active").cloneNode();
tab.innerHTML = "-"; tab.innerHTML = "-";
moving_div.classList.add('moving-tab', 'position-absolute', 'nav-link'); moving_div.classList.add("moving-tab", "position-absolute", "nav-link");
moving_div.appendChild(tab); moving_div.appendChild(tab);
item.appendChild(moving_div); item.appendChild(moving_div);
moving_div.style.padding = '0px'; moving_div.style.padding = "0px";
moving_div.style.transition = '.5s ease'; moving_div.style.transition = ".5s ease";
let li = item.querySelector(".nav-link.active").parentElement; let li = item.querySelector(".nav-link.active").parentElement;
if (li) { if (li) {
let nodes = Array.from(li.closest('ul').children); // get array let nodes = Array.from(li.closest("ul").children); // get array
let index = nodes.indexOf(li) + 1; let index = nodes.indexOf(li) + 1;
let sum = 0; let sum = 0;
if (item.classList.contains('flex-column')) { if (item.classList.contains("flex-column")) {
for (var j = 1; j <= nodes.indexOf(li); j++) { for (var j = 1; j <= nodes.indexOf(li); j++) {
sum += item.querySelector('li:nth-child(' + j + ')').offsetHeight; sum += item.querySelector("li:nth-child(" + j + ")").offsetHeight;
} }
moving_div.style.transform = 'translate3d(0px,' + sum + 'px, 0px)'; moving_div.style.transform = "translate3d(0px," + sum + "px, 0px)";
moving_div.style.width = item.querySelector('li:nth-child(' + index + ')').offsetWidth + 'px'; moving_div.style.width =
moving_div.style.height = item.querySelector('li:nth-child(' + j + ')').offsetHeight; item.querySelector("li:nth-child(" + index + ")").offsetWidth + "px";
moving_div.style.height = item.querySelector(
"li:nth-child(" + j + ")"
).offsetHeight;
} else { } else {
for (var j = 1; j <= nodes.indexOf(li); j++) { for (var j = 1; j <= nodes.indexOf(li); j++) {
sum += item.querySelector('li:nth-child(' + j + ')').offsetWidth; sum += item.querySelector("li:nth-child(" + j + ")").offsetWidth;
} }
moving_div.style.transform = 'translate3d(' + sum + 'px, 0px, 0px)'; moving_div.style.transform = "translate3d(" + sum + "px, 0px, 0px)";
moving_div.style.width = item.querySelector('li:nth-child(' + index + ')').offsetWidth + 'px'; moving_div.style.width =
item.querySelector("li:nth-child(" + index + ")").offsetWidth + "px";
} }
} }
}); });
if (window.innerWidth < 991) { if (window.innerWidth < 991) {
total.forEach(function(item, i) { total.forEach(function (item, i) {
if (!item.classList.contains('flex-column')) { if (!item.classList.contains("flex-column")) {
item.classList.add('flex-column', 'on-resize'); item.classList.add("flex-column", "on-resize");
} }
}); });
} else { } else {
total.forEach(function(item, i) { total.forEach(function (item, i) {
if (item.classList.contains('on-resize')) { if (item.classList.contains("on-resize")) {
item.classList.remove('flex-column', 'on-resize'); item.classList.remove("flex-column", "on-resize");
} }
}) });
} }
}); });
function getEventTarget(e) { function getEventTarget(e) {
e = e || window.event; e = e || window.event;
return e.target || e.srcElement; return e.target || e.srcElement;
@ -441,7 +512,6 @@ function getEventTarget(e) {
// End tabs navigation // End tabs navigation
// Copy code function // Copy code function
function copyCode(el) { function copyCode(el) {
@ -451,26 +521,39 @@ function copyCode(el) {
range.selectNodeContents(textToCopy); range.selectNodeContents(textToCopy);
selection.removeAllRanges(); selection.removeAllRanges();
selection.addRange(range); selection.addRange(range);
const successful = document.execCommand('copy'); const successful = document.execCommand("copy");
window.getSelection().removeAllRanges() window.getSelection().removeAllRanges();
if (!el.parentElement.querySelector('.alert')) { if (!el.parentElement.querySelector(".alert")) {
var alert = document.createElement('div'); var alert = document.createElement("div");
alert.classList.add('alert', 'alert-success', 'position-absolute', 'top-0', 'border-0', 'text-white', 'w-25', 'end-0', 'start-0', 'mt-2', 'mx-auto', 'py-2'); alert.classList.add(
alert.style.transform = 'translate3d(0px, 0px, 0px)' "alert",
alert.style.opacity = '0'; "alert-success",
alert.style.transition = '.35s ease'; "position-absolute",
setTimeout(function() { "top-0",
alert.style.transform = 'translate3d(0px, 20px, 0px)'; "border-0",
"text-white",
"w-25",
"end-0",
"start-0",
"mt-2",
"mx-auto",
"py-2"
);
alert.style.transform = "translate3d(0px, 0px, 0px)";
alert.style.opacity = "0";
alert.style.transition = ".35s ease";
setTimeout(function () {
alert.style.transform = "translate3d(0px, 20px, 0px)";
alert.style.setProperty("opacity", "1", "important"); alert.style.setProperty("opacity", "1", "important");
}, 100); }, 100);
alert.innerHTML = "Code successfully copied!"; alert.innerHTML = "Code successfully copied!";
el.parentElement.appendChild(alert); el.parentElement.appendChild(alert);
setTimeout(function() { setTimeout(function () {
alert.style.transform = 'translate3d(0px, 0px, 0px)' alert.style.transform = "translate3d(0px, 0px, 0px)";
alert.style.setProperty("opacity", "0", "important"); alert.style.setProperty("opacity", "0", "important");
}, 2000); }, 2000);
setTimeout(function() { setTimeout(function () {
el.parentElement.querySelector('.alert').remove(); el.parentElement.querySelector(".alert").remove();
}, 2500); }, 2500);
} }
} }

68
src/examples/footers/FooterDefault.vue
View File

@ -7,10 +7,10 @@ defineProps({
logo: String, logo: String,
route: "", route: "",
default: () => ({ default: () => ({
name: "Material Kit 2 PRO", name: "Material Kit 2",
logo: logoDark, logo: logoDark,
route: "/", route: "/"
}), })
}, },
socials: { socials: {
type: Array, type: Array,
@ -19,25 +19,25 @@ defineProps({
default: () => [ default: () => [
{ {
icon: '<i class="fab fa-facebook text-lg opacity-8"></i>', icon: '<i class="fab fa-facebook text-lg opacity-8"></i>',
link: "https://www.facebook.com/CreativeTim/", link: "https://www.facebook.com/CreativeTim/"
}, },
{ {
icon: '<i class="fab fa-twitter text-lg opacity-8"></i>', icon: '<i class="fab fa-twitter text-lg opacity-8"></i>',
link: "https://twitter.com/creativetim", link: "https://twitter.com/creativetim"
}, },
{ {
icon: '<i class="fab fa-dribbble text-lg opacity-8"></i>', icon: '<i class="fab fa-dribbble text-lg opacity-8"></i>',
link: "https://dribbble.com/creativetim", link: "https://dribbble.com/creativetim"
}, },
{ {
icon: '<i class="fab fa-github text-lg opacity-8"></i>', icon: '<i class="fab fa-github text-lg opacity-8"></i>',
link: "https://github.com/creativetimofficial", link: "https://github.com/creativetimofficial"
}, },
{ {
icon: '<i class="fab fa-youtube text-lg opacity-8"></i>', icon: '<i class="fab fa-youtube text-lg opacity-8"></i>',
link: "https://www.youtube.com/channel/UCVyTG4sCw-rOvB9oHkzZD1w", link: "https://www.youtube.com/channel/UCVyTG4sCw-rOvB9oHkzZD1w"
}, }
], ]
}, },
menus: { menus: {
type: Array, type: Array,
@ -45,7 +45,7 @@ defineProps({
items: { items: {
type: Array, type: Array,
name: String, name: String,
href: String, href: String
}, },
default: () => [ default: () => [
{ {
@ -53,18 +53,18 @@ defineProps({
items: [ items: [
{ {
name: "about us", name: "about us",
href: "https://www.creative-tim.com/presentation", href: "https://www.creative-tim.com/presentation"
}, },
{ {
name: "freebies", name: "freebies",
href: "https://www.creative-tim.com/templates/free", href: "https://www.creative-tim.com/templates/free"
}, },
{ {
name: "premium tools", name: "premium tools",
href: "https://www.creative-tim.com/templates/premium", href: "https://www.creative-tim.com/templates/premium"
}, },
{ name: "blog", href: "https://www.creative-tim.com/blog" }, { name: "blog", href: "https://www.creative-tim.com/blog" }
], ]
}, },
{ {
name: "resources", name: "resources",
@ -72,54 +72,54 @@ defineProps({
{ name: "illustrations", href: "https://iradesign.io/" }, { name: "illustrations", href: "https://iradesign.io/" },
{ {
name: "bits & snippets", name: "bits & snippets",
href: "https://www.creative-tim.com/bits", href: "https://www.creative-tim.com/bits"
}, },
{ {
name: "affiliate program", name: "affiliate program",
href: "https://www.creative-tim.com/affiliates/new", href: "https://www.creative-tim.com/affiliates/new"
}, }
], ]
}, },
{ {
name: "help & support", name: "help & support",
items: [ items: [
{ {
name: "contact us", name: "contact us",
href: "https://www.creative-tim.com/contact-us", href: "https://www.creative-tim.com/contact-us"
}, },
{ {
name: "knowledge center", name: "knowledge center",
href: "https://www.creative-tim.com/knowledge-center", href: "https://www.creative-tim.com/knowledge-center"
}, },
{ {
name: "custom development", name: "custom development",
href: "https://services.creative-tim.com/", href: "https://services.creative-tim.com/"
}, },
{ {
name: "sponsorships", name: "sponsorships",
href: "https://www.creative-tim.com/sponsorships", href: "https://www.creative-tim.com/sponsorships"
}, }
], ]
}, },
{ {
name: "legal", name: "legal",
items: [ items: [
{ {
name: "terms & conditions", name: "terms & conditions",
href: "https://www.creative-tim.com/terms", href: "https://www.creative-tim.com/terms"
}, },
{ {
name: "privacy policy", name: "privacy policy",
href: "https://www.creative-tim.com/privacy", href: "https://www.creative-tim.com/privacy"
}, },
{ {
name: "licenses (EULA)", name: "licenses (EULA)",
href: "https://www.creative-tim.com/license", href: "https://www.creative-tim.com/license"
}, }
], ]
}, }
], ]
}, }
}); });
</script> </script>
<template> <template>

39
src/examples/navbars/NavbarDefault.vue
View File

@ -120,7 +120,7 @@ watch(
title="Designed and Coded by Creative Tim" title="Designed and Coded by Creative Tim"
data-placement="bottom" data-placement="bottom"
> >
Material Kit 2 PRO Material Kit 2
</RouterLink> </RouterLink>
<RouterLink <RouterLink
class="navbar-brand d-block d-md-none" class="navbar-brand d-block d-md-none"
@ -789,7 +789,7 @@ watch(
<li class="nav-item list-group-item border-0 p-0"> <li class="nav-item list-group-item border-0 p-0">
<a <a
class="dropdown-item py-2 ps-3 border-radius-md" class="dropdown-item py-2 ps-3 border-radius-md"
href=" https://www.creative-tim.com/learning-lab/bootstrap/overview/material-kit " href=" https://www.creative-tim.com/learning-lab/vue/overview/material-kit/"
> >
<h6 <h6
class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0" class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0"
@ -805,7 +805,7 @@ watch(
<li class="nav-item list-group-item border-0 p-0"> <li class="nav-item list-group-item border-0 p-0">
<a <a
class="dropdown-item py-2 ps-3 border-radius-md" class="dropdown-item py-2 ps-3 border-radius-md"
href=" https://www.creative-tim.com/learning-lab/bootstrap/colors/material-kit " href=" https://www.creative-tim.com/learning-lab/vue/colors/material-kit/"
> >
<h6 <h6
class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0" class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0"
@ -820,7 +820,7 @@ watch(
<li class="nav-item list-group-item border-0 p-0"> <li class="nav-item list-group-item border-0 p-0">
<a <a
class="dropdown-item py-2 ps-3 border-radius-md" class="dropdown-item py-2 ps-3 border-radius-md"
href=" https://www.creative-tim.com/learning-lab/bootstrap/alerts/material-kit " href=" https://www.creative-tim.com/learning-lab/vue/alerts/material-kit/"
> >
<h6 <h6
class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0" class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0"
@ -833,37 +833,6 @@ watch(
> >
</a> </a>
</li> </li>
<li class="nav-item list-group-item border-0 p-0">
<a
class="dropdown-item py-2 ps-3 border-radius-md"
href=" https://www.creative-tim.com/learning-lab/bootstrap/datepicker/material-kit "
>
<h6
class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0"
>
Plugins
</h6>
<span class="text-sm"
>Check how you can integrate our plugins</span
>
</a>
</li>
<li class="nav-item list-group-item border-0 p-0">
<a
class="dropdown-item py-2 ps-3 border-radius-md"
href=" https://www.creative-tim.com/learning-lab/bootstrap/utilities/material-kit "
>
<h6
class="dropdown-header text-dark font-weight-bolder d-flex justify-content-cente align-items-center p-0"
>
Utility Classes
</h6>
<span class="text-sm"
>For those who want flexibility, use our utility
classes</span
>
</a>
</li>
</ul> </ul>
</div> </div>
<div class="row d-lg-none"> <div class="row d-lg-none">

2
src/layouts/sections/attention-catchers/alerts/components/SimpleAlerts.vue
View File

@ -1,5 +1,5 @@
<script setup> <script setup>
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialAlert from "@/components/MaterialAlert.vue"; import MaterialAlert from "@/components/MaterialAlert.vue";
</script> </script>
<template> <template>

2
src/layouts/sections/attention-catchers/alerts/components/codes.js
View File

@ -1,5 +1,5 @@
export const simpleAlertsCode = `<script setup> export const simpleAlertsCode = `<script setup>
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialAlert from "@/components/MaterialAlert.vue"; import MaterialAlert from "@/components/MaterialAlert.vue";
</script> </script>
<template> <template>

2
src/layouts/sections/attention-catchers/modals/components/SimpleModal.vue
View File

@ -1,5 +1,5 @@
<script setup> <script setup>
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialButton from "@/components/MaterialButton.vue"; import MaterialButton from "@/components/MaterialButton.vue";
</script> </script>
<template> <template>

2
src/layouts/sections/attention-catchers/modals/components/codes.js
View File

@ -1,5 +1,5 @@
export const simpleModalCode = `<script setup> export const simpleModalCode = `<script setup>
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialButton from "@/components/MaterialButton.vue"; import MaterialButton from "@/components/MaterialButton.vue";
</script> </script>
<template> <template>

2
src/layouts/sections/attention-catchers/tooltips-popovers/components/Popovers.vue
View File

@ -1,6 +1,6 @@
<script setup> <script setup>
import { onMounted } from "vue"; import { onMounted } from "vue";
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialButton from "@/components/MaterialButton.vue"; import MaterialButton from "@/components/MaterialButton.vue";
// popover // popover

2
src/layouts/sections/attention-catchers/tooltips-popovers/components/Tooltips.vue
View File

@ -1,6 +1,6 @@
<script setup> <script setup>
import { onMounted } from "vue"; import { onMounted } from "vue";
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialButton from "@/components/MaterialButton.vue"; import MaterialButton from "@/components/MaterialButton.vue";
// popover // popover

4
src/layouts/sections/attention-catchers/tooltips-popovers/components/codes.js
View File

@ -1,6 +1,6 @@
export const popoversCode = `<script setup> export const popoversCode = `<script setup>
import { onMounted } from "vue"; import { onMounted } from "vue";
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialButton from "@/components/MaterialButton.vue"; import MaterialButton from "@/components/MaterialButton.vue";
// popover // popover
@ -68,7 +68,7 @@ onMounted(() => {
export const tooltipsCode = `<script setup> export const tooltipsCode = `<script setup>
import { onMounted } from "vue"; import { onMounted } from "vue";
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialButton from "@/components/MaterialButton.vue"; import MaterialButton from "@/components/MaterialButton.vue";
// popover // popover

2
src/layouts/sections/elements/avatars/components/AvatarGroup.vue
View File

@ -1,7 +1,7 @@
<script setup> <script setup>
import { onMounted } from "vue"; import { onMounted } from "vue";
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialAvatar from "@/components/MaterialAvatar.vue"; import MaterialAvatar from "@/components/MaterialAvatar.vue";
// images // images

2
src/layouts/sections/elements/avatars/components/AvatarSize.vue
View File

@ -1,5 +1,5 @@
<script setup> <script setup>
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialAvatar from "@/components/MaterialAvatar.vue"; import MaterialAvatar from "@/components/MaterialAvatar.vue";
// image // image

4
src/layouts/sections/elements/avatars/components/codes.js
View File

@ -1,7 +1,7 @@
export const avatarGroupCode = `<script setup> export const avatarGroupCode = `<script setup>
import { onMounted } from "vue"; import { onMounted } from "vue";
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialAvatar from "@/components/MaterialAvatar.vue"; import MaterialAvatar from "@/components/MaterialAvatar.vue";
// images // images
@ -71,7 +71,7 @@ onMounted(() => {
`; `;
export const avatarSizeCode = `<script setup> export const avatarSizeCode = `<script setup>
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialAvatar from "@/components/MaterialAvatar.vue"; import MaterialAvatar from "@/components/MaterialAvatar.vue";
// image // image

2
src/layouts/sections/elements/badges/components/BadgesGradient.vue
View File

@ -1,5 +1,5 @@
<script setup> <script setup>
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialBadge from "@/components/MaterialBadge.vue"; import MaterialBadge from "@/components/MaterialBadge.vue";
</script> </script>
<template> <template>

2
src/layouts/sections/elements/badges/components/BadgesSimple.vue
View File

@ -1,5 +1,5 @@
<script setup> <script setup>
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialBadge from "@/components/MaterialBadge.vue"; import MaterialBadge from "@/components/MaterialBadge.vue";
</script> </script>
<template> <template>

2
src/layouts/sections/elements/badges/components/BadgesSimpleRounded.vue
View File

@ -1,5 +1,5 @@
<script setup> <script setup>
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialBadge from "@/components/MaterialBadge.vue"; import MaterialBadge from "@/components/MaterialBadge.vue";
</script> </script>
<template> <template>

6
src/layouts/sections/elements/badges/components/codes.js
View File

@ -1,5 +1,5 @@
export const badgesGradientCode = `<script setup> export const badgesGradientCode = `<script setup>
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialBadge from "@/components/MaterialBadge.vue"; import MaterialBadge from "@/components/MaterialBadge.vue";
</script> </script>
<template> <template>
@ -46,7 +46,7 @@ import MaterialBadge from "@/components/MaterialBadge.vue";
`; `;
export const badgesSimpleCode = `<script setup> export const badgesSimpleCode = `<script setup>
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialBadge from "@/components/MaterialBadge.vue"; import MaterialBadge from "@/components/MaterialBadge.vue";
</script> </script>
<template> <template>
@ -79,7 +79,7 @@ import MaterialBadge from "@/components/MaterialBadge.vue";
`; `;
export const badgesRoundedCode = `<script setup> export const badgesRoundedCode = `<script setup>
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialBadge from "@/components/MaterialBadge.vue"; import MaterialBadge from "@/components/MaterialBadge.vue";
</script> </script>
<template> <template>

2
src/layouts/sections/elements/button-groups/components/ButtonGroupsOutline.vue
View File

@ -1,5 +1,5 @@
<script setup> <script setup>
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialButton from "@/components/MaterialButton.vue"; import MaterialButton from "@/components/MaterialButton.vue";
</script> </script>
<template> <template>

2
src/layouts/sections/elements/button-groups/components/ButtonGroupsSimple.vue
View File

@ -1,5 +1,5 @@
<script setup> <script setup>
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialButton from "@/components/MaterialButton.vue"; import MaterialButton from "@/components/MaterialButton.vue";
</script> </script>
<template> <template>

2
src/layouts/sections/elements/button-groups/components/ButtonGroupsSizing.vue
View File

@ -1,5 +1,5 @@
<script setup> <script setup>
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialButton from "@/components/MaterialButton.vue"; import MaterialButton from "@/components/MaterialButton.vue";
</script> </script>
<template> <template>

6
src/layouts/sections/elements/button-groups/components/codes.js
View File

@ -1,5 +1,5 @@
export const buttonGroupsSimpleCode = `<script setup> export const buttonGroupsSimpleCode = `<script setup>
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialButton from "@/components/MaterialButton.vue"; import MaterialButton from "@/components/MaterialButton.vue";
</script> </script>
<template> <template>
@ -20,7 +20,7 @@ import MaterialButton from "@/components/MaterialButton.vue";
`; `;
export const buttonGroupsOutlineCode = `<script setup> export const buttonGroupsOutlineCode = `<script setup>
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialButton from "@/components/MaterialButton.vue"; import MaterialButton from "@/components/MaterialButton.vue";
</script> </script>
<template> <template>
@ -93,7 +93,7 @@ export const buttonGroupsRadioCode = `<script setup></script>
`; `;
export const buttonGroupsSizingCode = `<script setup> export const buttonGroupsSizingCode = `<script setup>
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialButton from "@/components/MaterialButton.vue"; import MaterialButton from "@/components/MaterialButton.vue";
</script> </script>
<template> <template>

2
src/layouts/sections/elements/buttons/components/ButtonsContained.vue
View File

@ -1,5 +1,5 @@
<script setup> <script setup>
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialButton from "@/components/MaterialButton.vue"; import MaterialButton from "@/components/MaterialButton.vue";
</script> </script>
<template> <template>

2
src/layouts/sections/elements/buttons/components/ButtonsGradient.vue
View File

@ -1,5 +1,5 @@
<script setup> <script setup>
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialButton from "@/components/MaterialButton.vue"; import MaterialButton from "@/components/MaterialButton.vue";
</script> </script>
<template> <template>

2
src/layouts/sections/elements/buttons/components/ButtonsIconLeft.vue
View File

@ -1,5 +1,5 @@
<script setup> <script setup>
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialButton from "@/components/MaterialButton.vue"; import MaterialButton from "@/components/MaterialButton.vue";
</script> </script>
<template> <template>

2
src/layouts/sections/elements/buttons/components/ButtonsIconRight.vue
View File

@ -1,5 +1,5 @@
<script setup> <script setup>
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialButton from "@/components/MaterialButton.vue"; import MaterialButton from "@/components/MaterialButton.vue";
</script> </script>
<template> <template>

2
src/layouts/sections/elements/buttons/components/ButtonsOutlined.vue
View File

@ -1,5 +1,5 @@
<script setup> <script setup>
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialButton from "@/components/MaterialButton.vue"; import MaterialButton from "@/components/MaterialButton.vue";
</script> </script>
<template> <template>

2
src/layouts/sections/elements/buttons/components/ButtonsSizes.vue
View File

@ -1,5 +1,5 @@
<script setup> <script setup>
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialButton from "@/components/MaterialButton.vue"; import MaterialButton from "@/components/MaterialButton.vue";
</script> </script>
<template> <template>

12
src/layouts/sections/elements/buttons/components/codes.js
View File

@ -1,5 +1,5 @@
export const buttonsGradientCode = `<script setup> export const buttonsGradientCode = `<script setup>
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialButton from "@/components/MaterialButton.vue"; import MaterialButton from "@/components/MaterialButton.vue";
</script> </script>
<template> <template>
@ -25,7 +25,7 @@ import MaterialButton from "@/components/MaterialButton.vue";
`; `;
export const buttonsContainedCode = `<script setup> export const buttonsContainedCode = `<script setup>
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialButton from "@/components/MaterialButton.vue"; import MaterialButton from "@/components/MaterialButton.vue";
</script> </script>
<template> <template>
@ -87,7 +87,7 @@ import MaterialButton from "@/components/MaterialButton.vue";
`; `;
export const buttonsOutlinedCode = `<script setup> export const buttonsOutlinedCode = `<script setup>
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialButton from "@/components/MaterialButton.vue"; import MaterialButton from "@/components/MaterialButton.vue";
</script> </script>
<template> <template>
@ -111,7 +111,7 @@ import MaterialButton from "@/components/MaterialButton.vue";
</template>`; </template>`;
export const buttonsSizesCode = `<script setup> export const buttonsSizesCode = `<script setup>
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialButton from "@/components/MaterialButton.vue"; import MaterialButton from "@/components/MaterialButton.vue";
</script> </script>
<template> <template>
@ -130,7 +130,7 @@ import MaterialButton from "@/components/MaterialButton.vue";
`; `;
export const buttonsIconLeftCode = `<script setup> export const buttonsIconLeftCode = `<script setup>
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialButton from "@/components/MaterialButton.vue"; import MaterialButton from "@/components/MaterialButton.vue";
</script> </script>
<template> <template>
@ -167,7 +167,7 @@ import MaterialButton from "@/components/MaterialButton.vue";
`; `;
export const buttonsIconRightCode = `<script setup> export const buttonsIconRightCode = `<script setup>
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialButton from "@/components/MaterialButton.vue"; import MaterialButton from "@/components/MaterialButton.vue";
</script> </script>
<template> <template>

2
src/layouts/sections/elements/dropdowns/components/DropdownAndDropup.vue
View File

@ -1,6 +1,6 @@
<script setup> <script setup>
import { ref } from "vue"; import { ref } from "vue";
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialButton from "@/components/MaterialButton.vue"; import MaterialButton from "@/components/MaterialButton.vue";
let showDropdown = ref(false); let showDropdown = ref(false);

2
src/layouts/sections/elements/dropdowns/components/codes.js
View File

@ -1,6 +1,6 @@
export const dropdownAndDropupCode = `<script setup> export const dropdownAndDropupCode = `<script setup>
import { ref } from "vue"; import { ref } from "vue";
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialButton from "@/components/MaterialButton.vue"; import MaterialButton from "@/components/MaterialButton.vue";
let showDropdown = ref(false); let showDropdown = ref(false);

2
src/layouts/sections/elements/progress-bars/components/ProgressSimple.vue
View File

@ -1,5 +1,5 @@
<script setup> <script setup>
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialProgress from "@/components/MaterialProgress.vue"; import MaterialProgress from "@/components/MaterialProgress.vue";
</script> </script>
<template> <template>

2
src/layouts/sections/elements/progress-bars/components/codes.js
View File

@ -1,5 +1,5 @@
export const progressSimpleCode = `<script setup> export const progressSimpleCode = `<script setup>
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialProgress from "@/components/MaterialProgress.vue"; import MaterialProgress from "@/components/MaterialProgress.vue";
</script> </script>
<template> <template>

2
src/layouts/sections/elements/toggles/components/Toggle.vue
View File

@ -1,5 +1,5 @@
<script setup> <script setup>
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialSwitch from "@/components/MaterialSwitch.vue"; import MaterialSwitch from "@/components/MaterialSwitch.vue";
</script> </script>
<template> <template>

2
src/layouts/sections/elements/toggles/components/ToggleContext.vue
View File

@ -1,5 +1,5 @@
<script setup> <script setup>
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialSwitch from "@/components/MaterialSwitch.vue"; import MaterialSwitch from "@/components/MaterialSwitch.vue";
</script> </script>
<template> <template>

4
src/layouts/sections/elements/toggles/components/codes.js
View File

@ -1,5 +1,5 @@
export const toggleCode = `<script setup> export const toggleCode = `<script setup>
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialSwitch from "@/components/MaterialSwitch.vue"; import MaterialSwitch from "@/components/MaterialSwitch.vue";
</script> </script>
<template> <template>
@ -20,7 +20,7 @@ import MaterialSwitch from "@/components/MaterialSwitch.vue";
`; `;
export const toggleContextCode = `<script setup> export const toggleContextCode = `<script setup>
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialSwitch from "@/components/MaterialSwitch.vue"; import MaterialSwitch from "@/components/MaterialSwitch.vue";
</script> </script>
<template> <template>

2
src/layouts/sections/input-areas/forms/components/FormSimple.vue
View File

@ -1,7 +1,7 @@
<script setup> <script setup>
import { onMounted } from "vue"; import { onMounted } from "vue";
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialInput from "@/components/MaterialInput.vue"; import MaterialInput from "@/components/MaterialInput.vue";
import MaterialTextArea from "@/components/MaterialTextArea.vue"; import MaterialTextArea from "@/components/MaterialTextArea.vue";
import MaterialButton from "@/components/MaterialButton.vue"; import MaterialButton from "@/components/MaterialButton.vue";

2
src/layouts/sections/input-areas/forms/components/codes.js
View File

@ -1,5 +1,5 @@
export const formSimpleCode = `<script setup> export const formSimpleCode = `<script setup>
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialInput from "@/components/MaterialInput.vue"; import MaterialInput from "@/components/MaterialInput.vue";
import MaterialTextArea from "@/components/MaterialTextArea.vue"; import MaterialTextArea from "@/components/MaterialTextArea.vue";
import MaterialButton from "@/components/MaterialButton.vue"; import MaterialButton from "@/components/MaterialButton.vue";

2
src/layouts/sections/input-areas/inputs/components/InputDisabled.vue
View File

@ -1,5 +1,5 @@
<script setup> <script setup>
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialInput from "@/components/MaterialInput.vue"; import MaterialInput from "@/components/MaterialInput.vue";
</script> </script>
<template> <template>

2
src/layouts/sections/input-areas/inputs/components/InputDynamic.vue
View File

@ -1,5 +1,5 @@
<script setup> <script setup>
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialInput from "@/components/MaterialInput.vue"; import MaterialInput from "@/components/MaterialInput.vue";
</script> </script>
<template> <template>

2
src/layouts/sections/input-areas/inputs/components/InputError.vue
View File

@ -1,5 +1,5 @@
<script setup> <script setup>
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialInput from "@/components/MaterialInput.vue"; import MaterialInput from "@/components/MaterialInput.vue";
</script> </script>
<template> <template>

2
src/layouts/sections/input-areas/inputs/components/InputIcon.vue
View File

@ -1,5 +1,5 @@
<script setup> <script setup>
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialInput from "@/components/MaterialInput.vue"; import MaterialInput from "@/components/MaterialInput.vue";
</script> </script>
<template> <template>

2
src/layouts/sections/input-areas/inputs/components/InputOutlined.vue
View File

@ -1,5 +1,5 @@
<script setup> <script setup>
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialInput from "@/components/MaterialInput.vue"; import MaterialInput from "@/components/MaterialInput.vue";
</script> </script>
<template> <template>

2
src/layouts/sections/input-areas/inputs/components/InputStatic.vue
View File

@ -1,5 +1,5 @@
<script setup> <script setup>
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialInput from "@/components/MaterialInput.vue"; import MaterialInput from "@/components/MaterialInput.vue";
</script> </script>
<template> <template>

2
src/layouts/sections/input-areas/inputs/components/InputSuccess.vue
View File

@ -1,5 +1,5 @@
<script setup> <script setup>
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialInput from "@/components/MaterialInput.vue"; import MaterialInput from "@/components/MaterialInput.vue";
</script> </script>
<template> <template>

14
src/layouts/sections/input-areas/inputs/components/codes.js
View File

@ -1,5 +1,5 @@
export const inputStaticCode = `<script setup> export const inputStaticCode = `<script setup>
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialInput from "@/components/MaterialInput.vue"; import MaterialInput from "@/components/MaterialInput.vue";
</script> </script>
<template> <template>
@ -21,7 +21,7 @@ import MaterialInput from "@/components/MaterialInput.vue";
`; `;
export const inputDynamicCode = `<script setup> export const inputDynamicCode = `<script setup>
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialInput from "@/components/MaterialInput.vue"; import MaterialInput from "@/components/MaterialInput.vue";
</script> </script>
<template> <template>
@ -42,7 +42,7 @@ import MaterialInput from "@/components/MaterialInput.vue";
`; `;
export const inputOutlinedCode = `<script setup> export const inputOutlinedCode = `<script setup>
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialInput from "@/components/MaterialInput.vue"; import MaterialInput from "@/components/MaterialInput.vue";
</script> </script>
<template> <template>
@ -63,7 +63,7 @@ import MaterialInput from "@/components/MaterialInput.vue";
`; `;
export const inputIconCode = `<script setup> export const inputIconCode = `<script setup>
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialInput from "@/components/MaterialInput.vue"; import MaterialInput from "@/components/MaterialInput.vue";
</script> </script>
<template> <template>
@ -85,7 +85,7 @@ import MaterialInput from "@/components/MaterialInput.vue";
`; `;
export const inputSuccessCode = `<script setup> export const inputSuccessCode = `<script setup>
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialInput from "@/components/MaterialInput.vue"; import MaterialInput from "@/components/MaterialInput.vue";
</script> </script>
<template> <template>
@ -107,7 +107,7 @@ import MaterialInput from "@/components/MaterialInput.vue";
`; `;
export const inputErrorCode = `<script setup> export const inputErrorCode = `<script setup>
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialInput from "@/components/MaterialInput.vue"; import MaterialInput from "@/components/MaterialInput.vue";
</script> </script>
<template> <template>
@ -124,7 +124,7 @@ import MaterialInput from "@/components/MaterialInput.vue";
`; `;
export const inputDisabledCode = `<script setup> export const inputDisabledCode = `<script setup>
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialInput from "@/components/MaterialInput.vue"; import MaterialInput from "@/components/MaterialInput.vue";
</script> </script>
<template> <template>

2
src/layouts/sections/navigation/pagination/components/PaginationSimple.vue
View File

@ -1,5 +1,5 @@
<script setup> <script setup>
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialPagination from "@/components/MaterialPagination.vue"; import MaterialPagination from "@/components/MaterialPagination.vue";
import MaterialPaginationItem from "@/components/MaterialPaginationItem.vue"; import MaterialPaginationItem from "@/components/MaterialPaginationItem.vue";
</script> </script>

2
src/layouts/sections/navigation/pagination/components/codes.js
View File

@ -1,5 +1,5 @@
export const paginationSimpleCode = `<script setup> export const paginationSimpleCode = `<script setup>
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialPagination from "@/components/MaterialPagination.vue"; import MaterialPagination from "@/components/MaterialPagination.vue";
import MaterialPaginationItem from "@/components/MaterialPaginationItem.vue"; import MaterialPaginationItem from "@/components/MaterialPaginationItem.vue";
</script> </script>

4
src/layouts/sections/page-sections/page-headers/components/HeaderOne.vue
View File

@ -1,5 +1,5 @@
<script setup> <script setup>
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialButton from "@/components/MaterialButton.vue"; import MaterialButton from "@/components/MaterialButton.vue";
// image // image
@ -75,7 +75,7 @@ const bgImage =
<div <div
class="page-header min-vh-100" class="page-header min-vh-100"
:style="{ :style="{
backgroundImage: `url(${bgImage})`, backgroundImage: `url(${bgImage})`
}" }"
loading="lazy" loading="lazy"
> >

2
src/layouts/sections/page-sections/page-headers/components/codes.js
View File

@ -1,6 +1,6 @@
/* eslint-disable no-useless-escape */ /* eslint-disable no-useless-escape */
export const header1Code = `<setup> export const header1Code = `<setup>
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialButton from "@/components/MaterialButton.vue"; import MaterialButton from "@/components/MaterialButton.vue";
<\/script> <\/script>
<template> <template>

2
src/views/LandingPages/AboutUs/Sections/AboutNewsletter.vue
View File

@ -1,6 +1,6 @@
<script setup> <script setup>
import { onMounted } from "vue"; import { onMounted } from "vue";
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialInput from "@/components/MaterialInput.vue"; import MaterialInput from "@/components/MaterialInput.vue";
import MaterialButton from "@/components/MaterialButton.vue"; import MaterialButton from "@/components/MaterialButton.vue";

2
src/views/LandingPages/Author/Sections/AuthorContact.vue
View File

@ -1,6 +1,6 @@
<script setup> <script setup>
import { onMounted } from "vue"; import { onMounted } from "vue";
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialButton from "@/components/MaterialButton.vue"; import MaterialButton from "@/components/MaterialButton.vue";
import MaterialInput from "@/components/MaterialInput.vue"; import MaterialInput from "@/components/MaterialInput.vue";
import MaterialTextArea from "@/components/MaterialTextArea.vue"; import MaterialTextArea from "@/components/MaterialTextArea.vue";

2
src/views/LandingPages/Author/Sections/AuthorPosts.vue
View File

@ -3,7 +3,7 @@
import TransparentBlogCard from "../../../../examples/cards/blogCards/TransparentBlogCard.vue"; import TransparentBlogCard from "../../../../examples/cards/blogCards/TransparentBlogCard.vue";
import BackgroundBlogCard from "../../../../examples/cards/blogCards/BackgroundBlogCard.vue"; import BackgroundBlogCard from "../../../../examples/cards/blogCards/BackgroundBlogCard.vue";
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import post1 from "@/assets/img/examples/testimonial-6-2.jpg"; import post1 from "@/assets/img/examples/testimonial-6-2.jpg";
import post2 from "@/assets/img/examples/testimonial-6-3.jpg"; import post2 from "@/assets/img/examples/testimonial-6-3.jpg";
import post3 from "@/assets/img/examples/blog-9-4.jpg"; import post3 from "@/assets/img/examples/blog-9-4.jpg";

2
src/views/LandingPages/Author/Sections/AuthorProfile.vue
View File

@ -1,7 +1,7 @@
<script setup> <script setup>
import { onMounted } from "vue"; import { onMounted } from "vue";
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialAvatar from "@/components/MaterialAvatar.vue"; import MaterialAvatar from "@/components/MaterialAvatar.vue";
import MaterialButton from "@/components/MaterialButton.vue"; import MaterialButton from "@/components/MaterialButton.vue";

4
src/views/LandingPages/SignIn/BasicView.vue
View File

@ -5,7 +5,7 @@ import { onMounted } from "vue";
import DefaultNavbar from "@/examples/navbars/NavbarDefault.vue"; import DefaultNavbar from "@/examples/navbars/NavbarDefault.vue";
import Header from "@/examples/Header.vue"; import Header from "@/examples/Header.vue";
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialInput from "@/components/MaterialInput.vue"; import MaterialInput from "@/components/MaterialInput.vue";
import MaterialSwitch from "@/components/MaterialSwitch.vue"; import MaterialSwitch from "@/components/MaterialSwitch.vue";
import MaterialButton from "@/components/MaterialButton.vue"; import MaterialButton from "@/components/MaterialButton.vue";
@ -23,7 +23,7 @@ onMounted(() => {
class="page-header align-items-start min-vh-100" class="page-header align-items-start min-vh-100"
:style="{ :style="{
backgroundImage: backgroundImage:
'url(https://images.unsplash.com/photo-1497294815431-9365093b7331?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80)', 'url(https://images.unsplash.com/photo-1497294815431-9365093b7331?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1950&q=80)'
}" }"
loading="lazy" loading="lazy"
> >

4
src/views/Presentation/Components/BuiltByDevelopers.vue
View File

@ -5,7 +5,7 @@
class="page-header py-6 py-md-5 my-sm-3 mb-3 border-radius-xl" class="page-header py-6 py-md-5 my-sm-3 mb-3 border-radius-xl"
:style="{ :style="{
backgroundImage: backgroundImage:
'url(https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/desktop.jpg)', 'url(https://raw.githubusercontent.com/creativetimofficial/public-assets/master/soft-ui-design-system/assets/img/desktop.jpg)'
}" }"
loading="lazy" loading="lazy"
> >
@ -21,7 +21,7 @@
create unlimited combinations for our components. create unlimited combinations for our components.
</p> </p>
<a <a
href="https://www.creative-tim.com/learning-lab/bootstrap/overview/material-kit" href="https://www.creative-tim.com/learning-lab/vue/overview/material-kit/"
class="text-white icon-move-right" class="text-white icon-move-right"
> >
Read docs Read docs

18
src/views/Presentation/PresentationView.vue
View File

@ -7,7 +7,7 @@ import DefaultFooter from "../../examples/footers/FooterDefault.vue";
import Header from "../../examples/Header.vue"; import Header from "../../examples/Header.vue";
import FilledInfoCard from "../../examples/cards/infoCards/FilledInfoCard.vue"; import FilledInfoCard from "../../examples/cards/infoCards/FilledInfoCard.vue";
//Vue Material Kit 2 Pro components //Vue Material Kit 2 components
import MaterialSocialButton from "@/components/MaterialSocialButton.vue"; import MaterialSocialButton from "@/components/MaterialSocialButton.vue";
// sections // sections
@ -92,8 +92,8 @@ onUnmounted(() => {
description="Check the possible ways of working with our product and the necessary files for building your own project." description="Check the possible ways of working with our product and the necessary files for building your own project."
:action="{ :action="{
route: route:
'https://www.creative-tim.com/learning-lab/bootstrap/overview/material-kit', 'https://www.creative-tim.com/learning-lab/vue/overview/material-kit/',
label: { text: 'Let\'s start', color: 'white' }, label: { text: 'Let\'s start', color: 'white' }
}" }"
/> />
</div> </div>
@ -107,8 +107,8 @@ onUnmounted(() => {
used to create the Material Kit." used to create the Material Kit."
:action="{ :action="{
route: route:
'https://www.creative-tim.com/learning-lab/bootstrap/datepicker/material-kit', 'https://www.creative-tim.com/learning-lab/vue/input/material-kit/',
label: { text: 'Read more' }, label: { text: 'Read more' }
}" }"
/> />
</div> </div>
@ -121,8 +121,8 @@ onUnmounted(() => {
who want flexibility, we included many utility classes." who want flexibility, we included many utility classes."
:action="{ :action="{
route: route:
'https://www.creative-tim.com/learning-lab/bootstrap/utilities/material-kit', 'https://www.creative-tim.com/learning-lab/vue/utilities/material-kit/',
label: { text: 'Read more' }, label: { text: 'Read more' }
}" }"
/> />
</div> </div>
@ -133,13 +133,13 @@ onUnmounted(() => {
<div <div
class="container-fluid mt-sm-5 border-radius-xl" class="container-fluid mt-sm-5 border-radius-xl"
:style="{ :style="{
background: 'linear-gradient(195deg, rgb(66, 66, 74), rgb(25, 25, 25))', background: 'linear-gradient(195deg, rgb(66, 66, 74), rgb(25, 25, 25))'
}" }"
> >
<div <div
class="page-header py-6 py-md-5 my-sm-3 mb-3 border-radius-xl" class="page-header py-6 py-md-5 my-sm-3 mb-3 border-radius-xl"
:style="{ :style="{
backgroundImage: `url(${wavesWhite})`, backgroundImage: `url(${wavesWhite})`
}" }"
loading="lazy" loading="lazy"
> >

94
src/views/Presentation/Sections/Data/designBlocksData.js
View File

@ -1,6 +1,6 @@
/* /*
========================================================= =========================================================
* Vue Material Kit 2 PRO - v1.0.0 * Vue Material Kit 2 - v1.0.0
========================================================= =========================================================
* Product Page: https://www.creative-tim.com/product/vue-material-kit-pro * Product Page: https://www.creative-tim.com/product/vue-material-kit-pro
@ -40,100 +40,100 @@ export default [
title: "Page Headers", title: "Page Headers",
subtitle: "10 Examples", subtitle: "10 Examples",
route: "page-headers", route: "page-headers",
pro: false, pro: false
}, },
{ {
image: imgFeatures, image: imgFeatures,
title: "Features", title: "Features",
subtitle: "14 Examples", subtitle: "14 Examples",
route: "page-features", route: "page-features",
pro: false, pro: false
}, },
{ {
image: imgPricing, image: imgPricing,
title: "Pricing", title: "Pricing",
subtitle: "8 Examples", subtitle: "8 Examples",
route: "presentation", route: "presentation",
pro: true, pro: true
}, },
{ {
image: `${imagesPrefix}/faq.jpg`, image: `${imagesPrefix}/faq.jpg`,
title: "FAQ", title: "FAQ",
subtitle: "1 Example", subtitle: "1 Example",
route: "presentation", route: "presentation",
pro: true, pro: true
}, },
{ {
image: imgBlogPosts, image: imgBlogPosts,
title: "Blog Posts", title: "Blog Posts",
subtitle: "11 Examples", subtitle: "11 Examples",
route: "presentation", route: "presentation",
pro: true, pro: true
}, },
{ {
image: imgTestimonials, image: imgTestimonials,
title: "Testimonials", title: "Testimonials",
subtitle: "11 Examples", subtitle: "11 Examples",
route: "presentation", route: "presentation",
pro: true, pro: true
}, },
{ {
image: imgTeam, image: imgTeam,
title: "Teams", title: "Teams",
subtitle: "6 Examples", subtitle: "6 Examples",
route: "presentation", route: "presentation",
pro: true, pro: true
}, },
{ {
image: imgStat, image: imgStat,
title: "Stats", title: "Stats",
subtitle: "3 Examples", subtitle: "3 Examples",
route: "presentation", route: "presentation",
pro: true, pro: true
}, },
{ {
image: `${imagesPrefix}/call-to-action.jpg`, image: `${imagesPrefix}/call-to-action.jpg`,
title: "Call to Actions", title: "Call to Actions",
subtitle: "8 Examples", subtitle: "8 Examples",
route: "presentation", route: "presentation",
pro: true, pro: true
}, },
{ {
image: `${imagesPrefix}/projects.jpg`, image: `${imagesPrefix}/projects.jpg`,
title: "Applications", title: "Applications",
subtitle: "6 Examples", subtitle: "6 Examples",
route: "presentation", route: "presentation",
pro: true, pro: true
}, },
{ {
image: `${imagesPrefix}/logo-area.jpg`, image: `${imagesPrefix}/logo-area.jpg`,
title: "Logo Areas", title: "Logo Areas",
subtitle: "4 Examples", subtitle: "4 Examples",
route: "presentation", route: "presentation",
pro: true, pro: true
}, },
{ {
image: `${imagesPrefix}/footers.jpg`, image: `${imagesPrefix}/footers.jpg`,
title: "Footers", title: "Footers",
subtitle: "10 Examples", subtitle: "10 Examples",
route: "presentation", route: "presentation",
pro: true, pro: true
}, },
{ {
image: `${imagesPrefix}/general-cards.jpg`, image: `${imagesPrefix}/general-cards.jpg`,
title: "General Cards", title: "General Cards",
subtitle: "9 Examples", subtitle: "9 Examples",
route: "presentation", route: "presentation",
pro: true, pro: true
}, },
{ {
image: imgContent, image: imgContent,
title: "Content Sections", title: "Content Sections",
subtitle: "8 Examples", subtitle: "8 Examples",
route: "presentation", route: "presentation",
pro: true, pro: true
}, }
], ]
}, },
{ {
heading: "Navigation", heading: "Navigation",
@ -144,23 +144,23 @@ export default [
title: "Navbars", title: "Navbars",
subtitle: "4 Examples", subtitle: "4 Examples",
route: "navigation-navbars", route: "navigation-navbars",
pro: false, pro: false
}, },
{ {
image: `${imagesPrefix}/nav-tabs.jpg`, image: `${imagesPrefix}/nav-tabs.jpg`,
title: "Nav Tabs", title: "Nav Tabs",
subtitle: "2 Nav Tabs", subtitle: "2 Nav Tabs",
route: "navigation-navtabs", route: "navigation-navtabs",
pro: false, pro: false
}, },
{ {
image: imgPagination, image: imgPagination,
title: "Pagination", title: "Pagination",
subtitle: "3 Examples", subtitle: "3 Examples",
route: "navigation-pagination", route: "navigation-pagination",
pro: false, pro: false
}, }
], ]
}, },
{ {
heading: "Input Areas", heading: "Input Areas",
@ -172,30 +172,30 @@ export default [
title: "Newsletters", title: "Newsletters",
subtitle: "6 Examples", subtitle: "6 Examples",
route: "presentation", route: "presentation",
pro: true, pro: true
}, },
{ {
image: `${imagesPrefix}/contact-sections.jpg`, image: `${imagesPrefix}/contact-sections.jpg`,
title: "Contact Sections", title: "Contact Sections",
subtitle: "8 Examples", subtitle: "8 Examples",
route: "presentation", route: "presentation",
pro: true, pro: true
}, },
{ {
image: `${imagesPrefix}/forms.jpg`, image: `${imagesPrefix}/forms.jpg`,
title: "Forms", title: "Forms",
subtitle: "3 Examples", subtitle: "3 Examples",
route: "inputareas-forms", route: "inputareas-forms",
pro: false, pro: false
}, },
{ {
image: `${imagesPrefix}/inputs.jpg`, image: `${imagesPrefix}/inputs.jpg`,
title: "Inputs", title: "Inputs",
subtitle: "6 Examples", subtitle: "6 Examples",
route: "inputareas-inputs", route: "inputareas-inputs",
pro: false, pro: false
}, }
], ]
}, },
{ {
heading: "Attention Catchers", heading: "Attention Catchers",
@ -207,30 +207,30 @@ export default [
title: "Alerts", title: "Alerts",
subtitle: "4 Examples", subtitle: "4 Examples",
route: "ac-alerts", route: "ac-alerts",
pro: false, pro: false
}, },
{ {
image: `${imagesPrefix}/toasts.jpg`, image: `${imagesPrefix}/toasts.jpg`,
title: "Notifications", title: "Notifications",
subtitle: "3 Examples", subtitle: "3 Examples",
route: "presentation", route: "presentation",
pro: true, pro: true
}, },
{ {
image: imgPopover, image: imgPopover,
title: "Tooltips & Popovers", title: "Tooltips & Popovers",
subtitle: "2 Examples", subtitle: "2 Examples",
route: "ac-tooltips-popovers", route: "ac-tooltips-popovers",
pro: false, pro: false
}, },
{ {
image: imgModal, image: imgModal,
title: "Modals", title: "Modals",
subtitle: "5 Examples", subtitle: "5 Examples",
route: "ac-modals", route: "ac-modals",
pro: false, pro: false
}, }
], ]
}, },
{ {
heading: "Elements", heading: "Elements",
@ -242,71 +242,71 @@ export default [
title: "Buttons", title: "Buttons",
subtitle: "6 Examples", subtitle: "6 Examples",
route: "el-buttons", route: "el-buttons",
pro: false, pro: false
}, },
{ {
image: `${imagesPrefix}/avatars.jpg`, image: `${imagesPrefix}/avatars.jpg`,
title: "Avatars", title: "Avatars",
subtitle: "2 Examples", subtitle: "2 Examples",
route: "el-avatars", route: "el-avatars",
pro: false, pro: false
}, },
{ {
image: imgDropdowns, image: imgDropdowns,
title: "Dropdowns", title: "Dropdowns",
subtitle: "2 Examples", subtitle: "2 Examples",
route: "el-dropdowns", route: "el-dropdowns",
pro: false, pro: false
}, },
{ {
image: `${imagesPrefix}/switch.jpg`, image: `${imagesPrefix}/switch.jpg`,
title: "Toggles", title: "Toggles",
subtitle: "2 Examples", subtitle: "2 Examples",
route: "el-toggles", route: "el-toggles",
pro: false, pro: false
}, },
{ {
image: `${imagesPrefix}/social-buttons.jpg`, image: `${imagesPrefix}/social-buttons.jpg`,
title: "Social Buttons", title: "Social Buttons",
subtitle: "2 Examples", subtitle: "2 Examples",
route: "presentation", route: "presentation",
pro: true, pro: true
}, },
{ {
image: `${imagesPrefix}/breadcrumbs.jpg`, image: `${imagesPrefix}/breadcrumbs.jpg`,
title: "Breadcrumbs", title: "Breadcrumbs",
subtitle: "1 Example", subtitle: "1 Example",
route: "el-breadcrumbs", route: "el-breadcrumbs",
pro: false, pro: false
}, },
{ {
image: `${imagesPrefix}/badges.jpg`, image: `${imagesPrefix}/badges.jpg`,
title: "Badges", title: "Badges",
subtitle: "3 Examples", subtitle: "3 Examples",
route: "el-badges", route: "el-badges",
pro: false, pro: false
}, },
{ {
image: `${imagesPrefix}/progress.jpg`, image: `${imagesPrefix}/progress.jpg`,
title: "Progress Bars", title: "Progress Bars",
subtitle: "4 Examples", subtitle: "4 Examples",
route: "el-progress-bars", route: "el-progress-bars",
pro: false, pro: false
}, },
{ {
image: `${imagesPrefix}/tables.jpg`, image: `${imagesPrefix}/tables.jpg`,
title: "Tables", title: "Tables",
subtitle: "3 Examples", subtitle: "3 Examples",
route: "presentation", route: "presentation",
pro: true, pro: true
}, },
{ {
image: `${imagesPrefix}/typography.jpg`, image: `${imagesPrefix}/typography.jpg`,
title: "Typography", title: "Typography",
subtitle: "2 Examples", subtitle: "2 Examples",
route: "el-typography", route: "el-typography",
pro: false, pro: false
}, }
], ]
}, }
]; ];