CLASSROOMIO-T-220: Auto-Adjustable Height

CLASSROOMIO-T-220: bgColor Fix

CLASSROOMIO-T-220: AutoGrowTextField Component

CLASSROOMIO-T-220: AutoGrowTextField component

CLASSROOMIO-T-220: Auto-Adjustable Height


Co-authored-by: Tunji Adeyemi <tunji@digdippa.com>


Merge-request: CLASSROOMIO-MR-106
Merged-by: Best Admin <best@digdippa.com>

src/lib/components/Course/components/Lesson/Exercise/EditMode.svelte

@@ -17,11 +17,11 @@
   import CheckmarkFilledIcon from 'carbon-icons-svelte/lib/CheckmarkFilled.svelte';
   import CheckmarkOutlineIcon from 'carbon-icons-svelte/lib/CheckmarkOutline.svelte';
 
-  import TextField from '$lib/components/Form/TextField.svelte';
   import Modal from '$lib/components/Modal/index.svelte';
   import TextArea from '$lib/components/Form/TextArea.svelte';
   import Checkbox from '$lib/components/Form/Checkbox.svelte';
   import RadioItem from '$lib/components/Form/RadioItem.svelte';
+  import AutoGrowTextField from '$lib/components/Form/AutoGrowTextField.svelte';
   import IconButton from '$lib/components/IconButton/index.svelte';
   import ErrorMessage from '$lib/components/ErrorMessage/index.svelte';
   import PrimaryButton from '$lib/components/PrimaryButton/index.svelte';
@@ -153,15 +153,15 @@
           question.is_dirty = true;
         }}
       >
-        <div class="flex justify-between items-center">
+        <div class="flex justify-between">
           <div class="mr-5 w-3/5">
-            <TextField
-              placeholder="Question"
+            <AutoGrowTextField
               bind:value={question.title}
-              isRequired={true}
-              onChange={() => {
+              onInput={(e) => {
+                question.title = e.target?.textContent;
                 question.is_dirty = true;
               }}
+              placeholder="Question"
             />
           </div>
 

src/lib/components/Form/AutoGrowTextField.svelte

@@ -0,0 +1,64 @@
+<script lang="ts">
+  export let label = '';
+  export let value: string | number | null;
+  export let placeholder = '';
+  export let inputClassName = '';
+  export let labelClassName = 'font-light';
+  export let isDisabled = false;
+  export let isRequired = false;
+  export let bgColor = 'bg-gray-100 focus:bg-primary-50 dark:bg-neutral-800 dark:text-white';
+  export let errorMessage = '';
+  export let helperMessage = '';
+  export let onInput = (e) => {};
+  export let onKeyDown = (e) => {};
+  export let onInputChange = (e) => {};
+  export let onChange = () => {}; // This is to know if element is 'dirty'
+
+  let focusClass = '';
+</script>
+
+{#if label}
+  <p class="text-sm dark:text-white text-left m-0 {labelClassName}">
+    {label}
+
+    {#if isRequired}
+      <span class="text-red-700">*</span>
+    {/if}
+  </p>
+{/if}
+<span
+  class="form-input custom-placeholder w-full block overflow-hidden resize min-h-[50px] leading-5 border mt-2 p-3 pt-3.5 outline-none dark:text-black dark:bg-white form-input border-l-0 border-r-0 border-t-0 border-b-2 border-gray-200 focus:border-l-0 focus:border-r-0 rounded-t-md focus:border-t-0 focus:border-b-2 {inputClassName} {focusClass} {isDisabled &&
+    'hover:cursor-not-allowed opacity-50'} dark:text-black p-3 mt-1 block w-full {bgColor} {errorMessage
+    ? 'border-red-600'
+    : ''}"
+  role="textbox"
+  tabindex={0}
+  contenteditable
+  on:input={onInput}
+  on:keydown={onKeyDown}
+  on:change={onInputChange}
+  on:blur={(e) => {
+    if (focusClass.includes('border-primary-600')) {
+      focusClass = focusClass.replace('border-primary-600', '');
+    }
+    onChange(e);
+  }}
+  on:focus={() => (focusClass += ' border-primary-600')}
+  style="--placeholder: '{placeholder}'">{value}</span
+>
+{#if errorMessage}
+  <p class="text-sm text-red-500">{errorMessage}</p>
+{:else if helperMessage}
+  <p class="dark:text-white text-sm">
+    {helperMessage}
+  </p>
+{/if}
+
+<style>
+  .custom-placeholder:empty::before {
+    content: var(--placeholder, 'Default Placeholder');
+  }
+  .form-input {
+    box-shadow: none !important;
+  }
+</style>