mirror of
https://github.com/versia-pub/frontend.git
synced 2026-03-13 03:29:16 +01:00
refactor: 🔥 Clean up codebase
This commit is contained in:
Jesse Wierzbinski
parent
1b5e7a6575
commit
ee8c543cd9
24 changed files with 25 additions and 391 deletions
|
|
@ -1,18 +0,0 @@
|
|||
<template>
|
||||
<Renderer :id="id" v-for="id of settingsIds" :key="id" />
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
type SettingIds,
|
||||
type SettingPages,
|
||||
getSettingsForPage,
|
||||
} from "~/settings";
|
||||
import Renderer from "./renderer.vue";
|
||||
|
||||
const props = defineProps<{
|
||||
page: SettingPages;
|
||||
}>();
|
||||
|
||||
const settingsIds = Object.keys(getSettingsForPage(props.page)) as SettingIds[];
|
||||
</script>
|
||||
|
|
@ -1,27 +0,0 @@
|
|||
<template>
|
||||
<div class="w-full px-8 py-4 bg-dark-700 hover:bg-dark-500 duration-100 h-full">
|
||||
<div class="max-w-7xl mx-auto h-full">
|
||||
<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" />
|
||||
<SettingString v-else-if="setting.type === SettingType.String" :id="id" />
|
||||
<SettingOther v-else :id="id" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
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";
|
||||
import SettingString from "./types/String.vue";
|
||||
|
||||
const props = defineProps<{
|
||||
id: SettingIds;
|
||||
}>();
|
||||
|
||||
const setting = useSetting(props.id);
|
||||
</script>
|
||||
|
|
@ -1,41 +0,0 @@
|
|||
<template>
|
||||
<Switch.Root v-model:checked="checked" class="grid grid-cols-[1fr_auto] gap-x-4"
|
||||
@click="setting.notImplemented ? $event.preventDefault() : undefined"
|
||||
v-if="setting.type === SettingType.Boolean" @update:checked="c => checked = c">
|
||||
<Switch.Label :data-disabled="setting.notImplemented ? '' : undefined"
|
||||
class="row-start-1 select-none text-base/6 data-[disabled]:opacity-50 sm:text-sm/6 text-white font-semibold">
|
||||
{{
|
||||
setting.title
|
||||
}}</Switch.Label>
|
||||
<p v-if="setting.notImplemented" class="text-xs mt-1 row-start-3 text-red-300 font-semibold">Not
|
||||
implemented
|
||||
</p>
|
||||
<p v-else :data-disabled="setting.notImplemented ? '' : undefined"
|
||||
class="text-base/6 row-start-2 data-[disabled]:opacity-50 sm:text-sm/6 text-gray-300">{{
|
||||
setting.description }}
|
||||
</p>
|
||||
<Switch.Control :data-disabled="setting.notImplemented ? '' : undefined"
|
||||
:data-checked="checked ? '' : undefined"
|
||||
class="group col-start-2 relative isolate inline-flex h-6 w-10 cursor-default rounded-full p-[3px] sm:h-5 sm:w-8 transition duration-0 ease-in-out data-[changing]:duration-200 forced-colors:outline forced-colors:[--switch-bg:Highlight] ring-1 ring-inset bg-white/5 ring-white/15 data-[checked]:bg-[--switch-bg] data-[checked]:ring-[--switch-bg-ring] focus:outline-none focus:outline focus:outline-2 focus:outline-offset-2 focus:outline-blue-500 hover:data-[checked]:ring-[--switch-bg-ring] hover:ring-white/25 data-[disabled]:bg-zinc-200 data-[disabled]:data-[checked]:bg-zinc-200 data-[disabled]:opacity-50 data-[disabled]:bg-white/15 data-[disabled]:data-[checked]:bg-white/15 data-[disabled]:data-[checked]:ring-white/15 [--switch-bg-ring:transparent] [--switch-bg:theme(colors.primary.600/25%)] [--switch-shadow:theme(colors.black/10%)] [--switch:white] [--switch-ring:theme(colors.white/10%)]">
|
||||
<Switch.Thumb
|
||||
class="pointer-events-none relative inline-block size-[1.125rem] rounded-full sm:size-3.5 translate-x-0 transition duration-200 ease-in-out border border-transparent bg-white shadow ring-1 ring-black/5 group-data-[checked]:bg-[--switch] group-data-[checked]:shadow-[--switch-shadow] group-data-[checked]:ring-[--switch-ring] group-data-[checked]:translate-x-4 sm:group-data-[checked]:translate-x-3 group-data-[disabled]:group-data-[checked]:bg-white group-data-[disabled]:group-data-[checked]:shadow group-data-[disabled]:group-data-[checked]:ring-black/5" />
|
||||
</Switch.Control>
|
||||
<Switch.HiddenInput />
|
||||
</Switch.Root>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { Switch } from "@ark-ui/vue";
|
||||
import { type SettingIds, SettingType } from "~/settings";
|
||||
|
||||
const props = defineProps<{
|
||||
id: SettingIds;
|
||||
}>();
|
||||
|
||||
const setting = useSetting(props.id);
|
||||
const checked = ref(setting.value.value as boolean);
|
||||
|
||||
watch(checked, (c) => {
|
||||
setting.value.value = c;
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,26 +0,0 @@
|
|||
<template>
|
||||
<div class="flex flex-col gap-y-1">
|
||||
<h4 class="row-start-1 select-none text-base/6 sm:text-sm/6 text-white font-semibold">{{ setting.title
|
||||
}}
|
||||
</h4>
|
||||
<textarea v-model="content"
|
||||
class="resize-none min-h-48 mt-1 prose prose-invert max-w-full ring-1 ring-white/20 font-mono placeholder:text-zinc-500 bg-transparent rounded appearance-none disabled:cursor-not-allowed"
|
||||
aria-label="Start typing here..."></textarea>
|
||||
<p v-if="setting.description" class="text-xs mt-2 text-gray-400">{{ setting.description }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { SettingIds } from "~/settings";
|
||||
|
||||
const props = defineProps<{
|
||||
id: SettingIds;
|
||||
}>();
|
||||
|
||||
const setting = useSetting(props.id);
|
||||
const content = ref(setting.value.value as string);
|
||||
|
||||
watch(content, (c) => {
|
||||
setting.value.value = c;
|
||||
});
|
||||
</script>
|
||||
|
|
@ -1,64 +0,0 @@
|
|||
<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-2 row-start-3 text-red-300 font-semibold">Not
|
||||
implemented
|
||||
</p>
|
||||
<p v-else-if="setting.description" class="text-xs mt-2 text-gray-400">{{ setting.description }}</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-primary2-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>
|
||||
|
|
@ -1,18 +0,0 @@
|
|||
<template>
|
||||
<div class="grid grid-cols-[1fr_auto] gap-x-4">
|
||||
<h4 class="row-start-1 select-none text-base/6 sm:text-sm/6 text-white font-semibold">{{ setting.title
|
||||
}}
|
||||
</h4>
|
||||
<p class="text-xs mt-1 row-start-3 text-red-300 font-semibold">Not implemented</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import type { SettingIds } from "~/settings";
|
||||
|
||||
const props = defineProps<{
|
||||
id: SettingIds;
|
||||
}>();
|
||||
|
||||
const setting = useSetting(props.id);
|
||||
</script>
|
||||
|
|
@ -1,25 +0,0 @@
|
|||
<template>
|
||||
<div class="flex flex-col gap-y-1">
|
||||
<h4 class="row-start-1 select-none text-base/6 sm:text-sm/6 text-white font-semibold">{{ setting.title
|
||||
}}
|
||||
</h4>
|
||||
<TextInput v-model:value="content" class="w-full md:w-auto min-w-72" />
|
||||
<p v-if="setting.description" class="text-xs mt-2 text-gray-400">{{ setting.description }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import TextInput from "~/components/inputs/text-input.vue";
|
||||
import type { SettingIds } from "~/settings";
|
||||
|
||||
const props = defineProps<{
|
||||
id: SettingIds;
|
||||
}>();
|
||||
|
||||
const setting = useSetting(props.id);
|
||||
const content = ref(setting.value.value as string);
|
||||
|
||||
watch(content, (c) => {
|
||||
setting.value.value = c;
|
||||
});
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue