Databases

package.json

@@ -18,7 +18,7 @@
         "e2e": "playwright test tests/e2e"
     },
     "dependencies": {
-        "@aw-labs/appwrite-console": "^1.0.0-0",
+        "@aw-labs/appwrite-console": "^5.0.5",
         "@aw-labs/icons": "0.0.0-54",
         "@aw-labs/ui": "0.0.0-54",
         "echarts": "^5.3.3",

src/lib/components/cardGrid.svelte

@@ -7,7 +7,7 @@
         <div class="grid-1-2-col-1 u-flex u-flex-vertical u-gap-16">
             <slot />
         </div>
-        <div class="grid-1-2-col-2 u-flex u-flex-vertical u-gap-32">
+        <div class="grid-1-2-col-2 u-flex u-flex-vertical u-gap-24">
             <slot name="aside" />
         </div>
     </div>

src/lib/components/dropListItem.svelte

@@ -3,7 +3,7 @@
 </script>
 
 <li class="drop-list-item">
-    <button class="drop-button" on:click>
+    <button class="drop-button" on:click|preventDefault>
         <span class="text"><slot /></span>
         {#if icon}
             <span class={`icon-${icon}`} aria-hidden="true" />

src/lib/components/index.ts

@@ -25,3 +25,5 @@ export { default as Box } from './box.svelte';
 export { default as Search } from './search.svelte';
 export { default as GridItem1 } from './gridItem1.svelte';
 export { default as EmptyGridItem } from './emptyGridItem.svelte';
+export { default as Steps } from './steps.svelte';
+export { default as Step } from './step.svelte';

src/lib/components/modal.svelte

@@ -99,11 +99,13 @@
                 {/if}
                 <slot />
             </div>
-            <div class="modal-footer">
-                <div class="u-flex u-main-end u-gap-12">
-                    <slot name="footer" />
+            {#if $$slots.footer}
+                <div class="modal-footer">
+                    <div class="u-flex u-main-end u-gap-12">
+                        <slot name="footer" />
+                    </div>
                 </div>
-            </div>
+            {/if}
         </section>
     </div>
 {/if}

src/lib/components/step.svelte

@@ -0,0 +1,33 @@
+<script lang="ts">
+    export let completed = false;
+    export let current = false;
+    export let currentSub = 0;
+    export let isSub = false;
+    export let step: { text: string; substeps?: { text: string }[] };
+</script>
+
+<li
+    class:steps-item={!isSub}
+    class:steps-sub-item={isSub}
+    class:is-done={completed}
+    class:is-current={current}
+    aria-label={` ${completed ? 'done' : current ? 'current' : ''} step`}>
+    {#if isSub}
+        <span class="text">{step.text}</span>
+    {:else}
+        <div class="step-item-content">
+            <span class="text">{step.text}</span>
+            {#if step?.substeps}
+                <ul class="steps-sub">
+                    {#each step.substeps as subStep, index}
+                        <svelte:self
+                            isSub={true}
+                            step={subStep}
+                            current={currentSub === index}
+                            completed={index < currentSub} />
+                    {/each}
+                </ul>
+            {/if}
+        </div>
+    {/if}
+</li>

src/lib/components/steps.svelte

@@ -0,0 +1,19 @@
+<script lang="ts">
+    import Step from './step.svelte';
+
+    export let steps: { text: string; substeps?: { text: string }[] }[];
+    export let currentStep = 0;
+    export let currentSub = 0;
+</script>
+
+<ol class="steps">
+    {#if steps}
+        {#each steps as step, index}
+            <Step
+                bind:currentSub
+                current={currentStep === index}
+                completed={index < currentStep}
+                {step} />
+        {/each}
+    {/if}
+</ol>

src/lib/elements/forms/inputEmail.svelte

@@ -9,6 +9,7 @@
     export let placeholder = '';
     export let required = false;
     export let disabled = false;
+    export let readonly = false;
     export let autofocus = false;
     export let autocomplete = false;
 
@@ -47,6 +48,7 @@
             {placeholder}
             {disabled}
             {required}
+            {readonly}
             type="email"
             class="input-text"
             autocomplete={autocomplete ? 'on' : 'off'}

src/lib/elements/forms/inputNumber.svelte

@@ -9,9 +9,11 @@
     export let placeholder = '';
     export let required = false;
     export let disabled = false;
+    export let readonly = false;
     export let autofocus = false;
     export let maxlength: number = null;
     export let minlength: number = null;
+    export let step: number | 'any' = 1;
 
     let element: HTMLInputElement;
     let error: string;
@@ -48,6 +50,8 @@
             {required}
             {minlength}
             {maxlength}
+            {readonly}
+            {step}
             type="number"
             class="input-text"
             bind:value

src/lib/elements/forms/inputPhone.svelte

@@ -9,6 +9,7 @@
     export let placeholder = '';
     export let required = false;
     export let disabled = false;
+    export let readonly = false;
     export let autofocus = false;
     export let autocomplete = false;
     export let maxlength: number = null;
@@ -54,9 +55,9 @@
             {required}
             {maxlength}
             {pattern}
+            {readonly}
             type="text"
             autocomplete={autocomplete ? 'on' : 'off'}
-            class="input-text"
             bind:value
             bind:this={element}
             on:invalid={handleInvalid} />

src/lib/elements/forms/inputSelect.svelte

@@ -4,11 +4,12 @@
     export let label: string;
     export let showLabel = true;
     export let id: string;
-    export let value: string;
+    export let value: string | number | boolean;
+    export let placeholder = '';
     export let required = false;
     export let disabled = false;
     export let options: {
-        value: string;
+        value: string | boolean | number;
         label: string;
     }[];
 
@@ -40,6 +41,9 @@
             bind:this={element}
             bind:value
             on:invalid={handleInvalid}>
+            {#if placeholder}
+                <option value={null} disabled selected hidden>{placeholder}</option>
+            {/if}
             {#each options as option}
                 <option value={option.value} selected={option.value === value}>
                     {option.label}

src/lib/elements/forms/inputTags.svelte

@@ -8,6 +8,8 @@
     export let tags: string[] = [];
     export let placeholder = '';
     export let autofocus = false;
+    export let disabled = false;
+    export let readonly = false;
 
     let value = '';
     let element: HTMLInputElement;
@@ -89,6 +91,8 @@
             <input
                 {id}
                 placeholder={!tags.length ? placeholder : ''}
+                {disabled}
+                {readonly}
                 type="text"
                 class="tags-input-text"
                 bind:value

src/lib/elements/forms/inputText.svelte

@@ -9,6 +9,7 @@
     export let placeholder = '';
     export let required = false;
     export let disabled = false;
+    export let readonly = false;
     export let autofocus = false;
     export let autocomplete = false;
     export let maxlength: number = null;
@@ -45,6 +46,7 @@
             {id}
             {placeholder}
             {disabled}
+            {readonly}
             {required}
             {maxlength}
             autocomplete={autocomplete ? 'on' : 'off'}

src/lib/elements/forms/inputTextarea.svelte

@@ -9,6 +9,7 @@
     export let placeholder = '';
     export let required = false;
     export let disabled = false;
+    export let readonly = false;
     export let autofocus = false;
     export let maxlength: number = null;
 
@@ -42,6 +43,7 @@
             {id}
             {placeholder}
             {disabled}
+            {readonly}
             {required}
             {maxlength}
             class="input-text"

src/lib/elements/table/index.ts

@@ -1,4 +1,5 @@
 export { default as Table } from './table.svelte';
+export { default as TableScroll } from './tableScroll.svelte';
 export { default as TableBody } from './body.svelte';
 export { default as TableHeader } from './header.svelte';
 export { default as TableFooter } from './footer.svelte';

src/lib/elements/table/tableScroll.svelte

@@ -0,0 +1,7 @@
+<div class="table-with-scroll u-margin-block-start-32">
+    <div class="table-wrapper">
+        <div class="table is-sticky-scroll" role="table">
+            <slot />
+        </div>
+    </div>
+</div>

src/lib/helpers/array.ts

@@ -0,0 +1,10 @@
+export function intersection(arr1: unknown[], arr2: unknown[]) {
+    const set = new Set(arr2);
+    const intersection = new Set(arr1.filter((elem) => set.has(elem)));
+    return Array.from(intersection);
+}
+export function difference(arr1: unknown[], arr2: unknown[]) {
+    const set = new Set(arr2);
+    const intersection = new Set(arr1.filter((elem) => !set.has(elem)));
+    return Array.from(intersection);
+}