Use nuxt auto import magic

2 files changed, 103 insertions, 0 deletions

diff --git a/components/editor/category/ChildrenOptionsPanel.vue b/components/editor/category/ChildrenOptionsPanel.vue
new file mode 100644
index 0000000..57dcef2
--- /dev/null
+++ b/components/editor/category/ChildrenOptionsPanel.vue
@@ -0,0 +1,51 @@
+<script setup lang="ts">
+import { useSessionStore, type EditorCategory } from '@/stores/session';
+import { computed } from 'vue';
+
+const props = defineProps<{
+  categoryId: string;
+}>();
+
+const sessionStore = useSessionStore();
+
+const category = computed(() => {
+  return sessionStore.getCategoryById(props.categoryId) as EditorCategory;
+});
+</script>
+
+<template>
+  <EditorOptionsPanel v-if="category">
+    <div id="options">
+      <h2>Quests in this category</h2>
+      <p>Drag to reorder.</p>
+      <div class="option-group">
+      </div>
+    </div>
+  </EditorOptionsPanel>
+</template>
+
+<style>
+#options {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.option-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.description {
+  font-size: 0.8em;
+}
+
+label {
+  font-weight: 700;
+}
+
+h2 {
+  border-bottom: 1px solid var(--color-border);
+}
+</style>
diff --git a/components/editor/category/OptionsPanel.vue b/components/editor/category/OptionsPanel.vue
new file mode 100644
index 0000000..112b063
--- /dev/null
+++ b/components/editor/category/OptionsPanel.vue
@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import { useSessionStore, type EditorCategory } from '@/stores/session';
+import { computed } from 'vue';
+
+const props = defineProps<{
+  categoryId: string;
+}>();
+
+const sessionStore = useSessionStore();
+
+const category = computed(() => {
+  return sessionStore.getCategoryById(props.categoryId) as EditorCategory;
+});
+</script>
+
+<template>
+  <EditorOptionsPanel v-if="category">
+    <div id="options">
+      <div class="option-group">
+        <Checkbox id="category-permissionrequired" label="Require permission for category"
+          description="Players must have permission to open and start quests in this category."
+          v-model="category.permissionRequired" />
+      </div>
+    </div>
+  </EditorOptionsPanel>
+</template>
+
+<style>
+#options {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.option-group {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.description {
+  font-size: 0.8em;
+}
+
+label {
+  font-weight: 700;
+}
+
+h2 {
+  border-bottom: 1px solid var(--color-border);
+}
+</style>