@exakt/ui 0.0.51 → 0.0.53
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/module.json
CHANGED
|
@@ -25,7 +25,7 @@
|
|
|
25
25
|
v-if="loading"
|
|
26
26
|
class="load-overlay"
|
|
27
27
|
>
|
|
28
|
-
<e-loading-spinner />
|
|
28
|
+
<e-loading-spinner size="1.25" />
|
|
29
29
|
</div>
|
|
30
30
|
<span
|
|
31
31
|
class="actual-content d-flex fullwidth"
|
|
@@ -245,9 +245,6 @@ const textColor = computed(() => {
|
|
|
245
245
|
}
|
|
246
246
|
}
|
|
247
247
|
|
|
248
|
-
.loading-spinner {
|
|
249
|
-
max-height: 1rem;
|
|
250
|
-
}
|
|
251
248
|
|
|
252
249
|
.load-overlay {
|
|
253
250
|
position: absolute;
|
|
@@ -26,6 +26,7 @@
|
|
|
26
26
|
ref="input"
|
|
27
27
|
v-model="currentText"
|
|
28
28
|
class="input"
|
|
29
|
+
:name="name"
|
|
29
30
|
:placeholder="placeholder"
|
|
30
31
|
autocomplete="off"
|
|
31
32
|
auto-grow
|
|
@@ -40,11 +41,12 @@
|
|
|
40
41
|
v-model="currentText"
|
|
41
42
|
:disabled="disabled"
|
|
42
43
|
:type="type"
|
|
44
|
+
:name="name"
|
|
43
45
|
:autocomplete="autocomplete"
|
|
44
46
|
:spellcheck="spellcheck"
|
|
45
47
|
class="input"
|
|
46
48
|
:required="required"
|
|
47
|
-
:placeholder="
|
|
49
|
+
:placeholder="placeholder"
|
|
48
50
|
@click.stop=""
|
|
49
51
|
@focus="inputState.focused = true"
|
|
50
52
|
@blur="inputState.focused = false"
|
|
@@ -91,9 +93,9 @@ const currentText = computed({
|
|
|
91
93
|
const props = withDefaults(
|
|
92
94
|
defineProps<{
|
|
93
95
|
icon?: string;
|
|
94
|
-
label
|
|
96
|
+
label?: string;
|
|
95
97
|
placeholder?: string;
|
|
96
|
-
|
|
98
|
+
name?: string;
|
|
97
99
|
modelValue?: string;
|
|
98
100
|
solid?: boolean;
|
|
99
101
|
rounded?: boolean;
|
|
@@ -1,10 +1,9 @@
|
|
|
1
1
|
<template>
|
|
2
|
-
<div class="cont flex-center">
|
|
2
|
+
<div class="cont d-flex flex-center">
|
|
3
3
|
<svg
|
|
4
4
|
class="spinner"
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
viewBox="0 0 66 66"
|
|
5
|
+
viewBox="0 0 66 66"
|
|
6
|
+
|
|
8
7
|
xmlns="http://www.w3.org/2000/svg"
|
|
9
8
|
>
|
|
10
9
|
<circle
|
|
@@ -28,58 +27,70 @@
|
|
|
28
27
|
</svg>
|
|
29
28
|
</div>
|
|
30
29
|
</template>
|
|
30
|
+
<script lang="ts" setup>
|
|
31
|
+
import { computed } from '#imports';
|
|
32
|
+
|
|
33
|
+
const props = withDefaults(defineProps<{ size?: number | `${number}` }>(), { size: 2 });
|
|
34
|
+
const sizeRem = computed(()=>props.size+'rem')
|
|
35
|
+
</script>
|
|
31
36
|
<style scoped lang="scss">
|
|
32
37
|
svg {
|
|
33
38
|
stroke: currentColor;
|
|
34
39
|
}
|
|
35
40
|
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
41
|
$offset: 120;
|
|
41
42
|
$duration: 1.5s;
|
|
42
43
|
|
|
43
|
-
.cont{
|
|
44
|
+
.cont {
|
|
44
45
|
position: relative;
|
|
45
|
-
height:
|
|
46
|
-
width:
|
|
46
|
+
height: v-bind('sizeRem');
|
|
47
|
+
width: v-bind('sizeRem');
|
|
47
48
|
}
|
|
49
|
+
|
|
48
50
|
.spinner {
|
|
49
51
|
animation: rotator $duration linear infinite;
|
|
52
|
+
|
|
50
53
|
position: absolute;
|
|
51
54
|
z-index: 2;
|
|
52
|
-
top:0;
|
|
53
|
-
height: 100%;
|
|
54
|
-
width:100%;
|
|
55
55
|
aspect-ratio: 1;
|
|
56
|
+
top: 0;
|
|
57
|
+
height: 100%;
|
|
58
|
+
width: 100%;
|
|
56
59
|
}
|
|
57
60
|
|
|
58
61
|
@keyframes rotator {
|
|
59
|
-
0% {
|
|
60
|
-
|
|
62
|
+
0% {
|
|
63
|
+
transform: rotate(0deg);
|
|
64
|
+
}
|
|
65
|
+
|
|
66
|
+
100% {
|
|
67
|
+
transform: rotate(270deg);
|
|
68
|
+
}
|
|
61
69
|
}
|
|
62
70
|
|
|
63
71
|
.path {
|
|
64
72
|
stroke-dasharray: $offset;
|
|
65
73
|
stroke-dashoffset: 0;
|
|
66
74
|
transform-origin: center;
|
|
67
|
-
animation:
|
|
68
|
-
dash $duration ease-in-out infinite,
|
|
75
|
+
animation: dash $duration ease-in-out infinite,
|
|
69
76
|
|
|
70
77
|
}
|
|
71
78
|
|
|
72
79
|
|
|
73
80
|
|
|
74
81
|
@keyframes dash {
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
82
|
+
0% {
|
|
83
|
+
stroke-dashoffset: $offset;
|
|
84
|
+
}
|
|
85
|
+
|
|
86
|
+
50% {
|
|
87
|
+
stroke-dashoffset: calc($offset / 4);
|
|
88
|
+
transform: rotate(5deg);
|
|
89
|
+
}
|
|
90
|
+
|
|
91
|
+
100% {
|
|
92
|
+
stroke-dashoffset: $offset;
|
|
93
|
+
transform: rotate(450deg);
|
|
94
|
+
}
|
|
84
95
|
}
|
|
85
96
|
</style>
|