start filter logic

This commit is contained in:
Jordan Blasenhauer 2024-06-10 22:56:47 +02:00
parent 7409a997ef
commit 9f2969d312
13 changed files with 12495 additions and 6072 deletions

View file

@ -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

View 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>

View file

@ -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>

View file

@ -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"

View file

@ -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"

View file

@ -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"

View file

@ -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

View 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 };

View file

@ -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

File diff suppressed because it is too large Load diff

View file

@ -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)