@designcrowd/library.brand-page 5.6.4-scroll-1 → 5.6.4-scroll-3

package/lib/src/brand-page/components/page/Page.mixin.d.ts

@@ -52,7 +52,8 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
     brandPageToken(): string | null;
     contents(): ContentViewModel[];
     backgroundShapes(): BackgroundShape[];
-    rootStyles(): BrandPageCssStyle;
+    rootElementStyles(): BrandPageCssStyle;
+    rootBackgroundStyles(): BrandPageCssStyle;
     showBrandCrowdLogo(): boolean;
     /**
      * @function isRenderedForStorybook

package/lib/src/brand-page/components/page/Page.mixin.js

@@ -85,7 +85,21 @@ export default defineComponent({
             }
             return backgroundShapes;
         },
-        rootStyles() {
+        rootElementStyles() {
+            const styles = {};
+            Object.assign(styles, this.viewModel?.styles?.textStyles?.style);
+            const textFontFamilyKey = this.viewModel.styles?.textStyles.textFontFamily ||
+                DEFAULT_FONT_FAMILY_KEY;
+            const textFontFamilyConfig = FONT_FAMILY_CONFIGS[textFontFamilyKey];
+            if (textFontFamilyConfig) {
+                styles.fontFamily = [
+                    `"${textFontFamilyConfig.name}"`,
+                    ...FALLBACK_FONT_FAMILIES,
+                ].join(', ');
+            }
+            return styles;
+        },
+        rootBackgroundStyles() {
             const styles = {
                 ...(this.viewModel?.styles?.backgroundStyles?.style || {}),
             };
@@ -107,7 +121,11 @@ export default defineComponent({
                     styles.backgroundColor = styles.background;
                     styles.backgroundImage = `url(${this.viewModel?.styles?.backgroundStyles?.backgroundImageUrl})`;
                     if (!this.context.isTemplate) {
-                        styles.width = '100%';
+                        styles.position = 'fixed';
+                        styles.top = '0';
+                        styles.bottom = '0';
+                        styles.left = '0';
+                        styles.right = '0';
                     }
                     delete styles.background;
                 }
@@ -116,16 +134,6 @@ export default defineComponent({
             if (this.viewModel.styles?.backgroundStyles.style.background?.startsWith('linear-gradient')) {
                 styles.backgroundAttachment = 'fixed';
             }
-            Object.assign(styles, this.viewModel?.styles?.textStyles?.style);
-            const textFontFamilyKey = this.viewModel.styles?.textStyles.textFontFamily ||
-                DEFAULT_FONT_FAMILY_KEY;
-            const textFontFamilyConfig = FONT_FAMILY_CONFIGS[textFontFamilyKey];
-            if (textFontFamilyConfig) {
-                styles.fontFamily = [
-                    `"${textFontFamilyConfig.name}"`,
-                    ...FALLBACK_FONT_FAMILIES,
-                ].join(', ');
-            }
             return styles;
         },
         showBrandCrowdLogo() {
@@ -236,7 +244,10 @@ export default defineComponent({
         },
     },
     watch: {
-        rootStyles() {
+        rootElementStyles() {
+            this.setRootStyles();
+        },
+        rootBackgroundStyles() {
             this.setRootStyles();
         },
     },
@@ -271,10 +282,10 @@ export default defineComponent({
          */
         setRootStyles() {
             if (this.context.isPreview) {
-                this.$emit('on-set-preview-styles', this.rootStyles);
+                this.$emit('on-set-preview-styles', Object.assign({}, this.rootElementStyles, this.rootBackgroundStyles));
                 return;
             }
-            this.styles = Object.assign(this.styles, this.rootStyles);
+            this.styles = Object.assign(this.styles, this.rootElementStyles, this.rootBackgroundStyles);
         },
         scrollToLastContent() {
             if (!this.contents.length) {

package/lib/src/brand-page-maker/components/admin-background-settings/AdminBackgroundSettings.mixin.d.ts

@@ -69,6 +69,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             fontStyle?: string | undefined;
             fontSize?: string | undefined;
             fontWeight?: string | undefined;
+            right?: string | undefined;
             letterSpacing?: string | undefined;
             lineHeight?: string | undefined;
             marginBottom?: string | undefined;
@@ -80,6 +81,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             position?: string | undefined;
             textDecoration?: string | undefined;
             top?: string | undefined;
+            bottom?: string | undefined;
             transform?: string | undefined;
             transformOrigin?: string | undefined;
             transition?: string | undefined;
@@ -113,6 +115,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             fontStyle?: string | undefined;
             fontSize?: string | undefined;
             fontWeight?: string | undefined;
+            right?: string | undefined;
             letterSpacing?: string | undefined;
             lineHeight?: string | undefined;
             marginBottom?: string | undefined;
@@ -124,6 +127,7 @@ declare const _default: import("vue").DefineComponent<{}, {
             position?: string | undefined;
             textDecoration?: string | undefined;
             top?: string | undefined;
+            bottom?: string | undefined;
             transform?: string | undefined;
             transformOrigin?: string | undefined;
             transition?: string | undefined;
@@ -159,6 +163,7 @@ declare const _default: import("vue").DefineComponent<{}, {
                 fontWeight?: string | undefined;
                 height?: string | undefined;
                 left?: string | undefined;
+                right?: string | undefined;
                 letterSpacing?: string | undefined;
                 lineHeight?: string | undefined;
                 marginBottom?: string | undefined;
@@ -171,6 +176,7 @@ declare const _default: import("vue").DefineComponent<{}, {
                 textAlign?: string | undefined;
                 textDecoration?: string | undefined;
                 top?: string | undefined;
+                bottom?: string | undefined;
                 transform?: string | undefined;
                 transformOrigin?: string | undefined;
                 transition?: string | undefined;

package/lib/src/brand-page-maker/components/brand-page-maker/BrandPageMaker.mixin.js

@@ -100,7 +100,7 @@ export default defineComponent({
             ? JSON.parse(this.viewModel.shopConfigData)
             : null;
         if (!this.containerStore.baseFabricRenderUrl) {
-            throw new Error('base fabric render url is undefined');
+            // throw new Error('base fabric render url is undefined');
         }
         FabricRenderClient.setInstance({
             baseUrl: this.containerStore.baseFabricRenderUrl,

package/lib/src/brand-page-maker/components/brandpage-maker-page/BrandPageMakerPage.mixin.d.ts

@@ -894,7 +894,8 @@ declare const _default: import("vue").DefineComponent<{}, {
     brandPageToken(): string | null;
     contents(): ContentViewModel[];
     backgroundShapes(): import("../../../brand-page").BackgroundShape[];
-    rootStyles(): BrandPageCssStyle;
+    rootElementStyles(): BrandPageCssStyle;
+    rootBackgroundStyles(): BrandPageCssStyle;
     showBrandCrowdLogo(): boolean;
     isRenderedForStorybook(): boolean;
     pageViewModel(): import("../../../brand-page").PageViewModel | undefined;

package/lib/src/css/library.brand-page-brandCrowd.min.css

@@ -7219,14 +7219,14 @@ body {
   line-height: 1.5;
 }
 
-.brand-page-root[data-v-2413336b] {
+.brand-page-root[data-v-a68b910c] {
   height: 100%;
 }
-.sortable[data-v-2413336b] {
+.sortable[data-v-a68b910c] {
   outline-color: #F7768C;
   outline-width: 0.2rem;
 }
-.brand-page[data-v-2413336b] {
+.brand-page[data-v-a68b910c] {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   display: -webkit-box;
@@ -7238,7 +7238,7 @@ body {
       -ms-flex-direction: column;
           flex-direction: column;
 }
-.brand-page__inner--default[data-v-2413336b] {
+.brand-page__inner--default[data-v-a68b910c] {
   position: relative;
   z-index: 10;
   display: -webkit-box;
@@ -7250,16 +7250,16 @@ body {
       -ms-flex-direction: column;
           flex-direction: column;
 }
-.brand-page__inner--desktop[data-v-2413336b] {
+.brand-page__inner--desktop[data-v-a68b910c] {
   min-height: 100vh;
 }
-.brand-site__header[data-v-2413336b] {
+.brand-site__header[data-v-a68b910c] {
   container-type: inline-size;
 }
-.brand-page__header[data-v-2413336b] {
+.brand-page__header[data-v-a68b910c] {
   padding-top: var(--page-padding);
 }
-.brand-page__content--default[data-v-2413336b] {
+.brand-page__content--default[data-v-a68b910c] {
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 2.5rem;
@@ -7276,7 +7276,7 @@ body {
           flex-direction: column;
   max-width: var(--page-max-width);
 }
-.brand-page__content--desktop[data-v-2413336b] {
+.brand-page__content--desktop[data-v-a68b910c] {
   margin-left: auto;
   margin-right: auto;
   display: -webkit-box;
@@ -7292,15 +7292,15 @@ body {
           flex-direction: column;
   max-width: 100%;
 }
-.brand-page__content--inner[data-v-2413336b] {
+.brand-page__content--inner[data-v-a68b910c] {
   padding-left: var(--page-padding);
   padding-right: var(--page-padding);
 }
-.brand-page__content--inner--brandsite[data-v-2413336b] {
+.brand-page__content--inner--brandsite[data-v-a68b910c] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
 }
-.brand-page__content--outline-selected[data-v-2413336b] {
+.brand-page__content--outline-selected[data-v-a68b910c] {
   position: relative;
   z-index: 10;
   outline-color: #F7768C;
@@ -7308,20 +7308,20 @@ body {
   outline-style: dashed;
   outline-offset: -0.25rem;
 }
-.brand-page__content--outline-footer-selected[data-v-2413336b] {
+.brand-page__content--outline-footer-selected[data-v-a68b910c] {
   outline-color: #f7768c;
   outline-width: 0.2rem;
   outline-style: dashed;
   outline-offset: -0.25rem;
 }
 @media (max-width: 640px) {
-.brand-page__content--inner--full-width[data-v-2413336b] {
+.brand-page__content--inner--full-width[data-v-a68b910c] {
     padding-left: 0;
     padding-right: 0;
 }
 }
 @media (min-width: 640px) {
-.brand-page__content--inner--full-width[data-v-2413336b] {
+.brand-page__content--inner--full-width[data-v-a68b910c] {
     padding-left: var(--page-padding);
     padding-right: var(--page-padding);
 }

package/lib/src/css/library.brand-page-brandPage.min.css

@@ -7547,14 +7547,14 @@ body {
   line-height: 1.5;
 }
 
-.brand-page-root[data-v-2413336b] {
+.brand-page-root[data-v-a68b910c] {
   height: 100%;
 }
-.sortable[data-v-2413336b] {
+.sortable[data-v-a68b910c] {
   outline-color: #F7768C;
   outline-width: 0.2rem;
 }
-.brand-page[data-v-2413336b] {
+.brand-page[data-v-a68b910c] {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   display: -webkit-box;
@@ -7566,7 +7566,7 @@ body {
       -ms-flex-direction: column;
           flex-direction: column;
 }
-.brand-page__inner--default[data-v-2413336b] {
+.brand-page__inner--default[data-v-a68b910c] {
   position: relative;
   z-index: 10;
   display: -webkit-box;
@@ -7578,16 +7578,16 @@ body {
       -ms-flex-direction: column;
           flex-direction: column;
 }
-.brand-page__inner--desktop[data-v-2413336b] {
+.brand-page__inner--desktop[data-v-a68b910c] {
   min-height: 100vh;
 }
-.brand-site__header[data-v-2413336b] {
+.brand-site__header[data-v-a68b910c] {
   container-type: inline-size;
 }
-.brand-page__header[data-v-2413336b] {
+.brand-page__header[data-v-a68b910c] {
   padding-top: var(--page-padding);
 }
-.brand-page__content--default[data-v-2413336b] {
+.brand-page__content--default[data-v-a68b910c] {
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 2.5rem;
@@ -7604,7 +7604,7 @@ body {
           flex-direction: column;
   max-width: var(--page-max-width);
 }
-.brand-page__content--desktop[data-v-2413336b] {
+.brand-page__content--desktop[data-v-a68b910c] {
   margin-left: auto;
   margin-right: auto;
   display: -webkit-box;
@@ -7620,15 +7620,15 @@ body {
           flex-direction: column;
   max-width: 100%;
 }
-.brand-page__content--inner[data-v-2413336b] {
+.brand-page__content--inner[data-v-a68b910c] {
   padding-left: var(--page-padding);
   padding-right: var(--page-padding);
 }
-.brand-page__content--inner--brandsite[data-v-2413336b] {
+.brand-page__content--inner--brandsite[data-v-a68b910c] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
 }
-.brand-page__content--outline-selected[data-v-2413336b] {
+.brand-page__content--outline-selected[data-v-a68b910c] {
   position: relative;
   z-index: 10;
   outline-color: #F7768C;
@@ -7636,20 +7636,20 @@ body {
   outline-style: dashed;
   outline-offset: -0.25rem;
 }
-.brand-page__content--outline-footer-selected[data-v-2413336b] {
+.brand-page__content--outline-footer-selected[data-v-a68b910c] {
   outline-color: #f7768c;
   outline-width: 0.2rem;
   outline-style: dashed;
   outline-offset: -0.25rem;
 }
 @media (max-width: 640px) {
-.brand-page__content--inner--full-width[data-v-2413336b] {
+.brand-page__content--inner--full-width[data-v-a68b910c] {
     padding-left: 0;
     padding-right: 0;
 }
 }
 @media (min-width: 640px) {
-.brand-page__content--inner--full-width[data-v-2413336b] {
+.brand-page__content--inner--full-width[data-v-a68b910c] {
     padding-left: var(--page-padding);
     padding-right: var(--page-padding);
 }

package/lib/src/css/library.brand-page-designCom.min.css

@@ -7237,14 +7237,14 @@ body {
   line-height: 1.5;
 }
 
-.brand-page-root[data-v-2413336b] {
+.brand-page-root[data-v-a68b910c] {
   height: 100%;
 }
-.sortable[data-v-2413336b] {
+.sortable[data-v-a68b910c] {
   outline-color: #b2bdfb;
   outline-width: 0.2rem;
 }
-.brand-page[data-v-2413336b] {
+.brand-page[data-v-a68b910c] {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   display: -webkit-box;
@@ -7256,7 +7256,7 @@ body {
       -ms-flex-direction: column;
           flex-direction: column;
 }
-.brand-page__inner--default[data-v-2413336b] {
+.brand-page__inner--default[data-v-a68b910c] {
   position: relative;
   z-index: 10;
   display: -webkit-box;
@@ -7268,16 +7268,16 @@ body {
       -ms-flex-direction: column;
           flex-direction: column;
 }
-.brand-page__inner--desktop[data-v-2413336b] {
+.brand-page__inner--desktop[data-v-a68b910c] {
   min-height: 100vh;
 }
-.brand-site__header[data-v-2413336b] {
+.brand-site__header[data-v-a68b910c] {
   container-type: inline-size;
 }
-.brand-page__header[data-v-2413336b] {
+.brand-page__header[data-v-a68b910c] {
   padding-top: var(--page-padding);
 }
-.brand-page__content--default[data-v-2413336b] {
+.brand-page__content--default[data-v-a68b910c] {
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 2.5rem;
@@ -7294,7 +7294,7 @@ body {
           flex-direction: column;
   max-width: var(--page-max-width);
 }
-.brand-page__content--desktop[data-v-2413336b] {
+.brand-page__content--desktop[data-v-a68b910c] {
   margin-left: auto;
   margin-right: auto;
   display: -webkit-box;
@@ -7310,15 +7310,15 @@ body {
           flex-direction: column;
   max-width: 100%;
 }
-.brand-page__content--inner[data-v-2413336b] {
+.brand-page__content--inner[data-v-a68b910c] {
   padding-left: var(--page-padding);
   padding-right: var(--page-padding);
 }
-.brand-page__content--inner--brandsite[data-v-2413336b] {
+.brand-page__content--inner--brandsite[data-v-a68b910c] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
 }
-.brand-page__content--outline-selected[data-v-2413336b] {
+.brand-page__content--outline-selected[data-v-a68b910c] {
   position: relative;
   z-index: 10;
   outline-color: #b2bdfb;
@@ -7326,20 +7326,20 @@ body {
   outline-style: dashed;
   outline-offset: -0.25rem;
 }
-.brand-page__content--outline-footer-selected[data-v-2413336b] {
+.brand-page__content--outline-footer-selected[data-v-a68b910c] {
   outline-color: #f7768c;
   outline-width: 0.2rem;
   outline-style: dashed;
   outline-offset: -0.25rem;
 }
 @media (max-width: 640px) {
-.brand-page__content--inner--full-width[data-v-2413336b] {
+.brand-page__content--inner--full-width[data-v-a68b910c] {
     padding-left: 0;
     padding-right: 0;
 }
 }
 @media (min-width: 640px) {
-.brand-page__content--inner--full-width[data-v-2413336b] {
+.brand-page__content--inner--full-width[data-v-a68b910c] {
     padding-left: var(--page-padding);
     padding-right: var(--page-padding);
 }

package/lib/src/css/library.brand-page-preview.min.css

@@ -6983,14 +6983,14 @@ to {
   line-height: 1.5;
 }
 
-.bp .brand-page-root[data-v-2413336b] {
+.bp .brand-page-root[data-v-a68b910c] {
   height: 100%;
 }
-.bp .sortable[data-v-2413336b] {
+.bp .sortable[data-v-a68b910c] {
   outline-color: #F7768C;
   outline-width: 0.2rem;
 }
-.bp .brand-page[data-v-2413336b] {
+.bp .brand-page[data-v-a68b910c] {
   -webkit-box-sizing: border-box;
           box-sizing: border-box;
   display: -webkit-box;
@@ -7002,7 +7002,7 @@ to {
       -ms-flex-direction: column;
           flex-direction: column;
 }
-.bp .brand-page__inner--default[data-v-2413336b] {
+.bp .brand-page__inner--default[data-v-a68b910c] {
   position: relative;
   z-index: 10;
   display: -webkit-box;
@@ -7014,16 +7014,16 @@ to {
       -ms-flex-direction: column;
           flex-direction: column;
 }
-.bp .brand-page__inner--desktop[data-v-2413336b] {
+.bp .brand-page__inner--desktop[data-v-a68b910c] {
   min-height: 100vh;
 }
-.bp .brand-site__header[data-v-2413336b] {
+.bp .brand-site__header[data-v-a68b910c] {
   container-type: inline-size;
 }
-.bp .brand-page__header[data-v-2413336b] {
+.bp .brand-page__header[data-v-a68b910c] {
   padding-top: var(--page-padding);
 }
-.bp .brand-page__content--default[data-v-2413336b] {
+.bp .brand-page__content--default[data-v-a68b910c] {
   margin-left: auto;
   margin-right: auto;
   margin-bottom: 2.5rem;
@@ -7040,7 +7040,7 @@ to {
           flex-direction: column;
   max-width: var(--page-max-width);
 }
-.bp .brand-page__content--desktop[data-v-2413336b] {
+.bp .brand-page__content--desktop[data-v-a68b910c] {
   margin-left: auto;
   margin-right: auto;
   display: -webkit-box;
@@ -7056,15 +7056,15 @@ to {
           flex-direction: column;
   max-width: 100%;
 }
-.bp .brand-page__content--inner[data-v-2413336b] {
+.bp .brand-page__content--inner[data-v-a68b910c] {
   padding-left: var(--page-padding);
   padding-right: var(--page-padding);
 }
-.bp .brand-page__content--inner--brandsite[data-v-2413336b] {
+.bp .brand-page__content--inner--brandsite[data-v-a68b910c] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
 }
-.bp .brand-page__content--outline-selected[data-v-2413336b] {
+.bp .brand-page__content--outline-selected[data-v-a68b910c] {
   position: relative;
   z-index: 10;
   outline-color: #F7768C;
@@ -7072,20 +7072,20 @@ to {
   outline-style: dashed;
   outline-offset: -0.25rem;
 }
-.bp .brand-page__content--outline-footer-selected[data-v-2413336b] {
+.bp .brand-page__content--outline-footer-selected[data-v-a68b910c] {
   outline-color: #f7768c;
   outline-width: 0.2rem;
   outline-style: dashed;
   outline-offset: -0.25rem;
 }
 @media (max-width: 640px) {
-.bp .brand-page__content--inner--full-width[data-v-2413336b] {
+.bp .brand-page__content--inner--full-width[data-v-a68b910c] {
     padding-left: 0;
     padding-right: 0;
 }
 }
 @media (min-width: 640px) {
-.bp .brand-page__content--inner--full-width[data-v-2413336b] {
+.bp .brand-page__content--inner--full-width[data-v-a68b910c] {
     padding-left: var(--page-padding);
     padding-right: var(--page-padding);
 }