@esportsplus/ui 0.27.0 → 0.27.1

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 +1 -20
  2. package/build/components/select/index.js +12 -17
  3. package/package.json +1 -1
  4. package/src/components/select/index.ts +13 -24
package/build/components/select/index.d.ts CHANGED
@@ -2,9 +2,8 @@ import { Renderable, type Attributes } from '@esportsplus/template';
2
2
  import { Attributes as Attr } from '../../components/scrollbar/index.js';
3
3
  import './scss/index.scss';
4
4
  type A = {
5
- arrow?: Renderable<unknown>;
6
5
  options: Record<number | string, Renderable<unknown>>;
7
- option?: typeof option;
6
+ option?: Attributes;
8
7
  scrollbar?: Attributes;
9
8
  'scrollbar-container-content'?: Attributes;
10
9
  'tooltip-content'?: Attributes & {
@@ -21,24 +20,6 @@ type A = {
21
20
  selected?: number | string;
22
21
  };
23
22
  }) & Attributes & Attr;
24
- declare const option: {
25
- (): ReturnType<(this: {
26
- attributes?: Attributes | undefined;
27
- content?: Renderable<any>;
28
- }, attributes: Readonly<Attributes>, content: Renderable<any>) => Renderable<any>>;
29
- <T extends Attributes>(attributes: T): ReturnType<(this: {
30
- attributes?: Attributes | undefined;
31
- content?: Renderable<any>;
32
- }, attributes: Readonly<Attributes>, content: Renderable<any>) => Renderable<any>>;
33
- <T extends Renderable<any>>(content: T): ReturnType<(this: {
34
- attributes?: Attributes | undefined;
35
- content?: Renderable<any>;
36
- }, attributes: Readonly<Attributes>, content: Renderable<any>) => Renderable<any>>;
37
- (attributes: Attributes, content: Renderable<any>): ReturnType<(this: {
38
- attributes?: Attributes | undefined;
39
- content?: Renderable<any>;
40
- }, attributes: Readonly<Attributes>, content: Renderable<any>) => Renderable<any>>;
41
- };
42
23
  declare const select: {
43
24
  (): ReturnType<(this: {
44
25
  attributes?: A | undefined;
package/build/components/select/index.js CHANGED
@@ -7,7 +7,6 @@ import scrollbar from '../../components/scrollbar/index.js';
7
7
  import template from '../../components/template/index.js';
8
8
  import './scss/index.scss';
9
9
  const OMIT = [
10
- 'arrow',
11
10
  'options',
12
11
  'option',
13
12
  'scrollbar',
@@ -28,15 +27,8 @@ function set(state, value) {
28
27
  field = null;
29
28
  }
30
29
  }
31
- const option = template.factory(function (attributes, content) {
32
- return html `
33
- <div class='link --padding-400' ${attributes}>
34
- ${content}
35
- </div>
36
- `;
37
- });
38
30
  const select = template.factory(function (attributes, content) {
39
- let options = attributes.options, state = attributes.state || reactive({
31
+ let { options, option } = attributes, state = attributes.state || reactive({
40
32
  active: false,
41
33
  error: '',
42
34
  render: false,
@@ -59,7 +51,7 @@ const select = template.factory(function (attributes, content) {
59
51
  </div>
60
52
  `}
61
53
 
62
- ${attributes['arrow'] || html `<div class='select-arrow'></div>`}
54
+ <div class='select-arrow'></div>
63
55
 
64
56
  <input class='select-tag'
65
57
  ${{
@@ -74,7 +66,7 @@ const select = template.factory(function (attributes, content) {
74
66
  if (!state.render) {
75
67
  return;
76
68
  }
77
- let keys = Object.keys(options), selected = reactive(Object.fromEntries(keys.map(key => [key, false]))), template = attributes.option || option;
69
+ let keys = Object.keys(options), selected = reactive(Object.fromEntries(keys.map(key => [key, false])));
78
70
  return scrollbar({
79
71
  ...attributes['tooltip-content'],
80
72
  class: [
@@ -97,12 +89,15 @@ const select = template.factory(function (attributes, content) {
97
89
  },
98
90
  scrollbar: attributes.scrollbar,
99
91
  'scrollbar-container-content': attributes['scrollbar-container-content']
100
- }, keys.map((key) => {
101
- return template({
102
- class: () => selected[key] && '--active',
103
- 'data-key': key
104
- }, options[key]);
105
- }));
92
+ }, keys.map((key) => html `
93
+ <div
94
+ class='link --padding-400 ${() => selected[key] && '--active'}'
95
+ data-key='${key}'
96
+ ${option}
97
+ >
98
+ ${options[key]}
99
+ </div>
100
+ `));
106
101
  }}
107
102
  </label>
108
103
  `;
package/package.json CHANGED
@@ -48,7 +48,7 @@
48
48
  "private": false,
49
49
  "sideEffects": false,
50
50
  "type": "module",
51
- "version": "0.27.0",
51
+ "version": "0.27.1",
52
52
  "scripts": {
53
53
  "build": "run-s build:vite build:ts",
54
54
  "build:ts": "tsc && tsc-alias",
package/src/components/select/index.ts CHANGED
@@ -9,7 +9,6 @@ import './scss/index.scss';
9
9
 
10
10
 
11
11
  const OMIT = [
12
- 'arrow',
13
12
  'options',
14
13
  'option',
15
14
  'scrollbar',
@@ -19,9 +18,8 @@ const OMIT = [
19
18
 
20
19
 
21
20
  type A = {
22
- arrow?: Renderable<unknown>;
23
21
  options: Record<number | string, Renderable<unknown>>;
24
- option?: typeof option;
22
+ option?: Attributes;
25
23
  scrollbar?: Attributes;
26
24
  'scrollbar-container-content'?: Attributes;
27
25
  'tooltip-content'?: Attributes & { direction?: string };
@@ -60,20 +58,9 @@ function set(state: { active: boolean }, value: boolean) {
60
58
  }
61
59
  }
62
60
 
63
-
64
- const option = template.factory(
65
- function(attributes, content) {
66
- return html`
67
- <div class='link --padding-400' ${attributes}>
68
- ${content}
69
- </div>
70
- `;
71
- }
72
- );
73
-
74
61
  const select = template.factory<A>(
75
62
  function(attributes: A, content) {
76
- let options = attributes.options,
63
+ let { options, option } = attributes,
77
64
  state = attributes.state || reactive({
78
65
  active: false,
79
66
  error: '',
@@ -99,7 +86,7 @@ const select = template.factory<A>(
99
86
  </div>
100
87
  `}
101
88
 
102
- ${attributes['arrow'] || html`<div class='select-arrow'></div>`}
89
+ <div class='select-arrow'></div>
103
90
 
104
91
  <input class='select-tag'
105
92
  ${{
@@ -118,8 +105,7 @@ const select = template.factory<A>(
118
105
  let keys = Object.keys(options),
119
106
  selected = reactive(
120
107
  Object.fromEntries( keys.map(key => [key, false]) )
121
- ),
122
- template = attributes.option || option;
108
+ );
123
109
 
124
110
  return scrollbar(
125
111
  {
@@ -149,12 +135,15 @@ const select = template.factory<A>(
149
135
  scrollbar: attributes.scrollbar,
150
136
  'scrollbar-container-content': attributes['scrollbar-container-content']
151
137
  },
152
- keys.map((key) => {
153
- return template({
154
- class: () => selected[key] && '--active',
155
- 'data-key': key
156
- }, options[key]);
157
- })
138
+ keys.map((key) => html`
139
+ <div
140
+ class='link --padding-400 ${() => selected[key] && '--active'}'
141
+ data-key='${key}'
142
+ ${option}
143
+ >
144
+ ${options[key]}
145
+ </div>
146
+ `)
158
147
  );
159
148
  }}
160
149
  </label>