@okaapp/oka-ui-sv 0.3.0 → 0.4.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.
- package/dist/components/aaengine-set/auto-buton/AutoButton.svelte +47 -0
- package/dist/components/aaengine-set/auto-buton/AutoButton.svelte.d.ts +10 -0
- package/dist/components/aaengine-set/auto-buton/auto-button.css +82 -0
- package/dist/components/aaengine-set/engine-orb/EngineOrb.svelte +97 -0
- package/dist/components/aaengine-set/engine-orb/EngineOrb.svelte.d.ts +19 -0
- package/dist/components/aaengine-set/engine-orb/engine-orb.css +52 -0
- package/dist/components/illustrations/SVG31.svelte +4 -4
- package/dist/index.d.ts +2 -0
- package/dist/index.js +3 -0
- package/package.json +1 -1
|
@@ -0,0 +1,47 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import "./auto-button.css";
|
|
3
|
+
import EngineOrb from "../engine-orb/EngineOrb.svelte";
|
|
4
|
+
|
|
5
|
+
type props = {
|
|
6
|
+
label: string;
|
|
7
|
+
onclick?: any;
|
|
8
|
+
isLoading?: boolean;
|
|
9
|
+
disabled?: boolean;
|
|
10
|
+
};
|
|
11
|
+
|
|
12
|
+
let {
|
|
13
|
+
label,
|
|
14
|
+
onclick,
|
|
15
|
+
isLoading = false,
|
|
16
|
+
disabled = false,
|
|
17
|
+
...restProps
|
|
18
|
+
}: props = $props();
|
|
19
|
+
</script>
|
|
20
|
+
|
|
21
|
+
<button
|
|
22
|
+
class={`auto-button ${isLoading && "auto-button__loading"} ${disabled && "auto-button__disabled"}`}
|
|
23
|
+
{onclick}
|
|
24
|
+
disabled={disabled || isLoading}
|
|
25
|
+
{...restProps}
|
|
26
|
+
>
|
|
27
|
+
<div
|
|
28
|
+
class={`auto-button-inner ${isLoading && "auto-button-inner__loading"}`}
|
|
29
|
+
>
|
|
30
|
+
<EngineOrb />
|
|
31
|
+
<div class="auto-button__content">
|
|
32
|
+
<span
|
|
33
|
+
class={`auto-button__title ${isLoading && "auto-button__title__loading"} ${disabled && "auto-button__title__disabled"}`}
|
|
34
|
+
>
|
|
35
|
+
{#if isLoading}
|
|
36
|
+
Chờ chút nha...
|
|
37
|
+
{:else}
|
|
38
|
+
{label}
|
|
39
|
+
{/if}
|
|
40
|
+
</span>
|
|
41
|
+
<span
|
|
42
|
+
class={`auto-button__subtitle ${isLoading && "auto-button__subtitle__loading"} ${disabled && "auto-button__subtitle__disabled"}`}
|
|
43
|
+
>Powered by AA.Engine</span
|
|
44
|
+
>
|
|
45
|
+
</div>
|
|
46
|
+
</div>
|
|
47
|
+
</button>
|
|
@@ -0,0 +1,10 @@
|
|
|
1
|
+
import "./auto-button.css";
|
|
2
|
+
type props = {
|
|
3
|
+
label: string;
|
|
4
|
+
onclick?: any;
|
|
5
|
+
isLoading?: boolean;
|
|
6
|
+
disabled?: boolean;
|
|
7
|
+
};
|
|
8
|
+
declare const AutoButton: import("svelte").Component<props, {}, "">;
|
|
9
|
+
type AutoButton = ReturnType<typeof AutoButton>;
|
|
10
|
+
export default AutoButton;
|
|
@@ -0,0 +1,82 @@
|
|
|
1
|
+
.auto-button {
|
|
2
|
+
border-radius: 80px;
|
|
3
|
+
background-color: var(--surface-primary);
|
|
4
|
+
border: 1px solid var(--accent-primary);
|
|
5
|
+
padding: 8px 20px 8px 8px;
|
|
6
|
+
width: fit-content;
|
|
7
|
+
transition: all;
|
|
8
|
+
transition-duration: 200ms;
|
|
9
|
+
cursor: pointer;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
.auto-button:hover {
|
|
13
|
+
border: 1px solid var(--accent-secondary);
|
|
14
|
+
}
|
|
15
|
+
|
|
16
|
+
.auto-button:active {
|
|
17
|
+
scale: 0.98;
|
|
18
|
+
background-color: var(--surface-secondary-surface);
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
.auto-button__loading {
|
|
22
|
+
animation: pulse 1.5s cubic-bezier(0.4, 0, 0.6, 1) infinite;
|
|
23
|
+
border: 1px solid var(--stroke-light);
|
|
24
|
+
cursor: wait;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
.auto-button__loading:hover {
|
|
28
|
+
border: 1px solid var(--stroke-light);
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
.auto-button__disabled {
|
|
32
|
+
border: 1px solid var(--stroke-light);
|
|
33
|
+
cursor: not-allowed;
|
|
34
|
+
filter: grayscale(100%)
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
.auto-button__disabled:hover {
|
|
38
|
+
border: 1px solid var(--stroke-light);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
.auto-button-inner {
|
|
42
|
+
display: flex;
|
|
43
|
+
justify-content: flex-start;
|
|
44
|
+
align-items: center;
|
|
45
|
+
overflow: hidden;
|
|
46
|
+
gap: 8px;
|
|
47
|
+
width: fit-content;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
.auto-button__content {
|
|
51
|
+
display: flex;
|
|
52
|
+
flex-direction: column;
|
|
53
|
+
justify-content: center;
|
|
54
|
+
align-items: flex-start;
|
|
55
|
+
flex-shrink: 0;
|
|
56
|
+
position: relative;
|
|
57
|
+
width: fit-content;
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
.auto-button__title {
|
|
61
|
+
flex-shrink: 0;
|
|
62
|
+
font-size: 16px;
|
|
63
|
+
font-weight: 600;
|
|
64
|
+
text-align: left;
|
|
65
|
+
color: var(--content-secondary);
|
|
66
|
+
line-height: 1.5;
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
.auto-button__subtitle {
|
|
70
|
+
flex-shrink: 0;
|
|
71
|
+
font-size: 12px;
|
|
72
|
+
font-weight: 300;
|
|
73
|
+
text-align: left;
|
|
74
|
+
color: var(--stroke-bold);
|
|
75
|
+
line-height: 1.5;
|
|
76
|
+
}
|
|
77
|
+
|
|
78
|
+
@keyframes pulse {
|
|
79
|
+
50% {
|
|
80
|
+
opacity: 0.5;
|
|
81
|
+
}
|
|
82
|
+
}
|
|
@@ -0,0 +1,97 @@
|
|
|
1
|
+
<script lang="ts">
|
|
2
|
+
import "./engine-orb.css";
|
|
3
|
+
</script>
|
|
4
|
+
|
|
5
|
+
<div class="spinning-container">
|
|
6
|
+
<svg
|
|
7
|
+
width="48"
|
|
8
|
+
height="48"
|
|
9
|
+
viewBox="0 0 48 48"
|
|
10
|
+
fill="none"
|
|
11
|
+
xmlns="http://www.w3.org/2000/svg"
|
|
12
|
+
class="w-12 h-12 relative"
|
|
13
|
+
preserveAspectRatio="xMidYMid meet"
|
|
14
|
+
>
|
|
15
|
+
<g clip-path="url(#clip0_761_1252)">
|
|
16
|
+
<ellipse
|
|
17
|
+
class="liquid-0"
|
|
18
|
+
cx="24"
|
|
19
|
+
cy="38.5"
|
|
20
|
+
rx="16"
|
|
21
|
+
ry="9.5"
|
|
22
|
+
fill="url(#paint0_radial_761_1252)"
|
|
23
|
+
style="animation: liquid1 8s linear infinite; filter: blur(4px);"
|
|
24
|
+
></ellipse>
|
|
25
|
+
<ellipse
|
|
26
|
+
class="liquid-1"
|
|
27
|
+
cx="24"
|
|
28
|
+
cy="13.5"
|
|
29
|
+
rx="22"
|
|
30
|
+
ry="13.5"
|
|
31
|
+
fill="url(#paint1_radial_761_1252)"
|
|
32
|
+
style="animation: liquid2 8s linear infinite; filter: blur(4px);"
|
|
33
|
+
></ellipse>
|
|
34
|
+
<foreignObject x="-8" y="-8" width="63.9297" height="64"
|
|
35
|
+
><div
|
|
36
|
+
xmlns="http://www.w3.org/1999/xhtml"
|
|
37
|
+
style="backdrop-filter:blur(4px);clip-path:url(#bgblur_1_761_1252_clip_path);height:100%;width:100%"
|
|
38
|
+
></div></foreignObject
|
|
39
|
+
>
|
|
40
|
+
<ellipse
|
|
41
|
+
data-figma-bg-blur-radius="8"
|
|
42
|
+
cx="23.9646"
|
|
43
|
+
cy="24"
|
|
44
|
+
rx="23.9646"
|
|
45
|
+
ry="24"
|
|
46
|
+
fill="var(--surface-primary, #fff)"
|
|
47
|
+
fill-opacity="0.16"
|
|
48
|
+
></ellipse>
|
|
49
|
+
</g>
|
|
50
|
+
<defs>
|
|
51
|
+
<clipPath
|
|
52
|
+
id="bgblur_1_761_1252_clip_path"
|
|
53
|
+
transform="translate(8 8)"
|
|
54
|
+
>
|
|
55
|
+
<ellipse cx="23.9646" cy="24" rx="23.9646" ry="24"></ellipse>
|
|
56
|
+
</clipPath>
|
|
57
|
+
<radialGradient
|
|
58
|
+
id="paint0_radial_761_1252"
|
|
59
|
+
cx="0"
|
|
60
|
+
cy="0"
|
|
61
|
+
r="1"
|
|
62
|
+
gradientUnits="userSpaceOnUse"
|
|
63
|
+
gradientTransform="translate(24 38.5) rotate(90) scale(15.4375 26)"
|
|
64
|
+
>
|
|
65
|
+
<stop stop-color="var(--accent-secondary, #4750FF)"></stop>
|
|
66
|
+
<stop
|
|
67
|
+
offset="1"
|
|
68
|
+
stop-color="var(--accent-secondary, #4750FF)"
|
|
69
|
+
stop-opacity="0"
|
|
70
|
+
></stop>
|
|
71
|
+
</radialGradient>
|
|
72
|
+
<radialGradient
|
|
73
|
+
id="paint1_radial_761_1252"
|
|
74
|
+
cx="0"
|
|
75
|
+
cy="0"
|
|
76
|
+
r="1"
|
|
77
|
+
gradientUnits="userSpaceOnUse"
|
|
78
|
+
gradientTransform="translate(24 13.5) rotate(90) scale(20.25 33)"
|
|
79
|
+
>
|
|
80
|
+
<stop stop-color="var(--accent-primary, #58C4F5)"></stop>
|
|
81
|
+
<stop
|
|
82
|
+
offset="1"
|
|
83
|
+
stop-color="var(--accent-primary, #58C4F5)"
|
|
84
|
+
stop-opacity="0"
|
|
85
|
+
></stop>
|
|
86
|
+
</radialGradient>
|
|
87
|
+
<clipPath id="clip0_761_1252">
|
|
88
|
+
<rect
|
|
89
|
+
width="48"
|
|
90
|
+
height="48"
|
|
91
|
+
rx="24"
|
|
92
|
+
fill="var(--surface-primary, #fff)"
|
|
93
|
+
></rect>
|
|
94
|
+
</clipPath>
|
|
95
|
+
</defs>
|
|
96
|
+
</svg>
|
|
97
|
+
</div>
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import "./engine-orb.css";
|
|
2
|
+
interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
|
|
3
|
+
new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
|
|
4
|
+
$$bindings?: Bindings;
|
|
5
|
+
} & Exports;
|
|
6
|
+
(internal: unknown, props: {
|
|
7
|
+
$$events?: Events;
|
|
8
|
+
$$slots?: Slots;
|
|
9
|
+
}): Exports & {
|
|
10
|
+
$set?: any;
|
|
11
|
+
$on?: any;
|
|
12
|
+
};
|
|
13
|
+
z_$$bindings?: Bindings;
|
|
14
|
+
}
|
|
15
|
+
declare const EngineOrb: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
|
|
16
|
+
[evt: string]: CustomEvent<any>;
|
|
17
|
+
}, {}, {}, string>;
|
|
18
|
+
type EngineOrb = InstanceType<typeof EngineOrb>;
|
|
19
|
+
export default EngineOrb;
|
|
@@ -0,0 +1,52 @@
|
|
|
1
|
+
@keyframes spin {
|
|
2
|
+
from {
|
|
3
|
+
transform: rotate(0deg);
|
|
4
|
+
}
|
|
5
|
+
|
|
6
|
+
to {
|
|
7
|
+
transform: rotate(360deg);
|
|
8
|
+
}
|
|
9
|
+
}
|
|
10
|
+
|
|
11
|
+
@keyframes liquid1 {
|
|
12
|
+
|
|
13
|
+
0%,
|
|
14
|
+
100% {
|
|
15
|
+
transform: scale(0.8) translateX(0) translateY(0);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
50% {
|
|
19
|
+
transform: scale(1.4) translateX(4px) translateY(-2px);
|
|
20
|
+
}
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
@keyframes liquid2 {
|
|
24
|
+
|
|
25
|
+
0%,
|
|
26
|
+
100% {
|
|
27
|
+
transform: scale(1.4) translateX(0) translateY(0);
|
|
28
|
+
}
|
|
29
|
+
|
|
30
|
+
50% {
|
|
31
|
+
transform: scale(0.7) translateX(-2px) translateY(1px);
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.liquid-0 {
|
|
36
|
+
transform-origin: 24px 38.5px;
|
|
37
|
+
animation: liquid1 8s ease-in-out infinite;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
.liquid-1 {
|
|
41
|
+
transform-origin: 24px 13.5px;
|
|
42
|
+
animation: liquid2 8s ease-in-out infinite;
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
.spinning-container {
|
|
46
|
+
width: 48px;
|
|
47
|
+
height: 48px;
|
|
48
|
+
border-radius: 9999px !important;
|
|
49
|
+
overflow: clip;
|
|
50
|
+
animation: spin 8s linear infinite;
|
|
51
|
+
transform-origin: 24px 24px;
|
|
52
|
+
}
|
|
@@ -21,7 +21,7 @@
|
|
|
21
21
|
><g style="fill:#000" class="frame-children"
|
|
22
22
|
><path
|
|
23
23
|
d="M81.902 130.6c28.001 0 50.702-22.7 50.702-50.8S109.904 29 81.902 29c-28 0-50.7 22.7-50.7 50.8s22.7 50.8 50.7 50.8"
|
|
24
|
-
style="fill: var(--
|
|
24
|
+
style="fill: var(--stroke-muted, #f3f3f4);fill-opacity:1"
|
|
25
25
|
class="fills"
|
|
26
26
|
/><path
|
|
27
27
|
d="M111.346 36.635c1.508 0 2.784 1.155 2.784 2.77v81.727c0 1.501-1.16 2.771-2.784 2.771H50.908c-1.508 0-2.784-1.155-2.784-2.77V39.405c0-1.5 1.16-2.77 2.784-2.77z"
|
|
@@ -37,7 +37,7 @@
|
|
|
37
37
|
class="fills"
|
|
38
38
|
/><path
|
|
39
39
|
d="M111.114 42.984a.913.913 0 0 0-.928-.923H52.185c-.465 0-.93.346-.93.923.697 29.897.93 63.719-2.32 72.492l55.567-.808c3.364-15.237 5.916-42.595 6.612-71.684"
|
|
40
|
-
style="fill: var(--
|
|
40
|
+
style="fill: var(--stroke-muted, #f3f3f4);fill-opacity:1"
|
|
41
41
|
class="fills"
|
|
42
42
|
/><g filter="url(#a)" style="fill:#000"
|
|
43
43
|
><defs
|
|
@@ -81,7 +81,7 @@
|
|
|
81
81
|
/></g
|
|
82
82
|
><path
|
|
83
83
|
d="M109.374 75.883c-1.624 28.165-26.797 34.053-29.812 34.399-1.393.115-4.061.346-8.817.346 12.528-5.772 19.257-16.16 19.14-24.24 6.033.46 16.473 0 19.489-10.505"
|
|
84
|
-
style="fill: var(--
|
|
84
|
+
style="fill: var(--stroke-muted, #f3f3f4);fill-opacity:1"
|
|
85
85
|
class="fills"
|
|
86
86
|
/><defs
|
|
87
87
|
><linearGradient
|
|
@@ -103,7 +103,7 @@
|
|
|
103
103
|
class="fills"
|
|
104
104
|
/><path
|
|
105
105
|
d="M81.07 36.982c.927 0 1.623-.693 1.623-1.616s-.696-1.616-1.624-1.616c-.927 0-1.624.692-1.624 1.616 0 .923.812 1.616 1.624 1.616"
|
|
106
|
-
style="fill: var(--
|
|
106
|
+
style="fill: var(--stroke-muted, #f3f3f4);fill-opacity:1"
|
|
107
107
|
class="fills"
|
|
108
108
|
/><path
|
|
109
109
|
d="M94.758 40.445c-.348 1.962-1.973 3.578-4.06 3.578H71.44c-2.088 0-3.712-1.616-4.06-3.578z"
|
package/dist/index.d.ts
CHANGED
|
@@ -14,6 +14,8 @@ export { default as Sidebar } from './components/core/sidebar/Sidebar.svelte';
|
|
|
14
14
|
export { default as Tooltips } from './components/core/tooltips/Tooltips.svelte';
|
|
15
15
|
export { default as OKAStyleProvider } from './components/styling/oka-style-provider/OKAStyleProvider.svelte';
|
|
16
16
|
export { default as ThemeSwitcher } from './components/styling/theme-switcher/ThemeSwitcher.svelte';
|
|
17
|
+
export { default as AutoButton } from './components/aaengine-set/auto-buton/AutoButton.svelte';
|
|
18
|
+
export { default as EngineOrb } from './components/aaengine-set/engine-orb/EngineOrb.svelte';
|
|
17
19
|
export { default as SVG31 } from './components/illustrations/SVG31.svelte';
|
|
18
20
|
export type * from './components/core/select/Types.js';
|
|
19
21
|
export type * from './components/core/sidebar/Types.js';
|
package/dist/index.js
CHANGED
|
@@ -16,5 +16,8 @@ export { default as Tooltips } from './components/core/tooltips/Tooltips.svelte'
|
|
|
16
16
|
// Styling & theming
|
|
17
17
|
export { default as OKAStyleProvider } from './components/styling/oka-style-provider/OKAStyleProvider.svelte';
|
|
18
18
|
export { default as ThemeSwitcher } from './components/styling/theme-switcher/ThemeSwitcher.svelte';
|
|
19
|
+
// AA Engine components
|
|
20
|
+
export { default as AutoButton } from './components/aaengine-set/auto-buton/AutoButton.svelte';
|
|
21
|
+
export { default as EngineOrb } from './components/aaengine-set/engine-orb/EngineOrb.svelte';
|
|
19
22
|
// Misc
|
|
20
23
|
export { default as SVG31 } from './components/illustrations/SVG31.svelte';
|