speatzle/nfsense
1
0
Fork 0
mirror of https://github.com/speatzle/nfsense.git synced 2025-05-10 18:38:22 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

Change Array Display flex order

Browse source
This commit is contained in:
Samuel Lorch 2024-07-30 23:43:45 +02:00
parent 439d105858
commit 1bf33e54b3
2 changed files with 13 additions and 2 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

9
client/src/components/display/ArrayDisplay.vue
View file

@ -3,20 +3,25 @@ const props = withDefaults(defineProps<{
data: any[], data: any[],
component?: string, component?: string,
componentProp?: '', componentProp?: '',
ellipsis?: number ellipsis?: number,
empty?: string
}>(), { }>(), {
data: () => [], data: () => [],
component: '', component: '',
componentProp: '', componentProp: '',
ellipsis: 10, ellipsis: 10,
empty: '',
}); });
</script> </script>
<template> <template>
<div class="pillbar"> <div v-if="props.data.length != 0" class="pillstack">
<div v-for="(item, index) of props.data.slice(0, ellipsis)" :key="index" class="pill"> <div v-for="(item, index) of props.data.slice(0, ellipsis)" :key="index" class="pill">
<component v-bind="{[props.componentProp]: item}" :is="props.component" v-if="props.component !== ''"/> <component v-bind="{[props.componentProp]: item}" :is="props.component" v-if="props.component !== ''"/>
<template v-else>{{ item }}</template> <template v-else>{{ item }}</template>
</div> </div>
<div v-if="props.data.length >= props.ellipsis" class="pill">...</div> <div v-if="props.data.length >= props.ellipsis" class="pill">...</div>
</div> </div>
<div v-else>
{{ props.empty }}
</div>
</template> </template>

6
client/src/global-styles/components.css
View file

@ -128,6 +128,12 @@ tbody tr.selected {
gap: 0.25rem; gap: 0.25rem;
} }
.pillstack {
align-content: flex-start;
align-items: flex-start;
gap: 0.25rem;
}
.pill { .pill {
border: 1px solid var(--cl-fg); border: 1px solid var(--cl-fg);
padding: 0.25rem; padding: 0.25rem;