@knime/kds-components 0.1.0 → 0.2.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, ref } from 'vue';
+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 { 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$5 = /* @__PURE__ */ defineComponent({
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "KdsIcon",
   props: {
     name: {},
@@ -68,13 +68,13 @@ const _export_sfc = (sfc, props) => {
   return target;
 };
 
-const Icon = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-d965b88c"]]);
+const KdsIcon = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-d965b88c"]]);
 
-const _hoisted_1$2 = {
+const _hoisted_1$4 = {
   key: 1,
   class: "label"
 };
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "BaseButton",
   props: {
     variant: { default: "filled" },
@@ -116,13 +116,13 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
         onClick: _cache[0] || (_cache[0] = ($event) => onClick($event))
       }, {
         default: withCtx(() => [
-          props.leadingIcon ? (openBlock(), createBlock(Icon, {
+          props.leadingIcon ? (openBlock(), createBlock(KdsIcon, {
             key: 0,
             name: props.leadingIcon,
             size: iconSize.value
           }, null, 8, ["name", "size"])) : createCommentVNode("", true),
-          props.label ? (openBlock(), createElementBlock("span", _hoisted_1$2, toDisplayString(props.label), 1)) : createCommentVNode("", true),
-          props.trailingIcon && props.label ? (openBlock(), createBlock(Icon, {
+          props.label ? (openBlock(), createElementBlock("span", _hoisted_1$4, toDisplayString(props.label), 1)) : createCommentVNode("", true),
+          props.trailingIcon && props.label ? (openBlock(), createBlock(KdsIcon, {
             key: 2,
             name: props.trailingIcon,
             size: iconSize.value
@@ -134,9 +134,9 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const BaseButton = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-6eda26d0"]]);
+const BaseButton = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-f82890d7"]]);
 
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   __name: "KdsButton",
   props: {
     variant: {},
@@ -187,7 +187,7 @@ const resolveNuxtLinkComponent = () => {
   return fallbackComponent;
 };
 
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "KdsLinkButton",
   props: {
     variant: {},
@@ -221,15 +221,15 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$1 = ["disabled", "aria-checked", "aria-describedby", "aria-invalid", "title"];
-const _hoisted_2 = { class: "control" };
-const _hoisted_3 = {
+const _hoisted_1$3 = ["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 = { class: "label" };
+const _hoisted_4$1 = { class: "label" };
 const _hoisted_5 = ["id"];
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "KdsCheckbox",
   props: {
     modelValue: { type: [Boolean, String], default: false },
@@ -286,28 +286,28 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         role: "checkbox",
         onClick: handleClick
       }, [
-        createElementVNode("div", _hoisted_2, [
-          icon.value ? (openBlock(), createBlock(Icon, {
+        createElementVNode("div", _hoisted_2$2, [
+          icon.value ? (openBlock(), createBlock(KdsIcon, {
             key: 0,
             name: icon.value,
             class: "icon",
             size: "xsmall"
           }, null, 8, ["name"])) : createCommentVNode("", true)
         ]),
-        props.label || props.helperText ? (openBlock(), createElementBlock("div", _hoisted_3, [
-          createElementVNode("div", _hoisted_4, toDisplayString(props.label), 1),
+        props.label || props.helperText ? (openBlock(), createElementBlock("div", _hoisted_3$2, [
+          createElementVNode("div", _hoisted_4$1, 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$1);
+      ], 10, _hoisted_1$3);
     };
   }
 });
 
-const KdsCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-9fc2815a"]]);
+const KdsCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-9fc2815a"]]);
 
 const ID_TO_ICON_MAP = {
   // Flow Variables
@@ -453,8 +453,8 @@ const typeIconNames = [
   "xml-datatype"
 ];
 
-const _hoisted_1 = ["title"];
-const _sfc_main = /* @__PURE__ */ defineComponent({
+const _hoisted_1$2 = ["title"];
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "KdsDataType",
   props: {
     iconName: { default: "unknown-datatype" },
@@ -494,12 +494,270 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           "aria-hidden": "true",
           focusable: "false"
         }, null, 8, ["class"]))
-      ], 10, _hoisted_1);
+      ], 10, _hoisted_1$2);
+    };
+  }
+});
+
+const KdsDataType = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-f7d93fdf"]]);
+
+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: {
+    icon: { default: void 0 },
+    title: { default: "" },
+    variant: { default: "default" },
+    width: { default: "medium" },
+    height: { default: "auto" },
+    active: { type: Boolean, default: false },
+    closedby: { default: "closerequest" }
+  },
+  emits: ["close"],
+  setup(__props, { emit: __emit }) {
+    useCssVars((_ctx) => ({
+      "d0cb9b20": cssModalWidth.value,
+      "v41dd21bd": cssModalHeight.value
+    }));
+    const props = __props;
+    const emit = __emit;
+    const dialog = useTemplateRef("dialogElement");
+    const onClose = (e) => {
+      emit("close", e);
+    };
+    watch(
+      () => props.active,
+      async (active) => {
+        if (active) {
+          await nextTick();
+          dialog.value?.showModal();
+        } else {
+          dialog.value?.close();
+        }
+      },
+      { immediate: true }
+    );
+    const widthMapping = {
+      small: 25,
+      medium: 32,
+      large: 45,
+      xlarge: 61
+    };
+    const cssModalWidth = computed(() => {
+      if (props.width === "full") {
+        return "var(--modal-full-size)";
+      }
+      return `var(--kds-dimension-component-width-${widthMapping[props.width]}x)`;
+    });
+    const cssModalHeight = computed(() => {
+      if (props.height === "full") {
+        return "var(--modal-full-size)";
+      }
+      return "fit-content";
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("dialog", {
+        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)
+      ], 40, _hoisted_1$1);
+    };
+  }
+});
+
+const KdsModal = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-6203f1f2"]]);
+
+const createUnwrappedPromise = () => {
+  let resolve = () => {
+  };
+  let reject = () => {
+  };
+  const promise = new Promise((res, rej) => {
+    resolve = res;
+    reject = rej;
+  });
+  return { resolve, reject, promise };
+};
+
+const defaultCancelButton = {
+  type: "cancel",
+  label: "Cancel"
+};
+const defaultConfirmButton = {
+  type: "confirm",
+  label: "Confirm"
+};
+const isActive = ref(false);
+const activeModalConfig = ref(null);
+const unwrappedPromise = ref(
+  createUnwrappedPromise()
+);
+const isComponentBasedConfig = (config) => {
+  return "component" in config;
+};
+const useKdsConfirmDialog = () => {
+  function show(config) {
+    activeModalConfig.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();
+  };
+  return {
+    show,
+    confirm,
+    cancel,
+    config: computed(() => activeModalConfig.value),
+    isActive: computed(() => isActive.value),
+    dialogResult: computed(() => unwrappedPromise.value.promise),
+    isComponentBasedConfig
+  };
+};
+
+const _hoisted_1 = {
+  key: 1,
+  class: "confirmation"
+};
+const _hoisted_2 = { class: "message" };
+const _hoisted_3 = {
+  key: 0,
+  class: "ask-again"
+};
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "KdsConfirmDialog",
+  setup(__props) {
+    const askAgain = ref(false);
+    const { config, isActive, confirm, cancel, isComponentBasedConfig } = useKdsConfirmDialog();
+    const reset = () => {
+      askAgain.value = false;
+    };
+    const onConfirm = () => {
+      confirm(askAgain.value);
+      reset();
+    };
+    const onCancel = () => {
+      cancel();
+      reset();
+    };
+    const handleConfirmButtonClick = (button) => {
+      if (button.customHandler) {
+        button.customHandler({ confirm: onConfirm });
+        return;
+      }
+      onConfirm();
+    };
+    const handleCancelButtonClick = (button) => {
+      if (button.customHandler) {
+        button.customHandler({ cancel: onCancel });
+        return;
+      }
+      onCancel();
+    };
+    const handleButtonClick = (button) => {
+      if (button.type === "cancel") {
+        handleCancelButtonClick(button);
+      } else {
+        handleConfirmButtonClick(button);
+      }
+    };
+    const defaultVariant = (type) => type === "cancel" ? "transparent" : "filled";
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(KdsModal, {
+        class: "confirm-dialog",
+        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) ? {
+          name: "footer",
+          fn: withCtx(() => [
+            (openBlock(true), createElementBlock(Fragment, null, renderList(unref(config).buttons, (button, index) => {
+              return openBlock(), createBlock(_sfc_main$5, {
+                key: index,
+                destructive: button.destructive,
+                autofocus: button.autofocus,
+                label: button.label,
+                variant: button.variant ?? defaultVariant(button.type),
+                class: normalizeClass({ "flush-left": button.flushLeft }),
+                "data-test-id": `${button.type}-button`,
+                onClick: ($event) => handleButtonClick(button)
+              }, null, 8, ["destructive", "autofocus", "label", "variant", "class", "data-test-id", "onClick"]);
+            }), 128))
+          ]),
+          key: "0"
+        } : void 0
+      ]), 1032, ["active", "title", "closedby", "icon"]);
     };
   }
 });
 
-const KdsDataType = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-f7d93fdf"]]);
+const KdsConfirmDialog = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-14083a4d"]]);
 
 const KDS_DARK_MODE_STORAGE_KEY = "KNIME_DARK_MODE";
 const defaultMode = "light";
@@ -580,5 +838,5 @@ const useKdsLegacyMode = (initialValue = false) => {
   };
 };
 
-export { _sfc_main$3 as KdsButton, KdsCheckbox, KdsDataType, Icon as KdsIcon, _sfc_main$2 as KdsLinkButton, useKdsDarkMode, useKdsLegacyMode };
+export { _sfc_main$5 as KdsButton, KdsCheckbox, KdsConfirmDialog, KdsDataType, KdsIcon, _sfc_main$4 as KdsLinkButton, KdsModal, useKdsConfirmDialog, useKdsDarkMode, useKdsLegacyMode };
 //# sourceMappingURL=index.js.map