From 5c0cec6ed7494f3347fa8e8a1a46122872b2f6bc Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Fri, 17 Mar 2023 19:28:05 +0000
Subject: [PATCH 1/5] feat: input count dynamic color

---
 src/lib/elements/forms/inputTextarea.svelte   | 29 ++++++++++++++++-
 .../attributes/string.svelte                  | 31 +++++++++++++------
 2 files changed, 50 insertions(+), 10 deletions(-)

diff --git a/src/lib/elements/forms/inputTextarea.svelte b/src/lib/elements/forms/inputTextarea.svelte
index 7285b6f24..51feff2e2 100644
--- a/src/lib/elements/forms/inputTextarea.svelte
+++ b/src/lib/elements/forms/inputTextarea.svelte
@@ -12,6 +12,8 @@
     export let readonly = false;
     export let autofocus = false;
     export let maxlength: number = null;
+    export let optionalText: string | undefined = undefined;
+    export let tooltip: string = null;
 
     let element: HTMLTextAreaElement;
     let error: string;
@@ -37,7 +39,7 @@
 </script>
 
 <FormItem>
-    <Label {required} hide={!showLabel} for={id}>
+    <Label {required} {tooltip} {optionalText} hide={!showLabel} for={id}>
         {label}
     </Label>
 
@@ -53,8 +55,33 @@
             bind:value
             bind:this={element}
             on:invalid={handleInvalid} />
+        {#if maxlength}
+            <span class="text-counter" data-active={!!value}>
+                <span class="text-counter-count">{value?.length ?? 0}</span>
+                <span class="text-counter-separator" />
+                <span class="text-counter-max">{maxlength}</span>
+            </span>
+        {/if}
     </div>
     {#if error}
         <Helper type="warning">{error}</Helper>
     {/if}
 </FormItem>
+
+<style class="scss">
+    .text-counter {
+        --p-text-counter-color: var(--color-neutral-50);
+    }
+
+    .text-counter[data-active='true'] {
+        --p-text-counter-color: var(--color-neutral-70);
+    }
+
+    :global(.theme-dark) .text-counter {
+        --p-text-counter-color: var(--color-neutral-70);
+    }
+
+    :global(.theme-dark) .text-counter[data-active='true'] {
+        --p-text-counter-color: var(--color-neutral-50);
+    }
+</style>
diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/string.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/string.svelte
index e6655f95e..49750c8ea 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/string.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/document-[document]/attributes/string.svelte
@@ -1,5 +1,6 @@
 <script lang="ts">
     import InputText from '$lib/elements/forms/inputText.svelte';
+    import InputTextarea from '$lib/elements/forms/inputTextarea.svelte';
     import type { Models } from '@aw-labs/appwrite-console';
 
     export let id: string;
@@ -9,12 +10,24 @@
     export let optionalText: string | undefined = undefined;
 </script>
 
-<InputText
-    {id}
-    {label}
-    {optionalText}
-    placeholder="Enter string"
-    showLabel={!!label?.length}
-    required={attribute.required}
-    maxlength={attribute.size}
-    bind:value />
+{#if attribute.size > 64}
+    <InputTextarea
+        {id}
+        {label}
+        {optionalText}
+        placeholder="Enter string"
+        showLabel={!!label?.length}
+        required={attribute.required}
+        maxlength={attribute.size}
+        bind:value />
+{:else}
+    <InputText
+        {id}
+        {label}
+        {optionalText}
+        placeholder="Enter string"
+        showLabel={!!label?.length}
+        required={attribute.required}
+        maxlength={attribute.size}
+        bind:value />
+{/if}

From 25d5ab173fb1276ba3ba199a04e181dacc13c050 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Mon, 20 Mar 2023 19:09:57 +0000
Subject: [PATCH 2/5] refactor: paddinginline end on input text

---
 src/lib/elements/forms/inputText.svelte | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/lib/elements/forms/inputText.svelte b/src/lib/elements/forms/inputText.svelte
index 333f17369..dfc83a7da 100644
--- a/src/lib/elements/forms/inputText.svelte
+++ b/src/lib/elements/forms/inputText.svelte
@@ -58,6 +58,7 @@
             type="text"
             class="input-text"
             bind:value
+            class:u-padding-inline-end-56={typeof maxlength === 'number'}
             bind:this={element}
             on:invalid={handleInvalid} />
         {#if maxlength}

From a160506a7400b34feb33d03cb77f3bdf98e22bc8 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Mon, 20 Mar 2023 19:22:55 +0000
Subject: [PATCH 3/5] fix: input text missing text counter

---
 src/lib/elements/forms/inputText.svelte     |  7 ++----
 src/lib/elements/forms/inputTextarea.svelte | 25 ++----------------
 src/lib/elements/forms/textCounter.svelte   | 28 +++++++++++++++++++++
 3 files changed, 32 insertions(+), 28 deletions(-)
 create mode 100644 src/lib/elements/forms/textCounter.svelte

diff --git a/src/lib/elements/forms/inputText.svelte b/src/lib/elements/forms/inputText.svelte
index dfc83a7da..f56963788 100644
--- a/src/lib/elements/forms/inputText.svelte
+++ b/src/lib/elements/forms/inputText.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import { onMount } from 'svelte';
     import { FormItem, Helper, Label } from '.';
+    import TextCounter from './textCounter.svelte';
 
     export let label: string;
     export let optionalText: string | undefined = undefined;
@@ -62,11 +63,7 @@
             bind:this={element}
             on:invalid={handleInvalid} />
         {#if maxlength}
-            <span class="text-counter">
-                <span class="text-counter-count">{value?.length ?? 0}</span>
-                <span class="text-counter-separator" />
-                <span class="text-counter-max">{maxlength}</span>
-            </span>
+            <TextCounter max={maxlength} count={value?.length ?? 0} />
         {/if}
     </div>
     {#if error}
diff --git a/src/lib/elements/forms/inputTextarea.svelte b/src/lib/elements/forms/inputTextarea.svelte
index 51feff2e2..f7cb270c1 100644
--- a/src/lib/elements/forms/inputTextarea.svelte
+++ b/src/lib/elements/forms/inputTextarea.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import { onMount } from 'svelte';
     import { FormItem, Helper, Label } from '.';
+    import TextCounter from './textCounter.svelte';
 
     export let label: string;
     export let showLabel = true;
@@ -56,32 +57,10 @@
             bind:this={element}
             on:invalid={handleInvalid} />
         {#if maxlength}
-            <span class="text-counter" data-active={!!value}>
-                <span class="text-counter-count">{value?.length ?? 0}</span>
-                <span class="text-counter-separator" />
-                <span class="text-counter-max">{maxlength}</span>
-            </span>
+            <TextCounter max={maxlength} count={value?.length ?? 0} />
         {/if}
     </div>
     {#if error}
         <Helper type="warning">{error}</Helper>
     {/if}
 </FormItem>
-
-<style class="scss">
-    .text-counter {
-        --p-text-counter-color: var(--color-neutral-50);
-    }
-
-    .text-counter[data-active='true'] {
-        --p-text-counter-color: var(--color-neutral-70);
-    }
-
-    :global(.theme-dark) .text-counter {
-        --p-text-counter-color: var(--color-neutral-70);
-    }
-
-    :global(.theme-dark) .text-counter[data-active='true'] {
-        --p-text-counter-color: var(--color-neutral-50);
-    }
-</style>
diff --git a/src/lib/elements/forms/textCounter.svelte b/src/lib/elements/forms/textCounter.svelte
new file mode 100644
index 000000000..14e707720
--- /dev/null
+++ b/src/lib/elements/forms/textCounter.svelte
@@ -0,0 +1,28 @@
+<script lang="ts">
+    export let count: number;
+    export let max: number;
+</script>
+
+<span class="text-counter" class:active={count > 0}>
+    <span class="text-counter-count">{count}</span>
+    <span class="text-counter-separator" />
+    <span class="text-counter-max">{max}</span>
+</span>
+
+<style lang="scss">
+    .text-counter {
+        --p-text-counter-color: var(--color-neutral-50);
+
+        &.active {
+            --p-text-counter-color: var(--color-neutral-70);
+        }
+    }
+
+    :global(.theme-dark) .text-counter {
+        --p-text-counter-color: var(--color-neutral-70);
+
+        &.active {
+            --p-text-counter-color: var(--color-neutral-50);
+        }
+    }
+</style>

From 505cfe2cb4856dfa679a3d189088a5f1f8645998 Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Mon, 20 Mar 2023 19:24:21 +0000
Subject: [PATCH 4/5] refactor: modularize text counter

---
 src/lib/elements/forms/inputId.svelte | 7 ++-----
 1 file changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/lib/elements/forms/inputId.svelte b/src/lib/elements/forms/inputId.svelte
index b11c7b7a3..93aaecc55 100644
--- a/src/lib/elements/forms/inputId.svelte
+++ b/src/lib/elements/forms/inputId.svelte
@@ -1,6 +1,7 @@
 <script lang="ts">
     import { onMount } from 'svelte';
     import { FormItem } from '.';
+    import TextCounter from './textCounter.svelte';
 
     export let value = '';
 
@@ -42,11 +43,7 @@
             bind:value
             bind:this={element}
             on:invalid={handleInvalid} />
-        <span class="text-counter">
-            <span class="text-counter-count">{value?.length ?? 0}</span>
-            <span class="text-counter-separator" />
-            <span class="text-counter-max">36</span>
-        </span>
+        <TextCounter count={value?.length ?? 0} max={36} />
     </div>
 </FormItem>
 <div

From 01fad2db341e9547e63e227aba27519d08dd4a9b Mon Sep 17 00:00:00 2001
From: tglide <26071571+TGlide@users.noreply.github.com>
Date: Wed, 22 Mar 2023 15:46:11 +0000
Subject: [PATCH 5/5] feat: input text area on big string attributes

---
 .../attributes/string.svelte                  | 25 +++++++++++++------
 1 file changed, 18 insertions(+), 7 deletions(-)

diff --git a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte
index 9ecc9c513..747e2d10a 100644
--- a/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte
+++ b/src/routes/console/project-[project]/databases/database-[database]/collection-[collection]/attributes/string.svelte
@@ -22,6 +22,7 @@
 
 <script lang="ts">
     import { InputNumber, InputText, InputChoice } from '$lib/elements/forms';
+    import InputTextarea from '$lib/elements/forms/inputTextarea.svelte';
 
     export let selectedAttribute: Models.AttributeString;
     export let data: Partial<Models.AttributeString> = {
@@ -50,13 +51,23 @@
     bind:value={data.size}
     required
     readonly={!!selectedAttribute} />
-<InputText
-    id="default"
-    label="Default value"
-    bind:value={data.default}
-    maxlength={data.size}
-    disabled={data.required || data.array}
-    readonly={!!selectedAttribute} />
+{#if data.size > 64}
+    <InputTextarea
+        id="default"
+        label="Default value"
+        bind:value={data.default}
+        maxlength={data.size}
+        disabled={data.required || data.array}
+        readonly={!!selectedAttribute} />
+{:else}
+    <InputText
+        id="default"
+        label="Default value"
+        bind:value={data.default}
+        maxlength={data.size}
+        disabled={data.required || data.array}
+        readonly={!!selectedAttribute} />
+{/if}
 <InputChoice
     id="required"
     label="Required"