@designcrowd/library.brand-page 5.18.4 → 5.18.6-ast-padding-1

package/src/shared/content-settings/components/content-settings/i18n/content-settings.pt-BR.json

@@ -113,6 +113,8 @@
     "iconFillColorTitle": "Cor de preenchimento do ícone",
     "iconBackgroundColorTitle": "Cor de fundo do ícone",
     "paddingTitle": "Preenchimento",
+    "topPaddingTitle": "Preenchimento superior",
+    "bottomPaddingTitle": "Preenchimento inferior",
     "dividerStyleTitle": "Estilo do separador",
     "dividerColorTitle": "Cor do separador",
     "addItemTitle": "Adicionar item",

package/src/shared/content-settings/components/content-settings/i18n/content-settings.pt-PT.json

@@ -113,6 +113,8 @@
     "iconFillColorTitle": "Cor de preenchimento do ícone",
     "iconBackgroundColorTitle": "Cor de fundo do ícone",
     "paddingTitle": "Preenchimento",
+    "topPaddingTitle": "Preenchimento superior",
+    "bottomPaddingTitle": "Preenchimento inferior",
     "dividerStyleTitle": "Estilo do separador",
     "dividerColorTitle": "Cor do separador",
     "addItemTitle": "Adicionar Item",

package/src/shared/content-settings/components/content-settings-item/ContentSettingsItem.vue

@@ -56,7 +56,7 @@
     >
       <li
         v-for="(field, index) in fields"
-        :key="`content-settings-item-field-${id}-${index}`"
+        :key="`content-settings-item-field-${id}-${field.name}`"
         class="tw-cursor-pointer"
         :class="{
           'tw-mb-3': index !== fields.length - 1,

package/src/shared/content-settings/components/focused-content-item-settings/FocusedContentItemSettings.vue

@@ -25,8 +25,8 @@
     >
       <ul>
         <li
-          v-for="(field, fieldIndex) in group.fields"
-          :key="`content-settings-item-group-field-${id}-${group.id}-${fieldIndex}`"
+          v-for="field in group.fields"
+          :key="`content-settings-item-group-field-${id}-${group.id}-${field.name}`"
         >
           <ContentSettingsItemField
             v-if="

package/src/shared/content-settings/components/slider-field/SliderField.mixin.ts

@@ -45,6 +45,15 @@ export default defineComponent({
       sliderValue: value,
     };
   },
+  watch: {
+    // The value can change outside the slider (e.g. a layout switch
+    // re-applying default padding, or undo) — keep the display in sync.
+    value(newValue: string | undefined) {
+      this.sliderValue = this.valueConvertor
+        ? this.valueConvertor.convert(newValue as any)
+        : newValue;
+    },
+  },
   computed: {
     innerMinLength(): number {
       return this.minLength ?? 0;

package/src/shared/navigation-style-settings/components/navigation-style-settings/NavigationStyleSettings.mixin.ts

@@ -50,22 +50,28 @@ export default defineComponent({
   computed: {
     colorPickerValue(): (option: NavigationStyleConfigOption) => string {
       return (option) => {
-        return this.valueFuncDict[option]()
-          ? RGBAtoHex(this.valueFuncDict[option]())
-          : '';
+        const raw = this.valueFuncDict[option]();
+
+        if (raw) {
+          return RGBAtoHex(raw);
+        }
+
+        if (
+          option === 'defaultBackgroundColor' ||
+          option === 'selectedBackgroundColor'
+        ) {
+          return 'transparent';
+        }
+
+        return '';
       };
     },
     navigationStyleOptions(): NavigationStyleConfigOption[] {
-      const options =
+      return (
         this.availableNavigationStyleConfigs.find(
           (c) => c.displayType === this.value.displayType,
-        )?.options ?? [];
-
-      if (!this.isAdmin && this.value.displayType.includes('hamburger')) {
-        return options.filter((o) => o !== 'subNavBackgroundColor');
-      }
-
-      return options;
+        )?.options ?? []
+      );
     },
     isOptionColorMatched(): (option: NavigationStyleConfigOption) => boolean {
       return (option) => {

package/src/shared/navigation-style-settings/components/navigation-style-settings/NavigationStyleSettings.vue

@@ -79,7 +79,10 @@
           :is-admin="isAdmin"
           :is-toggled="false"
           :logo-theme="logoTheme"
-          :disable-transparent="true"
+          :disable-transparent="
+            option !== 'defaultBackgroundColor' &&
+            option !== 'selectedBackgroundColor'
+          "
           @update:model-value="onColorPickerInput(option, $event)"
         />
       </div>

package/src/shared/navigation-style-settings/store/index.ts

@@ -7,7 +7,7 @@ import type {
 import {
   NAVIGATION_DISPLAY,
   DEFAULT_TEXT_ALIGN,
-  STYLE_THEME_KEYS,
+  getDefaultSubNavBackgroundColor,
 } from '@brand-page';
 import { getThemeByTextStyleAndLogoTheme } from '@brand-page/utils/color.util';
 import type {
@@ -29,26 +29,6 @@ import { useUiStyleSettingsStore } from '../../style-settings/store';
 import type { PageSection } from '../../page-settings/models';
 import { PAGE_SECTIONS } from '../../page-settings/models';
 
-const getDefaultSubNavBackgroundColor = (
-  defaultTextColor: string | undefined,
-): string | undefined => {
-  if (
-    defaultTextColor === STYLE_THEME_KEYS.LogoTextColor ||
-    defaultTextColor === STYLE_THEME_KEYS.LogoTextMultiColor
-  ) {
-    return STYLE_THEME_KEYS.LogoBackgroundColor;
-  }
-
-  if (
-    defaultTextColor === STYLE_THEME_KEYS.LogoBackgroundColor ||
-    defaultTextColor === STYLE_THEME_KEYS.LogoBackgroundMultiColor
-  ) {
-    return STYLE_THEME_KEYS.LogoTextColor;
-  }
-
-  return undefined;
-};
-
 export interface NavigationStyleSettingsState {
   navigationStyleTypeConfigs: navigationStyleTypeConfigs;
   navigation: {

package/src/utils/minify-brand-page-metadata.ts

@@ -205,7 +205,17 @@ const minifyContent = (
   editor: Editor,
   assets?: AssetEntry[],
 ): MinifiedContent => {
-  const base: MinifiedContent = { id: content.id, type: content.type };
+  const base: MinifiedContent = {
+    id: content.id,
+    type: content.type,
+    // Padding Control (BP-5687) — shared across every block, persist when set.
+    ...(typeof content.topPadding === 'number' && {
+      topPadding: content.topPadding,
+    }),
+    ...(typeof content.bottomPadding === 'number' && {
+      bottomPadding: content.bottomPadding,
+    }),
+  };
   const c = content as any;
 
   // Helper: include imageUrl and its asset key if available