@knime/kds-components 0.2.0 → 0.3.0

package/dist/index.js

@@ -1,4 +1,4 @@
-import { shallowRef, watch, defineComponent, toRef, createBlock, createElementBlock, unref, openBlock, resolveDynamicComponent, normalizeClass, computed, withCtx, createCommentVNode, toDisplayString, mergeProps, h, useSlots, getCurrentInstance, useId, createElementVNode, useCssVars, useTemplateRef, nextTick, withModifiers, Fragment, createVNode, renderSlot, ref, createSlots, renderList } from 'vue';
+import { shallowRef, watch, defineComponent, toRef, createBlock, createElementBlock, unref, openBlock, resolveDynamicComponent, normalizeClass, computed, withCtx, createCommentVNode, toDisplayString, mergeProps, h, useSlots, getCurrentInstance, useId, createElementVNode, Fragment, createVNode, renderSlot, useCssVars, useTemplateRef, nextTick, withModifiers, ref, createSlots, renderList, normalizeProps, guardReactiveProps } from 'vue';
 import { useLocalStorage, useDark, usePreferredDark } from '@vueuse/core';
 
 import './index.css';const __variableDynamicImportRuntimeHelper = (glob$1, path$13, segs) => {
@@ -35,7 +35,7 @@ const useIcon = ({
   return iconComponent;
 };
 
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "KdsIcon",
   props: {
     name: {},
@@ -68,13 +68,13 @@ const _export_sfc = (sfc, props) => {
   return target;
 };
 
-const KdsIcon = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-d965b88c"]]);
+const KdsIcon = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-d965b88c"]]);
 
-const _hoisted_1$4 = {
+const _hoisted_1$5 = {
   key: 1,
   class: "label"
 };
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "BaseButton",
   props: {
     variant: { default: "filled" },
@@ -121,7 +121,7 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
             name: props.leadingIcon,
             size: iconSize.value
           }, null, 8, ["name", "size"])) : createCommentVNode("", true),
-          props.label ? (openBlock(), createElementBlock("span", _hoisted_1$4, toDisplayString(props.label), 1)) : createCommentVNode("", true),
+          props.label ? (openBlock(), createElementBlock("span", _hoisted_1$5, toDisplayString(props.label), 1)) : createCommentVNode("", true),
           props.trailingIcon && props.label ? (openBlock(), createBlock(KdsIcon, {
             key: 2,
             name: props.trailingIcon,
@@ -134,9 +134,9 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const BaseButton = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-f82890d7"]]);
+const BaseButton = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-f82890d7"]]);
 
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "KdsButton",
   props: {
     variant: {},
@@ -187,7 +187,7 @@ const resolveNuxtLinkComponent = () => {
   return fallbackComponent;
 };
 
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "KdsLinkButton",
   props: {
     variant: {},
@@ -221,15 +221,15 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$3 = ["disabled", "aria-checked", "aria-describedby", "aria-invalid", "title"];
+const _hoisted_1$4 = ["disabled", "aria-checked", "aria-describedby", "aria-invalid", "title"];
 const _hoisted_2$2 = { class: "control" };
 const _hoisted_3$2 = {
   key: 0,
   class: "content"
 };
-const _hoisted_4$1 = { class: "label" };
+const _hoisted_4 = { class: "label" };
 const _hoisted_5 = ["id"];
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "KdsCheckbox",
   props: {
     modelValue: { type: [Boolean, String], default: false },
@@ -295,19 +295,19 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
           }, null, 8, ["name"])) : createCommentVNode("", true)
         ]),
         props.label || props.helperText ? (openBlock(), createElementBlock("div", _hoisted_3$2, [
-          createElementVNode("div", _hoisted_4$1, toDisplayString(props.label), 1),
+          createElementVNode("div", _hoisted_4, toDisplayString(props.label), 1),
           props.helperText ? (openBlock(), createElementBlock("div", {
             key: 0,
             id: `${unref(id)}-helper`,
             class: "helper-text"
           }, toDisplayString(props.helperText), 9, _hoisted_5)) : createCommentVNode("", true)
         ])) : createCommentVNode("", true)
-      ], 10, _hoisted_1$3);
+      ], 10, _hoisted_1$4);
     };
   }
 });
 
-const KdsCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-9fc2815a"]]);
+const KdsCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-9fc2815a"]]);
 
 const ID_TO_ICON_MAP = {
   // Flow Variables
@@ -453,8 +453,8 @@ const typeIconNames = [
   "xml-datatype"
 ];
 
-const _hoisted_1$2 = ["title"];
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$3 = ["title"];
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "KdsDataType",
   props: {
     iconName: { default: "unknown-datatype" },
@@ -494,17 +494,63 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
           "aria-hidden": "true",
           focusable: "false"
         }, null, 8, ["class"]))
-      ], 10, _hoisted_1$2);
+      ], 10, _hoisted_1$3);
+    };
+  }
+});
+
+const KdsDataType = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-f7d93fdf"]]);
+
+const _hoisted_1$2 = { class: "modal-header" };
+const _hoisted_2$1 = { class: "modal-header-title" };
+const _hoisted_3$1 = {
+  key: 0,
+  class: "modal-footer"
+};
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+  ...{ inheritAttrs: false },
+  __name: "KdsModalLayout",
+  props: {
+    title: {},
+    variant: {},
+    icon: {},
+    onClose: { type: Function }
+  },
+  setup(__props) {
+    const props = __props;
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock(Fragment, null, [
+        createElementVNode("header", _hoisted_1$2, [
+          props.icon ? (openBlock(), createBlock(KdsIcon, {
+            key: 0,
+            name: props.icon,
+            size: "medium"
+          }, null, 8, ["name"])) : createCommentVNode("", true),
+          createElementVNode("div", _hoisted_2$1, toDisplayString(props.title), 1),
+          createVNode(_sfc_main$6, {
+            "leading-icon": "x-close",
+            variant: "transparent",
+            size: "medium",
+            title: "Close",
+            onClick: props.onClose
+          }, null, 8, ["onClick"])
+        ]),
+        createElementVNode("div", {
+          class: normalizeClass(["modal-body", `modal-body-variant-${__props.variant}`])
+        }, [
+          renderSlot(_ctx.$slots, "body", {}, void 0, true)
+        ], 2),
+        _ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_3$1, [
+          renderSlot(_ctx.$slots, "footer", {}, void 0, true)
+        ])) : createCommentVNode("", true)
+      ], 64);
     };
   }
 });
 
-const KdsDataType = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-f7d93fdf"]]);
+const KdsModalLayout = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-5a49b1d8"]]);
 
 const _hoisted_1$1 = ["closedby"];
-const _hoisted_2$1 = { class: "modal-header" };
-const _hoisted_3$1 = { class: "modal-header-title" };
-const _hoisted_4 = { class: "modal-footer" };
 const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   __name: "KdsModal",
   props: {
@@ -519,14 +565,14 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   emits: ["close"],
   setup(__props, { emit: __emit }) {
     useCssVars((_ctx) => ({
-      "d0cb9b20": cssModalWidth.value,
-      "v41dd21bd": cssModalHeight.value
+      "v002a6132": cssModalWidth.value,
+      "v38bfb8b4": cssModalHeight.value
     }));
     const props = __props;
     const emit = __emit;
     const dialog = useTemplateRef("dialogElement");
-    const onClose = (e) => {
-      emit("close", e);
+    const onClose = (event) => {
+      emit("close", event);
     };
     watch(
       () => props.active,
@@ -563,40 +609,36 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         ref: "dialogElement",
         class: "base-modal",
         closedby: __props.closedby,
-        onClose,
         onCancel: withModifiers(onClose, ["prevent"])
       }, [
-        __props.active ? (openBlock(), createElementBlock(Fragment, { key: 0 }, [
-          createElementVNode("header", _hoisted_2$1, [
-            props.icon ? (openBlock(), createBlock(KdsIcon, {
-              key: 0,
-              name: props.icon,
-              size: "medium"
-            }, null, 8, ["name"])) : createCommentVNode("", true),
-            createElementVNode("div", _hoisted_3$1, toDisplayString(__props.title), 1),
-            createVNode(_sfc_main$5, {
-              "leading-icon": "x-close",
-              variant: "transparent",
-              size: "medium",
-              title: "Close",
-              onClick: onClose
-            })
-          ]),
-          createElementVNode("div", {
-            class: normalizeClass(["modal-body", `modal-body-variant-${__props.variant}`])
-          }, [
-            renderSlot(_ctx.$slots, "default", {}, void 0, true)
-          ], 2),
-          createElementVNode("footer", _hoisted_4, [
-            renderSlot(_ctx.$slots, "footer", {}, void 0, true)
-          ])
-        ], 64)) : createCommentVNode("", true)
+        __props.active ? renderSlot(_ctx.$slots, "default", {
+          key: 0,
+          title: __props.title,
+          icon: __props.icon,
+          variant: __props.variant,
+          onClose
+        }, () => [
+          createVNode(KdsModalLayout, {
+            title: __props.title,
+            icon: __props.icon,
+            variant: __props.variant,
+            onClose
+          }, {
+            body: withCtx(() => [
+              renderSlot(_ctx.$slots, "body", {}, void 0, true)
+            ]),
+            footer: withCtx(() => [
+              renderSlot(_ctx.$slots, "footer", {}, void 0, true)
+            ]),
+            _: 3
+          }, 8, ["title", "icon", "variant"])
+        ], true) : createCommentVNode("", true)
       ], 40, _hoisted_1$1);
     };
   }
 });
 
-const KdsModal = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-6203f1f2"]]);
+const KdsModal = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-8984a5b0"]]);
 
 const createUnwrappedPromise = () => {
   let resolve = () => {
@@ -620,45 +662,58 @@ const defaultConfirmButton = {
 };
 const isActive = ref(false);
 const activeModalConfig = ref(null);
-const unwrappedPromise = ref(
-  createUnwrappedPromise()
-);
-const isComponentBasedConfig = (config) => {
+const unwrappedPromise = ref(createUnwrappedPromise());
+const resetInternalState = () => {
+  isActive.value = false;
+  activeModalConfig.value = null;
+  unwrappedPromise.value = createUnwrappedPromise();
+};
+const confirm = (doNotAskAgain = false) => {
+  unwrappedPromise.value.resolve({
+    confirmed: true,
+    doNotAskAgain
+  });
+  resetInternalState();
+};
+const close = () => {
+  const isConfirm = activeModalConfig.value?.type === "confirm";
+  unwrappedPromise.value.resolve(isConfirm ? { confirmed: false } : void 0);
+  resetInternalState();
+};
+const isTemplateBasedConfirm = (config) => {
   return "component" in config;
 };
-const useKdsConfirmDialog = () => {
-  function show(config) {
+const internal = {
+  confirm,
+  close,
+  isTemplateBasedConfirm
+};
+const useKdsDynamicModal = () => {
+  function askConfirmation(config) {
     activeModalConfig.value = {
-      buttons: [defaultCancelButton, defaultConfirmButton],
-      ...config
+      type: "confirm",
+      value: {
+        buttons: [defaultCancelButton, defaultConfirmButton],
+        ...config
+      }
     };
     isActive.value = true;
     return unwrappedPromise.value.promise;
   }
-  const close = () => {
-    isActive.value = false;
-    activeModalConfig.value = null;
-    unwrappedPromise.value = createUnwrappedPromise();
-  };
-  const confirm = (doNotAskAgain = false) => {
-    unwrappedPromise.value.resolve({
-      confirmed: true,
-      doNotAskAgain
-    });
-    close();
-  };
-  const cancel = () => {
-    unwrappedPromise.value.resolve({ confirmed: false });
-    close();
+  const showByTemplate = (config) => {
+    activeModalConfig.value = {
+      type: "dynamic",
+      value: config
+    };
+    isActive.value = true;
+    return unwrappedPromise.value.promise;
   };
   return {
-    show,
-    confirm,
-    cancel,
+    askConfirmation,
+    showByTemplate,
     config: computed(() => activeModalConfig.value),
     isActive: computed(() => isActive.value),
-    dialogResult: computed(() => unwrappedPromise.value.promise),
-    isComponentBasedConfig
+    close: () => internal.close()
   };
 };
 
@@ -672,73 +727,67 @@ const _hoisted_3 = {
   class: "ask-again"
 };
 const _sfc_main = /* @__PURE__ */ defineComponent({
-  __name: "KdsConfirmDialog",
+  __name: "KdsDynamicModalProvider",
   setup(__props) {
     const askAgain = ref(false);
-    const { config, isActive, confirm, cancel, isComponentBasedConfig } = useKdsConfirmDialog();
+    const { config, isActive } = useKdsDynamicModal();
     const reset = () => {
       askAgain.value = false;
     };
     const onConfirm = () => {
-      confirm(askAgain.value);
+      internal.confirm(askAgain.value);
       reset();
     };
-    const onCancel = () => {
-      cancel();
+    const onClose = () => {
+      internal.close();
       reset();
     };
-    const handleConfirmButtonClick = (button) => {
-      if (button.customHandler) {
-        button.customHandler({ confirm: onConfirm });
-        return;
-      }
-      onConfirm();
-    };
-    const handleCancelButtonClick = (button) => {
-      if (button.customHandler) {
-        button.customHandler({ cancel: onCancel });
+    const handleConfirmButton = (button) => {
+      if (!button.customHandler) {
+        const handler = button.type === "cancel" ? onClose : onConfirm;
+        handler();
         return;
       }
-      onCancel();
-    };
-    const handleButtonClick = (button) => {
       if (button.type === "cancel") {
-        handleCancelButtonClick(button);
-      } else {
-        handleConfirmButtonClick(button);
+        button.customHandler({ cancel: onClose });
+      }
+      if (button.type === "confirm") {
+        button.customHandler({ confirm: onConfirm });
       }
     };
     const defaultVariant = (type) => type === "cancel" ? "transparent" : "filled";
     return (_ctx, _cache) => {
       return openBlock(), createBlock(KdsModal, {
-        class: "confirm-dialog",
+        class: "confirm-modal",
         active: unref(isActive),
-        title: unref(config)?.title,
-        closedby: unref(config)?.closedby,
-        icon: unref(config)?.icon,
-        onClose: onCancel
-      }, createSlots({
-        default: withCtx(() => [
-          unref(config) && unref(isComponentBasedConfig)(unref(config)) ? (openBlock(), createBlock(resolveDynamicComponent(unref(config).component), { key: 0 })) : (openBlock(), createElementBlock("div", _hoisted_1, [
-            createElementVNode("div", _hoisted_2, toDisplayString(unref(config)?.message), 1),
-            unref(config)?.doNotAskAgain ? (openBlock(), createElementBlock("div", _hoisted_3, [
-              createVNode(KdsCheckbox, {
-                modelValue: askAgain.value,
-                "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => askAgain.value = $event),
-                label: unref(config).doNotAskAgain.label,
-                title: unref(config).doNotAskAgain.title,
-                "helper-text": unref(config).doNotAskAgain.helperText
-              }, null, 8, ["modelValue", "label", "title", "helper-text"])
-            ])) : createCommentVNode("", true)
-          ]))
-        ]),
-        _: 2
-      }, [
-        unref(config) ? {
+        title: unref(config)?.value.title,
+        closedby: unref(config)?.value.closedby,
+        icon: unref(config)?.value.icon,
+        onClose
+      }, createSlots({ _: 2 }, [
+        unref(config)?.type === "confirm" ? {
+          name: "body",
+          fn: withCtx(() => [
+            unref(internal).isTemplateBasedConfirm(unref(config).value) ? (openBlock(), createBlock(resolveDynamicComponent(unref(config).value.component), { key: 0 })) : (openBlock(), createElementBlock("div", _hoisted_1, [
+              createElementVNode("div", _hoisted_2, toDisplayString(unref(config).value.message), 1),
+              unref(config).value.doNotAskAgain ? (openBlock(), createElementBlock("div", _hoisted_3, [
+                createVNode(KdsCheckbox, {
+                  modelValue: askAgain.value,
+                  "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => askAgain.value = $event),
+                  label: unref(config).value.doNotAskAgain.label,
+                  title: unref(config).value.doNotAskAgain.title,
+                  "helper-text": unref(config).value.doNotAskAgain.helperText
+                }, null, 8, ["modelValue", "label", "title", "helper-text"])
+              ])) : createCommentVNode("", true)
+            ]))
+          ]),
+          key: "0"
+        } : void 0,
+        unref(config)?.type === "confirm" ? {
           name: "footer",
           fn: withCtx(() => [
-            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(config).buttons, (button, index) => {
-              return openBlock(), createBlock(_sfc_main$5, {
+            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(config).value.buttons, (button, index) => {
+              return openBlock(), createBlock(_sfc_main$6, {
                 key: index,
                 destructive: button.destructive,
                 autofocus: button.autofocus,
@@ -746,18 +795,25 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
                 variant: button.variant ?? defaultVariant(button.type),
                 class: normalizeClass({ "flush-left": button.flushLeft }),
                 "data-test-id": `${button.type}-button`,
-                onClick: ($event) => handleButtonClick(button)
+                onClick: ($event) => handleConfirmButton(button)
               }, null, 8, ["destructive", "autofocus", "label", "variant", "class", "data-test-id", "onClick"]);
             }), 128))
           ]),
-          key: "0"
+          key: "1"
+        } : void 0,
+        unref(config)?.type === "dynamic" ? {
+          name: "default",
+          fn: withCtx((slotProps) => [
+            (openBlock(), createBlock(resolveDynamicComponent(unref(config).value.component), normalizeProps(guardReactiveProps(slotProps)), null, 16))
+          ]),
+          key: "2"
         } : void 0
       ]), 1032, ["active", "title", "closedby", "icon"]);
     };
   }
 });
 
-const KdsConfirmDialog = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-14083a4d"]]);
+const KdsDynamicModalProvider = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-d1529fac"]]);
 
 const KDS_DARK_MODE_STORAGE_KEY = "KNIME_DARK_MODE";
 const defaultMode = "light";
@@ -838,5 +894,5 @@ const useKdsLegacyMode = (initialValue = false) => {
   };
 };
 
-export { _sfc_main$5 as KdsButton, KdsCheckbox, KdsConfirmDialog, KdsDataType, KdsIcon, _sfc_main$4 as KdsLinkButton, KdsModal, useKdsConfirmDialog, useKdsDarkMode, useKdsLegacyMode };
+export { _sfc_main$6 as KdsButton, KdsCheckbox, KdsDataType, KdsDynamicModalProvider, KdsIcon, _sfc_main$5 as KdsLinkButton, KdsModal, KdsModalLayout, useKdsDarkMode, useKdsDynamicModal, useKdsLegacyMode };
 //# sourceMappingURL=index.js.map