Elgato_dark/bunkerweb
1
0
Fork 0
mirror of https://github.com/bunkerity/bunkerweb synced 2026-05-24 09:28:37 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

force position down on drop

Browse source
This commit is contained in:
Jordan Blasenhauer 2024-06-17 14:03:15 +02:00
parent ea55ded3e7
commit 4252120e17
4 changed files with 27 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
vuejs/client/src/components/Form/Advanced.vue
View file

@ -190,6 +190,7 @@ const comboboxPlugin = {
name: uuidv4(),
disabled: false,
required: false,
onlyDown: true,
label: "dashboard_plugins",
popovers: [
{
@ -224,6 +225,7 @@ const selectType = {
// add 'all' as first value
values: ["all"].concat(plugin_types),
name: uuidv4(),
onlyDown: true,
label: "inp_select_plugin_type",
popovers: [
{
@ -241,6 +243,7 @@ const selectContext = {
// add 'all' as first value
values: ["all", "multisite", "global"],
name: uuidv4(),
onlyDown: true,
label: "inp_select_plugin_context",
popovers: [
{

1
vuejs/client/src/components/Form/Templates.vue
View file

@ -58,6 +58,7 @@ const comboboxModes = {
name: uuidv4(),
disabled: false,
required: false,
onlyDown: true,
label: "dashboard_modes",
columns: { pc: 4, tablet: 6, mobile: 12 },
};

15
vuejs/client/src/components/Forms/Field/Combobox.vue
View file

@ -49,6 +49,7 @@ import { v4 as uuidv4 } from "uuid";
@param {array} [requiredValues=[]] - values that need to be selected to be valid, works only if required is true
@param {object} [columns={"pc": "12", "tablet": "12", "mobile": "12}] - Field has a grid system. This allow to get multiple field in the same row if needed.
@param {boolean} [hideLabel=false]
@param {boolean} [onlyDown=false] - If the dropdown should check the bottom of the container
@param {string} [containerClass=""]
@param {string} [inpClass=""]
@param {string} [headerClass=""]
@ -111,6 +112,11 @@ const props = defineProps({
type: Boolean,
required: false,
},
onlyDown: {
type: Boolean,
required: false,
default: false,
},
containerClass: {
type: String,
required: false,
@ -189,10 +195,11 @@ function toggleSelect() {
const parentRect = parent.getBoundingClientRect();
const canBeDown =
fieldContainerRect.bottom + selectDropRect.height < parentRect.bottom
? true
: false;
const canBeDown = props.onlyDown
? true
: fieldContainerRect.bottom + selectDropRect.height < parentRect.bottom
? true
: false;
if (!canBeDown) {
selectDropdown.value.style.top = `-${

17
vuejs/client/src/components/Forms/Field/Select.vue
View file

@ -42,6 +42,7 @@ import { v4 as uuidv4 } from "uuid";
@param {array} [requiredValues=[]] - values that need to be selected to be valid, works only if required is true
@param {object} [columns={"pc": "12", "tablet": "12", "mobile": "12}] - Field has a grid system. This allow to get multiple field in the same row if needed.
@param {boolean} [hideLabel=false]
@param {boolean} [onlyDown=false] - If the dropdown should check the bottom of the container
@param {string} [containerClass=""]
@param {string} [inpClass=""]
@param {string} [headerClass=""]
@ -99,6 +100,11 @@ const props = defineProps({
required: false,
default: [],
},
onlyDown: {
type: Boolean,
required: false,
default: false,
},
hideLabel: {
type: Boolean,
required: false,
@ -153,7 +159,7 @@ function toggleSelect() {
// Get field container rect
const fieldContainer = selectBtn.value.closest("[data-field-container]");
const parent = fieldContainer.parentElement;
console.log("dzq");
// Update position only if parent has overflow
const isOverflow = parent.scrollHeight > parent.clientHeight ? true : false;
if (!isOverflow) return;
@ -165,10 +171,11 @@ function toggleSelect() {
const parentRect = parent.getBoundingClientRect();
const canBeDown =
fieldContainerRect.bottom + selectDropRect.height < parentRect.bottom
? true
: false;
const canBeDown = props.onlyDown
? true
: fieldContainerRect.bottom + selectDropRect.height < parentRect.bottom
? true
: false;
console.log(canBeDown);