@knime/kds-components 0.6.1 → 0.6.3

package/dist/index.js

@@ -1,5 +1,5 @@
-import { shallowRef, watch, defineComponent, toRef, createBlock, createElementBlock, unref, openBlock, resolveDynamicComponent, normalizeClass, computed, withCtx, renderSlot, createCommentVNode, toDisplayString, mergeProps, mergeDefaults, useCssVars, Fragment, createElementVNode, createVNode, useTemplateRef, nextTick, ref, withModifiers, mergeModels, useModel, useId, createSlots, renderList, normalizeProps, guardReactiveProps, h, useSlots, getCurrentInstance, normalizeStyle, onBeforeUpdate } from 'vue';
-import { useLocalStorage, useDark, usePreferredDark, useResizeObserver, useElementSize } from '@vueuse/core';
+import { shallowRef, watch, defineComponent, toRef, createBlock, createElementBlock, unref, openBlock, resolveDynamicComponent, normalizeClass, computed, withCtx, renderSlot, createCommentVNode, toDisplayString, mergeProps, h, useSlots, getCurrentInstance, createElementVNode, mergeDefaults, useCssVars, Fragment, createVNode, useTemplateRef, nextTick, ref, withModifiers, mergeModels, useModel, useId, createSlots, renderList, normalizeProps, guardReactiveProps, normalizeStyle, onBeforeUpdate } from 'vue';
+import { isDefined, useLocalStorage, useDark, usePreferredDark, useResizeObserver, useElementSize } from '@vueuse/core';
 
 import './index.css';const __variableDynamicImportRuntimeHelper = (glob$1, path$13, segs) => {
 	const v = glob$1[path$13];
@@ -35,7 +35,7 @@ const useIcon = ({
   return iconComponent;
 };
 
-const _sfc_main$l = /* @__PURE__ */ defineComponent({
+const _sfc_main$m = /* @__PURE__ */ defineComponent({
   __name: "KdsIcon",
   props: {
     name: {},
@@ -68,7 +68,7 @@ const _export_sfc = (sfc, props) => {
   return target;
 };
 
-const KdsIcon = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["__scopeId", "data-v-d965b88c"]]);
+const KdsIcon = /* @__PURE__ */ _export_sfc(_sfc_main$m, [["__scopeId", "data-v-d965b88c"]]);
 
 const ID_TO_ICON_MAP = {
   // Flow Variables
@@ -214,8 +214,8 @@ const typeIconNames = [
   "xml-datatype"
 ];
 
-const _hoisted_1$g = ["title"];
-const _sfc_main$k = /* @__PURE__ */ defineComponent({
+const _hoisted_1$h = ["title"];
+const _sfc_main$l = /* @__PURE__ */ defineComponent({
   __name: "KdsDataType",
   props: {
     iconName: { default: "unknown-datatype" },
@@ -255,18 +255,18 @@ const _sfc_main$k = /* @__PURE__ */ defineComponent({
           "aria-hidden": "true",
           focusable: "false"
         }, null, 8, ["class"]))
-      ], 10, _hoisted_1$g);
+      ], 10, _hoisted_1$h);
     };
   }
 });
 
-const KdsDataType = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__scopeId", "data-v-f7d93fdf"]]);
+const KdsDataType = /* @__PURE__ */ _export_sfc(_sfc_main$l, [["__scopeId", "data-v-f7d93fdf"]]);
 
-const _hoisted_1$f = {
+const _hoisted_1$g = {
   key: 0,
   class: "label"
 };
-const _sfc_main$j = /* @__PURE__ */ defineComponent({
+const _sfc_main$k = /* @__PURE__ */ defineComponent({
   __name: "BaseButton",
   props: {
     size: { default: "medium" },
@@ -325,7 +325,7 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
               size: iconSize.value
             }, null, 8, ["name", "size"])) : createCommentVNode("", true)
           ], true),
-          props.label ? (openBlock(), createElementBlock("span", _hoisted_1$f, toDisplayString(props.label), 1)) : createCommentVNode("", true),
+          props.label ? (openBlock(), createElementBlock("span", _hoisted_1$g, toDisplayString(props.label), 1)) : createCommentVNode("", true),
           props.trailingIcon && props.label ? (openBlock(), createBlock(KdsIcon, {
             key: 1,
             name: props.trailingIcon,
@@ -338,9 +338,9 @@ const _sfc_main$j = /* @__PURE__ */ defineComponent({
   }
 });
 
-const BaseButton = /* @__PURE__ */ _export_sfc(_sfc_main$j, [["__scopeId", "data-v-ab4824cd"]]);
+const BaseButton = /* @__PURE__ */ _export_sfc(_sfc_main$k, [["__scopeId", "data-v-ab4824cd"]]);
 
-const _sfc_main$i = /* @__PURE__ */ defineComponent({
+const _sfc_main$j = /* @__PURE__ */ defineComponent({
   __name: "KdsButton",
   props: {
     size: {},
@@ -365,6 +365,165 @@ const _sfc_main$i = /* @__PURE__ */ defineComponent({
   }
 });
 
+const getAppInstance = () => {
+  const currentInstance = getCurrentInstance();
+  return currentInstance?.appContext.app;
+};
+const resolveNuxtLinkComponent = () => {
+  const app = getAppInstance();
+  const nuxtLinkComponent = app?.component("NuxtLink");
+  if (nuxtLinkComponent) {
+    return nuxtLinkComponent;
+  }
+  const routerLinkComponent = app?.component("RouterLink");
+  if (routerLinkComponent) {
+    return routerLinkComponent;
+  }
+  const fallbackComponent = defineComponent({
+    props: {
+      to: {
+        type: String,
+        default: ""
+      }
+    },
+    render() {
+      return h("a", { href: this.to }, [useSlots().default?.()]);
+    }
+  });
+  return fallbackComponent;
+};
+
+const _sfc_main$i = /* @__PURE__ */ defineComponent({
+  __name: "KdsLinkButton",
+  props: {
+    size: {},
+    disabled: { type: Boolean },
+    title: {},
+    variant: { default: "filled" },
+    label: {},
+    leadingIcon: {},
+    trailingIcon: {},
+    ariaLabel: {},
+    destructive: { type: Boolean },
+    to: {},
+    download: { type: Boolean, default: void 0 },
+    target: { default: null },
+    rel: { default: null }
+  },
+  emits: ["click"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const component = computed(() => {
+      if (props.disabled) {
+        return "button";
+      }
+      return resolveNuxtLinkComponent();
+    });
+    const emit = __emit;
+    return (_ctx, _cache) => {
+      return openBlock(), createBlock(BaseButton, mergeProps(props, {
+        component: component.value,
+        onClick: _cache[0] || (_cache[0] = ($event) => emit("click", $event))
+      }), null, 16, ["component"]);
+    };
+  }
+});
+
+function isDefinedAndNotEmpty(obj, field) {
+  return isDefined(obj[field]) && obj[field] !== "";
+}
+
+const _hoisted_1$f = { class: "kds-empty-state" };
+const _hoisted_2$6 = { class: "kds-empty-state-headline" };
+const _hoisted_3$4 = {
+  key: 0,
+  class: "kds-empty-state-description"
+};
+const _hoisted_4$3 = {
+  key: 1,
+  class: "kds-empty-state-action"
+};
+const _sfc_main$h = /* @__PURE__ */ defineComponent({
+  __name: "KdsEmptyState",
+  props: {
+    headline: {},
+    description: {},
+    buttonLabel: {},
+    buttonLeadingIcon: {},
+    buttonTrailingIcon: {},
+    buttonAriaLabel: {},
+    buttonSize: {},
+    buttonDisabled: { type: Boolean },
+    buttonTitle: {},
+    buttonVariant: {},
+    buttonDestructive: { type: Boolean },
+    buttonTo: {},
+    buttonDownload: { type: Boolean },
+    buttonTarget: {},
+    buttonRel: {}
+  },
+  emits: ["buttonClick"],
+  setup(__props, { emit: __emit }) {
+    const props = __props;
+    const emit = __emit;
+    const hasButton = computed(() => {
+      return isDefinedAndNotEmpty(props, "buttonLabel") || isDefinedAndNotEmpty(props, "buttonLeadingIcon");
+    });
+    const buttonType = computed(() => {
+      if (isDefinedAndNotEmpty(props, "buttonTo")) {
+        return _sfc_main$i;
+      }
+      return _sfc_main$j;
+    });
+    const mapProps = (mappings) => {
+      return Object.fromEntries(
+        mappings.map(([targetKey, sourceKey]) => [targetKey, props[sourceKey]]).filter(([, value]) => value !== void 0)
+      );
+    };
+    const buttonProps = computed(() => {
+      if (!hasButton.value) {
+        return {};
+      }
+      const baseProps = mapProps([
+        ["label", "buttonLabel"],
+        ["leadingIcon", "buttonLeadingIcon"],
+        ["trailingIcon", "buttonTrailingIcon"],
+        ["ariaLabel", "buttonAriaLabel"],
+        ["disabled", "buttonDisabled"],
+        ["variant", "buttonVariant"],
+        ["size", "buttonSize"],
+        ["destructive", "buttonDestructive"],
+        ["title", "buttonTitle"]
+      ]);
+      if (buttonType.value !== _sfc_main$i) {
+        return baseProps;
+      }
+      return {
+        ...baseProps,
+        ...mapProps([
+          ["to", "buttonTo"],
+          ["target", "buttonTarget"],
+          ["rel", "buttonRel"],
+          ["download", "buttonDownload"]
+        ])
+      };
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", _hoisted_1$f, [
+        createElementVNode("p", _hoisted_2$6, toDisplayString(props.headline), 1),
+        props.description ? (openBlock(), createElementBlock("p", _hoisted_3$4, toDisplayString(props.description), 1)) : createCommentVNode("", true),
+        hasButton.value ? (openBlock(), createElementBlock("div", _hoisted_4$3, [
+          (openBlock(), createBlock(resolveDynamicComponent(buttonType.value), mergeProps(buttonProps.value, {
+            onClick: _cache[0] || (_cache[0] = ($event) => emit("buttonClick", $event))
+          }), null, 16))
+        ])) : createCommentVNode("", true)
+      ]);
+    };
+  }
+});
+
+const KdsEmptyState = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-34b52d0e"]]);
+
 const modalLayoutPropsDefault = {
   title: "",
   variant: "padded",
@@ -386,7 +545,7 @@ const _hoisted_4$2 = {
   key: 0,
   class: "modal-footer"
 };
-const _sfc_main$h = /* @__PURE__ */ defineComponent({
+const _sfc_main$g = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "KdsModalLayout",
   props: /* @__PURE__ */ mergeDefaults({
@@ -410,7 +569,7 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
             size: "medium"
           }, null, 8, ["name"])) : createCommentVNode("", true),
           createElementVNode("div", _hoisted_2$5, toDisplayString(props.title), 1),
-          createVNode(_sfc_main$i, {
+          createVNode(_sfc_main$j, {
             "leading-icon": "x-close",
             variant: "transparent",
             size: "medium",
@@ -432,10 +591,10 @@ const _sfc_main$h = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsModalLayout = /* @__PURE__ */ _export_sfc(_sfc_main$h, [["__scopeId", "data-v-583e34fe"]]);
+const KdsModalLayout = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-583e34fe"]]);
 
 const _hoisted_1$d = ["closedby"];
-const _sfc_main$g = /* @__PURE__ */ defineComponent({
+const _sfc_main$f = /* @__PURE__ */ defineComponent({
   __name: "KdsModal",
   props: /* @__PURE__ */ mergeDefaults({
     icon: {},
@@ -532,11 +691,11 @@ const _sfc_main$g = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsModal = /* @__PURE__ */ _export_sfc(_sfc_main$g, [["__scopeId", "data-v-6fc6d7dd"]]);
+const KdsModal = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-6fc6d7dd"]]);
 
 const _hoisted_1$c = ["id"];
 const _hoisted_2$4 = { class: "subtext-text" };
-const _sfc_main$f = /* @__PURE__ */ defineComponent({
+const _sfc_main$e = /* @__PURE__ */ defineComponent({
   __name: "KdsSubText",
   props: {
     id: {},
@@ -567,7 +726,7 @@ const _sfc_main$f = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsSubText = /* @__PURE__ */ _export_sfc(_sfc_main$f, [["__scopeId", "data-v-78af6eac"]]);
+const KdsSubText = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-78af6eac"]]);
 
 const _hoisted_1$b = ["disabled", "title", "aria-label", "aria-checked", "aria-describedby", "aria-invalid"];
 const _hoisted_2$3 = { class: "control" };
@@ -577,8 +736,11 @@ const _hoisted_3$2 = {
 };
 const _hoisted_4$1 = { class: "label" };
 const _hoisted_5$1 = ["id"];
-const _hoisted_6$1 = { class: "subtext-wrapper" };
-const _sfc_main$e = /* @__PURE__ */ defineComponent({
+const _hoisted_6$1 = {
+  key: 0,
+  class: "subtext-wrapper"
+};
+const _sfc_main$d = /* @__PURE__ */ defineComponent({
   __name: "BaseCheckbox",
   props: /* @__PURE__ */ mergeModels({
     disabled: { type: Boolean, default: false },
@@ -668,22 +830,22 @@ const _sfc_main$e = /* @__PURE__ */ defineComponent({
             }, toDisplayString(props.helperText), 9, _hoisted_5$1)) : createCommentVNode("", true)
           ])) : createCommentVNode("", true)
         ], 10, _hoisted_1$b),
-        createElementVNode("div", _hoisted_6$1, [
+        props.subText || props.preserveSubTextSpace ? (openBlock(), createElementBlock("div", _hoisted_6$1, [
           createVNode(KdsSubText, {
             id: unref(descriptionId),
             "sub-text": props.subText,
             "preserve-sub-text-space": props.preserveSubTextSpace,
             error: props.error
           }, null, 8, ["id", "sub-text", "preserve-sub-text-space", "error"])
-        ])
+        ])) : createCommentVNode("", true)
       ]);
     };
   }
 });
 
-const BaseCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$e, [["__scopeId", "data-v-593a7b0c"]]);
+const BaseCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$d, [["__scopeId", "data-v-65cb29d7"]]);
 
-const _sfc_main$d = /* @__PURE__ */ defineComponent({
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "KdsCheckbox",
   props: /* @__PURE__ */ mergeModels({
     disabled: { type: Boolean, default: false },
@@ -815,7 +977,7 @@ const _hoisted_3$1 = {
   key: 0,
   class: "ask-again"
 };
-const _sfc_main$c = /* @__PURE__ */ defineComponent({
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "KdsDynamicModalProvider",
   setup(__props) {
     const askAgain = ref(false);
@@ -871,7 +1033,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
             unref(internal).isTemplateBasedConfirm(unref(config).value) ? (openBlock(), createBlock(resolveDynamicComponent(unref(config).value.component), { key: 0 })) : (openBlock(), createElementBlock("div", _hoisted_1$a, [
               createElementVNode("div", _hoisted_2$2, toDisplayString(unref(config).value.message), 1),
               unref(config).value.doNotAskAgain ? (openBlock(), createElementBlock("div", _hoisted_3$1, [
-                createVNode(_sfc_main$d, {
+                createVNode(_sfc_main$c, {
                   modelValue: askAgain.value,
                   "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => askAgain.value = $event),
                   label: unref(config).value.doNotAskAgain.label,
@@ -886,7 +1048,7 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
           name: "footer",
           fn: withCtx(() => [
             (openBlock(true), createElementBlock(Fragment, null, renderList(unref(config).value.buttons, (button, index) => {
-              return openBlock(), createBlock(_sfc_main$i, {
+              return openBlock(), createBlock(_sfc_main$j, {
                 key: index,
                 destructive: button.destructive,
                 autofocus: button.autofocus,
@@ -916,10 +1078,10 @@ const _sfc_main$c = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsDynamicModalProvider = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__scopeId", "data-v-c0769cfd"]]);
+const KdsDynamicModalProvider = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-c0769cfd"]]);
 
 const _hoisted_1$9 = ["data-style"];
-const _sfc_main$b = /* @__PURE__ */ defineComponent({
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "KdsLoadingSpinner",
   props: {
     size: { default: "medium" },
@@ -949,10 +1111,10 @@ const _sfc_main$b = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsLoadingSpinner = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-13c830ad"]]);
+const KdsLoadingSpinner = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-13c830ad"]]);
 
 const _hoisted_1$8 = ["disabled", "title", "aria-label", "aria-pressed"];
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "KdsVariableToggleButton",
   props: /* @__PURE__ */ mergeModels({
     disabled: { type: Boolean, default: false },
@@ -1036,11 +1198,11 @@ const _sfc_main$a = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsVariableToggleButton = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-8b6f8b81"]]);
+const KdsVariableToggleButton = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-8b6f8b81"]]);
 
 const _hoisted_1$7 = ["disabled", "aria-pressed"];
 const TITLE = "Click for more information";
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "KdsInfoToggleButton",
   props: /* @__PURE__ */ mergeModels({
     disabled: { type: Boolean, default: false },
@@ -1077,71 +1239,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsInfoToggleButton = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-24b40e36"]]);
-
-const getAppInstance = () => {
-  const currentInstance = getCurrentInstance();
-  return currentInstance?.appContext.app;
-};
-const resolveNuxtLinkComponent = () => {
-  const app = getAppInstance();
-  const nuxtLinkComponent = app?.component("NuxtLink");
-  if (nuxtLinkComponent) {
-    return nuxtLinkComponent;
-  }
-  const routerLinkComponent = app?.component("RouterLink");
-  if (routerLinkComponent) {
-    return routerLinkComponent;
-  }
-  const fallbackComponent = defineComponent({
-    props: {
-      to: {
-        type: String,
-        default: ""
-      }
-    },
-    render() {
-      return h("a", { href: this.to }, [useSlots().default?.()]);
-    }
-  });
-  return fallbackComponent;
-};
-
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
-  __name: "KdsLinkButton",
-  props: {
-    size: {},
-    disabled: { type: Boolean },
-    title: {},
-    variant: { default: "filled" },
-    label: {},
-    leadingIcon: {},
-    trailingIcon: {},
-    ariaLabel: {},
-    destructive: { type: Boolean },
-    to: {},
-    download: { type: Boolean, default: void 0 },
-    target: { default: null },
-    rel: { default: null }
-  },
-  emits: ["click"],
-  setup(__props, { emit: __emit }) {
-    const props = __props;
-    const component = computed(() => {
-      if (props.disabled) {
-        return "button";
-      }
-      return resolveNuxtLinkComponent();
-    });
-    const emit = __emit;
-    return (_ctx, _cache) => {
-      return openBlock(), createBlock(BaseButton, mergeProps(props, {
-        component: component.value,
-        onClick: _cache[0] || (_cache[0] = ($event) => emit("click", $event))
-      }), null, 16, ["component"]);
-    };
-  }
-});
+const KdsInfoToggleButton = /* @__PURE__ */ _export_sfc(_sfc_main$8, [["__scopeId", "data-v-24b40e36"]]);
 
 const _hoisted_1$6 = ["data-visible"];
 const _hoisted_2$1 = ["data-visible"];
@@ -1956,5 +2054,5 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 
 const KdsValueSwitch = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-e5da4485"]]);
 
-export { _sfc_main$i as KdsButton, _sfc_main$d as KdsCheckbox, KdsCheckboxGroup, KdsDataType, KdsDynamicModalProvider, KdsIcon, KdsInfoToggleButton, KdsLabel, _sfc_main$8 as KdsLinkButton, KdsLoadingSpinner, KdsModal, KdsModalLayout, KdsProgressButton, KdsRadioButtonGroup, KdsSubText, _sfc_main$6 as KdsToggleButton, KdsValueSwitch, KdsVariableToggleButton, useKdsDarkMode, useKdsDynamicModal, useKdsIsTruncated, useKdsLegacyMode };
+export { _sfc_main$j as KdsButton, _sfc_main$c as KdsCheckbox, KdsCheckboxGroup, KdsDataType, KdsDynamicModalProvider, KdsEmptyState, KdsIcon, KdsInfoToggleButton, KdsLabel, _sfc_main$i as KdsLinkButton, KdsLoadingSpinner, KdsModal, KdsModalLayout, KdsProgressButton, KdsRadioButtonGroup, KdsSubText, _sfc_main$6 as KdsToggleButton, KdsValueSwitch, KdsVariableToggleButton, useKdsDarkMode, useKdsDynamicModal, useKdsIsTruncated, useKdsLegacyMode };
 //# sourceMappingURL=index.js.map