@esportsplus/ui 0.37.1 → 0.37.2

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 (4) hide show
  1. package/build/components/select/index.d.ts +44 -11
  2. package/build/components/select/index.js +27 -12
  3. package/package.json +5 -5
  4. package/src/components/select/index.ts +35 -14
package/build/components/select/index.d.ts CHANGED
@@ -3,7 +3,10 @@ import { Attributes as Attr } from '../../components/scrollbar/index.js';
3
3
  import './scss/index.scss';
4
4
  type A = {
5
5
  arrow?: Attributes;
6
- options: Record<number | string, Renderable<unknown>>;
6
+ options: Record<number | string, Renderable<unknown> | {
7
+ content: Renderable<unknown>;
8
+ selected: Renderable<unknown>;
9
+ }>;
7
10
  option?: Attributes;
8
11
  scrollbar?: Attributes;
9
12
  'scrollbar-container-content'?: Attributes;
@@ -24,19 +27,49 @@ type A = {
24
27
  declare const select: {
25
28
  (): ReturnType<(this: {
26
29
  attributes?: A | undefined;
27
- content?: Renderable<any>;
28
- }, attributes: Readonly<A>, content: Renderable<any>) => Renderable<any>>;
30
+ content?: ((state: {
31
+ active: boolean;
32
+ selected?: string | number;
33
+ }) => Renderable<unknown>) | undefined;
34
+ }, attributes: Readonly<A>, content: (state: {
35
+ active: boolean;
36
+ selected?: string | number;
37
+ }) => Renderable<unknown>) => Renderable<any>>;
29
38
  <T extends A>(attributes: T): ReturnType<(this: {
30
39
  attributes?: A | undefined;
31
- content?: Renderable<any>;
32
- }, attributes: Readonly<A>, content: Renderable<any>) => Renderable<any>>;
33
- <T extends Renderable<any>>(content: T): ReturnType<(this: {
40
+ content?: ((state: {
41
+ active: boolean;
42
+ selected?: string | number;
43
+ }) => Renderable<unknown>) | undefined;
44
+ }, attributes: Readonly<A>, content: (state: {
45
+ active: boolean;
46
+ selected?: string | number;
47
+ }) => Renderable<unknown>) => Renderable<any>>;
48
+ <T extends (state: {
49
+ active: boolean;
50
+ selected?: string | number;
51
+ }) => Renderable<unknown>>(content: T): ReturnType<(this: {
34
52
  attributes?: A | undefined;
35
- content?: Renderable<any>;
36
- }, attributes: Readonly<A>, content: Renderable<any>) => Renderable<any>>;
37
- (attributes: A, content: Renderable<any>): ReturnType<(this: {
53
+ content?: ((state: {
54
+ active: boolean;
55
+ selected?: string | number;
56
+ }) => Renderable<unknown>) | undefined;
57
+ }, attributes: Readonly<A>, content: (state: {
58
+ active: boolean;
59
+ selected?: string | number;
60
+ }) => Renderable<unknown>) => Renderable<any>>;
61
+ (attributes: A, content: (state: {
62
+ active: boolean;
63
+ selected?: string | number;
64
+ }) => Renderable<unknown>): ReturnType<(this: {
38
65
  attributes?: A | undefined;
39
- content?: Renderable<any>;
40
- }, attributes: Readonly<A>, content: Renderable<any>) => Renderable<any>>;
66
+ content?: ((state: {
67
+ active: boolean;
68
+ selected?: string | number;
69
+ }) => Renderable<unknown>) | undefined;
70
+ }, attributes: Readonly<A>, content: (state: {
71
+ active: boolean;
72
+ selected?: string | number;
73
+ }) => Renderable<unknown>) => Renderable<any>>;
41
74
  };
42
75
  export default select;
package/build/components/select/index.js CHANGED
@@ -60,7 +60,7 @@ const select = template.factory(function (attributes, content) {
60
60
  state.render = true;
61
61
  }}
62
62
  >
63
- ${content || (() => options[state.selected] || '-')}
63
+ ${content ? (() => content(state)) : (() => options[state.selected] || '-')}
64
64
 
65
65
  <div class='select-arrow' ${this?.attributes?.arrow} ${attributes.arrow}></div>
66
66
 
@@ -86,7 +86,16 @@ const select = template.factory(function (attributes, content) {
86
86
  `tooltip-content--${attributes['tooltip-content']?.direction || 's'}`
87
87
  ],
88
88
  onclick: (e) => {
89
- let key = e?.target?.dataset?.key;
89
+ let element = e.target, key = element.dataset?.key;
90
+ if (key === undefined) {
91
+ let parent;
92
+ while (parent = element.parentElement) {
93
+ key = parent.dataset?.key;
94
+ if (key !== undefined) {
95
+ break;
96
+ }
97
+ }
98
+ }
90
99
  if (key === undefined) {
91
100
  return;
92
101
  }
@@ -101,16 +110,22 @@ const select = template.factory(function (attributes, content) {
101
110
  },
102
111
  scrollbar: attributes.scrollbar,
103
112
  'scrollbar-container-content': attributes['scrollbar-container-content']
104
- }, keys.map((key) => html `
105
- <div
106
- class='link select-option ${() => selected[key] && '--active'}'
107
- ${this?.attributes?.option}
108
- ${option}
109
- data-key='${key}'
110
- >
111
- ${options[key]}
112
- </div>
113
- `));
113
+ }, keys.map((key) => {
114
+ let content = options[key];
115
+ if (content !== null && typeof content === 'object' && 'content' in content) {
116
+ content = content.content;
117
+ }
118
+ return html `
119
+ <div
120
+ class='link select-option ${() => selected[key] && '--active'}'
121
+ ${this?.attributes?.option}
122
+ ${option}
123
+ data-key='${key}'
124
+ >
125
+ ${content}
126
+ </div>
127
+ `;
128
+ }));
114
129
  }}
115
130
  </div>
116
131
  `;
package/package.json CHANGED
@@ -10,13 +10,13 @@
10
10
  },
11
11
  "devDependencies": {
12
12
  "@esportsplus/typescript": "^0.9.2",
13
- "@types/node": "^24.5.2",
13
+ "@types/node": "^24.6.0",
14
14
  "autoprefixer": "^10.4.21",
15
15
  "glob": "^11.0.3",
16
- "lightningcss": "^1.30.1",
16
+ "lightningcss": "^1.30.2",
17
17
  "npm-run-all": "^4.1.5",
18
- "sass": "^1.93.0",
19
- "vite": "^7.1.6"
18
+ "sass": "^1.93.2",
19
+ "vite": "^7.1.7"
20
20
  },
21
21
  "exports": {
22
22
  "./css-utilities.scss": "./build/css-utilities/index.scss",
@@ -42,7 +42,7 @@
42
42
  "private": false,
43
43
  "sideEffects": false,
44
44
  "type": "module",
45
- "version": "0.37.1",
45
+ "version": "0.37.2",
46
46
  "scripts": {
47
47
  "build": "run-s build:vite build:ts",
48
48
  "build:ts": "tsc && tsc-alias",
package/src/components/select/index.ts CHANGED
@@ -20,7 +20,7 @@ const OMIT = [
20
20
 
21
21
  type A = {
22
22
  arrow?: Attributes;
23
- options: Record<number | string, Renderable<unknown>>;
23
+ options: Record<number | string, Renderable<unknown> | { content: Renderable<unknown>, selected: Renderable<unknown> }>;
24
24
  option?: Attributes;
25
25
  scrollbar?: Attributes;
26
26
  'scrollbar-container-content'?: Attributes;
@@ -73,7 +73,7 @@ function set(current: { active: boolean }, value: boolean) {
73
73
  }
74
74
  }
75
75
 
76
- const select = template.factory<A>(
76
+ const select = template.factory<A, (state: { active: boolean, selected?: string | number }) => Renderable<unknown>>(
77
77
  function(this: { attributes?: Exclude<A, 'options' | 'selected' | 'state'> }, attributes: A, content) {
78
78
  let { options, option } = attributes,
79
79
  state = attributes.state || reactive({
@@ -96,7 +96,7 @@ const select = template.factory<A>(
96
96
  state.render = true;
97
97
  }}
98
98
  >
99
- ${content || (() => options[ state.selected! ] || '-')}
99
+ ${content ? (() => content(state)) : (() => options[ state.selected! ] || '-')}
100
100
 
101
101
  <div class='select-arrow' ${this?.attributes?.arrow} ${attributes.arrow}></div>
102
102
 
@@ -128,7 +128,20 @@ const select = template.factory<A>(
128
128
  `tooltip-content--${attributes['tooltip-content']?.direction || 's'}`
129
129
  ],
130
130
  onclick: (e: Event) => {
131
- let key = (e?.target as HTMLElement)?.dataset?.key;
131
+ let element = e.target as HTMLElement,
132
+ key = element.dataset?.key;
133
+
134
+ if (key === undefined) {
135
+ let parent;
136
+
137
+ while (parent = element.parentElement) {
138
+ key = parent.dataset?.key;
139
+
140
+ if (key !== undefined) {
141
+ break;
142
+ }
143
+ }
144
+ }
132
145
 
133
146
  if (key === undefined) {
134
147
  return;
@@ -148,16 +161,24 @@ const select = template.factory<A>(
148
161
  scrollbar: attributes.scrollbar,
149
162
  'scrollbar-container-content': attributes['scrollbar-container-content']
150
163
  },
151
- keys.map((key) => html`
152
- <div
153
- class='link select-option ${() => selected[key] && '--active'}'
154
- ${this?.attributes?.option}
155
- ${option}
156
- data-key='${key}'
157
- >
158
- ${options[key]}
159
- </div>
160
- `)
164
+ keys.map((key) => {
165
+ let content = options[key];
166
+
167
+ if (content !== null && typeof content === 'object' && 'content' in content) {
168
+ content = content.content;
169
+ }
170
+
171
+ return html`
172
+ <div
173
+ class='link select-option ${() => selected[key] && '--active'}'
174
+ ${this?.attributes?.option}
175
+ ${option}
176
+ data-key='${key}'
177
+ >
178
+ ${content}
179
+ </div>
180
+ `;
181
+ })
161
182
  );
162
183
  }}
163
184
  </div>