@esportsplus/ui 0.31.8 → 0.32.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 (9) hide show
  1. package/build/components/container/scss/index.scss +1 -1
  2. package/build/components/select/index.d.ts +1 -0
  3. package/build/components/select/index.js +3 -6
  4. package/build/components/select/scss/index.scss +1 -1
  5. package/package.json +1 -1
  6. package/src/components/container/scss/index.scss +1 -0
  7. package/src/components/container/scss/variables.scss +2 -0
  8. package/src/components/select/index.ts +4 -6
  9. package/src/components/select/scss/index.scss +8 -11
package/build/components/container/scss/index.scss CHANGED
@@ -1,2 +1,2 @@
1
- @layer components {.container{--margin-horizontal:var(--size-600);--margin-vertical:0px;--max-width:1400px;margin:var(--margin-vertical)auto;width:min(var(--max-width),100% - var(--margin-horizontal)*2);flex-wrap:wrap;justify-content:flex-start;display:flex;position:relative}}
1
+ @layer components {.container{--gap-horizontal:0px;--gap-vertical:0px;--margin-horizontal:var(--size-600);--margin-vertical:0px;--max-width:1400px;gap:var(--gap-vertical)var(--gap-horizontal);margin:var(--margin-vertical)auto;width:min(var(--max-width),100% - var(--margin-horizontal)*2);flex-wrap:wrap;justify-content:flex-start;display:flex;position:relative}}
2
2
  /*$vite$:1*/
package/build/components/select/index.d.ts CHANGED
@@ -2,6 +2,7 @@ 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?: Attributes;
5
6
  options: Record<number | string, Renderable<unknown>>;
6
7
  option?: Attributes;
7
8
  scrollbar?: Attributes;
package/build/components/select/index.js CHANGED
@@ -7,6 +7,7 @@ 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',
10
11
  'options',
11
12
  'option',
12
13
  'scrollbar',
@@ -52,13 +53,9 @@ const select = template.factory(function (attributes, content) {
52
53
  }}
53
54
  ${omit(attributes, OMIT)}
54
55
  >
55
- ${content || html `
56
- <div class='select-content text'>
57
- ${() => options[state.selected] || '-'}
58
- </div>
59
- `}
56
+ ${content || (() => options[state.selected] || '-')}
60
57
 
61
- <div class='select-arrow'></div>
58
+ <div class='select-arrow' ${attributes.arrow}></div>
62
59
 
63
60
  <input class='select-tag'
64
61
  ${{
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);--border-style:solid;--border-width:0px;--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{cursor:pointer;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(--border-color);border-style:var(--border-style);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-content{background:var(--background);border:var(--border-width)var(--border-style)var(--border-color);border-radius:var(--border-radius);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)}.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);--border-style:solid;--border-width:0px;--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);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.31.8",
51
+ "version": "0.32.1",
52
52
  "scripts": {
53
53
  "build": "run-s build:vite build:ts",
54
54
  "build:ts": "tsc && tsc-alias",
package/src/components/container/scss/index.scss CHANGED
@@ -3,6 +3,7 @@
3
3
  .container {
4
4
  display: flex;
5
5
  flex-wrap: wrap;
6
+ gap: var(--gap-vertical) var(--gap-horizontal);
6
7
  justify-content: flex-start;
7
8
  margin: var(--margin-vertical) auto;
8
9
  position: relative;
package/src/components/container/scss/variables.scss CHANGED
@@ -1,4 +1,6 @@
1
1
  .container {
2
+ --gap-horizontal: 0px;
3
+ --gap-vertical: 0px;
2
4
  --margin-horizontal: var(--size-600);
3
5
  --margin-vertical: 0px;
4
6
  --max-width: 1400px;
package/src/components/select/index.ts CHANGED
@@ -9,6 +9,7 @@ import './scss/index.scss';
9
9
 
10
10
 
11
11
  const OMIT = [
12
+ 'arrow',
12
13
  'options',
13
14
  'option',
14
15
  'scrollbar',
@@ -18,6 +19,7 @@ const OMIT = [
18
19
 
19
20
 
20
21
  type A = {
22
+ arrow?: Attributes;
21
23
  options: Record<number | string, Renderable<unknown>>;
22
24
  option?: Attributes;
23
25
  scrollbar?: Attributes;
@@ -87,13 +89,9 @@ const select = template.factory<A>(
87
89
  }}
88
90
  ${omit(attributes, OMIT)}
89
91
  >
90
- ${content || html`
91
- <div class='select-content text'>
92
- ${() => options[ state.selected! ] || '-'}
93
- </div>
94
- `}
92
+ ${content || (() => options[ state.selected! ] || '-')}
95
93
 
96
- <div class='select-arrow'></div>
94
+ <div class='select-arrow' ${attributes.arrow}></div>
97
95
 
98
96
  <input class='select-tag'
99
97
  ${{
package/src/components/select/scss/index.scss CHANGED
@@ -2,9 +2,15 @@
2
2
  @use 'variables';
3
3
 
4
4
  .select {
5
+ background: var(--background);
6
+ border: var(--border-width) var(--border-style) var(--border-color);
7
+ border-radius: var(--border-radius);
5
8
  cursor: pointer;
6
9
  display: flex;
7
10
  flex-wrap: wrap;
11
+ font-size: var(--font-size);
12
+ line-height: var(--line-height);
13
+ padding: var(--padding-vertical) calc((var(--padding-horizontal) * 2) + var(--arrow-size)) var(--padding-vertical) var(--padding-horizontal);
8
14
  position: relative;
9
15
  transition:
10
16
  background var(--transition-duration) ease-in-out,
@@ -16,8 +22,8 @@
16
22
 
17
23
  &-arrow {
18
24
  @include lib.position(absolute, null calc(var(--padding-horizontal) + var(--arrow-spacer)) calc(50% + var(--arrow-spacer)) null);
19
- border-color: var(--border-color);
20
- border-style: var(--border-style);
25
+ border-color: var(--color);
26
+ border-style: solid;
21
27
  border-width: 0 var(--border-width) var(--border-width) 0;
22
28
  content: '';
23
29
  height: var(--arrow-size);
@@ -25,15 +31,6 @@
25
31
  width: var(--arrow-size);
26
32
  }
27
33
 
28
- &-content {
29
- background: var(--background);
30
- border: var(--border-width) var(--border-style) var(--border-color);
31
- border-radius: var(--border-radius);
32
- font-size: var(--font-size);
33
- line-height: var(--line-height);
34
- padding: var(--padding-vertical) calc((var(--padding-horizontal) * 2) + var(--arrow-size)) var(--padding-vertical) var(--padding-horizontal);
35
- }
36
-
37
34
  // Hide HTML Field Element
38
35
  &-tag {
39
36
  @include lib.position(absolute, 0 null null 0);