@kong/kongponents 9.30.1 → 9.30.2-pr.2733.0df99fd39.0
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/kongponents.css +1 -1
- package/dist/kongponents.es.js +6329 -6485
- package/dist/kongponents.umd.js +14 -14
- package/dist/types/components/KFileUpload/KFileUpload.vue.d.ts +9 -106
- package/dist/types/components/KModal/KModal.vue.d.ts +5 -188
- package/dist/types/components/KSkeleton/CardSkeleton.vue.d.ts +3 -30
- package/dist/types/components/KSkeleton/FullScreenGenericSpinner.vue.d.ts +2 -31
- package/dist/types/components/KSkeleton/FullScreenKongSkeleton.vue.d.ts +2 -31
- package/dist/types/components/KSkeleton/KSkeleton.vue.d.ts +3 -107
- package/dist/types/components/KSkeleton/KSkeletonBox.vue.d.ts +2 -28
- package/dist/types/components/KSkeleton/TableSkeleton.vue.d.ts +3 -26
- package/dist/types/types/file-upload.d.ts +69 -0
- package/dist/types/types/index.d.ts +2 -0
- package/dist/types/types/modal.d.ts +127 -0
- package/dist/types/types/skeleton.d.ts +111 -0
- package/package.json +31 -32
|
@@ -12,10 +12,12 @@ export * from './date-time-picker';
|
|
|
12
12
|
export * from './dropdown';
|
|
13
13
|
export * from './empty-state';
|
|
14
14
|
export * from './external-link';
|
|
15
|
+
export * from './file-upload';
|
|
15
16
|
export * from './input';
|
|
16
17
|
export * from './input-switch';
|
|
17
18
|
export * from './label';
|
|
18
19
|
export * from './method-badge';
|
|
20
|
+
export * from './modal';
|
|
19
21
|
export * from './multi-select';
|
|
20
22
|
export * from './pagination';
|
|
21
23
|
export * from './popover';
|
|
@@ -0,0 +1,127 @@
|
|
|
1
|
+
import type { FocusTrapTabbableOptions } from 'focus-trap';
|
|
2
|
+
import type { ButtonAppearance } from './button';
|
|
3
|
+
export interface ModalProps {
|
|
4
|
+
/**
|
|
5
|
+
* Whether the modal is shown.
|
|
6
|
+
* @default false
|
|
7
|
+
*/
|
|
8
|
+
visible?: boolean;
|
|
9
|
+
/**
|
|
10
|
+
* Modal title.
|
|
11
|
+
* @default ''
|
|
12
|
+
*/
|
|
13
|
+
title?: string;
|
|
14
|
+
/**
|
|
15
|
+
* Text displayed in the action button.
|
|
16
|
+
* @default ''
|
|
17
|
+
*/
|
|
18
|
+
actionButtonText?: string;
|
|
19
|
+
/**
|
|
20
|
+
* Appearance of the action button.
|
|
21
|
+
* One of ['primary', 'secondary', 'tertiary', 'danger', 'none'].
|
|
22
|
+
* @default 'primary'
|
|
23
|
+
*/
|
|
24
|
+
actionButtonAppearance?: ButtonAppearance;
|
|
25
|
+
/**
|
|
26
|
+
* Whether the action button is disabled.
|
|
27
|
+
* @default false
|
|
28
|
+
*/
|
|
29
|
+
actionButtonDisabled?: boolean;
|
|
30
|
+
/**
|
|
31
|
+
* Whether to hide the cancel button.
|
|
32
|
+
* @default false
|
|
33
|
+
*/
|
|
34
|
+
hideCancelButton?: boolean;
|
|
35
|
+
/**
|
|
36
|
+
* Text displayed in the cancel button.
|
|
37
|
+
* @default ''
|
|
38
|
+
*/
|
|
39
|
+
cancelButtonText?: string;
|
|
40
|
+
/**
|
|
41
|
+
* Appearance of the cancel button.
|
|
42
|
+
* One of ['primary', 'secondary', 'tertiary', 'danger', 'none'].
|
|
43
|
+
* @default 'tertiary'
|
|
44
|
+
*/
|
|
45
|
+
cancelButtonAppearance?: ButtonAppearance;
|
|
46
|
+
/**
|
|
47
|
+
* Whether the cancel button is disabled.
|
|
48
|
+
* @default false
|
|
49
|
+
*/
|
|
50
|
+
cancelButtonDisabled?: boolean;
|
|
51
|
+
/**
|
|
52
|
+
* Options to be passed to [focus-trap](https://github.com/focus-trap/focus-trap)'s `tabbableOptions`, which is responsible for trapping focus inside the modal box.
|
|
53
|
+
*/
|
|
54
|
+
tabbableOptions?: FocusTrapTabbableOptions;
|
|
55
|
+
/**
|
|
56
|
+
* Max width of the modal.
|
|
57
|
+
* @default '500px'
|
|
58
|
+
*/
|
|
59
|
+
maxWidth?: string;
|
|
60
|
+
/**
|
|
61
|
+
* Max height of the modal.
|
|
62
|
+
* @default 'calc(100vh - 200px)'
|
|
63
|
+
*/
|
|
64
|
+
maxHeight?: string;
|
|
65
|
+
/**
|
|
66
|
+
* Whether clicking on backdrop should close the modal.
|
|
67
|
+
* @default false
|
|
68
|
+
*/
|
|
69
|
+
closeOnBackdropClick?: boolean;
|
|
70
|
+
/**
|
|
71
|
+
* Whether pressing the `escape` key should close the modal.
|
|
72
|
+
* @default true
|
|
73
|
+
*/
|
|
74
|
+
closeOnEscape?: boolean;
|
|
75
|
+
/**
|
|
76
|
+
* Whether to hide close icon next to the title.
|
|
77
|
+
* @default false
|
|
78
|
+
*/
|
|
79
|
+
hideCloseIcon?: boolean;
|
|
80
|
+
/**
|
|
81
|
+
* Whether the modal window should take up almost the whole screen.
|
|
82
|
+
* @default false
|
|
83
|
+
*/
|
|
84
|
+
fullScreen?: boolean;
|
|
85
|
+
/**
|
|
86
|
+
* Whether KModal should set focus on the first visible input field as soon as modal opens.
|
|
87
|
+
* @default false
|
|
88
|
+
*/
|
|
89
|
+
inputAutofocus?: boolean;
|
|
90
|
+
/**
|
|
91
|
+
* `zIndex` value for the modal.
|
|
92
|
+
* @default 1100
|
|
93
|
+
*/
|
|
94
|
+
zIndex?: number;
|
|
95
|
+
}
|
|
96
|
+
export interface ModalEmits {
|
|
97
|
+
/**
|
|
98
|
+
* Emitted when action button is clicked.
|
|
99
|
+
*/
|
|
100
|
+
proceed: [];
|
|
101
|
+
/**
|
|
102
|
+
* Emitted when cancel button or close icon (when not hidden) is clicked.
|
|
103
|
+
*/
|
|
104
|
+
cancel: [];
|
|
105
|
+
}
|
|
106
|
+
export interface ModalSlots {
|
|
107
|
+
/**
|
|
108
|
+
* Slot for modal content.
|
|
109
|
+
*/
|
|
110
|
+
default?(): any;
|
|
111
|
+
/**
|
|
112
|
+
* Slot for modal title.
|
|
113
|
+
*/
|
|
114
|
+
title?(): any;
|
|
115
|
+
/**
|
|
116
|
+
* Slot for modal footer content.
|
|
117
|
+
*/
|
|
118
|
+
footer?(): any;
|
|
119
|
+
/**
|
|
120
|
+
* Slot for cusom buttons in modal footer.
|
|
121
|
+
*/
|
|
122
|
+
'footer-actions'?(): any;
|
|
123
|
+
/**
|
|
124
|
+
* Used to override the default header/content/footer layout with just a wrapper container to provide custom layout.
|
|
125
|
+
*/
|
|
126
|
+
content?(): any;
|
|
127
|
+
}
|
|
@@ -5,3 +5,114 @@ export declare const SkeletonBoxWidthArray: readonly ["1", "2", "5", "6", "10",
|
|
|
5
5
|
export type SkeletonBoxWidth = AnyElementOf<typeof SkeletonBoxWidthArray>;
|
|
6
6
|
export declare const SkeletonBoxHeightArray: readonly ["1", "2"];
|
|
7
7
|
export type SkeletonBoxHeight = AnyElementOf<typeof SkeletonBoxHeightArray>;
|
|
8
|
+
export interface SkeletonBoxProps {
|
|
9
|
+
/**
|
|
10
|
+
* Width of the skeleton box in relative units.
|
|
11
|
+
* One of ['1', '2', '5', '6', '10', '25', '50', '75', '100'].
|
|
12
|
+
* @default '1'
|
|
13
|
+
*/
|
|
14
|
+
width?: SkeletonBoxWidth;
|
|
15
|
+
/**
|
|
16
|
+
* Height of the skeleton box in relative units.
|
|
17
|
+
* One of ['1', '2'].
|
|
18
|
+
* @default '1'
|
|
19
|
+
*/
|
|
20
|
+
height?: SkeletonBoxHeight;
|
|
21
|
+
}
|
|
22
|
+
export interface SkeletonProps {
|
|
23
|
+
/**
|
|
24
|
+
* The type of skeleton to render.
|
|
25
|
+
* One of ['', 'table', 'card', 'form', 'spinner', 'fullscreen-kong', 'fullscreen-generic'].
|
|
26
|
+
* @default ''
|
|
27
|
+
*/
|
|
28
|
+
type?: SkeletonType;
|
|
29
|
+
/**
|
|
30
|
+
* Number of milliseconds to wait before showing the skeleton state.
|
|
31
|
+
* @default 0
|
|
32
|
+
*/
|
|
33
|
+
delayMilliseconds?: number;
|
|
34
|
+
/**
|
|
35
|
+
* Number of the skeleton cards.
|
|
36
|
+
* @default 1
|
|
37
|
+
*/
|
|
38
|
+
cardCount?: number;
|
|
39
|
+
/**
|
|
40
|
+
* Width of the skeleton card in relative units.
|
|
41
|
+
* @default ''
|
|
42
|
+
*/
|
|
43
|
+
cardMaxWidth?: string;
|
|
44
|
+
/**
|
|
45
|
+
* Number of the skeleton table rows.
|
|
46
|
+
* @default 5
|
|
47
|
+
*/
|
|
48
|
+
tableRows?: number;
|
|
49
|
+
/**
|
|
50
|
+
* Number of the skeleton table columns.
|
|
51
|
+
* @default 6
|
|
52
|
+
*/
|
|
53
|
+
tableColumns?: number;
|
|
54
|
+
/**
|
|
55
|
+
* Progress of the skeleton loading indicator.
|
|
56
|
+
* @default null
|
|
57
|
+
*/
|
|
58
|
+
progress?: number | null;
|
|
59
|
+
/**
|
|
60
|
+
* Whether to hide the progress bar.
|
|
61
|
+
* @default false
|
|
62
|
+
*/
|
|
63
|
+
hideProgress?: boolean;
|
|
64
|
+
/**
|
|
65
|
+
* `zIndex` of the skeleton overlay.
|
|
66
|
+
* @default 10500
|
|
67
|
+
*/
|
|
68
|
+
zIndex?: number;
|
|
69
|
+
}
|
|
70
|
+
/**
|
|
71
|
+
* @internal
|
|
72
|
+
*/
|
|
73
|
+
export type SkeletonCardProps = {
|
|
74
|
+
cardCount: Exclude<SkeletonProps['cardCount'], undefined>;
|
|
75
|
+
maxWidth: Exclude<SkeletonProps['cardMaxWidth'], undefined>;
|
|
76
|
+
};
|
|
77
|
+
/**
|
|
78
|
+
* @internal
|
|
79
|
+
*/
|
|
80
|
+
export type SkeletonTableProps = {
|
|
81
|
+
rows: Exclude<SkeletonProps['tableRows'], undefined>;
|
|
82
|
+
columns: Exclude<SkeletonProps['tableColumns'], undefined>;
|
|
83
|
+
};
|
|
84
|
+
/**
|
|
85
|
+
* List all props manually to make Vue compiler happy
|
|
86
|
+
* @internal
|
|
87
|
+
*/
|
|
88
|
+
export type SkeletonFullscreenProps = {
|
|
89
|
+
progress: Exclude<SkeletonProps['progress'], undefined>;
|
|
90
|
+
hideProgress: Exclude<SkeletonProps['hideProgress'], undefined>;
|
|
91
|
+
zIndex: Exclude<SkeletonProps['zIndex'], undefined>;
|
|
92
|
+
};
|
|
93
|
+
export interface SkeletonSlots {
|
|
94
|
+
/**
|
|
95
|
+
* The content for each skeleton row when `type` is `table`.
|
|
96
|
+
*/
|
|
97
|
+
default?(): any;
|
|
98
|
+
/**
|
|
99
|
+
* The header of each skeleton card when `type` is `card`.
|
|
100
|
+
*/
|
|
101
|
+
'card-header'?(): any;
|
|
102
|
+
/**
|
|
103
|
+
* The content of each skeleton card when `type` is `card`.
|
|
104
|
+
*/
|
|
105
|
+
'card-content'?(): any;
|
|
106
|
+
/**
|
|
107
|
+
* The footer of each skeleton card when `type` is `card`.
|
|
108
|
+
*/
|
|
109
|
+
'card-footer'?(): any;
|
|
110
|
+
}
|
|
111
|
+
/**
|
|
112
|
+
* @internal
|
|
113
|
+
*/
|
|
114
|
+
export type SkeletonCardSlots = Pick<SkeletonSlots, 'card-header' | 'card-content' | 'card-footer'>;
|
|
115
|
+
/**
|
|
116
|
+
* @internal
|
|
117
|
+
*/
|
|
118
|
+
export type SkeletonTableSlots = Pick<SkeletonSlots, 'default'>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kong/kongponents",
|
|
3
|
-
"version": "9.30.
|
|
3
|
+
"version": "9.30.2-pr.2733.0df99fd39.0",
|
|
4
4
|
"description": "Kong Component library",
|
|
5
5
|
"type": "module",
|
|
6
6
|
"repository": {
|
|
@@ -26,33 +26,6 @@
|
|
|
26
26
|
"./package.json": "./package.json",
|
|
27
27
|
"./dist/*": "./dist/*"
|
|
28
28
|
},
|
|
29
|
-
"scripts": {
|
|
30
|
-
"build:cli": "rimraf ./bin && tsc --project ./cli/tsconfig.json && chmod u+x ./bin/index.js",
|
|
31
|
-
"build:docs": "vitepress build docs",
|
|
32
|
-
"build:kongponents": "pnpm typecheck && vite build && vue-tsc -p './tsconfig.build.json' --emitDeclarationOnly && tsc-alias -p './tsconfig.build.json'",
|
|
33
|
-
"build:visualize": "cross-env-shell BUILD_VISUALIZER=true vite build -m production",
|
|
34
|
-
"build": "pnpm build:cli && pnpm stylelint && pnpm lint && pnpm build:kongponents && pnpm build:docs",
|
|
35
|
-
"build:ci": "pnpm build:kongponents && pnpm build:docs",
|
|
36
|
-
"commit": "cz",
|
|
37
|
-
"create-kongponent": "node ./bin/index.js",
|
|
38
|
-
"sandbox:dev": "cross-env USE_SANDBOX=true vite",
|
|
39
|
-
"sandbox:build": "cross-env USE_SANDBOX=true vite build && shx cp sandbox/dist/index.html sandbox/dist/404.html",
|
|
40
|
-
"sandbox:build:netlify": "cross-env USE_SANDBOX=true USE_NETLIFY=true vite build && shx cp sandbox/dist/index.html sandbox/dist/404.html",
|
|
41
|
-
"sandbox:preview": "cross-env USE_SANDBOX=true vite preview",
|
|
42
|
-
"docs:build": "vitepress build docs",
|
|
43
|
-
"docs:dev": "vitepress dev docs",
|
|
44
|
-
"docs:serve": "vitepress serve docs",
|
|
45
|
-
"docs:preview": "vitepress preview docs --port 8080",
|
|
46
|
-
"typecheck": "vue-tsc -p './tsconfig.build.json' --noEmit",
|
|
47
|
-
"lint": "eslint",
|
|
48
|
-
"lint:fix": "eslint --fix",
|
|
49
|
-
"stylelint": "stylelint './src/**/*.{css,scss,sass,vue}'",
|
|
50
|
-
"stylelint:fix": "stylelint './src/**/*.{css,scss,sass,vue}' --fix",
|
|
51
|
-
"test": "cypress run --component -b chrome",
|
|
52
|
-
"test:open": "cypress open --component -b chrome",
|
|
53
|
-
"test:spec": "cypress run --component -b chrome --spec",
|
|
54
|
-
"semantic-release": "semantic-release"
|
|
55
|
-
},
|
|
56
29
|
"dependencies": {
|
|
57
30
|
"@floating-ui/vue": "^1.1.6",
|
|
58
31
|
"@kong/icons": "^1.26.0",
|
|
@@ -80,7 +53,7 @@
|
|
|
80
53
|
"@cypress/vite-dev-server": "^6.0.3",
|
|
81
54
|
"@digitalroute/cz-conventional-changelog-for-jira": "^8.0.1",
|
|
82
55
|
"@evilmartians/lefthook": "^1.11.11",
|
|
83
|
-
"@kong-ui-public/sandbox-layout": "^2.1.
|
|
56
|
+
"@kong-ui-public/sandbox-layout": "^2.1.72",
|
|
84
57
|
"@kong/design-tokens": "^1.17.4",
|
|
85
58
|
"@kong/eslint-config-kong-ui": "^1.2.7",
|
|
86
59
|
"@semantic-release/changelog": "^6.0.3",
|
|
@@ -120,7 +93,7 @@
|
|
|
120
93
|
"stylelint-config-html": "^1.1.0",
|
|
121
94
|
"stylelint-config-recommended-scss": "^14.1.0",
|
|
122
95
|
"stylelint-config-recommended-vue": "^1.5.0",
|
|
123
|
-
"stylelint-order": "^
|
|
96
|
+
"stylelint-order": "^7.0.0",
|
|
124
97
|
"tsc-alias": "^1.8.15",
|
|
125
98
|
"typescript": "^5.6.3",
|
|
126
99
|
"vite": "^6.0.15",
|
|
@@ -181,7 +154,6 @@
|
|
|
181
154
|
"engines": {
|
|
182
155
|
"node": ">=v16.20.2 || >=18.12.1 || >=20.14.0"
|
|
183
156
|
},
|
|
184
|
-
"packageManager": "pnpm@9.11.0",
|
|
185
157
|
"volta": {
|
|
186
158
|
"node": "20.17.0",
|
|
187
159
|
"pnpm": "9.11.0"
|
|
@@ -195,5 +167,32 @@
|
|
|
195
167
|
"jiraPrepend": "[",
|
|
196
168
|
"jiraAppend": "]"
|
|
197
169
|
}
|
|
170
|
+
},
|
|
171
|
+
"scripts": {
|
|
172
|
+
"build:cli": "rimraf ./bin && tsc --project ./cli/tsconfig.json && chmod u+x ./bin/index.js",
|
|
173
|
+
"build:docs": "vitepress build docs",
|
|
174
|
+
"build:kongponents": "pnpm typecheck && vite build && vue-tsc -p './tsconfig.build.json' --emitDeclarationOnly && tsc-alias -p './tsconfig.build.json'",
|
|
175
|
+
"build:visualize": "cross-env-shell BUILD_VISUALIZER=true vite build -m production",
|
|
176
|
+
"build": "pnpm build:cli && pnpm stylelint && pnpm lint && pnpm build:kongponents && pnpm build:docs",
|
|
177
|
+
"build:ci": "pnpm build:kongponents && pnpm build:docs",
|
|
178
|
+
"commit": "cz",
|
|
179
|
+
"create-kongponent": "node ./bin/index.js",
|
|
180
|
+
"sandbox:dev": "cross-env USE_SANDBOX=true vite",
|
|
181
|
+
"sandbox:build": "cross-env USE_SANDBOX=true vite build && shx cp sandbox/dist/index.html sandbox/dist/404.html",
|
|
182
|
+
"sandbox:build:netlify": "cross-env USE_SANDBOX=true USE_NETLIFY=true vite build && shx cp sandbox/dist/index.html sandbox/dist/404.html",
|
|
183
|
+
"sandbox:preview": "cross-env USE_SANDBOX=true vite preview",
|
|
184
|
+
"docs:build": "vitepress build docs",
|
|
185
|
+
"docs:dev": "vitepress dev docs",
|
|
186
|
+
"docs:serve": "vitepress serve docs",
|
|
187
|
+
"docs:preview": "vitepress preview docs --port 8080",
|
|
188
|
+
"typecheck": "vue-tsc -p './tsconfig.build.json' --noEmit",
|
|
189
|
+
"lint": "eslint",
|
|
190
|
+
"lint:fix": "eslint --fix",
|
|
191
|
+
"stylelint": "stylelint './src/**/*.{css,scss,sass,vue}'",
|
|
192
|
+
"stylelint:fix": "stylelint './src/**/*.{css,scss,sass,vue}' --fix",
|
|
193
|
+
"test": "cypress run --component -b chrome",
|
|
194
|
+
"test:open": "cypress open --component -b chrome",
|
|
195
|
+
"test:spec": "cypress run --component -b chrome --spec",
|
|
196
|
+
"semantic-release": "semantic-release"
|
|
198
197
|
}
|
|
199
|
-
}
|
|
198
|
+
}
|