mirror of
https://github.com/bunkerity/bunkerweb
synced 2026-05-24 09:28:37 +00:00
start filter logic
This commit is contained in:
parent
7409a997ef
commit
9f2969d312
13 changed files with 12495 additions and 6072 deletions
|
|
@ -904,15 +904,15 @@ body {
|
|||
/* TITLE */
|
||||
|
||||
.title-container {
|
||||
@apply break-words max-w-[80%] font-bold mb-2 col-span-12 dark:text-white/90 transition duration-300 ease-in-out text-2xl;
|
||||
@apply w-full col-span-12 break-words max-w-[80%] font-bold mb-2 dark:text-white/90 transition duration-300 ease-in-out text-2xl;
|
||||
}
|
||||
|
||||
.title-card {
|
||||
@apply break-words max-w-[80%] mb-2 font-bold dark:text-white/90 transition duration-300 ease-in-out text-xl;
|
||||
@apply w-full col-span-12 break-words max-w-[80%] mb-2 font-bold dark:text-white/90 transition duration-300 ease-in-out text-xl;
|
||||
}
|
||||
|
||||
.title-stat {
|
||||
@apply mb-0 font-sans text-sm font-semibold leading-normal uppercase dark:text-gray-400;
|
||||
@apply w-full col-span-12 mb-0 font-sans text-sm font-semibold leading-normal uppercase dark:text-gray-400;
|
||||
}
|
||||
|
||||
/* SUBTITLE */
|
||||
|
|
|
|||
File diff suppressed because one or more lines are too long
69
vuejs/client/src/components/Builder/GlobalConfig.vue
Normal file
69
vuejs/client/src/components/Builder/GlobalConfig.vue
Normal file
|
|
@ -0,0 +1,69 @@
|
|||
<script setup>
|
||||
// Containers
|
||||
import Grid from "@components/Widget/Grid.vue";
|
||||
import GridLayout from "@components/Widget/GridLayout.vue";
|
||||
import Title from "@components/Widget/Title.vue";
|
||||
import Templates from "@components/Form/Templates.vue";
|
||||
|
||||
/**
|
||||
@name Builder/GlobalConfig.vue
|
||||
@description This component is lightweight builder containing only the necessary components to create the instances page.
|
||||
@example
|
||||
[
|
||||
{
|
||||
type: "card",
|
||||
containerColumns: { pc: 12, tablet: 12, mobile: 12 },
|
||||
widgets: [
|
||||
{
|
||||
type: "Title",
|
||||
data : {
|
||||
title: "dashboard_global_config",
|
||||
type: "card"
|
||||
},
|
||||
},
|
||||
{
|
||||
type: "Templates",
|
||||
data: {
|
||||
title: "home_version",
|
||||
subtitle: "home_all_features_available" if is_pro_version else "home_upgrade_pro",
|
||||
subtitleColor: "success" is is_pro_version else "warning",
|
||||
stat: "home_pro" if is_pro_version else "home_free",
|
||||
iconName: "crown" if is_pro_version else "core",
|
||||
iconColor: "amber",
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
@param {array} builder - Array of containers and widgets
|
||||
*/
|
||||
|
||||
const props = defineProps({
|
||||
builder: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- top level grid (layout) -->
|
||||
<GridLayout
|
||||
v-for="(container, index) in props.builder"
|
||||
:key="index"
|
||||
:gridLayoutClass="container.containerClass"
|
||||
:type="container.type"
|
||||
:title="container.title"
|
||||
:link="container.link"
|
||||
:columns="container.containerColumns"
|
||||
>
|
||||
<!-- widget grid -->
|
||||
<Grid>
|
||||
<!-- widget element -->
|
||||
<template v-for="(widget, index) in container.widgets" :key="index">
|
||||
<Title v-if="widget.type === 'Title'" v-bind="widget.data" />
|
||||
<Templates v-if="widget.type === 'Templates'" v-bind="widget.data" />
|
||||
</template>
|
||||
</Grid>
|
||||
</GridLayout>
|
||||
</template>
|
||||
|
|
@ -1,11 +1,15 @@
|
|||
<script setup>
|
||||
import { defineProps, reactive, onMounted } from "vue";
|
||||
import { defineProps, reactive, onMounted, computed } from "vue";
|
||||
import Container from "@components/Widget/Container.vue";
|
||||
import Fields from "@components/Form/Fields.vue";
|
||||
import Title from "@components/Widget/Title.vue";
|
||||
import Subtitle from "@components/Widget/Subtitle.vue";
|
||||
import Combobox from "@components/Forms/Field/Combobox.vue";
|
||||
import Input from "@components/Forms/Field/Input.vue";
|
||||
import Select from "@components/Forms/Field/Select.vue";
|
||||
import Button from "@components/Widget/Button.vue";
|
||||
import { v4 as uuidv4 } from "uuid";
|
||||
import { plugin_types } from "@utils/variables";
|
||||
/**
|
||||
@name Form/Advanced.vue
|
||||
@description This component is used to create a complete advanced form with plugin selection.
|
||||
|
|
@ -61,6 +65,9 @@ const props = defineProps({
|
|||
|
||||
const data = reactive({
|
||||
currPlugin: "",
|
||||
filtered: computed(() => {
|
||||
console.log(props.template);
|
||||
}),
|
||||
});
|
||||
|
||||
function getFirstPlugin(form) {
|
||||
|
|
@ -84,7 +91,59 @@ const comboboxPlugin = {
|
|||
required: false,
|
||||
label: "dashboard_plugins",
|
||||
tabId: "1",
|
||||
columns: { pc: 4, tablet: 6, mobile: 12 },
|
||||
popovers: [
|
||||
{
|
||||
text: "inp_combobox_advanced_desc",
|
||||
iconName: "info",
|
||||
iconColor: "info",
|
||||
},
|
||||
],
|
||||
columns: { pc: 3, tablet: 4, mobile: 12 },
|
||||
};
|
||||
|
||||
const inpKeyword = {
|
||||
id: uuidv4(),
|
||||
value: "",
|
||||
type: "text",
|
||||
name: uuidv4(),
|
||||
label: "inp_search_settings",
|
||||
placeholder: "inp_keyword",
|
||||
popovers: [
|
||||
{
|
||||
text: "inp_search_settings_desc",
|
||||
iconName: "info",
|
||||
iconColor: "info",
|
||||
},
|
||||
],
|
||||
columns: { pc: 3, tablet: 4, mobile: 12 },
|
||||
};
|
||||
|
||||
const selectType = {
|
||||
id: uuidv4(),
|
||||
value: "all",
|
||||
// add 'all' as first value
|
||||
values: ["all"].concat(plugin_types),
|
||||
type: "text",
|
||||
name: uuidv4(),
|
||||
label: "inp_select_plugin_type",
|
||||
popovers: [
|
||||
{
|
||||
text: "inp_select_plugin_type_desc",
|
||||
iconName: "info",
|
||||
iconColor: "info",
|
||||
},
|
||||
],
|
||||
columns: { pc: 3, tablet: 4, mobile: 12 },
|
||||
};
|
||||
|
||||
const buttonSave = {
|
||||
id: uuidv4(),
|
||||
text: "action_save",
|
||||
disabled: false,
|
||||
color: "success",
|
||||
size: "normal",
|
||||
type: "submit",
|
||||
containerClass: "flex justify-center",
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
|
|
@ -94,19 +153,22 @@ onMounted(() => {
|
|||
</script>
|
||||
|
||||
<template>
|
||||
{{ data.filtered }}
|
||||
<Container
|
||||
:tag="'form'"
|
||||
method="POST"
|
||||
:containerClass="`col-span-12 w-full m-1 p-1`"
|
||||
:columns="props.columns"
|
||||
>
|
||||
<Container :containerClass="`grid grid-cols-12 col-span-12 w-full m-1 p-1`">
|
||||
<Container :containerClass="`grid grid-cols-12 col-span-12 w-full`">
|
||||
<Combobox
|
||||
v-bind="comboboxPlugin"
|
||||
:value="getFirstPlugin(props.template)"
|
||||
:values="getPluginNames(props.template)"
|
||||
@inp="data.currPlugin = $event"
|
||||
/>
|
||||
<Input v-bind="inpKeyword" />
|
||||
<Select v-bind="selectType" />
|
||||
</Container>
|
||||
<template v-for="plugin in props.template">
|
||||
<Container
|
||||
|
|
@ -129,5 +191,6 @@ onMounted(() => {
|
|||
</Container>
|
||||
</Container>
|
||||
</template>
|
||||
<Button v-bind="buttonSave" />
|
||||
</Container>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -91,18 +91,18 @@ onBeforeMount(() => {
|
|||
:columns="props.columns"
|
||||
>
|
||||
<Container
|
||||
v-if="data.modes.length > 0 && data.templates.length > 0"
|
||||
v-if="data.modes.length > 1 && data.templates.length > 1"
|
||||
:containerClass="`col-span-12 grid grid-cols-12`"
|
||||
>
|
||||
<Combobox
|
||||
v-if="data.templates.length"
|
||||
v-if="data.templates.length > 1"
|
||||
v-bind="comboboxTemplate"
|
||||
:value="data.currTemplateName"
|
||||
:values="data.templates"
|
||||
@inp="data.currTemplateName = $event"
|
||||
/>
|
||||
<Combobox
|
||||
v-if="data.modes.length"
|
||||
v-if="data.modes.length > 1"
|
||||
v-bind="comboboxModes"
|
||||
:value="data.currModeName"
|
||||
:values="data.modes"
|
||||
|
|
|
|||
|
|
@ -218,7 +218,9 @@ onMounted(() => {
|
|||
:required="props.required || false"
|
||||
:readonly="props.readonly || false"
|
||||
:disabled="props.disabled || false"
|
||||
:placeholder="props.placeholder || ''"
|
||||
:placeholder="
|
||||
props.placeholder ? $t(props.placeholder, props.placeholder) : ''
|
||||
"
|
||||
:pattern="props.pattern || '(?s).*'"
|
||||
:name="props.name"
|
||||
:value="inp.value"
|
||||
|
|
|
|||
|
|
@ -18,9 +18,8 @@ import { v4 as uuidv4 } from "uuid";
|
|||
size: "normal",
|
||||
iconName: "modal",
|
||||
iconColor: "white",
|
||||
attrs: [
|
||||
{ key: "modal", defaultValue: "close", clickValue: "open", targetId: "modal_id", valueExpanded: "open" },
|
||||
],
|
||||
attrs: { data-toggle: "modal", "data-target": "#modal"},
|
||||
|
||||
}
|
||||
@param {string} [id=uuidv4()] - Unique id of the button
|
||||
@param {string} text - Content of the button. Can be a translation key or by default raw text.
|
||||
|
|
@ -130,7 +129,11 @@ function setAttrs() {
|
|||
:type="props.type"
|
||||
ref="btnEl"
|
||||
:id="props.id"
|
||||
@click.prevent=""
|
||||
@click="
|
||||
(e) => {
|
||||
if (e.target.getAttribute('type') !== 'submit') e.preventDefault();
|
||||
}
|
||||
"
|
||||
:tabindex="props.tabId"
|
||||
:class="[buttonClass]"
|
||||
:disabled="props.disabled || false"
|
||||
|
|
|
|||
|
|
@ -94,6 +94,12 @@
|
|||
"inp_input_clipboard_desc": "Copy to clipboard.",
|
||||
"inp_input_password_desc": "Toggle hide/show password.",
|
||||
"inp_combobox_placeholder": "Search",
|
||||
"inp_search_settings": "Search settings",
|
||||
"inp_keyword": "keyword",
|
||||
"inp_search_settings_desc": "Search within description, setting name or setting id (SETTING_ID)",
|
||||
"inp_combobox_advanced_desc": "Switch between available plugins.",
|
||||
"inp_select_plugin_type": "plugin type",
|
||||
"inp_select_plugin_type_desc": "Only show plugins of the chosen type",
|
||||
"action_send": "send {name}",
|
||||
"action_start": "start {name}",
|
||||
"action_disable": "disable {name}",
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load diff
10
vuejs/client/src/utils/variables.js
Normal file
10
vuejs/client/src/utils/variables.js
Normal file
|
|
@ -0,0 +1,10 @@
|
|||
/**
|
||||
@name utils/variables.js
|
||||
@description This file contains useful variables that will be used in the application by default.
|
||||
This can be information about bunkerweb methods, available plugins type, etc...
|
||||
*/
|
||||
|
||||
const plugin_types = ["core", "external", "pro"];
|
||||
const default_modes = ["scheduler", "autoconf", "ui", "default"];
|
||||
|
||||
export { plugin_types, default_modes };
|
||||
|
|
@ -44,6 +44,94 @@ export default {
|
|||
"lg:col-span-10",
|
||||
"lg:col-span-11",
|
||||
"lg:col-span-12",
|
||||
"flex",
|
||||
"sm:flex",
|
||||
"md:flex",
|
||||
"lg:flex",
|
||||
"flex-col",
|
||||
"sm:flex-col",
|
||||
"md:flex-col",
|
||||
"lg:flex-col",
|
||||
"flex-row",
|
||||
"sm:flex-row",
|
||||
"md:flex-row",
|
||||
"lg:flex-row",
|
||||
"justify-center",
|
||||
"sm:justify-center",
|
||||
"md:justify-center",
|
||||
"lg:justify-center",
|
||||
"justify-start",
|
||||
"sm:justify-start",
|
||||
"md:justify-start",
|
||||
"lg:justify-start",
|
||||
"justify-end",
|
||||
"sm:justify-end",
|
||||
"md:justify-end",
|
||||
"lg:justify-end",
|
||||
"justify-between",
|
||||
"sm:justify-between",
|
||||
"md:justify-between",
|
||||
"lg:justify-between",
|
||||
"justify-start",
|
||||
"sm:justify-start",
|
||||
"md:justify-start",
|
||||
"lg:justify-start",
|
||||
"align-center",
|
||||
"sm:align-center",
|
||||
"md:align-center",
|
||||
"lg:align-center",
|
||||
"align-start",
|
||||
"sm:align-start",
|
||||
"md:align-start",
|
||||
"lg:align-start",
|
||||
"align-end",
|
||||
"sm:align-end",
|
||||
"md:align-end",
|
||||
"lg:align-end",
|
||||
"justify-content-center",
|
||||
"sm:justify-content-center",
|
||||
"md:justify-content-center",
|
||||
"lg:justify-content-center",
|
||||
"justify-content-start",
|
||||
"sm:justify-content-start",
|
||||
"md:justify-content-start",
|
||||
"lg:justify-content-start",
|
||||
"justify-content-end",
|
||||
"sm:justify-content-end",
|
||||
"md:justify-content-end",
|
||||
"lg:justify-content-end",
|
||||
"justify-content-between",
|
||||
"sm:justify-content-between",
|
||||
"md:justify-content-between",
|
||||
"lg:justify-content-between",
|
||||
"place-items-center",
|
||||
"sm:place-items-center",
|
||||
"md:place-items-center",
|
||||
"lg:place-items-center",
|
||||
"place-items-start",
|
||||
"sm:place-items-start",
|
||||
"md:place-items-start",
|
||||
"lg:place-items-start",
|
||||
"place-items-end",
|
||||
"sm:place-items-end",
|
||||
"md:place-items-end",
|
||||
"lg:place-items-end",
|
||||
"place-content-center",
|
||||
"sm:place-content-center",
|
||||
"md:place-content-center",
|
||||
"lg:place-content-center",
|
||||
"place-content-start",
|
||||
"sm:place-content-start",
|
||||
"md:place-content-start",
|
||||
"lg:place-content-start",
|
||||
"place-content-end",
|
||||
"sm:place-content-end",
|
||||
"md:place-content-end",
|
||||
"lg:place-content-end",
|
||||
"place-content-between",
|
||||
"sm:place-content-between",
|
||||
"md:place-content-between",
|
||||
"lg:place-content-between",
|
||||
],
|
||||
important: true,
|
||||
darkMode: "class",
|
||||
|
|
|
|||
6151
vuejs/test2.js
Normal file
6151
vuejs/test2.js
Normal file
File diff suppressed because it is too large
Load diff
|
|
@ -1,16 +0,0 @@
|
|||
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