@esportsplus/ui 0.0.22 → 0.0.23

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 (5) hide show
  1. package/build/components/field/select.js +41 -42
  2. package/build/components/tooltip/menu.js +34 -36
  3. package/package.json +1 -1
  4. package/src/components/field/select.ts +49 -50
  5. package/src/components/tooltip/menu.ts +36 -37
package/build/components/field/select.js CHANGED
@@ -12,11 +12,49 @@ function options(keys, selected) {
12
12
  options[selected] = true;
13
13
  return options;
14
14
  }
15
- export default (data) => {
15
+ function template(data, state) {
16
16
  let { attributes: a, html: h } = scrollbar({
17
17
  fixed: true,
18
18
  style: data?.scrollbar?.style || '--background-default: var(--color-black-400);'
19
- }), state = reactive({
19
+ });
20
+ return html `
21
+ <div class='tooltip-content tooltip-content--${data?.tooltip?.direction || 's'} ${data?.tooltip?.class || ''} --flex-column --width-full'>
22
+ <div
23
+ class='row --flex-column'
24
+ onclick='${(e) => {
25
+ let key = e?.target?.dataset?.key;
26
+ if (key === undefined) {
27
+ return;
28
+ }
29
+ state.options[key] = true;
30
+ state.options[state.selected] = false;
31
+ state.active = false;
32
+ state.selected = key;
33
+ if (data.effect) {
34
+ data.effect(key);
35
+ }
36
+ }}'
37
+ style='${data?.tooltip?.style || ''}'
38
+ ${a}
39
+ >
40
+ ${Object.keys(state.options).map((key) => html `
41
+ <div
42
+ class='link ${data?.option?.class || ''} ${() => state.options[key] ? '--active' : ''} --flex-vertical' data-key='${key}'
43
+ style='${data?.option?.style || ''}'
44
+ >
45
+ <span class="--text-truncate">
46
+ ${data.options[key]}
47
+ </span>
48
+ </div>
49
+ `)}
50
+ </div>
51
+
52
+ ${h}
53
+ </div>
54
+ `;
55
+ }
56
+ export default (data) => {
57
+ let state = reactive({
20
58
  active: false,
21
59
  error: '',
22
60
  options: options(Object.keys(data.options || {}), data.selected),
@@ -52,46 +90,7 @@ export default (data) => {
52
90
 
53
91
  <div class='field-mask-arrow'></div>
54
92
 
55
- ${() => {
56
- if (!state.render) {
57
- return '';
58
- }
59
- return html `
60
- <div class='tooltip-content tooltip-content--${data?.tooltip?.direction || 's'} ${data?.tooltip?.class || ''} --flex-column --width-full'>
61
- <div
62
- class='row --flex-column'
63
- onclick='${(e) => {
64
- let key = e?.target?.dataset?.key;
65
- if (key === undefined) {
66
- return;
67
- }
68
- state.options[key] = true;
69
- state.options[state.selected] = false;
70
- state.active = false;
71
- state.selected = key;
72
- if (data.effect) {
73
- data.effect(key);
74
- }
75
- }}'
76
- style='${data?.tooltip?.style || ''}'
77
- ${a}
78
- >
79
- ${Object.keys(state.options).map((key) => html `
80
- <div
81
- class='link ${data?.option?.class || ''} ${() => state.options[key] ? '--active' : ''} --flex-vertical' data-key='${key}'
82
- style='${data?.option?.style || ''}'
83
- >
84
- <span class="--text-truncate">
85
- ${data.options[key]}
86
- </span>
87
- </div>
88
- `)}
89
- </div>
90
-
91
- ${h}
92
- </div>
93
- `;
94
- }}
93
+ ${() => state.render ? template(data, state) : ''}
95
94
  </label>
96
95
 
97
96
  ${description(data)}
package/build/components/tooltip/menu.js CHANGED
@@ -1,5 +1,38 @@
1
1
  import { effect, reactive } from '@esportsplus/reactivity';
2
2
  import { html } from '@esportsplus/template';
3
+ function template(data) {
4
+ return html `
5
+ <div class="tooltip-content tooltip-content--${data?.direction || 's'} --flex-column --width-full ${data?.class || ''}" style='${data?.style || ''}'>
6
+ ${(data?.items || []).map(item => html `
7
+ ${item?.border ? html `
8
+ <div
9
+ class="border ${item?.border?.class || ''}"
10
+ style='
11
+ margin-left: calc(var(--margin-horizontal) * -1);
12
+ width: calc(100% + var(--margin-horizontal) * 2);
13
+ '
14
+ ></div>
15
+ ` : ''}
16
+
17
+ <${item?.url ? 'a' : 'div'}
18
+ class='link --flex-vertical ${item?.class}' ${item?.onclick ? html({ onclick: item.onclick }) : ''}
19
+ style='${item?.style || ''}'
20
+ ${item?.url ? `href='${item.url}' target='${item.target || '_blank'}'` : ''}
21
+ >
22
+ ${item?.svg ? html `
23
+ <div class="icon --margin-right --margin-300" style='margin-left: var(--size-100)'>
24
+ ${item.svg}
25
+ </div>
26
+ ` : ''}
27
+
28
+ <div class="text --color-text --flex-fill">
29
+ ${item.text}
30
+ </div>
31
+ </${item?.url ? 'a' : 'div'}>
32
+ `)}
33
+ </div>
34
+ `;
35
+ }
3
36
  export default (data) => {
4
37
  let state = reactive({
5
38
  render: false
@@ -10,40 +43,5 @@ export default (data) => {
10
43
  }
11
44
  state.render = true;
12
45
  });
13
- return () => {
14
- if (!state.render) {
15
- return '';
16
- }
17
- return html `
18
- <div class="tooltip-content tooltip-content--${data?.direction || 's'} --flex-column --width-full ${data?.class || ''}" style='${data?.style || ''}'>
19
- ${(data?.items || []).map(item => html `
20
- ${item?.border ? html `
21
- <div
22
- class="border ${item?.border?.class || ''}"
23
- style='
24
- margin-left: calc(var(--margin-horizontal) * -1);
25
- width: calc(100% + var(--margin-horizontal) * 2);
26
- '
27
- ></div>
28
- ` : ''}
29
-
30
- <${item?.url ? 'a' : 'div'}
31
- class='link --flex-vertical ${item?.class}' ${item?.onclick ? html({ onclick: item.onclick }) : ''}
32
- style='${item?.style || ''}'
33
- ${item?.url ? `href='${item.url}' target='${item.target || '_blank'}'` : ''}
34
- >
35
- ${item?.svg ? html `
36
- <div class="icon --margin-right --margin-300" style='margin-left: var(--size-100)'>
37
- ${item.svg}
38
- </div>
39
- ` : ''}
40
-
41
- <div class="text --color-text --flex-fill">
42
- ${item.text}
43
- </div>
44
- </${item?.url ? 'a' : 'div'}>
45
- `)}
46
- </div>
47
- `;
48
- };
46
+ return () => state.render ? template(data) : '';
49
47
  };
package/package.json CHANGED
@@ -37,5 +37,5 @@
37
37
  "prepublishOnly": "npm run build"
38
38
  },
39
39
  "types": "./build/index.d.ts",
40
- "version": "0.0.22"
40
+ "version": "0.0.23"
41
41
  }
package/src/components/field/select.ts CHANGED
@@ -48,13 +48,57 @@ function options(keys: (number | string)[], selected: number | string) {
48
48
  return options;
49
49
  }
50
50
 
51
-
52
- export default (data: Data) => {
51
+ function template(data: Data, state: { active: boolean, options: Record<number | string, boolean>, selected: number | string }) {
53
52
  let { attributes: a, html: h } = scrollbar({
54
53
  fixed: true,
55
54
  style: data?.scrollbar?.style || '--background-default: var(--color-black-400);'
56
- }),
57
- state = reactive({
55
+ });
56
+
57
+ return html`
58
+ <div class='tooltip-content tooltip-content--${data?.tooltip?.direction || 's'} ${data?.tooltip?.class || ''} --flex-column --width-full'>
59
+ <div
60
+ class='row --flex-column'
61
+ onclick='${(e: Event) => {
62
+ let key = (e?.target as HTMLElement)?.dataset?.key;
63
+
64
+ if (key === undefined) {
65
+ return;
66
+ }
67
+
68
+ // Swap active
69
+ state.options[key] = true;
70
+ state.options[state.selected] = false;
71
+
72
+ state.active = false;
73
+ state.selected = key;
74
+
75
+ if (data.effect) {
76
+ data.effect(key);
77
+ }
78
+ }}'
79
+ style='${data?.tooltip?.style || ''}'
80
+ ${a}
81
+ >
82
+ ${Object.keys( state.options ).map((key: number | string) => html`
83
+ <div
84
+ class='link ${data?.option?.class || ''} ${() => state.options[key] ? '--active' : ''} --flex-vertical' data-key='${key}'
85
+ style='${data?.option?.style || ''}'
86
+ >
87
+ <span class="--text-truncate">
88
+ ${data.options[key]}
89
+ </span>
90
+ </div>
91
+ `)}
92
+ </div>
93
+
94
+ ${h}
95
+ </div>
96
+ `;
97
+ }
98
+
99
+
100
+ export default (data: Data) => {
101
+ let state = reactive({
58
102
  active: false,
59
103
  error: '',
60
104
  options: options(Object.keys( data.options || {} ), data.selected),
@@ -92,52 +136,7 @@ export default (data: Data) => {
92
136
 
93
137
  <div class='field-mask-arrow'></div>
94
138
 
95
- ${() => {
96
- if (!state.render) {
97
- return '';
98
- }
99
-
100
- return html`
101
- <div class='tooltip-content tooltip-content--${data?.tooltip?.direction || 's'} ${data?.tooltip?.class || ''} --flex-column --width-full'>
102
- <div
103
- class='row --flex-column'
104
- onclick='${(e: Event) => {
105
- let key = (e?.target as HTMLElement)?.dataset?.key;
106
-
107
- if (key === undefined) {
108
- return;
109
- }
110
-
111
- // Swap active
112
- state.options[key] = true;
113
- state.options[state.selected] = false;
114
-
115
- state.active = false;
116
- state.selected = key;
117
-
118
- if (data.effect) {
119
- data.effect(key);
120
- }
121
- }}'
122
- style='${data?.tooltip?.style || ''}'
123
- ${a}
124
- >
125
- ${Object.keys( state.options ).map((key: number | string) => html`
126
- <div
127
- class='link ${data?.option?.class || ''} ${() => state.options[key] ? '--active' : ''} --flex-vertical' data-key='${key}'
128
- style='${data?.option?.style || ''}'
129
- >
130
- <span class="--text-truncate">
131
- ${data.options[key]}
132
- </span>
133
- </div>
134
- `)}
135
- </div>
136
-
137
- ${h}
138
- </div>
139
- `;
140
- }}
139
+ ${() => state.render ? template(data, state) : ''}
141
140
  </label>
142
141
 
143
142
  ${description(data)}
package/src/components/tooltip/menu.ts CHANGED
@@ -22,6 +22,41 @@ type Data = {
22
22
  };
23
23
 
24
24
 
25
+ function template(data: Data) {
26
+ return html`
27
+ <div class="tooltip-content tooltip-content--${data?.direction || 's'} --flex-column --width-full ${data?.class || ''}" style='${data?.style || ''}'>
28
+ ${(data?.items || []).map(item => html`
29
+ ${item?.border ? html`
30
+ <div
31
+ class="border ${item?.border?.class || ''}"
32
+ style='
33
+ margin-left: calc(var(--margin-horizontal) * -1);
34
+ width: calc(100% + var(--margin-horizontal) * 2);
35
+ '
36
+ ></div>
37
+ ` : ''}
38
+
39
+ <${item?.url ? 'a' : 'div'}
40
+ class='link --flex-vertical ${item?.class}' ${item?.onclick ? html({ onclick: item.onclick }) : ''}
41
+ style='${item?.style || ''}'
42
+ ${item?.url ? `href='${item.url}' target='${item.target || '_blank'}'` : ''}
43
+ >
44
+ ${item?.svg ? html`
45
+ <div class="icon --margin-right --margin-300" style='margin-left: var(--size-100)'>
46
+ ${item.svg}
47
+ </div>
48
+ ` : ''}
49
+
50
+ <div class="text --color-text --flex-fill">
51
+ ${item.text}
52
+ </div>
53
+ </${item?.url ? 'a' : 'div'}>
54
+ `)}
55
+ </div>
56
+ `;
57
+ }
58
+
59
+
25
60
  export default (data: Data) => {
26
61
  let state = reactive({
27
62
  render: false
@@ -35,41 +70,5 @@ export default (data: Data) => {
35
70
  state.render = true;
36
71
  });
37
72
 
38
- return () => {
39
- if (!state.render) {
40
- return '';
41
- }
42
-
43
- return html`
44
- <div class="tooltip-content tooltip-content--${data?.direction || 's'} --flex-column --width-full ${data?.class || ''}" style='${data?.style || ''}'>
45
- ${(data?.items || []).map(item => html`
46
- ${item?.border ? html`
47
- <div
48
- class="border ${item?.border?.class || ''}"
49
- style='
50
- margin-left: calc(var(--margin-horizontal) * -1);
51
- width: calc(100% + var(--margin-horizontal) * 2);
52
- '
53
- ></div>
54
- ` : ''}
55
-
56
- <${item?.url ? 'a' : 'div'}
57
- class='link --flex-vertical ${item?.class}' ${item?.onclick ? html({ onclick: item.onclick }) : ''}
58
- style='${item?.style || ''}'
59
- ${item?.url ? `href='${item.url}' target='${item.target || '_blank'}'` : ''}
60
- >
61
- ${item?.svg ? html`
62
- <div class="icon --margin-right --margin-300" style='margin-left: var(--size-100)'>
63
- ${item.svg}
64
- </div>
65
- ` : ''}
66
-
67
- <div class="text --color-text --flex-fill">
68
- ${item.text}
69
- </div>
70
- </${item?.url ? 'a' : 'div'}>
71
- `)}
72
- </div>
73
- `;
74
- };
73
+ return () => state.render ? template(data) : '';
75
74
  };