@esportsplus/ui 0.32.2 → 0.32.4

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/select/index.js +16 -10
  2. package/build/components/select/scss/index.scss +1 -1
  3. package/package.json +1 -1
  4. package/src/components/select/index.ts +17 -11
  5. package/src/components/select/scss/index.scss +0 -1
package/build/components/select/index.js CHANGED
@@ -14,7 +14,7 @@ const OMIT = [
14
14
  'scrollbar-container-content',
15
15
  'tooltip-content',
16
16
  ];
17
- let field = null, sb = scrollbar.bind({
17
+ let current = null, sb = scrollbar.bind({
18
18
  attributes: {
19
19
  class: 'tooltip-content',
20
20
  'scrollbar-container-content': {
@@ -22,17 +22,23 @@ let field = null, sb = scrollbar.bind({
22
22
  }
23
23
  }
24
24
  });
25
- function set(state, value) {
26
- state.active = value;
27
- if (state.active) {
28
- root.onclick.push(() => state.active = false);
29
- if (field) {
30
- field.active = false;
25
+ function set(updating, value) {
26
+ updating.active = value;
27
+ if (value) {
28
+ if (current) {
29
+ current.active = false;
31
30
  }
32
- field = state;
31
+ current = updating;
32
+ root.onclick.push(() => {
33
+ if (current !== updating) {
34
+ return;
35
+ }
36
+ current = null;
37
+ updating.active = false;
38
+ });
33
39
  }
34
- else if (field === state) {
35
- field = null;
40
+ else if (current === updating) {
41
+ current = null;
36
42
  }
37
43
  }
38
44
  const select = template.factory(function (attributes, content) {
package/build/components/select/scss/index.scss CHANGED
@@ -1,2 +1,2 @@
1
- @layer components {.select{--arrow-size:6px;--arrow-spacer:1px;--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed:var(--background-default);--border-color:var(--border-color-default);--border-color-default:var(--background);--border-radius:var(--border-radius-400);--color:var(--color-default);--color-active:var(--color-default);--color-default:var(--color-text-400);--color-hover:var(--color-default);--color-pressed:var(--color-default);--font-size:var(--font-size-400);--line-height:var(--line-height-400);--padding-horizontal:var(--size-400);--padding-vertical:var(--size-400)}.select:not(.--active):not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--box-shadow:var(--box-shadow-hover);--color:var(--color-hover)}.select:not(.--active):not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--box-shadow:var(--box-shadow-pressed);--color:var(--color-pressed)}.select.--active{--background:var(--background-active);--border-color:var(--border-color-active);--box-shadow:var(--box-shadow-active);--color:var(--color-active)}.select-arrow{--border-width:var(--border-width-500)}.select-option{--padding-horizontal:var(--size-400);--padding-vertical:var(--size-400)}.select{background:var(--background);border:var(--border-width)var(--border-style)var(--border-color);border-radius:var(--border-radius);color:var(--color);cursor:pointer;font-size:var(--font-size);line-height:var(--line-height);padding:var(--padding-vertical)calc(var(--padding-horizontal)*2 + var(--arrow-size))var(--padding-vertical)var(--padding-horizontal);transition:background var(--transition-duration)ease-in-out,border-color var(--transition-duration)ease-in-out,box-shadow var(--transition-duration)ease-in-out,opacity var(--transition-duration)ease-in-out,transform var(--transition-duration)ease-in-out;flex-wrap:wrap;width:100%;display:flex;position:relative}.select-arrow{right:calc(var(--padding-horizontal) + var(--arrow-spacer));bottom:calc(50% + var(--arrow-spacer));border-color:var(--color);border-style:solid;border-width:0 var(--border-width)var(--border-width)0;content:"";height:var(--arrow-size);width:var(--arrow-size);position:absolute;transform:translateY(50%)rotate(45deg)}.select-tag{opacity:0;pointer-events:none;z-index:0;width:0;height:0;position:absolute;top:0;left:0}}
1
+ @layer components {.select{--arrow-size:6px;--arrow-spacer:1px;--background:var(--background-default);--background-active:var(--background-default);--background-default:transparent;--background-hover:var(--background-default);--background-pressed:var(--background-default);--border-color:var(--border-color-default);--border-color-default:var(--background);--border-radius:var(--border-radius-400);--color:var(--color-default);--color-active:var(--color-default);--color-default:var(--color-text-400);--color-hover:var(--color-default);--color-pressed:var(--color-default);--font-size:var(--font-size-400);--line-height:var(--line-height-400);--padding-horizontal:var(--size-400);--padding-vertical:var(--size-400)}.select:not(.--active):not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--box-shadow:var(--box-shadow-hover);--color:var(--color-hover)}.select:not(.--active):not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--box-shadow:var(--box-shadow-pressed);--color:var(--color-pressed)}.select.--active{--background:var(--background-active);--border-color:var(--border-color-active);--box-shadow:var(--box-shadow-active);--color:var(--color-active)}.select-arrow{--border-width:var(--border-width-500)}.select-option{--padding-horizontal:var(--size-400);--padding-vertical:var(--size-400)}.select{background:var(--background);border-radius:var(--border-radius);color:var(--color);cursor:pointer;font-size:var(--font-size);line-height:var(--line-height);padding:var(--padding-vertical)calc(var(--padding-horizontal)*2 + var(--arrow-size))var(--padding-vertical)var(--padding-horizontal);transition:background var(--transition-duration)ease-in-out,border-color var(--transition-duration)ease-in-out,box-shadow var(--transition-duration)ease-in-out,opacity var(--transition-duration)ease-in-out,transform var(--transition-duration)ease-in-out;flex-wrap:wrap;width:100%;display:flex;position:relative}.select-arrow{right:calc(var(--padding-horizontal) + var(--arrow-spacer));bottom:calc(50% + var(--arrow-spacer));border-color:var(--color);border-style:solid;border-width:0 var(--border-width)var(--border-width)0;content:"";height:var(--arrow-size);width:var(--arrow-size);position:absolute;transform:translateY(50%)rotate(45deg)}.select-tag{opacity:0;pointer-events:none;z-index:0;width:0;height:0;position:absolute;top:0;left:0}}
2
2
  /*$vite$:1*/
package/package.json CHANGED
@@ -48,7 +48,7 @@
48
48
  "private": false,
49
49
  "sideEffects": false,
50
50
  "type": "module",
51
- "version": "0.32.2",
51
+ "version": "0.32.4",
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
@@ -40,7 +40,7 @@ type A = {
40
40
  ) & Attributes & Attr;
41
41
 
42
42
 
43
- let field: { active: boolean } | null = null,
43
+ let current: { active: boolean } | null = null,
44
44
  sb = scrollbar.bind({
45
45
  attributes: {
46
46
  class: 'tooltip-content',
@@ -50,20 +50,26 @@ let field: { active: boolean } | null = null,
50
50
  }
51
51
  });
52
52
 
53
- function set(state: { active: boolean }, value: boolean) {
54
- state.active = value;
53
+ function set(updating: { active: boolean }, value: boolean) {
54
+ updating.active = value;
55
55
 
56
- if (state.active) {
57
- root.onclick.push(() => state.active = false);
58
-
59
- if (field) {
60
- field.active = false;
56
+ if (value) {
57
+ if (current) {
58
+ current.active = false;
61
59
  }
62
60
 
63
- field = state;
61
+ current = updating;
62
+ root.onclick.push(() => {
63
+ if (current !== updating) {
64
+ return;
65
+ }
66
+
67
+ current = null;
68
+ updating.active = false;
69
+ });
64
70
  }
65
- else if (field === state) {
66
- field = null;
71
+ else if (current === updating) {
72
+ current = null;
67
73
  }
68
74
  }
69
75
 
package/src/components/select/scss/index.scss CHANGED
@@ -3,7 +3,6 @@
3
3
 
4
4
  .select {
5
5
  background: var(--background);
6
- border: var(--border-width) var(--border-style) var(--border-color);
7
6
  border-radius: var(--border-radius);
8
7
  color: var(--color);
9
8
  cursor: pointer;