Fixed issue with only having only allowing one tab open at a time for…

… editor or preview tabs || Also converted all details and summary in editor components to svelte:fragments
acmcsufoss · May 1, 2024 · bc6b054 · bc6b054
1 parent 4f9b185
commit bc6b054
Show file tree

Hide file tree

Showing 11 changed files with 33 additions and 35 deletions.
diff --git a/src/lib/components/questions/availability/availability_question_input_editor.svelte b/src/lib/components/questions/availability/availability_question_input_editor.svelte
@@ -32,9 +32,7 @@
 	</fieldset>
 	<!-- TODO: Make the avaibilityQuestion Input here be the default value for the sample -->
 	<AvailabilityQuestionInput bind:data />
-	<details>
-		<summary>Sample</summary>
-
+	<svelte:fragment slot="preview">
 		<AvailabilityQuestionInput {data} />
-	</details>
+	</svelte:fragment>
 </BaseEditor>
diff --git a/src/lib/components/questions/base/base_editor.svelte b/src/lib/components/questions/base/base_editor.svelte
@@ -13,7 +13,12 @@
 
 <!-- Copied From TextQuestionInput -->
 <div class="tabs">
-	<input type="radio" name="tabs" id="tab-01-{data.name}:{data.type}" checked={true} />
+	<input
+		type="radio"
+		name="tabs-{data.name}:{data.type}"
+		id="tab-01-{data.name}:{data.type}"
+		checked={true}
+	/>
 	<label for="tab-01-{data.name}:{data.type}">Tab 1</label>
 	<div class="tab-content">
 		<fieldset>
@@ -35,7 +40,7 @@
 		<slot />
 	</div>
 
-	<input type="radio" name="tabs" id="tab-02-{data.name}:{data.type}" />
+	<input type="radio" name="tabs-{data.name}:{data.type}" id="tab-02-{data.name}:{data.type}" />
 	<label for="tab-02-{data.name}:{data.type}">Tab 2</label>
 	<div class="tab-content">
 		<slot name="preview" />

diff --git a/src/lib/components/questions/color/color_question_input_editor.svelte b/src/lib/components/questions/color/color_question_input_editor.svelte
@@ -15,10 +15,9 @@
 		<legend>Default Color</legend>
 		<input type="color" name="color-" bind:value={data.value} />
 	</fieldset>
-	<details>
-		<summary>Sample</summary>
+	<svelte:fragment slot="preview">
 		<div class="question">
 			<ColorQuestionInput bind:data />
 		</div>
-	</details>
+	</svelte:fragment>
 </BaseEditor>
diff --git a/src/lib/components/questions/date/date_question_input_editor.svelte b/src/lib/components/questions/date/date_question_input_editor.svelte
@@ -26,10 +26,9 @@
 		<legend>Default Date</legend>
 		<input type="date" bind:value={data.value} />
 	</fieldset>
-	<details>
-		<summary>Sample</summary>
+	<svelte:fragment slot="preview">
 		<div class="question">
 			<DateQuestionInput bind:data />
 		</div>
-	</details>
+	</svelte:fragment>
 </BaseEditor>
diff --git a/src/lib/components/questions/datetime/datetime_question_input_editor.svelte b/src/lib/components/questions/datetime/datetime_question_input_editor.svelte
@@ -26,10 +26,9 @@
 		<legend>Default Date/Time</legend>
 		<input type="datetime-local" bind:value={data.value} />
 	</fieldset>
-	<details>
-		<summary>Sample</summary>
+	<svelte:fragment slot="preview">
 		<div class="question">
 			<DatetimeQuestionInput {data} />
 		</div>
-	</details>
+	</svelte:fragment>
 </BaseEditor>
diff --git a/src/lib/components/questions/number/number_question_input_editor.svelte b/src/lib/components/questions/number/number_question_input_editor.svelte
@@ -29,8 +29,9 @@
 		<legend>placeholder</legend>
 		<input type="text" bind:value={data.placeholder} />
 	</fieldset>
-	<details>
-		<summary>Sample</summary>
-		<NumberQuestionInput bind:data />
-	</details>
+	<svelte:fragment slot="preview">
+		<div class="question">
+			<NumberQuestionInput bind:data />
+		</div>
+	</svelte:fragment>
 </BaseEditor>
diff --git a/src/lib/components/questions/select/select_question_input_editor.svelte b/src/lib/components/questions/select/select_question_input_editor.svelte
@@ -36,8 +36,9 @@
 			deleteItem: DeleteItem
 		}}
 	/>
-	<details>
-		<summary>Sample</summary>
-		<SelectQuestionInput {data} />
-	</details>
+	<svelte:fragment slot="preview">
+		<div class="question">
+			<SelectQuestionInput {data} />
+		</div>
+	</svelte:fragment>
 </BaseEditor>
diff --git a/src/lib/components/questions/text/text_question_input_editor.svelte b/src/lib/components/questions/text/text_question_input_editor.svelte
@@ -43,10 +43,9 @@
 	<fieldset>
 		<legend>Choices (COMMING SOON)</legend>
 	</fieldset>
-	<details>
-		<summary>Sample</summary>
+	<svelte:fragment slot="preview">
 		<div class="question">
 			<TextQuestionInput bind:data />
 		</div>
-	</details>
+	</svelte:fragment>
 </BaseEditor>
diff --git a/src/lib/components/questions/textarea/textarea_question_input_editor.svelte b/src/lib/components/questions/textarea/textarea_question_input_editor.svelte
@@ -23,10 +23,9 @@
 		<legend>Placeholder</legend>
 		<input type="text" bind:value={data.placeholder} />
 	</fieldset>
-	<details>
-		<summary>Sample</summary>
+	<svelte:fragment slot="preview">
 		<div class="question">
 			<TextareaQuestionInput bind:data />
 		</div>
-	</details>
+	</svelte:fragment>
 </BaseEditor>
diff --git a/src/lib/components/questions/time/time_question_input_editor.svelte b/src/lib/components/questions/time/time_question_input_editor.svelte
@@ -20,10 +20,9 @@
 		<legend>Default Time</legend>
 		<input type="time" bind:value={data.value} min={data.min} max={data.max} />
 	</fieldset>
-	<details>
-		<summary>Sample</summary>
+	<svelte:fragment slot="preview">
 		<div class="question">
 			<TimeQuestionInput bind:data />
 		</div>
-	</details>
+	</svelte:fragment>
 </BaseEditor>
diff --git a/src/lib/components/questions/timezone/timezone_question_input_editor.svelte b/src/lib/components/questions/timezone/timezone_question_input_editor.svelte
@@ -11,8 +11,7 @@
 		<legend>Defualt Timezone ID</legend>
 		<input type="text" bind:value={data.value} />
 	</fieldset>
-	<details>
-		<summary> Time </summary>
+	<svelte:fragment slot="preview">
 		<TimezoneQuestionInput bind:data />
-	</details>
+	</svelte:fragment>
 </BaseEditor>