@designcrowd/library.brand-page 6.0.19-ast-btns-5 → 6.0.19
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/lib/src/{CreatedOnBrandCrowd-de-de-BtL6m52s.js → CreatedOnBrandCrowd-de-de-DCwwdYPj.js} +1 -1
- package/lib/src/{CreatedOnBrandCrowd-en-us-BSLnZqDA.js → CreatedOnBrandCrowd-en-us-DTmZeDQ1.js} +1 -1
- package/lib/src/{CreatedOnBrandCrowd-es-es-DJisqEzN.js → CreatedOnBrandCrowd-es-es-Dbrz6TXv.js} +1 -1
- package/lib/src/{CreatedOnBrandCrowd-fr-fr-Br0QFIMc.js → CreatedOnBrandCrowd-fr-ca-DLQhgn8T.js} +1 -1
- package/lib/src/{CreatedOnBrandCrowd-fr-ca-Br0QFIMc.js → CreatedOnBrandCrowd-fr-fr-DLQhgn8T.js} +1 -1
- package/lib/src/{CreatedOnBrandCrowd-pt-pt-DW9cK-UT.js → CreatedOnBrandCrowd-pt-br-yAzzD2ik.js} +1 -1
- package/lib/src/{CreatedOnBrandCrowd-pt-br-DW9cK-UT.js → CreatedOnBrandCrowd-pt-pt-yAzzD2ik.js} +1 -1
- package/lib/src/{CreatedOnDcom-de-de-C5QJae6P.js → CreatedOnDcom-de-de-CNmNNE5o.js} +1 -1
- package/lib/src/{CreatedOnDcom-en-us-9AOMzc5W.js → CreatedOnDcom-en-us-BUmLFlS_.js} +1 -1
- package/lib/src/{CreatedOnDcom-es-es-BDi3kJNO.js → CreatedOnDcom-es-es-DfygM_0q.js} +1 -1
- package/lib/src/{CreatedOnDcom-fr-ca-BqaQPaNY.js → CreatedOnDcom-fr-ca-DIEft8xE.js} +1 -1
- package/lib/src/{CreatedOnDcom-fr-fr-B6zLCUL7.js → CreatedOnDcom-fr-fr-Cn3jWG2n.js} +1 -1
- package/lib/src/{CreatedOnDcom-pt-br-DxPwUT6p.js → CreatedOnDcom-pt-br-DXhgGwEh.js} +1 -1
- package/lib/src/{CreatedOnDcom-pt-pt-CqYO0kHy.js → CreatedOnDcom-pt-pt-BvE9ckw1.js} +1 -1
- package/lib/src/brand-page/components/collapsible/Collapsible.mixin.d.ts +0 -11
- package/lib/src/brand-page/components/collapsible/Collapsible.mixin.js +1 -13
- package/lib/src/brand-page/components/contact-form/ContactForm.mixin.d.ts +0 -1
- package/lib/src/brand-page/components/contact-form/ContactForm.mixin.js +8 -14
- package/lib/src/brand-page/components/mailing-list/MailingList.mixin.js +0 -5
- package/lib/src/brand-page/components/media/Media.mixin.d.ts +10 -1
- package/lib/src/brand-page/components/media/Media.mixin.js +13 -0
- package/lib/src/brand-page/components/page/Page.mixin.d.ts +5 -0
- package/lib/src/brand-page/components/page/Page.mixin.js +8 -1
- package/lib/src/brand-page/components/payment/Payment.mixin.js +0 -5
- package/lib/src/brand-page/models/index.d.ts +34 -27
- package/lib/src/brand-page/models/payment.model.d.ts +0 -2
- package/lib/src/brand-page/utils/button.util.d.ts +0 -5
- package/lib/src/brand-page/utils/button.util.js +0 -13
- package/lib/src/brand-page/utils/index.d.ts +1 -0
- package/lib/src/brand-page/utils/index.js +1 -0
- package/lib/src/brand-page/utils/migration/migration-19.js +60 -29
- package/lib/src/brand-page/utils/migration.util.js +5 -9
- package/lib/src/brand-page/utils/page-heading.util.d.ts +13 -0
- package/lib/src/brand-page/utils/page-heading.util.js +24 -0
- package/lib/src/brand-page/utils/text.util.d.ts +1 -1
- package/lib/src/brand-page/utils/text.util.js +32 -0
- package/lib/src/brand-page/utils/vcard.util.js +4 -4
- package/lib/src/brand-page/utils/view-model.util.d.ts +1 -0
- package/lib/src/brand-page/utils/view-model.util.js +68 -21
- package/lib/src/brand-page/view-models.d.ts +3 -3
- package/lib/src/brand-page-maker/__fixtures__/complex-rte.fixture.d.ts +22 -0
- package/lib/src/brand-page-maker/__fixtures__/complex-rte.fixture.js +22 -0
- package/lib/src/brand-page-maker/assessors/contact-form-visibility.assessor.d.ts +0 -1
- package/lib/src/brand-page-maker/assessors/contact-form-visibility.assessor.js +0 -6
- package/lib/src/brand-page-maker/components/brandpage-maker-page/BrandPageMakerPage.mixin.d.ts +1 -0
- package/lib/src/brand-page-maker/composables/rich-text-editor/extensions/FontFamily.d.ts +14 -0
- package/lib/src/brand-page-maker/composables/rich-text-editor/extensions/FontFamily.js +39 -0
- package/lib/src/brand-page-maker/composables/rich-text-editor/getRteExtensions.d.ts +28 -0
- package/lib/src/brand-page-maker/composables/rich-text-editor/getRteExtensions.js +66 -0
- package/lib/src/brand-page-maker/composables/rich-text-editor/useRichTextEditor.js +21 -100
- package/lib/src/brand-page-maker/constants/config-settings-constant.js +3 -40
- package/lib/src/brand-page-maker/default-getters/index.d.ts +0 -1
- package/lib/src/brand-page-maker/default-getters/index.js +0 -1
- package/lib/src/brand-page-maker/models/button-styles-config.js +3 -15
- package/lib/src/brand-page-maker/models/content-settings-configs.d.ts +1 -1
- package/lib/src/brand-page-maker/models/content-settings.js +3 -9
- package/lib/src/brand-page-maker/utils/index.d.ts +2 -0
- package/lib/src/brand-page-maker/utils/index.js +2 -0
- package/lib/src/brand-page-maker/utils/rich-text-editor.util.d.ts +19 -5
- package/lib/src/brand-page-maker/utils/rich-text-editor.util.js +35 -5
- package/lib/src/brand-page-maker/utils/rte-render.util.d.ts +33 -0
- package/lib/src/brand-page-maker/utils/rte-render.util.js +50 -0
- package/lib/src/brand-page-maker/utils/rte-sanitize.util.d.ts +6 -0
- package/lib/src/brand-page-maker/utils/rte-sanitize.util.js +158 -0
- package/lib/src/brand-page-maker/utils/rte-serializer.d.ts +5 -0
- package/lib/src/brand-page-maker/utils/rte-serializer.js +112 -0
- package/lib/src/brand-page-maker/validators/field.validator.js +10 -2
- package/lib/src/css/library.brand-page-brandCrowd.min.css +189 -217
- package/lib/src/css/library.brand-page-brandPage.min.css +189 -217
- package/lib/src/css/library.brand-page-designCom.min.css +189 -217
- package/lib/src/css/library.brand-page-preview.min.css +189 -217
- package/lib/src/index.d.ts +1 -0
- package/lib/src/index.mjs +143 -138
- package/lib/src/{lib-C-uekd4C.js → lib-Bm-fYap1.js} +43780 -43825
- package/lib/src/lib.js +2 -0
- package/lib/src/metadata-builder/builders/update-content-text-builder.js +20 -15
- package/lib/src/metadata-builder/builders/update-content-text-style-builder.js +8 -3
- package/lib/src/metadata-builder/helpers/rte.helpers.d.ts +2 -2
- package/lib/src/metadata-builder/helpers/rte.helpers.js +6 -3
- package/lib/src/shared/content-settings/components/GenericTextInput.mixin.js +14 -1
- package/lib/src/shared/content-settings/components/content-settings-item/ContentSettingsItemField.mixin.js +12 -8
- package/lib/src/utils/minify-brand-page-metadata.js +4 -1
- package/package.json +2 -2
- package/src/brand-page/components/about-section/AboutSection.vue +1 -1
- package/src/brand-page/components/about-section/AboutSection.vue.test.ts +11 -0
- package/src/brand-page/components/banner-section/BannerSection.vue +5 -5
- package/src/brand-page/components/booking-section/BookingSection.vue +1 -1
- package/src/brand-page/components/button/ButtonStyleWrapper.vue +44 -112
- package/src/brand-page/components/collapsible/Collapsible.mixin.ts +1 -14
- package/src/brand-page/components/contact-form/ContactForm.mixin.test.ts +0 -18
- package/src/brand-page/components/contact-form/ContactForm.mixin.ts +8 -17
- package/src/brand-page/components/contact-form/ContactForm.vue +39 -100
- package/src/brand-page/components/mailing-list/MailingList.mixin.ts +0 -6
- package/src/brand-page/components/mailing-list/MailingList.vue +11 -19
- package/src/brand-page/components/media/Media.mixin.ts +13 -0
- package/src/brand-page/components/media/Media.test.ts +65 -0
- package/src/brand-page/components/media/Media.vue +1 -1
- package/src/brand-page/components/page/Page.mixin.ts +8 -1
- package/src/brand-page/components/page/Page.vue +8 -0
- package/src/brand-page/components/page/Page.vue.test.ts +142 -0
- package/src/brand-page/components/payment/Payment.mixin.ts +0 -6
- package/src/brand-page/components/payment/Payment.vue +25 -44
- package/src/brand-page/components/payment/RequestPaymentStripe.vue +22 -26
- package/src/brand-page/components/profile/Profile.vue +1 -1
- package/src/brand-page/components/shop/Shop.vue +6 -15
- package/src/brand-page/components/social-links/SocialLinks.vue +1 -1
- package/src/brand-page/components/testimonial-section/TestimonialSection.vue +1 -1
- package/src/brand-page/components/text-media-section/TextMediaSection.vue +1 -1
- package/src/brand-page/components/text-wrapper/TextWrapper.vue +23 -7
- package/src/brand-page/models/index.ts +35 -27
- package/src/brand-page/models/payment.model.ts +0 -2
- package/src/brand-page/utils/__snapshots__/migration.util.test.ts.snap +3 -3
- package/src/brand-page/utils/button.util.ts +0 -17
- package/src/brand-page/utils/image.util.test.ts +25 -0
- package/src/brand-page/utils/index.ts +1 -0
- package/src/brand-page/utils/migration/migration-19.test.ts +47 -90
- package/src/brand-page/utils/migration/migration-19.ts +61 -34
- package/src/brand-page/utils/migration.util.ts +5 -10
- package/src/brand-page/utils/page-heading.util.test.ts +116 -0
- package/src/brand-page/utils/page-heading.util.ts +33 -0
- package/src/brand-page/utils/style.util.test.ts +51 -0
- package/src/brand-page/utils/text.util.test.ts +47 -0
- package/src/brand-page/utils/text.util.ts +43 -4
- package/src/brand-page/utils/vcard.util.ts +6 -4
- package/src/brand-page/utils/view-model.pageid-rte.test.ts +104 -0
- package/src/brand-page/utils/view-model.util.ts +94 -27
- package/src/brand-page/view-models.ts +3 -2
- package/src/brand-page-maker/__fixtures__/complex-rte.fixture.ts +23 -0
- package/src/brand-page-maker/assessors/contact-form-visibility.assessor.ts +0 -11
- package/src/brand-page-maker/composables/rich-text-editor/extensions/FontFamily.test.ts +52 -0
- package/src/brand-page-maker/composables/rich-text-editor/extensions/FontFamily.ts +42 -0
- package/src/brand-page-maker/composables/rich-text-editor/getRteExtensions.ts +113 -0
- package/src/brand-page-maker/composables/rich-text-editor/useRichTextEditor.ts +23 -107
- package/src/brand-page-maker/constants/config-settings-constant.ts +2 -43
- package/src/brand-page-maker/default-getters/index.ts +0 -1
- package/src/brand-page-maker/models/button-styles-config.ts +3 -15
- package/src/brand-page-maker/models/content-settings-configs.ts +1 -1
- package/src/brand-page-maker/models/content-settings.ts +3 -10
- package/src/brand-page-maker/utils/__snapshots__/rte-render-parity.test.ts.snap +200 -0
- package/src/brand-page-maker/utils/index.ts +2 -0
- package/src/brand-page-maker/utils/rich-text-editor.util.test.ts +4 -3
- package/src/brand-page-maker/utils/rich-text-editor.util.ts +50 -11
- package/src/brand-page-maker/utils/rte-features.test.ts +330 -0
- package/src/brand-page-maker/utils/rte-render-parity.test.ts +156 -0
- package/src/brand-page-maker/utils/rte-render.util.ts +77 -0
- package/src/brand-page-maker/utils/rte-sanitize-json.test.ts +158 -0
- package/src/brand-page-maker/utils/rte-sanitize.util.ts +195 -0
- package/src/brand-page-maker/utils/rte-serializer.ts +172 -0
- package/src/brand-page-maker/validators/field.validator.test.ts +55 -0
- package/src/brand-page-maker/validators/field.validator.ts +10 -2
- package/src/lib.ts +9 -0
- package/src/metadata-builder/builders/update-content-text-builder.ts +32 -18
- package/src/metadata-builder/builders/update-content-text-style-builder.ts +14 -4
- package/src/metadata-builder/helpers/rte.helpers.ts +11 -7
- package/src/shared/content-settings/components/GenericTextInput.mixin.ts +17 -1
- package/src/shared/content-settings/components/content-settings-item/ContentSettingsItemField.mixin.ts +16 -9
- package/src/shared/logo-settings/components/EditLogoSettings.vue +1 -0
- package/src/shared/style-settings/components/StyleSettings.vue +0 -1
- package/src/utils/minify-brand-page-metadata.ts +4 -1
- package/lib/src/brand-page/utils/migration/migration-20.d.ts +0 -2
- package/lib/src/brand-page/utils/migration/migration-20.js +0 -24
- package/lib/src/brand-page-maker/default-getters/contact-form-card-color.default-getter.d.ts +0 -8
- package/lib/src/brand-page-maker/default-getters/contact-form-card-color.default-getter.js +0 -16
- package/src/brand-page/components/button/ButtonStyleWrapper.vue.test.ts +0 -167
- package/src/brand-page/utils/migration/migration-20.test.ts +0 -118
- package/src/brand-page/utils/migration/migration-20.ts +0 -54
- package/src/brand-page-maker/default-getters/contact-form-card-color.default-getter.ts +0 -23
|
@@ -25,11 +25,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
25
25
|
required: false;
|
|
26
26
|
default: undefined;
|
|
27
27
|
};
|
|
28
|
-
backgroundStyle: {
|
|
29
|
-
type: PropType<BrandPageCssStyle>;
|
|
30
|
-
required: false;
|
|
31
|
-
default: undefined;
|
|
32
|
-
};
|
|
33
28
|
context: {
|
|
34
29
|
type: PropType<BrandPageContext>;
|
|
35
30
|
required: true;
|
|
@@ -66,11 +61,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
66
61
|
required: false;
|
|
67
62
|
default: undefined;
|
|
68
63
|
};
|
|
69
|
-
backgroundStyle: {
|
|
70
|
-
type: PropType<BrandPageCssStyle>;
|
|
71
|
-
required: false;
|
|
72
|
-
default: undefined;
|
|
73
|
-
};
|
|
74
64
|
context: {
|
|
75
65
|
type: PropType<BrandPageContext>;
|
|
76
66
|
required: true;
|
|
@@ -78,7 +68,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
78
68
|
}>> & Readonly<{}>, {
|
|
79
69
|
titleStyle: BrandPageCssStyle;
|
|
80
70
|
cardStyle: BrandPageCssStyle;
|
|
81
|
-
backgroundStyle: BrandPageCssStyle;
|
|
82
71
|
buttonStyles: BrandPageCssStyle;
|
|
83
72
|
canCollapse: boolean;
|
|
84
73
|
}, {}, {}, {}, string, import("vue").ComponentProvideOptions, true, {}, any>;
|
|
@@ -25,11 +25,6 @@ export default defineComponent({
|
|
|
25
25
|
required: false,
|
|
26
26
|
default: undefined,
|
|
27
27
|
},
|
|
28
|
-
backgroundStyle: {
|
|
29
|
-
type: Object,
|
|
30
|
-
required: false,
|
|
31
|
-
default: undefined,
|
|
32
|
-
},
|
|
33
28
|
context: {
|
|
34
29
|
type: Object,
|
|
35
30
|
required: true,
|
|
@@ -45,16 +40,9 @@ export default defineComponent({
|
|
|
45
40
|
if (borderRadius === '9999px') {
|
|
46
41
|
containerStyle.borderRadius = '26px';
|
|
47
42
|
}
|
|
48
|
-
|
|
49
|
-
// (BP/BC contact-form card colour defaults to the button fill).
|
|
50
|
-
if (this.cardStyle?.backgroundColor) {
|
|
43
|
+
if (this.cardStyle) {
|
|
51
44
|
containerStyle.backgroundColor = this.cardStyle.backgroundColor;
|
|
52
45
|
}
|
|
53
|
-
// Own background colour decouples the container from the button fill (BP-5800).
|
|
54
|
-
// Guarded on backgroundColor so an empty {} never blanks the container.
|
|
55
|
-
if (this.backgroundStyle?.backgroundColor) {
|
|
56
|
-
containerStyle.backgroundColor = this.backgroundStyle.backgroundColor;
|
|
57
|
-
}
|
|
58
46
|
return containerStyle;
|
|
59
47
|
},
|
|
60
48
|
arrowStyle() {
|
|
@@ -43,7 +43,6 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
43
43
|
isSubmitting: boolean;
|
|
44
44
|
submitError: string | undefined;
|
|
45
45
|
}, {
|
|
46
|
-
isDecorativeSubmitStyle(): boolean;
|
|
47
46
|
submitButtonStyle(): BrandPageCssStyle;
|
|
48
47
|
submitButtonTextStyle(): BrandPageCssStyle;
|
|
49
48
|
contentPaddingStyle(): {
|
|
@@ -1,12 +1,11 @@
|
|
|
1
1
|
import { defineComponent } from 'vue';
|
|
2
2
|
import { FORM_FIELD_TYPES } from '@brand-page/models';
|
|
3
3
|
import { getEmailValidationError, getMessageValidationError, getNameValidationError, getPhoneValidationError, } from '@brand-page/utils';
|
|
4
|
-
import { isDecorativeButtonStyle } from '../../utils/button.util';
|
|
5
4
|
import brandPageClient from '../../clients/brand-page.client';
|
|
6
5
|
import { isEmail } from '../../../utils/validator.util';
|
|
7
6
|
import { ALIGN_CARD_CENTER, ALIGN_CARD_CENTER_IMAGE, ALIGN_CENTERED, ALIGN_LEFT_FULL_IMAGE, ALIGN_RIGHT_FULL_IMAGE, DISPLAY_STYLE_COLLAPSED, RECAPTCHA_ACTION_CONTACT_FORM, TEXT_ONLY, } from '../../constants';
|
|
8
7
|
import { getRenderText, contentPaddingStyle as toContentPaddingStyle, mutedTextForBackground, backgroundColorFromStyle, } from '@brand-page/utils';
|
|
9
|
-
import { hasRTEContent } from '@brand-page-maker/utils';
|
|
8
|
+
import { hasRTEContent, getPlainTextFromRTE } from '@brand-page-maker/utils';
|
|
10
9
|
import { useReCaptcha } from '../../composables/recaptcha.composable';
|
|
11
10
|
export default defineComponent({
|
|
12
11
|
props: {
|
|
@@ -45,12 +44,6 @@ export default defineComponent({
|
|
|
45
44
|
submitError: undefined,
|
|
46
45
|
}),
|
|
47
46
|
computed: {
|
|
48
|
-
// Decorative styles (brushstroke/arrow/paper) render a shape that needs width
|
|
49
|
-
// to read — at pure w-fit the arrow chevron collapses. Give the submit button a
|
|
50
|
-
// ~200px min-width so the decoration looks intentional without going full-width.
|
|
51
|
-
isDecorativeSubmitStyle() {
|
|
52
|
-
return isDecorativeButtonStyle(this.viewModel.buttonStyles?.selectedButtonStyleId);
|
|
53
|
-
},
|
|
54
47
|
submitButtonStyle() {
|
|
55
48
|
const buttonStyle = { ...this.viewModel.buttonStyles?.style };
|
|
56
49
|
const buttonTextStyle = {
|
|
@@ -120,7 +113,10 @@ export default defineComponent({
|
|
|
120
113
|
isEmail(this.viewModel.responseEmail));
|
|
121
114
|
},
|
|
122
115
|
title() {
|
|
123
|
-
|
|
116
|
+
// BP-5787: title may be RTE JSON (not a string), so `.trim()` would
|
|
117
|
+
// throw — read the visible text via getPlainTextFromRTE to decide
|
|
118
|
+
// whether to fall back to the default.
|
|
119
|
+
return getPlainTextFromRTE(this.viewModel.title)
|
|
124
120
|
? this.viewModel.title
|
|
125
121
|
: 'Contact Us';
|
|
126
122
|
},
|
|
@@ -158,8 +154,8 @@ export default defineComponent({
|
|
|
158
154
|
// differs by website type:
|
|
159
155
|
// - brandSite: the card style (card + divided layouts) or the section
|
|
160
156
|
// background (other layouts).
|
|
161
|
-
// - brand.page / brand.contact:
|
|
162
|
-
//
|
|
157
|
+
// - brand.page / brand.contact: there's no section background, so the
|
|
158
|
+
// coloured surface is the global button fill.
|
|
163
159
|
// Falls back to the title colour when there's no solid colour to anchor to.
|
|
164
160
|
const style = this.context.isBrandSite
|
|
165
161
|
? this.hasCard || this.isDividedContent
|
|
@@ -167,9 +163,7 @@ export default defineComponent({
|
|
|
167
163
|
: this.hasBgColor
|
|
168
164
|
? this.viewModel.backgroundStyle
|
|
169
165
|
: undefined
|
|
170
|
-
: this.viewModel.
|
|
171
|
-
? this.viewModel.cardStyle
|
|
172
|
-
: this.viewModel.buttonStyles?.style;
|
|
166
|
+
: this.viewModel.buttonStyles?.style;
|
|
173
167
|
return (mutedTextForBackground(backgroundColorFromStyle(style)) ??
|
|
174
168
|
this.viewModel.titleStyle?.color);
|
|
175
169
|
},
|
|
@@ -94,11 +94,6 @@ export default defineComponent({
|
|
|
94
94
|
if (borderRadius === '9999px') {
|
|
95
95
|
buttonStyle.borderRadius = '24px';
|
|
96
96
|
}
|
|
97
|
-
// Own background colour decouples the container from the button fill (BP-5800).
|
|
98
|
-
if (this.viewModel.backgroundStyle?.backgroundColor) {
|
|
99
|
-
buttonStyle.backgroundColor =
|
|
100
|
-
this.viewModel.backgroundStyle.backgroundColor;
|
|
101
|
-
}
|
|
102
97
|
return buttonStyle;
|
|
103
98
|
},
|
|
104
99
|
isFormDisabled() {
|
|
@@ -68,7 +68,16 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
68
68
|
}>, {}, {
|
|
69
69
|
type: string | undefined;
|
|
70
70
|
isImageBroken: boolean;
|
|
71
|
-
}, {
|
|
71
|
+
}, {
|
|
72
|
+
/**
|
|
73
|
+
* BP-5866: content images must never emit an empty `alt`. Reuses the
|
|
74
|
+
* shared alt fallback (author title → "{business}'s image" → "image") so
|
|
75
|
+
* a caller that passes no `alt-text` still renders descriptive text.
|
|
76
|
+
* Only consumed by the content `<FallbackImage>`; decorative/background
|
|
77
|
+
* images (rendered via `media`) and shapes never reach this path.
|
|
78
|
+
*/
|
|
79
|
+
effectiveAltText(): string;
|
|
80
|
+
}, {
|
|
72
81
|
onImageError(): void;
|
|
73
82
|
}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").PublicProps, Readonly<import("vue").ExtractPropTypes<{
|
|
74
83
|
mediaType: {
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { defineComponent } from 'vue';
|
|
2
|
+
import { getImageAltText } from '@brand-page/utils';
|
|
2
3
|
export default defineComponent({
|
|
3
4
|
props: {
|
|
4
5
|
mediaType: {
|
|
@@ -71,6 +72,18 @@ export default defineComponent({
|
|
|
71
72
|
isImageBroken: false,
|
|
72
73
|
};
|
|
73
74
|
},
|
|
75
|
+
computed: {
|
|
76
|
+
/**
|
|
77
|
+
* BP-5866: content images must never emit an empty `alt`. Reuses the
|
|
78
|
+
* shared alt fallback (author title → "{business}'s image" → "image") so
|
|
79
|
+
* a caller that passes no `alt-text` still renders descriptive text.
|
|
80
|
+
* Only consumed by the content `<FallbackImage>`; decorative/background
|
|
81
|
+
* images (rendered via `media`) and shapes never reach this path.
|
|
82
|
+
*/
|
|
83
|
+
effectiveAltText() {
|
|
84
|
+
return getImageAltText({ imageTitle: this.altText }, this.context);
|
|
85
|
+
},
|
|
86
|
+
},
|
|
74
87
|
methods: {
|
|
75
88
|
onImageError() {
|
|
76
89
|
this.isImageBroken = true;
|
|
@@ -75,6 +75,11 @@ declare const _default: import("vue").DefineComponent<import("vue").ExtractPropT
|
|
|
75
75
|
bpShowTopNavigationMobile(): boolean;
|
|
76
76
|
bpShowTopNavigationDesktop(): boolean;
|
|
77
77
|
slug(): string;
|
|
78
|
+
/**
|
|
79
|
+
* Text for the single page-level `<h1>` (BP-5866). Sourced from the
|
|
80
|
+
* business/site name + page name so it mirrors the SSR document `<title>`.
|
|
81
|
+
*/
|
|
82
|
+
pageHeadingText(): string;
|
|
78
83
|
shouldShowSaveContactWidget(): boolean;
|
|
79
84
|
isPremiumSubscription(): boolean;
|
|
80
85
|
shouldShowPopupBranding(): boolean;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import { defineComponent } from 'vue';
|
|
2
2
|
import { DEFAULT_FONT_FAMILY_KEY, FALLBACK_FONT_FAMILIES, FONT_FAMILY_CONFIGS, } from '../../constants';
|
|
3
|
-
import { getSlugFromContext } from '@brand-page/utils';
|
|
3
|
+
import { getSlugFromContext, getPageHeadingText } from '@brand-page/utils';
|
|
4
4
|
import { findNavItemByRelativePath } from '@brand-page/utils/route.util';
|
|
5
5
|
import { BRAND_PAGE_TYPES } from '@brand-page/models';
|
|
6
6
|
import { hasProfileContent as checkHasProfileContent } from '@brand-page/utils/vcard.util';
|
|
@@ -292,6 +292,13 @@ export default defineComponent({
|
|
|
292
292
|
slug() {
|
|
293
293
|
return getSlugFromContext(this.context);
|
|
294
294
|
},
|
|
295
|
+
/**
|
|
296
|
+
* Text for the single page-level `<h1>` (BP-5866). Sourced from the
|
|
297
|
+
* business/site name + page name so it mirrors the SSR document `<title>`.
|
|
298
|
+
*/
|
|
299
|
+
pageHeadingText() {
|
|
300
|
+
return getPageHeadingText(this.context);
|
|
301
|
+
},
|
|
295
302
|
shouldShowSaveContactWidget() {
|
|
296
303
|
try {
|
|
297
304
|
if ((!this.context.isPreview &&
|
|
@@ -77,11 +77,6 @@ export default defineComponent({
|
|
|
77
77
|
if (borderRadius === '9999px') {
|
|
78
78
|
buttonStyle.borderRadius = '26px';
|
|
79
79
|
}
|
|
80
|
-
// Own background colour decouples the container from the button fill (BP-5800).
|
|
81
|
-
if (this.viewModel.backgroundStyle?.backgroundColor) {
|
|
82
|
-
buttonStyle.backgroundColor =
|
|
83
|
-
this.viewModel.backgroundStyle.backgroundColor;
|
|
84
|
-
}
|
|
85
80
|
return buttonStyle;
|
|
86
81
|
},
|
|
87
82
|
continueButtonStyle() {
|
|
@@ -7,6 +7,14 @@ import { TextStyles } from './styles.model';
|
|
|
7
7
|
import { LogoStyles } from './logo.model';
|
|
8
8
|
import type { LogoImageModel, LogoTemplateImageModel } from './logo.model';
|
|
9
9
|
import type { BrandPagePaymentConfig } from './payment.model';
|
|
10
|
+
import type { JSONContent } from '@tiptap/vue-3';
|
|
11
|
+
/**
|
|
12
|
+
* BP-5787 — a rich-text field is either a legacy inline-HTML string or a
|
|
13
|
+
* Tiptap JSON document. Typing RTE content fields as RichTextValue (instead of
|
|
14
|
+
* `string`) forces every consumer to handle both forms — surfacing at compile
|
|
15
|
+
* time any code that assumes a plain string (e.g. `.replace`, `.length`).
|
|
16
|
+
*/
|
|
17
|
+
export type RichTextValue = string | JSONContent;
|
|
10
18
|
export * from './brand-page-context.model';
|
|
11
19
|
export * from './payment.model';
|
|
12
20
|
export * from './content.model';
|
|
@@ -148,7 +156,7 @@ export interface TextContent extends Content {
|
|
|
148
156
|
/**
|
|
149
157
|
* For BrandPage/BrandContact only
|
|
150
158
|
*/
|
|
151
|
-
text:
|
|
159
|
+
text: RichTextValue;
|
|
152
160
|
/**
|
|
153
161
|
* For BrandSite
|
|
154
162
|
*/
|
|
@@ -171,9 +179,9 @@ export interface TextContent extends Content {
|
|
|
171
179
|
}
|
|
172
180
|
export interface ProfileContent extends Content {
|
|
173
181
|
avatarImageUrl: string;
|
|
174
|
-
name:
|
|
175
|
-
title:
|
|
176
|
-
description:
|
|
182
|
+
name: RichTextValue;
|
|
183
|
+
title: RichTextValue;
|
|
184
|
+
description: RichTextValue;
|
|
177
185
|
backgroundColor: BrandPageCssStyle;
|
|
178
186
|
colorReplacements: ColorReplacement[];
|
|
179
187
|
mediaType?: string;
|
|
@@ -191,11 +199,10 @@ export interface MapContent extends Content {
|
|
|
191
199
|
}
|
|
192
200
|
export interface MailingListContent extends Content {
|
|
193
201
|
acceptedFields?: 'emailOnly' | 'nameAndEmail';
|
|
194
|
-
title:
|
|
202
|
+
title: RichTextValue;
|
|
195
203
|
buttonText: string;
|
|
196
204
|
titleStyle: TextStyleDeclaration;
|
|
197
205
|
buttonTextStyle: TextStyleDeclaration;
|
|
198
|
-
backgroundStyle?: BrandPageCssStyle;
|
|
199
206
|
}
|
|
200
207
|
export declare const FORM_FIELD_TYPES: {
|
|
201
208
|
readonly text: "text";
|
|
@@ -243,10 +250,10 @@ export interface FormField {
|
|
|
243
250
|
export interface ContactFormContent extends Content {
|
|
244
251
|
type: 'contact-form';
|
|
245
252
|
displayStyle: string;
|
|
246
|
-
title:
|
|
247
|
-
description:
|
|
253
|
+
title: RichTextValue;
|
|
254
|
+
description: RichTextValue;
|
|
248
255
|
buttonText: string;
|
|
249
|
-
successMessage:
|
|
256
|
+
successMessage: RichTextValue;
|
|
250
257
|
fields: FormField[];
|
|
251
258
|
responseEmail: string;
|
|
252
259
|
imageUrl?: string;
|
|
@@ -265,8 +272,8 @@ export interface ContactFormContent extends Content {
|
|
|
265
272
|
export interface BannerSectionContent extends Content {
|
|
266
273
|
type: 'banner-section';
|
|
267
274
|
imageUrl: string;
|
|
268
|
-
title:
|
|
269
|
-
description:
|
|
275
|
+
title: RichTextValue;
|
|
276
|
+
description: RichTextValue;
|
|
270
277
|
buttonText: string | false;
|
|
271
278
|
url: string;
|
|
272
279
|
email?: string;
|
|
@@ -293,8 +300,8 @@ export declare const MEDIA_TYPES: {
|
|
|
293
300
|
};
|
|
294
301
|
export type MediaType = keyof typeof MEDIA_TYPES;
|
|
295
302
|
export interface TextMediaItem extends ImageItem {
|
|
296
|
-
title:
|
|
297
|
-
paragraph:
|
|
303
|
+
title: RichTextValue;
|
|
304
|
+
paragraph: RichTextValue;
|
|
298
305
|
itemsId: number;
|
|
299
306
|
buttonText?: string | false;
|
|
300
307
|
buttonPageId?: string;
|
|
@@ -313,8 +320,8 @@ export interface TextShapeItem extends TextMediaItem {
|
|
|
313
320
|
export interface ShapeItem extends ImageItem {
|
|
314
321
|
colorReplacements: ColorReplacement[];
|
|
315
322
|
mediaType: MediaType;
|
|
316
|
-
title?:
|
|
317
|
-
paragraph?:
|
|
323
|
+
title?: RichTextValue;
|
|
324
|
+
paragraph?: RichTextValue;
|
|
318
325
|
titleOverride?: string;
|
|
319
326
|
paragraphOverride?: string;
|
|
320
327
|
}
|
|
@@ -322,9 +329,9 @@ export interface TestimonialItems {
|
|
|
322
329
|
/** Stable per-item identifier. See ImageItem.id. */
|
|
323
330
|
id: string;
|
|
324
331
|
imageUrl: string;
|
|
325
|
-
name:
|
|
326
|
-
position:
|
|
327
|
-
testimonials:
|
|
332
|
+
name: RichTextValue;
|
|
333
|
+
position: RichTextValue;
|
|
334
|
+
testimonials: RichTextValue;
|
|
328
335
|
colorReplacements: ColorReplacement[];
|
|
329
336
|
mediaType: string;
|
|
330
337
|
size?: string;
|
|
@@ -337,7 +344,7 @@ export interface TestimonialItems {
|
|
|
337
344
|
export interface TextItem {
|
|
338
345
|
/** Stable per-item identifier. See ImageItem.id. */
|
|
339
346
|
id: string;
|
|
340
|
-
text:
|
|
347
|
+
text: RichTextValue;
|
|
341
348
|
textStyle: TextStyleDeclaration;
|
|
342
349
|
textOverride?: string;
|
|
343
350
|
}
|
|
@@ -354,8 +361,8 @@ export interface ImagesSectionContent extends Content, MediaSection {
|
|
|
354
361
|
enablePopup: boolean;
|
|
355
362
|
}
|
|
356
363
|
export interface MediaSection extends Content {
|
|
357
|
-
title:
|
|
358
|
-
description:
|
|
364
|
+
title: RichTextValue;
|
|
365
|
+
description: RichTextValue;
|
|
359
366
|
displayStyle: ImagesSectionContentDisplayStyle;
|
|
360
367
|
items: TextShapeItem[] | TextMediaItem[];
|
|
361
368
|
titleStyle: TextStyleDeclaration;
|
|
@@ -372,7 +379,7 @@ export interface ColorReplacement {
|
|
|
372
379
|
}
|
|
373
380
|
export interface TestimonialSectionContent extends Content {
|
|
374
381
|
type: 'testimonial-section';
|
|
375
|
-
title:
|
|
382
|
+
title: RichTextValue;
|
|
376
383
|
displayStyle: string;
|
|
377
384
|
items: TestimonialItems[];
|
|
378
385
|
titleStyle: TextStyleDeclaration;
|
|
@@ -386,8 +393,8 @@ export interface TestimonialSectionContent extends Content {
|
|
|
386
393
|
export interface AboutSectionContent extends Content {
|
|
387
394
|
type: 'about-section';
|
|
388
395
|
imageUrl: string;
|
|
389
|
-
title:
|
|
390
|
-
paragraph:
|
|
396
|
+
title: RichTextValue;
|
|
397
|
+
paragraph: RichTextValue;
|
|
391
398
|
displayStyle: string;
|
|
392
399
|
titleStyle: TextStyleDeclaration;
|
|
393
400
|
paragraphStyle: TextStyleDeclaration;
|
|
@@ -411,7 +418,7 @@ export declare const SOCIAL_LINKS_ICON_DISPLAY_STYLES: {
|
|
|
411
418
|
export type SocialLinksIconDisplayStyle = keyof typeof SOCIAL_LINKS_ICON_DISPLAY_STYLES;
|
|
412
419
|
export interface SocialLinksContent extends Content {
|
|
413
420
|
type: 'social-links';
|
|
414
|
-
title:
|
|
421
|
+
title: RichTextValue;
|
|
415
422
|
links: LinksItem[];
|
|
416
423
|
iconDisplayStyle: SocialLinksIconDisplayStyle;
|
|
417
424
|
iconFillStyles: BrandPageCssStyle;
|
|
@@ -434,8 +441,8 @@ export interface DividerSectionContent extends Content {
|
|
|
434
441
|
}
|
|
435
442
|
export interface BookingSectionContent extends Content {
|
|
436
443
|
type: 'booking-section';
|
|
437
|
-
title:
|
|
438
|
-
description:
|
|
444
|
+
title: RichTextValue;
|
|
445
|
+
description: RichTextValue;
|
|
439
446
|
buttonText: string;
|
|
440
447
|
url: string;
|
|
441
448
|
email?: string;
|
|
@@ -134,7 +134,6 @@ export interface RequestPaymentContent extends Content {
|
|
|
134
134
|
descriptionStyle?: TextStyleDeclaration;
|
|
135
135
|
itemTextStyle: TextStyleDeclaration;
|
|
136
136
|
buttonTextStyle?: TextStyleDeclaration;
|
|
137
|
-
backgroundStyle?: BrandPageCssStyle;
|
|
138
137
|
}
|
|
139
138
|
export interface ShopContentConfig extends PaymentConfig {
|
|
140
139
|
paymentOptionDisplayType: PaymentOptionDisplayType;
|
|
@@ -175,7 +174,6 @@ export interface SupportMeContent extends Content {
|
|
|
175
174
|
descriptionStyle: TextStyleDeclaration;
|
|
176
175
|
buttonTextStyle: TextStyleDeclaration;
|
|
177
176
|
itemTextStyle: TextStyleDeclaration;
|
|
178
|
-
backgroundStyle?: BrandPageCssStyle;
|
|
179
177
|
}
|
|
180
178
|
export interface CreateStripePaymentIntentResponse {
|
|
181
179
|
paymentIntent: StripePaymentIntent;
|
|
@@ -5,8 +5,3 @@ import type { ButtonStyles } from '../models';
|
|
|
5
5
|
* @returns The calculated box shadow CSS value
|
|
6
6
|
*/
|
|
7
7
|
export declare const getBoxShadowValue: (buttonStyles: ButtonStyles) => string;
|
|
8
|
-
export declare const BUTTON_STYLE_BRUSHSTROKE = "BUTTON_STYLE_19";
|
|
9
|
-
export declare const BUTTON_STYLE_ARROW = "BUTTON_STYLE_20";
|
|
10
|
-
export declare const BUTTON_STYLE_PAPER = "BUTTON_STYLE_21";
|
|
11
|
-
export declare const DECORATIVE_BUTTON_STYLE_IDS: string[];
|
|
12
|
-
export declare const isDecorativeButtonStyle: (styleId?: string) => boolean;
|
|
@@ -27,16 +27,3 @@ export const getBoxShadowValue = (buttonStyles) => {
|
|
|
27
27
|
}
|
|
28
28
|
return boxShadowValue;
|
|
29
29
|
};
|
|
30
|
-
// The "decorative" button styles — brushstroke / arrow / torn-paper — whose visual
|
|
31
|
-
// is drawn by ButtonStyleWrapper rather than plain CSS. Their banner-like SVG
|
|
32
|
-
// decoration needs the button to be reasonably wide to render legibly, so narrow
|
|
33
|
-
// (w-fit) hosts should widen when one of these is active (BP-5800).
|
|
34
|
-
export const BUTTON_STYLE_BRUSHSTROKE = 'BUTTON_STYLE_19';
|
|
35
|
-
export const BUTTON_STYLE_ARROW = 'BUTTON_STYLE_20';
|
|
36
|
-
export const BUTTON_STYLE_PAPER = 'BUTTON_STYLE_21';
|
|
37
|
-
export const DECORATIVE_BUTTON_STYLE_IDS = [
|
|
38
|
-
BUTTON_STYLE_BRUSHSTROKE,
|
|
39
|
-
BUTTON_STYLE_ARROW,
|
|
40
|
-
BUTTON_STYLE_PAPER,
|
|
41
|
-
];
|
|
42
|
-
export const isDecorativeButtonStyle = (styleId) => !!styleId && DECORATIVE_BUTTON_STYLE_IDS.includes(styleId);
|
|
@@ -6,6 +6,7 @@ export * from './model.util';
|
|
|
6
6
|
export * from './validation.util';
|
|
7
7
|
export * from './payment.util';
|
|
8
8
|
export * from './image.util';
|
|
9
|
+
export * from './page-heading.util';
|
|
9
10
|
export * from './font-loader.util';
|
|
10
11
|
export * from './aspect-ratio.util';
|
|
11
12
|
export * from './context.util';
|
|
@@ -6,6 +6,7 @@ export * from './model.util';
|
|
|
6
6
|
export * from './validation.util';
|
|
7
7
|
export * from './payment.util';
|
|
8
8
|
export * from './image.util';
|
|
9
|
+
export * from './page-heading.util';
|
|
9
10
|
export * from './font-loader.util';
|
|
10
11
|
export * from './aspect-ratio.util';
|
|
11
12
|
export * from './context.util';
|