@knime/kds-components 0.31.4 → 1.0.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @knime/kds-components
 
+## 1.0.0
+
+### Minor Changes
+
+- a05b472: `KdsResponsiveButtonGroup`: accept five new entry types in addition to `KdsButton` — `KdsLinkButton`, `KdsSplitButton`, `KdsMenuButton`, `KdsProgressButton`, `KdsToggleButton`. Split/menu buttons collapse into the overflow menu as submenus; toggle button's `modelValue` state maps to a checkmark trailing icon to represent toggled state.
+
+  **Breaking**: the group's `buttonClick(id)` event is removed. Each entry now carries a top-level `handler: (entry, event) => void` (required where the underlying button has a primary click affordance; forbidden on link and menu-button entries). Existing call sites should move their click handling from the group-level event listener into per-entry handlers.
+
+  Style: Improve responsive behavior;
+  - First collapse buttons to icon-only (only applies to buttons with icons)
+  - If there is still not enough space, hide buttons behind a menu
+  - Possible to configure certain buttons that don't collapse or hide
+
+### Patch Changes
+
+- 8f7a331: KdsListItem: Fix vertical text alignment
+  - @knime/kds-styles@1.0.0
+
 ## 0.31.4
 
 ### Patch Changes

package/dist/index.css

@@ -996,7 +996,7 @@ html.kds-legacy {
 }
 
 .kds-list-item {
-&[data-v-a3d6c86f] {
+&[data-v-a582a5cb] {
   position: relative;
   display: flex;
   flex-shrink: 0;
@@ -1013,36 +1013,36 @@ html.kds-legacy {
   border-radius: var(--kds-border-radius-container-0-31x);
 }
 &.small {
-&[data-v-a3d6c86f] {
+&[data-v-a582a5cb] {
     gap: var(--kds-spacing-container-0-25x);
-    align-items: flex-start;
     padding: var(--kds-spacing-container-0-25x)
       var(--kds-spacing-container-0-5x);
     font: var(--kds-font-base-interactive-small);
 }
-.accessory[data-v-a3d6c86f] {
+.accessory[data-v-a582a5cb] {
       display: flex;
       padding: var(--kds-spacing-container-0-12x) 0;
+      margin-bottom: auto;
 }
 }
 &.large {
-&[data-v-a3d6c86f] {
+&[data-v-a582a5cb] {
     font: var(--kds-font-base-interactive-small-strong);
 }
-.accessory[data-v-a3d6c86f] {
+.accessory[data-v-a582a5cb] {
       display: flex;
       align-items: center;
 }
 }
 .content {
-&[data-v-a3d6c86f] {
+&[data-v-a582a5cb] {
     display: flex;
     flex: 1 1 auto;
     flex-direction: column;
     gap: var(--kds-spacing-container-0-12x);
     min-width: 0;
 }
-.large &[data-v-a3d6c86f] {
+.large &[data-v-a582a5cb] {
       justify-content: center;
       min-height: calc(
         var(--kds-dimension-component-height-2-5x) - 2 *
@@ -1050,19 +1050,19 @@ html.kds-legacy {
       );
 }
 .label {
-&[data-v-a3d6c86f] {
+&[data-v-a582a5cb] {
       overflow: hidden;
       text-overflow: ellipsis;
       white-space: nowrap;
 }
-.prefix[data-v-a3d6c86f] {
+.prefix[data-v-a582a5cb] {
         flex-shrink: 0;
 }
-.special[data-v-a3d6c86f] {
+.special[data-v-a582a5cb] {
         font: var(--kds-font-base-interactive-small-italic);
 }
 }
-.subtext[data-v-a3d6c86f] {
+.subtext[data-v-a582a5cb] {
       display: -webkit-box;
       overflow: hidden;
       -webkit-line-clamp: 2;
@@ -1073,7 +1073,7 @@ html.kds-legacy {
 }
 }
 .trailing-item {
-&[data-v-a3d6c86f] {
+&[data-v-a582a5cb] {
     display: flex;
     flex-shrink: 0;
     gap: var(--kds-spacing-container-0-12x);
@@ -1081,69 +1081,69 @@ html.kds-legacy {
     align-self: center;
     justify-content: flex-end;
 }
-.shortcut[data-v-a3d6c86f] {
+.shortcut[data-v-a582a5cb] {
       flex-shrink: 0;
       font: var(--kds-font-base-interactive-xsmall-strong);
       color: var(--kds-color-text-and-icon-muted);
       text-align: right;
       white-space: nowrap;
 }
-.trailing-item-reserve-space[data-v-a3d6c86f] {
+.trailing-item-reserve-space[data-v-a582a5cb] {
       width: var(--kds-dimension-icon-0-75x);
 }
 }
-&[data-v-a3d6c86f]:hover:not(.disabled),
-  &.active[data-v-a3d6c86f]:not(.disabled) {
+&[data-v-a582a5cb]:hover:not(.disabled),
+  &.active[data-v-a582a5cb]:not(.disabled) {
     background: var(--kds-color-background-neutral-hover);
 }
-&[data-v-a3d6c86f]:active:not(.disabled) {
+&[data-v-a582a5cb]:active:not(.disabled) {
     background: var(--kds-color-background-neutral-active);
 }
 &.selected {
-&[data-v-a3d6c86f] {
+&[data-v-a582a5cb] {
     color: var(--kds-color-text-and-icon-selected);
     background: var(--kds-color-background-selected-initial);
 }
-.subtext[data-v-a3d6c86f] {
+.subtext[data-v-a582a5cb] {
       color: var(--kds-color-text-and-icon-selected);
 }
-&[data-v-a3d6c86f]:hover,
-    &.active[data-v-a3d6c86f] {
+&[data-v-a582a5cb]:hover,
+    &.active[data-v-a582a5cb] {
       background: var(--kds-color-background-selected-hover);
 }
-&[data-v-a3d6c86f]:active {
+&[data-v-a582a5cb]:active {
       background: var(--kds-color-background-selected-active);
 }
-&.disabled[data-v-a3d6c86f] {
+&.disabled[data-v-a582a5cb] {
       background: var(--kds-color-background-selected-initial);
 }
 }
 &.missing {
-&[data-v-a3d6c86f] {
+&[data-v-a582a5cb] {
     color: var(--kds-color-text-and-icon-danger);
     background: var(--kds-color-background-danger-initial);
 }
-.subtext[data-v-a3d6c86f] {
+.subtext[data-v-a582a5cb] {
       color: var(--kds-color-text-and-icon-danger);
 }
-&[data-v-a3d6c86f]:hover,
-    &.active[data-v-a3d6c86f] {
+&[data-v-a582a5cb]:hover,
+    &.active[data-v-a582a5cb] {
       background: var(--kds-color-background-danger-hover);
 }
-&[data-v-a3d6c86f]:active {
+&[data-v-a582a5cb]:active {
       background: var(--kds-color-background-danger-active);
 }
-&.disabled[data-v-a3d6c86f] {
+&.disabled[data-v-a582a5cb] {
       background: var(--kds-color-background-danger-initial);
 }
 }
 &.disabled {
-&[data-v-a3d6c86f] {
+&[data-v-a582a5cb] {
     color: var(--kds-color-text-and-icon-disabled);
     cursor: default;
 }
-.shortcut[data-v-a3d6c86f],
-    .subtext[data-v-a3d6c86f] {
+.shortcut[data-v-a582a5cb],
+    .subtext[data-v-a582a5cb] {
       color: var(--kds-color-text-and-icon-disabled);
 }
 }
@@ -4538,7 +4538,7 @@ body:has(dialog.modal[open]) {
     var(--kds-spacing-container-0-25x) 0;
 }
 
-.kds-button-group-measure[data-v-a945c295] {
+.kds-button-group-measure[data-v-ccdbc564] {
   position: absolute;
   display: flex;
   visibility: hidden;
@@ -4546,20 +4546,20 @@ body:has(dialog.modal[open]) {
   white-space: nowrap;
 }
 .kds-button-group {
-&[data-v-a945c295] {
+&[data-v-ccdbc564] {
   display: flex;
   gap: var(--kds-spacing-container-0-5x);
   align-items: center;
   justify-content: flex-end;
   width: 100%;
   }
-&.left[data-v-a945c295] {
+&.left[data-v-ccdbc564] {
     justify-content: flex-start;
 }
-&.right[data-v-a945c295] {
+&.right[data-v-ccdbc564] {
     justify-content: flex-end;
 }
-&.middle[data-v-a945c295] {
+&.middle[data-v-ccdbc564] {
     justify-content: center;
 }
 }

package/dist/index.js

@@ -2275,7 +2275,7 @@ const _sfc_main$1p = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsListItem = /* @__PURE__ */ _export_sfc(_sfc_main$1p, [["__scopeId", "data-v-a3d6c86f"]]);
+const KdsListItem = /* @__PURE__ */ _export_sfc(_sfc_main$1p, [["__scopeId", "data-v-a582a5cb"]]);
 
 const _hoisted_1$V = { class: "kds-list-item-section-title" };
 const _hoisted_2$A = {
@@ -26455,6 +26455,106 @@ const vKdsTooltip = {
   }
 };
 
+const typeToComponent = {
+  KdsButton: _sfc_main$1v,
+  KdsLinkButton: _sfc_main$1u,
+  KdsSplitButton,
+  KdsMenuButton: _sfc_main$1k,
+  KdsProgressButton,
+  KdsToggleButton: _sfc_main$1s
+};
+const fullBindings = (entry) => ({
+  ...entry.meta
+});
+const iconOnlyBindings = (entry, leadingIcon, ariaLabel) => {
+  const {
+    label: _label,
+    trailingIcon: _trailingIcon,
+    ariaLabel: _ariaLabel,
+    title,
+    leadingIcon: _leadingIcon,
+    ...rest
+  } = entry.meta;
+  return {
+    ...rest,
+    leadingIcon,
+    ariaLabel,
+    title: title ?? ariaLabel
+  };
+};
+const hasLeadingIcon = (entry) => "leadingIcon" in entry.meta && Boolean(entry.meta.leadingIcon);
+const isIconCapable = (entry) => entry.canBeIconOnly !== false && hasLeadingIcon(entry);
+const accessoryFor = (entry) => "leadingIcon" in entry.meta && entry.meta.leadingIcon ? { type: "icon", name: entry.meta.leadingIcon } : void 0;
+const toMenuItem = (entry) => {
+  switch (entry.type) {
+    case "KdsButton":
+      return {
+        id: entry.id,
+        text: entry.meta.label,
+        disabled: entry.meta.disabled,
+        accessory: accessoryFor(entry),
+        handler: (_item, ev) => entry.handler(entry, ev)
+      };
+    case "KdsProgressButton":
+      return {
+        id: entry.id,
+        text: entry.meta.label,
+        disabled: entry.meta.disabled,
+        accessory: accessoryFor(entry),
+        handler: (_item, ev) => entry.handler(entry, ev)
+      };
+    case "KdsToggleButton":
+      return {
+        id: entry.id,
+        text: entry.meta.label,
+        disabled: entry.meta.disabled,
+        accessory: accessoryFor(entry),
+        trailingIcon: entry.meta.modelValue ? "checkmark" : void 0,
+        handler: () => entry.handler(entry, !entry.meta.modelValue)
+      };
+    case "KdsLinkButton":
+      return {
+        id: entry.id,
+        text: entry.meta.label,
+        disabled: entry.meta.disabled,
+        accessory: accessoryFor(entry),
+        to: entry.meta.to,
+        target: entry.meta.target,
+        rel: entry.meta.rel,
+        download: entry.meta.download
+      };
+    case "KdsSplitButton":
+      return {
+        id: entry.id,
+        text: entry.meta.label,
+        disabled: entry.meta.disabled,
+        accessory: accessoryFor(entry),
+        children: [
+          {
+            id: `${entry.id}__primary`,
+            text: entry.meta.label,
+            accessory: accessoryFor(entry),
+            separator: true,
+            handler: (_item, ev) => entry.handler(entry, ev)
+          },
+          ...entry.meta.items
+        ]
+      };
+    case "KdsMenuButton":
+      return {
+        id: entry.id,
+        text: entry.meta.label,
+        disabled: entry.meta.disabled,
+        accessory: accessoryFor(entry),
+        children: entry.meta.items
+      };
+    default: {
+      const _exhaustive = entry;
+      return _exhaustive;
+    }
+  }
+};
+
 const _hoisted_1$1 = {
   ref: "measureContainer",
   class: "kds-button-group-measure",
@@ -26468,77 +26568,138 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
     buttons: {},
     alignment: { default: "left" }
   },
-  emits: ["buttonClick"],
-  setup(__props, { emit: __emit }) {
-    const emit = __emit;
+  setup(__props) {
     const measureContainerEl = useTemplateRef("measureContainer");
-    const measureButtonEls = useTemplateRef("measureButton");
+    const measureFullEls = useTemplateRef("measureFullEntry");
+    const measureIconEls = useTemplateRef("measureIconEntry");
     const measureMenuButtonEl = useTemplateRef("measureMenuButton");
     const buttonsContainerEl = useTemplateRef("buttonsContainer");
     const { width: containerWidth } = useElementSize(buttonsContainerEl);
     const gap = ref(0);
-    const buttonWidths = ref([]);
+    const fullWidths = ref([]);
+    const iconOnlyWidths = ref([]);
     const menuButtonWidth = ref(0);
-    const splitIndex = computed(() => {
-      const availableSpace = containerWidth.value;
-      const widths = buttonWidths.value;
-      const buttonsCount = __props.buttons.length;
-      if (!availableSpace || buttonsCount === 0) {
-        return 0;
-      }
-      let buttonsWidth = 0;
-      for (let i = 0; i < buttonsCount; i++) {
-        if (i > 0) {
-          buttonsWidth += gap.value;
+    const iconOnlyEligibleEntries = computed(() => {
+      const result = [];
+      __props.buttons.forEach((entry, index) => {
+        if (!isIconCapable(entry)) {
+          return;
         }
-        buttonsWidth += widths[i] ?? 0;
-      }
-      if (buttonsWidth <= availableSpace) {
-        return buttonsCount;
-      }
-      let usedWidth = menuButtonWidth.value;
-      let count = 0;
-      for (let i = 0; i < buttonsCount; i++) {
-        const buttonWidth = widths[i] ?? 0;
-        const gapBefore = count > 0 ? gap.value : 0;
-        const gapAfterForMenu = gap.value;
-        const totalWidth = usedWidth + gapBefore + buttonWidth + gapAfterForMenu;
-        if (totalWidth > availableSpace) {
-          break;
+        const meta = entry.meta;
+        if (!meta.leadingIcon) {
+          return;
         }
-        usedWidth += gapBefore + buttonWidth;
-        count++;
-      }
-      return count;
+        result.push({
+          entry,
+          index,
+          leadingIcon: meta.leadingIcon,
+          label: meta.label
+        });
+      });
+      return result;
     });
-    const visibleButtons = computed(() => {
-      return __props.buttons.slice(0, splitIndex.value);
+    const layout = computed(() => {
+      const available = containerWidth.value;
+      const n = __props.buttons.length;
+      if (n === 0) {
+        return { mode: "full", inMenu: /* @__PURE__ */ new Set() };
+      }
+      const gapTotal = (count) => gap.value * Math.max(0, count - 1);
+      const sumFull = fullWidths.value.reduce((acc, w) => acc + (w ?? 0), 0) + gapTotal(n);
+      if (!available || sumFull <= available) {
+        return { mode: "full", inMenu: /* @__PURE__ */ new Set() };
+      }
+      const effectiveWidths = __props.buttons.map(
+        (entry, i) => isIconCapable(entry) ? iconOnlyWidths.value[i] ?? fullWidths.value[i] ?? 0 : fullWidths.value[i] ?? 0
+      );
+      const sumCollapsed = effectiveWidths.reduce((acc, w) => acc + w, 0) + gapTotal(n);
+      if (sumCollapsed <= available) {
+        return { mode: "icon-only", inMenu: /* @__PURE__ */ new Set() };
+      }
+      const inMenu = /* @__PURE__ */ new Set();
+      for (let i = n - 1; i >= 0; i--) {
+        if (__props.buttons[i].canMoveToMenu === false) {
+          continue;
+        }
+        inMenu.add(i);
+        let visibleSum = 0;
+        let visibleCount = 0;
+        for (let j = 0; j < n; j++) {
+          if (inMenu.has(j)) {
+            continue;
+          }
+          visibleSum += effectiveWidths[j];
+          visibleCount++;
+        }
+        const width = visibleSum + gapTotal(visibleCount) + menuButtonWidth.value + (visibleCount > 0 ? gap.value : 0);
+        if (width <= available) {
+          return { mode: "partial", inMenu };
+        }
+      }
+      return { mode: "overflow", inMenu };
     });
-    const overflowButtons = computed(() => {
-      return __props.buttons.slice(splitIndex.value);
+    const visibleEntries = computed(() => {
+      const collapseIcons = layout.value.mode !== "full";
+      const result = [];
+      __props.buttons.forEach((entry, index) => {
+        if (layout.value.inMenu.has(index)) {
+          return;
+        }
+        const meta = entry.meta;
+        const iconOnly = collapseIcons && isIconCapable(entry) && meta.leadingIcon ? { leadingIcon: meta.leadingIcon, ariaLabel: meta.label } : void 0;
+        result.push({ entry, iconOnly });
+      });
+      return result;
     });
     const overflowMenuItems = computed(() => {
-      return overflowButtons.value.map((a) => ({
-        id: a.id,
-        text: a.label,
-        disabled: a.disabled,
-        accessory: a.leadingIcon ? { type: "icon", name: a.leadingIcon } : void 0
-      }));
+      const indices = Array.from(layout.value.inMenu).sort((a, b) => a - b);
+      return indices.map((i) => toMenuItem(__props.buttons[i]));
     });
-    const onMenuItemClick = (id) => {
-      if (id) {
-        emit("buttonClick", id);
+    const refOffsetWidth = (instance) => {
+      if (!instance) {
+        return 0;
+      }
+      if (instance.menuButtonEl?.$el) {
+        return instance.menuButtonEl.$el.offsetWidth ?? 0;
       }
+      return instance.$el?.offsetWidth ?? 0;
     };
     const measureButtons = async () => {
       await nextTick();
       if (!measureContainerEl.value) {
         return;
       }
-      buttonWidths.value = Array.from(measureButtonEls.value ?? []).map(
-        (button) => button?.$el.offsetWidth
-      );
-      menuButtonWidth.value = measureMenuButtonEl.value?.menuButtonEl?.$el.offsetWidth ?? 0;
+      fullWidths.value = Array.from(measureFullEls.value ?? []).map(refOffsetWidth);
+      const iconWidthByIndex = new Array(__props.buttons.length);
+      const eligibleIndices = iconOnlyEligibleEntries.value.map((e) => e.index);
+      const iconRefs = Array.from(measureIconEls.value ?? []);
+      eligibleIndices.forEach((buttonIndex, measureIndex) => {
+        iconWidthByIndex[buttonIndex] = refOffsetWidth(iconRefs[measureIndex]);
+      });
+      iconOnlyWidths.value = iconWidthByIndex;
+      menuButtonWidth.value = refOffsetWidth(measureMenuButtonEl.value);
+    };
+    const visibleBindings = (visible) => {
+      const base = visible.iconOnly ? iconOnlyBindings(
+        visible.entry,
+        visible.iconOnly.leadingIcon,
+        visible.iconOnly.ariaLabel
+      ) : fullBindings(visible.entry);
+      const entry = visible.entry;
+      if (entry.type === "KdsToggleButton") {
+        return {
+          ...base,
+          "onUpdate:modelValue": (next) => entry.handler(entry, next)
+        };
+      }
+      if ("handler" in entry && typeof entry.handler === "function") {
+        const handler = entry.handler;
+        return {
+          ...base,
+          onClick: (ev) => handler(entry, ev)
+        };
+      }
+      return base;
     };
     watch(() => __props.buttons, measureButtons, { deep: true });
     onMounted(() => {
@@ -26551,14 +26712,22 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
       return openBlock(), createElementBlock(Fragment, null, [
         createElementVNode("div", _hoisted_1$1, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(__props.buttons, (button) => {
-            return openBlock(), createBlock(_sfc_main$1v, {
+            return openBlock(), createBlock(resolveDynamicComponent(unref(typeToComponent)[button.type]), mergeProps({
+              key: `full-${button.id}`,
               ref_for: true,
-              ref: "measureButton",
-              key: button.id,
-              label: button.label,
-              variant: button.variant ?? "outlined",
-              "leading-icon": button.leadingIcon
-            }, null, 8, ["label", "variant", "leading-icon"]);
+              ref: "measureFullEntry"
+            }, { ref_for: true }, unref(fullBindings)(button)), null, 16);
+          }), 128)),
+          (openBlock(true), createElementBlock(Fragment, null, renderList(iconOnlyEligibleEntries.value, (iconItem) => {
+            return openBlock(), createBlock(resolveDynamicComponent(unref(typeToComponent)[iconItem.entry.type]), mergeProps(
+              {
+                key: `icon-${iconItem.entry.id}`,
+                ref_for: true,
+                ref: "measureIconEntry"
+              },
+              { ref_for: true },
+              unref(iconOnlyBindings)(iconItem.entry, iconItem.leadingIcon, iconItem.label)
+            ), null, 16);
           }), 128)),
           createVNode(_sfc_main$1k, {
             ref: "measureMenuButton",
@@ -26570,24 +26739,16 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
         createElementVNode("div", mergeProps({ ref: "buttonsContainer" }, _ctx.$attrs, {
           class: ["kds-button-group", __props.alignment]
         }), [
-          (openBlock(true), createElementBlock(Fragment, null, renderList(visibleButtons.value, (button) => {
-            return openBlock(), createBlock(_sfc_main$1v, {
-              key: button.id,
-              label: button.label,
-              variant: button.variant ?? "outlined",
-              disabled: button.disabled,
-              "leading-icon": button.leadingIcon,
-              destructive: button.destructive,
-              title: button.title,
-              onClick: ($event) => emit("buttonClick", button.id)
-            }, null, 8, ["label", "variant", "disabled", "leading-icon", "destructive", "title", "onClick"]);
+          (openBlock(true), createElementBlock(Fragment, null, renderList(visibleEntries.value, (visible) => {
+            return openBlock(), createBlock(resolveDynamicComponent(unref(typeToComponent)[visible.entry.type]), mergeProps({
+              key: visible.entry.id
+            }, { ref_for: true }, visibleBindings(visible)), null, 16);
           }), 128)),
-          overflowButtons.value.length ? (openBlock(), createBlock(_sfc_main$1k, {
+          overflowMenuItems.value.length ? (openBlock(), createBlock(_sfc_main$1k, {
             key: 0,
             "leading-icon": "more-actions",
             ariaLabel: "More actions",
-            items: overflowMenuItems.value,
-            onItemClick: onMenuItemClick
+            items: overflowMenuItems.value
           }, null, 8, ["items"])) : createCommentVNode("", true)
         ], 16)
       ], 64);
@@ -26595,7 +26756,7 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsResponsiveButtonGroup = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-a945c295"]]);
+const KdsResponsiveButtonGroup = /* @__PURE__ */ _export_sfc(_sfc_main$1, [["__scopeId", "data-v-ccdbc564"]]);
 
 const kdsResponsiveButtonGroupAlignment = {
   LEFT: "left",