├── .npmrc
├── src
    ├── lib
    │   ├── pages
    │   │   ├── students
    │   │   │   ├── ViewProfile.svelte
    │   │   │   ├── AllStudents.svelte
    │   │   │   └── RegisterStudent.svelte
    │   │   ├── student
    │   │   │   ├── AllStudents.svelte
    │   │   │   ├── RegistrationPage.svelte
    │   │   │   └── RegistrationForm.ts
    │   │   ├── PageTwo.svelte
    │   │   ├── fees
    │   │   │   └── FeesRecords.svelte
    │   │   ├── PageOne.svelte
    │   │   └── FormOne.ts
    │   ├── card
    │   │   └── Card.svelte
    │   ├── app_bar
    │   │   ├── icons.ts
    │   │   └── AppBar.svelte
    │   ├── dtp
    │   │   ├── DateTile.svelte
    │   │   ├── DateArrows.svelte
    │   │   ├── DatePicker.svelte
    │   │   ├── DateColumn.svelte
    │   │   └── DateField.svelte
    │   ├── button
    │   │   └── Button.svelte
    │   ├── tab_tage
    │   │   └── TabPage.svelte
    │   ├── chip_input
    │   │   ├── Chip.svelte
    │   │   ├── ChipInput.svelte
    │   │   └── ChipsInput.svelte
    │   ├── avartar
    │   │   └── Avartar.svelte
    │   ├── toggle_switch
    │   │   └── ToggleSwitch.svelte
    │   ├── radio_button
    │   │   └── RadioButton.svelte
    │   ├── table
    │   │   ├── Table.svelte
    │   │   └── TableRow.svelte
    │   ├── calendar
    │   │   ├── Cell.svelte
    │   │   └── Calendar.svelte
    │   ├── CollapsibleList.svelte
    │   ├── form_builder
    │   │   ├── FormBuilder.svelte
    │   │   └── form_options.ts
    │   ├── forms
    │   │   ├── FeesPayment.ts
    │   │   └── StudentRegistration.ts
    │   ├── side_nav
    │   │   ├── MenuList.svelte
    │   │   ├── MenuHeader.svelte
    │   │   ├── MenuItem.svelte
    │   │   ├── SideNav.svelte
    │   │   └── menu.ts
    │   ├── input_field
    │   │   ├── TypeAheadField.svelte
    │   │   ├── DateFormatter.ts
    │   │   └── TextField.svelte
    │   └── breadcrumb
    │   │   └── Breadcrumb.svelte
    ├── routes
    │   └── index.svelte
    ├── app.d.ts
    └── app.html
├── static
    └── favicon.png
├── .prettierrc
├── .gitignore
├── .timetracker
├── .eslintignore
├── .prettierignore
├── tests
    └── test.ts
├── playwright.config.ts
├── tsconfig.json
├── svelte.config.js
├── .eslintrc.cjs
├── README.md
└── package.json


/.npmrc:
--------------------------------------------------------------------------------
1 | engine-strict=true
2 | 


--------------------------------------------------------------------------------
/src/lib/pages/students/ViewProfile.svelte:
--------------------------------------------------------------------------------
1 | 


--------------------------------------------------------------------------------
/static/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Parables/svelta/HEAD/static/favicon.png


--------------------------------------------------------------------------------
/.prettierrc:
--------------------------------------------------------------------------------
1 | {
2 | 	"useTabs": true,
3 | 	"singleQuote": true,
4 | 	"trailingComma": "none",
5 | 	"printWidth": 100
6 | }
7 | 


--------------------------------------------------------------------------------
/src/routes/index.svelte:
--------------------------------------------------------------------------------
1 | <h1>Welcome to SvelteKit</h1>
2 | <p>Visit <a href="https://kit.svelte.dev">kit.svelte.dev</a> to read the documentation</p>
3 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /build
 4 | /.svelte-kit
 5 | /package
 6 | .env
 7 | .env.*
 8 | !.env.example
 9 | yarn-error.log
10 | /.history
11 | 


--------------------------------------------------------------------------------
/src/lib/card/Card.svelte:
--------------------------------------------------------------------------------
1 | <div class="w-full px-6 py-4 rounded text-cadetblue bg-haiti {classNames}">
2 |   <slot />
3 | </div>
4 | 
5 | <script>
6 | export let classNames = ''
7 | </script>
8 | 


--------------------------------------------------------------------------------
/src/lib/app_bar/icons.ts:
--------------------------------------------------------------------------------
1 | import { icon_name } from "src/assets/svgs";
2 | 
3 | export interface FavIcon{
4 |     name: icon_name
5 |     classNames?: string
6 |     callback?: any
7 | }
8 | 
9 | 


--------------------------------------------------------------------------------
/.timetracker:
--------------------------------------------------------------------------------
1 | {"total":509,"sessions":[{"begin":"2022-05-28T04:19:39+00:00","end":"2022-05-28T04:22:36+00:00","duration":176},{"begin":"2022-05-28T04:37:47+00:00","end":"2022-05-28T04:43:20+00:00","duration":333}]}


--------------------------------------------------------------------------------
/.eslintignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /build
 4 | /.svelte-kit
 5 | /package
 6 | .env
 7 | .env.*
 8 | !.env.example
 9 | 
10 | # Ignore files for PNPM, NPM and YARN
11 | pnpm-lock.yaml
12 | package-lock.json
13 | yarn.lock
14 | 


--------------------------------------------------------------------------------
/.prettierignore:
--------------------------------------------------------------------------------
 1 | .DS_Store
 2 | node_modules
 3 | /build
 4 | /.svelte-kit
 5 | /package
 6 | .env
 7 | .env.*
 8 | !.env.example
 9 | 
10 | # Ignore files for PNPM, NPM and YARN
11 | pnpm-lock.yaml
12 | package-lock.json
13 | yarn.lock
14 | 


--------------------------------------------------------------------------------
/tests/test.ts:
--------------------------------------------------------------------------------
1 | import { expect, test } from '@playwright/test';
2 | 
3 | test('index page has expected h1', async ({ page }) => {
4 | 	await page.goto('/');
5 | 	expect(await page.textContent('h1')).toBe('Welcome to SvelteKit');
6 | });
7 | 


--------------------------------------------------------------------------------
/playwright.config.ts:
--------------------------------------------------------------------------------
 1 | import type { PlaywrightTestConfig } from '@playwright/test';
 2 | 
 3 | const config: PlaywrightTestConfig = {
 4 | 	webServer: {
 5 | 		command: 'npm run build && npm run preview',
 6 | 		port: 3000
 7 | 	}
 8 | };
 9 | 
10 | export default config;
11 | 


--------------------------------------------------------------------------------
/src/lib/pages/students/AllStudents.svelte:
--------------------------------------------------------------------------------
1 | <script>
2 |     import { push } from "svelte-spa-router";
3 |     import TabPage from "../../tab_tage/TabPage.svelte";
4 | </script>
5 | 
6 | <button on:click="{()=>push("/students/id/true")}">Register Student</button>
7 | <TabPage />


--------------------------------------------------------------------------------
/src/app.d.ts:
--------------------------------------------------------------------------------
 1 | /// <reference types="@sveltejs/kit" />
 2 | 
 3 | // See https://kit.svelte.dev/docs/types#app
 4 | // for information about these interfaces
 5 | declare namespace App {
 6 | 	// interface Locals {}
 7 | 	// interface Platform {}
 8 | 	// interface Session {}
 9 | 	// interface Stuff {}
10 | }
11 | 


--------------------------------------------------------------------------------
/src/lib/pages/student/AllStudents.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import Card from './../../card/Card.svelte';
 3 |   import { push } from 'svelte-spa-router';
 4 | </script>
 5 | 
 6 | <Card>
 7 |   <div>
 8 |     <button on:click="{() => push('/students/id/true')}">
 9 |       Register Student
10 |     </button>
11 |   </div>
12 | </Card>
13 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"extends": "./.svelte-kit/tsconfig.json",
 3 | 	"compilerOptions": {
 4 | 		"allowJs": true,
 5 | 		"checkJs": true,
 6 | 		"esModuleInterop": true,
 7 | 		"forceConsistentCasingInFileNames": true,
 8 | 		"resolveJsonModule": true,
 9 | 		"skipLibCheck": true,
10 | 		"sourceMap": true,
11 | 		"strict": true
12 | 	}
13 | }
14 | 


--------------------------------------------------------------------------------
/src/app.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 	<head>
 4 | 		<meta charset="utf-8" />
 5 | 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
 6 | 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 7 | 		%sveltekit.head%
 8 | 	</head>
 9 | 	<body>
10 | 		<div>%sveltekit.body%</div>
11 | 	</body>
12 | </html>
13 | 


--------------------------------------------------------------------------------
/svelte.config.js:
--------------------------------------------------------------------------------
 1 | import adapter from '@sveltejs/adapter-auto';
 2 | import preprocess from 'svelte-preprocess';
 3 | 
 4 | /** @type {import('@sveltejs/kit').Config} */
 5 | const config = {
 6 | 	// Consult https://github.com/sveltejs/svelte-preprocess
 7 | 	// for more information about preprocessors
 8 | 	preprocess: preprocess(),
 9 | 
10 | 	kit: {
11 | 		adapter: adapter()
12 | 	}
13 | };
14 | 
15 | export default config;
16 | 


--------------------------------------------------------------------------------
/src/lib/pages/PageTwo.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | import TextField from "../input_field/TextField.svelte";
 3 | import { countries } from "../../assets/json/country.ts";
 4 | </script>
 5 | 
 6 | <div class="h-screen p-8 my-4 rounded bg-haiti">
 7 | 
 8 |     <p>Welcome to Page 2</p>
 9 |     
10 |     <TextField items={countries} type="typeahead" id="typeahead"/>
11 |     <TextField type="password" id="password"/>
12 |     <TextField type="date" id="date"/>
13 | </div>


--------------------------------------------------------------------------------
/.eslintrc.cjs:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 | 	root: true,
 3 | 	parser: '@typescript-eslint/parser',
 4 | 	extends: ['eslint:recommended', 'plugin:@typescript-eslint/recommended', 'prettier'],
 5 | 	plugins: ['svelte3', '@typescript-eslint'],
 6 | 	ignorePatterns: ['*.cjs'],
 7 | 	overrides: [{ files: ['*.svelte'], processor: 'svelte3/svelte3' }],
 8 | 	settings: {
 9 | 		'svelte3/typescript': () => require('typescript')
10 | 	},
11 | 	parserOptions: {
12 | 		sourceType: 'module',
13 | 		ecmaVersion: 2020
14 | 	},
15 | 	env: {
16 | 		browser: true,
17 | 		es2017: true,
18 | 		node: true
19 | 	}
20 | };
21 | 


--------------------------------------------------------------------------------
/src/lib/dtp/DateTile.svelte:
--------------------------------------------------------------------------------
 1 |  <script>
 2 |      export let value
 3 |      export let visible = true
 4 |      export let callback
 5 |      export let isValueTile = false
 6 |      export let valueTileClass = "text-primary font-semibold text-lg"
 7 |      export let selectTileClass = "hover:text-primary text-base"
 8 |  </script>
 9 | 
10 | 
11 |  <div class="w-16 py-2 " on:click={()=> {if(callback) callback()} }>
12 |      <p class="font-sans  text-center select-none  align-middle   { isValueTile?  valueTileClass : selectTileClass} {visible? '': 'invisible'}">
13 |          {value} </p>
14 |  </div>


--------------------------------------------------------------------------------
/src/lib/pages/students/RegisterStudent.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import FormBuilder from '../../form_builder/FormBuilder.svelte';
 3 |   import Button from '../../button/Button.svelte'
 4 |   import { options } from '../../forms/StudentRegistration.ts';
 5 |   let data;
 6 | </script>
 7 | 
 8 | <div class="w-full px-6 py-4 rounded text-cadetblue bg-haiti ">
 9 |   <FormBuilder {options} bind:data />
10 |   <div class="flex items-end content-end py-8">
11 |     <Button on:click="{()=>{}}" variant="negative">Cancel</Button>
12 |     <Button on:click="{()=>{}}">Save</Button>
13 |   </div>
14 | </div>
15 | 


--------------------------------------------------------------------------------
/src/lib/button/Button.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   export let classNames = '';
 3 |   export let variant = 'outlined'; //"negative"|"material"|"raised"|"default"
 4 |   let variantStyle =
 5 |     variant === 'outlined'
 6 |       ? '  border-primary hover:text-primary hover:bg-comet active:bg-primary active:text-cadetblue'
 7 |       : '  border-transparent hover:bg-comet hover:border-comet active:bg-comet active:text-primary';
 8 | </script>
 9 | 
10 | <button on:click class="py-2 px-6 mr-4 select-none bg-transparent border-2 text-cadetblue rounded-md focus:outline-none {variantStyle} {classNames}">
11 |   <slot />
12 | </button>
13 | 


--------------------------------------------------------------------------------
/src/lib/pages/fees/FeesRecords.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import Card from '../../card/Card.svelte';
 3 |   import FormBuilder from '../../form_builder/FormBuilder.svelte';
 4 |   import { options } from '../../forms/FeesPayment.ts';
 5 |   import Button from '../../button/Button.svelte';
 6 | import Table from '../../table/Table.svelte';
 7 |   let studentProfile = {};
 8 |   let data;
 9 | </script>
10 | 
11 | 
12 | 
13 | <Card>
14 |   <p class="py-2 text-sm font-semibold text-cadetblue ">New Payment</p>
15 |   <FormBuilder {options} bind:data />
16 |   <Button>Save</Button>
17 | </Card>
18 | 
19 | <Card classNames="my-4">
20 |     <p class="py-2 text-sm font-semibold uppercase text-cadetblue ">Recent Payments</p>
21 |     <Table {data}/>
22 | </Card>
23 | 


--------------------------------------------------------------------------------
/src/lib/tab_tage/TabPage.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import { fly, fade } from 'svelte/transition';
 3 |   export let tabs = [
 4 |     'Profile',
 5 |     'Fee Payments',
 6 |     'Books Given',
 7 |     'Academic Results',
 8 |   ];
 9 |   let active = 0
10 | </script>
11 | 
12 | <div class="block overflow-x-auto">
13 |   <div class="inline-flex">
14 |     {#each tabs as t, i}
15 |       <div class="px-4 py-2 text-sm border-b-2  transition-all duration-300 ease-linear {active===i?'border-primary':' border-transparent'} text-cadetblue" 
16 |       on:click="{()=>active=i}"
17 |       >
18 |         {t}
19 |       </div>  
20 |      
21 |     {/each}
22 |   </div>
23 |  <div transition:fade>
24 |     <slot>YOur content goes here</slot>
25 |   </div>
26 | </div>
27 | 


--------------------------------------------------------------------------------
/src/lib/chip_input/Chip.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import { SVG } from '../../assets/svgs.ts';
 3 |   import Avartar from '../avartar/Avartar.svelte';
 4 |   export let id;
 5 |   export let classNames = '';
 6 |   export let dismissable = true;
 7 | </script>
 8 | 
 9 | <div
10 |   on:click
11 |   {id}
12 |   class="inline-flex justify-evenly items-center rounded cursor-pointer text-cadetblue bg-haiti
13 |   text-sm truncate select-none {classNames}"
14 | >
15 |   <slot name="start">
16 |     <!-- <Avartar size='w-6 h-6' iconClass='w-10 h-10' /> -->
17 |   </slot>
18 | 
19 |   <span {id} class="pl-2">
20 |     <slot />
21 |   </span>
22 | 
23 |   {#if dismissable}
24 |     <slot name="end">
25 |       <span class="p-0 m-0">
26 |         {@html SVG('close', 'w-4 h-4')}
27 |       </span>
28 |     </slot>
29 |   {/if}
30 | </div>
31 | 


--------------------------------------------------------------------------------
/src/lib/pages/student/RegistrationPage.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import Card from './../../card/Card.svelte';
 3 |   import FormBuilder from './../../form_builder/FormBuilder.svelte';
 4 |   import { options } from './RegistrationForm.ts';
 5 |   let data = {};
 6 | </script>
 7 | 
 8 | <Card>
 9 |   <FormBuilder {options} bind:data />
10 |   <div class="align-middle content-end items-end py-4 ">
11 |     <button
12 |       class="btn focus:outline-none bg-primary py-2 px-4 ml-4 text-cadetblue
13 |       text-sm font-normal rounded-md border-none"
14 |     >
15 |       Submit
16 |     </button>
17 |     <button
18 |       class="btn focus:outline-none bg-transparent py-2 px-4 ml-4 text-cadetblue
19 |       text-sm font-normal hover:bg-comet rounded-md border-none"
20 |     >
21 |       Cancel
22 |     </button>
23 |   </div>
24 | </Card>
25 | 


--------------------------------------------------------------------------------
/src/lib/avartar/Avartar.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import { SVG } from '../../assets/svgs.ts';
 3 | 
 4 |   export let classNames = 'bg-comet mr-1';
 5 |   export let size = 'h-10 w-10';
 6 |   export let image = '';
 7 |   export let imageClass=''
 8 |   export let text = '';
 9 |   export let textClass='mx-auto uppercase'
10 |   export let icon = 'staff';
11 |   export let iconClass='w-5 h-5 '
12 | </script>
13 | 
14 | <div
15 |   class="inline-flex items-center justify-around
16 |   border-0  rounded-full select-none bg-transparent font-semibold
17 |   text-cadetblue {classNames}
18 |   {size}"
19 | >
20 |   <slot>
21 |     {#if image !== ''}
22 |       <img src="" alt="boy" class="{imageClass}" />
23 |     {:else if text !== ''}
24 |     <span class="{textClass}">
25 |         {text}
26 |     </span>
27 |     {:else}
28 |         {@html SVG(icon, iconClass)}
29 |     {/if}
30 |   </slot>
31 | </div>
32 | 


--------------------------------------------------------------------------------
/src/lib/toggle_switch/ToggleSwitch.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import { createEventDispatcher } from 'svelte';
 3 |   let dispatch = createEventDispatcher();
 4 |   export let value = false;
 5 |   export let variant = 'inner'; //'outer'
 6 |   export let withText = true;
 7 | </script>
 8 | 
 9 | <div
10 |   class=" inline-flex items-center rounded-full w-12
11 |   {variant === 'inner' ? 'h-5' : 'h-3'}
12 |   {value ? 'bg-success' : 'bg-comet'}"
13 |   on:click
14 |   on:click="{() => {
15 |     value = !value;
16 |     dispatch('toggle', value);
17 |   }}"
18 | >
19 |   {#if withText}
20 |   <span class="px-1 text-xs leading-normal lowercase align-text-top select-none text-cararra">on</span>
21 |   <span class="px-1 text-xs leading-normal lowercase align-text-top select-none text-cararra">off</span>
22 |   {/if}
23 |   <span
24 |     class="absolute w-5 h-5 border rounded-full {value ? 'border-success' : 'border-comet'}
25 |     bg-cararra transform transition-all duration-300 ease-linear {value ? 'translate-x-7' : 'translate-x-0'}"
26 |   ></span>
27 | </div>
28 | 


--------------------------------------------------------------------------------
/src/lib/dtp/DateArrows.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 | export	let direction
 3 | export let callback
 4 | </script>
 5 | 
 6 | <div class="w-16 px-5 py-2" on:click={() => {if(callback) callback() } }>
 7 | {#if direction === "up"}
 8 | <svg  class="w-6 h-6 fill-current hover:text-primary" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 256"><path d="M128 48.907l-128 128 30.187 30.186L128 109.28l97.813 97.813L256 176.907z"/></svg>
 9 | {:else}
10 | <svg class="w-6 h-6 fill-current hover:text-primary" xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 284.929 284.929"><path d="M282.082 89.644L149.028 222.689c-1.901 1.903-4.088 2.856-6.562 2.856s-4.665-.953-6.567-2.856L2.856 89.644C.95 87.738 0 85.551 0 83.076c0-2.474.953-4.664 2.856-6.566l14.272-14.271c1.903-1.903 4.093-2.854 6.567-2.854s4.664.951 6.567 2.854l112.204 112.202L254.674 62.232c1.902-1.903 4.093-2.848 6.563-2.848 2.478 0 4.668.951 6.57 2.848l14.274 14.277c1.902 1.902 2.847 4.093 2.847 6.566.001 2.476-.944 4.666-2.846 6.569z" data-original="#000000" class="prefix__active-path"/></svg>
11 | {/if}
12 | </div>


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # create-svelte
 2 | 
 3 | Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).
 4 | 
 5 | ## Creating a project
 6 | 
 7 | If you're seeing this, you've probably already done this step. Congrats!
 8 | 
 9 | ```bash
10 | # create a new project in the current directory
11 | npm init svelte
12 | 
13 | # create a new project in my-app
14 | npm init svelte my-app
15 | ```
16 | 
17 | ## Developing
18 | 
19 | Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:
20 | 
21 | ```bash
22 | npm run dev
23 | 
24 | # or start the server and open the app in a new browser tab
25 | npm run dev -- --open
26 | ```
27 | 
28 | ## Building
29 | 
30 | To create a production version of your app:
31 | 
32 | ```bash
33 | npm run build
34 | ```
35 | 
36 | You can preview the production build with `npm run preview`.
37 | 
38 | > To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
39 | 


--------------------------------------------------------------------------------
/src/lib/radio_button/RadioButton.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="typescript">
 2 |   import { Items } from '../form_builder/form_options';
 3 |   export let checkedColor = 'primary';
 4 |   export let items: Items[] = [
 5 |     { id: '0', value: 'ItemOne' },
 6 |     { id: '1', value: 'ItemTwo' },
 7 |     { id: '3', value: 'ItemThree' }
 8 |   ];
 9 |   let selected = 0;
10 |   export let value = items[selected];
11 | </script>
12 | 
13 | <div class="inline-flex items-center ">
14 |   {#each items as item, i}
15 |     <div
16 |       class="inline-flex mr-4 "
17 |       on:click
18 |       on:click="{() => {
19 |         if (selected !== i) {
20 |           selected = i;
21 |           value = items[selected];
22 |         }
23 |       }}"
24 |     >
25 |       <div
26 |         class="inline-flex w-5 h-5 border-2 transition-all duration-300
27 |         ease-linear rounded-full {selected === i ? `bg-${checkedColor} border-${checkedColor}` : ' bg-transparent border-cadetblue'}"
28 |       ></div>
29 |       <span class="ml-2 select-none">
30 |         {item.label ? item.label : item.value}
31 |       </span>
32 |     </div>
33 |   {/each}
34 | </div>
35 | 


--------------------------------------------------------------------------------
/src/lib/table/Table.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import TableRow from './TableRow.svelte';
 3 |   export let data = [];
 4 |   let th_class = `px-6 py-3 text-xs font-medium leading-4 tracking-wider 
 5 |   text-left text-gray-500 uppercase border-b border-comet bg-gray-50`;
 6 | </script>
 7 | 
 8 | <div class="flex flex-col">
 9 |   <div class="py-2 -my-2 overflow-x-auto sm:-mx-6 sm:px-6 lg:-mx-8 lg:px-8">
10 |     <div
11 |       class="inline-block min-w-full overflow-hidden align-middle border-b shadow border-comet sm:rounded-lg"
12 |     >
13 |       <table class="w-full divide-y table-auto divide-comet">
14 |         <thead>
15 |           <tr>
16 |             <th class="{th_class}">Name</th>
17 |             <th class="{th_class}">Payment Date</th>
18 |             <th class="{th_class}">Amount</th>
19 |             <th class="{th_class}" >Status</th>
20 |           </tr>
21 |         </thead>
22 |         <tbody class="divide-y divide-comet">
23 |           {#each Array(10) as d, i}
24 |             <TableRow item="{d}" {i}/>
25 |           {:else}
26 |             <p>No data available</p>
27 |           {/each}
28 | 
29 |         </tbody>
30 |       </table>
31 |    </div>
32 |   </div>
33 | </div>
34 | 


--------------------------------------------------------------------------------
/src/lib/calendar/Cell.svelte:
--------------------------------------------------------------------------------
 1 | <style>
 2 |   .cell {
 3 |     display: inline-block;
 4 |     text-align: center;
 5 |     vertical-align: middle;
 6 |   }
 7 | 
 8 |  
 9 | </style>
10 | 
11 | <script>
12 | import { createEventDispatcher } from "svelte";
13 | let dispatch=createEventDispatcher()
14 |   export let disable = false;
15 |   export let date =null
16 |   export let text=null
17 |   export let display = "months"
18 |   export let index = 0
19 | 
20 | 
21 | let isSelected = false
22 | 
23 | 
24 | function handleMousedown(e){
25 |   isSelected=!isSelected
26 |  if(display==='days') dispatch('dateselected', {date, isSelected})
27 |  if(display==='months') dispatch('monthSelected', {index})
28 | }
29 | 
30 | 
31 | </script>
32 | 
33 | <div id="cell{index}"
34 | style="{display==='months'? 'width: 70px; height: 70px; line-height: 70px; ': 'width: 40px; height: 40px; line-height: 40px;'}"
35 |   class="cell {disable ? 
36 |     'text-cadetblue bg-transparent hover:bg-transparent pointer-events-none cursor-not-allowed' : 
37 |     'cursor-pointer  rounded-full hover:bg-cadetblue border border-transparent '} {isSelected? 'bg-haiti hover:bg-haiti':''}"
38 |     on:mousedown="{handleMousedown}"
39 |  >
40 |   {text}
41 | </div>
42 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 | 	"name": "svelta",
 3 | 	"version": "0.0.1",
 4 | 	"scripts": {
 5 | 		"dev": "svelte-kit dev",
 6 | 		"build": "svelte-kit build",
 7 | 		"package": "svelte-kit package",
 8 | 		"preview": "svelte-kit preview",
 9 | 		"prepare": "svelte-kit sync",
10 | 		"test": "playwright test",
11 | 		"check": "svelte-check --tsconfig ./tsconfig.json",
12 | 		"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
13 | 		"lint": "prettier --check --plugin-search-dir=. . && eslint .",
14 | 		"format": "prettier --write --plugin-search-dir=. ."
15 | 	},
16 | 	"devDependencies": {
17 | 		"@playwright/test": "^1.21.0",
18 | 		"@sveltejs/adapter-auto": "next",
19 | 		"@sveltejs/kit": "next",
20 | 		"@typescript-eslint/eslint-plugin": "^5.10.1",
21 | 		"@typescript-eslint/parser": "^5.10.1",
22 | 		"cz-conventional-changelog": "3.3.0",
23 | 		"eslint": "^8.12.0",
24 | 		"eslint-config-prettier": "^8.3.0",
25 | 		"eslint-plugin-svelte3": "^4.0.0",
26 | 		"prettier": "^2.5.1",
27 | 		"prettier-plugin-svelte": "^2.5.0",
28 | 		"svelte": "^3.49.0",
29 | 		"svelte-check": "^2.2.6",
30 | 		"svelte-preprocess": "^4.10.1",
31 | 		"tslib": "^2.3.1",
32 | 		"typescript": "~4.6.2"
33 | 	},
34 | 	"type": "module",
35 | 	"config": {
36 | 		"commitizen": {
37 | 			"path": "./node_modules/cz-conventional-changelog"
38 | 		}
39 | 	}
40 | }
41 | 


--------------------------------------------------------------------------------
/src/lib/pages/PageOne.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="typescript">
 2 |   import { createEventDispatcher } from 'svelte';
 3 |   let dispatch = createEventDispatcher();
 4 |   import { APPBAR_POSITION } from '../../main_store';
 5 |   import FormBuilder from '../form_builder/FormBuilder.svelte';
 6 |   import { options } from './FormOne';
 7 | import TextField from '../input_field/TextField.svelte';
 8 |   let position;
 9 |   $: {
10 |     APPBAR_POSITION.set(position);
11 |   }
12 |   let data;
13 |   $: {
14 |     console.log('form data', data);
15 |   }
16 | 
17 |  
18 | </script>
19 | 
20 | <slot>
21 |   <!-- Some content start -->
22 |   <div class="w-full px-6 py-4 rounded text-cadetblue bg-haiti ">
23 |     <FormBuilder {options} bind:data />
24 |   </div>
25 |   <!-- Some content end -->
26 |   <div class="w-full h-screen my-2 mb-20 text-black bg-white rounded-md">
27 |     I'm a big useles card just taking up space
28 |     <input type="radio" value="static" bind:group="{position}" id="static" />
29 |     <label for="static">static</label>
30 |     <input type="radio" value="sticky" bind:group="{position}" id="sticky" />
31 |     <label for="sticky">sticky</label>
32 |     <input type="radio" value="float" bind:group="{position}" id="float" />
33 |     <label for="float">float</label>
34 |     <div class="m-10">      
35 |     </div>
36 |   </div>
37 | </slot>
38 | 


--------------------------------------------------------------------------------
/src/lib/CollapsibleList.svelte:
--------------------------------------------------------------------------------
 1 |  <script>
 2 | 	  import ChipsInput from './ChipsInput.svelte';
 3 | 
 4 |  
 5 |   export let label = "Your Label"
 6 |   let expand = false;
 7 | </script>
 8 | 			
 9 | <style>	
10 | </style> 
11 | 
12 |  <div class="px-4 py-4 my-2 rounded-md border border-gray-400 { expand ?  'bg-white shadow-lg border-none': 'hover:bg-gray-100 ' } ">
13 |       <div class="flex justify-between text-gray-600" on:click="{() => expand = !expand }">
14 |         <p class="inline-flex py-2 pr-8 font-sans text-lg font-medium">{label}</p>
15 |         <svg
16 |           class="w-5 h-5 mt-1 fill-current"
17 |           height="512pt"
18 |           viewBox="0 0 512 512"
19 |           width="512pt"
20 |           xmlns="http://www.w3.org/2000/svg"
21 |         >
22 |           <path
23 |             d="M256 512c-68.379 0-132.668-26.629-181.02-74.98C26.63 388.668 0
24 |             324.379 0 256S26.629 123.332 74.98 74.98C123.332 26.63 187.621 0 256
25 |             0s132.668 26.629 181.02 74.98C485.37 123.332 512 187.621 512
26 |             256s-26.629 132.668-74.98 181.02C388.668 485.37 324.379 512 256
27 |             512zm0-472C136.898 40 40 136.898 40 256s96.898 216 216 216
28 |             216-96.898 216-216S375.102 40 256 40zm138.285 182L366 193.715l-110
29 |             110-110-110L117.715 222 256 360.285zm0 0"
30 |           ></path>
31 |         </svg>
32 |       </div>
33 | 
34 |       {#if expand }
35 |         <div>
36 |       <slot />
37 |         </div>
38 |       {/if}
39 |     </div>


--------------------------------------------------------------------------------
/src/lib/table/TableRow.svelte:
--------------------------------------------------------------------------------
 1 | <tr>
 2 |     <td class="px-6 py-4 whitespace-no-wrap border-b border-comet">
 3 |       <div class="flex items-center">
 4 |         <div class="flex-shrink-0 w-10 h-10">
 5 |           <img class="w-10 h-10 rounded-full" src="https://images.unsplash.com/photo-1494790108377-be9c29b29330?ixlib=rb-1.2.1&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;auto=format&amp;fit=facearea&amp;facepad=4&amp;w=256&amp;h=256&amp;q=60" alt="">
 6 |         </div>
 7 |         <div class="ml-4">
 8 |           <div class="text-sm font-medium leading-5 text-gray-500">
 9 |             Jane Cooper Emmanuel BOtchey
10 |           </div>
11 |           <div class="text-sm leading-5 text-gray-600">
12 |             4180360124
13 |           </div>
14 |         </div>
15 |       </div>
16 |     </td>
17 |  
18 |     <td class="px-6 py-4 text-sm leading-5 text-gray-500 whitespace-no-wrap border-b border-comet">
19 |         12/06/2020
20 |       </td>
21 |     <td class="px-6 py-4 text-sm leading-5 text-gray-500 whitespace-no-wrap border-b border-comet">
22 |       GHc 1000.00
23 |     </td>
24 |     <td class="px-6 py-4 whitespace-no-wrap border-b border-comet">
25 |       <span class="inline-flex px-2 text-xs font-semibold leading-5 uppercase {i%4 ===0?'text-red-800 bg-red-100':'text-green-800 bg-green-100'} rounded-full">
26 |       {i%4 === 0? 'Part' : 'Paid' } 
27 |       </span>
28 |     </td>
29 |    
30 |   </tr>
31 | 
32 | 
33 |   <script>
34 |       export let item = {}
35 |       export let i
36 |   </script>


--------------------------------------------------------------------------------
/src/lib/form_builder/FormBuilder.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="typescript">
 2 |   import { FormOption } from './form_options';
 3 |   import TextField from '../input_field/TextField.svelte';
 4 |   import AppBar from '../app_bar/AppBar.svelte';
 5 |   export let options: FormOption;
 6 | export let data = {}
 7 | </script>
 8 | 
 9 | <div class="w-full form">
10 |   {#each options.sections as s}
11 |     <div class="section {s.class}">
12 |       <slot name="section-title">
13 |         {#if s.title}
14 |           <div class="pt-4 pb-3 text-sm font-normal text-cadetblue">
15 |             <slot>{s.title}</slot>
16 |           </div>
17 |         {/if}
18 |       </slot>
19 |       {#each s.rows as r}
20 |         <div class="row inline-flex flex-wrap justify-between w-full {r.class}">
21 |           {#each r.fields as f}
22 |             <!-- "radio" | "checkbox" | "chip" | "chipinput" | "select" | "range" -->
23 |             {#if f.type === 'radio' || f.type === 'checkbox' || f.type === 'chip'}
24 |               <p>single and multi select items</p>
25 |             {:else if f.type === 'chipinput' || f.type === 'select' || f.type === "typeahead"}
26 |               <p>combo box dropdown field goes here</p>
27 |             {:else if f.type === 'range'}
28 |               <p>Slider range picker goes here</p>
29 |             {:else}
30 |               <TextField {...f} bind:value="{ data[f.name]}" />
31 |             {/if}
32 |           {/each}
33 |         </div>
34 |       {/each}
35 |     </div>
36 |   {/each}
37 | </div>
38 | 


--------------------------------------------------------------------------------
/src/lib/form_builder/form_options.ts:
--------------------------------------------------------------------------------
 1 | import { number } from "yup"
 2 | 
 3 | export type FieldType = "text" | "email" | "password" | "tel" | "date" | "number" |
 4 | "typeahead" | "radio" | "checkbox" | "chip" | "chipinput" | "select" | "range"
 5 | 
 6 | export interface Field {
 7 |     id: string
 8 |     name: string
 9 |     label: string
10 |     type?: FieldType
11 |     placeholder?: string
12 |     colors?: any 
13 |     width?: string
14 |     height?: string
15 |     margin?: string
16 |     min?: number
17 |     max?: number
18 |     step?: number
19 |     items?: Items[] | []
20 |     passwordChar?: string
21 |     multiSelect?: boolean
22 |     readonly?: boolean
23 |     variant?: "outlined" | "material" | "default"
24 |     mask?: Mask
25 |     validate?: string[]
26 |     startIcon?: boolean
27 |     endIcon?: boolean
28 |     validators?: any[]
29 |    
30 | }
31 | 
32 | 
33 | interface Items {
34 |     id: string
35 |     value: string
36 |     label?: string
37 | }
38 | 
39 | export interface Row{
40 |     class?: string
41 |     fields: Field[]
42 | }
43 | export interface Section {
44 |     title?: string
45 |     class?: string
46 |     rows?: Row[]
47 | }
48 | 
49 | export interface Mask{
50 |     prefix?: string
51 |     mask?: "phone"|"email"|"money"|"date"
52 |     delimiters:[] //['.', '.', '-'],
53 |     blocks: [] //[3, 3, 3, 2],
54 |     pattern: string
55 |     placeholder?: string
56 |     suffix?: string
57 | }
58 | 
59 | export interface FormOption {
60 |     id: string
61 |     sections: Section[]
62 |     class?: string
63 |     store?: any
64 |     validateSchema?: any
65 | }
66 | 


--------------------------------------------------------------------------------
/src/lib/forms/FeesPayment.ts:
--------------------------------------------------------------------------------
 1 | import {
 2 | 	Section,
 3 | 	FormOption,
 4 | } from "../form_builder/form_options";
 5 | 
 6 | let sections: Section[] = [
 7 | 
 8 | 	{
 9 | 		// class: 'inline-block w-40p',
10 | 		rows: [
11 | 			{
12 | 				fields: [
13 | 						{
14 | 						id: 'date',
15 | 						name: 'date',
16 | 						type: "date",
17 | 						label: 'Payment Date',
18 | 						width: 'w-full md:w-25p',
19 | 					},
20 | 				{
21 | 						id: 'type',
22 | 						name: 'type',
23 | 						type: "text",
24 | 						label: 'Fee Type',
25 | 						width: 'w-full md:w-25p',
26 | 						items: [{ id: 'school fees', value: 'School Fees' }]
27 | 					}, 
28 | 					{
29 | 						id: 'bank',
30 | 						name: 'bank',
31 | 						type: "text",
32 | 						label: 'Bank',
33 | 						width: 'w-full md:w-25p',
34 | 					},
35 | 					{
36 | 						id: 'branch',
37 | 						name: 'branch',
38 | 						type: "text",
39 | 						label: 'Brach',
40 | 						width: 'w-full md:w-20p',
41 | 					},
42 | 				]
43 | 			},
44 | 			{
45 | 				fields: [
46 | 					{
47 | 						id: 'transactionID',
48 | 						name: 'transactionID',
49 | 						type: "number",
50 | 						label: 'Transaction ID',
51 | 						width: 'w-full md:w-35p',
52 | 					},
53 | 					{
54 | 						id: 'studentID',
55 | 						name: 'studentID',
56 | 						label: 'Student ID',
57 | 						width: 'w-full md:w-40p',
58 | 					},
59 | 					{
60 | 						id: 'amount',
61 | 						name: 'amount',
62 | 						label: 'Amount',
63 | 						width: 'w-45p md:w-20p',
64 | 						type: "number",
65 | 						step: 1
66 | 					},
67 | 				]
68 | 			},
69 | 		]
70 | 	}
71 | 
72 | ]
73 | 
74 | let formOptions: FormOption = {
75 | 	id: 'FeesPayment',
76 | 	sections: sections, 
77 | };
78 | 
79 | export const options = formOptions


--------------------------------------------------------------------------------
/src/lib/side_nav/MenuList.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import { Menu } from './menu.ts';
 3 |   import { SVG } from '../../assets/svgs.ts';
 4 |   import { MENU_WIDTH, ACTIVE_PATH } from '../../main_store.ts';
 5 |   import MenuItem from './MenuItem.svelte';  
 6 | </script>
 7 | 
 8 | <div class="block overflow-y-auto select-none menu-body text-cadetblue ">
 9 |   <!-- Menu Group Headers -->
10 |   {#each Menu as g, h}
11 |     <div class="block select-none menu-group ">
12 |       {#if $MENU_WIDTH === '70'}
13 |         <span
14 |           class="block mt-8 mb-3 ml-6 text-xs font-medium leading-5 tracking-tight uppercase select-none group-name "
15 |         >
16 |           {g.group}
17 |         </span>
18 |       {/if}
19 |       {#each g.routes as r, i}
20 |         <MenuItem
21 |           type="parent"
22 |           route="{r}" path="{r.path}"
23 |         >
24 |           {#if $MENU_WIDTH === '70' && r.subRoutes}
25 |             {#each r.subRoutes as s, j}
26 |               <MenuItem
27 |                 type="child"
28 |                 route="{s}" path="{`${r.path}${s.path}`}"
29 |               />
30 |             {/each}
31 |           {/if}
32 |         </MenuItem>
33 |       {/each}
34 |     </div>
35 |   {/each}
36 | </div>
37 | 
38 | {#if $MENU_WIDTH === '70'}
39 |   <div
40 |     class="flex flex-col items-center content-center pt-4 pb-8 mx-auto text-xs text-center menu-footer text-cadetblue"
41 |   >
42 |     <div>
43 |       Made with
44 |       {@html SVG('heart', 'w-4 h-4 inline-flex')}
45 |       by
46 |     </div>
47 |     <div>
48 |       <a href="https://github.com/Parables" class="mx-2 no-underline ">
49 |         Parables Boltnoel &copy; {new Date().getFullYear()}
50 |       </a>
51 |     </div>
52 |   </div>
53 | {/if}
54 | 


--------------------------------------------------------------------------------
/src/lib/dtp/DatePicker.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import DateColumn from './DateColumn.svelte';
 3 |   import moment from 'moment';
 4 |   import {
 5 |     createEventDispatcher
 6 |   } from 'svelte';
 7 |   const dispatch = createEventDispatcher();
 8 |   let dv = Number.parseInt(moment().format('DD'));
 9 |   let mv = Number.parseInt(moment().format('MM'));
10 |   let yv = Number.parseInt(moment().format('YYYY'));
11 |   let max = Number.parseInt(moment().daysInMonth());
12 | 
13 |   let hovering = false;
14 |   export let selectedDate = `${dv}-${mv}-${yv}`;
15 |   export let formattedDate = moment(selectedDate, 'DD-MM-YYYY').format(
16 |     'dddd, MMMM Do YYYY'
17 |   );
18 |   export let dateFormat = 'dddd, MMMM Do YYYY';
19 | 
20 |   $: {
21 |     max = Number.parseInt(moment(mv, 'M').daysInMonth());
22 |     selectedDate = `${dv}-${mv}-${yv}`;
23 |     formattedDate = moment(selectedDate, 'DD-MM-YYYY').format(dateFormat);
24 |     dispatch('date-selected', {
25 |       date: formattedDate
26 |     });
27 |   }
28 | </script>
29 | 
30 | <div class="inline-block pb-2 bg-white shadow-lg w-58 z-2500"
31 |   on:mouseover="{() => dispatch('hovering', { hovering: true })}"
32 |   on:mouseleave="{() => dispatch('mouse-leave', { leave: true })}">
33 |   <div class="p-4 text-white shadow-md bg-primary">
34 |     <p class="font-sans text-sm font-medium select-none ">{yv}</p>
35 |     <p class="font-sans text-lg font-semibold select-none ">
36 |       {moment(selectedDate, 'DD-MM-YYYY').format('ddd, MMMM Do')}
37 |     </p>
38 |   </div>
39 |   <div class="inline-flex pl-5">
40 |     <DateColumn type="DD" {max} month="{mv}" on:value-changed="{event => (dv = event.detail.value)}" />
41 |     <DateColumn type="MM" on:value-changed="{event => (mv = event.detail.value)}" />
42 |     <DateColumn type="YYYY" on:value-changed="{event => (yv = event.detail.value)}" />
43 |   </div>
44 | 
45 | </div>


--------------------------------------------------------------------------------
/src/lib/side_nav/MenuHeader.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import { SVG } from '../../assets/svgs.ts';
 3 |   import { logo } from '../../assets/logo.ts';
 4 |   import {
 5 |     APP_WIDTH,
 6 |     TOGGLE_ICON,
 7 |     MENU_WIDTH,
 8 |     MARGIN_LEFT,
 9 |     MINI_MENU
10 |   } from '../../main_store.ts';
11 |   import { createEventDispatcher } from 'svelte';
12 |   let dispatch = createEventDispatcher();
13 |   export let open = false;
14 |   $: {
15 |     if ($APP_WIDTH >= 1024)
16 |       if ($MINI_MENU) TOGGLE_ICON.set('circle');
17 |       else TOGGLE_ICON.set('disc');
18 |     else TOGGLE_ICON.set('close');
19 |   }
20 | </script>
21 | 
22 | <slot>
23 |   <div
24 |     class="flex items-center justify-between pt-3 pb-1 cursor-pointer select-none menu-header"
25 |     on:click="{() => {}}"
26 |   >
27 |     <slot name="logo">
28 |       <span class="logo">
29 |         {@html logo}
30 |       </span>
31 |     </slot>
32 |     {#if $MENU_WIDTH === '70'}
33 |       <span
34 |         class="px-2 text-lg font-semibold select-none logo-name font-mons text-cararra"
35 |       >
36 |         <slot name="logo-name">Idel-Sekondi</slot>
37 |       </span>
38 |       <slot name="menu-toggle ">
39 |         <span
40 |           class="mr-3 cursor-pointer select-none menu-toggle"
41 |           on:click="{() => {
42 |             if ($APP_WIDTH >= 1024) {
43 |               if ($MARGIN_LEFT === '70') {
44 |                 MARGIN_LEFT.set('20');
45 |                 MINI_MENU.set(true);
46 |               } else {
47 |                 MARGIN_LEFT.set('70');
48 |                 MINI_MENU.set(false);
49 |               }
50 |             } else {
51 |               MENU_WIDTH.set('70');
52 |               MARGIN_LEFT.set('20');
53 |               MINI_MENU.set(false);
54 |               open = false;
55 |               dispatch('toggle', false);
56 |             }
57 |           }}"
58 |         >
59 |           {@html SVG($TOGGLE_ICON, 'stroke-current hover:text-primary text-cararra w-5 h-5')}
60 |         </span>
61 |       </slot>
62 |     {/if}
63 |   </div>
64 | </slot>
65 | 


--------------------------------------------------------------------------------
/src/lib/dtp/DateColumn.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |     import DateArrows from './DateArrows.svelte'
 3 |     import DateTile from './DateTile.svelte'
 4 |     import moment from 'moment'
 5 |     import {
 6 |         createEventDispatcher
 7 |     } from 'svelte';
 8 |     const dispatch = createEventDispatcher();
 9 | 
10 |     export let type = "DD"
11 |     export let max
12 |     export const month = type === "DD" ? Number.parseInt(moment().format("MM")) : null
13 | 
14 |     let visible = true
15 | 
16 |     let value = Number.parseInt(moment().format(type))
17 |     let prev = value - 1
18 |     let next = value + 1
19 |     let min = 1
20 |     let colType
21 | 
22 | 
23 |     if (type === "DD" && month !== null) {
24 |         max = Number.parseInt(moment(month, "M").daysInMonth());
25 |         colType = "Day"
26 |     } else if (type === "MM") {
27 |         max = 12;
28 |         colType = "Month"
29 |     } else if (type === "YYYY") {
30 |         max = value + 200
31 |         min = value - 200
32 |         colType = "Year"
33 |     } else if (type === "HH") {
34 |         max = 12;
35 |         colType = "Hour"
36 |     } else if (type === "mm") {
37 |         max = 60;
38 |         colType = "Minute"
39 |     }
40 | 
41 | 
42 | 
43 |     $: {
44 |         if (type === "DD") visible = next <= max
45 |         else if (type === "MM") visible = next <= 12
46 |     }
47 | 
48 |     $: {
49 |         if (value > max) decreaseValue()
50 |     }
51 | 
52 |     function increaseValue() {
53 |         if (value < max) {
54 |             value++
55 |             prev = value - 1
56 |             next = value + 1
57 |         }
58 |     }
59 | 
60 |     function decreaseValue() {
61 |         if (value > min) {
62 |             value--
63 |             prev = value - 1
64 |             next = value + 1
65 |         }
66 |     }
67 | 
68 |     function setValue(v) {
69 |         if (v < value) decreaseValue()
70 |         else increaseValue()
71 |     }
72 | 
73 |     $: {
74 |         dispatch("value-changed", {
75 |             value: value
76 |         })
77 |     }
78 | </script>
79 | 
80 | 
81 | <div class="inline-flex flex-col " on:wheel|preventDefault={(event)=> { event.deltaY > 0 ? increaseValue():
82 |     decreaseValue()}}>
83 |     <div class="w-16 py-2 ">
84 |         <p class="font-sans text-center align-middle select-none ">{colType} </p>
85 |     </div>
86 |     <DateArrows direction="up" callback={decreaseValue } />
87 |     <DateTile bind:value={prev} visible={(value===min) ? false : true} callback={()=> setValue(prev)} />
88 |     <DateTile bind:value={value} isValueTile={true} />
89 |     <DateTile bind:value={next} {visible} callback={()=> setValue(next)}/>
90 |     <DateArrows direction="down" callback={increaseValue} />
91 | </div>


--------------------------------------------------------------------------------
/src/lib/side_nav/MenuItem.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import { SVG, icon_name } from '../../assets/svgs';
 3 |   import { MENU_WIDTH, ACTIVE_PATH } from '../../main_store';
 4 |   import { location, push } from 'svelte-spa-router';
 5 |   import { createEventDispatcher } from 'svelte';
 6 |   let dispatch = createEventDispatcher();
 7 |   export let route;
 8 |   export let path;
 9 |   export let type; //'parent' | 'child'
10 |   let full;
11 |   let expand;
12 |   let hovering;
13 |   $: {
14 |     full = $MENU_WIDTH === '70';
15 |   }
16 |   let active =
17 |     type === 'parent' && route.subRoutes
18 |       ? 'bg-comet shadow-none'
19 |       : 'bg-primary shadow-primary';
20 |   let inactive = `bg-transparent`;
21 |   let color = inactive;
22 |   let parentColor = 'bg-comet';
23 |   $: {
24 |     if (route.path === '/') color = $location.length === 1 ? active : inactive;
25 |     else color = $location === path ? active : inactive;
26 |   }
27 | </script>
28 | 
29 | <div
30 |   title="{route.title}"
31 |   class="{type === 'parent' ? 'menu-item' : 'menu-sub-item'} block select-none"
32 | >
33 |   <span
34 |     class=" flex items-center justify-between p-2 mx-4 mb-2 rounded-md outline-none cursor-pointer select-none menu {route.subRoutes && $location.includes(path) ? parentColor : inactive}
35 |     {color} "
36 |     on:mousemove="{() => (hovering = true)}"
37 |     on:mouseout="{() => (hovering = false)}"
38 |     on:click="{() => {
39 |       push(path);
40 |       dispatch('click', route.route);
41 |     }}"
42 |   >
43 |     <span
44 |       class="icon--route-name flex flex-1 items-center select-none transform {hovering ? 'translate-x-2' : 'translate-x-0'}
45 |       transition-all duration-300 ease-linear"
46 |     >
47 |       <span class=" icon">
48 |         {@html SVG(type === 'parent' ? route.icon : 'circle', `text-cadetblue ${type === 'parent' ? 'w-5 h-5' : 'w-3 h-3'}  `)}
49 |       </span>
50 |       {#if full}
51 |         <span
52 |           class="flex-1 pl-2 font-normal select-none route-name text-cadetblue "
53 |         >
54 |           {route.name}
55 |         </span>
56 |       {/if}
57 |     </span>
58 |     {#if full}
59 |       <span class="expand-icon"  
60 |       on:click="{() => {
61 |         expand = !expand
62 |         dispatch('expand', expand);
63 |       }}">
64 |         {@html SVG('chevron_right', ` text-cadetblue w-5 h-5  transform  ${expand? 'rotate-90' : ''} ${full && route.subRoutes ? 'visible' : 'invisible'}  transition-all duration-300 ease-linear`)}
65 |       </span>
66 |     {/if}
67 |   </span>
68 | 
69 |   <div
70 |     class=" menu-sub-items select-none {expand && full ? 'block ' : 'hidden'}
71 |     transition-all duration-700 ease-linear"
72 |   >
73 |     <slot />
74 |   </div>
75 | </div>
76 | 


--------------------------------------------------------------------------------
/src/lib/side_nav/SideNav.svelte:
--------------------------------------------------------------------------------
 1 | <script>
 2 |   import AppBar from '../app_bar/AppBar.svelte';
 3 |   import Breadcrumb from '../breadcrumb/Breadcrumb.svelte';
 4 |   import MenuItem from './MenuItem.svelte';
 5 |   import MenuHeader from './MenuHeader.svelte';
 6 |   import MenuList from './MenuList.svelte';
 7 |   import { Menu } from './menu.ts';
 8 |   import { SVG } from '../../assets/svgs.ts';
 9 |   import { logo } from '../../assets/logo.ts';
10 |   import {
11 |     APP_WIDTH,
12 |     APPBAR_POSITION,
13 |     MENU_WIDTH,
14 |     MARGIN_LEFT,
15 |     MINI_MENU
16 |   } from '../../main_store.ts';
17 |   export let open = true;
18 | 
19 |   let hovering = false;
20 |   let height;
21 |   let classNames;
22 |   let marginTop;
23 |   $: {
24 |     classNames =
25 |       $APPBAR_POSITION === 'static'
26 |         ? 'px-3 lg:px-5 relative'
27 |         : $APPBAR_POSITION === 'sticky'
28 |         ? `fixed block inset-x-0 lg:ml-${$MARGIN_LEFT} shadow-haiti bg-haiti px-2 lg:px-2 `
29 |         : `fixed block inset-x-0  lg:ml-${$MARGIN_LEFT}  shadow-haiti  lg:left-5 bg-haiti  mx-3 lg:mx-5 mt-3 rounded-md`;
30 |   }
31 |   $: {
32 |     marginTop =
33 |       $APPBAR_POSITION === 'static'
34 |         ? ''
35 |         : $APPBAR_POSITION === 'sticky'
36 |         ? `mt-${height / 4}`
37 |         : `mt-${height / 4+3}`;
38 |   }
39 | </script>
40 | 
41 | <div
42 |   class="side-menu bg-haiti h-full flex flex-col w-{$MENU_WIDTH} fixed z-30 {open ? 'block shadow-2xl' : 'hidden lg:flex'}
43 |   transition-all duration-300 ease-in-out "
44 |   on:mouseover="{e => {
45 |     hovering = true;
46 |     if ($MINI_MENU) MENU_WIDTH.set('70');
47 |   }}"
48 | >
49 |   <slot name="menu-list">
50 |     <MenuHeader on:toggle="{e => (open = e.detail)}" />
51 |     <MenuList />
52 |   </slot>
53 | </div>
54 | <slot name="overlay">
55 |   <div
56 |     class="fixed inset-0 z-20 bg-black lg:bg-opacity-0 bg-opacity-25
57 |     cursor-pointer overlay {open ? 'block' : 'hidden'} lg:{$MINI_MENU && hovering ? 'block' : 'hidden'}
58 |     w-full max-h-full transition-all duration-300 ease-in-out"
59 |     on:click="{() => {
60 |       open = !open;
61 |       hovering = false;
62 |       if ($MINI_MENU) MENU_WIDTH.set('20');
63 |     }}"
64 |     on:mousemove="{() => {
65 |       open = !open;
66 |       hovering = false;
67 |       if ($MINI_MENU) MENU_WIDTH.set('20');
68 |     }}"
69 |   ></div>
70 | </slot>
71 | 
72 | <div
73 |   class=" relative flex flex-col main-content lg:ml-{$MARGIN_LEFT}
74 |   transition-all duration-300 ease-in-out"
75 | >
76 |   <div
77 |     bind:clientHeight="{height}"
78 |     class="{classNames} transition-all duration-300 ease-in-out z-10 "
79 |   >
80 |     <slot name="app-bar">
81 |       <AppBar on:toggle="{() => (open = !open)}" />
82 |     </slot>
83 |   </div>
84 | 
85 |   <div
86 |     class="z-0 px-4 {marginTop} transition-all duration-300 ease-in-out lg:px-6 "
87 |   >
88 |     <slot name="breadcrumb">
89 |       <Breadcrumb />
90 |     </slot>
91 |     <!-- Your contentgoes here -->
92 |     <slot /> 
93 |   </div>
94 | </div>
95 | 


--------------------------------------------------------------------------------
/src/lib/input_field/TypeAheadField.svelte:
--------------------------------------------------------------------------------
 1 | <script lang="typescript">
 2 |   import { SVG } from '../../assets/svgs';
 3 |   import { createEventDispatcher, onMount } from 'svelte';
 4 |   import TextField from './TextField.svelte';
 5 |   const dispatch = createEventDispatcher();
 6 |   let active = false;
 7 |   let dropdown = false;
 8 |   // default classes
 9 |   export let id = '';
10 |   export let name = '';
11 |   export let label = '';
12 |   export let placeholder = '';
13 |   export let value = '';
14 |   export let hint = 'hfhhjj';
15 |   export let type = 'text';
16 |   export let min = 0;
17 |   export let max = 1;
18 |   export let step = 1;
19 |   export let readonly = false;
20 |   export let colors = ['comet', 'primary', 'cadetblue']; //bg, focus, blur
21 |   export let width = 'w-full';
22 |   export let height = 'h-8';
23 |   export let variant = 'default'; //|"material" | "outlined"
24 |   export let startIcon = false;
25 |   export let endIcon = true;
26 |   export let validators = [];
27 |   export let onInput = null;
28 |   export let onFocus = null;
29 |   export let onBlur = null;
30 |   export let onStartIconClicked = null;
31 |   export let onEndIconClicked = null;
32 |   // use these if you want to take control
33 |   export const wrapperClass = 'mb-5';
34 |   export const inputClass = ``;
35 |   export const labelClass = '';
36 |   export const hintClass = 'text-red-600';
37 |   export const iconsClass = '';
38 |   export const leadingIconClass = active
39 |     ? ` text-${colors[1]} `
40 |     : ` text-${colors[2]} `;
41 |   export const trailingIconClass = active
42 |     ? ` text-${colors[1]} `
43 |     : ` text-${colors[2]} `;
44 |   $: {
45 |     /*  run validators*/
46 |     validators.forEach(v => {
47 |       console.log(v);
48 |     });
49 |   }
50 | 
51 |   let fullHeight, fullWidth;
52 | </script>
53 | 
54 | <div bind:clientWidth="{fullWidth}" class=" {width} {wrapperClass}" on:click="{()=> console.log("I have focus")}">
55 |  <div bind:clientHeight="{fullHeight}">
56 |  <TextField
57 |     bind:active
58 |     bind:value
59 |     {id}
60 |     {name}
61 |     {label}
62 |     {placeholder}
63 |     {readonly}
64 |     {height}
65 |     {startIcon}
66 |     {endIcon}
67 |     {onInput}
68 |     {onStartIconClicked}
69 |     {onEndIconClicked}
70 |     {inputClass}
71 | {labelClass}
72 | {hintClass}
73 | {iconsClass}
74 | {leadingIconClass}
75 | {trailingIconClass}
76 |   > <span slot="endIcon" on:click="{()=>console.log("all sails down")}">{@html SVG('chevron_right', 'w-5 h-5 transform rotate-90 text-cadettblue')}</span></TextField>
77 | </div>
78 |   <div
79 |     id="drop-down-wrapper"
80 |     style="width:{fullWidth}; top:{fullHeight-4};"
81 |     class="absolute block max-h-32 overflow-y-auto shadow-md bg-{colors[0]}
82 |     {active ? 'border-2' : ''} border-t-0 {active ? `text-${colors[1]} border-${colors[1]}` : variant === 'default' ? `text-${colors[2]} border-transparent` : `text-${colors[2]} border-${colors[2]}`}"
83 |   >
84 |     {#if active}
85 |       {#each Array(10) as a, i}
86 |         <p on:click="{()=> console.log("Seleted item ", i)}">No items</p>
87 |       {/each}
88 |     {/if}
89 |   </div>
90 | </div>
91 | 


--------------------------------------------------------------------------------
/src/lib/breadcrumb/Breadcrumb.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 |   import { onMount } from 'svelte';
  3 |   import { fade } from 'svelte/transition';
  4 |   import { location, push, pop } from 'svelte-spa-router';
  5 |   import { SVG } from '../../assets/svgs.ts';
  6 |   import { CRUMBS } from '../../main_store.ts';
  7 |   export let getCrumbs;
  8 |   export let paths = [];
  9 | 
 10 |   function titleCase(str) {
 11 |     if (str !== '')
 12 |       return str
 13 |         .toLowerCase()
 14 |         .split(' ')
 15 |         .map(function(word) {
 16 |           return word.replace(word[0], word[0].toUpperCase());
 17 |         })
 18 |         .join(' ');
 19 |   }
 20 | 
 21 |   function getPaths() {
 22 |     try {
 23 |       return $CRUMBS[$location].split('/');
 24 |     } catch (e) {
 25 |       let a = $location.split('/');
 26 |       if ($location !== '/' && a.length > 2) {
 27 |         let b = a
 28 |           .slice(0, a.length - 2)
 29 |           .join('/')
 30 |           .toLowerCase();
 31 |         let c = $CRUMBS[`${b}/params`].split('/');
 32 |         let d = c.slice(-1)[0].split(',');
 33 |         if ($location.search('false') === -1 && $location.search('true') === -1)
 34 |           return `${b}/${d[2]}`.split('/');
 35 |         else if ($location.search('false') > -1)
 36 |           return `${b}/${d[1]}`.split('/');
 37 |         else if ($location.search('true') > -1)
 38 |           return `${b}/${d[0]}`.split('/');
 39 |       }
 40 |     }
 41 |   }
 42 | 
 43 |   $: {
 44 |     console.log($CRUMBS[$location]);
 45 |     paths = getCrumbs ? getCrumbs() : getPaths();
 46 |   }
 47 | 
 48 |   function jumpTo(index) {
 49 |     let path = '';
 50 |     if (index === 0) path = '/';
 51 |     else
 52 |       for (let i = 0; i < index; i++) {
 53 |         path += '/' + paths[i + 1];
 54 |       }
 55 |     push(path);
 56 |   }
 57 | </script>
 58 | 
 59 | {#if paths.length === 0}
 60 |   {@html SVG('home', 'w-5 h-5 py-3 cursor-pointer inline-flex text-primary')}
 61 | {:else}
 62 |   <div class="flex py-3 align-middle">
 63 |     <slot name="current-route">
 64 |       <h2
 65 |         class="inline-flex p-0 px-2 mr-2 text-xl font-normal leading-6 border border-t-0 border-b-0 border-l-0 border-r-0 select-none lg:border-r text-cararra border-cararra "
 66 |       >
 67 |         {paths[paths.length - 1]}
 68 |       </h2>
 69 |     </slot>
 70 |     <div transition:fade class="items-center justify-start hidden md:flex">
 71 |       {#each paths as p, i}
 72 |         {#if i === 0}
 73 |           <slot name="home-icon">
 74 |             <span
 75 |               on:click="{() => {
 76 |                 jumpTo(0);
 77 |               }}"
 78 |             >
 79 |               {@html SVG('home', 'w-5 h-5 cursor-pointer inline-flex text-primary')}
 80 |             </span>
 81 |           </slot>
 82 |         {/if}
 83 | 
 84 |         {#if i > 0 && i < paths.length}
 85 |           <slot name="separator">
 86 |             {@html SVG('chevrons_right', 'w-4 h-4 inline-flex text-cararra  cursor-default')}
 87 |           </slot>
 88 |         {/if}
 89 |         <slot name="crumbs">
 90 |           <span
 91 |             transition:fade
 92 |             on:click="{() => {
 93 |               if (i !== paths.length - 1) jumpTo(i);
 94 |             }}"
 95 |             class="text-sm text px-1 select-none {i < paths.length - 1 ? 'text-primary cursor-pointer' : 'text-cararra cursor-default'}"
 96 |           >
 97 |             {#if p !== ''}{titleCase(p)}{/if}
 98 |           </span>
 99 |         </slot>
100 |       {/each}
101 |     </div>
102 |   </div>
103 | {/if}
104 | 


--------------------------------------------------------------------------------
/src/lib/dtp/DateField.svelte:
--------------------------------------------------------------------------------
  1 | <style>
  2 | input:-webkit-autofill,
  3 | input:-webkit-autofill:hover, 
  4 | input:-webkit-autofill:focus {
  5 |   border: 1px solid #5a67d8;
  6 |   -webkit-text-fill-color: #5a67d8;
  7 |   -webkit-box-shadow: 0 0 0px 1000px white inset;
  8 |   box-shadow: 0 0 0px 1000px white inset;
  9 |   transition: background-color 5000s ease-in-out 0s;
 10 | }
 11 | </style>
 12 | 
 13 | <script>
 14 |   import DatePicker from './DatePicker.svelte'
 15 |   import moment from 'moment'
 16 | import { createEventDispatcher } from 'svelte';
 17 | 
 18 | const dispatch = createEventDispatcher();
 19 |   let active = false;
 20 |   let dv = Number.parseInt(moment().format("DD"));
 21 |   let mv = Number.parseInt(moment().format("MM"))
 22 |   let yv = Number.parseInt(moment().format("YYYY"))
 23 |   let hovering = false
 24 | 
 25 |   let defaultLabelStyle = `
 26 | top: 0.75em;
 27 | left: 0.75em;
 28 | transition: transform 0.25s, opacity 0.25s, padding 0.25s ease-in-out;
 29 | transform-origin: 0 0;`;
 30 | 
 31 |   let floatingState = `
 32 | z-index: 2500;
 33 | transform: translate(0, -2em) scale(0.9);`;
 34 | 
 35 |   let defaultLabelClass =
 36 |     'bg-white text-gray-600 select-none   leading-none  absolute block p-6 w-auto m-0';
 37 |   let normalLabelClass = ' z-1500 bg-white ';
 38 |   let floatingLabelClass = 'z-2500  px-1 pt-3 pb-0 text-sm';
 39 | 
 40 |   let defaultInputClass = ` m-0 max-h-64 p-6  lg transition duration-300 ease-in-out overflow-visible block z-2000 leading-none relative outline-none bg-white border border-solid rounded-md  `;
 41 | 
 42 |   export let id = '';
 43 |   export let name = '';
 44 |   export let label = '';
 45 |   export let placeholder = '';
 46 |   export let dateFormat = 'dddd, MMMM Do YYYY';
 47 |    export   let value = moment(`${dv}-${mv}-${yv}`, "DD-MM-YYYY").format(dateFormat)
 48 |  const tempHolder = placeholder;
 49 |   export let color = 'primary';
 50 |   export const inactiveColor = 'gray-400';
 51 |   export let wrapperClass = '';
 52 |   export let labelClass = '';
 53 |   export let inputClass = '';
 54 |   export let error = '';
 55 |   export let validators = [];
 56 |   export let callback = null;
 57 | 
 58 | 
 59 |   $: {
 60 |     if (!active) placeholder = label;
 61 |     else placeholder = tempHolder;
 62 |   }
 63 | 
 64 |   $: {
 65 |     /*  run validators*/
 66 |     validators.forEach(v => {
 67 |       console.log(v);
 68 |     });
 69 |   }
 70 | </script>
 71 | 
 72 | <div class="relative my-1 {wrapperClass}">
 73 |   <input
 74 |     {id}
 75 |     {name}
 76 |     {placeholder}
 77 |     bind:value
 78 |     on:blur="{() => { 
 79 |       active  = active && hovering 
 80 |       dispatch('blur', {active: active})}}"
 81 |     on:input="{() => {
 82 |       if (callback !== null) callback();
 83 |     }}"
 84 |     on:focus={() => {active = true; dispatch('focus', {active: true}) }}
 85 |     class="{defaultInputClass}     {active && value !== '' ? `text-${color}  border-${color} `   :  `${value !== '' ?  'border-primary text-primary' : ' border-gray-400 text-gray-400'}`}   {inputClass}  "
 86 | 	type="text"
 87 |   />
 88 |   <label
 89 |     for="field-1"
 90 |     class="{defaultLabelClass}
 91 |     {active ? floatingLabelClass : normalLabelClass}
 92 |     {labelClass}
 93 |     "
 94 |     style="{defaultLabelStyle}
 95 |     {active ? floatingState : normalLabelClass}"
 96 |   >
 97 |     {active ? label : placeholder}
 98 |   </label>
 99 |   {#if error !== ''}
100 |     <div class="block">
101 |       <p class="py-1 text-xs text-center text-red-600 ">{error}</p>
102 |     </div>
103 |   {/if}
104 | 
105 |   {#if active || hovering }
106 | <div class="absolute top-0 mt-19 z-2500">
107 |   <DatePicker {dateFormat}  on:hovering={(event) => hovering = event.detail.hovering } 
108 |   on:mouse-leave={(event) => hovering = !event.detail.leave}
109 |   on:date-selected= {(event)  => {
110 |     active = false
111 |     value = event.detail.date} }/>
112 | </div>
113 | {/if}
114 | 
115 | 
116 | 
117 | </div>


--------------------------------------------------------------------------------
/src/lib/pages/FormOne.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 |   Section,
  3 |   FormOption,
  4 |   Row
  5 | } from "../form_builder/form_options";
  6 | 
  7 | let sections: Section[] = [
  8 | 
  9 |   {
 10 |     title: 'Academic Information',
 11 |     // class: 'inline-block w-40p',
 12 |     rows: [
 13 |       {
 14 |         fields: [
 15 |           {
 16 |             id: 'appID',
 17 |             name: 'appID',
 18 |             label: 'Application ID',
 19 |             width: 'w-full md:w-45p',
 20 |           },
 21 |           {
 22 |             id: 'examsNo',
 23 |             name: 'examsNo',
 24 |             label: 'Exams Number',
 25 |             width: 'w-full md:w-50p',
 26 |           }
 27 |         ]
 28 |       },
 29 |       {
 30 |         fields: [
 31 |           {
 32 |             id: 'programme',
 33 |             name: 'programme',
 34 |             label: 'Programme',
 35 |             width: 'w-full md:w-50p',
 36 |           },
 37 |           {
 38 |             id: 'entryLevel',
 39 |             name: 'entryLevel',
 40 |             label: 'Entry Level',
 41 |             width: 'w-45p md:w-20p',
 42 |             type: "number",
 43 |             min: 100,
 44 |             max: 600,
 45 |             step: 100
 46 |           },
 47 |           {
 48 |             id: 'currentLevel',
 49 |             name: 'currentLevel',
 50 |             label: 'Current Level',
 51 |             width: 'w-45p md:w-20p',
 52 |             type: "number",
 53 |             min: 100,
 54 |             max: 600,
 55 |             step: 100
 56 |           }
 57 |         ]
 58 |       },
 59 |       {
 60 |         fields: [
 61 |           {
 62 |             id: 'booksGiven',
 63 |             name: 'booksGiven',
 64 |             label: 'Books Given',
 65 |             width: 'w-100p',
 66 |           }
 67 |         ]
 68 |       }
 69 |     ]
 70 |   },
 71 |   {
 72 |     title: 'Personal Information',
 73 |     // class: 'inline-block w-40p',
 74 |     rows: [
 75 |       {
 76 |         fields: [
 77 |           {
 78 |             id: 'surname',
 79 |             name: 'surname',
 80 |             label: 'Surname',
 81 |             width: 'w-full md:w-45p',
 82 |           },
 83 |           {
 84 |             id: 'othernames',
 85 |             name: 'othernames',
 86 |             label: 'Other Names',
 87 |             width: 'w-full md:w-50p',
 88 |           }
 89 |         ]
 90 |       },
 91 |       {
 92 |         fields: [
 93 |           {
 94 |             id: 'dob',
 95 |             name: 'dob',
 96 |             label: 'Date of birth',
 97 |             width: 'w-full md:w-25p',
 98 |             type: "date"
 99 |           },
100 |           {
101 |             id: 'gender',
102 |             name: 'gender',
103 |             label: 'Gender',
104 |             width: 'w-full md:w-25p',
105 |           }, {
106 |             id: 'qualification',
107 |             name: 'qualification',
108 |             label: 'Qualification',
109 |             width: 'w-full md:w-40p',
110 |           }
111 |         ]
112 |       },
113 | 
114 |     ]
115 |   },
116 |   {
117 |     title: 'Contact',
118 |     // class: 'inline-block w-40p',
119 |     rows: [
120 |       {
121 |         fields: [
122 |           {
123 |             id: 'phoneNo',
124 |             name: 'phoneNo',
125 |             label: 'Phone Number',
126 |             width: 'w-full md:w-30p',
127 |           },
128 |           {
129 |             id: 'email',
130 |             name: 'email',
131 |             label: 'Email',
132 |             width: 'w-full md:w-30p',
133 |           }, {
134 |             id: 'address',
135 |             name: 'address',
136 |             label: 'Address',
137 |             width: 'w-full md:w-30p',
138 |           }
139 |         ]
140 |       },
141 |     ]
142 |   }
143 | 
144 | ]
145 | 
146 | let formOptions: FormOption = {
147 |   id: 'Form1',
148 |   sections: sections,
149 |   // class : " flex justify-betwen w-full items-start"
150 | };
151 | 
152 | export const options = formOptions


--------------------------------------------------------------------------------
/src/lib/pages/student/RegistrationForm.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 |   Section,
  3 |   FormOption,
  4 | } from "../../form_builder/form_options";
  5 | 
  6 | let sections: Section[] = [
  7 | 
  8 |   {
  9 |     title: 'Academic Information',
 10 |     // class: 'inline-block w-40p',
 11 |     rows: [
 12 |       {
 13 |         fields: [
 14 |           {
 15 |             id: 'appID',
 16 |             name: 'appID',
 17 |             label: 'Application ID',
 18 |             width: 'w-full md:w-45p',
 19 |           },
 20 |           {
 21 |             id: 'examsNo',
 22 |             name: 'examsNo',
 23 |             label: 'Exams Number',
 24 |             width: 'w-full md:w-50p',
 25 |           }
 26 |         ]
 27 |       },
 28 |       {
 29 |         fields: [
 30 |           {
 31 |             id: 'programme',
 32 |             name: 'programme',
 33 |             label: 'Programme',
 34 |             width: 'w-full md:w-50p',
 35 |           },
 36 |           {
 37 |             id: 'entryLevel',
 38 |             name: 'entryLevel',
 39 |             label: 'Entry Level',
 40 |             width: 'w-45p md:w-20p',
 41 |             type: "number",
 42 |             min: 100,
 43 |             max: 600,
 44 |             step: 100
 45 |           },
 46 |           {
 47 |             id: 'currentLevel',
 48 |             name: 'currentLevel',
 49 |             label: 'Current Level',
 50 |             width: 'w-45p md:w-20p',
 51 |             type: "number",
 52 |             min: 100,
 53 |             max: 600,
 54 |             step: 100
 55 |           }
 56 |         ]
 57 |       },
 58 |       {
 59 |         fields: [
 60 |           {
 61 |             id: 'booksGiven',
 62 |             name: 'booksGiven',
 63 |             label: 'Books Given',
 64 |             width: 'w-100p',
 65 |           }
 66 |         ]
 67 |       }
 68 |     ]
 69 |   },
 70 |   {
 71 |     title: 'Personal Information',
 72 |     // class: 'inline-block w-40p',
 73 |     rows: [
 74 |       {
 75 |         fields: [
 76 |           {
 77 |             id: 'surname',
 78 |             name: 'surname',
 79 |             label: 'Surname',
 80 |             width: 'w-full md:w-45p',
 81 |           },
 82 |           {
 83 |             id: 'othernames',
 84 |             name: 'othernames',
 85 |             label: 'Other Names',
 86 |             width: 'w-full md:w-50p',
 87 |           }
 88 |         ]
 89 |       },
 90 |       {
 91 |         fields: [
 92 |           {
 93 |             id: 'dob',
 94 |             name: 'dob',
 95 |             label: 'Date of birth',
 96 |             width: 'w-full md:w-25p',
 97 |             type: "date"
 98 |           },
 99 |           {
100 |             id: 'gender',
101 |             name: 'gender',
102 |             label: 'Gender',
103 |             width: 'w-full md:w-25p',
104 |           }, {
105 |             id: 'qualification',
106 |             name: 'qualification',
107 |             label: 'Qualification',
108 |             width: 'w-full md:w-40p',
109 |           }
110 |         ]
111 |       },
112 | 
113 |     ]
114 |   },
115 |   {
116 |     title: 'Contact',
117 |     // class: 'inline-block w-40p',
118 |     rows: [
119 |       {
120 |         fields: [
121 |           {
122 |             id: 'phoneNo',
123 |             name: 'phoneNo',
124 |             label: 'Phone Number',
125 |             width: 'w-full md:w-30p',
126 |           },
127 |           {
128 |             id: 'email',
129 |             name: 'email',
130 |             label: 'Email',
131 |             width: 'w-full md:w-30p',
132 |           }, {
133 |             id: 'address',
134 |             name: 'address',
135 |             label: 'Address',
136 |             width: 'w-full md:w-30p',
137 |           }
138 |         ]
139 |       },
140 |     ]
141 |   }
142 | 
143 | ]
144 | 
145 | let formOptions: FormOption = {
146 |   id: 'Form1',
147 |   sections: sections,
148 |   // class : " flex justify-betwen w-full items-start"
149 | };
150 | 
151 | export const options = formOptions


--------------------------------------------------------------------------------
/src/lib/input_field/DateFormatter.ts:
--------------------------------------------------------------------------------
 1 | export let days = [
 2 |     { s: 'Sun', l: 'Sunday' },
 3 |     { s: 'Mon', l: "Monday" },
 4 |     { s: 'Tue', l: 'Tuesday' },
 5 |     { s: 'Wed', l: 'Wednesday' },
 6 |     { s: 'Thu', l: 'Thursday' },
 7 |     { s: 'Fri', l: 'Friday' },
 8 |     { s: 'Sat', l: 'Saturday' }
 9 | ];
10 | 
11 | export let months = [
12 |     { s: 'Jan', l: 'January' },
13 |     { s: 'Feb', l: 'February' },
14 |     { s: 'Mar', l: 'March' },
15 |     { s: 'Apr', l: 'April' },
16 |     { s: 'May', l: 'May' },
17 |     { s: 'Jun', l: 'June' },
18 |     { s: 'Jul', l: 'July' },
19 |     { s: 'Aug', l: 'August' },
20 |     { s: 'Sep', l: 'September' },
21 |     { s: 'Oct', l: 'October' },
22 |     { s: 'Nov', l: 'November' },
23 |     { s: 'Dec', l: 'December' },
24 | ];
25 | 
26 | 
27 | 
28 | // Got from StackOverflow....
29 | export function getOrdinal(day = 0) {
30 |     let selector;
31 |     if (day <= 0) selector = 4;
32 |     else if ((day > 3 && day < 21) || day % 10 > 3) selector = 0;
33 |     else selector = day % 10;
34 |     return ['th', 'st', 'nd', 'rd', ''][selector];
35 | };
36 | 
37 | // Gets the full or short name of the day or month or the nth day of the week
38 | function getName(year: number, month: number, day: number, token: string) {
39 |     let dayIndex = new Date(year, month, day).getDay()
40 |     let monthIndex = new Date(year, month - 1, day).getMonth()
41 |     return token === "MMMM" ? months[monthIndex].l :
42 |         token === "MMM" ? months[monthIndex].s :
43 |             token === "DDDD" ? days[dayIndex].l :
44 |                 token === "DDD" ? days[dayIndex].s : (dayIndex + 1).toString()
45 | }
46 | 
47 | export function formatDate(year: number, month: number, day: number, pattern: string) {
48 |     // these are the accepted tokens
49 |     let formatTokens = ["dd", "d", "o", "O", "DDDD", "DDD", "DW", "mm", "m", "MMMM", "MMM", "yyyy", "yy"]
50 | 
51 |     formatTokens.forEach(t => {
52 |         switch (t) {
53 |             case "dd":  // replace with day of the month in 2-digits
54 |                 pattern = pattern.replace(/[dd]{2}/g, day < 10 ? `0${day}` : `${day}`)
55 |                 break;
56 |             case "d":  // replace with day of the month in 1-digit
57 |                 pattern = pattern.replace(/[d]{1}/g, `${day}`)
58 |                 break;
59 |             case "o": // replace with ordinal day of the month value
60 |                 pattern = pattern.replace(/[o]{1}/g, getOrdinal(day))
61 |                 break;
62 |             case "DDDD": // replace with the full name of the day of the Week
63 |                 pattern = pattern.replace(/[DDDD]{4}/g, getName(year, month, day, "DDDD"))
64 |                 break;
65 |             case "DDD": // replace with the short name of the day of the week
66 |                 pattern = pattern.replace(/[DDD]{3}/g, getName(year, month, day, "DDD"))
67 |                 break;
68 |             case "DW": // replace with the nth day of the the Week
69 |                 pattern = pattern.replace(/[DW]{2}/g, getName(year, month, day, "DW"))
70 |                 break;
71 |             case "mm": // replace with the month of the year in 2 digits
72 |                 pattern = pattern.replace(/[mm]{2}/g, month < 10 ? `0${month}` : `${month}`)
73 |                 break;
74 |             case "m": // replace with the month of the year in 2 digits
75 |                 pattern = pattern.replace(/[m]{1}/g, `${month}`)
76 |                 break;
77 |             case "MMMM": // replace with the full name of the month
78 |                 pattern = pattern.replace(/[MMMM]{4}/g, getName(year, month, day, "MMMM"))
79 |                 break;
80 |             case "MMM": // replace with the short name of the month
81 |                 pattern = pattern.replace(/[MMM]{3}/g, getName(year, month, day, "MMM"))
82 | 
83 |             case "yyyy": // replace with the year in 4 digit
84 |                 pattern = pattern.replace(/[yyyy]{4}/g, `${year}`)
85 |                 break;
86 |             case "yy": // replace with the yeaar in 2 digits
87 |                 pattern = pattern.replace(/[yy]{2}/g, `${year.toString().substring(2)}`)
88 |                 break;
89 |             default:
90 |         }
91 |     })
92 |     return pattern
93 | }
94 | 


--------------------------------------------------------------------------------
/src/lib/forms/StudentRegistration.ts:
--------------------------------------------------------------------------------
  1 | import {
  2 |     Section,
  3 |     FormOption,
  4 |     Row
  5 |   } from "../form_builder/form_options";
  6 |   
  7 |   let sections: Section[] = [
  8 |   
  9 |     {
 10 |       title: 'Academic Information',
 11 |       // class: 'inline-block w-40p',
 12 |       rows: [
 13 |         {
 14 |           fields: [
 15 |             {
 16 |               id: 'appID',
 17 |               name: 'appID',
 18 |               label: 'Application ID',
 19 |               width: 'w-full md:w-45p',
 20 |             },
 21 |             {
 22 |               id: 'examsNo',
 23 |               name: 'examsNo',
 24 |               label: 'Exams Number',
 25 |               width: 'w-full md:w-50p',
 26 |             }
 27 |           ]
 28 |         },
 29 |         {
 30 |           fields: [
 31 |             {
 32 |               id: 'programme',
 33 |               name: 'programme',
 34 |               label: 'Programme',
 35 |               width: 'w-full md:w-50p',
 36 |             },
 37 |             {
 38 |               id: 'entryLevel',
 39 |               name: 'entryLevel',
 40 |               label: 'Entry Level',
 41 |               width: 'w-45p md:w-20p',
 42 |               type: "number",
 43 |               min: 100,
 44 |               max: 600,
 45 |               step: 100
 46 |             },
 47 |             {
 48 |               id: 'currentLevel',
 49 |               name: 'currentLevel',
 50 |               label: 'Current Level',
 51 |               width: 'w-45p md:w-20p',
 52 |               type: "number",
 53 |               min: 100,
 54 |               max: 600,
 55 |               step: 100
 56 |             }
 57 |           ]
 58 |         },
 59 |         {
 60 |           fields: [
 61 |             {
 62 |               id: 'booksGiven',
 63 |               name: 'booksGiven',
 64 |               label: 'Books Given',
 65 |               width: 'w-100p',
 66 |             }
 67 |           ]
 68 |         }
 69 |       ]
 70 |     },
 71 |     {
 72 |       title: 'Personal Information',
 73 |       // class: 'inline-block w-40p',
 74 |       rows: [
 75 |         {
 76 |           fields: [
 77 |             {
 78 |               id: 'surname',
 79 |               name: 'surname',
 80 |               label: 'Surname',
 81 |               width: 'w-full md:w-45p',
 82 |             },
 83 |             {
 84 |               id: 'othernames',
 85 |               name: 'othernames',
 86 |               label: 'Other Names',
 87 |               width: 'w-full md:w-50p',
 88 |             }
 89 |           ]
 90 |         },
 91 |         {
 92 |           fields: [
 93 |             {
 94 |               id: 'dob',
 95 |               name: 'dob',
 96 |               label: 'Date of birth',
 97 |               width: 'w-full md:w-25p',
 98 |               type: "date"
 99 |             },
100 |             {
101 |               id: 'gender',
102 |               name: 'gender',
103 |               label: 'Gender',
104 |               width: 'w-full md:w-25p',
105 |             }, {
106 |               id: 'qualification',
107 |               name: 'qualification',
108 |               label: 'Qualification',
109 |               width: 'w-full md:w-40p',
110 |             }
111 |           ]
112 |         },
113 |   
114 |       ]
115 |     },
116 |     {
117 |       title: 'Contact',
118 |       // class: 'inline-block w-40p',
119 |       rows: [
120 |         {
121 |           fields: [
122 |             {
123 |               id: 'phoneNo',
124 |               name: 'phoneNo',
125 |               label: 'Phone Number',
126 |               width: 'w-full md:w-30p',
127 |             },
128 |             {
129 |               id: 'email',
130 |               name: 'email',
131 |               label: 'Email',
132 |               width: 'w-full md:w-30p',
133 |             }, {
134 |               id: 'address',
135 |               name: 'address',
136 |               label: 'Address',
137 |               width: 'w-full md:w-30p',
138 |             }
139 |           ]
140 |         },
141 |       ]
142 |     }
143 |   
144 |   ]
145 |   
146 |   let formOptions: FormOption = {
147 |     id: 'StudentRegistartion',
148 |     sections: sections,
149 |     // class : " flex justify-betwen w-full items-start"
150 |   };
151 |   
152 |   export const options = formOptions


--------------------------------------------------------------------------------
/src/lib/app_bar/AppBar.svelte:
--------------------------------------------------------------------------------
  1 | <style>
  2 |   input:-webkit-autofill,
  3 |   input:-webkit-autofill:hover,
  4 |   input:-webkit-autofill:focus {
  5 |     border: 1px solid #5a67d8;
  6 |     -webkit-text-fill-color: #5a67d8;
  7 |     -webkit-box-shadow: 0 0 0px 1000px white inset;
  8 |     box-shadow: 0 0 0px 1000px white inset;
  9 |     transition: background-color 5000s ease-in-out 0s;
 10 |   }
 11 | </style>
 12 | 
 13 | <script>
 14 |   import { createEventDispatcher } from 'svelte';
 15 |   let dispatch = createEventDispatcher();
 16 |   import { push, pop } from 'svelte-spa-router';
 17 |   import { fly, fade } from 'svelte/transition';
 18 |   import { TOGGLE_ICON, MARGIN_LEFT } from '../../main_store';
 19 |   import { SVG, icon_name } from '../../assets/svgs';
 20 |   import { FavIcon } from './icons';
 21 |   import Avartar from '../avartar/Avartar.svelte';
 22 |   export let search = '';
 23 |   export let currentUser = 'Emmanuel';
 24 |   export let status = 'Service';
 25 |   export let favoriteIcons = [
 26 |     // Array<FavIcon>
 27 |     {
 28 |       name: 'message',
 29 |       callback: () => {
 30 |         push('/books/id/false');
 31 |       }
 32 |     },
 33 |     { name: 'check_square' },
 34 |     {
 35 |       name: 'mail',
 36 |       callback: () => {
 37 |         push('/books/id/true');
 38 |       }
 39 |     },
 40 |     { name: 'star', classNames: 'text-warning focus:fill-current' }
 41 |   ];
 42 |   let searching = false;
 43 | </script>
 44 | 
 45 | <!-- App Bar -->
 46 | <div class="flex justify-between px-2 py-3">
 47 |   {#if searching}
 48 |     <div class="flex items-center w-full" in:fly="{{ x: 20, duration: 500 }}">
 49 |       <div class="flex items-center flex-1 ">
 50 |         <span class="inline">
 51 |           {@html SVG('search', 'text-cadetblue w-6 h-6  ')}
 52 |         </span>
 53 |         <input
 54 |           type="text"
 55 |           name="search"
 56 |           id="search"
 57 |           placeholder="Search for..."
 58 |           bind:value="{search}"
 59 |           class="flex-1 w-full h-10 bg-transparent border-0 outline-none text-cadetblue"
 60 |           on:input="{() => dispatch('search')}"
 61 |           on:focus="{() => dispatch('focus')}"
 62 |         />
 63 |       </div>
 64 |       <div>
 65 |         <span
 66 |           class="inline"
 67 |           on:click="{() => {
 68 |             searching = false;
 69 |             dispatch('dismiss');
 70 |           }}"
 71 |         >
 72 |           {@html SVG('close', 'text-cadetblue w-6 h-6 hover:text-primary')}
 73 |         </span>
 74 |       </div>
 75 |     </div>
 76 |   {:else}
 77 |     <div
 78 |       class="inline-flex items-center align-middle"
 79 |       in:fly="{{ x: -20, duration: 500 }}"
 80 |     >
 81 |       <span class="lg:hidden" on:click="{() => dispatch('toggle')}">
 82 |         {@html SVG('menu', 'text-cadetblue w-6 h-6 hover:text-primary')}
 83 |       </span>
 84 |       <span class="hidden lg:inline-flex">
 85 |         <slot name="favoriteIcons">
 86 |           {#each favoriteIcons as icon}
 87 |             <span on:click="{() => icon.callback()}">
 88 |               {@html SVG(icon.name, `text-cadetblue w-6 h-6 hover:text-primary ${icon.classNames}`)}
 89 |             </span>
 90 |           {/each}
 91 |         </slot>
 92 |       </span>
 93 | 
 94 |     </div>
 95 |     <div
 96 |       class="inline-flex items-center align-middle "
 97 |       in:fly="{{ x: 20, duration: 500 }}"
 98 |     >
 99 |       <span
100 |         on:click="{() => {
101 |           searching = true;
102 |           dispatch('show');
103 |         }}"
104 |       >
105 |         {@html SVG('search', 'text-cadetblue w-6 h-6 hover:text-primary ')}
106 |       </span>
107 |       <span class="hidden lg:block">
108 |         {@html SVG('bell', 'text-cadetblue w-6 h-6 hover:text-primary ')}
109 |       </span>
110 |       <div class="flex-col hidden mx-2 lg:flex ">
111 |         <span
112 |           class="text-sm font-semibold leading-5 select-none text-cadetblue"
113 |         >
114 |           {currentUser}
115 |         </span>
116 |         <span
117 |           class="text-xs font-normal leading-3 tracking-tighter text-right select-none text-cadetblue"
118 |         >
119 |           {status}
120 |         </span>
121 |       </div>
122 |       <Avartar />
123 |     </div>
124 |   {/if}
125 | </div>
126 | 


--------------------------------------------------------------------------------
/src/lib/calendar/Calendar.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 |   import Cell from './Cell.svelte';
  3 |   import { createEventDispatcher } from 'svelte';
  4 |   import { fly } from 'svelte/transition';
  5 |   import { days, months } from '../input_field/DateFormatter';
  6 |   import { SVG } from '../../assets/svgs';
  7 |   let dispatch = createEventDispatcher();
  8 | 
  9 |   let month = new Date().getMonth(),
 10 |     year = new Date().getFullYear(),
 11 |     firstDay,
 12 |     lastDay,
 13 |     firstDayOfNextMonth,
 14 |     lastDayOfLastMonth,
 15 |     daysBeforeThisMonth,
 16 |     daysAfterThisMonth,
 17 |     lastCount,
 18 |     today,
 19 |     sumOfDays,
 20 |     display = 'days',
 21 |     deltaMonth = month,
 22 |     flyX = 20;
 23 | 
 24 |   $: {
 25 |     firstDay = new Date(year, month).getDay();
 26 |     lastDay = 32 - new Date(year, month, 32).getDate();
 27 |     firstDayOfNextMonth = new Date(year, month + 1).getDay();
 28 |     lastDayOfLastMonth = 32 - new Date(year, month - 1, 32).getDate();
 29 |     daysBeforeThisMonth = lastDayOfLastMonth - firstDay;
 30 |     daysAfterThisMonth = 7 - firstDayOfNextMonth;
 31 | 
 32 |     lastCount = lastDayOfLastMonth - daysBeforeThisMonth;
 33 |     today = new Date().getDate();
 34 |     sumOfDays =
 35 |       lastDayOfLastMonth - daysBeforeThisMonth + lastDay + daysAfterThisMonth;
 36 |     if (deltaMonth < month) flyX *= -1;
 37 |     else flyX *= 1;
 38 |     deltaMonth = month;
 39 |   }
 40 | 
 41 |   function getValue(i) {
 42 |     let dd, mm;
 43 |     if (i < lastCount) {
 44 |       dd = daysBeforeThisMonth + i + 1; // i+1 because index=0
 45 |       mm = month;
 46 |     } else if (i >= lastCount && i < lastDay + lastCount) {
 47 |       dd = 1 + (i - lastCount); // (i-lastCount) resets the index to 0
 48 |       mm = month + 1;
 49 |     } else {
 50 |       dd = i - lastCount - lastDay + 1; //  (i - lastDay - lastCount) resets the index to 0 again
 51 |       mm = month + 2;
 52 |     }
 53 |     return {
 54 |       text: dd,
 55 |       date: `${dd}/${mm}/${year}`,
 56 |     };
 57 |   }
 58 | 
 59 |   function isDisabled(i) {
 60 |     if (i >= lastCount && i < lastDay + lastCount) return false;
 61 |     return true;
 62 |   }
 63 | </script>
 64 | 
 65 | <!-- mx-auto:center, ml-auto:right, mr-auto:left -->
 66 | <div style="max-width: 280px; min-width: 280px" class="pt-2 mx-auto calender">
 67 |   {#if display === 'days'}
 68 |     <!-- Select Month and Year -->
 69 |     <div class="block w-full">
 70 |       <div class="inline-flex justify-between w-full px-2">
 71 |         <div>
 72 |           <span
 73 |             on:click|stopPropagation|preventDefault="{() => (display = 'months')}"
 74 |           >
 75 |             {months[month].l}
 76 |           </span>
 77 |           <span>{year}</span>
 78 |         </div>
 79 |         <div class="inline-flex">
 80 |           <span>
 81 |             {@html SVG('chevron_right', 'transform rotate-180 mx-0')}
 82 |           </span>
 83 |           <span>
 84 |             {@html SVG('chevron_right', 'mx-0')}
 85 |           </span>
 86 |         </div>
 87 |       </div>
 88 |     </div>
 89 | 
 90 |     <!-- Days in the Week -->
 91 |     <div class="block w-full">
 92 |       <div class="inline-flex flex-wrap">
 93 |         {#each days as day}
 94 |           <Cell disable="true" {display} text="{day.s}" />
 95 |         {/each}
 96 |       </div>
 97 |     </div>
 98 | 
 99 |     <!-- Days of Last, This and Next Month -->
100 |     <div in:fly="{{ x: flyX, duration: 200 }}" class="block w-full ">
101 |       <div class="inline-flex flex-wrap">
102 |         {#each Array(sumOfDays) as d, i}
103 |           <Cell
104 |             {...getValue(i)}
105 |             index="{i}"
106 |             {display}
107 |             disable="{isDisabled(i)}"
108 |             on:dateselected
109 |           />
110 |         {/each}
111 |       </div>
112 |     </div>
113 |   {:else if display === 'months'}
114 |     <div in:fly="{{ x: 20, duration: 200 }}" class="block w-full">
115 |       <div class="inline-flex flex-wrap">
116 |         {#each months as m, i}
117 |           <Cell
118 |             text="{m.s}"
119 |             index="{i}"
120 |             {display}
121 |             on:monthSelected="{(e) => {
122 |               month = e.detail.index;
123 |               display = 'days';
124 |             }}"
125 |           />
126 |         {/each}
127 |       </div>
128 |     </div>
129 |   {:else}
130 |     <div class="block w-full">
131 |       <div class="inline-flex flex-wrap">
132 |         {#each Array(20) as day, i}
133 |           <Cell disable="true" day="{i + 20}" />
134 |         {/each}
135 |       </div>
136 |     </div>
137 |   {/if}
138 | </div>
139 | 


--------------------------------------------------------------------------------
/src/lib/side_nav/menu.ts:
--------------------------------------------------------------------------------
  1 | import { icon_name } from "src/assets/svgs"
  2 | import PageOne from "../pages/PageOne.svelte";
  3 | import PageTwo from '../pages/PageTwo.svelte'
  4 | import AllStudents from "../pages/students/AllStudents.svelte";
  5 | import RegisterStudent from '../pages/students/RegisterStudent.svelte'
  6 | import FeesRecords from '../pages/fees/FeesRecords.svelte';
  7 | 
  8 | export interface MenuList {
  9 | 	group: string
 10 | 	routes: Route[]
 11 | }
 12 | 
 13 | export interface Param {
 14 | 	param: string
 15 | 	name: string
 16 | 	component: any
 17 | }
 18 | 
 19 | export interface Route {
 20 | 	path: string
 21 | 	name: string
 22 | 	icon?: icon_name
 23 | 	title?: string
 24 | 	component?: any
 25 | 	subRoutes?: Route[]
 26 | 	data?: any
 27 | 	params?: Param[]
 28 | 	query?: any
 29 | }
 30 | 
 31 | const MenuList: Array<MenuList> = [
 32 | 	{
 33 | 		group: "HOME",
 34 | 		routes: [
 35 | 			{
 36 | 				path: "/",
 37 | 				name: "Dashboard", icon: "activity", component: PageTwo,
 38 | 				title: "View statistics of attendance and overview , events, notifications and issues"
 39 | 			}]
 40 | 	},
 41 | 	{
 42 | 		group: "FINANCIAL",
 43 | 		routes: [
 44 | 			{
 45 | 				path: "/fees",
 46 | 				name: "Fees Records", icon: "circle", component: FeesRecords,
 47 | 				title: "Record installments of fee payment, search reciepts, generate reports",
 48 | 			},
 49 | 			{
 50 | 				path: "/transactions",
 51 | 				name: "Transactions", icon: "circle",
 52 | 				title: "Record expenses and revenue and generate reports",
 53 | 			}
 54 | 
 55 | 		]
 56 | 	},
 57 | 	{
 58 | 		group: "INVENTORY",
 59 | 		routes: [
 60 | 			{
 61 | 				path: "/books",
 62 | 				name: "Books", icon: "book",
 63 | 				title: "View, add and record stock of books",
 64 | 				params: [{ param: '/:id/:new?', name: 'New Book,Edit Book,Book Info', component: PageTwo }],
 65 | 				subRoutes: [
 66 | 					{
 67 | 						path: "/issueBooks",
 68 | 						name: "Issue Books", icon: "circle",
 69 | 						title: "Record books given to students"
 70 | 					},
 71 | 					{
 72 | 						path: "/newStock",
 73 | 						name: "New Stock", icon: "circle",
 74 | 						title: "Record books recieved"
 75 | 					}
 76 | 				]
 77 | 			}
 78 | 			, {
 79 | 				path: "/Past Questions",
 80 | 				name: "Past Questions", icon: "book",
 81 | 				title: "Manage past examination questions",
 82 | 			}
 83 | 		]
 84 | 	},
 85 | 	{
 86 | 		group: "ACADEMICS",
 87 | 		routes: [
 88 | 			{
 89 | 				path: "/courses",
 90 | 				name: "Courses", icon: "atom",
 91 | 				title: "View, create, manage, assign and schedule courses",
 92 | 				params: [{ param: '/:id/:new?', name: 'New Course,Edit Course,Course Info', component: PageOne }],
 93 | 			}, {
 94 | 				path: "/programmes",
 95 | 				name: "Programmes", icon: "certificate",
 96 | 				title: "View, create and manage programmes",
 97 | 				params: [{ param: '/:id/:new?', name: 'New Programme,Edit Programme,Programme Info', component: PageOne }],
 98 | 			}]
 99 | 	},
100 | 	{
101 | 		group: "PEOPLE",
102 | 		routes: [{
103 | 			path: "/messages",
104 | 			name: "Messsages", icon: "message",
105 | 			title: "Communicate with people, resolve issues and complains, address sugggestions"
106 | 		},
107 | 		{
108 | 			path: "/students",
109 | 			name: "Students", icon: "student",
110 | 			title: "View and manage students data", component: AllStudents,
111 | 			params: [{ param: '/:id/:new?', name: 'Register Student,Edit Student,Student Profile', component: RegisterStudent }]
112 | 		}, {
113 | 			path: "/teachers",
114 | 			name: "Lecturers", icon: "teacher",
115 | 			title: "View and manage teachers data",
116 | 			params: [{ param: '/:id/:new?', name: 'New Lecturer,Edit Lecturer,Lecturer Profile', component: PageOne }],
117 | 			subRoutes: [
118 | 				{
119 | 					path: '/manage-schedule',
120 | 					name: 'Manage Schedule',
121 | 				}
122 | 			]
123 | 		}, {
124 | 			path: "/staff",
125 | 			name: "Staff", icon: "staff",
126 | 			title: "View and manage staff data",
127 | 			params: [{ param: '/:id/:new?', name: 'New Lecturer,Edit Lecturer,Lecturer Profile', component: PageOne }],
128 | 		}]
129 | 	}, {
130 | 		group: "SCHEDULE",
131 | 		routes: [
132 | 			{
133 | 				path: "/timetable",
134 | 				name: "Timetable", icon: "clock",
135 | 				title: "organise lecturers for the acadaemic year",
136 | 			}, {
137 | 				path: "/events",
138 | 				name: "Events", icon: "calendar",
139 | 				title: "Create and management events",
140 | 				params: [{ param: '/:id/:new?', name: 'New Event,Edit Event,Event Details', component: PageOne }],
141 | 			},
142 | 			{
143 | 				path: "/todos",
144 | 				name: "Todos", icon: "check_square",
145 | 				title: "Create reminders for important things to be done",
146 | 				params: [{ param: '/:id/:new?', name: 'New Todo,Edit Todo,View Todos', component: PageOne }]
147 | 			}]
148 | 	},
149 | ]
150 | 
151 | 
152 | export const Menu = MenuList;


--------------------------------------------------------------------------------
/src/lib/chip_input/ChipInput.svelte:
--------------------------------------------------------------------------------
  1 | <script lang="typescript">
  2 |   import { SVG } from '../../assets/svgs';
  3 |   import Chip from './Chip.svelte';
  4 |   import { createEventDispatcher, onMount } from 'svelte';
  5 |   const dispatch = createEventDispatcher();
  6 |   let active = false;
  7 |   let float = false;
  8 |   // default classes
  9 |   export let id = '';
 10 |   export let name = '';
 11 |   export let label = '';
 12 |   export let placeholder = '';
 13 |   export let value = '';
 14 |   export let hint = '';
 15 |   export let type = 'text';
 16 |   export let min = 0;
 17 |   export let max = 10000000;
 18 |   export let step = 1;
 19 |   export let readonly = false;
 20 |   export let colors = ['comet', 'primary', 'cadetblue']; //bg, focus, blur
 21 |   export let width = 'w-full';
 22 |   export let items = ['Item One'  ];
 23 |   export let variant = 'outlined'; //|"standard" | "normal"
 24 |   export let startIcon = false;
 25 |   export let endIcon = false;
 26 |   export let validators = [];
 27 |   export let onInput = null;
 28 |   export let onFocus = null;
 29 |   export let onBlur = null;
 30 |   export let onStartIconClicked = null;
 31 |   export let onEndIconClicked = null;
 32 |   // use these if you want to take control
 33 |   export const wrapperClass = 'mb-5';
 34 |   export const inputClass = ``;
 35 |   export const labelClass = '';
 36 |   export const hintClass = 'text-red-600';
 37 |   export const iconsClass = '';
 38 |   export const leadingIconClass = active
 39 |     ? ` text-${colors[1]} `
 40 |     : ` text-${colors[2]} `;
 41 |   export const trailingIconClass = active
 42 |     ? ` text-${colors[1]} `
 43 |     : ` text-${colors[2]} `;
 44 |   $: {
 45 |     /*  run validators*/
 46 |     validators.forEach(v => {
 47 |       console.log(v);
 48 |     });
 49 |   }
 50 | 
 51 |   let h, top;
 52 |   $: {
 53 |     top = Math.trunc(h / 8) - 2;
 54 |     console.log('height', h, top);
 55 |   }
 56 |   let variantStyle;
 57 |   $: {
 58 |     variantStyle =
 59 |       variant === 'outlined'
 60 |         ? `border-solid rounded ${active ? ' border-2 ' : ' border '}`
 61 |         : variant === 'standard'
 62 |         ? `border-t-0 border-l-0 border-r-0 border-b bg-${colors[0]} 
 63 |              ${active ? ' border-b-2 ' : ' border-b '} ${
 64 |             h < 49 ? ' pt-2 ' : ''
 65 |           }`
 66 |         : `border-solid rounded bg-${colors[0]}  ${
 67 |             active ? ' border-2 ' : ' border '
 68 |           }`;
 69 |   }
 70 | </script>
 71 | 
 72 | <!-- -->
 73 | <div class=" {width} {wrapperClass}">
 74 |   {#if variant === 'normal'}
 75 |     <label
 76 |       for="{id}"
 77 |       class="pl-1 text-xs select-none text-{active ? colors[1] : colors[2]}"
 78 |     >
 79 |       {label}
 80 |     </label>
 81 |   {/if}
 82 |   <div bind:clientHeight="{h}"
 83 |     class="{variantStyle} text-{colors[2]}
 84 |    {active ? `border-${colors[1]}` : variant === 'normal' ? ` border-transparent` : ` border-${colors[2]}`}"
 85 |   >
 86 |     {#if startIcon}
 87 |       <span
 88 |         class="absolute select-none top-{top} left-1 {active ? `text-${colors[1]}` : `text-${colors[2]}`}
 89 |         {iconsClass}
 90 |         {leadingIconClass}"
 91 |         on:click="{() => {
 92 |           dispatch('iconClicked', { icon: 'first' });
 93 |           if (onStartIconClicked) onStartIconClicked();
 94 |         }}"
 95 |       >
 96 |         <slot name="startIcon">
 97 |           <!--Add your icon here -->
 98 |         </slot>
 99 |       </span>
100 |     {/if}
101 |     {#if variant !== 'normal'}
102 |       <label
103 |         for="{id}"
104 |         class=" select-none leading-none absolute top-{top} text-sm {startIcon ? 'left-8' : 'left-1'}
105 |         inline-block w-auto m-0 px-2 py-0 origin-center transition duration-300
106 |         bg-{colors[0]} bg-transparent {float ? `transform translate-x-0 -translate-y-${variant === 'outlined' ? top + 2 : top - 1} scale-90 ` : ''}
107 |         {active ? `text-${colors[1]}` : `text-${colors[2]}`}
108 |         {labelClass}"
109 |       >
110 |         {label}
111 |       </label>
112 |     {/if}
113 |     <div  class="flex flex-wrap items-center mt-2 ml-2">
114 |       {#each items as i}
115 |         <Chip classNames="mr-2 mb-2">{i}</Chip>
116 |       {/each}
117 |       <input
118 |         {id}
119 |         {name}
120 |         {min}
121 |         {max}
122 |         {step}
123 |         {type}
124 |         {readonly}
125 |         autocomplete="off"
126 |         placeholder="{variant === 'normal' ? placeholder : ''}"
127 |         on:blur="{() => {
128 |           active = false;
129 |           float = items !== [];
130 |           dispatch('blur');
131 |           if (onBlur) onBlur();
132 |         }}"
133 |         on:input="{e => {
134 |           value = e.target.value;
135 |           dispatch('input');
136 |           if (onInput) onInput();
137 |         }}"
138 |         on:focus="{() => {
139 |           active = true;
140 |           float = true;
141 |           dispatch('focus');
142 |           if (onFocus) onFocus();
143 |         }}"
144 |         class=" block h-6 {startIcon ? 'pl-10' : 'px-4'}
145 |         {endIcon ? 'pr-10' : 'px-4'} m-0 w-auto leading-none transition
146 |         duration-300 ease-in-out bg-transparent outline-none border-none {inputClass}"
147 |       />
148 |     </div>
149 | 
150 |     {#if endIcon}
151 |       <span
152 |         class="absolute select-none top-{top} right-2 {active ? `text-${colors[1]}` : `text-${colors[2]}`}
153 |         {iconsClass}
154 |         {trailingIconClass}"
155 |         on:click="{() => {
156 |           dispatch('iconClicked', { icon: 'last' });
157 |           if (onEndIconClicked) onEndIconClicked();
158 |         }}"
159 |       >
160 |         <slot name="endIcon">
161 |           <!--Add your icon here -->
162 |         </slot>
163 |       </span>
164 |     {/if}
165 |   </div>
166 |   {#if hint !== ''}
167 |     <div class="block mx-3 py-1 text-xs select-none truncate {hintClass}">
168 |       <p>{hint}</p>
169 |     </div>
170 |   {/if}
171 | </div>
172 | 


--------------------------------------------------------------------------------
/src/lib/chip_input/ChipsInput.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 |   import Chip from './Chip.svelte';
  3 |   import alasql from 'alasql';
  4 |   import { fromJS, updateIn } from 'immutable';
  5 |   import { createEventDispatcher } from 'svelte';
  6 | 
  7 |   const dispatch = createEventDispatcher();
  8 | 
  9 |   // TODO: Check options for duplicates
 10 |   export let options = [];
 11 |   export let id = '';
 12 |   export let name = '';
 13 |   export let label = 'Your label';
 14 |   export let placeholder = '';
 15 |   export let selectedItems = [];
 16 |   export let color = 'primary';
 17 |   export let inactiveColor = 'gray-400';
 18 |   export let wrapperClass = '';
 19 |   export let labelClass = '';
 20 |   export let inputClass = '';
 21 |   export let error = '';
 22 |   export let validators = [];
 23 |   export let callback = null;
 24 | 
 25 |   let active = false;
 26 |   let isShowing = false;
 27 |   let hovering = false;
 28 |   let arrowUpDown = false;
 29 |   let highligthedOption = {};
 30 |   let input = '';
 31 |   let lastIndex = 0;
 32 |   const tempHolder = placeholder;
 33 |   let filteredOptions = [];
 34 |   let dropOptions = ["Item One", "Item Two"];
 35 |   let defaultLabelStyle =
 36 |     'top: 0.75em; left: 0.75em; transition: transform 0.25s, opacity 0.25s, padding 0.25s ease-in-out; transform-origin: 0 0;';
 37 |   let floatingState =
 38 |     'z-index: 2500; transform: translate(0, -2em) scale(0.9);';
 39 |   let defaultLabelClass =
 40 |     'bg-white text-gray-600 select-none   leading-none  absolute block p-6 w-auto m-0';
 41 |   let normalLabelClass = ' z-1500 bg-white ';
 42 |   let floatingLabelClass = 'z-2500  px-1 pt-3 pb-0 text-sm';
 43 |   let defaultInputClass =
 44 |     ' m-0  px-6  py-4  h-20 w-full  transition   duration-300 ease-in-out overflow-y-auto block z-2000 leading-none relative outline-none bg-white border border-solid rounded-md  ';
 45 | 
 46 |   function addSelectedItem(value) {
 47 |     try {
 48 |       let count = alasql(
 49 |         'VALUE OF SELECT  COUNT(title) FROM ? WHERE title LIKE ? ',
 50 |         [selectedItems, `%${value.title}%`]
 51 |       );
 52 |       if (count === 0) {
 53 |          dispatch('item-added', {
 54 |             _id: value._id,
 55 |             title: value.title
 56 |           });
 57 |         selectedItems = [...selectedItems, value];
 58 |       }
 59 |       blurInput();
 60 |     } catch (error) {
 61 |       console.log(`Adding selected option failed... Error: ${error}`);
 62 |     }
 63 |   }
 64 | 
 65 |   function removeChip(event) {
 66 |     try {
 67 |       const title = event.target.innerText;
 68 |       for (var index = 0; index < selectedItems.length; index++) {
 69 |         if (selectedItems[index].title === title) {
 70 |           dispatch('item-removed', {
 71 |             _id: selectedItems[index]._id,
 72 |             title: selectedItems[index].title
 73 |           });
 74 |           selectedItems = [
 75 |             ...selectedItems.slice(0, index),
 76 |             ...selectedItems.slice(index + 1)
 77 |           ];
 78 |         }
 79 |       }
 80 |     } catch (error) {
 81 |       console.log(`Removing selected item failed... Error: ${error}`);
 82 |     }
 83 |   }
 84 | 
 85 |   function handleFocus(data) {
 86 |     try {
 87 |       let div = document.getElementById(data.id);
 88 |       div.focus();
 89 |       div.contentEditable = true;
 90 |       div.innerText.trim;
 91 |       input = '';
 92 |       active = true;
 93 |       isShowing =
 94 |         elementExists('drop-down-wrapper') && filteredOptions.length > 0;
 95 |     } catch (error) {
 96 |       console.log(`Setting focus on input failed... Error: ${error}`);
 97 |     }
 98 |   }
 99 | 
100 |   function inputHandler(event) {
101 |     try {
102 |       active = true;
103 |       const keyName = event.key;
104 |       if (keyName === 'Enter') {
105 |         if (arrowUpDown) addSelectedItem(highligthedOption);
106 |         else addSelectedItem(dropOptions[0]);
107 |       } else if (keyName === 'ArrowUp') {
108 |         arrowUpDown = true;
109 |         event.stopPropagation();
110 |         event.preventDefault();
111 |         let children = document.getElementById('drop-down-wrapper').children;
112 |         for (let i = lastIndex - 1; i >= 0; i--) {
113 |           highligthedOption = dropOptions[i];
114 |           const child = children[i];
115 |           const prevChild = i > 4 ? children[5] : children[i + 1];
116 |           child.classList.add('bg-blue-200');
117 |           prevChild.classList.remove('bg-blue-200');
118 |           if (i > 0) lastIndex--;
119 |           break;
120 |         }
121 |       } else if (keyName === 'ArrowDown') {
122 |         arrowUpDown = true;
123 |         let children = document.getElementById('drop-down-wrapper').children;
124 |         for (let i = lastIndex; i < children.length; i++) {
125 |           if (i < children.length - 1) lastIndex++;
126 |           const child = children[i];
127 |           highligthedOption = dropOptions[i];
128 |           const prevChild = children[i - 1];
129 |           child.classList.add('bg-blue-200');
130 |           prevChild.classList.remove('bg-blue-200');
131 |           break;
132 |         }
133 |       } else if (keyName === 'Escape') {
134 |         blurInput();
135 |       }
136 |     } catch (error) {
137 |       console.log(`Keydown Handler on input failed... Error: ${error}`);
138 |     }
139 |   }
140 | 
141 |   // Sets the placeholder
142 |   $: {
143 |     if (!active) placeholder = label;
144 |     else placeholder = tempHolder;
145 |   }
146 | 
147 |   //Show the placeholder
148 |   $: {
149 |     if (
150 |       !active &&
151 |       selectedItems.length < 1 &&
152 |       (input === ',' || input === '')
153 |     ) {
154 |       input = placeholder;
155 |     } else if (
156 |       active &&
157 |       (input.includes(label) ||
158 |         input.includes(placeholder) ||
159 |         input.includes(tempHolder))
160 |     ) {
161 |       input = input.replace(label, '');
162 |       input = input.replace(tempHolder, '');
163 |     }
164 |   }
165 | 
166 |   $: {
167 |     /*  run validators*/
168 |     validators.forEach(v => {
169 |       console.log(v);
170 |     });
171 |   }
172 | 
173 |   //Fliter options for drop down
174 |   $: {
175 |     try {
176 |       if (active) {
177 |         filteredOptions = [];
178 |         options.forEach(option => {
179 |           var count = alasql(
180 |             'VALUE OF SELECT COUNT(title) FROM ? WHERE title === ? ',
181 |             [selectedItems, option.title]
182 |           );
183 |           if (count === 0) filteredOptions = [...filteredOptions, option];
184 |         });
185 |       }
186 |       if (input === '') dropOptions = filteredOptions;
187 |       else
188 |         dropOptions = alasql('SELECT _id, title  FROM ? WHERE title LIKE ? ', [
189 |           filteredOptions,
190 |           `%${input}%`
191 |         ]);
192 |     } catch (error) {
193 |       console.log(`Filtering options failed... Error: ${error}`);
194 |     }
195 |   }
196 | 
197 |   function elementExists(id) {
198 |     try {
199 |       let e = document.getElementById(id);
200 |       return e !== null;
201 |     } catch (err) {
202 |       console.log(`elementExists failed... Error: ${error}`);
203 |     }
204 |   }
205 | 
206 |   function blurInput() {
207 |     let div = document.getElementById(id);
208 |     div.blur();
209 |     div.contentEditable = false;
210 |     active = hovering = arrowUpDown = false;
211 |     highligthedOption = {};
212 |   }
213 | </script>
214 | 
215 | <div id="wrapper" class="relative flex my-2 {wrapperClass} ">
216 |   <div
217 |     on:click="{handleFocus({ id })}"
218 |     class="
219 |     {defaultInputClass}
220 |     {active ? 'border-primary' : 'border-gray-400'}
221 |     {inputClass}"
222 |   >
223 |     {#each selectedItems as item}
224 |       <slot>
225 |         <Chip id="{item._id}" on:click="{removeChip}">{item.title}</Chip>
226 |       </slot>
227 |     {/each}
228 |     <!-- Editable div -->
229 |     <div
230 |       {id}
231 |       {name}
232 |       contenteditable="true"
233 |       class="inline-flex {active ? '' : 'pt-4'} pr-8 outline-none text-{inactiveColor}
234 |       focus:text-{color}"
235 |       bind:innerHTML="{input}"
236 |       on:focus="{() => (active = true)}"
237 |       on:blur="{() => {
238 |         if (!hovering && (!isShowing || input === '')) blurInput();
239 |       }}"
240 |       on:keydown="{event => inputHandler(event)}"
241 |       on:input="{() => {
242 |         if (callback !== null) callback();
243 |       }}"
244 |     ></div>
245 |   </div>
246 | 
247 |   <label
248 |     for="{id}"
249 |     class="{defaultLabelClass}
250 |     {active ? floatingLabelClass : normalLabelClass}
251 |     {labelClass}
252 |     "
253 |     style="{defaultLabelStyle}
254 |     {active ? floatingState : normalLabelClass}"
255 |   >
256 |     {active ? label : placeholder}
257 |   </label>
258 |   {#if error !== ''}
259 |     <div class="block">
260 |       <p class="py-1 text-xs text-center text-red-600 ">{error}</p>
261 |     </div>
262 |   {/if}
263 | 
264 |   <!-- Adding drop down list -->
265 |   {#if active && dropOptions.length > 0}
266 |     <div
267 |       id="drop-down-wrapper"
268 |       class="absolute inset-x-0 block h-32 overflow-y-auto bg-white border shadow-md mt-21 border-b-solid rounded-b-md z-2500 "
269 |     >
270 |       {#each dropOptions as item, index (item._id)}
271 |         <p
272 |           id="{item._id}"
273 |           class="px-4 py-2 font-sans text-sm font-normal hover:bg-gray-200 focus:bg-primary"
274 |           on:click="{() => {
275 |             addSelectedItem({ _id: item._id, title: item.title });
276 |           }}"
277 |           on:mouseover="{() => (hovering = true)}"
278 |         >
279 |           {item.title}
280 |         </p>
281 |       {/each}
282 | 
283 |     </div>
284 |   {/if}
285 | </div>
286 | 


--------------------------------------------------------------------------------
/src/lib/input_field/TextField.svelte:
--------------------------------------------------------------------------------
  1 | <script>
  2 |   import { formatDate } from './DateFormatter';
  3 |   import { SVG } from '../../assets/svgs';
  4 |   import { fly } from 'svelte/transition';
  5 |   import { onMount, tick, createEventDispatcher } from 'svelte';
  6 |   import Calendar from '../calendar/Calendar.svelte';
  7 |   let dispatch = createEventDispatcher();
  8 |   // externals
  9 |   export let id = 'textField';
 10 |   export let name = 'textField';
 11 |   export let label = 'Label';
 12 |   export let type = 'text'; //  typeahead| number | date
 13 |   export let value = '';
 14 |   export let items = [];
 15 |   export let multiple = true;
 16 |   export let selected = [];
 17 |   export let filteredItems = [];
 18 |   export let placeholder = '';
 19 |   export let hint = '';
 20 |   export let passwordChar = '•';
 21 |   export let min = 0;
 22 |   export let max = 10000000;
 23 |   export let step = 1;
 24 |   export let width = 'w-20p';
 25 |   export let height = 'h-10';
 26 |   export let margin = 'mb-4';
 27 |   export let readonly = false;
 28 |   export let variant = 'outlined'; // material  default |
 29 |   export let datePattern = 'do MMMM, yyyy';
 30 |   export let startIcon = false;
 31 |   export let endIcon = false;
 32 |   // internals
 33 |   export let active = false;
 34 |   export let dropdown = false;
 35 |   export let float = false;
 36 | 
 37 |   let variantClasses = '';
 38 |   let wrapperColors = '';
 39 |   let inputColors = '';
 40 |   let labelColors = '';
 41 |   let labelClass = '';
 42 | 
 43 |   let colors = {
 44 |     activeText: 'text-primary',
 45 |     inactiveText: 'text-cadetblue',
 46 |     activeLabel: 'text-primary',
 47 |     inactiveLabel: 'text-cadetblue',
 48 |     activeBorder: 'border-primary',
 49 |     inactiveBorder: 'border-cadetblue',
 50 |     activeBg: variant === 'outlined' ? 'bg-haiti' : 'bg-comet',
 51 |     inactiveBg: variant === 'outlined' ? 'bg-haiti' : 'bg-comet',
 52 |     hover: variant === 'outlined' ? 'bg-comet' : 'bg-haiti',
 53 |   };
 54 | 
 55 |   // internal counter
 56 |   let currentIndex = 0;
 57 |   let widget = null;
 58 |   let fullHeight, labelHeight, iconWidth, labelTop, xy;
 59 | 
 60 |   // add focus and blur evvents listeners
 61 |   onMount(() => {
 62 |     value = '';
 63 |     widget.addEventListener('focus', onFocus, true);
 64 |     widget.addEventListener('blur', onBlur, true);
 65 |   });
 66 | 
 67 |   // extract colors
 68 |   $: {
 69 |     inputColors = active ? `${colors.activeText}` : `${colors.inactiveText}`;
 70 |     wrapperColors = active
 71 |       ? `${colors.activeBorder} ${colors.activeBg} ${colors.activeText}`
 72 |       : `${colors.inactiveBorder} ${colors.inactiveBg} ${colors.inactiveText}`;
 73 |     labelColors = active
 74 |       ? `${colors.activeLabel} ${colors.activeBg} `
 75 |       : `${colors.inactiveLabel} ${colors.inactiveBg} `;
 76 |   }
 77 | 
 78 |   $: {
 79 |     variantClasses =
 80 |       variant === 'default'
 81 |         ? `border border-haiti rounded`
 82 |         : variant === 'material'
 83 |         ? `border-0 ${dropdown ? ' border-b-2 ' : ' border-b '}`
 84 |         : `rounded ${
 85 |             dropdown
 86 |               ? type === 'typeahead'
 87 |                 ? 'border-2 border-b-0'
 88 |                 : ' border-2 '
 89 |               : ' border '
 90 |           }`;
 91 |   }
 92 | 
 93 |   $: {
 94 |     // find the midHeight by subtracting midFullHeight - midLabelHeight
 95 |     labelTop = fullHeight / 2 - labelHeight / 2;
 96 |     xy = float
 97 |       ? `-${startIcon ? iconWidth - 6 : 0}px,-${
 98 |           variant === 'outlined' ? labelTop + 8 : labelTop
 99 |         }px`
100 |       : ``;
101 |   }
102 | 
103 |   $: {
104 |     labelClass = float
105 |       ? `text-xs ${variant === 'material' ? 'bg-opacity-0' : 'bg-opacity-100'}`
106 |       : ``;
107 |   }
108 | 
109 |   function onFocus() {
110 |     active = true;
111 |     float = true;
112 |     if (type === 'typeahead') filterItems();
113 |     if (type === 'date') toggleDropDown();
114 |   }
115 | 
116 |   function onBlur() {
117 |     active = false;
118 |     dropdown = false;
119 |     float = value !== '';
120 |   }
121 | 
122 |   function onInput(e) {
123 |     type === 'typeahead'
124 |       ? filterItems()
125 |       : type === 'password'
126 |       ? parseValue()
127 |       : null;
128 |   }
129 | 
130 |   function parseValue() {
131 |     let temp = value;
132 |     switch (type) {
133 |       case 'password':
134 |         value = value.replace(/./g, passwordChar);
135 |         break;
136 |       case 'date':
137 |         value = selected
138 |           .map((d) => {
139 |             let s = `${d}`.split('/');
140 |             return formatDate(s[2], s[1], s[0], datePattern);
141 |           })
142 |           .join(', ');
143 |         break;
144 |     }
145 |   }
146 | 
147 |   function filterItems(open = true) {
148 |     currentIndex = 0;
149 |     if (value.length < 1 || value === '') {
150 |       filteredItems = items.slice();
151 |     } else {
152 |       filteredItems = items.filter((i) => {
153 |         if (typeof items[0] === 'object')
154 |           return (
155 |             strLowerCase(i.value).includes(strLowerCase(value)) ||
156 |             strLowerCase(i.label).includes(strLowerCase(value)) ||
157 |             strLowerCase(i.id).includes(strLowerCase(value))
158 |           );
159 |         else return strLowerCase(i).includes(strLowerCase(value));
160 |       });
161 |     }
162 |     if (open) dropdown = filteredItems.length > 0;
163 |   }
164 | 
165 |   function strLowerCase(val) {
166 |     if (val) return val.toString().trim().toLowerCase();
167 |   }
168 | 
169 |   function onKeyDown(event) {
170 |     const keyName = event.key;
171 |     if (keyName === 'ArrowUp') {
172 |       if (currentIndex > 0) {
173 |         --currentIndex;
174 |         if (dropdown) scrollDropDown(false);
175 |         onItemSelected(currentIndex, false);
176 |       }
177 |     } else if (keyName === 'ArrowDown') {
178 |       if (currentIndex < filteredItems.length - 1) {
179 |         ++currentIndex;
180 |         if (dropdown) scrollDropDown(true);
181 |         onItemSelected(currentIndex, false);
182 |       }
183 |     } else if (keyName === 'Enter') {
184 |       if (dropdown) onItemSelected(currentIndex);
185 |     } else if (keyName === 'Escape' && dropdown) dropdown = false;
186 |   }
187 | 
188 |   function scrollDropDown(scrollDown = false) {
189 |     let id = filteredItems[currentIndex].id
190 |       ? filteredItems[currentIndex].id
191 |       : currentIndex;
192 |     let listItem = document.getElementById(id);
193 |     let dropdownDiv = document.getElementById('dropdown');
194 |     if (scrollDown) dropdownDiv.scrollTop += listItem.clientHeight;
195 |     else dropdownDiv.scrollTop -= listItem.clientHeight;
196 |   }
197 | 
198 |   function onItemSelected(index, close = true) {
199 |     let itm = filteredItems[index];
200 |     value = typeof itm === 'object' ? (itm.label ? itm.label : itm.value) : itm;
201 |     selected = itm;
202 |     if (close) dropdown = false;
203 |   }
204 | 
205 |   function toggleDropDown() {
206 |     dropdown = !dropdown;
207 |   }
208 | 
209 |   function onDateSelected(e) {
210 |     if (e.detail.isSelected) {
211 |       selected = multiple
212 |         ? addDate(e.detail.date)
213 |         : (selected = [e.detail.date]);
214 |     } else {
215 |       selected = multiple ? removeDate(e.detail.date) : (selected = []);
216 |     }
217 |     parseValue();
218 |     if (!multiple) dropdown = false;
219 |   }
220 | 
221 |   function addDate(item) {
222 |     let index = selected.findIndex((x) => x.includes(item));
223 |     return index == -1 ? [...selected, item] : selected.slice();
224 |   }
225 | 
226 |   function removeDate(item) {
227 |     let index = selected.findIndex((x) => x.includes(item));
228 |     return index > -1
229 |       ? selected.slice(0, index).concat(selected.slice(index + 1))
230 |       : selected.slice();
231 |   }
232 | </script>
233 | 
234 | <!-- wrapper div -->
235 | <div
236 |   bind:this="{widget}"
237 |   bind:clientHeight="{fullHeight}"
238 |   on:keydown|stopPropagation="{onKeyDown}"
239 |   class="{width}
240 |   {margin}"
241 | >
242 |   {#if variant === 'default'}
243 |     <label
244 |       for="{id}"
245 |       class="block text-sm select-none px-1 transition duration-300 {active ? 'text-primary' : 'text-cadetblue'}"
246 |     >
247 |       {label}
248 |     </label>
249 |   {/if}
250 | 
251 |   <div
252 |     id="textField"
253 |     class="relative inline-flex w-full {variantClasses}
254 |     {wrapperColors}"
255 |     on:focus="{onFocus}"
256 |     on:blur="{onBlur}"
257 |   >
258 |     <!-- inner div -->
259 |     <div class="inline-flex items-center w-full">
260 |       <!-- left icon -->
261 |       {#if startIcon}
262 |         <span
263 |           bind:clientWidth="{iconWidth}"
264 |           on:click
265 |           class="inline-flex items-center h-full px-2 cursor-pointer"
266 |         >
267 |           <slot name="startIcon">
268 |             {@html SVG('home', 'w-4 h-4')}
269 |           </slot>
270 |         </span>
271 |       {/if}
272 | 
273 |       <!-- input and label div -->
274 |       <div class="relative inline-flex items-center w-full">
275 |         <input
276 |           {id}
277 |           {name}
278 |           {min}
279 |           {max}
280 |           {step}
281 |           {readonly}
282 |           placeholder="{variant === 'default' ? placeholder : ''}"
283 |           autocomplete="off"
284 |           type="text"
285 |           bind:value
286 |           on:input="{onInput}"
287 |           class="{inputColors}
288 |           {height} w-full flex-1 select-text bg-transparent leading-none
289 |           border-none outline-none px-2"
290 |         />
291 | 
292 |         {#if variant !== 'default'}
293 |           <label
294 |             bind:clientHeight="{labelHeight}"
295 |             for="{id}"
296 |             style="{float ? ` transform: translate(${xy}); ` : ''}"
297 |             class="absolute select-none px-1 mx-2 transition duration-300 {labelColors}
298 |             {labelClass}"
299 |           >
300 |             {label}
301 |           </label>
302 |         {/if}
303 |       </div>
304 |       <!-- right icon -->
305 |       {#if endIcon || type === 'typeahead' || type === 'date'}
306 |         <span class="inline-flex items-center h-full px-2 cursor-pointer">
307 |           <slot name="endIcon">
308 |             {@html SVG('chevron_right', `w-5 h-5 transition duration-300 transform ${dropdown ? 'rotate-90' : '-rotate-90'} `)}
309 |           </slot>
310 |         </span>
311 |       {/if}
312 |       {#if hint !== ''}
313 |         <p class="py-1 mx-3 text-xs truncate select-none ">{hint}</p>
314 |       {/if}
315 |     </div>
316 |     <!-- dropdown -->
317 |     {#if dropdown}
318 |       <div
319 |         in:fly="{{ y: -10, duration: 200 }}"
320 |         out:fly="{{ y: 0, duration: 200 }}"
321 |         style="{type === 'date' ? 'top: 120%;' : 'top:95%;'}
322 |         {variant === 'outlined' ? 'left: -2px; right: -2px;' : 'left:0px; right:0px;'}
323 |         {type === 'date' ? 'right:auto;' : ''}"
324 |         class="absolute text-sm truncate z-10 {variant === 'default' ? 'border-0 border-haiti rounded' : variant === 'material' ? 'border-0' : type === 'date' ? ' border-2 rounded' : ' border-2 border-t-0 rounded'}
325 |         pb-1 pt-2 {wrapperColors} cursor-pointer pr-1"
326 |       >
327 |         <!-- typeahead options -->
328 |         {#if type === 'typeahead'}
329 |           <div
330 |             class="w-full overflow-x-hidden overflow-y-auto max-h-50"
331 |             id="dropdown"
332 |           >
333 |             {#each filteredItems as f, i (i)}
334 |               <slot>
335 |                 <p
336 |                   id="{f.id ? f.id : i}"
337 |                   on:mousedown="{onItemSelected(i)}"
338 |                   class="truncate hover:{colors.hover} pl-4 {currentIndex === i ? colors.hover : ''}"
339 |                 >
340 |                   {f}
341 |                 </p>
342 |               </slot>
343 |             {/each}
344 |           </div>
345 |         {:else if type === 'date'}
346 |           <Calendar on:dateselected="{onDateSelected}" />
347 |         {/if}
348 | 
349 |       </div>
350 |     {/if}
351 |   </div>
352 | 
353 | </div>
354 | 
355 | <!--  onSelected={(e)=>parseValue(type,e.details.value)} -->
356 | <!--   on:click|stopPropagation|preventDefault="{() => {
357 |             active = active ? false : true;
358 |             float = active ? true : value === '' ? false : true;
359 |             if (type === 'typeahead') filterItems(false);
360 |             toggleDropDown();
361 |           }}" -->
362 | 


--------------------------------------------------------------------------------