Added read only category table

components/global/input/Color.vue

@@ -2,8 +2,10 @@
 import { cn } from "@/lib/utils";
 import { type RPGColor, rpgColors } from "~/models/Color";
 
-defineProps<{
+const { id, theme = "normal", position = "popper" } = defineProps<{
   id: string
+  theme?: "normal" | "subtle"
+  position?: "item-aligned" | "popper" | undefined
 }>();
 
 const model = defineModel<RPGColor>({ default: "white" });
@@ -11,27 +13,23 @@ const model = defineModel<RPGColor>({ default: "white" });
 
 <template>
   <UiSelect v-model="model">
-    <UiSelectTrigger :id>
+    <UiSelectTrigger :id :class="cn({ 'h-auto': theme === 'subtle' })">
       <UiSelectValue
         :placeholder="$t('ui.colors.selectOne')"
-        class="input-color"
-        :class="
-          cn(
-            `input-color-${model}`,
-          )
-        "
+        class="bgc"
+        :class="cn(`bgc-${model}`)"
       />
     </UiSelectTrigger>
-    <UiSelectContent position="popper">
+    <UiSelectContent :position>
       <UiSelectGroup>
         <UiSelectItem
           v-for="color in rpgColors"
           :key="color"
           :value="color"
-          class="input-color"
+          class="bgc"
           :class="
             cn(
-              `input-color-${color}`,
+              `bgc-${color}`,
             )
           "
         >
@@ -41,76 +39,3 @@ const model = defineModel<RPGColor>({ default: "white" });
     </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>