@milaboratories/uikit 2.2.35 → 2.2.36
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/CHANGELOG.md +6 -0
- package/dist/pl-uikit.js +503 -474
- package/dist/pl-uikit.umd.cjs +4 -4
- package/dist/src/components/PlLoaderCircular/PlLoaderCircular.vue.d.ts +8 -0
- package/dist/src/components/PlLoaderCircular/index.d.ts +1 -0
- package/dist/src/index.d.ts +1 -0
- package/dist/style.css +1 -1
- package/dist/tsconfig.lib.tsbuildinfo +1 -1
- package/package.json +2 -2
- package/src/components/PlLoaderCircular/PlLoaderCircular.vue +16 -0
- package/src/components/PlLoaderCircular/index.ts +1 -0
- package/src/components/PlLoaderCircular/pl-loader-circular.scss +67 -0
- package/src/index.ts +1 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@milaboratories/uikit",
|
|
3
|
-
"version": "2.2.
|
|
3
|
+
"version": "2.2.36",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"main": "dist/pl-uikit.umd.js",
|
|
6
6
|
"module": "dist/pl-uikit.js",
|
|
@@ -32,8 +32,8 @@
|
|
|
32
32
|
"vue-tsc": "^2.1.10",
|
|
33
33
|
"yarpm": "^1.2.0",
|
|
34
34
|
"svgo": "^3.3.2",
|
|
35
|
-
"@milaboratories/eslint-config": "^1.0.0",
|
|
36
35
|
"@platforma-sdk/model": "^1.20.11",
|
|
36
|
+
"@milaboratories/eslint-config": "^1.0.0",
|
|
37
37
|
"@milaboratories/helpers": "^1.6.11"
|
|
38
38
|
},
|
|
39
39
|
"scripts": {
|
|
@@ -0,0 +1,16 @@
|
|
|
1
|
+
<script setup lang="ts">
|
|
2
|
+
import './pl-loader-circular.scss';
|
|
3
|
+
|
|
4
|
+
withDefaults(defineProps<{
|
|
5
|
+
size?: '16' | '24' | '48' | string;
|
|
6
|
+
}>(), { size: '16' });
|
|
7
|
+
</script>
|
|
8
|
+
<template>
|
|
9
|
+
<div class="pl-loader-circular">
|
|
10
|
+
<div :style="{height: `${size}px`, width: `${size}px`, '--main-color': `${+size < 48 ? 'var(--ic-01)' :'var(--ic-02)' }`}" class="pl-circle-loader__wrapper">
|
|
11
|
+
<svg class="pl-loader-circular__svg" viewBox="25 25 50 50">
|
|
12
|
+
<circle class="pl-loader-circular__svg-circle" cx="50" cy="50" r="20" fill="none" :stroke="`${+size < 48 ? 'var(--ic-01)' :'var(--ic-02)' }`" stroke-width="2" />
|
|
13
|
+
</svg>
|
|
14
|
+
</div>
|
|
15
|
+
</div>
|
|
16
|
+
</template>
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default as PlLoaderCircular } from './PlLoaderCircular.vue';
|
|
@@ -0,0 +1,67 @@
|
|
|
1
|
+
.pl-loader-circular {
|
|
2
|
+
position: relative;
|
|
3
|
+
height: 100%;
|
|
4
|
+
display: flex;
|
|
5
|
+
align-items: center;
|
|
6
|
+
justify-content: center;
|
|
7
|
+
|
|
8
|
+
&__svg {
|
|
9
|
+
-webkit-animation: rotate 2s linear infinite;
|
|
10
|
+
animation: rotate 2s linear infinite;
|
|
11
|
+
height: 100%;
|
|
12
|
+
width: 100%;
|
|
13
|
+
-webkit-transform-origin: center center;
|
|
14
|
+
-ms-transform-origin: center center;
|
|
15
|
+
transform-origin: center center;
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
&__svg-circle {
|
|
19
|
+
stroke-dasharray: 150, 200;
|
|
20
|
+
stroke-dashoffset: -10;
|
|
21
|
+
-webkit-animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
|
|
22
|
+
animation: dash 1.5s ease-in-out infinite, color 6s ease-in-out infinite;
|
|
23
|
+
stroke-linecap: round;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
@keyframes rotate {
|
|
28
|
+
100% {
|
|
29
|
+
transform: rotate(360deg);
|
|
30
|
+
}
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
@keyframes dash {
|
|
34
|
+
0% {
|
|
35
|
+
stroke-dasharray: 1, 200;
|
|
36
|
+
stroke-dashoffset: 0;
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
50% {
|
|
40
|
+
stroke-dasharray: 89, 200;
|
|
41
|
+
stroke-dashoffset: -35;
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
100% {
|
|
45
|
+
stroke-dasharray: 89, 200;
|
|
46
|
+
stroke-dashoffset: -124;
|
|
47
|
+
}
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
@keyframes color {
|
|
51
|
+
0% {
|
|
52
|
+
stroke: var(--ic-02);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
40% {
|
|
56
|
+
stroke: var(--ic-02);
|
|
57
|
+
}
|
|
58
|
+
|
|
59
|
+
66% {
|
|
60
|
+
stroke: var(--ic-02);
|
|
61
|
+
}
|
|
62
|
+
|
|
63
|
+
80%,
|
|
64
|
+
90% {
|
|
65
|
+
stroke: var(--ic-02);
|
|
66
|
+
}
|
|
67
|
+
}
|
package/src/index.ts
CHANGED
|
@@ -49,6 +49,7 @@ export * from './components/PlTabs';
|
|
|
49
49
|
export * from './components/PlSectionSeparator';
|
|
50
50
|
export * from './components/PlAccordion';
|
|
51
51
|
export * from './components/PlStatusTag';
|
|
52
|
+
export * from './components/PlLoaderCircular';
|
|
52
53
|
|
|
53
54
|
export * from './components/PlFileDialog';
|
|
54
55
|
export * from './components/PlFileInput';
|