@knime/kds-table 0.5.0 → 0.5.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # @knime/kds-table
2
2
 
3
+ ## 0.5.2
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies [8f7a331]
8
+ - Updated dependencies [a05b472]
9
+ - @knime/kds-components@1.0.0
10
+ - @knime/kds-styles@1.0.0
11
+
12
+ ## 0.5.1
13
+
14
+ ### Patch Changes
15
+
16
+ - bb1f785: Revert removal of background token from header as the row content will be visible during scroll
17
+
3
18
  ## 0.5.0
4
19
 
5
20
  ### Minor Changes
package/dist/index.css CHANGED
@@ -1006,7 +1006,7 @@ html.kds-legacy {
1006
1006
  }
1007
1007
 
1008
1008
  .kds-list-item {
1009
- &[data-v-a3d6c86f] {
1009
+ &[data-v-a582a5cb] {
1010
1010
  position: relative;
1011
1011
  display: flex;
1012
1012
  flex-shrink: 0;
@@ -1023,36 +1023,36 @@ html.kds-legacy {
1023
1023
  border-radius: var(--kds-border-radius-container-0-31x);
1024
1024
  }
1025
1025
  &.small {
1026
- &[data-v-a3d6c86f] {
1026
+ &[data-v-a582a5cb] {
1027
1027
  gap: var(--kds-spacing-container-0-25x);
1028
- align-items: flex-start;
1029
1028
  padding: var(--kds-spacing-container-0-25x)
1030
1029
  var(--kds-spacing-container-0-5x);
1031
1030
  font: var(--kds-font-base-interactive-small);
1032
1031
  }
1033
- .accessory[data-v-a3d6c86f] {
1032
+ .accessory[data-v-a582a5cb] {
1034
1033
  display: flex;
1035
1034
  padding: var(--kds-spacing-container-0-12x) 0;
1035
+ margin-bottom: auto;
1036
1036
  }
1037
1037
  }
1038
1038
  &.large {
1039
- &[data-v-a3d6c86f] {
1039
+ &[data-v-a582a5cb] {
1040
1040
  font: var(--kds-font-base-interactive-small-strong);
1041
1041
  }
1042
- .accessory[data-v-a3d6c86f] {
1042
+ .accessory[data-v-a582a5cb] {
1043
1043
  display: flex;
1044
1044
  align-items: center;
1045
1045
  }
1046
1046
  }
1047
1047
  .content {
1048
- &[data-v-a3d6c86f] {
1048
+ &[data-v-a582a5cb] {
1049
1049
  display: flex;
1050
1050
  flex: 1 1 auto;
1051
1051
  flex-direction: column;
1052
1052
  gap: var(--kds-spacing-container-0-12x);
1053
1053
  min-width: 0;
1054
1054
  }
1055
- .large &[data-v-a3d6c86f] {
1055
+ .large &[data-v-a582a5cb] {
1056
1056
  justify-content: center;
1057
1057
  min-height: calc(
1058
1058
  var(--kds-dimension-component-height-2-5x) - 2 *
@@ -1060,19 +1060,19 @@ html.kds-legacy {
1060
1060
  );
1061
1061
  }
1062
1062
  .label {
1063
- &[data-v-a3d6c86f] {
1063
+ &[data-v-a582a5cb] {
1064
1064
  overflow: hidden;
1065
1065
  text-overflow: ellipsis;
1066
1066
  white-space: nowrap;
1067
1067
  }
1068
- .prefix[data-v-a3d6c86f] {
1068
+ .prefix[data-v-a582a5cb] {
1069
1069
  flex-shrink: 0;
1070
1070
  }
1071
- .special[data-v-a3d6c86f] {
1071
+ .special[data-v-a582a5cb] {
1072
1072
  font: var(--kds-font-base-interactive-small-italic);
1073
1073
  }
1074
1074
  }
1075
- .subtext[data-v-a3d6c86f] {
1075
+ .subtext[data-v-a582a5cb] {
1076
1076
  display: -webkit-box;
1077
1077
  overflow: hidden;
1078
1078
  -webkit-line-clamp: 2;
@@ -1083,7 +1083,7 @@ html.kds-legacy {
1083
1083
  }
1084
1084
  }
1085
1085
  .trailing-item {
1086
- &[data-v-a3d6c86f] {
1086
+ &[data-v-a582a5cb] {
1087
1087
  display: flex;
1088
1088
  flex-shrink: 0;
1089
1089
  gap: var(--kds-spacing-container-0-12x);
@@ -1091,69 +1091,69 @@ html.kds-legacy {
1091
1091
  align-self: center;
1092
1092
  justify-content: flex-end;
1093
1093
  }
1094
- .shortcut[data-v-a3d6c86f] {
1094
+ .shortcut[data-v-a582a5cb] {
1095
1095
  flex-shrink: 0;
1096
1096
  font: var(--kds-font-base-interactive-xsmall-strong);
1097
1097
  color: var(--kds-color-text-and-icon-muted);
1098
1098
  text-align: right;
1099
1099
  white-space: nowrap;
1100
1100
  }
1101
- .trailing-item-reserve-space[data-v-a3d6c86f] {
1101
+ .trailing-item-reserve-space[data-v-a582a5cb] {
1102
1102
  width: var(--kds-dimension-icon-0-75x);
1103
1103
  }
1104
1104
  }
1105
- &[data-v-a3d6c86f]:hover:not(.disabled),
1106
- &.active[data-v-a3d6c86f]:not(.disabled) {
1105
+ &[data-v-a582a5cb]:hover:not(.disabled),
1106
+ &.active[data-v-a582a5cb]:not(.disabled) {
1107
1107
  background: var(--kds-color-background-neutral-hover);
1108
1108
  }
1109
- &[data-v-a3d6c86f]:active:not(.disabled) {
1109
+ &[data-v-a582a5cb]:active:not(.disabled) {
1110
1110
  background: var(--kds-color-background-neutral-active);
1111
1111
  }
1112
1112
  &.selected {
1113
- &[data-v-a3d6c86f] {
1113
+ &[data-v-a582a5cb] {
1114
1114
  color: var(--kds-color-text-and-icon-selected);
1115
1115
  background: var(--kds-color-background-selected-initial);
1116
1116
  }
1117
- .subtext[data-v-a3d6c86f] {
1117
+ .subtext[data-v-a582a5cb] {
1118
1118
  color: var(--kds-color-text-and-icon-selected);
1119
1119
  }
1120
- &[data-v-a3d6c86f]:hover,
1121
- &.active[data-v-a3d6c86f] {
1120
+ &[data-v-a582a5cb]:hover,
1121
+ &.active[data-v-a582a5cb] {
1122
1122
  background: var(--kds-color-background-selected-hover);
1123
1123
  }
1124
- &[data-v-a3d6c86f]:active {
1124
+ &[data-v-a582a5cb]:active {
1125
1125
  background: var(--kds-color-background-selected-active);
1126
1126
  }
1127
- &.disabled[data-v-a3d6c86f] {
1127
+ &.disabled[data-v-a582a5cb] {
1128
1128
  background: var(--kds-color-background-selected-initial);
1129
1129
  }
1130
1130
  }
1131
1131
  &.missing {
1132
- &[data-v-a3d6c86f] {
1132
+ &[data-v-a582a5cb] {
1133
1133
  color: var(--kds-color-text-and-icon-danger);
1134
1134
  background: var(--kds-color-background-danger-initial);
1135
1135
  }
1136
- .subtext[data-v-a3d6c86f] {
1136
+ .subtext[data-v-a582a5cb] {
1137
1137
  color: var(--kds-color-text-and-icon-danger);
1138
1138
  }
1139
- &[data-v-a3d6c86f]:hover,
1140
- &.active[data-v-a3d6c86f] {
1139
+ &[data-v-a582a5cb]:hover,
1140
+ &.active[data-v-a582a5cb] {
1141
1141
  background: var(--kds-color-background-danger-hover);
1142
1142
  }
1143
- &[data-v-a3d6c86f]:active {
1143
+ &[data-v-a582a5cb]:active {
1144
1144
  background: var(--kds-color-background-danger-active);
1145
1145
  }
1146
- &.disabled[data-v-a3d6c86f] {
1146
+ &.disabled[data-v-a582a5cb] {
1147
1147
  background: var(--kds-color-background-danger-initial);
1148
1148
  }
1149
1149
  }
1150
1150
  &.disabled {
1151
- &[data-v-a3d6c86f] {
1151
+ &[data-v-a582a5cb] {
1152
1152
  color: var(--kds-color-text-and-icon-disabled);
1153
1153
  cursor: default;
1154
1154
  }
1155
- .shortcut[data-v-a3d6c86f],
1156
- .subtext[data-v-a3d6c86f] {
1155
+ .shortcut[data-v-a582a5cb],
1156
+ .subtext[data-v-a582a5cb] {
1157
1157
  color: var(--kds-color-text-and-icon-disabled);
1158
1158
  }
1159
1159
  }
@@ -4548,7 +4548,7 @@ body:has(dialog.modal[open]) {
4548
4548
  var(--kds-spacing-container-0-25x) 0;
4549
4549
  }
4550
4550
 
4551
- .kds-button-group-measure[data-v-a945c295] {
4551
+ .kds-button-group-measure[data-v-ccdbc564] {
4552
4552
  position: absolute;
4553
4553
  display: flex;
4554
4554
  visibility: hidden;
@@ -4556,20 +4556,20 @@ body:has(dialog.modal[open]) {
4556
4556
  white-space: nowrap;
4557
4557
  }
4558
4558
  .kds-button-group {
4559
- &[data-v-a945c295] {
4559
+ &[data-v-ccdbc564] {
4560
4560
  display: flex;
4561
4561
  gap: var(--kds-spacing-container-0-5x);
4562
4562
  align-items: center;
4563
4563
  justify-content: flex-end;
4564
4564
  width: 100%;
4565
4565
  }
4566
- &.left[data-v-a945c295] {
4566
+ &.left[data-v-ccdbc564] {
4567
4567
  justify-content: flex-start;
4568
4568
  }
4569
- &.right[data-v-a945c295] {
4569
+ &.right[data-v-ccdbc564] {
4570
4570
  justify-content: flex-end;
4571
4571
  }
4572
- &.middle[data-v-a945c295] {
4572
+ &.middle[data-v-ccdbc564] {
4573
4573
  justify-content: center;
4574
4574
  }
4575
4575
  }
@@ -5083,12 +5083,14 @@ tr {
5083
5083
  }
5084
5084
 
5085
5085
  thead {
5086
- &[data-v-8ffda8bd] {
5086
+ &[data-v-faef4e27] {
5087
+ /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
5088
+ background-color: var(--knime-white);
5087
5089
  border-top: var(--kds-border-base-subtle);
5088
5090
  border-bottom: var(--kds-border-base-subtle);
5089
5091
  }
5090
5092
  & tr {
5091
- &[data-v-8ffda8bd] {
5093
+ &[data-v-faef4e27] {
5092
5094
  display: flex;
5093
5095
  height: 100%;
5094
5096
  transition:
@@ -5096,51 +5098,51 @@ thead {
5096
5098
  box-shadow 0.15s;
5097
5099
  }
5098
5100
  & th {
5099
- &[data-v-8ffda8bd] {
5101
+ &[data-v-faef4e27] {
5100
5102
  min-height: var(--kds-dimension-component-height-2-5x);
5101
5103
  max-height: var(--kds-dimension-component-height-5x);
5102
5104
  text-align: left;
5103
5105
  white-space: nowrap;
5104
5106
  }
5105
- &.deletion-cell-spacer[data-v-8ffda8bd] {
5107
+ &.deletion-cell-spacer[data-v-faef4e27] {
5106
5108
  width: var(--kds-dimension-component-width-2x);
5107
5109
  }
5108
5110
  &.select-cell {
5109
- &[data-v-8ffda8bd] {
5111
+ &[data-v-faef4e27] {
5110
5112
  display: flex;
5111
5113
  justify-content: center;
5112
5114
  width: var(--kds-dimension-component-width-2x);
5113
5115
  padding: var(--kds-spacing-container-0-75x);
5114
5116
  }
5115
- & .select-checkbox[data-v-8ffda8bd] {
5117
+ & .select-checkbox[data-v-faef4e27] {
5116
5118
  /* With this added padding the checkbox appears centered initially */
5117
5119
  padding: var(--kds-spacing-container-0-10x);
5118
5120
  }
5119
5121
  }
5120
- &.new-column-head[data-v-8ffda8bd] {
5122
+ &.new-column-head[data-v-faef4e27] {
5121
5123
  display: flex;
5122
5124
  flex-direction: column;
5123
5125
  justify-content: center;
5124
5126
  padding: var(--kds-spacing-container-0-5x);
5125
5127
  }
5126
5128
  }
5127
- &[data-v-8ffda8bd]:hover {
5129
+ &[data-v-faef4e27]:hover {
5128
5130
  outline: none;
5129
5131
  }
5130
5132
  }
5131
- &.sub-menu-active tr[data-v-8ffda8bd] {
5133
+ &.sub-menu-active tr[data-v-faef4e27] {
5132
5134
  padding-right: var(--kds-dimension-component-width-2x);
5133
5135
  }
5134
5136
  }
5135
5137
  .header-selection-overlay {
5136
- &[data-v-8ffda8bd] {
5138
+ &[data-v-faef4e27] {
5137
5139
  position: absolute;
5138
5140
  top: 0;
5139
5141
  height: 100%;
5140
5142
  pointer-events: none;
5141
5143
  border: var(--kds-border-action-selected-accent);
5142
5144
  }
5143
- &.header-focused[data-v-8ffda8bd] {
5145
+ &.header-focused[data-v-faef4e27] {
5144
5146
  border: var(--kds-border-action-focused);
5145
5147
  }
5146
5148
  }
package/dist/index.js CHANGED
@@ -2196,7 +2196,7 @@ const _sfc_main$1p = /* @__PURE__ */ defineComponent({
2196
2196
  }
2197
2197
  });
2198
2198
 
2199
- const KdsListItem = /* @__PURE__ */ _export_sfc(_sfc_main$1p, [["__scopeId", "data-v-a3d6c86f"]]);
2199
+ const KdsListItem = /* @__PURE__ */ _export_sfc(_sfc_main$1p, [["__scopeId", "data-v-a582a5cb"]]);
2200
2200
 
2201
2201
  const _hoisted_1$V = { class: "kds-list-item-section-title" };
2202
2202
  const _hoisted_2$A = {
@@ -17881,7 +17881,7 @@ function _sfc_render$2(_ctx, _cache, $props, $setup, $data, $options) {
17881
17881
  }, null, 6)) : createCommentVNode("", true)
17882
17882
  ]);
17883
17883
  }
17884
- const Header = /* @__PURE__ */ _export_sfc$1(_sfc_main$8, [["render", _sfc_render$2], ["__scopeId", "data-v-8ffda8bd"]]);
17884
+ const Header = /* @__PURE__ */ _export_sfc$1(_sfc_main$8, [["render", _sfc_render$2], ["__scopeId", "data-v-faef4e27"]]);
17885
17885
 
17886
17886
  const _hoisted_1$3 = { class: "sticky-container" };
17887
17887
  const buttonRef = "button";