@knime/kds-table 6.4.0 → 6.5.0

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @knime/kds-table
 
+## 6.5.0
+
+### Minor Changes
+
+- e89e10c: - `TableUI`:
+  - Show a "Preview" label in the action bar when `actionState.viewType` is `PREVIEW`, with an info button opening a popover that shows the new optional `actionState.previewDescription`.
+  - Render the action bar whenever `actionState.viewType` is `TEMP_VIEW` or `PREVIEW`, even when no action bar feature is enabled via `actionConfig`.
+
+### Patch Changes
+
+- @knime/kds-components@6.5.0
+- @knime/kds-styles@6.5.0
+
 ## 6.4.0
 
 ### Minor Changes

package/dist/index.css

@@ -186,7 +186,7 @@ tr {
 }
 
 .kds-table-action-bar {
-&[data-v-aba83d11] {
+&[data-v-c9fae4f1] {
   display: grid;
   grid-template-columns: 1fr 1fr 1fr;
   min-height: var(--kds-dimension-component-height-2-5x);
@@ -194,30 +194,41 @@ tr {
   padding-left: var(--kds-spacing-container-0-5x);
   border-bottom: var(--kds-border-base-subtle);
 }
-&.temporary-view[data-v-aba83d11] {
+&.temporary-view[data-v-c9fae4f1] {
     background-color: var(--kds-color-background-static-info-muted);
 }
-& .dimension[data-v-aba83d11] {
+& .dimension[data-v-c9fae4f1] {
     font: var(--kds-font-base-title-small);
     color: var(--kds-color-text-and-icon-muted);
     white-space: pre;
 }
-& .left[data-v-aba83d11],
-  & .center[data-v-aba83d11],
-  & .right[data-v-aba83d11] {
+& .preview {
+&[data-v-c9fae4f1] {
+    display: flex;
+    gap: var(--kds-spacing-container-0-12x);
+    align-items: center;
+}
+& .preview-label[data-v-c9fae4f1] {
+      font: var(--kds-font-base-title-small-strong);
+      color: var(--kds-color-text-and-icon-neutral);
+}
+}
+& .left[data-v-c9fae4f1],
+  & .center[data-v-c9fae4f1],
+  & .right[data-v-c9fae4f1] {
     display: flex;
     flex: 1;
     align-items: center;
     min-width: 0;
     padding: var(--kds-spacing-container-0-12x) 0;
 }
-& .left[data-v-aba83d11] {
+& .left[data-v-c9fae4f1] {
     gap: var(--kds-spacing-container-0-5x);
 }
-& .center[data-v-aba83d11] {
+& .center[data-v-c9fae4f1] {
     justify-content: center;
 }
-& .right[data-v-aba83d11] {
+& .right[data-v-c9fae4f1] {
     gap: var(--kds-spacing-container-0-25x);
     justify-content: flex-end;
 }
@@ -573,7 +584,7 @@ tr.row {
 }
 }
 
-.wrapper[data-v-e1645875] {
+.wrapper[data-v-1941898e] {
   display: flex;
   flex-direction: column;
   width: 100%;
@@ -583,7 +594,7 @@ tr.row {
 }
 }
 table {
-&[data-v-e1645875] {
+&[data-v-1941898e] {
   position: relative;
   display: flex;
   flex-grow: 1;
@@ -591,21 +602,21 @@ table {
   width: 100%;
   min-height: 0;
   }
-&[data-v-e1645875]:focus {
+&[data-v-1941898e]:focus {
     outline: none;
 }
-& .new-row-footer[data-v-e1645875] {
+& .new-row-footer[data-v-1941898e] {
     width: 100%;
 }
 }
 .empty-state-overlay {
-&[data-v-e1645875] {
+&[data-v-1941898e] {
   display: flex;
   align-items: center;
   justify-content: center;
   width: 100%;
   }
-& .empty-state[data-v-e1645875] {
+& .empty-state[data-v-1941898e] {
     width: 100%;
     max-width: 100%;
 }

package/dist/index.js

@@ -1,5 +1,5 @@
 import { Fragment, computed, createBlock, createCommentVNode, createElementBlock, createElementVNode, createSlots, createTextVNode, createVNode, defineComponent, getCurrentInstance, getCurrentScope, guardReactiveProps, inject, isRef, mergeProps, nextTick, normalizeClass, normalizeProps, normalizeStyle, onBeforeUnmount, onMounted, onScopeDispose, onUnmounted, openBlock, provide, reactive, ref, renderList, renderSlot, resolveComponent, shallowReadonly, shallowRef, toDisplayString, toRef, toValue, unref, useCssVars, useSlots, useTemplateRef, watch, watchEffect, withCtx, withDirectives, withKeys, withModifiers } from "vue";
-import { KdsButton, KdsCheckbox, KdsDropdown, KdsEmptyState, KdsIcon, KdsLoadingSkeleton, KdsMenuButton, KdsMissingValueIcon, KdsPopover, KdsSearchInput, KdsToggleButton, vKdsTooltip } from "@knime/kds-components";
+import { KdsButton, KdsCheckbox, KdsDropdown, KdsEmptyState, KdsIcon, KdsInfoToggleButton, KdsLoadingSkeleton, KdsMenuButton, KdsMissingValueIcon, KdsPopover, KdsSearchInput, KdsToggleButton, vKdsTooltip } from "@knime/kds-components";
 import './index.css';//#region \0rolldown/runtime.js
 var __create = Object.create;
 var __defProp = Object.defineProperty;
@@ -5078,7 +5078,7 @@ var _hoisted_4$2 = {
 	key: 0,
 	class: "muted"
 };
-var _hoisted_5 = { class: "subtle" };
+var _hoisted_5$1 = { class: "subtle" };
 //#endregion
 //#region src/components/control/PageControls.vue?vue&type=script&lang.ts
 /**
@@ -5113,7 +5113,7 @@ var PageControls_vue_vue_type_script_lang_default = {
 					return __props.showTableSize && __props.currentItems === 0 ? (openBlock(), createElementBlock("span", _hoisted_1$10, "No data")) : (openBlock(), createElementBlock("div", _hoisted_2$7, [
 						createElementVNode("span", _hoisted_3$3, toDisplayString(__props.rowLabel) + ":", 1),
 						hasMultiplePages.value && __props.currentItems ? (openBlock(), createElementBlock("span", _hoisted_4$2, toDisplayString(pageRangeStart.value) + "–" + toDisplayString(pageRangeEnd.value), 1)) : createCommentVNode("", true),
-						createElementVNode("span", _hoisted_5, toDisplayString(rowCountText.value), 1)
+						createElementVNode("span", _hoisted_5$1, toDisplayString(rowCountText.value), 1)
 					]));
 				};
 			}
@@ -5377,9 +5377,13 @@ var _hoisted_1$6 = { class: "left" };
 var _hoisted_2$4 = { class: "center" };
 var _hoisted_3$1 = {
 	key: 0,
+	class: "preview"
+};
+var _hoisted_4$1 = {
+	key: 1,
 	class: "dimension"
 };
-var _hoisted_4$1 = { class: "right" };
+var _hoisted_5 = { class: "right" };
 //#endregion
 //#region src/components/control/TableActionBar.vue
 var TableActionBar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/* @__PURE__ */ defineComponent({
@@ -5405,6 +5409,7 @@ var TableActionBar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 		const slots = useSlots();
 		const viewType = computed(() => __props.actionState?.viewType ?? "DEFAULT");
 		const isTemporaryView = computed(() => viewType.value === "TEMP_VIEW" || viewType.value === "PREVIEW");
+		const isPreview = computed(() => viewType.value === "PREVIEW");
 		const showResetButton = computed(() => viewType.value === "TEMP_VIEW");
 		const hasContent = computed(() => isTemporaryView.value || __props.showTableSize || __props.actionConfig.enableSearch || __props.actionConfig.enableSorting || __props.actionConfig.forceShow || Boolean(slots["action-bar-left"]));
 		/**
@@ -5435,8 +5440,11 @@ var TableActionBar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 					"sort-control-options": __props.sortControlOptions,
 					onColumnSort: _cache[0] || (_cache[0] = (columnId, colDir) => emit("onColumnSort", columnId, colDir))
 				}, null, 8, ["col-sort-values", "sort-control-options"])) : createCommentVNode("", true), renderSlot(_ctx.$slots, "action-bar-left", {}, void 0, true)]),
-				createElementVNode("div", _hoisted_2$4, [__props.showTableSize ? (openBlock(), createElementBlock("span", _hoisted_3$1, toDisplayString(dimensionText.value), 1)) : createCommentVNode("", true)]),
-				createElementVNode("div", _hoisted_4$1, [
+				createElementVNode("div", _hoisted_2$4, [isPreview.value ? (openBlock(), createElementBlock("div", _hoisted_3$1, [_cache[3] || (_cache[3] = createElementVNode("span", { class: "preview-label" }, "Preview", -1)), __props.actionState?.previewDescription ? (openBlock(), createBlock(unref(KdsInfoToggleButton), {
+					key: 0,
+					content: __props.actionState.previewDescription
+				}, null, 8, ["content"])) : createCommentVNode("", true)])) : createCommentVNode("", true), __props.showTableSize ? (openBlock(), createElementBlock("span", _hoisted_4$1, toDisplayString(dimensionText.value), 1)) : createCommentVNode("", true)]),
+				createElementVNode("div", _hoisted_5, [
 					__props.actionConfig.enableSearch ? (openBlock(), createBlock(unref(KdsSearchInput), {
 						key: 0,
 						ariaLabel: "Search table",
@@ -5464,7 +5472,7 @@ var TableActionBar_default = /*#__PURE__*/ _plugin_vue_export_helper_default(/*
 			], 2)) : createCommentVNode("", true);
 		};
 	}
-}), [["__scopeId", "data-v-aba83d11"]]);
+}), [["__scopeId", "data-v-c9fae4f1"]]);
 //#endregion
 //#region src/components/composables/useHeaderMenuItems.ts
 var useHeaderMenuItems = ({ enableSorting, sortDirection, sortTexts, additionalMenuItems, onColumnSort }) => {
@@ -7299,6 +7307,10 @@ var TableUI_vue_vue_type_script_lang_default = {
 		};
 	},
 	computed: {
+		showActionBar() {
+			const viewType = this.actionState?.viewType;
+			return Boolean(this.actionConfig) || viewType === "TEMP_VIEW" || viewType === "PREVIEW";
+		},
 		minRowHeight() {
 			return this.rowConfig.compactMode ? COMPACT_ROW_HEIGHT : DEFAULT_ROW_HEIGHT;
 		},
@@ -7830,13 +7842,13 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
 	const _component_TableCore = resolveComponent("TableCore");
 	const _component_KdsEmptyState = resolveComponent("KdsEmptyState");
 	const _component_PageControls = resolveComponent("PageControls");
-	return openBlock(), createElementBlock("div", _hoisted_1, [$props.actionConfig ? (openBlock(), createBlock(_component_TableActionBar, {
+	return openBlock(), createElementBlock("div", _hoisted_1, [$options.showActionBar ? (openBlock(), createBlock(_component_TableActionBar, {
 		key: 0,
 		"table-sizes": $props.tableState.tableSizes,
 		"action-state": $props.actionState,
 		"row-label": $props.tableConfig.rowLabel,
 		"show-table-size": $props.tableConfig.showTableSize,
-		"action-config": $props.actionConfig,
+		"action-config": $props.actionConfig ?? {},
 		"col-sort-values": $props.colSortValues,
 		"sort-control-options": $options.sortControlOptions,
 		onResetTemporaryView: _cache[0] || (_cache[0] = ($event) => _ctx.$emit("resetTemporaryView")),
@@ -8093,7 +8105,7 @@ function _sfc_render$1(_ctx, _cache, $props, $setup, $data, $options) {
 		])) : createCommentVNode("", true)
 	], 544)]);
 }
-var TableUI_default = /*#__PURE__*/ _plugin_vue_export_helper_default(TableUI_vue_vue_type_script_lang_default, [["render", _sfc_render$1], ["__scopeId", "data-v-e1645875"]]);
+var TableUI_default = /*#__PURE__*/ _plugin_vue_export_helper_default(TableUI_vue_vue_type_script_lang_default, [["render", _sfc_render$1], ["__scopeId", "data-v-1941898e"]]);
 //#endregion
 //#region src/components/composables/useTableReady.ts
 var useTableReady = ({ onReady }) => {