Update bom ui palette

Tnze · Jan 1, 2025 · bbd448d · bbd448d
1 parent 7a89595
commit bbd448d
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 11 deletions.
diff --git a/src/components/bom/Curves.vue b/src/components/bom/Curves.vue
@@ -37,8 +37,9 @@ const props = defineProps<{
 }>();
 
 const palette = new Map([
+    ['required', useCssVar('--el-color-danger')],
+    ['crafted', useCssVar('--el-color-warning')],
     ['completed', useCssVar('--el-color-success')],
-    ['required', useCssVar('--el-color-warning')],
     ['not-required', useCssVar('--el-color-info')],
 ]);
 

diff --git a/src/components/bom/Item.vue b/src/components/bom/Item.vue
@@ -26,25 +26,27 @@ import {
 } from 'element-plus';
 import { toRef } from 'vue';
 
+import { SlotType } from '@/stores/bom';
+
 const props = defineProps<{
     id: number;
     name: string;
     wasted?: number;
     requiredInputDisabled?: boolean;
     holdingInputDisabled?: boolean;
 
-    type?: 'required' | 'crafted' | 'completed' | 'not-required';
+    type?: SlotType;
 }>();
 
 const requiredNumber = defineModel<number>('requiredNumber');
 const holdingNumber = defineModel<number>('holdingNumber');
 const elemUiTypeMapping = new Map<
-    'required' | 'crafted' | 'completed' | 'not-required' | undefined,
-    'warning' | 'success' | 'info' | undefined
+    SlotType | undefined,
+    'warning' | 'success' | 'info' | 'danger' | undefined
 >([
     [undefined, undefined],
-    ['required', 'warning'],
-    ['crafted', undefined],
+    ['required', 'danger'],
+    ['crafted', 'warning'],
     ['completed', 'success'],
     ['not-required', 'info'],
 ]);
@@ -104,16 +106,21 @@ defineExpose({ id: toRef(() => props.id) });
 </template>
 
 <style>
-.completed {
-    background-color: var(--el-color-success-light-9);
-    border-color: var(--el-color-success);
+.required {
+    background-color: var(--el-color-danger-light-9);
+    border-color: var(--el-color-danger);
 }
 
-.required {
+.crafted {
     background-color: var(--el-color-warning-light-9);
     border-color: var(--el-color-warning);
 }
 
+.completed {
+    background-color: var(--el-color-success-light-9);
+    border-color: var(--el-color-success);
+}
+
 .not-required {
     background-color: var(--el-color-info-light-9);
     /* border-color: var(--el-color-info); */

diff --git a/src/stores/bom.ts b/src/stores/bom.ts
@@ -28,13 +28,15 @@ export interface Item {
     name: string;
 }
 
+export type SlotType = 'completed' | 'crafted' | 'required' | 'not-required';
+
 export class Slot {
     item: Item;
     required: number;
     requiredBy: Map<ItemID, number>; // itemID, amount
     depth: number = 0;
     wasted: number = 0;
-    type?: 'completed' | 'crafted' | 'required' | 'not-required';
+    type?: SlotType;
 
     constructor(item: Item) {
         this.item = item;