pretyness

src/ledger/LedgerSelect.vue

@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import {Ledger, useLedgersStore} from "@/ledger/ledger.ts";
+import {Ledger, systemLedger, useLedgersStore} from "@/ledger/ledger.ts";
 import {storeToRefs} from "pinia";
 import {computed} from "vue";
 
@@ -12,11 +12,24 @@ const ledger = defineModel<Ledger>();
 const {ledgers: allLedgers} = storeToRefs(useLedgersStore());
 
 const ledgersToUse = computed(() => props.ledgers || allLedgers);
+const legerId = computed({
+  get: () => ledger.value?.ledgerId,
+  set: value => ledger.value = ledgersToUse.value[ledgersToUse.value.findIndex(x => x.value === value)]
+})
 
 </script>
 
 <template>
-  <select v-model="ledger">
-    <option v-for="ledger in ledgersToUse" :key="ledger.ledgerId" :value="ledger">{{ ledger.name }}</option>
+  <select v-model="legerId" :class="{'system-ledger': ledger === systemLedger}">
+    <option v-for="ledger in ledgersToUse" :key="ledger.ledgerId" :value="ledger.ledgerId" :class="{'system-ledger': ledger === systemLedger}">{{ ledger.name }}</option>
   </select>
-</template>
+</template>
+
+<style scoped>
+@reference "tailwindcss";
+
+.system-ledger {
+  @apply text-emerald-400;
+}
+
+</style>