mirror of
https://github.com/eitchtee/WYGIWYH.git
synced 2026-04-19 23:31:27 +02:00
feat: automated replacement
This commit is contained in:
Herculino Trotta
1378
frontend/package-lock.json
generated
Normal file
1378
frontend/package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
@@ -1,76 +1,44 @@
|
||||
{
|
||||
"name": "python-webpack-boilerplate",
|
||||
"name": "wygiwyh_frontend",
|
||||
"version": "1.0.1",
|
||||
"description": "Webpack boilerplate for Django & Flask",
|
||||
"description": "Frontend stuff",
|
||||
"scripts": {
|
||||
"build": "cross-env NODE_ENV=production webpack --config webpack/webpack.config.prod.cjs",
|
||||
"start": "webpack serve --config webpack/webpack.config.dev.cjs",
|
||||
"watch": "webpack --watch --config webpack/webpack.config.watch.cjs"
|
||||
},
|
||||
"repository": {
|
||||
"type": "git",
|
||||
"url": "https://github.com/AccordBox/python-webpack-boilerplate"
|
||||
"dev": "vite",
|
||||
"build": "vite build"
|
||||
},
|
||||
"keywords": [
|
||||
"webpack",
|
||||
"startkit",
|
||||
"frontend"
|
||||
],
|
||||
"author": "Michael Yin",
|
||||
"license": "MIT",
|
||||
"author": "Herculino Trotta",
|
||||
"license": "AGPL-3.0",
|
||||
"bugs": {
|
||||
"url": "https://github.com/AccordBox/python-webpack-boilerplate/issues"
|
||||
"url": "https://github.com/eitchtee/WYGIWYH"
|
||||
},
|
||||
"type": "module",
|
||||
"dependencies": {
|
||||
"@alpinejs/mask": "^3.14.9",
|
||||
"@babel/core": "^7.27.7",
|
||||
"@babel/eslint-parser": "^7.27.5",
|
||||
"@babel/plugin-proposal-class-properties": "^7.18.6",
|
||||
"@babel/plugin-syntax-dynamic-import": "^7.8.3",
|
||||
"@babel/preset-env": "^7.27.2",
|
||||
"@fortawesome/fontawesome-free": "^6.7.2",
|
||||
"@popperjs/core": "^2.11.8",
|
||||
"@tailwindcss/postcss": "^4.1.11",
|
||||
"@rollup/plugin-commonjs": "^28.0.9",
|
||||
"@tailwindcss/vite": "^4.1.13",
|
||||
"air-datepicker": "^3.6.0",
|
||||
"alpinejs": "^3.14.9",
|
||||
"autoprefixer": "^10.4.21",
|
||||
"autosize": "^6.0.1",
|
||||
"babel-loader": "^10.0.0",
|
||||
"bootstrap": "^5.3.7",
|
||||
"bootstrap": "^5.3.8",
|
||||
"chart.js": "^4.5.0",
|
||||
"chartjs-chart-sankey": "^0.14.0",
|
||||
"clean-webpack-plugin": "^4.0.0",
|
||||
"copy-webpack-plugin": "^13.0.0",
|
||||
"core-js": "^3.43.0",
|
||||
"cross-env": "^7.0.3",
|
||||
"css-loader": "^7.1.2",
|
||||
"eslint": "^9.30.0",
|
||||
"eslint-webpack-plugin": "^5.0.2",
|
||||
"globals": "^16.2.0",
|
||||
"daisyui": "^5.1.21",
|
||||
"htmx.org": "^2.0.6",
|
||||
"hyperscript.org": "^0.9.14",
|
||||
"jquery": "^3.7.1",
|
||||
"mathjs": "^14.5.2",
|
||||
"mini-css-extract-plugin": "^2.9.2",
|
||||
"mathjs": "^14.9.1",
|
||||
"postcss": "^8.5.6",
|
||||
"postcss-loader": "^8.1.1",
|
||||
"postcss-preset-env": "^10.2.4",
|
||||
"sass": "~1.89.2",
|
||||
"sass-loader": "^16.0.5",
|
||||
"select2-bootstrap-5-theme": "^1.3.0",
|
||||
"style-loader": "^4.0.0",
|
||||
"stylelint": "^16.21.0",
|
||||
"stylelint-config-standard-scss": "^15.0.1",
|
||||
"stylelint-webpack-plugin": "^5.0.1",
|
||||
"sass": "^1.93.2",
|
||||
"sweetalert2": "^11.22.2",
|
||||
"tailwindcss": "^4.1.11",
|
||||
"terser-webpack-plugin": "^5.3.14",
|
||||
"tailwindcss": "^4.1.13",
|
||||
"tom-select": "^2.4.3",
|
||||
"typer-dot-js": "^0.1.0",
|
||||
"webpack": "^5.99.9",
|
||||
"webpack-assets-manifest": "^6.2.1",
|
||||
"webpack-cli": "^6.0.1",
|
||||
"webpack-dev-server": "^5.2.2",
|
||||
"webpack-merge": "^6.0.1"
|
||||
"tw-bootstrap-grid": "^1.2.3",
|
||||
"vite": "7.1.11"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
module.exports = {
|
||||
plugins: {"@tailwindcss/postcss": {}},
|
||||
export default {
|
||||
plugins: {
|
||||
autoprefixer: {},
|
||||
},
|
||||
};
|
||||
|
||||
@@ -1,3 +1,3 @@
|
||||
import autosize from "autosize/dist/autosize";
|
||||
import * as autosize from "autosize/dist/autosize";
|
||||
|
||||
window.autosize = autosize;
|
||||
|
||||
@@ -1,21 +1,96 @@
|
||||
import AirDatepicker from 'air-datepicker';
|
||||
import {createPopper} from '@popperjs/core';
|
||||
|
||||
// --- Static Locale Imports ---
|
||||
// We import all locales statically to ensure Vite transforms them correctly.
|
||||
import localeAr from 'air-datepicker/locale/ar.js';
|
||||
import localeBg from 'air-datepicker/locale/bg.js';
|
||||
import localeCa from 'air-datepicker/locale/ca.js';
|
||||
import localeCs from 'air-datepicker/locale/cs.js';
|
||||
import localeDa from 'air-datepicker/locale/da.js';
|
||||
import localeDe from 'air-datepicker/locale/de.js';
|
||||
import localeEl from 'air-datepicker/locale/el.js';
|
||||
import localeEn from 'air-datepicker/locale/en.js';
|
||||
import localeEs from 'air-datepicker/locale/es.js';
|
||||
import localeEu from 'air-datepicker/locale/eu.js';
|
||||
import localeFi from 'air-datepicker/locale/fi.js';
|
||||
import localeFr from 'air-datepicker/locale/fr.js';
|
||||
import localeHr from 'air-datepicker/locale/hr.js';
|
||||
import localeHu from 'air-datepicker/locale/hu.js';
|
||||
import localeId from 'air-datepicker/locale/id.js';
|
||||
import localeIt from 'air-datepicker/locale/it.js';
|
||||
import localeJa from 'air-datepicker/locale/ja.js';
|
||||
import localeKo from 'air-datepicker/locale/ko.js';
|
||||
import localeNb from 'air-datepicker/locale/nb.js';
|
||||
import localeNl from 'air-datepicker/locale/nl.js';
|
||||
import localePl from 'air-datepicker/locale/pl.js';
|
||||
import localePtBr from 'air-datepicker/locale/pt-BR.js';
|
||||
import localePt from 'air-datepicker/locale/pt.js';
|
||||
import localeRo from 'air-datepicker/locale/ro.js';
|
||||
import localeRu from 'air-datepicker/locale/ru.js';
|
||||
import localeSi from 'air-datepicker/locale/si.js';
|
||||
import localeSk from 'air-datepicker/locale/sk.js';
|
||||
import localeSl from 'air-datepicker/locale/sl.js';
|
||||
import localeSv from 'air-datepicker/locale/sv.js';
|
||||
import localeTh from 'air-datepicker/locale/th.js';
|
||||
import localeTr from 'air-datepicker/locale/tr.js';
|
||||
import localeUk from 'air-datepicker/locale/uk.js';
|
||||
import localeZh from 'air-datepicker/locale/zh.js';
|
||||
|
||||
// Map language codes to their imported locale objects
|
||||
const allLocales = {
|
||||
'ar': localeAr,
|
||||
'bg': localeBg,
|
||||
'ca': localeCa,
|
||||
'cs': localeCs,
|
||||
'da': localeDa,
|
||||
'de': localeDe,
|
||||
'el': localeEl,
|
||||
'en': localeEn,
|
||||
'es': localeEs,
|
||||
'eu': localeEu,
|
||||
'fi': localeFi,
|
||||
'fr': localeFr,
|
||||
'hr': localeHr,
|
||||
'hu': localeHu,
|
||||
'id': localeId,
|
||||
'it': localeIt,
|
||||
'ja': localeJa,
|
||||
'ko': localeKo,
|
||||
'nb': localeNb,
|
||||
'nl': localeNl,
|
||||
'pl': localePl,
|
||||
'pt-BR': localePtBr,
|
||||
'pt': localePt,
|
||||
'ro': localeRo,
|
||||
'ru': localeRu,
|
||||
'si': localeSi,
|
||||
'sk': localeSk,
|
||||
'sl': localeSl,
|
||||
'sv': localeSv,
|
||||
'th': localeTh,
|
||||
'tr': localeTr,
|
||||
'uk': localeUk,
|
||||
'zh': localeZh
|
||||
};
|
||||
// --- End of Locale Imports ---
|
||||
|
||||
|
||||
/**
|
||||
* Dynamically imports a language file from the locale folder.
|
||||
*
|
||||
* @param {string} langCode - The two-letter language code (e.g., 'en', 'es').
|
||||
* @returns {Promise<object>} A promise that resolves with the default export of the language file.
|
||||
*/
|
||||
* Selects a pre-imported language file from the locale map.
|
||||
*
|
||||
* @param {string} langCode - The two-letter language code (e.g., 'en', 'es').
|
||||
* @returns {Promise<object>} A promise that resolves with the locale object.
|
||||
*/
|
||||
export const getLocale = async (langCode) => {
|
||||
try {
|
||||
const localeModule = await import(`air-datepicker/locale/${langCode}.js`);
|
||||
return localeModule.default;
|
||||
} catch (error) {
|
||||
console.warn(`Could not find locale for '${langCode}'. Defaulting to English.`);
|
||||
const englishModule = await import('air-datepicker/locale/en.js');
|
||||
return englishModule.default;
|
||||
const locale = allLocales[langCode];
|
||||
|
||||
if (locale) {
|
||||
return locale;
|
||||
}
|
||||
|
||||
console.warn(`Could not find locale for '${langCode}'. Defaulting to English.`);
|
||||
return allLocales['en']; // Default to English
|
||||
};
|
||||
|
||||
function isMobileDevice() {
|
||||
@@ -40,9 +115,7 @@ window.DatePicker = async function createDynamicDatePicker(element) {
|
||||
dp.setViewDate(date);
|
||||
}
|
||||
};
|
||||
|
||||
let isOnMobile = isMobile();
|
||||
|
||||
let baseOpts = {
|
||||
isMobile: isOnMobile,
|
||||
dateFormat: element.dataset.dateFormat,
|
||||
@@ -59,7 +132,6 @@ window.DatePicker = async function createDynamicDatePicker(element) {
|
||||
datepicker.$el.dispatchEvent(_event);
|
||||
}
|
||||
};
|
||||
|
||||
const positionConfig = !isOnMobile ? {
|
||||
position({$datepicker, $target, $pointer, done}) {
|
||||
let popper = createPopper($target, $datepicker, {
|
||||
@@ -84,24 +156,20 @@ window.DatePicker = async function createDynamicDatePicker(element) {
|
||||
options: {
|
||||
element: $pointer
|
||||
}
|
||||
}
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
return function completeHide() {
|
||||
popper.destroy();
|
||||
done();
|
||||
};
|
||||
}
|
||||
} : {};
|
||||
|
||||
let opts = {...baseOpts, ...positionConfig};
|
||||
|
||||
if (element.dataset.value) {
|
||||
opts["selectedDates"] = [element.dataset.value];
|
||||
opts["startDate"] = [element.dataset.value];
|
||||
}
|
||||
|
||||
return new AirDatepicker(element, opts);
|
||||
};
|
||||
|
||||
@@ -114,9 +182,7 @@ window.MonthYearPicker = async function createDynamicDatePicker(element) {
|
||||
dp.setViewDate(date);
|
||||
}
|
||||
};
|
||||
|
||||
let isOnMobile = isMobile();
|
||||
|
||||
let baseOpts = {
|
||||
isMobile: isOnMobile,
|
||||
view: 'months',
|
||||
@@ -133,7 +199,6 @@ window.MonthYearPicker = async function createDynamicDatePicker(element) {
|
||||
datepicker.$el.dispatchEvent(_event);
|
||||
}
|
||||
};
|
||||
|
||||
const positionConfig = !isOnMobile ? {
|
||||
position({$datepicker, $target, $pointer, done}) {
|
||||
let popper = createPopper($target, $datepicker, {
|
||||
@@ -161,16 +226,13 @@ window.MonthYearPicker = async function createDynamicDatePicker(element) {
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
return function completeHide() {
|
||||
popper.destroy();
|
||||
done();
|
||||
};
|
||||
}
|
||||
} : {};
|
||||
|
||||
let opts = {...baseOpts, ...positionConfig};
|
||||
|
||||
if (element.dataset.value) {
|
||||
opts["selectedDates"] = [new Date(element.dataset.value + "T00:00:00")];
|
||||
opts["startDate"] = [new Date(element.dataset.value + "T00:00:00")];
|
||||
@@ -187,9 +249,7 @@ window.YearPicker = async function createDynamicDatePicker(element) {
|
||||
dp.setViewDate(date);
|
||||
}
|
||||
};
|
||||
|
||||
let isOnMobile = isMobile();
|
||||
|
||||
let baseOpts = {
|
||||
isMobile: isOnMobile,
|
||||
view: 'years',
|
||||
@@ -206,7 +266,6 @@ window.YearPicker = async function createDynamicDatePicker(element) {
|
||||
datepicker.$el.dispatchEvent(_event);
|
||||
}
|
||||
};
|
||||
|
||||
const positionConfig = !isOnMobile ? {
|
||||
position({$datepicker, $target, $pointer, done}) {
|
||||
let popper = createPopper($target, $datepicker, {
|
||||
@@ -234,16 +293,13 @@ window.YearPicker = async function createDynamicDatePicker(element) {
|
||||
}
|
||||
]
|
||||
});
|
||||
|
||||
return function completeHide() {
|
||||
popper.destroy();
|
||||
done();
|
||||
};
|
||||
}
|
||||
} : {};
|
||||
|
||||
let opts = {...baseOpts, ...positionConfig};
|
||||
|
||||
if (element.dataset.value) {
|
||||
opts["selectedDates"] = [new Date(element.dataset.value + "T00:00:00")];
|
||||
opts["startDate"] = [new Date(element.dataset.value + "T00:00:00")];
|
||||
|
||||
@@ -1,3 +1,5 @@
|
||||
import 'tom-select/dist/css/tom-select.bootstrap5.min.css';
|
||||
|
||||
import TomSelect from "tom-select";
|
||||
import * as Popper from "@popperjs/core";
|
||||
|
||||
|
||||
@@ -1,2 +1,3 @@
|
||||
// Import our custom CSS
|
||||
import '../styles/style.scss';
|
||||
import './styles/style.scss';
|
||||
import './styles/tailwind.css';
|
||||
|
||||
@@ -102,7 +102,7 @@
|
||||
width: 40px;
|
||||
height: 40px;
|
||||
border: 4px solid #f3f3f3;
|
||||
border-top: 4px solid $primary;
|
||||
//border-top: 4px solid $primary;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite, fade-in 0.1s ease-in forwards;
|
||||
animation-delay: 200ms;
|
||||
|
||||
@@ -1,33 +1,28 @@
|
||||
@use "sass:map";
|
||||
@import "bootstrap/scss/functions";
|
||||
@import "variables";
|
||||
@import "bootstrap/scss/bootstrap-utilities";
|
||||
|
||||
// Import all of Bootstrap's CSS
|
||||
@import "bootstrap/scss/bootstrap";
|
||||
// @import "bootstrap/scss/bootstrap";
|
||||
@import "bootstrap/scss/offcanvas";
|
||||
// @import "bootstrap/scss/forms";
|
||||
@import "bootstrap/scss/transitions";
|
||||
@import "bootstrap/scss/list-group";
|
||||
@import "bootstrap/scss/tooltip";
|
||||
@import "bootstrap/scss/progress";
|
||||
@import "bootstrap/scss/nav";
|
||||
@import "bootstrap/scss/variables";
|
||||
@import "bootstrap/scss/variables-dark";
|
||||
|
||||
// @import "bootstrap/scss/"
|
||||
|
||||
.form-label {
|
||||
font-size: $font-size-base; // Fixes crispy-bootstrap5 legend labels being too big
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
$theme-colors: map.merge(
|
||||
$theme-colors,
|
||||
(
|
||||
"primary": $primary
|
||||
)
|
||||
);
|
||||
|
||||
@media all and (min-width: 992px) {
|
||||
.navbar .nav-item .dropdown-menu {
|
||||
display: none;
|
||||
margin-top: 0;
|
||||
}
|
||||
|
||||
.navbar .nav-item:hover .dropdown-menu {
|
||||
display: block;
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
$theme-colors: map.merge($theme-colors,
|
||||
("primary": $primary ));
|
||||
|
||||
.table .col-auto {
|
||||
width: 1%;
|
||||
@@ -42,7 +37,8 @@ $theme-colors: map.merge(
|
||||
--#{$prefix}offcanvas-width: min(95vw, 90vw) !important;
|
||||
}
|
||||
|
||||
.offcanvas-size-md { /* add Responsivenes to default offcanvas */
|
||||
.offcanvas-size-md {
|
||||
/* add Responsivenes to default offcanvas */
|
||||
--#{$prefix}offcanvas-width: min(95vw, 400px) !important;
|
||||
}
|
||||
|
||||
@@ -51,5 +47,5 @@ $theme-colors: map.merge(
|
||||
}
|
||||
|
||||
.dropdown-toggle.dropdown-toggle-no-icon::after {
|
||||
display:none;
|
||||
}
|
||||
display: none;
|
||||
}
|
||||
@@ -1,4 +1 @@
|
||||
@import "@fortawesome/fontawesome-free/css/fontawesome.min.css";
|
||||
@import "@fortawesome/fontawesome-free/css/solid.min.css";
|
||||
@import "@fortawesome/fontawesome-free/css/regular.min.css";
|
||||
@import "@fortawesome/fontawesome-free/css/brands.min.css";
|
||||
@use "@fortawesome/fontawesome-free/css/all.css";
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "variables";
|
||||
@use "variables";
|
||||
|
||||
/* custom scrollbar */
|
||||
::-webkit-scrollbar {
|
||||
@@ -6,16 +6,16 @@
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-track {
|
||||
background-color: $gray-800;
|
||||
//background-color: $gray-800;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb {
|
||||
background-color: $gray-600;
|
||||
//background-color: $gray-600;
|
||||
border-radius: 20px;
|
||||
border: 4px solid transparent;
|
||||
background-clip: content-box;
|
||||
}
|
||||
|
||||
::-webkit-scrollbar-thumb:hover {
|
||||
background-color: $primary;
|
||||
//background-color: $primary;
|
||||
}
|
||||
|
||||
@@ -1,56 +1,57 @@
|
||||
@import "tom-select/dist/css/tom-select.bootstrap5.min.css";
|
||||
@import "variables";
|
||||
|
||||
/* FIX BOOTSTRAP STYLING FOR TOM SELECT */
|
||||
.ts-dropdown,
|
||||
.ts-control,
|
||||
.ts-control input {
|
||||
color: var(--bs-body-color);
|
||||
}
|
||||
|
||||
/* stylelint-disable-next-line selector-class-pattern */
|
||||
.ts-wrapper.plugin-remove_button .item .remove {
|
||||
color: $red;
|
||||
}
|
||||
|
||||
/* stylelint-disable-next-line selector-class-pattern */
|
||||
.plugin-clear_button .clear-button {
|
||||
color: $red;
|
||||
right: 60px;
|
||||
}
|
||||
|
||||
.ts-wrapper.multi .ts-control > div.active {
|
||||
background: $primary;
|
||||
color: $body-color;
|
||||
border: 0 solid #0000;
|
||||
}
|
||||
|
||||
.focus .ts-control {
|
||||
color: $input-focus-color;
|
||||
background-color: $input-focus-bg;
|
||||
border-color: $input-focus-border-color;
|
||||
outline: 0;
|
||||
|
||||
@if $enable-shadows {
|
||||
@include box-shadow($input-box-shadow, $input-focus-box-shadow);
|
||||
} @else {
|
||||
// Avoid using mixin so we can pass custom focus shadow properly
|
||||
box-shadow: $input-focus-box-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
.focus.ts-wrapper {
|
||||
border-color: $form-select-focus-border-color;
|
||||
outline: 0;
|
||||
|
||||
@if $enable-shadows {
|
||||
@include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
|
||||
} @else {
|
||||
// Avoid using mixin so we can pass custom focus shadow properly
|
||||
box-shadow: $form-select-focus-box-shadow;
|
||||
}
|
||||
}
|
||||
|
||||
.ts-control > .clear-button {
|
||||
color: $red !important;
|
||||
}
|
||||
//@use "tom-select/dist/css/tom-select.default.min.css";
|
||||
//@use "tom-select/dist/css/tom-select.bootstrap5.min.css";
|
||||
//@use "variables";
|
||||
//
|
||||
///* FIX BOOTSTRAP STYLING FOR TOM SELECT */
|
||||
//.ts-dropdown,
|
||||
//.ts-control,
|
||||
//.ts-control input {
|
||||
// color: var(--bs-body-color);
|
||||
//}
|
||||
//
|
||||
///* stylelint-disable-next-line selector-class-pattern */
|
||||
////.ts-wrapper.plugin-remove_button .item .remove {
|
||||
//// color: $red;
|
||||
////}
|
||||
//
|
||||
///* stylelint-disable-next-line selector-class-pattern */
|
||||
////.plugin-clear_button .clear-button {
|
||||
//// color: $red;
|
||||
//// right: 60px;
|
||||
////}
|
||||
//
|
||||
//.ts-wrapper.multi .ts-control > div.active {
|
||||
// //background: $primary;
|
||||
// //color: $body-color;
|
||||
// border: 0 solid #0000;
|
||||
//}
|
||||
//
|
||||
//.focus .ts-control {
|
||||
// //color: $input-focus-color;
|
||||
// //background-color: $input-focus-bg;
|
||||
// //border-color: $input-focus-border-color;
|
||||
// outline: 0;
|
||||
//
|
||||
// @if $enable-shadows {
|
||||
// @include box-shadow($input-box-shadow, $input-focus-box-shadow);
|
||||
// } @else {
|
||||
// // Avoid using mixin so we can pass custom focus shadow properly
|
||||
// box-shadow: $input-focus-box-shadow;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//.focus.ts-wrapper {
|
||||
// border-color: $form-select-focus-border-color;
|
||||
// outline: 0;
|
||||
//
|
||||
// @if $enable-shadows {
|
||||
// @include box-shadow($form-select-box-shadow, $form-select-focus-box-shadow);
|
||||
// } @else {
|
||||
// // Avoid using mixin so we can pass custom focus shadow properly
|
||||
// box-shadow: $form-select-focus-box-shadow;
|
||||
// }
|
||||
//}
|
||||
//
|
||||
//.ts-control > .clear-button {
|
||||
// color: $red !important;
|
||||
//}
|
||||
|
||||
@@ -1,11 +1,10 @@
|
||||
@import "variables";
|
||||
@import "font-awesome";
|
||||
@import "bootstrap";
|
||||
@import "datepicker";
|
||||
@import "tom-select";
|
||||
@import "animations";
|
||||
@import "scrollbar";
|
||||
@import "./tailwind.css";
|
||||
@use "variables";
|
||||
@use "font-awesome";
|
||||
@use "bootstrap";
|
||||
@use "datepicker";
|
||||
@use "tom-select";
|
||||
@use "animations";
|
||||
@use "scrollbar";
|
||||
|
||||
.sticky-sidebar {
|
||||
position: sticky;
|
||||
@@ -21,17 +20,17 @@ select[multiple] {
|
||||
max-height: 50vh;
|
||||
}
|
||||
|
||||
.font-base {
|
||||
font-family: $font-family-base;
|
||||
}
|
||||
//.font-base {
|
||||
// font-family: bootstrap.$font-family-base;
|
||||
//}
|
||||
|
||||
::selection {
|
||||
color: $gray-800;
|
||||
background-color: $primary;
|
||||
color: variables.$gray-800;
|
||||
background-color: variables.$primary;
|
||||
}
|
||||
|
||||
.dotted-line {
|
||||
border-bottom: 2px dotted $gray-700;
|
||||
border-bottom: 2px dotted variables.$gray-700;
|
||||
margin: 0 5px;
|
||||
position: relative;
|
||||
}
|
||||
@@ -50,9 +49,9 @@ select[multiple] {
|
||||
padding: 0 8px !important;
|
||||
}
|
||||
|
||||
.transaction:has(input[type="checkbox"]:checked) > div > .transaction-item {
|
||||
background-color: $primary-bg-subtle-dark;
|
||||
}
|
||||
//.transaction:has(input[type="checkbox"]:checked) > div > .transaction-item {
|
||||
// background-color: bootstrap.$primary-bg-subtle-dark;
|
||||
//}
|
||||
|
||||
.offline {
|
||||
text-align: center;
|
||||
@@ -88,4 +87,4 @@ select[multiple] {
|
||||
|
||||
div:where(.swal2-container) {
|
||||
z-index: 1100 !important;
|
||||
}
|
||||
}
|
||||
@@ -1,16 +1,103 @@
|
||||
@import "tailwindcss" prefix(tw) source("../../../app/templates/");
|
||||
@custom-variant dark (&:where([data-bs-theme=dark], [data-bs-theme=dark] *));
|
||||
|
||||
@plugin "daisyui" {
|
||||
themes: dark --default, light;
|
||||
logs: true;
|
||||
}
|
||||
@plugin "tw-bootstrap-grid";
|
||||
|
||||
@plugin "daisyui/theme" {
|
||||
name: "light";
|
||||
default: false;
|
||||
prefersdark: false;
|
||||
color-scheme: "light";
|
||||
--color-base-100: oklch(100% 0 0);
|
||||
--color-base-200: oklch(98% 0 0);
|
||||
--color-base-300: oklch(95% 0 0);
|
||||
--color-base-content: oklch(21% 0.006 285.885);
|
||||
--color-primary: oklch(87% 0.169 91.605);
|
||||
--color-primary-content: oklch(41% 0.112 45.904);
|
||||
--color-secondary: oklch(44% 0.043 257.281);
|
||||
--color-secondary-content: oklch(98% 0.003 247.858);
|
||||
--color-accent: oklch(70% 0.01 56.259);
|
||||
--color-accent-content: oklch(14% 0.004 49.25);
|
||||
--color-neutral: oklch(14% 0.005 285.823);
|
||||
--color-neutral-content: oklch(92% 0.004 286.32);
|
||||
--color-info: oklch(74% 0.16 232.661);
|
||||
--color-info-content: oklch(29% 0.066 243.157);
|
||||
--color-success: oklch(76% 0.177 163.223);
|
||||
--color-success-content: oklch(37% 0.077 168.94);
|
||||
--color-warning: oklch(82% 0.189 84.429);
|
||||
--color-warning-content: oklch(41% 0.112 45.904);
|
||||
--color-error: oklch(71% 0.194 13.428);
|
||||
--color-error-content: oklch(27% 0.105 12.094);
|
||||
--radius-selector: 0.5rem;
|
||||
--radius-field: 0.5rem;
|
||||
--radius-box: 0.5rem;
|
||||
--size-selector: 0.25rem;
|
||||
--size-field: 0.25rem;
|
||||
--border: 1px;
|
||||
--depth: 0;
|
||||
--noise: 0;
|
||||
}
|
||||
|
||||
|
||||
@plugin "daisyui/theme" {
|
||||
name: "dark";
|
||||
default: true;
|
||||
prefersdark: true;
|
||||
color-scheme: "dark";
|
||||
--color-base-100: oklch(25.33% 0.016 252.42);
|
||||
--color-base-200: oklch(23.26% 0.014 253.1);
|
||||
--color-base-300: oklch(21.15% 0.012 254.09);
|
||||
--color-base-content: oklch(97.807% 0.029 256.847);
|
||||
--color-primary: oklch(87% 0.169 91.605);
|
||||
--color-primary-content: oklch(41% 0.112 45.904);
|
||||
--color-secondary: oklch(44% 0.043 257.281);
|
||||
--color-secondary-content: oklch(98% 0.003 247.858);
|
||||
--color-accent: oklch(70% 0.01 56.259);
|
||||
--color-accent-content: oklch(14% 0.004 49.25);
|
||||
--color-neutral: oklch(14% 0.005 285.823);
|
||||
--color-neutral-content: oklch(92% 0.004 286.32);
|
||||
--color-info: oklch(74% 0.16 232.661);
|
||||
--color-info-content: oklch(29% 0.066 243.157);
|
||||
--color-success: oklch(76% 0.177 163.223);
|
||||
--color-success-content: oklch(37% 0.077 168.94);
|
||||
--color-warning: oklch(82% 0.189 84.429);
|
||||
--color-warning-content: oklch(41% 0.112 45.904);
|
||||
--color-error: oklch(71% 0.194 13.428);
|
||||
--color-error-content: oklch(27% 0.105 12.094);
|
||||
--radius-selector: 0.5rem;
|
||||
--radius-field: 0.5rem;
|
||||
--radius-box: 0.5rem;
|
||||
--size-selector: 0.25rem;
|
||||
--size-field: 0.25rem;
|
||||
--border: 1px;
|
||||
--depth: 0;
|
||||
--noise: 0;
|
||||
}
|
||||
|
||||
|
||||
@custom-variant dark (&:where([data-bs-theme=dark], [data-bs-theme=dark] *), &:where([data-theme=dark], [data-theme=dark] *));
|
||||
@custom-variant hover (&:hover);
|
||||
|
||||
.sidebar-active {
|
||||
@apply tw:bg-gray-700 tw:text-white;
|
||||
|
||||
@layer utilities {
|
||||
.transaction:has(input[type="checkbox"]:checked) > div > .transaction-item {
|
||||
background-color: --alpha(var(--color-primary) / 15%);
|
||||
}
|
||||
}
|
||||
|
||||
.sidebar-item:not(.sidebar-active) {
|
||||
@apply tw:text-gray-300 tw:hover:text-white;
|
||||
}
|
||||
|
||||
@layer components {
|
||||
.sidebar-active {
|
||||
@apply tw:text-primary-content tw:bg-primary;
|
||||
}
|
||||
|
||||
.sidebar-item:not(.sidebar-active) {
|
||||
@apply tw:text-base-content/80 tw:hover:text-base-content;
|
||||
}
|
||||
|
||||
.sidebar {
|
||||
@apply tw:z-1020 tw:fixed tw:top-0 tw:start-0 tw:h-full tw:transition-all tw:duration-100;
|
||||
}
|
||||
|
||||
@@ -1,45 +1,63 @@
|
||||
import {resolve, dirname} from 'path';
|
||||
import {fileURLToPath} from 'url';
|
||||
import {defineConfig} from 'vite';
|
||||
import tailwindcss from '@tailwindcss/vite'
|
||||
import tailwindcss from '@tailwindcss/vite';
|
||||
// import commonjs from '@rollup/plugin-commonjs';
|
||||
// import * as path from "node:path";
|
||||
|
||||
// ESM-compatible equivalent of __dirname
|
||||
const __filename = fileURLToPath(import.meta.url);
|
||||
const __dirname = dirname(__filename);
|
||||
|
||||
const rollupInputs = {
|
||||
autosize: resolve(__dirname, 'src/autosize.js'),
|
||||
charts: resolve(__dirname, 'src/charts.js'),
|
||||
// datepicker: resolve(__dirname, 'src/datepicker.js'),
|
||||
bootstrap: resolve(__dirname, 'src/bootstrap.js'),
|
||||
htmx: resolve(__dirname, 'src/htmx.js'),
|
||||
select: resolve(__dirname, 'src/select.js'),
|
||||
style: resolve(__dirname, 'src/style.js'),
|
||||
sweetalert2: resolve(__dirname, 'src/sweetalert2.js'),
|
||||
};
|
||||
|
||||
|
||||
export default defineConfig({
|
||||
root: resolve(__dirname, 'src'),
|
||||
base: '/static/',
|
||||
|
||||
root: resolve(__dirname, 'src'),
|
||||
|
||||
plugins: [
|
||||
tailwindcss(),
|
||||
// commonjs()
|
||||
],
|
||||
|
||||
server: {
|
||||
host: 'localhost',
|
||||
host: '0.0.0.0',
|
||||
port: 5173,
|
||||
open: false,
|
||||
watch: {
|
||||
usePolling: true,
|
||||
disableGlobbing: false,
|
||||
},
|
||||
origin: 'http://localhost:5173'
|
||||
},
|
||||
|
||||
resolve: {
|
||||
extensions: ['.js', '.json', '.scss'],
|
||||
extensions: ['.js', '.json', '.scss', '.css'],
|
||||
},
|
||||
|
||||
optimizeDeps: {
|
||||
include: ['air-datepicker', 'autosize', 'javascript-natural-sort'],
|
||||
},
|
||||
|
||||
build: {
|
||||
outDir: resolve(__dirname, '../app/static/dist'),
|
||||
outDir: resolve(__dirname, 'build'),
|
||||
assetsDir: '',
|
||||
manifest: "manifest.json",
|
||||
manifest: 'manifest.json',
|
||||
emptyOutDir: true,
|
||||
target: 'es2015',
|
||||
rollupOptions: {
|
||||
input: {
|
||||
// Make the input path absolute for consistency
|
||||
main: resolve(__dirname, 'src/main.js'),
|
||||
},
|
||||
input: rollupInputs,
|
||||
output: {
|
||||
chunkFileNames: undefined,
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user