studio-variable/designtopack
3
0
Fork 0
Code Issues 7 Pull requests Projects Releases Packages Wiki Activity Actions

mutiselect inputs loading

Browse source
This commit is contained in:
isUnknown 2025-06-06 10:04:06 +02:00
parent 92007f7161
commit c133cee10c
2 changed files with 26 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

18
src/components/Selector.vue
View file

@ -8,13 +8,15 @@
<MultiSelect <MultiSelect
v-if="isCompareModeEnabled" v-if="isCompareModeEnabled"
id="selector-multiselect"
v-model="currentValue" v-model="currentValue"
:options="items" :options="items"
optionLabel="title" optionLabel="title"
filter
placeholder="Select Cities" placeholder="Select Cities"
:maxSelectedLabels="3" :maxSelectedLabels="3"
class="w-full md:w-80" class="font-serif"
data-icon="chevron-single-down"
checkmark
/> />
<Select <Select
@ -28,7 +30,7 @@
checkmark checkmark
> >
<template #value="slotProps"> <template #value="slotProps">
<p v-if="currentValue && !Array.isArray(currentValue)"> <p v-if="currentValue">
{{ currentValue.title }} {{ currentValue.title }}
</p> </p>
<p v-else>Selectionnez</p> <p v-else>Selectionnez</p>
@ -63,10 +65,18 @@ const { items, label, isCompareModeEnabled } = defineProps({
const emit = defineEmits(['update:selectedItems']); const emit = defineEmits(['update:selectedItems']);
const currentValue = ref(isCompareModeEnabled ? [] : null); const currentValue = ref(null);
const { activeTracks } = storeToRefs(useDialogStore()); const { activeTracks } = storeToRefs(useDialogStore());
watch(
() => isCompareModeEnabled,
(newValue) => {
if (newValue)
currentValue.value = currentValue.value ? [currentValue.value] : [];
}
);
watch(currentValue, (newValue) => { watch(currentValue, (newValue) => {
if ( if (
newValue !== null && newValue !== null &&

22
src/main.js
View file

@ -1,11 +1,12 @@
import { createApp } from "vue"; import { createApp } from 'vue';
import "./assets/css/index.css"; import './assets/css/index.css';
import App from "./App.vue"; import App from './App.vue';
import { createPinia } from "pinia"; import { createPinia } from 'pinia';
import PrimeVue from "primevue/config"; import PrimeVue from 'primevue/config';
import ToastService from "primevue/toastservice"; import ToastService from 'primevue/toastservice';
import Select from "primevue/select"; import Select from 'primevue/select';
import { router } from "./router/router.js"; import MultiSelect from 'primevue/multiselect';
import { router } from './router/router.js';
const app = createApp(App); const app = createApp(App);
const pinia = createPinia(); const pinia = createPinia();
@ -16,5 +17,6 @@ app.use(PrimeVue, {
}); });
app.use(ToastService); app.use(ToastService);
app.use(router); app.use(router);
app.component("Select", Select); app.component('Select', Select);
app.mount("#app"); app.component('MultiSelect', MultiSelect);
app.mount('#app');