@esportsplus/ui 0.26.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 (10) hide show
  1. package/build/components/range/scss/index.scss +1 -1
  2. package/build/components/select/index.d.ts +1 -20
  3. package/build/components/select/index.js +12 -17
  4. package/build/css-utilities/flex/scss/index.scss +1 -1
  5. package/package.json +1 -1
  6. package/src/components/range/scss/index.scss +1 -1
  7. package/src/components/range/scss/variables.scss +2 -0
  8. package/src/components/select/index.ts +13 -24
  9. package/src/css-utilities/flex/scss/index.scss +7 -0
  10. package/src/css-utilities/flex/scss/variables.scss +39 -0
package/build/components/range/scss/index.scss CHANGED
@@ -1,2 +1,2 @@
1
- @layer components {.range{--background:var(--background-default);--background-active:var(--background-default);--background-default:var(--color-black-300);--background-hover:var(--background-default);--background-pressed:var(--background-default);--border-width:var(--border-width-700);--height:var(--size-200);--thumb-background:var(--color-white-400);--thumb-size:var(--size-400);--width:100%}.range label:not(.--active):not(.--active):hover,.range:not(.--active):not(.--active):hover{--background:var(--background-hover)}.range label:not(.--active):not(.--active):active,.range:not(.--active):not(.--active):active{--background:var(--background-pressed)}.range.--active{--background:var(--background-active)}.range{background:var(--background);height:var(--height);margin:calc((var(--thumb-size) - var(--height))/2)0;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;width:var(--width);border:0;border-radius:240px}.range::-moz-range-thumb{background:var(--thumb-background);border:var(--border-width)solid var(--border-color);cursor:pointer;height:var(--thumb-size);width:var(--thumb-size);border-radius:100%}.range::-webkit-slider-thumb{background:var(--thumb-background);border:var(--border-width)solid var(--border-color);cursor:pointer;height:var(--thumb-size);width:var(--thumb-size);border-radius:100%}.range{appearance:none;outline:none}.range::-moz-range-thumb{appearance:none;outline:none}.range::-webkit-slider-thumb{appearance:none;outline:none}}
1
+ @layer components {.range{--background:var(--background-default);--background-active:var(--background-default);--background-default:var(--color-black-300);--background-hover:var(--background-default);--background-pressed:var(--background-default);--border-width:var(--border-width-700);--height:var(--size-200);--margin-horizontal:0;--margin-vertical:0;--thumb-background:var(--color-white-400);--thumb-size:var(--size-400);--width:100%}.range label:not(.--active):not(.--active):hover,.range:not(.--active):not(.--active):hover{--background:var(--background-hover)}.range label:not(.--active):not(.--active):active,.range:not(.--active):not(.--active):active{--background:var(--background-pressed)}.range.--active{--background:var(--background-active)}.range{background:var(--background);height:var(--height);margin:calc(var(--margin-vertical) + (var(--thumb-size) - var(--height))/2)var(--margin-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;width:var(--width);border:0;border-radius:240px}.range::-moz-range-thumb{background:var(--thumb-background);border:var(--border-width)solid var(--border-color);cursor:pointer;height:var(--thumb-size);width:var(--thumb-size);border-radius:100%}.range::-webkit-slider-thumb{background:var(--thumb-background);border:var(--border-width)solid var(--border-color);cursor:pointer;height:var(--thumb-size);width:var(--thumb-size);border-radius:100%}.range{appearance:none;outline:none}.range::-moz-range-thumb{appearance:none;outline:none}.range::-webkit-slider-thumb{appearance:none;outline:none}}
2
2
  /*$vite$:1*/
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/build/css-utilities/flex/scss/index.scss CHANGED
@@ -1,2 +1,2 @@
1
- @layer css-utilities {.--flex-center{flex-flow:wrap;place-content:center;display:flex}.--flex-column{flex-flow:column;display:flex}.--flex-end{flex-flow:wrap;justify-content:flex-end;display:flex}.--flex-fill{flex:1;min-width:0;display:flex}.--flex-fixed{flex:0 0 var(--width);display:flex}.--flex-horizontal{flex-flow:wrap;justify-content:center;display:flex}.--flex-horizontal-space-between{flex-flow:wrap;justify-content:space-between;display:flex}.--flex-row{flex-flow:row;display:flex}.--flex-start{flex-flow:wrap;justify-content:flex-start;display:flex}.--flex-vertical{flex-flow:wrap;align-items:center;display:flex}.--flex-vertical-space-between{align-items:space-between;flex-flow:wrap;display:flex}}
1
+ @layer css-utilities {.--flex-gap-border-width,.--flex-gap-horizontal-border-width,.--flex-gap-border-width-400,.--flex-gap-horizontal-border-width-400,.--flex-gap-border-width,.--flex-gap-horizontal-border-width{--gap-horizontal:var(--border-width-400)}.--flex-gap-border-width-500,.--flex-gap-horizontal-border-width-500{--gap-horizontal:var(--border-width-500)}.--flex-gap-border-width-600,.--flex-gap-horizontal-border-width-600{--gap-horizontal:var(--border-width-600)}.--flex-gap-border-width,.--flex-gap-horizontal-border-width{--gap-horizontal:var(--border-width-400)}.--flex-gap-border-width-700,.--flex-gap-horizontal-border-width-700{--gap-horizontal:var(--border-width-700)}.--flex-gap-spacer-100,.--flex-gap-horizontal-spacer-100{--gap-horizontal:var(--spacer-100)}.--flex-gap-spacer-200,.--flex-gap-horizontal-spacer-200{--gap-horizontal:var(--spacer-200)}.--flex-gap-spacer-300,.--flex-gap-horizontal-spacer-300{--gap-horizontal:var(--spacer-300)}.--flex-gap-spacer,.--flex-gap-horizontal-spacer,.--flex-gap-spacer-400,.--flex-gap-horizontal-spacer-400,.--flex-gap-spacer,.--flex-gap-horizontal-spacer{--gap-horizontal:var(--spacer-400)}.--flex-gap-spacer-500,.--flex-gap-horizontal-spacer-500{--gap-horizontal:var(--spacer-500)}.--flex-gap-spacer-600,.--flex-gap-horizontal-spacer-600{--gap-horizontal:var(--spacer-600)}.--flex-gap-spacer,.--flex-gap-horizontal-spacer{--gap-horizontal:var(--spacer-400)}.--flex-gap-spacer-700,.--flex-gap-horizontal-spacer-700{--gap-horizontal:var(--spacer-700)}.--flex-gap-0px,.--flex-gap-horizontal-0px{--gap-horizontal:var(--size-0px)}.--flex-gap-100,.--flex-gap-horizontal-100{--gap-horizontal:var(--size-100)}.--flex-gap-200,.--flex-gap-horizontal-200{--gap-horizontal:var(--size-200)}.--flex-gap-300,.--flex-gap-horizontal-300{--gap-horizontal:var(--size-300)}.--flex-gap-400,.--flex-gap-horizontal-400{--gap-horizontal:var(--size-400)}.--flex-gap-500,.--flex-gap-horizontal-500{--gap-horizontal:var(--size-500)}.--flex-gap-600,.--flex-gap-horizontal-600{--gap-horizontal:var(--size-600)}.--flex-gap-700,.--flex-gap-horizontal-700{--gap-horizontal:var(--size-700)}.--flex-gap-800,.--flex-gap-horizontal-800{--gap-horizontal:var(--size-800)}.--flex-gap-900,.--flex-gap-horizontal-900{--gap-horizontal:var(--size-900)}.--flex-gap-inherit,.--flex-gap-horizontal-inherit{--gap-horizontal:inherit}.--flex-gap-border-width,.--flex-gap-vertical-border-width,.--flex-gap-border-width-400,.--flex-gap-vertical-border-width-400,.--flex-gap-border-width,.--flex-gap-vertical-border-width{--gap-vertical:var(--border-width-400)}.--flex-gap-border-width-500,.--flex-gap-vertical-border-width-500{--gap-vertical:var(--border-width-500)}.--flex-gap-border-width-600,.--flex-gap-vertical-border-width-600{--gap-vertical:var(--border-width-600)}.--flex-gap-border-width,.--flex-gap-vertical-border-width{--gap-vertical:var(--border-width-400)}.--flex-gap-border-width-700,.--flex-gap-vertical-border-width-700{--gap-vertical:var(--border-width-700)}.--flex-gap-spacer-100,.--flex-gap-vertical-spacer-100{--gap-vertical:var(--spacer-100)}.--flex-gap-spacer-200,.--flex-gap-vertical-spacer-200{--gap-vertical:var(--spacer-200)}.--flex-gap-spacer-300,.--flex-gap-vertical-spacer-300{--gap-vertical:var(--spacer-300)}.--flex-gap-spacer,.--flex-gap-vertical-spacer,.--flex-gap-spacer-400,.--flex-gap-vertical-spacer-400,.--flex-gap-spacer,.--flex-gap-vertical-spacer{--gap-vertical:var(--spacer-400)}.--flex-gap-spacer-500,.--flex-gap-vertical-spacer-500{--gap-vertical:var(--spacer-500)}.--flex-gap-spacer-600,.--flex-gap-vertical-spacer-600{--gap-vertical:var(--spacer-600)}.--flex-gap-spacer,.--flex-gap-vertical-spacer{--gap-vertical:var(--spacer-400)}.--flex-gap-spacer-700,.--flex-gap-vertical-spacer-700{--gap-vertical:var(--spacer-700)}.--flex-gap-0px,.--flex-gap-vertical-0px{--gap-vertical:var(--size-0px)}.--flex-gap-100,.--flex-gap-vertical-100{--gap-vertical:var(--size-100)}.--flex-gap-200,.--flex-gap-vertical-200{--gap-vertical:var(--size-200)}.--flex-gap-300,.--flex-gap-vertical-300{--gap-vertical:var(--size-300)}.--flex-gap-400,.--flex-gap-vertical-400{--gap-vertical:var(--size-400)}.--flex-gap-500,.--flex-gap-vertical-500{--gap-vertical:var(--size-500)}.--flex-gap-600,.--flex-gap-vertical-600{--gap-vertical:var(--size-600)}.--flex-gap-700,.--flex-gap-vertical-700{--gap-vertical:var(--size-700)}.--flex-gap-800,.--flex-gap-vertical-800{--gap-vertical:var(--size-800)}.--flex-gap-900,.--flex-gap-vertical-900{--gap-vertical:var(--size-900)}.--flex-gap-inherit,.--flex-gap-vertical-inherit{--gap-vertical:inherit}.--flex-center{flex-flow:wrap;place-content:center;display:flex}.--flex-column{flex-flow:column;display:flex}.--flex-end{flex-flow:wrap;justify-content:flex-end;display:flex}.--flex-fill{flex:1;min-width:0;display:flex}.--flex-fixed{flex:0 0 var(--width);display:flex}.--flex-gap{gap:var(--gap-vertical)var(--gap-horizontal);display:flex}.--flex-horizontal{flex-flow:wrap;justify-content:center;display:flex}.--flex-horizontal-space-between{flex-flow:wrap;justify-content:space-between;display:flex}.--flex-row{flex-flow:row;display:flex}.--flex-start{flex-flow:wrap;justify-content:flex-start;display:flex}.--flex-vertical{flex-flow:wrap;align-items:center;display:flex}.--flex-vertical-space-between{align-items:space-between;flex-flow:wrap;display:flex}}
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.26.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/range/scss/index.scss CHANGED
@@ -5,7 +5,7 @@
5
5
  border-radius: 240px;
6
6
  border: 0px;
7
7
  height: var(--height);
8
- margin: calc((var(--thumb-size) - var(--height)) / 2) 0;
8
+ margin: calc(var(--margin-vertical) + ((var(--thumb-size) - var(--height)) / 2)) var(--margin-horizontal);
9
9
  transition:
10
10
  background var(--transition-duration) ease-in-out,
11
11
  border-color var(--transition-duration) ease-in-out,
package/src/components/range/scss/variables.scss CHANGED
@@ -8,6 +8,8 @@
8
8
  --background-pressed: var(--background-default);
9
9
  --border-width: var(--border-width-700);
10
10
  --height: var(--size-200);
11
+ --margin-horizontal: 0;
12
+ --margin-vertical: 0;
11
13
  --thumb-background: var(--color-white-400);
12
14
  --thumb-size: var(--size-400);
13
15
  --width: 100%;
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>
package/src/css-utilities/flex/scss/index.scss CHANGED
@@ -1,3 +1,5 @@
1
+ @use 'variables';
2
+
1
3
  .--flex {
2
4
  &-center {
3
5
  align-content: center;
@@ -28,6 +30,11 @@
28
30
  flex: 0 0 var(--width);
29
31
  }
30
32
 
33
+ &-gap {
34
+ display: flex;
35
+ gap: var(--gap-vertical) var(--gap-horizontal);
36
+ }
37
+
31
38
  &-horizontal {
32
39
  display: flex;
33
40
  flex-flow: row wrap;
package/src/css-utilities/flex/scss/variables.scss ADDED
@@ -0,0 +1,39 @@
1
+ @use '/lib';
2
+ @use '/tokens';
3
+
4
+ .--flex-gap {
5
+ @each $direction in 'horizontal' 'vertical' {
6
+ &,
7
+ &-#{$direction} {
8
+ @each $key in lib.map-keys(tokens.$border-width) {
9
+ &-border-width {
10
+ --gap-#{$direction}: var(--border-width-400);
11
+
12
+ &-#{$key} {
13
+ --gap-#{$direction}: var(--border-width-#{$key});
14
+ }
15
+ }
16
+ }
17
+
18
+ @each $key in lib.map-keys(tokens.$spacer) {
19
+ &-spacer {
20
+ --gap-#{$direction}: var(--spacer-400);
21
+
22
+ &-#{$key} {
23
+ --gap-#{$direction}: var(--spacer-#{$key});
24
+ }
25
+ }
26
+ }
27
+
28
+ @each $key in lib.map-keys(tokens.$size) {
29
+ &-#{$key} {
30
+ --gap-#{$direction}: var(--size-#{$key});
31
+ }
32
+ }
33
+
34
+ &-inherit {
35
+ --gap-#{$direction}: inherit;
36
+ }
37
+ }
38
+ }
39
+ }