@knime/kds-components 0.5.4 → 0.5.5

package/dist/index.js

@@ -35,7 +35,7 @@ const useIcon = ({
   return iconComponent;
 };
 
-const _sfc_main$a = /* @__PURE__ */ defineComponent({
+const _sfc_main$c = /* @__PURE__ */ defineComponent({
   __name: "KdsIcon",
   props: {
     name: {},
@@ -68,13 +68,13 @@ const _export_sfc = (sfc, props) => {
   return target;
 };
 
-const KdsIcon = /* @__PURE__ */ _export_sfc(_sfc_main$a, [["__scopeId", "data-v-d965b88c"]]);
+const KdsIcon = /* @__PURE__ */ _export_sfc(_sfc_main$c, [["__scopeId", "data-v-d965b88c"]]);
 
-const _hoisted_1$6 = {
+const _hoisted_1$8 = {
   key: 1,
   class: "label"
 };
-const _sfc_main$9 = /* @__PURE__ */ defineComponent({
+const _sfc_main$b = /* @__PURE__ */ defineComponent({
   __name: "BaseButton",
   props: {
     size: { default: "medium" },
@@ -127,7 +127,7 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
             name: props.leadingIcon,
             size: iconSize.value
           }, null, 8, ["name", "size"])) : createCommentVNode("", true),
-          props.label ? (openBlock(), createElementBlock("span", _hoisted_1$6, toDisplayString(props.label), 1)) : createCommentVNode("", true),
+          props.label ? (openBlock(), createElementBlock("span", _hoisted_1$8, toDisplayString(props.label), 1)) : createCommentVNode("", true),
           props.trailingIcon && props.label ? (openBlock(), createBlock(KdsIcon, {
             key: 2,
             name: props.trailingIcon,
@@ -140,9 +140,9 @@ const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const BaseButton = /* @__PURE__ */ _export_sfc(_sfc_main$9, [["__scopeId", "data-v-18cd4b75"]]);
+const BaseButton = /* @__PURE__ */ _export_sfc(_sfc_main$b, [["__scopeId", "data-v-dd209f83"]]);
 
-const _sfc_main$8 = /* @__PURE__ */ defineComponent({
+const _sfc_main$a = /* @__PURE__ */ defineComponent({
   __name: "KdsButton",
   props: {
     size: {},
@@ -195,7 +195,7 @@ const resolveNuxtLinkComponent = () => {
   return fallbackComponent;
 };
 
-const _sfc_main$7 = /* @__PURE__ */ defineComponent({
+const _sfc_main$9 = /* @__PURE__ */ defineComponent({
   __name: "KdsLinkButton",
   props: {
     size: {},
@@ -231,7 +231,7 @@ const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _sfc_main$6 = /* @__PURE__ */ defineComponent({
+const _sfc_main$8 = /* @__PURE__ */ defineComponent({
   __name: "KdsToggleButton",
   props: /* @__PURE__ */ mergeModels({
     size: {},
@@ -260,15 +260,15 @@ const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const _hoisted_1$5 = ["disabled", "aria-checked", "aria-describedby", "aria-invalid", "title"];
-const _hoisted_2$2 = { class: "control" };
-const _hoisted_3$2 = {
+const _hoisted_1$7 = ["disabled", "aria-checked", "aria-describedby", "aria-invalid", "title"];
+const _hoisted_2$4 = { class: "control" };
+const _hoisted_3$4 = {
   key: 0,
   class: "content"
 };
-const _hoisted_4$1 = { class: "label" };
-const _hoisted_5 = ["id"];
-const _sfc_main$5 = /* @__PURE__ */ defineComponent({
+const _hoisted_4$2 = { class: "label" };
+const _hoisted_5$1 = ["id"];
+const _sfc_main$7 = /* @__PURE__ */ defineComponent({
   __name: "KdsCheckbox",
   props: {
     modelValue: { type: [Boolean, String], default: false },
@@ -325,7 +325,7 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
         role: "checkbox",
         onClick: handleClick
       }, [
-        createElementVNode("div", _hoisted_2$2, [
+        createElementVNode("div", _hoisted_2$4, [
           icon.value ? (openBlock(), createBlock(KdsIcon, {
             key: 0,
             name: icon.value,
@@ -333,20 +333,20 @@ const _sfc_main$5 = /* @__PURE__ */ defineComponent({
             size: "xsmall"
           }, null, 8, ["name"])) : createCommentVNode("", true)
         ]),
-        props.label || props.helperText ? (openBlock(), createElementBlock("div", _hoisted_3$2, [
-          createElementVNode("div", _hoisted_4$1, toDisplayString(props.label), 1),
+        props.label || props.helperText ? (openBlock(), createElementBlock("div", _hoisted_3$4, [
+          createElementVNode("div", _hoisted_4$2, 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)
+          }, toDisplayString(props.helperText), 9, _hoisted_5$1)) : createCommentVNode("", true)
         ])) : createCommentVNode("", true)
-      ], 10, _hoisted_1$5);
+      ], 10, _hoisted_1$7);
     };
   }
 });
 
-const KdsCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-77251628"]]);
+const KdsCheckbox = /* @__PURE__ */ _export_sfc(_sfc_main$7, [["__scopeId", "data-v-a0ec0f68"]]);
 
 const ID_TO_ICON_MAP = {
   // Flow Variables
@@ -492,8 +492,8 @@ const typeIconNames = [
   "xml-datatype"
 ];
 
-const _hoisted_1$4 = ["title"];
-const _sfc_main$4 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$6 = ["title"];
+const _sfc_main$6 = /* @__PURE__ */ defineComponent({
   __name: "KdsDataType",
   props: {
     iconName: { default: "unknown-datatype" },
@@ -533,12 +533,12 @@ const _sfc_main$4 = /* @__PURE__ */ defineComponent({
           "aria-hidden": "true",
           focusable: "false"
         }, null, 8, ["class"]))
-      ], 10, _hoisted_1$4);
+      ], 10, _hoisted_1$6);
     };
   }
 });
 
-const KdsDataType = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-f7d93fdf"]]);
+const KdsDataType = /* @__PURE__ */ _export_sfc(_sfc_main$6, [["__scopeId", "data-v-f7d93fdf"]]);
 
 const modalLayoutPropsDefault = {
   title: "",
@@ -554,14 +554,14 @@ const modalPropsDefault = {
   ...modalLayoutPropsDefault
 };
 
-const _hoisted_1$3 = { class: "modal-header" };
-const _hoisted_2$1 = { class: "modal-header-title" };
-const _hoisted_3$1 = ["data-variant"];
-const _hoisted_4 = {
+const _hoisted_1$5 = { class: "modal-header" };
+const _hoisted_2$3 = { class: "modal-header-title" };
+const _hoisted_3$3 = ["data-variant"];
+const _hoisted_4$1 = {
   key: 0,
   class: "modal-footer"
 };
-const _sfc_main$3 = /* @__PURE__ */ defineComponent({
+const _sfc_main$5 = /* @__PURE__ */ defineComponent({
   ...{ inheritAttrs: false },
   __name: "KdsModalLayout",
   props: /* @__PURE__ */ mergeDefaults({
@@ -578,14 +578,14 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
     const props = __props;
     return (_ctx, _cache) => {
       return openBlock(), createElementBlock(Fragment, null, [
-        createElementVNode("header", _hoisted_1$3, [
+        createElementVNode("header", _hoisted_1$5, [
           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$8, {
+          createElementVNode("div", _hoisted_2$3, toDisplayString(props.title), 1),
+          createVNode(_sfc_main$a, {
             "leading-icon": "x-close",
             variant: "transparent",
             size: "medium",
@@ -598,8 +598,8 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
           "data-variant": __props.variant
         }, [
           renderSlot(_ctx.$slots, "body", {}, void 0, true)
-        ], 8, _hoisted_3$1),
-        _ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_4, [
+        ], 8, _hoisted_3$3),
+        _ctx.$slots.footer ? (openBlock(), createElementBlock("footer", _hoisted_4$1, [
           renderSlot(_ctx.$slots, "footer", {}, void 0, true)
         ])) : createCommentVNode("", true)
       ], 64);
@@ -607,10 +607,10 @@ const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsModalLayout = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-c600bf4b"]]);
+const KdsModalLayout = /* @__PURE__ */ _export_sfc(_sfc_main$5, [["__scopeId", "data-v-c600bf4b"]]);
 
-const _hoisted_1$2 = ["closedby"];
-const _sfc_main$2 = /* @__PURE__ */ defineComponent({
+const _hoisted_1$4 = ["closedby"];
+const _sfc_main$4 = /* @__PURE__ */ defineComponent({
   __name: "KdsModal",
   props: /* @__PURE__ */ mergeDefaults({
     icon: {},
@@ -702,12 +702,12 @@ const _sfc_main$2 = /* @__PURE__ */ defineComponent({
             _: 3
           }, 8, ["title", "icon", "variant", "overflow"])
         ], true)
-      ], 42, _hoisted_1$2)) : createCommentVNode("", true);
+      ], 42, _hoisted_1$4)) : createCommentVNode("", true);
     };
   }
 });
 
-const KdsModal = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-a80b4b47"]]);
+const KdsModal = /* @__PURE__ */ _export_sfc(_sfc_main$4, [["__scopeId", "data-v-a80b4b47"]]);
 
 const createUnwrappedPromise = () => {
   let resolve = () => {
@@ -800,16 +800,16 @@ const useKdsDynamicModal = () => {
   };
 };
 
-const _hoisted_1$1 = {
+const _hoisted_1$3 = {
   key: 1,
   class: "confirmation"
 };
-const _hoisted_2 = { class: "message" };
-const _hoisted_3 = {
+const _hoisted_2$2 = { class: "message" };
+const _hoisted_3$2 = {
   key: 0,
   class: "ask-again"
 };
-const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+const _sfc_main$3 = /* @__PURE__ */ defineComponent({
   __name: "KdsDynamicModalProvider",
   setup(__props) {
     const askAgain = ref(false);
@@ -862,9 +862,9 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         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$1, [
-              createElementVNode("div", _hoisted_2, toDisplayString(unref(config).value.message), 1),
-              unref(config).value.doNotAskAgain ? (openBlock(), createElementBlock("div", _hoisted_3, [
+            unref(internal).isTemplateBasedConfirm(unref(config).value) ? (openBlock(), createBlock(resolveDynamicComponent(unref(config).value.component), { key: 0 })) : (openBlock(), createElementBlock("div", _hoisted_1$3, [
+              createElementVNode("div", _hoisted_2$2, toDisplayString(unref(config).value.message), 1),
+              unref(config).value.doNotAskAgain ? (openBlock(), createElementBlock("div", _hoisted_3$2, [
                 createVNode(KdsCheckbox, {
                   modelValue: askAgain.value,
                   "onUpdate:modelValue": _cache[0] || (_cache[0] = ($event) => askAgain.value = $event),
@@ -881,7 +881,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
           name: "footer",
           fn: withCtx(() => [
             (openBlock(true), createElementBlock(Fragment, null, renderList(unref(config).value.buttons, (button, index) => {
-              return openBlock(), createBlock(_sfc_main$8, {
+              return openBlock(), createBlock(_sfc_main$a, {
                 key: index,
                 destructive: button.destructive,
                 autofocus: button.autofocus,
@@ -911,10 +911,10 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsDynamicModalProvider = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-bd3a851b"]]);
+const KdsDynamicModalProvider = /* @__PURE__ */ _export_sfc(_sfc_main$3, [["__scopeId", "data-v-bd3a851b"]]);
 
-const _hoisted_1 = ["data-style"];
-const _sfc_main = /* @__PURE__ */ defineComponent({
+const _hoisted_1$2 = ["data-style"];
+const _sfc_main$2 = /* @__PURE__ */ defineComponent({
   __name: "KdsLoadingSpinner",
   props: {
     size: { default: "medium" },
@@ -939,12 +939,12 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
           cy: "60",
           r: "50"
         }, null, -1)
-      ])], 10, _hoisted_1);
+      ])], 10, _hoisted_1$2);
     };
   }
 });
 
-const KdsLoadingSpinner = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-13c830ad"]]);
+const KdsLoadingSpinner = /* @__PURE__ */ _export_sfc(_sfc_main$2, [["__scopeId", "data-v-13c830ad"]]);
 
 const KDS_DARK_MODE_STORAGE_KEY = "KNIME_DARK_MODE";
 const defaultMode = "light";
@@ -1025,5 +1025,264 @@ const useKdsLegacyMode = (initialValue = false) => {
   };
 };
 
-export { _sfc_main$8 as KdsButton, KdsCheckbox, KdsDataType, KdsDynamicModalProvider, KdsIcon, _sfc_main$7 as KdsLinkButton, KdsLoadingSpinner, KdsModal, KdsModalLayout, _sfc_main$6 as KdsToggleButton, useKdsDarkMode, useKdsDynamicModal, useKdsLegacyMode };
+const _hoisted_1$1 = ["aria-checked", "aria-describedby", "aria-invalid", "disabled"];
+const _hoisted_2$1 = { class: "control" };
+const _hoisted_3$1 = {
+  key: 0,
+  class: "dot",
+  viewBox: "0 0 2 2",
+  "aria-hidden": "true",
+  focusable: "false"
+};
+const _hoisted_4 = { class: "content" };
+const _hoisted_5 = { class: "label" };
+const _hoisted_6 = ["id"];
+const _sfc_main$1 = /* @__PURE__ */ defineComponent({
+  __name: "KdsRadioButton",
+  props: /* @__PURE__ */ mergeModels({
+    text: {},
+    helperText: {},
+    disabled: { type: Boolean, default: false },
+    error: { type: Boolean, default: false }
+  }, {
+    "modelValue": { type: Boolean, ...{ default: false } },
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const props = __props;
+    const modelValue = useModel(__props, "modelValue");
+    const id = useId();
+    const handleClick = () => {
+      if (props.disabled) {
+        return;
+      }
+      if (!modelValue.value) {
+        modelValue.value = true;
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("button", {
+        "aria-checked": modelValue.value,
+        "aria-describedby": props.helperText ? `${unref(id)}-helper` : void 0,
+        "aria-invalid": props.error,
+        class: normalizeClass({
+          radio: true,
+          selected: modelValue.value,
+          disabled: props.disabled,
+          error: props.error
+        }),
+        disabled: props.disabled,
+        role: "radio",
+        type: "button",
+        onClick: handleClick
+      }, [
+        createElementVNode("div", _hoisted_2$1, [
+          modelValue.value ? (openBlock(), createElementBlock("svg", _hoisted_3$1, [..._cache[0] || (_cache[0] = [
+            createElementVNode("circle", {
+              cx: "1",
+              cy: "1",
+              r: "1"
+            }, null, -1)
+          ])])) : createCommentVNode("", true)
+        ]),
+        createElementVNode("div", _hoisted_4, [
+          createElementVNode("div", _hoisted_5, toDisplayString(props.text), 1),
+          props.helperText ? (openBlock(), createElementBlock("div", {
+            key: 0,
+            id: `${unref(id)}-helper`,
+            class: "helper-text"
+          }, toDisplayString(props.helperText), 9, _hoisted_6)) : createCommentVNode("", true)
+        ])
+      ], 10, _hoisted_1$1);
+    };
+  }
+});
+
+const KdsRadioButton = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-f6d4be71"]]);
+
+const _hoisted_1 = ["id", "aria-labelledby", "aria-describedby"];
+const _hoisted_2 = ["id"];
+const _hoisted_3 = ["id"];
+const _sfc_main = /* @__PURE__ */ defineComponent({
+  __name: "KdsRadioButtonGroup",
+  props: /* @__PURE__ */ mergeModels({
+    possibleValues: {},
+    alignment: { default: "vertical" },
+    disabled: { type: Boolean, default: false },
+    label: {},
+    id: {},
+    subText: {},
+    preserveSubTextSpace: { type: Boolean }
+  }, {
+    "modelValue": {},
+    "modelModifiers": {}
+  }),
+  emits: ["update:modelValue"],
+  setup(__props) {
+    const props = __props;
+    const modelValue = useModel(__props, "modelValue");
+    const possibleValues = computed(
+      () => props.possibleValues.map((o) => {
+        if (typeof o === "string") {
+          return { text: o, id: o };
+        }
+        return o;
+      })
+    );
+    const labelId = useId();
+    const descriptionId = useId();
+    const groupName = useId();
+    const optionContainerEls = ref([]);
+    const isOptionDisabled = (index) => props.disabled || possibleValues.value[index]?.disabled === true;
+    const selectedIndex = computed(
+      () => possibleValues.value.findIndex((option) => option.id === modelValue.value)
+    );
+    const firstEnabledIndex = computed(
+      () => possibleValues.value.findIndex((_, index) => !isOptionDisabled(index))
+    );
+    const isHorizontal = computed(() => props.alignment === "horizontal");
+    const anyOptionHasError = computed(
+      () => possibleValues.value.some((o) => o.error)
+    );
+    const tabIndexForOption = (index) => {
+      if (isOptionDisabled(index)) {
+        return void 0;
+      }
+      if (selectedIndex.value >= 0) {
+        return selectedIndex.value === index ? 0 : -1;
+      }
+      return firstEnabledIndex.value === index ? 0 : -1;
+    };
+    const focusOption = (index) => {
+      const button = optionContainerEls.value[index]?.querySelector(
+        'button[role="radio"]'
+      );
+      button?.focus();
+    };
+    const selectIndex = (index) => {
+      if (isOptionDisabled(index)) {
+        return;
+      }
+      modelValue.value = possibleValues.value[index].id;
+    };
+    const nextEnabledIndex = (startIndex, direction) => {
+      if (props.possibleValues.length === 0) {
+        return -1;
+      }
+      let index = startIndex;
+      for (let i = 0; i < props.possibleValues.length; i++) {
+        index = (index + direction + props.possibleValues.length) % props.possibleValues.length;
+        if (!isOptionDisabled(index)) {
+          return index;
+        }
+      }
+      return -1;
+    };
+    const moveSelection = (currentIndex, direction) => {
+      const nextIndex = nextEnabledIndex(currentIndex, direction);
+      if (nextIndex >= 0) {
+        selectIndex(nextIndex);
+        focusOption(nextIndex);
+      }
+    };
+    const goToFirstEnabled = () => {
+      if (firstEnabledIndex.value >= 0) {
+        selectIndex(firstEnabledIndex.value);
+        focusOption(firstEnabledIndex.value);
+      }
+    };
+    const goToLastEnabled = () => {
+      for (let i = props.possibleValues.length - 1; i >= 0; i--) {
+        if (!isOptionDisabled(i)) {
+          selectIndex(i);
+          focusOption(i);
+          break;
+        }
+      }
+    };
+    const handleKeyDown = (event, index) => {
+      if (props.disabled) {
+        return;
+      }
+      switch (event.key) {
+        case "ArrowDown":
+        case "ArrowRight": {
+          event.preventDefault();
+          moveSelection(index, 1);
+          return;
+        }
+        case "ArrowUp":
+        case "ArrowLeft": {
+          event.preventDefault();
+          moveSelection(index, -1);
+          return;
+        }
+        case "Home": {
+          event.preventDefault();
+          goToFirstEnabled();
+          return;
+        }
+        case "End": {
+          event.preventDefault();
+          goToLastEnabled();
+          return;
+        }
+        case " ":
+        case "Enter": {
+          event.preventDefault();
+          selectIndex(index);
+        }
+      }
+    };
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        id: props.id,
+        class: "radio-button-group",
+        role: "radiogroup",
+        "aria-labelledby": props.label ? unref(labelId) : void 0,
+        "aria-describedby": props.subText ? unref(descriptionId) : void 0
+      }, [
+        props.label ? (openBlock(), createElementBlock("div", {
+          key: 0,
+          id: unref(labelId),
+          class: "label"
+        }, toDisplayString(props.label), 9, _hoisted_2)) : createCommentVNode("", true),
+        createElementVNode("div", {
+          class: normalizeClass({ options: true, horizontal: isHorizontal.value })
+        }, [
+          (openBlock(true), createElementBlock(Fragment, null, renderList(possibleValues.value, (option, index) => {
+            return openBlock(), createElementBlock("div", {
+              key: option.id,
+              ref_for: true,
+              ref: (el) => optionContainerEls.value[index] = el,
+              class: "option"
+            }, [
+              createVNode(KdsRadioButton, {
+                disabled: props.disabled || option.disabled,
+                error: option.error,
+                "helper-text": option.helperText,
+                text: option.text,
+                "model-value": modelValue.value === option.id,
+                tabindex: tabIndexForOption(index),
+                name: unref(groupName),
+                onKeydown: (e) => handleKeyDown(e, index),
+                "onUpdate:modelValue": () => selectIndex(index)
+              }, null, 8, ["disabled", "error", "helper-text", "text", "model-value", "tabindex", "name", "onKeydown", "onUpdate:modelValue"])
+            ]);
+          }), 128))
+        ], 2),
+        props.subText || props.preserveSubTextSpace ? (openBlock(), createElementBlock("div", {
+          key: 1,
+          id: unref(descriptionId),
+          class: normalizeClass({ subtext: true, error: anyOptionHasError.value })
+        }, toDisplayString(props.subText), 11, _hoisted_3)) : createCommentVNode("", true)
+      ], 8, _hoisted_1);
+    };
+  }
+});
+
+const KdsRadioButtonGroup = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-fd7ae250"]]);
+
+export { _sfc_main$a as KdsButton, KdsCheckbox, KdsDataType, KdsDynamicModalProvider, KdsIcon, _sfc_main$9 as KdsLinkButton, KdsLoadingSpinner, KdsModal, KdsModalLayout, KdsRadioButtonGroup, _sfc_main$8 as KdsToggleButton, useKdsDarkMode, useKdsDynamicModal, useKdsLegacyMode };
 //# sourceMappingURL=index.js.map