generated from garrettmills/template-npm-typescript
parent
a238136d94
commit
bf581dc584
@ -0,0 +1,26 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<title>Test Page</title>
|
||||
<meta charset="utf-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<style>
|
||||
body {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
if ( typeof $ !== 'function' ) {
|
||||
window.$ = (...args) => document.querySelector(...args)
|
||||
}
|
||||
</script>
|
||||
<script src="dist/extollo-ui.dist.js" type="module"></script>
|
||||
</head>
|
||||
<body>
|
||||
<ex-session>{"app.name": "Extollo"}</ex-session>
|
||||
<ex-page-login></ex-page-login>
|
||||
</body>
|
||||
</html>
|
||||
@ -0,0 +1,69 @@
|
||||
import {ExComponent} from '../ExComponent.js'
|
||||
import {Attribute, Component, Element} from '../decorators.js'
|
||||
import {FormComponent} from '../form/Form.component.js'
|
||||
|
||||
@Component('ex-page-login')
|
||||
export class LoginPageComponent extends ExComponent {
|
||||
protected static styles = `
|
||||
<style>
|
||||
:host {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.container {
|
||||
padding-top: 200px;
|
||||
max-width: 500px;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.login-message {
|
||||
margin-bottom: 50px;
|
||||
}
|
||||
</style>
|
||||
`
|
||||
|
||||
protected static html = `
|
||||
<div class="container">
|
||||
<ex-page>
|
||||
<h1 class="app-name"></h1>
|
||||
<h2 class="login-message"></h2>
|
||||
<ex-form>
|
||||
<ex-input name="username" placeholder="Username" required></ex-input>
|
||||
<ex-input-password name="password" placeholder="Password" required></ex-input-password>
|
||||
<ex-submit label="Login"></ex-submit>
|
||||
</ex-form>
|
||||
</ex-page>
|
||||
</div>
|
||||
`
|
||||
|
||||
@Attribute()
|
||||
public message = 'Login to continue'
|
||||
|
||||
@Attribute()
|
||||
public formname = 'login'
|
||||
|
||||
@Element('h1.app-name')
|
||||
protected appNameEl!: HTMLHeadingElement
|
||||
|
||||
@Element('h2.login-message')
|
||||
protected loginMessageEl!: HTMLHeadingElement
|
||||
|
||||
@Element('ex-form')
|
||||
protected formEl!: FormComponent
|
||||
|
||||
render() {
|
||||
super.render()
|
||||
|
||||
const name = this.session().get('app.name')
|
||||
this.appNameEl.hidden = !name
|
||||
this.appNameEl.innerText = name
|
||||
|
||||
this.loginMessageEl.hidden = !this.message
|
||||
this.loginMessageEl.innerText = this.message
|
||||
|
||||
this.formEl.setAttribute('name', this.formname)
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,62 @@
|
||||
import {ExComponent} from '../ExComponent.js'
|
||||
import {Attribute, Component} from '../decorators.js'
|
||||
import {FormControl, FormField, FormData} from './types.js'
|
||||
|
||||
@Component('ex-form')
|
||||
export class FormComponent extends ExComponent implements FormControl {
|
||||
protected static html = `
|
||||
<style>
|
||||
slot {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container">
|
||||
<slot></slot>
|
||||
</div>
|
||||
`
|
||||
|
||||
protected fields: FormField[] = []
|
||||
|
||||
@Attribute()
|
||||
public name?: string
|
||||
|
||||
hasField(field: FormField): boolean {
|
||||
return this.fields.some(maybe => maybe.getFieldName() === field.getFieldName())
|
||||
}
|
||||
|
||||
registerField(field: FormField): void {
|
||||
this.fields.push(field)
|
||||
}
|
||||
|
||||
gather(): FormData {
|
||||
const data: FormData = {}
|
||||
|
||||
for ( const field of this.fields ) {
|
||||
data[field.getFieldName()] = field.getValue()
|
||||
}
|
||||
|
||||
return data
|
||||
}
|
||||
|
||||
processChanges(): void {
|
||||
for ( const field of this.fields ) {
|
||||
field.validate()
|
||||
}
|
||||
}
|
||||
|
||||
isValid(): boolean {
|
||||
let valid = true
|
||||
|
||||
for ( const field of this.fields ) {
|
||||
valid = field.validate() && valid
|
||||
}
|
||||
|
||||
return valid
|
||||
}
|
||||
|
||||
async submit(): Promise<void> {
|
||||
(3 + 4)
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,63 @@
|
||||
import {ExComponent} from '../ExComponent.js'
|
||||
import {Attribute, Component, Element} from '../decorators.js'
|
||||
|
||||
@Component('ex-submit')
|
||||
export class SubmitButtonComponent extends ExComponent {
|
||||
protected static styles = `
|
||||
<style>
|
||||
button {
|
||||
display: inline-block;
|
||||
padding: 7px 12px;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
white-space: nowrap;
|
||||
|
||||
background-color: var(--color-accent);
|
||||
color: var(--color-text-on-accent);
|
||||
border: 1px solid var(--color-accent-darkened);
|
||||
cursor: pointer;
|
||||
box-sizing: border-box;
|
||||
border-radius: 7px;
|
||||
|
||||
transition: background-color 0.1s linear;
|
||||
width: unset;
|
||||
font-size: 1em;
|
||||
}
|
||||
|
||||
button:active {
|
||||
background-color: var(--color-accent-darkened);
|
||||
}
|
||||
|
||||
.container {
|
||||
padding: 0 20px;
|
||||
text-align: right;
|
||||
}
|
||||
</style>
|
||||
`
|
||||
|
||||
protected static html = `
|
||||
<div class="container">
|
||||
<button type="submit"></button>
|
||||
</div>
|
||||
`
|
||||
|
||||
@Attribute()
|
||||
public label = 'Submit'
|
||||
|
||||
@Element('button[type=submit]')
|
||||
protected buttonEl!: HTMLButtonElement
|
||||
|
||||
mount() {
|
||||
super.mount()
|
||||
|
||||
this.buttonEl.addEventListener('click', () => {
|
||||
this.dispatchCustom('onSubmit', {})
|
||||
})
|
||||
}
|
||||
|
||||
render() {
|
||||
super.render()
|
||||
|
||||
this.buttonEl.innerText = this.label
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,28 @@
|
||||
import {TextInputFieldComponent} from './TextInputField.component.js'
|
||||
import {Component} from '../../decorators.js'
|
||||
|
||||
@Component('ex-input-email')
|
||||
export class EmailInputFieldComponent extends TextInputFieldComponent {
|
||||
public static validationRex = /^\s*[\w\-+_]+(\.[\w\-+_]+)*@[\w\-+_]+\.[\w\-+_]+(\.[\w\-+_]+)*\s*$/
|
||||
|
||||
protected static html = `
|
||||
<label>
|
||||
<span class="label"></span>
|
||||
<input class="input" type="email">
|
||||
<small class="error"></small>
|
||||
</label>
|
||||
`
|
||||
|
||||
validate(): boolean {
|
||||
if ( !super.validate() ) {
|
||||
return false
|
||||
}
|
||||
|
||||
if ( !String(this.getValue()).match(EmailInputFieldComponent.validationRex) ) {
|
||||
this.error = 'Value must be a valid e-mail address'
|
||||
return false
|
||||
}
|
||||
|
||||
return true
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,28 @@
|
||||
import {ExComponent} from '../../ExComponent.js'
|
||||
import {FormControl, FormField} from '../types.js'
|
||||
import {FormComponent} from '../Form.component.js'
|
||||
|
||||
export abstract class InputComponent extends ExComponent implements FormField {
|
||||
mount() {
|
||||
super.mount()
|
||||
this.control()?.registerField(this)
|
||||
}
|
||||
|
||||
protected control(): undefined | FormControl {
|
||||
let parent = this.parentElement
|
||||
|
||||
while ( parent ) {
|
||||
if ( parent instanceof FormComponent ) {
|
||||
return parent
|
||||
}
|
||||
|
||||
parent = parent.parentElement
|
||||
}
|
||||
}
|
||||
|
||||
abstract getFieldName(): string
|
||||
|
||||
abstract getValue(): any
|
||||
|
||||
abstract validate(): boolean
|
||||
}
|
||||
@ -0,0 +1,68 @@
|
||||
import {TextInputFieldComponent} from './TextInputField.component.js'
|
||||
import {Attribute, Component} from '../../decorators.js'
|
||||
|
||||
@Component('ex-input-number')
|
||||
export class NumberInputFieldComponent extends TextInputFieldComponent {
|
||||
protected static html = `
|
||||
<label>
|
||||
<span class="label"></span>
|
||||
<input class="input" type="number">
|
||||
<small class="error"></small>
|
||||
</label>
|
||||
`
|
||||
|
||||
@Attribute()
|
||||
public max?: number
|
||||
|
||||
@Attribute()
|
||||
public min?: number
|
||||
|
||||
@Attribute()
|
||||
public step?: number
|
||||
|
||||
render() {
|
||||
super.render()
|
||||
|
||||
const max = (!this.max && this.max !== 0) ? '' : String(this.max)
|
||||
this.inputEl.setAttribute('max', max)
|
||||
|
||||
const min = (!this.min && this.min !== 0) ? '' : String(this.min)
|
||||
this.inputEl.setAttribute('min', min)
|
||||
|
||||
const step = (!this.step && this.step !== 0) ? '' : String(this.step)
|
||||
this.inputEl.setAttribute('step', step)
|
||||
}
|
||||
|
||||
validate(): boolean {
|
||||
if ( !super.validate() ) {
|
||||
return false
|
||||
}
|
||||
|
||||
const num = this.getValue()
|
||||
if ( isNaN(num) ) {
|
||||
this.error = 'Value must be a number'
|
||||
return false
|
||||
}
|
||||
|
||||
if ( (this.max || this.max === 0) && num > this.max ) {
|
||||
this.error = `Value must be at most ${this.max}`
|
||||
return false
|
||||
}
|
||||
|
||||
if ( (this.min || this.min === 0) && num < this.min ) {
|
||||
this.error = `Value must be at least ${this.min}`
|
||||
return false
|
||||
}
|
||||
|
||||
if ( this.step && num % this.step !== 0 ) {
|
||||
this.error = `Value must be a multiple of ${this.step}`
|
||||
return false
|
||||
}
|
||||
|
||||
return true
|
||||
}
|
||||
|
||||
getValue(): number {
|
||||
return parseFloat(super.getValue())
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,62 @@
|
||||
import {TextInputFieldComponent} from './TextInputField.component.js'
|
||||
import {Component, Element} from '../../decorators.js'
|
||||
|
||||
@Component('ex-input-password')
|
||||
export class PasswordInputFieldComponent extends TextInputFieldComponent {
|
||||
protected static styles = `
|
||||
<style>
|
||||
.container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
</style>
|
||||
`
|
||||
|
||||
protected static html = `
|
||||
<div class="container">
|
||||
<label>
|
||||
<span class="label"></span>
|
||||
<input class="input" type="password">
|
||||
<small class="error"></small>
|
||||
</label>
|
||||
<label>
|
||||
<input class="input confirm" type="password">
|
||||
</label>
|
||||
</div>
|
||||
`
|
||||
|
||||
@Element('input.confirm')
|
||||
protected confirmEl!: HTMLInputElement
|
||||
|
||||
render() {
|
||||
super.render()
|
||||
|
||||
const hasConfirm = this.hasAttribute('confirmed')
|
||||
this.confirmEl.hidden = !hasConfirm
|
||||
|
||||
if ( hasConfirm ) {
|
||||
const label = this.label || this.placeholder
|
||||
this.confirmEl.setAttribute('placeholder', (label ? label + ' ' : '') + 'Confirmation')
|
||||
this.confirmEl.setAttribute('name', (this.name || this.uuid) + '_confirm')
|
||||
}
|
||||
|
||||
if ( this.hasAttribute('required') && hasConfirm ) {
|
||||
this.confirmEl.setAttribute('required', '1')
|
||||
} else {
|
||||
this.confirmEl.removeAttribute('required')
|
||||
}
|
||||
}
|
||||
|
||||
validate(): boolean {
|
||||
if ( !super.validate() ) {
|
||||
return false
|
||||
}
|
||||
|
||||
if ( this.hasAttribute('confirmed') && this.confirmEl.value !== this.getValue() ) {
|
||||
this.error = 'Confirmation does not match'
|
||||
return false
|
||||
}
|
||||
|
||||
return true
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,13 @@
|
||||
import {TextInputFieldComponent} from './TextInputField.component.js'
|
||||
import {Component} from '../../decorators.js'
|
||||
|
||||
@Component('ex-input-phone')
|
||||
export class PhoneInputFieldComponent extends TextInputFieldComponent {
|
||||
protected static html = `
|
||||
<label>
|
||||
<span class="label"></span>
|
||||
<input class="input" type="tel">
|
||||
<small class="error"></small>
|
||||
</label>
|
||||
`
|
||||
}
|
||||
@ -0,0 +1,19 @@
|
||||
import {TextInputFieldComponent} from './TextInputField.component.js'
|
||||
import {Component} from '../../decorators.js'
|
||||
|
||||
@Component('ex-input-search')
|
||||
export class SearchInputFieldComponent extends TextInputFieldComponent {
|
||||
protected static html = `
|
||||
<label>
|
||||
<span class="label"></span>
|
||||
<input class="input" type="search">
|
||||
<small class="error"></small>
|
||||
</label>
|
||||
`
|
||||
|
||||
render() {
|
||||
super.render()
|
||||
|
||||
this.inputEl.setAttribute('placeholder', `🔎︎ ${this.inputEl.getAttribute('placeholder') || ''}`)
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,105 @@
|
||||
import {Attribute, Component, Element} from '../../decorators.js'
|
||||
import {InputComponent} from './Input.component.js'
|
||||
|
||||
@Component('ex-input')
|
||||
export class TextInputFieldComponent extends InputComponent {
|
||||
protected static styles = `
|
||||
<style>
|
||||
label {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
small.error {
|
||||
margin-top: 3px;
|
||||
color: var(--color-danger);
|
||||
}
|
||||
</style>
|
||||
`
|
||||
|
||||
protected static html = `
|
||||
<label>
|
||||
<span class="label"></span>
|
||||
<input class="input" type="text">
|
||||
<small class="error"></small>
|
||||
</label>
|
||||
`
|
||||
|
||||
@Attribute()
|
||||
public name?: string
|
||||
|
||||
@Attribute()
|
||||
public placeholder?: string
|
||||
|
||||
@Attribute()
|
||||
public label?: string
|
||||
|
||||
@Attribute()
|
||||
public error?: string
|
||||
|
||||
@Attribute()
|
||||
public minlength?: string
|
||||
|
||||
@Attribute()
|
||||
public maxlength?: string
|
||||
|
||||
@Element('span.label')
|
||||
protected labelEl!: HTMLSpanElement
|
||||
|
||||
@Element('input.input')
|
||||
protected inputEl!: HTMLInputElement
|
||||
|
||||
@Element('small.error')
|
||||
protected errorEl!: HTMLElement
|
||||
|
||||
render() {
|
||||
super.render()
|
||||
|
||||
this.labelEl.innerText = this.label || ''
|
||||
this.inputEl.setAttribute('placeholder', this.placeholder || '')
|
||||
this.inputEl.setAttribute('name', this.name || this.uuid)
|
||||
|
||||
if ( this.hasAttribute('required') ) {
|
||||
this.inputEl.setAttribute('required', '1')
|
||||
} else {
|
||||
this.inputEl.removeAttribute('required')
|
||||
}
|
||||
|
||||
this.errorEl.hidden = !this.error
|
||||
this.errorEl.innerText = this.error || ''
|
||||
}
|
||||
|
||||
getFieldName(): string {
|
||||
return this.name || this.uuid
|
||||
}
|
||||
|
||||
getValue(): any {
|
||||
return this.inputEl.value
|
||||
}
|
||||
|
||||
validate(): boolean {
|
||||
const isValid = (
|
||||
!this.hasAttribute('required')
|
||||
|| this.getValue().trim()
|
||||
)
|
||||
|
||||
if ( !isValid ) {
|
||||
this.error = 'This field is required'
|
||||
} else {
|
||||
this.error = ''
|
||||
}
|
||||
|
||||
const min = parseInt(this.minlength || '', 10)
|
||||
if ( this.minlength && !isNaN(min) && String(this.getValue()).length < min ) {
|
||||
this.error = `Value must be at least ${min} characters`
|
||||
}
|
||||
|
||||
const max = parseInt(this.maxlength || '', 10)
|
||||
if ( this.maxlength && !isNaN(max) && String(this.getValue()).length > max ) {
|
||||
this.error = `Value must be at most ${max} characters`
|
||||
}
|
||||
|
||||
return isValid
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,13 @@
|
||||
import {TextInputFieldComponent} from './TextInputField.component.js'
|
||||
import {Component} from '../../decorators.js'
|
||||
|
||||
@Component('ex-input-url')
|
||||
export class URLInputFieldComponent extends TextInputFieldComponent {
|
||||
protected static html = `
|
||||
<label>
|
||||
<span class="label"></span>
|
||||
<input class="input" type="url">
|
||||
<small class="error"></small>
|
||||
</label>
|
||||
`
|
||||
}
|
||||
@ -0,0 +1,52 @@
|
||||
export enum FormFieldType {
|
||||
text,
|
||||
password,
|
||||
url,
|
||||
email,
|
||||
phone,
|
||||
search,
|
||||
number,
|
||||
error,
|
||||
select,
|
||||
checkboxes,
|
||||
textarea,
|
||||
date,
|
||||
color,
|
||||
}
|
||||
|
||||
export interface FormFieldConfig {
|
||||
type: FormFieldType,
|
||||
name: string,
|
||||
title: string,
|
||||
required?: boolean,
|
||||
}
|
||||
|
||||
export interface FormConfig {
|
||||
endpoint: string,
|
||||
method?: 'get'|'post'|'put'|'delete'|'patch',
|
||||
fields: (FormFieldConfig)[],
|
||||
}
|
||||
|
||||
export type FormData = {[key: string]: any}
|
||||
|
||||
export interface FormField {
|
||||
getFieldName(): string
|
||||
|
||||
getValue(): any
|
||||
|
||||
validate(): boolean
|
||||
}
|
||||
|
||||
export interface FormControl {
|
||||
hasField(field: FormField): boolean
|
||||
|
||||
registerField(field: FormField): void
|
||||
|
||||
processChanges(): void
|
||||
|
||||
gather(): FormData | Promise<FormData>
|
||||
|
||||
submit(): void | Promise<void>
|
||||
|
||||
isValid(): boolean
|
||||
}
|
||||
@ -1,6 +1,25 @@
|
||||
import './resources/theme.css'
|
||||
|
||||
export * from './service/Session.service.js'
|
||||
|
||||
export * from './logical/Logical.component.js'
|
||||
export * from './logical/Session.component.js'
|
||||
|
||||
export * from './Test.component.js'
|
||||
export * from './layout/Page.component.js'
|
||||
export * from './layout/Section.component.js'
|
||||
export * from './layout/Modal.component.js'
|
||||
export * from './nav/NavBar.component.js'
|
||||
|
||||
export * from './form/types.js'
|
||||
export * from './form/fields/TextInputField.component.js'
|
||||
export * from './form/fields/PasswordInputField.component.js'
|
||||
export * from './form/fields/URLInputField.component.js'
|
||||
export * from './form/fields/EmailInputField.component.js'
|
||||
export * from './form/fields/PhoneInputField.component.js'
|
||||
export * from './form/fields/SearchInputField.component.js'
|
||||
export * from './form/fields/NumberInputField.component.js'
|
||||
export * from './form/SubmitButton.component.js'
|
||||
export * from './form/Form.component.js'
|
||||
|
||||
export * from './auth/LoginPage.component.js'
|
||||
|
||||
@ -0,0 +1,15 @@
|
||||
import {ExComponent} from '../ExComponent.js'
|
||||
|
||||
export abstract class LogicalComponent extends ExComponent {
|
||||
protected static styles = `
|
||||
<style>
|
||||
:host {
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
`
|
||||
|
||||
public value(): string {
|
||||
return this.innerText.trim()
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,19 @@
|
||||
import {LogicalComponent} from './Logical.component.js'
|
||||
import {Component} from '../decorators.js'
|
||||
|
||||
@Component('ex-session')
|
||||
export class SessionComponent extends LogicalComponent {
|
||||
mount() {
|
||||
super.mount()
|
||||
|
||||
;(window as any).session = this.session()
|
||||
|
||||
try {
|
||||
const data = JSON.parse(this.value())
|
||||
this.session().populate(data)
|
||||
} catch (e) {
|
||||
console.error('Error parsing JSON session data!', this.value()) // eslint-disable-line no-console
|
||||
throw e
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -0,0 +1,26 @@
|
||||
|
||||
export class SessionService {
|
||||
private static instance?: SessionService
|
||||
|
||||
public static get(): SessionService {
|
||||
if ( !this.instance ) {
|
||||
this.instance = new SessionService()
|
||||
}
|
||||
|
||||
return this.instance
|
||||
}
|
||||
|
||||
protected data: {[key: string]: any} = {}
|
||||
|
||||
populate(data: {[key: string]: any}) {
|
||||
this.data = data
|
||||
}
|
||||
|
||||
get(key: string, fallback?: any): any {
|
||||
return this.data[key] ?? fallback
|
||||
}
|
||||
|
||||
set(key: string, value: any) {
|
||||
this.data[key] = value
|
||||
}
|
||||
}
|
||||
Loading…
Reference in new issue