mirror of
https://github.com/bunkerity/bunkerweb
synced 2026-05-24 09:28:37 +00:00
remove zindex in js and set it on prop instead
* remove zindex in components and set it on prop from JSON instead * fix some z-index issue with popover and fields * fix select scroll and dropdown open
This commit is contained in:
Jordan Blasenhauer
parent
3a3ed63c36
commit
365dbd3c33
12 changed files with 18688 additions and 17611 deletions
|
|
@ -160,7 +160,7 @@ body {
|
|||
|
||||
/* INPUT */
|
||||
.input-header-container {
|
||||
@apply z-10;
|
||||
@apply z-20;
|
||||
}
|
||||
|
||||
.no-popover.input-header-container {
|
||||
|
|
@ -382,7 +382,7 @@ body {
|
|||
}
|
||||
|
||||
.open.popover-container {
|
||||
@apply z-10 opacity-100;
|
||||
@apply z-20 opacity-100;
|
||||
}
|
||||
|
||||
.close.popover-container {
|
||||
|
|
@ -2196,3 +2196,402 @@ body {
|
|||
.lime-darker.popover-svg {
|
||||
@apply fill-lime-600;
|
||||
}
|
||||
|
||||
/* UTILS */
|
||||
|
||||
.-z-0 {
|
||||
@apply -z-[0];
|
||||
}
|
||||
.-z-1 {
|
||||
@apply -z-[1];
|
||||
}
|
||||
.-z-2 {
|
||||
@apply -z-[2];
|
||||
}
|
||||
.-z-3 {
|
||||
@apply -z-[3];
|
||||
}
|
||||
.-z-4 {
|
||||
@apply -z-[4];
|
||||
}
|
||||
.-z-5 {
|
||||
@apply -z-[5];
|
||||
}
|
||||
.-z-6 {
|
||||
@apply -z-[6];
|
||||
}
|
||||
.-z-7 {
|
||||
@apply -z-[7];
|
||||
}
|
||||
.-z-8 {
|
||||
@apply -z-[8];
|
||||
}
|
||||
.-z-9 {
|
||||
@apply -z-[9];
|
||||
}
|
||||
.-z-10 {
|
||||
@apply -z-[10];
|
||||
}
|
||||
.-z-11 {
|
||||
@apply -z-[11];
|
||||
}
|
||||
.-z-12 {
|
||||
@apply -z-[12];
|
||||
}
|
||||
.-z-13 {
|
||||
@apply -z-[13];
|
||||
}
|
||||
.-z-14 {
|
||||
@apply -z-[14];
|
||||
}
|
||||
.-z-15 {
|
||||
@apply -z-[15];
|
||||
}
|
||||
.-z-16 {
|
||||
@apply -z-[16];
|
||||
}
|
||||
.-z-17 {
|
||||
@apply -z-[17];
|
||||
}
|
||||
.-z-18 {
|
||||
@apply -z-[18];
|
||||
}
|
||||
.-z-19 {
|
||||
@apply -z-[19];
|
||||
}
|
||||
.-z-20 {
|
||||
@apply -z-[20];
|
||||
}
|
||||
.-z-21 {
|
||||
@apply -z-[21];
|
||||
}
|
||||
.-z-22 {
|
||||
@apply -z-[22];
|
||||
}
|
||||
.-z-23 {
|
||||
@apply -z-[23];
|
||||
}
|
||||
.-z-24 {
|
||||
@apply -z-[24];
|
||||
}
|
||||
.-z-25 {
|
||||
@apply -z-[25];
|
||||
}
|
||||
.-z-26 {
|
||||
@apply -z-[26];
|
||||
}
|
||||
.-z-27 {
|
||||
@apply -z-[27];
|
||||
}
|
||||
.-z-28 {
|
||||
@apply -z-[28];
|
||||
}
|
||||
.-z-29 {
|
||||
@apply -z-[29];
|
||||
}
|
||||
.-z-30 {
|
||||
@apply -z-[30];
|
||||
}
|
||||
.-z-31 {
|
||||
@apply -z-[31];
|
||||
}
|
||||
.-z-32 {
|
||||
@apply -z-[32];
|
||||
}
|
||||
.-z-33 {
|
||||
@apply -z-[33];
|
||||
}
|
||||
.-z-34 {
|
||||
@apply -z-[34];
|
||||
}
|
||||
.-z-35 {
|
||||
@apply -z-[35];
|
||||
}
|
||||
.-z-36 {
|
||||
@apply -z-[36];
|
||||
}
|
||||
.-z-37 {
|
||||
@apply -z-[37];
|
||||
}
|
||||
.-z-38 {
|
||||
@apply -z-[38];
|
||||
}
|
||||
.-z-39 {
|
||||
@apply -z-[39];
|
||||
}
|
||||
.-z-40 {
|
||||
@apply -z-[40];
|
||||
}
|
||||
.-z-41 {
|
||||
@apply -z-[41];
|
||||
}
|
||||
.-z-42 {
|
||||
@apply -z-[42];
|
||||
}
|
||||
.-z-43 {
|
||||
@apply -z-[43];
|
||||
}
|
||||
.-z-44 {
|
||||
@apply -z-[44];
|
||||
}
|
||||
.-z-45 {
|
||||
@apply -z-[45];
|
||||
}
|
||||
.-z-46 {
|
||||
@apply -z-[46];
|
||||
}
|
||||
.-z-47 {
|
||||
@apply -z-[47];
|
||||
}
|
||||
.-z-48 {
|
||||
@apply -z-[48];
|
||||
}
|
||||
.-z-49 {
|
||||
@apply -z-[49];
|
||||
}
|
||||
.-z-50 {
|
||||
@apply -z-[50];
|
||||
}
|
||||
.z-0 {
|
||||
@apply z-[0];
|
||||
}
|
||||
.z-1 {
|
||||
@apply z-[1];
|
||||
}
|
||||
.z-2 {
|
||||
@apply z-[2];
|
||||
}
|
||||
.z-3 {
|
||||
@apply z-[3];
|
||||
}
|
||||
.z-4 {
|
||||
@apply z-[4];
|
||||
}
|
||||
.z-5 {
|
||||
@apply z-[5];
|
||||
}
|
||||
.z-6 {
|
||||
@apply z-[6];
|
||||
}
|
||||
.z-7 {
|
||||
@apply z-[7];
|
||||
}
|
||||
.z-8 {
|
||||
@apply z-[8];
|
||||
}
|
||||
.z-9 {
|
||||
@apply z-[9];
|
||||
}
|
||||
.z-10 {
|
||||
@apply z-[10];
|
||||
}
|
||||
.z-11 {
|
||||
@apply z-[11];
|
||||
}
|
||||
.z-12 {
|
||||
@apply z-[12];
|
||||
}
|
||||
.z-13 {
|
||||
@apply z-[13];
|
||||
}
|
||||
.z-14 {
|
||||
@apply z-[14];
|
||||
}
|
||||
.z-15 {
|
||||
@apply z-[15];
|
||||
}
|
||||
.z-16 {
|
||||
@apply z-[16];
|
||||
}
|
||||
.z-17 {
|
||||
@apply z-[17];
|
||||
}
|
||||
.z-18 {
|
||||
@apply z-[18];
|
||||
}
|
||||
.z-19 {
|
||||
@apply z-[19];
|
||||
}
|
||||
.z-20 {
|
||||
@apply z-[20];
|
||||
}
|
||||
.z-21 {
|
||||
@apply z-[21];
|
||||
}
|
||||
.z-22 {
|
||||
@apply z-[22];
|
||||
}
|
||||
.z-23 {
|
||||
@apply z-[23];
|
||||
}
|
||||
.z-24 {
|
||||
@apply z-[24];
|
||||
}
|
||||
.z-25 {
|
||||
@apply z-[25];
|
||||
}
|
||||
.z-26 {
|
||||
@apply z-[26];
|
||||
}
|
||||
.z-27 {
|
||||
@apply z-[27];
|
||||
}
|
||||
.z-28 {
|
||||
@apply z-[28];
|
||||
}
|
||||
.z-29 {
|
||||
@apply z-[29];
|
||||
}
|
||||
.z-30 {
|
||||
@apply z-[30];
|
||||
}
|
||||
.z-31 {
|
||||
@apply z-[31];
|
||||
}
|
||||
.z-32 {
|
||||
@apply z-[32];
|
||||
}
|
||||
.z-33 {
|
||||
@apply z-[33];
|
||||
}
|
||||
.z-34 {
|
||||
@apply z-[34];
|
||||
}
|
||||
.z-35 {
|
||||
@apply z-[35];
|
||||
}
|
||||
.z-36 {
|
||||
@apply z-[36];
|
||||
}
|
||||
.z-37 {
|
||||
@apply z-[37];
|
||||
}
|
||||
.z-38 {
|
||||
@apply z-[38];
|
||||
}
|
||||
.z-39 {
|
||||
@apply z-[39];
|
||||
}
|
||||
.z-40 {
|
||||
@apply z-[40];
|
||||
}
|
||||
.z-41 {
|
||||
@apply z-[41];
|
||||
}
|
||||
.z-42 {
|
||||
@apply z-[42];
|
||||
}
|
||||
.z-43 {
|
||||
@apply z-[43];
|
||||
}
|
||||
.z-44 {
|
||||
@apply z-[44];
|
||||
}
|
||||
.z-45 {
|
||||
@apply z-[45];
|
||||
}
|
||||
.z-46 {
|
||||
@apply z-[46];
|
||||
}
|
||||
.z-47 {
|
||||
@apply z-[47];
|
||||
}
|
||||
.z-48 {
|
||||
@apply z-[48];
|
||||
}
|
||||
.z-49 {
|
||||
@apply z-[49];
|
||||
}
|
||||
.z-50 {
|
||||
@apply z-[50];
|
||||
}
|
||||
.z-51 {
|
||||
@apply z-[51];
|
||||
}
|
||||
.z-52 {
|
||||
@apply z-[52];
|
||||
}
|
||||
.z-53 {
|
||||
@apply z-[53];
|
||||
}
|
||||
.z-54 {
|
||||
@apply z-[54];
|
||||
}
|
||||
.z-55 {
|
||||
@apply z-[55];
|
||||
}
|
||||
.z-56 {
|
||||
@apply z-[56];
|
||||
}
|
||||
.z-57 {
|
||||
@apply z-[57];
|
||||
}
|
||||
.z-58 {
|
||||
@apply z-[58];
|
||||
}
|
||||
.z-59 {
|
||||
@apply z-[59];
|
||||
}
|
||||
.z-60 {
|
||||
@apply z-[60];
|
||||
}
|
||||
.z-61 {
|
||||
@apply z-[61];
|
||||
}
|
||||
.z-62 {
|
||||
@apply z-[62];
|
||||
}
|
||||
.z-63 {
|
||||
@apply z-[63];
|
||||
}
|
||||
.z-64 {
|
||||
@apply z-[64];
|
||||
}
|
||||
.z-65 {
|
||||
@apply z-[65];
|
||||
}
|
||||
.z-66 {
|
||||
@apply z-[66];
|
||||
}
|
||||
.z-67 {
|
||||
@apply z-[67];
|
||||
}
|
||||
.z-68 {
|
||||
@apply z-[68];
|
||||
}
|
||||
.z-69 {
|
||||
@apply z-[69];
|
||||
}
|
||||
.z-70 {
|
||||
@apply z-[70];
|
||||
}
|
||||
.z-71 {
|
||||
@apply z-[71];
|
||||
}
|
||||
.z-72 {
|
||||
@apply z-[72];
|
||||
}
|
||||
.z-73 {
|
||||
@apply z-[73];
|
||||
}
|
||||
.z-74 {
|
||||
@apply z-[74];
|
||||
}
|
||||
.z-75 {
|
||||
@apply z-[75];
|
||||
}
|
||||
.z-76 {
|
||||
@apply z-[76];
|
||||
}
|
||||
.z-77 {
|
||||
@apply z-[77];
|
||||
}
|
||||
.z-78 {
|
||||
@apply z-[78];
|
||||
}
|
||||
.z-79 {
|
||||
@apply z-[79];
|
||||
}
|
||||
.z-80 {
|
||||
@apply z-[80];
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
|
|
@ -117,7 +117,6 @@ const checkboxEl = ref(null);
|
|||
const checkbox = reactive({
|
||||
value: props.value,
|
||||
isValid: false,
|
||||
isIndexUp: false,
|
||||
});
|
||||
|
||||
const emits = defineEmits(["inp"]);
|
||||
|
|
@ -128,14 +127,6 @@ function updateValue() {
|
|||
return checkbox.value;
|
||||
}
|
||||
|
||||
function indexUp() {
|
||||
checkbox.isIndexUp = true;
|
||||
}
|
||||
|
||||
function indexDown() {
|
||||
checkbox.isIndexUp = false;
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
checkbox.isValid = checkboxEl.value.checkValidity();
|
||||
});
|
||||
|
|
@ -143,12 +134,7 @@ onMounted(() => {
|
|||
|
||||
<template>
|
||||
<Container
|
||||
@focusin="indexUp()"
|
||||
@focusout="indexDown()"
|
||||
@pointerover="indexUp()"
|
||||
@pointerleave="indexDown()"
|
||||
:class="[checkbox.isIndexUp ? 'z-10' : 'z-0']"
|
||||
:containerClass="`z-0 w-full p-2 md:p-3 ${props.containerClass}`"
|
||||
:containerClass="`relative w-full p-2 md:p-3 ${props.containerClass}`"
|
||||
:columns="props.columns"
|
||||
>
|
||||
<Header
|
||||
|
|
|
|||
|
|
@ -141,17 +141,8 @@ const date = reactive({
|
|||
|
||||
const picker = reactive({
|
||||
isOpen: false,
|
||||
isIndexUp: false,
|
||||
});
|
||||
|
||||
function indexUp() {
|
||||
picker.isIndexUp = true;
|
||||
}
|
||||
|
||||
function indexDown() {
|
||||
picker.isIndexUp = false;
|
||||
}
|
||||
|
||||
let datepicker;
|
||||
onMounted(() => {
|
||||
datepicker = flatpickr(`#${props.id}`, {
|
||||
|
|
@ -644,12 +635,7 @@ function setIndex(calendarEl, tabindex) {
|
|||
<template>
|
||||
<Container
|
||||
v-if="props.inpType === 'datepicker'"
|
||||
@focusin="indexUp()"
|
||||
@focusout="indexDown()"
|
||||
@pointerover="indexUp()"
|
||||
@pointerleave="indexDown()"
|
||||
:class="[picker.isIndexUp ? 'z-10' : 'z-0']"
|
||||
:containerClass="`z-0 w-full p-2 md:p-3 ${props.containerClass}`"
|
||||
:containerClass="`w-full p-2 md:p-3 ${props.containerClass}`"
|
||||
:columns="props.columns"
|
||||
>
|
||||
<Header
|
||||
|
|
|
|||
|
|
@ -149,14 +149,6 @@ const inp = reactive({
|
|||
isIndexUp: false,
|
||||
});
|
||||
|
||||
function indexUp() {
|
||||
inp.isIndexUp = true;
|
||||
}
|
||||
|
||||
function indexDown() {
|
||||
inp.isIndexUp = false;
|
||||
}
|
||||
|
||||
const emits = defineEmits(["inp"]);
|
||||
|
||||
function copyClipboard() {
|
||||
|
|
@ -192,11 +184,6 @@ onMounted(() => {
|
|||
|
||||
<template>
|
||||
<Container
|
||||
@focusin="indexUp()"
|
||||
@focusout="indexDown()"
|
||||
@pointerover="indexUp()"
|
||||
@pointerleave="indexDown()"
|
||||
:class="[inp.isIndexUp ? 'z-10' : 'z-0']"
|
||||
:containerClass="`w-full p-2 md:p-3 ${props.containerClass}`"
|
||||
:columns="props.columns"
|
||||
>
|
||||
|
|
|
|||
|
|
@ -248,22 +248,23 @@ function closeOutside(e) {
|
|||
}
|
||||
}
|
||||
|
||||
function indexUp() {
|
||||
select.isIndexUp = true;
|
||||
}
|
||||
|
||||
function indexDown() {
|
||||
select.isIndexUp = false;
|
||||
function closeScroll(e) {
|
||||
if (!e.target) return;
|
||||
// Case not a DOM element (like the document itself)
|
||||
if (e.target.nodeType !== 1) return (select.isOpen = false);
|
||||
// Case DOM, check if it is the select dropdown
|
||||
if (e.target.hasAttribute("data-select-dropdown")) return;
|
||||
select.isOpen = false;
|
||||
}
|
||||
|
||||
// Close select dropdown when clicked outside element
|
||||
watch(select, () => {
|
||||
if (select.isOpen) {
|
||||
window.addEventListener("click", closeOutside);
|
||||
window.addEventListener("scroll", closeSelect, true);
|
||||
window.addEventListener("scroll", closeScroll, true);
|
||||
} else {
|
||||
window.removeEventListener("click", closeOutside);
|
||||
window.removeEventListener("scroll", closeSelect, true);
|
||||
window.removeEventListener("scroll", closeScroll, true);
|
||||
}
|
||||
});
|
||||
|
||||
|
|
@ -281,12 +282,7 @@ const emits = defineEmits(["inp"]);
|
|||
|
||||
<template>
|
||||
<Container
|
||||
@focusin="indexUp()"
|
||||
@focusout="indexDown()"
|
||||
@pointerover="indexUp()"
|
||||
@pointerleave="indexDown()"
|
||||
:class="[select.isIndexUp ? 'z-10' : 'z-0']"
|
||||
:containerClass="`z-0 w-full p-2 md:p-3 ${props.containerClass}`"
|
||||
:containerClass="`w-full p-2 md:p-3 ${props.containerClass}`"
|
||||
:columns="props.columns"
|
||||
>
|
||||
<Header
|
||||
|
|
@ -354,6 +350,7 @@ const emits = defineEmits(["inp"]);
|
|||
</button>
|
||||
<!-- dropdown-->
|
||||
<div
|
||||
data-select-dropdown
|
||||
:aria-hidden="select.isOpen ? 'false' : 'true'"
|
||||
ref="selectDropdown"
|
||||
role="radiogroup"
|
||||
|
|
|
|||
|
|
@ -81,7 +81,10 @@ const props = defineProps({
|
|||
style="max-height: 300px; overflow: auto"
|
||||
class="grid grid-cols-12 w-full relative"
|
||||
>
|
||||
<template v-for="(setting, index) in plugin.settings" :key="index">
|
||||
<template
|
||||
v-for="(setting, name, index) in plugin.settings"
|
||||
:key="index"
|
||||
>
|
||||
<Checkbox v-if="setting.inpType === 'checkbox'" v-bind="setting" />
|
||||
<Select v-if="setting.inpType === 'select'" v-bind="setting" />
|
||||
<Datepicker
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
|
|
@ -7,7 +7,7 @@ export default {
|
|||
"./src/components/**/*.{js,vue,ts,jsx,tsx,mdx}",
|
||||
"../setup/src/*.{js,vue,ts,jsx,tsx,mdx}",
|
||||
],
|
||||
safelist : [
|
||||
safelist: [
|
||||
"col-span-1",
|
||||
"col-span-2",
|
||||
"col-span-3",
|
||||
|
|
@ -44,7 +44,6 @@ export default {
|
|||
"lg:col-span-10",
|
||||
"lg:col-span-11",
|
||||
"lg:col-span-12",
|
||||
|
||||
],
|
||||
important: true,
|
||||
darkMode: "class",
|
||||
|
|
|
|||
35522
vuejs/plugins.json
35522
vuejs/plugins.json
File diff suppressed because it is too large
Load diff
|
|
@ -26,7 +26,12 @@ def set_advanced():
|
|||
plugins = copy.deepcopy(plugins_base)
|
||||
# Update settings with global config data
|
||||
for plugin in plugins :
|
||||
loop_id = 0
|
||||
total_settings = len(plugin["settings"])
|
||||
for setting, value in plugin["settings"].items() :
|
||||
loop_id += 1
|
||||
# add zindex for container
|
||||
value["containerClass"] = f"z-{total_settings - loop_id}"
|
||||
# set id base on template name
|
||||
value["id"] = f"{value["id"]}-{template_name}"
|
||||
# set inpType based on type define for each settings
|
||||
|
|
@ -65,7 +70,6 @@ def set_advanced():
|
|||
"iconName": "disk" if value.get("context") == "multisite" else "globe",
|
||||
"text" : "inp_popover_multisite" if value.get("context") == "multisite" else "inp_popover_global"
|
||||
})
|
||||
print(popovers)
|
||||
|
||||
value["popovers"] = popovers
|
||||
|
||||
|
|
|
|||
16
vuejs/test2.py
Normal file
16
vuejs/test2.py
Normal file
|
|
@ -0,0 +1,16 @@
|
|||
import json
|
||||
import copy
|
||||
|
||||
css = ""
|
||||
|
||||
|
||||
|
||||
# add "z-2" to "z-50" on zIndex list
|
||||
for i in range(0, 51):
|
||||
css += f".-z-{i} {{ @apply -z-[{i}] }}\n"
|
||||
|
||||
|
||||
for i in range(0, 81):
|
||||
css += f".z-{i} {{ @apply z-[{i}] }}\n"
|
||||
|
||||
print(css)
|
||||
Loading…
Reference in a new issue