rasyahroel/it_security_template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

update dev dependencies

Browse Source
This commit is contained in:
Daeng Deni Mardaeni 2024-09-17 10:20:11 +07:00
parent cc56cc17ff
commit 70c46022b9
26 changed files with 1384 additions and 310 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
package.json
View File

@ -7,14 +7,13 @@
}, },
"devDependencies": { "devDependencies": {
"@rollup/plugin-inject": "^5.0.5", "@rollup/plugin-inject": "^5.0.5",
"autoprefixer": "^10.4.19", "autoprefixer": "^10.4.20",
"axios": "^1.6.4",
"laravel-vite-plugin": "^1.0", "laravel-vite-plugin": "^1.0",
"postcss": "^8.4.39", "postcss": "^8.4.45",
"prettier": "^3.3.3", "prettier": "^3.3.3",
"prettier-plugin-tailwindcss": "^0.6.6", "prettier-plugin-tailwindcss": "^0.6.6",
"sass": "^1.77.6", "sass": "^1.77.6",
"tailwindcss": "^3.4.4", "tailwindcss": "^3.4.11",
"vite": "^5.0" "vite": "^5.0"
}, },
"dependencies": { "dependencies": {
@ -24,6 +23,11 @@
"notie": "^4.3.1", "notie": "^4.3.1",
"sweetalert2": "^11.12.4", "sweetalert2": "^11.12.4",
"toastr": "^2.1.4", "toastr": "^2.1.4",
"tom-select": "^2.3.1" "tom-select": "^2.3.1",
"apexcharts": "^3.53.0",
"axios": "^1.7.7",
"clipboard": "^2.0.11",
"esri-leaflet": "^3.0.12",
"esri-leaflet-geocoder": "^3.1.4"
} }
} }

147
resources/metronic/app/datatables/allowed-ip-addresses.ts Normal file
View File

@ -0,0 +1,147 @@
import {
KTDataTable,
KTDataTableConfigInterface,
KTDataTableDataInterface,
KTDataTableInterface,
} from '../../core/components/datatable';
const apiUrl: string = /^(localhost|127.0.0.1)$/.test(window.location.hostname)
? 'http://127.0.0.1:8001/metronic-tailwind-html/demo1/account/security/allowed-ip-addresses/_data.html'
: 'https://keenthemes.com/metronic/tailwind/demo1/account/security/allowed-ip-addresses/_data.html';
const element: HTMLElement = document.querySelector('#ip_addresses_table') as HTMLElement;
interface IPAddressData extends KTDataTableDataInterface {
id: number;
status: string;
ipAddress: string;
lastSession: string;
label: string;
method: string;
}
// Example usage of the plugin with server-side API, pagination, and sorting
const dataTableOptions: KTDataTableConfigInterface = {
// Initialization options for the DataTable
apiEndpoint: apiUrl,
// mapResponse: (responseData): KTDatatableResponseDataInterface => {
// // Custom transformation logic for custom API
// return {
// data: responseData.data, // Assuming the response has an 'items' array
// totalCount: responseData.totalCount // Assuming the response has a 'total' field
// };
// },
// mapRequest: (query: URLSearchParams): URLSearchParams => {
// // Custom query mapping logic
// query.set('test', 'test');
// return query;
// },
// pageSizes: [5, 10, 20, 30, 50],
pageSize: 10,
// stateSave: false,
stateNamespace: 'allowed-ip-addresses',
columns: {
select: {
render: (
item: keyof KTDataTableDataInterface,
data: IPAddressData,
context: KTDataTableInterface
): string => {
const checkbox = document.createElement('input');
checkbox.className = 'checkbox checkbox-sm';
checkbox.type = 'checkbox';
checkbox.value = data.id.toString();
checkbox.setAttribute('data-datatable-row-check', 'true');
return checkbox.outerHTML.trim();
},
},
status: {
title: 'Status',
render: (item: string): string => {
return `<span class="badge badge-dot size-2 ${item}"></span>`;
},
createdCell(cell) {
cell.classList.add('text-center');
},
},
ipAddress: {
title: 'IP Address',
},
lastSession: {
title: 'Last Session',
},
label: {
title: 'Label',
},
method: {
title: 'Method',
},
edit: {
render: (
item: string,
data: IPAddressData
): string => {
const button = document.createElement('button');
button.className = 'btn btn-sm btn-icon btn-clear btn-light';
button.innerHTML = '<i class="ki-outline ki-notepad-edit"></i>';
return button.outerHTML.trim();
},
createdCell: (cell, cellData, rowData) => {
cell.querySelector('.btn').addEventListener('click', () => {
alert(`Clicked on edit button for row ${rowData.label}`);
});
},
},
delete: {
render: (
item: string,
data: IPAddressData
): string => {
const button = document.createElement('button');
button.className = 'btn btn-sm btn-icon btn-clear btn-light';
button.innerHTML = '<i class="ki-outline ki-trash"></i>';
return button.outerHTML.trim();
},
createdCell: (cell, cellData, rowData) => {
cell.querySelector('.btn').addEventListener('click', () => {
alert(`Clicked on delete button for row ${rowData.label}`);
});
},
},
},
};
const dataTable = new KTDataTable<IPAddressData>(element, dataTableOptions);
document.querySelector('#select_ip_btn').addEventListener('click', () => {
const selected = dataTable.getChecked();
if (selected.length) {
alert(`Selected rows: ${selected}`);
} else {
alert('No rows selected');
}
})
// Cache elements with the data-datatable-search attribute
const searchElements = document.querySelectorAll<HTMLInputElement>('[data-datatable-search]');
searchElements.forEach((element) => {
// Get the ID of the datatable to be searched
const tableId = element.getAttribute('data-datatable-search');
// Find the corresponding datatable element
const datatable = document.querySelector<HTMLElement>(tableId);
if (datatable) {
// Retrieve the datatable instance once
const dataTableInstance = (datatable as any).instance;
// Add the event listener for the keyup event
element.addEventListener('keyup', () => {
dataTableInstance.search(element.value);
});
}
});

192
resources/metronic/app/datatables/current-sessions.js Normal file
View File

@ -0,0 +1,192 @@
class DataTableManager {
constructor(tableElement, apiUrl) {
this.tableElement = tableElement;
this.apiUrl = apiUrl;
this.dataTableOptions = this.createDataTableOptions();
this.dataTable = new KTDataTable(tableElement, this.dataTableOptions);
this.filterMap = this.createFilterMap();
}
static isLocalhost() {
return /^(localhost|127.0.0.1)$/.test(window.location.hostname);
}
/**
* Creates the options for the DataTable.
*
* @return {Object} The options for the DataTable.
*/
createDataTableOptions() {
return {
apiEndpoint: this.apiUrl,
pageSize: 10,
columns: {
select: {
render: (item, data, context) => {
const checkbox = document.createElement('input');
checkbox.className = 'checkbox checkbox-sm';
checkbox.type = 'checkbox';
checkbox.value = data.id.toString();
checkbox.setAttribute('data-datatable-row-check', 'true');
return checkbox.outerHTML.trim();
},
},
user: {
title: 'Person',
render: (item) => {
const prefix = DataTableManager.isLocalhost() ? 'metronic-tailwind-html' : 'metronic/tailwind';
return `
<div class="flex items-center gap-2.5">
<div class="shrink-0">
<img class="h-9 rounded-full" src="/static/${prefix}/dist/assets/media/avatars/${item.avatar}">
</div>
<a class="leading-none font-semibold text-gray-900 hover:text-primary" href="#">
${item.name}
</a>
</div>
`;
},
},
browser: {
title: 'Browser',
render: (item) => {
return `
<div class="flex items-center gap-2">
<i class="ki-outline ki-chrome text-gray-700 text-lg"></i>
<span class="text-gray-700">${item.name}</span>
</div>
`;
},
},
ipAddress: {
title: 'IP Address',
},
location: {
title: 'Location',
render: (item) => {
const prefix = DataTableManager.isLocalhost() ? 'metronic-tailwind-html' : 'metronic/tailwind';
return `
<div class="flex items-center gap-1.5">
<img alt="flag" class="h-4 rounded-full" src="/static/${prefix}/dist/assets/media/flags/${item.flag}">
<span class="leading-none text-gray-700">${item.name}</span>
</div>
`;
},
},
action: {
title: '',
render: (item) => {
return `
<button class="btn btn-icon btn-light btn-clear btn-sm">
<i class="ki-outline ki-dots-vertical"></i>
</button>
`;
},
createdCell: (cell, cellData, rowData) => {
cell.querySelector('.btn').addEventListener('click', () => {
alert(`Clicked on action button for row ${rowData.user.name}`);
});
},
},
},
};
}
/**
* Creates a map of filter elements based on the data-datatable-filter-column attribute.
*
* @return {Map<string, HTMLSelectElement>} A map of filter elements, where the key is the value of the data-datatable-filter-column attribute and the value is the corresponding HTMLSelectElement.
*/
createFilterMap() {
const filterElements = document.querySelectorAll(
'select[data-datatable-filter-column]'
);
return new Map(
Array.from(filterElements).map((el) => [
el.getAttribute('data-datatable-filter-column'),
el,
])
);
}
/**
* Initialize the filters based on the state and map the filter elements to their corresponding datatable columns.
*/
initializeFilters() {
this.dataTable.getState().filters.forEach(({ column, value }) => {
if (this.filterMap.has(column)) {
const filterEl = this.filterMap.get(column);
if (filterEl !== null) {
filterEl.value = value || '';
}
}
});
this.filterMap.forEach((el, column) => {
el.addEventListener('change', () => {
this.dataTable
.setFilter({
column,
type: 'text',
value: el.value || '',
})
.redraw();
});
});
}
/**
* A debounced function that delays invoking the input function until after wait milliseconds have elapsed since the last time the debounced function is invoked.
*
* @param {Function} func - The function to debounce.
* @param {number} wait - The number of milliseconds to delay.
* @return {Function} The debounced function.
*/
debounce(func, wait) {
let timeout;
return function (...args) {
const context = this;
clearTimeout(timeout);
timeout = setTimeout(() => func.apply(context, args), wait);
};
}
/**
* Initializes the search functionality for the current table.
* It sets up a debounced search event listener on the search element
* to perform a search on the datatable whenever the user types in the search input.
*
* @return {void}
*/
initSearch() {
const searchElement = document.querySelector('[data-datatable-search="true"]');
if (this.dataTable && searchElement) {
const debouncedSearch = this.debounce(() => {
this.dataTable.search(searchElement.value);
}, 300);
searchElement.addEventListener('keyup', debouncedSearch);
}
}
/**
* Creates a new instance of DataTableManager with the specified tableElement and apiUrl.
* Initializes filters and search functionality for the instance.
*
* @param {void}
* @return {void}
*/
static createInstance() {
const apiUrl = DataTableManager.isLocalhost()
? 'http://127.0.0.1:8001/metronic-tailwind-html/demo1/account/security/current-sessions/_data.html'
: 'https://keenthemes.com/metronic/tailwind/demo1/account/security/current-sessions/_data.html';
const tableElement = document.querySelector('#current_sessions_table');
const dataTableManager = new DataTableManager(tableElement, apiUrl);
dataTableManager.initializeFilters();
dataTableManager.initSearch();
}
}
KTDom.ready(() => {
DataTableManager.createInstance();
});

6
resources/metronic/app/layouts/base.js
View File

@ -4,10 +4,10 @@ class KTLayout {
} }
static _handleMegaMenu() { static _handleMegaMenu() {
const megamenuEl = document.querySelector('#megamenu'); const megaMenuEl = document.querySelector('#mega_menu');
if (!megamenuEl) return; if (!megaMenuEl) return;
const menu = KTMenu.getInstance(megamenuEl); const menu = KTMenu.getInstance(megaMenuEl);
menu.disable(); menu.disable();
setTimeout(() => { setTimeout(() => {

645
resources/metronic/app/widgets/general.js Normal file
View File

@ -0,0 +1,645 @@
class KTGeneralWidgets {
static initCompanyProfileMap() {
const element = 'company_profile_map';
if (!KTDom.getElement(`#${element}`)) return;
// Check if Leaflet is included
if (!L) {
return;
}
// Define Map Location
const leaflet = L.map(element, {
center: [40.725, -73.985],
zoom: 30
});
// Init Leaflet Map. For more info check the plugin's documentation: https://leafletjs.com/
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '&copy; <a href="https://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(leaflet);
// Set Geocoding
let geocodeService;
if (typeof L.esri.Geocoding === 'undefined') {
geocodeService = L.esri.geocodeService();
} else {
geocodeService = L.esri.Geocoding.geocodeService();
}
// Define Marker Layer
const markerLayer = L.layerGroup().addTo(leaflet);
// Set Custom SVG icon marker
const leafletIcon = L.divIcon({
html: `<i class="ki-solid ki-geolocation text-3xl text-success"></i>`,
bgPos: [10, 10],
iconAnchor: [20, 37],
popupAnchor: [0, -37],
className: 'leaflet-marker'
});
// Show current address
L.marker([40.724716, -73.984789], { icon: leafletIcon }).addTo(markerLayer).bindPopup('430 E 6th St, New York, 10009.', { closeButton: false }).openPopup();
// Map onClick Action
leaflet.on('click', function (e) {
geocodeService.reverse().latlng(e.latlng).run(function (error, result) {
if (error) {
return;
}
markerLayer.clearLayers();
const selectedlocation = result.address.Match_addr;
L.marker(result.latlng, { icon: leafletIcon }).addTo(markerLayer).bindPopup(result.address.Match_addr, { closeButton: false }).openPopup();
});
});
}
static initContributionChart() {
const data = [44, 55, 41, 17, 15];
const labels = ['ERP', 'HRM', 'DMS', 'CRM', 'DAM'];
const colors = ['var(--tw-primary)', 'var(--tw-brand)', 'var(--tw-success)', 'var(--tw-info)', 'var(--tw-warning)'];
const options = {
series: data,
labels: labels,
colors: colors,
fill: {
colors: colors,
},
chart: {
type: 'donut',
},
stroke: {
show: true,
width: 2, // Set the width of the border
colors: 'var(--tw-light)' // Set the color of the border
},
dataLabels: {
enabled: false,
},
plotOptions: {
pie: {
expandOnClick: false,
}
},
legend: {
offsetY: -10,
offsetX: -10,
fontSize: '13px', // Set the font size
fontWeight: '500', // Set the font weight
itemMargin: {
vertical: 1 // Reduce the vertical margin between legend items
},
labels: {
colors: 'var(--tw-gray-700)', // Set the font color for the legend text
useSeriesColors: false // Optional: Set to true to use series colors for legend text
},
markers: {
width: 8,
height: 8
}
},
responsive: [{
breakpoint: 480,
options: {
chart: {
width: 200
},
legend: {
position: 'bottom'
}
}
}]
};
const element = document.querySelector('#contributions_chart');
if (!element) return;
const chart = new ApexCharts(element, options);
chart.render();
}
static initMediaUploadsChart() {
const data = [85, 65, 50, 70, 40, 45, 100, 55, 85, 60, 70, 90];
const categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
const options = {
series: [{
name: 'series1',
data: data
}],
chart: {
height: 250,
type: 'area',
toolbar: {
show: false
}
},
dataLabels: {
enabled: false
},
legend: {
show: false
},
stroke: {
curve: 'smooth',
show: true,
width: 3,
colors: ['var(--tw-primary)']
},
xaxis: {
categories: categories,
axisBorder: {
show: false,
},
maxTicks: 12,
axisTicks: {
show: false
},
labels: {
style: {
colors: 'var(--tw-gray-500)',
fontSize: '12px'
}
},
crosshairs: {
position: 'front',
stroke: {
color: 'var(--tw-primary)',
width: 1,
dashArray: 3
}
},
tooltip: {
enabled: false,
formatter: undefined,
offsetY: 0,
style: {
fontSize: '12px'
}
}
},
yaxis: {
min: 0,
max: 100,
tickAmount: 5, // This will create 5 ticks: 0, 20, 40, 60, 80, 100
axisTicks: {
show: false
},
labels: {
style: {
colors: 'var(--tw-gray-500)',
fontSize: '12px'
},
formatter: (value) => {
return `$${value}K`;
}
}
},
tooltip: {
enabled: true,
custom({series, seriesIndex, dataPointIndex, w}) {
const number = parseInt(series[seriesIndex][dataPointIndex]) * 1000;
const month = w.globals.seriesX[seriesIndex][dataPointIndex];
const monthName = categories[month];
const formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
});
const formattedNumber = formatter.format(number);
return (
`
<div class="flex flex-col gap-2 p-3.5">
<div class="font-medium text-2sm text-gray-600">${monthName}, 2024 Sales</div>
<div class="flex items-center gap-1.5">
<div class="font-semibold text-md text-gray-900">${formattedNumber}</div>
<span class="badge badge-outline badge-success badge-xs">+24%</span>
</div>
</div>
`
);
}
},
markers: {
size: 0,
colors: 'var(--tw-primary-light)',
strokeColors: 'var(--tw-primary)',
strokeWidth: 4,
strokeOpacity: 1,
strokeDashArray: 0,
fillOpacity: 1,
discrete: [],
shape: "circle",
radius: 2,
offsetX: 0,
offsetY: 0,
onClick: undefined,
onDblClick: undefined,
showNullDataPoints: true,
hover: {
size: 8,
sizeOffset: 0
}
},
fill: {
gradient: {
enabled: true,
opacityFrom: 0.25,
opacityTo: 0
}
},
grid: {
borderColor: 'var(--tw-gray-200)',
strokeDashArray: 5,
clipMarkers: false,
yaxis: {
lines: {
show: true
}
},
xaxis: {
lines: {
show: false
}
},
},
};
const element = document.querySelector('#media_uploads_chart');
if (!element) return;
const chart = new ApexCharts(element, options);
chart.render();
}
static initEarningsChart() {
const data = [75, 25, 45, 15, 85, 35, 70, 25, 35, 15, 45, 30];
const categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec'];
const options = {
series: [{
name: 'series1',
data: data
}],
chart: {
height: 250,
type: 'area',
toolbar: {
show: false
}
},
dataLabels: {
enabled: false
},
legend: {
show: false
},
stroke: {
curve: 'smooth',
show: true,
width: 3,
colors: ['var(--tw-primary)']
},
xaxis: {
categories: categories,
axisBorder: {
show: false,
},
maxTicks: 12,
axisTicks: {
show: false
},
labels: {
style: {
colors: 'var(--tw-gray-500)',
fontSize: '12px'
}
},
crosshairs: {
position: 'front',
stroke: {
color: 'var(--tw-primary)',
width: 1,
dashArray: 3
}
},
tooltip: {
enabled: false,
formatter: undefined,
offsetY: 0,
style: {
fontSize: '12px'
}
}
},
yaxis: {
min: 0,
max: 100,
tickAmount: 5, // This will create 5 ticks: 0, 20, 40, 60, 80, 100
axisTicks: {
show: false
},
labels: {
style: {
colors: 'var(--tw-gray-500)',
fontSize: '12px'
},
formatter: (value) => {
return `$${value}K`;
}
}
},
tooltip: {
enabled: true,
custom({series, seriesIndex, dataPointIndex, w}) {
const number = parseInt(series[seriesIndex][dataPointIndex]) * 1000;
const month = w.globals.seriesX[seriesIndex][dataPointIndex];
const monthName = categories[month];
const formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
});
const formattedNumber = formatter.format(number);
return (
`
<div class="flex flex-col gap-2 p-3.5">
<div class="font-medium text-2sm text-gray-600">${monthName}, 2024 Sales</div>
<div class="flex items-center gap-1.5">
<div class="font-semibold text-md text-gray-900">${formattedNumber}</div>
<span class="badge badge-outline badge-success badge-xs">+24%</span>
</div>
</div>
`
);
}
},
markers: {
size: 0,
colors: 'var(--tw-primary-light)',
strokeColors: 'var(--tw-primary)',
strokeWidth: 4,
strokeOpacity: 1,
strokeDashArray: 0,
fillOpacity: 1,
discrete: [],
shape: "circle",
radius: 2,
offsetX: 0,
offsetY: 0,
onClick: undefined,
onDblClick: undefined,
showNullDataPoints: true,
hover: {
size: 8,
sizeOffset: 0
}
},
fill: {
gradient: {
enabled: true,
opacityFrom: 0.25,
opacityTo: 0
}
},
grid: {
borderColor: 'var(--tw-gray-200)',
strokeDashArray: 5,
clipMarkers: false,
yaxis: {
lines: {
show: true
}
},
xaxis: {
lines: {
show: false
}
},
},
};
const element = document.querySelector('#earnings_chart');
if (!element) return;
const chart = new ApexCharts(element, options);
chart.render();
}
static initMyBalanceChart(chartId, data, categories) {
const options = {
series: [{
name: 'series1',
data: data
}],
chart: {
height: 250,
type: 'area',
toolbar: {
show: false
}
},
dataLabels: {
enabled: false
},
legend: {
show: false
},
stroke: {
curve: 'smooth',
show: true,
width: 3,
colors: ['var(--tw-primary)']
},
xaxis: {
categories: categories,
axisBorder: {
show: false,
},
axisTicks: {
show: false
},
labels: {
style: {
colors: 'var(--tw-gray-600)',
fontSize: '12px'
}
},
crosshairs: {
position: 'front',
stroke: {
color: 'var(--tw-primary)',
width: 1,
dashArray: 3
}
},
tooltip: {
enabled: false,
formatter: undefined,
offsetY: 0,
style: {
fontSize: '12px'
}
}
},
yaxis: {
min: 0,
max: 100,
tickAmount: 5,
axisTicks: {
show: false
},
labels: {
style: {
colors: 'var(--tw-gray-600)',
fontSize: '12px'
},
formatter: (value) => {
return `$${value}K`;
}
}
},
tooltip: {
enabled: true,
custom({series, seriesIndex, dataPointIndex, w}) {
const number = parseInt(series[seriesIndex][dataPointIndex]) * 1000;
const month = w.globals.seriesX[seriesIndex][dataPointIndex];
const monthName = categories[month];
const formatter = new Intl.NumberFormat('en-US', {
style: 'currency',
currency: 'USD',
});
const formattedNumber = formatter.format(number);
return (
`
<div class="flex flex-col gap-2 p-3.5">
<div class="font-medium text-2sm text-gray-600">${monthName}, 2024 Sales</div>
<div class="flex items-center gap-1.5">
<div class="font-semibold text-md text-gray-900">${formattedNumber}</div>
<span class="badge badge-outline badge-success badge-xs">+24%</span>
</div>
</div>
`
);
}
},
markers: {
size: 0,
colors: 'var(--tw-primary-light)',
strokeColors: 'var(--tw-primary)',
strokeWidth: 4,
strokeOpacity: 1,
strokeDashArray: 0,
fillOpacity: 1,
discrete: [],
shape: "circle",
radius: 2,
offsetX: 0,
offsetY: 0,
onClick: undefined,
onDblClick: undefined,
showNullDataPoints: true,
hover: {
size: 8,
sizeOffset: 0
}
},
fill: {
gradient: {
enabled: true,
opacityFrom: 0.25,
opacityTo: 0
}
},
grid: {
borderColor: 'var(--tw-gray-200)',
strokeDashArray: 5,
clipMarkers: false,
yaxis: {
lines: {
show: true
}
},
xaxis: {
lines: {
show: false
}
},
},
};
const element = document.querySelector(`#${chartId}`);
if (!element) return;
// Destroy the old chart instance if it exists
if (element.chart) {
element.chart.destroy();
}
const chart = new ApexCharts(element, options);
element.chart = chart; // Store the chart instance on the element
chart.render();
}
}
document.addEventListener('DOMContentLoaded', () => {
// Initial chart rendering
KTGeneralWidgets.initMyBalanceChart('my_balance_chart', [75, 25, 45, 15, 85, 35, 70, 25, 35], ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep']);
// Event listener for tab buttons
document.querySelectorAll('.tab-button').forEach(button => {
button.addEventListener('click', (event) => {
// Remove active class from all buttons
document.querySelectorAll('.tab-button').forEach(btn => btn.classList.remove('active'));
// Add active class to the clicked button
event.target.classList.add('active');
// Determine chart data and categories based on the clicked tab
const chartId = 'my_balance_chart'; // You might need to adjust this if you have multiple charts
let data, categories;
switch (event.target.getAttribute('data-chart')) {
case 'my_balance_chart1':
data = [45, 35, 45, 35, 55, 85, 20, 25, 55];
categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'];
break;
case 'my_balance_chart2':
data = [25, 55, 65, 45, 25, 65, 50, 40, 60];
categories = ['Oct', 'Nov', 'Dec', 'Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun'];
break;
case 'my_balance_chart3':
data = [80, 40, 50, 20, 50, 80, 60, 20, 30];
categories = ['Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec', 'Jan', 'Feb', 'Mar'];
break;
case 'my_balance_chart4':
data = [20, 65, 20, 50, 70, 25, 40, 60, 80];
categories = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep'];
break;
default:
data = [];
categories = [];
}
// Update chart with new data and categories
KTGeneralWidgets.initMyBalanceChart(chartId, data, categories);
});
});
});
KTDom.ready(() => {
KTGeneralWidgets.initCompanyProfileMap();
KTGeneralWidgets.initContributionChart();
KTGeneralWidgets.initMediaUploadsChart();
KTGeneralWidgets.initEarningsChart();
});

2
resources/metronic/core/components/collapse/collapse.ts
View File

@ -166,7 +166,7 @@ export class KTCollapse extends KTComponent implements KTCollapseInterface {
} }
public static createInstances(): void { public static createInstances(): void {
const elements = document.querySelectorAll('[data-collapse]:not([data-collapse="false"]'); const elements = document.querySelectorAll('[data-collapse]:not([data-collapse="false"])');
elements.forEach((element) => { elements.forEach((element) => {
new KTCollapse(element as HTMLElement); new KTCollapse(element as HTMLElement);

16
resources/metronic/core/components/component.ts
View File

@ -70,21 +70,21 @@ export default class KTComponent {
const parts = String(value).split('|'); const parts = String(value).split('|');
if (parts.length > 1) { if (parts.length > 1) {
parts.every((part) => { for (let i = parts.length - 1; i < parts.length; i--) {
if (part.includes(':')) { const part = parts[i];
const [breakpointKey, breakpointValue] = part.split(':');
const breakpoint = KTUtils.getBreakpoint(breakpointKey as KTBreakpointType);
if (part.includes(':')) {
const [breakpointKey, breakpointValue] = part.split(':');
const breakpoint = KTUtils.getBreakpoint(breakpointKey as KTBreakpointType);
if (breakpoint <= width) { if (breakpoint <= width) {
result = breakpointValue; result = breakpointValue;
return false; break;
} }
} else { } else {
result = part; result = part;
break;
} }
}
return true;
});
} else { } else {
result = value; result = value;
} }

2
resources/metronic/core/components/datatable/types.ts
View File

@ -76,7 +76,7 @@ export interface KTDataTableConfigInterface {
stateSave?: boolean; stateSave?: boolean;
stateNamespace?: string; stateNamespace?: string;
pageSizes?: number[]; pageSizes?: number[];
columns: { columns?: {
[key: keyof KTDataTableDataInterface | string]: { [key: keyof KTDataTableDataInterface | string]: {
title?: string, title?: string,
render?: (item: KTDataTableDataInterface[keyof KTDataTableDataInterface] | string, data: KTDataTableDataInterface, context: KTDataTableInterface) => string, render?: (item: KTDataTableDataInterface[keyof KTDataTableDataInterface] | string, data: KTDataTableDataInterface, context: KTDataTableInterface) => string,

2
resources/metronic/core/components/dismiss/dismiss.ts
View File

@ -120,7 +120,7 @@ export class KTDismiss extends KTComponent implements KTDismissInterface {
} }
public static createInstances(): void { public static createInstances(): void {
const elements = document.querySelectorAll('[data-dismiss]:not([data-dismiss="false"]'); const elements = document.querySelectorAll('[data-dismiss]:not([data-dismiss="false"])');
elements.forEach((element) => { elements.forEach((element) => {
new KTDismiss(element as HTMLElement); new KTDismiss(element as HTMLElement);

7
resources/metronic/core/components/menu/menu.ts
View File

@ -1128,7 +1128,7 @@ export class KTMenu extends KTComponent implements KTMenuInterface {
public static handleClick() { public static handleClick() {
KTEventHandler.on( KTEventHandler.on(
document.body, document.body,
'.menu-item[data-menu-item-trigger] > .menu-link, .menu-item[data-menu-item-trigger] > .menu-toggle, .menu-item[data-menu-item-trigger] > .menu-label .menu-toggle, [data-menu-item-trigger]:not(.menu-item):not([data-menu-item-trigger="auto"])', '.menu-item[data-menu-item-trigger] > .menu-link, .menu-item[data-menu-item-trigger] > .menu-label .menu-toggle, .menu-item[data-menu-item-trigger] > .menu-toggle, [data-menu-item-trigger]:not(.menu-item):not([data-menu-item-trigger="auto"])',
'click', 'click',
(event: Event, target: HTMLElement) => { (event: Event, target: HTMLElement) => {
const menu = KTMenu.getInstance(target); const menu = KTMenu.getInstance(target);
@ -1147,6 +1147,9 @@ export class KTMenu extends KTComponent implements KTMenuInterface {
const menu = KTMenu.getInstance(target); const menu = KTMenu.getInstance(target);
if (menu !== null) { if (menu !== null) {
if (target.tagName == 'a' || target.hasAttribute('href')) {
menu.dismiss(target);
}
return menu.link(target, event); return menu.link(target, event);
} }
} }
@ -1188,12 +1191,12 @@ export class KTMenu extends KTComponent implements KTMenuInterface {
} }
public static initHandlers(): void { public static initHandlers(): void {
this.handleDismiss();
this.handleClickAway(); this.handleClickAway();
this.handleKeyboard(); this.handleKeyboard();
this.handleMouseover(); this.handleMouseover();
this.handleMouseout(); this.handleMouseout();
this.handleClick(); this.handleClick();
this.handleDismiss();
this.handleResize(); this.handleResize();
} }

5
resources/metronic/core/components/scrollable/scrollable.ts
View File

@ -19,7 +19,7 @@ export class KTScrollable extends KTComponent implements KTScrollableInterface {
save: true, save: true,
dependencies: '', dependencies: '',
wrappers: '', wrappers: '',
offset: '', offset: ''
}; };
protected override _config: KTScrollableConfigInterface = this._defaultConfig; protected override _config: KTScrollableConfigInterface = this._defaultConfig;
protected _elementId: string | null = null; protected _elementId: string | null = null;
@ -53,11 +53,12 @@ export class KTScrollable extends KTComponent implements KTScrollableInterface {
protected _setupHeight(): void { protected _setupHeight(): void {
if (!this._element) return; if (!this._element) return;
const heightType = this._getHeightType(); const heightType = this._getHeightType();
const height = this._getHeight(); const height = this._getHeight();
// Set height // Set height
if (height && height.length > 0) { if (height && height != '0' && height.length > 0) {
this._element.style.setProperty(heightType, height); this._element.style.setProperty(heightType, height);
} else { } else {
this._element.style.setProperty(heightType, ''); this._element.style.setProperty(heightType, '');

2
resources/metronic/core/components/scrollable/types.ts
View File

@ -2,7 +2,7 @@ export interface KTScrollableConfigInterface {
save: boolean, save: boolean,
dependencies: string, dependencies: string,
wrappers: string, wrappers: string,
offset: string, offset: string
} }
export interface KTScrollableInterface { export interface KTScrollableInterface {

2
resources/metronic/core/components/scrollto/scrollto.ts
View File

@ -90,7 +90,7 @@ export class KTScrollto extends KTComponent implements KTScrolltoInterface {
} }
public static createInstances(): void { public static createInstances(): void {
const elements = document.querySelectorAll('[data-scrollto]:not([data-scrollto="false"]'); const elements = document.querySelectorAll('[data-scrollto]:not([data-scrollto="false"])');
elements.forEach((element) => { elements.forEach((element) => {
new KTScrollto(element as HTMLElement); new KTScrollto(element as HTMLElement);

34
resources/metronic/core/components/sticky/sticky.ts
View File

@ -20,13 +20,14 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
offset: 0, offset: 0,
reverse: false, reverse: false,
release: '', release: '',
activate: '' activate: '',
}; };
protected override _config: KTStickyConfigInterface = this._defaultConfig; protected override _config: KTStickyConfigInterface = this._defaultConfig;
protected _attributeRoot: string; protected _attributeRoot: string;
protected _eventTriggerState: boolean; protected _eventTriggerState: boolean;
protected _lastScrollTop: number; protected _lastScrollTop: number;
protected _releaseElement: HTMLElement; protected _releaseElement: HTMLElement;
protected _activateElement: HTMLElement;
protected _wrapperElement: HTMLElement; protected _wrapperElement: HTMLElement;
constructor(element: HTMLElement, config: KTStickyConfigInterface | null = null) { constructor(element: HTMLElement, config: KTStickyConfigInterface | null = null) {
@ -38,6 +39,7 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
this._buildConfig(config); this._buildConfig(config);
this._releaseElement = KTDom.getElement(this._getOption('release') as string); this._releaseElement = KTDom.getElement(this._getOption('release') as string);
this._activateElement = KTDom.getElement(this._getOption('activate') as string);
this._wrapperElement = this._element.closest('[data-sticky-wrapper]'); this._wrapperElement = this._element.closest('[data-sticky-wrapper]');
this._attributeRoot = `data-sticky-${this._getOption('name')}`; this._attributeRoot = `data-sticky-${this._getOption('name')}`;
this._eventTriggerState = true; this._eventTriggerState = true;
@ -68,21 +70,20 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
protected _process(): void { protected _process(): void {
const reverse = this._getOption('reverse'); const reverse = this._getOption('reverse');
const activateOffset = this._getActivateOffset(); const offset = this._getOffset();
const releaseOffset = this._getReleaseOffset();
if (activateOffset < 0) { if (offset < 0) {
this._disable(); this._disable();
return; return;
} }
const st = KTDom.getScrollTop(); const st = KTDom.getScrollTop();
const proceed = (!this._releaseElement || releaseOffset > st); const release = (this._releaseElement && KTDom.isPartiallyInViewport(this._releaseElement));
// Release on reverse scroll mode // Release on reverse scroll mode
if (reverse === true) { if (reverse === true) {
// Forward scroll mode // Forward scroll mode
if (st > activateOffset && proceed) { if (st > offset && !release) {
if (document.body.hasAttribute(this._attributeRoot) === false) { if (document.body.hasAttribute(this._attributeRoot) === false) {
if (this._enable() === false) { if (this._enable() === false) {
return; return;
@ -101,6 +102,9 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
} else { } else {
if (document.body.hasAttribute(this._attributeRoot) === true) { if (document.body.hasAttribute(this._attributeRoot) === true) {
this._disable(); this._disable();
if (release) {
this._element.classList.add('release');
}
document.body.removeAttribute(this._attributeRoot); document.body.removeAttribute(this._attributeRoot);
} }
@ -116,7 +120,7 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
// Classic scroll mode // Classic scroll mode
} else { } else {
// Forward scroll mode // Forward scroll mode
if (st > activateOffset && proceed) { if (st > offset && !release) {
if (document.body.hasAttribute(this._attributeRoot) === false) { if (document.body.hasAttribute(this._attributeRoot) === false) {
if (this._enable() === false) { if (this._enable() === false) {
return; return;
@ -135,6 +139,9 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
} else { // back scroll mode } else { // back scroll mode
if (document.body.hasAttribute(this._attributeRoot) === true) { if (document.body.hasAttribute(this._attributeRoot) === true) {
this._disable(); this._disable();
if (release) {
this._element.classList.add('release');
}
document.body.removeAttribute(this._attributeRoot); document.body.removeAttribute(this._attributeRoot);
} }
@ -148,7 +155,7 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
} }
} }
protected _getActivateOffset(): number { protected _getOffset(): number {
let offset = parseInt(this._getOption('offset') as string); let offset = parseInt(this._getOption('offset') as string);
const activateElement = KTDom.getElement(this._getOption('activate') as string); const activateElement = KTDom.getElement(this._getOption('activate') as string);
@ -159,16 +166,6 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
return offset; return offset;
} }
protected _getReleaseOffset(): number {
let offset = parseInt(this._getOption('offset') as string);
if (this._releaseElement && this._releaseElement.offsetTop) {
offset = Math.abs(offset - this._releaseElement.offsetTop);
}
return offset;
}
protected _enable(): boolean { protected _enable(): boolean {
if (!this._element) return false; if (!this._element) return false;
@ -235,6 +232,7 @@ export class KTSticky extends KTComponent implements KTStickyInterface {
} }
this._element.classList.add('active'); this._element.classList.add('active');
this._element.classList.remove('release');
return true; return true;
} }

5
resources/metronic/core/components/toggle-password/toggle-password.ts
View File

@ -24,7 +24,7 @@ export class KTTogglePassword extends KTComponent implements KTTogglePasswordInt
this._buildConfig(config); this._buildConfig(config);
this._triggerElement = this._element.querySelector('[data-toggle-password-trigger]'); this._triggerElement = this._element.querySelector('[data-toggle-password-trigger]');
this._inputElement = this._element.querySelector('input[type="password"]'); this._inputElement = this._element.querySelector('input');
if (!this._triggerElement || !this._inputElement) { if (!this._triggerElement || !this._inputElement) {
return; return;
@ -36,12 +36,11 @@ export class KTTogglePassword extends KTComponent implements KTTogglePasswordInt
protected _handlers(): void { protected _handlers(): void {
if (!this._element) return; if (!this._element) return;
this._triggerElement.addEventListener('click', () => { this._triggerElement.addEventListener('click', (e: Event) => {
this._toggle(); this._toggle();
}); });
this._inputElement.addEventListener('input', () => { this._inputElement.addEventListener('input', () => {
this._update(); this._update();
}); });
} }

2
resources/metronic/core/components/toggle/toggle.ts
View File

@ -131,7 +131,7 @@ export class KTToggle extends KTComponent implements KTToggleInterface {
} }
public static createInstances(): void { public static createInstances(): void {
const elements = document.querySelectorAll('[data-toggle]:not([data-toggle="false"]'); const elements = document.querySelectorAll('[data-toggle]:not([data-toggle="false"])');
elements.forEach((element) => { elements.forEach((element) => {
new KTToggle(element as HTMLElement); new KTToggle(element as HTMLElement);
}); });

2
resources/metronic/core/components/tooltip/tooltip.ts
View File

@ -286,7 +286,7 @@ export class KTTooltip extends KTComponent implements KTTooltipInterface {
} }
public static createInstances(): void { public static createInstances(): void {
document.querySelectorAll('[data-tooltip]:not([data-tooltip="false"]').forEach((element) => { document.querySelectorAll('[data-tooltip]:not([data-tooltip="false"])').forEach((element) => {
new KTTooltip(element as HTMLElement); new KTTooltip(element as HTMLElement);
}); });
} }

241
resources/metronic/core/index.spa.ts
View File

@ -1,130 +1,135 @@
/* /*
* Index * Metronic
* @version: 1.0.0
* @author: Keenthemes * @author: Keenthemes
* Copyright 2024 Keenthemes * Copyright 2024 Keenthemes
*/ */
import KTUtils from './helpers/utils';
import KTDom from './helpers/dom'; import KTDom from './helpers/dom';
import KTUtils from './helpers/utils';
import KTEventHandler from './helpers/event-handler'; import KTEventHandler from './helpers/event-handler';
import {KTMenu} from './components/menu'; import { KTMenu } from './components/menu';
import {KTDropdown} from './components/dropdown'; import { KTDropdown } from './components/dropdown';
import {KTModal} from './components/modal'; import { KTModal } from './components/modal';
import {KTDrawer} from './components/drawer'; import { KTDrawer } from './components/drawer';
import {KTCollapse} from './components/collapse'; import { KTCollapse } from './components/collapse';
import {KTDismiss} from './components/dismiss'; import { KTDismiss } from './components/dismiss';
import {KTTabs} from './components/tabs'; import { KTTabs } from './components/tabs';
import {KTAccordion} from './components/accordion'; import { KTAccordion } from './components/accordion';
import {KTScrollspy} from './components/scrollspy'; import { KTScrollspy } from './components/scrollspy';
import {KTScrollable} from './components/scrollable'; import { KTScrollable } from './components/scrollable';
import {KTScrollto} from './components/scrollto'; import { KTScrollto } from './components/scrollto';
import {KTSticky} from './components/sticky'; import { KTSticky } from './components/sticky';
import {KTReparent} from './components/reparent'; import { KTReparent } from './components/reparent';
import {KTToggle} from './components/toggle'; import { KTToggle } from './components/toggle';
import {KTTooltip} from './components/tooltip'; import { KTTooltip } from './components/tooltip';
import {KTStepper} from './components/stepper'; import { KTStepper } from './components/stepper';
import {KTTheme} from './components/theme'; import { KTTheme } from './components/theme';
import {KTImageInput} from './components/image-input'; import { KTImageInput } from './components/image-input';
import {KTTogglePassword} from './components/toggle-password'; import { KTTogglePassword } from './components/toggle-password';
import {KTDataTable} from './components/datatable'; import { KTDataTable } from './components/datatable';
export {default as KTUtils} from './helpers/utils'; export { KTMenu } from './components/menu';
export {default as KTDom} from './helpers/dom'; export { KTDropdown } from './components/dropdown';
export {default as KTEventHandler} from './helpers/event-handler'; export { KTModal } from './components/modal';
export {KTMenu} from './components/menu'; export { KTDrawer } from './components/drawer';
export {KTDropdown} from './components/dropdown'; export { KTCollapse } from './components/collapse';
export {KTModal} from './components/modal'; export { KTDismiss } from './components/dismiss';
export {KTDrawer} from './components/drawer'; export { KTTabs } from './components/tabs';
export {KTCollapse} from './components/collapse'; export { KTAccordion } from './components/accordion';
export {KTDismiss} from './components/dismiss'; export { KTScrollspy } from './components/scrollspy';
export {KTTabs} from './components/tabs'; export { KTScrollable } from './components/scrollable';
export {KTAccordion} from './components/accordion'; export { KTScrollto } from './components/scrollto';
export {KTScrollspy} from './components/scrollspy'; export { KTSticky } from './components/sticky';
export {KTScrollable} from './components/scrollable'; export { KTReparent } from './components/reparent';
export {KTScrollto} from './components/scrollto'; export { KTToggle } from './components/toggle';
export {KTSticky} from './components/sticky'; export { KTTooltip } from './components/tooltip';
export {KTReparent} from './components/reparent'; export { KTStepper } from './components/stepper';
export {KTToggle} from './components/toggle' export { KTTheme } from './components/theme';
export {KTTooltip} from './components/tooltip'; export { KTImageInput } from './components/image-input';
export {KTStepper} from './components/stepper'; export { KTTogglePassword } from './components/toggle-password';
export {KTTheme} from './components/theme'; export { KTDataTable } from './components/datatable';
export {KTImageInput} from './components/image-input';
export {KTTogglePassword} from './components/toggle-password';
export {KTDataTable} from './components/datatable';
declare let globalThis: {
KTUtils: typeof KTUtils,
KTDom: typeof KTDom,
KTEventHandler: typeof KTEventHandler;
KTMenu: typeof KTMenu;
KTDropdown: typeof KTDropdown;
KTModal: typeof KTModal;
KTDrawer: typeof KTDrawer;
KTCollapse: typeof KTCollapse;
KTDismiss: typeof KTDismiss;
KTTabs: typeof KTTabs;
KTAccordion: typeof KTAccordion;
KTScrollspy: typeof KTScrollspy;
KTScrollable: typeof KTScrollable;
KTScrollto: typeof KTScrollto;
KTSticky: typeof KTSticky;
KTReparent: typeof KTReparent;
KTToggle: typeof KTToggle;
KTTooltip: typeof KTTooltip;
KTStepper: typeof KTStepper;
KTTheme: typeof KTTheme;
KTImageInput: typeof KTImageInput;
KTTogglePassword: typeof KTTogglePassword;
};
globalThis.KTUtils = KTUtils;
globalThis.KTDom = KTDom;
globalThis.KTEventHandler = KTEventHandler;
globalThis.KTMenu = KTMenu;
globalThis.KTDropdown = KTDropdown;
globalThis.KTModal = KTModal;
globalThis.KTDrawer = KTDrawer;
globalThis.KTCollapse = KTCollapse;
globalThis.KTDismiss = KTDismiss;
globalThis.KTTabs = KTTabs;
globalThis.KTAccordion = KTAccordion;
globalThis.KTScrollspy = KTScrollspy;
globalThis.KTScrollable = KTScrollable;
globalThis.KTScrollto = KTScrollto;
globalThis.KTSticky = KTSticky;
globalThis.KTReparent = KTReparent;
globalThis.KTToggle = KTToggle;
globalThis.KTTooltip = KTTooltip;
globalThis.KTStepper = KTStepper;
globalThis.KTTheme = KTTheme;
globalThis.KTImageInput = KTImageInput;
globalThis.KTTogglePassword = KTTogglePassword;
const KTComponents = { const KTComponents = {
init(): void { init(): void {
KTMenu.init(); KTMenu.init();
KTDropdown.init(); KTDropdown.init();
KTModal.init(); KTModal.init();
KTDrawer.init(); KTDrawer.init();
KTCollapse.init(); KTCollapse.init();
KTDismiss.init(); KTDismiss.init();
KTTabs.init(); KTTabs.init();
KTAccordion.init(); KTAccordion.init();
KTScrollspy.init(); KTScrollspy.init();
KTScrollable.init(); KTScrollable.init();
KTScrollto.init(); KTScrollto.init();
KTSticky.init(); KTSticky.init();
KTReparent.init(); KTReparent.init();
KTToggle.init(); KTToggle.init();
KTTooltip.init(); KTTooltip.init();
KTStepper.init(); KTStepper.init();
KTTheme.init(); KTTheme.init();
KTImageInput.init(); KTImageInput.init();
KTTogglePassword.init(); KTTogglePassword.init();
KTDataTable.init(); KTDataTable.init();
} }
}; };
export default KTComponents; declare global {
interface Window {
KTUtils: typeof KTUtils;
KTDom: typeof KTDom;
KTEventHandler: typeof KTEventHandler;
KTMenu: typeof KTMenu;
KTDropdown: typeof KTDropdown;
KTModal: typeof KTModal;
KTDrawer: typeof KTDrawer;
KTCollapse: typeof KTCollapse;
KTDismiss: typeof KTDismiss;
KTTabs: typeof KTTabs;
KTAccordion: typeof KTAccordion;
KTScrollspy: typeof KTScrollspy;
KTScrollable: typeof KTScrollable;
KTScrollto: typeof KTScrollto;
KTSticky: typeof KTSticky;
KTReparent: typeof KTReparent;
KTToggle: typeof KTToggle;
KTTooltip: typeof KTTooltip;
KTStepper: typeof KTStepper;
KTTheme: typeof KTTheme;
KTImageInput: typeof KTImageInput;
KTTogglePassword: typeof KTTogglePassword;
KTDataTable: typeof KTDataTable;
KTComponents: typeof KTComponents;
}
}
window.KTUtils = KTUtils;
window.KTDom = KTDom;
window.KTEventHandler = KTEventHandler;
window.KTMenu = KTMenu;
window.KTDropdown = KTDropdown;
window.KTModal = KTModal;
window.KTDrawer = KTDrawer;
window.KTCollapse = KTCollapse;
window.KTDismiss = KTDismiss;
window.KTTabs = KTTabs;
window.KTAccordion = KTAccordion;
window.KTScrollspy = KTScrollspy;
window.KTScrollable = KTScrollable;
window.KTScrollto = KTScrollto;
window.KTSticky = KTSticky;
window.KTReparent = KTReparent;
window.KTToggle = KTToggle;
window.KTTooltip = KTTooltip;
window.KTStepper = KTStepper;
window.KTTheme = KTTheme;
window.KTImageInput = KTImageInput;
window.KTTogglePassword = KTTogglePassword;
window.KTDataTable = KTDataTable;
window.KTComponents = KTComponents;
export default KTComponents;
KTDom.ready(() => {
KTComponents.init();
});

104
resources/metronic/core/index.ts
View File

@ -1,10 +1,9 @@
/* /*
* Index * Metronic
* @version: 1.0.0
* @author: Keenthemes * @author: Keenthemes
* Copyright 2024 Keenthemes * Copyright 2024 Keenthemes
*/ */
import KTDom from './helpers/dom'; import KTDom from './helpers/dom';
import KTUtils from './helpers/utils'; import KTUtils from './helpers/utils';
import KTEventHandler from './helpers/event-handler'; import KTEventHandler from './helpers/event-handler';
@ -51,57 +50,57 @@ export { KTTogglePassword } from './components/toggle-password';
export { KTDataTable } from './components/datatable'; export { KTDataTable } from './components/datatable';
const KTComponents = { const KTComponents = {
init(): void { init(): void {
KTMenu.init(); KTMenu.init();
KTDropdown.init(); KTDropdown.init();
KTModal.init(); KTModal.init();
KTDrawer.init(); KTDrawer.init();
KTCollapse.init(); KTCollapse.init();
KTDismiss.init(); KTDismiss.init();
KTTabs.init(); KTTabs.init();
KTAccordion.init(); KTAccordion.init();
KTScrollspy.init(); KTScrollspy.init();
KTScrollable.init(); KTScrollable.init();
KTScrollto.init(); KTScrollto.init();
KTSticky.init(); KTSticky.init();
KTReparent.init(); KTReparent.init();
KTToggle.init(); KTToggle.init();
KTTooltip.init(); KTTooltip.init();
KTStepper.init(); KTStepper.init();
KTTheme.init(); KTTheme.init();
KTImageInput.init(); KTImageInput.init();
KTTogglePassword.init(); KTTogglePassword.init();
KTDataTable.init(); KTDataTable.init();
} }
}; };
declare global { declare global {
interface Window { interface Window {
KTUtils: typeof KTUtils; KTUtils: typeof KTUtils;
KTDom: typeof KTDom; KTDom: typeof KTDom;
KTEventHandler: typeof KTEventHandler; KTEventHandler: typeof KTEventHandler;
KTMenu: typeof KTMenu; KTMenu: typeof KTMenu;
KTDropdown: typeof KTDropdown; KTDropdown: typeof KTDropdown;
KTModal: typeof KTModal; KTModal: typeof KTModal;
KTDrawer: typeof KTDrawer; KTDrawer: typeof KTDrawer;
KTCollapse: typeof KTCollapse; KTCollapse: typeof KTCollapse;
KTDismiss: typeof KTDismiss; KTDismiss: typeof KTDismiss;
KTTabs: typeof KTTabs; KTTabs: typeof KTTabs;
KTAccordion: typeof KTAccordion; KTAccordion: typeof KTAccordion;
KTScrollspy: typeof KTScrollspy; KTScrollspy: typeof KTScrollspy;
KTScrollable: typeof KTScrollable; KTScrollable: typeof KTScrollable;
KTScrollto: typeof KTScrollto; KTScrollto: typeof KTScrollto;
KTSticky: typeof KTSticky; KTSticky: typeof KTSticky;
KTReparent: typeof KTReparent; KTReparent: typeof KTReparent;
KTToggle: typeof KTToggle; KTToggle: typeof KTToggle;
KTTooltip: typeof KTTooltip; KTTooltip: typeof KTTooltip;
KTStepper: typeof KTStepper; KTStepper: typeof KTStepper;
KTTheme: typeof KTTheme; KTTheme: typeof KTTheme;
KTImageInput: typeof KTImageInput; KTImageInput: typeof KTImageInput;
KTTogglePassword: typeof KTTogglePassword; KTTogglePassword: typeof KTTogglePassword;
KTDataTable: typeof KTDataTable; KTDataTable: typeof KTDataTable;
KTComponents: typeof KTComponents; KTComponents: typeof KTComponents;
} }
} }
window.KTUtils = KTUtils; window.KTUtils = KTUtils;
@ -132,6 +131,5 @@ window.KTComponents = KTComponents;
export default KTComponents; export default KTComponents;
KTDom.ready(() => { KTDom.ready(() => {
KTComponents.init(); KTComponents.init();
}); });

1
resources/metronic/core/plugins/components/accordion.js
View File

@ -11,6 +11,7 @@ export default plugin(({addComponents}) => {
'display': 'flex', 'display': 'flex',
'flex-grow': '1', 'flex-grow': '1',
'align-items': 'center', 'align-items': 'center',
'text-align': 'start',
'justify-content': 'space-between', 'justify-content': 'space-between',
}, },
'.accordion-content': { '.accordion-content': {

1
resources/metronic/core/plugins/components/btn.js
View File

@ -209,7 +209,6 @@ export default plugin(({addComponents, theme}) => {
'padding-left': '0', 'padding-left': '0',
'padding-right': '0', 'padding-right': '0',
'border-radius': '0', 'border-radius': '0',
'font-weight': theme('fontWeight.semibold'),
'background-color': 'transparent', 'background-color': 'transparent',
'border-bottom': '1px dashed var(--tw-primary)', 'border-bottom': '1px dashed var(--tw-primary)',
'&:hover, &:focus, &:active, &.active' : { '&:hover, &:focus, &:active, &.active' : {

3
resources/metronic/core/plugins/components/checkbox.js
View File

@ -10,6 +10,9 @@ export default plugin(({addComponents, theme}) => {
'appearance': 'none', 'appearance': 'none',
'box-shadow': 'none', 'box-shadow': 'none',
'background-color': 'var(--tw-light-light)', 'background-color': 'var(--tw-light-light)',
'.dark &': {
'background-color': 'var(--tw-coal-500)',
},
'border-radius': theme('custom.components.checkbox.DEFAULT.borderRadius'), 'border-radius': theme('custom.components.checkbox.DEFAULT.borderRadius'),
'height': theme('custom.components.checkbox.DEFAULT.size'), 'height': theme('custom.components.checkbox.DEFAULT.size'),
'width': theme('custom.components.checkbox.DEFAULT.size'), 'width': theme('custom.components.checkbox.DEFAULT.size'),

2
resources/metronic/core/plugins/components/container.js
View File

@ -6,6 +6,7 @@ export default plugin(({addComponents, theme}) => {
addComponents({ addComponents({
'.container-fixed': { '.container-fixed': {
'flex-grow': '1', 'flex-grow': '1',
'width': '100%',
'padding-left': theme('custom.components.container.fixed.px.DEFAULT'), 'padding-left': theme('custom.components.container.fixed.px.DEFAULT'),
'padding-right': theme('custom.components.container.fixed.px.DEFAULT') 'padding-right': theme('custom.components.container.fixed.px.DEFAULT')
}, },
@ -23,6 +24,7 @@ export default plugin(({addComponents, theme}) => {
// Fluid // Fluid
addComponents({ addComponents({
'.container-fluid': { '.container-fluid': {
'width': '100%',
'flex-grow': '1', 'flex-grow': '1',
'padding-left': theme('custom.components.container.fluid.px.DEFAULT'), 'padding-left': theme('custom.components.container.fluid.px.DEFAULT'),
'padding-right': theme('custom.components.container.fluid.px.DEFAULT') 'padding-right': theme('custom.components.container.fluid.px.DEFAULT')

3
resources/metronic/core/plugins/components/radio.js
View File

@ -10,6 +10,9 @@ export default plugin(({addComponents, theme}) => {
'appearance': 'none', 'appearance': 'none',
'box-shadow': 'none', 'box-shadow': 'none',
'background-color': 'var(--tw-light-light)', 'background-color': 'var(--tw-light-light)',
'.dark &': {
'background-color': 'var(--tw-coal-500)',
},
'border-radius': '50%', 'border-radius': '50%',
'height': theme('custom.components.radio.DEFAULT.size'), 'height': theme('custom.components.radio.DEFAULT.size'),
'width': theme('custom.components.radio.DEFAULT.size'), 'width': theme('custom.components.radio.DEFAULT.size'),

78
resources/metronic/core/plugins/plugin.js
View File

@ -27,13 +27,19 @@ export default plugin(({config, addBase, addComponents, addVariant, e}) => {
'flex-grow': '1', 'flex-grow': '1',
'line-height': '1', 'line-height': '1',
}, },
'.menu-toggle': {
'display': 'flex',
'align-items': 'center',
'flex-grow': '1',
'line-height': '1',
},
'.menu-title': { '.menu-title': {
'display': 'flex', 'display': 'flex',
'align-items': 'center', 'align-items': 'center',
'line-height': '1', 'line-height': '1',
'flex-grow': '1', 'flex-grow': '1',
}, },
'.menu-icon, .menu-toggle, .menu-bullet, .menu-badge, .menu-arrow': { '.menu-icon, .menu-bullet, .menu-badge, .menu-arrow': {
'display': 'flex', 'display': 'flex',
'align-items': 'center', 'align-items': 'center',
'flex-shrink': '0', 'flex-shrink': '0',
@ -85,6 +91,16 @@ export default plugin(({config, addBase, addComponents, addVariant, e}) => {
modifySelectors(({className}) => { modifySelectors(({className}) => {
return `.menu-item.active > .menu-label .${e(`menu-item-active${separator}${className}`)}`; return `.menu-item.active > .menu-label .${e(`menu-item-active${separator}${className}`)}`;
}); });
},
({modifySelectors, separator}) => {
modifySelectors(({className}) => {
return `.menu-item.active > .menu-toggle.${e(`menu-item-active${separator}${className}`)}`;
});
},
({modifySelectors, separator}) => {
modifySelectors(({className}) => {
return `.menu-item.active > .menu-toggle .${e(`menu-item-active${separator}${className}`)}`;
});
} }
]); ]);
@ -113,6 +129,16 @@ export default plugin(({config, addBase, addComponents, addVariant, e}) => {
modifySelectors(({className}) => { modifySelectors(({className}) => {
return `.menu-item.here > .menu-label .${e(`menu-item-here${separator}${className}`)}`; return `.menu-item.here > .menu-label .${e(`menu-item-here${separator}${className}`)}`;
}); });
},
({modifySelectors, separator}) => {
modifySelectors(({className}) => {
return `.menu-item.here > .menu-toggle.${e(`menu-item-here${separator}${className}`)}`;
});
},
({modifySelectors, separator}) => {
modifySelectors(({className}) => {
return `.menu-item.here > .menu-toggle .${e(`menu-item-here${separator}${className}`)}`;
});
} }
]); ]);
@ -141,6 +167,54 @@ export default plugin(({config, addBase, addComponents, addVariant, e}) => {
modifySelectors(({className}) => { modifySelectors(({className}) => {
return `.menu-item.show > .menu-label .${e(`menu-item-show${separator}${className}`)}`; return `.menu-item.show > .menu-label .${e(`menu-item-show${separator}${className}`)}`;
}); });
},
({modifySelectors, separator}) => {
modifySelectors(({className}) => {
return `.menu-item.show > .menu-toggle.${e(`menu-item-show${separator}${className}`)}`;
});
},
({modifySelectors, separator}) => {
modifySelectors(({className}) => {
return `.menu-item.show > .menu-toggle .${e(`menu-item-show${separator}${className}`)}`;
});
}
]);
addVariant('menu-item-disabled', [
({modifySelectors, separator}) => {
modifySelectors(({className}) => {
return `.menu-item.disabled.${e(`menu-item-disabled${separator}${className}`)}`;
});
},
({modifySelectors, separator}) => {
modifySelectors(({className}) => {
return `.menu-item.disabled > .menu-link.${e(`menu-item-disabled${separator}${className}`)}`;
});
},
({modifySelectors, separator}) => {
modifySelectors(({className}) => {
return `.menu-item.disabled > .menu-link .${e(`menu-item-disabled${separator}${className}`)}`;
});
},
({modifySelectors, separator}) => {
modifySelectors(({className}) => {
return `.menu-item.disabled > .menu-label.${e(`menu-item-disabled${separator}${className}`)}`;
});
},
({modifySelectors, separator}) => {
modifySelectors(({className}) => {
return `.menu-item.disabled > .menu-label .${e(`menu-item-disabled${separator}${className}`)}`;
});
},
({modifySelectors, separator}) => {
modifySelectors(({className}) => {
return `.menu-item.disabled > .menu-toggle.${e(`menu-item-disabled${separator}${className}`)}`;
});
},
({modifySelectors, separator}) => {
modifySelectors(({className}) => {
return `.menu-item.disabled > .menu-toggle .${e(`menu-item-disabled${separator}${className}`)}`;
});
} }
]); ]);
@ -168,7 +242,7 @@ export default plugin(({config, addBase, addComponents, addVariant, e}) => {
return `.menu-link:focus .${e(`menu-link-focus${separator}${className}`)}`; return `.menu-link:focus .${e(`menu-link-focus${separator}${className}`)}`;
}); });
}, },
]); ]);
// DataTable // DataTable
addVariant('datatable-loading', [ addVariant('datatable-loading', [

176
resources/metronic/css/base.css
View File

@ -1,126 +1,126 @@
/* Variables */ /* Variables */
.metronic { .metronic {
--tw-sidebar-transition-duration: 0.3s; --tw-sidebar-transition-duration: 0.3s;
--tw-sidebar-transition-timing: ease; --tw-sidebar-transition-timing: ease;
--tw-sidebar-width: theme('custom.layouts.metronic.sidebar.width.desktop'); --tw-sidebar-width: theme('custom.layouts.metronic.sidebar.width.desktop');
--tw-sidebar-defualt-width: theme('custom.layouts.metronic.sidebar.width.desktop'); --tw-sidebar-defualt-width: theme('custom.layouts.metronic.sidebar.width.desktop');
--tw-header-height: theme('custom.layouts.metronic.header.height.desktop'); --tw-header-height: theme('custom.layouts.metronic.header.height.desktop');
} }
@media (max-width: theme('screens.lg')) { @media (max-width: theme('screens.lg')) {
.metronic { .metronic {
--tw-sidebar-width: theme('custom.layouts.metronic.sidebar.width.mobile'); --tw-sidebar-width: theme('custom.layouts.metronic.sidebar.width.mobile');
--tw-header-height: theme('custom.layouts.metronic.header.height.mobile'); --tw-header-height: theme('custom.layouts.metronic.header.height.mobile');
} }
} }
/* Base */ /* Base */
.metronic .header { .metronic .header {
height: var(--tw-header-height); height: var(--tw-header-height);
} }
.metronic .sidebar { .metronic .sidebar {
width: var(--tw-sidebar-width); width: var(--tw-sidebar-width);
} }
.metronic.header-fixed .wrapper { .metronic.header-fixed .wrapper {
padding-top: var(--tw-header-height); padding-top: var(--tw-header-height);
} }
/* Desktop mode */ /* Desktop mode */
@media (min-width: theme('screens.lg')) { @media (min-width: theme('screens.lg')) {
.metronic .sidebar { .metronic .sidebar {
width: var(--tw-sidebar-width); width: var(--tw-sidebar-width);
transition: width var(--tw-sidebar-transition-duration) var(--tw-sidebar-transition-timing); transition: width var(--tw-sidebar-transition-duration) var(--tw-sidebar-transition-timing);
} }
.metronic .sidebar .sidebar-header { .metronic .sidebar .sidebar-header {
height: var(--tw-header-height); height: var(--tw-header-height);
} }
.metronic .sidebar .sidebar-wrapper { .metronic .sidebar .sidebar-wrapper {
width: var(--tw-sidebar-defualt-width); width: var(--tw-sidebar-defualt-width);
} }
.metronic .sidebar .sidebar-logo { .metronic .sidebar .sidebar-logo {
width: var(--tw-sidebar-defualt-width); width: var(--tw-sidebar-defualt-width);
} }
.metronic .sidebar .small-logo { .metronic .sidebar .small-logo {
display: none; display: none;
} }
.metronic.sidebar-fixed .wrapper { .metronic.sidebar-fixed .wrapper {
padding-left: var(--tw-sidebar-width); padding-left: var(--tw-sidebar-width);
transition: padding-left var(--tw-sidebar-transition-duration) var(--tw-sidebar-transition-timing); transition: padding-left var(--tw-sidebar-transition-duration) var(--tw-sidebar-transition-timing);
} }
.metronic.sidebar-fixed.header-fixed .header { .metronic.sidebar-fixed.header-fixed .header {
left: var(--tw-sidebar-width); left: var(--tw-sidebar-width);
transition: left var(--tw-sidebar-transition-duration) var(--tw-sidebar-transition-timing); transition: left var(--tw-sidebar-transition-duration) var(--tw-sidebar-transition-timing);
} }
.metronic.sidebar-fixed.header-fixed .wrapper { .metronic.sidebar-fixed.header-fixed .wrapper {
padding-top: var(--tw-header-height); padding-top: var(--tw-header-height);
} }
.metronic.sidebar-collapse { .metronic.sidebar-collapse {
--tw-sidebar-width: theme('custom.layouts.metronic.sidebar.width.desktopCollapse'); --tw-sidebar-width: theme('custom.layouts.metronic.sidebar.width.desktopCollapse');
} }
.metronic.sidebar-collapse .sidebar { .metronic.sidebar-collapse .sidebar {
transition: width var(--tw-sidebar-transition-duration) var(--tw-sidebar-transition-timing); transition: width var(--tw-sidebar-transition-duration) var(--tw-sidebar-transition-timing);
} }
.metronic.sidebar-collapse .sidebar.animating { .metronic.sidebar-collapse .sidebar.animating {
pointer-events: none; pointer-events: none;
} }
.metronic.sidebar-collapse .sidebar:hover:not(.animating) { .metronic.sidebar-collapse .sidebar:hover:not(.animating) {
width: var(--tw-sidebar-defualt-width); width: var(--tw-sidebar-defualt-width);
transition: width var(--tw-sidebar-transition-duration) var(--tw-sidebar-transition-timing); transition: width var(--tw-sidebar-transition-duration) var(--tw-sidebar-transition-timing);
} }
.metronic.sidebar-collapse .sidebar:not(:hover) .default-logo { .metronic.sidebar-collapse .sidebar:not(:hover) .default-logo {
display: none; display: none;
} }
.metronic.sidebar-collapse .sidebar:not(:hover) .small-logo { .metronic.sidebar-collapse .sidebar:not(:hover) .small-logo {
display: flex; display: flex;
} }
.metronic.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-link .menu-title, .metronic.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-link .menu-title,
.metronic.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-link .menu-arrow, .metronic.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-link .menu-arrow,
.metronic.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-link .menu-badge, .metronic.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-link .menu-badge,
.metronic.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-label .menu-title, .metronic.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-label .menu-title,
.metronic.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-label .menu-arrow, .metronic.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-label .menu-arrow,
.metronic.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-label .menu-badge { .metronic.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-label .menu-badge {
display: none; display: none;
} }
.metronic.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-accordion { .metronic.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-accordion {
display: none; display: none;
} }
.metronic.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-heading { .metronic.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-heading {
visibility: hidden; visibility: hidden;
position: relative; position: relative;
} }
.metronic.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-heading::before { .metronic.sidebar-collapse .sidebar:not(:hover) .menu > .menu-item > .menu-heading::before {
content: "..."; content: "...";
color: currentColor; color: currentColor;
font-size: inherit; font-size: inherit;
position: absolute; position: absolute;
visibility: visible; visibility: visible;
display: inline-block; display: inline-block;
bottom: 50%; bottom: 50%;
left: 0; left: 0;
margin-left: 0.225rem; margin-left: 0.225rem;
transform: translateX(100%); transform: translateX(100%);
} }
.metronic.sidebar-collapse .sidebar .sidebar-content { .metronic.sidebar-collapse .sidebar .sidebar-content {
overflow: hidden; overflow: hidden;
} }
} }