@esportsplus/ui 0.0.12 → 0.0.14

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (21) hide show
  1. package/build/components/form/index.d.ts +1 -3
  2. package/build/components/form/layout.d.ts +3 -3
  3. package/build/components/form/layout.js +13 -15
  4. package/build/components/index.d.ts +1 -0
  5. package/build/components/index.js +1 -0
  6. package/build/components/page/header.d.ts +11 -0
  7. package/build/components/page/header.js +20 -0
  8. package/build/components/page/index.d.ts +3 -5
  9. package/build/components/page/index.js +3 -3
  10. package/build/components/root/index.d.ts +23 -0
  11. package/build/components/root/index.js +2 -0
  12. package/build/components/root/layout.d.ts +22 -0
  13. package/build/components/root/layout.js +25 -0
  14. package/package.json +1 -1
  15. package/src/components/form/layout.ts +13 -16
  16. package/src/components/index.ts +1 -0
  17. package/src/components/page/header.ts +29 -0
  18. package/src/components/page/index.ts +3 -3
  19. package/src/components/root/index.ts +4 -0
  20. package/src/components/root/layout.ts +46 -0
  21. package/src/components/page/layout.ts +0 -35
package/build/components/form/index.d.ts CHANGED
@@ -8,14 +8,12 @@ declare const _default: {
8
8
  content?: any;
9
9
  style?: string | undefined;
10
10
  } | undefined;
11
+ class?: string | undefined;
11
12
  content?: any;
12
- width?: string | undefined;
13
13
  } & {
14
- content?: any;
15
14
  subtitle?: string | undefined;
16
15
  suptitle?: string | undefined;
17
16
  title?: string | undefined;
18
- width?: string | undefined;
19
17
  }) => {
20
18
  content: string;
21
19
  type: string;
package/build/components/form/layout.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { layout } from '../../components/page';
1
+ import { header } from '../../components/page';
2
2
  type Data = {
3
3
  action?: any;
4
4
  button?: {
@@ -6,10 +6,10 @@ type Data = {
6
6
  content?: any;
7
7
  style?: string;
8
8
  };
9
+ class?: string;
9
10
  content?: any;
10
- width?: string;
11
11
  };
12
- declare const _default: (data: Data & Parameters<typeof layout>[0]) => {
12
+ declare const _default: (data: Data & Parameters<typeof header>[0]) => {
13
13
  content: string;
14
14
  type: string;
15
15
  values: never[];
package/build/components/form/layout.js CHANGED
@@ -1,17 +1,15 @@
1
1
  import { html } from '@esportsplus/template';
2
- import { layout } from '../../components/page';
3
- export default (data) => {
4
- data.content = html `
5
- <form class='--margin-top --margin-800' ${data?.action || ''}>
6
- ${data?.content || ''}
2
+ import { header } from '../../components/page';
3
+ export default (data) => html `
4
+ ${header(data)}
7
5
 
8
- ${data?.button ? html `
9
- <button class="button ${data?.button?.class || ''}" style='${data?.button?.style || ''}'>
10
- ${data?.button?.content || ''}
11
- </button>
12
- ` : ''}
13
- </form>
14
- `;
15
- data.width = data?.width || '480px';
16
- return layout(data);
17
- };
6
+ <form class='${data?.class}' ${data?.action || ''}>
7
+ ${data?.content || ''}
8
+
9
+ ${data?.button ? html `
10
+ <button class="button ${data?.button?.class || ''}" style='${data?.button?.style || ''}'>
11
+ ${data?.button?.content || ''}
12
+ </button>
13
+ ` : ''}
14
+ </form>
15
+ `;
package/build/components/index.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  export { default as alert } from './alert';
2
2
  export { default as form } from './form';
3
3
  export { default as page } from './page';
4
+ export { default as root } from './root';
4
5
  export { default as scrollbar } from './scrollbar';
5
6
  export { default as state } from './state';
package/build/components/index.js CHANGED
@@ -1,5 +1,6 @@
1
1
  export { default as alert } from './alert';
2
2
  export { default as form } from './form';
3
3
  export { default as page } from './page';
4
+ export { default as root } from './root';
4
5
  export { default as scrollbar } from './scrollbar';
5
6
  export { default as state } from './state';
package/build/components/page/header.d.ts ADDED
@@ -0,0 +1,11 @@
1
+ type Data = {
2
+ subtitle?: string;
3
+ suptitle?: string;
4
+ title?: string;
5
+ };
6
+ declare const _default: ({ subtitle, suptitle, title }: Data) => {
7
+ content: string;
8
+ type: string;
9
+ values: never[];
10
+ };
11
+ export default _default;
package/build/components/page/header.js ADDED
@@ -0,0 +1,20 @@
1
+ import { html } from '@esportsplus/template';
2
+ export default ({ subtitle, suptitle, title }) => html `
3
+ ${suptitle ? html `
4
+ <span class="page-suptitle --text-bold --text-crop --text-uppercase --text-200" style="--color-default: var(--color-primary-400);letter-spacing: 0.24px;">
5
+ ${suptitle}
6
+ </span>
7
+ ` : ''}
8
+
9
+ ${title ? html `
10
+ <h1 class="page-title --line-height-200 --margin-300 ${!subtitle && '--text-crop-bottom'} ${suptitle ? '--margin-top' : '--text-crop-top'}">
11
+ ${title}
12
+ </h1>
13
+ ` : ''}
14
+
15
+ ${subtitle ? html `
16
+ <span class="page-subtitle --margin-top --margin-300 --text-crop-bottom">
17
+ ${subtitle}
18
+ </span>
19
+ ` : ''}
20
+ `;
package/build/components/page/index.d.ts CHANGED
@@ -1,11 +1,9 @@
1
- import layout from './layout';
1
+ import header from './header';
2
2
  declare const _default: {
3
- layout: ({ content, subtitle, suptitle, title, width }: {
4
- content?: any;
3
+ header: ({ subtitle, suptitle, title }: {
5
4
  subtitle?: string | undefined;
6
5
  suptitle?: string | undefined;
7
6
  title?: string | undefined;
8
- width?: string | undefined;
9
7
  }) => {
10
8
  content: string;
11
9
  type: string;
@@ -13,4 +11,4 @@ declare const _default: {
13
11
  };
14
12
  };
15
13
  export default _default;
16
- export { layout };
14
+ export { header };
package/build/components/page/index.js CHANGED
@@ -1,3 +1,3 @@
1
- import layout from './layout';
2
- export default { layout };
3
- export { layout };
1
+ import header from './header';
2
+ export default { header };
3
+ export { header };
package/build/components/root/index.d.ts ADDED
@@ -0,0 +1,23 @@
1
+ declare const _default: {
2
+ layout: (data?: {
3
+ anchor?: {
4
+ content?: any;
5
+ } | undefined;
6
+ content?: any;
7
+ page?: {
8
+ class?: string | undefined;
9
+ content?: any;
10
+ } | undefined;
11
+ scrollbar?: {
12
+ style?: string | undefined;
13
+ } | undefined;
14
+ site?: {
15
+ content?: any;
16
+ } | undefined;
17
+ }) => {
18
+ content: string;
19
+ type: string;
20
+ values: never[];
21
+ };
22
+ };
23
+ export default _default;
package/build/components/root/index.js ADDED
@@ -0,0 +1,2 @@
1
+ import layout from './layout';
2
+ export default { layout };
package/build/components/root/layout.d.ts ADDED
@@ -0,0 +1,22 @@
1
+ type Data = {
2
+ anchor?: {
3
+ content?: any;
4
+ };
5
+ content?: any;
6
+ page?: {
7
+ class?: string;
8
+ content?: any;
9
+ };
10
+ scrollbar?: {
11
+ style?: string;
12
+ };
13
+ site?: {
14
+ content?: any;
15
+ };
16
+ };
17
+ declare const _default: (data?: Data) => {
18
+ content: string;
19
+ type: string;
20
+ values: never[];
21
+ };
22
+ export default _default;
package/build/components/root/layout.js ADDED
@@ -0,0 +1,25 @@
1
+ import { html } from '@esportsplus/template';
2
+ import { alert, scrollbar } from '../../components';
3
+ export default (data = {}) => {
4
+ let bar = scrollbar({
5
+ fixed: true,
6
+ style: data?.scrollbar?.style
7
+ });
8
+ return html `
9
+ <section class='site' ${bar.attributes}>
10
+ <section class='page --padding-horizontal --padding-horizontal-sidebars ${data?.page?.class}'>
11
+ ${data?.page?.content}
12
+ </section>
13
+
14
+ ${data?.site?.content || ''}
15
+ ${bar.html}
16
+ </section>
17
+
18
+ <section class='anchors'>
19
+ ${alert.html()}
20
+ ${data?.anchor?.content || ''}
21
+ </section>
22
+
23
+ ${data?.content || ''}
24
+ `;
25
+ };
package/package.json CHANGED
@@ -36,5 +36,5 @@
36
36
  "prepublishOnly": "npm run build"
37
37
  },
38
38
  "types": "./build/index.d.ts",
39
- "version": "0.0.12"
39
+ "version": "0.0.14"
40
40
  }
package/src/components/form/layout.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  import { html } from '@esportsplus/template';
2
- import { layout } from '~/components/page';
2
+ import { header } from '~/components/page';
3
3
 
4
4
 
5
5
  type Data = {
@@ -9,24 +9,21 @@ type Data = {
9
9
  content?: any;
10
10
  style?: string;
11
11
  };
12
+ class?: string;
12
13
  content?: any;
13
- width?: string;
14
14
  };
15
15
 
16
16
 
17
- export default (data: Data & Parameters<typeof layout>[0]) => {
18
- data.content = html`
19
- <form class='--margin-top --margin-800' ${data?.action || ''}>
20
- ${data?.content || ''}
17
+ export default (data: Data & Parameters<typeof header>[0]) => html`
18
+ ${header(data)}
21
19
 
22
- ${data?.button ? html`
23
- <button class="button ${data?.button?.class || ''}" style='${data?.button?.style || ''}'>
24
- ${data?.button?.content || ''}
25
- </button>
26
- ` : ''}
27
- </form>
28
- `;
29
- data.width = data?.width || '480px';
20
+ <form class='${data?.class}' ${data?.action || ''}>
21
+ ${data?.content || ''}
30
22
 
31
- return layout(data);
32
- };
23
+ ${data?.button ? html`
24
+ <button class="button ${data?.button?.class || ''}" style='${data?.button?.style || ''}'>
25
+ ${data?.button?.content || ''}
26
+ </button>
27
+ ` : ''}
28
+ </form>
29
+ `;
package/src/components/index.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  export { default as alert }from './alert';
2
2
  export { default as form }from './form';
3
3
  export { default as page }from './page';
4
+ export { default as root }from './root';
4
5
  export { default as scrollbar }from './scrollbar';
5
6
  export { default as state }from './state';
package/src/components/page/header.ts ADDED
@@ -0,0 +1,29 @@
1
+ import { html } from '@esportsplus/template';
2
+
3
+
4
+ type Data = {
5
+ subtitle?: string;
6
+ suptitle?: string;
7
+ title?: string;
8
+ };
9
+
10
+
11
+ export default ({ subtitle, suptitle, title }: Data) => html`
12
+ ${suptitle ? html`
13
+ <span class="page-suptitle --text-bold --text-crop --text-uppercase --text-200" style="--color-default: var(--color-primary-400);letter-spacing: 0.24px;">
14
+ ${suptitle}
15
+ </span>
16
+ ` : ''}
17
+
18
+ ${title ? html`
19
+ <h1 class="page-title --line-height-200 --margin-300 ${!subtitle && '--text-crop-bottom'} ${suptitle ? '--margin-top' : '--text-crop-top'}">
20
+ ${title}
21
+ </h1>
22
+ ` : ''}
23
+
24
+ ${subtitle ? html`
25
+ <span class="page-subtitle --margin-top --margin-300 --text-crop-bottom">
26
+ ${subtitle}
27
+ </span>
28
+ ` : ''}
29
+ `;
package/src/components/page/index.ts CHANGED
@@ -1,5 +1,5 @@
1
- import layout from './layout';
1
+ import header from './header';
2
2
 
3
3
 
4
- export default { layout };
5
- export { layout };
4
+ export default { header };
5
+ export { header };
package/src/components/root/index.ts ADDED
@@ -0,0 +1,4 @@
1
+ import layout from './layout';
2
+
3
+
4
+ export default { layout };
package/src/components/root/layout.ts ADDED
@@ -0,0 +1,46 @@
1
+ import { html } from '@esportsplus/template';
2
+ import { alert, scrollbar } from '~/components';
3
+
4
+
5
+ type Data = {
6
+ anchor?: {
7
+ content?: any;
8
+ };
9
+ content?: any;
10
+ page?: {
11
+ class?: string;
12
+ content?: any;
13
+ };
14
+ scrollbar?: {
15
+ style?: string;
16
+ };
17
+ site?: {
18
+ content?: any;
19
+ };
20
+ };
21
+
22
+
23
+ export default (data: Data = {}) => {
24
+ let bar = scrollbar({
25
+ fixed: true,
26
+ style: data?.scrollbar?.style
27
+ });
28
+
29
+ return html`
30
+ <section class='site' ${bar.attributes}>
31
+ <section class='page --padding-horizontal --padding-horizontal-sidebars ${data?.page?.class}'>
32
+ ${data?.page?.content}
33
+ </section>
34
+
35
+ ${data?.site?.content || ''}
36
+ ${bar.html}
37
+ </section>
38
+
39
+ <section class='anchors'>
40
+ ${alert.html()}
41
+ ${data?.anchor?.content || ''}
42
+ </section>
43
+
44
+ ${data?.content || ''}
45
+ `;
46
+ };
package/src/components/page/layout.ts DELETED
@@ -1,35 +0,0 @@
1
- import { html } from '@esportsplus/template';
2
-
3
-
4
- type Data = {
5
- content?: any;
6
- subtitle?: string;
7
- suptitle?: string;
8
- title?: string;
9
- width?: string;
10
- };
11
-
12
-
13
- export default ({ content, subtitle, suptitle, title, width }: Data) => html`
14
- <div class="container --slide-in --margin-vertical --margin-900" style="${width && `--max-width: ${width};`}">
15
- ${suptitle ? html`
16
- <span class="page-suptitle --text-bold --text-crop --text-uppercase --text-200" style="--color-default: var(--color-primary-400);letter-spacing: 0.24px;">
17
- ${suptitle}
18
- </span>
19
- ` : ''}
20
-
21
- ${title ? html`
22
- <h1 class="page-title --line-height-200 --margin-300 ${!subtitle && '--text-crop-bottom'} ${suptitle ? '--margin-top' : '--text-crop-top'}">
23
- ${title}
24
- </h1>
25
- ` : ''}
26
-
27
- ${subtitle ? html`
28
- <span class="page-subtitle --margin-top --margin-300 --text-crop-bottom">
29
- ${subtitle}
30
- </span>
31
- ` : ''}
32
-
33
- ${content || ''}
34
- </div>
35
- `;