Misc changes

app/ui/Modal.vue

@@ -1,11 +1,13 @@
 <script setup lang="ts">
+const props = defineProps<{ width?: string }>()
+
 const open = defineModel("open")
 </script>
 
 <template>
 	<Transition>
 		<div class="modal-container" v-show="open" @click="open = false">
-			<Card @click.stop>
+			<Card @click.stop :width="props.width">
 				<slot />
 			</Card>
 		</div>

app/ui/SearchSelect.vue

@@ -5,7 +5,9 @@ export interface Option {
 }
 
 interface SearchSelectProps {
+	label?: string
 	fetchOptions: (q: string) => Promise<Option[]>
+	predefined?: Option
 }
 
 const props = defineProps<SearchSelectProps>()
@@ -15,6 +17,16 @@ const query = ref<string>("")
 const options = ref<Option[]>([])
 const show = ref<boolean>(false)
 
+watchEffect(() => {
+	if (!props.predefined) return
+
+	console.log(props.predefined)
+
+	query.value = props.predefined.label
+	value.value = props.predefined.value
+	nextTick(() => (options.value = []))
+})
+
 watch(query, async (q) => {
 	options.value = q ? await props.fetchOptions(q) : []
 	show.value = true
@@ -29,7 +41,13 @@ const select = (item: Option) => {
 
 <template>
 	<div class="search-select" @blur="show = false">
-		<Input v-model:value="query" @focus="show = true" type="text" full />
+		<Input
+			v-model:value="query"
+			@focus="show = true"
+			:label="props.label"
+			type="text"
+			full
+		/>
 
 		<ul v-if="options.length && show">
 			<li v-for="opt in options" :key="opt.value" @click="select(opt)">

app/ui/Table.vue

@@ -16,7 +16,7 @@ const { rows, data } = defineProps<TableProps>()
 </script>
 
 <template>
-	<table>
+	<table class="table">
 		<thead>
 			<tr>
 				<th
@@ -40,3 +40,28 @@ const { rows, data } = defineProps<TableProps>()
 		</tbody>
 	</table>
 </template>
+
+<style lang="scss" scoped>
+@use "@/styles/variables" as *;
+@use "@/styles/util" as *;
+
+.table {
+	width: 100%;
+	text-align: left;
+	border-collapse: collapse;
+	@include fontSize(15px);
+
+	& th,
+	& td {
+		border-bottom: 1px solid $color-border;
+		padding: 0.5rem 0.6rem;
+	}
+
+	& tr:last-child td {
+		border-bottom: none;
+	}
+
+	& thead {
+	}
+}
+</style>