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

select and combo max chars + fix width

Browse source
This commit is contained in:
Jordan Blasenhauer 2024-06-17 15:34:26 +02:00
parent 0691559f38
commit 2758ec03f6
7 changed files with 45 additions and 6 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
vuejs/client/input.css
View file

@ -1308,15 +1308,15 @@ body {
/* TABLE */
.table-container {
@apply appearance-none block col-span-12 overflow-x-auto overflow-y-hidden;
@apply w-full appearance-none block col-span-12 overflow-x-auto overflow-y-hidden;
}
.table-container-wrap {
@apply appearance-none block col-span-12 overflow-x-auto grid grid-cols-12;
@apply w-full appearance-none block col-span-12 overflow-x-auto grid grid-cols-12;
}
.table {
@apply appearance-none w-full grid grid-cols-12 block;
@apply appearance-none w-full grid grid-cols-12 col-span-12 block;
}
.sm.table {

2
vuejs/client/public/css/style.css
View file

File diff suppressed because one or more lines are too long

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

@ -42,6 +42,7 @@ import { v4 as uuidv4 } from "uuid";
@param {string} name - The name of the field. Case no label, this is the fallback. Can be a translation key or by default raw text.
@param {string} value
@param {array} values
@param {string} [maxBtnChars=""] - Max char to display in the dropdown button handler.
@param {array} [popovers] - List of popovers to display more information
@param {string} [inpType="select"] - The type of the field, useful when we have multiple fields in the same container to display the right field
@param {boolean} [disabled=false]
@ -78,6 +79,11 @@ const props = defineProps({
required: true,
default: [],
},
maxBtnChars: {
type: [String, Number],
required: false,
default: "",
},
inpType: {
type: String,
required: false,
@ -337,7 +343,15 @@ const emits = defineEmits(["inp"]);
]"
>
<span :id="`${props.id}-text`" class="select-btn-name">
{{ select.value || props.value }}
{{
(props.maxBtnChars && select.value) ||
props.value > props.maxBtnChars
? `${
select.value.substring(0, props.maxBtnChars) ||
props.value.substring(0, props.maxBtnChars)
}...`
: select.value || props.value
}}
</span>
<!-- chevron -->
<svg

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

@ -37,6 +37,7 @@ import { v4 as uuidv4 } from "uuid";
@param {array} values
@param {array} [popovers] - List of popovers to display more information
@param {string} [inpType="select"] - The type of the field, useful when we have multiple fields in the same container to display the right field
@param {string} [maxBtnChars=""] - Max char to display in the dropdown button handler.
@param {boolean} [disabled=false]
@param {boolean} [required=false]
@param {array} [requiredValues=[]] - values that need to be selected to be valid, works only if required is true
@ -75,6 +76,11 @@ const props = defineProps({
required: false,
default: "select",
},
maxBtnChars: {
type: [String, Number],
required: false,
default: "",
},
disabled: {
type: Boolean,
required: false,
@ -313,7 +319,15 @@ const emits = defineEmits(["inp"]);
]"
>
<span :id="`${props.id}-text`" class="select-btn-name">
{{ select.value || props.value }}
{{
(props.maxBtnChars && select.value) ||
props.value > props.maxBtnChars
? `${
select.value.substring(0, props.maxBtnChars) ||
props.value.substring(0, props.maxBtnChars)
}...`
: select.value || props.value
}}
</span>
<!-- chevron -->
<svg

5
vuejs/client/src/pages/test/Test.vue
View file

@ -533,6 +533,7 @@ const tableData = {
},
overflowAttrEl: "data-table-body",
containerClass: "table",
maxBtnChars: 16,
popovers: [
{
iconColor: "info",
@ -693,6 +694,7 @@ const tableData = {
},
overflowAttrEl: "data-table-body",
containerClass: "table",
maxBtnChars: 16,
popovers: [
{
iconColor: "info",
@ -807,6 +809,7 @@ const tableData = {
},
overflowAttrEl: "data-table-body",
containerClass: "table",
maxBtnChars: 16,
popovers: [
{
iconColor: "info",
@ -875,6 +878,7 @@ const tableData = {
},
overflowAttrEl: "data-table-body",
containerClass: "table",
maxBtnChars: 16,
popovers: [
{
iconColor: "info",
@ -993,6 +997,7 @@ const tableData = {
},
overflowAttrEl: "data-table-body",
containerClass: "table",
maxBtnChars: 16,
popovers: [
{
iconColor: "info",

5
vuejs/jobs.json
View file

@ -474,6 +474,7 @@
},
"overflowAttrEl": "data-table-body",
"containerClass": "table",
"maxBtnChars": 16,
"popovers": [
{
"iconColor": "info",
@ -637,6 +638,7 @@
},
"overflowAttrEl": "data-table-body",
"containerClass": "table",
"maxBtnChars": 16,
"popovers": [
{
"iconColor": "info",
@ -754,6 +756,7 @@
},
"overflowAttrEl": "data-table-body",
"containerClass": "table",
"maxBtnChars": 16,
"popovers": [
{
"iconColor": "info",
@ -825,6 +828,7 @@
},
"overflowAttrEl": "data-table-body",
"containerClass": "table",
"maxBtnChars": 16,
"popovers": [
{
"iconColor": "info",
@ -943,6 +947,7 @@
},
"overflowAttrEl": "data-table-body",
"containerClass": "table",
"maxBtnChars": 16,
"popovers": [
{
"iconColor": "info",

1
vuejs/test3.py
View file

@ -50,6 +50,7 @@ def jobs_to_list(jobs):
},
"overflowAttrEl" : "data-table-body",
"containerClass" : "table",
"maxBtnChars" : 12,
"popovers": [
{
"iconColor": "info",