feat: create & implement choice input

src/lib/elements/forms/index.ts

@@ -16,4 +16,5 @@ export { default as InputRadio } from './inputRadio.svelte';
 export { default as InputSelect } from './inputSelect.svelte';
 export { default as InputCheckbox } from './inputCheckbox.svelte';
 export { default as InputPhone } from './inputPhone.svelte';
+export { default as InputChoice } from './inputChoice.svelte';
 export { default as Helper } from './helper.svelte';

src/lib/elements/forms/inputChoice.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+    import { FormItem } from '.';
+
+    export let type: 'checkbox' | 'switchbox' = 'checkbox';
+    export let label: string;
+    export let showLabel = true;
+    export let id: string;
+    export let value = false;
+    export let required = false;
+    export let disabled = false;
+    export let description = '';
+</script>
+
+<FormItem>
+    <label class="choice-item" for={id}>
+        <input
+            {id}
+            {disabled}
+            {required}
+            type="checkbox"
+            class:switch={type === 'switchbox'}
+            bind:checked={value} />
+
+        <div class="choice-item-content">
+            <div class:u-hide={!showLabel} class="choice-item-title">{label}</div>
+            {#if $$slots}
+                <p class="choice-item-paragraph"><slot /></p>
+            {/if}
+        </div>
+    </label>
+</FormItem>

src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_boolean.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { InputSwitch } from '$lib/elements/forms';
+    import { InputChoice, InputSelect } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
@@ -46,6 +46,17 @@
     }
 </script>
 
-<InputSwitch id="required" label="Required" bind:value={required} disabled={overview} />
-<InputSwitch id="array" label="Array" bind:value={array} disabled={overview} />
-<InputSwitch id="default" label="Default" bind:value={xdefault} disabled={overview} />
+<InputSelect
+    id="default"
+    label="Default value"
+    placeholder="Select a value"
+    options={[
+        { label: 'True', value: true },
+        { label: 'False', value: false }
+    ]}
+    bind:value={xdefault}
+    disabled={overview} />
+<InputChoice id="required" label="Required" bind:value={required} disabled={overview}>
+    Indicate whether this is a required attribute</InputChoice>
+<InputChoice id="array" label="Array" bind:value={array} disabled={overview}>
+    Indicate whether this attribute should act as an array</InputChoice>

src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_email.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { InputText, InputSwitch } from '$lib/elements/forms';
+    import { InputText, InputChoice } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
@@ -45,6 +45,8 @@
     }
 </script>
 
-<InputSwitch id="required" label="Required" bind:value={required} disabled={overview} />
-<InputSwitch id="required" label="Array" bind:value={array} disabled={overview} />
-<InputText id="default" label="Default" bind:value={xdefault} readonly={overview} />
+<InputText id="default" label="Default value" bind:value={xdefault} readonly={overview} />
+<InputChoice id="required" label="Required" bind:value={required} disabled={overview}>
+    Indicate whether this is a required attribute</InputChoice>
+<InputChoice id="array" label="Array" bind:value={array} disabled={overview}>
+    Indicate whether this attribute should act as an array</InputChoice>

src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_enum.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { InputSwitch, InputSelect, InputTags } from '$lib/elements/forms';
+    import { InputChoice, InputSelect, InputTags } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
@@ -57,6 +57,13 @@
     bind:tags={elements}
     placeholder="Add elements here"
     readonly={overview} />
-<InputSelect id="default" label="Default" bind:options bind:value={xdefault} disabled={overview} />
-<InputSwitch id="required" label="Required" bind:value={required} disabled={overview} />
-<InputSwitch id="required" label="Array" bind:value={array} disabled={overview} />
+<InputSelect
+    id="default"
+    label="Default value"
+    bind:options
+    bind:value={xdefault}
+    disabled={overview} />
+<InputChoice id="required" label="Required" bind:value={required} disabled={overview}>
+    Indicate whether this is a required attribute</InputChoice>
+<InputChoice id="array" label="Array" bind:value={array} disabled={overview}>
+    Indicate whether this attribute should act as an array</InputChoice>

src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_float.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { InputNumber, InputSwitch } from '$lib/elements/forms';
+    import { InputNumber, InputChoice } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
@@ -52,6 +52,13 @@
 <InputNumber id="min" label="Min" bind:value={min} readonly={overview} />
 <InputNumber id="max" label="Max" bind:value={max} readonly={overview} />
 
-<InputSwitch id="required" label="Required" bind:value={required} disabled={overview} />
-<InputSwitch id="array" label="Array" bind:value={array} disabled={overview} />
-<InputNumber id="default" label="Default" bind:value={xdefault} readonly={overview} />
+<InputNumber
+    id="default"
+    label="Default value"
+    bind:value={xdefault}
+    readonly={overview}
+    step="any" />
+<InputChoice id="required" label="Required" bind:value={required} disabled={overview}>
+    Indicate whether this is a required attribute</InputChoice>
+<InputChoice id="array" label="Array" bind:value={array} disabled={overview}>
+    Indicate whether this attribute should act as an array</InputChoice>

src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_integer.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { InputNumber, InputSwitch } from '$lib/elements/forms';
+    import { InputNumber, InputChoice } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
@@ -52,6 +52,8 @@
 <InputNumber id="min" label="Min" bind:value={min} readonly={overview} />
 <InputNumber id="max" label="Max" bind:value={max} readonly={overview} />
 
-<InputSwitch id="required" label="Required" bind:value={required} disabled={overview} />
-<InputSwitch id="array" label="Array" bind:value={array} disabled={overview} />
-<InputNumber id="default" label="Default" bind:value={xdefault} readonly={overview} />
+<InputNumber id="default" label="Default value" bind:value={xdefault} readonly={overview} />
+<InputChoice id="required" label="Required" bind:value={required} disabled={overview}>
+    Indicate whether this is a required attribute</InputChoice>
+<InputChoice id="array" label="Array" bind:value={array} disabled={overview}>
+    Indicate whether this attribute should act as an array</InputChoice>

src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_ip.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { InputText, InputSwitch } from '$lib/elements/forms';
+    import { InputText, InputChoice } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
@@ -44,6 +44,8 @@
     }
 </script>
 
-<InputSwitch id="required" label="Required" bind:value={required} disabled={overview} />
-<InputSwitch id="required" label="Array" bind:value={array} disabled={overview} />
-<InputText id="default" label="Default" bind:value={xdefault} readonly={overview} />
+<InputText id="default" label="Default value" bind:value={xdefault} readonly={overview} />
+<InputChoice id="required" label="Required" bind:value={required} disabled={overview}>
+    Indicate whether this is a required attribute</InputChoice>
+<InputChoice id="array" label="Array" bind:value={array} disabled={overview}>
+    Indicate whether this attribute should act as an array</InputChoice>

src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_string.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { InputNumber, InputText, InputSwitch } from '$lib/elements/forms';
+    import { InputNumber, InputText, InputChoice } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
@@ -47,6 +47,8 @@
 </script>
 
 <InputNumber id="size" label="Size" bind:value={size} required readonly={overview} />
-<InputSwitch id="required" label="Required" bind:value={required} disabled={overview} />
-<InputSwitch id="required" label="Array" bind:value={array} disabled={overview} />
-<InputText id="default" label="Default" bind:value={xdefault} readonly={overview} />
+<InputText id="default" label="Default value" bind:value={xdefault} readonly={overview} />
+<InputChoice id="required" label="Required" bind:value={required} disabled={overview}>
+    Indicate whether this is a required attribute</InputChoice>
+<InputChoice id="array" label="Array" bind:value={array} disabled={overview}>
+    Indicate whether this attribute should act as an array</InputChoice>

src/routes/console/[project]/databases/database/[database]/collection/[collection]/attributes/_url.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import { InputText, InputSwitch } from '$lib/elements/forms';
+    import { InputText, InputChoice } from '$lib/elements/forms';
     import { addNotification } from '$lib/stores/notifications';
     import { sdkForProject } from '$lib/stores/sdk';
     import { createEventDispatcher } from 'svelte';
@@ -44,6 +44,8 @@
     }
 </script>
 
-<InputSwitch id="required" label="Required" bind:value={required} disabled={overview} />
-<InputSwitch id="required" label="Array" bind:value={array} disabled={overview} />
-<InputText id="default" label="Default" bind:value={xdefault} readonly={overview} />
+<InputText id="default" label="Default value" bind:value={xdefault} readonly={overview} />
+<InputChoice id="required" label="Required" bind:value={required} disabled={overview}>
+    Indicate whether this is a required attribute</InputChoice>
+<InputChoice id="array" label="Array" bind:value={array} disabled={overview}>
+    Indicate whether this attribute should act as an array</InputChoice>

src/routes/console/[project]/databases/database/[database]/collection/[collection]/document/[document]/attributes/_integer.svelte

@@ -14,4 +14,5 @@
     required={attribute.required}
     minlength={attribute.min}
     maxlength={attribute.max}
-    bind:value />
+    bind:value
+    step={attribute.type === 'double' ? 'any' : 1} />