diff --git a/resources/js/app.js b/resources/js/app.js
new file mode 100644
index 0000000..92e351e
--- /dev/null
+++ b/resources/js/app.js
@@ -0,0 +1,7 @@
+import "./bootstrap";
+import "./vendor/dom";
+import "./vendor/tailwind-merge";
+import "./vendor/svg-loader";
+
+// Load static files
+import.meta.glob(["../images/**"]);
\ No newline at end of file
diff --git a/resources/js/bootstrap.js b/resources/js/bootstrap.js
new file mode 100644
index 0000000..be97cde
--- /dev/null
+++ b/resources/js/bootstrap.js
@@ -0,0 +1,41 @@
+import _ from "lodash";
+import helper from "./helper";
+import { getColor } from "./colors";
+import dayjs from "dayjs";
+window._ = _;
+window.helper = helper;
+window.getColor = getColor;
+window.dayjs = dayjs;
+
+/**
+ * We'll load the axios HTTP library which allows us to easily issue requests
+ * to our Laravel back-end. This library automatically handles sending the
+ * CSRF token as a header based on the value of the "XSRF" token cookie.
+ */
+
+import axios from "axios";
+window.axios = axios;
+
+window.axios.defaults.headers.common["X-Requested-With"] = "XMLHttpRequest";
+
+/**
+ * Echo exposes an expressive API for subscribing to channels and listening
+ * for events that are broadcast by Laravel. Echo and event broadcasting
+ * allows your team to easily build robust real-time web applications.
+ */
+
+// import Echo from 'laravel-echo';
+
+// import Pusher from 'pusher-js';
+// window.Pusher = Pusher;
+
+// window.Echo = new Echo({
+// broadcaster: 'pusher',
+// key: import.meta.env.VITE_PUSHER_APP_KEY,
+// cluster: import.meta.env.VITE_PUSHER_APP_CLUSTER ?? 'mt1',
+// wsHost: import.meta.env.VITE_PUSHER_HOST ? import.meta.env.VITE_PUSHER_HOST : `ws-${import.meta.env.VITE_PUSHER_APP_CLUSTER}.pusher.com`,
+// wsPort: import.meta.env.VITE_PUSHER_PORT ?? 80,
+// wssPort: import.meta.env.VITE_PUSHER_PORT ?? 443,
+// forceTLS: (import.meta.env.VITE_PUSHER_SCHEME ?? 'https') === 'https',
+// enabledTransports: ['ws', 'wss'],
+// });
diff --git a/resources/js/colors.js b/resources/js/colors.js
new file mode 100644
index 0000000..01fb7e4
--- /dev/null
+++ b/resources/js/colors.js
@@ -0,0 +1,24 @@
+import helper from "./helper";
+import resolveConfig from "tailwindcss/resolveConfig";
+import tailwindConfig from "tailwind-config";
+import flatten from "flat";
+
+const twConfig = resolveConfig(tailwindConfig);
+const colors = twConfig.theme?.colors;
+
+function getColor(colorKey, opacity = 1) {
+ const flattenColors = flatten(colors);
+
+ if (flattenColors[colorKey].search("var") === -1) {
+ return `rgb(${helper.toRGB(flattenColors[colorKey])} / ${opacity})`;
+ } else {
+ const cssVariableName = `--color-${
+ flattenColors[colorKey].split("--color-")[1].split(")")[0]
+ }`;
+ return `rgb(${getComputedStyle(document.body).getPropertyValue(
+ cssVariableName
+ )} / ${opacity})`;
+ }
+}
+
+export { getColor };
diff --git a/resources/js/components/balloon-block-editor/index.js b/resources/js/components/balloon-block-editor/index.js
new file mode 100644
index 0000000..bdc6291
--- /dev/null
+++ b/resources/js/components/balloon-block-editor/index.js
@@ -0,0 +1,10 @@
+(function () {
+ "use strict";
+
+ $(".editor").each(function () {
+ const el = this;
+ BalloonBlockEditor.create(el).catch((error) => {
+ console.error(error);
+ });
+ });
+})();
diff --git a/resources/js/components/balloon-editor/index.js b/resources/js/components/balloon-editor/index.js
new file mode 100644
index 0000000..c56f0cc
--- /dev/null
+++ b/resources/js/components/balloon-editor/index.js
@@ -0,0 +1,10 @@
+(function () {
+ "use strict";
+
+ $(".editor").each(function () {
+ const el = this;
+ BalloonEditor.create(el).catch((error) => {
+ console.error(error);
+ });
+ });
+})();
diff --git a/resources/js/components/calendar/draggable/index.js b/resources/js/components/calendar/draggable/index.js
new file mode 100644
index 0000000..3f0c4f5
--- /dev/null
+++ b/resources/js/components/calendar/draggable/index.js
@@ -0,0 +1,17 @@
+(function () {
+ "use strict";
+
+ $(".full-calendar-draggable").each(function () {
+ new Draggable(this, {
+ itemSelector: ".event",
+ eventData: function (eventEl) {
+ return {
+ title: $(eventEl).find(".event__title").html(),
+ duration: {
+ days: parseInt($(eventEl).find(".event__days").text()),
+ },
+ };
+ },
+ });
+ });
+})();
diff --git a/resources/js/components/calendar/index.js b/resources/js/components/calendar/index.js
new file mode 100644
index 0000000..5218825
--- /dev/null
+++ b/resources/js/components/calendar/index.js
@@ -0,0 +1,65 @@
+(function () {
+ "use strict";
+
+ $(".full-calendar").each(function () {
+ let calendar = new Calendar(this, {
+ plugins: [
+ interactionPlugin,
+ dayGridPlugin,
+ timeGridPlugin,
+ listPlugin,
+ ],
+ droppable: true,
+ headerToolbar: {
+ left: "prev,next today",
+ center: "title",
+ right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek",
+ },
+ initialDate: "2021-01-12",
+ navLinks: true,
+ editable: true,
+ dayMaxEvents: true,
+ events: [
+ {
+ title: "Vue Vixens Day",
+ start: "2021-01-05",
+ end: "2021-01-08",
+ },
+ {
+ title: "VueConfUS",
+ start: "2021-01-11",
+ end: "2021-01-15",
+ },
+ {
+ title: "VueJS Amsterdam",
+ start: "2021-01-17",
+ end: "2021-01-21",
+ },
+ {
+ title: "Vue Fes Japan 2019",
+ start: "2021-01-21",
+ end: "2021-01-24",
+ },
+ {
+ title: "Laracon 2021",
+ start: "2021-01-24",
+ end: "2021-01-27",
+ },
+ ],
+ drop: function (info) {
+ if (
+ $("#checkbox-events").length &&
+ $("#checkbox-events")[0].checked
+ ) {
+ $(info.draggedEl).parent().remove();
+
+ if ($("#calendar-events").children().length == 1) {
+ $("#calendar-no-events").removeClass("hidden");
+ }
+ }
+ },
+ });
+
+ calendar.render();
+ });
+})();
diff --git a/resources/js/components/classic-editor/index.js b/resources/js/components/classic-editor/index.js
new file mode 100644
index 0000000..1d3baad
--- /dev/null
+++ b/resources/js/components/classic-editor/index.js
@@ -0,0 +1,10 @@
+(function () {
+ "use strict";
+
+ $(".editor").each(function () {
+ const el = this;
+ ClassicEditor.create(el).catch((error) => {
+ console.error(error);
+ });
+ });
+})();
diff --git a/resources/js/components/dark-mode-switcher/index.js b/resources/js/components/dark-mode-switcher/index.js
new file mode 100644
index 0000000..9b5d06a
--- /dev/null
+++ b/resources/js/components/dark-mode-switcher/index.js
@@ -0,0 +1,17 @@
+(function () {
+ "use strict";
+
+ // Dark mode switcher
+ $(".dark-mode-switcher").on("click", function () {
+ if ($(this).hasClass("dark-mode-switcher--active")) {
+ $(this).removeClass("dark-mode-switcher--active");
+ } else {
+ $(this).addClass("dark-mode-switcher--active");
+ }
+
+ setTimeout(() => {
+ const link = $(".dark-mode-switcher").data("url");
+ window.location.href = link;
+ }, 500);
+ });
+})();
diff --git a/resources/js/components/document-editor/index.js b/resources/js/components/document-editor/index.js
new file mode 100644
index 0000000..5ee7abb
--- /dev/null
+++ b/resources/js/components/document-editor/index.js
@@ -0,0 +1,17 @@
+(function () {
+ "use strict";
+
+ $(".editor").each(function () {
+ const el = this;
+ DocumentEditor.create($(el).find(".document-editor__editable")[0])
+ .then((editor) => {
+ $(el)
+ .closest(".editor")
+ .find(".document-editor__toolbar")
+ .append(editor.ui.view.toolbar.element);
+ })
+ .catch((error) => {
+ console.error(error);
+ });
+ });
+})();
diff --git a/resources/js/components/donut-chart/index.js b/resources/js/components/donut-chart/index.js
new file mode 100644
index 0000000..b67dbef
--- /dev/null
+++ b/resources/js/components/donut-chart/index.js
@@ -0,0 +1,44 @@
+(function () {
+ "use strict";
+
+ // Chart
+ if ($(".donut-chart").length) {
+ let ctx = $(".donut-chart")[0].getContext("2d");
+ let myDoughnutChart = new Chart(ctx, {
+ type: "doughnut",
+ data: {
+ labels: ["Html", "Vuejs", "Laravel"],
+ datasets: [
+ {
+ data: [15, 10, 65],
+ backgroundColor: [
+ getColor("pending", 0.9),
+ getColor("warning", 0.9),
+ getColor("primary", 0.9),
+ ],
+ hoverBackgroundColor: [
+ getColor("pending", 0.9),
+ getColor("warning", 0.9),
+ getColor("primary", 0.9),
+ ],
+ borderWidth: 5,
+ borderColor: $("html").hasClass("dark")
+ ? getColor("darkmode.700")
+ : getColor("white"),
+ },
+ ],
+ },
+ options: {
+ maintainAspectRatio: false,
+ plugins: {
+ legend: {
+ labels: {
+ color: getColor("slate.500", 0.8),
+ },
+ },
+ },
+ cutout: "80%",
+ },
+ });
+ }
+})();
diff --git a/resources/js/components/dropzone/index.js b/resources/js/components/dropzone/index.js
new file mode 100644
index 0000000..c1e4b45
--- /dev/null
+++ b/resources/js/components/dropzone/index.js
@@ -0,0 +1,39 @@
+(function () {
+ "use strict";
+
+ // Dropzone
+ Dropzone.autoDiscover = false;
+ $(".dropzone").each(function () {
+ let options = {
+ accept: (file, done) => {
+ console.log("Uploaded");
+ done();
+ },
+ };
+
+ if ($(this).data("single")) {
+ options.maxFiles = 1;
+ }
+
+ if ($(this).data("file-types")) {
+ options.accept = (file, done) => {
+ if (
+ $(this).data("file-types").split("|").indexOf(file.type) ===
+ -1
+ ) {
+ alert("Error! Files of this type are not accepted");
+ done("Error! Files of this type are not accepted");
+ } else {
+ console.log("Uploaded");
+ done();
+ }
+ };
+ }
+
+ let dz = new Dropzone(this, options);
+
+ dz.on("maxfilesexceeded", (file) => {
+ alert("No more files please!");
+ });
+ });
+})();
diff --git a/resources/js/components/highlight/index.js b/resources/js/components/highlight/index.js
new file mode 100644
index 0000000..946729e
--- /dev/null
+++ b/resources/js/components/highlight/index.js
@@ -0,0 +1,32 @@
+(function () {
+ "use strict";
+
+ // Highlight code
+ $(".highlight").each(function () {
+ let source = $(this).find("code").html();
+
+ // First replace
+ let replace = helper.replaceAll(source, "HTMLOpenTag", "<");
+ replace = helper.replaceAll(replace, "HTMLCloseTag", ">");
+
+ // Save for copy code function
+ let originalSource = $(
+ ''
+ ).val(replace);
+ $(this).append(originalSource);
+
+ // Beautify code
+ if ($(this).find("code").hasClass("javascript")) {
+ replace = jsBeautify(replace);
+ } else {
+ replace = jsBeautify.html(replace);
+ }
+
+ // Format for highlight.js
+ replace = helper.replaceAll(replace, "<", "<");
+ replace = helper.replaceAll(replace, ">", ">");
+ $(this).find("code").html(replace);
+ });
+
+ hljs.highlightAll();
+})();
diff --git a/resources/js/components/horizontal-bar-chart/index.js b/resources/js/components/horizontal-bar-chart/index.js
new file mode 100644
index 0000000..8c34ea9
--- /dev/null
+++ b/resources/js/components/horizontal-bar-chart/index.js
@@ -0,0 +1,88 @@
+(function () {
+ "use strict";
+
+ // Chart
+ if ($(".horizontal-bar-chart").length) {
+ let ctx = $(".horizontal-bar-chart")[0].getContext("2d");
+ let myChart = new Chart(ctx, {
+ type: "bar",
+ data: {
+ labels: [
+ "Jan",
+ "Feb",
+ "Mar",
+ "Apr",
+ "May",
+ "Jun",
+ "Jul",
+ "Aug",
+ ],
+ datasets: [
+ {
+ label: "Html Template",
+ barPercentage: 0.5,
+ barThickness: 6,
+ maxBarThickness: 8,
+ minBarLength: 2,
+ data: [0, 200, 250, 200, 500, 450, 850, 1050],
+ backgroundColor: getColor("primary"),
+ },
+ {
+ label: "VueJs Template",
+ barPercentage: 0.5,
+ barThickness: 6,
+ maxBarThickness: 8,
+ minBarLength: 2,
+ data: [0, 300, 400, 560, 320, 600, 720, 850],
+ backgroundColor: $("html").hasClass("dark")
+ ? getColor("darkmode.200")
+ : getColor("slate.300"),
+ },
+ ],
+ },
+ options: {
+ indexAxis: "y",
+ maintainAspectRatio: false,
+ plugins: {
+ legend: {
+ labels: {
+ color: getColor("slate.500", 0.8),
+ },
+ },
+ },
+ scales: {
+ x: {
+ ticks: {
+ font: {
+ size: "12",
+ },
+ color: getColor("slate.500", 0.8),
+ callback: function (value, index, values) {
+ return "$" + value;
+ },
+ },
+ grid: {
+ display: false,
+ drawBorder: false,
+ },
+ },
+ y: {
+ ticks: {
+ font: {
+ size: "12",
+ },
+ color: getColor("slate.500", 0.8),
+ },
+ grid: {
+ color: $("html").hasClass("dark")
+ ? getColor("slate.500", 0.3)
+ : getColor("slate.300"),
+ borderDash: [2, 2],
+ drawBorder: false,
+ },
+ },
+ },
+ },
+ });
+ }
+})();
diff --git a/resources/js/components/inline-editor/index.js b/resources/js/components/inline-editor/index.js
new file mode 100644
index 0000000..e179306
--- /dev/null
+++ b/resources/js/components/inline-editor/index.js
@@ -0,0 +1,10 @@
+(function () {
+ "use strict";
+
+ $(".editor").each(function () {
+ const el = this;
+ InlineEditor.create(el).catch((error) => {
+ console.error(error);
+ });
+ });
+})();
diff --git a/resources/js/components/leaflet-map-loader/index.js b/resources/js/components/leaflet-map-loader/index.js
new file mode 100644
index 0000000..13d5727
--- /dev/null
+++ b/resources/js/components/leaflet-map-loader/index.js
@@ -0,0 +1,98 @@
+import locations from "../../../json/location.json"
+
+(function () {
+ "use strict";
+
+ $(".leaflet").each(async function () {
+ const map = L.map(this, {
+ center: [$(this).data("lat"), $(this).data("long")],
+ zoom: 9,
+ });
+
+ if (map) {
+ const apiKey = $(this).data("api-key");
+
+ L.tileLayer(
+ `https://tile.thunderforest.com/atlas/{z}/{x}/{y}@2x.png?apikey=${apiKey}`,
+ {
+ attribution:
+ "Map data © OpenStreetMap contributors, Tiles © Thunderforest",
+ }
+ ).addTo(map);
+
+ const markers = L.markerClusterGroup({
+ maxClusterRadius: 30,
+ iconCreateFunction: function (cluster) {
+ const color = $("html").hasClass("dark")
+ ? getColor("darkmode.100", 0.6)
+ : getColor("primary", 0.8);
+ const mapMarkerRegionSvg =
+ window.btoa(`
+ `);
+
+ return L.divIcon({
+ html: `
+
${cluster.getChildCount()}
+
+
`,
+ className: "",
+ iconSize: L.point(42, 42),
+ iconAnchor: L.point(20, 45),
+ });
+ },
+ spiderfyOnMaxZoom: false,
+ showCoverageOnHover: false,
+ });
+
+ map.addLayer(markers);
+
+ const color = $("html").hasClass("dark")
+ ? getColor("darkmode.100")
+ : getColor("primary");
+ const mapMarkerSvg =
+ window.btoa(`
+ `);
+
+ locations.map(function (markerElem) {
+ const marker = L.marker(
+ {
+ lat: parseFloat(markerElem.latitude),
+ lng: parseFloat(markerElem.longitude),
+ },
+ {
+ title: markerElem.name,
+ icon: L.icon({
+ iconUrl: `data:image/svg+xml;base64,${mapMarkerSvg}`,
+ iconAnchor: L.point(10, 35),
+ }),
+ }
+ );
+ markers.addLayer(marker);
+ });
+ }
+ });
+})();
diff --git a/resources/js/components/line-chart/index.js b/resources/js/components/line-chart/index.js
new file mode 100644
index 0000000..872c6f9
--- /dev/null
+++ b/resources/js/components/line-chart/index.js
@@ -0,0 +1,98 @@
+(function () {
+ "use strict";
+
+ // Chart
+ if ($(".line-chart").length) {
+ let ctx = $(".line-chart")[0].getContext("2d");
+ let myChart = new Chart(ctx, {
+ type: "line",
+ data: {
+ labels: [
+ "Jan",
+ "Feb",
+ "Mar",
+ "Apr",
+ "May",
+ "Jun",
+ "Jul",
+ "Aug",
+ "Sep",
+ "Oct",
+ "Nov",
+ "Dec",
+ ],
+ datasets: [
+ {
+ label: "Html Template",
+ data: [
+ 0, 200, 250, 200, 500, 450, 850, 1050, 950, 1100,
+ 900, 1200,
+ ],
+ borderWidth: 2,
+ borderColor: getColor("primary"),
+ backgroundColor: "transparent",
+ pointBorderColor: "transparent",
+ tension: 0.4,
+ },
+ {
+ label: "VueJs Template",
+ data: [
+ 0, 300, 400, 560, 320, 600, 720, 850, 690, 805,
+ 1200, 1010,
+ ],
+ borderWidth: 2,
+ borderDash: [2, 2],
+ borderColor: $("html").hasClass("dark")
+ ? getColor("slate.400", 0.6)
+ : getColor("slate.400"),
+ backgroundColor: "transparent",
+ pointBorderColor: "transparent",
+ tension: 0.4,
+ },
+ ],
+ },
+ options: {
+ maintainAspectRatio: false,
+ plugins: {
+ legend: {
+ labels: {
+ color: getColor("slate.500", 0.8),
+ },
+ },
+ },
+ scales: {
+ x: {
+ ticks: {
+ font: {
+ size: "12",
+ },
+ font: getColor("slate.500", 0.8),
+ },
+ grid: {
+ display: false,
+ drawBorder: false,
+ },
+ },
+ y: {
+ ticks: {
+ font: {
+ size: "12",
+ },
+ color: getColor("slate.500", 0.8),
+ callback: function (value, index, values) {
+ return "$" + value;
+ },
+ },
+ grid: {
+ color: $("html").hasClass("dark")
+ ? getColor("slate.500", 0.3)
+ : getColor("slate.300"),
+ borderDash: [2, 2],
+ drawBorder: false,
+ },
+ },
+ },
+ },
+ });
+ }
+})();
diff --git a/resources/js/components/litepicker/index.js b/resources/js/components/litepicker/index.js
new file mode 100644
index 0000000..7acb2dd
--- /dev/null
+++ b/resources/js/components/litepicker/index.js
@@ -0,0 +1,44 @@
+(function () {
+ "use strict";
+
+ // Litepicker
+ $(".datepicker").each(function () {
+ let options = {
+ autoApply: false,
+ singleMode: false,
+ numberOfColumns: 2,
+ numberOfMonths: 2,
+ showWeekNumbers: true,
+ format: "D MMM, YYYY",
+ dropdowns: {
+ minYear: 1990,
+ maxYear: null,
+ months: true,
+ years: true,
+ },
+ };
+
+ if ($(this).data("single-mode")) {
+ options.singleMode = true;
+ options.numberOfColumns = 1;
+ options.numberOfMonths = 1;
+ }
+
+ if ($(this).data("format")) {
+ options.format = $(this).data("format");
+ }
+
+ if (!$(this).val()) {
+ let date = dayjs().format(options.format);
+ date += !options.singleMode
+ ? " - " + dayjs().add(1, "month").format(options.format)
+ : "";
+ $(this).val(date);
+ }
+
+ new Litepicker({
+ element: this,
+ ...options,
+ });
+ });
+})();
diff --git a/resources/js/components/lucide/index.js b/resources/js/components/lucide/index.js
new file mode 100644
index 0000000..1dd47c1
--- /dev/null
+++ b/resources/js/components/lucide/index.js
@@ -0,0 +1,10 @@
+(function () {
+ "use strict";
+
+ // Lucide Icons
+ createIcons({
+ icons,
+ "stroke-width": 1.5,
+ nameAttr: "data-lucide",
+ });
+})();
diff --git a/resources/js/components/mobile-menu/index.js b/resources/js/components/mobile-menu/index.js
new file mode 100644
index 0000000..b7dbb34
--- /dev/null
+++ b/resources/js/components/mobile-menu/index.js
@@ -0,0 +1,49 @@
+(function () {
+ "use strict";
+
+ // Scrollbar
+ if ($(".mobile-menu .scrollable").length) {
+ new SimpleBar($(".mobile-menu .scrollable")[0]);
+ }
+
+ // Mobile Menu
+ $(".mobile-menu-toggler").on("click", function () {
+ if ($(".mobile-menu").hasClass("mobile-menu--active")) {
+ $(".mobile-menu").removeClass("mobile-menu--active");
+ } else {
+ $(".mobile-menu").addClass("mobile-menu--active");
+ }
+ });
+
+ $(".mobile-menu")
+ .find(".menu")
+ .on("click", function () {
+ if ($(this).parent().find("ul").length) {
+ if (
+ $(this).parent().find("ul").first()[0].offsetParent !== null
+ ) {
+ $(this)
+ .find(".menu__sub-icon")
+ .removeClass("transform rotate-180");
+ $(this)
+ .parent()
+ .find("ul")
+ .first()
+ .slideUp(300, function () {
+ $(this).removeClass("menu__sub-open");
+ });
+ } else {
+ $(this)
+ .find(".menu__sub-icon")
+ .addClass("transform rotate-180");
+ $(this)
+ .parent()
+ .find("ul")
+ .first()
+ .slideDown(300, function () {
+ $(this).addClass("menu__sub-open");
+ });
+ }
+ }
+ });
+})();
diff --git a/resources/js/components/pie-chart/index.js b/resources/js/components/pie-chart/index.js
new file mode 100644
index 0000000..72c8693
--- /dev/null
+++ b/resources/js/components/pie-chart/index.js
@@ -0,0 +1,43 @@
+(function () {
+ "use strict";
+
+ // Chart
+ if ($(".pie-chart").length) {
+ let ctx = $(".pie-chart")[0].getContext("2d");
+ let myPieChart = new Chart(ctx, {
+ type: "pie",
+ data: {
+ labels: ["Html", "Vuejs", "Laravel"],
+ datasets: [
+ {
+ data: [15, 10, 65],
+ backgroundColor: [
+ getColor("pending", 0.9),
+ getColor("warning", 0.9),
+ getColor("primary", 0.9),
+ ],
+ hoverBackgroundColor: [
+ getColor("pending", 0.9),
+ getColor("warning", 0.9),
+ getColor("primary", 0.9),
+ ],
+ borderWidth: 5,
+ borderColor: $("html").hasClass("dark")
+ ? getColor("darkmode.700")
+ : getColor("white"),
+ },
+ ],
+ },
+ options: {
+ maintainAspectRatio: false,
+ plugins: {
+ legend: {
+ labels: {
+ color: getColor("slate.500", 0.8),
+ },
+ },
+ },
+ },
+ });
+ }
+})();
diff --git a/resources/js/components/preview-component/index.js b/resources/js/components/preview-component/index.js
new file mode 100644
index 0000000..2160d75
--- /dev/null
+++ b/resources/js/components/preview-component/index.js
@@ -0,0 +1,20 @@
+(function () {
+ "use strict";
+
+ // Show code or preview
+ $(".preview-component").each(function () {
+ const previewComponent = this;
+ $(this)
+ .find('input[type="checkbox"]')
+ .first()
+ .on("click", function () {
+ if ($(this).is(":checked")) {
+ $(previewComponent).find(".preview").hide();
+ $(previewComponent).find(".source").fadeIn(200);
+ } else {
+ $(previewComponent).find(".preview").fadeIn(200);
+ $(previewComponent).find(".source").hide();
+ }
+ });
+ });
+})();
diff --git a/resources/js/components/report-bar-chart-1/index.js b/resources/js/components/report-bar-chart-1/index.js
new file mode 100644
index 0000000..1776fe2
--- /dev/null
+++ b/resources/js/components/report-bar-chart-1/index.js
@@ -0,0 +1,85 @@
+(function () {
+ "use strict";
+
+ // Chart
+ if ($(".report-bar-chart-1").length) {
+ let ctx = $(".report-bar-chart-1")[0].getContext("2d");
+ let myChart = new Chart(ctx, {
+ type: "bar",
+ data: {
+ labels: [
+ "Jan",
+ "Feb",
+ "Mar",
+ "Apr",
+ "May",
+ "Jun",
+ "Jul",
+ "Aug",
+ "Sep",
+ "Oct",
+ "Nov",
+ "Dec",
+ ],
+ datasets: [
+ {
+ label: "Html Template",
+ barThickness: 8,
+ maxBarThickness: 6,
+ data: [
+ 60, 150, 30, 200, 180, 50, 180, 120, 230, 180, 250,
+ 270,
+ ],
+ backgroundColor: getColor("primary", 0.9),
+ },
+ {
+ label: "VueJs Template",
+ barThickness: 8,
+ maxBarThickness: 6,
+ data: [
+ 50, 135, 40, 180, 190, 60, 150, 90, 250, 170, 240,
+ 250,
+ ],
+ backgroundColor: $("html").hasClass("dark")
+ ? getColor("darkmode.400")
+ : getColor("slate.300"),
+ },
+ ],
+ },
+ options: {
+ maintainAspectRatio: false,
+ plugins: {
+ legend: {
+ display: false,
+ },
+ },
+ scales: {
+ x: {
+ ticks: {
+ font: {
+ size: 11,
+ },
+ color: getColor("slate.500", 0.8),
+ },
+ grid: {
+ display: false,
+ drawBorder: false,
+ },
+ },
+ y: {
+ ticks: {
+ display: false,
+ },
+ grid: {
+ color: $("html").hasClass("dark")
+ ? getColor("darkmode.300", 0.8)
+ : getColor("slate.300"),
+ borderDash: [2, 2],
+ drawBorder: false,
+ },
+ },
+ },
+ },
+ });
+ }
+})();
diff --git a/resources/js/components/report-bar-chart/index.js b/resources/js/components/report-bar-chart/index.js
new file mode 100644
index 0000000..e048401
--- /dev/null
+++ b/resources/js/components/report-bar-chart/index.js
@@ -0,0 +1,89 @@
+(function () {
+ "use strict";
+
+ // Chart
+ if ($(".report-bar-chart").length) {
+ // Fake visitor data
+ let reportBarChartData = new Array(40).fill(0).map((data, key) => {
+ if (key % 3 == 0 || key % 5 == 0) {
+ return Math.ceil(Math.random() * (0 - 20) + 20);
+ } else {
+ return Math.ceil(Math.random() * (0 - 7) + 7);
+ }
+ });
+
+ // Fake visitor bar color
+ let reportBarChartColor = reportBarChartData.map((data) => {
+ if (data >= 8 && data <= 14) {
+ return $("html").hasClass("dark")
+ ? "#2E51BBA6"
+ : getColor("primary", 0.65);
+ } else if (data >= 15) {
+ return $("html").hasClass("dark")
+ ? "#2E51BB"
+ : getColor("primary");
+ }
+
+ return $("html").hasClass("dark")
+ ? "#2E51BB59"
+ : getColor("primary", 0.35);
+ });
+
+ let ctx = $(".report-bar-chart")[0].getContext("2d");
+ let myBarChart = new Chart(ctx, {
+ type: "bar",
+ data: {
+ labels: reportBarChartData,
+ datasets: [
+ {
+ label: "Html Template",
+ barThickness: 6,
+ data: reportBarChartData,
+ backgroundColor: reportBarChartColor,
+ },
+ ],
+ },
+ options: {
+ maintainAspectRatio: false,
+ plugins: {
+ legend: {
+ display: false,
+ },
+ },
+ scales: {
+ x: {
+ ticks: {
+ display: false,
+ },
+ grid: {
+ display: false,
+ },
+ },
+ y: {
+ ticks: {
+ display: false,
+ },
+ grid: {
+ display: false,
+ drawBorder: false,
+ },
+ },
+ },
+ },
+ });
+
+ setInterval(() => {
+ // Swap visitor data
+ let newData = reportBarChartData[0];
+ reportBarChartData.shift();
+ reportBarChartData.push(newData);
+
+ // Swap visitor bar color
+ let newColor = reportBarChartColor[0];
+ reportBarChartColor.shift();
+ reportBarChartColor.push(newColor);
+
+ myBarChart.update();
+ }, 1000);
+ }
+})();
diff --git a/resources/js/components/report-donut-chart-1/index.js b/resources/js/components/report-donut-chart-1/index.js
new file mode 100644
index 0000000..9988c44
--- /dev/null
+++ b/resources/js/components/report-donut-chart-1/index.js
@@ -0,0 +1,44 @@
+(function () {
+ "use strict";
+
+ // Chart
+ if ($(".report-donut-chart-1").length) {
+ $(".report-donut-chart-1").each(function () {
+ let ctx = $(this)[0].getContext("2d");
+ let myDoughnutChart = new Chart(ctx, {
+ type: "doughnut",
+ data: {
+ labels: ["Yellow", "Dark"],
+ datasets: [
+ {
+ data: [15, 10, 65],
+ backgroundColor: [
+ getColor("pending", 0.9),
+ getColor("warning", 0.9),
+ getColor("primary", 0.9),
+ ],
+ hoverBackgroundColor: [
+ getColor("pending", 0.9),
+ getColor("warning", 0.9),
+ getColor("primary", 0.9),
+ ],
+ borderWidth: 2,
+ borderColor: $("html").hasClass("dark")
+ ? getColor("darkmode.700")
+ : getColor("white"),
+ },
+ ],
+ },
+ options: {
+ maintainAspectRatio: false,
+ plugins: {
+ legend: {
+ display: false,
+ },
+ },
+ cutout: "83%",
+ },
+ });
+ });
+ }
+})();
diff --git a/resources/js/components/report-donut-chart-2/index.js b/resources/js/components/report-donut-chart-2/index.js
new file mode 100644
index 0000000..8084251
--- /dev/null
+++ b/resources/js/components/report-donut-chart-2/index.js
@@ -0,0 +1,42 @@
+(function () {
+ "use strict";
+
+ // Chart
+ if ($(".report-donut-chart-2").length) {
+ let ctx = $(".report-donut-chart-2")[0].getContext("2d");
+ let myDoughnutChart = new Chart(ctx, {
+ type: "doughnut",
+ data: {
+ labels: ["Yellow", "Dark"],
+ datasets: [
+ {
+ data: [15, 10, 65],
+ backgroundColor: [
+ getColor("pending", 0.9),
+ getColor("warning", 0.9),
+ getColor("primary", 0.9),
+ ],
+ hoverBackgroundColor: [
+ getColor("pending", 0.9),
+ getColor("warning", 0.9),
+ getColor("primary", 0.9),
+ ],
+ borderWidth: 2,
+ borderColor: $("html").hasClass("dark")
+ ? getColor("darkmode.700")
+ : getColor("white"),
+ },
+ ],
+ },
+ options: {
+ maintainAspectRatio: false,
+ plugins: {
+ legend: {
+ display: false,
+ },
+ },
+ cutout: "83%",
+ },
+ });
+ }
+})();
diff --git a/resources/js/components/report-donut-chart/index.js b/resources/js/components/report-donut-chart/index.js
new file mode 100644
index 0000000..964949a
--- /dev/null
+++ b/resources/js/components/report-donut-chart/index.js
@@ -0,0 +1,46 @@
+(function () {
+ "use stirct";
+
+ // Chart
+ if ($("#report-donut-chart").length) {
+ let ctx = $("#report-donut-chart")[0].getContext("2d");
+ let myDoughnutChart = new Chart(ctx, {
+ type: "doughnut",
+ data: {
+ labels: [
+ "31 - 50 Years old",
+ ">= 50 Years old",
+ "17 - 30 Years old",
+ ],
+ datasets: [
+ {
+ data: [15, 10, 65],
+ backgroundColor: [
+ getColor("pending", 0.9),
+ getColor("warning", 0.9),
+ getColor("primary", 0.9),
+ ],
+ hoverBackgroundColor: [
+ getColor("pending", 0.9),
+ getColor("warning", 0.9),
+ getColor("primary", 0.9),
+ ],
+ borderWidth: 5,
+ borderColor: $("html").hasClass("dark")
+ ? getColor("darkmode.700")
+ : getColor("white"),
+ },
+ ],
+ },
+ options: {
+ maintainAspectRatio: false,
+ plugins: {
+ legend: {
+ display: false,
+ },
+ },
+ cutout: "80%",
+ },
+ });
+ }
+})();
diff --git a/resources/js/components/report-line-chart/index.js b/resources/js/components/report-line-chart/index.js
new file mode 100644
index 0000000..65db3f2
--- /dev/null
+++ b/resources/js/components/report-line-chart/index.js
@@ -0,0 +1,96 @@
+(function () {
+ "use strict";
+
+ // Chart
+ if ($("#report-line-chart").length) {
+ let ctx = $("#report-line-chart")[0].getContext("2d");
+ let myChart = new Chart(ctx, {
+ type: "line",
+ data: {
+ labels: [
+ "Jan",
+ "Feb",
+ "Mar",
+ "Apr",
+ "May",
+ "Jun",
+ "Jul",
+ "Aug",
+ "Sep",
+ "Oct",
+ "Nov",
+ "Dec",
+ ],
+ datasets: [
+ {
+ label: "# of Votes",
+ data: [
+ 0, 200, 250, 200, 700, 550, 650, 1050, 950, 1100,
+ 900, 1200,
+ ],
+ borderWidth: 2,
+ borderColor: getColor("primary", 0.8),
+ backgroundColor: "transparent",
+ pointBorderColor: "transparent",
+ tension: 0.4,
+ },
+ {
+ label: "# of Votes",
+ data: [
+ 0, 300, 400, 560, 320, 600, 720, 850, 690, 805,
+ 1200, 1010,
+ ],
+ borderWidth: 2,
+ borderDash: [2, 2],
+ borderColor: $("html").hasClass("dark")
+ ? getColor("slate.400", 0.6)
+ : getColor("slate.400"),
+ backgroundColor: "transparent",
+ pointBorderColor: "transparent",
+ tension: 0.4,
+ },
+ ],
+ },
+ options: {
+ maintainAspectRatio: false,
+ plugins: {
+ legend: {
+ display: false,
+ },
+ },
+ scales: {
+ x: {
+ ticks: {
+ font: {
+ size: 12,
+ },
+ color: getColor("slate.500", 0.8),
+ },
+ grid: {
+ display: false,
+ drawBorder: false,
+ },
+ },
+ y: {
+ ticks: {
+ font: {
+ size: 12,
+ },
+ color: getColor("slate.500", 0.8),
+ callback: function (value, index, values) {
+ return "$" + value;
+ },
+ },
+ grid: {
+ color: $("html").hasClass("dark")
+ ? getColor("slate.500", 0.3)
+ : getColor("slate.300"),
+ borderDash: [2, 2],
+ drawBorder: false,
+ },
+ },
+ },
+ },
+ });
+ }
+})();
diff --git a/resources/js/components/report-pie-chart/index.js b/resources/js/components/report-pie-chart/index.js
new file mode 100644
index 0000000..f3ae3a0
--- /dev/null
+++ b/resources/js/components/report-pie-chart/index.js
@@ -0,0 +1,45 @@
+(function () {
+ "use strict";
+
+ // Chart
+ if ($("#report-pie-chart").length) {
+ let ctx = $("#report-pie-chart")[0].getContext("2d");
+ let myPieChart = new Chart(ctx, {
+ type: "pie",
+ data: {
+ labels: [
+ "31 - 50 Years old",
+ ">= 50 Years old",
+ "17 - 30 Years old",
+ ],
+ datasets: [
+ {
+ data: [15, 10, 65],
+ backgroundColor: [
+ getColor("pending", 0.9),
+ getColor("warning", 0.9),
+ getColor("primary", 0.9),
+ ],
+ hoverBackgroundColor: [
+ getColor("pending", 0.9),
+ getColor("warning", 0.9),
+ getColor("primary", 0.9),
+ ],
+ borderWidth: 5,
+ borderColor: $("html").hasClass("dark")
+ ? getColor("darkmode.700")
+ : getColor("white"),
+ },
+ ],
+ },
+ options: {
+ maintainAspectRatio: false,
+ plugins: {
+ legend: {
+ display: false,
+ },
+ },
+ },
+ });
+ }
+})();
diff --git a/resources/js/components/simple-line-chart-1/index.js b/resources/js/components/simple-line-chart-1/index.js
new file mode 100644
index 0000000..b360b23
--- /dev/null
+++ b/resources/js/components/simple-line-chart-1/index.js
@@ -0,0 +1,77 @@
+(function () {
+ "use strict";
+
+ // Chart
+ if ($(".simple-line-chart-1").length) {
+ $(".simple-line-chart-1").each(function () {
+ let ctx = $(this)[0].getContext("2d");
+ let myChart = new Chart(ctx, {
+ type: "line",
+ data: {
+ labels: [
+ "Jan",
+ "Feb",
+ "Mar",
+ "Apr",
+ "May",
+ "Jun",
+ "Jul",
+ "Aug",
+ "Sep",
+ "Oct",
+ "Nov",
+ "Dec",
+ ],
+ datasets: [
+ {
+ label: "# of Votes",
+ data:
+ $(this).data("random") !== undefined
+ ? helper.randomNumbers(0, 5, 12)
+ : [
+ 0, 200, 250, 200, 500, 450, 850, 1050,
+ 950, 1100, 900, 1200,
+ ],
+ borderWidth: 2,
+ borderColor:
+ $(this).data("line-color") !== undefined
+ ? $(this).data("line-color")
+ : getColor("primary", 0.8),
+ backgroundColor: "transparent",
+ pointBorderColor: "transparent",
+ tension: 0.4,
+ },
+ ],
+ },
+ options: {
+ maintainAspectRatio: false,
+ plugins: {
+ legend: {
+ display: false,
+ },
+ },
+ scales: {
+ x: {
+ ticks: {
+ display: false,
+ },
+ grid: {
+ display: false,
+ drawBorder: false,
+ },
+ },
+ y: {
+ ticks: {
+ display: false,
+ },
+ grid: {
+ display: false,
+ drawBorder: false,
+ },
+ },
+ },
+ },
+ });
+ });
+ }
+})();
diff --git a/resources/js/components/simple-line-chart-2/index.js b/resources/js/components/simple-line-chart-2/index.js
new file mode 100644
index 0000000..b66a5bb
--- /dev/null
+++ b/resources/js/components/simple-line-chart-2/index.js
@@ -0,0 +1,77 @@
+(function () {
+ "use strict";
+
+ // Chart
+ if ($(".simple-line-chart-2").length) {
+ $(".simple-line-chart-2").each(function () {
+ let ctx = $(this)[0].getContext("2d");
+ let myChart = new Chart(ctx, {
+ type: "line",
+ data: {
+ labels: [
+ "Jan",
+ "Feb",
+ "Mar",
+ "Apr",
+ "May",
+ "Jun",
+ "Jul",
+ "Aug",
+ "Sep",
+ "Oct",
+ "Nov",
+ "Dec",
+ ],
+ datasets: [
+ {
+ label: "# of Votes",
+ data:
+ $(this).data("random") !== undefined
+ ? helper.randomNumbers(0, 5, 12)
+ : [
+ 0, 300, 400, 560, 320, 600, 720, 850,
+ 690, 805, 1200, 1010,
+ ],
+ borderWidth: 2,
+ borderDash: [2, 2],
+ borderColor:
+ $(this).data("line-color") !== undefined
+ ? $(this).data("line-color")
+ : getColor("slate.300"),
+ backgroundColor: "transparent",
+ pointBorderColor: "transparent",
+ },
+ ],
+ },
+ options: {
+ maintainAspectRatio: false,
+ plugins: {
+ legend: {
+ display: false,
+ },
+ },
+ scales: {
+ x: {
+ ticks: {
+ display: false,
+ },
+ grid: {
+ display: false,
+ drawBorder: false,
+ },
+ },
+ y: {
+ ticks: {
+ display: false,
+ },
+ grid: {
+ display: false,
+ drawBorder: false,
+ },
+ },
+ },
+ },
+ });
+ });
+ }
+})();
diff --git a/resources/js/components/simple-line-chart-3/index.js b/resources/js/components/simple-line-chart-3/index.js
new file mode 100644
index 0000000..0c36e9d
--- /dev/null
+++ b/resources/js/components/simple-line-chart-3/index.js
@@ -0,0 +1,84 @@
+(function () {
+ "use strict";
+
+ // Chart
+ if ($(".simple-line-chart-3").length) {
+ let ctx = $(".simple-line-chart-3")[0].getContext("2d");
+ let myChart = new Chart(ctx, {
+ type: "line",
+ data: {
+ labels: [
+ "Jan",
+ "Feb",
+ "Mar",
+ "Apr",
+ "May",
+ "Jun",
+ "Jul",
+ "Aug",
+ "Sep",
+ "Oct",
+ "Nov",
+ "Dec",
+ ],
+ datasets: [
+ {
+ label: "# of Votes",
+ data: [
+ 0, 200, 250, 200, 700, 550, 650, 1050, 950, 1100,
+ 900, 1200,
+ ],
+ borderWidth: 2,
+ borderColor: getColor("primary", 0.8),
+ backgroundColor: "transparent",
+ pointBorderColor: "transparent",
+ tension: 0.4,
+ },
+ {
+ label: "# of Votes",
+ data: [
+ 0, 300, 400, 560, 320, 600, 720, 850, 690, 805,
+ 1200, 1010,
+ ],
+ borderWidth: 2,
+ borderDash: [2, 2],
+ borderColor: $("html").hasClass("dark")
+ ? getColor("darkmode.100")
+ : getColor("slate.400"),
+ backgroundColor: "transparent",
+ pointBorderColor: "transparent",
+ tension: 0.4,
+ },
+ ],
+ },
+ options: {
+ maintainAspectRatio: false,
+ plugins: {
+ legend: {
+ display: false,
+ },
+ },
+ scales: {
+ x: {
+ ticks: {
+ display: false,
+ },
+ grid: {
+ display: false,
+ drawBorder: false,
+ },
+ },
+ y: {
+ ticks: {
+ display: false,
+ },
+ grid: {
+ display: false,
+ drawBorder: false,
+ },
+ },
+ },
+ },
+ });
+ }
+})();
diff --git a/resources/js/components/simple-line-chart-4/index.js b/resources/js/components/simple-line-chart-4/index.js
new file mode 100644
index 0000000..a7a627f
--- /dev/null
+++ b/resources/js/components/simple-line-chart-4/index.js
@@ -0,0 +1,84 @@
+(function () {
+ "use strict";
+
+ // Chart
+ if ($(".simple-line-chart-4").length) {
+ let ctx = $(".simple-line-chart-4")[0].getContext("2d");
+ let myChart = new Chart(ctx, {
+ type: "line",
+ data: {
+ labels: [
+ "Jan",
+ "Feb",
+ "Mar",
+ "Apr",
+ "May",
+ "Jun",
+ "Jul",
+ "Aug",
+ "Sep",
+ "Oct",
+ "Nov",
+ "Dec",
+ ],
+ datasets: [
+ {
+ label: "# of Votes",
+ data: [
+ 0, 200, 250, 200, 700, 550, 650, 1050, 950, 1100,
+ 900, 1200,
+ ],
+ borderWidth: 2,
+ borderColor: getColor("primary", 0.8),
+ backgroundColor: "transparent",
+ pointBorderColor: "transparent",
+ tension: 0.4,
+ },
+ {
+ label: "# of Votes",
+ data: [
+ 0, 300, 400, 560, 320, 600, 720, 850, 690, 805,
+ 1200, 1010,
+ ],
+ borderWidth: 2,
+ borderDash: [2, 2],
+ borderColor: $("html").hasClass("dark")
+ ? getColor("darkmode.100")
+ : getColor("slate.400"),
+ backgroundColor: "transparent",
+ pointBorderColor: "transparent",
+ tension: 0.4,
+ },
+ ],
+ },
+ options: {
+ maintainAspectRatio: false,
+ plugins: {
+ legend: {
+ display: false,
+ },
+ },
+ scales: {
+ x: {
+ ticks: {
+ display: false,
+ },
+ grid: {
+ display: false,
+ drawBorder: false,
+ },
+ },
+ y: {
+ ticks: {
+ display: false,
+ },
+ grid: {
+ display: false,
+ drawBorder: false,
+ },
+ },
+ },
+ },
+ });
+ }
+})();
diff --git a/resources/js/components/simple-line-chart/index.js b/resources/js/components/simple-line-chart/index.js
new file mode 100644
index 0000000..61419a1
--- /dev/null
+++ b/resources/js/components/simple-line-chart/index.js
@@ -0,0 +1,71 @@
+(function () {
+ "use strict";
+
+ // Chart
+ if ($(".simple-line-chart").length) {
+ $(".simple-line-chart").each(function () {
+ let ctx = $(this)[0].getContext("2d");
+ let myChart = new Chart(ctx, {
+ type: "line",
+ data: {
+ labels: [
+ "Jan",
+ "Feb",
+ "Mar",
+ "Apr",
+ "May",
+ "Jun",
+ "Jul",
+ "Aug",
+ "Sep",
+ "Oct",
+ "Nov",
+ "Dec",
+ ],
+ datasets: [
+ {
+ label: "# of Votes",
+ data: helper.randomNumbers(0, 5, 12),
+ borderWidth: 2,
+ borderColor:
+ $(this).data("line-color") !== undefined
+ ? $(this).data("line-color")
+ : getColor("primary", 0.8),
+ backgroundColor: "transparent",
+ pointBorderColor: "transparent",
+ tension: 0.4,
+ },
+ ],
+ },
+ options: {
+ maintainAspectRatio: false,
+ plugins: {
+ legend: {
+ display: false,
+ },
+ },
+ scales: {
+ x: {
+ ticks: {
+ display: false,
+ },
+ grid: {
+ display: false,
+ drawBorder: false,
+ },
+ },
+ y: {
+ ticks: {
+ display: false,
+ },
+ grid: {
+ display: false,
+ drawBorder: false,
+ },
+ },
+ },
+ },
+ });
+ });
+ }
+})();
diff --git a/resources/js/components/source/index.js b/resources/js/components/source/index.js
new file mode 100644
index 0000000..18a94ea
--- /dev/null
+++ b/resources/js/components/source/index.js
@@ -0,0 +1,18 @@
+(function () {
+ "use strict";
+
+ // Copy original code
+ $("body").on("click", ".copy-code", function () {
+ const content = $(this).html();
+ const self = this;
+ $(self).html(content.replace("Copy example code", "Copied!"));
+ setTimeout(() => {
+ $(self).html(content);
+ }, 1500);
+
+ const highlight = $(this).closest(".highlight");
+ $(highlight).find("textarea")[0].select();
+ $(highlight).find("textarea")[0].setSelectionRange(0, 99999);
+ document.execCommand("copy");
+ });
+})();
diff --git a/resources/js/components/stacked-bar-chart-1/index.js b/resources/js/components/stacked-bar-chart-1/index.js
new file mode 100644
index 0000000..61fc8f3
--- /dev/null
+++ b/resources/js/components/stacked-bar-chart-1/index.js
@@ -0,0 +1,78 @@
+(function () {
+ "use strict";
+
+ // Chart
+ if ($(".stacked-bar-chart-1").length) {
+ let ctx = $(".stacked-bar-chart-1")[0].getContext("2d");
+ let myChart = new Chart(ctx, {
+ type: "bar",
+ data: {
+ labels: [...Array(16).keys()],
+ datasets: [
+ {
+ label: "Html Template",
+ barPercentage: 0.5,
+ barThickness: 6,
+ maxBarThickness: 8,
+ minBarLength: 2,
+ backgroundColor: getColor("primary", 0.8),
+ data: helper.randomNumbers(-100, 100, 16),
+ },
+ {
+ label: "VueJs Template",
+ barPercentage: 0.5,
+ barThickness: 6,
+ maxBarThickness: 8,
+ minBarLength: 2,
+ backgroundColor: $("html").hasClass("dark")
+ ? getColor("darkmode.200")
+ : getColor("slate.300"),
+ data: helper.randomNumbers(-100, 100, 16),
+ },
+ ],
+ },
+ options: {
+ maintainAspectRatio: false,
+ plugins: {
+ legend: {
+ display: false,
+ },
+ },
+ scales: {
+ x: {
+ stacked: true,
+ ticks: {
+ font: {
+ size: "12",
+ },
+ color: getColor("slate.500", 0.8),
+ },
+ grid: {
+ display: false,
+ drawBorder: false,
+ },
+ },
+ y: {
+ stacked: true,
+ ticks: {
+ font: {
+ size: "12",
+ },
+ color: getColor("slate.500", 0.8),
+ callback: function (value, index, values) {
+ return "$" + value;
+ },
+ },
+ grid: {
+ color: $("html").hasClass("dark")
+ ? getColor("slate.500", 0.3)
+ : getColor("slate.300"),
+ borderDash: [2, 2],
+ drawBorder: false,
+ },
+ },
+ },
+ },
+ });
+ }
+})();
diff --git a/resources/js/components/stacked-bar-chart/index.js b/resources/js/components/stacked-bar-chart/index.js
new file mode 100644
index 0000000..6ed6632
--- /dev/null
+++ b/resources/js/components/stacked-bar-chart/index.js
@@ -0,0 +1,93 @@
+(function () {
+ "use strict";
+
+ // Chart
+ if ($(".stacked-bar-chart").length) {
+ let ctx = $(".stacked-bar-chart")[0].getContext("2d");
+ let myChart = new Chart(ctx, {
+ type: "bar",
+ data: {
+ labels: [
+ "Jan",
+ "Feb",
+ "Mar",
+ "Apr",
+ "May",
+ "Jun",
+ "Jul",
+ "Aug",
+ "Sep",
+ "Oct",
+ "Nov",
+ "Dec",
+ ],
+ datasets: [
+ {
+ label: "Html Template",
+ barPercentage: 0.5,
+ barThickness: 6,
+ maxBarThickness: 8,
+ minBarLength: 2,
+ backgroundColor: getColor("primary"),
+ data: helper.randomNumbers(-100, 100, 12),
+ },
+ {
+ label: "VueJs Template",
+ barPercentage: 0.5,
+ barThickness: 6,
+ maxBarThickness: 8,
+ minBarLength: 2,
+ backgroundColor: $("html").hasClass("dark")
+ ? getColor("darkmode.200")
+ : getColor("slate.300"),
+ data: helper.randomNumbers(-100, 100, 12),
+ },
+ ],
+ },
+ options: {
+ maintainAspectRatio: false,
+ plugins: {
+ legend: {
+ labels: {
+ color: getColor("slate.500", 0.8),
+ },
+ },
+ },
+ scales: {
+ x: {
+ stacked: true,
+ ticks: {
+ font: {
+ size: "12",
+ },
+ color: getColor("slate.500", 0.8),
+ },
+ grid: {
+ display: false,
+ drawBorder: false,
+ },
+ },
+ y: {
+ stacked: true,
+ ticks: {
+ font: {
+ size: "12",
+ },
+ color: getColor("slate.500", 0.8),
+ callback: function (value, index, values) {
+ return "$" + value;
+ },
+ },
+ grid: {
+ color: $("html").hasClass("dark")
+ ? getColor("slate.500", 0.3)
+ : getColor("slate.300"),
+ borderDash: [2, 2],
+ drawBorder: false,
+ },
+ },
+ },
+ },
+ });
+ }
+})();
diff --git a/resources/js/components/tiny-slider/index.js b/resources/js/components/tiny-slider/index.js
new file mode 100644
index 0000000..fc8737c
--- /dev/null
+++ b/resources/js/components/tiny-slider/index.js
@@ -0,0 +1,110 @@
+(function () {
+ "use strict";
+
+ const defaultConfig = {
+ slideBy: "page",
+ mouseDrag: true,
+ autoplay: true,
+ controls: false,
+ nav: false,
+ speed: 500,
+ };
+
+ const singleItemConfig = {
+ slideBy: "page",
+ mouseDrag: true,
+ autoplay: false,
+ controls: true,
+ nav: false,
+ speed: 500,
+ };
+
+ const multipleItemsConfig = {
+ slideBy: "page",
+ mouseDrag: true,
+ autoplay: false,
+ controls: true,
+ items: 1,
+ nav: false,
+ speed: 500,
+ responsive: {
+ 600: {
+ items: 3,
+ },
+ 480: {
+ items: 2,
+ },
+ },
+ };
+
+ const responsiveConfig = {
+ slideBy: "page",
+ mouseDrag: true,
+ autoplay: false,
+ controls: true,
+ items: 1,
+ nav: true,
+ speed: 500,
+ responsive: {
+ 600: {
+ items: 3,
+ },
+ 480: {
+ items: 2,
+ },
+ },
+ };
+
+ const centerModeConfig = {
+ mouseDrag: true,
+ autoplay: false,
+ controls: true,
+ center: true,
+ items: 1,
+ nav: false,
+ speed: 500,
+ responsive: {
+ 600: {
+ items: 2,
+ },
+ },
+ };
+
+ const fadeConfig = {
+ mode: "gallery",
+ slideBy: "page",
+ mouseDrag: true,
+ autoplay: true,
+ controls: true,
+ nav: true,
+ speed: 500,
+ };
+
+ // Tiny Slider
+ if ($(".tiny-slider").length) {
+ $(".tiny-slider").each(function () {
+ const config = $(this).data("config");
+ this.tns = tns({
+ container: this,
+ ...(config === undefined || config === "" ? defaultConfig : {}),
+ ...(config === "single-item" ? singleItemConfig : {}),
+ ...(config === "multiple-items" ? multipleItemsConfig : {}),
+ ...(config === "responsive" ? responsiveConfig : {}),
+ ...(config === "center-mode" ? centerModeConfig : {}),
+ ...(config === "fade" ? fadeConfig : {}),
+ });
+ });
+ }
+
+ if ($(".tiny-slider-navigator").length) {
+ $(".tiny-slider-navigator").each(function () {
+ $(this).on("click", function () {
+ if ($(this).data("target") == "prev") {
+ $("#" + $(this).data("carousel"))[0].tns.goTo("prev");
+ } else {
+ $("#" + $(this).data("carousel"))[0].tns.goTo("next");
+ }
+ });
+ });
+ }
+})();
diff --git a/resources/js/components/tippy-content/index.js b/resources/js/components/tippy-content/index.js
new file mode 100644
index 0000000..48978ea
--- /dev/null
+++ b/resources/js/components/tippy-content/index.js
@@ -0,0 +1,56 @@
+(function () {
+ "use strict";
+
+ // Tooltips
+ $(".tippy-content").each(function () {
+ let options = {};
+
+ if ($(this).data("trigger") !== undefined) {
+ options.trigger = $(this).data("trigger");
+ }
+
+ if ($(this).data("placement") !== undefined) {
+ options.placement = $(this).data("placement");
+ }
+
+ if ($(this).data("theme") !== undefined) {
+ options.theme = $(this).data("theme");
+ }
+
+ const initTippyContent = () => {
+ if (
+ !$(this).find("canvas").hasClass("chart") ||
+ ($(this).find("canvas").hasClass("chart") &&
+ $(this).find("canvas").attr("style") !== undefined)
+ ) {
+ tippy(`[data-tooltip="${$(this).attr("id")}"]`, {
+ plugins: [animateFillPlugin],
+ content: $(this)[0],
+ allowHTML: true,
+ arrow: roundArrow,
+ popperOptions: {
+ modifiers: [
+ {
+ name: "preventOverflow",
+ options: {
+ rootBoundary: "viewport",
+ },
+ },
+ ],
+ },
+ animateFill: false,
+ animation: "shift-away",
+ theme: "light",
+ trigger: "click",
+ ...options,
+ });
+ } else {
+ setTimeout(() => {
+ initTippyContent();
+ }, 500);
+ }
+ };
+
+ initTippyContent();
+ });
+})();
diff --git a/resources/js/components/tippy/index.js b/resources/js/components/tippy/index.js
new file mode 100644
index 0000000..73e31da
--- /dev/null
+++ b/resources/js/components/tippy/index.js
@@ -0,0 +1,34 @@
+(function () {
+ "use strict";
+
+ // Tooltips
+ $(".tooltip").each(function () {
+ let options = {
+ content: $(this).attr("title"),
+ };
+
+ if ($(this).data("trigger") !== undefined) {
+ options.trigger = $(this).data("trigger");
+ }
+
+ if ($(this).data("placement") !== undefined) {
+ options.placement = $(this).data("placement");
+ }
+
+ if ($(this).data("theme") !== undefined) {
+ options.theme = $(this).data("theme");
+ }
+
+ if ($(this).data("tooltip-content") !== undefined) {
+ options.content = $($(this).data("tooltip-content"))[0];
+ }
+
+ $(this).removeAttr("title");
+
+ tippy(this, {
+ arrow: roundArrow,
+ animation: "shift-away",
+ ...options,
+ });
+ });
+})();
diff --git a/resources/js/components/tom-select/index.js b/resources/js/components/tom-select/index.js
new file mode 100644
index 0000000..b8363e8
--- /dev/null
+++ b/resources/js/components/tom-select/index.js
@@ -0,0 +1,55 @@
+(function () {
+ "use strict";
+
+ // Tom Select
+ $(".tom-select").each(function () {
+ let options = {
+ plugins: {
+ dropdown_input: {},
+ },
+ };
+
+ if ($(this).data("placeholder")) {
+ options.placeholder = $(this).data("placeholder");
+ }
+
+ if ($(this).attr("multiple") !== undefined) {
+ options = {
+ ...options,
+ plugins: {
+ ...options.plugins,
+ remove_button: {
+ title: "Remove this item",
+ },
+ },
+ persist: false,
+ create: true,
+ onDelete: function (values) {
+ return confirm(
+ values.length > 1
+ ? "Are you sure you want to remove these " +
+ values.length +
+ " items?"
+ : 'Are you sure you want to remove "' +
+ values[0] +
+ '"?'
+ );
+ },
+ };
+ }
+
+ if ($(this).data("header")) {
+ options = {
+ ...options,
+ plugins: {
+ ...options.plugins,
+ dropdown_header: {
+ title: $(this).data("header"),
+ },
+ },
+ };
+ }
+
+ new TomSelect(this, options);
+ });
+})();
diff --git a/resources/js/components/top-bar/index.js b/resources/js/components/top-bar/index.js
new file mode 100644
index 0000000..6315a3a
--- /dev/null
+++ b/resources/js/components/top-bar/index.js
@@ -0,0 +1,15 @@
+(function () {
+ "use strict";
+
+ $(".search")
+ .find("input")
+ .each(function () {
+ $(this).on("focus", function () {
+ $(".search-result").addClass("show");
+ });
+
+ $(this).on("focusout", function () {
+ $(".search-result").removeClass("show");
+ });
+ });
+})();
diff --git a/resources/js/components/vertical-bar-chart/index.js b/resources/js/components/vertical-bar-chart/index.js
new file mode 100644
index 0000000..203a34d
--- /dev/null
+++ b/resources/js/components/vertical-bar-chart/index.js
@@ -0,0 +1,87 @@
+(function () {
+ "use strict";
+
+ // Chart
+ if ($(".vertical-bar-chart").length) {
+ let ctx = $(".vertical-bar-chart")[0].getContext("2d");
+ let myChart = new Chart(ctx, {
+ type: "bar",
+ data: {
+ labels: [
+ "Jan",
+ "Feb",
+ "Mar",
+ "Apr",
+ "May",
+ "Jun",
+ "Jul",
+ "Aug",
+ ],
+ datasets: [
+ {
+ label: "Html Template",
+ barPercentage: 0.5,
+ barThickness: 6,
+ maxBarThickness: 8,
+ minBarLength: 2,
+ data: [0, 200, 250, 200, 500, 450, 850, 1050],
+ backgroundColor: getColor("primary"),
+ },
+ {
+ label: "VueJs Template",
+ barPercentage: 0.5,
+ barThickness: 6,
+ maxBarThickness: 8,
+ minBarLength: 2,
+ data: [0, 300, 400, 560, 320, 600, 720, 850],
+ backgroundColor: $("html").hasClass("dark")
+ ? getColor("darkmode.200")
+ : getColor("slate.300"),
+ },
+ ],
+ },
+ options: {
+ maintainAspectRatio: false,
+ plugins: {
+ legend: {
+ labels: {
+ color: getColor("slate.500", 0.8),
+ },
+ },
+ },
+ scales: {
+ x: {
+ ticks: {
+ font: {
+ size: 12,
+ },
+ color: getColor("slate.500", 0.8),
+ },
+ grid: {
+ display: false,
+ drawBorder: false,
+ },
+ },
+ y: {
+ ticks: {
+ font: {
+ size: "12",
+ },
+ color: getColor("slate.500", 0.8),
+ callback: function (value, index, values) {
+ return "$" + value;
+ },
+ },
+ grid: {
+ color: $("html").hasClass("dark")
+ ? getColor("slate.500", 0.3)
+ : getColor("slate.300"),
+ borderDash: [2, 2],
+ drawBorder: false,
+ },
+ },
+ },
+ },
+ });
+ }
+})();
diff --git a/resources/js/helper.js b/resources/js/helper.js
new file mode 100644
index 0000000..4647b33
--- /dev/null
+++ b/resources/js/helper.js
@@ -0,0 +1,127 @@
+import dayjs from "dayjs";
+import { parseColor } from "tailwindcss/lib/util/color";
+
+const helpers = {
+ cutText(text, length) {
+ if (text.split(" ").length > 1) {
+ let string = text.substring(0, length);
+ let splitText = string.split(" ");
+ splitText.pop();
+ return splitText.join(" ") + "...";
+ } else {
+ return text;
+ }
+ },
+ formatDate(date, format) {
+ return dayjs(date).format(format);
+ },
+ capitalizeFirstLetter(string) {
+ if (string) {
+ return string.charAt(0).toUpperCase() + string.slice(1);
+ }
+ },
+ onlyNumber(number) {
+ if (number) {
+ return number.replace(/\D/g, "");
+ } else {
+ return "";
+ }
+ },
+ formatCurrency(number) {
+ if (number) {
+ let formattedNumber = number.toString().replace(/\D/g, "");
+ let rest = formattedNumber.length % 3;
+ let currency = formattedNumber.substr(0, rest);
+ let thousand = formattedNumber.substr(rest).match(/\d{3}/g);
+ let separator;
+
+ if (thousand) {
+ separator = rest ? "." : "";
+ currency += separator + thousand.join(".");
+ }
+
+ return currency;
+ } else {
+ return "";
+ }
+ },
+ timeAgo(time) {
+ let date = new Date(
+ (time || "").replace(/-/g, "/").replace(/[TZ]/g, " ")
+ ),
+ diff = (new Date().getTime() - date.getTime()) / 1000,
+ dayDiff = Math.floor(diff / 86400);
+
+ if (isNaN(dayDiff) || dayDiff < 0 || dayDiff >= 31)
+ return dayjs(time).format("MMMM DD, YYYY");
+
+ return (
+ (dayDiff == 0 &&
+ ((diff < 60 && "just now") ||
+ (diff < 120 && "1 minute ago") ||
+ (diff < 3600 && Math.floor(diff / 60) + " minutes ago") ||
+ (diff < 7200 && "1 hour ago") ||
+ (diff < 86400 &&
+ Math.floor(diff / 3600) + " hours ago"))) ||
+ (dayDiff == 1 && "Yesterday") ||
+ (dayDiff < 7 && dayDiff + " days ago") ||
+ (dayDiff < 31 && Math.ceil(dayDiff / 7) + " weeks ago")
+ );
+ },
+ diffTimeByNow(time) {
+ let startDate = dayjs(dayjs().format("YYYY-MM-DD HH:mm:ss").toString());
+ let endDate = dayjs(
+ dayjs(time).format("YYYY-MM-DD HH:mm:ss").toString()
+ );
+
+ let duration = dayjs.duration(endDate.diff(startDate));
+ let milliseconds = Math.floor(duration.asMilliseconds());
+
+ let days = Math.round(milliseconds / 86400000);
+ let hours = Math.round((milliseconds % 86400000) / 3600000);
+ let minutes = Math.round(((milliseconds % 86400000) % 3600000) / 60000);
+ let seconds = Math.round(
+ (((milliseconds % 86400000) % 3600000) % 60000) / 1000
+ );
+
+ if (seconds < 30 && seconds >= 0) {
+ minutes += 1;
+ }
+
+ return {
+ days: days.toString().length < 2 ? "0" + days : days,
+ hours: hours.toString().length < 2 ? "0" + hours : hours,
+ minutes: minutes.toString().length < 2 ? "0" + minutes : minutes,
+ seconds: seconds.toString().length < 2 ? "0" + seconds : seconds,
+ };
+ },
+ isset(obj) {
+ return Object.keys(obj).length;
+ },
+ assign(obj) {
+ return JSON.parse(JSON.stringify(obj));
+ },
+ delay(time) {
+ return new Promise((resolve, reject) => {
+ setTimeout(() => {
+ resolve();
+ }, time);
+ });
+ },
+ randomNumbers(from, to, length) {
+ let numbers = [0];
+ for (let i = 1; i < length; i++) {
+ numbers.push(Math.ceil(Math.random() * (from - to) + to));
+ }
+
+ return numbers;
+ },
+ replaceAll(str, find, replace) {
+ return str.replace(new RegExp(find, "g"), replace);
+ },
+ toRGB(value) {
+ return parseColor(value).color.join(" ");
+ },
+};
+
+export default helpers;
diff --git a/resources/js/layouts/side-menu/index.js b/resources/js/layouts/side-menu/index.js
new file mode 100644
index 0000000..337bc9b
--- /dev/null
+++ b/resources/js/layouts/side-menu/index.js
@@ -0,0 +1,68 @@
+(function () {
+ "use strict";
+
+ // Side Menu Dropdown
+ $(".side-menu").on("click", function () {
+ if ($(this).parent().find("ul").length) {
+ if ($(this).parent().find("ul").first()[0].offsetParent !== null) {
+ $(this)
+ .find(".side-menu__sub-icon")
+ .removeClass("transform rotate-180");
+ $(this).removeClass("side-menu--open");
+ $(this)
+ .parent()
+ .find("ul")
+ .first()
+ .slideUp(300, function () {
+ $(this).removeClass("side-menu__sub-open");
+ });
+ } else {
+ $(this)
+ .find(".side-menu__sub-icon")
+ .addClass("transform rotate-180");
+ $(this).addClass("side-menu--open");
+ $(this)
+ .parent()
+ .find("ul")
+ .first()
+ .slideDown(300, function () {
+ $(this).addClass("side-menu__sub-open");
+ });
+ }
+ }
+ });
+
+ // Side Menu Tooltips
+ const initTooltips = (function tooltips() {
+ $(".side-menu").each(function () {
+ if (this._tippy == undefined) {
+ const content = $(this)
+ .find(".side-menu__title")
+ .html()
+ .replace(/<[^>]*>?/gm, "")
+ .trim();
+ tippy(this, {
+ content: content,
+ arrow: roundArrow,
+ animation: "shift-away",
+ placement: "right",
+ });
+ }
+
+ if (
+ $(window).width() <= 1260 ||
+ $(this).closest(".side-nav").hasClass("side-nav--simple")
+ ) {
+ this._tippy.enable();
+ } else {
+ this._tippy.disable();
+ }
+ });
+
+ return tooltips;
+ })();
+
+ window.addEventListener("resize", () => {
+ initTooltips();
+ });
+})();
diff --git a/resources/js/pages/calendar/index.js b/resources/js/pages/calendar/index.js
new file mode 100644
index 0000000..8ced7c2
--- /dev/null
+++ b/resources/js/pages/calendar/index.js
@@ -0,0 +1,81 @@
+// (function () {
+// "use strict";
+
+// if ($("#calendar").length) {
+// if ($("#calendar-events").length) {
+// new Draggable($("#calendar-events")[0], {
+// itemSelector: ".event",
+// eventData: function (eventEl) {
+// return {
+// title: $(eventEl).find(".event__title").html(),
+// duration: {
+// days: parseInt(
+// $(eventEl).find(".event__days").text()
+// ),
+// },
+// };
+// },
+// });
+// }
+
+// let calendar = new Calendar($("#calendar")[0], {
+// plugins: [
+// interactionPlugin,
+// dayGridPlugin,
+// timeGridPlugin,
+// listPlugin,
+// ],
+// droppable: true,
+// headerToolbar: {
+// left: "prev,next today",
+// center: "title",
+// right: "dayGridMonth,timeGridWeek,timeGridDay,listWeek",
+// },
+// initialDate: "2021-01-12",
+// navLinks: true,
+// editable: true,
+// dayMaxEvents: true,
+// events: [
+// {
+// title: "Vue Vixens Day",
+// start: "2021-01-05",
+// end: "2021-01-08",
+// },
+// {
+// title: "VueConfUS",
+// start: "2021-01-11",
+// end: "2021-01-15",
+// },
+// {
+// title: "VueJS Amsterdam",
+// start: "2021-01-17",
+// end: "2021-01-21",
+// },
+// {
+// title: "Vue Fes Japan 2019",
+// start: "2021-01-21",
+// end: "2021-01-24",
+// },
+// {
+// title: "Laracon 2021",
+// start: "2021-01-24",
+// end: "2021-01-27",
+// },
+// ],
+// drop: function (info) {
+// if (
+// $("#checkbox-events").length &&
+// $("#checkbox-events")[0].checked
+// ) {
+// $(info.draggedEl).parent().remove();
+
+// if ($("#calendar-events").children().length == 1) {
+// $("#calendar-no-events").removeClass("hidden");
+// }
+// }
+// },
+// });
+
+// calendar.render();
+// }
+// })();
diff --git a/resources/js/pages/chat/index.js b/resources/js/pages/chat/index.js
new file mode 100644
index 0000000..3cec112
--- /dev/null
+++ b/resources/js/pages/chat/index.js
@@ -0,0 +1,19 @@
+(function () {
+ "use strict";
+
+ $(".chat-list")
+ .children()
+ .each(function () {
+ $(this).on("click", function () {
+ $(".chat-box")
+ .children("div:nth-child(2)")
+ .fadeOut(300, function () {
+ $(".chat-box")
+ .children("div:nth-child(1)")
+ .fadeIn(300, function (el) {
+ $(el).removeClass("hidden").removeAttr("style");
+ });
+ });
+ });
+ });
+})();
diff --git a/resources/js/pages/login/index.js b/resources/js/pages/login/index.js
new file mode 100644
index 0000000..841535d
--- /dev/null
+++ b/resources/js/pages/login/index.js
@@ -0,0 +1,53 @@
+(function () {
+ "use strict";
+
+ async function login() {
+ // Reset state
+ $("#login-form").find(".login__input").removeClass("border-danger");
+ $("#login-form").find(".login__input-error").html("");
+
+ // Post form
+ let email = $("#email").val();
+ let password = $("#password").val();
+
+ // Loading state
+ $("#btn-login").html(
+ ''
+ );
+ tailwind.svgLoader();
+ await helper.delay(1500);
+
+ axios
+ .post(`login`, {
+ email: email,
+ password: password,
+ })
+ .then((res) => {
+ location.href = "/";
+ })
+ .catch((err) => {
+ $("#btn-login").html("Login");
+ if (err.response.data.message != "Wrong email or password.") {
+ for (const [key, val] of Object.entries(
+ err.response.data.errors
+ )) {
+ $(`#${key}`).addClass("border-danger");
+ $(`#error-${key}`).html(val);
+ }
+ } else {
+ $(`#password`).addClass("border-danger");
+ $(`#error-password`).html(err.response.data.message);
+ }
+ });
+ }
+
+ $("#login-form").on("keyup", function (e) {
+ if (e.keyCode === 13) {
+ login();
+ }
+ });
+
+ $("#btn-login").on("click", function () {
+ login();
+ });
+})();
diff --git a/resources/js/pages/modal/index.js b/resources/js/pages/modal/index.js
new file mode 100644
index 0000000..fa6e753
--- /dev/null
+++ b/resources/js/pages/modal/index.js
@@ -0,0 +1,24 @@
+(function () {
+ "use strict";
+
+ // Show modal
+ $("#programmatically-show-modal").on("click", function () {
+ const el = document.querySelector("#programmatically-modal");
+ const modal = tailwind.Modal.getOrCreateInstance(el);
+ modal.show();
+ });
+
+ // Hide modal
+ $("#programmatically-hide-modal").on("click", function () {
+ const el = document.querySelector("#programmatically-modal");
+ const modal = tailwind.Modal.getOrCreateInstance(el);
+ modal.hide();
+ });
+
+ // Toggle modal
+ $("#programmatically-toggle-modal").on("click", function () {
+ const el = document.querySelector("#programmatically-modal");
+ const modal = tailwind.Modal.getOrCreateInstance(el);
+ modal.toggle();
+ });
+})();
diff --git a/resources/js/pages/notification/index.js b/resources/js/pages/notification/index.js
new file mode 100644
index 0000000..77d9572
--- /dev/null
+++ b/resources/js/pages/notification/index.js
@@ -0,0 +1,125 @@
+(function () {
+ "use strict";
+
+ // Basic non sticky notification
+ $("#basic-non-sticky-notification-toggle").on("click", function () {
+ Toastify({
+ node: $("#basic-non-sticky-notification-content")
+ .clone()
+ .removeClass("hidden")[0],
+ duration: 3000,
+ newWindow: true,
+ close: true,
+ gravity: "top",
+ position: "right",
+ stopOnFocus: true,
+ }).showToast();
+ });
+
+ // Basic sticky notification
+ $("#basic-sticky-notification-toggle").on("click", function () {
+ Toastify({
+ node: $("#basic-non-sticky-notification-content")
+ .clone()
+ .removeClass("hidden")[0],
+ duration: -1,
+ newWindow: true,
+ close: true,
+ gravity: "top",
+ position: "right",
+ stopOnFocus: true,
+ }).showToast();
+ });
+
+ // Success notification
+ $("#success-notification-toggle").on("click", function () {
+ Toastify({
+ node: $("#success-notification-content")
+ .clone()
+ .removeClass("hidden")[0],
+ duration: -1,
+ newWindow: true,
+ close: true,
+ gravity: "top",
+ position: "right",
+ stopOnFocus: true,
+ }).showToast();
+ });
+
+ // Notification with actions
+ $("#notification-with-actions-toggle").on("click", function () {
+ Toastify({
+ node: $("#notification-with-actions-content")
+ .clone()
+ .removeClass("hidden")[0],
+ duration: -1,
+ newWindow: true,
+ close: true,
+ gravity: "top",
+ position: "right",
+ stopOnFocus: true,
+ }).showToast();
+ });
+
+ // Notification with avatar
+ $("#notification-with-avatar-toggle").on("click", function () {
+ // Init toastify
+ let avatarNotification = Toastify({
+ node: $("#notification-with-avatar-content")
+ .clone()
+ .removeClass("hidden")[0],
+ duration: -1,
+ newWindow: true,
+ close: false,
+ gravity: "top",
+ position: "right",
+ stopOnFocus: true,
+ }).showToast();
+
+ // Close notification event
+ $(avatarNotification.toastElement)
+ .find('[data-dismiss="notification"]')
+ .on("click", function () {
+ avatarNotification.hideToast();
+ });
+ });
+
+ // Notification with split buttons
+ $("#notification-with-split-buttons-toggle").on("click", function () {
+ // Init toastify
+ let splitButtonsNotification = Toastify({
+ node: $("#notification-with-split-buttons-content")
+ .clone()
+ .removeClass("hidden")[0],
+ duration: -1,
+ newWindow: true,
+ close: false,
+ gravity: "top",
+ position: "right",
+ stopOnFocus: true,
+ }).showToast();
+
+ // Close notification event
+ $(splitButtonsNotification.toastElement)
+ .find('[data-dismiss="notification"]')
+ .on("click", function () {
+ splitButtonsNotification.hideToast();
+ });
+ });
+
+ // Notification with buttons below
+ $("#notification-with-buttons-below-toggle").on("click", function () {
+ // Init toastify
+ Toastify({
+ node: $("#notification-with-buttons-below-content")
+ .clone()
+ .removeClass("hidden")[0],
+ duration: -1,
+ newWindow: true,
+ close: true,
+ gravity: "top",
+ position: "right",
+ stopOnFocus: true,
+ }).showToast();
+ });
+})();
diff --git a/resources/js/pages/slideover/index.js b/resources/js/pages/slideover/index.js
new file mode 100644
index 0000000..9e0f02e
--- /dev/null
+++ b/resources/js/pages/slideover/index.js
@@ -0,0 +1,24 @@
+(function () {
+ "use strict";
+
+ // Show slide over
+ $("#programmatically-show-slideover").on("click", function () {
+ const el = document.querySelector("#programmatically-slideover");
+ const slideOver = tailwind.Modal.getOrCreateInstance(el);
+ slideOver.show();
+ });
+
+ // Hide slide over
+ $("#programmatically-hide-slideover").on("click", function () {
+ const el = document.querySelector("#programmatically-slideover");
+ const slideOver = tailwind.Modal.getOrCreateInstance(el);
+ slideOver.hide();
+ });
+
+ // Toggle slide over
+ $("#programmatically-toggle-slideover").on("click", function () {
+ const el = document.querySelector("#programmatically-slideover");
+ const slideOver = tailwind.Modal.getOrCreateInstance(el);
+ slideOver.toggle();
+ });
+})();
diff --git a/resources/js/pages/tabulator/index.js b/resources/js/pages/tabulator/index.js
new file mode 100644
index 0000000..c1c2db3
--- /dev/null
+++ b/resources/js/pages/tabulator/index.js
@@ -0,0 +1,300 @@
+(function () {
+ "use strict";
+
+ const imageAssets = import.meta.glob(
+ "/resources/images/fakers/*.{jpg,jpeg,png,svg}",
+ { eager: true }
+ );
+
+ // Tabulator
+ if ($("#tabulator").length) {
+ // Setup Tabulator
+ const tabulator = new Tabulator("#tabulator", {
+ ajaxURL: "https://dummy-data.left4code.com",
+ paginationMode: "remote",
+ filterMode: "remote",
+ sortMode: "remote",
+ printAsHtml: true,
+ printStyled: true,
+ pagination: true,
+ paginationSize: 10,
+ paginationSizeSelector: [10, 20, 30, 40],
+ layout: "fitColumns",
+ responsiveLayout: "collapse",
+ placeholder: "No matching records found",
+ columns: [
+ {
+ title: "",
+ formatter: "responsiveCollapse",
+ width: 40,
+ minWidth: 30,
+ hozAlign: "center",
+ resizable: false,
+ headerSort: false,
+ },
+
+ // For HTML table
+ {
+ title: "PRODUCT NAME",
+ minWidth: 200,
+ responsive: 0,
+ field: "name",
+ vertAlign: "middle",
+ print: false,
+ download: false,
+ formatter(cell) {
+ const response = cell.getData();
+ return `
+
${response.name}
+
${response.category}
+
`;
+ },
+ },
+ {
+ title: "IMAGES",
+ minWidth: 200,
+ field: "images",
+ hozAlign: "center",
+ headerHozAlign: "center",
+ vertAlign: "middle",
+ print: false,
+ download: false,
+ formatter(cell) {
+ return ``;
+ },
+ },
+ {
+ title: "REMAINING STOCK",
+ minWidth: 200,
+ field: "remaining_stock",
+ hozAlign: "center",
+ headerHozAlign: "center",
+ vertAlign: "middle",
+ print: false,
+ download: false,
+ },
+ {
+ title: "STATUS",
+ minWidth: 200,
+ field: "status",
+ hozAlign: "center",
+ headerHozAlign: "center",
+ vertAlign: "middle",
+ print: false,
+ download: false,
+ formatter(cell) {
+ const response = cell.getData();
+ return `
+ ${
+ response.status ? "Active" : "Inactive"
+ }
+
`;
+ },
+ },
+ {
+ title: "ACTIONS",
+ minWidth: 200,
+ field: "actions",
+ responsive: 1,
+ hozAlign: "center",
+ headerHozAlign: "center",
+ vertAlign: "middle",
+ print: false,
+ download: false,
+ formatter() {
+ let a =
+ $(``);
+ $(a)
+ .find(".edit")
+ .on("click", function () {
+ alert("EDIT");
+ });
+
+ $(a)
+ .find(".delete")
+ .on("click", function () {
+ alert("DELETE");
+ });
+ return a[0];
+ },
+ },
+
+ // For print format
+ {
+ title: "PRODUCT NAME",
+ field: "name",
+ visible: false,
+ print: true,
+ download: true,
+ },
+ {
+ title: "CATEGORY",
+ field: "category",
+ visible: false,
+ print: true,
+ download: true,
+ },
+ {
+ title: "REMAINING STOCK",
+ field: "remaining_stock",
+ visible: false,
+ print: true,
+ download: true,
+ },
+ {
+ title: "STATUS",
+ field: "status",
+ visible: false,
+ print: true,
+ download: true,
+ formatterPrint(cell) {
+ return cell.getValue() ? "Active" : "Inactive";
+ },
+ },
+ {
+ title: "IMAGE 1",
+ field: "images",
+ visible: false,
+ print: true,
+ download: true,
+ formatterPrint(cell) {
+ return cell.getValue()[0];
+ },
+ },
+ {
+ title: "IMAGE 2",
+ field: "images",
+ visible: false,
+ print: true,
+ download: true,
+ formatterPrint(cell) {
+ return cell.getValue()[1];
+ },
+ },
+ {
+ title: "IMAGE 3",
+ field: "images",
+ visible: false,
+ print: true,
+ download: true,
+ formatterPrint(cell) {
+ return cell.getValue()[2];
+ },
+ },
+ ],
+ });
+
+ tabulator.on("renderComplete", () => {
+ createIcons({
+ icons,
+ attrs: {
+ "stroke-width": 1.5,
+ },
+ nameAttr: "data-lucide",
+ });
+ });
+
+ // Redraw table onresize
+ window.addEventListener("resize", () => {
+ tabulator.redraw();
+ createIcons({
+ icons,
+ "stroke-width": 1.5,
+ nameAttr: "data-lucide",
+ });
+ });
+
+ // Filter function
+ function filterHTMLForm() {
+ let field = $("#tabulator-html-filter-field").val();
+ let type = $("#tabulator-html-filter-type").val();
+ let value = $("#tabulator-html-filter-value").val();
+ tabulator.setFilter(field, type, value);
+ }
+
+ // On submit filter form
+ $("#tabulator-html-filter-form")[0].addEventListener(
+ "keypress",
+ function (event) {
+ let keycode = event.keyCode ? event.keyCode : event.which;
+ if (keycode == "13") {
+ event.preventDefault();
+ filterHTMLForm();
+ }
+ }
+ );
+
+ // On click go button
+ $("#tabulator-html-filter-go").on("click", function (event) {
+ filterHTMLForm();
+ });
+
+ // On reset filter form
+ $("#tabulator-html-filter-reset").on("click", function (event) {
+ $("#tabulator-html-filter-field").val("name");
+ $("#tabulator-html-filter-type").val("like");
+ $("#tabulator-html-filter-value").val("");
+ filterHTMLForm();
+ });
+
+ // Export
+ $("#tabulator-export-csv").on("click", function (event) {
+ tabulator.download("csv", "data.csv");
+ });
+
+ $("#tabulator-export-json").on("click", function (event) {
+ tabulator.download("json", "data.json");
+ });
+
+ $("#tabulator-export-xlsx").on("click", function (event) {
+ tabulator.download("xlsx", "data.xlsx", {
+ sheetName: "Products",
+ });
+ });
+
+ $("#tabulator-export-html").on("click", function (event) {
+ tabulator.download("html", "data.html", {
+ style: true,
+ });
+ });
+
+ // Print
+ $("#tabulator-print").on("click", function (event) {
+ tabulator.print();
+ });
+ }
+})();
diff --git a/resources/js/pages/validation/index.js b/resources/js/pages/validation/index.js
new file mode 100644
index 0000000..29698c1
--- /dev/null
+++ b/resources/js/pages/validation/index.js
@@ -0,0 +1,63 @@
+(function () {
+ "use strict";
+
+ function onSubmit(pristine) {
+ let valid = pristine.validate();
+
+ if (valid) {
+ Toastify({
+ node: $("#success-notification-content")
+ .clone()
+ .removeClass("hidden")[0],
+ duration: 3000,
+ newWindow: true,
+ close: true,
+ gravity: "top",
+ position: "right",
+ stopOnFocus: true,
+ }).showToast();
+ } else {
+ Toastify({
+ node: $("#failed-notification-content")
+ .clone()
+ .removeClass("hidden")[0],
+ duration: 3000,
+ newWindow: true,
+ close: true,
+ gravity: "top",
+ position: "right",
+ stopOnFocus: true,
+ }).showToast();
+ }
+ }
+
+ $(".validate-form").each(function () {
+ let pristine = new Pristine(this, {
+ classTo: "input-form",
+ errorClass: "has-error",
+ errorTextParent: "input-form",
+ errorTextClass: "text-danger mt-2",
+ });
+
+ pristine.addValidator(
+ $(this).find('input[type="url"]')[0],
+ function (value) {
+ let expression =
+ /[-a-zA-Z0-9@:%._\+~#=]{1,256}\.[a-zA-Z0-9()]{1,6}\b([-a-zA-Z0-9()@:%_\+.~#?&//=]*)?/gi;
+ let regex = new RegExp(expression);
+ if (!value.length || (value.length && value.match(regex))) {
+ return true;
+ }
+ return false;
+ },
+ "This field is URL format only",
+ 2,
+ false
+ );
+
+ $(this).on("submit", function (e) {
+ e.preventDefault();
+ onSubmit(pristine);
+ });
+ });
+})();
diff --git a/resources/js/vendor/accordion/index.js b/resources/js/vendor/accordion/index.js
new file mode 100644
index 0000000..06ad031
--- /dev/null
+++ b/resources/js/vendor/accordion/index.js
@@ -0,0 +1 @@
+import "@left4code/tw-starter/dist/js/accordion";
diff --git a/resources/js/vendor/alert/index.js b/resources/js/vendor/alert/index.js
new file mode 100644
index 0000000..aa5f9d0
--- /dev/null
+++ b/resources/js/vendor/alert/index.js
@@ -0,0 +1 @@
+import "@left4code/tw-starter/dist/js/alert";
diff --git a/resources/js/vendor/calendar/index.js b/resources/js/vendor/calendar/index.js
new file mode 100644
index 0000000..83301bc
--- /dev/null
+++ b/resources/js/vendor/calendar/index.js
@@ -0,0 +1,2 @@
+import { Calendar } from "@fullcalendar/core";
+window.Calendar = Calendar;
diff --git a/resources/js/vendor/calendar/plugins/day-grid.js b/resources/js/vendor/calendar/plugins/day-grid.js
new file mode 100644
index 0000000..f343814
--- /dev/null
+++ b/resources/js/vendor/calendar/plugins/day-grid.js
@@ -0,0 +1,2 @@
+import dayGridPlugin from "@fullcalendar/daygrid";
+window.dayGridPlugin = dayGridPlugin;
diff --git a/resources/js/vendor/calendar/plugins/interaction.js b/resources/js/vendor/calendar/plugins/interaction.js
new file mode 100644
index 0000000..eadb97c
--- /dev/null
+++ b/resources/js/vendor/calendar/plugins/interaction.js
@@ -0,0 +1,3 @@
+import interactionPlugin, { Draggable } from "@fullcalendar/interaction";
+window.interactionPlugin = interactionPlugin;
+window.Draggable = Draggable;
diff --git a/resources/js/vendor/calendar/plugins/list.js b/resources/js/vendor/calendar/plugins/list.js
new file mode 100644
index 0000000..392719d
--- /dev/null
+++ b/resources/js/vendor/calendar/plugins/list.js
@@ -0,0 +1,2 @@
+import listPlugin from "@fullcalendar/list";
+window.listPlugin = listPlugin;
diff --git a/resources/js/vendor/calendar/plugins/time-grid.js b/resources/js/vendor/calendar/plugins/time-grid.js
new file mode 100644
index 0000000..7b67875
--- /dev/null
+++ b/resources/js/vendor/calendar/plugins/time-grid.js
@@ -0,0 +1,2 @@
+import timeGridPlugin from "@fullcalendar/timegrid";
+window.timeGridPlugin = timeGridPlugin;
diff --git a/resources/js/vendor/chartjs/index.js b/resources/js/vendor/chartjs/index.js
new file mode 100644
index 0000000..2118ada
--- /dev/null
+++ b/resources/js/vendor/chartjs/index.js
@@ -0,0 +1,2 @@
+import Chart from "chart.js/auto";
+window.Chart = Chart;
diff --git a/resources/js/vendor/ckeditor/balloon-block/index.js b/resources/js/vendor/ckeditor/balloon-block/index.js
new file mode 100644
index 0000000..a7e5033
--- /dev/null
+++ b/resources/js/vendor/ckeditor/balloon-block/index.js
@@ -0,0 +1,2 @@
+import BalloonBlockEditor from "@ckeditor/ckeditor5-build-balloon-block";
+window.BalloonBlockEditor = BalloonBlockEditor;
diff --git a/resources/js/vendor/ckeditor/balloon/index.js b/resources/js/vendor/ckeditor/balloon/index.js
new file mode 100644
index 0000000..646162f
--- /dev/null
+++ b/resources/js/vendor/ckeditor/balloon/index.js
@@ -0,0 +1,2 @@
+import BalloonEditor from "@ckeditor/ckeditor5-build-balloon";
+window.BalloonEditor = BalloonEditor;
diff --git a/resources/js/vendor/ckeditor/classic/index.js b/resources/js/vendor/ckeditor/classic/index.js
new file mode 100644
index 0000000..3818a1c
--- /dev/null
+++ b/resources/js/vendor/ckeditor/classic/index.js
@@ -0,0 +1,2 @@
+import ClassicEditor from "@ckeditor/ckeditor5-build-classic";
+window.ClassicEditor = ClassicEditor;
diff --git a/resources/js/vendor/ckeditor/document/index.js b/resources/js/vendor/ckeditor/document/index.js
new file mode 100644
index 0000000..b0fa60b
--- /dev/null
+++ b/resources/js/vendor/ckeditor/document/index.js
@@ -0,0 +1,2 @@
+import DocumentEditor from "@ckeditor/ckeditor5-build-decoupled-document";
+window.DocumentEditor = DocumentEditor;
diff --git a/resources/js/vendor/ckeditor/inline/index.js b/resources/js/vendor/ckeditor/inline/index.js
new file mode 100644
index 0000000..4dceaab
--- /dev/null
+++ b/resources/js/vendor/ckeditor/inline/index.js
@@ -0,0 +1,2 @@
+import InlineEditor from "@ckeditor/ckeditor5-build-inline";
+window.InlineEditor = InlineEditor;
diff --git a/resources/js/vendor/dom/index.js b/resources/js/vendor/dom/index.js
new file mode 100644
index 0000000..3a9d8b7
--- /dev/null
+++ b/resources/js/vendor/dom/index.js
@@ -0,0 +1,2 @@
+import dom from "@left4code/tw-starter/dist/js/dom";
+window.$ = dom;
diff --git a/resources/js/vendor/dropdown/index.js b/resources/js/vendor/dropdown/index.js
new file mode 100644
index 0000000..af7eb27
--- /dev/null
+++ b/resources/js/vendor/dropdown/index.js
@@ -0,0 +1 @@
+import "@left4code/tw-starter/dist/js/dropdown";
diff --git a/resources/js/vendor/dropzone/index.js b/resources/js/vendor/dropzone/index.js
new file mode 100644
index 0000000..f48a65a
--- /dev/null
+++ b/resources/js/vendor/dropzone/index.js
@@ -0,0 +1,2 @@
+import Dropzone from "dropzone";
+window.Dropzone = Dropzone;
diff --git a/resources/js/vendor/highlight/index.js b/resources/js/vendor/highlight/index.js
new file mode 100644
index 0000000..7ef26e9
--- /dev/null
+++ b/resources/js/vendor/highlight/index.js
@@ -0,0 +1,4 @@
+import hljs from "highlight.js";
+import jsBeautify from "js-beautify";
+window.hljs = hljs;
+window.jsBeautify = jsBeautify;
diff --git a/resources/js/vendor/image-zoom/index.js b/resources/js/vendor/image-zoom/index.js
new file mode 100644
index 0000000..1913697
--- /dev/null
+++ b/resources/js/vendor/image-zoom/index.js
@@ -0,0 +1 @@
+import "zoom-vanilla.js/dist/zoom-vanilla.min.js";
diff --git a/resources/js/vendor/leaflet-map/index.js b/resources/js/vendor/leaflet-map/index.js
new file mode 100644
index 0000000..c39ef90
--- /dev/null
+++ b/resources/js/vendor/leaflet-map/index.js
@@ -0,0 +1,3 @@
+import L from "leaflet";
+import "leaflet.markercluster";
+window.L = L;
diff --git a/resources/js/vendor/litepicker/index.js b/resources/js/vendor/litepicker/index.js
new file mode 100644
index 0000000..fd2691e
--- /dev/null
+++ b/resources/js/vendor/litepicker/index.js
@@ -0,0 +1,2 @@
+import Litepicker from "litepicker";
+window.Litepicker = Litepicker;
diff --git a/resources/js/vendor/lucide/index.js b/resources/js/vendor/lucide/index.js
new file mode 100644
index 0000000..cd3773e
--- /dev/null
+++ b/resources/js/vendor/lucide/index.js
@@ -0,0 +1,3 @@
+import { createIcons, icons } from "lucide";
+window.createIcons = createIcons;
+window.icons = icons;
diff --git a/resources/js/vendor/modal/index.js b/resources/js/vendor/modal/index.js
new file mode 100644
index 0000000..8107090
--- /dev/null
+++ b/resources/js/vendor/modal/index.js
@@ -0,0 +1 @@
+import "@left4code/tw-starter/dist/js/modal";
diff --git a/resources/js/vendor/pristine/index.js b/resources/js/vendor/pristine/index.js
new file mode 100644
index 0000000..aa441b6
--- /dev/null
+++ b/resources/js/vendor/pristine/index.js
@@ -0,0 +1,2 @@
+import Pristine from "pristinejs";
+window.Pristine = Pristine;
diff --git a/resources/js/vendor/simplebar/index.js b/resources/js/vendor/simplebar/index.js
new file mode 100644
index 0000000..1901ff9
--- /dev/null
+++ b/resources/js/vendor/simplebar/index.js
@@ -0,0 +1,2 @@
+import SimpleBar from "simplebar";
+window.SimpleBar = SimpleBar;
diff --git a/resources/js/vendor/svg-loader/index.js b/resources/js/vendor/svg-loader/index.js
new file mode 100644
index 0000000..406b2db
--- /dev/null
+++ b/resources/js/vendor/svg-loader/index.js
@@ -0,0 +1 @@
+import "@left4code/tw-starter/dist/js/svg-loader";
diff --git a/resources/js/vendor/tab/index.js b/resources/js/vendor/tab/index.js
new file mode 100644
index 0000000..215fb23
--- /dev/null
+++ b/resources/js/vendor/tab/index.js
@@ -0,0 +1 @@
+import "@left4code/tw-starter/dist/js/tab";
diff --git a/resources/js/vendor/tabulator/index.js b/resources/js/vendor/tabulator/index.js
new file mode 100644
index 0000000..b4bf173
--- /dev/null
+++ b/resources/js/vendor/tabulator/index.js
@@ -0,0 +1,2 @@
+import { TabulatorFull as Tabulator } from "tabulator-tables";
+window.Tabulator = Tabulator;
diff --git a/resources/js/vendor/tailwind-merge/index.js b/resources/js/vendor/tailwind-merge/index.js
new file mode 100644
index 0000000..c65cdf7
--- /dev/null
+++ b/resources/js/vendor/tailwind-merge/index.js
@@ -0,0 +1,10 @@
+import * as tailwindMerge from "tailwind-merge";
+
+const { twMerge } = tailwindMerge;
+
+document.querySelectorAll("[data-tw-merge]").forEach((el) => {
+ el.setAttribute("class", twMerge(el.getAttribute("class")));
+ el.removeAttribute("data-tw-merge");
+});
+
+window.twMerge = tailwindMerge;
diff --git a/resources/js/vendor/tiny-slider/index.js b/resources/js/vendor/tiny-slider/index.js
new file mode 100644
index 0000000..80d040c
--- /dev/null
+++ b/resources/js/vendor/tiny-slider/index.js
@@ -0,0 +1,2 @@
+import { tns } from "tiny-slider/src/tiny-slider";
+window.tns = tns;
diff --git a/resources/js/vendor/tippy/index.js b/resources/js/vendor/tippy/index.js
new file mode 100644
index 0000000..7e5a14b
--- /dev/null
+++ b/resources/js/vendor/tippy/index.js
@@ -0,0 +1,4 @@
+import tippy, { roundArrow, animateFill as animateFillPlugin } from "tippy.js";
+window.tippy = tippy;
+window.roundArrow = roundArrow;
+window.animateFillPlugin = animateFillPlugin;
diff --git a/resources/js/vendor/toastify/index.js b/resources/js/vendor/toastify/index.js
new file mode 100644
index 0000000..a09e707
--- /dev/null
+++ b/resources/js/vendor/toastify/index.js
@@ -0,0 +1,2 @@
+import Toastify from "toastify-js";
+window.Toastify = Toastify;
diff --git a/resources/js/vendor/tom-select/index.js b/resources/js/vendor/tom-select/index.js
new file mode 100644
index 0000000..573801e
--- /dev/null
+++ b/resources/js/vendor/tom-select/index.js
@@ -0,0 +1,2 @@
+import TomSelect from "tom-select";
+window.TomSelect = TomSelect;
diff --git a/resources/js/vendor/transition/index.js b/resources/js/vendor/transition/index.js
new file mode 100644
index 0000000..5d43093
--- /dev/null
+++ b/resources/js/vendor/transition/index.js
@@ -0,0 +1 @@
+import "@left4code/tw-starter/dist/js/transition";
diff --git a/resources/js/vendor/xlsx/index.js b/resources/js/vendor/xlsx/index.js
new file mode 100644
index 0000000..71a16aa
--- /dev/null
+++ b/resources/js/vendor/xlsx/index.js
@@ -0,0 +1,2 @@
+import * as xlsx from "xlsx";
+window.xlsx = xlsx;