@knime/kds-components 0.29.2 → 0.29.3

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @knime/kds-components
 
+## 0.29.3
+
+### Patch Changes
+
+- 252e71b: Add `KdsProgressBar`
+  - @knime/kds-styles@0.29.3
+
 ## 0.29.2
 
 ### Patch Changes

package/dist/index.css

@@ -311,6 +311,84 @@
 }
 }
 
+.kds-progress-bar {
+&[data-v-5fdfbce2] {
+  --progress-bar-background-color: var(--kds-color-surface-subtle);
+  --progress-bar-foreground-color: var(
+    --kds-color-background-primary-bold-initial
+  );
+  --progress-bar-radius: var(--kds-border-radius-container-pill);
+  --progress-bar-height: var(--kds-dimension-component-height-0-25x);
+
+  position: relative;
+  width: 100%;
+  height: var(--progress-bar-height);
+  overflow: hidden;
+  border-radius: var(--progress-bar-radius);
+
+  /* Firefox uses this to target the bar that represents the value of the progress element */
+
+  /* the following two rules need to stay separate, as otherwise it causes it not to be applied in Chrome correctly */
+}
+& .progress[data-v-5fdfbce2] {
+    display: block;
+    width: 100%;
+    height: var(--progress-bar-height);
+    padding: 0;
+    overflow: hidden;
+    appearance: none;
+
+    /* Firefox sets the background of the bar from here  */
+    background-color: var(--progress-bar-background-color);
+    border: none;
+    border-radius: var(--progress-bar-radius);
+}
+& .progress[data-v-5fdfbce2]::-webkit-progress-bar {
+    background-color: var(--progress-bar-background-color);
+}
+& .progress[data-v-5fdfbce2]::-webkit-progress-value {
+    background-color: var(--progress-bar-foreground-color);
+    border-radius: var(--progress-bar-radius);
+    transition: width 0.5s;
+}
+& .progress[data-v-5fdfbce2]::-moz-progress-bar {
+    background-color: var(--progress-bar-foreground-color);
+}
+& .progress[data-v-5fdfbce2]:indeterminate {
+    background-color: var(--progress-bar-background-color);
+    background-image: none;
+}
+& .progress[data-v-5fdfbce2]:indeterminate::-webkit-progress-bar {
+    background-color: transparent;
+}
+& .progress[data-v-5fdfbce2]:indeterminate::-moz-progress-bar {
+    background-color: transparent;
+}
+& .indeterminate-bar[data-v-5fdfbce2] {
+    position: absolute;
+    inset-block: 0;
+    width: 35%;
+    pointer-events: none;
+    background-color: var(--progress-bar-foreground-color);
+    border-radius: var(--kds-border-radius-container-pill);
+    animation: move-indeterminate-5fdfbce2 1.5s linear infinite;
+}
+}
+.kds-progress-bar-medium[data-v-5fdfbce2] {
+  --progress-bar-height: var(--kds-dimension-component-height-0-25x);
+}
+.kds-progress-bar-large[data-v-5fdfbce2] {
+  --progress-bar-height: var(--kds-dimension-component-height-0-75x);
+}
+@keyframes move-indeterminate-5fdfbce2 {
+0% {
+    transform: translateX(-120%);
+}
+100% {
+    transform: translateX(320%);
+}
+}
+
 .kds-color-swatch {
 &[data-v-91e0130d] {
   display: inline-block;

package/dist/index.js

@@ -1,4 +1,4 @@
-import { defineComponent, createPropsRestProxy, ref, watch, computed, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, Fragment, renderList, createBlock, normalizeStyle, createCommentVNode, shallowRef, markRaw, readonly, toRef, unref, resolveDynamicComponent, useTemplateRef, createVNode, withCtx, renderSlot, mergeProps, h as h$1, useSlots, getCurrentInstance, useModel, mergeModels, onMounted, onUnmounted, nextTick, useId, withModifiers, watchEffect, useAttrs, withKeys, isRef, getCurrentScope, onScopeDispose, defineAsyncComponent, toRefs, useCssVars, createSlots, normalizeProps, withDirectives, vShow, onBeforeUpdate, onBeforeUnmount, vModelText, createTextVNode, guardReactiveProps } from 'vue';
+import { defineComponent, createPropsRestProxy, ref, watch, computed, openBlock, createElementBlock, normalizeClass, createElementVNode, toDisplayString, Fragment, renderList, createBlock, normalizeStyle, createCommentVNode, shallowRef, markRaw, readonly, toRef, unref, resolveDynamicComponent, mergeProps, useTemplateRef, createVNode, withCtx, renderSlot, h as h$1, useSlots, getCurrentInstance, useModel, mergeModels, onMounted, onUnmounted, nextTick, useId, withModifiers, watchEffect, useAttrs, withKeys, isRef, getCurrentScope, onScopeDispose, defineAsyncComponent, toRefs, useCssVars, createSlots, normalizeProps, withDirectives, vShow, onBeforeUpdate, onBeforeUnmount, vModelText, createTextVNode, guardReactiveProps } from 'vue';
 import { useLocalStorage, useDark, usePreferredDark, useResizeObserver, useMutationObserver, onClickOutside, useElementSize, useMousePressed, useVirtualList, useTemplateRefsList } from '@vueuse/core';
 
 import './index.css';const kdsAvatarSize = {
@@ -9,14 +9,14 @@ import './index.css';const kdsAvatarSize = {
 };
 const kdsAvatarSizes = Object.values(kdsAvatarSize);
 
-const _hoisted_1$14 = ["role", "title", "aria-hidden", "aria-label", "data-color"];
-const _hoisted_2$F = ["src"];
+const _hoisted_1$15 = ["role", "title", "aria-hidden", "aria-label", "data-color"];
+const _hoisted_2$G = ["src"];
 const _hoisted_3$u = {
   key: 1,
   class: "kds-avatar-initials",
   "aria-hidden": "true"
 };
-const _sfc_main$1F = /* @__PURE__ */ defineComponent({
+const _sfc_main$1G = /* @__PURE__ */ defineComponent({
   __name: "KdsAvatar",
   props: {
     initials: {},
@@ -80,10 +80,10 @@ const _sfc_main$1F = /* @__PURE__ */ defineComponent({
           alt: "",
           "aria-hidden": "true",
           onError: onImageError
-        }, null, 40, _hoisted_2$F)) : (openBlock(), createElementBlock("div", _hoisted_3$u, [
+        }, null, 40, _hoisted_2$G)) : (openBlock(), createElementBlock("div", _hoisted_3$u, [
           createElementVNode("span", null, toDisplayString(displayedInitials.value), 1)
         ]))
-      ], 10, _hoisted_1$14);
+      ], 10, _hoisted_1$15);
     };
   }
 });
@@ -96,16 +96,16 @@ const _export_sfc = (sfc, props) => {
   return target;
 };
 
-const KdsAvatar = /* @__PURE__ */ _export_sfc(_sfc_main$1F, [["__scopeId", "data-v-9e1a5abe"]]);
+const KdsAvatar = /* @__PURE__ */ _export_sfc(_sfc_main$1G, [["__scopeId", "data-v-9e1a5abe"]]);
 
-const _hoisted_1$13 = ["aria-label"];
-const _hoisted_2$E = { class: "avatars" };
+const _hoisted_1$14 = ["aria-label"];
+const _hoisted_2$F = { class: "avatars" };
 const _hoisted_3$t = {
   key: 0,
   class: "more-count",
   "aria-hidden": "true"
 };
-const _sfc_main$1E = /* @__PURE__ */ defineComponent({
+const _sfc_main$1F = /* @__PURE__ */ defineComponent({
   __name: "KdsAvatarCounter",
   props: {
     moreCount: { default: 0 },
@@ -125,7 +125,7 @@ const _sfc_main$1E = /* @__PURE__ */ defineComponent({
         role: "group",
         "aria-label": ariaLabel.value
       }, [
-        createElementVNode("div", _hoisted_2$E, [
+        createElementVNode("div", _hoisted_2$F, [
           (openBlock(true), createElementBlock(Fragment, null, renderList(__props.avatars, (avatar, index) => {
             return openBlock(), createBlock(KdsAvatar, {
               key: index,
@@ -140,12 +140,12 @@ const _sfc_main$1E = /* @__PURE__ */ defineComponent({
           }), 128))
         ]),
         __props.moreCount > 0 ? (openBlock(), createElementBlock("div", _hoisted_3$t, " +" + toDisplayString(__props.moreCount), 1)) : createCommentVNode("", true)
-      ], 8, _hoisted_1$13);
+      ], 8, _hoisted_1$14);
     };
   }
 });
 
-const KdsAvatarCounter = /* @__PURE__ */ _export_sfc(_sfc_main$1E, [["__scopeId", "data-v-1aef516d"]]);
+const KdsAvatarCounter = /* @__PURE__ */ _export_sfc(_sfc_main$1F, [["__scopeId", "data-v-1aef516d"]]);
 
 const __variableDynamicImportRuntimeHelper = (glob$1, path$13, segs) => {
 	const v = glob$1[path$13];
@@ -202,7 +202,7 @@ function useIcon({
   };
 }
 
-const _sfc_main$1D = /* @__PURE__ */ defineComponent({
+const _sfc_main$1E = /* @__PURE__ */ defineComponent({
   __name: "KdsIcon",
   props: {
     name: {},
@@ -232,7 +232,7 @@ const _sfc_main$1D = /* @__PURE__ */ defineComponent({
   }
 });
 
-const KdsIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1D, [["__scopeId", "data-v-bff4f419"]]);
+const KdsIcon = /* @__PURE__ */ _export_sfc(_sfc_main$1E, [["__scopeId", "data-v-bff4f419"]]);
 
 const ID_TO_ICON_MAP = {
   // Flow Variables
@@ -584,8 +584,8 @@ const kdsDataTypeSize = {
 };
 const kdsDataTypeSizes = Object.values(kdsDataTypeSize);
 
-const _hoisted_1$12 = ["title"];
-const _sfc_main$1C = /* @__PURE__ */ defineComponent({
+const _hoisted_1$13 = ["title"];
+const _sfc_main$1D = /* @__PURE__ */ defineComponent({
   __name: "KdsDataType",
   props: {
     iconName: { default: "unknown-datatype" },
@@ -626,12 +626,12 @@ const _sfc_main$1C = /* @__PURE__ */ defineComponent({
           "aria-hidden": "true",
           focusable: "false"
         }, null, 8, ["class"]))
-      ], 10, _hoisted_1$12);
+      ], 10, _hoisted_1$13);
     };
   }
 });
 
-const KdsDataType = /* @__PURE__ */ _export_sfc(_sfc_main$1C, [["__scopeId", "data-v-38e9537f"]]);
+const KdsDataType = /* @__PURE__ */ _export_sfc(_sfc_main$1D, [["__scopeId", "data-v-38e9537f"]]);
 
 const kdsBadgeVariant = {
   NEUTRAL: "neutral",
@@ -648,8 +648,8 @@ const kdsBadgeSize = {
 };
 const kdsBadgeSizes = Object.values(kdsBadgeSize);
 
-const _hoisted_1$11 = { class: "label-wrapper" };
-const _sfc_main$1B = /* @__PURE__ */ defineComponent({
+const _hoisted_1$12 = { class: "label-wrapper" };
+const _sfc_main$1C = /* @__PURE__ */ defineComponent({
   __name: "KdsBadge",
   props: {
     label: {},
@@ -671,13 +671,70 @@ const _sfc_main$1B = /* @__PURE__ */ defineComponent({
           name: __props.leadingIcon,
           size: sizeToIconSize[__props.size]
         }, null, 8, ["name", "size"])) : createCommentVNode("", true),
-        createElementVNode("span", _hoisted_1$11, toDisplayString(__props.label), 1)
+        createElementVNode("span", _hoisted_1$12, toDisplayString(__props.label), 1)
+      ], 2);
+    };
+  }
+});
+
+const KdsBadge = /* @__PURE__ */ _export_sfc(_sfc_main$1C, [["__scopeId", "data-v-df64f7cf"]]);
+
+const kdsProgressBarSize = {
+  MEDIUM: "medium",
+  LARGE: "large"
+};
+const kdsProgressBarSizes = Object.values(kdsProgressBarSize);
+
+const _hoisted_1$11 = ["title", "aria-label"];
+const _hoisted_2$E = {
+  key: 0,
+  class: "indeterminate-bar",
+  "aria-hidden": "true"
+};
+const _sfc_main$1B = /* @__PURE__ */ defineComponent({
+  __name: "KdsProgressBar",
+  props: {
+    size: { default: () => kdsProgressBarSize.MEDIUM },
+    title: { default: "" },
+    percentage: { default: 0 },
+    indeterminate: { type: Boolean, default: false }
+  },
+  setup(__props) {
+    const progressValue = computed(() => {
+      if (Number.isNaN(__props.percentage)) {
+        return 0;
+      }
+      return Math.min(Math.max(__props.percentage, 0), 100);
+    });
+    const title = computed(() => {
+      const customTitle = (__props.title ?? "").trim();
+      if (customTitle) {
+        return customTitle;
+      }
+      return __props.indeterminate ? "Loading" : `Progress: ${progressValue.value}%`;
+    });
+    return (_ctx, _cache) => {
+      return openBlock(), createElementBlock("div", {
+        class: normalizeClass([
+          "kds-progress-bar",
+          {
+            "kds-progress-bar-large": __props.size === unref(kdsProgressBarSize).LARGE,
+            "kds-progress-bar-medium": __props.size !== unref(kdsProgressBarSize).LARGE
+          }
+        ])
+      }, [
+        createElementVNode("progress", mergeProps({
+          title: title.value,
+          "aria-label": title.value,
+          class: "progress"
+        }, __props.indeterminate ? {} : { value: progressValue.value, max: 100 }), null, 16, _hoisted_1$11),
+        __props.indeterminate ? (openBlock(), createElementBlock("span", _hoisted_2$E)) : createCommentVNode("", true)
       ], 2);
     };
   }
 });
 
-const KdsBadge = /* @__PURE__ */ _export_sfc(_sfc_main$1B, [["__scopeId", "data-v-df64f7cf"]]);
+const KdsProgressBar = /* @__PURE__ */ _export_sfc(_sfc_main$1B, [["__scopeId", "data-v-5fdfbce2"]]);
 
 const kdsColorSwatchType = {
   LEARNER: "learner",
@@ -26006,5 +26063,5 @@ const _sfc_main = /* @__PURE__ */ defineComponent({
 
 const KdsDescription = /* @__PURE__ */ _export_sfc(_sfc_main, [["__scopeId", "data-v-ed6ba7bb"]]);
 
-export { KdsAccordion, KdsAvatar, KdsAvatarCounter, KdsBadge, KdsBreadcrumb, _sfc_main$1s as KdsButton, _sfc_main$h as KdsCard, _sfc_main$10 as KdsCheckbox, KdsCheckboxGroup, KdsClickableCard, _sfc_main$S as KdsColorInput, KdsColorSwatch, _sfc_main$1c as KdsContextMenu, KdsDataType, _sfc_main$L as KdsDateInput, _sfc_main$J as KdsDateTimeFormatInput, KdsDescription, KdsDivider, KdsDonutChart, _sfc_main$z as KdsDropdown, KdsDynamicModalProvider, KdsEmptyState, KdsFileExplorer, KdsIcon, KdsInfoToggleButton, KdsInlineMessage, _sfc_main$C as KdsIntervalInput, KdsLabel, KdsLink, _sfc_main$1r as KdsLinkButton, KdsLinkCard, KdsListContainer, KdsLiveStatus, KdsLoadingSkeleton, KdsLoadingSpinner, _sfc_main$1d as KdsMenu, _sfc_main$1h as KdsMenuButton, KdsMissingValueIcon, KdsModal, KdsModalLayout, _sfc_main$w as KdsMultiSelectDropdown, KdsNavItem, KdsNavigation, _sfc_main$V as KdsNumberInput, KdsPanel, _sfc_main$R as KdsPasswordInput, _sfc_main$I as KdsPatternInput, KdsPopover, KdsPreviewList, KdsProgressButton, KdsRadioButton, KdsRadioButtonGroup, KdsResponsiveButtonGroup, KdsSearchInput, KdsSelectableCard, KdsSortableListBox, KdsSplitButton, KdsSubText, KdsTabBar, KdsTextInput, KdsTextarea, _sfc_main$E as KdsTimeInput, _sfc_main$1p as KdsToggleButton, KdsTwinList, _sfc_main$Q as KdsUsernameInput, KdsValueSwitch, KdsVariableToggleButton, kdsAvatarSize, kdsAvatarSizes, kdsBadgeSize, kdsBadgeSizes, kdsBadgeVariant, kdsBadgeVariants, kdsButtonSize, kdsButtonSizes, kdsButtonVariant, kdsButtonVariants, kdsCardVariant, kdsCardVariants, kdsCheckboxGroupAlignment, kdsCheckboxGroupAlignments, kdsCheckboxValue, kdsCheckboxValues, kdsColorSwatchSize, kdsColorSwatchSizes, kdsColorSwatchType, kdsColorSwatchTypes, kdsDarkModeType, kdsDarkModeTypes, kdsDataTypeSize, kdsDataTypeSizes, kdsDateFormatCategories, kdsDateFormatCategory, kdsFileExplorerDraggingAnimationMode, kdsFileExplorerDraggingAnimationModes, kdsFileExplorerSize, kdsFileExplorerSizes, kdsIconName, iconNames as kdsIconNames, kdsIconSize, kdsIconSizes, kdsInlineMessageVariant, kdsInlineMessageVariants, kdsIntervalDirectionalities, kdsIntervalDirectionality, kdsIntervalInputFormat, kdsIntervalInputFormats, kdsLiveStatusSize, kdsLiveStatusSizes, kdsLiveStatusStatus, kdsLiveStatusStatuses, kdsLoadingSkeletonVariant, kdsLoadingSkeletonVariants, kdsLoadingSpinnerVariant, kdsLoadingSpinnerVariants, kdsModalClosedBy, kdsModalClosedByOptions, kdsModalHeight, kdsModalHeightSizes, kdsModalVariant, kdsModalVariants, kdsModalWidth, kdsModalWidthSizes, kdsPanelBodyOverflow, kdsPanelBodyOverflows, kdsPanelBodyVariant, kdsPanelBodyVariants, kdsPasswordInputAutocomplete, kdsPasswordInputAutocompletes, kdsPasswordInputVariant, kdsPasswordInputVariants, kdsPopoverPlacement, kdsPopoverPlacements, kdsPopoverRole, kdsPopoverRoles, kdsPopoverType, kdsPopoverTypes, kdsProgressButtonState, kdsProgressButtonStates, kdsRadioButtonGroupAlignment, kdsRadioButtonGroupAlignments, kdsResponsiveButtonGroupAlignment, kdsResponsiveButtonGroupAlignments, kdsTabBarSize, kdsTabBarSizes, kdsTemporalType, kdsTemporalTypes, kdsTimeInputGranularities, kdsTimeInputGranularity, kdsToggleButtonVariant, kdsToggleButtonVariants, kdsTwinListSearchMode, kdsTwinListSearchModes, kdsTypeIconName, typeIconNames as kdsTypeIconNames, kdsUsernameInputAutocomplete, kdsUsernameInputAutocompletes, kdsValueSwitchSize, kdsValueSwitchSizes, kdsValueSwitchVariant, kdsValueSwitchVariants, useKdsDarkMode, useKdsDynamicModal, useKdsIsTruncated, useKdsLegacyMode };
+export { KdsAccordion, KdsAvatar, KdsAvatarCounter, KdsBadge, KdsBreadcrumb, _sfc_main$1s as KdsButton, _sfc_main$h as KdsCard, _sfc_main$10 as KdsCheckbox, KdsCheckboxGroup, KdsClickableCard, _sfc_main$S as KdsColorInput, KdsColorSwatch, _sfc_main$1c as KdsContextMenu, KdsDataType, _sfc_main$L as KdsDateInput, _sfc_main$J as KdsDateTimeFormatInput, KdsDescription, KdsDivider, KdsDonutChart, _sfc_main$z as KdsDropdown, KdsDynamicModalProvider, KdsEmptyState, KdsFileExplorer, KdsIcon, KdsInfoToggleButton, KdsInlineMessage, _sfc_main$C as KdsIntervalInput, KdsLabel, KdsLink, _sfc_main$1r as KdsLinkButton, KdsLinkCard, KdsListContainer, KdsLiveStatus, KdsLoadingSkeleton, KdsLoadingSpinner, _sfc_main$1d as KdsMenu, _sfc_main$1h as KdsMenuButton, KdsMissingValueIcon, KdsModal, KdsModalLayout, _sfc_main$w as KdsMultiSelectDropdown, KdsNavItem, KdsNavigation, _sfc_main$V as KdsNumberInput, KdsPanel, _sfc_main$R as KdsPasswordInput, _sfc_main$I as KdsPatternInput, KdsPopover, KdsPreviewList, KdsProgressBar, KdsProgressButton, KdsRadioButton, KdsRadioButtonGroup, KdsResponsiveButtonGroup, KdsSearchInput, KdsSelectableCard, KdsSortableListBox, KdsSplitButton, KdsSubText, KdsTabBar, KdsTextInput, KdsTextarea, _sfc_main$E as KdsTimeInput, _sfc_main$1p as KdsToggleButton, KdsTwinList, _sfc_main$Q as KdsUsernameInput, KdsValueSwitch, KdsVariableToggleButton, kdsAvatarSize, kdsAvatarSizes, kdsBadgeSize, kdsBadgeSizes, kdsBadgeVariant, kdsBadgeVariants, kdsButtonSize, kdsButtonSizes, kdsButtonVariant, kdsButtonVariants, kdsCardVariant, kdsCardVariants, kdsCheckboxGroupAlignment, kdsCheckboxGroupAlignments, kdsCheckboxValue, kdsCheckboxValues, kdsColorSwatchSize, kdsColorSwatchSizes, kdsColorSwatchType, kdsColorSwatchTypes, kdsDarkModeType, kdsDarkModeTypes, kdsDataTypeSize, kdsDataTypeSizes, kdsDateFormatCategories, kdsDateFormatCategory, kdsFileExplorerDraggingAnimationMode, kdsFileExplorerDraggingAnimationModes, kdsFileExplorerSize, kdsFileExplorerSizes, kdsIconName, iconNames as kdsIconNames, kdsIconSize, kdsIconSizes, kdsInlineMessageVariant, kdsInlineMessageVariants, kdsIntervalDirectionalities, kdsIntervalDirectionality, kdsIntervalInputFormat, kdsIntervalInputFormats, kdsLiveStatusSize, kdsLiveStatusSizes, kdsLiveStatusStatus, kdsLiveStatusStatuses, kdsLoadingSkeletonVariant, kdsLoadingSkeletonVariants, kdsLoadingSpinnerVariant, kdsLoadingSpinnerVariants, kdsModalClosedBy, kdsModalClosedByOptions, kdsModalHeight, kdsModalHeightSizes, kdsModalVariant, kdsModalVariants, kdsModalWidth, kdsModalWidthSizes, kdsPanelBodyOverflow, kdsPanelBodyOverflows, kdsPanelBodyVariant, kdsPanelBodyVariants, kdsPasswordInputAutocomplete, kdsPasswordInputAutocompletes, kdsPasswordInputVariant, kdsPasswordInputVariants, kdsPopoverPlacement, kdsPopoverPlacements, kdsPopoverRole, kdsPopoverRoles, kdsPopoverType, kdsPopoverTypes, kdsProgressBarSize, kdsProgressBarSizes, kdsProgressButtonState, kdsProgressButtonStates, kdsRadioButtonGroupAlignment, kdsRadioButtonGroupAlignments, kdsResponsiveButtonGroupAlignment, kdsResponsiveButtonGroupAlignments, kdsTabBarSize, kdsTabBarSizes, kdsTemporalType, kdsTemporalTypes, kdsTimeInputGranularities, kdsTimeInputGranularity, kdsToggleButtonVariant, kdsToggleButtonVariants, kdsTwinListSearchMode, kdsTwinListSearchModes, kdsTypeIconName, typeIconNames as kdsTypeIconNames, kdsUsernameInputAutocomplete, kdsUsernameInputAutocompletes, kdsValueSwitchSize, kdsValueSwitchSizes, kdsValueSwitchVariant, kdsValueSwitchVariants, useKdsDarkMode, useKdsDynamicModal, useKdsIsTruncated, useKdsLegacyMode };
 //# sourceMappingURL=index.js.map