@knime/kds-components 0.5.0 → 0.5.2

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, mergeModels, useModel, useId, createElementVNode, Fragment, createVNode, renderSlot, useTemplateRef, nextTick, ref, withModifiers, createSlots, renderList, normalizeProps, guardReactiveProps } from 'vue';
+import { shallowRef, watch, defineComponent, toRef, createBlock, createElementBlock, unref, openBlock, resolveDynamicComponent, normalizeClass, computed, withCtx, createCommentVNode, toDisplayString, mergeProps, h, useSlots, getCurrentInstance, mergeModels, useModel, useId, createElementVNode, mergeDefaults, useCssVars, Fragment, createVNode, renderSlot, useTemplateRef, nextTick, ref, withModifiers, createSlots, renderList, normalizeProps, guardReactiveProps } from 'vue';
 import { useLocalStorage, useDark, usePreferredDark } from '@vueuse/core';
 
 import './index.css';const __variableDynamicImportRuntimeHelper = (glob$1, path$13, segs) => {
@@ -79,10 +79,12 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   props: {
     size: { default: "medium" },
     disabled: { type: Boolean, default: false },
+    title: {},
     variant: {},
-    label: { default: void 0 },
-    leadingIcon: { default: void 0 },
+    label: {},
+    leadingIcon: {},
     trailingIcon: {},
+    ariaLabel: {},
     destructive: { type: Boolean, default: false },
     toggled: { type: Boolean, default: false },
     component: { default: "button" }
@@ -115,6 +117,8 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
       return openBlock(), createBlock(resolveDynamicComponent(__props.component), {
         class: normalizeClass(classes.value),
         disabled: props.disabled,
+        title: props.title,
+        "aria-label": props.ariaLabel,
         onClick: _cache[0] || (_cache[0] = ($event) => onClick($event))
       }, {
         default: withCtx(() => [
@@ -131,22 +135,24 @@ const _sfc_main$8 = /* @__PURE__ */ defineComponent({
           }, null, 8, ["name", "size"])) : createCommentVNode("", true)
         ]),
         _: 1
-      }, 8, ["class", "disabled"]);
+      }, 8, ["class", "disabled", "title", "aria-label"]);
     };
   }
 });
 
-const BaseButton = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-67f7d3ae"]]);
+const BaseButton = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-18cd4b75"]]);
 
 const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "KdsButton",
   props: {
     size: {},
     disabled: { type: Boolean },
+    title: {},
     variant: { default: "filled" },
     label: {},
     leadingIcon: {},
     trailingIcon: {},
+    ariaLabel: {},
     destructive: { type: Boolean }
   },
   emits: ["click"],
@@ -194,10 +200,12 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   props: {
     size: {},
     disabled: { type: Boolean },
+    title: {},
     variant: { default: "filled" },
     label: {},
     leadingIcon: {},
     trailingIcon: {},
+    ariaLabel: {},
     destructive: { type: Boolean },
     to: {},
     download: { type: Boolean, default: void 0 },
@@ -228,10 +236,12 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   props: /* @__PURE__ */ mergeModels({
     size: {},
     disabled: { type: Boolean },
+    title: {},
     variant: { default: "outlined" },
     label: {},
     leadingIcon: {},
-    trailingIcon: {}
+    trailingIcon: {},
+    ariaLabel: {}
   }, {
     "modelValue": { type: Boolean, ...{ default: false } },
     "modelModifiers": {}
@@ -256,7 +266,7 @@ 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$4 = /* @__PURE__ */ defineComponent({
   __name: "KdsCheckbox",
@@ -324,7 +334,7 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
           }, null, 8, ["name"])) : createCommentVNode("", true)
         ]),
         props.label || props.helperText ? (openBlock(), createElementBlock("div", _hoisted_3$2, [
-          createElementVNode("div", _hoisted_4, toDisplayString(props.label), 1),
+          createElementVNode("div", _hoisted_4$1, toDisplayString(props.label), 1),
           props.helperText ? (openBlock(), createElementBlock("div", {
             key: 0,
             id: `${unref(id)}-helper`,
@@ -530,22 +540,41 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
 
 const KdsDataType = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-f7d93fdf"]]);
 
+const modalLayoutPropsDefault = {
+  title: "",
+  variant: "padded",
+  overflow: "auto",
+  icon: void 0
+};
+const modalPropsDefault = {
+  active: false,
+  height: "auto",
+  width: "medium",
+  closedby: "closerequest",
+  ...modalLayoutPropsDefault
+};
+
 const _hoisted_1$2 = { class: "modal-header" };
 const _hoisted_2$1 = { class: "modal-header-title" };
-const _hoisted_3$1 = {
+const _hoisted_3$1 = ["data-variant"];
+const _hoisted_4 = {
   key: 0,
   class: "modal-footer"
 };
 const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "KdsModalLayout",
-  props: {
+  props: /* @__PURE__ */ mergeDefaults({
     title: {},
     variant: {},
     icon: {},
+    overflow: {},
     onClose: { type: Function }
-  },
+  }, modalLayoutPropsDefault),
   setup(__props) {
+    useCssVars((_ctx) => ({
+      "v7613d0dd": _ctx.overflow
+    }));
     const props = __props;
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
@@ -565,11 +594,12 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
           }, null, 8, ["onClick"])
         ]),
         createElementVNode("div", {
-          class: normalizeClass(["modal-body", `modal-body-variant-${__props.variant}`])
+          class: "modal-body",
+          "data-variant": __props.variant
         }, [
           renderSlot(_ctx.$slots, "body", {}, void 0, true)
-        ], 2),
-        _ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_3$1, [
+        ], 8, _hoisted_3$1),
+        _ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_4, [
           renderSlot(_ctx.$slots, "footer", {}, void 0, true)
         ])) : createCommentVNode("", true)
       ], 64);
@@ -577,22 +607,26 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsModalLayout = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-2a54ec89"]]);
+const KdsModalLayout = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-c600bf4b"]]);
 
 const _hoisted_1$1 = ["closedby"];
 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" }
-  },
+  props: /* @__PURE__ */ mergeDefaults({
+    icon: {},
+    title: {},
+    variant: {},
+    width: {},
+    height: {},
+    active: { type: Boolean },
+    closedby: {},
+    overflow: {}
+  }, modalPropsDefault),
   emits: ["close", "closed"],
   setup(__props, { emit: __emit }) {
+    useCssVars((_ctx) => ({
+      "v5f410792": _ctx.overflow
+    }));
     const props = __props;
     const emit = __emit;
     const dialog = useTemplateRef("dialogElement");
@@ -636,7 +670,12 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       return renderDialog.value ? (openBlock(), createElementBlock("dialog", {
         key: 0,
         ref: "dialogElement",
-        class: normalizeClass(["kds-modal", `width-${__props.width}`, `height-${__props.height}`]),
+        class: normalizeClass([
+          "kds-modal",
+          `width-${__props.width}`,
+          `height-${__props.height}`,
+          `overflow-${__props.overflow}`
+        ]),
         closedby: __props.closedby,
         onCancel: withModifiers(onClose, ["prevent"])
       }, [
@@ -644,12 +683,14 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           title: __props.title,
           icon: __props.icon,
           variant: __props.variant,
+          overflow: __props.overflow,
           onClose
         }, () => [
           createVNode(KdsModalLayout, {
             title: __props.title,
             icon: __props.icon,
             variant: __props.variant,
+            overflow: __props.overflow,
             onClose
           }, {
             body: withCtx(() => [
@@ -659,14 +700,14 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
               renderSlot(_ctx.$slots, "footer", {}, void 0, true)
             ]),
             _: 3
-          }, 8, ["title", "icon", "variant"])
+          }, 8, ["title", "icon", "variant", "overflow"])
         ], true)
       ], 42, _hoisted_1$1)) : createCommentVNode("", true);
     };
   }
 });
 
-const KdsModal = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-7dc0f65d"]]);
+const KdsModal = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-a80b4b47"]]);
 
 const createUnwrappedPromise = () => {
   let resolve = () => {
@@ -713,11 +754,22 @@ const close = () => {
 const isTemplateBasedConfirm = (config) => {
   return "component" in config;
 };
+const updateConfig = (config) => {
+  if (!isActive.value || !activeModalConfig.value || activeModalConfig.value.type === "confirm") {
+    consola.warn("useKdsDynamicModal: invalid invocation of updateConfig");
+    return;
+  }
+  activeModalConfig.value.value = {
+    ...activeModalConfig.value.value,
+    ...config
+  };
+};
 const internal = {
   confirm,
   close,
   isTemplateBasedConfirm,
-  onClosed
+  onClosed,
+  updateConfig
 };
 const useKdsDynamicModal = () => {
   function askConfirmation(config) {
@@ -787,16 +839,26 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
       }
     };
     const defaultVariant = (type) => type === "cancel" ? "transparent" : "filled";
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(KdsModal, {
-        class: "confirm-modal",
-        active: unref(isActive),
-        title: unref(config)?.value.title,
-        closedby: unref(config)?.value.closedby,
-        icon: unref(config)?.value.icon,
+    const kdsModalProps = computed(() => {
+      if (!config.value) {
+        return {};
+      }
+      const { icon, title, height, width, variant, overflow, closedby } = config.value.value;
+      return {
+        icon,
+        title,
+        height,
+        width,
+        variant,
+        overflow,
+        closedby,
         onClose,
-        onClosed: unref(internal).onClosed
-      }, createSlots({ _: 2 }, [
+        onClosed: internal.onClosed,
+        active: isActive.value
+      };
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(KdsModal, mergeProps({ class: "confirm-modal" }, kdsModalProps.value), createSlots({ _: 2 }, [
         unref(config)?.type === "confirm" ? {
           name: "body",
           fn: withCtx(() => [
@@ -836,16 +898,20 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
         unref(config)?.type === "dynamic" ? {
           name: "default",
           fn: withCtx((slotProps) => [
-            (openBlock(), createBlock(resolveDynamicComponent(unref(config).value.component), normalizeProps(guardReactiveProps(slotProps)), null, 16))
+            (openBlock(), createBlock(resolveDynamicComponent(unref(config).value.component), normalizeProps(guardReactiveProps({
+              ...slotProps,
+              context: unref(config).value.context,
+              updateConfig: unref(internal).updateConfig
+            })), null, 16))
           ]),
           key: "2"
         } : void 0
-      ]), 1032, ["active", "title", "closedby", "icon", "onClosed"]);
+      ]), 1040);
     };
   }
 });
 
-const KdsDynamicModalProvider = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-c868f587"]]);
+const KdsDynamicModalProvider = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-bd3a851b"]]);
 
 const KDS_DARK_MODE_STORAGE_KEY = "KNIME_DARK_MODE";
 const defaultMode = "light";