-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
3ce4704
commit 334ce09
Showing
9 changed files
with
147 additions
and
56 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,96 @@ | ||
| <script lang="ts"> | ||
| import type { Action, Input } from '@qtagon/typhon-ui'; | ||
| import type { Event } from '@qtagon/typhon-ui/lib/core'; | ||
| import { ALIGNMENT } from '@qtagon/typhon-ui'; | ||
| import { createEventDispatcher } from 'svelte'; | ||
| const dispatch = createEventDispatcher(); | ||
| /** | ||
| * Components | ||
| */ | ||
| import caction from './Action.svelte'; | ||
| const components = { | ||
| action: caction, | ||
| }; | ||
| /** | ||
| * Props | ||
| */ | ||
| export let title: string = ''; | ||
| export let subtitle: string = ''; | ||
| export let inputs: Array<Input> = []; | ||
| /** | ||
| * Functions | ||
| */ | ||
| const emit = (name, parameters) => { | ||
| if (name) dispatch(name, parameters); | ||
| return; | ||
| }; | ||
| </script> | ||
|
|
||
| <style type="text/scss"> | ||
| @import './scss/fonts.scss'; | ||
| @import './scss/alignment.scss'; | ||
| .subtitle { | ||
| margin: 0.625rem 0 0 0; | ||
| } | ||
| .headline { | ||
| margin: 0 0 3.75rem 0; | ||
| } | ||
| label { | ||
| text-transform: uppercase; | ||
| } | ||
| input { | ||
| outline: none; | ||
| border: none; | ||
| margin: 0; | ||
| color: #1e1f20; | ||
| width: 100%; | ||
| height: 100%; | ||
| padding: 1.188rem; | ||
| border: 0.063rem solid #e5e5e5; | ||
| border-radius: 0.75rem; | ||
| margin: 0.625rem 0 0 0; | ||
| &:not(:last-child) { | ||
| margin: 0.625rem 0 1.25rem 0; | ||
| } | ||
| &::placeholder { | ||
| color: #4c526d; | ||
| opacity: 1; | ||
| } | ||
| &:-ms-input-placeholder { | ||
| color: #4c526d; | ||
| } | ||
| &::-ms-input-placeholder { | ||
| color: #4c526d; | ||
| } | ||
| } | ||
| </style> | ||
|
|
||
| <div class={`form`}> | ||
| <div class="headline"> | ||
| <div class="h2 title">{title}</div> | ||
| <div class="display subtitle">{subtitle}</div> | ||
| </div> | ||
| <form> | ||
| {#each inputs as input} | ||
| <label for={input.identifier} class="label">{input.title}</label> | ||
| <input | ||
| name={input.title.toLowerCase()} | ||
| type="text" | ||
| id={input.identifier} | ||
| placeholder={input.title} | ||
| class="display" /> | ||
| {/each} | ||
| </form> | ||
| </div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| import { SIZE } from '@qtagon/typhon-ui'; | ||
|
|
||
| const setup = (container: any) => { | ||
| container.setSubject('Form').setClassified('h1'); | ||
|
|
||
| /** | ||
| * Example 1 | ||
| */ | ||
| container | ||
| .setSubject('Simple') | ||
| .setClassified('h3') | ||
| .setStyle('padding: 2rem 0;'); | ||
|
|
||
| const form_e1 = container.setForm( | ||
| 'Create an account', | ||
| 'Signup to continue', | ||
| ); | ||
| form_e1.setInput('Name'); | ||
| form_e1.setInput('Email'); | ||
| form_e1.setInput('Password'); | ||
| }; | ||
|
|
||
| export default setup; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,49 +1,10 @@ | ||
| import { Typhon, SIZE, ALIGNMENT, POSITION } from '@qtagon/typhon-ui'; | ||
|
|
||
| const setup = (container: any) => { | ||
| const setup = (container: any, dynamic: any) => { | ||
| container.setSubject('Modal').setClassified('h1'); | ||
|
|
||
| container.setSubject('Modal').setClassified('h1'); | ||
|
|
||
| /** | ||
| * Example 1 | ||
| */ | ||
| container | ||
| .setSubject('With actions & buttons') | ||
| .setClassified('h3') | ||
| .setStyle('padding: 2rem 0;'); | ||
|
|
||
| const notificaiton_e1 = container.setNotification('John', 'Doe'); | ||
|
|
||
| notificaiton_e1.setImage( | ||
| 'https://images.pexels.com/photos/3081752/pexels-photo-3081752.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260', | ||
| SIZE.EXTRA_SMALL_X2 | ||
| ); | ||
|
|
||
| notificaiton_e1.setAction().setIcon('addUser'); | ||
| notificaiton_e1.setButton('Accept').setClassified('success').setIcon('check'); | ||
| notificaiton_e1.setButton('Deny').setClassified('dark').setIcon('close'); | ||
|
|
||
| /** | ||
| * Example 2 | ||
| */ | ||
| container | ||
| .setSubject('With indicator') | ||
| .setClassified('h3') | ||
| .setStyle('padding: 2rem 0;'); | ||
|
|
||
| const notificaiton_e2 = container.setNotification( | ||
| 'John', | ||
| 'Wants to add you as a friend' | ||
| ); | ||
|
|
||
| notificaiton_e2.setImage( | ||
| 'https://images.pexels.com/photos/4233783/pexels-photo-4233783.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260', | ||
| SIZE.EXTRA_SMALL_X2 | ||
| ); | ||
|
|
||
| notificaiton_e2.setButton('Accept').setClassified('success').setIcon('check'); | ||
| notificaiton_e2.setButton('Deny').setClassified('dark').setIcon('close'); | ||
|
|
||
| notificaiton_e2.setIndicator(); | ||
| const modal = dynamic.setModal('Lorem', 'Ipsum'); | ||
| modal.setButton('Deny').setClassified('transparent bordered'); | ||
| modal.setButton('Accept'); | ||
| }; | ||
| export default setup; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters