thepaperpilot
68da6c352e
Renderables no longer get wrapped in computed refs, because JSX.Elements don't like that (desyncs with the DOM) Relatedly, a lot of display functions got fairly simplified, removing unnecessary local components Added `MaybeGetter` utility type for something that may be a getter function or a static value (but not a ref) Made Achievement.vue use a Renderable for the display. The object of components can still be passed to `createAchievement` Made Challenge.vue use a Renderable for the display. The object of components can still be passed to `createChallenge` Fixed some issues introduced by the rewrite that broke particles systems
97 lines
2.1 KiB
Vue
97 lines
2.1 KiB
Vue
<template>
|
|
<div class="field">
|
|
<span class="field-title" v-if="title"><Title /></span>
|
|
<VueNextSelect
|
|
:options="options"
|
|
v-model="value"
|
|
:min="1"
|
|
:placeholder="placeholder"
|
|
:close-on-select="closeOnSelect"
|
|
@update:model-value="onUpdate"
|
|
label-by="label"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="tsx">
|
|
import "components/common/fields.css";
|
|
import { MaybeGetter } from "util/computed";
|
|
import { render, Renderable } from "util/vue";
|
|
import { ref, toRef, unref, watch } from "vue";
|
|
import VueNextSelect from "vue-next-select";
|
|
import "vue-next-select/dist/index.css";
|
|
|
|
export type SelectOption = { label: string; value: unknown };
|
|
|
|
const props = defineProps<{
|
|
title?: MaybeGetter<Renderable>;
|
|
modelValue?: unknown;
|
|
options: SelectOption[];
|
|
placeholder?: string;
|
|
closeOnSelect?: boolean;
|
|
}>();
|
|
const emit = defineEmits<{
|
|
(e: "update:modelValue", value: unknown): void;
|
|
}>();
|
|
|
|
const Title = () => props.title ? render(props.title, el => <span>{el}</span>) : <></>;
|
|
|
|
const value = ref<SelectOption | null>(
|
|
props.options.find(option => option.value === props.modelValue) ?? null
|
|
);
|
|
watch(toRef(props, "modelValue"), modelValue => {
|
|
if (unref(value) !== modelValue) {
|
|
value.value = props.options.find(option => option.value === modelValue) ?? null;
|
|
}
|
|
});
|
|
|
|
function onUpdate(value: SelectOption) {
|
|
emit("update:modelValue", value.value);
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.vue-select {
|
|
width: 50%;
|
|
border-radius: var(--border-radius);
|
|
}
|
|
|
|
.field-buttons .vue-select {
|
|
width: unset;
|
|
}
|
|
|
|
.vue-select,
|
|
.vue-dropdown {
|
|
border-color: var(--outline);
|
|
}
|
|
|
|
.vue-dropdown {
|
|
background: var(--raised-background);
|
|
}
|
|
|
|
.vue-dropdown-item {
|
|
color: var(--foreground);
|
|
}
|
|
|
|
.vue-dropdown-item,
|
|
.vue-dropdown-item * {
|
|
transition-duration: 0s;
|
|
}
|
|
|
|
.vue-dropdown-item.highlighted {
|
|
background-color: var(--highlighted);
|
|
}
|
|
|
|
.vue-dropdown-item.selected,
|
|
.vue-dropdown-item.highlighted.selected {
|
|
background-color: var(--bought);
|
|
}
|
|
|
|
.vue-input input {
|
|
font-size: inherit;
|
|
}
|
|
|
|
.vue-input input::placeholder {
|
|
color: var(--link);
|
|
}
|
|
</style>
|