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

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

@@ -45,9 +45,7 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
         required: false;
         default: undefined;
     };
-}>, {
-    fluidText: string;
-}, {
+}>, {}, {
     isSideMenuOpen: boolean;
     styles: {};
 }, {

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

@@ -1,7 +1,6 @@
 import { defineComponent } from 'vue';
 import { DEFAULT_FONT_FAMILY_KEY, FALLBACK_FONT_FAMILIES, FONT_FAMILY_CONFIGS, } from '../../constants';
 import { getSlugFromContext } from '../../utils';
-import { BRAND_PAGE_TYPES } from '../../models';
 export default defineComponent({
     props: {
         context: {
@@ -55,15 +54,6 @@ export default defineComponent({
         'page-header-container-click',
         'page-footer-container-click',
     ],
-    setup(props) {
-        return {
-            fluidText: JSON.stringify({
-                default: props.context.brandPageType === BRAND_PAGE_TYPES.brandSite
-                    ? 1200
-                    : 768,
-            }),
-        };
-    },
     data() {
         return {
             isSideMenuOpen: false,
@@ -117,7 +107,6 @@ export default defineComponent({
                     styles.backgroundColor = styles.background;
                     styles.backgroundImage = `url(${this.viewModel?.styles?.backgroundStyles?.backgroundImageUrl})`;
                     if (!this.context.isTemplate) {
-                        styles.position = 'fixed';
                         styles.width = '100%';
                     }
                     delete styles.background;

package/lib/src/brand-page/components/text-wrapper/TextWrapper.mixin.d.ts

@@ -0,0 +1,44 @@
+import type { PropType } from 'vue';
+declare const _default: import("vue").DefineComponent<import("vue").ExtractPropTypes<{
+    textStyle: {
+        type: PropType<BrandPageCssStyle>;
+        required: false;
+        default: undefined;
+    };
+    text: {
+        type: StringConstructor;
+        required: true;
+    };
+    element: {
+        type: StringConstructor;
+        required: false;
+        default: () => string;
+    };
+}>, {}, {
+    isCollapsed: boolean;
+}, {
+    textStyles(): {
+        backgroundColor: any;
+    };
+    style(): any;
+    padding(): "" | "tw-py-2 tw-px-4";
+}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
+    textStyle: {
+        type: PropType<BrandPageCssStyle>;
+        required: false;
+        default: undefined;
+    };
+    text: {
+        type: StringConstructor;
+        required: true;
+    };
+    element: {
+        type: StringConstructor;
+        required: false;
+        default: () => string;
+    };
+}>> & Readonly<{}>, {
+    textStyle: BrandPageCssStyle;
+    element: string;
+}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
+export default _default;

package/lib/src/brand-page/components/text-wrapper/TextWrapper.mixin.js

@@ -0,0 +1,38 @@
+import { defineComponent } from 'vue';
+export default defineComponent({
+    props: {
+        textStyle: {
+            type: Object,
+            required: false,
+            default: undefined,
+        },
+        text: {
+            type: String,
+            required: true,
+        },
+        element: {
+            type: String,
+            required: false,
+            default: () => 'p',
+        },
+    },
+    data: () => ({
+        isCollapsed: false,
+    }),
+    computed: {
+        textStyles() {
+            return {
+                backgroundColor: this.textStyle.backgroundColor,
+            };
+        },
+        style() {
+            const { backgroundColor, ...textStyle } = this.textStyle;
+            return textStyle;
+        },
+        padding() {
+            return this.textStyle.backgroundColor ? 'tw-py-2 tw-px-4' : '';
+        },
+    },
+    watch: {},
+    methods: {},
+});

package/lib/src/brand-page/models/index.d.ts

@@ -524,6 +524,3 @@ export interface PrimaryCta {
     title: string;
     description: string;
 }
-export interface FluidTextData {
-    default: number;
-}

package/lib/src/brand-page/utils/migration.util.js

@@ -1,7 +1,6 @@
 import {} from '../models';
 import { migration01 } from './migration/migration-01';
 import { migration02 } from './migration/migration-02';
-import { migration03 } from './migration/migration-03';
 const MIGRATION_TABLE = [
     {
         version: 1,
@@ -11,10 +10,6 @@ const MIGRATION_TABLE = [
         version: 2,
         migrateFn: migration02,
     },
-    {
-        version: 3,
-        migrateFn: migration03,
-    },
 ];
 export const GetLatestModelVersion = () => Math.max(...MIGRATION_TABLE.map((x) => x.version));
 export const migrateBrandPageModel = (brandPageModel, options) => {

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/brand-page-maker/BrandPageMaker.stories.js

@@ -138,42 +138,7 @@ export const SampleBanner = () => {
     const pinia = setupStoryPinia();
     const brandPageMakerStore = useBrandPageMakerStore();
     const bannerContent = createInitialBannerSectionContent();
-    bannerContent.title = 'LAUNCHING SOON';
-    bannerContent.description = 'This Is Going To Be Epic';
-    bannerContent.buttonText = 'CONTACT US';
-    bannerContent.titleStyle.textStyleType = undefined;
-    bannerContent.titleStyle.fontSize = '6.25em';
-    bannerContent.titleStyle.fontFamily = 'Ubuntu';
-    bannerContent.titleStyle.lineHeight = '1';
-    bannerContent.titleStyle.textAlign = 'left';
-    bannerContent.displayStyle = 'left-aligned';
-    bannerContent.descriptionStyle.textStyleType = undefined;
-    bannerContent.descriptionStyle.fontFamily = 'Work Sans';
-    bannerContent.descriptionStyle.fontSize = '2.6875em';
-    bannerContent.descriptionStyle.textAlign = 'left';
-    bannerContent.buttonTextStyle.textStyleType = undefined;
-    bannerContent.buttonTextStyle.fontFamily = 'Ubuntu';
-    bannerContent.buttonTextStyle.fontSize = '1.5em';
-    bannerContent.buttonTextStyle.textAlign = 'left';
-    console.log('bannerContent', bannerContent);
-    const bannerContent2 = createInitialBannerSectionContent();
-    bannerContent2.title = 'LAUNCHING SOON';
-    bannerContent2.description = 'This Is Going To Be Epic2';
-    bannerContent2.buttonText = 'CONTACT US';
-    bannerContent2.titleStyle.textStyleType = undefined;
-    bannerContent2.titleStyle.fontSize = '6.25em';
-    bannerContent2.titleStyle.fontFamily = 'Ubuntu';
-    bannerContent2.titleStyle.lineHeight = '1';
-    bannerContent2.titleStyle.textAlign = 'left';
-    bannerContent2.displayStyle = 'left-aligned';
-    bannerContent2.descriptionStyle.textStyleType = undefined;
-    bannerContent2.descriptionStyle.fontFamily = 'Work Sans';
-    bannerContent2.descriptionStyle.fontSize = '2.6875em';
-    bannerContent2.descriptionStyle.textAlign = 'left';
-    bannerContent2.buttonTextStyle.textStyleType = undefined;
-    bannerContent2.buttonTextStyle.fontFamily = 'Ubuntu';
-    bannerContent2.buttonTextStyle.fontSize = '1.5em';
-    bannerContent2.buttonTextStyle.textAlign = 'left';
+    bannerContent.description = 'Lorem ipsum dolor sit amet';
     brandPageMakerStore.setViewport({
         viewport: VIEWPORTS.desktop,
     });
@@ -190,7 +155,7 @@ export const SampleBanner = () => {
                             {
                                 title: 'Home',
                                 slug: 'home',
-                                contents: [bannerContent, bannerContent2],
+                                contents: [bannerContent],
                             },
                         ],
                         brandPageType: BRAND_PAGE_TYPES.brandSite,

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

@@ -834,7 +834,6 @@ declare const _default: import("vue").DefineComponent<{}, {
     isDraggableEnabled(): boolean;
     isItemSelected(): (itemIdx: any) => boolean;
 }, {
-    dispatchViewPortChangeEvent(): void;
     onDraggingStart(): void;
     onDraggingEnd(ev: any): void;
     onOverlayClick(item: ContentViewModel): void;
@@ -888,9 +887,7 @@ declare const _default: import("vue").DefineComponent<{}, {
         required: false;
         default: undefined;
     };
-}>, {
-    fluidText: string;
-}, {
+}>, {}, {
     isSideMenuOpen: boolean;
     styles: {};
 }, {

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

@@ -73,13 +73,7 @@ export default defineComponent({
             };
         },
     },
-    mounted() {
-        this.dispatchViewPortChangeEvent();
-    },
     watch: {
-        viewport() {
-            this.dispatchViewPortChangeEvent();
-        },
         selectedItemId(itemId) {
             this.scrollToContentItemByItemId(itemId);
         },
@@ -99,11 +93,6 @@ export default defineComponent({
         },
     },
     methods: {
-        dispatchViewPortChangeEvent() {
-            window.dispatchEvent(new CustomEvent('editor:viewport', {
-                detail: { viewport: this.viewport },
-            }));
-        },
         onDraggingStart() {
             this.isDraggingContent = true;
             // Unable to set selected item id here because it will cause the draggable to be stuck

package/lib/src/brand-page-maker/convertors/text-size-value.convertor.js

@@ -1,13 +1,13 @@
 import { DEFAULT_FONT_SIZE } from '../../brand-page/constants/';
-import { pxToEm, emToPx } from '../utils/text.util';
+import { pxToRem, remToPx } from '../utils/text.util';
 export const textSizeValueConvertor = {
     convertBackToMultipleValues: false,
     convert(value) {
-        return (value.fontSize ? emToPx(value.fontSize) : DEFAULT_FONT_SIZE).toString();
+        return (value.fontSize ? remToPx(value.fontSize) : DEFAULT_FONT_SIZE).toString();
     },
     convertBack(valuePx) {
         return {
-            fontSize: pxToEm(valuePx),
+            fontSize: pxToRem(valuePx),
         };
     },
 };

package/lib/src/brand-page-maker/utils/text.util.d.ts

@@ -1,2 +1,2 @@
-export declare const pxToEm: (px: string) => string;
-export declare const emToPx: (rem: string) => string;
+export declare const pxToRem: (px: string) => string;
+export declare const remToPx: (rem: string) => string;

package/lib/src/brand-page-maker/utils/text.util.js

@@ -1,8 +1,8 @@
-export const pxToEm = (px) => {
+export const pxToRem = (px) => {
     const value = parseFloat(px) / 16;
-    return `${value}em`;
+    return `${value}rem`;
 };
-export const emToPx = (rem) => {
+export const remToPx = (rem) => {
     const value = parseFloat(rem) * 16;
     return `${value}`;
 };

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

@@ -5547,13 +5547,13 @@ to {
   overflow-wrap: break-word;
 }
 
-.c-text-container[data-v-0ebffa99] {
+.c-text-container[data-v-f2a561dc] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
   padding-left: var(--page-padding);
   padding-right: var(--page-padding);
 }
-.device--mobile .grid-container[data-v-0ebffa99] {
+.device--mobile .grid-container[data-v-f2a561dc] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -5563,7 +5563,7 @@ to {
           flex-direction: column;
 }
 @media (max-width: 767px) {
-.grid-container[data-v-0ebffa99] {
+.grid-container[data-v-f2a561dc] {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
@@ -5574,7 +5574,7 @@ to {
 }
 }
 @media (min-width: 767px) {
-.grid-container[data-v-0ebffa99] {
+.grid-container[data-v-f2a561dc] {
     display: grid;
 }
 }
@@ -7219,14 +7219,14 @@ body {
   line-height: 1.5;
 }
 
-.brand-page-root[data-v-663dca38] {
+.brand-page-root[data-v-2413336b] {
   height: 100%;
 }
-.sortable[data-v-663dca38] {
+.sortable[data-v-2413336b] {
   outline-color: #F7768C;
   outline-width: 0.2rem;
 }
-.brand-page[data-v-663dca38] {
+.brand-page[data-v-2413336b] {
   -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-663dca38] {
+.brand-page__inner--default[data-v-2413336b] {
   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-663dca38] {
+.brand-page__inner--desktop[data-v-2413336b] {
   min-height: 100vh;
 }
-.brand-site__header[data-v-663dca38] {
+.brand-site__header[data-v-2413336b] {
   container-type: inline-size;
 }
-.brand-page__header[data-v-663dca38] {
+.brand-page__header[data-v-2413336b] {
   padding-top: var(--page-padding);
 }
-.brand-page__content--default[data-v-663dca38] {
+.brand-page__content--default[data-v-2413336b] {
   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-663dca38] {
+.brand-page__content--desktop[data-v-2413336b] {
   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-663dca38] {
+.brand-page__content--inner[data-v-2413336b] {
   padding-left: var(--page-padding);
   padding-right: var(--page-padding);
 }
-.brand-page__content--inner--brandsite[data-v-663dca38] {
+.brand-page__content--inner--brandsite[data-v-2413336b] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
 }
-.brand-page__content--outline-selected[data-v-663dca38] {
+.brand-page__content--outline-selected[data-v-2413336b] {
   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-663dca38] {
+.brand-page__content--outline-footer-selected[data-v-2413336b] {
   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-663dca38] {
+.brand-page__content--inner--full-width[data-v-2413336b] {
     padding-left: 0;
     padding-right: 0;
 }
 }
 @media (min-width: 640px) {
-.brand-page__content--inner--full-width[data-v-663dca38] {
+.brand-page__content--inner--full-width[data-v-2413336b] {
     padding-left: var(--page-padding);
     padding-right: var(--page-padding);
 }

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

@@ -5875,13 +5875,13 @@ to {
   overflow-wrap: break-word;
 }
 
-.c-text-container[data-v-0ebffa99] {
+.c-text-container[data-v-f2a561dc] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
   padding-left: var(--page-padding);
   padding-right: var(--page-padding);
 }
-.device--mobile .grid-container[data-v-0ebffa99] {
+.device--mobile .grid-container[data-v-f2a561dc] {
   display: -webkit-box;
   display: -ms-flexbox;
   display: flex;
@@ -5891,7 +5891,7 @@ to {
           flex-direction: column;
 }
 @media (max-width: 767px) {
-.grid-container[data-v-0ebffa99] {
+.grid-container[data-v-f2a561dc] {
     display: -webkit-box;
     display: -ms-flexbox;
     display: flex;
@@ -5902,7 +5902,7 @@ to {
 }
 }
 @media (min-width: 767px) {
-.grid-container[data-v-0ebffa99] {
+.grid-container[data-v-f2a561dc] {
     display: grid;
 }
 }
@@ -7547,14 +7547,14 @@ body {
   line-height: 1.5;
 }
 
-.brand-page-root[data-v-663dca38] {
+.brand-page-root[data-v-2413336b] {
   height: 100%;
 }
-.sortable[data-v-663dca38] {
+.sortable[data-v-2413336b] {
   outline-color: #F7768C;
   outline-width: 0.2rem;
 }
-.brand-page[data-v-663dca38] {
+.brand-page[data-v-2413336b] {
   -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-663dca38] {
+.brand-page__inner--default[data-v-2413336b] {
   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-663dca38] {
+.brand-page__inner--desktop[data-v-2413336b] {
   min-height: 100vh;
 }
-.brand-site__header[data-v-663dca38] {
+.brand-site__header[data-v-2413336b] {
   container-type: inline-size;
 }
-.brand-page__header[data-v-663dca38] {
+.brand-page__header[data-v-2413336b] {
   padding-top: var(--page-padding);
 }
-.brand-page__content--default[data-v-663dca38] {
+.brand-page__content--default[data-v-2413336b] {
   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-663dca38] {
+.brand-page__content--desktop[data-v-2413336b] {
   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-663dca38] {
+.brand-page__content--inner[data-v-2413336b] {
   padding-left: var(--page-padding);
   padding-right: var(--page-padding);
 }
-.brand-page__content--inner--brandsite[data-v-663dca38] {
+.brand-page__content--inner--brandsite[data-v-2413336b] {
   max-width: var(--brandsite-max-width);
   margin: 0 auto;
 }
-.brand-page__content--outline-selected[data-v-663dca38] {
+.brand-page__content--outline-selected[data-v-2413336b] {
   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-663dca38] {
+.brand-page__content--outline-footer-selected[data-v-2413336b] {
   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-663dca38] {
+.brand-page__content--inner--full-width[data-v-2413336b] {
     padding-left: 0;
     padding-right: 0;
 }
 }
 @media (min-width: 640px) {
-.brand-page__content--inner--full-width[data-v-663dca38] {
+.brand-page__content--inner--full-width[data-v-2413336b] {
     padding-left: var(--page-padding);
     padding-right: var(--page-padding);
 }