@esportsplus/ui 0.35.8 → 0.35.10
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.
- package/build/components/button/scss/index.scss +1 -1
- package/build/components/form/action.d.ts +7 -25
- package/build/components/form/action.js +9 -10
- package/build/components/form/index.d.ts +13 -1268
- package/package.json +1 -1
- package/src/components/button/scss/index.scss +2 -2
- package/src/components/form/action.ts +52 -54
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
@layer components {.button{--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-active:var(--border-color-default);--border-color-default:var(--background);--border-color-hover:var(--border-color-default);--border-color-pressed:var(--border-color-default);--border-radius:var(--border-radius-400);--border-width:0px;--box-shadow:var(--box-shadow-default);--box-shadow-default:none;--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);--font-weight:var(--font-weight-400);--line-height:var(--line-height-400);--padding-horizontal:var(--size-400);--padding-vertical:var(--size-400);--width:auto}.button.--active{--background:var(--background-active);--border-color:var(--border-color-active);--color:var(--color-active)}.button:not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--color:var(--color-hover)}.button:not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--color:var(--color-pressed)}.button--hold{--animation-duration:2.4s;--background-hold:var(--background-active)}.button--processing{--animation-duration:.64s;--border-width:var(--border-width-400);--processing-color:var(--color);--size:var(--size-400)}.button--skeleton{--animation-duration:6.4s}.button{background:var(--background);border-radius:var(--border-radius);color:var(--color);cursor:pointer;font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);padding:calc(var(--padding-vertical) - var(--border-width))calc(var(--padding-horizontal) - var(--border-width));transition:all var(--transition-duration)ease-in-out;width:var(--width);flex-wrap:wrap;place-content:center;align-items:center;display:flex;position:relative}.button:after{border-radius:inherit;box-shadow:var(--box-shadow);content:"";pointer-events:none;transition:box-shadow var(--transition-duration)ease-in-out,opacity var(--transition-duration)ease-in-out;z-index:-1;position:absolute;inset:0}.button--flat:after{display:none}.button--hold{overflow:hidden}.button--hold:after{box-shadow:unset;background:var(--background-hold);z-index:1;border-radius:0;width:110%;height:100%;display:block;transform:translate(-150
|
|
1
|
+
@layer components {.button{--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-active:var(--border-color-default);--border-color-default:var(--background);--border-color-hover:var(--border-color-default);--border-color-pressed:var(--border-color-default);--border-radius:var(--border-radius-400);--border-width:0px;--box-shadow:var(--box-shadow-default);--box-shadow-default:none;--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);--font-weight:var(--font-weight-400);--line-height:var(--line-height-400);--padding-horizontal:var(--size-400);--padding-vertical:var(--size-400);--width:auto}.button.--active{--background:var(--background-active);--border-color:var(--border-color-active);--color:var(--color-active)}.button:not(.--active):hover{--background:var(--background-hover);--border-color:var(--border-color-hover);--color:var(--color-hover)}.button:not(.--active):active{--background:var(--background-pressed);--border-color:var(--border-color-pressed);--color:var(--color-pressed)}.button--hold{--animation-duration:2.4s;--background-hold:var(--background-active)}.button--processing{--animation-duration:.64s;--border-width:var(--border-width-400);--processing-color:var(--color);--size:var(--size-400)}.button--skeleton{--animation-duration:6.4s}.button{background:var(--background);border-radius:var(--border-radius);color:var(--color);cursor:pointer;font-size:var(--font-size);font-weight:var(--font-weight);line-height:var(--line-height);padding:calc(var(--padding-vertical) - var(--border-width))calc(var(--padding-horizontal) - var(--border-width));transition:all var(--transition-duration)ease-in-out;width:var(--width);flex-wrap:wrap;place-content:center;align-items:center;display:flex;position:relative}.button:after{border-radius:inherit;box-shadow:var(--box-shadow);content:"";pointer-events:none;transition:box-shadow var(--transition-duration)ease-in-out,opacity var(--transition-duration)ease-in-out;z-index:-1;position:absolute;inset:0}.button--flat:after{display:none}.button--hold{overflow:hidden}.button--hold:after{box-shadow:unset;background:var(--background-hold);z-index:1;border-radius:0;width:110%;height:100%;display:block;transform:translate(-150%)}.button--hold.--active:after{animation:buttonHold var(--animation-duration)ease-in-out forwards}.button--hold.--active>*{animation:buttonContentPulse calc(var(--animation-duration)/3)infinite ease-in-out}@keyframes buttonHold{to{transform:translate(0%)}}@keyframes buttonContentPulse{0%,to{opacity:1}50%{opacity:.4}}.button--hold>*{z-index:2}.button--processing{color:#0000;pointer-events:none}.button--processing:before{animation:buttonProcessing var(--animation-duration)infinite linear;border:var(--border-width)solid color-mix(in srgb,var(--processing-color),transparent 90%);border-left-color:var(--processing-color);content:"";height:var(--size);width:var(--size);border-top-color:#0000;border-right-color:#0000;border-radius:100%;position:absolute;bottom:50%;right:50%;transform:translate(50%,50%)}.button--processing *{opacity:0}@keyframes buttonProcessing{0%{transform:translate(50%,50%)rotate(0)}to{transform:translate(50%,50%)rotate(359deg)}}.button--skeleton{animation:var(--animation-duration)ease-in-out infinite buttonSkeleton;background-image:linear-gradient(270deg,var(--background-pressed),var(--background-default),var(--background-default),var(--background-pressed));color:#0000;pointer-events:none;background-size:400% 100%}.button--skeleton *{opacity:0}@keyframes buttonSkeleton{0%{background-position:200% 0}to{background-position:-200% 0}}.button--top-left,.button--top-right{top:calc((var(--padding-vertical) + var(--line-height)/2)*-1);position:absolute}.button--top-left{left:calc((var(--padding-horizontal) + var(--line-height)/2)*-1)}.button--top-right{right:calc((var(--padding-horizontal) + var(--line-height)/2)*-1)}.button--underline.--active,.button--underline:not(.--active):hover{text-decoration:underline}}
|
|
2
2
|
/*$vite$:1*/
|
|
@@ -1,33 +1,15 @@
|
|
|
1
1
|
import response, { Response } from '@esportsplus/action';
|
|
2
|
-
import { Attributes } from '@esportsplus/template';
|
|
3
|
-
type
|
|
2
|
+
import { Attributes, Renderable } from '@esportsplus/template';
|
|
3
|
+
type Errors = {
|
|
4
|
+
errors: Response<unknown>['errors'];
|
|
5
|
+
};
|
|
6
|
+
declare const _default: <T extends Record<string, any>>(attributes: {
|
|
4
7
|
action: (data: {
|
|
5
|
-
input:
|
|
8
|
+
input: T;
|
|
6
9
|
response: typeof response;
|
|
7
10
|
}) => (Promise<Errors> | Errors);
|
|
8
11
|
state?: {
|
|
9
12
|
processing: boolean;
|
|
10
13
|
};
|
|
11
|
-
} & Attributes;
|
|
12
|
-
type Errors = {
|
|
13
|
-
errors: Response<unknown>['errors'];
|
|
14
|
-
};
|
|
15
|
-
declare const _default: {
|
|
16
|
-
(): ReturnType<(this: {
|
|
17
|
-
attributes?: A | undefined;
|
|
18
|
-
content?: import("@esportsplus/template").Renderable<any>;
|
|
19
|
-
}, attributes: Readonly<A>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
|
|
20
|
-
<T extends A>(attributes: T): ReturnType<(this: {
|
|
21
|
-
attributes?: A | undefined;
|
|
22
|
-
content?: import("@esportsplus/template").Renderable<any>;
|
|
23
|
-
}, attributes: Readonly<A>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
|
|
24
|
-
<T extends import("@esportsplus/template").Renderable<any>>(content: T): ReturnType<(this: {
|
|
25
|
-
attributes?: A | undefined;
|
|
26
|
-
content?: import("@esportsplus/template").Renderable<any>;
|
|
27
|
-
}, attributes: Readonly<A>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
|
|
28
|
-
(attributes: A, content: import("@esportsplus/template").Renderable<any>): ReturnType<(this: {
|
|
29
|
-
attributes?: A | undefined;
|
|
30
|
-
content?: import("@esportsplus/template").Renderable<any>;
|
|
31
|
-
}, attributes: Readonly<A>, content: import("@esportsplus/template").Renderable<any>) => import("@esportsplus/template").Renderable<any>>;
|
|
32
|
-
};
|
|
14
|
+
} & Attributes, content: Renderable<any>) => Node;
|
|
33
15
|
export default _default;
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import response from '@esportsplus/action';
|
|
2
2
|
import { html } from '@esportsplus/template';
|
|
3
3
|
import { omit } from '@esportsplus/utilities';
|
|
4
|
-
import template from '../../components/template/index.js';
|
|
5
4
|
import input from './input.js';
|
|
6
5
|
const OMIT = ['action', 'state'];
|
|
7
6
|
function parse(input) {
|
|
@@ -26,12 +25,12 @@ function parse(input) {
|
|
|
26
25
|
return data;
|
|
27
26
|
}
|
|
28
27
|
;
|
|
29
|
-
export default
|
|
28
|
+
export default (attributes, content) => {
|
|
30
29
|
let { action, state } = attributes;
|
|
31
30
|
return html `
|
|
32
|
-
|
|
33
|
-
|
|
34
|
-
|
|
31
|
+
<form
|
|
32
|
+
${omit(attributes, OMIT)}
|
|
33
|
+
${{
|
|
35
34
|
onclick: function (event) {
|
|
36
35
|
let trigger = event.target;
|
|
37
36
|
if (trigger?.type !== 'submit') {
|
|
@@ -61,8 +60,8 @@ export default template.factory((attributes, content) => {
|
|
|
61
60
|
}
|
|
62
61
|
}
|
|
63
62
|
}}
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
68
|
-
}
|
|
63
|
+
>
|
|
64
|
+
${content}
|
|
65
|
+
</form>
|
|
66
|
+
`;
|
|
67
|
+
};
|