@knime/kds-components 0.2.1 → 0.3.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/dist/Checkbox/KdsCheckbox.vue.d.ts +1 -15
- package/dist/Checkbox/KdsCheckbox.vue.d.ts.map +1 -1
- package/dist/Modal/{KdsConfirmDialog.vue.d.ts → KdsDynamicModalProvider.vue.d.ts} +1 -1
- package/dist/Modal/KdsDynamicModalProvider.vue.d.ts.map +1 -0
- package/dist/Modal/KdsModal.vue.d.ts +7 -1
- package/dist/Modal/KdsModal.vue.d.ts.map +1 -1
- package/dist/Modal/KdsModalLayout.vue.d.ts +20 -0
- package/dist/Modal/KdsModalLayout.vue.d.ts.map +1 -0
- package/dist/Modal/types.d.ts +9 -2
- package/dist/Modal/types.d.ts.map +1 -1
- package/dist/index.css +67 -65
- package/dist/index.d.ts +3 -2
- package/dist/index.d.ts.map +1 -1
- package/dist/index.js +187 -130
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
- package/dist/Modal/KdsConfirmDialog.vue.d.ts.map +0 -1
- package/dist/Modal/useKdsConfirmDialog.d.ts +0 -150
- package/dist/Modal/useKdsConfirmDialog.d.ts.map +0 -1
|
@@ -1,17 +1,3 @@
|
|
|
1
|
-
import {
|
|
2
|
-
declare const _default: <UNUSED>(__VLS_props: NonNullable<Awaited<typeof __VLS_setup>>["props"], __VLS_ctx?: __VLS_PrettifyLocal<Pick<NonNullable<Awaited<typeof __VLS_setup>>, "attrs" | "emit" | "slots">>, __VLS_expose?: NonNullable<Awaited<typeof __VLS_setup>>["expose"], __VLS_setup?: Promise<{
|
|
3
|
-
props: __VLS_PrettifyLocal<Pick<Partial<{}> & Omit<{
|
|
4
|
-
readonly "onUpdate:modelValue"?: ((value: boolean | "indeterminate" | undefined) => any) | undefined;
|
|
5
|
-
} & import('vue').VNodeProps & import('vue').AllowedComponentProps & import('vue').ComponentCustomProps, never>, "onUpdate:modelValue"> & KdsCheckboxProps & Partial<{}>> & import('vue').PublicProps;
|
|
6
|
-
expose(exposed: import('vue').ShallowUnwrapRef<{}>): void;
|
|
7
|
-
attrs: any;
|
|
8
|
-
slots: {};
|
|
9
|
-
emit: (evt: "update:modelValue", value: boolean | "indeterminate" | undefined) => void;
|
|
10
|
-
}>) => import('vue').VNode & {
|
|
11
|
-
__ctx?: Awaited<typeof __VLS_setup>;
|
|
12
|
-
};
|
|
1
|
+
declare const _default: import('vue').DefineSetupFnComponent<Record<string, any>, {}, {}, Record<string, any> & {}, import('vue').PublicProps>;
|
|
13
2
|
export default _default;
|
|
14
|
-
type __VLS_PrettifyLocal<T> = {
|
|
15
|
-
[K in keyof T]: T[K];
|
|
16
|
-
} & {};
|
|
17
3
|
//# sourceMappingURL=KdsCheckbox.vue.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"KdsCheckbox.vue.d.ts","sourceRoot":"","sources":["../../src/Checkbox/KdsCheckbox.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"KdsCheckbox.vue.d.ts","sourceRoot":"","sources":["../../src/Checkbox/KdsCheckbox.vue"],"names":[],"mappings":";AAoWA,wBASG"}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
1
|
declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDialogElement>;
|
|
2
2
|
export default _default;
|
|
3
|
-
//# sourceMappingURL=
|
|
3
|
+
//# sourceMappingURL=KdsDynamicModalProvider.vue.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"KdsDynamicModalProvider.vue.d.ts","sourceRoot":"","sources":["../../src/Modal/KdsDynamicModalProvider.vue"],"names":[],"mappings":";AA+UA,wBAMG"}
|
|
@@ -2,7 +2,13 @@ import { KdsModalProps } from './types';
|
|
|
2
2
|
declare function __VLS_template(): {
|
|
3
3
|
attrs: Partial<{}>;
|
|
4
4
|
slots: {
|
|
5
|
-
default?(_: {
|
|
5
|
+
default?(_: {
|
|
6
|
+
title: string;
|
|
7
|
+
icon: "ai-general" | "annotation-mode" | "arrow-down" | "arrow-up" | "arrows-expand" | "arrows-move" | "arrows-order" | "back" | "bold" | "calendar" | "case-sensitive" | "center-aligned" | "checkmark" | "chevron-down" | "chevron-left-double" | "chevron-left" | "chevron-right-double" | "chevron-right" | "chevron-up" | "circle-error" | "circle-info" | "circle-question" | "circle-success" | "cloud-download" | "cloud-knime" | "cloud-upload" | "cloud-workflow" | "code-block" | "color-picker" | "comment" | "component" | "connection" | "copy" | "cursor" | "data-app" | "data-value-view" | "date-time" | "db-database" | "db-schema" | "db-table-view" | "db-table" | "deploy" | "detect" | "divider" | "duration" | "edit" | "education" | "error-panel" | "execute-all" | "execute" | "expand-panel" | "extension-community" | "extension" | "external-link" | "eye" | "file-export" | "file-text" | "file" | "filter" | "flow-variable-default" | "flow-variable-in-out" | "flow-variable-in" | "flow-variable-out" | "folder-plus" | "folder-workflow" | "folder" | "forum" | "function-catalog" | "home" | "import" | "info" | "interval" | "italic" | "layout-editor" | "left-aligned" | "like" | "limit" | "link" | "linked-metanode" | "list-bulletpoint" | "list-number" | "list-thumbs" | "list" | "local-filesystem" | "lock" | "metanode" | "mini-map" | "minimize-dialog" | "minus" | "more-actions" | "node-stack" | "nodes-align-horiz" | "nodes-align-vert" | "open-in-new-window" | "pan-mode" | "parameter" | "pending-changes" | "placeholder" | "plus" | "quote" | "re-execution" | "redo" | "regex" | "reload" | "rename" | "replace" | "reset-all" | "resume-execution" | "right-aligned" | "rocket" | "save-as" | "save" | "schedule" | "search" | "selected-cancel" | "selected-execution" | "selected-reset" | "send" | "server-rack-workflow" | "settings" | "share" | "shortcuts" | "sort-ascending" | "sort-descending" | "space-local" | "space-private" | "space" | "stepwise-execution" | "strikethrough" | "text" | "textstyles" | "thumbs-down" | "thumbs-up" | "time" | "to-bottom" | "to-top" | "trash" | "trigger" | "underline" | "undo" | "unlink" | "user" | "view-cards" | "warning" | "workflow" | "x-close";
|
|
8
|
+
variant: "default" | "plain";
|
|
9
|
+
onClose: (event: Event) => void;
|
|
10
|
+
}): any;
|
|
11
|
+
body?(_: {}): any;
|
|
6
12
|
footer?(_: {}): any;
|
|
7
13
|
};
|
|
8
14
|
refs: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"KdsModal.vue.d.ts","sourceRoot":"","sources":["../../src/Modal/KdsModal.vue"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"KdsModal.vue.d.ts","sourceRoot":"","sources":["../../src/Modal/KdsModal.vue"],"names":[],"mappings":"AA2IA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAqE7C,iBAAS,cAAc;WA8ET,OAAO,IAA6B;;;;;;6BA/H1B,KAAK;YAkHA,GAAG;sBACN,GAAG;wBACD,GAAG;;;;;;EAgB9B;AAcD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe;;;;;;;;;;;;;;qBAUnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAapG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
|
|
@@ -0,0 +1,20 @@
|
|
|
1
|
+
import { KdsModalLayoutProps } from './types';
|
|
2
|
+
declare function __VLS_template(): {
|
|
3
|
+
attrs: Partial<{}>;
|
|
4
|
+
slots: {
|
|
5
|
+
body?(_: {}): any;
|
|
6
|
+
footer?(_: {}): any;
|
|
7
|
+
};
|
|
8
|
+
refs: {};
|
|
9
|
+
rootEl: any;
|
|
10
|
+
};
|
|
11
|
+
type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
|
|
12
|
+
declare const __VLS_component: import('vue').DefineComponent<KdsModalLayoutProps, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<KdsModalLayoutProps> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, false, {}, any>;
|
|
13
|
+
declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
|
|
14
|
+
export default _default;
|
|
15
|
+
type __VLS_WithTemplateSlots<T, S> = T & {
|
|
16
|
+
new (): {
|
|
17
|
+
$slots: S;
|
|
18
|
+
};
|
|
19
|
+
};
|
|
20
|
+
//# sourceMappingURL=KdsModalLayout.vue.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"KdsModalLayout.vue.d.ts","sourceRoot":"","sources":["../../src/Modal/KdsModalLayout.vue"],"names":[],"mappings":"AAiFA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,SAAS,CAAC;AAQnD,iBAAS,cAAc;WAkFT,OAAO,IAA6B;;sBAXvB,GAAG;wBACD,GAAG;;;;EAe/B;AAUD,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AAC9D,QAAA,MAAM,eAAe,kTAMnB,CAAC;wBACkB,uBAAuB,CAAC,OAAO,eAAe,EAAE,oBAAoB,CAAC,OAAO,CAAC,CAAC;AAAnG,wBAAoG;AAQpG,KAAK,uBAAuB,CAAC,CAAC,EAAE,CAAC,IAAI,CAAC,GAAG;IACxC,QAAO;QACN,MAAM,EAAE,CAAC,CAAC;KAEV,CAAA;CACD,CAAC"}
|
package/dist/Modal/types.d.ts
CHANGED
|
@@ -5,6 +5,10 @@ type HeightSizes = (typeof heightSizes)[number];
|
|
|
5
5
|
type ModalVariants = (typeof modalVariants)[number];
|
|
6
6
|
type ClosedByOptionsType = (typeof closedByOptions)[number];
|
|
7
7
|
export type KdsModalProps = {
|
|
8
|
+
/** Icon for the header of the modal.
|
|
9
|
+
*
|
|
10
|
+
* **Only used for special modals most regular ones do not need one.**
|
|
11
|
+
*/
|
|
8
12
|
icon?: KdsIconName;
|
|
9
13
|
title?: string;
|
|
10
14
|
/**
|
|
@@ -17,13 +21,16 @@ export type KdsModalProps = {
|
|
|
17
21
|
/**
|
|
18
22
|
* `full` take all space
|
|
19
23
|
*
|
|
20
|
-
* `auto`
|
|
24
|
+
* `auto` modal is growing with the content
|
|
21
25
|
*/
|
|
22
26
|
height?: HeightSizes;
|
|
23
|
-
/** Whether the
|
|
27
|
+
/** Whether the modal is visible or not */
|
|
24
28
|
active?: boolean;
|
|
25
29
|
/** https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog#closedby */
|
|
26
30
|
closedby?: ClosedByOptionsType;
|
|
27
31
|
};
|
|
32
|
+
export type KdsModalLayoutProps = Pick<KdsModalProps, "title" | "variant" | "icon"> & {
|
|
33
|
+
onClose: (event: Event) => void;
|
|
34
|
+
};
|
|
28
35
|
export {};
|
|
29
36
|
//# sourceMappingURL=types.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/Modal/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAEjD,OAAO,KAAK,EACV,eAAe,EACf,WAAW,EACX,aAAa,EACb,UAAU,EACX,MAAM,aAAa,CAAC;AAErB,KAAK,UAAU,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;AAC9C,KAAK,WAAW,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AAChD,KAAK,aAAa,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AACpD,KAAK,mBAAmB,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;AAE5D,MAAM,MAAM,aAAa,GAAG;IAC1B,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB;;;;OAIG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,
|
|
1
|
+
{"version":3,"file":"types.d.ts","sourceRoot":"","sources":["../../src/Modal/types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAEjD,OAAO,KAAK,EACV,eAAe,EACf,WAAW,EACX,aAAa,EACb,UAAU,EACX,MAAM,aAAa,CAAC;AAErB,KAAK,UAAU,GAAG,CAAC,OAAO,UAAU,CAAC,CAAC,MAAM,CAAC,CAAC;AAC9C,KAAK,WAAW,GAAG,CAAC,OAAO,WAAW,CAAC,CAAC,MAAM,CAAC,CAAC;AAChD,KAAK,aAAa,GAAG,CAAC,OAAO,aAAa,CAAC,CAAC,MAAM,CAAC,CAAC;AACpD,KAAK,mBAAmB,GAAG,CAAC,OAAO,eAAe,CAAC,CAAC,MAAM,CAAC,CAAC;AAE5D,MAAM,MAAM,aAAa,GAAG;IAC1B;;;OAGG;IACH,IAAI,CAAC,EAAE,WAAW,CAAC;IACnB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;;;OAIG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB,KAAK,CAAC,EAAE,UAAU,CAAC;IACnB;;;;OAIG;IACH,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,0CAA0C;IAC1C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,2FAA2F;IAC3F,QAAQ,CAAC,EAAE,mBAAmB,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,mBAAmB,GAAG,IAAI,CACpC,aAAa,EACb,OAAO,GAAG,SAAS,GAAG,MAAM,CAC7B,GAAG;IAAE,OAAO,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAA;CAAE,CAAC"}
|
package/dist/index.css
CHANGED
|
@@ -248,7 +248,7 @@ html.kds-legacy {
|
|
|
248
248
|
}
|
|
249
249
|
|
|
250
250
|
.checkbox {
|
|
251
|
-
&[data-v-
|
|
251
|
+
&[data-v-77251628] {
|
|
252
252
|
--bg-initial: var(--kds-color-background-input-initial);
|
|
253
253
|
--bg-hover: var(--kds-color-background-input-hover);
|
|
254
254
|
--bg-active: var(--kds-color-background-input-active);
|
|
@@ -267,7 +267,7 @@ html.kds-legacy {
|
|
|
267
267
|
background: none;
|
|
268
268
|
border: none;
|
|
269
269
|
}
|
|
270
|
-
& .control[data-v-
|
|
270
|
+
& .control[data-v-77251628] {
|
|
271
271
|
position: relative;
|
|
272
272
|
display: flex;
|
|
273
273
|
flex-shrink: 0;
|
|
@@ -281,45 +281,45 @@ html.kds-legacy {
|
|
|
281
281
|
border-radius: var(--kds-border-radius-container-0-25x);
|
|
282
282
|
}
|
|
283
283
|
&:focus-visible {
|
|
284
|
-
&[data-v-
|
|
284
|
+
&[data-v-77251628] {
|
|
285
285
|
outline: none;
|
|
286
286
|
}
|
|
287
|
-
& .control[data-v-
|
|
287
|
+
& .control[data-v-77251628] {
|
|
288
288
|
outline: var(--kds-border-action-focused);
|
|
289
289
|
outline-offset: var(--kds-spacing-offset-focus);
|
|
290
290
|
}
|
|
291
291
|
}
|
|
292
|
-
&:hover:not(.disabled) .control[data-v-
|
|
292
|
+
&:hover:not(.disabled) .control[data-v-77251628] {
|
|
293
293
|
background: var(--bg-hover);
|
|
294
294
|
}
|
|
295
|
-
&:active:not(.disabled) .control[data-v-
|
|
295
|
+
&:active:not(.disabled) .control[data-v-77251628] {
|
|
296
296
|
background: var(--bg-active);
|
|
297
297
|
}
|
|
298
|
-
&.checked[data-v-
|
|
299
|
-
&.indeterminate[data-v-
|
|
298
|
+
&.checked[data-v-77251628],
|
|
299
|
+
&.indeterminate[data-v-77251628] {
|
|
300
300
|
--bg-initial: var(--kds-color-background-selected-initial);
|
|
301
301
|
--bg-hover: var(--kds-color-background-selected-hover);
|
|
302
302
|
--bg-active: var(--kds-color-background-selected-active);
|
|
303
303
|
--border: var(--kds-border-action-selected);
|
|
304
304
|
}
|
|
305
305
|
& .content {
|
|
306
|
-
&[data-v-
|
|
306
|
+
&[data-v-77251628] {
|
|
307
307
|
display: flex;
|
|
308
308
|
flex-direction: column;
|
|
309
309
|
gap: var(--kds-spacing-container-0-12x);
|
|
310
310
|
text-rendering: geometricprecision;
|
|
311
311
|
}
|
|
312
|
-
& .label[data-v-
|
|
312
|
+
& .label[data-v-77251628] {
|
|
313
313
|
padding-top: var(--kds-spacing-container-0-10x);
|
|
314
314
|
font: var(--kds-font-base-interactive-small);
|
|
315
315
|
color: var(--text-color);
|
|
316
316
|
}
|
|
317
|
-
& .helper-text[data-v-
|
|
317
|
+
& .helper-text[data-v-77251628] {
|
|
318
318
|
font: var(--kds-font-base-subtext-small);
|
|
319
319
|
color: var(--helper-text-color);
|
|
320
320
|
}
|
|
321
321
|
}
|
|
322
|
-
&.disabled[data-v-
|
|
322
|
+
&.disabled[data-v-77251628] {
|
|
323
323
|
--border: var(--kds-border-action-disabled);
|
|
324
324
|
--icon-color: var(--kds-color-text-and-icon-disabled);
|
|
325
325
|
--text-color: var(--kds-color-text-and-icon-disabled);
|
|
@@ -328,7 +328,7 @@ html.kds-legacy {
|
|
|
328
328
|
cursor: not-allowed;
|
|
329
329
|
}
|
|
330
330
|
&.error {
|
|
331
|
-
&[data-v-
|
|
331
|
+
&[data-v-77251628] {
|
|
332
332
|
--border: var(--kds-border-action-error);
|
|
333
333
|
--icon-color: var(--kds-color-text-and-icon-danger);
|
|
334
334
|
--text-color: var(--kds-color-text-and-icon-danger);
|
|
@@ -336,8 +336,8 @@ html.kds-legacy {
|
|
|
336
336
|
--bg-hover: var(--kds-color-background-danger-hover);
|
|
337
337
|
--bg-active: var(--kds-color-background-danger-active);
|
|
338
338
|
}
|
|
339
|
-
&.checked[data-v-
|
|
340
|
-
&.indeterminate[data-v-
|
|
339
|
+
&.checked[data-v-77251628],
|
|
340
|
+
&.indeterminate[data-v-77251628] {
|
|
341
341
|
--bg-initial: var(--kds-color-background-danger-initial);
|
|
342
342
|
}
|
|
343
343
|
}
|
|
@@ -428,26 +428,64 @@ html.kds-legacy {
|
|
|
428
428
|
}
|
|
429
429
|
}
|
|
430
430
|
|
|
431
|
+
.modal-header {
|
|
432
|
+
&[data-v-5a49b1d8] {
|
|
433
|
+
display: flex;
|
|
434
|
+
gap: var(--kds-spacing-container-0-5x);
|
|
435
|
+
align-items: center;
|
|
436
|
+
padding: var(--kds-spacing-container-0-5x) var(--kds-spacing-container-0-5x)
|
|
437
|
+
var(--kds-spacing-container-0-5x) var(--kds-spacing-container-1-5x);
|
|
438
|
+
font: var(--kds-font-base-title-medium-strong);
|
|
439
|
+
color: var(--kds-color-text-and-icon-neutral);
|
|
440
|
+
}
|
|
441
|
+
& .modal-header-title[data-v-5a49b1d8] {
|
|
442
|
+
flex: 1 1 auto;
|
|
443
|
+
}
|
|
444
|
+
}
|
|
445
|
+
.modal-body {
|
|
446
|
+
&[data-v-5a49b1d8] {
|
|
447
|
+
--modal-padding-left: var(--kds-spacing-container-1-5x);
|
|
448
|
+
--modal-padding-right: var(--kds-spacing-container-1-5x);
|
|
449
|
+
--modal-padding-top: var(--kds-spacing-container-0-5x);
|
|
450
|
+
--modal-padding-bottom: var(--kds-spacing-container-1x);
|
|
451
|
+
--modal-gap: var(--kds-spacing-container-1x);
|
|
452
|
+
|
|
453
|
+
display: flex;
|
|
454
|
+
flex-direction: column;
|
|
455
|
+
overflow: hidden;
|
|
456
|
+
font: var(--kds-font-base-body-medium);
|
|
457
|
+
color: var(--kds-color-text-and-icon-neutral);
|
|
458
|
+
}
|
|
459
|
+
&.modal-body-variant-default[data-v-5a49b1d8] {
|
|
460
|
+
gap: var(--modal-gap);
|
|
461
|
+
padding: var(--modal-padding-top) var(--modal-padding-right)
|
|
462
|
+
var(--modal-padding-bottom) var(--modal-padding-left);
|
|
463
|
+
overflow-y: auto; /* scroll if needed */
|
|
464
|
+
overscroll-behavior: contain;
|
|
465
|
+
}
|
|
466
|
+
}
|
|
467
|
+
.modal-footer[data-v-5a49b1d8] {
|
|
468
|
+
display: flex;
|
|
469
|
+
gap: var(--kds-spacing-container-0-5x);
|
|
470
|
+
justify-content: right;
|
|
471
|
+
padding: var(--kds-spacing-container-1x) var(--kds-spacing-container-1-5x);
|
|
472
|
+
}
|
|
473
|
+
|
|
431
474
|
/** see: https://github.com/whatwg/html/issues/7732 */
|
|
432
475
|
body:has(dialog.modal[open]) {
|
|
433
476
|
overflow: hidden;
|
|
434
477
|
}
|
|
435
478
|
|
|
436
479
|
.base-modal {
|
|
437
|
-
&[data-v-
|
|
480
|
+
&[data-v-8984a5b0] {
|
|
438
481
|
/* rule is broken it complains about local variables for no reason */
|
|
439
482
|
/* stylelint-disable csstools/value-no-unknown-custom-properties */
|
|
440
483
|
--modal-full-size: 95%;
|
|
441
|
-
--modal-padding-left: var(--kds-spacing-container-1-5x);
|
|
442
|
-
--modal-padding-right: var(--kds-spacing-container-1-5x);
|
|
443
|
-
--modal-padding-top: var(--kds-spacing-container-0-5x);
|
|
444
|
-
--modal-padding-bottom: var(--kds-spacing-container-1x);
|
|
445
|
-
--modal-gap: var(--kds-spacing-container-1x);
|
|
446
484
|
|
|
447
485
|
display: grid;
|
|
448
486
|
grid-template-rows: auto 1fr auto;
|
|
449
|
-
width: min(var(--modal-full-size), var(--
|
|
450
|
-
height: var(--
|
|
487
|
+
width: min(var(--modal-full-size), var(--v002a6132));
|
|
488
|
+
height: var(--v38bfb8b4);
|
|
451
489
|
max-height: var(--modal-full-size);
|
|
452
490
|
padding: 0;
|
|
453
491
|
overflow: hidden;
|
|
@@ -458,57 +496,21 @@ body:has(dialog.modal[open]) {
|
|
|
458
496
|
border-radius: var(--kds-border-radius-container-0-37x);
|
|
459
497
|
box-shadow: var(--kds-elevation-level-3);
|
|
460
498
|
}
|
|
461
|
-
&[data-v-
|
|
499
|
+
&[data-v-8984a5b0]:not([open]) {
|
|
462
500
|
display: none;
|
|
463
501
|
}
|
|
464
|
-
&[data-v-
|
|
465
|
-
&[data-v-
|
|
502
|
+
&[data-v-8984a5b0]:focus-visible,
|
|
503
|
+
&[data-v-8984a5b0]:focus {
|
|
466
504
|
outline: none;
|
|
467
505
|
}
|
|
468
|
-
&[data-v-
|
|
506
|
+
&[data-v-8984a5b0]::backdrop {
|
|
469
507
|
background: var(--kds-color-blanket-default);
|
|
470
508
|
}
|
|
471
|
-
& .modal-header {
|
|
472
|
-
&[data-v-2b38736e] {
|
|
473
|
-
display: flex;
|
|
474
|
-
gap: var(--kds-spacing-container-0-5x);
|
|
475
|
-
align-items: center;
|
|
476
|
-
padding: var(--kds-spacing-container-0-5x) var(--kds-spacing-container-0-5x)
|
|
477
|
-
var(--kds-spacing-container-0-5x) var(--kds-spacing-container-1-5x);
|
|
478
|
-
font: var(--kds-font-base-title-medium-strong);
|
|
479
|
-
color: var(--kds-color-text-and-icon-neutral);
|
|
480
|
-
}
|
|
481
|
-
& .modal-header-title[data-v-2b38736e] {
|
|
482
|
-
flex: 1 1 auto;
|
|
483
|
-
}
|
|
484
|
-
}
|
|
485
|
-
& .modal-body {
|
|
486
|
-
&[data-v-2b38736e] {
|
|
487
|
-
display: flex;
|
|
488
|
-
flex-direction: column;
|
|
489
|
-
overflow: hidden;
|
|
490
|
-
font: var(--kds-font-base-body-medium);
|
|
491
|
-
color: var(--kds-color-text-and-icon-neutral);
|
|
492
|
-
}
|
|
493
|
-
&.modal-body-variant-default[data-v-2b38736e] {
|
|
494
|
-
gap: var(--modal-gap);
|
|
495
|
-
padding: var(--modal-padding-top) var(--modal-padding-right)
|
|
496
|
-
var(--modal-padding-bottom) var(--modal-padding-left);
|
|
497
|
-
overflow-y: auto; /* scroll if needed */
|
|
498
|
-
overscroll-behavior: contain;
|
|
499
|
-
}
|
|
500
|
-
}
|
|
501
|
-
& .modal-footer[data-v-2b38736e] {
|
|
502
|
-
display: flex;
|
|
503
|
-
gap: var(--kds-spacing-container-0-5x);
|
|
504
|
-
justify-content: right;
|
|
505
|
-
padding: var(--kds-spacing-container-1x) var(--kds-spacing-container-1-5x);
|
|
506
|
-
}
|
|
507
509
|
}
|
|
508
510
|
|
|
509
|
-
.ask-again[data-v-
|
|
511
|
+
.ask-again[data-v-d1529fac] {
|
|
510
512
|
padding: var(--kds-spacing-container-0-5x) 0 0 0;
|
|
511
513
|
}
|
|
512
|
-
.flush-left[data-v-
|
|
514
|
+
.flush-left[data-v-d1529fac] {
|
|
513
515
|
margin-right: auto;
|
|
514
516
|
}
|
package/dist/index.d.ts
CHANGED
|
@@ -4,8 +4,9 @@ export { default as KdsCheckbox } from './Checkbox/KdsCheckbox.vue';
|
|
|
4
4
|
export { default as KdsIcon } from './Icon/KdsIcon.vue';
|
|
5
5
|
export { default as KdsDataType } from './Icon/KdsDataType.vue';
|
|
6
6
|
export { default as KdsModal } from './Modal/KdsModal.vue';
|
|
7
|
-
export { default as
|
|
8
|
-
export
|
|
7
|
+
export { default as KdsModalLayout } from './Modal/KdsModalLayout.vue';
|
|
8
|
+
export { default as KdsDynamicModalProvider } from './Modal/KdsDynamicModalProvider.vue';
|
|
9
|
+
export { type KdsDynamicDialogConfirmConfig, type KdsDynamicModalTemplateConfig, type KdsDynamicModalPropsAPI, useKdsDynamicModal, } from './Modal/useKdsDynamicModal';
|
|
9
10
|
export type * from './Button/types';
|
|
10
11
|
export type * from './Checkbox/types';
|
|
11
12
|
export type * from './Icon/types';
|
package/dist/index.d.ts.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,4BAA4B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,4BAA4B,CAAC;AACpE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,oBAAoB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,sBAAsB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,4BAA4B,CAAC;AACvE,OAAO,EAAE,OAAO,IAAI,uBAAuB,EAAE,MAAM,qCAAqC,CAAC;AACzF,OAAO,EACL,KAAK,6BAA6B,EAClC,KAAK,6BAA6B,EAClC,KAAK,uBAAuB,EAC5B,kBAAkB,GACnB,MAAM,4BAA4B,CAAC;AAGpC,mBAAmB,gBAAgB,CAAC;AACpC,mBAAmB,kBAAkB,CAAC;AACtC,mBAAmB,cAAc,CAAC;AAClC,mBAAmB,eAAe,CAAC;AAGnC,cAAc,QAAQ,CAAC;AAGvB,mBAAmB,QAAQ,CAAC"}
|