@knime/kds-components 0.2.1 → 0.3.0

package/dist/Modal/{KdsConfirmDialog.vue.d.ts → KdsDynamicModalProvider.vue.d.ts}

@@ -1,3 +1,3 @@
 declare const _default: import('vue').DefineComponent<{}, {}, {}, {}, {}, import('vue').ComponentOptionsMixin, import('vue').ComponentOptionsMixin, {}, string, import('vue').PublicProps, Readonly<{}> & Readonly<{}>, {}, {}, {}, {}, string, import('vue').ComponentProvideOptions, true, {}, HTMLDialogElement>;
 export default _default;
-//# sourceMappingURL=KdsConfirmDialog.vue.d.ts.map
+//# sourceMappingURL=KdsDynamicModalProvider.vue.d.ts.map

package/dist/Modal/KdsDynamicModalProvider.vue.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"KdsDynamicModalProvider.vue.d.ts","sourceRoot":"","sources":["../../src/Modal/KdsDynamicModalProvider.vue"],"names":[],"mappings":";AA+UA,wBAMG"}

package/dist/Modal/KdsModal.vue.d.ts

@@ -2,7 +2,13 @@ import { KdsModalProps } from './types';
 declare function __VLS_template(): {
     attrs: Partial<{}>;
     slots: {
-        default?(_: {}): any;
+        default?(_: {
+            title: string;
+            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";
+            variant: "default" | "plain";
+            onClose: (event: Event) => void;
+        }): any;
+        body?(_: {}): any;
         footer?(_: {}): any;
     };
     refs: {

package/dist/Modal/KdsModal.vue.d.ts.map

@@ -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"}
+{"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"}

package/dist/Modal/KdsModalLayout.vue.d.ts

@@ -0,0 +1,20 @@
+import { KdsModalLayoutProps } from './types';
+declare function __VLS_template(): {
+    attrs: Partial<{}>;
+    slots: {
+        body?(_: {}): any;
+        footer?(_: {}): any;
+    };
+    refs: {};
+    rootEl: any;
+};
+type __VLS_TemplateResult = ReturnType<typeof __VLS_template>;
+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>;
+declare const _default: __VLS_WithTemplateSlots<typeof __VLS_component, __VLS_TemplateResult["slots"]>;
+export default _default;
+type __VLS_WithTemplateSlots<T, S> = T & {
+    new (): {
+        $slots: S;
+    };
+};
+//# sourceMappingURL=KdsModalLayout.vue.d.ts.map

package/dist/Modal/KdsModalLayout.vue.d.ts.map

@@ -0,0 +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

@@ -5,6 +5,10 @@ type HeightSizes = (typeof heightSizes)[number];
 type ModalVariants = (typeof modalVariants)[number];
 type ClosedByOptionsType = (typeof closedByOptions)[number];
 export type KdsModalProps = {
+    /** Icon for the header of the modal.
+     *
+     * **Only used for special modals most regular ones do not need one.**
+     */
     icon?: KdsIconName;
     title?: string;
     /**
@@ -17,13 +21,16 @@ export type KdsModalProps = {
     /**
      * `full` take all space
      *
-     * `auto` dialog is growing with the content
+     * `auto` modal is growing with the content
      */
     height?: HeightSizes;
-    /** Whether the dialog is visible or not */
+    /** Whether the modal is visible or not */
     active?: boolean;
     /** https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/dialog#closedby */
     closedby?: ClosedByOptionsType;
 };
+export type KdsModalLayoutProps = Pick<KdsModalProps, "title" | "variant" | "icon"> & {
+    onClose: (event: Event) => void;
+};
 export {};
 //# sourceMappingURL=types.d.ts.map

package/dist/Modal/types.d.ts.map

@@ -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"}
+{"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

@@ -428,26 +428,64 @@ html.kds-legacy {
 }
 }
 
+.modal-header {
+&[data-v-5a49b1d8] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-5x);
+  align-items: center;
+  padding: var(--kds-spacing-container-0-5x) var(--kds-spacing-container-0-5x)
+    var(--kds-spacing-container-0-5x) var(--kds-spacing-container-1-5x);
+  font: var(--kds-font-base-title-medium-strong);
+  color: var(--kds-color-text-and-icon-neutral);
+}
+& .modal-header-title[data-v-5a49b1d8] {
+    flex: 1 1 auto;
+}
+}
+.modal-body {
+&[data-v-5a49b1d8] {
+  --modal-padding-left: var(--kds-spacing-container-1-5x);
+  --modal-padding-right: var(--kds-spacing-container-1-5x);
+  --modal-padding-top: var(--kds-spacing-container-0-5x);
+  --modal-padding-bottom: var(--kds-spacing-container-1x);
+  --modal-gap: var(--kds-spacing-container-1x);
+
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  font: var(--kds-font-base-body-medium);
+  color: var(--kds-color-text-and-icon-neutral);
+}
+&.modal-body-variant-default[data-v-5a49b1d8] {
+    gap: var(--modal-gap);
+    padding: var(--modal-padding-top) var(--modal-padding-right)
+      var(--modal-padding-bottom) var(--modal-padding-left);
+    overflow-y: auto; /* scroll if needed */
+    overscroll-behavior: contain;
+}
+}
+.modal-footer[data-v-5a49b1d8] {
+  display: flex;
+  gap: var(--kds-spacing-container-0-5x);
+  justify-content: right;
+  padding: var(--kds-spacing-container-1x) var(--kds-spacing-container-1-5x);
+}
+
 /** see: https://github.com/whatwg/html/issues/7732  */
 body:has(dialog.modal[open]) {
   overflow: hidden;
 }
 
 .base-modal {
-&[data-v-2b38736e] {
+&[data-v-8984a5b0] {
   /* rule is broken it complains about local variables for no reason */
   /* stylelint-disable csstools/value-no-unknown-custom-properties */
   --modal-full-size: 95%;
-  --modal-padding-left: var(--kds-spacing-container-1-5x);
-  --modal-padding-right: var(--kds-spacing-container-1-5x);
-  --modal-padding-top: var(--kds-spacing-container-0-5x);
-  --modal-padding-bottom: var(--kds-spacing-container-1x);
-  --modal-gap: var(--kds-spacing-container-1x);
 
   display: grid;
   grid-template-rows: auto 1fr auto;
-  width: min(var(--modal-full-size), var(--v2d665626));
-  height: var(--v659574c7);
+  width: min(var(--modal-full-size), var(--v002a6132));
+  height: var(--v38bfb8b4);
   max-height: var(--modal-full-size);
   padding: 0;
   overflow: hidden;
@@ -458,57 +496,21 @@ body:has(dialog.modal[open]) {
   border-radius: var(--kds-border-radius-container-0-37x);
   box-shadow: var(--kds-elevation-level-3);
 }
-&[data-v-2b38736e]:not([open]) {
+&[data-v-8984a5b0]:not([open]) {
     display: none;
 }
-&[data-v-2b38736e]:focus-visible,
-  &[data-v-2b38736e]:focus {
+&[data-v-8984a5b0]:focus-visible,
+  &[data-v-8984a5b0]:focus {
     outline: none;
 }
-&[data-v-2b38736e]::backdrop {
+&[data-v-8984a5b0]::backdrop {
     background: var(--kds-color-blanket-default);
 }
-& .modal-header {
-&[data-v-2b38736e] {
-    display: flex;
-    gap: var(--kds-spacing-container-0-5x);
-    align-items: center;
-    padding: var(--kds-spacing-container-0-5x) var(--kds-spacing-container-0-5x)
-      var(--kds-spacing-container-0-5x) var(--kds-spacing-container-1-5x);
-    font: var(--kds-font-base-title-medium-strong);
-    color: var(--kds-color-text-and-icon-neutral);
-}
-& .modal-header-title[data-v-2b38736e] {
-      flex: 1 1 auto;
-}
-}
-& .modal-body {
-&[data-v-2b38736e] {
-    display: flex;
-    flex-direction: column;
-    overflow: hidden;
-    font: var(--kds-font-base-body-medium);
-    color: var(--kds-color-text-and-icon-neutral);
-}
-&.modal-body-variant-default[data-v-2b38736e] {
-      gap: var(--modal-gap);
-      padding: var(--modal-padding-top) var(--modal-padding-right)
-        var(--modal-padding-bottom) var(--modal-padding-left);
-      overflow-y: auto; /* scroll if needed */
-      overscroll-behavior: contain;
-}
-}
-& .modal-footer[data-v-2b38736e] {
-    display: flex;
-    gap: var(--kds-spacing-container-0-5x);
-    justify-content: right;
-    padding: var(--kds-spacing-container-1x) var(--kds-spacing-container-1-5x);
-}
 }
 
-.ask-again[data-v-14083a4d] {
+.ask-again[data-v-d1529fac] {
   padding: var(--kds-spacing-container-0-5x) 0 0 0;
 }
-.flush-left[data-v-14083a4d] {
+.flush-left[data-v-d1529fac] {
   margin-right: auto;
 }

package/dist/index.d.ts

@@ -4,8 +4,9 @@ export { default as KdsCheckbox } from './Checkbox/KdsCheckbox.vue';
 export { default as KdsIcon } from './Icon/KdsIcon.vue';
 export { default as KdsDataType } from './Icon/KdsDataType.vue';
 export { default as KdsModal } from './Modal/KdsModal.vue';
-export { default as KdsConfirmDialog } from './Modal/KdsConfirmDialog.vue';
-export * from './Modal/useKdsConfirmDialog';
+export { default as KdsModalLayout } from './Modal/KdsModalLayout.vue';
+export { default as KdsDynamicModalProvider } from './Modal/KdsDynamicModalProvider.vue';
+export { type KdsDynamicDialogConfirmConfig, type KdsDynamicModalTemplateConfig, type KdsDynamicModalPropsAPI, useKdsDynamicModal, } from './Modal/useKdsDynamicModal';
 export type * from './Button/types';
 export type * from './Checkbox/types';
 export type * from './Icon/types';

package/dist/index.d.ts.map

@@ -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"}
+{"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"}