@progress/kendo-vue-indicators 5.3.0-dev.202409130647 → 5.3.0-develop.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/README.md +24 -28
- package/badge/Badge.js +8 -0
- package/badge/Badge.mjs +110 -0
- package/badge/BadgeContainer.js +8 -0
- package/badge/BadgeContainer.mjs +126 -0
- package/dist/cdn/js/kendo-vue-indicators.js +8 -1
- package/index.d.mts +693 -0
- package/index.d.ts +693 -0
- package/index.js +8 -0
- package/index.mjs +17 -0
- package/loader/Loader.js +8 -0
- package/loader/Loader.mjs +94 -0
- package/package-metadata.js +8 -0
- package/package-metadata.mjs +18 -0
- package/package.json +22 -43
- package/skeleton/Skeleton.js +8 -0
- package/skeleton/Skeleton.mjs +66 -0
- package/dist/es/additionalTypes.ts +0 -21
- package/dist/es/badge/Badge.d.ts +0 -50
- package/dist/es/badge/Badge.js +0 -124
- package/dist/es/badge/BadgeContainer.d.ts +0 -50
- package/dist/es/badge/BadgeContainer.js +0 -145
- package/dist/es/badge/BadgeProps.d.ts +0 -192
- package/dist/es/badge/BadgeProps.js +0 -1
- package/dist/es/loader/Loader.d.ts +0 -57
- package/dist/es/loader/Loader.js +0 -112
- package/dist/es/loader/LoaderProps.d.ts +0 -43
- package/dist/es/loader/LoaderProps.js +0 -1
- package/dist/es/loader/models/size.d.ts +0 -11
- package/dist/es/loader/models/size.js +0 -1
- package/dist/es/loader/models/theme-color.d.ts +0 -18
- package/dist/es/loader/models/theme-color.js +0 -1
- package/dist/es/loader/models/type.d.ts +0 -10
- package/dist/es/loader/models/type.js +0 -1
- package/dist/es/main.d.ts +0 -10
- package/dist/es/main.js +0 -10
- package/dist/es/package-metadata.d.ts +0 -5
- package/dist/es/package-metadata.js +0 -11
- package/dist/es/skeleton/Skeleton.d.ts +0 -57
- package/dist/es/skeleton/Skeleton.js +0 -81
- package/dist/es/skeleton/SkeletonProps.d.ts +0 -70
- package/dist/es/skeleton/SkeletonProps.js +0 -1
- package/dist/esm/additionalTypes.ts +0 -21
- package/dist/esm/badge/Badge.d.ts +0 -50
- package/dist/esm/badge/Badge.js +0 -124
- package/dist/esm/badge/BadgeContainer.d.ts +0 -50
- package/dist/esm/badge/BadgeContainer.js +0 -145
- package/dist/esm/badge/BadgeProps.d.ts +0 -192
- package/dist/esm/badge/BadgeProps.js +0 -1
- package/dist/esm/loader/Loader.d.ts +0 -57
- package/dist/esm/loader/Loader.js +0 -112
- package/dist/esm/loader/LoaderProps.d.ts +0 -43
- package/dist/esm/loader/LoaderProps.js +0 -1
- package/dist/esm/loader/models/size.d.ts +0 -11
- package/dist/esm/loader/models/size.js +0 -1
- package/dist/esm/loader/models/theme-color.d.ts +0 -18
- package/dist/esm/loader/models/theme-color.js +0 -1
- package/dist/esm/loader/models/type.d.ts +0 -10
- package/dist/esm/loader/models/type.js +0 -1
- package/dist/esm/main.d.ts +0 -10
- package/dist/esm/main.js +0 -10
- package/dist/esm/package-metadata.d.ts +0 -5
- package/dist/esm/package-metadata.js +0 -11
- package/dist/esm/package.json +0 -3
- package/dist/esm/skeleton/Skeleton.d.ts +0 -57
- package/dist/esm/skeleton/Skeleton.js +0 -81
- package/dist/esm/skeleton/SkeletonProps.d.ts +0 -70
- package/dist/esm/skeleton/SkeletonProps.js +0 -1
- package/dist/npm/additionalTypes.ts +0 -21
- package/dist/npm/badge/Badge.d.ts +0 -50
- package/dist/npm/badge/Badge.js +0 -131
- package/dist/npm/badge/BadgeContainer.d.ts +0 -50
- package/dist/npm/badge/BadgeContainer.js +0 -152
- package/dist/npm/badge/BadgeProps.d.ts +0 -192
- package/dist/npm/badge/BadgeProps.js +0 -2
- package/dist/npm/loader/Loader.d.ts +0 -57
- package/dist/npm/loader/Loader.js +0 -119
- package/dist/npm/loader/LoaderProps.d.ts +0 -43
- package/dist/npm/loader/LoaderProps.js +0 -2
- package/dist/npm/loader/models/size.d.ts +0 -11
- package/dist/npm/loader/models/size.js +0 -2
- package/dist/npm/loader/models/theme-color.d.ts +0 -18
- package/dist/npm/loader/models/theme-color.js +0 -2
- package/dist/npm/loader/models/type.d.ts +0 -10
- package/dist/npm/loader/models/type.js +0 -2
- package/dist/npm/main.d.ts +0 -10
- package/dist/npm/main.js +0 -26
- package/dist/npm/package-metadata.d.ts +0 -5
- package/dist/npm/package-metadata.js +0 -14
- package/dist/npm/skeleton/Skeleton.d.ts +0 -57
- package/dist/npm/skeleton/Skeleton.js +0 -88
- package/dist/npm/skeleton/SkeletonProps.d.ts +0 -70
- package/dist/npm/skeleton/SkeletonProps.js +0 -2
|
@@ -1,145 +0,0 @@
|
|
|
1
|
-
// @ts-ignore
|
|
2
|
-
import * as Vue from 'vue';
|
|
3
|
-
var allVue = Vue;
|
|
4
|
-
var gh = allVue.h;
|
|
5
|
-
var isV3 = allVue.version && allVue.version[0] === '3';
|
|
6
|
-
import { getDefaultSlots, getDir, getListeners, getTemplate, kendoThemeMaps, templateRendering } from '@progress/kendo-vue-common';
|
|
7
|
-
import { validatePackage } from '@progress/kendo-vue-common';
|
|
8
|
-
import { packageMetadata } from '../package-metadata';
|
|
9
|
-
/**
|
|
10
|
-
* @hidden
|
|
11
|
-
*/
|
|
12
|
-
var BadgeContainerVue2 = {
|
|
13
|
-
name: 'KendoBadgeContainer',
|
|
14
|
-
props: {
|
|
15
|
-
dir: String,
|
|
16
|
-
align: {
|
|
17
|
-
type: Object,
|
|
18
|
-
default: function _default() {
|
|
19
|
-
return {
|
|
20
|
-
vertical: 'top',
|
|
21
|
-
horizontal: 'end'
|
|
22
|
-
};
|
|
23
|
-
}
|
|
24
|
-
},
|
|
25
|
-
size: {
|
|
26
|
-
type: String,
|
|
27
|
-
default: 'medium',
|
|
28
|
-
validator: function validator(value) {
|
|
29
|
-
return ['small', 'medium', 'large'].includes(value);
|
|
30
|
-
}
|
|
31
|
-
},
|
|
32
|
-
fillMode: {
|
|
33
|
-
type: String,
|
|
34
|
-
default: 'solid',
|
|
35
|
-
validator: function validator(value) {
|
|
36
|
-
return ['solid', 'outline'].includes(value);
|
|
37
|
-
}
|
|
38
|
-
},
|
|
39
|
-
themeColor: {
|
|
40
|
-
type: String,
|
|
41
|
-
default: 'primary',
|
|
42
|
-
validator: function validator(value) {
|
|
43
|
-
return ['primary', 'secondary', 'tertiary', 'info', 'success', 'warning', 'error', 'dark', 'light', 'inverse'].includes(value);
|
|
44
|
-
}
|
|
45
|
-
},
|
|
46
|
-
rounded: {
|
|
47
|
-
type: String,
|
|
48
|
-
default: 'medium',
|
|
49
|
-
validator: function validator(value) {
|
|
50
|
-
return [null, 'small', 'medium', 'large', 'full'].includes(value);
|
|
51
|
-
}
|
|
52
|
-
},
|
|
53
|
-
position: {
|
|
54
|
-
type: String,
|
|
55
|
-
default: 'edge',
|
|
56
|
-
validator: function validator(value) {
|
|
57
|
-
return ['edge', 'outside', 'inside'].includes(value);
|
|
58
|
-
}
|
|
59
|
-
},
|
|
60
|
-
cutoutBorder: Boolean,
|
|
61
|
-
content: [String, Function, Object]
|
|
62
|
-
},
|
|
63
|
-
created: function created() {
|
|
64
|
-
validatePackage(packageMetadata);
|
|
65
|
-
this.currentDir = undefined;
|
|
66
|
-
},
|
|
67
|
-
mounted: function mounted() {
|
|
68
|
-
this.currentDir = getDir(this.$el, this.$props.dir);
|
|
69
|
-
},
|
|
70
|
-
computed: {
|
|
71
|
-
badgeContainerClasses: function badgeContainerClasses() {
|
|
72
|
-
return {
|
|
73
|
-
'k-badge-container': true
|
|
74
|
-
};
|
|
75
|
-
},
|
|
76
|
-
badgeClasses: function badgeClasses() {
|
|
77
|
-
var _a;
|
|
78
|
-
var _b = this.$props,
|
|
79
|
-
size = _b.size,
|
|
80
|
-
fillMode = _b.fillMode,
|
|
81
|
-
cutoutBorder = _b.cutoutBorder,
|
|
82
|
-
position = _b.position,
|
|
83
|
-
align = _b.align,
|
|
84
|
-
themeColor = _b.themeColor,
|
|
85
|
-
rounded = _b.rounded;
|
|
86
|
-
return _a = {
|
|
87
|
-
'k-badge': true,
|
|
88
|
-
'k-badge-sm': size === 'small',
|
|
89
|
-
'k-badge-md': size === 'medium',
|
|
90
|
-
'k-badge-lg': size === 'large'
|
|
91
|
-
}, _a["k-badge-".concat(fillMode)] = fillMode, _a["k-badge-".concat(fillMode, "-").concat(themeColor)] = Boolean(fillMode && themeColor), _a["k-rounded-".concat(kendoThemeMaps.roundedMap[rounded] || rounded)] = rounded, _a['k-badge-border-cutout'] = cutoutBorder, _a["k-badge-".concat(position)] = position, _a['k-top-start'] = align.vertical === 'top' && align.horizontal === 'start', _a['k-top-end'] = align.vertical === 'top' && align.horizontal === 'end', _a['k-bottom-start'] = align.vertical === 'bottom' && align.horizontal === 'start', _a['k-bottom-end'] = align.vertical === 'bottom' && align.horizontal === 'end', _a;
|
|
92
|
-
}
|
|
93
|
-
},
|
|
94
|
-
// @ts-ignore
|
|
95
|
-
setup: !isV3 ? undefined : function () {
|
|
96
|
-
var v3 = !!isV3;
|
|
97
|
-
return {
|
|
98
|
-
v3: v3
|
|
99
|
-
};
|
|
100
|
-
},
|
|
101
|
-
// @ts-ignore
|
|
102
|
-
render: function render(createElement) {
|
|
103
|
-
var h = gh || createElement;
|
|
104
|
-
var defaultSlot = getDefaultSlots(this);
|
|
105
|
-
var content = templateRendering.call(this, this.content, getListeners.call(this));
|
|
106
|
-
var contentElement = getTemplate.call(this, {
|
|
107
|
-
h: h,
|
|
108
|
-
template: content,
|
|
109
|
-
additionalProps: this.$props
|
|
110
|
-
});
|
|
111
|
-
return h("span", {
|
|
112
|
-
"class": this.badgeContainerClasses,
|
|
113
|
-
style: {
|
|
114
|
-
display: 'inline-block'
|
|
115
|
-
},
|
|
116
|
-
dir: this.currentDir,
|
|
117
|
-
attrs: this.v3 ? undefined : {
|
|
118
|
-
dir: this.currentDir
|
|
119
|
-
}
|
|
120
|
-
}, [defaultSlot, h("span", {
|
|
121
|
-
"class": this.badgeClasses,
|
|
122
|
-
dir: this.currentDir,
|
|
123
|
-
attrs: this.v3 ? undefined : {
|
|
124
|
-
dir: this.currentDir
|
|
125
|
-
}
|
|
126
|
-
}, [contentElement])]);
|
|
127
|
-
},
|
|
128
|
-
methods: {
|
|
129
|
-
focusElement: function focusElement() {
|
|
130
|
-
if (this.$el) {
|
|
131
|
-
this.$el.focus();
|
|
132
|
-
}
|
|
133
|
-
}
|
|
134
|
-
}
|
|
135
|
-
};
|
|
136
|
-
/**
|
|
137
|
-
* Represents the [Kendo UI for Vue BadgeContainer component]({% slug api_indicators_badgeprops %}).
|
|
138
|
-
*
|
|
139
|
-
* @example
|
|
140
|
-
* ```jsx
|
|
141
|
-
* <BadgeContainer>99+</BadgeContainer>
|
|
142
|
-
* ```
|
|
143
|
-
*/
|
|
144
|
-
var BadgeContainer = BadgeContainerVue2;
|
|
145
|
-
export { BadgeContainer, BadgeContainerVue2 };
|
|
@@ -1,192 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Represents the props of the [Kendo UI for Vue Badge component]({% slug overview_badge %}).
|
|
3
|
-
*/
|
|
4
|
-
export interface BadgeProps {
|
|
5
|
-
/**
|
|
6
|
-
* Represents the `dir` HTML attribute. This is used to switch from LTR to RTL.
|
|
7
|
-
*/
|
|
8
|
-
dir?: string;
|
|
9
|
-
/**
|
|
10
|
-
* Specifies the size of the Badge.
|
|
11
|
-
*
|
|
12
|
-
* The possible values are:
|
|
13
|
-
* * `small`
|
|
14
|
-
* * `medium` (Default)
|
|
15
|
-
* * `large`
|
|
16
|
-
* * null—Does not set a size `className`
|
|
17
|
-
*
|
|
18
|
-
* @default `medium`
|
|
19
|
-
*/
|
|
20
|
-
size?: null | 'small' | 'medium' | 'large' | string;
|
|
21
|
-
/**
|
|
22
|
-
* Specifies the roundness of the Badge.
|
|
23
|
-
*
|
|
24
|
-
* The possible values are:
|
|
25
|
-
* - small
|
|
26
|
-
* - medium (Default)
|
|
27
|
-
* - large
|
|
28
|
-
* - full
|
|
29
|
-
* - null—Does not set a rounded `className`
|
|
30
|
-
*
|
|
31
|
-
* @default `medium`
|
|
32
|
-
*/
|
|
33
|
-
rounded?: null | 'small' | 'medium' | 'large' | 'full' | string;
|
|
34
|
-
/**
|
|
35
|
-
* Specifies the appearance fill style of the Badge.
|
|
36
|
-
*
|
|
37
|
-
* The possible values are:
|
|
38
|
-
* * `solid` (Default)
|
|
39
|
-
* * `outline`
|
|
40
|
-
* * null—Does not set a fillMode `className`
|
|
41
|
-
*
|
|
42
|
-
* @default `solid`
|
|
43
|
-
*/
|
|
44
|
-
fillMode?: null | 'solid' | 'outline' | string;
|
|
45
|
-
/**
|
|
46
|
-
* Specifies the theme color of the Badge.
|
|
47
|
-
*
|
|
48
|
-
* The possible values are:
|
|
49
|
-
* * `primary` (Default)—Applies coloring based on primary theme color.
|
|
50
|
-
* * `secondary`—Applies coloring based on secondary theme color.
|
|
51
|
-
* * `tertiary`— Applies coloring based on tertiary theme color.
|
|
52
|
-
* * `inherit`— Applies inherited coloring value.
|
|
53
|
-
* * `info`—Applies coloring based on info theme color.
|
|
54
|
-
* * `success`— Applies coloring based on success theme color.
|
|
55
|
-
* * `warning`— Applies coloring based on warning theme color.
|
|
56
|
-
* * `error`— Applies coloring based on error theme color.
|
|
57
|
-
* * `dark`— Applies coloring based on dark theme color.
|
|
58
|
-
* * `light`— Applies coloring based on light theme color.
|
|
59
|
-
* * `inverse`— Applies coloring based on inverse theme color.
|
|
60
|
-
* * null—Does not set a themeColor `className`.
|
|
61
|
-
*
|
|
62
|
-
* @default `primary`
|
|
63
|
-
*/
|
|
64
|
-
themeColor?: null | 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse' | 'inherit' | string;
|
|
65
|
-
/**
|
|
66
|
-
* Specifies the alignment of the Badge.
|
|
67
|
-
*
|
|
68
|
-
* The possible keys are:
|
|
69
|
-
* * `horizontal`— Defines the possible horizontal alignment of the Badge.
|
|
70
|
-
* * `start`—Uses the start point of the parent element.
|
|
71
|
-
* * `end`(Default)—Uses the end point of the parent element.
|
|
72
|
-
* * `vertical`— Defines the possible vertical alignment of the Badge.
|
|
73
|
-
* * `top`(Default)—Uses the top point of the parent element.
|
|
74
|
-
* * `bottom`—Uses the bottom point of the parent element.
|
|
75
|
-
*
|
|
76
|
-
*/
|
|
77
|
-
align?: {
|
|
78
|
-
/**
|
|
79
|
-
* Defines the possible horizontal alignment of the Badge.
|
|
80
|
-
*
|
|
81
|
-
* The available values are:
|
|
82
|
-
* - `start`—Uses the start point of the parent element.
|
|
83
|
-
* - `end`(Default)—Uses the end point of the parent element.
|
|
84
|
-
*/
|
|
85
|
-
horizontal: 'start' | 'end';
|
|
86
|
-
/**
|
|
87
|
-
* Defines the possible vertical alignment of the Badge.
|
|
88
|
-
*
|
|
89
|
-
* The available values are:
|
|
90
|
-
* - `top`(Default)—Uses the top point of the parent element.
|
|
91
|
-
* - `bottom`—Uses the bottom point of the parent element.
|
|
92
|
-
*/
|
|
93
|
-
vertical: 'top' | 'bottom';
|
|
94
|
-
};
|
|
95
|
-
/**
|
|
96
|
-
* Specifies the position of the Badge relative to the edge of the container element.
|
|
97
|
-
*
|
|
98
|
-
* The possible values are:
|
|
99
|
-
* * `edge` (Default)—The center of the Badge is positioned on the edge of the container element.
|
|
100
|
-
* * `outside`—The Badge is entirely positioned outside the edge of the container element.
|
|
101
|
-
* * `inside`—The Badge is entirely positioned inside the edge of the the container element.
|
|
102
|
-
*
|
|
103
|
-
* @default `edge`
|
|
104
|
-
*/
|
|
105
|
-
position?: 'edge' | 'outside' | 'inside' | string;
|
|
106
|
-
/**
|
|
107
|
-
* Specifies wether or not to render additional "cutout" border around the Badge.
|
|
108
|
-
*
|
|
109
|
-
* The possible values are:
|
|
110
|
-
* * `true`
|
|
111
|
-
* * `false` (Default)
|
|
112
|
-
*
|
|
113
|
-
*/
|
|
114
|
-
cutoutBorder?: boolean;
|
|
115
|
-
}
|
|
116
|
-
/**
|
|
117
|
-
* Represents the props of the [Kendo UI for Vue Badge component]({% slug overview_badge %}).
|
|
118
|
-
*/
|
|
119
|
-
export interface BadgeContainerProps extends BadgeProps {
|
|
120
|
-
/**
|
|
121
|
-
* Defines the custom rendering of the Badge content. Accepts a slot name, a `render` function, or a Vue Component.
|
|
122
|
-
*/
|
|
123
|
-
content?: any;
|
|
124
|
-
}
|
|
125
|
-
/**
|
|
126
|
-
* Specifies the theme color of the Badge.
|
|
127
|
-
*
|
|
128
|
-
* The possible values are:
|
|
129
|
-
* * `primary` (Default)—Applies coloring based on primary theme color.
|
|
130
|
-
* * `secondary`—Applies coloring based on secondary theme color.
|
|
131
|
-
* * `tertiary`— Applies coloring based on tertiary theme color.
|
|
132
|
-
* * `inherit`— Applies inherited coloring value.
|
|
133
|
-
* * `info`—Applies coloring based on info theme color.
|
|
134
|
-
* * `success`— Applies coloring based on success theme color.
|
|
135
|
-
* * `warning`— Applies coloring based on warning theme color.
|
|
136
|
-
* * `error`— Applies coloring based on error theme color.
|
|
137
|
-
* * `dark`— Applies coloring based on dark theme color.
|
|
138
|
-
* * `light`— Applies coloring based on light theme color.
|
|
139
|
-
* * `inverse`— Applies coloring based on inverse theme color.
|
|
140
|
-
*
|
|
141
|
-
*/
|
|
142
|
-
export declare type BadgeThemeColor = 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse' | 'inherit';
|
|
143
|
-
/**
|
|
144
|
-
* Specifies the size of the Badge.
|
|
145
|
-
*
|
|
146
|
-
* The possible values are:
|
|
147
|
-
* * `small`
|
|
148
|
-
* * `medium` (Default)
|
|
149
|
-
* * `large`
|
|
150
|
-
*
|
|
151
|
-
*/
|
|
152
|
-
export declare type BadgeSize = 'small' | 'medium' | 'large';
|
|
153
|
-
/**
|
|
154
|
-
* Specifies the horizontal and vertical alignment of the Badge in a relation to the element.
|
|
155
|
-
*/
|
|
156
|
-
export interface BadgeAlign {
|
|
157
|
-
/**
|
|
158
|
-
* Defines the possible horizontal alignment of the Badge.
|
|
159
|
-
*
|
|
160
|
-
* The available values are:
|
|
161
|
-
* - `start`—Uses the start point of the parent element.
|
|
162
|
-
* - `end`(Default)—Uses the end point of the parent element.
|
|
163
|
-
*/
|
|
164
|
-
horizontal: 'start' | 'end';
|
|
165
|
-
/**
|
|
166
|
-
* Defines the possible vertical alignment of the Badge.
|
|
167
|
-
*
|
|
168
|
-
* The available values are:
|
|
169
|
-
* - `top`(Default)—Uses the top point of the parent element.
|
|
170
|
-
* - `bottom`—Uses the bottom point of the parent element.
|
|
171
|
-
*/
|
|
172
|
-
vertical: 'top' | 'bottom';
|
|
173
|
-
}
|
|
174
|
-
/**
|
|
175
|
-
* Specifies the appearance fill style of the Badge.
|
|
176
|
-
*
|
|
177
|
-
* The possible values are:
|
|
178
|
-
* * `solid` (Default)
|
|
179
|
-
* * `outline`
|
|
180
|
-
*
|
|
181
|
-
*/
|
|
182
|
-
export declare type BadgeFill = 'solid' | 'outline';
|
|
183
|
-
/**
|
|
184
|
-
* Specifies the position of the Badge relative to the edge of the container element.
|
|
185
|
-
*
|
|
186
|
-
* The possible values are:
|
|
187
|
-
* * `edge` (Default)—The center of the Badge is positioned on the edge of the container element.
|
|
188
|
-
* * `outside`—The Badge is entirely positioned outside the edge of the container element.
|
|
189
|
-
* * `inside`—The Badge is entirely positioned inside the edge of the the container element.
|
|
190
|
-
*
|
|
191
|
-
*/
|
|
192
|
-
export declare type BadgePosition = 'edge' | 'outside' | 'inside';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,57 +0,0 @@
|
|
|
1
|
-
import { DefineComponent } from '../additionalTypes';
|
|
2
|
-
import { RecordPropsDefinition, ComponentOptions } from 'vue/types/options';
|
|
3
|
-
declare type DefaultData<V> = object | ((this: V) => {});
|
|
4
|
-
declare type DefaultMethods<V> = {
|
|
5
|
-
[key: string]: (this: V, ...args: any[]) => any;
|
|
6
|
-
};
|
|
7
|
-
import { LoaderProps } from './LoaderProps';
|
|
8
|
-
/**
|
|
9
|
-
* @hidden
|
|
10
|
-
*/
|
|
11
|
-
export interface LoaderHandle {
|
|
12
|
-
/**
|
|
13
|
-
* The Loader element.
|
|
14
|
-
*/
|
|
15
|
-
element: HTMLSpanElement | null;
|
|
16
|
-
/**
|
|
17
|
-
* Focus the Loader.
|
|
18
|
-
*/
|
|
19
|
-
focus: () => void;
|
|
20
|
-
}
|
|
21
|
-
/**
|
|
22
|
-
* @hidden
|
|
23
|
-
*/
|
|
24
|
-
export interface LoaderState {
|
|
25
|
-
}
|
|
26
|
-
/**
|
|
27
|
-
* @hidden
|
|
28
|
-
*/
|
|
29
|
-
export interface LoaderComputed {
|
|
30
|
-
[key: string]: any;
|
|
31
|
-
loaderClasses: object;
|
|
32
|
-
}
|
|
33
|
-
/**
|
|
34
|
-
* @hidden
|
|
35
|
-
*/
|
|
36
|
-
export interface LoaderMethods {
|
|
37
|
-
[key: string]: any;
|
|
38
|
-
}
|
|
39
|
-
/**
|
|
40
|
-
* @hidden
|
|
41
|
-
*/
|
|
42
|
-
export interface LoaderData {
|
|
43
|
-
}
|
|
44
|
-
/**
|
|
45
|
-
* @hidden
|
|
46
|
-
*/
|
|
47
|
-
export interface LoaderAll extends Vue, LoaderMethods, LoaderData, LoaderComputed, LoaderState {
|
|
48
|
-
}
|
|
49
|
-
/**
|
|
50
|
-
* @hidden
|
|
51
|
-
*/
|
|
52
|
-
declare let LoaderVue2: ComponentOptions<LoaderAll, DefaultData<LoaderData>, DefaultMethods<LoaderAll>, LoaderComputed, RecordPropsDefinition<LoaderProps>>;
|
|
53
|
-
/**
|
|
54
|
-
* @hidden
|
|
55
|
-
*/
|
|
56
|
-
declare const Loader: DefineComponent<LoaderProps, any, LoaderData, LoaderComputed, LoaderMethods, {}, {}, {}, string, LoaderProps, LoaderProps, {}>;
|
|
57
|
-
export { Loader, LoaderVue2 };
|
package/dist/es/loader/Loader.js
DELETED
|
@@ -1,112 +0,0 @@
|
|
|
1
|
-
// @ts-ignore
|
|
2
|
-
import * as Vue from 'vue';
|
|
3
|
-
var allVue = Vue;
|
|
4
|
-
var gh = allVue.h;
|
|
5
|
-
var isV3 = allVue.version && allVue.version[0] === '3';
|
|
6
|
-
import { validatePackage } from '@progress/kendo-vue-common';
|
|
7
|
-
import { packageMetadata } from '../package-metadata';
|
|
8
|
-
var SEGMENT_COUNT = {
|
|
9
|
-
'pulsing': 2,
|
|
10
|
-
'infinite-spinner': 3,
|
|
11
|
-
'converging-spinner': 4
|
|
12
|
-
};
|
|
13
|
-
var TYPE_CLASSES = {
|
|
14
|
-
'pulsing': 'k-loader-pulsing-2',
|
|
15
|
-
'infinite-spinner': 'k-loader-spinner-3',
|
|
16
|
-
'converging-spinner': 'k-loader-spinner-4'
|
|
17
|
-
};
|
|
18
|
-
/**
|
|
19
|
-
* @hidden
|
|
20
|
-
*/
|
|
21
|
-
var LoaderVue2 = {
|
|
22
|
-
name: 'KendoLoader',
|
|
23
|
-
props: {
|
|
24
|
-
type: {
|
|
25
|
-
type: String,
|
|
26
|
-
default: 'pulsing',
|
|
27
|
-
validator: function validator(value) {
|
|
28
|
-
return ['pulsing', 'infinite-spinner', 'converging-spinner'].includes(value);
|
|
29
|
-
}
|
|
30
|
-
},
|
|
31
|
-
size: {
|
|
32
|
-
type: String,
|
|
33
|
-
default: 'medium',
|
|
34
|
-
validator: function validator(value) {
|
|
35
|
-
return ['small', 'medium', 'large'].includes(value);
|
|
36
|
-
}
|
|
37
|
-
},
|
|
38
|
-
themeColor: {
|
|
39
|
-
type: String,
|
|
40
|
-
default: 'primary',
|
|
41
|
-
validator: function validator(value) {
|
|
42
|
-
return ['primary', 'secondary', 'tertiary', 'info', 'success', 'warning', 'error', 'dark', 'light', 'inverse'].includes(value);
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
},
|
|
46
|
-
created: function created() {
|
|
47
|
-
validatePackage(packageMetadata);
|
|
48
|
-
},
|
|
49
|
-
computed: {
|
|
50
|
-
loaderClasses: function loaderClasses() {
|
|
51
|
-
var _a = this.$props,
|
|
52
|
-
type = _a.type,
|
|
53
|
-
size = _a.size,
|
|
54
|
-
themeColor = _a.themeColor;
|
|
55
|
-
return {
|
|
56
|
-
'k-loader': true,
|
|
57
|
-
'k-loader-sm': size === 'small',
|
|
58
|
-
'k-loader-md': size === 'medium',
|
|
59
|
-
'k-loader-lg': size === 'large',
|
|
60
|
-
'k-loader-primary': themeColor === 'primary',
|
|
61
|
-
'k-loader-secondary': themeColor === 'secondary',
|
|
62
|
-
'k-loader-tertiary': themeColor === 'tertiary',
|
|
63
|
-
'k-loader-info': themeColor === 'info',
|
|
64
|
-
'k-loader-success': themeColor === 'success',
|
|
65
|
-
'k-loader-warning': themeColor === 'warning',
|
|
66
|
-
'k-loader-error': themeColor === 'error',
|
|
67
|
-
'k-loader-dark': themeColor === 'dark',
|
|
68
|
-
'k-loader-light': themeColor === 'light',
|
|
69
|
-
'k-loader-inverse': themeColor === 'inverse',
|
|
70
|
-
'k-loader-pulsing-2': type === 'pulsing',
|
|
71
|
-
'k-loader-spinner-3': type === 'infinite-spinner',
|
|
72
|
-
'k-loader-spinner-4': type === 'converging-spinner'
|
|
73
|
-
};
|
|
74
|
-
}
|
|
75
|
-
},
|
|
76
|
-
// @ts-ignore
|
|
77
|
-
setup: !isV3 ? undefined : function () {
|
|
78
|
-
var v3 = !!isV3;
|
|
79
|
-
return {
|
|
80
|
-
v3: v3
|
|
81
|
-
};
|
|
82
|
-
},
|
|
83
|
-
// @ts-ignore
|
|
84
|
-
render: function render(createElement) {
|
|
85
|
-
var h = gh || createElement;
|
|
86
|
-
var type = this.$props.type;
|
|
87
|
-
var spans = new Array(SEGMENT_COUNT[type]);
|
|
88
|
-
spans.fill(0, 0, SEGMENT_COUNT[type]);
|
|
89
|
-
return h("div", {
|
|
90
|
-
"class": this.loaderClasses
|
|
91
|
-
}, [h("div", {
|
|
92
|
-
"class": "k-loader-canvas"
|
|
93
|
-
}, [spans.map(function (_, i) {
|
|
94
|
-
return h("span", {
|
|
95
|
-
key: i,
|
|
96
|
-
"class": "k-loader-segment"
|
|
97
|
-
});
|
|
98
|
-
}, this)])]);
|
|
99
|
-
},
|
|
100
|
-
methods: {
|
|
101
|
-
focus: function focus(e) {
|
|
102
|
-
if (this.$el) {
|
|
103
|
-
this.$el.focus(e);
|
|
104
|
-
}
|
|
105
|
-
}
|
|
106
|
-
}
|
|
107
|
-
};
|
|
108
|
-
/**
|
|
109
|
-
* @hidden
|
|
110
|
-
*/
|
|
111
|
-
var Loader = LoaderVue2;
|
|
112
|
-
export { Loader, LoaderVue2 };
|
|
@@ -1,43 +0,0 @@
|
|
|
1
|
-
import { LoaderSize } from './models/size';
|
|
2
|
-
import { LoaderThemeColor } from './models/theme-color';
|
|
3
|
-
import { LoaderType } from './models/type';
|
|
4
|
-
/**
|
|
5
|
-
* Represents the props of the [Kendo UI for Vue Loader component]({% slug overview_loader %}).
|
|
6
|
-
*/
|
|
7
|
-
export interface LoaderProps {
|
|
8
|
-
/**
|
|
9
|
-
* Specifies the size of the Loader.
|
|
10
|
-
*
|
|
11
|
-
* The possible values are:
|
|
12
|
-
* * `small`
|
|
13
|
-
* * `medium` (Default)
|
|
14
|
-
* * `large`
|
|
15
|
-
*
|
|
16
|
-
*/
|
|
17
|
-
size?: LoaderSize | string;
|
|
18
|
-
/**
|
|
19
|
-
* Specifies the theme color of the Loader.
|
|
20
|
-
*
|
|
21
|
-
* The possible values are:
|
|
22
|
-
* * `primary` (Default)—Applies coloring based on primary theme color.
|
|
23
|
-
* * `secondary`—Applies coloring based on secondary theme color.
|
|
24
|
-
* * `tertiary`— Applies coloring based on tertiary theme color.
|
|
25
|
-
* * `info`—Applies coloring based on info theme color.
|
|
26
|
-
* * `success`— Applies coloring based on success theme color.
|
|
27
|
-
* * `warning`— Applies coloring based on warning theme color.
|
|
28
|
-
* * `error`— Applies coloring based on error theme color.
|
|
29
|
-
* * `dark`— Applies coloring based on dark theme color.
|
|
30
|
-
* * `light`— Applies coloring based on light theme color.
|
|
31
|
-
* * `inverse`— Applies coloring based on inverse theme color.
|
|
32
|
-
*/
|
|
33
|
-
themeColor?: LoaderThemeColor | string;
|
|
34
|
-
/**
|
|
35
|
-
* Specifies the Loader animation type.
|
|
36
|
-
*
|
|
37
|
-
* The possible values are:
|
|
38
|
-
* - `pulsing` (default)
|
|
39
|
-
* - `infinite-spinner`
|
|
40
|
-
* - `converging-spinner`
|
|
41
|
-
*/
|
|
42
|
-
type?: LoaderType | string;
|
|
43
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Specifies the size of the Loader
|
|
3
|
-
* ([see example]({% slug appearance_loader %}#toc-size)).
|
|
4
|
-
*
|
|
5
|
-
* The possible values are:
|
|
6
|
-
* * `small`
|
|
7
|
-
* * `medium` (Default)
|
|
8
|
-
* * `large`
|
|
9
|
-
*
|
|
10
|
-
*/
|
|
11
|
-
export declare type LoaderSize = 'small' | 'medium' | 'large';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1,18 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Specifies the theme color of the Loader.
|
|
3
|
-
* ([see example]({% slug appearance_loader %}#toc-theme-color)).
|
|
4
|
-
*
|
|
5
|
-
* The possible values are:
|
|
6
|
-
* * `primary` (Default)—Applies coloring based on primary theme color.
|
|
7
|
-
* * `secondary`—Applies coloring based on secondary theme color.
|
|
8
|
-
* * `tertiary`— Applies coloring based on tertiary theme color.
|
|
9
|
-
* * `info`—Applies coloring based on info theme color.
|
|
10
|
-
* * `success`— Applies coloring based on success theme color.
|
|
11
|
-
* * `warning`— Applies coloring based on warning theme color.
|
|
12
|
-
* * `error`— Applies coloring based on error theme color.
|
|
13
|
-
* * `dark`— Applies coloring based on dark theme color.
|
|
14
|
-
* * `light`— Applies coloring based on light theme color.
|
|
15
|
-
* * `inverse`— Applies coloring based on inverted theme color.
|
|
16
|
-
*
|
|
17
|
-
*/
|
|
18
|
-
export declare type LoaderThemeColor = 'primary' | 'secondary' | 'tertiary' | 'info' | 'success' | 'warning' | 'error' | 'dark' | 'light' | 'inverse';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export {};
|
package/dist/es/main.d.ts
DELETED
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
export * from './badge/Badge';
|
|
2
|
-
export * from './badge/BadgeProps';
|
|
3
|
-
export * from './badge/BadgeContainer';
|
|
4
|
-
export * from './loader/Loader';
|
|
5
|
-
export * from './loader/LoaderProps';
|
|
6
|
-
export * from './loader/models/size';
|
|
7
|
-
export * from './loader/models/theme-color';
|
|
8
|
-
export * from './loader/models/type';
|
|
9
|
-
export * from './skeleton/Skeleton';
|
|
10
|
-
export * from './skeleton/SkeletonProps';
|
package/dist/es/main.js
DELETED
|
@@ -1,10 +0,0 @@
|
|
|
1
|
-
export * from './badge/Badge';
|
|
2
|
-
export * from './badge/BadgeProps';
|
|
3
|
-
export * from './badge/BadgeContainer';
|
|
4
|
-
export * from './loader/Loader';
|
|
5
|
-
export * from './loader/LoaderProps';
|
|
6
|
-
export * from './loader/models/size';
|
|
7
|
-
export * from './loader/models/theme-color';
|
|
8
|
-
export * from './loader/models/type';
|
|
9
|
-
export * from './skeleton/Skeleton';
|
|
10
|
-
export * from './skeleton/SkeletonProps';
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* @hidden
|
|
3
|
-
*/
|
|
4
|
-
export var packageMetadata = {
|
|
5
|
-
name: '@progress/kendo-vue-indicators',
|
|
6
|
-
productName: 'Kendo UI for Vue',
|
|
7
|
-
productCodes: ['KENDOUIVUE', 'KENDOUICOMPLETE'],
|
|
8
|
-
publishDate: 1726209767,
|
|
9
|
-
version: '',
|
|
10
|
-
licensingDocsUrl: 'https://www.telerik.com/kendo-vue-ui/my-license/?utm_medium=product&utm_source=kendovue&utm_campaign=kendo-ui-vue-purchase-license-keys-warning'
|
|
11
|
-
};
|