@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.
@@ -1,17 +1,3 @@
1
- import { KdsCheckboxProps } from './types';
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":"AAiMA,OAAO,KAAK,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;yBAE/B,MAAM,EACtB,aAAa,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,OAAO,CAAC,EAC9D,YAAY,mBAAmB,CAAC,IAAI,CAAC,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,EAAE,OAAO,GAAG,MAAM,GAAG,OAAO,CAAC,CAAC,EAC3G,eAAe,WAAW,CAAC,OAAO,CAAC,OAAO,WAAW,CAAC,CAAC,CAAC,QAAQ,CAAC,EACjE;WAwKO,mBAAmB,CAAC;;4KAAkE,CAAC,4BAA2B;oBACzG,OAAO,KAAK,EAAE,gBAAgB,CAAC,EAAE,CAAC,GAAG,IAAI;WAClD,GAAG;;;EAIP,KACQ,OAAO,KAAK,EAAE,KAAK,GAAG;IAAE,KAAK,CAAC,EAAE,OAAO,CAAC,OAAO,WAAW,CAAC,CAAA;CAAE;AAnLzE,wBAmL4E;AAC5E,KAAK,mBAAmB,CAAC,CAAC,IAAI;KAAG,CAAC,IAAI,MAAM,CAAC,GAAG,CAAC,CAAC,CAAC,CAAC;CAAG,GAAG,EAAE,CAAC"}
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=KdsConfirmDialog.vue.d.ts.map
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?(_: {}): any;
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":"AAwLA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,SAAS,CAAC;AAqE7C,iBAAS,cAAc;WA8FT,OAAO,IAA6B;;yBAZpB,GAAG;wBACJ,GAAG;;;;;;EAgB/B;AAeD,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"}
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"}
@@ -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` dialog is growing with the content
24
+ * `auto` modal is growing with the content
21
25
  */
22
26
  height?: HeightSizes;
23
- /** Whether the dialog is visible or not */
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,2CAA2C;IAC3C,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,2FAA2F;IAC3F,QAAQ,CAAC,EAAE,mBAAmB,CAAC;CAChC,CAAC"}
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-9fc2815a] {
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-9fc2815a] {
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-9fc2815a] {
284
+ &[data-v-77251628] {
285
285
  outline: none;
286
286
  }
287
- & .control[data-v-9fc2815a] {
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-9fc2815a] {
292
+ &:hover:not(.disabled) .control[data-v-77251628] {
293
293
  background: var(--bg-hover);
294
294
  }
295
- &:active:not(.disabled) .control[data-v-9fc2815a] {
295
+ &:active:not(.disabled) .control[data-v-77251628] {
296
296
  background: var(--bg-active);
297
297
  }
298
- &.checked[data-v-9fc2815a],
299
- &.indeterminate[data-v-9fc2815a] {
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-9fc2815a] {
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-9fc2815a] {
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-9fc2815a] {
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-9fc2815a] {
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-9fc2815a] {
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-9fc2815a],
340
- &.indeterminate[data-v-9fc2815a] {
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-2b38736e] {
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(--v2d665626));
450
- height: var(--v659574c7);
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-2b38736e]:not([open]) {
499
+ &[data-v-8984a5b0]:not([open]) {
462
500
  display: none;
463
501
  }
464
- &[data-v-2b38736e]:focus-visible,
465
- &[data-v-2b38736e]:focus {
502
+ &[data-v-8984a5b0]:focus-visible,
503
+ &[data-v-8984a5b0]:focus {
466
504
  outline: none;
467
505
  }
468
- &[data-v-2b38736e]::backdrop {
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-14083a4d] {
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-14083a4d] {
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 KdsConfirmDialog } from './Modal/KdsConfirmDialog.vue';
8
- export * from './Modal/useKdsConfirmDialog';
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';
@@ -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,gBAAgB,EAAE,MAAM,8BAA8B,CAAC;AAC3E,cAAc,6BAA6B,CAAC;AAG5C,mBAAmB,gBAAgB,CAAC;AACpC,mBAAmB,kBAAkB,CAAC;AACtC,mBAAmB,cAAc,CAAC;AAClC,mBAAmB,eAAe,CAAC;AAGnC,cAAc,QAAQ,CAAC;AAGvB,mBAAmB,QAAQ,CAAC"}
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"}