From b040f85d59b8a204dd11d733956561edb71c48aa Mon Sep 17 00:00:00 2001 From: Sami Mokaddem Date: Thu, 25 Jul 2024 11:10:00 +0200 Subject: [PATCH] chg: [front] Removed daisyUI dependency --- package-lock.json | 47 +-- package.json | 3 +- src/assets/main.css | 10 +- src/assets/styled-components/button.css | 83 +++++ src/assets/styled-components/modal.css | 0 src/assets/styled-components/toggle.css | 78 +++++ src/assets/styled-components/transitions.css | 27 ++ src/components/TheAdminPanel.vue | 326 +++++++++---------- src/components/TheLiveLogs.vue | 5 +- src/components/TheThemeButton.vue | 46 ++- src/components/elements/Loading.vue | 7 + src/components/elements/Modal.vue | 72 ++++ src/components/elements/ToggleSwitch.vue | 58 ++++ src/main.js | 7 + src/router.js | 34 ++ src/utils.js | 17 + tailwind.config.js | 11 - 17 files changed, 597 insertions(+), 234 deletions(-) create mode 100644 src/assets/styled-components/button.css create mode 100644 src/assets/styled-components/modal.css create mode 100644 src/assets/styled-components/toggle.css create mode 100644 src/assets/styled-components/transitions.css create mode 100644 src/components/elements/Loading.vue create mode 100644 src/components/elements/Modal.vue create mode 100644 src/components/elements/ToggleSwitch.vue create mode 100644 src/router.js create mode 100644 src/utils.js diff --git a/package-lock.json b/package-lock.json index 55df76d..8a9562a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -23,7 +23,6 @@ "@vitejs/plugin-vue": "^5.0.5", "@vue/eslint-config-prettier": "^9.0.0", "autoprefixer": "^10.4.19", - "daisyui": "^4.12.10", "eslint": "^8.57.0", "eslint-plugin-vue": "^9.23.0", "postcss": "^8.4.38", @@ -1444,16 +1443,6 @@ "node": ">= 8" } }, - "node_modules/css-selector-tokenizer": { - "version": "0.8.0", - "resolved": "https://registry.npmjs.org/css-selector-tokenizer/-/css-selector-tokenizer-0.8.0.tgz", - "integrity": "sha512-Jd6Ig3/pe62/qe5SBPTN8h8LeUg/pT4lLgtavPf7updwwHpvFzxvOQBHYj2LZDMjUnBzgvIUSjRcf6oT5HzHFg==", - "dev": true, - "dependencies": { - "cssesc": "^3.0.0", - "fastparse": "^1.1.2" - } - }, "node_modules/cssesc": { "version": "3.0.0", "resolved": "https://registry.npmjs.org/cssesc/-/cssesc-3.0.0.tgz", @@ -1471,34 +1460,6 @@ "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" }, - "node_modules/culori": { - "version": "3.3.0", - "resolved": "https://registry.npmjs.org/culori/-/culori-3.3.0.tgz", - "integrity": "sha512-pHJg+jbuFsCjz9iclQBqyL3B2HLCBF71BwVNujUYEvCeQMvV97R59MNK3R2+jgJ3a1fcZgI9B3vYgz8lzr/BFQ==", - "dev": true, - "engines": { - "node": "^12.20.0 || ^14.13.1 || >=16.0.0" - } - }, - "node_modules/daisyui": { - "version": "4.12.10", - "resolved": "https://registry.npmjs.org/daisyui/-/daisyui-4.12.10.tgz", - "integrity": "sha512-jp1RAuzbHhGdXmn957Z2XsTZStXGHzFfF0FgIOZj3Wv9sH7OZgLfXTRZNfKVYxltGUOBsG1kbWAdF5SrqjebvA==", - "dev": true, - "dependencies": { - "css-selector-tokenizer": "^0.8", - "culori": "^3", - "picocolors": "^1", - "postcss-js": "^4" - }, - "engines": { - "node": ">=16.9.0" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/daisyui" - } - }, "node_modules/debug": { "version": "4.3.5", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz", @@ -1919,12 +1880,6 @@ "integrity": "sha512-DCXu6Ifhqcks7TZKY3Hxp3y6qphY5SJZmrWMDrKcERSOXWQdMhU9Ig/PYrzyw/ul9jOIyh0N4M0tbC5hodg8dw==", "dev": true }, - "node_modules/fastparse": { - "version": "1.1.2", - "resolved": "https://registry.npmjs.org/fastparse/-/fastparse-1.1.2.tgz", - "integrity": "sha512-483XLLxTVIwWK3QTrMGRqUfUpoOs/0hbQrl2oz4J0pAcm3A3bu84wxTFqGqkJzewCLdME38xJLJAxBABfQT8sQ==", - "dev": true - }, "node_modules/fastq": { "version": "1.17.1", "resolved": "https://registry.npmjs.org/fastq/-/fastq-1.17.1.tgz", @@ -3876,4 +3831,4 @@ } } } -} \ No newline at end of file +} diff --git a/package.json b/package.json index 29ea3dd..02456cd 100644 --- a/package.json +++ b/package.json @@ -26,7 +26,6 @@ "@vitejs/plugin-vue": "^5.0.5", "@vue/eslint-config-prettier": "^9.0.0", "autoprefixer": "^10.4.19", - "daisyui": "^4.12.10", "eslint": "^8.57.0", "eslint-plugin-vue": "^9.23.0", "postcss": "^8.4.38", @@ -35,4 +34,4 @@ "tailwindcss": "^3.4.4", "vite": "^5.3.1" } -} \ No newline at end of file +} diff --git a/src/assets/main.css b/src/assets/main.css index b5c61c9..266f8c4 100644 --- a/src/assets/main.css +++ b/src/assets/main.css @@ -1,3 +1,7 @@ -@tailwind base; -@tailwind components; -@tailwind utilities; +@import "tailwindcss/base"; +@import "tailwindcss/components"; +@import "tailwindcss/utilities"; + +@import "./styled-components/toggle.css"; +@import "./styled-components/button.css"; +@import "./styled-components/transitions.css"; diff --git a/src/assets/styled-components/button.css b/src/assets/styled-components/button.css new file mode 100644 index 0000000..79759d5 --- /dev/null +++ b/src/assets/styled-components/button.css @@ -0,0 +1,83 @@ + +.btn { + @apply px-2 py-1 font-semibold rounded border text-nowrap select-none; + @apply transition-all duration-75; + @apply border-slate-300; + + &.btn-sm { + @apply px-1 py-0; + } + + &.btn-xs { + @apply px-0.5 py-0; + @apply text-sm; + } + + &.btn-lg { + @apply px-3 py-1; + @apply text-lg; + } + + &.btn:not(:disabled) { + @apply hover:bg-slate-200 hover:border-slate-300; + @apply active:scale-90 + } + + &.btn:disabled { + @apply cursor-not-allowed opacity-60; + } + &.btn-primary:not(:disabled) { + @apply border-none; + @apply bg-blue-600 text-white hover:bg-blue-700; + } + + &.btn-info:not(:disabled) { + @apply border-none; + @apply bg-blue-500 text-white hover:bg-blue-600; + } + + &.btn-danger:not(:disabled) { + @apply border-none; + @apply bg-red-600 text-white hover:bg-red-700; + } + + &.btn-success:not(:disabled) { + @apply border-none; + @apply bg-green-600 text-white hover:bg-green-700; + } + + &.btn-warning:not(:disabled) { + @apply border-none; + @apply bg-amber-600 text-white hover:bg-amber-700; + } + + &.btn-outline-primary:not(:disabled) { + @apply hover:bg-blue-600 hover:border-blue-700 hover:text-white; + @apply border-blue-700 hover:border-blue-800 + } + + &.btn-outline-info:not(:disabled) { + @apply hover:bg-blue-500 hover:border-blue-700 hover:text-white; + @apply border-blue-700 hover:border-blue-800 + } + + &.btn-outline-danger:not(:disabled) { + @apply hover:bg-red-500 hover:border-red-700 hover:text-white; + @apply border-red-700 hover:border-red-800 + } + + &.btn-outline-success:not(:disabled) { + @apply hover:bg-green-500 hover:border-green-700 hover:text-white; + @apply border-green-700 hover:border-green-800 + } + + &.btn-outline-warning:not(:disabled) { + @apply hover:bg-amber-500 hover:border-amber-700 hover:text-white; + @apply border-amber-700 hover:border-amber-800 + } + + &.btn-link:not(:disabled) { + @apply border-none; + @apply hover:bg-transparent hover:border-transparent hover:text-inherit; + } +} diff --git a/src/assets/styled-components/modal.css b/src/assets/styled-components/modal.css new file mode 100644 index 0000000..e69de29 diff --git a/src/assets/styled-components/toggle.css b/src/assets/styled-components/toggle.css new file mode 100644 index 0000000..cca434d --- /dev/null +++ b/src/assets/styled-components/toggle.css @@ -0,0 +1,78 @@ +.toggle:where(.dark, .dark *) { + --tglbg: theme(colors.slate.800) !important; +} + +.toggle { + --tglbg: theme(colors.slate.200); + --animation-input: 0.2s; + --handleoffset: 1.5rem; + --handleoffsetcalculator: calc(var(--handleoffset) * -1); + --togglehandleborder: 0 0; + @apply h-6 w-12 rounded-3xl cursor-pointer appearance-none border border-current bg-current; + transition: + background, + box-shadow var(--animation-input, 0.2s) ease-out; + box-shadow: + var(--handleoffsetcalculator) 0 0 2px var(--tglbg) inset, + 0 0 0 2px var(--tglbg) inset, + var(--togglehandleborder); + @apply text-slate-500; + &:focus-visible { + @apply outline outline-2 outline-offset-2; + } + &:hover { + @apply bg-current; + } + &:checked, + &[aria-checked="true"] { + background-image: none; + --handleoffsetcalculator: var(--handleoffset); + } + &:indeterminate { + box-shadow: + calc(var(--handleoffset) / 2) 0 0 2px var(--tglbg) inset, + calc(var(--handleoffset) / -2) 0 0 2px var(--tglbg) inset, + 0 0 0 2px var(--tglbg) inset; + } + &:disabled { + @apply cursor-not-allowed bg-transparent opacity-30; + --togglehandleborder: 0 0 0 3px #000 inset, + var(--handleoffsetcalculator) 0 0 3px #000 inset; + } + &.toggle-success { + &:focus-visible { + @apply outline-green-400; + } + &:checked, + &[aria-checked="true"] { + @apply border-green-500 bg-green-400 text-slate-900 border-opacity-10; + } + } + &.toggle-warning { + &:focus-visible { + @apply outline-amber-400; + } + &:checked, + &[aria-checked="true"] { + @apply border-amber-500 bg-amber-400 text-slate-900 border-opacity-10; + } + } + &.toggle-info { + &:focus-visible { + @apply outline-blue-400; + } + &:checked, + &[aria-checked="true"] { + @apply border-blue-500 bg-blue-400 text-slate-900 border-opacity-10; + } + } + &.toggle-danger { + &:focus-visible { + @apply outline-red-400; + } + &:checked, + &[aria-checked="true"] { + @apply border-red-500 bg-red-400 text-slate-900 border-opacity-10; + } + } + } \ No newline at end of file diff --git a/src/assets/styled-components/transitions.css b/src/assets/styled-components/transitions.css new file mode 100644 index 0000000..64ffd78 --- /dev/null +++ b/src/assets/styled-components/transitions.css @@ -0,0 +1,27 @@ +.slide-fade-enter-active { + transition: all 0.2s ease-out; +} + +.slide-fade-leave-active { + transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1); +} + +.slide-fade-enter-from, +.slide-fade-leave-to { + transform: translateX(20px); + opacity: 0; +} + +.slide-fade-reverse-enter-active { + transition: all 0.2s cubic-bezier(1, 0.5, 0.8, 1); +} + +.slide-fade-reverse-leave-active { + transition: all 0.2s ease-out; +} + +.slide-fade-reverse-enter-from, +.slide-fade-reverse-leave-to { + transform: translateX(-20px); + opacity: 0; +} diff --git a/src/components/TheAdminPanel.vue b/src/components/TheAdminPanel.vue index 3071675..a2d3709 100644 --- a/src/components/TheAdminPanel.vue +++ b/src/components/TheAdminPanel.vue @@ -20,8 +20,9 @@ remediateSetting(setting) } + const showModal = ref(false) function showTheModal() { - admin_modal.value.showModal() + showModal.value = true clickedButtons.value = [] debouncedGetDiangostic() } @@ -30,176 +31,169 @@ diff --git a/src/components/TheLiveLogs.vue b/src/components/TheLiveLogs.vue index bfcb1df..40e8e4d 100644 --- a/src/components/TheLiveLogs.vue +++ b/src/components/TheLiveLogs.vue @@ -4,6 +4,7 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' import { faSignal, faCloud, faCog, faUsers, faCircle } from '@fortawesome/free-solid-svg-icons' import TheLiveLogsActivityGraphVue from "./TheLiveLogsActivityGraph.vue"; + import ToggleSwitch from "@/components/elements/ToggleSwitch.vue" const verbose = ref(false) @@ -60,13 +61,13 @@ diff --git a/src/components/TheThemeButton.vue b/src/components/TheThemeButton.vue index 683a1ef..a22125a 100644 --- a/src/components/TheThemeButton.vue +++ b/src/components/TheThemeButton.vue @@ -23,9 +23,9 @@ type="checkbox" @click="darkMode = !darkMode" :checked="darkMode" - class="toggle theme-controller bg-slate-400 col-span-2 col-start-1 row-start-1 [--tglbg:#e2e8f0]" /> + class="toggle theme-controller bg-slate-500 col-span-2 col-start-1 row-start-1 [--tglbg:#e2e8f0] dark:[--tglbg:#1d232a]" /> - \ No newline at end of file + + + \ No newline at end of file diff --git a/src/components/elements/Loading.vue b/src/components/elements/Loading.vue new file mode 100644 index 0000000..294bafc --- /dev/null +++ b/src/components/elements/Loading.vue @@ -0,0 +1,7 @@ + + + \ No newline at end of file diff --git a/src/components/elements/Modal.vue b/src/components/elements/Modal.vue new file mode 100644 index 0000000..cbcce56 --- /dev/null +++ b/src/components/elements/Modal.vue @@ -0,0 +1,72 @@ + + +
+ +
+ +
+ +
+

+ +

+ + + +
+
+ +
+
+ +
+ +
+ +
+
+ +
+ + + + \ No newline at end of file diff --git a/src/components/elements/ToggleSwitch.vue b/src/components/elements/ToggleSwitch.vue new file mode 100644 index 0000000..ca6e02c --- /dev/null +++ b/src/components/elements/ToggleSwitch.vue @@ -0,0 +1,58 @@ + + + + + \ No newline at end of file diff --git a/src/main.js b/src/main.js index be51048..5ba207e 100644 --- a/src/main.js +++ b/src/main.js @@ -4,7 +4,14 @@ import VueApexCharts from "vue3-apexcharts"; import { createApp } from 'vue' import App from './App.vue' +import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' +import Modal from "@/components/elements/Modal.vue" +import Loading from "@/components/elements/Loading.vue" + const app = createApp(App) +app.component('FontAwesomeIcon', FontAwesomeIcon) +app.component('Modal', Modal) +app.component('Loading', Loading) app.use(VueApexCharts) app.mount('#app') \ No newline at end of file diff --git a/src/router.js b/src/router.js new file mode 100644 index 0000000..5f485eb --- /dev/null +++ b/src/router.js @@ -0,0 +1,34 @@ + +import { createWebHistory, createRouter } from 'vue-router' + +const routes = [ + { path: '/', component: ScenarioList }, + { path: '/scenarios/index', name: 'Scenario Index', component: ScenarioList, meta: { requiresScenarioSelection: false }, }, + { path: '/scenarios/add', name: 'New Scenario', component: ScenarioNew, meta: { requiresScenarioSelection: false }, }, + { path: '/scenarios/overview/:uuid?', name: 'Scenario Overview', component: ScenarioOverview, meta: { requiresScenarioSelection: true }, props: true }, + { path: '/scenarios/designer/:uuid?', name: 'Scenario Designer', component: ScenarioDesigner, meta: { requiresScenarioSelection: true }, props: true }, + { path: '/injects/tester/:uuid?', name: 'Inject Tester', component: InjectTester, props: true }, +] + +const router = createRouter({ + history: createWebHistory(), + routes, +}) + +router.beforeEach(async (to, from) => { + if (to.path === '/') { + return { path: '/scenarios/index' } + } + if (!hasScenarios()) { + fetchScenarios() + } + if (from.name == undefined && ['Scenario Overview', 'Scenario Designer'].includes(to.name) && to?.params?.uuid !== undefined) { + store.selected_scenario = to.params.uuid + } + if (to?.meta?.requiresScenarioSelection === true && store.selected_scenario === null) { + return { path: '/scenarios/index' } + } + if (to.matched.length == 0) { + return { path: '/scenarios/index' } + } +}) \ No newline at end of file diff --git a/src/utils.js b/src/utils.js new file mode 100644 index 0000000..43d2aea --- /dev/null +++ b/src/utils.js @@ -0,0 +1,17 @@ +let toastID = 0 +export const toastBuffer = ref([]) +export function toast(toast) { + toastID += 1 + toast.id = toastID + toastBuffer.value.push(toast) +} +export function removeToast(id) { + toastBuffer.value = toastBuffer.value.filter((toast) => toast.id != id) +} +export function ajaxFeedback(response) { + toast({ + variant: response.success ? 'success' : 'danger', + message: String(response.message), + title: response.title, + }) +} \ No newline at end of file diff --git a/tailwind.config.js b/tailwind.config.js index 419de41..862ca97 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -23,17 +23,6 @@ export default { }, }, plugins: [ - require('daisyui'), ], darkMode: ['selector'], - daisyui: { - themes: false, // false: only light + dark | true: all themes | array: specific themes like this ["light", "dark", "cupcake"] - darkTheme: "dark", // name of one of the included themes for dark mode - base: false, // applies background color and foreground color for root element by default - styled: true, // include daisyUI colors and design decisions for all components - utils: false, // adds responsive and modifier utility classes - prefix: "", // prefix for daisyUI classnames (components, modifiers and responsive class names. Not colors) - logs: false, // Shows info about daisyUI version and used config in the console when building your CSS - themeRoot: ":root", // The element that receives theme color CSS variables - }, }