Merge pull request #349 from appwrite/feat/input-count-dynamic-color

Feat: input count dynamic color

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

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;
@@ -58,14 +59,11 @@
             type="text"
             class="input-text"
             bind:value
+            class:u-padding-inline-end-56={typeof maxlength === 'number'}
             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}

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;
@@ -12,6 +13,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 +40,7 @@
 </script>
 
 <FormItem>
-    <Label {required} hide={!showLabel} for={id}>
+    <Label {required} {tooltip} {optionalText} hide={!showLabel} for={id}>
         {label}
     </Label>
 
@@ -53,6 +56,9 @@
             bind:value
             bind:this={element}
             on:invalid={handleInvalid} />
+        {#if maxlength}
+            <TextCounter max={maxlength} count={value?.length ?? 0} />
+        {/if}
     </div>
     {#if error}
         <Helper type="warning">{error}</Helper>

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>

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"

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}