@knime/hub-features 1.14.11 → 1.14.12

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @knime/hub-features
 
+## 1.14.12
+
+### Patch Changes
+
+- Updated dependencies [5e6e229]
+  - @knime/components@1.38.3
+
 ## 1.14.11
 
 ### Patch Changes

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@knime/hub-features",
-  "version": "1.14.11",
+  "version": "1.14.12",
   "description": "Vue components & composables for shared hub features",
   "homepage": "https://knime.github.io/webapps-common/",
   "license": "GPL 3 and Additional Permissions according to Sec. 7 (SEE the file LICENSE)",
@@ -31,7 +31,7 @@
     "lodash-es": "4.17.21",
     "ofetch": "^1.4.1",
     "typescript": "^5.8.3",
-    "@knime/components": "1.38.2",
+    "@knime/components": "1.38.3",
     "@knime/styles": "1.13.0",
     "@knime/utils": "1.5.8"
   },

package/src/components/Popover.vue

@@ -121,15 +121,15 @@ defineExpose({
 
     &::after {
       position: absolute;
-      content: "";
       width: 0;
       height: 0;
+      content: "";
     }
 
     /* transparent background to maintain focus on the popover while transitioning into it with the mouse */
     &::before {
-      content: "";
       position: absolute;
+      content: "";
       background-color: rgb(0 0 0 / 0%);
     }
 
@@ -137,17 +137,17 @@ defineExpose({
       &::after {
         top: calc(100% + var(--popover-top-margin) - var(--popover-arrow-size));
         right: 20px;
-        border-left: var(--popover-arrow-size) solid transparent;
         border-right: var(--popover-arrow-size) solid transparent;
         border-bottom: var(--popover-arrow-size) solid var(--knime-white);
+        border-left: var(--popover-arrow-size) solid transparent;
 
         @media only screen and (width <= 900px) {
-          border-top: var(--popover-arrow-size) solid var(--knime-white);
-          border-bottom: 0;
+          top: auto;
           bottom: calc(
             100% + var(--popover-top-margin) - var(--popover-arrow-size)
           );
-          top: auto;
+          border-top: var(--popover-arrow-size) solid var(--knime-white);
+          border-bottom: 0;
         }
       }
 
@@ -173,22 +173,21 @@ defineExpose({
   }
 
   & .content {
-    width: var(--popover-width, 300px);
     position: absolute;
     top: calc(
       100% + var(--popover-top-margin) - 1px
     ); /* shift by one pixel to avoid zoom issues */
 
     right: 0;
+    width: var(--popover-width, 300px);
     padding: 20px;
     background: var(--knime-white);
 
     @media only screen and (width <= 900px) {
+      top: auto;
       bottom: calc(
         100% + var(--popover-top-margin) - 1px
       ); /* shift by one pixel to avoid zoom issues */
-
-      top: auto;
     }
   }
 
@@ -200,8 +199,8 @@ defineExpose({
     }
 
     &.disabled {
-      opacity: 0.5;
       pointer-events: none;
+      opacity: 0.5;
     }
   }
 

package/src/components/avatars/HubGroupAvatar.vue

@@ -56,11 +56,11 @@ const displayText = computed(() => {
 
 .container {
   position: relative;
-  background-color: var(--knime-white);
   display: flex;
   align-items: center;
   justify-content: center;
   height: 100%;
+  background-color: var(--knime-white);
 
   & > svg {
     @mixin svg-icon-size 24;

package/src/components/versions/components/CreateVersionForm.vue

@@ -101,32 +101,32 @@ const onCreate = async () => {
 
 <style lang="postcss" scoped>
 .create-version-form {
-  height: 100%;
-  max-height: 100%;
-  width: 100%;
   display: flex;
   flex-direction: column;
+  width: 100%;
+  height: 100%;
+  max-height: 100%;
 
   & .form-content {
+    z-index: 1;
     display: flex;
     flex-direction: column;
+    gap: 30px;
     height: 100%;
     padding: 30px 30px 0;
-    gap: 30px;
-    overscroll-behavior: none;
-    isolation: isolate;
     overflow: auto;
-    z-index: 1;
+    overscroll-behavior: none;
     background-color: var(--knime-gray-ultra-light);
+    isolation: isolate;
 
     & .description {
+      display: flex;
       width: 100%;
       max-width: unset;
-      display: flex;
 
       & :deep(textarea) {
-        width: 100%;
         box-sizing: content-box;
+        width: 100%;
         max-height: 200px;
         resize: none;
       }
@@ -134,12 +134,12 @@ const onCreate = async () => {
 
     & .error {
       position: absolute;
-      word-break: keep-all;
       margin-top: 6px;
-      font-weight: 300;
       font-size: 13px;
-      color: var(--theme-color-error);
+      font-weight: 300;
       line-height: 18px;
+      color: var(--theme-color-error);
+      word-break: keep-all;
     }
 
     & .controls {

package/src/components/versions/components/CurrentState.vue

@@ -103,24 +103,24 @@ const onMenuItemClick = (_: Event, item: (typeof menuItems.value)[number]) => {
   margin-left: 30px;
 
   &::before {
-    content: "";
     position: absolute;
-    left: -22px;
     top: 0;
+    left: -22px;
     width: 2px;
     height: calc(100% + 30px);
+    content: "";
     background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 5'%3E%3Ccircle cx='1' cy='1' r='.5' fill='%236E6E6E'/%3E%3C/svg%3E");
-    background-size: 5px;
     background-repeat: repeat-y;
+    background-size: 5px;
   }
 
   & .current-state {
-    background-color: var(--knime-gray-ultra-light);
     display: flex;
-    justify-content: space-between;
+    gap: 10px;
     align-items: center;
+    justify-content: space-between;
     padding: 10px;
-    gap: 10px;
+    background-color: var(--knime-gray-ultra-light);
     transition: background-color 0.25s ease;
 
     & .left {
@@ -128,24 +128,24 @@ const onMenuItemClick = (_: Event, item: (typeof menuItems.value)[number]) => {
         display: flex;
         flex-direction: column;
         gap: 3px;
-        overflow-wrap: anywhere;
         word-break: normal;
+        overflow-wrap: anywhere;
 
         & h6 {
           display: flex;
           align-items: center;
           margin: 0;
           font-size: 13px;
-          line-height: 18px;
           font-weight: 700;
+          line-height: 18px;
           transition: color 0.25s ease;
 
           & .draft-icon {
             @mixin svg-icon-size 20;
 
+            padding: 4px;
             margin-right: 4px;
             background: var(--knime-carrot-light);
-            padding: 4px;
             border-radius: 1000px;
           }
         }
@@ -153,15 +153,15 @@ const onMenuItemClick = (_: Event, item: (typeof menuItems.value)[number]) => {
         & .labels {
           display: flex;
           flex-flow: row wrap;
-          align-items: center;
           gap: 5px;
+          align-items: center;
         }
 
         & .date {
           margin: 0;
           font-size: 11px;
-          line-height: 16px;
           font-weight: 300;
+          line-height: 16px;
           transition: color 0.25s ease;
         }
       }
@@ -169,9 +169,9 @@ const onMenuItemClick = (_: Event, item: (typeof menuItems.value)[number]) => {
 
     & .right {
       display: flex;
-      justify-content: flex-end;
-      align-items: center;
       gap: 8px;
+      align-items: center;
+      justify-content: flex-end;
 
       & .create-button {
         white-space: nowrap;
@@ -179,34 +179,34 @@ const onMenuItemClick = (_: Event, item: (typeof menuItems.value)[number]) => {
 
       & .controls {
         display: flex;
-        justify-content: center;
         flex-direction: column;
-        border-left: 1px solid var(--knime-silver-sand);
+        justify-content: center;
         padding-left: 5px;
         margin-right: -4px;
+        border-left: 1px solid var(--knime-silver-sand);
       }
     }
 
     &::before {
-      content: "";
+      position: absolute;
+      top: 12px;
+      left: -6px;
       width: 12px;
       height: 12px;
+      content: "";
       background-color: var(--knime-gray-ultra-light);
       transform: rotateZ(45deg);
-      position: absolute;
-      left: -6px;
-      top: 12px;
       transition: background-color 0.25s ease;
     }
 
     &::after {
-      content: "";
       position: absolute;
-      left: -24px;
       top: 15px;
-      background-color: var(--knime-masala);
+      left: -24px;
       width: 6px;
       height: 6px;
+      content: "";
+      background-color: var(--knime-masala);
       border-radius: 100%;
       box-shadow: 0 0 0 0 transparent;
       transition:
@@ -215,8 +215,8 @@ const onMenuItemClick = (_: Event, item: (typeof menuItems.value)[number]) => {
     }
 
     &:hover {
-      box-shadow: 0 2px 10px 0 var(--knime-gray-dark-semi);
       cursor: pointer;
+      box-shadow: 0 2px 10px 0 var(--knime-gray-dark-semi);
     }
 
     &.selected {

package/src/components/versions/components/LabelList.vue

@@ -186,8 +186,8 @@ onMounted(() => {
     position: relative;
     display: flex;
     flex-flow: row wrap;
-    align-items: center;
     gap: var(--space-4);
+    align-items: center;
     padding: var(--space-6) 0;
 
     & .function-button {
@@ -222,11 +222,11 @@ onMounted(() => {
 }
 
 & .headline {
-  font-size: 16px;
-  font-weight: 700;
+  padding-right: 18px;
   margin: 0;
   margin: 0 0 var(--space-8);
-  padding-right: 18px;
+  font-size: 16px;
+  font-weight: 700;
 }
 
 & .panel {
@@ -236,8 +236,8 @@ onMounted(() => {
 
   & .message,
   & .description {
-    font-weight: 300;
     font-size: 13px;
+    font-weight: 300;
 
     &:empty {
       display: none;

package/src/components/versions/components/ManageVersions.vue

@@ -121,13 +121,13 @@ const closeLabelPopovers = throttle(() => {
 
 .manage-versions-container {
   position: relative;
-  background-color: var(--knime-gray-light-semi);
-  height: 100%;
   display: flex;
   flex-direction: column;
-  justify-content: flex-start;
   align-items: flex-start;
+  justify-content: flex-start;
+  height: 100%;
   overscroll-behavior: none;
+  background-color: var(--knime-gray-light-semi);
   isolation: isolate;
 
   & .close {
@@ -144,9 +144,9 @@ const closeLabelPopovers = throttle(() => {
     height: 100%;
 
     & .header {
-      background-color: var(--knime-white);
       z-index: 2;
       padding: 32px 30px 30px;
+      background-color: var(--knime-white);
 
       & h4 {
         display: inline;
@@ -158,11 +158,11 @@ const closeLabelPopovers = throttle(() => {
       & .history-icon {
         @mixin svg-icon-size 24;
 
+        position: relative;
+        top: 1px;
         margin-right: 9px;
         vertical-align: sub;
         stroke: var(--knime-masala);
-        position: relative;
-        top: 1px;
       }
     }
 
@@ -180,9 +180,9 @@ const closeLabelPopovers = throttle(() => {
     }
 
     & .changes {
-      background-color: var(--knime-white);
       width: 100%;
       padding-top: 30px;
+      background-color: var(--knime-white);
     }
   }
 }

package/src/components/versions/components/NoVersionItem.vue

@@ -4,19 +4,19 @@
 
 <style lang="postcss" scoped>
 .no-versions-item {
-  font-weight: 300;
+  padding-top: 4px;
   font-size: 12px;
+  font-weight: 300;
   line-height: 15px;
-  padding-top: 4px;
 
   &::after {
-    content: "";
     position: absolute;
-    left: -4px;
     top: 11px;
-    background-color: var(--knime-masala);
+    left: -4px;
     width: 6px;
     height: 6px;
+    content: "";
+    background-color: var(--knime-masala);
     border-radius: 100%;
   }
 }

package/src/components/versions/components/VersionHistory.vue

@@ -59,18 +59,18 @@ defineEmits<{
   height: 100%;
 
   & .header {
-    height: 24px;
-    width: 440px;
-    margin-bottom: 10px;
     display: flex;
     align-items: center;
+    width: 440px;
+    height: 24px;
+    margin-bottom: 10px;
 
     & .title {
       display: inline;
       margin: 0;
       font-size: 16px;
-      line-height: 19px;
       font-weight: 700;
+      line-height: 19px;
     }
 
     @media only screen and (width <= 900px) {
@@ -80,6 +80,9 @@ defineEmits<{
 
   & .versions {
     position: relative;
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
 
     /*
       Explicit min-height to ensure submenu is never cut off.
@@ -88,22 +91,19 @@ defineEmits<{
     min-height: 50px;
     padding: 0 0 10px 20px;
     margin-left: 10px;
-    -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
     scrollbar-width: none; /* Hide scrollbar for Firefox */
-    display: flex;
-    flex-direction: column;
-    gap: 10px;
+    -ms-overflow-style: none; /* Hide scrollbar for IE and Edge */
 
     &::before {
-      content: "";
       position: absolute;
-      left: -2px;
       top: -30px;
+      left: -2px;
       width: 2px;
       height: calc(100% + 35px);
+      content: "";
       background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 5'%3E%3Ccircle cx='1' cy='1' r='.5' fill='%236E6E6E'/%3E%3C/svg%3E");
-      background-size: 5px;
       background-repeat: repeat-y;
+      background-size: 5px;
     }
 
     &.no-changes::before {
@@ -113,8 +113,8 @@ defineEmits<{
   }
 
   & .empty-versions {
-    font-size: 11px;
     padding: 7px;
+    font-size: 11px;
   }
 
   /* Hide scrollbar for now */

package/src/components/versions/components/VersionItem.vue

@@ -140,12 +140,12 @@ const onLabelLeave = () => {
 <style lang="postcss" scoped>
 .version-item-container {
   position: relative;
-  background-color: var(--knime-white);
   display: flex;
+  gap: 15px;
   align-items: center;
   align-items: stretch;
   padding: 10px;
-  gap: 15px;
+  background-color: var(--knime-white);
   transition: background-color 0.25s ease;
 
   & .tooltip {
@@ -155,9 +155,9 @@ const onLabelLeave = () => {
   }
 
   & p {
+    margin: 10px 0;
     font-size: 11px;
     line-height: 1.5;
-    margin: 10px 0;
   }
 
   & button {
@@ -171,64 +171,64 @@ const onLabelLeave = () => {
     display: flex;
     flex-direction: column;
     gap: 3px;
-    overflow-wrap: break-word;
     word-break: normal;
+    overflow-wrap: break-word;
 
     & h6 {
       display: block;
       margin: 0;
       font-size: 13px;
-      line-height: 18px;
       font-weight: 700;
+      line-height: 18px;
       transition: color 0.25s ease;
     }
 
     & .footer-info {
       margin: 0;
       font-size: 11px;
-      line-height: 1.5;
       font-weight: 300;
+      line-height: 1.5;
       transition: color 0.25s ease;
     }
   }
 
   & .right {
     display: flex;
-    justify-content: flex-end;
+    gap: 8px;
     align-items: stretch;
+    justify-content: flex-end;
     width: 100px;
-    gap: 8px;
 
     & .controls {
       display: flex;
-      justify-content: center;
       flex-direction: column;
-      border-left: 1px solid var(--knime-silver-sand);
+      justify-content: center;
       padding-left: 5px;
       margin-right: -4px;
+      border-left: 1px solid var(--knime-silver-sand);
     }
   }
 
   &::before {
-    content: "";
+    position: absolute;
+    top: 12px;
+    left: -6px;
     width: 12px;
     height: 12px;
+    content: "";
     background-color: var(--knime-white);
     transform: rotateZ(45deg);
-    position: absolute;
-    left: -6px;
-    top: 12px;
     transition: background-color 0.25s ease;
   }
 
   &::after {
-    content: "";
     position: absolute;
-    left: -24px;
     top: 15px;
-    background-color: var(--knime-masala);
+    left: -24px;
     width: 6px;
     height: 6px;
+    content: "";
+    background-color: var(--knime-masala);
     border-radius: 100%;
     box-shadow: 0 0 0 0 transparent;
     transition:
@@ -237,8 +237,8 @@ const onLabelLeave = () => {
   }
 
   &:hover {
-    box-shadow: 0 2px 10px 0 var(--knime-gray-dark-semi);
     cursor: pointer;
+    box-shadow: 0 2px 10px 0 var(--knime-gray-dark-semi);
   }
 
   &.selected {

package/src/rfcErrors/RFCErrorToastTemplate.vue

@@ -160,9 +160,9 @@ const onShowDetailsClicked = () => {
 
 .show-more {
   all: unset;
-  cursor: pointer;
   font-weight: 500;
   white-space: nowrap;
+  cursor: pointer;
 
   &:active,
   &:hover {
@@ -172,9 +172,9 @@ const onShowDetailsClicked = () => {
 
 .copy-button-wrapper {
   & .button {
-    font-size: 13px;
     padding: 0;
     margin-top: 10px;
+    font-size: 13px;
   }
 }