chore: update vue (#1929)

ivan-kalachikov · web-flow · commit 1740bdc0a998 · 2025-09-15T08:33:22.000+01:00
## Description vue-core PR for reference: vuejs/core#12461 (comment) ## References ### Jira-link: https://virtocommerce.atlassian.net/browse/VCST-3706 ### Artifact URL: https://vc3prerelease.blob.core.windows.net/packages/vc-theme-b2b-vue-2.31.0-pr-1929-b983-b9839e5d.zip
diff --git a/client-app/ui-kit/components/atoms/badge/vc-badge.vue b/client-app/ui-kit/components/atoms/badge/vc-badge.vue
@@ -34,7 +34,6 @@ withDefaults(defineProps<IProps>(), {
   color: "primary",
   size: "md",
   variant: "solid",
-  maxWidth: "",
 });
 </script>
 
diff --git a/client-app/ui-kit/components/atoms/container/vc-container.vue b/client-app/ui-kit/components/atoms/container/vc-container.vue
@@ -30,8 +30,6 @@ interface IProps {
 }
 
 const props = withDefaults(defineProps<IProps>(), {
-  maxWidth: "",
-  bgColor: "",
   hasBgImage: true,
 });
 
diff --git a/client-app/ui-kit/components/atoms/dialog/vc-dialog.vue b/client-app/ui-kit/components/atoms/dialog/vc-dialog.vue
@@ -18,10 +18,7 @@ interface IProps {
   maxHeight?: string;
 }
 
-const props = withDefaults(defineProps<IProps>(), {
-  width: "",
-  maxHeight: "",
-});
+const props = defineProps<IProps>();
 </script>
 
 <style lang="scss">
diff --git a/client-app/ui-kit/components/atoms/radio-button/vc-radio-button.vue b/client-app/ui-kit/components/atoms/radio-button/vc-radio-button.vue
@@ -86,8 +86,8 @@ const checked = computed(() => model.value === props.value);
   $left: "";
   $right: "";
 
-  --props-max-lines: v-bind(props.maxLines ? props.maxLines: null);
-  --props-word-break: v-bind(props.wordBreak ? props.wordBreak: null);
+  --props-max-lines: v-bind(props.maxLines);
+  --props-word-break: v-bind(props.wordBreak);
 
   --base-color: var(--vc-radio-button-base-color, var(--color-primary-500));
   --focus-color: rgb(from var(--base-color) r g b / 0.3);
diff --git a/client-app/ui-kit/components/atoms/scrollbar/vc-scrollbar.vue b/client-app/ui-kit/components/atoms/scrollbar/vc-scrollbar.vue
@@ -32,8 +32,6 @@ const props = withDefaults(defineProps<IProps>(), {
   horizontal: false,
   disabled: false,
   tag: "div",
-  trackColor: "",
-  thumbColor: "",
 });
 
 const _trackColor = computed(() => getColorValue(props.trackColor));
diff --git a/client-app/ui-kit/components/atoms/typography/vc-typography.vue b/client-app/ui-kit/components/atoms/typography/vc-typography.vue
@@ -30,10 +30,6 @@ interface IProps {
 const props = withDefaults(defineProps<IProps>(), {
   tag: "p",
   align: "left",
-  fontSize: "",
-  fontWeight: "",
-  textTransform: "",
-  color: "",
 });
 
 const isHeader = computed(() => /^(h[1-6])$/.test(props.tag));
diff --git a/client-app/ui-kit/components/molecules/button/vc-button.vue b/client-app/ui-kit/components/molecules/button/vc-button.vue
@@ -104,9 +104,7 @@ const props = withDefaults(defineProps<IProps>(), {
   truncate: false,
   fullWidth: false,
   noWrap: false,
-  minWidth: "",
   tag: "",
-  iconSize: "",
 });
 
 const inputContext = inject<VcInputContextType | null>("inputContext", null);
diff --git a/client-app/ui-kit/components/molecules/chip/vc-chip.vue b/client-app/ui-kit/components/molecules/chip/vc-chip.vue
@@ -69,7 +69,7 @@ const props = withDefaults(defineProps<IProps>(), {
   nowrap: true,
 });
 
-const _iconColor = computed(() => (props.iconColor ? getColorValue(props.iconColor) : ""));
+const _iconColor = computed(() => getColorValue(props.iconColor));
 </script>
 
 <style lang="scss">
diff --git a/client-app/ui-kit/components/molecules/collapsible-content/vc-collapsible-content.vue b/client-app/ui-kit/components/molecules/collapsible-content/vc-collapsible-content.vue
@@ -38,9 +38,7 @@ interface IProps {
 }
 
 const emit = defineEmits<IEmits>();
-const props = withDefaults(defineProps<IProps>(), {
-  maxHeight: "",
-});
+const props = defineProps<IProps>();
 
 const contentWrapperElement = shallowRef<HTMLDivElement>();
 const contentElement = shallowRef<ComponentPublicInstance>();
@@ -68,7 +66,7 @@ watch(showAll, (value: boolean) => {
 
 <style lang="scss">
 .vc-collapsible-content {
-  --props-max-height: v-bind("props.maxHeight");
+  --props-max-height: v-bind(props.maxHeight);
   --max-height: var(--props-max-height, var(--vc-collapsible-content-max-height));
 
   &__wrapper {
diff --git a/client-app/ui-kit/components/molecules/composite-shape/vc-composite-shape.vue b/client-app/ui-kit/components/molecules/composite-shape/vc-composite-shape.vue
@@ -26,8 +26,6 @@ interface IProps {
 }
 
 const props = withDefaults(defineProps<IProps>(), {
-  size: "",
-  iconSize: "",
   iconBgColor: "",
 });
 </script>
diff --git a/client-app/ui-kit/components/molecules/dropdown-menu/vc-dropdown-menu.vue b/client-app/ui-kit/components/molecules/dropdown-menu/vc-dropdown-menu.vue
@@ -48,7 +48,6 @@ defineEmits<IEmits>();
 
 const props = withDefaults(defineProps<IProps>(), {
   placement: "bottom-start",
-  maxHeight: "",
   offsetOptions: 4,
   width: "auto",
   dividers: true,
diff --git a/client-app/ui-kit/components/molecules/menu-item/vc-menu-item.vue b/client-app/ui-kit/components/molecules/menu-item/vc-menu-item.vue
@@ -73,7 +73,6 @@ const props = withDefaults(defineProps<IProps>(), {
   color: "primary",
   size: "md",
   clickable: true,
-  maxLines: "",
 });
 
 const currentElement = ref<HTMLElement>();
diff --git a/client-app/ui-kit/components/molecules/shape/vc-shape.vue b/client-app/ui-kit/components/molecules/shape/vc-shape.vue
@@ -21,9 +21,6 @@ interface IProps {
 
 const props = withDefaults(defineProps<IProps>(), {
   mask: "polygon",
-  size: "",
-  iconColor: "",
-  bgColor: "",
   img: "",
 });
 
diff --git a/client-app/ui-kit/components/molecules/slider/vc-slider.vue b/client-app/ui-kit/components/molecules/slider/vc-slider.vue
@@ -145,7 +145,6 @@ const props = withDefaults(defineProps<IProps>(), {
   step: 1,
   min: 0,
   cols: () => [],
-  colsHeight: "",
   updateOnColumnClick: false,
   showTooltipOnColHover: false,
 });
@@ -384,7 +383,7 @@ function getSliderStart(value1: number, value2: number): [number, number] {
   $hoverable: "";
   $clickable: "";
 
-  --props-cols-height: v-bind(colsHeight);
+  --props-cols-height: v-bind(props.colsHeight);
   --cols-height: var(--vc-slider-cols-height, var(--props-cols-height, 2rem));
   --handle-size: 1.125rem;
 
diff --git a/client-app/ui-kit/components/molecules/tab-switch/vc-tab-switch.vue b/client-app/ui-kit/components/molecules/tab-switch/vc-tab-switch.vue
@@ -62,8 +62,6 @@ const props = withDefaults(
   {
     size: "md",
     labelPosition: "end",
-    color: "",
-    hoverColor: "",
   },
 );
 
diff --git a/client-app/ui-kit/components/molecules/variant-picker/vc-variant-picker.vue b/client-app/ui-kit/components/molecules/variant-picker/vc-variant-picker.vue
@@ -73,7 +73,7 @@ const model = defineModel<IProps["value"]>();
 
 const checked = computed(() => model.value === props.value);
 
-const color = computed(() => (props.type === "color" ? getColorValue(props.value) : ""));
+const color = computed(() => (props.type === "color" ? getColorValue(props.value) : undefined));
 const image = computed(() => (props.type === "image" ? props.value : ""));
 </script>
 
diff --git a/client-app/ui-kit/utilities/css.ts b/client-app/ui-kit/utilities/css.ts
@@ -4,16 +4,18 @@ export function isMainColorType(value: string): value is VcMainColorType {
   return MAIN_COLORS.includes(value as VcMainColorType);
 }
 
-export function getColorValue(color: string): string {
+export function getColorValue(color: string | undefined): string | undefined {
+  if (!color) {
+    return;
+  }
+
   if (isValidCssVariableName(color)) {
     return `var(${color})`;
   } else if (isMainColorType(color)) {
     return `var(--color-${color}-500)`;
   } else if (isValidColor(color)) {
     return color;
   }
-
-  return "";
 }
 
 export function isValidCssVariableName(value: string): boolean {
diff --git a/package.json b/package.json
@@ -74,7 +74,7 @@
     "utility-types": "^3.11.0",
     "uuid": "^11.1.0",
     "vee-validate": "^4.15.1",
-    "vue": "3.5.17",
+    "vue": "3.5.21",
     "vue-html-secure": "^1.0.10",
     "vue-i18n": "^11.1.12",
     "vue-router": "^4.5.1",
diff --git a/yarn.lock b/yarn.lock

Original file line number	Diff line number	Diff line change
`@@ -30,8 +30,6 @@ interface IProps {`
`30`	`30`	`}`
`31`	`31`
`32`	`32`	`const props = withDefaults(defineProps<IProps>(), {`
`33`		`- maxWidth: "",`
`34`		`- bgColor: "",`
`35`	`33`	`hasBgImage: true,`
`36`	`34`	`});`
`37`	`35`
Original file line number	Diff line number	Diff line change
`@@ -26,8 +26,6 @@ interface IProps {`
`26`	`26`	`}`
`27`	`27`
`28`	`28`	`const props = withDefaults(defineProps<IProps>(), {`
`29`		`- size: "",`
`30`		`- iconSize: "",`
`31`	`29`	`iconBgColor: "",`
`32`	`30`	`});`
`33`	`31`	`</script>`