draft pref

src/auth.ts

@@ -1,5 +1,5 @@
 import log from "loglevel";
-import { Log, User, UserManager } from "oidc-client-ts";
+import { Log, User, UserManager, WebStorageStateStore } from "oidc-client-ts";
 import { defineStore } from "pinia";
 import { computed, ref } from "vue";
 
@@ -11,7 +11,9 @@ export const useAuthStore = defineStore('auth', () => {
         client_id: import.meta.env.VITE_AUTH_CLIENT_ID,
         client_secret: import.meta.env.VITE_AUTH_CLIENT_SECRET,
         redirect_uri: import.meta.env.VITE_AUTH_REDIRECT_URI,
-        scope: import.meta.env.VITE_AUTH_SCOPE
+        scope: import.meta.env.VITE_AUTH_SCOPE,
+        stateStore: new WebStorageStateStore({ store: window.localStorage }),
+        userStore: new WebStorageStateStore({ store: window.localStorage })
     });
 
     const user = ref<User>();

src/components/Modal.vue

@@ -1,24 +1,11 @@
 <script setup lang="ts">
 import { vOnClickOutside } from '@vueuse/components';
-import { useEventListener, useVModel } from '@vueuse/core';
+import { useEventListener } from '@vueuse/core';
 import { watch } from 'vue';
 
-interface Props {
-    open: boolean;
-}
+const open = defineModel('open', { default: false });
 
-interface Emit {
-    (e: 'update:open', value: boolean): void;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    open: false,
-});
-const emit = defineEmits<Emit>();
-
-const isOpen = useVModel(props, 'open', emit, {passive: true});
-
-watch(isOpen, value => {
+watch(open, value => {
     if (value) {
         document.body.classList.add('overflow-hidden');
     } else {
@@ -27,18 +14,18 @@ watch(isOpen, value => {
 });
 useEventListener('keyup', e => {
     if (e.key === 'Escape') {
-        isOpen.value = false;
+        open.value = false;
     }
 });
 </script>
 
 <template>
     <Transition name="fade">
-        <template v-if="isOpen">
+        <template v-if="open">
             <div class="fixed inset-0 z-10">
                 <div class="absolute bg-black opacity-80 inset-0 z-0" />
                 <div class="absolute grid inset-0">
-                    <div class="justify-self-center m-auto" v-on-click-outside="() => isOpen = false">
+                    <div class="justify-self-center m-auto" v-on-click-outside="() => open = false">
                         <slot />
                     </div>
                 </div>

src/components/SliderCheckbox.vue

@@ -1,24 +1,11 @@
 <script setup lang="ts">
-import { useVModel } from '@vueuse/core';
 
-interface Props {
-    modelValue?: boolean;
-}
-interface Emits {
-    (e: 'update:modelValue', value: boolean): void;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    modelValue: false
-});
-const emit = defineEmits<Emits>();
-
-const value = useVModel(props, 'modelValue', emit);
+const modelValue = defineModel({ default: false });
 </script>
 
 <template>
     <label class="flex items-center relative w-max cursor-pointer select-none">
-        <input type="checkbox" class="appearance-none transition-colors cursor-pointer w-10 h-5 rounded-full checked:bg-emerald-500 peer" v-model="value" />
+        <input type="checkbox" class="appearance-none transition-colors cursor-pointer w-10 h-5 rounded-full checked:bg-emerald-500 peer" v-model="modelValue" />
         <span class="w-5 h-5 right-5 absolute rounded-full transform transition-transform bg-slate-100 peer-checked:bg-emerald-200" />
     </label>
 </template>

src/components/tooltip/Tooltip.vue

@@ -1,23 +1,10 @@
 <script setup lang="ts">
 import { vElementHover } from '@vueuse/components';
-import { useElementBounding, useVModel } from '@vueuse/core';
+import { useElementBounding } from '@vueuse/core';
 import { computed, ref } from 'vue';
 import { useSharedWindowSize } from './tooltip';
 
-interface Props {
-    open: boolean;
-}
-
-interface Emit {
-    (e: 'update:open', value: boolean): void;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    open: false,
-});
-const emit = defineEmits<Emit>();
-
-const isOpen = useVModel(props, 'open', emit, {passive: true});
+const open = defineModel('open', { default: false });
 
 const { width, height } = useSharedWindowSize();
 const mainDiv = ref<HTMLDivElement | null>(null);
@@ -39,16 +26,16 @@ const positions = computed(() => {
 
 <template>
     <div ref="mainDiv" clas="flex flex-col items-center justify-center" :class="{
-        'open': isOpen,
+        'open': open,
         'tooltip-top': positions.includes('top'),
         'tooltip-bottom': positions.includes('bottom'),
         'tooltip-left': positions.includes('left'),
         'tooltip-right': positions.includes('right')
     }">
-        <div v-element-hover="(h: boolean) => isOpen = h" class="m-auto header">
+        <div v-element-hover="(h: boolean) => open = h" class="m-auto header">
             <slot name="header" />
         </div>
-        <div v-if="isOpen" class="m-auto">
+        <div v-if="open" class="m-auto">
             <div class="z-10 relative">
                 <div class="absolute">
                     <slot />

src/market/RegionalMarketCache.spec.ts

@@ -0,0 +1,35 @@
+import { describe, expect, test } from 'vitest'
+import { RegionalMarketCache } from './RegionalMarketCache'
+
+describe('RegionalMarketCache', () => {
+    test('should cache and retrieve values', async () => {
+        const cache = new RegionalMarketCache<string>(1000)
+
+        cache.set(1, 1, 'test')
+        expect(cache.get(1, 1)).toBe('test')
+    })
+
+    test('should remove values', async () => {
+        const cache = new RegionalMarketCache<string>(1000)
+
+        cache.set(1, 1, 'test')
+        cache.remove(1, 1)
+        expect(cache.get(1, 1)).toBeUndefined()
+    })
+
+    test('should compute values if absent', async () => {
+        const cache = new RegionalMarketCache<string>(1000)
+        const value = await cache.computeIfAbsent(1, 1, () => Promise.resolve('test'))
+
+        expect(value).toBe('test')
+        expect(cache.get(1, 1)).toBe('test')
+    })
+
+    test('should expire values', async () => {
+        const cache = new RegionalMarketCache<string>(1)
+
+        cache.set(1, 1, 'test')
+        await new Promise(resolve => setTimeout(resolve, 10))
+        expect(cache.get(1, 1)).toBeUndefined()
+    })
+})

src/market/RegionalMarketCache.ts

@@ -0,0 +1,50 @@
+class CacheEntry<T> {
+    public value: T;
+    public expiration: Date;
+
+    constructor(value: T, expiration: Date) {
+        this.value = value;
+        this.expiration = expiration;
+    }
+}
+
+export type ExpirationSupplier<T> = (v: T) => Date;
+
+export class RegionalMarketCache<T>  {
+    private cache: Record<number, Record<number, CacheEntry<T>>>;
+    private expirationSupplier: (v: T) => Date;
+
+    constructor(expiration: ExpirationSupplier<T> | number) {
+        this.cache = {};
+        this.expirationSupplier = expiration instanceof Function ? expiration : () => new Date(Date.now() + expiration);
+    }
+
+    public get(regionId: number, typeId: number): T | undefined {
+        const entry = this.cache[regionId]?.[typeId];
+
+        if (entry && entry.expiration > new Date()) {
+            return entry.value;
+        }
+        this.remove(regionId, typeId);
+        return undefined;
+    }
+
+    public set(regionId: number, typeId: number, value: T): void {
+        this.cache[regionId] = this.cache[regionId] ?? {};
+        this.cache[regionId][typeId] = new CacheEntry(value, this.expirationSupplier(value));
+    }
+
+    public remove(regionId: number, typeId: number): void {
+        delete this.cache[regionId]?.[typeId];
+    }
+
+    public async computeIfAbsent(regionId: number, typeId: number, supplier: () => (Promise<T> | T)): Promise<T> {
+        let value = this.get(regionId, typeId);
+
+        if (!value) {
+            value = await supplier();
+            this.set(regionId, typeId, value);
+        }
+        return value;
+    }
+};

src/market/acquisition/AcquisitionQuantilsTooltip.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { LoadingSpinner, Tooltip } from '@/components';
 import { formatIsk } from '@/formaters';
-import { getHistory, getHistoryQuartils, jitaId } from '@/market';
+import { getHistory, getHistoryQuartils } from '@/market';
 import { ArrowTrendingDownIcon, ArrowTrendingUpIcon } from '@heroicons/vue/24/outline';
 import { computedAsync } from '@vueuse/core';
 import { ref, watchEffect } from 'vue';
@@ -22,7 +22,7 @@ const q1 = ref(0);
 const median = ref(0);
 const q3 = ref(0);
 const lineColor = ref('');
-const history = computedAsync(() => getHistory(jitaId, props.id), []);
+const history = computedAsync(() => getHistory(props.id), []);
 
 watchEffect(async () => {
     if (!open.value || !props.id) {

src/market/acquisition/acquisition.ts

@@ -1,4 +1,5 @@
 import { marbasAxiosInstance, MarbasObject } from "@/marbas";
+import { AxiosResponse } from "axios";
 import log from "loglevel";
 import { defineStore } from "pinia";
 import { computed, ref } from "vue";
@@ -15,6 +16,17 @@ export type MarbasAcquiredType = MarbasObject & {
     user: number;
 }
 
+type RawMarbasAcquiredType =  Omit<MarbasAcquiredType, 'date'> & {
+    date: string;
+}
+
+type InsertableRawMarbasAcquiredType =  Omit<MarbasAcquiredType, 'id' | 'user' | 'date'>;
+
+const mapRawMarbasAcquiredType = (raw: RawMarbasAcquiredType): MarbasAcquiredType => ({
+    ...raw,
+    date: raw.date ? new Date(raw.date) : new Date()
+});
+
 const endpoint = '/api/acquisitions/';
 
 export const useAcquiredTypesStore = defineStore('market-acquisition', () => {
@@ -22,14 +34,13 @@ export const useAcquiredTypesStore = defineStore('market-acquisition', () => {
 
     const types = computed(() => acquiredTypes.value.filter(item => item.remaining > 0));
     const addAcquiredType = async (type: number, quantity: number, price: number, source?: AcquiredTypeSource) => { 
-        const newItem = (await marbasAxiosInstance.post<MarbasAcquiredType>(endpoint, {
+        const newItem = mapRawMarbasAcquiredType((await marbasAxiosInstance.post<RawMarbasAcquiredType, AxiosResponse<RawMarbasAcquiredType>, InsertableRawMarbasAcquiredType>(endpoint, {
             type: type,
             quantity: quantity,
             remaining: quantity,
             price: price,
-            date: new Date(),
             source: source ?? 'misc', 
-        })).data
+        })).data);
 
         acquiredTypes.value = [...acquiredTypes.value, newItem];
         log.info(`Acquired type ${newItem.id} with quantity ${newItem.quantity} and price ${newItem.price}`, newItem);
@@ -57,7 +68,7 @@ export const useAcquiredTypesStore = defineStore('market-acquisition', () => {
         log.info(`Acquired type ${item.id} remaining: ${item.remaining}`, item);
     };
     
-    marbasAxiosInstance.get<MarbasAcquiredType[]>(endpoint).then(res => acquiredTypes.value = res.data.map(item => ({ ...item, date: new Date(item.date) })));
+    marbasAxiosInstance.get<RawMarbasAcquiredType[]>(endpoint).then(res => acquiredTypes.value = res.data.map(mapRawMarbasAcquiredType));
 
     return { acquiredTypes: types, addAcquiredType, removeAcquiredType };
 });

src/market/appraisal/appraisal.ts

@@ -1,15 +1,11 @@
 import { defineStore } from 'pinia';
-import { ref } from 'vue';
+import { RegionalMarketCache } from '../RegionalMarketCache';
+import { jitaId } from '../market';
 import { MarketType } from "../type";
 import { MarketTypePrice } from './MarketTypePrice';
 import { getEvepraisalPrices } from './evepraisal';
 import { getfuzzworkPrices } from './fuzzwork';
 
-type MarketTypePriceCache = {
-    price: MarketTypePrice,
-    date: Date
-}
-
 const cacheDuration = 1000 * 60 * 5; // 5 minutes
 const priceGetters = {
     evepraisal: getEvepraisalPrices,
@@ -17,21 +13,21 @@ const priceGetters = {
 }
 
 export const useApraisalStore = defineStore('appraisal', () => {
-    const cache = ref<Record<number, MarketTypePriceCache>>({});
+    const cache: RegionalMarketCache<MarketTypePrice> = new RegionalMarketCache(cacheDuration);
 
     const getPricesUncached = priceGetters.fuzzwork;
 
-    const getPrice = async (type: MarketType): Promise<MarketTypePrice> => (await getPrices([type]))[0];
-    const getPrices = async (types: MarketType[]): Promise<MarketTypePrice[]> => {
-        const now = new Date();
+    const getPrice = async (type: MarketType, regionId?: number): Promise<MarketTypePrice> => (await getPrices([type], regionId))[0];
+    const getPrices = async (types: MarketType[], regionId?: number): Promise<MarketTypePrice[]> => {
         const cached: MarketTypePrice[] = [];
         const uncached: MarketType[] = [];
+        const rId = regionId ?? jitaId;
 
         types.forEach(t => {
-            const cachedPrice = cache.value[t.id];
+            const cachedPrice = cache.get(rId, t.id);
 
-            if (cachedPrice && now.getTime() - cachedPrice.date.getTime() < cacheDuration) {
-                cached.push(cachedPrice.price);
+            if (cachedPrice) {
+                cached.push(cachedPrice);
             } else {
                 uncached.push(t);
             }
@@ -40,8 +36,8 @@ export const useApraisalStore = defineStore('appraisal', () => {
         if (uncached.length > 0) {
             const prices = await getPricesUncached(uncached);
 
-            prices.forEach(p => cache.value[p.type.id] = { price: p, date: now });
-            return [...cached, ...prices];
+            prices.forEach(p => cache.set(rId, p.type.id, p));
+            return [ ...cached, ...prices ];
         }
         return cached;
     };

src/market/history/EsiMarketOrderHistory.ts

@@ -1,4 +1,6 @@
 import { esiAxiosInstance } from "@/service";
+import { RegionalMarketCache } from '../RegionalMarketCache';
+import { jitaId } from "../market";
 
 
 export type EsiMarketOrderHistory = {
@@ -11,16 +13,18 @@ export type EsiMarketOrderHistory = {
 }
 
 // TODO use pinia store
-const historyCache: { [key: number]: { [key: number]: EsiMarketOrderHistory[] } } = {};
+const historyCache: RegionalMarketCache<EsiMarketOrderHistory[]> = new RegionalMarketCache(() => {
+    const date = new Date();
 
-export const getHistory = async (regionId: number, tyeId: number): Promise<EsiMarketOrderHistory[]> => {
-    if (historyCache[regionId]?.[tyeId]) {
-        return historyCache[regionId][tyeId];
+    if (date.getUTCHours() >= 11) {
+        date.setUTCDate(date.getUTCDate() + 1);
     }
+    date.setUTCHours(11, 0, 0, 0);
+    return date;
+});
 
-    const value = (await esiAxiosInstance.get(`/markets/${regionId}/history/`, { params: { type_id: tyeId } })).data;
+export const getHistory = async (tyeId: number, regionId?: number): Promise<EsiMarketOrderHistory[]> => {
+    const rId = regionId ?? jitaId;
 
-    historyCache[regionId] = historyCache[regionId] ?? {};
-    historyCache[regionId][tyeId] = value;
-    return value;
+    return historyCache.computeIfAbsent(rId, tyeId, async () => (await esiAxiosInstance.get(`/markets/${rId}/history/`, { params: { type_id: tyeId } })).data);
 }

src/market/index.ts

@@ -1,3 +1,4 @@
+export * from './RegionalMarketCache';
 export * from './history';
 export * from './tax';
 export * from './type';

src/market/tracking/tracking.ts

@@ -1,5 +1,5 @@
 import { marbasAxiosInstance, MarbasObject } from "@/marbas";
-import { EsiMarketOrderHistory, getHistory, jitaId, MarketType, MarketTypePrice } from "@/market";
+import { EsiMarketOrderHistory, getHistory, MarketType, MarketTypePrice } from "@/market";
 import log from "loglevel";
 import { defineStore } from "pinia";
 import { computed, ref } from "vue";
@@ -47,4 +47,4 @@ export const useMarketTrackingStore = defineStore('marketTracking', () => {
     return { types, addType, removeType };
 });
 
-export const createResult = async (id: number, price: MarketTypePrice): Promise<TrackingResult> => ({ history: await getHistory(jitaId, id), ...price });
+export const createResult = async (id: number, price: MarketTypePrice): Promise<TrackingResult> => ({ history: await getHistory(id), ...price });

src/market/type/MarketTypeInput.vue

@@ -1,25 +1,18 @@
 <script setup lang="ts">
 import { vOnClickOutside } from '@vueuse/components';
-import { useVirtualList, useVModel } from '@vueuse/core';
+import { useVirtualList } from '@vueuse/core';
 import log from 'loglevel';
 import { nextTick, ref, watch, watchEffect } from 'vue';
 import { MarketType, searchMarketTypes } from './MarketType';
 import MarketTypeLabel from "./MarketTypeLabel.vue";
 
-
-interface Props {
-    modelValue?: MarketType;
-}
 interface Emits {
-    (e: 'update:modelValue', value?: MarketType): void;
     (e: 'submit'): void;
 }
 
-const props = defineProps<Props>();
+const modelValue = defineModel<MarketType>();
 const emit = defineEmits<Emits>();
 
-const value = useVModel(props, 'modelValue', emit);
-
 const isOpen = ref(false);
 const name = ref('');
 const suggestions = ref<MarketType[]>([]);
@@ -47,7 +40,7 @@ const moveUp = () => {
 }
 const select = (type?: MarketType) => {
     log.debug('Select:', type);
-    value.value = type;
+    modelValue.value = type;
     currentIndex.value = -1;
     suggestions.value = [];
     isOpen.value = false;
@@ -62,18 +55,18 @@ const submit = async () => {
     
         select(v);
         await nextTick();
-    } else if (props.modelValue === undefined && suggestions.value.length > 0) {
+    } else if (modelValue.value === undefined && suggestions.value.length > 0) {
         select(suggestions.value[0]);
         await nextTick();
     }
 
-    if (value.value === undefined) {
+    if (modelValue.value === undefined) {
         return;
     }
     emit('submit');
 }
 
-watch(() => props.modelValue, async v => {
+watch(() => modelValue.value, async v => {
     if (v === undefined) {
         name.value = '';
     } else {
@@ -96,7 +89,7 @@ watchEffect(async () => {
 <template>
     <div @click="() => isOpen = true" v-on-click-outside="() => isOpen = false">
         <div class="fake-input">
-            <img v-if="value?.id" :src="`https://images.evetech.net/types/${value.id}/icon?size=32`" alt="" />
+            <img v-if="modelValue?.id" :src="`https://images.evetech.net/types/${modelValue.id}/icon?size=32`" alt="" />
             <input type="text" v-model="name" @keyup.enter="submit" @keyup.down="moveDown" @keyup.up="moveUp" />
         </div>
         <div v-if="suggestions.length > 1" class="z-20 absolute w-96">

src/market/type/MarketTypeLabel.vue

@@ -17,14 +17,12 @@ withDefaults(defineProps<Props>(), {
 </script>
 
 <template>
-    <div v-if="id || name">
-        <img v-if="id" :src="`https://images.evetech.net/types/${id}/icon?size=32`" class="inline-block w-5 h-5 me-1" alt="" />
+    <div v-if="id || name" class="flex flex-row">
+        <img v-if="id" :src="`https://images.evetech.net/types/${id}/icon?size=32`" class="inline-block w-5 h-5 me-1 mt-1" alt="" />
         <template v-if="name">
             {{ name }}
-            <RouterLink v-if="id" :to="{ name: 'market-types', params: { type: id } }" custom #default="{ navigate }">
-                <button class="btn-icon me-1" title="Show item info" @click="navigate">
-                    <InformationCircleIcon  />
-                </button>
+            <RouterLink v-if="id" :to="{ name: 'market-types', params: { type: id } }" class="button btn-icon ms-1 me-1 mt-1" title="Show item info">
+                <InformationCircleIcon  />
             </RouterLink>
             <ClipboardButton v-if="!hideCopy" :value="name" />
         </template>
@@ -32,7 +30,7 @@ withDefaults(defineProps<Props>(), {
 </template>
 
 <style scoped lang="postcss">
-button:deep(>svg) {
-    @apply relative top-0.5 !w-4 !h-4;
+button:deep(>svg), .button:deep(>svg) {
+    @apply !w-4 !h-4;
 }
 </style>

src/pages/market/Tracking.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { MarketType, MarketTypeInput, MarketTypePrice, getHistory, getMarketTypes, jitaId, useApraisalStore } from "@/market";
+import { MarketType, MarketTypeInput, MarketTypePrice, getHistory, getMarketTypes, useApraisalStore } from "@/market";
 import { BuyModal } from '@/market/acquisition';
 import { TrackingResult, TrackingResultTable, createResult, useMarketTrackingStore } from '@/market/tracking';
 import { ref, watch } from 'vue';
@@ -15,7 +15,7 @@ const items = ref<TrackingResult[]>([]);
 const addOrRelaod = async (type: MarketType) => {
     const typeID = type.id;
     const [history, price] = await Promise.all([
-        getHistory(jitaId, typeID),
+        getHistory(typeID),
         apraisalStore.getPrice(type)
     ]);
     const itm = {
@@ -57,9 +57,10 @@ watch(() => marketTrackingStore.types, async t => {
     const prices = await apraisalStore.getPrices(await getMarketTypes(typesToLoad));
 
     items.value = [
-        ...items.value,
-        ...(await Promise.all(typesToLoad.map(i => createResult(i, prices.find(p => p.type.id === i) as MarketTypePrice))))
+        ...items.value
     ];
+
+    typesToLoad.forEach(async i => items.value.push(await createResult(i, prices.find(p => p.type.id === i) as MarketTypePrice)));
 }, { immediate: true });
 </script>
 

src/preferences/Preference.ts

@@ -0,0 +1,22 @@
+export class Preference<T> {
+    private key: string;
+    private description: string;
+    private value?: T;
+    private defaultValue?: T;
+
+    constructor(key: string, description: string, defaultValue?: T) {
+        this.key = key;
+        this.description = description;
+        this.defaultValue = defaultValue;
+        this.value = this.load();
+    }
+
+    private load() {
+        const value = localStorage.getItem(this.key);
+
+        if (value) {
+            return JSON.parse(value);
+        }
+        return this.defaultValue;
+    }
+}

src/reprocess/BuySellSlider.vue

@@ -1,24 +1,11 @@
 <script setup lang="ts">
-import { useVModel } from '@vueuse/core';
 
-interface Props {
-    modelValue?: boolean;
-}
-interface Emits {
-    (e: 'update:modelValue', value: boolean): void;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    modelValue: false
-});
-const emit = defineEmits<Emits>();
-
-const value = useVModel(props, 'modelValue', emit);
+const modelValue = defineModel({ default: false });
 </script>
 
 <template>
     <label class="flex items-center relative w-max cursor-pointer select-none">
-        <input type="checkbox" class="appearance-none transition-colors cursor-pointer w-14 h-7 rounded-full" v-model="value" />
+        <input type="checkbox" class="appearance-none transition-colors cursor-pointer w-14 h-7 rounded-full" v-model="modelValue" />
         <span class="absolute font-medium text-xs right-1"> Buy </span>
         <span class="absolute font-medium text-xs right-8"> Sell </span>
         <span class="w-7 h-7 right-7 absolute rounded-full transform transition-transform bg-slate-100" />

src/reprocess/ReprocessInput.vue

@@ -1,22 +1,12 @@
 <script setup lang="ts">
 import { evepraisalAxiosInstance } from '@/market/appraisal/evepraisal';
-import { useVModel } from '@vueuse/core';
 
 interface Props {
     name: string;
-    modelValue?: string;
 }
 
-interface Emits {
-    (e: 'update:modelValue', value: string): void;
-}
-
-const props = withDefaults(defineProps<Props>(), {
-    modelValue: ''
-});
-const emit = defineEmits<Emits>();
-
-const value = useVModel(props, 'modelValue', emit);
+const modelValue = defineModel({ default: '' });
+defineProps<Props>();
 
 const loadFromId = async (e: Event) => {
     const input = e.target as HTMLInputElement;
@@ -31,7 +21,7 @@ const loadFromId = async (e: Event) => {
         return;
     }
 
-    value.value = JSON.stringify(response.data);
+    modelValue.value = JSON.stringify(response.data);
     input.value = '';
 }
 </script>
@@ -39,6 +29,6 @@ const loadFromId = async (e: Event) => {
 <template>
     <div class="flex-1 mx-1">
         <span>{{ name }}</span><input type="text" class="ms-2" @change="loadFromId" placeholder="id evepraisal" />
-        <textarea class="mt-1" v-model="value" />
+        <textarea class="mt-1" v-model="modelValue" />
     </div>
 </template>