92 lines
1.8 KiB
Vue
92 lines
1.8 KiB
Vue
<script setup>
|
|
import { computed } from "vue";
|
|
import Select from "primevue/select";
|
|
import { useCompanyStore } from "@/stores/company";
|
|
|
|
const companyStore = useCompanyStore();
|
|
|
|
const companyOptions = computed(() =>
|
|
companyStore.companies.map((company) => ({ label: company, value: company })),
|
|
);
|
|
|
|
const selectedCompany = computed({
|
|
get: () => companyStore.selectedCompany,
|
|
set: (value) => companyStore.setSelectedCompany(value),
|
|
});
|
|
|
|
const fontSize = computed(() => {
|
|
const len = selectedCompany.value.length;
|
|
if (len > 12) return '0.75rem';
|
|
if (len > 10) return '0.8rem';
|
|
return '0.875rem';
|
|
});
|
|
</script>
|
|
|
|
<template>
|
|
<div class="company-selector">
|
|
<Select
|
|
v-model="selectedCompany"
|
|
:options="companyOptions"
|
|
option-label="label"
|
|
option-value="value"
|
|
placeholder="Select Company"
|
|
class="company-select"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.company-selector {
|
|
margin-bottom: 6px;
|
|
}
|
|
|
|
.company-select {
|
|
width: 170px;
|
|
}
|
|
|
|
:deep(.p-select) {
|
|
border-radius: 6px;
|
|
border: 1px solid var(--surface-border);
|
|
background-color: var(--surface-card);
|
|
color: var(--text-color);
|
|
transition: all 0.2s ease;
|
|
}
|
|
|
|
:deep(.p-select:hover) {
|
|
border-color: var(--theme-primary);
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
:deep(.p-select.p-focus) {
|
|
border-color: var(--theme-primary);
|
|
box-shadow: 0 0 0 1px var(--theme-primary);
|
|
}
|
|
|
|
:deep(.p-select .p-select-label) {
|
|
padding: 0.5rem 0.75rem;
|
|
font-size: v-bind(fontSize);
|
|
font-weight: 500;
|
|
white-space: nowrap;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
}
|
|
|
|
:deep(.p-select .p-select-trigger) {
|
|
padding: 0 0.75rem;
|
|
}
|
|
|
|
:deep(.p-select-overlay) {
|
|
border-radius: 6px;
|
|
border: 1px solid var(--surface-border);
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
:deep(.p-select-option) {
|
|
padding: 0.5rem 0.75rem;
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
:deep(.p-select-option:hover) {
|
|
background-color: var(--surface-hover);
|
|
}
|
|
</style>
|