Implement EnumSelectorRow and StepsInputRow

ts/deckoptions/Col.svelte

@@ -2,10 +2,12 @@
 Copyright: Ankitects Pty Ltd and contributors
 License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
-<script lang="ts">
-    type Size = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-    type Breakpoint = "xs" | "sm" | "md" | "lg" | "xl";
+<script context="module" lang="ts">
+    export type Size = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+    export type Breakpoint = "xs" | "sm" | "md" | "lg" | "xl";
+</script>
 
+<script lang="ts">
     export let breakpoint: Breakpoint | undefined = undefined;
     export let size: Size | undefined = undefined;
     export let grow = true;

ts/deckoptions/EnumSelectorRow.svelte

@@ -0,0 +1,30 @@
+<!--
+    Copyright: Ankitects Pty Ltd and contributors
+    License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="ts">
+    import type { Breakpoint } from "Col.svelte";
+
+    import marked from "marked";
+    import Row from "./Row.svelte";
+    import Col from "./Col.svelte";
+    import HelpPopup from "./HelpPopup.svelte";
+    import EnumSelector from "./EnumSelector.svelte";
+    import RevertButton from "./RevertButton.svelte";
+
+    export let value: number;
+    export let defaultValue: number;
+    export let breakpoint: Breakpoint = "md";
+    export let choices: string[];
+    export let markdownTooltip: string;
+</script>
+
+<Row>
+    <Col size={7}>
+        <slot /><HelpPopup html={marked(markdownTooltip)} />
+    </Col>
+    <Col {breakpoint} size={5}>
+        <EnumSelector bind:value {choices} />
+        <RevertButton bind:value {defaultValue} />
+    </Col>
+</Row>

ts/deckoptions/LapseOptions.svelte

@@ -4,16 +4,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import * as tr from "lib/i18n";
-    import marked from "marked";
     import TitledContainer from "./TitledContainer.svelte";
-    import Row from "./Row.svelte";
-    import Col from "./Col.svelte";
+    import StepsInputRow from "./StepsInputRow.svelte";
+    import SpinBoxRow from "./SpinBoxRow.svelte";
+    import EnumSelectorRow from "./EnumSelectorRow.svelte";
     import Warning from "./Warning.svelte";
-    import HelpPopup from "./HelpPopup.svelte";
-    import SpinBox from "./SpinBox.svelte";
-    import EnumSelector from "./EnumSelector.svelte";
-    import StepsInput from "./StepsInput.svelte";
-    import RevertButton from "./RevertButton.svelte";
     import type { DeckOptionsState } from "./lib";
 
     export let state: DeckOptionsState;
@@ -35,65 +30,41 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <TitledContainer title={tr.schedulingLapses()}>
-    <Row>
-        <Col size={7}>
-            {tr.deckConfigRelearningSteps()}<HelpPopup
-                html={marked(tr.deckConfigRelearningStepsTooltip())}
-            />
-        </Col>
-        <Col breakpoint={$config.relearnSteps.length > 2 ? "sm" : undefined} size={5}>
-            <StepsInput bind:value={$config.relearnSteps} />
-            <RevertButton
-                defaultValue={defaults.relearnSteps}
-                value={$config.relearnSteps}
-            />
-        </Col>
-    </Row>
+    <StepsInputRow
+        bind:value={$config.relearnSteps}
+        defaultValue={defaults.relearnSteps}
+        markdownTooltip={tr.deckConfigRelearningStepsTooltip()}
+    >
+        {tr.deckConfigRelearningSteps()}
+    </StepsInputRow>
 
-    <Row>
-        <Col size={7}>
-            {tr.schedulingMinimumInterval()}<HelpPopup
-                html={marked(tr.deckConfigMinimumIntervalTooltip())}
-            />
-        </Col>
-        <Col size={5}>
-            <SpinBox min={1} bind:value={$config.minimumLapseInterval} />
-            <RevertButton
-                defaultValue={defaults.minimumLapseInterval}
-                bind:value={$config.minimumLapseInterval}
-            />
-        </Col>
-    </Row>
+    <SpinBoxRow
+        bind:value={$config.minimumLapseInterval}
+        defaultValue={defaults.minimumLapseInterval}
+        min={1}
+        markdownTooltip={tr.deckConfigMinimumIntervalTooltip()}
+    >
+        {tr.schedulingMinimumInterval()}
+    </SpinBoxRow>
 
     <Warning warning={stepsExceedMinimumInterval} />
 
-    <Row>
-        <Col size={7}>
-            {tr.schedulingLeechThreshold()}<HelpPopup
-                html={marked(tr.deckConfigLeechThresholdTooltip())}
-            />
-        </Col>
-        <Col size={5}>
-            <SpinBox min={1} bind:value={$config.leechThreshold} />
-            <RevertButton
-                defaultValue={defaults.leechThreshold}
-                bind:value={$config.leechThreshold}
-            />
-        </Col>
-    </Row>
+    <SpinBoxRow
+        bind:value={$config.leechThreshold}
+        defaultValue={defaults.leechThreshold}
+        min={1}
+        markdownTooltip={tr.deckConfigLeechThresholdTooltip()}
+    >
+        {tr.schedulingLeechThreshold()}
+    </SpinBoxRow>
 
-    <Row>
-        <Col size={7}>
-            {tr.schedulingLeechAction()}<HelpPopup
-                html={marked(tr.deckConfigLeechActionTooltip())}
-            />
-        </Col>
-        <Col breakpoint="sm" size={5}>
-            <EnumSelector choices={leechChoices} bind:value={$config.leechAction} />
-            <RevertButton
-                defaultValue={defaults.leechAction}
-                bind:value={$config.leechAction}
-            />
-        </Col>
-    </Row>
+    <EnumSelectorRow
+        bind:value={$config.leechAction}
+        defaultValue={defaults.leechAction}
+        choices={leechChoices}
+        breakpoint="sm"
+        markdownTooltip={tr.deckConfigLeechActionTooltip()}
+    >
+        {tr.schedulingLeechAction()}
+    </EnumSelectorRow>
 </TitledContainer>

ts/deckoptions/NewOptions.svelte

@@ -4,16 +4,11 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 -->
 <script lang="ts">
     import * as tr from "lib/i18n";
-    import marked from "marked";
     import TitledContainer from "./TitledContainer.svelte";
-    import Row from "./Row.svelte";
-    import Col from "./Col.svelte";
+    import StepsInputRow from "./StepsInputRow.svelte";
+    import SpinBoxRow from "./SpinBoxRow.svelte";
+    import EnumSelectorRow from "./EnumSelectorRow.svelte";
     import Warning from "./Warning.svelte";
-    import HelpPopup from "./HelpPopup.svelte";
-    import SpinBox from "./SpinBox.svelte";
-    import StepsInput from "./StepsInput.svelte";
-    import EnumSelector from "./EnumSelector.svelte";
-    import RevertButton from "./RevertButton.svelte";
     import type { DeckOptionsState } from "./lib";
 
     export let state: DeckOptionsState;
@@ -43,70 +38,41 @@ License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
 </script>
 
 <TitledContainer title={tr.schedulingNewCards()}>
-    <Row>
-        <Col size={7}>
-            {tr.deckConfigLearningSteps()}<HelpPopup
-                html={marked(tr.deckConfigLearningStepsTooltip())}
-            />
-        </Col>
-        <Col size={5}>
-            <StepsInput bind:value={$config.learnSteps} />
-            <RevertButton
-                defaultValue={defaults.learnSteps}
-                bind:value={$config.learnSteps}
-            />
-        </Col>
-    </Row>
+    <StepsInputRow
+        bind:value={$config.learnSteps}
+        defaultValue={defaults.learnSteps}
+        markdownTooltip={tr.deckConfigLearningStepsTooltip()}
+    >
+        {tr.deckConfigLearningSteps()}
+    </StepsInputRow>
 
-    <Row>
-        <Col size={7}>
-            {tr.schedulingGraduatingInterval()}<HelpPopup
-                html={marked(tr.deckConfigGraduatingIntervalTooltip())}
-            />
-        </Col>
-        <Col size={5}>
-            <SpinBox bind:value={$config.graduatingIntervalGood} />
-            <RevertButton
-                defaultValue={defaults.graduatingIntervalGood}
-                bind:value={$config.graduatingIntervalGood}
-            />
-        </Col>
-    </Row>
+    <SpinBoxRow
+        bind:value={$config.graduatingIntervalGood}
+        defaultValue={defaults.graduatingIntervalGood}
+        markdownTooltip={tr.deckConfigGraduatingIntervalTooltip()}
+    >
+        {tr.schedulingGraduatingInterval()}
+    </SpinBoxRow>
 
     <Warning warning={stepsExceedGraduatingInterval} />
 
-    <Row>
-        <Col size={7}>
-            {tr.schedulingEasyInterval()}<HelpPopup
-                html={marked(tr.deckConfigEasyIntervalTooltip())}
-            />
-        </Col>
-        <Col size={5}>
-            <SpinBox bind:value={$config.graduatingIntervalEasy} />
-            <RevertButton
-                defaultValue={defaults.graduatingIntervalEasy}
-                bind:value={$config.graduatingIntervalEasy}
-            />
-        </Col>
-    </Row>
+    <SpinBoxRow
+        bind:value={$config.graduatingIntervalEasy}
+        defaultValue={defaults.graduatingIntervalEasy}
+        markdownTooltip={tr.deckConfigEasyIntervalTooltip()}
+    >
+        {tr.schedulingEasyInterval()}
+    </SpinBoxRow>
 
     <Warning warning={goodExceedsEasy} />
 
-    <Row>
-        <Col size={7}>
-            {tr.deckConfigNewInsertionOrder()}<HelpPopup
-                html={marked(tr.deckConfigNewInsertionOrderTooltip())}
-            />
-        </Col>
-        <Col breakpoint={"md"} size={5}>
-            <EnumSelector
-                choices={newInsertOrderChoices}
-                bind:value={$config.newCardInsertOrder}
-            />
-            <RevertButton
-                defaultValue={defaults.newCardInsertOrder}
-                bind:value={$config.newCardInsertOrder}
-            />
-        </Col>
-    </Row>
+    <EnumSelectorRow
+        bind:value={$config.newCardInsertOrder}
+        defaultValue={defaults.newCardInsertOrder}
+        choices={newInsertOrderChoices}
+        breakpoint={"md"}
+        markdownTooltip={tr.deckConfigNewInsertionOrderTooltip()}
+    >
+        {tr.deckConfigNewInsertionOrder()}
+    </EnumSelectorRow>
 </TitledContainer>

ts/deckoptions/SpinBoxRow.svelte

@@ -12,6 +12,7 @@
 
     export let value: any;
     export let defaultValue: any;
+    export let min = 0;
     export let markdownTooltip: string;
 </script>
 
@@ -20,7 +21,7 @@
         <slot /><HelpPopup html={marked(markdownTooltip)} />
     </Col>
     <Col size={5}>
-        <SpinBox min={0} bind:value />
-        <RevertButton {defaultValue} bind:value />
+        <SpinBox bind:value {min} />
+        <RevertButton bind:value {defaultValue} />
     </Col>
 </Row>

ts/deckoptions/StepsInputRow.svelte

@@ -0,0 +1,26 @@
+<!--
+    Copyright: Ankitects Pty Ltd and contributors
+    License: GNU AGPL, version 3 or later; http://www.gnu.org/licenses/agpl.html
+-->
+<script lang="ts">
+    import marked from "marked";
+    import Row from "./Row.svelte";
+    import Col from "./Col.svelte";
+    import HelpPopup from "./HelpPopup.svelte";
+    import StepsInput from "./StepsInput.svelte";
+    import RevertButton from "./RevertButton.svelte";
+
+    export let value: any;
+    export let defaultValue: any;
+    export let markdownTooltip: string;
+</script>
+
+<Row>
+    <Col size={7}>
+        <slot /><HelpPopup html={marked(markdownTooltip)} />
+    </Col>
+    <Col size={5}>
+        <StepsInput bind:value />
+        <RevertButton bind:value {defaultValue} />
+    </Col>
+</Row>