versia-pub/frontend
2
0
Fork 0
mirror of https://github.com/versia-pub/frontend.git synced 2026-03-13 03:29:16 +01:00
Code Issues Projects Releases Packages Wiki Activity Actions

feat: ✨ Add new Enum settings type

Browse source
This commit is contained in:
Jesse Wierzbinski 2024-11-05 09:25:30 +01:00
parent e578fa3318
commit aca3892ffd
No known key found for this signature in database
3 changed files with 108 additions and 2 deletions
Download patch file Download diff file Expand all files Collapse all files

2
components/settings/renderer.vue
View file

@ -4,6 +4,7 @@
<SettingBoolean v-if="setting.type === SettingType.Boolean" :id="id" />
<SettingCode v-else-if="setting.type === SettingType.Code" :id="id" />
<SettingEnum v-else-if="setting.type === SettingType.Enum" :id="id" />
<SettingOther v-else :id="id" />
</div>
</div>
@ -13,6 +14,7 @@
import { type SettingIds, SettingType } from "~/settings";
import SettingBoolean from "./types/Boolean.vue";
import SettingCode from "./types/Code.vue";
import SettingEnum from "./types/Enum.vue";
import SettingOther from "./types/Other.vue";
const props = defineProps<{

63
components/settings/types/Enum.vue Normal file
View file

@ -0,0 +1,63 @@
<template>
<Select.Root :collection="collection" v-model:model-value="selectedValues">
<Select.Label class="select-none text-base/6 data-[disabled]:opacity-50 sm:text-sm/6 text-white font-semibold">{{ setting.title }}</Select.Label>
<Select.Control class="mt-1">
<Select.Trigger :disabled="setting.notImplemented" class="disabled:opacity-70 disabled:hover:cursor-not-allowed bg-dark-500 rounded-md border-0 py-1.5 text-gray-50 shadow-sm ring-1 ring-inset ring-white/10 sm:text-sm sm:leading-6 w-full md:w-auto min-w-72 text-left px-4 flex flew-row justify-between items-center">
<Select.ValueText placeholder="Select an option" />
<Select.Indicator class="size-4">
<iconify-icon icon="tabler:chevron-down" class="size-4" width="unset" aria-hidden="true" />
</Select.Indicator>
</Select.Trigger>
</Select.Control>
<p v-if="setting.notImplemented" class="text-xs mt-1 row-start-3 text-red-300 font-semibold">Not
implemented
</p>
<Teleport to="body">
<Select.Positioner>
<Select.Content
class="z-10 mt-1 max-h-56 w-full overflow-auto rounded-md bg-dark-700 py-1 text-base shadow-lg ring-1 ring-white/10 focus:outline-none sm:text-sm min-w-72">
<Select.ItemGroup>
<Select.Item v-for="item in collection.items" :key="item.value" :item="item"
:class="['text-gray-100 hover:bg-dark-900 flex flex-row gap-4 justify-between items-center duration-100 relative cursor-default select-none py-2 px-4 group']">
<Select.ItemText
:class="['group-data-[state=checked]:font-semibold font-normal block truncate']">{{
item.label }}</Select.ItemText>
<Select.ItemIndicator
:class="['text-primary-600 hidden group-data-[state=checked]:flex items-center justify-center']">
<iconify-icon icon="tabler:check" class="size-4" width="unset" aria-hidden="true" />
</Select.ItemIndicator>
</Select.Item>
</Select.ItemGroup>
</Select.Content>
</Select.Positioner>
</Teleport>
<Select.HiddenSelect />
</Select.Root>
</template>
<script lang="ts" setup>
import { Select, createListCollection } from "@ark-ui/vue/select";
import type { EnumSetting, SettingIds } from "~/settings";
const props = defineProps<{
id: SettingIds;
}>();
const setting = useSetting(props.id) as Ref<EnumSetting>;
const selectedValues = ref([setting.value.value]);
const collection = createListCollection({
items: setting.value.options.map((option) => ({
value: option.value,
label: option.label,
})),
});
watch(selectedValues, (value) => {
if (!value[0]) {
return;
}
setting.value.value = value[0];
});
</script>