Polished world modal behaviour

components/global/input/Color.vue

@@ -1,20 +1,112 @@
 <script lang="ts" setup>
+import { cn } from "@/lib/utils";
 import { type RPGColor, rpgColors } from "~/models/Color";
 
-const model = defineModel<RPGColor>()
+const model = defineModel<RPGColor>({ default: "white" });
 </script>
 
 <template>
   <UiSelect v-model="model">
     <UiSelectTrigger>
-      <UiSelectValue :placeholder="$t('ui.colors.selectOne')" />
+      <UiSelectValue
+        :placeholder="$t('ui.colors.selectOne')"
+        class="input-color"
+        :class="
+          cn(
+            `input-color-${model}`,
+          )
+        "
+      />
     </UiSelectTrigger>
-    <UiSelectContent>
+    <UiSelectContent position="popper">
       <UiSelectGroup>
-        <UiSelectItem v-for="color in rpgColors" :key="color" :value="color">
+        <UiSelectItem
+          v-for="color in rpgColors"
+          :key="color"
+          :value="color"
+          class="input-color"
+          :class="
+            cn(
+              `input-color-${color}`,
+            )
+          "
+        >
           {{ $t(`ui.colors.${color}`) }}
         </UiSelectItem>
       </UiSelectGroup>
     </UiSelectContent>
   </UiSelect>
 </template>
+
+<style lang="scss" scoped>
+.input-color {
+  &::before {
+    content: "";
+    display: inline-block;
+    width: .75rem;
+    aspect-ratio: 1;
+    margin-right: 0.5em;
+    border-radius: .25rem;
+    background-color: red;
+    border: 1px solid transparent;
+  }
+
+  &.input-color-red::before {
+    @apply bg-red-500;
+  }
+  &.input-color-orange::before {
+    @apply bg-orange-500;
+  }
+  &.input-color-amber::before {
+    @apply bg-amber-500;
+  }
+  &.input-color-yellow::before {
+    @apply bg-yellow-500;
+  }
+  &.input-color-lime::before {
+    @apply bg-lime-500;
+  }
+  &.input-color-green::before {
+    @apply bg-green-500;
+  }
+  &.input-color-emerald::before {
+    @apply bg-emerald-600;
+  }
+  &.input-color-teal::before {
+    @apply bg-teal-600;
+  }
+  &.input-color-cyan::before {
+    @apply bg-cyan-600;
+  }
+  &.input-color-sky::before {
+    @apply bg-sky-600;
+  }
+  &.input-color-blue::before {
+    @apply bg-blue-600;
+  }
+  &.input-color-indigo::before {
+    @apply bg-indigo-600;
+  }
+  &.input-color-violet::before {
+    @apply bg-violet-600;
+  }
+  &.input-color-purple::before {
+    @apply bg-purple-600;
+  }
+  &.input-color-fuchsia::before {
+    @apply bg-fuchsia-600;
+  }
+  &.input-color-pink::before {
+    @apply bg-pink-600;
+  }
+  &.input-color-rose::before {
+    @apply bg-rose-600;
+  }
+  &.input-color-black::before {
+    @apply bg-black dark:border-[1px] dark:border-slate-300;
+  }
+  &.input-color-white::before {
+    @apply bg-white border-[1px] border-slate-700;
+  }
+}
+</style>

components/ui/select/SelectContent.vue

@@ -36,9 +36,10 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits)
   <SelectPortal>
     <SelectContent
       v-bind="{ ...forwarded, ...$attrs }"
+      style="max-height: var(--radix-select-content-available-height)"
       :class="
         cn(
-          'relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+          'select-content relative z-50 max-h-96 min-w-32 overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
           position === 'popper' &&
             'data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1',
           props.class

components/world/dialog/Create.vue

@@ -15,6 +15,7 @@ const emit = defineEmits(["on-close"])
 
 function handleClose() {
   emit("on-close")
+  worldSkeletonName.value = ""
 }
 </script>
 

components/world/dialog/Edit.vue

@@ -20,6 +20,7 @@ const emit = defineEmits(["on-close"])
 
 function handleClose() {
   emit("on-close")
+  worldSkeletonName.value = props.world?.name ?? ""
 }
 </script>
 

components/world/form/Create.vue

@@ -4,7 +4,7 @@ import type { World } from "~/models/World";
 
 const user = useSupabaseUser()
 
-const defaultWorld: World = { name: "", description: "", gmId: user.value?.id }
+const defaultWorld: World = { name: "", description: "", gmId: user.value?.id, color: "white", state: "draft" }
 const worldSkeleton = ref<World>({ ...defaultWorld })
 
 onMounted(() => {

models/World.ts

@@ -17,7 +17,7 @@ export interface World {
 export const postWorldSchema = z.object({
   name: z.string(),
   description: z.string().optional().nullable(),
-  color: rpgColorSchema,
+  color: rpgColorSchema.default("white"),
   gmId: z.string().optional().nullable(),
   state: z.string().optional().nullable().default("draft"),
 })