ramon
/
vbv
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Make dropdown component usable as heading

This commit is contained in:
Ramon Wenger 2024-11-13 16:48:35 +01:00
parent eb1d814680
commit abe60e7468
2 changed files with 24 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

30
client/src/components/ui/ItDropdownSelect.vue
View File

@ -9,6 +9,8 @@ interface Props {
items?: DropdownSelectable[]; items?: DropdownSelectable[];
borderless?: boolean; borderless?: boolean;
placeholderText?: string | null; placeholderText?: string | null;
asHeading?: boolean; // style the dropdown to be used as a page heading
typeName?: string; // to display the type of the selected item, e.g. `Circle: Fahrzeug` instead of `Fahrzeug`
} }
const emit = defineEmits<{ const emit = defineEmits<{
@ -24,6 +26,8 @@ const props = withDefaults(defineProps<Props>(), {
}, },
items: () => [], items: () => [],
placeholderText: null, placeholderText: null,
asHeading: false,
typeName: "",
}); });
const dropdownSelected = computed<DropdownSelectable>({ const dropdownSelected = computed<DropdownSelectable>({
@ -36,26 +40,34 @@ const dropdownSelected = computed<DropdownSelectable>({
<Listbox v-model="dropdownSelected" as="div"> <Listbox v-model="dropdownSelected" as="div">
<div class="relative w-full"> <div class="relative w-full">
<ListboxButton <ListboxButton
class="relative flex w-full cursor-default flex-row items-center bg-white py-3 pl-5 pr-10 text-left" :class="[
:class="{ {
border: !props.borderless, border: !borderless && !asHeading,
'font-bold': !props.borderless, 'font-bold': !borderless,
}" },
asHeading
? 'group flex w-full items-center gap-1 rounded-md bg-transparent px-3 text-base focus:outline-none'
: 'relative flex w-full cursor-default flex-row items-center bg-white py-3 pl-5 pr-10 text-left',
]"
data-cy="dropdown-select" data-cy="dropdown-select"
> >
<span v-if="dropdownSelected.iconName" class="mr-4"> <span v-if="dropdownSelected.iconName" class="mr-4">
<component :is="dropdownSelected.iconName"></component> <component :is="dropdownSelected.iconName"></component>
</span> </span>
<span class="block truncate"> <span class="block h-11 truncate text-4xl">
{{ dropdownSelected.name }} {{ typeName }} {{ dropdownSelected.name }}
<span v-if="placeholderText && !dropdownSelected.name" class="text-gray-900"> <span v-if="placeholderText && !dropdownSelected.name" class="text-gray-900">
{{ placeholderText }} {{ placeholderText }}
</span> </span>
</span> </span>
<span <span
class="pointer-events-none absolute inset-y-0 right-0 flex items-center pr-2" class="pointer-events-none flex items-center pr-2"
:class="asHeading ? '' : 'absolute inset-y-0 right-0'"
> >
<it-icon-arrow-down class="h-5 w-5" aria-hidden="true" /> <it-icon-arrow-down
:class="asHeading ? 'h-12 w-12' : 'h-5 w-5'"
aria-hidden="true"
/>
</span> </span>
</ListboxButton> </ListboxButton>

4
client/src/pages/cockpit/cockpitPage/CockpitExpertHomePage.vue
View File

@ -19,10 +19,12 @@ const props = defineProps<{
</script> </script>
<template> <template>
<div v-if="expertCockpitStore.circles?.length"> <div v-if="expertCockpitStore.circles?.length">
<div v-if="expertCockpitStore.currentCircle" class="container-large"> <div v-if="expertCockpitStore.currentCircle" class="container-large pt-10">
<div class="mb-9 flex flex-col lg:flex-row lg:items-center lg:justify-between"> <div class="mb-9 flex flex-col lg:flex-row lg:items-center lg:justify-between">
<ItDropdownSelect <ItDropdownSelect
:as-heading="true"
:model-value="expertCockpitStore.currentCircle" :model-value="expertCockpitStore.currentCircle"
type-name="Circle:"
class="mt-4 w-full lg:mt-0 lg:w-96" class="mt-4 w-full lg:mt-0 lg:w-96"
:items="expertCockpitStore.circles" :items="expertCockpitStore.circles"
@update:model-value="expertCockpitStore.setCurrentCourseCircleFromEvent" @update:model-value="expertCockpitStore.setCurrentCourseCircleFromEvent"