@dataloop-ai/components 0.19.248 → 0.19.249
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/favicon.ico +0 -0
- package/package.json +2 -2
- package/src/components/compound/DlTable/components/DlTd.vue +1 -0
- package/src/components/essential/DlSpinner/DlSpinner.vue +3 -10
- package/src/components/essential/DlSpinner/types.ts +1 -2
- package/src/demos/DlDemoPage.vue +14 -11
- package/src/components/essential/DlSpinner/components/DlSpinnerLogo.vue +0 -152
package/favicon.ico
CHANGED
|
Binary file
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@dataloop-ai/components",
|
|
3
|
-
"version": "0.19.
|
|
3
|
+
"version": "0.19.249",
|
|
4
4
|
"exports": {
|
|
5
5
|
".": "./index.ts",
|
|
6
6
|
"./models": "./models.ts",
|
|
@@ -22,7 +22,7 @@
|
|
|
22
22
|
"check-only": "if grep -E -H -r --exclude-dir=.git --exclude-dir=node_modules --exclude=*.json --exclude=*.yml '^(describe|it).only' .; then echo 'Found only in test files' && exit 1; fi"
|
|
23
23
|
},
|
|
24
24
|
"dependencies": {
|
|
25
|
-
"@dataloop-ai/icons": "^3.0.
|
|
25
|
+
"@dataloop-ai/icons": "^3.0.70",
|
|
26
26
|
"@types/flat": "^5.0.2",
|
|
27
27
|
"@types/lodash": "^4.14.184",
|
|
28
28
|
"@types/sortablejs": "^1.15.7",
|
|
@@ -75,6 +75,7 @@ export default defineComponent({
|
|
|
75
75
|
)
|
|
76
76
|
}
|
|
77
77
|
if (vm.vnode.key === 'visibleColumnsSlot') {
|
|
78
|
+
// todo: this assumes that if a column is actions slot then its always sticky. we need to see if its true
|
|
78
79
|
styles = styles.concat(
|
|
79
80
|
'position: sticky; right: 0; z-index: 101;'
|
|
80
81
|
)
|
|
@@ -9,11 +9,7 @@
|
|
|
9
9
|
:icon-size="iconSize"
|
|
10
10
|
:icon-color="iconColor"
|
|
11
11
|
/>
|
|
12
|
-
<div
|
|
13
|
-
v-if="text"
|
|
14
|
-
class="dl-spinner-text"
|
|
15
|
-
:style="textStyles"
|
|
16
|
-
>
|
|
12
|
+
<div v-if="text" class="dl-spinner-text" :style="textStyles">
|
|
17
13
|
<span>{{ text }}</span>
|
|
18
14
|
</div>
|
|
19
15
|
</div>
|
|
@@ -25,7 +21,6 @@ import DlSpinnerGrid from './components/DlSpinnerGrid.vue'
|
|
|
25
21
|
import DlSpinnerCircle from './components/DlSpinnerCircle.vue'
|
|
26
22
|
import DlSpinnerClock from './components/DlSpinnerClock.vue'
|
|
27
23
|
import DlSpinnerDots from './components/DlSpinnerDots.vue'
|
|
28
|
-
import DlSpinnerLogo from './components/DlSpinnerLogo.vue'
|
|
29
24
|
import { DlSpinnerTypes } from './types'
|
|
30
25
|
|
|
31
26
|
export default defineComponent({
|
|
@@ -33,8 +28,7 @@ export default defineComponent({
|
|
|
33
28
|
DlSpinnerGrid,
|
|
34
29
|
DlSpinnerCircle,
|
|
35
30
|
DlSpinnerClock,
|
|
36
|
-
DlSpinnerDots
|
|
37
|
-
DlSpinnerLogo
|
|
31
|
+
DlSpinnerDots
|
|
38
32
|
},
|
|
39
33
|
props: {
|
|
40
34
|
text: {
|
|
@@ -85,9 +79,8 @@ export default defineComponent({
|
|
|
85
79
|
return 'DlSpinnerDots'
|
|
86
80
|
case DlSpinnerTypes.CLOCK:
|
|
87
81
|
return 'DlSpinnerClock'
|
|
88
|
-
case DlSpinnerTypes.LOGO:
|
|
89
82
|
default:
|
|
90
|
-
return '
|
|
83
|
+
return 'DlSpinnerGrid'
|
|
91
84
|
}
|
|
92
85
|
}
|
|
93
86
|
}
|
package/src/demos/DlDemoPage.vue
CHANGED
|
@@ -10,13 +10,22 @@
|
|
|
10
10
|
>
|
|
11
11
|
<div
|
|
12
12
|
style="
|
|
13
|
-
background-image: url(https://dataloop.ai/wp-content/uploads/
|
|
13
|
+
background-image: url(https://dataloop.ai/wp-content/uploads/2024/02/dataloop-logo-main.svg);
|
|
14
14
|
width: 160px;
|
|
15
|
-
height:
|
|
15
|
+
height: 48px;
|
|
16
16
|
display: inline-block;
|
|
17
|
+
background-repeat: no-repeat;
|
|
17
18
|
"
|
|
18
19
|
/>
|
|
19
|
-
|
|
20
|
+
<div
|
|
21
|
+
style="
|
|
22
|
+
position: relative;
|
|
23
|
+
top: -12px;
|
|
24
|
+
display: inline-block;
|
|
25
|
+
"
|
|
26
|
+
>
|
|
27
|
+
Components library
|
|
28
|
+
</div>
|
|
20
29
|
</dl-typography>
|
|
21
30
|
<div style="display: flex; align-items: center">
|
|
22
31
|
<dl-icon
|
|
@@ -26,10 +35,7 @@
|
|
|
26
35
|
!darkMode ? 'dl-color-secondary' : 'dl-color-darker'
|
|
27
36
|
"
|
|
28
37
|
/>
|
|
29
|
-
<dl-switch
|
|
30
|
-
v-model="darkMode"
|
|
31
|
-
style="margin: 0 20px"
|
|
32
|
-
/>
|
|
38
|
+
<dl-switch v-model="darkMode" style="margin: 0 20px" />
|
|
33
39
|
<dl-icon
|
|
34
40
|
icon="icon-dl-dark-theme"
|
|
35
41
|
size="20px"
|
|
@@ -45,10 +51,7 @@
|
|
|
45
51
|
style="margin-bottom: 5px"
|
|
46
52
|
/>
|
|
47
53
|
|
|
48
|
-
<dl-button
|
|
49
|
-
v-if="activeDemo"
|
|
50
|
-
outlined
|
|
51
|
-
>
|
|
54
|
+
<dl-button v-if="activeDemo" outlined>
|
|
52
55
|
<span style="text-transform: capitalize">
|
|
53
56
|
Selected: {{ computeDemoName(activeDemo.name) }}
|
|
54
57
|
</span>
|
|
@@ -1,152 +0,0 @@
|
|
|
1
|
-
<template>
|
|
2
|
-
<div class="dl-spinner-wrapper">
|
|
3
|
-
<div
|
|
4
|
-
class="dl-spinner"
|
|
5
|
-
:style="spinnerStyles"
|
|
6
|
-
>
|
|
7
|
-
<div class="dl-spin-bg">
|
|
8
|
-
<svg
|
|
9
|
-
id="dl-Layer_2"
|
|
10
|
-
data-name="Layer 2"
|
|
11
|
-
viewBox="0 0 140 140"
|
|
12
|
-
>
|
|
13
|
-
<g
|
|
14
|
-
id="Layer_1-2"
|
|
15
|
-
data-name="Layer 1"
|
|
16
|
-
>
|
|
17
|
-
<path
|
|
18
|
-
class="dl-svg"
|
|
19
|
-
d="M70,0C31.33,0,0,31.33,0,70s31.33,70,70,70,70-31.33,70-70S108.67,0,70,0Zm0,131.97c-34.2,0-61.97-27.77-61.97-61.97S35.8,8.03,70,8.03s61.97,27.77,61.97,61.97-27.77,61.97-61.97,61.97Z"
|
|
20
|
-
/>
|
|
21
|
-
</g>
|
|
22
|
-
</svg>
|
|
23
|
-
</div>
|
|
24
|
-
<div class="dl-spin-loader">
|
|
25
|
-
<svg
|
|
26
|
-
id="dl-Layer_2"
|
|
27
|
-
data-name="Layer 2"
|
|
28
|
-
viewBox="0 0 140 140"
|
|
29
|
-
>
|
|
30
|
-
<defs>
|
|
31
|
-
<linearGradient
|
|
32
|
-
id="linear-gradient"
|
|
33
|
-
x1="12.53"
|
|
34
|
-
y1="229.07"
|
|
35
|
-
x2="119.46"
|
|
36
|
-
y2="229.07"
|
|
37
|
-
gradientTransform="translate(0 246.89) scale(1 -1)"
|
|
38
|
-
gradientUnits="userSpaceOnUse"
|
|
39
|
-
>
|
|
40
|
-
<stop
|
|
41
|
-
offset="0"
|
|
42
|
-
:stop-color="color"
|
|
43
|
-
stop-opacity="0"
|
|
44
|
-
/>
|
|
45
|
-
<stop
|
|
46
|
-
offset=".12"
|
|
47
|
-
:stop-color="color"
|
|
48
|
-
stop-opacity="0"
|
|
49
|
-
/>
|
|
50
|
-
<stop
|
|
51
|
-
offset=".34"
|
|
52
|
-
:stop-color="color"
|
|
53
|
-
/>
|
|
54
|
-
<stop
|
|
55
|
-
offset=".69"
|
|
56
|
-
:stop-color="color"
|
|
57
|
-
/>
|
|
58
|
-
<stop
|
|
59
|
-
offset=".91"
|
|
60
|
-
:stop-color="color"
|
|
61
|
-
stop-opacity="0"
|
|
62
|
-
/>
|
|
63
|
-
</linearGradient>
|
|
64
|
-
</defs>
|
|
65
|
-
<g
|
|
66
|
-
id="dl-Layer_1-2"
|
|
67
|
-
data-name="Layer 1"
|
|
68
|
-
>
|
|
69
|
-
<g>
|
|
70
|
-
<path
|
|
71
|
-
class="dl-spinner-color-bg"
|
|
72
|
-
d="M70,0C31.33,0,0,31.33,0,70s31.33,70,70,70,70-31.33,70-70S108.67,0,70,0Zm0,131.97c-34.2,0-61.97-27.77-61.97-61.97S35.8,8.03,70,8.03s61.97,27.77,61.97,61.97-27.77,61.97-61.97,61.97Z"
|
|
73
|
-
/>
|
|
74
|
-
<path
|
|
75
|
-
class="dl-spinner-color"
|
|
76
|
-
d="M114.87,25.82c1.38-1.38,2.87-2.75,4.25-4.13,.46-.34,.46-1.03,0-1.49C106.49,7.69,89.16,0,70,0,46.36,0,25.48,11.7,12.74,29.72c-.34,.46-.23,.92,.11,1.38l4.25,4.25c.46,.46,1.15,.34,1.61-.11,11.25-16.52,29.95-27.2,51.3-27.2,16.98,0,32.25,6.77,43.49,17.79,.34,.34,1.03,.34,1.38,0Z"
|
|
77
|
-
/>
|
|
78
|
-
</g>
|
|
79
|
-
</g>
|
|
80
|
-
</svg>
|
|
81
|
-
</div>
|
|
82
|
-
<div class="dl-spinner-icon">
|
|
83
|
-
<svg
|
|
84
|
-
viewBox="0 0 51 45"
|
|
85
|
-
fill="none"
|
|
86
|
-
>
|
|
87
|
-
<path
|
|
88
|
-
d="M23.2962 0.558083H0.830566V32.2536L10.1727 44.284H23.2962V38.5002H12.6195L6.39136 30.4028V6.11058H23.2962V0.558083Z"
|
|
89
|
-
:fill="iconColor"
|
|
90
|
-
/>
|
|
91
|
-
<path
|
|
92
|
-
d="M27.5224 6.11058V0.558083C33.3056 -0.137737 52.8796 3.56565 50.6553 25.0816C48.9091 41.9727 34.3436 44.901 27.5224 44.284V38.5002C41.2242 39.4256 45.0945 29.1689 45.3169 23.9249C46.2067 8.19281 33.8246 5.49365 27.5224 6.11058Z"
|
|
93
|
-
:fill="iconColor"
|
|
94
|
-
/>
|
|
95
|
-
<path
|
|
96
|
-
d="M23.2962 19.0664V13.5139H13.0643V27.3952L16.8457 31.7909H23.2962V26.2384H19.07L18.6251 25.5443V19.0664H23.2962Z"
|
|
97
|
-
:fill="iconColor"
|
|
98
|
-
/>
|
|
99
|
-
<path
|
|
100
|
-
d="M27.5224 19.0664V13.5139C31.2296 13.2054 38.644 14.5782 38.644 22.5367C38.644 30.4953 31.2296 32.0223 27.5224 31.7909V26.2384C29.3018 26.7782 33.3056 26.9038 33.3056 22.9994C33.3056 19.0664 29.5984 18.758 27.5224 19.0664Z"
|
|
101
|
-
:fill="iconColor"
|
|
102
|
-
/>
|
|
103
|
-
</svg>
|
|
104
|
-
</div>
|
|
105
|
-
</div>
|
|
106
|
-
</div>
|
|
107
|
-
</template>
|
|
108
|
-
|
|
109
|
-
<script>
|
|
110
|
-
import { defineComponent } from 'vue-demi'
|
|
111
|
-
|
|
112
|
-
export default defineComponent({
|
|
113
|
-
props: {
|
|
114
|
-
size: {
|
|
115
|
-
type: String,
|
|
116
|
-
default: '140px'
|
|
117
|
-
},
|
|
118
|
-
iconSize: {
|
|
119
|
-
type: String,
|
|
120
|
-
default: '50px'
|
|
121
|
-
},
|
|
122
|
-
borderColor: {
|
|
123
|
-
type: String,
|
|
124
|
-
default: 'var(--dl-color-separator)'
|
|
125
|
-
},
|
|
126
|
-
color: {
|
|
127
|
-
type: String,
|
|
128
|
-
default: 'var(--dl-color-secondary)'
|
|
129
|
-
},
|
|
130
|
-
iconColor: {
|
|
131
|
-
type: String,
|
|
132
|
-
default: 'var(--dl-color-tooltip-background)'
|
|
133
|
-
}
|
|
134
|
-
},
|
|
135
|
-
computed: {
|
|
136
|
-
spinnerStyles() {
|
|
137
|
-
return {
|
|
138
|
-
'--dl-spinner-size': this.size,
|
|
139
|
-
'--dl-spinner-icon-size': this.iconSize,
|
|
140
|
-
'--dl-spinner-border-color': this.borderColor,
|
|
141
|
-
'--icon-top': `${
|
|
142
|
-
parseInt(this.size) / 2 -
|
|
143
|
-
parseInt(this.iconSize) / 2 +
|
|
144
|
-
parseInt(this.iconSize) / 25
|
|
145
|
-
}px`
|
|
146
|
-
}
|
|
147
|
-
}
|
|
148
|
-
}
|
|
149
|
-
})
|
|
150
|
-
</script>
|
|
151
|
-
|
|
152
|
-
<style lang="scss" src="../styles/spinnerStyles.scss" />
|