From 9a11e0f4a38297006b89cc7bb2a60734111582e0 Mon Sep 17 00:00:00 2001
From: Leonardo Bishop <me@leonardobishop.com>
Date: Sun, 10 Mar 2024 00:13:25 +0000
Subject: Migrate to nuxt

---
 .../Category/CategoryChildrenOptionsPanel.vue      | 53 +++++++++++++++++++++
 .../Editor/Category/CategoryOptionsPanel.vue       | 54 ++++++++++++++++++++++
 2 files changed, 107 insertions(+)
 create mode 100644 components/Editor/Category/CategoryChildrenOptionsPanel.vue
 create mode 100644 components/Editor/Category/CategoryOptionsPanel.vue

(limited to 'components/Editor/Category')

diff --git a/components/Editor/Category/CategoryChildrenOptionsPanel.vue b/components/Editor/Category/CategoryChildrenOptionsPanel.vue
new file mode 100644
index 0000000..6e96f64
--- /dev/null
+++ b/components/Editor/Category/CategoryChildrenOptionsPanel.vue
@@ -0,0 +1,53 @@
+<script setup lang="ts">
+import { useSessionStore, type EditorCategory } from '@/stores/session';
+import { computed } from 'vue';
+import EditorOptionsPanel from '../EditorOptionsPanel.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/CategoryOptionsPanel.vue b/components/Editor/Category/CategoryOptionsPanel.vue
new file mode 100644
index 0000000..f7d548c
--- /dev/null
+++ b/components/Editor/Category/CategoryOptionsPanel.vue
@@ -0,0 +1,54 @@
+<script setup lang="ts">
+import { useSessionStore, type EditorCategory } from '@/stores/session';
+import { computed } from 'vue';
+import EditorOptionsPanel from '../EditorOptionsPanel.vue';
+import Checkbox from '@/components/Control/Checkbox.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>
+
-- 
cgit v1.2.3-70-g09d2